@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/fonts/space-grotesk-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/fonts/space-grotesk-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/fonts/manrope-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/fonts/manrope-500.woff2') format('woff2');
}
:root {
  --fond: #221D1B;              
  --surface-basse-rvb: 24, 20, 19;   
  --surface-haute-rvb: 45, 39, 36;   
  --trait-rvb: 154, 141, 134;        
  --voile-rvb: 192, 181, 175;        
  --trait: rgba(var(--trait-rvb), 0.13);
  --texte: #F1EDEA;             
  --texte-doux: #C0B5AF;        
  --accent: #C87A5C;            
  --accent-rvb: 200, 122, 92;
  --accent-texte: #D89275;      
  --sur-accent: #25100A;        
  --garde: #7E9BFF;             
  --garde-rvb: 126, 155, 255;
  --display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --corps: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --p1: 0; --p2: 0; --p3: 0; --p4: 0; --p5: 0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; overflow-x: clip; scroll-behavior: smooth; }
body { background: var(--fond); color: var(--texte); font-family: var(--corps);
  line-height: 1.6; overflow-x: clip; }
body::after {
  content: ''; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .15;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.enveloppe { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: rgba(var(--surface-basse-rvb),.6); backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent; transition: border-color .5s ease; }
.nav.detachee { border-bottom-color: var(--trait); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texte); }
.marque-signe { width: 25px; height: 25px; flex: none;
  background: url('/favicon.svg') center / contain no-repeat; }
.marque-mot { font-family: var(--display); font-size: 18.5px; font-weight: 600; letter-spacing: -.02em; }
.nav-droite { display: flex; align-items: center; gap: 30px }
.nav-liens { display: flex; gap: 30px; }
.nav-liens a { color: var(--texte-doux); text-decoration: none; font-size: 14.5px; transition: color .2s; }
.nav-liens a:hover { color: var(--texte); }
.nav-langue { flex: none; display: inline-flex; align-items: center; gap: 6px;
  color: var(--texte-doux); text-decoration: none; font-size: 14.5px;
  letter-spacing: .02em; transition: color .2s }
.nav-langue:hover { color: var(--texte) }
.nav-langue svg { flex: none }
@media (max-width: 820px) { .nav-liens { display: none } }
@media (max-width: 900px) { .nav-langue { display: none } }
.nav-cta { flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 9px; white-space: nowrap;
  font-family: var(--display); font-size: 13.5px; font-weight: 500;
  color: var(--texte); text-decoration: none;
  border: 1px solid rgba(var(--accent-rvb),.32); background: rgba(var(--accent-rvb),.07);
  transition: border-color .2s, background .2s }
.nav-cta:hover { border-color: rgba(var(--accent-rvb),.6); background: rgba(var(--accent-rvb),.13) }
.nav-cta svg { flex: none; color: var(--accent-texte) }
@media (max-width: 420px) { .nav-cta { padding: 8px 13px; font-size: 13px } }
.recit { position: relative; }
.etage { position: relative; overflow: hidden; padding: 120px 0 90px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.nappe { position: absolute; left: 50%; transform: translateX(-50%);
  pointer-events: none; z-index: 0; filter: blur(55px); }
.nappe-a { top: -6vh; width: min(1150px, 100vw); height: 78vh;
  background: radial-gradient(ellipse at center, rgba(var(--accent-rvb),.16), transparent 66%);
  opacity: calc(.35 + var(--p3) * .55);
  transform: translateX(-50%) scale(calc(1 + var(--p3) * .16)); }
.nappe-b { bottom: -14vh; width: min(880px, 100vw); height: 62vh;
  background: radial-gradient(ellipse at center, rgba(var(--garde-rvb),.15), transparent 68%);
  opacity: calc(.25 + var(--p5) * .75);
  transform: translateX(-50%) scale(calc(1 + var(--p5) * .2)); }
.etage-inner { position: relative; z-index: 2; width: 100%; text-align: center; }
.surtitre { font-family: var(--display); font-size: 12.5px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--accent-texte);
  margin-bottom: 22px; opacity: calc(1 - var(--p5) * .55); }
.titres { position: relative; margin-bottom: 22px;
  display: flex; flex-direction: column; align-items: center; gap: 4px }
.titre-carnet { font-family: var(--display);
  font-size: clamp(16px, 2.7vw, 30px); font-weight: 500; line-height: 1.1;
  letter-spacing: -.03em; color: var(--texte-doux);
  opacity: calc(.9 - var(--p3) * .3) }
