/* ═══ Manrope, extraite de l'application ═══════════════════════════════ */
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;
  src:url(polices/Manrope-0.woff2)format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;
  src:url(polices/Manrope-1.woff2)format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ═══ Une teinte gouverne tout ═════════════════════════════════════════ */
:root{--t:199; --c:.075}
[data-acc=sarcelle]{--t:199; --c:.075}
[data-acc=ocean]   {--t:225; --c:.105}
[data-acc=menthe]  {--t:170; --c:.100}
[data-acc=indigo]  {--t:275; --c:.125}
[data-acc=prune]   {--t:310; --c:.110}
[data-acc=ambre]   {--t:70;  --c:.110}
[data-acc=brique]  {--t:40;  --c:.110}
[data-acc=ardoise] {--t:255; --c:.115}

:root{
  --p1:oklch(42% calc(var(--c) * .62) var(--t));
  --p2:oklch(26% calc(var(--c) * .55) var(--t));
  /* Deux teintes voisines pour le fond. Elles DESCENDENT de --t : changer
     d'accent fait tourner les vagues avec le reste, sans rien décider ici. */
  --t2:calc(var(--t) + 30);
  --t3:calc(var(--t) - 26);
  --r:14px; --r-sm:10px; --r-xs:7px; --r-pill:999px;
  --large:78rem;
  --pas:clamp(3.5rem, 7vw, 6.5rem);
  --sortie:cubic-bezier(.22,.61,.36,1);
}

/* les surfaces — le filet sépare, pas l'ombre */
:root,[data-amb=papier]{
  --bg:      oklch(98.4% .0035 var(--t));
  --panel:   oklch(100% 0 0);
  --panel2:  oklch(97% .006 var(--t));
  --line:    oklch(92.5% .006 var(--t));
  --line2:   oklch(86% .012 var(--t));
  --txt:     oklch(20% .015 var(--t));
  --dim:     oklch(46% .012 var(--t));
  --faint:   oklch(58% .010 var(--t));
  --acc:     oklch(48% var(--c) var(--t));
  --acc-vif: oklch(40% var(--c) var(--t));
  --onacc:   oklch(99% .005 var(--t));
  --gare:    oklch(45% .105 55);
  --gare-fond:oklch(97.5% .026 78);
  --ombre:0 10px 24px -12px oklch(25% .02 var(--t)/.20),0 36px 70px -30px oklch(25% .02 var(--t)/.22);
  /* le fond : la même teinte, poussée en chroma et retenue en opacité */
  --v-r1:  oklch(62% calc(var(--c) * 1.7) var(--t) / .065);
  --v-r2:  oklch(70% calc(var(--c) * 1.4) var(--t2) / .05);
  --v-r3:  oklch(58% calc(var(--c) * 1.5) var(--t3) / .042);
  --v-fil: oklch(50% calc(var(--c) * 1.2) var(--t) / .055);
  --v-h1:  oklch(72% calc(var(--c) * 1.6) var(--t) / .11);
  --v-h2:  oklch(68% calc(var(--c) * 1.4) var(--t2) / .08);
  --voile: oklch(99% .004 var(--t) / .62);
  color-scheme:light;
}
[data-amb=nuit]{
  --bg:      oklch(15.5% .012 var(--t));
  --panel:   oklch(19.5% .014 var(--t));
  --panel2:  oklch(23.5% .016 var(--t));
  --line:    oklch(27.5% .016 var(--t));
  --line2:   oklch(35% .020 var(--t));
  --txt:     oklch(95% .008 var(--t));
  --dim:     oklch(72% .012 var(--t));
  --faint:   oklch(61% .014 var(--t));
  --acc:     oklch(79% calc(var(--c) * .9) var(--t));
  --acc-vif: oklch(87% calc(var(--c) * .75) var(--t));
  --onacc:   oklch(17% .02 var(--t));
  --gare:    oklch(80% .095 78);
  --gare-fond:oklch(25% .042 78);
  --ombre:0 10px 24px -12px #0008,0 36px 70px -30px #0009;
  --v-r1:  oklch(72% calc(var(--c) * 1.5) var(--t) / .07);
  --v-r2:  oklch(78% calc(var(--c) * 1.2) var(--t2) / .055);
  --v-r3:  oklch(66% calc(var(--c) * 1.4) var(--t3) / .06);
  --v-fil: oklch(84% calc(var(--c) * 1.0) var(--t) / .05);
  --v-h1:  oklch(60% calc(var(--c) * 1.8) var(--t) / .15);
  --v-h2:  oklch(52% calc(var(--c) * 1.6) var(--t2) / .12);
  --voile: oklch(21% .014 var(--t) / .66);
  color-scheme:dark;
}

