/* ==========================================================================
   Gabarit « page de contenu ». Sert /devenir-partenaire/*, /qg/*, /a-propos…
   ========================================================================== */

.contenu {
  max-width: var(--largeur-site);
  margin: 0 auto;
  padding: var(--esp-8) var(--esp-12) var(--esp-16);
  display: flex; flex-direction: column; gap: var(--esp-12);
}

/* --- Fil d’Ariane ---------------------------------------------------------- */
.fil-ariane ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2);
  font-size: var(--taille-legende);
}
.fil-ariane li + li::before { content: "/"; margin-right: var(--esp-2); color: var(--vert-coteau); }
.fil-ariane a { color: var(--vert-coteau); }
.fil-ariane [aria-current] { color: var(--vert-profond); }

.contenu__entete { display: flex; flex-direction: column; gap: var(--esp-4); }
.contenu__chapo { font-size: var(--taille-h3); line-height: 1.4; max-width: var(--largeur-lecture); }

/* Le sommaire est en colonne de droite sur desktop, en tête sur mobile.
   Il est premier dans le DOM : au clavier comme au lecteur d’écran, on veut
   la table des matières avant le corps, pas après. */
.contenu__corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  gap: var(--esp-12);
  align-items: start;
}
.sommaire        { grid-column: 2; grid-row: 1; position: sticky; top: var(--esp-6); }
.contenu__blocs  { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: var(--esp-12); }

.sommaire__titre {
  margin: 0 0 var(--esp-3);
  font-family: var(--font-texte);
  font-size: var(--taille-legende);
  font-weight: var(--poids-semibold);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--vert-coteau);
}
.sommaire__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sommaire__liste a {
  display: flex; align-items: center;
  min-height: var(--cible-tactile-min);
  font-size: var(--taille-nav);
  color: var(--vert-profond);
  text-decoration: none;
  border-left: 2px solid rgba(104, 112, 80, 0.25);
  padding-left: var(--esp-3);
}
.sommaire__liste a:hover { border-left-color: var(--vert-coteau); text-decoration: underline; }

/* --- Blocs ----------------------------------------------------------------- */
.bloc { scroll-margin-top: calc(var(--hauteur-entete) + var(--esp-4)); }
.bloc h2 { margin-bottom: var(--esp-4); }
.bloc .prose { max-width: var(--largeur-lecture); }
.bloc .prose > * + * { margin-top: var(--esp-4); }

/* Chiffre clé. Le nombre est un grand signe : la charte autorise la police
   d’affichage pour les titres, les citations et les grands signes. */
.bloc--chiffre {
  display: flex; align-items: baseline; gap: var(--esp-6); flex-wrap: wrap;
  padding: var(--esp-8);
  border-radius: var(--rayon);
  background: var(--vert-pale);
}
.chiffre__valeur {
  font-family: var(--font-titre);
  font-weight: var(--poids-semibold);
  font-optical-sizing: auto;
  font-size: var(--taille-display);
  line-height: 1;
  color: var(--vert-coteau);
}
.chiffre__legende { max-width: 32ch; }

/* Suite d’étapes. La flèche est décorative : l’ordre est déjà porté par le
   <ol>, un lecteur d’écran n’a pas à entendre « flèche ». */
.etapes {
  list-style: none; margin: var(--esp-6) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-4);
}
.etapes__item {
  padding: var(--esp-3) var(--esp-6);
  border: 1px solid rgba(104, 112, 80, 0.4);
  border-radius: var(--rayon-pastille);
  background: var(--surface);
}
.etapes__item + .etapes__item::before {
  content: "→"; margin-right: var(--esp-4);
  color: var(--vert-coteau);
}

.bloc--encart {
  padding: var(--esp-8);
  border-radius: var(--rayon);
  background: var(--creme-haut);
  border: var(--filet);
  display: flex; flex-direction: column; gap: var(--esp-4);
  align-items: flex-start;
}

.conditions__intro { margin-bottom: var(--esp-4); }
.conditions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-3); max-width: var(--largeur-lecture); }
.conditions__item {
  display: flex; gap: var(--esp-3);
  padding: var(--esp-4);
  border-radius: var(--rayon);
  background: var(--surface);
}
.conditions__item::before { content: "•"; color: var(--vert-coteau); flex: none; }

.bloc--appel {
  display: flex; flex-direction: column; gap: var(--esp-4);
  align-items: flex-start;
  padding: var(--esp-8);
  border-radius: var(--rayon);
  background: var(--vert-coteau);
  color: var(--creme-calcaire);
}
.bloc--appel h2 { color: var(--creme-calcaire); }
.bloc--appel .bouton--primaire { background: var(--creme-calcaire); color: var(--vert-profond); }

