@import url("fonts.css");

/* ==========================================================================
   MONCONCOURS — Excellence Bac Académie
   Héros navy qui affirme → papier quadrillé qui prouve.
   Aucune dépendance externe.

   Composants adaptés (licence MIT / libre) :
   • bouton .btn — d'après « wicked-eagle-30 » de doniaskima (uiverse.io)
   • orbe vocale — d'après « good-starfish-31 » de Vosoone (uiverse.io)
   • fond quadrillé — d'après « proud-wombat-91 » de mohamed_3222 (uiverse.io)
   • pile de cartes — d'après « swipeable stacked cards » (codefronts.com)
   Formes conservées, couleurs ramenées à la palette Monconcours.
   ========================================================================== */

/* ------------------------------------------------------------- 1. TOKENS */
:root{
  --ink:#071429;          /* sol du héros — navy quasi-noir */
  --ink-2:#0B2143;
  --navy:#0B2A5B;

  --paper:#EAF2FB;        /* le papier bleu ciel */
  --card:#FFFFFF;
  --grid:rgba(55,132,197,.15);   /* les lignes du quadrillage */

  --text:#0A1730;
  --text-2:#41536E;
  --text-3:#5A6B85;

  --cyan:#1B9EE8;
  --cyan-dp:#12699E;      /* bleu profond — le bouton */
  --cyan-dp2:#0D5480;
  --sky:#7FC4F0;
  --sky-lt:#BFE3FA;
  --mark:rgba(27,158,232,.30);

  --on-dark-1:#EAF2FB;
  --on-dark-2:#A9C3E0;
  --on-dark-3:#8AA4C6;

  --wa:#177F41;
  --ok:#5FE0A2;
  --gold:#E8B23C;

  --font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --arabic:'IBM Plex Sans Arabic','Poppins',system-ui,sans-serif;

  --fs-2xs:.8rem; --fs-xs:.875rem; --fs-sm:.95rem; --fs-md:1.0625rem;
  --fs-lg:1.2rem; --fs-xl:1.45rem; --fs-2xl:2rem;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;

  --r:14px; --r-lg:20px; --r-full:999px;
  --pad:clamp(20px,5vw,40px);
  --maxw:1120px;
  --narrow:820px;
  --tile:min(330px,78vw);       /* le format commun des médias */

  --ease:cubic-bezier(.16,1,.3,1);
  --t:320ms; --t-slow:600ms;

  --sh-card:0 18px 40px -18px rgba(10,23,48,.28), 0 2px 6px rgba(10,23,48,.06);
  --sh-lift:0 34px 66px -22px rgba(10,23,48,.36);

  --z-bar:110; --z-fab:90;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Le quadrillage vit sur le body, pas sur chaque section : posé section par
   section, le motif se réinitialisait à chaque frontière et laissait une
   couture horizontale bien visible. */
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.6;
  color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-color:var(--paper);
  background-image:
    radial-gradient(circle,transparent 20%,var(--paper) 20%,var(--paper) 80%,transparent 80%),
    radial-gradient(circle,transparent 20%,var(--paper) 20%,var(--paper) 80%,transparent 80%),
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-position:0 0,12.5px 12.5px,0 -.5px,-.5px 0;
  background-size:25px 25px,25px 25px,12.5px 12.5px,12.5px 12.5px}
img,video,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px}
p{margin:0}

h1,h2,h3{font-family:var(--font);font-weight:900;line-height:1.04;
  letter-spacing:-.03em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.3rem,6.4vw,4.6rem);text-transform:uppercase}
h2{font-size:clamp(1.8rem,4.2vw,2.9rem)}
h3{font-size:clamp(1.1rem,2vw,1.35rem);font-weight:800;letter-spacing:-.02em}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:var(--narrow)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:9999;padding:16px 24px;background:#fff;
  color:var(--navy);font-weight:700}
.skip:focus{left:0}

/* Le pan navy du chevauchement : il recouvre le haut de la bascule, et la
   trame du body reprend en dessous sans rupture. */
.bridge__navy{position:absolute;inset:0 0 58% 0;background:var(--ink);z-index:0}

/* ----------------------------------------------- 2. BANDEAU D'ANNONCE */
.bar{position:sticky;top:0;z-index:var(--z-bar);background:var(--ink);
  color:var(--on-dark-1);text-align:center;padding:10px var(--pad)}
