/****************************************************************/
/*                  presentation de du bas de page              */
/****************************************************************/
/* Voir la section « BAS DE PAGE » plus bas dans ce fichier */


#block3 > .inner {
  border-radius: 0px 0px 25px 25px;
}

/****************************************************************/
/*           presentation de l'entete de la page d'accueil      */
/****************************************************************/
#maincontent {
	margin-bottom: 10px;
}

#conteneuraccueil{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    padding-bottom: 30px;
}
.itemaccueil {
    background-color: #ebd4c3;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 15px;

/*    min-width: 150px;
    max-width: 300px; */
    margin-top: 50px;
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
        /* 4 items sur une ligne par défaut (grand écran) */
    flex: 0 1 calc(25% - 20px);
    max-width: calc(25% - 20px);

 }

.titreaccueil {
    min-height: 60px;           /* même hauteur pour les 4 titres */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #000000;
    margin: 10px 0;
}

.texteaccueil {
    min-height: 100px;          /* même hauteur pour les 4 textes */
    text-align: justify;
    color: #000000;
    margin: 0;
}

/* Écran moyen : 2 items par ligne */
@media (max-width: 1100px) {
    .itemaccueil {
        flex: 0 1 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }
}

/* Petit écran : 1 item par ligne */
@media (max-width: 700px) {
    .itemaccueil {
        flex: 0 1 calc(100% - 20px);
        max-width: calc(100% - 20px);
    }
}


/* ---- Comment nous agissons : étapes numérotées (1 → 4) ---- */
#conteneuraccueil {
    counter-reset: etape;
}
.itemaccueil {
    counter-increment: etape;
    position: relative;
}
/* pastille numérotée en haut à gauche de chaque carte */
.itemaccueil::before {
    content: counter(etape);
    position: absolute;
    top: 12px;
    left: 12px;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    border-radius: 50%;
    background-color: #a84b2a;
    color: #ffffff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 22px;
    font-weight: bold;
    box-sizing: content-box;
    box-shadow: #4d4c48 2px 2px 5px 0px;
}
/* chevron entre deux étapes (sauf après la dernière) */
.itemaccueil:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -17px;
    transform: translateY(-50%);
    border-left: 11px solid #a84b2a;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}
/* en 2 colonnes ou en 1 colonne, les chevrons n'ont plus de sens */
@media (max-width: 1100px) {
    .itemaccueil:not(:last-child)::after {
        display: none;
    }
}


/* coin arrondi pour comment nous agissons */
#ContenantEnteteAccueil .tableresponsive td {
    border-radius: 15px;
}
#ContenantEnteteAccueil .tableresponsive td:not(:first-child) {
    margin-top: 50px;
}
/* Ne pas afficher les image d'introduction */
.NePasAfficher{
    display: none;
    
}
/****************************************************************/
/*              presentation des articles                       */
/****************************************************************/
.leading-0, .leading-1 {
	padding:10px;
}

.item-content, .item-page, .com-content-category-blog__item  {
    /*background: #F5E7DC;*/
    margin-bottom: 15px;
    margin-top: 15px;
    padding-left: 10px;
    padding-right: 10px;  
}

/* Repositionne visuellement le bouton "Lire la suite" juste après le texte de
   l'article, avant la mention "Article publié le...". Le HTML généré par Joomla
   garde son ordre d'origine (texte, date, bouton) ; on ne change que l'affichage. */
.item-content {
    display: flex;
    flex-direction: column;
}
.item-content .tck-article-body {
    order: 1;
}
.item-content .readmore {
    order: 2;
}
.item-content .article-info {
    order: 3;
}

/* boutons de navigation */
.pagenavigation{             
	padding-left:10px;
	padding-right:10px;
}

/* Quand il n'y a qu'un seul bouton (le premier ou le dernier article),
   le conteneur flex n'a plus d'espace à répartir entre deux éléments :
   le bouton "Suivant" retombe donc à gauche par défaut. On le pousse
   explicitement à droite dans ce cas précis. */
.pagenavigation .pagination .next:only-child {
    margin-left: auto;
}

/* barre de pagination */
.com-content-category-blog__pagination {
	margin-left: auto;
    margin-right: auto;
}

/* Sur mobile : n'afficher que 3 numéros de page (sur les 10 emplacements fixes,
   du 3e au 12e élément de la liste - puces 1 et 2 = début/précédent, 13 et 14 =
   suivant/fin). La fenêtre de 3 suit la page active (centrée sur elle) et se cale
   contre le bord quand on est en tout début ou toute fin de liste.
   Suppose que la pagination affiche toujours 10 numéros (cas où le nombre total
   de pages est supérieur ou égal à 10) ; à revoir si ce n'est plus le cas. */
@media (max-width: 670px) {
    .tck-pagination .page-item:not(:has(span[class*="icon-angle"])):not(.active) {
        display: none;
    }

    /* début de liste : 3 premiers numéros */
    .tck-pagination:has(> .page-item:nth-child(3).active) .page-item:nth-child(n+3):nth-child(-n+5),
    .tck-pagination:has(> .page-item:nth-child(4).active) .page-item:nth-child(n+3):nth-child(-n+5),
    /* milieu de liste : page active au centre */
    .tck-pagination:has(> .page-item:nth-child(5).active) .page-item:nth-child(n+4):nth-child(-n+6),
    .tck-pagination:has(> .page-item:nth-child(6).active) .page-item:nth-child(n+5):nth-child(-n+7),
    .tck-pagination:has(> .page-item:nth-child(7).active) .page-item:nth-child(n+6):nth-child(-n+8),
    .tck-pagination:has(> .page-item:nth-child(8).active) .page-item:nth-child(n+7):nth-child(-n+9),
    .tck-pagination:has(> .page-item:nth-child(9).active) .page-item:nth-child(n+8):nth-child(-n+10),
    .tck-pagination:has(> .page-item:nth-child(10).active) .page-item:nth-child(n+9):nth-child(-n+11),
    /* fin de liste : 3 derniers numéros */
    .tck-pagination:has(> .page-item:nth-child(11).active) .page-item:nth-child(n+10):nth-child(-n+12),
    .tck-pagination:has(> .page-item:nth-child(12).active) .page-item:nth-child(n+10):nth-child(-n+12) {
        display: inline-block !important;
    }
}

.com-content-category-blog .category-desc {
   background: #f5e7dc;
  padding-bottom: 10px;
  margin-bottom: 15px;	
  margin-top: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
  border-top: 6px solid #D08B5C;
  padding-left: 10px;
  padding-right: 10px;
}
/******************** Gestion des images ***********************************************/
/* presentation des images avec coins arrondis et ombre*/
.vignettephoto  {
    border-radius: 20px;
    box-shadow: #4d4c48 2px 2px 5px 0px;
    max-width: 100%;
    height: auto;
}
/* presentation des images avec coins arrondis et ombre avec zoom*/
.vignettephotolien  {
    border-radius: 20px;
    box-shadow: #4d4c48 2px 2px 5px 0px;
    max-width: 100%;
    height: auto;
    transition: transform .2s;
}
.vignettephotolien:hover {
    transform: scale(1.08);
}

/* photo png responsive */
.photopng  {
    max-width: 100%;
    height: auto;
}

/******************** Conteneurs d'image flottante : <div class="divdroite"> / <div class="divgauche"> ********
   Structure attendue dans le code source (divgauche = même chose, flottant à gauche) :
   <div class="divdroite">
   <p><a ...><img class="vignettedroite" (ou toute classe contenant "lien" pour le zoom) /></a></p>
   <p class="DescriptionPhoto">Texte de la légende ici</p>
   </div>

   Avantage sur l'ancienne méthode : ce conteneur est entièrement sous notre
   contrôle, indépendant du script mediabox de JCE qui réécrivait les classes
   et forçait un font-size:0 sur le lien — plus besoin de !important, de :has()
   ni de script JS pour afficher la légende. *************************************/
.divdroite,
.divgauche {
    width: 25%;
    max-width: 25%;
}
.divdroite {
    float: right;
    margin: 0 10px 1em 1em;
}
.divgauche {
    float: left;
    margin: 10px 10px 1em 1em;
}
/* Si l'image est dans un lien (mediabox JCE ou non), on force ce lien à occuper
   toute la largeur du conteneur : le script mediabox de JCE peut lui imposer une
   largeur fixe (celle de la miniature), plus petite que le conteneur, ce qui
   laisse un espace vide sur le côté. */
.divdroite a,
.divgauche a {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}
.divdroite img,
.divgauche img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: #4d4c48 2px 2px 5px 0px;
}
/* Zoom au survol pour toute image dont la classe contient "lien" (vignettedroitelien, vignettephotolien, etc.) */
.divdroite img[class*="lien"],
.divgauche img[class*="lien"] {
    transition: transform .2s;
}
.divdroite img[class*="lien"]:hover,
.divgauche img[class*="lien"]:hover {
    transform: scale(1.08);
}
.divdroite .DescriptionPhoto,
.divgauche .DescriptionPhoto {
    font-size: 13px;
    text-align: center;
    margin: 0.5em 0 0 0;
}
@media (max-width: 600px) {
    .divdroite,
    .divgauche {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 auto 1em;
    }
}


/* ===========================================================
   Carte actualité — style "blog" pour les articles Joomla
   Fichier à charger via Template Creator CK (CSS personnalisé)
   =========================================================== */

/* La carte est en réalité imbriquée dans .com-content-category-blog__item,
   qui est l'enfant direct de la grille "masonry-2". C'est cet élément-là
   que le CSS multi-colonnes prend en compte pour découper le flux :
   on y applique donc aussi la consigne "ne jamais couper". */
.com-content-category-blog__item {
    break-inside: avoid;
}

/* ===========================================================
   Alignement des hauteurs — passage du mode "masonry" (colonnes
   de texte fluides, où chaque carte s'empile indépendamment dans
   sa colonne) à une vraie grille CSS. Avec une grille, toutes les
   cartes d'une même ligne s'étirent automatiquement à la hauteur
   de la plus grande d'entre elles (comportement par défaut de
   CSS Grid), ce qui uniformise la partie blanche des cartes.
   =========================================================== */
/* Le fichier custom.css du site applique un padding de 10px, une marge
   et un fond beige à .com-content-category-blog__item — cette classe est
   partagée avec .item-content et .item-page (page article seule), donc
   on ne peut pas modifier cette règle globalement sans risquer d'affecter
   l'affichage de l'article seul. On la neutralise ici uniquement dans le
   contexte de la liste blog, grâce à un sélecteur plus spécifique
   (parent .com-content-category-blog__items), qui l'emporte sur la règle
   d'origine quel que soit l'ordre de chargement des fichiers CSS. */
.com-content-category-blog__items .com-content-category-blog__item {
    background: transparent;
    margin: 0;
    padding: 0;
    box-shadow: none;
}

.com-content-category-blog__items.masonry-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px; /* ajustez cette valeur si l'écart visuel ne correspond pas exactement à l'existant */
    row-gap: 28px;
}

/* En dessous de 700px, on repasse à une seule colonne, comme pour
   le reste des réglages responsive de la carte. */
@media (max-width: 700px) {
    .com-content-category-blog__items.masonry-2 {
        grid-template-columns: 1fr;
    }
}

.carte-actualite {
    display: flex;
    flex-direction: row; /* image à gauche, contenu à droite sur desktop */
    align-items: stretch;
    background: #f5e7dc;
    border-radius: 0; /* coins carrés, comme la référence */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
    border-top: 6px solid #D08B5C; /* terracotta, en harmonie avec les icônes du site */

    /* La carte remplit toute la hauteur de sa cellule de grille (voir règle
       .masonry-2 plus bas), pour que toutes les cartes d'une même ligne
       aient la même hauteur. L'espacement vertical entre les cartes est
       géré par le "gap" de la grille, plus par une marge individuelle. */
    height: 100%;

    /* Empêche la carte d'être coupée en deux par la mise en page
       multi-colonnes "masonry-2" de Template Creator CK, qui peut
       autrement tronquer visuellement une carte à la limite entre
       les deux colonnes. */
    break-inside: avoid;

    /* Empêche la carte de dépasser la largeur de sa colonne (débordement
       horizontal) : sans ça, la somme des largeurs minimales de l'image
       et du texte peut être plus grande que la colonne elle-même. */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.carte-actualite__image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5e7dc; /* comble les bandes vides, même couleur que le fond du texte */
    flex: 0 0 38%;
    min-width: 0; /* laisse la colonne réduire l'image plutôt que de forcer un débordement */
    line-height: 0;
}

.carte-actualite__image {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: contain; /* image entière, sans rognage, quel que soit son ratio */
    display: block;
}

.carte-actualite__contenu {
    flex: 1 1 auto;
    min-width: 0; /* essentiel : sans ça, le texte empêche la carte de rétrécir dans une colonne étroite */
    padding: 20px 22px 24px;
    overflow-wrap: break-word;

    /* Colonne flexible pour pouvoir ancrer le bouton en bas de carte
       (voir margin-top: auto sur .carte-actualite__bouton), quelle que
       soit la longueur du titre/de l'intro. */
    display: flex;
    flex-direction: column;
}

.carte-actualite__titre {
    margin: 0 0 10px;
    font-size: 1.6rem;
    line-height: 1.25;
    font-weight: 600;
}

.carte-actualite__titre a {
    color: #1a1a1a;
    text-decoration: none;
}

.carte-actualite__titre a:hover {
    color: #d08b5c;
}

/* ===========================================================
   Suppression des marges gauche/droite du conteneur de blog
   ===========================================================
   Les cartes elles-mêmes n'ont pas de marge horizontale : si un
   espace subsiste à gauche/droite, il vient du conteneur généré
   par Joomla autour de la liste des articles (souvent une grille
   Bootstrap avec du padding). Les règles ci-dessous neutralisent
   les cas les plus courants ; si l'espace persiste, inspectez
   l'élément dans le navigateur pour repérer la classe exacte du
   conteneur parent et ajoutez-la ici avec padding: 0 et
   max-width: 100%.
   =========================================================== */
.com-content-category-blog .items-row,
.com-content-category-blog .item,
.com-content-category-blog > .row,
.com-content-category-blog .container,
.com-content-category-blog .row {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

.carte-actualite__intro {
    margin: 0 0 10px;
    color: #3d3d3d;
    font-size: 1rem;
    line-height: 1.5;
}

.carte-actualite__categorie {
    margin: 0 0 6px;
    font-size: 1.05rem;
}

.carte-actualite__categorie a {
    color: #2bbbad;
    text-decoration: underline;
}

.carte-actualite__date {
    margin: 0 0 18px;
    color: #6b6b6b;
    font-style: italic;
    font-size: 0.95rem;
}

.carte-actualite__bouton {
    display: inline-block;
    align-self: flex-start; /* ne pas s'étirer en largeur avec la colonne flex */
    margin-top: auto; /* pousse le bouton en bas de la carte, quelle que soit la longueur du texte au-dessus */
    padding: 12px 24px;
    border: 2px solid #D08B5C;
    border-radius: 6px;
    color: #D08B5C;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.carte-actualite__bouton:hover {
    background-color: #D08B5C;
    color: #ffffff;
}

/* ----------- Ajustements en mode téléphone (image conservée à gauche) ----------- */
@media (max-width: 700px) {
    .carte-actualite__image-link {
        flex: 0 0 34%;
        min-width: 0;
    }

    .carte-actualite__image {
        min-height: 140px;
    }

    .carte-actualite__contenu {
        padding: 14px 14px 16px;
    }

    .carte-actualite__titre {
        font-size: 1.15rem;
        margin-bottom: 6px;
    }

    .carte-actualite__categorie {
        font-size: 0.9rem;
    }

    .carte-actualite__date {
        font-size: 0.8rem;
        margin-bottom: 10px;
    }

    .carte-actualite__bouton {
        padding: 8px 14px;
        font-size: 0.85rem;
    }
}


/*****************************************************************************/
/*                  rendre responsive les tableaux                           */
/*****************************************************************************/
.tableresponsive {
     width: 100%;
	 margin-left: auto;
	 margin-right: auto;
	 border-collapse: separate;
	 border-spacing: 10px;
     border: 0px;
}


@media screen and (max-width: 640px) {
  .tableresponsive table,
  .tableresponsive  body,
  .tableresponsive tr,
  .tableresponsive td {
    display: block;
    width: auto!important;
  }
}
/***************************************************************/
/* mofification pour l'agenda sur une ligne                    */
/***************************************************************/

.tck-module-title, .tck-module-text{
    color: #3b2314;
}

/* Le tableau ET son tbody doivent être flexibles */
#ContenantAgenda .mod_events_latest_table,
#ContenantAgenda .mod_events_latest_table tbody {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    width: 100% !important;
    border-spacing: 0;
}

/* Chaque ligne <tr> devient un simple conteneur */
#ContenantAgenda .mod_events_latest_table tr {
    display: flex;
}

/* Le pavé : la cellule <td> devient la carte */
#ContenantAgenda .mod_events_latest_table td.mod_events_latest_first,
#ContenantAgenda .mod_events_latest_table td.mod_events_latest {
    position: relative;      /* nécessaire pour positionner l'icône ::before */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: #ebd4c3;
    border-radius: 20px;
    padding: 30px 20px 20px 20px;
    /*   padding-top: 45px;*/
    margin-top: 35px;        /* laisse de la place en haut du pavé pour que l'icône puisse "déborder" */
    box-sizing: border-box;
    width: 220px;
    text-align: center;
    font-size: 0; /* masque le texte brut {{...}} placé avant le pavé */
}

/* On masque tous les <br> devenus inutiles avec le flex */
#ContenantAgenda .mod_events_latest_table td br {
    display: none;
}

/* Bloc "jour / numéro / mois" : chaque span sur sa propre ligne */
#ContenantAgenda .agenda-date .mod_events_latest_date {
    display: block;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 18px !important;
    font-weight: bold;
    color: #3a3a3a;
    line-height: 1.1;
}
/* Bloc "numéro" : avec une police plus grosse */
#ContenantAgenda .agenda-date strong .mod_events_latest_date {
    font-size: 40px !important;
    line-height: 1.1;
    color: #a84b2a;
}
/* Bloc "heure début - heure fin" : les deux spans restent en ligne */
#ContenantAgenda .agenda-heure {
    display: block;
    font-size: 15px !important;
    color: #5a5a5a;
    margin-top: 8px;
}

