/* ==========================================================================
   pompejardin.com — thème pj-margelle. Feuille unique.
   Peau : le jardin d'eau d'une maison du plateau briard. Photos découpées en
   bassin haricot cerclé d'une margelle en meulière, étiquettes de pépiniériste
   à œillet et ficelle, feuilles de nénuphar. Mode clair uniquement.
   Palette : Prune #2C1F2B · Rose de Mandres #A3214B · Lentille d'eau #C2D65A
   · Meulière #B0855A · Lentille pâle #EEF2DC · Meulière pâle #F5EEE5.
   ========================================================================== */

@font-face { font-family: "Young Serif"; src: url(../fonts/young-serif-latin.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Young Serif"; src: url(../fonts/young-serif-latin-ext.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; src: url(../fonts/onest-latin.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; src: url(../fonts/onest-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
	color-scheme: light;
	--blanc: #FFFFFF;
	--encre: #2C1F2B;
	--encre-doux: #5B4A57;
	--rose: #A3214B;
	--rose-fonce: #86183D;
	--rose-pale: #F8E6EC;
	--lentille: #C2D65A;
	--lentille-fonce: #4F6B12;
	--lentille-pale: #EEF2DC;
	--meuliere: #B0855A;
	--meuliere-fonce: #7E5B39;
	--meuliere-pale: #F5EEE5;
	--filet: #E4DDD3;
	--sb-accent: var(--rose);
	--sb-encre: var(--encre);
	--titre: "Young Serif", Georgia, "Times New Roman", serif;
	--texte: "Onest", "Helvetica Neue", Arial, sans-serif;
	--ombre-etiquette: drop-shadow(0 16px 24px rgba(44, 31, 43, .16)) drop-shadow(0 2px 3px rgba(44, 31, 43, .12));
	--marge: clamp(16px, 4.4vw, 64px);
	--entete: 72px;
}

/* -------- Base -------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--blanc); color: var(--encre); font-family: var(--texte); font-size: 17px; line-height: 1.6; font-feature-settings: "lnum" 1, "tnum" 0; overflow-x: hidden; }
body.pj_menu_ouvert { overflow: hidden; }
img, svg, picture { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--rose); text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--rose-fonce); }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--titre); font-weight: 400; line-height: 1.15; letter-spacing: -.005em; margin: 0 0 .5em; text-wrap: balance; color: var(--encre); }
p { margin: 0 0 1em; text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
.pj_sr_only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pj_skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--encre); color: #fff; padding: 10px 16px; border-radius: 8px; }
.pj_skip:focus { top: 12px; }
.pj_conteneur { width: 100%; max-width: calc(1312px + 2 * var(--marge)); margin: 0 auto; padding: 0 var(--marge); }
.pj_conteneur_lecture { max-width: 740px; }
main { display: block; }

/* -------- Boutons (pleins, gros, jamais de pilule) -------- */
.pj_btn, .sbt-btn, .pj-bouton {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 24px;
	border-radius: 10px 10px 10px 2px; border: 2px solid transparent; font-family: var(--texte); font-weight: 650; font-size: 16.5px; line-height: 1.2;
	text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.pj_btn--plein, .sbt-btn, .pj-bouton { background: var(--rose); color: #fff; box-shadow: 0 3px 0 var(--rose-fonce); }
.pj_btn--plein:hover, .sbt-btn:hover, .pj-bouton:hover { background: var(--rose-fonce); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 0 #5E1029; }
.pj_btn--fantome, .sbt-btn--fantome { background: #fff; color: var(--encre); border-color: var(--encre); box-shadow: none; }
.pj_btn--fantome:hover, .sbt-btn--fantome:hover { background: var(--encre); color: #fff; }
.pj_btn--clair { background: var(--lentille); color: var(--encre); box-shadow: 0 3px 0 #8FA63A; }
.pj_btn--clair:hover { background: #D3E474; color: var(--encre); }
.pj_btn--petit, .sbt-btn--petit { min-height: 44px; padding: 9px 18px; font-size: 15.5px; }
.pj_btn--grand { min-height: 56px; padding: 14px 28px; font-size: 17.5px; }
.pj_btn:disabled { opacity: .7; cursor: progress; }

/* ==========================================================================
   EN-TÊTE — barre blanche, liseré de margelle en pierres
   ========================================================================== */
.pj_header { position: sticky; top: 0; z-index: 100; background: #fff; }
.pj_header::after { content: ""; display: block; height: 6px; background: repeating-linear-gradient(90deg, var(--meuliere) 0 54px, var(--meuliere-fonce) 54px 57px, #C39A6B 57px 98px, var(--meuliere-fonce) 98px 101px); }
.pj_header.is-scrolled { box-shadow: 0 8px 18px rgba(44, 31, 43, .08); }
.pj_header_barre { display: flex; align-items: center; gap: 28px; height: 66px; max-width: calc(1312px + 2 * var(--marge)); margin: 0 auto; padding: 0 var(--marge); }
.pj_logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); flex-shrink: 0; }
.pj_logo_marque { width: 46px; height: 36px; }
.pj_logo_texte { font-family: var(--titre); font-size: 23px; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.pj_logo_jardin { color: var(--rose); }
.pj_logo_suffixe { font-family: var(--texte); font-size: 14px; font-weight: 600; color: var(--encre-doux); margin-left: 1px; }
.pj_logo--clair, .pj_logo--clair .pj_logo_texte { color: #fff; }
.pj_logo--clair .pj_logo_jardin { color: var(--lentille); }
.pj_logo--clair .pj_logo_suffixe { color: #D9CCD5; }
.pj_menu { display: flex; align-items: stretch; gap: 4px; height: 100%; margin-left: 8px; }
.pj_menu a { display: flex; align-items: center; padding: 0 12px; color: var(--encre); font-weight: 560; font-size: 15.5px; text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -3px; }
.pj_menu a:hover { color: var(--rose); }
.pj_menu a[aria-current="page"] { border-bottom-color: var(--rose); color: var(--rose); }
.pj_header_droite { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.pj_header_bulletin { display: inline-flex; flex-direction: column; line-height: 1.15; padding: 6px 12px 6px 30px; text-decoration: none; color: var(--encre); background: var(--lentille-pale); border-radius: 999px 10px 10px 999px; position: relative; white-space: nowrap; }
.pj_header_bulletin::before { content: ""; position: absolute; left: 10px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 40deg, var(--lentille-fonce) 40deg); }
.pj_header_bulletin_val { font-weight: 750; font-size: 15px; }
.pj_header_bulletin_txt { font-size: 12.5px; color: var(--encre-doux); }
.pj_menu_bouton { display: none; width: 48px; height: 48px; border: 0; background: var(--lentille-pale); border-radius: 10px; cursor: pointer; padding: 13px 12px; flex-direction: column; justify-content: space-between; }
.pj_menu_bouton span:not(.pj_sr_only) { display: block; height: 2.5px; background: var(--encre); border-radius: 2px; }
.pj_menu_mobile { position: fixed; inset: 72px 0 0; z-index: 99; background: #fff; padding: 20px var(--marge) 32px; overflow-y: auto; }
.pj_menu_mobile[hidden] { display: none; }
.pj_menu_mobile nav { display: grid; gap: 6px; margin-bottom: 20px; }
.pj_menu_mobile nav a { display: flex; align-items: center; gap: 12px; padding: 14px 12px; font-size: 18px; font-weight: 600; color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--filet); }
.pj_menu_mobile .pj_btn { width: 100%; }
.pj_collant_mobile { display: none; }

@media (max-width: 1679px) { .pj_header_bulletin { display: none; } }
@media (max-width: 1360px) { .pj_menu a { padding: 0 8px; font-size: 14.5px; } .pj_header_barre { gap: 18px; } .pj_logo_suffixe { display: none; } .pj_logo_texte { font-size: 21px; } }
@media (max-width: 1180px) {
	.pj_menu { display: none; }
	.pj_menu_bouton { display: inline-flex; }
}
@media (max-width: 700px) {
	.pj_header_barre { height: 60px; gap: 10px; }
	.pj_header_devis { display: none; }
	.pj_logo_texte { font-size: 20px; }
	.pj_menu_mobile { inset: 66px 0 0; }
	.pj_collant_mobile { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; min-height: 54px; align-items: center; justify-content: center; background: var(--rose); color: #fff; font-weight: 700; font-size: 17px; text-decoration: none; border-radius: 12px 12px 12px 3px; box-shadow: 0 10px 24px rgba(44, 31, 43, .28); transform: translateY(120px); transition: transform .25s; }
	.pj_collant_mobile.is-visible { transform: none; }
}

/* ==========================================================================
   LE MOTIF : bassin haricot + margelle, étiquette de pépiniériste, nénuphar
   ========================================================================== */
.pj_bassin { position: relative; aspect-ratio: 1000 / 900; }
.pj_bassin_eau { position: absolute; inset: 0; display: block; overflow: hidden; background: #3E4A2E; -webkit-mask: url(../svg/eau-haricot.svg) center / 100% 100% no-repeat; mask: url(../svg/eau-haricot.svg) center / 100% 100% no-repeat; }
.pj_bassin_eau img, .pj_bassin_eau .pj_photo_repli { width: 100%; height: 100%; object-fit: cover; }
.pj_margelle { position: absolute; inset: 0; pointer-events: none; background: url(../svg/margelle-haricot.svg) center / 100% 100% no-repeat; }
.pj_bassin--long { aspect-ratio: 1000 / 340; }
.pj_bassin--long .pj_bassin_eau { -webkit-mask-image: url(../svg/eau-long.svg); mask-image: url(../svg/eau-long.svg); }
.pj_bassin--long .pj_margelle { background-image: url(../svg/margelle-long.svg); }
.pj_bassin--rond { aspect-ratio: 1; }
.pj_bassin--rond .pj_bassin_eau { -webkit-mask-image: url(../svg/eau-rond.svg); mask-image: url(../svg/eau-rond.svg); }
.pj_bassin--rond .pj_margelle { background-image: url(../svg/margelle-rond.svg); }

.pj_photo_repli { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 120px; background: radial-gradient(circle at 30% 30%, #DCE6B4, var(--lentille-pale) 60%); }
.pj_photo_repli img { width: 64px !important; height: 64px !important; object-fit: contain !important; opacity: .9; }

/* Étiquette de pépiniériste : coins du haut coupés, bande lentille, œillet cerclé de meulière. */
.pj_etiquette { position: relative; isolation: isolate; padding: 40px 26px 24px; filter: var(--ombre-etiquette); }
.pj_etiquette::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(var(--lentille) 0 12px, #fff 12px); clip-path: polygon(30px 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%, 0 30px); }
.pj_oeillet { position: absolute; top: 9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #F1EEE8; box-shadow: 0 0 0 4px var(--meuliere), inset 0 2px 3px rgba(44, 31, 43, .35); z-index: 2; }
.pj_oeillet--ficelle::after { content: ""; position: absolute; left: 7px; bottom: 9px; width: 2.5px; height: 52px; border-radius: 2px; background: repeating-linear-gradient(180deg, #8C6640 0 4px, #C9A77C 4px 7px); transform-origin: 50% 100%; transform: rotate(32deg); }

/* Feuille de nénuphar (cercle échancré) qui porte un chiffre. */
.pj_feuille_nenuphar { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; width: 176px; height: 176px; padding: 26px; border-radius: 50%; text-decoration: none; color: var(--encre);
	background: radial-gradient(circle, var(--lentille) 0 64%, transparent 64.5%), conic-gradient(from 22deg, transparent 0 24deg, var(--lentille) 24deg 360deg); filter: drop-shadow(0 10px 14px rgba(44, 31, 43, .22)); }
.pj_feuille_nenuphar::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; border: 1.5px dashed rgba(79, 107, 18, .45); }
.pj_feuille_nenuphar_val { font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -.02em; }
.pj_feuille_nenuphar_txt { font-size: 13px; line-height: 1.3; margin-top: 6px; font-weight: 550; }
a.pj_feuille_nenuphar:hover { color: var(--encre); background: radial-gradient(circle, #CFE070 0 64%, transparent 64.5%), conic-gradient(from 22deg, transparent 0 24deg, #CFE070 24deg 360deg); }

/* ==========================================================================
   HÉROS DE L'ACCUEIL
   ========================================================================== */
.pj_hero { padding: 28px 0 34px; background: linear-gradient(180deg, #fff 0 60%, var(--lentille-pale) 60%); overflow: clip; }
.pj_hero_grille { display: grid; grid-template-columns: minmax(0, 468px) minmax(0, 1fr); gap: 40px; align-items: start; }
.pj_hero_texte { padding-top: 10px; }
.pj_hero_lieu { font-size: 15px; font-weight: 600; color: var(--lentille-fonce); margin-bottom: 14px; }
.pj_hero_titre { font-size: clamp(2.15rem, 3.2vw, 2.9rem); line-height: 1.06; margin-bottom: 18px; }
.pj_hero_soustitre { font-size: 18px; color: var(--encre-doux); margin-bottom: 20px; max-width: 30em; }
.pj_hero_cta_mobile { display: none; }
.pj_hero_preuves { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 22px; }
.pj_hero_preuves li { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 13px; background: #fff; border: 1.5px solid var(--filet); border-radius: 999px; font-size: 14.5px; font-weight: 550; white-space: nowrap; }
.pj_hero_preuves strong { font-size: 17px; font-weight: 800; color: var(--rose); }
.pj_hero_scene { position: relative; min-height: 606px; }
.pj_bassin--hero { position: absolute; right: 0; top: 0; width: calc(100% - 150px); max-width: 680px; }
.pj_hero_scene > .pj_etiquette--form { position: absolute; left: 0; top: 30px; width: 396px; z-index: 3; }
.pj_hero_bulletin { max-width: 420px; }

/* Bulletin court (2ᵉ étiquette, couchée) */
.pj_bulletin { position: relative; isolation: isolate; color: var(--encre); }
.pj_bulletin--court { padding: 16px 20px 14px 52px; filter: var(--ombre-etiquette); }
.pj_bulletin--court::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--lentille) 0 12px, #fff 12px); clip-path: polygon(0 26px, 26px 0, 100% 0, 100% 100%, 26px 100%, 0 calc(100% - 26px)); }
.pj_bulletin--court .pj_oeillet { top: 50%; left: 26px; margin: -9px 0 0 0; }
.pj_bulletin_entete { font-size: 14px; margin: 0 0 4px; color: var(--encre-doux); }
.pj_bulletin_entete strong { color: var(--encre); }
.pj_bulletin_litres { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 4px; }
.pj_bulletin_litres_val { font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--rose); white-space: nowrap; }
.pj_bulletin_litres_txt { font-size: 15px; font-weight: 550; }
.pj_bulletin_source { font-size: 13px; color: var(--encre-doux); margin: 4px 0 0; }
.pj_bulletin_source a { color: var(--encre-doux); }

/* Bulletin grand (étiquette debout) */
.pj_bulletin--grand { padding: 38px 26px 22px; filter: var(--ombre-etiquette); }
.pj_bulletin--grand::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(var(--lentille) 0 12px, #fff 12px); clip-path: polygon(30px 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%, 0 30px); }
.pj_bulletin--grand .pj_oeillet--ficelle::after { display: none; }
.pj_bulletin--grand .pj_bulletin_litres_val { font-size: 40px; }
.pj_bulletin_bilan { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.pj_bulletin_bilan p { margin: 0; padding: 10px 12px; background: var(--lentille-pale); border-radius: 10px 10px 10px 2px; display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.3; }
.pj_bulletin_mm { font-size: 21px; font-weight: 750; }
.pj_bulletin_formule { font-size: 13.5px; color: var(--encre-doux); margin: 0 0 10px; }
.pj_bulletin_restriction { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; margin: 0 0 10px; }
.pj_bulletin_verdict { font-family: var(--titre); font-size: 17px; line-height: 1.35; margin: 0 0 8px; padding-left: 14px; border-left: 3px solid var(--rose); }
.pj_niveau { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 650; background: var(--lentille-pale); white-space: nowrap; }
.pj_niveau_point { width: 10px; height: 10px; border-radius: 50%; background: var(--lentille-fonce); }
.pj_niveau--vigilance { background: #F6EBCB; } .pj_niveau--vigilance .pj_niveau_point { background: #A07A12; }
.pj_niveau--alerte { background: #F8E0D2; } .pj_niveau--alerte .pj_niveau_point { background: #B5541E; }
.pj_niveau--alerte-renforcee { background: var(--rose-pale); } .pj_niveau--alerte-renforcee .pj_niveau_point { background: var(--rose); }
.pj_niveau--crise { background: var(--encre); color: #fff; } .pj_niveau--crise .pj_niveau_point { background: #FF8FB0; }

/* ==========================================================================
   FORMULAIRE EN 4 ÉTAPES
   ========================================================================== */
.pj_form { position: relative; }
.pj_form_piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pj_form_titre { font-family: var(--titre); font-size: 22px; line-height: 1.15; margin: 0 0 10px; }
.pj_form_barre { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1.5px dashed var(--filet); }
.pj_form_feuilles { display: flex; gap: 4px; }
.pj_feuille { display: inline-flex; opacity: .45; transition: opacity .2s, transform .2s; }
.pj_feuille.is-faite { opacity: 1; }
.pj_feuille.is-faite svg path { fill: var(--lentille); }
.pj_feuille.is-active { opacity: 1; transform: scale(1.18); }
.pj_feuille.is-active svg path { fill: var(--lentille-fonce); }
.pj_form_barre_texte { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--encre-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj_form_etape { border: 0; margin: 0; padding: 0; min-width: 0; }
.pj_form_etape[hidden] { display: none; }
.pj_form_etape_titre { display: block; padding: 0; font-family: var(--titre); font-size: 21px; line-height: 1.2; margin: 0 0 12px; color: var(--encre); }
.pj_form_etape_titre:focus { outline: none; }
.pj_form_tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pj_form_tuile { position: relative; }
.pj_form_tuile input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pj_form_tuile label { display: flex; flex-direction: column; height: 100%; border: 2px solid var(--filet); border-radius: 12px 12px 12px 3px; overflow: hidden; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.pj_form_tuile_photo { display: block; aspect-ratio: 16 / 9; background: var(--lentille-pale); overflow: hidden; }
.pj_form_tuile_photo img, .pj_form_tuile_photo .pj_photo_repli { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.pj_form_tuile_photo .pj_photo_repli img { width: 34px !important; height: 34px !important; }
.pj_form_tuile_libelle { display: flex; align-items: center; flex: 1; padding: 8px 10px; font-size: 14.5px; font-weight: 620; line-height: 1.25; min-height: 48px; }
.pj_form_tuile:hover label { border-color: var(--meuliere); }
.pj_form_tuile input:checked + label { border-color: var(--rose); box-shadow: 0 0 0 2px var(--rose); }
.pj_form_tuile input:checked + label .pj_form_tuile_libelle { color: var(--rose-fonce); }
.pj_form_tuile input:focus-visible + label { outline: 3px solid var(--rose); outline-offset: 2px; }
.pj_form_champ { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; min-width: 0; }
.pj_form_champ label { font-size: 14px; font-weight: 620; }
.pj_form input[type="text"], .pj_form input[type="tel"], .pj_form input[type="email"] { width: 100%; min-height: 46px; padding: 10px 12px; border: 1.5px solid #BDB2A8; border-radius: 8px; background: #fff; font-size: 16px; }
.pj_form input:focus { border-color: var(--rose); outline: 2px solid var(--rose-pale); outline-offset: 0; }
.pj_form input[aria-invalid="true"] { border-color: #B3261E; background: #FFF6F5; }
.pj_form_ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pj_form_pastilles { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.pj_form_pastilles button { min-height: 38px; padding: 6px 12px; border: 1.5px solid var(--filet); background: var(--lentille-pale); border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pj_form_pastilles button:hover { border-color: var(--lentille-fonce); }
.pj_form_pastilles button[aria-pressed="true"] { background: var(--encre); color: #fff; border-color: var(--encre); }
.pj_form_actions { display: flex; gap: 10px; margin-top: 12px; }
.pj_form_actions .pj_btn--plein { flex: 1; }
.pj_form_actions .pj_btn--fantome { padding-left: 16px; padding-right: 16px; }
.pj_form_pro { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 560; cursor: pointer; margin: 2px 0 4px; min-height: 32px; }
.pj_form_pro input { width: 20px; height: 20px; accent-color: var(--rose); margin: 0; }
.pj_form_erreur { margin: 8px 0 0; color: #B3261E; font-weight: 650; font-size: 14.5px; }
.pj_form_erreur[hidden] { display: none; }
.pj_form_reassurance { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: var(--encre-doux); }
.pj_form_confirmation { padding: 10px 0; }
.pj_form_confirmation_titre { font-family: var(--titre); font-size: 26px; color: var(--lentille-fonce); margin-bottom: 8px; }
.pj_form_confirmation[hidden], .pj_form_corps[hidden], .pj_form_barre[hidden], .pj_form_titre[hidden] { display: none; }

/* Formulaire compact (rail d'article, rubrique) : tuiles sans photo */
.pj_form--compact .pj_form_tuiles { gap: 8px; }
.pj_form--compact .pj_form_tuile_libelle { min-height: 50px; font-size: 14px; padding: 8px 10px; }
.pj_form--compact .pj_form_etape_titre { font-size: 19px; margin-bottom: 10px; }
.pj_form--compact .pj_form_reassurance { display: none; }
.pj_form--compact .pj_form_champ { margin-bottom: 8px; }
.pj_form--compact input[type="text"], .pj_form--compact input[type="tel"], .pj_form--compact input[type="email"] { min-height: 42px; padding: 8px 10px; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.pj_section { padding: 56px 0; }
.pj_section--blanc { background: #fff; }
.pj_section--lentille { background: var(--lentille-pale); }
.pj_section--meuliere { background: var(--meuliere-pale); }
.pj_section--prune { background: var(--encre); color: #F4ECF1; }
.pj_section_titre { font-size: clamp(1.75rem, 2.4vw, 2.35rem); margin-bottom: 14px; }
.pj_section_titre--clair { color: #fff; }
.pj_section_intro { color: var(--encre-doux); max-width: 38em; margin-bottom: 18px; }
.pj_section_tete { display: flex; align-items: end; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; margin-bottom: 22px; }
.pj_section_tete .pj_section_titre { margin: 0; }
.pj_vide { padding: 22px 24px; background: var(--lentille-pale); border-radius: 14px 14px 14px 3px; font-size: 17px; margin: 0; }

/* Bulletin des communes + carte */
.pj_section_bulletin_grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.pj_section_bulletin_apercu { display: flex; flex-direction: column; gap: 22px; }
.pj_carte_wrap { position: relative; }
.pj_carte_svg { display: block; width: 100%; height: auto; max-height: 450px; }
#bulletin-communes .pj_carte_svg { max-height: 392px; }
#bulletin-communes .pj_section_intro { margin-bottom: 10px; }
#bulletin-communes.pj_section { padding: 48px 0; }
.pj_commune { fill: #ECE7E1; stroke: #fff; stroke-width: 1.6; transition: fill .15s; }
.pj_commune:not(.pj_commune--hors) { fill: #D8E3A6; cursor: pointer; }
.pj_commune--vigilance { fill: #EBD99E !important; }
.pj_commune--alerte { fill: #EDBFA6 !important; }
.pj_commune--alerte-renforcee { fill: #E59AB3 !important; }
.pj_commune--crise { fill: #86183D !important; }
.pj_commune.est-actuelle { fill: var(--rose) !important; }
.pj_commune:not(.pj_commune--hors):hover, .pj_commune.is-survole, .pj_commune:not(.pj_commune--hors):focus-visible { fill: var(--lentille) !important; stroke: var(--encre); stroke-width: 2.4; outline: none; }
.pj_carte_nom { display: none; }
.pj_carte_etiquette { position: absolute; z-index: 5; pointer-events: none; padding: 6px 12px; background: var(--encre); color: #fff; font-size: 14px; font-weight: 650; border-radius: 8px 8px 8px 2px; white-space: nowrap; }
.pj_carte_etiquette[hidden] { display: none; }
.pj_liste_communes { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.pj_commune_item { display: inline-block; padding: 6px 12px; font-size: 14px; font-weight: 600; color: var(--encre); text-decoration: none; background: var(--lentille-pale); border-radius: 999px; white-space: nowrap; transition: background .15s; }
.pj_commune_item:hover, .pj_commune_item.is-survole { background: var(--lentille); color: var(--encre); }
.pj_commune_item.est-actuelle { background: var(--rose); color: #fff; }
.pj_communes_distances { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 0; }
.pj_communes_distances a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 14px; background: #fff; border: 1.5px solid var(--filet); border-radius: 10px 10px 10px 2px; text-decoration: none; color: var(--encre); font-weight: 620; font-size: 15px; }
.pj_communes_distances a:hover, .pj_communes_distances a.is-survole { border-color: var(--rose); color: var(--rose); }
.pj_communes_distances small { font-weight: 500; color: var(--encre-doux); font-size: 13.5px; white-space: nowrap; }
.pj_communes_distances--voisines { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Outil de débit */
.pj_calculateur_grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.pj_calculateur_intro { color: #E2D6DE; max-width: 36em; }
.pj_calculateur_outil { display: grid; gap: 6px; }
.pj_calculateur_outil label { font-weight: 600; font-size: 15.5px; color: #fff; margin-top: 6px; }
.pj_calculateur_outil output { color: var(--lentille); font-weight: 800; }
.pj_calculateur_outil input[type="range"] { width: 100%; accent-color: var(--lentille); height: 30px; cursor: pointer; }
.pj_calculateur_resultats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.pj_calculateur_resultats p { margin: 0; padding: 16px 18px; background: rgba(255, 255, 255, .07); border-left: 4px solid var(--lentille); border-radius: 4px 12px 12px 4px; display: flex; flex-direction: column; font-size: 14.5px; color: #E2D6DE; }
.pj_calculateur_chiffre { font-size: 34px; font-weight: 800; color: #fff; line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; }
.pj_calculateur_source { font-size: 13.5px; color: #CDBFC8; margin: 10px 0 0; }
.pj_calculateur_photo .pj_bassin { max-width: 470px; margin-left: auto; }

/* Guides */
.pj_filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.pj_filtre { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 15px; border: 1.5px solid var(--encre); border-radius: 10px 10px 10px 2px; color: var(--encre); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.pj_filtre:hover { background: var(--encre); color: #fff; }
.pj_grille { display: grid; gap: 24px; }
.pj_grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pj_grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pj_grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pj_carte_guide { display: flex; flex-direction: column; text-decoration: none; color: var(--encre); background: #fff; border-radius: 16px 16px 16px 4px; overflow: hidden; box-shadow: 0 0 0 1.5px var(--filet); transition: box-shadow .18s, transform .18s; }
.pj_carte_guide:hover { color: var(--encre); box-shadow: 0 0 0 2px var(--rose), 0 12px 24px rgba(44, 31, 43, .1); transform: translateY(-2px); }
.pj_carte_guide_photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--lentille-pale); }
.pj_carte_guide_photo img, .pj_carte_guide_photo .pj_photo_repli { width: 100%; height: 100%; object-fit: cover; }
.pj_carte_guide_rubrique { align-self: flex-start; margin: 14px 18px 0; padding: 3px 10px; font-size: 13px; font-weight: 700; color: var(--lentille-fonce); background: var(--lentille-pale); border-radius: 6px 6px 6px 1px; }
.pj_carte_guide_titre { padding: 8px 18px 20px; font-family: var(--titre); font-size: 19px; line-height: 1.25; }
.pj_grille--2 .pj_carte_guide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; }
.pj_grille--2 .pj_carte_guide_photo { grid-row: 1 / 3; aspect-ratio: auto; min-height: 200px; }

/* Étapes */
.pj_etapes_accueil { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding: 0; margin: 8px 0 0; counter-reset: none; }
.pj_carte_etape { display: flex; flex-direction: column; background: #fff; border-radius: 16px 16px 16px 4px; overflow: hidden; }
.pj_carte_etape_photo { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--lentille-pale); }
.pj_carte_etape_photo img, .pj_carte_etape_photo .pj_photo_repli { width: 100%; height: 100%; object-fit: cover; }
.pj_carte_etape_num { position: absolute; left: 12px; bottom: 12px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 19px; color: var(--encre); border-radius: 50%; background: conic-gradient(from 52deg, transparent 0 26deg, var(--lentille) 26deg); }
.pj_carte_etape_titre { padding: 14px 18px 4px; font-family: var(--titre); font-size: 19px; line-height: 1.25; }
.pj_carte_etape_texte { padding: 0 18px 18px; font-size: 15px; color: var(--encre-doux); line-height: 1.5; }

/* FAQ (accueil, contact) */
.pj_faq_grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; }
.pj_faq { display: grid; gap: 8px; }
.pj_faq_item, .pj_corps details, .sbt-faq details { background: #fff; border: 1.5px solid var(--filet); border-radius: 12px 12px 12px 3px; }
.pj_faq_item summary, .pj_corps details > summary, .sbt-faq summary { list-style: none; position: relative; cursor: pointer; padding: 14px 56px 14px 18px; font-weight: 650; font-size: 16.5px; line-height: 1.35; text-wrap: pretty; }
.pj_faq_item summary::-webkit-details-marker, .pj_corps details > summary::-webkit-details-marker, .sbt-faq summary::-webkit-details-marker { display: none; }
.pj_faq_item summary::after, .pj_corps details:not(.pj_acc) > summary::after, .sbt-faq summary::after { content: "+"; position: absolute; right: 14px; top: 50%; width: 30px; height: 30px; margin-top: -15px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--encre); color: #fff; font-size: 21px; font-weight: 500; line-height: 1; }
.pj_faq_item[open] summary::after, .pj_corps details[open]:not(.pj_acc) > summary::after, .sbt-faq details[open] summary::after { content: "\2212"; background: var(--rose); }
.pj_faq_item[open], .pj_corps details[open]:not(.pj_acc), .sbt-faq details[open] { border-color: var(--meuliere); }
.pj_faq_reponse, .sbt-faq-reponse { padding: 0 18px 16px; color: var(--encre-doux); }
.pj_faq_reponse p { margin-bottom: 8px; }
.pj_faq_reponse a { font-weight: 650; }

/* Formulaire du bas */
.pj_formulaire_bas_grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: center; }
.pj_formulaire_bas_photo { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 32px; align-items: center; }
.pj_formulaire_bas_texte p { color: var(--encre-doux); }
.pj_formulaire_bas_note { font-size: 14.5px; font-weight: 600; color: var(--lentille-fonce) !important; }

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
.pj_footer_semaine { background: var(--lentille); color: var(--encre); }
.pj_footer_semaine_inner { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap; }
.pj_footer_semaine_texte { position: relative; margin: 0; padding-left: 34px; font-size: 16.5px; font-weight: 520; }
.pj_footer_semaine .pj_oeillet { left: 9px; top: 50%; margin: -9px 0 0; }
.pj_footer_semaine .pj_btn--clair { background: var(--encre); color: #fff; box-shadow: none; }
.pj_footer_semaine .pj_btn--clair:hover { background: #000; color: #fff; }
.pj_footer { background: var(--encre); color: #E2D6DE; padding: 52px 0 28px; }
.pj_footer_haut { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 2.1fr); gap: 48px; }
.pj_footer_phrase { margin-top: 14px; font-size: 15px; max-width: 320px; color: #D4C6CF; }
.pj_footer_titre { font-family: var(--titre); font-size: 18px; color: #fff; margin: 0 0 10px; }
.pj_footer_colonne ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.pj_footer a { color: #F4ECF1; text-decoration: none; font-size: 15px; }
.pj_footer a:hover { color: var(--lentille); text-decoration: underline; }
.pj_footer_communes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 18px !important; }
.pj_footer_bas { display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 14px; color: #CDBFC8; }

/* ==========================================================================
   FIL D'ARIANE
   ========================================================================== */
.pj_fil { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--encre-doux); margin-bottom: 10px; }
.pj_fil a { color: var(--encre-doux); text-decoration: none; }
.pj_fil a:hover { color: var(--rose); text-decoration: underline; }
.pj_fil_sep { width: 7px; height: 7px; border-radius: 50%; background: var(--meuliere); }

/* ==========================================================================
   ARTICLE
   ========================================================================== */
.pj_entete_article { padding: 30px 0 34px; background: linear-gradient(180deg, #fff 0 70%, var(--lentille-pale) 70%); }
.pj_entete_article_grille { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; }
.pj_entete_article_texte { margin-right: -56px; z-index: 2; padding: 42px 40px 28px; }
.pj_entete_article_titre { font-size: clamp(2rem, 2.9vw, 2.85rem); line-height: 1.1; margin-bottom: 14px; }
.pj_entete_article_chapo { font-size: 18px; color: var(--encre-doux); margin-bottom: 16px; }
.pj_entete_article_auteur { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.pj_entete_article_auteur a { font-weight: 700; color: var(--encre); }
.pj_entete_article_auteur img, .pj_entete_article_auteur_photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--meuliere); flex-shrink: 0; }
.pj_entete_article_meta { display: block; color: var(--encre-doux); font-size: 14px; }
.pj_entete_article_scene { position: relative; }
.pj_bassin--entete { width: 100%; max-width: 560px; margin-left: auto; }
.pj_entete_article_scene .pj_feuille_nenuphar { right: 12px; bottom: -22px; }

.sbt-article-mise-en-page { display: grid; grid-template-columns: minmax(0, 740px) minmax(0, 340px); gap: 48px; justify-content: center; max-width: calc(1312px + 2 * var(--marge)); margin: 0 auto; padding: 44px var(--marge) 56px; }
.sbt-article-principal { min-width: 0; }
.sbt-rail { position: sticky; top: 90px; align-self: start; display: flex; flex-direction: column; gap: 14px; padding: 18px; background: #fff; border: 1.5px solid var(--filet); border-radius: 16px 16px 16px 4px; box-shadow: 0 10px 26px rgba(44, 31, 43, .07); }
.sbt-rail-carte + .sbt-rail-carte { padding-top: 14px; border-top: 1.5px dashed var(--filet); }
.sbt-sommaire { margin: 0; }
.sbt-sommaire-titre { list-style: none; cursor: pointer; font-family: var(--titre); font-size: 18px; margin-bottom: 6px; }
.sbt-sommaire-titre::-webkit-details-marker { display: none; }
.sbt-sommaire ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.sbt-sommaire a { display: flex; gap: 10px; padding: 5px 8px; border-radius: 8px; color: var(--encre); text-decoration: none; font-size: 14.5px; line-height: 1.35; }
.sbt-sommaire a:hover { background: var(--lentille-pale); }
.sbt-sommaire a.is-actif { background: var(--lentille-pale); color: var(--lentille-fonce); font-weight: 650; box-shadow: inset 3px 0 0 var(--lentille-fonce); }
.sbt-sommaire-num { font-weight: 750; color: var(--meuliere-fonce); font-size: 13px; padding-top: 1px; }
.pj_lecture { display: grid; gap: 6px; margin-bottom: 10px; }
.pj_lecture_barre { display: block; height: 8px; border-radius: 8px; background: var(--lentille-pale); overflow: hidden; }
.pj_lecture_niveau { display: block; height: 100%; background: linear-gradient(90deg, var(--lentille-fonce), var(--lentille)); transform-origin: 0 50%; transform: scaleX(0); }
.pj_lecture_texte { font-size: 13px; font-weight: 600; color: var(--encre-doux); }
.pj_rail_form .pj_form_titre { font-size: 19px; }
.sbt-sommaire-mobile { display: none; margin-bottom: 24px; padding: 14px 18px; background: var(--lentille-pale); border-radius: 14px 14px 14px 3px; }
.pj_suite .pj_section_titre { margin-bottom: 20px; }

/* Corps d'article et de page ville : chaque bloc du gabarit a son style */
.pj_corps { font-size: 18px; line-height: 1.72; }
.pj_corps > *:first-child { margin-top: 0; }
.pj_corps h2 { font-size: clamp(1.6rem, 2.2vw, 2rem); margin: 1.9em 0 .55em; scroll-margin-top: 100px; }
.pj_corps h3 { font-size: 1.3rem; margin: 1.5em 0 .5em; }
.pj_corps p { margin: 0 0 1.05em; }
.pj_corps a { font-weight: 560; }
.pj_corps img { border-radius: 14px 14px 14px 3px; max-height: 480px; width: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.pj_corps figure { margin: 1.6em 0; }
.pj_corps figcaption { font-size: 14px; color: var(--encre-doux); margin-top: 8px; }
.pj_corps .chapo, .pj_corps .pj-chapo { font-size: 20px; line-height: 1.6; color: var(--encre); padding: 2px 0 2px 20px; border-left: 4px solid var(--lentille); margin-bottom: 1.4em; }
.pj_corps ul, .pj_corps ol:not(.pj-etapes):not(.sbt-retenir-liste) { padding-left: 1.3em; }
.pj-reperes, .pj-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 1.8em 0; }
.pj-repere, .pj-chiffre { display: flex; flex-direction: column; gap: 4px; margin: 0 !important; padding: 18px 18px 16px; background: var(--lentille-pale); border-radius: 14px 14px 14px 3px; position: relative; overflow: hidden; }
.pj-repere::after, .pj-chiffre::after { content: ""; position: absolute; right: -18px; top: -18px; width: 58px; height: 58px; border-radius: 50%; background: conic-gradient(from 52deg, transparent 0 26deg, rgba(194, 214, 90, .55) 26deg); }
.pj-repere strong, .pj-chiffre strong { font-family: var(--texte); font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--rose); position: relative; }
.pj-repere span, .pj-chiffre span { display: block; font-size: 15px; line-height: 1.45; color: var(--encre); position: relative; }
.pj-etapes { list-style: none; counter-reset: pj-etape; margin: 1.8em 0 .6em; padding: 0; display: grid; gap: 0; }
.pj-etapes li { counter-increment: pj-etape; position: relative; padding: 0 0 22px 64px; min-height: 48px; }
.pj-etapes li::before { content: counter(pj-etape); position: absolute; left: 0; top: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: var(--encre); border-radius: 50%; background: conic-gradient(from 52deg, transparent 0 26deg, var(--lentille) 26deg); }
.pj-etapes li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 50px; bottom: 4px; width: 2.5px; background: repeating-linear-gradient(180deg, var(--meuliere) 0 5px, transparent 5px 9px); }
.pj-etapes li strong { display: block; font-size: 18px; margin-bottom: 2px; }
.pj-etapes li span { display: block; font-size: 16.5px; color: var(--encre-doux); line-height: 1.55; }
.pj-etapes-legende { font-size: 15px; color: var(--encre-doux); font-style: italic; margin-bottom: 1.6em !important; }
.pj-comparatif { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 1.8em 0; }
.pj-comparatif--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pj-comparatif--quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pj-comparatif__carte { display: flex; flex-direction: column; gap: 6px; margin: 0 !important; padding: 18px 18px 18px; background: #fff; border: 1.5px solid var(--filet); border-top: 6px solid var(--meuliere); border-radius: 6px 6px 14px 3px; }
.pj-comparatif__carte:nth-child(2n) { border-top-color: var(--lentille-fonce); }
.pj-comparatif__carte strong { font-family: var(--titre); font-weight: 400; font-size: 19px; line-height: 1.25; }
.pj-comparatif__carte span { display: block; font-size: 15.5px; line-height: 1.5; color: var(--encre-doux); }
.pj-encadre, .bon-a-savoir, .sbt-encadre { display: block; margin: 1.8em 0; padding: 18px 22px 18px 64px; border-radius: 14px 14px 14px 3px; position: relative; background: var(--lentille-pale); }
.pj-encadre::before, .bon-a-savoir::before, .sbt-encadre::before { content: ""; position: absolute; left: 20px; top: 20px; width: 28px; height: 28px; border-radius: 50%; background: conic-gradient(from 52deg, transparent 0 26deg, var(--lentille-fonce) 26deg); }
.pj-encadre > strong:first-child, .bon-a-savoir > strong:first-child, .pj-encadre-titre, .sbt-encadre-titre { display: block; font-family: var(--titre); font-weight: 400; font-size: 19px; line-height: 1.25; margin: 0 0 4px; color: var(--encre); }
.pj-encadre > span, .bon-a-savoir > span { display: block; font-size: 16.5px; line-height: 1.6; }
.pj-encadre p:last-child, .sbt-encadre p:last-child { margin-bottom: 0; }
.pj-encadre--retenir { background: var(--lentille-pale); }
.pj-encadre--info { background: #F1EEF6; }
.pj-encadre--info::before { background: var(--encre); }
.pj-encadre--alerte, .pj-encadre--attention { background: var(--rose-pale); }
.pj-encadre--alerte::before, .pj-encadre--attention::before { background: var(--rose); border-radius: 6px; transform: rotate(45deg) scale(.82); }
.sbt-encadre--saviez { background: var(--meuliere-pale); }
.sbt-encadre--saviez::before { background: var(--meuliere); }
.sbt-retenir-liste { margin: 6px 0 0; padding-left: 1.1em; }
.sbt-retenir-liste li { margin-bottom: 6px; }
.pj_corps section.faq, .pj_corps .pj-faq, .pj_corps .sbt-faq { margin: 2em 0; }
.pj_corps section.faq details, .pj_corps .pj-faq details, .sbt-faq-liste details { margin-bottom: 8px; }
.pj_corps details > p, .pj_corps details > div { padding: 0 18px 14px; color: var(--encre-doux); font-size: 16.5px; }
.sbt-faq-liste { display: grid; gap: 8px; }
.pj_corps section.sources, .pj_corps aside.sources { margin: 2.2em 0 0; padding: 18px 22px; border-top: 3px solid var(--meuliere); background: var(--meuliere-pale); border-radius: 0 0 14px 3px; font-size: 15px; line-height: 1.55; }
.pj_corps section.sources h2, .pj_corps aside.sources h2 { font-size: 20px; margin: 0 0 8px; }
.pj_corps section.sources p, .pj_corps aside.sources p { margin: 0 0 6px; }
.pj_corps .pj-voisines { padding: 14px 18px; background: var(--lentille-pale); border-radius: 12px 12px 12px 3px; font-size: 16px; }
.pj_corps .sbs_tableau, .pj_corps .sbs-tableau { overflow-x: auto; margin: 1.6em 0; }
.pj_corps table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.pj_corps th, .pj_corps td { padding: 10px 12px; border-bottom: 1px solid var(--filet); text-align: left; vertical-align: top; }
.pj_corps th { background: var(--lentille-pale); white-space: nowrap; }

/* Boîte auteur (bloc figé) */
.sbt-auteur { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 22px; margin: 2.4em 0 0; padding: 24px; background: var(--meuliere-pale); border-radius: 18px 18px 18px 4px; }
.sbt-auteur-photo img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--meuliere); }
.sbt-auteur-sur { margin: 0; font-size: 13.5px; font-weight: 650; color: var(--meuliere-fonce); }
.sbt-auteur-nom { margin: 0; font-family: var(--titre); font-size: 22px; }
.sbt-auteur-nom a { color: var(--encre); text-decoration: none; }
.sbt-auteur-role { margin: 0 0 8px; font-size: 14.5px; color: var(--encre-doux); }
.sbt-auteur-bio { font-size: 15.5px; margin-bottom: 10px; }
.sbt-auteur-chiffres { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--encre-doux); margin-bottom: 10px; }
.sbt-auteur-der { display: grid; gap: 4px; margin-bottom: 12px; font-size: 15px; }
.sbt-auteur-der p { margin: 0; font-weight: 650; }
.sbt-auteur-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ==========================================================================
   RUBRIQUE — le rang de pépinière
   ========================================================================== */
.pj_entete_rubrique { padding: 24px 0 0; background: #fff; }
.pj_entete_rubrique_grille { position: relative; }
.pj_entete_rubrique .pj_bassin--long { width: 100%; max-height: 380px; }
.pj_entete_rubrique_carte { position: absolute; left: var(--marge); bottom: -26px; width: min(520px, 46%); padding: 40px 30px 22px; z-index: 2; }
.pj_entete_rubrique_carte h1, .pj_entete_communes h1, .pj_entete_annexe h1, .pj_entete_page h1, .pj_entete_contact h1 { font-size: clamp(2rem, 3vw, 2.9rem); line-height: 1.08; margin-bottom: 10px; }
.pj_entete_rubrique_desc { font-size: 17px; color: var(--encre-doux); margin-bottom: 8px; }
.pj_entete_rubrique_compteur { font-size: 14.5px; font-weight: 700; color: var(--lentille-fonce); margin: 0; }
.pj_onglets { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding-top: 14px !important; padding-bottom: 12px !important; }
.pj_onglet { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 14px 8px 28px; position: relative; border-radius: 6px 10px 10px 6px; background: var(--lentille-pale); color: var(--encre); text-decoration: none; font-weight: 620; font-size: 15px; white-space: nowrap; }
.pj_onglet::before { content: ""; position: absolute; left: 10px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--meuliere); }
.pj_onglet:hover { background: var(--lentille); color: var(--encre); }
.pj_onglet.is-actif { background: var(--encre); color: #fff; }
.pj_rang_section { padding-top: 40px; }
.pj_rang_grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 48px; align-items: start; }
.pj_rang { display: grid; gap: 18px; position: relative; padding-left: 26px; }
.pj_rang::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 3px; background: repeating-linear-gradient(180deg, var(--meuliere) 0 8px, transparent 8px 13px); }
.pj_rang_item { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; align-items: center; padding: 14px 22px 14px 14px; background: #fff; border: 1.5px solid var(--filet); border-radius: 6px 18px 18px 6px; text-decoration: none; color: var(--encre); transition: border-color .18s, box-shadow .18s; }
.pj_rang_item::before { content: ""; position: absolute; left: -27px; top: 50%; width: 22px; height: 2px; background: var(--meuliere); }
.pj_rang_item:hover { color: var(--encre); border-color: var(--rose); box-shadow: 0 10px 22px rgba(44, 31, 43, .09); }
.pj_rang_photo { display: block; aspect-ratio: 1000 / 900; position: relative; }
.pj_rang_photo img, .pj_rang_photo .pj_photo_repli { width: 100%; height: 100%; object-fit: cover; -webkit-mask: url(../svg/eau-haricot.svg) center / 100% 100% no-repeat; mask: url(../svg/eau-haricot.svg) center / 100% 100% no-repeat; }
.pj_rang_photo::after { content: ""; position: absolute; inset: 0; background: url(../svg/margelle-haricot.svg) center / 100% 100% no-repeat; }
.pj_rang_corps { position: relative; display: flex; flex-direction: column; gap: 6px; padding-left: 26px; }
.pj_rang_corps .pj_oeillet { left: 0; top: 4px; margin: 0; width: 14px; height: 14px; box-shadow: 0 0 0 3px var(--meuliere), inset 0 2px 3px rgba(44, 31, 43, .3); }
.pj_rang_titre { font-family: var(--titre); font-size: 21px; line-height: 1.25; }
.pj_rang_extrait { font-size: 15.5px; color: var(--encre-doux); line-height: 1.5; }
.pj_rang_meta { font-size: 13.5px; font-weight: 650; color: var(--lentille-fonce); }
.pj_rang_item--tete { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding: 20px 26px 20px 18px; background: var(--lentille-pale); border-color: transparent; }
.pj_rang_item--tete .pj_rang_titre { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.pj_rang_item--tete .pj_rang_extrait { font-size: 16.5px; }
.pj_rang_cote { position: sticky; top: 92px; }
.pj_rubrique_bas { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.pj_rubrique_autres_liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pj_rubrique_autres_liste a { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; background: var(--lentille-pale); border-radius: 12px 12px 12px 3px; text-decoration: none; color: var(--encre); }
.pj_rubrique_autres_liste a:hover { background: var(--lentille); color: var(--encre); }
.pj_rubrique_autres_liste svg { flex-shrink: 0; margin-top: 3px; }
.pj_rubrique_autres_liste span { display: flex; flex-direction: column; font-size: 15px; color: var(--encre-doux); }
.pj_rubrique_autres_liste strong { font-family: var(--titre); font-weight: 400; font-size: 19px; color: var(--encre); }
.pj_rubrique_texte { margin-top: 28px; border-top: 1.5px dashed var(--filet); padding-top: 14px; }
.pj_rubrique_texte summary { cursor: pointer; font-weight: 650; }
.pj_rubrique_texte > div { padding-top: 10px; color: var(--encre-doux); max-width: 760px; }

/* Hub des communes */
.pj_entete_communes { padding: 34px 0 40px; background: var(--lentille-pale); }
.pj_entete_communes_grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.pj_hub_form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: center; }

/* ==========================================================================
   PAGE VILLE
   ========================================================================== */
.pj_entete_ville { margin-bottom: 26px; }
.pj_ville_section { padding-top: 30px; }
.pj_ville_photo { margin: 0 0 30px; }
.pj_ville_photo .pj_bassin { aspect-ratio: 1000 / 440; }
.pj_ville_photo .pj_bassin_eau { -webkit-mask-image: url(../svg/eau-long.svg); mask-image: url(../svg/eau-long.svg); }
.pj_ville_photo .pj_margelle { background-image: url(../svg/margelle-long.svg); }
.pj_ville_cta { display: none !important; }
.pj_entete_ville_grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.pj_pastille { display: inline-flex; padding: 5px 12px; font-size: 14px; font-weight: 650; color: var(--lentille-fonce); background: var(--lentille-pale); border-radius: 999px; margin-bottom: 12px; }
.pj_entete_ville_titre { font-size: clamp(2.1rem, 3.4vw, 3.3rem); line-height: 1.06; margin-bottom: 14px; }
.pj_entete_ville_chapo { font-size: 18px; color: var(--encre-doux); }
.pj_entete_ville_photo { margin: 0; }
.pj_entete_ville_photo .pj_bassin { max-width: 540px; margin-left: auto; }
.pj_credit_photo { margin-top: 8px; font-size: 13px; color: var(--encre-doux); text-align: right; }
.pj_credit_photo a { color: var(--encre-doux); }
.pj_ville_corps_grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 56px; align-items: start; }
.pj_ville_principal > .pj_corps, .pj_ville_principal > .sbt-auteur, .pj_ville_principal > .pj_ville_bulletin { max-width: 780px; }
.pj_ville_principal { min-width: 0; }
.pj_ville_bulletin { margin-bottom: 30px; }
.pj_acc { border: 0 !important; border-bottom: 1.5px dashed var(--filet) !important; border-radius: 0 !important; background: transparent !important; margin: 0; }
.pj_acc > summary { list-style: none; cursor: pointer; position: relative; padding: 18px 52px 18px 0 !important; }
.pj_acc > summary::-webkit-details-marker { display: none; }
.pj_acc > summary h2 { margin: 0 !important; font-size: clamp(1.35rem, 1.9vw, 1.7rem); }
.pj_acc > summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: conic-gradient(from 52deg, transparent 0 26deg, var(--lentille) 26deg); transition: transform .2s; }
.pj_acc[open] > summary::after { transform: rotate(180deg); background: conic-gradient(from 52deg, transparent 0 26deg, var(--rose) 26deg); }
.pj_acc_corps { padding: 0 0 18px; }
.pj_ville_carte_corps { margin: 26px 0; padding: 16px; background: var(--lentille-pale); border-radius: 16px 16px 16px 4px; }
.pj_ville_carte_corps .pj_carte_svg { max-height: 380px; }
.pj_ville_rail { position: sticky; top: 92px; }
.pj_voisines_bloc .pj_section_titre { margin-bottom: 18px; }

/* ==========================================================================
   PAGES ANNEXES
   ========================================================================== */
.pj_entete_annexe { padding: 30px 0 40px; background: linear-gradient(180deg, #fff 0 66%, var(--lentille-pale) 66%); }
.pj_entete_annexe_grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }
.pj_entete_annexe_grille > .pj_etiquette { margin-right: -48px; z-index: 2; padding: 42px 36px 28px; }
.pj_entete_annexe_grille > .pj_bassin { max-width: 540px; width: 100%; margin-left: auto; }
.pj_trois { align-items: stretch; }
.pj_trois_carte { display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--filet); border-radius: 16px 16px 16px 4px; overflow: hidden; text-decoration: none; color: var(--encre); }
.pj_trois_carte:hover { color: var(--encre); border-color: var(--rose); }
.pj_trois_visuel { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; overflow: hidden; background: var(--lentille-pale); }
.pj_trois_visuel img, .pj_trois_visuel .pj_photo_repli { width: 100%; height: 100%; object-fit: cover; }
.pj_trois_visuel--chiffre { flex-direction: column; gap: 6px; text-align: center; padding: 20px; background: radial-gradient(circle at 50% 50%, #DCE6B4 0 38%, var(--lentille-pale) 38%); }
.pj_trois_visuel--chiffre strong { font-size: 40px; font-weight: 800; color: var(--rose); line-height: 1; }
.pj_trois_visuel--chiffre span { font-size: 14.5px; font-weight: 600; max-width: 16em; }
.pj_trois_visuel--carte { padding: 10px; }
.pj_trois_visuel--carte .pj_carte_wrap, .pj_trois_visuel--carte .pj_carte_svg { height: 100%; width: auto; max-height: 100%; }
.pj_trois_titre { padding: 16px 20px 4px; font-family: var(--titre); font-size: 20px; }
.pj_trois_texte { padding: 0 20px 20px; font-size: 15.5px; color: var(--encre-doux); }
.pj_methode_tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pj_methode_tuiles p { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 22px 22px 22px; background: #fff; border-radius: 14px 14px 14px 3px; position: relative; }
.pj_methode_tuiles strong { font-family: var(--titre); font-weight: 400; font-size: 20px; padding-left: 38px; position: relative; }
.pj_methode_tuiles strong::before { content: ""; position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(from 52deg, transparent 0 26deg, var(--lentille-fonce) 26deg); }
.pj_methode_tuiles span { font-size: 15.5px; color: var(--encre-doux); }
.pj_equipe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pj_equipe--court { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.pj_personne { display: flex; align-items: center; gap: 14px; padding: 14px 22px 14px 14px; background: var(--meuliere-pale); border-radius: 999px 16px 16px 999px; text-decoration: none; color: var(--encre-doux); font-size: 14.5px; }
.pj_personne span { display: flex; flex-direction: column; }
.pj_personne strong { font-family: var(--titre); font-weight: 400; font-size: 20px; color: var(--encre); }
.pj_personne_photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--meuliere); flex-shrink: 0; }
.pj_personne_fiche { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; align-items: start; padding: 26px; background: var(--meuliere-pale); border-radius: 20px 20px 20px 4px; }
.pj_personne_fiche .pj_personne_photo { width: 160px; height: 160px; }
.pj_personne_fiche h2 { font-size: 26px; margin-bottom: 2px; }
.pj_personne_role { font-weight: 650; color: var(--lentille-fonce); margin-bottom: 10px; }
.pj_personne_chiffre strong { font-size: 22px; color: var(--rose); }
.pj_entete_page { padding: 34px 0 40px; background: var(--lentille-pale); }
.pj_etiquette--large { max-width: 860px; padding: 44px 40px 30px; }
.pj_auteur_tete { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 28px; align-items: center; }
.pj_auteur_tete .pj_personne_photo { width: 140px; height: 140px; }
.pj_entete_contact { padding: 28px 0 40px; background: linear-gradient(180deg, #fff 0 62%, var(--lentille-pale) 62%); }
.pj_entete_contact_grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 0; align-items: start; }
.pj_entete_contact_texte { padding-right: 24px; }
.pj_bassin--contact { width: 100%; max-width: 620px; margin-top: 10px; }
.pj_entete_contact_grille > .pj_etiquette--form { margin-left: -40px; margin-top: 30px; z-index: 2; }
.pj_apres { list-style: none; counter-reset: pj-apres; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; }
.pj_apres li { counter-increment: pj-apres; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 22px 76px; background: #fff; border-radius: 14px 14px 14px 3px; position: relative; min-height: 120px; }
.pj_apres li::before { content: counter(pj-apres); position: absolute; left: 20px; top: 20px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; border-radius: 50%; background: conic-gradient(from 52deg, transparent 0 26deg, var(--lentille) 26deg); }
.pj_apres strong { font-family: var(--titre); font-weight: 400; font-size: 20px; }
.pj_apres span { font-size: 15.5px; color: var(--encre-doux); }
.pj_credits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pj_credits li { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 14px 40px; background: var(--meuliere-pale); border-radius: 12px 12px 12px 3px; position: relative; font-size: 14.5px; }
.pj_credits li::before { content: ""; position: absolute; left: 14px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--meuliere); }
.pj_credits_fichier { font-weight: 700; color: var(--encre); overflow-wrap: anywhere; }
.pj_credits_auteur { color: var(--encre); }
.pj_credits_licence { color: var(--encre-doux); font-size: 13.5px; }
.search-form { display: flex; gap: 8px; margin-top: 12px; }
.search-form input[type="search"] { flex: 1; min-height: 46px; padding: 8px 12px; border: 1.5px solid #BDB2A8; border-radius: 8px; }
.search-form input[type="submit"] { min-height: 46px; padding: 8px 18px; border: 0; border-radius: 8px; background: var(--rose); color: #fff; font-weight: 650; cursor: pointer; }
.nav-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.nav-links a { font-weight: 650; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1240px) {
	.pj_hero_grille { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 32px; }
	.pj_bassin--hero { width: calc(100% - 110px); }
	.pj_hero_scene > .pj_etiquette--form { width: 372px; }
}
@media (max-width: 1100px) {
	.sbt-article-mise-en-page { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 36px; }
	.pj_ville_corps_grille { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 36px; }
	.pj_grille--4, .pj_etapes_accueil { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pj_footer_haut { grid-template-columns: 1fr 1fr; }
	.pj_footer_colonne--communes { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
	.pj_hero_grille { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.pj_hero_scene { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: start; }
	.pj_bassin--hero { position: relative; width: 100%; max-width: none; grid-column: 2; grid-row: 1; margin-top: 20px; }
	.pj_hero_scene > .pj_etiquette--form { position: relative; top: auto; left: auto; width: auto; grid-column: 1; grid-row: 1; margin-right: -60px; margin-top: 30px; }
	.pj_section_bulletin_grille, .pj_calculateur_grille, .pj_faq_grille, .pj_formulaire_bas_grille, .pj_rubrique_bas, .pj_entete_communes_grille, .pj_hub_form, .pj_rang_grille { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.pj_rang_cote { position: static; max-width: 520px; }
	.pj_calculateur_photo { display: none; }
	.sbt-article-mise-en-page, .pj_ville_corps_grille { grid-template-columns: minmax(0, 1fr); }
	.sbt-rail { display: none; }
	.sbt-sommaire-mobile { display: block; }
	.pj_ville_rail { position: static; max-width: 560px; }
	.pj_entete_article_grille, .pj_entete_annexe_grille, .pj_entete_ville_grille { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.pj_entete_article_texte, .pj_entete_annexe_grille > .pj_etiquette { margin-right: 0; order: 2; margin-top: -40px; }
	.pj_entete_article_scene, .pj_entete_annexe_grille > .pj_bassin { order: 1; }
	.pj_bassin--entete, .pj_entete_annexe_grille > .pj_bassin { aspect-ratio: 1000 / 440; max-width: none; }
	.pj_bassin--entete .pj_bassin_eau, .pj_entete_annexe_grille > .pj_bassin .pj_bassin_eau { -webkit-mask-image: url(../svg/eau-long.svg); mask-image: url(../svg/eau-long.svg); }
	.pj_bassin--entete .pj_margelle, .pj_entete_annexe_grille > .pj_bassin .pj_margelle { background-image: url(../svg/margelle-long.svg); }
	.pj_entete_article_scene .pj_feuille_nenuphar { width: 128px; height: 128px; padding: 18px; right: 6px; bottom: -30px; z-index: 3; }
	.pj_feuille_nenuphar_val { font-size: 23px; }
	.pj_feuille_nenuphar_txt { font-size: 11.5px; }
	.pj_entete_ville_photo { order: -1; margin-bottom: 16px; }
	.pj_entete_ville_photo .pj_bassin { max-width: none; }
	.pj_entete_contact_grille { grid-template-columns: minmax(0, 1fr); }
	.pj_entete_contact_grille > .pj_etiquette--form { margin: -50px 0 0; max-width: 560px; }
	.pj_bassin--contact { aspect-ratio: 1000 / 440; }
	.pj_bassin--contact .pj_bassin_eau { -webkit-mask-image: url(../svg/eau-long.svg); mask-image: url(../svg/eau-long.svg); }
	.pj_bassin--contact .pj_margelle { background-image: url(../svg/margelle-long.svg); }
	.pj_entete_rubrique_carte { position: relative; left: auto; bottom: auto; width: auto; margin: -34px 12px 0; }
	.pj_onglets { justify-content: flex-start; }
	.pj_methode_tuiles, .pj_apres, .pj_credits { grid-template-columns: minmax(0, 1fr); }
	.pj_equipe { grid-template-columns: minmax(0, 1fr); }
	.pj-comparatif--trois { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
	body { font-size: 16.5px; }
	.pj_section { padding: 40px 0; }
	.pj_hero { padding: 14px 0 28px; }
	.pj_hero_grille { gap: 0; }
	.pj_hero_scene { display: contents; }
	.pj_hero_grille > .pj_hero_texte { order: 1; padding-top: 14px; }
	.pj_bassin--hero { order: 0; grid-column: auto; grid-row: auto; margin: 0; aspect-ratio: 1000 / 440; }
	.pj_bassin--hero .pj_bassin_eau { -webkit-mask-image: url(../svg/eau-long.svg); mask-image: url(../svg/eau-long.svg); }
	.pj_bassin--hero .pj_margelle { background-image: url(../svg/margelle-long.svg); }
	.pj_hero_scene > .pj_etiquette--form { order: 2; grid-column: auto; grid-row: auto; margin: 20px 0 0; }
	.pj_hero_lieu { font-size: 14px; margin-bottom: 8px; }
	.pj_hero_titre { font-size: 2rem; margin-bottom: 12px; }
	.pj_hero_soustitre { font-size: 16.5px; margin-bottom: 14px; }
	.pj_hero_cta_mobile { display: flex; width: 100%; margin-bottom: 18px; }
	.pj_hero_preuves li { font-size: 13.5px; padding: 6px 11px; }
	.pj_etiquette { padding: 38px 16px 18px; }
	.pj_bulletin--grand { padding: 36px 18px 18px; }
	.pj_bulletin--grand .pj_bulletin_litres_val { font-size: 34px; }
	.pj_grille--2, .pj_grille--3, .pj_grille--4, .pj_etapes_accueil, .pj-comparatif, .pj-comparatif--quatre { grid-template-columns: minmax(0, 1fr); }
	.pj_grille--2 .pj_carte_guide { display: flex; }
	.pj_grille--2 .pj_carte_guide_photo { aspect-ratio: 3 / 2; min-height: 0; }
	.pj_etapes_accueil { gap: 14px; }
	.pj_carte_etape { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto 1fr; }
	.pj_carte_etape_photo { grid-row: 1 / 3; aspect-ratio: auto; min-height: 110px; }
	.pj_carte_etape_titre { padding: 12px 14px 2px; font-size: 17px; }
	.pj_carte_etape_texte { padding: 0 14px 12px; font-size: 14.5px; }
	.pj_carte_etape_num { width: 36px; height: 36px; font-size: 16px; left: 8px; bottom: 8px; }
	.pj_formulaire_bas_photo { grid-template-columns: 110px minmax(0, 1fr); gap: 18px; }
	.pj_footer_haut { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.pj_footer_communes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pj_footer { padding-bottom: 90px; }
	.pj_communes_distances, .pj_communes_distances--voisines { grid-template-columns: minmax(0, 1fr); }
	.pj_rang { padding-left: 0; }
	.pj_rang::before, .pj_rang_item::before { display: none; }
	.pj_rang_item, .pj_rang_item--tete { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 12px 14px 12px 10px; }
	.pj_rang_titre, .pj_rang_item--tete .pj_rang_titre { font-size: 18px; }
	.pj_rang_extrait { display: none; }
	.pj_rang_item--tete .pj_rang_extrait { display: block; font-size: 14.5px; }
	.pj_rang_corps { padding-left: 0; }
	.pj_rang_corps .pj_oeillet { display: none; }
	.pj_entete_rubrique { padding-top: 12px; }
	.pj_entete_rubrique .pj_bassin--long { aspect-ratio: 1000 / 420; }
	.pj_entete_rubrique_carte { margin: -26px 0 0; padding: 36px 18px 18px; }
	.pj_entete_article { padding: 12px 0 28px; }
	.pj_entete_article_texte { padding: 38px 18px 20px; margin-top: -28px; }
	.pj_entete_article_titre { font-size: 1.85rem; }
	.pj_entete_article_chapo { font-size: 16.5px; }
	.pj_entete_article_scene .pj_feuille_nenuphar { display: none; }
	.sbt-article-mise-en-page { padding-top: 28px; }
	.pj_corps { font-size: 17px; }
	.pj_corps .chapo, .pj_corps .pj-chapo { font-size: 18px; }
	.pj-encadre, .bon-a-savoir, .sbt-encadre { padding: 54px 18px 16px 18px; }
	.pj-encadre::before, .bon-a-savoir::before, .sbt-encadre::before { left: 18px; top: 16px; }
	.sbt-auteur { grid-template-columns: minmax(0, 1fr); padding: 20px; }
	.pj_entete_ville { padding: 12px 0 24px; }
	.pj_entete_ville_photo { order: 2; margin: 16px 0 0; }
	.pj_entete_ville_titre { font-size: 2rem; }
	.pj_ville_cta { display: flex !important; width: 100%; margin-top: 4px; }
	.pj_personne_fiche, .pj_auteur_tete { grid-template-columns: minmax(0, 1fr); }
	.pj_etiquette--large { padding: 40px 18px 22px; }
	.pj_entete_contact_grille > .pj_etiquette--form { margin-top: -30px; }
	.pj_bulletin_bilan { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.pj_calculateur_resultats { grid-template-columns: minmax(0, 1fr); }
	.pj_form_tuile_libelle { font-size: 14px; }
	.pj_footer_semaine_inner { padding-bottom: 18px; }
}
@media (max-width: 420px) {
	.pj_form_ligne { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.pj_form_actions .pj_btn { padding-left: 14px; padding-right: 14px; font-size: 16px; }
	.pj_logo_suffixe { display: none; }
	.pj_hero_titre { font-size: 1.85rem; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print { .pj_header, .pj_footer, .pj_footer_semaine, .sbt-rail, .pj_collant_mobile, .pj_form { display: none !important; } }

/* Crédits photos : vignette de chaque photo créditée (R-0031) */
.pj_credits_vignette { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; margin: 0 0 8px; display: block; background: var(--meuliere); }

/* Sortie n°1 (03/11) — P-550 écart texte→colonne ≤ 64 px ; P-552 pas de colonne qui s'arrête seule (FAQ d'accueil) */
.pj_rang_grille { gap: 32px; }
.pj_ville_corps_grille { gap: 40px; }
.pj_ville_principal > .pj_corps, .pj_ville_principal > .sbt-auteur, .pj_ville_principal > .pj_ville_bulletin { max-width: none; }
.pj_faq_grille { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.pj_faq_tete { max-width: 760px; }
.pj_faq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; align-items: start; }
@media (max-width: 900px) { .pj_faq { grid-template-columns: minmax(0, 1fr); } }
/* Bouton du menu mobile : les 3 traits doivent se voir (capture 390 du 03/11 : carré vide) */
.pj_menu_bouton { align-items: center; }
.pj_menu_bouton > span:not(.pj_sr_only) { display: block !important; width: 24px; height: 3px; min-height: 3px; background: #2b1a2e; border-radius: 2px; flex: none; }

/* ==========================================================================
   PASSE 1 du juge visuel (03/11) — titre deux tons, rubrique et ville sans
   colonne vide, contact sans chevauchement, bulletin unique en mobile.
   ========================================================================== */
/* 1. Titre de l'accueil : la seconde moitié en rose de Mandres */
.pj_hero_titre_ton { color: var(--rose); }

/* 2. Rubrique : le guide vedette à côté du devis, puis le rang sur toute la largeur */
.pj_rang_haut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 40px; align-items: center; }
.pj_rang_haut > .pj_vide { align-self: stretch; display: flex; align-items: center; }
.pj_rang_haut .pj_rang_item--tete { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pj_rang--suite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin-top: 30px; padding-left: 0; }
.pj_rang--suite::before, .pj_rang--suite .pj_rang_item::before { display: none; }
.pj_rang--suite .pj_rang_item { grid-template-columns: 170px minmax(0, 1fr); height: 100%; }
.pj_rang--suite .pj_rang_item:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: 200px minmax(0, 1fr); }
.pj_rubrique_autres_liste a { align-items: center; padding: 10px 18px 10px 10px; }
.pj_rubrique_autres_photo { flex: 0 0 132px; width: 132px; aspect-ratio: 4 / 3; border-radius: 10px 10px 10px 3px; overflow: hidden; background: var(--lentille-pale); display: block !important; }
.pj_rubrique_autres_photo img, .pj_rubrique_autres_photo .pj_photo_repli { width: 100%; height: 100%; object-fit: cover; min-height: 0; }

/* 3. Page ville : trois rangées équilibrées */
.pj_ville_haut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 48px; align-items: start; }
.pj_ville_haut .pj_ville_photo { margin: 0; }
.pj_ville_haut .pj_ville_rail_carte { margin-top: 12px; }
.pj_ville_milieu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 48px; align-items: start; margin-top: 40px; }
.pj_ville_milieu > .pj_corps { max-width: 780px; }
.pj_ville_cote { display: grid; gap: 22px; }
.pj_ville_cote .pj_ville_bulletin { margin: 0; }
.pj_ville_cote_titre { font-size: 22px; margin: 0 0 10px; }
.pj_communes_distances--cote { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pj_ville_cote .pj_ville_carte_corps { margin: 0; }
.pj_ville_cote .pj_carte_svg { max-height: 330px; }
.pj_ville_bas { max-width: calc(900px + 2 * var(--marge)); margin-top: 20px; }
.pj_ville_suite .pj-faq details, .pj_ville_suite section.faq details { margin-bottom: 8px; }

/* 4. Contact : texte et photo à gauche, devis à droite, rien ne passe dessous */
.pj_entete_contact_grille { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-rows: auto 1fr; column-gap: 48px; row-gap: 18px; }
.pj_entete_contact_texte { grid-column: 1; grid-row: 1; padding-right: 0; max-width: 640px; }
.pj_entete_contact_photo { grid-column: 1; grid-row: 2; margin-right: -84px; position: relative; z-index: 1; }
.pj_bassin--contact { aspect-ratio: 1000 / 440; max-width: none; margin-top: 0; }
.pj_bassin--contact .pj_bassin_eau { -webkit-mask-image: url(../svg/eau-long.svg); mask-image: url(../svg/eau-long.svg); }
.pj_bassin--contact .pj_margelle { background-image: url(../svg/margelle-long.svg); }
.pj_entete_contact_grille > .pj_entete_contact_form { grid-column: 2; grid-row: 1 / span 2; margin: 0; z-index: 2; align-self: start; }

@media (max-width: 980px) {
	.pj_rang_haut, .pj_ville_haut, .pj_ville_milieu { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.pj_rang_haut .pj_rang_form, .pj_ville_haut .pj_ville_rail_carte { max-width: 560px; }
	.pj_ville_milieu > .pj_corps { max-width: none; }
	.pj_entete_contact_grille { grid-template-columns: minmax(0, 1fr); }
	.pj_entete_contact_photo { margin-right: 0; grid-row: 2; }
	.pj_entete_contact_grille > .pj_entete_contact_form { grid-column: 1; grid-row: 3; margin: -40px 0 0; max-width: 560px; }
}
@media (max-width: 700px) {
	/* 6. Le bulletin ne se répète pas : sur mobile il vit dans sa section */
	.pj_hero_bulletin { display: none; }
	.pj_rang--suite { grid-template-columns: minmax(0, 1fr); }
	.pj_rang--suite .pj_rang_item, .pj_rang--suite .pj_rang_item:last-child:nth-child(odd) { grid-template-columns: 110px minmax(0, 1fr); }
	.pj_rang_haut .pj_rang_item--tete { grid-template-columns: 110px minmax(0, 1fr); }
	.pj_rubrique_autres_photo { flex-basis: 96px; width: 96px; }
	.pj_communes_distances--cote { grid-template-columns: minmax(0, 1fr); }
}
.pj_ville_haut, .pj_ville_milieu { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
.pj_ville_milieu > .pj_corps { max-width: none; }
.pj_ville_guides { display: grid; gap: 10px; }
.pj_ville_guide { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px 14px 8px 8px; background: #fff; border: 1.5px solid var(--filet); border-radius: 12px 12px 12px 3px; text-decoration: none; color: var(--encre); }
.pj_ville_guide:hover { border-color: var(--rose); color: var(--encre); }
.pj_ville_guide_photo { display: block; aspect-ratio: 4 / 3; border-radius: 8px 8px 8px 2px; overflow: hidden; background: var(--lentille-pale); }
.pj_ville_guide_photo img, .pj_ville_guide_photo .pj_photo_repli { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.pj_ville_guide small { display: block; font-size: 12.5px; font-weight: 700; color: var(--lentille-fonce); }
.pj_ville_guide strong { display: block; font-family: var(--titre); font-weight: 400; font-size: 16.5px; line-height: 1.25; }
@media (max-width: 980px) { .pj_ville_haut, .pj_ville_milieu { grid-template-columns: minmax(0, 1fr); } }
.pj_ville_photo .pj_bassin { aspect-ratio: 1000 / 380; }
.pj_ville_alentour { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 44px; padding-top: 36px; border-top: 1.5px dashed var(--filet); }
.pj_ville_alentour > .pj_ville_guides { order: 2; }
.pj_ville_alentour .pj_ville_carte_corps { margin: 0; }
.pj_ville_alentour .pj_carte_svg { max-height: 420px; margin: 0 auto; }
@media (max-width: 980px) { .pj_ville_alentour { grid-template-columns: minmax(0, 1fr); } }
.pj_ville_alentour { grid-template-columns: minmax(0, 760px); justify-content: center; }

/* Sortie n°3 : écart texte→colonne des pages ville ≤ 64 px (mesuré 66) */
@media (min-width: 981px) { .pj_ville_milieu, .pj_ville_haut { gap: 30px; } .pj_corps--ville { max-width: none; } }
/* Juge n°2 (03/11) : retouches mineures */
.home .pj_header_bulletin { display: none !important; }
.pj_rang_haut .pj_rang_item::before, .pj_rang_haut .pj_rang_item--tete::before { display: none; }
@media (max-width: 520px) {
	.pj_hero_preuves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.pj_hero_preuves li { white-space: normal; border-radius: 14px; line-height: 1.25; }
}