.bar span{display:inline-flex;align-items:center;gap:9px;
  font-size:var(--fs-2xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.bar i{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none;
  box-shadow:0 0 0 0 rgba(232,178,60,.65);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(232,178,60,0)}100%{box-shadow:0 0 0 0 rgba(232,178,60,0)}}
@media(max-width:420px){.bar span{font-size:.75rem;letter-spacing:.08em;gap:7px}}

/* ---------------------------------------------------------- 3. BOUTON
   D'après btn-17 de doniaskima : le libellé bascule verticalement au survol
   et deux voiles obliques balaient le fond. Repeint en bleu de marque. */
.btn,.btn *,.btn::after,.btn::before{border:0 solid;box-sizing:border-box}
.btn{
  -webkit-tap-highlight-color:transparent;
  display:inline-flex;align-items:center;justify-content:center;
  background-color:var(--cyan-dp);color:#fff;cursor:pointer;
  font-family:var(--font);font-size:var(--fs-sm);font-weight:900;
  line-height:1.5;letter-spacing:.04em;text-transform:uppercase;
  margin:0;padding:1.15rem 2.6rem;min-height:56px;
  border-radius:var(--r-full);position:relative;overflow:hidden;z-index:0;
  -webkit-mask-image:-webkit-radial-gradient(#000,#fff);
  touch-action:manipulation;
}
/* Le composant d'origine repose sur mix-blend-mode:difference, pensé pour un
   fond NOIR (blanc − noir = blanc). Sur notre bleu de marque il rendait le
   libellé orange. On garde la bascule du texte et le balayage, mais le voile
   passe en blanc translucide DERRIÈRE un texte resté blanc. */
.btn .btn__t{display:block;overflow:hidden;position:relative;z-index:2}
.btn .btn__t span{display:block;position:relative}
.btn:hover .btn__t span{animation:btn-flip .3s forwards}
@keyframes btn-flip{
  0%{transform:translateY(0)} 50%{transform:translateY(80%)}
  51%{transform:translateY(-80%)} to{transform:translateY(0)}
}
.btn::after,.btn::before{--skew:.2;background:rgba(255,255,255,.28);content:"";display:block;
  height:102%;left:calc(-50% - 50% * var(--skew));pointer-events:none;position:absolute;
  top:-104%;transform:skew(calc(150deg * var(--skew))) translateY(var(--progress,0));
  transition:transform .22s ease;width:100%}
.btn::after{--progress:0%;left:calc(50% + 50% * var(--skew));top:102%;z-index:-1}
.btn:hover::before{--progress:100%}
.btn:hover::after{--progress:-102%}
.btn:disabled,.btn[disabled]{opacity:.42;cursor:not-allowed;pointer-events:none}
.btn--lg{padding:1.35rem 3rem;min-height:64px;font-size:var(--fs-md)}
.btn--block{width:100%}
@media (prefers-reduced-motion:reduce){
  .btn:hover .btn__t span{animation:none}
  .btn::after,.btn::before{display:none}
}

/* ----------------------------------------------------------- 4. HÉROS */
.hero{position:relative;background:var(--ink);color:var(--on-dark-1);
  padding-block:clamp(40px,7vw,80px) clamp(30px,5vw,56px);
  overflow:hidden;text-align:center}
.hero::before{content:"";position:absolute;left:50%;top:-24%;width:min(1100px,145%);
  aspect-ratio:1;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(27,158,232,.2),transparent 62%)}
.hero > .wrap{position:relative;z-index:1}

.hero__logo{display:inline-flex;align-items:center;gap:12px;text-align:left;
  margin-bottom:clamp(24px,4vw,38px)}
.hero__logo img{width:54px;height:54px;border-radius:50%;flex:none;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.45))}
.hero__logo b{display:block;font-weight:800;font-size:var(--fs-md);
  letter-spacing:-.02em;color:#fff;line-height:1.2}
.hero__logo span{display:block;font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sky)}

.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:var(--sky)}
.hero__sub{margin:clamp(18px,3vw,26px) auto 0;max-width:46ch;
  font-size:clamp(1.02rem,1.9vw,1.3rem);font-weight:400;color:var(--on-dark-2)}
.hero__cta{margin-top:clamp(24px,4vw,36px)}
.hero__meta{margin-top:var(--s-4);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-3)}

/* --------------------------------------------- 5. LA BASCULE NAVY→PAPIER
   Le navy s'arrête DANS la vidéo : elle chevauche les deux fonds, comme sur
   la référence. Pas de marge négative — une simple coupe de couleur. */
.bridge{position:relative;background:transparent}
.bridge > .wrap{position:relative;z-index:1;padding-block:0 clamp(30px,5vw,56px)}
/* Grand ecran : c'est LA video du heros, elle doit dominer. */
.hero__video{max-width:1000px;margin-inline:auto}

/* ------------------------------------------------------- 6. LECTEURS */
.player{position:relative;overflow:hidden;background:var(--ink-2);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 80px -28px rgba(0,0,0,.62)}
.player--169{aspect-ratio:16/9}
.player--916{aspect-ratio:9/16}
.player img,.player iframe,.player video{width:100%;height:100%;object-fit:cover;border:0;display:block}
.player__btn{position:absolute;inset:0;display:grid;place-items:center;width:100%;
  background:transparent;transition:background var(--t) var(--ease)}
.player__btn:hover{background:rgba(7,20,41,.24)}
.play{position:relative;width:clamp(60px,7vw,78px);aspect-ratio:1;border-radius:50%;
  background:#fff;display:grid;place-items:center;box-shadow:0 18px 44px rgba(0,0,0,.4);
  transition:transform var(--t) var(--ease)}
.player__btn:hover .play{transform:scale(1.08)}
.play svg{width:36%;height:36%;color:var(--ink);margin-left:12%}
.play::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.55);animation:ripple 2.6s var(--ease) infinite}
@keyframes ripple{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.7);opacity:0}}