#ContenantAgenda .agenda-heure .mod_events_latest_date {
    display: inline; /* important : override du display:block ci-dessus */
    font-size: 15px !important;
    font-weight: bold;
    color: #3a3a3a;
}

/* Le titre de l'événement */
#ContenantAgenda .agenda-titre {
    display: block;
    font-size: 16px !important;
    margin-top: 12px;
}

#ContenantAgenda .mod_events_latest_content a {

    text-decoration: none;
    font-weight: 600;
}

#ContenantAgenda .mod_events_latest_content a:hover {
    text-decoration: underline;
}


/* Icône en haut et au centre de chaque pavé (calendrier, actualité, punaise, relation) */
#ContenantAgenda .mod_events_latest_table td.mod_events_latest_first::before,
#ContenantAgenda .mod_events_latest_table td.mod_events_latest::before,
#ContenantAgenda .derniers-articles::before,
#ContenantArticlesUne .mod-articlescategory.category-module li::before,
#ContenantArticlesUne .mod-tagssimilar.tagssimilar li::before {
    content: "";
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55px 55px;
}

/* ...et l'image propre à chaque module */
#ContenantAgenda .mod_events_latest_table td.mod_events_latest_first::before,
#ContenantAgenda .mod_events_latest_table td.mod_events_latest::before {
    background-image: url('/images/MesIcones/Calendrier.png');
}
#ContenantAgenda .derniers-articles::before {
    background-image: url('/images/MesIcones/News.png');
}
#ContenantArticlesUne .mod-articlescategory.category-module li::before {
    background-image: url('/images/MesIcones/Punaise.png');
}
#ContenantArticlesUne .mod-tagssimilar.tagssimilar li::before {
    background-image: url('/images/MesIcones/Relation.png');
}


@media (max-width: 600px) {
    /* On repasse table / tbody / tr en affichage normal (empilé) */
    #ContenantAgenda .mod_events_latest_table,
    #ContenantAgenda .mod_events_latest_table tbody,
    #ContenantAgenda .mod_events_latest_table tr {
        display: block;
        width: 100%;
    }

    /* Seul le pavé (td) reste en colonne flexible pour son contenu interne */
    #ContenantAgenda .mod_events_latest_table td.mod_events_latest_first,
    #ContenantAgenda .mod_events_latest_table td.mod_events_latest {
        display: flex;
        width: 85%;
        max-width: 300px;
        box-sizing: border-box;
        margin: 35px auto 30px auto;
    }

    #ContenantAgenda .agenda-titre,
    #ContenantAgenda .agenda-date .mod_events_latest_date {
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/***************************************************************/
/* modification pour les dernières actualités sur une ligne    */
/***************************************************************/
/* Conteneur : les pavés s'alignent sur une ligne, retour à la ligne si besoin */
#ContenantAgenda .mod-articleslatest.latestnews,
#ContenantArticlesUne .mod-articlescategory.category-module,
#ContenantArticlesUne .mod-tagssimilar.tagssimilar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Le pavé */
#ContenantAgenda .derniers-articles {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: #ebd4c3;
    border-radius: 20px;
    width: 220px;
    margin-top: 35px;
    padding: 30px 15px 20px 15px;
    box-sizing: border-box;
    text-align: center;
}

/* Le titre de l'actualité, au-dessus de l'image */
#ContenantAgenda .derniers-articles li {
    list-style: none;
    margin: 0 0 12px 0;
    padding: 10px 0 0 0;
    order: 1;
}

#ContenantAgenda .derniers-articles li a {
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
}

#ContenantAgenda .derniers-articles li a:hover {
    text-decoration: underline;
}

/* L'image de l'article, à l'intérieur du pavé */
#ContenantAgenda .article-image {
    display: flex;
    justify-content: center; /* centre l'image dans le pavé */
    width: 100%;
}

#ContenantAgenda .article-image img,
#ContenantArticlesUne .mod-articles-category-image img {
    width: auto;          /* la largeur s'adapte à l'image, plus de 100% forcé */
    height: 130px;         /* hauteur identique pour toutes les images */
    max-width: 100%;       /* sécurité : ne dépasse jamais la largeur du pavé */
    /*object-fit: contain;*/
    border-radius: 12px;   /* maintenant bien visible, collé aux bords réels de l'image */
    box-shadow: #4d4c48 2px 2px 5px 0px;
    transition: transform .2s;
}
#ContenantAgenda .article-image img:hover,
#ContenantArticlesUne .mod-articles-category-image img:hover {
    transform: scale(1.08);
}


/* Catégorie de l'article : pastille brune sous l'icône, au-dessus de l'image */
#ContenantAgenda .derniers-articles .article-categorie {
    order: -1;                     /* passe avant l'image (0) et le titre (1) */
    max-width: 100%;
    margin: 12px 0 14px 0;
    padding: 0;
    line-height: 1.2;
}

#ContenantAgenda .derniers-articles .article-categorie a,
#ContenantAgenda .derniers-articles .article-categorie span {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    background-color: #a84b2a;
    color: #fff;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 8px;
    box-shadow: #4d4c48 1px 1px 3px 0px;
    overflow-wrap: break-word;
    transition: background-color .2s;
}

#ContenantAgenda .derniers-articles .article-categorie a:hover {
    background-color: #2e2019;
    color: #fff;
    text-decoration: none;
}


/***************************************************************/
/* modification pour les articles à la une    sur une ligne    */
/***************************************************************/
/* Le pavé */
#ContenantArticlesUne .mod-articlescategory.category-module li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: #ebd4c3;
    border-radius: 20px;
    width: 220px;
    margin-top: 35px;
    padding: 30px 15px 20px 15px;
    box-sizing: border-box;
    text-align: center;
    list-style: none;
}

/* Le titre de l'article, au-dessus de l'image */
#ContenantArticlesUne .mod-articlescategory.category-module li a.mod-articles-category-title {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.25;
    min-height: 60px;
    margin: 0 0 12px 0;
}

#ContenantArticlesUne .mod-articlescategory.category-module li a.mod-articles-category-title:hover {
    text-decoration: underline;
}

/* L'image de l'article, à l'intérieur du pavé */
#ContenantArticlesUne .mod-articles-category-image {
    order: 2;
    display: flex;
    justify-content: center;
    width: 100%;
}


/***************************************************************/
/* mise en forme des articles en relation, comme les épinglés  */
/***************************************************************/

/* Le pavé : largeur fixe identique pour tous */
#ContenantArticlesUne .mod-tagssimilar.tagssimilar li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-radius: 20px;
    width: 220px;
    margin-top: 35px;
    padding: 30px 15px 20px 15px;
    box-sizing: border-box;
    text-align: center;
    list-style: none;
}

/* Le titre de l'article, au-dessus de l'image */
#ContenantArticlesUne .mod-tagssimilar.tagssimilar li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

#ContenantArticlesUne .mod-tagssimilar.tagssimilar li a .mod-tagssimilar-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.25;
    min-height: 60px;
    margin: 0 0 12px 0;
}

#ContenantArticlesUne .mod-tagssimilar.tagssimilar li a:hover .mod-tagssimilar-title {
    text-decoration: underline;
}

/* L'image : remplit toute sa boîte (recadrage si besoin), coins bien arrondis */
#ContenantArticlesUne .mod-tagssimilar.tagssimilar li a .mod-tagssimilar-image img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: #4d4c48 2px 2px 5px 0px;
    transition: transform .2s;
}
#ContenantArticlesUne .mod-tagssimilar.tagssimilar li a:hover .mod-tagssimilar-image img {
    transform: scale(1.08);
}
/* Mode téléphone : un pavé par ligne, largeur stable (agenda, actualités, épinglés, en relation) */
@media (max-width: 600px) {
    #ContenantAgenda .mod-articleslatest.latestnews,
    #ContenantArticlesUne .mod-articlescategory.category-module,
    #ContenantArticlesUne .mod-tagssimilar.tagssimilar {
        display: block;
        width: 100%;
    }

    #ContenantAgenda .derniers-articles,
    #ContenantArticlesUne .mod-articlescategory.category-module li,
    #ContenantArticlesUne .mod-tagssimilar.tagssimilar li {
        display: flex;
        width: 85%;
        max-width: 300px;
        margin: 35px auto 0 auto;
    }

    #ContenantAgenda .derniers-articles li a,
    #ContenantArticlesUne .mod-articlescategory.category-module li a.mod-articles-category-title,
    #ContenantArticlesUne .mod-tagssimilar.tagssimilar li a {
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/*****************************************************************************/
/*                            JCE Media box                                  */
/*****************************************************************************/
.wf-mediabox-container{
    background-color: #ca824f;
} 

.wf-mediabox-caption{
    background-color: #ebd4c3;
}

.wf-mediabox-nav {
    background-color: #ebd4c3; 
}
.wf-mediabox-caption, .wf-mediabox-caption h4, .wf-mediabox-caption p {
    padding : 2px 10px 0px 10px;
}
.wf-mediabox-numbers button.active {
    border: 6px solid #ca824f;
}

/*****************************************************************************/
/*                       Article sur 2 colonnes                              */
/*****************************************************************************/

.Colonnes-2{
  columns: 2 auto;
  height: auto;
  column-rule: 1px solid #D39469;
  overflow : hidden;
  margin-bottom: 20px;
  column-gap : 20px;
}

@media (max-width: 960px) {
.Colonnes-2{
  columns: 1 auto;
}
}

/************************************/
/*        Accordéons : voir le bloc  */
/*  « PAGES FAQ ET STATUTS » en fin   */
/************************************/

/*********************************************************************/
/*              Affichage du détail des articles                     */  
/*********************************************************************/

dl.article-info{
	color : #666666;
	display : flex;
	justify-content: center;
	margin-top: 10px;
}

dt.article-info-term{
    display : none;
}
dd.published .icon-calendar{
	display : none;
}

dd.tck-article-detail-modifydate:before {
content : " \00a0-\00a0\00a0";
}
dd.tck-article-detail-modifydate .icon-calendar{
	display : none;
}
@media screen and (max-width: 600px) {
dl.article-info{
	display : table;
	margin-left : auto;
	margin-right: auto;
}
dd.tck-article-detail-modifydate:before {
content : "";
}
}

/*****************************************************************************/
/*    Pour plugin visForms       */
/*****************************************************************************/
#visformcontainer {
  position: relative;
  margin-top: 24px;
  margin-bottom: 10px;
  padding: 10px 15px 26px;
  border: 1px solid #ebd0bb;
  border-radius: 20px;
  background: #f5e7dc;
  box-shadow: inset 0 5px 0 #a84b2a, 0 6px 16px rgba(110, 60, 30, 0.18);
  color: #3b2314;
  overflow: hidden;
}
  
/* masquage du numéro de téléphone */
.tel-hover img {
  content: url('/images/MesIcones/NumeroTelephone.png');
}

.tel-hover img:hover {
  content: url('/images/MesIcones/NumeroTelephoneS.png');
}

.category-desc:has(> .enteteformulairevisforms) {
  margin-bottom : 50px;
}


.SaisieMessage {
	background: #F8E0CE;
	border: #d5804a 1px solid;
	color: #000000;
	padding: 4px;
	text-align: left;
}

.SaisieMessage:focus {
	border: #000000 1px solid;
}

.enteteformulairevisforms h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 960px;
  margin: 0 auto 14px;
  padding: 26px 10px 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  color: #3b2314;
  text-align: center;
}

/******************************************************************/
/*                   modif pour phocaGallery                      */
/******************************************************************/
/*-----------------------------------------------------------------*/
/* Suppression du crédit : Powered by Phoca Gallery                */
/*-----------------------------------------------------------------*/
div:has(> a[href*="phoca.cz/phocagallery"]) {
  display: none !important;
}

.pg-msnr-container{
  padding-bottom :15px;
}
#phocagallery {
  background: #f5e7dc;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
}

.pg-categories-items-box {
    justify-content: center;
    margin-bottom: 15px;
}
.pg-category-box-description {
    position: unset;
}

.pg-categories-desc {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
  border-top: 6px solid #D08B5C;
  padding-left: 10px;
  padding-right: 10px;
}
/* ------------------------------------------------------------------ */
/*  Mosaïque (masonry) pour la liste des photos d'un album.            */
/*  Tout est ici, dans custom.css, et pas dans theme_standard.css :    */
/*  ce fichier peut être écrasé par une mise à jour ou une restauration*/
/*  de sauvegarde, alors que custom.css est propre au site. Le sélecteur*/
/*  #pg-msnr-container (ID) l'emporte de toute façon sur les règles de  */
/*  theme_standard.css (classes), sans avoir besoin de !important.      */
/* ------------------------------------------------------------------ */
#pg-msnr-container {
    display: block;
    justify-content: center;
    column-count: 6;
    column-gap: 12px;
}
@media only screen and (max-width: 1400px) {
    #pg-msnr-container { column-count: 5; }
}
@media only screen and (max-width: 1100px) {
    #pg-msnr-container { column-count: 4; }
}
@media only screen and (max-width: 850px) {
    #pg-msnr-container { column-count: 3; }
}
@media only screen and (max-width: 600px) {
    #pg-msnr-container { column-count: 2; }
}
@media only screen and (max-width: 400px) {
    #pg-msnr-container { column-count: 1; }
}

/* Chaque carte occupe toute la largeur de sa colonne et n'est jamais
   coupée entre deux colonnes */
#pg-msnr-container .pg-item-box {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 12px 0;
    break-inside: avoid;
}

/* La photo garde son format d'origine (plus de recadrage, y compris en
   portrait) ; la vignette "retour" (pg-svg-box) garde son carré habituel.
   !important ici car une classe générique du template (c-Image--shaded,
   chargée après ce fichier) impose sinon une hauteur/un recadrage fixe. */
#pg-msnr-container .pg-item-box-image:not(.pg-svg-box) {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: unset !important;
}
#pg-msnr-container .pg-item-box-image:not(.pg-svg-box) img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    object-fit: unset !important;
    object-position: initial !important;
    display: block;
}

.pg-category-box, .pg-item-box{
  	border: #e19c6a 1px solid;
    border-radius: 10px;
    margin : 3px;
    padding : 10px;
    box-shadow: #4d4c48 2px 2px 5px 0px;
  	background-color: #ebd4c3;
}
.ph-si-back-medium{
border: #e19c6a 1px solid;
border-radius: 10px;
margin-bottom: 5px;
padding: 10px;
box-shadow: #4d4c48 2px 2px 5px 0px;
background: #ebd4c3;
}
.ph-si-back-medium:hover{
background: #d39469;
}
.ph-si-image{
    color:#e19c6a;
}


/* pour l'overlib */
.bgPhocaClass{
	border: #e19c6a 1px solid;
    border-radius: 10px;
    margin-bottom : 5px;
    box-shadow: #4d4c48 2px 2px 5px 0px;
	background-color: #ebd4c3;
}
.fgPhocaClass{
    border-radius: 10px;
	background-color: #d39469;
}


.DescriptionPhoto {
    margin-top: 6px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    font-weight: normal;
    line-height: 12px;
    font-size: 11px;
    font-family: Georgia, serif;
	text-align: justify;
    hyphens: auto;
}

/* Dans la description d'un album (au-dessus des vignettes), on annule le
   style "DescriptionPhoto" (pensé pour les petites légendes sous chaque
   photo) : le texte redevient normal (taille, police, alignement...). */
.pg-category-desc .DescriptionPhoto {
    margin-top: unset;
    margin-bottom: unset;
    padding-bottom: unset;
    font-weight: unset;
    line-height: unset;
    font-size: unset;
    font-family: unset;
    text-align: unset;
    hyphens: unset;
}

/* Le dernier <p> de la description d'album (juste avant les vignettes)
   reçoit souvent un margin-bottom négatif en style inline (généré par
   Phoca Gallery) : on le force à 20px avec !important pour passer devant
   ce style inline. */
.pg-category-desc p:last-of-type {
    margin-bottom: 20px !important;
}

.ph-sr-only {
  display : none;
}

.pg-category-box-image img {
    border-radius: 10px;
    transition: transform .2s;
}
.pg-category-box-image img:hover {
    transform: scale(1.08);
}
.pg-item-box-image img {
    border-radius: 10px;
    transition: transform .2s;
}
.pg-item-box-image img:hover {
    transform: scale(1.08);
}


/****************************************************************************/
/*                         Articles du livre d'or                           */
/****************************************************************************/
.titrelivredor{
	Font-Weight: Bold;
  	border-bottom: 1px solid #E19C6A;
}
.nomlivredor {
    padding-bottom: 15px;
}
.nomlivredor:before {
  content:url(/images/MesIcones/Icon-Humain.png) ;
  position:relative; 
  left:-3px;
  top:2px;
  margin-left: 5px;
  padding-right: 3px;
}
.datelivredor:before {
  content:url(/images/MesIcones/Icon-Calendrier.png) ;
  position:relative; 
  left:-3px;
  top:2px;
  margin-left: 15px;
  padding-right: 3px;
}
.datelivredor {
    color: #E19C6A;
}
.bordlivredor{
    padding: 0 0 0 15px;
    margin: 0 0 18px;
    border-left: 5px solid #E19C6A;
}

/*****************************************************************************/
/*                          osmap sur 3 colonnes                              */
/*****************************************************************************/
#xmap .muted {
    display: none;
}
#osmap{
    /*min-height: 800px;*/
    overflow: hidden;
    background: #f5e7dc;
	padding:20px;
}
#osmap > .page-header > h1 {
   text-align:center;
}

.osmap-items{
  columns: 3 auto;
  height: auto;
  column-rule: 1px solid #D39469;
  overflow : hidden;
}

@media (max-width: 960px) {
.osmap-items{
  columns: 2 auto;
}
}

@media (max-width: 640px) {
.osmap-items{
  columns: 1 auto;
}
}

/*        OSMAP, mise en gras et un plus gros des premiers titre de menu */
.osmap-items > ul > li > a, .osmap-items > ul > li > span {
	font-size : 20px;
	font-weight: bold;
}

/* OSMAP reduction du premier espace inter ligne au début des énumerations */
#osmap  .level_1 {
    margin-top: -12px;
}
#osmap  .level_2 {
    margin-top: -12px;
}
#osmap  .level_3 {
    margin-top: -12px;
}

