/* ==========================================================================
   dps-plateau — pages intérieures (passe B)
   Article (fiche repère à cheval sur la photo), rubrique (bento + compteur),
   auteur, pages légales, à propos / contact (branding), plan 7 jours, 404,
   recherche + habillage du contenu d'article (infographies, FAQ, encadrés,
   tableaux, liens). Mode CLAIR uniquement, contraste ≥ 4,5:1 partout.
   ========================================================================== */

/* ===================== 1. En-tête d'article (ENTETE fiche repère) ===================== */

.dps-p-fil {
	font-family: var(--dps-chif); font-weight: 600; font-size: 13px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--dps-lien); display: flex; flex-wrap: wrap;
	gap: 8px; align-items: center; margin: 24px 0 24px;
}
.dps-p-fil a { color: var(--dps-lien); }
.dps-p-fil a:hover { text-decoration: underline; }
.dps-p-fil span[aria-hidden] { opacity: .55; letter-spacing: 0; text-transform: none; }
.dps-p-fil > span:not([aria-hidden]) { color: var(--dps-texte-2); }

.dps-p-entete { background: var(--dps-fond); padding-top: 8px; }
/* Passe D (03/10) : colonne fiche élargie (4fr→5fr) — avec les lignes Rubrique/Lecture/
   Sources/Mis à jour, 4fr rendait des valeurs à droite trop comprimées. */
.dps-p-entete__grille { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 40px; align-items: end; }
.dps-p-entete__pastille { margin-bottom: 18px; }
.dps-p-entete__titre { font-family: var(--dps-titre); font-weight: 300; font-size: 52px; line-height: 1.12; margin: 0 0 18px; color: var(--dps-encre); }
.dps-p-entete__chapo { font-size: 20px; line-height: 1.5; color: var(--dps-texte-2); max-width: 60ch; margin: 0 0 24px; }

.dps-p-signature { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding-bottom: 28px; }
.dps-p-signature__bloc { display: flex; flex-direction: column; gap: 4px; }
.dps-p-signature__kicker { font-family: var(--dps-chif); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dps-texte-2); }
.dps-p-signature__auteur { display: flex; align-items: center; gap: 10px; font-family: var(--dps-chif); font-weight: 600; font-size: 14px; color: var(--dps-encre); }
.dps-p-signature__photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--dps-mais); }
.dps-p-signature__maj { font-size: 13px; color: var(--dps-texte-2); margin-left: auto; }

/* 03/10 (DEFAUTS-V1 #11) : la photo (.dps-p-photo-wrap) remontait de -96px sur TOUTE la
   largeur de l'en-tête et passait devant (z-index:1 contre aucun z-index côté grille) — elle
   cachait entièrement la signature « Écrit par » et la fiche repère en dessous. La DA veut
   l'inverse : seule la fiche repère descend et chevauche le coin haut droit de la photo,
   PAR-DESSUS elle. On déplace le chevauchement sur la fiche (translateY + z-index supérieur
   à la photo) et on laisse la photo démarrer sans remonter sur la signature. */
.dps-p-entete__fiche { position: relative; z-index: 2; }
/* 04/10 (juge visuel) : 96px de décalage laissait un grand vide au-dessus de la fiche en
   1920/1440 (la colonne de titre est plus courte que celle-ci ne l'attendait) — réduit à 48px :
   la fiche reste à cheval sur la photo (effet voulu, approuvé par le juge) mais le vide
   au-dessus se referme de moitié. */
.dps-p-fiche { background: var(--dps-blanc); border-radius: 20px; border-top: 6px solid var(--dps-lien); box-shadow: var(--dps-ombre-2); padding: 24px; position: relative; overflow: hidden; transform: translateY(48px); }
.dps-p-fiche::after {
	content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0;
	border-style: solid; border-width: 0 28px 28px 0; border-color: transparent var(--dps-mais) transparent transparent;
}
.dps-p-fiche__titre {
	font-family: var(--dps-chif); font-weight: 700; font-size: 11px; letter-spacing: .08em;
	text-transform: uppercase; color: var(--dps-lien); margin: 0 0 14px;
}
.dps-p-fiche ul { display: flex; flex-direction: column; gap: 10px; }
.dps-p-fiche li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; border-bottom: 1px solid var(--dps-filet); padding-bottom: 8px; }
.dps-p-fiche li:last-child { border-bottom: none; padding-bottom: 0; }
.dps-p-fiche li span:first-child { color: var(--dps-texte-2); }
.dps-p-fiche li span:last-child { font-family: var(--dps-chif); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; text-align: right; color: var(--dps-encre); }

.dps-p-photo-wrap { margin-top: 24px; position: relative; z-index: 1; padding-bottom: 32px; }
.dps-p-photo { border-radius: 28px; overflow: hidden; box-shadow: var(--dps-ombre-1); height: min(480px, 46vh); }
/* object-position recentré vers le haut (DEFAUTS-V1 #11, « photo recadrée trop bas ») : la
   boîte est large et basse (pleine largeur, hauteur plafonnée) — un centrage 50/50 coupe
   trop le haut des photos verticales (sujet posé en haut du cadre, courant en cuisine). */
.dps-p-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
.dps-p-photo__legende { font-size: 13px; color: var(--dps-texte-2); margin: 10px 0 0; }

@media (min-width: 1680px) {
	.dps-p-entete__titre { font-size: 60px; }
}

@media (max-width: 1100px) {
	.dps-p-entete__grille { grid-template-columns: 1fr; align-items: stretch; }
	.dps-p-entete__fiche { order: 3; }
	.dps-p-fiche { transform: none; }
	.dps-p-fiche ul { flex-direction: row; flex-wrap: wrap; gap: 8px; }
	.dps-p-fiche li { flex: none; border-bottom: none; background: var(--dps-fond); border-radius: 999px; padding: 6px 12px; gap: 6px; }
	.dps-p-fiche::after { display: none; }
	.dps-p-photo-wrap { margin-top: 24px; }
	.dps-p-signature__maj { margin-left: 0; flex-basis: 100%; }
}