.titre-decide { font-family: var(--display); font-size: clamp(38px, 7.6vw, 92px);
  font-weight: 600; line-height: 1; letter-spacing: -.045em;
  background: linear-gradient(178deg, #FFFFFF 34%, var(--texte-doux) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent }
.titre-decide .mot {
  -webkit-text-fill-color: color-mix(in srgb,
    var(--accent) calc(45% + var(--p3) * 55%), #FFFFFF);
  color: var(--accent-texte) }
.chapeau { font-size: clamp(15.5px, 1.9vw, 18.5px); color: var(--texte-doux);
  max-width: 560px; margin: 0 auto 34px; min-height: 3em;
  opacity: calc(1 - var(--p5) * 1.25); }
.chapeau strong { color: var(--texte); font-weight: 500; }
.scene { position: relative; z-index: 2; perspective: 1700px;
  width: min(640px, 100%); margin: 0 auto;
  transform: translateY(calc(var(--p5) * -7vh)) scale(calc(1 - var(--p5) * .13));
  transform-origin: center 22%;
  opacity: calc(1 - var(--p5) * .45); }
.bouclier { position: absolute; inset: -26px; border-radius: 32px; pointer-events: none;
  border: 1px solid rgba(var(--garde-rvb),calc(var(--p5) * .5));
  box-shadow: 0 0 calc(var(--p5) * 80px) rgba(var(--garde-rvb),calc(var(--p5) * .22)) inset;
  opacity: var(--p5);
  transform: scale(calc(1.04 - var(--p5) * .04)); }
.cadre { position: relative; padding: 1px; border-radius: 20px;
  background: linear-gradient(150deg,
    rgba(var(--voile-rvb),calc(.22 + var(--p2) * .3)),
    rgba(var(--trait-rvb),.06) 44%, rgba(var(--trait-rvb),.03));
  box-shadow:
    0 2px 4px rgba(0,0,0,.35),
    0 14px 32px -10px rgba(0,0,0,.6),
    0 70px 130px -45px rgba(0,0,0,.95),
    0 0 calc(60px + var(--p3) * 70px) -30px rgba(var(--accent-rvb),calc(.14 + var(--p3) * .34));
  transform:
    rotateX(calc(11deg - var(--p1) * 7deg))
    translateY(calc(22px - var(--p1) * 22px))
    scale(calc(.97 + var(--p1) * .03));
  opacity: calc(.78 + var(--p1) * .22);
  transform-origin: center 75%; }
.carte { position: relative; overflow: hidden; border-radius: 19px;
  padding: 22px 22px 20px; text-align: left;
  background: linear-gradient(180deg, rgba(var(--surface-haute-rvb),.95), rgba(var(--surface-basse-rvb),.98));
  backdrop-filter: blur(14px); }
.projecteur { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(320px circle at var(--x,50%) var(--y,50%), rgba(var(--accent-rvb),.13), transparent 62%); }
.scene:hover .projecteur { opacity: 1 }
.carte-tete { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px; }
.exo { font-family: var(--display); font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; }
.pastille { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; flex: none;
  color: var(--accent-texte); border: 1px solid rgba(var(--accent-rvb),.28);
  background: rgba(var(--accent-rvb),.07); padding: 4px 10px; border-radius: 999px; }
.lignes { display: flex; flex-direction: column; gap: 8px; }
.ligne { position: relative; display: flex; align-items: center; gap: 12px;
  padding: 10px 13px; border-radius: 10px; font-size: 14px;
  background: rgba(var(--trait-rvb),.055); border: 1px solid rgba(var(--trait-rvb),.05); }
.ligne::after { content: ''; position: absolute; inset: -1px; border-radius: 10px;
  border: 1px solid rgba(var(--accent-rvb),.55);
  box-shadow: 0 0 22px rgba(var(--accent-rvb),.28);
  opacity: var(--lue, 0); pointer-events: none; }
.ligne-no { color: var(--texte-doux); font-size: 12px; width: 14px; flex: none }
.ligne-val { font-family: var(--display); font-weight: 500 }
.ressenti { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--texte-doux) }
.lecture { position: absolute; left: 0; right: 0; height: 110px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rvb),.16), transparent);
  top: calc(40px + var(--p2) * 190px);
  opacity: calc(var(--p2) * (1 - var(--p2)) * 4); }
.verdict { overflow: hidden; height: calc(var(--p3) * var(--h-verdict, 130px));
  opacity: calc(var(--p3) * 1.4 - .15); }
.verdict-inner { border-top: 1px solid var(--trait); margin-top: 18px; padding-top: 17px;
  display: flex; align-items: center; gap: 16px; }
.verdict-texte { flex: 1 }
.verdict-quoi { font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--texte-doux); margin-bottom: 4px }
.verdict-pourquoi { font-size: 13px; color: var(--texte-doux); line-height: 1.45 }
.verdict-chiffres { position: relative; flex: none; text-align: right }
.verdict-charge { font-family: var(--display); font-size: 36px; font-weight: 600;
  letter-spacing: -.035em; flex: none; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--accent) calc((1 - var(--p4)) * 100%), var(--garde));
  text-shadow: 0 0 calc(var(--p3) * 38px) rgba(var(--accent-rvb),calc(.55 - var(--p4) * .35)) }
.tape { position: absolute; top: 50%; right: -6px; width: 46px; height: 46px;
  margin-top: -23px; border-radius: 999px; pointer-events: none;
  border: 1.5px solid var(--garde);
  opacity: calc(var(--p4) * (1 - var(--p4)) * 4);
  transform: scale(calc(1.5 - var(--p4) * .65)) }
.corrige { display: block; margin-top: 3px; font-family: var(--corps);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--garde); white-space: nowrap;
  opacity: calc(var(--p4) * 1.5 - .4); transform: translateY(calc(4px - var(--p4) * 4px)) }
.pourquois { display: grid }
.pourquois > .pourquoi { grid-area: 1 / 1 }
.pourquoi-moteur { opacity: calc(1 - var(--p4) * 1.6) }
.pourquoi-toi { opacity: calc(var(--p4) * 1.5 - .35) }
.pourquoi-toi b { color: var(--texte); font-weight: 500 }
.garde-texte { position: absolute; left: 0; right: 0; bottom: 8vh; z-index: 3;
  text-align: center; opacity: calc(var(--p5) * 1.6 - .35);
  transform: translateY(calc(16px - var(--p5) * 16px)); pointer-events: none; }
@media (max-width: 700px) { .garde-texte { bottom: 3vh } }
.garde-titre { font-family: var(--display); font-size: clamp(20px, 3vw, 30px);
  font-weight: 600; letter-spacing: -.03em; margin-bottom: 8px; }