.player__ph{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;padding:22px;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 12px,transparent 12px 24px)}
.player__ph b{font-size:var(--fs-sm);color:#fff;font-weight:800}
.player__ph span{font-size:var(--fs-2xs);color:var(--on-dark-3);max-width:34ch;line-height:1.5}
.player__ph .dashed{width:54px;height:54px;border-radius:50%;
  border:2px dashed rgba(255,255,255,.28);display:grid;place-items:center;color:var(--on-dark-3)}
.player__ph .dashed svg{width:24px;height:24px}

.vsound{position:absolute;right:12px;bottom:12px;z-index:3;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(7,20,41,.66);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.22);color:#fff;
  transition:transform var(--t) var(--ease),background var(--t) var(--ease)}
.vsound:hover{transform:scale(1.08);background:rgba(7,20,41,.86)}
.vsound svg{width:19px;height:19px}
.vsound .i-on{display:none}
.vsound.is-on .i-on{display:block}
.vsound.is-on .i-off{display:none}

/* --------------------------------------------- 7. LA 2e VIDEO */
/* A l'emplacement des anciens volets parent/eleve. La legende est
   ATTACHEE sous le lecteur (aucun espace, meme largeur) : l'oeil lit un
   seul objet — un lecteur et sa barre d'info — au lieu d'une video plus
   un paragraphe. C'est ce qui permet de dire « elle repond a tout » en
   deux lignes au lieu d'une liste. */
.expl{padding-block:clamp(28px,4.5vw,56px);background:transparent}
.expl__in{max-width:1000px;margin-inline:auto;
  box-shadow:0 34px 74px -30px rgba(7,20,41,.52)}
.expl__in .player{border:0}

/* La barre : navy, collee au lecteur, angles droits comme le reste. */
.expl__bar{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s-3) clamp(12px,2.4vw,22px);
  padding:clamp(13px,1.8vw,18px) clamp(15px,2.4vw,24px);
  background:var(--ink);color:var(--on-dark-1)}
.expl__t{display:inline-flex;align-items:center;gap:9px;flex:none;
  font-size:var(--fs-md);font-weight:800;letter-spacing:-.01em;color:#fff}
.expl__t svg{width:13px;height:13px;flex:none;color:var(--sky)}

/* Les sujets : l'etendue de la video, lisible en un coup d'oeil. Ils
   remplacent la liste de sept questions — meme information utile, un
   dixieme de la place. */
.expl__s{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.expl__s span{display:inline-flex;align-items:center;padding:5px 11px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  font-size:.72rem;font-weight:700;letter-spacing:.03em;color:var(--on-dark-1);
  white-space:nowrap}
@media(min-width:761px){
  /* Titre a gauche, sujets pousses a droite : la barre respire. */
  .expl__s{margin-left:auto}
}
@media(max-width:480px){
  .expl__s span{font-size:.68rem;padding:4px 9px}
}

/* -------------------------------------------- 8. SECTION PREUVE */
.paper{position:relative;padding-block:clamp(44px,7vw,88px);background:transparent}
.paper > .wrap{position:relative;z-index:1}
.paper h2{text-align:center;color:var(--text)}
.paper__lede{margin:var(--s-4) auto 0;max-width:44ch;text-align:center;
  font-size:var(--fs-md);color:var(--text-2)}
.paper__h3{text-align:center;color:var(--text);margin:clamp(40px,6vw,68px) 0 var(--s-6)}

/* --------------------------------------- 9. CARROUSEL MÉDIA
   Vidéos et vocaux au même format portrait, une tuile à la fois. */
.deck{position:relative;margin-top:clamp(26px,4vw,42px)}
.deck__vp{display:flex;gap:clamp(16px,3vw,28px);overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;padding-block:4px;
  padding-inline:calc(50% - var(--tile) / 2)}   /* la 1re et la dernière se centrent */
.deck__vp::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.deck__vp{scroll-behavior:auto}}

.mslide{flex:none;width:var(--tile);scroll-snap-align:center}
.mframe{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--ink-2);
  border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 64px -24px rgba(10,23,48,.55)}
.mframe video{width:100%;height:100%;object-fit:cover;display:block}
.mtag{position:absolute;left:12px;top:12px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-full);
  background:rgba(7,20,41,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.2);
  font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sky-lt)}
.mslide__cap{margin-top:var(--s-4);text-align:center}
.mslide__cap b{display:block;font-weight:800;font-size:var(--fs-md);color:var(--text)}
.mslide__cap span{display:block;margin-top:4px;font-size:var(--fs-2xs);color:var(--text-3)}

/* La tuile vocale : fond navy + orbe centrée */
.mframe--voix{display:grid;place-items:center;
  background:radial-gradient(circle at 50% 38%,var(--ink-2),var(--ink) 70%)}
.voix__meta{position:absolute;left:0;right:0;bottom:0;padding:16px;text-align:center;
  background:linear-gradient(to top,rgba(7,20,41,.92),transparent)}
