/* ==========================================================================
   FICHE RANDONNÉE — Direction 1 « Carnet » v2 (28/09/2026)
   ==========================================================================
   D'après le dossier de conception design_handoff_fiche_randonnee :
   spécifications (composants et états), maquette 1280 / 390 px. Valeurs
   relevées dans la maquette ; couleurs, tailles, espacements, rayons et
   ombres par les tokens de hr-fiche-tokens.css, chargée juste avant.

   Points de rupture
     < 768 px    tailles mobiles (tokens) et variantes mobiles des composants
     < 1024 px   une colonne ; pastilles collantes
     ≥ 1024 px   grille 760 + 400 px, panneau collant

   Sommaire
     1. Socle           remise à zéro sous .hr-fiche
     2. Mise en page    conteneur, fil d'Ariane, grille
     3. En-tête         EnTeteFiche, photo d'en-tête
     4. Panneau         PanneauSticky, ParamsCles, ParamsSecondaires,
                        BoutonsAction, infobulles
     5. Contenu         introduction, BlocCarte, EncadreParcours, textes,
                        ListeAimer, InfosPratiques, Galerie, EncartAuteur
     6. Pleine largeur  Encadre (guide), Onglets, CarteRando
     7. Mobile          NavPastilles, variantes
     8. Impression
   ========================================================================== */

/* ── 1. Socle ─────────────────────────────────────────────────────────── */

/* Typographie de la fiche (décision de François, 28/09/2026 : deux familles
   au lieu de quatre). Roboto pour tout le texte ; Roboto Serif pour le seul
   H1 et le titre de l'encart auteur. Les libellés en capitales passent de
   Roboto Condensed à Roboto demi-gras, et une seule couleur secondaire
   remplace les deux gris des tokens. Texte courant : 15 px, interligne 1.5,
   #35434a (description, points forts, infos pratiques, encarts) ;
   l'introduction, un peu plus grande, à 16 px, interligne 1.6. */
.hr-fiche {
    --hr-font-label: var(--hr-font-texte);
    --hr-ls-label: .06em;
    --hr-texte-3: var(--hr-texte-2);
    --hr-corps: 400 15px/1.5 var(--hr-font-texte);
    --hr-chapeau: 400 16px/1.6 var(--hr-font-texte);
    background: var(--hr-papier);
    color: var(--hr-texte);
    font-family: var(--hr-font-texte);
    font-size: var(--hr-fs-texte);
    font-weight: 400;
    line-height: 1.5;
    /* L'écart avant le pied de page (24 px, 64 jugés trop) est la marge du
       pied de page : pied-carnet.css. */
}

/* :where(.hr-fiche) ne compte pas : ces règles ont la spécificité d'un
   élément, et les classes des composants les remplacent sans surenchère. */
:where(.hr-fiche) h1, :where(.hr-fiche) h2, :where(.hr-fiche) h3,
:where(.hr-fiche) p, :where(.hr-fiche) ul, :where(.hr-fiche) ol,
:where(.hr-fiche) dl, :where(.hr-fiche) dd, :where(.hr-fiche) figure {
    margin: 0;
    padding: 0;
}
/* Intertitre écrit dans un texte de fiche (<h3>, sous le h2 de la section ;
   GR20, étape 6) : un peu plus grand que le texte (15 → 17 px), 19 px
   au-dessus, 13 px dessous (la marge de 16 px du paragraphe suivant, moins 3 ;
   François, 07/10/2026) */
.hr-texte h3 { margin: 19px 0 -3px; font-size: 17px; line-height: 1.35; }

:where(.hr-fiche) ul, :where(.hr-fiche) ol {
    list-style: none;
    line-height: inherit;
}

:where(.hr-fiche) a {
    color: var(--hr-petrole);
    transition: color var(--hr-transition);
}

:where(.hr-fiche) a:hover {
    color: var(--hr-petrole-fonce);
}

.hr-fiche a:focus-visible,
.hr-fiche button:focus-visible,
.hr-fiche summary:focus-visible,
.hr-fiche [tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--hr-focus);
    border-radius: 2px;
}

.hr-fiche img {
    display: block;
    max-width: 100%;
}

.hr-icone {
    width: 1em;
    height: 1em;
    flex: none;
}

.hr-sr,
.hr-fiche .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.hr-mobile { display: none; }

@media screen and (max-width: 767px) {
    .hr-bureau { display: none; }
    .hr-mobile { display: inline; }
}

/* Titres H2 et H3 : ceux de l'ancienne fiche (décision de François,
   28/09/2026), relevés dans Chrome sur la version en ligne : Roboto gras,
   interligne 1.3, #333 ; H2 à 26 px (.titre-rando-h2), H3 à 22 px
   (.titre-rando-h3), mêmes tailles sur mobile. */
.hr-h2 {
    font-family: var(--hr-font-texte);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    color: #333;
}

.hr-titre-lien {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--hr-sp-4);
}

.hr-titre-lien > a {
    flex: none;
    font-size: 14px;
    font-weight: 500;
}

/* Avatar de l'auteur (initiale) */
.hr-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--hr-r-rond);
    background: var(--hr-petrole);
    color: #fff;
    font: 700 13px var(--hr-font-texte);
}

.hr-avatar--grand {
    width: 64px;
    height: 64px;
    font: 600 24px var(--hr-font-titre);
}

/* Boutons (BoutonsAction, guide régional) */
.hr-bouton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--hr-sp-2);
    height: 48px;
    padding: 0 var(--hr-sp-4);
    border-radius: var(--hr-r-sm);
    font: 700 14px var(--hr-font-texte);
    letter-spacing: .06em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--hr-transition), color var(--hr-transition), border-color var(--hr-transition);
}

.hr-bouton .hr-icone { font-size: 16px; }
.hr-bouton svg:not(.hr-icone) { width: 22px; height: 22px; flex: none; }
/* Berline de « Y aller » : 41 px de large (22 px au départ, +70 %, +20 %,
   −10 % ; François, 28 et 29/09/2026). Son dessin n'occupe que le centre de son cadre
   (viewBox de la production), d'où les marges négatives. Sélecteur aussi fort
   que « .hr-bouton svg:not(.hr-icone) », et placé après : il la bloquait à
   22 px. */
.hr-bouton svg.hr-bouton__voiture { width: 41px; height: 25px; flex: none; margin: 0 -4px 0 -10px; }

.hr-fiche .hr-bouton--gpx,
.hr-bouton--gpx {
    background: var(--hr-vert-texte);
    color: #fff;
}

.hr-fiche .hr-bouton--gpx:hover,
.hr-bouton--gpx:hover {
    background: var(--hr-vert-texte-survol);
    color: #fff;
}

.hr-fiche .hr-bouton--aller,
.hr-bouton--aller {
    border: 1.5px solid var(--hr-petrole);
    color: var(--hr-petrole);
    background: var(--hr-surface);
}

.hr-fiche .hr-bouton--aller:hover,
.hr-bouton--aller:hover {
    background: var(--hr-petrole-pale);
    color: var(--hr-petrole-fonce);
}

.hr-fiche .hr-bouton--plein {
    background: var(--hr-petrole);
    color: #fff;
    letter-spacing: 0;
}

.hr-fiche .hr-bouton--plein:hover {
    background: var(--hr-petrole-fonce);
    color: #fff;
}

.hr-bouton:focus-visible {
    outline: none;
    box-shadow: var(--hr-focus);
}

/* ── 2. Mise en page ──────────────────────────────────────────────────── */

.hr-fiche__conteneur {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--hr-sp-10);
}

/* Fil d'Ariane (ordinateur) ; lien retour « ‹ Norvège » (mobile) */
.hr-ariane {
    padding-top: 22px;
    font-size: 14px;
    color: var(--hr-texte-2);
}

/* Texte continu et non flex : un élément long (le nom de la fiche) se
   coupe mot à mot au lieu de passer entier à la ligne (François, 28/09/2026). */
.hr-ariane__liste li { display: inline; }

.hr-ariane__liste li + li::before {
    content: "›";
    margin: 0 var(--hr-sp-2);
}

.hr-ariane__liste a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.hr-ariane__liste [aria-current] {
    color: var(--hr-encre);
}

.hr-fiche__grille {
    display: flex;
    flex-direction: column;
    gap: var(--hr-sp-8);
    /* Écart visible entre le fil d'Ariane et le titre : 43 px avec 22 px de
       marge, jugé trop grand, puis 32 px avec 11 px, jugé trop serré
       (François, 28/09/2026) : 16 px donnent 37 px. */
    margin-top: 16px;
}

