/* Site A : comparateur. Navy + or, Fira Sans / Fira Code.
   Aucune couleur en dur hors de ce bloc de tokens. */

:root {
  --c-primary: #211c19;
  --c-secondary: #8a4b12;
  --c-accent: #a16207;
  --c-accent-soft: #fef6e4;
  --c-bg: #faf8f6;
  --c-surface: #ffffff;
  --c-fg: #211c19;
  --c-muted-fg: #78716c;
  --c-border: #eae6e2;
  --c-border-strong: #d8d3cf;
  --c-positive: #15803d;
  --c-negative: #a81f1f;

  --font-sans: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Fira Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --radius: 4px;
  --wrap: 1120px;
  --shadow: 0 1px 2px rgba(33, 28, 25, .05), 0 4px 16px rgba(33, 28, 25, .04);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4 { color: var(--c-primary); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 var(--sp-4); }
h1 { font-size: clamp(2rem, 5.2vw, 3.5rem); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 700; }
h3 { font-size: 1.125rem; font-weight: 700; }
p { margin: 0 0 var(--sp-4); }
a { color: var(--c-secondary); text-underline-offset: 3px; }
a:hover { color: var(--c-primary); }
:focus-visible { outline: 2px solid var(--c-secondary); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-5); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.muted { color: var(--c-muted-fg); }
.notule { font-size: .8125rem; line-height: 1.5; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- en-tête ---------- */
/* En-tete de publication, pas de gabarit. Une ligne de service qui dit ce que
   le site est et quand il a ete releve, puis une barre qui porte la marque avec
   sa mention de metier et une navigation ou la page courante se voit. */
.site-header { position: sticky; top: 0; z-index: 50; }

.entete-barre {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--c-border-strong);
}
.entete-barre .wrap {
  display: flex; align-items: center; gap: var(--sp-6); min-height: 64px;
}

.brand {
  display: flex; flex-direction: column; gap: 1px;
  text-decoration: none; padding: var(--sp-2) 0;
  border-left: 3px solid var(--c-accent); padding-left: var(--sp-3);
}
.brand-nom {
  font-weight: 800; letter-spacing: -.03em; color: var(--c-primary);
  font-size: 1.0625rem; line-height: 1.1;
}
.brand-nom em { font-style: normal; color: var(--c-accent); }
.brand-mention {
  font-family: var(--font-mono); font-size: .6875rem; color: var(--c-muted-fg);
  letter-spacing: .02em;
}

.site-nav { margin-left: auto; display: flex; gap: var(--sp-5); flex-wrap: wrap; align-items: center; }
.site-nav a, .site-nav .nav-actif {
  color: #47403b; text-decoration: none; font-size: .875rem; font-weight: 500;
  padding: var(--sp-2) 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--c-primary); border-bottom-color: var(--c-border-strong); }
.site-nav .nav-actif { color: var(--c-primary); font-weight: 600; border-bottom-color: var(--c-accent); }

@media (max-width: 900px) {
  .entete-barre .wrap { gap: var(--sp-4); flex-wrap: wrap; min-height: 0; padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
  .site-nav { margin-left: 0; width: 100%; gap: var(--sp-4); }
}

/* ---------- héro ---------- */
.hero { padding: var(--sp-8) 0 var(--sp-7); border-bottom: 1px solid var(--c-border); }
.eyebrow {
  font-family: var(--font-mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent);
  margin: 0 0 var(--sp-4);
}
.hero .lede { font-size: 1.125rem; max-width: 62ch; color: #2e2825; }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--c-border);
}
.hero-meta div { min-width: 130px; }
.hero-meta dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted-fg); margin-bottom: var(--sp-1); }
.hero-meta dd { margin: 0; font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; color: var(--c-primary); }

/* ---------- déclaration d'intérêt ---------- */
.disclosure {
  background: var(--c-accent-soft);
  border: 1px solid #f0d9a8;
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-6) 0 0;
  font-size: .875rem; line-height: 1.6; color: #4a3708;
}
.disclosure strong { color: #3d2c05; }

/* ---------- sections ---------- */
section { padding: var(--sp-8) 0; }
/* Le rythme entre deux sections vaut 48 px de part et d'autre du filet. Il
   suffit qu'un dernier element porte sa propre marge basse pour que l'ecart
   passe a 113 px sur cette transition-la et nulle part ailleurs : c'est ce
   qu'on voyait sous le tableau comparatif. La section porte l'espace, ses
   enfants ne le doublent pas. */
section > .wrap > :last-child { margin-bottom: 0; }
section + section { border-top: 1px solid var(--c-border); }
.section-head { max-width: 68ch; margin-bottom: var(--sp-6); }
.section-head p { color: #47403b; }

/* ---------- sélecteur ---------- */
/* La recherche guidee etait un pave navy pose au milieu d'une page claire :
   options a faible contraste sur fond sombre, et un fil de progression de 3 px
   ou les quatre traits se ressemblaient. Elle repasse sur le fond du site, les
   etapes sont nommees, et l'etape courante est designee. */
.selector {
  background: var(--c-surface); color: var(--c-fg);
  border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 0; overflow: hidden;
}
.selector-tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-5); padding: var(--sp-5) var(--sp-6) var(--sp-4);
}
.selector-tete h2 { margin-bottom: var(--sp-2); }
.selector-intro { margin: 0; color: #5c544e; font-size: .9375rem; max-width: 62ch; }
.selector-compteur {
  font-family: var(--font-mono); font-size: .875rem; color: var(--c-muted-fg);
  white-space: nowrap;
}
.selector h2, .selector h3 { color: var(--c-primary); }
.selector .eyebrow { color: var(--c-accent); margin-bottom: var(--sp-2); }

.steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none; margin: 0; padding: 0 var(--sp-6);
}
.step-dot {
  border-top: 3px solid var(--c-border); padding-top: 9px;
  font-size: .8125rem; color: var(--c-muted-fg);
  transition: border-color .25s ease, color .25s ease;
}
.step-dot.is-done { border-top-color: var(--c-accent); color: #5c544e; }
.step-dot.is-courante { border-top-color: var(--c-accent); color: var(--c-primary); font-weight: 600; }

#selector-body { padding: var(--sp-5) var(--sp-6) 0; }
.q-title { font-size: 1.0625rem; font-weight: 500; color: #47403b; margin: 0 0 var(--sp-4); letter-spacing: 0; }
.q-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-3); }
.q-option {
  min-height: 56px; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); cursor: pointer;
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  border-radius: var(--radius); color: var(--c-primary);
  font: inherit; font-size: .9375rem; font-weight: 500; text-align: left;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.q-option:hover {
  border-color: var(--c-accent); background: var(--c-accent-soft);
  box-shadow: inset 3px 0 0 var(--c-accent);
}
.q-option:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.selector-foot {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--c-border); background: var(--c-bg);
}
.btn-ghost {
  background: none; border: 1px solid var(--c-border-strong); color: #47403b;
  padding: var(--sp-2) var(--sp-4); min-height: 44px; border-radius: var(--radius);
  font: inherit; font-size: .875rem; cursor: pointer; transition: border-color .18s ease, color .18s ease;
}
.btn-ghost:hover { border-color: var(--c-accent); color: var(--c-primary); }
/* Ces couleurs dataient du selecteur sur fond navy : depuis qu'il est passe sur
   fond clair, le nom de l'agence en #fff etait INVISIBLE, blanc sur blanc. */
.selector-result ol { margin: var(--sp-4) 0 0; padding: 0; list-style: none; counter-reset: sel; }
.selector-result li {
  counter-increment: sel; position: relative;
  margin-bottom: var(--sp-3); padding-left: var(--sp-6);
  color: #47403b; font-size: .9375rem; line-height: 1.55;
}
.selector-result li::before {
  content: counter(sel); position: absolute; left: 0; top: 1px;
  font-family: var(--font-mono); font-size: .8125rem; font-weight: 600;
  color: var(--c-accent);
}
.selector-result li strong { color: var(--c-primary); font-size: 1rem; }
.selector-result a { color: var(--c-secondary); font-weight: 600; }
.selector-result a:hover { color: var(--c-primary); }

/* ---------- classement ---------- */
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.rank-card {
  position: relative; background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: var(--sp-5); box-shadow: var(--shadow);
  display: grid; grid-template-columns: 48px 260px minmax(0, 1fr) 190px; gap: var(--sp-5); align-items: start;
}
.rank-shot { margin: 0; }
/* La capture ne depasse pas 520 px d'affichage : au-dela, la source de 1 040 px
   tomberait sous le rapport de 2 que le reste du site respecte. */
