/* Applique une largeur maximale à tous les éléments enfants */
.container> * {
    max-width: var(--container-max-width);           /* Les enfants ne dépasseront pas 1200px de largeur */
    width: 100%;                 /* Les enfants prennent toute la largeur disponible jusqu'Ã  1200px */
}



.sommaire ul,
.sommaire li,
.sommaire ol{
  padding: 0;
  margin: 0;
  list-style: none;
}

.sommaire{
    padding:1rem;
    border: 2px solid var(--doree); 
    border-radius:5px;
    margin-bottom:0.5rem !important; 
}

.sommaire ol {
    list-style: none;       /* supprime les nombres par défaut */
    margin: 0;
    padding-left: 0;
    counter-reset: section; /* initialise le compteur personnalisé */
    font-size:0.938rem;

}


/* Chaque <li> va être un conteneur flex */
.sommaire ol li {
  display: flex;
  /* pour s’assurer que, par défaut, le texte hérite de la couleur voulue */
  color: var(--text_sommaire);
  align-items: center;    /* centre verticalement l'icône/numéro et le texte */
  counter-increment: section; /* incrémente le compteur à chaque <li> */
  margin-bottom: 0.5rem;
}

/* On insère le numéro avant le texte du <li> */
.sommaire ol li::before {
  content: counter(section) ". ";
  color: var(--num_sommaire) !important;
  margin-right: 0.5rem; /* espace entre le numéro et le texte */
    font-size:0.875rem;
}

.sommaire ol li a {
  color: var(--text_sommaire);
  text-decoration: none; /* enlève le soulignement, si tu veux */
}

.sommaire ol li a:hover {
  text-decoration: underline; /* effet au survol */
  color: var(--text_sommaireHOVER);
}

/* Lien actif dans le sommaire */
.sommaire a.active {
  color: var(--text_sommaireHOVER);  /* ou une autre couleur, si tu veux */
  /* text-decoration: underline; // au besoin */
}

.description_ACF{
    font-size: var(--fontsize_min);
}

.resume_ACF{
    font-size: var(--fontsize_min);
    margin:1rem 0;
    border-radius: 5px;
    padding:1.250rem; 
    background-color: #F0FAFF;
    border: 1px solid #9CBBCA;
}
 
.resume-title{
    margin:0 0 3rem 0;
    font-size:1.25rem;  
    color:#001438;
}

.resume_ACF li{
    margin-bottom:1rem; 
}


.titre_sommaire{
    font-weight: 500;
    color:var(--primary);
    margin:0 0 0.75rem 0; 
} 




/* 1. Styles du fil d’Ariane */

.breadcrumb-nav {
    display: flex;
    align-items: center; /* Centre verticalement */
    color: var(--colorheader)/*secondary*/;
    gap: 0.5rem;         /* Espace horizontal entre les éléments */
    font-size: 0.875rem;
}

.breadcrumb-nav svg{
    fill: var(--colorheader) !important/*secondary*/;
}

.icon-home {
  display: inline-flex; 
  align-items: center;
  justify-content: center;
  border: 1px solid ; /* Contour de la maison */
  border-radius: 4px;     /* Coins arrondis */
  padding: 4px;           /* Espace intérieur autour de l’icône */
}

.breadcrumb-link {
    color: var(--colorheader)/*secondary*/;
    text-decoration: none;
    display: inline-flex; 
    align-items: center;
}

.breadcrumb-link:hover {
    text-decoration: underline;
}

.breadcrumb-separator {
    margin: 0 0.5rem;
    font-size:0.5rem;
    color: var(--colorheader)/*secondary*/;
}


/* 2. Titre de l'article */

.article-title {
    font-size: 2rem;    /* Ajuste selon tes goûts */
    padding:2rem 0rem;
    color: var(--colorheader)/*white*/;
    text-align: center;
    margin:0;
}

/* 3. Métadonnées de l'article */

.article-meta {
    color: var(--colorheader)/*secondary*/;
    font-size: 0.875rem;
    display: flex;
    align-items: center; /* aligne verticalement au centre, ou utilisez flex-start */
    gap: 1rem; /* espace entre l'avatar et les infos */
}

.article-meta-avatar {
    /* Vous pouvez définir une largeur fixe si nécessaire */
    display: flex;
    flex-shrink: 0; /* empêche l'avatar de rétrécir */
    align-items: center;
}

