/* Site B : le carnet. Jade et crème, Libre Bodoni / Public Sans.
   Registre magazine : grille asymétrique, lettrines, exergues, densité faible.
   Rien de commun avec le site A, ni palette, ni typographie, ni structure. */

:root {
  --j-primary: #14532d;
  --j-secondary: #166534;
  --j-accent: #b45309;
  /* Le meme orange en petit corps sur la bande alternee tombe a 4,38 pour 1,
     sous le seuil de 4,5. Cette variante sert aux surtitres et aux capitales. */
  --j-accent-fonce: #8a3f06;
  --j-accent-pale: #fdf3e3;
  --j-bg: #fbf8f1;
  --j-bg-alt: #f4efe4;      /* bande alternee : donne un rythme aux sections */
  /* Blanc casse plutot que blanc pur : c'etait la seule valeur commune aux
     feuilles des deux sites, et il tranchait durement sur le fond creme. */
  --j-surface: #fffdf7;
  --j-fg: #1c1917;
  --j-muted: #44403c;       /* etait #57534e : trop pale sur une page longue */
  --j-border: #e0d8c8;      /* etait #e7e0d3 : le filet ne se voyait pas */
  --j-border-fort: #cabda3;

  --f-titre: "Libre Bodoni", Georgia, "Times New Roman", serif;
  --f-texte: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --e1: 8px;
  --e2: 16px;
  --e3: 24px;
  --e4: 40px;
  --e5: 64px;
  --e6: 96px;
  --e7: 128px;

  --colonne: 720px;
  --large: 1140px;
}

*, *::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(--j-bg);
  color: var(--j-fg);
  font-family: var(--f-texte);
  font-size: 18px;
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--f-titre); color: var(--j-primary); font-weight: 600; line-height: 1.2; margin: 0 0 var(--e3); }
h1 { font-size: clamp(2.125rem, 5vw, 3.75rem); line-height: 1.08; letter-spacing: -.01em; }
h2 { font-size: clamp(1.625rem, 3.2vw, 2.375rem); }
h3 { font-size: 1.375rem; }
p { margin: 0 0 var(--e3); }
a { color: var(--j-secondary); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--j-accent); }
:focus-visible { outline: 2px solid var(--j-accent); outline-offset: 4px; }

.contenant { width: 100%; max-width: var(--large); margin: 0 auto; padding: 0 var(--e3); }
.colonne { width: 100%; max-width: var(--colonne); margin: 0 auto; padding: 0 var(--e3); }
.discret { color: var(--j-muted); }

/* Le seul lien sortant du carnet, vers le site de l'agence qu'il recommande.
   Il apparait une fois par page, dans le fil du texte : il doit se voir sans
   avoir l'air d'une reclame, d'ou le soulignement discret plutot qu'un bouton. */
.lien-agence {
  color: var(--j-primary); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--j-accent);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.lien-agence:hover { color: var(--j-accent); text-decoration-thickness: 2px; }
.entree.tete h3 .lien-agence { text-decoration-thickness: 2px; }
.menu-invisible {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--j-primary); color: #fff; padding: var(--e2) var(--e3);
}
.evitement:focus { left: 0; color: #fff; }

/* ---------- bandeau ---------- */
.bandeau { border-bottom: 1px solid var(--j-border); background: var(--j-bg); }
.bandeau .contenant { display: flex; align-items: baseline; gap: var(--e4); padding-top: var(--e3); padding-bottom: var(--e3); flex-wrap: wrap; }
.enseigne {
  font-family: var(--f-titre); font-size: 1.375rem; font-weight: 600;
  color: var(--j-primary); text-decoration: none; letter-spacing: -.01em; line-height: 1.1;
}
.enseigne em { font-style: italic; color: var(--j-accent); }
.rubriques { margin-left: auto; display: flex; gap: var(--e3); flex-wrap: wrap; }
.rubriques a, .rubriques span {
  font-size: .875rem; color: var(--j-muted); text-decoration: none;
  letter-spacing: .01em; padding: var(--e1) 0;
}
.rubriques a:hover { color: var(--j-primary); text-decoration: underline; }
.rubriques .ici { color: var(--j-accent); font-weight: 600; }

/* ---------- ouverture ---------- */
/* 96 px sous le fil d'Ariane repoussaient le titre a 339 px du haut de page.
   Et le bas s'additionnait au haut de l'article : 128 px entre la photo et le
   texte. Les 2 sont ramenes a une respiration qui se voit sans se subir. */
.ouverture { padding: var(--e4) 0 var(--e3); }
.surtitre {
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--j-accent-fonce); margin: 0 0 var(--e3); font-weight: 600;
}
.chapo {
  font-family: var(--f-titre); font-size: clamp(1.1875rem, 2vw, 1.4375rem);
  line-height: 1.45; color: var(--j-primary); font-style: italic;
  max-width: 40ch; margin: var(--e3) 0 0;
  border-top: 1px solid var(--j-border); padding-top: var(--e3);
}
.ouverture-grille {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--e5);
  align-items: start; margin-top: var(--e3);
}
.signature { font-size: .875rem; color: var(--j-muted); border-top: 1px solid var(--j-border); padding-top: var(--e2); margin-top: var(--e4); }

