* ========================================
   1. Réglages généraux
======================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

:root {
    --vert-foret: #234b39;
    --vert-survol: #365f49;
    --beige-clair: #f3f1e8;
    --blanc: #ffffff;
}

/* ========================================
   2. Bandeau supérieur et logo
======================================== */

.bandeau {
    position: relative;
    width: 100%;
    height: 180px;
    background-image: url("../images/bandeau.jpg");
    background-size: cover;
    background-position: center 58%;
    background-repeat: no-repeat;
}

.bandeau-logo {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 340px;
    max-width: calc(100% - 30px);
    padding: 0;
    background: transparent;
}

.bandeau-logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* ========================================
   3. Menu de navigation
======================================== */

.navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 20px;
    background-color: var(--vert-foret);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navigation a {
    display: block;
    padding: 10px 16px;
    border-radius: 8px;
    color: var(--blanc);
    text-decoration: none;
    font-size: 16px;
    line-height: 1.4;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.navigation a:hover,
.navigation a:focus-visible {
    background-color: var(--vert-survol);
    color: var(--blanc);
}

.navigation a[aria-current="page"] {
    background-color: var(--beige-clair);
    color: var(--vert-foret);
    font-weight: bold;
}

/* ========================================
   4. Titre de la page
======================================== */

.titre-page {
    text-align: center;
    padding: 5px 20px 5px;
    margin: 0;
}

.titre-page h1 {
    margin: 0;
    font-size: 35px;
    line-height: 1.2;
}

/* ========================================
   5. Contenu principal
======================================== */


main {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 5px 30px 20px;
    flex: 1 0 auto;
}

/* Paragraphes justifiés */
.texte-justifie,
.texte-justifie-reglement {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 0;
    text-align: justify;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.texte-justifie {
    margin-bottom: 25px;
    font-size: 20px;
}

.texte-justifie-reglement {
    margin-bottom: 15px;
    font-size: 18px;
}

.texte-important {
    color: red;
}

/* ========================================
   6. Pied de page
======================================== */

footer {
    position: static;
    width: 100%;
    margin-top: 0;
    padding: 10px 20px;
    text-align: center;
    font-size: 14px;
    background-color: var(--vert-foret);
    color: var(--blanc);
     box-sizing: border-box;
}

footer p {
    margin: 0;
}

/* ========================================
   7. Tablettes
======================================== */

@media (min-width: 601px) and (max-width: 1024px) {
    .bandeau {
        height: 220px;
    }

    .titre-page h1 {
        font-size: 34px;
    }

    .texte-justifie {
        font-size: 20px;
    }
}

/* ========================================
   8. Téléphones
======================================== */

@media (max-width: 600px) {
    .bandeau {
        height: 150px;
    }

    .bandeau-logo {
        width: 240px;
    }

    .navigation {
        gap: 4px;
        padding: 10px;
    }

    .navigation a {
        padding: 9px 11px;
        font-size: 14px;
    }

    .titre-page {
        padding: 15px 15px 5px;
    }

    .titre-page h1 {
        font-size: 26px;
    }

   main {
    width: 100%;
    max-width: 100%;
    padding: 5px 15px 20px;
    }

    .texte-justifie {
        font-size: 18px;
    }

}

/* ========================================
   9. Présentation du parcours
======================================== */


/*.page-parcours {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 10px 15px 0;
    box-sizing: border-box;
}

.presentation-parcours {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

.texte-parcours {
    flex: 1;
    min-width: 0;
}

.texte-parcours .texte-justifie {
    margin-top: 0;
}

.image-parcours {
    flex: 0 0 30%;
}

.image-parcours img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

@media (max-width: 600px) {
    .presentation-parcours {
        flex-direction: column;
        gap: 20px;
    }

    .image-parcours {
        flex: auto;
        width: 100%;
    }
}
*/
/* ========================================
   10. Images cliquables et visionneuse
   Pour les pages utilisant .visionneuse
======================================== */

.image-cliquable {
    cursor: zoom-in;
}

.visionneuse {
    display: none;
    position: fixed;
    z-index: 2000;
    inset: 0;
    padding: 50px 20px;
    background: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}

.visionneuse img {
    display: block;
    max-width: 95%;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
}

.fermer-image {
    position: absolute;
    top: 15px;
    right: 25px;
    border: none;
    background: transparent;
    color: white;
    font-size: 42px;
    cursor: pointer;
}

.fermer-image:hover {
    color: #cccccc;
}

.legende-image {
    text-align: center;
    font-size: 0.9rem;
    font-style: italic;
    color: #555;
    margin-top: 8px;
}

/* ========================================
   12. Fenêtre d'agrandissement de la galerie
======================================== */

#lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    justify-content: center;
    align-items: center;
    padding: 60px 20px 20px;
}

#lightbox.ouverte {
    display: flex;
}

#image-agrandie {
    display: block;
    max-width: 95%;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
}

#fermer-lightbox {
    position: absolute;
    top: 15px;
    right: 25px;
    background: transparent;
    border: none;
    color: white;
    font-size: 44px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 5px 10px;
}

#fermer-lightbox:hover {
    color: #cccccc;
}

body.lightbox-ouverte {
    overflow: hidden;
}

/* Adaptation mobile de la lightbox */
@media (max-width: 600px) {
    #lightbox {
        padding: 50px 10px 15px;
    }

    #image-agrandie {
        max-width: 100%;
        max-height: 80vh;
    }

    #fermer-lightbox {
        top: 8px;
        right: 12px;
    }
}

/* ========================================
   Listes de conseils et présentation de l'association
======================================== */

.colonne-conseil {
    min-width: 0;
}

.colonne-conseil h3 {
    font-size: 20px;
    font-weight: normal;
    margin-bottom: 10px;
}

.listes-conseil {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    width: 100%;
}

/* Colonnes spécifiques à la page Association */
.page-aappma .colonne-conseil:first-child {
    flex: 1.5;
    min-width: 0;
}

.page-aappma .colonne-conseil:nth-child(2) {
    flex: 0.8;
    min-width: 0;
}

