/* Où Fêter — feuille de style L2 (identité graphique appliquée aux écrans existants).
   Charte v1.0 : noir #1B1B1B, blanc #FFFFFF, un seul accent ambre #8A5300 (la flamme),
   aucune autre couleur codée en dur — tout passe par les jetons :root ci-dessous.
   Contraintes maintenues : corps 16 px min, mentions 14 px, contrastes ≥ 4,5:1,
   cibles tactiles ≥ 44 px, aucun framework, aucune requête réseau, aucun script.
   Compagne : charte.md (contrastes calculés) et application.md (sélecteur par sélecteur). */

:root {
  /* encre et fonds */
  --encre: #1b1b1b;          /* texte principal — 17,22:1 sur blanc */
  --papier: #ffffff;         /* fond général */
  --sourdine: #5b5b5b;       /* mentions, libellés — 6,79:1 sur blanc */
  --fond-doux: #faf8f5;      /* encarts, cartes dégradées */
  --ambre-fond: #fdf3e3;     /* fond des badges ambre */
  /* accent unique */
  --ambre: #8a5300;          /* la flamme — 6,33:1 sur blanc · 5,97:1 sur fond-doux · 5,76:1 sur ambre-fond */
  /* filets et bordures */
  --trait: #e4e4e4;          /* filets de séparation */
  --trait-fort: #b9b4ac;     /* bordures de champs (affordance de saisie) */
  --trait-ambre: #AD7E35;    /* bordure des badges ambre */
  /* états */
  --encre-hover: #333333;    /* bouton survol — blanc dessus : 12,63:1 */
  /* forme */
  --rayon: 8px;              /* cartes, encarts */
  --rayon-petit: 6px;        /* champs, boutons */
  --rayon-pastille: 999px;   /* badges, chips */
}

* { box-sizing: border-box; }

/* L'attribut hidden doit gagner sur les display: flex/grid des composants (cartes, pagination). */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0 1rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--encre);
  background: var(--papier);
}

/* --- liens et focus ------------------------------------------------------ */

a { color: var(--encre); text-decoration-color: var(--sourdine); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ambre); }
:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; }

.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 64 px ------------------------------------------------------- */

.entete {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 64px;
  max-width: 68rem;
  margin: 0 auto;
  border-bottom: 1px solid var(--trait);
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
  color: var(--encre);
}

/* Logo SVG dans l'en-tête (classe ajoutée : poser le SVG lockup dans le lien .marque).
   Hauteur 30 px ≈ 207 px de large (ratio 6,891:1) : au-dessus du minimum de 200 px où
   la mèche et le creux restent lisibles. Sur mobile, voir la note dans application.md. */
.marque-logo { display: block; height: 1.875rem; width: auto; }

.accroche { color: var(--sourdine); font-size: 0.95rem; }
.nav { margin-left: auto; display: flex; flex-wrap: nowrap; gap: 0.35rem; }
.nav a {
  display: inline-block;
  padding: 0.5rem 0.25rem;
  min-height: 44px;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* --- conteneur ----------------------------------------------------------- */

.contenu {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.5rem 0 3rem;
}

h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 0.75rem; font-weight: 700; }
h2 { font-size: 1.25rem; line-height: 1.3; margin: 2rem 0 0.75rem; font-weight: 700; }
h3 { font-size: 1.05rem; margin: 0 0 0.25rem; font-weight: 700; }

.chapeau { max-width: 46rem; margin: 0 0 1.25rem; }

/* --- accueil v0.14 : le bloc « preuve » ---------------------------------- */
/* La home ne filtre plus : elle affiche le chiffre, sa source, sa date, et un seul bouton. */

.bloc-chiffre {
  max-width: 46rem;
  margin: 0 0 1.5rem;
  padding: 1.25rem;
  background: var(--fond-doux);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.chiffre-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  margin: 0 0 0.5rem;
}
.chiffre-median { font-size: 1.9rem; line-height: 1.15; }
.chiffre-mention { color: var(--sourdine); font-size: 0.95rem; }
.chiffre-detail { margin: 0; font-size: 0.95rem; }
.cta { margin: 0 0 0.5rem; }

.liste-verification { margin: 0; padding-left: 1.1rem; max-width: 46rem; }
.liste-verification li { margin: 0.4rem 0; }

/* --- fil d'Ariane (classe ajoutée — remplace .retour sur les fiches) ----- */

