/*
Theme Name: Peu Plaque
Theme URI: https://pompes-eaux-usees.com
Author: pompes-eaux-usees.com
Author URI: https://pompes-eaux-usees.com
Description: Thème du site pompes-eaux-usees.com, guide des pompes pour eaux usées pour les logements du sud de Paris et des Hauts-de-Seine. Repère visuel : la plaque émaillée au nom de la rue que porte chaque galerie des égouts de Paris.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: peu-plaque
*/

/* ==========================================================================
   0. POLICES (woff2 locales) ET JETONS
   Émail grenat : la plaque d'égout parisienne est bleue ; ici elle prend la
   couleur de la brique des HBM de la ceinture sud (13e, 14e) — un grenat
   émaillé, filet blanc, capitales condensées. Fond faïence froide, jamais crème.
   ========================================================================== */
@font-face { font-family: 'Sofia Sans Condensed'; font-style: normal; font-weight: 500 900; font-display: swap; src: url(assets/fonts/sofia-cond-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Sofia Sans Condensed'; font-style: normal; font-weight: 500 900; font-display: swap; src: url(assets/fonts/sofia-cond-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Sofia Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/sofia-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Sofia Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/sofia-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
	--email: #8A1C27;          /* émail grenat : boutons, plaques, titres en premier ton */
	--email-fonce: #5A1019;    /* survol */
	--email-nuit: #3E0C13;     /* bandes sombres, pied de page */
	--rose: #F6E3E5;           /* teinte claire de l'émail : cases cochées, encadrés */
	--rose-2: #F0C9CE;         /* arrondissements de Paris sur la carte */
	--rose-texte: #F3D9DC;     /* texte courant sur émail sombre */
	--faience: #F4F6F5;        /* fond froid, carreau blanc de cave */
	--joint: #E3E8E6;          /* fond secondaire, joint de faïence */
	--trait: #D3DBD8;          /* filets et bordures */
	--blanc: #FFFFFF;
	--encre: #22272A;
	--encre-2: #4F585D;
	--jaune: #F0B43C;          /* signal : étape faite, commune active, repère */
	--titre: 'Sofia Sans Condensed', 'Arial Narrow', sans-serif;
	--texte: 'Sofia Sans', 'Segoe UI', Arial, sans-serif;
	--r-plaque: 9px;
	--r-carte: 16px;
	--r-cadre: 22px;
	--ombre: 0 22px 44px -26px rgba(62, 12, 19, .45), 0 2px 6px rgba(34, 39, 42, .06);
	--ombre-forte: 0 34px 70px -30px rgba(62, 12, 19, .6), 0 4px 12px rgba(34, 39, 42, .08);
	--entete: 68px;
	--gouttiere: clamp(16px, 4vw, 40px);
}

/* ==========================================================================
   1. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + 16px); }
body { margin: 0; background: var(--blanc); color: var(--encre); font: 400 17px/1.6 var(--texte); font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--email); text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--email-fonce); }
:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--titre); font-weight: 800; line-height: 1.04; letter-spacing: -.005em; margin: 0 0 .5em; color: var(--encre); overflow-wrap: break-word; text-wrap: balance; }
h1 { font-size: clamp(34px, 3.8vw, 56px); }
h2 { font-size: clamp(28px, 2.7vw, 42px); }
h3 { font-size: clamp(20px, 1.6vw, 24px); font-weight: 750; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
.peu-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.peu-sr:focus { position: fixed !important; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 100; background: var(--blanc); padding: 10px 14px; border-radius: 8px; }
.peu-conteneur { width: 100%; max-width: 1360px; margin: 0 auto; padding-inline: var(--gouttiere); }
.peu-conteneur--texte { max-width: 820px; }
.peu-ton-1 { color: var(--email); }
.peu-ton-2 { color: var(--encre); }
.peu-chapo { font-size: clamp(17px, 1.3vw, 19.5px); line-height: 1.55; color: var(--encre-2); max-width: 62ch; }
.peu-vide { padding: 22px 26px; background: var(--blanc); border-radius: var(--r-carte); border: 1px solid var(--trait); color: var(--encre-2); }
.peu-credit { font-size: 12.5px; line-height: 1.4; color: var(--encre-2); margin: 6px 0 0; }
.peu-centre-action { text-align: center; margin: 28px 0 0; }

/* Sections et fonds */
.peu-section { padding-block: clamp(36px, 6.6vh, 64px); position: relative; }
.peu-fond-blanc { background: var(--blanc); }
.peu-fond-faience { background: var(--faience); }
.peu-fond-joint { background: var(--joint); }
.peu-fond-email { background: var(--email-nuit); color: var(--rose-texte); }
.peu-fond-email h2, .peu-fond-email h3 { color: var(--blanc); }
.peu-fond-email a:not(.peu-btn) { color: var(--blanc); }
.peu-tete-section { margin-bottom: clamp(18px, 3vh, 30px); }
.peu-tete-section h2 { margin: 0; }
.peu-tete-section--ligne { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px 48px; align-items: end; }
.peu-tete-section--ligne p { margin: 0; color: var(--encre-2); max-width: 60ch; }
.peu-fond-email .peu-tete-section--ligne p { color: var(--rose-texte); }

/* Une seule apparition : glissement de 14 px, l'état final est visible par défaut */
.peu-glisse { transform: translateY(14px); }
@media (prefers-reduced-motion: no-preference) { main > section { transition: transform .6s cubic-bezier(.2, .7, .2, 1); } }

/* Grilles de cartes : le nombre de colonnes suit le nombre d'éléments (jamais de case vide) */
.peu-grille { display: grid; gap: clamp(14px, 1.6vw, 24px); align-items: start; }
.peu-grille--1 { grid-template-columns: minmax(0, 640px); }
.peu-grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.peu-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.peu-grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.peu-grille--liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ==========================================================================
   2. LA PLAQUE ÉMAILLÉE (motif unique, décliné partout)
   ========================================================================== */
.peu-plaque { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; max-width: 100%; padding: 9px 16px 8px; border-radius: var(--r-plaque); background: var(--email); color: var(--blanc); box-shadow: inset 0 0 0 3px var(--email), inset 0 0 0 4.5px var(--blanc), inset 0 0 0 6.5px var(--email), inset 0 0 0 7.2px rgba(255, 255, 255, .55), 0 10px 18px -10px rgba(62, 12, 19, .55); text-decoration: none; }
.peu-plaque__titre { font: 800 17px/1.1 var(--titre); text-transform: uppercase; letter-spacing: .05em; overflow-wrap: anywhere; }
.peu-plaque__sous { font: 600 13px/1.25 var(--texte); letter-spacing: .01em; color: var(--blanc); }
.peu-plaque--mini { padding: 5px 10px 4px; border-radius: 7px; box-shadow: inset 0 0 0 2px var(--email), inset 0 0 0 3.2px var(--blanc), 0 6px 12px -8px rgba(62, 12, 19, .55); }
.peu-plaque--mini .peu-plaque__titre { font-size: 12.5px; letter-spacing: .06em; }
.peu-plaque--mini .peu-plaque__sous { font-size: 12px; }

/* Photo sertie : bord d'émail grenat + filet blanc, la plaque suspendue dans le cadre */
.peu-cadre { position: relative; padding: 10px; border-radius: var(--r-cadre); background: var(--email); box-shadow: var(--ombre-forte); }
.peu-cadre::after { content: ''; position: absolute; inset: 4px; border: 1.6px solid rgba(255, 255, 255, .92); border-radius: calc(var(--r-cadre) - 4px); pointer-events: none; }
.peu-cadre__vue { position: relative; height: 100%; border-radius: calc(var(--r-cadre) - 9px); overflow: hidden; background: var(--email-fonce); }
.peu-cadre__vue > *, .peu-cadre__vue img { width: 100%; height: 100%; }
.peu-cadre__vue img { object-fit: cover; }
.peu-cadre__plaque { position: absolute; top: 24px; left: 24px; z-index: 2; max-width: calc(100% - 48px); }

/* Photos et repli (aplat d'émail, jamais une case vide ni une image cassée) */
.peu-photo { margin: 0; display: block; width: 100%; height: 100%; }
.peu-photo img { width: 100%; height: 100%; object-fit: cover; }
.peu-photo--repli { display: flex; align-items: center; justify-content: center; min-height: 100%; background-color: var(--joint); background-image: linear-gradient(rgba(255, 255, 255, .55) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(255, 255, 255, .55) 1.5px, transparent 1.5px); background-size: 46px 23px; }
.peu-photo__symbole { width: 64px; height: 64px; filter: drop-shadow(0 6px 10px rgba(62, 12, 19, .25)); }

/* Numéro de maison (étapes) : plaque carrée, chiffre en ::before (contraste mesuré) */
.peu-numero { display: inline-grid; place-items: center; width: 44px; height: 40px; border-radius: 8px; background: var(--email); box-shadow: inset 0 0 0 2.5px var(--email), inset 0 0 0 4px var(--blanc), 0 8px 14px -8px rgba(62, 12, 19, .6); }
.peu-numero::before { content: attr(data-n); font: 800 21px/1 var(--titre); color: var(--blanc); }

/* ==========================================================================
   3. BOUTONS
   ========================================================================== */
.peu-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 2px solid transparent; border-radius: 10px; font: 700 16px/1.15 var(--texte); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s; }
.peu-btn--action { background: var(--email); color: var(--blanc); box-shadow: 0 10px 20px -12px rgba(62, 12, 19, .8); }
.peu-btn--action:hover { background: var(--email-fonce); color: var(--blanc); transform: translateY(-1px); }
.peu-btn--ligne { background: transparent; color: var(--email); border-color: var(--email); }
.peu-btn--ligne:hover { background: var(--email); color: var(--blanc); }
.peu-btn--clair { background: var(--blanc); color: var(--email); }
.peu-btn--clair:hover { background: var(--jaune); color: var(--email-nuit); }
.peu-btn--retour { background: var(--blanc); color: var(--encre); border-color: var(--trait); }
.peu-btn--retour:hover { border-color: var(--encre-2); color: var(--encre); }
.peu-btn--petit { padding: 9px 15px; font-size: 15px; }

/* ==========================================================================
   4. EN-TÊTE ET NAVIGATION
   ========================================================================== */
