/* Pied de page « Carnet » (refonte du design, 01/10/2026) : variante 4
   « Miroir de l'en-tête », valeurs de Claude Design
   (_migration/design_handoff_pied_de_page/README.md). Balisage :
   fonctions/pied.php. Filet vert et pétrole foncé, symétriques de l'en-tête.
   Aucune transition. Focus en blanc : l'anneau --hr-focus (#05668d) ne se
   verrait pas sur le pétrole foncé. Mobile sous 768 px. */

.hr-pied {
    position: relative;
    margin-top: 64px;
    background: var(--hr-petrole-fonce);
    color: #cfe3ea;
    font-family: var(--hr-font-texte);
    font-weight: 400;
    font-size: 15px;
}
:where(.hr-pied) ul { list-style: none; margin: 0; padding: 0; }

/* Filet vert et montagne montante (pied_crete(), François, 06/10/2026) : une
   bande de 16 px posée sur le haut du pied de page, comme celle de l'en-tête
   (même crête, même place) ; le filet en occupe les 2 px du bas, et l'intérieur
   des sommets prend la couleur du pied de page. */
.hr-pied__horizon { position: absolute; left: 0; right: 0; top: -14px; height: 16px; display: flex; pointer-events: none; }
.hr-pied__horizon > i { background: linear-gradient(transparent calc(100% - 2px), var(--hr-vert) 0); }
/* bord gauche du cadre + 40 de marge + 82 de logo + 16, comme l'en-tête */
.hr-pied__horizon > i:first-of-type { flex: none; width: calc(max(0px, (100% - 1280px) / 2) + 138px); }
.hr-pied__horizon > i:last-of-type { flex: 1; }
.hr-pied__crete { display: block; flex: none; }
.hr-pied__crete--m { display: none; }
.hr-pied__crete-plein { fill: var(--hr-petrole-fonce); }
.hr-pied__crete-trait { fill: none; stroke: var(--hr-vert); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hr-pied a,
.hr-pied button { color: #dfeef4; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.hr-pied a:focus-visible,
.hr-pied button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: none; }

.hr-pied__cadre { max-width: 1280px; margin: 0 auto; padding: 0 var(--hr-sp-10); box-sizing: border-box; }
.hr-pied__haut {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
    align-items: start;
    padding-top: 20px;      /* 40 → 20 (François, 06/10/2026 : pied moins haut) */
    padding-bottom: 20px;   /* 40 → 20 : sous « FAQ générale », jusqu'au filet */
}
.hr-pied__gauche { display: flex; flex-direction: column; gap: 16px; }   /* 24 → 16 autour des destinations (−35 %) */
.hr-pied__droite { display: flex; flex-direction: column; gap: 16px; align-items: flex-end; }

/* Marque et devise */
.hr-pied__entete { display: flex; flex-direction: column; gap: 4px; }
.hr-pied .hr-pied__marque {
    align-self: flex-start;
    font: 600 22px/28px var(--hr-font-titre);
    color: #fff;
    border-radius: 4px;
}
.hr-pied__devise { font-size: 15px; line-height: 24px; color: #cfe3ea; }

/* Pays */
.hr-pied__pays ul { display: flex; flex-wrap: wrap; gap: 8px; }
.hr-pied .hr-pied__pays a {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border-radius: var(--hr-r-rond);
    border: 1px solid rgba(255, 255, 255, .32);
    font: 500 15px/1 var(--hr-font-texte);
    color: #fff;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Liens du site, séparés par des points */
.hr-pied__site { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.hr-pied__site li { display: flex; align-items: center; gap: 12px; }
.hr-pied__site li + li::before { content: "·"; color: #8fb3c1; }
.hr-pied__site a { display: inline-flex; align-items: center; height: 32px; font-size: 15px; }

/* Réseaux */
.hr-pied__reseaux { display: flex; gap: 8px; }
.hr-pied__reseaux a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--hr-r-rond);
    border: 1px solid rgba(255, 255, 255, .32);
    box-sizing: border-box;
}
.hr-pied__reseaux svg { width: 18px; height: 18px; fill: #fff; }

/* FR / EN, comme dans l'en-tête */
.hr-pied__langues { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--hr-r-rond); background: rgba(255, 255, 255, .12); }
.hr-pied__langues > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 12px;
    border-radius: var(--hr-r-rond);
    font: 600 12px/1 var(--hr-font-texte);
    letter-spacing: .06em;
}
.hr-pied .hr-pied__langues [aria-current] { background: #fff; color: var(--hr-petrole-fonce); }
.hr-pied .hr-pied__langues a:focus-visible { outline-offset: 0; }
.hr-pied__langues [aria-disabled] { color: rgba(207, 227, 234, .45); cursor: not-allowed; }

/* Bandeau du bas : même fond, filet clair */
.hr-pied__bas { border-top: 1px solid rgba(255, 255, 255, .16); font-size: 13px; line-height: 20px; }
.hr-pied__bas .hr-pied__cadre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 24px;
    min-height: 40px;
}
.hr-pied__copie { color: #cfe3ea; }
.hr-pied__bas ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
.hr-pied__bas a,
.hr-pied__bas button { display: inline-flex; align-items: center; height: 40px; }
.hr-pied__bas button { margin: 0; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.hr-pied__bas a:focus-visible,
.hr-pied__bas button:focus-visible { outline-offset: -6px; }

/* Survols : à la souris seulement (sur iPhone, l'état restait après le toucher) */
@media (hover: hover) {
    .hr-pied a:hover,
    .hr-pied button:hover { color: #fff; }
    .hr-pied .hr-pied__marque:hover,
    .hr-pied__site a:hover,
    .hr-pied__bas a:hover,
    .hr-pied__bas button:hover { text-decoration: underline; text-underline-offset: 3px; }
    .hr-pied .hr-pied__pays a:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); }
    .hr-pied__reseaux a:hover { background: rgba(255, 255, 255, .12); }
    .hr-pied .hr-pied__langues a:not([aria-current]):hover { background: rgba(255, 255, 255, .12); color: #fff; }
}

/* Petite crête, à la même place et retournée comme dans l'en-tête, qui en
   change dès 1 023 px (entete-carnet.css : 154 px à gauche du centre, scaleX(-1)) */
@media (max-width: 1023px) {
    .hr-pied__horizon { top: -10px; height: 12px; }
    .hr-pied__horizon > i:first-of-type { width: calc(50% - 154px); }
    .hr-pied__crete--o { display: none; }
    .hr-pied__crete--m { display: block; transform: scaleX(-1); }
}

@media (max-width: 767px) {
    .hr-pied { margin-top: 48px; }
    .hr-pied__cadre { padding: 0 16px; }
    /* Ordre : marque, langue et réseaux, pays, liens du site */
    /* Pied moins haut (François, 06/10/2026) : haut 32 → 16, autres espaces −30 %,
       sauf entre deux lignes de destinations (8 px) */
    .hr-pied__haut { display: flex; flex-direction: column; gap: 17px; padding: 16px 16px 17px; }
    .hr-pied__entete { gap: 3px; }
    .hr-pied__gauche { display: contents; }
    .hr-pied__entete { order: 1; }
    .hr-pied__droite { order: 2; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
    .hr-pied__langues { order: 1; }
    .hr-pied__reseaux { order: 2; }
    .hr-pied__pays { order: 3; }
    .hr-pied__site { order: 4; margin-top: -6px; }   /* 16 → 11 px avant les liens */
    .hr-pied .hr-pied__pays a { height: 44px; }
    .hr-pied__site a { height: 44px; }
    .hr-pied__site a:focus-visible { outline-offset: -4px; }
    .hr-pied__reseaux a { width: 44px; height: 44px; }
    .hr-pied__reseaux svg { width: 20px; height: 20px; }
    .hr-pied__langues > * { height: 40px; min-width: 52px; padding: 0 14px; font-size: 13px; box-sizing: border-box; }
    .hr-pied__bas .hr-pied__cadre { display: block; padding: 8px 16px 3px; }
    .hr-pied__bas a,
    .hr-pied__bas button { height: 44px; }
}

/* Les 64 px au-dessus du filet appartiennent au pied de page (marge) : sur
   les gabarits refaits, fond papier, la marge doit l'être aussi, sinon une
   bande blanche du <body> apparaît. Le Top 5 finit sur sa section blanche
   (récapitulatif) : il garde le blanc, comme les anciens gabarits. */
body:has(> main > :is(.hr-fiche, .hr-tableau):last-child) { background: var(--hr-papier); }
/* Fiche : 24 px seulement (64 jugés trop par François, 30/09/2026), 32 sur mobile */
body:has(> main > .hr-fiche:last-child) .hr-pied { margin-top: var(--hr-sp-6); }
@media (max-width: 767px) {
    body:has(> main > .hr-fiche:last-child) .hr-pied { margin-top: var(--hr-sp-8); }
}

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