.fiche-grid .rank-shot img { max-width: 520px; }
.rank-shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 1040 / 650;
  object-fit: cover; object-position: top center;
  border: 1px solid var(--c-border); border-radius: var(--radius); background: #f2efec;
}
.rank-shot figcaption { color: var(--c-muted-fg); margin-top: var(--sp-2); font-size: .75rem; }
.rank-card.is-first .rank-shot img { border-color: var(--c-accent); }
.rank-card.is-first { border-color: var(--c-accent); border-width: 2px; }
.rank-num {
  font-family: var(--font-mono); font-size: 1.75rem; font-weight: 700;
  color: var(--c-border-strong); line-height: 1; padding-top: 2px;
}
.rank-card.is-first .rank-num { color: var(--c-accent); }
.rank-head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.rank-head h3 { margin: 0; font-size: 1.25rem; }
.chip {
  display: inline-block; font-family: var(--font-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px;
  background: #f5f2ef; color: var(--c-muted-fg); border: 1px solid var(--c-border);
}
.chip-locale { background: #eef6f4; color: #0f5132; border-color: #cfe6df; }
.chip-marketplace, .chip-voyagiste { background: #f5f2ef; color: #5c544e; }
.chip-top { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.rank-card p { margin: 0 0 var(--sp-4); color: #47403b; font-size: .9375rem; }
.criteres { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.critere { display: grid; grid-template-columns: 1fr 84px 34px auto; gap: var(--sp-3); align-items: center; font-size: .8125rem; }
.critere-label { color: var(--c-muted-fg); }
.bar { height: 6px; background: #f2efec; border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--c-secondary); border-radius: 3px; }
.rank-card.is-first .bar > i { background: var(--c-accent); }
.critere-val { font-family: var(--font-mono); font-size: .75rem; color: var(--c-primary); text-align: right; }

.score-box { text-align: right; min-width: 0; }
.score-num { font-family: var(--font-mono); font-size: 2.5rem; font-weight: 700; color: var(--c-primary); line-height: 1; letter-spacing: -.03em; }
.rank-card.is-first .score-num { color: var(--c-accent); }
.score-num sub { font-size: .875rem; font-weight: 400; color: var(--c-muted-fg); vertical-align: baseline; }
.score-label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted-fg); margin-top: var(--sp-1); }
.avis-box { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--c-border); font-size: .75rem; color: var(--c-muted-fg); }
.avis-box .note { font-family: var(--font-mono); font-size: 1rem; color: var(--c-primary); font-weight: 600; }
.avis-pending { font-style: italic; }
.rank-actions { margin-top: var(--sp-4); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: var(--sp-2) var(--sp-5); border-radius: var(--radius); font-size: .875rem; font-weight: 600;
  text-decoration: none; border: 1px solid var(--c-primary); background: var(--c-primary); color: #fff;
  transition: background .18s ease, border-color .18s ease;
}
.btn:hover { background: #2e2825; border-color: #2e2825; color: #fff; }
.btn-accent { background: var(--c-accent); border-color: var(--c-accent); }
.btn-accent:hover { background: #855105; border-color: #855105; color: #fff; }

/* ---------- méthodologie ---------- */
.grid-criteres { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.critere-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-5); }
.critere-card .poids { font-family: var(--font-mono); font-size: 1.75rem; font-weight: 700; color: var(--c-accent); line-height: 1; }
.critere-card h3 { margin: var(--sp-3) 0 var(--sp-2); font-size: 1rem; }
.critere-card p { font-size: .875rem; color: #5c544e; margin: 0; }

/* ---------- tableau ---------- */
.table-scroll { margin: var(--sp-6) 0; overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: .875rem; }
thead th {
  position: sticky; top: 0; background: var(--c-primary); color: #fff; text-align: left;
  padding: var(--sp-3) var(--sp-4); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
tbody td { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-border); }
tbody tr:nth-child(odd) td { background: #fdfbf9; }
td.num, th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.table-hint { font-size: .8125rem; color: var(--c-muted-fg); margin-top: var(--sp-3); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: var(--sp-3); }
.faq details { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); }
.faq summary {
  cursor: pointer; padding: var(--sp-4) var(--sp-5); font-weight: 600; color: var(--c-primary);
  list-style: none; display: flex; justify-content: space-between; gap: var(--sp-4); align-items: center;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.25rem; color: var(--c-accent); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq .faq-body { padding: 0 var(--sp-5) var(--sp-5); color: #47403b; }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* ---------- pied ---------- */
.site-footer { background: var(--c-primary); color: #a8a29e; padding: var(--sp-8) 0 var(--sp-6); margin-top: var(--sp-8); font-size: .875rem; }
.site-footer h2 { color: #fff; font-size: 1.125rem; }
.site-footer a { color: #d8d3cf; }
.site-footer a:hover { color: #fff; }
.footer-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-7); margin-bottom: var(--sp-6); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--sp-4); font-size: .8125rem; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }

/* ---------- révélation au défilement ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .35s ease-out, transform .35s ease-out; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- adaptatif ---------- */
@media (max-width: 860px) {
  .footer-cols { grid-template-columns: 1fr; gap: var(--sp-6); }
}
/* Placement explicite de la carte : rang, capture, contenu, score.
   Trois paliers, jamais d'auto-placement implicite. */
/* Les actions passent sous la capture, dans la colonne 2 : elle etait plus
   courte que la colonne de texte et laissait 300 px de blanc sur la carte n°1.
   La carte y gagne aussi une centaine de pixels de hauteur. */
.rank-num     { grid-column: 1; grid-row: 1; }
/* Ce placement ne vaut que DANS une carte de classement. Non scope, il
   s'appliquait aussi a la capture de l'en-tete de fiche et y creait une
   deuxieme colonne implicite que rien ne declarait : le bloc paraissait
   coupe sans qu'aucune regle ne le dise. */
.rank-card .rank-shot { grid-column: 2; grid-row: 1; align-self: start; }
.rank-actions { grid-column: 2; grid-row: 2; align-self: start; flex-direction: column; align-items: stretch; }
.rank-body    { grid-column: 3; grid-row: 1 / span 2; }
.score-box    { grid-column: 4; grid-row: 1 / span 2; }
.rank-actions .btn { text-align: center; }

@media (max-width: 1040px) {
  .rank-card { grid-template-columns: 44px 200px 1fr; }
  .rank-body { grid-column: 3; grid-row: 1; }
  .rank-actions {
    grid-column: 2 / -1; grid-row: 3;
    flex-direction: row; align-items: center;
  }
  .score-box {
    grid-column: 2 / -1; grid-row: 2; text-align: left;
    display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap;
    border-top: 1px solid var(--c-border); padding-top: var(--sp-4);
  }
  .score-label { margin-top: 0; }
  .avis-box { border-top: 0; margin-top: 0; padding-top: 0; flex: 1 1 240px; }
}

@media (max-width: 720px) {
  .rank-card { grid-template-columns: 40px 1fr; gap: var(--sp-4); padding: var(--sp-4); }
  .rank-card .rank-shot { grid-column: 2; grid-row: 1; }
  .rank-body { grid-column: 1 / -1; grid-row: 2; }
  .score-box { grid-column: 1 / -1; grid-row: 3; }
  .rank-actions { grid-column: 1 / -1; grid-row: 4; }
  .score-num { font-size: 2rem; }
  .hero { padding: var(--sp-7) 0 var(--sp-6); }
  section { padding: var(--sp-7) 0; }
}

/* ================= pages internes, ajouts du generateur ================= */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c-primary); color: #fff; padding: var(--sp-3) var(--sp-4);
  border-radius: 0 0 var(--radius) 0; font-size: .875rem;
}
.skip:focus { left: 0; color: #fff; }

.nav-actif { font-size: .875rem; font-weight: 600; color: var(--c-accent); padding: var(--sp-2) 0; }

/* fil d'Ariane */
.ariane { border-bottom: 1px solid var(--c-border); background: var(--c-surface); font-size: .8125rem; }
.ariane .wrap { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.ariane a { color: var(--c-muted-fg); text-decoration: none; }
.ariane a:hover { color: var(--c-primary); text-decoration: underline; }
.ariane span[aria-current] { color: var(--c-primary); font-weight: 600; }
.ariane-sep { color: var(--c-border-strong); margin: 0 var(--sp-3); }

/* verdict, bloc de tete de la page d'accueil */
.verdict {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent); border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-6); margin: var(--sp-6) 0 0; max-width: 74ch;
  box-shadow: var(--shadow);
}
.verdict-titre {
  font-size: 1.25rem; font-weight: 700; color: var(--c-primary);
  letter-spacing: -.02em; margin: 0 0 var(--sp-3);
}
.verdict-texte { color: #47403b; margin-bottom: var(--sp-4); }
.verdict-sous { font-size: .875rem; color: var(--c-muted-fg); margin-bottom: var(--sp-2); }
.verdict-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.verdict-liste li { font-size: .9375rem; color: var(--c-fg); }
.verdict-usage { color: var(--c-muted-fg); }

/* en-tete de page interne */
.page-head { padding: var(--sp-7) 0 var(--sp-6); border-bottom: 1px solid var(--c-border); }
.page-head h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
.page-head .lede { font-size: 1.0625rem; max-width: 68ch; color: #47403b; }

.wrap-texte { max-width: 760px; }
.article h2 { margin-top: var(--sp-7); font-size: 1.5rem; }
.article h2:first-child { margin-top: 0; }
.article p, .article li { color: #2e2825; }
/* 24 px au-dessus collaient le tableau a la phrase qui l'introduit :
   il prend la meme respiration que le reste, 32 px de part et d'autre. */
.article .table-scroll { margin: var(--sp-6) 0; }

/* listes a puces */
.puces { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-3); }
.puces li { position: relative; padding-left: var(--sp-6); }
.puces li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--c-border-strong);
}
.puces-plus li::before { background: var(--c-positive); }
.puces-moins li::before { background: var(--c-accent); }
.puces-num { counter-reset: p; }
.puces-num li::before { display: none; }
.puces-num li { counter-increment: p; padding-left: var(--sp-7); }
.puces-num li::after {
  content: counter(p); position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-weight: 600; color: var(--c-accent);
}

/* methodologie */
.methodo-liste { display: grid; gap: var(--sp-4); }
.methodo-bloc {
  display: grid; grid-template-columns: 88px 1fr; gap: var(--sp-5);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: var(--sp-5);
}
.methodo-poids { text-align: center; }
.methodo-poids .num { display: block; font-size: 2.25rem; font-weight: 700; color: var(--c-accent); line-height: 1; }
.methodo-poids .notule { color: var(--c-muted-fg); }
.methodo-bloc h3 { margin-bottom: var(--sp-2); }
.methodo-bloc > div > p { color: #47403b; }
.methodo-bloc .puces { margin-bottom: 0; font-size: .875rem; }

/* fiche agence */
.fiche-head { border-bottom: 0; }
.fiche-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-6); margin-top: var(--sp-6); align-items: start; }
.fiche-grid .rank-shot img { aspect-ratio: 520 / 325; }
.fiche-score { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-5); }
.fiche-score .score-num { margin: 0; }
.fiche-score .score-label { margin-bottom: var(--sp-4); }
.fiche-score .avis-box { border-top: 0; padding-top: 0; margin-top: 0; margin-bottom: var(--sp-4); }
.fiche-score .chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.fiche-score .btn { width: 100%; }

/* pied a trois colonnes */
.footer-cols { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.footer-bottom p { margin-bottom: var(--sp-2); }
.footer-bottom p:last-child { margin-bottom: 0; color: #8b827b; }

@media (max-width: 900px) {
  .footer-cols { grid-template-columns: 1fr; }
  .fiche-grid { grid-template-columns: 1fr; }
  .methodo-bloc { grid-template-columns: 64px 1fr; gap: var(--sp-4); }
  .methodo-poids .num { font-size: 1.75rem; }
}
@media (max-width: 720px) {
  .verdict { padding: var(--sp-4); }
}

/* ============ hero, bandeau photo et verdict ============
   Mesure a l'origine de cette refonte : le hero faisait 1 860 px de haut pour
   un ecran de 720. Il portait la photo en fond ET la carte du verdict dedans,
   donc une image de ratio 8:3 etiree sur une zone verticale, et 424 px de vide
   a droite de la carte. Les trois roles sont maintenant separes. */

.hero {
  position: relative;
  background: var(--c-surface);
  color: var(--c-fg);
  border-bottom: 0;
  padding: var(--sp-7) 0 var(--sp-6);
  overflow: visible;
}
.hero::before, .hero::after { content: none; }
.hero > .wrap { position: relative; z-index: 1; }
.hero h1 { color: var(--c-primary); max-width: 18ch; }
.hero .lede { color: #47403b; max-width: 56ch; margin-bottom: 0; }
.hero .eyebrow { color: var(--c-accent); }

.hero-duo {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--sp-6) var(--sp-8); align-items: start;
}
.hero-meta {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-4);
  margin: 0; padding: 0; border-top: 0;
}
.hero-meta div { min-width: 0; }
.hero-meta dt { font-size: .75rem; text-transform: none; letter-spacing: 0; color: var(--c-muted-fg); margin-bottom: 2px; }
.hero-meta dd { margin: 0; font-family: var(--font-mono); font-size: 1.375rem; font-weight: 600; color: var(--c-primary); }

/* La photo garde son ratio : elle n'est plus un fond etirable mais une image. */
.bandeau-photo { background: var(--c-primary); line-height: 0; }
.bandeau-photo img {
  display: block; width: 100%; height: clamp(300px, 34vw, 460px); object-fit: cover;
  object-position: center 54%;
}
@media (max-width: 720px) { .bandeau-photo img { height: 220px; } }

/* Le verdict remonte a cheval sur le bandeau, sur le fond clair de la page. */
.verdict-section { padding: 0 0 var(--sp-8); background: var(--c-bg); border-top: 0; }
.verdict-section > .wrap { margin-top: -96px; position: relative; z-index: 2; }

/* Le verdict : la reponse, posee avant tout le reste. */
.verdict {
  background: #fff;
  border: 1px solid var(--c-border); border-top: 3px solid var(--c-accent);
  border-radius: var(--radius);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  margin: 0;
  max-width: none;
  box-shadow: 0 1px 2px rgba(33,28,25,.06), 0 18px 44px rgba(33,28,25,.14);
}
/* Le texte du verdict garde une longueur de ligne lisible meme si la carte
   occupe toute la largeur : c'est la colonne qui se limite, pas la carte. */
.verdict-texte, .verdict-sous { max-width: 72ch; }
.verdict-titre {
  font-size: 1.375rem; line-height: 1.25;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 2px solid var(--c-accent);
}
.verdict-texte { color: #47403b; margin-bottom: var(--sp-5); font-size: .9375rem; }
.verdict-sous {
  font-family: var(--font-mono);
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-muted-fg); font-weight: 500;
  margin: 0 0 var(--sp-3);
}
.verdict-liste { display: grid; gap: 0; margin: 0 0 var(--sp-6); }
.verdict-liste:last-child { margin-bottom: 0; }
.verdict-liste li {
  display: grid; grid-template-columns: 230px 1fr; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-top: 1px solid var(--c-border);
  font-size: .875rem; align-items: baseline;
}
.verdict-liste li:first-child { border-top: 0; padding-top: 0; }
.verdict-usage { color: var(--c-primary); font-weight: 600; }
.verdict-bloc-2 { border-top: 1px dashed var(--c-border-strong); padding-top: var(--sp-5); }

/* ---------- d'ou vient ce classement (accueil) ----------
   Pose entre le verdict et le selecteur : le lecteur a la reponse, puis sait
   d'ou elle sort. Fond blanc entre deux bandes creme, la rupture se voit sans
   ajouter une couleur au projet. Les trois chiffres du releve tiennent la
   colonne de droite ; sous 860 px ils passent en ligne sous le texte. */
.origine {
  background: var(--c-surface);
  border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border);
  padding: var(--sp-8) 0;
}
.origine-duo {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--sp-6) var(--sp-8); align-items: start;
}
.origine-texte h2 { margin-bottom: var(--sp-5); }
.origine-texte p { max-width: 70ch; }
.origine-texte p:last-child { margin-bottom: 0; }
.origine-chiffres {
  margin: 0; display: grid; gap: var(--sp-5); align-content: start;
  border-left: 2px solid var(--c-border-strong); padding-left: var(--sp-5);
}
.origine-chiffres dt { font-size: .75rem; line-height: 1.35; color: var(--c-muted-fg); }
.origine-chiffres dd {
  margin: var(--sp-1) 0 0; font-size: 1.75rem; font-weight: 700;
  color: var(--c-secondary); letter-spacing: -.02em; line-height: 1.1;
}
@media (max-width: 860px) {
  .origine { padding: var(--sp-7) 0; }
  .origine-duo { grid-template-columns: 1fr; }
  .origine-chiffres {
    grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--c-border); padding-top: var(--sp-5);
  }
  .origine-chiffres dd { font-size: 1.375rem; }
}

/* avis : distinguer la note declaree de la note relevee sur une plateforme */
.avis-origine { color: var(--c-muted-fg); font-size: .75rem; }
.avis-nb { color: var(--c-muted-fg); font-size: .8125rem; }
.avis-box.avis-declaree { border-top-color: var(--c-border); }
.avis-box.avis-tiers .note { color: var(--c-positive); }
.avis-box.avis-tiers .avis-origine { color: var(--c-positive); font-weight: 600; }

/* "Voir aussi" en fin de fiche */
.voisins { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.voisins li { margin: 0; padding: 0; }
.voisins li::before { display: none; }
.voisins a {
  display: block; background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: var(--sp-4); text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.voisins a:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.voisins .voisin-rang { font-family: var(--font-mono); font-size: .75rem; color: var(--c-accent); display: block; margin-bottom: var(--sp-1); }
.voisins .voisin-nom { color: var(--c-primary); font-weight: 700; display: block; margin-bottom: var(--sp-1); }
.voisins .voisin-score { font-family: var(--font-mono); font-size: .8125rem; color: var(--c-muted-fg); }

.credit-image { font-size: .75rem; color: #8b827b; }
.credit-image a { color: #a8a29e; }

@media (max-width: 720px) {
  .verdict { padding: var(--sp-4); margin-top: var(--sp-5); }
  .verdict-liste li { grid-template-columns: 1fr; gap: var(--sp-1); padding: var(--sp-3) 0; }
  .verdict-titre { font-size: 1.125rem; }
}

/* ============ cibles tactiles ============
   Tout lien de navigation ou de pied de page doit offrir au moins 44 px de hauteur
   tactile, y compris quand son texte fait 14 px. Le padding cree la zone, le
   line-height garde l'alignement visuel inchange. */

.site-header .wrap { min-height: 64px; }
.site-nav a, .nav-actif {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: var(--sp-1) 0;
}
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.footer-links a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: var(--sp-1) 0;
}
.ariane a, .ariane span[aria-current] {
  display: inline-flex; align-items: center; min-height: 44px;
}
.voisins a { min-height: 88px; }
.rank-shot { display: block; }

/* Liens en petit corps : la zone tactile est agrandie par du padding compense
   en marge negative, ce qui ne deplace rien visuellement. */
.avis-box a, td a, .table-scroll a {
  display: inline-block;
  padding: 12px 6px;
  margin: -12px -6px;
}

/* champ legal restant a renseigner */
.a-remplir { background: #fef6e4; color: #7a5a06; font-family: var(--font-mono); font-size: .8125rem; }
.article th[scope="row"] { text-align: left; background: #faf8f6; white-space: nowrap; }

/* Domaine affiche en texte pour les agences non liees */
.rank-domaine, .fiche-domaine .num {
  display: inline-block; font-size: .8125rem; color: var(--c-muted-fg);
  padding: var(--sp-2) 0;
}
.fiche-domaine { margin: 0; padding-top: var(--sp-2); border-top: 1px solid var(--c-border); }
.rank-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
/* En colonne (>=1041 px) les boutons occupent la largeur de la colonne capture :
   la regle ci-dessus centre les enfants, ce qui les faisait flotter au milieu. */
@media (min-width: 1041px) {
  .rank-actions { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .rank-actions .btn { width: 100%; text-align: center; }
}

/* ================= formulaire de contact ================= */

.contact-bloc {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: var(--sp-5); margin: var(--sp-4) 0 var(--sp-6);
}
.contact-champs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.contact-champ { margin: 0 0 var(--sp-4); }
.contact-champ label {
  display: block; font-size: .8125rem; font-weight: 600; color: var(--c-primary);
  margin-bottom: var(--sp-2);
}
.contact-champ input, .contact-champ select, .contact-champ textarea {
  width: 100%; font: inherit; font-size: .9375rem; color: var(--c-fg);
  background: var(--c-bg); border: 1px solid var(--c-border-strong);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); min-height: 46px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.contact-champ textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.contact-champ input:focus, .contact-champ select:focus, .contact-champ textarea:focus {
  outline: none; border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(161, 98, 7, .14);
}
.contact-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; margin: 0; }
.contact-actions button { cursor: pointer; }
.contact-note { font-size: .75rem; color: var(--c-muted-fg); line-height: 1.45; }
.contact-repli { font-size: .8125rem; margin: var(--sp-4) 0 0; color: var(--c-muted-fg); }

@media (max-width: 640px) {
  .contact-champs { grid-template-columns: 1fr; gap: 0; }
  .contact-bloc { padding: var(--sp-4); }
  .contact-actions { flex-direction: column; align-items: stretch; }
  .contact-actions button { width: 100%; }
}

/* agences nommees hors panel */
.hors-panel-liste { display: grid; gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-6); }
.hors-panel {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-border-strong);
  border-radius: var(--radius); padding: var(--sp-4) var(--sp-5);
}
.hors-panel h3 { font-size: 1rem; margin-bottom: var(--sp-2); display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: baseline; }
.hors-panel h3 .num { font-size: .75rem; color: var(--c-muted-fg); font-weight: 400; }
.hors-panel p { margin: 0; font-size: .875rem; color: #47403b; }

/* ---------- bandeau de chiffres du n°1 ----------
   Les quatre chiffres etaient noyes dans un paragraphe de dix lignes : ni
   lisibles a l'oeil, ni extractibles par un moteur. Ils sont maintenant poses
   avant la prose, avec leur origine sous le bandeau. */
.verdict-chiffres {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4); margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-border);
}
.verdict-chiffres > div { min-width: 0; }
.verdict-chiffres .vc-val {
  margin: 0; font-size: 1.75rem; font-weight: 700; line-height: 1.05;
  color: var(--c-primary); letter-spacing: -.02em;
}
.verdict-chiffres .vc-val span { font-size: .9375rem; font-weight: 600; color: var(--c-accent); }
.verdict-chiffres > div:first-child .vc-val { color: var(--c-accent); }
.verdict-chiffres > div:first-child .vc-val span { color: var(--c-muted-fg); }
.verdict-chiffres .vc-lbl {
  font-size: .75rem; line-height: 1.35; color: var(--c-muted-fg);
  margin-top: var(--sp-1);
}
.verdict-chiffres-src { color: var(--c-muted-fg); margin: 0 0 var(--sp-5); }
.verdict-texte p:last-child { margin-bottom: 0; }
.verdict-texte { color: #47403b; margin-bottom: var(--sp-5); font-size: .9375rem; }

@media (max-width: 720px) {
  .verdict-chiffres { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-4); }
  .verdict-chiffres .vc-val { font-size: 1.5rem; }
}

/* ---------- carte d'identité vérifiée ----------
   Chaque donnée est accompagnée de l'extrait du site de l'agence qui la fonde.
   C'est ce que les classements concurrents ne publient jamais. */
.carte-identite { margin: 0 0 var(--sp-6); }
.carte-identite .ci-ligne {
  display: grid; grid-template-columns: 185px 1fr; gap: var(--sp-4);
  padding: var(--sp-4) 0; border-top: 1px solid var(--c-border);
}
.carte-identite .ci-ligne:first-child { border-top: 0; padding-top: 0; }
.carte-identite dt { color: var(--c-primary); font-weight: 600; font-size: .875rem; }
.carte-identite dd { margin: 0; }
.carte-identite .ci-val {
  display: block; font-size: 1.125rem; font-weight: 700; color: var(--c-fg);
  letter-spacing: -.01em;
}
.carte-identite .ci-src {
  display: block; margin-top: var(--sp-2);
  font-size: .8125rem; line-height: 1.5; color: var(--c-muted-fg);
  border-left: 2px solid var(--c-border-strong); padding-left: var(--sp-3);
  font-style: italic;
}
.carte-identite .ci-src::before { content: "\201C"; }
.carte-identite .ci-src::after { content: "\201D"; }

@media (max-width: 640px) {
  .carte-identite .ci-ligne { grid-template-columns: 1fr; gap: var(--sp-2); }
}

/* ============ rythme de lecture des pages de fiche ============
   Constat mesuré : 12 titres à 34 px sur 4 568 px de page, avec margin-top 0.
   Le 34 px sert de titre de page ET de titre de sous-section, donc plus rien
   ne hiérarchise, et l'espace posé SOUS le titre au lieu d'AU-DESSUS empêche
   les sections de se séparer.

   Deux règles appliquées : une échelle typographique cohérente (le titre de
   sous-section descend à 21 px, palier du dessous), et l'espace qui précède un
   titre plutôt qu'il ne le suit, ce qui rattache visuellement le titre à son
   propre texte. */

.wrap-texte { max-width: 72ch; }

.wrap-texte h2,
.voie-texte h2 {
  font-size: 1.3125rem;          /* 21px, au lieu de 34 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
  /* Environ trois fois plus d'air au-dessus qu'en dessous : le titre se
     rattache à son propre texte et se détache de la section précédente.
     64 px au-dessus faisait flotter les sections sans lien entre elles. */
  margin: calc(var(--sp-6) + var(--sp-2)) 0 var(--sp-3);
}
.wrap-texte > h2:first-child,
.voie-texte > h2:first-child,
.wrap-texte section > h2:first-child { margin-top: 0; }

/* Un titre qui suit immédiatement un bloc de données n'a pas besoin
   d'autant d'air : le bloc a déjà sa propre respiration. */
.wrap-texte .criteres + h2,
.wrap-texte .carte-identite + h2,
.voie-texte .criteres + h2,
.voie-texte .carte-identite + h2,
.wrap-texte dl + h2 { margin-top: var(--sp-6); }

.wrap-texte h3,
.voie-texte h3 { font-size: 1rem; margin: var(--sp-6) 0 var(--sp-2); }

/* Les listes à puces respiraient comme des paragraphes séparés alors qu'elles
   forment un seul bloc de lecture. */
/* .puces est une grille : une marge sur les enfants s'AJOUTE au gap au lieu de
   le remplacer, ce qui donnait 20 px la ou 12 suffisent. On règle le gap. */
.wrap-texte .puces,
.voie-texte .puces { margin: 0 0 var(--sp-5); gap: var(--sp-3); }
.wrap-texte .puces li,
.voie-texte .puces li { line-height: 1.55; }

.wrap-texte p,
.voie-texte p { margin-bottom: var(--sp-4); }
.wrap-texte p:last-child,
.voie-texte p:last-child { margin-bottom: 0; }

/* ---------- sommaire ancré des fiches ----------
   Douze sections sur 4 700 px se navigaient sans repère. Ce sont de simples
   liens d'ancre : le sommaire fonctionne sans JavaScript, l'état actif est
   une amélioration facultative. */
.sommaire {
  margin: 0 0 var(--sp-7);
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.sommaire-titre {
  font-family: var(--font-mono);
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-muted-fg); font-weight: 500;
  margin: 0 0 var(--sp-3);
}
.sommaire-liste {
  list-style: none; margin: 0; padding: 0;
  counter-reset: s;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1) var(--sp-5);
}
.sommaire-liste li { counter-increment: s; }
.sommaire-liste a {
  display: block; position: relative;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
  font-size: .875rem; line-height: 1.4;
  color: var(--c-primary); text-decoration: none;
  border-radius: 2px;
}
.sommaire-liste a::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: var(--sp-2);
  font-family: var(--font-mono); font-size: .75rem;
  color: var(--c-border-strong);
}
.sommaire-liste a:hover { color: var(--c-accent); }
.sommaire-liste a:hover::before { color: var(--c-accent); }
.sommaire-liste a[aria-current="true"] { color: var(--c-accent); font-weight: 600; }
.sommaire-liste a[aria-current="true"]::before { color: var(--c-accent); }

@media (max-width: 620px) {
  .sommaire-liste { grid-template-columns: 1fr; }
}

/* L'en-tête est collant sur 60 px : sans cette réserve, toute ancre atterrit
   sous lui et le titre visé reste invisible. Vaut pour tout le site. */
:target,
[id] { scroll-margin-top: 76px; }

/* Message d'erreur du formulaire : annonce par role="alert", place juste
   au-dessus du bouton, la ou le regard se trouve au moment du clic. */
.contact-erreur {
  margin: 0 0 var(--sp-3, 12px);
  padding: 10px 14px;
  border-left: 3px solid #a81f1f;
  background: #fdf1ef;
  color: #7a2323;
  font-size: .875rem; line-height: 1.5;
  border-radius: 3px;
}
.contact-obligatoire { color: #78716c; margin: 0 0 var(--sp-2, 8px); font-size: .75rem; line-height: 1.45; }

/* ---------- circuits publiés ----------
   Chaque ligne porte le nom du circuit, sa durée comptée sur l'itinéraire, son
   prix quand il est affiché, et ses étapes. Une grille plutôt qu'un tableau :
   le contenu est hétérogène et le tableau se casserait en mobile. */
.circuits { list-style: none; margin: 0 0 var(--sp-6); padding: 0; }
.circuits li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-1) var(--sp-4);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--c-border);
  align-items: baseline;
}
.circuits li:first-child { border-top: 0; padding-top: 0; }
.ci-nom { grid-column: 1; font-weight: 600; color: var(--c-primary); line-height: 1.35; }
.ci-jours {
  grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap;
  font-size: .875rem; color: var(--c-fg); font-weight: 600;
}
.ci-prix {
  grid-column: 2; grid-row: 2; text-align: right; white-space: nowrap;
  font-size: .8125rem; color: var(--c-accent); font-weight: 600;
}
.ci-etapes {
  grid-column: 1; grid-row: 2;
  font-size: .8125rem; color: var(--c-muted-fg); line-height: 1.45;
}

@media (max-width: 560px) {
  .circuits li { grid-template-columns: 1fr; }
  .ci-jours, .ci-prix { grid-column: 1; text-align: left; }
  .ci-jours { grid-row: auto; }
  .ci-prix { grid-row: auto; }
  .ci-etapes { grid-row: auto; }
}

/* ---------- réponse courte et citable ----------
   Posée dans les 120 premiers mots de la fiche. Traitée comme une citation :
   elle doit se détacher du reste et se tenir seule si on l'extrait. */
.reponse-courte {
  /* Le paragraphe qui suit le cadre venait le toucher : sans respiration, le
     texte courant se lit comme la suite du cadre. */
  margin: var(--sp-5) 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-accent-soft);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1rem; line-height: 1.6; color: #3d2c05;
  max-width: 72ch;
}