@media (max-width: 640px) {
	.dps-p-entete__titre { font-size: 32px; }
	.dps-p-entete__chapo { font-size: 17px; }
	.dps-p-photo { border-radius: 20px; }
}

/* ===================== 2. « Toujours dans <rubrique> » ===================== */

.dps-p-suite { padding: 64px 0 88px; background: var(--dps-fond); }
.dps-p-suite__kicker { font-family: var(--dps-chif); font-weight: 700; font-size: 20px; margin: 0 0 24px; }
.dps-p-suite__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }

.dps-p-commentaires { padding-bottom: 64px; }

@media (max-width: 640px) {
	.dps-p-suite { padding: 48px 0 64px; }
}

/* ===================== 3. Contenu d'article : infographies, FAQ, encadrés, tableaux ===================== */

/* --- Rythme du corps (jugement visuel 04/10 : murs de texte 3-4000px sans bloc visuel) ---
   inc/article-rythme.php enveloppe chaque section <h2>…</h2> dans <section class="dps-panel
   dps-panel--a|b"> en alternance — ici, uniquement l'habillage : fond alterné, intertitre
   numéroté (compteur CSS, jamais un chiffre inventé en PHP). */
.sbt-article-corps { counter-reset: dps-panel; }
.dps-panel { counter-increment: dps-panel; padding: 36px 28px; margin: 0 0 8px; border-radius: 20px; }
.dps-panel--b { background: var(--dps-fond); }
.dps-panel > h2 {
	font-size: 28px; line-height: 1.2; margin: 0 0 20px; padding-top: 44px; position: relative;
}
.dps-panel > h2::before {
	content: counter(dps-panel, decimal-leading-zero); position: absolute; top: 0; left: 0;
	font-family: var(--dps-chif); font-weight: 700; font-size: 13px; letter-spacing: .08em;
	color: var(--dps-lien); background: var(--dps-pois); border-radius: 999px; padding: 5px 12px;
}
.dps-panel > h3 { font-size: 20px; margin-top: 1.6em; }
.dps-panel:first-of-type { margin-top: 0; }

@media (max-width: 760px) {
	.dps-panel { padding: 24px 16px; }
}

/* 04/10 (juge visuel, régression) : le sommaire de la barre latérale est repassé « ouvert » par
   défaut (sinon la capture le lit comme un cadre vide). Pour qu'un article à 8-10 titres ne
   fasse pas déborder la colonne (formulaire + sommaire) plus bas que l'écran, le plafond est
   posé ICI, sur la LISTE elle-même — jamais sur .sbt-rail (le conteneur sticky, garde-fou de
   partial-sidebar.php : aucun overflow-y/max-height dessus, intact). Au-delà de ~7 entrées, la
   liste défile DANS SA PROPRE carte, le sommaire reste visible et la colonne reste courte. */
.sbt-sommaire ol { max-height: 220px; overflow-y: auto; }

/* RESET 05/10 (BE-0023) : le sommaire remonte en CARTE SOIGNÉE EN TÊTE du corps, visible à
   TOUTE largeur (avant : visible seulement <1080px, et dupliqué dans la barre latérale — cf.
   single.php qui ne passe plus $sbt_sommaire_html au bloc figé partial-sidebar.php). La
   barre latérale redevient le formulaire SEUL, plus courte que l'écran, gouttière resserrée. */
.sbt-sommaire-mobile { display: block; margin: 0 0 32px; }
.sbt-sommaire-mobile .sbt-sommaire {
	background: var(--dps-blanc); border: none; border-top: 6px solid var(--dps-douce);
	border-radius: 20px; padding: 22px 26px; box-shadow: var(--dps-ombre-1);
}
.sbt-sommaire-mobile .sbt-sommaire-titre { font-family: var(--dps-chif); font-weight: 700; font-size: 15px; color: var(--dps-encre); }
.sbt-sommaire-mobile .sbt-sommaire ol { max-height: none; overflow: visible; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 28px; }
@media (max-width: 760px) {
	.sbt-sommaire-mobile .sbt-sommaire ol { grid-template-columns: 1fr; }
}
/* Gouttière resserrée entre le texte et le rail (était 48px, hérité d'un token global) :
   le rail ne porte plus que le formulaire, il n'a plus besoin d'autant d'air. */
.sbt-article-mise-en-page { column-gap: 32px; }
.sbt-rail { gap: 16px; }

/* 04/10 passe 2 : secours du monogramme de marque (functions.php, pre_get_avatar_data) quand
   l'auteur ne résout pas — même rond/même filet que les vrais portraits, jamais la silhouette
   WordPress grise. */
.dps-avatar--marque { object-fit: contain; background: var(--dps-pois); padding: 4px; }

.sbt-article-corps a { color: var(--dps-lien); text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in srgb, var(--dps-lien) 55%, transparent); font-weight: 600; }
.sbt-article-corps a:hover { text-decoration-color: var(--dps-lien); }

/* 04/10 — le scroll horizontal vit maintenant sur .dps-table-scroll (le <table> est enveloppé
   par functions.php, dps_table_scroll_wrap) : chk_rendu_page.sh ne reconnaît un débordement de
   tableau comme « valide » que si c'est le PARENT du <table> qui porte overflow-x:auto. */
/* 04/10 passe 2 : techniquement défilant (chk_rendu_page.sh est vert dessus), mais sur une
   CAPTURE STATIQUE un cadre qui défile ressemble exactement à un tableau coupé — rien ne
   signale au visiteur (ni au juge) qu'il peut faire glisser. Ajout d'un dégradé de fondu sur le
   bord droit (visible tant qu'il reste du contenu cadré) et d'une barre de défilement peinte en
   dur (jamais la fine barre système, invisible sur beaucoup de captures/OS). */
