/* ═══════════════════════════════════════════════════════════════
   AION 120 — Design System
   Palette 100 % lumineuse · Mobile-first · GPU-friendly
   ═══════════════════════════════════════════════════════════════ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Couleurs */
  --canvas:      #FAFAFC;
  --canvas-warm: #FDFCF8;
  --ink:         #2C3E50;
  --ink-soft:    #5B6B7B;
  --ink-mute:    #67757F;   /* 4,8:1 sur blanc — AA petit texte */
  --surface:     #FFFFFF;
  --gold:        #D4AF37;
  --gold-deep:   #A8801F;   /* 3,6:1 — grands titres, icones, bordures */
  --gold-text:   #8C6D18;   /* 4,9:1 — petits textes accentues */
  --gold-light:  #E8C766;
  --gold-wash:   rgba(212,175,55,.10);
  --hairline:    rgba(44,62,80,.08);
  --hairline-2:  rgba(44,62,80,.14);

  /* Ombres multicouches ultra-subtiles */
  --shadow-sm: 0 1px 2px rgba(44,62,80,.03), 0 4px 12px -6px rgba(44,62,80,.06);
  --shadow-md: 0 2px 4px rgba(44,62,80,.02), 0 20px 40px -15px rgba(44,62,80,.05);
  --shadow-lg: 0 2px 6px rgba(44,62,80,.03), 0 32px 64px -24px rgba(44,62,80,.10);
  --shadow-gold: 0 10px 30px -12px rgba(212,175,55,.45);

  /* Typographie */
  --serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Rythme */
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 24px;
  --r-pill: 999px;
  --gutter: clamp(20px, 5.5vw, 40px);
  --maxw: 1120px;

  /* Motion */
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.32,.72,0,1);
  --t-fast: .28s;
  --t-med: .55s;
  --t-slow: .9s;
}

/* Jetons dérivés — pilotent les couleurs qui ne peuvent pas hériter
   (dégradés SVG, verrerie, textures) */