/* ═══ Assises ═══════════════════════════════════════════════════════════ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:Manrope,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:clamp(1rem,.96rem + .18vw,1.09rem); line-height:1.66;
  font-weight:400; letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background-color .45s var(--sortie), color .45s var(--sortie);
}
::selection{background:var(--acc);color:var(--onacc)}
a{color:var(--acc-vif);text-underline-offset:.2em;text-decoration-thickness:.07em;transition:color .18s}
a:hover{color:var(--txt)}
:focus-visible{outline:2.5px solid var(--acc);outline-offset:3px;border-radius:var(--r-xs)}
img{max-width:100%;height:auto}

.saut{position:absolute;left:.75rem;top:.75rem;transform:translateY(-200%);background:var(--panel);color:var(--txt);
  padding:.85rem 1.3rem;z-index:200;border-radius:var(--r-sm);border:1px solid var(--line2)}
.saut:focus{transform:none}

.enveloppe{max-width:var(--large);margin:0 auto;padding:0 clamp(1.15rem,4vw,2.5rem)}
.etroit{max-width:46rem}

/* ═══ Typographie ═══════════════════════════════════════════════════════ */
h1,h2,h3{font-weight:700;letter-spacing:-.028em;line-height:1.08;margin:0 0 .75rem;text-wrap:balance}
h1{font-size:clamp(2.15rem,1.35rem + 3.4vw,3.7rem)}
h2{font-size:clamp(1.6rem,1.15rem + 1.9vw,2.5rem);letter-spacing:-.024em;line-height:1.14}
h3{font-size:1.09rem;letter-spacing:-.014em;line-height:1.35;margin:0 0 .45rem;font-weight:700}
.geant{font-size:clamp(2.35rem,1.5rem + 3.9vw,4.35rem);letter-spacing:-.036em;line-height:1.05;font-weight:800}
.chapo{font-size:clamp(1.09rem,1.02rem + .38vw,1.31rem);color:var(--dim);line-height:1.56;
  margin:0 0 1.7rem;max-width:42rem;font-weight:400;letter-spacing:-.008em}
p{margin:0 0 1.05rem;max-width:40rem}
ul,ol{max-width:41rem;padding-left:1.15rem;margin:0 0 1.05rem}
li{margin:.4rem 0}
li::marker{color:var(--acc)}
strong{font-weight:700;color:var(--txt)}
code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.88em;
  background:var(--panel2);padding:.12em .38em;border-radius:var(--r-xs);border:1px solid var(--line)}

.oeil{font-size:.73rem;letter-spacing:.15em;text-transform:uppercase;color:var(--acc);
  margin:0 0 .95rem;font-weight:700;display:flex;align-items:center;gap:.6rem}
.oeil::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:var(--acc);flex:none}

/* ═══ Sections ══════════════════════════════════════════════════════════ */
main{display:block}
section{padding:var(--pas) 0;position:relative;scroll-margin-top:5rem}
section+section{border-top:1px solid var(--line)}
section.calme{background:var(--panel2)}

/* ═══ En-tête ═══════════════════════════════════════════════════════════ */
header.site{position:sticky;top:0;z-index:100;background:var(--voile);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background-color .3s}
/* Sans le flou — vieux Safari, Firefox sans la préférence — la barre reprend
   un fond plein : lisible d'abord, joli ensuite. */
