/* ==========================================================================
   Hirable — Design « verre liquide » (couche visuelle uniquement)
   Actif seulement si <html class="liquid"> : retirer la classe (ou ce fichier)
   rend le site exactement comme avant. Aucune règle ne touche au studio CV /
   lettre (aperçu A4), ni aux fonctions du site.
   ========================================================================== */

html.liquid {
  --lq-ink: #1d2f55;
  --lq-blue: #2a7faa;
  --lq-cyan: #50b9b2;
  --lq-mint: #5bd3ad;
  --lq-glass: rgba(255, 255, 255, 0.58);
  --lq-glass-strong: rgba(255, 255, 255, 0.78);
  --lq-edge: rgba(255, 255, 255, 0.75);
  --lq-shadow: 0 10px 40px -12px rgba(29, 47, 85, 0.22), 0 2px 8px rgba(29, 47, 85, 0.06);
  --lq-blur: blur(18px) saturate(170%);
}

/* ── Fond vivant : taches de couleur liquides qui dérivent lentement ── */
html.liquid { background-color: #eef4f8; }
html.liquid body::before,
html.liquid body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.68;
  will-change: transform;
}
html.liquid body::before {
  top: -25vmax;
  left: -20vmax;
  background: radial-gradient(circle at 30% 30%, rgba(91, 211, 173, 0.75), rgba(80, 185, 178, 0.35) 45%, transparent 70%);
  animation: lq-drift-a 26s ease-in-out infinite alternate;
}
html.liquid body::after {
  bottom: -30vmax;
  right: -25vmax;
  background: radial-gradient(circle at 60% 40%, rgba(42, 127, 170, 0.6), rgba(29, 47, 85, 0.25) 50%, transparent 72%);
  animation: lq-drift-b 32s ease-in-out infinite alternate;
}
@keyframes lq-drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(18vw, 12vh, 0) scale(1.12); }
  100% { transform: translate3d(6vw, 30vh, 0) scale(0.95); }
}
@keyframes lq-drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-16vw, -14vh, 0) scale(1.08); }
  100% { transform: translate3d(-4vw, -28vh, 0) scale(1.15); }
}

/* Les vues publiques laissent voir le fond ; le studio garde son fond calme */
html.liquid body.bg-slate-50,
html.liquid #view-home,
html.liquid #view-home > section:not(.bg-emerald-900),
html.liquid #view-history,
html.liquid #view-jobs,
html.liquid #view-blog,
html.liquid #view-jobs > section,
html.liquid #view-blog > section {
  background: transparent !important;
}
html.liquid #view-home > section { border-color: rgba(255, 255, 255, 0.55) !important; }

/* ── Barre de navigation en verre ── */
html.liquid header.sticky {
  background: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: var(--lq-blur);
  backdrop-filter: var(--lq-blur);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 6px 24px -10px rgba(29, 47, 85, 0.18), inset 0 -1px 0 rgba(29, 47, 85, 0.04) !important;
}
html.liquid header.sticky nav button {
  padding: 6px 12px;
  border-radius: 999px;
  transition: background-color .25s ease, box-shadow .25s ease, color .2s ease;
}
html.liquid header.sticky nav button:hover {
  background: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 1px 0 #fff, 0 4px 14px -6px rgba(29, 47, 85, 0.25);
}

/* ── Cartes en verre liquide (accueil, offres, blog, mes candidatures) ── */
html.liquid #view-home .bg-white.rounded-2xl,
html.liquid #view-home .bg-white.rounded-3xl,
html.liquid #view-home .bg-slate-50.rounded-2xl,
html.liquid #view-home .bg-slate-50.rounded-3xl,
html.liquid #view-jobs .bg-white.rounded-2xl,
html.liquid #view-jobs .bg-white.rounded-3xl,
html.liquid #view-blog .bg-white.rounded-2xl,
html.liquid #view-blog .bg-white.rounded-3xl,
html.liquid #view-history .bg-white.rounded-2xl,
html.liquid #view-history .bg-white.rounded-3xl,
html.liquid .lq-glass {
  position: relative;
  background:
    radial-gradient(120% 80% at var(--lq-x, 20%) var(--lq-y, 0%), rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.42)) !important;
  -webkit-backdrop-filter: var(--lq-blur);
  backdrop-filter: var(--lq-blur);
  border-color: var(--lq-edge) !important;
  box-shadow: var(--lq-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.35) !important;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
