/* =============================================
   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) calc(50vw - 50% + 20px) var(--pb, 40px);
    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: 320px !important;
    }

    .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: 320px !important;
    }

    .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%;
    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;
}

.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: 320px !important;
    }

    .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;
}