/* ============================================================
   AvaloonLab — identité jour / nuit
   Jour : laboratoire lumineux · Nuit : atelier d'alchimiste
   Chargée juste après style.css : elle remplace les couleurs,
   polices, formes et ajoute les animations. Les pages qui ont
   leur propre feuille (avaloon.css, emporte.css) gardent la main
   sur leurs détails.
   ============================================================ */

/* ---------- Jour : laboratoire lumineux ---------- */
:root{
  --bg:#F4FAFC; --bg-2:#EAF4F7;
  --surface:#FFFFFF; --surface-2:#EEF6F9;
  --ink:#0E2A33; --ink-soft:#3D5A63; --muted:#557079;
  --line:#CFE6EC; --line-strong:#B0D2DA;
  --accent:#0A9FBD; --accent-2:#6B4FD8; --accent-ink:#0A7E96;
  --chaleur:#FFC857; --sur-accent:#FFFFFF;
  --ok:#1F9D55; --warn:#B9740A;
  --grad:linear-gradient(135deg,#0AA9C8 0%,#0A8FB0 100%);
  --sans:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --police-titre:"Fraunces",Georgia,serif;
  --r-s:8px; --r-m:12px; --r-l:16px; --r-btn:999px;
  --duree-apparition:.45s;
  --shadow-s:0 1px 2px rgba(14,42,51,.05),0 1px 3px rgba(14,42,51,.07);
  --shadow-m:0 8px 18px -8px rgba(14,42,51,.16),0 2px 6px rgba(14,42,51,.05);
  --shadow-l:0 24px 48px -20px rgba(14,42,51,.26),0 8px 20px -12px rgba(14,42,51,.14);
}

/* ---------- Nuit : atelier d'alchimiste ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#17120E; --bg-2:#1C1611;
    --surface:#211A14; --surface-2:#2A2119;
    --ink:#EADBC0; --ink-soft:#D5C4A6; --muted:#B9A88C;
    --line:#3A2E22; --line-strong:#4E3E2D;
    --accent:#D2A54A; --accent-2:#48C9D8; --accent-ink:#E3BC66;
    --chaleur:#D9733B; --sur-accent:#17120E;
    --ok:#7FC46B; --warn:#E39A4B;
    --grad:linear-gradient(135deg,#DDB35A 0%,#B98A35 100%);
    --police-titre:"Cinzel",Georgia,serif;
    --r-s:4px; --r-m:6px; --r-l:8px; --r-btn:6px;
    --duree-apparition:.9s;
    --shadow-s:0 1px 2px rgba(0,0,0,.45);
    --shadow-m:0 10px 22px -10px rgba(0,0,0,.7);
    --shadow-l:0 30px 60px -24px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --bg:#17120E; --bg-2:#1C1611;
  --surface:#211A14; --surface-2:#2A2119;
  --ink:#EADBC0; --ink-soft:#D5C4A6; --muted:#B9A88C;
  --line:#3A2E22; --line-strong:#4E3E2D;
  --accent:#D2A54A; --accent-2:#48C9D8; --accent-ink:#E3BC66;
  --chaleur:#D9733B; --sur-accent:#17120E;
  --ok:#7FC46B; --warn:#E39A4B;
  --grad:linear-gradient(135deg,#DDB35A 0%,#B98A35 100%);
  --police-titre:"Cinzel",Georgia,serif;
  --r-s:4px; --r-m:6px; --r-l:8px; --r-btn:6px;
  --duree-apparition:.9s;
  --shadow-s:0 1px 2px rgba(0,0,0,.45);
  --shadow-m:0 10px 22px -10px rgba(0,0,0,.7);
  --shadow-l:0 30px 60px -24px rgba(0,0,0,.85);
}

/* ---------- Typographie ---------- */
h1,h2,h3{font-family:var(--police-titre);font-weight:500;letter-spacing:-.01em}
h4,.card h3,.coll-txt strong,.li-main strong,.drawer-head h2{font-family:var(--sans);font-weight:500;letter-spacing:0}
:root[data-theme="dark"] h1,:root[data-theme="dark"] h2,:root[data-theme="dark"] .step h3,:root[data-theme="dark"] .mat-card h3{letter-spacing:.02em;font-weight:600}
.btn,.tab,.price,.modal-price{font-weight:500}

/* ---------- Formes ---------- */
.btn,.tab,.nav a,.hero-points li,.badge,.quick-nav a,.tag-dispo,.toast,.toast-btn{border-radius:var(--r-btn)}
.icon-btn{border-radius:calc(var(--r-s) + 4px)}
.icon-btn svg,.quick-nav svg{width:20px;height:20px;display:block}
.quick-nav a{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.quick-nav svg{width:17px;height:17px}

/* Texte sur couleur d'accent : blanc le jour, encre sombre la nuit */
.btn-primary,.btn-primary:hover,.count,.tab[aria-selected="true"],.badge,.step::before,
.toast-btn,.sent-ico,.quick-nav a[aria-current="page"]{color:var(--sur-accent)}
.btn-primary{box-shadow:0 8px 20px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
.cta-band{color:var(--sur-accent)}
.cta-band .btn,.cta-band .btn:hover{background:var(--bg);color:var(--ink)}
.cta-band .btn-primary,.cta-band .btn-primary:hover{background:var(--ink);color:var(--bg)}

/* ---------- Héros ---------- */
.hero h1 em{
  font-style:italic;background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--accent);position:relative
}
/* Jour : un filament se dépose sous le mot mis en avant */
.hero h1 em::after{
  content:"";position:absolute;left:0;bottom:.02em;height:3px;width:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform-origin:left;transform:scaleX(0);animation:filament 1.1s .35s cubic-bezier(.6,0,.2,1) forwards
}
@keyframes filament{to{transform:scaleX(1)}}
.mot{display:inline-block;transition:opacity .35s ease}
.mot.change{opacity:0}

/* Nuit : le mot s'illumine doucement, la braise remplace le filament */
:root[data-theme="dark"] .hero h1 em{font-style:normal;animation:lueur 4.5s ease-in-out infinite}
:root[data-theme="dark"] .hero h1 em::after{display:none}
@keyframes lueur{
  0%,100%{text-shadow:0 0 10px color-mix(in srgb,var(--accent) 25%,transparent)}
  50%{text-shadow:0 0 22px color-mix(in srgb,var(--accent) 55%,transparent)}
}
:root[data-theme="dark"] .hero::before{
  background:
    radial-gradient(50% 55% at 20% 25%,color-mix(in srgb,#D2A54A 22%,transparent),transparent 70%),
    radial-gradient(45% 45% at 85% 10%,color-mix(in srgb,#D9733B 18%,transparent),transparent 70%),
    radial-gradient(28% 28% at 72% 40%,color-mix(in srgb,#48C9D8 8%,transparent),transparent 70%);
  animation:respire 7s ease-in-out infinite
}
@keyframes respire{0%,100%{opacity:.75}50%{opacity:1}}
:root[data-theme="dark"] .hero::after{
  opacity:.12;background-size:auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23D2A54A' stroke-width='1.2'%3E%3Cpath d='M20 18v22M20 24l9-6M20 32l9 6'/%3E%3Cpath d='M86 70l8 14 8-14M94 70v22'/%3E%3Cpath d='M60 100l6-10 6 10-6 10z'/%3E%3C/svg%3E")
}
:root[data-theme="dark"] .hero-logo img{animation:float 7s ease-in-out infinite,halo 5s ease-in-out infinite}
@keyframes halo{
  0%,100%{box-shadow:var(--shadow-l),0 0 0 1px #3A2E22,0 0 30px -6px rgba(210,165,74,.25)}
  50%{box-shadow:var(--shadow-l),0 0 0 1px #4E3E2D,0 0 50px -4px rgba(210,165,74,.45)}
}
.braises{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* ---------- Petits repères de section ---------- */
.sec-head .mono{display:flex!important;align-items:center;gap:9px}
.sec-head .mono::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--accent);flex:none}
:root[data-theme="dark"] .sec-head .mono::before{
  width:14px;height:14px;border-radius:0;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M7 1l5 6-5 6-5-6z'/%3E%3Cpath d='M7 4v6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M7 1l5 6-5 6-5-6z'/%3E%3Cpath d='M7 4v6'/%3E%3C/svg%3E") center/contain no-repeat
}

/* Nuit : coins dorés discrets sur les cartes d'information */
:root[data-theme="dark"] .step,:root[data-theme="dark"] .mat-card{position:relative}
:root[data-theme="dark"] .step::after,:root[data-theme="dark"] .mat-card::after{
  content:"";position:absolute;inset:6px;pointer-events:none;
  background:
    linear-gradient(var(--accent),var(--accent)) top left/10px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) top left/1px 10px no-repeat,
    linear-gradient(var(--accent),var(--accent)) bottom right/10px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) bottom right/1px 10px no-repeat;
  opacity:.55
}
:root[data-theme="dark"] .card:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:var(--shadow-m),0 0 24px -10px rgba(210,165,74,.45)}

/* ---------- Apparition au défilement (ajoutée par identite.js) ---------- */
.apparait{opacity:0;transform:translateY(14px);transition:opacity var(--duree-apparition) ease,transform var(--duree-apparition) cubic-bezier(.2,.7,.2,1)}
:root[data-theme="dark"] .apparait{transform:translateY(8px)}
.apparait.vu{opacity:1;transform:none}

/* ---------- Bascule jour / nuit en douceur ---------- */
html.bascule body,html.bascule body *{
  transition:background-color .5s ease,color .5s ease,border-color .5s ease,box-shadow .5s ease!important
}

/* ---------- Mouvements réduits ---------- */
@media (prefers-reduced-motion:reduce){
  .hero h1 em::after{animation:none;transform:none}
  :root[data-theme="dark"] .hero h1 em,:root[data-theme="dark"] .hero::before,:root[data-theme="dark"] .hero-logo img{animation:none}
  .apparait{opacity:1;transform:none;transition:none}
  .braises{display:none}
}