/* ============================================================================
   Aptenda — direction artistique « Le mur ».

   Première version rejetée, et à raison : elle était bien composée et parfaitement
   plate. Gris sur gris, trois sections au même rythme, et on ne voyait JAMAIS le
   produit. Un site de produit qui ne montre pas le produit est une brochure.

   La nouvelle idée tient en une image : le candidat est devant un MUR d'annonces.
   Aptenda en raye la quasi-totalité et en éclaire trois. Ce mur est donc le héros de
   la page, et il est construit avec de VRAIES annonces de la base — pas une
   illustration, la chose elle-même.

   Ce qui en découle et qu'il ne faut pas défaire :
   · Fond ENCRE par défaut. Le mur ne se lit que sur du sombre, et le vermillon de la
     rature n'a de force que là. Le thème clair existe, il est second.
   · Chaque section a son PROPRE traitement : le mur, la fiche de verdict, le graphique,
     le fac-similé de lettre, la double lecture du CV. Jamais deux fois le même gabarit.
   · Cinq caractères forgés pour ce produit : Tampon (titres), Texte, Chiffre (données),
     Accent (italique éditorial, réservé aux mots qui portent l'idée).
   · Le mouvement est rare et signifiant : le trait qui raye, le mur qui s'éteint, les
     compteurs. Aucun fondu générique.
   ========================================================================== */

/* ------------------------------------------------------------ caractères */

/* Le caractere vient du CHOIX de la base, pas de sa deformation. Instancier un axe de
   poids sur un grotesque neutre donne du « legerement different », pas du memorable :
   c est le reproche qu on nous a fait, et il etait juste. Bricolage Grotesque a un
   dessin qui a deja une voix (contreformes serrees, terminaisons coupees, italique
   vrai) ; on la resserre et on la renomme, on ne la tord pas. */
