/*

Theme Name: SAGE – Bas Dauphiné Plaine de Valence
Template: generatepress
Author: Pauline LOPEZ
Description: Sage dauphiné
Version: 1 

*/

@import url('assets/css/menu.css');
@import url('assets/css/reset.css');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

.featured-image {
    display: none;
}

.is-right-sidebar{
    width:0%
}

.cmtt-backlink-top{
    display: none !important;
}

.wpsr-counter{
    display: none;
}

.main-title {
    display: none !important;
}
/* .right-sidebar{
    display: none;
} */

@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/Outfit-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/Outfit-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/Outfit-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/Outfit-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/Outfit-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/Outfit-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/Outfit-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/Outfit-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/Outfit-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}


/* GENERAL */

html{
    font-size: 100%;
    overflow-x: hidden
}

body{
    background-color: white;
    margin:0px;
    font-family: 'Outfit', sans-serif;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

a:hover{
    text-decoration: underline;
}

/* Augmenter la taille des espaces entre les paragraphes */
p{
    margin-bottom: 2%;
}

h1, h2, h3, h4, h5 {
    letter-spacing: 0;
    opacity: 1;
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    margin-top: 2%;
}

h1{
    font-size: 3.5rem;
    color: black;
}

h2{
    font-size: 2rem; 
    color:#21407f;
}

h3 { 
    font-size: 1.75rem; 
    color:#1d3c6e;
}

h4 { 
    font-size: 1rem; 
    color:#21407f;
    font-weight: 600;
}

h5 { 
    font-size: 0.75rem; 
    color:#21407f;
}

.margin-top{
    margin-top: 2%;
}

.container-formulaire{
    max-width: 800px;
}

.entry-title{
    text-align: center;
    font-size: 2em; 
}

.separator{
    height: 4px;              /* épaisseur du trait */
    width: 30px;              /* longueur du trait */
    background-color: #f4792b; /* couleur du trait */
    margin: 1rem 0;           /* espace autour */ 
    border-radius: 5px;
}

.btn_sage{
    display: inline-flex;
    align-items: center; /* alignement vertical */
    justify-content: center;  /* alignement horizontal */
    gap: 8px;
    border: 2px solid #21407F;
    color: #21407F;
    border-radius: 40px;
    opacity: 1;
    text-transform: uppercase;
    width: 70%;
    padding: 0.75rem 1.5rem;
    font-weight: 400;
    font-size: 12px;
    background-color: transparent;
}

.btn_sage_orange{
    background: #f4792b;
    color: #000000;
    border-radius: 40px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 2px;
}

.btn_sage_orange:hover{
    background: #21407f;
    color: white;
    border: 1px solid white;
}

.btn_sage_normal{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border: 1px solid #1d3f77;
    border-radius: 50px;
    text-decoration: none;
    color: #1d3f77;
    font-weight: bold;
    background-color: white;
    max-height: 60px;
    height: auto;
    width: auto;
    line-height: 1;
    margin: 2%;
}

.btn_sage_normal img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.btn_sage_normal:hover,
.btn_sage_normal:focus,
.btn_sage_normal:active{
    background-color: #1d3f77;
    color: white !important; 
    text-decoration: none;
}

.icon-espace{
    margin-right: 8px;
}

/* ACCORDEON */
/* Titre de l'accordéon */
.wp-block-accordion-heading{
    background-color: #f7f7f7;
    color: #21407f;
    font-weight: 600;
    font-size: 1.2rem;
    padding: 1%;
    border-radius: 1rem;
}

.wp-block-accordion-item.is-open .wp-block-accordion-heading {
    background-color: #21407f;
    color: white;
}

.wp-block-accordion-panel{
    background-color: white;
    padding: 1.5rem;
    border-left: 3px solid #21407f;
}


/* CITATION - BLOCKQUOTE */
/* Blocquote wrapper */
.wp-block-quote {
    position: relative;
    margin: 20px 0;
    border-left: none; /* on supprime le style WordPress par défaut */
    width: 100%;
    padding-left: 25%; /* Espace à gauche pour l'icône et la barre */
    box-sizing: border-box;
}

/* Icône SVG */
.wp-block-quote::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%); /* Centrage vertical */
    width: 40px;
    height: 40px;
    background-image: url("/wp-content/themes/sagedauphine-valence/img/citation.svg");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
    margin-right: 15px;
}

/* Barre verticale */
.wp-block-quote::after {
    content: "";
    position: absolute;
    left: 5%;
    top: 0;
    height: 100%;
    width: 2px; /* Épaisseur de la barre */
    background-color: #cccc;
    z-index: 1;
    margin-left: 12%;
}

/* Le texte */
.wp-block-quote p {
    margin-left: 25%;
    color: #707070;
    font-style: normal;
    font-size: 1.2rem;
}


/* WORDPRESS BLOC IMAGE */

/* Enlever les marges autour de l'image dans une page*/
.wp-block-image 
.alignleft
{
    margin: 0;
}

/* PAGINATION */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 3%;
    margin-bottom: 5%;
    font-family: Arial, sans-serif;
}

.pagination ul {
    list-style: none;
    display: flex;
    gap: 8px;
    padding: 0;
    margin: 0;
}

.pagination li {
    display: flex;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 25px;
    border: 1.5px solid #1D3A8A; /* Bleu foncé */
    color: #1D3A8A;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    min-width: 38px;
    height: 38px;
    transition: background-color 0.3s, color 0.3s;
}

/* Boutons précédent / suivant */
.pagination .prev,
.pagination .next {
    color: #1D3A8A;
    padding: 8px 18px;
    font-weight: 700;
}

.pagination .prev,
.pagination .next:hover{
    background: #1D3A8A;
    color: white;
}

/* Page active */
.pagination .current {
    background-color: #F97316; /* Orange */
    border-color: #F97316;
    color: black;
    cursor: default;
}

/* Hover  */
.pagination a:hover {
    background-color: #1D3A8A;
    color: white;
}

/* Style pour les points de suspension (...) */
.pagination .dots {
    border: none;
    cursor: default;
    padding: 0 5px;
    min-width: auto;
    color: #777;
}


/* Logo */
.header-image{
    height: 50px; /* Ajuste la hauteur */
    max-width: 200px; 
    object-fit: contain;
}





/* Fléche Revenir en haut de la page */
a.up-lien {
    position: fixed;
    right: 1rem;
    bottom: 50px;
    background-color: #f4792b;
    color: black;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    text-align: center;
    border: none;
    font-size: 0.9rem;
    display: flex;
    justify-content: center; 
    align-items: center; 
    z-index: 2;
}

a.up-lien:hover {
  background-color: #ccc;
}

