/* ====== Tokens ====== */
:root{
  --font-body: "Roboto", Helvetica, Arial, sans-serif;
  --text:#474647;
  --text-headings:rgb(122, 20, 23);  
  --muted:#666; 
  --heading:black;
  --highlighted:rgb(153, 51, 0);
  --font-size-p: 15px;

  --brand:brown;     /* marron foncé  → titres H2 + accents */
  --cta:#ff9603;       /* vert foncé → CTA */
  --neutral:#f9f7f5;   /* neutre doux beige/gris → fonds de blocs */
  --borders:#C1272D;   /* rouge vermillon vif*/
  --backgroundhook: darkslategray;
  
  --measure:68ch; 
  --radius:10px; 
  --shadow:0 4px 16px rgba(0,0,0,.08);
}

/* ====== Conteneur lecture ====== */
/* Conteneur lecture — scoping Brizy avec exclusions */


/* Plugin SOMMAIRE LuckyWp */

.site-header{
	background-color:inherit
}

.lwptoc {
    background-color: #f7f7f7 !important;
    border-left: 4px solid darkred !important;
    padding: 15px 20px !important;
    margin: 30px auto !important;
    border-radius: 6px !important;
    font-size: 17px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    max-width: 720px !important;
}

@media (max-width: 768px) {
    .lwptoc {
        max-width: 580px !important;
        font-size: 14px !important; 
    }
}
@media (max-width: 600px) {
    .lwptoc {
        max-width: 480px !important;
        font-size: 14px !important;
        padding: 15px 25px !important;
    }
}

.lwptoc_title {
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    font-size: 17px !important;
    text-transform: none !important;
}