.dps-table-scroll {
	overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.8em 0;
	border: 1px solid var(--dps-filet); border-radius: 14px; position: relative;
	scrollbar-color: var(--dps-lien) var(--dps-pois); scrollbar-width: auto;
}
.dps-table-scroll::-webkit-scrollbar { height: 10px; }
.dps-table-scroll::-webkit-scrollbar-track { background: var(--dps-pois); }
.dps-table-scroll::-webkit-scrollbar-thumb { background: var(--dps-lien); border-radius: 999px; }
.dps-table-scroll-fondu {
	position: absolute; top: 0; right: 0; bottom: 10px; width: 36px; pointer-events: none;
	background: linear-gradient(to right, transparent, rgba(255,255,255,.95));
	border-radius: 0 14px 14px 0; opacity: 0; transition: opacity .2s ease;
}
.dps-table-scroll.est-defilable .dps-table-scroll-fondu { opacity: 1; }
.sbt-article-corps table { width: 100%; border-collapse: collapse; margin: 0; }
.sbt-article-corps table th, .sbt-article-corps table td { padding: 10px 14px; border-bottom: 1px solid var(--dps-filet); font-size: 15px; white-space: nowrap; }
.sbt-article-corps table thead th { background: var(--dps-pois); font-family: var(--dps-chif); font-weight: 700; text-align: left; }
.sbt-article-corps table tbody tr:last-child td { border-bottom: none; }

.sbt-article-corps figure.infographie,
.sbt-article-corps figure { margin: 2em 0; }
.sbt-article-corps figure svg { width: 100%; height: auto; }
.sbt-article-corps figure figcaption { font-size: 13px; color: var(--dps-texte-2); margin-top: 8px; text-align: center; }

/* RESET 05/10 (jugement visuel passe 3) — les agents de contenu livrent
   <figure class="dps-points"><div class="dps-point">… (grille de points tirée du texte,
   balisage figure/div depuis le 05/10, cf. CONTRAT-BLOCS-ARTICLE.md) et <aside
   class="dps-chiffre"> (chiffre déjà sourcé). On cible UNIQUEMENT les classes, jamais le nom
   de balise. Avant : 3 colonnes dans une colonne de lecture de 700px = cartes de 170-220px,
   8 mots/ligne, plus dures à lire qu'un paragraphe (WOW 5,5/10). Après : 2 cartes LARGES à
   1440 (chacune ~340px, le double), fond teinté alterné, repère rond, titre fort, hauteur
   plafonnée à 320px (line-clamp en secours sur un texte très long) ; 1 colonne pleine largeur
   à 390 ; jamais de rangée incomplète (dernière carte seule ⇒ pleine largeur). Habillage
   THÈME uniquement, aucun texte ajouté ni retiré ici. */
.dps-points {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
	margin: 2em 0; counter-reset: dps-point;
}
/* Dernière carte seule sur sa rangée (nombre de points impair) : jamais isolée, elle prend
   toute la largeur plutôt que de laisser une case vide à côté (règle « jamais d'orpheline »). */
.dps-points > .dps-point:nth-child(odd):last-child { grid-column: 1 / -1; }
.dps-point {
	counter-increment: dps-point; border-radius: 20px; padding: 26px 24px 22px;
	position: relative; display: flex; flex-direction: column; justify-content: flex-start;
	min-height: 180px; max-height: 320px; overflow: hidden; box-shadow: var(--dps-ombre-1);
}
/* Fond teinté ALTERNÉ (jamais la même carte grise répétée). */
.dps-point:nth-child(odd)  { background: var(--dps-fond); border: 1px solid var(--dps-filet); }
.dps-point:nth-child(even) { background: var(--dps-pois); border: 1px solid transparent; }
.dps-point > h3 {
	font-family: var(--dps-chif); font-weight: 700; font-size: 19px; line-height: 1.25;
	margin: 0 0 10px; padding-top: 42px; position: relative; color: var(--dps-encre);
}
/* Repère rond (numéro ou simple pastille) — plus grand et plus contrasté qu'avant (pilule
   grise sur fond gris, peu visible), posé en médaillon plein. */
.dps-point > h3::before {
	content: counter(dps-point, decimal-leading-zero); position: absolute; top: 0; left: 0;
	font-family: var(--dps-chif); font-weight: 800; font-size: 14px; letter-spacing: .02em;
	color: var(--dps-blanc); background: var(--dps-lien); border-radius: 50%;
	width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
	box-shadow: var(--dps-ombre-1);
}
/* Titre FORT (gras, pas la couleur douce du texte courant) + corps en encre, jamais en gris
   clair délavé (retour du jugement : « texte courant en noir, pas en gris dans les cartes »).
   Le line-clamp est un FILET DE SÉCURITÉ sur un point inhabituellement long : il garantit le
   plafond de 320px sans jamais réécrire ni raccourcir le texte lui-même. */
.dps-point > p {
	margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--dps-encre);
	display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}

/* aside.dps-chiffre (balise, pas juste la classe) : app.css définit déjà un `.dps-chiffre`
   générique (police des compteurs du hero/bento) — qualifié par la balise pour ne jamais
   déborder sur ces autres usages du même nom de classe. RESET 05/10 : chiffre plus grand,
   pleine largeur, filet de couleur pour qu'il se voie comme un vrai repère, pas une boîte
   grise de plus. */
aside.dps-chiffre {
	display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
	background: var(--dps-pois); border-radius: 20px; padding: 26px 28px; margin: 2em 0;
	border-left: 6px solid var(--dps-pic);
}
aside.dps-chiffre strong {
	font-family: var(--dps-chif); font-weight: 800; font-size: 56px; line-height: 1;
	color: var(--dps-pic); flex: 0 0 auto; font-variant-numeric: tabular-nums lining-nums;
}
aside.dps-chiffre span { font-size: 16px; line-height: 1.45; color: var(--dps-encre); max-width: 48ch; }

