@charset "UTF-8";
/* CSS Document */

/* =========================================================
   HERO (IMAGE)
   ========================================================= */

.news-hero {
	--hero-min-h: clamp(24vh, 36vh, 44vh);        /* hauteur hero */
    --hero-pad-v: clamp(32px, 8vw, 96px);         /* padding vertical */
	--hero-inner-max: 1200px;                     /* largeur utile */
	--hero-overlay-top: 10%;                      /* force du voile en haut */
	--hero-overlay-bot: 70%;                      /* force du voile en bas */

	--meta-font: var(--font-body);
	--title-font: var(--font-headings);

	--title-size: clamp(28px, 5vw, 56px);
	--title-weight: 800;
	--title-lh: 1.05;

	--meta-size: clamp(12px, 1.6vw, 14px);
	--meta-gap: .6em;

	--content-max: 860px;

	position: relative;
	isolation: isolate;              /* pour pseudo-élément d’overlay */
	min-height: var(--hero-min-h);
	padding-block: var(--hero-pad-v);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100vw;                               /* prend toute la largeur viewport */
    margin-left: calc(50% - 50vw);              /* recentre en annulant le centrage */
    margin-right: calc(50% - 50vw);             /* sécurité */
}

.news-hero::before {
  /* Overlay lisibilité titre/meta */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.2) 0%,    /* très léger en haut */
    rgba(0,0,0,0.35) 35%,  /* un peu plus marqué */
    rgba(0,0,0,0.55) 65%,  /* bien lisible sur le titre */
    rgba(0,0,0,0.7) 100%   /* solide en bas */
  );
}

/* Inner : centrage et largeur utile */
.news-hero > .hero-inner{
  position: relative;
  z-index: 1; /* au-dessus de l’overlay */
  width: min(100%, var(--hero-inner-max));
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);

  display: flex;                /* au lieu de grid */
  flex-direction: column;       /* pile verticale */
  align-items: center;          /* centrage horizontal */
  justify-content: center;      /* centre verticalement */
  text-align: center;           /* centrage du texte */
  gap: clamp(8px, 2vw, 16px);   /* respiration fluide */
}


/* === META haut (catégories / tags / info) ================ */
.news-meta{
  display: flex;
  flex-wrap: wrap;
  gap: var(--meta-gap);
  align-items: center;
  color: #fff;
  font-family: var(--meta-font);
  font-size: var(--meta-size);
  line-height: 1.2;
  opacity: .95;
}

/* Pastilles discrètes pour Post Terms (option) */
.news-meta .elementor-post-info__terms-list a,
.news-meta a{
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.3);
}
.news-meta a:hover,
.news-meta a:focus{
  color: #fff;
  border-bottom-color: rgba(255,255,255,.7);
  outline: none;
  box-shadow: none;
}

/* Séparateurs du widget Post Info (•) */
.news-meta .elementor-icon{
  display:none; /* masque icône par défaut si inutile */
}
.news-meta .elementor-post-info__item:not(:last-child)::after{
  content: "•";
  margin-inline: .5em;
  opacity: .6;
}

/* === TITRE =============================================== */
.news-title{
  margin: 0;
  color: #fff;
  font-family: var(--title-font);
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  line-height: var(--title-lh);
  letter-spacing: 0;
  text-wrap: balance;
}

/* === DATE (Post Info limité à la date) =================== */
.news-date{
  color: #fff;
  font-family: var(--meta-font);
  font-size: var(--meta-size);
  line-height: 1.2;
  opacity: .9;
}
.news-date .elementor-icon{
  display:none;
}

/* === Responsif (micro-ajustements) ========================= */
@media (max-width: 1024px){
  { --hero-overlay-bot: 60%; }
  .news-title{ line-height: 1.12; }
}

@media (max-width: 767px){
  { --hero-overlay-bot: 55%; }
  .news-hero{
    /* si besoin, vous pouvez réduire la hauteur mini mobile : */
    /* min-height: clamp(32vh, 48vh, 54vh); */
  }
}


/* === HERO – centrage vertical robuste ========================= */

/* 1) La “boîte” interne doit hériter de la hauteur mini du hero */
.news-hero > .hero-inner{
  min-height: inherit;                 /* hérite de --hero-min-h posée sur .news-hero */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* pas de justify ici : on le met sur l’inner pour centrer le contenu réel */
}