/* repère posé sous le chapo des guides et pages fixes : nomme l'agence
   première et sa raison avant la lecture, dans le style de la réponse courte */
.repere-premier {
  margin: var(--sp-5) 0 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-accent-soft);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .9375rem; line-height: 1.6; color: #3d2c05;
  max-width: 72ch;
}

/* Le critère le plus cité par les voyageurs sur les forums : savoir à qui on
   parle. Traité comme une observation de terrain, pas comme un argument. */
.qui-en-face {
  margin: var(--sp-5) 0 0;
  padding-left: var(--sp-5);
  border-left: 2px solid var(--c-border-strong);
  font-size: .9375rem; line-height: 1.65; color: #47403b;
  max-width: 70ch;
}

/* Le corps du verdict en deux colonnes : la carte occupe toute la largeur du
   contenant, mais le texte garde une longueur de ligne lisible et la colonne
   de droite remplit le vide au lieu de rallonger la carte de 600 px. */
.verdict-corps {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--sp-6) var(--sp-7); align-items: start;
}
.verdict-corps .verdict-texte { max-width: none; margin-bottom: 0; }
.verdict-cote { border-left: 1px solid var(--c-border); padding-left: var(--sp-6); }
.verdict-cote .verdict-sous { max-width: none; }
.verdict-cote .verdict-bloc-2 { margin-top: var(--sp-5); }
@media (max-width: 860px) {
  .verdict-corps { grid-template-columns: 1fr; gap: var(--sp-5); }
  .verdict-cote { border-left: 0; border-top: 1px solid var(--c-border); padding-left: 0; padding-top: var(--sp-5); }
}