.hidden {
  position: absolute;
  left: -10000em;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.section_logo_contact
{
    display:flex;
    justify-content:  space-between; 
    margin-bottom: 4% !important;
}

.section_liens_partenaires{
    border-top: 1px solid orange; /* Bordure orange */
    display:flex;
    justify-content:  space-between;
    align-items: center; 
    padding: 20px;
    text-align: center; 
    width: 100%;
}

.liens {
    display: flex;
    flex-direction: column; 
    gap: 10px; 
    align-items: flex-start;
    flex: 1
}

.ligne_liens{
    display: flex;
    gap: 10px;
}

a.lien{   
    color: #5A5A5A;
    text-decoration-line: none;
    font-size: 14px;
}

a.lien:hover{   
    color: #007BFF;
    text-decoration-line: underline;
}

.section_partenaires{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    gap: 20px;
}

.partenaire{
    color: #707070;
    margin-bottom: 20px;
    font-size: 23px;
    white-space: nowrap;
}

.logos_partenaires{
    display: flex;
    gap: 15px;
}

.img_logo_partenaire{
    height: 50px;
    max-width: 120px; 
    object-fit: contain; 
}

.mobile-menu-control-wrapper{
    background: #f4792b;
      border-radius: 50%;
}

/* FRONT PAGE */
.section-title {
  font-size: 2.8em;
  color: black;
  text-align: center;
}

.title-categorie-event{
    display: block;
}

/* Slider */

.slider-caption-text {
    z-index: 2;
    position: relative;
    background-color: #f58220; /* orange */
    border-radius: 20px;
    padding: 8px 15px;
    display: inline-block;
    color: black !important;
    font-size: 1.2rem;
}

#custom-actualites-slider {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

#custom-actualites-slider .carousel-caption {
    bottom: 20px !important;
    right: 20px !important;
    left: auto !important;
    text-align: left;
    max-width: 50%;
}

#custom-actualites-slider .carousel-item img {
    height: 350px;    
    width: 100%;
    object-fit: cover;
}

/* CONTENEUR GLOBAL DES INDICATEURS + PAUSE */
.indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    white-space: nowrap;
}

.carousel-indicators {
    position: static !important;    
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap !important;

}

/* ---------- STYLE DES BULLES ---------- */
.carousel-indicators [data-bs-target] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid #fff !important;
    background: transparent !important;
    opacity: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto;
}

.carousel-indicators .active {
    background: #f58220 !important;
    border-color: #f58220 !important;
    width: 14px;
    height: 14px;
}

/* ---------- BOUTON PAUSE ---------- */
#pauseButton {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;

    font-size: 14px;
    flex: 0 0 auto; /* Empêche l'étirement */
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Style de l'icône pour le bouton Pause */
#pauseButton i {
    font-size: 12px;
    color: white;
}


.custom-slider-wrapper {
    width: 90%;
    height: auto;
    max-height: none;
    position: relative;
    overflow: visible; 
}

.custom-slider-wrapper .metaslider img {
    height: 300px !important;
    object-fit: cover;
    width: 100%;
    border-radius: 0 20px 20px 20px !important;
}

/* Forcer tous les éléments internes à suivre les coins arrondis */
.custom-slider-wrapper .metaslider,
.custom-slider-wrapper .metaslider .flexslider,
.custom-slider-wrapper .metaslider .slides,
.custom-slider-wrapper .metaslider .slides > li,
.custom-slider-wrapper .metaslider img {
    border-radius: 0 20px 20px 0 !important;
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
}

/* SVG superposé à droite */
.slider-svg {
    position: absolute;
    top: 71%;
    right: -26%;    
    height: 90%;      
    width: auto;       
    opacity: 0.3;
    z-index: 1;
    transform: translateY(-50%); /* remonte l’image pour centrer verticalement */
    object-fit: contain;
}

.svg-2{
    display: none;
}

/* Puces de navigation (points) visibles et à l’intérieur */
.custom-slider-wrapper .metaslider .flex-control-nav {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}


/* Centrer le bouton Play/Pause de tous les sliders MetaSlider */
.metaslider .flex-pauseplay {
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    z-index: 10; /* au-dessus des slides */
}

