/* ============================================================
   Clinique psychiatrique Espoir — El Menzah 9
   Palette lifted from the clinic's own entrance photograph:
   the sign's royal blue, the smoked glass, the marble step,
   the stone facade. Modern, wide, quiet, blue.
   ============================================================ */

/* ── Tokens ───────────────────────────────────────────────── */
:root{
  /* blues, straight off the sign */
  --bleu:        #2B4B9B;   /* enseigne */
  --bleu-vif:    #3F6BD4;   /* enseigne, lit */
  --bleu-pale:   #8EACC6;   /* ciel dans la vitre */
  --bleu-wash:   #EDF2FA;   /* the same blue, one drop in a litre */
  --rouge:       #C0392F;   /* le rouge du logo d'origine */
  --teal:        #0E9BA8;   /* sa virgule turquoise */
  --nuit:        #10222F;   /* verre fumé */
  --nuit-2:      #17303F;

  /* stone */
  --blanc:       #FFFFFF;
  --pierre:      #F5F7F6;   /* facade */
  --pierre-2:    #E8EBE6;   /* marche en marbre */
  --trait:       #DDE2DE;

  /* ink */
  --ink:         #101B22;
  --ink-2:       #4E5D66;
  --ink-3:       #76858C;
  --sur-nuit:    #EDF1F3;
  --sur-nuit-2:  #C9D7DF;

  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --disp: "Bricolage Grotesque", "Archivo", ui-sans-serif, system-ui, sans-serif;
  --ar:   "Noto Kufi Arabic", "Archivo", sans-serif;

  --pad: clamp(20px, 5vw, 72px);
  --gutter: clamp(14px, 1.8vw, 24px);
  --r: 18px;
  --r-sm: 12px;

  --sh-1: 0 1px 2px rgba(16,34,47,.06), 0 12px 28px -22px rgba(16,34,47,.45);
  --sh-2: 0 2px 6px rgba(16,34,47,.08), 0 28px 50px -32px rgba(16,34,47,.55);
  --sh-blue: 0 2px 6px rgba(43,75,155,.22), 0 20px 40px -24px rgba(43,75,155,.65);

  --ease: cubic-bezier(.16,.84,.30,1);
  --ease-soft: cubic-bezier(.33,.02,.16,1);
}

/* ── Reset ────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0;
  background:var(--pierre);
  color:var(--ink);
  font:400 1.0625rem/1.65 var(--sans);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,iframe{ display:block; max-width:100% }
img{ height:auto }
a{ color:inherit }
h1,h2,h3,p,figure,ul,ol,dl{ margin:0 }
ul,ol{ padding:0; list-style:none }
button,input,select,textarea{ font:inherit; color:inherit }
:focus-visible{ outline:3px solid var(--bleu-vif); outline-offset:3px; border-radius:6px }
.sprite{ position:absolute; width:0; height:0; overflow:hidden }
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0
}
section[id], main[id]{ scroll-margin-top:96px }
.skip{
  position:absolute; inset-inline-start:12px; top:-80px; z-index:80;
  background:var(--bleu); color:#fff;
  padding:12px 18px; border-radius:var(--r-sm); font-weight:600;
  transition:top .2s var(--ease);
}
.skip:focus{ top:12px }

/* ── Type ─────────────────────────────────────────────────── */
.display{
  font-family:var(--disp);
  font-weight:700;
  font-size:clamp(2.5rem, 4.9vw, 4.6rem);
  line-height:1.0;
  letter-spacing:-.038em;
  text-wrap:balance;
}
.display em{ font-style:normal; color:var(--bleu) }
.h2{
  font-family:var(--disp);
  font-weight:600;
  font-size:clamp(1.9rem, 3.4vw, 3rem);
  line-height:1.05;
  letter-spacing:-.032em;
  text-wrap:balance;
  max-width:19ch;
}
.lede{
  margin-top:1.15rem;
  font-size:clamp(1.05rem, 1.25vw, 1.2rem);
  line-height:1.6;
  color:var(--ink-2);
  max-width:56ch;
}
.note{
  margin-top:2.25rem;
  font-size:.95rem;
  line-height:1.6;
  color:var(--ink-3);
  max-width:72ch;
  padding-inline-start:1.15rem;
  border-inline-start:1px solid var(--trait);
}
.note--inline{ margin-top:1.75rem }

/* ── Layout ───────────────────────────────────────────────── */
.wrap{ width:100%; max-width:1300px; margin-inline:auto; padding-inline:var(--pad) }
.wrap--narrow{ max-width:920px }
.section{ padding-block:clamp(76px,9vw,148px) }
.section--pale{ background:var(--blanc) }
.section__head{ max-width:64ch }

.wrap--split{ display:grid; gap:clamp(32px,4.5vw,80px); grid-template-columns:minmax(0,1fr) }
.split__cta{ margin-top:2rem }
@media (min-width:920px){
  .wrap--split{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:start }
}

/* Drenched fields ------------------------------------------ */
.field{
  position:relative;
  padding-block:clamp(76px,9vw,148px);
  color:var(--sur-nuit);
  overflow:hidden;
}
.field .lede{ color:var(--sur-nuit-2) }
.field .h2{ color:var(--sur-nuit) }
.field--green{ background:var(--bleu) }              /* enseigne */
.field--blue { background:var(--nuit) }              /* verre fumé */
.field--deep { background:var(--nuit-2) }