:root{
  color-scheme:light;
  --arc-1:#E8C766; --arc-2:#D4AF37; --arc-3:#C08A2E;
  --arc-track:rgba(44,62,80,.07);
  --liq-1:#8E2333; --liq-2:#701A28; --liq-3:#4E101C;
  --crest:#A8394B;
  --glass:rgba(44,62,80,.20);
  --glass-rim:rgba(44,62,80,.26);
  --pop-bg:rgba(255,255,255,.94);
  --quote-bg:linear-gradient(165deg,#fff 0%,#FEFDF9 100%);
  --error-ink:#8A5A12;
  --grain-blend:multiply;
  --grain-op:.5;
  --halo:
    radial-gradient(120% 70% at 50% -18%, rgba(232,199,102,.20) 0%, rgba(232,199,102,.07) 38%, transparent 68%),
    radial-gradient(90% 55% at 85% 105%, rgba(212,175,55,.09) 0%, transparent 62%),
    linear-gradient(180deg,#FDFCF8 0%, #FAFAFC 42%);
  --switch-on-bg:rgba(112,26,40,.10);
  --switch-on-border:rgba(112,26,40,.32);
  --switch-on-knob:linear-gradient(160deg,#8E2333,#4E101C);
}

/* ═══════════════════════════════════════════════════════════════
   L'ENVERS DU DÉCOR — thème sombre intégral
   Fond noir grenat · textes blancs · rouge sur les points forts
   ═══════════════════════════════════════════════════════════════ */
.is-deep{
  color-scheme:dark;

  --canvas:      #100A0C;
  --canvas-warm: #1A1013;
  --ink:         #F6F1F2;
  --ink-soft:    #CBBFC2;
  --ink-mute:    #93868A;
  --surface:     #1B1014;

  /* L'accent bascule de l'or au grenat lumineux */
  --gold:        #B8283C;
  --gold-deep:   #EC7183;   /* 6,3:1 sur le noir grenat */
  --gold-text:   #EC7183;
  --gold-light:  #D9455A;
  --gold-wash:   rgba(236,113,131,.13);

  --hairline:    rgba(255,255,255,.09);
  --hairline-2:  rgba(255,255,255,.17);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px -6px rgba(0,0,0,.5);
  --shadow-md: 0 2px 4px rgba(0,0,0,.35), 0 20px 40px -15px rgba(0,0,0,.6);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 32px 64px -24px rgba(0,0,0,.7);
  --shadow-gold: 0 10px 30px -12px rgba(184,40,60,.65);

  --arc-1:#EC7183; --arc-2:#C93049; --arc-3:#8E1F32;
  --arc-track:rgba(255,255,255,.08);
  --liq-1:#C43048; --liq-2:#941F31; --liq-3:#5C1220;
  --crest:#E4788B;
  --glass:rgba(255,255,255,.22);
  --glass-rim:rgba(255,255,255,.30);
  --pop-bg:rgba(27,16,20,.94);
  --quote-bg:linear-gradient(165deg,#1F1216 0%,#170D11 100%);
  --error-ink:#F0A3AE;
  --grain-blend:screen;
  --grain-op:.22;
  --halo:
    radial-gradient(120% 72% at 50% -18%, rgba(201,48,73,.26) 0%, rgba(140,30,48,.10) 38%, transparent 70%),
    radial-gradient(90% 55% at 85% 105%, rgba(184,40,60,.14) 0%, transparent 62%),
    linear-gradient(180deg,#1A1013 0%, #100A0C 45%);
  --switch-on-bg:rgba(236,113,131,.16);
  --switch-on-border:rgba(236,113,131,.42);
  --switch-on-knob:linear-gradient(160deg,#EC7183,#B8283C);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:hidden;
}
body{
  margin:0;
  min-height:100svh;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3,p,figure,blockquote,fieldset,legend{ margin:0; padding:0; }
fieldset{ border:0; min-width:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
img,svg{ max-width:100%; }
::selection{ background:var(--gold-wash); color:var(--ink); }

/* ---------- 3. Fond : grain + halo solaire ---------- */
.grain{
  position:fixed; inset:-50%;
  pointer-events:none; z-index:0;
  opacity:var(--grain-op); mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}
.halo{
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  background:var(--halo);
}

/* Dégradés SVG pilotés par le thème */
.s-arc-1{ stop-color:var(--arc-1); }
.s-arc-2{ stop-color:var(--arc-2); }
.s-arc-3{ stop-color:var(--arc-3); }
.s-liq-1{ stop-color:var(--liq-1); }
.s-liq-2{ stop-color:var(--liq-2); }
.s-liq-3{ stop-color:var(--liq-3); }

/* ---------- 4. Layout ---------- */
.shell{
  position:relative; z-index:1;
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(48px,11vh,96px) var(--gutter) clamp(40px,8vh,72px);
}
.view{ display:none; }
.view--active{ display:block; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--surface); color:var(--ink);
  padding:12px 18px; border-radius:0 0 var(--r-sm) 0;
  text-decoration:none; box-shadow:var(--shadow-md);
}
.skip-link:focus{ left:0; }

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ---------- 5. Typographie partagée ---------- */
.eyebrow{
  font-size:.72rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-text);
}
.gold{ color:var(--gold-deep); }

/* ---------- 6. HERO ---------- */
.hero{
  max-width:660px; margin-inline:auto; text-align:center;
}
.hero__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(3.1rem,15vw,6.4rem);
  line-height:.95;
  letter-spacing:-.02em;
  margin:.28em 0 .34em;
  display:flex; align-items:baseline; justify-content:center;
  gap:clamp(10px,3vw,20px); flex-wrap:wrap;
}
.hero__word{ }
.hero__num{
  color:var(--gold-deep);
  font-family:var(--sans);
  font-weight:300;
  font-size:.82em;
  letter-spacing:.01em;
  position:relative;
}
.hero__num::after{
  content:""; position:absolute; left:6%; right:6%; bottom:.06em;
  height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.55;
}
.hero__lede{
  font-size:clamp(1.02rem,3.5vw,1.16rem);
  line-height:1.78;
  color:var(--ink-soft);
  max-width:56ch; margin-inline:auto;
  text-wrap:pretty;
}
.hero__lede em{
  font-style:normal; font-weight:500; color:var(--ink);
  box-shadow:inset 0 -.42em 0 var(--gold-wash);
}
.hero__foot{
  margin-top:26px;
  font-size:.8rem; color:var(--ink-mute);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.ico-lock{ width:14px; height:14px; flex:none; color:var(--gold-deep); }

/* ---------- 7. Cartes ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
}
.card--form{
  margin-top:clamp(30px,6vw,42px);
  padding:clamp(20px,5vw,28px);
  text-align:left;
}

/* ---------- 8. Sélecteur de date sur-mesure ---------- */
.picker__legend{
  font-family:var(--serif);
  font-size:1.06rem; font-weight:500;
  margin-bottom:14px; color:var(--ink);
}
.picker__row{
  display:grid;
  grid-template-columns:1fr 1.5fr 1.15fr;
  gap:10px;
}
.field{ position:relative; min-width:0; }
.field__label{
  display:block;
  font-size:.68rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute);
  margin:0 0 6px 3px;
}
.field__trigger{
  width:100%; min-height:56px;
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding:0 12px 0 14px;
  background:var(--canvas-warm);
  border:1.5px solid var(--hairline-2);
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:border-color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease),
             transform .18s var(--ease);
  will-change:transform;
}
.field__trigger:hover{ border-color:rgba(212,175,55,.45); background:#fff; }
.field__trigger:active{ transform:scale(.985); }
.field__trigger:focus-visible,
.field__trigger[aria-expanded="true"]{
  outline:none;
  border-color:var(--gold);
  background:#fff;
  box-shadow:0 0 0 4px var(--gold-wash);
}
.field__value{
  font-size:1.02rem; font-weight:500;
  color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}
.field__trigger:not(.is-filled) .field__value{ color:var(--ink-mute); font-weight:400; }
.field__chev{
  width:11px; height:8px; flex:none; color:var(--ink-mute);
  transition:transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.field__trigger[aria-expanded="true"] .field__chev{ transform:rotate(180deg); color:var(--gold-deep); }

/* La « capsule de lumière » */
.pop{
  position:absolute; z-index:40;
  top:calc(100% + 8px); left:0; right:0;
  max-height:270px; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:6px;
  background:var(--pop-bg);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid var(--hairline-2);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  transform-origin:top center;
  animation:popIn .34s var(--ease) both;
  scrollbar-width:thin; scrollbar-color:var(--hairline-2) transparent;
}
.field--wide .pop{ min-width:170px; }
.pop--up{
  top:auto; bottom:calc(100% + 8px);
  transform-origin:bottom center;
  animation:popInUp .34s var(--ease) both;
}
@keyframes popInUp{
  from{ opacity:0; transform:translate3d(0,8px,0) scale(.96); }
  to  { opacity:1; transform:translate3d(0,0,0) scale(1); }
}
.pop::-webkit-scrollbar{ width:6px; }
.pop::-webkit-scrollbar-thumb{ background:var(--hairline-2); border-radius:3px; }
@keyframes popIn{
  from{ opacity:0; transform:translate3d(0,-8px,0) scale(.96); }
  to  { opacity:1; transform:translate3d(0,0,0) scale(1); }
}
.pop__opt{
  display:block; width:100%;
  min-height:44px; padding:10px 14px;
  text-align:left; background:none; border:0;
  border-radius:11px; cursor:pointer;
  font-size:.98rem; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
  transition:background-color .16s var(--ease), color .16s var(--ease);
}
.pop__opt:hover, .pop__opt.is-active{ background:var(--gold-wash); color:var(--ink); }
.pop__opt[aria-selected="true"]{
  background:linear-gradient(90deg, rgba(212,175,55,.20), rgba(212,175,55,.08));
  color:var(--ink); font-weight:600;
}
.pop__opt:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; }

.form-help{
  margin-top:14px;
  font-size:.79rem; line-height:1.55; color:var(--ink-mute);
}
.form-error{
  margin-top:10px; padding:10px 13px;
  font-size:.83rem; font-weight:500; color:var(--error-ink);
  background:rgba(212,175,55,.12);
  border-left:2.5px solid var(--gold);
  border-radius:0 10px 10px 0;
  animation:nudge .4s var(--ease);
}
@keyframes nudge{
  0%,100%{ transform:translate3d(0,0,0); }
  25%{ transform:translate3d(-4px,0,0); }
  75%{ transform:translate3d(4px,0,0); }
}

/* ---------- 9. Boutons ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 28px;
  border:0; border-radius:var(--r-pill);
  font-size:1rem; font-weight:500; letter-spacing:.01em;
  cursor:pointer; overflow:hidden;
  transition:transform .22s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
  will-change:transform;
}
.btn:active{ transform:scale(.97); }
.btn:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; }

.btn--primary{
  width:100%; margin-top:20px;
  color:#fff;
  background:linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 48%, var(--gold-deep) 100%);
  box-shadow:var(--shadow-gold);
  text-shadow:0 1px 1px rgba(120,90,10,.2);
}
.btn--primary::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  transform:translate3d(-120%,0,0);
  transition:transform .85s var(--ease);
}
.btn--primary:hover::after{ transform:translate3d(120%,0,0); }
.btn--primary:hover{ box-shadow:0 14px 36px -12px rgba(212,175,55,.6); }
.btn__arrow{ width:19px; height:12px; flex:none; transition:transform .3s var(--ease); }
.btn--primary:hover .btn__arrow{ transform:translate3d(4px,0,0); }

.btn--ghost{
  background:var(--surface); color:var(--ink);
  border:1.5px solid var(--hairline-2);
  box-shadow:var(--shadow-sm);
}
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-text); }

.btn--text{
  background:none; color:var(--ink-mute);
  padding:0 18px; font-size:.92rem;
  text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:var(--hairline-2);
}
.btn--text:hover{ color:var(--gold-text); text-decoration-color:var(--gold); }

/* ---------- 10. Tableau de bord ---------- */
.dash__head{ text-align:center; max-width:640px; margin-inline:auto; }
.dash__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.95rem,8vw,3.1rem);
  line-height:1.14; letter-spacing:-.015em;
  margin:.32em 0 .4em;
  text-wrap:balance;
}
.dash__sub{
  font-size:.9rem; color:var(--ink-mute); line-height:1.7;
}
.dash__sub strong{ color:var(--ink-soft); font-weight:500; }

/* Arc */
.arc{
  position:relative;
  width:min(340px,84vw);
  margin:clamp(28px,7vw,44px) auto clamp(4px,2vw,10px);
}
.arc__svg{ display:block; width:100%; height:auto; overflow:visible; }
.arc__track{ stroke:var(--arc-track); stroke-width:7; }
.arc__fill{
  stroke-width:7;
  stroke-dasharray:var(--arc-len,277);
  stroke-dashoffset:var(--arc-len,277);
  transition:stroke-dashoffset 1.9s var(--ease) .3s;
  filter:drop-shadow(0 3px 8px rgba(212,175,55,.35));
}
.arc__center{
  position:absolute; left:0; right:0; bottom:2px;
  display:flex; flex-direction:column; align-items:center; gap:1px;
}
.arc__pct{
  font-size:clamp(1.5rem,6vw,1.85rem); font-weight:600;
  letter-spacing:-.02em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.arc__cap{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute);
}

/* ---------- 10 bis. Visuel central : arc ⇄ coupe ---------- */
.visual{
  margin-top:clamp(26px,7vw,42px);
  display:flex; flex-direction:column; align-items:center;
}
/* La scène morphe en hauteur d'un visuel à l'autre (hauteur pilotée en JS) */
.visual__stage{
  position:relative;
  width:100%;
  height:var(--stage-h,220px);
  transition:height .6s var(--ease);
}
.viz{
  position:absolute; top:0; left:50%;
  opacity:0; visibility:hidden;
  transform:translate3d(-50%,12px,0) scale(.97);
  transition:opacity .6s var(--ease), transform .6s var(--ease), visibility 0s linear .6s;
  will-change:transform,opacity;
}
.viz--on{
  opacity:1; visibility:visible;
  transform:translate3d(-50%,0,0) scale(1);
  transition:opacity .6s var(--ease), transform .6s var(--ease), visibility 0s;
}
.arc{ margin:0; }

/* La coupe — l'envers du décor */
.cup{
  width:min(232px,62vw);
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.cup__svg{ display:block; width:100%; height:auto; overflow:visible; }
.cup__glass{ stroke:var(--glass); stroke-width:2.4; stroke-linecap:round; }
.cup__rim{
  stroke:var(--glass-rim); stroke-width:2.6;
  animation:rimBreathe 5.6s var(--ease-soft) infinite;
  transform-origin:100px 42px;
  will-change:transform,opacity;
}
@keyframes rimBreathe{
  0%,100%{ opacity:.55; transform:scale(1); }
  50%    { opacity:1;   transform:scale(1.035); }
}
.cup__level{
  transform:translateY(var(--cup-y,147px));
  transition:transform 2.2s var(--ease) .35s;
  will-change:transform;
}
.cup__breathe{
  animation:cupBreathe 5.6s var(--ease-soft) infinite;
  will-change:transform;
}
@keyframes cupBreathe{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-2.5px); }
}
.cup__wave{
  fill:url(#garnet);
  animation:cupDrift 7.5s linear infinite;
  will-change:transform;
}
.cup__crest{
  stroke:var(--crest); stroke-width:2.2; opacity:.6;
  animation:cupDrift 7.5s linear infinite;
  will-change:transform;
}
@keyframes cupDrift{
  from{ transform:translateX(0); }
  to  { transform:translateX(-100px); }
}
.cup__tick{
  stroke:var(--gold-deep); stroke-width:2; stroke-linecap:round;
  opacity:.18;
  animation:tickBlink 4.4s var(--ease-soft) infinite;
  animation-delay:var(--td,0ms);
  will-change:opacity;
}
@keyframes tickBlink{
  0%,72%,100%{ opacity:.16; }
  84%        { opacity:.62; }
}
.cup__legend{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:6px 18px;
  font-size:.78rem; color:var(--ink-mute);
}
.legend__item{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.legend__item b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.legend__dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.legend__dot--garnet{ background:var(--switch-on-knob); }
.legend__dot--gold{ background:linear-gradient(160deg,var(--gold-light),var(--gold-deep)); }

/* Interrupteur « perspective profonde » */
.switch{
  margin-top:clamp(18px,4.5vw,26px);
  min-height:48px; padding:0 6px;
  display:inline-flex; align-items:center; gap:11px;
  background:none; border:0; cursor:pointer;
  font-size:.88rem; color:var(--ink-mute);
  border-radius:var(--r-pill);
  transition:color var(--t-fast) var(--ease);
}
.switch:hover{ color:var(--ink); }
.switch:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.switch__track{
  position:relative; flex:none;
  width:42px; height:24px; border-radius:var(--r-pill);
  background:var(--canvas-warm);
  border:1.5px solid var(--hairline-2);
  transition:background-color .45s var(--ease), border-color .45s var(--ease);
}
.switch__knob{
  position:absolute; top:2.5px; left:2.5px;
  width:16px; height:16px; border-radius:50%;
  background:linear-gradient(160deg,var(--gold-light),var(--gold-deep));
  box-shadow:0 2px 5px rgba(44,62,80,.18);
  transition:transform .45s var(--ease), background .45s var(--ease);
  will-change:transform;
}
.switch[aria-pressed="true"]{ color:var(--ink); }
.switch[aria-pressed="true"] .switch__track{
  background:var(--switch-on-bg); border-color:var(--switch-on-border);
}
.switch[aria-pressed="true"] .switch__knob{
  transform:translate3d(18px,0,0);
  background:var(--switch-on-knob);
}

/* Compteurs — grille 2×2 mobile */
.counters{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,2.6vw,16px);
  margin-top:clamp(24px,6vw,38px);
}
.counter{
  padding:clamp(16px,4.5vw,24px) 10px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  will-change:transform;
}
.counter:hover{ transform:translate3d(0,-3px,0); box-shadow:var(--shadow-lg); }
.counter__value{
  font-size:clamp(1.95rem,8.6vw,2.9rem);
  font-weight:600; line-height:1;
  letter-spacing:-.015em;
  color:var(--ink);
}
.counter__label{
  font-size:.7rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute);
}
.counter[data-unit="days"] .counter__value{ color:var(--gold-deep); }

/* ---------- 11. Odomètre ---------- */
.odo{
  display:inline-flex; align-items:flex-start;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.odo__d{
  position:relative;
  display:inline-block;
  height:1em; overflow:hidden;
  width:.62em;
}
.odo__d--sep{ width:.28em; overflow:visible; }
.odo__strip{
  display:block;
  transform:translate3d(0,0,0);
  transition:transform .95s var(--ease);
  will-change:transform;
}
.odo__strip span{ display:block; height:1em; text-align:center; }
.odo--sm{ font-size:clamp(1.7rem,7.5vw,2.3rem); font-weight:500; }
.odo--sm .odo__strip{ transition-duration:.55s; }

/* ---------- 12. Temps vivant ---------- */
.live{
  margin-top:clamp(10px,2.6vw,16px);
  padding:clamp(18px,5vw,26px) 20px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  position:relative; overflow:hidden;
}
.live::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 0%, rgba(232,199,102,.12), transparent 65%);
  pointer-events:none;
}
.live__pulse{
  width:7px; height:7px; border-radius:50%;
  background:var(--gold);
  animation:breathe 5.2s var(--ease-soft) infinite;
  will-change:transform,opacity;
}
@keyframes breathe{
  0%,100%{ transform:scale(1); opacity:.45; box-shadow:0 0 0 0 rgba(212,175,55,.4); }
  50%    { transform:scale(1.5); opacity:1;  box-shadow:0 0 0 9px rgba(212,175,55,0); }
}
.live__clock{
  display:flex; align-items:flex-start; justify-content:center;
  color:var(--ink);
}
.live__sep{
  font-size:clamp(1.7rem,7.5vw,2.3rem); font-weight:300;
  line-height:1; color:var(--ink-mute);
  margin:0 .06em;
  animation:blink 2s steps(1,end) infinite;
}
@keyframes blink{ 0%,55%{opacity:.55} 56%,100%{opacity:.18} }
.live__cap{
  font-family:var(--serif); font-style:italic;
  font-size:.9rem; color:var(--ink-mute); text-align:center;
}

/* ---------- 12 bis. Repère générationnel ---------- */
.card--gen{
  margin-top:clamp(24px,6vw,38px);
  padding:clamp(24px,6vw,36px) clamp(22px,5.5vw,40px);
  text-align:left;
  border-left:3px solid var(--gold);
  border-radius:var(--r-lg);
}
.gen__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.32rem,5.6vw,1.75rem);
  line-height:1.25; letter-spacing:-.01em;
  margin:.4em 0 .1em;
  text-wrap:balance;
}
.gen__range{
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:1.1em;
}
.gen__repere{
  font-size:clamp(.96rem,3.6vw,1.04rem);
  line-height:1.75; color:var(--ink-soft);
  text-wrap:pretty;
}
.gen__perspective{
  margin-top:1em;
  font-size:clamp(.96rem,3.6vw,1.04rem);
  line-height:1.75; color:var(--ink-soft);
}
.gen__perspective b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.gen__conseil{
  display:flex; align-items:flex-start; gap:12px;
  margin-top:1.4em; padding:16px 18px;
  background:linear-gradient(100deg, var(--gold-wash), rgba(212,175,55,.03));
  border-radius:var(--r-sm);
  font-size:clamp(.95rem,3.6vw,1.02rem); line-height:1.7;
  color:var(--ink);
}
.gen__ico{ width:19px; height:19px; flex:none; margin-top:3px; color:var(--gold-deep); }