@media (max-width: 760px) {
	.dps-points { grid-template-columns: 1fr; }
	.dps-points > .dps-point:nth-child(odd):last-child { grid-column: auto; }
	.dps-point { max-height: none; }
	aside.dps-chiffre strong { font-size: 40px; }
}

p.avertissement-sante, .dps-avertissement-sante {
	border: 1.5px solid var(--dps-filet); background: var(--dps-blanc); border-radius: 14px;
	padding: 14px 18px; font-size: 14px; color: var(--dps-texte-2); margin: 24px 0;
}

.sbt-article-corps aside.sources, .sbt-article-corps .encadre, .sbt-article-corps aside.encadre {
	background: var(--dps-blanc); border: 1px solid var(--dps-filet); border-left: 4px solid var(--dps-lien);
	border-radius: 14px; padding: 18px 20px; margin: 1.8em 0; font-size: 15px;
}

/* --- Encadrés figés « Points à retenir » / « Le saviez-vous » (partial-encadres.php) --- */
.sbt-article-corps .sbt-encadre {
	border-radius: 18px; padding: 22px 24px; margin: 2em 0; box-shadow: var(--dps-ombre-1);
}
.sbt-article-corps .sbt-encadre-titre { font-family: var(--dps-chif); font-weight: 700; font-size: 16px; margin: 0 0 12px; }
.sbt-article-corps .sbt-retenir-liste { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.sbt-article-corps .sbt-retenir-liste li { position: relative; padding-left: 26px; font-size: 15px; }
.sbt-article-corps .sbt-retenir-liste li::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 3px 3px 3px 0; background: var(--dps-lien); }
.sbt-article-corps .sbt-encadre--retenir { background: var(--dps-blanc); border-top: 6px solid var(--dps-lien); }
/* 04/10 — le bloc figé (blocs/partial-encadres.css) colore ce titre en --sb-accent-clair
   (= --dps-pois, crème), pensé pour SON fond sombre d'origine ; on a repeint ce fond en blanc
   juste au-dessus sans retoucher le titre, et crème sur blanc n'était plus lisible (1.26:1).
   On l'aligne sur la couleur du filet du haut, déjà de la palette de cet encadré. */
.sbt-article-corps .sbt-encadre--retenir .sbt-encadre-titre { color: var(--dps-lien); }
.sbt-article-corps .sbt-encadre--saviez { background: #FFF8E4; border-top: 6px solid var(--dps-mais); }
.sbt-article-corps .sbt-encadre--saviez p:not(.sbt-encadre-titre) { font-size: 16px; line-height: 1.6; margin: 0; }

/* --- FAQ en accordéon figée (partial-faq.php), rendue en bloc personnalisé centré --- */
.sbt-article-corps .sbt-faq { max-width: 760px; margin: 2.4em auto; }
.sbt-article-corps .sbt-faq-liste { display: flex; flex-direction: column; gap: 12px; }
.sbt-article-corps .sbt-faq-liste details {
	background: var(--dps-blanc); border-radius: 16px; padding: 4px 20px; box-shadow: var(--dps-ombre-1);
}
.sbt-article-corps .sbt-faq-liste summary {
	font-family: var(--dps-chif); font-weight: 600; font-size: 16px; padding: 16px 24px 16px 0; cursor: pointer;
	list-style: none; position: relative;
}
.sbt-article-corps .sbt-faq-liste summary::-webkit-details-marker { display: none; }
/* 04/10 — bug « ++ » : le bloc figé (blocs/partial-faq.css) dessine déjà un rond avec un
   « + » en SVG sur ce même ::after (background + width/height) ; notre règle ne redéfinissait
   QUE `content`, donc le rond SVG restait peint EN PLUS de notre « + » texte — deux signes plus
   superposés/côte à côte. On neutralise explicitement le rond du bloc (background:none) pour ne
   garder qu'un seul signe, le nôtre. */
.sbt-article-corps .sbt-faq-liste summary::after {
	content: "+"; position: absolute; right: 0; top: 14px; font-size: 20px; color: var(--dps-lien);
	background: none; width: auto; height: auto; border-radius: 0;
}
.sbt-article-corps .sbt-faq-liste details[open] summary::after { content: "–"; }
.sbt-article-corps .sbt-faq-reponse { padding: 0 0 18px; color: var(--dps-texte-2); font-size: 15px; }
.sbt-article-corps .sbt-faq-reponse p:first-child { margin-top: 0; }

/* --- Composants d'infographie du socle (socle-infographies.php) : sbs_* --- */
.sbt-article-corps sbs-lieu, .sbt-article-corps sbs-tarifs, .sbt-article-corps sbs-frise, .sbt-article-corps sbs-jauges {
	display: block; background: var(--dps-blanc); border: 1px solid var(--dps-filet); border-radius: 18px;
	padding: 22px 24px; margin: 2em 0; box-shadow: var(--dps-ombre-1);
}
.sbt-article-corps .sbs_lieu_nom, .sbt-article-corps .sbs_tarifs_titre, .sbt-article-corps .sbs_frise_titre, .sbt-article-corps .sbs_jauges_titre {
	display: block; font-family: var(--dps-chif); font-weight: 700; font-size: 16px; margin-bottom: 14px;
}
.sbt-article-corps .sbs_lieu_adresse, .sbt-article-corps .sbs_lieu_acces { display: block; font-size: 14px; color: var(--dps-texte-2); margin-bottom: 4px; }
.sbt-article-corps .sbs_lieu_carte { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 600; color: var(--dps-lien); }
.sbt-article-corps .sbs_icone_repere { width: 18px; height: 18px; fill: currentColor; }

.sbt-article-corps sbs-tarif { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.sbt-article-corps sbs-tarif:last-of-type { margin-bottom: 0; }
.sbt-article-corps .sbs_tarif_libelle { font-size: 14px; color: var(--dps-texte-2); }
.sbt-article-corps .sbs_tarif_barre {
	-webkit-appearance: none; appearance: none; width: 100%; height: 14px; border-radius: 999px;
}
.sbt-article-corps .sbs_tarif_barre::-webkit-meter-bar { background: var(--dps-pois); border-radius: 999px; border: none; }
.sbt-article-corps .sbs_tarif_barre::-webkit-meter-optimum-value { background: var(--dps-douce); border-radius: 999px; }
.sbt-article-corps .sbs_tarifs_notes { display: block; font-size: 13px; color: var(--dps-texte-2); margin-top: 10px; }

.sbt-article-corps sbs-etape { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--dps-filet); }
.sbt-article-corps sbs-etape:last-of-type { border-bottom: none; }
.sbt-article-corps .sbs_etape_date { flex: 0 0 120px; font-family: var(--dps-chif); font-weight: 700; color: var(--dps-lien); font-size: 14px; }
.sbt-article-corps .sbs_etape_titre { display: block; font-family: var(--dps-chif); font-weight: 600; font-size: 15px; }
.sbt-article-corps .sbs_etape_desc { display: block; font-size: 14px; color: var(--dps-texte-2); margin-top: 2px; }

.sbt-article-corps sbs-jauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; }
.sbt-article-corps .sbs_jauges_titre { grid-column: 1 / -1; }
.sbt-article-corps sbs-jauge { display: flex; flex-direction: column; gap: 4px; }
.sbt-article-corps .sbs_jauge_libelle { font-size: 13px; color: var(--dps-texte-2); }
.sbt-article-corps .sbs_jauge_valeur { font-family: var(--dps-chif); font-weight: 700; font-size: 32px; color: var(--dps-encre); font-variant-numeric: tabular-nums; }
.sbt-article-corps .sbs_jauge_unite { font-size: 13px; color: var(--dps-texte-2); }