/* le protocole : une vraie photographie sous le texte, pas un aplat de bleu */
.field--photo{
  background-color:var(--nuit);
  background-image:
    linear-gradient(150deg, rgba(16,34,47,.93) 0%, rgba(20,44,86,.86) 48%, rgba(16,34,47,.94) 100%),
    url("../img/patio.jpg");
  background-size:cover;
  background-position:center 28%;
  background-repeat:no-repeat;
}
@media (min-width:900px){ .field--photo{ background-attachment:scroll, fixed } }
.field--photo::after{
  background:radial-gradient(52% 44% at 82% 8%, rgba(143,172,198,.22), transparent 70%);
}
.field--photo .path::before{ background:rgba(237,241,243,.24) }
.field--photo .path::after{ background:linear-gradient(to bottom, #fff, var(--bleu-pale)) }
.field--photo .path__step::before{ background:var(--nuit); border-color:rgba(237,241,243,.5) }
.field--photo .path__step.is-set::before{ background:#fff; border-color:#fff }
.field--photo .path__step p{ color:var(--sur-nuit-2) }
.field--photo .path__when{ color:var(--bleu-pale)!important }
.field--photo .path__step h3{ color:#fff }

/* a slow light passing over the glazed fields */
.field::after{
  content:"";
  position:absolute; inset:-30% -10% auto -10%; height:120%;
  background:radial-gradient(60% 55% at 22% 0%, rgba(143,177,214,.20), transparent 70%),
             radial-gradient(48% 45% at 88% 18%, rgba(63,107,212,.22), transparent 72%);
  pointer-events:none;
}
.field > *{ position:relative; z-index:1 }

/* ── Buttons ──────────────────────────────────────────────── */
.btn{
  --btn-bg:var(--bleu);
  --btn-fg:#fff;
  display:inline-flex; align-items:center; gap:.6em;
  min-height:48px;
  padding:.85em 1.35em;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid transparent; border-radius:999px;
  font-weight:600; font-size:.98rem; letter-spacing:-.012em;
  text-decoration:none; cursor:pointer;
  box-shadow:var(--sh-blue);
  transition:transform .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(43,75,155,.24), 0 26px 46px -24px rgba(43,75,155,.7) }
.btn:active{ transform:translateY(0) }
.btn .ico{ transition:transform .25s var(--ease) }
.btn:hover .ico{ transform:scale(1.08) rotate(-6deg) }
.btn--call{ --btn-bg:var(--bleu) }
.btn--call:hover{ --btn-bg:var(--bleu-vif) }
.btn--lg{ padding:1.05em 1.7em; font-size:1.06rem }
.btn--block{ width:100%; justify-content:center }
.btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--ink);
  border-color:var(--trait); box-shadow:none;
}
.btn--ghost:hover{ --btn-bg:var(--blanc); border-color:var(--bleu-pale); box-shadow:var(--sh-1) }
.field .btn--ghost{ --btn-fg:#fff; border-color:rgba(237,241,243,.34) }
.field .btn--ghost:hover{ --btn-bg:rgba(255,255,255,.1); border-color:rgba(237,241,243,.6) }
.field .btn--call{ --btn-bg:#fff; --btn-fg:var(--bleu); box-shadow:0 18px 40px -24px rgba(0,0,0,.8) }
.field .btn--call:hover{ --btn-bg:#fff; --btn-fg:var(--bleu-vif) }

.ico{ width:1.15em; height:1.15em; flex:none }
.ico--lg{ width:26px; height:26px }

/* ── Masthead ─────────────────────────────────────────────── */
.masthead{
  position:sticky; top:0; z-index:60;
  background:rgba(245,247,246,.72);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.masthead.is-stuck{
  background:rgba(245,247,246,.9);
  border-bottom-color:var(--trait);
  box-shadow:0 10px 30px -26px rgba(16,34,47,.7);
}
.masthead__in{
  max-width:1300px; margin-inline:auto;
  padding:.7rem var(--pad);
  display:flex; align-items:center; gap:clamp(12px,2vw,28px);
}

.brand{ display:flex; align-items:center; gap:.72rem; text-decoration:none; margin-inline-end:auto; flex:none }
/* le signe vit sur sa plaque sombre : c'est la version de référence */
.brand__mark{
  width:46px; height:46px; flex:none;
  display:grid; place-items:center;
  background:#fff; border-radius:13px;
  box-shadow:0 1px 2px rgba(16,34,47,.08);
  --m-ring:var(--bleu); --m-head:var(--rouge); --m-tail:var(--teal);
  transition:transform .35s var(--ease), background-color .3s var(--ease);
  transform-origin:left center;
}
.brand__mark svg{ width:82%; height:82% }
.brand:hover .brand__mark{ background:var(--bleu-wash) }
.brand__mark svg{ width:100%; height:100%; overflow:visible }
.mark__ring{ stroke:var(--m-ring, var(--bleu)) }
.mark__tail{ stroke:var(--m-tail, var(--teal)) }
.mark__head{ fill:var(--m-head, var(--rouge)) }
.masthead.is-stuck .brand__mark{ transform:scale(.88) }

/* l'étreinte se referme un peu — on anime le signe entier :
   toucher au transform des parties écraserait l'origine de leur propre rotation */
.brand__mark svg{ transition:transform .5s var(--ease) }
.brand:hover .brand__mark svg{ transform:rotate(-10deg) scale(1.04) }
.mark__tail{ transition:opacity .4s var(--ease) }
.brand:hover .mark__tail{ opacity:.6 }

.brand__words{ display:grid; gap:.1rem; line-height:1.04 }
.brand__top{ display:flex; align-items:baseline; gap:.42rem }
.brand__fr{ font-family:var(--disp); font-weight:700; font-size:1.32rem; letter-spacing:-.038em }
.brand__ar{ font-family:var(--ar); font-size:.78rem; color:var(--bleu); opacity:.85 }
.brand__loc{
  font-size:.63rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  white-space:nowrap;
}
@media (max-width:520px){
  .brand__mark{ width:38px; height:38px }
  .brand__fr{ font-size:1.16rem }
  .brand__loc{ font-size:.58rem; letter-spacing:.08em }
}

.nav{ display:none; gap:clamp(10px,1.4vw,22px) }
.nav a{
  text-decoration:none; font-size:.9rem; font-weight:500; color:var(--ink-2);
  padding:.4rem .1rem; position:relative; white-space:nowrap;
  transition:color .2s var(--ease);
}
.nav a::after{
  content:""; position:absolute; inset-inline-start:0; inset-inline-end:100%; bottom:.15rem; height:2px;
  border-radius:2px; background:var(--bleu-vif); transition:right .28s var(--ease);
}
.nav a:hover{ color:var(--ink) }
.nav a:hover::after{ inset-inline-end:0 }
@media (min-width:1140px){ .nav{ display:flex } }

.masthead__call{ display:none }
@media (min-width:660px){ .masthead__call{ display:inline-flex } }

.burger{
  display:grid; place-items:center; width:46px; height:46px;
  background:var(--blanc); border:1px solid var(--trait); border-radius:999px; cursor:pointer;
}
.burger__bars{ display:grid; gap:5px; width:18px }
.burger__bars i{ height:2px; border-radius:2px; background:var(--ink); display:block; transition:transform .25s var(--ease) }
.burger[aria-expanded="true"] .burger__bars i:first-child{ transform:translateY(3.5px) rotate(45deg) }
.burger[aria-expanded="true"] .burger__bars i:last-child{ transform:translateY(-3.5px) rotate(-45deg) }
@media (min-width:1140px){ .burger{ display:none } }

.navdrawer[hidden]{ display:none }
.navdrawer{
  display:grid; gap:.1rem;
  padding:.4rem var(--pad) 1.4rem;
  border-top:1px solid var(--trait);
  background:rgba(245,247,246,.98);
  animation:drawer .32s var(--ease) both;
}
@keyframes drawer{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:none } }
.navdrawer a{ text-decoration:none; padding:.8rem .2rem; font-weight:500; border-bottom:1px solid var(--trait) }
@media (min-width:1080px){ .navdrawer{ display:none!important } }

/* ── Hero ─────────────────────────────────────────────────── */
.hero{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:clamp(28px,4vw,64px); align-items:center;
  max-width:1300px; margin-inline:auto;
  padding:clamp(40px,6vw,96px) var(--pad) clamp(40px,5vw,84px);
}
@media (min-width:980px){ .hero{ grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr) } }

/* the slow blue light behind the headline */
.hero::before{
  content:""; position:absolute; z-index:-1;
  inset:-14% 0 auto 0; height:150%;
  background:
    radial-gradient(64% 46% at 6% 24%,  rgba(63,107,212,.17), transparent 70%),
    radial-gradient(56% 44% at 84% 6%,  rgba(143,172,198,.32), transparent 72%);
  filter:blur(14px);
  animation:drift 26s var(--ease-soft) infinite alternate;
}
@keyframes drift{
  from{ transform:translate3d(-2%,-1%,0) scale(1) }
  to  { transform:translate3d(3%,2%,0) scale(1.08) }
}
@media (prefers-reduced-motion:reduce){ .hero::before{ animation:none } }

.hero__lede{ margin-top:1.6rem; font-size:clamp(1.05rem,1.3vw,1.25rem); color:var(--ink-2); max-width:46ch }
.hero__lede strong{ color:var(--ink) }
.hero__acts{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.1rem }
.hero__facts{ display:grid; gap:.65rem; margin-top:2.4rem }
.hero__facts li{ display:flex; align-items:center; gap:.7rem; font-size:.95rem; color:var(--ink-2) }
.hero__facts .ico{ color:var(--bleu); opacity:.85 }

.hero__figure{ position:relative }
/* Le cadre porte l'ombre, l'arrondi et le rognage : la légende, elle,
   reste en dehors (un overflow:hidden sur le <figure> rognerait l'ombre
   de la photo et les coins de la légende). */
.hero__ph{
  position:relative;
  border-radius:var(--r); overflow:hidden;
  box-shadow:var(--sh-2);
  /* la dérive est portée par le <figure> : ne pas l'hériter ici,
     sinon le module .photo3d la doublerait */
  --drift:0px;
}
.hero__figure img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r);
}
.hero__figure figcaption{
  margin-top:.85rem; font-size:.82rem; letter-spacing:.01em; color:var(--ink-3);
}

/* ── Chooser : deux portes, une même maison ───────────────── */
.chooser__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(14px,2vw,28px);
  margin-top:2rem;
}
@media (max-width:768px){ .chooser__grid{ grid-template-columns:1fr } }
.chooser__card{
  display:flex; flex-direction:column; gap:.55rem;
  padding:clamp(1.6rem,3vw,2.6rem);
  border-radius:var(--r);
  color:#fff; text-decoration:none;
  position:relative; overflow:hidden;
  min-height:230px;
  box-shadow:var(--sh-blue);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  isolation:isolate;
}
.chooser__card--sevrage{ background:linear-gradient(135deg,#2B4B9B 0%,#3F6BD4 55%,#0E9BA8 130%) }
.chooser__card--psy{ background:linear-gradient(135deg,#17303F 0%,#2B4B9B 60%,#3F6BD4 130%) }
.chooser__card::before{
  content:""; position:absolute; inset:-40%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), transparent 55%);
  z-index:-1;
  animation:chooserGlow 9s var(--ease-soft) infinite alternate;
}
@keyframes chooserGlow{
  from{ transform:translate3d(0,0,0) scale(1) }
  to  { transform:translate3d(18%,12%,0) scale(1.15) }
}
.chooser__card:hover,
.chooser__card:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 4px 10px rgba(43,75,155,.28), 0 30px 56px -26px rgba(43,75,155,.75);
}
.chooser__card:hover .chooser__cta,
.chooser__card:focus-visible .chooser__cta{ text-decoration:underline }
@media (hover:none){
  .chooser__card:hover{ transform:none }
}
.chooser__kicker{
  font-size:.85rem; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(255,255,255,.85);
}
.chooser__title{
  font-family:var(--disp); font-weight:700;
  font-size:clamp(1.9rem,3vw,2.6rem); line-height:1;
}
.chooser__desc{
  font-size:1.05rem; line-height:1.55;
  color:rgba(255,255,255,.95); max-width:36ch;
}
.chooser__cta{ margin-top:auto; font-weight:600; font-size:1.02rem }
@media (prefers-reduced-motion:reduce){
  .chooser__card::before{ animation:none }
  .chooser__card:hover,
  .chooser__card:focus-visible{ transform:none }
}

/* ── Urgence strip ────────────────────────────────────────── */
.urgence{
  position:relative; overflow:hidden;
  background:var(--nuit); color:var(--sur-nuit);
  padding:1.15rem var(--pad);
}
.urgence::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(40% 180% at 12% 50%, rgba(63,107,212,.34), transparent 70%);
  pointer-events:none;
}
.urgence__line,.urgence__note{ position:relative; z-index:1 }
.urgence__line{
  max-width:1300px; margin-inline:auto;
  display:flex; align-items:center; gap:.75rem;
  font-weight:600; font-size:clamp(1rem,1.25vw,1.15rem);
}
.urgence__line .ico{ color:var(--bleu-pale) }
.urgence__line a{ text-underline-offset:3px; text-decoration-thickness:1px }
.urgence__note{
  max-width:1300px; margin:.35rem auto 0;
  padding-left:calc(1.15em + .75rem);
  font-size:.85rem; color:var(--sur-nuit-2);
}

/* ── Mosaic (le lieu) ─────────────────────────────────────── */
.mosaic{
  display:grid; gap:var(--gutter);
  margin-top:clamp(40px,5vw,72px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:780px){ .mosaic{ grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-flow:dense } }
.tile{
  position:relative; overflow:hidden; border-radius:var(--r-sm);
  background:var(--pierre-2); box-shadow:var(--sh-1);
}
.tile img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; transition:transform .9s var(--ease) }
.tile:hover img{ transform:scale(1.05) }
.tile figcaption{
  position:absolute; left:0; bottom:0; right:0;
  z-index:3; /* au-dessus du reflet .photo3d::after (z-index:2) : la légende reste lisible au survol */
  padding:2.2rem .95rem .8rem;
  font-size:.82rem; font-weight:600; color:#fff;
  background:linear-gradient(to top, rgba(16,34,47,.86), rgba(16,34,47,.35) 45%, transparent);
  transform:translateY(0); transition:transform .4s var(--ease);
}
@media (min-width:780px){
  .tile--wide{ grid-column:span 2 }
  .tile--wide img{ aspect-ratio:16/10 }
  .tile--tall{ grid-row:span 2 }
  .tile--tall img{ aspect-ratio:3/5; height:100% }
}

/* ── Condition tiles ──────────────────────────────────────── */
.glaze{
  display:grid; gap:var(--gutter);
  margin-top:clamp(40px,5vw,72px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:700px){ .glaze{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1040px){ .glaze{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.glaze__t{
  background:var(--blanc);
  border:1px solid var(--trait);
  border-radius:var(--r-sm);
  padding:1.6rem 1.4rem 1.7rem;
  box-shadow:var(--sh-1);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.glaze__t:hover{ border-color:var(--bleu-pale); box-shadow:var(--sh-2); transform:translateY(-3px) }
.glaze__t h3{
  font-family:var(--disp); font-weight:600; font-size:1.12rem; letter-spacing:-.02em;
  color:var(--bleu);
  margin-bottom:.55rem; padding-inline-start:1.45rem; position:relative;
}
.glaze__t h3::before{
  content:""; position:absolute; inset-inline-start:0; top:.44em; width:.6rem; height:.6rem;
  background:var(--bleu-pale);
  -webkit-mask:var(--star) center/contain no-repeat;
          mask:var(--star) center/contain no-repeat;
}
:root{
  /* the mark's sun, reduced to a bullet */
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='34' fill='none' stroke='%23000' stroke-width='20' stroke-linecap='round' stroke-dasharray='150 64' transform='rotate(-58 50 50)'/%3E%3C/svg%3E");
}
.glaze__t p{ font-size:1rem; color:var(--ink-2) }

/* ── Day timeline ─────────────────────────────────────────── */
.day{ display:grid; align-self:start }
.day li{
  display:grid; grid-template-columns:5.4rem 1fr; gap:1rem;
  padding:.95rem .25rem; border-bottom:1px solid var(--trait);
  align-items:baseline; border-radius:var(--r-sm);
  transition:background-color .25s var(--ease), transform .25s var(--ease);
}
.day li:first-child{ border-top:1px solid var(--trait) }
.day li:hover{ background:var(--bleu-wash); transform:translateX(8px) }
.day__h{
  font-family:var(--disp); font-weight:600; font-size:.97rem;
  color:var(--bleu); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.day__w{ font-size:1rem; color:var(--ink-2) }
.day--night{ background:var(--nuit); border-radius:var(--r-sm); border-bottom-color:transparent }
.day--night:hover{ background:var(--nuit) }
.day--night .day__h{ color:var(--bleu-pale) }
.day--night .day__w{ color:var(--sur-nuit) }

/* ── Roles ────────────────────────────────────────────────── */
.roles{ display:flex; flex-wrap:wrap; gap:.6rem; align-content:start }
.roles li{
  border:1px solid var(--trait); border-radius:999px;
  padding:.6rem 1.05rem; font-size:.94rem; font-weight:500;
  background:var(--pierre);
  transition:border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.roles li:hover{ border-color:var(--bleu); color:var(--bleu); transform:translateY(-2px) }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq{ margin-top:clamp(30px,4vw,52px) }
.faq details{ border-bottom:1px solid var(--trait) }
.faq summary{
  list-style:none; cursor:pointer;
  padding-block:1.25rem; padding-inline:0 2.75rem; position:relative;
  font-family:var(--disp); font-weight:600; font-size:clamp(1.05rem,1.5vw,1.28rem);
  letter-spacing:-.025em; transition:color .2s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:""; position:absolute; inset-inline-end:.4rem; top:50%; width:26px; height:26px; margin-top:-13px;
  border:1px solid var(--trait); border-radius:999px;
  background:var(--bleu);
  -webkit-mask:none; mask:none;
  transition:transform .3s var(--ease), background-color .3s var(--ease);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11 5h2v14h-2z'/%3E%3Cpath fill='%23fff' d='M5 11h14v2H5z'/%3E%3C/svg%3E");
  background-size:14px; background-repeat:no-repeat; background-position:center;
}
.faq details[open] summary::after{ transform:rotate(135deg) }
.faq details p{ padding-inline:0 3rem; padding-bottom:1.5rem; color:var(--ink-2); max-width:70ch }
.faq details[open] p{ animation:answer .4s var(--ease) both }
@keyframes answer{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
.faq summary:hover{ color:var(--bleu) }

/* ── Contact ──────────────────────────────────────────────── */
.coords{ display:grid; gap:1.35rem; margin-top:2.1rem }
.coords li{
  display:grid; grid-template-columns:1.5rem 1fr; gap:.15rem .85rem;
  align-items:baseline; font-size:1.08rem; font-weight:500;
}
.coords .ico{ color:var(--bleu-pale); grid-row:span 2; align-self:start; margin-top:.22rem; width:1.2rem; height:1.2rem }
.coords a{ text-decoration-thickness:1px; text-underline-offset:3px }
.coords__sub{ font-size:.95rem; font-weight:400; color:var(--sur-nuit-2) }

.map{
  margin-top:2.2rem; border:1px solid rgba(237,241,243,.2); border-radius:var(--r);
  overflow:hidden; background:rgba(0,0,0,.2);
}
.map iframe{ width:100%; height:260px; border:0; filter:saturate(.8) contrast(1.03) }

.form{
  display:grid; gap:1.1rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(237,241,243,.14);
  border-radius:var(--r);
  padding:clamp(22px,2.6vw,36px);
}
.form__row{ display:grid; gap:.45rem }
.form__row--two{ grid-template-columns:minmax(0,1fr); gap:1.1rem }
@media (min-width:560px){ .form__row--two{ grid-template-columns:1fr 1fr } }
.form__row--two > div{ display:grid; gap:.45rem }
.form label{ font-size:.95rem; font-weight:600; letter-spacing:.02em; color:var(--sur-nuit-2) }
.form input,.form select,.form textarea{
  width:100%;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(237,241,243,.18);
  border-radius:var(--r-sm);
  padding:.85rem .95rem;
  color:var(--sur-nuit);
  transition:border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form textarea{ resize:vertical; min-height:112px }
.form input::placeholder,.form textarea::placeholder{ color:rgba(237,241,243,.45) }
.form input:hover,.form select:hover,.form textarea:hover{ border-color:rgba(237,241,243,.36) }
.form input:focus,.form select:focus,.form textarea:focus{
  border-color:var(--bleu-pale); background:rgba(255,255,255,.11); outline:none;
  box-shadow:0 0 0 4px rgba(143,172,198,.16);
}
.form select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23A9BCC6' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:11px;
  padding-inline-end:2.5rem;
}
.form select option{ color:#101B22 }
.check{ display:flex; gap:.7rem; align-items:flex-start; font-size:.9rem!important; font-weight:400!important; color:var(--sur-nuit-2)!important }
.check input{ width:1.05rem; height:1.05rem; margin-top:.28rem; accent-color:var(--bleu-vif); flex:none }
.form__status{ font-size:.92rem; min-height:1.2em }
.form__status[data-state="ok"]{ color:#B7D8F0 }
.form__status[data-state="err"]{ color:#F3C1B4 }
.form__legal{ font-size:.95rem; color:rgba(169,188,198,.72) }
.form .invalid{ border-color:#E08F76; box-shadow:0 0 0 4px rgba(224,143,118,.14) }

/* ── Footer ───────────────────────────────────────────────── */
.foot{ background:var(--nuit); color:var(--sur-nuit); padding-block:clamp(52px,6vw,88px) 2rem }
.foot__in{ display:grid; gap:2.4rem; grid-template-columns:minmax(0,1fr) }
@media (min-width:840px){ .foot__in{ grid-template-columns:1.4fr 1fr .9fr; align-items:start } }
.foot__brand{ display:flex; gap:.95rem; align-items:center }
.brand__mark--foot{ width:50px; height:50px; border-radius:14px; background:#fff }
.foot__brand p{ font-size:.98rem; line-height:1.55; color:var(--sur-nuit-2) }
.foot__brand strong{ color:var(--sur-nuit) }
.foot__nav{ display:grid; gap:.5rem; align-content:start }
.foot__nav a{ text-decoration:none; font-size:.95rem; color:var(--sur-nuit-2); transition:color .2s var(--ease) }
.foot__nav a:hover{ color:#fff }
.foot__call{ font-size:1rem; line-height:1.9 }
.foot__call a{ text-underline-offset:3px }
.foot__legal{
  position:relative;
  display:flex; flex-wrap:wrap; gap:.4rem 2rem; justify-content:space-between;
  margin-top:clamp(34px,4vw,60px); padding-top:1.6rem;
  font-size:.79rem; color:rgba(169,188,198,.62);
}
.foot__legal::before{
  content:""; position:absolute; top:0; inset-inline:var(--pad);
  height:1px; background:rgba(237,241,243,.16);
}

/* ── Scroll progress ──────────────────────────────────────── */
.progress{ position:absolute; left:0; right:0; bottom:-1px; height:2px; background:transparent }
.progress i{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg, var(--bleu), var(--bleu-vif) 60%, var(--bleu-pale));
  transform:scaleX(var(--p,0)); transform-origin:left;
  transition:transform .12s linear;
}

/* ── Sevrage ──────────────────────────────────────────────── */
.sevrage{ background:var(--pierre) }
.sevrage__grid{ display:grid; gap:clamp(36px,4.5vw,72px); grid-template-columns:minmax(0,1fr) }
@media (min-width:960px){
  .sevrage__grid{ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr) }
  .sevrage__aside{ position:sticky; top:112px }
}
.sevrage__subs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.9rem }
.sevrage__subs li{
  border:1px solid var(--trait); border-radius:999px;
  padding:.5rem .95rem; font-size:.88rem; font-weight:500; background:var(--blanc);
  transition:border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.sevrage__subs li:hover{ border-color:var(--bleu); color:var(--bleu); transform:translateY(-2px) }
.sevrage__figure{ margin-top:2rem; border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-1) }
.sevrage__figure img{ width:100%; aspect-ratio:16/11; object-fit:cover }
.sevrage__cta{ margin-top:1.9rem }

.path{ position:relative; padding-inline-start:clamp(38px,4vw,58px) }
.path::before{
  content:""; position:absolute; inset-inline-start:9px; top:12px; bottom:12px; width:2px;
  background:var(--trait); border-radius:2px;
}
.path::after{
  content:""; position:absolute; inset-inline-start:9px; top:12px; width:2px; border-radius:2px;
  height:calc(100% - 24px);
  background:linear-gradient(to bottom, var(--bleu), var(--bleu-vif));
  transform:scaleY(var(--draw,0)); transform-origin:top;
  transition:transform .25s linear;
}
.path__step{ position:relative; padding-bottom:clamp(30px,3.4vw,52px) }
.path__step:last-child{ padding-bottom:0 }
.path__step::before{
  content:""; position:absolute; inset-inline-start:calc(-1 * clamp(38px,4vw,58px) + 3px); top:.45em;
  width:15px; height:15px; border-radius:999px;
  background:var(--pierre); border:2px solid var(--bleu-pale);
  transition:background-color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.path__step.is-set::before{ background:var(--bleu); border-color:var(--bleu); transform:scale(1.12) }
.path__step h3{
  font-family:var(--disp); font-weight:600; font-size:clamp(1.2rem,1.7vw,1.5rem);
  letter-spacing:-.028em; margin-bottom:.5rem;
}
.path__step p{ color:var(--ink-2); max-width:56ch }
.path__when{
  margin-top:.7rem!important; font-size:.8rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--bleu)!important;
}

/* ── Trois cartes ─────────────────────────────────────────── */
.cards3{
  display:grid; gap:var(--gutter);
  margin-top:clamp(40px,5vw,72px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:820px){ .cards3{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.cards3__c{
  background:var(--blanc); border:1px solid var(--trait); border-radius:var(--r);
  padding:clamp(22px,2.4vw,34px);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.cards3__c:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--bleu-pale) }
.cards3__c .ico--lg{ color:var(--bleu) }
.cards3__c h3{
  font-family:var(--disp); font-weight:600; font-size:1.24rem; letter-spacing:-.025em; margin:.9rem 0 .5rem;
}
.cards3__c p{ color:var(--ink-2); font-size:.99rem }

.warn{
  display:grid; gap:1.1rem; grid-template-columns:minmax(0,1fr);
  margin-top:var(--gutter);
  background:var(--bleu-wash); border:1px solid rgba(43,75,155,.22); border-radius:var(--r);
  padding:clamp(22px,2.6vw,36px);
}
@media (min-width:700px){ .warn{ grid-template-columns:auto minmax(0,1fr); gap:1.4rem } }
.warn .ico--lg{ color:var(--bleu); width:30px; height:30px }
.warn h3{ font-family:var(--disp); font-weight:600; font-size:1.24rem; letter-spacing:-.025em; margin-bottom:.5rem }
.warn p{ color:var(--ink-2); max-width:74ch }

/* ── Substances ───────────────────────────────────────────── */
.subs{
  display:grid; gap:var(--gutter);
  margin-top:clamp(40px,5vw,72px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:720px){ .subs{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1120px){ .subs{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.subs__c{
  background:var(--pierre); border:1px solid var(--trait); border-radius:var(--r);
  padding:clamp(22px,2.3vw,32px);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.subs__c:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--bleu-pale) }
.subs__c h3{
  font-family:var(--disp); font-weight:600; font-size:1.3rem; letter-spacing:-.028em;
  padding-bottom:.9rem; margin-bottom:1rem; border-bottom:1px solid var(--trait);
}
.subs__c dt{
  font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--bleu); margin-top:1rem;
}
.subs__c dt:first-of-type{ margin-top:0 }
.subs__c dd{ margin:.3rem 0 0; color:var(--ink-2); font-size:.96rem }
.subs__c--call{
  background:linear-gradient(150deg, var(--bleu) 0%, #1D3A7E 100%);
  border-color:transparent; color:#fff;
}
.subs__c--call h3{ border-bottom-color:rgba(255,255,255,.28) }
.subs__c--call p{ color:rgba(255,255,255,.86); font-size:1rem }
.subs__c--call .btn{ margin-top:1.2rem; --btn-bg:#fff; --btn-fg:var(--bleu); box-shadow:0 16px 34px -22px rgba(0,0,0,.9) }

/* ── Pairs ────────────────────────────────────────────────── */
.pairs{ display:grid; align-self:start; border-top:1px solid var(--trait) }
.pairs li{
  display:grid; grid-template-columns:minmax(0,auto) 1.6rem minmax(0,1fr);
  gap:.2rem .7rem; align-items:baseline;
  padding:1rem .3rem; border-bottom:1px solid var(--trait);
  transition:background-color .25s var(--ease), transform .25s var(--ease);
  border-radius:var(--r-sm);
}
.pairs li:hover{ background:var(--bleu-wash); transform:translateX(8px) }
.pairs li > span:first-child{ font-weight:600; color:var(--ink) }
.pairs__arrow{ color:var(--bleu); font-weight:600 }
.pairs li > span:last-child{ color:var(--ink-2); font-size:.98rem }
@media (max-width:520px){
  .pairs li{ grid-template-columns:minmax(0,1fr) }
  .pairs__arrow{ display:none }
}

/* ── Signes d'alerte ──────────────────────────────────────── */
.signs{ display:grid; align-self:start; gap:.15rem }
.signs li{
  display:grid; grid-template-columns:1.5rem minmax(0,1fr); gap:.85rem; align-items:start;
  padding:.85rem .5rem; border-radius:var(--r-sm);
  color:var(--ink-2); font-size:1rem;
  transition:background-color .25s var(--ease), transform .25s var(--ease);
}
.signs li:hover{ background:var(--bleu-wash); transform:translateX(6px) }
.signs .ico{ color:var(--bleu); margin-top:.2rem; width:1.1rem; height:1.1rem }
.signs li.signs__hot{ background:var(--nuit); color:#fff; font-weight:600 }
.signs li.signs__hot:hover{ background:var(--nuit); transform:none }
.signs li.signs__hot .ico{ color:var(--bleu-pale) }

/* ── Où ───────────────────────────────────────────────────── */
.venue{ display:grid; gap:clamp(28px,3.5vw,56px); grid-template-columns:minmax(0,1fr) }
@media (min-width:900px){ .venue{ grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); align-items:center } }
.venue__pics{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gutter) }
.venue__pics figure{ border-radius:var(--r-sm); overflow:hidden; box-shadow:var(--sh-1) }
.venue__pics img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .8s var(--ease) }
.venue__pics figure:hover img{ transform:scale(1.05) }

.foot__samu{ color:rgba(169,188,198,.72); font-size:.86rem }

/* ── Motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{ opacity:0; transform:translateY(18px) }
  .js .reveal.is-set{
    opacity:1; transform:none;
    transition:opacity .75s var(--ease), transform .85s var(--ease);
    transition-delay:var(--d,0ms);
  }
  .js .reveal--left{ transform:translateX(-18px) }
  .js .reveal--right{ transform:translateX(18px) }
  .js .reveal--zoom{ transform:scale(.965) }
  .js .reveal--left.is-set,
  .js .reveal--right.is-set,
  .js .reveal--zoom.is-set{ transform:none }
  .js .tile.reveal{ clip-path:inset(0 0 100% 0) }
  .js .tile.reveal.is-set{
    clip-path:inset(0 0 0 0);
    transition:opacity .6s var(--ease), transform .8s var(--ease), clip-path .9s var(--ease);
    transition-delay:var(--d,0ms);
  }
  .js .hero__text > *{ opacity:0; transform:translateY(20px); animation:rise .9s var(--ease) forwards }
  .js .hero__text > *:nth-child(2){ animation-delay:.30s }
  .js .hero__text > *:nth-child(3){ animation-delay:.40s }
  .js .hero__text > *:nth-child(4){ animation-delay:.50s }
  /* backwards : un fill "both" garderait transform:scale(1) pour toujours
     et bloquerait le contre-mouvement --pmx/--pmy du module .photo3d */
  .js .hero__figure img{ animation:zoomIn 1.4s var(--ease) backwards .12s }

  /* headline, word by word */
  .js .display .w{ display:inline-block; opacity:0; transform:translateY(.5em) rotate(1.5deg);
    animation:word .8s var(--ease) forwards; animation-delay:calc(var(--i,0) * 55ms + 60ms) }
}
@keyframes rise{ to{ opacity:1; transform:none } }
@keyframes word{ to{ opacity:1; transform:none } }
@keyframes zoomIn{ from{ opacity:0; transform:scale(1.06) } to{ opacity:1; transform:scale(1) } }

/* the phone button breathes, once every ten seconds */
@media (prefers-reduced-motion:no-preference){
  .masthead__call{ animation:pulse 10s ease-in-out 4s infinite }
}
@keyframes pulse{
  0%,92%,100%{ box-shadow:var(--sh-blue) }
  95%{ box-shadow:0 2px 6px rgba(43,75,155,.22), 0 0 0 10px rgba(63,107,212,.12) }
}

/* ── Barre d'appel, sur téléphone ─────────────────────────── */
.callbar{
  position:fixed; z-index:70; inset-inline:0; bottom:0;
  display:none; gap:.6rem;
  padding:.7rem clamp(14px,4vw,20px) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(245,247,246,.86);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-top:1px solid var(--trait);
  transform:translateY(0);
  transition:transform .35s var(--ease);
}
.callbar[data-hidden="true"]{ transform:translateY(110%) }
.callbar .btn{ flex:1; justify-content:center; padding-block:.95em }
.callbar .btn--ghost{ flex:0 0 auto; background:var(--blanc) }
@media (max-width:759px){
  .callbar{ display:flex }
  body{ padding-bottom:96px }
}

/* ── Small screens ────────────────────────────────────────── */
@media (max-width:560px){
  .hero__acts{ display:grid; gap:.7rem }
  .hero__acts .btn{ width:100%; justify-content:center }
  .path{ padding-inline-start:34px }
  .path__step::before{ inset-inline-start:-34px }
}
@media (max-width:759px){
  /* des cibles tactiles honnêtes */
  .foot__nav a{ padding-block:.6rem; min-height:44px; display:flex; align-items:center }
  .foot__nav{ gap:0 }
  .coords a{ display:inline-block; padding-block:.35rem }
  .urgence__note a{ padding:.2rem .35rem; margin:-.2rem -.35rem }
  .check input{ width:1.3rem; height:1.3rem }
  .faq summary{ padding-block:1.35rem }
  .signs li{ padding-block:1rem }

  /* moins de vide, plus de contenu à l'écran */
  .section, .field{ padding-block:clamp(56px,13vw,88px) }
  .subs__c, .cards3__c, .glaze__t{ padding:20px 18px 22px }
  .h2{ max-width:none }
  .map iframe{ height:210px }
  .foot__in{ gap:1.9rem }
  .foot__legal{ font-size:.75rem }
}


/* ── Langues ──────────────────────────────────────────────── */
.langs{ display:flex; align-items:center; gap:2px; flex:none }
.langs a{
  display:grid; place-items:center; min-width:38px; height:34px;
  padding:0 .5rem; border-radius:999px;
  font-size:.78rem; font-weight:700; letter-spacing:.06em;
  color:var(--ink-3); text-decoration:none;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.langs a:hover{ background:var(--blanc); color:var(--ink) }
.langs a.is-on{ background:var(--bleu); color:#fff }
.langs a[lang="ar"]{ font-family:var(--ar); font-size:.9rem; letter-spacing:0 }
@media (max-width:759px){
  .langs{ margin-inline-start:auto }
  .langs a{ min-width:34px; height:32px }
}
.navdrawer .langs{ margin-top:1rem; justify-content:center }

/* ── Arabe : la page se retourne ──────────────────────────── */
html[lang="ar"]{
  --sans: "Noto Sans Arabic", "Archivo", system-ui, sans-serif;
  --disp: "Noto Kufi Arabic", "Noto Sans Arabic", sans-serif;
}
html[lang="ar"] body{ line-height:1.85 }
html[lang="ar"] .display{ letter-spacing:0; line-height:1.24; font-size:clamp(2rem,3.8vw,3.5rem) }
html[lang="ar"] .h2{ letter-spacing:0; line-height:1.35; font-size:clamp(1.6rem,2.9vw,2.5rem) }
html[lang="ar"] .brand__fr{ letter-spacing:0; font-size:1.24rem }
html[lang="ar"] .brand__loc{ letter-spacing:0; font-size:.68rem }
html[lang="ar"] .subs__c dt,
html[lang="ar"] .path__when,
html[lang="ar"] .langs a{ letter-spacing:0 }
html[lang="ar"] .faq summary,
html[lang="ar"] .path__step h3,
html[lang="ar"] .cards3__c h3,
html[lang="ar"] .subs__c h3,
html[lang="ar"] .glaze__t h3{ letter-spacing:0; line-height:1.5 }

[dir="rtl"] .brand__mark{ transform-origin:right center }
[dir="rtl"] .pairs__arrow{ display:inline-block; transform:scaleX(-1) }
[dir="rtl"] .day li:hover,
[dir="rtl"] .pairs li:hover,
[dir="rtl"] .signs li:hover{ transform:translateX(-8px) }
[dir="rtl"] .form select{ background-position:left 1rem center }
[dir="rtl"] .hero__lede,
[dir="rtl"] .lede,
[dir="rtl"] .note{ text-align:start }

/* ── Six semaines ─────────────────────────────────────────── */
.lede--big{ font-size:clamp(1.12rem,1.4vw,1.32rem); max-width:62ch }

.weeks{
  display:grid; gap:clamp(24px,3vw,44px);
  margin-top:clamp(36px,4.5vw,60px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:940px){ .weeks{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:center } }

.weeks__stage{ position:relative; border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-2) }
.scene{ width:100%; height:auto; display:block }
.scene *{ transition:fill .9s var(--ease), stroke .9s var(--ease), opacity .9s var(--ease), transform .9s var(--ease) }
@media (prefers-reduced-motion:reduce){ .scene *{ transition:none } }

.sc-bg{ fill:var(--sc-bg,#10222F) }
.sc-sky{ fill:var(--sc-sky,#0A1620) }
.sc-frame{ stroke:var(--sc-frame,#33546B) }
.sc-line{ stroke:var(--sc-line,#22384A); fill:none }
.sc-bed{ fill:var(--sc-line,#22384A) }
.sc-bed-legs{ stroke:var(--sc-line,#22384A); fill:none }
.sc-plant{ fill:var(--sc-ink,#5C7183); opacity:var(--plant,0) }
.sc-a{ fill:var(--sc-ink,#5C7183); stroke:var(--sc-ink,#5C7183); opacity:var(--a,1) }
.sc-b{ fill:var(--sc-ink,#5C7183); stroke:var(--sc-ink,#5C7183); opacity:var(--b,0) }
.sc-bars rect{
  fill:var(--sc-ink,#5C7183);
  transform:scaleY(var(--h,.2)); transform-box:fill-box; transform-origin:bottom;
}
.sc-clock circle{ stroke:var(--sc-clock,#8EACC6) }
.sc-clock path{ stroke:var(--sc-clock,#8EACC6) }
.sc-hour,.sc-min{ transform-box:view-box; transform-origin:700px 380px }
.sc-hour{ transform:rotate(var(--hr,90deg)) }
.sc-min{ transform:rotate(var(--mr,0deg)) }

.weeks__clock{
  position:absolute; inset-inline-start:clamp(16px,2.2vw,26px); top:clamp(14px,2vw,22px);
  display:grid; gap:.05rem; pointer-events:none;
}
.weeks__clock-v{
  font-family:var(--disp); font-weight:700; font-size:clamp(1.5rem,2.4vw,2.1rem);
  letter-spacing:-.03em; color:var(--sc-clock,#8EACC6); font-variant-numeric:tabular-nums;
  transition:color .9s var(--ease);
}
.weeks__clock-l{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sc-clock,#8EACC6); opacity:.8 }

.weeks__texts{ display:grid }
.weeks__t{ display:none }
.weeks__t.is-on{ display:block; animation:weekIn .55s var(--ease) both }
.no-js .weeks__t, .weeks__texts:not(.is-live) .weeks__t{ display:block; margin-bottom:2rem }
@keyframes weekIn{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
.weeks__t h3{
  font-family:var(--disp); font-weight:600; font-size:clamp(1.4rem,2.1vw,1.85rem);
  letter-spacing:-.028em; margin-bottom:.7rem;
}
.weeks__t p{ font-size:clamp(1.05rem,1.25vw,1.16rem); color:var(--ink-2); max-width:52ch }
.weeks__t dl{ display:flex; flex-wrap:wrap; gap:.7rem 2.4rem; margin-top:1.4rem }
.weeks__t dt{ font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3) }
.weeks__t dd{ margin:.15rem 0 0; font-family:var(--disp); font-weight:600; font-size:1.22rem; color:var(--bleu) }

.weeks__controls{
  display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.2rem;
  margin-top:clamp(26px,3vw,40px);
}
.weeks__play{ min-height:56px; font-size:1.04rem }
.weeks__steps{ display:flex; flex-wrap:wrap; gap:.5rem }
.weeks__steps button{
  min-height:52px; min-width:82px; padding:.6rem 1.05rem;
  background:var(--blanc); color:var(--ink-2);
  border:1.5px solid var(--trait); border-radius:999px;
  font-size:1rem; font-weight:600; cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.weeks__steps button:hover{ border-color:var(--bleu-pale); color:var(--ink) }
.weeks__steps button[aria-pressed="true"]{ background:var(--bleu); border-color:var(--bleu); color:#fff }

/* ── Sélecteur de langue ──────────────────────────────────── */
.lang{ position:relative; flex:none }
.lang > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:.45rem;
  min-height:44px; padding:0 .8rem;
  border:1.5px solid var(--trait); border-radius:999px;
  background:var(--blanc); color:var(--ink);
  font-size:.92rem; font-weight:600;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lang > summary::-webkit-details-marker{ display:none }
.lang > summary:hover{ border-color:var(--bleu-pale); box-shadow:var(--sh-1) }
.lang__chev{ width:11px; height:7px; transition:transform .25s var(--ease) }
.lang[open] .lang__chev{ transform:rotate(180deg) }
.lang__menu{
  position:absolute; z-index:70; inset-inline-end:0; top:calc(100% + 8px);
  min-width:190px; padding:.4rem;
  background:var(--blanc); border:1px solid var(--trait); border-radius:14px;
  box-shadow:var(--sh-2);
  animation:weekIn .2s var(--ease) both;
}
.lang__menu a{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:46px; padding:.5rem .8rem; border-radius:10px;
  text-decoration:none; font-size:1rem; font-weight:500; color:var(--ink);
}
.lang__menu a:hover{ background:var(--bleu-wash) }
.lang__menu a[aria-current]{ background:var(--bleu); color:#fff }
.lang__menu small{ font-size:.78rem; opacity:.7; letter-spacing:.06em }
.lang__menu [lang="ar"]{ font-family:var(--ar) }

/* ── En-tête : rien ne doit rogner ────────────────────────── */
.masthead__in{ flex-wrap:nowrap }
.nav{ flex:0 0 auto; white-space:nowrap }
.nav a{ white-space:nowrap }

/* ── Ouvert en permanence ─────────────────────────────────── */
.open247{ display:grid; gap:.85rem; margin-top:1.9rem }
.open247 li{
  display:grid; grid-template-columns:1.6rem minmax(0,1fr); gap:.85rem;
  align-items:start; font-size:1.02rem; color:var(--ink-2);
}
.open247 .ico{ color:var(--bleu); width:1.25rem; height:1.25rem; margin-top:.2rem }
.open247 strong{ color:var(--ink) }
.foot__open{ color:var(--bleu-pale); font-weight:600; font-size:.9rem }

/* huit entrées de nav : visibles dès 1080 px (règles de base plus haut) */

.display__sub{
  display:block; margin-top:1.1rem;
  font-family:var(--sans); font-weight:500;
  font-size:clamp(1.02rem,1.25vw,1.2rem); letter-spacing:0; line-height:1.4;
  color:var(--bleu);
}

/* ── Sommaire des substances ──────────────────────────────── */
.subsnav{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:clamp(28px,3vw,44px) }
.subsnav a{
  display:inline-flex; align-items:center; min-height:44px;
  padding:.5rem 1rem; border-radius:999px;
  border:1.5px solid var(--trait); background:var(--pierre);
  font-size:.94rem; font-weight:500; color:var(--ink-2); text-decoration:none;
  transition:border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.subsnav a:hover{ border-color:var(--bleu); color:var(--bleu); background:var(--blanc) }
.section--pale .subsnav a{ background:var(--blanc) }
.subs__c{ scroll-margin-top:110px }

/* ── La preuve en image, à côté de l'avertissement ─────────── */
.evidence{
  display:grid; gap:clamp(18px,2.4vw,32px);
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  margin-top:var(--gutter);
  background:var(--blanc); border:1px solid var(--trait); border-radius:var(--r);
  overflow:hidden;
}
@media (min-width:760px){ .evidence{ grid-template-columns:minmax(0,.62fr) minmax(0,1fr) } }
.evidence img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; display:block }
@media (min-width:760px){ .evidence img{ aspect-ratio:1/1 } }
.evidence figcaption{
  padding:clamp(18px,2vw,28px) clamp(20px,2.4vw,34px) clamp(22px,2.4vw,32px) 0;
  font-size:1rem; line-height:1.6; color:var(--ink-2); max-width:52ch;
}
@media (max-width:759px){ .evidence figcaption{ padding:0 20px 22px } }

/* pot de miel : invisible pour l'humain, tentant pour le robot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

.foot__legalnav{ display:flex; gap:1.4rem; flex-wrap:wrap }
.foot__legalnav a{ color:rgba(169,188,198,.75); text-underline-offset:3px }
.foot__legalnav a:hover{ color:#fff }

/* ── Pages secondaires ────────────────────────────────────── */
.doc{ padding-block:clamp(56px,7vw,104px) clamp(64px,8vw,120px) }
.doc__back{ margin-bottom:2rem }
.doc__back a{ font-size:.95rem; color:var(--ink-2); text-decoration:none }
.doc__back a:hover{ color:var(--bleu) }
.doc .h2{ max-width:22ch; margin-bottom:1.6rem }
.doc h2{
  font-family:var(--disp); font-weight:600; font-size:clamp(1.3rem,2.1vw,1.7rem);
  letter-spacing:-.025em; margin:2.6rem 0 .8rem;
}
.doc p{ color:var(--ink-2); max-width:68ch; margin-bottom:1rem }
.doc .lede{ color:var(--ink-2); margin-bottom:1.6rem }
.doc a{ color:var(--bleu); text-underline-offset:3px }
.doc strong{ color:var(--ink) }

.doc__list, .doc__check{ display:grid; gap:.7rem; margin:1.1rem 0 1.4rem; max-width:68ch }
.doc__list li, .doc__check li{
  position:relative; padding-inline-start:1.7rem; color:var(--ink-2); line-height:1.6;
}
.doc__list li::before{
  content:""; position:absolute; inset-inline-start:.15rem; top:.62em;
  width:.5rem; height:.5rem; border-radius:999px; background:var(--bleu-pale);
}
.doc__check li::before{
  content:""; position:absolute; inset-inline-start:0; top:.28em;
  width:1.05rem; height:1.05rem; border:1.5px solid var(--bleu); border-radius:5px;
}
.doc__list--alert li::before{ background:var(--rouge) }

.glossaire{ margin:1.6rem 0; max-width:70ch }
.glossaire dt{
  font-family:var(--disp); font-weight:600; font-size:1.1rem; letter-spacing:-.02em;
  color:var(--ink); margin-top:1.5rem;
}
.glossaire dd{ margin:.35rem 0 0; color:var(--ink-2); line-height:1.65 }

.doc__todo{
  background:var(--bleu-wash); border:1px solid rgba(43,75,155,.22); border-radius:var(--r);
  padding:1.1rem 1.3rem; font-size:.95rem;
}
.doc__call{
  margin-top:clamp(40px,5vw,64px); padding:clamp(24px,3vw,38px);
  background:var(--nuit); border-radius:var(--r); color:var(--sur-nuit);
}
.doc__call p{ color:var(--sur-nuit-2); max-width:none }
.doc__call strong{ color:#fff }
.doc__call .btn{ margin-top:1rem; --btn-bg:#fff; --btn-fg:var(--bleu) }
.doc__call-alt{ margin-top:1rem; font-size:.92rem }
.doc__call a{ color:var(--bleu-pale) }
.doc__nav{ margin-top:2.4rem }

/* ── Formulaire sur fond clair (page rendez-vous) ──────────── */
.form--doc{
  background:var(--blanc); border-color:var(--trait);
  margin:2rem 0 1rem;
}
.form--doc label{ color:var(--ink-2) }
.form--doc input,.form--doc select,.form--doc textarea{
  background-color:var(--pierre); border-color:var(--trait); color:var(--ink);
}
.form--doc input::placeholder,.form--doc textarea::placeholder{ color:var(--ink-3) }
.form--doc input:hover,.form--doc select:hover,.form--doc textarea:hover{ border-color:var(--bleu-pale) }
.form--doc input:focus,.form--doc select:focus,.form--doc textarea:focus{
  background-color:#fff; border-color:var(--bleu); box-shadow:0 0 0 4px rgba(43,75,155,.12);
}
.form--doc select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%234E5D66' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:11px;
}
[dir="rtl"] .form--doc select{ background-position:left 1rem center }
.form--doc .check{ color:var(--ink-2)!important }
.form--doc .form__legal{ color:var(--ink-3) }
.form--doc .form__status[data-state="ok"]{ color:var(--bleu) }
.form--doc .form__status[data-state="err"]{ color:var(--rouge) }

.form__set{ border:0; padding:0; margin:.4rem 0 0 }
.form__set legend{
  padding:0; margin-bottom:.6rem;
  font-size:.95rem; font-weight:600; letter-spacing:.02em; color:var(--ink-2);
}
.chips{ display:flex; flex-wrap:wrap; gap:.5rem }
.chips label{ cursor:pointer }
.chips input{ position:absolute; opacity:0; width:1px; height:1px }
.chips span{
  display:inline-flex; align-items:center; min-height:44px;
  padding:.5rem 1rem; border-radius:999px;
  border:1.5px solid var(--trait); background:var(--pierre);
  font-size:.94rem; font-weight:500; color:var(--ink-2);
  transition:border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.chips label:hover span{ border-color:var(--bleu-pale); color:var(--ink) }
.chips input:checked + span{ background:var(--bleu); border-color:var(--bleu); color:#fff }
.chips input:focus-visible + span{ outline:3px solid var(--bleu-vif); outline-offset:3px }

/* ── Services: Modern Animations & Design ──────────────────── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes fadeInUp { from { opacity: 1; transform: none; } to { opacity: 1; transform: none; } }
  @keyframes slideInLeft { from { opacity: 1; transform: none; } to { opacity: 1; transform: none; } }
  @keyframes slideInRight { from { opacity: 1; transform: none; } to { opacity: 1; transform: none; } }
}

.section--services {
  padding: var(--pad) 0;
  background: linear-gradient(135deg, #f5f7f6 0%, #ffffff 100%);
  position: relative;
  z-index: 1;
}

.section--services .wrap {
  max-width: 100%;
  padding: 0 var(--pad);
  margin: 0 auto;
}

.section__title {
  text-align: center;
  margin-bottom: 4rem;
  animation: fadeInUp 0.8s var(--ease) both;
}

.service {
  margin-bottom: 3rem;
  animation: fadeInUp 0.8s var(--ease) both;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--pad);
  box-sizing: border-box;
}

.service:nth-child(2) {
  animation-delay: 0.1s;
}

.service:nth-child(3) {
  animation-delay: 0.2s;
}

.service--sevrage .wrap--split,
.service--psychiatrie .wrap--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

@media (max-width: 768px) {
  .service--sevrage .wrap--split,
  .service--psychiatrie .wrap--split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (min-width: 769px) {
  .wrap--split-reverse .split__img {
    grid-column: 2;
    grid-row: 1;
  }

  .wrap--split-reverse .split__text {
    grid-column: 1;
    grid-row: 1;
  }
}

.split__img {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  height: 420px;
  background: linear-gradient(135deg, #3F6BD4 0%, #2B4B9B 50%, #0E9BA8 100%);
  box-shadow: var(--sh-blue), inset 0 1px 0 rgba(255,255,255,0.1);
  /* backwards (pas both) : un fill "both" épinglerait transform à l'état
     final pour toujours et tuerait l'inclinaison 3D du module .photo3d */
  animation: slideInLeft 0.9s var(--ease) backwards;
}

.service--psychiatrie .split__img {
  animation: slideInRight 0.9s var(--ease) backwards;
}

.split__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* (zoom au survol : géré par le module .photo3d en fin de fichier) */

/* Gradient placeholder for Sevrage (visible en attendant l'image) */
.service--sevrage .split__img {
  background: linear-gradient(135deg, #3F6BD4 0%, #2B4B9B 50%, #0E9BA8 100%);
  position: relative;
}

/* Gradient placeholder for Psychiatrie (visible en attendant l'image) */
.service--psychiatrie .split__img {
  background: linear-gradient(135deg, #8EACC6 0%, #3F6BD4 50%, #2B4B9B 100%);
  position: relative;
}

/* Carte translucide : réservée aux blocs services (fond clair).
   Surtout pas sur le .split__text de #contact, posé sur le fond nuit. */
.service .split__text {
  /* backwards (pas both) : voir la note sur .split__img — un fill "both"
     épinglerait transform et écraserait l'élévation au survol */
  animation: slideInRight 0.9s var(--ease) backwards;
  padding: 2rem;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 8px 32px rgba(0,0,0,0.05);
  transition: all 0.3s var(--ease);
}

.service--psychiatrie .split__text {
  animation: slideInLeft 0.9s var(--ease) backwards;
}

.service:hover .split__text {
  background: rgba(255,255,255,0.8);
  box-shadow: 0 16px 48px rgba(43,75,155,0.12);
  /* propriété translate (et non transform) : insensible au transform:none
     posé par .js .reveal--left.is-set comme au fill de l'animation */
  translate: 0 -4px;
}

.service__desc {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 1.2rem 0 1.8rem;
}

.service__features {
  margin: 1.5rem 0 2rem;
  padding-inline-start: 1.5rem;
}

.service__features li {
  position: relative;
  padding-inline-start: 1.2rem;
  margin-bottom: 0.8rem;
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.6;
}

.service__features li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  top: 2px;
  color: var(--teal);
  font-weight: 700;
  font-size: 1.1rem;
}

.service h3 {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--bleu);
  margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
  .service .split__text {
    padding: 1.5rem;
  }

  .service h3 {
    font-size: 1.5rem;
  }
}

/* ── Advanced Animations ──────────────────────────────────────── */

/* Scroll Reveal Animation */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Emergency Button Pulse */
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(43, 75, 155, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(43, 75, 155, 0); }
  100% { box-shadow: 0 0 0 0 rgba(43, 75, 155, 0); }
}

.btn--call-urgent { animation: pulseRing 2s infinite; }

/* FAQ Expand Animation — scoped to main so the language switcher (details.lang) reste intact */
main details { overflow: hidden; }
main details summary {
  cursor: pointer; user-select: none;
  transition: color 0.3s var(--ease);
  position: relative; padding-inline-end: 30px;
}
main details:not(.faq details) summary::after {
  content: '▼'; position: absolute; inset-inline-end: 0; top: 50%;
  transform: translateY(-50%) rotateZ(0deg);
  transition: transform 0.3s var(--ease);
  font-size: 0.8em;
}
main details:not(.faq details)[open] summary::after { transform: translateY(-50%) rotateZ(-180deg); }
main details summary:hover { color: var(--bleu); }
main details > *:not(summary) { animation: revealUp 0.4s var(--ease) forwards; }

/* Form Field Animations */
.form__row input, .form__row select, .form__row textarea,
.form--doc input, .form--doc select, .form--doc textarea {
  transition: all 0.3s var(--ease); position: relative;
}
.form__row input:focus, .form__row select:focus, .form__row textarea:focus,
.form--doc input:focus, .form--doc select:focus, .form--doc textarea:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(43, 75, 155, 0.15)!important;
}

/* Form Submission Loading State */
.form__status[data-state="loading"]::after {
  content: ''; display: inline-block; width: 12px; height: 12px;
  border: 2px solid var(--bleu); border-right-color: transparent;
  border-radius: 50%; animation: spin 0.8s linear infinite;
  margin-left: 8px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.form__status[data-state="ok"]::before { content: '✓ '; color: var(--teal); font-weight: 700; }
.form__status[data-state="err"]::before { content: '✕ '; color: var(--rouge); font-weight: 700; }

/* Animated Gradient Background for Services */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.section--services {
  background: linear-gradient(-45deg, #f5f7f6, #ffffff, #edf2fa, #ffffff);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

/* Staggered List Animation */
.service__features li {
  animation: revealUp 0.6s var(--ease) backwards;
}
.service__features li:nth-child(1) { animation-delay: 0.1s; }
.service__features li:nth-child(2) { animation-delay: 0.2s; }
.service__features li:nth-child(3) { animation-delay: 0.3s; }
.service__features li:nth-child(4) { animation-delay: 0.4s; }
.service__features li:nth-child(5) { animation-delay: 0.5s; }

/* FAQ Items Stagger — scoped to main (jamais le sélecteur de langue) */
main details {
  animation: revealUp 0.6s var(--ease) backwards;
}
main details:nth-of-type(1) { animation-delay: 0s; }
main details:nth-of-type(2) { animation-delay: 0.1s; }
main details:nth-of-type(3) { animation-delay: 0.2s; }
main details:nth-of-type(4) { animation-delay: 0.3s; }
main details:nth-of-type(5) { animation-delay: 0.4s; }
main details:nth-of-type(6) { animation-delay: 0.5s; }

/* Chip/Button Scale Animation */
.chips span {
  transition: all 0.3s var(--ease); transform: scale(1);
}
.chips label:hover span { transform: scale(1.05); }
.chips input:checked + span { transform: scale(1.08); }

/* Link Hover Underline Animation (l'éventuel soulignement existant est conservé) */
a:not([class]) {
  position: relative;
}
a:not([class])::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 2px; background: var(--bleu);
  transition: width 0.4s var(--ease);
}
a:not([class]):hover::after { width: 100%; }

/* Section Title Animation */
.h2 { animation: revealUp 0.8s var(--ease) backwards; }
.h3 { animation: revealUp 0.7s var(--ease) backwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Triage « Que faire, là, maintenant ? » ────────────────── */
.triage__box{
  background:var(--blanc); border:1px solid var(--trait); border-radius:var(--r);
  padding:clamp(1.5rem,3vw,2.2rem); box-shadow:var(--sh-1); max-width:720px;
}
.triage__num{
  font-size:.78rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:.7rem;
}
.triage__q{
  font-family:var(--disp); font-weight:600; font-size:clamp(1.2rem,1.6vw,1.35rem);
  letter-spacing:-.02em; line-height:1.25; margin-block:.2rem .4rem; max-width:32ch;
}
.triage__btns{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.2rem }
.triage__result p{ font-size:1.1rem; line-height:1.55; max-width:44ch }
.triage__result--danger strong{ color:var(--rouge) }
.triage__restart{
  border:0; background:none; padding:0; margin-top:1rem;
  font:inherit; font-size:.92rem; color:var(--ink-2); cursor:pointer;
}
.triage__restart:hover,
.triage__restart:focus-visible{ text-decoration:underline }

/* ── « Avant d'appeler » — carte posée sur le fond nuit ─────── */
.prep{
  background:rgba(255,255,255,.08); border:1px solid rgba(237,241,243,.16);
  border-radius:var(--r-sm); padding:1.2rem 1.4rem; margin-top:1.6rem;
}
.prep__title{ font-weight:600 }
.prep__list{ display:grid; gap:.4rem; margin-top:.65rem }
.prep__list li{ position:relative; padding-inline-start:1.1rem; color:inherit; line-height:1.55 }
.prep__list li::before{
  content:"·"; position:absolute; inset-inline-start:0; top:-.08em;
  font-size:1.5em; line-height:1; font-weight:700; color:var(--teal);
}
.prep__note{ font-size:.92rem; color:inherit; opacity:.85; margin-top:.6rem }

/* ── Impression : la liste se coche au stylo, la page se tait ─ */
@media print{
  .callbar, .doc__call, .foot, .doc__back, [data-print]{ display:none !important }
  body{ background:#fff; color:#000 }
  .doc__list li{ break-inside:avoid }
  .doc--print .doc__list li::before{
    content:"☐"; background:none; border-radius:0; width:auto; height:auto;
    top:0; inset-inline-start:0; font-size:1.05em; line-height:1.5; color:#000;
  }
}

/* ── Chooser : relief 3D (survol précis, HD) ──────────────── */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .chooser__card,
  .js .chooser__card.reveal.is-set{
    transform-style:preserve-3d;
    transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition:transform .16s var(--ease-soft), box-shadow .35s var(--ease);
  }
  .chooser__card:hover,
  .chooser__card:focus-visible,
  .js .chooser__card.reveal.is-set:hover,
  .js .chooser__card.reveal.is-set:focus-visible{
    transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-8px);
    box-shadow:0 6px 14px rgba(43,75,155,.28), 0 38px 64px -26px rgba(43,75,155,.8);
  }
  .chooser__kicker{ transform:translateZ(22px) }
  .chooser__title{ transform:translateZ(38px) }
  .chooser__desc{ transform:translateZ(16px) }
  .chooser__cta{ transform:translateZ(28px) }
  .chooser__card::after{
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.2), transparent 70%);
    opacity:0; transition:opacity .3s var(--ease);
  }
  .chooser__card:hover::after{ opacity:1 }
}

/* ── En-tête compact sur mobile : tout tient, rien ne déborde ── */
@media (max-width:700px){
  .masthead__in{ gap:.6rem }
  .brand__loc{ display:none }                    /* le sous-titre repasse dans le drawer */
  .lang summary .ico{ display:none }             /* pastille langue : « FR ▼ » seul */
  .masthead__call span{                          /* Urgence : icône seule, libellé lu par lecteur d'écran */
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .masthead__call{ padding:.7rem .85rem; min-width:48px; justify-content:center }
}

/* ── Six semaines : scène 3D HQ ───────────────────────────── */
/* Lune, étoiles, soleil — pilotés par --moon/--sun (app.js, par semaine) */
.sc-night, .sc-day{ pointer-events:none }
.sc-moon{
  fill:#EDF1F3; opacity:var(--moon,1);
  filter:drop-shadow(0 0 10px rgba(237,241,243,.55));
  transition:opacity .9s var(--ease);
}
.sc-star{ fill:#C9D7DF; opacity:calc(var(--moon,1) * .9); transition:opacity .9s var(--ease) }
.sc-sun{
  fill:#E8B84B; opacity:var(--sun,0);
  filter:drop-shadow(0 0 16px rgba(232,184,75,.6));
  transition:opacity .9s var(--ease);
}
.sc-rays{
  stroke:#E8B84B; opacity:var(--sun,0);
  transition:opacity .9s var(--ease);
  transform-origin:560px 162px;
}

/* Profondeur permanente : ombres portées par couche */
.sc-clock{ filter:drop-shadow(0 3px 6px rgba(0,0,0,.28)) }
.sc-a, .sc-b{ filter:drop-shadow(0 6px 12px rgba(0,0,0,.24)) }
.sc-bed{ filter:drop-shadow(0 5px 9px rgba(0,0,0,.22)) }

/* Panneau texte : entrée en bascule 3D */
.weeks__panel{ perspective:900px }
@keyframes weekIn3d{
  from{ opacity:0; transform:rotateX(-14deg) translateY(18px) }
  to{ opacity:1; transform:none }
}
.weeks__t.is-on{ animation:weekIn3d .6s var(--ease) both; transform-origin:top center }

/* Mouvement : inclinaison de la scène + parallaxe par couche + scintillement */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .weeks__stage{
    transform:perspective(1100px) rotateX(calc(var(--py,0) * -3.5deg)) rotateY(calc(var(--px,0) * 5deg));
    transition:transform .25s var(--ease-soft), box-shadow .35s var(--ease);
    will-change:transform;
  }
  .weeks__stage:hover{
    box-shadow:0 10px 24px rgba(16,34,47,.2), 0 48px 84px -30px rgba(16,34,47,.65);
  }
  .scene .sc-clock{ transform:translate(calc(var(--px,0)*10px), calc(var(--py,0)*7px)) }
  .scene .sc-a, .scene .sc-b{ transform:translate(calc(var(--px,0)*7px), calc(var(--py,0)*5px)) }
  .scene .sc-bed, .scene .sc-bed-legs{ transform:translate(calc(var(--px,0)*5px), calc(var(--py,0)*3px)) }
  .scene .sc-night, .scene .sc-day{ transform:translate(calc(var(--px,0)*-4px), calc(var(--py,0)*-3px)) }
  .scene .sc-bars{ transform:translate(calc(var(--px,0)*3px), 0) }
  .scene .sc-clock, .scene .sc-a, .scene .sc-b, .scene .sc-bed, .scene .sc-bed-legs,
  .scene .sc-night, .scene .sc-day, .scene .sc-bars{ transition:transform .25s var(--ease-soft) }

  @keyframes scTwinkle{ 0%,100%{ opacity:calc(var(--moon,1) * .9) } 50%{ opacity:calc(var(--moon,1) * .2) } }
  .sc-star{ animation:scTwinkle 3.4s ease-in-out infinite }
  .sc-star--2{ animation-delay:1.1s }
  .sc-star--3{ animation-delay:2.2s }
  .sc-star--4{ animation-delay:.6s }
  @keyframes scRays{ to{ transform:rotate(360deg) } }
  .sc-rays{ animation:scRays 36s linear infinite }
}

/* ── Six semaines : la personne, du repli au sourire ───────── */
/* La bouche suit la rampe de couleurs : toujours contrastée sur la silhouette */
.sc-mouth{ fill:none; stroke:var(--sc-bg,#10222F); stroke-width:4.5; stroke-linecap:round }

/* Halo de bien-être derrière la silhouette redressée (s'allume avec --b) */
.sc-halo{
  fill:#FFFFFF; opacity:calc(var(--b,0) * .12);
  filter:blur(16px);
  transition:opacity .9s var(--ease);
}

/* Respiration : courte et basse au début, ample et calme à la fin */
@media (prefers-reduced-motion:no-preference){
  @keyframes scBreatheLow{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(3px) } }
  @keyframes scBreatheTall{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } }
  .sc-a .sc-breathe{ animation:scBreatheLow 3.2s ease-in-out infinite }
  .sc-b .sc-breathe{ animation:scBreatheTall 4.8s ease-in-out infinite }
}

/* ── Photos : relief 3D HQ ────────────────────────────────── */
/* app.js tague .photo3d sur .hero__ph (le cadre de la photo du héros),
   .service .split__img et chaque .tile (les conteneurs, jamais les
   <img>) et pilote --prx/--pry (inclinaison), --pgx/--pgy (reflet),
   --pmx/--pmy (contre-mouvement de l'image) et --drift (dérive au
   scroll, posée sur .hero__figure). */

/* La dérive remplace l'ancien style inline : tous les appareils.
   Double sélecteur : « .js .reveal.is-set{transform:none} » (0,3,0)
   écraserait la règle nue en silence. */
.hero__figure,
.js .hero__figure.reveal.is-set{ transform:translate3d(0, var(--drift, 0px), 0) }

@media (hover:hover) and (prefers-reduced-motion:no-preference){
  /* même parade de spécificité que pour .chooser__card */
  .photo3d,
  .js .photo3d.reveal.is-set{
    position:relative;
    transform:perspective(1050px) rotateX(var(--prx,0deg)) rotateY(var(--pry,0deg)) translate3d(0, var(--drift,0px), 0);
    transform-style:preserve-3d;
    will-change:transform;
    /* opacité + clip-path : ce raccourci gagne aussi la guerre de
       spécificité contre « .js .tile.reveal.is-set » — sans eux, le
       fondu et le volet des tuiles claqueraient d'un coup. Le délai
       --d (cascade du reveal) est retiré par app.js une fois l'entrée
       jouée, pour que l'inclinaison réponde sans retard. */
    transition:transform .18s var(--ease-soft), box-shadow .35s var(--ease),
               opacity .6s var(--ease), clip-path .9s var(--ease);
    transition-delay:var(--d,0ms);
  }
  .photo3d:hover{
    box-shadow:0 8px 18px rgba(16,34,47,.22), 0 42px 80px -34px rgba(16,34,47,.7);
  }
  /* reflet : une lumière qui suit le pointeur */
  .photo3d::after{
    content:''; position:absolute; inset:0; border-radius:inherit;
    pointer-events:none; z-index:2;
    background:radial-gradient(320px circle at var(--pgx,50%) var(--pgy,50%), rgba(255,255,255,.25), transparent 60%);
    opacity:0; transition:opacity .3s var(--ease);
  }
  .photo3d:hover::after{ opacity:1 }
  /* profondeur « fenêtre » : l'image glisse à contre-sens du cadre */
  .photo3d img{
    transform:translate(var(--pmx,0px), var(--pmy,0px));
    transition:transform .25s var(--ease-soft);
  }
  .photo3d:hover img{
    transform:translate(var(--pmx,0px), var(--pmy,0px)) scale(1.05);
  }
}

/* ── Illustrations des pages doc (psychiatrie, crise) ──────── */
.doc__illu{
  margin:2.2rem 0; border-radius:var(--r); overflow:hidden;
  box-shadow:var(--sh-1);
}
.doc__illu svg{ display:block; width:100%; height:auto }
.doc__illu figcaption{
  padding:.7rem 1.1rem; font-size:.88rem; color:var(--ink-3);
  background:var(--blanc); border-top:1px solid var(--trait);
}