.image-conseil {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/*.image-conseil img {
    display: block;
    max-width: 25%;
    max-height: calc(100vh - 260px);
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: top;
}*/

@media (max-width: 900px) {
    .listes-conseil {
        flex-wrap: wrap;
    }

    .colonne-conseil {
        flex: 1 1 250px;
    }

    .image-conseil {
        flex: 1 1 100%;
    }

    .image-conseil img {
        max-height: 50vh;
        max-width: 100%;
    }
}
/* Autre présentation de listes, si utilisée ailleurs */
.listes-conseil2 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 90px;
    align-items: start;
    font-size: 20px;
}

@media (max-width: 768px) {
    .listes-conseil {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .listes-conseil2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .colonne-conseil img {
        height: auto;
    }
}


.colonne-image {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.colonne-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.page-ehda {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0px 15px 0;
    box-sizing: border-box;
}
/* ========================================
   Tarifs et cartes de pêche
======================================== */
.page-cartes {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0px 15px 0;
    box-sizing: border-box;
}

.texte-cartes-note {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 15px;
    font-style: italic;
}

.liste-prix {
    padding-left: 20px;
    max-width: 600px;
}

.liste-prix li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 0px;
}

.liste-prix li span {
    flex: 1;
}

.liste-prix li b {
    white-space: nowrap;
    text-align: right;
}

/* Empêcher les images de dépasser de leur conteneur */
img {
    max-width: 100%;
    height: auto;
}



/* ========================================
   Albums de la galerie photos
======================================== */

.albums-photos {
    max-width: 900px;
    margin: 15px auto;
    padding: 0 15px;
}

.album-photos {
    margin: 20px 0 25px;
    padding: 18px;
    background: var(--beige-clair);
    border-radius: 8px;
    border: 1px solid #dedbd0;
}

.album-photos h2 {
    margin: 0 0 8px;
    color: var(--vert-foret);
    font-size: 24px;
}

.album-description {
    margin: 0 0 12px;
}

.album-diaporama {
    position: relative;
    height: clamp(220px, 38vw, 500px);
    background: #e5e5e5;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.album-diaporama > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: zoom-in;
}

.album-fleche {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    border: 0;
    border-radius: 5px;
    color: white;
    background: var(--vert-foret);
    font-size: 22px;
    cursor: pointer;
}

.album-fleche:hover {
    background: var(--vert-survol);
}

.album-fleche.precedente {
    left: 10px;
}

.album-fleche.suivante {
    right: 10px;
}

.album-commandes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
    font-size: 14px;
}

.album-pause {
    padding: 6px 10px;
    color: var(--blanc);
    background: var(--vert-foret);
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}

.album-miniatures {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 3px 0 7px;
}

.album-miniatures button {
    flex: 0 0 60px;
    height: 45px;
    padding: 0;
    border: 2px solid transparent;
    background: transparent;
    opacity: 0.65;
    cursor: pointer;
}

.album-miniatures button.active {
    border-color: var(--vert-foret);
    opacity: 1;
}

.album-miniatures img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 600px) {
    .albums-photos {
        padding: 0 10px;
        margin: 10px auto;
    }

    .album-photos {
        padding: 12px;
        margin: 15px 0 20px;
    }

    .album-photos h2 {
        font-size: 20px;
    }

    .album-diaporama {
        height: 55vw;
        min-height: 200px;
        max-height: 300px;
    }

    .album-miniatures button {
        flex-basis: 52px;
        height: 38px;
    }
}


/* ========================================
   Page réglementation
======================================== */

.page-reglementation {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 15px 35px 20px;
    color: #292f2b;
    box-sizing: border-box;
}

.page-reglementation p {
    margin: 0 0 12px;
    line-height: 1.7;
}

.page-reglementation a {
    color: #234b39;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.page-reglementation a:hover {
    color: #365f49;
}

.intro-reglementation {
    margin-bottom: 15px;
    font-size: 18px;
}

.avertissement-document {
    padding: 14px 18px;
    border-left: 5px solid #234b39;
    border-radius: 0 6px 6px 0;
    background: #f3f1e8;
    font-weight: 700;
}

.regles-principales {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 15px;
}

.carte-reglementation {
    padding: 10px;
    border: 1px solid #dedfd8;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

.page-reglementation h2 {
    margin: 0 0 16px;
    color: #234b39;
    font-size: 23px;
    line-height: 1.35;
}

.page-reglementation h3 {
    margin: 0 0 6px;
    color: #234b39;
    font-size: 18px;
}

.information-mise-en-avant {
    padding: 12px 14px;
    border-radius: 6px;
    background: #f3f1e8;
    font-weight: 700;
}

.chiffres-reglementation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.chiffres-reglementation > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px 10px;
    border-radius: 8px;
    background: #f3f1e8;
    text-align: center;
}

.chiffres-reglementation strong {
    color: #234b39;
    font-size: 30px;
    line-height: 1.2;
}

.chiffres-reglementation span {
    font-size: 14px;
    line-height: 1.45;
}