@font-face { font-family: "Aptenda Titre"; src: url("/fonts/aptenda-titre.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Aptenda Corps"; src: url("/fonts/aptenda-corps.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Aptenda Corps"; src: url("/fonts/aptenda-corps-gras.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Aptenda Chiffre"; src: url("/fonts/aptenda-chiffre.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Aptenda Accent"; src: url("/fonts/aptenda-accent.woff2") format("woff2"); font-weight: 300 500; font-display: swap; }

/* ------------------------------------------------------------ jetons */

:root {
  color-scheme: dark;

  --encre: #070a0f;
  --encre-2: #0d1219;
  --surface: #141a23;
  --surface-2: #1c242f;
  --trait: #262f3c;
  --trait-vif: #3a4655;

  --texte: #eef2f7;
  --texte-2: #a3aebd;
  --texte-3: #6b7688;

  --refus: #ff4b2b;
  --refus-sourd: #7a1e0f;
  --retenu: #34d399;
  --retenu-sourd: #0e3b2c;
  --or: #f2c14e;

  --papier: #f4f2ec;      /* réservé aux fac-similés : la lettre, le CV */
  --papier-encre: #14161a;

  --cadre: 1240px;
  --mesure: 62ch;
  --t-vif: 180ms cubic-bezier(0.2, 0, 0.1, 1);
  --t-long: 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="light"] {
  color-scheme: light;
  --encre: #f3f4f7;
  --encre-2: #e9ebf0;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --trait: #d5d9e0;
  --trait-vif: #aeb6c2;
  --texte: #0b0f15;
  --texte-2: #4a5462;
  --texte-3: #78828f;
  --refus: #c9331a;
  --refus-sourd: #f7ded8;
  --retenu: #0d7a58;
  --retenu-sourd: #dcf1e8;
  --or: #9a6f10;
  --papier-encre: #14161a;
}

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

body {
  margin: 0;
  background: var(--encre);
  color: var(--texte);
  font-family: "Aptenda Corps", ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: "Aptenda Titre", ui-sans-serif, system-ui, sans-serif;
  font-weight: 900;
  line-height: 0.93;
  letter-spacing: -0.012em;
  margin: 0 0 0.4em;
  text-wrap: balance;
}
h1 { font-size: clamp(3.1rem, 8.2vw, 7rem); line-height: 0.99; }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); }
h3 { font-size: clamp(1.1rem, 1.7vw, 1.32rem); font-family: "Aptenda Corps", sans-serif; font-weight: 700; line-height: 1.25; letter-spacing: 0; }

/* L'accent : l'italique éditorial, réservé aux mots qui portent l'idée. Jamais
   décoratif — s'il est partout, il ne veut plus rien dire. */
.accent {
  font-family: "Aptenda Accent", Georgia, serif;
  font-weight: 380;
  font-style: normal;
  letter-spacing: -0.005em;
}

p { margin: 0 0 1.05em; max-width: var(--mesure); color: var(--texte-2); }
p.fort { color: var(--texte); }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--refus); outline-offset: 3px; }
::selection { background: var(--refus); color: #fff; }

.chiffre, .etiquette, .mono { font-family: "Aptenda Chiffre", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.etiquette { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte-3); }

.cadre { width: min(100% - 2.4rem, var(--cadre)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.discret { color: var(--texte-3); font-size: 0.9rem; }
.defilable { overflow-x: auto; }

/* ------------------------------------------------------------ barre */

.barre {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--encre) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--trait);
}
.barre .cadre { display: flex; align-items: center; gap: 1.3rem; min-height: 64px; }
.marque { font-family: "Aptenda Titre", sans-serif; font-size: 1.3rem; font-weight: 900; letter-spacing: -0.02em; text-decoration: none; display: inline-flex; align-items: center; gap: 0.55rem; }
.sceau { width: 21px; height: 21px; border: 2px solid currentColor; position: relative; flex: none; }
.sceau::after { content: ""; position: absolute; left: 1px; right: 1px; top: 8px; border-top: 2px solid var(--refus); transform: rotate(-26deg); }
.nav { margin-left: auto; display: flex; gap: 1.25rem; align-items: center; font-size: 0.93rem; }
.nav a { text-decoration: none; color: var(--texte-2); }
.nav a:hover { color: var(--texte); }

/* ------------------------------------------------------------ boutons */

.bouton {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  background: var(--texte); color: var(--encre);
  font-family: "Aptenda Corps", sans-serif; font-weight: 700; font-size: 1rem;
  text-decoration: none; border: 0; border-radius: 2px; cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform var(--t-vif), background var(--t-vif);
}
.bouton::after {
  /* Un trait de rature passe sur le bouton au survol : le geste du produit, jusque
     dans l'interaction. */
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: var(--refus); transform: scaleX(0); transform-origin: left;
  transition: transform 340ms cubic-bezier(0.7, 0, 0.2, 1);
}
.bouton:hover { transform: translateY(-2px); }
.bouton:hover::after { transform: scaleX(1); }
.bouton.creux { background: transparent; color: var(--texte); border: 1.5px solid var(--trait-vif); }
.bouton.creux:hover { border-color: var(--texte); }
.bouton.vif { background: var(--refus); color: #fff; }
.bouton.vif::after { background: #fff; }
.lien-net { color: var(--texte); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--refus); padding-bottom: 2px; }
.lien-net:hover { border-bottom-color: var(--texte); }

/* ============================================================ LE MUR (héros) */

.heros {
  position: relative;
  padding-block: clamp(2.6rem, 5vw, 4.2rem) clamp(2.6rem, 5vw, 4.4rem);
  isolation: isolate;
  overflow: hidden;
  min-height: min(84vh, 760px);
  display: flex;
  align-items: center;
}

/* Un voile part de la gauche pour que le texte ne se cogne jamais au mur. Sans lui, les
   titres du mur passent DERRIÈRE les mots et les rendent illisibles — vu à la première
   capture, corrigé. Le mur reste net à droite, là où il doit se lire comme une masse. */
.heros::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    var(--encre) 0%, var(--encre) 26%,
    color-mix(in srgb, var(--encre) 88%, transparent) 42%,
    color-mix(in srgb, var(--encre) 40%, transparent) 62%,
    transparent 82%);
  pointer-events: none;
}

