/* ---------------------------------------------------------------------------
   Bidflow Invest — feuille de style du site.
   Reprend les tokens du design system (couleurs, typographies, espacements) et
   redessine en CSS les composants qui étaient auparavant rendus par React.
   Le site est désormais du HTML statique : il s'affiche même sans JavaScript.
   --------------------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text-1);font-family:var(--font-body);overflow-x:hidden}
html{scroll-behavior:smooth}
img,svg{max-width:100%}
a{color:var(--accent-text);text-decoration:none;transition:opacity 160ms cubic-bezier(.2,.8,.2,1)}
a:hover{opacity:.75}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}

.wrap{max-width:1280px;margin:0 auto}

/* --- En-tête et navigation ------------------------------------------------ */
.head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between;
      padding:18px clamp(20px,5vw,48px);position:sticky;top:0;background:var(--bg);
      border-bottom:1px solid var(--border);z-index:20}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text-1)}
.brand b{font-family:var(--font-mono);font-weight:600;font-size:19px;letter-spacing:-.05em}
.brand i{font-family:var(--font-mono);font-style:normal;font-size:10px;letter-spacing:.14em;color:var(--text-3)}
.nav{display:flex;gap:26px;font:500 14px/1 var(--font-body)}
.nav a{color:var(--text-2);padding:6px 0;border-bottom:1.5px solid transparent}
.nav a.on{color:var(--text-1);border-bottom-color:var(--accent)}
.head-right{display:flex;align-items:center;gap:12px}
.burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;padding:0;
        border:1px solid var(--border-strong);border-radius:12px;background:transparent;cursor:pointer}
.burger span{display:block;position:relative;width:17px;height:11px}
.burger span i{position:absolute;left:0;right:0;height:1.5px;border-radius:2px;background:var(--text-1)}
.burger span i:nth-child(1){top:0}.burger span i:nth-child(2){top:5px}.burger span i:nth-child(3){top:10px}
.menu{display:none;width:100%;gap:2px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);
      font:500 16px/1 var(--font-body)}
.menu.open{display:grid}
.menu a{color:var(--text-1);padding:13px 2px}
@media (max-width:940px){.nav{display:none}.burger{display:inline-flex}}

/* --- Sections et titres ---------------------------------------------------- */
.sec{padding:56px clamp(20px,5vw,48px);border-top:1px solid var(--border)}
.sec.first{border-top:none}
.eyebrow{font:600 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
         color:var(--accent-text);margin-bottom:14px}
.eyebrow.c2{color:var(--accent-2-text)}.eyebrow.c3{color:var(--accent-3-text)}
h1{font:800 clamp(30px,6.2vw,52px)/1.12 var(--font-display);letter-spacing:-.01em;margin:0 0 20px}
h2{font:600 clamp(23px,4.2vw,34px)/1.2 var(--font-display);margin:0 0 14px}
h3{font:600 clamp(17px,2.4vw,20px)/1.3 var(--font-display);margin:0 0 8px}
p{font-size:15px;line-height:1.6;color:var(--text-2)}
.lead{font-size:16px;line-height:1.55;color:var(--text-2);max-width:680px;margin:0 0 32px}
.mono{font:600 11px/1 var(--font-mono);letter-spacing:.12em;color:var(--text-3)}
.note{font:400 11px/1.5 var(--font-mono);color:var(--text-3)}