@media (min-width: 1024px) {
    /* Un seul balisage : le panneau en colonne droite sur toute la hauteur,
       les autres blocs empilés à gauche. Pas de row-gap : le panneau s'étend
       sur des rangées vides, qui ne doivent pas ajouter d'espace. */
    .hr-fiche__grille {
        display: grid;
        /* Colonnes proportionnelles (19/10) : 760 + 400 px à pleine largeur,
           et les deux rétrécissent ensemble sur un petit écran (la droite
           gardait 400 px, et la gauche tombait à 504 px à 1 024 px). */
        grid-template-columns: minmax(0, 19fr) minmax(300px, 10fr);
        column-gap: var(--hr-gouttiere);
        row-gap: 0;
        align-items: start;
    }

    .hr-fiche__grille > * {
        grid-column: 1;
    }

    .hr-fiche__grille > * + * {
        margin-top: var(--hr-sp-8);
    }

    /* Colonne du panneau : 40 premières rangées de la colonne de droite,
       étirée sur leur hauteur. Le panneau y colle, sans pouvoir descendre
       jusqu'aux blocs pleine largeur placés après (encadré, section du bas). */
    .hr-fiche__grille > .hr-panneau-colonne {
        grid-column: 2;
        grid-row: 1 / span 40;
        align-self: stretch;
        margin-top: 0;
    }

    .hr-fiche__grille > .hr-panneau-colonne + * {
        margin-top: var(--hr-sp-8);
    }

    /* Encadré, section du bas, pied d'impression : pleine largeur, sous les
       deux colonnes (rangée 41 et suivantes) */
    .hr-fiche__grille > .hr-encadre,
    .hr-fiche__grille > .hr-suite,
    .hr-fiche__grille > .hr-impression-pied { grid-column: 1 / -1; }
    .hr-fiche__grille > .hr-encadre { margin-top: 48px; }
    .hr-fiche__grille > .hr-suite { margin-top: 52px; }

    /* Barre de pastilles : 12 px sous la photo, 20 px au-dessus du texte
       (François, 29/09/2026). Après la règle de la colonne du panneau, qui la
       précède dans le HTML et vise le même élément avec le même poids. */
    .hr-fiche__grille > .hr-pastilles {
        margin-top: 12px;
    }

    .hr-fiche__grille > .hr-pastilles + * {
        margin-top: 20px;
    }

    /* Plus d'air autour de certains blocs (François, 28/09/2026) : 32 px
       partout, sauf présentation → carte et infos pratiques → photos (40),
       photos → encart auteur (42), et au-dessus des questions fréquentes (42). */
    .hr-fiche__grille > .hr-carte,
    .hr-fiche__grille > .hr-galerie-section { margin-top: 40px; }
    .hr-fiche__grille > .hr-auteur { margin-top: 42px; }
    .hr-fiche__grille > .hr-fiche__faq { margin-top: 49px; }   /* 42 + 7 (François, 30/09/2026) */

    /* Titre « D'autres randonnées… » → onglets : 26 px au lieu de 20 */
    .hr-suite > .hr-titre-lien { margin-bottom: 6px; }

    /* Encadré du guide régional : 50 px de retrait de chaque côté */
    .hr-encadre { margin-left: 50px; margin-right: 50px; }
}

@media screen and (max-width: 1023px) {
    /* Une colonne : la grille devient transparente et ses blocs, avec le fil
       d'Ariane, l'encadré du guide et la section du bas, forment une seule
       colonne dans le conteneur. Les pastilles collantes y restent alors
       jusqu'au bas de la page (François, 29/09/2026 ; collées dans la grille,
       elles partaient avec elle, avant la section du bas). Écarts inchangés :
       l'écart de la colonne (32 px) remplace la marge de la grille, et les
       marges de l'encadré et de la section du bas en sont diminuées. */
    .hr-fiche__conteneur {
        display: flex;
        flex-direction: column;
        gap: var(--hr-sp-8);
        max-width: calc(var(--hr-col-principale) + 2 * var(--hr-sp-10));
    }

    .hr-fiche .hr-fiche__grille { display: contents; }

    .hr-ariane { margin-bottom: -16px; }   /* 16 px jusqu'au titre, comme la marge de la grille */
    .hr-fiche__grille > .hr-encadre { margin: 16px 0 0; }   /* 48 px au total */
    .hr-fiche__grille > .hr-suite { margin: 20px 0 0; }     /* 52 px au total */
}

/* ── 3. En-tête ───────────────────────────────────────────────────────── */

.hr-fiche-tete {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hr-fiche-tete__titre {
    font-family: var(--hr-font-titre);
    font-size: var(--hr-fs-h1);
    font-weight: 600;
    line-height: var(--hr-lh-h1);
    letter-spacing: -.01em;
    color: var(--hr-encre);
    /* Coupure ordinaire : la première ligne se remplit au maximum
       (« Randonnée de Haukland / à Uttakleiv »), sans équilibrage. */
}

.hr-fiche-tete__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    color: var(--hr-texte-2);
}

.hr-fiche-tete__auteur,
.hr-fiche-tete__note {
    display: flex;
    align-items: center;
    gap: var(--hr-sp-2);
}

.hr-fiche-tete__note { gap: 6px; }

.hr-fiche-tete__meta b {
    color: var(--hr-encre);
    font-weight: 700;
}

/* PDF de la fiche : au bout de la ligne de l'auteur, poussé à droite sous le
   cœur, au même dessin que lui (rond, bordé) ; le cœur reste seul au bout du
   titre (François, 09/10/2026) */
.hr-fiche-tete__pdf { display: inline-flex; margin-left: auto; }
.hr-fiche-tete__pdf .hr-pdf { display: inline-grid; place-items: center; width: 40px; height: 40px; margin: -6px 0; border: 1px solid var(--hr-bordure); border-radius: 50%; background: var(--hr-surface); color: var(--hr-encre); transition: transform .12s; }
.hr-fiche-tete__pdf .hr-pdf:hover { transform: scale(1.06); color: var(--hr-petrole); }
.hr-fiche-tete__pdf .hr-pdf:focus-visible { outline: 2px solid var(--hr-petrole); outline-offset: 2px; }
.hr-fiche-tete__pdf svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Avec la version A4 : un petit menu « PDF format téléphone / À imprimer (A4) » (09/10/2026) */
.hr-pdf-menu { position: relative; }
.hr-pdf-menu > summary { list-style: none; cursor: pointer; }
.hr-pdf-menu > summary::-webkit-details-marker { display: none; }
.hr-pdf-menu[open] > summary { color: var(--hr-petrole); border-color: var(--hr-petrole); }
.hr-pdf-menu__panneau { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; display: grid; gap: 2px; width: 250px; padding: 6px;
    border: 1px solid var(--hr-bordure); border-radius: var(--hr-r-md); background: var(--hr-surface); box-shadow: 0 8px 28px rgba(0, 0, 0, .16); }
.hr-pdf-menu__panneau a { display: block; padding: 9px 12px; border-radius: var(--hr-r-sm); color: var(--hr-encre); text-decoration: none; }
.hr-pdf-menu__panneau a:hover, .hr-pdf-menu__panneau a:focus-visible { background: var(--hr-filet); }
.hr-pdf-menu__panneau b { display: block; font-size: 14px; font-weight: 600; }
.hr-pdf-menu__panneau small { display: block; font-size: 12.5px; color: var(--hr-texte-3); }

.hr-fiche-tete__sep {
    width: 1px;
    height: 16px;
    background: #d8d2c7;
}

.hr-etoiles {
    color: var(--hr-petrole);
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 1;
}

.hr-etoiles__vide { color: var(--hr-filet-froid); }

.hr-etoiles__demie {
    background: linear-gradient(90deg, var(--hr-petrole) 50%, var(--hr-filet-froid) 50%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hr-etoiles__papier { display: none; }

/* Photo d'en-tête : 1 grande + 2 petites (≥ 3 photos), sinon image seule.
   La grande garde ses proportions, jamais recadrée (décision de François,
   28/09/2026 ; les 388 sont en paysage, de 4:3 à 16:9) : c'est elle qui fixe
   la hauteur, et les deux petites se recadrent pour la remplir. */
.hr-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
}

.hr-hero--composee {
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--hr-sp-2);
}

.hr-hero__principale,
.hr-hero__petite {
    display: block;
    min-height: 0;
    overflow: hidden;
    background: #dcd8cf;
    border-radius: var(--hr-r-sm);
}

.hr-hero--composee .hr-hero__principale {
    grid-row: 1 / span 2;
    border-radius: var(--hr-r-sm) 0 0 var(--hr-r-sm);
}

.hr-hero__petite:nth-of-type(2) { border-radius: 0 var(--hr-r-sm) 0 0; }
.hr-hero__petite:nth-of-type(3) { border-radius: 0 0 var(--hr-r-sm) 0; }

.hr-fiche .hr-hero__image {
    width: 100%;
    height: auto;                /* proportions de width/height */
}

/* Les petites ne comptent pas dans la hauteur : elles remplissent leur case */
.hr-hero__petite { position: relative; }

.hr-fiche .hr-hero__petite .hr-hero__image {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
}

.hr-fiche .hr-hero__compteur {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: var(--hr-sp-2) var(--hr-sp-3);
    border-radius: 20px;
    background: var(--hr-surface);
    color: var(--hr-encre);
    font: 500 13px var(--hr-font-texte);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    transition: box-shadow var(--hr-transition);
}

.hr-fiche .hr-hero__compteur:hover {
    color: var(--hr-encre);
    box-shadow: var(--hr-om-survol);
}

/* ── 4. Panneau ───────────────────────────────────────────────────────── */

.hr-panneau {
    background: var(--hr-surface);
    border: 1px solid var(--hr-bordure);
    border-radius: var(--hr-r-lg);
    box-shadow: var(--hr-om-panneau);
}

/* Collant tant qu'il tient dans la fenêtre. La spécification coupait à
   760 px de haut, soit la plupart des portables alors que le panneau n'en
   mesure que ~560 : fiche-carnet.js pose --libre quand il ne tient pas. */
/* Petit écran d'ordinateur (colonne de droite de 300 à 390 px) : panneau
   resserré, pour que « Difficile ⓘ » tienne sur une ligne. */
@media (min-width: 1024px) and (max-width: 1199px) {
    /* .hr-panneau devant : ces règles précèdent les règles de base dans la feuille */
    .hr-panneau .hr-params-cles__case { padding: var(--hr-sp-4); }
    .hr-panneau .hr-params-cles__valeur { font-size: 22px; }
    .hr-panneau .hr-params-sec { padding: var(--hr-sp-4); }
    .hr-panneau .hr-panneau__bloc--actions { padding: var(--hr-sp-4); }
}

.hr-params-cles__fin { white-space: nowrap; }   /* dernier mot et ⓘ restent ensemble */

@media (min-width: 1024px) {
    .hr-panneau:not(.hr-panneau--libre) {
        position: sticky;
        top: calc(var(--hr-en-h, 0px) + var(--hr-sticky-top));
    }
}

