/* ==========================================================================
   dps-plateau — dietetique-passions.com
   « Le plateau qui tient jusqu'au soir » — plateau ½ ¼ ¼, courbe sans pic,
   étiquette nutritionnelle, bento à chiffres géants. Mode CLAIR UNIQUEMENT.
   ========================================================================== */

:root {
	/* ---- Palette nommée (DA) ---- */
	--dps-fond:    #FBF7EE; /* Farine */
	--dps-encre:   #1F2340; /* Myrtille nuit */
	--dps-texte-2: #555A72; /* Ardoise douce */
	--dps-mais:    #FFC82E; /* Jaune maïs — accent */
	--dps-pois:    #EFE4CC; /* Pois chiche */
	--dps-lien:    #4B47C8; /* Myrtille vive */
	--dps-pic:     #C13D20; /* Tomate — IG élevé (assombri 04/10 : #D9482B sur blanc ne passait
	                            que 4.0-4.28:1, sous le seuil AA 4.5:1 pour du texte ; un premier
	                            essai #CD4126 ne passait encore que 4.48:1 sur le logo réel — même
	                            teinte, encore un cran plus sombre, marge de sécurité ~4.9:1) */
	--dps-douce:   #2E7A55; /* Feuille — IG bas */
	--dps-blanc:   #FFFFFF;
	--dps-filet:   #E3D9C3;
	--dps-mais-survol: #E6AE12;

	--dps-ombre-1: 0 1px 2px rgba(31,35,64,.06), 0 8px 24px rgba(31,35,64,.08);
	--dps-ombre-2: 0 2px 6px rgba(31,35,64,.08), 0 24px 56px rgba(31,35,64,.16);

	--dps-titre:  'Noto Serif Display', Georgia, serif;
	--dps-chif:   'Wix Madefor Display', Arial, sans-serif;
	--dps-texte:  'Wix Madefor Text', Arial, sans-serif;

	--dps-conteneur: 1280px;
	--dps-rayon: 20px;
	--dps-rayon-grand: 32px;

	/* ---- Repères génériques --sb-* attendus par les blocs figés (blocs/) ---- */
	--sb-conteneur: 1280px;
	--sb-lecture: 700px;
	--sb-rail: 320px;
	--sb-gouttiere: 48px;
	--sb-accent: var(--dps-mais);
	--sb-encre: var(--dps-encre);
	--sb-doux: var(--dps-texte-2);
	--sb-filet: var(--dps-filet);
	--sb-fond-carte: var(--dps-blanc);
	--sb-rayon: 20px;
	--sb-rayon-grand: 28px;
	--sb-ombre: var(--dps-ombre-1);
	--sb-ombre-forte: var(--dps-ombre-2);
	--sb-titre: var(--dps-titre);
	--sb-texte: var(--dps-texte);
	--sb-surf: var(--dps-pois);
	--sb-fonce: var(--dps-encre);
	--sb-sur-fonce: var(--dps-blanc);
	--sb-accent-clair: var(--dps-pois);
}

/* ===================== Base ===================== */
html { color-scheme: light only; scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--dps-fond);
	color: var(--dps-encre);
	font-family: var(--dps-texte);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
:focus-visible { outline: 3px solid var(--dps-lien); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--dps-titre); font-weight: 300; margin: 0; color: var(--dps-encre); }

.dps-saut-contenu {
	position: absolute; left: -9999px; top: 0; background: var(--dps-encre); color: #fff;
	padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 200;
}
.dps-saut-contenu:focus { left: 0; }

.dps-conteneur { max-width: var(--dps-conteneur); margin: 0 auto; padding: 0 16px; }
@media (min-width: 1680px) { .dps-conteneur { max-width: 1520px; } }

.dps-main { overflow-x: hidden; }

.dps-section { padding: 64px 0; }
.dps-section--farine   { background: var(--dps-fond); }
.dps-section--blanc    { background: var(--dps-blanc); }
.dps-section--pois     { background: var(--dps-pois); }
.dps-section--myrtille { background: var(--dps-encre); color: var(--dps-blanc); }
.dps-section--mais     { background: var(--dps-mais); }

.dps-titre-section {
	font-size: 44px; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 32px;
	position: relative; padding-bottom: 18px;
}
.dps-titre-section::after {
	/* 04/10 (juge visuel) : le masque radial-gradient ci-dessous visait un départ arrondi, mais
	   son cercle était centré PILE sur le bord haut (0) de la barre de 8px — seule sa moitié
	   basse tombait dans l'élément, ce qui découpait un petit crochet parasite au lieu d'un
	   arrondi propre. border-radius:8px sur une barre pleine donne déjà un départ rond correct,
	   le masque était redondant en plus d'être cassé — retiré. */
	content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 8px;
	background: var(--dps-douce); border-radius: 8px;
}
.dps-titre-section--clair { color: var(--dps-blanc); }

.dps-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--dps-mais); color: var(--dps-encre); font-family: var(--dps-chif);
	font-weight: 700; font-size: 16px; padding: 14px 26px; border-radius: 999px;
	white-space: nowrap; transition: background .18s ease, transform .18s ease;
}
.dps-btn:hover { background: var(--dps-mais-survol); transform: translateY(-1px); }
.dps-btn--pleine-largeur { width: 100%; }
.dps-btn--fantome { background: transparent; border: 1.5px solid var(--dps-filet); color: var(--dps-encre); }

.dps-pastille {
	display: inline-flex; align-items: center; font-family: var(--dps-chif); font-weight: 600;
	font-size: 12px; letter-spacing: .04em; text-transform: uppercase; background: var(--dps-blanc);
	color: var(--dps-lien); padding: 6px 12px; border-radius: 999px;
}

.dps-grille { display: grid; gap: 24px; }
.dps-grille--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.dps-grille--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.dps-grille--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.dps-chiffre { font-family: var(--dps-chif); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }

/* ===================== Cartes (réutilisées — passe B) ===================== */
.dps-carte {
	display: flex; flex-direction: column; background: var(--dps-blanc); border-radius: var(--dps-rayon);
	box-shadow: var(--dps-ombre-1); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
	min-width: 0;
}
.dps-carte:hover { transform: translateY(-3px); box-shadow: var(--dps-ombre-2); }
.dps-carte__photo { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--dps-pois); }
.dps-carte__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.dps-carte:hover .dps-carte__photo img { transform: scale(1.04); }
.dps-carte__photo .dps-pastille { position: absolute; left: 12px; top: 12px; }
.dps-carte__corps { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.dps-carte__corps h3 { font-family: var(--dps-chif); font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--dps-encre); }
.dps-carte__chapo { color: var(--dps-texte-2); font-size: 15px; line-height: 1.6; margin: 0; }
.dps-carte__auteur { display: flex; align-items: center; gap: 8px; margin-top: auto; font-size: 13px; color: var(--dps-texte-2); }
.dps-carte__auteur img { border-radius: 50%; width: 28px; height: 28px; object-fit: cover; }
.dps-carte--petite .dps-carte__corps { padding: 14px 16px; }

/* ===================== En-tête ===================== */
.dps-entete {
	position: sticky; top: 0; z-index: 100; background: rgba(251,247,238,.92); backdrop-filter: blur(6px);
	border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease;
}
.dps-entete.est-colle { border-color: var(--dps-filet); box-shadow: 0 4px 16px rgba(31,35,64,.06); }
.dps-entete__barre { display: flex; align-items: center; gap: 28px; height: 76px; }

/* 04/10 (juge visuel, passe 2) : à 1440px (menu tenant tout juste sur une ligne depuis la
   passe 1), le mot « Diététique » touchait quasi le premier lien du menu — margin-right:auto
   n'avait presque plus d'espace libre à distribuer une fois le menu compacté. Minimum garanti
   en plus du gap de la barre. */
.dps-logo { display: flex; align-items: center; gap: 10px; margin-right: auto; padding-right: 20px; }
.dps-logo__texte { display: flex; flex-direction: column; line-height: 1.1; font-family: var(--dps-titre); font-size: 16px; }
.dps-logo__nom { font-weight: 400; color: var(--dps-encre); }
.dps-logo__nom--accent { font-family: var(--dps-chif); font-weight: 800; color: var(--dps-pic); font-size: 15px; }

.dps-nav ul { display: flex; align-items: center; gap: 22px; }
/* 04/10 : marge du logo (20px) + items resserrés entre 1101 et 1600px pour continuer à tenir
   sur une ligne malgré l'espace repris au logo. */
@media (max-width: 1600px) {
	.dps-nav ul { gap: 16px; }
	.dps-nav a { font-size: 14px; }
}
.dps-nav a { font-family: var(--dps-chif); font-weight: 600; font-size: 15px; color: var(--dps-encre); white-space: nowrap; }
.dps-nav a:hover { color: var(--dps-lien); }

.dps-entete__cta { font-size: 15px; padding: 12px 20px; }
.dps-entete__bascule { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; }

/* Débordement horizontal (03/10, DEFAUTS-V1 #1) : un panneau position:fixed + transform
   élargit le scrollWidth du document dans Chromium même masqué en visibility:hidden — seul
   display:none le retire vraiment de la mise en page (JS : display géré dans app.js pour
   garder l'animation de glissement à l'ouverture/fermeture). display:flex ici n'est que
   l'état « ouvert » par défaut pour qui a JS désactivé ; display:none le repasse fermé. */
.dps-mobile-panel {
	position: fixed; inset: 0; background: var(--dps-fond); z-index: 200; padding: 20px 16px;
	transform: translateX(100%); transition: transform .25s ease; overflow-y: auto;
	display: none; flex-direction: column;
}
.dps-mobile-panel.est-ouvert { transform: translateX(0); }
.dps-mobile-panel__entete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.dps-mobile-panel nav ul { display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; }
.dps-mobile-panel nav a { display: block; padding: 14px 4px; font-family: var(--dps-chif); font-weight: 600; font-size: 18px; border-bottom: 1px solid var(--dps-filet); }

/* ===================== Hero =====================
   Compacté le 03/10 (DEFAUTS-V1 #4) : le hero mesurait 1200px à 1440 (mesures.json v1),
   le formulaire restait sous le pli. Tailles/espacements resserrés pour tenir le hero,
   formulaire ET preuve compris, au-dessus du pli à 1920×950 et 1440×780 — règle de
   Mathias, prioritaire sur les valeurs indicatives de la DA. */
.dps-hero-section { padding-top: 12px; padding-bottom: 20px; }
/* Passe E (04/10) : .dps-hero__texte scindé en .dps-hero__entete (pastille/titre/chapo) et
   .dps-hero__action (carte formulaire/preuve) — grid-template-areas pilote l'ordre par
   breakpoint sans dupliquer de markup (cf. media queries plus bas pour mobile). */
.dps-hero {
	display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	grid-template-areas: "entete visuel" "action visuel";
	gap: 40px; align-items: start; position: relative;
}
.dps-hero__entete { grid-area: entete; }
.dps-hero__visuel { grid-area: visuel; }
.dps-hero__action { grid-area: action; }

.dps-hero__surtitre {
	display: inline-flex; font-family: var(--dps-chif); font-weight: 600; font-size: 12px; letter-spacing: .04em;
	color: var(--dps-lien); border: 1.5px solid var(--dps-lien); border-radius: 999px; padding: 4px 12px; margin: 0 0 10px;
}
/* 04/10 (juge visuel) : 46px « paraît timide » comparé aux modèles du secteur (64-90px) —
   remonté ici, et encore plus à partir de 1680px où l'écran laisse la place. */