.voix__meta b{display:block;color:#fff;font-weight:800;font-size:var(--fs-sm)}
.voix__meta span{display:block;margin-top:2px;font-size:var(--fs-2xs);color:var(--on-dark-3)}
.voix__time{position:absolute;right:12px;top:14px;z-index:3;font-size:.78rem;
  font-weight:700;color:var(--on-dark-2);font-variant-numeric:tabular-nums}

/* --- L'orbe, d'après « good-starfish-31 » de Vosoone -------------------- */
.orb-btn{display:grid;place-items:center;width:170px;height:170px;position:relative;
  user-select:none;background:none;border:0;cursor:pointer}
.orb{width:136px;height:136px;border-radius:50%;position:relative;overflow:hidden;
  display:grid;place-items:center;
  background:radial-gradient(circle at 30% 30%,var(--sky) 0%,var(--cyan-dp) 70%);
  box-shadow:0 0 40px rgba(27,158,232,.6),0 0 80px rgba(18,105,158,.45),
             inset 0 0 30px rgba(255,255,255,.2);
  animation:orb-breathe 6s ease-in-out infinite;
  transition:opacity .4s ease,transform .4s ease}
@keyframes orb-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.orb svg{width:58px;height:58px;fill:#fff;opacity:.95;z-index:2;
  transition:opacity .4s ease,transform .4s ease}
.waveform{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:4px;z-index:1;opacity:0;pointer-events:none;
  transition:opacity .4s ease}
.waveform i{width:5px;height:20px;border-radius:3px;background:var(--sky-lt);
  box-shadow:0 0 10px var(--sky),0 0 20px rgba(127,196,240,.7);
  transform-origin:center center}
.waveform i:nth-child(2n){animation:wave-a 1.2s infinite ease-in-out}
.waveform i:nth-child(2n+1){animation:wave-b 1.2s infinite ease-in-out}
.waveform i:nth-child(1){animation-delay:0s}    .waveform i:nth-child(2){animation-delay:.1s}
.waveform i:nth-child(3){animation-delay:.2s}   .waveform i:nth-child(4){animation-delay:.3s}
.waveform i:nth-child(5){animation-delay:.4s}   .waveform i:nth-child(6){animation-delay:.5s}
.waveform i:nth-child(7){animation-delay:.6s}   .waveform i:nth-child(8){animation-delay:.7s}
.waveform i:nth-child(9){animation-delay:.8s}   .waveform i:nth-child(10){animation-delay:.9s}
.waveform i:nth-child(11){animation-delay:1s}   .waveform i:nth-child(12){animation-delay:1.1s}
@keyframes wave-a{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(3)}}
@keyframes wave-b{0%,100%{transform:scaleY(.7)}50%{transform:scaleY(5)}}
/* En lecture : l'orbe s'efface, les barres prennent sa place. */
.orb-btn.is-playing .orb{opacity:0;transform:scale(.2)}
.orb-btn.is-playing .orb svg{opacity:0;transform:scale(.5)}
.orb-btn.is-playing .waveform{opacity:1}
@media (prefers-reduced-motion:reduce){
  .orb{animation:none}
  .waveform i{animation:none !important;transform:scaleY(1.6)}
}

/* --- commandes flottantes du carrousel --------------------------------- */
.deck__nav{position:absolute;top:calc(50% - 60px);z-index:5;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(10,23,48,.1);color:var(--text);
  box-shadow:0 14px 32px -10px rgba(10,23,48,.4);
  transition:transform var(--t) var(--ease),opacity var(--t) var(--ease)}
.deck__nav:hover{transform:scale(1.09)}
.deck__nav[disabled]{opacity:.28;pointer-events:none}
.deck__nav svg{width:20px;height:20px}
.deck__nav--prev{left:max(8px,calc(50% - var(--tile) / 2 - 66px))}
.deck__nav--next{right:max(8px,calc(50% - var(--tile) / 2 - 66px))}
.deck__dots{display:flex;gap:9px;justify-content:center;margin-top:var(--s-6)}
.deck__dots button{width:30px;height:5px;border-radius:var(--r-full);
  background:rgba(10,23,48,.18);position:relative;
  transition:background var(--t) var(--ease),width var(--t) var(--ease)}