/* ParamsCles : grille 2 × 2 */
.hr-params-cles {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.hr-params-cles__case {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--hr-sp-5) 22px;
    border-bottom: 1px solid var(--hr-filet);
    border-right: 1px solid var(--hr-filet);
    min-width: 0;
}

.hr-params-cles__case:nth-child(2n) { border-right: 0; }

.hr-params-cles__libelle {
    font: 600 var(--hr-fs-label) var(--hr-font-label);
    letter-spacing: var(--hr-ls-label);
    text-transform: uppercase;
    color: var(--hr-texte-3);
}

.hr-params-cles__valeur {
    font: 700 var(--hr-fs-chiffre)/1.05 var(--hr-font-texte);
    letter-spacing: -.01em;
    color: var(--hr-petrole);
    font-variant-numeric: tabular-nums;
}

.hr-params-cles__unite--suivie { margin-right: 3px; }   /* « 6 h 30 » : 3 px de chaque côté */

.hr-params-cles__unite {
    margin-left: 3px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
}


.hr-params-cles__nuance {   /* « à très difficile » */
    color: var(--hr-petrole);
    font-size: 14px;
    font-weight: 500;
}

/* Barre de difficulté, au style du tableau du pays (à l'essai, François,
   30/09/2026) : pleins, demi-carré « entre deux », carrés entourés « plage » */
.hr-params-cles__barre { margin: 0; line-height: 0; }
.hr-niveau { display: inline-flex; gap: 3px; vertical-align: middle; }
.hr-niveau b { width: 10px; height: 10px; border-radius: 2px; background: var(--hr-bordure); }
.hr-niveau b.on { background: var(--hr-petrole); }
.hr-niveau b.demi { background: linear-gradient(90deg, var(--hr-petrole) 50%, var(--hr-bordure) 50%); }
.hr-niveau b.plage { background: #fff; box-shadow: inset 0 0 0 1.5px var(--hr-petrole); }

.hr-params-cles__sous {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--hr-fs-legende);
    color: var(--hr-texte-2);
}

/* ParamsSecondaires : 2 colonnes */
.hr-params-sec {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Colonne de gauche de haut en bas, puis colonne de droite ;
       --hr-lignes est écrit par le PHP (moitié des lignes, arrondie). */
    grid-template-rows: repeat(var(--hr-lignes, 4), auto);
    grid-auto-flow: column;
    gap: 14px var(--hr-sp-4);
    padding: 18px 22px;
    border-bottom: 1px solid var(--hr-filet);
}

.hr-params-sec__ligne {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hr-params-sec__libelle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;   /* légende (12 px) → 13 ; valeurs 14 → 15 (François, 07/10/2026) */
    color: var(--hr-texte-3);
}

.hr-params-sec__valeur {
    font-size: 15px;
    font-weight: 500;
    color: var(--hr-encre);
    overflow-wrap: anywhere;
}
/* Coordonnées du départ : taille d'avant, sur une ligne (15 px les coupait
   en deux dans une colonne de 128 px, à 1 024 px de large) */
.hr-params-sec__ligne--depart .hr-params-sec__valeur { font-size: 14px; }

/* BoutonsAction */
.hr-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.hr-actions--sans-gpx { grid-template-columns: 1fr; }

/* GPX et Y aller un peu plus grands que les autres boutons (François,
   28/09/2026) : texte 16 px au lieu de 14, icône GPX 24 px au lieu de 22. */
.hr-actions .hr-bouton { font-size: 16px; }
.hr-actions .hr-bouton--gpx svg:not(.hr-icone) { width: 24px; height: 24px; }

.hr-panneau__bloc--actions { padding: 18px 22px; }

/* Infobulles : bouton ⓘ + .hr-tip (fiche-carnet.js pose data-open) */
.hr-tip-ancre {
    position: relative;
    display: inline-flex;
}

.hr-tip-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: -4px;
    padding: 0;
    border: 0;
    border-radius: var(--hr-r-rond);
    background: none;
    color: var(--hr-texte-3);
    font-size: 16px;
    cursor: pointer;
    transition: color var(--hr-transition);
}

.hr-tip-bouton:hover,
.hr-tip-ancre[data-open] .hr-tip-bouton {
    color: var(--hr-petrole);
}

.hr-tip {
    display: none;
    position: absolute;
    z-index: 30;
    left: 50%;
    bottom: calc(100% + 10px);
    width: 250px;
    padding: 10px 12px;
    transform: translateX(-50%);
    border: 1px solid #c5dbe5;
    border-radius: var(--hr-r-sm);
    /* Fond bleu très pâle et texte foncé (le fond encre était trop sombre,
       François, 29/09/2026) */
    background: var(--hr-petrole-pale);
    box-shadow: 0 6px 20px rgba(28, 42, 49, .16);
    color: var(--hr-encre);
    font: 400 13px/1.45 var(--hr-font-texte);
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    white-space: normal;
}

.hr-tip::before,
.hr-tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: calc(50% - 7px);
    border: 7px solid transparent;
    border-top-color: #c5dbe5;           /* liseré de la flèche */
}

.hr-tip::after {
    left: calc(50% - 6px);
    border-width: 6px;
    border-top-color: var(--hr-petrole-pale);
}

/* Une bulle au bord du panneau s'aligne sur son bouton plutôt que de déborder */
.hr-tip--gauche { left: -8px; transform: none; }
.hr-tip--gauche::before { left: 9px; }
.hr-tip--gauche::after { left: 10px; }
.hr-tip--droite { left: auto; right: -8px; transform: none; }
.hr-tip--droite::before { left: auto; right: 9px; }
.hr-tip--droite::after { left: auto; right: 10px; }

/* Pas assez de place au-dessus (fiche-carnet.js) : sous le bouton, flèche
   vers le haut */
.hr-tip--bas {
    top: calc(100% + 10px);
    bottom: auto;
}

.hr-tip--bas::before,
.hr-tip--bas::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
}

.hr-tip--bas::before { border-bottom-color: #c5dbe5; }
.hr-tip--bas::after { border-bottom-color: var(--hr-petrole-pale); }

.hr-fiche .hr-tip a {
    color: var(--hr-petrole);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hr-fiche .hr-tip a:hover { color: var(--hr-petrole-fonce); }

.hr-tip-ancre[data-open] .hr-tip { display: block; }

/* Sans script : le focus ouvre la bulle */
.hr-fiche:not(.hr-fiche--js) .hr-tip-ancre:focus-within .hr-tip { display: block; }

/* ── 5. Contenu ───────────────────────────────────────────────────────── */

/* Introduction, description et difficultés : texte courant. (L'Arial 15 px
   #666 de l'ancienne fiche, repris un temps, n'était que le réglage par
   défaut du thème Divi.) */
.hr-intro,
.hr-texte {
    font: var(--hr-corps);
    color: var(--hr-texte);
}

.hr-intro { font: var(--hr-chapeau); }

.hr-intro > * + *,
.hr-texte > * + * {
    margin-top: var(--hr-sp-4);
}

.hr-intro strong, .hr-intro b,
.hr-texte strong, .hr-texte b {
    font-weight: 700;
}

/* Encadré : un paragraphe écrit <p class="encadre"> dans le texte de la
   fiche (« Important : … »), le même que dans le Top 5 (François,
   01/10/2026). Pas dans les infos pratiques, où « Important » est une
   rubrique */
.hr-fiche .hr-intro .encadre,
.hr-fiche .hr-texte:not(.hr-infos__libre) .encadre {
    padding: 12px 16px;
    border: 1px solid var(--hr-filet-froid);
    border-radius: var(--hr-r-md);
    background: var(--hr-surface);
    font: 400 15px/1.6 var(--hr-font-texte);
    color: var(--hr-texte);
}

.hr-section-texte {
    display: flex;
    flex-direction: column;
    gap: var(--hr-sp-4);
}

.hr-texte a,
.hr-intro a,
.hr-infos__texte a,
.hr-aimer a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.hr-texte ul {
    padding-left: 1.2em;
    list-style: disc;
}

/* BlocCarte : la carte et le profil de bloc_carte_rando() (450 px de haut,
   profil de 200 px : hr-carte-rando.css et les réglages de la fonction), dans
   un contour. Carte 2/3, « Sur le parcours » 1/3 (décision de François,
   28/09/2026) ; le profil prend la largeur de la carte. Sans encadré, la
   carte garde ses 2/3. */
.hr-carte {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    background: var(--hr-surface);
    border: 1px solid var(--hr-bordure);
    border-radius: var(--hr-r-md);
    overflow: hidden;
    break-inside: avoid;
}

.hr-carte--seule {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% * 2 / 3);
    margin-left: auto;           /* sans encadré, la carte est centrée */
    margin-right: auto;
}

.hr-carte__cadre { min-width: 0; }

/* À partir de 768 px, avec l'encadré, la carte de la production perd son
   titre bleu et son cadre (bordure, ombre, marge) : le bloc fournit le
   contour. Sans encadré, la carte garde la bordure de la production, sans
   titre ni ombre, centrée aux 2/3 (François, 29/09/2026). Sur mobile,
   voir plus bas. */
@media (min-width: 768px) {
    .hr-fiche .hr-carte:not(.hr-carte--seule) div.hr-carte-rando {
        border: 0;
        box-shadow: none;
        margin: 0;
    }

    .hr-fiche .hr-carte .map-title-integrated { display: none; }

    .hr-carte--seule {
        border: 0;
        border-radius: 0;
        background: none;
        overflow: visible;
    }

    .hr-fiche .hr-carte--seule div.hr-carte-rando { margin: 0; box-shadow: none; }
}

/* EncadreParcours (« Sur le parcours ») : option 2g de Claude Design
   (04/10/2026, _migration/design_handoff_entete_crete_parcours/) : même
   place, allégé ; intitulé en tête de ligne ; « (repère N) » remplacé par
   la pastille de la carte, départ / arrivée par leurs marqueurs.
   Aucun effet au survol : le lien avec la carte, ce sont les pastilles. */
.hr-parcours {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--hr-bordure);
}