/* Stylisation du bouton Play/Pause */
.metaslider .flex-play {
    width: 80px;                   /* taille du bouton */
    height: 80px;
    border-radius: 50%;            /* rond */
    background-color: rgba(0,0,0,0.5); /* semi-transparent */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Optionnel : icône Play/Pause */
.metaslider .flex-play:before {
    font-size: 24px;
    color: #fff;
}

a.flex-active{
    background-color: #F4792B !important;
}

li a.flex-active {
    color: #ff6600;
    font-weight: bold;
}


/* BLOC BLEU */

.infos-description{
    font-size: 1rem;    
}

.ligne-chiffre-info{
    margin: 2%;
}

.chiffre-info{
    display: flex;
    padding: 3%;
}

.first-point-icon-frontpage {
    width: 13px;
    height: 13px;
    background-color: #ff732b; /* point orange */
    border-radius: 50%;
    position: relative;
    z-index: 2;
}

.first-point-icon-wrapper-frontpage{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  left: -5%;
  width: 24px;
  height: 24px;
  border: 2px solid white;
  border-radius: 50%;
  position: relative;
  transition: transform 0.3s ease;
  top: 5px;
}

.div-point{
    margin-right: 8%;
}

.point-icon-frontpage {
  width: 13px;
  height: 13px;
  background-color: #ff732b; /* point orange */
  border-radius: 50%;
  position: relative;
  z-index: 2;
}

.point-icon-wrapper-frontpage{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid white;
  border-radius: 50%;
  position: relative;
  transition: transform 0.3s ease;
}

.point-icon-wrapper-frontpage::before {
    content: "";
    position: absolute;
    top: -17px;
    left: 47%;
    transform: translateX(-50%);
    width: 1px;
    height: 93px;  
    background-color: #f4792b;
    z-index: 1;
}


/* DEBUT BLOC INFORMATION BLEU */
.div_goutte_eau{
    display: flex;
    justify-content: flex-start;
    padding-bottom: 10%;
    align-items: center;
}

.goutte_eau{
    width: 80px;
    height: 80px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* ✅ respecte le ratio naturel */
    border-radius: 50%;
    background: transparent linear-gradient(180deg, #044CA4 0%, #0A5BAD 10%, #0F6BB6 20%, #167BBF 30%, #1C8BC8 40%, #249CD1 50%, #2BACDB 60%, #31B8E2 70%, #31B8E2 80%, #31B8E2 90%, #31B8E2 100%) 0% 0% no-repeat padding-box;
    opacity: 1;
    padding: 5%;
}

.informations {
    width: 100%;
    position: relative;
    top: -20px;    
    padding: 20px 30px;
    background-color: #21407F; /* ou transparent selon ton design */
    color: white;
    font-size: 20px;    
    /* top-left | top-right | bottom-right | bottom-left */
    border-radius: 0 0 30px 0;
    overflow: hidden;
}

.informations .infos-title {
    font-family: 'Outfit', sans-serif;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 20px;
}

.informations .infos-content {
    line-height: 1.6;
    color: #f0f0f0;
}

.infos-title{
    font-size: 1.5rem;    
    /* padding-top:5%; */
}

.bloc-nombre{
    text-align: left;
    font: normal normal 900 35px/50px Outfit;
    letter-spacing: 0px;
    color: #F4792B;
    opacity: 1;
    margin-bottom: 0%;
}

.bloc-description{
    /* font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-medium) var(--unnamed-font-size-19)/var(--unnamed-line-spacing-24) var(--unnamed-font-family-outfit); */
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--white);
    text-align: left;
    font-size: 1rem;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}


.container{
    max-width: 940px; 
    /* margin: 0 auto;  */
}

.liste-categories{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
    flex: 1;
    align-content: center;
    text-align: center;
    justify-content: center;
}

.btn_categorie{
    font-size: 0.9rem;
    background: transparent;
    color: #21407F;
    border: 1px solid #c5c5c5;
    border-radius: 74px;
    margin: 1%;
    font-weight: 500;
    white-space: nowrap; /* Empêche le retour à la ligne */
    padding: 3px 16px; /* Ajuste l’espace intérieur (haut-bas et gauche-droite) */
}

.btn_categorie:hover{
    background: #f4f4f4;
    color: #21407F;
}
.btn_categorie:focus{
    background: #f4f4f4;
    color: #21407F;
}

.btn_categorie_evenement{
    font-size: 0.9rem;
    background: transparent;
    color: #21407F;
    border: 1px solid #c5c5c5;
    border-radius: 74px;
    margin: 1%;
    font-weight: 500;
    white-space: nowrap; /* Empêche le retour à la ligne */
    padding: 3px 16px;
    text-align: center;
}

.btn_categorie_evenement:hover{
    background: #f4f4f4;
    color: #21407F;
}

.btn_categorie_evenement:focus{
    background: #f4f4f4;
    color: #21407F;
}


.div-bouton-savoir-plus{
    margin-left: 8%;
    display: flex;
    position: relative;
    z-index: 1;
}

/* FIN BLOC INFORMATION BLEU */

/* SECTION ACTUALITES */

.section-actualites {
  display: flex;
  z-index: 1;
  position: relative;
  margin: 5%;
}

.svg-3 {
    display: none;
}

.article-actualite {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 450px; 
  margin-bottom: 15px;
}

.actualite{
    display: flex;
    justify-content: center;
}

.actualites-filtres {
    margin: 20px 0;
}

.filtre {
    background: #f5f5f5;
    padding: 5px 15px;
    border-radius: 20px;
    margin-right: 10px;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Colonnes pour les actualités */
/* Conteneur avec cadre fixe */
.zoom-container {
    width: 100%;
    height: 70%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: end;
}

/* Image zoomable à l'intérieur */
.img-actualite {
    width: 100%;
    height: 120%;
    object-fit: cover;
    transition: transform 0.4s ease, object-position 0.4s ease;
    transform: scale(1);
    transform-origin: center;
    cursor: pointer;
    object-position: center center;
}

/* Effet de zoom interne */
.zoom-container:hover .img-actualite {
    transform: scale(1.1); /* Zoom léger */
    object-position: center top;  /* Décale l'image pour simuler un zoom */
}


.point-icon {
    width: 13px;
    height: 13px;
    background-color: #ff732b; /* point orange */
    border-radius: 50%;
    position: relative;
    z-index: 2;
}

.point-icon-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border: 3px solid #003DA5;
  border-radius: 50%;
  position: relative;
  transition: transform 0.3s ease;
}

.point-icon::before {
  content: "";
  position: absolute;
  top: -59px; /* hauteur du trait */
  left: 47%;
  transform: translateX(-50%);
  width: 1px;
  height: 59px; /* même valeur que top en négatif */
  background-color: #f4792b;
  z-index: 1;
}

.zoom-container:hover ~ .actualite-info .point-icon-wrapper {
  transform: translateY(23px);
}

.zoom-container:hover ~ .actualite-info .point-icon-wrapper::before {
  height: 110px;
}

.categorie_actualite {
    color: #21407F;
    text-align: left;
    letter-spacing: 0px;
    font-size: 20px;
}

.titre_actualites{
    font-family: Outfit;
    font-weight: 700;
    color: #000000;
    text-align: left;
    font-size: 1rem;
    margin:0%;
}

.titre_actualite{
    color: black !important;
}

.titre_actualite:hover{
    text-decoration: underline;
}

.titre_archive{
    color: black !important;
}

.titre_archive:hover{
    text-decoration: underline;
}

.date_actualite{
    font-size: 13px;
    color: #5A5A5A;
}

.actualite-gauche{
    display: flex;
    justify-content: center;
}

.grande-image{
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
}

.div-bouton-tous {
  display: flex;
  justify-content: center;
  margin-bottom: 10%;
}

.dernier{
    margin-bottom: 2%;
}

/* BOUTON TOUTES ... */
.btn-tous {
    display: inline-flex !important;
    align-items: center !important; /* Aligne verticalement les enfants */
    justify-content: flex-end !important;
    text-align: center;
    height: 63px;
    padding: 10px 20px;    
    border: 1px solid #21407F;
    border-radius: 40px 40px 40px 40px;
    color: #21407F;
    font-weight: bold;
    text-decoration: none;
    gap: 8px; /* Espace entre le + et le texte */

}

.btn-tous .plus {
    color: orange;
    font-size: 24px;
    font-weight: bold;
    margin-left: 10px;
}

.btn-tous:hover {
    background-color: #21407F;
    color: white;
    text-decoration: none;
}

.btn-tous:hover .plus {
    color: white;
}

.btn-actualites:hover {
    background: #000;
    color: #fff;
}


/* SECTION EVENT */
.section-evenements{
    margin: 5%;
}

/* .evenement{
    flex-direction: column;
} */

/* Conteneur image carré */
.zoom_image {
    position: relative;  
    display: flex;
    overflow: hidden; 
    justify-content: center;
    align-items: flex-end;
    aspect-ratio: 1/1;
    margin-bottom: -35px;
    /* z-index: 1; */
    z-index: 2;    
}

.zoom_image::before {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    width: 40px;  /* Ajuste la largeur des bordures pour qu'elles couvrent le conteneur */
    height: 40px;
    border-top: 15px solid #F4792B;   /* orange */
    border-left: 15px solid #F4792B;
    z-index: 2;
}

/* Effet de zoom avec transition */
.zoom_image:hover .img-event {
    transform: scale(1.1); /* Zoom léger */
    object-position: center center; /* Centrer l'image au moment du zoom */
    transition: transform 0.3s ease; /* Durée et effet de transition */
}

.img-event{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease; /* Transition sur l'image */
}

.point-icon-event-wrapper {
    position: absolute;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border: 2px solid white;
    border-radius: 50%;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);  /* Permet de centrer exactement le point */
    transition: transform 0.3s ease;
    z-index: 2;
}

.point-icon-event {
    width: 13px;
    height: 13px;
    background-color: #ff732b; /* point orange */
    border-radius: 50%;
}

.icon-event{
    color: #f4792b;
    padding-right: 5%;
}

.lien-event{
    color: white;
}

.lien-event:hover{
    color: white;
    text-decoration: underline;
}

/* Bloc texte à droite */
.evenement-info {
    z-index: 1;
    position: relative;
    padding: 61px 0px 20px 0px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #21407F;
    color: white;
    width: 100%;
}

/* Supprime les marges dans les <p> */
.evenement-info p {
    margin: 0;
    padding: 0; 
}

.row_evenements{
    padding-top: 5%;
    justify-content: center;
}

.type_evenement, .lieu, .heure {
    font-size: 14px;
}

.row_lieu_heure{
    display: flex;
    gap: 12px;
}

.lieu{
    width: 50%;
}

.heure{
    width: 50%;
}

/* .titre, .date {
    font: normal normal bold 21px/24px;
} */

.date{
    font-size: 18px;   
    font-weight: bold;
}

.titre_evenement{
    color: white;
    font-size: 20px;
    padding-top: 4%;
}

/* PAGE TOUS LES EVENEMENTS */

.wpem-heading-text{
    display: none;
}


.card-img-top {
    height: 200px;
    object-fit: cover;
}

.card-body {
    padding: 20px;
}

.card-footer {
    background-color: #f7f7f7;
    text-align: center;
}

.card-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: black !important;
}

.card-title:hover{
    text-decoration: underline;
}

.card-text {
    font-size: 0.9rem;
    color: #555;
}

.card-footer .btn {
    background-color: #007bff;
    color: white;
    text-transform: uppercase;
}

.card-footer .btn:hover {
    background-color: #0056b3;
}



/* PAGE Un EVENEMENT */
.contenu_page img.event-image {
    width: 100%;          
    height: auto;        
    aspect-ratio: 16 / 9;
    object-fit: cover;  
    display: block;   
}