/* La barre fait 5px de haut ; la zone touchable, elle, fait 46x45. */
.deck__dots button::after{content:"";position:absolute;inset:-20px -8px}
.deck__dots button[aria-selected="true"]{background:var(--cyan-dp);width:46px}
.deck__hint{display:none;align-items:center;justify-content:center;gap:8px;
  margin-top:var(--s-3);font-size:var(--fs-2xs);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.deck__hint svg{width:16px;height:16px;flex:none}
@media(max-width:820px){.deck__nav{display:none}.deck__hint{display:flex}}

/* -------------------------------------------- 10. CARTES D'AVIS */
/* La pile, a toutes les tailles. D'apres « swipeable stacked cards »
   (codefronts.com). Treize avis tiendraient sur cinq ecrans en liste ;
   empiles ils tiennent sur un, et on les parcourt au doigt ou a la souris.
   La hauteur est celle du plus long message ; les quatre cartes suivantes
   depassent de 16px chacune, d'ou les 70px reserves en bas. */
.wall{position:relative;margin-inline:auto;touch-action:pan-y;
  width:min(560px,92vw);height:clamp(430px,62vh,520px)}
.note{position:absolute;left:0;right:0;top:0;height:calc(100% - 70px);
  background:var(--card);border:1px solid rgba(10,23,48,.07);
  border-radius:var(--r-lg);padding:clamp(18px,2.4vw,26px);overflow:hidden;
  display:flex;flex-direction:column;text-align:left;cursor:grab;
  box-shadow:0 10px 24px -10px rgba(10,23,48,.22),0 2px 6px rgba(10,23,48,.05);
  /* origine en bas : l'echelle ne bouge que le haut, donc le decalage
     visible sous la carte de devant vaut exactement le translateY. */
  transform-origin:bottom center;
  transform:translateY(calc(var(--depth,0) * 16px)) scale(calc(1 - var(--depth,0) * .04));
  z-index:calc(20 - var(--depth,0));
  transition:transform .5s cubic-bezier(.3,.9,.3,1),opacity .4s}

.note__head{display:flex;align-items:center;gap:11px;margin-bottom:var(--s-3)}
.note__av{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  /* --cyan en depart donnait 2.96:1 pour le blanc : trop clair. */
  background:linear-gradient(140deg,var(--cyan-dp),var(--navy));color:#fff;
  font-weight:800;font-size:var(--fs-sm)}
.note__who{display:flex;flex-direction:column;gap:1px;min-width:0}
.note__who b{font-size:var(--fs-sm);font-weight:700;color:var(--text)}
.note__who span{font-size:var(--fs-2xs);color:var(--text-3)}
/* flex:0 1 auto + marges auto : un message court se centre au lieu de
   laisser un grand vide. Pas display:flex ici — un p contenant des <mark>
   eclaterait en plusieurs elements flex et gagnerait des espaces parasites. */
.note__txt{font-size:var(--fs-sm);line-height:1.62;color:var(--text);
  flex:0 1 auto;margin-block:auto}
.note__txt[dir="rtl"]{font-family:var(--arabic);text-align:right;line-height:1.9}
.note__txt mark{
  background:linear-gradient(104deg,transparent .8%,var(--mark) 2.2%,
             var(--mark) 96%,transparent 97.6%);
  color:inherit;padding:.08em .18em;border-radius:.22em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.note__foot{margin-top:var(--s-4);padding-top:var(--s-3);
  border-top:1px solid rgba(10,23,48,.09);
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3)}
.note__tr{font-size:var(--fs-2xs);line-height:1.6;color:var(--text-2);font-weight:600}
.note__badge{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:var(--r-full);background:rgba(27,158,232,.12);
  color:var(--cyan-dp);font-size:var(--fs-2xs);font-weight:700}
.note__badge svg{width:12px;height:12px;flex:none}

/* Cartes du dessous : blanches sur fond clair, elles se confondaient
   avec l'ombre. On les teinte vers le fond a mesure qu'elles reculent. */
.note::after{content:"";position:absolute;inset:0;z-index:5;
  background:var(--paper);pointer-events:none;
  opacity:calc(var(--depth,0) * .16);transition:opacity .5s}
.note.is-deep{opacity:0;pointer-events:none}
.note.is-sending{transform:translateX(130%) rotate(12deg);opacity:0;
  transition:transform .45s ease-in,opacity .45s}
.note.is-drag{transition:none;cursor:grabbing}
/* Le survol ne doit pas defaire l'empilement. */
.note:hover{transform:translateY(calc(var(--depth,0) * 16px)) scale(calc(1 - var(--depth,0) * .04))}

.wall__wrap{display:flex;flex-direction:column;align-items:center}
.wall__cyc{display:inline-flex;align-items:center;gap:9px;margin:var(--s-6) auto 0;
  min-height:48px;padding:0 22px;border-radius:var(--r-full);
  background:#fff;border:1px solid rgba(10,23,48,.12);box-shadow:var(--sh-card);
  font-size:var(--fs-xs);font-weight:800;color:var(--text);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.wall__cyc:hover{transform:translateY(-2px);box-shadow:var(--sh-lift)}
.wall__cyc svg{width:16px;height:16px}
@media(max-width:640px){
  .wall{width:min(340px,88vw);height:clamp(430px,70vh,560px)}
}
@media (prefers-reduced-motion:reduce){
  /* On garde le decalage de la pile (il porte l'information « il y en a
     d'autres derriere ») et on ne coupe que le mouvement. */
  .note{transition:none}
  .note.is-sending{transition:opacity .2s}
}

.disclaimer{margin:clamp(28px,4vw,42px) auto 0;max-width:60ch;text-align:center;
  font-size:var(--fs-2xs);line-height:1.7;color:var(--text-3)}

/* --------------------------------------------------------- 11. LE PRIX */
/* Angles droits partout : les tarifs se lisent comme un document, pas
   comme une pub. Deux actes — on compose à la carte (clair), puis on
   voit les packs (navy). Le second répond à ce que le premier révèle. */
.tarifs{margin:clamp(38px,6vw,64px) auto 0;max-width:920px}
.tar__head{text-align:center;max-width:44ch;margin-inline:auto}
.price__tag{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;
  /* #7F5B0C et pas plus clair : en dessous, le contraste passe sous 4.5:1. */
  background:rgba(232,178,60,.16);border:1px solid rgba(232,178,60,.55);color:#7F5B0C;
  font-size:var(--fs-2xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.tar__head h3{margin:var(--s-5) 0 var(--s-2);
  font-size:clamp(1.45rem,3.4vw,2.15rem);color:var(--text)}
.tar__head .price__sub{color:var(--text-2);font-size:var(--fs-sm)}

/* ---- Acte I : à la carte ---------------------------------------------- */
.mods{margin-top:clamp(26px,3.6vw,38px);background:var(--card);
  border:1px solid rgba(10,23,48,.10);padding:clamp(20px,3.2vw,34px);
  box-shadow:var(--sh-card)}
.mods__head{text-align:center;margin-bottom:clamp(18px,2.4vw,26px)}
.mods__head h4{margin:0;font-size:var(--fs-2xs);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan-dp)}
.mods__head p{margin-top:6px;font-size:var(--fs-sm);color:var(--text-2)}

.mods__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-3)}
@media(max-width:900px){.mods__grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){
  .mods__grid{grid-template-columns:repeat(2,1fr)}
  .mods__grid .mod:last-child{grid-column:span 2}
}

/* La tuile est un vrai bouton bascule (aria-pressed) : au clavier comme
   au doigt, et jamais plus petite que la cible tactile minimale. */
.mod{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:6px;min-height:132px;padding:var(--s-4) 10px var(--s-3);text-align:center;
  background:#fff;border:1.5px solid rgba(10,23,48,.12);
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),
    transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.mod__ico{display:grid;place-items:center;width:42px;height:42px;flex:none;
  background:rgba(27,158,232,.10);color:var(--cyan-dp);
  transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.mod__ico svg{width:22px;height:22px}
.mod__nom{font-size:var(--fs-sm);font-weight:800;letter-spacing:-.01em;
  line-height:1.2;color:var(--text)}
.mod__tag{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3)}
.mod__prix{margin-top:auto;display:flex;flex-direction:column;line-height:1}
.mod__prix b{font-size:1.45rem;font-weight:900;letter-spacing:-.03em;color:var(--navy);
  font-variant-numeric:tabular-nums}
.mod__prix i{margin-top:3px;font-style:normal;font-size:.66rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
/* La pastille de sélection : elle grandit, elle ne réserve pas de place. */
.mod__pick{position:absolute;top:8px;right:8px;width:24px;height:24px;
  display:grid;place-items:center;background:var(--cyan-dp);color:#fff;
  transform:scale(0);opacity:0;
  transition:transform 200ms var(--ease),opacity 200ms var(--ease)}
.mod__pick svg{width:14px;height:14px;stroke-width:3}
@media(hover:hover){
  .mod:hover{border-color:var(--sky);transform:translateY(-3px);box-shadow:var(--sh-card)}
}
.mod:active{transform:translateY(-1px) scale(.985)}
.mod[aria-pressed="true"]{border-color:var(--cyan-dp);background:rgba(27,158,232,.07);
  box-shadow:inset 0 0 0 1px var(--cyan-dp)}
.mod[aria-pressed="true"] .mod__ico{background:var(--cyan-dp);color:#fff}
.mod[aria-pressed="true"] .mod__pick{transform:scale(1);opacity:1}

/* Entrée décalée.
   `backwards` : l'état de départ ne vaut que pendant le délai, donc le
   survol reprend la main dès l'animation finie (sans `forwards`, qui
   figerait le transform et mangerait le :hover).
   Volontairement AUCUN `opacity:0` de repli sur .mod : c'est le conteneur
   `.rv` qui masque le bloc avant la révélation. Si l'IntersectionObserver
   ne se déclenchait jamais, des tuiles à `opacity:0` resteraient
   invisibles pour toujours — un prix qu'on ne voit pas est pire qu'un
   prix qui n'est pas animé. */
@media (prefers-reduced-motion:no-preference){
  .tarifs.is-in .mod{animation:mod-in .55s var(--ease) backwards;
    animation-delay:calc(var(--i,0) * 55ms + 120ms)}
  @keyframes mod-in{from{opacity:0;transform:translateY(16px)}}
}

.mods__acts{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2);
  margin-top:var(--s-4)}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 18px;
  font-size:var(--fs-xs);font-weight:800;letter-spacing:.02em;
  background:var(--navy);color:#fff;border:1.5px solid var(--navy);
  transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.chip svg{width:15px;height:15px;stroke-width:2.6}
.chip--ghost{background:transparent;color:var(--text-2);border-color:rgba(10,23,48,.18)}
@media(hover:hover){
  .chip:hover{background:var(--cyan-dp);border-color:var(--cyan-dp);color:#fff}
}

/* Le résultat. Fond navy : c'est la réponse, elle doit trancher. */
.calc{margin-top:var(--s-4);display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s-4);padding:var(--s-4) clamp(16px,2.4vw,24px);
  background:var(--ink-2);color:var(--on-dark-1);
  border-left:4px solid var(--sky);
  transition:border-color var(--t) var(--ease)}
.calc__l{flex:none;display:flex;flex-direction:column;gap:2px;min-width:132px}
.calc__lab{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-dark-3)}
.calc__n{display:flex;align-items:baseline;gap:7px}
.calc__n b{font-size:clamp(1.9rem,4.6vw,2.5rem);font-weight:900;color:#fff;
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.calc__n i{font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--on-dark-3)}
.calc__r{flex:1 1 260px;display:flex;flex-direction:column;align-items:flex-start;gap:9px}
/* Hauteur réservée : le message change sans jamais décaler la mise en page. */
.calc__msg{min-height:2.9em;display:flex;align-items:center;
  font-size:var(--fs-xs);line-height:1.45;color:var(--on-dark-2);font-weight:500}
.calc__go{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;
  font-size:var(--fs-2xs);font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease)}