.peu-entete { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--joint); box-shadow: 0 6px 18px -16px rgba(34, 39, 42, .5); }
.peu-entete__ligne { display: flex; align-items: center; gap: 20px; height: var(--entete); }
.peu-logo { display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: var(--encre); }
.peu-logo__symbole { width: 42px; height: 42px; flex: none; }
.peu-logo__nom { font: 800 23px/1 var(--titre); letter-spacing: .005em; white-space: nowrap; overflow: hidden; color: var(--encre); }
.peu-logo__ext { color: var(--email); }
.peu-logo--clair .peu-logo__nom { color: var(--blanc); }
.peu-logo--clair .peu-logo__ext { color: var(--jaune); }
.peu-nav { margin-left: auto; }
.peu-nav ul { display: flex; list-style: none; gap: 2px; }
.peu-nav a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--encre); font-weight: 650; font-size: 15.5px; text-decoration: none; white-space: nowrap; }
.peu-nav a:hover { background: var(--rose); color: var(--email); }
.peu-entete__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.peu-entete__court { display: none; }
.peu-burger { display: none; width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--trait); cursor: pointer; position: relative; flex: none; }
.peu-burger span, .peu-burger span::before, .peu-burger span::after { position: absolute; left: 11px; width: 18px; height: 2.5px; border-radius: 2px; background: var(--encre); content: ''; }
.peu-burger span { top: 19px; }
.peu-burger span::before { top: -6px; left: 0; }
.peu-burger span::after { top: 6px; left: 0; }
.peu-nav-mobile { display: none; border-top: 1px solid var(--joint); background: var(--blanc); }
.peu-nav-mobile ul { list-style: none; padding: 10px var(--gouttiere) 18px; display: grid; gap: 4px; }
.peu-nav-mobile a:not(.peu-btn) { display: block; padding: 12px 6px; color: var(--encre); font-weight: 650; text-decoration: none; border-bottom: 1px solid var(--joint); }
.peu-nav-mobile .peu-btn { margin-top: 10px; width: 100%; }
#peu-menu-mobile:checked + .peu-nav-mobile { display: block; }

/* Fil d'Ariane */
.peu-fil { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; font-size: 14px; color: var(--encre-2); margin: 0 0 14px; }
.peu-fil li { min-width: 0; overflow-wrap: anywhere; }
.peu-fil li + li::before { content: '/'; margin: 0 8px; color: var(--trait); }
.peu-fil a { color: var(--encre-2); text-decoration: none; }
.peu-fil a:hover { color: var(--email); text-decoration: underline; }
.peu-fil [aria-current] { color: var(--encre); font-weight: 600; }

/* ==========================================================================
   5. ACCUEIL — HERO : titre pleine largeur, photo sertie avec sa plaque de
   galerie, formulaire en carte qui flotte à cheval sur le bord de la photo
   ========================================================================== */
.peu-hero { background: linear-gradient(180deg, var(--faience) 0%, var(--faience) 62%, var(--blanc) 62%); padding: 20px 0 24px; }
.peu-hero__grille { display: grid; gap: 16px; }
.peu-hero__tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 16px 48px; align-items: end; }
.peu-hero__titre { margin: 0; font-size: clamp(34px, 4.1vw, 64px); line-height: .98; letter-spacing: -.012em; }
.peu-hero__titre .peu-ton-1 { display: block; }
.peu-hero__aside .peu-chapo { margin: 0; font-size: 16.5px; line-height: 1.5; }
.peu-hero__mobile { display: none; }
.peu-hero__scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: start; height: clamp(430px, calc(100vh - var(--entete) - 260px), 470px); min-height: 430px; }
.peu-hero__visuel { position: relative; grid-column: 1; grid-row: 1; height: 100%; margin-right: -72px; }
.peu-cadre--hero { height: 100%; }
.peu-preuves { list-style: none; position: absolute; left: 28px; bottom: 28px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: calc(100% - 160px); }
.peu-preuves li { background: rgba(255, 255, 255, .96); color: var(--encre); padding: 6px 13px; border-radius: 9px; font-size: 14.5px; font-weight: 600; box-shadow: 0 10px 20px -12px rgba(34, 39, 42, .6); }
.peu-preuves strong { font: 800 19px/1 var(--texte); color: var(--email); margin-right: 4px; font-variant-numeric: tabular-nums; }
.peu-hero__form { grid-column: 2; grid-row: 1; position: relative; z-index: 3; align-self: start; }

/* ==========================================================================
   6. FORMULAIRE EN ÉTAPES — carte blanche qui flotte ; en-tête = plaque
   émaillée avec la rangée des « numéros de maison » (une plaque par étape)
   ========================================================================== */
.peu-form-bloc { background: var(--blanc); border-radius: 18px; border: 1px solid var(--joint); box-shadow: var(--ombre-forte); overflow: hidden; }
.peu-form { margin: 0; }
html:not(.js) .peu-form--js { display: none; }
.peu-form__piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.peu-form__tete { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 13px 18px 12px; background: var(--email); color: var(--blanc); }
.peu-form__tete::after { content: ''; position: absolute; inset: 4px 4px 0; border: 1.5px solid rgba(255, 255, 255, .9); border-bottom: 0; border-radius: 14px 14px 0 0; pointer-events: none; }
.peu-form__titre { grid-column: 1; margin: 0; font: 800 16px/1.15 var(--titre); text-transform: uppercase; letter-spacing: .05em; color: var(--blanc); }
.peu-form__etape-num { grid-column: 1; margin: 0; font-size: 13px; font-weight: 600; color: var(--blanc); }
.peu-form__plaques { grid-column: 2; grid-row: 1 / span 2; list-style: none; display: flex; gap: 4px; }
.peu-form__plaques li { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; border: 1.5px solid rgba(255, 255, 255, .9); transition: background-color .2s, border-color .2s; }
.peu-form__plaques li::before { content: attr(data-n); font: 800 13.5px/1 var(--titre); color: var(--blanc); }
.peu-form__plaques li.est-active { background: var(--blanc); border-color: var(--blanc); }
.peu-form__plaques li.est-active::before { color: var(--email); }
.peu-form__plaques li.est-faite { background: var(--jaune); border-color: var(--jaune); }
.peu-form__plaques li.est-faite::before { color: var(--email-nuit); }
.peu-etape { display: none; border: 0; margin: 0; padding: 14px 18px 16px; min-width: 0; }
.peu-etape.est-active { display: block; }
.peu-etape legend { padding: 0; margin-bottom: 10px; font: 750 21px/1.15 var(--titre); color: var(--encre); }
.peu-form__sous-legende { margin: 10px 0 8px; font-weight: 700; font-size: 14.5px; color: var(--encre-2); }
.peu-tuiles { display: grid; grid-template-columns: 1fr; gap: 7px; }
.peu-tuiles--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.peu-tuiles--deux .peu-tuile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.peu-tuiles--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.peu-tuiles--communes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.peu-tuiles--communes .peu-tuile--autre { grid-column: span 2; }
.peu-tuile { position: relative; min-width: 0; }
.peu-tuile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.peu-tuile label { display: flex; align-items: center; gap: 9px; height: 100%; min-height: 44px; padding: 8px 10px; border: 1.5px solid var(--trait); border-radius: 10px; background: var(--blanc); font-size: 14.5px; font-weight: 600; line-height: 1.25; cursor: pointer; transition: border-color .15s, background-color .15s; }
.peu-tuiles--communes .peu-tuile label { min-height: 32px; padding: 5px 8px; font-size: 13.5px; gap: 7px; }
.peu-tuile label:hover { border-color: var(--email); }
.peu-tuile__coche { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--trait); background: var(--blanc); transition: border-color .15s, box-shadow .15s; }
.peu-tuile input:checked + label { border-color: var(--email); background: var(--rose); }
.peu-tuile input:checked + label .peu-tuile__coche { border-color: var(--email); box-shadow: inset 0 0 0 3px var(--blanc), inset 0 0 0 8px var(--email); }
.peu-tuile input:focus-visible + label { outline: 3px solid var(--jaune); outline-offset: 2px; }
.peu-form__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.peu-form__actions .peu-btn--action { margin-left: auto; }
.peu-form__duree { font-size: 13.5px; color: var(--encre-2); font-weight: 600; }
.peu-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.peu-champ { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.peu-champ label { font-size: 13.5px; font-weight: 700; color: var(--encre-2); }
.peu-champ input, .peu-champ select, .peu-champ textarea, .peu-recherche input { width: 100%; min-height: 42px; padding: 8px 11px; border: 1.5px solid var(--trait); border-radius: 9px; background: var(--blanc); font-size: 15.5px; }
.peu-champ textarea { min-height: 96px; resize: vertical; }
.peu-champ input:focus, .peu-champ textarea:focus, .peu-champ select:focus, .peu-recherche input:focus { outline: none; border-color: var(--email); box-shadow: 0 0 0 3px var(--rose); }
.peu-case, .peu-champ-rgpd { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: 13.5px; line-height: 1.35; color: var(--encre-2); cursor: pointer; }
.peu-case input, .peu-champ-rgpd input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--email); flex: none; }
.peu-case { font-weight: 700; color: var(--encre); }
.peu-form__erreur { margin: 0 18px 14px; padding: 9px 12px; border-radius: 9px; background: var(--rose); color: var(--email); font-weight: 700; font-size: 14px; }
.peu-form__merci { padding: 26px 22px; text-align: center; background: var(--rose); }
.peu-form__merci-symbole { width: 54px; height: 54px; margin: 0 auto 8px; display: block; }
.peu-form__merci-titre { font: 800 24px/1.1 var(--titre); color: var(--email); margin-bottom: 6px; }
.peu-form--noscript { padding: 18px; display: grid; gap: 10px; }
/* Version compacte (colonne d'article, page ville, rubrique, équipe) */
.peu-form-bloc--compact .peu-form__tete { padding: 11px 14px 10px; }
.peu-form-bloc--compact .peu-form__plaques li { width: 20px; height: 21px; border-radius: 5px; }
.peu-form-bloc--compact .peu-form__plaques li::before { font-size: 12px; }
.peu-form-bloc--compact .peu-form__plaques { gap: 3px; }
.peu-form-bloc--compact .peu-etape { padding: 12px 14px 14px; }
.peu-form-bloc--compact .peu-etape legend { font-size: 19px; }
.peu-form-bloc--compact .peu-tuile label { min-height: 40px; font-size: 14px; padding: 7px 9px; }
.peu-form-bloc--compact .peu-tuiles--communes { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 214px; overflow-y: auto; padding-right: 4px; overscroll-behavior: contain; }
.peu-form-bloc--compact .peu-tuiles--communes .peu-tuile label { min-height: 32px; font-size: 13.5px; }
.peu-form-bloc--compact .peu-tuiles--communes .peu-tuile--autre { grid-column: 1 / -1; }
.peu-form-bloc--compact .peu-champs { grid-template-columns: 1fr 1fr; }
.peu-form-bloc--compact .peu-btn { padding: 10px 14px; font-size: 15px; }
.peu-form-bloc--compact .peu-form__duree { font-size: 12.5px; }