/*********************************************************************/
/*              couleur du fond du module jevent                     */  
/*********************************************************************/
/* (remplacé par le bloc « PAGE D'UN ÉVÈNEMENT DE L'AGENDA » en fin de fichier) */

/*********************************************************************/
/*      Rajout d'un titre aux pages de connexion et de recherche     */
/*********************************************************************/

.com-users-login::before,
.com-finder::before {
    display: block;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
    margin-top: 15px;
}
.com-users-login::before {
    content: "Connexion au site";
}
.com-finder::before {
    content: "Recherche sur le site";
}
.com-users-login,
.com-finder {
  background: #f5e7dc;
  padding: 30px;
  margin: 20px;
  box-shadow: inset 0 5px 0 #a84b2a, 0 6px 16px rgba(110, 60, 30, 0.18);
  border-radius: 25px;
  background: #fffaf6;
  border: 1px solid #ebd0bb !important;
}

/*********************************************************************/
/*      Suppression de la ligne de fond entre l'entete et agenda     */  
/*********************************************************************/
#ContenantAgenda {
  margin-top: -16px;
}

/*********************************************************************/
/*               Présentation du flash info                          */  
/*********************************************************************/
.Flash2026 .tck-module-title{
    display:none;
}

/* neutralise le fond crème et les marges de .item-page hérités des articles classiques */
.Flash2026 .item-page{
    background:transparent;
    padding:0;
    margin-top:0;
    margin-bottom:0;
}


  .flash{
    position:relative;
    background:#E9CCB5;
    border-top:2px solid #C9A227;
    border-bottom:2px solid #C9A227;
    display:flex;
    align-items:stretch;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    overflow:hidden;
  }
  .flash-main{
    flex:1;
    display:flex;
    align-items:center;
    gap:20px;
    padding:18px 28px;
  }
  .flash-icon{
    flex:none;
    width:72px;
    height:72px;
    padding:5px;
    box-sizing:border-box;
    border-radius:50%;
    overflow:hidden;
    background:#C67C4E;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 0 3px rgba(201,162,79,.35);
  }
  .flash-icon img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
  }
  .flash-copy{ min-width:0; }
  .flash-eyebrow{
    display:flex;
    align-items:center;
    gap:8px;
    color:#c67c4e;
    font-size:18px;
    letter-spacing:.03em;
    margin-bottom:4px;
    font-weight:600;
  }
  .flash-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#c67c4e;
    animation:pulse 2.2s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce){
    .flash-dot{ animation:none; }
  }
  @keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(201,162,79,.55); }
    70%{ box-shadow:0 0 0 9px rgba(201,162,79,0); }
    100%{ box-shadow:0 0 0 0 rgba(201,162,79,0); }
  }
  .flash-title{
    font-family:Georgia, 'Times New Roman', serif;
    font-weight:700;
    font-size:26px;
    color:#000000;
    line-height:1.15;
    margin:0;
  }

  /* perforated ticket-stub divider */
  .flash-perf{
    flex:none;
    width:0;
    position:relative;
    border-left:2px dashed rgba(237,234,225,.35);
  }
  .flash-stub{
    flex:none;
    width:260px;
    background:transparent;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:18px 26px;
    text-align:center;
  }
  .flash-date{
    font-weight:700;
    color:#000000;
    font-size:16px;
    line-height:1.3;
    text-align:center;
  }
  .flash-link{
    display:inline-block;
    color:#F5EFE6;
    background:#C67C4E;
    padding:8px 16px;
    border-radius:20px;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
  }
  .flash-link:hover{ background:#D2936A; }

  @media (max-width:640px){
    .flash{ flex-direction:column; }
    .flash-main{ padding:16px 20px; }
    .flash-title{ font-size:21px; }
    .flash-perf{
      width:auto;
      height:0;
      border-left:none;
      border-top:2px dashed rgba(237,234,225,.35);
    }
    .flash-stub{
      width:auto;
      flex-direction:row;
      justify-content:center;
      align-items:center;
      gap:16px;
      padding:14px 20px;
    }
  }

 /* section continuation, to show the banner in its real context */
  .next-section{
    background:#2E2019;
    color:#D2936A;
    text-align:center;
    padding:26px 0 8px;
    font-family:Georgia, serif;
    font-size:22px;
    letter-spacing:.02em;
  }
  .next-hint{
    text-align:center;
    color:rgba(237,234,225,.5);
    font-size:12px;
    padding-bottom:18px;
    font-family:'Trebuchet MS',sans-serif;
  }
  
/*********************************************************************/
/*           Mise en forme de l'accueil haut avec la photo           */  
/*********************************************************************/
/* ==========================================================
   Bandeau d'accueil "Burkina Santé"

   Principe : la hauteur du bandeau s'adapte TOUJOURS au texte
   qu'il contient (jamais de contenu masqué ou tronqué). L'image
   de fond, elle, est étirée en "cover" pour remplir exactement
   cette hauteur, quelle qu'elle soit. Résultat : l'image ne peut
   jamais être plus courte que le texte, dans n'importe quelle
   situation (texte plus long que prévu, marges du template
   Joomla, police différente, très petit écran...).

   `min-height` (en vw) sert seulement de valeur plancher, pour
   que le bandeau ressemble à la maquette quand le texte est
   court — mais si le texte a besoin de plus de place, le
   bandeau grandit tout seul au-delà de ce plancher.
   ========================================================== */

.hero-banner {
    position: relative;
    width: 100%;
    min-height: 37.5vw;             /* ratio de l'image de la maquette (516/1375) */
    overflow: visible;              /* rien n'est jamais masqué ni coupé */
    container-type: inline-size;    /* pour les tailles de texte en cqw ci-dessous */
    container-name: hero;

    background-color: #f7f1ea;
    background-image:
        linear-gradient(
            to right,
            #f7f1ea 0%,
            #f7f1ea 38%,
            rgba(247, 241, 234, 0) 66%
        ),
        url("/images/headers/FemmesEnfant.jpg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;         /* l'image remplit TOUJOURS toute la hauteur du bandeau */

    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 24px 0;
    margin-top: -15px;       /* rajouter par CLN pour que la bannière remonte pour toucher le module précedent */
	box-shadow: #4d4c48 2px 2px 5px 0px;
	border-radius: 25px;
}

.hero-text {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: 56%;
    max-width: 620px;
    padding: 0 3cqw;
}

/* Les tailles ci-dessous restent calées sur la largeur du
   bandeau (cqw), pour un rendu proche de la maquette. Comme le
   bandeau peut désormais grandir librement, un plancher en rem
   ne présente plus aucun risque de troncature : au pire, le
   bandeau est un peu plus haut que l'image "idéale". */

.hero-logo {
    margin: 0 0 0.4em;
    font-size: clamp(1.1rem, 7.2cqw, 2.6rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    text-shadow: #4d4c48 2px 2px;
}

.hero-title {
    margin: 0 0 0.35em;

    font-weight: 600;
    line-height: 1.25;
}

.hero-tagline {
    margin: 0 0 0.6em;
    font-size: clamp(0.8rem, 2.5cqw, 1.05rem);
    font-weight: 400;
    line-height: 1.25;
}

.hero-intro {
    margin: 0 0 0.6em;
    font-size: clamp(0.72rem, 1.75cqw, 0.85rem);
    line-height: 1.4;
    text-align: justify;
}

.hero-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: clamp(0.72rem, 1.75cqw, 0.85rem);
    line-height: 1.6;
}

.hero-list li {
    position: relative;
    padding-left: 1.6em;
    margin-bottom: 0.2em;
}

.hero-list li::before {
    content: "\2713";               /* coche */
    position: absolute;
    left: 0;
    top: 0.1em;
    width: 1.1em;
    height: 1.1em;
    line-height: 1.1em;
    text-align: center;
    border-radius: 50%;
    background-color: #d08b5c;      /* terracotta, cohérent avec les icônes du site */
    color: #ffffff;
    font-size: 0.75em;
    font-weight: 700;
}


/* ----------------------------------------------------------
   Boutons du bandeau d'accueil ("Suivez notre actualité" /
   "Suivez nos actions") : remplace le bloc précédent dans
   custom.css (juste après la règle .hero-list li::before)
   ---------------------------------------------------------- */
.hero-buttons {
    display: flex;
    flex-wrap: wrap;            /* simple filet de sécurité si vraiment pas la place */
    gap: 0px 12px;             /* écart fixe, indépendant de la largeur du bandeau */
    margin-top: 1.2em;
	flex-direction: column;
	align-items: center;
}

.hero-btn {
    display: inline-block;
    padding: 0.45em 1em;
    border: 2px solid #a85f4b;
    border-radius: 999px;       /* forme "pilule" comme sur la maquette */
    background-color: transparent;
    color: #a85f4b;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;        /* le texte d'un bouton ne se coupe jamais */
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
	font-size: 18px;
}

.hero-btn:hover,
.hero-btn:focus {
    background-color: #a85f4b;
    color: #ffffff;
    text-decoration: none;
}

/* Mobile : boutons empilés, pleine largeur de la colonne de texte */
@media (max-width: 640px) {
    .hero-buttons {
        gap: 10px;
    }
    .hero-btn {
        font-size: 0.85rem;
    }
}

/* ----------------------------------------------------------
   Écrans larges (>1000px) : le plancher de hauteur en vw devient
   proportionnellement trop grand (37.5vw = 600px à 1600px de
   large). On le réduit de moitié ici. Comme la hauteur reste
   "auto" et pilotée par le contenu, le bandeau ne pourra jamais
   redevenir trop petit pour le texte : ce plancher plus bas fait
   juste en sorte que la photo colle davantage à la hauteur réelle
   du texte au lieu de laisser un grand vide.
   ---------------------------------------------------------- */
@media (min-width: 1000px) {
    .hero-banner {
        min-height: 18.75vw;   /* moitié de 37.5vw */
        padding: 16px 0;
    }
}

/* ----------------------------------------------------------
   Petits écrans : uniquement des ajustements esthétiques
   (largeur de la colonne de texte, courbe du dégradé). Plus
   besoin de logique de secours pour éviter la troncature :
   c'est déjà garanti à toutes les tailles par la règle de base.
   ---------------------------------------------------------- */
@media (max-width: 640px) {
    .hero-banner {
        min-height: 60vw;
        background-position: right top;
        background-image:
            linear-gradient(
                to right,
                #f7f1ea 0%,
                #f7f1ea 50%,
                rgba(247, 241, 234, 0) 82%
            ),
            url("/images/headers/FemmesEnfant.jpg");
    }

    .hero-text {
        width: 68%;
        max-width: 68%;
        padding: 0 4vw;
    }
}

@media (max-width: 420px) {
    .hero-banner {
        min-height: 78vw;
    }

    .hero-text {
        width: 82%;
        max-width: 82%;
    }
}

/* Bandeau d'accueil : sous 1000px, la femme reste visible à droite du texte */
@media (max-width: 999px) {
    .hero-banner {
        overflow: hidden;            /* l'image recadrée ne déborde pas */
        background-image: none;      /* l'image passe dans ::before */
    }

    /* Image : le visage de la femme est placé à 78 % de la largeur du bandeau */
    .hero-banner::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: 0;
        bottom: 0;
        left: 78%;                   /* <- position horizontale de la femme */
        aspect-ratio: 445 / 299;     /* proportions de FemmesEnfant.jpg */
        transform: translateX(-55%); /* 55 % = position du visage dans l'image */
        background: url("/images/headers/FemmesEnfant.jpg") center / 100% 100% no-repeat;
    }

    /* Dégradé par-dessus l'image, sous le texte */
    .hero-banner::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(
            to right,
            #f7f1ea 0%,
            #f7f1ea 45%,
            rgba(247, 241, 234, 0) 75%
        );
    }

    .hero-text {
        z-index: 2;
        width: 62%;
        max-width: 62%;
        padding: 0 4vw;
    }
}

/* ----------------------------------------------------------
   Repli pour les très anciens navigateurs sans container
   queries : les tailles passent en vw.
   ---------------------------------------------------------- */
@supports not (container-type: inline-size) {
    .hero-logo    { font-size: clamp(1.1rem, 7.2vw, 2.6rem); }
    .hero-title   { font-size: clamp(0.95rem, 3.4vw, 1.35rem); }
    .hero-tagline { font-size: clamp(0.8rem, 2.5vw, 1.05rem); }
    .hero-intro,
    .hero-list    { font-size: clamp(0.72rem, 1.75vw, 0.85rem); }
}

/* La date de mise à jour du site est stylée dans la section « BAS DE PAGE » */


/*********************************************************************/
/*    Suppression du titre rechercher en mode PC dans le menu haut   */  
/*********************************************************************/
.masquer-titre-lien .titreck-text{
    display: none;
}

/*********************************************************************/
/*           Mise en forme des boutons sociaux                       */  
/*********************************************************************/
.share-container {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.socialshare-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    gap: 12px !important;
}

.socialshare-buttons li {
    float: none !important;
    width: auto !important;
    max-width: none !important;
}

.socialshare-buttons li a {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/*****************************************************************************/
/*   Page d'accueil - article "Notre histoire" : 3 cartes + bouton           */
/*****************************************************************************/

.histoire-cartes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0px 0 25px 0;
}

.histoire-carte {
    background-color: #f0dfd0;
    border: 1px solid #d9b49a;
    border-radius: 20px;
    padding: 22px 26px 26px;
    color: #3b2314;
    text-align: left;
	box-shadow: #4d4c48 2px 2px 5px 0px;
}

.histoire-carte__etiquette {
    margin: 0 0 8px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #a84b2a;
}

.histoire-carte__titre {
    margin: 0 0 14px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.2;
    color: #3b2314;
}

.histoire-carte__chiffre {
    margin: 0 0 4px;
    font-size: 1.1rem;
    color: #a84b2a;
}

.histoire-carte__texte {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.55;
    color: #3b2314;
}

.histoire-bouton-conteneur {
    text-align: center;
    margin: 0 0;
}

.histoire-bouton {
    display: inline-block;
    padding: 16px 40px;
    border-radius: 999px;
    background-color: #a84b2a;
    color: #ffffff;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.histoire-bouton:hover,
.histoire-bouton:focus {
    background-color: #8a3b1f;
    color: #ffffff;
    text-decoration: none;
}

/* Tablette / mobile : les cartes passent l'une sous l'autre */
@media (max-width: 960px) {
    .histoire-cartes {
        grid-template-columns: 1fr;
    }
}

/***********************************/
/*   CSS pour la page d'accueil   */
/***********************************/

/* =========================================================
   Bloc "Une question" — texte unique + 2 boutons côte à côte
   ========================================================= */

.conteneurquestion {
    position: relative;
    background: linear-gradient(180deg, #ecd3c0 0%, #e3c1a8 100%);
    padding: 55px 40px 35px;
    font-family: Georgia, "Times New Roman", serif;
    color: #2e2019;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "titre titre"
        "texte texte"
        "btn1  btn2";
    row-gap: 0;
    column-gap: 0;
	margin-top: 60px;
	width: 100% !important;
}

/* Icône superposée en haut du bloc (conserve le style inline déjà en place) */
.conteneurquestion > img {
    grid-area: titre;
    align-self: start;
    justify-self: center;
    margin-top: -100px !important;
}

.titrequestion {
    grid-area: titre;
}

.titrequestion h2 {
        font-size: 1.8em;
    color: #2e2019;
}

/* Texte unique, centré sur toute la largeur */
.textequestion {
    grid-area: texte;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 25px;
}

.textequestion p {
    margin: 0;
}

/* Boutons : côte à côte */
.boutonfaq {
    grid-area: btn1;
    padding-right: 40px;
    padding-bottom: 10px;
}

.boutoncontact {
    grid-area: btn2;
    padding-left: 40px;
    padding-bottom: 10px;
}

.textequestion a {
    color: #c1592e;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.textequestion a:hover {
    color: #93411f;
}

.boutonquestion img {
    transition: transform 0.15s ease;
}

.boutonquestion img:hover {
    transform: scale(1.03);
}

/* =========================================================
   Responsive — texte, puis bouton 1, puis bouton 2
   ========================================================= */

@media (max-width: 768px) {
    .conteneurquestion {
        grid-template-columns: 1fr;
        grid-template-areas:
            "titre"
            "texte"
            "btn1"
            "btn2";
        padding: 55px 20px 30px;
    }

    .boutonfaq {
        padding-right: 0;
        padding-bottom: 0;
    }

    .boutoncontact {
        padding-left: 0;
        padding-bottom: 0;
    }

    .titrequestion h2 {
        font-size: 1.5em;
    }
}

@media (max-width: 480px) {
    .conteneurquestion {
        border-radius: 12px !important;
        padding: 50px 15px 25px;
    }

    .boutonquestion img {
        width: 150px !important;
        height: auto !important;
    }
}
  /*********************************************************************/
/*  Bloc "Nous soutenir" - empilement des 3 boutons (Actualité,      */
/*  Action, Don) au-dessus les uns des autres, même taille,          */
/*  effet de survol identique au bouton "Faire un don"               */
/*********************************************************************/
.boutonssoutien {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.boutonssoutien p {
    margin: 0;
}

.boutonssoutien img {
    display: block;
    width: 250px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    transition: transform 0.15s ease;
}

.boutonssoutien img:hover {
    transform: scale(1.03);
}

/* Sur mobile, les 3 boutons restent empilés (comportement déjà assuré
   par flex-direction: column ci-dessus) ; on réduit juste l'écart. */
@media (max-width: 640px) {
    .boutonssoutien {
        gap: 12px;
    }
}

/* =====================================================================
   BAS DE PAGE : trois cartes crème sur le fond terracotta
   - menubasgauche : identité de l'association (MenuBasGauche.html)
   - menubas       : menu « Liens utiles » (module Menu)
   - menubasdroit  : appel au don (MenuBasDroit.html)
   - menubas (2e module) : date de mise à jour, sur toute la largeur
   Les colonnes de Template Creator CK sont « aplaties » (display: contents)
   pour que chaque module devienne directement une cellule de la grille.
   ===================================================================== */
#row1 > .inner {
    background-color: #d39469;
    border-radius: 25px;
    padding: 18px 18px 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
	box-shadow: inset 0 5px 0 #a84b2a, 0 6px 16px rgba(110, 60, 30, 0.18);
}

#row1 > .inner > .flexiblecolumn,
#row1 > .inner > .flexiblecolumn > div,
#row1 > .inner > .flexiblecolumn > div > .inner {
    display: contents;
}

/* Carte crème (les 3 modules) */
#row1 .tck-module {
    background: #fbf5ee;
    color: #2e2019;
    border-radius: 16px;
    padding: 18px 16px;
    margin: 0;
    box-sizing: border-box;
}