.calc__go svg{width:15px;height:15px}
@media(hover:hover){
  .calc__go:hover{background:var(--cyan-dp);border-color:var(--cyan-dp)}
}
/* Trois états, et jamais la couleur seule : le texte change aussi. */
.calc[data-etat="egal"]{border-left-color:var(--gold)}
.calc[data-etat="egal"] .calc__msg{color:#F3D89C}
.calc[data-etat="gagne"]{border-left-color:var(--ok)}
.calc[data-etat="gagne"] .calc__msg{color:#B6F2D6}
.calc[data-etat="gagne"] .calc__go{background:var(--cyan-dp);border-color:var(--cyan-dp)}
@media(max-width:560px){
  .calc{flex-direction:column;align-items:stretch;gap:var(--s-3)}
  /* En colonne, `flex-basis` devient une HAUTEUR : les 260px du mode
     ligne creusaient un vide de 260px sous le bouton. */
  .calc__r{flex:0 1 auto;align-items:stretch}
  .calc__msg{min-height:0}
  .calc__go{justify-content:center}
}

/* ---- Acte II : les packs ---------------------------------------------- */
.price{position:relative;margin-top:var(--s-4);scroll-margin-top:84px;
  background:var(--ink);color:var(--on-dark-1);padding:clamp(28px,4.4vw,46px);
  text-align:center;overflow:hidden;box-shadow:0 40px 90px -34px rgba(7,20,41,.62)}
.price::before{content:"";position:absolute;inset:0;opacity:.6;pointer-events:none;
  background:radial-gradient(600px circle at 76% 2%,rgba(27,158,232,.22),transparent 62%)}
.price > *{position:relative}
.price__hd h4{margin:0;font-size:var(--fs-2xs);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sky)}
.price__hd p{margin-top:6px;font-size:var(--fs-sm);color:var(--on-dark-2)}
.price__sub{max-width:38ch;margin-inline:auto}

.price__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);
  margin-top:clamp(22px,3vw,30px);align-items:stretch}