.autres-regles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.autres-regles > h2 {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.ligne-reglementation {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 15px;
    border: 1px solid #dedfd8;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

/*.icone-reglementation {
    display: flex;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f3f1e8;
    font-size: 23px;
}*/

.ligne-reglementation > div:last-child {
    min-width: 0;
    width: 100%;
}

.ligne-reglementation p {
    margin-bottom: 0;
}


/* Blocs alerte et ressources côte à côte */
.blocs-reglementation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
    margin-top: 10px;
}

/* Chaque bloc occupe la largeur de sa colonne */
.blocs-reglementation .alerte-navigation,
.blocs-reglementation .ressources-reglementation {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
}

/* Sur téléphone : empilement vertical */
@media (max-width: 600px) {
    .blocs-reglementation {
        grid-template-columns: 1fr;
    }
}

.alerte-navigation {
    margin: 0px 0;
    padding: 10px 22px;
    border: 1px solid #e5b5ae;
    border-left: 6px solid #b42318;
    border-radius: 8px;
    background: #fff3f1;
    color: #842018;
}

.alerte-navigation strong {
    display: block;
    margin-bottom: 0px;
    font-size: 21px;
}

.alerte-navigation p {
    margin: 0;
    font-weight: 700;
}

.ressources-reglementation {
    margin-top: 20px;
    padding: 15px;
    border-radius: 8px;
    background: #f3f1e8;
}

.ressources-reglementation h2 {
    border-bottom-color: #d8d7cc;
}

.ressources-reglementation p {
    margin-bottom: 0;
}

/* Tablettes */
@media (max-width: 900px) {
    .page-reglementation {
        padding: 20px;
    }

    .regles-principales {
        gap: 15px;
    }

    .carte-reglementation {
        padding: 18px;
    }

    .autres-regles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Téléphones */
@media (max-width: 600px) {
    .page-reglementation {
        padding: 20px 15px 30px;
    }

    .intro-reglementation {
        font-size: 16px;
    }

   .regles-principales,
    .autres-regles {
        grid-template-columns: 1fr;
    }

    .regles-principales {
        gap: 15px;
        margin-bottom: 25px;
    }

    .page-reglementation h2 {
        font-size: 21px;
    }

    .page-reglementation h3 {
        font-size: 17px;
    }

    .carte-reglementation {
        padding: 17px;
    }

    .chiffres-reglementation strong {
        font-size: 26px;
    }

    .ligne-reglementation {
        padding: 17px;
    }

    .icone-reglementation {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        font-size: 20px;
    }

    .alerte-navigation,
    .ressources-reglementation {
        padding: 17px;
    }
}

/* ========================================
   Page d'accueil
======================================== */

/* Fond général de la page */
body:has(.galerie-accueil) {
    background: #f6f7f3;
    color: #29372e;
}

/* Titre principal */
.titre-page:has(+ main .galerie-accueil) {
    padding: 38px 20px 28px;
}

.titre-page:has(+ main .galerie-accueil) h1 {
    max-width: 900px;
    margin: 0 auto;
    color: #234b39;
    font-size: clamp(27px, 3.5vw, 38px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.6px;
}

.titre-page:has(+ main .galerie-accueil) h1::after {
    content: "";
    display: block;
    width: 58px;
    height: 4px;
    margin: 18px auto 0;
    border-radius: 4px;
    background: #c5a66b;
}

/* Largeur et espacement du contenu d'accueil */
body:has(.galerie-accueil) main {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 10px 30px 55px;
}

/* Encadré de l'annonce */
body:has(.galerie-accueil) .texte-justifie {
    max-width: 1000px;
    margin: 0 auto 38px;
    padding: 25px 30px;

    background: #fff;
    border: 1px solid #e5eae3;
    border-left: 5px solid #426b50;
    border-radius: 4px 14px 14px 4px;
    box-shadow: 0 6px 24px rgba(35, 75, 57, 0.07);

    color: #465449;
    font-size: 18px;
    line-height: 1.8;
    text-align: left;
}

/* Galerie */
body:has(.galerie-accueil) .galerie-accueil {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 24px;

    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0;
}

/* Cartes photos */
body:has(.galerie-accueil) .galerie-accueil figure {
    min-width: 0;
    max-width: none;
    margin: 0;
    overflow: hidden;

    background: #fff;
    border: 1px solid #e5eae3;
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(35, 75, 57, 0.08);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

body:has(.galerie-accueil) .galerie-accueil figure:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(35, 75, 57, 0.13);
}

/* Photos : le zoom JavaScript reste inchangé */
body:has(.galerie-accueil) .galerie-accueil img {
    display: block;
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 0;
    cursor: zoom-in;
    transition: transform 0.3s ease;
}

body:has(.galerie-accueil) .galerie-accueil figure:hover img {
    transform: scale(1.025);
}

body:has(.galerie-accueil) .galerie-accueil img:focus-visible {
    outline: 3px solid #c5a66b;
    outline-offset: -3px;
}

/* Légendes */
body:has(.galerie-accueil) .galerie-accueil figcaption {
    margin: 0;
    padding: 15px;
    background: #fff;
    color: #234b39;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    text-align: center;
}

/* Visionneuse existante : apparence uniquement */
#lightbox {
    background: rgba(8, 17, 12, 0.94);
    backdrop-filter: blur(5px);
}

#image-agrandie {
    border-radius: 8px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
}

#fermer-lightbox {
    color: #fff;
    transition: color 0.2s ease;
}

#fermer-lightbox:hover {
    color: #c5a66b;
}

/* Pied de page : uniquement sur la page d'accueil */
body:has(.galerie-accueil) footer {
    padding: 10px 20px;
    background: #234b39;
    color: #fff;
}

/* Tablettes */
@media (max-width: 800px) {
    body:has(.galerie-accueil) main {
        padding-right: 22px;
        padding-left: 22px;
    }

    body:has(.galerie-accueil) .galerie-accueil {
        gap: 16px;
    }

    body:has(.galerie-accueil) .galerie-accueil img {
        height: 210px;
    }
}

/* Téléphones */
@media (max-width: 600px) {
    .titre-page:has(+ main .galerie-accueil) {
        padding: 28px 16px 22px;
    }

    .titre-page:has(+ main .galerie-accueil) h1 {
        font-size: 27px;
    }

    body:has(.galerie-accueil) main {
        padding: 5px 16px 35px;
    }

    body:has(.galerie-accueil) .texte-justifie {
        margin-bottom: 25px;
        padding: 19px;
        font-size: 16px;
        line-height: 1.8;
    }

    body:has(.galerie-accueil) .galerie-accueil {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-top: 25px;
    }

    body:has(.galerie-accueil) .galerie-accueil img {
        height: auto;
        aspect-ratio: 4 / 3;
        max-height: 380px;
        object-fit: cover;
    }

    #lightbox {
        padding: 50px 10px 15px;
    }

    #image-agrandie {
        max-width: 100%;
        max-height: 80vh;
    }

    #fermer-lightbox {
        top: 8px;
        right: 12px;
    }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
    body:has(.galerie-accueil) .galerie-accueil figure,
    body:has(.galerie-accueil) .galerie-accueil img,
    #fermer-lightbox {
        transition: none;
    }
}