.garde-titre b { color: var(--garde); font-weight: 600 }
.garde-sous { font-size: 14px; color: var(--texte-doux) }
.section { position: relative; z-index: 2; padding: 132px 0; }
.section-tete { max-width: 720px; margin: 0 auto 58px; text-align: center; }
.oeil { font-family: var(--display); font-size: 12px; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--accent-texte); margin-bottom: 18px; }
.section h2 { font-family: var(--display);
  font-size: clamp(30px, 4.6vw, 52px); font-weight: 600;
  line-height: 1.06; letter-spacing: -.038em; margin-bottom: 18px;
  background: linear-gradient(178deg, #FFFFFF 40%, var(--texte-doux) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-sous { font-size: clamp(15.5px, 1.8vw, 18px); color: var(--texte-doux); }
.section-sous strong { color: var(--texte); font-weight: 500; }
.venir { opacity: 0; transform: translateY(22px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.venir.la { opacity: 1; transform: none; }
.venir.r1 { transition-delay: .08s } .venir.r2 { transition-delay: .18s } .venir.r3 { transition-delay: .28s }
.probleme-mot { max-width: 660px; margin: 0 auto 58px; text-align: center;
  font-family: var(--display); font-size: clamp(19px, 2.5vw, 27px);
  font-weight: 500; letter-spacing: -.024em; line-height: 1.42 }
.probleme-mot b { color: var(--accent-texte); font-weight: 600 }
.probleme-mot span { display: block; margin-top: 15px; font-family: var(--corps);
  font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--texte-doux) }
.lien-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px;
  font-family: var(--display); font-size: 14.5px; font-weight: 500;
  color: var(--accent-texte); text-decoration: none; padding-bottom: 3px;
  border-bottom: 1px solid rgba(var(--accent-rvb),.3);
  transition: border-color .2s ease, gap .2s ease }
.lien-cta:hover { border-bottom-color: var(--accent-texte); gap: 12px }
.lien-cta svg { flex: none }
.lien-ligne { text-align: center }
@media (prefers-reduced-motion: reduce) { .lien-cta { transition: none } }
.questions { max-width: 720px; margin: 0 auto }
.q { border-top: 1px solid var(--trait) }
.q:last-of-type { border-bottom: 1px solid var(--trait) }
.q summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: 16px; padding: 21px 4px; color: var(--texte);
  font-family: var(--display); font-size: 16.5px; font-weight: 500; letter-spacing: -.015em;
  transition: color .2s }
.q summary::-webkit-details-marker { display: none }
.q summary:hover { color: var(--accent-texte) }
.q summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px }
.q-chevron { margin-left: auto; flex: none; color: var(--texte-doux); transition: transform .25s ease }
.q[open] summary { color: var(--accent-texte) }
.q[open] .q-chevron { transform: rotate(180deg); color: var(--accent-texte) }
.q-rep { padding: 0 4px 24px; max-width: 630px;
  font-size: 14.5px; line-height: 1.68; color: var(--texte-doux) }
.q-rep b { color: var(--texte); font-weight: 500 }
@media (prefers-reduced-motion: reduce) {
  .q summary, .q-chevron { transition: none }
}
.tableau { display: grid; grid-template-columns: 1.25fr .85fr; gap: 20px;
  max-width: 1000px; margin: 0 auto; align-items: start }
@media (max-width: 900px) { .tableau { grid-template-columns: 1fr; max-width: 560px } }
.classement { padding: 1px; border-radius: 18px;
  background: linear-gradient(150deg, rgba(var(--voile-rvb),.28), rgba(var(--trait-rvb),.05) 46%, rgba(var(--trait-rvb),.02));
  box-shadow: 0 40px 84px -40px rgba(0,0,0,.95) }
.rang { display: flex; align-items: center; gap: 13px; padding: 16px 18px;
  background: linear-gradient(180deg, rgba(var(--surface-haute-rvb),.94), rgba(var(--surface-basse-rvb),.97)) }
.rang:first-child { border-radius: 17px 17px 0 0 }
.rang:last-child  { border-radius: 0 0 17px 17px }
.rang + .rang { border-top: 1px solid rgba(var(--trait-rvb),.07) }
.rang-signe { width: 15px; flex: none; color: var(--texte-doux); display: grid; place-items: center }
.rang-nom { font-size: 15px; font-weight: 500 }
.rang-freq { color: var(--texte-doux); font-weight: 400; font-size: 13.5px }
.rang-palier { margin-left: auto; font-size: 11.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--texte-doux); flex: none }
.rang-score { font-family: var(--display); font-size: 25px; font-weight: 600;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  width: 46px; text-align: right; flex: none; color: var(--texte) }
@media (max-width: 560px) {
  .rang { flex-wrap: wrap; row-gap: 3px; padding: 14px 16px }
  .rang-score { order: 4; margin-left: auto }
  .rang-palier { order: 5; flex: 1 0 100%; margin-left: 28px; text-align: left }
}
.rang-pointe { background: linear-gradient(180deg, rgba(var(--accent-rvb),.09), rgba(var(--accent-rvb),.05)) }
.rang-pointe .rang-signe, .rang-pointe .rang-palier { color: var(--accent-texte) }
.rang-pointe .rang-score { color: var(--accent-texte); text-shadow: 0 0 30px rgba(var(--accent-rvb),.45) }
.preuve { padding: 1px; border-radius: 18px;
  background: linear-gradient(150deg, rgba(var(--trait-rvb),.16), rgba(var(--trait-rvb),.03));
  height: 100% }
.preuve > * + * { margin-top: 0 }
.preuve-tete, .preuve-axes, .preuve-pied { background: rgba(var(--surface-basse-rvb),.9) }
.preuve-tete { border-radius: 17px 17px 0 0; padding: 16px 18px 10px;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux) }
.preuve-axes { padding: 0 18px 4px; display: flex; flex-wrap: wrap; gap: 7px }
.preuve-axes span { font-size: 12.5px; color: var(--texte-doux);
  border: 1px solid rgba(var(--trait-rvb),.13); border-radius: 999px; padding: 5px 10px }
.preuve-pied { border-radius: 0 0 17px 17px; padding: 14px 18px 17px; margin-top: 12px;
  font-size: 13px; color: var(--texte-doux); line-height: 1.55;
  border-top: 1px solid rgba(var(--trait-rvb),.08) }
.preuve-pied b { color: var(--texte); font-weight: 500 }
.sous-ecran { max-width: 640px; margin: 20px auto 0; text-align: center;
  font-size: 15px; color: var(--texte-doux); line-height: 1.55 }