.hr-parcours__titre {
    display: flex;
    flex-direction: column;
    gap: var(--hr-sp-2);
    padding: var(--hr-sp-4) var(--hr-sp-4) var(--hr-sp-1);
    /* H3 de l'ancienne fiche, en bleu comme « Remarques » (.titre-rando-h3) */
    font: 700 22px/1.3 var(--hr-font-texte);
    color: var(--hr-petrole);
}

.hr-parcours__titre::after {
    content: "";
    width: 36px;
    height: 3px;
    margin-bottom: var(--hr-sp-3);
    background: var(--hr-vert);
}

.hr-parcours__ligne {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: var(--hr-sp-2);
    align-items: start;
    padding: 10px 14px 10px 10px;
    border-top: 1px solid #eef1f3;
}

.hr-parcours__marque { display: flex; align-items: center; justify-content: center; height: 22px; }

.hr-parcours__carre { width: 8px; height: 8px; background: var(--hr-vert); }

.hr-parcours__corps {
    font: 500 15px/1.45 var(--hr-font-texte);
    color: var(--hr-encre);
    text-wrap: pretty;
}

.hr-parcours__libelle {
    margin-right: 6px;
    font: 600 12px/1 var(--hr-font-label);
    letter-spacing: var(--hr-ls-label);
    text-transform: uppercase;
    color: var(--hr-texte-2);
}

/* Pastilles : celles des repères de la carte (numéro), du départ et de
   l'arrivée (marqueurs de hr-carte-rando.js) */
.hr-pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 5px;
    box-sizing: border-box;
    border: 2px solid #fff;
    border-radius: var(--hr-r-rond);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    background: var(--hr-vert);
    color: #fff;
    font: 700 11px/1 var(--hr-font-texte);
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}
.hr-pastille svg { display: block; }
.hr-pastille--depart { width: 24px; padding: 0; background: var(--hr-vert-texte); }
.hr-pastille--arrivee { width: 24px; padding: 0; background: #fff; border-color: var(--hr-vert-texte); }

/* ListeAimer */
.hr-aimer {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 30px;
    border-radius: var(--hr-r-md);
    background: var(--hr-vert-pale);
}

.hr-aimer__titre {
    /* Ancien titre des points forts : Roboto gras 22 px. Vert foncé plutôt
       que #02c39a, qui n'atteint pas 3:1 sur le fond vert pâle. */
    font: 700 22px/1.3 var(--hr-font-texte);
    color: var(--hr-vert-texte);
}

.hr-aimer__liste {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hr-aimer__item {
    display: flex;
    align-items: flex-start;
    gap: var(--hr-sp-3);
    font: var(--hr-corps);
    color: var(--hr-texte);
}

.hr-aimer__coche {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: var(--hr-r-rond);
    background: var(--hr-vert-texte);
    color: #fff;
    font: 700 12px var(--hr-font-texte);
}

.hr-aimer__coche .hr-icone { font-size: 13px; stroke-width: 3; }

.hr-aimer--moins { background: var(--hr-surface); border: 1px solid var(--hr-bordure); }
.hr-aimer--moins .hr-aimer__titre { color: #333; font-size: 20px; }   /* ancien : 20 px */
.hr-aimer--moins .hr-aimer__coche { background: var(--hr-texte-3); }

/* InfosPratiques : liste à deux colonnes (i2) ; accordéons sur mobile */
.hr-infos {
    display: flex;
    flex-direction: column;
    gap: var(--hr-sp-4);
}

.hr-infos__liste {
    border-top: 2px solid var(--hr-petrole);
}

.hr-infos__rubrique {
    position: relative;
    /* --hr-infos-col : largeur des intitulés, 200 px au plus, réduite par
       fiche-carnet.js quand ils sont tous courts. */
    padding: var(--hr-sp-4) 4px var(--hr-sp-4) calc(var(--hr-infos-col, 200px) + 28px);
    border-bottom: 1px solid #e0dacf;
    min-height: 56px;
    break-inside: avoid;
}

.hr-infos__intitule {
    position: absolute;
    left: 4px;
    /* +3,5 px : même ligne de base que le texte (15 px, interligne 22,5)
       malgré une taille et un interligne plus petits ; mesuré dans Chrome. */
    top: calc(var(--hr-sp-4) + 3.5px);
    width: var(--hr-infos-col, 200px);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    list-style: none;
    font: 600 13px/1.45 var(--hr-font-label);
    letter-spacing: var(--hr-ls-label);
    text-transform: uppercase;
    color: var(--hr-petrole);
    pointer-events: none;
}

.hr-infos__intitule::-webkit-details-marker { display: none; }

.hr-infos__intitule::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    background: var(--hr-vert);
}

.hr-infos__texte {
    font: var(--hr-corps);
    color: var(--hr-texte);
    text-wrap: pretty;
}

.hr-infos__texte > * + * { margin-top: var(--hr-sp-2); }

/* Chapeau : paragraphe sans intitulé placé avant la première rubrique */
.hr-infos__chapeau {
    font: var(--hr-corps);
    color: var(--hr-texte);
}

.hr-infos__chapeau > * + * { margin-top: var(--hr-sp-2); }

/* Listes des remarques (Reinebringen : stationnement) : puces rétablies ; la
   marge négative écrite dans le texte (style="margin-bottom: -20px", héritée
   de WordPress) est neutralisée. */
.hr-infos__texte ul,
.hr-infos__texte ol {
    padding-left: 1.2em;
    margin-bottom: 0 !important;
}

.hr-infos__texte ul { list-style: disc; }
.hr-infos__texte ol { list-style: decimal; }

/* Ordinateur sans script : une rubrique fermée garde son texte visible
   (Chrome 131+, Safari 18.4+ ; ailleurs, fiche-carnet.js les ouvre). */
@media (min-width: 768px) {
    .hr-infos__rubrique::details-content {
        content-visibility: visible;
        block-size: auto;
    }
}

.hr-infos__libre { font: var(--hr-corps); }

/* FAQ (bloc existant, faq-accordion.css) : marges seulement */
/* FAQ (faq_fiche()) au style des infos pratiques (François, 30/09/2026) :
   titre .hr-h2, filet pétrole au-dessus de la liste, séparateurs clairs,
   carré vert devant chaque question. */
.hr-fiche__faq {
    padding-bottom: 5px;                        /* sous la dernière question (François, 30/09/2026) */
    display: flex;
    flex-direction: column;
    gap: var(--hr-sp-4);
}

.faq-accordion--rando {
    margin: 0;
    max-width: none;
    border-top: 2px solid var(--hr-petrole);
}

.faq-accordion--rando .faq-accordion__item { border-bottom: 1px solid #e0dacf; }
.faq-accordion--rando .faq-accordion__item:first-child { border-top: 0; }
/* Même écart sous le filet que les infos pratiques (16 px ; 14 px sur mobile) */
.faq-accordion--rando .faq-accordion__item:first-child > .faq-accordion__question { padding-top: var(--hr-sp-4); }

.faq-accordion--rando .faq-accordion__question h3 {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.faq-accordion--rando .faq-accordion__question h3::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 7px;                            /* centré sur la ligne de 22,5 px */
    background: var(--hr-vert);
}

.faq-accordion--rando .faq-accordion__answer { padding-left: calc(.5em + 20px); }

/* « + » / « − » des infos pratiques au lieu du chevron (François, 30/09/2026) */
.faq-accordion--rando .faq-accordion__question::after {
    content: "+";
    width: auto;
    height: auto;
    border: 0;
    transform: none;
    color: var(--hr-petrole);
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
}
.faq-accordion--rando .faq-accordion__item[open] > .faq-accordion__question::after { content: "−"; transform: none; }

.faq-accordion--rando .faq-accordion__question {
    font: 600 15px/1.5 var(--hr-font-texte);   /* même police que les infos pratiques (François, 30/09/2026) */
    color: var(--hr-texte);
    padding: .75em .5em;
}

.faq-accordion--rando .faq-accordion__answer {
    font: var(--hr-corps);                      /* comme .hr-infos__texte : 15 px, et non 17 */
    color: var(--hr-texte);
    padding-bottom: .9em;
}

@media screen and (max-width: 600px) {
    .faq-accordion--rando .faq-accordion__question { padding: .75em .3em; }
    .faq-accordion--rando .faq-accordion__item:first-child > .faq-accordion__question { padding-top: 14px; }
    .faq-accordion--rando .faq-accordion__answer { padding-bottom: .8em; }
}

/* Galerie : 8 vignettes, la 8e porte « +N » ; toutes restent dans le DOM */
.hr-galerie-section { gap: var(--hr-sp-4); }

.hr-fiche .hr-galerie {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--hr-sp-2);
    height: auto !important;
    margin: 0;
}

.hr-fiche .hr-galerie--peu {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.hr-fiche .hr-galerie .galerie__element {
    position: relative;
    inset: auto;
    width: auto !important;
    aspect-ratio: 3 / 2;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--hr-r-xs);
    overflow: hidden;
    background: #dcd8cf;
    box-shadow: none;
}

.hr-fiche .hr-galerie .galerie__element:nth-child(n + 9) { display: none; }

.hr-fiche .hr-galerie .galerie__lien {
    display: block;
    height: 100%;
    border: 0;
    border-radius: inherit;
}

.hr-fiche .hr-galerie .galerie__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--hr-transition);
}

.hr-fiche .hr-galerie .galerie__legende { display: none; }

/* Survol / focus : zoom léger et pictogramme ⤢ */
.hr-fiche .hr-galerie .galerie__lien::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 28px;
    height: 28px;
    border-radius: var(--hr-r-rond);
    background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305668d' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7'/%3E%3C/svg%3E") center / 14px no-repeat;
    opacity: 0;
    transition: opacity var(--hr-transition);
}