/* Ordre des cartes, quelle que soit la colonne où le bloc est créé */
#row1 [data-position="menubasgauche"] > .tck-module { order: 1; }
#row1 [data-position="menubas"]       > .tck-module { order: 2; }
#row1 [data-position="menubasdroit"]  > .tck-module { order: 3; }

/* Date de mise à jour : bandeau pleine largeur, sans carte */
#row1 .tck-module:has(.db8sitelastmodified) {
    order: 4;
    grid-column: 1 / -1;
    background: none;
    padding: 0;
    border-radius: 0;
}
.db8sitelastmodified {
    color: #fbf5ee;
    text-align: center;
    font-size: 0.9rem;
    padding: 12px 0 2px;
    border-top: 1px dashed rgba(251, 245, 238, 0.55);
}

/* ---- Carte 1 : identité ---- */
.foot-nom,
.foot-slogan {
    text-align: center;
}
.foot-nom {
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    line-height: 1.15;
    color: #a84b2a;
    margin: 0 0 10px;
}
.foot-slogan {
    margin: 0 0 12px;
    line-height: 1.5;
}
.foot-badges {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.foot-badges li {
    background: #f1dfd0;
    color: #7a3519;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* ---- Carte 2 : menu « Liens utiles » ---- */
#MenuBas {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
}
#MenuBas ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
}
#MenuBas li {
    margin-bottom: 10px;
}
#MenuBas .mod-menu__heading {
    display: block;
    color: #a84b2a;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 6px;
}
#MenuBas li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
#MenuBas .image-title {
    color: #2e2019;
}
#MenuBas li > a:hover .image-title {
    color: #a84b2a;
    text-decoration: underline;
}
/* Icônes existantes (noires) : pastille brune dessinée derrière (::before),
   pictogramme passé en blanc (le filtre ne doit s'appliquer qu'à l'image) */
#MenuBas li > a {
    position: relative;
}
#MenuBas li:not(.item-165) > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #a84b2a;
}
#MenuBas img {
    position: relative;
    flex: none;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    padding: 6px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
/* Facebook : le logo bleu est remplacé par un « f » blanc dans la même pastille */
#MenuBas .item-165 > a > img {
    display: none;
}
#MenuBas .item-165 > a::before {
    content: "";
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #a84b2a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M14 8V6.5c0-.7.3-1 1-1h2.5V2H14.6C11.9 2 10.5 3.6 10.5 6v2H8v3.5h2.5V22H14V11.5h3l.5-3.5H14z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

/* ---- Carte 3 : appel au don (bouton centré en bas de la carte) ---- */
#row1 [data-position="menubasdroit"] .tck-module-title {
    display: none;
}
#row1 [data-position="menubasdroit"] > .tck-module,
#row1 [data-position="menubasdroit"] .tck-module-text,
#row1 [data-position="menubasdroit"] .mod-custom {
    display: flex;
    flex-direction: column;
}
#row1 [data-position="menubasdroit"] .tck-module-text,
#row1 [data-position="menubasdroit"] .mod-custom,
.foot-don {
    flex: 1;
}
.foot-don {
    display: flex;
    flex-direction: column;
}
.foot-titre {
    color: #a84b2a;
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0 0 6px;
}
.foot-texte {
    margin: 0 0 18px;
    line-height: 1.5;
}
.foot-bouton {
    margin-top: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #a84b2a;
    color: #ffffff;
    border-radius: 999px;
    padding: 10px 24px;
    text-decoration: none;
}
.foot-bouton::before {
    content: "";
    width: 17px;
    height: 17px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12.6 12 20l-7.5-7.4a5 5 0 1 1 7.5-6.6 5 5 0 1 1 7.5 6.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.foot-bouton:hover {
    background: #8c3d20;
    color: #ffffff;
}

/* ---- Adaptation à la largeur réelle du bas de page ----
   On se base sur la largeur du bloc (container query) et non sur celle de la fenêtre :
   le site a une largeur maximale, et le zoom du navigateur change la largeur utile. */
#row1 {
    container-type: inline-size;
    container-name: pied;
}

/* Bas de page étroit : identité sur toute la largeur, puis « Liens utiles » et « Nous soutenir » côte à côte */
@container pied (max-width: 820px) {
    #row1 > .inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #row1 [data-position="menubasgauche"] > .tck-module {
        grid-column: 1 / -1;
    }
}

/* Très étroit (mobile) : une seule colonne */
@container pied (max-width: 520px) {
    #row1 > .inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Secours pour les navigateurs sans container query */
@media (max-width: 600px) {
    #row1 > .inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =====================================================================
   MISE EN VALEUR DES SECTIONS D'ACCUEIL
   Comment nous agissons / Prochain(s) rendez-vous /
   Dernières actualités / Articles épinglés
   ===================================================================== */

/* 1. Titres de section : grands, avec un filet dégradé de chaque côté */
.titre-section,
#ContenantAgenda .tck-module-title,
#ContenantArticlesUne .tck-module-title {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 18px;
    max-width: 960px;
    margin: 0 auto !important;
    padding: 26px 10px 0 !important;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.6rem, 4.5vw, 2.4rem) !important;
    font-weight: 700;
    line-height: 1.15;
    color: #3b2314 !important;
    text-align: center;
}
/* Titres à filets : décor commun (accueil, formulaires, FAQ, actualités, articles) */
.titre-section::before,
.titre-section::after,
#ContenantAgenda .tck-module-title::before,
#ContenantAgenda .tck-module-title::after,
#ContenantArticlesUne .tck-module-title::before,
#ContenantArticlesUne .tck-module-title::after,
.enteteformulairevisforms h1::before,
.enteteformulairevisforms h1::after,
.tck-article-body:has([data-rlta-type="accordions"]) > h4::before,
.tck-article-body:has([data-rlta-type="accordions"]) > h4::after,
.com-content-category-blog.tck-blog .category-desc h1::before,
.com-content-category-blog.tck-blog .category-desc h1::after,
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > h1::before,
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > h1::after {
    content: "";
    flex: 1 1 24px;
    height: 3px;
    border-radius: 3px;
}
.titre-section::before,
#ContenantAgenda .tck-module-title::before,
#ContenantArticlesUne .tck-module-title::before,
.enteteformulairevisforms h1::before,
.tck-article-body:has([data-rlta-type="accordions"]) > h4::before,
.com-content-category-blog.tck-blog .category-desc h1::before,
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > h1::before {
    background: linear-gradient(90deg, rgba(168, 75, 42, 0), #c9784d);
}
.titre-section::after,
#ContenantAgenda .tck-module-title::after,
#ContenantArticlesUne .tck-module-title::after,
.enteteformulairevisforms h1::after,
.tck-article-body:has([data-rlta-type="accordions"]) > h4::after,
.com-content-category-blog.tck-blog .category-desc h1::after,
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > h1::after {
    background: linear-gradient(270deg, rgba(168, 75, 42, 0), #c9784d);
}

/* 2. Chaque section dans un « bandeau » teinté */
.section-agissons,
#ContenantAgenda .tck-module,
#ContenantArticlesUne .tck-module {
    margin: 26px 14px 0;
    padding: 0 20px 34px;
    border-radius: 26px;
    border: 1px solid #e6c6ad;
    background: linear-gradient(180deg, #f8e9dc 0%, #f3dfce 100%);
    box-shadow: #4d4c48 2px 2px 5px 0px;
}
.section-agissons #conteneuraccueil {
    padding-bottom: 0;
}

/* 3. Cartes : plus claires que le fond, liseré terracotta en haut, ombre douce */
.itemaccueil,
#ContenantAgenda .mod_events_latest_table td.mod_events_latest_first,
#ContenantAgenda .mod_events_latest_table td.mod_events_latest,
#ContenantAgenda .derniers-articles,
#ContenantArticlesUne .mod-articlescategory.category-module li,
#ContenantArticlesUne .mod-tagssimilar.tagssimilar li {
    background: #fffaf6;
    border: 1px solid #ebd0bb !important;
    box-shadow: inset 0 5px 0 #a84b2a, 0 6px 16px rgba(110, 60, 30, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) {
    .itemaccueil:hover,
    #ContenantAgenda .mod_events_latest_table td.mod_events_latest_first:hover,
    #ContenantAgenda .mod_events_latest_table td.mod_events_latest:hover,
    #ContenantAgenda .derniers-articles:hover,
    #ContenantArticlesUne .mod-articlescategory.category-module li:hover,
    #ContenantArticlesUne .mod-tagssimilar.tagssimilar li:hover {
        transform: translateY(-4px);
        box-shadow: inset 0 5px 0 #a84b2a, 0 12px 24px rgba(110, 60, 30, 0.26);
    }
}

/* 4. Téléphone */
@media (max-width: 700px) {
    .section-agissons,
    #ContenantAgenda .tck-module,
    #ContenantArticlesUne .tck-module {
        margin: 18px 8px 0;
        padding: 0 12px 26px;
        border-radius: 20px;
    }
}
@media (max-width: 480px) {
    /* petit téléphone : titre sur plusieurs lignes possible, filet unique centré dessous */
    .titre-section,
    #ContenantAgenda .tck-module-title,
    #ContenantArticlesUne .tck-module-title {
        flex-direction: column;
        gap: 10px;
        font-size: 1.55rem !important;
    }
    .titre-section::before,
    #ContenantAgenda .tck-module-title::before,
    #ContenantArticlesUne .tck-module-title::before {
        display: none;
    }
    .titre-section::after,
    #ContenantAgenda .tck-module-title::after,
    #ContenantArticlesUne .tck-module-title::after {
        flex: none;
        width: 70px;
        background: #c9784d;
    }
}

/* 5. Alignement de la largeur de « Comment nous agissons » sur les blocs
   Agenda / Actualités : compense le padding de 10px du .item-page parent */
.section-agissons {
    margin-left: 4px;   /* 14px - 10px */
    margin-right: 4px;
}
@media (max-width: 700px) {
    .section-agissons {
        margin-left: -2px;  /* 8px - 10px */
        margin-right: -2px;
    }
}																		   
/* =====================================================================
   NEUTRALISATION DES COULEURS DE FOND SUR LA PAGE D'ACCUEIL
   ===================================================================== */
.homepage #block6 > .inner {
	background: initial;
}

.homepage #block2 > .inner {
	background: initial;
}
.homepage #block1 > .inner {
	background: initial;
}
.homepage #block1 .item-page {
	background: initial;
}

.homepage #maincontent .item-page {
	background: initial;
}
	

/* =====================================================================
   PAGE « FAIRE UN DON »  (article Don.html)
   Toutes les classes commencent par « don- » : aucun risque de conflit
   avec le reste du site. Le style reprend celui de la page d'accueil.
   ===================================================================== */

.don-page {
    color: #3b2314;
}
.don-page p {
    margin: 0;
}

/* ---------- 1. Bandeau d'en-tête ---------- */
.don-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 400px;
    border-radius: 25px;
    border: 1px solid #e6c6ad;
    background-color: #f7f1ea;
    box-shadow: #4d4c48 2px 2px 5px 0px;
}
.don-hero-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    aspect-ratio: 445 / 299;      /* proportions de FemmesEnfant.jpg : la photo n'est jamais déformée */
    background: url("/images/headers/FemmesEnfant.jpg") center / 100% 100% no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%);
    mask-image: linear-gradient(90deg, transparent 0, #000 45%);
}
.don-hero-txt {
    position: relative;
    max-width: min(760px, 62%);
    padding: 46px 56px;
}
.don-page .don-kicker {
    margin: 0 0 8px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #c9784d;
}
.don-page h1.don-h1 {
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    line-height: 1.05;
    color: #a84b2a !important;
    text-align: left !important;
}
.don-page .don-lead {
    max-width: 600px;
    margin: 0 0 26px;
    font-size: 1.25rem;
    line-height: 1.5;
}
.don-page .don-btns {
    margin: 0;
}

/* ---------- 2. Boutons ---------- */
.don-page a.don-btn {
    display: inline-block;
    border-radius: 999px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.don-page a.don-btn-main {
    padding: 17px 36px;
    font-size: 1.25rem;
    background: #a84b2a;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(110, 60, 30, 0.30);
}
.don-page a.don-btn-main:hover,
.don-page a.don-btn-main:focus {
    background: #8a3b1f;
    color: #ffffff;
}
.don-page a.don-btn-out {
    padding: 11px 26px;
    font-size: 1rem;
    border: 2px solid #a84b2a;
    color: #a84b2a;
    background: transparent;
}
.don-page a.don-btn-out:hover,
.don-page a.don-btn-out:focus {
    background: #a84b2a;
    color: #ffffff;
}
.don-page a.don-btn-dark {
    padding: 19px 42px;
    font-size: 1.35rem;
    background: #3b2314;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.30);
}
.don-page a.don-btn-dark:hover,
.don-page a.don-btn-dark:focus {
    background: #1f120a;
    color: #ffffff;
}

/* pastilles de réassurance sous le bouton */
.don-page ul.don-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 24px 0 0;
    padding: 0;
}
.don-page ul.don-chips li {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0 0 0 30px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    color: #6a4330;
}
.don-page ul.don-chips li::before,
.don-page ul.don-ticks li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #a84b2a;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

/* ---------- 3. Bandeaux de section (même principe que l'accueil) ---------- */
.don-band {
    margin: 30px 0 0;
    padding: 0 26px 38px;
    border-radius: 26px;
    border: 1px solid #dfbfa5;
    background: linear-gradient(180deg, #f1dccb 0%, #ebd3bf 100%);
    box-shadow: #4d4c48 2px 2px 5px 0px;
}

/* ---------- 4. Cartes ---------- */
.don-grid {
    display: grid;
    gap: 30px;
}
.don-g3 {
    grid-template-columns: repeat(3, 1fr);
}
.don-g2 {
    grid-template-columns: repeat(2, 1fr);
}
.don-card {
    position: relative;
    margin-top: 46px;
    padding: 52px 26px 28px;
    background: #fffaf6;
    border: 1px solid #ebd0bb;
    border-radius: 20px;
    box-shadow: inset 0 5px 0 #a84b2a, 0 6px 16px rgba(110, 60, 30, 0.18);
    text-align: center;
}
.don-page .don-card > img.don-ico {
    position: absolute;
    top: -40px;
    left: 50%;
    margin: 0 0 0 -40px;
    width: 80px;
    height: 80px;
}
.don-page .don-card h3 {
    margin: 0 0 12px;
    padding: 0;
    font-size: 1.45rem;
    line-height: 1.25;
    color: #3b2314;
    text-align: center;
}
.don-page .don-accent {
    color: #a84b2a;
}
.don-page .don-card p {
    font-size: 1.05rem;
    line-height: 1.55;
    text-align: left;
}
.don-page .don-card p.don-center {
    text-align: center;
}

/* cartes à 2 colonnes : boutons « En savoir plus » alignés en bas */
.don-g2 .don-card {
    display: flex;
    flex-direction: column;
}
.don-page .don-g2 .don-card p.don-center {
    margin-top: auto;
}

/* étapes numérotées + chevrons */
.don-page .don-step p {
    text-align: center;
}
.don-num {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1;
    width: 38px;
    height: 38px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: #a84b2a;
    color: #ffffff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 38px;
    text-align: center;
    box-sizing: content-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.don-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -21px;
    transform: translateY(-50%);
    border-left: 11px solid #a84b2a;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

/* listes à coches */
.don-page ul.don-ticks {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    text-align: left;
}
.don-page ul.don-ticks li {
    list-style: none;
    position: relative;
    margin: 0 0 13px;
    padding: 0 0 0 34px;
    font-size: 1.05rem;
    line-height: 1.5;
}

/* ---------- 5. Encadré « Bon à savoir » ---------- */
.don-note {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 30px 0 0;
    padding: 22px 30px;
    border-radius: 20px;
    border: 1px solid #efc89b;
    border-left: 8px solid #e08a3c;
    background: #fff1e1;
    box-shadow: #4d4c48 2px 2px 5px 0px;
}
.don-note > img {
    flex: none;
    width: 70px;
    height: 70px;
    margin: 0;
}
.don-page .don-note h3 {
    margin: 0 0 6px;
    padding: 0;
    font-size: 1.3rem;
    color: #3b2314;
    text-align: left;
}
.don-page .don-note p {
    font-size: 1.05rem;
    line-height: 1.55;
}

/* ---------- 6. Bandeau final ---------- */
.don-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin: 30px 0 0;
    padding: 42px 56px;
    border-radius: 26px;
    background: #d39469;
    color: #ffffff;
    box-shadow: #4d4c48 2px 2px 5px 0px;
}
.don-page .don-cta h2 {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 400;
    line-height: 1.2;
    color: #ffffff;
    text-align: left;
}
.don-page .don-cta p {
    font-size: 1.25rem;
}
.don-cta-btn {
    flex: none;
    text-align: center;
}
.don-cta-btn small {
    display: block;
    margin-top: 12px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    color: #fff6ee;
}

/* ---------- 7. Tablette et téléphone ---------- */
@media (max-width: 960px) {
    .don-g3,
    .don-g2 {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .don-step:not(:last-child)::after {
        display: none;
    }
    .don-cta {
        flex-direction: column;
        padding: 34px 22px;
        text-align: center;
    }
    .don-page .don-cta h2 {
        text-align: center;
    }
}
/* Bandeau d'en-tête : sous 1000 px, la photo passe au-dessus du texte */
@media (max-width: 1000px) {
    .don-hero {
        display: block;
        min-height: 0;
    }
    .don-hero-photo {
        position: relative;
        width: 100%;
        height: 300px;
        aspect-ratio: auto;
        background-size: cover;
        background-position: 70% 35%;
        -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    }
    .don-hero-txt {
        max-width: none;
        padding: 4px 36px 30px;
    }
}

@media (max-width: 700px) {
    .don-hero {
        border-radius: 20px;
    }
    .don-hero-photo {
        height: 220px;
    }
    .don-hero-txt {
        padding: 4px 20px 28px;
    }
    .don-page .don-lead {
        font-size: 1.1rem;
    }
    .don-page a.don-btn-main,
    .don-page a.don-btn-dark {
        display: block;
        white-space: normal;
        text-align: center;
        font-size: 1.15rem;
        padding: 16px 20px;
    }
    .don-band {
        margin-top: 18px;
        padding: 0 12px 26px;
        border-radius: 20px;
    }
    .don-note {
        flex-direction: column;
        padding: 20px;
        text-align: center;
        border-left-width: 1px;
        border-top: 8px solid #e08a3c;
    }
    .don-page .don-note h3 {
        text-align: center;
    }
    .don-cta {
        border-radius: 20px;
    }
}

/* =====================================================================
   PAGE « NOTRE HISTOIRE »  (article Histoire.html)
   Toutes les classes commencent par « hist- » : aucun risque de conflit
   avec le reste du site. Le style reprend celui de l'accueil et du don.
   ===================================================================== */

.hist-page {
    color: #3b2314;
}
.hist-page p {
    margin: 0;
}

/* ---------- 1. Bandeau d'en-tête ---------- */
.hist-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    min-height: 380px;
    padding: 44px 56px;
    border-radius: 25px;
    border: 1px solid #e6c6ad;
    background-color: #f7f1ea;
    box-shadow: #4d4c48 2px 2px 5px 0px;
}
.hist-hero::before {
    content: "";
    position: absolute;
    right: -90px;
    top: -120px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, #efd7c4 0%, #f3e1d2 60%, rgba(247, 241, 234, 0) 72%);
}
.hist-hero-txt {
    position: relative;
    max-width: 790px;
}
.hist-page .hist-kicker {
    margin: 0 0 10px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #c9784d;
}
.hist-page h1.hist-h1 {
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: clamp(2rem, 3.6vw, 2.9rem);
    line-height: 1.12;
    color: #a84b2a !important;
    text-align: left !important;
}
.hist-page .hist-lead {
    margin: 0 0 22px;
    font-size: 1.25rem;
    line-height: 1.55;
}
.hist-page ul.hist-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: 0;
    padding: 0;
}
.hist-page ul.hist-chips li {
    list-style: none;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid #ebd0bb;
    border-radius: 999px;
    background: #fffaf6;
    box-shadow: 0 2px 6px rgba(110, 60, 30, 0.12);
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    color: #6a4330;
}
.hist-page ul.hist-chips strong {
    color: #a84b2a;
}
.hist-portrait {
    position: relative;
    flex: none;
    width: 290px;
    text-align: center;
}
.hist-page .hist-portrait img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border: 6px solid #ffffff;
    border-radius: 22px;
    box-shadow: 0 8px 22px rgba(80, 40, 20, 0.35);
}
.hist-page .hist-portrait p {
    margin-top: 12px;
    font-size: 1rem;
    color: #5a3a28;
}

