/****************************************************************/
/*           presentation de l'entete de la page d'accueil      */
/****************************************************************/
#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);
    }
}

/* 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  {
    background: #F5E7DC;
    margin-bottom: 15px;
    margin-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
}



/******************** Gestion des images ***********************************************
/* presentation des images avec coins arrondis et ombre*/
.vignettephoto  {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    box-shadow: #4d4c48 2px 2px 5px 0px;
    -moz-box-shadow: #4d4c48 2px 2px 5px 0px;
    -webkit-box-shadow: #4d4c48 2px 2px 5px 0px;
    max-width: 100%;
    height: auto;
}
/* presentation des images avec coins arrondis et ombre avec zoom*/
.vignettephotolien  {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    box-shadow: #4d4c48 2px 2px 5px 0px;
    -moz-box-shadow: #4d4c48 2px 2px 5px 0px;
    -webkit-box-shadow: #4d4c48 2px 2px 5px 0px;
    max-width: 100%;
    height: auto;
    transition: transform .2s;
}
.vignettephotolien:hover {
    -ms-transform: scale(1.08); /* IE 9 */
    -webkit-transform: scale(1.08); /* Safari 3-8 */
    transform: scale(1.08);
}

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


/*****************************************************************************/
/*                  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                    */
/***************************************************************/

#ContenantAgenda .tck-module-title {
    text-align: center;
    padding-top: 15px;
}

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

/* 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 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: #ebd4c3;
    border: none !important;
    border-radius: 20px;
    box-shadow: #4d4c48 2px 2px 5px 0px;
    padding: 30px 20px 20px 20px;
    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.3;
}

/* 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;
}



/* On laisse de la place en haut du pavé pour que l'icône puisse "déborder" */
#ContenantAgenda .mod_events_latest_table td.mod_events_latest_first,
#ContenantAgenda .mod_events_latest_table td.mod_events_latest {
    position: relative;
    margin-top: 35px;
 /*   padding-top: 45px;*/
}


/* L'icône ronde du calendrier, en haut et au centre du pavé */
#ContenantAgenda .mod_events_latest_table td.mod_events_latest_first::before,
#ContenantAgenda .mod_events_latest_table td.mod_events_latest::before {
    content: "";
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    background-image: url('/images/MesIcones/Calendrier.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55px 55px;
}

#ContenantAgenda .mod_events_latest_table td.mod_events_latest_first,
#ContenantAgenda .mod_events_latest_table td.mod_events_latest {
    box-sizing: border-box;
}

@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 {
    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;
    box-shadow: #4d4c48 2px 2px 5px 0px;
    width: 220px;
    margin-top: 35px;
    padding: 30px 15px 20px 15px;
    box-sizing: border-box;
    text-align: center;
}

/* Icône en haut, centrée, sans cercle ni ombre */
#ContenantAgenda .derniers-articles::before {
    content: "";
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    background-image: url('/images/MesIcones/News.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55px 55px;
}

/* Le titre de l'actualité, au-dessus de l'image */
#ContenantAgenda .derniers-articles li {
    list-style: none;
    margin: 0 0 12px 0;
    padding: 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 {
    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: none;
    transition: transform .2s;
}
#ContenantAgenda .article-image img:hover {
   -ms-transform: scale(1.08); /* IE 9 */
    -webkit-transform: scale(1.08); /* Safari 3-8 */
    transform: scale(1.08);
}


/* Mode téléphone : un pavé par ligne, largeur stable */
@media (max-width: 600px) {
    #ContenantAgenda .mod-articleslatest.latestnews {
        display: block;
        width: 100%;
    }

    #ContenantAgenda .derniers-articles {
        display: flex;
        width: 85%;
        max-width: 300px;
        margin: 35px auto 0 auto;
    }

    #ContenantAgenda .derniers-articles li a {
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/***************************************************************/
/* modification pour les articles à la une    sur une ligne    */
/***************************************************************/
#ContenantArticlesUne .tck-module-title {
    text-align: center;
    padding-top: 10px;
}


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

/* Le pavé */
#ContenantArticlesUne .mod-articlescategory.category-module li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ebd4c3;
    border-radius: 20px;
    box-shadow: #4d4c48 2px 2px 5px 0px;
    width: 220px;
    min-height: 100px;
    margin-top: 35px;
    padding: 30px 15px 20px 15px;
    box-sizing: border-box;
    text-align: center;
    list-style: none;
}