@supports not (backdrop-filter:blur(1px)){header.site{background:var(--bg)}}
header.site.colle{border-bottom-color:var(--line)}
.barre{display:flex;align-items:center;gap:.75rem;padding-block:.85rem;min-height:4.1rem}
.marque{display:flex;align-items:center;gap:.62rem;text-decoration:none;color:var(--txt);
  font-weight:800;font-size:1.28rem;letter-spacing:-.03em;flex:none}
.marque img{width:2.15rem;height:2.15rem;object-fit:contain;transition:transform .5s var(--sortie)}
.marque:hover img{transform:rotate(-7deg) scale(1.06)}
.marque em{font-style:normal;color:var(--acc)}

nav.site{margin-left:auto;display:flex;align-items:center;gap:.15rem;font-size:.94rem}
nav.site a{color:var(--dim);text-decoration:none;padding:.5rem .72rem;border-radius:var(--r-sm);
  font-weight:500;transition:color .18s,background-color .18s;white-space:nowrap}
nav.site a:hover{color:var(--txt);background:var(--panel2)}
nav.site a[aria-current=page]{color:var(--acc-vif);font-weight:700}
.outils{display:flex;align-items:center;gap:.4rem;flex:none}

.pastilles{display:flex;gap:.3rem;padding:.32rem .42rem;background:var(--panel2);
  border:1px solid var(--line);border-radius:var(--r-pill)}
.pastille{width:1.02rem;height:1.02rem;border-radius:50%;border:2px solid transparent;
  cursor:pointer;padding:0;transition:transform .2s var(--sortie),border-color .2s}
.pastille:hover{transform:scale(1.22)}
.pastille[aria-pressed=true]{border-color:var(--txt);transform:scale(1.1)}

.bascule{display:flex;align-items:center;justify-content:center;width:2.35rem;height:2.35rem;
  border:1px solid var(--line);background:var(--panel2);border-radius:var(--r-pill);
  cursor:pointer;color:var(--dim);transition:color .2s,border-color .2s}
.bascule:hover{color:var(--acc);border-color:var(--line2)}
.bascule svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
[data-amb=nuit] .bascule .soleil{display:none}
:root:not([data-amb=nuit]) .bascule .lune{display:none}

.hamburger{display:none}
.langue a{color:var(--dim);font-size:.88rem;text-decoration:none;padding:.5rem .6rem;
  border-radius:var(--r-sm);font-weight:600;letter-spacing:.03em}
.langue a:hover{color:var(--txt);background:var(--panel2)}

/* ═══ La une ════════════════════════════════════════════════════════════
   Un dégradé, très long, presque imperceptible. Pas de halo, pas de bruit :
   c'est une surface, pas un ciel. (Règle reprise du CSS de l'application.) */
/* au-dessus de la une, l'en-tête est transparent : le dégradé passe dessous */
body[data-une] main>.une:first-child{margin-top:-4.1rem;
  padding-top:calc(4.1rem + clamp(3rem,6vw,5rem))}
body[data-une] header.site:not(.colle){background:transparent;border-bottom-color:transparent}
body[data-une] header.site:not(.colle) .marque{color:oklch(98% .01 var(--t))}
body[data-une] header.site:not(.colle) .marque em{color:oklch(84% calc(var(--c)*1.3) var(--t))}
body[data-une] header.site:not(.colle) .marque img{filter:brightness(0) invert(1)}
body[data-une] header.site:not(.colle) nav.site a{color:oklch(90% .02 var(--t)/.82)}
body[data-une] header.site:not(.colle) nav.site a:hover,
body[data-une] header.site:not(.colle) nav.site a[aria-current=page]{
  color:oklch(99% .01 var(--t));background:oklch(95% .02 var(--t)/.12)}
body[data-une] header.site:not(.colle) .langue a{color:oklch(90% .02 var(--t)/.82)}
body[data-une] header.site:not(.colle) .langue a:hover{background:oklch(95% .02 var(--t)/.12);
  color:oklch(99% .01 var(--t))}