/* ==========================================================================
   7. ACCUEIL — SECTIONS
   ========================================================================== */
/* Ce qu'on relève : six cas, une rangée de six plaques */
.peu-cas { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.peu-cas__item { min-width: 0; }
.peu-cas__lien { display: flex; flex-direction: column; height: 100%; padding: 8px 8px 16px; border-radius: var(--r-carte); background: var(--faience); color: var(--encre); text-decoration: none; transition: transform .2s, box-shadow .2s, background-color .2s; }
a.peu-cas__lien:hover { background: var(--blanc); box-shadow: var(--ombre); transform: translateY(-3px); color: var(--encre); }
.peu-cas__media { display: block; height: 150px; border-radius: 11px; overflow: hidden; }
.peu-cas__media img { transition: transform .5s; }
a.peu-cas__lien:hover .peu-cas__media img { transform: scale(1.05); }
.peu-cas__plaque { align-self: flex-start; margin: -14px 0 0 10px; position: relative; z-index: 1; }
.peu-cas__nom { display: block; margin: 10px 8px 4px; font: 800 19px/1.1 var(--titre); }
.peu-cas__desc { display: block; margin: 0 8px; font-size: 14px; line-height: 1.45; color: var(--encre-2); }

/* Carte des communes, sur émail sombre */
.peu-carte-section { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 28px 56px; align-items: center; }
.peu-carte-section__texte h2 { margin-bottom: 12px; }
.peu-carte-section__texte p { color: var(--rose-texte); font-size: 16px; margin-bottom: 16px; }
.peu-cadre--egout { height: 150px; padding: 7px; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .7); background: var(--email); }
.peu-cadre--egout::after { inset: 3px; }
.peu-carte-section__chiffres { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 18px 0; }
.peu-carte-section__chiffres li { font-size: 14.5px; color: var(--rose-texte); }
.peu-carte-section__chiffres strong { display: block; font: 800 28px/1.05 var(--texte); color: var(--jaune); font-variant-numeric: tabular-nums; }
.peu-zone { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 28px; align-items: center; }
.peu-zone__carte { min-width: 0; }
.peu_carte { display: block; width: 100%; height: auto; max-height: 470px; }
.peu_commune_forme { stroke: var(--email-nuit); stroke-width: 1.4; stroke-linejoin: round; transition: fill .18s; }
.peu_commune_forme--75 { fill: var(--rose-2); }
.peu_commune_forme--92 { fill: #F7F3F0; }
.peu_commune_forme.est-active, .peu_commune_forme.est-survolee, a:hover > .peu_commune_forme, a:focus-visible > .peu_commune_forme { fill: var(--jaune); }
.peu_commune_trait { stroke: var(--email-nuit); stroke-width: 1; fill: none; }
.peu_pin circle { fill: var(--blanc); stroke: var(--email-nuit); stroke-width: 1.5; }
.peu_pin text { fill: var(--email-nuit); font-family: var(--texte); font-weight: 800; text-anchor: middle; }
.peu_pin--repere circle, .peu_pin.est-active circle, .peu_pin.est-survolee circle { fill: var(--jaune); }
.peu_commune_label { fill: var(--email-nuit); font-family: var(--titre); font-weight: 800; text-anchor: middle; }
.peu-zone__cle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; font-size: 13.5px; font-weight: 600; color: var(--rose-texte); }
.peu-zone__pastille { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--blanc); display: inline-block; }
.peu-zone__pastille--75 { background: var(--rose-2); }
.peu-zone__pastille--92 { background: #F7F3F0; }
.peu-zone__pastille--repere { background: var(--jaune); border-radius: 50%; }
.peu-legende { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(10, auto); gap: 2px 14px; }
.peu-legende__item a, .peu-legende__item > span { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 6px; font-size: 14.5px; color: var(--blanc); text-decoration: none; line-height: 1.25; }
.peu-legende__item b { flex: none; display: grid; place-items: center; width: 24px; height: 22px; border-radius: 5px; font-size: 12.5px; font-weight: 800; color: var(--email-nuit); background: #F7F3F0; }
.peu-legende__item--75 b { background: var(--rose-2); }
.peu-legende__item a:hover, .peu-legende__item.est-survolee a, .peu-legende__item.est-active > * { background: rgba(255, 255, 255, .12); }
.peu-fond-blanc .peu-legende__item a, .peu-fond-blanc .peu-legende__item > span, .peu-fond-faience .peu-legende__item a { color: var(--encre); }

/* Par où commencer : la plaque de la rubrique à cheval sur la photo */
.peu-entree { display: flex; flex-direction: column; height: 100%; background: var(--blanc); border-radius: var(--r-carte); box-shadow: var(--ombre); overflow: hidden; }
.peu-entree__media { display: block; height: 170px; }
.peu-entree__plaque { align-self: flex-start; margin: -22px 0 0 16px; position: relative; z-index: 1; }
.peu-entree__corps { display: flex; flex-direction: column; flex: 1; padding: 12px 18px 18px; }
.peu-entree__liste { list-style: none; display: grid; gap: 8px; margin-bottom: 14px; }
.peu-entree__liste a { display: block; padding-left: 14px; position: relative; color: var(--encre); font-weight: 600; font-size: 15px; line-height: 1.35; text-decoration: none; }
.peu-entree__liste a::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 2px; background: var(--email); }
.peu-entree__liste a:hover { color: var(--email); text-decoration: underline; }
.peu-entree__extrait { font-size: 15px; color: var(--encre-2); margin-bottom: 14px; }
.peu-entree__tout { margin-top: auto; font-weight: 700; font-size: 15px; }

/* Méthode : 4 étapes, numéros de maison posés sur la photo */
.peu-methode { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.peu-methode__etape { position: relative; background: var(--blanc); border-radius: var(--r-carte); padding: 8px 8px 16px; box-shadow: var(--ombre); }
.peu-methode__media { display: block; height: 170px; border-radius: 11px; overflow: hidden; }
.peu-methode__etape .peu-numero { position: absolute; top: 18px; left: 18px; }
.peu-methode__etape h3 { margin: 14px 10px 4px; font-size: 21px; }
.peu-methode__etape p { margin: 0 10px; font-size: 15px; color: var(--encre-2); }

/* Cartes d'article */
.peu-carte { display: flex; flex-direction: column; background: var(--blanc); border-radius: var(--r-carte); box-shadow: var(--ombre); overflow: hidden; color: var(--encre); text-decoration: none; transition: transform .2s, box-shadow .2s; }
a.peu-carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); color: var(--encre); }
.peu-carte__media { position: relative; display: block; height: 190px; overflow: hidden; }
.peu-carte__media > img, .peu-carte__media > .peu-photo--repli { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
a.peu-carte:hover .peu-carte__media > img { transform: scale(1.04); }
.peu-carte__plaque { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); }
.peu-carte__corps { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 18px; }
.peu-carte__titre { font: 800 20px/1.15 var(--titre); }
.peu-carte__extrait { font-size: 15px; color: var(--encre-2); line-height: 1.5; }
.peu-carte__duree { font-size: 13.5px; font-weight: 700; color: var(--email); }

/* FAQ */
.peu-faq-section { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px 64px; align-items: start; }
.peu-faq-section__tete p { color: var(--encre-2); }
.peu-faq { display: grid; gap: 8px; }
.peu-faq__item, .sb-faq { background: var(--blanc); border-radius: 12px; border: 1px solid var(--joint); }
.peu-faq__item summary, .sb-faq > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; cursor: pointer; list-style: none; font-weight: 700; font-size: 17px; line-height: 1.35; }
.peu-faq__item summary::-webkit-details-marker, .sb-faq > summary::-webkit-details-marker, .peu-accordeon summary::-webkit-details-marker { display: none; }
.peu-faq__plus, .sb-faq > summary::after { flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--rose); position: relative; transition: transform .2s, background-color .2s; }
.sb-faq > summary::after { content: ''; background: var(--rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13 7v12M7 13h12' stroke='%238A1C27' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/26px no-repeat; }
.peu-faq__plus::before, .peu-faq__plus::after { content: ''; position: absolute; left: 7px; top: 12px; width: 12px; height: 2.4px; border-radius: 2px; background: var(--email); }
.peu-faq__plus::after { transform: rotate(90deg); }
details[open] > summary .peu-faq__plus, .sb-faq[open] > summary::after { transform: rotate(45deg); }
.peu-faq__reponse, .sb-faq > :not(summary) { padding: 0 18px 4px; color: var(--encre-2); font-size: 16px; }
.sb-faq > :not(summary):last-child { padding-bottom: 14px; }

/* Dernière section : avant l'appel */
.peu-final__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: center; }
.peu-cadre--final { height: clamp(300px, calc(100vh - 380px), 420px); }
.peu-final__texte p { color: var(--encre-2); }
.peu-reperes-liste { list-style: none; counter-reset: rep; display: grid; gap: 12px; margin: 0 0 22px; }
.peu-reperes-liste li { counter-increment: rep; position: relative; padding: 2px 0 0 50px; min-height: 36px; font-size: 16px; line-height: 1.45; }
.peu-reperes-liste li::before { content: counter(rep); position: absolute; left: 0; top: 0; width: 36px; height: 34px; display: grid; place-items: center; border-radius: 7px; background: var(--email); color: var(--blanc); font: 800 18px/1 var(--titre); box-shadow: inset 0 0 0 2px var(--email), inset 0 0 0 3.2px var(--blanc); }

/* ==========================================================================
   8. ARTICLE — en-tête : titre à gauche, photo SERTIE alignée sur le titre,
   plaque de rubrique suspendue, signature sous le titre
   ========================================================================== */
.peu-article-tete { margin-top: 8px; background: var(--faience); padding: 18px 0 36px; }
.peu-article-tete__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); grid-template-areas: "fil fil" "texte visuel"; gap: 0 56px; align-items: start; }
.peu-article-tete__fil { grid-area: fil; }
.peu-article-tete__texte { grid-area: texte; min-width: 0; }
.peu-article-tete__titre { font-size: clamp(32px, 3.4vw, 52px); margin-bottom: 14px; }
.peu-article-tete__texte .peu-chapo { margin-bottom: 18px; }
.peu-article-tete__visuel { grid-area: visuel; min-width: 0; }
.peu-cadre--article { aspect-ratio: 3 / 2; max-height: 340px; width: 100%; }
.peu-signature { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--trait); }
.peu-signature__portrait { flex: none; width: 56px; height: 64px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 2px var(--blanc), 0 0 0 3.5px var(--email); }
.peu-signature__portrait img, .peu-signature__portrait .peu-portrait__img { width: 100% !important; height: 100% !important; object-fit: cover; }
.peu-signature__texte { display: flex; flex-direction: column; font-size: 14px; line-height: 1.35; color: var(--encre-2); }
.peu-signature__texte a { font-weight: 800; font-size: 16px; color: var(--encre); text-decoration: none; }
.peu-signature__texte a:hover { color: var(--email); text-decoration: underline; }