@media (max-width: 900px) {
  .contenu { padding: var(--esp-4) var(--esp-4) var(--esp-16); gap: var(--esp-8); }
  .contenu__corps { grid-template-columns: 1fr; gap: var(--esp-8); }
  .sommaire, .contenu__blocs { grid-column: 1; grid-row: auto; position: static; }
  .contenu__blocs { gap: var(--esp-8); }
  .contenu__chapo { font-size: var(--taille-corps); }
  .sommaire {
    padding: var(--esp-4);
    border-radius: var(--rayon);
    background: var(--vert-pale);
  }
  .bloc--chiffre, .bloc--encart, .bloc--appel { padding: var(--esp-6); }
  .chiffre__valeur { font-size: var(--taille-h1); }
}

/* --- Champ à remplir ---------------------------------------------------------
   Visible à l'écran, et c'est voulu : on ne publie pas un texte qui prétend
   être fini. Un <mark> plutôt qu'une couleur seule — l'information ne doit pas
   dépendre de la perception des couleurs. */
.a-remplir {
  background: var(--vert-pale);
  color: var(--vert-profond);
  padding: 0 var(--esp-1);
  border-radius: var(--rayon-petit);
  box-shadow: inset 0 -2px 0 var(--alerte);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.9em;
}

/* --- Caractéristiques d'une section -------------------------------------------
   Paires libellé-valeur : distance, dénivelé, étapes. Un <dl> et non des puces,
   pour que le lien entre les deux soit porté par le balisage. */
.caracteristiques {
  margin: 0 0 var(--esp-6);
  display: flex; flex-wrap: wrap; gap: var(--esp-3) var(--esp-8);
  padding: var(--esp-4) var(--esp-6);
  border-radius: var(--rayon);
  background: var(--creme-haut);
  border: var(--filet);
  max-width: var(--largeur-lecture);
}
.caracteristiques > div { display: flex; flex-direction: column; gap: 2px; }
.caracteristiques dt { font-size: var(--taille-legende); color: var(--vert-coteau); }
.caracteristiques dd { margin: 0; font-weight: var(--poids-medium); }

/* --- Fiche étape ---------------------------------------------------------------
   Les avertissements passent avant les chiffres. Fond vert profond et texte
   crème pour le non-aménagé : c'est l'information qui change la décision de
   partir. Le non-balisé est d'un cran en dessous. */
.etape { max-width: var(--largeur-site); }
.etape > section, .etape__alerte, .etape__voisines { max-width: 760px; }
.etape__numero { margin: 0; font-size: var(--taille-legende); font-weight: var(--poids-semibold);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--vert-coteau); }
.etape__alerte { padding: var(--esp-6); border-radius: var(--rayon);
  background: var(--vert-profond); color: var(--creme-calcaire); }
.etape__alerte h2 { margin: 0 0 var(--esp-2); font-family: var(--font-texte); font-size: var(--taille-h3);
  font-weight: var(--poids-semibold); color: inherit; }
.etape__alerte p { margin: 0; }
.etape__alerte--legere { background: var(--vert-pale); color: var(--vert-profond); }
.etape__note { margin: var(--esp-3) 0 0; font-size: var(--taille-legende); color: var(--vert-profond); }
.etape__liste { list-style: none; margin: var(--esp-4) 0 0; padding: 0; }
.etape__liste .badges { margin-top: var(--esp-1); }
.etape__liste li { display: grid; grid-template-columns: 88px 1fr auto; gap: var(--esp-3);
  align-items: baseline; padding: var(--esp-2) 0; border-bottom: 1px solid rgba(104, 112, 80, 0.25); }
.etape__km { font-size: var(--taille-legende); font-variant-numeric: tabular-nums; color: var(--vert-coteau); }
.etape__services { font-size: var(--taille-legende); color: var(--vert-profond); text-align: right; }
.etape__boutons, .etape__voisines { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-4); }
.etape__boutons a, .etape__liste--fichiers a { min-height: var(--cible-tactile-min); }
.etape__liste--fichiers a { display: inline-flex; align-items: center; }
.etape__adresses .triptyque__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-4); max-width: none; }
.etape > .etape__adresses { max-width: none; }
@media (max-width: 900px) {
  .etape__liste li { grid-template-columns: 72px 1fr; }
  .etape__services { grid-column: 2; text-align: left; }
  .etape__adresses .triptyque__grille { grid-template-columns: 1fr; }
}