/* ============================
   AFROSCOPIE PREMIUM RESET v1
   Objectif :
   - STOP glissement horizontal (mobile)
   - STOP texte en colonnes / bloc étroit (PC/tablette)
   - Largeur stable + lecture premium partout
   ============================ */

/* 1) Anti "bouge" horizontal */
html, body { width: 100%; overflow-x: hidden !important; }
* { max-width: 100%; box-sizing: border-box; }

/* 2) Annule tout comportement "colonnes" et "float" dans le contenu d'article */
.single .wp-block-post-content,
.single .entry-content {
  column-count: 1 !important;
  column-gap: 0 !important;
}

.single .wp-block-post-content *,
.single .entry-content * {
  float: none !important;
  shape-outside: none !important;
}

/* 3) Premium plein écran (pas de gros vides), lisible */
.single .wp-block-post-content,
.single .entry-content {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;

  padding-left: clamp(12px, 3vw, 36px) !important;
  padding-right: clamp(12px, 3vw, 36px) !important;

  font-size: 16px !important;
  line-height: 1.8 !important;
}


/* 4) Mobile premium : plein écran + marges fines + stable */
@media (max-width: 767px) {
  .single .wp-block-post-content,
  .single .entry-content {
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
  }

  /* réduit les gros vides verticaux */
  .single .wp-block-post-content > *,
  .single .entry-content > * {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
}

/* 5) Images propres, jamais plus larges que l'écran */
.single img,
.single figure,
.single .wp-block-image,
.single .wp-block-post-featured-image {
  max-width: 100% !important;
}

.single .wp-block-image img,
.single .wp-block-post-featured-image img,
.single figure img,
.single img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* 6) IMPORTANT : empêche un bloc interne (group/columns) de rétrécir le texte */
.single .wp-block-group,
.single .wp-block-columns,
.single .wp-block-column {
  width: 100% !important;
  max-width: 100% !important;
}
/* AFROSCOPIE — FULL WIDTH TEXT FIX (PC + MOBILE) */

/* 1) Empêche les décalages horizontaux */
html, body {
  width: 100% !important;
  overflow-x: hidden !important;
}

/* 2) Supprime la contrainte Gutenberg (content-size) qui centre le texte */
:root{
  --wp--style--global--content-size: 100% !important;
  --wp--style--global--wide-size: 100% !important;
}

/* 3) Désactive le "layout constrained" qui impose un max-width */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =====================================================
   AFROSCOPIE – MOBILE FINAL (TEXT FIX)
   ===================================================== */