/* 2) Le vrai contenu est dans .e-con-inner : on centre ici  */
.news-hero > .hero-inner > .e-con-inner{
  flex: 1 1 auto;                      /* occupe la hauteur dispo */
  display: flex;
  flex-direction: column;
  align-items: center;                 /* centre horizontalement */
  justify-content: center;             /* centre verticalement */
  gap: clamp(8px, 2vw, 16px);
  text-align: center;
}

/* === Couleurs forcées dans le hero (si un style général écrase) */
.news-hero .news-title,
.news-hero .news-date,
.news-hero .news-meta { color: #fff !important; }

.news-hero .news-title .elementor-heading-title { color: inherit !important; }

/* Liens dans la méta (blanc + soulignement discret) */
.news-hero .news-meta a{
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,.3) !important;
}
.news-hero .news-meta a:hover,
.news-hero .news-meta a:focus{
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,.7) !important;
  outline: none; box-shadow: none;
}

/* Meta haut et date : un peu plus gras */
.news-meta,
.news-date {
  font-weight: 600; /* SemiBold pour une meilleure lisibilité */
}

/* =========================================================
   "Sur le même sujet" — reprise de la loop du menu
   Structure: .sub-loop > (.sub-post-media + .sub-post-body)
   ========================================================= */

.same-subject,
.campagne-post-loop { 
  --ss-gap: clamp(12px, 2.5vw, 20px);
  --ss-item-gap: clamp(5px, 1vw, 8px);
  --ss-media-w: 50px; /* largeur bloc image */
  --ss-title-size: clamp(14px, 1.1vw, 16px);
  --ss-meta-size: clamp(12px, 1vw, 14px);
  --ss-meta-gap: .6em;
  --ss-sep: "•";
}
.same-subject {
  background: var(--color-accent-100);
  padding: clamp(20px, 4vw, 40px);
  border-radius: 0;
  
  /* force plein écran */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Titre de section "Sur le même sujet" */
.same-subject .same-subject-title .elementor-heading-title {
  font-family: var(--font-headings);
  font-size: var(--h3-size);
  font-weight: 600;
  color: var(--color-secondary);
  line-height: var(--lh-title);
  margin: 0 0 .8em;  /* un peu d’air sous le titre */
}

/* Carte (wrapper de l’item) = reprise de la sub-loop (menu) */
.same-subject .same-subject-loop .sub-loop,
.campagne-post-loop .sub-loop{
  display: flex;
  align-items: flex-start;
  gap: var(--ss-item-gap);
  padding-bottom: .5rem;
  margin-bottom: .5rem;
}

/* Média à gauche : image carré, sans arrondis */
.same-subject .same-subject-loop .sub-post-media,
.campagne-post-loop .sub-post-media{
  flex: 0 0 var(--ss-media-w);
  max-width: var(--ss-media-w);
}
.same-subject .same-subject-loop .sub-post-media img,
.campagne-post-loop .sub-post-media img{
  display: block;
  inline-size: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  vertical-align: middle;
}

/* Scope : uniquement dans le bloc "Sur le même sujet" */
.same-subject,
.campagne-post-loop{
  --grid-row-gap: 10px;      /* ↓ espace vertical entre cartes */
  --grid-column-gap: 24px;   /* ↓ espace horizontal si besoin */
}

/* Option : encore plus serré en mobile */
@media (max-width: 767px){
  .same-subject,
  .campagne-post-loop{
    --grid-row-gap: 8px;
    --grid-column-gap: 10px;
  }
}

/* Corps (titre + meta) */
.same-subject .same-subject-loop .sub-post-body,
.campagne-post-loop .sub-post-body{
  min-width: 0; /* évite les débordements */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* colle en haut */
  align-items: flex-start;     /* aligne le contenu à gauche */
  gap: .4rem;                  /* petit espace entre titre et meta */
}

/* Titre */
.same-subject .same-subject-loop .sub-post-title,
.campagne-post-loop .sub-post-title{
  font-size: var(--ss-title-size);
  line-height: 1.4;
  font-weight: 600;
  margin: 0;
}
.same-subject .same-subject-loop .sub-post-title a,
.campagne-post-loop .sub-post-title a{
  text-decoration: none;
  color: var(--color-secondary);
}
.same-subject .same-subject-loop .sub-post-title a:hover,
.same-subject .same-subject-loop .sub-post-title a:focus,
.campagne-post-loop .sub-post-title a:hover,
.campagne-post-loop .sub-post-title a:focus{
  color: var(--color-secondary-900);
  outline: none;
}

/* Meta : même logique que le menu, séparateur équilibré */
.same-subject .same-subject-loop .sub-post-meta,
.campagne-post-loop .sub-post-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ss-meta-gap);
  font-size: var(--ss-meta-size);
  line-height: 1.2;
  opacity: .95;
  color: var(--color-muted-800, #555);
}
.same-subject .same-subject-loop .sub-post-meta a,
.campagne-post-loop .sub-post-meta a{
  color: inherit;
  text-decoration: none;
}
.same-subject .same-subject-loop .sub-post-meta a:hover,
.same-subject .same-subject-loop .sub-post-meta a:focus,
.campagne-post-loop .sub-post-meta a:hover,
.campagne-post-loop .sub-post-meta a:focus{
  color: var(--color-secondary-900);
  outline: none;
}