/* Le mur d'annonces : dense, réel, et presque entièrement rayé. Il est en fond, en
   colonnes, et s'estompe vers le texte pour rester lisible. */
.mur {
  position: absolute; inset: -2rem 0 -2rem 0; z-index: -2;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  grid-auto-rows: 1.62em;
  gap: 0 14px;
  padding: 0;
  align-content: stretch;
  opacity: 0.62;
  mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 88%, transparent 100%);
  pointer-events: none;
  user-select: none;
}
.mur span {
  font-size: 11px; line-height: 1.5; color: var(--texte-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: relative;
}
.mur span.raye { color: var(--texte-3); opacity: 0.55; }
.mur span.raye::after {
  content: ""; position: absolute; left: 0; right: 8px; top: 52%;
  height: 1px; background: var(--refus); opacity: 0.75;
  transform: scaleX(1); transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  .mur span.raye::after { animation: rature-fine 520ms cubic-bezier(0.7, 0, 0.2, 1) both; animation-delay: var(--d, 0ms); }
  @keyframes rature-fine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.mur span.vivant {
  color: var(--retenu); opacity: 1; font-weight: 700;
  /* Elles sont le sujet du titre : sans traitement fort, le « Trois postes » ne se
     voit nulle part dans l image. Filet vert a gauche, halo tres leger, echelle. */
  padding-left: 7px; font-size: 12px;
  text-shadow: 0 0 18px color-mix(in srgb, var(--retenu) 55%, transparent);
}
.mur span.vivant::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px;
  background: var(--retenu);
}

/* La contrainte de largeur porte sur le TITRE, pas sur le bloc : appliquée au bloc, elle
   cassait le paragraphe tous les quatre mots. */
.heros-contenu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.3rem; max-width: min(52ch, 56%); }
.heros h1 { margin: 0; max-width: 11ch; }
@media (max-width: 1080px) { .heros-contenu { max-width: min(52ch, 72%); } }
.heros h1 .ligne { display: block; }
.heros h1 .raye-fort { position: relative; display: inline-block; }
.heros h1 .raye-fort::after {
  content: ""; position: absolute; left: -0.03em; right: -0.03em; top: 55%;
  height: 0.07em; background: var(--refus); transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  .heros h1 .raye-fort::after { animation: rature 760ms cubic-bezier(0.7, 0, 0.2, 1) 620ms both; }
  @keyframes rature { from { transform: scaleX(0) skewX(-12deg); } to { transform: scaleX(1) skewX(0); } }
}

.heros .sous { font-size: clamp(1.05rem, 1.35vw, 1.2rem); max-width: 44ch; color: var(--texte-2); margin: 0; }
.heros .actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
.heros .preuve-ligne { font-size: 0.85rem; color: var(--texte-3); display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; }
.heros .preuve-ligne b { font-family: "Aptenda Chiffre", monospace; color: var(--texte); font-weight: 700; }

@media (max-width: 900px) { .heros-contenu { max-width: none; } .mur { opacity: 0.3; } }

/* ============================================================ sections */

.section { padding-block: clamp(4rem, 9vw, 8rem); position: relative; }
.section.claire { background: var(--encre-2); }
.section.trait { border-top: 1px solid var(--trait); }

/* La contrainte etroite porte sur le TITRE seul. Posee sur le bloc, elle etranglait
   le paragraphe a six mots par ligne — le meme defaut que dans le heros, deux fois. */