.fil-ariane { margin: 0 0 1rem; font-size: 14px; }
.fil-ariane ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fil-ariane li { display: inline-flex; align-items: center; }
.fil-ariane li + li::before {
  content: "›";
  margin-right: 0.5rem;
  color: var(--sourdine);
}
/* Intégration (Jarvis, 10/11/2026) : le séparateur reste accroché à l'item précédent, sinon un
   retour à la ligne en mobile laisse « › » seul en début de ligne. */
.fil-ariane li + li::before { content: none; }
.fil-ariane li:not(:last-child)::after {
  content: "›";
  margin-left: 0.5rem;
  color: var(--sourdine);
}
.fil-ariane a {
  color: var(--sourdine);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.fil-ariane a:hover { color: var(--ambre); text-decoration: underline; }
.fil-ariane [aria-current="page"] { color: var(--encre); font-weight: 600; }

/* --- retour (conservé sur les hubs : « ← Modifier ma recherche ») -------- */

.retour { margin: 0 0 1rem; font-size: 0.95rem; }
.retour a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: var(--ambre);
}
.retour a:hover { text-decoration: underline; }

/* --- fiches incomplètes (bloc « Ces lieux ne donnent pas de détail… ») --- */

.incomplets { margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--trait); }
.incomplets h2 { font-size: 1.1rem; margin-top: 0; }
.incomplets .note { max-width: 46rem; }
/* Zone de repli : toutes les cartes qu'elle contient sont dégradées, uniformément.
   Sinon une fiche complète déplacée ici reste blanche et se confond avec les résultats. */
.incomplets .carte { background: var(--fond-doux); border-color: var(--trait); }
.carte-manque {
  margin: 0.5rem 0 0;
  font-size: 14px;
  color: var(--ambre);
}
.note { color: var(--sourdine); font-size: 14px; }

/* --- moteur de recherche (accueil §4.1) ---------------------------------- */

.formulaire {
  display: grid;
  gap: 0.75rem;
  max-width: 46rem;
  margin: 1.5rem 0 0.75rem;
  padding: 1.25rem;
  background: var(--fond-doux);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}

.champ { display: flex; flex-direction: column; gap: 0.25rem; }
.champ label { font-size: 0.875rem; color: var(--sourdine); }

select {
  min-height: 44px;
  padding: 0.5rem;
  font: inherit;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon-petit);
}
select:disabled { color: var(--sourdine); background: var(--fond-doux); cursor: not-allowed; }

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.25rem;
  font: inherit;
  font-weight: 600;
  color: var(--papier);
  background: var(--encre);
  border: 0;
  border-radius: var(--rayon-petit);
  text-decoration: none;
  cursor: pointer;
}
.bouton:hover { background: var(--encre-hover); }
.bouton:active { background: var(--encre); }
.bouton:disabled { background: var(--sourdine); cursor: not-allowed; }

.lien-secondaire { display: inline-block; min-height: 44px; padding: 0.6rem 0; }
.lien-suite { font-weight: 600; }

@media (min-width: 640px) {
  .formulaire { grid-template-columns: repeat(2, 1fr); }
  .formulaire .bouton { grid-column: 1 / -1; justify-self: start; }
}

@media (min-width: 900px) {
  .formulaire { grid-template-columns: repeat(4, 1fr) auto; align-items: end; }
  .formulaire .bouton { grid-column: auto; width: auto; }
  /* Variante de /anniversaire/ : quatre champs + le bouton tiennent sur une ligne, comme la home. */
  .formulaire.formulaire-anniversaire { grid-template-columns: repeat(4, 1fr) auto; }
  .formulaire.formulaire-anniversaire .bouton { grid-column: auto; justify-self: start; }
  /* Ligne de tableau à ~56 px (B4) tout en gardant une cible tactile de 44 px sur le dépliage (B7) :
     icônes et « détail » sur une seule ligne, padding vertical réduit. */
  .formules tbody tr { height: 56px; }
  .formules th, .formules td { padding-top: 0.3rem; padding-bottom: 0.3rem; }
  .formules td[data-label="Inclus"] { white-space: nowrap; }
  .depliage { display: inline-block; margin-left: 0.4rem; vertical-align: middle; }
  .depliage summary { display: inline-flex; min-height: 44px; align-items: center; }
}

/* --- grille de cartes ---------------------------------------------------- */

.grille {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin: 1rem 0;
}

@media (min-width: 768px) {
  .grille { grid-template-columns: repeat(2, 1fr); }
}

.carte {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--papier);
}