.event-image {
    width: 100%;          
    height: auto;        
    aspect-ratio: 16 / 9;
    object-fit: cover;  
    display: block;   
}


.event-date{
    text-transform: uppercase;
    font-weight: bold;
    font-size: 18px;
}

.div_btn_tous_event{
    text-align: center;
    padding: 4%;
}

/* PAGE ARCHIVE EVENEMENT */
.icon-event-archive{
    color: #f4792b;
    padding-right: 1%;
}

.filtre_and_searchbar{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 2%;
}

.search-bar{
    text-align: center;
    padding-left: 2%;
}

/* SECTION LIVRET NEWSLETTER */
.background-grey{
    background-color: #f7f7f7;
}

.div-section-livret-newsletter{
    background-color: #f7f7f7;
    padding-bottom: 3%;
    padding-top: 3%;
}


.title-background-grey{
    background-color: #f7f7f7;
    margin-bottom: 0%;
    padding-top: 4%;
    margin-top: 9%;
}

.svg-4 {
    display: none;
}

/* SECTION IMAGES */
.section-images{
    margin: 5% 5% 0 5%;
}

.infos-diaporama-box {
    position: absolute;
    bottom: 83px;  
    left: 0;
    right: 25%;
    background-color: #0d2f6e;
    color: white;
    padding: 20px;
    display: none;
    border-radius: 0 30px 30px 0;
    text-align: left;
}

.diaporama {
    position: relative;
    display: block;
}

.diaporama:hover .infos-diaporama-box {
  display: block;
  transition: transform 0.3s ease; 
}

.diaporama img:hover{
    filter: brightness(64%);    
    transition: transform 0.3s ease; 
}

.categorie_diaporama{
    display: inline-block; 
    border-top: 7px solid orange;
    width: 50%;
    font-size: 12px;
}

.titre_diaporama{
    color:white;
    font-size: 0.9rem;
}


/* Modal plein écran */
/* Style général de la modal */
#custom-modal .modal-content {
    position: relative;
    padding: 2rem;
    background: white;
    border-radius: 8px;
    max-width: 800px; /* tu peux agrandir ici */
    margin: auto;
}

/* Bouton de fermeture */
.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2rem; /* agrandit l'icône */
    color: #35518b;
    cursor: pointer;
    z-index: 10;
    text-decoration: none;
}

.close-modal:hover {
  color: #35518b; /* optionnel : effet au survol */
}

/* Optionnel : agrandir aussi l'icône si tu veux */
.icon-close-modal {
  font-size: 2rem; /* ou plus selon le design */
}


/* Plein écran global : supprime les marges lat�rales */
.site,
.container-margin{
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
}

.container-margin {
    /* padding-bottom: 100px !important; */
}

.site-content{
    justify-content: center;
}

/* Fil d'ariane */
#breadcrumbs,
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap; /* pour qu'il s'adapte en mobile */
}

#breadcrumbs span,
#breadcrumbs a {
    display: inline;
    margin-right: 4px;
    white-space: nowrap;
}


/* Formulaires */

/* Cacher le <br> après chaque <label> dans les formulaires Contact Form 7 */
.wpcf7-form label + br {
    display: none;
}

.wpcf7-form{
    max-width: 700px;       
    margin: 0 auto;           /* centre horizontalement */
    padding: 1rem;
    display: flex;
    flex-direction: column; 
    gap: 1rem;
}

/* Arrondir les champs du formulaire */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="file"],
.wpcf7 input[type="date"],
.wpcf7 textarea,
.wpcf7 select {
    border-radius: 30px;   /* Ajuste la valeur (ex: 20px pour plus arrondi) */
    border: 1px solid #6b6b6b;
    background-color: #fff; 
    padding: 10px 15px;
    box-sizing: border-box;
}

.wpcf7 input[type="file"]{
    color: gray;
}

.wpcf7 textarea{
    padding: 5px 15px;
}

input[type="text"] {
    border-radius: 30px; 
    border: 1px solid #6b6b6b;
    background-color: #fff; 
    padding: 10px 15px;
    box-sizing: border-box;
}

button[type="submit"]{
    padding: 12px 20px;
    border: 1px solid #1d3f77;
    border-radius: 50px;
    text-decoration: none;
    color: #1d3f77;
    font-weight: bold;
    background-color: white;
    max-height: 60px; 
    height: auto;
    width: auto;
    line-height: 1;
    margin: 3%;
}

button[type="submit"]:hover{
    background-color: #1d3f77;
    color: white; 
}

.wpcf7 form label {
    font-weight: bold; 
    display: block;     
    margin-top: 30px;  
    margin-bottom: 10px;  
    font-size: 17px;  
}

/* Bouton d’envoi */
.wpcf7 input[type="submit"] {
    display: block;
    margin: 20px auto 0 auto; /* centre horizontalement */
    background-color: white; 
    color: #3a568d;               
    border-radius: 50px;        
    padding: 12px 40px;        
    font-size: 16px;
    font-weight: bold;
    border-color: #3a568d;
}

.terms-text- {
    display: block;
    margin-top: 5px; 
    font-size: 14px;
    color: #333;
}


.section_formulaire_evenements{
    text-align: center;
}
/* GLOSSAIRE */

/*Agrandir l'alphabet */
.glossary-az-nav {
    margin: 5%;
    font-size: 1.75rem;
    text-align: center;
}

.glossary-search-form{
    text-align: center;
}

.glossary-list{
    margin: 5%;
}


/* Barre de recherche du glossaire */
/* .glossary-search-form input[type="text"] {
    border-radius: 30px; 
    border: 1px solid #6b6b6b;
    background-color: #fff; 
    padding: 10px 15px;
    width: 50%;
    box-sizing: border-box;
} */


.ln-letters {
    display: flex;
    flex-wrap: wrap; /* Permet aux lettres de se déplacer sur la ligne suivante si nécessaire */
    justify-content: center; /* Centre les lettres horizontalement */
    gap: 1%; /* Espacement entre chaque lettre */
    margin-top: 20px; /* Espacement au-dessus */
    margin-bottom: 20px; /* Espacement en bas */
}

.ln-letters a{
    font-size: 10pt !important;
}

/* ULTIMATE MEMBER */

/* Label des inputs  */
.um-row .um-field-label label{
    font-size: 18px !important;
}

/* Check box */
.um-field-checkbox input[type="checkbox"]:checked + .um-field-checkbox-state i {
    color: #003366 !important;
}

/* Tous les champs input Ultimate Member */
div.um-form div.um-field-area input.um-form-field {
    border-radius: 30px !important;
    border: 1px solid #6b6b6b !important;
    background-color: #fff !important;
    padding: 10px 15px !important;
    font-size: 16px !important;
}

/* PAGE TOUTES LES ACTUALITES */
.bloc {
    display: flex;
    flex-direction: row;      /* image à gauche, texte à droite */
    align-items: center;      /* centre verticalement */
    margin-bottom: 40px;
    justify-content: center;
}

.bloc-image img {
    width: 100%;
    max-height: 350px;
    object-fit: cover;
    object-position: center;
    display: block;
    aspect-ratio: 3 / 2;
}

.bloc .bloc-texte {
    padding-left: 20px;
    display: flex;
    flex-direction: column;
}


/* Page d'une actualité */
/* Page */

.page {
    width: 100%;
    margin: 0;
    padding: 0;
    max-width: 100%;
    /* padding-bottom: 8%; */
}

.fil_ariane_print{
    display: flex;
    justify-content: space-between;
}

.div_fil_ariane{
    display: flex;
    align-items: center;    
}

