/*
 * Polices auto-hébergées (sous-ensemble latin), assemblées par l'orchestrateur dans assets/css/tout.css.
 * Les url() sont SANS guillemets et relatives à CE dossier (/assets/fonts/) : l'assemblage les réécrit en ../fonts/.
 *
 * Lilita One : une seule graisse (400), ronde et pleine comme une goutte — titres, chiffres, numéros.
 * Radio Canada : fichier VARIABLE (graisses 300 à 700) — texte, menus, formulaires, légendes.
 * Si la source n'est livrée qu'en fichiers statiques, voir FONTS-A-TELECHARGER.txt.
 */
@font-face{
	font-family: 'Lilita One';
	src: url(../fonts/lilita-one.woff2) format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face{
	font-family: 'Radio Canada';
	src: url(../fonts/radio-canada.woff2) format('woff2');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

/*
Theme Name: Distri-Pompes — la coupe
Theme URI: https://distri-pompes.fr/
Author: Distri-Pompes
Description: Thème code-pur de distri-pompes.fr (18/10/2026). Concept : la coupe de la maison, du toit à la cuve. Le ciel, l'avant-toit, la gouttière, la descente, le sol, la terre, la cuve et son niveau d'eau. La plomberie vit dans /socle, les blocs figés dans /blocs.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: dp-coupe
*/

/* ============================================================================================
 * Jetons de design — UNE palette (DA §2), aucune autre couleur.
 *   Bruine #EEF1EE · Terre #2A2620 · Bleu pluie #4790A4 · Bleu pluie profond #2B5864 · Jaune ciré #E9B727 · Blanc.
 *   Terre très clair = Terre à 6-10 % sur Bruine (la terre en coupe).
 * Pas de mode sombre (Mathias) : un seul jeu de variables, contrastes mesurés pour le clair.
 * ============================================================================================ */
:root {
	--dp-bruine: #EEF1EE;
	--dp-terre: #2A2620;
	--dp-bleu: #4790A4;
	--dp-bleu-p: #2B5864;
	--dp-jaune: #E9B727;
	--dp-blanc: #FFFFFF;
	--dp-sol: rgba(42, 38, 32, .09);
	--dp-filet: rgba(42, 38, 32, .12);
	--dp-doux: rgba(42, 38, 32, .74);

	--dp-titre: 'Lilita One', 'Arial Rounded MT Bold', system-ui, sans-serif;
	--dp-texte: 'Radio Canada', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Jetons des blocs figés (--sb-*) : habillage seulement. */
	--sb-conteneur: 1240px;
	--sb-lecture: 720px;
	--sb-rail: 372px;
	--sb-gouttiere: 24px;
	--sb-accent: #2B5864;
	--sb-accent-clair: #4790A4;
	--sb-encre: #2A2620;
	--sb-doux: rgba(42, 38, 32, .74);
	--sb-filet: rgba(42, 38, 32, .12);
	--sb-fond-carte: #FFFFFF;
	--sb-surf: #EEF1EE;
	--sb-fonce: #2B5864;
	--sb-sur-fonce: #FFFFFF;
	--sb-rayon: 12px;
	--sb-rayon-grand: 16px;
	--sb-ombre: none;
	--sb-ombre-forte: none;
	--sb-titre: 'Lilita One', 'Arial Rounded MT Bold', system-ui, sans-serif;
	--sb-texte: 'Radio Canada', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--dp-bruine); color: var(--dp-terre); font-family: var(--dp-texte); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg, picture { max-width: 100%; }
img { height: auto; }
a { color: var(--dp-bleu-p); }
h1, h2, h3, h4 { font-family: var(--dp-titre); font-weight: 400; line-height: 1.12; margin: 0; letter-spacing: 0; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }

/*
 * BLOC FIGÉ — ARTICLE (thématique) — CSS
 * Origine : curieux-du-web.com, theme/style.css, règles `.cdw-article*` /
 * `.cdw-fil-ariane` / `.cdw-a-lire` / `.cdw-carte*` (renommées `.sbt-*` ici).
 * Couleurs/polices/espacements uniquement en `var(--sb-*, repli)` : un site neuf peut
 * utiliser ce fichier tel quel sans avoir encore défini ses propres variables.
 *
 * INTERDIT DE MODIFIER : voir single-article.php (un seul <article>, « à lire aussi »
 * en <div>). LIBRE DE MODIFIER : toutes les valeurs des var() ci-dessous.
 */

.sbt-conteneur{ max-width: var(--sb-conteneur, 1240px); margin-inline: auto; padding-inline: var(--sb-gouttiere, 24px); }

.sbt-fil-ariane{ font-size: .8125rem; color: var(--sb-doux, #55607a); display: flex; gap: 6px; flex-wrap: wrap; padding-block: 16px; }
.sbt-fil-ariane a{ color: var(--sb-doux, #55607a); text-decoration: none; }
.sbt-fil-ariane a:hover{ color: var(--sb-encre, #0f172a); }

.sbt-article-entete{ max-width: var(--sb-lecture, 720px); margin-inline: auto; padding-block: 8px 24px; }
.sbt-article-pastille{
	display: inline-block; background: var(--sb-surf, #f4f5fa); color: var(--sb-encre, #0f172a);
	font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-weight: 700; font-size: .75rem;
	text-transform: uppercase; letter-spacing: .04em; padding: 6px 12px; border-radius: 999px; margin-bottom: 16px;
	text-decoration: none;
}
.sbt-article-entete h1{ font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); line-height: 1.15; margin: 0; }
.sbt-article-chapo{ font-family: var(--sb-texte, 'Inter', system-ui, sans-serif); font-style: italic; font-size: clamp(1.0625rem,1rem + .3vw,1.3125rem); color: var(--sb-doux, #55607a); margin-top: 16px; }
.sbt-article-meta{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; font-size: .875rem; color: var(--sb-doux, #55607a); }
.sbt-article-meta img{ width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.sbt-article-meta-auteur{ color: inherit; font-weight: 600; text-decoration: none; }

.sbt-article-une{ max-width: var(--sb-conteneur, 1240px); margin: 28px auto 32px; padding-inline: var(--sb-gouttiere, 24px); }
.sbt-article-une-cadre{ aspect-ratio: 2.4 / 1; max-height: min(520px, 46vh); overflow: hidden; /* 01/10 : à 1440×900 le texte passait sous la ligne de flottaison (B-ART-09) */ border-radius: var(--sb-rayon, 14px); box-shadow: var(--sb-ombre, 0 8px 24px rgba(15,23,42,.08)); }
.sbt-article-une-cadre img{ width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px){ .sbt-article-une-cadre{ aspect-ratio: auto; height: 220px; max-height: 220px; } }

/* Grille corps + rail — align-items:start obligatoire pour que le rail sticky
   (cf. partial-sidebar.css) tienne sur toute la hauteur du contenu. */
.sbt-article-mise-en-page{
	display: grid; grid-template-columns: minmax(0, var(--sb-lecture, 720px)) var(--sb-rail, 340px);
	column-gap: var(--sb-gouttiere, 24px); row-gap: var(--sb-gouttiere, 24px);
	max-width: var(--sb-conteneur, 1240px); margin-inline: auto;
	padding: 32px var(--sb-gouttiere, 24px) 64px; align-items: start; justify-content: center;
}
@media (max-width: 1080px){ .sbt-article-mise-en-page{ grid-template-columns: minmax(0,1fr); } .sbt-article-principal, .sbt-rail{ min-width: 0; } }
.sbt-article-mise-en-page--suite{ padding-top: 0; }

.sbt-article-corps{ font-size: 1.0625rem; line-height: 1.7; color: var(--sb-encre, #0f172a); font-family: var(--sb-texte, 'Inter', system-ui, sans-serif); }
.sbt-article-corps h2{ margin-top: 2.2em; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); }
.sbt-article-corps h3{ margin-top: 1.8em; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); }
.sbt-article-corps p{ margin-bottom: 1.3em; }
.sbt-article-corps img{ border-radius: var(--sb-rayon, 14px); margin-block: 1.6em; width: 100%; height: auto; }
.sbt-article-corps blockquote{
	margin: 1.8em 0; padding: 18px 24px; border-left: 4px solid var(--sb-accent, #2563eb);
	background: var(--sb-surf, #f4f5fa); border-radius: 8px; font-style: italic;
}

/* Sommaire replié en accordéon sur mobile uniquement (en desktop, il vit dans le rail —
   cf. partial-sidebar.php / partial-sommaire.php). */
.sbt-sommaire-mobile{ display: none; }
@media (max-width: 1080px){ .sbt-sommaire-mobile{ display: block; margin-bottom: 24px; } }
/* 01/10/2026 (baliturismo, juge visuel) : sous 1080px le rail passe SOUS l'article ; sa carte sommaire
   faisait doublon avec le sommaire mobile de tête (erreur n°6 « sommaire en double »). */
@media (max-width: 1080px){ .sbt-rail-carte--sommaire{ display: none; } }

/* « À lire aussi » (toujours un <div>, jamais un <article> — cf. single-article.php) */
.sbt-a-lire{ margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--sb-filet, #e2e5ef); }
.sbt-kicker{ font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-size: .9375rem; font-weight: 700; margin-bottom: 12px; }
.sbt-grille{ display: grid; gap: var(--sb-gouttiere, 24px); }
.sbt-grille--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 760px){ .sbt-grille--3{ grid-template-columns: 1fr; } }
.sbt-carte{
	background: var(--sb-fond-carte, #ffffff); border: 1px solid var(--sb-filet, #e2e5ef);
	border-radius: var(--sb-rayon, 14px); overflow: hidden; box-shadow: var(--sb-ombre, 0 8px 24px rgba(15,23,42,.08));
	transition: transform .2s ease, box-shadow .2s ease;
}
.sbt-carte:hover{ transform: translateY(-4px); box-shadow: var(--sb-ombre-forte, 0 16px 40px rgba(15,23,42,.16)); }
.sbt-carte a{ display: block; color: inherit; text-decoration: none; }
.sbt-carte img{ width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.sbt-carte-corps{ padding: 18px; }
.sbt-carte-corps h3{ margin: 0; font-size: 1.0625rem; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); }

.sbt-article-commentaires{ margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--sb-filet, #e2e5ef); }

/* 01/10 (accessoiriste.net) : un seul sommaire visible par largeur — la carte du rail se masque quand l'accordéon mobile s'affiche. */
@media (max-width: 1080px){ .sbt-rail-carte--sommaire{ display: none; } }
/* 05/10 (operations-digestives, juge visuel) : sous-titres collés au paragraphe suivant (marge basse 0 px mesurée) */
.sbt-article-corps h2{ margin-bottom: .6em; }
.sbt-article-corps h3{ margin-bottom: .45em; }

/*
 * BLOC FIGÉ — BARRE LATÉRALE D'ARTICLE (thématique) — CSS
 * Origine : curieux-du-web.com, theme/style.css, règles `.cdw-rail` / `.cdw-rail-carte`
 * (lignes ~854-861, renommées `.sbt-rail*` ici) — commentaire garde-fou d'origine
 * CONSERVÉ TEL QUEL ci-dessous (règle la plus importante de ce bloc).
 *
 * Inspiration secondaire documentée (pas copiée en entier) : amatauto.fr fait basculer
 * sa colonne latérale en bloc STATIQUE empilé sous le texte à partir de 1100px
 * (assets/css/v2.css, `.a2-art__cote { position: sticky; ... }` +
 * `@media (max-width: 1100px) { .a2-art__cote { position: static; } }`) — repris ici en
 * option mobile (media query 1080px, cohérente avec le point de rupture de
 * `.sbt-article-mise-en-page` dans single-article.css).
 */

/* Rail sticky — collé à la colonne de texte, séparation par un filet interne, jamais un
   gap blanc entre les deux colonnes. */
.sbt-rail{
	position: sticky; top: 96px; align-self: start;
	display: flex; flex-direction: column; gap: 20px;
	border-left: 1px solid var(--sb-filet, #e2e5ef); padding-left: 20px;
}
/* ⛔ GARDE-FOU (conservé tel quel depuis curieux-du-web.com, retour Mathias ×3) : jamais
   de overflow-y ni de max-height ici — la colonne reste collante et accompagne TOUTE la
   lecture de l'article jusqu'en bas, sans sa propre barre de défilement interne. */
.sbt-rail-carte{
	background: var(--sb-fond-carte, #ffffff); border: 1px solid var(--sb-filet, #e2e5ef);
	border-radius: var(--sb-rayon, 14px); padding: 18px;
}
.sbt-rail-carte .sbt-t4, .sbt-rail-carte h4{
	font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-size: .875rem;
	text-transform: uppercase; letter-spacing: .04em; color: var(--sb-doux, #55607a); margin: 0 0 10px;
}

/* Option mobile (inspirée d'amatauto.fr, cf. en-tête) : sous 1080px, la grille parente
   passe déjà en une colonne (cf. .sbt-article-mise-en-page dans single-article.css) — le
   rail redevient donc naturellement un bloc statique empilé sous le texte. */
@media (max-width: 1080px){
	.sbt-rail{ position: static; border-left: 0; padding-left: 0; border-top: 1px solid var(--sb-filet, #e2e5ef); padding-top: 20px; }
}

/* Sommaire tel qu'affiché dans le rail (cf. partial-sommaire.css pour le détail des
   classes `.sbt-sommaire*`) : pas de style supplémentaire ici, la carte du rail suffit. */

/*
 * BLOC FIGÉ — SOMMAIRE (thématique) — CSS
 * CSS volontairement simple (voir partial-sommaire.php : la robustesse de ce bloc est
 * dans le PHP — ids séquentiels, exclusion FAQ/Sources, seuil de 3 titres — pas dans son
 * habillage). Inspiré du rendu `<details>` natif de health-nutrition-cambrai.fr
 * (« Bien Vivre Santé »), classes renommées `.sbt-sommaire*`.
 */

.sbt-sommaire{
	background: var(--sb-fond-carte, #ffffff); border: 1px solid var(--sb-filet, #e2e5ef);
	border-left: 4px solid var(--sb-accent, #2563eb); border-radius: var(--sb-rayon, 14px);
	padding: 16px 20px;
}
.sbt-sommaire-titre{
	font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-weight: 700;
	font-size: .9375rem; cursor: pointer; list-style: none;
}
.sbt-sommaire-titre::-webkit-details-marker{ display: none; }
.sbt-sommaire ol{ list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sbt-sommaire li a{
	display: flex; align-items: baseline; gap: 10px; font-size: .9375rem;
	color: var(--sb-encre, #0f172a); text-decoration: none;
}
.sbt-sommaire li a:hover{ color: var(--sb-accent, #2563eb); text-decoration: underline; }
.sbt-sommaire-num{
	font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-weight: 700; font-size: .75rem;
	color: var(--sb-encre, #0f172a); background: var(--sb-surf, #f4f5fa); border-radius: 50%;
	width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}

/*
 * BLOC FIGÉ — ENCADRÉS « LE SAVIEZ-VOUS » / « POINTS À RETENIR » (thématique) — CSS
 * Origine : amatauto.fr, assets/css/v2.css, règles `.amat-encadre--retenir` / `.a2-saviez`
 * (renommées `.sbt-encadre--retenir` / `.sbt-encadre--saviez` ici). Habillage simplifié
 * (gradients/decorations ::before retirés pour rester générique et léger), la structure
 * (grille icône + texte pour « le saviez-vous », liste à puces pour « points à retenir »)
 * est conservée.
 */

.sbt-encadre{ margin-block: 2em; border-radius: var(--sb-rayon-grand, 22px); }

.sbt-encadre-titre{
	margin: 0 0 12px; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif);
	font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em;
}

/* « Points à retenir » — fond foncé, liste à puces check. */
.sbt-encadre--retenir{
	background: var(--sb-fonce, #141733); color: var(--sb-sur-fonce, #ffffff);
	padding: 28px 30px;
}
.sbt-encadre--retenir .sbt-encadre-titre{ color: var(--sb-accent-clair, #93c5fd); }
.sbt-retenir-liste{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sbt-retenir-liste li{
	position: relative; padding-left: 32px; font-size: 1rem; line-height: 1.55;
}
.sbt-retenir-liste li::before{
	content: ""; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; border-radius: 50%;
	background: var(--sb-accent, #2563eb)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
		center / 12px no-repeat;
}

/* « Le saviez-vous ? » — encadré clair, icône ampoule. */
.sbt-encadre--saviez{
	display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start;
	padding: 22px 24px; background: var(--sb-surf, #f4f5fa);
}
.sbt-encadre--saviez::before{
	content: "?"; grid-row: 1 / span 2; width: 48px; height: 48px; border-radius: 14px;
	background: var(--sb-accent, #2563eb); color: #fff; display: flex; align-items: center; justify-content: center;
	font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-weight: 700; font-size: 1.375rem;
}
.sbt-encadre--saviez .sbt-encadre-titre{ grid-column: 2; margin: 0; color: var(--sb-encre, #0f172a); }
.sbt-encadre--saviez p:not(.sbt-encadre-titre){ grid-column: 2; margin: 0; font-size: 1rem; line-height: 1.6; color: var(--sb-encre, #0f172a); }

@media (max-width: 620px){
	.sbt-encadre--saviez{ grid-template-columns: 1fr; }
	.sbt-encadre--saviez::before{ grid-row: 1; }
	.sbt-encadre--saviez .sbt-encadre-titre, .sbt-encadre--saviez p:not(.sbt-encadre-titre){ grid-column: 1; }
}
/* 04/10/2026 (invalidcast.com) : la règle de liste du corps d'article écrasait le retrait → la coche mangeait la 1re lettre. */
.sbt-article-corps .sbt-retenir-liste{ padding: 0; margin: 0; list-style: none; }
.sbt-article-corps .sbt-retenir-liste li{ padding-left: 34px; margin: 0; text-indent: 0; }

/*
 * BLOC FIGÉ — FAQ EN ACCORDÉON (thématique) — CSS
 * Visuel inspiré du rendu RÉEL de solutionminceur.fr, classes `.smr-faq*` récupérées par
 * un unique curl en lecture seule sur
 * `https://solutionminceur.fr/wp-content/themes/solutionminceur-v2/roxane.css`
 * (fichier CSS distant, absent du mirroir local du chantier — ce curl a RÉUSSI, voir
 * README). Classes renommées `.sbt-faq*` ici, variables de couleur remplacées par des
 * `var(--sb-*, repli)` génériques.
 *
 * Mécanisme accordéon (natif <details>/<summary>, sans JS) : cf. partial-faq.php, origine
 * health-nutrition-cambrai.fr.
 */

.sbt-faq{ margin: 56px 0; padding: 30px; border-radius: var(--sb-rayon-grand, 22px); background: var(--sb-surf, #f4f5fa); border: 1px solid var(--sb-filet, #e2e5ef); }
.sbt-faq-liste{ display: grid; gap: 10px; }
.sbt-faq-liste details{
	background: var(--sb-fond-carte, #ffffff); border: 1px solid var(--sb-filet, #e2e5ef) !important;
	border-radius: 14px; padding: 0 !important; transition: box-shadow .25s ease, border-color .25s ease;
}
.sbt-faq-liste details[open]{ box-shadow: var(--sb-ombre, 0 8px 24px rgba(15,23,42,.08)); border-color: var(--sb-accent, #2563eb) !important; }
.sbt-faq-liste summary{
	list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
	gap: 18px; padding: 18px 20px; font-size: 1.03rem; font-weight: 600; line-height: 1.45; color: var(--sb-encre, #0f172a);
}
.sbt-faq-liste summary::-webkit-details-marker{ display: none; }
.sbt-faq-liste summary::after{
	content: ""; width: 30px; height: 30px; flex: none; border-radius: 50%;
	background: var(--sb-surf, #f4f5fa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 15px no-repeat;
	transition: transform .3s ease;
}
.sbt-faq-liste details[open] summary::after{ transform: rotate(135deg); }
.sbt-faq-liste summary:hover{ color: var(--sb-accent, #2563eb); }
.sbt-faq-reponse{ padding: 0 20px 18px; font-size: .96875rem; line-height: 1.75; color: var(--sb-doux, #55607a); }
.sbt-faq-reponse p{ margin: 0 0 14px; }
.sbt-faq-reponse p:last-child{ margin-bottom: 0; }

@media (max-width: 760px){
	.sbt-faq{ padding: 20px; }
}

/*
 * BLOC FIGÉ — SIGNATURE / BOÎTE AUTEUR (thématique) — CSS
 * Visuel inspiré du rendu RÉEL de solutionminceur.fr, classes `.smr-auteur*` récupérées
 * par le même curl en lecture seule que partial-faq.css (roxane.css, voir README).
 * Classes renommées `.sbt-auteur*` ici, variables de couleur remplacées par des
 * `var(--sb-*, repli)` génériques.
 */

.sbt-auteur{
	display: grid; grid-template-columns: 120px 1fr; gap: 26px; margin: 54px 0 10px;
	padding: 30px; border-radius: var(--sb-rayon-grand, 22px);
	background: var(--sb-surf, #f4f5fa); border: 1px solid var(--sb-filet, #e2e5ef);
}
.sbt-auteur-photo img{
	width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
	box-shadow: 0 0 0 5px var(--sb-fond-carte, #ffffff), var(--sb-ombre, 0 8px 24px rgba(15,23,42,.08));
}
.sbt-auteur-sur{ margin: 0 0 2px; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sb-doux, #55607a); }
.sbt-auteur-nom{ font-size: 1.5rem; margin: 0 0 4px; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); }
.sbt-auteur-nom a{ color: var(--sb-encre, #0f172a); text-decoration: none; }
.sbt-auteur-nom a:hover{ text-decoration: underline; }
.sbt-auteur-role{ margin: 0 0 12px; font-size: .8125rem; font-weight: 600; color: var(--sb-accent, #2563eb); text-transform: uppercase; letter-spacing: .05em; }
.sbt-auteur-bio{ font-size: .96875rem; line-height: 1.7; color: var(--sb-encre, #0f172a); margin: 0 0 16px; }
.sbt-auteur-chiffres{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sbt-auteur-chiffres span{ background: var(--sb-fond-carte, #ffffff); border-radius: 12px; padding: 8px 12px; font-size: .78125rem; color: var(--sb-doux, #55607a); }
.sbt-auteur-chiffres b{ color: var(--sb-encre, #0f172a); margin-right: 4px; }
.sbt-auteur-der{ margin-bottom: 18px; }
.sbt-auteur-der p{ margin: 0 0 6px; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sb-doux, #55607a); }
.sbt-auteur-der a{ display: block; font-size: .9375rem; font-weight: 500; padding: 6px 0; color: var(--sb-encre, #0f172a); text-decoration: none; border-bottom: 1px dashed var(--sb-filet, #e2e5ef); }
.sbt-auteur-der a:hover{ color: var(--sb-accent, #2563eb); }
.sbt-auteur-actions{ display: flex; flex-wrap: wrap; gap: 10px; }
.sbt-auteur-actions .sbt-btn{
	display: inline-block; padding: 10px 18px; border-radius: 999px; font-size: .875rem; font-weight: 600;
	text-decoration: none; background: var(--sb-accent, #2563eb); color: #fff;
}
.sbt-auteur-actions .sbt-btn--fantome{ background: transparent; border: 1.5px solid var(--sb-filet, #e2e5ef); color: var(--sb-encre, #0f172a); }

@media (max-width: 700px){
	.sbt-auteur{ grid-template-columns: 1fr; padding: 22px; }
	.sbt-auteur-photo img{ width: 88px; height: 88px; }
}

/*
 * BLOC FIGÉ — PIED DE PAGE (thématique) — CSS
 * Origine : curieux-du-web.com, theme/style.css, règles `.cdw-footer*` / `.cdw-cookies*` /
 * `.cdw-popup-sortie*` / `.cdw-btn*` (renommées `.sbt-footer*` / `.sbt-cookies*` /
 * `.sbt-popup-sortie*` / `.sbt-btn*` ici).
 */

.sbt-btn{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 24px; border-radius: 999px; font-weight: 700; font-size: 1rem;
	background: var(--sb-accent, #2563eb); color: #fff; text-decoration: none; border: 0; cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease;
}
.sbt-btn:hover{ transform: translateY(-2px); box-shadow: var(--sb-ombre, 0 8px 24px rgba(15,23,42,.08)); }
.sbt-btn--petit{ padding: 10px 18px; font-size: .875rem; }
.sbt-btn--fantome{ background: transparent; border: 1.5px solid rgba(255,255,255,.5); color: inherit; }

.sbt-footer{ background: var(--sb-fonce, #141733); color: var(--sb-sur-fonce, #ffffff); padding-block: clamp(40px,6vw,64px) 24px; }
.sbt-footer a{ color: #c4c7e4; text-decoration: none; }
.sbt-footer a:hover{ color: #fff; }
.sbt-footer a.sbt-btn, .sbt-footer a.sbt-btn:hover{ color: #fff; } /* 10/10/2026 (blueau.fr) : « .sbt-footer a » battait la couleur du bouton (texte gris sur accent, 4,25:1) */

.sbt-footer-cta{
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	padding: 24px 28px; margin-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 600px){ .sbt-footer-cta{ padding: 20px; } } /* 04/10/2026 (invalidcast.com) : texte collé au bord dès qu'un thème donne un fond de carte au bandeau */
.sbt-footer-cta .sbt-t3{ color: #fff; margin: 0 0 4px; font-size: 1.25rem; }
.sbt-footer-cta p{ color: #a9acd0; margin: 0; max-width: 46ch; }

.sbt-footer-grille{ display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.12); }
@media (max-width: 980px){ .sbt-footer-grille{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .sbt-footer-grille{ grid-template-columns: 1fr; } }
.sbt-footer-colonne .sbt-t4{ font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: #8b8fb5; margin: 0 0 14px; }
.sbt-footer-colonne ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sbt-footer-colonne ul a{ font-size: .875rem; }
.sbt-footer-logo{ display: block; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-weight: 700; font-size: 1.125rem; color: #fff; margin-bottom: 14px; }
.sbt-footer-desc{ color: #a9acd0; font-size: .9375rem; margin: 0; max-width: 32ch; }
.sbt-footer-contact{ display: flex; flex-direction: column; gap: 8px; font-size: .875rem; }

.sbt-footer-bas{ padding-top: 20px; font-size: .8125rem; color: #8b8fb5; }

/* Bandeau cookies — deux boutons de MÊME poids (même classe .sbt-btn/.sbt-btn--petit),
   jamais un seul « J'ai compris » qui vaudrait acceptation forcée. */
.sbt-cookies{
	position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 80;
	background: var(--sb-fonce, #141733); color: #fff; border-radius: 12px;
	padding: 10px 14px; display: none; align-items: center; gap: 12px;
	box-shadow: var(--sb-ombre-forte, 0 16px 40px rgba(15,23,42,.16)); max-height: 64px; overflow: hidden;
}
.sbt-cookies.est-visible{ display: flex; }
.sbt-cookies p{ margin: 0; flex: 1; min-width: 0; font-size: .75rem; line-height: 1.3; }
.sbt-cookies-actions{ display: flex; gap: 8px; flex-shrink: 0; }
.sbt-cookies .sbt-btn{ flex-shrink: 0; padding: 8px 14px; min-height: 32px; font-size: .8125rem; }

/* Popup de sortie — jamais de colonne image vide : si pas d'image, la boîte bascule sur
   une seule colonne (cf. .sbt-popup-sortie-boite--sans-image). */
.sbt-popup-sortie{ position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; }
.sbt-popup-sortie.est-ouvert{ display: flex; }
.sbt-popup-sortie-fond{ position: absolute; inset: 0; background: rgba(15,23,42,.7); }
.sbt-popup-sortie-boite{
	position: relative; z-index: 1; background: var(--sb-fond-carte, #ffffff); border-radius: var(--sb-rayon, 14px);
	max-width: 720px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
	box-shadow: var(--sb-ombre-forte, 0 16px 40px rgba(15,23,42,.16)); max-height: 90vh;
}
.sbt-popup-sortie-boite--sans-image{ grid-template-columns: 1fr; max-width: 480px; }
@media (max-width: 640px){ .sbt-popup-sortie-boite{ grid-template-columns: 1fr; max-height: 85vh; overflow-y: auto; } }
.sbt-popup-sortie-image{ min-height: 220px; }
.sbt-popup-sortie-image img{ width: 100%; height: 100%; object-fit: cover; }
.sbt-popup-sortie-texte{ padding: 28px; color: var(--sb-encre, #0f172a); }
.sbt-popup-sortie-fermer{
	position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
	background: var(--sb-fond-carte, #ffffff); border: 1px solid var(--sb-filet, #e2e5ef);
	display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.sbt-popup-sortie-fermer svg{ width: 20px; height: 20px; }

/*
 * Distri-Pompes — dp-coupe : habillage complet (chargé APRÈS les blocs figés : il les habille par les variables --sb-* et par
 * des surcharges ciblées). Concept : la coupe de la maison, du toit à la cuve. Une seule palette (Bruine, Terre, Bleu pluie,
 * Bleu pluie profond, Jaune ciré, Blanc), Lilita One (≥ 22 px) + Radio Canada. Pas de mode sombre. Un seul coin arrondi en
 * « goutte » (haut droit, 48 px) sur les cartes ; pas d'ombre portée ; filets Terre 12 %.
 * Mouvement : traits de pluie et ondulation du niveau d'eau, lents, coupés par prefers-reduced-motion. Rien n'est caché
 * tant qu'on n'a pas défilé.
 */

/* ===================================================== Base ===================================================== */
.dp-cont { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 24px; }
.dp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dp-evitement { position: absolute; left: 12px; top: -64px; z-index: 300; background: #fff; color: var(--dp-terre); padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.dp-evitement:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--dp-bleu-p); outline-offset: 2px; }
.dp-main { display: block; min-height: 50vh; }
.dp-goutte { width: 1em; height: 1em; flex: none; }
.dp-picto { width: 20px; height: 20px; flex: none; }
.dp-source { font-size: 13px; line-height: 1.5; color: var(--dp-doux); margin: 14px 0 0; max-width: 96ch; }

.dp-btn, .sbt-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px;
	border-radius: 10px; border: 2px solid transparent; font: 700 16px/1 var(--dp-texte); text-decoration: none; cursor: pointer;
	transition: filter .2s ease, transform .2s ease, border-color .2s ease; white-space: nowrap; background: var(--dp-bleu-p); color: #fff;
}
.dp-btn:hover, .sbt-btn:hover { filter: brightness(1.12); transform: none; box-shadow: none; }
.dp-btn--cire { background: var(--dp-jaune); color: var(--dp-terre); border-color: var(--dp-terre); }
.dp-btn--cire:hover { filter: brightness(1.05); }
.dp-btn--bleu { background: var(--dp-bleu-p); color: #fff; }
.dp-btn--fantome, .sbt-btn--fantome { background: transparent; color: var(--dp-bleu-p); border-color: var(--dp-bleu-p); }
.dp-btn[disabled] { opacity: .6; cursor: default; }
.dp-lien-fleche { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--dp-bleu-p); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.dp-lien-fleche:hover { color: var(--dp-terre); }

.sbt-fil-ariane.dp-ariane { padding: 0 0 14px; font-size: 13.5px; color: var(--dp-doux); gap: 8px; }
.sbt-fil-ariane.dp-ariane a { color: var(--dp-doux); text-decoration: underline; text-underline-offset: 3px; }
.sbt-fil-ariane.dp-ariane a:hover { color: var(--dp-terre); }

/* Repli d'une photo manquante : aplat Bruine foncé + goutte Bleu pluie. Jamais une case vide. */
.dp-repli { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 100%; background: rgba(42, 38, 32, .08); }
.dp-repli-goutte { width: 44px; height: 44px; color: var(--dp-bleu); }

/* ===================================================== En-tête ===================================================== */
.dp-entete { position: sticky; top: 0; z-index: 100; background: var(--dp-bruine); border-bottom: 1px solid var(--dp-filet); }
.admin-bar .dp-entete { top: 32px; }
.dp-entete-in { max-width: 1320px; margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; gap: 28px; }
.dp-entete-logo { text-decoration: none; color: var(--dp-terre); flex: none; }
.dp-logo { display: inline-flex; align-items: center; gap: 10px; }
.dp-logo-sym { width: 36px; height: 36px; display: block; }
.dp-logo-mot { font-family: var(--dp-titre); font-size: 26px; line-height: 1; letter-spacing: 0; color: var(--dp-terre); }
.dp-menu-bouton { display: none; }
.dp-nav { display: flex; align-items: center; justify-content: flex-end; gap: 30px; flex: 1; min-width: 0; }
.dp-nav-liste { display: flex; flex-wrap: nowrap; gap: 0 22px; list-style: none; margin: 0; padding: 0; }
.dp-nav-item a { display: block; padding: 10px 0 6px; font: 500 15px/1.2 var(--dp-texte); color: var(--dp-terre); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.dp-nav-item a:hover { border-bottom-color: var(--dp-bleu); }
.dp-nav-item.est-actif a { border-bottom-color: var(--dp-bleu-p); font-weight: 700; }
/* « Ma cuve » : lien texte souligné d'un trait d'eau ondulé (jamais une pilule colorée). */
.dp-nav-cuve { font: 700 15px/1.2 var(--dp-texte); color: var(--dp-terre); white-space: nowrap; text-decoration: underline wavy var(--dp-bleu); text-decoration-thickness: 2px; text-underline-offset: 7px; padding: 6px 0; flex: none; }
.dp-nav-cuve:hover { color: var(--dp-bleu-p); }

@media (max-width: 1180px) {
	.dp-entete-in { gap: 16px; }
	.dp-menu-bouton { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 2px solid var(--dp-terre); background: transparent; font: 700 15px/1 var(--dp-texte); cursor: pointer; }
	.dp-nav { position: fixed; top: 68px; left: 0; right: 0; bottom: 0; z-index: 99; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 22px; padding: 22px 24px 40px; background: var(--dp-bruine); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
	.admin-bar .dp-nav { top: 100px; }
	.dp-menu-ouvert .dp-nav { opacity: 1; visibility: visible; transform: none; }
	.dp-menu-ouvert { overflow: hidden; }
	.dp-nav-liste { flex-direction: column; gap: 0; }
	.dp-nav-item a { font: 400 26px/1.2 var(--dp-titre); padding: 14px 0; border-bottom: 1px solid var(--dp-filet); }
	.dp-nav-item.est-actif a { font-weight: 400; border-bottom-color: var(--dp-bleu-p); }
	.dp-nav-cuve { font-size: 20px; align-self: flex-start; }
}

/* ===================================================== Boutons de formulaire, champs ===================================================== */
.dp-cuve-msg { margin: 0; font: 600 13px/1.3 var(--dp-texte); color: var(--dp-terre); }
.dp-cuve-msg:empty { display: none; }
.dp-cuve-msg:not(:empty) { display: inline-block; align-self: flex-start; margin-top: 6px; padding: 4px 10px; border-radius: 8px; background: var(--dp-jaune); }
.dp-cuve-msg.est-ok { background: var(--dp-bleu-p); color: #fff; }

/* ===================================================== LE PREMIER ÉCRAN — la coupe de terrain ===================================================== */
.dp-hero { position: relative; background: var(--dp-bruine); overflow: hidden; isolation: isolate; }
.dp-hero-pluie { position: absolute; left: 0; right: 0; top: 0; height: 320px; overflow: hidden; z-index: 0; pointer-events: none; }
.dp-hero-pluie::before, .dp-ap-tete .dp-hero-pluie::before {
	content: ""; position: absolute; inset: -140px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg stroke='%234790A4' stroke-opacity='.3' stroke-width='1.4' stroke-linecap='round' fill='none'%3E%3Cpath d='M30 6l-8 22M78 40l-8 22M120 12l-8 22M52 84l-8 22M104 96l-8 22M12 112l-8 22'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 140px 140px; animation: dp-pluie 26s linear infinite;
}
@keyframes dp-pluie { to { transform: translate3d(-140px, 140px, 0); } }

/* La terre en coupe : Terre à 9 % sur Bruine, de la ligne de sol au bas de la section. */
.dp-hero-terre { position: absolute; left: 0; right: 0; top: 380px; bottom: 0; background: var(--dp-sol); z-index: 0; }

.dp-hero-in { position: relative; z-index: 2; width: min(1272px, calc(100% - 48px)); margin-inline: auto; height: 704px; }

/* Le sol : une bande de pelouse en photo, pleine largeur, 60 px, bord supérieur irrégulier (masque de brins). */
.dp-hero-sol, .dp-footer-herbe, .dp-ap-sol {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='60' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60L0 18L5 8L9 19L15 2L20 18L27 9L31 20L38 4L43 19L50 10L55 20L62 1L67 18L75 7L80 19L87 3L92 19L100 10L105 21L112 2L117 18L124 8L129 20L136 4L141 19L148 9L153 20L160 1L165 18L172 7L177 19L184 3L189 18L195 9L200 16L200 60Z'/%3E%3C/svg%3E") left top / 200px 100% repeat-x;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='60' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60L0 18L5 8L9 19L15 2L20 18L27 9L31 20L38 4L43 19L50 10L55 20L62 1L67 18L75 7L80 19L87 3L92 19L100 10L105 21L112 2L117 18L124 8L129 20L136 4L141 19L148 9L153 20L160 1L165 18L172 7L177 19L184 3L189 18L195 9L200 16L200 60Z'/%3E%3C/svg%3E") left top / 200px 100% repeat-x;
}
.dp-hero-sol { position: absolute; left: 50%; width: 100vw; transform: translateX(-50%); top: 320px; height: 60px; z-index: 1; pointer-events: none; }
.dp-hero-sol img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dp-hero-sol--repli { background: rgba(42, 38, 32, .2); }

.dp-hero-ciel { height: 320px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 48px; align-items: start; }
.dp-hero-texte { padding-top: 50px; max-width: 780px; }
.dp-hero-texte h1 { font-size: clamp(38px, 4vw, 56px); line-height: 1.06; color: var(--dp-terre); text-wrap: balance; max-width: 14em; }
.dp-hero-chapo { margin: 18px 0 0; font-size: 19px; line-height: 1.5; max-width: 38em; color: var(--dp-terre); }
.dp-hero-preuve { margin: 16px 0 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--dp-doux); }
.dp-hero-preuve .dp-goutte { color: var(--dp-bleu); width: 16px; height: 16px; }

/* L'avant-toit : une photo réelle détourée en silhouette de pignon (jamais un rectangle ni un cercle). */
.dp-hero-avanttoit { height: 320px; display: flex; align-items: flex-end; justify-content: flex-end; }
.dp-hero-photo { width: 360px; height: 300px; background: rgba(42, 38, 32, .08); clip-path: polygon(0 36%, 7% 31%, 58% 0, 100% 22%, 100% 100%, 0 100%); }
.dp-hero-photo picture, .dp-hero-photo img, .dp-hero-photo .dp-repli { display: block; width: 100%; height: 100%; }
.dp-hero-photo img { object-fit: cover; }

/* Le tuyau dessiné (Bleu pluie profond, 10 px, coudes arrondis) : la descente traverse le sol et rejoint le trou d'homme de la
   cuve. --dp-descente règle la position de la descente de gouttière sur la photo (distance au bord droit de la photo). */
.dp-hero-in { --dp-descente: 70px; }
.dp-tuyau { position: absolute; z-index: 3; pointer-events: none; border: 0 solid var(--dp-bleu-p); }
.dp-tuyau--a { top: 318px; height: 84px; left: calc(56.24% + 19px); right: calc(var(--dp-descente) - 5px); border-right-width: 10px; border-bottom-width: 10px; border-bottom-right-radius: 26px; }
.dp-tuyau--a::after { content: ""; position: absolute; right: -10px; top: 30px; width: 30px; height: 8px; border-radius: 3px; background: var(--dp-bleu-p); }
.dp-tuyau--b { top: 392px; left: calc(56.24% - 5px); width: 34px; height: 24px; border-left-width: 10px; border-top-width: 10px; border-top-left-radius: 26px; }

.dp-hero-cuve { position: absolute; z-index: 2; left: 0; right: 0; top: 424px; }

/* ===================================================== LA CUVE (formulaire « Ma cuve ») ===================================================== */
.dp-cuve { position: relative; color: var(--dp-terre); font-family: var(--dp-texte); }
.dp-cuve-paroi { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); border: 3px solid var(--dp-terre); border-radius: 44px; background: #fff; }
.dp-cuve-regard { position: absolute; z-index: 3; top: -17px; left: 74%; width: 84px; margin-left: -42px; height: 17px; background: var(--dp-terre); border-radius: 8px 8px 0 0; }
.dp-cuve-regard::after { content: ""; position: absolute; left: 12px; right: 12px; top: 5px; height: 3px; border-radius: 2px; background: rgba(238, 241, 238, .35); }

/* Graduations dans la paroi gauche : 1 000 · 3 000 · 5 000 L */
.dp-cuve-grad { position: relative; background: rgba(42, 38, 32, .06); border-right: 2px solid var(--dp-terre); border-radius: 41px 0 0 41px; }
.dp-grad { position: absolute; left: 0; right: 10px; text-align: right; transform: translateY(50%); font: 400 18px/1 var(--dp-titre); color: var(--dp-terre); white-space: nowrap; }
.dp-cuve-bassin { position: relative; overflow: hidden; border-radius: 0 41px 41px 0; background: #fff; min-width: 0; }
.dp-cuve-tick { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed rgba(42, 38, 32, .3); z-index: 1; pointer-events: none; }

/* Le niveau d'eau : seul dégradé permis (Bleu pluie → Bleu pluie profond, vertical), surface en légère ondulation. */
.dp-cuve-eau { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 10%; background: linear-gradient(to bottom, var(--dp-bleu), var(--dp-bleu-p)); transition: height .9s cubic-bezier(.3, .7, .2, 1); }
.dp-cuve-eau::before {
	content: ""; position: absolute; left: 0; top: -9px; width: calc(100% + 60px); height: 10px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='10' viewBox='0 0 60 10'%3E%3Cpath d='M0 10V5Q15 0 30 5T60 5V10Z' fill='%234790A4'/%3E%3C/svg%3E") repeat-x left bottom / 60px 10px;
	animation: dp-onde 7s linear infinite;
}
@keyframes dp-onde { to { transform: translateX(-60px); } }

.dp-cuve-corps { position: relative; z-index: 2; height: 100%; padding: 14px 20px 12px; display: flex; flex-direction: column; justify-content: center; }
.dp-cuve-titre { margin: 0 0 10px; font: 400 24px/1.1 var(--dp-titre); color: var(--dp-terre); }
.dp-t-court { display: none; }
.dp-cuve-saisie { display: flex; flex-direction: column; margin: 0; }
.dp-cuve-champs { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }

.dp-tuile { background: #fff; border: 1.5px solid rgba(42, 38, 32, .2); border-radius: 14px; padding: 8px 12px 9px; margin: 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.dp-tuile:focus-within { border-color: var(--dp-bleu-p); box-shadow: 0 0 0 3px rgba(43, 88, 100, .22); }
.dp-tuile label, .dp-tuile-lib { font: 600 12.5px/1.1 var(--dp-texte); color: var(--dp-doux); padding: 0; }
.dp-tuile--surface { flex: 0 0 238px; }
.dp-tuile--dep { flex: 0 0 164px; }
.dp-tuile--usages { flex: 1 1 236px; }
.dp-tuile input[type="number"], .dp-tuile select {
	height: 32px; border: 0; background: transparent; padding: 0; min-width: 0; width: 100%; outline: none;
	font: 600 17px/1 var(--dp-texte); color: var(--dp-terre); border-radius: 0;
}
.dp-tuile input[type="number"] { width: 78px; flex: none; -moz-appearance: textfield; appearance: textfield; }
.dp-tuile input[type="number"]::-webkit-outer-spin-button, .dp-tuile input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dp-tuile select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 22px; text-overflow: ellipsis;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A2620' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right center / 18px no-repeat; }
.dp-tuile-ligne { display: flex; align-items: center; gap: 8px; }
.dp-chips { display: flex; gap: 4px; }
.dp-chip { height: 30px; min-width: 38px; padding: 0 8px; border-radius: 8px; border: 1.5px solid rgba(42, 38, 32, .25); background: var(--dp-bruine); font: 600 13px/1 var(--dp-texte); color: var(--dp-terre); cursor: pointer; }
.dp-chip:hover { border-color: var(--dp-bleu-p); }
.dp-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.dp-pill { position: relative; display: inline-block; }
.dp-pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dp-pill span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1.5px solid rgba(42, 38, 32, .25); background: var(--dp-bruine); font: 600 14px/1 var(--dp-texte); white-space: nowrap; }
.dp-pill input:checked + span { background: var(--dp-bleu-p); border-color: var(--dp-bleu-p); color: #fff; }
.dp-pill input:checked + span::before { content: ""; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.dp-pill input:focus-visible + span { outline: 3px solid var(--dp-bleu-p); outline-offset: 2px; }
.dp-btn--cuve { align-self: stretch; flex: 0 0 auto; min-height: 0; padding: 0 22px; font: 400 22px/1 var(--dp-titre); }

/* Résultat : DANS la cuve, sans e-mail. */
.dp-cuve-res { display: none; outline: none; }
.dp-cuve[data-etape="resultat"] .dp-cuve-res, .dp-cuve[data-etape="envoye"] .dp-cuve-res { display: flex; flex-direction: column; gap: 8px; position: relative; }
.dp-cuve[data-etape="resultat"] .dp-cuve-saisie, .dp-cuve[data-etape="envoye"] .dp-cuve-saisie { display: none; }
.dp-res-chiffres { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr; gap: 10px; }
.dp-res-tuile { background: #fff; border: 1.5px solid rgba(42, 38, 32, .2); border-radius: 14px; padding: 8px 14px 9px; min-width: 0; }
.dp-res-lib { margin: 0 0 2px; font: 600 13px/1.2 var(--dp-texte); color: var(--dp-doux); }
.dp-res-nb { margin: 0; display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; }
.dp-res-nb b { font: 400 46px/1 var(--dp-titre); color: var(--dp-bleu-p); }
.dp-res-nb--m b { font-size: 34px; }
.dp-res-nb span { font: 600 14px/1.2 var(--dp-texte); color: var(--dp-doux); }
.dp-res-guide { display: inline-block; margin-top: 2px; font: 700 13px/1.3 var(--dp-texte); color: var(--dp-bleu-p); text-underline-offset: 3px; }
.dp-res-demarche { margin: 0; background: rgba(255, 255, 255, .97); border-radius: 12px; padding: 6px 12px; font: 500 13.5px/1.4 var(--dp-texte); }
.dp-res-src { color: var(--dp-doux); font-size: 12px; }
.dp-cuve-mail-ouvre { display: none; }
.dp-cuve-mail { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; margin: 0; }
.dp-mail-champ { flex: 0 0 124px; display: block; }
.dp-mail-champ--email { flex: 1 1 180px; }
.dp-mail-champ input { width: 100%; height: 44px; border: 1.5px solid rgba(42, 38, 32, .25); border-radius: 10px; padding: 0 12px; background: #fff; font: 500 15px/1 var(--dp-texte); color: var(--dp-terre); }
.dp-mail-champ input:focus { outline: none; border-color: var(--dp-bleu-p); box-shadow: 0 0 0 3px rgba(43, 88, 100, .22); }
.dp-mail-consent { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; background: rgba(255, 255, 255, .97); border-radius: 10px; padding: 6px 10px; font: 500 12.5px/1.25 var(--dp-texte); cursor: pointer; }
.dp-mail-consent input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--dp-bleu-p); }
.dp-cuve-mail .dp-btn { min-height: 44px; padding: 0 16px; font-size: 15px; flex: none; }
.dp-cuve-mail .dp-cuve-msg { flex-basis: 100%; }
.dp-cuve-ok { display: none; margin: 0; padding: 12px 16px; border-radius: 12px; background: #fff; border: 1.5px solid var(--dp-bleu-p); font: 700 16px/1.3 var(--dp-texte); color: var(--dp-bleu-p); }
.dp-cuve[data-etape="envoye"] .dp-cuve-mail, .dp-cuve[data-etape="envoye"] .dp-cuve-mail-ouvre { display: none !important; }
.dp-cuve[data-etape="envoye"] .dp-cuve-ok { display: block; }
.dp-cuve-modifier { align-self: flex-start; background: rgba(255, 255, 255, .97); border: 0; border-radius: 8px; padding: 4px 10px; font: 600 12.5px/1.2 var(--dp-texte); color: var(--dp-bleu-p); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Colonne d'explications, à droite de la cuve (variante « plein »). */
.dp-cuve--plein { display: grid; grid-template-columns: 76% minmax(0, 1fr); column-gap: 24px; }
.dp-cuve--plein .dp-cuve-paroi { height: 268px; }
.dp-cuve-annexe { padding: 10px 4px 0; font-size: 13.5px; line-height: 1.5; color: var(--dp-doux); min-width: 0; }
.dp-annexe-t { margin: 0 0 6px; font: 400 22px/1.1 var(--dp-titre); color: var(--dp-terre); }
.dp-cuve-annexe p { margin: 0 0 8px; }
.dp-annexe-res { display: none; }
.dp-cuve[data-etape="resultat"] .dp-annexe-saisie, .dp-cuve[data-etape="envoye"] .dp-annexe-saisie { display: none; }
.dp-cuve[data-etape="resultat"] .dp-annexe-res, .dp-cuve[data-etape="envoye"] .dp-annexe-res { display: block; }
.dp-rgpd { font-size: 12px; line-height: 1.45; }
.dp-rgpd a { color: var(--dp-bleu-p); }

/* Variante « moyen » : page ville, contact — la cuve occupe sa colonne, les champs passent sur deux lignes. */
.dp-cuve--moyen .dp-cuve-paroi { grid-template-columns: 64px minmax(0, 1fr); min-height: 300px; border-radius: 36px; }
.dp-cuve--moyen .dp-cuve-grad { border-radius: 33px 0 0 33px; }
.dp-cuve--moyen .dp-cuve-bassin { border-radius: 0 33px 33px 0; }
.dp-cuve--moyen .dp-grad { font: 700 13px/1 var(--dp-texte); right: 8px; }
.dp-cuve--moyen .dp-cuve-corps { padding: 16px 16px 14px; }
.dp-cuve--moyen .dp-cuve-champs { flex-wrap: wrap; }
.dp-cuve--moyen .dp-tuile--surface { flex: 1 1 228px; }
.dp-cuve--moyen .dp-tuile--dep { flex: 1 1 170px; }
.dp-cuve--moyen .dp-tuile--usages { flex: 1 1 260px; }
.dp-cuve--moyen .dp-btn--cuve { flex: 1 1 120px; min-height: 56px; }
.dp-cuve--moyen .dp-res-nb b { font-size: 32px; }
.dp-cuve--moyen .dp-res-nb--m b { font-size: 28px; }
.dp-cuve--moyen .dp-cuve-mail { flex-wrap: wrap; }
.dp-cuve--moyen .dp-cuve-annexe { padding: 12px 6px 0; }

/* Variante « compact » : barre latérale des articles (sommaire + cuve en UN bloc collant, plus court que la fenêtre). */
.dp-cuve--compact .dp-cuve-paroi { grid-template-columns: 40px minmax(0, 1fr); border-width: 2.5px; border-radius: 22px; }
.dp-cuve--compact .dp-cuve-grad { border-radius: 19px 0 0 19px; }
.dp-cuve--compact .dp-cuve-bassin { border-radius: 0 19px 19px 0; }
.dp-cuve--compact .dp-grad { font: 700 10px/1.1 var(--dp-texte); right: 4px; }
.dp-cuve--compact .dp-cuve-regard { width: 52px; margin-left: -26px; height: 12px; top: -12px; }
.dp-cuve--compact .dp-cuve-corps { padding: 12px 12px 12px; }
.dp-cuve--compact .dp-cuve-titre { font-size: 22px; margin-bottom: 8px; }
.dp-cuve--compact .dp-t-long { display: none; }
.dp-cuve--compact .dp-t-court { display: inline; }
.dp-cuve--compact .dp-cuve-champs { flex-direction: column; gap: 8px; }
.dp-cuve--compact .dp-tuile--surface, .dp-cuve--compact .dp-tuile--dep, .dp-cuve--compact .dp-tuile--usages { flex: none; width: 100%; }
.dp-cuve--compact .dp-tuile { padding: 6px 10px 7px; }
.dp-cuve--compact .dp-tuile input[type="number"], .dp-cuve--compact .dp-tuile select { font-size: 16px; height: 28px; }
.dp-cuve--compact .dp-chip { height: 28px; min-width: 34px; padding: 0 6px; }
.dp-cuve--compact .dp-pill span { height: 30px; padding: 0 9px; font-size: 13px; }
.dp-cuve--compact .dp-btn--cuve { min-height: 44px; padding: 0 16px; width: 100%; }
.dp-cuve--compact .dp-res-chiffres { grid-template-columns: 1fr; gap: 6px; }
.dp-cuve--compact .dp-res-tuile { padding: 6px 12px 7px; }
.dp-cuve--compact .dp-res-nb b { font-size: 32px; }
.dp-cuve--compact .dp-res-nb--m b { font-size: 28px; }
.dp-cuve--compact .dp-res-demarche { font-size: 12.5px; padding: 5px 10px; }
.dp-cuve--compact .dp-cuve-mail-ouvre { display: inline-block; align-self: flex-start; background: rgba(255, 255, 255, .97); border: 0; border-radius: 8px; padding: 5px 10px; font: 700 12.5px/1.2 var(--dp-texte); color: var(--dp-bleu-p); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.dp-cuve--compact .dp-cuve-mail { display: none; flex-direction: column; align-items: stretch; }
.dp-cuve--compact.mail-ouvert .dp-cuve-mail { display: flex; }
.dp-cuve--compact .dp-mail-champ, .dp-cuve--compact .dp-mail-champ--email, .dp-cuve--compact .dp-mail-consent { flex: none; width: 100%; }
.dp-cuve--compact .dp-cuve-annexe { padding: 8px 2px 0; font-size: 12px; }
.dp-cuve--compact .dp-annexe-t, .dp-cuve--compact .dp-annexe-saisie { display: none; }
.dp-cuve--compact .dp-rgpd { display: none; }
.dp-cuve--compact.mail-ouvert .dp-rgpd { display: block; }

/* ===================================================== Sections de l'accueil ===================================================== */
.dp-section { padding-block: 56px; }
.dp-fond-bruine { background: var(--dp-bruine); }
.dp-fond-blanc { background: #fff; }
.dp-section h2 { font-size: clamp(30px, 3.2vw, 40px); }
.dp-sec-tete { margin-bottom: 30px; }
.dp-sec-tete--ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; }
.dp-sec-lead { margin: 12px 0 0; font-size: 18px; line-height: 1.55; color: var(--dp-doux); max-width: 62ch; }
.dp-bientot-ligne { margin: 0; font-size: 17px; color: var(--dp-doux); }

/* 1. Le trajet d'une goutte : une descente horizontale à coudes qui relie cinq stations de tailles différentes. */
.dp-trajet { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1.25fr 1fr .9fr 1.3fr 1fr; gap: 28px; align-items: start; }
.dp-station { position: relative; padding-top: calc(34px + var(--i, 0) * 14px); min-width: 0; }
.dp-station-pipe { position: absolute; left: -14px; right: -14px; top: calc(var(--i, 0) * 14px); height: 10px; background: var(--dp-bleu); }
.dp-station--1 .dp-station-pipe { left: 0; border-radius: 5px 0 0 5px; }
.dp-station--5 .dp-station-pipe { right: 0; border-radius: 0 5px 5px 0; }
.dp-station:not(:last-child) .dp-station-pipe::after { content: ""; position: absolute; right: 0; top: 0; width: 10px; height: 24px; background: var(--dp-bleu); border-radius: 0 0 5px 5px; }
.dp-station::before { content: ""; position: absolute; left: 50%; margin-left: -5px; top: calc(var(--i, 0) * 14px); width: 10px; height: 34px; background: var(--dp-bleu); }
.dp-station-photo { border-radius: 4px 32px 4px 4px; overflow: hidden; background: rgba(42, 38, 32, .08); }
.dp-station--1 .dp-station-photo { height: 150px; }
.dp-station--2 .dp-station-photo { height: 118px; }
.dp-station--3 .dp-station-photo { height: 134px; }
.dp-station--4 .dp-station-photo { height: 170px; }
.dp-station--5 .dp-station-photo { height: 126px; }
.dp-station-photo img, .dp-station-photo .dp-repli { display: block; width: 100%; height: 100%; object-fit: cover; }
.dp-station h3 { margin: 14px 0 6px; font-size: 22px; }
.dp-station p { margin: 0 0 10px; font-size: 15px; line-height: 1.5; color: var(--dp-doux); }

/* Cartes « goutte coupée » : un seul coin arrondi en goutte (haut droit, 48 px), pas d'ombre, filet Terre 12 %. */
.dp-carte { background: #fff; border: 1px solid var(--dp-filet); border-radius: 4px 48px 4px 4px; overflow: hidden; transition: border-color .2s ease; min-width: 0; }
.dp-carte:hover { border-color: var(--dp-bleu-p); }
.dp-carte-lien { display: block; color: inherit; text-decoration: none; }
.dp-carte-photo { display: block; aspect-ratio: 3 / 2; background: rgba(42, 38, 32, .08); overflow: hidden; }
.dp-carte-photo img, .dp-carte-photo .dp-repli { display: block; width: 100%; height: 100%; object-fit: cover; }
.dp-carte-corps { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.dp-carte-rub { font: 700 12.5px/1.2 var(--dp-texte); color: var(--dp-bleu-p); letter-spacing: .02em; }
.dp-carte-titre { font: 400 22px/1.15 var(--dp-titre); color: var(--dp-terre); text-wrap: balance; }
.dp-carte-lien:hover .dp-carte-titre { text-decoration: underline; text-decoration-color: var(--dp-bleu); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.dp-carte-extrait { font-size: 15px; line-height: 1.5; color: var(--dp-doux); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dp-carte-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 500 13px/1.3 var(--dp-texte); color: var(--dp-doux); }
.dp-carte--grande .dp-carte-photo { aspect-ratio: auto; height: 250px; }
.dp-carte--grande .dp-carte-titre { font-size: 28px; }
.dp-carte--ligne { border-radius: 4px 28px 4px 4px; }
.dp-carte--ligne .dp-carte-lien { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: stretch; }
.dp-carte--ligne .dp-carte-photo { aspect-ratio: auto; height: 100%; min-height: 92px; }
.dp-carte--ligne .dp-carte-corps { padding: 12px 16px; justify-content: center; }
.dp-carte--cachee { display: none; }

/* 2. Eau de pluie : les guides — 1 grande carte + 3 à 4 en liste à vignette. */
.dp-guides { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.dp-guides--seul { grid-template-columns: minmax(0, 640px); }
.dp-guides-liste { display: grid; gap: 14px; align-items: start; }

/* 3. Ce que la loi demande — une descente verticale avec trois piquages. */
.dp-loi { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.dp-loi-interdit { margin: 18px 0 0; padding: 14px 18px; border-left: 6px solid var(--dp-jaune); background: var(--dp-bruine); border-radius: 0 12px 12px 0; font-weight: 600; }
.dp-descente { list-style: none; margin: 0; padding: 0 0 0 46px; position: relative; display: grid; gap: 16px; }
.dp-descente::before { content: ""; position: absolute; left: 14px; top: 0; bottom: 46px; width: 12px; background: var(--dp-bleu); border-radius: 6px 6px 0 0; }
.dp-descente::after { content: ""; position: absolute; left: 14px; bottom: 0; width: 12px; height: 54px; background: var(--dp-bleu); border-radius: 0 0 6px 6px; opacity: .45; }
.dp-piquage { position: relative; }
.dp-piquage-tuyau { position: absolute; left: -32px; top: 36px; width: 32px; height: 10px; background: var(--dp-bleu); }
.dp-piquage-carte { background: var(--dp-bruine); border: 1px solid var(--dp-filet); border-radius: 4px 28px 4px 4px; padding: 16px 22px 18px; }
.dp-piquage-carte h3 { font-size: 24px; }
.dp-piquage-regle { margin: 6px 0 4px; font: 700 16px/1.3 var(--dp-texte); color: var(--dp-bleu-p); }
.dp-piquage-carte p:last-child { margin: 0; font-size: 15px; line-height: 1.5; color: var(--dp-doux); }

/* 4. Combien tombe-t-il chez vous ? — la frise des pluies (96 barres). */
.dp-frise-graph { position: relative; height: 304px; }
.dp-frise-barres { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; bottom: 0; height: 256px; display: flex; align-items: flex-end; gap: 2px; border-bottom: 3px solid var(--dp-terre); }
.dp-barre { flex: 1 1 0; min-width: 0; background: var(--dp-bleu); border-radius: 3px 3px 0 0; transition: background .15s ease; }
.dp-barre:hover, .dp-barre.est-lie { background: var(--dp-bleu-p); }
.dp-frise-et { position: absolute; bottom: calc(256px * var(--h, .5) + 12px); white-space: nowrap; transform: translateX(-50%); font-size: 12.5px; line-height: 1.25; color: var(--dp-terre); text-align: center; }
.dp-frise-et b { display: block; font: 700 13.5px/1.25 var(--dp-texte); }
.dp-frise-et::after { content: ""; position: absolute; left: 50%; margin-left: -1px; top: 100%; width: 2px; height: 9px; background: var(--dp-bleu-p); }
.dp-frise-et--gauche { transform: translateX(-6px); text-align: left; }
.dp-frise-et--gauche::after { left: 6px; margin-left: 0; }
.dp-frise-et--droite { transform: translateX(calc(-100% + 6px)); text-align: right; }
.dp-frise-et--droite::after { left: auto; right: 6px; margin-left: 0; }
.dp-frise-lu { margin: 20px 0 0; font-size: 20px; line-height: 1.4; }
.dp-frise-lu b { font: 400 28px/1.2 var(--dp-titre); color: var(--dp-bleu-p); }

/* 5. Pompes et arrosage / Choisir sa pompe — deux colonnes de longueurs proches. */
.dp-pompes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
.dp-pompes-col .dp-sec-tete { margin-bottom: 20px; }
.dp-pompes-col h2 { font-size: clamp(28px, 2.8vw, 34px); }

/* 6. Par ville — liste compacte, 4 colonnes. */
.dp-villes { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 28px; }
.dp-villes a { display: block; padding: 8px 0; border-bottom: 1px solid var(--dp-filet); color: var(--dp-terre); text-decoration: none; font-weight: 600; }
.dp-villes a:hover { color: var(--dp-bleu-p); border-bottom-color: var(--dp-bleu-p); }

/* ===================================================== Gouttière dessinée (signature) ===================================================== */
.dp-gout { position: relative; height: 30px; }
.dp-gout-barre { position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--dp-bleu); border-radius: 0 0 14px 14px; box-shadow: inset 0 4px 0 var(--dp-bleu-p); }
.dp-gout::after { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 12px; background: repeating-linear-gradient(to right, transparent 0 114px, var(--dp-bleu-p) 114px 120px); }
.dp-gout-descente, .sbt-article-principal::before {
	background: linear-gradient(var(--dp-bleu), var(--dp-bleu)) 4px 0 / 6px 100% no-repeat, repeating-linear-gradient(to bottom, transparent 0, transparent 388px, var(--dp-bleu-p) 388px, var(--dp-bleu-p) 400px);
}
.dp-gout-descente { position: absolute; z-index: 1; left: 24px; top: -22px; bottom: -44px; width: 14px; }

/* ===================================================== En-tête d'article ===================================================== */
.dp-art-entete { position: relative; background: var(--dp-bruine); padding-bottom: 44px; }
.dp-art-cont { position: relative; max-width: 1240px; margin: 0 auto; padding: 14px 24px 0; }
.dp-art-rub { margin: 0 0 12px 44px; font: 700 14px/1.2 var(--dp-texte); letter-spacing: .02em; }
.dp-art-rub a { color: var(--dp-bleu-p); text-decoration: none; }
.dp-art-rub a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dp-art-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 48px; align-items: start; padding-left: 44px; }
.dp-art-txt h1 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; color: var(--dp-terre); text-wrap: balance; }
.dp-art-chapo { margin: 16px 0 0; font-size: 20px; line-height: 1.5; color: rgba(42, 38, 32, .88); max-width: 40em; }
.dp-art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 22px; font-size: 14px; color: var(--dp-doux); }
.dp-art-auteur { display: inline-flex; align-items: center; gap: 10px; color: var(--dp-terre); font-weight: 700; text-decoration: none; }
.dp-art-auteur:hover span { text-decoration: underline; text-underline-offset: 3px; }
.dp-art-auteur img, .dp-art-auteur svg, .dp-art-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }

/* La photo : haut aligné sur le haut du H1, coin supérieur droit en goutte, posée sur un aplat Bleu pluie décalé de 16 px. */
.dp-art-photo { position: relative; margin: 0 16px 16px 0; aspect-ratio: 4 / 3; max-height: min(360px, 52vh); }
.dp-art-photo::before { content: ""; position: absolute; inset: 0; transform: translate(16px, 16px); background: var(--dp-bleu); border-radius: 4px 48px 4px 4px; }
.dp-art-photo img, .dp-art-photo .dp-repli { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px 48px 4px 4px; }
.dp-art-photo .dp-repli { background: #D8DFDB; }

/* ===================================================== Corps d'article, rail, blocs figés habillés ===================================================== */
.sbt-article-mise-en-page { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 56px; row-gap: 24px; max-width: 1240px; justify-content: stretch; padding: 0 24px 72px; }
.sbt-article-principal { position: relative; background: #fff; padding: 40px 44px 44px; min-width: 0; border-radius: 0 0 4px 4px; }
.sbt-article-principal::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; border-radius: 0 0 7px 7px; }
.sbt-article-corps { font-size: 18px; line-height: 1.65; color: var(--dp-terre); font-family: var(--dp-texte); }
.sbt-article-corps > :first-child { margin-top: 0; }
.sbt-article-corps h2 { font: 400 clamp(28px, 2.6vw, 34px)/1.12 var(--dp-titre); margin: 2em 0 .55em; text-wrap: balance; }
.sbt-article-corps h3 { font: 400 24px/1.2 var(--dp-titre); margin: 1.6em 0 .45em; }
.sbt-article-corps p { margin-bottom: 1.2em; }
.sbt-article-corps a { color: var(--dp-bleu-p); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.sbt-article-corps a:hover { color: var(--dp-terre); }
.sbt-article-corps ul, .sbt-article-corps ol { padding-left: 1.3em; margin: 0 0 1.3em; }
.sbt-article-corps li { margin-bottom: .45em; }
.sbt-article-corps li::marker { color: var(--dp-bleu); }
.sbt-article-corps img { border-radius: 4px 32px 4px 4px; margin-block: 1.4em; width: 100%; height: auto; }
.sbt-article-corps blockquote { margin: 1.8em 0; padding: 16px 22px; border-left: 6px solid var(--dp-bleu); background: var(--dp-bruine); border-radius: 0 16px 16px 0; font-style: normal; }
.sbt-article-corps figure { margin: 1.6em 0; }
.sbt-article-corps figcaption { font-size: 13.5px; color: var(--dp-doux); margin-top: 6px; }

/* Rail : sommaire + cuve compacte en UN bloc collant, plus court que la fenêtre, jamais de barre de défilement interne. */
.sbt-rail { top: 92px; gap: 0; padding: 0; border: 1px solid var(--dp-filet); border-left: 1px solid var(--dp-filet); background: #fff; border-radius: 4px 40px 4px 4px; }
.sbt-rail-carte { border: 0; border-radius: 0; background: transparent; padding: 18px 18px 14px; }
.sbt-rail > .dp-cuve, .sbt-rail > .dp-rail-lien { margin: 0; padding: 14px 16px 16px; border-top: 1px dashed rgba(42, 38, 32, .25); }
.sbt-rail-carte--sommaire + .dp-cuve, .sbt-rail > .dp-cuve:first-child { border-top: 0; }
.sbt-sommaire { background: transparent; border: 0; border-radius: 0; padding: 0; }
.sbt-sommaire-titre { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 400 22px/1.1 var(--dp-titre); color: var(--dp-terre); cursor: pointer; }
.sbt-sommaire-titre::after { content: ""; width: 20px; height: 20px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B5864' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s ease; }
.sbt-sommaire[open] .sbt-sommaire-titre::after { transform: rotate(180deg); }
.sbt-sommaire:not([open]) .sbt-sommaire-titre::before { content: attr(data-n) " parties"; order: 2; margin-left: auto; font: 600 12.5px/1 var(--dp-texte); color: var(--dp-doux); }
.sbt-sommaire:not([open]) .sbt-sommaire-titre::after { order: 3; }
.sbt-sommaire ol { margin: 12px 0 0; gap: 2px; }
.sbt-sommaire li a { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; font-size: 14.5px; line-height: 1.35; color: var(--dp-terre); }
.sbt-sommaire li a:hover { color: var(--dp-bleu-p); text-decoration: none; }
.sbt-sommaire-libelle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbt-sommaire-num { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--dp-bruine); color: var(--dp-bleu-p); font: 700 11.5px/1 var(--dp-texte); }
.sbt-sommaire-mobile .sbt-sommaire { background: #fff; border: 1px solid var(--dp-filet); border-radius: 4px 28px 4px 4px; padding: 14px 18px; }
.dp-rail-lien { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.dp-rail-lien-t { margin: 0; font: 400 22px/1.15 var(--dp-titre); }
.dp-rail-lien p { margin: 0; font-size: 14.5px; color: var(--dp-doux); }

/* Encadrés (bloc figé) : filet gauche Bleu pluie « À retenir », Jaune ciré « Attention ». */
.sbt-encadre { border-radius: 4px 28px 4px 4px; }
.sbt-encadre--retenir { background: var(--dp-bruine); color: var(--dp-terre); border-left: 6px solid var(--dp-bleu); padding: 22px 26px; }
.sbt-encadre--retenir .sbt-encadre-titre { color: var(--dp-bleu-p); font: 700 13px/1.2 var(--dp-texte); }
.sbt-retenir-liste li::before { border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234790A4' d='M12 2.4c3.5 4.5 6.5 8 6.5 11.7a6.5 6.5 0 0 1-13 0C5.5 10.4 8.5 6.9 12 2.4Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.sbt-encadre--saviez { background: #fff; border: 1px solid var(--dp-filet); border-left: 6px solid var(--dp-jaune); }
.sbt-encadre--saviez::before { border-radius: 50%; background: var(--dp-jaune); color: var(--dp-terre); font-family: var(--dp-titre); }
.sbt-encadre--saviez .sbt-encadre-titre { color: var(--dp-terre); }

/* FAQ en accordéon : question en Lilita, chevron goutte. */
.sbt-faq { background: var(--dp-bruine); border: 0; border-radius: 4px 40px 4px 4px; padding: 28px; }
.sbt-faq-liste details { border-radius: 4px 22px 4px 4px; border-color: var(--dp-filet) !important; }
.sbt-faq-liste details[open] { box-shadow: none; border-color: var(--dp-bleu-p) !important; }
.sbt-faq-liste summary { font: 400 22px/1.2 var(--dp-titre); color: var(--dp-terre); }
.sbt-faq-liste summary:hover { color: var(--dp-bleu-p); }
.sbt-faq-liste summary::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234790A4' d='M12 2.4c3.5 4.5 6.5 8 6.5 11.7a6.5 6.5 0 0 1-13 0C5.5 10.4 8.5 6.9 12 2.4Z'/%3E%3C/svg%3E") center / 22px no-repeat; border-radius: 0; width: 30px; height: 30px; }
.sbt-faq-liste details[open] summary::after { transform: rotate(180deg); }
.sbt-faq-reponse { color: var(--dp-terre); }

/* Boîte auteur (bloc figé). */
.sbt-auteur { background: var(--dp-bruine); border: 0; border-radius: 4px 40px 4px 4px; margin-top: 48px; }
.sbt-auteur-photo img, .sbt-auteur-photo svg { box-shadow: 0 0 0 5px #fff; border-radius: 50%; }
.sbt-auteur-nom { font-family: var(--dp-titre); font-size: 26px; }
.sbt-auteur-role { color: var(--dp-bleu-p); }
.sbt-auteur-chiffres span { border-radius: 10px; }
.sbt-auteur-der a { border-bottom-color: var(--dp-filet); }
.sbt-auteur-actions .sbt-btn { border-radius: 10px; background: var(--dp-bleu-p); color: #fff; }
.sbt-auteur-actions .sbt-btn--fantome { background: transparent; color: var(--dp-bleu-p); border: 2px solid var(--dp-bleu-p); }

/* Blocs tirés du texte : repères, étapes, coches, fiches, sources. */
.dp-bloc { margin: 2em 0; padding: 20px 26px 22px; background: var(--dp-bruine); border-left: 6px solid var(--dp-bleu); border-radius: 4px 28px 4px 4px; }
.dp-bloc p:last-child { margin-bottom: 0; }
.dp-bloc-etiquette { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 13px/1.2 var(--dp-texte); color: var(--dp-bleu-p); letter-spacing: .02em; }
.dp-bloc-etiquette .dp-goutte { width: 16px; height: 16px; color: var(--dp-bleu); }
.dp-bref-titre { margin-top: 0 !important; }
.dp-repere-chiffre { margin: 0 0 4px; font: 400 clamp(44px, 5vw, 60px)/1 var(--dp-titre); color: var(--dp-bleu-p); }
.dp-repere-phrase { margin: 0; font-size: 17px; line-height: 1.55; }
.dp-bloc--retenir .dp-repere-phrase { font-weight: 600; }
.dp-bloc--fin { border-left-color: var(--dp-jaune); background: #fff; border: 1px solid var(--dp-filet); border-left: 6px solid var(--dp-jaune); }

.dp-etapes { list-style: none; margin: 1.8em 0; padding: 0; display: grid; gap: 14px; counter-reset: dp; }
.dp-etape { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; }
.dp-etape-n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--dp-bleu-p); color: #fff; font: 400 22px/1 var(--dp-titre); }
.dp-etape-corps { padding-top: 6px; }
.dp-etape-corps > :last-child { margin-bottom: 0; }
.dp-coches { list-style: none; margin: 1.6em 0; padding: 18px 22px; background: var(--dp-bruine); border-radius: 4px 28px 4px 4px; display: grid; gap: 10px; }
.sbt-article-corps .dp-coches { padding: 18px 22px; }
.dp-coches li { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.dp-coches .dp-goutte { width: 18px; height: 20px; margin-top: 4px; color: var(--dp-bleu); }
.dp-fiches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 1.8em 0; align-items: start; }
.dp-fiches--n3, .dp-fiches--n6, .dp-fiches--n9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dp-fiches--pile { grid-template-columns: 1fr; }
.dp-fiches--impair > .dp-fiche:last-child { grid-column: 1 / -1; }
.dp-fiche { background: var(--dp-bruine); border-radius: 4px 28px 4px 4px; padding: 16px 20px 18px; position: relative; }
.dp-fiche-marque { display: block; margin-bottom: 8px; color: var(--dp-bleu); }
.dp-fiche-marque .dp-goutte { width: 20px; height: 22px; }
.dp-fiche-n { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 8px; border-radius: 50%; background: var(--dp-bleu-p); color: #fff; font: 400 22px/1 var(--dp-titre); }
.dp-fiche-titre, .dp-fiche-t { margin: 0 0 6px; font: 400 22px/1.2 var(--dp-titre); }
.dp-fiche-texte { margin: 0; font-size: 16px; line-height: 1.55; }
.dp-fiche-precision { display: block; font: 600 13px/1.3 var(--dp-texte); color: var(--dp-doux); }
.dp-fiche-dl { margin: 0; display: grid; gap: 8px; }
.dp-fiche-l { display: grid; gap: 1px; }
.dp-fiche-dl dt { font: 700 12.5px/1.3 var(--dp-texte); color: var(--dp-bleu-p); }
.dp-fiche-dl dd { margin: 0; font-size: 16px; line-height: 1.45; }

/* Bloc Sources : une ligne par source, ses documents en pastilles, la date du relevé en bas. */
.dp-sources { margin: 2.4em 0 1em; padding: 24px 28px 22px; background: var(--dp-bruine); border-radius: 4px 36px 4px 4px; border-left: 6px solid var(--dp-bleu-p); }
.sbt-article-corps .dp-sources-titre { margin: 0 0 12px; font-size: 28px; }
.dp-sources-liste { list-style: none; margin: 0 !important; padding: 0 !important; }
.dp-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 0; margin: 0 !important; border-bottom: 1px solid var(--dp-filet); font-size: 16px; line-height: 1.4; }
.dp-src:last-child { border-bottom: 0; }
.dp-src .dp-goutte { width: 15px; height: 17px; color: var(--dp-bleu); flex: none; }
.dp-src-org { font-weight: 700; color: var(--dp-terre); }
.sbt-article-corps a.dp-src-org { text-decoration: underline; }
.dp-src-docs { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.sbt-article-corps a.dp-src-doc { display: inline-block; padding: 3px 12px; border: 1.5px solid rgba(43, 88, 100, .45); border-radius: 999px; font-size: 14px; text-decoration: none; background: #fff; }
.sbt-article-corps a.dp-src-doc:hover { background: var(--dp-bleu-p); color: #fff; }
.dp-sources-date { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed rgba(42, 38, 32, .25); font-size: 13.5px; color: var(--dp-doux); }
.dp-maillage-titre { font: 400 22px/1.2 var(--dp-titre); margin: 2em 0 .5em; }
.dp-maillage ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.dp-maillage li { margin: 0; }
.dp-maillage a { display: inline-block; padding: 6px 14px; border: 1.5px solid var(--dp-filet); border-radius: 999px; text-decoration: none; font-size: 15px; }

/* « À lire aussi » : section pleine largeur, des cartes goutte coupée de la MÊME rubrique, jamais de case vide. */
.dp-alire { background: #fff; padding: 56px 0 72px; }
.dp-alire-t { font-size: 34px; margin-bottom: 24px; }
.dp-grille { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 24px; align-items: start; }
.dp-alire .dp-grille { grid-template-columns: repeat(var(--n, 3), minmax(0, 380px)); }
.dp-pilules { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dp-pilules a { display: inline-block; padding: 8px 18px; border: 1.5px solid rgba(42, 38, 32, .25); border-radius: 999px; color: var(--dp-terre); text-decoration: none; font-weight: 600; }
.dp-pilules a:hover { border-color: var(--dp-bleu-p); color: var(--dp-bleu-p); }
.dp-pilules .dp-pilule--hub { background: var(--dp-bleu-p); color: #fff; border-color: var(--dp-bleu-p); }

/* ===================================================== Page ville ===================================================== */
.dp-ville-tete { position: relative; background: var(--dp-bruine); padding-bottom: 48px; }
.dp-ville-tete-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 48px; align-items: start; padding-top: 24px; }
.dp-ville-titre h1 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; text-wrap: balance; }
.dp-ville-chapo { margin: 16px 0 0; font-size: 19px; line-height: 1.5; }
.dp-ville-faits { margin: 18px 0 0; padding: 14px 18px; background: #fff; border-left: 6px solid var(--dp-bleu); border-radius: 0 16px 16px 0; font-size: 15.5px; line-height: 1.55; }
.dp-ville-corps { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; padding-block: 36px 72px; }
.dp-ville-col { background: #fff; padding: 12px 36px 36px; border-radius: 4px; min-width: 0; }
.dp-ville-texte { font-size: 17px; line-height: 1.65; }
.dp-ville-rail { position: sticky; top: 92px; align-self: start; background: #fff; border: 1px solid var(--dp-filet); border-radius: 4px 40px 4px 4px; padding: 14px 16px 16px; }
.dp-acc { border-bottom: 1px solid var(--dp-filet); }
.dp-acc summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; }
.dp-acc summary::-webkit-details-marker { display: none; }
.dp-acc summary h2 { margin: 0; font: 400 24px/1.2 var(--dp-titre); }
.dp-acc-goutte { width: 24px; height: 24px; flex: none; color: var(--dp-bleu); transition: transform .25s ease; }
.dp-acc-goutte .dp-goutte { width: 24px; height: 24px; }
.dp-acc[open] .dp-acc-goutte { transform: rotate(180deg); }
.dp-acc-corps { padding: 0 0 22px; }
.dp-acc-corps > :last-child { margin-bottom: 0; }
.dp-acc-corps a { color: var(--dp-bleu-p); }

/* ===================================================== Rubrique ===================================================== */
.dp-rub-tete { position: relative; background: var(--dp-bruine); padding: 40px 0 36px; border-bottom: 1px solid var(--dp-filet); }
.dp-rub-tete-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.dp-rub-titres h1 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; }
.dp-rub-chapo { margin: 14px 0 0; font-size: 19px; line-height: 1.55; max-width: 60ch; }
.dp-rub-tete--simple { padding-bottom: 30px; }
/* Le niveau de la rubrique : une petite cuve (180 × 120) dont le niveau d'eau représente le nombre de guides. */
.dp-minicuve { position: relative; width: 180px; height: 128px; padding-top: 8px; }
.dp-minicuve-regard { position: absolute; z-index: 2; top: 0; left: 50%; width: 52px; margin-left: -26px; height: 8px; background: var(--dp-terre); border-radius: 5px 5px 0 0; }
.dp-minicuve-paroi { position: relative; display: block; width: 100%; height: 120px; border: 3px solid var(--dp-terre); border-radius: 28px; background: #fff; overflow: hidden; }
.dp-minicuve-eau { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, var(--dp-bleu), var(--dp-bleu-p)); }
.dp-minicuve-nb { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; background: #fff; border-radius: 999px; padding: 4px 14px 5px; font: 600 14px/1.1 var(--dp-texte); color: var(--dp-terre); }
.dp-minicuve-nb b { font: 400 28px/1 var(--dp-titre); color: var(--dp-bleu-p); }
.dp-rub-liste { padding: 32px 0 80px; background: var(--dp-bruine); }
.dp-rub-pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.dp-rub-pastilles a { padding: 8px 16px; border: 1.5px solid rgba(42, 38, 32, .25); border-radius: 999px; color: var(--dp-terre); text-decoration: none; font: 600 14.5px/1.2 var(--dp-texte); background: #fff; }
.dp-rub-pastilles a:hover { border-color: var(--dp-bleu-p); }
.dp-rub-pastilles a.est-actif { background: var(--dp-bleu-p); border-color: var(--dp-bleu-p); color: #fff; }
.dp-grille--rub { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 28px; max-width: calc(var(--n, 3) * 410px + (var(--n, 3) - 1) * 28px); }
.dp-plus { margin-top: 32px; text-align: center; }
.dp-rub-suite { margin-top: 36px; max-width: 70ch; }
.dp-rub-suite summary { cursor: pointer; font: 700 15px/1.3 var(--dp-texte); color: var(--dp-bleu-p); }
.dp-bientot-in { max-width: 640px; margin: 24px auto; padding: 44px 32px 40px; text-align: center; background: #fff; border: 1px solid var(--dp-filet); border-radius: 4px 48px 4px 4px; }
.dp-bientot-goutte { width: 44px; height: 44px; color: var(--dp-bleu); }
.dp-bientot-in h2 { font-size: 32px; margin: 12px 0 10px; }
.dp-bientot-in p { color: var(--dp-doux); margin: 0 0 20px; }
.dp-mosaique-villes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dp-ville-tuile { display: flex; flex-direction: column; gap: 3px; padding: 16px 20px 18px; background: #fff; border: 1px solid var(--dp-filet); border-radius: 4px 32px 4px 4px; color: var(--dp-terre); text-decoration: none; transition: border-color .2s ease; }
.dp-ville-tuile:hover { border-color: var(--dp-bleu-p); }
.dp-ville-nom { font: 400 24px/1.15 var(--dp-titre); }
.dp-ville-dep { font: 600 13.5px/1.3 var(--dp-texte); color: var(--dp-doux); }
.dp-ville-mm { font: 700 14px/1.3 var(--dp-texte); color: var(--dp-bleu-p); }

/* Auteur */
.dp-aut-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 36px; align-items: center; }
.dp-aut-photo img, .dp-aut-photo svg, .dp-aut-av { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 6px #fff; display: block; }
.dp-aut-role { margin: 10px 0 0; font: 700 14px/1.3 var(--dp-texte); color: var(--dp-bleu-p); }
.dp-aut-nb { margin: 14px 0 0; color: var(--dp-doux); }

/* ===================================================== Pages : générique, contact, à propos, 404 ===================================================== */
.dp-page-tete { position: relative; background: var(--dp-bruine); padding-bottom: 30px; }
.dp-page-tete-in { padding-top: 22px; }
.dp-page-tete h1 { font-size: clamp(34px, 4vw, 52px); line-height: 1.06; }
.dp-page-lead { margin: 14px 0 0; font-size: 19px; line-height: 1.55; max-width: 60ch; }
.dp-page-corps { padding-block: 36px 80px; }
.dp-page-texte { max-width: 760px; font-size: 17px; line-height: 1.7; }
.dp-page-texte h2 { font-size: 30px; margin: 1.8em 0 .5em; }
.dp-page-texte h3 { font-size: 24px; margin: 1.5em 0 .4em; }
.dp-page-texte a { color: var(--dp-bleu-p); text-decoration: underline; text-underline-offset: 3px; }
.dp-page-texte ul, .dp-page-texte ol { padding-left: 1.3em; }

.dp-contact-in { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: stretch; padding-block: 36px 80px; }
.dp-contact-cuve { position: relative; overflow: hidden; background: #fff; border: 3px solid var(--dp-terre); border-radius: 34px; padding: 28px 28px 52px; }
.dp-contact-cuve::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(to bottom, var(--dp-bleu), var(--dp-bleu-p)); }
.dp-contact-champs { display: grid; gap: 14px; position: relative; z-index: 1; }
.dp-champ { display: flex; flex-direction: column; gap: 5px; }
.dp-champ span { font: 600 13px/1.2 var(--dp-texte); color: var(--dp-doux); }
.dp-champ input, .dp-champ textarea { width: 100%; border: 1.5px solid rgba(42, 38, 32, .25); border-radius: 12px; padding: 12px 14px; background: var(--dp-bruine); font: 500 16px/1.4 var(--dp-texte); color: var(--dp-terre); }
.dp-champ input { height: 48px; padding-block: 0; }
.dp-champ textarea { resize: vertical; min-height: 110px; }
.dp-champ input:focus, .dp-champ textarea:focus { outline: none; border-color: var(--dp-bleu-p); box-shadow: 0 0 0 3px rgba(43, 88, 100, .22); background: #fff; }
.dp-contact-cuve .dp-mail-consent { background: var(--dp-bruine); align-items: flex-start; font-size: 13px; }
.dp-contact-cuve .dp-btn { justify-self: start; }
.dp-contact-photo { border-radius: 4px 48px 4px 4px; overflow: hidden; background: rgba(42, 38, 32, .08); min-height: 420px; }
.dp-contact-photo img, .dp-contact-photo .dp-repli { display: block; width: 100%; height: 100%; object-fit: cover; }

.dp-ap-tete { position: relative; background: var(--dp-bruine); overflow: hidden; }
.dp-ap-tete .dp-hero-pluie { height: 100%; }
.dp-ap-tete-in { position: relative; z-index: 1; padding-top: 22px; padding-bottom: 92px; }
.dp-ap-tete h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.06; max-width: 15em; text-wrap: balance; }
.dp-ap-sol { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 56px; background: center / cover; }
.dp-ap-sol--repli { background: rgba(42, 38, 32, .2); }
.dp-ap-temps { list-style: none; margin: 0; padding: 0 0 0 76px; position: relative; display: grid; gap: 30px; max-width: 860px; }
.dp-ap-temps::before { content: ""; position: absolute; left: 20px; top: 20px; bottom: 20px; width: 12px; background: var(--dp-bleu); border-radius: 6px; }
.dp-ap-temps li { position: relative; }
.dp-ap-n { position: absolute; left: -76px; top: -2px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--dp-bleu-p); color: #fff; font: 400 26px/1 var(--dp-titre); }
.dp-ap-temps li::before { content: ""; position: absolute; left: -24px; top: 21px; width: 24px; height: 10px; background: var(--dp-bleu); }
.dp-ap-temps h3 { font-size: 28px; margin-bottom: 6px; }
.dp-ap-temps p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--dp-doux); max-width: 62ch; }
.dp-ap-gens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.dp-ap-personne { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px 22px; background: #fff; border: 1px solid var(--dp-filet); border-radius: 4px 32px 4px 4px; }
.dp-ap-photo img, .dp-ap-photo svg, .dp-ap-av { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; }
.dp-ap-personne h3 { font-size: 24px; margin-bottom: 4px; }
.dp-ap-personne h3 a { color: var(--dp-terre); text-decoration: none; }
.dp-ap-personne h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.dp-ap-personne p { margin: 0 0 4px; font-size: 15px; line-height: 1.5; color: var(--dp-doux); }
.dp-ap-nb { font-weight: 700; color: var(--dp-bleu-p) !important; }
.dp-ap-methode-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.dp-ap-sources { list-style: none; margin: 0; padding: 0; }
.dp-ap-sources li { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--dp-filet); }
.dp-ap-sources li:first-child { padding-top: 0; }
.dp-ap-sources b { font: 400 22px/1.2 var(--dp-titre); }
.dp-ap-sources span { font-size: 15.5px; line-height: 1.5; color: var(--dp-doux); }
.dp-ap-fin { padding-block: 44px; }
.dp-ap-fin-in { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.dp-ap-fin-t { margin: 0; font: 400 clamp(26px, 3vw, 34px)/1.15 var(--dp-titre); }
.dp-ap-fin-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.dp-recherche { display: flex; gap: 10px; margin-top: 20px; max-width: 540px; }
.dp-recherche input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 16px; border: 1.5px solid rgba(42, 38, 32, .3); border-radius: 10px; background: #fff; font: 500 16px/1 var(--dp-texte); }
.dp-recherche input:focus { outline: none; border-color: var(--dp-bleu-p); box-shadow: 0 0 0 3px rgba(43, 88, 100, .22); }
.dp-recherche .dp-btn { min-height: 48px; }

.dp-404 { background: var(--dp-bruine); }
.dp-404-in { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: center; padding-block: 48px 88px; }
.dp-404-dessin { position: relative; height: 300px; }
.dp-404-gout { position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--dp-bleu); border-radius: 0 0 14px 14px; box-shadow: inset 0 4px 0 var(--dp-bleu-p); }
.dp-404-descente { position: absolute; left: 0; top: 8px; width: 12px; height: 190px; background: var(--dp-bleu); border-radius: 0 0 6px 6px; }
.dp-404-goutte { position: absolute; left: -6px; top: 224px; width: 48px; height: 56px; color: var(--dp-bleu); }
.dp-404-goutte .dp-goutte { width: 100%; height: 100%; }
.dp-404-code { margin: 0 0 4px; font: 400 28px/1 var(--dp-titre); color: var(--dp-bleu-p); }
.dp-404 h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.08; text-wrap: balance; }
.dp-404-lead { margin: 14px 0 0; font-size: 18px; max-width: 52ch; color: var(--dp-doux); }
.dp-404-liens { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; max-width: 560px; }
.dp-404-liens a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--dp-filet); color: var(--dp-terre); text-decoration: none; font-weight: 700; }
.dp-404-liens a:hover { color: var(--dp-bleu-p); }

/* ===================================================== Pied de page — clair, ligne de sol en haut ===================================================== */
.dp-footer.sbt-footer { background: var(--dp-bruine); color: var(--dp-terre); padding: 0; margin-top: 0; }
.dp-footer-sol { position: relative; height: 34px; }
.dp-footer-herbe { position: absolute; left: 0; right: 0; top: 0; height: 24px; background: rgba(42, 38, 32, .2) center / cover no-repeat; }
.dp-footer-terre { position: absolute; left: 0; right: 0; top: 24px; height: 10px; background: var(--dp-sol); }
.dp-footer-in { padding-top: 40px; padding-bottom: 0; }
.dp-footer.sbt-footer a { color: var(--dp-terre); text-decoration: none; }
.dp-footer.sbt-footer a:hover { color: var(--dp-bleu-p); text-decoration: underline; text-underline-offset: 3px; }
.dp-footer .sbt-footer-grille { grid-template-columns: 1.35fr 1fr 1.25fr 1fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid var(--dp-filet); align-items: start; }
.dp-footer .sbt-footer-colonne .sbt-t4, .dp-footer-t { font: 400 22px/1.15 var(--dp-titre); text-transform: none; letter-spacing: 0; color: var(--dp-terre); margin: 0 0 14px; }
.dp-footer .sbt-footer-colonne ul { gap: 9px; }
.dp-footer .sbt-footer-colonne ul a { font-size: 15px; line-height: 1.35; display: inline-block; }
.dp-footer .sbt-footer-logo { margin-bottom: 14px; }
.dp-footer-desc { margin: 0 0 10px !important; font-size: 15px !important; line-height: 1.55; color: var(--dp-doux) !important; max-width: 38ch !important; }
.dp-footer .sbt-footer-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding: 18px 0 22px; font-size: 13.5px; color: var(--dp-doux); }

/* Bandeau cookies : fin, deux boutons de même poids, jamais par-dessus le texte (la page réserve sa hauteur). */
.dp-cookies.sbt-cookies { left: 12px; right: 12px; bottom: 12px; max-height: none; padding: 10px 14px; border-radius: 12px; background: var(--dp-bleu-p); color: #fff; box-shadow: none; }
.dp-cookies p { color: #fff; font-size: 13.5px; line-height: 1.35; }
.dp-btn--cookie, .dp-cookies .sbt-btn--fantome { background: #fff; color: var(--dp-bleu-p); border: 2px solid #fff; min-height: 38px; padding: 0 16px; font-size: 14px; }
/* Le bandeau réserve sa hauteur DANS le pied (le bas du pied reste le bas de la page, aucune bande blanche). */
body.dp-cookies-ouvert .dp-footer .sbt-footer-bas { padding-bottom: 84px; }

/* ===================================================== Adaptation ===================================================== */
@media (max-width: 1280px) {
	.dp-cuve-corps { padding-inline: 14px; }
	.dp-btn--cuve { padding: 0 18px; }
	.dp-pill span { padding: 0 10px; font-size: 13.5px; }
	.dp-cuve--plein .dp-tuile--usages { flex-basis: 214px; }
}

@media (max-width: 1099px) {
	/* Premier écran mobile : la photo de gouttière en tête (390 × 180), le titre, la bande de pelouse, puis la cuve en hauteur. */
	.dp-hero-pluie { height: 100%; opacity: .7; }
	.dp-hero-terre, .dp-tuyau { display: none; }
	.dp-hero-in { width: 100%; height: auto; display: flex; flex-direction: column; }
	.dp-hero-ciel { height: auto; display: flex; flex-direction: column; }
	.dp-hero-avanttoit { order: -1; height: auto; display: block; }
	.dp-hero-photo { width: 100%; height: 200px; clip-path: none; }
	.dp-hero-texte { padding: 26px 24px 0; max-width: none; }
	.dp-hero-texte h1 { font-size: clamp(34px, 8.6vw, 44px); max-width: none; }
	.dp-hero-chapo { font-size: 17px; margin-top: 14px; }
	.dp-hero-preuve { margin-top: 12px; }
	.dp-hero-sol { position: relative; left: auto; width: 100%; transform: none; top: auto; height: 46px; margin-top: 22px; }
	.dp-hero-cuve { position: relative; top: auto; padding: 40px 14px 30px; background: var(--dp-sol); }
	.dp-hero-cuve::before { content: ""; position: absolute; z-index: 1; top: 0; left: calc(14px + (100% - 28px) * .74 - 5px); width: 10px; height: 46px; background: var(--dp-bleu-p); }
	.dp-cuve--plein { display: block; }
	.dp-cuve--plein .dp-cuve-paroi { height: auto; min-height: 320px; }
	.dp-cuve-annexe { padding: 14px 4px 0; }
	.dp-cuve-paroi { grid-template-columns: 56px minmax(0, 1fr); border-radius: 32px; }
	.dp-cuve-grad { border-radius: 29px 0 0 29px; }
	.dp-cuve-bassin { border-radius: 0 29px 29px 0; }
	.dp-grad { font: 700 11px/1.1 var(--dp-texte); right: 6px; }
	.dp-cuve-regard { width: 70px; margin-left: -35px; }
	.dp-cuve-corps { padding: 16px 14px 14px; }
	.dp-cuve-titre { font-size: 22px; }
	.dp-cuve-champs { flex-direction: column; gap: 10px; }
	.dp-tuile--surface, .dp-tuile--dep, .dp-tuile--usages { flex: none; width: 100%; }
	.dp-btn--cuve { min-height: 54px; width: 100%; }
	.dp-res-chiffres { grid-template-columns: 1fr; }
	.dp-cuve-mail { flex-wrap: wrap; }
	.dp-mail-champ, .dp-mail-champ--email, .dp-mail-consent { flex: 1 1 100%; }

	.dp-section { padding-block: 44px; }
	.dp-trajet { grid-template-columns: 1fr; gap: 6px; }
	.dp-station { padding: 0 0 26px 40px; }
	.dp-station-pipe { left: 8px; right: auto; top: 0; bottom: 0; width: 10px; height: auto; border-radius: 0 !important; }
	.dp-station:not(:last-child) .dp-station-pipe::after { display: none; }
	.dp-station--1 .dp-station-pipe { border-radius: 5px 5px 0 0 !important; }
	.dp-station--5 .dp-station-pipe { bottom: 26px; border-radius: 0 0 5px 5px !important; }
	.dp-station::before { left: 8px; margin-left: 0; top: 28px; width: 32px; height: 10px; }
	.dp-station-photo { height: 170px !important; }
	.dp-guides, .dp-pompes, .dp-loi, .dp-ap-methode-in { grid-template-columns: 1fr; gap: 32px; }
	.dp-villes, .dp-mosaique-villes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dp-frise-graph { height: 270px; }
	.dp-frise-barres { height: 226px; }
	.dp-frise-et { bottom: calc(226px * var(--h, .5) + 12px); }
	.dp-frise-et span { display: none; }
	.dp-footer .sbt-footer-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; }

	.dp-contact-in { grid-template-columns: 1fr; }
	.dp-contact-photo { display: none; }
	.dp-404-in { grid-template-columns: 1fr; }
	.dp-404-dessin { display: none; }
}

/* Articles et pages ville : le rail passe sous le texte à 1080 px (même seuil que le bloc figé). */
@media (max-width: 1080px) {
	.dp-art-grille { grid-template-columns: 1fr; gap: 26px; padding-left: 30px; }
	.dp-art-photo { order: -1; max-height: none; aspect-ratio: 16 / 10; }
	.dp-art-rub { margin-left: 30px; }
	.sbt-article-mise-en-page { grid-template-columns: minmax(0, 1fr); padding-bottom: 56px; }
	.sbt-article-principal { padding: 28px 22px 32px 34px; }
	.sbt-rail { position: static; }
	.dp-ville-tete-in { grid-template-columns: 1fr; }
	.dp-ville-corps { grid-template-columns: 1fr; gap: 32px; }
	.dp-ville-rail { position: static; }
}

@media (max-width: 760px) {
	.dp-cont { padding-inline: 24px; }
	.dp-rub-tete-in { grid-template-columns: 1fr; gap: 24px; }
	.dp-minicuve { justify-self: start; }
	.dp-grille--rub, .dp-alire .dp-grille { grid-template-columns: 1fr; max-width: none; }
	.dp-grille--rub { --n: 1; }
	.dp-aut-in { grid-template-columns: 1fr; gap: 20px; }
	.dp-ap-gens { grid-template-columns: 1fr; }
	.dp-fiches, .dp-fiches--n3, .dp-fiches--n6, .dp-fiches--n9 { grid-template-columns: 1fr; }
	.dp-ap-temps { padding-left: 62px; }
	.dp-ap-n { left: -62px; width: 46px; height: 46px; }
	.dp-ap-temps::before { left: 17px; }
	.dp-ap-temps li::before { left: -18px; width: 18px; }
	.dp-carte--ligne .dp-carte-lien { grid-template-columns: 108px minmax(0, 1fr); }
	.dp-ville-col { padding: 8px 20px 28px; }
	.dp-etape { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
	.dp-etape-n { width: 40px; height: 40px; font-size: 22px; }
	body.dp-cookies-ouvert .dp-footer .sbt-footer-bas { padding-bottom: 124px; }
	.dp-cookies.sbt-cookies { flex-wrap: wrap; }
	.dp-404-liens { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.dp-footer .sbt-footer-grille { grid-template-columns: 1fr; gap: 28px; }
	.dp-villes, .dp-mosaique-villes { grid-template-columns: 1fr 1fr; gap: 4px 20px; }
	.dp-mosaique-villes { gap: 12px; }
	.dp-sec-lead { font-size: 17px; }
	.sbt-article-corps { font-size: 17.5px; }
	.dp-art-meta { gap: 6px 14px; }
	.dp-ap-personne { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 16px; }
	.dp-ap-photo img, .dp-ap-photo svg, .dp-ap-av { width: 72px; height: 72px; }
	.dp-contact-cuve { padding: 18px 16px 44px; border-radius: 26px; }
	.dp-contact-champs { gap: 10px; }
	.dp-champ textarea { min-height: 84px; }
	.dp-page-tete-in { padding-top: 14px; }
	.dp-sources { padding: 20px 18px; }
	.dp-recherche { flex-direction: column; }
	.dp-art-txt h1 { font-size: 27px; }
	.dp-ville-titre h1 { font-size: 30px; }
	.dp-art-entete { padding-bottom: 32px; }
	.dp-gout-descente { bottom: -32px; }
}

@media (prefers-reduced-motion: reduce) {
	.dp-hero-pluie::before, .dp-ap-tete .dp-hero-pluie::before, .dp-cuve-eau::before { animation: none !important; }
	.dp-cuve-eau { transition: none; }
	html { scroll-behavior: auto; }
}

/* 19/10 — bandeau cookies DANS le flux, en haut de page : il ne recouvre jamais le texte et ne laisse aucun blanc sous le pied. */
.dp-cookies.sbt-cookies { position: static; left: auto; right: auto; bottom: auto; margin: 0; border-radius: 0; padding: 8px max(24px, calc((100% - 1272px) / 2)); gap: 16px; align-items: center; }
body.dp-cookies-ouvert .dp-footer .sbt-footer-bas { padding-bottom: 28px; }
.dp-hero-cta-mob { display: none; }
@media (max-width: 760px) {
	.dp-cookies.sbt-cookies { flex-wrap: nowrap; padding: 8px 16px; }
	.dp-cookies p { font-size: 12.5px; }
	.dp-cookies .sbt-btn { padding: 0 10px; min-height: 34px; }
	body.dp-cookies-ouvert .dp-footer .sbt-footer-bas { padding-bottom: 28px; }
	.dp-hero-cta-mob { display: inline-flex; align-items: center; justify-content: center; margin-top: 16px; min-height: 48px; padding: 0 22px; }
}

/* ===================== 19/10 — corrections n°2 (sortie n°1 : pli, cadre, contraste, rendu) ===================== */
/* Rail d'article : la cuve passe EN TÊTE du bloc collant (formulaire au-dessus du pli à 1440×780 et 1920×950), sommaire dessous. */
.sbt-article-mise-en-page { grid-template-columns: minmax(0, 1fr) 372px; }
.dp-art-entete { padding-bottom: 30px; }
.dp-gout-descente { bottom: -30px; }
.sbt-rail > .dp-cuve { order: -1; border-top: 0; padding-top: 16px; padding-bottom: 12px; }
.sbt-rail > .sbt-rail-carte--sommaire { border-top: 1px dashed rgba(42, 38, 32, .25); }
.sbt-rail .dp-cuve--compact .dp-cuve-corps { padding: 10px 10px 10px; }
.sbt-rail .dp-cuve--compact .dp-cuve-titre { font-size: 19px; margin-bottom: 4px; }
.sbt-rail .dp-cuve--compact .dp-cuve-champs { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.sbt-rail .dp-cuve--compact .dp-tuile--surface { flex: 0 0 122px; width: auto; }
.sbt-rail .dp-cuve--compact .dp-tuile--surface .dp-chips { display: none; }
.sbt-rail .dp-cuve--compact .dp-tuile--surface input { width: 100%; }
.sbt-rail .dp-cuve--compact .dp-tuile--dep { flex: 1 1 0; width: auto; min-width: 0; }
.sbt-rail .dp-cuve--compact .dp-tuile--dep select { width: 100%; }
.sbt-rail .dp-cuve--compact .dp-tuile label, .sbt-rail .dp-cuve--compact .dp-tuile-lib { font-size: 11.5px; white-space: nowrap; }
.sbt-rail .dp-cuve--compact .dp-tuile--usages { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; }
.sbt-rail .dp-cuve--compact .dp-pill span { height: 28px; }
.sbt-rail .dp-cuve--compact .dp-btn--cuve { min-height: 38px; }

/* Sources du socle : date « consultée le » lisible (contraste AA). */
.sbsrc-36940d97__date { color: #615a50 !important; opacity: 1 !important; }

/* À propos : le numéro reste DANS son étape (plus de pastille hors cadre). */
.dp-ap-temps { padding-left: 0; }
.dp-ap-temps li { padding-left: 76px; }
.dp-ap-n { left: 0; }
.dp-ap-temps li::before { left: 52px; }

/* Frise : l'étiquette de gauche ne sort plus du graphique. */
.dp-frise-et--gauche { transform: none; }
.dp-frise-et--gauche::after { left: 4px; }

/* Contact : prénom et e-mail côte à côte, formulaire plus haut ; la photo devient un bandeau au-dessus du formulaire sur mobile. */
.dp-contact-in { padding-block: 20px 80px; }
.dp-page-tete-in { padding-bottom: 8px; }
.dp-contact-champs { grid-template-columns: 1fr 1fr; }
.dp-contact-champs > .dp-champ--message, .dp-contact-champs > .dp-mail-consent, .dp-contact-champs > .dp-btn, .dp-contact-champs > .dp-contact-msg { grid-column: 1 / -1; }
.dp-contact-cuve { padding-top: 22px; }

/* Page ville : bandeau photo et bouton sur mobile seulement. */
.dp-ville-bande { display: none; }

@media (max-width: 1080px) {
	.sbt-article-mise-en-page { grid-template-columns: minmax(0, 1fr); }
	.dp-contact-photo { display: block; min-height: 0; height: 110px; border-radius: 4px 28px 4px 4px; }
	.dp-contact-in { gap: 14px; }
	.dp-ville-bande { display: block; height: 180px; margin: 0 0 4px; border-radius: 4px 32px 4px 4px; background: center / cover no-repeat; }
	.dp-ville-tete-in { padding-top: 16px; gap: 20px; }
}
@media (max-width: 760px) {
	.dp-ap-temps { padding-left: 0; }
	.dp-ap-temps li { padding-left: 62px; }
	.dp-ap-n { left: 0; }
	.dp-ap-temps li::before { left: 46px; width: 16px; }
	.dp-contact-photo { height: 96px; }
	.dp-contact-champs { gap: 8px; }
	.dp-contact .dp-page-tete { padding-bottom: 14px; }
	.dp-contact-in { padding-top: 12px; }
	.dp-contact-cuve .dp-champ textarea { min-height: 60px; height: 60px; }
	.dp-contact-cuve .dp-mail-consent { font-size: 12.5px; line-height: 1.35; padding: 8px 10px; }
	.dp-contact-cuve { padding: 14px 14px 40px; }
	.dp-ville-bande { height: 170px; }
	.dp-ville-tete .dp-hero-cta-mob { display: inline-flex; }
}

/* 19/10 : article sans photo à la une — une seule colonne, titre limité en largeur, aucun cadre vide. */
.dp-art-grille--sans-photo { grid-template-columns: minmax(0, 1fr); }
.dp-art-grille--sans-photo .dp-art-txt { max-width: 860px; }