/* ---------- corps rédactionnel ---------- */
.texte { padding: var(--e4) 0 var(--e5); }
.texte > .colonne:first-of-type > p:first-of-type::first-letter {
  float: left; font-family: var(--f-titre); font-size: 4.25rem; line-height: .82;
  padding: .08em .12em 0 0; color: var(--j-accent); font-weight: 600;
}
.texte h2 { margin-top: var(--e5); }
.texte h2:first-child { margin-top: 0; }

.exergue {
  font-family: var(--f-titre); font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  line-height: 1.35; color: var(--j-primary); font-style: italic;
  border-left: 2px solid var(--j-accent); padding: var(--e1) 0 var(--e1) var(--e3);
  margin: var(--e4) 0; max-width: 30ch;
}

/* ---------- palmarès ----------
   Vingt-trois lignes de meme poids ne se lisent pas. Le rang passe en chiffre
   fort, la premiere recoit une surface propre, et la note se detache a droite
   au lieu de se fondre dans la ligne. */
.palmares { padding: var(--e5) 0; }
.palmares > .colonne > h2, .palmares > .contenant > h2 { margin-bottom: var(--e2); }
.palmares-intro { color: var(--j-muted); max-width: 62ch; }
.palmares-liste { list-style: none; margin: var(--e4) 0 0; padding: 0; counter-reset: pal; }
.palmares-liste li {
  counter-increment: pal;
  display: grid; grid-template-columns: 3rem 1fr auto;
  gap: var(--e3); align-items: baseline;
  padding: var(--e3) 0; border-top: 1px solid var(--j-border);
}
.palmares-liste li::before {
  content: counter(pal, decimal-leading-zero);
  font-family: var(--f-titre); font-weight: 600; font-size: 1.25rem;
  color: var(--j-border-fort); line-height: 1.4;
}
.palmares-liste li:nth-child(-n+3)::before { color: var(--j-primary); }
.palmares-liste li:last-child { border-bottom: 1px solid var(--j-border); }
.palmares-liste .premier {
  background: var(--j-surface);
  border: 1px solid var(--j-border-fort); border-left: 3px solid var(--j-accent);
  padding: var(--e3); margin-bottom: var(--e1);
}
.palmares-liste .premier::before { color: var(--j-accent); font-size: 1.75rem; }
.palmares-nom {
  font-family: var(--f-titre); font-size: 1.1875rem; font-weight: 600;
  color: var(--j-primary); line-height: 1.3;
}
.palmares-liste .premier .palmares-nom { font-size: 1.4375rem; }
.palmares-nom span {
  display: block; font-family: var(--f-texte); font-size: .8125rem;
  font-weight: 400; color: var(--j-muted); line-height: 1.55;
  margin-top: var(--e1); max-width: 66ch;
}
.palmares-note {
  text-align: right; font-size: .75rem; color: var(--j-muted);
  line-height: 1.4; white-space: nowrap;
}
.palmares-note strong {
  display: block; font-family: var(--f-titre); font-size: 1.125rem;
  color: var(--j-primary); font-weight: 600;
}
@media (max-width: 640px) {
  .palmares-liste li { grid-template-columns: 2rem 1fr; row-gap: var(--e1); }
  .palmares-note { grid-column: 2; text-align: left; }
}