.hr-fiche .hr-galerie .galerie__lien:hover .galerie__image,
.hr-fiche .hr-galerie .galerie__lien:focus-visible .galerie__image {
    transform: scale(1.04);
}

.hr-fiche .hr-galerie .galerie__lien:hover::after,
.hr-fiche .hr-galerie .galerie__lien:focus-visible::after {
    opacity: 1;
}

.hr-fiche .hr-galerie .galerie__lien:focus-visible {
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--hr-petrole);
}

/* « +N » : porté par la figure (data-plus-bureau, data-plus-mobile) */
.hr-fiche .hr-galerie [data-plus-bureau]::before {
    content: attr(data-plus-bureau);
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(4, 74, 102, .72);
    color: #fff;
    font: 500 20px var(--hr-font-texte);
    pointer-events: none;
}

/* « +N » cliqué : toutes les photos, même grille (fiche-carnet.js). Plus
   spécifique que les règles qui masquent au-delà de la 8e (6e sur mobile). */
.hr-fiche .hr-galerie.hr-galerie--ouverte .galerie__element:nth-child(n) { display: block; }

.hr-fiche .hr-galerie.hr-galerie--ouverte [data-plus-bureau]::before,
.hr-fiche .hr-galerie.hr-galerie--ouverte [data-plus-mobile]::before { content: none; }

/* Flèche pour replier la galerie dépliée (fiche-carnet.js), à droite sous
   la grille, du même dessin que les flèches de pages */
.hr-galerie__replier {
    display: flex;
    justify-content: flex-end;   /* l'écart de la section (16 px) suffit */
}

.hr-galerie__replier[hidden] { display: none; }
.hr-galerie__replier .hr-rond-bouton { padding: 0; }

/* EncartAuteur */
.hr-auteur {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 0;
    border-top: 1px solid #e0dacf;
    border-bottom: 1px solid #e0dacf;
}

.hr-auteur__corps {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hr-auteur__titre {
    font: 600 17px/1.3 var(--hr-font-titre);
    color: var(--hr-encre);
}

.hr-auteur__texte {
    font: var(--hr-corps);
    color: var(--hr-texte);
}

.hr-auteur__liens {
    display: flex;
    gap: var(--hr-sp-4);
    font-size: 14px;
    font-weight: 500;
}

/* ── 6. Pleine largeur ────────────────────────────────────────────────── */

/* Encadre : guide régional */
.hr-encadre {
    display: flex;
    align-items: center;
    gap: var(--hr-sp-5);
    margin-top: var(--hr-sp-12);
    padding: 26px var(--hr-sp-8);
    background: var(--hr-surface);
    border: 1px solid var(--hr-bordure);
    border-radius: var(--hr-r-lg);
}

.hr-encadre__icone {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--hr-r-rond);
    background: var(--hr-vert-pale);
    color: var(--hr-vert-texte);
    font-size: 22px;
}

.hr-encadre__corps {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hr-encadre__texte {
    font: var(--hr-corps);
    color: var(--hr-texte);
}

.hr-encadre__texte strong { color: var(--hr-encre); }

.hr-encadre__pays {
    font-size: 14px;
    color: var(--hr-texte-2);
}

.hr-encadre__pays a { font-weight: 500; }

.hr-encadre__bouton { flex: none; padding: 0 var(--hr-sp-5); }

/* « D'autres randonnées » */
.hr-suite {
    display: flex;
    flex-direction: column;
    gap: var(--hr-sp-5);
    margin-top: 52px;
}

/* Onglets */
.hr-onglets__liste {
    display: flex;
    gap: 28px;
    border-bottom: 1px solid #e0dacf;
}

.hr-onglets__onglet {
    margin: 0 0 -1px;
    padding: 0 0 var(--hr-sp-3);
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--hr-texte-2);
    font: 500 15px var(--hr-font-texte);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--hr-transition), border-color var(--hr-transition);
}

.hr-onglets__onglet:hover {
    color: var(--hr-encre);
    border-bottom-color: var(--hr-filet-froid);
}

.hr-onglets__onglet[aria-selected="true"] {
    color: var(--hr-petrole);
    border-bottom-color: var(--hr-petrole);
}

.hr-onglets__panneau:focus-visible { outline: none; box-shadow: var(--hr-focus); border-radius: var(--hr-r-md); }

/* Carte à 640 px (440 dans la maquette) : les cartes de randonnée, plus
   étroites, ont des photos 3:2 d'environ 175 px de haut au lieu de 240
   (décision de François, 28/09/2026). */
.hr-suite__grille {
    display: grid;
    /* Proportions de la grille à 1 200 px (carte 640, vignettes 536) gardées
       en dessous : une carte fixe à 640 px écrasait les vignettes entre
       1 024 et 1 199 px (132 px de large à 1 024 ; François, 29/09/2026). */
    grid-template-columns: minmax(0, 640fr) minmax(0, 536fr);
    gap: var(--hr-sp-6);
}

.hr-suite__grille--sans-carte { grid-template-columns: minmax(0, 1fr); }

.hr-suite__carte {
    position: relative;
    min-height: 372px;
    align-self: stretch;
    margin: var(--hr-sp-6) 0;    /* un peu d'air au-dessus et au-dessous */
    border: 1px solid var(--hr-bordure);
    border-radius: var(--hr-r-md);
    overflow: hidden;
    background: #e9ecdc;
}

/* Carte régionale existante (carte-region.php) : ses tailles viennent des
   réglages passés par la fiche. Son titre bleu (hr-carte-region.css, comme
   en production) nomme l'onglet actif : long sur ordinateur, court sur
   mobile (fiche-carnet.js) ; la carte prend la hauteur restante. */
.hr-fiche .hr-suite__carte .hr-carte-region {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    max-width: none !important;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.hr-fiche .hr-suite__carte .map-title-integrated { flex: none; }

/* Sur ordinateur, un titre plus discret que celui de la production */
@media (min-width: 768px) {
    .hr-fiche .hr-suite__carte .map-title-integrated {
        padding: 4px 12px;
        font-size: 13px;
        font-weight: 500;
    }
}

.hr-fiche .hr-suite__carte .hr-map {
    flex: 1;
    min-height: 0;
    height: auto !important;
}

/* Pages de « À proximité » (fiche-carnet.js) */
article.hr-carte-rando[hidden] { display: none; }

.hr-suite__pages {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--hr-sp-3);
    margin-top: var(--hr-sp-3);
    font-size: 14px;
    color: var(--hr-texte-2);
    font-variant-numeric: tabular-nums;
}

.hr-rond-bouton,
.hr-suite__page-bouton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0 0 3px;
    border: 1.5px solid var(--hr-petrole);
    border-radius: var(--hr-r-rond);
    background: var(--hr-surface);
    color: var(--hr-petrole);
    font: 500 22px/1 var(--hr-font-texte);
    cursor: pointer;
    transition: background-color var(--hr-transition), color var(--hr-transition);
}

.hr-rond-bouton:hover,
.hr-suite__page-bouton:hover:not(:disabled) { background: var(--hr-petrole-pale); }

.hr-suite__page-bouton:disabled {
    border-color: var(--hr-bordure);
    color: var(--hr-bordure);
    cursor: default;
}

.hr-rond-bouton:focus-visible,
.hr-suite__page-bouton:focus-visible { outline: none; box-shadow: var(--hr-focus); }

/* Sous les cartes, la barre de pages (36 + 12 px) : la carte l'ignore pour
   rester centrée sur les vignettes. */
.hr-suite__grille:has(.hr-onglets__panneau:not([hidden]) .hr-suite__pages) .hr-suite__carte {
    margin-bottom: calc(var(--hr-sp-6) + 48px);
}

.hr-suite__cartes {
    display: grid;
    align-content: start;
    grid-template-columns: 1fr 1fr;
    gap: var(--hr-sp-4);
}

.hr-suite__grille--sans-carte .hr-suite__cartes { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Repères numérotés de la carte régionale (hr-carte-region.js) */
.hr-repere-numero,
.hr-carte-region .hr-map .leaflet-marker-icon.hr-repere-numero {
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--hr-petrole);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    color: #fff;
    font: 700 12px/1 var(--hr-font-texte);
}

/* ★ de la fiche : fond rouge, comme la maquette. Même spécificité que la
   règle du dessus, qui l'emporterait sinon. */
.hr-repere-numero--actif,
.hr-carte-region .hr-map .leaflet-marker-icon.hr-repere-numero--actif {
    background: var(--hr-trace);
    font-size: 14px;
}

/* Repère de la carte survolée dans « D'autres randonnées » (fiche-carnet.js) :
   plus grand, comme le Top 5 (28 → 36 px, centre inchangé) */
.hr-carte-region .hr-map .leaflet-marker-icon.hr-repere-numero--survol {
    width: 36px !important;
    height: 36px !important;
    margin: -18px 0 0 -18px !important;
    background: var(--hr-petrole-fonce);
    font-size: 15px;
}

/* CarteRando — .hr-carte-rando, comme dans la spécification. Le conteneur de
   la carte Leaflet porte la même classe (sur un <div>, hr-carte-rando.css) :
   les règles du bloc et de ses états visent donc article.hr-carte-rando. */
article.hr-carte-rando {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .75);   /* blanc adouci des encadrés sur le papier (François, 04/10/2026) */
    border: 1px solid var(--hr-bordure);
    border-radius: var(--hr-r-md);
    overflow: hidden;
    transition: box-shadow var(--hr-transition), transform var(--hr-transition);
}

.hr-carte-rando__media {
    position: relative;
    aspect-ratio: 3 / 2;         /* ratio des photos (décision de François, 28/09/2026) */
    overflow: hidden;
    background: #dcd8cf;
}

.hr-fiche .hr-carte-rando__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--hr-transition);
}