@media(max-width:760px){.price__grid{grid-template-columns:1fr}}
.pack{position:relative;display:flex;flex-direction:column;align-items:center;
  padding:var(--s-6) var(--s-4) var(--s-5);text-align:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),
    background var(--t) var(--ease)}
@media(hover:hover){
  .pack:hover{transform:translateY(-4px);border-color:rgba(127,196,240,.5);
    background:rgba(255,255,255,.08)}
}
.pack--vedette{background:rgba(27,158,232,.13);border-color:rgba(127,196,240,.5);
  box-shadow:0 0 0 1px rgba(127,196,240,.28)}
.pack__ruban{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  padding:5px 14px;background:var(--gold);color:#2A1B00;white-space:nowrap;
  font-size:.66rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.pack__nom{font-size:var(--fs-2xs);font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sky)}
.pack__old{display:flex;flex-direction:column;gap:1px;
  justify-content:flex-end;margin-top:var(--s-2)}
/* Espace réservé même vide, pour que les trois prix s'alignent — mais
   seulement quand les packs sont côte à côte. Empilés, ce vide n'aligne
   plus rien et se lit comme un trou. */
@media(min-width:761px){ .pack__old{min-height:2.4em} }
@media(max-width:760px){ .pack__old:empty{display:none} }
.pack__old s{font-size:var(--fs-sm);font-weight:700;color:var(--on-dark-3);
  text-decoration-line:line-through;text-decoration-color:rgba(242,98,76,.95);
  text-decoration-thickness:2px;font-variant-numeric:tabular-nums}
.pack__old i{font-style:normal;font-size:.64rem;font-weight:600;letter-spacing:.04em;
  color:var(--on-dark-3)}
.pack__now{display:block;margin-top:2px;font-size:clamp(2.1rem,5.4vw,2.8rem);
  font-weight:900;color:#fff;letter-spacing:-.04em;line-height:1.05;
  font-variant-numeric:tabular-nums}