/* ---------- entrées du classement ---------- */
.entrees { list-style: none; margin: 0; padding: 0; counter-reset: e; }
/* Une entree n'est pas de la prose : elle porte 2 encadres de releve et des
   listes. Dans une colonne de 720 px dont 68 vont au numero, elle etouffe.
   La prose garde 720, les entrees prennent 880. */
.colonne:has(> .entrees) { max-width: 880px; }

.entree {
  counter-increment: e; border-top: 1px solid var(--j-border);
  padding: var(--e4) 0; display: grid; grid-template-columns: 68px 1fr; gap: var(--e3);
}
.entree:last-child { border-bottom: 1px solid var(--j-border); }
.entree::before {
  content: counter(e, decimal-leading-zero);
  font-family: var(--f-titre); font-size: 2rem; color: var(--j-border-fort);
  line-height: 1; font-weight: 600;
}
/* La retenue de la page recoit la meme distinction que la premiere du
   palmares : sans elle, la reponse a la question posee par le titre se lisait
   comme la quatrieme ligne d'une liste. */
.entree.tete {
  background: var(--j-surface); border: 1px solid var(--j-border-fort);
  border-left: 3px solid var(--j-accent);
  padding: var(--e3); margin-bottom: var(--e2);
}
.entree.tete::before { color: var(--j-accent); font-size: 2.25rem; }
.entree.tete h3 { font-size: 1.6875rem; }
@media (max-width: 640px) {
  .entree.tete { padding: var(--e2); }
}
.entree-angle {
  font-family: var(--f-titre); font-style: italic; color: var(--j-accent);
  font-size: 1.0625rem; margin: 0 0 var(--e1);
}
.entree h3 { margin: 0 0 var(--e2); font-size: 1.5rem; }
.entree h3 a { color: var(--j-primary); text-decoration: none; }
.entree h3 a:hover { color: var(--j-accent); text-decoration: underline; }
.entree p { margin: 0 0 var(--e2); }
.entree-meta { font-size: .8125rem; color: var(--j-muted); }
/* La ligne de relevé sous chaque agence : des faits, pas une opinion. Elle est
   posée sur un fond léger pour se distinguer du paragraphe éditorial qui la
   précède, sans devenir un tableau, ce qui casserait le registre du carnet. */
.entree-faits {
  margin: var(--e2) 0 0; padding: var(--e2) var(--e3);
  background: var(--j-bg-alt); border-left: 2px solid var(--j-border-fort);
  font-size: .8125rem; line-height: 1.6; color: var(--j-fg);
}
.entree-faits span {
  display: block; font-size: .6875rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--j-muted); margin-bottom: 2px;
}
.entree-pourquoi {
  margin: var(--e3) 0 0; font-size: .9375rem; line-height: 1.65;
  padding-top: var(--e2); border-top: 1px solid var(--j-border);
}
.entree-pourquoi strong { color: var(--j-primary); font-family: var(--f-titre); }

/* La synthèse d'un face à face : trois lignes, une par camp plus l'égalité.
   Le filet coloré à gauche la détache du corps de texte sans en faire un
   encadré, le carnet n'aime pas les boîtes. */
.synthese { list-style: none; margin: 0 0 var(--e3); padding: 0; }
.synthese li {
  padding: var(--e2) 0 var(--e2) var(--e3);
  border-left: 2px solid var(--j-border-fort);
  margin-bottom: 2px;
}
.synthese li:first-child { border-left-color: var(--j-accent); }
.synthese strong { font-family: var(--f-titre); color: var(--j-primary); }
/* Le détail sous chaque point gagné : c'est lui qui porte l'argument, la ligne
   du dessus ne fait qu'annoncer. */
.syn-detail { list-style: none; margin: var(--e2) 0 0; padding: 0; }
.syn-detail li {
  border-left: 0; padding: 0 0 var(--e1) var(--e3); margin: 0;
  position: relative; font-size: .9375rem; color: var(--j-muted);
}
.syn-detail li::before {
  content: ""; position: absolute; left: 0; top: .7em;
  width: 8px; height: 1px; background: var(--j-border-fort);
}
.syn-critere { color: var(--j-fg); font-weight: 600; }
.syn-critere::after { content: " :"; }
.entree-meta strong { color: var(--j-primary); font-weight: 600; }