.titre-section { display: grid; gap: 0.9rem; margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.titre-section h2 { max-width: 15ch; }
.titre-section p { max-width: 58ch; }

/* ---- la fiche de verdict : le produit, montré grandeur nature ---- */

.duo-verdict {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: start;
}
.fiche {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: 3px; padding: 1.4rem 1.5rem 1.5rem;
  position: relative; overflow: hidden;
}
.fiche.retenue { border-color: color-mix(in srgb, var(--retenu) 45%, var(--trait)); }
.fiche.retenue::before,
.fiche.ecartee::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; }
.fiche.retenue::before { background: var(--retenu); }
.fiche.ecartee::before { background: var(--refus); }
.fiche .haut { display: flex; align-items: flex-start; gap: 1rem; justify-content: space-between; margin-bottom: 0.2rem; }
.fiche .score { font-family: "Aptenda Chiffre", monospace; font-size: 2.6rem; font-weight: 700; line-height: 1; }
.fiche.retenue .score { color: var(--retenu); }
.fiche.ecartee .score { color: var(--refus); }
.fiche .verdict-mot { font-family: "Aptenda Chiffre", monospace; font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; padding: 0.2rem 0.5rem; border: 1px solid currentColor; }
.fiche.retenue .verdict-mot { color: var(--retenu); }
.fiche.ecartee .verdict-mot { color: var(--refus); }
.fiche .poste { font-size: 1.24rem; font-weight: 700; line-height: 1.2; margin: 0.7rem 0 0.15rem; color: var(--texte); }
.fiche.ecartee .poste { text-decoration: line-through; text-decoration-color: var(--refus); text-decoration-thickness: 2px; color: var(--texte-2); }
.fiche .ou { font-size: 0.9rem; color: var(--texte-3); margin: 0 0 0.9rem; }
.fiche ul { margin: 0; padding-left: 1.05rem; font-size: 0.93rem; color: var(--texte-2); }
.fiche ul li { margin-bottom: 0.3rem; }
.fiche .motif { color: var(--refus); font-size: 0.95rem; margin: 0.2rem 0 0; }
.fiche .jetons { display: flex; flex-wrap: wrap; gap: 0.32rem; margin-top: 0.95rem; }
.jeton { font-family: "Aptenda Chiffre", monospace; font-size: 0.64rem; letter-spacing: 0.05em; padding: 0.16rem 0.45rem; border: 1px solid var(--trait-vif); color: var(--texte-3); }
.jeton.alerte { color: var(--refus); border-color: color-mix(in srgb, var(--refus) 55%, transparent); }
.jeton.bon { color: var(--retenu); border-color: color-mix(in srgb, var(--retenu) 55%, transparent); }

/* ---- le graphique du marché : des barres, pas un tableau ---- */

.barres { display: grid; gap: 0.55rem; margin-top: 1.4rem; }
.barre-ligne { display: grid; grid-template-columns: minmax(120px, 15rem) minmax(0, 1fr) 5.5rem; gap: 1rem; align-items: center; font-size: 0.95rem; }
.barre-ligne .metier { color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-piste { height: 26px; background: var(--surface); position: relative; overflow: hidden; }
.barre-piste i {
  position: absolute; inset: 0 auto 0 0; display: block;
  background: linear-gradient(90deg, var(--trait-vif), var(--texte-3));
  width: var(--w, 0%);
}
.barre-piste i.neuf { background: linear-gradient(90deg, color-mix(in srgb, var(--retenu) 70%, transparent), var(--retenu)); }
.barre-ligne .n { font-family: "Aptenda Chiffre", monospace; text-align: right; color: var(--texte); }
@media (prefers-reduced-motion: no-preference) {
  .barre-piste i { animation: pousse 900ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--d, 0ms); }
  @keyframes pousse { from { width: 0; } }
}
@media (max-width: 640px) { .barre-ligne { grid-template-columns: minmax(0, 1fr) 4.5rem; } .barre-ligne .barre-piste { grid-column: 1 / -1; } }

/* ---- fac-similé : la lettre et le CV, sur papier, dans le noir ---- */

.papiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.2rem, 3vw, 2.6rem); align-items: start; }
.feuille-papier {
  background: var(--papier); color: var(--papier-encre);
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.75);
  font-size: 0.95rem; line-height: 1.66;
  position: relative;
}
.feuille-papier p { color: inherit; max-width: none; }
.feuille-papier .signature { font-family: "Aptenda Accent", Georgia, serif; font-size: 1.15rem; }
.feuille-papier.penchee { transform: rotate(-1.1deg); }
.feuille-papier.penchee-inverse { transform: rotate(0.8deg); }
.feuille-papier.barree p { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--refus) 70%, transparent); }
.annotation {
  position: absolute; right: -0.6rem; top: -0.9rem;
  font-family: "Aptenda Chiffre", monospace; font-size: 0.68rem; letter-spacing: 0.08em;
  background: var(--refus); color: #fff; padding: 0.32rem 0.6rem; text-transform: uppercase;
}
.annotation.bonne { background: var(--retenu); color: #04241a; }

/* ---- double lecture du CV : ce qu'on voit / ce que la machine lit ---- */

.double-lecture { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 0; border: 1px solid var(--trait); }
.double-lecture > div { padding: clamp(1.2rem, 2.4vw, 1.9rem); }
.double-lecture > div + div { border-left: 1px solid var(--trait); }
@media (max-width: 660px) { .double-lecture > div + div { border-left: 0; border-top: 1px solid var(--trait); } }
.lecture-machine { font-family: "Aptenda Chiffre", monospace; font-size: 0.78rem; line-height: 1.72; color: var(--texte-2); background: var(--encre); }
.lecture-machine mark { background: color-mix(in srgb, var(--retenu) 22%, transparent); color: var(--retenu); padding: 0 2px; }

/* ---- pays ---- */

.pays-rangee { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.pays-puce { border: 1px solid var(--trait); padding: 0.55rem 0.75rem; display: grid; gap: 0.2rem; min-width: 118px; background: var(--surface); }
.pays-puce b { font-family: "Aptenda Chiffre", monospace; font-size: 0.82rem; letter-spacing: 0.08em; }
.pays-puce span { font-size: 0.74rem; color: var(--texte-3); }
.pays-puce span.non { color: var(--refus); }
.pays-puce span.oui { color: var(--retenu); }

/* ---- chiffres ---- */

.compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); border: 1px solid var(--trait); background: var(--surface); }
.compteur { padding: 1.2rem 1.3rem; border-right: 1px solid var(--trait); display: grid; gap: 0.2rem; }
.compteur:last-child { border-right: 0; }
.compteur .valeur { font-family: "Aptenda Chiffre", monospace; font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 700; line-height: 1; color: var(--texte); }
.compteur .quoi { font-size: 0.83rem; color: var(--texte-3); }
.compteur .delta { font-family: "Aptenda Chiffre", monospace; font-size: 0.75rem; color: var(--retenu); }
.compteur .delta.baisse { color: var(--refus); }
@media (max-width: 700px) { .compteur { border-right: 0; border-bottom: 1px solid var(--trait); } }

/* ---- listes de fond ---- */

.rangs { display: grid; border-top: 1px solid var(--trait); }
/* Plus de numeros « 01 · 02 · 03 » : c est un tell de la liste noire maison, et il
   s etait glisse ici. Le rythme vient desormais du filet et de la colonne, pas d un
   compteur decoratif qui n apprend rien a personne. */
.rang { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.35fr); gap: clamp(0.8rem, 2.6vw, 2.6rem); padding: 1.6rem 0; border-bottom: 1px solid var(--trait); align-items: start; position: relative; }
.rang::before { content: ""; position: absolute; left: -1.1rem; top: 1.9rem; width: 0; height: 0; border-left: 4px solid var(--refus); transition: height 420ms cubic-bezier(0.16,1,0.3,1); }
.rangs:hover .rang::before, .rang:hover::before { height: 1.1rem; }

.rang h3 { margin: 0; }
.rang p { margin: 0; }
@media (max-width: 780px) { .rang { grid-template-columns: 1fr; gap: 0.45rem; } }

/* ---- citation ---- */