/* Survol : la carte se soulève et le reflet suit la souris (liquid.js) */
@media (hover: hover) {
  html.liquid #view-home .bg-white.rounded-3xl:hover,
  html.liquid #view-jobs .bg-white.rounded-2xl:hover,
  html.liquid #view-jobs .bg-white.rounded-3xl:hover,
  html.liquid #view-blog .bg-white.rounded-2xl:hover,
  html.liquid #view-blog .bg-white.rounded-3xl:hover,
  html.liquid #view-history .bg-white.rounded-2xl:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 50px -18px rgba(29, 47, 85, 0.35), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255, 255, 255, 0.4) !important;
  }
}

/* Carte sombre (Pack 10…) : verre fumé */
html.liquid #view-home .bg-slate-900.rounded-3xl,
html.liquid #view-home .bg-slate-950.rounded-3xl {
  background: linear-gradient(140deg, rgba(16, 33, 53, 0.92), rgba(29, 47, 85, 0.82)) !important;
  -webkit-backdrop-filter: var(--lq-blur);
  backdrop-filter: var(--lq-blur);
  box-shadow: 0 24px 60px -20px rgba(16, 33, 53, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* ── Boutons principaux : reflet qui traverse le bouton ── */
html.liquid .gradient-cvtojob {
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 34px -12px rgba(42, 127, 170, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
html.liquid .gradient-cvtojob::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  animation: lq-shine 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lq-shine {
  0%, 60% { left: -60%; }
  100%    { left: 130%; }
}
html.liquid button.btn-soft,
html.liquid a.btn-soft {
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow: inset 0 1px 0 #fff, 0 6px 18px -10px rgba(29, 47, 85, 0.35);
}
html.liquid button.btn-soft:hover,
html.liquid a.btn-soft:hover { background: rgba(255, 255, 255, 0.85); }
html.liquid .hs-btn {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 #fff, 0 6px 18px -10px rgba(29, 47, 85, 0.3);
}

/* ── Titre d'accueil : halo lumineux qui suit la souris (liquid.js) ── */
html.liquid #home { isolation: isolate; }
html.liquid #home::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--lq-hx, 50%);
  top: var(--lq-hy, 30%);
  width: 620px;
  height: 620px;
  margin: -310px 0 0 -310px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 211, 173, 0.35), rgba(42, 127, 170, 0.12) 45%, transparent 70%);
  filter: blur(10px);
  transition: left .6s cubic-bezier(.2, .8, .2, 1), top .6s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}

/* ── Apparition douce des sections au défilement (seulement si liquid.js est actif) ── */
html.liquid.lq-reveal-on .lq-reveal {
  opacity: 0;
  transform: translateY(28px) scale(.985);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1);
}
html.liquid.lq-reveal-on .lq-reveal.lq-in { opacity: 1; transform: none; }

/* ── Pied de page : verre sombre ── */
html.liquid #site-footer {
  background: linear-gradient(180deg, rgba(16, 33, 53, 0.94), rgba(10, 20, 35, 0.98)) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(91, 211, 173, 0.25);
}