.fil_ariane {
    /* display: flex;
    align-items: center;
    flex-wrap: wrap; */
    gap: 4px;
    font-size: 0.6rem;
}

.fil_ariane a{
    color: white;
}

.fil_ariane br {
    display: none;
}

.fil_ariane i.fa-home {
    margin-right: 5px;
    font-size: 1.5rem;;
}

.block_img_actualite{
    margin-bottom: 0px !important;
}

.block_img_actualite img {
    width: 95%;
    height: 200px;
    object-fit: cover;
    border-radius: 0 30px 0 0;
    display: block;
}

.bloc-infos-article {
    background-color: #0d2f6e;
    color: white;
    border-radius: 0 0 30px 0;
    margin-top: 0%;
    margin-bottom: 3%;
    display: flex;
    align-items: center;
    min-height: 250px;
    position: relative;
    width: 95%;
    z-index: 2;
}

.bloc-infos-single {
    background-color: #0d2f6e;
    color: white;
    border-radius: 0 0 30px 0;
    /* margin-top: -60px; */
    margin-top: 0px;
    display: flex;
    align-items: center;
    min-height: 300px;
    position: relative;
    width: 95%;
    z-index: 2;
}

.infos-wrap {
    width: 100%;
    /* max-width: 1500px; */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5%;
}

.actions{
    display: flex;
    justify-content: center;
}

.actions a {
    display: inline-block;
    margin-left: 10px;
    color: white;
    padding: 16px;
    border-radius: 50%;
    transition: background 0.3s ease;
    font-size: 1.5rem;
}

.div_categorie_single{
    display: flex;
    justify-content: center;
    padding: 1%;
}

.categorie_single {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
    opacity: 0.9;
    color: white;
}

.categorie_single:hover{
    text-decoration: underline;
    color: white;
}

.titre_page {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: white;
    margin-top: 20px;
    text-align: center;
}

.extrait_page {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 30px;
    font-weight: bold;
}

.date_publication_page{
    font-size: 0.6rem;    
    border-top: 2px solid white;
    padding-top: 10px;
    opacity: 0.8;
    text-transform: uppercase;
}

/* Bloc Magazine et NEWSLETTER */
/* Première colonne */

.img-livret {
    display: flex;
}

.img-livret-newsletter {
    transform: rotate(-4deg) scale(1.4) translateY(-20px);
    margin-left: 30%;
    margin-top: 27%;
    margin-bottom: 8%;
    width: 180px;  /* Largeur */
    height: 250px; /* Hauteur */
}

/* Deuxiéme colonne */
.deuxieme_colonne{
    z-index: 1;
    padding: 12%;
}

.categorie_publication{
    font-weight: 500;
    font-size: 18px;
    color:#21407f;
}

.titre_publication{
    color: black;
    font-weight: 600;
    font-size: 1.5rem;
}

.mois_annee_publication{
    color: black;
    text-transform: uppercase;
}

.lien_publication:hover{
    text-decoration: underline;
}

.description_publication{
    padding-bottom: 6%;
}

.boutons_telecharger_lecture{
    display: flex;
    justify-content: flex-start; 
    gap:20px;    
}

.div_btn_telecharger{
    display: flex;
    align-items: center;    
}

.div_btn_feuilletter{
    display: flex;
    align-items: center;
}