@media (max-width: 768px){

  /* Sécurité largeur */
  html, body{
    width:100% !important;
    overflow-x:hidden !important;
  }

  /* Neutralise tout centrage Gutenberg */
  .is-layout-constrained > *{
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* TEXTE : on ramène VRAIMENT au bord */
  .single .wp-block-post-content,
  .single .entry-content{
    padding-left:8px !important;
    padding-right:8px !important;
  }

  /* Paragraphes et titres */
  .single p,
  .single h1,
  .single h2,
  .single h3,
  .single h4,
  .single h5,
  .single h6{
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* Groupes Gutenberg (cause principale du vide) */
  .wp-block-group,
  .wp-block-columns,
  .wp-block-column{
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* Images restent full */
  img,
  figure,
  .wp-block-image,
  .wp-block-post-featured-image{
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}


/* 5) Certains thèmes limitent la largeur des paragraphes */
.single .entry-content p,
.single .wp-block-post-content p {
  max-width: none !important;
}

/* 6) Images full width restent full (déjà OK chez toi) */
.single img,
.single figure,
.single .wp-block-image,
.single .wp-block-post-featured-image {
  max-width: 100% !important;
}
/* =====================================================
   AFROSCOPIE – MOBILE FINAL FIX (UNE + ARTICLES)
   ===================================================== */
@media (max-width: 768px) {

  /* Sécurité : pas de scroll horizontal */
  html, body {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Supprime les conteneurs centrés mobile */
  .wp-site-blocks,
  .site-content,
  .content-area,
  main,
  .entry-content,
  .wp-block-post-content {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Texte : quasi bord à bord, premium lisible */
  .single .entry-content,
  .single .wp-block-post-content,
  .archive .entry-content {
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  /* Paragraphes et titres : aucun recentrage */
  .entry-content p,
  .entry-content h1,
  .entry-content h2,
  .entry-content h3,
  .entry-content h4,
  .entry-content h5,
  .entry-content h6 {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Cartes de la UNE */
  .wp-block-post-template,
  .wp-block-post {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

}
/* =====================================================
   AFROSCOPIE – MOBILE PREMIUM (UNE + ARTICLES)
   Neutralise Gutenberg "constrained layout" + paddings
   ===================================================== */
@media (max-width: 768px){

  html, body{
    width:100% !important;
    overflow-x:hidden !important;
  }

  /* 1) Neutralise les variables WP qui ajoutent des marges/paddings */
  body{
    --wp--style--root--padding-left: 0px !important;
    --wp--style--root--padding-right: 0px !important;
    --wp--custom--spacing--outer: 0px !important;
  }

  /* 2) Enlève les paddings qui créent les "vides" */
  .wp-site-blocks,
  .wp-site-blocks > * ,
  main, .site-main,
  .site-content, .content-area{
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    max-width:100% !important;
    width:100% !important;
    box-sizing:border-box !important;
  }

  /* 3) Casse le centrage Gutenberg (is-layout-constrained) */
  .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* 4) Donne un padding "premium lisible" au TEXTE uniquement */
  .single .wp-block-post-content,
  .single .entry-content,
  .archive .wp-block-post-template,
  .archive .wp-block-post{
    padding-left:10px !important;
    padding-right:10px !important;
    box-sizing:border-box !important;
  }

  /* 5) Images / blocs full width restent full */
  .alignfull, .wp-block-image.alignfull,
  .wp-block-cover.alignfull,
  figure.wp-block-image,
  .wp-block-post-featured-image,
  .wp-block-post-featured-image img{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* 6) Sécurité : aucun élément ne doit dépasser la largeur */
  img, video, iframe, table{
    max-width:100% !important;
    height:auto !important;
  }
}
/* =====================================================
   AFROSCOPIE – MOBILE FINAL (TEXT FIX)
   ===================================================== */
@media (max-width: 768px){

  /* Sécurité largeur */
  html, body{
    width:100% !important;
    overflow-x:hidden !important;
  }

  /* Neutralise tout centrage Gutenberg */
  .is-layout-constrained > *{
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* TEXTE : on ramène VRAIMENT au bord */
  .single .wp-block-post-content,
  .single .entry-content{
    padding-left:8px !important;
    padding-right:8px !important;
  }

  /* Paragraphes et titres */
  .single p,
  .single h1,
  .single h2,
  .single h3,
  .single h4,
  .single h5,
  .single h6{
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* Groupes Gutenberg (cause principale du vide) */
  .wp-block-group,
  .wp-block-columns,
  .wp-block-column{
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* Images restent full */
  img,
  figure,
  .wp-block-image,
  .wp-block-post-featured-image{
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}
/* ===== AFROSCOPIE TYPOGRAPHIE PREMIUM ===== */

/* TITRES */
h1, h2, h3, h4 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: #111;
}

/* TEXTE COURANT */
p, li {
  font-family: 'Source Serif 4', serif;
  font-size: 18px;
  line-height: 1.7;
  color: #222;
}

/* CHAPO (premier paragraphe) */
article p:first-of-type {
  font-size: 19px;
  font-weight: 500;
  opacity: 0.95;
}

/* MOBILE */
@media (max-width: 768px) {
  p, li {
    font-size: 17px;
    line-height: 1.65;
  }

  h1 {
    font-size: 1.8em;
  }
}
.afro-quote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 20px;
  color: #f5f5f5;
}
/* ================================
   NORMALISATION GLOBALE DES ICÔNES
   MOBILE ONLY
================================ */
@media (max-width: 768px) {

  /* Icônes Font (FontAwesome, Elementor, etc.) */
  i,
  .fa,
  .fas,
  .far,
  .fab,
  .icon,
  .icons,
  .social-icon i {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  /* Icônes SVG */
  svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
  }

  /* Icônes images (PNG / JPG / WEBP) */
  img[class*="icon"],
  img[class*="social"],
  img[class*="logo"],
  .social-icons img,
  .header img {
    max-width: 22px !important;
    max-height: 22px !important;
    width: auto !important;
    height: auto !important;
  }

  /* Boutons icônes (menu, hamburger, recherche, etc.) */
  button i,
  a i {
    font-size: 18px !important;
  }
}
/* ✅ MOBILE: normaliser les icônes qui sont DANS le contenu (texte) */
@media (max-width: 768px){

  /* 1) Images/icônes inline dans le texte (liens, paragraphes, listes) */
  .entry-content p img,
  .entry-content a img,
  .entry-content li img,
  .entry-content span img,
  .entry-content strong img,
  .entry-content em img,
  .wp-block-post-content p img,
  .wp-block-post-content a img,
  .wp-block-post-content li img{
    width: auto !important;
    height: auto !important;
    max-height: 20px !important;   /* taille "normale" */
    max-width: 20px !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  /* 2) SVG/icônes inline dans le texte */
  .entry-content p svg,
  .entry-content a svg,
  .entry-content li svg,
  .wp-block-post-content p svg,
  .wp-block-post-content a svg,
  .wp-block-post-content li svg{
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    vertical-align: middle !important;
  }

  /* 3) Icônes font (FontAwesome / etc.) dans le texte */
  .entry-content p i,
  .entry-content a i,
  .entry-content li i,
  .wp-block-post-content p i,
  .wp-block-post-content a i,
  .wp-block-post-content li i{
    font-size: 20px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
  }
}
/* ================================
   MASQUER LA SIDEBAR SUR MOBILE
================================ */
@media (max-width: 768px){

  /* Sidebar classique */
  .sidebar,
  #sidebar,
  .site-sidebar,
  .primary-sidebar,
  .secondary-sidebar,
  aside {
    display: none !important;
  }

  /* Contenu principal prend toute la largeur */
  .content-area,
  .site-content,
  .main-content,
  .entry-content,
  .wp-site-blocks {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* =========================================
   MOBILE: DÉSACTIVER TOUTE SIDEBAR / WIDGET
   (thèmes classiques + Elementor + blocs)
========================================= */
@media (max-width: 768px){

  /* 1) Sidebars / zones widgets les plus courantes */
  #secondary, .secondary,
  #primary .widget-area, .widget-area,
  #sidebar, .sidebar, .site-sidebar,
  .primary-sidebar, .secondary-sidebar,
  .sidebar-area, .right-sidebar, .left-sidebar,
  .layout-sidebar, .has-sidebar,
  .sidebar-container, .widget, .widgets-area {
    display: none !important;
  }

  /* 2) Cas Elementor : colonnes/sections de sidebar */
  .elementor-aside,
  .elementor-widget-sidebar,
  .elementor-section .elementor-column.elementor-col-25,
  .elementor-section .elementor-column.elementor-col-33,
  .elementor-section .elementor-column.elementor-col-20 {
    display: none !important;
  }

  /* 3) Cas Gutenberg (blocs colonnes) : si ta sidebar est une colonne */
  .wp-block-column[style*="flex-basis:25%"],
  .wp-block-column[style*="flex-basis:30%"],
  .wp-block-column[style*="flex-basis:33%"],
  .wp-block-column[style*="flex-basis:20%"]{
    display: none !important;
  }

  /* 4) Le contenu prend toute la largeur */
  #primary, .primary,
  .content-area, .site-content,
  .main-content, main,
  .entry-content, .wp-block-post-content {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* =========================================
   FOOTER – HARMONISATION MOBILE
========================================= */
@media (max-width: 768px){

  footer,
  .site-footer,
  #colophon {
    padding: 24px 16px !important;
    text-align: center !important;
  }

  /* Colonnes du footer → empilement vertical */
  .site-footer .footer-widgets,
  .site-footer .footer-columns,
  .site-footer .widget-area,
  .site-footer .wp-block-columns {
    display: block !important;
  }

  .site-footer .widget,
  .site-footer .wp-block-column {
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  /* Titres du footer */
  .site-footer h1,
  .site-footer h2,
  .site-footer h3,
  .site-footer h4 {
    font-size: 16px !important;
    margin-bottom: 10px !important;
    letter-spacing: 0.5px;
  }

  /* Texte footer */
  .site-footer p,
  .site-footer li,
  .site-footer a {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* Liens */
  .site-footer a {
    display: inline-block;
    margin: 4px 6px;
  }

  /* Icônes sociales footer */
  .site-footer i,
  .site-footer svg,
  .site-footer img {
    max-width: 22px !important;
    max-height: 22px !important;
    font-size: 18px !important;
    vertical-align: middle;
  }

  /* Logo footer */
  .site-footer img[alt*="logo"],
  .site-footer .custom-logo {
    max-width: 120px !important;
    margin: 0 auto 16px;
    display: block;
  }

  /* Copyright */
  .site-footer .copyright,
  .site-footer .site-info {
    font-size: 12px !important;
    opacity: 0.85;
    margin-top: 16px;
  }
}
/* =========================================
   MOBILE: réduire les marges + agrandir images (UNE / listes)
========================================= */
@media (max-width: 768px){

  /* 1) Conteneurs : enlever les grosses marges */
  body,
  .site,
  .site-content,
  .content-area,
  .container,
  .wrapper,
  .row,
  main,
  #primary,
  #content {
    max-width: 100% !important;
  }

  /* Paddings latéraux (la vraie cause des grosses marges) */
  .site-content,
  .content-area,
  main,
  #primary,
  #content,
  .container,
  .wrapper {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Si ton thème centre tout avec un "margin auto" + largeur fixe */
  .container,
  .wrapper,
  .site-content > .container,
  #content > .container {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 2) Listes / cartes d’articles : réduire l’espace */
  article,
  .post,
  .type-post,
  .blog .post,
  .archive .post {
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
  }

  /* Titres : éviter l’effet “énorme bloc” (optionnel mais conseillé) */
  h1, .entry-title, .post-title {
    margin-left: 0 !important;
    margin-right: 0 !important;
    line-height: 1.15 !important;
  }

  /* 3) Images (featured / thumbnails) : les rendre visibles et grandes */
  .post-thumbnail,
  .post-thumb,
  .entry-thumbnail,
  .featured-image,
  .wp-post-image,
  .post-image,
  .blog-thumb,
  .archive-thumb {
    width: 100% !important;
    max-width: 100% !important;
  }

  .post-thumbnail img,
  .post-thumb img,
  .entry-thumbnail img,
  .featured-image img,
  img.wp-post-image,
  .post-image img,
  .blog-thumb img,
  .archive-thumb img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: 10px !important; /* look premium */
    display: block !important;
  }
@media (min-width: 1024px){

/* 1) Lecture « magazine » : largeur + typographie + respiration */
body.single-post .wp-block-post-title,
body.single
largeur maximale : 880 px ;
marge gauche : automatique ;
marge droite : automatique ;
}

body.single-post .wp-block-post-title{
line-height: 1.12;
letter-spacing: -0.4px;
}

body.single-post .wp-block-post-content{
font-size: 18.5px;
line-height: 1.95;
letter-spacing: .15px;
color: #151515;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}

body.single-post .wp-block-post-content p{
margin-top: 0;
margin-bottom: 18px;
}

/* 2) Image principale premium (mise en avant) — sans casser la structure */
body.single-post .wp-block-post-featured-image{
max-width: 980px;
marge : 14px auto 22px ;
}

body.single-post .wp-block-post-featured-image img{
width: 100%;
height: auto;
display: block;
border-radius: 18px;
box-shadow: 0 18px 45px rgba(0,0,0,.14);
object-fit: cover;
}

/* 3) Intertitres « presse » */
body.single-post .wp-block-post-content h2,
body.single-post .wp-block-post-content h3{
line-height: 1.22;
letter-spacing: -0.2px;
margin-top: 34px;
margin-bottom: 12px;
}

corps.article-single .wp-block-post-content h2{
font-weight: 800;
}

body.single-post .wp-block-post-content h3{
font-weight: 750;
}

/* 4) Citations élégantes (blockquote) */
body.single-post .wp-block-post-content blockquote{
margin: 18px 0 22px;
padding: 16px 18px;
border-left: 5px solid rgba(0,0,0,.18);
background: rgba(0,0,0,.03);
border-radius: 14px;
font-style: italic;
}

/* 5) Première lettre (lettrine) — narration */
body.single-post .wp-block-post-content > p
float: left;
font-size: 3.1em;
line-height: .9;
font-weight: 800;
margin: 6px 10px 0 0;
padding: 8px 10px;
border-radius: 12px;
background: rgba(0,0,0,.04);
}

/* 6) Images dans le contenu : propres, sans déborder */
body.single-post .wp-block-post-content img{
max-width: 100%;
hauteur : automatique ;
rayon de bordure : 16 px ;
}

/* 7) Liens plus “média” */
body.single-post .wp-block-post-content a{
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}

}
@media (min-width: 1024px){
body.single-post .wp-block-post-title,
body.single-post .wp-block-post-content{
font-family: Georgia, "Times New Roman", serif;
}
}
@media (min-width: 1024px){

body.single-post .wp-block-post-content > p:first-of-type::first-letter{
    float: left;
    font-size: 4.2em;
    line-height: 0.85;
    font-weight: 800;
    margin: 8px 12px 0 0;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(0,0,0,0.04);
    color: #000;
}

}
@media (max-width: 768px){

  /* 1) Image principale (featured) : redevient normale sur mobile */
  body .wp-block-post-featured-image,
  body .wp-block-post-featured-image img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }

  /* 2) Images dans le contenu : redeviennent lisibles (plus de miniatures) */
  body .wp-block-post-content img,
  body .wp-block-image img,
  body .wp-block-gallery img,
  body .wp-caption img,
  body article img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    float: none !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 3) Conteneurs d’images (figure / bloc image) : annule tout max-width trop petit */
  body .wp-block-image,
  body figure.wp-block-image,
  body figure,
  body .wp-caption{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 4) Si une règle précédente a touché la sidebar en mobile : on annule les tailles fixes */
  body aside img,
  body .wp-block-latest-posts__featured-image img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: cover !important;
  }
}
@media (max-width: 768px){

  body.single-post .wp-block-post-content{
    font-size: 17px;
  }

}
@media (max-width: 768px){

  /* Réduire les petites icônes (emoji / pictos inline) */
  body.single-post .wp-block-post-content p img,
  body.single-post .wp-block-post-content span img{
    width: auto !important;
    max-width: 28px !important;
    height: auto !important;
    display: inline !important;
    margin: 0 4px 0 0 !important;
  }

}
@media (max-width: 768px){

body.single-post .wp-block-post-content > p:first-of-type::first-letter{
    float: left;
    font-size: 3em;
    line-height: 0.9;
    font-weight: 800;
    margin: 6px 8px 0 0;
    color: #111;
}

}