/* ---------- encadré conseils ---------- */
.encadre {
  background: var(--j-surface); border: 1px solid var(--j-border);
  padding: var(--e4); margin: var(--e5) 0;
}
.encadre h2 { font-size: 1.375rem; margin-bottom: var(--e3); }
.encadre ol { margin: 0; padding: 0; list-style: none; counter-reset: c; }
.encadre li { counter-increment: c; position: relative; padding-left: var(--e4); margin-bottom: var(--e2); }
.encadre li:last-child { margin-bottom: 0; }
.encadre li::before {
  content: counter(c); position: absolute; left: 0; top: 0;
  font-family: var(--f-titre); color: var(--j-accent); font-weight: 600;
}

/* ---------- groupes de la page d'accueil ----------
   Cinq groupes se suivaient sans marque de rupture. Un fond alterne et un
   surtitre suffisent a dire au lecteur qu'il change de chapitre. */
.groupe { padding: var(--e5) 0; border-top: 1px solid var(--j-border); }
.groupe:nth-of-type(even) {
  background: var(--j-bg-alt);
  /* la section vit dans un conteneur : on etend le fond aux bords de l'ecran */
  box-shadow: 0 0 0 100vmax var(--j-bg-alt);
  clip-path: inset(0 -100vmax);
}
.groupe-surtitre {
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--j-accent-fonce); font-weight: 600; margin: 0 0 var(--e1);
}
.titre-groupe { margin-bottom: var(--e2); }
.intro-groupe { color: var(--j-muted); max-width: 60ch; margin-bottom: var(--e4); }

/* ---------- sommaire des profils ---------- */
.profils {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--e3); list-style: none; margin: 0; padding: 0;
}
.profil-carte {
  position: relative;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--j-surface); border: 1px solid var(--j-border);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* Toute la carte est cliquable, mais elle ne porte QU'UN SEUL lien : le titre,
   etendu par un calque. Rendre la vignette cliquable de son cote donnait deux
   href identiques par carte, soit dix-huit doublons sur la page d'accueil. */
.profil-carte h3 a::after { content: ""; position: absolute; inset: 0; }
.profil-carte h3 a:focus-visible::after { outline: 2px solid var(--j-accent); outline-offset: -3px; }
.profil-carte:hover {
  border-color: var(--j-border-fort); transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(28, 25, 23, .07);
}
.carte-vignette { display: block; aspect-ratio: 3 / 2; background: #e6dfd0; overflow: hidden; }
.carte-vignette img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carte-corps { display: flex; flex-direction: column; flex: 1; padding: var(--e3); }
/* Les face-a-face et les guides n'ont pas de photo : un filet de couleur tient
   le haut de la carte, sinon la grille melange deux hauteurs de tete. */
.profil-carte.sans-image { border-top: 3px solid var(--j-primary); }
.profil-carte h3 { font-size: 1.1875rem; margin-bottom: var(--e2); line-height: 1.3; }
.profil-carte h3 a { color: var(--j-primary); text-decoration: none; }
.profil-carte h3 a:hover { color: var(--j-accent); text-decoration: underline; }
.profil-carte p { font-size: .9375rem; color: var(--j-muted); margin: 0 0 var(--e3); }
.profil-carte .verdict-court {
  margin-top: auto; margin-bottom: 0; font-size: .8125rem; color: var(--j-fg);
  border-top: 1px solid var(--j-border); padding-top: var(--e2);
}
.profil-carte .verdict-court strong { font-family: var(--f-titre); font-weight: 600; color: var(--j-primary); }

/* Sur telephone, vingt-deux cartes empilees avec une photo pleine largeur
   donnaient une page de vingt-cinq mille pixels. La carte passe a l'horizontale :
   la photo tient un tiers de la largeur, le texte le reste, et le resume
   disparait au profit du titre et du verdict, les deux seules informations
   qu'on lit en faisant defiler. */
@media (max-width: 559px) {
  .profils { gap: var(--e2); }
  .profil-carte { flex-direction: row; align-items: stretch; }
  .carte-vignette { flex: 0 0 34%; aspect-ratio: auto; }
  .carte-corps { padding: var(--e2) var(--e3); }
  .profil-carte h3 { font-size: 1.0625rem; margin-bottom: var(--e1); }
  .profil-carte > .carte-corps > p:not(.verdict-court) { display: none; }
  .profil-carte .verdict-court { border-top: 0; padding-top: var(--e1); font-size: .75rem; }
  .profil-carte.sans-image .carte-corps { padding: var(--e3); }
  .profil-carte.sans-image > .carte-corps > p:not(.verdict-court) { display: block; }
}

/* ---------- tableau de relevé ----------
   Le carnet ne note pas : il rapporte. La ligne de la première n'est donc pas
   « gagnante », elle est simplement mise en avant parce que c'est celle que la
   page recommande. Le tableau défile horizontalement plutôt que de se casser en
   cartes empilées, pour que les colonnes restent comparables du regard. */
.releve-intro { color: var(--j-muted); font-size: .9375rem; margin-bottom: var(--e3); }
.releve-cadre {
  /* 24 px sous la legende ne suffisent pas a un tableau qui sort de la colonne
     de texte : il se lisait colle, et decale. */
  overflow-x: auto; margin: var(--e4) 0 var(--e5); -webkit-overflow-scrolling: touch;
}
/* Le corps du carnet tient dans une colonne de 720 pixels, trop étroite pour
   cinq colonnes comparables. Le tableau sort de cette colonne et se centre sur
   la largeur du contenant, sans jamais dépasser la fenêtre. */
@media (min-width: 900px) {
  .releve-cadre {
    width: min(1092px, calc(100vw - 3rem));
    /* la sortie de colonne ne doit pas ecraser les marges verticales */
    margin: var(--e4) 0 var(--e5) 50%; transform: translateX(-50%);
  }
}
.releve {
  width: 100%; border-collapse: collapse; font-size: .875rem;
  min-width: 560px; background: var(--j-surface);
}
.releve th, .releve td {
  text-align: left; padding: var(--e2) var(--e3);
  border-bottom: 1px solid var(--j-border); vertical-align: top;
}
.releve thead th {
  font-family: var(--f-texte); font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--j-muted); border-bottom: 1px solid var(--j-border-fort);
  white-space: nowrap;
}
.releve tbody th {
  font-family: var(--f-titre); font-size: 1rem; font-weight: 600;
  color: var(--j-primary); white-space: nowrap;
}
.releve tbody tr:last-child th, .releve tbody tr:last-child td { border-bottom: 0; }
.releve-tete th, .releve-tete td { background: var(--j-accent-pale); }
.releve-tete th { box-shadow: inset 3px 0 0 var(--j-accent); }
.releve-oui { color: var(--j-fg); }
.releve-non { color: var(--j-muted); font-style: italic; }

