/* ==========================================================================
   RPO GALET — gabarits.css — LOT 2 (page ville, article, rubrique, pages
   annexes). Chargé après app.css (functions.php) : réutilise ses jetons
   --rp-*, --r-*, --sh-*, --fs-* et ses classes (.btn, .pilule, .accordeon,
   .champ*, .carte-form, .carte-guide, .grille-guides, .zone-desservie,
   .section*). Mode clair uniquement, verrou sombre déjà posé par app.css.
   ========================================================================== */

/* ---------- Fil d'Ariane ---------- */
.fil-ariane { font-size: var(--fs-small); color: var(--rp-galet); margin-bottom: 20px; }
.fil-ariane a { color: var(--rp-galet); }
.fil-ariane a:hover { color: var(--rp-chai); }
.fil-ariane span[aria-hidden] { margin: 0 6px; }

/* Le premier écran de la page ville (hero-ville.php) est écrit et stylé par
   l'orchestrateur avec app.css — plus aucun CSS d'habillage ici (correction
   du 02/10, cassure de la gémellité avec postederelevage.com). */

/* ---------- Section resserrée ----------
   Deux sections « pâles » collées (ex. corps de page + Communes voisines)
   créaient ~200 px de vide avant/après le bloc (jugement du 02/10). Même
   spécificité que .section, mais chargé après app.css : la classe gagne. */
.section--compact { padding: 56px 0; }
@media (max-width: 640px) { .section--compact { padding: 32px 0; } }

/* ---------- Dernière section colorée avant le pied de page ----------
   Le pied de page (footer.php, hors main) partage la même couleur Garonne
   profonde que .section--garonne : sans marge, les deux blocs sombres se
   confondent en un seul (correction du 02/10, R-1798). */
.section--avant-pied { margin-bottom: 64px; }
@media (max-width: 640px) { .section--avant-pied { margin-bottom: 32px; } }

/* ---------- En-tête d'article (ENTETE-galet-pierre-photo-et-vignette) ---------- */
.entete-article { padding: 48px 0 56px; overflow: visible; }
.entete-article__mise-en-page { display: grid; grid-template-columns: 1fr 440px; gap: 40px; align-items: start; position: relative; }
.entete-article__galet {
	position: absolute; left: calc(var(--marge) * -1 - 24px); top: -16px; width: 48%; height: 220px;
	background: var(--rp-pierre); border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; z-index: 0;
}
.entete-article__col { position: relative; z-index: 1; padding-top: 8px; }
.entete-article__pastille {
	display: inline-flex; height: 28px; align-items: center; padding: 0 14px; margin-bottom: 16px;
	border-radius: var(--r-pilule); background: var(--rp-chai-pale); color: var(--rp-chai);
	font-weight: 600; font-size: var(--fs-small);
}
.entete-article__col h1 { font-size: var(--fs-h1); line-height: 1.08; margin-bottom: 16px; }
.entete-article__chapo { font-size: var(--fs-lead); color: var(--rp-galet); margin-bottom: 20px; max-width: 560px; }
.entete-article__media { position: relative; z-index: 1; border-radius: var(--r-photo); overflow: hidden; box-shadow: var(--sh-2); aspect-ratio: 4/5; }
.entete-article__media img { width: 100%; height: 100%; object-fit: cover; }
.entete-article__etiquette {
	/* En haut à gauche de la photo : la vignette (ci-dessous) occupe le coin
	   bas gauche, l'étiquette ne doit jamais la chevaucher (règle bloquante). */
	position: absolute; left: 16px; top: 16px; z-index: 1; background: rgba(255,255,255,.92); color: var(--rp-encre);
	border-radius: var(--r-pilule); padding: 8px 14px; font-weight: 600; font-size: var(--fs-small);
}
.entete-article__vignette {
	position: absolute; left: -48px; bottom: -32px; width: 42%; border-radius: var(--r-photo);
	border: 6px solid var(--rp-blanc); box-shadow: var(--sh-3); overflow: hidden; z-index: 2; aspect-ratio: 1/1;
}
.entete-article__vignette img { width: 100%; height: 100%; object-fit: cover; }

.article-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-small); color: var(--rp-galet); margin-top: 24px; }
.article-meta img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--rp-chai); object-fit: cover; }
.article-meta a { font-weight: 600; color: var(--rp-encre); }
.article-meta a:hover { color: var(--rp-chai); }

@media (max-width: 1100px) {
	.entete-article__mise-en-page { grid-template-columns: 1fr; }
	.entete-article__galet { display: none; }
	.entete-article__media { aspect-ratio: 16/10; margin-top: 8px; }
	.entete-article__vignette { width: 36%; left: 16px; bottom: -24px; }
}
@media (max-width: 480px) {
	.entete-article { padding: 24px 0 40px; }
	.entete-article__vignette { display: none; }
}

/* ---------- Corps d'article + rail ----------
   Rail élargi à 350 px (bornes 340-360) et gouttière resserrée à 48 px
   (≤56 px, R-1779) ; .entete-article et .article-mise-en-page partagent la
   classe .conteneur donc le même bord gauche que le H1 (correction du 02/10). */