body[data-une] header.site:not(.colle) .pastilles,
body[data-une] header.site:not(.colle) .bascule,
body[data-une] header.site:not(.colle) .hamburger{
  background:oklch(95% .02 var(--t)/.10);border-color:oklch(95% .02 var(--t)/.22);
  color:oklch(95% .015 var(--t))}
body[data-une] header.site:not(.colle) .pastille[aria-pressed=true]{border-color:#fff}

.une{background:linear-gradient(172deg,var(--p1) 0,var(--p2) 125vh);
  color:oklch(97% .012 var(--t));border-top:0;
  padding:clamp(3.2rem,7vw,6rem) 0 clamp(3.6rem,8vw,7rem)}
.une h1,.une .geant,.une h2{color:oklch(98% .01 var(--t))}
.une .chapo{color:oklch(87% .022 var(--t))}
.une .oeil{color:oklch(85% calc(var(--c)*1.5) var(--t))}
.une .oeil::before{background:currentColor;
  box-shadow:0 0 0 .28rem oklch(85% calc(var(--c)*1.5) var(--t)/.22)}
.une a:not(.bouton){color:oklch(90% .04 var(--t))}
.une .accent{color:oklch(83% calc(var(--c)*1.25) var(--t))}
.une+section{border-top:0}

.une-grille{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
@media(max-width:60rem){.une-grille{grid-template-columns:1fr}.une-marque{display:none}}
.une-marque{display:flex;justify-content:center}
.une-marque img{width:min(23rem,80%);filter:brightness(0) invert(1);opacity:.16;
  animation:flotte 9s ease-in-out infinite}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

/* ═══ Le fond ═══════════════════════════════════════════════════════════ */
/* Une seule couche, fixée au cadre. Le contenu défile, les vagues restent :
   c'est de la parallaxe sans une ligne de script. Elle est posée DEVANT le
   fond de page et DERRIÈRE le contenu — d'où le z-index rendu à main et au
   pied, plutôt qu'un z-index:-1 que le fond opaque du body avalerait. */
.fond{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(62rem 46rem at 88% -12%, var(--v-h1), transparent 62%),
    radial-gradient(54rem 40rem at 0% 108%, var(--v-h2), transparent 60%)}
.fond svg{display:block;width:100%;height:100%}
.fond .ruban{fill:none;stroke-linecap:round}
.fond .fil{fill:none;stroke:var(--v-fil);stroke-width:1.1}
main,footer.site{position:relative;z-index:1}
.fond .r1{stroke:var(--v-r1);stroke-width:132}
.fond .dr1{animation:derive-r1 190s linear infinite normal}
@keyframes derive-r1{to{transform:translateX(-1000px)}}
.fond .r2{stroke:var(--v-r2);stroke-width:92}
.fond .dr2{animation:derive-r2 260s linear infinite reverse}
@keyframes derive-r2{to{transform:translateX(-760px)}}
.fond .r3{stroke:var(--v-r3);stroke-width:168}
.fond .dr3{animation:derive-r3 220s linear infinite reverse}
@keyframes derive-r3{to{transform:translateX(-1240px)}}
.fond .dfils{animation:derive-fils 150s linear infinite}
@keyframes derive-fils{to{transform:translateX(-620px)}}
/* Le mouvement est un agrément, jamais une condition : qui le refuse garde
   les formes. Elles s'arrêtent, elles ne disparaissent pas. */
@media(prefers-reduced-motion:reduce){.fond .derive{animation:none}}

/* Les bandes calmes laissent passer les vagues au lieu de les couper : c'est
   ce qui fait que le fond traverse la page entière au lieu de clignoter. */
section.calme{background:var(--voile)}

/* Les mêmes vagues dans la une, à l'encre claire sur le dégradé sombre. */
.une{position:relative;overflow:hidden;isolation:isolate}
.une>.enveloppe{position:relative;z-index:1}
.une .fond{position:absolute;background:none}
.une .fond .ruban{stroke:oklch(98% .02 var(--t)/.028)}
.une .fond .r2{stroke:oklch(88% calc(var(--c)*1.7) var(--t)/.045)}
.une .fond .fil{stroke:oklch(98% .02 var(--t)/.04)}

/* ═══ Boutons ═══════════════════════════════════════════════════════════ */
.boutons{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.9rem 0 0}
.bouton{display:inline-flex;align-items:center;gap:.55rem;background:var(--acc);color:var(--onacc);
  text-decoration:none;padding:.82rem 1.5rem;border-radius:var(--r-pill);font-weight:700;
  font-size:.97rem;letter-spacing:-.012em;border:1px solid transparent;cursor:pointer;
  transition:transform .22s var(--sortie),background-color .2s,box-shadow .25s}
.bouton:hover{transform:translateY(-2px);color:var(--onacc);background:var(--acc-vif);box-shadow:var(--ombre)}
.bouton:active{transform:translateY(0)}
.bouton .fleche{transition:transform .25s var(--sortie)}
.bouton:hover .fleche{transform:translateX(4px)}
.bouton.creux{background:transparent;color:var(--txt);border-color:var(--line2)}
.bouton.creux:hover{background:var(--panel2);color:var(--txt);border-color:var(--acc)}
.une .bouton{background:oklch(96% .015 var(--t));color:var(--p2)}
.une .bouton:hover{background:#fff;color:var(--p2)}
.une .bouton.creux{background:transparent;color:oklch(95% .015 var(--t));
  border-color:oklch(95% .02 var(--t)/.32)}
.une .bouton.creux:hover{background:oklch(95% .02 var(--t)/.10);border-color:oklch(95% .02 var(--t)/.6)}

/* ═══ Cartes ════════════════════════════════════════════════════════════ */
.grille{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(min(17.5rem,100%),1fr));margin-top:1.9rem}
.carte{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:1.55rem 1.5rem;transition:border-color .25s,transform .3s var(--sortie)}
.carte:hover{border-color:var(--line2);transform:translateY(-3px)}
.carte h3{margin-top:0}
.carte p:last-child,.carte ul:last-child{margin-bottom:0}
.carte.vedette{border-color:var(--acc);border-width:1.5px}
.carte .num{font-size:.74rem;font-weight:800;letter-spacing:.14em;color:var(--acc);
  display:block;margin-bottom:.7rem}
.deux{display:grid;gap:clamp(1.8rem,4vw,3.2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));align-items:start}

/* ═══ Tableaux ══════════════════════════════════════════════════════════ */
table{border-collapse:collapse;width:100%;max-width:46rem;font-size:.96rem;margin:1.5rem 0;display:block;overflow-x:auto}
@media(min-width:34rem){table{display:table}}
caption{text-align:left;font-size:.87rem;color:var(--faint);padding-bottom:.65rem;line-height:1.5}
th,td{border-bottom:1px solid var(--line);padding:.72rem .8rem;text-align:left;vertical-align:top}
tr:last-child td{border-bottom:0}
th{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  font-weight:700;border-bottom-color:var(--line2)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tbody tr{transition:background-color .18s}
tbody tr:hover{background:var(--panel2)}

/* ═══ Prix ══════════════════════════════════════════════════════════════ */

/* ═══ Encarts ═══════════════════════════════════════════════════════════ */
.encart{border:1px solid var(--line);border-left:3px solid var(--acc);background:var(--panel);
  padding:1.25rem 1.45rem;margin:1.8rem 0;max-width:44rem;
  border-radius:var(--r-xs) var(--r) var(--r) var(--r-xs)}
.encart p:last-child{margin-bottom:0}
.encart>.oeil{color:var(--faint)}
.encart>.oeil::before{background:var(--faint)}
.encart.reserve{border-left-color:var(--gare);background:var(--gare-fond)}
.encart.reserve>.oeil{color:var(--gare)}
.encart.reserve>.oeil::before{background:var(--gare)}
.une .encart{background:oklch(98% .01 var(--t)/.09);border-color:oklch(95% .02 var(--t)/.20);
  border-left-color:oklch(84% calc(var(--c)*1.4) var(--t))}
.une .encart,.une .encart strong{color:oklch(95% .015 var(--t))}
.une .encart>.oeil{color:oklch(86% calc(var(--c)*1.3) var(--t))}
.une .encart>.oeil::before{background:currentColor}

/* ═══ Listes de faits ═══════════════════════════════════════════════════ */
dl.faits{margin:1.5rem 0;max-width:44rem}
dl.faits div{display:grid;grid-template-columns:12rem 1fr;gap:.5rem 1.4rem;
  padding:.85rem 0;border-bottom:1px solid var(--line)}
dl.faits div:last-child{border-bottom:0}
dl.faits dt{font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  font-weight:700;padding-top:.22rem}
dl.faits dd{margin:0}
@media(max-width:38rem){dl.faits div{grid-template-columns:1fr;gap:.25rem}}

/* ═══ Questions dépliantes ══════════════════════════════════════════════ */
.q{border-bottom:1px solid var(--line);max-width:46rem}
.q summary{cursor:pointer;padding:1.15rem 2.2rem 1.15rem 0;font-weight:700;font-size:1.03rem;
  list-style:none;position:relative;letter-spacing:-.014em;transition:color .18s}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--acc-vif)}