.sous-ecran strong { color: var(--texte); font-weight: 600 }
.sous-ecran b { color: var(--accent-texte); font-weight: 500 }
.classement.la .rang { animation: rangEntre .6s cubic-bezier(.16,1,.3,1) backwards }
.classement.la .rang:nth-child(1) { animation-delay: .10s }
.classement.la .rang:nth-child(2) { animation-delay: .19s }
.classement.la .rang:nth-child(3) { animation-delay: .28s }
.classement.la .rang:nth-child(4) { animation-delay: .37s }
.classement.la .rang:nth-child(5) { animation-delay: .50s }
.classement.la .rang:nth-child(6) { animation-delay: .59s }
@keyframes rangEntre { from { opacity: 0; transform: translateX(-10px) } to { opacity: 1; transform: none } }
.classement.la .rang-pointe .rang-score { animation: pointeArrive .8s cubic-bezier(.16,1,.3,1) .62s backwards }
@keyframes pointeArrive { from { opacity: 0; transform: scale(.7) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
  .classement.la .rang, .classement.la .rang-pointe .rang-score { animation: none !important }
}
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .trio { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto } }
.cas { padding: 1px; border-radius: 18px;
  background: linear-gradient(150deg, rgba(var(--voile-rvb),.2), rgba(var(--trait-rvb),.05) 46%, rgba(var(--trait-rvb),.02));
  box-shadow: 0 30px 60px -34px rgba(0,0,0,.9); }
.cas-inner { border-radius: 17px; padding: 22px 20px 20px; height: 100%;
  background: linear-gradient(180deg, rgba(var(--surface-haute-rvb),.92), rgba(var(--surface-basse-rvb),.96)); }
.cas-quand { font-size: 12px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--texte-doux); margin-bottom: 14px; }
.cas-fait { font-size: 14.5px; line-height: 1.55; margin-bottom: 20px; min-height: 4.6em; }
.cas-fait b { color: var(--texte); font-weight: 500 }
.cas-verdict { border-top: 1px solid var(--trait); padding-top: 16px;
  display: flex; align-items: center; gap: 11px; }
.cas-signe { width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center; border: 1px solid currentColor; }
.cas-mot { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: -.02em }
.cas-chiffre { margin-left: auto; font-family: var(--display); font-size: 17px;
  font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.monte-c { color: var(--accent-texte) }
.tient-c  { color: var(--texte-doux) }
.baisse-c { color: var(--garde) }
.apres-trio { max-width: 720px; margin: 46px auto 0; text-align: center;
  font-size: 15px; color: var(--texte-doux) }
.apres-trio strong { color: var(--texte); font-weight: 500 }
.pivot { max-width: 640px; margin: 78px auto 46px; text-align: center;
  font-family: var(--display); font-size: clamp(17px, 2vw, 21px);
  font-weight: 500; letter-spacing: -.018em; line-height: 1.45;
  color: var(--texte-doux) }
.pivot b { color: var(--texte); font-weight: 600 }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center;
  max-width: 940px; margin: 0 auto }
@media (max-width: 880px) { .duo { grid-template-columns: 1fr; gap: 34px; max-width: 500px } }
.duo-mots h3 { font-family: var(--display); font-size: clamp(21px, 2.6vw, 27px);
  font-weight: 600; letter-spacing: -.028em; line-height: 1.2; margin-bottom: 14px }
.duo-mots p { font-size: 15.5px; color: var(--texte-doux); line-height: 1.65 }
.duo-mots p + p { margin-top: 13px }
.duo-mots b { color: var(--texte); font-weight: 500 }
.ressenti-carte { padding: 1px; border-radius: 18px;
  background: linear-gradient(150deg, rgba(var(--voile-rvb),.26), rgba(var(--trait-rvb),.05) 46%, rgba(var(--trait-rvb),.02));
  box-shadow: 0 36px 74px -38px rgba(0,0,0,.92) }
.ressenti-inner { border-radius: 17px; padding: 20px;
  background: linear-gradient(180deg, rgba(var(--surface-haute-rvb),.94), rgba(var(--surface-basse-rvb),.97)) }
.ressenti-quoi { font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texte-doux); margin-bottom: 14px }
.ressenti-serie { display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  border-radius: 10px; background: rgba(var(--trait-rvb),.055);
  border: 1px solid rgba(var(--trait-rvb),.05); font-size: 14.5px; margin-bottom: 16px }
.ressenti-serie .n { color: var(--texte-doux); font-size: 12px }
.ressenti-serie .v { font-family: var(--display); font-weight: 500 }
.choix { display: flex; gap: 8px; flex-wrap: wrap }
.puce { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px;
  border-radius: 999px; font-size: 13px; color: var(--texte-doux);
  border: 1px solid rgba(var(--trait-rvb),.14); background: rgba(var(--trait-rvb),.03) }
.puce.prise { color: var(--accent-texte); border-color: rgba(var(--accent-rvb),.45);
  background: rgba(var(--accent-rvb),.09); font-weight: 500 }
.suite { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--trait);
  font-size: 13px; color: var(--texte-doux); line-height: 1.55 }
.suite b { color: var(--texte); font-weight: 500 }
.ecrans { display: flex; gap: 22px; justify-content: center; align-items: flex-start }
.ecran { margin: 0; max-width: 268px }
.ecran img { display: block; width: 100%; height: auto; border-radius: 20px;
  border: 1px solid rgba(var(--trait-rvb),.16);
  box-shadow: 0 40px 80px -38px rgba(0,0,0,.95) }
.ecran figcaption { margin-top: 13px; font-size: 12.5px; line-height: 1.5;
  color: var(--texte-doux); text-align: center }
.ecran-decale { margin-top: 46px }
.ecran-seul { max-width: 300px; margin: 62px auto 0 }
@media (max-width: 760px) {
  .ecrans { gap: 14px }
  .ecran { max-width: 46% }
  .ecran-decale { margin-top: 28px }
  .ecran-seul { max-width: 74%; margin-top: 46px }
}
.courbe-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px }
.courbe-val { font-family: var(--display); font-size: 16px; font-weight: 500 }
.courbe-tendance { display: inline-flex; align-items: center; gap: 5px;
  margin-left: auto; font-size: 11.5px; letter-spacing: .1em;
  color: var(--accent-texte) }
.courbe { display: block; width: 100%; height: 74px; color: var(--accent-texte);
  margin-bottom: 20px }
.zone { padding-top: 16px; border-top: 1px solid var(--trait) }
.zone-tete { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px }
.zone-muscle { font-size: 14.5px; font-weight: 500 }
.zone-mot { margin-left: auto; font-size: 11px; letter-spacing: .12em;
  color: var(--texte-doux) }