.hr-carte-rando__numero {
    position: absolute;
    left: 10px;
    top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 2px solid #fff;
    border-radius: var(--hr-r-rond);
    background: var(--hr-petrole);
    color: #fff;
    font: 700 12px var(--hr-font-texte);
}

.hr-carte-rando__corps {
    display: flex;
    flex-direction: column;
    padding: 14px var(--hr-sp-4);
}

/* Vignette des autres gabarits (pages construites, recherche ; choix A de
   François, 04/10/2026) : tête (région, note), nom en Roboto Serif, barre de
   difficulté et niveau, chiffres sur leur ligne ; la carte blanche reste. */
.hr-carte-rando__tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--hr-texte-2); }
.hr-carte-rando__region { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-carte-rando__tete .hr-etoiles { flex: none; font-size: 13px; letter-spacing: 0; }
.hr-carte-rando__note { display: none; }

.hr-carte-rando__titre { margin-top: 2px; font: 600 17px/1.25 var(--hr-font-titre); color: var(--hr-encre); }   /* espaces de l'accueil (référence) */

.hr-fiche .hr-carte-rando__lien {
    color: inherit;
    text-decoration: none;
}

/* Lien étendu à toute la carte */
.hr-carte-rando__lien::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--hr-r-md);
}

.hr-fiche .hr-carte-rando__lien:focus-visible { box-shadow: none; }
article.hr-carte-rando:has(.hr-carte-rando__lien:focus-visible) { box-shadow: var(--hr-focus); }

.hr-carte-rando__diff { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font: 500 13px var(--hr-font-texte); color: var(--hr-encre); }
.hr-carte-rando__ch { display: block; width: 100%; margin-top: 3px; font-weight: 400; color: var(--hr-texte-2); }   /* sa propre ligne, comme l'accueil */
.hr-carte-rando__type { display: inline-flex; align-items: center; gap: 6px; }
.hr-carte-rando__type::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #c99a06; }

article.hr-carte-rando:hover,
article.hr-carte-rando:focus-within {
    box-shadow: var(--hr-om-survol);
    transform: translateY(-2px);
}

article.hr-carte-rando:hover .hr-carte-rando__image,
article.hr-carte-rando:focus-within .hr-carte-rando__image {
    transform: scale(1.04);
}

