/* Circuit, style « Carnet » (01/10/2026) : disposition A « Carnet de route »,
   valeurs de Claude Design (_migration/design_handoff_page_circuit/README.md).
   Balisage : fonctions/circuit-carnet.php ; gestes : ressources/js/circuit-carnet.js.
   Points de rupture : ≥ 1 200 (deux colonnes, carte 480), 960–1 199 (carte
   400), 768–959 (une colonne, carte statique avant le texte), < 768 (mobile).
   Aucune transition sur la carte (clignotements dans Safari) ; seuls les
   éléments collés suivent l'en-tête du site (--hr-en-h) en 150 ms. */

.circuit {
    --circuit-bande: 61px;
    background: var(--hr-papier);
    color: var(--hr-texte);
    font-family: var(--hr-font-texte);
    font-weight: 400;
    padding-bottom: 1px;
}
:where(.circuit) h1, :where(.circuit) h2, :where(.circuit) h3, :where(.circuit) h4,
:where(.circuit) ul, :where(.circuit) ol, :where(.circuit) dl, :where(.circuit) dd { margin: 0; padding: 0; }
:where(.circuit) ul, :where(.circuit) ol { list-style: none; }
.circuit a:focus-visible,
.circuit button:focus-visible,
.circuit [tabindex]:focus-visible { outline: none; box-shadow: var(--hr-focus); }
/* « Réduire » garde son bouton à sa place (circuit-carnet.js) : l'ancrage
   automatique du navigateur ne doit pas compenser une seconde fois. */
html:has(.circuit), body:has(.circuit) { overflow-anchor: none; }
.circuit__conteneur { max-width: 1280px; margin: 0 auto; padding: 0 var(--hr-sp-10); box-sizing: border-box; }

/* ── En-tête ─────────────────────────────────────────────── */
/* Fil d'Ariane, titre, introduction : mêmes valeurs que la carte du pays, le
   tableau et le Top 5 (tableau-carnet.css ; François, 02/10/2026) */
.circuit .hr-ariane { padding-top: 22px; font-size: 14px; line-height: 1.5; color: var(--hr-texte-2); }
.circuit .hr-ariane__liste { margin: 0; padding: 0; list-style: none; }
.circuit .hr-ariane__liste li { display: inline; }
.circuit .hr-ariane__liste li + li::before { content: "›"; margin: 0 var(--hr-sp-2); }
.circuit .hr-ariane__liste a { color: var(--hr-petrole); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.circuit .hr-ariane__liste [aria-current] { color: var(--hr-encre); }

.circuit .circuit__titre {
    max-width: 900px;
    margin: 21px auto 0;
    text-align: center;
    font: 600 48px/1.08 var(--hr-font-titre);
    letter-spacing: -.01em;
    color: var(--hr-encre);
    text-wrap: balance;
}
.circuit__intro { max-width: 760px; margin-top: 36px; font: 400 var(--hr-fs-intro)/var(--hr-lh-intro) var(--hr-font-texte); }
.circuit__intro > p + p { margin-top: 12px; }
.circuit__intro strong { color: var(--hr-encre); font-weight: 600; }

/* Tuiles discrètes : filets tracés par chaque tuile (à droite et dessous),
   rognés au bord ; autant de colonnes que de tuiles (4 à 6 selon le circuit),
   pour qu'une case vide ne fasse pas de tache. */
.circuit__tuiles {
    display: grid;
    grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr));
    margin-top: 28px;
    background: var(--hr-surface);
    border: 1px solid var(--hr-bordure);
    border-radius: 10px;
    overflow: hidden;
}
.circuit__tuile { padding: 12px 16px; box-shadow: 1px 0 0 var(--hr-filet), 0 1px 0 var(--hr-filet); }
.circuit__tuile dt { font: 600 11px/1.3 var(--hr-font-texte); letter-spacing: .08em; text-transform: uppercase; color: var(--hr-petrole); }   /* en bleu : essai de François, 02/10/2026 */
.circuit__tuile dd { margin: 0; }
.circuit__tuile-valeur { display: block; margin-top: 2px; font: 600 19px/1.25 var(--hr-font-texte); color: var(--hr-encre); font-variant-numeric: tabular-nums; }
.circuit__unite { font-size: 13px; font-weight: 500; color: var(--hr-texte-2); }
.circuit__tuile-sous { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--hr-texte-2); }
/* Programme : frise de deux colonnes lues de haut en bas, un fil et un
   point par jour (direction B, François, 02/10/2026) */
.circuit__programme { margin-top: 32px; }
.circuit .circuit__programme-titre { margin: 0 0 14px; padding: 0; font: 600 24px/1.2 var(--hr-font-titre); color: var(--hr-encre); }
.circuit__programme-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.circuit__programme-liste { margin: 0; padding: 0; list-style: none; }
.circuit__programme-liste li { position: relative; margin: 0; padding: 0 0 0 28px; }
.circuit__programme-liste li::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; border-left: 2px solid color-mix(in srgb, var(--hr-petrole) 40%, transparent); }
.circuit__programme-liste li:first-child::before { top: 50%; }
.circuit__programme-liste li:last-child::before { bottom: 50%; }
.circuit__programme-liste li::after { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; border: 2px solid var(--hr-petrole); border-radius: 50%; background: var(--hr-papier); box-sizing: border-box; }
.circuit__programme-liste a { display: flex; align-items: center; gap: 12px; padding: 8px 0; text-decoration: none; }
.circuit__programme-j { flex: none; min-width: 30px; font: 600 13px/1 var(--hr-font-texte); color: var(--hr-petrole); font-variant-numeric: tabular-nums; }
.circuit__programme-nom { font: 500 16px/1.35 var(--hr-font-titre); color: var(--hr-encre); }
.circuit__programme-plus { display: none; }
@media (hover: hover) {
    .circuit__programme-liste li:hover::after { background: var(--hr-petrole); }
    .circuit__programme-liste a:hover .circuit__programme-nom { color: var(--hr-petrole); text-decoration: underline; text-underline-offset: 3px; }
}