.dps-hero__titre { font-size: 54px; line-height: 1.04; margin-bottom: 8px; }
@media (min-width: 1680px) { .dps-hero__titre { font-size: 66px; } }
.dps-hero__titre-l1 { display: block; font-family: var(--dps-titre); font-weight: 300; color: var(--dps-encre); }
.dps-hero__titre-l2 { display: block; font-family: var(--dps-chif); font-weight: 800; color: var(--dps-pic); font-size: .92em; }
.dps-hero__sous-titre { font-size: 15.5px; line-height: 1.4; color: var(--dps-texte-2); max-width: 46ch; margin: 0 0 12px; }

.dps-hero__form { position: relative; margin-bottom: 10px; max-width: 390px; }
/* 04/10 passe 2 (juge visuel) : 3 pastilles de largeur égale en ligne = le même trio que
   evasionfitness.fr, icônes et couleurs mises à part (le SQUELETTE était identique). La grille
   reprend ici littéralement la proportion ½·¼·¼ du plateau juste à côté (1re carte deux fois
   plus large que les 2 suivantes) : une forme qu'aucun site générique de quiz n'a de raison de
   partager avec nous. */
/* 05/10 (jugement visuel passe 3, [16]) : la 3e colonne (« Mis à jour ») n'avait que la même
   largeur que « rubriques » (un seul chiffre) alors qu'elle porte un texte + une date ⇒
   « Mis / à / jour » empilé sur 3 lignes, cassé. Colonne élargie, ET le libellé + la date de
   cette tuile passent chacun sur UNE ligne entière (plus de mot-à-mot). */
.dps-hero__preuve { display: grid; grid-template-columns: 1.3fr 1fr 1.5fr; gap: 10px; }
.dps-hero__preuve li {
	display: flex; align-items: center; gap: 8px; background: var(--dps-blanc); border: 1px solid var(--dps-filet);
	border-radius: 14px; padding: 9px 12px; box-shadow: var(--dps-ombre-1); min-width: 0;
}
.dps-hero__preuve-icone {
	width: 26px; height: 26px; border-radius: 50%; background: var(--dps-pois); color: var(--dps-lien);
	display: flex; align-items: center; justify-content: center; flex: none;
}
.dps-hero__preuve-icone svg { width: 15px; height: 15px; }
.dps-hero__preuve .dps-chiffre { font-size: 15px; color: var(--dps-encre); }
.dps-hero__preuve-libelle { font-size: 12px; color: var(--dps-texte-2); }
/* Tuile « Mis à jour » : libellé et date EN CLAIR, chacun sur sa propre ligne entière (jamais
   découpé mot par mot comme un flex-item trop étroit le ferait). */
.dps-hero__preuve-date { flex-wrap: wrap; align-items: flex-start; row-gap: 2px; }
.dps-hero__preuve-date .dps-chiffre--texte,
.dps-hero__preuve-date .dps-hero__preuve-libelle { flex: 1 1 100%; white-space: nowrap; }
.dps-chiffre--texte { font-size: 13px; }

.dps-hero__visuel { position: relative; min-height: 360px; }
.dps-plateau {
	position: relative; height: 460px; border-radius: 36px; border: 12px solid var(--dps-pois);
	box-shadow: inset 0 2px 8px rgba(31,35,64,.10), var(--dps-ombre-2);
	display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; padding: 0; overflow: hidden;
	background: var(--dps-blanc);
}
.dps-plateau__compartiment { position: relative; overflow: hidden; border-radius: 18px; background: var(--dps-pois); min-width: 0; min-height: 0; }
.dps-plateau__compartiment img { width: 100%; height: 100%; object-fit: cover; }
/* Compartiment sans photo (aucune photo juste pour ce groupe d'aliments dans la bibliothèque) :
   aplat de la couleur de la céréale + pictogramme centré, plutôt qu'une photo hors sujet. */