/* ---------- 13. Introspection ---------- */
.card--quote{
  position:relative;
  margin-top:clamp(24px,6vw,38px);
  padding:clamp(30px,7vw,48px) clamp(22px,6vw,52px) clamp(26px,6vw,42px);
  text-align:center;
  background:var(--quote-bg);
  /* les diapositives partagent la hauteur de la plus haute : on recentre */
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.quote__mark{
  width:34px; height:24px;
  color:var(--gold); opacity:.32;
  margin-bottom:16px;
}
.card--quote p{
  font-family:var(--serif);
  font-size:clamp(1.12rem,4.6vw,1.42rem);
  line-height:1.62; color:var(--ink);
  max-width:32ch; margin:0 auto;
  text-wrap:pretty;
}
.card--quote p + p{
  margin-top:.85em; color:var(--ink-soft);
  font-style:italic; font-size:clamp(1.02rem,4.2vw,1.24rem);
}

/* ---------- 13 bis. Citation aléatoire ---------- */
.card--inspire{
  margin-top:clamp(12px,3vw,18px);
  padding:clamp(24px,6vw,34px) clamp(22px,5.5vw,40px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  text-align:center;
}
.inspire{ margin:0; min-height:5.4em; display:flex; flex-direction:column; justify-content:center; gap:10px; }
.inspire__text{
  margin:0;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.02rem,4.1vw,1.2rem);
  line-height:1.65; color:var(--ink);
  max-width:38ch; margin-inline:auto;
  text-wrap:pretty;
}
.inspire__author{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-text); min-height:1em;
}
.inspire__text, .inspire__author{
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  will-change:transform,opacity;
}
.is-swapping .inspire__text,
.is-swapping .inspire__author{
  opacity:0; transform:translate3d(0,10px,0);
}
.inspire__ico{ width:17px; height:17px; flex:none; color:var(--gold-deep); }
.btn--sm{ min-height:48px; padding:0 22px; font-size:.92rem; }