.article-meta-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 20px;
    border: 1px solid white;    
    object-fit: cover; /* Optionnel, pour s'assurer que l'image remplit bien le carré */
}

.article-meta-info {
    /* Laisse prendre l'espace restant */
    flex: 1;
}

.article-bio {
    color: var(--colorheader)/*secondary*/;
    font-style: italic;
}

.description,
figcaption.wp-element-caption {
  color: var(--vert-description);
  font-size: 1rem;
  font-style: italic;
  font-weight: bold;
  text-align: center !important;
  margin-bottom: 1rem;
  margin-top: 1.5rem;
}




.container {
    display:block;
    margin:0 auto; 
    padding: 1rem;
}

@media (min-width: 992px) {
    .container {
        display:grid;
        gap:0 1rem; 
        grid-template-columns: 350px minmax(0, 1fr);
        grid-template-rows: auto auto 1fr auto;
        grid-template-areas:
        "sommaire description"
        "sommaire resume"
        "sommaire article"
        "sommaire faq";
        max-width:var(--container-max-width);
    }
 
    .sommaire {
        padding:1rem 1rem 0 0; 
        border:none;
        grid-area:sommaire;
        position: sticky;
        top: 6px;
        align-self: start; /* Pour que le sommaire s’aligne en haut de sa zone */
        margin-bottom:0;
    }
    .resume_ACF {
        grid-area:resume;
    }
    .description_ACF {
        grid-area:description;
    }
    .article {
        grid-area:article;
    }
    .faq {
        grid-area:faq;
    }
}

/* HERO HEADER
	 ========================================================================== */

.article-header {
    /* Sur toute la largeur, déjà .container-fluid */
    
    background-color: var(--fondheader)/*var(--primary)*/;
    padding: 2rem 0 1.25rem 0;
}

.article-header-content {
    max-width: var(--container-max-width);
    margin: 0 auto;      /* Centre horizontalement */
    padding: 0 1rem;     /* Petite marge intérieure horizontale */
}

@media (min-width: 800px) {
    .article-header-content {
        padding: 0 2rem;
    }
    .container {
        padding: 1rem 2rem;
    }
}


/* BARRE DE PROGRESSION
	 ========================================================================== */

/* Le conteneur de la barre (occupant toute la largeur) */
#reading-progress-container {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: var(--fondheader);
    z-index: 10;
}

/* La barre qui se remplit */
#reading-progress-bar {
    width: 0;
    height: 100%;
    background-color: #ff6600;
    transition: width 0.1s ease-out;
}

.menu-open #reading-progress-container {
  display: none;
}





/* =========================
   Tableaux dans les articles
========================= */

/* Permet le scroll horizontal des tableaux trop larges */
.article div:has(table) {
  overflow-x: auto;
}

.table-scroll {
  overflow-x: auto;
  margin-bottom: 0.25rem;
}



.wp-block-table .has-fixed-layout td,
.wp-block-table .has-fixed-layout th {
  /* On évite la coupure arbitraire */
  word-break: keep-all;
  /* On autorise la césure naturelle quand le mot est trop long */
  overflow-wrap: break-word;
  /* Si le navigateur le supporte, on ajoute la césure automatique */
  hyphens: auto;
}



/* =========================
   Encadrés éditoriaux (articles)
========================= */

.bonasavoir,
.attention {
  border-radius: 5px;
  margin: 3rem 0;
  padding: 1.125rem;
}

.attention {
  color: #490000;
  background-color: #FFF0F0;
  border: 1px solid #CA9C9C;
}

.bonasavoir {
  color: #001438;
  background-color: #F0FAFF;
  border: 1px solid #9CBBCA;
}





/* ===============================
   Navigation articles même catégorie
   =============================== */

.post-navigation-category {
  margin: 4rem 0 2rem 0;
  padding: 2rem;
  border-top: 1px solid rgba(30, 48, 68, 0.15);
}

.post-nav-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.post-nav-prev,
.post-nav-next {
  background-color: var(--secondary);
  border: 1px solid rgba(30, 48, 68, 0.12);
  border-radius: 8px;
  padding: 1.25rem;
}

.post-navigation-category a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.nav-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text_sommaire);
  margin-bottom: 0.5rem;
}

.nav-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
}

/* Desktop : gauche / droite */
@media (min-width: 768px) {
  .post-nav-inner {
    grid-template-columns: 1fr 1fr;
  }

  .post-nav-prev {
    text-align: left;
  }

  .post-nav-next {
    text-align: right;
  }