/* Liste sans style par défaut */
.lwptoc_itemWrap {
    list-style: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.lwptoc_item {
    margin-bottom: 0!important;
}

/* ✅ Style du lien TOC */
.lwptoc_item a {
    display: block !important;
    color: #9B8A78 !important;
    text-decoration: none !important;
    padding-left: 1.4em !important;
    position: relative !important;
    transition: color 0.2s !important;
}



/* ✅ Hover couleur */
.lwptoc_item a:hover {
    color: #e8703a !important;
}

/* ✅ Disque manuel */
.lwptoc_item a {

    display: block !important;
    color: #9B8A78 !important;
    text-decoration: none !important;
    padding-left: 1.4em !important;
    position: relative !important;
    transition: color 0.2s !important;
}

.lwptoc_item a::before {
    content: "•" !important;
    color: #9B8A78 !important;
    position: absolute !important;
    left: 0;
    top: 0.1em;
    font-size: 1.1em;
    line-height: 1;
}
@media (max-width: 600px) {
	.lwptoc_item a::before {
		content: "•" !important;
		margin-left:-6px !important;
		padding-right:6px !important
	}
}

/* Toggle cacher/afficher */
.lwptoc_toggle {
    font-size: 13px !important;
    margin-left: 8px !important;
    color: #888 !important;
    font-style: italic !important;
}

body{
	background-color:white !important
}

/* Empêche que le header et sommaire LuckyWP soient affectés */
body.coconsem *:not(header.brz-section__header):not(header.brz-section__header *) {
  font-family:'open sans',Helvetica,Arial,sans-serif !important;
  line-height: inherit !important;
}
body.coconsem .brz-wp-post-content article.prose p strong{
	    font-weight: 500 !important;
    font-family: "Roboto" !important;
    font-size: 17px;
}
header.brz-section__header .brz-container{
	background-color : #6e6255 !important
}


.brz-root__container-page{
	

}
.coconsem-hook-container .hook,
header.coconsem-header .brz-container,
h1 {
  max-width: 900px !important;
  margin: 0 auto;
  padding: 0 1rem;
}

header.coconsem-header {
  margin: 0 0 0 0;
}
header.coconsem-header h1 {
    text-align: left !important;
    margin: 1rem auto !important;
    font-size: 25px !important;
    font-weight: 600 !important;
    color: #222222 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding-top: 20px !important;
    padding-bottom: 0.5rem !important;
}

header.coconsem-header .cover-image,
 header.coconsem-header .cover-image img{
  display: block !important;
  width: 100vw !important;
  max-width: 100% !important;
  max-height: 280px !important;
  height: auto !important;
  min-height: 150px !important;
  min-width: 426px !important;
  object-fit: cover !important;
  object-position: center !important;
  left: 0 !important;
  margin: 0 auto !important;
}

header.coconsem-header .coconsem-hook-container {
  position: relative !important;
  width: 100% !important;
  clear: both !important;
  margin: 0 auto !important;
  padding: 1px 50px 27px !important;
  background-color: var(--backgroundhook) !important;
  
}

header.coconsem-header .hook {
  font-family:'open sans',Helvetica,Arial,sans-serif !important;
  max-width: 900px !important;
  margin: 30px auto !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  color: dimgray!important;
  text-align: center !important;
  clear: both !important;
  line-height: 1.65em !important;
  color: white !important;
}

header.coconsem-header .arrow-bounce {
  width: 100px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -8px auto 0;
  cursor: pointer;
  animation: fadeBounce 2.5s ease-in-out infinite;
  transition: background-color 0.3s ease;
}
.category-coconsemantique{
	max-width: 1200px !important;
    margin: auto;
}

header.coconsem-header .chevron-svg {
  width: 60px;
  height: 60px;
  stroke: coral;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes fadeBounce {
  0%   { transform: translateY(0); opacity: 0; }
  20%  { opacity: 1; }
  50%  { transform: translateY(10px); opacity: 0.8; }
  80%  { opacity: 0; transform: translateY(15px); }
  100% { transform: translateY(0); opacity: 0; }
}



/* ====== Conteneur lecture ====== */
.prose{
  /*max-width:var(--measure);*/
  margin-inline:auto;
  padding:0 1rem 3rem;
  font: clamp(1rem, .25vw + .95rem, 1.125rem)/1.7 var(--font-body);
  color:var(--text);
  -webkit-font-smoothing:antialiased; 
  text-rendering:optimizeLegibility;
}
@media (max-width: 767px) {
	.prose{
		padding: 0 20px !important;
		
	}
	.brz .brz-section__content>.brz-container {
		max-width: max-content !important
	}
}
.inside-article{
	padding: 0 40px !important;
}

.coconsem-temps-lecture{
        font-size: 15px !important;
    font-weight: 500 !important;
    padding: 11px 0 0 !important;
}



/* Titres fluides et respirations */
.prose :where(h1,h2,h3,h4){
  color:var(--heading); 
  font-weight:700; 
  line-height:1.2; 
  letter-spacing:-.01em; 
  margin:0;
}
.prose h1{
  font-size:clamp(2rem,3.5vw + 1rem,3rem); 
  margin:0 0 .6em; 
  color:#7F7979
}
 article.prose .heading-flex h2 {
      font-size: 28px !important;
  margin: 2em 0px 1em!important; 
  color: var(--brand) !important;        /* ✅ rouge unifié */
  font-weight: 700!important; 
  line-height: 1.25!important; 
  font-family: 'trebuchet ms',Helvetica,Arial,sans-serif !important;
     text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600 !important;
}
 article.prose .heading-flex h3 ,
 article.prose .heading-flex h3 span{
  font-size: 19px !important;        
  margin: 1.6em 0 .2em!important;
  font-weight: 800!important;         
  color: var(--text-headings)!important;         
  line-height: 1.4!important; 
  
  letter-spacing: normal;
    font-family: "Trebuchet MS" !important;
    line-height: 22px !important;
    padding: 19px 0;
}
 article.prose .heading-flex h4,
 article.prose .heading-flex h4 span{
  font-size:clamp(1.125rem,.6vw + .95rem,1.25rem)!important;  
  margin:1.6em 0 .3em!important; 
  font-weight:600!important; 
  font-family:arial !important;
}
.prose :where(h2,h3,h4)+p{margin-top:.2em} /* micro-rythme */


/* Images */
.prose img{
  display:block; 
  max-width:100%; 
  height:auto; 
  border-radius:var(--radius); 
  box-shadow:var(--shadow); 
  margin:1.2em 0 0.5em
}
.prose img.cover-img{max-height:520px; object-fit:cover}



/* Listes */
.prose ul {
  margin: 1.8em 0;
  padding: 1em 1.2em 1em 1.6em;
  list-style: none;
  background: var(--neutral);           /* ✅ neutre */
  border-left: 4px solid var(--borders);  /* accent rouge */
  border-radius: 6px;
}
.prose ul li {
  position: relative;
  margin: 0.6em 0;
  padding-left: 1.2em;
  line-height: 1.6;
  font-weight: 400;
  color: #333;
}
.prose ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0.15em;
  font-size: 1.1em;
  line-height: 1;
  color: var(--brand);
  font-weight: 700;
}


/* Boutons d’action (CTA) */
.prose .cta-btn{
  display:inline-block; 
  margin:1rem 0;
  background:linear-gradient(135deg,var(--cta), darkorange);
  background:#ff9603;
  color:#fff !important;
  text-decoration:none; 
  font-weight:600;
  padding:1rem 1.4rem; 
  border-radius:12px; 
  line-height:1.3; 
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  transition:transform .2s, box-shadow .2s, background .2s;
}
.prose .cta-btn:hover{
  transform:translateY(-3px); 
 color:#fff !important;
  box-shadow:0 6px 18px rgba(0,0,0,.15)
}

/* Bloc Ressource */
.prose .ressource {
  background: var(--neutral);       
  border: 1px solid #e2dfdb;        
  border-radius: 10px;
  margin: 3em 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  color: var(--text);
}
.prose .ressource::before {
  content: "💡 Ressource utile";
  display: block;
  background: var(--brand);         
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  padding: 6px 12px;
}
.prose .ressource a {
  display: block;
    padding: 0em 1.2em;
    margin: 23px !important;
  color: var(--brand);              
  font-weight: 600;
  text-decoration: none;
}
.prose .ressource a:hover { text-decoration: underline; }





/* ====== Tableaux blog ====== */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 3em 0;
  font-size: 1rem;
  border: none;
}
.prose table thead th[colspan] {
    text-align: left;
    font-size: 1rem;
    color: #3b2a18;
    padding: 0 0 0.6em 0.6em;
    border: none;
    background: none;
    display: table-cell;
    width: 100% !important;
    white-space: normal;
    font-weight: normal !important;
    font-style: italic;
    opacity: 45%;
}
.prose table thead tr:first-child th[colspan] {
  text-align: left;
  font-weight: 600;
  font-size: 1.05rem;
  color: #3b2a18;
  padding: 0 0 0.6em 0.6em;
  border: none;
  background: none;
  display: table-cell;
  width: 100% !important;
  white-space: normal;
}
/* chevrons */
.prose table thead th[colspan]::after {
  content: " »";
  color: var(--brand);
  font-weight: 600;
  margin-left: 6px;
}
.prose table thead tr:not(:first-child) th {
  background: #f8f8f8;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1em 0.8em;
  color: #444;
  border-bottom: 2px solid #ccc;
  vertical-align: middle;
  text-align: left;
}
.prose tbody td {
  padding: 0.9em 0.8em;
  border-bottom: 1px solid #eee;
  font-size: 1rem;
  color: #222;
  vertical-align: top;
  text-align: left;
}
.prose tbody tr:nth-child(odd) { background: #fafafa; }
.prose tbody tr:nth-child(even){ background: #fff; }
.prose tbody tr:last-child td { border-bottom: none; }
.prose table tbody strong,
.prose table tbody b {
 
  color: inherit !important;
}

/* Accents typographiques */

/* Empêche tes resets de listes/tableaux de dégrader .quote */
.prose ul li :where(strong, b):not(.quote) {
  font-weight: 400 !important;
  color: inherit !important;
}
.prose table tbody :where(strong, b):not(.quote) {
  font-weight: 500 !important;
  color: inherit !important;
}
.prose strong.quote::before,
.prose strong.quote::after { content: none !important; }


/* Liens sobres */
/* ===== Liens internes (visibilité améliorée) ===== */
.prose a {
  color: #9B8A78 !important;                         /* bleu lisible mais pas flashy */
  font-weight: 800 !important;  
  text-decoration: underline;
  text-decoration-thickness: 1px;         /* trait plus fin */
  text-underline-offset: 2px;             /* légèrement rapproché */
  transition: color 0.2s ease, background 0.2s ease;
  margin: 38px 0 25px !important
}

.prose a:hover {
  color: #e8703a !important;                        /* un peu plus sombre au hover */
  text-decoration: underline !important
}
/* hover : souligné */
article.prose a:hover {
  --brz-paragraphtextdecoration: underline;
  color: #e8703a !important;
}
/* Variante : si tu veux ajouter un chevron à la fin des liens */
/* Sources / bibliographie */
.prose .sources-bibliotheque {margin-top:3em; background:none !important}

body.coconsem .brz-wp-post-content article.prose .sources-bibliotheque ul{list-style:none;     padding: 25px !important; margin:5px 0 0 0 !important; border-left:none!important}
.prose .sources-bibliotheque li{margin:0 0 .5em 10px; color:var(--heading)}
.prose .sources-bibliotheque ul li::before{    
    left: 3px !important;
    top: 0.30em !important;
    font-size: 1.1em !important;
}
body.coconsem .brz-wp-post-content article.prose .sources-bibliotheque div{
	    color: black;
    font-weight: 300 !important;
    font-family: 'Raleway' !important;
    font-style: italic;
    margin-bottom: 16px;
	
}
.prose .sources-bibliotheque a{font-weight:500; background-color:none!important}
.prose a:not(.sources-bibliotheque a)::after {
  content: " (🔗️)";
  font-weight: bold !important;
  color: inherit;
}
/* Supprimer l'icône sur les liens qui ne contiennent qu'une image/picture */
.prose a:has(img)::after,
.prose a:has(picture)::after {
  content: none !important;
}

/* Force le gras des .quote dans le contenu Brizy */
body.coconsem .brz-wp-post-content article.prose p strong.quote,
body.coconsem .brz-wp-post-content article.prose li strong.quote,
body.coconsem .brz-wp-post-content article.prose td strong.quote,
body.coconsem .brz-wp-post-content article.prose strong.quote {
  font-weight: 700 !important;          /* plus fiable que 'bold' */
  font-size: 1.05rem !important;
  color: #000 !important;
  font-synthesis-weight: auto !important; /* autorise le gras synthétique si 700 pas chargé */
  /* Si Roboto variable est utilisé, active l’axe de poids : */
  font-variation-settings: "wght" 700;
}

.prose p {
  font-size: 15px !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    font-family: 'open sans', Helvetica, Arial, sans-serif !important;
    text-align: justify !important;
    color:  var(--text) !important;
}



/* Renfort gras pour les liens dans les paragraphes */
.brz .brz-wp-post-content article.prose p a {
  font-family: Arial, sans-serif !important;
  font-weight: bold !important;
}
/* LES IMAGES */

/* + espace au-dessus des images dans l’article */
.brz .brz-wp-post-content article.prose picture,
.brz .brz-wp-post-content article.prose img {
  display: block;
  margin-top: 2rem !important;      /* ↑ augmente ici */
  margin-bottom: -0.7rem !important;
}
.brz .brz-wp-post-content article.prose p>img {
   display: block;
    margin-top:3em !important;
    margin-bottom: 0em !important;
    color: #66666680 !important;
    font-size: .85em !important;
    text-indent: 10px;
    max-width: 600px !important;
}
/* Paragraphes & petites notes */
.prose p{margin:0 0 1em; text-align:left; letter-spacing:0}
.prose small{    
display: block;
    margin-top: -1.2em;
    margin-bottom: 3em !important;
    color: #66666680 !important;
    font-size: .85em !important;
	}

.brz .brz-wp-post-content article.prose button.cs-soft-cta-btn,
.brz .brz-wp-post-content article.prose button.cs-soft-cta-btn code{
	color: white !important;
    height: 50px;
    margin: 20px 0;
}
.brz .brz-wp-post-content article.prose button br{
	display:none;
}

/* EXCEPTIONS */
/* 1) Blocs vidéo : ne pas toucher aux vignettes */
.brz .brz-wp-post-content article.prose .video-embed .video-thumbnail picture,
.brz .brz-wp-post-content article.prose .video-embed .video-thumbnail img {
  margin: 0 !important;
}

/* 2) Image de couverture du header : ne pas toucher */
header.coconsem-header img.cover-image,
header.coconsem-header picture .cover-image {
  margin: 0 !important;
}


/* Accessibilité motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}

/* META BOX */

/* CSS temps lecture estimé */
.coconsem-meta-box{
    margin: 20px auto 10px!important;
    font-size: 19px!important;
    color: #555!important;
    text-align: center!important;
}
body.coconsem *:not(header.brz-section__header):not(header.brz-section__header *) .coconsem-temps-lecture img{
	margin:0 !important
}

.prose p strong.highlight{
	font-weight:800 !important;
	color:var(--text) !important;
	font-size: var(--font-size-p);
}