/* ========================================
   Page Association
======================================== */

.page-aappma {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 10px 15px 0;
    box-sizing: border-box;
    color: #29372e;
}


/* Présentation historique */
.page-aappma > .texte-justifie {
    margin: 0 0 25px;
    padding: 20px 25px;
    background: #fff;
    border: 1px solid #e5eae3;
    border-left: 5px solid #426b50;
    border-radius: 4px 14px 14px 4px;
    box-shadow: 0 6px 24px rgba(35, 75, 57, 0.07);
    color: #465449;
    font-size: 17px;
    line-height: 1.9;
    text-align: left;
     box-sizing: border-box;
}

/* Trois box côte à côte */
.page-aappma .listes-conseil {
    display: grid;
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(0, 0.85fr)
        minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
    width: 100%;
    margin: 0;
    font-size: 17px;
}

/* Box du bureau et des membres */
.page-aappma .colonne-conseil {
    min-width: 0;
    padding: 18px;
    background: #fff;
    border: 1px solid #e5eae3;
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(35, 75, 57, 0.06);
}

.page-aappma .colonne-conseil h3 {
    margin: 0 0 18px;
    padding-bottom: 12px;
    color: #234b39;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
    border-bottom: 2px solid #e8eee5;
}

.page-aappma .colonne-conseil ul {
    margin: 0;
    padding-left: 21px;
}

.page-aappma .colonne-conseil li {
    margin-bottom: 15px;
    padding-left: 3px;
    color: #465449;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.page-aappma .colonne-conseil li:last-child {
    margin-bottom: 0;
}

.page-aappma .colonne-conseil li::marker {
    color: #78916f;
}

/* Liens e-mail */
.page-aappma .colonne-conseil a {
    color: #315e43;
    font-size: 0.94em;
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color 0.2s ease;
}

.page-aappma .colonne-conseil a:hover {
    color: #94763e;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.page-aappma .colonne-conseil a:focus-visible {
    outline: 2px solid #c5a66b;
    outline-offset: 3px;
    border-radius: 2px;
}

/* Box de l'affiche */
.page-aappma .image-conseil {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-width: 0;
    margin: 0;
    padding: 15px;
    background: #fff;
    border: 1px solid #e5eae3;
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(35, 75, 57, 0.06);
}

.page-aappma .image-conseil img {
    display: block;
    width: 50%;
    max-width: 70%;
    max-height: 720px;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    cursor: zoom-in;
    transition: box-shadow 0.25s ease;
}

.page-aappma .image-conseil img:hover {
    box-shadow: 0 8px 24px rgba(35, 75, 57, 0.14);
}

.page-aappma .image-conseil img:focus-visible {
    outline: 3px solid #c5a66b;
    outline-offset: 4px;
}

/* Pied de page */
body:has(.page-aappma) footer {
    padding: 10px 20px;
    background-color: #234b39;
    color: #fff;
}

