/* ====== Tokens ====== */
:root{
  --font-body: "Roboto", Helvetica, Arial, sans-serif;
  --text:#222; 
  --muted:#666; 
  --heading:#603e1b;

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

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


/* Plugin SOMMAIRE LuckyWp */

.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 5px !important;
        font-size: 1em !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;
}

@media (max-width: 600px) {
	.lwptoc_item a {
		padding-left: 0.8em !important;
		display: block;          /* requis pour text-overflow */
		max-inline-size: 100%;
		white-space: nowrap;     /* pas de retour à la ligne */
		overflow: hidden;        /* masque l’excédent */
		text-overflow: ellipsis; /* … à la fin */
	}
}

.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{
		margin-left:-10px !important;
	}
	.lwptoc_item a::before {
		content: "•" !important;
		margin-left:-1px !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;
}


/* 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: 'Roboto', Helvetica, Arial, sans-serif !important;   
  line-height: inherit !important;
}

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;
}

body header.coconsem-header {
  margin: 0;
}
@media (max-width: 991px) {
	body header.coconsem-header {
	  margin: -20px 0 29px !important;
	}
}
header.coconsem-header h1 {
    text-align: center !important;
    margin: 2rem auto !important;
    font-size: 30px !important;
    font-weight: 600 !important;
    color: #7F7979 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    line-height: 1.3em !important;
    padding-top: 20px !important;
    padding-bottom: 0.5rem !important;
}

/* Fix alignement cover Saint Cyr Optique */
header.coconsem-header .cover-image {
    display: block !important;
    width: 100% !important;       /* plus de 100vw */
    max-width: 100% !important;
    height: auto !important;
    max-height: 440px !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 auto !important;
    min-width: 0 !important;      /* annule le 426px qui force le débordement */
}

/* Optionnel : comportement spécifique mobile */
@media (max-width: 991px) {
    header.coconsem-header .cover-image {
               min-height: 260px;
    }
}

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: #9B8A78 !important;
  color: white !important;
}

@media (max-width: 991px) {
	header.coconsem-header .coconsem-hook-container {	 
	  padding: 1px 20px 27px !important;
	 
	}
	header.coconsem-header .coconsem-hook-container p {
		/* text-align: justify !important;*/
	}
}

header.coconsem-header .hook {
  max-width: 900px !important;
  margin: 30px auto !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: white !important;
  text-align: left !important;
  clear: both !important;
  line-height: 1.65em !important;
  text-align: center !important;
}

.coconsem-meta-box .coconsem-auteur{
	
}
@media (max-width: 600px) {
	.coconsem-meta-box .coconsem-auteur{
		display:block !important;
		max-width:190px !important;
		margin: 0 auto !important;
		font-size:14px !important;
	}
	.coconsem-meta-box strong{
		font-size:20px !important;
	}
}
.coconsem-temps-lecture{
        font-size: 15px;
    font-weight: 500;
    padding: 11px 0 0;
}
header.coconsem-header .arrow-bounce {
  width: 100px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -28px auto 0;
  cursor: pointer;
  animation: fadeBounce 2.5s ease-in-out infinite;
  transition: background-color 0.3s ease;
}

header.coconsem-header .chevron-svg {
  width: 60px;
  height: 60px;
  stroke: white;
  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 5px !important;
		
	}
	.brz .brz-section__content>.brz-container {
		max-width: max-content !important
	}
}

/* Paragraphes & petites notes */
.prose p{margin:0 0 1em; text-align:left; letter-spacing:0}
.prose small{display:block; margin-top:12px !important; color:#66666680 !important; font-size:.85em !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
}
body.coconsem  article.prose h2 {
  font-size: clamp(1.5rem, 2.2vw + .8rem, 2rem) !important; 
  margin: 2em 0px 1em!important; 
  color: var(--brand) !important;        /* ✅ rouge unifié */
  font-weight: 700!important; 
  line-height: 1.25!important; 
  font-family: 'Raleway' !important;
}
body.coconsem article.prose h3 ,
body.coconsem article.prose h3 span{
  font-size: 1.4rem!important;        
  margin: 1.6em 0 .2em!important;
  font-weight: 800!important;         
  color: var(--text)!important;         
  line-height: 1.4!important; 
  font-family: 'Raleway' !important;
}
@media (max-width:600px){
	body.coconsem article.prose h3 ,
	body.coconsem article.prose h3 span{
			line-height: 1.2!important; 
			  margin: 1.6em 0 .6em!important;
	}
}
body.coconsem  article.prose h4,
.brz  article.prose 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;
}
body.coconsem  article.prose :where(h2,h3,h4)+p{margin-top:.2em} /* micro-rythme */

