/* ==========================================================================
   FICHE RANDO — Section haute
   Layout + styles modules
   
   Espacement entre modules géré par --gap-module (modifier ici pour ajuster)
   
   Note : les styles des boutons split pill (.split-btn, .conteneur-boutons-inline)
   sont dans hr-split-btn.css, chargé par Boutons.php.
   ========================================================================== */

:root {
    --gap-module: 35px;
}


/* ──────────────────────────────────────────
   LAYOUT — Conteneur & colonnes
   ────────────────────────────────────────── */

.fiche-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.fiche-grid__fil-ariane {
    margin-top: 20px;
    margin-bottom: 15px;
}

.fiche-grid__colonnes {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

/* Colonne gauche */
.fiche-grid__col-gauche {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Colonne droite */
.fiche-grid__col-droite {
    width: 400px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Avis + Paramètres : collés ensemble via un wrapper */
.fiche-grid__sidebar-top {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ──────────────────────────────────────────
   ESPACEMENT — margin-bottom individuel
   
   Modifier ici pour ajuster l espacement
   sous chaque module. --gap-module sert de
   valeur par défaut, overridé au cas par cas.
   ────────────────────────────────────────── */

/* Colonne gauche */
.fiche-grid__photo          { margin-bottom: 30px; }
.fiche-grid__titre          { margin-bottom: -5px; }
.fiche-grid__description    { margin-bottom: 25px; }
.fiche-grid__remarques      { margin-bottom: var(--gap-module); }
.fiche-grid__difficultes    { margin-bottom: var(--gap-module); }
.fiche-grid__points-forts   { margin-bottom: 45px; }
.fiche-grid__points-faibles { margin-bottom: 20px; }
.fiche-grid__details        { margin-bottom: var(--gap-module);  }

/* Colonne droite */
.fiche-grid__sidebar-top    { margin-bottom: var(--gap-module); }
.fiche-grid__avis           { margin-bottom: 0; }
.fiche-grid__parametres     { margin-bottom: 15px; }
.fiche-grid__boutons        { margin-bottom: 30px; }
.fiche-grid__carte          { margin-bottom: var(--gap-module);  }

/* Lien souligné global dans la section (sauf boutons) */
.fiche-grid a {
    text-decoration: underline;
}

.fiche-grid__boutons a,
.fiche-grid__boutons a:hover {
    text-decoration: none;
}


/* ──────────────────────────────────────────
   MODULE — Photo principale
   ────────────────────────────────────────── */

.image-titre {
    width: 100%;
    margin-left: 0;
    border: 14px solid white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

.image-titre img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* ──────────────────────────────────────────
   MODULE — Titre H1
   Reset de la marge navigateur pour que seul
   le gap flex contrôle l espacement.
   ────────────────────────────────────────── */

.fiche-grid__titre h1 {
    margin: 0;
}


/* ──────────────────────────────────────────
   MODULE — Description
   ────────────────────────────────────────── */

.fiche-grid__description p {
    margin: 0;
}


/* ──────────────────────────────────────────
   MODULE — Remarques
   ────────────────────────────────────────── */

.conteneur-remarques_v2 {
    background-color: #e6f4f7;
    border-left: 5px solid #05668d;
    padding: 12px 10px 10px 20px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.conteneur-remarques_v2 .titre-rando-h3 {
    margin-top: 0;
    margin-bottom: 3px;
    color: #05668d;
}


/* ──────────────────────────────────────────
   MODULE — Difficultés
   ────────────────────────────────────────── */

.div-section-difficultes .titre-rando-h2 {
    margin-top: 0;
    margin-bottom: 3px;
}


/* ──────────────────────────────────────────
   MODULE — Points forts
   ────────────────────────────────────────── */

.conteneur-points-forts {
    background-color: #f0f9f0;
    border-left: 5px solid #02c39a;
    padding: 16px 12px 8px 12px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.conteneur-points-forts .titre-rando-h2 {
    margin-top: 0;
    margin-bottom: 3px;
    color: #02b48a;
    font-size: 22px;
}

.conteneur-points-forts .liste-fiche-rando {
    margin-bottom: 0;
    padding-bottom: 0;
}

.conteneur-points-forts .liste-fiche-rando li {
    margin-bottom: 8px;
}


/* ──────────────────────────────────────────
   MODULE — Points faibles
   ────────────────────────────────────────── */

.div-section-points-faibles .titre-rando-h2 {
    margin-top: 0;
    margin-bottom: 3px;
    font-size: 20px;
}

.div-section-points-faibles .liste-fiche-rando li {
    margin-bottom: 8px;
}


/* ──────────────────────────────────────────
   MODULE — Détails randonnée
   ────────────────────────────────────────── */

.details-randonnee-section .details-randonnee-titre {
    margin-top: 0;
    margin-bottom: 3px;
}


/* ──────────────────────────────────────────
   MODULE — Avis (étoiles)
   ────────────────────────────────────────── */

.notre_avis {
    color: #ffffff;
    background-color: #05668d;
    font-size: 17px;
    padding: 13px 0 9px 55px;
}

.notre_avis img {
    vertical-align: middle;
    margin-top: -7px;
}


/* ──────────────────────────────────────────
   MODULE — Paramètres (fiche technique)
   ────────────────────────────────────────── */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.image-container {
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    flex-shrink: 0;
}

.image-container img {
    max-height: 35px;
}

/* Icônes individuelles */
.informations-rando .img_activite        { width: 23px; opacity: 0.85; margin-left: 5px; position: relative; top: -2px; }
.informations-rando .img_difficulte      { width: 27px; opacity: 0.85; position: relative; top: -2px; }
.informations-rando .img_difficulte_via  { width: 24px; opacity: 0.8;  position: relative; top: -3px; }
.informations-rando .img_duree           { width: 27px; position: relative; top: -1px; }
.informations-rando .img_distance        { width: 27px; position: relative; top: -2px; }
.informations-rando .img_trajet          { width: 28px; position: relative; top: 0; }
.informations-rando .img_denivele_positif { width: 34px; position: relative; top: -2px; }
.informations-rando .img_denivele_negatif { width: 33px; position: relative; top: -3px; }
.informations-rando .img_altitude        { width: 33px; position: relative; top: -5px; }
.informations-rando .img_vertigineux     { width: 27px; position: relative; margin-left: 2px; top: -4px; }
.informations-rando .img_balise          { width: 27px; position: relative; top: -1px; }
.informations-rando .img_region          { width: 27px; position: relative; top: -1px; }
.informations-rando .img_depart          { width: 27px; position: relative; top: -3px; }

/* Conteneur et lignes */
.informations-rando {
    padding: 6px 15px 8px 13px;
    background-color: #ffffff;
    border: 4px solid #05668d;
}

.informations-rando .info-item {
    font-size: 16px;
    margin-bottom: 0 !important;
    min-height: 46px;
    display: flex;
    align-items: center;
}

.informations-rando .info-item-even {
    background-color: #f5f5f5;
    margin-left: -13px;
    margin-right: -15px;
    padding-left: 13px;
    padding-right: 15px;
}

.informations-rando .info-item-even:last-child {
    margin-bottom: -8px !important;
    padding-bottom: 14px;
    padding-top: 12px;
}

.param-label {
    color: #05668d;
}

.param-value {
    color: #05668d;
    font-weight: 700;
}


/* ══════════════════════════════════════════
   MOBILE / TABLETTE (≤980px)
   ══════════════════════════════════════════ */

@media (max-width: 980px) {

    /* --- Layout : casser les colonnes --- */
    .fiche-grid__colonnes {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .fiche-grid__col-gauche,
    .fiche-grid__col-droite {
        display: contents;
    }

    /* Le wrapper sidebar-top doit aussi se dissoudre en mobile */
    .fiche-grid__sidebar-top {
        display: contents;
    }

    /* --- Ordre mobile --- */
    .fiche-grid__photo          { order: 1; }
    .fiche-grid__titre          { order: 2; }
    .fiche-grid__description    { order: 3; }
    .fiche-grid__boutons        { order: 4; }
    .fiche-grid__avis           { order: 5; }
    .fiche-grid__parametres     { order: 6; }
    .fiche-grid__remarques      { order: 7; }
    .fiche-grid__difficultes    { order: 8; }
    .fiche-grid__points-forts   { order: 9; }
    .fiche-grid__points-faibles { order: 10; }
    .fiche-grid__carte          { order: 11; }
    .fiche-grid__details        { order: 12; }

    /* --- Pleine largeur pour les éléments de la sidebar --- */
    .fiche-grid__avis,
    .fiche-grid__parametres,
    .fiche-grid__boutons,
    .fiche-grid__carte {
        width: 100%;
    }

    /* --- Espacement mobile ---
       En mobile l ordre change (display:contents + order).
       Chaque module a son propre margin-bottom mobile.
       Ordre : photo > titre > description > boutons > avis >
               parametres > remarques > difficultes > points forts >
               points faibles > carte > details */
    .fiche-grid__photo          { margin-bottom: 20px; }
    .fiche-grid__titre          { margin-bottom: -10px; }
    .fiche-grid__description    { margin-bottom: 15px; }
    .fiche-grid__boutons        { margin-bottom: 45px; }
    .fiche-grid__avis           { margin-bottom: 0; }
    .fiche-grid__parametres     { margin-bottom: 40px; }
    .fiche-grid__remarques      { margin-bottom: var(--gap-module); }
    .fiche-grid__difficultes    { margin-bottom: var(--gap-module); }
    .fiche-grid__points-forts   { margin-bottom: var(--gap-module); }
    .fiche-grid__points-faibles { margin-bottom: 20px; }
    .fiche-grid__carte          { margin-bottom: 35px; }
    .fiche-grid__details        { margin-bottom: var(--gap-module); }

    /* --- Avis : padding mobile --- */
    .notre_avis {
        padding-left: 30px;
    }

    /* --- Points faibles : reset padding liste --- */
    .div-section-points-faibles .liste-fiche-rando {
        padding-bottom: 0 !important;
    }
}

/* --- Tablette uniquement (768-980px) : marges droites --- */
@media (min-width: 768px) and (max-width: 980px) {
    .div-section-difficultes,
    .conteneur-points-forts,
    .div-section-points-faibles {
        margin-right: 45px;
    }
}

/* --- Petit mobile (≤768px) --- */
@media (max-width: 768px) {
    .notre_avis {
        margin-top: -10px;
    }
}


/* ══════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════ */

@media print {

    .print_display_none {
        display: none !important;
    }

    /* Supprimer la marge des modules masqués pour éviter les espaces vides */
    .fiche-grid__boutons.print_display_none,
    .fiche-grid__fil-ariane.print_display_none {
        margin: 0 !important;
    }

    .fiche-grid__colonnes {
        display: flex !important;
        flex-direction: row !important;
        gap: 40px;
    }
    .fiche-grid__col-gauche {
        flex: 1 !important;
        min-width: 0;
        display: flex !important;
        flex-direction: column !important;
    }
    .fiche-grid__col-droite {
        width: 400px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .fiche-grid__sidebar-top {
        display: flex !important;
        flex-direction: column !important;
    }

    .fiche-grid {
        margin-top: -20px !important; 
    }

    /* Supprimer l'espace des boutons */
    .fiche-grid__sidebar-top { margin-bottom: 0px !important; }
    .fiche-grid__boutons     { margin-bottom: 0px !important; }
}