/* Corps + colonne collante (formulaire + lecture restante + sommaire) */
.peu-article-grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; padding-block: 36px 64px; align-items: start; }
.peu-article-colonne { min-width: 0; }
.peu-sommaire-haut { display: none; }
.peu-corps { font-size: 17.5px; line-height: 1.7; }
.peu-article .peu-corps { background: var(--blanc); border: 1px solid var(--joint); border-radius: 20px; padding: clamp(22px, 3.4vw, 46px); box-shadow: 0 18px 40px -34px rgba(34, 39, 42, .5); }
.peu-corps > :first-child { margin-top: 0; }
.peu-corps h2 { font-size: clamp(26px, 2.2vw, 34px); margin: 1.6em 0 .55em; padding-top: 14px; border-top: 3px solid var(--email); max-width: max-content; }
.peu-corps h3 { font-size: 22px; margin: 1.4em 0 .4em; font-family: var(--titre); }
.peu-corps h2, .peu-corps h3, .peu-corps p, .peu-corps li, .peu-corps figcaption, .peu-corps strong, .peu-corps em, .peu-corps a { font-family: inherit; }
.peu-corps h2, .peu-corps h3 { font-family: var(--titre); }
.peu-corps ul, .peu-corps ol:not([class]) { padding-left: 1.3em; margin: 0 0 1.1em; }
.peu-corps li { margin-bottom: .4em; }
.peu-corps ul li::marker { color: var(--email); }
.peu-corps img { border-radius: 14px; height: auto; }
.peu-corps figure { margin: 1.6em 0; }
.peu-corps figcaption { font-size: 13.5px; color: var(--encre-2); margin-top: 6px; }
.peu-corps .wp-post-image { width: 100%; }
.peu-photo-corps img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.peu-corps blockquote { margin: 1.4em 0; padding: 14px 20px; border-left: 4px solid var(--email); background: var(--faience); border-radius: 0 12px 12px 0; }
.peu-corps table { width: 100%; border-collapse: collapse; font-size: 15.5px; display: block; overflow-x: auto; }
.peu-corps th, .peu-corps td { padding: 8px 10px; border-bottom: 1px solid var(--joint); text-align: left; }
.peu-article-auteur { margin-top: 28px; }
.peu-article-auteur__titre { font: 800 15px/1 var(--titre); text-transform: uppercase; letter-spacing: .06em; color: var(--email); margin-bottom: 10px; }

.peu-rail { min-width: 0; align-self: stretch; }
.peu-rail__collant { position: sticky; top: calc(var(--entete) + 14px); display: flex; flex-direction: column; gap: 12px; }
.peu-rail__form { order: -1; }
.peu-lecture-progress { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; background: var(--faience); border-radius: 12px; }
.peu-lecture-progress__texte { font-size: 13.5px; font-weight: 700; color: var(--encre-2); }
.peu-lecture-progress__piste { display: block; height: 6px; border-radius: 4px; background: var(--joint); overflow: hidden; }
.peu-lecture-progress__barre { display: block; width: 0; height: 100%; border-radius: 4px; background: var(--email); }
.peu-sommaire { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--joint); background: var(--blanc); }
.peu-sommaire__titre { margin: 0 0 6px; font: 800 14px/1 var(--titre); text-transform: uppercase; letter-spacing: .06em; color: var(--email); }
.peu-sommaire ol { list-style: none; counter-reset: som; max-height: max(110px, calc(100vh - 640px)); overflow-y: auto; display: grid; gap: 1px; }
.peu-sommaire li { counter-increment: som; }
.peu-sommaire a { display: flex; gap: 8px; padding: 4px 6px; border-radius: 6px; font-size: 14px; line-height: 1.3; color: var(--encre-2); text-decoration: none; }
.peu-sommaire a::before { content: counter(som); flex: none; font-weight: 800; color: var(--email); min-width: 1.1em; }
.peu-sommaire a:hover, .peu-sommaire li.est-actif a { background: var(--rose); color: var(--encre); }