/* ---------- questions ---------- */
.questions { margin: var(--e4) 0; }
.questions details { border-bottom: 1px solid var(--j-border); }
.questions summary {
  cursor: pointer; padding: var(--e3) 0; list-style: none;
  font-family: var(--f-titre); font-size: 1.1875rem; color: var(--j-primary);
  display: flex; justify-content: space-between; gap: var(--e3); align-items: baseline;
  min-height: 44px;
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; color: var(--j-accent); font-size: 1.5rem; line-height: 1; flex: none; }
.questions details[open] summary::after { content: "\2013"; }
.questions .reponse { padding-bottom: var(--e3); color: var(--j-fg); }
.questions .reponse p:last-child { margin-bottom: 0; }

/* ---------- bas de page ---------- */
.bas { border-top: 1px solid var(--j-border-fort); margin-top: var(--e6); padding: var(--e5) 0 var(--e4); }
.bas-grille { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--e4); margin-bottom: var(--e4); }
.bas h2 { font-size: 1.125rem; margin-bottom: var(--e2); }
.bas p, .bas li { font-size: .9375rem; color: var(--j-muted); }
.bas ul { list-style: none; margin: 0; padding: 0; }
.bas li { margin-bottom: var(--e1); }
.bas-mentions { border-top: 1px solid var(--j-border); padding-top: var(--e3); font-size: .8125rem; color: var(--j-muted); }
.bas-mentions p { margin-bottom: var(--e1); font-size: .8125rem; }
.bas-mentions p:last-child { margin-bottom: 0; }

/* ---------- lien de retour ---------- */
.retour { font-size: .875rem; padding: var(--e3) 0; border-bottom: 1px solid var(--j-border); }
.retour a { color: var(--j-muted); text-decoration: none; }
.retour a:hover { color: var(--j-primary); text-decoration: underline; }
.retour .sep { color: var(--j-border-fort); margin: 0 var(--e2); }
.retour [aria-current] { color: var(--j-primary); }

