/* ══════════════════════════════════════════════════════════════════════
   DevenirTaxiVTC — gabarit des pages de contenu.

   Distinct des pages d'atterrissage : ici on lit en continu, pas on scanne.
   Colonne unique de 68 caractères, corps à 18 px, et un bloc « source »
   qui doit rester visible — c'est le seul avantage structurel du site.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* Échelle typographique, unifiée le 26 août 2026.
     Toute nouvelle règle pioche ici. Ajouter une valeur hors de
     cette liste, c'est recommencer les vingt-six d'avant. */
  --t1:12px; --t2:13px; --t3:14px; --t4:15px; --t5:16px; --t6:17px; --t7:18px; --t8:20px; --t9:21px; --t10:26px; --t11:30px; --n1:38px; --n2:40px; --n3:46px; --n4:60px; --n5:88px;

  --nuit:#0B0D12; --nuit-2:#141821; --bord:#252C3A;
  /* --ambre-f et --rouge ont été assombris le 22 août 2026 pour atteindre
     le rapport de contraste 4,5:1 exigé par le WCAG niveau AA :
     l'ambre plafonnait à 3,06 sur fond papier, et le bandeau du décret —
     texte blanc sur rouge, présent sur toutes les pages — à 3,91.
     Assombrissement minimal : 20 % pour l'ambre, 8 % pour le rouge. */
  --ambre:#FFB020; --ambre-f:#966000; --ambre-pale:#FFF6E6;
  --cyan:#3FC8E4; --rouge:#D34247; --rouge-pale:#FEF1F1;
  --papier:#F7F8FA; --blanc:#FFFFFF;
  --encre:#12151C; --encre-2:#333B48; --gris:#6B7280; --gris-c:#8A92A2;
  --filet:#DEE2E8; --filet-p:#EAEDF1;
  --display:'Archivo Black','Arial Black',sans-serif;
  --titre:'Archivo',system-ui,sans-serif;
  --corps:'Inter',system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--corps);color:var(--encre);background:var(--papier);
  font-size:var(--t7);line-height:1.68;-webkit-font-smoothing:antialiased}
