/* ═══════════════════════════════════════════════════════════════════════════
   🔎 L'ANALYSE — feuille de style.

   ⚠️ TOUT S'EXPRIME EN VARIABLES DU THÈME. Une couleur écrite en dur ici
   survivrait au passage en sombre et au changement d'accent réglé en
   administration : elle deviendrait illisible, et l'on croirait à un bogue de
   contraste alors que c'est une valeur oubliée.

   ⚠️ LA PAGE PREND TOUTE LA LARGEUR DISPONIBLE. Les grilles descendent en une
   colonne par paliers, sans jamais enfermer le texte dans une demi-largeur.
   ═══════════════════════════════════════════════════════════════════════════ */

.an,
.an-res,
.an-jeu { padding-bottom: 56px; }

.pg-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ═════════════════════════ L'ÉCRAN D'ANALYSE ═════════════════════════ */

/* ⚠️ « overflow: clip » ET NON « hidden ». Les vues masquées sont posées en
   absolu et décalées : en « hidden », leur décalage ajoutait un ascenseur
   horizontal fantôme et un trou sous le pied de page — mesuré ici même sur le
   simulateur, et corrigé de la même façon. */
/* ⚠️ LA MARGE QUI ÉVITE L'EN-TÊTE COLLANT. Sans elle, amener une vue à l'écran
   aligne son haut sur le haut de la FENÊTRE, et le titre de la carte se retrouve
   derrière la barre de navigation. Le navigateur applique cette marge lui-même :
   c'est plus sûr qu'un calcul en JavaScript, qui se désynchroniserait de la
   hauteur réelle de l'en-tête au premier changement de thème. */
.an-vue { display: none; scroll-margin-top: 86px; }
.an-vue--on { display: block; animation: an-entree .35s ease both; }

@keyframes an-entree {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .an-vue--on { animation: none; }
}

/* ── L'invitation ── */
.an-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 34px;
  align-items: start;
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  padding: 30px 32px;
  margin-top: 26px;
}

.an-hero__txt h2 { margin: 0 0 12px; font-size: 22px; letter-spacing: -.02em; }
.an-hero__txt p  { margin: 0 0 14px; color: var(--ink-2); line-height: 1.68; font-size: 15px; }

.an-hero__franc {
  background: color-mix(in srgb, var(--vert) 8%, transparent);
  border-left: 3px solid var(--vert);
  border-radius: 0 8px 8px 0;
  padding: 11px 14px;
  font-size: 14px;
}

.an-liste { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }

.an-liste li {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--ligne);
}

.an-liste li b    { font-size: 14.5px; }
.an-liste li span { color: var(--ink-2); font-size: 14px; line-height: 1.6; }

.an-hero__cta {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: 14px;
  padding: 22px;
  text-align: center;
  position: sticky;
  top: 90px;
}

.an-hero__cta .pg-btn { width: 100%; justify-content: center; }

.an-hero__note {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.6;
}

/* ── Le relevé en cours ── */
.an-scan {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  grid-template-areas: "jauge titre" "jauge etapes" "suite suite";
  gap: 8px 30px;
  align-items: start;
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  box-shadow: var(--ombre-f);
  padding: 32px;
  margin-top: 26px;
}

.an-jauge { grid-area: jauge; position: relative; width: 168px; height: 168px; }
.an-jauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }

.an-jauge__f {
  fill: none; stroke: var(--ligne); stroke-width: 9;
}

.an-jauge__a {
  fill: none;
  stroke: var(--accent);
  stroke-width: 9;
  stroke-linecap: round;
  /* 2πr, r = 52 */
  stroke-dasharray: 326.7;
  stroke-dashoffset: 326.7;
  transition: stroke-dashoffset .5s cubic-bezier(.22,.61,.36,1);
}

.an-jauge__c {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 1px;
}

.an-jauge__c b { font-size: 40px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.an-jauge__c i { font-size: 17px; color: var(--ink-3); font-style: normal; }

.an-scan__txt { grid-area: titre; }
.an-scan__txt h2 { margin: 4px 0 6px; font-size: 21px; letter-spacing: -.02em; }
.an-scan__txt p  { margin: 0 0 16px; color: var(--ink-2); font-size: 14.5px; }

.an-etapes {
  grid-area: etapes;
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2px;
}

.an-etapes li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 14.5px;
  /* En attente : présent mais effacé. Faire apparaître les lignes une à une
     empêcherait de voir ce qui reste à faire. */
  opacity: .34;
  transition: opacity .3s, background .3s;
}

.an-etapes li[data-etat="cours"] {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.an-etapes li[data-etat="ok"],
.an-etapes li[data-etat="nsp"] { opacity: 1; }

.an-e__p { font-size: 17px; text-align: center; }
.an-e__l { color: var(--ink-2); }

.an-e__v {
  font-weight: 600;
  font-size: 14px;
  text-align: right;
  color: var(--ink-3);
  max-width: 340px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.an-etapes li[data-etat="ok"]  .an-e__v { color: var(--vert); }
.an-etapes li[data-etat="nsp"] .an-e__v { color: var(--ambre); }

.an-etapes li[data-etat="cours"] .an-e__p {
  animation: an-pulse 1s ease-in-out infinite;
}

@keyframes an-pulse { 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  .an-etapes li[data-etat="cours"] .an-e__p { animation: none; }
}

/* Le bouton qui rend la main après la lecture du relevé. Il occupe la largeur
   de la colonne des étapes pour être évident : c'est la seule action à faire
   à ce moment-là. */
.an-suite {
  grid-area: suite;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--ligne);
  text-align: center;
  animation: an-entree .3s ease both;
}

.an-suite .pg-btn { min-width: 260px; justify-content: center; }

.an-suite__x {
  margin: 12px auto 0;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.6;
  max-width: 62ch;
}

/* ── Ce qui manque ── */
.an-tete { margin: 30px 0 20px; }
.an-tete h2 { margin: 0 0 10px; font-size: 22px; letter-spacing: -.02em; }
.an-tete p  { margin: 0; color: var(--ink-2); line-height: 1.7; font-size: 15px; max-width: 78ch; }

.an-voies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.an-voie {
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  overflow: hidden;
  display: flex; flex-direction: column;
}

.an-voie--agent { border-color: color-mix(in srgb, var(--accent) 30%, var(--ligne)); }

.an-voie__h {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--ligne);
}

.an-voie__e { font-size: 26px; }
.an-voie__h b { display: block; font-size: 16px; }
.an-voie__h i { display: block; font-size: 12.5px; color: var(--ink-3); font-style: normal; margin-top: 2px; }

.an-voie__b { padding: 22px; display: grid; gap: 18px; align-content: start; flex: 1; }

.an-champ label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 7px; }

.an-champ select,
.an-champ textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ligne);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
}

.an-champ textarea { resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }

.an-champ select:focus,
.an-champ textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.an-champ .pg-btn { margin-top: 9px; }

.an-aide { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.an-aide--ou { border-top: 1px dashed var(--ligne); padding-top: 8px; margin-top: 10px; }
.an-aide b { color: var(--ink-2); }

.an-aide kbd {
  font: inherit; font-size: 11.5px;
  background: var(--surface); border: 1px solid var(--ligne);
  border-radius: 5px; padding: 1px 5px;
}

.an-aide--ok  { color: var(--vert); font-weight: 600; }
.an-aide--err { color: var(--rouge); font-weight: 600; }

.an-regles { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }

.an-regles li {
  font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
  padding-left: 2px;
}

.an-regles li b { display: block; color: var(--ink); font-size: 14px; margin-bottom: 2px; }

/* ══════════════════ LES TROIS ÉTAPES DE LA PAGE D'ANALYSE ══════════════════
   ⚠️ CES RÈGLES MANQUAIENT PUREMENT ET SIMPLEMENT. Le gabarit a été réécrit en
   `<article class="an-pas"><span class="an-pas__n">1</span><div class="an-pas__c">`,
   mais le CSS était resté celui du balisage d'avant — une simple liste à
   `padding-left`. Résultat mesuré : `.an-pas` tombait en grille d'UNE colonne
   de 722 px, et `.an-pas__n` s'étalait en bloc pleine largeur, sans fond, en
   13,5 px. Les numéros 1, 2 et 3 flottaient donc nus au-dessus de leur propre
   texte : c'est exactement ce qui donnait à la page son air inachevé.

   Quatre classes du gabarit n'avaient AUCUNE règle : `an-pas__n`, `an-pas__c`,
   `an-pas--fort`, `an-pas__meta` — plus `an-dl` et `an-beta`. */
.an-pas {
  position: relative;
  margin: 0 0 4px;
  padding: 0 0 22px 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0 16px;
  align-items: start;
  font-size: 13.5px; color: var(--ink-2); line-height: 1.6;
}

/* Le trait qui relie les étapes : sans lui, trois blocs numérotés ne se lisent
   pas comme une SUITE d'actions mais comme trois encarts sans rapport. Le
   dernier n'en a pas — il n'y a rien après lui. */
.an-pas::before {
  content: ''; position: absolute;
  left: 16px; top: 38px; bottom: 6px; width: 2px;
  background: var(--ligne); border-radius: 2px;
}
.an-pas:last-child { padding-bottom: 0; }
.an-pas:last-child::before { display: none; }

.an-pas__n {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 4px var(--carte);
}

.an-pas__c { min-width: 0; padding-top: 4px; }
.an-pas__c > h3 { margin: 0 0 7px; font-size: 16px; letter-spacing: -.01em; color: var(--ink); }
.an-pas__c > p  { margin: 0 0 10px; }
.an-pas__c > p:last-child { margin-bottom: 0; }

/* L'étape qui DEMANDE un geste se distingue des deux qui informent. */
.an-pas--fort .an-pas__c {
  padding: 14px 16px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 12px;
}

/* Le poids du fichier et sa date : des faits secondaires, en puces, pas une
   phrase de plus au milieu des instructions. */
.an-pas__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin: 10px 0 12px; font-size: 11.5px; color: var(--ink-3);
}
.an-pas__meta > span {
  padding: 3px 9px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--ligne);
}