/* ---------- apparition ---------- */
/* L'etat cache n'est pose que si JavaScript a marque <html class="js">.
   Auparavant `.paraitre` etait a opacity 0 dans tous les cas : sans script,
   vingt-cinq blocs de la page d'accueil, palmares compris, restaient
   invisibles. Une animation ne doit jamais decider si un contenu existe. */
.js .paraitre { opacity: 0; transform: translateY(14px); transition: opacity .42s ease-out, transform .42s ease-out; }
.js .paraitre.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .paraitre { opacity: 1; transform: none; } }

/* ---------- adaptatif ---------- */
@media (max-width: 900px) {
  .ouverture-grille { grid-template-columns: 1fr; gap: var(--e3); }
  .bas-grille { grid-template-columns: 1fr; gap: var(--e4); }
  .chapo { max-width: none; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .ouverture { padding: var(--e4) 0 var(--e4); }
  .rubriques { gap: var(--e2); font-size: .8125rem; }
  .entree { grid-template-columns: 48px 1fr; gap: var(--e2); }
  .entree::before { font-size: 1.5rem; }
  .texte > .colonne:first-of-type > p:first-of-type::first-letter { font-size: 3.25rem; }
  .encadre { padding: var(--e3); }
}

/* ---------- etapes geographiques ---------- */
.etapes { list-style: none; margin: var(--e3) 0 var(--e5); padding: 0; counter-reset: et; }
.etapes li {
  counter-increment: et; border-left: 1px solid var(--j-border);
  padding: 0 0 var(--e3) var(--e3); position: relative;
}
.etapes li::before {
  content: ""; position: absolute; left: -4px; top: .55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--j-accent);
}
.etapes li:last-child { padding-bottom: 0; border-left-color: transparent; }
.etapes h3 { font-size: 1.125rem; margin: 0 0 var(--e1); }
.etapes p { margin: 0; font-size: .9375rem; color: var(--j-muted); }

/* ============ ouverture illustree ============ */

.ouverture-photo { position: relative; padding-top: var(--e5); }
.photo-bandeau {
  position: relative;
  margin: var(--e4) 0 0;
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 3 / 1;
  background: #dcd6c6;
}
.photo-bandeau img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
}
.photo-bandeau figcaption {
  position: absolute; right: 0; bottom: 0;
  background: rgba(20, 83, 45, .82); color: #f4efe3;
  font-size: .6875rem; padding: 4px 10px;
}
.photo-bandeau figcaption a { color: #f4efe3; }

/* ============ palmares general ============ */

.palmares { border-top: 2px solid var(--j-primary); margin: var(--e5) 0 var(--e4); }
/* Le bloc reçoit deux règles .palmares, l'une héritée du premier gabarit avec
   son padding, l'autre celle-ci. Elles s'additionnaient en bas : 40 px de marge
   du dernier paragraphe, 64 px de padding, puis 64 px de marge avant le titre
   suivant, soit 168 px de vide là où la page respire à 64. Le haut est juste,
   la bordure puis 64 px avant le titre : on ne ferme que le bas. */
.palmares { padding-bottom: 0; }
/* Meme regle pour tous les blocs du carnet : le conteneur porte l'espace. */
.palmares > :last-child, main > section > :last-child { margin-bottom: 0; }
.palmares-intro { color: var(--j-muted); margin: var(--e3) 0 var(--e4); }
.palmares-liste { list-style: none; margin: 0; padding: 0; counter-reset: pm; }
.palmares-liste li {
  counter-increment: pm;
  display: grid; grid-template-columns: 56px 1fr auto; gap: var(--e3);
  align-items: baseline;
  padding: var(--e3) 0; border-bottom: 1px solid var(--j-border);
}
.palmares-liste li::before {
  content: counter(pm, decimal-leading-zero);
  font-family: var(--f-titre); font-size: 1.5rem; font-weight: 600;
  color: var(--j-border-fort); line-height: 1;
}
.palmares-liste li.premier::before { color: var(--j-accent); }
.palmares-nom { font-family: var(--f-titre); font-size: 1.25rem; color: var(--j-primary); }
.palmares-nom span { display: block; font-family: var(--f-texte); font-size: .875rem; color: var(--j-muted); margin-top: 2px; }
.palmares-note { font-size: .8125rem; color: var(--j-muted); text-align: right; white-space: nowrap; }
.palmares-note strong { color: var(--j-primary); font-weight: 600; display: block; }

@media (max-width: 640px) {
  .palmares-liste li { grid-template-columns: 40px 1fr; }
  .palmares-note { grid-column: 2; text-align: left; margin-top: var(--e1); }
  .palmares-liste li::before { font-size: 1.25rem; }
  .photo-bandeau { aspect-ratio: 16 / 10; }
}

/* ============ cibles tactiles ============
   Meme exigence que partout : 44 px de hauteur tactile minimum sur la navigation
   et le pied de page, obtenus par du padding et non par une police plus grosse. */

.rubriques a, .rubriques span {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0;
}
.enseigne { display: inline-flex; flex-direction: column; justify-content: center; min-height: 48px; }
.bas ul a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 2px 0;
}
.bas li { margin-bottom: 0; }
.retour a, .retour span[aria-current] {
  display: inline-flex; align-items: center; min-height: 44px;
}