.dps-plateau__compartiment--sans-photo { display: flex; align-items: center; justify-content: center; background: var(--dps-mais); }
.dps-plateau__compartiment__icone { width: 44px; height: 44px; color: var(--dps-encre); opacity: .55; }
.dps-plateau__compartiment__icone svg { width: 100%; height: 100%; }
.dps-plateau__compartiment--legumes { grid-row: 1 / 3; grid-column: 1; }
.dps-plateau__compartiment--cereales { grid-row: 1; grid-column: 2; }
.dps-plateau__compartiment--proteines { grid-row: 2; grid-column: 2; }
.dps-plateau__pastille {
	position: absolute; left: 12px; top: 12px; background: var(--dps-blanc); color: var(--dps-encre);
	font-family: var(--dps-chif); font-weight: 600; font-size: 12px; padding: 6px 12px; border-radius: 999px;
	box-shadow: var(--dps-ombre-1); max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Libellé court (½, ¼, ¼) pour les très petits compartiments mobiles — cf. media query
   ≤640px : .dps-plateau__pastille-texte caché, .dps-plateau__pastille-court affiché. Par
   défaut (desktop/tablette), c'est l'inverse : étiquette entière, rien de court visible. */
.dps-plateau__pastille-court { display: none; }
/* Ramequin : frère de .dps-plateau dans .dps-hero__visuel (plus un enfant clippé, cf.
   front-page.php) — positionné depuis le coin haut droit du VISUEL, aux 3/4 dehors, pour
   vraiment « déborder » comme le veut la DA sans chevaucher la pastille ¼ féculents. */
/* Le cercle (overflow:hidden) et sa pastille sont maintenant deux enfants distincts du
   conteneur de positionnement .dps-plateau__ramequin : la pastille dépasse le cercle par le
   bas (bug constaté 03/10 — un overflow:hidden posé sur le MÊME élément que la pastille la
   rognait). Le conteneur, lui, reste sans overflow pour laisser respirer la pastille. */
/* 04/10 — le conteneur ne faisait que 124px de haut (la taille du cercle) alors que la
   pastille, ancrée en `bottom:-34px`, sortait de 34px SOUS lui : le contrôle premier_ecran
   compare chaque étiquette au cadre de son offsetParent, jamais à la fenêtre entière, et
   toute étiquette qui dépasse ce cadre est un rouge bloquant (R-1881). Le conteneur fait
   maintenant la hauteur du cercle + la pastille, le cercle garde une taille FIXE (124px,
   plus en 100%) pour ne pas s'étirer avec lui, et la pastille s'ancre depuis le HAUT du
   conteneur (sous le cercle) au lieu du bas — même position à l'écran, mais contenue. */
.dps-plateau__ramequin { position: absolute; top: -22px; right: -18px; width: 124px; height: 160px; z-index: 2; }
/* width:100% + aspect-ratio (pas height fixe) : le cercle suit TOUJOURS la largeur du
   conteneur — y compris aux paliers ≤1100px/≤640px ci-dessous où .dps-plateau__ramequin est
   moins large — sans jamais s'étirer avec sa hauteur à lui (160px, agrandie pour contenir la
   pastille, cf. plus haut). */
.dps-plateau__ramequin-photo {
	width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; background: var(--dps-pois);
	border: 6px solid var(--dps-blanc); box-shadow: var(--dps-ombre-2);
}
.dps-plateau__ramequin-photo img { width: 100%; height: 100%; object-fit: cover; }
.dps-plateau__pastille--ramequin {
	position: absolute; top: 120px; left: 50%; transform: translateX(-50%);
	white-space: normal; text-align: center; width: max-content; max-width: 128px; z-index: 2;
	font-size: 11px; line-height: 1.25; padding: 5px 10px;
}

.dps-courbe-carte {
	position: absolute; top: 20px; left: -32px; width: 230px; background: var(--dps-blanc); border-radius: 18px;
	box-shadow: var(--dps-ombre-2); padding: 14px 16px; z-index: 1;
}
.dps-courbe-carte p { display: flex; justify-content: space-between; font-size: 12px; margin: 10px 0 0; gap: 8px; }
.dps-courbe-carte__pic { color: var(--dps-pic); font-weight: 600; }
.dps-courbe-carte__douce { color: var(--dps-douce); font-weight: 600; text-align: right; }

/* ===================== Bento des repères ===================== */
.dps-bento { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 220px; gap: 20px; }
.dps-bento__tuile {
	border-radius: var(--dps-rayon); position: relative; overflow: hidden; display: flex; flex-direction: column;
	justify-content: flex-end; padding: 20px; min-width: 0; min-height: 0;
}
/* 04/10 — fond de repli en crème (--dps-pois) avec texte blanc : le contrôle de contraste lit
   le background-color réel de l'ancêtre positionné (il ne peut pas « voir » une photo ni le
   dégradé ::after par-dessus) et jugeait ce blanc-sur-crème illisible (1.26:1) — ce qui est
   aussi vrai pour un visiteur tant que la photo (loading="lazy") n'est pas encore chargée.
   Fond de repli assombri pour rester lisible à tout moment, cohérent avec le dégradé qui
   recouvre la photo une fois chargée. */
.dps-bento__tuile--photo { background: var(--dps-encre); color: var(--dps-blanc); }
.dps-bento__tuile--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.dps-bento__tuile--photo::after {
	/* 04/10 passe 2 : voile renforcé (.82 au lieu de .75, zone pleine prolongée) — sur les photos
	   claires (fruits d'automne…) le texte blanc restait difficile à lire. */
	content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(31,35,64,.88) 20%, transparent 65%); z-index: 1;
}
/* 04/10 (juge visuel, passe 2) : la vraie tuile qui débordait en haut sur les pages de rubrique
   était CELLE-CI (.dps-bento__tuile--photo, mosaïque d'en-tête de category.php) — mon correctif
   de la passe 1 avait visé .dps-rubrique-tuile__nom, une classe différente (grille « Les
   rubriques » de l'accueil, jamais fautive). Le texte, ancré en bas par justify-content:flex-end
   sur le parent, poussait vers le HAUT en grandissant et se faisait couper par l'overflow:hidden
   du haut de la tuile. Coupure propre à 2 lignes désormais, ici où le bug est réellement. */
.dps-bento__tuile--photo span {
	position: relative; z-index: 2; font-family: var(--dps-chif); font-weight: 600; font-size: 15px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3;
}
.dps-bento__tuile--chiffre { justify-content: center; align-items: flex-start; gap: 8px; }
.dps-bento__tuile--myrtille { background: var(--dps-encre); color: var(--dps-blanc); }
.dps-bento__tuile--mais { background: var(--dps-mais); color: var(--dps-encre); }
.dps-bento__tuile--pois { background: var(--dps-pois); color: var(--dps-encre); }
.dps-bento__chiffre { font-family: var(--dps-chif); font-weight: 700; font-size: 72px; line-height: 1; font-variant-numeric: tabular-nums; }
.dps-bento__chiffre--petit { font-size: 34px; } /* "56-69" est plus large que "55"/"70" seuls */
.dps-bento__legende { font-size: 13px; opacity: .85; }
.dps-bento__tuile--phare { background: var(--dps-blanc); color: var(--dps-encre); box-shadow: var(--dps-ombre-1); justify-content: flex-start; }
.dps-bento__tuile--phare img { width: 100%; height: 90px; object-fit: cover; border-radius: 12px; margin-bottom: 10px; }
.dps-bento__phare-kicker { font-family: var(--dps-chif); font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--dps-lien); }
.dps-bento__phare-titre { font-family: var(--dps-chif); font-weight: 600; font-size: 15px; margin-top: 4px; }