/* Les périmètres et les niches remplissaient 1 047 px dans une colonne de
   408 px : dix éléments dont le libellé passait à la ligne trois fois. Le
   libellé porte l'information, la précision suit sur la même ligne en plus
   petit, et la colonne redevient une liste que l'on parcourt. */
.verdict-cote .verdict-liste { gap: 0; }
.verdict-cote .verdict-liste li {
  display: block; padding: 9px 0; border-bottom: 1px solid var(--c-border);
  font-size: .875rem; line-height: 1.45; color: var(--c-muted-fg);
}
.verdict-cote .verdict-liste li:last-child { border-bottom: 0; }
.verdict-cote .verdict-usage {
  display: block; color: var(--c-fg); font-weight: 600; font-size: .9375rem;
}
.verdict-cote .verdict-liste li strong { color: var(--c-primary); }
.verdict-cote .verdict-sous {
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--c-muted-fg); margin-bottom: var(--sp-2);
}

/* Les périmètres : une rangée qu'on parcourt d'un regard, pas sept lignes. */
.verdict-perimetres {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.verdict-perimetres li {
  font-size: .8125rem; color: #47403b; background: var(--c-bg);
  border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 5px 10px;
}


/* ---------- en-tete sur petit ecran ----------
   La navigation etait purement masquee sous 720 px : aucune navigation sur
   mobile, sur les deux sites. Elle devient une rangee qui defile lateralement,
   et l'en-tete se decolle pour ne pas occuper le tiers de l'ecran. */
@media (max-width: 720px) {
  .site-header { position: static; }
  .entete-barre .wrap {
    flex-direction: column; align-items: stretch; gap: var(--sp-3);
    padding-top: var(--sp-3); padding-bottom: 0;
  }
  /* min-width: 0 est indispensable : sans lui, la rangee en nowrap impose sa
     largeur de contenu (610 px) au conteneur flex, et c'est la PAGE qui defile
     lateralement au lieu de la seule barre. */
  .entete-barre .wrap { min-width: 0; }
  .site-nav {
    margin-left: 0; width: 100%; min-width: 0; max-width: 100%;
    flex-wrap: nowrap; gap: var(--sp-4);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--sp-2);
  }
  .brand { min-width: 0; }
  .brand-nom, .brand-mention { overflow-wrap: anywhere; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a, .site-nav .nav-actif { white-space: nowrap; font-size: .8125rem; }
}

/* ============ cartes de classement : hiérarchie remise d'aplomb ============
   Ce que la carte disait mal. Le libellé « SCORE SUR 100 » en capitales était
   plus présent que le score lui-même. Les deux boutons pleins, empilés et de
   pleine largeur, pesaient plus lourd que le contenu qu'ils accompagnent. Le
   bloc d'avis se noyait dans du gris. La note et les critères sont maintenant
   les deux points forts de la carte, dans cet ordre. */

.score-box {
  text-align: left; padding-left: var(--sp-5);
  border-left: 1px solid var(--c-border);
}
.rank-card.is-first .score-box { border-left-color: var(--c-accent); }
/* `.rank-card p` (0,1,1) ecrasait `.score-num` (0,1,0) : le score, cense etre
   l'element le plus gros de la carte, etait rendu a 15 px depuis le debut. Il
   faut donc porter la classe dans le contexte de la carte pour reprendre la
   main sur le selecteur d'element. */
.rank-card .score-num, .fiche-score .score-num {
  font-size: 3rem; letter-spacing: -.04em; line-height: 1;
  margin: 0; font-weight: 700;
}
.rank-card .score-num sub, .fiche-score .score-num sub {
  font-size: .9375rem; font-weight: 400; color: var(--c-muted-fg);
}
.rank-card .score-label, .fiche-score .score-label {
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-muted-fg); margin: 2px 0 0;
}
.rank-card .avis-box .note { font-size: 1.25rem; }
.avis-box {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border); border-bottom: 0;
  font-size: .75rem; line-height: 1.5; color: var(--c-muted-fg);
}
.avis-box .note { display: block; font-size: 1.25rem; margin-bottom: 2px; }