/* Blocs de contenu des rédacteurs (chaque classe a son style) */
p.peu-chapo { font-size: 19px; line-height: 1.55; color: var(--encre); font-weight: 500; }
.peu-corps p.peu-chapo { padding-left: 16px; border-left: 4px solid var(--email); max-width: none; }
ol.peu-etapes { list-style: none; counter-reset: et; display: grid; gap: 10px; padding: 0; margin: 1.4em 0; }
ol.peu-etapes > li { counter-increment: et; position: relative; padding: 14px 16px 14px 64px; background: var(--faience); border-radius: 12px; margin: 0; }
ol.peu-etapes > li::before { content: counter(et); position: absolute; left: 14px; top: 12px; width: 36px; height: 34px; display: grid; place-items: center; border-radius: 7px; background: var(--email); color: var(--blanc); font: 800 18px/1 var(--titre); box-shadow: inset 0 0 0 2px var(--email), inset 0 0 0 3.2px var(--blanc); }
.peu-reperes, .peu-encadre-reperes { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.4em 0; }
.peu-repere { flex: 1 1 180px; margin: 0; padding: 14px 16px; background: var(--blanc); border: 1px solid var(--joint); border-top: 4px solid var(--email); border-radius: 12px; font-size: 15px; line-height: 1.45; color: var(--encre-2); }
.peu-repere strong { display: block; font: 800 25px/1.1 var(--texte); color: var(--email); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.peu-encadre { position: relative; margin: 1.5em 0; padding: 18px 20px 16px 62px; border-radius: 14px; font-size: 16.5px; }
.peu-encadre > :last-child { margin-bottom: 0; }
.peu-encadre__titre { font: 800 20px/1.15 var(--titre); margin-bottom: 6px; }
.peu-bloc-picto { position: absolute; left: 18px; top: 18px; width: 28px; height: 28px; }
.peu-encadre--retenir { background: var(--blanc); box-shadow: inset 0 0 0 2px var(--email), inset 0 0 0 5px var(--blanc), inset 0 0 0 6px rgba(138, 28, 39, .45); }
.peu-encadre--retenir .peu-encadre__titre, .peu-encadre--retenir .peu-bloc-picto { color: var(--email); }
.peu-encadre--alerte { background: #FDF3DC; border-left: 5px solid var(--jaune); }
.peu-encadre--alerte .peu-bloc-picto { color: #9A5B00; }
.peu-encadre--savoir { background: var(--joint); }
.peu-encadre--savoir .peu-bloc-picto { color: var(--encre-2); }
.peu-encadre:not(.peu-encadre--retenir):not(.peu-encadre--alerte):not(.peu-encadre--savoir) { background: var(--faience); padding-left: 20px; }
.peu-duel { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 1.5em 0; }
.peu-duel > .peu-bloc-picto { left: 50%; top: 50%; width: 36px; height: 36px; padding: 6px; margin: -18px 0 0 -18px; border-radius: 50%; background: var(--email); color: var(--blanc); z-index: 1; }
.peu-duel__col { padding: 16px 18px; background: var(--faience); border-radius: 12px; font-size: 16px; }
.peu-duel__col:first-of-type { background: var(--rose); }
.peu-duel__col > :last-child { margin-bottom: 0; }
.peu-duel__titre { font: 800 20px/1.15 var(--titre); color: var(--email); margin-bottom: 6px; }
.peu-meme-sujet { margin: 1.5em 0; padding: 14px 18px; border-radius: 12px; background: var(--faience); border-left: 4px solid var(--email); font-size: 16px; }
.peu-meme-sujet > :last-child { margin-bottom: 0; }
.sb-faq { margin: 8px 0; }
.sb-sources { margin: 2em 0 0; padding: 16px 20px; background: var(--faience); border-radius: 12px; border-top: 3px solid var(--email); font-size: 14.5px; line-height: 1.55; color: var(--encre-2); }
.peu-corps .sb-sources h2 { font-size: 20px; margin: 0 0 8px; padding: 0; border: 0; }
.sb-sources a { overflow-wrap: anywhere; }
.peu-encadre-cta { margin: 1.5em 0; padding: 20px 22px; border-radius: 14px; background: var(--email); color: var(--blanc); box-shadow: inset 0 0 0 4px var(--email), inset 0 0 0 5.5px rgba(255, 255, 255, .9); }
.peu-encadre-cta > * { color: var(--blanc); }
.peu-encadre-cta a:not(.peu-btn) { color: var(--blanc); }
.peu-encadre-cta .peu-btn--action { background: var(--blanc); color: var(--email); margin-top: 6px; }
.peu-encadre-cta .peu-btn--action:hover { background: var(--jaune); color: var(--email-nuit); }
/* Infographies du socle, aux couleurs de la peau */
.sbs_lieu, .sbs_tarifs, .sbs_frise, .sbs_jauges { display: block; margin: 1.5em 0; padding: 18px 20px; border-radius: 14px; background: var(--faience); border-top: 3px solid var(--email); }
.sbs_lieu_nom, .sbs_tarifs_titre, .sbs_frise_titre, .sbs_jauges_titre { display: block; font: 800 21px/1.1 var(--titre); color: var(--encre); margin-bottom: 12px; }
.sbs_lieu_adresse, .sbs_lieu_acces { display: block; font-size: 15px; font-style: normal; color: var(--encre-2); margin-bottom: 4px; }
.sbs_lieu_carte { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 700; }
.sbs_icone_repere path { fill: var(--email); }
.sbs_tarif { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; margin-bottom: 12px; }
.sbs_tarif_libelle { font-weight: 700; font-size: 15px; }
.sbs_tarif_barre { grid-column: 1 / -1; width: 100%; height: 12px; accent-color: var(--email); }
.sbs_tarif_barre::-webkit-meter-bar { background: var(--joint); border-radius: 6px; border: 0; }
.sbs_tarif_barre::-webkit-meter-optimum-value { background: var(--email); border-radius: 6px; }
.sbs_tarifs_notes, .sbs_source { display: block; font-size: 12.5px; color: var(--encre-2); margin-top: 10px; }
.sbs_frise { display: grid; gap: 12px; }
.sbs_etape { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 14px; padding-left: 14px; border-left: 3px solid var(--email); }
.sbs_etape_date { font-weight: 800; color: var(--email); }
.sbs_etape_titre { font-weight: 700; }
.sbs_etape_desc { grid-column: 2; color: var(--encre-2); font-size: 15px; }
.sbs_jauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; background: var(--email-nuit); border-top: 0; }
.sbs_jauges_titre { grid-column: 1 / -1; color: var(--blanc); margin: 0; }
.sbs_jauge { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 11px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); }
.sbs_jauge_valeur { order: 1; font: 800 30px/1 var(--texte); color: var(--jaune); font-variant-numeric: tabular-nums; }
.sbs_jauge_unite { order: 2; font-size: 14px; font-weight: 700; color: var(--blanc); }
.sbs_jauge_libelle { order: 3; font-size: 14px; line-height: 1.4; color: var(--rose-texte); }
.sbs_jauges .sbs_source { grid-column: 1 / -1; color: var(--rose-texte); }

/* Fiche auteur (fin d'article, page auteur, qui sommes-nous) : portrait rectangulaire, jamais rond */
.peu-auteur { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: start; padding: 18px; background: var(--blanc); border-radius: var(--r-carte); border: 1px solid var(--joint); }
.peu-auteur__portrait { display: block; width: 112px; height: 132px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 2px var(--blanc), 0 0 0 4px var(--email); }
.peu-auteur__portrait img, .peu-auteur__portrait .peu-portrait__img { width: 100% !important; height: 100% !important; object-fit: cover; }
.peu-auteur__nom { margin: 0 0 2px; font: 800 22px/1.1 var(--titre); }
.peu-auteur__nom a { color: var(--encre); text-decoration: none; }
.peu-auteur__nom a:hover { color: var(--email); }
.peu-auteur__role { display: block; font-size: 13.5px; font-weight: 700; color: var(--email); margin-bottom: 6px; }
.peu-auteur__bio { margin: 0; font-size: 15px; color: var(--encre-2); line-height: 1.5; }
.peu-portrait__img.peu-photo--repli { display: flex; }

/* À lire aussi */
.peu-a-lire .peu-carte__media { height: 200px; }

/* ==========================================================================
   9. RUBRIQUE — grande plaque émaillée, une horizontale, répertoire
   ========================================================================== */
.peu-rubrique-tete { background: var(--faience); padding: 18px 0 22px; }
.peu-panneau { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); gap: 0 12px; padding: 14px; border-radius: var(--r-cadre); background: var(--email); box-shadow: var(--ombre-forte); }
.peu-panneau::before { content: ''; position: absolute; inset: 6px; border: 2px solid rgba(255, 255, 255, .95); border-radius: 17px; pointer-events: none; }
.peu-panneau::after { content: ''; position: absolute; inset: 10px 10px 10px 10px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 13px; pointer-events: none; }
.peu-panneau__texte { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: 18px 22px 18px 26px; min-width: 0; }
.peu-panneau__titre { margin: 0 0 6px; color: var(--blanc); font-size: clamp(34px, 4.2vw, 62px); text-transform: uppercase; letter-spacing: .035em; line-height: .98; }
.peu-panneau__sous { margin: 0 0 10px; font-weight: 700; font-size: 15.5px; color: var(--blanc); }
.peu-panneau__chapo, .peu-panneau__chapo p { margin: 0; color: var(--rose-texte); font-size: 16.5px; line-height: 1.5; max-width: 56ch; }
.peu-panneau__photo { position: relative; z-index: 2; height: clamp(200px, calc(100vh - 520px), 270px); border-radius: 12px; overflow: hidden; }
.peu-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.peu-onglet { display: inline-flex; align-items: center; padding: 7px 14px 6px; border-radius: var(--r-plaque); border: 2px solid var(--email); color: var(--email); background: var(--blanc); font: 800 16px/1.15 var(--titre); text-transform: uppercase; letter-spacing: .04em; text-decoration: none; max-width: 100%; }
.peu-onglet:hover { background: var(--rose); color: var(--email-fonce); }
.peu-onglet.est-actif { background: var(--email); color: var(--blanc); box-shadow: inset 0 0 0 2px var(--email), inset 0 0 0 3.2px var(--blanc); }
.peu-rubrique-liste { padding-top: 28px; }
.peu-une { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); height: clamp(280px, calc(100vh - 420px), 360px); background: var(--blanc); border-radius: 20px; overflow: hidden; box-shadow: var(--ombre); color: var(--encre); text-decoration: none; transition: box-shadow .2s, transform .2s; }
.peu-une:hover { box-shadow: var(--ombre-forte); transform: translateY(-2px); color: var(--encre); }
.peu-une__media { display: block; height: 100%; min-height: 0; overflow: hidden; }
.peu-une__media > img, .peu-une__media > .peu-photo--repli { width: 100%; height: 100%; object-fit: cover; }
.peu-une__corps { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: 22px 32px; min-width: 0; }
.peu-une__titre { font: 800 clamp(24px, 2.2vw, 34px)/1.08 var(--titre); }
.peu-une__extrait { font-size: 15.5px; color: var(--encre-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.peu-repertoire { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin-top: 24px; align-items: start; }
.peu-repertoire--seul { grid-template-columns: minmax(0, 1fr); }
.peu-repertoire__lien { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px; background: var(--blanc); border-radius: 14px; border: 1px solid var(--joint); color: var(--encre); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.peu-repertoire__lien:hover { border-color: var(--email); box-shadow: var(--ombre); color: var(--encre); }
.peu-repertoire__media { display: block; height: 100px; border-radius: 10px; overflow: hidden; }
.peu-repertoire__media > img, .peu-repertoire__media > .peu-photo--repli { width: 100%; height: 100%; object-fit: cover; }
.peu-repertoire__media .peu-photo__symbole { width: 40px; height: 40px; }
.peu-repertoire__texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.peu-repertoire__titre { font: 800 19px/1.15 var(--titre); }
.peu-repertoire__extrait { font-size: 14.5px; color: var(--encre-2); line-height: 1.45; }
.peu-repertoire__duree { font-size: 13px; font-weight: 700; color: var(--email); }
.peu-rubrique-demande__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 28px 56px; align-items: start; }
.peu-rubrique-demande__texte p { color: var(--encre-2); max-width: 60ch; }
.peu-rubrique-demande__texte .peu-parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }

/* Parcours en 4 étapes (pages intérieures) */
.peu-parcours { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.peu-parcours__etape { padding: 16px 18px; background: var(--blanc); border-radius: 14px; border: 1px solid var(--joint); }
.peu-parcours__icone { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--rose); margin-bottom: 8px; }
.peu-parcours__icone svg { width: 24px; height: 24px; fill: none; stroke: var(--email); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.peu-parcours__num { display: block; font-size: 13px; font-weight: 800; color: var(--email); margin-bottom: 2px; }
.peu-parcours__etape h3 { font-size: 19px; margin: 0 0 4px; }
.peu-parcours__etape p { margin: 0; font-size: 14.5px; color: var(--encre-2); line-height: 1.45; }

/* ==========================================================================
   10. PAGE VILLE, HUB DE ZONE, TUILES DE COMMUNES
   ========================================================================== */
.peu-ville-tete { background: var(--faience); padding: 18px 0 40px; }
.peu-ville-tete__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); grid-template-areas: "fil fil" "titre visuel" "texte visuel"; gap: 0 56px; align-items: start; }
.peu-ville-tete__fil { grid-area: fil; }
.peu-ville-tete__titre { grid-area: titre; font-size: clamp(32px, 3.6vw, 54px); margin-bottom: 10px; }
.peu-ville-tete__titre .peu-ton-1 { display: block; }
.peu-ville-tete__texte { grid-area: texte; min-width: 0; }
.peu-ville-tete__texte .peu-chapo { font-size: 16.5px; margin-bottom: 14px; }
.peu-ville-tete__form { max-width: 560px; }
.peu-ville-tete__visuel { grid-area: visuel; position: relative; min-width: 0; padding-bottom: 70px; }
.peu-cadre--ville { aspect-ratio: 3 / 2; width: 100%; }
.peu-ville-carte { position: absolute; right: 16px; bottom: 0; width: 230px; padding: 10px 12px; background: var(--blanc); border-radius: 14px; box-shadow: var(--ombre-forte); z-index: 3; }
.peu_contour--mini { display: block; width: 100%; height: 120px; }
.peu_contour_forme { fill: var(--rose-2); stroke: var(--email); stroke-width: 1.8; stroke-linejoin: round; }
.peu_contour_voisine { fill: var(--joint); stroke: var(--blanc); stroke-width: 1.2; }
.peu-ville-carte__legende { margin: 6px 0 0; font-size: 13px; line-height: 1.35; color: var(--encre-2); display: flex; flex-direction: column; }
.peu-ville-carte__legende strong { color: var(--encre); font-size: 14.5px; }
.peu-ville-tete__credit { position: absolute; left: 0; bottom: 0; max-width: calc(100% - 270px); }
.peu-ville-corps__grille { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.peu-ville-corps__texte { min-width: 0; display: grid; gap: 10px; }
.peu-ville-intro { margin-bottom: 8px; }
.peu-accordeon { background: var(--blanc); border-radius: 14px; border: 1px solid var(--joint); box-shadow: 0 10px 24px -22px rgba(34, 39, 42, .6); }
.peu-accordeon > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; cursor: pointer; list-style: none; }
.peu-accordeon > summary h2 { margin: 0; font-size: clamp(21px, 1.8vw, 26px); }
.peu-accordeon[open] > summary { border-bottom: 1px solid var(--joint); }
.peu-accordeon[open] > summary h2 { color: var(--email); }
.peu-accordeon__corps { padding: 16px 20px 6px; }
.peu-ville-corps__rail { min-width: 0; align-self: stretch; }
.peu-ville-corps__rail .peu-rail__collant { gap: 10px; }
.peu-ville-corps__rail-titre { margin: 0; font: 800 20px/1.15 var(--titre); color: var(--email); }
.peu-voisines__grille { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px 48px; align-items: center; }
.peu-voisines__texte p { color: var(--encre-2); }
.peu-tuiles-communes { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.peu-voisines .peu-tuiles-communes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.peu-tuile-commune > a, .peu-tuile-commune > span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 10px 12px 12px; background: var(--blanc); border-radius: 14px; border: 1px solid var(--joint); color: var(--encre); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.peu-tuile-commune > a:hover { border-color: var(--email); box-shadow: var(--ombre); transform: translateY(-2px); color: var(--encre); }
.peu-tuile-commune__forme { display: block; height: 96px; margin-bottom: 4px; }
.peu-tuile-commune__forme svg { width: 100%; height: 100%; }
.peu-tuile-commune__nom { font: 800 19px/1.15 var(--titre); }
.peu-tuile-commune__meta { font-size: 13px; color: var(--encre-2); }
.peu-tuile-commune.est-active > * { border-color: var(--email); background: var(--rose); }
.peu-hub-tete { background: var(--faience); padding: 18px 0 40px; }
.peu-hub-tete__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 24px 56px; align-items: start; }
.peu-hub-tete__texte h1 { margin-bottom: 10px; }
.peu-hub-tete__texte .peu-chapo { margin-bottom: 18px; font-size: 17px; }
.peu-cadre--hub { height: clamp(220px, calc(100vh - 520px), 300px); }