.zone-barre { position: relative; height: 7px; border-radius: 999px;
  background: rgba(var(--trait-rvb),.11); overflow: hidden }
.zone-plage { position: absolute; left: 28.6%; right: 28.6%; top: 0; bottom: 0;
  background: rgba(var(--accent-rvb),.30) }
.zone-curseur { position: absolute; left: 21.4%; top: -3px; bottom: -3px;
  width: 2.5px; border-radius: 2px; background: var(--texte);
  box-shadow: 0 0 0 2px rgba(var(--surface-basse-rvb),.9) }
.zone-pied { margin-top: 10px; font-size: 12.5px; color: var(--texte-doux) }
@media (max-width: 560px) {
  .courbe { height: 62px }
}
.regle { max-width: 760px; margin: 62px auto 0; text-align: center;
  font-family: var(--display); font-size: clamp(18px, 2.4vw, 25px);
  font-weight: 500; letter-spacing: -.024em; line-height: 1.42 }
.regle b { color: var(--accent-texte); font-weight: 600 }
.regle span { display: block; margin-top: 12px; font-family: var(--corps);
  font-size: 14.5px; font-weight: 400; letter-spacing: 0; color: var(--texte-doux) }
.cas.la .cas-verdict { animation: verdictTombe .75s cubic-bezier(.16,1,.3,1) .3s backwards }
.cas.la .cas-chiffre { animation: chiffreArrive .7s cubic-bezier(.16,1,.3,1) .5s backwards }
@keyframes verdictTombe { from { opacity: 0; transform: translateY(9px) } to { opacity: 1; transform: none } }
@keyframes chiffreArrive { from { opacity: 0; transform: translateX(12px) } to { opacity: 1; transform: none } }
.puce { position: relative }
.ressenti-carte.la .puce { animation: puceEntre .5s cubic-bezier(.16,1,.3,1) backwards }
.ressenti-carte.la .puce:nth-child(1) { animation-delay: .30s }
.ressenti-carte.la .puce:nth-child(2) { animation-delay: .40s }
.ressenti-carte.la .puce:nth-child(3) { animation-delay: .50s }
@keyframes puceEntre { from { opacity: 0; transform: translateY(7px) } to { opacity: 1; transform: none } }
.puce.prise::after { content: ''; position: absolute; inset: -4px; border-radius: 999px;
  border: 1px solid currentColor; opacity: 0; pointer-events: none }
.ressenti-carte.la .puce.prise::after { animation: onde 1s ease .8s }
@keyframes onde { 0% { opacity: .85; transform: scale(.92) } 100% { opacity: 0; transform: scale(1.3) } }
.ressenti-carte.la .suite { animation: verdictTombe .8s cubic-bezier(.16,1,.3,1) 1s backwards }
.permis.la .permis-l { animation: ligneEntre .55s cubic-bezier(.16,1,.3,1) backwards }
.permis.la .permis-l:nth-child(1) { animation-delay: .10s }
.permis.la .permis-l:nth-child(2) { animation-delay: .22s }
.permis.la .permis-l:nth-child(3) { animation-delay: .34s }
.permis.la .permis-l:nth-child(4) { animation-delay: .60s }
@keyframes ligneEntre { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
.permis-absent .permis-quoi { text-decoration: none; position: relative }
.permis-absent .permis-quoi::after { content: ''; position: absolute; left: 0; top: 53%;
  height: 1px; width: 0; background: currentColor }
.permis.la .permis-absent .permis-quoi::after { animation: barrer .55s cubic-bezier(.16,1,.3,1) 1.05s forwards }
@keyframes barrer { to { width: 100% } }
@media (prefers-reduced-motion: reduce) {
  .cas.la .cas-verdict, .cas.la .cas-chiffre,
  .ressenti-carte.la .puce, .ressenti-carte.la .puce.prise::after,
  .ressenti-carte.la .suite, .permis.la .permis-l { animation: none !important }
  .permis-absent .permis-quoi { text-decoration: line-through }
  .permis-absent .permis-quoi::after { display: none }
}
.atelier { display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  max-width: 960px; margin: 0 auto }
@media (max-width: 860px) { .atelier { grid-template-columns: 1fr; max-width: 560px } }
.geste { padding: 1px; border-radius: 18px;
  background: linear-gradient(150deg, rgba(var(--voile-rvb),.22), rgba(var(--trait-rvb),.05) 46%, rgba(var(--trait-rvb),.02));
  box-shadow: 0 30px 62px -36px rgba(0,0,0,.9) }
.geste-inner { border-radius: 17px; padding: 22px 22px 20px; height: 100%;
  background: linear-gradient(180deg, rgba(var(--surface-haute-rvb),.93), rgba(var(--surface-basse-rvb),.96)) }
.geste-quand { display: flex; align-items: center; gap: 9px; margin-bottom: 13px;
  font-size: 12.5px; letter-spacing: .04em; color: var(--accent-texte) }
.geste-quand svg { flex: none }
.geste h3 { font-family: var(--display); font-size: 17px; font-weight: 600;
  letter-spacing: -.022em; line-height: 1.25; margin-bottom: 9px }
.geste p { font-size: 13.5px; color: var(--texte-doux); line-height: 1.6 }
.geste b { color: var(--texte); font-weight: 500 }
.encadre { display: flex; align-items: center; gap: 8px; margin-top: 13px; flex-wrap: wrap }
.encadre-c { font-family: var(--display); font-size: 14px; font-weight: 600;
  letter-spacing: -.02em; padding: 7px 12px; border-radius: 9px;
  color: var(--accent-texte); border: 1px solid rgba(var(--accent-rvb),.35); background: rgba(var(--accent-rvb),.08) }
.encadre-vise { font-size: 12.5px; color: var(--texte-doux); text-decoration: line-through;
  text-decoration-thickness: 1px }
.tour { display: flex; align-items: center; gap: 7px; margin-top: 13px; flex-wrap: wrap }
.tour span { font-family: var(--display); font-size: 12.5px; font-weight: 600;
  padding: 5px 9px; border-radius: 7px; letter-spacing: .02em;
  color: var(--texte-doux); background: rgba(var(--trait-rvb),.07);
  border: 1px solid rgba(var(--trait-rvb),.1) }
.tour span.a { color: var(--accent-texte); border-color: rgba(var(--accent-rvb),.3); background: rgba(var(--accent-rvb),.07) }
.tour em { font-style: normal; font-size: 12px; color: var(--texte-doux); opacity: .6 }
.geste-large { grid-column: 1 / -1 }
.fourchette { margin-top: 14px }
.f-chiffre { font-family: var(--display); font-size: 22px; font-weight: 600;
  letter-spacing: -.025em; color: var(--accent-texte) }
.f-chiffre span { font-size: 13px; font-weight: 500; letter-spacing: 0; opacity: .75 }
.f-barre { display: flex; gap: 3px; margin: 11px 0 9px; height: 7px }
.f-barre i { border-radius: 3px; background: var(--accent) }
.f-barre .f-e { flex: 24 }
.f-barre .f-r { flex: 31; opacity: .5 }
.f-barre .f-o { flex: 9; opacity: .5 }
.f-legende { display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--texte-doux) }
.f-legende b { color: var(--texte); font-weight: 500 }
.f-aveu { margin-top: 12px; font-size: 12.5px; color: var(--texte-doux); opacity: .8 }
.atelier.la .geste { animation: verdictTombe .7s cubic-bezier(.16,1,.3,1) backwards }
.atelier.la .geste:nth-child(1) { animation-delay: .06s }
.atelier.la .geste:nth-child(2) { animation-delay: .16s }
.atelier.la .geste:nth-child(3) { animation-delay: .26s }
.atelier.la .geste:nth-child(4) { animation-delay: .36s }
.atelier.la .geste:nth-child(5) { animation-delay: .46s }
@media (prefers-reduced-motion: reduce) { .atelier.la .geste { animation: none !important } }
.revue { max-width: 580px; margin: 0 auto; padding: 1px; border-radius: 20px;
  background: linear-gradient(150deg, rgba(var(--voile-rvb),.3), rgba(var(--trait-rvb),.05) 46%, rgba(var(--trait-rvb),.02));
  box-shadow: 0 46px 96px -44px rgba(0,0,0,.95) }