/* On force la position des puces en dehors : ça débloque l’alignement */
.coconsem-toc__list.coconsem-toc__list--bullets {
    list-style-position: outside !important;
    padding-left: 1.4rem;
}

/* Style des items H3 */
.coconsem-toc__item.coconsem-toc__item--h3 {
    display: list-item;
    padding-left: 0;
    margin-left: 0;
    line-height: 1.25;
}

/* Alignement vertical TOP du texte par rapport à la puce */
.coconsem-toc__item.coconsem-toc__item--h3 > a {
    display: inline-block;
    vertical-align: top;
    margin-top: 2px;   /* Ajuste : -2 / -3 / -4 selon ton rendu */
}

/* Images */
body.coconsem  article.prose img{
  display:block; 
  max-width:100%; 
  height:auto; 
  border-radius:var(--radius); 
  box-shadow:var(--shadow); 
  margin:2.2em 0 0px !important;
  min-height: 320px;
  object-fit: cover;
}
.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;
  font-size: 15px
}
.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), #00aa88);
  background:#7d9872;
  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: 400;
  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: 400 !important;
    text-decoration: none;
    font-size: 15px;
}
.prose .ressource a:hover { text-decoration: underline; }

/* Bloc FAQ */

ol li {
	font-size:15px !important;
	    margin: 0 0 21px 0px;

}

/* Vidéo “click-to-play” */
.prose .video-embed{
	margin: 4em auto !important;
    font-size: 0.7em;
    width: 100%;
    max-width: 700px;
	
	}
.prose .video-embed p{     
    font-size: 14px !important;
    text-align: center;
    max-width: 80%;
    margin: 0 auto;
    opacity: 0.7;
}
.prose .video-embed .video-thumbnail{
  position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow); cursor:pointer; margin-bottom: 8px;
}
.prose .video-embed .video-thumbnail img{width:100%; height:100%; object-fit:cover; margin:0; box-shadow:none; border-radius:0}
.prose .video-embed .play-button{
  position:absolute; inset:0; margin:auto; width:74px; height:74px; border:0; border-radius:50%;
  background:rgba(0,0,0,.5); backdrop-filter:saturate(120%) blur(2px); cursor:pointer;
}
.prose .video-embed .play-button::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-40%,-50%);
  border-left:18px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent; width:0; height:0;
}
.prose .video-embed caption,
.prose .video-embed figcaption{display:block; font-size:.95em; color:var(--muted); margin-top:.5em}

/* ====== 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: 15px;
  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; }

body .prose strong.highlight{font-weight:800; color:#452c1b}

/* Liens sobres */
/* ===== Liens internes (visibilité améliorée) ===== */
.prose a {
  color: #9B8A78 !important;                         /* bleu lisible mais pas flashy */
  font-weight: 800 !important;  
  text-decoration: none;
  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;     font-size: 15px;}

body.coconsem  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  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:400 !important; background-color:none!important}
.prose a:not(.sources-bibliotheque a)::after {
  content: " (🔗️)";
  font-weight: bold !important;
  color: inherit;
}

@media (max-width:600px){
  .prose .sources-bibliotheque li{
	  margin: 0 0 .5em -19px !important;
  }
}