/* Tablettes */
@media (max-width: 900px) {
    .page-aappma {
        padding: 20px 18px 30px;
    }

    .page-aappma .listes-conseil {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .page-aappma .image-conseil {
        grid-column: 1 / -1;
    }

    .page-aappma .image-conseil img {
        width: auto;
        max-width: 100%;
        max-height: 60vh;
    }
}

/* Téléphones */
@media (max-width: 600px) {
    .page-aappma {
        padding: 20px 12px 30px;
    }

    .page-aappma > .texte-justifie {
        margin-bottom: 24px;
        padding: 20px;
        font-size: 16px;
        line-height: 1.8;
    }

    .page-aappma .listes-conseil {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
    }

    .page-aappma .colonne-conseil {
        padding: 18px;
    }

    .page-aappma .colonne-conseil h3 {
        font-size: 19px;
    }

    .page-aappma .colonne-conseil li {
        margin-bottom: 14px;
    }

    .page-aappma .image-conseil {
        grid-column: auto;
        padding: 12px;
    }

    .page-aappma .image-conseil img {
        width: auto;
        max-width: 100%;
        max-height: 75vh;
    }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
    .page-aappma .colonne-conseil a,
    .page-aappma .image-conseil img {
        transition: none;
    }
}


/* ========================================
   PAGE CARTES DE PÊCHE
   Styles limités au contenu principal
   ======================================== */

.page-cartes {
    --cartes-vert: #285b42;
    --cartes-vert-fonce: #1c4230;
    --cartes-vert-clair: #edf4ee;
    --cartes-texte: #29372e;
    --cartes-secondaire: #68766c;
    --cartes-bordure: #dfe7df;

    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 42px 24px 20px;
    color: var(--cartes-texte);
}

.page-cartes *,
.page-cartes *::before,
.page-cartes *::after {
    box-sizing: border-box;
}

/* Introduction */

.page-cartes .cartes-introduction {
    max-width: 850px;
    margin: 0 auto 48px;
    padding: 38px 24px;
    text-align: center;
    background: linear-gradient(135deg, #edf4ee, #f8faf7);
    border: 1px solid #e1eae1;
    border-radius: 22px;
}

.page-cartes .cartes-surtitre {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--cartes-vert);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.page-cartes .cartes-introduction h1 {
    margin: 0 0 16px;
    color: var(--cartes-vert-fonce);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
}

.page-cartes .cartes-introduction > p:not(.cartes-info-achat) {
    max-width: 620px;
    margin: 0 auto 24px;
    color: var(--cartes-secondaire);
    font-size: 1.05rem;
    line-height: 1.75;
}

.page-cartes .bouton-achat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 24px;
    border: 2px solid var(--cartes-vert);
    border-radius: 10px;
    background: var(--cartes-vert);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease,
                transform 0.2s ease,
                border-color 0.2s ease;
}

.page-cartes .bouton-achat:hover {
    background: var(--cartes-vert-fonce);
    border-color: var(--cartes-vert-fonce);
    transform: translateY(-2px);
}

.page-cartes .bouton-achat:focus-visible,
.page-cartes .lien-carte:focus-visible {
    outline: 3px solid #8db99b;
    outline-offset: 4px;
}

.page-cartes .cartes-info-achat {
    margin: 14px 0 0;
    color: var(--cartes-secondaire);
    font-size: 0.85rem;
}

/* Titre de la section tarifs */

.page-cartes .tarifs-cartes {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.page-cartes .titre-section-cartes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.page-cartes .titre-section-cartes .cartes-surtitre {
    margin-bottom: 5px;
}

.page-cartes .titre-section-cartes h2 {
    margin: 0;
    color: var(--cartes-vert-fonce);
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.page-cartes .badge-annee {
    flex-shrink: 0;
    padding: 8px 13px;
    border: 1px solid #d4e3d6;
    border-radius: 999px;
    background: var(--cartes-vert-clair);
    color: var(--cartes-vert);
    font-size: 0.85rem;
    font-weight: 700;
}

/* Cartes de prix */

.page-cartes .grille-cartes-prix {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 24px;
}

.page-cartes .carte-prix {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 26px;
    border: 1px solid var(--cartes-bordure);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 5px 20px rgb(31 62 42 / 6%);
    transition: box-shadow 0.2s ease,
                transform 0.2s ease;
}

.page-cartes .carte-prix:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgb(31 62 42 / 10%);
}

.page-cartes .carte-prix-entete {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--cartes-bordure);
}

.page-cartes .icone-carte {
    display: grid;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 14px;
    background: var(--cartes-vert-clair);
    font-size: 1.5rem;
}

.page-cartes .carte-prix-entete h3 {
    margin: 0 0 5px;
    color: var(--cartes-vert-fonce);
    font-size: 1.25rem;
}

.page-cartes .carte-prix-entete p {
    margin: 0;
    color: var(--cartes-secondaire);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Liste des tarifs */

.page-cartes .liste-prix {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-cartes .liste-prix li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid #edf0ed;
}

.page-cartes .liste-prix li:first-child {
    padding-top: 0;
}

.page-cartes .liste-prix li:last-child {
    border-bottom: 0;
}

.page-cartes .liste-prix li span {
    min-width: 0;
    color: var(--cartes-texte);
    font-size: 0.95rem;
    line-height: 1.5;
}

.page-cartes .liste-prix li strong {
    flex-shrink: 0;
    color: var(--cartes-vert);
    font-size: 1.05rem;
    font-weight: 800;
    white-space: nowrap;
}

/* Carte E.H.D.A. */

.page-cartes .carte-prix-ehda {
    background: linear-gradient(180deg, #fff 0%, #f9fbf8 100%);
}

.page-cartes .note-ehda {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 13px;
    border-radius: 10px;
    background: var(--cartes-vert-clair);
    color: var(--cartes-vert-fonce);
}

.page-cartes .note-ehda > span {
    font-weight: 800;
}

.page-cartes .note-ehda p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
}

/* Liens vers la billetterie */

.page-cartes .lien-carte {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 22px;
    color: var(--cartes-vert);
    font-weight: 750;
    text-decoration: none;
}

.page-cartes .lien-carte span {
    font-size: 1.25rem;
    transition: transform 0.2s ease;
}

.page-cartes .lien-carte:hover {
    color: var(--cartes-vert-fonce);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.page-cartes .lien-carte:hover span {
    transform: translateX(4px);
}

/* Note d'information */

.page-cartes .note-cartes {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    max-width: 1100px;
    margin: 28px auto 0;
    padding: 22px 24px;
    border: 1px solid #dce8dd;
    border-radius: 14px;
    background: #f5f8f4;
}

.page-cartes .note-cartes-icone {
    display: grid;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: var(--cartes-vert);
    color: #fff;
    font-weight: 800;
}

.page-cartes .note-cartes h2 {
    margin: 2px 0 6px;
    color: var(--cartes-vert-fonce);
    font-size: 1.05rem;
}

.page-cartes .note-cartes p {
    margin: 0;
    color: var(--cartes-texte);
    font-size: 0.95rem;
    line-height: 1.75;
}

/* Tablettes */

@media (max-width: 760px) {
    .page-cartes {
        padding: 28px 18px 36px;
    }

    .page-cartes .cartes-introduction {
        margin-bottom: 34px;
        padding: 30px 20px;
    }

    .page-cartes .grille-cartes-prix {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .page-cartes .carte-prix {
        padding: 22px;
    }
}

/* Téléphones */

@media (max-width: 480px) {
    .page-cartes {
        padding: 22px 14px 30px;
    }

    .page-cartes .cartes-introduction {
        padding: 26px 16px;
        border-radius: 16px;
    }

    .page-cartes .titre-section-cartes {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .page-cartes .carte-prix {
        padding: 18px;
        border-radius: 14px;
    }

    .page-cartes .carte-prix-entete {
        gap: 12px;
    }

    .page-cartes .icone-carte {
        width: 44px;
        height: 44px;
        font-size: 1.3rem;
    }

    .page-cartes .liste-prix li {
        gap: 10px;
    }

    .page-cartes .liste-prix li span {
        font-size: 0.9rem;
    }

    .page-cartes .liste-prix li strong {
        font-size: 0.98rem;
    }

    .page-cartes .note-cartes {
        padding: 18px 16px;
    }
}

/* ========================================
   PAGE E.H.D.A.
   ======================================== */

/* 1. Variables et conteneur principal */

.page-ehda {
    --ehda-vert: #285b42;
    --ehda-vert-fonce: #1c4230;
    --ehda-fond: #edf4ee;
    --ehda-texte: #29372e;
    --ehda-secondaire: #68766c;
    --ehda-bordure: #dfe7df;

    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5px 24px 20px;
    color: var(--ehda-texte);
}

.page-ehda *,
.page-ehda *::before,
.page-ehda *::after {
    box-sizing: border-box;
}


/* 2. Titre de page */

.titre-page h1 {
    color: var(--ehda-vert-fonce);
    text-align: center;
    line-height: 1.25;
}


/* 3. Introduction : présentation et prix */

.page-ehda .ehda-introduction {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    align-items: start;
    gap: 24px;
    margin: 0 auto 15px;
    padding: 24px;
    border: 1px solid #e1eae1;
    border-radius: 20px;
    background: linear-gradient(135deg, #edf4ee, #f8faf7);
}

/* Présentation */

.page-ehda .ehda-presentation {
    min-width: 0;
}

.page-ehda .ehda-presentation p {
    margin: 0;
    color: var(--ehda-secondaire);
    font-size: 1rem;
    line-height: 1.8;
}

/* Prix */

.page-ehda .ehda-prix {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    min-width: 0;
    margin: 0;
    padding: 16px 12px;

    border: 1px solid var(--ehda-bordure);
    border-left: 4px solid var(--ehda-vert);
    border-radius: 10px;
    background: var(--ehda-fond);
}

.page-ehda .ehda-prix h3 {
    margin: 0;
    color: var(--ehda-vert-fonce);
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    line-height: 1.2;
    text-align: center;
}


/* 4. Section des associations */

.page-ehda .ehda-associations {
    margin: 0;
}

.page-ehda .ehda-section-entete {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.page-ehda .ehda-section-entete .ehda-surtitre {
    margin-bottom: 5px;
}

.page-ehda .ehda-section-entete h2 {
    margin: 0;
    color: var(--ehda-vert-fonce);
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
}

/* Surtitres */

.page-ehda .ehda-surtitre {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--ehda-vert);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Compteur éventuel */

.page-ehda .ehda-compteur {
    flex-shrink: 0;
    padding: 8px 13px;
    border: 1px solid #d4e3d6;
    border-radius: 999px;
    background: var(--ehda-fond);
    color: var(--ehda-vert);
    font-size: 0.85rem;
    font-weight: 700;
}


/* 5. Grille des associations */

.page-ehda .ehda-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}


/* 6. Cartes des associations */

.page-ehda .ehda-carte {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 14px;

    min-width: 0;
    padding: 14px;

    border: 1px solid var(--ehda-bordure);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 16px rgb(31 62 42 / 4%);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

/* Numéro de l'association */

.page-ehda .ehda-numero {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    border-radius: 12px;
    background: var(--ehda-fond);
    color: var(--ehda-vert);
    font-size: 0.85rem;
    font-weight: 800;
}

/* Nom de l'association */

.page-ehda .ehda-carte h3 {
    margin: 0 0 7px;
    font-size: 1.02rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.page-ehda .ehda-carte h3 a {
    color: var(--ehda-vert-fonce);
    text-decoration: none;
    text-underline-offset: 3px;
}

.page-ehda .ehda-carte h3 a:hover {
    color: var(--ehda-vert);
    text-decoration: underline;
}

/* Commune */

.page-ehda .ehda-commune {
    margin: 0;
    color: var(--ehda-secondaire);
    font-size: 0.88rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Flèche vers le site */

.page-ehda .ehda-fleche {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border: 1px solid var(--ehda-bordure);
    border-radius: 50%;
    color: var(--ehda-vert);
    font-size: 1rem;
    text-decoration: none;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

/* Association locale */

.page-ehda .ehda-carte-locale {
    border-color: #b8d0bd;
    background: linear-gradient(135deg, #f4f8f3, #fff);
}

/* Badge éventuel */

.page-ehda .ehda-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    background: #e2eee3;
    color: var(--ehda-vert-fonce);
    font-size: 0.72rem;
    font-weight: 700;
}


/* 7. Effets interactifs */

@media (hover: hover) {
    .page-ehda .ehda-carte:hover {
        transform: translateY(-2px);
        border-color: #b8d0bd;
        box-shadow: 0 9px 22px rgb(31 62 42 / 8%);
    }

    .page-ehda .ehda-fleche:hover {
        border-color: var(--ehda-vert);
        background: var(--ehda-vert);
        color: #fff;
    }
}

/* Accessibilité : navigation au clavier */

.page-ehda .ehda-carte a:focus-visible {
    outline: 2px solid var(--ehda-vert);
    outline-offset: 4px;
}


/* 8. Tablettes */

@media (max-width: 800px) {
    .page-ehda {
        padding: 24px 18px 30px;
    }

    .page-ehda .ehda-introduction {
        grid-template-columns: minmax(0, 1fr) 150px;
        gap: 18px;
        padding: 20px;
    }

    .page-ehda .ehda-grille {
        gap: 12px;
    }

    .page-ehda .ehda-carte {
        grid-template-columns: 34px minmax(0, 1fr) 30px;
        gap: 10px;
        padding: 12px;
    }

    .page-ehda .ehda-numero {
        width: 34px;
        height: 34px;
    }

    .page-ehda .ehda-fleche {
        width: 30px;
        height: 30px;
    }
}


/* 9. Téléphones */

@media (max-width: 600px) {
    .page-ehda {
        padding: 20px 14px 26px;
    }

    /* Présentation puis prix */

    .page-ehda .ehda-introduction {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        margin-bottom: 28px;
        padding: 22px 18px;
        border-radius: 16px;
    }

    .page-ehda .ehda-prix {
        justify-content: flex-start;
        padding: 12px 16px;
    }

    .page-ehda .ehda-prix h3 {
        font-size: 1.8rem;
    }

    /* En-tête de la liste */

    .page-ehda .ehda-section-entete {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    /* Une carte par ligne */

    .page-ehda .ehda-grille {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .page-ehda .ehda-carte {
        grid-template-columns: 36px minmax(0, 1fr) 30px;
        gap: 12px;
        padding: 14px;
    }

    .page-ehda .ehda-numero {
        width: 36px;
        height: 36px;
    }

    .page-ehda .ehda-carte h3 {
        font-size: 1rem;
    }
}


/* 10. Réduction des animations si demandée */

@media (prefers-reduced-motion: reduce) {
    .page-ehda .ehda-carte,
    .page-ehda .ehda-fleche {
        transition: none;
    }

    .page-ehda .ehda-carte:hover {
        transform: none;
    }
}

/* ========================================
   PAGE PARCOURS DE PÊCHE
   ======================================== */

.page-parcours {
    --parcours-vert: #285b42;
    --parcours-vert-fonce: #1c4230;
    --parcours-fond: #f3f7f2;
    --parcours-texte: #29372e;
    --parcours-secondaire: #68766c;
    --parcours-bordure: #dfe7df;

    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 24px 10px;
    color: var(--parcours-texte);
}

.page-parcours *,
.page-parcours *::before,
.page-parcours *::after {
    box-sizing: border-box;
}

/* En-tête */

.page-parcours .parcours-entete {
    max-width: 760px;
    margin: 0 auto 32px;
    text-align: center;
}

.page-parcours .parcours-surtitre {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--parcours-vert);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.6;
    text-transform: uppercase;
}

.page-parcours .parcours-entete h1 {
    margin: 0 0 14px;
    color: var(--parcours-vert-fonce);
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.page-parcours .parcours-entete > p {
    max-width: 640px;
    margin: 0 auto;
    color: var(--parcours-secondaire);
    font-size: 1.05rem;
    line-height: 1.8;
}

/* Chiffres clés */

.page-parcours .parcours-chiffres {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}

.page-parcours .parcours-chiffre {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--parcours-bordure);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 18px rgb(31 62 42 / 4%);
}

.page-parcours .parcours-chiffre-icone {
    display: grid;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 14px;
    background: #eaf2e9;
    color: var(--parcours-vert);
    font-size: 1.5rem;
}

.page-parcours .parcours-chiffre > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.page-parcours .parcours-chiffre strong {
    color: var(--parcours-vert-fonce);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.3;
}

.page-parcours .parcours-chiffre > div > span {
    color: var(--parcours-secondaire);
    font-size: 0.84rem;
    line-height: 1.5;
}

/* Bloc principal */

.page-parcours .parcours-presentation {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
    gap: 34px;
    padding: 30px;
    border: 1px solid var(--parcours-bordure);
    border-radius: 22px;
    background: linear-gradient(135deg, #fff, #f8faf7);
    box-shadow: 0 12px 36px rgb(31 62 42 / 5%);
}

.page-parcours .parcours-texte {
    min-width: 0;
}

.page-parcours .parcours-texte h2 {
    margin: 0 0 20px;
    color: var(--parcours-vert-fonce);
    font-size: clamp(1.55rem, 2.5vw, 2rem);
    line-height: 1.3;
    letter-spacing: -0.025em;
}

.page-parcours .parcours-texte > p {
    margin: 0 0 16px;
    color: var(--parcours-secondaire);
    font-size: 0.98rem;
    line-height: 1.85;
}

/* Limites du parcours */

.page-parcours .parcours-limites {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--parcours-bordure);
    border-radius: 14px;
    background: var(--parcours-fond);
}

.page-parcours .parcours-limites h3 {
    margin: 0 0 12px;
    color: var(--parcours-vert-fonce);
    font-size: 1.05rem;
}

.page-parcours .parcours-limites ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding-left: 20px;
    color: var(--parcours-secondaire);
    line-height: 1.7;
}

.page-parcours .parcours-limites li {
    padding-left: 3px;
}

.page-parcours .parcours-limites strong {
    color: var(--parcours-vert-fonce);
}

/* Alerte réglementaire */

.page-parcours .parcours-alerte {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 13px;
    margin-top: 22px;
    padding: 20px;
    border: 1px solid #e5b5ae;
    border-left: 4px solid #b42318;;
    border-radius: 8px;
    background: #fff3f1;
}

.page-parcours .parcours-alerte-icone {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border-radius: 50%;
    background: #f3e5c8;
    color: #80500e;
    font-size: 1.2rem;
    font-weight: 900;
}

.page-parcours .parcours-alerte h3 {
    margin: 0 0 10px;
    color: #71480e;
    font-size: 1rem;
    line-height: 1.5;
}

.page-parcours .parcours-alerte p {
    margin: 0;
    color:#b42318;;
    font-size: 1rem;
    line-height: 1.75;
}

.page-parcours .parcours-alerte p + p {
    margin-top: 10px;
    font-weight: 700;
}

/* Anecdote géographique */

.page-parcours .parcours-texte > .parcours-anecdote {
    margin: 22px 0 0;
    padding-left: 16px;
    border-left: 3px solid #a8c4ad;
    color: var(--parcours-secondaire);
    font-size: 0.93rem;
    font-style: italic;
    line-height: 1.8;
}

/* Photographie */

.page-parcours .parcours-visuel {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--parcours-bordure);
    border-radius: 18px;
    background: #fff;
}

.page-parcours .parcours-image-bouton {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    background: #e8eee7;
    cursor: zoom-in;
    text-align: left;
}

.page-parcours .parcours-image-bouton img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 650px;
    object-fit: contain;
    transition: transform 0.35s ease;
}

.page-parcours .parcours-image-indication {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 10px;
    background: rgb(20 48 34 / 88%);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
}

.page-parcours .parcours-image-indication > span {
    font-size: 1.1rem;
}

.page-parcours .legende-image {
    padding: 13px 5px 4px;
    color: var(--parcours-secondaire);
    font-size: 0.83rem;
    line-height: 1.6;
}

/* Bloc découverte */

.page-parcours .parcours-decouverte {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 26px;
    padding: 25px 28px;
    border: 1px solid #d7e5d8;
    border-radius: 18px;
    background: linear-gradient(120deg, #eaf2e9, #f7faf5);
}

.page-parcours .parcours-decouverte-icone {
    display: grid;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 16px;
    background: var(--parcours-vert);
    color: #fff;
    font-size: 2rem;
}

.page-parcours .parcours-decouverte h2 {
    margin: 0 0 7px;
    color: var(--parcours-vert-fonce);
    font-size: 1.2rem;
    line-height: 1.4;
}

.page-parcours .parcours-decouverte p {
    margin: 0;
    color: var(--parcours-secondaire);
    font-size: 0.93rem;
    line-height: 1.75;
}

/* Visionneuse */

.visionneuse[hidden] {
    display: none !important;
}

.visionneuse {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 24px 24px;
    background: rgb(9 22 15 / 92%);
    backdrop-filter: blur(5px);
}

.visionneuse #image-agrandie {
    display: block;
    max-width: min(1100px, 100%);
    max-height: calc(100vh - 100px);
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 70px rgb(0 0 0 / 35%);
}

.visionneuse .fermer-image {
    position: absolute;
    top: 18px;
    right: 22px;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 50%;
    background: rgb(255 255 255 / 12%);
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

body.visionneuse-ouverte {
    overflow: hidden;
}

/* Focus clavier */

.page-parcours a:focus-visible,
.page-parcours button:focus-visible,
.visionneuse button:focus-visible {
    outline: 3px solid #8bb99a;
    outline-offset: 4px;
}

/* Tablettes */

@media (max-width: 900px) {
    .page-parcours {
        padding: 34px 20px 42px;
    }

    .page-parcours .parcours-presentation {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding: 24px;
    }

    .page-parcours .parcours-visuel {
        width: 100%;
    }

    .page-parcours .parcours-image-bouton img {
        max-height: 520px;
    }
}

/* Téléphones */

@media (max-width: 600px) {
    .page-parcours {
        padding: 28px 14px 34px;
    }

    .page-parcours .parcours-entete {
        margin-bottom: 24px;
    }

    .page-parcours .parcours-entete h1 {
        font-size: clamp(1.85rem, 8vw, 2.5rem);
    }

    .page-parcours .parcours-entete > p {
        font-size: 0.95rem;
    }

    .page-parcours .parcours-chiffres {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin-bottom: 18px;
    }

    .page-parcours .parcours-chiffre {
        padding: 14px 16px;
    }

    .page-parcours .parcours-chiffre-icone {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
    }

    .page-parcours .parcours-presentation {
        gap: 24px;
        padding: 18px;
        border-radius: 17px;
    }

    .page-parcours .parcours-texte h2 {
        font-size: 1.55rem;
    }

    .page-parcours .parcours-texte > p {
        font-size: 0.94rem;
        line-height: 1.8;
    }

    .page-parcours .parcours-limites,
    .page-parcours .parcours-alerte {
        padding: 16px;
    }

    .page-parcours .parcours-alerte {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 10px;
    }

    /*.page-parcours .parcours-alerte-icone {
        width: 30px;
        height: 30px;
    }*/
    .page-parcours .parcours-alerte-icone {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    font-size: 2rem;
    line-height: 1;
}

    .page-parcours .parcours-visuel {
        padding: 7px;
        border-radius: 14px;
    }

    .page-parcours .parcours-image-bouton img {
        max-height: 420px;
    }

    .page-parcours .parcours-image-indication {
        right: 8px;
        bottom: 8px;
        padding: 8px 10px;
        font-size: 0.75rem;
    }

    .page-parcours .parcours-decouverte {
        align-items: flex-start;
        gap: 14px;
        padding: 19px;
    }

    .page-parcours .parcours-decouverte-icone {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 1.6rem;
    }

    .page-parcours .parcours-decouverte h2 {
        font-size: 1.05rem;
    }

    .visionneuse {
        padding: 60px 12px 16px;
    }

    .visionneuse #image-agrandie {
        max-height: calc(100vh - 90px);
    }

    .visionneuse .fermer-image {
        top: 12px;
        right: 12px;
    }
}

/* Respect des préférences d'animation */

@media (prefers-reduced-motion: reduce) {
    .page-parcours .parcours-image-bouton img {
        transition: none;
    }
} préférences d'animation */

@media (prefers-reduced-motion: reduce) {
    .page-parcours .parcours-image-bouton img {
        transition: none;
    }
}


/* =========================================
   CORRECTION MOBILE - PAGE INDEX UNIQUEMENT
   ========================================= */

@media screen and (max-width: 600px) {

    /* Empêche les éléments de forcer la largeur de la page */
    body:has(.galerie-accueil) {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        overflow-x: clip;
    }

    body:has(.galerie-accueil) *,
    body:has(.galerie-accueil) *::before,
    body:has(.galerie-accueil) *::after {
        box-sizing: border-box;
    }

    /* Bandeau du haut */
    body:has(.galerie-accueil) .bandeau {
        width: 100%;
        max-width: 100%;
    }

    body:has(.galerie-accueil) .bandeau-logo img {
        max-width: 100%;
        height: auto;
    }

    /* Menu : autorise le retour à la ligne */
    body:has(.galerie-accueil) .navigation {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    body:has(.galerie-accueil) .navigation a {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* Titre : le texte peut revenir à la ligne */
    body:has(.galerie-accueil) .titre-page {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 15px;
    }

    body:has(.galerie-accueil) .titre-page h1 {
        max-width: 100%;
        min-width: 0;
        margin: 0;
        font-size: clamp(21px, 5.5vw, 30px);
        line-height: 1.3;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    /* Contenu principal */
    body:has(.galerie-accueil) main {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 15px 16px 30px;
    }

    /* Texte d'introduction */
    body:has(.galerie-accueil) main p {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    /* Galerie : une photo par ligne */
    body:has(.galerie-accueil) .galerie-accueil {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 20px 0;
    }

    body:has(.galerie-accueil) .galerie-accueil figure {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
    }

    body:has(.galerie-accueil) .galerie-accueil img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        object-fit: contain;
    }

    /* Légendes */
    body:has(.galerie-accueil) .galerie-accueil figcaption {
        max-width: 100%;
        overflow-wrap: anywhere;
        text-align: center;
    }

    /* Pied de page */
    body:has(.galerie-accueil) footer {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow-wrap: anywhere;
    }
}
  min-width: 0;
        box-sizing: border-box;
        overflow-wrap: anywhere;
    }
}