article.hr-carte-rando:hover .hr-carte-rando__lien,
article.hr-carte-rando:focus-within .hr-carte-rando__lien {
    color: var(--hr-encre);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

@media (prefers-reduced-motion: reduce) {
    article.hr-carte-rando, .hr-carte-rando__image, .hr-galerie .galerie__image { transition: none; }
    article.hr-carte-rando:hover, article.hr-carte-rando:focus-within { transform: none; }
}

/* Impression seulement */
.hr-impression-pied { display: none; }

/* ── 7. Mobile et tablette ────────────────────────────────────────────── */

/* NavPastilles : sans panneau collant (< 1024 px) */
.hr-pastilles { display: none; }

/* Pastilles, communes aux deux barres (mobile sous 1 024 px, ordinateur
   au-dessus) */
.hr-pastilles::-webkit-scrollbar { display: none; }

.hr-fiche .hr-pastilles__pastille {
    flex: none;
    padding: 7px 14px;
    border: 1px solid #d8d2c7;
    border-radius: 18px;
    color: var(--hr-texte);
    font: 500 13px var(--hr-font-texte);
    transition: background-color var(--hr-transition), color var(--hr-transition), border-color var(--hr-transition);
}

.hr-fiche .hr-pastilles__pastille:hover {
    border-color: var(--hr-petrole);
    color: var(--hr-petrole);
}

.hr-fiche .hr-pastilles__pastille[aria-current="true"] {
    background: var(--hr-petrole);
    border-color: var(--hr-petrole);
    color: #fff;
}

/* Les ancres ne passent pas sous la barre collante */
.hr-fiche [id] { scroll-margin-top: 64px; }

/* Ordinateur : la même barre, sous la photo, dans la colonne principale ;
   collante jusqu'au bas de la page (la section du bas est dans la grille).
   Au-dessus des blocs pleine largeur, fiche-carnet.js l'élargit à toute la
   grille (--large). Sans « Paramètres », le panneau étant toujours visible. */
@media (min-width: 1024px) {
    .hr-pastilles {
        position: sticky;
        top: var(--hr-en-h, 0px);
        z-index: 1100;           /* au-dessus des calques de Leaflet (≤ 1000) */
        display: flex;
        gap: var(--hr-sp-2);
        padding: 10px 0;
        background: var(--hr-papier);
        border-bottom: 1px solid var(--hr-bordure);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        white-space: nowrap;
    }

    .hr-pastilles--large { width: var(--hr-largeur-grille); }

    .hr-fiche .hr-pastilles__pastille[data-hr-cible="parametres"] { display: none; }
}

@media (max-width: 1023px) {
    .hr-fiche .hr-pastilles__pastille[data-hr-cible="titre"] { display: none; }
}

/* Petit ordinateur : les sept pastilles tiennent dans la colonne (653 px de
   contenu pour 592 à 1 024 px) en resserrant rembourrage et écart */
@media (min-width: 1024px) and (max-width: 1199px) {
    .hr-pastilles { gap: 6px; }
    .hr-fiche .hr-pastilles__pastille { padding: 7px 10px; }
}


@media screen and (max-width: 1023px) {
    .hr-fiche .hr-panneau-colonne,
    .hr-fiche .hr-panneau {
        display: contents;
    }

    .hr-panneau__bloc--cles,
    .hr-panneau__bloc--sec {
        background: var(--hr-surface);
        border: 1px solid var(--hr-bordure);
        border-radius: var(--hr-r-lg);
        /* pas d'overflow: hidden : il coupait les infobulles au bord du cadre */
    }

    /* Ordre mobile : données clés, boutons, puis paramètres secondaires */
    .hr-panneau__bloc--actions { order: 1; padding: 0; }
    .hr-panneau__bloc--sec { order: 2; }
    .hr-fiche__grille > :not(.hr-fiche-tete):not(.hr-hero):not(.hr-panneau__bloc):not(.hr-panneau) { order: 3; }

    .hr-params-cles__case:nth-last-child(-n + 2):nth-child(odd),
    .hr-params-cles__case:nth-last-child(1) { border-bottom: 0; }

    .hr-params-sec { border-bottom: 0; }

    .hr-pastilles {
        position: sticky;
        top: var(--hr-en-h, 0px);
        z-index: 1100;           /* au-dessus des calques de Leaflet (≤ 1000) */
        display: flex;
        gap: var(--hr-sp-2);
        margin: 0 calc(-1 * var(--hr-sp-10));
        padding: 10px var(--hr-sp-10);
        background: var(--hr-papier);
        border-top: 1px solid var(--hr-bordure);
        border-bottom: 1px solid var(--hr-bordure);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        white-space: nowrap;
    }


    .hr-suite__grille { grid-template-columns: minmax(0, 1fr); }
    .hr-suite__carte,
    .hr-suite__grille:has(.hr-onglets__panneau:not([hidden]) .hr-suite__pages) .hr-suite__carte { order: 2; min-height: 240px; margin: 0; }
    .hr-suite__carte { height: 440px; }   /* 384 jugés un peu bas (François, 28/09/2026) */

    .hr-encadre__bouton { align-self: stretch; }
}

@media screen and (max-width: 767px) {
    .hr-fiche__conteneur { padding: 0 var(--hr-sp-4); }

    .hr-pastilles {
        margin: 0 calc(-1 * var(--hr-sp-4));
        padding: 10px var(--hr-sp-4);
    }

    .hr-ariane { padding-top: 14px; }

    /* Colonne mobile : écart de 20 px, comme la marge de la grille (fil
       d'Ariane → titre : 39 px visibles) ; encadré et section du bas à 32 et
       34 px. */
    .hr-fiche__conteneur { gap: var(--hr-sp-5); }
    .hr-ariane { margin-bottom: 0; }
    .hr-fiche__grille > .hr-encadre { margin-top: 12px; }
    .hr-fiche__grille > .hr-suite { margin-top: 14px; }

    .hr-fiche-tete { gap: 10px; }
    .hr-fiche-tete__titre { line-height: 1.1; }
    .hr-fiche-tete--long .hr-fiche-tete__titre { font-size: 28px; }
    .hr-fiche-tete__meta { gap: var(--hr-sp-2); font-size: 13px; }
    .hr-fiche-tete__sep { height: 12px; }   /* petit séparateur entre l'auteur et « Mon avis » */
    .hr-fiche-tete--pdf .hr-fiche-tete__date { display: none; }   /* la place de l'icône PDF : la ligne tient (François, 09/10/2026) */
    .hr-fiche-tete__pdf .hr-pdf { width: 38px; height: 38px; }
    .hr-fiche-tete .hr-avatar { width: 24px; height: 24px; font-size: 11px; }

    /* Photo pleine largeur, à ses proportions */
    .hr-hero,
    .hr-hero--composee {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        margin: -6px calc(-1 * var(--hr-sp-4)) 0;
    }

    .hr-hero__petite { display: none; }

    .hr-hero__principale,
    .hr-hero--composee .hr-hero__principale {
        grid-row: auto;
        border-radius: 0;
    }

    .hr-fiche .hr-hero__compteur {
        right: 12px;
        bottom: 12px;
        padding: 5px 10px;
        border-radius: 14px;
        font-size: 12px;
    }

    .hr-params-cles__case { gap: 4px; padding: 14px var(--hr-sp-4); }
    .hr-params-cles__libelle { font-size: 11px; }
    .hr-params-cles__unite { font-size: 13px; margin-left: 2px; }
    .hr-params-cles__sous { font-size: 11px; }

    .hr-params-sec { gap: var(--hr-sp-3) 14px; padding: 14px var(--hr-sp-4); }
    .hr-params-sec__libelle { font-size: 12px; }   /* 11 → 12, 13 → 14 (François, 07/10/2026) */
    .hr-params-sec__valeur { font-size: 14px; }

    .hr-tip { width: 220px; }

    /* Carte de la fiche sur mobile : exactement celle de la production
       (hr-carte-rando.css : titre bleu, bordure, ombre, 400 px, profil de
       180 px, 10 px de marge), sans le contour du bloc ni « Sur le parcours »
       (décisions de François, 28/09/2026). Avec la marge de la carte, 30 px
       la séparent de l'introduction au lieu de 20. */
    .hr-carte,
    .hr-carte--seule {
        grid-template-columns: minmax(0, 1fr);
        width: auto;
        margin-left: 0;          /* les marges automatiques empêcheraient */
        margin-right: 0;         /* la carte de s'étirer sur la colonne */
        border: 0;
        border-radius: 0;
        background: none;
        overflow: visible;
    }

    /* Avec un encadré (François, 29/09/2026) : « Sur le parcours » passe
       sous le profil, collé à lui (même bordure, même ombre), allégé (une
       ligne par rubrique) ; la carte perd son titre bleu. Sans encadré, la
       carte reste celle de la production. */
    .hr-carte .hr-parcours {
        margin-bottom: 10px;         /* la marge basse de la carte de production */
        border: 2px solid #ddd;
        border-top: 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        background: var(--hr-surface);
        position: relative;          /* recouvre l'ombre de la carte à la jonction */
        z-index: 1;
    }

    .hr-fiche .hr-carte:not(.hr-carte--seule) div.hr-carte-rando { margin-bottom: 0; }
    .hr-fiche .hr-carte:not(.hr-carte--seule) .map-title-integrated { display: none; }

    .hr-parcours__titre { gap: 6px; padding: 12px 14px 0; font-size: 18px; }
    .hr-parcours__titre::after { width: 28px; margin-bottom: var(--hr-sp-2); }
    .hr-parcours__ligne { padding: 9px 14px 9px 10px; }
    .hr-parcours__carre { width: 6px; height: 6px; }
    .hr-pastille { min-width: 22px; height: 22px; font-size: 10px; }
    .hr-pastille--depart,
    .hr-pastille--arrivee { width: 22px; }
    .hr-pastille--depart svg { width: 9px; height: 9px; }
    .hr-pastille--arrivee svg { width: 11px; height: 11px; }

    .hr-section-texte { gap: var(--hr-sp-3); }

    .hr-aimer { gap: 10px; padding: 18px; border-radius: var(--hr-r-lg); }
    .hr-aimer__liste { gap: 10px; }
    .hr-aimer__item { gap: 10px; }
    .hr-aimer__coche { width: 20px; height: 20px; font-size: 11px; }

    /* Infos pratiques en accordéons (<details>, la 1re ouverte) */
    .hr-infos { gap: 10px; }
    .hr-infos__liste { border-top: 0; }

    .hr-infos__rubrique {
        min-height: 0;
        padding: 0;
        border-top: 1px solid #e0dacf;
        border-bottom: 0;
    }

    .hr-infos__rubrique:last-child { border-bottom: 1px solid #e0dacf; }

    .hr-infos__intitule {
        position: static;
        width: auto;
        justify-content: space-between;
        align-items: center;
        padding: 14px 0;
        font: 700 15px var(--hr-font-texte);
        letter-spacing: 0;
        text-transform: none;
        color: var(--hr-petrole);   /* fermé ou ouvert, même bleu */
        pointer-events: auto;
        cursor: pointer;
    }

    .hr-infos__intitule::before { content: none; }

    .hr-infos__intitule::after {
        content: "+";
        color: var(--hr-petrole);
        font-size: 18px;
        font-weight: 500;
        line-height: 1;
    }

    .hr-infos__rubrique[open] .hr-infos__intitule { color: var(--hr-petrole); padding-bottom: 6px; }
    .hr-infos__rubrique[open] .hr-infos__intitule::after { content: "−"; }
    .hr-infos__texte { padding-bottom: 14px; }

    /* Galerie : 6 vignettes sur 2 colonnes */
    .hr-fiche .hr-galerie,
    .hr-fiche .hr-galerie--peu {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .hr-fiche .hr-galerie .galerie__element:nth-child(n + 7) { display: none; }
    .hr-fiche .hr-galerie [data-plus-bureau]::before { content: none; }

    .hr-fiche .hr-galerie [data-plus-mobile]::before {
        content: attr(data-plus-mobile);
        position: absolute;
        inset: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(4, 74, 102, .72);
        color: #fff;
        font: 500 18px var(--hr-font-texte);
        pointer-events: none;
    }

    /* Espaces (François, 28/09/2026) : présentation → carte 35, carte →
       description 34, description → points forts 28, points forts → infos
       27, infos → photos 40, photos → auteur 39, auteur → section du bas 34,
       titre du bas → onglets 19 px. */
    .hr-fiche__grille > .hr-carte { margin-top: 5px; }
    .hr-fiche__grille > #description { margin-top: 4px; }
    .hr-fiche__grille > .hr-aimer { margin-top: 8px; }
    .hr-fiche__grille > .hr-infos { margin-top: 7px; }
    .hr-galerie-section { margin-top: 20px; }
    .hr-fiche__faq { margin-top: 17px; }   /* 37 px au-dessus des questions fréquentes (+7, François, 30/09/2026) */
    .hr-auteur { align-items: flex-start; gap: 14px; padding: var(--hr-sp-4) 0; margin-top: 19px; }
    .hr-avatar--grand { width: 48px; height: 48px; font-size: 19px; }
    .hr-auteur__titre { font-size: 15px; }

    .hr-encadre {
        flex-direction: column;
        align-items: stretch;
        gap: var(--hr-sp-3);
        margin-top: var(--hr-sp-8);
        padding: 18px;
    }

    .hr-encadre__icone { display: none; }
    .hr-encadre__corps { display: contents; }
    .hr-encadre__bouton { order: 1; height: 46px; white-space: normal; text-align: center; }
    .hr-encadre__pays { order: 2; font-size: 13px; }

    .hr-suite { gap: 14px; margin-top: 34px; }
    .hr-suite > .hr-titre-lien { margin-bottom: 5px; }

    .hr-onglets__liste {
        gap: var(--hr-sp-5);
        margin-right: calc(-1 * var(--hr-sp-4));
        overflow-x: auto;
        /* Défilement horizontal seulement : sans cela, le soulignement de
           l'onglet actif (1 px sous la bande) la rendait aussi défilable de
           haut en bas, et les onglets « flottaient » au doigt. */
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .hr-onglets__liste::-webkit-scrollbar { display: none; }
    .hr-onglets__onglet { padding-bottom: 10px; font-size: 14px; }

    .hr-suite__cartes,
    .hr-suite__grille--sans-carte .hr-suite__cartes {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .hr-carte-rando__numero { left: 6px; top: 6px; width: 22px; height: 22px; font-size: 11px; }
    .hr-carte-rando__corps { padding: 10px; }
    .hr-carte-rando__tete { font-size: 12px; }
    .hr-carte-rando__tete .hr-etoiles { display: none; }
    .hr-carte-rando__note { display: inline; flex: none; font: 600 12px var(--hr-font-texte); color: var(--hr-petrole); }
    .hr-carte-rando__titre { font-size: 15.5px; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
    .hr-carte-rando__diff { gap: 6px; margin-top: 5px; font-size: 12.5px; }
    .hr-carte-rando__diff .hr-niveau b { width: 8px; height: 8px; border-radius: 1px; }

}

/* ── 8. Impression ────────────────────────────────────────────────────── */
/* Maquette retenue par François (05/10/2026, « 17b », après 17 essais en PDF
   A4) : le haut de page reprend la fiche à l'écran, le reste aéré ; 2 pages
   pour la plupart des fiches, 3 pour les plus longues (accepté : « je préfère
   aérer, quitte à ce que quelques fiches fassent 3 pages »). 11 pt, texte #111,
   bleu pétrole pour le titre, les titres de section, les chiffres clés, les
   coches et les étoiles.
     haut : titre (24 pt) et « Par François · Mon avis » sur toute la largeur ;
            photo principale (3:2) et deux miniatures à gauche, le panneau des
            chiffres à droite (sans boutons ni barres de difficulté) ; la
            présentation s'écoule dessous et reprend toute la largeur, ligne par
            ligne, dès la fin du panneau (flottants : la grille d'écran est
            défaite à l'impression) ;
     puis : carte (360 px, 420 sans parcours) et « Sur le parcours » centrés ;
            description (deux colonnes à partir de 600 signes, classe posée par
            carnet_description()) ; « Ce que vous allez aimer » ; infos
            pratiques ; adresse de la fiche.
   La carte est gardée à sa taille d'écran puis réduite à l'échelle :
   redessinée à la taille du papier, ses fonds n'auraient pas le temps de se
   charger. fiche-carnet.js écrit sa taille d'écran (--carte-l, --carte-h) et
   l'échelle (--carte-s). Ombres : une ombre floue s'imprime en rectangle gris
   (vu dans les PDF) ; le panneau et la carte ont une ombre nette (filet décalé),
   tout le reste aucune (pastilles de carte comprises). print.css (chargée
   après) masque déjà en-tête, pied de page et <nav>. Contrôle : PDF A4 par
   Chrome, voir docs/amelioration-design.md (« Impression »). */

@media print {
    .hr-fiche {
        background: #fff;
        color: #111;
        padding: 0;
        font-size: 11pt;
    }

    .hr-fiche *,
    .hr-fiche *::before,
    .hr-fiche *::after { box-shadow: none !important; text-shadow: none !important; filter: none !important; }

    .hr-fiche__conteneur { max-width: none; padding: 0; }
    .hr-fiche-tete__pdf { display: none !important; }   /* l'icône PDF n'a rien à faire sur papier */

    .hr-ariane,
    .hr-pastilles,
    .hr-actions,
    .hr-panneau__bloc--actions,
    .hr-tip-bouton,
    .hr-tip,
    .hr-hero__compteur,
    .hr-hero__petite:nth-of-type(n + 4),
    .hr-encadre,
    .hr-suite,
    .hr-fiche__faq,
    .hr-auteur,
    .hr-galerie-section,
    .hr-params-cles__barre,
    .hr-fiche-tete__date,
    .hr-fiche-tete__sep,
    .hr-etoiles__papier,
    .hr-carte .leaflet-control-container,
    .hr-carte .custom-attribution-button,
    .hr-carte .map-touch-instruction,
    .hr-carte .map-title-integrated,
    .hr-carte .hr-elev {
        display: none !important;
    }

    /* La grille d'écran est défaite : blocs dans l'ordre du document, photos et panneau en flottants */
    .hr-fiche__grille { display: block !important; margin: 0; }
    .hr-fiche__grille > * { margin: 0 0 16pt !important; }
    .hr-fiche__grille > .hr-hero { float: left; width: 60%; margin-bottom: 14pt !important; }
    .hr-panneau-colonne { float: right; width: calc(38% - 14pt); margin: 0 0 14pt 14pt !important; }
    .hr-intro { clear: left; margin-bottom: 22pt !important; }
    .hr-carte,
    .hr-section-texte,
    .hr-aimer,
    .hr-infos,
    .hr-impression-pied { clear: both; }

    /* Titre, auteur, note */
    .hr-fiche-tete { gap: 6pt; margin-bottom: 12pt !important; }
    .hr-fiche-tete__titre { font-size: 24pt; line-height: 1.12; }
    .hr-fiche-tete__meta { color: #111; font-size: 11pt; gap: 18pt; }
    .hr-fiche-tete .hr-avatar { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

    /* Bleu pétrole : titres, chiffres clés, coches, étoiles */
    .hr-fiche-tete__titre,
    .hr-h2,
    .hr-aimer__titre,
    .hr-params-cles__valeur,
    .hr-params-cles__unite,
    .hr-params-cles__sous,
    .hr-params-cles__nuance,
    .hr-aimer__coche,
    .hr-etoiles__ecran {
        color: var(--hr-petrole) !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    .hr-etoiles__vide { color: #ccc !important; }
    .hr-h2,
    .hr-aimer__titre { font-size: 14pt; }

    /* Photo principale (3:2) et ses deux premières miniatures, comme l'en-tête à l'écran */
    .hr-fiche__grille > .hr-hero { display: block !important; }
    .hr-hero__principale { display: block; }
    .hr-hero__principale img,
    .hr-hero__petite img { display: block; width: 100%; object-fit: cover; border-radius: 8px; }
    .hr-hero__principale img { height: auto; aspect-ratio: 3 / 2; }
    .hr-fiche__grille > .hr-hero--composee { display: grid !important; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 4pt; }
    .hr-hero--composee .hr-hero__principale { grid-row: 1 / 3; }
    .hr-hero--composee .hr-hero__petite { display: block; min-height: 0; }
    .hr-hero--composee .hr-hero__petite img { height: 100%; }

    /* Panneau des chiffres, comme à l'écran : coins arrondis, ombre nette */
    .hr-panneau {
        position: static !important;
        display: block !important;
        border: 1px solid #ddd;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 0 #e2e2e2 !important;
        break-inside: avoid;
    }
    .hr-panneau__bloc--cles { border-bottom: 1px solid #ddd; }
    .hr-params-cles { grid-template-columns: 1fr 1fr; }
    .hr-params-cles__case {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2pt;
        padding: 7pt 9pt;
        border-color: #ddd;
        border-right: 1px solid #ddd !important;
        border-bottom: 1px solid #ddd !important;
    }
    .hr-params-cles__case:nth-child(2n) { border-right: 0 !important; }
    .hr-params-cles__case:nth-child(n + 3) { border-bottom: 0 !important; }
    .hr-params-cles__case > * { margin: 0 !important; }
    .hr-params-cles__libelle { color: #111; font-size: 8.5pt; white-space: normal; }
    .hr-params-cles__valeur { font-size: 15pt; line-height: 1.15; }
    .hr-params-cles__unite { font-size: 10pt; }
    .hr-params-cles__sous { font-size: 11pt; }
    /* Autres chiffres : 2 colonnes remplies de haut en bas, comme à l'écran (--hr-lignes écrit par le PHP) */
    .hr-panneau .hr-params-sec { gap: 6pt 10pt; padding: 8pt 9pt; border-bottom: 0; }
    .hr-params-sec__libelle { color: #444; font-size: 10pt; }
    .hr-params-sec__valeur { color: #111; font-size: 11pt; }
    .hr-params-sec__ligne--depart .hr-params-sec__valeur { font-size: 9pt; white-space: nowrap; letter-spacing: -.01em; }

    /* Carte à sa taille d'écran, réduite ; « Sur le parcours » à droite ; le bloc centré */
    .hr-carte {
        display: grid !important;
        grid-template-columns: calc(var(--carte-l, 360px) * var(--carte-s, 1)) 230px;
        width: max-content !important;
        margin: 0 auto 24pt !important;
        border: 1px solid #ddd;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 0 #e2e2e2 !important;
        break-inside: avoid;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    .hr-carte--seule { grid-template-columns: calc(var(--carte-l, 420px) * var(--carte-s, 1)); }
    .hr-carte__cadre {
        width: calc(var(--carte-l, 360px) * var(--carte-s, 1)) !important;
        max-width: none;
        height: calc(var(--carte-h, 450px) * var(--carte-s, 1));
        overflow: hidden;
        padding: 0 !important;
        background: none !important;
    }
    .hr-carte .hr-carte-rando {
        width: var(--carte-l, 360px) !important;
        max-width: none !important;
        min-width: 0 !important;
        height: var(--carte-h, 450px) !important;
        margin: 0 !important;
        border: 0 !important;
        transform: scale(var(--carte-s, 1));
        transform-origin: 0 0;
    }
    .hr-parcours { border-top: 0; border-left: 1px solid #ddd; }
    .hr-parcours__titre { display: none; }
    .hr-parcours__liste { display: block; }
    .hr-parcours__ligne { padding: 3pt 6pt; border-color: #ddd; }
    .hr-parcours__carre { background: #999; }
    /* Repères de la carte : fond uni et sans ombre. Un dégradé devient un « motif »
       que la recompression du PDF perd, et l'ombre floue un carré gris : il ne
       restait que la pastille blanche, chiffre blanc sur blanc (PDF A4, 09/10/2026). */
    .hr-carte .hr-map .repere-marker { background: #00977f !important; box-shadow: none !important; text-shadow: none !important; }
    .hr-carte .hr-map .repere-marker::after { filter: none !important; }
    .hr-parcours__libelle,
    .hr-parcours__corps { color: #111; font-size: 10pt; line-height: 1.28; }

    /* Textes, aérés */
    .hr-intro,
    .hr-texte,
    .hr-infos__texte,
    .hr-aimer__item { color: #111; font-size: 11pt; line-height: 1.4; }
    .hr-intro > * + *,
    .hr-texte > * + * { margin-top: 8pt; }
    /* Des blocs, et non des colonnes flexibles : Safari (WebKit) ne coupe pas
       un conteneur flexible entre deux pages, il le repousse en entier à la
       suivante (la fiche Bláhnúkur, Skalli et Grænihryggur passait de 2 à
       3 pages ; François, 05/10/2026) */
    .hr-section-texte,
    .hr-infos,
    .hr-aimer { display: block; }
    .hr-section-texte > * + *,
    .hr-infos > * + * { margin-top: 9pt; }
    .hr-aimer > * + * { margin-top: 6pt; }
    .hr-texte--long { column-count: 2; column-gap: 14pt; }
    /* Safari (seul à connaître la police -apple-system-body) imprime mal les
       colonnes : la description y était tranchée au milieu d'une ligne en bas
       de page. Une seule colonne chez lui. */
    @supports (font: -apple-system-body) {
        .hr-texte--long { column-count: auto; }
        /* Safari ignore break-after: avoid : un titre restait seul en bas de
           page. Rallonge invisible de trois lignes, insécable : le titre
           passe à la page suivante s'il n'a pas de quoi être suivi. */
        .hr-fiche h2 { break-inside: avoid; }
        .hr-fiche h2::after { content: ""; display: block; height: 48pt; margin-bottom: -48pt; }
    }
    .hr-aimer { padding: 0; background: none; border: 0; }
    .hr-aimer__liste { gap: 5pt; }
    .hr-aimer__coche { width: auto; height: auto; margin: 0; background: none; }

    /* Infos pratiques : rubriques ouvertes, intitulé dans sa colonne (un intitulé long s'y coupe) */
    .hr-infos__liste { border-top: 1px solid #999; }
    .hr-infos__rubrique {
        display: grid !important;
        grid-template-columns: 104pt minmax(0, 1fr);
        column-gap: 8pt;
        padding: 5pt 0;
        border-color: #ccc;
        min-height: 0;
    }
    .hr-infos__rubrique > .hr-infos__texte { display: block !important; }
    .hr-infos__rubrique::details-content { content-visibility: visible; block-size: auto; }
    .hr-infos__intitule {
        position: static !important;
        width: auto;
        color: #111;
        font-size: 9.5pt;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    .hr-infos__intitule::before { background: #999; }
    .hr-infos__intitule::after { content: none !important; }

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

    /* Adresse de la fiche, en bas de la dernière page */
    .hr-impression-pied {
        display: block;
        padding-top: 6pt;
        border-top: 1px solid #999;
        color: #111;
        font-size: 11pt;
        break-inside: avoid;
    }
}