.btn_telecharger, .btn_feuilletter {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.btn_telecharger{
    background: #00a6e8;
}

.btn_feuilletter{
    background: #f4792b;
}

.texte_telecharger_feuilleter{
    font-size: 14px;
    text-transform: uppercase;
    color: #21407f;
    margin-left: 10px;
}

/* Troisième colonne */
.section-livret-newsletter {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.titre_bloc_newsletter{
    font-size: 1.95em;
    font-weight: 700;
}

.point-icon-newsletter {
    width: 13px;
    height: 13px;
    background-color: #ff732b;
    border-radius: 50%;
    position: relative;
}

.point-icon-newsletter-wrapper {
    position: absolute;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border: 2px solid #1d3c6e;
    border-radius: 50%;
    position: absolute;
    top: 20%;
    left: 0%;
    transform: translate(-50%);  /* Permet de centrer exactement le point */
    transition: transform 0.3s ease;
    /* z-index: 3; */
}

.box_border_orange {
    border: 1px solid #f58220;
    padding: 2rem;
    max-width: 400px;
    position: relative;
    font-family: 'Arial', sans-serif;
}

.lien_newsletter {
    position: relative;
}

.lien_newsletter :hover {
    text-decoration: underline;
    top: 70%; 
}

.abonnement_newsletter{
    display: flex;
    justify-content: center;
    padding: 5%;
}

.description_newsletter {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #000;
}


/* PAGE TOUS LES PUBLICATIONS */
.bloc-image-publication{
    max-width: 350px;
    aspect-ratio: 3 / 4;
}

.bloc-image-publication img {
    width: 100%;
    height: 100%;
}

.contenu_page_magazine {
    display: block;
    justify-content: center;
    padding-left: 20%;
    padding-right: 20%;  
    padding-top: 2%;
}

.contenu_page_magazine img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin: 2rem 0; 
    object-fit: cover; 
    border-radius: 8px; 
}


/* SECTION IMAGES - DIAPORAMAS */
/* PAGE TOUS LES DIAPORAMAS */
.block_slider{
    width: 95%;
    margin-bottom: -3%;
}
/* PAGE - SINGLE DIAPORAMA */
.description_diaporama{
    padding-bottom:2% ;
}

/* PAGE - ARCHIVE DIAPORAMA */
.bloc-diaporama{
    max-width: 450px;
}

/* SECTION ZONES SAUVEGARDES */
.section-carte-zone-sauvegarde {
    position: relative;
    display: block;
    width: 100%;
} 

.text_img_sauvegarde{
    position: absolute;
    top: 46%;
    left: 45%;
    transform: translateX(-50%);
    color: black;
    padding: 10px 20px;
    font-size: 1.5rem;
    font-weight: bold;
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    width: 72%;
}

.carte-wrapper {
    position: relative;
    width: 100%;
    height: 31vh;
}

.carte {
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
}

.marker {
    width: 13%;
    position: absolute;
    top: 27%;
    left: 73%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, top 0.3s ease, left 0.3s ease, width 0.3s ease; /* Transition fluide */
    z-index: 1;
}

.lien_carte{
    color: black;
    background-color:#f4792b;
    padding: 1%;
}

.lien_carte:hover{
    color: black;
    text-decoration: underline;
}

/* PAGE : ARCHIVE */

.categorie_page_archive{
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
    opacity: 0.9;
    color : #21407F;
}

.categorie_page_archive:hover{
    text-decoration: underline;
}

.filtre_liste_categories{
    margin: 2%;
}

.filtre_liste_actualites{
    display: flex;
    justify-content: center;
    margin: 2%;
}

.filtre_liste_categories_actualites {
    display: flex;
    justify-content: center;
    padding-left: 1%;
}

/* FOOTER */

.wrapper-footer {
    min-height: calc(100vh - 50px); /* Calculer l'espace pour le footer si nécessaire */
    display: flex;
    flex-direction: column;
}

footer{
    margin-top: auto;  /* Pousse le footer en bas s'il y a peu de contenu */
    padding: 20px 0;
}

.row_footer_1{
    margin-bottom: 6%;
    /* margin-top: 2%; */
}

.row_footer-2{
    margin-top: 6%;
}

.logo_sage{
    width: 40%;
}

.boutons_footer{
    display: flex;
    flex-wrap: wrap; 
    align-items: center;
    justify-content: center;
}

.icon_footer{
    width: 8% !important;
}

.icon_adresse{
    width: 15% !important;
    padding-right: 2%;
}

.icon_telephone{
    width: 21px;    
    height: 24px;
}

.adresse_drome{
    text-align: center;
    padding-left: 20%;
    padding-right: 20%;
    padding-top: 5%;
}

.departement{
    font-weight: bold;
    width: 100%;
    font-size: 19px;
    justify-content: center;
}

.adresse{
    display: flex;
    font-size: 14px;
    width: 100%;
    justify-content: center;
}

.telephone{
    display: flex;
    font-size: 14px;
    justify-content: center;
    width: 100%;
}


/* Tablette ≥ 768px */
@media (min-width: 601px) {

    .wp-block-quote {
        padding-left: 15%; /* Plus d'espace à gauche pour les tablettes */
    }

    .wp-block-quote::before {
        width: 50px; /* Icône plus grande sur tablettes et écrans plus larges */
        height: 50px;
    }

    .wp-block-quote::after {
        margin-left: 5%; /* Barre plus éloignée de l'icône */
        width: 2px; /* Plus large sur tablettes */
    }

    .wp-block-quote p {
        margin-left: 15%; /* Plus d'espace pour le texte */
        font-size: 1.1rem; /* Texte plus grand sur tablettes */
        -webkit-line-clamp: 1; /* Toujours tronquer le texte à 1 ligne */
    }

    .container{
        max-width: 940px; 
        /* margin: 0 auto;  */
    }

    .titre_page {
        font-size: 2rem;
    }


    .entry-title{
        font-size: 2em; 
    }

    .header-image{
        height: 65px; /* Ajuste la hauteur */
        max-width: 200px; 
        object-fit: contain;
    }

    .btn-tous:hover {
        background-color: #21407F;
        color: white;
    }

    .slider-svg {
        top: 43%;
        right: -15%;
        height: 77%;
    }

    .svg-2{
        display: none;
    }

    .infos-wrap{
        padding: 5%;
    }

    /* Slider */
    #custom-actualites-slider .carousel-item img {
        height: 300px;
    }

    .custom-slider-wrapper .metaslider img {
        height: 500px !important;
        object-fit: cover;
        width: 100%;
        border-radius: 0 20px 20px 20px !important;
    }
    
    .custom-slider-wrapper {
        width: 95%;
        height: auto;
        max-height: none;
        position: relative;
        overflow: visible; 
    }

    .infos-description{
        font-size: 1rem;    
    }

    .bloc-description{
        font-size: 1rem;    
    }
    .bloc-nombre{
        font-size: 1.5rem;    
    }

    .div_goutte_eau{
        justify-content: flex-end;
        padding-bottom: 72%;
    }

    .categorie_single {
        font-size: 1rem;
    }

    .bloc-infos-article{
        background-color: #0d2f6e;
        color: white;
        border-radius: 0 0 30px 0;
        margin-top: 0%;
        margin-bottom: 4%;
        display: flex;
        align-items: center;
        position: relative;
        width: 95%;
        z-index: 2;
    }

    .point-icon-frontpage::before {
        content: "";
        position: absolute;
        top: -17px;
        left: 47%;
        transform: translateX(-50%);
        width: 1px;
        height: 80px;  
        background-color: #f4792b;
        z-index: 1;
    }

    .informations {
        width: 95%;
        position: relative;
        top: -20px;    
        padding: 20px 30px;
        background-color: #21407F; /* ou transparent selon ton design */
        color: white;
        font-size: 20px;    
        /* top-left | top-right | bottom-right | bottom-left */
        border-radius: 0 0 30px 0;
        overflow: hidden;
    }

    .infos-title{
        font-size: 2rem;
    }

    /* Front Page */
    .section-title{
        font-size: 3em;
    }

    .section-title-actualite{
        font-size: 3.5;
        width: 165%;
    }

    .liste-categories{
        text-align: center;
    }

    .zoom_image {
        width: 237px;
        height: 237px;
        aspect-ratio: auto;
        align-items: center;
        z-index: 1;
    }
    .evenements {
        display: flex !important;
        flex-direction: row;
        align-items: stretch;
    }

    
    /* Front Page : Section actualités */
    .btn_categorie{
        font-size: 0.9rem;
    }

    .svg-3 {
        display: none;
    }
    
    
    /* Front Page : Section événements */
    .section-evenements{
        margin: 0%;
    }

    .evenement {
        padding-top: 0;
        padding-bottom: 5%;
        width: 100%; 
        flex-direction: column;
    }
    
    .row_evenements {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch; 
        gap: 0; 
        height: 300px; 
    }
    
    .point-icon-event-wrapper {
        top: 16%;
        left: 0%;
        z-index: 2;
    }
    
    .zoom_image,
    .evenement-info {
        width: 50%;
        height: auto;
    }

    .zoom_image {
        overflow: hidden; 
        width: 300px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .img-event{
        width: 300px;
        height: 300px;
        object-fit: cover;
    }

    .evenement-info {
        background-color: #21407F;
        color: white;
        padding: 5%;
        height: 300px;        
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: left;
    }
    
    /* Front Page : Section Kiosque Newsletter */
    .svg-4 {
        display: none;
    }
    
    .title-background-grey{
        background-color: white;
        margin-top: 0%;
    }
    
    .deuxieme_colonne{
        padding: 5%;
    }
    
    .abonnement_newsletter{
        padding: 0%;
    }
    
    .point-icon-newsletter-wrapper{
        top: 16%;
    }

    .lien_newsletter :hover {
        text-decoration: underline;
        top: 70%; 
    }

    /* Section évènements */
    .section-evenements{
        margin: 0%;
    }

    .titre_actualites{
        font-size: 1rem;
    }

    /* Front Page : Section Cartes de zone de sauvegarde */
    /* Carte zone de sauvegardee */
    .text_img_sauvegarde{
        width: 50%;
        position: absolute;
        top: 16%;
        left: 58%;
        transform: translateX(-50%);
        color: black;
        /* background-color:#f4792b; */
        padding: 10px 20px;
        font-size: 1.4rem;
        font-weight: bold;
        display: inline;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
    }
    
    .carte-wrapper {
        position: relative; 
        width: 100%;
        height: auto;
    }

    .carte {
        width: 100%;
        height: auto;
        z-index: 0;
    }

    .marker {
        width: 5%;
        position: absolute;
        top: 41%;
        left: 24%;
        transform: translate(-50%, -50%);
        transition: transform 0.3s ease, top 0.3s ease, left 0.3s ease, width 0.3s ease; /* Transition fluide */
        z-index: 1;
    }

    .lien_carte{
        color: black;
        background-color: #f4792b;
    }
/* 
    .lien_carte:hover{
        color: black;
        text-decoration: underline;
    } */


    /* FRONT-PAGE : Section en Images */
    .titre_diaporama{
        color:white;
        font-size: 0.9rem;
    }

    /* PAGE */
    .fil_ariane {
        font-size: 1rem;
        padding-left: 0%;
    }

    /* SINGLE */
    .div_categorie_single{
        display: flex;
        justify-content: center;
        padding: 1%;
    }

    .date_publication_page{
        font-size: 0.6rem;    
    }

    /* Page : Les actualités */
    .filtre_liste_categories{
        display: flex;
        justify-content: center;
        margin: 2%;
    }

    /* FOOTER */
    footer{
        /* padding-top: 5%;
        margin-top: auto; */
        padding: 20px 0; /* Ajoute du padding pour espacer le footer */
        margin-top: auto; /* Le footer se place en bas */
    }

    .adresse_drome{
        text-align: left;
        padding-left: 0%;
        padding-right: 6%;
        padding-top: 0%;
    }

    .icon_adresse{
        width: 7% !important;
    }

    .telephone{
        text-align: left;
                justify-content:left;
    }
    .logo_sage{
        width: 60%;
        align-items: center;
    }
    .boutons_footer{
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
    }   
    .btn_sage_normal{
          margin: 0%;
    }
    .boutons_footer{
        margin-top: 2%;
    }  

}





/* Grand écran */
@media (min-width: 1025px) {

    .container{
        max-width:1150px;; 
        /* margin: 0 auto;  */
    }

    /* Bandeau bleu */
    .actions {
        /* width: 50%; */
    }

    /* Page Froide */
    .bloc-infos-article {
        background-color: #0d2f6e;
        color: white;
        border-radius: 0 0 30px 0;
        margin-top: 0%;
        margin-bottom: 3%;
        display: flex;
        align-items: center;
        position: relative;
        width: 95%;
        z-index: 2;
    }

    .infos-wrap{
        width: 80%;        
        padding: 0%;
    }

    #custom-actualites-slider .carousel-item img {
        height: 300px;
    }

    #custom-actualites-slider .carousel-caption {
        max-width: 50%;
        bottom: 40px !important;
        right: 40px !important;
    }

    .custom-slider-wrapper {
        width: 95%;
        height: auto;
        max-height: none;
        position: relative;
        overflow: visible; 
    }

    .slider-caption-text {
        font-size: 1.8rem;
        padding: 10px 20px;
    }

    .first-point-icon-wrapper-frontpage{
        display: inline-flex;
        justify-content: center;
        align-items: center;
        left: -5%;
        width: 24px;
        height: 24px;
        border: 2px solid white;
        border-radius: 50%;
        position: relative;
        transition: transform 0.3s ease;
    }
    .point-icon-frontpage::before {
        content: "";
        position: absolute;
        top: -17px;
        left: 47%;
        transform: translateX(-50%);
        width: 1px;
        height: 112px;  
        background-color: #f4792b;
        z-index: 1;
    }

    .div_goutte_eau{
        justify-content: flex-end;
        padding-bottom: 17%;
        z-index: 1;
    }

    .entry-title{
        font-size: 3.5em; 
    }

    .header-image{
        height: 100px;
        max-width: 200px; 
        object-fit: contain;
    }
    
    /* Slider + infos */
    .metaslider .slides img {
        width: 100%;
        display: block;
    }

    .slider-svg {
        position: absolute;
        z-index: 0;
        top: 7%;
        right: -80%;
        height: 80%;
        right: -9%;
        top: 50%;
        height: 90%;
    }

    .svg-2 {
        display: block;
        position: absolute;
        top: -54%;
        right: 65%;
        height: 150%;
        width: 73%;
        opacity: 0.2;
        z-index: 0;
    }

    .informations {
        width: 95%;
        position: relative;
        top: -20px;    padding: 40px 30px;
        background-color: #21407F; /* ou transparent selon ton design */
        color: white;
        font-size: 20px;    
        /* top-left | top-right | bottom-right | bottom-left */
        border-radius: 0 0 30px 0;
        overflow: hidden;
    }

    .informations .infos-title {
        font-family: 'Outfit', sans-serif;
        font-weight: bold;
        color: #ffffff;
        margin-bottom: 20px;
    }

    .informations .infos-content {
        line-height: 1.6;
        color: #f0f0f0;
    }

    .div-bouton-tous{
        display: flex;
        justify-content: flex-start;
        margin-bottom: 0%;
    }
    
    .infos-title{
        font-size: 2.2rem;
    }
    

    /* Front Page */
    .section-title{
        font-size: 4em;
        color:black;
        position: relative;
        z-index: 1;
        text-align: left;
    }   

    .btn-tous {
        border-radius: 40px 40px 40px 40px;
        display: inline-flex !important;
        align-items: center !important; /* Aligne verticalement les enfants */
        justify-content: flex-end !important;
        text-align: end;
        width: 443px;
        height: 63px;
        padding: 10px 20px;    
        border: 1px solid #21407F;
        border-radius: 0px 40px 40px 0px;
        color: #21407F;
        font-weight: bold;
        text-decoration: none;
        transition: background 0.3s ease, color 0.3s ease;
        opacity: 1;
        gap: 8px; /* Espace entre le + et le texte */
    }

    .btn-tous:hover {
        background-color: #21407F;
        color: white;
    }

    /* Front-Page : Section ACTUALITES */
    .div-section-actualites{
        position: relative;
        overflow: hidden
    }

    .actualite-info {
        position: relative;
        z-index: 1;
    }

    .svg-3 {
        display: block;
        position: absolute;
        top: 9%;
        right: 3%;
        width: 85%;
        height: 85%;   
        z-index: 0;
        transform: translateY(-50%,-50%); /* remonte l’image pour centrer verticalement */
        object-fit: contain;
    }

    .actualite-gauche{
        display: flex;
        justify-content: center;
        padding-left: 5%;
    }    
    
    .actualite{
        display: flex;
        justify-content: center;
    }

    .liste-categories{
        justify-content: start;
        padding-left: 5%;
    }

    .btn_categorie{
        font-size: 0.9rem;
    }

    .article-actualite{
        margin-bottom: 15px;
    }

    .grand-article{
        width: 100%;
    }

    /* Front Page : Section Event */

    .section-evenements{
        margin: 0%;
    }

    .titre_evenement {
        font-size: 1.2rem;
    }

    .title-categorie-event {
        display: flex;
        margin: 5% 5% 0 5%;
    }

    .row_evenements {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch; 
        gap: 0; 
        height: 300px;
    }

    .point-icon-event-wrapper {
        /* left: 100%; */
    }

    .evenement article {
        width: 48%;  /* S'assurer que les articles sont à 48% de la largeur (garde un petit écart) */
    }
    
    
    .zoom_image,
    .evenement-info {
        width: 50%;
        height: auto;
    }

    .zoom_image {
        width: 300px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        
    }

    .img-event{
        width: 300px;
        height: 300px;
        object-fit: cover;
    }

    .evenement-info {
        z-index: 2;
        background-color: #21407F;
        color: white;
        padding: 5%;
        height: 300px;        
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: left;
    }

    .categorie_actualite {
        font-size: 1rem;
    }

    .titre_actualites{
        font-size: 1rem;
        display: -webkit-box;           /* Nécessaire pour le multi-ligne */
        -webkit-line-clamp: 1;          /* Limite le texte à 1 ligne */
        -webkit-box-orient: vertical;   /* Définit l'orientation en colonne */
        overflow: hidden;               /* Cache le texte qui dépasse */
        text-overflow: ellipsis;        /* Ajoute les '...' à la fin */
        white-space: normal;   
    }

    /* Front-Page : Section En Kiosque Newsletter */
    .section-livret-newsletter{
        position: relative;
        overflow: hidden;
        width: 100%;
    }

    .titre_publication{
        color: black;
        font-weight: 600;
        font-size: 2rem;
    }

    .title-background-grey{
        background-color: white;
    }
    
    .svg-4{
        display: block;
        position: absolute;
        width: 51%;
        bottom: 40%;
        top: -30%;
        height: 139%;
        left: 8%;
        z-index: 1; /* Le logo sera derrière l'image du livret */
    }

    .div-section-livret-newsletter{
        position: relative;
        width: 100%;
    }

    .img-livret-newsletter {
        position: relative;
        z-index: 1;
        transform: rotate(-4deg) scale(1.4) translateY(-20px);
        margin-left: 35%;
        margin-top: 6%;
        margin-bottom: 0%;
        width: 180px; 
        height: 250px; 
    }

    .deuxieme_colonne{
        padding: 0%;
    }

    .boutons_telecharger_lecture{
        position: relative;
        z-index: 1;
        text-align: center;
    }

    .point-icon-newsletter-wrapper {
        position: absolute;
        top: 16%;
        transition: top 0.3s ease; 
    }

    .point-icon-frontpage-wrapper::before {
        content: "";
        position: absolute;
        top: 100%; /* Place le trait sous l'image */
        left: 50%;
        transform: translateX(-50%);
        width: 1px;
        height: 93px;
        background-color: #f4792b;
        z-index: 1;
    }

    .lien_newsletter :hover {
        text-decoration: underline;
        top: 70%; 
    }

    .zoom-container{
        height: 75%;
    }

    /* Front Page : Carte de zone de sauvegarde */
    .text_img_sauvegarde{
        position: absolute;
        top: 7%;
        left: 65%;
        transform: translateX(-50%);
        color: black;
        padding: 10px 20px;
        font-size: 2.2rem;
        font-weight: bold;
        display: inline;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
        width: 40%;
    }

    .lien_carte{
        color: black;
        background-color:#f4792b;
    }

    .carte-wrapper {
        position: relative;  /* Nécessaire pour positionner le marker par rapport à ce parent */
        width: 100%;
        height: auto;
    }

    .carte {
        width: 100%;
        height: auto;
        z-index: 0;
    }

    .marker {
        width: 5%;
        position: absolute;
        top: 41%;
        left: 30%;
        transform: translate(-50%, -50%);
        transition: transform 0.3s ease, top 0.3s ease, left 0.3s ease, width 0.3s ease; /* Transition fluide */
        z-index: 1;
    }

    /* FRONT-PAGE : Section en Images */
    .titre_diaporama{
        color:white;
        font-size: 0.9rem;
    }

    /* PAGE */
    .fil_ariane {
        font-size: 1rem;
        padding-left: 0%;
    }

    /* SINGLE */
    .div_categorie_single{
        justify-content: left;
        padding:0%;
    }

    .date_publication_page{
        font-size: 0.8rem; 
    }

    /* Page : Les actualites */
    .filtre_liste_categories{
        display: flex;
        justify-content: center;
        margin: 2%;
    }

    /* FOOTER */

    footer{
        /* padding-top: 5%;
        margin-top: auto; */
        padding-top: 10%;    
        margin-top: auto;
    }

    .row_footer_1{
        /* margin-top: 10%; */
    }

    .row_footer-2{
        margin-top: 2%;
    }

    .logo_sage{
        width: 100%;
        align-items: center;
    }

    .boutons_footer{
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        width: 100%;
    }   

    .adresse_drome{
        margin-left: 3%;
        padding-right: 0%;
    }

    .icon_adresse{
        width: 6% !important;
    }

    .departement{
        text-align: left;
        justify-content:left;
    }

    .adresse{
        text-align: left;
        width: 100%;
        justify-content:left;
    }

    .telephone{
        text-align: left;
        justify-content:left;
        width: 100%;
    }

    .titre_page {
        font-size: 2.5rem;
        text-align: left;
    }

    .btn_sage_normal {
        margin: 1%;
        font-size: 15px;
        padding: 11px 13px;
    }

    .footer_buttons {
        gap: 12px;
    }

    .departement{
        font-weight: bold;
        font-size: 18px;
    }
    

}