/* Deux boutons pleins empilés se disputaient l'attention. C'est le lien sortant
   qui reste plein, parce que c'est la seule action qui quitte le site ; le lien
   vers la fiche redevient un bouton de contour, ce qu'est une navigation
   interne. Les deux gardent leurs 44 px de cible. */
.rank-actions .btn:not(.btn-accent) {
  background: transparent; color: var(--c-secondary);
  border-color: var(--c-border-strong); font-weight: 600;
}
.rank-actions .btn:not(.btn-accent):hover {
  border-color: var(--c-primary); color: var(--c-primary); background: var(--c-bg);
}

/* Les critères : la barre plus longue, le libellé plus lisible, la valeur en
   appui. La colonne de barre faisait 84 px pour cinq lignes : trop courte pour
   qu'on voie la différence entre 3 et 5 sur 5. */
.critere { grid-template-columns: 1fr 132px 34px auto; font-size: .875rem; }
.critere-label { color: #47403b; }
.bar { height: 7px; }
.rank-card:not(.is-first) .bar > i { background: #a8a29e; }

/* ============ tableau comparatif ============
   Il était trié mais pas numéroté : situer une agence demandait de compter les
   lignes. Et la note finale, qui est le résultat, ne pesait pas plus que les
   cinq notes qui la composent. La valeur reste le porteur de l'information ;
   la teinte ne fait que la renforcer, jamais la remplacer. */
.tableau .rang, table .rang {
  color: var(--c-muted-fg); font-size: .8125rem; width: 44px;
}
.est-premiere .rang { color: var(--c-accent); font-weight: 700; }
.est-premiere { background: var(--c-accent-soft); }
.est-premiere .cell-nom { font-weight: 700; }
.cell-score { font-weight: 700; font-size: 1.0625rem; color: var(--c-primary); }
.est-premiere .cell-score { color: var(--c-accent); }
.note-5 { color: var(--c-primary); font-weight: 600; }
.note-4 { color: #47403b; }
.note-3, .note-2, .note-1, .note-0 { color: var(--c-muted-fg); }

/* Une introduction de section qui laissait la moitié droite vide : la
   justification passe en encadré, à côté du propos plutôt qu'en dessous. */
.section-head-duo {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--sp-6) var(--sp-7); align-items: start; max-width: none;
}
.section-head-duo > div > p:last-child { margin-bottom: 0; }
.encadre-raison {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius); padding: var(--sp-4) var(--sp-5);
}
.encadre-raison p { font-size: .875rem; line-height: 1.6; color: #5c544e; }
.encadre-raison p:last-child { margin-bottom: 0; }
.encadre-titre {
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--c-accent); margin-bottom: var(--sp-2);
}
@media (max-width: 860px) {
  .section-head-duo { grid-template-columns: 1fr; }
}

/* ============ gabarit de fiche a deux voies ============
   Mesure du defaut : sur /agence/marco-vasco/ en 1 440 px, tout le corps de la
   fiche tenait dans une colonne de 595 px posee au milieu, soit 845 px de vide
   a droite sur 3 438 px de haut. La carte d'identite, les listes, les barres de
   notation, la FAQ et le formulaire subissaient la meme largeur de lecture que
   la prose, alors que ce sont des blocs de donnees : ils paraissaient coupes.

   Deux gabarits de comparateurs edites ont ete mesures avant d'ecrire ceci.
   Les Numeriques, fiche produit notee, en 1 440 px : conteneur 996, colonne de
   lecture 672, rail colle 324, panneau de verdict et tableau de caracteristiques
   sur toute la largeur de la colonne. Que Choisir, page comparative : conteneur
   1 160 sans rail, et une grille de cartes de 360.

   La regle retenue ici : la prose garde sa mesure de lecture, les blocs de
   donnees prennent toute la colonne, et le rail porte ce qu'on veut garder sous
   les yeux pendant 3 400 px de defilement. */

.deux-voies {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-7);
}
.voie-texte { min-width: 0; }
/* Seule la prose est bornee. Un paragraphe de 704 px passerait 80 signes par
   ligne, au-dela du confort de lecture ; les blocs de donnees, eux, prennent
   toute la colonne. */
.voie-texte > p { max-width: 68ch; }
.voie-texte > .reponse-courte { max-width: none; }

.voie-rail { min-width: 0; }
.rail-pile { position: sticky; top: var(--sp-5); display: grid; gap: var(--sp-4); }

.rail-carte {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: var(--sp-5);
}
.rail-titre {
  margin: 0 0 var(--sp-4); font-family: var(--font-mono);
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-muted-fg); font-weight: 500;
}
.rail-chiffres { margin: 0 0 var(--sp-4); }
.rail-ligne {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-top: 1px solid var(--c-border);
}
.rail-ligne:first-child { border-top: 0; padding-top: 0; }
.rail-ligne dt { font-size: .8125rem; color: var(--c-muted-fg); }
.rail-ligne dd { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.rail-ligne dd .num { font-size: 1.375rem; font-weight: 700; color: var(--c-primary); line-height: 1; }
.rail-sur { font-size: .75rem; color: var(--c-muted-fg); }
.rail-mot { font-size: .875rem; font-weight: 600; color: var(--c-primary); }
.rail-liens { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-2); }
.rail-liens a { font-size: .875rem; line-height: 1.45; font-weight: 600; }
.rail-date { margin: 0; font-size: .75rem; line-height: 1.5; color: var(--c-muted-fg); }