.citation { border-left: 3px solid var(--refus); padding-left: 1.3rem; margin: 2rem 0; }
.citation q { font-family: "Aptenda Accent", Georgia, serif; font-size: clamp(1.2rem, 2.1vw, 1.55rem); line-height: 1.45; color: var(--texte); quotes: none; display: block; }
.citation cite { display: block; font-style: normal; font-size: 0.85rem; color: var(--texte-3); margin-top: 0.7rem; }

/* ---- tableau ---- */

.tableau { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.tableau th, .tableau td { text-align: left; padding: 0.62rem 0.7rem; border-bottom: 1px solid var(--trait); }
.tableau th { font-family: "Aptenda Chiffre", monospace; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-3); font-weight: 400; }
.tableau td { color: var(--texte-2); }
.tableau td.n { font-family: "Aptenda Chiffre", monospace; text-align: right; color: var(--texte); }

/* ---- tarifs ---- */

.tarifs { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); border: 1px solid var(--trait); }
.tarif { padding: 1.7rem 1.5rem; border-right: 1px solid var(--trait); display: flex; flex-direction: column; gap: 0.9rem; background: var(--surface); }
.tarif:last-child { border-right: 0; }
.tarif.retenu { background: var(--surface-2); box-shadow: inset 0 3px 0 var(--refus); }
.tarif .prix { font-family: "Aptenda Chiffre", monospace; font-size: 2.5rem; font-weight: 700; line-height: 1; color: var(--texte); }
.tarif ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: 0.9rem; }
.tarif li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.4rem; align-items: start; color: var(--texte-2); }
.tarif li .m { font-family: "Aptenda Chiffre", monospace; }
.tarif li.present .m { color: var(--retenu); }
.tarif li.absent { color: var(--texte-3); }
.tarif li.absent .m { color: var(--refus); }
@media (max-width: 820px) { .tarif { border-right: 0; border-bottom: 1px solid var(--trait); } }

/* ---- appel final ---- */

.final { padding-block: clamp(4rem, 10vw, 9rem); text-align: left; }
.final h2 { max-width: 16ch; }

/* ---- pied ---- */

.pied { border-top: 1px solid var(--trait); padding-block: 2.6rem 3.4rem; font-size: 0.9rem; }
.pied .cadre { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.8rem; }
.pied h4 { font-family: "Aptenda Chiffre", monospace; font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--texte-3); font-weight: 400; margin: 0 0 0.7rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.32rem; }
.pied a { color: var(--texte-2); text-decoration: none; }
.pied a:hover { color: var(--texte); }

/* ---- entrée en scène, réservée ---- */

@media (prefers-reduced-motion: no-preference) {
  .entree { opacity: 0; transform: translateY(18px); transition: opacity var(--t-long), transform var(--t-long); }
  .entree.vue { opacity: 1; transform: none; }
}

/* ---- article ---- */

.corps-article h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 2.2rem; }
.corps-article ol, .corps-article ul { color: var(--texte-2); max-width: var(--mesure); }
.corps-article li { margin-bottom: 0.5rem; }
.corps-article strong { color: var(--texte); }

/* ============================================================================
   CORRECTIONS D'AUDIT VISUEL — 28/08/2026
   Trouvées en regardant les captures, pas en relisant le code. Chaque bloc dit ce
   qu'il répare, pour qu'on ne le défasse pas par mégarde.
   ========================================================================== */

/* --- 1. Le débordement horizontal sur mobile.
   La barre de navigation ne se replie jamais : ses six éléments imposent une largeur
   minimale d'environ 460 px, et `overflow-x: hidden` sur le corps ne l'empêche pas,
   il la MASQUE. D'où le texte coupé au bord de l'écran sur toutes les pages.
   La barre se replie donc, et le corps refuse toute largeur supérieure à l'écran. */
html, body { max-width: 100%; }
.barre .cadre { flex-wrap: wrap; row-gap: 0.4rem; }
.nav { flex-wrap: wrap; row-gap: 0.4rem; }

