/* ============================================================
   STUDIO ATLAS — THÈME CLAIR (maquette, 20/08/2026)
   ------------------------------------------------------------
   ⚠️ FEUILLE DE MAQUETTE, PAS UNE LIVRAISON.
   Elle sert à valider la DIRECTION avec Timour et Zied (étape 3a).
   Elle ne se charge que sur index-clair.html : la prod n'est pas touchée.

   Pourquoi elle existe : le thème sombre n'était pas tokenisé, il était
   écrit en dur (135 rgba(255,255,255,a) + 39 #fff). Le 20/08 les 135 sont
   passés en rgba(var(--rgb-inv),a), ce qui est neutre en sombre et rend
   l'inversion possible d'un seul token. Les 39 #fff restent à traiter :
   c'est le vrai reste du chantier, et il se fera au déroulé (étape 3c).
   ============================================================ */

[data-theme="clair"]{
  /* ---- le geste central : l'encre remplace le blanc dans les verres ---- */
  --rgb-inv:11,18,32;
  --ink-hi:#0B1220;        /* les 29 color:#fff des titres suivent */
  --rgb-alu:74,82,96;      /* les 58 gris secondaires remontent d'un cran */

  /* ---- palette ---- */
  --obsidian:#FBFBFB;          /* devient le fond */
  --off-white:#0B1220;         /* devient l'encre */
  --aluminium:#5A6270;
  --space-blue:#F2F4F8;

  --line:rgba(11,18,32,.12);
  --line-soft:rgba(11,18,32,.07);

  --glass-bg:rgba(11,18,32,.035);
  --glass-bg-hover:rgba(11,18,32,.06);
  --glass-border:rgba(11,18,32,.10);
  --glass-border-hover:rgba(37,99,235,.35);
  --glass-shadow:0 8px 32px rgba(11,18,32,.08);

  --grad-metal:linear-gradient(90deg,#3A4150 0%,#8A919B 100%);

  /* ---- pont V2 (devis + mentions légales) ---- */
  --bg:#FBFBFB;
  --bg-card:rgba(11,18,32,.035);
  --bg-section:#F2F4F8;
  --white:#0B1220;
  --text:#0B1220;
  --text-2:#5A6270;
  --text-3:rgba(90,98,112,.82);
  --text-muted:rgba(90,98,112,.82);
  --border:rgba(11,18,32,.12);
  --border-2:rgba(11,18,32,.20);
  --shadow-sm:0 8px 24px rgba(11,18,32,.08);
}

[data-theme="clair"] body{
  background:#FBFBFB;
  color:#0B1220;
}

/* Le header est un verre translucide : sur fond clair il doit poser du clair. */
[data-theme="clair"] .header__inner{
  background:rgba(251,251,251,.72);
  border-color:rgba(11,18,32,.10);
}

/* ------------------------------------------------------------
   Le logo : le A chromé est un signe CLAIR-SUR-SOMBRE.
   Mesuré le 20/08 : luminance moyenne 171, 22 % des pixels au-dessus
   de 210 — il se noie sur un fond blanc, ce n'est pas un réglage,
   c'est sa construction. Tant que Zied n'a pas livré la déclinaison
   fond clair, on le pose sur une pastille sombre : c'est déjà son
   traitement sur le favicon et sur les réseaux, donc rien n'est inventé.
   ------------------------------------------------------------ */
[data-theme="clair"] .logo__icon{
  background:#0B1220;
  border-radius:26%;
  padding:6px;
  box-shadow:0 2px 10px rgba(11,18,32,.18);
}

/* Le hero porte une image sombre : on garde son texte en clair par-dessus. */
[data-theme="clair"] .hero,
[data-theme="clair"] .hero *{
  --off-white:#F5F5F7;
  --aluminium:#C4C9D2;
}
[data-theme="clair"] .hero{ --rgb-inv:255,255,255; --ink-hi:#fff; --rgb-alu:167,172,180; }
/* Le bandeau de preuve reste sombre : ses gris aussi. */
[data-theme="clair"] .proof--warm{ --rgb-inv:255,255,255; --ink-hi:#fff; --rgb-alu:167,172,180; }

/* Bandeau de preuve : les logos clients sont conçus pour du sombre. */
[data-theme="clair"] .proof--warm{
  background:#0B1220;
  border-radius:24px;
}

/* ============================================================
   Correctifs issus de l'audit de contraste du 20/08 (26 éléments
   sous 3:1, 3 causes seulement). Mesuré au navigateur, pas à l'œil.
   ============================================================ */

/* 1. Les boutons pleins restent SOMBRES : leur texte doit rester blanc.
      Le basculement de --ink-hi les avait suivis, d'où du sombre sur sombre. */
[data-theme="clair"] .btn--primary,
[data-theme="clair"] .btn--card,
[data-theme="clair"] .btn--shine,
[data-theme="clair"] .lang-toggle__btn.is-active,
[data-theme="clair"] .reco-cta,
[data-theme="clair"] .btn-next{
  --ink-hi:#fff;
  color:#fff;
}

/* 2. Les bleus d'accent étaient calibrés pour de l'obsidian.
      Sur #FBFBFB ils tombent à 1,8:1 — on descend d'un cran en luminance. */
[data-theme="clair"]{
  --atlas-blue-lite:#2C63D6;
  --atlas-blue-deep:#1A3EA8;
}
[data-theme="clair"] .m__step,
[data-theme="clair"] .m__after-ic,
[data-theme="clair"] .m__for,
[data-theme="clair"] .m__badge{
  color:#2C63D6;
}

/* 3. Les gris secondaires (aluminium et ses variantes écrites en dur)
      viraient à 1,6:1. L'encre secondaire du thème clair les remplace. */
[data-theme="clair"] .m__prev,
[data-theme="clair"] .m__note,
[data-theme="clair"] .m__delay,
[data-theme="clair"] .eyebrow,
[data-theme="clair"] .pcl__k{
  color:#5A6270;
}

/* ============================================================
   Retours Théo du 20/08 sur la maquette — 3 demandes.
   ============================================================ */

/* ── 1. Le panneau .cpv : plus de dégradé sombre.
      Demande Théo : « mets tout dans un beau cadre global ».
      On garde la structure, on remplace le fond par un cadre clair posé. ── */
[data-theme="clair"] .cpv{
  background:#FFFFFF;
  border:1px solid rgba(11,18,32,.10);
  border-radius:28px;
  box-shadow:0 18px 50px rgba(11,18,32,.09), 0 2px 6px rgba(11,18,32,.04);
  --rgb-inv:11,18,32;
  --ink-hi:#0B1220;
  --rgb-alu:74,82,96;
}
[data-theme="clair"] .cpv{ color:#0B1220 }
/* ⚠️ Pas de « .cpv * { color:inherit } » ici : essaye le 20/08, la regle
   ecrasait 86 elements sur une seule couleur et tuait tous les accents
   du cadre. Les tokens ci-dessus suffisent, chaque accent garde le sien. */

/* ── 2. Textes secondaires qui restaient sous 3:1 malgré le token ── */
[data-theme="clair"] .cflow__hint,
[data-theme="clair"] .cpk__cta-sub,
[data-theme="clair"] .tree__cap,
[data-theme="clair"] .section-sub,
[data-theme="clair"] .m__prev{
  color:#4A5260;
}
[data-theme="clair"] .m__flag{
  color:#1A3EA8;
  background:rgba(37,99,235,.10);
}
[data-theme="clair"] .cflow__nav{
  color:#0B1220;
  background:rgba(11,18,32,.06);
  border-color:rgba(11,18,32,.14);
}

/* ── 3. L'image d'horizon du bloc « Prêt à construire ? » ne rentre plus
      dans le thème clair — retirée (demande Théo). ── */
[data-theme="clair"] .cta-final__bg{ display:none }
[data-theme="clair"] .cta-final{
  background:#F2F4F8;
  border-top:1px solid rgba(11,18,32,.08);
}

/* ============================================================
   COCKPIT — retour Théo du 20/08 : « le fond doit être blanc,
   et le visuel des agents doit ressortir avec un effet glossy
   bleu ombragé 3D ».
   ============================================================ */

/* ── Le fond blanc. Le coupable était .cockpit__bg::after :
      un dégradé qui descendait jusqu'à rgba(7,10,15,.72) sur 1562 px
      de haut, par-dessus toute la section. Neutralisé. ── */
[data-theme="clair"] .cockpit{
  background:#FFFFFF;
  background-image:none;
}
[data-theme="clair"] .cockpit__bg,
[data-theme="clair"] .cockpit__bg::before,
[data-theme="clair"] .cockpit__bg::after{
  display:none;
  background:none;
}

/* ── Le visuel : verre bleuté posé, relief par l'ombre portée.
      Le 3D vient de trois choses — un dégradé qui descend,
      un liseré clair en haut (la lumière qui accroche l'arête),
      et une ombre bleue longue et diffuse en dessous. ── */
[data-theme="clair"] .cpv{
  background:linear-gradient(162deg,#FFFFFF 0%,#F5F9FF 42%,#E9F1FF 100%);
  border:1px solid rgba(37,99,235,.20);
  border-radius:30px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(37,99,235,.08),
    0 2px 6px rgba(11,18,32,.05),
    0 14px 30px rgba(37,99,235,.15),
    0 38px 76px rgba(37,99,235,.18);
  position:relative;
  overflow:hidden;
}
/* Le reflet glossy : une bande lumineuse en haut, très douce. */
[data-theme="clair"] .cpv::after{
  content:'';
  position:absolute; inset:0 0 auto 0; height:42%;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));
  pointer-events:none;
  border-radius:30px 30px 0 0;
}
[data-theme="clair"] .cpv > *{ position:relative; z-index:1 }

/* La barre de titre du visuel */
[data-theme="clair"] .cpv__bar{
  border-bottom:1px solid rgba(37,99,235,.14);
}
/* Marco, le manager : la carte mise en avant */
[data-theme="clair"] .cpv__boss{
  background:linear-gradient(160deg,#EAF2FF,#DCE9FF);
  border:1px solid rgba(37,99,235,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 6px 16px rgba(37,99,235,.14);
}
/* Les cartes d'agent : verre blanc légèrement bombé */
[data-theme="clair"] .agv{
  background:linear-gradient(160deg,#FFFFFF,#F4F8FF);
  border:1px solid rgba(37,99,235,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 3px 8px rgba(11,18,32,.05);
}
/* Le séparateur vertical entre les deux colonnes */
[data-theme="clair"] .cpv__cols::before{
  background:rgba(37,99,235,.20);
}

/* ── La colonne 01→04 : elle se noyait dans le calque sombre. ── */
[data-theme="clair"] .cstep{
  background:linear-gradient(160deg,#FFFFFF,#F6FAFF);
  border:1px solid rgba(37,99,235,.12);
  box-shadow:0 2px 8px rgba(11,18,32,.04);
}
[data-theme="clair"] .cstep.is-active{
  background:linear-gradient(160deg,#EEF5FF,#DFEBFF);
  border-color:rgba(37,99,235,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 22px rgba(37,99,235,.15);
}
[data-theme="clair"] .cstep__k{ color:#2C63D6 }
[data-theme="clair"] .cstep__b{ color:#0B1220 }
[data-theme="clair"] .cstep p,
[data-theme="clair"] .cstep div:not([class]){ color:#4A5260 }

/* ============================================================
   ÉTAPE 3c — les 7 autres pages (20/08/2026)
   Correctifs par FAMILLE de composants, pas page par page :
   les mêmes classes servent partout, une règle vaut pour toutes.
   ============================================================ */

/* ── Tableau comparatif (missions) ──
   Le ✓ était en rgb(74,222,128), un vert calibré pour l'obsidian :
   1,68:1 sur blanc, illisible. Vert soutenu, et le tiret « non inclus »
   reste discret mais visible. */
[data-theme="clair"] .yes{ color:#15803D }
[data-theme="clair"] .no{ color:rgba(74,82,96,.62) }
[data-theme="clair"] .is-hot{ background:rgba(37,99,235,.10) }
[data-theme="clair"] th.is-hot, [data-theme="clair"] td.is-hot{ color:#0B1220 }
[data-theme="clair"] .cmp th, [data-theme="clair"] table th{ color:#0B1220 }
[data-theme="clair"] table tr{ border-color:rgba(11,18,32,.10) }

/* ── Cartes de prix, FAQ, choix du devis ── */
[data-theme="clair"] .price-card,
[data-theme="clair"] .faq-item,
[data-theme="clair"] .choice,
[data-theme="clair"] .dv-step,
[data-theme="clair"] .alt-card,
[data-theme="clair"] .reco-card{
  background:#FFFFFF;
  border-color:rgba(11,18,32,.11);
  box-shadow:0 2px 8px rgba(11,18,32,.05);
}
[data-theme="clair"] .price-card.is-sel,
[data-theme="clair"] .choice.is-sel,
[data-theme="clair"] .choice:hover{
  background:linear-gradient(160deg,#F4F9FF,#E9F1FF);
  border-color:rgba(37,99,235,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 22px rgba(37,99,235,.13);
}

/* ── Cartes de réalisations : la vignette est un fond sombre volontaire,
      elle encadre des captures de sites majoritairement sombres.
      On la garde, mais on la pose dans une carte claire. ── */
[data-theme="clair"] .r3card,
[data-theme="clair"] .rea-card,
[data-theme="clair"] .card{
  background:#FFFFFF;
  border:1px solid rgba(11,18,32,.10);
  box-shadow:0 4px 14px rgba(11,18,32,.06);
}
[data-theme="clair"] .r3card__photo,
[data-theme="clair"] .card__media{ border-radius:14px }

/* ── Formulaires (contact, audit, devis) ── */
[data-theme="clair"] input,
[data-theme="clair"] textarea,
[data-theme="clair"] select{
  background:#FFFFFF;
  border:1px solid rgba(11,18,32,.16);
  color:#0B1220;
}
[data-theme="clair"] input::placeholder,
[data-theme="clair"] textarea::placeholder{ color:rgba(74,82,96,.6) }
[data-theme="clair"] input:focus,
[data-theme="clair"] textarea:focus,
[data-theme="clair"] select:focus{
  border-color:rgba(37,99,235,.45);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

/* ── Boutons secondaires : sur fond clair, un bouton « fantôme »
      blanc sur blanc n'existe plus. On lui donne un contour. ── */
[data-theme="clair"] .btn--ghost,
[data-theme="clair"] .btn--outline{
  background:#FFFFFF;
  border:1px solid rgba(11,18,32,.16);
  color:#0B1220;
}
[data-theme="clair"] .btn--ghost:hover,
[data-theme="clair"] .btn--outline:hover{
  border-color:rgba(37,99,235,.4);
  background:#F6FAFF;
}

/* ── Journal : les cartes d'article ── */
[data-theme="clair"] .jcard,
[data-theme="clair"] .journal-card,
[data-theme="clair"] .jempty{
  background:#FFFFFF;
  border:1px solid rgba(11,18,32,.10);
  box-shadow:0 3px 12px rgba(11,18,32,.05);
}

/* ── Blocs légaux (mentions) ── */
[data-theme="clair"] .legal__section{ border-color:rgba(11,18,32,.10) }
[data-theme="clair"] .legal__section h2{ color:#0B1220 }
[data-theme="clair"] .legal__section p,
[data-theme="clair"] .legal__section li{ color:#3B4352 }

/* ── Derniers correctifs 3c, issus de l'audit iframe des 7 pages ── */

/* En-têtes du tableau comparatif : fond sombre hérité, ils deviennent clairs. */
[data-theme="clair"] table.cmp th{
  background:#F2F5FA;
  color:#0B1220;
  border-bottom:1px solid rgba(11,18,32,.12);
}
[data-theme="clair"] table.cmp thead th{ background:#EDF2FA }

/* Épingles du globe : le globe RESTE sombre, donc leur texte reste clair. */
[data-theme="clair"] .gpin,
[data-theme="clair"] .gpin b{ color:#F5F5F7 }

/* Listes déroulantes : le <option> est peint par le système, il faut
   lui redonner explicitement fond et encre. */
[data-theme="clair"] select.form__select,
[data-theme="clair"] select.form__select option{
  background:#FFFFFF;
  color:#0B1220;
}

/* Boutons pleins des cartes : fond sombre volontaire, texte blanc. */
[data-theme="clair"] .m__cta .btn,
[data-theme="clair"] .m__cta a.btn{ color:#fff; --ink-hi:#fff }

/* ── Parcours de devis ── */
/* Le compteur de pages : ses boutons étaient blancs sur blanc. */
[data-theme="clair"] .q4-count__btn{
  background:#FFFFFF;
  color:#0B1220;
  border:1px solid rgba(11,18,32,.18);
}
[data-theme="clair"] .q4-count__btn:hover{ border-color:rgba(37,99,235,.4); background:#F6FAFF }

/* La note « 5,0 » de la preuve en ligne : blanche sur blanc. */
[data-theme="clair"] .proof-inline__note{ color:#0B1220 }
/* Les étoiles : l'ambre clair tombait à 2,15:1. */
[data-theme="clair"] .proof-inline__stars{ color:#B45309 }

/* Comparatif avant/après et ancrage de valeur : les verts et rouges
   étaient calibrés pour du sombre, ils passent en versions soutenues. */
[data-theme="clair"] .ba-card--after .ba-card__label{ color:#15803D }
[data-theme="clair"] .ba-card--before .ba-card__label{ color:#B91C1C }
[data-theme="clair"] .value-anchor__saving{ color:#15803D }
[data-theme="clair"] .err-msg{ color:#B91C1C }

/* Écran de confirmation du devis : la ligne de récapitulatif portait
   une couleur écrite en dur dans le style inline de la page (héritage V2),
   hors du token --rgb-alu. Dernier point de l'audit 3c. */
[data-theme="clair"] .done-screen p,
[data-theme="clair"] .done-screen p span{ color:#4A5260 }

/* ============================================================
   Retours Théo — 2e passe sur l'accueil (20/08/2026)
   ============================================================ */

/* ── 1. Pas de dégradé de couture entre le hero et les chiffres.
      Essayé le 20/08 puis RETIRÉ : Théo n'en voulait pas. La jonction se
      fait franchement, le hero sombre s'arrête et le blanc commence.
      Ne pas le réintroduire. ── */
[data-theme="clair"] .stats{ background:#FBFBFB; }


/* ── 2. Le champ d'audit du hero : il est posé sur une image sombre,
      il doit donc rester sombre. Le thème clair l'avait blanchi. ── */
[data-theme="clair"] .hero .audit__box{
  background:rgba(7,10,15,.55);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
}
[data-theme="clair"] .hero .audit__box input,
[data-theme="clair"] .hero #auditUrl{
  background:transparent;
  border:none;
  color:#F5F5F7;
}
[data-theme="clair"] .hero .audit__box input::placeholder{ color:rgba(245,245,247,.55) }

/* Le bouton en verre, façon Apple : translucide, flouté, un liseré de
   lumière en haut et une ombre courte. Il laisse voir l'image dessous. */
[data-theme="clair"] .hero .audit__btn{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 6px 18px rgba(0,0,0,.22);
  transition:background .22s, border-color .22s, transform .18s;
}
[data-theme="clair"] .hero .audit__btn:hover{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.42);
  transform:translateY(-1px);
}

/* ── 3. Titres des étapes 01→04 en gras ── */
[data-theme="clair"] .cstep__b{ font-weight:700; color:#0B1220 }

/* ── 4. Bande « Ils font confiance » épurée : les filets haut et bas
      découpaient la page pour rien. On garde le titre et le défilé. ── */
[data-theme="clair"] .proof{
  border-top:none;
  border-bottom:none;
  background:transparent;
}

/* ============================================================
   PAGE MISSIONS — corrections du 20/08 (retours Théo)
   ⚠️ Ces trois bugs étaient INVISIBLES pour l'audit automatique :
   il ignorait tout ce qui a un dégradé, or le prix et le hero en ont un.
   Leçon retenue : un audit qui saute les dégradés rate les gros titres.
   ============================================================ */

/* ── 1. Le hero garde son fond sombre.
      Il était peint avec var(--obsidian), que le thème clair a fait passer
      à #FBFBFB — le fond a blanchi, l'encre est passée en sombre, et le
      titre est devenu invisible par-dessus l'image sombre. ── */
[data-theme="clair"] .page-hero--media{
  background:#070A0F;
  --ink-hi:#F5F5F7;
  --off-white:#F5F5F7;
  --rgb-inv:255,255,255;
  --rgb-alu:167,172,180;
}
[data-theme="clair"] .page-hero--media h1,
[data-theme="clair"] .page-hero--media .page-hero__sub,
[data-theme="clair"] .page-hero--media p{ color:#F5F5F7 }

/* ── 2. Les prix : ils sont peints par un dégradé découpé sur le texte
      (background-clip:text). Le dégradé allait du blanc au gris clair,
      donc invisible sur blanc. Il repart vers l'encre. ── */
[data-theme="clair"] .m__setupval,
[data-theme="clair"] .m__setupval--hero{
  background-image:linear-gradient(180deg,#0B1220 0%,#39424F 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

/* ── 3. Les puces « ✓ » perdent leur pastille ronde (demande Théo).
      On garde uniquement la coche, dessinée en bleu Atlas. ── */
[data-theme="clair"] .m__list li::before,
[data-theme="clair"] .incl__chip svg{ border-radius:0 }
[data-theme="clair"] .m__list li::before{
  background:none !important;
  border-radius:0;
  width:15px; height:15px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  background-color:#2563EB !important;
}

/* ============================================================
   Les standards en deux rubans qui défilent (20/08)
   Haut vers la droite, bas vers la gauche. Chips en verre façon Apple :
   translucide, flouté, liseré de lumière en haut, ombre courte.
   ============================================================ */
.incl-marquee{ display:grid; gap:14px; overflow:hidden; padding:4px 0 }
.incl-row{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
           mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) }
.incl-row__track{ display:flex; gap:14px; width:max-content; will-change:transform }
.incl-row--droite .incl-row__track{ animation:incl-droite 34s linear infinite }
.incl-row--gauche .incl-row__track{ animation:incl-gauche 38s linear infinite }
@keyframes incl-droite{ from{transform:translateX(-50%)} to{transform:translateX(0)} }
@keyframes incl-gauche{ from{transform:translateX(0)}   to{transform:translateX(-50%)} }
.incl-marquee:hover .incl-row__track{ animation-play-state:paused }

[data-theme="clair"] .incl-marquee .incl__chip{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:999px;
  white-space:nowrap;
  background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.62));
  border:1px solid rgba(11,18,32,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(11,18,32,.04), 0 8px 22px rgba(11,18,32,.06);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  color:#0B1220; font-size:.94rem; font-weight:500;
}
[data-theme="clair"] .incl-marquee .incl__chip svg{ color:#2563EB; flex:0 0 auto }

@media (prefers-reduced-motion:reduce){
  .incl-row__track{ animation:none !important }
  .incl-row{ overflow-x:auto }
}

/* ============================================================
   Retours Théo — page Cockpit et bande de confiance (20/08)
   ============================================================ */

/* ── MGA : son logo est un tracé sombre. Il portait is-mono, donc il passait
      en blanc — invisible depuis que la bande est claire. Filtre retiré côté
      HTML, et on l'agrandit : c'est un logo large, contraint par la largeur. ── */
.logo-mga{ transform:scale(1.28); transform-origin:center }

/* ── Le hero du Cockpit : les boutons collaient à la ligne des domaines ── */
[data-theme="clair"] .cpk-hero .hero__domains,
.cpk-hero .hero__domains{ margin-bottom:clamp(26px,3.2vw,40px) }
.cpk-hero .hero__buttons{ margin-top:clamp(30px,3.6vw,44px) }
.cpk-hero .cpk-proof{ margin-top:clamp(34px,4vw,52px) }

/* ── Les 3 preuves du hero : verre Apple, posé sur l'image sombre.
      Elles étaient des étiquettes plates qui se noyaient dans la photo. ── */
.cpk-hero .cpk-proof{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
}
.cpk-hero .cpk-proof > span{
  display:inline-flex; align-items:center; gap:7px;
  padding:12px 20px; border-radius:999px;
  background:linear-gradient(160deg,rgba(255,255,255,.17),rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 8px 24px rgba(0,0,0,.24);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  color:#F5F5F7; font-size:.92rem; font-weight:500; white-space:nowrap;
}
.cpk-hero .cpk-proof > span strong{ color:#fff; font-weight:700 }

/* ── Bandeau technique du bas : il portait DEUX contours concentriques,
      un sur le conteneur et un sur chaque étiquette. On n'en garde qu'un,
      en verre. ── */
[data-theme="clair"] .techstrip{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  background:none; border:none; box-shadow:none; padding:0;
}
[data-theme="clair"] .techstrip > span{
  display:inline-flex; align-items:center;
  padding:12px 22px; border-radius:999px;
  background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(255,255,255,.66));
  border:1px solid rgba(11,18,32,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 8px 22px rgba(11,18,32,.06);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  color:#0B1220; font-size:.94rem; font-weight:500;
}
[data-theme="clair"] .techstrip > span::before,
[data-theme="clair"] .techstrip > span::after,
[data-theme="clair"] .techstrip::before,
[data-theme="clair"] .techstrip::after{ display:none !important }

/* La section qui portait la phrase sur la mensualité se resserre. */
.page-cockpit .plans + *, .page-cockpit .cpk-plans{ margin-top:clamp(20px,2.4vw,30px) }

/* ============================================================
   Cockpit — ergonomie des cartes d'agent (20/08, retour Théo)
   Avant : l'emoji à gauche, puis nom / sous-titre / outils empilés
   à droite — trois lignes, et une grande zone vide sous l'emoji.
   Après : tout sur UNE ligne qui occupe la largeur, et le prompt
   en dessous, pleine largeur.
   ============================================================ */
.page-cockpit .agv{
  display:flex; align-items:center; gap:14px;
  flex-wrap:wrap;
}
.page-cockpit .agv__e{ flex:0 0 auto; font-size:1.35rem; line-height:1 }
.page-cockpit .agv__n{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.page-cockpit .agv__n b{ display:inline; font-size:1rem }
.page-cockpit .agv__n i{
  display:inline; font-style:normal;
  color:rgba(var(--rgb-alu),.95); font-size:.88rem;
}
.page-cockpit .agv__tools{
  flex:0 0 auto; margin-left:auto;
  display:inline-flex; align-items:center; gap:7px;
}
/* Le prompt passe sous la ligne, sur toute la largeur */
.page-cockpit .agv__say{ flex:1 0 100%; margin-top:10px }

@media(max-width:520px){
  .page-cockpit .agv__tools{ margin-left:0 }
  .page-cockpit .agv__n{ flex:1 1 100% }
}

/* ============================================================
   Retour Théo — la bande de confiance redevient bleu foncé (20/08)
   ⚠️ Elle avait viré au clair par ACCIDENT : ma règle d'épuration
   « [data-theme=clair] .proof { background:transparent } » écrasait
   la règle précédente sur .proof--warm, qui porte les deux classes.
   Ordre de cascade, pas décision de DA. Corrigé ci-dessous.
   L'épuration (plus de filets haut/bas) est conservée.
   ============================================================ */
[data-theme="clair"] .proof.proof--warm{
  background:#0B1320;
  border:none;
  border-radius:26px;
}
[data-theme="clair"] .proof.proof--warm,
[data-theme="clair"] .proof.proof--warm *{
  --rgb-inv:255,255,255;
  --ink-hi:#F5F5F7;
  --rgb-alu:167,172,180;
}
/* La bande claire « ils font confiance à nos clients » reste, elle, épurée. */
[data-theme="clair"] .proof:not(.proof--warm){
  background:transparent; border:none;
}

/* ============================================================
   Cockpit — les 3 preuves du hero (retour Théo, pj 2 et 3)
   🔴 Le vrai défaut : la règle d'origine cible « .cpk-proof span »,
   donc TOUS les spans descendants. Le span de traduction imbriqué
   dans « +25 cockpits construits » recevait donc une deuxième
   pastille À L'INTÉRIEUR de la première. D'où le cadre dans le cadre.
   On ne stylise plus que les enfants DIRECTS.
   ============================================================ */
.cpk-proof span span{
  background:none !important;
  border:none !important;
  padding:0 !important;
  border-radius:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  font-size:inherit !important;
  color:inherit !important;
}
.cpk-hero .cpk-proof > span{
  min-height:46px;
  padding:0 22px;
  font-size:.95rem;
  color:#FFFFFF;
  background:linear-gradient(160deg,rgba(255,255,255,.20),rgba(255,255,255,.09));
  border:1px solid rgba(255,255,255,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.40), 0 10px 28px rgba(0,0,0,.30);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.cpk-hero .cpk-proof > span strong{
  color:#fff; font-weight:800; margin-right:6px;
}

/* Les filtres du Journal passent de 4 à 11 thèmes : ils doivent respirer
   et se replier proprement au lieu de forcer une ligne. */
.jrn__cats{ flex-wrap:wrap; justify-content:center; gap:9px }
[data-theme="clair"] .jcat{
  background:#FFFFFF;
  border:1px solid rgba(11,18,32,.11);
  color:#3B4352;
  box-shadow:0 1px 2px rgba(11,18,32,.04);
}
[data-theme="clair"] .jcat.is-active{
  background:linear-gradient(160deg,#EEF5FF,#DFEBFF);
  border-color:rgba(37,99,235,.34);
  color:#0B1220;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 6px 16px rgba(37,99,235,.13);
}

/* ── Derniers points de l'audit complet du 20/08 ──
   Trois composants héritaient de couleurs calibrées pour l'obsidian :
   le bandeau d'urgence (ambre clair sur blanc), la citation client
   (gris très clair) et le message de confirmation du formulaire
   (vert pâle). Tous invisibles sur fond clair. */
[data-theme="clair"] .urgence-band{
  background:linear-gradient(160deg,#0B1320,#111C2E);
  border-radius:18px;
}
[data-theme="clair"] .urgence-band,
[data-theme="clair"] .urgence-band *{ color:#F5F5F7 }
[data-theme="clair"] .urgence-band__text span:first-child,
[data-theme="clair"] .urgence-band strong{ color:#FBBF24 }
[data-theme="clair"] .urgence-band__slots{ color:rgba(245,245,247,.72) }

[data-theme="clair"] .reco-quote blockquote,
[data-theme="clair"] .reco-quote blockquote span{ color:#2A3242 }
[data-theme="clair"] .reco-quote__ini{
  background:#0B1320; color:#fff;
}

[data-theme="clair"] .form__msg{ background:#0F2E1C; border-radius:14px }
[data-theme="clair"] .form__msg,
[data-theme="clair"] .form__msg *{ color:#D9F9E4 }

/* ============================================================
   Boutons — halo hérité du thème sombre (20/08, retour Théo)
   Le bloc « Prêt à construire ? » porte un ::before en dégradé
   radial flouté : sur obsidian c'était une lueur, sur blanc
   c'est une tache grise sous les boutons. Retiré.
   ============================================================ */
[data-theme="clair"] .cta-final::before,
[data-theme="clair"] .cta-final::after{ display:none }

/* L'ombre des boutons pleins contenait un liseré interne devenu
   SOMBRE avec l'inversion de --rgb-inv. On le remet en lumière. */
[data-theme="clair"] .btn--primary,
[data-theme="clair"] .btn--shine{
  box-shadow:0 10px 26px rgba(37,99,235,.28), inset 0 1px 0 rgba(255,255,255,.28);
}
[data-theme="clair"] .btn--primary:hover,
[data-theme="clair"] .btn--shine:hover{
  box-shadow:0 12px 30px rgba(37,99,235,.34), inset 0 1px 0 rgba(255,255,255,.34);
}
/* Le bouton secondaire en verre : sur fond clair il lui faut un contour. */
[data-theme="clair"] .btn--glass{
  background:#FFFFFF;
  border:1px solid rgba(11,18,32,.14);
  color:#0B1220;
  box-shadow:0 2px 8px rgba(11,18,32,.05);
}
[data-theme="clair"] .btn--glass:hover{
  border-color:rgba(37,99,235,.38);
  background:#F6FAFF;
}
/* Les lueurs de fond conçues pour l'obsidian s'éteignent sur clair. */
[data-theme="clair"] .hero__glow,
[data-theme="clair"] .pillar-card__glow{ opacity:.35 }

/* ============================================================
   TÉLÉPHONE — passe complète du 20/08 (retours Théo, un par un)
   Tout est scopé sous 760 px sauf mention contraire.
   ============================================================ */

/* ── Cockpit : le « bout de blanc » du header.
      Même cause que sur Missions : le hero était peint avec var(--obsidian),
      que le thème clair fait passer à #FBFBFB. Le fond a blanchi sous l'image. ── */
[data-theme="clair"] .cpk-hero{
  background:#070A0F;
  --ink-hi:#F5F5F7;
  --off-white:#F5F5F7;
  --rgb-inv:255,255,255;
  --rgb-alu:167,172,180;
}

/* ── Missions : header un cran plus clair (demande Théo) ── */
[data-theme="clair"] .page-hero--media{ background:#131A26 }

/* ── Tableau comparatif : la première colonne était figée (sticky),
      donc elle restait collée pendant qu'on faisait glisser. On la libère :
      tout défile ensemble. ── */
[data-theme="clair"] table.cmp th[scope="row"]{
  position:static;
  left:auto;
}

/* ── Cockpit : le compteur « 5 » à côté du chevron était écrasé
      (23 px de large pour une police de 18). ── */
.cpv__count{
  min-width:30px; height:24px;
  display:inline-flex !important; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:700; line-height:1;
  padding:0 8px; border-radius:999px;
}
/* Coach Pro et Coach Perso : mêmes tailles des deux côtés. */
.cpv__br b, .cpv__br strong, .cpv__br h3, .cpv__br h4,
.cpv__boss-n b{ font-size:1rem; line-height:1.25 }
.cpv__br i{ font-size:.84rem }

@media (max-width:760px){

  /* 1. En-tête : on resserre pour que rien ne se touche. */
  .header__inner{ padding:0 10px 0 14px; gap:8px }
  .logo__text{ font-size:.86rem; letter-spacing:.06em }
  .logo__icon img{ width:28px; height:28px }

  /* 2. Les 4 chiffres : UNE seule ligne qui défile en boucle.
        Ils s'empilaient sur 4 lignes et mangeaient un écran entier. */
  .stats{ overflow:hidden }
  .page-home .stats__grid,
  .stats__grid{
    display:flex !important;
    grid-template-columns:none !important;
    width:max-content;
    gap:38px;
    align-items:flex-start;
    animation:stats-defile 26s linear infinite;
  }
  .stats__grid .stat{ flex:0 0 auto; min-width:196px }
  .stats__grid .stat__lab{ max-width:196px }
  .stats:hover .stats__grid{ animation-play-state:paused }
  /* Le compteur qui tourne s'arrête sur téléphone : sans survol,
     il n'a aucun moyen d'être arrêté par le visiteur. */
  .stat--roll .stat__hint{ display:none }

  /* 3. Bande de confiance : plus rapide, sans trou. */
  .proof__track{ animation-duration:20s !important; gap:18px !important }
  .proof{ padding-top:0 }

  /* 4. « Deux systèmes » : les deux piliers côte à côte, en glissement,
        au lieu d'être empilés l'un sous l'autre. */
  .pillars .container > div:has(.pillar-card),
  .pillars__grid{
    display:flex !important;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
    scrollbar-width:none;
  }
  .pillars .container > div:has(.pillar-card)::-webkit-scrollbar,
  .pillars__grid::-webkit-scrollbar{ display:none }
  .pillar-card{ flex:0 0 88%; scroll-snap-align:center } /* 84 → 88 % : rend au visuel la largeur qui lui manquait (21/08) */

  /* 5. Témoignages : la première carte passait SOUS la flèche de gauche. */
  #tTrack{ padding-left:44px; padding-right:44px }

  /* 6. Méthode : la première étape est recentrée. */
  #pTrack{ padding-left:24px; padding-right:24px }
  #pTrack > *{ scroll-snap-align:center }
}

@keyframes stats-defile{
  from{ transform:translateX(0) }
  to{ transform:translateX(-50%) }
}

/* Le compteur du Cockpit : la regle plus haut se faisait battre en
   specificite par le CSS d'origine. On monte d'un cran, sans !important
   sur la police pour rester surchargeable. */
[data-theme="clair"] .cpv__br .cpv__count,
[data-theme="clair"] .cpv__count{
  font-size:.8rem;
  min-width:30px; height:24px;
  padding:0 8px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1; font-weight:700;
}

/* ============================================================
   🔴 Correctif du 20/08 — les boutons de verre du hero
   Ma regle « [data-theme=clair] .btn--glass { background:#FFF } »
   visait les boutons poses sur le CORPS de page, devenu clair.
   Elle attrapait aussi ceux du HERO, qui sont sur une image sombre :
   ils devenaient deux carres blancs ecrases, texte illisible.
   Le hero et le hero du Cockpit reprennent leur verre translucide.
   Lecon : toute regle sur .btn--glass doit exclure les zones sombres.
   ============================================================ */
[data-theme="clair"] .hero .btn--glass,
[data-theme="clair"] .cpk-hero .btn--glass,
[data-theme="clair"] .page-hero--media .btn--glass{
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.26);
  color:#fff;
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 6px 18px rgba(0,0,0,.22);
}
[data-theme="clair"] .hero .btn--glass:hover,
[data-theme="clair"] .cpk-hero .btn--glass:hover,
[data-theme="clair"] .page-hero--media .btn--glass:hover{
  background:rgba(255,255,255,.21);
  border-color:rgba(255,255,255,.40);
}
/* Ils ne doivent jamais s'ecraser : le libelle tient sur une ligne. */
[data-theme="clair"] .hero .btn--glass,
[data-theme="clair"] .cpk-hero .btn--glass{ white-space:nowrap }
@media(max-width:420px){
  [data-theme="clair"] .hero .btn--glass,
  [data-theme="clair"] .cpk-hero .btn--glass{ white-space:normal; min-width:150px }
}

/* ============================================================
   🔴 CORRECTIF — les deux « carres » du hero sur telephone
   Ce n'etait PAS un defaut d'affichage : v3.css:767 pose
   « .hero__buttons .btn span{opacity:0} » avec le commentaire
   « le libelle est dans l'image ». Sous 760 px, les deux boutons
   du hero sont des ZONES CLIQUABLES INVISIBLES, placees en absolu
   par-dessus l'image ou « ATLAS COCKPIT » et « MISSIONS WEB »
   sont deja dessines.
   Mon habillage .btn--glass leur a donne fond, bordure et flou :
   les zones invisibles sont devenues deux carres verts.
   On rend leur transparence a ces deux-la, et a eux seuls.
   ============================================================ */
@media (max-width:760px){
  [data-theme="clair"] .hero .hero__buttons .btn,
  [data-theme="clair"] .hero .hero__buttons .btn--glass{
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  /* le bouton d'appel plein, lui, reste bien visible */
  [data-theme="clair"] .hero .hero__buttons a.hero__cta-mobile{
    background:rgba(255,255,255,.16) !important;
    border:1px solid rgba(255,255,255,.28) !important;
    backdrop-filter:saturate(180%) blur(16px) !important;
    -webkit-backdrop-filter:saturate(180%) blur(16px) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 6px 18px rgba(0,0,0,.24) !important;
  }
}

/* ── Missions : header nettement plus clair (2e demande Théo).
      #131A26 restait trop proche de l'obsidian pour se voir. ── */
[data-theme="clair"] .page-hero--media{ background:#212C3E }

/* ============================================================
   Retours Théo — 20/08, dernière passe
   ============================================================ */

/* ── 1. Missions : on veut VOIR l'image derrière le header.
      Le voile d'origine montait à .94 en haut et .86 en bas : l'image
      était quasi noyée. On l'allège nettement, en gardant assez d'ombre
      pour que le titre blanc reste lisible. ── */
[data-theme="clair"] .page-hero--media .page-hero__veil{
  background:
    linear-gradient(180deg,rgba(7,10,15,.62) 0%,rgba(7,10,15,.40) 45%,rgba(7,10,15,.22) 72%,rgba(7,10,15,.58) 100%),
    radial-gradient(ellipse 900px 520px at 60% 0%,rgba(37,99,235,.14),transparent 62%);
}
@media (max-width:760px){
  [data-theme="clair"] .page-hero--media .page-hero__veil{
    background:linear-gradient(180deg,rgba(7,10,15,.70) 0%,rgba(7,10,15,.52) 55%,rgba(7,10,15,.66) 100%);
  }
}

/* ── 2. Cockpit : les libellés des 3 preuves bien au centre de leur pastille ── */
[data-theme="clair"] .cpk-hero .cpk-proof > span{
  justify-content:center;
  text-align:center;
  gap:8px;
}
/* ⚠️ NE JAMAIS remettre « display:inline !important » ici (essaye le 20/08).
   Cette regle est plus specifique que « html[lang="fr"] [data-i18n-en]
   {display:none!important} » de style.css : elle RALLUMAIT la traduction
   anglaise, et la pastille affichait « cockpits construits cockpits built ».
   Le centrage vient de justify-content ci-dessus, pas du display. */
[data-theme="clair"] .cpk-hero .cpk-proof > span > span{
  line-height:1.2;
}

/* ── Cockpit sur telephone : les 3 preuves debordaient de leur pastille.
      Le texte le plus long (« Aucune competence technique requise ») faisait
      ~340 px, plus 44 px de padding : au-dela des 390 px de l'ecran.
      On reduit, on autorise le retour a la ligne, on borne la largeur. ── */
@media (max-width:760px){
  .cpk-hero .cpk-proof{
    gap:8px;
    padding:0 14px;
    width:100%;
  }
  [data-theme="clair"] .cpk-hero .cpk-proof > span,
  .cpk-hero .cpk-proof > span{
    max-width:100%;
    padding:9px 16px;
    font-size:.82rem;
    line-height:1.25;
    min-height:0;
    white-space:normal;
    text-align:center;
    box-sizing:border-box;
  }
}

/* ── 3. La bande de chiffres sur téléphone : plus resserrée, plus petite,
      et elle défile VERS LA DROITE à la vitesse de la bande de logos (20 s). ── */
@media (max-width:760px){
  .page-home .stats__grid,
  .stats__grid{
    gap:22px;
    animation:stats-defile-droite 20s linear infinite !important;
  }
  .stats__grid .stat{ min-width:148px }
  .stats__grid .stat__lab{ max-width:148px; font-size:.74rem; line-height:1.35; margin-top:6px }
  .stats__grid .stat__val{ font-size:1.72rem }
  .stats__grid .stat__sign{ font-size:.62em }
  .stats__note{ font-size:.68rem; margin-top:10px }
}
@keyframes stats-defile-droite{
  from{ transform:translateX(-50%) }
  to{ transform:translateX(0) }
}


/* ============================================================
   Bloc de verre des cartes piliers — thème clair (21/08/2026)
   --rgb-inv vaut 11,18,32 en clair : peindre du verre avec cette
   variable donnait une surface sombre sur fond clair, texte gris
   sur gris. Le verre se peint donc en valeurs explicites ici.
   ============================================================ */
[data-theme="clair"] .pillar-card__tags{
  background:rgba(255,255,255,.58);
  border-color:rgba(255,255,255,.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(11,18,32,.045),
    0 1px 2px rgba(11,18,32,.045),
    0 8px 24px -12px rgba(11,18,32,.22);
}
[data-theme="clair"] .pillar-card__tags span{ color:#3A4351 }
[data-theme="clair"] .pillar-card:hover .pillar-card__tags{
  border-color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 12px 30px -14px rgba(37,99,235,.32);
}
@supports not (backdrop-filter:blur(2px)){
  [data-theme="clair"] .pillar-card__tags{background:rgba(255,255,255,.9)}
}


/* ============================================================
   Cartes piliers — finitions du 21/08/2026
   ============================================================ */

/* 1 · Badge en verre blanc plutôt qu'en bleu teinté.
      Même matière que le bloc d'entrées : les deux se répondent. */
[data-theme="clair"] .pillar-card__badge-3d{
  background:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.9);
  color:#2B3442;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(11,18,32,.05),
    0 1px 2px rgba(11,18,32,.05),
    0 6px 20px -8px rgba(11,18,32,.2);
}
[data-theme="clair"] .pillar-card__badge-3d::before{
  background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);
}
[data-theme="clair"] .pillar-card:hover .pillar-card__badge-3d{
  border-color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 10px 26px -10px rgba(37,99,235,.28);
}

/* 2 · Les deux titres alignés.
      Le bloc d'entrées du Cockpit tient sur trois lignes, celui des
      Missions sur deux : sans égalisation, les titres se décalent.
      Un plancher fixe ne suffit pas — le nombre de lignes change avec
      la largeur — donc la hauteur est égalisée par script (voir index).
      Ici on se contente d'ancrer le contenu en haut du bloc. */
@media (min-width:901px){
  .pillar-card__tags{ align-content:flex-start }
}

/* 3 · Téléphone : la première carte est centrée et une flèche fait glisser
      vers la seconde, puis repasse à gauche pour revenir.
      Le bouton est en position:fixed et hors du flux du carrousel :
      il ne capte donc jamais le défilement vertical de la page. */
@media (max-width:900px){
  .pillars{ position:relative }
  .pillars__grid{
    scroll-padding-left:0;
    padding-left:6%; padding-right:6%;   /* la carte tombe au centre */
  }
  .pillar-card{ flex:0 0 88%; scroll-snap-align:center }

  .pcar-nav{
    position:absolute;
    top:var(--pcar-y,50%);
    transform:translateY(-50%);
    z-index:6;
    width:46px;height:46px;border-radius:50%;
    display:grid;place-items:center;
    border:1px solid rgba(255,255,255,.9);
    background:rgba(255,255,255,.62);
    -webkit-backdrop-filter:saturate(180%) blur(16px);
    backdrop-filter:saturate(180%) blur(16px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 2px 6px rgba(11,18,32,.1),
      0 12px 30px -12px rgba(11,18,32,.34);
    cursor:pointer;
    transition:opacity .22s ease, left .28s cubic-bezier(.4,0,.2,1), right .28s cubic-bezier(.4,0,.2,1);
    -webkit-tap-highlight-color:transparent;
  }
  .pcar-nav svg{ width:19px;height:19px;color:#2B3442 }
  .pcar-nav[hidden]{ display:none }
  .pcar-nav--next{ right:8px; left:auto }
  .pcar-nav--prev{ left:8px; right:auto }
  .pcar-nav:active{ transform:translateY(-50%) scale(.94) }
  @media (prefers-reduced-motion:reduce){ .pcar-nav{ transition:none } }
}
@media (min-width:901px){ .pcar-nav{ display:none } }