/* En-tête « Carnet » (refonte du design, 01/10/2026) : bandeau, barre,
   panneau Destinations (ordinateur) devenu tiroir (mobile), liste « À propos ».
   Valeurs de la maquette de Claude Design (_migration/design_handoff_entete_menu/
   README.md), couleurs et polices de hr-fiche-tokens.css. Balisage :
   fonctions/menu.php ; gestes : ressources/js/entete-carnet.js.
   Ordinateur à partir de 1 024 px, mobile en dessous.
   Aucune transition sauf le tiroir et l'en-tête qui se cache : dans Safari,
   les fondus font clignoter ce qui est posé par-dessus. Survols sous
   @media (hover: hover) : sur iPhone, l'élément qui arrive sous le doigt
   après un changement d'écran du tiroir restait « survolé ». */

.hr-en {
    /* Part avec la page : ne colle plus et ne revient plus en remontant (François, 03/10/2026) */
    position: relative;
    z-index: 1200;              /* au-dessus de Leaflet (1000) et des pastilles de la fiche (1100) */
    font-family: var(--hr-font-texte);
    font-weight: 400;
}

:where(.hr-en) a { text-decoration: none; }
:where(.hr-en) ul { list-style: none; margin: 0; padding: 0; }
:where(.hr-en) a,
:where(.hr-en) button { -webkit-tap-highlight-color: transparent; }
:where(.hr-en) button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
}
.hr-en a:focus-visible,
.hr-en button:focus-visible,
.hr-en input:focus-visible {
    outline: none;
    box-shadow: var(--hr-focus);
}
.hr-en__ic { flex: none; display: block; }

.hr-en__cadre {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--hr-sp-10);
    display: flex;
    align-items: center;
}