/* --- Grilles --------------------------------------------------------------- */
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.split.wide-left{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split.wide-right{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media (max-width:960px){
  .split,.split.wide-left,.split.wide-right{grid-template-columns:1fr;gap:34px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* --- Cartes ---------------------------------------------------------------- */
.card{border:1px solid var(--border);border-radius:20px;background:var(--surface);
      box-shadow:var(--shadow-card);padding:22px;transition:transform 160ms cubic-bezier(.2,.8,.2,1)}
.card:hover{transform:translateY(-4px)}
.card.flat:hover{transform:none}
.card p:last-child{margin-bottom:0}
.card .k{font:600 11px/1 var(--font-mono);letter-spacing:.12em;color:var(--text-3);margin-bottom:10px;display:block}
.dark{background:var(--ink);color:var(--cream);border-color:transparent}
.dark h3,.dark .big{color:var(--cream)}
.dark p{color:#B3A9BE}

/* --- Étiquettes ------------------------------------------------------------ */
.tag{display:inline-block;padding:6px 11px;border:1px solid var(--border);border-radius:999px;
     font:500 12px/1 var(--font-mono);color:var(--text-2);background:var(--surface)}
.badge{display:inline-block;padding:5px 10px;border-radius:999px;font:700 11px/1 var(--font-mono);
       letter-spacing:.08em;color:var(--ink)}
.badge.rose{background:var(--rose)}.badge.amber{background:var(--amber)}.badge.cyan{background:var(--cyan)}
.chip{display:inline-block;padding:9px 15px;border-radius:12px;border:1px solid var(--border);
      background:var(--surface);font:500 13px/1 var(--font-mono);color:var(--text-1)}
.chip.hot{background:var(--rose);color:var(--ink);border-color:transparent;font-weight:700}
.arrow{color:var(--text-3);font:400 13px/1 var(--font-mono)}

/* --- Boutons --------------------------------------------------------------- */
.btn{display:inline-block;border:1.5px solid transparent;border-radius:var(--radius-pill);cursor:pointer;
     font:700 14px/1 var(--font-body);padding:13px 22px;background:var(--accent);color:var(--on-accent);
     transition:filter 160ms cubic-bezier(.2,.8,.2,1),transform 160ms cubic-bezier(.2,.8,.2,1)}
.btn:hover{filter:brightness(.92);opacity:1}
.btn:active{transform:scale(.98)}
.btn.lg{font-size:16px;padding:16px 28px}
.btn.sm{font-size:12px;padding:9px 16px}
.btn.ghost{background:transparent;color:var(--text-1);border-color:var(--border-strong)}
.btn[disabled]{cursor:not-allowed;opacity:.45}

/* --- Chiffres et barres ---------------------------------------------------- */
.big{font:800 clamp(30px,5vw,46px)/1 var(--font-display);letter-spacing:-.02em}
.stat .v{font:700 clamp(22px,3vw,28px)/1 var(--font-display)}
.stat .l{font:600 11px/1 var(--font-mono);letter-spacing:.12em;color:var(--text-3);margin-bottom:8px}
.barrow{display:grid;grid-template-columns:96px minmax(0,1fr) 74px;gap:14px;align-items:center;margin-bottom:12px}
.barrow .lbl{font:600 11px/1 var(--font-mono);letter-spacing:.1em;color:var(--text-3)}
.barrow .track{position:relative;height:10px;border-radius:999px;background:var(--surface-2)}
.barrow .fill{position:absolute;top:0;bottom:0;border-radius:999px;transform-origin:left;
              transform:scaleX(0);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.barrow.on .fill{transform:scaleX(1)}
.barrow .val{font:600 13px/1 var(--font-mono);text-align:right;color:var(--text-1)}
@media (max-width:700px){.barrow{grid-template-columns:60px minmax(0,1fr) 56px;gap:10px}}

/* --- Logos ----------------------------------------------------------------- */
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.logos .cell{display:flex;align-items:center;justify-content:center;min-height:76px;padding:14px 16px;
             border:1px solid var(--border);border-radius:16px;background:var(--surface);
             transition:transform 160ms cubic-bezier(.2,.8,.2,1)}
.logos .cell:hover{transform:translateY(-3px)}
.logos img{max-height:30px;width:auto;height:auto;object-fit:contain}
.grouphead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:14px;
           padding-bottom:10px;border-bottom:1px solid var(--border)}
@media (max-width:700px){.logos{grid-template-columns:repeat(auto-fill,minmax(124px,1fr))}}

/* --- Chaîne d'achat -------------------------------------------------------- */
.chain{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;align-items:center}
.chain .flow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@media (max-width:960px){.chain{grid-template-columns:1fr;gap:14px}}

/* --- Funnel ---------------------------------------------------------------- */
.frow{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,4fr);gap:20px;
      align-items:start;padding:20px 0;border-top:1px solid var(--border)}
.frow.head{border-top:none;padding:0 0 10px}
.dot{width:8px;height:8px;border-radius:999px;display:inline-block}
.frow4{grid-template-columns:minmax(0,2.4fr) minmax(0,3fr) minmax(0,3fr) minmax(0,3.4fr)}
.cpm{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:24px;align-items:center}
@media (max-width:960px){.frow,.frow4{grid-template-columns:1fr;gap:8px}.cpm{grid-template-columns:1fr;gap:14px}}

/* --- Formulaire ------------------------------------------------------------ */
label.f{font:600 11px/1 var(--font-mono);letter-spacing:.12em;color:var(--text-3);margin-bottom:8px;display:block}
input.f,textarea.f{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:14px;
                   background:var(--surface);font:400 14px/1.5 var(--font-body);color:var(--text-1)}
textarea.f{resize:vertical}
.err{font:500 12px/1.4 var(--font-body);color:var(--accent-text);margin-top:6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
@media (max-width:420px){input.f,textarea.f{font-size:16px}}

/* --- FAQ ------------------------------------------------------------------- */
details.faq{border-bottom:1px solid var(--border);padding:16px 0}
details.faq summary{font:600 16px/1.4 var(--font-body);cursor:pointer;color:var(--text-1)}
details.faq p{margin:12px 0 0;font-size:14px}

/* --- Pied de page ---------------------------------------------------------- */
.foot{background:var(--ink);color:#B3A9BE;padding:38px clamp(20px,5vw,48px);
      display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between}
.foot a{color:#B3A9BE;font:400 12px/1.4 var(--font-mono)}
.foot .fnav{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot .brand b,.foot .brand{color:var(--cream)}
@media (max-width:700px){.foot{flex-direction:column;align-items:flex-start}}

/* --- Animation d'apparition ------------------------------------------------ */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.up{animation:fadeUp .5s cubic-bezier(.2,.8,.2,1) both}
.up.d1{animation-delay:.08s}.up.d2{animation-delay:.16s}.up.d3{animation-delay:.24s}

/* Barres empilées (héro Performance) : libellé au-dessus, pas en colonne */
.card .barrow{margin-bottom:0}
.card .barrow .track{width:100%}

/* --- Correctifs mobile ----------------------------------------------------
   Trois blocs se lisaient mal une fois empilés sur petit écran : le tableau
   comparatif perdait ses en-têtes de colonne, la page Formats alternait son
   ordre de lecture, et les chaînes de pastilles s'enroulaient en désordre. */

/* Le tableau de canaux devient une carte par étape sur petit écran.
   Empiler douze blocs de texte à la file était illisible : on regroupe chaque
   étape, et la colonne Bidflow est mise en évidence en pied de carte. */
@media (max-width:960px){
  .frow.head{display:none}
  .frow,.frow4{
    grid-template-columns:1fr;gap:0;border-top:none;
    border:1px solid var(--border);border-radius:20px;background:var(--surface);
    box-shadow:var(--shadow-card);padding:20px;margin-bottom:14px;
  }
  .frow4 > div:first-child{padding-bottom:14px;border-bottom:1px solid var(--border)}
  .frow4 p[data-col]{padding:14px 0;border-bottom:1px solid var(--border);margin:0}
  .frow4 p[data-col]::before{
    content:attr(data-col);display:block;
    font:600 10px/1 var(--font-mono);letter-spacing:.12em;color:var(--text-3);margin-bottom:7px;
  }
  /* La colonne Bidflow ferme la carte, sur fond teinté */
  .frow4 p[data-col="PROGRAMMATIC · BIDFLOW"]{
    background:var(--surface-2);border-bottom:none;
    margin:0 -20px -20px;padding:16px 20px;border-radius:0 0 19px 19px;color:var(--text-1);
  }
  .frow4 p[data-col="PROGRAMMATIC · BIDFLOW"]::before{color:var(--accent-text)}
}

/* Ordre de lecture constant : le texte avant l'image, sur tous les blocs */
@media (max-width:960px){
  .split.media-first > figure{order:2}
  .split.media-first > div{order:1}
}

/* La chaîne d'achat se lit verticalement plutôt qu'en pastilles enroulées */
@media (max-width:700px){
  .chain .flow{flex-direction:column;align-items:stretch;gap:4px}
  .chain .flow .chip{text-align:center}
  .chain .flow .arrow{display:block;text-align:center;line-height:1;padding:1px 0;
                      transform:rotate(90deg);font-size:12px}
}

/* Respiration resserrée sur petit écran */
@media (max-width:700px){
  .sec{padding-top:44px;padding-bottom:44px}
  .g4.tight{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .g4.tight .card{padding:16px}
  .g4.tight p{font-size:13px}
}

/* --- Orbe de la homepage --------------------------------------------------
   Un seul rendu WebGL. Les mêmes points dessinent la trame des affiches, puis
   se réassemblent en globe : le papier devient signal. Aucune image
   superposée — tout est calculé dans globe.js. */

.orb{position:relative;width:100%;height:clamp(260px,64vw,440px)}
.orb bidflow-globe{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden;z-index:2}

/* Photo nette, affichée tant que rien ne bouge. Sa taille correspond très
   exactement au plan des particules : le passage de l'une à l'autre est
   invisible. Duotone en CSS, identique à celui appliqué aux particules. */
.orb-photo{position:absolute;top:1.8%;left:50%;height:96.4%;aspect-ratio:1/1;
  max-width:100%;transform:translateX(-50%);border-radius:999px;overflow:hidden;
  z-index:1;opacity:0;transition:opacity .28s linear}
.orb-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) sepia(.5) hue-rotate(248deg) saturate(1.7) contrast(1.04) brightness(1.04)}
.orb.showphoto .orb-photo{opacity:1}

/* Étiquettes de signal : format et marché, ancrées sur les villes du globe */
.orb-signals{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.orb-signals .sig{position:absolute;transform:translate(-50%,-160%) scale(.9);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:5px 10px;border-radius:999px;background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--shadow-card);
  font:500 10px/1 var(--font-mono);letter-spacing:.08em;color:var(--text-2);
  opacity:0;transition:opacity .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1)}
.orb-signals .sig b{font-weight:700;color:var(--sig,var(--accent))}
.orb-signals .sig.in{opacity:1;transform:translate(-50%,-180%) scale(1)}

/* Repère d'état : deux pastilles, pour que l'alternance se lise comme voulue */
.orb-nav{position:relative;z-index:5;display:flex;justify-content:center;gap:7px;margin-top:14px}
.orb-nav i{width:6px;height:6px;border-radius:999px;background:var(--border-strong);
           opacity:.28;transition:opacity .5s,background .5s}
.orb-nav i.on{opacity:1;background:var(--accent)}

.orb-cap{position:relative;z-index:5;margin-top:10px;min-height:1.2em}
.orb-cap span{position:absolute;left:0;right:0;text-align:center;
              transition:opacity .55s cubic-bezier(.2,.8,.2,1);opacity:0}
.orb-cap span.on{opacity:1}

@media (max-width:700px){.orb-signals .sig{font-size:9px;padding:4px 8px}}

/* ===========================================================================
   AJOUTS — motifs issus du catalogue 21st.dev, réécrits en CSS pur, et
   corrections issues de l'audit d'accessibilité ui-ux-pro-max.
   Aucune dépendance : ni React, ni Tailwind, ni framework d'animation.
   =========================================================================== */
/* --- CONTRASTE (règle color-contrast, sévérité High) ------------------------
   --text-3 mesurait 3,80:1 sur le fond crème et 3,99:1 sur les cartes, sous le
   seuil de 4,5:1. C'est la couleur de TOUTES les étiquettes mono du site :
   eyebrows, notes légales, libellés de champs. Assombrie de 10% seulement,
   la nuance mauve est intacte : #857A90 → #786E82, soit 4,53:1. */
:root{ --text-3: #786E82; }

/* --- CIBLES TACTILES (règle touch-target-size, sévérité Critical) -----------
   Cinq éléments passaient sous les 44×44px recommandés. On agrandit la zone
   sensible sans changer l'apparence, via padding et pseudo-élément. */
.btn.sm{padding:12px 18px}
.btn{padding:15px 22px}
.burger{width:44px;height:44px}
.nav a{padding:11px 0}
.marquee-group a,.marquee-group span{height:44px}
.toc a{padding:10px 0 10px 12px}
.fnav a{display:inline-block;padding:10px 0}

/* --- SKIP LINK (règle skip-links) ------------------------------------------
   Un utilisateur au clavier traversait l'en-tête entier avant d'atteindre le
   contenu. Le lien reste invisible jusqu'à recevoir le focus. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;
      background:var(--ink);color:var(--cream);padding:14px 20px;
      border-radius:0 0 14px 0;font:600 13px/1 var(--font-body)}
.skip:focus{left:0;opacity:1}

/* --- SÉLECTION DE PARCOURS -------------------------------------------------
   Motif « Enterprise Gateway » du skill : « Path selection (I am a...) ».
   Bidflow adresse deux publics aux attentes opposées ; les faire choisir dès
   l'accueil vaut mieux qu'un discours unique qui ne parle ni à l'un ni à l'autre. */
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.paths a{display:flex;flex-direction:column;gap:10px;padding:26px;
  border:1px solid var(--border);border-radius:20px;background:var(--surface);
  box-shadow:var(--shadow-card);color:var(--text-1);
  transition:border-color 200ms cubic-bezier(.2,.8,.2,1),
             transform 200ms cubic-bezier(.2,.8,.2,1)}
.paths a:hover{border-color:var(--border-strong);transform:translateY(-4px);opacity:1}
.paths .who{font:700 11px/1 var(--font-mono);letter-spacing:.14em;color:var(--accent-text)}
.paths h3{margin:0}
.paths p{margin:0;font-size:14px}
.paths .go{font:600 12px/1 var(--font-mono);letter-spacing:.06em;
           color:var(--accent-text);margin-top:6px}
@media (max-width:700px){.paths{grid-template-columns:1fr}}

/* --- Bandeau de logos défilant --------------------------------------------
   Repris du « Logo Marquee » de @ddoemonn sur 21st. Le composant d'origine est
   en React + motion avec une boucle physique ; on n'en garde que les partis
   pris qui comptent : pause au survol ET au focus clavier, repli en défilement
   manuel si l'utilisateur a désactivé les animations, masques sur les bords. */

.marquee{position:relative;overflow:hidden;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:20px 0;--fade:72px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),
                     #000 calc(100% - var(--fade)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),
                     #000 calc(100% - var(--fade)),transparent 100%)}
.marquee-track{display:flex;width:max-content;animation:marquee 64s linear infinite}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee-group{display:flex;align-items:center;gap:52px;padding-right:52px}
.marquee-group a,.marquee-group span{display:inline-flex;align-items:center;
  height:34px;padding:4px 6px;border-radius:8px}
.marquee-group img{height:26px;width:auto;object-fit:contain;
  opacity:.62;transition:opacity 200ms cubic-bezier(.2,.8,.2,1)}
.marquee-group a:hover img,
.marquee-group a:focus-visible img{opacity:1}
@keyframes marquee{from{transform:translate3d(0,0,0)}
                   to{transform:translate3d(-50%,0,0)}}

/* Sans animation : la bande devient un rail que l'on fait défiler à la main */
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none}
}

/* --- Grille bento ----------------------------------------------------------
   Les six formats ne sont plus six cartes identiques : la surface hiérarchise.
   CTV et DOOH, les deux formats les plus différenciants, occupent le double. */

.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
       grid-auto-rows:minmax(190px,auto);gap:14px}
.bento .cell{display:flex;flex-direction:column;justify-content:space-between;
  border:1px solid var(--border);border-radius:20px;background:var(--surface);
  box-shadow:var(--shadow-card);padding:22px;
  transition:transform 200ms cubic-bezier(.2,.8,.2,1),
             border-color 200ms cubic-bezier(.2,.8,.2,1)}
.bento .cell:hover{transform:translateY(-4px);border-color:var(--border-strong)}
.bento .wide{grid-column:span 2}
.bento .cell h3{margin:0 0 6px}
.bento .cell p{font-size:14px;margin:0}
.bento .cell .k{font:600 10px/1 var(--font-mono);letter-spacing:.14em;
  color:var(--text-3);display:block;margin-bottom:auto;padding-bottom:18px}

/* La cellule sombre doit gagner sur .bento .cell, plus spécifique que .dark.
   Sans ce sélecteur, le fond restait clair et le texte crème devenait invisible. */
.bento .cell.dark{background:var(--ink);border-color:transparent}
.bento .cell.dark h3{color:var(--cream)}
.bento .cell.dark p{color:#B3A9BE}
.bento .cell.dark .k{color:var(--rose)}
.bento .cell.dark .tag{background:transparent;border-color:#3A3145;color:#B3A9BE}
.bento .cell.dark:hover{border-color:var(--rose)}

.bento .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.bento .tags .tag{font-size:11px;padding:5px 9px}

@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(160px,auto)}
  .bento .wide{grid-column:span 2}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
  .bento .wide{grid-column:span 1}
}

/* --- Bandeau de chiffres clés ---------------------------------------------- */
.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
       border:1px solid var(--border);border-radius:20px;overflow:hidden;
       background:var(--surface)}
.strip > div{padding:26px 24px;border-right:1px solid var(--border)}
.strip > div:last-child{border-right:none}
.strip .k{font:600 10px/1 var(--font-mono);letter-spacing:.14em;color:var(--text-3);
          display:block;margin-bottom:12px}
.strip .v{font:800 clamp(24px,3.4vw,34px)/1 var(--font-display);letter-spacing:-.02em;
          color:var(--text-1);display:block;margin-bottom:8px}
.strip p{font-size:13px;margin:0}
@media (max-width:760px){
  .strip{grid-template-columns:1fr}
  .strip > div{border-right:none;border-bottom:1px solid var(--border)}
  .strip > div:last-child{border-bottom:none}
}


/* --- Grain papier ----------------------------------------------------------
   Inspiré du « Paper Texture » de @paper-design sur 21st, qui est un shader
   WebGL React. Ici : un filtre SVG feTurbulence en data-URI, ~500 octets, zéro
   dépendance. Le fond crème cesse d'être un aplat mort et prend la matière
   d'un papier — ce qui sert directement le récit « papier → signal ». */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;
  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' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E")}
.wrap{position:relative;z-index:1}

/* --- Apparition au défilement ---------------------------------------------
   Le site n'animait rien au scroll : tout arrivait déjà posé. Chaque section
   monte de 18px en fondu, une seule fois. */
.reveal{opacity:0;transform:translateY(18px);
        transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.seen{opacity:1;transform:none}

/* --- Manifeste : révélation mot à mot au défilement ------------------------
   Repris de « Reading Text Reveal » (@waleedkibhen), réécrit sans framer-motion.
   Le texte s'éclaire mot par mot au rythme de la lecture. */
.readtext{font:600 clamp(22px,3.4vw,38px)/1.35 var(--font-display);
          max-width:20ch;margin:0;letter-spacing:-.01em}
.readtext w{color:var(--border-strong);opacity:.16;
            transition:opacity .45s cubic-bezier(.2,.8,.2,1),color .45s cubic-bezier(.2,.8,.2,1)}
.readtext w.lit{opacity:1;color:var(--text-1)}
.readtext w.key.lit{color:var(--accent)}

/* --- Numérotation éditoriale des sections ---------------------------------- */
.wrap{counter-reset:sec}
.sec.numbered{counter-increment:sec;position:relative}
.sec.numbered > .eyebrow::before{content:counter(sec,decimal-leading-zero);
  font-family:var(--font-mono);color:var(--text-3);margin-right:12px;letter-spacing:.08em}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .readtext w{opacity:1;color:var(--text-1)}
  body::before{display:none}
}

/* --- Sommaire latéral des pages légales ------------------------------------
   Inspiré de « Table of Contents » (@inference-sh) : la section courante est
   suivie par IntersectionObserver. Les CGV font 17 articles et la politique de
   confidentialité 11 sections, sans aucune navigation — c'était le plus gros
   manque d'ergonomie du site. */
.legal{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px;
       padding:48px clamp(20px,5vw,48px) 64px;max-width:1080px}
.toc{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 140px);overflow:auto}
.toc .k{font:600 10px/1 var(--font-mono);letter-spacing:.14em;color:var(--text-3);
        display:block;margin-bottom:14px}
.toc a{display:block;padding:6px 0 6px 12px;border-left:1.5px solid var(--border);
       font:500 12.5px/1.4 var(--font-body);color:var(--text-3);
       transition:color .2s,border-color .2s}
.toc a:hover{color:var(--text-2);opacity:1}
.toc a.on{color:var(--text-1);border-left-color:var(--accent)}
.legal main{padding:0;max-width:none}
@media (max-width:900px){
  .legal{grid-template-columns:1fr;gap:0;padding-top:24px}
  .toc{position:static;max-height:none;margin-bottom:30px;
       border:1px solid var(--border);border-radius:16px;padding:18px;background:var(--surface)}
  .toc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
}

/* --- Barre de progression de lecture --------------------------------------- */
.readbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:30;background:transparent}
.readbar i{display:block;height:100%;width:0;background:var(--accent);
           transition:width .1s linear}