.q summary::after{content:"";position:absolute;right:.35rem;top:1.52rem;width:.62rem;height:.62rem;
  border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);
  transform:rotate(45deg);transition:transform .3s var(--sortie)}
.q[open] summary::after{transform:rotate(-135deg)}
.q .rep{padding:0 1.5rem 1.3rem 0;color:var(--dim)}
.q .rep p:last-child{margin-bottom:0}

/* ═══ Journal des versions ══════════════════════════════════════════════ */
.fil{max-width:46rem;margin:2rem 0;position:relative;padding-left:1.9rem}
.fil::before{content:"";position:absolute;left:.32rem;top:.6rem;bottom:.6rem;width:1.5px;background:var(--line2)}
.jalon{position:relative;padding:0 0 2.1rem}
.jalon::before{content:"";position:absolute;left:-1.9rem;top:.42rem;width:.72rem;height:.72rem;
  border-radius:50%;background:var(--bg);border:2px solid var(--acc)}
.jalon.pt::before{background:var(--acc)}
.jalon time{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  font-weight:700;display:block;margin-bottom:.3rem}
.jalon h3{margin-bottom:.35rem}

/* ═══ Simulateur ════════════════════════════════════════════════════════ */

/* ═══ Bandeau de chiffres ═══════════════════════════════════════════════ */
.compte{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr));margin-top:1.9rem}
.compte>div{border-left:2px solid var(--line2);padding-left:1.1rem}
.compte b{display:block;font-size:clamp(1.7rem,1.3rem + 1.5vw,2.3rem);font-weight:800;
  letter-spacing:-.035em;line-height:1.1;font-variant-numeric:tabular-nums}