.article-mise-en-page { display: grid; grid-template-columns: 1fr 350px; gap: 48px; align-items: start; padding: 48px 0 72px; }
.article-principal { max-width: 720px; }
.article-corps { font-size: 18px; line-height: 1.7; }
.article-corps h2 { font-size: var(--fs-h2); margin: 48px 0 20px; scroll-margin-top: 100px; }
.article-corps h3 { font-size: var(--fs-h3); margin: 32px 0 14px; }
.article-corps p { margin-bottom: 20px; }
.article-corps ul, .article-corps ol { margin: 0 0 20px; padding-left: 1.3em; }
.article-corps li { margin-bottom: 8px; }
.article-corps a { color: var(--rp-chai); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.body-figure { margin: 28px 0; }
.body-figure img { border-radius: var(--r-photo); width: 100%; height: auto; box-shadow: var(--sh-1); }
.body-figure figcaption { font-size: var(--fs-small); color: var(--rp-galet); margin-top: 8px; }

.sommaire-mobile { display: none; margin-bottom: 28px; }
.sommaire {
	background: var(--rp-blanc); border: 1px solid var(--rp-filet); border-radius: var(--r-carte);
	padding: 18px 20px; margin-bottom: 28px;
}
.sommaire__titre { font-weight: 600; font-size: 15px; cursor: pointer; list-style: none; }
.sommaire__titre::-webkit-details-marker { display: none; }
.sommaire__liste {
	/* <ol> sans list-style : sinon le navigateur ajoute SON numéro natif
	   ("1.") devant notre galet numéroté ("01"), d'où "1. 01" vu par le juge
	   le 02/10 — la correction la plus critique du sommaire. */
	list-style: none; padding-left: 0; margin-top: 12px; display: flex; flex-direction: column; gap: 10px;
}
.sommaire__liste a { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.sommaire__num {
	display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0;
	border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; background: var(--rp-chai-pale); color: var(--rp-chai);
	font-size: 11px; font-weight: 700;
}
.sommaire__liste a:hover .sommaire__num,
.sommaire__liste a.actif .sommaire__num { background: var(--rp-chai); color: #fff; }

.rail-article {
	position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px;
	/* Le rail (sommaire + formulaire) est parfois plus haut que l'écran (B-ART-07,
	   constat du 02/10) : le formulaire restait coupé en bas, inatteignable.
	   On laisse le rail défiler DANS lui-même plutôt que de le laisser dépasser. */
	max-height: calc(100vh - 116px); overflow-y: auto;
}
.rail-article .sommaire { margin-bottom: 0; }
.rail-article .carte-form { padding: 20px; }
/* Formulaire compact/plein du rail et de la carte contact : le jugement du
   02/10 l'a vu « délavé, gris, comme désactivé » et trop étroit (« Étape 1
   sur 4 » sur 2 lignes, libellés coupés). On force la pleine opacité/les
   couleurs de marque et on empêche les textes courts de casser sur 2 lignes
   — sans toucher à template-parts/formulaire.php ni assets/js/app.js (hors
   de notre périmètre pour cette mission). */
.rail-article .carte-form,
.contact-carte .carte-form { opacity: 1; background: var(--rp-blanc); box-shadow: var(--sh-2); }
.rail-article .carte-form__titre,
.rail-article .carte-form__question,
.contact-carte .carte-form__titre,
.contact-carte .carte-form__question { color: var(--rp-encre); opacity: 1; }
.carte-form__compteur { white-space: nowrap; }
.rail-article .tuile__txt,
.contact-carte .tuile__txt { overflow-wrap: anywhere; white-space: normal; }

.rpo-encadre { border-radius: var(--r-carte); padding: 24px; margin: 28px 0; }
.rpo-encadre__titre { font-family: var(--ff-titre); font-weight: 700; font-size: 18px; margin-bottom: 12px; }
.rpo-encadre--retenir { background: var(--rp-miroir); }
.rpo-encadre--retenir ul { margin: 0; padding-left: 1.2em; }
.rpo-encadre--retenir li { margin-bottom: 8px; }
.rpo-encadre--saviez { background: var(--rp-pierre); }
.rpo-encadre--saviez p:last-child { margin: 0; font-size: 17px; }

.faq-article { margin: 32px 0; }

/* ---------- FAQ en cartes (remplace l'accordéon gris, erreur 6 du
   jugement du 02/10 : accordéon générique + doublon en texte brut ▶ sur les
   villes). Cartes OUVERTES en grille 2 colonnes, centrées, question en gras
   + réponse toujours visible, petit galet numéroté — jamais un <details>. */
.faq-galet { margin: 0 auto; max-width: 980px; }
.faq-galet__titre { font-size: var(--fs-h2); line-height: 1.1; text-align: center; margin-bottom: 32px; }
.faq-galet__grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.faq-galet__carte {
	position: relative; background: var(--rp-blanc); border: 1px solid var(--rp-filet); border-radius: var(--r-carte);
	box-shadow: var(--sh-1); padding: 24px 24px 22px 64px;
}
.faq-galet__num {
	position: absolute; left: 20px; top: 22px; width: 32px; height: 32px; display: inline-flex;
	align-items: center; justify-content: center; border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%;
	background: var(--rp-chai-pale); color: var(--rp-chai); font-weight: 700; font-size: 13px;
}
.faq-galet__q { font-weight: 700; font-size: 16px; margin: 0 0 8px; }
.faq-galet__r { color: var(--rp-galet); font-size: 15px; margin: 0; }
@media (max-width: 760px) {
	.faq-galet__grille { grid-template-columns: 1fr; }
	.faq-galet__carte { padding: 20px 20px 18px 56px; }
}

/* ---------- Sources discrètes (rpo_g_sources_discretes) ---------- */
.rpo-note-appel { color: var(--rp-chai); font-weight: 700; margin-left: 2px; }
.rpo-notes { margin: 32px 0; padding: 16px 20px; background: var(--rp-calcaire); border-radius: var(--r-carte); }
.rpo-notes ol { margin: 0; padding-left: 1.2em; font-size: 13px; color: var(--rp-galet); }
.rpo-notes li { margin-bottom: 4px; }

.auteur-bloc {
	/* Marge franche avant la boîte auteur (R-1780) : elle était « collée au
	   contenu » juste après la FAQ/l'encart. */
	display: flex; gap: 16px; align-items: flex-start; margin-top: 88px; padding: 24px;
	background: var(--rp-calcaire); border-radius: var(--r-carte); border-top: 1px solid var(--rp-filet);
}
.auteur-bloc__photo { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.auteur-bloc__nom { font-weight: 700; font-size: 16px; margin-bottom: 2px; }
.auteur-bloc__nom a { color: var(--rp-encre); }
.auteur-bloc__fonction { display: block; font-weight: 400; font-size: 13px; color: var(--rp-galet); }
.auteur-bloc__bio { font-size: 14px; color: var(--rp-galet); margin: 8px 0; }
.auteur-bloc__date { font-size: 12px; color: var(--rp-galet); }
.auteur-bloc__date a { color: var(--rp-chai); }

.a-lire-aussi { margin-top: 56px; }
.a-lire-aussi__titre { font-size: var(--fs-h3); margin-bottom: 20px; }
/* « Dans la même rubrique » réutilise .grille-guides/.carte-guide (bento de
   l'accueil, app.css) mais ne doit JAMAIS avoir de carte seule sur la moitié
   de la largeur, ni le traitement "1re carte en vedette" du bento (jugement
   du 02/10). Toujours 3 colonnes égales ; 1 seul article → carte horizontale
   pleine largeur. */
.a-lire-aussi .grille-guides { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; }
.a-lire-aussi .carte-guide:first-child { grid-row: auto; grid-column: auto; display: block; }
.a-lire-aussi .carte-guide:first-child .carte-guide__media { aspect-ratio: 16/10; flex: none; min-height: 0; }
.a-lire-aussi .carte-guide:first-child h3 { font-size: 17px; }
.a-lire-aussi .grille-guides:has(> .carte-guide:only-child) { grid-template-columns: 1fr; }
.a-lire-aussi .grille-guides:has(> .carte-guide:only-child) .carte-guide { display: grid; grid-template-columns: 300px 1fr; }
.a-lire-aussi .grille-guides:has(> .carte-guide:only-child) .carte-guide__media { aspect-ratio: auto; height: 100%; }
@media (max-width: 860px) {
	.a-lire-aussi .grille-guides { grid-template-columns: 1fr 1fr; }
	.a-lire-aussi .grille-guides:has(> .carte-guide:only-child) .carte-guide { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .a-lire-aussi .grille-guides { grid-template-columns: 1fr; } }

@media (max-width: 1100px) {
	/* ⛔ correction la plus grave du jugement du 02/10 : "padding: 32px 0"
	   écrasait aussi le padding GAUCHE/DROITE hérité de .conteneur (16 à
	   24 px) en le remettant à 0 — le corps de l'article touchait les deux
	   bords de l'écran à 390. On ne touche plus qu'au haut/bas. */
	.article-mise-en-page { grid-template-columns: 1fr; padding-top: 32px; padding-bottom: 56px; }
	.rail-article { display: none; }
	.sommaire-mobile { display: block; }
	.auteur-bloc { flex-direction: column; align-items: center; text-align: center; margin-top: 48px; }
}

/* ---------- En-tête de rubrique (bento sombre) ---------- */
.entete-rubrique { background: var(--rp-garonne); color: #fff; border-radius: var(--r-bassin); margin: 24px var(--marge) 0; overflow: hidden; }
.entete-rubrique__mise-en-page { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; padding: 48px; }
.entete-rubrique .fil-ariane { color: rgba(255,255,255,.65); }
.entete-rubrique .fil-ariane a { color: rgba(255,255,255,.65); }
.entete-rubrique__titre { font-size: var(--fs-h1); line-height: 1.08; color: #fff; margin-bottom: 14px; }
.entete-rubrique__description { color: rgba(255,255,255,.75); font-size: var(--fs-lead); margin-bottom: 16px; max-width: 460px; }
.entete-rubrique__compteur { font-weight: 600; font-size: var(--fs-small); color: rgba(255,255,255,.65); }
.entete-rubrique__bento { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: 320px; }
.entete-rubrique__photo { position: relative; border-radius: var(--r-photo); overflow: hidden; display: block; }
.entete-rubrique__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.entete-rubrique__photo:hover img { transform: scale(1.04); }
.entete-rubrique__photo--haute { grid-row: span 2; }
.entete-rubrique__photo--seule { grid-row: span 2; grid-column: span 2; }
.entete-rubrique__legende {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px;
	background: linear-gradient(transparent, rgba(14,58,54,.85)); color: #fff; font-size: 13px; font-weight: 600;
}
@media (max-width: 1100px) {
	.entete-rubrique { margin: 16px 16px 0; }
	.entete-rubrique__mise-en-page { grid-template-columns: 1fr; padding: 32px 24px; }
	/* 280 (pas 220) + légende limitée à 2 lignes : à 220px, le texte de la
	   légende remplissait toute la cellule et les 2 photos se confondaient
	   en un seul bloc sombre (correction du 02/10). */
	.entete-rubrique__bento { height: 280px; }
	.entete-rubrique__legende {
		font-size: 12px; line-height: 1.3; padding: 10px 12px;
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	}
}

/* ---------- Grille de rubrique / listes (card-article.php) ---------- */
.grille-rubrique { padding: 48px 0; }
.grille-rubrique__liste {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 36px;
	/* Comble les trous laissés par .carte-article--large (span 2) avec les
	   cartes suivantes au lieu de les laisser vides (jugement du 02/10,
	   réserve « Actualités » : trou à droite sur la 2e rangée). */
	grid-auto-flow: dense;
}
/* Jamais une rangée orpheline : si le compte (hors carte --large) n'est pas
   un multiple de 3, la DERNIÈRE carte s'élargit pour remplir sa rangée. Ne
   s'applique correctement qu'en l'absence de carte --large (cas le plus
   fréquent : pages 2+, author.php, search.php, index.php) ; en page 1 avec
   une carte --large, grid-auto-flow: dense limite déjà les trous visibles. */
.grille-rubrique__liste > .carte-article:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.grille-rubrique__liste > .carte-article:last-child:nth-child(3n+2) { grid-column: span 2; }
.carte-article { background: var(--rp-blanc); border-radius: var(--r-carte); box-shadow: var(--sh-1); overflow: hidden; display: block; transition: transform .2s, box-shadow .2s; }
.carte-article:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.carte-article--large { grid-column: span 2; display: grid; grid-template-columns: 55% 1fr; }
.carte-article__media { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; }
.carte-article--large .carte-article__media { aspect-ratio: auto; height: 100%; }
.carte-article__media img { width: 100%; height: 100%; object-fit: cover; }
.carte-article__pastille {
	position: absolute; left: 14px; top: 14px; background: rgba(255,255,255,.92); color: var(--rp-encre);
	border-radius: var(--r-pilule); padding: 6px 12px; font-size: 12px; font-weight: 600;
}
.carte-article__corps { padding: 18px 18px 20px; display: flex; flex-direction: column; justify-content: center; }
.carte-article__corps h3 { font-size: 18px; margin-bottom: 8px; }
.carte-article--large .carte-article__corps h3 { font-size: 22px; }
.carte-article__extrait { font-size: 14px; color: var(--rp-galet); margin-bottom: 10px; }
.carte-article__meta { font-size: 12px; color: var(--rp-galet); }
.carte-cta { background: var(--rp-pierre); border-radius: var(--r-carte); padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 14px; text-align: center; }
.carte-cta h3 { font-size: 18px; }
.grille-rubrique__plus { text-align: center; }
.grille-rubrique__filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.grille-rubrique__filtres .pilule { background: rgba(255,255,255,.1); color: #fff; }

@media (max-width: 1100px) {
	.grille-rubrique__liste { grid-template-columns: 1fr 1fr; }
	.carte-article--large { grid-column: span 2; grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.grille-rubrique__liste { grid-template-columns: 1fr; }
	.carte-article--large { grid-column: span 1; }
}

/* ---------- Page ville ----------
   Le premier écran (hero) est traité plus haut avec les classes .hero* de
   l'accueil (§ « Premier écran de la page ville »). Ici, uniquement ce qui
   suit le hero : le corps de page. */

/* Pas de padding ici : .ville-corps est toujours posé dans un <section
   class="section …"> qui donne déjà le rythme vertical (sinon double
   padding, bug corrigé le 02/10 — cf. .contact-mise-en-page et .page-vide
   plus bas, même cause). */
.ville-corps { max-width: 720px; margin: 0 auto; font-size: 18px; line-height: 1.7; }
/* line-height explicite : sans lui, l'intertitre sur 2 lignes affichait un
   interligne énorme (jugement du 02/10, "Ce qui abîme une pompe à / Bordeaux"). */
.ville-corps h2 { font-size: var(--fs-h2); line-height: 1.12; margin: 40px 0 18px; }
.ville-corps p { margin-bottom: 18px; }
/* Liens « communes voisines » noyés dans un paragraphe → pilules (jugement du
   02/10). Seuls les liens du corps éditorial sont visés : les cartes de la
   section « Communes voisines » (.communes-voisines__carte) gardent leur
   propre habillage. */
.ville-corps p a:not(.communes-voisines__carte) {
	display: inline-flex; align-items: center; margin: 2px 2px 2px 0; padding: 4px 12px;
	background: var(--rp-chai-pale); color: var(--rp-chai); font-weight: 600; font-size: 15px;
	border-radius: var(--r-pilule); text-decoration: none;
}
.ville-corps p a:not(.communes-voisines__carte):hover { background: var(--rp-chai); color: #fff; }

.communes-voisines { padding: var(--espace-section) 0; }
.communes-voisines__liste { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.communes-voisines__carte { display: block; background: var(--rp-blanc); border-radius: var(--r-carte); box-shadow: var(--sh-1); overflow: hidden; transition: transform .2s; }
.communes-voisines__carte:hover { transform: translateY(-3px); }
.communes-voisines__carte img { width: 100%; height: 96px; object-fit: cover; }
.communes-voisines__carte span { display: block; padding: 10px 12px; font-weight: 600; font-size: 14px; }
@media (max-width: 860px) { .communes-voisines__liste { grid-template-columns: repeat(2, 1fr); } }
.communes-voisines__liste--cote { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.carte-form-pleine-conteneur { max-width: 560px; margin: 0 auto; }
.ville-corps--sans-padding { padding: 0; }

/* ---------- INFOGRAPHIES DU SOCLE (sbs_*, socle-infographies.php) ----------
   socle/socle-infographies.php n'émet AUCUNE couleur ni police : sans
   habillage ici, [sbs_frise] (les étapes de sécurité des pages ville) et les
   FAQ brutes s'affichaient en texte collé, "Étape 1Coupez l'alimentation…"
   (erreur 4 du jugement du 02/10). On habille chaque classe sbs_* au niveau
   du design du site, pour les pages ville, article et actualité. */

/* [sbs_frise] → sbs-frise/sbs-etape : la frise d'étapes "Comment ça se
   passe" / sécurité, en cartes numérotées côte à côte (jamais de texte
   brut collé). */
sbs-frise {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;
	margin: 32px 0;
}
.sbs_frise_titre { display: block; font-family: var(--ff-titre); font-weight: 700; font-size: var(--fs-h3); margin-bottom: 4px; grid-column: 1 / -1; }
sbs-etape {
	display: flex; flex-direction: column; gap: 6px; padding: 20px;
	background: var(--rp-blanc); border: 1px solid var(--rp-filet); border-radius: var(--r-carte); box-shadow: var(--sh-1);
}
.sbs_etape_date {
	order: -1; font-family: var(--ff-titre); font-weight: 800; color: var(--rp-chai); font-size: 36px; line-height: 1;
}
.sbs_etape_titre { font-family: var(--ff-titre); font-weight: 700; font-size: 17px; }
.sbs_etape_desc { color: var(--rp-galet); font-size: 14px; }
@media (max-width: 480px) { sbs-frise { grid-template-columns: 1fr; } }

/* [sbs_tarifs] → sbs-tarifs/sbs-tarif : grille tarifaire, barre proportionnelle. */
sbs-tarifs { display: block; background: var(--rp-calcaire); border-radius: var(--r-carte); padding: 24px 24px 18px; margin: 28px 0; }
.sbs_tarifs_titre { display: block; font-family: var(--ff-titre); font-weight: 700; font-size: 17px; margin-bottom: 10px; }
sbs-tarif { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--rp-filet); }
sbs-tarif:last-of-type { border-bottom: 0; }
.sbs_tarif_libelle { flex: 1; font-weight: 600; font-size: 15px; }
.sbs_tarif_barre { width: 160px; height: 8px; accent-color: var(--rp-chai); }
.sbs_tarifs_notes { display: block; margin-top: 10px; color: var(--rp-galet); font-size: 13px; }

/* [sbs_lieu] → sbs-lieu : fiche-lieu (adresse, accès, carte). */
sbs-lieu { display: block; background: var(--rp-calcaire); border-radius: var(--r-carte); padding: 20px 22px; margin: 28px 0; }
.sbs_lieu_nom { display: block; font-family: var(--ff-titre); font-weight: 700; font-size: 17px; margin-bottom: 4px; }
.sbs_lieu_adresse { display: block; color: var(--rp-galet); font-size: 14px; font-style: normal; margin-bottom: 4px; }
.sbs_lieu_acces { display: block; color: var(--rp-galet); font-size: 13px; }
.sbs_lieu_carte { display: inline-flex; align-items: center; gap: 6px; color: var(--rp-chai); font-weight: 600; font-size: 14px; margin-top: 8px; }
.sbs_lieu_carte:hover { color: var(--rp-chai-survol); }
.sbs_icone_repere { width: 18px; height: 18px; fill: currentColor; }

/* [sbs_jauges] → sbs-jauges/sbs-jauge : chiffres-clés, compteur animé (JS du socle). */
sbs-jauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 28px 0; }
.sbs_jauges_titre { display: block; font-family: var(--ff-titre); font-weight: 700; font-size: 17px; grid-column: 1 / -1; margin-bottom: 4px; }
sbs-jauge { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 20px 14px; background: var(--rp-chai-pale); border-radius: var(--r-carte); }
.sbs_jauge_valeur { font-family: var(--ff-titre); font-weight: 800; color: var(--rp-chai); font-size: 36px; }
.sbs_jauge_unite { font-family: var(--ff-titre); font-weight: 700; color: var(--rp-chai); font-size: 14px; }
.sbs_jauge_libelle { color: var(--rp-galet); font-size: 13px; }

/* Note de source (toutes familles) : discrète, jamais un lien externe. */
.sbs_source { display: block; margin-top: 10px; color: var(--rp-galet); font-size: 12px; }

/* ---------- Contact ---------- */
.contact-mise-en-page { display: grid; grid-template-columns: 1fr 480px; gap: 48px; align-items: start; }
.contact-info h1 { font-size: var(--fs-h1); margin-bottom: 18px; }
.contact-info p { color: var(--rp-galet); margin-bottom: 18px; font-size: 17px; }
.contact-info__etapes { list-style: none; margin: 24px 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.contact-info__etapes li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.contact-info__etapes .galet-check { margin-top: 2px; }
.contact-faq { margin-top: 32px; }
.contact-carte { background: var(--rp-miroir); border-radius: var(--r-bassin); padding: 32px; }
.contact-info__photo { margin: 24px 0; }
.contact-info__photo img { border-radius: var(--r-photo); width: 100%; height: 220px; object-fit: cover; }
@media (max-width: 1100px) {
	/* Le formulaire doit arriver AVANT le texte et la FAQ à 390 (premier
	   écran, jugement du 02/10) : le DOM garde l'ordre texte→formulaire pour
	   le SEO/la lecture sans CSS, mais on réordonne visuellement en colonne. */
	.contact-mise-en-page { grid-template-columns: 1fr; display: flex; flex-direction: column; }
	.contact-carte { order: -1; }
}

/* ---------- Qui sommes-nous ---------- */
.apropos-hero { padding: 48px 0; }
.apropos-hero__mise-en-page { display: grid; grid-template-columns: 1fr 480px; gap: 40px; align-items: center; }
.apropos-hero__photo { border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; overflow: hidden; box-shadow: var(--sh-2); aspect-ratio: 1/0.9; }
.apropos-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.apropos-hero h1 { font-size: var(--fs-h1); margin-bottom: 18px; }
.apropos-hero p { color: var(--rp-galet); font-size: var(--fs-lead); margin-bottom: 20px; max-width: 520px; }
@media (max-width: 1100px) { .apropos-hero__mise-en-page { grid-template-columns: 1fr; } }

/* Carte des communes « mini » (page ville, qui sommes-nous) : le tracé plein-
   métropole garde son aspect-ratio, plus haut qu'un écran dans une colonne
   étroite (bande "plus d'un écran", jugement du 02/10). On plafonne la
   hauteur du SVG, jamais la largeur de la variante "grande" de l'accueil
   (carte-communes--grande, hors de notre périmètre). */
.carte-communes--mini { display: flex; flex-direction: column; align-items: center; width: 100%; }
/* La mini-carte ne rendait que 159 px dans un cadre d'environ 600 px (le SVG
   racine, sans width/height attribut, retombe sur sa taille intrinsèque par
   défaut quand on lui laisse "width:auto") : zones de commune bien trop
   petites pour le doigt (B-PL-01 / I-PL-12, constat du 02/10). Le SVG prend
   maintenant toute la largeur de son cadre ; la hauteur suit l'aspect-ratio
   du viewBox et reste plafonnée par max-height. */
.carte-communes--mini .carte-communes__svg { display: block; width: 100%; height: auto; max-height: 420px; max-width: 100%; }
.zone-desservie__carte--mini { max-height: 560px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
@media (max-width: 640px) {
	/* À 390, le cadre est étroit (≈ 358 px de large) : laisser la carte
	   grandir davantage en hauteur (jusqu'à 360 px) rend chaque commune
	   nettement plus grande et touchable au doigt. */
	.carte-communes--mini .carte-communes__svg { max-height: 360px; }
}

.equipe-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.equipe-carte { background: var(--rp-blanc); border-radius: var(--r-carte); box-shadow: var(--sh-1); padding: 24px; text-align: center; }
.equipe-carte img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px; border: 3px solid var(--rp-chai-pale); }
.equipe-carte h3 { font-size: 18px; margin-bottom: 4px; }
.equipe-carte__role { font-size: 13px; color: var(--rp-chai); font-weight: 600; margin-bottom: 10px; }
.equipe-carte p { font-size: 14px; color: var(--rp-galet); }
@media (max-width: 640px) { .equipe-grille { grid-template-columns: 1fr; } }

/* ---------- Auteur (archive) ---------- */
.entete-auteur { background: var(--rp-calcaire); padding: 48px 0; text-align: center; }
/* Photo agrandie (jugement du 02/10 : "la photo de l'autrice est petite"). */
.entete-auteur img { width: 148px; height: 148px; border-radius: 50%; object-fit: cover; margin: 0 auto 20px; border: 4px solid var(--rp-chai-pale); }
@media (max-width: 640px) { .entete-auteur img { width: 112px; height: 112px; } }
.entete-auteur h1 { font-size: var(--fs-h1); margin-bottom: 8px; }
.entete-auteur p { color: var(--rp-galet); max-width: 560px; margin: 0 auto; }
.entete-auteur__role { color: var(--rp-chai); font-weight: 600; margin-bottom: 12px; }
.page-vide__logo { margin: 0 auto 24px; }
.grille-rubrique__liste--haut { margin-top: 32px; }

/* ---------- Recherche / 404 ---------- */
.page-vide { text-align: center; }
.page-vide h1 { font-size: var(--fs-h1); margin-bottom: 16px; }
.page-vide p { color: var(--rp-galet); margin-bottom: 24px; }
.page-vide__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.recherche-404 { max-width: 420px; margin: 0 auto 28px; display: flex; gap: 8px; }
.recherche-404 input { flex: 1; height: 48px; border: 1.5px solid var(--rp-filet); border-radius: var(--r-champ); padding: 0 14px; font-family: var(--ff-corps); font-size: 15px; }

/* ---------- Pages génériques (mentions, confidentialité) ----------
   ⛔ "padding: Npx 0" ne posait JAMAIS de marge gauche/droite (0 implicite,
   même à 1440 où max-width:760px + margin:auto masquait le bug par le vide
   du viewport) : à 390, le texte touchait le bord gauche (jugement du
   02/10, page Mentions). On ajoute le padding horizontal manquant. */
.page-generique { max-width: 760px; margin: 0 auto; padding: var(--espace-section) var(--marge); }
.page-generique h1 { font-size: var(--fs-h1); margin-bottom: 24px; }
.page-generique .article-corps { font-size: 16px; }
.page-generique .article-corps h2 { font-size: var(--fs-h3); }

/* Reprise orchestrateur : la vignette déborde VRAIMENT de la photo (pile), le cadre ne la coupe plus */
.entete-article__media { overflow: visible; }
.entete-article__media > img { border-radius: var(--r-photo); }
.entete-article__vignette { left: -48px; bottom: -32px; border: 6px solid var(--rp-calcaire); box-shadow: var(--sh-3); border-radius: 22px; overflow: hidden; }
@media (max-width: 1023px) { .entete-article__vignette { left: 16px; bottom: -24px; } }
/* Article : colonne alignée sur le titre, gouttière serrée avec la barre latérale (R-1779) */
.article-mise-en-page { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; }
.article-principal { max-width: none; }
.article-corps h2, .article-corps h3 { line-height: 1.15; }
/* Frise d'étapes : toutes les étapes sur une rangée quand la place le permet (pas d'étape orpheline) */
sbs-frise { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }

/* ---------- En-tête d'article v2 (orchestrateur, après juge n°2 : plus jumeau du site frère) ----------
   Bassin Garonne (même famille que le premier écran de l'accueil) avec le titre en clair,
   puis la photo à la une en GRAND FORMAT panoramique qui chevauche le bas du bassin ;
   la vignette déborde du coin BAS DROIT. */
.entete-article--bassin { padding: 12px 12px 0; margin-bottom: 8px; }
.entete-article__bassin { background: var(--rp-garonne); color: #fff; border-radius: var(--r-bassin); padding: 40px 0 180px; position: relative; overflow: hidden; }
.entete-article__bassin::after { content: ''; position: absolute; right: -140px; top: -180px; width: 560px; height: 460px; background: #154943; border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; pointer-events: none; }
.entete-article__bassin .conteneur { position: relative; z-index: 1; }
.entete-article__ariane, .entete-article__ariane a { color: rgba(255,255,255,.72); }
.entete-article__ariane a:hover { color: #fff; }
.entete-article--bassin .entete-article__col { max-width: 920px; margin-top: 18px; }
.entete-article--bassin h1 { color: #F7F9F6; font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -0.02em; margin: 14px 0 16px; text-wrap: balance; }
.entete-article--bassin .entete-article__pastille { background: rgba(234,220,190,.16); color: var(--rp-pierre); }
.entete-article--bassin .entete-article__chapo { color: rgba(255,255,255,.80); max-width: 720px; }
.entete-article--bassin .article-meta, .entete-article--bassin .article-meta a { color: rgba(255,255,255,.85); }
.entete-article--bassin .entete-article__galet { display: none; }
/* Hauteur plafonnée à 380 px (au lieu de 520) : la photo repoussait tout le
   début de l'article hors écran, titre et chapô compris, à 1440 comme à 390
   (B-ART-09, constat du 02/10). Le ratio 21/9 reste la cible ; l'image
   recadre (object-fit: cover) quand la largeur réelle l'oblige à être plus
   courte que ce ratio. */
.entete-article--bassin .entete-article__media { position: relative; margin-top: -150px; aspect-ratio: 21 / 9; max-height: 380px; width: 100%; border-radius: 32px; overflow: visible; box-shadow: var(--sh-3); z-index: 2; }
.entete-article--bassin .entete-article__media > img { width: 100%; height: 100%; object-fit: cover; border-radius: 32px; display: block; }
.entete-article--bassin .entete-article__vignette { left: auto; right: -20px; bottom: -36px; width: 220px; aspect-ratio: 4 / 3; border: 6px solid var(--rp-calcaire); border-radius: 24px; }
@media (max-width: 1023px) {
	.entete-article--bassin { padding: 8px 8px 0; }
	.entete-article__bassin { border-radius: 28px; padding: 24px 0 96px; }
	/* 220 px max à 390 (B-ART-09) : même logique qu'à 1440, le texte ne doit
	   plus démarrer sous la ligne de flottaison. */
	.entete-article--bassin .entete-article__media { margin-top: -72px; aspect-ratio: 16 / 10; max-height: 220px; border-radius: 22px; }
	.entete-article--bassin .entete-article__media > img { border-radius: 22px; }
	.entete-article--bassin .entete-article__vignette { width: 120px; right: 10px; bottom: -24px; border-width: 4px; border-radius: 16px; }
}
/* Mobile : UNE colonne (la règle de grille ajoutée plus haut ne vaut qu'au-delà de 1024 px) */
@media (max-width: 1023px) {
	.article-mise-en-page { grid-template-columns: minmax(0, 1fr) !important; gap: 32px; }
}
/* « Dans la même rubrique » : jamais une carte seule étirée */
.a-lire-aussi .carte-guide:first-child { grid-row: auto; }
.a-lire-aussi .carte-guide:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: 360px minmax(0, 1fr); max-width: 880px; }
.a-lire-aussi .carte-guide:only-child .carte-guide__media { aspect-ratio: auto; height: 100%; min-height: 200px; }
@media (max-width: 700px) { .a-lire-aussi .carte-guide:only-child { grid-template-columns: 1fr; } }
/* FAQ en cartes DÉPLIANTES (details/summary, R-0032 + R-1783) */
.faq-galet__carte { display: block; }
.faq-galet__carte > summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 12px; }
.faq-galet__carte > summary::-webkit-details-marker { display: none; }
.faq-galet__carte .faq-galet__q { flex: 1; margin: 0; }
.faq-galet__chevron { flex-shrink: 0; width: 28px; height: 28px; border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; background: var(--rp-chai-pale); position: relative; transition: transform .25s ease; }
.faq-galet__chevron::before { content: ''; position: absolute; left: 50%; top: 45%; width: 8px; height: 8px; border-right: 2px solid var(--rp-chai); border-bottom: 2px solid var(--rp-chai); transform: translate(-50%, -50%) rotate(45deg); }
.faq-galet__carte[open] .faq-galet__chevron { transform: rotate(180deg); }
.faq-galet__carte[open] { background: var(--rp-blanc); box-shadow: var(--sh-2); }
.faq-galet__carte .faq-galet__r { margin-top: 10px; }
.faq-galet__carte > summary:focus-visible { outline: 3px solid rgba(11,125,86,.35); outline-offset: 4px; border-radius: 8px; }
.faq-accueil__liste { display: block; }
.faq-accueil .faq-galet { max-width: none; }
.faq-galet__grille { align-items: start; }
.signature-page { display: flex; align-items: center; gap: 12px; margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--rp-filet); font-size: 14px; color: var(--rp-galet); }
.signature-page img { border-radius: 50%; width: 40px; height: 40px; }
.signature-page__auteur { color: var(--rp-encre); font-weight: 600; }

/* ---------- Corrections /peaufiner, lot 2 (constats du 02/10/2026) ---------- */

/* Carte « large » (6e carte d'une grille impaire) : à 390, "height:100%"
   dans une cellule grid dont la hauteur n'est fixée par rien laissait un
   grand vide blanc entre la photo (163 px) et le titre (hors grille,
   rubrique Actualités). On repasse en une colonne normale, avec un
   aspect-ratio explicite au lieu d'une hauteur relative. */
@media (max-width: 640px) {
	.carte-article--large { grid-template-columns: 1fr; }
	.carte-article--large .carte-article__media { aspect-ratio: 16 / 10; height: auto; }
}

/* Grille d'archive (auteur, recherche) : jamais la dernière carte étirée en
   pleine largeur ou en double largeur (B-ANX-01, constat du 02/10) — cartes
   régulières, même taille, quel que soit le nombre d'articles. */
.grille-rubrique__liste--auteur > .carte-article:last-child:nth-child(3n+1),
.grille-rubrique__liste--auteur > .carte-article:last-child:nth-child(3n+2) {
	grid-column: auto;
}

/* Date dans la légende du bandeau de rubrique (B-CAT-08/B-DIS-02, constat du
   02/10) : le visiteur ne voyait qu'un titre, jamais quand l'article a été
   publié. On ne touche PAS à `display` sur .entete-rubrique__legende
   elle-même : à 390, elle garde son -webkit-line-clamp (règle déjà posée,
   plus haut dans ce fichier) qui empêche le titre d'être coupé à mi-ligne. */
.entete-rubrique__legende-titre { display: block; }
.entete-rubrique__legende-date { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: rgba(255,255,255,.72); }

/* Titre de section centré (page de recherche, portes de secours) */
.section__titre--centre { text-align: center; }

/* Petit crédit photo discret, réutilisable (qui-sommes-nous, contact) :
   jamais incrusté sur la photo, jamais dans le seul attribut alt invisible
   à l'écran (I-LEG-03, constat du 02/10). */
.credit-photo { display: block; font-size: 11px; color: var(--rp-galet); margin-top: 8px; text-align: center; }

/* Titre accrocheur du formulaire de bas de page (page ville, qui sommes-nous,
   article) : le formulaire lui-même (template-parts/formulaire.php) n'a
   qu'un titre générique fixe (« Votre demande de réparation »), jamais
   propre à la page ni à la commune (B-MK-14/I-ART-01, constat du 02/10). */
.avant-pied__titre { text-align: center; font-size: var(--fs-h2); line-height: 1.15; color: #fff; margin: 0 0 24px; }
.avant-pied__titre--clair { color: var(--rp-encre); }

/* Crédit photo du premier écran des pages ville (hero-ville.php) : jamais
   incrusté sur la photo (B-PL-17, constat du 02/10). Le conteneur reprend la
   place de l'ancienne figure dans la grille à 2 colonnes ; la photo garde
   exactement le même gabarit (app.css, .hero-ville__photo). */
.hero-ville__photo-bloc { grid-column: 2; justify-self: end; width: 100%; }
.hero-ville__credit { margin: 8px 2px 0; font-size: 11px; line-height: 1.3; text-align: right; color: rgba(255,255,255,.58); }
@media (max-width: 1100px) {
	.hero-ville__photo-bloc { grid-column: 1; order: -1; justify-self: stretch; }
	.hero-ville__credit { text-align: left; }
}

/* Qui sommes-nous : même principe pour la photo d'atelier (crédit sous la
   photo ronde, jamais coupé par son overflow:hidden). */
.apropos-hero__photo-bloc { grid-column: 2; }
.apropos-hero__photo-bloc .credit-photo { text-align: right; }
@media (max-width: 1100px) { .apropos-hero__photo-bloc { grid-column: 1; } }
/* Rubrique de 1 à 3 articles : cartes égales côte à côte, jamais une carte large + une carte seule */
.grille-rubrique__liste:not(:has(> :nth-child(4))) { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille-rubrique__liste:not(:has(> :nth-child(4))) .carte-article--large { grid-column: auto; grid-row: auto; display: flex; flex-direction: column; }
.grille-rubrique__liste:not(:has(> :nth-child(4))) .carte-article__media { aspect-ratio: 16 / 10; }
.entete-rubrique__bento--deco .entete-rubrique__photo { pointer-events: none; }
/* Mobile 390×700 : vignette de la commune à côté du titre (prioritaire sur la règle ci-dessus) */
@media (max-width: 600px) {
	.hero-ville__haut { grid-template-columns: minmax(0, 1fr) 84px; align-items: start; gap: 6px 12px; }
	.hero-ville__photo-bloc { grid-column: 2; grid-row: 1; order: 0; width: 84px; justify-self: end; }
	.hero-ville__photo { height: 84px; width: 84px; aspect-ratio: 1; border-radius: 22px 34px 22px 30px; }
	.hero-ville__credit { display: none; }
}