/* champ legal restant a renseigner */
.a-remplir { background: #fdf3e3; color: #8a5a12; font-size: .875rem; }
/* Les petits tableaux de prose. Le tableau de relevé a ses propres règles,
   plus haut : sans l'exclure ici, ces 3 lignes les écrasaient, et ses
   cellules perdaient leur marge horizontale. */
.texte table:not(.releve) { border-collapse: collapse; width: 100%; font-size: .9375rem; }
.texte table:not(.releve) th[scope="row"] { text-align: left; padding: 10px 14px 10px 0; white-space: nowrap; color: var(--j-primary); font-weight: 600; border-bottom: 1px solid var(--j-border); vertical-align: top; }
.texte table:not(.releve) td { padding: 10px 0; border-bottom: 1px solid var(--j-border); }

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

.ecrire-bloc {
  background: var(--j-surface); border: 1px solid var(--j-border);
  padding: var(--e4); margin: var(--e3) 0 var(--e5);
}
.ecrire-champs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.ecrire-champ { margin: 0 0 var(--e3); }
.ecrire-champ label {
  display: block; font-family: var(--f-titre); font-size: 1rem;
  color: var(--j-primary); margin-bottom: var(--e1);
}
.ecrire-champ input, .ecrire-champ select, .ecrire-champ textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--j-fg);
  background: var(--j-bg); border: 1px solid var(--j-border-fort);
  border-radius: 2px; padding: 12px 14px; min-height: 48px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ecrire-champ textarea { min-height: 132px; resize: vertical; line-height: 1.65; }
.ecrire-champ input:focus, .ecrire-champ select:focus, .ecrire-champ textarea:focus {
  outline: none; border-color: var(--j-primary);
  box-shadow: 0 0 0 3px rgba(20, 83, 45, .12);
}
.btn-carnet {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--e4);
  background: var(--j-primary); color: #f4efe3; border: 0; border-radius: 2px;
  font-family: var(--f-titre); font-size: 1rem; cursor: pointer;
  transition: background .2s ease;
}
.btn-carnet:hover { background: var(--j-accent); }
.ecrire-actions { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin: 0; }
.ecrire-note { font-size: .8125rem; color: var(--j-muted); line-height: 1.5; }
.ecrire-repli { font-size: .875rem; margin: var(--e3) 0 0; color: var(--j-muted); }

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