.compte span{color:var(--dim);font-size:.93rem;display:block;margin-top:.15rem}
.une .compte>div{border-left-color:oklch(95% .02 var(--t)/.28)}
.une .compte span{color:oklch(85% .022 var(--t))}


/* ═══ Étiquettes : ce qui existe, ce qui arrive ═════════════════════════
   La distinction doit se voir AVANT de lire. Une fonction annoncée au futur
   et lue au présent, c'est la faute qui coûte un dossier d'agrément. */
.etiq{display:inline-flex;align-items:center;gap:.4rem;font-size:.68rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;padding:.28rem .6rem;border-radius:var(--r-pill);
  border:1px solid var(--line2);color:var(--faint);background:var(--panel2);
  margin-bottom:.85rem;white-space:nowrap}
.etiq::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:currentColor;flex:none}
.etiq.aujourdhui{color:var(--acc-vif);border-color:var(--acc);background:transparent}
.etiq.demain{color:var(--gare);border-color:var(--gare);background:var(--gare-fond)}
.carte[data-demain]{border-style:dashed;border-color:var(--line2)}
.carte[data-demain]:hover{border-color:var(--gare)}
.une .etiq{background:oklch(95% .02 var(--t)/.12);border-color:oklch(95% .02 var(--t)/.28);
  color:oklch(92% .02 var(--t))}