/* ── Fenêtres (paiement, compte, téléchargement…) : fond flouté ── */
html.liquid .fixed.inset-0.bg-slate-900\/60,
html.liquid .fixed.inset-0.bg-slate-900\/50,
html.liquid .fixed.inset-0.bg-slate-950\/60 {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ── Pages publiques du blog et des offres (classe lq-pages sur <html>) ── */
html.liquid.lq-pages main.bg-white {
  background: rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: var(--lq-blur);
  backdrop-filter: var(--lq-blur);
  border-radius: 28px;
  margin-top: 24px;
  margin-bottom: 24px;
  box-shadow: var(--lq-shadow), inset 0 1px 0 #fff;
}
html.liquid.lq-pages main .bg-white.rounded-2xl,
html.liquid.lq-pages main .bg-white.rounded-3xl,
html.liquid.lq-pages main .bg-slate-50.rounded-2xl,
html.liquid.lq-pages main .bg-slate-50.rounded-3xl {
  position: relative;
  background:
    radial-gradient(120% 80% at var(--lq-x, 20%) var(--lq-y, 0%), rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.45)) !important;
  -webkit-backdrop-filter: var(--lq-blur);
  backdrop-filter: var(--lq-blur);
  border-color: var(--lq-edge) !important;
  box-shadow: var(--lq-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.35) !important;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
html.liquid.lq-pages main .bg-emerald-50.rounded-3xl {
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.78), rgba(209, 250, 229, 0.5)) !important;
  -webkit-backdrop-filter: var(--lq-blur);
  backdrop-filter: var(--lq-blur);
  border-color: rgba(167, 243, 208, 0.9) !important;
  box-shadow: var(--lq-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
@media (hover: hover) {
  html.liquid.lq-pages main a.bg-white.rounded-3xl:hover,
  html.liquid.lq-pages main article.bg-white.rounded-3xl:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 50px -18px rgba(29, 47, 85, 0.35), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255, 255, 255, 0.4) !important;
  }
}
html.liquid.lq-pages body > section {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}
html.liquid.lq-pages body > footer {
  background: linear-gradient(180deg, rgba(16, 33, 53, 0.94), rgba(10, 20, 35, 0.98)) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(91, 211, 173, 0.25);
}
html.liquid.lq-pages header.sticky nav a {
  padding: 6px 12px;
  border-radius: 999px;
  transition: background-color .25s ease, box-shadow .25s ease;
}
html.liquid.lq-pages header.sticky nav a:hover {
  background: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 1px 0 #fff, 0 4px 14px -6px rgba(29, 47, 85, 0.25);
}

/* ── Téléphones : flou plus léger pour rester fluide ── */
@media (max-width: 767px) {
  html.liquid { --lq-blur: blur(10px) saturate(150%); }
  html.liquid body::before,
  html.liquid body::after { filter: blur(40px); opacity: 0.45; }
  html.liquid #home::before { display: none; }
}

/* Navigateurs sans flou d'arrière-plan : verre plus opaque, toujours lisible */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.liquid #view-home .bg-white.rounded-2xl,
  html.liquid #view-home .bg-white.rounded-3xl,
  html.liquid #view-jobs .bg-white.rounded-2xl,
  html.liquid #view-jobs .bg-white.rounded-3xl,
  html.liquid #view-blog .bg-white.rounded-2xl,
  html.liquid #view-blog .bg-white.rounded-3xl,
  html.liquid #view-history .bg-white.rounded-2xl,
  html.liquid #view-history .bg-white.rounded-3xl,
  html.liquid.lq-pages main .bg-white.rounded-2xl,
  html.liquid.lq-pages main .bg-white.rounded-3xl,
  html.liquid.lq-pages main.bg-white { background: rgba(255, 255, 255, 0.94) !important; }
  html.liquid header.sticky { background: rgba(255, 255, 255, 0.95) !important; }
}

/* Mouvement réduit : tout reste immobile */
@media (prefers-reduced-motion: reduce) {
  html.liquid body::before,
  html.liquid body::after,
  html.liquid .gradient-cvtojob::after { animation: none !important; }
  html.liquid.lq-reveal-on .lq-reveal { opacity: 1; transform: none; transition: none; }
  html.liquid #home::before { transition: none; }
}