/* Fichier: 50-actualites-newsletter.css - Role: Styles: actualites + newsletter (UI/sections) */
/* =========================================================
   PAGE ACTUALITÉS (ID 6313)
   — forcer OceanWP en "full width" (supprime la logique sidebar)
   ========================================================= */

body.pg-page-actus #primary.content-area{
  float: none !important;
  width: 100% !important;
}

/* (sécurité) si une sidebar existe, on la neutralise sur cette page */
body.pg-page-actus #right-sidebar,
body.pg-page-actus #left-sidebar{
  display: none !important;
}

/* =========================================================
   PAGE ACTUALITÉS (ID 6313)
   — largeur éditoriale du bloc Gutenberg (conteneur centré)
   ========================================================= */

body.pg-page-actus .wp-block-group__inner-container{
   width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   ACTUALITÉS — séparateurs horizontaux
   ========================================================= */

.pg-news-sep{
  height: 2px;
  background: #ffc000;
  margin: 18px 0 22px 0; /* ajustable */
}

/* =========================================================
   PAGE ACTUALITÉS (6313) — structure 75/25 + séparation propre
   ========================================================= */

/* 75/25 (sans toucher à Gutenberg) */
body.pg-page-actus .wp-block-columns > .wp-block-column:first-child{
  flex-basis: 80% !important;
}
body.pg-page-actus .wp-block-columns > .wp-block-column:last-child{
  flex-basis: 20% !important;
}

/* Séparation verticale : vraie bordure sur colonne droite (2px) */
body.pg-page-actus .wp-block-columns > .wp-block-column:last-child{
  border-left: 2px solid #ffc000;
  padding-left: 22px;   /* espace entre ligne et contenu */
}

/* Horizontales : uniquement dans la colonne gauche, donc elles ne touchent jamais la verticale */
body.pg-page-actus .wp-block-columns > .wp-block-column:first-child .pg-news-sep{
  height: 2px;          /* tu veux 2px comme LIST */
  background: #ffc000;
  margin: 18px 0 22px 0;
}

/* Séparateur : toujours visible (sinon on perd celui au-dessus du 1er article) */
body.pg-page-actus .pg-news-sep{
  background: #ffc000;
}


/* on enlève "catégorie" */ 

body.pg-page-actus .pg-news-filt-item span{
  display: inline-block;
}

/* =========================================================
   ACTUALITÉS — sidebar : recherche en tête + style + espacements
   ========================================================= */

/* masquer le titre "Rechercher" (1er titre de la sidebar) */
body.pg-page-actus .pg-news-side-block:first-child .pg-news-side-title{
  display: none;
}

/* champ recherche : pleine largeur + liseret jaune + radius */
body.pg-page-actus .pg-news-q{
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #ffc000;
  border-radius: 4px;
  padding: 8px 10px;
  outline: none;
}

/* espace plus net entre la zone recherche et le bloc catégories */
body.pg-page-actus .pg-news-side-block + .pg-news-side-block{
  margin-top: 22px;
}

/* option : donner un tout petit “cadreâ€Â à chaque bloc sidebar (sobre) */
body.pg-page-actus .pg-news-side-block{
  padding-top: 2px;
}


/* =========================================================
   ACTUALITÉS — checkboxes (alignement + taille + rythme)
   ========================================================= */

body.pg-page-actus .pg-news-filt-item{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

/* checkbox : taille homogène + alignement visuel */
body.pg-page-actus .pg-news-filt-cb{
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 16px;
}

/* libellé : aligné propre, sans décalage */
body.pg-page-actus .pg-news-filt-item span{
  line-height: 1.2;
}

/* =========================================================
   ACTUALITÉS — colonne gauche : meta, titres, lien
   (compatible avec pictos SVG via ::before)
   ========================================================= */

/* Article */


body.pg-page-actus .pg-news-more{
  text-decoration: none;
  border-bottom: 1px solid #ffc000;
  padding-bottom: 1px;
}

body.pg-page-actus .pg-news-more:hover{
  border-bottom-width: 2px;
}


/* =========================================================
   ACTUALITÉS — pictos robustes (SVG) alignés baseline
   ========================================================= */

/* Ligne méta sobre : date puis catégorie */
body.pg-page-actus .pg-news-meta{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  margin: 0 0 8px 0;
  line-height: 1.2;
}

body.pg-page-actus .pg-news-date{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #666;
}

body.pg-page-actus .pg-news-date::before{
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='%23666' stroke-width='1.4'/%3E%3Cpath d='M8 4.5v3.5l2.4 1.4' fill='none' stroke='%23666' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

body.pg-page-actus .pg-news-date::after{
  content: "·";
  display: inline-block;
  margin-left: 8px;
  color: #999;
  font-size: 16px;
  line-height: 1;
}

body.pg-page-actus .pg-news-date::after{
  content: " · ";
  color: #666;
  font-size: 28px;
  top: -3px;
}

body.pg-page-actus .pg-news-cat{
  position: relative;
  display: inline-block;
  color: #ffc000;
  font-size: 15px;
  line-height: 1.2;
  padding-left: 26px;
  margin-left: 0;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2.2 5.2h3.8l1.1-1.4h5.7a1 1 0 0 1 1 1v6.1a1 1 0 0 1-1 1H2.9a1 1 0 0 1-1-1V6.2a1 1 0 0 1 1-1z' fill='none' stroke='%23888' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* "Media & Text" : paddings trop larges en PC */

body.pg-page-actus .wp-block-media-text__content{
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* =========================================================
   ACTUALITÉS — TA bascule unique (seuil réglable)
   - 1 seule plage mobile-tablette
   - sidebar AVANT le contenu
   - pas de recherche
   - cases en 3 colonnes (donc 5 cases en 2 lignes)
   - bordure jaune au-dessus des cases (2px comme les autres)
   - marges latérales 14px
   - visuels : limiter la largeur (page + popup)
   ========================================================= */
   
@media (max-width: 820px){

  /* marges latérales stables */
  body.pg-page-actus{
    --pg-actus-pad-left: 8px;
    --pg-actus-pad-right: 8px;

    /* 3 colonnes cases : réglables indépendamment */
    --pg-actus-filt-col1: 1.15fr;
    --pg-actus-filt-col2: 0.95fr;
    --pg-actus-filt-col3: 0.90fr;

    /* visuels en 1 colonne : largeur relative + plafond */
    --pg-actus-media-ideal: 50%;
    --pg-actus-media-max: 210px;
    --pg-actus-media-gap: 12px;
  }
  
  body.pg-page-actus .wp-block-group__inner-container{
    padding-left: var(--pg-actus-pad-left);
    padding-right: var(--pg-actus-pad-right);
    box-sizing: border-box;
  }

  /* =====================================================
     ACTUS — plafonner TOUS les visuels (image seule + Media&Text + popup)
     Sans toucher au layout (colonnes / empilement)
     ===================================================== */

  /* 1) Images seules dans la colonne contenu (articles) */
  body.pg-page-actus .wp-block-columns > .wp-block-column:first-child figure.wp-block-image{
    width: min(var(--pg-actus-media-ideal), var(--pg-actus-media-max));
    margin: 0 auto var(--pg-actus-media-gap) auto;
  }
  body.pg-page-actus .wp-block-columns > .wp-block-column:first-child figure.wp-block-image img{
    width: 100%;
    height: auto;
    display: block;
  }

  /* 2) Media&Text (peu importe empilé ou non) : plafonner l’IMAGE uniquement */
  body.pg-page-actus .wp-block-media-text .wp-block-media-text__media img{
    width: min(var(--pg-actus-media-ideal), var(--pg-actus-media-max)) !important;
    height: auto !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

/* =====================================================
     sidebar
	 
     ===================================================== */

  /* empiler les colonnes : sidebar avant */
  body.pg-page-actus .wp-block-columns{
    flex-wrap: wrap !important;
    gap: 0 !important;
    row-gap: 0 !important;
  }

  /* sidebar (colonne droite d’origine) AVANT, sans bordure verticale */
  body.pg-page-actus .wp-block-columns > .wp-block-column:last-child{
    order: -1 !important;
    flex-basis: 100% !important;
    width: 100% !important;
    border-left: 0 !important;
    padding-left: 0 !important;
    padding-bottom: 12px;
    margin-bottom: 14px;
  }

  /* contenu */
  body.pg-page-actus .wp-block-columns > .wp-block-column:first-child{
    order: 0 !important;
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* supprimer la recherche (titre + champ) */
  body.pg-page-actus .pg-news-side-title:first-of-type{
    display: none !important;
  }
  body.pg-page-actus #pg-news-q,
  body.pg-page-actus .pg-news-q{
    display: none !important;
  }

  /* zone cases : bordure au-dessus ET au-dessous */
  body.pg-page-actus .pg-news-filt{
    border-top: 2px solid #ffc000;
    border-bottom: 2px solid #ffc000;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-top: 0;
    margin-bottom: 14px;
  }

  /* CASES : passer en GRID 3 colonnes (largeurs réglables) */
  body.pg-page-actus .pg-news-filt{
    display: grid !important;
    grid-template-columns: var(--pg-actus-filt-col1) var(--pg-actus-filt-col2) var(--pg-actus-filt-col3);
    column-gap: 18px;
    row-gap: 6px;
    align-items: start;
  }

  body.pg-page-actus .pg-news-filt-item{
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

/* =====================================================
   Media & Text empilé : forcer une vraie pile (1 colonne)
   et écraser les styles inline Gutenberg (ex: 18% auto)
   ===================================================== */
body.pg-page-actus .wp-block-media-text.is-stacked-on-mobile{
  display: grid !important;

  /* pile verticale explicite (évite états incohérents au breakpoint) */
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "media"
    "content" !important;
  grid-template-rows: auto auto !important;

  row-gap: var(--pg-actus-media-gap);
}

/* s'assurer que chaque sous-bloc est bien dans la pile */
body.pg-page-actus .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media{
  grid-area: media !important;
  text-align: center;
}

body.pg-page-actus .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content{
  grid-area: content !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.pg-page-actus .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media{
  text-align: center;
}

  /* Popup actu : même logique (centré + largeur relative + espace sous le visuel) */
  body.pg-page-actus .pg-pop figure.wp-block-image{
    width: min(var(--pg-actus-media-ideal), var(--pg-actus-media-max));
    margin: 0 auto var(--pg-actus-media-gap) auto;
  }
  body.pg-page-actus .pg-pop figure.wp-block-image img{
    width: 100%;
    height: auto;
    display: block;
  }
  
/* =====================================================
   MEDIA & TEXT : éviter le visuel timbre-poste en tablette
   (quand on est encore en 2 colonnes)
   ===================================================== */

body.pg-page-actus .wp-block-media-text:not(.is-stacked-on-mobile){
  /* on force le mode "grille" au cas où le thème l’aurait altéré */
  display: grid !important;

  /* colonne media jamais trop petite */
  grid-template-columns: minmax(220px, 35%) 1fr !important;

  column-gap: 12px;
  align-items: start;
}

/* ceinture + bretelles : si, malgré tout, c’est interprété en flex par le thème */
body.pg-page-actus .wp-block-media-text:not(.is-stacked-on-mobile) .wp-block-media-text__media{
  min-width: 220px !important;
  width: 100% !important;
  flex: 0 0 220px !important;
}

/* image : remplir sa colonne */
body.pg-page-actus .wp-block-media-text:not(.is-stacked-on-mobile) .wp-block-media-text__media img{
  width: 100% !important;
  height: auto !important;
  display: block;
}

}


/* =========================================================
   PAGE FAQ (ID 6452)
   — forcer OceanWP en "full width" + conteneur centré
   ========================================================= */

body.pg-page-faq #primary.content-area{
  float: none !important;
  width: 100% !important;
}

/* (sécurité) si une sidebar existe, on la neutralise sur cette page */
body.pg-page-faq #right-sidebar,
body.pg-page-faq #left-sidebar{
  display: none !important;
}

/* largeur éditoriale du bloc Gutenberg (conteneur centré) */
body.pg-page-faq .wp-block-group__inner-container{
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   FAQ — catégories + questions (bloc "Détails")
   Objectifs :
   - séparer mieux les catégories
   - questions plus fines (pas "titre")
   - filet jaune discret (pas un gros cadre)
   - gagner de la place verticale
   ========================================================= */

/* espace avant chaque catégorie (sauf la 1ère) */
body.pg-page-faq h6{
  margin: 22px 0 10px 0;
}

/* base : ligne sous chaque question + compacité */
body.pg-page-faq details{
  border: 0;
  border-bottom: 1px solid #FFC000;
  padding: 3px 0;
  margin: 0;
}

/* on évite l’effet “ligne colléeâ€Â au titre de catégorie */
body.pg-page-faq h6 + details{
  padding-top: 2px;
}


/* question (summary) : plus petit, moins gras, différencié */
body.pg-page-faq details > summary{
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  font-style: italic;
  padding: 2px 0;
  line-height: 1.35;
}

/* réponse : compact mais lisible */
body.pg-page-faq details > *:not(summary){
    margin: 6px 0 0 0;
  line-height: 1.4;
}

/* =========================================================
   FAQ — séparation verticale entre colonnes
   ========================================================= */

/* on crée un espace central réel */
body.pg-page-faq .wp-block-columns{
  position: relative;
  column-gap: 48px; /* espace total entre colonnes */
}

/* filet vertical centré — borné à la zone des catégories */
body.pg-page-faq .wp-block-columns::before{
  content: "";
  position: absolute;

  /* alignement vertical sur la zone utile (titres de catégories) */
  top: 24px;
  bottom: 0px;

  left: 50%;
  width: 1px;
  background-color: #FFC000;
  transform: translateX(-0.5px);
  opacity: 0.7;
  pointer-events: none;
}

/* =========================================================
   FAQ — anti-bascule Gutenberg (<782) : maintenir 2 colonnes
   ========================================================= */
@media (max-width: 782px){

  /* garder le layout en 2 colonnes */
  body.pg-page-faq .wp-block-columns{
    flex-wrap: nowrap !important;     /* empêche l'empilement */
    gap: 48px !important;             /* ton espace central */
    row-gap: 0 !important;            /* évite l'espace vertical */
  }

  body.pg-page-faq .wp-block-column{
    flex-basis: 0 !important;         /* 2 colonnes équilibrées */
    flex-grow: 1 !important;
    width: auto !important;
    margin: 0 !important;             /* évite marges parasites */
  }

  /* le filet vertical doit rester visible en 2 colonnes */
  body.pg-page-faq .wp-block-columns::before{
    display: block !important;
    content: "" !important;
  }
}

/* =========================================================
   FAQ — TA bascule : 1 colonne + marges + pas de filet
   ========================================================= */
@media (max-width: 780px){

  /* marges latérales (réglables) */
  body.pg-page-faq{
    --pg-faq-pad-left: 14px;
    --pg-faq-pad-right: 14px;
  }
  body.pg-page-faq .wp-block-group__inner-container{
    padding-left: var(--pg-faq-pad-left);
    padding-right: var(--pg-faq-pad-right);
    box-sizing: border-box;
  }

  /* repasser en 1 colonne */
  body.pg-page-faq .wp-block-columns{
    flex-wrap: wrap !important;
    gap: 0 !important;          /* supprime trou central + espace vertical */
    row-gap: 0 !important;
  }
  body.pg-page-faq .wp-block-column{
    flex-basis: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* supprimer le filet vertical */
  body.pg-page-faq .wp-block-columns::before{
    display: none !important;
    content: none !important;
  }
}