/* === META : style "menu actualités" avec trait vertical ================= */

/* 0) Conteneur propre (pas d’espacement auto) */
.same-subject .same-subject-loop .sub-post-meta,
.campagne-post-loop .sub-post-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;                /* on gère l’air via le séparateur */
}

/* 1) CAS A — 2 widgets frères (date + catégories) dans .sub-post-meta */
.same-subject .same-subject-loop .sub-post-meta > *,
.campagne-post-loop .sub-post-meta > *{
  display: inline-flex;          /* pour bien aligner le pseudo-élément */
  align-items: center;
}
.same-subject .same-subject-loop .sub-post-meta > * + *,
.campagne-post-loop .sub-post-meta > * + *{
  margin-left: .8em;             /* espace AVANT le second bloc */
}
.same-subject .same-subject-loop .sub-post-meta > * + *::before,
.campagne-post-loop .sub-post-meta > * + *::before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 1em;                   /* même hauteur que le texte */
  border-left: 1px solid var(--color-secondary);
  margin-right: .2em;            /* espace APRÈS le trait */
}

/* 2) CAS B — un seul widget “Post Info” avec des <li> internes */
.same-subject .same-subject-loop .sub-post-meta .elementor-post-info__item,
.campagne-post-loop .sub-post-meta .elementor-post-info__item{
  display: inline-flex; align-items: center;
}
.same-subject .same-subject-loop .sub-post-meta .elementor-post-info__item:not(:last-child)::after,
.campagne-post-loop .sub-post-meta .elementor-post-info__item:not(:last-child)::after{
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 1em;
  border-left: 1px solid var(--color-secondary);
  margin-left: 0;                /* identique au menu */
  margin-right: .2em;
}

/* 3) (optionnel) si Elementor ajoute .elementor-inline-items/.elementor-inline-item */
.same-subject .same-subject-loop .sub-post-meta .elementor-inline-item,
.campagne-post-loop .sub-post-meta .elementor-inline-item{
  display: inline-flex; align-items: center;
}
.same-subject .same-subject-loop .sub-post-meta .elementor-inline-items
.elementor-inline-item:not(:last-child)::after,
.campagne-post-loop .sub-post-meta .elementor-inline-items
.elementor-inline-item:not(:last-child)::after{
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 1em;
  border-left: 1px solid var(--color-secondary);
  margin-left: 0;
  margin-right: .2em;
}

/* Focus visible accessible */
.same-subject .same-subject-loop a:focus-visible,
.campagne-post-loop .same-subject-loop a:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 0; /* Laïcité 3.0: pas d’arrondis par défaut */
}

/* ====== Responsive : en-dessous de 768px, on empile proprement ====== */
@media (max-width: 767px){
  .same-subject .sub-loop > .e-con-inner,
  .campagne-post-loop .sub-loop > .e-con-inner{
    flex-direction: row !important;
    gap: 0px;
  }
  .same-subject .sub-post-media,
  .campagne-post-loop .sub-post-media{
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
    aspect-ratio: 1 / 1; /* conserve un cadrage propre */
  }
}
 