.carte-nom { font-size: 1.05rem; margin: 0; }
.carte-nom a { text-decoration: none; }
.carte-nom a:hover { text-decoration: underline; }
.carte-commune { margin: 0; color: var(--sourdine); font-size: 0.95rem; }
.carte-prix { margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.carte-details { margin: 0; font-size: 0.95rem; }
.carte-incomplete { border-color: var(--trait); background: var(--fond-doux); }
.carte-badge {
  margin: 0.25rem 0 0;
  font-size: 12px;
  color: var(--ambre);
  text-transform: none;
}

/* Le prix par enfant est le seul chiffre comparable d'une ligne à l'autre (B3) */
.prix-fort {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.prix-mention { font-size: 12px; color: var(--sourdine); }
.prix-absent { font-weight: 700; color: var(--sourdine); }
.non-renseigne { color: var(--sourdine); font-size: 0.95rem; }

.badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--ambre);
  background: var(--ambre-fond);
  border: 1px solid var(--trait-ambre);
  border-radius: var(--rayon-pastille);
  white-space: nowrap;
}

/* --- page /anniversaire/ : section du moteur de recherche ---------------- */

.filtres { margin: 0 0 1.5rem; }
.filtres h2 { margin: 0 0 0.75rem; font-size: 1.1rem; }

/* --- hub (§4.2) ---------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; }
.chip {
  padding: 0.25rem 0.6rem;
  font-size: 14px;
  color: var(--encre);
  background: var(--fond-doux);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-pastille);
}
.compteur { margin: 0 0 0.5rem; }
/* L'action « modifier mes critères » n'est pas un critère : on lui retire l'aspect
   de pastille pour qu'elle ne se confonde pas avec les valeurs de filtre. */
.chip-lien {
  color: var(--ambre);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0.25rem 0.25rem;
}
.assouplissements { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.assouplissements li { margin: 0.25rem 0; }
.vide { padding: 2rem 0; }

/* --- carte des lieux (spec §4.2, §9) ------------------------------------- */
/* Chargée au clic seulement. Sous 900 px : pleine largeur sous la liste ; au-dessus : la moitié
   droite, la liste gardant la gauche (spec §4.2). */

.carte-action { margin: 1rem 0 0; }

.bouton-secondaire {
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--trait-fort);
}
.bouton-secondaire:hover { background: var(--fond-doux); }

.carte-conteneur { margin: 1rem 0 0; }
.carte-osm {
  height: 60vh;
  min-height: 320px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--fond-doux);
}

@media (min-width: 900px) {
  .resultats.avec-carte {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
  }
  .resultats.avec-carte .carte-osm { height: 70vh; }
}

/* --- fiche (§4.3 et §4.3 bis) ------------------------------------------- */

.fiche-entete { border-bottom: 1px solid var(--trait); padding-bottom: 1rem; }
.fiche-commune { margin: 0 0 0.5rem; color: var(--sourdine); }
/* Indicateur de confiance : pastille délimitée + coche, pour ne pas se confondre
   avec le badge de prix « à partir de ». */
.verifie {
  display: inline-block;
  margin: 0;
  padding: 0.2rem 0.6rem;
  font-size: 14px;
  color: var(--ambre);
  background: var(--ambre-fond);
  border: 1px solid var(--trait-ambre);
  border-radius: var(--rayon-pastille);
}
.verifie::before { content: "✓"; margin-right: 0.35rem; }

.formules {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.formules th,
.formules td {
  padding: 0.6rem 0.5rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--trait);
}
.formules thead th { font-size: 14px; color: var(--sourdine); font-weight: 600; }
.formules .col-formule { font-weight: 600; width: 28%; white-space: nowrap; }
.formules .col-prix { font-variant-numeric: tabular-nums; text-align: right; }
/* Le « prix par enfant pour N » est une unité insécable : on ne coupe pas « pour 12 »
   sur deux lignes. Idem pour la tranche d'âge « 5-14 ans ». */
.formules .prix-mention { white-space: nowrap; }
.formules td[data-label="Âge"] { white-space: nowrap; }
/* Prix total et prix par enfant alignés à droite, sur la décimale : c'est la
   colonne que le parent compare d'une ligne à l'autre. */
.formules th:nth-child(5),
.formules th:nth-child(6),
.formules td:nth-child(5) { text-align: right; }
.formules .intertitre th {
  padding-top: 1.5rem;
  font-size: 14px;
  color: var(--sourdine);
  text-transform: none;
  border-bottom: 1px solid var(--trait);
}
.formules .ligne-sans-prix { color: var(--sourdine); }
.compact { display: none; }

/* 5 formules et plus : défilement horizontal, colonne Formule figée (B5) */
.tableau-defile { overflow-x: auto; }
.formules th.col-formule { position: sticky; left: 0; background: var(--papier); }