@media (max-width: 720px) {
  .barre .cadre { padding-block: 0.55rem; }
  .nav { width: 100%; margin-left: 0; gap: 0.9rem; font-size: 0.88rem; justify-content: flex-start; }
  .nav .bouton { padding: 0.55rem 1rem; font-size: 0.9rem; margin-left: auto; }
  /* Les liens secondaires cèdent la place : sur un écran de 390 px, « Guides » et
     « Tarifs » ne valent pas de couper le titre de la page. */
  .nav a.secondaire { display: none; }
}

/* --- 2. Les grands vides verticaux.
   `min-height: 84vh` a été posée pour le héros de l'accueil, qui porte le mur. Sur les
   pages courtes (marché, tarifs), elle produit trois cents pixels de néant sous un
   titre. La hauteur ne s'impose donc qu'à l'accueil, là où elle sert. */
.heros { min-height: 0; }
.heros:has(.mur) { min-height: min(84vh, 760px); }

/* --- 3. Les héros SANS mur ont leur propre mesure.
   `max-width: 11ch` sur le titre était juste pour « Trois postes. » ; appliquée à
   « Ce que tu paies, et ce que tu ne paies pas. », elle produit quatre lignes de 7 rem.
   Illisible, et ridicule. */
.heros:not(:has(.mur)) { padding-block: clamp(2.4rem, 4vw, 3.6rem) clamp(1.6rem, 3vw, 2.6rem); }
.heros:not(:has(.mur)) h1 { max-width: 22ch; font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
.heros:not(:has(.mur)) .heros-contenu { max-width: min(64ch, 100%); }

/* --- 4. Les symboles des chiffres flottaient.
   La chasse +8 de la police de données sépare « 0 » de « € », « 25 » de « % ». Elle
   sert aux tableaux, pas aux grands nombres : on la reprend là où c'est gros. */
.compteur .valeur, .tarif .prix, .fiche .score, .apercu-marche .gros { letter-spacing: -0.04em; }
.tarif .prix span { letter-spacing: normal; }

/* --- 5. La classe orpheline : RÉGLÉE À LA SOURCE.
   Les compteurs des pages marché portaient `grille-compteurs`, nom d'une classe supprimée
   à la refonte : sans définition, ils s'empilaient en colonne. Le gabarit a été renommé en
   `compteurs` plutôt que d'ajouter un alias — un seul nom pour une seule chose. */

/* --- 6. Tout ce qui peut dépasser est borné.
   Un tableau large, un bloc de code, une longue URL : chacun se débrouille dans sa
   propre boîte au lieu de pousser la page. */
img, svg, video, table, pre { max-width: 100%; }
pre { overflow-x: auto; }
.tableau { min-width: 100%; }
.defilable { -webkit-overflow-scrolling: touch; }

/* --- 7. Le rythme vertical, mesuré au lieu d'être ressenti.
   `.section { padding-block: clamp(4rem, 9vw, 8rem) }` empilait deux fois 128 px entre deux
   sections : 271 px de rien sur les pages courtes, 292 px sur /marche. Mesuré, pas estimé.
   Un intervalle sépare ; passé deux cents pixels il abandonne le lecteur en route. On vise
   une centaine de pixels entre deux sections, et un peu moins juste après un héros — qui a
   déjà son propre souffle. */
.section { padding-block: clamp(2.6rem, 5.2vw, 4.4rem); }
.heros + .section, .heros + * > .section:first-child { padding-top: clamp(1.8rem, 3.4vw, 2.8rem); }
.final { padding-block: clamp(3rem, 6vw, 5.2rem); }

/* Le rail de section (« [ questions ] ») annonce ce qui suit : il lui est collé, pas
   suspendu au milieu du vide. */
.section > .rail:first-child, .rail + h2 { margin-top: 0; }
.rail { margin-bottom: 0.9rem; }

/* --- 8. « 29 € par mois » : la périodicité n'est pas un chiffre.
   Le span héritait de la police de données, chasse comprise : « par mois » s'étalait comme
   une référence de facture. Il revient au corps de texte, où il n'attire pas l'œil. */
.tarif .prix span { font-family: "Aptenda Corps", ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; color: var(--texte-3); }

/* --- Le passe : payer une fois pour la durée de la recherche.
   Il se pose sous le prix mensuel, en plus petit, avec un filet à gauche — c'est une
   alternative, pas une promotion. Aucun badge, aucune couleur criarde : un prix qui a besoin
   d'un autocollant pour se vendre n'est pas un bon prix. */
.tarif .passe {
  margin: 0.35rem 0 0.9rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--retenu);
  font-family: "Aptenda Chiffre", ui-monospace, monospace;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  color: var(--texte);
}
.tarif .passe span {
  display: block;
  font-family: "Aptenda Corps", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0;
  color: var(--texte-3);
  margin-top: 2px;
}