@media (min-width: 1300px) {


    .wp-block-quote {
        padding-left: 10%;
    }

    .wp-block-quote::before {
        width: 55px; /* Icône légèrement plus grande */
        height: 55px;
    }

    .wp-block-quote::after {
        margin-left: 1%; /* Plus d'espace entre l'icône et la barre */
    }

    .wp-block-quote p {
        margin-left: 20%; /* Ajuste la marge gauche du texte */
        font-size: 1.2rem; /* Augmente la taille du texte sur grands écrans */
        -webkit-line-clamp: 1; /* Toujours tronquer le texte à 1 ligne */
    }

    .container{
    max-width: 1200px;        
    /* margin: 0 auto;  */
    }


    /* Bandeau bleu */
    .actions {
        /* width: 50%; */
    }

    #custom-actualites-slider .carousel-item img {
        height: 300px;
    }

    .infos-description {
        font-size: 1.3rem;
    }

    .bloc-description {
        font-size: 1.3rem;
    }

    
    /* Page froide */
    .infos-wrap{
        width: 85%;        
        padding: 0%;
    }
    
    .evenement {
        padding-top: 0;
        padding-bottom: 5%;
        width: 50%;        
    }

    /* Front Page */
    .section-title{
        font-size: 4em;
    }

    .div_goutte_eau{
        padding-bottom: 33%;    
    }
    
    /* Front Page : Section actualités */
    .categorie_actualite {
        font-size: 1.2rem;
    }

    .grand-article{
        width: 100%;
    }
    
    .btn_categorie{
        font-size: 1rem;
    }

    .titre_actualites {
        font-size: 1rem;
        display: -webkit-box;           /* Nécessaire pour le multi-ligne */
        -webkit-line-clamp: 1;          /* Limite le texte à 1 ligne */
        -webkit-box-orient: vertical;   /* Définit l'orientation en colonne */
        overflow: hidden;               /* Cache le texte qui dépasse */
        text-overflow: ellipsis;        /* Ajoute les '...' à la fin */
        white-space: normal;   
    }
    
    .titre_page {
        font-size: 2.5rem;
        text-align: left;
    }

    /* Front Page : Section évènements */
    .section-evenements{
        margin: 0%;
    }

    .title-categorie-event {
        margin: 5% 5% 0 5%;
    }

    .titre_evenement {
        font-size: 1.3rem;
    }

    /* FRONT-PAGE : Section en Images */
    .titre_diaporama{
        color:white;
        font-size: 1rem;
    }

    /* FRONT-PAGE : Section En kiosque */
    .titre_publication{
        font-size: 2.1rem;
    }

    /* PAGE */
    .fil_ariane {
        font-size: 1rem;
        padding-left: 0%;
        display: -webkit-box;           /* Nécessaire pour le multi-ligne */
        -webkit-line-clamp: 1;          /* Limite le texte à 1 ligne */
        -webkit-box-orient: vertical;   /* Définit l'orientation en colonne */
        overflow: hidden;               /* Cache le texte qui dépasse */
        text-overflow: ellipsis;        /* Ajoute les '...' à la fin */
        white-space: normal;   
    }

    /* SINGLE */
    .div_categorie_single{
        justify-content: left;
        padding:0%;
    }

    .date_publication_page{
        font-size: 0.8rem;  
    }

    .row_footer_1{
        /* margin-top: 10%; */
    }
    
}


@media (min-width: 1700px) {
    .container{
        max-width: 1670px;    
/* margin: 0 auto;  */
    }

    .div_goutte_eau {
        padding-bottom: 22%;
    }
    .titre_actualites {
        font-size: 1.3rem;
    }

        /* Front Page : Section actualités */
    .categorie_actualite {
        font-size: 1.3rem;
    }

    /* FRONT-PAGE : Section En kiosque */
    .titre_publication{
        font-size: 2.2rem;
    }    
}

@media (min-width: 2500px) {
    .container{
        max-width:2200px
    }

    .div_goutte_eau {
        padding-bottom: 18%;
    }


    .titre_actualites {
    font-size: 1.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* limite le texte à 1 ligne */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

    
}