.revue-inner { border-radius: 19px; padding: 22px;
  background: linear-gradient(180deg, rgba(var(--surface-haute-rvb),.95), rgba(var(--surface-basse-rvb),.98)) }
.revue-tete { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 18px }
.revue-titre { font-family: var(--display); font-size: 16.5px; font-weight: 600; letter-spacing: -.01em }
.revue-src { font-size: 12.5px; color: var(--texte-doux); flex: none }
.bilan { display: flex; gap: 10px; margin-bottom: 16px }
.bilan-c { flex: 1; padding: 13px 14px; border-radius: 11px;
  background: rgba(var(--trait-rvb),.055); border: 1px solid rgba(var(--trait-rvb),.05) }
.bilan-n { font-family: var(--display); font-size: 22px; font-weight: 600;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap }
@media (max-width: 480px) {
  .bilan { gap: 7px }
  .bilan-c { padding: 11px 10px }
  .bilan-n { font-size: 19px }
}
.bilan-q { font-size: 12px; color: var(--texte-doux); margin-top: 2px }
.souci { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px;
  border-radius: 11px; font-size: 13.5px; line-height: 1.5;
  background: rgba(var(--garde-rvb),.07); border: 1px solid rgba(var(--garde-rvb),.2) }
.souci + .souci { margin-top: 8px }
.souci-ico { flex: none; margin-top: 1px; color: var(--garde) }
.souci b { color: var(--texte); font-weight: 500 }
.souci-choix { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px }
.souci-choix span { font-size: 12px; padding: 5px 10px; border-radius: 999px;
  color: var(--texte-doux); border: 1px solid rgba(var(--trait-rvb),.15) }
.souci-choix span.retenu { color: var(--garde); border-color: rgba(var(--garde-rvb),.45);
  background: rgba(var(--garde-rvb),.1); font-weight: 500 }
.revue-pied { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--trait);
  display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--texte-doux) }
.revue-pied .bouton { padding: 10px 20px; font-size: 14px; margin-left: auto; flex: none }
.apercu-note { margin: 12px auto 0; text-align: center; font-size: 12px;
  letter-spacing: .04em; color: var(--texte-doux); opacity: .8 }
.soins { display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  max-width: 900px; margin: 44px auto 0 }
@media (max-width: 820px) { .soins { grid-template-columns: 1fr; max-width: 560px } }
.soin { padding: 20px 20px 18px; border-radius: 16px;
  background: rgba(var(--trait-rvb),.04); border: 1px solid rgba(var(--trait-rvb),.08) }
.soin h3 { font-family: var(--display); font-size: 16px; font-weight: 600;
  letter-spacing: -.02em; margin-bottom: 9px }
.soin p { font-size: 13.5px; color: var(--texte-doux); line-height: 1.6 }
.soin b { color: var(--texte); font-weight: 500 }
.revue.la .bilan-c { animation: verdictTombe .6s cubic-bezier(.16,1,.3,1) backwards }
.revue.la .bilan-c:nth-child(1) { animation-delay: .12s }
.revue.la .bilan-c:nth-child(2) { animation-delay: .20s }
.revue.la .bilan-c:nth-child(3) { animation-delay: .28s }
.revue.la .souci { animation: verdictTombe .7s cubic-bezier(.16,1,.3,1) backwards }
.revue.la .souci:nth-of-type(1) { animation-delay: .48s }
.revue.la .souci:nth-of-type(2) { animation-delay: .62s }
@media (prefers-reduced-motion: reduce) {
  .revue.la .bilan-c, .revue.la .souci { animation: none !important }
}
.permis { max-width: 560px; margin: 0 auto; padding: 1px; border-radius: 18px;
  background: linear-gradient(150deg, rgba(var(--garde-rvb),.3), rgba(var(--trait-rvb),.05) 46%, rgba(var(--trait-rvb),.02));
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.95), 0 0 80px -40px rgba(var(--garde-rvb),.35) }
.permis-inner { border-radius: 17px; padding: 8px;
  background: linear-gradient(180deg, rgba(var(--surface-haute-rvb),.95), rgba(var(--surface-basse-rvb),.98)) }
