/* =============================================
   CONSTRUCTEUR DE PAGES GÉNÉRIQUE (lignes_page_auto)
   Fichier externalisé depuis Constructeur_pages_auto.php
   
   Toutes les valeurs dynamiques sont injectées via des
   CSS custom properties (--var) sur chaque conteneur HTML.
   Les valeurs par défaut sont définies ici via var(--x, default).
   ============================================= */


/* =============================================
   1. HERO IMAGE
   ============================================= */

.hero-page-container {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    position: relative;
    overflow: hidden;
}

.hero-page-container img {
    width: 100%;
    height: auto;
    display: block;
}


/* =============================================
   2. TITRE PRINCIPAL
   ============================================= */

.titre-principal-page {
    color: var(--titre-color, #05668d);
    font-size: 34px;
    text-align: center;
    margin-top: var(--titre-mt, 30px);
    margin-bottom: 20px;
}

@media (max-width: 1023px) {
    .titre-principal-page {
        font-size: 26px;
        margin-bottom: 0;
    }
}


/* =============================================
   3. CLASSES DE VISIBILITÉ
   ============================================= */

.visible-desktop-only {
    display: block;
}

.visible-mobile-only {
    display: none;
}

@media (max-width: 1023px) {
    .visible-desktop-only {
        display: none;
    }

    .visible-mobile-only {
        display: block;
    }
}


/* =============================================
   4. CONTENEUR COMMUN À TOUTES LES LIGNES
   ============================================= */

.ligne-page-container {
    padding: var(--pt, 40px) var(--pl, calc(50vw - 50% + 20px)) var(--pb, 40px) var(--pr, calc(50vw - 50% + 20px));
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

@media (max-width: 1023px) {
    .ligne-page-container {
        padding: var(--pt-m, 30px) 0 var(--pb-m, 30px) !important;
    }

    .ligne-page-container .ligne-page-content-wrapper {
        max-width: 92%;
        margin-left: auto;
        margin-right: auto;
    }
}


/* =============================================
   5. TYPE : shortcode_seul
   ============================================= */

@media (max-width: 1023px) {
    .ligne-type-shortcode-seul > div {
        max-width: 92%;
        margin-left: auto;
        margin-right: auto;
    }
}


/* =============================================
   6. TYPE : texte_seul
   ============================================= */

.ligne-type-texte-seul {
    display: flex;
    justify-content: var(--justify, flex-start);
}

.ligne-type-texte-seul .texte-content {
    max-width: var(--txt-max, 100%);
    text-align: var(--txt-align, left);
}

@media (max-width: 1023px) {
    .ligne-type-texte-seul {
        display: block;
    }

    .ligne-type-texte-seul .texte-content {
        max-width: 92%;
        margin: 0 auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* =============================================
   7. TYPE : photo_texte (défaut)
   ============================================= */

.ligne-type-photo-texte .ligne-page-row {
    display: flex;
    flex-direction: var(--dir, row);
    align-items: flex-start;
    gap: var(--gap, 30px);
}

.ligne-type-photo-texte .ligne-page-row .image-container {
    width: var(--img-w, 34%);
    display: flex;
    padding-top: var(--photo-pt, 0);
    flex-direction: column;
    justify-content: center;
    align-items: var(--photo-align, center);
}

.ligne-type-photo-texte .ligne-page-row .image-container img {
    width: 100%;
    max-width: var(--photo-max, 325px);
    height: auto;
    border: 8px solid white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.ligne-type-photo-texte .ligne-page-row .image-container .photo-legende {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    color: #333;
    text-align: center;
    font-weight: 400;
    max-width: var(--photo-max, 325px);
}

.ligne-type-photo-texte .ligne-page-row .image-container .photo-legende a {
    color: #333;
    text-decoration: underline;
}

.ligne-type-photo-texte .ligne-page-row .image-container .photo-legende a:hover {
    text-decoration: none;
}

.ligne-type-photo-texte .ligne-page-row .texte-container {
    width: var(--txt-w, 66%);
}

.ligne-type-photo-texte .ligne-page-row .texte-container > div {
    max-width: var(--txt-max, 700px);
    margin: var(--txt-margin, 0 auto);
}

.ligne-type-photo-texte .ligne-page-row .texte-container a {
    text-decoration: underline;
}

@media (max-width: 1023px) {
    .ligne-type-photo-texte .ligne-page-row {
        flex-direction: var(--dir-m, column) !important;
        gap: var(--gap-m, 20px) !important;
    }

    .ligne-type-photo-texte .ligne-page-row .image-container {
        width: 100% !important;
        padding-top: var(--photo-pt-m, 0);
    }

    .ligne-type-photo-texte .ligne-page-row .image-container img {
        max-width: var(--photo-max-m, 320px) !important;
    }

    .ligne-type-photo-texte .ligne-page-row .image-container .photo-legende {
        max-width: var(--photo-max-m, 320px);
    }

    .ligne-type-photo-texte .ligne-page-row .texte-container {
        width: 100% !important;
    }

    .ligne-type-photo-texte .ligne-page-row .texte-container > div {
        max-width: 800px;
    }
}


/* =============================================
   8. TYPE : photo_texte_boutons
   Réutilise le même layout que photo_texte
   ============================================= */

.ligne-type-photo-texte-boutons .ligne-page-row {
    display: flex;
    flex-direction: var(--dir, row);
    align-items: flex-start;
    gap: var(--gap, 30px);
}

.ligne-type-photo-texte-boutons .ligne-page-row .image-container {
    width: var(--img-w, 34%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: var(--photo-align, center);
}

.ligne-type-photo-texte-boutons .ligne-page-row .image-container img {
    width: 100%;
    max-width: var(--photo-max, 325px);
    height: auto;
    border: 8px solid white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.ligne-type-photo-texte-boutons .ligne-page-row .image-container .photo-legende {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    color: #333;
    text-align: center;
    font-weight: 400;
    max-width: var(--photo-max, 325px);
}

.ligne-type-photo-texte-boutons .ligne-page-row .image-container .photo-legende a {
    color: #333;
    text-decoration: underline;
}

.ligne-type-photo-texte-boutons .ligne-page-row .image-container .photo-legende a:hover {
    text-decoration: none;
}

.ligne-type-photo-texte-boutons .ligne-page-row .texte-container {
    width: var(--txt-w, 66%);
}

.ligne-type-photo-texte-boutons .ligne-page-row .texte-container > div {
    max-width: var(--txt-max, 700px);
    margin: var(--txt-margin, 0 auto);
}

@media (max-width: 1023px) {
    .ligne-type-photo-texte-boutons .ligne-page-row {
        flex-direction: var(--dir-m, column) !important;
        gap: var(--gap-m, 20px) !important;
    }

    .ligne-type-photo-texte-boutons .ligne-page-row .image-container {
        width: 100% !important;
    }

    .ligne-type-photo-texte-boutons .ligne-page-row .image-container img {
        max-width: var(--photo-max-m, 320px) !important;
    }

    .ligne-type-photo-texte-boutons .ligne-page-row .image-container .photo-legende {
        max-width: var(--photo-max-m, 320px);
    }

    .ligne-type-photo-texte-boutons .ligne-page-row .texte-container {
        width: 100% !important;
    }

    .ligne-type-photo-texte-boutons .ligne-page-row .texte-container > div {
        max-width: 100%;
    }
}


/* =============================================
   9. TYPE : photos_texte (plusieurs photos)
   ============================================= */

.ligne-type-photos-texte .ligne-page-row {
    display: flex;
    flex-direction: var(--dir, row);
    align-items: flex-start;
    gap: var(--gap, 30px);
}

.ligne-type-photos-texte .ligne-page-row .images-container {
    width: var(--img-w, 34%);
    display: flex;
    flex-direction: column;
    padding-top: var(--photo-pt, 0);
    gap: var(--photos-gap, 15px);
    align-items: var(--photo-align, center);
}

.ligne-type-photos-texte .ligne-page-row .images-container img {
    width: 100%;
    max-width: var(--photo-max, 325px);
    height: auto;
    border: 8px solid white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    margin: 0 auto;
    display: block;
}

.ligne-type-photos-texte .ligne-page-row .images-container .photo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ligne-type-photos-texte .ligne-page-row .images-container .photo-wrapper.visible-desktop-only {
    display: flex;
}

.ligne-type-photos-texte .ligne-page-row .images-container .photo-wrapper.visible-mobile-only {
    display: none;
}

.ligne-type-photos-texte .ligne-page-row .images-container .photo-legende {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    color: #333;
    text-align: center;
    font-weight: 400;
    max-width: var(--photo-max, 325px);
}

.ligne-type-photos-texte .ligne-page-row .images-container .photo-legende a {
    color: #333;
    text-decoration: underline;
}

.ligne-type-photos-texte .ligne-page-row .images-container .photo-legende a:hover {
    text-decoration: none;
}

.ligne-type-photos-texte .ligne-page-row .images-container .photo-link {
    display: block;
}

.ligne-type-photos-texte .ligne-page-row .images-container .photo-link.visible-desktop-only {
    display: block;
}

.ligne-type-photos-texte .ligne-page-row .images-container .photo-link.visible-mobile-only {
    display: none;
}

.ligne-type-photos-texte .ligne-page-row .images-container .photo-link img {
    margin: 0 auto;
}

.ligne-type-photos-texte .ligne-page-row .texte-container {
    width: var(--txt-w, 66%);
}

.ligne-type-photos-texte .ligne-page-row .texte-container > div {
    max-width: var(--txt-max, 700px);
    margin: var(--txt-margin, 0 auto);
}

.ligne-type-photos-texte .ligne-page-row .texte-container a {
    text-decoration: underline;
}

@media (max-width: 1023px) {
    .ligne-type-photos-texte .ligne-page-row {
        flex-direction: var(--dir-m, column) !important;
        gap: var(--gap-m, 20px) !important;
    }

    .ligne-type-photos-texte .ligne-page-row .images-container {
        width: 100% !important;
        padding-top: var(--photo-pt-m, 0);
    }

    .ligne-type-photos-texte .ligne-page-row .images-container img {
        max-width: var(--photo-max-m, 320px) !important;
    }

    .ligne-type-photos-texte .ligne-page-row .images-container .photo-legende {
        max-width: var(--photo-max-m, 320px);
    }

    .ligne-type-photos-texte .ligne-page-row .images-container .photo-link.visible-desktop-only {
        display: none !important;
    }

    .ligne-type-photos-texte .ligne-page-row .images-container .photo-link.visible-mobile-only {
        display: block !important;
    }

    .ligne-type-photos-texte .ligne-page-row .images-container .photo-wrapper.visible-desktop-only {
        display: none !important;
    }

    .ligne-type-photos-texte .ligne-page-row .images-container .photo-wrapper.visible-mobile-only {
        display: flex !important;
    }

    .ligne-type-photos-texte .ligne-page-row .texte-container {
        width: 100% !important;
    }

    .ligne-type-photos-texte .ligne-page-row .texte-container > div {
        max-width: 800px;
    }
}


/* =============================================
   10. TYPE : texte_texte
   ============================================= */

.ligne-type-texte-texte .ligne-page-row {
    display: flex;
    flex-direction: var(--dir, row);
    align-items: flex-start;
    gap: var(--gap, 30px);
}

.ligne-type-texte-texte .ligne-page-row .texte1-container {
    flex: var(--txt1-flex, 50) 0 0;
    min-width: 0;
}

.ligne-type-texte-texte .ligne-page-row .texte1-container > div {
    max-width: var(--txt1-max, 700px);
    margin: var(--txt1-margin, 0 auto);
}

.ligne-type-texte-texte .ligne-page-row .texte2-container {
    flex: var(--txt2-flex, 50) 0 0;
    min-width: 0;
}

.ligne-type-texte-texte .ligne-page-row .texte2-container > div {
    max-width: var(--txt2-max, 700px);
    margin: var(--txt2-margin, 0 auto);
}

.ligne-type-texte-texte .ligne-page-row .texte1-container a,
.ligne-type-texte-texte .ligne-page-row .texte2-container a {
    text-decoration: underline;
}

@media (max-width: 1023px) {
    .ligne-type-texte-texte .ligne-page-row {
        flex-direction: var(--dir-m, column) !important;
        gap: var(--gap-m, 20px) !important;
    }

    .ligne-type-texte-texte .ligne-page-row .texte1-container {
        width: 100% !important;
    }

    .ligne-type-texte-texte .ligne-page-row .texte1-container > div {
        max-width: 800px;
    }

    .ligne-type-texte-texte .ligne-page-row .texte2-container {
        width: 100% !important;
    }

    .ligne-type-texte-texte .ligne-page-row .texte2-container > div {
        max-width: 800px;
    }
}


/* =============================================
   11. SOMMAIRE — Accordéon H2/H3
   Les H2 sont toujours visibles.
   Les H3 sont repliés sous leur H2 parent,
   dépliables via un chevron à droite du H2.
   
   ATTENTION : les styles du sommaire de base
   utilisent .sommaire-list li { margin: 0.5em !important }
   et des puces en ::before sur les <a>. Les règles ci-dessous
   doivent surcharger avec !important quand nécessaire.
   ============================================= */

/* Row flex pour aligner le lien H2 et le chevron toggle */
.sommaire-h2-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.sommaire-h2-row .h2-link {
    flex: 1;
    min-width: 0;
}

/* Le <li> parent H2 garde le même margin que les autres <li> */
.sommaire-list li.sommaire-h2-parent {
    list-style: none !important;
}

/* Bouton chevron toggle (dépliage H3) — zone de clic élargie */
.sommaire-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 6px 6px 20px;
    margin: -6px -6px -6px 0;
    color: #2c5f8d;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.sommaire-toggle:hover {
    background-color: rgba(44, 95, 141, 0.08);
}

/* Chevron à droite par défaut (replié) */
.sommaire-toggle .sommaire-toggle-chevron {
    transition: transform 0.25s ease;
}

/* Chevron tourné quand déplié */
.sommaire-toggle[aria-expanded="true"] .sommaire-toggle-chevron {
    transform: rotate(90deg);
}

/* Sous-liste H3 masquée par défaut (repliée) */
.sommaire-sub-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* Sous-liste H3 dépliée (au clic sur le chevron) */
.sommaire-sub-list.open {
    max-height: 500px;
}

/* Surcharger le margin global .sommaire-list li pour les <li> de la sous-liste */
.sommaire-sub-list > li {
    margin: 0.3em 0.5em !important;
}

.sommaire-sub-list > li:last-child {
    margin-bottom: 0 !important;
}

/* =============================================
   ESSAI DU RYTHME VERTICAL (étape 2, provisoire)
   Activé par ?rythme, en développement seulement.

   Les photos empilées d'un bloc photos_texte se partagent la hauteur
   laissée libre par le texte voisin : un demi-intervalle en haut, un
   intervalle entier entre deux photos, un demi-intervalle en bas —
   ce que fait « space-around ». Plus rien à régler, là où 46 blocs
   déclaraient un gap de 40 à 300 px, calé à la main pour une longueur
   de texte et une largeur d'écran données.
   ============================================= */

.page-generique--rythme .ligne-type-photos-texte .ligne-page-row .images-container {
    align-self: stretch;
    justify-content: space-around;
    /* Plancher : quand les photos sont plus hautes que le texte, il ne reste
       rien à partager et elles se toucheraient. Le gap s'ajoute au partage,
       donc il décale à peine la proportion quand l'espace est large. */
    gap: var(--photos-gap, 15px);
}

@media (max-width: 1023px) {
    /* En colonne, il n'y a plus de hauteur à partager : l'espacement
       redevient un simple gap. */
    .page-generique--rythme .ligne-type-photos-texte .ligne-page-row .images-container {
        align-self: auto;
        justify-content: flex-start;
        gap: var(--photos-gap, 15px);
    }
}


/* =============================================
   ALIGNER LES PHOTOS SOUS LE TITRE (aligner=paragraphe)

   Quand le texte d'un bloc s'ouvre sur un titre, les photos peuvent se
   caler sur le premier paragraphe plutôt que sur le titre. La ligne
   passe en grille : le titre occupe la première rangée de la colonne de
   texte, photos et texte la seconde. L'alignement est donc exact quelle
   que soit la hauteur du titre — l'ancien format demandait un décalage
   en pixels (40 ou 50), faux dès que le titre passait sur deux lignes.
   ============================================= */

/* La règle de mise en ligne « .ligne-type-photos-texte .ligne-page-row » est
   plus spécifique qu'un sélecteur de classe seul : le préfixe est nécessaire,
   sans quoi la ligne reste en flex et le titre vient se ranger à côté de la
   photo comme un troisième élément. */
.ligne-type-photos-texte .ligne-page-row--chapeau {
    display: grid;
    /* Des fractions, et non des pour cent : elles se partagent la largeur
       restante après la gouttière, comme le faisaient les deux colonnes flex
       en rétrécissant. Deux pistes en pour cent déborderaient de la gouttière. */
    grid-template-columns: var(--grille, 34fr 66fr);
    column-gap: var(--gap, 30px);
    /* La règle de mise en ligne pose « gap », qui vaut aussi entre les rangées
       d'une grille : sans ce retour à zéro, le titre s'éloigne de son texte de
       la largeur de la gouttière (30 px), alors qu'ailleurs ils se touchent. */
    row-gap: 0;
    align-items: start;
}

.ligne-type-photos-texte .ligne-page-row--chapeau .ligne-page-chapeau { grid-column: 2; grid-row: 1; }
.ligne-type-photos-texte .ligne-page-row--chapeau .images-container   { grid-column: 1; grid-row: 2; width: 100%; }
.ligne-type-photos-texte .ligne-page-row--chapeau .texte-container    { grid-column: 2; grid-row: 2; width: auto; }

/* Le titre garde la largeur et le centrage qu'il avait dans le texte, dont il
   vient d'être sorti : sans cela il s'élargit et se décale vers la gauche. */
.ligne-type-photos-texte .ligne-page-row--chapeau .ligne-page-chapeau {
    /* « width: 100% » est nécessaire : une marge automatique sur un élément de
       grille le ramène à la largeur de son contenu au lieu de l'étirer. */
    width: 100%;
    max-width: var(--txt-max, 700px);
    margin: var(--txt-margin, 0 auto);
}

/* Photos à droite : les colonnes s'échangent. Le sens est déclaré sur le
   conteneur du bloc, qui porte les variables, et non sur la ligne elle-même. */
.ligne-page-container[style*="--dir:row-reverse"] .ligne-page-row--chapeau .ligne-page-chapeau { grid-column: 1; }
.ligne-page-container[style*="--dir:row-reverse"] .ligne-page-row--chapeau .images-container   { grid-column: 2; }
.ligne-page-container[style*="--dir:row-reverse"] .ligne-page-row--chapeau .texte-container    { grid-column: 1; }

@media (max-width: 1023px) {
    /* En colonne, la grille n'a plus lieu d'être. L'ordre est posé élément par
       élément plutôt que laissé à « column-reverse » : celui-ci renverrait le
       titre tout en bas, alors qu'il appartenait au texte avant d'être sorti. */
    .ligne-type-photos-texte .ligne-page-row--chapeau,
    .ligne-page-container[style*="--dir:row-reverse"] .ligne-page-row--chapeau {
        display: flex !important;
        flex-direction: column !important;
        /* Pas de gouttière commune : elle sépare les photos du texte, mais
           écarterait aussi le titre du paragraphe qu'il annonce. L'espace est
           donc porté par le seul élément qui doit être détaché.
           « !important » est nécessaire : la règle de mise en colonne en pose
           un elle aussi. */
        gap: 0 !important;
    }

    /* En colonne, le texte s'élargit à 800 px : le titre suit, sans quoi il
       reste à 700 et se décale par rapport au paragraphe qu'il annonce. */
    .ligne-type-photos-texte .ligne-page-row--chapeau .ligne-page-chapeau {
        max-width: 800px;
    }

    /* Ordre courant : les photos, puis le titre et son texte. */
    .ligne-page-row--chapeau .images-container   { order: 0; }
    .ligne-page-row--chapeau .ligne-page-chapeau { order: 1; }
    .ligne-page-row--chapeau .texte-container    { order: 2; }

    /* Ordre courant : les photos ouvrent le bloc, le titre s'en détache. */
    .ligne-type-photos-texte .ligne-page-row--chapeau .ligne-page-chapeau {
        margin-top: var(--gap-m, 20px);
    }

    /* inverse-mobile : le titre et son texte passent avant les photos, et c'est
       alors aux photos de se détacher. */
    .ligne-page-container[style*="--dir-m:column-reverse"] .ligne-page-row--chapeau .ligne-page-chapeau { order: 0; margin-top: 0; }
    .ligne-page-container[style*="--dir-m:column-reverse"] .ligne-page-row--chapeau .texte-container    { order: 1; }
    .ligne-page-container[style*="--dir-m:column-reverse"] .ligne-page-row--chapeau .images-container   { order: 2; margin-top: var(--gap-m, 20px); }
}

/* =============================================
   RANDONNÉES PRÉFÉRÉES (snippet 124) DANS UN BLOC « TEXTE SEUL »

   En production, le bloc était dans une ligne « shortcode_seul », un
   simple conteneur bloc de toute la largeur de la ligne. Le nouveau format
   n'a qu'un type de bloc : « texte seul », conteneur flex au-delà de
   1 023 px où le contenu se réduit à sa largeur propre (1 045 px au lieu
   de 1 160 à 1 400 px). Même règle que la galerie des hubs (galerie.css).

   Sous 1 024 px, le bloc « texte seul » défile horizontalement
   (overflow-x: auto, pour les tableaux larges) : il coupait les lignes
   grises, pleine largeur par « margin: calc(-50vw + 50%) », à 92 % de
   l'écran (vu sur iPhone par François, 19/09/2026). La ligne de production
   ne défilait pas.
   ============================================= */

.texte-content:has(> .randos-preferees-container) {
    flex: 1 1 100%;
    overflow-x: visible;
}