/* Icône en haut, centrée, sans cercle ni ombre */
#ContenantArticlesUne .mod-articlescategory.category-module li::before {
    content: "";
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    background-image: url('/images/MesIcones/Punaise.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55px 55px;
}

/* Le titre de l'article */
#ContenantArticlesUne .mod-articlescategory.category-module li a {
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
}

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

/* Mode téléphone : un pavé par ligne, largeur stable */
@media (max-width: 600px) {
    #ContenantArticlesUne .mod-articlescategory.category-module {
        display: block;
        width: 100%;
    }

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

    #ContenantArticlesUne .mod-articlescategory.category-module li a {
        overflow-wrap: break-word;
        word-break: break-word;
    }
}



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

/* Conteneur : les pavés s'alignent sur une ligne, retour à la ligne si besoin */
#ContenantArticlesUne .mod-tagssimilar.tagssimilar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Le pavé */
#ContenantArticlesUne .mod-tagssimilar.tagssimilar li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ebd4c3;
    border-radius: 20px;
    box-shadow: #4d4c48 2px 2px 5px 0px;
    width: 220px;
    min-height: 100px;
    margin-top: 35px;
    padding: 30px 15px 20px 15px;
    box-sizing: border-box;
    text-align: center;
    list-style: none;
}

/* Icône en haut, centrée, sans cercle ni ombre */
#ContenantArticlesUne .mod-tagssimilar.tagssimilar li::before {
    content: "";
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    background-image: url('/images/MesIcones/Relation.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55px 55px;
}

/* Le titre de l'article */
#ContenantArticlesUne .mod-tagssimilar.tagssimilar li a {
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
}

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

/* Mode téléphone : un pavé par ligne, largeur stable */
@media (max-width: 600px) {
    #ContenantArticlesUne .mod-tagssimilar.tagssimilar {
        display: block;
        width: 100%;
    }

    #ContenantArticlesUne .mod-tagssimilar.tagssimilar li {
        display: flex;
        width: 85%;
        max-width: 300px;
        margin: 35px auto 0 auto;
    }

    #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{
  -moz-columns: 2 auto; 
  -webkit-columns: 2 auto; 
  columns: 2 auto;
  height: auto;
  overflow: auto;
  -webkit-column-rule: 1px solid #D39469;
  -moz-column-rule: 1px solid #D39469;
  column-rule: 1px solid #D39469;
  overflow : hidden;
  margin-bottom: 20px;
  column-gap : 20px;
}

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

/************************************/
/*        modif pour Accordion      */
/************************************/

[data-rlta-element="container"][data-rlta-state="ready"][data-rlta-theme="neutral"][data-rlta-type="accordions"] > [data-rlta-element="button"] {
     background-color: #e3c3aa;  
     border: #e19c6a 1px solid;
}
[data-rlta-element="container"][data-rlta-state="ready"][data-rlta-theme="neutral"][data-rlta-type="accordions"] > [data-rlta-element="button"]:before {
	 content:url(/images/MesIcones/FlecheDroite.png);
	 margin-right:10px;
}
[data-rlta-element="container"][data-rlta-state="ready"][data-rlta-theme="neutral"][data-rlta-type="accordions"] > [data-rlta-element="button"]:hover {
     background-color: #e19c6a;  
}
[data-rlta-element="container"][data-rlta-state="ready"][data-rlta-theme="neutral"][data-rlta-type="accordions"] > [data-rlta-element="button"]:focus,
[data-rlta-element="container"][data-rlta-state="ready"][data-rlta-theme="neutral"][data-rlta-type="accordions"] > [data-rlta-element="button"][data-rlta-state="opening"]:focus,
[data-rlta-element="container"][data-rlta-state="ready"][data-rlta-theme="neutral"][data-rlta-type="accordions"] > [data-rlta-element="button"][data-rlta-state="opening"]:hover
{
    background-color: #e3c3aa;  
}

/*Selecteur cliqué ouvert*/
[data-rlta-element="container"][data-rlta-state="ready"][data-rlta-theme="neutral"][data-rlta-type="accordions"] > [data-rlta-element="button"][data-rlta-state="open"],
[data-rlta-element="container"][data-rlta-state="ready"][data-rlta-theme="neutral"][data-rlta-type="accordions"] > [data-rlta-element="button"][data-rlta-state="open"]:focus,
[data-rlta-element="container"][data-rlta-state="ready"][data-rlta-theme="neutral"][data-rlta-type="accordions"] > [data-rlta-element="button"][data-rlta-state="open"]:hover
{
     background-color: #e19c6a;  
     border: #e3c3aa 1px solid;

}