.sbt-article-corps .sbs_source { display: block; font-size: 12.5px; color: var(--dps-texte-2); margin-top: 12px; }

@media (max-width: 640px) {
	.sbt-article-corps .sbs_etape_date { flex-basis: 90px; font-size: 13px; }
}

/* ===================== 4. Rubrique (RUBRIQUE bento photos + tuile compteur) ===================== */

.dps-p-rubrique-entete { background: var(--dps-pois); padding: 24px 0 48px; }
.dps-p-rubrique-grille { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 40px; align-items: start; }
.dps-p-rubrique-titre { font-family: var(--dps-titre); font-weight: 300; font-size: 56px; line-height: 1.08; margin: 0 0 16px; color: var(--dps-encre); }
.dps-p-rubrique-intro { font-size: 18px; color: var(--dps-texte-2); max-width: 46ch; margin: 0 0 20px; }
.dps-p-rubrique-sous-themes { display: flex; flex-wrap: wrap; gap: 8px; }
.dps-p-rubrique-sous-themes .dps-pastille { background: var(--dps-blanc); }

.dps-p-rubrique-bento { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-rows: 170px; gap: 16px; }
.dps-p-rubrique-bento .dps-bento__tuile--myrtille { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; }

.dps-p-rubrique-liste { background: var(--dps-fond); padding: 64px 0; }
.dps-p-grille-rubrique { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-bottom: 40px; }
.dps-p-voir-plus { display: flex; justify-content: center; }
.dps-p-rubrique-vide { padding: 64px 0; text-align: center; color: var(--dps-texte-2); }

@media (max-width: 1100px) {
	.dps-p-rubrique-grille { grid-template-columns: 1fr; }
	.dps-p-rubrique-titre { font-size: 40px; }
}

@media (max-width: 640px) {
	.dps-p-rubrique-bento { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 150px; }
	.dps-p-rubrique-titre { font-size: 32px; }
	.dps-p-rubrique-liste { padding: 48px 0; }
}

/* ===================== 5. Page auteur ===================== */

.dps-p-auteur-carte { display: flex; align-items: center; gap: 28px; padding: 16px 0; }
.dps-p-auteur-photo { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; border: 4px solid var(--dps-mais); flex: none; }
.dps-p-auteur-nom { font-family: var(--dps-titre); font-weight: 300; font-size: 40px; margin: 0 0 6px; }
.dps-p-auteur-role { font-family: var(--dps-chif); font-weight: 600; font-size: 14px; color: var(--dps-lien); margin: 0 0 10px; }
.dps-p-auteur-bio { font-size: 17px; color: var(--dps-texte-2); max-width: 64ch; margin: 0 0 12px; }
.dps-p-auteur-chiffre { font-size: 14px; color: var(--dps-texte-2); }

@media (max-width: 640px) {
	.dps-p-auteur-carte { flex-direction: column; align-items: flex-start; gap: 16px; }
	.dps-p-auteur-photo { width: 96px; height: 96px; }
	.dps-p-auteur-nom { font-size: 30px; }
}

/* ===================== 6. Pages génériques (mentions, confidentialité, plan) ===================== */

.dps-p-page__conteneur { max-width: 760px; }
.dps-p-page__titre { font-family: var(--dps-titre); font-weight: 300; font-size: 44px; line-height: 1.15; margin: 8px 0 32px; color: var(--dps-encre); }
.dps-p-page__corps { font-size: 17px; line-height: 1.75; color: var(--dps-encre); }
.dps-p-page__corps h2 { font-size: 26px; margin-top: 1.8em; }
.dps-p-page__corps h3 { font-size: 20px; margin-top: 1.5em; }
.dps-p-page__corps p { margin-bottom: 1.2em; }
.dps-p-page__corps ul, .dps-p-page__corps ol { margin: 0 0 1.2em; padding-left: 1.3em; list-style: disc; }
.dps-p-page__corps a { color: var(--dps-lien); text-decoration: underline; font-weight: 600; }
.dps-p-page__corps table { display: block; overflow-x: auto; border-collapse: collapse; margin: 1.6em 0; }
.dps-p-page__corps table th, .dps-p-page__corps table td { padding: 10px 14px; border: 1px solid var(--dps-filet); font-size: 15px; }