/* ── Bandeau ─────────────────────────────────────────────── */
.hr-en__bandeau {
    height: 32px;
    background: var(--hr-petrole-fonce);
    color: #dfeef4;
    font-size: 13px;
    line-height: 32px;
}
.hr-en__bandeau .hr-en__cadre { height: 100%; justify-content: space-between; gap: var(--hr-sp-5); }
.hr-en__devise { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Sélecteur FR / EN (bandeau) */
.hr-en__langues {
    display: flex;
    flex: none;
    padding: 2px;
    border-radius: var(--hr-r-rond);
    background: rgba(255, 255, 255, .12);
}
.hr-en__langues > * {
    height: 20px;
    padding: 0 8px;
    border-radius: var(--hr-r-rond);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 20px;
    color: #cfe3ea;
}
@media (hover: hover) { .hr-en__langues a:hover { color: #fff; } }
.hr-en__langues [aria-current] { background: #fff; color: var(--hr-petrole-fonce); }
@media (hover: hover) { .hr-en__langues [aria-current]:hover { color: var(--hr-petrole-fonce); } }
.hr-en__langues span { opacity: .45; cursor: default; }

/* ── Barre ───────────────────────────────────────────────── */
.hr-en__barre {
    position: relative;
    z-index: 2;
    height: 72px;
}
.hr-en__barre .hr-en__cadre { position: relative; z-index: 1; height: 100%; gap: var(--hr-sp-8); }

/* Ligne de crête (en-tête « Crête » 1m de Claude Design, 04/10/2026 ;
   balisage : entete_crete()). Le filet vert de 2 px (le blanc de la barre ne
   se détachait pas du papier, François, 01/10/2026) se soulève en un massif
   évidé, 16 px après le logo. Blanc sur les 56 px du haut, puis une bande
   transparente de 16 px qui ne porte que le ciel et la ligne : sous la ligne,
   la page paraît dans les sommets. L'ombre est un drop-shadow sur le ciel :
   elle suit la crête et assombrit aussi l'intérieur des sommets. Filtre
   statique, sans fondu (Safari). */
.hr-en__ciel {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(34, 49, 58, .10));
}
.hr-en__ciel::before {                       /* le ciel plein, au-dessus de la bande */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 16px;
    background: var(--hr-surface);
}
.hr-en__horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; display: flex; }
.hr-en__horizon > i { background: linear-gradient(var(--hr-surface) calc(100% - 2px), var(--hr-vert) 0); }
/* bord gauche du cadre + 40 de marge + 82 de logo (52 px de haut) + 16 */
.hr-en__horizon > i:first-of-type { flex: none; width: calc(max(0px, (100% - 1280px) / 2) + 138px); }
.hr-en__horizon > i:last-of-type { flex: 1; }
.hr-en__crete { display: block; flex: none; }
.hr-en__crete--m { display: none; }
.hr-en__crete-ciel { fill: var(--hr-surface); }
.hr-en__crete-trait { fill: none; stroke: var(--hr-vert); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* Panneau Destinations ouvert : barre et panneau ne font qu'un (ligne gardée
   sous « À propos », dont la liste ne couvre pas la largeur) */
.hr-en[data-ouvert="destinations"] .hr-en__ciel { filter: none; }
.hr-en[data-ouvert="destinations"] .hr-en__ciel::before { bottom: 0; }
.hr-en[data-ouvert="destinations"] .hr-en__horizon { visibility: hidden; }

/* Circuits et Top 5 : leur bloc est papier, mais le <body> reste blanc (ils
   finissent sur une section blanche, voir pied-carnet.css) ; sous le massif,
   on voyait le blanc assombri par l'ombre, une bande grise au-dessus du
   papier (François, 04/10/2026). La bande prend le papier de la page. */
body:has(> main > :is(.circuit, .top5)) .hr-en { background: linear-gradient(transparent calc(100% - 16px), var(--hr-papier) 0); }

/* Pages qui s'ouvrent sur une photo pleine largeur (pays, accueil, guides) :
   le haut de la photo passe sous la bande pour paraître dans les sommets. */
main > .pc:first-child > .pc-ouv--photo:first-child { margin-top: -16px; }

.hr-en__logo { display: block; flex: none; }
.hr-en__logo img { display: block; height: 52px; width: auto; }

.hr-en__nav { height: 100%; margin-left: 103px; }  /* 88 px chez Claude Design, + 15 (François, 04/10/2026) */
.hr-en__nav > ul { display: flex; height: 100%; }
.hr-en__entree { position: relative; height: 100%; }
.hr-en__bouton {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 500;
    color: var(--hr-encre);
    white-space: nowrap;
}
.hr-en .hr-en__bouton { color: var(--hr-encre); }
@media (hover: hover) { .hr-en .hr-en__bouton:hover { color: var(--hr-petrole); } }
.hr-en .hr-en__bouton[aria-expanded="true"] { color: var(--hr-petrole); }
.hr-en__bouton[aria-expanded="true"] { box-shadow: inset 0 -3px 0 var(--hr-vert); }
.hr-en__bouton[aria-expanded="true"] .hr-en__ic { transform: rotate(180deg); }
.hr-en__bouton:focus-visible { box-shadow: inset var(--hr-focus); }

/* Recherche */
.hr-en__chercher {
    display: flex;
    align-items: center;
    gap: var(--hr-sp-2);
    flex: 0 1 280px;
    height: 40px;
    margin: 0 0 0 auto;
    padding: 0 16px;
    border: 1px solid var(--hr-bordure);
    border-radius: var(--hr-r-rond);
    background: var(--hr-papier);
    color: var(--hr-texte-3);
}
.hr-en__chercher:focus-within { border-color: var(--hr-petrole); }
.hr-en__chercher input {
    flex: 1;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: 400 15px var(--hr-font-texte);
    color: var(--hr-encre);
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}
.hr-en__chercher input::placeholder { color: var(--hr-texte-3); opacity: 1; }
.hr-en__chercher input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hr-en .hr-en__chercher input:focus-visible { box-shadow: none; }
@media (max-width: 1179px) {
    .hr-en__chercher { flex-basis: 200px; }
}

/* Mon carnet (comptes des visiteurs) : l'icône seule, après la recherche */
.hr-en__carnet {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin: 0 -10px 0 calc(8px - var(--hr-sp-8));   /* près de la recherche ; le tracé aligné sur le bord du cadre */
    border-radius: var(--hr-r-rond);
    color: var(--hr-petrole);
}
@media (hover: hover) { .hr-en .hr-en__carnet:hover { background: var(--hr-petrole-pale); color: var(--hr-petrole-fonce); } }
.hr-en__carnet:focus-visible { outline: none; box-shadow: var(--hr-focus); }
/* Connecté (compte-menu.js) : un point vert sur l'icône, et un petit menu dessous */
.hr-en__carnet--connecte { position: relative; }
.hr-en__carnet--connecte::after { content: ""; position: absolute; right: 9px; top: 9px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: var(--hr-vert); }
.hr-en__menu-compte {
    position: absolute;
    right: 40px;
    top: calc(100% - 6px);
    z-index: 20;
    width: min(260px, calc(100vw - 32px));
    padding: 6px;
    border: 1px solid var(--hr-bordure);
    border-radius: var(--hr-r-lg);
    background: #fff;
    box-shadow: var(--hr-om-survol);
    font: 400 15px var(--hr-font-texte);
}
.hr-en__menu-compte[hidden] { display: none; }
.hr-en__menu-qui { margin: 0; padding: 8px 10px 10px; border-bottom: 1px solid var(--hr-filet); font-size: 13px; color: var(--hr-texte-3); overflow-wrap: anywhere; }
.hr-en__menu-qui strong { display: block; color: var(--hr-texte-2); font: 500 15px var(--hr-font-texte); }   /* comme « Se déconnecter », pas en gras (François, 08/10/2026) */
.hr-en__menu-compte a, .hr-en__menu-compte button {
    display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--hr-r-md);
    background: none; color: var(--hr-encre); font: 500 15px var(--hr-font-texte); text-align: left; text-decoration: none; cursor: pointer;
}
.hr-en__menu-compte a:hover, .hr-en__menu-compte button:hover, .hr-en__menu-compte :focus-visible { background: var(--hr-papier); outline: none; }
.hr-en__menu-compte button { margin-top: 4px; border-top: 1px solid var(--hr-filet); border-radius: 0 0 var(--hr-r-md) var(--hr-r-md); color: var(--hr-texte-2); }
@media (max-width: 1023px) { .hr-en__menu-compte { right: 16px; top: 100%; } }

/* Éléments du mobile seul */
.hr-en__burger,
.hr-en__loupe,
.hr-en__tiroir-tete,
.hr-en__tiroir-pied,
.hr-en__seul-tiroir,
.hr-en__chercher--tiroir,
.hr-en__recherche,
.hr-en__ecran--groupes,
.hr-en__volet-photo,
.hr-en__compte { display: none; }

/* ── Liste « À propos » (ordinateur) ─────────────────────── */
.hr-en__liste {
    position: absolute;
    top: 100%;
    left: 0;
    width: 288px;
    padding: 16px 0 8px;
    background: var(--hr-surface);
    border: 1px solid var(--hr-bordure);
    border-top: 0;
    border-radius: 0 0 var(--hr-r-md) var(--hr-r-md);
    box-shadow: var(--hr-om-survol);
}
.hr-en__liste[hidden] { display: none; }
.hr-en__liste-groupe { margin-bottom: 8px; }
.hr-en__liste .hr-en__intertitre { padding: 0 20px 4px; }
.hr-en__liste a {
    display: block;
    padding: 8px 20px;
    font-size: 15px;
    line-height: 20px;
    color: var(--hr-texte);
}
@media (hover: hover) { .hr-en__liste a:hover { background: var(--hr-petrole-pale); color: var(--hr-petrole); } }

.hr-en__intertitre {
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: var(--hr-ls-label);
    text-transform: uppercase;
    color: var(--hr-encre);
}

/* ── Panneau Destinations (ordinateur) ───────────────────── */
.hr-en__panneau {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1;
    background: var(--hr-surface);
    border-bottom: 1px solid var(--hr-bordure);
    box-shadow: var(--hr-om-survol);
}
.hr-en[data-ouvert="destinations"] .hr-en__panneau { display: block; }

.hr-en__voile {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: rgba(28, 42, 49, .25);
}
.hr-en__voile[hidden] { display: none; }

.hr-en__grille {
    display: grid;
    grid-template-columns: 256px minmax(0, 1fr);
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px var(--hr-sp-10) 4px;   /* + 20 px sous chaque rubrique : 24 px (François, 01/10/2026) */
    max-height: calc(100vh - 104px - 24px);
    box-sizing: border-box;
}
.hr-en__ecran--accueil,
.hr-en__ecran--pays { overflow-y: auto; overscroll-behavior: contain; }

/* Liste des pays */
.hr-en__pays-liste {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 24px;
    padding-bottom: 20px;
    border-right: 1px solid var(--hr-filet);
}
.hr-en__pays {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 44px;
    padding: 0 10px 0 4px;
    border-radius: var(--hr-r-md);
    font-size: 15px;
    font-weight: 500;
}
.hr-en .hr-en__pays { color: var(--hr-encre); }
.hr-en__pays > span:not(.hr-en__vide) { flex: 1; min-width: 0; }
.hr-en__pays img,
.hr-en__vide {
    flex: none;
    width: 48px;
    height: 32px;
    border-radius: var(--hr-r-xs);
    object-fit: cover;
    background: var(--hr-filet);
}
.hr-en__pays .hr-en__ic { width: 16px; height: 16px; opacity: 0; }
@media (hover: hover) { .hr-en__pays:hover { background: var(--hr-papier); } }
.hr-en .hr-en__pays.est-actif { background: var(--hr-petrole-pale); color: var(--hr-petrole); }
.hr-en__pays.est-actif .hr-en__ic { opacity: 1; }

/* Volet du pays */
.hr-en__ecran--pays { padding-left: 32px; }
.hr-en__volet:not(.est-actif) { display: none; }
.hr-en__volet-titre {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font: 600 20px/24px var(--hr-font-titre);
}
.hr-en .hr-en__volet-titre { color: var(--hr-encre); }
.hr-en__volet-titre .hr-en__ic { color: var(--hr-petrole); }
@media (hover: hover) { .hr-en .hr-en__volet-titre:hover { color: var(--hr-petrole); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } }

.hr-en__rubriques { column-count: 3; column-gap: 32px; }
.hr-en__rubrique { break-inside: avoid; padding-bottom: 20px; }
.hr-en__rub-h { margin: 0; padding: 0; font-size: inherit; line-height: inherit; }
.hr-en__rub-tete {
    display: flex;
    align-items: center;
    width: 100%;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--hr-bordure);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: var(--hr-ls-label);
    text-transform: uppercase;
    cursor: default;
}
.hr-en .hr-en__rub-tete { color: var(--hr-encre); }
.hr-en__rub-tete .hr-en__ic { display: none; }
.hr-en__rubrique a {
    display: block;
    padding: 6px 0;
    font-size: 15px;
    line-height: 20px;
}
.hr-en .hr-en__rubrique a { color: var(--hr-texte); }
@media (hover: hover) { .hr-en .hr-en__rubrique a:hover { color: var(--hr-petrole); text-decoration: underline; text-underline-offset: 3px; } }