/* ===================== Outil « Ce repas fait-il un pic ? » ===================== */
.dps-outil { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 40px; align-items: start; }
.dps-outil__intro { color: #C9CCE6; margin-bottom: 20px; }
.dps-outil__boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.dps-outil__bouton {
	background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.2); color: var(--dps-blanc);
	padding: 10px 16px; border-radius: 999px; font-family: var(--dps-chif); font-weight: 600; font-size: 14px;
}
.dps-outil__bouton.est-choisi { background: var(--dps-mais); color: var(--dps-encre); border-color: var(--dps-mais); }
.dps-outil__source { font-size: 12px; color: #9EA3C8; }
.dps-outil__resultat { background: var(--dps-blanc); color: var(--dps-encre); border-radius: var(--dps-rayon-grand); padding: 28px; box-shadow: var(--dps-ombre-2); }
.dps-outil__nom { font-family: var(--dps-chif); font-weight: 700; font-size: 20px; margin: 0 0 14px; }
.dps-outil__barre-piste { background: var(--dps-pois); border-radius: 999px; height: 14px; overflow: hidden; margin-bottom: 10px; }
.dps-outil__barre { display: block; height: 100%; border-radius: 999px; background: var(--dps-douce); transition: width .4s ease, background .4s ease; }
.dps-outil__barre[data-niveau="moyen"] { background: var(--dps-mais); }
.dps-outil__barre[data-niveau="haut"] { background: var(--dps-pic); }
.dps-outil__valeur { font-family: var(--dps-chif); font-weight: 700; color: var(--dps-texte-2); margin: 0 0 16px; }
.dps-outil__photo { width: 100%; height: 140px; object-fit: cover; border-radius: 14px; margin-bottom: 16px; }
.dps-outil__gestes li { position: relative; padding-left: 26px; margin-bottom: 8px; font-size: 14px; }
.dps-outil__gestes li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 4px 4px 4px 0; background: var(--dps-douce); }

/* ===================== Le panier du mois ===================== */
.dps-panier { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; align-items: center; }
.dps-panier__photo { border-radius: var(--dps-rayon-grand) 0 0 var(--dps-rayon-grand); overflow: hidden; margin-top: -40px; margin-bottom: -40px; height: calc(100% + 80px); }
.dps-panier__photo img { width: 100%; height: 100%; object-fit: cover; }
.dps-panier__contenu p { color: var(--dps-encre); font-size: 17px; max-width: 46ch; }

/* ===================== Les rubriques ===================== */
/* Passe D (03/10) : 4/3 donnait des tuiles trop hautes (section à 850px à 1440, cible ≤700) —
   16/9 sur les 2 rangées de 3 compactes suffit à repasser sous la cible sans perdre la photo. */
/* 04/10 — même repli que .dps-bento__tuile--photo ci-dessus : fond sombre tant que la photo
   n'est pas chargée, pour que .dps-rubrique-tuile__nom (texte blanc) reste lisible. */
.dps-rubrique-tuile { position: relative; border-radius: var(--dps-rayon); overflow: hidden; aspect-ratio: 16/9; display: block; box-shadow: var(--dps-ombre-1); background: var(--dps-encre); }
.dps-rubrique-tuile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.dps-rubrique-tuile:hover img { transform: scale(1.05); }
.dps-rubrique-tuile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(31,35,64,.8), transparent 55%); }
.dps-rubrique-tuile__bas { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; display: flex; align-items: center; gap: 10px; color: var(--dps-blanc); z-index: 1; }
/* 04/10 (juge visuel, 390px) : un titre de rubrique long poussait cette barre plus haut que
   l'espace disponible, et .dps-rubrique-tuile (overflow:hidden) coupait le HAUT du texte. On
   limite maintenant le texte lui-même à 2 lignes avec une coupure propre (…), jamais un
   débordement muet. */
.dps-rubrique-tuile__nom {
	font-family: var(--dps-chif); font-weight: 700; font-size: 17px; flex: 1;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25;
}
.dps-rubrique-tuile__compte { background: var(--dps-mais); color: var(--dps-encre); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.dps-rubrique-tuile__bas svg { width: 18px; height: 18px; }

/* ===================== Qui écrit, qui relit ===================== */
.dps-equipe { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 40px; align-items: start; }
.dps-carte-auteur { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; background: var(--dps-blanc); border-radius: var(--dps-rayon); padding: 24px 16px; box-shadow: var(--dps-ombre-1); }
.dps-carte-auteur__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 4px solid var(--dps-mais); }
.dps-carte-auteur__nom { font-family: var(--dps-chif); font-weight: 700; font-size: 16px; }
.dps-carte-auteur__role { font-size: 13px; color: var(--dps-texte-2); }

.dps-etiquette { background: var(--dps-blanc); border-radius: var(--dps-rayon); border-top: 6px solid var(--dps-lien); padding: 24px; box-shadow: var(--dps-ombre-1); }
.dps-etiquette__titre { font-family: var(--dps-chif); font-weight: 700; margin: 0 0 14px; }
.dps-etiquette ul { display: flex; flex-direction: column; gap: 10px; }
.dps-etiquette li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--dps-filet); padding-bottom: 8px; font-size: 14px; gap: 12px; }
.dps-etiquette li span:first-child { color: var(--dps-texte-2); }
.dps-etiquette li span:last-child { font-family: var(--dps-chif); font-weight: 600; text-align: right; }
.dps-etiquette__maj { font-size: 12px; color: var(--dps-texte-2); margin: 14px 0 0; }

/* ===================== FAQ accueil + relance ===================== */
.dps-faq { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 32px; }
.dps-faq__item { background: var(--dps-blanc); border-radius: 16px; padding: 4px 20px; box-shadow: var(--dps-ombre-1); }
.dps-faq__item summary { font-family: var(--dps-chif); font-weight: 600; font-size: 16px; padding: 16px 0; cursor: pointer; list-style: none; position: relative; padding-right: 24px; }
.dps-faq__item summary::-webkit-details-marker { display: none; }
.dps-faq__item summary::after { content: "+"; position: absolute; right: 0; top: 14px; font-size: 20px; color: var(--dps-lien); }
.dps-faq__item[open] summary::after { content: "–"; }
.dps-faq__item p { margin: 0 0 18px; color: var(--dps-texte-2); font-size: 15px; }