/* ---------- 2. Frise chronologique ---------- */
.hist-tl {
    position: relative;
    margin-top: 28px;
}
.hist-chap {
    position: relative;
    display: grid;
    grid-template-columns: 82px 1fr;
    margin-bottom: 30px;
}
/* ligne verticale qui relie les étapes */
.hist-chap:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 40px;
    top: 40px;
    bottom: -34px;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, #c9784d, #e6b99b);
}
.hist-badge {
    position: relative;
    z-index: 1;
    width: 76px;
    height: 76px;
    margin: 2px 0 0 3px;
    border-radius: 50%;
    background: #f5e7dc;       /* même couleur que le fond de la page : masque la ligne derrière l'icône */
    display: flex;
    align-items: center;
    justify-content: center;
}
.hist-page .hist-badge img {
    display: block;
    width: 68px;
    height: 68px;
    margin: 0;
}
.hist-card {
    padding: 34px 36px 30px;
    background: #fffaf6;
    border: 1px solid #ebd0bb;
    border-radius: 20px;
    box-shadow: inset 0 5px 0 #a84b2a, 0 6px 16px rgba(110, 60, 30, 0.18);
}
.hist-page .hist-kick {
    margin: 0 0 6px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #c9784d;
}
.hist-page .hist-card h2 {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    font-size: 1.9rem;
    line-height: 1.2;
    color: #3b2314;
    text-align: left;
}
.hist-body {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}
.hist-body.hist-one {
    grid-template-columns: 1fr;
}
.hist-page .hist-text p {
    margin: 0 0 14px;
    font-size: 1.1rem;
    line-height: 1.65;
    text-align: left;
}
.hist-page .hist-text p:last-child {
    margin-bottom: 0;
}
.hist-page .hist-text strong {
    color: #8a3b1f;
}

/* ---------- 3. Encarts à droite des textes ---------- */
.hist-aside {
    padding: 22px;
    border: 1px solid #ecd0ba;
    border-radius: 16px;
    background: #f8e9dc;
}
.hist-page .hist-lab {
    margin: 0 0 12px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #c9784d;
}
.hist-page .hist-small {
    margin-top: 14px;
    font-size: 0.98rem;
    line-height: 1.5;
    color: #5a3a28;
}
/* tracé Prunay -> Burkina Faso */
.hist-route {
    display: flex;
    align-items: center;
    margin: 6px 0 14px;
}
.hist-page .hist-route img {
    display: block;
    flex: none;
    width: 46px;
    height: 46px;
    margin: 0;
}
.hist-dash {
    flex: 1;
    height: 0;
    margin: 0 8px;
    border-top: 3px dashed #c9784d;
}
.hist-route-lab {
    display: flex;
    justify-content: space-between;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.25;
}
.hist-route-lab span:last-child {
    text-align: right;
}
/* chiffres clés */
.hist-kpi {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: baseline;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px dashed #dcb89c;
    font-size: 1.02rem;
    line-height: 1.3;
}
.hist-kpi:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.hist-lab + .hist-kpi {
    padding-top: 0;
}
.hist-num {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: #a84b2a;
}
/* citation */
.hist-quote {
    position: relative;
    padding: 8px 6px 4px 2px;
}
.hist-quote::before {
    content: "“";
    position: absolute;
    top: -26px;
    left: -4px;
    font-size: 6rem;
    line-height: 1;
    color: #d39469;
}
.hist-page .hist-quote p {
    position: relative;
    padding-top: 34px;
    font-size: 1.45rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1.35;
    color: #a84b2a;
}
.hist-quote span {
    display: block;
    margin-top: 10px;
    font-size: 1.25rem;
    font-weight: 400;
    color: #3b2314;
}
/* hier / aujourd'hui */
.hist-ba {
    display: flex;
    flex-direction: column;
}
.hist-box {
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 1.02rem;
    line-height: 1.4;
}
.hist-before {
    background: #fffaf6;
    border: 1px solid #ebd0bb;
}
.hist-after {
    background: #a84b2a;
    color: #ffffff;
}
.hist-tag {
    display: block;
    margin-bottom: 4px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    opacity: 0.85;
}
.hist-arrow {
    align-self: center;
    margin: 6px 0;
    border-top: 14px solid #c9784d;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
}
/* liste à coches */
.hist-page ul.hist-ticks {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hist-page ul.hist-ticks li {
    list-style: none;
    position: relative;
    margin: 0 0 12px;
    padding: 0 0 0 34px;
    font-size: 1.05rem;
    line-height: 1.4;
}
.hist-page ul.hist-ticks li:last-child {
    margin-bottom: 0;
}
.hist-page ul.hist-ticks li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #a84b2a;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}
/* phrase clé mise en avant */
.hist-page .hist-text p.hist-key {
    margin-top: 18px;
    padding: 18px 22px;
    border-left: 6px solid #a84b2a;
    border-radius: 14px;
    background: #f8e9dc;
    font-size: 1.15rem;
    line-height: 1.5;
}
.hist-page .hist-text p.hist-key strong {
    color: #a84b2a;
}

/* ---------- 4. Bandeau final ---------- */
.hist-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    margin: 6px 0 0;
    padding: 40px 52px;
    border-radius: 26px;
    background: #d39469;
    color: #ffffff;
    box-shadow: #4d4c48 2px 2px 5px 0px;
}
.hist-page .hist-cta h2 {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 400;
    line-height: 1.2;
    color: #ffffff;
    text-align: left;
}
.hist-page .hist-cta p {
    max-width: 760px;
    font-size: 1.1rem;
    line-height: 1.55;
    color: #fff6ee;
}
.hist-cta-btns {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hist-page a.hist-btn {
    display: block;
    border-radius: 999px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.hist-page a.hist-btn-dark {
    padding: 17px 36px;
    font-size: 1.25rem;
    background: #3b2314;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.30);
}
.hist-page a.hist-btn-dark:hover,
.hist-page a.hist-btn-dark:focus {
    background: #1f120a;
    color: #ffffff;
}
.hist-page a.hist-btn-line {
    padding: 12px 30px;
    font-size: 1.05rem;
    border: 2px solid #ffffff;
    color: #ffffff;
}
.hist-page a.hist-btn-line:hover,
.hist-page a.hist-btn-line:focus {
    background: #ffffff;
    color: #a84b2a;
}

/* ---------- 5. Tablette et téléphone ---------- */
@media (max-width: 980px) {
    .hist-hero {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 20px;
        min-height: 0;
        padding: 26px 22px;
    }
    .hist-portrait {
        align-self: center;
        width: 200px;
    }
    .hist-body {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .hist-cta {
        flex-direction: column;
        padding: 30px 20px;
        border-radius: 20px;
        text-align: center;
    }
    .hist-page .hist-cta h2 {
        text-align: center;
    }
    .hist-cta-btns {
        align-self: stretch;
    }
}
@media (max-width: 560px) {
    .hist-chap {
        grid-template-columns: 46px 1fr;
        margin-bottom: 22px;
    }
    .hist-chap:not(:last-child)::before {
        left: 21px;
        top: 28px;
    }
    .hist-badge {
        width: 44px;
        height: 44px;
        margin: 4px 0 0 1px;
    }
    .hist-page .hist-badge img {
        width: 40px;
        height: 40px;
    }
    .hist-card {
        padding: 26px 18px 22px;
    }
    .hist-page .hist-card h2 {
        font-size: 1.5rem;
    }
    .hist-page .hist-text p {
        font-size: 1.05rem;
    }
    .hist-kpi {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .hist-num {
        font-size: 1.9rem;
    }
    .hist-page .hist-quote p {
        font-size: 1.25rem;
    }
    .hist-page a.hist-btn {
        white-space: normal;
    }
}

/* =====================================================================
   PAGE « NOUS SOUTENIR »  (article Soutenir.html)
   Toutes les classes commencent par « sout- » : aucun risque de conflit
   avec le reste du site. Le style reprend celui de l'accueil, du don
   et de « Notre histoire ».
   ===================================================================== */

.sout-page {
    color: #3b2314;
}
.sout-page p {
    margin: 0;
}

/* ---------- 1. Bandeau d'en-tête ---------- */
.sout-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 400px;
    border-radius: 25px;
    border: 1px solid #e6c6ad;
    background-color: #f7f1ea;
    box-shadow: #4d4c48 2px 2px 5px 0px;
}
.sout-hero-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    aspect-ratio: 445 / 299;      /* proportions de FemmesEnfant.jpg : la photo n'est jamais déformée */
    background: url("/images/headers/FemmesEnfant.jpg") center / 100% 100% no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%);
    mask-image: linear-gradient(90deg, transparent 0, #000 45%);
}
.sout-hero-txt {
    position: relative;
    max-width: min(780px, 62%);
    padding: 46px 56px;
}
.sout-page .sout-kicker {
    margin: 0 0 8px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #c9784d;
}
.sout-page h1.sout-h1 {
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    line-height: 1.05;
    color: #a84b2a !important;
    text-align: left !important;
}
.sout-page .sout-lead {
    max-width: 640px;
    margin: 0 0 26px;
    font-size: 1.28rem;
    line-height: 1.5;
}
.sout-page .sout-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}
.sout-page ul.sout-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 24px 0 0;
    padding: 0;
}
.sout-page ul.sout-chips li {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0 0 0 30px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    color: #6a4330;
}
.sout-page ul.sout-chips li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #a84b2a;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