@media (max-width: 1099px) {
    .hr-en__rubriques { column-count: 2; }
}

/* ── Mobile (< 1 024 px) ─────────────────────────────────── */
@media (max-width: 1023px) {
    /* Bandeau de 28 px, la devise seule : sans lui, la barre blanche sur le
       papier était trop fade (François, 01/10/2026, version B avec les icônes
       en pétrole). Contrairement à l'ordinateur, il revient avec la barre. */
    .hr-en { top: 0; }
    .hr-en__bandeau { height: 28px; font-size: 12px; line-height: 28px; }
    .hr-en__bandeau .hr-en__cadre { justify-content: center; padding: 0 16px; }
    .hr-en__bandeau .hr-en__langues { display: none; }
    .hr-en__nav,
    .hr-en__chercher:not(.hr-en__chercher--tiroir),
    .hr-en__voile { display: none !important; }

    .hr-en__barre { height: 56px; }
    .hr-en__ciel { filter: drop-shadow(0 3px 6px rgba(34, 49, 58, .10)); }
    .hr-en__ciel::before { bottom: 12px; }
    .hr-en__horizon { height: 12px; }
    /* Massif à gauche du logo, en miroir : ses sommets du côté du logo, son
       pied à 16 px de lui (François, 04/10/2026 ; à droite chez Claude Design).
       Logo de 40 px centré (≈ 63 px de large) : 50 % − 31 − 16 − 107. */
    .hr-en__horizon > i:first-of-type { width: calc(50% - 154px); }
    .hr-en__crete--o { display: none; }
    .hr-en__crete--m { display: block; transform: scaleX(-1); }
    /* Recherche déroulée par la loupe : même règle que le panneau */
    .hr-en:has(.hr-en__loupe[aria-expanded="true"]) .hr-en__ciel { filter: none; }
    .hr-en:has(.hr-en__loupe[aria-expanded="true"]) .hr-en__ciel::before { bottom: 0; }
    .hr-en:has(.hr-en__loupe[aria-expanded="true"]) .hr-en__horizon { visibility: hidden; }
    main > .pc:first-child > .pc-ouv--photo:first-child { margin-top: -12px; }
    .hr-en__barre .hr-en__cadre {
        display: grid;
        grid-template-columns: 88px 1fr 88px;   /* à droite : Mon carnet et la loupe */
        gap: 0;
        padding: 0 18px;            /* ☰ et loupe à 32 px du bord (François, 01/10/2026) */
    }
    .hr-en__burger { grid-column: 1; grid-row: 1; justify-self: start; }
    .hr-en__logo { grid-column: 2; grid-row: 1; }
    .hr-en__carnet { grid-column: 3; grid-row: 1; justify-self: start; margin: 0; }
    .hr-en__loupe { grid-column: 3; grid-row: 1; justify-self: end; }
    .hr-en__burger,
    .hr-en__loupe,
    .hr-en__fermer,
    .hr-en__retour {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        color: var(--hr-petrole);
    }
    .hr-en .hr-en__loupe { color: var(--hr-petrole); }
    .hr-en__loupe .hr-en__ic + .hr-en__ic,
    .hr-en__loupe[aria-expanded="true"] .hr-en__ic:first-child { display: none; }
    .hr-en__loupe[aria-expanded="true"] .hr-en__ic + .hr-en__ic { display: block; }

    /* Barre de recherche déroulée par la loupe : posée sur la page, sous le filet */
    .hr-en__recherche:not([hidden]) {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        z-index: 2;
        background: var(--hr-surface);
        border-bottom: 1px solid var(--hr-bordure);
        box-shadow: 0 8px 16px rgba(0, 0, 0, .08);
    }
    .hr-en__recherche .hr-en__chercher--barre { margin: 10px 16px; }
    .hr-en__logo { justify-self: center; }
    .hr-en__logo img { height: 40px; }

    /* Le tiroir : le même panneau, plein écran, depuis la gauche */
    .hr-en__panneau {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        z-index: 3;
        border: 0;
        box-shadow: none;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 200ms ease-out, visibility 0s linear 200ms;
    }
    .hr-en[data-ouvert="tiroir"] .hr-en__panneau {
        transform: none;
        visibility: visible;
        transition: transform 200ms ease-out;
    }

    .hr-en__tiroir-tete {
        display: flex;
        align-items: center;
        gap: 4px;
        flex: none;
        height: 56px;
        padding: 0 18px;            /* ✕ à la place exacte de ☰ */
        border-bottom: 1px solid var(--hr-bordure);
    }
    .hr-en__tiroir-titre {
        flex: 1;
        min-width: 0;
        font: 600 20px/1.2 var(--hr-font-titre);
        color: var(--hr-encre);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Accueil du tiroir : ✕ à la place exacte de ☰, puis « Menu » */
    .hr-en__panneau[data-ecran="accueil"] .hr-en__retour { display: none; }
    .hr-en__panneau[data-ecran="accueil"] .hr-en__fermer { order: -1; }

    .hr-en__corps { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
    .hr-en__grille { display: block; max-height: none; padding: 0; }
    .hr-en__ecran--accueil,
    .hr-en__ecran--pays { overflow: visible; padding: 0; }
    .hr-en__panneau:not([data-ecran="accueil"]) .hr-en__ecran--accueil,
    .hr-en__panneau:not([data-ecran="pays"]) .hr-en__ecran--pays { display: none; }
    .hr-en__ecran--groupes:not([hidden]) { display: block; }

    .hr-en__seul-tiroir { display: block; }

    /* Recherche du tiroir */
    .hr-en__chercher--tiroir {
        display: flex;
        height: 44px;
        margin: 16px 16px 8px;
        gap: 10px;
    }
    .hr-en__chercher--tiroir .hr-en__ic { width: 18px; height: 18px; }
    .hr-en__chercher--tiroir input { font-size: 16px; }   /* 16 px : iOS ne zoome pas */

    .hr-en__ecran--accueil > .hr-en__intertitre {
        padding: 16px 16px 4px;
        font-weight: 600;
        color: var(--hr-texte-3);
    }

    /* Pays : lignes de 56 px */
    .hr-en__pays-liste { gap: 0; padding: 0; border: 0; }
    .hr-en__pays,
    .hr-en .hr-en__pays.est-actif {
        height: 56px;
        padding: 0 12px 0 16px;
        border-radius: 0;
        border-bottom: 1px solid var(--hr-filet);
        background: none;
        color: var(--hr-encre);
        font-size: 16px;
    }
    .hr-en__pays img,
    .hr-en__vide { width: 60px; height: 40px; }   /* 3:2, comme sur ordinateur (56 × 40 avant ; François, 06/10/2026) */
    .hr-en__pays .hr-en__ic,
    .hr-en__pays.est-actif .hr-en__ic { width: 16px; height: 16px; opacity: 1; color: var(--hr-texte-3); }

    /* À propos ›, Accueil */
    .hr-en__autres { margin-top: 8px; border-top: 1px solid var(--hr-filet); }
    .hr-en__autres > li > * {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 52px;
        padding: 0 12px 0 16px;
        border-bottom: 1px solid var(--hr-filet);
        font-size: 16px;
        font-weight: 500;
        box-sizing: border-box;
    }
    .hr-en .hr-en__autres > li > * { color: var(--hr-encre); }
    .hr-en__autres .hr-en__ic { width: 16px; height: 16px; color: var(--hr-texte-3); }

    /* Écran du pays */
    .hr-en__ecran--pays { padding: 0; }
    .hr-en__volet-titre { display: none; }
    .hr-en__volet-photo {
        display: block;
        position: relative;
        margin: 16px;
        height: 120px;
        border-radius: var(--hr-r-md);
        overflow: hidden;
        background: var(--hr-filet);
    }
    .hr-en__volet-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .hr-en__volet-photo span {
        position: absolute;
        left: 12px;
        bottom: 12px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 32px;
        padding: 0 14px;
        border-radius: var(--hr-r-rond);
        background: #fff;
        box-shadow: 0 2px 8px rgba(28, 42, 49, .18);
        font-size: 14px;
        font-weight: 600;
        color: var(--hr-petrole);
    }

    /* Rubriques en accordéon : une seule ouverte */
    .hr-en__rubriques { column-count: auto; border-top: 1px solid var(--hr-bordure); }
    .hr-en__rubrique { padding: 0; border-bottom: 1px solid var(--hr-bordure); }
    .hr-en__rub-tete,
    .hr-en .hr-en__rub-tete {
        gap: 10px;
        height: 56px;
        padding: 0 16px;
        margin: 0;
        border: 0;
        font-size: 17px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        color: var(--hr-encre);
        cursor: pointer;
    }
    .hr-en__rub-tete > span:first-child { flex: 1; }
    .hr-en__compte {
        display: block;
        min-width: 24px;
        height: 24px;
        padding: 0 7px;
        border-radius: var(--hr-r-rond);
        background: var(--hr-filet);
        font-size: 13px;
        font-weight: 500;
        line-height: 24px;
        text-align: center;
        color: var(--hr-texte-2);
        box-sizing: border-box;
    }
    .hr-en__rub-tete .hr-en__ic { display: block; }
    .hr-en__rub-tete[aria-expanded="true"] .hr-en__ic { transform: rotate(180deg); }
    .hr-en__rub-h:has(> [aria-expanded="false"]) + ul { display: none; }
    .hr-en__rubrique:has([aria-expanded="true"]) { background: var(--hr-papier); }
    .hr-en__rubrique ul { padding: 0 16px 8px 28px; }
    .hr-en__rubrique li + li a { border-top: 1px solid var(--hr-filet); }
    .hr-en__rubrique a {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 6px 0;
        font-size: 16px;
        line-height: 1.35;
        box-sizing: border-box;
    }

    /* Écran À propos */
    .hr-en__ecran-groupe .hr-en__intertitre {
        padding: 20px 0 8px;
        margin: 0 16px;
        border-bottom: 1px solid var(--hr-bordure);
    }
    .hr-en__ecran-groupe ul { padding: 0 16px; }
    .hr-en__ecran-groupe a {
        display: flex;
        align-items: center;
        min-height: 48px;
        border-bottom: 1px solid var(--hr-filet);
        font-size: 16px;
    }
    .hr-en .hr-en__ecran-groupe a { color: var(--hr-texte); }

    /* Bas fixe, sur l'accueil du tiroir seulement */
    .hr-en__panneau[data-ecran="accueil"] .hr-en__tiroir-pied {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: none;
        height: 68px;
        padding: 0 16px;
        border-top: 1px solid var(--hr-bordure);
    }
    .hr-en__langues--tiroir {
        padding: 3px;
        border: 1px solid var(--hr-bordure);
        background: none;
    }
    .hr-en__langues--tiroir > * {
        height: 36px;
        padding: 0 14px;
        font-size: 13px;
        line-height: 36px;
        letter-spacing: .06em;
        color: var(--hr-texte-2);
    }
@media (hover: hover) { .hr-en__langues--tiroir a:hover { color: var(--hr-petrole); } }
    .hr-en .hr-en__langues--tiroir [aria-current] { background: var(--hr-petrole); color: #fff; }

    html.hr-en-verrou,
    html.hr-en-verrou body { overflow: hidden; }
}

/* Tablette : le tiroir garde 480 px, le reste de l'écran est voilé ; plein
   écran, ses lignes et le bandeau photo s'étiraient jusqu'à 1 000 px. */
@media (min-width: 600px) and (max-width: 1023px) {
    .hr-en__panneau { right: auto; width: 480px; box-shadow: var(--hr-om-survol); }
    .hr-en[data-ouvert="tiroir"] .hr-en__voile:not([hidden]) { display: block !important; z-index: 3; }
    .hr-en__panneau { z-index: 4; }
}

/* Suggestions pendant la frappe (recherche-suggestions.js, 04/10/2026) : sous
   le champ de l'en-tête, du tiroir mobile et de la page de recherche. */
.hr-sugg-form { position: relative; }
.hr-sugg {
    position: absolute;
    z-index: 60;
    top: calc(100% + 6px);
    right: 0;
    width: 420px;
    max-width: calc(100vw - 32px);
    max-height: min(70vh, 480px);
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--hr-bordure);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 40, 50, .16);
    text-align: left;
}
.hr-sugg[hidden] { display: none; }
.rch-form .hr-sugg, .hr-en__chercher--tiroir .hr-sugg { left: 0; right: auto; width: 100%; max-width: none; }
.hr-sugg a {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 6px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--hr-encre);
}
.hr-sugg [aria-selected="true"] a,
.hr-sugg a:hover { background: var(--hr-petrole-pale); }
.hr-sugg img,
.hr-sugg__icone {
    width: 56px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
}
.hr-sugg__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hr-petrole-pale);
    color: var(--hr-petrole);
    font: 600 20px/1 var(--hr-font-titre);
}
.hr-sugg__titre { display: block; font: 500 15px/1.3 var(--hr-font-texte); }
.hr-sugg__titre b { font-weight: 700; color: var(--hr-petrole); }
.hr-sugg__sous { display: block; font: 400 12px/1.4 var(--hr-font-texte); color: var(--hr-texte-2); }
.hr-sugg .hr-sugg__tout a {
    display: block;
    margin-top: 4px;
    padding: 10px 8px 6px;
    border-top: 1px solid var(--hr-bordure);
    border-radius: 0;
    font: 600 14px/1.3 var(--hr-font-texte);
    color: var(--hr-petrole);
}
.hr-sugg .hr-sugg__tout[aria-selected="true"] a,
.hr-sugg .hr-sugg__tout a:hover { background: none; text-decoration: underline; }

@media print {
    .hr-en { display: none; }
}