/* ==========================================================================
   11. CONTACT, PAGES, ÉQUIPE, AUTEUR, CRÉDITS, PLAN, 404
   ========================================================================== */
.peu-contact { background: var(--faience); padding: 20px 0 48px; }
.peu-contact__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); grid-template-areas: "tete form" "infos form"; gap: 12px 64px; align-items: start; }
.peu-contact__tete { grid-area: tete; }
.peu-contact__tete h1 { margin-bottom: 10px; }
.peu-contact__tete h1 .peu-ton-1 { display: block; }
.peu-contact__tete .peu-chapo { margin: 0; font-size: 17px; }
.peu-contact__form { grid-area: form; }
.peu-contact__infos { grid-area: infos; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 10px; }
.peu-cadre--contact { height: 230px; }
.peu-contact__infos .peu-reperes-liste { margin: 0; }
.peu-contact__note { margin-top: 24px; max-width: 820px; }
.peu-page-tete { background: var(--faience); padding: 18px 0 40px; }
.peu-page-tete--simple { padding-bottom: 32px; }
.peu-page-tete__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 24px 56px; align-items: center; }
.peu-page-tete h1 .peu-ton-1 { display: block; }
.peu-cadre--page { height: clamp(260px, calc(100vh - 420px), 340px); }
.peu-preuves--page { position: static; flex-direction: row; flex-wrap: wrap; max-width: none; margin-top: 16px; }
.peu-preuves--page li { box-shadow: none; border: 1px solid var(--joint); }
.peu-page-tete--auteur .peu-auteur { background: transparent; border: 0; padding: 0; }
.peu-page-tete--auteur .peu-auteur__nom { font-size: clamp(32px, 3.4vw, 50px); }
.peu-trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.peu-trois__item { padding: 20px 22px; background: var(--faience); border-radius: var(--r-carte); border-top: 4px solid var(--email); }
.peu-trois__item p { margin: 0; color: var(--encre-2); font-size: 15.5px; }
.peu-trois--sombre .peu-trois__item { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); border-top: 4px solid var(--jaune); }
.peu-trois--sombre .peu-trois__item p { color: var(--rose-texte); }
.peu-equipe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.peu-membre { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 22px; padding: 16px; background: var(--faience); border-radius: 20px; align-items: start; }
.peu-membre__portrait { position: relative; height: 250px; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 3px var(--blanc), 0 0 0 5px var(--email); }
.peu-membre__plaque { position: absolute; left: 10px; bottom: 10px; z-index: 1; max-width: calc(100% - 20px); }
.peu-membre__nom { margin: 4px 0 2px; font-size: 30px; }
.peu-membre__role { font-weight: 700; color: var(--email); font-size: 14.5px; margin-bottom: 10px; }
.peu-membre__texte p:not(.peu-membre__role) { color: var(--encre-2); font-size: 16px; }
.peu-credits__titre { margin: 8px 0 14px; }
.peu-credits { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin-bottom: 28px; }
.peu-credits__item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px; background: var(--faience); border-radius: 12px; }
.peu-credits__item img { width: 120px; height: 80px; object-fit: cover; border-radius: 8px; }
.peu-credits__texte { display: flex; flex-direction: column; gap: 2px; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.peu-credits__licence { color: var(--encre-2); }
.peu-plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.peu-plan__bloc { padding: 20px 22px; background: var(--faience); border-radius: var(--r-carte); }
.peu-plan__bloc h2 { font-size: 24px; }
.peu-plan__bloc ul { list-style: none; display: grid; gap: 6px; }
.peu-plan__colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.peu-recherche { display: flex; gap: 8px; max-width: 560px; margin-top: 16px; }
.peu-recherche input { flex: 1; min-width: 0; }
.peu-404__grille { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px 56px; align-items: center; margin-bottom: 32px; }
.peu-404__symbole { display: flex; justify-content: center; }
.peu-404__plaque { padding: 22px 30px 20px; }
.peu-404__plaque .peu-plaque__titre { font-size: 40px; }
.peu-404__plaque .peu-plaque__sous { font-size: 16px; }
.peu-secours { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.peu-secours a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--blanc); border-radius: 14px; border: 1px solid var(--joint); color: var(--encre); font-weight: 700; text-decoration: none; }
.peu-secours a:hover { border-color: var(--email); color: var(--email); }
.peu-secours__symbole { width: 38px; height: 38px; flex: none; }

/* ==========================================================================
   12. PIED DE PAGE — émail nuit, colonnes équilibrées, communes en 5 colonnes
   ========================================================================== */
.peu-pied { background: var(--email-nuit); color: var(--rose-texte); border-top: 6px solid var(--email); padding: 48px 0 0; font-size: 15px; }
.peu-pied a { color: var(--blanc); text-decoration: none; }
.peu-pied a:hover { color: var(--jaune); text-decoration: underline; }
.peu-pied__grille { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 28px 32px; align-items: start; }
.peu-pied__bloc p { margin: 0 0 10px; line-height: 1.55; }
.peu-pied__bloc--marque .peu-logo { margin-bottom: 14px; }
.peu-pied__independance { font-size: 13.5px; color: var(--rose-texte); opacity: .9; }
.peu-pied__titre { font: 800 15px/1.2 var(--titre); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px; color: var(--jaune); }
.peu-pied__titre a { color: var(--jaune); }
.peu-pied__bloc ul { list-style: none; display: grid; gap: 7px; }
.peu-pied__bloc li { line-height: 1.35; }
.peu-pied__bloc--communes { grid-column: 1 / -1; order: 9; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); }
.peu-pied__communes { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: row; gap: 7px 24px !important; }
.peu-pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 30px; padding: 16px 0 22px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13.5px; }