@media (max-width: 1023px) { .circuit__tuiles { grid-template-columns: repeat(min(var(--n, 6), 3), minmax(0, 1fr)); } }

/* ── Bande des jours (collée) ────────────────────────────── */
.circuit__bande {
    position: sticky;
    top: var(--hr-en-h, 0px);
    z-index: 1100;                 /* au-dessus de la carte et de ses contrôles */
    margin-top: 24px;
    background: var(--hr-papier);
    border-bottom: 1px solid var(--hr-bordure);
    transition: top 150ms ease-out;
}
.circuit__bande-ligne { display: flex; align-items: center; gap: 6px; height: 60px; }
.circuit__pastilles-cadre { position: relative; flex: 1; min-width: 0; }
.circuit__pastilles { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.circuit__pastilles::-webkit-scrollbar { display: none; }
.circuit__pastilles a {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--hr-bordure);
    border-radius: var(--hr-r-rond);
    background: var(--hr-surface);
    font: 500 14px var(--hr-font-texte);
    color: var(--hr-texte);
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
}
.circuit__pastilles a.circuit__haut { padding: 0 12px; font-size: 16px; }
.circuit__pastilles a[aria-current] { background: var(--hr-petrole); border-color: var(--hr-petrole); color: #fff; font-weight: 600; }
/* Fondus de 32 px, du côté où il reste des jours */
.circuit__pastilles-cadre::before,
.circuit__pastilles-cadre::after { content: ""; position: absolute; top: 0; bottom: 0; width: 32px; pointer-events: none; z-index: 1; display: none; }
.circuit__pastilles-cadre::before { left: 0; background: linear-gradient(90deg, var(--hr-papier), rgba(250, 248, 244, 0)); }
.circuit__pastilles-cadre::after { right: 0; background: linear-gradient(270deg, var(--hr-papier), rgba(250, 248, 244, 0)); }
.circuit__pastilles-cadre.a-gauche::before,
.circuit__pastilles-cadre.a-droite::after { display: block; }
.circuit__fleche,
.circuit__pas {
    flex: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--hr-bordure);
    border-radius: var(--hr-r-rond);
    background: var(--hr-surface);
    font: 600 18px/1 var(--hr-font-texte);
    color: var(--hr-petrole);
    cursor: pointer;
}
.circuit__fleche[hidden] { display: none; }
.circuit__fleche:disabled { color: #c9d0d3; cursor: default; }
.circuit__selecteur { display: none; }

/* ── Deux colonnes ───────────────────────────────────────── */
.circuit__corps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 480px;
    gap: 40px;
    align-items: start;
    margin-top: 32px;
}
.circuit__carte-col {
    position: sticky;
    top: calc(var(--hr-en-h, 0px) + var(--circuit-bande) + 16px);
    transition: top 150ms ease-out;
}
.circuit__carte {
    height: calc(100vh - 197px);   /* 72 + 61 + 16 + 48 : ne change pas quand l'en-tête se cache */
    min-height: 440px;
    border: 1px solid var(--hr-bordure);
    border-radius: var(--hr-r-md);
    overflow: hidden;
    isolation: isolate;            /* les contrôles Leaflet restent sous la bande des jours */
    background: #e8eef0;
}
.circuit__carte img.leaflet-tile { width: 257px !important; height: 257px !important; mix-blend-mode: normal; }   /* pas de jointures blanches entre tuiles (comme le Top 5) */
/* Échelle, en bas à gauche : le style de la carte du pays */
.circuit__carte .leaflet-control-scale { margin: 0 0 8px 12px; }
.circuit__carte .leaflet-control-scale-line {
    border: 1.5px solid var(--hr-texte);
    border-top: 0;
    background: rgba(255, 255, 255, .8);
    font: 500 11px/1.4 var(--hr-font-texte);
    color: var(--hr-texte);
}
.circuit__legende { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--hr-texte-3); }

.circuit .circuit__h2 { font: 600 28px/1.2 var(--hr-font-titre); color: var(--hr-encre); }

/* « Avant de partir » */
/* Intertitres en police de titre : distincts du gras des paragraphes (« Diversité des
   expériences : », François, 02/10/2026) */
.circuit__intertitre { margin: 28px 0 8px; font: 600 19px/1.3 var(--hr-font-titre); color: var(--hr-encre); }
.circuit__h2 + .circuit__intertitre { margin-top: 16px; }

/* Texte replié à cinq lignes, fondu sur une ligne */
.circuit__texte { font-size: 15px; line-height: 1.5;   /* 15 px et 1,5 partout (François, 02/10/2026 : 16 px et 1,75 sur ordinateur) */
    color: var(--hr-texte); text-wrap: pretty; }