[data-rlta-element="container"][data-rlta-state="ready"][data-rlta-theme="neutral"][data-rlta-type="accordions"] > [data-rlta-element="button"][data-rlta-state="open"]:before
{
	 content:url(/images/MesIcones/FlecheBas.png);
	 margin-right:10px;
}
[data-rlta-element="container"][data-rlta-state="ready"][data-rlta-theme="neutral"][data-rlta-type="accordions"] > div div{
    background-color: #e3c3aa;
     border: #e3c3aa 1px solid;
}

/*********************************************************************/
/*              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       */
/*****************************************************************************/
/* 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');
}

#visformcontainer{
  background: #f5e7dc;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 10px;
}

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

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

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

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

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

/******************************************************************/
/*                   modif pour phocaGallery                      */
/******************************************************************/
#phocagallery {
  background: #f5e7dc;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
}

#pg-msnr-container {
    justify-content: center;
}
.pg-categories-items-box {
    justify-content: center;
}
.pg-category-box-description {
    position: unset;
}

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


/* pour l'overlib */
.bgPhocaClass{
	border: #e19c6a 1px solid;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin-bottom : 5px;
    box-shadow: #4d4c48 2px 2px 5px 0px;
    -moz-box-shadow: #4d4c48 2px 2px 5px 0px;
    -webkit-box-shadow: #4d4c48 2px 2px 5px 0px;
	background-color: #ebd4c3;
}
.fgPhocaClass{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    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;
}

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

.pg-category-box-image img {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    transition: transform .2s;
}
.pg-category-box-image img:hover {
    -ms-transform: scale(1.08); /* IE 9 */
    -webkit-transform: scale(1.08); /* Safari 3-8 */
    transform: scale(1.08);
}
.pg-item-box-image img {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    transition: transform .2s;
}
.pg-item-box-image img:hover {
    -ms-transform: scale(1.08); /* IE 9 */
    -webkit-transform: scale(1.08); /* Safari 3-8 */
    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{
  -moz-columns: 3 auto; 
  -webkit-columns: 3 auto; 
  columns: 3 auto;
  height: auto;
  overflow: auto;
  -webkit-column-rule: 1px solid #D39469;
  -moz-column-rule: 1px solid #D39469;
  column-rule: 1px solid #D39469;
  overflow : hidden;
}

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

@media (max-width: 640px) {
.osmap-items{
  -moz-columns: 1 auto; 
  -webkit-columns: 1 auto; 
  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 gestion du menu actualté, suppression des liens */
ul#osmap-ul-uid-joomla-category-12zzz[class="level_1"] > li[class=" even"]{
display : none;
}
ul#osmap-ul-uid-joomla-category-12zzzz[class="level_1"] > li[class=""]{
display : none;
}
/* 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                     */  
/*********************************************************************/
#jevents_body .jev_evdt {
  background: #f5e7dc;
}

/*********************************************************************/
/*              Rajout d'un titre au module de connexion             */  
/*********************************************************************/

.com-users-login::before {
    content: "Connexion au site";
    display: block;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
    margin-top: 15px;

}
.com-users-login {
  background: #f5e7dc;
  padding: 30px;
  margin: 20px;
}

/*********************************************************************/
/*              Rajout d'un titre au module de recherche             */  
/*********************************************************************/

.com-finder::before {
    content: "Recherche sur le site";
    display: block;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
    margin-top: 15px;

}
.com-finder {
  background: #f5e7dc;
  padding: 30px;
  margin: 20px;
}

/*********************************************************************/
/*      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 */
}

.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-size: clamp(0.95rem, 3.4cqw, 1.35rem);
    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;
}

/* ----------------------------------------------------------
   É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;
        margin-top: -15px;       /* rajouter par CLN pour que la bannière remonte pour toucher le module précedent */

    }
}

/* ----------------------------------------------------------
   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;
        margin-top: -15px;       /* rajouter par CLN pour que la bannière remonte pour toucher le module précedent */
        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;
        margin-top: -15px;       /* rajouter par CLN pour que la bannière remonte pour toucher le module précedent */
    }

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

/* ----------------------------------------------------------
   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); }
}

/*********************************************************************/
/*           Mise en forme date de mise à jour du site               */  
/*********************************************************************/

.db8sitelastmodified{
    color: #a7a098;
}


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