.permis-l { display: flex; align-items: center; gap: 13px; padding: 14px 15px; border-radius: 11px;
  font-size: 14.5px }
.permis-l + .permis-l { border-top: 1px solid rgba(var(--trait-rvb),.07) }
.permis-ico { width: 17px; flex: none; color: var(--texte-doux); display: grid; place-items: center }
.permis-quoi { font-weight: 500 }
.permis-pour { margin-left: auto; font-size: 12.5px; color: var(--texte-doux); text-align: right }
.permis-absent { margin-top: 6px; border-top: 1px dashed rgba(var(--trait-rvb),.16);
  color: var(--texte-doux) }
.permis-absent .permis-quoi { opacity: .75 }
.permis-absent .permis-pour { color: var(--garde); font-weight: 500; text-decoration: none }
.volet-2 { max-width: 620px; margin: 74px auto 0; text-align: center }
.volet-titre { font-family: var(--display); font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 600; letter-spacing: -.03em; margin-bottom: 10px }
.volet-sous { font-size: 15px; color: var(--texte-doux); margin-bottom: 26px }
.volet-sous b { color: var(--texte); font-weight: 500 }
.restaure { padding: 1px; border-radius: 18px; text-align: left;
  background: linear-gradient(150deg, rgba(var(--garde-rvb),.3), rgba(var(--trait-rvb),.05) 46%, rgba(var(--trait-rvb),.02));
  box-shadow: 0 36px 76px -40px rgba(0,0,0,.94) }
.restaure-inner { border-radius: 17px; padding: 20px;
  background: linear-gradient(180deg, rgba(var(--surface-haute-rvb),.95), rgba(var(--surface-basse-rvb),.98)) }
.restaure-tete { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 15px }
.restaure-quoi { font-family: var(--display); font-size: 15.5px; font-weight: 600; letter-spacing: -.01em }
.restaure-src { font-size: 12.5px; color: var(--texte-doux); flex: none }
.restaure-avert { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px;
  border-radius: 11px; font-size: 13.5px; line-height: 1.5;
  background: rgba(var(--garde-rvb),.08); border: 1px solid rgba(var(--garde-rvb),.22) }
.restaure-avert b { color: var(--texte); font-weight: 500 }
.restaure-ico { flex: none; margin-top: 1px; color: var(--garde) }
.restaure-pied { display: flex; align-items: center; gap: 12px; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--trait) }
.restaure-note { font-size: 13px; color: var(--texte-doux) }
.restaure-note b { color: var(--texte); font-weight: 500 }
.restaure-pied .bouton { margin-left: auto; padding: 9px 18px; font-size: 13.5px; flex: none }
.filets { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; text-align: left }
@media (max-width: 640px) { .filets { grid-template-columns: 1fr } }
.filet { padding: 15px 16px; border-radius: 13px; font-size: 13px; line-height: 1.55;
  color: var(--texte-doux); background: rgba(var(--trait-rvb),.04);
  border: 1px solid rgba(var(--trait-rvb),.08) }
.filet b { color: var(--texte); font-weight: 500 }
.chute { text-align: center; max-width: 620px; margin: 44px auto 0;
  font-size: clamp(17px, 2.2vw, 22px); font-family: var(--display);
  font-weight: 500; letter-spacing: -.02em; line-height: 1.4 }
.chute b { color: var(--garde); font-weight: 600 }
.partage { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px;
  max-width: 860px; margin: 0 auto }
@media (max-width: 760px) { .partage { grid-template-columns: 1fr; max-width: 480px } }
.part { padding: 22px 22px 20px; border-radius: 17px }
.part-libre { background: linear-gradient(180deg, rgba(var(--accent-rvb),.09), rgba(var(--accent-rvb),.03));
  border: 1px solid rgba(var(--accent-rvb),.24) }
.part-pro { background: rgba(var(--trait-rvb),.04); border: 1px solid rgba(var(--trait-rvb),.1) }
.part-tete { display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
  font-family: var(--display); font-size: 14px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase }
.part-libre .part-tete { color: var(--accent-texte) }
.part-pro .part-tete { color: var(--texte-doux) }
.part-signe { flex: none; display: grid; place-items: center }
.part ul { list-style: none }
.part li { font-size: 14px; color: var(--texte-doux); line-height: 1.5; padding-left: 15px;
  position: relative }
.part li + li { margin-top: 9px }
.part li::before { content: ''; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .35 }
.part li b { color: var(--texte); font-weight: 500 }
.apres { position: relative; z-index: 2; padding: 20px 0 96px; text-align: center; }
.mention-forte { font-family: var(--display); font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 600; letter-spacing: -.032em; line-height: 1.14; margin-bottom: 18px;
  background: linear-gradient(178deg, #FFFFFF 42%, var(--texte-doux) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent }
.attente { max-width: 620px; margin: 0 auto 34px; font-size: 15px; line-height: 1.65;
  color: var(--texte-doux) }
.attente b { color: var(--texte); font-weight: 500 }
.signe-humain { max-width: 620px; margin: 40px auto 0; padding-top: 26px;
  border-top: 1px solid var(--trait);
  font-size: 13.5px; line-height: 1.7; color: var(--texte-doux) }
.signe-humain b { color: var(--texte); font-weight: 500 }
.pied { position: relative; z-index: 2; border-top: 1px solid var(--trait);
  padding: 34px 0 44px }
.pied-inner { display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap }
.pied-marque { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.pied-slogan { font-family: var(--display); font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--texte-doux) }
.pied-liens { display: flex; gap: 22px; flex-wrap: wrap }
.pied-liens a { font-size: 13.5px; color: var(--texte-doux); text-decoration: none;
  transition: color .2s }
.pied-liens a:hover { color: var(--texte) }
.pied-langue { color: var(--accent-texte) !important; border: 1px solid rgba(var(--accent-rvb),.28);
  border-radius: 7px; padding: 4px 11px }
.pied-langue:hover { border-color: rgba(var(--accent-rvb),.6) }
@media (max-width: 620px) {
  .pied-inner { flex-direction: column; align-items: flex-start; gap: 20px }
  .pied-liens { gap: 14px 18px }
}
.actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px }
.bouton { display: inline-flex; align-items: center; gap: 9px; padding: 12.5px 25px;
  border-radius: 10px; font-family: var(--display); font-size: 14.5px; font-weight: 500;
  text-decoration: none; transition: transform .18s, background .2s, border-color .2s }
.bouton:active { transform: translateY(1px) }
.bouton-plein { background: var(--accent); color: var(--sur-accent); box-shadow: 0 8px 30px -8px rgba(var(--accent-rvb),.55) }
.bouton-plein:hover { background: var(--accent-texte) }
.bouton-nu { color: var(--texte); border: 1px solid var(--trait) }
.bouton-nu:hover { border-color: rgba(var(--trait-rvb),.32) }
.mention { font-size: 13px; color: var(--texte-doux); margin-bottom: 40px }
.signature { display: flex; justify-content: center; gap: 12px 28px; flex-wrap: wrap;
  font-size: 13px; color: var(--texte-doux) }
.signature b { color: var(--texte); font-weight: 500 }
.signature .point { opacity: .3 }
@media (max-width: 640px) { .signature .point { display: none } }
.invite { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 3; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--texte-doux); opacity: 1; pointer-events: none;
  transition: opacity .35s ease;
  display: flex; flex-direction: column; align-items: center; gap: 8px }