.circuit__texte p { margin: 0 0 12px; }
.circuit__texte p:last-child { margin-bottom: 0; }
/* 12 px partout entre paragraphes (François, 02/10/2026) */
.circuit__texte strong { font-weight: 600; color: var(--hr-encre); }
.circuit__texte a { color: var(--hr-petrole); }
.circuit__texte ul { list-style: disc; padding-left: 22px; margin: 0 0 12px; }
/* Intertitres écrits dans les textes de l'auteur (« Besoin d'une option
   différente ? ») : comme les autres intertitres */
.circuit .circuit__texte :is(h2, h3) { margin: 28px 0 8px; padding: 0; font: 600 19px/1.3 var(--hr-font-titre); color: var(--hr-encre); }
/* Sous-titre d'une section (Islande : « Franchissement de gués » sous
   « Itinéraire modulable ») : texte courant en gras, un cran au-dessus */
.circuit .circuit__texte :is(h4, h5) { margin: 20px 0 4px; padding: 0; font: 600 16px/1.4 var(--hr-font-texte); color: var(--hr-encre); }
.circuit .circuit__texte > :is(h2, h3, h4, h5):first-child { margin-top: 0; }
.circuit__texte.est-replie { max-height: calc(15px * 1.5 * 5); overflow: hidden; position: relative; }
.circuit__texte.est-replie::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: calc(15px * 1.5);
    background: linear-gradient(rgba(250, 248, 244, 0), var(--hr-papier));
}
.circuit__lire {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: 600 14px var(--hr-font-texte);
    color: var(--hr-petrole);
    cursor: pointer;
}
.circuit__lire[hidden] { display: none; }

/* ── Jour par jour ───────────────────────────────────────── */
.circuit__itineraire { margin-top: 48px; }
/* « Avant de partir » dans un encadré sable, un peu plus foncé que le papier :
   séparé de l'itinéraire sans trait (H parmi huit essais, François, 02/10/2026) */
.circuit__avant { padding: 24px 28px 28px; border-radius: 12px; background: #f3efe7; }
.circuit__avant + .circuit__itineraire { margin-top: 56px; }
.circuit__jour { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--hr-bordure); outline: none; }
.circuit .circuit__jour:focus,
.circuit .circuit__tableau-zone:focus { outline: none; box-shadow: none; }
.circuit__jour-tete { display: flex; align-items: flex-start; gap: 12px; }
.circuit__jour-num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 28px;
    margin-top: 1px;
    padding: 0 10px;
    border-radius: var(--hr-r-rond);
    background: var(--hr-petrole);
    font: 600 14px var(--hr-font-texte);
    color: #fff;
    box-sizing: border-box;
}
.circuit .circuit__jour-titre { font: 600 22px/1.25 var(--hr-font-titre); color: var(--hr-encre); text-wrap: balance; }

/* Une randonnée, ordinateur : photo à gauche sur deux rangées */
.circuit__rando {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 24px;
    margin-top: 32px;
}
.circuit__jour-tete + .circuit__rando { margin-top: 20px; }
/* 6 px de plus après « Lire la suite » quand une randonnée suit (François, 02/10/2026) */
.circuit__rando:has(.circuit__lire:not([hidden])) + .circuit__rando { margin-top: 38px; }
.circuit__photo { grid-row: 1 / span 2; display: block; align-self: start; }
.circuit__photo img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: 6px; background: var(--hr-filet); }
.circuit__photo--vide { display: block; aspect-ratio: 3 / 2; border-radius: 6px; background: var(--hr-filet); }
.circuit__rando-tete, .circuit__rando-texte { grid-column: 2; min-width: 0; }
.circuit .circuit__rando-titre { font: 600 18px/1.35 var(--hr-font-texte); color: var(--hr-encre); }
.circuit__nom { color: var(--hr-petrole); text-decoration: none; }
/* L'accroche suit le nom dans le titre : « Kjenndalsbreen — Entre lac
   turquoise et géant de glace » (François, 02/10/2026 : plus visible) */