/* ---------- 2. Boutons ---------- */
.sout-page a.sout-btn {
    display: inline-block;
    border-radius: 999px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.sout-page a.sout-btn-main {
    padding: 16px 34px;
    font-size: 1.2rem;
    background: #a84b2a;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(110, 60, 30, 0.30);
}
.sout-page a.sout-btn-main:hover,
.sout-page a.sout-btn-main:focus {
    background: #8a3b1f;
    color: #ffffff;
}
.sout-page a.sout-btn-s {
    padding: 14px 30px;
    font-size: 1.1rem;
}
.sout-page a.sout-btn-ghost {
    padding: 13px 28px;
    font-size: 1.1rem;
    border: 2px solid #a84b2a;
    color: #a84b2a;
    background: rgba(255, 250, 246, 0.7);
}
.sout-page a.sout-btn-ghost:hover,
.sout-page a.sout-btn-ghost:focus {
    background: #a84b2a;
    color: #ffffff;
}
.sout-page a.sout-btn-out {
    padding: 11px 24px;
    font-size: 1rem;
    border: 2px solid #a84b2a;
    color: #a84b2a;
    background: transparent;
}
.sout-page a.sout-btn-out:hover,
.sout-page a.sout-btn-out:focus {
    background: #a84b2a;
    color: #ffffff;
}
.sout-page a.sout-pdf::before {
    content: "↓ ";
}
.sout-page a.sout-btn-dark {
    padding: 18px 40px;
    font-size: 1.3rem;
    background: #3b2314;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.30);
}
.sout-page a.sout-btn-dark:hover,
.sout-page a.sout-btn-dark:focus {
    background: #1f120a;
    color: #ffffff;
}

/* ---------- 3. Bandeaux de section ---------- */
.sout-band {
    margin: 30px 0 0;
    padding: 0 26px 38px;
    border-radius: 26px;
    border: 1px solid #dfbfa5;
    background: linear-gradient(180deg, #f1dccb 0%, #ebd3bf 100%);
    box-shadow: #4d4c48 2px 2px 5px 0px;
}

/* ---------- 4. Cartes ---------- */
.sout-grid {
    display: grid;
    gap: 30px;
}
.sout-g3 {
    grid-template-columns: repeat(3, 1fr);
}
.sout-g2 {
    grid-template-columns: repeat(2, 1fr);
}
.sout-card {
    position: relative;
    margin-top: 46px;
    padding: 52px 28px 28px;
    background: #fffaf6;
    border: 1px solid #ebd0bb;
    border-radius: 20px;
    box-shadow: inset 0 5px 0 #a84b2a, 0 6px 16px rgba(110, 60, 30, 0.18);
}
.sout-page .sout-card > img.sout-ico {
    position: absolute;
    top: -40px;
    left: 50%;
    width: 80px;
    height: auto;
    margin: 0 0 0 -40px;
}
.sout-page .sout-card h3 {
    margin: 0 0 12px;
    padding: 0;
    font-size: 1.45rem;
    line-height: 1.25;
    color: #3b2314;
    text-align: center;
}
.sout-page .sout-card p {
    font-size: 1.07rem;
    line-height: 1.6;
    text-align: left;
}
.sout-page .sout-card strong {
    color: #8a3b1f;
}

/* cartes « Adhérer » / « Don » */
.sout-page .sout-big h2 {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    font-size: 1.9rem;
    line-height: 1.2;
    color: #3b2314;
    text-align: center;
}
.sout-page .sout-card p.sout-tag {
    margin: 0 0 14px;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
    color: #a84b2a;
    text-align: center;
}
.sout-big .sout-txt {
    min-height: 190px;
}
.sout-page .sout-big .sout-txt p {
    margin: 0 0 12px;
}
.sout-page .sout-big .sout-txt p.sout-merci {
    margin-top: 4px;
    font-style: italic;
    color: #5a3a28;
    text-align: center;
}
.sout-sep {
    height: 0;
    margin: 22px 0 4px;
    border-top: 2px dashed #e0bfa4;
}
.sout-opt {
    margin-top: 16px;
    padding: 18px 20px 20px;
    border: 1px solid #ecd0ba;
    border-radius: 16px;
    background: #f8e9dc;
}
.sout-page .sout-opt p {
    font-size: 1.05rem;
    line-height: 1.55;
    text-align: left;
}
.sout-page .sout-opt p.sout-opt-h {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
}
.sout-page .sout-opt-h img {
    display: block;
    flex: none;
    width: 38px;
    height: 38px;
    margin: 0;
}
.sout-page .sout-opt-h span {
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #a84b2a;
}
.sout-page .sout-opt p.sout-act {
    margin-top: 14px;
    text-align: center;
}
.sout-page .sout-opt p.sout-addr {
    max-width: 330px;
    margin: 14px auto 0;
    padding: 14px 18px 14px 26px;
    border: 1px solid #ebd0bb;
    border-left: 8px solid #d39469;
    border-radius: 8px;
    background: #fffaf6;
    box-shadow: 0 2px 6px rgba(110, 60, 30, 0.12);
    font-size: 1.05rem;
    line-height: 1.5;
    text-align: left;
}
.sout-page .sout-addr strong {
    color: #3b2314;
}
.sout-addr-lab {
    display: block;
    margin-bottom: 4px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: #c9784d;
}

/* ---------- 5. Reçu fiscal ---------- */
.sout-fiscal {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 40px;
    align-items: center;
    margin-top: 46px;
    padding: 34px 36px;
    border: 1px solid #ebd0bb;
    border-radius: 20px;
    background: #fffaf6;
    box-shadow: inset 0 5px 0 #a84b2a, 0 6px 16px rgba(110, 60, 30, 0.18);
}
.sout-page .sout-fiscal p.sout-kick {
    margin: 0 0 6px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #c9784d;
}
.sout-page .sout-fiscal h2 {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    font-size: 1.75rem;
    line-height: 1.25;
    color: #3b2314;
    text-align: left;
}
.sout-page .sout-fiscal-txt p {
    margin: 0 0 10px;
    font-size: 1.07rem;
    line-height: 1.6;
}
.sout-ex {
    padding: 22px;
    border: 1px solid #ecd0ba;
    border-radius: 16px;
    background: #f8e9dc;
}
.sout-page p.sout-ex-lab {
    margin: 0 0 14px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: #a84b2a;
    text-align: center;
}
.sout-ex-arrow {
    width: 0;
    margin: 0 auto 12px;
    border-top: 14px solid #c9784d;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
}
.sout-ex-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.sout-ex-it {
    padding: 16px 12px;
    border: 1px solid #ebd0bb;
    border-radius: 14px;
    background: #fffaf6;
    text-align: center;
}
.sout-ex-it span,
.sout-ex-it small {
    display: block;
}
.sout-ex-num {
    margin-bottom: 6px;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    color: #a84b2a;
}
.sout-ex-t {
    font-size: 1.05rem;
    font-weight: 700;
}
.sout-ex-it small {
    margin-top: 6px;
    font-size: 0.88rem;
    line-height: 1.35;
    color: #6a4330;
}

/* ---------- 6. Bandeau final ---------- */
.sout-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin: 30px 0 0;
    padding: 40px 56px;
    border-radius: 26px;
    background: #d39469;
    color: #ffffff;
    box-shadow: #4d4c48 2px 2px 5px 0px;
}
.sout-page .sout-cta h2 {
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 400;
    line-height: 1.2;
    color: #ffffff;
    text-align: left;
}
.sout-page .sout-cta-txt p {
    font-size: 1.2rem;
    color: #fff6ee;
}
.sout-cta-btn {
    flex: none;
}

/* ---------- 7. Titres de section sur fond de bandeau ---------- */
/* (utilise la classe .titre-section déjà définie pour l'accueil) */

/* ---------- 8. Tablette et téléphone ---------- */
@media (max-width: 1000px) {
    .sout-hero {
        display: block;
        min-height: 0;
    }
    .sout-hero-photo {
        position: relative;
        width: 100%;
        height: 300px;
        aspect-ratio: auto;
        background-size: cover;
        background-position: 70% 35%;
        -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    }
    .sout-hero-txt {
        max-width: none;
        padding: 4px 36px 30px;
    }
    .sout-g3,
    .sout-g2 {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .sout-big .sout-txt {
        min-height: 0;
    }
    .sout-band {
        margin-top: 18px;
        padding: 0 12px 26px;
        border-radius: 20px;
    }
    .sout-fiscal {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 30px 20px;
    }
    .sout-cta {
        flex-direction: column;
        padding: 32px 20px;
        border-radius: 20px;
        text-align: center;
    }
    .sout-page .sout-cta h2 {
        text-align: center;
    }
}
@media (max-width: 700px) {
    .sout-hero {
        border-radius: 20px;
    }
    .sout-hero-photo {
        height: 220px;
    }
    .sout-hero-txt {
        padding: 4px 20px 28px;
    }
    .sout-page .sout-lead {
        font-size: 1.12rem;
    }
    .sout-page a.sout-btn-main,
    .sout-page a.sout-btn-ghost,
    .sout-page a.sout-btn-dark {
        display: block;
    }
    .sout-page .sout-btns {
        display: block;
    }
    .sout-page .sout-btns a.sout-btn {
        margin-bottom: 12px;
    }
    .sout-page a.sout-btn-out {
        display: block;
    }
}
@media (max-width: 480px) {
    .sout-card {
        padding: 48px 18px 24px;
    }
    .sout-ex-row {
        grid-template-columns: 1fr;
    }
}

/* ---------- 4 bis. Alignement horizontal des deux cartes « Adhérer » / « Don » ----------
   Principe : les deux cartes partagent les mêmes lignes de grille (subgrid),
   donc chaque élément (pointillés, boutons, adresses…) est à la même hauteur. */
@media (min-width: 1001px) {
    @supports (grid-template-rows: subgrid) {
        .sout-g2 {
            gap: 0 30px;                    /* plus d'espace vertical : il est géré dans les cartes */
        }
        .sout-g2 > .sout-big {
            display: grid;
            grid-row: span 11;              /* 4 lignes (titre, accroche, texte, pointillés) + 3 (opt 1) + 4 (opt 2) */
            grid-template-rows: subgrid;
            row-gap: 0;
        }
        .sout-big .sout-txt {
            min-height: 0;                  /* la hauteur est désormais égalisée par la grille */
        }
        /* bloc « en ligne » : titre / texte / bouton */
        .sout-g2 > .sout-big > .sout-sep + .sout-opt {
            display: grid;
            grid-row: span 3;
            grid-template-rows: subgrid;
            row-gap: 0;
        }
        /* bloc « par courrier » : titre / texte / adresse / bouton */
        .sout-g2 > .sout-big > .sout-opt + .sout-opt {
            display: grid;
            grid-row: span 4;
            grid-template-rows: subgrid;
            row-gap: 0;
        }
        .sout-page .sout-opt p.sout-addr {
            box-sizing: border-box;
            width: 100%;
            max-width: 330px;
            margin: 14px 0 0;
            justify-self: center;
        }
        .sout-page .sout-opt p.sout-act {
            align-self: end;
        }
    }
}

/* =====================================================================
   PAGE « NOTRE FONCTIONNEMENT »  (article Fonctionnement.html)
   Toutes les classes commencent par « fonc- » : aucun risque de conflit
   avec le reste du site. Le style reprend celui de l'accueil.
   ===================================================================== */

.fonc-page {
    color: #3b2314;
}
.fonc-page p {
    margin: 0;
}

/* ---------- 1. Bandeau d'en-tête ---------- */
.fonc-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    min-height: 380px;
    padding: 44px 56px;
    border-radius: 25px;
    border: 1px solid #e6c6ad;
    background-color: #f7f1ea;
    box-shadow: #4d4c48 2px 2px 5px 0px;
}
.fonc-hero::before {
    content: "";
    position: absolute;
    right: -120px;
    top: -140px;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    background: radial-gradient(circle, #efd7c4 0%, #f3e1d2 60%, rgba(247, 241, 234, 0) 72%);
}
.fonc-hero-txt {
    position: relative;
    max-width: 780px;
}
.fonc-page .fonc-kicker {
    margin: 0 0 10px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #c9784d;
}
.fonc-page h1.fonc-h1 {
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    line-height: 1.12;
    color: #a84b2a !important;
    text-align: left !important;
}
.fonc-page .fonc-lead {
    margin: 0 0 22px;
    font-size: 1.25rem;
    line-height: 1.55;
}
.fonc-page ul.fonc-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: 0;
    padding: 0;
}
.fonc-page ul.fonc-chips li {
    list-style: none;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid #ebd0bb;
    border-radius: 999px;
    background: #fffaf6;
    box-shadow: 0 2px 6px rgba(110, 60, 30, 0.12);
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    color: #6a4330;
}
.fonc-page ul.fonc-chips strong {
    color: #a84b2a;
}
.fonc-idea {
    position: relative;
    flex: none;
    width: 380px;
    padding: 28px 30px 30px;
    border: 1px solid #ebd0bb;
    border-radius: 20px;
    background: #fffaf6;
    box-shadow: inset 0 5px 0 #a84b2a, 0 8px 22px rgba(80, 40, 20, 0.28);
}
.fonc-page .fonc-idea-lab {
    margin: 0 0 12px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #c9784d;
}
.fonc-page .fonc-idea-q {
    font-size: 1.35rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1.4;
    color: #a84b2a;
}

/* ---------- 2. Bandeaux de section ---------- */
.fonc-band {
    margin: 30px 0 0;
    padding: 0 26px 38px;
    border-radius: 26px;
    border: 1px solid #dfbfa5;
    background: linear-gradient(180deg, #f1dccb 0%, #ebd3bf 100%);
    box-shadow: #4d4c48 2px 2px 5px 0px;
}
.fonc-page .fonc-intro {
    max-width: 960px;
    margin: 14px auto 0;
    font-size: 1.12rem;
    line-height: 1.6;
    text-align: center;
}
.fonc-grid {
    display: grid;
    gap: 30px;
}
.fonc-g3 {
    grid-template-columns: repeat(3, 1fr);
}
.fonc-g2 {
    grid-template-columns: repeat(2, 1fr);
}

/* ---------- 3. Les trois « piliers » (liens vers les rubriques) ---------- */
.fonc-page a.fonc-pillar {
    position: relative;
    display: block;
    margin-top: 46px;
    padding: 54px 26px 26px;
    border: 1px solid #ebd0bb;
    border-radius: 20px;
    background: #fffaf6;
    box-shadow: inset 0 5px 0 #a84b2a, 0 6px 16px rgba(110, 60, 30, 0.18);
    color: #3b2314;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fonc-pnum {
    position: absolute;
    top: -38px;
    left: 50%;
    width: 72px;
    height: 72px;
    margin-left: -36px;
    border-radius: 50%;
    background: #d39469;
    box-shadow: 0 2px 5px rgba(60, 30, 15, 0.45);
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 72px;
    text-align: center;
}
.fonc-page .fonc-pillar h3 {
    margin: 0 0 10px;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1.25;
    color: #3b2314;
    text-align: center;
}
.fonc-page .fonc-pillar p {
    font-size: 1.05rem;
    line-height: 1.5;
}
.fonc-more {
    display: inline-block;
    margin-top: 14px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-weight: 700;
    color: #a84b2a;
}
@media (hover: hover) {
    .fonc-page a.fonc-pillar:hover {
        transform: translateY(-4px);
        box-shadow: inset 0 5px 0 #a84b2a, 0 12px 24px rgba(110, 60, 30, 0.26);
    }
}

/* ---------- 4. Rubriques ---------- */
.fonc-sec {
    position: relative;
    margin-top: 56px;
    padding: 54px 36px 34px;
    border: 1px solid #ebd0bb;
    border-radius: 20px;
    background: #fffaf6;
    box-shadow: inset 0 5px 0 #a84b2a, 0 6px 16px rgba(110, 60, 30, 0.18);
    scroll-margin-top: 90px;
}
#fonc-partenaires {
    scroll-margin-top: 90px;
}
.fonc-page .fonc-sec > img.fonc-ico {
    position: absolute;
    top: -40px;
    left: 50%;
    width: 80px;
    height: auto;
    margin: 0 0 0 -40px;
}
.fonc-page .fonc-kick {
    margin: 0 0 6px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #c9784d;
    text-align: center;
}
.fonc-page .fonc-sec h2 {
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    font-size: 2rem;
    line-height: 1.2;
    color: #3b2314;
    text-align: center;
}
.fonc-page .fonc-sub {
    margin: 0 0 24px;
    font-size: 1.2rem;
    font-style: italic;
    color: #6a4330;
    text-align: center;
}
.fonc-body {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}
.fonc-page .fonc-text p {
    margin: 0 0 14px;
    font-size: 1.1rem;
    line-height: 1.65;
    text-align: left;
}
.fonc-page .fonc-text p:last-child {
    margin-bottom: 0;
}
.fonc-page .fonc-text strong {
    color: #8a3b1f;
}
.fonc-page .fonc-text.fonc-wide {
    max-width: 960px;
    margin: 0 auto;
}
.fonc-page .fonc-text p.fonc-key {
    margin: 4px 0 14px;
    padding: 18px 22px;
    border-left: 6px solid #a84b2a;
    border-radius: 14px;
    background: #f8e9dc;
    font-size: 1.2rem;
    line-height: 1.5;
}
.fonc-page .fonc-text p.fonc-key strong {
    color: #a84b2a;
}

/* encart « À noter » */
.fonc-aside {
    padding: 22px;
    border: 1px solid #ecd0ba;
    border-radius: 16px;
    background: #f8e9dc;
}
.fonc-page .fonc-lab {
    margin: 0 0 12px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #c9784d;
}
.fonc-row {
    padding: 10px 0;
    border-bottom: 1px dashed #dcb89c;
    font-size: 1.05rem;
    line-height: 1.4;
    font-weight: 700;
}
.fonc-row span {
    display: block;
    margin-bottom: 2px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: #a84b2a;
}
.fonc-page .fonc-small {
    margin-top: 14px;
    font-size: 0.98rem;
    line-height: 1.5;
    color: #5a3a28;
}

/* les quatre points d'une réunion */
.fonc-mini {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-top: 28px;
}
.fonc-it {
    position: relative;
    padding: 20px 22px 22px 22px;
    border: 1px solid #ecd0ba;
    border-radius: 16px;
    background: #f8e9dc;
}
.fonc-n {
    float: left;
    width: 36px;
    height: 36px;
    margin: 0 12px 6px 0;
    border-radius: 50%;
    background: #a84b2a;
    color: #ffffff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 36px;
    text-align: center;
}
.fonc-page .fonc-it h3 {
    margin: 0 0 10px;
    padding: 0;
    font-size: 1.15rem;
    line-height: 1.3;
    color: #8a3b1f;
    text-align: left;
}
.fonc-page .fonc-it p {
    clear: both;
    font-size: 1.05rem;
    line-height: 1.6;
    text-align: left;
}

/* manifestations */
.fonc-page h3.fonc-h3 {
    margin: 26px 0 14px;
    padding: 0;
    font-size: 1.45rem;
    color: #3b2314;
    text-align: center;
}
.fonc-events {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 960px;
    margin: 0 auto 22px;
}
.fonc-ev {
    padding: 18px 12px;
    border: 1px solid #ebd0bb;
    border-radius: 14px;
    background: #f8e9dc;
    box-shadow: inset 0 4px 0 #d39469;
    font-size: 1.25rem;
    font-weight: 700;
    color: #a84b2a;
    text-align: center;
}
.fonc-feat {
    margin-top: 26px;
    padding: 24px 28px 26px;
    border: 1px solid #ecd0ba;
    border-radius: 16px;
    background: #f8e9dc;
}
.fonc-page .fonc-feat h3 {
    margin: 0 0 12px;
    padding: 0;
    font-size: 1.35rem;
    line-height: 1.3;
    color: #3b2314;
    text-align: left;
}

/* rubriques « sur le terrain » côte à côte */
.fonc-band .fonc-half {
    margin-top: 56px;
}
.fonc-page .fonc-half h2 {
    font-size: 1.6rem;
    margin-bottom: 16px;
}

/* ---------- 5. Bandeau final ---------- */
.fonc-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    margin: 30px 0 0;
    padding: 40px 52px;
    border-radius: 26px;
    background: #d39469;
    color: #ffffff;
    box-shadow: #4d4c48 2px 2px 5px 0px;
}
.fonc-page .fonc-cta h2 {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 400;
    line-height: 1.2;
    color: #ffffff;
    text-align: left;
}
.fonc-page .fonc-cta-txt p {
    font-size: 1.15rem;
    color: #fff6ee;
}
.fonc-cta-btns {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fonc-page a.fonc-btn {
    display: block;
    border-radius: 999px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.fonc-page a.fonc-btn-dark {
    padding: 17px 36px;
    font-size: 1.25rem;
    background: #3b2314;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.30);
}
.fonc-page a.fonc-btn-dark:hover,
.fonc-page a.fonc-btn-dark:focus {
    background: #1f120a;
    color: #ffffff;
}
.fonc-page a.fonc-btn-line {
    padding: 12px 30px;
    font-size: 1.05rem;
    border: 2px solid #ffffff;
    color: #ffffff;
}
.fonc-page a.fonc-btn-line:hover,
.fonc-page a.fonc-btn-line:focus {
    background: #ffffff;
    color: #a84b2a;
}

/* ---------- 6. Tablette et téléphone ---------- */
@media (max-width: 1100px) {
    .fonc-g2 {
        grid-template-columns: 1fr;
        gap: 0;
    }
}
@media (max-width: 980px) {
    .fonc-hero {
        flex-direction: column;
        align-items: stretch;
        gap: 22px;
        min-height: 0;
        padding: 26px 22px;
    }
    .fonc-idea {
        width: auto;
    }
    .fonc-g3 {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .fonc-band {
        margin-top: 18px;
        padding: 0 12px 26px;
        border-radius: 20px;
    }
    .fonc-sec {
        padding: 54px 20px 26px;
    }
    .fonc-body,
    .fonc-mini {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .fonc-cta {
        flex-direction: column;
        padding: 30px 20px;
        border-radius: 20px;
        text-align: center;
    }
    .fonc-page .fonc-cta h2 {
        text-align: center;
    }
    .fonc-cta-btns {
        align-self: stretch;
    }
}
@media (max-width: 560px) {
    .fonc-events {
        grid-template-columns: 1fr;
    }
    .fonc-page .fonc-sec h2 {
        font-size: 1.6rem;
    }
    .fonc-page .fonc-half h2 {
        font-size: 1.4rem;
    }
    .fonc-page .fonc-text p {
        font-size: 1.05rem;
    }
    .fonc-feat {
        padding: 20px 18px 22px;
    }
}

/* =====================================================================
   PAGES « FAQ » ET « STATUTS »  (plugin Regular Labs Tabs & Accordions)
   Même style que la page d'accueil : cartes crème à liseré terracotta,
   titres à filets, pastilles rondes. Ce bloc remplace l'ancien style
   « modif pour Accordion ».
   ===================================================================== */
/* ---------------- Fond de page --------------------*/
.tck-article-body:has([data-rlta-type="accordions"]) {
  padding: 15px;
  border-radius: 26px;
  border: 1px solid #e6c6ad;
  background: #fffaf6;
  box-shadow: #4d4c48 2px 2px 5px 0px;
}

/* ---------- 1. Titre de la page (grand bandeau clair) ---------- */
.tck-article-body:has([data-rlta-type="accordions"]) > h1 {
    position: relative;
    overflow: hidden;
    margin: 0 0 34px !important;
    padding: 40px 24px !important;
    border: 1px solid #e6c6ad !important;
    border-radius: 25px;
    background:
        radial-gradient(circle at 88% -30%, #efd7c4 0, #f3e1d2 30%, rgba(247, 241, 234, 0) 62%),
        #f7f1ea;
    box-shadow: #4d4c48 2px 2px 5px 0px;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    color: #a84b2a !important;
    text-align: center !important;
	box-shadow: inset 0 5px 0 #a84b2a, 0 6px 16px rgba(110, 60, 30, 0.18);
}

/* ---------- 2. Titres de groupes (FAQ) : filets de chaque côté ---------- */
.tck-article-body:has([data-rlta-type="accordions"]) > h4 {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 18px;
    max-width: 900px;
    margin: 44px auto 18px !important;
    padding: 0 10px !important;
    border: 0 !important;
    background: none !important;
    font-size: clamp(1.5rem, 3.4vw, 2.1rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #3b2314 !important;
    text-align: center !important;
}
.tck-article-body:has([data-rlta-type="accordions"]) > h5 {
    margin: 10px 0 !important;
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
    color: #3b2314 !important;
    text-align: center !important;
}

.tck-article-body:has([data-rlta-type="accordions"]) > h5:first-of-type {
    margin-top: 34px !important;
}

/* ---------- 3. Accordéons : la question (bouton) ---------- */
[data-rlta-element="container"][data-rlta-type="accordions"] {
    margin: 0 0 8px !important;
}
[data-rlta-element="container"][data-rlta-type="accordions"] > [data-rlta-element="button"] {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 14px 20px 14px 18px !important;
    border: 1px solid #ebd0bb !important;
    border-radius: 16px !important;
    background: #fffaf6 !important;
    box-shadow: inset 5px 0 0 #a84b2a, 0 3px 10px rgba(110, 60, 30, 0.14) !important;
    color: #3b2314 !important;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
[data-rlta-element="container"][data-rlta-type="accordions"] > [data-rlta-element="button"]:not(:first-child) {
    margin-top: 12px !important;
}
[data-rlta-element="container"][data-rlta-type="accordions"] > [data-rlta-element="button"]:hover,
[data-rlta-element="container"][data-rlta-type="accordions"] > [data-rlta-element="button"]:focus {
    background: #f8e9dc !important;
    box-shadow: inset 5px 0 0 #a84b2a, 0 5px 14px rgba(110, 60, 30, 0.22) !important;
    outline: none;
}
[data-rlta-element="container"][data-rlta-type="accordions"] > [data-rlta-element="button"]:focus-visible {
    outline: 3px solid #d39469 !important;
    outline-offset: 2px;
}
/* le titre de la question */
[data-rlta-element="container"][data-rlta-type="accordions"] > [data-rlta-element="button"] > [data-rlta-element="heading"] {
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: #3b2314 !important;
    text-align: left !important;
}
/* pastille ronde avec chevron : à droite fermé, vers le bas ouvert */
[data-rlta-element="container"][data-rlta-type="accordions"] > [data-rlta-element="button"]::before {
    content: "" !important;
    flex: none;
    width: 30px;
    height: 30px;
    margin: 0 !important;
    border-radius: 50%;
    background: #d39469 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    box-shadow: 0 2px 4px rgba(60, 30, 15, 0.35);
    transform: rotate(-90deg);
    transition: transform 0.2s ease, background-color 0.2s ease;
}
[data-rlta-element="container"][data-rlta-type="accordions"] > [data-rlta-element="button"]::after {
    content: none !important;
    display: none !important;
}
/* question ouverte */
[data-rlta-element="container"][data-rlta-type="accordions"] > [data-rlta-element="button"][data-rlta-state="open"],
[data-rlta-element="container"][data-rlta-type="accordions"] > [data-rlta-element="button"][data-rlta-state="opening"] {
    border-radius: 16px 16px 0 0 !important;
    border-bottom-color: #f8e9dc !important;
    background: #f8e9dc !important;
    box-shadow: inset 5px 0 0 #a84b2a !important;
}
[data-rlta-element="container"][data-rlta-type="accordions"] > [data-rlta-element="button"][data-rlta-state="open"]::before,
[data-rlta-element="container"][data-rlta-type="accordions"] > [data-rlta-element="button"][data-rlta-state="opening"]::before {
    background-color: #a84b2a;
    transform: rotate(0deg);
}

/* ---------- 4. Accordéons : la réponse (panneau) ---------- */
[data-rlta-element="container"][data-rlta-type="accordions"] > [data-rlta-element="panel"] {
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #ebd0bb !important;
    border-top: 0 !important;
    border-radius: 0 0 16px 16px !important;
    background: #fffaf6 !important;
    box-shadow: inset 5px 0 0 #a84b2a, 0 6px 12px rgba(110, 60, 30, 0.14) !important;
}
[data-rlta-element="container"][data-rlta-type="accordions"] > [data-rlta-element="panel"] > [data-rlta-element="panel-content"] {
    padding: 20px 28px 22px 32px !important;
    border: 0 !important;
    background: transparent !important;
    color: #3b2314 !important;
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
    text-align: left !important;
}
/* réponses écrites sans paragraphe (texte précédé d'un saut de ligne) */
[data-rlta-element="panel-content"] > br:first-child {
    display: none;
}
[data-rlta-element="panel-content"] p {
    margin: 0 0 12px !important;
    font-size: 1.05rem;
    line-height: 1.65;
    text-align: left !important;
}
[data-rlta-element="panel-content"] p:last-child,
[data-rlta-element="panel-content"] ul:last-child,
[data-rlta-element="panel-content"] ol:last-child {
    margin-bottom: 0 !important;
}
[data-rlta-element="panel-content"] p:empty {
    display: none;
}
/* anciens paragraphes avec marge négative (introductions de listes) */
[data-rlta-element="panel-content"] p[style*="margin-bottom: -15px"] {
    margin-bottom: 8px !important;
}
[data-rlta-element="panel-content"] strong {
    color: #8a3b1f;
}
[data-rlta-element="panel-content"] a {
    color: #a84b2a;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
[data-rlta-element="panel-content"] a:hover,
[data-rlta-element="panel-content"] a:focus {
    color: #3b2314;
}
[data-rlta-element="panel-content"] ul,
[data-rlta-element="panel-content"] ol {
    margin: 0 0 12px !important;
    padding: 0 0 0 1.5em !important;
    text-align: left !important;
}
[data-rlta-element="panel-content"] li {
    margin: 0 0 8px;
    padding-left: 4px;
    font-size: 1.05rem;
    line-height: 1.6;
}
[data-rlta-element="panel-content"] li::marker {
    color: #a84b2a;
    font-weight: 700;
}

/* ---------- 5. Téléphone ---------- */
@media (max-width: 700px) {
    .tck-article-body:has([data-rlta-type="accordions"]) > h1 {
        padding: 28px 16px !important;
        border-radius: 20px;
    }
    .tck-article-body:has([data-rlta-type="accordions"]) > h4 {
        flex-direction: column;
        gap: 10px;
        margin-top: 34px !important;
    }
    .tck-article-body:has([data-rlta-type="accordions"]) > h4::before {
        display: none;
    }
    .tck-article-body:has([data-rlta-type="accordions"]) > h4::after {
        flex: none;
        width: 70px;
        background: #c9784d;
    }
    [data-rlta-element="container"][data-rlta-type="accordions"] > [data-rlta-element="button"] {
        gap: 10px !important;
        padding: 12px 14px 12px 14px !important;
    }
    [data-rlta-element="container"][data-rlta-type="accordions"] > [data-rlta-element="button"] > [data-rlta-element="heading"] {
        font-size: 1.05rem !important;
    }
    [data-rlta-element="container"][data-rlta-type="accordions"] > [data-rlta-element="button"]::before {
        width: 26px;
        height: 26px;
        background-size: 14px 14px;
    }
    [data-rlta-element="container"][data-rlta-type="accordions"] > [data-rlta-element="panel"] > [data-rlta-element="panel-content"] {
        padding: 16px 16px 18px 20px !important;
    }
}

/* =====================================================================
   PAGES « GALERIE PHOTO »  (Phoca Gallery : liste des albums + album)
   Même style que la page d'accueil : bandeau de titre clair, cartes
   crème à liseré terracotta, photos dans des cartes arrondies.
   Ce bloc est placé après l'ancien style « modif pour phocaGallery » :
   il le complète et le remplace là où les deux se recoupent.
   ===================================================================== */

/* ---------- 1. Titre de la page (bandeau clair arrondi) ---------- */
#phocagallery .pg-categories-desc,
#phocagallery > .page-header {
    position: relative;
    overflow: hidden;
    margin: 0 0 22px;
    padding: 34px 40px 30px;
    border: 1px solid #e6c6ad;
    border-top: 1px solid #e6c6ad;
    border-radius: 25px;
    background:
        radial-gradient(circle at 90% -35%, #efd7c4 0, #f3e1d2 28%, rgba(247, 241, 234, 0) 60%),
        #f7f1ea;
    box-shadow: #4d4c48 2px 2px 5px 0px;
}
#phocagallery > .page-header {
    padding: 30px 40px;
}
#phocagallery h1 {
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: clamp(1.9rem, 3.6vw, 2.8rem) !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    color: #a84b2a !important;
    text-align: center !important;
}
#phocagallery > .page-header h1 {
    margin: 0 !important;
}
#phocagallery .pg-categories-desc p {
    margin: 0 0 10px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #3b2314;
}
#phocagallery .pg-categories-desc p:last-child {
    margin-bottom: 0;
}

/* description d'un album : carte crème à liseré */
#phocagallery .pg-category-desc {
    margin: 0 0 22px;
    padding: 22px 28px;
    border: 1px solid #ebd0bb;
    border-radius: 20px;
    background: #fffaf6;
    box-shadow: inset 0 5px 0 #a84b2a, 0 6px 16px rgba(110, 60, 30, 0.18);
}
#phocagallery .pg-category-desc p {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #3b2314;
}
#phocagallery .pg-category-desc p:last-of-type {
    margin-bottom: 0 !important;
}