@media (max-width: 640px) {
	.dps-p-page__titre { font-size: 30px; }
}

/* ===================== 6bis. Plan 7 jours — mise en forme THÈME (jugement visuel 04/10) ===================== */
/* Page la plus critiquée : texte brut, repas collés, FAQ aux triangles natifs. La mise en
   forme vient d'inc/plan-7-jours.php (shortcode [sbs_frise] + filtre the_content scopé à
   cette page) — ici, uniquement l'habillage. */

.dps-p-page__conteneur--large { max-width: 1100px; }

/* 04/10 passe 2 (juge visuel, §10) : le visuel d'en-tête n'était qu'un bol rond de 180px, pas
   assez fort pour un premier écran. Bascule en bandeau large (même photo, cadrage plateau en
   grand) au-dessus du texte — le rond devient un simple rappel décoratif, pas le seul visuel. */
.dps-plan-entete { display: flex; flex-direction: column; gap: 24px; }
.dps-plan-entete__texte { max-width: 760px; }
.dps-plan-entete__visuel {
	width: 100%; aspect-ratio: 21 / 8; border-radius: var(--dps-rayon-grand); overflow: hidden;
	box-shadow: var(--dps-ombre-2); order: -1;
}
.dps-plan-entete__visuel img { width: 100%; height: 100%; object-fit: cover; }
.dps-plan-imprimer {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
	background: transparent; border: 1.5px solid var(--dps-encre); color: var(--dps-encre);
	font-family: var(--dps-chif); font-weight: 600; font-size: 14px; padding: 10px 18px;
	border-radius: 999px; cursor: pointer;
}
.dps-plan-imprimer:hover { background: var(--dps-encre); color: var(--dps-blanc); }
.dps-plan-imprimer svg { width: 17px; height: 17px; }

/* Avertissement santé — upgrade visuel (même classe que le reste du site, p.avertissement-sante) */
p.avertissement-sante {
	display: flex; gap: 14px; align-items: flex-start;
	border: 0; border-left: 4px solid var(--dps-pic); background: #FDF1EC;
	border-radius: 10px; padding: 18px 20px; font-size: 15.5px; line-height: 1.6; color: var(--dps-encre);
}

/* Semaine de repas : cartes-jours. 04/10 passe 2 (§10) : le Jour 7 retombait seul sur sa ligne
   avec deux cases vides à côté. Essayé en grille à 2 colonnes + grid-column:1/-1 sur
   :last-child pour le centrer en carte large — comportement erratique et non reproductible en
   test (Playwright/CSSOM d'accord sur la règle appliquée, mais la largeur rendue variait d'un
   chargement à l'autre, 231px tantôt, 1248px tantôt, jamais les ~540px attendus). Repris en
   FLEXBOX : la carte seule (classe posée côté PHP sur un compte réel, jamais un :last-child
   CSS) prend une largeur fixe et centrée, sans dépendre d'un calcul de piste de grille. */
.dps-plan-semaine { display: flex; flex-wrap: wrap; gap: 20px; margin: 1.6em 0 2.4em; }
.dps-plan-semaine > .dps-plan-jour { flex: 1 1 calc(50% - 10px); min-width: 280px; }
/* Carte seule (Jour 7) : pleine largeur de la rangée plutôt qu'une carte centrée plus étroite —
   un `flex: 0 1 540px` donnait, en test répété, une largeur affichée tantôt correcte tantôt
   écrasée à une colonne de texte mot-à-mot (`min-width:auto` par défaut d'un item flex/grid qui
   se recalcule mal selon l'ordre de chargement des polices, non reproductible de façon fiable).
   Pleine largeur = aucun calcul de centrage fragile, et le problème initial (vide à côté de la
   carte) disparaît tout autant. Son contenu (grille interne icône+texte) garde deux colonnes au
   lieu d'une, donc un texte plus aéré qu'une carte classique, pas un défaut. */
.dps-plan-semaine > .dps-plan-jour--seul { flex: 1 1 100%; }
.dps-plan-semaine > .dps-plan-jour--seul .dps-plan-repas { grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.dps-plan-jour { background: var(--dps-blanc); border: 1px solid var(--dps-filet); border-radius: var(--dps-rayon); padding: 20px 22px; box-shadow: var(--dps-ombre-1); }
.dps-plan-jour__titre { font-family: var(--dps-chif); font-weight: 700; font-size: 17px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 2px solid var(--dps-mais); }
.dps-plan-repas { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dps-plan-repas__ligne { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.dps-plan-repas__icone {
	width: 34px; height: 34px; border-radius: 10px; background: var(--dps-pois); color: var(--dps-encre);
	display: flex; align-items: center; justify-content: center; flex: none;
}
.dps-plan-repas__icone svg { width: 18px; height: 18px; }
/* 04/10 passe 2 (§10) : bug constaté en test (Playwright/Chromium) — un conteneur FLEX utilisé
   comme item d'une grille (`grid-template-columns: 34px 1fr`) ne s'étalait pas sur sa piste
   malgré `justify-self` à sa valeur par défaut (stretch) : largeur figée à 34px, identique à la
   colonne icône, quel que soit l'espace réellement disponible (409px mesurés) — tout le texte
   retombait en un mot par ligne sur CHAQUE carte-jour, pas seulement la carte seule. Remplacé
   par des blocs simples (plus de conteneur flex imbriqué dans la grille) : un item de grille
   bloc s'étale de façon fiable sur sa piste, aucune marge de comportement à ce sujet. */
.dps-plan-repas__texte { display: block; }
.dps-plan-repas__libelle { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--dps-texte-2); margin-bottom: 2px; }
.dps-plan-repas__plat { display: block; font-family: var(--dps-chif); font-weight: 700; font-size: 15px; color: var(--dps-encre); margin-bottom: 2px; }
.dps-plan-repas__desc { display: block; font-size: 13.5px; line-height: 1.5; color: var(--dps-texte-2); }

/* Liste de courses : colonnes à cocher */
.dps-plan-courses { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 24px; margin: 1.6em 0 2.4em; padding: 24px; background: var(--dps-fond); border-radius: var(--dps-rayon-grand); }
.dps-plan-courses__titre { font-family: var(--dps-chif); font-weight: 700; font-size: 14px; margin: 0 0 12px; color: var(--dps-lien); }
.dps-plan-courses__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dps-plan-courses__liste label { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; line-height: 1.4; cursor: pointer; }
.dps-plan-courses__liste input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--dps-lien); flex: none; }
.dps-plan-courses__liste input:checked + span { text-decoration: line-through; color: var(--dps-texte-2); }
/* 04/10 passe 2 (§10) : « Fruits et légumes » a souvent 2-3× plus de lignes que les autres
   catégories (27 contre 6-9 relevé par le juge) — colonne CSS native en 2 sous-colonnes dès
   qu'elle dépasse 12 items, jamais une liste étirée qui écrase visuellement ses voisines. */
