/* =========================================================
   PilotCSE — Pages “Arguments militants”
   Fichier : militants.css
   Version : 1.0.0
   Objectif :
   - Mise en page 2 colonnes (70/30) + écart maîtrisé
   - Typo “encyclopédie” (rythme de lecture)
   - Sidebar “cartes” + sticky desktop
   - CTA mobile fixe bas d’écran (optionnel)
   Portée :
   - S’applique uniquement aux pages/blocs contenant la classe .pcse-militants

   Pré-requis (Gutenberg) :
   - Sur le conteneur (Groupe ou Colonnes) : classe  pcse-militants
   - Sur la colonne gauche : classe            pcse-militants-main
   - Sur la colonne droite : classe            pcse-militants-aside
   ========================================================= */


/* =========================================================
   1) Layout colonnes : écart + sécurité sticky
   ========================================================= */

@media (min-width: 981px) {

  /* Écart visuel entre colonnes (total ~36px) */
  .pcse-militants-main { padding-right: 18px !important; }
  .pcse-militants-aside { padding-left: 18px !important; }

  /* Sticky peut casser si un parent a overflow: hidden/auto */
  .pcse-militants .wp-block-columns { overflow: visible; }
}


/* =========================================================
   2) Article : base + rythme de lecture
   ========================================================= */

.pcse-militants .pcse-article {
  max-width: 100%;
}

.pcse-militants .pcse-article p {
  font-size: 1.03rem;
  line-height: 1.75;
  margin: 0 0 1.05rem 0;
}

.pcse-militants .pcse-intro p {
  font-size: 1.07rem;
  line-height: 1.8;
}

.pcse-militants .pcse-article-header {
  margin: 0 0 1.25rem 0;
}

.pcse-militants .pcse-kicker {
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.35rem 0;
  color: #111827;
}

.pcse-militants .pcse-subtitle {
  margin: 0;
  color: #374151;
  font-size: 1.02rem;
  line-height: 1.55;
}

.pcse-militants .pcse-article h2 {
  font-size: 1.45rem;
  line-height: 1.25;
  margin: 2.2rem 0 0.85rem 0;
  letter-spacing: -0.01em;
}

.pcse-militants .pcse-article h3 {
  font-size: 1.22rem;
  line-height: 1.3;
  margin: 1.9rem 0 0.75rem 0;
  letter-spacing: -0.005em;
}

.pcse-militants .pcse-article h4 {
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 1.35rem 0 0.6rem 0;
}

/* Petit soulignement discret des titres */
.pcse-militants .pcse-article h2::after,
.pcse-militants .pcse-article h3::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: rgba(0, 115, 170, 0.28);
  margin-top: 0.5rem;
  border-radius: 99px;
}

/* Listes */
.pcse-militants .pcse-article ul,
.pcse-militants .pcse-article ol {
  margin: 0.6rem 0 1.2rem 1.25rem;
}

.pcse-militants .pcse-article li {
  line-height: 1.65;
  margin: 0 0 0.45rem 0;
}

/* HR (dans tes contenus “anciens”) */
.pcse-militants .pcse-article hr {
  border: 0;
  height: 1px;
  background: rgba(0,0,0,0.10);
  margin: 1.7rem 0;
}

/* Images */
.pcse-militants .pcse-article img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}


/* =========================================================
   3) Sommaire (si présent)
   ========================================================= */

.pcse-militants .pcse-sommaire {
  border: 1px solid rgba(0,0,0,0.08);
  background: #f8fafc;
  border-radius: 16px;
  padding: 1rem 1.05rem;
  margin: 1.25rem 0 1.6rem 0;
}

.pcse-militants .pcse-sommaire h2 {
  margin: 0 0 0.6rem 0;
  font-size: 1.05rem;
}

.pcse-militants .pcse-sommaire ol {
  margin: 0.4rem 0 0 1.25rem;
}

.pcse-militants .pcse-sommaire li {
  margin: 0.35rem 0;
}


/* =========================================================
   4) Callouts / citations (si utilisés)
   ========================================================= */

.pcse-militants .pcse-callout,
.pcse-militants .pcse-quote {
  border-left: 4px solid #0073aa;
  background: #f4f8fb;
  padding: 1rem 1.15rem;
  border-radius: 12px;
  margin: 1.35rem 0;
}

.pcse-militants .pcse-callout p,
.pcse-militants .pcse-quote p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
}


/* =========================================================
   5) Sidebar (colonne droite) : cartes + sticky
   ========================================================= */

.pcse-militants-aside {
  position: relative;
}

/* Cartes : on cible les groupes Gutenberg dans la colonne */
.pcse-militants-aside .wp-block-group,
.pcse-militants-aside .wp-block-group.has-background {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 1rem 1.05rem;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  margin-bottom: 1rem;
}

/* Titres cartes */
.pcse-militants-aside h2,
.pcse-militants-aside h3,
.pcse-militants-aside h4 {
  margin: 0 0 0.6rem 0;
  line-height: 1.25;
}

/* Texte cartes */
.pcse-militants-aside p {
  margin: 0 0 0.75rem 0;
  color: #374151;
  line-height: 1.55;
}

/* Boutons (bloc Boutons Gutenberg) */
.pcse-militants-aside .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none;
  padding: 0.65rem 0.95rem;
}

/* Espacement bouton */
.pcse-militants-aside .wp-block-buttons {
  margin: 0.75rem 0 0 0;
}

/* Listes sidebar */
.pcse-militants-aside ul {
  margin: 0.5rem 0 0 1.1rem;
}
.pcse-militants-aside li {
  margin: 0.35rem 0;
}

/* Sticky desktop uniquement */
@media (min-width: 981px) {
  .pcse-militants-aside {
    position: sticky;
    top: 110px; /* ajuste si ton header est plus haut */
    align-self: flex-start;
  }
}


/* =========================================================
   6) CTA mobile fixe bas d’écran (optionnel)
   - HTML à ajouter une fois dans la composition sidebar :
     <div class="pcse-mobile-cta"> ... </div>
   ========================================================= */

.pcse-mobile-cta { display: none; }

@media (max-width: 980px) {

  .pcse-mobile-cta {
    display: flex;
    gap: 10px;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 9999;

    padding: 10px;
    border-radius: 16px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  }

  .pcse-mobile-cta__btn {
    flex: 1;
    text-align: center;
    text-decoration: none;
    font-weight: 800;
    padding: 12px 10px;
    border-radius: 14px;

    color: #0073aa;
    background: rgba(0,115,170,0.10);
    border: 1px solid rgba(0,115,170,0.25);
  }

  .pcse-mobile-cta__btn--primary {
    color: #fff;
    background: #0073aa;
    border-color: #0073aa;
  }

  /* évite que la barre masque la fin de page */
  .pcse-militants { padding-bottom: 92px; }

  /* Confort lecture en 1 colonne : limite la ligne */
  .pcse-militants .pcse-article {
    max-width: 74ch;
    margin-left: auto;
    margin-right: auto;
  }
}


/* =========================================================
   7) Utilitaires
   ========================================================= */

/* Masquer certains blocs (ex : cartes sidebar) sur mobile */
@media (max-width: 980px) {
  .pcse-hide-mobile { display: none !important; }
}
/* Image de tête (mise en avant) pages militantes */
.pcse-militants-hero img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}
/* Limiter la hauteur des images de tête */
.pcse-militants-hero img {
  max-height: 45vh; /* 40 à 50vh = zone confortable */
  object-fit: cover;
}