/* 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. */
.ecrire-erreur {
  margin: 0 0 var(--sp-3, 12px);
  padding: 10px 14px;
  border-left: 3px solid #b91c1c;
  background: #fef2f2;
  color: #7f1d1d;
  font-size: .875rem; line-height: 1.5;
  border-radius: 3px;
}
.ecrire-obligatoire { color: #64748b; margin: 0 0 var(--sp-2, 8px); font-size: .8125rem; line-height: 1.5; }

/* verdict transversal : une phrase autonome sous le chapo, mise en retrait
   comme une note de marge, dans l'esprit du carnet */
.verdict-carnet {
  margin: var(--e3, 20px) 0 0;
  padding: 14px 18px;
  border-left: 2px solid var(--j-accent, #14532d);
  background: rgba(20, 83, 45, .045);
  font-size: .95rem; line-height: 1.6;
  color: var(--j-fg, #1c1917);
}

/* ================= dix-huit pages : groupes et lexique =================
   Le carnet est passe de neuf a dix-huit pages. Une barre de dix-huit liens
   n'est lisible nulle part, et sous 640 px elle etait masquee : le lecteur
   mobile n'avait aucune navigation. L'en-tete ne porte donc plus que les trois
   portes d'entree, et l'index complet vit dans le pied, groupe, sur toutes les
   pages. */

.titre-groupe {
  max-width: var(--colonne); margin: var(--e5) auto var(--e2);
  padding: 0 var(--e3); scroll-margin-top: var(--e3);
}
.contenant > .titre-groupe:first-child { margin-top: 0; }
.intro-groupe {
  max-width: var(--colonne); margin: 0 auto var(--e4);
  padding: 0 var(--e3); color: var(--j-muted); font-size: .9375rem;
}
.profils + .titre-groupe { margin-top: var(--e6); }

.bas-index {
  border-top: 1px solid var(--j-border); padding-top: var(--e3);
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--e3) var(--e4);
}
.bas-groupe h3 {
  font-family: var(--f-texte); font-size: .75rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--j-primary); font-weight: 600;
  margin: 0 0 var(--e1);
}
.bas-groupe ul { list-style: none; margin: 0; padding: 0; }
.bas-groupe li { font-size: .9375rem; }
.bas-groupe span[aria-current] { color: var(--j-accent); font-weight: 600; }
.bas-index .bas-groupe:first-child ul {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--e3);
}

/* Le pendant non geographique des etapes, sur les pages qui parlent du type
   d'agence : y aligner des lieux n'aurait eu aucun sens. */
.lexique { margin: var(--e3) 0 var(--e5); display: grid; gap: var(--e2); }
.lexique-item {
  border-left: 3px solid var(--j-accent); padding: var(--e1) 0 var(--e1) var(--e3);
}
.lexique-item h3 { font-size: 1.0625rem; margin: 0 0 4px; }
.lexique-item p { margin: 0; font-size: .9375rem; color: var(--j-muted); }

@media (max-width: 900px) {
  .bas-index { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .bas-index { grid-template-columns: 1fr; gap: var(--e3); }
  .bas-index .bas-groupe:first-child ul { grid-template-columns: 1fr; }
  .titre-groupe, .intro-groupe { padding: 0; }
  .profils + .titre-groupe { margin-top: var(--e5); }
}

/* Le tableau des mentions legales. Il portait jusqu'ici des classes empruntees
   au site A que cette feuille ne definissait pas : la legende destinee aux
   lecteurs d'ecran s'affichait, et le tableau debordait sous 640 px. */
.cadre-table { overflow-x: auto; border: 1px solid var(--j-border); background: var(--j-surface); }
.cadre-table table { margin: 0; }

/* ================= faces-à-face =================
   Le site A compare tout le panel dans un tableau trié. Ici deux agences sont
   posées côte à côte, ligne par ligne, sur le sujet qui les sépare. Deux formes
   différentes pour deux intentions différentes, et aucune classe commune. */

.ecarts { margin: var(--e3) 0 var(--e5); display: grid; gap: var(--e3); }
.ecart { border-top: 1px solid var(--j-border-fort); padding-top: var(--e2); }
.ecart h3 {
  font-family: var(--f-texte); font-size: .75rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--j-accent); font-weight: 600;
  margin: 0 0 var(--e2);
}
.ecart-faces { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.ecart-face { border-left: 2px solid var(--j-border); padding-left: var(--e2); }
.ecart-face:first-child { border-left-color: var(--j-primary); }
.ecart-nom {
  display: block; font-family: var(--f-titre); font-size: 1rem;
  color: var(--j-primary); margin-bottom: 4px;
}
.ecart-face p { margin: 0; font-size: .9375rem; color: var(--j-muted); }

.cas-liste { margin: var(--e3) 0 var(--e5); display: grid; gap: var(--e2); }
.cas { background: var(--j-surface); border: 1px solid var(--j-border); padding: var(--e3); }
.cas-projet {
  font-family: var(--f-titre); font-style: italic; font-size: 1.0625rem;
  color: var(--j-primary); margin: 0 0 var(--e1);
}
.cas-verdict { margin: 0; font-size: .9375rem; }

@media (max-width: 640px) {
  .ecart-faces { grid-template-columns: 1fr; gap: var(--e2); }
  .cas { padding: var(--e2); }
}