/* Le sommaire vit desormais dans le rail : il y tient moins de place et sert de
   reperage permanent, au lieu de pousser le premier mot 356 px plus bas. */
.voie-rail .sommaire { margin: 0; padding: var(--sp-5); }
.voie-rail .sommaire-liste { max-height: 46vh; overflow-y: auto; }

/* ---------- bilan en deux colonnes ----------
   Les points forts et les points de vigilance se lisaient l'un sous l'autre, en
   simple liste a puces sur fond blanc : rien ne signalait que ce sont les deux
   moities d'un meme jugement. Ils sont maintenant opposes dans un seul panneau,
   le dispositif que Les Numeriques nomme plus et moins. */
.bilan {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); overflow: hidden;
  margin: var(--sp-6) 0;
}
.bilan-col { padding: var(--sp-5); }
.bilan-col + .bilan-col { border-left: 1px solid var(--c-border); }
.voie-texte .bilan-col h2 { margin: 0 0 var(--sp-4); font-size: 1.0625rem; }
.voie-texte .bilan-col .puces { margin: 0; font-size: .9375rem; }
.bilan-col-plus { background: #f6faf7; }
.bilan-col-moins { background: #fdf9f4; }

/* ---------- en-tete de fiche ----------
   La reponse courte et le chapo s'arretaient a 645 px dans un en-tete de 1 072,
   la moitie droite restait vide sous le titre. La reponse et la preuve occupent
   maintenant la colonne large, la carte de note tient la colonne etroite. */
/* La reponse citable a gauche, la preuve a droite : deux colonnes declarees,
   la capture reste sous 320 px d'affichage pour une source de 1 040. */
.fiche-intro {
  min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--sp-5); align-items: start;
}
.fiche-intro .reponse-courte { margin: 0; max-width: none; }
.fiche-intro .rank-shot img { max-width: none; width: 100%; }

@media (max-width: 1040px) {
  .deux-voies { grid-template-columns: 1fr; gap: var(--sp-6); }
  .rail-pile { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .voie-rail .sommaire-liste { max-height: none; }
}
@media (max-width: 640px) {
  .bilan { grid-template-columns: 1fr; }
  .bilan-col + .bilan-col { border-left: 0; border-top: 1px solid var(--c-border); }
}

/* Le bloc des fiches voisines a quitte la colonne de lecture pour la pleine
   largeur : son titre reprend l'echelle des titres de section de la fiche. */
.voir-aussi { padding: var(--sp-7) 0; border-top: 1px solid var(--c-border); }
.voir-aussi h2 { font-size: 1.3125rem; font-weight: 700; letter-spacing: -.015em; margin: 0 0 var(--sp-4); }

/* Le sommaire passe a une seule colonne dans le rail : sur 320 px, deux
   colonnes hachaient chaque intitule sur trois lignes. */
.voie-rail .sommaire-liste { grid-template-columns: 1fr; }
/* Sous 860 px la reponse citable tombait sous 400 px a cote de la capture :
   les deux passent l'une sous l'autre. */
@media (max-width: 860px) { .fiche-intro { grid-template-columns: 1fr; } }

/* Le rail doit occuper toute la hauteur de la grille, sinon la pile collee
   s'arrete la ou finit son propre contenu : mesure faite, elle disparaissait
   au bout de 945 px sur une colonne de texte de 3 059. */
.voie-rail { align-self: stretch; }

/* Les barres de notation tenaient sur 84 px a 590 px de leur intitule : la
   ligne se lisait comme deux colonnes sans rapport. Dans la colonne large,
   l'intitule est borne et la barre prend la place restante. */
.voie-texte .critere { grid-template-columns: minmax(0, 230px) minmax(0, 1fr) 42px auto; gap: var(--sp-4); font-size: .875rem; }
.voie-texte .critere .bar { height: 8px; }
.voie-texte .criteres { gap: var(--sp-3); margin: var(--sp-2) 0 0; }

/* La carte d'identite est une donnee verifiee, pas de la prose : elle prend le
   traitement de panneau du bilan pour se distinguer du texte courant. */
.voie-texte .carte-identite {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: var(--sp-5); margin: var(--sp-5) 0 var(--sp-6);
}
.voie-texte .carte-identite .ci-ligne { grid-template-columns: 230px minmax(0, 1fr); }
/* Sur les classements, la valeur n'est pas un numero de licence mais une
   phrase de deux ou trois lignes. En 18 px gras, elle criait et se lisait
   moins bien que l'intitule qu'elle suit. Corps courant, poids normal, et la
   majuscule que toute phrase merite. */
.voie-texte .carte-identite .ci-val {
  font-size: .9375rem; font-weight: 400; line-height: 1.6;
  letter-spacing: 0; color: #2e2825;
}
.voie-texte .carte-identite .ci-val::first-letter { text-transform: uppercase; }
.voie-texte .carte-identite .ci-ligne { padding: var(--sp-4) 0; align-items: baseline; }

@media (max-width: 1040px) {
  .voie-texte .critere { grid-template-columns: minmax(0, 1fr) 120px 42px auto; }
}

/* La colonne d'intitules de 230 px etait posee apres la regle mobile, donc elle
   la battait : sur 375 px il ne restait que 39 px a la valeur, et la page
   partait a 446 px de large. Mesure faite sur /agence/asia-hero-travel/. */
@media (max-width: 640px) {
  .voie-texte .carte-identite .ci-ligne { grid-template-columns: 1fr; gap: var(--sp-2); }
  .voie-texte .carte-identite { padding: var(--sp-4); }
}
/* Une valeur relevee peut etre un numero de licence sans espace : elle se coupe
   plutot que de pousser la page. */
.carte-identite .ci-val, .carte-identite .ci-src { overflow-wrap: anywhere; }

/* ---------- podium du rail ----------
   Pose la tete du classement sur chaque page de guide. C'est le meilleur usage
   de la colonne de droite : un rappel du sujet du site, et le maillage interne
   le plus utile qu'on puisse y mettre. */
.podium { list-style: none; margin: 0 0 var(--sp-4); padding: 0; counter-reset: none; }
.podium li { margin: 0; }
/* La grille etait posee sur le lien. Sur les pages ou les lignes du podium ne
   sont pas cliquables, les trois valeurs se retrouvaient collees : « 01Voyage
   sur Mesure Vietnam95 ». Elle appartient a la ligne, que celle-ci porte un
   lien ou non. */
.podium li, .podium a {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: var(--sp-3);
  align-items: baseline; padding: var(--sp-3) 0; border-top: 1px solid var(--c-border);
  color: var(--c-primary); text-decoration: none; transition: color .18s ease;
}
/* Quand la ligne porte un lien, c'est lui qui tient la grille : le li se
   remet en bloc pour ne pas en poser deux l'une dans l'autre. */
.podium li:has(> a) { display: block; padding: 0; border-top: 0; }
.podium li:first-child, .podium li:first-child a { border-top: 0; padding-top: 0; }
.podium a:hover .podium-nom { text-decoration: underline; text-underline-offset: 3px; }
.podium a:hover { color: var(--c-accent); }
.podium-rang { font-size: .75rem; color: var(--c-muted-fg); }
.podium-nom { font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.podium-note { font-size: 1.0625rem; font-weight: 700; }
.podium .est-premiere .podium-rang,
.podium .est-premiere .podium-note { color: var(--c-accent); }
.podium .est-premiere .podium-nom { color: var(--c-fg); }

/* Le corps des guides prend le meme gabarit que les fiches. Sa prose reste bornee
   a la mesure de lecture ; ce sont ses tableaux et ses encadres qui s'elargissent. */
.page-corps { padding: var(--sp-7) 0; }
.voie-texte.article > p,
.voie-texte.article > ul,
.voie-texte.article > ol { max-width: 68ch; }
.voie-texte.article > .table-scroll,
.voie-texte.article > .faq,
.voie-texte.article > .bilan { max-width: none; }

/* Le min-width global de 720 px protege les tableaux a cinq colonnes du
   tassement. Dans la voie de texte, qui fait 704 px, il provoquait l'inverse :
   la derniere colonne se faisait couper de 16 px sur un ecran large, ce qui
   donnait un tableau visiblement tronque. */
.voie-texte table { min-width: 660px; }

/* Les liens du rail tenaient sur une seule ligne de 24 px de haut : sous la
   cible tactile de 44 px, mesure faite sur les trois declinaisons dont les
   intitules ne passent pas a la ligne. */
.rail-liens a {
  display: flex; align-items: center; min-height: 44px;
  padding: var(--sp-2) 0;
}
.rail-liens li + li a { border-top: 1px solid var(--c-border); }

/* Le sommaire du rail defile quand il depasse la hauteur d'ecran. Sans marque,
   la coupe tombait en plein milieu d'un intitule et se lisait comme un defaut
   de mise en page plutot que comme une liste qui continue. Un degrade sur les
   deux dernieres lignes le dit, et le masque suit le defilement. */
.voie-rail .sommaire-liste {
  max-height: 46vh; overflow-y: auto; padding-bottom: var(--sp-2);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent 100%);
}
.voie-rail .sommaire-liste:hover,
.voie-rail .sommaire-liste:focus-within {
  -webkit-mask-image: none; mask-image: none;
}
@media (prefers-reduced-motion: reduce) {
  .voie-rail .sommaire-liste { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- en-tete des guides et pages fixes ----------
   Le chapo et le repere sur l'agence premiere s'arretaient tous deux autour de
   600 px dans un en-tete de 1 072, l'un sous l'autre : le repere ressemblait a
   un encadre coupe au milieu de la page. Ils se partagent maintenant la largeur,
   la lecture a gauche, le repere a droite. */
.page-head .tete-duo {
  display: grid; grid-template-columns: minmax(0, 1fr) 420px;
  gap: var(--sp-6); align-items: start; margin-top: var(--sp-4);
}
.page-head .tete-duo .lede { margin: 0; max-width: none; }
.page-head .tete-duo .repere-premier { margin: 0; max-width: none; }
@media (max-width: 900px) {
  .page-head .tete-duo { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* ---------- renvoi vers la premiere du classement ----------
   Constat mesure sur les vingt-deux fiches de concurrent : la premiere y etait
   nommee des le mot 56 a 89, avec sa note et son motif, mais aucun lien ne
   partait du corps de la page vers sa fiche. Le seul lien vivait dans le rail.
   Ce bloc pose le lien la ou le lecteur vient de lire la comparaison chiffree. */
.fa {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
/* La première du classement se distingue par un filet, pas par une couleur de
   fond : le bloc reste un relevé, pas une réclame. */
.fa:first-of-type { border-left: 3px solid var(--c-accent); }
.fa h3 {
  margin: 0 0 var(--sp-4); font-size: 1.25rem; line-height: 1.25;
  color: var(--c-primary);
}
/* Deux colonnes : l'intitulé du champ, puis sa valeur. Les intitulés alignés
   permettent de comparer deux blocs en descendant du regard, ce qui est tout
   l'intérêt d'un comparatif. */
/* Les intitules etaient a 11 px, gris clair, sur une colonne trop etroite :
   « ce qui se verifie sur son site » passait a la ligne et l'oeil devait
   revenir en arriere. Colonne elargie, intitules plus lisibles, et un filet
   par ligne pour suivre horizontalement sans se perdre. */
.fa-champs {
  display: grid; grid-template-columns: 14.5rem 1fr;
  gap: 0 var(--sp-5); margin: 0 0 var(--sp-4);
}
.fa-champs dt {
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .04em;
  text-transform: uppercase; color: #57504b; font-weight: 600;
  padding: var(--sp-3) 0; border-top: 1px solid var(--c-border);
}
.fa-champs dd {
  margin: 0; font-size: .9375rem; line-height: 1.6;
  padding: var(--sp-3) 0; border-top: 1px solid var(--c-border);
}
.fa-champs dt:first-of-type, .fa-champs dd:first-of-type { border-top: 0; padding-top: 0; }
.fa-pourquoi {
  margin: 0; padding-top: var(--sp-4); font-size: .9375rem; line-height: 1.6;
  border-top: 1px solid var(--c-border);
}
.fa-pourquoi strong { color: var(--c-secondary); }
@media (max-width: 620px) {
  .fa { padding: var(--sp-4); }
  .fa-champs { grid-template-columns: 1fr; gap: 0 0; }
  .fa-champs dt { padding-top: var(--sp-3); }
  .fa-champs dd { margin-bottom: var(--sp-1); }
}

.carte-premiere {
  margin: var(--sp-5) 0 var(--sp-6);
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-accent);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
}
.cp-titre {
  margin: 0 0 var(--sp-3); font-family: var(--font-mono);
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-accent); font-weight: 500;
}
.cp-tete {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  margin: 0 0 var(--sp-3); flex-wrap: wrap;
}
.cp-tete a { font-size: 1.25rem; font-weight: 700; color: var(--c-primary); text-decoration: none; }
.cp-tete a:hover { color: var(--c-accent); text-decoration: underline; text-underline-offset: 4px; }
.cp-note { font-size: 1.75rem; font-weight: 700; color: var(--c-accent); line-height: 1; }
.cp-note span { font-size: .8125rem; color: var(--c-muted-fg); font-weight: 400; }
.cp-txt { margin: 0; font-size: .9375rem; line-height: 1.6; color: #47403b; }

/* ============ en-tete de fiche, gabarit tableau de bord ============
   Retenu parmi quatre maquettes. Les cinq chiffres de la fiche se lisent d'un
   coup avant tout texte, puis la preuve et le verdict se partagent la largeur.
   Il remplace une carte de score verticale qui obligeait a lire trois blocs
   pour reconstituer la meme information. */
.tableau-bord {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); overflow: hidden; margin: var(--sp-5) 0 var(--sp-5);
}
.tableau-bord > div { padding: var(--sp-4) var(--sp-4); border-left: 1px solid var(--c-border); min-width: 0; }
.tableau-bord > div:first-child { border-left: 0; }
.tb-k {
  display: block; font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--c-muted-fg); margin-bottom: var(--sp-2); line-height: 1.3;
}
.tb-v { font-size: 1.375rem; font-weight: 700; line-height: 1.15; display: block; }
.tb-v i { font-style: normal; font-size: .8125rem; color: var(--c-muted-fg); font-weight: 400; }
.tb-accent { color: var(--c-accent); }
.tb-mot { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; line-height: 1.3; }

.fiche-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }
.fiche-duo .rank-shot { margin: 0; min-width: 0; }
.fiche-duo .rank-shot img { max-width: none; width: 100%; aspect-ratio: 1040 / 650; }
.fiche-verdict { min-width: 0; }
/* Le verdict quitte le fond jaune pour une carte blanche a filet : le jaune
   pleine surface pesait plus lourd que le titre juste au-dessus. */
.fiche-verdict .reponse-courte {
  margin: 0 0 var(--sp-4); max-width: none;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  color: #3d3733;
}
.fiche-verdict .reponse-courte::before {
  content: "Notre verdict"; display: block; font-weight: 700;
  color: var(--c-primary); margin-bottom: var(--sp-2);
}
.fiche-verdict .chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.fiche-verdict .btn { width: 100%; }

/* Responsive : cinq colonnes tiennent au-dessus de 1 040 px, trois entre 1 040
   et 620, deux en dessous. La preuve et le verdict s'empilent sous 860. */
@media (max-width: 1040px) {
  .tableau-bord { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tableau-bord > div:nth-child(3n+1) { border-left: 0; }
  .tableau-bord > div:nth-child(n+4) { border-top: 1px solid var(--c-border); }
}
@media (max-width: 860px) {
  .fiche-duo { grid-template-columns: 1fr; gap: var(--sp-5); }
}
@media (max-width: 620px) {
  .tableau-bord { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tableau-bord > div { border-left: 1px solid var(--c-border); border-top: 1px solid var(--c-border); }
  .tableau-bord > div:nth-child(3n+1) { border-left: 1px solid var(--c-border); }
  .tableau-bord > div:nth-child(2n+1) { border-left: 0; }
  .tableau-bord > div:nth-child(-n+2) { border-top: 0; }
  .tb-v { font-size: 1.25rem; }
}

/* Cinq cases dans une grille de trois ou de deux laissent un trou en fin de
   ligne : la derniere occupe la place restante. */
@media (max-width: 1040px) { .tableau-bord > div:nth-child(5) { grid-column: 2 / -1; } }
@media (max-width: 620px)  { .tableau-bord > div:nth-child(5) { grid-column: 1 / -1; } }

/* ---------- justification des notes ----------
   Les barres montraient le resultat sans jamais dire pourquoi. Chaque ligne
   reprend le palier tel qu'il est ecrit dans la methodologie publiee : le
   lecteur peut opposer un fait a un palier, pas a une opinion. */
.jn-intro { margin: var(--sp-5) 0 var(--sp-3); font-weight: 600; color: var(--c-primary); }
.justif-notes { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: 0; }
.justif-notes li {
  display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: var(--sp-4);
  padding: var(--sp-4) 0; border-top: 1px solid var(--c-border); margin: 0;
}
.justif-notes li:first-child { border-top: 0; padding-top: 0; }
.jn-note { font-size: 1.5rem; font-weight: 700; color: var(--c-accent); line-height: 1; }
.jn-note span { font-size: .75rem; color: var(--c-muted-fg); font-weight: 400; }
.jn-corps { font-size: .9375rem; line-height: 1.55; color: #47403b; }
.jn-corps b { color: var(--c-primary); }
.jn-poids {
  font-size: .6875rem; color: var(--c-muted-fg); letter-spacing: .04em;
  border: 1px solid var(--c-border); border-radius: 2px; padding: 1px 5px; margin-left: 4px;
}
@media (max-width: 560px) {
  .justif-notes li { grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-3); }
  .jn-note { font-size: 1.25rem; }
}

/* Les arguments sur la premiere du classement, chacun avec sa preuve. */
.cp-args { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.cp-args li { margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.cp-arg { font-size: .9375rem; line-height: 1.6; color: #47403b; }
.cp-preuve {
  font-size: .75rem; line-height: 1.5; color: var(--c-muted-fg);
  border-left: 2px solid var(--c-border-strong); padding-left: var(--sp-3); font-style: italic;
}

/* ---------- ce que la premiere publie ----------
   Ce bloc a fait seize lignes de tableau, soit 587 px de haut dans une colonne
   de 375 : plus lourd que le verdict qu'il accompagne, et les mots qui comptent
   vraiment, « Nord du Vietnam », « en famille », « 15 jours », etaient enfermes
   dans des cellules ou ils ne portent rien. Ils sont revenus dans des phrases,
   les seize nombres avec eux, sur un quart de la hauteur. */
.verdict-perimetres p {
  margin: 0 0 var(--sp-3); font-size: .875rem; line-height: 1.6; color: #47403b;
}
.verdict-perimetres p:last-child { margin-bottom: 0; }
.verdict-perimetres b {
  font-weight: 700; color: var(--c-primary); font-size: .9375rem;
}
.pm-titre {
  display: block; font-family: var(--font-mono);
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-accent); font-weight: 500; margin-bottom: 2px;
}
.pm-source {
  margin: var(--sp-4) 0 0; font-size: .6875rem; line-height: 1.5;
  color: var(--c-muted-fg);
}
/* Le propos d'abord, les nombres ensuite comme preuve. */
.pm-propos { font-weight: 600; color: var(--c-primary) !important; font-size: .9375rem !important; }

/* ---------- ou l'agence ressort ailleurs ----------
   Trente pages sur cinquante partaient sur moins de quatre liens internes. Ce
   bloc relie chaque fiche aux classements filtres ou son agence figure, avec
   son rang : utile au lecteur d'abord, au maillage ensuite. */
.places { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: 0; }
.places li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-top: 1px solid var(--c-border); margin: 0; font-size: .9375rem;
}
.places li:first-child { border-top: 0; }
.places a { font-weight: 600; }
.pl-rang { font-size: .8125rem; color: var(--c-accent); font-weight: 700; flex: none; }

/* ---------- porte d'entree vers les classements filtres ----------
   Ni l'accueil, ni le menu, ni le pied ne renvoyaient vers les dix-huit pages
   du cluster : elles n'etaient atteignables que depuis les fiches et entre
   elles. Le libelle des liens est la requete elle-meme. */
.declinaisons-accueil { padding: var(--sp-7) 0; border-top: 1px solid var(--c-border); }
.dcl-intro { max-width: 68ch; color: #47403b; margin-bottom: var(--sp-6); }
.dcl-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-6); }
.dcl-titre {
  margin: 0 0 var(--sp-3); font-family: var(--font-mono);
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-accent); font-weight: 500;
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-border);
}
.dcl-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.dcl-liste a { font-size: .9375rem; line-height: 1.4; font-weight: 600; }
@media (max-width: 900px) { .footer-cols { grid-template-columns: 1fr 1fr; } }


/* Le face-a-face de la fiche : deux colonnes, l'agence de la page et la
   premiere du panel. La colonne de droite est legerement teintee pour que
   l'oeil compare ligne a ligne sans chercher. */
table.face { width: 100%; border-collapse: collapse; font-size: .9375rem; }
table.face th, table.face td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: top; }
/* Ce tableau heritait du bandeau noir de la regle generale « thead th », qui
   est faite pour le grand comparatif. Son texte gris clair tombait donc a
   3,5:1 sur fond noir, sous le minimum de 4,5. Il reprend un en-tete clair,
   avec un filet pour marquer la separation, et le nom de la premiere reste
   souligne par la teinte de sa colonne. */
table.face thead th {
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-muted-fg);
  background: var(--c-surface); border-bottom: 2px solid var(--c-border-strong);
}
table.face thead th:last-child { color: var(--c-secondary); }
table.face tbody th { font-weight: 500; color: var(--c-primary); width: 32%; }
table.face td:last-child, table.face thead th:last-child { background: var(--c-accent-soft); }
table.face .dec { white-space: normal; }


/* Cellules decisives du tableau comparatif : la couleur dit la meme chose que
   le texte, pour qu'on lise en balayant. Rien d'autre que trois etats. */
.dec { font-size: .8125rem; white-space: nowrap; }
.dec-oui { color: var(--c-positive); font-weight: 600; }
.dec-partiel { color: var(--c-secondary); }
.dec-non { color: var(--c-muted-fg); font-style: italic; }
.dec-neutre { color: var(--c-muted-fg); }

/* ---------- critères : les points, pas seulement la longueur ----------
   Cinq barres pleines chez la première ne distinguaient rien. La colonne de
   droite donne les points obtenus sur les points possibles du critère, ce
   qui rend la note sur 100 recomputable ligne à ligne. */
.critere { grid-template-columns: 1fr 84px 34px auto; }
.critere-pts {
  font-family: var(--font-mono); font-size: .75rem; color: var(--c-muted-fg);
  text-align: right; white-space: nowrap; min-width: 74px;
}
.critere-pts .sur { opacity: .75; }
.critere-val b { color: var(--c-primary); }
.criteres-total {
  margin: var(--sp-3) 0 0; font-size: .8125rem; color: var(--c-muted-fg);
  border-top: 1px solid var(--c-border); padding-top: var(--sp-2);
}
.criteres-total b { color: var(--c-primary); font-family: var(--font-mono); }
.bar { background: var(--c-border); border-radius: 999px; overflow: hidden; }
.bar i { border-radius: 999px; }
@media (max-width: 700px) {
  /* Sur 375 px, une quatrieme colonne rognait « pts ». Le libelle garde la
     largeur, la note et les points s'empilent a droite, alignes sur leur
     bord droit, et la barre disparait : elle ne dit rien que les points ne
     disent mieux. */
  .critere {
    grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-3);
    align-items: baseline;
  }
  .critere .bar { display: none; }
  .critere-label { grid-row: 1 / span 2; }
  .critere-val { grid-column: 2; text-align: right; }
  .critere-pts { grid-column: 2; min-width: 0; }
}