/* ---------- 13 ter. Carrousel des cartes ---------- */
.deck{ margin-top:clamp(24px,6vw,38px); }
.deck__viewport{
  /* positionné : les offsetLeft des diapositives sont ainsi mesurés
     depuis le conteneur de défilement, pas depuis .shell */
  position:relative;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:6px 0 12px;
  border-radius:var(--r-lg);
}
.deck__viewport::-webkit-scrollbar{ display:none; }
.deck__viewport:focus-visible{ outline:2px solid var(--gold); outline-offset:5px; }
.deck__track{ display:flex; align-items:stretch; }
.deck__slide{
  flex:0 0 100%; min-width:0;
  scroll-snap-align:center;
  display:flex; padding-inline:3px;
  transition:opacity .55s var(--ease), transform .55s var(--ease);
  will-change:transform,opacity;
}
.deck__slide > *{ width:100%; margin-top:0; }

.deck__nav{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,3vw,18px);
  margin-top:6px;
}
.deck__arrow{
  width:48px; height:48px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--ink-soft);
  border:1.5px solid var(--hairline-2); border-radius:50%;
  cursor:pointer; box-shadow:var(--shadow-sm);
  transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
             opacity var(--t-fast) var(--ease), transform .2s var(--ease);
  will-change:transform;
}
.deck__arrow svg{ width:11px; height:16px; }
.deck__arrow:hover{ border-color:var(--gold); color:var(--gold-deep); }
.deck__arrow:active{ transform:scale(.93); }
.deck__arrow:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.deck__arrow[aria-disabled="true"]{ opacity:.28; pointer-events:none; }