.dps-relance {
	margin: 48px auto 0; max-width: 820px; background: var(--dps-encre); color: var(--dps-blanc); border-radius: var(--dps-rayon-grand);
	padding: 36px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.dps-relance__titre { font-family: var(--dps-titre); font-size: 26px; margin: 0; }

/* ===================== Formulaire plan (hero + compact) ===================== */
/* Resserré le 03/10 (DEFAUTS-V1 #4) avec le hero : la carte reste entière au-dessus du
   pli à chaque étape (consigne de Mathias). */
.dps-form {
	background: var(--dps-blanc); border-radius: 18px; box-shadow: var(--dps-ombre-2); padding: 14px 16px;
	max-width: 390px; min-width: 0; position: relative; overflow: hidden;
}
/* 04/10 (juge visuel passe 1) : bandeau ½ ¼ ¼ en haut, mêmes proportions/couleurs que le
   plateau. Passe 2 : encore jugé trop proche d'evasionfitness.fr — une ligne colorée en haut de
   carte reste le même SQUELETTE qu'un bandeau de progression générique, la couleur n'y change
   rien. Remplacé par un coin de plateau qui mord dans l'angle de la carte (disque conique ½·¼·¼
   tronqué par l'arrondi du coin) : une forme qu'aucune carte de formulaire générique n'a de
   raison de porter, parce qu'elle appartient au plateau, pas à un composant UI. */
/* 05/10 (jugement visuel passe 3, [16]) : au coin HAUT-GAUCHE, ce disque débordait de 34px
   vers le haut ET vers la gauche — pile sous le titre aligné à gauche, il recouvrait la
   lettre « V » de « Votre plan… » à 1920/1440/390. Déplacé au coin HAUT-DROIT : il mord
   toujours l'angle de la carte (même forme, même motif ½·¼·¼), mais déborde vers la droite,
   côté plateau, jamais sur le titre. */
.dps-form--hero::before {
	content: ""; position: absolute; top: -34px; right: -34px; left: auto; width: 84px; height: 84px; z-index: 0;
	border-radius: 50%; border: 10px solid var(--dps-blanc);
	background: conic-gradient(var(--dps-douce) 0 50%, var(--dps-mais) 50% 75%, var(--dps-lien) 75% 100%);
	box-shadow: var(--dps-ombre-1);
}
.dps-form--hero { padding-top: 20px; }
.dps-form--hero > * { position: relative; z-index: 1; }
.dps-form--compact { max-width: none; padding: 16px; }
.dps-form__titre { font-family: var(--dps-chif); font-weight: 700; font-size: 15px; margin: 0 0 2px; }
.dps-form__titre--petit { font-size: 15px; }
.dps-form__sous-titre { font-size: 11.5px; color: var(--dps-texte-2); margin: 0 0 7px; }

.dps-form__segments { display: flex; gap: 6px; margin-bottom: 5px; }
.dps-form__segment { flex: 1; height: 5px; border-radius: 999px; background: var(--dps-pois); }
.dps-form__segment.est-fait, .dps-form__segment.est-actif { background: var(--dps-mais); }
.dps-form__compteur { font-size: 11px; color: var(--dps-texte-2); margin: 0 0 7px; }

.dps-form__etape { display: none; border: none; padding: 0; margin: 0; }
.dps-form__etape.est-active { display: block; }
.dps-form__etape legend { font-family: var(--dps-chif); font-weight: 700; font-size: 14px; padding: 0; margin: 0 0 6px; }

.dps-form__tuiles { display: grid; gap: 6px; }
.dps-form__tuiles--2col { grid-template-columns: repeat(2, minmax(0,1fr)); }
.dps-form__tuiles--1col { grid-template-columns: 1fr; }
.dps-form__tuile {
	display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
	border: 1.5px solid var(--dps-filet); border-radius: 11px; padding: 7px 9px; font-size: 12px; font-weight: 600;
	line-height: 1.2; color: var(--dps-encre); transition: border-color .15s ease, background .15s ease; min-width: 0;
}
/* Puce ronde colorée (même motif que .dps-plan-repas__icone) plutôt qu'une icône nue : fait
   partie du même système visuel que le reste du site, pas de la grille à pictogrammes neutre
   d'evasionfitness.fr. */
.dps-form__tuile svg {
	width: 16px; height: 16px; color: var(--dps-encre); padding: 5px; box-sizing: content-box;
	background: var(--dps-pois); border-radius: 999px;
}
.dps-form__tuile:hover { border-color: var(--dps-lien); }
.dps-form__tuile.est-choisi { border-color: var(--dps-mais); background: #FFF8E4; }
.dps-form__tuile--pleine { grid-column: 1 / -1; flex-direction: row; align-items: center; }

.dps-form__retour { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--dps-texte-2); margin-top: 12px; }
.dps-form__retour svg { width: 16px; height: 16px; transform: rotate(180deg); }

.dps-form__champs--cote-a-cote { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dps-form__champ { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--dps-texte-2); margin-bottom: 10px; }
.dps-form__champ input {
	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;
}
.dps-form__champ input:focus { border-color: var(--dps-lien); }
.dps-form__champ--telephone { margin-top: -2px; }
/* Passe D (03/10) : .dps-form__champ{display:flex} (règle de classe) l'emportait sur le
   [hidden]{display:none} par défaut du navigateur (une règle d'auteur bat toujours une règle
   UA, même à spécificité égale) — le champ téléphone restait visible même masqué par JS. */
.dps-form__champ[hidden] { display: none; }
.dps-form__erreur { color: var(--dps-pic); font-size: 12.5px; margin: -2px 0 10px; }
.dps-form__rgpd { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--dps-texte-2); margin-bottom: 10px; }
.dps-form__rgpd input { margin-top: 3px; }
.dps-form__avertissement-sante {
	font-size: 11.5px; color: var(--dps-texte-2); border: 1px solid var(--dps-filet); border-radius: 10px;
	padding: 8px 10px; margin: 0 0 14px; background: var(--dps-fond);
}
.dps-form__ligne-envoi { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dps-form__ligne-envoi .dps-form__retour { margin-top: 0; }
.dps-form__envoyer { flex: 1; font-size: 14.5px; padding: 14px 18px; }
.dps-form__envoyer.est-desactive { opacity: .6; pointer-events: none; }
.dps-form__piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.dps-form__confirmation { display: none; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 12px 4px; }
.dps-form__confirmation.est-visible { display: flex; }
.dps-form__confirmation svg { width: 44px; height: 44px; color: var(--dps-douce); }
.dps-form__confirmation-titre { font-family: var(--dps-chif); font-weight: 700; font-size: 17px; margin: 0; }

/* ===================== Encadré avertissement santé (dans les blocs figés) ===================== */
p.avertissement-sante, .dps-avertissement-sante {
	border: 1.5px solid var(--dps-filet); background: var(--dps-fond); border-radius: 14px;
	padding: 14px 18px; font-size: 14px; color: var(--dps-texte-2); margin: 20px 0;
}

/* ===================== Responsive ===================== */
@media (max-width: 1100px) {
	.dps-nav { display: none; }
	.dps-entete__bascule { display: flex; }
	.dps-hero { grid-template-columns: 1fr; grid-template-areas: "visuel" "entete" "action"; }
	.dps-hero__visuel { min-height: 320px; }
	.dps-plateau { height: 320px; }
	.dps-plateau__ramequin { width: 100px; height: 136px; top: -14px; right: 18px; }
	.dps-plateau__pastille--ramequin { top: 96px; }
	.dps-courbe-carte { left: 50%; transform: translateX(-50%); top: auto; bottom: -24px; width: 220px; }
	.dps-hero__form { max-width: none; }
	.dps-bento { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 180px; }
	.dps-grille--4, .dps-grille--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.dps-outil { grid-template-columns: 1fr; }
	.dps-panier { grid-template-columns: 1fr; }
	.dps-panier__photo { margin: 0; height: 260px; border-radius: var(--dps-rayon-grand); }
	.dps-equipe { grid-template-columns: 1fr; }
	.dps-faq { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.dps-conteneur { padding: 0 16px; }
	.dps-section { padding: 48px 0; }
	.dps-titre-section { font-size: 30px; }

	/* Passe E (04/10, DEFAUTS captures-v4) : ordre mobile imposé par Mathias — pastille/titre/
	   chapo, PUIS le bandeau plateau, PUIS la carte formulaire. Avant : .dps-hero__visuel passait
	   en premier avec un min-height:320px hérité du palier ≤1100px alors que le bandeau ne fait
	   que 150px ici — ce vide forcé décalait tout le reste et la carte « courbe », positionnée en
	   bottom négatif relatif à ce conteneur surdimensionné, retombait SUR la pastille du titre. */
	.dps-hero { grid-template-areas: "entete" "visuel" "action"; gap: 6px; }
	.dps-hero-section { padding-top: 2px; padding-bottom: 6px; }
	.dps-hero__entete { padding-top: 0; }
	/* 04/10 (juge visuel, passe 2) : les 5 choix de l'étape 1 du formulaire retombaient sous le
	   bandeau cookies — bande de vignettes ramenée à ~80px et titre/chapô/formulaire resserrés
	   au maximum raisonnable, pour gagner la place sans rien cacher. Mesuré en conditions
	   réelles (Playwright) jusqu'à tenir au-dessus du bandeau. */
	.dps-hero__surtitre { font-size: 10px; padding: 2px 7px; margin-bottom: 3px; }
	.dps-hero__titre { font-size: 23px; line-height: 1.04; margin-bottom: 3px; }
	.dps-hero__sous-titre { display: none; } /* répété par le titre du formulaire juste en dessous */
	.dps-hero__visuel { min-height: 0; margin-bottom: 18px; }
	.dps-hero__form { margin-bottom: 4px; }
	/* 05/10 (jugement visuel passe 3, [16]) : à 390px, les 3 tuiles en 2fr/1fr/1fr sortaient de
	   l'écran à droite (« rubriq… » coupé) et « Mis à jour » s'empilait sur 3 lignes contre le
	   bord. Empilées pleine largeur : chaque libellé tient sur une ligne, rien ne déborde. */
	.dps-hero__preuve { grid-template-columns: 1fr; gap: 8px; }
	.dps-hero__preuve li { padding: 8px 12px; }
	.dps-hero__preuve-date { flex-wrap: nowrap; align-items: center; }
	.dps-hero__preuve-date .dps-chiffre--texte,
	.dps-hero__preuve-date .dps-hero__preuve-libelle { flex: none; }

	.dps-form--hero { padding-top: 10px; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; }
	.dps-form__titre { font-size: 14px; }
	.dps-form__sous-titre { display: none; } /* 04/10 : phrase d'accompagnement retirée à 390 seulement, le titre suffit — gagne ~30px */
	/* 04/10 (juge visuel passe 1 §5, oublié — refait passe 2) : les 5 choix de l'étape 1
	   s'empilaient sur 5 lignes (hérité du palier ≤1100px) au lieu de 2 colonnes compactes —
	   repassés à 2 colonnes (3 lignes au lieu de 5), gain ~120px, indispensable pour tenir
	   au-dessus du bandeau cookies. */
	.dps-form__tuiles--2col { grid-template-columns: 1fr 1fr; gap: 5px; }
	.dps-form__tuile { padding: 6px 7px; font-size: 10.5px; gap: 3px; }
	.dps-form__tuile svg { width: 13px; height: 13px; padding: 3px; }
	.dps-form__progression { margin-bottom: 4px; }
	.dps-form__segments { margin-bottom: 3px; }
	.dps-form__compteur { font-size: 10px; margin-bottom: 4px; }
	.dps-form__etape legend { font-size: 12px; margin-bottom: 4px; }
	.dps-plateau { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr; height: 76px; border-radius: 16px; border-width: 4px; gap: 5px; }
	.dps-plateau__compartiment--legumes { grid-row: 1; grid-column: 1; }
	.dps-plateau__compartiment--cereales { grid-row: 1; grid-column: 2; }
	.dps-plateau__compartiment--proteines { grid-row: 1; grid-column: 3; }
	/* Étiquettes entières impossibles sur un tiers de 390px : on bascule sur le libellé court
	   (½, ¼, ¼) voulu par la DA au lieu de tronquer "¼ féculents complets" au milieu d'un mot. */
	.dps-plateau__pastille { font-size: 10px; padding: 4px 9px; left: 6px; top: 6px; max-width: none; }
	.dps-plateau__pastille-texte { display: none; }
	.dps-plateau__pastille-court { display: inline; }
	.dps-plateau__ramequin { width: 50px; height: 50px; top: auto; bottom: -10px; right: 10px; border-width: 3px; }
	.dps-plateau__pastille--ramequin { display: none; }
	/* La carte « courbe sans pic » exige de la place (chevauchait la pastille du titre une fois
	   le bandeau compacté) : masquée sur mobile, cf. ramequin + bandeau qui portent déjà le
	   message visuel à cet écran. */
	.dps-courbe-carte { display: none; }
	.dps-bento { grid-template-columns: 1fr; grid-auto-rows: 160px; }
	.dps-grille--4, .dps-grille--3, .dps-grille--2 { grid-template-columns: 1fr; }
	/* .dps-form__tuiles--2col reste à 2 colonnes à 390px (cf. plus haut, juge visuel passe 2) —
	   cette ancienne règle à 1 colonne a été retirée d'ici, elle gagnait sur la nouvelle en
	   venant après dans la même media query. */
	.dps-form__champs--cote-a-cote { grid-template-columns: 1fr; }
	.dps-rubrique-tuile { aspect-ratio: 16/10; }
	.dps-rubrique-tuile__nom { font-size: 14.5px; }
	.dps-rubrique-tuile__bas { padding: 12px; }
	.dps-relance { flex-direction: column; text-align: center; padding: 28px 20px; }
	.dps-outil__resultat { padding: 20px; }
	/* Passe E (04/10) : gardé visible (compact) plutôt que masqué — c'est l'ancre « Mon plan
	   anti-pics » que la règle de Mathias accepte comme bouton de repli si la carte formulaire
	   elle-même n'est pas encore défilée en vue ; toujours dans le bandeau collant, donc
	   toujours au-dessus du bandeau cookies. */
	.dps-entete__cta { font-size: 12.5px; padding: 8px 12px; }
	.dps-entete__barre { gap: 10px; height: 60px; }
	.dps-logo__texte { font-size: 14px; }
}

/* ===================== Habillage des blocs figés (ton CSS, jamais la structure) ===================== */

/* Le bloc figé footer.css écrit `.sbt-btn{ color:#fff }` en dur : sur l'accent Jaune maïs
   de ce site, du blanc sur jaune est quasi illisible (« Nous écrire » rendu vide à
   l'écran, DEFAUTS-V1 #2). On surcharge la couleur de texte des boutons pleins posés sur
   l'accent, sans toucher à blocs/footer.css. */
.sbt-btn, .sbt-footer .sbt-btn { color: var(--dps-encre); }
/* 04/10 — le bloc figé footer.css écrit aussi `.sbt-footer a{ color:#c4c7e4 }` (lavande sur
   fond sombre) : cette règle a DEUX classes (.sbt-footer a), plus spécifique que notre simple
   `.sbt-btn`, et gagnait sur le bouton jaune du bandeau « Nous écrire » (1.07:1, texte quasi
   invisible). `.sbt-footer .sbt-btn` ci-dessus a la même spécificité à deux classes et vient
   APRÈS dans la feuille : elle regagne la main sans toucher à blocs/footer.css. */
.sbt-btn--fantome { color: inherit; }
/* 04/10 — même défaut que ci-dessus, posé par un AUTRE bloc figé (blocs/partial-bloc-auteur.css,
   `.sbt-auteur-actions .sbt-btn{ color:#fff }`, bouton « Voir sa page » de la fiche auteure) :
   1.55:1, blanc sur jaune maïs. Même remède, même principe (spécificité égale à deux classes,
   posée après dans la feuille). */
.sbt-auteur-actions .sbt-btn { color: var(--dps-encre); }

/* Le bloc figé partial-encadres.css écrit `.sbt-encadre--retenir{ color:#fff }` (pensé
   pour un fond sombre) ; notre habillage (pages.css) repasse son fond en blanc mais le
   texte restait blanc sur blanc, invisible (DEFAUTS-V1 #10). Filet de sécurité ici aussi. */
.sbt-encadre--retenir { color: var(--dps-encre); }

/* 04/10 (juge visuel) — pied de page : les titres de colonne (RUBRIQUES, GUIDES PHARES)
   héritent de --sb-titre, qui vaut notre serif d'affichage fin (--dps-titre, weight 300) sur
   TOUT le site — très bien pour un H1 de 60px, illisible à 13px en capitales sur fond sombre.
   On repasse ces libellés précis sur notre police d'interface (--dps-chif) en plus gras. */
.sbt-footer-colonne .sbt-t4 { font-family: var(--dps-chif); font-weight: 700; font-size: .75rem; }