.an-beta {
  background: color-mix(in srgb, var(--ambre) 15%, transparent) !important;
  border-color: color-mix(in srgb, var(--ambre) 35%, transparent) !important;
  color: var(--ambre) !important;
  font-weight: 700; letter-spacing: .06em;
}

/* ⚠️ LE BOUTON DE TÉLÉCHARGEMENT NE S'ÉTIRE PAS SUR TOUTE LA LARGEUR. Un
   bouton de 720 px de long ne se lit plus comme un bouton mais comme un
   bandeau, et son libellé part se perdre au milieu. */
.an-dl { margin-top: 4px; max-width: 420px; justify-content: center; }

.an-pas code {
  background: var(--surface); border: 1px solid var(--ligne);
  border-radius: 5px; padding: 1px 6px; font-size: 12.5px;
}

@media (max-width: 560px) {
  .an-pas { grid-template-columns: 28px minmax(0, 1fr); gap: 0 12px; }
  .an-pas::before { left: 13px; top: 32px; }
  .an-pas__n { width: 28px; height: 28px; font-size: 13.5px; }
  .an-pas--fort .an-pas__c { padding: 12px 13px; }
  .an-dl { max-width: none; width: 100%; }
}

.an-fin {
  margin-top: 26px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  padding: 26px;
}

.an-fin .pg-btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }
.an-passer { display: block; margin: 12px auto 0; font-size: 13.5px; }
.an-fin__note { margin: 12px auto 0; font-size: 12.5px; color: var(--ink-3); max-width: 66ch; line-height: 1.6; }

/* Le message qui s'affiche quand le script n'est jamais arrivé. Il doit se
   voir sans le moindre JavaScript : tout est en CSS, l'attribut « hidden »
   suffit à le tenir caché le reste du temps. */
.an-bloque {
  width: 100%; max-width: var(--large); margin: 26px auto 0;
  background: color-mix(in srgb, var(--rouge) 7%, var(--carte));
  border: 1px solid color-mix(in srgb, var(--rouge) 30%, var(--ligne));
  border-radius: var(--radius);
  padding: 22px 26px;
}

.an-bloque b { display: block; font-size: 17px; margin-bottom: 10px; }
.an-bloque p { margin: 0 0 10px; color: var(--ink-2); line-height: 1.65; font-size: 14.5px; max-width: 84ch; }
.an-bloque code {
  background: var(--surface); border: 1px solid var(--ligne);
  border-radius: 5px; padding: 1px 6px; font-size: 12.5px;
}
.an-bloque__f { font-size: 13px !important; color: var(--ink-3) !important; }

.an-echec, .an-perdu {
  margin-top: 26px;
  background: color-mix(in srgb, var(--rouge) 6%, var(--carte));
  border: 1px solid color-mix(in srgb, var(--rouge) 28%, var(--ligne));
  border-radius: var(--radius);
  padding: 26px;
}

.an-perdu { background: var(--surface); border-color: var(--ligne); }
.an-echec b { display: block; font-size: 17px; margin-bottom: 8px; }
.an-echec p { margin: 0 0 16px; color: var(--ink-2); line-height: 1.65; }
.an-echec__b { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ═════════════════════════ LE RÉSULTAT D'ENSEMBLE ═════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   LA MISE EN PAGE DU RÉSULTAT
   ───────────────────────────────────────────────────────────────────────────
   ⚠️ TROIS RANGÉES, ET PLUS SIX BLOCS À LA FILE. La page mesurait 4 400
   pixels de haut, tout en pleine largeur, du même poids visuel du premier au
   dernier : on ne savait pas où regarder, et ce qui venait après la liste des
   jeux — comparer, la méthode — ne se voyait jamais.

     1. la machine, et à côté ce qu'elle vaut ;
     2. ce qu'il faudrait changer, en pleine largeur (ce sont des cartes) ;
     3. les jeux, et à côté ce qui se consulte pendant qu'on les parcourt.

   ⚠️ TOUT REDEVIENT UNE COLONNE SOUS 1080 px. Deux colonnes sur un écran
   étroit, c'est deux colonnes illisibles plutôt qu'une lisible.
   ═══════════════════════════════════════════════════════════════════════════ */
.an-haut {
  display: grid; gap: 20px; align-items: start;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  margin-top: 26px;
}
.an-haut > .an-machine { margin-top: 0; }

/* La dernière rangée : comparer d'un côté, la méthode de l'autre. Deux blocs
   courts qui se lisent après la liste, pas pendant. */
.an-bas {
  display: grid; gap: 20px; align-items: start;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  margin-top: 34px;
}
.an-bas > * { margin-top: 0; min-width: 0; }

@media (max-width: 1080px) {
  .an-haut, .an-bas { grid-template-columns: minmax(0, 1fr); }
}

/* ── Le bilan, à côté de la configuration ──────────────────────────────
   ⚠️ « an-chiffres » ET NON « an-bilan » : ce dernier habille déjà la carte de
   verdict de la fiche d'analyse d'un jeu. Deux blocs différents sous le même
   nom, c'est la panne qu'on ne rapproche jamais de sa cause. */
.an-chiffres {
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  padding: 22px 24px;
  display: flex; flex-direction: column;
}
.an-chiffres .an-h2 { font-size: 19px; margin-bottom: 14px; }

/* Les trois chiffres s'empilent : côte à côte dans une colonne de 380 px, le
   nombre tiendrait sur deux caractères et le libellé sur quatre lignes. */
.an-chiffres .an-trio { grid-template-columns: minmax(0, 1fr); margin: 0 0 12px; }
.an-chiffres .an-trio__c { flex-direction: row; align-items: baseline; gap: 10px; }
.an-chiffres .an-trio__c b { font-size: 26px; }
.an-chiffres .an-trio__x { margin-bottom: 14px; }
.an-chiffres__voir { align-self: flex-start; margin-top: auto; }

.an-machine {
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  padding: 26px 28px;
  margin-top: 26px;
}

.an-machine__h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px;
}

.an-machine__h h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.an-machine__b { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.an-src, .an-qual {
  font-size: 12px; font-weight: 600;
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--ligne);
  background: var(--surface); color: var(--ink-2);
}

.an-src--agent {
  background: color-mix(in srgb, var(--vert) 12%, transparent);
  border-color: color-mix(in srgb, var(--vert) 35%, transparent);
  color: var(--vert);
}

/* ════════════════════════════════════════════════════════════════
   ⚠️ CINQ TUILES, DONC UN NOMBRE DE COLONNES CHOISI — PAS « auto-fit ».

   « auto-fit » en remplit autant que la largeur permet : à 1440 pixels, il en
   plaçait QUATRE sur la première ligne et laissait la cinquième seule en
   dessous. Un orphelin sur une rangée se lit comme un oubli de mise en page,
   pas comme une intention.

   Le nombre de tuiles est FIXE ici — processeur, carte, mémoire, écran,
   machine — donc on peut choisir des paliers où cinq se répartit proprement :
   cinq de front, puis trois plus deux, puis deux, puis une.
   ════════════════════════════════════════════════════════════════ */
/* ⚠️ « auto-fit » PLUTÔT QU'UN NOMBRE FIXE DE COLONNES. La configuration
   n'occupe plus toute la largeur : elle partage la rangée avec le bilan. Cinq
   colonnes imposées y donnaient des tuiles de 120 px, où « GeForce RTX 3060
   Laptop » tenait sur quatre lignes. Les tuiles se rangent maintenant selon la
   place réelle, quelle que soit la largeur de la colonne. */
.an-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 14px;
}
@media (max-width: 860px)  { .an-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .an-tuiles { grid-template-columns: minmax(0, 1fr); } }

.an-tuile {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: 12px;
  padding: 15px 16px;
}

.an-tuile--vide { border-style: dashed; }
.an-tuile__e { font-size: 22px; line-height: 1.2; }
.an-tuile i { display: block; font-style: normal; font-size: 11.5px; text-transform: uppercase;
              letter-spacing: .06em; color: var(--ink-3); margin-bottom: 3px; }
.an-tuile b { display: block; font-size: 15px; line-height: 1.35; }
.an-tuile b a { color: inherit; text-decoration: none; }
.an-tuile b a:hover { color: var(--accent); text-decoration: underline; }
.an-tuile > div > span { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }
.an-tuile--vide b { color: var(--ambre); }

.an-machine__act {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ligne);
}

.an-jeux { margin-top: 34px; }
.an-h2 { margin: 0 0 6px; font-size: 21px; letter-spacing: -.02em; }
.an-h2__x { margin: 0 0 20px; color: var(--ink-2); font-size: 14.5px; max-width: 82ch; line-height: 1.65; }

/* ⚠️ ICI « auto-fill » RESTE JUSTE : le nombre de jeux VARIE, on ne peut donc
   pas choisir un nombre de colonnes qui tombe rond. On resserre seulement les
   vignettes pour qu'il en tienne davantage par rangée, ce qui rend les rangées
   incomplètes plus rares et moins voyantes. */
.an-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 16px;
}

.an-carte {
  display: flex; flex-direction: column;
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: var(--ombre);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}

.an-carte:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-f);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--ligne));
}