/* ---------- 2. Liste des albums (cartes) ---------- */
#phocagallery .pg-categories-items-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
    margin: 0 0 15px;
}
#phocagallery .pg-category-box {
    margin: 0;
    padding: 20px 14px 14px;
    border: 1px solid #ebd0bb;
    border-radius: 20px;
    background: #fffaf6;
    box-shadow: inset 0 5px 0 #a84b2a, 0 6px 16px rgba(110, 60, 30, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#phocagallery .pg-category-box-image {
    overflow: hidden;
    border-radius: 12px;
}
#phocagallery .pg-category-box a {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    color: #a84b2a;
    text-decoration: none;
}
#phocagallery .pg-category-box a:hover,
#phocagallery .pg-category-box a:focus {
    color: #3b2314;
}
#phocagallery .pg-category-box .ph-si:not(.pg-image) {
    color: #d39469 !important;
    fill: #d39469 !important;
}
#phocagallery .pg-category-box-description {
    font-size: 0.95rem;
    line-height: 1.4;
    color: #3b2314;
    text-align: left;
}
#phocagallery .pg-category-box .DescriptionPhoto {
    margin: 6px 0 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #5a3a28;
    text-align: left;
    hyphens: manual;
}

/* ---------- 3. Photos d'un album (mosaïque de cartes) ---------- */
#phocagallery #pg-msnr-container .pg-item-box {
    margin: 0 0 14px;
    padding: 10px;
    border: 1px solid #ebd0bb;
    border-radius: 16px;
    background: #fffaf6;
    box-shadow: inset 0 5px 0 #a84b2a, 0 6px 16px rgba(110, 60, 30, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#phocagallery .pg-item-box-image {
    overflow: hidden;
    border-radius: 10px;
}
#phocagallery .pg-item-box figure {
    margin: 0;
}
#phocagallery .pg-item-box > a,
#phocagallery .pg-item-box > a:hover {
    text-decoration: none;
}
#phocagallery .pg-item-box-image img,
#phocagallery .pg-category-box-image img {
    border-radius: 10px !important;
    box-shadow: none !important;
}
#phocagallery .pg-item-box-image img:hover {
    transform: scale(1.05);
}
#phocagallery .pg-category-box-image img:hover {
    transform: scale(1.05);
}
/* légende sous chaque photo */
#phocagallery .pg-item-box .DescriptionPhoto,
#phocagallery .pg-item-box-info,
#phocagallery .pg-item-box-info p {
    margin: 8px 2px 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.92rem;
    line-height: 1.4;
    color: #5a3a28;
    text-align: left;
    hyphens: manual;
}
#phocagallery .pg-item-box-info {
    margin-top: 0;
}
#phocagallery .pg-item-box-info:empty,
#phocagallery .pg-item-box-info .ph-cb:only-child {
    display: none;
}
@media (hover: hover) {
    #phocagallery #pg-msnr-container .pg-item-box:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 22px rgba(110, 60, 30, 0.26);
    }
    #phocagallery .pg-category-box:hover {
        transform: translateY(-4px);
        box-shadow: inset 0 5px 0 #a84b2a, 0 12px 24px rgba(110, 60, 30, 0.26);
    }
}

/* ---------- 4. Carte « retour à la galerie » ---------- */
#phocagallery .pg-svg-box {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100% !important;
    max-width: none !important;
    min-height: 150px;
    border-radius: 10px;
    background: #f8e9dc;
}
#phocagallery .pg-svg-box::after {
    content: "Retour à la galerie";
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #a84b2a;
}
#phocagallery .ph-si-back-medium {
    width: 84px !important;
    height: 84px !important;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
    color: #a84b2a !important;
    fill: #a84b2a !important;
    transition: fill 0.15s ease, transform 0.2s ease;
}
#phocagallery .ph-si-back-medium:hover {
    background: transparent;
    fill: #3b2314 !important;
    transform: scale(1.08);
}

/* ---------- 5. Tri et pagination ---------- */
#phocagallery form[name="adminForm"] .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 14px;
    margin: 6px 0 0;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-weight: 700;
    color: #3b2314;
}
#phocagallery select.form-select {
    width: auto;
    margin: 0 4px 0 0;
    padding: 9px 40px 9px 18px;
    border: 1px solid #ebd0bb;
    border-radius: 999px;
    background: #fffaf6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23a84b2a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 14px 14px no-repeat;
    box-shadow: 0 2px 6px rgba(110, 60, 30, 0.12);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    font-weight: 400;
    color: #3b2314;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
#phocagallery select.form-select:focus {
    border-color: #a84b2a;
    outline: 3px solid rgba(211, 148, 105, 0.45);
}
#phocagallery .pagination .page-link,
#phocagallery .pagination a {
    border: 1px solid #ebd0bb;
    border-radius: 999px;
    background: #fffaf6;
    color: #a84b2a;
    text-decoration: none;
}
#phocagallery .pagination .active .page-link,
#phocagallery .pagination .active a,
#phocagallery .pagination .page-link:hover {
    border-color: #a84b2a;
    background: #a84b2a;
    color: #ffffff;
}

/* ---------- 6. Téléphone ---------- */
@media (max-width: 700px) {
    #phocagallery {
        padding-left: 8px;
        padding-right: 8px;
    }
    #phocagallery .pg-categories-desc,
    #phocagallery > .page-header {
        padding: 24px 18px 22px;
        border-radius: 20px;
    }
    #phocagallery .pg-category-desc {
        padding: 18px 18px;
        border-radius: 16px;
    }
    #phocagallery .pg-categories-items-box {
        gap: 12px;
    }
    #phocagallery form[name="adminForm"] .pagination {
        justify-content: center;
    }
}


/*****************************************************************************/
/*   PAGE ACTUALITÉS (liste en blog) — mise en forme dans le style de        */
/*   la page d'accueil : panneau teinté, titre à filets, cartes à liseré     */
/*   terracotta, boutons pilule, pagination arrondie.                        */
/*   Ce bloc est placé en toute fin de fichier : il l'emporte sur les        */
/*   anciennes règles .carte-actualite et .category-desc plus haut.          */
/*   Pour le limiter à la seule page Actualités, préfixer les sélecteurs     */
/*   par  .itemid-310  (classe présente sur <body>).                         */
/*****************************************************************************/

/* 1. Le blog entier devient un panneau, comme « Dernières actualités » */
.com-content-category-blog.tck-blog {
    margin: 10px 14px 0;
    padding: 0 22px 30px;
    border-radius: 26px;
    border: 1px solid #e6c6ad;
    background: linear-gradient(180deg, #f8e9dc 0%, #f3dfce 100%);
    box-shadow: #4d4c48 2px 2px 5px 0px;
	box-shadow: inset 0 5px 0 #a84b2a, 0 6px 16px rgba(110, 60, 30, 0.18);
}

/* 2. Introduction : plus de carte à bordure, titre à filets de chaque côté */
.com-content-category-blog.tck-blog .category-desc {
    margin: 0 0 8px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.com-content-category-blog.tck-blog .category-desc h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    max-width: 960px;
    margin: 0 auto 14px;
    padding: 26px 10px 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.6rem, 4.5vw, 2.4rem);
    font-weight: 700;
    line-height: 1.15;
    color: #3b2314;
    text-align: center;
}
.com-content-category-blog.tck-blog .category-desc p {
    max-width: 860px;
    margin: 0 auto 10px;
    font-size: 1.05rem;
    line-height: 1.55;
    color: #3b2314;
    text-align: center !important;   /* écrase le « justify » en ligne de l'éditeur */
}
.com-content-category-blog.tck-blog .category-desc h3 {
    margin: 16px 0 6px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.35rem;
    font-style: italic;
    font-weight: 400;
    color: #a84b2a;
    text-align: center !important;
}

/* 3. Grille des cartes */
.com-content-category-blog.tck-blog .com-content-category-blog__items.masonry-2 {
    column-gap: 26px;
    row-gap: 30px;
    padding-top: 12px;
}

/* 4. La carte : fond clair, coins arrondis, liseré terracotta en haut */
.com-content-category-blog.tck-blog .carte-actualite {
    position: relative;
    background: #fffaf6;
    border: 1px solid #ebd0bb;
    border-radius: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: inset 0 5px 0 #a84b2a, 0 6px 16px rgba(110, 60, 30, 0.18);
}
@media (hover: hover) {
    .com-content-category-blog.tck-blog .carte-actualite:hover {
        transform: translateY(-4px);
        box-shadow: inset 0 5px 0 #a84b2a, 0 12px 24px rgba(110, 60, 30, 0.26);
    }
}

/* 5. Image : fond transparent, coins arrondis et ombre comme sur l'accueil.
      L'image garde ses proportions (jamais rognée) ; la boîte épouse l'image,
      donc les coins arrondis sont toujours visibles. */