/* « détail des inclusions » : affordance d'action (ambre + chevron), pas une mention. */
.depliage summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--ambre);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  list-style: none;
}
.depliage summary::-webkit-details-marker { display: none; }
.depliage summary::before { content: "▸"; margin-right: 0.35rem; }
.depliage[open] summary::before { content: "▾"; }
.depliage ul { margin: 0 0 0.5rem; padding-left: 1rem; font-size: 14px; }

.formule-seule {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--fond-doux);
}
.formule-seule dt { font-weight: 700; margin-bottom: 0.25rem; }
.formule-seule dd { margin: 0.15rem 0; }
.formule-seule-prix { display: flex; align-items: baseline; gap: 0.4rem; }

.note-tableau { font-size: 14px; color: var(--sourdine); }

.fiche-appeler {
  margin-top: 2rem;
  padding: 1rem;
  background: var(--fond-doux);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.fiche-appeler h2 { margin-top: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 1rem 0 0; }

.fiche-voisines ul { padding-left: 1rem; }
.sources {
  margin-top: 2rem;
  font-size: 14px;
  color: var(--sourdine);
  /* une URL de source est longue et sans espace : sans ceci elle déborde de 9 px à 390 px */
  overflow-wrap: anywhere;
}

/* 768–1023 px : 5 colonnes, « Enfants » et « Inclus » passent sous le nom (B4) */
@media (min-width: 768px) and (max-width: 1023px) {
  .formules th:nth-child(3),
  .formules td:nth-child(3),
  .formules th:nth-child(7),
  .formules td:nth-child(7) { display: none; }
  .compact { display: block; margin-top: 0.15rem; font-size: 14px; font-weight: 400; color: var(--sourdine); }
}

/* < 768 px : plus de tableau, des cartes (B4) */
@media (max-width: 767px) {
  .formules thead { display: none; }
  .formules,
  .formules tbody,
  .formules tr,
  .formules th,
  .formules td { display: block; width: 100%; }
  .formules tr {
    margin: 0 0 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    background: var(--papier);
  }
  .formules th.col-formule {
    position: static;
    padding: 0 0 0.25rem;
    border-bottom: 0;
    font-size: 16px;
  }
  .formules td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.15rem 0; border: 0; }
  .formules td::before {
    content: attr(data-label);
    font-size: 14px;
    color: var(--sourdine);
  }
  /* Prix par enfant : le prix et sa mention « pour N » groupés à droite, libellé à gauche. */
  .formules td.col-prix { font-size: 22px; gap: 0.5rem; }
  .formules td.col-prix .prix-fort { margin-left: auto; }
  .formules td.col-prix::before { font-size: 14px; }
  /* Inclus : le libellé et les inclusions sur une ligne, le dépliage sur toute la largeur. */
  .formules td[data-label="Inclus"] { flex-wrap: wrap; }
  .formules td[data-label="Inclus"] .depliage { flex-basis: 100%; }
  .formules tr.intertitre { border: 0; margin: 0 0 0.5rem; padding: 0; background: none; }
  .formules tr.intertitre th { padding: 0; }
  .compact { display: none; }
}

/* --- pied de page -------------------------------------------------------- */

.pied {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.25rem 0 2rem;
  border-top: 1px solid var(--trait);
  color: var(--sourdine);
  font-size: 14px;
}
.pied-blocs { display: grid; gap: 0.5rem; }
.pied p { margin: 0; }
.pied-liens { display: flex; gap: 1rem; flex-wrap: wrap; }
.pied-liens a { min-height: 44px; display: inline-flex; align-items: center; }
.pied-mentions { max-width: 46rem; }
.marque-pied { font-weight: 700; color: var(--encre); }

.version {
  color: var(--ambre);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.revision { color: var(--sourdine); }

/* --- hubs d'âge et de type (L2) ------------------------------------------ */

.hubs { margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--trait); }
.liste-hubs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0.5rem 0 1rem;
  padding: 0;
  list-style: none;
}
.liste-hubs li {
  padding: 0.35rem 0.7rem;
  background: var(--fond-doux);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-pastille);
  font-size: 0.95rem;
}
.liste-hubs a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.liste-hubs a:hover { text-decoration: underline; }
.liste-hubs .note { margin-left: 0.35rem; }

/* --- Intégration (Jarvis, 10/11/2026) : décision d'en-tête mobile -------------------------
   Le lockup mesure ~207 px de large à sa hauteur de 1,875 rem : à 390 px, ajouter « Paris et
   petite couronne » + « Tous les lieux » déborderait. On garde le lockup et on masque l'accroche
   sous 480 px — une règle, pas un second jeu d'assets. */