/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */
@media (min-width: 1700px) { .peu-hero__scene { height: 480px; } }
@media (max-width: 1300px) and (min-width: 1181px) { .peu-entete__ligne { gap: 12px; } .peu-nav a { padding: 10px 8px; font-size: 15px; } .peu-logo__nom { font-size: 21px; } }
@media (max-width: 1240px) { .peu-cas { grid-template-columns: repeat(3, minmax(0, 1fr)); } .peu-cas__media { height: 130px; } }
@media (max-width: 1180px) {
	.peu-nav { display: none; }
	.peu-burger { display: block; }
	.peu-entete__actions { margin-left: auto; }
	.peu-grille--4, .peu-methode { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.peu-pied__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.peu-pied__bloc--marque { grid-column: 1 / -1; }
	.peu-pied__communes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
	:root { --entete: 62px; }
	.peu-hero { background: var(--faience); padding: 14px 0 28px; }
	.peu-hero__grille, .peu-hero__tete, .peu-hero__scene { display: flex; flex-direction: column; gap: 14px; height: auto; min-height: 0; }
	.peu-hero__tete, .peu-hero__scene { display: contents; }
	.peu-hero__titre { order: 1; }
	.peu-hero__visuel { order: 2; margin: 0; height: 320px; }
	.peu-hero__aside { order: 3; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
	.peu-hero__mobile { display: inline-flex; }
	.peu-hero__form { order: 4; }
	.peu-tete-section--ligne, .peu-carte-section, .peu-faq-section, .peu-final__grille, .peu-rubrique-demande__grille, .peu-voisines__grille, .peu-hub-tete__grille, .peu-page-tete__grille, .peu-404__grille { grid-template-columns: minmax(0, 1fr); }
	.peu-zone { grid-template-columns: minmax(0, 1fr); }
	.peu-cadre--egout { display: none; }
	.peu-article-tete__grille { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fil" "texte" "visuel"; gap: 14px; }
	.peu-cadre--article { max-height: 360px; }
	.peu-article-grille, .peu-ville-corps__grille { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.peu-rail__collant { position: static; }
	.peu-rail .peu-sommaire, .peu-lecture-progress { display: none; }
	.peu-sommaire-haut { display: block; margin-bottom: 16px; background: var(--blanc); border: 1px solid var(--joint); border-radius: 12px; }
	.peu-sommaire-haut summary { padding: 12px 16px; font-weight: 800; cursor: pointer; color: var(--email); }
	.peu-sommaire-haut ol { padding: 0 16px 12px 36px; display: grid; gap: 4px; font-size: 15px; }
	.peu-ville-tete__grille { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fil" "titre" "visuel" "texte"; gap: 12px; }
	.peu-ville-tete__visuel { padding-bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 12px; align-items: end; }
	.peu-ville-carte { position: static; width: auto; }
	.peu-ville-tete__credit { position: static; grid-column: 1 / -1; max-width: none; }
	.peu-contact__grille { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tete" "form" "infos"; }
	.peu-panneau { grid-template-columns: minmax(0, 1fr); }
	.peu-panneau__photo { height: 200px; }
	.peu-une { grid-template-columns: minmax(0, 1fr); height: auto; }
	.peu-une__media { height: 240px; }
	.peu-repertoire { grid-template-columns: minmax(0, 1fr); }
	.peu-equipe { grid-template-columns: minmax(0, 1fr); }
	.peu-tuiles-communes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.peu-parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.peu-grille--3, .peu-grille--liste, .peu-trois, .peu-credits, .peu-plan { grid-template-columns: minmax(0, 1fr); }
	.peu-contact__infos { grid-template-columns: minmax(0, 1fr); }
	.peu-membre { grid-template-columns: minmax(0, 1fr); }
	.peu-membre__portrait { height: 280px; max-width: 320px; }
	.peu-duel { grid-template-columns: minmax(0, 1fr); }
	.peu-duel > .peu-bloc-picto { display: none; }
	.peu-legende { grid-auto-flow: row; grid-template-rows: none; }
}
@media (max-width: 560px) {
	:root { --entete: 60px; }
	body { font-size: 16.5px; }
	.peu-section { padding-block: 32px; }
	.peu-entete__ligne { gap: 8px; }
	.peu-logo { gap: 7px; flex: 1 1 auto; }
	.peu-logo__symbole { width: 34px; height: 34px; }
	.peu-logo__nom { font-size: 18px; }
	.peu-entete__long { display: none; }
	.peu-entete__court { display: inline; }
	.peu-entete__actions { gap: 6px; }
	.peu-entete__actions .peu-btn--petit { padding: 8px 10px; font-size: 14px; }
	.peu-burger { width: 40px; height: 40px; }
	.peu-burger span { top: 17px; left: 9px; }
	.peu-hero__titre { font-size: 32px; line-height: 1.02; }
	.peu-hero__visuel { height: 230px; }
	.peu-cadre { padding: 7px; border-radius: 16px; }
	.peu-cadre::after { inset: 3px; border-radius: 13px; }
	.peu-cadre__vue { border-radius: 10px; }
	.peu-cadre__plaque { top: 16px; left: 16px; max-width: calc(100% - 32px); }
	.peu-plaque { padding: 7px 12px 6px; }
	.peu-plaque__titre { font-size: 14.5px; }
	.peu-plaque__sous { font-size: 12px; }
	.peu-preuves { position: static; flex-direction: row; flex-wrap: wrap; max-width: none; margin-top: 10px; gap: 6px; }
	.peu-preuves li { font-size: 13px; padding: 5px 10px; box-shadow: none; border: 1px solid var(--joint); }
	.peu-preuves strong { font-size: 16px; }
	.peu-hero__visuel { height: auto; }
	.peu-cadre--hero { height: 230px; }
	.peu-tuiles--trois { grid-template-columns: minmax(0, 1fr); }
	.peu-tuile label { font-size: 13.5px; min-height: 42px; padding: 7px 8px; gap: 7px; }
	.peu-tuiles--communes, .peu-form-bloc--compact .peu-tuiles--communes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.peu-tuiles--communes .peu-tuile--autre { grid-column: 1 / -1; }
	.peu-champs, .peu-form-bloc--compact .peu-champs { grid-template-columns: minmax(0, 1fr); }
	.peu-form__tete { grid-template-columns: minmax(0, 1fr); }
	.peu-form__plaques { grid-column: 1; grid-row: auto; margin-top: 6px; }
	.peu-form__actions .peu-btn { padding: 10px 14px; }
	.peu-cas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.peu-cas__media { height: 104px; }
	.peu-cas__nom { font-size: 17px; margin: 8px 4px 2px; }
	.peu-cas__desc { font-size: 13px; margin: 0 4px; }
	.peu-grille--2, .peu-grille--4, .peu-methode, .peu-parcours, .peu-rubrique-demande__texte .peu-parcours { grid-template-columns: minmax(0, 1fr); }
	.peu-methode__media { height: 150px; }
	.peu-entree__media, .peu-carte__media { height: 160px; }
	.peu-ville-tete__visuel { grid-template-columns: minmax(0, 1fr); }
	.peu-ville-carte { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: center; }
	.peu_contour--mini { height: 80px; }
	.peu-tuiles-communes, .peu-voisines .peu-tuiles-communes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.peu-tuile-commune__forme { height: 70px; }
	.peu-panneau { padding: 10px; }
	.peu-panneau__texte { padding: 16px 14px 12px; }
	.peu-panneau__photo { height: 160px; }
	.peu-onglet { font-size: 14px; padding: 6px 10px 5px; }
	.peu-une__corps { padding: 18px; }
	.peu-repertoire__lien { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
	.peu-repertoire__media { height: 76px; }
	.peu-repertoire__extrait { display: none; }
	.peu-auteur { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; }
	.peu-auteur__portrait { width: 80px; height: 96px; }
	.peu-encadre { padding: 16px 16px 14px 52px; }
	.peu-bloc-picto { left: 14px; top: 16px; width: 24px; height: 24px; }
	ol.peu-etapes > li { padding-left: 58px; }
	.sbs_etape { grid-template-columns: minmax(0, 1fr); }
	.sbs_etape_desc { grid-column: 1; }
	.peu-pied__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
	.peu-pied__communes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.peu-recherche { flex-direction: column; }
	.peu-cadre--contact { height: 190px; }
	.peu-404__plaque .peu-plaque__titre { font-size: 30px; }
}
@media (max-width: 374px) { .peu-logo__ext { display: none; } .peu-hero__titre { font-size: 29px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ==========================================================================
   PASSE DE CORRECTIONS N°1 (03/11/2026) — jugement visuel n°1 + porte de sortie n°1.
   Bloc AJOUTÉ en fin de feuille : aucune règle existante n'est réécrite.
   ========================================================================== */

/* 1, 11 — Hero : le chapô passe SOUS le titre (plus de colonne latérale, P-550) ;
   les pastilles de chiffres restent DANS la photo, sur une ligne, coin bas gauche. */
.peu-hero .peu-preuves { position: absolute; top: auto; right: auto; left: 24px; bottom: 24px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; max-width: calc(100% - 140px); margin: 0; }
.peu-hero .peu-preuves li { white-space: nowrap; }
@media (min-width: 1081px) {
	.peu-hero__tete { grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
	.peu-hero__aside { max-width: 880px; }
	.peu-hero__scene { height: clamp(420px, calc(100vh - var(--entete) - 300px), 450px); min-height: 420px; }
}
@media (min-width: 1700px) { .peu-hero__scene { height: 450px; } }

/* 4 — Formulaire : 18 px d'air entre le bandeau grenat et la question, partout. */
.peu-etape legend, .peu-form-bloc--compact .peu-etape legend { padding-top: 18px; }

/* 7 — Article : fiche « en bref » sous l'auteur ; la photo descend jusqu'au bas de la colonne. */
.peu-article-bref { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; margin: 16px 0 0; border: 1.5px solid var(--email); border-radius: 12px; background: var(--blanc); overflow: hidden; }
.peu-article-bref > div { padding: 8px 18px 9px; border-left: 1px solid var(--joint); }
.peu-article-bref > div:first-child { border-left: 0; }
.peu-article-bref dt { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--encre-2); }
.peu-article-bref dd { margin: 2px 0 0; font: 800 20px/1.1 var(--titre); color: var(--email); }
@media (min-width: 1081px) {
	.peu-article-tete__visuel { align-self: stretch; display: flex; flex-direction: column; }
	.peu-article-tete__visuel > .peu-cadre--article { flex: 1 1 auto; aspect-ratio: auto; max-height: none; min-height: 300px; }
}

/* 10 — Ville et contact : les deux colonnes de l'en-tête finissent ensemble. */
@media (min-width: 1081px) {
	.peu-ville-tete__visuel { align-self: stretch; display: flex; flex-direction: column; }
	.peu-ville-tete__visuel > .peu-cadre--ville { flex: 1 1 auto; aspect-ratio: auto; min-height: 300px; }
	.peu-contact__grille { align-items: stretch; }
	.peu-contact__tete, .peu-contact__infos { align-self: start; }
	.peu-contact__form { align-self: stretch; display: flex; flex-direction: column; }
	.peu-contact__form > .peu-form-bloc { flex: 1 1 auto; }
	.peu-contact__form .peu-tuile label { min-height: 56px; }
	.peu-cadre--contact { height: 190px; }
}

/* 9 — Qui sommes-nous : un picto bordeaux en carré arrondi en tête de chaque carte. */
.peu-trois__picto { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 12px; border-radius: 12px; background: var(--email); color: var(--blanc); }
.peu-trois__picto svg { width: 24px; height: 24px; }
.peu-trois--sombre .peu-trois__picto { background: var(--blanc); color: var(--email); }

/* 8, 12 — Rubrique « répertoire de la galerie » (P-556) : photo à gauche / plaque à droite,
   guides sous plaques de rue à cheval sur la photo, 3 colonnes sans case vide,
   demande avec formulaire à gauche, « Les autres galeries » en fin de page. */
.peu-panneau--inverse { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
.peu-panneau--inverse .peu-panneau__texte { padding: 18px 26px 18px 22px; }
.peu-tete-section--galerie { margin-bottom: 18px; }
.peu-une--inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.peu-galerie { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; align-items: start; }
.peu-galerie__lien { display: flex; flex-direction: column; text-decoration: none; color: var(--encre); }
.peu-galerie__lien:hover { color: var(--encre); }
.peu-galerie__lien:focus-visible { outline: 3px solid var(--jaune); outline-offset: 4px; border-radius: 16px; }
.peu-galerie__media { display: block; height: 190px; border-radius: 16px; overflow: hidden; box-shadow: var(--ombre); }
.peu-galerie__media > img, .peu-galerie__media > .peu-photo--repli { display: block; width: 100%; height: 100%; object-fit: cover; }
.peu-galerie__plaque { position: relative; z-index: 1; align-self: flex-start; max-width: calc(100% - 28px); margin: -30px 0 0 14px; padding: 9px 14px 8px; border-radius: 10px; background: var(--email); color: var(--blanc); box-shadow: inset 0 0 0 2px var(--email), inset 0 0 0 3.5px var(--blanc), 0 12px 22px -12px rgba(34, 39, 42, .7); transition: background-color .2s; }
.peu-galerie__lien:hover .peu-galerie__plaque { background: var(--email-fonce); }
.peu-galerie__titre { font: 800 18.5px/1.15 var(--titre); }
.peu-galerie__extrait { margin: 10px 4px 0; font-size: 14.5px; line-height: 1.45; color: var(--encre-2); }
.peu-galerie__duree { margin: 6px 4px 0; font-size: 13px; font-weight: 700; color: var(--email); }
.peu-galerie__libre { align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; padding: 24px; border-radius: 16px; background: var(--encre); color: var(--blanc); }
.peu-galerie__libre p { margin: 0; max-width: 46ch; font-size: 15px; color: rgba(255, 255, 255, .9); }
.peu-galerie__libre--large { grid-column: span 2; }
.peu-rubrique-demande--galerie .peu-rubrique-demande__grille { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: start; }
.peu-rubrique-demande--galerie .peu-rubrique-demande__texte { display: flex; flex-direction: column; gap: 14px; }
.peu-rubrique-demande--galerie .peu-rubrique-demande__texte h2, .peu-rubrique-demande--galerie .peu-rubrique-demande__texte p { margin: 0; }
.peu-cadre--demande { height: 260px; }
.peu-autres-galeries__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.peu-autres-galeries__lien { position: relative; display: block; height: 240px; border-radius: 18px; overflow: hidden; box-shadow: var(--ombre-forte); }
.peu-autres-galeries__lien:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }
.peu-autres-galeries__media, .peu-autres-galeries__media > * { display: block; width: 100%; height: 100%; }
.peu-autres-galeries__media img { width: 100%; height: 100%; object-fit: cover; }
.peu-autres-galeries__plaque { position: absolute; left: 18px; bottom: 18px; }
@media (max-width: 1080px) {
	.peu-panneau--inverse { grid-template-columns: minmax(0, 1fr); }
	.peu-panneau--inverse .peu-panneau__texte { order: -1; }
	.peu-une--inverse { grid-template-columns: minmax(0, 1fr); }
	.peu-une--inverse .peu-une__media { order: -1; }
	.peu-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.peu-galerie__libre, .peu-galerie__libre--large, .peu-galerie--impair .peu-galerie__item--dernier { grid-column: 1 / -1; }
	.peu-rubrique-demande--galerie .peu-rubrique-demande__grille, .peu-autres-galeries__liste { grid-template-columns: minmax(0, 1fr); }
}

/* 3, 5 — Mobile : nom du site entier ; pastilles du hero dans la photo, sur une ligne défilante. */
@media (max-width: 560px) {
	.peu-logo { flex: 0 1 auto; gap: 6px; }
	.peu-logo__symbole { width: 30px; height: 30px; }
	.peu-logo__nom { font-size: 16px; letter-spacing: 0; overflow: visible; }
	.peu-entete__actions { margin-left: auto; }
	.peu-entete__actions .peu-btn--petit { padding: 8px 9px; font-size: 13.5px; }
	.peu-hero .peu-preuves { left: 14px; right: 14px; bottom: 14px; max-width: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.peu-hero .peu-preuves::-webkit-scrollbar { display: none; }
	.peu-hero .peu-preuves li { flex: none; background: rgba(255, 255, 255, .96); border: 0; }
	.peu-galerie { grid-template-columns: minmax(0, 1fr); }
	.peu-galerie--impair .peu-galerie__item--dernier { grid-column: auto; }
	.peu-autres-galeries__lien { height: 180px; }
	.peu-cadre--demande { height: 200px; }
}

/* Passe n°1, retouches après capture : la photo du hero restait à sa hauteur naturelle (piste de grille « auto »)
   et poussait les pastilles sous la section suivante ; nom long du lien vers les communes ; pastilles mobiles sur 2 lignes. */
@media (min-width: 1081px) { .peu-hero__scene { grid-template-rows: minmax(0, 1fr); } .peu-hero__visuel { min-height: 0; } .peu-cadre--contact { height: 170px; } }
.peu-autres-galeries .peu-btn { white-space: normal; max-width: 100%; text-align: left; }
@media (max-width: 560px) { .peu-hero .peu-preuves { flex-wrap: wrap; overflow: visible; gap: 5px; } .peu-hero .peu-preuves li { font-size: 12.5px; padding: 4px 9px; } }

/* ==========================================================================
   PASSE DE CORRECTIONS N°2 (03/11/2026) — jugement visuel n°2. Ajouts seulement.
   ========================================================================== */
/* Hero : recadrage calé en haut à gauche — la voûte et la grosse conduite restent, les panneaux du musée (bas droit) sortent du cadre */
.peu-cadre--hero .peu-cadre__vue img { object-position: 0 0; transform: scale(1.14); transform-origin: 0 0; }
/* Hero : libellés courts des pastilles (servis à 390 seulement) */
.peu-preuves__court { display: none; }
/* Formulaire : intitulé sur une seule ligne */
.peu-form__titre { white-space: nowrap; }
/* Ville : bouton de demande sous le titre (mobile uniquement) */
.peu-ville-tete__action { display: none; }
/* Rubrique : bloc grenat rempli — chapô + 3 repères en pastilles */
.peu-panneau__chapo { margin: 2px 0 16px; }
.peu-panneau__chapo, .peu-panneau__chapo p { font-size: 16px; line-height: 1.5; color: var(--blanc); max-width: 54ch; }
.peu-panneau__reperes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.peu-panneau__reperes li { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 12px 5px; border-radius: 9px; border: 1.5px solid rgba(255, 255, 255, .7); color: var(--blanc); font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.peu-panneau__reperes strong { font: 800 19px/1 var(--texte); font-variant-numeric: tabular-nums; }
/* Choisir : la case libre devient « Votre commune » (liens vers les pages commune), sans vide sous le bouton */
.peu-galerie__libre--communes { justify-content: flex-start; }
.peu-galerie__communes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.peu-galerie__communes a { display: inline-block; padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .45); color: var(--blanc); font-size: 14px; font-weight: 600; text-decoration: none; }
.peu-galerie__communes a:hover, .peu-galerie__communes a:focus-visible { background: var(--blanc); color: var(--encre); }
.peu-galerie__libre:not(.peu-galerie__libre--large) .peu-galerie__communes li:nth-child(n+9) { display: none; }
/* Contact : troisième bande (questions) */
.peu-contact-faq .peu-faq-section__tete h2 { margin-top: 0; }
@media (max-width: 1080px) {
	.peu-ville-tete__grille { grid-template-areas: "fil" "titre" "action" "visuel" "texte"; }
	.peu-ville-tete__action { display: inline-flex; grid-area: action; justify-self: start; margin-bottom: 4px; }
}
@media (max-width: 560px) {
	.peu-cadre--hero .peu-cadre__vue img { transform: scale(1.6); }
	.peu-hero .peu-preuves { left: 12px; right: 12px; bottom: 12px; flex-wrap: nowrap; gap: 5px; overflow: visible; }
	.peu-hero .peu-preuves li { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 4px 8px; font-size: 11.5px; line-height: 1.15; white-space: nowrap; }
	.peu-hero .peu-preuves strong { font-size: 15px; margin: 0; }
	.peu-preuves__plus { display: none; }
	.peu-preuves__court { display: inline; }
	.peu-panneau__chapo, .peu-panneau__chapo p { font-size: 15px; }
	.peu-panneau__reperes li { font-size: 13px; padding: 5px 9px 4px; }
	.peu-panneau__reperes strong { font-size: 16px; }
}
/* passe 2, retouches après capture : recadrage sans débordement (Chromium) ; case « Votre commune » compacte */
@supports (object-view-box: inset(0)) {
	.peu-cadre--hero .peu-cadre__vue img { transform: none; object-view-box: inset(0 12% 12% 0); }
	@media (max-width: 560px) { .peu-cadre--hero .peu-cadre__vue img { transform: none; object-view-box: inset(0 37.5% 37.5% 0); } }
}
.peu-galerie__libre--communes { justify-content: center; gap: 10px; }
.peu-galerie__libre--large.peu-galerie__libre--communes p { max-width: none; }
.peu-galerie__communes { gap: 5px; }
.peu-galerie__communes a { padding: 4px 9px; font-size: 13.5px; }
.peu-galerie__communes-tout a { background: var(--blanc); color: var(--encre); border-color: var(--blanc); }
.peu-galerie__libre:not(.peu-galerie__libre--large) .peu-galerie__communes li:nth-child(n+9):not(.peu-galerie__communes-tout) { display: none; }
@supports (object-view-box: inset(0)) {
	.peu-cadre--hero .peu-cadre__vue img { object-view-box: inset(0 12% 12% 2.5%); }
	@media (max-width: 560px) { .peu-cadre--hero .peu-cadre__vue img { object-view-box: inset(0 37.5% 37.5% 2.5%); } }
}
.peu-galerie__libre .peu-galerie__communes li.peu-galerie__communes-tout:nth-child(n) { display: list-item; }