.com-content-category-blog.tck-blog .carte-actualite__image-link {
    background-color: transparent;
    padding: 24px 0 18px 22px;
    box-sizing: border-box;
}
.com-content-category-blog.tck-blog .carte-actualite__image {
    width: auto;
    height: auto;
    min-height: 0;
    max-width: 100%;
    max-height: 250px;
    border-radius: 12px;
    box-shadow: #4d4c48 2px 2px 5px 0px;
    transition: transform 0.2s ease;
}
.com-content-category-blog.tck-blog .carte-actualite__image-link:hover .carte-actualite__image {
    transform: scale(1.05);
}

/* 6. Textes */
.com-content-category-blog.tck-blog .carte-actualite__contenu {
    padding-top: 24px;
}
.com-content-category-blog.tck-blog .carte-actualite__titre {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
}
.com-content-category-blog.tck-blog .carte-actualite__titre a {
    color: #3b2314;
}
.com-content-category-blog.tck-blog .carte-actualite__titre a:hover,
.com-content-category-blog.tck-blog .carte-actualite__titre a:focus {
    color: #a84b2a;
}
.com-content-category-blog.tck-blog .carte-actualite__intro {
    color: #3b2314;
}
.com-content-category-blog.tck-blog .carte-actualite__date {
    color: #7a5a48;
}

/* Catégorie (si le gabarit l'affiche) : pastille brune comme sur l'accueil */
.com-content-category-blog.tck-blog .carte-actualite__categorie {
    align-self: flex-start;
    margin: 0 0 10px;
}
.com-content-category-blog.tck-blog .carte-actualite__categorie a {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 8px;
    background-color: #a84b2a;
    box-shadow: #4d4c48 1px 1px 3px 0px;
    color: #fff;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s;
}
.com-content-category-blog.tck-blog .carte-actualite__categorie a:hover {
    background-color: #2e2019;
}

/* 7. Bouton « Lire l'article » : pilule brune, comme « Découvrir notre histoire » */
.com-content-category-blog.tck-blog .carte-actualite__bouton {
    border: 0;
    border-radius: 999px;
    background-color: #a84b2a;
    color: #fff;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-weight: 700;
    transition: background-color 0.15s ease;
}
.com-content-category-blog.tck-blog .carte-actualite__bouton::after {
    content: " \2192";
}
.com-content-category-blog.tck-blog .carte-actualite__bouton:hover,
.com-content-category-blog.tck-blog .carte-actualite__bouton:focus {
    background-color: #8a3b1f;
    color: #fff;
    text-decoration: none;
}

/* 8. Pagination : pastilles rondes, page active en brun */
.com-content-category-blog.tck-blog .com-content-category-blog__navigation {
    padding-top: 30px;
}
.com-content-category-blog.tck-blog .com-content-category-blog__counter {
    float: none !important;   /* écrase float-md-end de Bootstrap */
    padding: 0 !important;
    margin: 0 0 12px;
    text-align: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    color: #7a5a48;
}
.com-content-category-blog.tck-blog .tck-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0 !important;
    padding: 0;
}
.com-content-category-blog.tck-blog .tck-pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #ebd0bb;
    border-radius: 999px !important;
    background: #fffaf6;
    box-shadow: 0 2px 6px rgba(110, 60, 30, 0.15);
    color: #a84b2a;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-weight: 700;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.com-content-category-blog.tck-blog .tck-pagination a.page-link:hover,
.com-content-category-blog.tck-blog .tck-pagination a.page-link:focus {
    background: #f8e9dc;
    color: #8a3b1f;
}
.com-content-category-blog.tck-blog .tck-pagination .active .page-link {
    border-color: #a84b2a;
    background: #a84b2a;
    color: #fff;
}
.com-content-category-blog.tck-blog .tck-pagination .disabled .page-link {
    background: transparent;
    box-shadow: none;
    color: #c9a58c;
}

/* Téléphone : 3 numéros + 4 flèches = 7 pastilles, le tout sur une seule ligne */
@media (max-width: 670px) {
    .com-content-category-blog.tck-blog .tck-pagination {
        flex-wrap: nowrap;
        gap: 4px;
    }
    .com-content-category-blog.tck-blog .tck-pagination .page-link {
        min-width: 36px;
        height: 36px;
        padding: 0 6px;
    }
}

/* 9. Téléphone */
@media (max-width: 700px) {
    .com-content-category-blog.tck-blog {
        margin: 8px 8px 0;
        padding: 0 12px 24px;
        border-radius: 20px;
    }
    .com-content-category-blog.tck-blog .carte-actualite {
        border-radius: 16px;
    }
    .com-content-category-blog.tck-blog .carte-actualite__image-link {
        padding: 18px 0 12px 12px;
    }
    .com-content-category-blog.tck-blog .carte-actualite__image {
        max-height: 150px;
        border-radius: 10px;
    }
    .com-content-category-blog.tck-blog .carte-actualite__contenu {
        padding-top: 18px;
    }
    .com-content-category-blog.tck-blog .category-desc p {
        font-size: 1rem;
        text-align: left !important;
    }
}
@media (max-width: 480px) {
    /* petit téléphone : titre sur plusieurs lignes possible, filet unique dessous */
    .com-content-category-blog.tck-blog .category-desc h1 {
        flex-direction: column;
        gap: 10px;
        font-size: 1.55rem;
    }
    .com-content-category-blog.tck-blog .category-desc h1::before {
        display: none;
    }
    .com-content-category-blog.tck-blog .category-desc h1::after {
        flex: none;
        width: 70px;
        background: #c9784d;
    }
}


/*****************************************************************************/
/*   PAGE ARTICLE (affichage d'un article) — mise en forme dans le style de  */
/*   la page d'accueil : panneau teinté, carte claire à liseré terracotta,   */
/*   titre à filets, intertitres à barre brune, boutons pilule.              */
/*                                                                           */
/*   PORTÉE : le style ne s'applique qu'aux articles « classiques », c'est-  */
/*   à-dire ceux dont le corps commence par un titre <h1> placé directement  */
/*   dans l'article. Il laisse donc intactes :                               */
/*     - la page d'accueil (body.homepage),                                  */
/*     - les pages à accordéons (FAQ, statuts),                              */
/*     - les pages construites dans un conteneur à classe propre             */
/*       (don-page, etc.), qui ne commencent pas par un <h1> direct.         */
/*   Les sélecteurs étant longs, le préfixe est répété à chaque règle.       */
/*****************************************************************************/

/* 1. Le cadre de l'article devient un panneau teinté (comme les sections d'accueil) */
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) {
    margin: 10px 14px 0;
    padding: 0 22px 26px;
    border-radius: 26px;
    border: 1px solid #e6c6ad;
    background: linear-gradient(180deg, #f8e9dc 0%, #f3dfce 100%);
    box-shadow: #4d4c48 2px 2px 5px 0px;
}

/* 2. Le texte de l'article : carte claire à liseré terracotta */
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body {
    position: relative;
    margin-top: 24px;
    padding: 6px 34px 26px;
    border: 1px solid #ebd0bb;
    border-radius: 20px;
    background: #fffaf6;
    color: #3b2314;
    overflow: hidden;
	box-shadow: inset 0 5px 0 #a84b2a, 0 6px 16px rgba(110, 60, 30, 0.18);
}
/* la carte englobe toujours l'image flottante (divdroite / divgauche) */
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body::after {
    content: "";
    display: block;
    clear: both;
}

/* 3. Titre principal : grand, avec un filet dégradé de chaque côté */
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 22px auto 20px;
    padding: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.6rem, 4.5vw, 2.4rem);
    font-weight: 700;
    line-height: 1.15;
    color: #3b2314;
    text-align: center;
}
/* 4. Texte courant */
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > p,
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > ul,
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > ol {
    font-size: 1.05rem;
    line-height: 1.2;
    color: #3b2314;
}
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > ul li::marker,
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > ol li::marker {
    color: #a84b2a;
}
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > p a,
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > ul a,
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > ol a {
    color: #a84b2a;
    font-weight: 700;
    text-decoration: underline;
}
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > p a:hover,
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > ul a:hover,
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > ol a:hover {
    color: #8a3b1f;
}
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > blockquote {
    margin: 18px 0;
    padding: 12px 20px;
    border-left: 5px solid #a84b2a;
    border-radius: 0 12px 12px 0;
    background: #f8e9dc;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    color: #3b2314;
}

/* 5. Intertitres : <h2> centré, <h4> avec barre brune (comme les étiquettes d'accueil) */
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > h2 {
    margin: 26px 0 12px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.2;
    color: #a84b2a;
    text-align: center;
}
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > h4 {
    margin: 30px 0 12px;
    padding: 2px 0 2px 14px;
    border-left: 5px solid #a84b2a;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    color: #a84b2a;
    text-align: left !important;      /* écrase le « justify » en ligne de l'éditeur */
}
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > h4 strong {
    font-weight: 700;
}

/* 6. <h3> : encart de conclusion / appel à l'action, bandeau teinté */
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > h3 {
    clear: both;
    margin: 32px 0 6px;
    padding: 16px 22px;
    border: 1px solid #e6c6ad;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8e9dc 0%, #f3dfce 100%);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.35;
    color: #3b2314;
    text-align: center !important;
}
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > h3 a {
    color: #a84b2a;
    text-decoration: underline;
}
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > h3 a:hover {
    color: #8a3b1f;
}

/* Bouton pilule optionnel, à placer dans l'article :
   <p class="bouton-article"><a href="...">Découvrir le site</a></p>          */
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) .bouton-article {
    margin: 22px 0 8px;
    text-align: center;
}
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) .bouton-article a {
    display: inline-block;
    padding: 14px 34px;
    border-radius: 999px;
    background-color: #a84b2a;
    color: #fff;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) .bouton-article a::after {
    content: " \2192";
}
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) .bouton-article a:hover,
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) .bouton-article a:focus {
    background-color: #8a3b1f;
    color: #fff;
    text-decoration: none;
}

/* 7. Image flottante (divdroite / divgauche) : légende dans le style du site */
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) .divdroite img,
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) .divgauche img {
    border-radius: 16px;
}
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) .divdroite .DescriptionPhoto,
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) .divgauche .DescriptionPhoto {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.85rem;
    font-style: italic;
    line-height: 1.3;
    color: #7a5a48;
    text-align: center;
}

/* 8. Date de publication : pastille discrète */
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) dl.article-info {
    margin: 18px 0 0;
}
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) dl.article-info dd {
    margin: 0;
}
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) dd.published {
    display: inline-block;
    padding: 5px 16px;
    border: 1px solid #ebd0bb;
    border-radius: 999px;
    background: #fffaf6;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.9rem;
    font-style: italic;
    color: #7a5a48;
}

/* 9. Précédent / Suivant : pilules brunes, comme les boutons d'accueil */
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) .pagenavigation {
    margin-top: 18px;
    padding: 0;
}
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) .pagenavigation .btn.btn-secondary {
    padding: 9px 22px;
    border: 0;
    border-radius: 999px;
    background-color: #a84b2a;
    box-shadow: #4d4c48 1px 1px 3px 0px;
    color: #fff;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    transition: background-color 0.15s ease;
}
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) .pagenavigation .btn.btn-secondary:hover,
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) .pagenavigation .btn.btn-secondary:focus {
    background-color: #8a3b1f;
    color: #fff;
}

/* 10. Boutons de partage : le décalage négatif posé par le plugin
       (.share-container { margin-top: -30px }) les ferait chevaucher la
       navigation ; on le remplace par un espace normal. */
body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) .share-container {
    margin-top: 18px !important;
}

/* 11. Téléphone */
@media (max-width: 700px) {
    body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) {
        margin: 8px 8px 0;
        padding: 0 10px 20px;
        border-radius: 20px;
    }
    body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body {
        margin-top: 16px;
        padding: 4px 16px 20px;
        border-radius: 16px;
    }
    body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > h1 {
        margin: 18px auto 14px;
    }
    body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > h4 {
        font-size: 1.15rem;
    }
    body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > h3 {
        padding: 12px 14px;
        font-size: 1.15rem;
    }
}
@media (max-width: 480px) {
    /* petit téléphone : titre sur plusieurs lignes possible, filet unique dessous */
    body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > h1 {
        flex-direction: column;
        gap: 10px;
        font-size: 1.55rem;
    }
    body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > h1::before {
        display: none;
    }
    body:not(.homepage) .com-content-article.item-page:has(> .tck-article-body > h1):not(:has([data-rlta-type])) > .tck-article-body > h1::after {
        flex: none;
        width: 70px;
        background: #c9784d;
    }
}

/* =====================================================================
   PAGE D'UN ÉVÈNEMENT DE L'AGENDA (JEvents, vue détail)
   Même style que la page d'accueil et les pages article : panneau teinté,
   carte claire à liseré terracotta, pavé de date, titre à filets,
   étiquettes en pastille brune.
   À placer en fin de custom.css : il remplace la règle
   « couleur du fond du module jevent » (#jevents_body .jev_evdt) et
   complète le <style> du gabarit (.jev-wrapper, .jev-row, ...).
   Les sélecteurs commencent par #jevents_body pour l'emporter sur ce <style>.
   ===================================================================== */

/* 1. Le cadre devient un panneau teinté (comme les sections d'accueil) */
#jevents_body .jev_evdt {
    margin: 10px 14px 0;
    padding: 0 22px 26px;
    border-radius: 26px;
    border: 1px solid #e6c6ad;
    background: linear-gradient(180deg, #f8e9dc 0%, #f3dfce 100%);
    box-shadow: #4d4c48 2px 2px 5px 0px;
    color: #3b2314;
}

/* 2. Le contenu : carte claire à liseré terracotta */
#jevents_body .jev-wrapper {
    width: auto;
    max-width: none;
    margin: 24px 0 0;
    /* contenu centré sur 900 px max ; place en haut pour l'icône qui déborde du pavé de date */
    padding: 56px max(34px, calc((100% - 900px) / 2)) 26px;
    box-sizing: border-box;
    border: 1px solid #ebd0bb;
    border-radius: 20px;
    background: #fffaf6;
    box-shadow: inset 0 5px 0 #a84b2a, 0 6px 16px rgba(110, 60, 30, 0.18);
}

/* 3. Pavé de date (même look que les pavés « Prochain(s) rendez-vous ») */
#jevents_body .jev-datebox {
    width: 220px;
    max-width: 70%;
    margin: 0 auto 22px;
    padding: 4px 20px 16px;
    border-radius: 20px;
    background: #ebd4c3;
    box-shadow: 0 4px 10px rgba(110, 60, 30, 0.2);
}
#jevents_body .jev-datebox img {
    filter: drop-shadow(0 2px 3px rgba(110, 60, 30, 0.35));
}
#jevents_body .jev-datebox h3 {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 18px;
    font-weight: 700;
    color: #3a3a3a;
}
/* Numéro du jour en grand (nécessite <span class="jev-jour"> dans le gabarit) */
#jevents_body .jev-datebox .jev-jour {
    display: block;
    font-size: 40px;
    line-height: 1.1;
    color: #a84b2a;
}
#jevents_body .jev-datebox h4 {
    margin: 6px 0 0;
    padding: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 15px;
    font-weight: 700;
    color: #5a5a5a;
}

/* 4. Titre : grand, avec un filet dégradé de chaque côté */
#jevents_body .jev-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 10px auto 28px;
    padding: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.6rem, 4.5vw, 2.4rem);
    font-weight: 700;
    line-height: 1.15;
    color: #3b2314;
    text-align: center;
}
#jevents_body .jev-title::before,
#jevents_body .jev-title::after {
    content: "";
    flex: 1 1 24px;
    height: 3px;
    border-radius: 3px;
}
#jevents_body .jev-title::before {
    background: linear-gradient(90deg, rgba(168, 75, 42, 0), #c9784d);
}
#jevents_body .jev-title::after {
    background: linear-gradient(270deg, rgba(168, 75, 42, 0), #c9784d);
}

/* 5. Lignes Description / Lieu : étiquette en pastille brune + texte */
#jevents_body .jev-row {
    gap: 22px;
    padding: 0;
}
#jevents_body .jev-row + .jev-row {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px dotted #e6c6ad;
}
#jevents_body .jev-label {
    flex: 0 0 130px;
    box-sizing: border-box;
    padding: 7px 14px;
    border-radius: 8px;
    background-color: #a84b2a;
    box-shadow: #4d4c48 1px 1px 3px 0px;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    text-align: center;
}
#jevents_body .jev-label::after {
    content: none;               /* plus de « : », la pastille suffit */
}
#jevents_body .jev-content {
    padding-top: 4px;
    font-size: 1.05rem;
    line-height: 1.5;
    color: #3b2314;
}
#jevents_body .jev-content p {
    margin: 0 0 .8em;
}
#jevents_body .jev-content > p:first-child {
    margin: 0;                   /* paragraphe qui n'entoure que l'image */
}
#jevents_body .jev-content a {
    color: #a84b2a;
    font-weight: 700;
    text-decoration: underline;
}
#jevents_body .jev-content a:hover {
    color: #8a3b1f;
}

/* 6. Image en lettrine : coins arrondis et ombre, comme les autres images */
#jevents_body .jev-content img {
    width: 25%;
    max-width: 220px;
    border-radius: 20px;
    box-shadow: #4d4c48 2px 2px 5px 0px;
}

/* 7. Téléphone */
@media (max-width: 700px) {
    #jevents_body .jev_evdt {
        margin: 8px 8px 0;
        padding: 0 12px 20px;
        border-radius: 20px;
    }
    #jevents_body .jev-wrapper {
        padding: 56px 16px 20px;   /* (écrase le max() du PC) */
    }
}
@media (max-width: 600px) {
    #jevents_body .jev-label {
        flex: none;
        align-self: flex-start;
        text-align: left;
    }
    #jevents_body .jev-content {
        padding-top: 0;
    }
    #jevents_body .jev-content img {
        width: 60%;
        max-width: 220px;
    }
}
@media (max-width: 480px) {
    /* titre sur plusieurs lignes possible, filet unique centré dessous */
    #jevents_body .jev-title {
        flex-direction: column;
        gap: 10px;
        font-size: 1.55rem;
    }
    #jevents_body .jev-title::before {
        display: none;
    }
    #jevents_body .jev-title::after {
        flex: none;
        width: 70px;
        background: #c9784d;
    }
}