/* ==========================================================================
   STRUCTURE DE PAGE — remplace les sections et lignes de Divi
   ==========================================================================
   Divi encadrait chaque page dans .et_pb_section > .et_pb_row. Les deux
   classes ci-dessous jouent le même rôle, avec les mêmes valeurs :
   section 4 % de marge verticale, ligne 2 %, largeur 92 % plafonnée à 1200 px
   (hr-custom.css porte déjà la largeur, reprise ici pour que la structure
   tienne seule).

   Le site utilise la gouttière 1 : aucune marge automatique entre modules,
   tout l'espacement est déclaré explicitement par les CSS de chaque type
   de page.
   ========================================================================== */

/* Sans cela, la marge haute du premier bloc (20 px sur le fil d'Ariane)
   « s'effondre » hors de <main> et remonte coller l'en-tête au lieu d'espacer
   le contenu. Les conteneurs de Divi l'empêchaient par leur propre remplissage. */
main {
    display: flow-root;
}

.hr-section {
    /* Aucune marge verticale : mesurée à 0 en production. Le contenu se cale
       sur ses propres marges — le fil d'Ariane démarre à 20 px sous l'en-tête. */
    padding: 0;
    position: relative;
}

.hr-row {
    width: 92%;
    max-width: 1200px;
    margin: auto;
    padding: 0;
    position: relative;
}

/* Ligne basse de la fiche : fond gris pleine largeur, 25 px de retrait haut.
   C'est un réglage du module Divi 49394, pas une propriété de la classe
   « fond-gris-clair », que hr-custom.css réserve au fond de 100vw. Le circuit
   emploie la même classe et mesure zéro de retrait : la règle est donc liée à
   la ligne de la fiche, et non à la classe. */
#fiche-rando-photos.hr-row.fond-gris-clair {
    padding-top: 25px;
}

/* ──────────────────────────────────────────
   EN-TÊTE
   Réglages relevés sur la ligne Divi de l'en-tête actif (58475) :
   pleine largeur d'écran, 70 px de haut, dégradé et liseré vert.
   ────────────────────────────────────────── */

.hr-entete {
    width: 100%;
    height: 80px;
    padding: 0;
    background: linear-gradient(90deg, #05668d 0%, #024a66 100%);
    border-bottom: 4px solid #02c39a;
    display: flex;
    /* Surtout pas align-items: center — chaque bloc (logo, menu, sélecteur)
       porte ses propres marges et se cale lui-même sur les 80 px. */
    align-items: stretch;
    /* Pas de z-index ici : il créerait un contexte d'empilement qui enfermerait
       le z-index 999999 du menu, et les infobulles de la fiche (99990) passeraient
       devant. En production la ligne d'en-tête est en z-index auto. */
    position: relative;
}

@media only screen and (max-width: 980px) {
    .hr-entete { height: 70px; }
}

/* Entre 769 et 980 px, la bande passe à 70 px mais l'en-tête continue d'occuper
   80 px : 10 px sous la ligne dans cette seule tranche. Ils viennent du retrait
   du logo (hr-logo.css : 25 px sous 981 px, ramené à 5 px à 768 px et moins),
   d'où la borne à 769 et non 768 — mesuré des deux côtés. Reproduit à l'identique. */
@media only screen and (min-width: 769px) and (max-width: 980px) {
    .hr-entete { margin-bottom: 10px; }
}

.hr-entete__logo   { width: 20%; }
.hr-entete__menu   { width: 65%; }
.hr-entete__langue { width: 15%; display: flex; justify-content: flex-end; }

@media only screen and (max-width: 767px) {
    .hr-entete__logo   { width: 35%; }
    .hr-entete__menu   { width: 40%; }
    .hr-entete__langue { width: 25%; }
}

.hr-emplacement {
    border: 2px dashed #b0b7c3;
    border-radius: 6px;
    padding: 1rem;
    margin: 1rem 0;
    color: #5b6472;
    background: #fafbfc;
    font: 14px/1.5 system-ui, sans-serif;
}
.hr-emplacement span { font-size: 13px; opacity: .8; }