.pack__per{display:block;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--on-dark-3)}
.pack__note{display:inline-block;margin-top:var(--s-3);padding:4px 11px;
  background:rgba(255,255,255,.09);color:var(--on-dark-1);
  font-size:var(--fs-2xs);font-weight:700}
/* Deux lignes réservées : l'économie, puis le coût mensuel quand il
   existe. Hauteur fixe pour que les trois cartes restent alignées. */
.pack__detail{margin-top:9px;min-height:2.9em;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:2px;
  font-size:.72rem;letter-spacing:.02em;color:var(--sky)}
.pack__detail b{font-weight:700}
.pack__detail i{font-style:normal;font-weight:600;font-size:.66rem;
  color:var(--on-dark-3);white-space:nowrap}
.pack--vedette .pack__detail{color:#B6F2D6}

.price__list{list-style:none;padding:0;margin:clamp(22px,3vw,30px) 0 0;
  display:inline-flex;flex-direction:column;gap:10px;text-align:left}
.price__list li{display:flex;align-items:flex-start;gap:10px;
  font-size:var(--fs-sm);color:var(--on-dark-2);font-weight:500}
.price__list svg{width:18px;height:18px;color:var(--ok);flex:none;margin-top:3px}
.price .btn{margin-top:clamp(22px,3vw,30px)}
.price__note{margin-top:var(--s-4);font-size:var(--fs-2xs);color:var(--on-dark-3);
  max-width:52ch;margin-inline:auto}

/* ------------------------------------------------------------ 12. FAQ */
.faq{max-width:760px;margin:clamp(38px,6vw,64px) auto 0;display:flex;
  flex-direction:column;gap:var(--s-3)}
.q{background:var(--card);border:1px solid rgba(10,23,48,.09);border-radius:var(--r);
  overflow:hidden;transition:box-shadow var(--t) var(--ease)}
.q:hover{box-shadow:var(--sh-card)}
.q__btn{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  padding:20px 22px;text-align:left;font-weight:800;font-size:var(--fs-md);
  color:var(--text);min-height:56px}
.q__btn i{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(27,158,232,.12);color:var(--cyan-dp);position:relative;
  transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.q__btn i::before,.q__btn i::after{content:"";position:absolute;width:12px;height:2px;
  border-radius:2px;background:currentColor;transition:transform var(--t) var(--ease)}
.q__btn i::after{transform:rotate(90deg)}
.q__btn[aria-expanded="true"] i{background:var(--cyan-dp);color:#fff}
.q__btn[aria-expanded="true"] i::after{transform:rotate(0)}
.q__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-slow) var(--ease)}
.q__btn[aria-expanded="true"] + .q__a{grid-template-rows:1fr}
.q__a > div{overflow:hidden}
.q__a p{padding:0 22px 22px;color:var(--text-2);font-size:var(--fs-sm)}

/* ---------------------------------------------------------- 13. PIED */
.foot{background:var(--ink);color:var(--on-dark-3);padding-block:clamp(38px,6vw,54px) 26px}
.foot__in{display:flex;flex-wrap:wrap;gap:var(--s-8);align-items:center;
  justify-content:space-between}
.foot__brand{display:flex;align-items:center;gap:12px}
.foot__brand img{width:46px;height:46px;border-radius:50%;flex:none}
.foot__brand b{display:block;color:#fff;font-weight:800;font-size:var(--fs-sm);
  letter-spacing:-.02em;line-height:1.2}
.foot__brand span{display:block;font-size:var(--fs-2xs);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sky)}
.foot__links{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.foot__links a{display:inline-flex;align-items:center;gap:9px;min-height:44px;
  padding:0 var(--s-4);border-radius:var(--r-full);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  font-size:var(--fs-xs);font-weight:600;color:var(--on-dark-1);
  transition:background var(--t) var(--ease),transform var(--t) var(--ease)}
.foot__links a:hover{background:rgba(255,255,255,.13);transform:translateY(-2px)}
.foot__links svg{width:17px;height:17px;color:var(--sky)}
.foot__bar{margin-top:var(--s-8);padding-top:var(--s-5);
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between;
  font-size:var(--fs-2xs);color:var(--on-dark-3)}

/* ---------------------------------------- 14. FLOTTANT / BARRE MOBILE */
.fab{position:fixed;right:20px;bottom:20px;z-index:var(--z-fab);
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  background:var(--cyan-dp);color:#fff;
  box-shadow:0 16px 40px -10px rgba(18,105,158,.75);
  opacity:0;visibility:hidden;transform:translateY(18px) scale(.85);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t)}
.fab.is-on{opacity:1;visibility:visible;transform:none}
.fab:hover{transform:scale(1.07)}
.fab svg{width:28px;height:28px}
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-fab);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(234,242,251,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-top:1px solid rgba(10,23,48,.1);
  transform:translateY(110%);transition:transform var(--t) var(--ease)}
.mbar.is-on{transform:none}
@media(max-width:640px){
  .fab{display:none}
  .mbar{display:block}
  body.has-mbar{padding-bottom:92px}
}

/* ------------------------------------------------- 15. RÉVÉLATION */
.rv{opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:var(--d,0ms)}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .rv{opacity:1;transform:none}
}