/* ═══ Bandeau d'avancement ═════════════════════════════════════════════ */


/* ═══ Utilitaires — aucun style inline ═════════════════════════════════
   La politique de sécurité du contenu interdit les attributs style="".
   Tout ce qui variait au coup par coup vit donc ici. */
[data-acc] .pas-sarcelle{background:oklch(52% .075 199)}
[data-acc] .pas-ocean{background:oklch(52% .105 225)}
[data-acc] .pas-menthe{background:oklch(52% .100 170)}
[data-acc] .pas-indigo{background:oklch(52% .125 275)}
[data-acc] .pas-prune{background:oklch(52% .110 310)}
[data-acc] .pas-ambre{background:oklch(52% .110 70)}
[data-acc] .pas-brique{background:oklch(52% .110 40)}
[data-acc] .pas-ardoise{background:oklch(52% .115 255)}
.mt-1{margin-top:1rem}
.mt-2{margin-top:1.2rem}
.encart.large{max-width:52rem;margin:0}

/* ═══ Apparition au défilement ══════════════════════════════════════════ */
.r{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--sortie),transform .7s var(--sortie);
  transition-delay:calc(var(--i,0) * 75ms)}
.r.vu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .r{opacity:1;transform:none;transition:none}
  .une-marque img{animation:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ═══ Pied ══════════════════════════════════════════════════════════════ */
footer.site{border-top:1px solid var(--line);background:var(--voile);
  padding:clamp(2.6rem,5vw,4rem) 0 2rem;font-size:.93rem;color:var(--dim)}
footer.site a{color:var(--dim);text-decoration:none}
footer.site a:hover{color:var(--acc-vif);text-decoration:underline}
footer.site h3{font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);
  margin:0 0 .9rem;font-weight:700}
footer.site .cols{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(12.5rem,100%),1fr))}
footer.site p{max-width:24rem;margin:0 0 .6rem;line-height:1.6}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin:.4rem 0}
.pied-marque{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.1rem;
  color:var(--txt);letter-spacing:-.03em;margin-bottom:.9rem;text-decoration:none}
.pied-marque img{width:1.7rem;height:1.7rem;object-fit:contain}
.legal{margin-top:2.4rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.86rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;align-items:center}
.legal p{max-width:38rem;margin:0}

/* ═══ Petits écrans ═════════════════════════════════════════════════════ */
@media(max-width:64rem){
  .hamburger{display:flex;align-items:center;justify-content:center;width:2.35rem;height:2.35rem;
    border:1px solid var(--line);background:var(--panel2);border-radius:var(--r-pill);
    cursor:pointer;color:var(--txt)}
  .hamburger svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
  nav.site{position:fixed;left:0;right:0;top:4.1rem;background:var(--bg);flex-direction:column;
    align-items:stretch;gap:0;padding:.9rem clamp(1.15rem,4vw,2.5rem) 1.6rem;
    border-bottom:1px solid var(--line);display:none;font-size:1.02rem;
    max-height:calc(100dvh - 4.1rem);overflow-y:auto}
  nav.site.ouvert{display:flex}
  nav.site a{padding:.82rem .3rem;border-bottom:1px solid var(--line);border-radius:0}
  nav.site a:hover{background:transparent}
  .pastilles{display:none}
  .outils{margin-left:auto}          /* sans nav dans le flux, c'est aux outils de pousser */
  .marque{min-width:0}
  .marque span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:34rem){
  .langue{display:none}
  .boutons .bouton{flex:1 1 100%;justify-content:center}
  .marque{font-size:1.15rem;gap:.5rem}
  .marque img{width:1.85rem;height:1.85rem}
  .bascule,.hamburger{width:2.15rem;height:2.15rem}
  .outils{gap:.3rem}
}
@media print{
  header.site,footer.site,nav.site,.boutons,.outils{display:none}
  body,.une{background:#fff;color:#000}
  .une h1,.une .geant,.une .chapo{color:#000}
  section{padding:1rem 0;border:0}
  .r{opacity:1;transform:none}
}