/* ==========================================================================
   Le Campeur du Dimanche — campeur.css (feuille unique, P-006)
   Une nuit et des bandes de jour. Convention : préfixe cdd- + mot métier.
   Palette DA §3 — deux interdits mesurés :
   · --gaz jamais en texte sur fond nuit (2,87:1) — aplat seulement
   · --lampe jamais en texte sur bande claire (1,53:1) — aplat seulement
   ========================================================================== */

/* ---------- Polices auto-hébergées (P-086) ---------- */
@font-face{font-family:"Zilla Slab";src:url("../fonts/ZillaSlab-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Zilla Slab";src:url("../fonts/ZillaSlab-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Zilla Slab";src:url("../fonts/ZillaSlab-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Alegreya Sans";src:url("../fonts/AlegreyaSans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Alegreya Sans";src:url("../fonts/AlegreyaSans-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Alegreya Sans";src:url("../fonts/AlegreyaSans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}

/* ---------- Jetons (P-110 : paires de contraste posées pour la nuit ET le jour) ---------- */
:root{
	--nuit:#1A1622; --surface:#262031; --lumiere:#EFE7DC;
	--brume:#8C8399; --brume-jour:#5C5468;
	--gaz:#D23A2C; --gaz-fonce:#B12E22;
	--lampe:#F2B33D; --lichen:#5FA37A; --lichen-jour:#2F6B49;
	--filet:#3A3348; --filet-jour:#D8CDBC;
	/* Paires sombres (défaut) : texte sur fond */
	--cdd-fond:var(--nuit); --cdd-texte:var(--lumiere); --cdd-texte-2:var(--brume);
	/* Paires claires (bandes de jour) */
	--cdd-jour-fond:var(--lumiere); --cdd-jour-texte:var(--nuit); --cdd-jour-texte-2:var(--brume-jour);
	/* Conteneur de lecture longue : nuit par défaut */
	--cdd-lecture-fond:var(--nuit); --cdd-lecture-texte:var(--lumiere);
	--cdd-lecture-2:var(--brume); --cdd-lecture-filet:var(--filet); --cdd-lecture-pos:var(--lichen);
	--police-titre:"Zilla Slab","Rockwell","Roboto Slab",Georgia,serif;
	--police-corps:"Alegreya Sans","Trebuchet MS","Segoe UI",system-ui,sans-serif;
}
/* Pas deux thèmes : en clair, on augmente la part de jour (la lecture longue passe en bande claire). */
@media (prefers-color-scheme: light){
	:root{
		--cdd-lecture-fond:var(--lumiere); --cdd-lecture-texte:var(--nuit);
		--cdd-lecture-2:var(--brume-jour); --cdd-lecture-filet:var(--filet-jour); --cdd-lecture-pos:var(--lichen-jour);
	}
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body.cdd-corps{
	margin:0;overflow-x:clip; background:var(--cdd-fond); color:var(--cdd-texte);
	font-family:var(--police-corps); font-size:17px; line-height:1.6;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--police-titre);margin:0 0 16px;}
h1{font-size:29px;line-height:1.1;font-weight:700;}
h2{font-size:24px;line-height:1.18;font-weight:600;margin-bottom:32px;}
h3{font-size:20px;line-height:1.28;font-weight:600;}
p{margin:0 0 16px;}
:focus-visible{outline:3px solid var(--lampe);outline-offset:2px;}
.cdd-bande-lumiere :focus-visible,.cdd-bande-lecture :focus-visible{outline-color:var(--gaz);}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important;}}
.cdd-cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.cdd-evite{position:absolute;left:-9999px;top:0;background:var(--lampe);color:var(--nuit);padding:12px 20px;font-family:var(--police-titre);z-index:99;}
.cdd-evite:focus{left:0;}
.cdd-gabarit{max-width:1200px;margin:0 auto;padding:0 16px;}
@media (min-width:900px){
	body.cdd-corps{font-size:18px;line-height:1.62;}
	h1{font-size:42px;line-height:1.08;}
	h2{font-size:30px;line-height:1.15;}
	h3{font-size:22px;line-height:1.25;}
	.cdd-gabarit{padding:0 32px;}
}
.cdd-display{font-size:34px;line-height:1.05;letter-spacing:-0.01em;font-weight:700;}
@media (min-width:900px){.cdd-display{font-size:56px;line-height:1.02;}}
.cdd-etiquette{
	font-family:var(--police-titre);font-weight:600;font-size:13px;line-height:1.4;
	text-transform:uppercase;letter-spacing:.08em;color:var(--cdd-texte-2);margin:0 0 12px;
}
.cdd-etiquette a{color:inherit;}
.cdd-chiffre{font-family:var(--police-titre);font-weight:600;font-variant-numeric:tabular-nums lining-nums;}

/* ---------- En-tête : bandeau nuit une-ligne à lampes témoins ---------- */
.cdd-entete{background:var(--nuit);border-bottom:1px solid var(--filet);}
.cdd-entete-ligne{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px;}
.cdd-marque{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--lumiere);}
.cdd-marque-mots{font-family:var(--police-titre);font-weight:700;font-size:20px;line-height:1;white-space:nowrap;}
.cdd-marque-dim{font-weight:400;font-style:italic;font-family:var(--police-corps);color:var(--brume);}
.cdd-logo{flex:0 0 auto;}
.cdd-nav{display:none;}
@media (min-width:900px){
	.cdd-nav{display:block;}
	.cdd-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:8px;}
	.cdd-nav li{margin:0;}
	.cdd-nav a{
		position:relative;display:inline-block;padding:20px 14px 18px;text-decoration:none;
		font-family:var(--police-titre);font-weight:600;font-size:16px;color:var(--lumiere);
	}
	.cdd-nav a:hover{color:var(--lampe);}
	.cdd-nav a::before{ /* la lampe témoin */
		content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);
		width:4px;height:4px;background:transparent;
	}
	.cdd-nav .current-menu-item a::before,.cdd-nav a[aria-current="page"]::before{background:var(--lampe);box-shadow:0 0 6px 1px rgba(242,179,61,.7);}
	.cdd-nav .current-menu-item a{color:var(--lampe);}
}

/* ---------- Barre basse mobile : 5 entrées, la 3e est le CTA rouge surélevé ---------- */
.cdd-barre{
	position:fixed;left:0;right:0;bottom:0;z-index:50;
	display:flex;align-items:stretch;background:var(--surface);
	border-top:1px solid var(--filet);
	padding-bottom:env(safe-area-inset-bottom,0);
}
.cdd-barre-lien,.cdd-barre-cta{
	flex:1;display:flex;align-items:center;justify-content:center;text-align:center;
	min-height:56px;padding:6px 2px;text-decoration:none;
	font-family:var(--police-titre);font-weight:600;font-size:12.5px;line-height:1.15;color:var(--lumiere);
	position:relative;
}
.cdd-barre-lien.cdd-allume{color:var(--lampe);}
.cdd-barre-lien.cdd-allume::before{
	content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
	width:4px;height:4px;background:var(--lampe);box-shadow:0 0 6px 1px rgba(242,179,61,.7);
}
.cdd-barre-cta{
	flex:1.25;background:var(--gaz);color:#fff;margin-top:-8px;
	border:1px solid var(--gaz-fonce);font-size:13.5px;
	box-shadow:0 -4px 14px rgba(0,0,0,.45);
}
.cdd-barre-cta:hover{background:var(--gaz-fonce);}
body.cdd-corps{padding-bottom:72px;}
@media (min-width:900px){.cdd-barre{display:none;}body.cdd-corps{padding-bottom:0;}}

/* ---------- Bandes ---------- */
.cdd-bande{padding:64px 0;}
@media (min-width:900px){.cdd-bande{padding:96px 0;}}
.cdd-bande-nuit{background:var(--nuit);color:var(--lumiere);}
.cdd-bande-surface{background:var(--surface);color:var(--lumiere);}
.cdd-bande-lumiere{background:var(--lumiere);color:var(--nuit);}
.cdd-bande-lumiere .cdd-etiquette{color:var(--brume-jour);}
.cdd-bande-gaz{background:var(--gaz);color:#fff;}
.cdd-bande-lecture{background:var(--cdd-lecture-fond);color:var(--cdd-lecture-texte);}
.cdd-bande-titre{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.cdd-lien-suite{
	font-family:var(--police-titre);font-weight:600;font-size:15px;text-decoration:none;
	color:var(--lampe);border-bottom:2px solid var(--lampe);padding-bottom:2px;
}
.cdd-bande-lumiere .cdd-lien-suite{color:var(--gaz);border-color:var(--gaz);} /* interdit lampe-sur-clair */

/* ---------- La bande d'auvent (séparateur seulement, jamais en décor) ---------- */
.cdd-auvent{
	height:8px;
	background:repeating-linear-gradient(90deg,var(--lumiere) 0 7px,var(--gaz) 7px 14px);
}

/* ---------- Le halo de lampe : UN par écran ---------- */
.cdd-halo{position:relative;}
.cdd-halo::before{
	content:"";position:absolute;inset:0;pointer-events:none;
	background:radial-gradient(60% 50% at 22% 30%,rgba(242,179,61,.16),transparent 70%);
}
.cdd-halo>*{position:relative;}

/* ---------- Hero ---------- */
.cdd-hero{padding:48px 0 64px;}
.cdd-hero-grille{display:grid;gap:32px;grid-template-columns:1fr;}
.cdd-hero-sous{font-size:19px;line-height:1.45;color:var(--brume);max-width:56ch;margin-bottom:24px;}
.cdd-hero-photo{margin-top:8px;}
@media (min-width:900px){
	.cdd-hero{padding:64px 0 96px;}
	.cdd-hero-grille{grid-template-columns:7fr 5fr;grid-template-areas:"texte cote" "photo cote";align-items:start;column-gap:48px;}
	.cdd-hero-texte{grid-area:texte;}
	.cdd-hero-photo{grid-area:photo;}
	.cdd-weekend{grid-area:cote;}
	.cdd-hero-sous{font-size:21px;}
}

/* Colonne « Ce week-end » */
.cdd-weekend{border-top:1px solid var(--filet);padding-top:20px;}
@media (min-width:900px){.cdd-weekend{border-top:0;border-left:1px solid var(--filet);padding:4px 0 0 28px;}}
.cdd-weekend-item{
	display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:4px 12px;
	align-items:start;padding:14px 0;border-bottom:1px solid var(--filet);
	text-decoration:none;color:var(--lumiere);
}
.cdd-weekend-item:last-child{border-bottom:0;}
.cdd-weekend-item .cdd-pastille{grid-row:1 / span 2;align-self:center;}
.cdd-weekend-titre{font-family:var(--police-titre);font-weight:600;font-size:17px;line-height:1.3;}
.cdd-weekend-item:hover .cdd-weekend-titre{color:var(--lampe);}
.cdd-weekend-date{font-size:13px;color:var(--brume);}

/* ---------- Procédé 7 : la ligne « on ne va pas se mentir » ---------- */
.cdd-aveu{
	font-family:var(--police-corps);font-style:italic;font-size:19px;line-height:1.45;
	background:var(--lumiere);color:var(--nuit);
	border-left:3px solid var(--gaz);
	padding:12px 18px;margin:0 0 24px;max-width:62ch;
}
@media (min-width:900px){.cdd-aveu{font-size:21px;}}

/* ---------- Procédé 1 : la réglette du week-end ---------- */
.cdd-reglette{max-width:560px;margin:28px 0 8px;}
.cdd-reglette-barre{display:flex;height:28px;border:1px solid var(--brume);}
.cdd-reglette-seg{
	display:flex;align-items:center;justify-content:center;position:relative;
	font-family:var(--police-titre);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
}
.cdd-seg-route{background:var(--lumiere);}
.cdd-seg-jour{background:var(--lumiere);color:var(--brume-jour);}
.cdd-seg-nuit{background:var(--surface);color:var(--brume);border-left:1px solid var(--brume);border-right:1px solid var(--brume);}
.cdd-seg-nuit+.cdd-seg-nuit,.cdd-seg-jour+.cdd-seg-nuit{border-left:0;}
.cdd-reglette-point{
	position:absolute;right:-5px;top:50%;transform:translateY(-50%);z-index:2;
	width:10px;height:10px;background:var(--lampe);border-radius:50%;
	box-shadow:0 0 8px 2px rgba(242,179,61,.55);
}
.cdd-reglette-heures{
	display:flex;justify-content:space-between;margin-top:6px;
	font-family:var(--police-titre);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--brume);
}
.cdd-bande-lumiere .cdd-reglette-heures,.cdd-bande-lecture .cdd-reglette-heures{color:var(--cdd-lecture-2);}

/* ---------- Procédé 2 : la pastille en nuits (losange) ---------- */
.cdd-pastille{
	display:inline-flex;align-items:center;justify-content:center;
	width:26px;height:26px;transform:rotate(45deg);
	background:var(--lampe);flex:0 0 auto;
}
.cdd-pastille i{
	transform:rotate(-45deg);font-style:normal;text-align:center;
	font-family:var(--police-titre);font-weight:600;font-size:8px;line-height:1;
	letter-spacing:.02em;text-transform:uppercase;color:var(--nuit);
}
.cdd-pastille i b{display:block;font-size:12px;font-weight:700;}
.cdd-bande-lumiere .cdd-pastille{background:var(--gaz);}
.cdd-bande-lumiere .cdd-pastille i{color:#fff;}
.cdd-pastille-photo{position:absolute;left:14px;bottom:14px;width:34px;height:34px;box-shadow:0 2px 10px rgba(0,0,0,.5);}
.cdd-pastille-photo i{font-size:9px;}
.cdd-pastille-photo i b{font-size:14px;}

/* ---------- Procédé 4 : le cadre de pare-brise (le seul arrondi du site) ---------- */
.cdd-parebrise{margin:0;position:relative;}
.cdd-parebrise img{
	width:100%;border-radius:28px 0 0 0;
	border-left:10px solid var(--nuit);border-right:10px solid var(--nuit);
}
.cdd-parebrise-legende{font-size:15px;color:var(--brume);padding-top:8px;}

/* ---------- Procédé 5 : les cotes et la barre des 1,90 m ---------- */
.cdd-cotes{display:flex;flex-wrap:wrap;gap:0;align-items:stretch;margin:16px 0;}
.cdd-cote{
	display:flex;flex-direction:column;gap:2px;padding:10px 18px 8px;
	border-top:2px solid var(--lampe);position:relative;min-width:96px;
}
.cdd-cote small{
	font-family:var(--police-titre);font-weight:600;font-size:11px;letter-spacing:.08em;
	text-transform:uppercase;color:var(--brume);
}
.cdd-cote b{font-family:var(--police-titre);font-weight:600;font-size:22px;font-variant-numeric:tabular-nums lining-nums;}
.cdd-cote-barre{overflow:visible;}
.cdd-cote-barre::after{
	content:"";position:absolute;left:6%;right:6%;top:56%;height:3px;background:var(--gaz);
}
td.cdd-cote-barre{position:relative;}
.cdd-cotes-alerte{
	align-self:center;margin-left:12px;padding:6px 10px;background:var(--gaz);color:#fff;
	font-family:var(--police-titre);font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
}

/* ---------- Procédé 6 : le niveau de dimanche ---------- */
.cdd-niveau{display:inline-flex;align-items:center;gap:5px;}
.cdd-niveau i{width:12px;height:12px;border:1.5px solid var(--brume);background:transparent;display:inline-block;}
.cdd-niveau i.cdd-plein{background:var(--lampe);border-color:var(--lampe);}
.cdd-niveau-mot{
	margin-left:6px;font-family:var(--police-titre);font-weight:600;font-size:12px;
	letter-spacing:.06em;text-transform:uppercase;color:var(--brume);
}
.cdd-bande-lumiere .cdd-niveau i{border-color:var(--brume-jour);}
.cdd-bande-lumiere .cdd-niveau-mot{color:var(--brume-jour);}

/* ---------- Les tuiles de très gros chiffres ---------- */
.cdd-tuiles{display:grid;gap:24px;grid-template-columns:repeat(2,1fr);}
@media (min-width:900px){.cdd-tuiles{grid-template-columns:repeat(4,1fr);}}
.cdd-tuile b{
	display:block;font-family:var(--police-titre);font-weight:600;
	font-size:44px;line-height:1;font-variant-numeric:tabular-nums lining-nums;
	color:var(--lampe);margin-bottom:10px;
}
@media (min-width:900px){.cdd-tuile b{font-size:64px;}}
.cdd-tuile span{font-size:15px;line-height:1.5;color:var(--brume);display:block;max-width:24ch;}

/* ---------- Le comparateur ---------- */
.cdd-comparateur-cadre{overflow-x:auto;position:relative;margin-top:8px;-webkit-overflow-scrolling:touch;}
.cdd-comparateur{border-collapse:collapse;width:100%;min-width:760px;background:#FBF7F0;}
.cdd-comparateur th,.cdd-comparateur td{
	padding:14px 16px;text-align:left;border-bottom:1px solid var(--filet-jour);
	vertical-align:middle;font-size:16px;color:var(--nuit);
}
.cdd-comparateur thead th{
	font-family:var(--police-titre);font-weight:600;font-size:13px;letter-spacing:.08em;
	text-transform:uppercase;color:var(--brume-jour);border-bottom:2px solid var(--nuit);background:var(--lumiere);
}
.cdd-comparateur td.cdd-chiffre{font-size:18px;}
.cdd-comparateur-modele{
	position:sticky;left:0;background:var(--lumiere);z-index:1;
	/* ⛔ JAMAIS display:flex ici : un <th> en flex quitte le modele de tableau, sa colonne
	   cesse de participer au partage des largeurs (929 px de colonnes dans un tableau de
	   1136 = colonne fantome a droite) et la cellule ne remplit plus la hauteur de sa
	   ligne (barre vide sous chaque modele). Mesure du 25/08/2026. */
	display:table-cell;vertical-align:middle;min-width:190px;
	font-family:var(--police-titre);font-weight:600;font-size:17px;
	border-right:1px solid var(--filet-jour);
}
.cdd-comparateur .cdd-img-vignette{width:64px;height:auto;flex:0 0 auto;}
.cdd-comparateur-plus{color:var(--brume-jour);font-size:15px;}
.cdd-demander{padding:0!important;}
.cdd-demander a{
	display:flex;align-items:center;justify-content:center;
	min-height:64px;min-width:118px;padding:10px 18px;
	background:var(--gaz);color:#fff;text-decoration:none;
	font-family:var(--police-titre);font-weight:700;font-size:16px;
}
.cdd-demander a:hover{background:var(--gaz-fonce);}

/* ---------- Cartes (la veillée, spots) ---------- */
.cdd-veillee{display:grid;gap:24px;grid-template-columns:1fr;}
@media (min-width:640px){.cdd-veillee{grid-template-columns:repeat(2,1fr);}}
.cdd-carte{
	background:var(--surface);border:1px solid var(--filet);
	box-shadow:0 10px 24px rgba(0,0,0,.35);display:flex;flex-direction:column;
}
.cdd-carte-photo{display:block;position:relative;}
.cdd-carte-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;}
.cdd-carte-corps{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.cdd-carte-titre{font-size:20px;line-height:1.28;margin:0;}
.cdd-carte-titre a{color:var(--lumiere);text-decoration:none;}
.cdd-carte-titre a:hover{color:var(--lampe);}
.cdd-carte-extrait{font-size:15px;line-height:1.5;color:var(--brume);margin:0;}
.cdd-carte-date{font-size:13px;color:var(--brume);margin-top:auto;}
.cdd-spots{display:grid;gap:24px;grid-template-columns:1fr;}
@media (min-width:640px){.cdd-spots{grid-template-columns:repeat(3,1fr);}}
.cdd-carte-jour{background:#FBF7F0;border-color:var(--filet-jour);box-shadow:0 8px 20px rgba(26,22,34,.12);text-decoration:none;}
.cdd-carte-jour .cdd-carte-titre{color:var(--nuit);display:block;}
.cdd-carte-jour:hover .cdd-carte-titre{color:var(--gaz);}

/* ---------- La bande de capture (gaz) et le formulaire réseau ---------- */
.cdd-capture-grille{display:grid;gap:32px;grid-template-columns:1fr;align-items:center;}
@media (min-width:900px){.cdd-capture-grille{grid-template-columns:5fr 7fr;gap:48px;}}
.cdd-capture-pitch h2{color:#fff;}
.cdd-capture-pitch p{font-size:19px;line-height:1.5;color:#fff;max-width:44ch;}
.cdd-capture{background:var(--lumiere);padding:12px 20px 20px;}
/* Le formulaire mu-plugin, remis au registre du site : accent gaz, angles vifs, typos maison. */
body.cdd-corps .sblf{--sblf-a:#D23A2C;--sblf-b:#F7E5DE;}
.cdd-capture .sblf{--sblf-a:#D23A2C;--sblf-b:#F7E5DE;font-family:var(--police-corps);font-size:16px;color:var(--nuit);max-width:none;}
.cdd-capture .sblf h3{font-family:var(--police-titre);font-weight:600;}
.cdd-capture .sblf .sblf-c,.cdd-capture .sblf input[type=text],.cdd-capture .sblf input[type=email],
.cdd-capture .sblf input[type=tel],.cdd-capture .sblf textarea,.cdd-capture .sblf .sblf-b1,
.cdd-capture .sblf .sblf-rap,.cdd-capture .sblf-bar i{border-radius:0;}
.cdd-capture .sblf .sblf-b1{font-family:var(--police-titre);font-weight:700;}

/* ---------- CTA et boutons ---------- */
.cdd-bouton{
	display:inline-block;background:var(--gaz);color:#fff;text-decoration:none;
	font-family:var(--police-titre);font-weight:700;font-size:17px;
	padding:14px 26px;border:0;cursor:pointer;
}
.cdd-bouton:hover{background:var(--gaz-fonce);}
.cdd-cta-fil{
	margin:48px auto 0;max-width:68ch;background:var(--surface);
	border-left:3px solid var(--gaz);padding:24px 28px;
	display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
}
.cdd-bande-lecture .cdd-cta-fil{background:var(--surface);color:var(--lumiere);}
.cdd-cta-fil-texte{margin:0;font-size:17px;max-width:44ch;}

/* ---------- Lecture longue (68ch) ---------- */
.cdd-lecture{max-width:68ch;margin:0 auto;}
.cdd-lecture a{color:var(--cdd-lecture-pos);}
.cdd-lecture h2,.cdd-lecture h3{margin-top:40px;}
.cdd-lecture ul,.cdd-lecture ol{padding-left:24px;margin:0 0 16px;}
.cdd-lecture li{margin-bottom:6px;}
.cdd-lecture blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:3px solid var(--lampe);color:var(--cdd-lecture-2);}
.cdd-lecture img{margin:24px 0;}
.cdd-lecture .cdd-aveu{margin-left:0;}
.cdd-article-tete .cdd-parebrise{margin-top:24px;}
.cdd-article-tete .cdd-etiquette a{text-decoration:none;}

/* Voisins */
.cdd-voisins{max-width:68ch;margin:40px auto 0;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.cdd-voisin a{
	font-family:var(--police-titre);font-weight:600;font-size:16px;
	color:var(--cdd-lecture-texte);text-decoration:none;border-bottom:2px solid var(--lampe);
}
.cdd-voisin a:hover{color:var(--cdd-lecture-2);}

/* ---------- Archives, recherche, 404 ---------- */
.cdd-archive-tete{padding:48px 0;}
.cdd-archive-desc{color:var(--brume);max-width:62ch;}
.cdd-recherche{display:flex;gap:0;max-width:480px;margin-top:16px;}
.cdd-recherche input[type=search]{
	flex:1;min-width:0;padding:13px 16px;font:inherit;
	background:var(--lumiere);color:var(--nuit);border:1px solid var(--brume);border-right:0;
}
.cdd-pagination{margin-top:48px;}
.cdd-pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;}
.cdd-pagination .page-numbers{
	display:inline-block;min-width:44px;padding:10px 14px;text-align:center;text-decoration:none;
	font-family:var(--police-titre);font-weight:600;color:var(--lumiere);border:1px solid var(--filet);
}
.cdd-pagination .page-numbers.current{background:var(--lampe);color:var(--nuit);border-color:var(--lampe);}
.cdd-404{min-height:60vh;}
.cdd-404 .cdd-recherche{margin-top:32px;}
.cdd-vide{color:var(--brume);}

/* ---------- Pied de page nuit dense ---------- */
.cdd-pied{background:var(--nuit);color:var(--lumiere);border-top:1px solid var(--filet);padding:64px 0 24px;}
.cdd-pied-grille{display:grid;gap:40px 32px;grid-template-columns:1fr;}
@media (min-width:640px){.cdd-pied-grille{grid-template-columns:repeat(2,1fr);}}
@media (min-width:900px){.cdd-pied-grille{grid-template-columns:2fr 1fr 1fr 1fr;}}
.cdd-pied-nom{font-family:var(--police-titre);font-weight:700;font-size:20px;margin:12px 0 8px;}
.cdd-pied-texte{font-size:15px;line-height:1.5;color:var(--brume);max-width:38ch;}
.cdd-pied-bloc ul{list-style:none;margin:0;padding:0;}
.cdd-pied-bloc li{margin:0 0 10px;}
.cdd-pied-bloc a{color:var(--lumiere);text-decoration:none;font-size:15px;}
.cdd-pied-bloc a:hover{color:var(--lampe);text-decoration:underline;}
.cdd-pied-fin{margin-top:48px;padding-top:20px;border-top:1px solid var(--filet);}
.cdd-pied-fin p{font-size:13px;color:var(--brume);margin:0;}

/* ---------- Images ---------- */
.cdd-img{background:var(--surface);}
.cdd-img-hero{width:100%;aspect-ratio:21/9;object-fit:cover;}
.cdd-img-carte{width:100%;aspect-ratio:3/2;object-fit:cover;}
.cdd-signature{margin:48px 0 0;padding:20px 22px;background:var(--surface);border-left:3px solid var(--gaz);}
.cdd-signature-qui{font-family:var(--police-titre);font-weight:700;margin:0 0 8px;color:var(--lumiere);}
.cdd-signature-quoi{font-size:15px;line-height:1.55;color:var(--brume);margin:0 0 10px;}
.cdd-signature-lien{font-size:14px;margin:0;color:var(--brume);}
.cdd-signature-lien a{color:var(--lampe);}

/* ── Correctifs mobile du 2026-08-24, après le verdict design (P-254) ────────────
   Cause identifiée du débordement horizontal : les <table> des articles de droit
   et de prix ne se rétrécissent pas, ils poussent la page. Un tableau large doit
   défiler DANS son conteneur, jamais faire défiler la page. */
html,body{max-width:100%;overflow-x:hidden;}
.cdd-corps table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-collapse:collapse;font-size:15px;}
.cdd-corps table th,.cdd-corps table td{padding:8px 10px;border-bottom:1px solid var(--filet);vertical-align:top;}
.cdd-corps table th{font-family:var(--police-titre);font-weight:600;text-align:left;background:var(--surface);}
/* ⛔ Le comparateur garde le modele de tableau : il a deja son cadre a defilement, et en
   `display:block` son fond depasse ses colonnes de 192 px (colonne vide fantome, 25/08/2026). */
.cdd-corps table.cdd-comparateur{display:table;overflow-x:visible;width:100%;}
.cdd-corps img,.cdd-corps pre,.cdd-corps iframe{max-width:100%;height:auto;}
.cdd-corps p,.cdd-corps li,.cdd-corps h1,.cdd-corps h2,.cdd-corps h3{overflow-wrap:break-word;}

/* La barre basse doit tenir ses 5 entrées dans 390 px (le CTA en mangeait la moitié). */
.cdd-barre{max-width:100vw;overflow:hidden;}
.cdd-barre-lien,.cdd-barre-cta{min-width:0;font-size:11px;line-height:1.15;padding:6px 2px;
  hyphens:none;word-break:normal;}
.cdd-barre-cta{flex:1.15;font-size:11.5px;}
@media (min-width:360px){.cdd-barre-lien,.cdd-barre-cta{font-size:12px;}}

/* La pastille « nuits » débordait de son losange et mangeait le texte. */
.cdd-pastille{overflow:hidden;text-overflow:clip;}

/* ── Signature du persona (P-290) ─────────────────────────────────────────── */
.cdd-signature{display:flex;gap:16px;align-items:flex-start;margin:48px 0 0;padding:20px 22px;
  background:var(--surface);border-left:3px solid var(--gaz);}
.cdd-signature-portrait{flex:0 0 72px;width:72px;height:72px;object-fit:cover;border-radius:0;
  border:1px solid var(--filet);}
.cdd-signature-txt{min-width:0;}
.cdd-signature-qui{font-family:var(--police-titre);font-weight:700;margin:0 0 6px;color:var(--lumiere);font-size:17px;}
.cdd-signature-qui a{color:var(--lumiere);text-decoration:none;border-bottom:1px solid var(--gaz);}
.cdd-signature-bio{font-size:15px;line-height:1.55;color:var(--lumiere);margin:0 0 10px;font-style:italic;}
.cdd-signature-quoi{font-size:14px;line-height:1.5;color:var(--brume);margin:0;}
.cdd-signature-quoi a,.cdd-signature-lien a{color:var(--lampe);}
@media (max-width:520px){.cdd-signature{flex-direction:column;gap:12px;}}
/* crédit photo discret sous l'image à la une */
.cdd-credit-photo{font-size:12px;color:var(--brume);margin:4px 0 0;text-align:right;}

/* ── La carte de France du bivouac ────────────────────────────────────────── */
.cdd-carte{display:grid;grid-template-columns:1fr;gap:20px;margin:32px 0 8px;}
.cdd-carte-zone{background:var(--nuit);padding:12px;}
.cdd-carte-svg{width:100%;height:auto;display:block;}
.cdd-region{cursor:pointer;outline:none;}
.cdd-region-forme{stroke:var(--nuit);stroke-width:2.5;transition:fill .12s,transform .12s;transform-origin:center;}
.cdd-region-forme[data-niv="1"]{fill:#E4DACB;}
.cdd-region-forme[data-niv="2"]{fill:#E8C87A;}
.cdd-region-forme[data-niv="3"]{fill:#E08A2B;}
.cdd-region-forme[data-niv="4"]{fill:#D23A2C;}
.cdd-region:hover .cdd-region-forme,
.cdd-region:focus .cdd-region-forme{fill:var(--lumiere);stroke:var(--lampe);stroke-width:3;}
.cdd-carte-info{background:var(--surface);padding:18px 20px;min-height:150px;border-left:3px solid var(--lampe);}
.cdd-carte-defaut{color:var(--brume);font-size:15px;margin:0;}
.cdd-carte-nom{font-family:var(--police-titre);font-weight:700;font-size:20px;color:var(--lumiere);margin:0 0 8px;}
.cdd-carte-niv{font-size:14px;color:var(--brume);margin:0 0 10px;display:flex;align-items:center;gap:8px;}
.cdd-carte-carres{display:inline-flex;gap:3px;}
.cdd-carte-carres i{width:11px;height:11px;border:1px solid var(--lampe);display:block;}
.cdd-carte-carres i.plein{background:var(--lampe);}
.cdd-carte-note{font-size:15px;line-height:1.5;color:var(--lumiere);margin:0 0 10px;}
.cdd-carte-lien{font-size:14px;color:var(--lampe);margin:0;font-family:var(--police-titre);font-weight:600;}
.cdd-carte-legende{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 28px;font-size:13px;color:var(--brume);}
.cdd-carte-leg{display:inline-flex;align-items:center;gap:6px;}
.cdd-carte-leg i{width:13px;height:13px;display:block;}
.cdd-carte-leg[data-niv="1"] i{background:#E4DACB;}
.cdd-carte-leg[data-niv="2"] i{background:#E8C87A;}
.cdd-carte-leg[data-niv="3"] i{background:#E08A2B;}
.cdd-carte-leg[data-niv="4"] i{background:#D23A2C;}
@media (min-width:760px){.cdd-carte{grid-template-columns:1.4fr 1fr;align-items:start;}}

/* ── Les photos dans le corps des articles ────────────────────────────────── */
.cdd-figure{margin:32px 0;padding:0;}
.cdd-figure img{display:block;width:100%;height:auto;border-radius:28px 0 0 0;}
.cdd-figure figcaption{margin-top:8px;font-family:var(--police-corps);font-size:14px;line-height:1.45;
  color:var(--brume);padding-left:12px;border-left:2px solid var(--filet);}
.cdd-figure .cdd-credit{color:var(--brume);opacity:.75;font-size:12.5px;}
/* sur bande claire, le neutre change */
.cdd-bande-jour .cdd-figure figcaption,
.cdd-corps-clair .cdd-figure figcaption{color:var(--brume-jour);border-left-color:var(--filet-jour);}
@media (min-width:900px){.cdd-figure{margin:40px 0;}}

/* ── Maillage interne ─────────────────────────────────────────────────────── */
.cdd-maillage{margin:40px 0 0;padding:20px 22px;background:var(--surface);border-left:3px solid var(--lampe);}
.cdd-maillage h2{margin:0 0 10px;font-size:20px;}
.cdd-maillage ul{margin:0;padding-left:20px;}
.cdd-maillage li{margin:6px 0;}
.cdd-maillage a{color:var(--lampe);}
.cdd-maillage-regions ul{columns:2;column-gap:24px;}
@media (max-width:520px){.cdd-maillage-regions ul{columns:1;}}
.cdd-maillage-retour{margin:28px 0 0;font-size:15px;color:var(--brume);}
.cdd-maillage-retour a{color:var(--lampe);}

/* ── 2e passe du 24/08 : vraies tuiles, densité home, mobile 390 ─────────── */

/* Procédé « tuiles » : fond + filet du haut, ce ne sont plus 4 nombres posés sur rien */
.cdd-bande-surface{padding:56px 0;}
@media (min-width:900px){.cdd-bande-surface{padding:72px 0;}}
.cdd-tuile{background:var(--nuit);padding:26px 22px 22px;border-top:3px solid var(--lampe);}

/* Hero : moins de vide sous la photo (verdict : 450 px de nuit morte) */
.cdd-hero{padding:40px 0 48px;}
@media (min-width:900px){.cdd-hero{padding:56px 0 64px;}}

/* Niveau de dimanche : sur bande claire, le carré plein passe au rouge, comme la
   pastille (§3 DA : « sur clair, la chaleur passe au rouge ») — sinon 1,5:1 (verdict). */
.cdd-bande-lumiere .cdd-niveau i.cdd-plein{background:var(--gaz);border-color:var(--gaz);}
@media (prefers-color-scheme:light){
	.cdd-bande-lecture .cdd-niveau i.cdd-plein{background:var(--gaz);border-color:var(--gaz);}
}

/* Pastille « nuits » : NUITS ne tenait pas dans le losange (verdict, mesuré à x4).
   Losange agrandi + police resserrée, sans changer le procédé ni la couleur. */
.cdd-pastille{width:30px;height:30px;}
.cdd-pastille i{font-size:6.5px;letter-spacing:0;}
.cdd-pastille i b{font-size:12px;}
.cdd-pastille-photo{width:38px;height:38px;}
.cdd-pastille-photo i{font-size:7.5px;}
.cdd-pastille-photo i b{font-size:14px;}

/* Réglette à 390 px : NUIT 2 et DIM. 18 H sortaient de l'écran (verdict). */
@media (max-width:420px){
	.cdd-reglette{max-width:100%;}
	.cdd-reglette-seg{font-size:9px;}
	.cdd-reglette-heures{font-size:10.5px;}
}

/* Cohérence de l'auvent : séparateur posé à chaque joint de bandes, plus seulement 2/6. */
.cdd-auvent{flex:0 0 auto;}

/* ── Contraste du « niveau de dimanche » sur bande claire ──────────────────
   Mesure du verdict design : l'ambre plein sur fond lumiere donne 1,5:1 — les carres
   VIDES se voyaient mieux que les pleins, l'echelle s'inversait. Sur bande claire, le
   plein passe au rouge de gaz (5,2:1 sur lumiere) et le vide au neutre du jour. */
.cdd-bande-lumiere .cdd-niveau i{border-color:var(--brume-jour);}
.cdd-bande-lumiere .cdd-niveau i.cdd-plein{background:var(--gaz);border-color:var(--gaz);}
.cdd-bande-lumiere .cdd-niveau-mot{color:var(--brume-jour);}
.cdd-carte-corps .cdd-niveau i{border-color:var(--brume-jour);}
.cdd-carte-corps .cdd-niveau i.cdd-plein{background:var(--gaz);border-color:var(--gaz);}
/* meme correction dans le panneau de la carte de France, qui est sur surface sombre :
   la on garde l'ambre, il y fait 9,5:1 */

/* ── Comparateur : en-tetes lisibles, legende, source ─────────────────────── */
.cdd-th-note{display:block;font-family:var(--police-corps);font-weight:400;font-size:11px;
  letter-spacing:0;text-transform:none;color:var(--brume-jour);margin-top:2px;}
.cdd-comparateur-note{font-size:13.5px;line-height:1.55;color:var(--brume-jour);margin:10px 0 0;}
.cdd-comparateur-note a{color:var(--gaz);}
.cdd-comparateur-legende{display:inline-flex;align-items:center;gap:6px;margin-right:6px;}
.cdd-comparateur-legende i{display:inline-block;width:22px;height:3px;background:var(--gaz);flex:0 0 auto;}

/* ── ILLISIBLE : texte sombre sur fond sombre dans le comparateur ───────────
   Cause mesurée : `.cdd-img-vignette` n'avait AUCUN style. Dans une cellule en
   display:flex, l'image s'étirait sur toute la largeur en emportant son fond
   `.cdd-img{background:var(--surface)}` — sombre — pendant que le texte restait
   en `color:var(--nuit)`. Nuit sur surface = 1,3:1. */
.cdd-comparateur-modele .cdd-img-vignette{
  flex:0 0 auto;width:64px;height:44px;object-fit:cover;border-radius:0;
  background:var(--surface);}
.cdd-comparateur-modele{background:var(--lumiere);color:var(--nuit);}
.cdd-comparateur-modele span{color:var(--nuit);flex:1 1 auto;min-width:0;}
/* garde-fou général : une vignette ne s'étire jamais dans un conteneur flex */
.cdd-img-vignette{flex:0 0 auto;max-width:120px;height:auto;}

/* P-358, volet mobile — sur une page de capture, les preuves du bandeau ne passent pas
   avant le premier champ : 123 px voles au-dessus du pli sur un ecran de 844 px. Elles sont
   reprises par le panneau « Ce qui se passe ensuite », juste sous le formulaire. */
@media (max-width:700px){
  .cdd-devis-tete .cdd-tete-preuves,
  .cdd-tete-courte .cdd-tete-preuves{display:none;}
  .cdd-devis-promesse{font-size:16px;line-height:1.45;}
}

/* P-358 — bandeau court sur une page de capture : le formulaire prime sur l'ambiance. */
.cdd-tete-courte{padding:26px 0 22px!important;}
.cdd-tete-courte h1{margin-bottom:10px;}
@media (max-width:959px){.cdd-tete-courte{padding:18px 0 16px!important;}}

/* ── Le hero d'article : moins de vide, plus de preuve (R-0121) ─────────── */
.cdd-article-tete{padding:34px 0 30px;}
.cdd-article-tete h1{margin:0 0 10px;}
.cdd-article-tete .cdd-parebrise{margin-top:20px;}
.cdd-article-tete .cdd-parebrise img{aspect-ratio:21/9;object-fit:cover;width:100%;}
/* la signature en tête : qui écrit, et depuis quand la page est à jour */
.cdd-tete-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:14px 0 0;font-size:14px;color:var(--brume);}
.cdd-tete-meta img{width:34px;height:34px;object-fit:cover;flex:0 0 auto;}
.cdd-tete-meta a{color:var(--lumiere);border-bottom:1px solid var(--gaz);text-decoration:none;}
.cdd-tete-meta .cdd-tete-sep{color:var(--filet);}
@media (min-width:900px){.cdd-article-tete{padding:44px 0 36px;}}

/* ==========================================================================
   CONTRASTE MESURÉ SUR LA PAIRE RÉELLEMENT RENDUE — 25/08/2026
   Retour de Mathias : « écriture noire sur fond violet sombre : illisible ».
   Cause : `.cdd-corps table th` (spécificité 0,1,2) écrase `.cdd-comparateur-modele`
   (0,1,0). Le <th> prenait --surface (#262031) pendant que le texte gardait --nuit
   (#1A1622) : 1,13:1. La correction précédente ne pouvait PAS s'appliquer — elle
   avait été validée en LISANT le fichier au lieu de mesurer le rendu.
   Toutes les valeurs ci-dessous sont mesurées par chk_contraste_rendu.py, dans le
   navigateur, fond effectif remonté de parent en parent.
   ========================================================================== */

/* 1. Le comparateur : on bat la règle de table du corps (0,2,2 > 0,1,2). */
.cdd-corps table th.cdd-comparateur-modele{background:var(--lumiere);color:var(--nuit);}
.cdd-corps table th.cdd-comparateur-modele span{color:var(--nuit);}          /* 14,50:1 */
.cdd-corps .cdd-comparateur thead th{background:var(--lumiere);color:var(--brume-jour);}  /* 5,86:1 */
.cdd-corps .cdd-comparateur thead th .cdd-th-note{color:var(--brume-jour);}
.cdd-corps .cdd-comparateur tbody td{background:#FBF7F0;color:var(--nuit);}
.cdd-corps .cdd-comparateur tbody td.cdd-demander{background:transparent;}
.cdd-comparateur-plus{color:var(--brume-jour);}                               /* sur #FBF7F0 */
.cdd-comparateur-note{color:var(--brume-jour);}
.cdd-comparateur-note a{color:var(--gaz-fonce);}                              /* 5,22:1 */

/* 2. Le neutre des fonds sombres : #8C8399 tombait à 4,37:1 sur --surface. */
:root{--brume:#9891A6;}                                                       /* 5,20 / 5,87:1 */

/* 3. Le séparateur de la signature était à 1,48:1 — invisible. */
.cdd-tete-meta .cdd-tete-sep{color:var(--brume);}                             /* 4,93:1 */

/* 4. Légendes et crédits sur bande CLAIRE : le neutre de nuit n'y tient pas. */
.cdd-bande-lumiere .cdd-figure figcaption,.cdd-bande-jour .cdd-figure figcaption,
.cdd-corps-clair .cdd-figure figcaption,.cdd-bande-lumiere .cdd-parebrise-legende{
  color:var(--brume-jour);border-left-color:var(--filet-jour);}
.cdd-bande-lumiere .cdd-credit,.cdd-bande-lumiere .cdd-credit-photo,
.cdd-bande-jour .cdd-credit,.cdd-corps-clair .cdd-credit{color:var(--brume-jour);opacity:1;}
@media (prefers-color-scheme: light){
  .cdd-bande-lecture .cdd-figure figcaption,.cdd-bande-lecture .cdd-parebrise-legende{
    color:var(--brume-jour);border-left-color:var(--filet-jour);}
  .cdd-bande-lecture .cdd-figure .cdd-credit,.cdd-bande-lecture .cdd-credit,
  .cdd-bande-lecture .cdd-credit-photo{color:var(--brume-jour);opacity:1;}
  .cdd-bande-lecture a:not(.cdd-bouton){color:var(--gaz-fonce);}
  .cdd-bande-lecture .cdd-demander a{color:#fff;}
}

/* 5. Liens et aides sur fond clair : --gaz plafonne à 3,91:1 en texte. */
.cdd-bande-lumiere a:not(.cdd-bouton){color:var(--gaz-fonce);}
.cdd-corps .cdd-demander a{color:#fff;}          /* le bouton reste blanc sur aplat --gaz */
.cdd-bande-lumiere .cdd-lien-suite{color:var(--gaz-fonce);}   /* --lampe seulement sur fond nuit */
.sblf .sblf-aide{color:#5B6875;}                                                    /* 4,65:1 */

/* Un bloc qui pose son PROPRE fond sombre garde les couleurs de nuit, même posé
   au milieu d'une bande claire : la règle de bande ne doit pas y descendre.
   (.cdd-signature est en --surface ; --gaz-fonce y tombait à 2,46:1.) */
.cdd-corps .cdd-signature a,.cdd-corps .cdd-signature strong{color:var(--lampe);}   /* 8,47:1 */
/* Le CSS du formulaire réseau est injecté APRÈS la feuille : il faut le battre en
   spécificité, pas en position (.sblf .sblf-aide = 0,2,0). */
.cdd-corps .sblf p.sblf-aide{color:#5B6875;}                                        /* 4,65:1 */

/* `.cdd-corps table th` imposait un fond --surface SANS poser sa couleur : dans une
   bande claire, le <th> héritait du texte de nuit → 1,13:1 (P-110, une paire se pose
   entière). Vaut pour tout tableau du site, y compris ceux écrits à la main dans un
   article ; le comparateur reste couvert par ses règles plus spécifiques. */
.cdd-corps table th{color:var(--lumiere);}                                          /* 12,85:1 */

/* ==========================================================================
   LE NEUTRE SUIT SON FOND — correction de RACINE (25/08/2026)
   Traquer sélecteur par sélecteur les textes en --brume posés sur fond clair est
   sans fin : il en reste toujours un. On redéfinit la VARIABLE au niveau du
   conteneur, et tout ce qui l'utilise à l'intérieur bascule tout seul.
   ========================================================================== */

/* Dans une bande claire, le neutre et le filet passent en version jour. */
.cdd-bande-lumiere,.cdd-bande-jour,.cdd-corps-clair{--brume:var(--brume-jour);--filet:var(--filet-jour);}
@media (prefers-color-scheme: light){
  .cdd-bande-lecture{--brume:var(--brume-jour);--filet:var(--filet-jour);}
}

/* Et un bloc qui repose son PROPRE fond sombre au milieu d'une bande claire
   remet le neutre de nuit ET sa couleur de texte — sinon il hérite du noir. */
.cdd-corps .cdd-maillage,.cdd-corps .cdd-tuile,.cdd-corps .cdd-carte-info,
.cdd-corps .cdd-carte-zone,.cdd-corps .cdd-seg-nuit,.cdd-corps .cdd-signature{
  --brume:#9891A6;--filet:#3A3348;color:var(--lumiere);}
.cdd-corps .cdd-maillage a,.cdd-corps .cdd-tuile a,.cdd-corps .cdd-carte-info a,
.cdd-corps .cdd-carte-zone a,.cdd-corps .cdd-seg-nuit a{color:var(--lampe);}        /* 8,47:1 */

/* ── CDD-HERO-DUO : le premier écran d'un article ────────────────────────────
   Deux colonnes : ce que la page dit + ce qui le prouve à gauche, l'action à
   droite. La photo passe sous le hero (§83 : sur un premier écran, l'illustration
   occupe la place de l'action). Contrastes mesurés au rendu, pas au fichier. */
.cdd-tete-duo{display:grid;gap:26px;grid-template-columns:1fr;align-items:start;}
.cdd-tete-corps{min-width:0;}
.cdd-tete-corps .cdd-etiquette{margin:0 0 10px;}
.cdd-tete-corps h1{margin:0 0 14px;}
.cdd-tete-corps .cdd-tete-meta{margin:0 0 16px;}
.cdd-tete-corps .cdd-aveu{margin:0 0 18px;}

.cdd-tete-preuves{list-style:none;padding:0;margin:2px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;}
.cdd-tete-preuves li{position:relative;padding-left:20px;font-size:14.5px;color:var(--brume);
  font-family:var(--police-titre);font-weight:600;letter-spacing:.01em;}
.cdd-tete-preuves li::before{content:"";position:absolute;left:0;top:7px;width:11px;height:6px;
  border-left:2px solid var(--lichen);border-bottom:2px solid var(--lichen);transform:rotate(-45deg);}

.cdd-tete-action{background:var(--lumiere);color:var(--nuit);padding:22px 22px 20px;
  border-radius:26px 0 0 0;box-shadow:0 18px 46px rgba(0,0,0,.34);}
.cdd-tete-action-titre{font-family:var(--police-titre);font-weight:700;font-size:21px;
  line-height:1.2;margin:0 0 8px;color:var(--nuit);}
.cdd-tete-action-sous{font-size:15px;line-height:1.5;margin:0 0 16px;color:var(--brume-jour);}
.cdd-tete-action .cdd-bouton,.cdd-tete-action-bouton{display:flex;align-items:center;
  justify-content:center;width:100%;min-height:54px;padding:12px 20px;background:var(--gaz);
  color:#fff;text-decoration:none;font-family:var(--police-titre);font-weight:700;font-size:17px;
  border:0;}
.cdd-tete-action .cdd-bouton:hover{background:var(--gaz-fonce);color:#fff;}
.cdd-tete-action-note{font-size:12.5px;line-height:1.45;margin:12px 0 0;color:var(--brume-jour);}

/* La photo n'est plus dans le premier écran : elle ouvre le corps de l'article. */
.cdd-article-tete .cdd-parebrise{margin-top:26px;}
.cdd-article-tete .cdd-parebrise img{aspect-ratio:21/9;object-fit:cover;width:100%;}

@media (min-width:960px){
  .cdd-tete-duo{grid-template-columns:minmax(0,1.6fr) minmax(296px,.82fr);gap:46px;}
  .cdd-tete-action{position:sticky;top:22px;}
}

/* ── CDD-DEVIS-CAPTURE : la page de devis est une page qui CAPTE ─────────────
   Bandeau compact puis formulaire tout de suite. Aucune illustration : sur un
   premier écran, une photo occupe la place de l'action (§83). */
.cdd-devis-tete{padding:34px 0 30px;}
.cdd-devis-tete h1{margin:0 0 14px;}
.cdd-devis-promesse{max-width:62ch;font-size:18px;line-height:1.6;margin:0 0 18px;color:var(--lumiere);}
.cdd-devis-promesse strong{color:var(--lampe);}
.cdd-devis-corps{padding:30px 0 44px;}
.cdd-devis-duo{display:grid;gap:28px;grid-template-columns:1fr;align-items:start;}
.cdd-devis-form{min-width:0;}
.cdd-devis-cote{background:var(--surface);color:var(--lumiere);padding:24px 24px 22px;
  border-radius:26px 0 0 0;--brume:#9891A6;--filet:#3A3348;}
.cdd-devis-cote-titre{font-family:var(--police-titre);font-size:21px;line-height:1.2;
  margin:0 0 14px;color:var(--lumiere);}
.cdd-devis-etapes{margin:0 0 18px;padding-left:20px;}
.cdd-devis-etapes li{margin:0 0 10px;font-size:15.5px;line-height:1.5;color:var(--lumiere);}
.cdd-devis-etapes strong{color:var(--lampe);}
.cdd-devis-qui{font-size:15px;line-height:1.55;margin:0 0 12px;color:var(--lumiere);}
.cdd-devis-qui a{color:var(--lampe);}
.cdd-devis-donnees{font-size:13px;line-height:1.5;margin:0;color:var(--brume);
  padding-top:12px;border-top:1px solid var(--filet);}
@media (min-width:960px){
  .cdd-devis-tete{padding:40px 0 34px;}
  .cdd-devis-duo{grid-template-columns:minmax(0,1.5fr) minmax(300px,.9fr);gap:44px;}
  .cdd-devis-cote{position:sticky;top:22px;}
}

/* ── CDD-BLOC-NUIT : la règle GÉNÉRIQUE, pour ne plus refaire la même faute ───
   Trois fois de suite j'ai posé un bloc à fond sombre au milieu d'une bande claire
   (.cdd-signature, puis .cdd-maillage, puis .cdd-devis-cote) en oubliant que la
   règle de bande — `.cdd-bande-lumiere a` (0,2,1) — descend dedans et y met un rouge
   foncé prévu pour du texte sur fond clair : 2,46:1.
   Désormais tout bloc à fond sombre porte `.cdd-bloc-nuit` et hérite de ce lot.
   La liste nominative reste pour les blocs déjà en place. */
.cdd-corps .cdd-bloc-nuit,.cdd-corps .cdd-devis-cote{
  --brume:#9891A6;--filet:#3A3348;color:var(--lumiere);}
.cdd-corps .cdd-bloc-nuit a,.cdd-corps .cdd-devis-cote a{color:var(--lampe);}   /* 8,47:1 */
.cdd-corps .cdd-bloc-nuit strong,.cdd-corps .cdd-devis-cote strong{color:var(--lampe);}

/* ── CDD-HOME-CARTE / CDD-HOME-ACTU ─────────────────────────────────────────── */
.cdd-home-carte-sous,.cdd-home-actu-sous{max-width:74ch;font-size:16.5px;line-height:1.55;
  margin:6px 0 22px;color:var(--brume);}
.cdd-home-carte .cdd-carte-svg,.cdd-home-carte svg{max-width:100%;height:auto;}
.cdd-home-actu .cdd-carte-date{display:block;margin:0 0 6px;}

/* L'échelle dans le panneau de la carte : elle occupe l'espace qui restait mort
   et rend la carte lisible sans avoir à survoler quoi que ce soit. */
/* ── Une seule echelle pour la carte : la pastille porte la couleur de la region ──────
   Avant, le panneau affichait 4 carres « n sur 4 » empruntes a l'echelle de CONFORT du
   site (cdd_niveau) pendant que la carte coloriait la contrainte REGLEMENTAIRE : deux
   echelles distinctes sous le meme nom, plus une 3e formulation sous la carte. */
.cdd-carte-pastille{width:12px;height:12px;display:inline-block;vertical-align:middle;
  margin-right:9px;border-radius:2px;flex:0 0 auto;}
.cdd-carte-pastille[data-niv="1"]{background:#E4DACB;}
.cdd-carte-pastille[data-niv="2"]{background:#E8C87A;}
.cdd-carte-pastille[data-niv="3"]{background:#E08A2B;}
.cdd-carte-pastille[data-niv="4"]{background:#D23A2C;}
.cdd-carte-echelle{list-style:none;margin:16px 0 0;padding:0;}
.cdd-carte-echelle li{display:block;margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--brume);}
.cdd-carte-echelle strong{display:inline;color:var(--lumiere);margin-right:4px;}
.cdd-carte-echelle .cdd-carte-carres{display:inline-flex;gap:3px;vertical-align:middle;margin-right:8px;}
.cdd-carte-echelle .cdd-carte-carres i{width:9px;height:9px;display:inline-block;
  border:1px solid var(--gaz);background:transparent;}
.cdd-carte-echelle .cdd-carte-carres i.plein{background:var(--gaz);}

/* ══ TOUS LES BLOCS À FOND SOMBRE, RECENSÉS UNE BONNE FOIS ═══════════════════
   Quatre fois de suite j'ai corrigé ce défaut bloc par bloc — .cdd-signature,
   puis .cdd-maillage, puis .cdd-devis-cote, puis .cdd-carte — et il revenait au
   bloc suivant. Cause unique : la règle de bande claire (`.cdd-bande-lumiere`,
   0,2,1) redéfinit --brume en version jour et met les liens en --gaz-fonce ; elle
   descend dans les blocs qui reposent leur PROPRE fond sombre, où ces couleurs
   tombent à 2,2-2,5:1.
   La liste ci-dessous est le RECENSEMENT COMPLET du CSS (tout sélecteur simple
   posant --nuit ou --surface en fond). Tout nouveau bloc à fond sombre s'ajoute
   ici — ou porte la classe .cdd-bloc-nuit, prévue pour ça. */
.cdd-corps .cdd-bloc-nuit,
.cdd-corps .cdd-carte,.cdd-corps .cdd-carte-info,.cdd-corps .cdd-carte-zone,
.cdd-corps .cdd-cta-fil,.cdd-corps .cdd-devis-cote,.cdd-corps .cdd-seg-nuit,
.cdd-corps .cdd-signature,.cdd-corps .cdd-tuile,.cdd-corps .cdd-maillage{
  --brume:#9891A6;--filet:#3A3348;color:var(--lumiere);}

.cdd-corps .cdd-bloc-nuit a,
.cdd-corps .cdd-carte a,.cdd-corps .cdd-carte-info a,.cdd-corps .cdd-carte-zone a,
.cdd-corps .cdd-cta-fil a:not(.cdd-bouton),.cdd-corps .cdd-devis-cote a,
.cdd-corps .cdd-seg-nuit a,.cdd-corps .cdd-signature a,.cdd-corps .cdd-tuile a,
.cdd-corps .cdd-maillage a{color:var(--lampe);}                       /* 8,47:1 sur --surface */

/* le titre d'une carte reste en pleine lumière : c'est le texte principal du bloc */
.cdd-corps .cdd-carte .cdd-carte-titre a{color:var(--lumiere);}       /* 12,85:1 */
.cdd-corps .cdd-carte .cdd-carte-titre a:hover{color:var(--lampe);}

/* ── CDD-HERO-ORDRE-MOBILE ───────────────────────────────────────────────────
   Sur téléphone, l'ordre du HTML remettait le défaut que le desktop n'a pas :
   titre → aveu → sous-titre → PHOTO → trois liens « Ce week-end » → action.
   L'action tombait à 1 056 px, hors du premier écran (844 px). Mesuré, pas supposé.
   On remonte la colonne de droite avant la photo, et l'action en tête de cette
   colonne. Le grand écran, lui, ne bouge pas (§83, piège n°1). */
@media (max-width:959px){
  .cdd-hero-grille{display:flex;flex-direction:column;}
  .cdd-hero-texte{order:1;}
  /* CDD-HERO-PHOTO-BANDEAU — la photo repasse AVANT l'encadre d'action, en 21:9 : le premier
     ecran retrouve une image sans que le bouton sorte de l'ecran. Les deux sont mesures. */
  /* CDD-HERO-RESSERRE — chaque pixel au-dessus du pli est paye par le bouton. */
  .cdd-hero-photo{order:2;margin:10px 0 0;}
  .cdd-hero-photo img{width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;}
  /* CDD-HERO-MARGE-REELLE — le bouton doit finir franchement au-dessus de la barre fixe. */
  .cdd-hero-texte h1{font-size:31px;line-height:1.1;margin-bottom:12px;}
  .cdd-hero-texte>p:not(.cdd-aveu){font-size:15px;line-height:1.4;margin-bottom:0;}
  .cdd-hero-photo figcaption,.cdd-hero-photo .cdd-legende{font-size:11px;line-height:1.25;margin-top:5px;}
  .cdd-hero-texte .cdd-aveu{margin-bottom:16px;}
  .cdd-weekend .cdd-accueil-action{margin-top:14px;}
  .cdd-weekend{order:3;display:flex;flex-direction:column;}
  .cdd-hero-texte p{font-size:15.5px;line-height:1.45;}
  .cdd-weekend .cdd-accueil-action{order:-1;margin-bottom:22px;}
  .cdd-weekend .cdd-etiquette{order:0;}
}

/* ── Sommaire replie des pages longues (P-380 point 17) ─────────────────── */
.cdd-sommaire{border:1px solid var(--filet);border-left:3px solid var(--lampe);
  padding:14px 18px;margin:0 0 28px;border-radius:2px;}
.cdd-sommaire>summary{cursor:pointer;font-family:var(--police-titre);font-weight:600;
  font-size:15px;letter-spacing:.02em;}
.cdd-sommaire ol{margin:12px 0 2px;padding-left:20px;}
.cdd-sommaire li{margin:0 0 6px;font-size:15px;line-height:1.45;}
/* le blockquote de l'aveu garde exactement l'allure qu'il avait en <p> */
blockquote.cdd-aveu{margin-left:0;margin-right:0;}

/* ── CDD-DEUX-THEMES : une couleur suit TOUJOURS le fond sur lequel elle tombe ──────────
   Mesure du 25/08/2026, contraste force dans les deux themes. */

/* 1. La mention d'information du formulaire. Elle vit sur une bande claire dans les deux
      themes : sa couleur est celle du texte secondaire sur fond clair, jamais l'heritage. */
.cdd-mention-rgpd{color:var(--brume-jour);font-size:13.5px;line-height:1.6;margin:18px 0 0;}
.cdd-mention-rgpd strong{color:var(--nuit);}
.cdd-mention-rgpd a{color:var(--gaz-fonce);}
/* ...et si elle tombait un jour sur une bande sombre, elle s'y adapte aussi. */
.cdd-bande-nuit .cdd-mention-rgpd,.cdd-bloc-nuit .cdd-mention-rgpd{color:var(--brume);}
.cdd-bande-nuit .cdd-mention-rgpd strong,.cdd-bloc-nuit .cdd-mention-rgpd strong{color:var(--lumiere);}
.cdd-bande-nuit .cdd-mention-rgpd a,.cdd-bloc-nuit .cdd-mention-rgpd a{color:var(--lampe);}

/* 2. Les notes et legendes du comparateur : `--brume-jour` etait fige, il ne tenait que sur
      fond clair. On le reserve aux bandes claires, et on laisse `--brume` suivre ailleurs. */
.cdd-comparateur-note,.cdd-comparateur-legende,.cdd-comparateur-plus{color:var(--brume);}
.cdd-bande-lumiere .cdd-comparateur-note,.cdd-bande-lumiere .cdd-comparateur-legende,
.cdd-bande-lumiere .cdd-comparateur-plus{color:var(--brume-jour);}
.cdd-comparateur-note strong{color:inherit;}

/* ── CDD-DEUX-THEMES-2 : ce qui tombe sur le fond nuit du theme par defaut ──────────────
   Mesure du 25/08/2026, `prefers-color-scheme` force. Quatre familles, une seule cause :
   une couleur choisie pour un fond clair, appliquee sur un fond nuit. */

/* le tableau du comparateur garde son fond clair : ses textes gardent donc l'encre sombre,
   c'est la NOTE sous le tableau qui tombe sur la bande. */
.cdd-comparateur-note,.cdd-comparateur-note strong,.cdd-comparateur-legende{color:var(--brume);}
.cdd-comparateur-note a{color:var(--lampe);}
.cdd-bande-lumiere .cdd-comparateur-note,.cdd-bande-lumiere .cdd-comparateur-note strong,
.cdd-bande-lumiere .cdd-comparateur-legende{color:var(--brume-jour);}
.cdd-bande-lumiere .cdd-comparateur-note a{color:var(--gaz-fonce);}

/* le formulaire de capture : ses titres et libelles sont declares en encre sombre par le
   composant reseau, ce qui ne tient que sur son propre fond clair. */
.cdd-capture .sblf h3,.cdd-capture .sblf label,.cdd-capture .sblf legend,
.cdd-devis-form .sblf h3,.cdd-devis-form .sblf label{color:var(--nuit);}
.cdd-bande-nuit .cdd-capture .sblf h3,.cdd-bande-nuit .cdd-capture .sblf label{color:var(--lumiere);}

/* un <strong> ne redeclare jamais sa couleur : il herite de son paragraphe. */
.cdd-mention-rgpd strong,.cdd-comparateur-note strong{color:inherit!important;}

/* ── CDD-CAPTURE-AUTONOME : l'encadre de capture porte son propre fond ──────────────────
   Mesure du 25/08/2026 : pose dans un article (fond nuit), ses titres tombaient a 1,08:1. */
.cdd-capture{background:var(--lumiere);color:var(--nuit);
  padding:24px 22px;border-radius:3px;margin:30px 0;}
.cdd-capture h3,.cdd-capture label,.cdd-capture legend,.cdd-capture p,.cdd-capture li{color:var(--nuit);}
.cdd-capture .sblf-aide,.cdd-capture .cdd-mention-rgpd,
.cdd-capture .cdd-mention-rgpd strong{color:var(--brume-jour);}
.cdd-capture .cdd-mention-rgpd a,.cdd-capture a:not(.cdd-bouton):not(.sblf-c){color:var(--gaz-fonce);}
/* dans la page de devis, l'encadre est deja la carte principale : pas de double cadre */
.cdd-devis-form .cdd-capture{background:transparent;padding:0;margin:0;}

/* ── CDD-SBLF-DANS-ARTICLE : le formulaire pose au fil du texte porte son fond ──────────
   Sans lui, ses titres et libelles (encre sombre du composant reseau) tombaient a 1,08:1
   sur le fond nuit de la bande de lecture. Mesure du 25/08/2026, theme sombre. */
.cdd-lecture .sblf{background:var(--lumiere);color:var(--nuit);
  padding:22px 20px;border-radius:3px;margin:30px 0;}
.cdd-lecture .sblf h3,.cdd-lecture .sblf label,.cdd-lecture .sblf legend,
.cdd-lecture .sblf p,.cdd-lecture .sblf li,.cdd-lecture .sblf strong{color:var(--nuit);}
.cdd-lecture .sblf .sblf-aide{color:var(--brume-jour);}
.cdd-lecture .sblf a:not(.sblf-c){color:var(--gaz-fonce);}

/* la mention d'information suit la bande qui la porte, pas une classe devinee */
.cdd-bande-lecture .cdd-mention-rgpd,.cdd-bande-lecture .cdd-mention-rgpd strong{color:var(--brume);}
.cdd-bande-lecture .cdd-mention-rgpd a{color:var(--lampe);}
.cdd-lecture .sblf .cdd-mention-rgpd,.cdd-lecture .sblf .cdd-mention-rgpd strong{color:var(--brume-jour);}
.cdd-lecture .sblf .cdd-mention-rgpd a{color:var(--gaz-fonce);}

/* ── CDD-RGPD-INCONDITIONNEL ────────────────────────────────────────────────────────────
   La mention d'information est toujours collee a un formulaire, et un formulaire a toujours
   un fond clair ici. Sa couleur ne depend donc d'aucune bande. Mesure du 25/08/2026. */
.cdd-mention-rgpd,
.cdd-bande-lecture .cdd-mention-rgpd,
.cdd-bande-nuit .cdd-mention-rgpd,
.cdd-bande-lumiere .cdd-mention-rgpd{color:#5C5468;}
.cdd-mention-rgpd strong,
.cdd-bande-lecture .cdd-mention-rgpd strong,
.cdd-bande-nuit .cdd-mention-rgpd strong,
.cdd-bande-lumiere .cdd-mention-rgpd strong{color:#1A1622;}
.cdd-mention-rgpd a,
.cdd-bande-lecture .cdd-mention-rgpd a,
.cdd-bande-nuit .cdd-mention-rgpd a,
.cdd-bande-lumiere .cdd-mention-rgpd a{color:#B12E22;}
/* le lien de contact du formulaire : l'ambre plafonne a 1,52:1 sur creme */
.cdd-lecture .sblf a:not(.sblf-c),.cdd-capture a:not(.sblf-c):not(.cdd-bouton){color:#B12E22;}

/* ── CDD-RGPD-ENCADRE : la mention porte son fond, elle ne le devine plus ───────────────
   Elle tombe tantot sur creme (page de devis), tantot sur nuit (formulaire au fil d'un
   article). Deux tentatives de regles conditionnelles ont echoue ; celle-ci ne depend de
   rien. Mesure du 25/08/2026, les deux themes. */
.cdd-mention-rgpd{background:var(--lumiere);border-left:2px solid #C9BFB0;
  padding:12px 14px;border-radius:0 2px 2px 0;margin:16px 0 0;}

/* 26/08/2026 — compte de fiches sous le titre d'une grille de rubrique */
.cdd-bande-compte{margin:.25rem 0 0;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;opacity:.72}