.deck__dots{ display:flex; align-items:center; gap:8px; }
.deck__dot{
  width:30px; height:44px; padding:0;
  background:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.deck__dot::before{
  content:""; width:100%; height:3px; border-radius:2px;
  background:var(--hairline-2);
  transition:background-color .45s var(--ease), transform .45s var(--ease);
}
.deck__dot:hover::before{ background:var(--gold-light); }
.deck__dot[aria-selected="true"]::before{ background:var(--gold); transform:scaleY(1.8); }
.deck__dot:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:6px; }

/* Tablette & desktop : la carte active est centrée, les voisines dépassent.
   Les 18 % de marge du rail ramènent mécaniquement chaque diapositive
   (flex-basis:100 %) à 64 % de la fenêtre — la carte active tombe pile au centre. */
@media (min-width:900px){
  .deck__track{ padding-inline:18%; }
  .deck__slide:not(.is-active){ opacity:.32; transform:scale(.955); }
}

/* ---------- 14. Actions ---------- */
.dash__actions{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  margin-top:clamp(26px,6vw,38px);
}
.dash__actions .btn--ghost{ width:100%; max-width:320px; }

/* ---------- 15. Footer / noscript ---------- */
.foot{
  position:relative; z-index:1;
  max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--gutter) clamp(34px,7vh,56px);
  text-align:center;
}
.foot p{
  font-size:.83rem; line-height:1.7; color:var(--ink-mute);
  max-width:46ch; margin-inline:auto;
}
.foot__meta{
  margin-top:8px !important;
  font-size:.72rem !important; letter-spacing:.06em;
  color:rgba(138,151,163,.75);
}
.noscript{
  position:relative; z-index:1;
  max-width:520px; margin:0 auto 40px;
  padding:20px 24px;
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-lg); box-shadow:var(--shadow-md);
  font-size:.9rem; color:var(--ink-soft); text-align:center;
}