.circuit__accroche { font-weight: 500; color: var(--hr-encre); }
.circuit__chiffres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 8px 0 16px;            /* 6 px de plus avant le texte (François, 02/10/2026) */
    font: 500 13px/1.4 var(--hr-font-texte);
    color: var(--hr-encre);
    font-variant-numeric: tabular-nums;
}
.circuit__chiffres--visite { font-weight: 400; color: var(--hr-texte-2); }
.circuit__difficulte { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; color: var(--hr-texte); }
.circuit__dplus { font-weight: inherit; color: inherit; }   /* même graisse que la valeur (François, 02/10/2026) */
.circuit__point { color: #b8c1c5; }
.circuit__carres { display: inline-flex; gap: 2px; }
.circuit__carres i { width: 8px; height: 8px; border-radius: 1px; background: var(--hr-bordure); }
.circuit__carres i.plein { background: var(--hr-petrole); }
.circuit__carres i.demi { background: linear-gradient(90deg, var(--hr-petrole) 50%, var(--hr-bordure) 50%); }

/* Carte compacte et accroche du mobile : cachées sur ordinateur */
.circuit__carte-rando,
.circuit__accroche--mobile { display: none; }

/* Points de vue du jour : vignettes */
.circuit__vues { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.circuit__vues li { flex: 0 0 calc((100% - 24px) / 3); min-width: 0; }
.circuit__vues a { display: block; text-decoration: none; color: var(--hr-texte); font-size: 13px; line-height: 1.35; text-align: center; }
.circuit__vues img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; margin-bottom: 6px; background: var(--hr-filet); }

/* ── Tableau récapitulatif ───────────────────────────────── */
.circuit__tableau-zone { margin-top: 64px; outline: none; }
.circuit__tableau-cadre { margin-top: 16px; background: var(--hr-surface); border: 1px solid var(--hr-bordure); border-radius: var(--hr-r-md); overflow: hidden; }
/* Largeurs tirées du contenu : la place en plus se répartit en proportion,
   les écarts entre colonnes restent semblables (François, 02/10/2026) */
.circuit__tableau { width: 100%; border-collapse: collapse; table-layout: auto; font-size: 14px; line-height: 21px; font-variant-numeric: tabular-nums; }
.circuit__tableau th {
    padding: 10px 12px;
    border-bottom: 2px solid var(--hr-petrole);
    font: 600 11px/1.3 var(--hr-font-texte);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
    color: var(--hr-texte-3);
}
.circuit__tableau td { height: 44px; padding: 6px 12px; border-top: 1px solid var(--hr-filet); vertical-align: middle; box-sizing: border-box; }
.circuit__tableau tr.circuit__t-debut td { border-top-color: var(--hr-bordure); }
.circuit__tableau .circuit__t-avis { padding-left: 32px; }
.circuit__t-niveau, .circuit__t-avis { white-space: nowrap; }
.circuit__t-vue { font-size: 13px; color: var(--hr-texte-2); }
.circuit__t-num { text-align: center !important; white-space: nowrap; }   /* centrés : écarts égaux entre les colonnes */
.circuit__t-jour a { font-weight: 600; color: var(--hr-encre); text-decoration: none; }
.circuit__t-nom a { font-weight: 600; color: var(--hr-petrole); text-decoration: none; }
.circuit__t-niveau-mobile { display: none; }
.circuit__vide { color: var(--hr-texte-3); }
.circuit__t-total td { background: var(--hr-papier); font-weight: 600; color: var(--hr-encre); border-top-color: var(--hr-bordure); }
.circuit__etoiles { display: inline-flex; gap: 1px; }
.circuit__etoile { position: relative; display: inline-block; width: 15px; height: 15px; }
.circuit__etoile::before,
.circuit__etoile span::before { content: "★"; position: absolute; left: 0; top: 0; font-size: 15px; line-height: 15px; }
.circuit__etoile::before { color: var(--hr-bordure); }
.circuit__etoile span { position: absolute; left: 0; top: 0; height: 100%; overflow: hidden; }
.circuit__etoile span::before { color: var(--hr-petrole); }

/* Survols : à la souris seulement */
@media (hover: hover) {
    .circuit__nom:hover,
    .circuit__t-nom a:hover,
    .circuit__t-jour a:hover { text-decoration: underline; text-underline-offset: 3px; }
    .circuit__pastilles a:not([aria-current]):hover { border-color: var(--hr-petrole); color: var(--hr-petrole); }
    .circuit__vues a:hover span { color: var(--hr-petrole); text-decoration: underline; }
}

/* ── Repères de la carte (Leaflet) ───────────────────────── */
.circuit-rep {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: var(--hr-r-rond);
    font-family: var(--hr-font-texte);
    white-space: nowrap;
    cursor: pointer;
    outline: none;
}
.circuit-rep--neutre { height: 24px; padding: 0; background: var(--hr-petrole); color: #fff; font-size: 12px; font-weight: 600; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.circuit-rep--actif { height: 28px; padding: 0; background: var(--hr-petrole); color: #fff; font-size: 13px; font-weight: 600; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(28, 42, 49, .35); }
.circuit-rep.est-choisie { background: var(--hr-vert); color: #fff; border-color: #fff; }
.circuit-bulle__code { flex: none; margin-right: 8px; padding: 2px 7px; border-radius: var(--hr-r-rond); background: var(--hr-petrole); font: 600 12px/1.3 var(--hr-font-texte); color: #fff; }
.circuit-rep--autre { height: 22px; padding: 0; background: #fff; color: var(--hr-petrole-fonce); font-size: 11px; font-weight: 600; border: 1px solid var(--hr-petrole); }
.circuit-rep:focus-visible { box-shadow: var(--hr-focus); }
.circuit-point { box-sizing: border-box; border-radius: 50%; background: var(--hr-petrole); border: 2px solid #fff; cursor: pointer; }
.circuit-point--autre { background: #fff; border: 1.5px solid var(--hr-petrole); }
.circuit-cible { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; }
.circuit-sens { display: block; overflow: visible; }
/* Lettre de l'étape devant la randonnée (a, b, c…), la même que sur la carte (J6a) */
.circuit__lettre,
.circuit__rando-titre[data-lettre]::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--hr-petrole);
    font: 700 12px/1 var(--hr-font-texte);
    color: #fff;
    vertical-align: 2px;
}
/* Lettre du titre de la randonnée : dessinée ici, hors du texte du titre (SEO) */
.circuit__rando-titre[data-lettre]::before { content: attr(data-lettre); }
.circuit__vues .circuit__lettre { width: 18px; height: 18px; margin-right: 5px; font-size: 11px; vertical-align: 1px; }
/* Nom du point survolé, dans le vert vif du filet de l'en-tête, comme le
   repère choisi (François, 02/10/2026 ; il était dans la couleur du tracé) */
.circuit-etiquette {
    display: flex;
    align-items: center;
    padding: 0 8px;
    box-sizing: border-box;
    border-radius: 4px;
    background: var(--hr-vert);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    font: 600 12px/1 var(--hr-font-texte);
    color: #fff;
    white-space: nowrap;
}
/* Bulle d'un point */
.circuit-bulle .leaflet-popup-content-wrapper { padding: 0; border-radius: 8px; overflow: hidden; }
.circuit-bulle .leaflet-popup-content { margin: 0; width: 240px !important; font-family: var(--hr-font-texte); }
.circuit-bulle__actions button, .circuit-bulle__actions a { white-space: nowrap; }
.circuit-bulle img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.circuit-bulle__texte { padding: 10px 12px 12px; }
.circuit-bulle__nom { display: flex; align-items: center; font: 600 15px/1.3 var(--hr-font-texte); color: var(--hr-encre); }
.circuit-bulle__chiffres { margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--hr-texte-2); }
.circuit-bulle__actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; }
.circuit-bulle__actions button,
.circuit-bulle__actions a {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--hr-r-rond);
    font: 600 13px var(--hr-font-texte);
    text-decoration: none;
    cursor: pointer;
}
.circuit-bulle__actions button { border: 1px solid var(--hr-bordure); background: #fff; color: var(--hr-petrole); }
.circuit-bulle__actions a { border: 1px solid var(--hr-petrole); background: var(--hr-petrole); color: #fff !important; }
.circuit-bulle .leaflet-popup-close-button { top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--hr-encre); font: 600 18px/28px var(--hr-font-texte); text-align: center; }
.circuit__jour-tete .circuit__jour-titre { flex: 1; min-width: 0; }
.circuit__ensemble[hidden] { display: none !important; }
.circuit__fermer { justify-content: center; width: 40px; height: 40px; padding: 0; font-size: 18px; }
/* Plein écran : extension Control.FullScreen, comme la carte du pays */
html.circuit-verrou, html.circuit-verrou body { overflow: hidden; }
.circuit__carte .leaflet-control-zoom-fullscreen { background-image: none !important; display: flex; align-items: center; justify-content: center; color: var(--hr-encre); }
.circuit__carte-col:fullscreen, .circuit__carte-col.leaflet-pseudo-fullscreen { margin: 0; background: #fff; }
.circuit__carte-col:-webkit-full-screen { width: 100%; height: 100%; }
.circuit__carte-col.leaflet-pseudo-fullscreen { position: fixed !important; inset: 0; z-index: 99999; }
:is(.circuit__carte-col:fullscreen, .circuit__carte-col.leaflet-pseudo-fullscreen) .circuit__carte { height: 100% !important; min-height: 0; border: 0; border-radius: 0; }
:is(.circuit__carte-col:fullscreen, .circuit__carte-col.leaflet-pseudo-fullscreen) .circuit__legende { display: none; }
:is(.circuit__carte-col:fullscreen, .circuit__carte-col.leaflet-pseudo-fullscreen) .circuit__carte-papier { height: 100%; }
/* Légende et adresse pour le papier seulement (@media print, en fin de feuille) */
.circuit__legende-papier,
.circuit__impression-pied { display: none; }
/* Bouton « Carte » flottant (mobile, la carte passée) */
.circuit__carte-flottant {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 1150;
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--hr-r-rond);
    background: var(--hr-petrole);
    box-shadow: 0 4px 14px rgba(28, 42, 49, .3);
    font: 600 15px var(--hr-font-texte);
    color: #fff;
    cursor: pointer;
}
.circuit__carte-flottant[hidden] { display: none; }
.circuit__ensemble {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px 0 10px;
    border: 0;
    border-radius: 6px;
    background: #fff;
    box-shadow: var(--hr-om-controle);
    font: 600 13px var(--hr-font-texte);
    color: var(--hr-petrole);
    cursor: pointer;
}

/* ── 960 à 1 199 px ──────────────────────────────────────── */
@media (max-width: 1199px) {
    .circuit__corps { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; }
}
/* Sous 1 100 px : vignette de 128 px, texte dessous sur toute la largeur */
@media (max-width: 1099px) {
    .circuit__rando { grid-template-columns: 128px minmax(0, 1fr); column-gap: 16px; grid-template-rows: auto; }
    .circuit__photo { grid-row: 1; }
    .circuit__rando-tete { grid-column: 2; }
    .circuit__rando-texte { grid-column: 1 / -1; margin-top: 12px; }
}

/* ── 768 à 959 px : une colonne, carte statique avant le texte ── */
@media (max-width: 959px) {
    .circuit__corps { display: flex; flex-direction: column; gap: 0; }
    .circuit__carte-col { position: static; order: -1; }
    .circuit__carte { height: 440px; min-height: 0; }
    .circuit__avant { margin-top: 40px; }
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 767px) {
    .circuit__avant { padding: 20px 16px 22px; border-radius: 10px; }
    .circuit__conteneur { padding: 0 16px; }
    .circuit .hr-ariane { padding-top: 14px; }
    .circuit .circuit__titre { margin-top: 25px; font-size: 32px; line-height: 1.1; }
    .circuit__intro { margin-top: 30px; }
    .circuit__tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Programme sur une colonne, replié après quatre jours */
    .circuit__programme { margin-top: 24px; }
    .circuit .circuit__programme-titre { font-size: 20px; }
    .circuit__programme-cols { grid-template-columns: minmax(0, 1fr); }
    .circuit__programme-liste a { min-height: 44px; padding: 4px 0; box-sizing: border-box; }
    /* Une seule frise : la première liste continue dans la seconde */
    .circuit__programme-liste:first-child li:last-child::before { bottom: 0; }
    .circuit__programme-liste + .circuit__programme-liste li:first-child::before { top: 0; }
    .circuit__programme:not(.est-ouvert) .circuit__programme-liste:first-child li:nth-child(n+5),
    .circuit__programme:not(.est-ouvert) .circuit__programme-liste + .circuit__programme-liste { display: none; }
    .circuit__programme:not(.est-ouvert) .circuit__programme-liste:first-child li:nth-child(4)::before { bottom: 0; }
    .circuit__programme-plus { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; padding: 0; border: 0; background: none; font: 600 15px/1.3 var(--hr-font-texte); color: var(--hr-petrole); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

    /* Sélecteur de jour à la place des pastilles */
    /* Pastilles et flèches, comme sur ordinateur (essai de François,
       02/10/2026) ; le sélecteur reste dans le balisage, caché. */
    .circuit__bande-ligne { height: 60px; gap: 8px; }
    .circuit__fleche { width: 40px; height: 40px; }
    .circuit__selecteur { display: none; }
    .circuit__pas { width: 44px; height: 44px; font-size: 20px; }
    .circuit__pas:disabled { color: #c9d0d3; cursor: default; }
    .circuit__choix {
        position: relative;
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        height: 44px;
        padding: 0 14px 0 6px;
        border: 1px solid var(--hr-bordure);
        border-radius: var(--hr-r-rond);
        background: var(--hr-surface);
        box-sizing: border-box;
    }
    .circuit__choix-num {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 32px;
        padding: 0 8px;
        border-radius: var(--hr-r-rond);
        background: var(--hr-petrole);
        font: 600 14px var(--hr-font-texte);
        color: #fff;
        box-sizing: border-box;
    }
    .circuit__choix-num.est-vide { background: var(--hr-filet); color: var(--hr-texte-2); }
    .circuit__choix-titre { flex: 1; min-width: 0; font: 500 15px var(--hr-font-texte); color: var(--hr-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .circuit__choix-chevron { flex: none; font-size: 12px; color: var(--hr-texte-2); }
    .circuit__choix select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: pointer; }
    .circuit__choix:focus-within { box-shadow: var(--hr-focus); }

    .circuit__corps { margin-top: 24px; }
    .circuit__carte { height: max(360px, 60vh); }   /* 360 px semblaient trop bas (François, 02/10/2026) */
    .circuit .circuit__h2 { font-size: 22px; }

    .circuit__jour { margin-top: 32px; padding-top: 32px; }
    .circuit__jour-num { margin-top: 0; }
    .circuit .circuit__jour-titre { font-size: 20px; }

    /* Randonnée en carte compacte */
    .circuit__rando { display: block; margin-top: 24px; }
    .circuit__jour-tete + .circuit__rando { margin-top: 20px; }
    .circuit__photo, .circuit__rando-tete { display: none; }
    .circuit__carte-rando {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        min-height: 84px;
        background: var(--hr-surface);
        border: 1px solid var(--hr-bordure);
        border-radius: var(--hr-r-md);
        overflow: hidden;
        text-decoration: none;
    }
    .circuit__carte-rando img, .circuit__carte-rando .circuit__photo--vide { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; display: block; }
    .circuit__carte-corps { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 12px; min-width: 0; }
    .circuit__carte-nom { font: 600 15px/1.3 var(--hr-font-texte); color: var(--hr-petrole); }
    .circuit__carte-rando .circuit__chiffres { margin: 0; gap: 2px 8px; font-size: 13px; }
    .circuit__carte-rando .circuit__point { display: none; }
    .circuit__carte-rando .circuit__carres i { width: 7px; height: 7px; }
    .circuit__accroche--mobile { display: block; margin: 12px 0 4px; font: 600 16px/1.4 var(--hr-font-titre); color: var(--hr-encre); }
    .circuit__carte-rando + .circuit__rando-texte { margin-top: 12px; }

    .circuit__lire { min-height: 44px; }

    /* Tableau : Jour · Randonnée (difficulté dessous) · Durée · D+ */
    .circuit__tableau { font-size: 13px; }
    .circuit__tableau th, .circuit__tableau td { padding: 8px; }
    .circuit__tableau td { height: 52px; }
    .circuit__t-option, .circuit__t-niveau { display: none; }
    .circuit__tableau th.circuit__t-jour { width: 40px; }
    .circuit__tableau th.circuit__t-nom { width: auto; }
    .circuit__tableau th:nth-child(4) { width: 64px; }
    .circuit__tableau th:nth-child(6) { width: 60px; }
    .circuit__t-niveau-mobile { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12px; color: var(--hr-texte-2); }
    .circuit__t-niveau-mobile .circuit__carres i { width: 7px; height: 7px; }
    .circuit__vues li { flex-basis: calc((100% - 12px) / 2); }
}

/* ── Impression : carnet de route (maquette « 2a », François, 05/10/2026) ──
   Même esprit que la fiche imprimée : 11 pt, bleu pétrole pour les titres et
   les chiffres clés, aucune ombre floue (Chrome l'imprime en rectangle gris),
   photos en 3:2. Page 1 : titre, introduction, chiffres en 3 × 2, carte et
   programme côte à côte (la carte est déplacée là par circuit-carnet.js) ;
   puis « Avant de partir » sur deux colonnes, le jour par jour (photo à
   gauche, texte autour), le tableau sur une nouvelle page, l'adresse.
   La page fait 703 px de large : les règles du mobile s'appliquent, d'où les
   retours à la présentation d'ordinateur ci-dessous. */
@media print {
    .circuit { background: #fff; color: #111; padding: 0; font-size: 11pt; }
    .circuit *,
    .circuit *::before,
    .circuit *::after { box-shadow: none !important; text-shadow: none !important; }
    .circuit [class*="circuit__"],
    .circuit__carte * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .circuit__conteneur { max-width: none; padding: 0; }

    /* Mobilier d'écran */
    .circuit .hr-ariane,
    .circuit__bande,
    .circuit__carte-flottant,
    .circuit__programme-plus,
    .circuit__lire,
    .circuit__carte-rando,
    .circuit__accroche--mobile,
    .circuit__carte .leaflet-control-container,
    .circuit__legende,
    .circuit__t-niveau-mobile { display: none !important; }

    /* Liens : du texte ; un lien vers un autre site garde le nom de ce site (data-hote) */
    .circuit a { color: inherit; text-decoration: none; }
    .circuit a[data-hote]::after { content: " (" attr(data-hote) ")"; font-size: 9.5pt; color: #444; }
    .circuit .circuit__nom,
    .circuit .circuit__t-nom a { color: var(--hr-petrole); }

    /* En-tête */
    .circuit .circuit__titre { margin: 0 auto; font-size: 24pt; line-height: 1.12; color: var(--hr-petrole); }
    .circuit__intro { max-width: none; margin-top: 14pt; font-size: 11pt; line-height: 1.45; color: #111; }
    .circuit__intro strong { color: #111; }
    .circuit__tuiles {
        margin-top: 16pt;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 10px;
        box-shadow: 0 2px 0 #e2e2e2 !important;
        break-inside: avoid;
    }
    .circuit__tuile { padding: 7pt 10pt; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; }
    .circuit__tuile:nth-child(3n) { border-right: 0; }
    .circuit__tuile:nth-last-child(-n + 3):nth-child(3n + 1),
    .circuit__tuile:nth-last-child(-n + 3):nth-child(3n + 1) ~ .circuit__tuile { border-bottom: 0; }
    .circuit__tuile dt { font-size: 8pt; }
    .circuit__tuile-valeur { font-size: 15pt; color: var(--hr-petrole); }
    .circuit__unite { font-size: 10pt; color: var(--hr-petrole); }
    .circuit__tuile-sous { font-size: 9.5pt; color: #444; }

    /* Carte et programme côte à côte ; tous les jours, en une frise */
    .circuit__couverture { display: flex; gap: 20pt; align-items: flex-start; margin-top: 20pt; break-inside: avoid; }
    .circuit__couverture .circuit__programme { flex: 1; margin: 0; }
    .circuit .circuit__programme-titre,
    .circuit .circuit__h2 { font-size: 14pt; color: var(--hr-petrole); }
    .circuit__programme-cols { display: block; }
    .circuit__programme-liste li,
    .circuit__programme-liste + .circuit__programme-liste { display: block !important; }
    .circuit__programme-liste:first-child li:last-child::before { bottom: 0; }
    .circuit__programme-liste + .circuit__programme-liste li:first-child::before { top: 0; }
    .circuit__programme-liste li::after { background: #fff; }
    .circuit__programme-liste a { min-height: 0 !important; padding: 3pt 0; gap: 8pt; }
    .circuit__programme-j { font-size: 9pt; }
    .circuit__programme-nom { font-size: 11pt; color: #111; }
    /* Itinéraire plus large que haut (Islande) : carte au-dessus, programme sur deux colonnes */
    .circuit--carte-large .circuit__couverture { display: block; }
    .circuit--carte-large .circuit__carte-col { margin: 0 auto 18pt; }
    .circuit--carte-large .circuit__programme-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24pt; }

    /* La carte : à sa taille d'écran (--carte-l, --carte-h), décalée sur la boîte
       de l'itinéraire (--carte-x, --carte-y, --carte-cl, --carte-ch) et réduite
       (--carte-s), valeurs écrites par circuit-carnet.js avant l'impression */
    .circuit__carte-col { display: block !important; position: static !important; width: calc(var(--carte-cl, 320px) * var(--carte-s, 1)); break-inside: avoid; }
    .circuit__carte-papier {
        width: calc(var(--carte-cl, 320px) * var(--carte-s, 1));
        height: calc(var(--carte-ch, 440px) * var(--carte-s, 1));
        overflow: hidden;
        border: 1px solid #ccc;
        border-radius: 10px;
        box-shadow: 0 2px 0 #e2e2e2 !important;
    }
    .circuit__carte {
        width: var(--carte-l, 320px) !important;
        max-width: none !important;
        height: var(--carte-h, 440px) !important;
        min-height: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        transform: scale(var(--carte-s, 1)) translate(calc(-1 * var(--carte-x, 0px)), calc(-1 * var(--carte-y, 0px)));
        transform-origin: 0 0;
    }
    .circuit__legende-papier { display: block; margin-top: 5pt; font-size: 9pt; line-height: 1.35; color: #444; }

    /* Textes dépliés */
    .circuit__corps { display: block !important; margin: 0; }
    .circuit__texte { font-size: 11pt; line-height: 1.4; color: #111; max-height: none !important; overflow: visible !important; }
    .circuit__texte.est-replie::after { display: none; }
    .circuit__texte p { margin: 0 0 6pt; }
    .circuit__texte strong { color: #111; }
    .circuit__texte ul { margin-bottom: 6pt; }
    .circuit .circuit__texte :is(h2, h3),
    .circuit__intertitre { margin: 12pt 0 4pt; font-size: 12pt; color: var(--hr-petrole); break-after: avoid; }
    .circuit .circuit__texte :is(h4, h5) { margin: 8pt 0 2pt; font-size: 11pt; color: #111; }

    /* « Avant de partir » : deux colonnes pour toute la section, « Le niveau »
       entier en haut de la colonne de gauche (François, 05/10/2026) */
    .circuit__avant { padding: 0; background: none; border-radius: 0; break-before: page; column-count: 2; column-gap: 16pt; }
    .circuit__avant > .circuit__h2 { column-span: all; margin-bottom: 8pt; }
    .circuit__avant > .circuit__intertitre:first-of-type { margin-top: 0 !important; }
    /* Safari imprime mal les colonnes (une ligne tranchée en bas de page, vu
       sur la fiche) : une seule colonne chez lui (fiche-carnet.css, même règle) */
    @supports (font: -apple-system-body) {
        .circuit__avant { column-count: auto; }
        /* Carte et programme peuvent se séparer : d'un seul tenant, Safari les repoussait en page 2 */
        .circuit__couverture { break-inside: auto; }
        /* … mais le programme reste d'un seul tenant, en deux blocs côte à côte
           et non en grille : WebKit coupait la grille et laissait J7 seul en
           page suivante */
        .circuit__programme { break-inside: avoid; }
        .circuit--carte-large .circuit__programme-cols { display: block; }
        .circuit--carte-large .circuit__programme-liste { display: inline-block !important; width: calc(50% - 15pt); vertical-align: top; }
        .circuit--carte-large .circuit__programme-liste + .circuit__programme-liste { margin-left: 24pt; }
        /* Safari ignore break-after: avoid : rallonge invisible sous les
           titres (fiche-carnet.css, même règle) */
        /* (l'en-tête d'un jour, flexible, devient un bloc : la rallonge n'agit que dans un bloc) */
        .circuit__jour-tete { display: block; }
        .circuit__jour-num { margin-right: 8pt; vertical-align: 2pt; }
        .circuit .circuit__jour-titre { display: inline; }
        .circuit h2, .circuit__intertitre, .circuit__jour-tete { break-inside: avoid; }
        .circuit h2::after, .circuit__intertitre::after, .circuit__jour-tete::after { content: ""; display: block; height: 48pt; margin-bottom: -48pt; }
    }

    /* Jour par jour : photo à gauche (version ordinateur), texte autour */
    .circuit__avant + .circuit__itineraire,
    .circuit__itineraire { margin-top: 26pt; }
    .circuit__jour { margin-top: 18pt; padding-top: 14pt; border-top: 1px solid #ccc; }
    .circuit__itineraire > .circuit__h2 + .circuit__jour { margin-top: 10pt; padding-top: 0; border-top: 0; }
    .circuit__jour-tete { align-items: center; gap: 8pt; break-after: avoid; }
    .circuit__jour-num { height: 18pt; min-width: 28pt; margin: 0; font-size: 10pt; }
    .circuit .circuit__jour-titre { font-size: 14pt; color: var(--hr-petrole); }
    .circuit__rando,
    .circuit__rando:has(.circuit__lire:not([hidden])) + .circuit__rando { display: flow-root; margin-top: 12pt; }
    .circuit__jour-tete + .circuit__rando { margin-top: 10pt; }
    .circuit__photo { display: block; float: left; width: 36%; margin: 2pt 14pt 6pt 0; }
    .circuit__photo img { border-radius: 6px; }
    .circuit__rando-tete { display: block; }
    .circuit__rando-texte { margin: 0; }
    .circuit .circuit__rando-titre { font-size: 11.5pt; line-height: 1.3; }
    .circuit__accroche { color: #111; }
    .circuit__chiffres { margin: 3pt 0 6pt; font-size: 9.5pt; color: #111; }
    .circuit__lettre, .circuit__rando-titre[data-lettre]::before { width: 15pt; height: 15pt; margin-right: 5pt; font-size: 9pt; }
    .circuit__vues { gap: 10pt; margin-top: 12pt; justify-content: flex-start; }
    .circuit__vues li { flex: 0 0 calc((100% - 30pt) / 4); break-inside: avoid; }
    .circuit__vues a { font-size: 9.5pt; color: #111; }

    /* Tableau : nouvelle page, toutes les colonnes */
    .circuit__tableau-zone { break-before: page; margin-top: 0; }
    .circuit__tableau-cadre { background: #fff; border-color: #ccc; border-radius: 8px; overflow: visible; }
    .circuit__tableau { font-size: 9.5pt; line-height: 1.3; }
    .circuit__tableau th { width: auto !important; padding: 5pt 6pt; font-size: 7.5pt; color: #444; }
    .circuit__tableau td { height: auto; padding: 3pt 6pt; }
    .circuit__t-option,
    .circuit__t-niveau { display: table-cell !important; }
    .circuit__tableau .circuit__t-avis { padding-left: 6pt; }
    .circuit__t-total td { background: none; }
    .circuit__etoile,
    .circuit__etoile::before,
    .circuit__etoile span::before { width: 10pt; height: 10pt; font-size: 10pt; line-height: 10pt; }

    /* Adresse de la page, en bas de la dernière feuille */
    .circuit__impression-pied { display: block; margin-top: 18pt; padding-top: 6pt; border-top: 1px solid #999; font-size: 11pt; break-inside: avoid; }
    .circuit__impression-pied p { margin: 0; }
}