/* 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  article.prose p strong,
body.coconsem  article.prose p strong.quote,
body.coconsem  article.prose li strong.quote,
body.coconsem  article.prose td strong.quote,
body.coconsem  article.prose strong.quote {
  font-weight:800 !important;          /* plus fiable que 'bold' */
  font-size: inherit  !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" 500;
}
body.coconsem   article.prose u{
	    text-decoration: underline !important;
    font-size: inherit !important;
    font-weight: bold !important;
	 font-family:arial !important;
}
.prose p {
  font-size: 1.05rem !important; /* ≈ 20px si la base est 16px */
  line-height: 1.7;              /* garde ton interligne actuel */
}
/* Renfort gras pour les liens dans les paragraphes */
.brz  article.prose p a {
  font-family: Arial, sans-serif !important;
}
/* LES IMAGES */

/* + espace au-dessus des images dans l’article */
.brz  article.prose picture,
.brz  article.prose img {
  display: block;
  margin-top: 2rem !important;      /* ↑ augmente ici */
  margin-bottom: -0.7rem !important;
}

/* EXCEPTIONS */
/* 1) Blocs vidéo : ne pas toucher aux vignettes */
.brz  article.prose .video-embed .video-thumbnail picture,
.brz  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
}

/* ===== Comparatif Opticiens – Styles externes ===== */
/* Namespace commun */
.compare-opticiens{
  --c1:#0ea5e9; /* bleu des jauges */
  --ok:#16a34a;
  --mid:#f59e0b;
  --low:#ef4444;
  font:16px/1.5 system-ui, Segoe UI, Roboto, Arial, sans-serif;
}

/* Titres de section */
.compare-opticiens h3{
  margin:.5rem 0 1rem;
  font-size:1.25rem;
}

/* Tables (classement & détails) */
.compare-opticiens table{
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
}
.compare-opticiens th,
.compare-opticiens td{
  padding:.65rem .75rem;
  border-bottom:1px solid #e5e7eb;
  text-align:left;
  vertical-align:middle;
}
.compare-opticiens thead th{
  background:#f8fafc;
  font-weight:600;
}

/* Badges, numérotation & formats numériques */
.compare-opticiens .badge{
  display:inline-block;
  padding:.15rem .5rem;
  border-radius:999px;
  font-size:.8125rem;
  background:#eff6ff;
  color:#1e40af;
}
.compare-opticiens .lead{font-weight:600;}
.compare-opticiens .rank,
.compare-opticiens .note{
  font-variant-numeric:tabular-nums;
  color:#334155;
}

/* Responsive : masque certaines colonnes sur petits écrans */
@media (max-width:720px){
  .compare-opticiens .hide-sm{display:none;}
}

/* Encadré d’intro (formulation marketing) */
.compare-opticiens .callout{
  margin:.75rem 0;
  padding:.75rem 1rem;
  border:1px solid #e5e7eb;
  border-radius:.75rem;
  background:#f8fafc;
}

/* ===== Jauges (barres bleues) – tableau Détails par critère ===== */
.crit-bars .score{
  min-width:3.5rem;
  display:inline-block;
  font-variant-numeric:tabular-nums;
}
.crit-bars .bar{
  position:relative;
  height:10px;
  background:#f1f5f9;
  border-radius:999px;
  overflow:hidden;
  /* Espace entre la note et la barre si nécessaire : */
  margin-top:.25rem;
}
.crit-bars .bar > span{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:var(--w,0%);   /* injecté inline via style="--w:67.4%" */
  background:var(--c1);
}

/* Optionnel : léger mode sombre auto */
@media (prefers-color-scheme: dark){
  .compare-opticiens thead th{background:#0b1220;}
  .compare-opticiens th,
  .compare-opticiens td{border-bottom-color:#1f2937;}
  .compare-opticiens .callout{background:#0b1220;border-color:#1f2937;}
  .crit-bars .bar{background:#0f172a;}
}

/* Fix jauges bleues */
.crit-bars .bar{position:relative;height:10px;background:#f1f5f9;border-radius:999px;overflow:hidden;margin-top:.25rem}
.crit-bars .bar > span{
  position:absolute;
  left:0; top:0; bottom:0;        /* <- remplace inset:0 */
  width:var(--w,0%);              /* largeur injectée inline */
  background:var(--c1,#0ea5e9);   /* bleu */
}
.crit-bars .score{min-width:3.5rem;display:inline-block;font-variant-numeric:tabular-nums}