/* --- Validation du formulaire à la saisie ---------------------------------- */
input.f.ok,textarea.f.ok{border-color:#3DDCFF}
input.f.ko,textarea.f.ko{border-color:var(--accent)}
.fieldnote{font:400 11px/1.5 var(--font-mono);color:var(--text-3);margin-top:6px;
           transition:color .2s}
.fieldnote.ko{color:var(--accent-text)}

/* --- Frise verticale du processus ------------------------------------------ */
.rail{position:relative;padding-left:40px}
.rail::before{content:"";position:absolute;left:13px;top:8px;bottom:8px;width:1.5px;
              background:var(--border)}
.rail .step{position:relative;padding:0 0 30px}
.rail .step:last-child{padding-bottom:0}
.rail .step::before{content:"";position:absolute;left:-33px;top:5px;width:14px;height:14px;
  border-radius:999px;background:var(--bg);border:2px solid var(--border-strong)}
.rail .step.hot::before{background:var(--accent);border-color:var(--accent)}
.rail .step .n{font:700 10px/1 var(--font-mono);letter-spacing:.14em;color:var(--text-3);
               display:block;margin-bottom:8px}
.rail .step h3{margin:0 0 6px}
.rail .step p{margin:0;font-size:14px}

@media (prefers-reduced-motion:reduce){.readbar i{transition:none}}