/* ---------- 16. Motion : entrées ---------- */
.reveal{
  opacity:0;
  transform:translate3d(0,26px,0);
  animation:riseIn .95s var(--ease) forwards;
  animation-delay:var(--d,0ms);
  will-change:transform,opacity;
}
@keyframes riseIn{ to{ opacity:1; transform:translate3d(0,0,0); } }

/* Éléments du dashboard : joués à la révélation via .is-in */
[data-stagger]{ opacity:0; transform:translate3d(0,22px,0); }
.is-in [data-stagger]{
  animation:riseIn .85s var(--ease) forwards;
  animation-delay:var(--d,0ms);
}

/* Cross-fade entre les deux vues */
.view--leaving{
  display:block !important;
  animation:fadeOut .48s var(--ease) forwards;
  pointer-events:none;
}
@keyframes fadeOut{
  to{ opacity:0; transform:translate3d(0,-18px,0) scale(.985); filter:blur(2px); }
}

/* ---------- 17. Responsive ---------- */
@media (min-width:600px){
  .picker__row{ gap:12px; }
  .btn--primary{ width:auto; min-width:280px; display:flex; margin-inline:auto; }
  .card--form{ text-align:center; }
  .picker__row{ text-align:left; }
  .dash__actions{ flex-direction:row; justify-content:center; gap:16px; }
  .dash__actions .btn--ghost{ width:auto; }
}
@media (min-width:860px){
  .counters{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .counter{ padding:30px 12px; }
  .live{ padding:30px; }
}
@media (min-width:1100px){
  .hero__lede{ font-size:1.2rem; }
}

/* Très petits écrans (iPhone SE, 320px) */
@media (max-width:359px){
  :root{ --gutter:16px; }
  .picker__row{ grid-template-columns:1fr 1fr; }
  .field--wide{ grid-column:1 / -1; order:-1; }
  .field__trigger{ padding-inline:11px; }
}

/* ---------- 18. Accessibilité / préférences ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
    animation-delay:0s !important;
  }
  .reveal,[data-stagger]{ opacity:1 !important; transform:none !important; }
  .arc__fill{ transition:none; }
  .cup__rim,.cup__breathe,.cup__wave,.cup__crest,.cup__tick{ animation:none !important; }
  .cup__tick{ opacity:.3; }
}
@media (prefers-contrast:more){
  :root{ --ink-mute:#5B6B7B; --hairline:rgba(44,62,80,.22); --hairline-2:rgba(44,62,80,.34); }
}
/* Fondu global lors de la bascule clair ⇄ sombre.
   :where() a une spécificité nulle : chaque composant qui déclare déjà
   sa propre transition (visuels, boutons) conserve la sienne intacte. */
:where(.theming, .theming *, .theming *::before, .theming *::after){
  transition:background-color .6s var(--ease), background-image .6s var(--ease),
             color .6s var(--ease), border-color .6s var(--ease),
             fill .6s var(--ease), stroke .6s var(--ease),
             stop-color .6s var(--ease), box-shadow .6s var(--ease);
}

@media print{
  .grain,.halo,.dash__actions,.skip-link,.deck__nav{ display:none !important; }
  .deck__viewport{ overflow:visible; }
  .deck__track{ display:block; padding:0; }
  .deck__slide{ opacity:1 !important; transform:none !important; margin-bottom:16px; }
  body{ background:#fff; }
  .card{ box-shadow:none; border:1px solid #ddd; }
}