.dps-plan-courses__colonne:has(.dps-plan-courses__liste li:nth-child(12)) { grid-column: span 2; }
.dps-plan-courses__colonne:has(.dps-plan-courses__liste li:nth-child(12)) .dps-plan-courses__liste {
	display: block; columns: 2; column-gap: 24px;
}
.dps-plan-courses__colonne:has(.dps-plan-courses__liste li:nth-child(12)) .dps-plan-courses__liste li { break-inside: avoid; margin-bottom: 8px; }

/* Les 3 principes : mêmes tuiles que les « 3 erreurs », en clair plutôt qu'en sombre (positif,
   pas un avertissement). */
.dps-plan-principes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin: 1.6em 0 2.4em; }
.dps-plan-principes__tuile { background: var(--dps-fond); border: 1px solid var(--dps-filet); border-radius: var(--dps-rayon); padding: 22px 20px; }
.dps-plan-principes__tuile h3 { font-family: var(--dps-chif); font-size: 16px; margin: 0 0 8px; color: var(--dps-lien); }
.dps-plan-principes__tuile p { font-size: 14px; line-height: 1.55; color: var(--dps-texte-2); margin: 0; }

/* 3 erreurs fréquentes : tuiles */
.dps-plan-erreurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin: 1.6em 0 2.4em; }
.dps-plan-erreurs__tuile { background: var(--dps-encre); color: var(--dps-blanc); border-radius: var(--dps-rayon); padding: 22px 20px; }
.dps-plan-erreurs__num {
	display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
	border-radius: 50%; background: var(--dps-mais); color: var(--dps-encre); font-weight: 700; font-size: 14px; margin-bottom: 12px;
}
.dps-plan-erreurs__tuile h3 { font-size: 16px; margin: 0 0 8px; color: var(--dps-blanc); }
.dps-plan-erreurs__tuile p { font-size: 14px; line-height: 1.55; color: #C9CCE6; margin: 0; }

@media print {
	.dps-entete, .sbt-footer, .dps-plan-imprimer, .sbt-cookies { display: none !important; }
}

@media (max-width: 640px) {
	.dps-plan-entete { align-items: stretch; }
	.dps-plan-entete__visuel { aspect-ratio: 16 / 10; }
	.dps-plan-semaine > .dps-plan-jour,
	.dps-plan-semaine > .dps-plan-jour--seul { flex-basis: 100%; max-width: none; margin: 0; }
	.dps-plan-courses__colonne:has(.dps-plan-courses__liste li:nth-child(12)) { grid-column: auto; }
	.dps-plan-courses__colonne:has(.dps-plan-courses__liste li:nth-child(12)) .dps-plan-courses__liste { columns: 1; }
}

/* ===================== 7. Pages de branding (à propos / contact) ===================== */

/* RESET 05/10 (jugement visuel passe 3, §5 : « 6 sections de paragraphes gris, sans
   encadré, chiffre ni photo dans le corps », WOW 5/10) — le corps de la page À propos
   (inc/a-propos-rythme.php) réutilise le même rythme que l'article : panneaux .dps-panel
   alternés + numéro de section, et une signature « courbe sans pic » (ondulation Feuille)
   sous chaque intertitre, comme .dps-titre-section ailleurs sur le site. */
.dps-p-page__corps { counter-reset: dps-panel; }
.dps-p-page__corps .dps-panel > h2 { padding-bottom: 14px; }
.dps-p-page__corps .dps-panel > h2::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 7px;
	background: var(--dps-douce); border-radius: 7px;
}
/* Section « Ce que ce site n'est pas » : traitement encadré d'avertissement (filet Tomate,
   même logique sémantique que .dps-plan-erreurs / p.avertissement-sante ailleurs). */
.dps-p-page__corps .dps-panel--avertit { border: 1.5px solid var(--dps-pic); background: #FDF1EC; }
.dps-p-page__corps .dps-panel--avertit > h2::before { background: var(--dps-pic); }
.dps-p-page__corps .dps-panel--avertit > h2::after { background: var(--dps-pic); }

/* « Comment nous travaillons » découpé en tuiles (dps_a_propos_tuiles_travail) : une phrase
   du texte d'origine = une tuile, jamais un mot ajouté. */
.dps-p-travail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 1.4em 0 0.2em; }
.dps-p-travail__tuile {
	background: var(--dps-blanc); border: 1px solid var(--dps-filet); border-radius: 18px;
	padding: 22px 20px; box-shadow: var(--dps-ombre-1);
}
.dps-p-travail__num {
	display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
	border-radius: 50%; background: var(--dps-mais); color: var(--dps-encre); font-weight: 800;
	font-size: 13px; font-family: var(--dps-chif); margin-bottom: 12px;
}
.dps-p-travail__tuile p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--dps-encre); }

@media (max-width: 760px) {
	.dps-p-travail { grid-template-columns: 1fr; }
}