html.a-defile .invite { opacity: 0 }
.invite svg { animation: descendre 2.4s ease-in-out infinite }
@keyframes descendre { 0%,100% { transform: translateY(0); opacity:.5 } 50% { transform: translateY(5px); opacity:1 } }
@media (max-height: 860px) and (min-width: 700px) {
  .titres { margin-bottom: 14px; gap: 2px }
  .titre-carnet { font-size: clamp(14px, 2vw, 24px) }
  .titres h1 { font-size: clamp(32px, 5.2vw, 66px) }
  .surtitre { margin-bottom: 13px }
  .chapeau { margin-bottom: 22px; min-height: 0 }
  .scene { width: min(560px, 100%) }
  .carte { padding: 16px 18px 15px }
  .carte-tete { margin-bottom: 13px }
  .lignes { gap: 6px }
  .ligne { padding: 8px 12px }
  .verdict-inner { margin-top: 13px; padding-top: 13px }
  .invite { bottom: 16px }
  .garde-texte { bottom: 4vh }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .surtitre, .chapeau { opacity: 1 }
  .scene { transform: none; opacity: 1 }
  .cadre { transform: none; opacity: 1 }
  .ligne { opacity: 1; transform: none }
  .verdict { height: auto; opacity: 1 }
  .lecture, .invite { display: none }
  .garde-texte { position: relative; bottom: auto; opacity: 1; transform: none; margin-top: 46px }
  .bouclier { opacity: .5 }
}
.horloges { max-width: 940px; margin: 46px auto 0;
  border-top: 1px solid var(--trait); padding-top: 34px; }
.horloges-tete { font-family: var(--display); font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 600; letter-spacing: -.02em; text-align: center; margin-bottom: 26px; }
.horloges-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.horloges-duo p { color: var(--texte-doux); line-height: 1.6; font-size: 15.5px; }
.horloges-quoi { display: block; font-family: var(--display); font-size: 11.5px;
  font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-texte); margin-bottom: 9px; }
.horloges-chute { max-width: 700px; margin: 28px auto 0; text-align: center;
  color: var(--texte-doux); line-height: 1.62; font-size: 15.5px; }
.horloges-chute strong { color: var(--texte); font-weight: 500; }
@media (max-width: 760px) {
  .horloges-duo { grid-template-columns: 1fr; gap: 22px; }
  .horloges { margin-top: 36px; padding-top: 28px; }
}
.legal { max-width: 760px; padding-top: 112px; padding-bottom: 72px; position: relative; z-index: 2 }
.legal h1 { font-family: var(--display); font-size: clamp(30px, 4.6vw, 44px); font-weight: 600;
  letter-spacing: -.025em; line-height: 1.12; margin-bottom: 10px }
.legal-meta { font-family: var(--display); font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texte-doux); margin-bottom: 34px }
.legal h2 { font-family: var(--display); font-size: clamp(19px, 2.4vw, 24px); font-weight: 600;
  letter-spacing: -.015em; margin: 40px 0 12px }
.legal h3 { font-family: var(--display); font-size: 16.5px; font-weight: 600; margin: 26px 0 8px }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: var(--texte-doux) }
.legal p + p { margin-top: 14px }
.legal strong { color: var(--texte); font-weight: 600 }
.legal a { color: var(--accent-texte); text-decoration: none; border-bottom: 1px solid rgba(var(--accent-rvb),.3) }
.legal a:hover { border-bottom-color: var(--accent-texte) }
.legal ul { margin: 12px 0 12px 22px }
.legal li + li { margin-top: 6px }
.legal table { width: 100%; border-collapse: collapse; margin: 16px 0 20px; font-size: 15px }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--trait); color: var(--texte-doux); line-height: 1.5 }
.legal th { color: var(--texte); font-family: var(--display); font-weight: 600; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase }
.legal .encadre { margin: 18px 0; padding: 16px 18px; border: 1px solid var(--trait);
  border-left: 3px solid var(--accent); border-radius: 10px; background: rgba(var(--trait-rvb),.04) }
.legal .encadre p { color: var(--texte) }
.legal-nav { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 30px }
.legal-nav a { font-family: var(--display); font-size: 13px; letter-spacing: .04em;
  color: var(--texte-doux); border: 1px solid var(--trait); border-radius: 999px;
  padding: 6px 13px; text-decoration: none }
.legal-nav a[aria-current="page"] { color: var(--texte); border-color: rgba(var(--accent-rvb),.45) }
.legal-nav a:hover { color: var(--texte) }
@media (max-width: 620px) { .legal { padding-top: 96px } }