/* --- La garantie de sortie. C'est un engagement, pas une mention légale : il occupe la
   largeur, sous la grille, entre deux filets. */
.garantie { margin-top: 2rem; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); padding: 1.3rem 0; }
.garantie-texte { margin: 0.5rem 0 0; max-width: 70ch; font-size: 1.06rem; line-height: 1.55; }

/* --- `.serre` : trente usages dans le balisage, zéro définition.
   Trouvé en regardant une phrase mal rendue dans l'atelier, pas en relisant le code. La
   classe sert partout à coller un paragraphe à ce qui le précède — c'était son intention,
   elle n'avait simplement jamais été écrite, et le navigateur appliquait donc la marge par
   défaut du paragraphe. Deuxième fois ce soir qu'une classe est posée sans exister
   (cf. `grille-compteurs`) : le balisage et la feuille de style ne se parlent que si
   quelqu'un vérifie. */
.serre { margin-top: 0.35rem; margin-bottom: 0; }
p.serre + p.serre { margin-top: 0.5rem; }

/* ============================================================================
   QUATRE CLASSES POSÉES DANS LE BALISAGE ET JAMAIS ÉCRITES
   Trouvées en énumérant TOUTES les classes du balisage et en les cherchant dans la feuille
   de style, après en avoir découvert une par hasard. C'est la bonne façon : on corrige le
   défaut qu'on voit, alors que la question est toujours « où ailleurs ? ».
   Sans définition, le navigateur applique ses valeurs par défaut — ça ne casse rien de
   visible, ça rend seulement une mise en page qui n'a jamais été celle qu'on avait dessinée.
   ========================================================================== */

/* Le rail en marge : c'est le geste éditorial de toute la direction artistique — l'intitulé
   de section à gauche, le contenu à droite. Il s'écrivait dans le balisage depuis le début
   et ne s'est jamais posé : le rail restait au-dessus, comme un surtitre. */
.avec-rail { display: grid; grid-template-columns: minmax(120px, 15%) minmax(0, 1fr); gap: 0 clamp(1.4rem, 3vw, 3rem); align-items: start; }
.avec-rail > .rail { margin: 0.5rem 0 0; }
@media (max-width: 800px) {
  .avec-rail { grid-template-columns: minmax(0, 1fr); }
  .avec-rail > .rail { margin-bottom: 0.7rem; }
}

/* Les blocs de questions : deux colonnes de filets nets, sans carte ni ombre. */
.blocs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 0; border-top: 1px solid var(--trait); }
.bloc { padding: 1.1rem 0 1.2rem; border-bottom: 1px solid var(--trait); }
.blocs .bloc + .bloc { border-left: 0; }
@media (min-width: 861px) {
  .blocs .bloc:nth-child(odd) { padding-right: 2rem; }
  .blocs .bloc:nth-child(even) { padding-left: 2rem; border-left: 1px solid var(--trait); }
}
.bloc h3 { margin: 0 0 0.4rem; font-size: 1.02rem; }
.bloc p { margin: 0; color: var(--texte-2); }

/* Une liste de liens en colonnes, pour les guides voisins en bas d'article. */
.colonnes { columns: 2; column-gap: 2.2rem; }
.colonnes p { margin: 0 0 0.5rem; break-inside: avoid; }
@media (max-width: 620px) { .colonnes { columns: 1; } }