@media (max-width: 479px) {
  .accroche { display: none; }
  /* Deux liens dans un en-tête de 64 px : à 390 px le lockup de 160 px ne laisse pas la place au
     menu, qui passait à la ligne et débordait au-dessus ET au-dessous de la barre (mesuré :
     nav y = -12, hauteur 88 pour un en-tête de 64). On réduit le lockup et les libellés plutôt
     que de masquer un lien. */
  .entete { gap: 0.5rem; }
  .marque-logo { height: 1.5rem; }
  .nav { gap: 0.15rem; }
  .nav a { font-size: 14px; padding-left: 0.2rem; padding-right: 0.2rem; }
}

/* Lien vers le hub d'arrondissement, sous la commune de la fiche (L3) */
.lien-hub { margin: 0.25rem 0 0; font-size: 14px; }
.lien-hub a { color: var(--ambre); min-height: 44px; display: inline-flex; align-items: center; }

/* --- Guides éditoriaux (L4) ------------------------------------------------------------ */
.guide { max-width: 42rem; }
.guide h1 { margin-bottom: 0.5rem; }
.guide .chapeau { color: var(--sourdine); font-size: 18px; line-height: 1.5; }

.sommaire {
  margin: 1.5rem 0 2rem;
  padding: 1rem 1.25rem;
  background: var(--fond-doux);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
}
.sommaire h2 {
  margin: 0 0 0.6rem;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sourdine);
}
.sommaire ol { margin: 0; padding-left: 1.25rem; }
.sommaire li { margin: 0.15rem 0; }
.sommaire a {
  color: var(--encre);
  min-height: 44px; /* cible tactile : la règle ne vaut que sur écran tactile, voir plus bas */
  display: inline-flex;
  align-items: center;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.sommaire a:hover { color: var(--ambre); }

.article { font-size: 17px; line-height: 1.65; }
.article h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 22px;
  line-height: 1.3;
  scroll-margin-top: 1rem;
}
.article h3 { margin: 1.75rem 0 0.5rem; font-size: 18px; }
.article p { margin: 0 0 1rem; }
.article ul, .article ol { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.article li { margin: 0.4rem 0; }
.article strong { font-weight: 700; }
.article blockquote {
  margin: 1.25rem 0;
  padding: 0.25rem 0 0.25rem 1rem;
  border-left: 3px solid var(--ambre);
  color: var(--encre);
}
.article a { color: var(--ambre); text-underline-offset: 3px; }
.tableau-defilant {
  overflow-x: auto;
  margin: 0 0 1.5rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
}
.article table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  margin: 0;
  font-size: 15px;
}
.article th, .article td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--trait);
  text-align: left;
  vertical-align: top;
}
.article th { background: var(--fond-doux); font-weight: 600; white-space: nowrap; }
.article code { font-size: 15px; background: var(--fond-doux); padding: 0.1rem 0.3rem; }

.fiches-guide, .voir-lieux, .sources-guide {
  margin: 2.5rem 0 0;
  padding: 1.25rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  max-width: 42rem;
}
.fiches-guide h2, .voir-lieux h2, .sources-guide h2 { margin: 0 0 0.75rem; font-size: 18px; }
.fiches-guide ul, .voir-lieux ul, .sources-guide ul { margin: 0; padding-left: 1.1rem; }
.fiches-guide li, .voir-lieux li, .sources-guide li { margin: 0.5rem 0; }
.fiches-guide a, .voir-lieux a { color: var(--ambre); }
.sources-guide { background: var(--fond-doux); }
.sources-guide li { color: var(--sourdine); font-size: 14px; line-height: 1.5; }
.sources-guide .note { margin: 0.75rem 0 0; font-size: 14px; }

.liste-guides { list-style: none; margin: 1.5rem 0; padding: 0; }
.liste-guides li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--trait);
}
.liste-guides a {
  display: inline-block;
  color: var(--encre);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  min-height: 0;
}
.liste-guides a:hover { color: var(--ambre); }
.liste-guides .note { display: block; margin-top: 0.3rem; font-size: 14px; color: var(--sourdine); }
.lien-action { color: var(--ambre); font-weight: 600; }
.voir-lieux .lien-action { min-height: 44px; display: inline-flex; align-items: center; }

/* Sur écran large, un lien de sommaire n'a pas besoin de 44 px de hauteur : le bloc repoussait
   l'article de deux écrans (relevé sur la capture de 1280 px). */
@media (min-width: 768px) {
  .sommaire a { min-height: 0; }
}