/* ---------- listes d'ancres : le rang d'abord, le lien ensuite ----------
   La pile de liens soulignés en orange donnait à lire la répétition du
   mot-clé plutôt que l'information, et le rang finissait tronqué à droite.
   Il passe devant dans une pastille, le lien ne se souligne qu'au survol. */
.places li { display: grid; grid-template-columns: 3.25rem 1fr; align-items: baseline; }
.places .pl-rang {
  font-size: .8125rem; font-weight: 700; color: var(--c-accent);
  font-family: var(--font-mono);
}
.places a { text-decoration: none; color: var(--c-fg); }
.places a:hover, .places a:focus-visible {
  color: var(--c-secondary); text-decoration: underline; text-underline-offset: 3px;
}
.places li:hover { background: var(--c-surface); }

/* ---------- liens du rail : des lignes, pas des soulignés ---------- */
.rail-liens a { text-decoration: none; }
.rail-liens a::after { content: " \2192"; color: var(--c-accent); }
.rail-liens a:hover, .rail-liens a:focus-visible {
  color: var(--c-secondary); text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- budget par durée ----------
   La donnée que le lecteur cherche en premier : combien, pour combien de
   jours. Le montant est la colonne qu'on lit, il porte donc le poids. */
/* Le tableau collait au paragraphe suivant, et ses cellules n'avaient aucun
   retrait a gauche : l'en-tete touchait le bord du cadre. Il respire des deux
   cotes, et le contenant porte l'espace apres lui. */
.budget { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table-scroll:has(.budget) { margin: var(--sp-4) 0 var(--sp-5); }
.budget caption { caption-side: bottom; padding-top: var(--sp-2); font-size: .8125rem; color: var(--c-muted-fg); text-align: left; }
.budget th, .budget td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: baseline; }
/* Meme defaut que sur le face-a-face : la regle generale « thead th » posait
   un bandeau noir sous un texte gris clair, soit 3,5:1 de contraste pour un
   minimum de 4,5. Le tableau de prix reprend un en-tete clair, et le filet
   suffit a le detacher. */
.budget thead th {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
  color: #57504b; font-weight: 600;
  background: var(--c-accent-soft); border-bottom: 2px solid var(--c-border-strong);
}
.budget tbody th { font-weight: 600; white-space: nowrap; }
.budget td.num { font-family: var(--font-mono); font-weight: 700; color: var(--c-primary); white-space: nowrap; }
.budget tbody tr:last-child th, .budget tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 560px) {
  .budget td:last-child { font-size: .875rem; color: #5c544e; }
}

/* Le prix pour deux semaines, sur chaque ligne du classement. Aucune des
   pages concurrentes qui ressortent sur cette requete n'affiche de prix :
   c'est la premiere question d'un voyageur, elle merite d'etre lisible avant
   le detail des criteres. */
.rank-prix {
  margin: var(--sp-2) 0 var(--sp-3); font-size: .9375rem; line-height: 1.5;
  padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--c-primary);
  background: var(--c-surface, #faf7f4);
}
.rank-prix b { font-size: 1.0625rem; color: var(--c-primary); }
.rank-prix span { display: block; color: var(--c-muted-fg); font-size: .8125rem; }
.rank-prix-non { border-left-color: var(--c-border, #ddd); color: var(--c-muted-fg); }
.rank-prix-non span { display: inline; }

/* La phrase qui dit a qui la page s'adresse, juste sous le verdict. Elle se
   detache sans crier : le lecteur doit s'y reconnaitre en balayant. */
.pour-qui {
  margin: var(--sp-3) 0 0; padding: var(--sp-3) var(--sp-4);
  background: var(--c-accent-soft); border-radius: var(--radius);
  font-size: .9375rem; line-height: 1.6;
}

/* Ouverture des classements filtres.

   Avant : trois encadres empiles, deux jaunes et un a filet, plus une capture
   d'ecran de 230 px illisible et une colonne vide sous elle. Le lecteur voyait
   trois blocs la ou il n'y a qu'un raisonnement.

   Maintenant : un seul cadre pour la reponse, ses complements separes par un
   filet interieur, et une photographie du pays qui accompagne le titre. */
/* Le bloc prend toute la largeur de la colonne de texte. Les paragraphes,
   eux, restent sous les 78 signes : au-dela, l'oeil perd la ligne suivante
   en revenant a la marge. */
/* Titre des classements filtres : il porte une requete longue, il ne peut pas
   etre calibre comme celui de l'accueil. */
#titre-declinaison {
  font-size: clamp(1.75rem, 3.2vw, 2.375rem);
  max-width: none; margin-bottom: var(--sp-3);
}
.hero .lede { margin-bottom: var(--sp-5); }
.ouv-duo {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-7); align-items: start;
  margin: var(--sp-5) 0 0;
}
.bloc-reponse { margin: 0; }
.bloc-reponse .reponse-courte {
  margin: 0; background: none; border: 0; padding: 0;
  font-size: 1.125rem; line-height: 1.55; color: var(--c-primary);
}
.ouv-suite {
  margin: var(--sp-4) 0 0; padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border-strong);
  font-size: .9375rem; line-height: 1.6; color: #3d3733;
}
.ouv-suite-2 { color: #57504b; }

.ouv-capture { margin: 0; }
.ouv-capture img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--c-border); border-radius: var(--radius);
}
.ouv-capture figcaption {
  margin-top: var(--sp-2); font-size: .75rem; color: var(--c-muted-fg);
}

/* Sous 1 040 px, la capture passerait a la largeur d'un telephone : elle n'y
   est plus lisible et n'apprend plus rien. Le verdict reprend toute la place. */
@media (max-width: 1080px) {
  .ouv-duo { grid-template-columns: 1fr; gap: 0; }
  .ouv-capture { display: none; }
  .hero-visuel { display: none; }
}


/* Le second argument du theme, sous la phrase qui dit a qui la page parle.
   Il se lit comme la suite du raisonnement, pas comme un encadre de plus :
   pas de fond, un filet a gauche qui le rattache a ce qui precede. */
.second-argument {
  margin: var(--sp-3) 0 0; padding: 0 0 0 var(--sp-4);
  border-left: 2px solid var(--c-border-strong);
  font-size: .9375rem; line-height: 1.65; color: #3d3733;
}