a{color:var(--ambre-f);text-underline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.col{max-width:720px}

/* ── Bandeau et en-tête, identiques au reste du site ────────────────── */
.alerte{background:var(--rouge);color:#fff;font-size:var(--t3);font-weight:600;
  text-align:center;padding:9px 24px;line-height:1.4}
.alerte a{color:#fff}
header{background:var(--nuit);border-bottom:1px solid var(--bord)}
header .wrap{display:flex;align-items:center;gap:22px;
  padding-top:14px;padding-bottom:14px}
.logo{font-family:var(--display);font-size:var(--t7);color:#fff;letter-spacing:-.02em;
  text-decoration:none;margin-right:auto}
.logo em{font-style:normal;color:var(--ambre)}
nav{display:flex;gap:22px}
/* LE MENU DOIT POUVOIR RÉTRÉCIR, à toutes les largeurs.
   Sans `min-width:0`, un conteneur flex refuse de descendre sous la taille
   de son contenu : les neuf onglets poussaient alors le bouton « Guide
   gratuit » hors de l'écran, et TOUTE la page défilait horizontalement.
   Mesuré le 3 septembre 2026 à 1265 px — une largeur d'ordinateur
   portable courante, donc pas un cas limite.
   Avec ces deux lignes, le menu se comprime et défile en interne ; la page,
   elle, ne défile jamais. La barre de défilement est masquée : elle
   traverserait le filet de l'en-tête. */
header nav{min-width:0;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
header nav::-webkit-scrollbar{display:none}
/* Neuf onglets ne tiennent pas dans les 1120 px du corps de page : il
   manquait 201 px, et les derniers étaient coupés — dont « Le Manuel »,
   c'est-à-dire le seul lien qui vende. Un menu qui cache la page de vente
   sur un écran de 1425 px n'est pas un menu.
   L'en-tête est donc élargi à 1320 px, LUI SEUL : le corps des articles
   reste à 1120, largeur choisie pour la longueur de ligne. Un bandeau plus
   large que le texte qu'il surplombe est un parti pris courant, et c'est le
   seul moyen de tout montrer sans raccourcir les libellés jusqu'à les
   rendre ambigus (« VTC » et « Devenir VTC » ne se distinguent plus).
   L'écart passe de 22 à 16 px : 48 px regagnés, sans toucher au corps du
   texte. */
header .wrap{max-width:1320px}
header nav{gap:16px}
nav a{font-family:var(--titre);font-weight:600;font-size:var(--t4);color:#B9C0CC;
  text-decoration:none;white-space:nowrap}
nav a:hover{color:var(--ambre)}
.btn{display:inline-block;font-family:var(--titre);font-weight:700;font-size:var(--t4);
  padding:12px 22px;border-radius:2px;text-decoration:none;border:2px solid transparent;
  transition:background .12s ease;white-space:nowrap}
.btn-1{background:var(--ambre);color:#241800}
.btn-1:hover{background:#FFC24D}
.btn-2{border-color:var(--ambre-f);color:var(--ambre-f)}
.btn-2:hover{background:var(--ambre-pale)}
.btn:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

/* ── Fil d'Ariane ───────────────────────────────────────────────────── */
.fil{background:var(--blanc);border-bottom:1px solid var(--filet);
  font-size:var(--t3);padding:14px 0;color:var(--gris)}
.fil a{color:var(--gris);text-decoration:none}
.fil a:hover{color:var(--ambre-f);text-decoration:underline}
/* Le chevron du fil d'Ariane était à 1,30:1 sur les soixante pages : la
   couleur d'un trait de séparation, posée sur un caractère que les
   lecteurs d'écran annoncent. */
.fil span{margin:0 8px;color:var(--gris)}

/* ── Titre de page ──────────────────────────────────────────────────── */
.tete{background:var(--blanc);padding:52px 0 44px;border-bottom:1px solid var(--filet)}
.etiq{display:inline-block;font-family:var(--titre);font-weight:700;font-size:var(--t1);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ambre-f);
  border-bottom:2px solid var(--ambre);padding-bottom:6px;margin-bottom:22px}
h1{font-family:var(--display);font-size:clamp(32px,5vw,52px);line-height:1.02;
  letter-spacing:-.035em;margin-bottom:20px;max-width:18ch;text-wrap:balance}
h1 em{font-style:normal;color:var(--ambre-f)}
.chapeau{font-size:var(--t9);line-height:1.5;color:var(--encre-2);max-width:64ch}
.chapeau b{color:var(--encre);font-weight:600}
.date-verif{font-family:var(--titre);font-size:var(--t2);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-top:26px;
  padding-top:18px;border-top:1px solid var(--filet-p)}
.date-verif b{color:var(--ambre-f)}
/* Mention d'auteur, ajoutée le 24 août 2026. Séparée par une puce pour
   qu'elle ne se confonde pas avec la date, et cliquable vers les mentions
   légales — c'est là que se trouve l'information complète. */
.date-verif .par{color:var(--gris)}
/* La puce etait a 1,30:1 : la couleur d un filet posee sur un caractere.
   Meme defaut que le chevron du fil d Ariane, corrige le meme jour sans que
   son jumeau soit vu — l audit ne mesure pas les pseudo-elements, qui
   n existent pas dans le DOM. */
.date-verif .par::before{content:'·';margin:0 8px;color:var(--gris)}
.date-verif .par a{color:var(--encre-2);text-decoration:none;border-bottom:1px solid var(--filet)}
.date-verif .par a:hover,.date-verif .par a:focus{color:var(--ambre-f);border-color:var(--ambre-f)}

/* ── Corps ──────────────────────────────────────────────────────────── */
article{padding:52px 0 72px}
article h2{font-family:var(--display);font-size:clamp(24px,3.4vw,32px);
  line-height:1.12;letter-spacing:-.028em;margin:48px 0 16px;max-width:22ch;
  text-wrap:balance}
article h2:first-child{margin-top:0}
article h2 em{font-style:normal;color:var(--ambre-f)}
article h3{font-family:var(--titre);font-weight:800;font-size:var(--t8);
  letter-spacing:-.01em;margin:32px 0 10px}
article p{margin-bottom:18px;max-width:68ch}
article p b{font-weight:600;color:var(--encre)}
article ul,article ol{margin:0 0 18px 0;padding-left:24px;max-width:66ch}
article li{margin-bottom:9px}
article li b{font-weight:600;color:var(--encre)}

/* ── Bloc source : la signature du site ─────────────────────────────── */
.source{background:var(--blanc);border:1px solid var(--filet);
  border-left:4px solid var(--ambre);padding:24px 26px;margin:28px 0;max-width:68ch}
.source .t{font-family:var(--titre);font-weight:800;font-size:var(--t1);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ambre-f);margin-bottom:12px}
.source .cit{font-size:var(--t7);line-height:1.55;color:var(--encre);
  border-left:2px solid var(--filet);padding-left:18px;margin-bottom:14px;
  font-style:italic}
.source .ref{font-size:var(--t3);line-height:1.55;color:var(--gris);
  border-top:1px solid var(--filet-p);padding-top:12px}
.source .ref b{color:var(--encre-2);font-weight:600}
.source .ref a{color:var(--ambre-f)}

/* ── Encadré d'alerte ───────────────────────────────────────────────── */
.encadre{background:var(--ambre-pale);border:1px solid rgba(255,176,32,.45);
  padding:24px 26px;margin:28px 0;max-width:68ch}
.encadre .t{font-family:var(--titre);font-weight:800;font-size:var(--t6);
  margin-bottom:9px;color:#3A2E00}
.encadre p{color:#4A3B18;margin-bottom:10px}
.encadre p:last-child{margin-bottom:0}
.encadre b{color:#2E2409}
.encadre.rouge{background:var(--rouge-pale);border-color:rgba(229,72,77,.4)}
.encadre.rouge .t{color:#8A1F22}
.encadre.rouge p{color:#6B2326}
.encadre.rouge b{color:#4A1618}

/* ── Réponse courte, en tête d'article ──────────────────────────────── */
.reponse{background:var(--nuit);color:#EDEFF3;padding:28px 30px;margin:0 0 34px;
  border-left:4px solid var(--ambre);max-width:68ch}
.reponse .t{font-family:var(--titre);font-weight:800;font-size:var(--t1);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ambre);margin-bottom:11px}
.reponse p{font-size:var(--t8);line-height:1.5;color:#EDEFF3;margin:0;max-width:none}
.reponse p b{color:#fff}

/* ── Illustrations ──────────────────────────────────────────────────── */
/* Ajouté le 24 août 2026. Le site n'avait aucune balise <img> : le seul
   visuel était un fond CSS, invisible pour Google Images et sans texte
   alternatif. Les attributs width et height sont obligatoires ici — sans
   eux le navigateur ne réserve pas la place et la page saute au chargement
   de la photo, ce que mesure le Cumulative Layout Shift. */
figure{margin:0 0 34px;max-width:68ch}
/* Le <picture> sert deux versions du schema : la large a cote des barres,
   l etroite empilee sous 700 px. Sans display:block sur le picture lui-meme,
   le width:100% de l img porte sur un conteneur en ligne et la figure se
   decale de quelques pixels. */
figure picture{display:block}
figure img{display:block;width:100%;height:auto;background:var(--filet-p)}
figcaption{font-size:var(--t4);line-height:1.55;color:var(--encre-2);
  padding:12px 0 0;border-bottom:1px solid var(--filet)}
figcaption b{color:var(--encre)}

/* ── Pages liées ────────────────────────────────────────────────────── */
.liees{background:var(--blanc);border-top:1px solid var(--filet);padding:56px 0}
.liees h2{font-family:var(--display);font-size:var(--t10);letter-spacing:-.02em;
  margin-bottom:22px}
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.carte{border:1px solid var(--filet);border-top:3px solid var(--ambre);padding:24px;
  text-decoration:none;display:block;background:var(--blanc);transition:border-color .12s}
.carte:hover{border-color:var(--ambre)}
.carte .t{font-family:var(--titre);font-weight:800;font-size:var(--t7);color:var(--encre);
  margin-bottom:8px}
.carte p{font-size:var(--t4);color:var(--encre-2);margin:0;max-width:none}
/* La date de vérification, sur les cartes du silo Questions. Elle est le
   seul argument que ces pages opposent à un blog : la dire en petit sous
   chaque entrée coûte une ligne et vaut mieux qu'un paragraphe qui
   l'explique. */
.carte .mention{font-family:var(--titre);font-weight:600;font-size:var(--t1);
  letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin-top:12px}

/* ── Appel final ────────────────────────────────────────────────────── */
.appel{background:var(--nuit);color:#EDEFF3;padding:56px 0;text-align:center}
.appel h2{font-family:var(--display);font-size:clamp(24px,3.4vw,32px);color:#fff;
  letter-spacing:-.025em;margin:0 auto 14px;max-width:24ch}
.appel p{color:#B9C0CC;max-width:52ch;margin:0 auto 24px}

footer{background:var(--nuit);color:#7C8494;padding:44px 0;font-size:var(--t3);
  line-height:1.7;border-top:1px solid var(--bord)}
footer b{color:#B9C0CC}
footer a{color:#B9C0CC}
/* Bandeau légal du pied de page, ajouté le 24 août 2026 avec les liens
   eux-mêmes. Les liens sont espacés d'au moins 24 px pour rester
   distinguables au pouce sur mobile. */
/* Mesuré au navigateur en 375 px : les liens ne faisaient que 26 px de
   haut, sous le seuil tactile de 44 px. Le padding vertical agrandit la
   cible sans changer l'apparence, et le margin négatif annule l'espace
   qu'il ajouterait autour du bandeau. */
.pied-legal{display:flex;flex-wrap:wrap;gap:2px 26px;margin:-10px 0 12px;
  padding-bottom:18px;border-bottom:1px solid var(--bord)}
.pied-legal a{color:#B9C0CC;text-decoration:none;font-weight:600;
  display:inline-block;padding:11px 0;min-height:22px}
.pied-legal a:hover,.pied-legal a:focus{color:var(--ambre);text-decoration:underline}

/* ── L'EN-TÊTE PASSE EN DEUX LIGNES DÈS 1300 px ─────────────────────────
   Point de bascule PROPRE À L'EN-TÊTE, distinct des 820 px du corps de
   page. Il est calculé, pas choisi : neuf onglets réclament 845 px, et à
   1265 px de fenêtre il n'en reste que 880 une fois le logo, le bouton et
   les marges déduits. La marge était de 9 px — « Le Manuel », dernier de
   la liste et seul lien qui vende, se retrouvait coupé sur un écran
   d'ordinateur portable courant.
   Plutôt que de gratter ces pixels sur les libellés jusqu'à les rendre
   ambigus, l'en-tête passe en deux lignes sous 1300 px : logo et bouton en
   haut, menu pleine largeur en dessous. Il monte à 119 px au lieu de 82 —
   15 % d'un écran de téléphone, et c'est le prix à payer pour que les neuf
   onglets existent réellement.

   SUR TÉLÉPHONE, CETTE RÈGLE REMPLACE UN `nav{display:none}`. L'en-tête
   n'y contenait que le logo et le bouton du guide : aucun menu, et AUCUN
   bouton pour en ouvrir un — vérifié le 3 septembre 2026, il n'y avait pas
   de burger caché. La seule navigation était le pied de page, qu'il
   fallait atteindre en déroulant l'article entier.

   Aucun JavaScript : pas d'état à ouvrir ou fermer, donc pas de piège de
   focus ni d'aria-expanded à tenir juste. Le dernier lien dépasse
   volontairement du bord, c'est ce qui signale qu'on peut faire glisser. */
@media (max-width:1300px){
  /* Deux lignes, pas trois. Le `gap` du bureau s'applique aussi ENTRE les
     lignes : avec trois lignes il ajoutait 44 px à lui seul, et l'en-tête
     montait à 198 px sur un écran de 812. On sépare donc les deux axes, et
     on réduit le bouton pour qu'il tienne à côté du logo. */
  header .wrap{flex-wrap:wrap;justify-content:space-between;
    row-gap:10px;column-gap:12px}
  header .wrap>.btn{flex:0 0 auto;font-size:var(--t2);padding:9px 14px}
  header nav{order:3;flex:0 0 100%;gap:20px;
    overflow-x:auto;overscroll-behavior-x:contain;
    /* Les marges négatives annulent le padding du .wrap : le menu défile
       d'un bord à l'autre de l'écran, sinon il s'arrête 24 px trop tôt et
       donne l'impression d'être coupé. */
    margin:0 -24px;padding:0 24px 10px;
    scrollbar-width:none;-ms-overflow-style:none}
  header nav::-webkit-scrollbar{display:none}
  /* 24 px de haut : le minimum du critère WCAG 2.5.8 sur la taille des
     cibles. En ligne unique, un lien de texte ne l'atteint pas seul. */
  header nav a{display:inline-flex;align-items:center;min-height:24px}
}

@media (max-width:820px){
  article{padding:38px 0 54px}
  body{font-size:var(--t6)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ── Alignement de la zone de lecture ───────────────────────────────────
   Le fil d'Ariane, le titre et le corps partagent la même colonne, pour
   qu'un lecteur suive une seule verticale du haut jusqu'en bas. L'en-tête,
   les cartes liées et le pied restent en pleine largeur. */
.col{ max-width:768px; }
.fil .wrap,
.tete .wrap{ max-width:768px; }

/* ══════════════════════════════════════════════════════════════════════
   L'ORIENTEUR — l'élément signature du site.

   Tout visiteur de ces pages se pose la même question : « est-ce que ça
   me concerne ? » Plutôt que de lui faire lire trois pages pour le
   savoir, on la lui pose directement, et chaque réponse mène à une
   conclusion nette.

   Construit en HTML sémantique plutôt qu'en SVG : lisible au lecteur
   d'écran, redimensionnable, et chaque issue reste un lien réel.
   ══════════════════════════════════════════════════════════════════════ */
.orienteur{
  background:var(--nuit); color:#EDEFF3; padding:34px 32px; margin:34px 0;
  max-width:68ch; position:relative; overflow:hidden;
}
.orienteur::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 50% at 12% 0%, rgba(255,176,32,.16) 0, transparent 62%);
}
.orienteur > *{ position:relative; }
.orienteur .titre{
  font-family:var(--titre); font-weight:800; font-size:var(--t1); letter-spacing:.18em;
  text-transform:uppercase; color:var(--ambre); margin-bottom:6px;
}
.orienteur .question{
  font-family:var(--display); font-size:var(--t10); line-height:1.12; color:#fff;
  letter-spacing:-.025em; margin-bottom:26px;
}

.branche{ display:flex; gap:18px; padding:20px 0; border-top:1px solid var(--bord); }
.branche:first-of-type{ border-top:2px solid var(--ambre); }
.branche .cle{
  font-family:var(--display); font-size:var(--t4); color:var(--nuit);
  background:var(--ambre); padding:5px 12px; height:fit-content; flex:none;
  letter-spacing:.02em; min-width:52px; text-align:center;
}
.branche.negatif .cle{ background:var(--bord); color:#B9C0CC; }
.branche .contenu{ flex:1; }
.branche .cas{
  font-family:var(--titre); font-weight:700; font-size:var(--t6); color:#fff;
  margin-bottom:5px; line-height:1.35;
}
.branche .issue{ font-size:var(--t4); line-height:1.55; color:#B9C0CC; margin:0 0 9px; max-width:none; }
.branche .issue b{ color:var(--ambre); font-weight:600; }
.branche a{
  font-family:var(--titre); font-weight:700; font-size:var(--t3); color:var(--ambre);
  text-decoration:none; border-bottom:1px solid rgba(255,176,32,.4); padding-bottom:1px;
}
.branche a:hover{ border-bottom-color:var(--ambre); }
.branche a:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

.orienteur .note{
  font-size:var(--t2); color:#7C8494; margin:22px 0 0; padding-top:16px;
  border-top:1px solid var(--bord); line-height:1.55; max-width:none;
}

/* ── Pictogrammes maison ────────────────────────────────────────────────
   Tracés à la charte, au trait, tirés du monde du métier — volant, carte,
   registre, chronomètre — plutôt que des icônes de diplôme génériques. */
.pictos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:26px; margin:32px 0; max-width:68ch; }
.picto svg{ width:34px; height:34px; stroke:var(--ambre-f); stroke-width:1.6;
  fill:none; stroke-linecap:round; stroke-linejoin:round; margin-bottom:12px; display:block; }
.picto .t{ font-family:var(--titre); font-weight:800; font-size:var(--t5); margin-bottom:5px; }
.picto p{ font-size:var(--t4); color:var(--encre-2); margin:0; max-width:none; line-height:1.5; }

@media (max-width:620px){
  .orienteur{ padding:26px 22px; }
  .orienteur .question{ font-size:var(--t9); }
  .branche{ flex-direction:column; gap:10px; }
  .branche .cle{ min-width:0; align-self:flex-start; }
}

/* ══════════════════════════════════════════════════════════════════════
   BLOC D'ACHAT — présent en bas de chaque page de contenu.

   Deux portes, dans cet ordre : le Manuel payant en premier, le guide
   gratuit en repli. Un lecteur arrivé au bout d'une page technique est
   plus proche de l'achat qu'un visiteur d'accueil ; lui proposer d'abord
   le gratuit reviendrait à repousser la vente d'un cran sans raison.
   ══════════════════════════════════════════════════════════════════════ */
.achat{
  background:var(--nuit); color:#EDEFF3; padding:0; margin:52px 0 0;
  display:grid; grid-template-columns:1.25fr .75fr; max-width:68ch;
  border-left:4px solid var(--ambre);
}
.achat .gauche{ padding:32px 34px; }
.achat .droite{
  padding:32px 30px; background:var(--nuit-2); border-left:1px solid var(--bord);
  display:flex; flex-direction:column; justify-content:center;
}
.achat .eti{
  font-family:var(--titre); font-weight:800; font-size:var(--t1); letter-spacing:.18em;
  text-transform:uppercase; color:var(--ambre); margin-bottom:10px;
}
.achat h3{
  font-family:var(--display); font-size:var(--t9); line-height:1.14; color:#fff;
  letter-spacing:-.025em; margin-bottom:12px;
}
.achat p{ font-size:var(--t4); line-height:1.55; color:#B9C0CC; margin:0 0 10px; max-width:none; }
.achat p:last-of-type{ margin-bottom:0; }
.achat b{ color:#fff; font-weight:600; }
.achat ul{ list-style:none; margin:14px 0 0; padding:0; }
.achat li{
  padding-left:22px; position:relative; font-size:var(--t4); color:#B9C0CC;
  margin-bottom:8px; line-height:1.5;
}
.achat li::before{
  content:''; position:absolute; left:0; top:10px; width:12px; height:2px;
  background:var(--ambre);
}
.achat .prix{
  font-family:var(--display); font-size:var(--n2); line-height:1; color:var(--ambre);
  letter-spacing:-.035em; margin-bottom:4px;
}
.achat .prix small{ font-size:var(--t7); color:#7C8494; }
.achat .mention{ font-size:var(--t2); color:#7C8494; line-height:1.5; margin:0 0 20px; }
.achat .btn{ width:100%; text-align:center; }
.achat .repli{
  font-size:var(--t2); color:#7C8494; margin:16px 0 0; text-align:center; line-height:1.9;
}
/* Le repli porte maintenant deux liens au lieu d'un, et c'est la seule
   sortie offerte à quelqu'un qui n'achète pas. Mesurés au navigateur le
   24 août 2026 : 16 px de haut, très en dessous du seuil tactile de 44.
   L'interligne à 1,9 et le padding vertical portent la cible à ~44 px
   sans déplacer le texte. */
.achat .repli a{ color:#B9C0CC; display:inline-block; padding:11px 2px;
  text-decoration:underline; text-underline-offset:3px; }
.achat .repli a:hover,.achat .repli a:focus{ color:var(--ambre); }

/* 4 octobre 2026 : à 320 px, le bouton du bloc (« white-space:nowrap »
   hérité de .btn) imposait sa largeur à la colonne de grille, et le bloc
   entier sortait de 27 px sur 65 pages. La colonne accepte désormais de
   rétrécir, et le bouton de se replier. */
.achat > *{ min-width:0; }
.achat .btn{ white-space:normal; max-width:100%; }

@media (max-width:760px){
  .achat{ grid-template-columns:1fr; }
  .achat .droite{ border-left:none; border-top:1px solid var(--bord); }
}

/* ══════════════════════════════════════════════════════════════════════
   EXAMEN BLANC — le seul gratuit qui applique les vraies règles.
   ══════════════════════════════════════════════════════════════════════ */
#examen-blanc{ margin:36px 0 0; max-width:68ch; }
.eb-erreur{ background:var(--rouge-pale); border-left:3px solid var(--rouge);
  padding:18px 20px; font-size:var(--t5); }

.eb-module{ margin-bottom:44px; }
.eb-module-tete{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  border-bottom:2px solid var(--encre); padding-bottom:10px; margin-bottom:22px; }
.eb-code{ font-family:var(--display); font-size:var(--t9); color:var(--ambre-f); line-height:1; }
.eb-module-tete h3{ font-family:var(--titre); font-weight:800; font-size:var(--t8); margin:0; }
.eb-meta{ font-family:var(--titre); font-size:var(--t1); letter-spacing:.08em;
  text-transform:uppercase; color:var(--gris); margin-left:auto; white-space:nowrap; }

.eb-q{ border:1px solid var(--filet); border-left:3px solid var(--filet);
  padding:22px 24px; margin-bottom:16px; }
.eb-q legend{ font-size:var(--t6); line-height:1.5; font-weight:600; padding:0;
  display:flex; gap:12px; margin-bottom:14px; }
.eb-num{ font-family:var(--display); font-size:var(--t4); color:var(--ambre-f); flex:none; }
.eb-r{ display:flex; gap:12px; align-items:flex-start; padding:9px 12px;
  border-radius:2px; cursor:pointer; font-size:var(--t5); line-height:1.45; }
.eb-r:hover{ background:var(--ambre-pale); }
.eb-r input{ margin-top:4px; width:17px; height:17px; flex:none; accent-color:var(--ambre-f); }
.eb-r input:focus-visible{ outline:3px solid var(--cyan); outline-offset:2px; }

/* Après correction */
.eb-q.eb-juste{ border-left-color:#2C7A4B; }
.eb-q.eb-faux{ border-left-color:var(--rouge); }
.eb-q.eb-vide{ border-left-color:var(--gris); }
.eb-r.eb-bonne{ background:#EAF6EF; font-weight:600; }
.eb-r.eb-mauvaise{ background:var(--rouge-pale); text-decoration:line-through;
  text-decoration-color:rgba(229,72,77,.5); }
.eb-r input:disabled{ cursor:default; }
.eb-q:has(input:disabled) .eb-r{ cursor:default; }
.eb-q:has(input:disabled) .eb-r:hover{ background:none; }
.eb-q.eb-juste .eb-r.eb-bonne:hover,
.eb-q.eb-faux .eb-r.eb-bonne:hover{ background:#EAF6EF; }
.eb-expl{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--filet);
  font-size:var(--t4); line-height:1.55; color:var(--encre-2); }
.eb-expl b{ color:var(--encre); }

.eb-actions{ margin-top:32px; padding-top:24px; border-top:2px solid var(--encre); }
.eb-actions .btn{ font-size:var(--t6); padding:16px 30px; }
.eb-actions .btn:disabled{ opacity:.55; cursor:default; }
.eb-restant{ font-size:var(--t3); color:var(--gris); margin:14px 0 0; }

/* Résultat */
#eb-resultat-zone{ margin-top:36px; }
.eb-resultat{ background:var(--nuit); color:#EDEFF3; padding:34px 34px 30px;
  max-width:68ch; border-left:5px solid var(--ambre); outline:none; }
.eb-resultat.eb-ok{ border-left-color:#3FBF7A; }
.eb-resultat.eb-ko{ border-left-color:var(--rouge); }
.eb-verdict{ font-family:var(--titre); font-weight:800; font-size:var(--t1);
  letter-spacing:.2em; text-transform:uppercase; color:var(--ambre); margin-bottom:10px; }
.eb-ok .eb-verdict{ color:#5BD495; }
.eb-ko .eb-verdict{ color:#FF8A85; }
.eb-moyenne{ font-family:var(--display); font-size:var(--n3); line-height:1; color:#fff;
  letter-spacing:-.035em; margin-bottom:16px; }
.eb-moyenne small{ font-family:var(--corps); font-size:var(--t5); font-weight:400;
  letter-spacing:0; color:#8A92A2; display:block; margin-top:8px; }
.eb-pourquoi{ font-size:var(--t5); line-height:1.55; color:#B9C0CC; max-width:none;
  margin:0 0 22px; }
.eb-pourquoi b{ color:#fff; }
.eb-detail{ width:100%; border-collapse:collapse; font-size:var(--t4); }
.eb-detail caption{ font-family:var(--titre); font-weight:700; font-size:var(--t1);
  letter-spacing:.1em; text-transform:uppercase; color:#7C8494;
  text-align:left; padding-bottom:10px; }
/* `thead` est indispensable : depuis que la première cellule de chaque ligne
   est un <th scope="row">, une règle visant `th` tout court lui appliquerait
   les petites capitales de l'en-tête de colonne. Le même oubli avait déjà
   dépouillé les deux tableaux comparatifs du site. */
.eb-detail thead th{ font-family:var(--titre); font-size:var(--t1); letter-spacing:.14em;
  text-transform:uppercase; color:#7C8494; font-weight:700; text-align:left;
  padding:0 8px 10px; border-bottom:1px solid var(--bord); }
.eb-detail th.c, .eb-detail td.c{ text-align:center; }
.eb-detail tbody th, .eb-detail td{ padding:11px 8px; text-align:left;
  border-bottom:1px solid var(--bord); color:#B9C0CC; font-weight:400; }
.eb-detail b{ color:var(--ambre); font-family:var(--display); font-size:var(--t3); }
.eb-detail tr.eb-l-elim th, .eb-detail tr.eb-l-elim td{ background:rgba(229,72,77,.10); }
.eb-x{ color:#FF8A85; font-weight:600; }
.eb-note{ font-size:var(--t3); color:#7C8494; margin:22px 0 0; padding-top:18px;
  border-top:1px solid var(--bord); line-height:1.6; max-width:none; }
.eb-note b{ color:#B9C0CC; }

@media (max-width:620px){
  .eb-meta{ margin-left:0; width:100%; }
  .eb-resultat{ padding:26px 22px; }
  .eb-moyenne{ font-size:var(--n1); }
  .eb-detail{ font-size:var(--t3); }
  .eb-detail td, .eb-detail th{ padding-left:4px; padding-right:4px; }
  /* Cible tactile : 44 px minimum, sinon on rate la réponse d'à côté. */
  .eb-r{ padding-top:12px; padding-bottom:12px; }
  /* Le bouton de correction fait 125 px sur mobile s'il reste en ligne :
     c'est l'action principale de la page, elle prend la largeur. */
  .eb-actions #eb-corriger{ display:block; width:100%; text-align:center; }
}

/* ── Questions fréquentes ──────────────────────────────────────────────
   Le balisage FAQPage exige que question et réponse soient VISIBLES et
   identiques au JSON-LD. Rien ici ne masque ni ne replie : pas
   d'accordéon, pas de hauteur nulle. Une FAQ dépliable côté visiteur
   et complète côté robot est exactement ce que Google sanctionne. */
.faq-titre{ margin-top:56px; padding-top:30px; border-top:2px solid var(--encre); }
.faq-q{ font-size:var(--t8) !important; line-height:1.35; margin:30px 0 10px !important;
  padding-left:26px; position:relative; }
.faq-q::before{ content:'?'; position:absolute; left:0; top:1px;
  font-family:var(--display); font-size:var(--t6); color:var(--ambre-f); }
.faq-q + p{ margin-top:0; }
@media (max-width:620px){
  .faq-q{ font-size:var(--t7) !important; padding-left:22px; }
}

/* Bouton « Recommencer », dans le bloc de résultat sombre. */
.eb-rejouer{ display:block; width:100%; margin-top:22px; padding:14px 20px;
  background:transparent; color:#EDEFF3; border:1px solid rgba(237,239,243,.35);
  border-radius:6px; font-family:var(--titre); font-weight:700; font-size:var(--t4);
  cursor:pointer; transition:background .12s ease, border-color .12s ease; }
.eb-rejouer:hover{ background:rgba(237,239,243,.08); border-color:rgba(237,239,243,.6); }
.eb-rejouer:focus-visible{ outline:3px solid var(--ambre); outline-offset:2px; }

/* ── Proposition après le résultat ─────────────────────────────────────
   Elle ne s'affiche qu'une fois le verdict rendu, et ne masque rien :
   note, détail par épreuve et corrections sont déjà à l'écran. */
.eb-capture{ margin:26px 0 0; padding:28px 26px; background:var(--nuit-2,#141821);
  border:1px solid var(--bord); border-radius:8px; color:#EDEFF3; }
.eb-capture .eti{ font-family:var(--titre); font-size:var(--t1); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ambre); margin-bottom:10px; font-weight:700; }
.eb-capture h3{ font-family:var(--display); font-size:var(--t9); line-height:1.15;
  color:#fff; margin:0 0 14px; letter-spacing:-.02em; }
.eb-capture p{ color:#B9C0CC; font-size:var(--t4); line-height:1.6; margin:0 0 14px; max-width:none; }
.eb-capture p b{ color:#fff; }
.eb-cap-champs{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0 4px; }
.eb-capture .champ label{ display:block; font-family:var(--titre); font-weight:700;
  font-size:var(--t1); letter-spacing:.12em; text-transform:uppercase; color:#7C8494; margin-bottom:6px; }
.eb-capture .champ input{ width:100%; background:#0B0D12; border:1px solid var(--bord);
  color:#fff; font-family:var(--corps); font-size:var(--t5); padding:13px 14px; border-radius:4px; }
.eb-capture .champ input:focus{ outline:none; border-color:var(--ambre);
  box-shadow:0 0 0 3px rgba(255,176,32,.18); }
.eb-capture .consent{ display:flex; gap:11px; align-items:flex-start; margin:16px 0 18px;
  font-size:var(--t2); color:#8A92A2; line-height:1.5; }
.eb-capture .consent input{ margin-top:3px; width:17px; height:17px; flex:none; accent-color:var(--ambre); }
.eb-capture .consent a{ color:#B9C0CC; }
.eb-capture .envoi{ width:100%; background:var(--ambre); color:#241800; border:none;
  font-family:var(--titre); font-weight:800; font-size:var(--t5); padding:15px;
  border-radius:4px; cursor:pointer; }
.eb-capture .envoi:hover:not(:disabled){ background:#FFC24D; }
.eb-capture .envoi:disabled{ opacity:.6; cursor:default; }
.eb-capture .rassure{ font-size:var(--t2); color:var(--gris-c); margin:12px 0 0; text-align:center; }
.eb-capture .erreur{ background:rgba(229,72,77,.14); border:1px solid rgba(229,72,77,.4);
  color:#FFB3B5; font-size:var(--t3); padding:11px 13px; margin-bottom:14px; border-radius:4px; }
.eb-cap-ok{ background:rgba(46,160,97,.14); border:1px solid rgba(46,160,97,.45);
  color:#8FE0AC; padding:16px 18px; border-radius:6px; font-size:var(--t4); line-height:1.6; }
.eb-cap-ok b{ color:#fff; }
@media (max-width:620px){
  .eb-cap-champs{ grid-template-columns:1fr; }
  .eb-capture{ padding:24px 20px; }
}

/* Lien d'évitement — WCAG 2.4.1, niveau A.
   Hors écran tant qu'il n'a pas le focus. On ne le masque PAS avec
   display:none : un élément ainsi masqué n'est pas focusable, et le lien
   ne servirait plus à rien. */
.evitement{ position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--encre); color:#fff; padding:12px 20px;
  font-family:var(--titre); font-weight:700; font-size:var(--t4);
  text-decoration:none; border-radius:0 0 6px 0; }
.evitement:focus{ left:0; outline:3px solid var(--ambre); outline-offset:-3px; }

/* ══ TABLEAUX ═══════════════════════════════════════════════════════════
   Ajouté le 24 août 2026. Constat en mesurant les styles calculés : les
   26 tableaux du site n'avaient AUCUNE règle. padding 0, aucune bordure,
   cellules collées, rendu par défaut du navigateur. Le défaut n'avait pas
   été vu parce que les contrôles ne portaient que sur les largeurs et les
   débordements — jamais sur l'apparence des cellules.

   Les classes .mat et .compo étaient posées dans le HTML depuis le début
   sans qu'aucune feuille ne les cible. */
.tab{ width:100%; border-collapse:collapse; margin:26px 0 30px; font-size:var(--t5);
  line-height:1.55 }
.tab caption{ text-align:left; font-family:var(--titre); font-weight:700;
  font-size:var(--t2); letter-spacing:.1em; text-transform:uppercase;
  color:var(--gris); padding-bottom:10px }
.tab thead th{ font-family:var(--titre); font-weight:800; font-size:var(--t1);
  letter-spacing:.13em; text-transform:uppercase; color:var(--gris);
  text-align:left; padding:0 14px 10px 0; border-bottom:2px solid var(--filet);
  vertical-align:bottom }
.tab th.c, .tab td.c{ text-align:center }
.tab tbody th, .tab tbody td{ padding:13px 14px 13px 0;
  border-bottom:1px solid var(--filet-p); vertical-align:top;
  color:var(--encre-2); text-align:left; font-weight:400 }
/* La première colonne porte l'intitulé de ligne : c'est un en-tête, pas
   une donnée. Elle est en <th scope="row"> pour les lecteurs d'écran, donc
   il faut annuler le gras et le centrage que le navigateur y met d'office. */
.tab tbody th{ color:var(--encre); font-weight:600; width:30% }
.tab tbody tr:last-child th, .tab tbody tr:last-child td{ border-bottom:0 }
.tab td b, .tab th b{ color:var(--encre) }
.tab small{ display:block; font-size:var(--t2); color:var(--gris); font-weight:400;
  margin-top:3px }

/* Tableaux larges sur petit écran.
   Une table à quatre colonnes ne tient pas dans 375 px. Plutôt que de
   laisser la PAGE défiler horizontalement — ce qui casse la lecture de
   tout le reste — c'est le tableau seul qui défile, dans son cadre.
   Le dégradé à droite signale qu'il reste du contenu. */
@media (max-width:620px){
  .tab{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
    background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)),
               linear-gradient(90deg,rgba(0,0,0,.10),rgba(0,0,0,0) 12px) 100% 0;
    background-repeat:no-repeat; background-size:32px 100%,14px 100%;
    background-attachment:local,scroll; }
  .tab thead th{ white-space:nowrap; }
}

/* Navigation aux largeurs intermédiaires.
   À sept entrées, l'en-tête débordait de 106 px sur un écran de 1024 :
   le bouton « Guide gratuit » sortait du cadre. On resserre l'espacement
   et la taille entre 620 et 1180 px, plutôt que de masquer le menu — un
   portable de 13 pouces mérite une navigation. */
@media (min-width:621px) and (max-width:1180px){
  header nav{ gap:15px; }
  header nav a{ font-size:var(--t3); }
  header .btn{ padding:11px 16px; font-size:var(--t3); }
  .logo{ font-size:var(--t5); }
}

/* La zone creuse entre 821 et 975 px.
   Le menu ne se masque qu'à 820 px, mais l'en-tête à sept entrées réclame
   975 px pour tenir sur une ligne. Entre les deux, le bouton « Guide
   gratuit » sortait du cadre. Plutôt que de masquer la navigation sur des
   écrans qui ont la place de l'afficher, on la fait passer à la ligne. */
@media (min-width:821px) and (max-width:975px){
  header .wrap{ flex-wrap:wrap; row-gap:12px; }
  header nav{ order:3; width:100%; justify-content:flex-start; gap:18px; }
  .logo{ margin-right:auto; }
}

/* ── Bande de capture du guide gratuit ──────────────────────────────────
   Posée sur les pages à forte intention par _poser-capture.mjs.

   Pourquoi un fond sombre au milieu d'un article clair : la bande doit se
   distinguer du corps sans crier. Le même contraste que le bloc d'achat,
   avec lequel elle cohabite sur la même page — l'un au-dessus de l'autre,
   le gratuit avant le payant.

   Les champs sont restylés ici plutôt que réutilisés depuis /guide-gratuit/ :
   cette page-là porte son CSS en ligne et ne charge pas article.css. Deux
   déclarations, donc, mais une seule est chargée à la fois. Si l'apparence
   des champs change, les deux doivent changer ensemble. */
.capture{
  background:var(--nuit); color:#EDEFF3; margin:52px 0 0; max-width:68ch;
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-left:4px solid var(--cyan);
}
.capture-dit{ padding:30px 30px 30px 32px; }
.capture-dit .eti{
  font-family:var(--titre); font-weight:700; font-size:var(--t1);
  letter-spacing:.2em; text-transform:uppercase; color:var(--cyan);
  margin-bottom:12px;
}
.capture-dit h2{
  font-family:var(--display); font-size:var(--t8); line-height:1.12;
  letter-spacing:-.02em; color:#fff; margin:0 0 12px; max-width:none;
}
.capture-dit p{ font-size:var(--t3); line-height:1.55; color:#B9C0CC; margin:0; max-width:none; }
.capture-dit b{ color:#fff; font-weight:600; }

.capture form{ padding:30px 32px 30px 26px; border-left:1px solid var(--bord); }
.capture .capture-champs{ display:grid; gap:12px; }
.capture .champ{ margin:0; }
.capture .champ label{
  display:block; font-family:var(--titre); font-weight:700; font-size:var(--t1);
  letter-spacing:.12em; text-transform:uppercase; color:#7C8494; margin-bottom:6px;
}
.capture .champ input{
  width:100%; background:#000; border:1px solid var(--bord); color:#fff;
  font-family:var(--corps); font-size:var(--t4); padding:12px 13px; border-radius:2px;
}
.capture .champ input:focus{
  outline:none; border-color:var(--ambre); box-shadow:0 0 0 3px rgba(255,176,32,.18);
}
.capture .consent{
  display:flex; gap:11px; align-items:flex-start; margin:16px 0 18px;
  font-size:var(--t1); color:#8A92A2; line-height:1.5; cursor:pointer;
}
/* 24 px : le seuil du critère WCAG 2.5.8, comme la case de renoncement
   de la page de commande. */
.capture .consent input{
  margin-top:1px; width:24px; height:24px; flex:none; accent-color:var(--ambre); cursor:pointer;
}
.capture .consent b{ color:#B9C0CC; font-weight:600; }
.capture .consent a{ color:#B9C0CC; }
.capture .envoi{
  width:100%; background:var(--ambre); color:#241800; border:none;
  font-family:var(--titre); font-weight:800; font-size:var(--t5); padding:15px;
  border-radius:2px; cursor:pointer; display:flex; align-items:center;
  justify-content:center; gap:10px; transition:background .12s ease;
}
.capture .envoi:hover:not(:disabled){ background:#FFC24D; }
.capture .envoi:disabled{ opacity:.6; cursor:default; }
.capture .envoi:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; }
.capture .rassure{
  font-size:var(--t1); color:#7C8494; margin:12px 0 0; text-align:center; line-height:1.5;
}
.capture .erreur{
  background:rgba(229,72,77,.14); border:1px solid rgba(229,72,77,.4);
  color:#FFB3B5; font-size:var(--t2); padding:10px 12px; margin:0 0 14px; line-height:1.45;
}
.capture .erreur[hidden]{ display:none; }

/* Sous 720 px, deux colonnes de 34 caractères deviennent illisibles et les
   champs passent sous la largeur de frappe confortable. On empile, et la
   bordure de séparation passe du côté au-dessus. */
@media (max-width:720px){
  .capture{ grid-template-columns:1fr; }
  .capture-dit{ padding:26px 22px 0; }
  .capture form{ padding:22px; border-left:0; border-top:0; }
}

/* menu-replie:début */
/* Bouton « Menu » : invisible au-dessus de 820 px, les liens y restent en ligne. */
header nav .menu-bouton{display:none}
header nav .menu-liens{display:contents}
@media (max-width:820px){
  header .wrap{position:relative;flex-wrap:nowrap;column-gap:10px;
    padding-top:8px;padding-bottom:8px}
  header .logo{display:inline-flex;align-items:center;min-height:44px}
  header .wrap>.btn{display:inline-flex;align-items:center;min-height:44px;
    padding:0 14px;font-size:var(--t2)}
  header nav{order:3;flex:0 0 auto;margin:0;padding:0;overflow:visible;gap:0}
  header nav.menu-js .menu-bouton{display:inline-flex;align-items:center;gap:8px;
    min-height:44px;padding:0 12px;background:transparent;color:#fff;
    border:2px solid rgba(255,255,255,.4);border-radius:2px;cursor:pointer;
    font-family:var(--titre);font-weight:700;font-size:var(--t2)}
  header nav.menu-js .menu-bouton::before{content:'';width:14px;height:10px;
    border-top:2px solid currentColor;border-bottom:2px solid currentColor;
    background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat}
  header nav.menu-js.menu-ouvert .menu-bouton{border-color:var(--ambre);color:var(--ambre)}
  header nav.menu-js .menu-bouton:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
  header nav.menu-js .menu-liens{display:none}
  header nav.menu-js.menu-ouvert .menu-liens{display:grid;grid-template-columns:1fr 1fr;
    gap:0 16px;position:absolute;top:100%;left:0;right:0;z-index:60;
    background:var(--nuit);border-bottom:1px solid var(--bord);
    padding:6px 24px 14px;box-shadow:0 14px 28px rgba(0,0,0,.35)}
  /* Sans JavaScript : tous les liens visibles, à plat, sur plusieurs lignes. */
  header nav:not(.menu-js){flex:0 0 100%}
  header .wrap:has(nav:not(.menu-js)){flex-wrap:wrap}
  header nav:not(.menu-js) .menu-liens{display:flex;flex-wrap:wrap;gap:0 18px}
  header nav .menu-liens a{display:flex;align-items:center;min-height:44px;
    white-space:normal}
  /* Pied de page : liens à 44 px de haut, au lieu de 22 à 26. */
  footer .cols a,footer .pied-legal a{display:flex;align-items:center;
    min-height:44px;margin-bottom:0;padding-top:0;padding-bottom:0}
  /* Pages légales, 404, merci : liens en ligne dans le texte du pied. */
  footer>.wrap>a{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:380px){
  header .wrap{padding-left:16px;padding-right:16px;column-gap:8px}
  header .logo{font-size:var(--t5)}
  header .wrap>.btn{padding:0 10px}
  header nav.menu-js .menu-bouton{padding:0 9px}
}
@media (max-width:340px){
  header .wrap{padding-left:12px;padding-right:12px;column-gap:6px}
  header .logo{font-size:var(--t4)}
  header .wrap>.btn{padding:0 8px;font-size:var(--t1)}
  header nav.menu-js .menu-bouton::before{display:none}
}
/* menu-replie:fin */