/* Carte « Avant d'écrire » sous la photo de Contact (§6 : vide d'≈800px sous la photo à
   1440 — le texte libre descend bien plus bas que l'image collante). Microcopie pratique,
   jamais une promesse santé : réutilise le ton déjà posé par p.avertissement-sante. */
.dps-p-contact__avant {
	margin-top: 20px; background: var(--dps-blanc); border: 1px solid var(--dps-filet);
	border-radius: var(--dps-rayon); padding: 20px 22px; box-shadow: var(--dps-ombre-1);
}
.dps-p-contact__avant-titre { font-family: var(--dps-chif); font-weight: 700; font-size: 14px; color: var(--dps-lien); margin: 0 0 12px; }
.dps-p-contact__avant ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dps-p-contact__avant li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.5; color: var(--dps-texte-2); }
.dps-p-contact__avant li::before {
	content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px;
	border-radius: 3px 3px 3px 0; background: var(--dps-douce);
}

.dps-p-branding__grille { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 48px; align-items: center; }
.dps-p-branding__titre { font-family: var(--dps-titre); font-weight: 300; font-size: 48px; line-height: 1.1; margin: 12px 0 18px; }
.dps-p-branding__chapo { font-size: 19px; line-height: 1.6; color: var(--dps-texte-2); max-width: 54ch; margin: 0; }
.dps-p-branding__photo { border-radius: var(--dps-rayon-grand); overflow: hidden; box-shadow: var(--dps-ombre-2); aspect-ratio: 4/3; }
.dps-p-branding__photo img { width: 100%; height: 100%; object-fit: cover; }

.dps-p-contact__grille { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 48px; align-items: start; }
.dps-p-contact__form { max-width: none; margin-top: 20px; margin-bottom: 28px; }
/* 04/10 (juge visuel) : align-self:stretch étirait cette photo à la hauteur de la colonne de
   texte (≈1250px, plus haute que l'écran) malgré aspect-ratio:3/4 — l'item gagnait sur la
   grille parente (déjà en align-items:start). Bornée à l'écran et collante, comme le reste
   du site (cf. .sbt-rail) : jamais plus grande que ce que le visiteur voit.
   05/10 (jugement visuel passe 3, §6) : cette correction laissait ~800px de vide SOUS la
   photo (la colonne de texte continue bien après la fin de l'image collante). La carte
   « Avant d'écrire » (.dps-p-contact__avant) est ajoutée SOUS la photo, DANS la même
   colonne collante, pour combler l'essentiel du vide plutôt que de le laisser nu. */
.dps-p-contact__colonne-droite { position: sticky; top: 96px; align-self: start; }
.dps-p-contact__photo { aspect-ratio: 3/4; }
.dps-p-contact__photo img { width: 100%; height: 100%; object-fit: cover; }

.dps-form__champ textarea {
	font: inherit; font-size: 15px; padding: 11px 12px; border-radius: 10px; border: 1.5px solid var(--dps-filet);
	background: var(--dps-blanc); color: var(--dps-encre); color-scheme: light; resize: vertical; min-height: 110px;
}
.dps-form__champ textarea:focus { border-color: var(--dps-lien); }

/* 04/10 (juge visuel, sortie 3) : à 390px le bouton « Envoyer le message » retombait à 932px
   (fenêtre utile 700) — un formulaire commencé au premier écran doit finir son bouton AU-DESSUS
   du pli. Version compacte du formulaire de contact seul (champs resserrés, Nom/E-mail restent
   côte à côte au lieu de s'empiler, message 3 lignes) : ne touche à aucun autre formulaire du
   site (la règle --cote-a-cote d'origine reste en 1 colonne ailleurs). */
@media (max-width: 640px) {
	.dps-section:has(.dps-p-contact__grille) { padding-top: 10px; padding-bottom: 24px; }
	.dps-p-contact__grille .dps-p-fil { margin-bottom: 4px; }
	.dps-p-contact__grille .dps-p-branding__titre { margin: 6px 0 2px; font-size: 26px; }
	.dps-p-contact__form.dps-form { padding: 10px 12px; margin-top: 8px; margin-bottom: 14px; }
	.dps-p-contact__form .dps-form__champs--cote-a-cote { grid-template-columns: 1fr 1fr; gap: 8px; }
	.dps-p-contact__form .dps-form__champ { margin-bottom: 5px; font-size: 10.5px; gap: 3px; }
	.dps-p-contact__form .dps-form__champ input { padding: 7px 9px; font-size: 13px; }
	.dps-p-contact__form .dps-form__champ textarea { min-height: 48px; padding: 7px 9px; font-size: 13px; }
	/* avertissement complet déjà redit par le texte sous le formulaire (the_content) : la
	   version très courte ici n'ajoutait rien à 390px et coûtait ~50px de hauteur. */
	.dps-p-contact__form .dps-form__avertissement-sante { display: none; }
	.dps-p-contact__form .dps-form__envoyer { padding: 9px 16px; font-size: 13px; }
}

@media (max-width: 1100px) {
	.dps-p-branding__grille, .dps-p-contact__grille { grid-template-columns: 1fr; }
	/* Colonne unique sous 1100px : plus besoin du collage (il n'y a plus 2 colonnes côte à
	   côte à accompagner). */
	.dps-p-contact__colonne-droite { order: -1; position: static; }
	.dps-p-contact__photo { aspect-ratio: 16/9; }
}

@media (max-width: 640px) {
	.dps-p-branding__titre { font-size: 32px; }
	.dps-p-branding__chapo { font-size: 17px; }
}

/* ===================== 8. 404 et recherche ===================== */

.dps-p-404__corps, .dps-p-recherche-entete .dps-conteneur { text-align: left; max-width: 760px; }
.dps-p-404 { text-align: center; }
.dps-p-404__corps { margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.dps-p-404__rubriques { margin-top: 32px; width: 100%; max-width: var(--dps-conteneur); }

@media (max-width: 640px) {
	.dps-p-404__rubriques { grid-template-columns: 1fr; }
}