/* 1) Forcer la loop à rester sur 1 colonne quand on le souhaite */
@media (max-width: 767px){
  .same-subject .elementor-grid,
  .same-subject .e-loop-container,
  .campagne-post-loop .elementor-grid,
  .campagne-post-loop .e-loop-container{
    display: grid;
    grid-template-columns: 1fr !important;   /* neutralise repeat(auto-fit, minmax(...)) */
    grid-auto-columns: 1fr !important;
  }
}

/* 2) À l’intérieur d’un item : image 50x50 à gauche, texte à droite */
@media (max-width: 767px){
  /* Parent de l’item en ligne, sans wrap */
  .same-subject .sub-loop,
  .same-subject .sub-loop > .e-con-inner,
  .campagne-post-loop .sub-loop,
  .campagne-post-loop .sub-loop > .e-con-inner{
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: nowrap !important;
  }
}

/* Neutraliser les largeurs 100% Elementor — version ciblée */
.same-subject .sub-loop > .e-con-inner > .elementor-element,
.campagne-post-loop .sub-loop > .e-con-inner > .elementor-element{
  width: auto !important;
  max-width: none !important;
  /* ne PAS forcer flex ici */
}

/* Fixe UNIQUEMENT le media à 50px */
.same-subject .sub-post-media.elementor-element,
.campagne-post-loop .sub-post-media.elementor-element{
  flex: 0 0 50px !important;  /* vignettes 50x50 */
}

/* Laisse le body occuper le reste et SHRINK correctement */
.same-subject .sub-post-body.elementor-element,
.campagne-post-loop .sub-post-body.elementor-element{
  flex: 1 1 0 !important;
  min-width: 0;               /* indispensable pour autoriser le wrap */
}
	
  .same-subject .sub-post-media.elementor-element,
  .same-subject .sub-post-body.elementor-element,
  .campagne-post-loop .sub-post-media.elementor-element,
  .campagne-post-loop .sub-post-body.elementor-element{
    --container-width: auto !important;
    --container-widget-width: auto !important;
    --container-widget-width-initial: auto !important;
    --container-widget-flex-grow: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex-basis: auto !important;
  }

  /* Vignette fixe 50x50 */
  .same-subject .sub-post-media.elementor-element,
  .campagne-post-loop .sub-post-media.elementor-element{
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    overflow: hidden;
  }
  .same-subject .sub-post-media img,
  .campagne-post-loop .sub-post-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Texte à droite, prend la place restante */
  .same-subject .sub-post-body.elementor-element,
  .campagne-post-loop .sub-post-body.elementor-element{
    flex: 1 1 0 !important;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
  }

/* =========================================================
   Blocs "Associations" & "Régionales"
   .associations
   ========================================================= */

/* A) Forcer la bordure sur le container (passe devant les resets Elementor) */
.elementor .associations{
  border-bottom-style: solid !important;
  border-bottom-width: 1px !important;
  border-bottom-color: var(--color-accent-100) !important;
  /* tes espacements si besoin */
  padding-bottom: clamp(12px, 2vw, 24px);
  margin-bottom: clamp(16px, 3vw, 32px);
}

.associations h2 {
	margin-top: 1rem !important;
}

/* =========================================================
   Feedzy (markup: .feedzy-default > li.rss_item)
   Skin "loop-item" (image + contenu + bouton)
   ========================================================= */

/* 1) Grille globale */
.feedzy-loop-skin .feedzy-default{
  	display: flex;
  	flex-direction: column;
  	gap: var(--grid-gap, 24px);
	padding-left: 0;
	margin-left: 0;
}

/* 2) Carte */

.feedzy-loop-skin .elementor-widget-feedzy-rss-feeds ul{
  padding-inline-start: 0 !important;
  margin-inline-start: 0 !important;
  list-style: none !important;
}

.submenu-cal .feedzy-rss-1 ul {
	padding-left: 0 !important;
	margin-bottom: 0 !important;
}

.submenu-cal .feedzy-loop-skin .rss_item .rss_content {
	padding-bottom: 0 !important;
}