.an-carte__img {
  aspect-ratio: 16 / 9; background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

.an-carte__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.an-carte__e { font-size: 40px; }

.an-carte__b { display: block; padding: 13px 15px 15px; }
.an-carte__b b { display: block; font-size: 14.5px; line-height: 1.35; margin-bottom: 8px; }

.an-carte__fps {
  display: block; font-size: 20px; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.an-carte__fps i { font-size: 12.5px; font-weight: 600; font-style: normal; color: var(--ink-3); }
.an-carte__set { display: block; font-size: 12px; color: var(--ink-3); margin-top: 3px; }

.an-carte__fps--excellent,
.an-carte__fps--tres_bon { color: var(--vert); }
.an-carte__fps--bon      { color: var(--ambre); }
.an-carte__fps--limite   { color: var(--ambre); }
.an-carte__fps--insuffisant { color: var(--rouge); }
.an-carte__fps--inconnu  { color: var(--ink-3); font-size: 15px; }

/* ⚠️ « display: flex » L'EMPORTERAIT SUR L'ATTRIBUT « hidden » : les cartes
   filtrées resteraient visibles. */
.an-carte[hidden], .an-outils[hidden], [data-anAucun][hidden], [data-anPlusZone][hidden] { display: none !important; }

.an-carte__fps--bloque { color: var(--rouge); font-size: 15px; }
.an-carte--bloque .an-carte__set {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.an-carte--bloque .an-carte__img img, .an-carte--inconnu .an-carte__img img { filter: grayscale(.6); opacity: .85; }

.an-tous { margin: 20px 0 0; }
.an-plus { margin: 20px 0 0; text-align: center; }

/* ── Le bilan en trois chiffres ── */
.an-trio {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  margin: 14px 0 18px;
}
.an-trio__c {
  background: var(--carte); border: 1px solid var(--ligne); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 2px;
  border-top: 3px solid var(--ligne);
}
.an-trio__c b { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.an-trio__c span { font-size: 12.5px; color: var(--ink-2); }
.an-trio__c--ok    { border-top-color: var(--vert); }
.an-trio__c--ok b  { color: var(--vert); }
.an-trio__c--moyen { border-top-color: var(--ambre); }
.an-trio__c--moyen b { color: var(--ambre); }
.an-trio__c--ko    { border-top-color: var(--rouge); }
.an-trio__c--ko b  { color: var(--rouge); }
.an-trio__x { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--ink-3); }

/* ── Les outils : filtres, recherche, tri ── */
.an-outils {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.an-filtres { display: flex; flex-wrap: wrap; gap: 6px; }
.an-filtre {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 12px; border-radius: 99px;
  background: var(--carte); color: var(--ink-2); border: 1px solid var(--ligne);
  transition: background .15s, border-color .15s, color .15s;
}
.an-filtre i { font-style: normal; font-weight: 700; margin-left: 4px; color: var(--ink-3); }
.an-filtre:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--ligne)); }
.an-filtre.actif { background: var(--accent); border-color: var(--accent); color: #fff; }
.an-filtre.actif i { color: rgba(255, 255, 255, .85); }
.an-filtre:focus-visible, .an-cherche:focus-visible, .an-tri:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.an-outils__d { display: flex; gap: 8px; flex-wrap: wrap; }
.an-cherche, .an-tri {
  font: inherit; font-size: 13.5px; padding: 8px 12px; border-radius: 10px;
  background: var(--carte); color: var(--ink); border: 1px solid var(--ligne);
}
.an-cherche { min-width: 200px; }

/* ── Que changer pour jouer mieux ? ── */
.an-up {
  margin-top: 34px; padding: 22px 24px;
  background: var(--carte); border: 1px solid var(--ligne); border-radius: 16px; box-shadow: var(--ombre);
}
.an-up__attente, .an-up__vide, .an-up__x, .an-up__note { margin: 8px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.an-up__note { font-size: 13px; color: var(--ink-3); }
.an-up__attente { display: flex; align-items: center; gap: 10px; }
.an-up__spin {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid var(--ligne); border-top-color: var(--accent);
  animation: an-tourne .8s linear infinite;
}
@keyframes an-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .an-up__spin { animation: none; } }

.an-up__frein {
  display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0;
  padding: 12px 14px; border-radius: 10px; font-size: 14.5px; line-height: 1.5;
  background: color-mix(in srgb, var(--ambre) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ambre) 30%, transparent);
}
.an-up__sim { margin: 18px 0 0; }
.an-h3 { margin: 22px 0 4px; font-size: 16px; }

.an-pistes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px;
  margin-top: 12px;
}
.an-piste {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 16px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--ligne);
}
.an-piste--top { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.an-piste__top {
  align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #fff; background: var(--accent); padding: 3px 8px; border-radius: 99px; margin-bottom: 4px;
}
.an-piste__palier { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.an-piste__nom { font-size: 16px; line-height: 1.3; }
.an-piste__nom a { color: inherit; text-decoration: none; }
.an-piste__nom a:hover { color: var(--accent); text-decoration: underline; }
.an-piste__gain { font-size: 24px; font-weight: 800; color: var(--vert); letter-spacing: -.02em; }
.an-piste__gain i { font-size: 13px; font-style: normal; font-weight: 600; color: var(--ink-2); }
.an-piste__x { margin: 2px 0 6px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.an-piste__jauge { height: 6px; border-radius: 99px; background: var(--ligne); overflow: hidden; margin-top: auto; }
.an-piste__jauge i { display: block; height: 100%; background: var(--vert); border-radius: inherit; }
.an-piste__note { font-size: 11.5px; color: var(--ink-3); line-height: 1.45; margin-top: 4px; }

.an-astuces { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.an-astuces li {
  display: flex; gap: 12px; padding: 12px 14px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--ligne);
}
.an-astuces li > span { font-size: 22px; line-height: 1; }
.an-astuces b { font-size: 14px; }
.an-astuces p { margin: 3px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.55; }

/* ── Partager : la carte, dans la colonne d'illustration de l'en-tête ── */
/* ⚠️ « display: block » est écrit exprès : l'ancien bloc de partage était une
   grille à deux colonnes, qui mettait la légende à côté d'une image réduite. */
.an-partage {
  display: block; margin: 0; width: 100%; overflow: hidden; justify-self: stretch;
  background: var(--carte); border: 1px solid var(--ligne); border-radius: 16px;
  box-shadow: var(--ombre);
}
/* La colonne d'illustration de l'en-tête est élargie sur cette page : à 400 px,
   la carte partagée paraissait minuscule sur un grand écran. */
@media (min-width: 981px) {
  .pg-page__in.an-entete { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 36px; }
}
.an-partage__img { width: 100%; height: auto; display: block; aspect-ratio: 1200 / 630; background: #0f172a; }
.an-partage figcaption { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.an-partage figcaption b { font-size: 15px; }
.an-partage figcaption > span { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.an-partage__b { display: flex !important; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

@media (max-width: 760px) {
  .an-trio { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .an-trio__c { flex-direction: row; align-items: baseline; gap: 10px; }
  .an-outils__d, .an-cherche, .an-tri { width: 100%; }
  .an-up { padding: 18px 16px; }
}

.an-vide {
  grid-column: 1 / -1;
  margin: 0; padding: 26px;
  background: var(--surface); border: 1px dashed var(--ligne); border-radius: 12px;
  color: var(--ink-2); font-size: 14px; line-height: 1.65;
}

.an-methode {
  margin-top: 34px;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
}

.an-methode b { display: block; margin-bottom: 6px; font-size: 15px; }
.an-methode p { margin: 0 0 8px; color: var(--ink-2); font-size: 14px; line-height: 1.7; max-width: 92ch; }

/* ═════════════════════════ LA FICHE PAR JEU ═════════════════════════ */

.an-jeu { padding-top: 22px; }
.an-retour { margin: 0 0 16px; }

.an-ban {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  padding: 20px 24px;
  margin-bottom: 22px;
}

.an-ban__img {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  background: var(--surface);
}

.an-ban__img img { width: 100%; height: 100%; object-fit: cover; }
.an-ban__e { font-size: 42px; }

.an-ban__txt h1 { margin: 0 0 8px; font-size: 27px; letter-spacing: -.03em; line-height: 1.2; }

.an-ban__meta { display: flex; gap: 16px; flex-wrap: wrap; margin: 0; font-size: 13px; color: var(--ink-3); }

.an-ban__act { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Rangée 1 : résumé | performances | verdict ── */
/* ⚠️ `align-items: start` LAISSAIT LES TROIS CARTES FINIR N'IMPORTE OÙ.
   Mesuré : 162 px d'écart entre le bas de la plus courte et celui de la plus
   longue. Ces trois-là ne sont pas trois sections indépendantes empilées côte
   à côte, elles forment UNE bande — le score, la configuration, le verdict —
   et une bande dont les trois blocs s'arrêtent à trois hauteurs différentes se
   lit comme un défaut, pas comme un choix.

   Elles s'étirent donc à la même hauteur, et le vide qui en résulte est
   récupéré : le dernier élément de chaque carte est poussé en bas (voir
   `.an-ancres` et `.an-verdict__b`), ce qui aligne aussi les pieds de carte. */
.an-r1 {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr) 292px;
  gap: 18px;
  align-items: stretch;
}

/* L'étirement ne sert à rien si la carte ne sait pas répartir sa hauteur. */
.an-r1 > .an-bloc { display: flex; flex-direction: column; }

.an-bloc {
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  padding: 22px 24px;
}

.an-bloc__t { margin: 0 0 16px; font-size: 16px; letter-spacing: -.01em; }
.an-bloc__h { margin-bottom: 18px; }
.an-bloc__h .an-bloc__t { margin-bottom: 6px; }
.an-bloc__x { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; max-width: 88ch; }

/* La jauge de score */
.an-score { position: relative; width: 150px; height: 150px; margin: 0 auto 4px; }
.an-score svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.an-score__f { fill: none; stroke: var(--ligne); stroke-width: 10; }

.an-score__a {
  fill: none; stroke-width: 10; stroke-linecap: round;
  stroke-dasharray: 314.2;  /* 2πr, r = 50 */
  stroke-dashoffset: 314.2;
  transition: stroke-dashoffset .9s cubic-bezier(.22,.61,.36,1);
  stroke: var(--ink-3);
}

.an-score__a--excellent,
.an-score__a--tres_bon { stroke: var(--vert); }
.an-score__a--bon,
.an-score__a--limite   { stroke: var(--ambre); }
.an-score__a--insuffisant { stroke: var(--rouge); }

.an-score__c { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2px; }
.an-score__c b { font-size: 40px; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.an-score__c i { font-size: 14px; color: var(--ink-3); font-style: normal; align-self: flex-end; padding-bottom: 9px; }

.an-score__l { margin: 6px 0 4px; text-align: center; font-weight: 700; font-size: 16px; }
.an-score__l--excellent, .an-score__l--tres_bon { color: var(--vert); }
.an-score__l--bon, .an-score__l--limite { color: var(--ambre); }
.an-score__l--insuffisant { color: var(--rouge); }

.an-score__x { margin: 0 0 16px; text-align: center; font-size: 13px; color: var(--ink-2); line-height: 1.55; }

/* ⚠️ UNE MARGE NÉGATIVE N'EST PAS UNE MISE EN PAGE. Le pourcentage était
   remonté de 18 px pour venir se placer au bout de la ligne du libellé : tant
   que « 🟡 Fiabilité moyenne » tenait sur une ligne courte, l'illusion tenait.
   Sous 420 px, le libellé occupe toute la largeur, le `<b>` aussi — et les
   deux se CHEVAUCHENT, le pourcentage se posant en plus par-dessus la barre
   de progression. Mesuré : les trois boîtes se recouvrent à 380 px. Deux
   colonnes déclarées font le même effet sans aucun décalage. */
.an-conf {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: 5px 10px;
  padding: 12px 0; border-top: 1px solid var(--ligne);
}
.an-conf > span { grid-column: 1; font-size: 12px; color: var(--ink-3); }
.an-conf > b { grid-column: 2; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.an-conf__b { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--ligne); overflow: hidden; }
.an-conf__b i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* ⚠️ LA BARRE PREND LA COULEUR DE CE QU'ELLE DIT. Peinte en couleur d'accent
   quel que soit le niveau, une fiabilité de 37 % avait exactement l'air d'une
   fiabilité de 90 % — juste plus courte. La couleur fait la moitié du message,
   et sans elle il faut lire le chiffre pour comprendre qu'il y a un doute. */
.an-conf--elevee  .an-conf__b i { background: var(--vert); }
/* Entre le vert et l'ambre : les jetons du thème n'ont pas de jaune, et en
   inventer un ici le ferait diverger du reste du site au premier changement
   de palette. */
.an-conf--bonne   .an-conf__b i { background: color-mix(in srgb, var(--vert) 55%, var(--ambre)); }
.an-conf--moyenne .an-conf__b i { background: var(--ambre); }
.an-conf--faible  .an-conf__b i { background: var(--rouge); }

.an-conf__p { margin: 0 0 4px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

/* Les raisons sont repliées : elles répondent à une question qu'on ne se pose
   que si le chiffre surprend. Dépliées d'office, elles pousseraient le reste
   de la page vers le bas pour tout le monde. */
.an-conf__d { font-size: 12.5px; }
.an-conf__d > summary {
    cursor: pointer; color: var(--accent); padding: 4px 0;
    list-style: none; font-weight: 600;
}
.an-conf__d > summary::-webkit-details-marker { display: none; }
.an-conf__d > summary::before { content: "▸ "; }
.an-conf__d[open] > summary::before { content: "▾ "; }
.an-conf__d ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); line-height: 1.6; }
.an-conf__n { margin: 8px 0 0; font-size: 12px; color: var(--ink-3); line-height: 1.5; }

/* `margin-top: auto` absorbe le vide de l'etirement : la navigation se cale
   en bas de la carte au lieu de laisser un blanc sous elle. */
.an-ancres { display: grid; gap: 2px; border-top: 1px solid var(--ligne);
             padding-top: 12px; margin-top: auto; }

.an-ancres a {
  padding: 8px 11px; border-radius: 8px;
  font-size: 13.5px; color: var(--ink-2); text-decoration: none;
}

.an-ancres a:hover { background: var(--surface); color: var(--accent); }

.an-nsp {
  background: color-mix(in srgb, var(--ambre) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ambre) 28%, transparent);
  border-radius: 12px; padding: 16px;
}

.an-nsp b { display: block; font-size: 16px; margin-bottom: 7px; }
.an-nsp p { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.an-nsp__f { font-size: 12.5px !important; color: var(--ink-3) !important; }

/* La configuration en quatre tuiles */
.an-conf4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ligne);
}

.an-conf4__i { display: flex; gap: 11px; align-items: flex-start; }
.an-conf4__i > span { font-size: 20px; line-height: 1.2; }
.an-conf4__i i { display: block; font-style: normal; font-size: 11px; text-transform: uppercase;
                 letter-spacing: .06em; color: var(--ink-3); margin-bottom: 2px; }
.an-conf4__i b { display: block; font-size: 14px; line-height: 1.35; }
.an-conf4__i > div > span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.an-nc { color: var(--ambre); }

/* Le graphique */
.an-graph { margin: 20px 0 0; }
.an-graph figcaption { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.an-graph figcaption b { font-size: 15px; }
.an-graph figcaption span { font-size: 12.5px; color: var(--ink-3); }

.an-graph__c { overflow-x: auto; }

.an-graph__l {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: flex-end; gap: 12px;
  min-height: 210px;
  min-width: 420px;
}

.an-graph__l li {
  flex: 1 1 0; min-width: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 210px;
}

.an-graph__v { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 5px; }

.an-graph__b {
  width: 100%; max-width: 58px;
  border-radius: 7px 7px 3px 3px;
  background: var(--ink-3);
  min-height: 4px;
  transition: height .6s cubic-bezier(.22,.61,.36,1);
}

.an-graph__b--excellent,
.an-graph__b--tres_bon { background: var(--vert); }
.an-graph__b--bon,
.an-graph__b--limite   { background: var(--ambre); }
.an-graph__b--insuffisant { background: var(--rouge); }

.an-graph__x {
  margin-top: 8px; text-align: center;
  font-size: 11.5px; color: var(--ink-2); line-height: 1.35;
}

/* ══════════ LE TOOLTIP D'UNE BARRE ══════════
   ⚠️ IL S'OUVRE VERS LE BAS, DEPUIS LE HAUT DE LA COLONNE. Le réflexe est de
   le poser au-dessus de la barre (`bottom: 100%`), mais le conteneur défile
   horizontalement : en CSS, dès qu'un axe vaut `auto`, l'autre cesse d'être
   `visible`. Une bulle qui dépasse par le haut serait donc coupée net. Ancrée
   à `top: 0`, elle reste dans la boîte et recouvre la zone haute du graphique,
   qui est vide par construction sauf sur la barre la plus haute. */
.an-graph__i { position: relative; outline: none; }

.an-graph__tip {
  position: absolute; z-index: 5;
  top: 0; left: 50%; transform: translateX(-50%) translateY(-4px);
  width: 216px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px;
  text-align: left;
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: 11px;
  box-shadow: var(--ombre-f);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}

.an-graph__i:hover .an-graph__tip,
.an-graph__i:focus-visible .an-graph__tip,
.an-graph__i:focus-within .an-graph__tip {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Aux deux extrémités, une bulle centrée sortirait du cadre : on l'aligne sur
   le bord plutôt que de la laisser se faire rogner. */
.an-graph__i:first-child .an-graph__tip { left: 0; transform: translateX(0) translateY(-4px); }
.an-graph__i:last-child  .an-graph__tip { left: auto; right: 0; transform: translateX(0) translateY(-4px); }

.an-graph__i:first-child:hover .an-graph__tip,
.an-graph__i:first-child:focus-within .an-graph__tip,
.an-graph__i:last-child:hover .an-graph__tip,
.an-graph__i:last-child:focus-within .an-graph__tip { transform: translateX(0) translateY(0); }

.an-graph__tip-t { font-size: 12px; font-weight: 700; color: var(--ink-1); line-height: 1.3; }
.an-graph__tip-d { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.an-graph__tip-f {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--ligne);
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.an-graph__tip-f i { font-style: normal; font-size: 11px; font-weight: 600; }
.an-graph__tip-f--excellent, .an-graph__tip-f--tres_bon { color: var(--vert); }
.an-graph__tip-f--bon, .an-graph__tip-f--limite { color: var(--ambre); }
.an-graph__tip-f--insuffisant { color: var(--rouge); }

.an-graph__tip-m { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.an-graph__tip-a { font-size: 10.5px; color: var(--ink-2); line-height: 1.45; margin-top: 2px; }
.an-graph__tip-w { font-size: 10.5px; color: var(--ambre); line-height: 1.45; margin-top: 2px; }

/* Le survol appuie aussi la barre elle-même : sans cela, rien ne dit QUELLE
   colonne la bulle décrit quand deux d'entre elles se touchent. */
.an-graph__i:hover .an-graph__b,
.an-graph__i:focus-within .an-graph__b { filter: brightness(1.08); }
.an-graph__i:focus-visible .an-graph__b { box-shadow: 0 0 0 2px var(--accent); }

@media (hover: none) {
  /* Au doigt, pas de survol : c'est l'appui qui ouvre la bulle, et le curseur
     « aide » signale qu'il y a quelque chose à toucher. */
  .an-graph__i { cursor: help; }
}

/* ⚠️ LE DÉFILEMENT NE SERT QUE SOUS 560 px, LE ROGNAGE COÛTAIT PARTOUT.
   `.an-graph__c` portait `overflow-x: auto` en permanence pour les six barres
   qui ne tiennent pas sur un téléphone. Mais en CSS, un axe en `auto` force
   l'autre hors de `visible` : sur un écran large, où aucune barre ne dépasse,
   le conteneur rognait quand même les bulles les plus hautes par le bas. Le
   défilement reste là où il est utile, et disparaît là où il ne faisait que
   couper. */
@media (min-width: 560px) {
  .an-graph__c { overflow: visible; }
}

@media (max-width: 559px) {
  /* Sur téléphone le conteneur défile encore, donc il rogne encore : la bulle
     doit y tenir en hauteur. On garde ce qui ne se lit nulle part ailleurs —
     le chiffre et sa fourchette — et on laisse les définitions à la légende,
     qui est juste en dessous. */
  .an-graph__tip { width: 190px; }
  .an-graph__tip-a { display: none; }

  /* ⚠️ LE ROGNAGE SE FAIT SUR LA BOÎTE DE REMBOURRAGE, PAS SUR LE CONTENU.
     Les barres font 210 px ; la bulle la plus longue en fait 233 et se
     trouvait coupée par le bas. Plutôt que de tronquer ce qu'elle dit, on
     donne au conteneur la place de l'accueillir : le rembourrage agrandit la
     zone de découpe sans créer d'ascenseur vertical, puisque les barres, elles,
     tiennent toujours. */
  .an-graph__c { padding-bottom: 60px; margin-bottom: -46px; }
}

/* ⚠️ L'AXE GARDE SES DEUX LIGNES. Le pictogramme et la définition partagent la
   première : passer la définition à la ligne aurait ajouté un troisième étage
   sous chaque barre, donc rogné d'autant la hauteur utile du graphique. */
.an-graph__x em { font-style: normal; margin-right: 3px; }
.an-graph__x b  { font-weight: 700; }
.an-graph__x i { display: block; font-style: normal; font-size: 10.5px; color: var(--ink-3); }

/* ── La légende, repliée ──
   Fermée, elle ne coûte qu'une ligne : c'est la condition pour qu'elle existe
   sans allonger un bloc déjà dense. */
.an-graph__leg { margin-top: 14px; border-top: 1px solid var(--ligne); padding-top: 10px; }

.an-graph__leg > summary {
  cursor: pointer; font-size: 12.5px; color: var(--ink-2);
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 0; user-select: none;
}
.an-graph__leg > summary::-webkit-details-marker { display: none; }
.an-graph__leg > summary::before { content: '▸'; color: var(--ink-3); font-size: 11px; }
.an-graph__leg[open] > summary::before { content: '▾'; }
.an-graph__leg > summary:hover { color: var(--accent); }

.an-leg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; margin-top: 10px; }

.an-leg__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; align-content: start; }

.an-leg__l li {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 11.5px; line-height: 1.4;
}
.an-leg__l b { flex: 0 0 auto; font-weight: 600; color: var(--ink-1); white-space: nowrap; }
.an-leg__l i { font-style: normal; color: var(--ink-3); }

.an-leg__n { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }

@media (max-width: 720px) {
  .an-leg { grid-template-columns: 1fr; gap: 12px; }
  .an-leg__l li { flex-wrap: wrap; gap: 2px 8px; }
}

.an-note {
  margin: 18px 0 0;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-left: 3px solid var(--accent);
  border-radius: 0 9px 9px 0;
  padding: 12px 15px;
  font-size: 13.5px; color: var(--ink-2); line-height: 1.65;
}

/* Le verdict */
.an-verdict { text-align: center; }
.an-verdict__p { font-size: 44px; line-height: 1; margin-bottom: 8px; }
.an-verdict__t { margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.an-verdict__x { margin: 0 0 16px; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.an-verdict__x--stop { color: var(--rouge); font-weight: 600; }

.an-verdict--excellent .an-verdict__t,
.an-verdict--tres_bon  .an-verdict__t { color: var(--vert); }
.an-verdict--bon .an-verdict__t,
.an-verdict--limite .an-verdict__t { color: var(--ambre); }
.an-verdict--insuffisant .an-verdict__t { color: var(--rouge); }

.an-verdict__d { margin: 0; text-align: left; display: grid; gap: 1px; }
.an-verdict__d > div { display: flex; align-items: baseline; justify-content: space-between;
                       gap: 12px; padding: 9px 0; border-top: 1px solid var(--ligne); }
.an-verdict__d dt { font-size: 13px; color: var(--ink-2); }
.an-verdict__d dd { margin: 0; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

.an-alerte {
  margin: 14px 0 0; text-align: left;
  background: color-mix(in srgb, var(--ambre) 10%, transparent);
  border-radius: 9px; padding: 10px 13px;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.55;
}

/* Idem pour le bouton du verdict : il descend en pied de carte, ce qui aligne
   les trois pieds de la bande au lieu de les laisser flotter.

   ⚠️ C'EST L'AVANT-DERNIER ENFANT QUI ABSORBE LE VIDE, PAS LE BOUTON.
   Mettre `margin-top: auto` sur le bouton lui ferait perdre ses 16 px d'écart
   dès que la carte est déjà pleine — `auto` vaut alors zéro, et le bouton
   viendrait coller au bloc du dessus. En faisant grandir le bloc PRÉCÉDENT,
   le bouton garde sa marge dans les deux cas. */
.an-verdict > :nth-last-child(2) { margin-bottom: auto; }
.an-verdict__b { margin-top: 16px; width: 100%; justify-content: center; }

/* ── Les réglages ── */
.an-regl { margin-top: 18px; }

.an-regl__g {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/* ⚠️ UN TABLEAU QUI DÉFILE DOIT DIRE QU'IL DÉFILE. Sur un téléphone, ce
   tableau fait 627 px de large dans un cadre de 285 : il se coupait au milieu
   d'une colonne, sans ombre ni dégradé, et rien n'indiquait qu'il restait
   trois colonnes à droite. Le lecteur concluait que la page était cassée.

   Les deux premiers plans sont ancrés au CONTENU (`local`) et masquent les
   ombres quand on est au bord ; les deux suivants sont ancrés au CADRE
   (`scroll`) et restent en place. L'ombre n'apparaît donc que du côté où il y
   a réellement quelque chose à atteindre — aucun JavaScript. */
.an-tab__w {
  overflow-x: auto; border: 1px solid var(--ligne); border-radius: 12px;
  background:
    linear-gradient(to right, var(--carte) 40%, transparent) left  / 26px 100% no-repeat local,
    linear-gradient(to left,  var(--carte) 40%, transparent) right / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 0    50%, rgba(15, 23, 42, .16), transparent) left  / 13px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, .16), transparent) right / 13px 100% no-repeat scroll;
}
.an-tab { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 620px; }

.an-tab th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); padding: 11px 13px; background: var(--surface);
  border-bottom: 1px solid var(--ligne); white-space: nowrap;
}

.an-tab td { padding: 10px 13px; border-bottom: 1px solid var(--ligne); }
.an-tab tbody tr:last-child td { border-bottom: 0; }
.an-tab tbody tr:hover { background: var(--surface); }

.an-tab__n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-tab__n b { font-size: 15px; }
.an-tab__n i { display: block; font-style: normal; font-size: 11px; color: var(--ink-3); }

/* ⚠️ LA LIGNE DU VISITEUR EST MARQUÉE. Sans repère, un tableau de vingt lignes
   oblige à relire l'en-tête pour retrouver la sienne — et beaucoup ne le font
   pas, puis lisent le chiffre d'une autre définition que la leur. */
.an-tab__moi {
  background: color-mix(in srgb, var(--accent) 9%, transparent) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}

.an-tab__moi td { font-weight: 600; }

.an-pill {
  display: inline-block; white-space: nowrap;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--ligne);
}

.an-pill--excellent, .an-pill--tres_bon {
  color: var(--vert); border-color: color-mix(in srgb, var(--vert) 32%, transparent);
  background: color-mix(in srgb, var(--vert) 9%, transparent);
}

.an-pill--bon, .an-pill--limite {
  color: var(--ambre); border-color: color-mix(in srgb, var(--ambre) 32%, transparent);
  background: color-mix(in srgb, var(--ambre) 9%, transparent);
}

.an-pill--insuffisant {
  color: var(--rouge); border-color: color-mix(in srgb, var(--rouge) 32%, transparent);
  background: color-mix(in srgb, var(--rouge) 9%, transparent);
}

.an-conseils h3 { margin: 0 0 14px; font-size: 15px; }

.an-conseil {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--ink-3);
  border-radius: 0 11px 11px 0;
  padding: 13px 15px;
  margin-bottom: 11px;
}

/* Le coût donne la couleur : gratuit en vert, payant en ambre, bloquant en
   rouge. C'est l'ordre dans lequel il faut les lire. */
.an-conseil--c0 { border-left-color: var(--vert); }
.an-conseil--c1 { border-left-color: var(--ambre); }
.an-conseil--c2 { border-left-color: var(--accent); }

.an-conseil b { display: block; font-size: 14px; margin-bottom: 5px; }
.an-conseil p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.6; }

.an-conseil__g {
  display: inline-block; margin-top: 8px;
  font-size: 11.5px; font-weight: 700; color: var(--vert);
  background: color-mix(in srgb, var(--vert) 11%, transparent);
  padding: 3px 9px; border-radius: 999px;
}

/* ── Comparaison + goulots ── */
.an-r3 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}

.an-barre {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 76px;
  gap: 12px; align-items: center;
  padding: 8px 0;
}

.an-barre__n { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
.an-barre__n a { color: var(--ink-2); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-barre__n a:hover { color: var(--accent); text-decoration: underline; }

.an-barre__moi {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: var(--accent); color: #fff; padding: 2px 7px; border-radius: 999px;
}

.an-barre__b { height: 12px; background: var(--ligne); border-radius: 999px; overflow: hidden; }
.an-barre__b i { display: block; height: 100%; background: var(--vert); border-radius: 999px; }
.an-barre--moi .an-barre__b i { background: var(--accent); }
.an-barre--moi .an-barre__n a { color: var(--ink); font-weight: 700; }

.an-barre__v { font-size: 12.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.an-goulot__g {
  border-radius: 11px; padding: 14px 16px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--ligne);
}

.an-goulot__g--aucun, .an-goulot__g--leger {
  background: color-mix(in srgb, var(--vert) 8%, transparent);
  border-color: color-mix(in srgb, var(--vert) 26%, transparent);
}

.an-goulot__g--modere, .an-goulot__g--important {
  background: color-mix(in srgb, var(--ambre) 8%, transparent);
  border-color: color-mix(in srgb, var(--ambre) 26%, transparent);
}

.an-goulot__g--tres_important {
  background: color-mix(in srgb, var(--rouge) 8%, transparent);
  border-color: color-mix(in srgb, var(--rouge) 26%, transparent);
}

.an-goulot__g b { display: block; font-size: 14.5px; margin-bottom: 6px; }
.an-goulot__g p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.65; }

.an-volets { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }

.an-volet {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 12px; align-items: center;
  padding: 11px 0; border-top: 1px solid var(--ligne);
}

.an-volet__e { font-size: 17px; text-align: center; }
.an-volet__t b { display: block; font-size: 13.5px; }
.an-volet__t span { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.5; margin-top: 2px; }

.an-volet__n { font-size: 11.5px; font-weight: 700; white-space: nowrap; color: var(--ink-2); }
.an-volet--aucun .an-volet__n, .an-volet--leger .an-volet__n { color: var(--vert); }
.an-volet--modere .an-volet__n, .an-volet--important .an-volet__n { color: var(--ambre); }
.an-volet--tres_important .an-volet__n { color: var(--rouge); }

.an-volets__src { margin: 14px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }

/* ═════════════════════════ RESPONSIVE ═════════════════════════ */

@media (max-width: 1180px) {
  .an-r1 { grid-template-columns: 240px minmax(0, 1fr); }
  .an-verdict { grid-column: 1 / -1; text-align: left; }
  .an-verdict__p { font-size: 34px; }
}

@media (max-width: 980px) {
  .an-hero { grid-template-columns: minmax(0, 1fr); }
  .an-hero__cta { position: static; }
  .an-scan { grid-template-columns: minmax(0, 1fr); grid-template-areas: "jauge" "titre" "etapes" "suite"; }
  .an-jauge { margin: 0 auto; }
  .an-scan__txt { text-align: center; }
  .an-voies { grid-template-columns: minmax(0, 1fr); }
  .an-r1 { grid-template-columns: minmax(0, 1fr); }
  .an-regl__g { grid-template-columns: minmax(0, 1fr); }
  .an-r3 { grid-template-columns: minmax(0, 1fr); }
  .an-ban { grid-template-columns: 130px minmax(0, 1fr); }
  .an-ban__act { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .an-liste li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .an-etapes li { grid-template-columns: 22px minmax(0, 1fr); }
  .an-e__v { grid-column: 2; text-align: left; max-width: none; }
  .an-ban { grid-template-columns: minmax(0, 1fr); }
  .an-ban__img { max-width: 220px; }
  .an-barre { grid-template-columns: minmax(0, 1fr) 70px; }
  .an-barre__b { grid-column: 1 / -1; }
}

/* ═════════════════════════ IMPRESSION ═════════════════════════ */

@media print {
  .an-ban__act, .an-ancres, .an-machine__act, .an-tous { display: none; }
  .an-bloc { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  .an-r1, .an-r3, .an-regl__g { grid-template-columns: minmax(0, 1fr); }
  .an-tab__w { overflow: visible; }
  .an-tab { min-width: 0; }
}

/* ═══════════════════ ⚙️ LE RELEVÉ AUTOMATIQUE, VOIE PRINCIPALE ═══════════════════
   Il lit ce qu'aucun navigateur n'expose : le modèle du processeur et la mémoire
   réelle. Il occupe donc la place d'une voie principale, pas d'une option en
   bas de page. */

.an-agent {
  background: var(--carte);
  border: 2px solid color-mix(in srgb, var(--accent) 42%, var(--ligne));
  border-radius: var(--radius);
  box-shadow: var(--ombre-f);
  padding: 26px 28px;
  margin-bottom: 20px;
}

.an-agent__h {
  display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--ligne);
}

.an-agent__e { font-size: 30px; line-height: 1; }
.an-agent__h b { display: block; font-size: 18px; letter-spacing: -.02em; }
.an-agent__h i { display: block; font-size: 12.5px; color: var(--ink-3);
                 font-style: normal; margin-top: 2px; }

.an-agent__tag {
  margin-left: auto;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: var(--accent); color: #fff;
  padding: 4px 11px; border-radius: 999px;
}

.an-agent .an-regles { margin-bottom: 20px; }

/* Les trois étapes, numérotées. Une étape sans numéro se lit comme un
   paragraphe, et l'on ne sait plus où l'on en est. */
.an-pas3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }

.an-pas3 > li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.an-pas3__n {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 700;
}

.an-pas3 b { display: block; font-size: 15px; margin-bottom: 4px; }
.an-pas3 p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }

.an-pas3 code {
  background: var(--surface); border: 1px solid var(--ligne);
  border-radius: 5px; padding: 1px 6px; font-size: 12.5px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

.an-pas3__act { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* L'avertissement sur le refus de Windows. C'est la raison numéro un pour
   laquelle ce genre d'outil ne marche jamais chez les gens : il mérite un
   encadré, pas une note de bas de page. */
.an-note2 {
  margin-top: 12px;
  background: color-mix(in srgb, var(--ambre) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ambre) 30%, transparent);
  border-radius: 10px;
  padding: 13px 15px;
  font-size: 13px; color: var(--ink-2); line-height: 1.65;
}

.an-cmd {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: 9px;
  padding: 10px 12px;
}

.an-cmd code {
  flex: 1; min-width: 0;
  border: 0; background: none; padding: 0;
  font-size: 12px; word-break: break-all;
  color: var(--ink);
}

/* Le pis-aller est replié : offert, mais pas mis au même rang que la mesure. */
.an-main {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  margin-bottom: 20px;
}

.an-main > summary {
  cursor: pointer; padding: 16px 22px; list-style: none;
}

.an-main > summary::-webkit-details-marker { display: none; }
.an-main > summary::before { content: '▸ '; color: var(--ink-3); }
.an-main[open] > summary::before { content: '▾ '; }
.an-main > summary b { font-size: 15px; }
.an-main > summary span { display: block; font-size: 12.5px; color: var(--ink-3); margin: 3px 0 0 16px; }

.an-main__c {
  padding: 4px 22px 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  align-items: start;
}

@media (max-width: 620px) {
  .an-agent { padding: 20px 18px; }
  .an-pas3 > li { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
  .an-pas3__n { width: 24px; height: 24px; font-size: 12px; }
}

/* Le rappel de ce que le navigateur ne peut pas voir, juste avant le bouton
   qui mène à l'outil qui, lui, le peut. Sans ce texte, la liste de « je ne sais
   pas » se lisait comme une impasse. */
.an-suite__q {
  text-align: left;
  background: color-mix(in srgb, var(--ambre) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ambre) 28%, transparent);
  border-radius: 12px;
  padding: 15px 18px;
  margin: 0 auto 16px;
  max-width: 68ch;
}

.an-suite__q b { display: block; font-size: 14.5px; margin-bottom: 8px; }
.an-suite__q ul { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 4px; }
.an-suite__q li { font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.an-suite__q li b { display: inline; font-size: inherit; }
.an-suite__q p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.6; }

/* ═══════════════════ 🔎 LA PAGE D'ANALYSE, EN DEUX COLONNES ═══════════════════
   ⚠️ LA RÉPARTITION N'EST PAS ARBITRAIRE. À gauche ce qu'on FAIT — les trois
   étapes, dans l'ordre. À droite ce qu'on doit SAVOIR — ce qui est lu, ce qui
   est garanti, ce qui est conservé. En une seule colonne, les garanties
   s'intercalaient entre les étapes et coupaient le fil de l'action. */

.an-grille2 {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 22px;
  align-items: start;
  margin-top: 26px;
}

.an-col-a { display: grid; gap: 16px; }
.an-col-b { display: grid; gap: 16px; position: sticky; top: 90px; }

/* Les blocs de la colonne latérale. */
.an-bloc2 {
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  padding: 20px 22px;
}

.an-bloc2--vert {
  background: color-mix(in srgb, var(--vert) 6%, var(--carte));
  border-color: color-mix(in srgb, var(--vert) 26%, var(--ligne));
}

.an-bloc2__t { display: block; font-size: 15px; margin-bottom: 10px; }
.an-bloc2__x { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); line-height: 1.65; }
.an-bloc2 .pg-lien { font-size: 13px; }
.an-bloc2 .an-regles { margin: 0; }
.an-bloc2 .an-regles li { font-size: 12.5px; }
.an-bloc2 .an-regles li b { font-size: 13px; }

/* Les six lectures, en liste serrée dans la colonne étroite. */
.an-six { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

.an-six li {
  border-top: 1px solid var(--ligne);
  padding-top: 9px;
}

.an-six li:first-child { border-top: 0; padding-top: 0; }
.an-six b    { display: block; font-size: 13.5px; margin-bottom: 2px; }
.an-six span { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.5; }

@media (max-width: 1080px) {
  .an-grille2 { grid-template-columns: minmax(0, 1fr); }
  .an-col-b { position: static; }
  .an-six { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .an-six li { border-top: 0; padding-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   🌱 LA DOCUMENTATION EN COURS

   ⚠️ CE BLOC N'AVAIT AUCUNE RÈGLE. Pas une seule — il était rendu hors du
   conteneur, en pleine largeur de fenêtre, sans fond, sans marge, sans
   bordure. Résultat à l'écran : deux lignes de texte brut posées au-dessus du
   pied de page, sans rapport visible avec ce qui précédait. Elles avaient
   pourtant du sens ; c'est la mise en page qui les rendait absurdes.
   ═══════════════════════════════════════════════════════════════════════════ */

.an-doc {
  display: flex; align-items: flex-start; gap: 15px;
  margin-top: 22px; padding: 17px 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--ligne));
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 5%, var(--carte));
}

.an-doc__e { font-size: 21px; line-height: 1.25; flex: none; }
.an-doc__t { flex: 1 1 auto; min-width: 0; }
.an-doc__t b { display: block; font-size: 15px; margin-bottom: 4px; }
.an-doc__t p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }

/* Les trois points d'attente : ils ne tournent que pendant le travail. */
.an-doc__p { display: flex; gap: 5px; align-items: center; flex: none; padding-top: 7px; }
.an-doc__p i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: an-pouls 1.15s ease-in-out infinite;
}
.an-doc__p i:nth-child(2) { animation-delay: .16s; }
.an-doc__p i:nth-child(3) { animation-delay: .32s; }

@keyframes an-pouls {
  0%, 80%, 100% { opacity: .22; transform: scale(.8); }
  40%           { opacity: 1;   transform: scale(1); }
}

/* ⚠️ TROIS ISSUES, TROIS COULEURS. Aboutir, ne pas s'accorder et échouer sont
   des choses différentes ; les afficher à l'identique obligeait à lire le
   paragraphe entier pour savoir s'il fallait attendre. */
.an-doc[data-etat="fini"] {
  border-color: color-mix(in srgb, var(--vert) 38%, transparent);
  border-left-color: var(--vert);
  background: color-mix(in srgb, var(--vert) 7%, var(--carte));
}
.an-doc[data-etat="attente"] {
  border-color: color-mix(in srgb, var(--ambre) 38%, transparent);
  border-left-color: var(--ambre);
  background: color-mix(in srgb, var(--ambre) 7%, var(--carte));
}
.an-doc[data-etat="echec"] {
  border-color: color-mix(in srgb, var(--rouge) 32%, transparent);
  border-left-color: var(--rouge);
  background: color-mix(in srgb, var(--rouge) 5%, var(--carte));
}

/* L'animation s'arrête dès qu'il n'y a plus rien à attendre : la laisser
   tourner sous un résultat acquis fait croire que ça continue. */
.an-doc[data-etat="fini"] .an-doc__p,
.an-doc[data-etat="attente"] .an-doc__p,
.an-doc[data-etat="echec"] .an-doc__p { display: none; }

@media (prefers-reduced-motion: reduce) {
  .an-doc__p i { animation: none; opacity: .6; }
}

@media (max-width: 620px) {
  .an-doc { flex-wrap: wrap; gap: 11px; padding: 15px 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   🔐 LE BLOC RÉSERVÉ AUX INSCRITS

   ⚠️ CE QUI EST FLOUTÉ EST FAUX. Le décor derrière le calque n'est pas la
   vraie analyse rendue illisible : c'est une forme vide, du remplissage. Le
   contenu réel n'est pas calculé côté serveur, donc il n'est pas dans la page.
   Flouter une donnée envoyée aurait donné un rideau qui se lève à la touche F12.
   ═══════════════════════════════════════════════════════════════════════════ */

.an-mur { position: relative; border-radius: 14px; overflow: hidden; }

.an-mur__fond {
  filter: blur(7px);
  opacity: .5;
  user-select: none; pointer-events: none;
  padding: 2px;
}

.an-mur__g {
  border-radius: 12px; padding: 15px 17px; margin-bottom: 13px;
  background: var(--surface); border: 1px solid var(--ligne);
}
.an-mur__g b { display: block; font-size: 15px; margin-bottom: 5px; }
.an-mur__g p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }

.an-mur__fond ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.an-mur__fond li {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: 11px;
  background: var(--surface); border: 1px solid var(--ligne);
}
.an-mur__fond li > span:first-child { font-size: 18px; flex: none; }
.an-mur__fond li div { flex: 1 1 auto; min-width: 0; }
.an-mur__fond li b { display: block; font-size: 14px; }
.an-mur__fond li div span { font-size: 12.5px; color: var(--ink-3); }
.an-mur__fond li i { font-style: normal; font-size: 12.5px; color: var(--ink-3); flex: none; }

/* Le calque : posé par-dessus, il porte l'invitation. */
.an-mur__av {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; text-align: center; padding: 26px 22px;
  background: color-mix(in srgb, var(--carte) 72%, transparent);
  backdrop-filter: blur(2px);
}

.an-mur__cad {
  font-size: 26px; line-height: 1;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  margin-bottom: 3px;
}

.an-mur__av b { font-size: 17px; letter-spacing: -.01em; }
.an-mur__quoi { margin: 0; font-size: 14.5px; line-height: 1.6; max-width: 62ch; color: var(--ink); }
.an-mur__pq   { margin: 0; font-size: 13px;   line-height: 1.65; max-width: 66ch; color: var(--ink-3); }
.an-mur__act  { display: flex; gap: 11px; flex-wrap: wrap; justify-content: center; margin-top: 7px; }

@media (max-width: 620px) {
  .an-mur__av { padding: 20px 15px; gap: 7px; }
  .an-mur__quoi { font-size: 13.5px; }
  .an-mur__pq { display: none; }
  .an-mur__act { width: 100%; }
  .an-mur__act .pg-btn { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   📇 LE RÉCAPITULATIF D'EN-TÊTE

   ⚠️ IL OCCUPE UNE COLONNE QUI ÉTAIT VIDE. « .pg-page__in » réserve 400 pixels
   à une illustration ; la page de résultat n'en a pas, et la moitié droite de
   la bande restait blanche. Une colonne vide ne se lit pas comme un choix.
   ═══════════════════════════════════════════════════════════════════════════ */

.an-recap {
  display: grid; gap: 10px;
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: 14px;
  box-shadow: var(--ombre);
  padding: 18px 20px;
}

.an-recap__l { display: flex; align-items: baseline; gap: 12px; }
.an-recap__l + .an-recap__l { padding-top: 10px; border-top: 1px solid var(--ligne); }

.an-recap__l b {
  font-size: 25px; font-weight: 800; letter-spacing: -.03em;
  line-height: 1.1; flex: none; min-width: 62px;
}
.an-recap__l i {
  font-style: normal; font-size: 14px; font-weight: 600; color: var(--ink-3);
}
.an-recap__l span { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.an-recap__l--q b { color: var(--accent); }

@media (max-width: 980px) {
  .an-recap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .an-recap__l { flex-direction: column; gap: 3px; }
  .an-recap__l + .an-recap__l { padding-top: 0; border-top: 0; }
}

@media (max-width: 560px) {
  .an-recap { grid-template-columns: minmax(0, 1fr); }
  .an-recap__l { flex-direction: row; align-items: baseline; }
}

/* Dans « Votre configuration » : les trois chiffres côte à côte, au-dessus
   des tuiles, séparés par un filet vertical. */
.an-recap--ligne { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-bottom: 16px; box-shadow: none; }
.an-recap--ligne .an-recap__l { flex-direction: column; gap: 3px; padding: 0 16px; }
.an-recap--ligne .an-recap__l:first-child { padding-left: 0; }
.an-recap--ligne .an-recap__l + .an-recap__l { padding-top: 0; border-top: 0; border-left: 1px solid var(--ligne); }
@media (max-width: 560px) {
  .an-recap--ligne { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .an-recap--ligne .an-recap__l { flex-direction: row; align-items: baseline; padding: 0; }
  .an-recap--ligne .an-recap__l + .an-recap__l { border-left: 0; border-top: 1px solid var(--ligne); padding-top: 10px; }
}


/* ⚠️ LE NOM LU, MAIS PAS ENCORE SITUÉ. Il n'est ni une réussite (vert) ni un
   échec (rouge) : c'est un fait acquis dont on ne sait pas encore quoi tirer.
   L'ambre le dit sans le présenter comme une panne. */
.an-tuile__lu {
  color: var(--ambre);
  font-size: 14px !important;
  word-break: break-word;
}

/* ⚠️ LES TUILES S'ALIGNENT PAR LE HAUT ET PARTAGENT LA HAUTEUR. Sans cela,
   celle qui porte le texte le plus long étire sa rangée et les autres flottent
   au milieu de leur case — la rangée n'a plus de ligne de base commune. */
.an-tuiles { align-items: stretch; }
.an-tuile > div { display: flex; flex-direction: column; min-width: 0; }
.an-tuile > div > span:last-child { margin-top: auto; padding-top: 3px; }

/* ═══════════════════════════════════════════════════════════════════════════
   🙂 LE BILAN PAR JEU

   ⚠️ LE VISAGE EST LA PARTIE UTILE. C'est la seule chose qu'on lit sans lire.
   Il doit donc être gros, isolé, et aligné sur le fait le plus GRAVE — pas sur
   la moyenne des volets : une machine excellente partout mais à qui manque le
   SSD exigé ne mérite pas un sourire.
   ═══════════════════════════════════════════════════════════════════════════ */

.an-bilan { border-left: 4px solid var(--ink-3); }

.an-bilan--vert  { border-left-color: var(--vert);
  background: color-mix(in srgb, var(--vert) 5%, var(--carte));
  border-color: color-mix(in srgb, var(--vert) 24%, var(--ligne));
  border-left-color: var(--vert); }
.an-bilan--ambre { border-left-color: var(--ambre);
  background: color-mix(in srgb, var(--ambre) 5%, var(--carte));
  border-color: color-mix(in srgb, var(--ambre) 24%, var(--ligne));
  border-left-color: var(--ambre); }
.an-bilan--rouge { border-left-color: var(--rouge);
  background: color-mix(in srgb, var(--rouge) 5%, var(--carte));
  border-color: color-mix(in srgb, var(--rouge) 24%, var(--ligne));
  border-left-color: var(--rouge); }

.an-bilan__h { display: flex; align-items: flex-start; gap: 18px; }

/* ⚠️ 40 PIXELS, PAS 16. À la taille du texte, un visage n'est qu'une
   ponctuation : on le lit APRÈS la phrase, alors qu'il doit se lire avant. */
.an-bilan__e { font-size: 40px; line-height: 1; flex: none; }

.an-bilan__t { margin: 2px 0 8px; font-size: 20px; letter-spacing: -.02em; line-height: 1.3; }
.an-bilan__x { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }

.an-bilan__act { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ligne); }
.an-bilan__act h3 {
  margin: 0 0 12px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-3); font-weight: 700;
}
.an-bilan__act ol {
  list-style: none; margin: 0; padding: 0; counter-reset: ab;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 11px;
}
.an-bilan__act li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 15px; border-radius: 11px;
  background: var(--surface); border: 1px solid var(--ligne);
  counter-increment: ab;
}
.an-bilan__act li > span:first-child { font-size: 19px; line-height: 1.2; flex: none; }
.an-bilan__act li div { min-width: 0; }

/* Le rang précède l'intitulé : l'ORDRE est l'information — le geste le plus
   rentable d'abord, pas le plus cher. */
.an-bilan__act li b::before { content: counter(ab) ". "; color: var(--accent); font-weight: 800; }
.an-bilan__act li b { display: block; font-size: 14px; margin-bottom: 3px; }
.an-bilan__act li div span { font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }

.an-bilan__nsp {
  margin: 15px 0 0; padding-top: 13px; border-top: 1px dashed var(--ligne);
  font-size: 12.5px; line-height: 1.6; color: var(--ink-3);
}

@media (max-width: 620px) {
  .an-bilan__h { gap: 13px; }
  .an-bilan__e { font-size: 31px; }
  .an-bilan__t { font-size: 17px; }
}

/* ═══════════════ ⚖️ Avant / après ═══════════════ */
.an-cmp__verdict {
  justify-self: center; text-align: center; padding: 22px 28px; border-radius: 16px;
  background: var(--carte); border: 1px solid var(--ligne); box-shadow: var(--ombre);
  display: flex; flex-direction: column; gap: 4px; max-width: 340px;
}
.an-cmp__verdict b { font-size: 48px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.an-cmp__verdict span { font-size: 14px; color: var(--ink-2); }
.an-cmp__verdict--ok b { color: var(--vert); }
.an-cmp__verdict--ko b { color: var(--rouge); }

.an-cmp {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 16px; align-items: stretch; margin-top: 8px;
}
.an-cmp__cote {
  display: flex; flex-direction: column; gap: 14px; padding: 20px;
  background: var(--carte); border: 1px solid var(--ligne); border-radius: 16px;
}
.an-cmp__cote--apres { border-color: color-mix(in srgb, var(--accent) 45%, var(--ligne)); }
.an-cmp__tag { font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.an-cmp__machine { display: flex; gap: 14px; align-items: center; }
.an-cmp__machine > img { width: 72px; height: 72px; object-fit: contain; flex: none; }
.an-cmp__machine > span { font-size: 48px; flex: none; }
.an-cmp__machine div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.an-cmp__machine b { font-size: 16px; }
.an-cmp__machine div span { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.an-cmp__fleche { align-self: center; font-size: 28px; color: var(--ink-3); }
.an-trio--mini { margin: 0; gap: 8px; }
.an-trio--mini .an-trio__c { padding: 10px 12px; }
.an-trio--mini .an-trio__c b { font-size: 22px; }

.an-cmp__liste { margin-top: 30px; }
.an-cmp__jeux { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.an-cmp__jeux li {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto minmax(0, 1fr) 70px;
  gap: 10px; align-items: center; padding: 10px 14px; font-size: 13.5px;
  background: var(--carte); border: 1px solid var(--ligne); border-radius: 10px;
}
.an-cmp__jeux a { font-weight: 700; color: inherit; text-decoration: none; }
.an-cmp__jeux a:hover { color: var(--accent); text-decoration: underline; }
.an-cmp__jeux span { color: var(--ink-3); }
.an-cmp__jeux i { color: var(--ink-3); font-style: normal; }
.an-cmp__jeux em { font-style: normal; font-weight: 700; text-align: right; }
.an-cmp__jeux em.ok { color: var(--vert); }
.an-cmp__jeux em.ko { color: var(--rouge); }
.an-cmp__pied { margin: 22px 0 0; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; color: var(--ink-2); font-size: 13.5px; }

/* Sur la page de résultat : comparer avec une autre analyse. */
.an-avant { margin-top: 34px; padding: 22px 24px; background: var(--carte); border: 1px solid var(--ligne); border-radius: 16px; }
.an-avant p { margin: 6px 0 12px; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.an-avant__f { display: flex; gap: 8px; flex-wrap: wrap; }
.an-avant__f input {
  flex: 1 1 260px; min-width: 0; font: inherit; font-size: 14px; padding: 9px 12px; border-radius: 10px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--ligne);
}
.an-avant__f input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.an-avant__err { color: var(--rouge) !important; font-weight: 600; }
.an-avant__hist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.an-avant__hist li {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between;
  padding: 10px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--ligne); font-size: 13.5px;
}
.an-avant__hist li span { color: var(--ink-2); }

@media (max-width: 760px) {
  .an-cmp { grid-template-columns: minmax(0, 1fr); }
  .an-cmp__fleche { transform: rotate(90deg); justify-self: center; }
  .an-cmp__jeux li { grid-template-columns: minmax(0, 1fr) auto; }
  .an-cmp__jeux li a { grid-column: 1 / -1; }
  .an-cmp__jeux li i, .an-cmp__jeux li span { display: none; }
  .an-avant { padding: 18px 16px; }
}

/* ═══════════════ 💾 La place sur le disque ═══════════════ */
.an-disque { border-left: 4px solid var(--ink-3); }
.an-disque--ok { border-left-color: var(--vert); }
.an-disque--ko { border-left-color: var(--rouge); }
.an-disque__h { display: flex; align-items: flex-start; gap: 16px; }
.an-disque__e { font-size: 32px; line-height: 1; flex: none; }
.an-disque__t { margin: 2px 0 6px; font-size: 18px; letter-spacing: -.02em; line-height: 1.3; }
.an-disque__x { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.an-disque__liste { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.an-disque__liste li {
  display: grid; grid-template-columns: 34px minmax(80px, 180px) minmax(0, 1fr);
  gap: 12px; align-items: center; font-size: 13px; color: var(--ink-2);
}
.an-disque__liste li.ok b { color: var(--vert); }
.an-disque__jauge { height: 8px; border-radius: 99px; background: var(--ligne); overflow: hidden; }
.an-disque__jauge i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.an-disque__liste li.ok .an-disque__jauge i { background: var(--vert); }
.an-disque__nb { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }
@media (max-width: 560px) {
  .an-disque__liste li { grid-template-columns: 30px minmax(0, 1fr); }
  .an-disque__liste li > span:last-child { grid-column: 1 / -1; }
}

/* Le badge d'une carte de jeu qui ne rentre pas sur les disques. */
.an-carte__disque {
  display: block; margin-top: 6px; padding: 3px 8px; border-radius: 7px;
  font-size: 11.5px; font-weight: 600; line-height: 1.4;
  color: var(--rouge); background: color-mix(in srgb, var(--rouge) 10%, transparent);
}
.an-tuile__disque { font-size: 14px !important; }

/* ═══════════════ L'analyse et le profil du membre ═══════════════ */
.an-profil {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 22px 0 0; padding: 12px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 8%, var(--carte));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.an-profil > span:first-of-type { font-size: 22px; }
.an-profil p { margin: 0; flex: 1 1 280px; font-size: 13.5px; color: var(--ink-2); }
.an-profil p b { color: var(--ink); }
.an-profil__act { display: flex; align-items: center; gap: 14px; }
.an-profil--ok {
  background: color-mix(in srgb, var(--vert) 8%, var(--carte));
  border-color: color-mix(in srgb, var(--vert) 30%, transparent);
}

/* ══════════════════════ 🏅 LE SCORE GLOBAL EN POINTS ══════════════════════
   ⚠️ IL NE DOIT PAS ECRASER LE BILAN. Le trio au-dessus repond a la question
   qu'on est venu poser — « combien de mes jeux tournent ». Les points ne
   servent qu'a comparer. D'ou un bloc sobre, sans couleur de verdict : une
   pastille verte ou rouge en ferait un second jugement. */
.an-points {
    display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
    margin-top: 14px; padding: 14px 16px;
    background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px;
}

.an-points__n { flex: none; text-align: center; line-height: 1.05; }
.an-points__n b {
    display: block; font-size: 30px; font-weight: 800;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.an-points__n i { font-style: normal; font-size: 11.5px; color: var(--ink-3); }

.an-points__x { margin: 0; flex: 1 1 260px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }

/* La formule sur sa propre ligne : c'est une preuve, pas une phrase. */
.an-points__f {
    display: block; margin: 5px 0; padding: 5px 8px;
    background: var(--carte); border: 1px solid var(--ligne); border-radius: 7px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 11px; color: var(--ink-3);
    overflow-x: auto; white-space: nowrap;
}

@media (max-width: 560px) {
    .an-points { gap: 10px; }
    .an-points__n { text-align: left; }
}

/* ══════════════ LE MUR COURT ══════════════
   ⚠️ SANS APERCU FLOUTE, contrairement au mur des goulots. Celui-ci habille
   des blocs dont la FORME n'apprend rien — une liste de conseils floutee ne
   donne aucune idee de ce qu'on rate. Repeter le decor cinq fois aurait
   surtout transforme la page en suite de rideaux. */
.an-mur--court {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 18px 20px; border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 5%, var(--surface));
    border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent);
    position: static;
}
.an-mur--court .an-mur__cad { font-size: 22px; line-height: 1; }
.an-mur--court b { font-size: 14.5px; }
.an-mur--court .an-mur__quoi { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.an-mur--court .an-mur__pq { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.an-mur--court .an-mur__act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* Le bilan reserve n'a pas de teinte de verdict : il n'en porte aucun. */
.an-bilan--neutre { border-color: var(--ligne); }

/* Le detail d'une analyse expiree : ce qui manque, et pourquoi. */
.an-perdu__q { margin: 0 0 4px; font-size: 14.5px; font-weight: 600; }
.an-perdu__p { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.an-perdu__act { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* 📋 Face aux configurations de l'éditeur */
.an-pe__t{margin:0 0 8px;font-size:18px}
.an-pe__r{margin:0 0 12px;line-height:1.55}
.an-pe__l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.an-pe__n{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:10px;border:1px solid rgba(128,128,128,.25)}
.an-pe__n--ok{border-color:rgba(34,197,94,.5)}
.an-pe__n--limite{border-color:rgba(245,158,11,.55)}
.an-pe__n--non{border-color:rgba(239,68,68,.5)}
.an-pe__s{font-size:20px;line-height:1.2}
.an-pe__c{display:flex;flex-direction:column;gap:2px;min-width:0}
.an-pe__lib{font-size:12px;opacity:.75;margin-left:6px}
.an-pe__cond,.an-pe__rs{font-size:12.5px;opacity:.8}
.an-pe__nb{margin:10px 0 0;font-size:12px;opacity:.7}

/* 🧭 En-tête du résultat v2 */
.an-tete__grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: center; padding-bottom: 8px; }
.an-tete__m { margin: 6px 0 16px; font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
.an-tete__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.an-tete__s { padding: 14px 16px; border: 1px solid var(--ligne); border-radius: var(--radius); background: var(--carte); display: flex; flex-direction: column; gap: 2px; }
.an-tete__s b { font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.an-tete__s span { font-size: 12px; opacity: .7; }
.an-tete__s--vert { border-left: 4px solid #22c55e; }
.an-tete__s--ambre { border-left: 4px solid #f59e0b; }
.an-tete__s--rouge { border-left: 4px solid #ef4444; }
.an-tete__a { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.an-partage--petit { margin: 0; }
.an-partage--petit figcaption { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
@media (max-width: 900px) { .an-tete__grille { grid-template-columns: 1fr; } .an-partage--petit { max-width: 420px; } }
/* 📱 La formule du score est une longue chaîne sans espace : sans cette règle elle élargissait toute la page sur téléphone. */
.an-points__f { display: block; max-width: 100%; overflow-x: auto; overflow-wrap: anywhere; white-space: normal; }