/**
 * CoconSEM - SEO Table of Contents
 * Front styles
 */

/* =============================
   BLOC TOC - LOOK & FEEL THEME
   (STYLE 1 - CARTE BEIGE)
   ============================= */

.coconsem-toc {
  background: #f7f4ef;          /* beige clair du thème */
  border: 1px solid #e6e0d8;    /* gris-beige très léger */
  border-radius: 14px;
  padding: 1.3rem 1.6rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  color: #3f2f23;               /* brun léger, proche du texte global */
  position: relative;
  overflow: hidden;
      max-width: 850px;
    margin: 50px auto 0;
}

.prose button.cs-soft-cta-btn{
	border-radius:5px
}

/* Petit halo en haut pour rappeler l'ombre globale de la page */
.coconsem-toc::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.08),
    rgba(0,0,0,0)
  );
  opacity: 0.35;
  pointer-events: none;
}

/* Header : titre et bouton Masquer */
.coconsem-toc__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.coconsem-toc__title {
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

/* Bouton toggle Afficher / Masquer */
.coconsem-toc__toggle {
  border: none;
  background: transparent;
  font-size: 0.9rem;
  font-weight: 500;
  color: #5b4633;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}

.coconsem-toc__toggle:hover {
  background: #ede7df;
  color: #2f241b;
}

.coconsem-toc__toggle-icon {
  font-size: 10px;
  transform: translateY(1px);
  transition: transform 0.2s ease;
}

/* État replié : flèche tournée */
.coconsem-toc--collapsed .coconsem-toc__toggle-icon {
  transform: rotate(-90deg) translateY(1px);
}

/* Contenu interne */
.coconsem-toc__inner {
  margin-top: 0.4rem;
}

/* Liste principale */
.coconsem-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Éléments de liste */
.coconsem-toc__item {
  margin: 0;
  padding: 0.1rem 0;
}

/* Liens */
.coconsem-toc__item a {
  display: inline-block;
  padding: 4px 6px;
  border-radius: 6px;
  color: #3f2f23;              /* couleur de base (modifiée par niveau + bas) */
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.coconsem-toc__item a:hover {
  background: #ede7df;
  color: #1f1711;
}

/* =============================
   NIVEAUX DE TITRES
   ============================= */

/* H2 – plus important */
.coconsem-toc__item--h2 {
  font-weight: 600;
}

/* H3 – sous-niveaux */
.coconsem-toc__item--h3 {
  font-weight: 500;
}

/* H4/H5 – niveau plus fin */
.coconsem-toc__item--h4,
.coconsem-toc__item--h5 {
  font-weight: 400;
  font-size: 0.9rem;
}

/* =============================
   LAYOUT DANS LE WRAP AUTEUR+TOC
   ============================= */

/* Wrapper global, côté thème SCO */
.sco-author-toc-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 2.4fr);
  gap: 24px;
  align-items: flex-start;
}

/* Colonne auteur existante (gérée côté thème) */
.sco-author-toc-wrap .sco-author-bar {
  margin: 0;
}

/* TOC dans le wrap : occupe la colonne de droite sur desktop */
.sco-author-toc-wrap .coconsem-toc {
  margin: 0;
}

/* TOC : tous les niveaux alignés à gauche */
.coconsem-toc__item--h2,
.coconsem-toc__item--h3,
.coconsem-toc__item--h4,
.coconsem-toc__item--h5 {
  padding-left: 0;
}

/* Teinte par niveau : du plus foncé (H2) au plus clair (H5) */
.coconsem-toc__item--h2 a { color: #2f251d; }
.coconsem-toc__item--h3 a { color: #463427; }
.coconsem-toc__item--h4 a { color: #6a5741; }
.coconsem-toc__item--h5 a { color: #8b755a; }

/* Mobile : empilé, auteur au-dessus, TOC en dessous */
@media (max-width: 991px) {
  .sco-author-toc-wrap {
    display: block;
  }

  .sco-author-toc-wrap .coconsem-toc {
    margin-top: 16px;
  }
}

/* =========================================================
   STYLE 2 : BLOC CLAIR + BANDE ROUGE + PUCES CLASSIQUES
   ========================================================= */

.coconsem-toc.coconsem-toc--style2 {
  background: #fbfaf8;           /* fond très clair */
  border-radius: 6px;
  border: 1px solid #f1e6df;
  box-shadow: none;
  padding:1.1rem 1.4rem 2.4rem;
  position: relative;
  overflow: visible;             /* pour laisser dépasser la bande rouge */
  max-width: 717px;
  margin: 48px auto;
}


/* On supprime le halo du style 1 */
.coconsem-toc.coconsem-toc--style2::before {
  display: none;
}

/* Bande verticale rouge à gauche */
.coconsem-toc.coconsem-toc--style2::after {
  content: "";
  position: absolute;
  top: 0.75rem;
  bottom: 0.75rem;
  left: 0;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(
    to bottom,
    #b3201a,
    darkred
  );
}

/* Header : titre + lien Masquer alignés à gauche */
.coconsem-toc--style2 .coconsem-toc__header {
  justify-content: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.coconsem-toc--style2 .coconsem-toc__title {
  font-weight: 600;
  font-size: 1rem;
  color:#333333;
  padding: 10px 0 0 14px;
}

/* Bouton Masquer : look "lien" avec crochets */
.coconsem-toc--style2 .coconsem-toc__toggle {
  padding: 9px;
  background: none;
  border-radius: 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: #a63628;
  text-decoration: none;
  margin: 8px 0 0 0;
}

.coconsem-toc--style2 .coconsem-toc__toggle-label::before {
  content: "[ ";
}

.coconsem-toc--style2 .coconsem-toc__toggle-label::after {
  content: " ]";
}

.coconsem-toc--style2 .coconsem-toc__toggle:hover {
  color: #7f2218;
  text-decoration: underline;
}

/* On allège l’icône (petite flèche discrète) */
.coconsem-toc--style2 .coconsem-toc__toggle-icon {
  font-size: 9px;
}

/* Liste : puces classiques + marge de paragraphe */
.coconsem-toc--style2 .coconsem-toc__list {
  list-style: disc;
  margin: 1.3rem 0 0 2rem;
  padding: 0;
  color: #9B8A78 !important;
    list-style: disc;
}

.coconsem-toc--style2 .coconsem-toc__item {
  padding: 0.08rem 0;
      text-indent: 4px;
}

/* Liens : alignés sur la ligne, sans fond avec un léger ton chaud */
.coconsem-toc--style2 .coconsem-toc__item a {
  padding: 0.05rem 0;
  border-radius: 0;
  color: #9B8A78 !important;         /* brun chaud */
  font-weight:400;
  font-size: 1.1rem;
}

.coconsem-toc--style2 .coconsem-toc__item a:hover {
  background: transparent;
  color: orange !important; 
  text-decoration: underline;
}


/* Mobile :  */
@media (max-width: 991px) {
	.coconsem-toc.coconsem-toc--style2 {
		max-width: 617px;
	}
}
@media (max-width: 700px) {
	.coconsem-toc.coconsem-toc--style2 {
		max-width:  90% !important;	
	}	
	.coconsem-toc--style2 .coconsem-toc__item a {
		font-size: 0.9rem !important;
		vertical-align: top !important
	}
}

/* Niveaux : même alignement à gauche, hiérarchie par la couleur */
.coconsem-toc--style2 .coconsem-toc__item--h2 a { color: #8f5a37; }
.coconsem-toc--style2 .coconsem-toc__item--h3 a { color: #a16d4a; }
.coconsem-toc--style2 .coconsem-toc__item--h4 a { color: #b68a65; }
.coconsem-toc--style2 .coconsem-toc__item--h5 a { color: #c9a27f; }

/* Mobile : même logique que style1 */
@media (max-width: 991px) {
  .sco-author-toc-wrap .coconsem-toc.coconsem-toc--style2 {
    margin-top: 16px;
  }
}

/* Quand la TOC est repliée, on masque le contenu interne */
.coconsem-toc--collapsed .coconsem-toc__inner {
  display: none;
}

/* 1.4.2 - TOC above .content-single-page */
.content-single-page > .coconsem-toc {
  margin: 0 !important;
}
main > .coconsem-toc,
body > .coconsem-toc {
  margin: 24px auto 28px !important;
}