.feedzy-loop-skin .feedzy-default > li.rss_item,
.feedzy-loop-skin .feedzy-style2 > li.rss_item{
  display: block;
  grid-column: auto;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.submenu-cal .feedzy-loop-skin .feedzy-default > li.rss_item,
.submenu-cal .feedzy-loop-skin .feedzy-style2 > li.rss_item,
.submenu-cal .feedzy-loop-skin .feedzy-style1 > li.rss_item{
	box-shadow: 0;
}

/* 3) Média (image) = .item-media-actu */
.feedzy-loop-skin .rss_item .rss_image{
  float: none !important;
  position: relative;
  width: auto !important;
  height: auto !important;
  margin: 0 0 .75rem 0 !important;
  border: 0;
  content-visibility: auto;
}

.feedzy-loop-skin .rss_item .rss_image a{
  display: block;
  width: 100% !important;
  height: auto !important;
}

.feedzy-loop-skin .rss_item .rss_image img{
  display: block;
  width: 100% !important;
  height: auto !important;    /* override inline 150px */
  object-fit: cover;
  aspect-ratio: 16/9;         /* harmonise les hauteurs */
  border-radius: 0;
}

/* 4) Corps = .item-media-content */
.feedzy-loop-skin .rss_item .title,
.feedzy-loop-skin .rss_item .rss_content{
  margin: 0;
  padding: 0 16px;
}

.feedzy-loop-skin .rss_item .rss_content{
	padding-bottom: 16px;
}

/* Titre */
.feedzy-loop-skin .rss_item .title{
  font-family: var(--font-headings, inherit);
  font-size: var(--h3-size, clamp(18px, 1.4vw, 22px));
  font-weight: 600;
  line-height: var(--lh-title, 1.2);
  display: block;
}

.feedzy-loop-skin .rss_item .title a{
  color: var(--color-secondary, inherit);
  text-decoration: none;
}

.feedzy-loop-skin .rss_item .title a:hover,
.feedzy-loop-skin .rss_item .title a:focus{
  text-decoration: none;
  color: var(--color-primary);
}

/* Extrait */
.feedzy-loop-skin .rss_item .rss_content p{
  margin: .5rem 0 0 0;
  color: var(--color-text, inherit);
  line-height: 1.5;
}

/* 5) Bouton (ajouté via JS – voir plus bas) */
.feedzy-loop-skin .rss_item .feedzy-readmore-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  margin-top: .8rem;
  padding: .6em 1.2em;
  background: var(--color-primary);
  color: var(--color-white) !important;
  text-decoration: none !important;
  font-family: var(--font-body, inherit);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1;
  border: none;
  border-radius: 0; /* préférence projet */
  transition: background-color .2s ease;
  cursor: pointer;
}

.feedzy-loop-skin .rss_item .feedzy-readmore-btn:hover,
.feedzy-loop-skin .rss_item .feedzy-readmore-btn:focus{
  background: var(--color-primary-900);
}

/* Icône "chevron droit" avant le texte sur les boutons Feedzy */
.feedzy-loop-skin .feedzy-readmore-btn::before {
  content: "";
  display: inline-block;
  inline-size: var(--btn-icon-size, 0.8em);
  block-size: var(--btn-icon-size, 0.8em);
  flex: 0 0 auto;
  margin-right: .5em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* 6) Responsive 
@media (max-width: 1024px){
  .feedzy-loop-skin .feedzy-default > li.rss_item{
    grid-column: 1 / -1; /* 1 par ligne en tablette/mobile 
  }
}*/

/* 7) Variante media-left (facultatif) 
   Ajoute .feedzy-loop--media-left à ton conteneur si tu veux image à gauche, texte à droite */
.feedzy-loop-skin.feedzy-loop--media-left .feedzy-default > li.rss_item{
  grid-template-columns: 1fr 2fr;
  column-gap: var(--ss-item-gap, 16px);
}
.feedzy-loop-skin.feedzy-loop--media-left .rss_item .rss_image{ grid-column: 1; margin: 0 !important; }
.feedzy-loop-skin.feedzy-loop--media-left .rss_item .title,
.feedzy-loop-skin.feedzy-loop--media-left .rss_item .rss_content,
.feedzy-loop-skin.feedzy-loop--media-left .rss_item .feedzy-readmore-btn{ grid-column: 2; }
@media (max-width: 768px){
  .feedzy-loop-skin.feedzy-loop--media-left .feedzy-default > li.rss_item{
    grid-template-columns: 1fr;
  }
}