@font-face {
  font-family: 'Noto Serif Display';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(../fonts/noto-serif-display-italic-100-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Serif Display';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(../fonts/noto-serif-display-italic-100-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Serif Display';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(../fonts/noto-serif-display-normal-100-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Serif Display';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(../fonts/noto-serif-display-normal-100-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ysabeau Office';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ysabeau-office-italic-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ysabeau Office';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ysabeau-office-italic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ysabeau Office';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ysabeau-office-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ysabeau Office';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ysabeau-office-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ysabeau Office';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ysabeau-office-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ysabeau Office';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ysabeau-office-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ysabeau Office';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/ysabeau-office-normal-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ysabeau Office';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/ysabeau-office-normal-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ysabeau Office';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/ysabeau-office-normal-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ysabeau Office';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/ysabeau-office-normal-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
Theme Name: StarPages — Loge
Theme URI: https://starpages.net/
Author: StarPages
Description: Thème code pur du magazine « StarPages ». Le socle partagé (socle/) gère la
plomberie technique du réseau ; tout ce qui se voit — palette, typographie, gabarits, logo,
procédés — est propre à ce site (voir assets/css/app.css et blocs-figes/blocs-valides.css).
Version: 1.0.0
License: Propriétaire
Text Domain: starpages-loge
*/

/* Fichier volontairement quasi vide : le socle l'enqueue automatiquement (sbs_assets()),
   mais tout l'habillage réel vit dans blocs-figes/blocs-valides.css puis assets/css/app.css,
   chargés explicitement par functions.php (ordre maîtrisé). */

/*
 * BLOCS FIGÉS — généraliste (journal/magazine) — CSS consolidé
 * Sources : pansemiotique.com/assets/pj/pj.css + style.css (sidebar/sommaire/encadrés/
 * auteur/footer), paroisse-saintpoldeleon.fr/style.css (FAQ .accordeon → .sb-faq),
 * cslp06.org/style.css (inspiration .encadre-point, non reprise telle quelle).
 * Toutes les couleurs/polices/ombres/rayons sont des VARIABLES --sb-* : un nouveau site
 * ne redéfinit QUE le bloc :root ci-dessous (ou une partie), jamais les règles plus bas.
 *
 * INTERDIT DE MODIFIER : les sélecteurs, la structure grid/flex, les media queries de
 * bascule mobile (760px). LIBRE DE MODIFIER : toutes les valeurs du :root.
 * Copie conforme de theme-v2/blocs-figes/blocs-valides.css — ne pas éditer ici :
 * toute amélioration se fait à la source (dixit KIT-DESIGNER.md) pour les 50 sites.
 */

:root {
	/* --- Couleurs --- */
	--sb-fond: #ffffff;
	--sb-encre: #0F1626;      /* texte principal */
	--sb-doux: #4B5266;       /* texte atténué (métadonnées) */
	--sb-filet: #E1E4EE;      /* bordures fines */
	--sb-accent: #1B358A;     /* couleur de marque / liens */
	--sb-accent-fort: #13245E;/* hover, boutons pleins */
	--sb-accent-2: #9A4212;   /* couleur secondaire (numéros, puces) */
	--sb-surf: #F3F4FA;       /* fond encadré clair niveau 1 */
	--sb-surf2: #E8ECF7;      /* fond encadré clair niveau 2 (surbrillance sommaire) */
	--sb-rub: var(--sb-accent); /* couleur de la rubrique courante, posée en inline style par article */

	/* --- Formes --- */
	--sb-rayon: 12px;
	--sb-ombre: 0 1px 2px rgba(19,36,94,.06), 0 4px 14px rgba(19,36,94,.07);
	--sb-ombre-haut: 0 2px 4px rgba(19,36,94,.08), 0 10px 26px rgba(19,36,94,.12);

	/* --- Typo --- */
	--sb-titre: "Manrope", "Helvetica Neue", Arial, sans-serif;   /* titres, UI, chiffres */
	--sb-lecture: "Newsreader", Georgia, "Times New Roman", serif; /* corps de lecture, chapô */

	/* --- Barre latérale --- */
	--sb-aside-largeur: 300px;
	--sb-haut-collant: 150px; /* distance du haut à laquelle une zone devient sticky (hauteur de l'en-tête) */
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--sb-fond: #10131C; --sb-encre: #EDEFF7; --sb-doux: #A7AFC6; --sb-filet: #262B3C;
		--sb-surf: #171B29; --sb-surf2: #1C2133;
	}
}
:root[data-theme="dark"] {
	--sb-fond: #10131C; --sb-encre: #EDEFF7; --sb-doux: #A7AFC6; --sb-filet: #262B3C;
	--sb-surf: #171B29; --sb-surf2: #1C2133;
}

.sb-cadre { width: min(1280px, 100% - 2.5rem); margin-inline: auto; }
.sb-kicker { font: 700 11.5px/1.5 var(--sb-titre); letter-spacing: .11em; text-transform: uppercase; color: var(--sb-accent); }

/* ============================= ARTICLE — en-tête ============================= */

.sb-article-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--sb-rub); }
.sb-article-hero-grille { display: grid; grid-template-columns: minmax(0,1.04fr) minmax(0,1fr); gap: clamp(32px,4vw,60px); align-items: center; padding-block: clamp(30px,3vw,44px) clamp(36px,3.4vw,50px); }
.sb-article-hero--sans-photo .sb-article-hero-grille { grid-template-columns: minmax(0,900px); }
.sb-article-ariane { color: #BCC6E6; margin-bottom: 1.1rem; }
.sb-article-ariane a { color: #EAEDF9; }
.sb-article-titre { color: #fff; font: 800 clamp(32px,3.2vw,47px)/1.07 var(--sb-titre); letter-spacing: -.034em; margin: 0; text-wrap: balance; }
.sb-article-chapo { font: 400 clamp(18px,1.45vw,21px)/1.5 var(--sb-lecture); color: #D6DDF0; margin: 1.05rem 0 0; max-width: 40em; }
.sb-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.16); color: #C8D0E7; font: 600 13.5px/1.4 var(--sb-titre); }
.sb-article-auteur { display: inline-flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; min-height: 44px; }
.sb-article-auteur .sb-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255,255,255,.85); flex: 0 0 48px; }
.sb-article-auteur-txt { display: flex; flex-direction: column; line-height: 1.25; }
.sb-article-auteur-nom { font: 800 15px/1.25 var(--sb-titre); color: #fff; }
.sb-article-figure { position: relative; margin: 0; }
.sb-article-figure img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 18px; box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 26px 60px rgba(4,9,32,.45); }

/* ============================= BARRE LATÉRALE + SOMMAIRE ============================= */

.sb-art-corps { display: grid; grid-template-columns: minmax(0,1fr) var(--sb-aside-largeur); gap: 48px; align-items: start; margin-top: 44px; }
.sb-art-corps--seul { grid-template-columns: minmax(0,860px); }
.sb-art-principal { min-width: 0; max-width: 820px; }
.sb-art-aside { position: relative; align-self: stretch; display: flex; flex-direction: column; gap: 20px; }

.sb-colle-zone { position: relative; }
.sb-colle-zone--som { flex: 1 1 auto; }
.sb-colle-zone--pub { flex: 0 0 auto; min-height: min(1100px,45%); }
.sb-colle-zone--pub:only-child { flex: 1 1 auto; }
.sb-colle[data-colle="true"] { position: sticky; top: var(--sb-haut-collant); }

.sb-sommaire { position: relative; overflow: hidden; background: var(--sb-fond); border: 1px solid var(--sb-filet); border-radius: 16px; padding: 1.25rem 1.25rem .9rem; box-shadow: var(--sb-ombre); }
.sb-sommaire::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--sb-rub); }
.sb-sommaire-tete { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.sb-sommaire-duree { font: 700 12px/1 var(--sb-titre); color: var(--sb-doux); background: var(--sb-surf); border-radius: 999px; padding: .4rem .65rem; white-space: nowrap; }
.sb-sommaire-barre { height: 4px; border-radius: 4px; background: var(--sb-surf2); margin: .9rem 0 .5rem; overflow: hidden; }
.sb-sommaire-barre span { display: block; height: 100%; border-radius: inherit; background: var(--sb-rub); transform: scaleX(0); transform-origin: 0 50%; transition: transform .12s linear; }
.sb-sommaire ol { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.sb-sommaire li { counter-increment: s; }
.sb-sommaire li + li { border-top: 1px solid var(--sb-filet); }
.sb-sommaire a { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: .2rem; align-items: start; margin: 0 -.55rem; padding: .62rem .55rem; border-radius: 10px; font: 700 14.5px/1.38 var(--sb-titre); color: var(--sb-encre); text-decoration: none; transition: background .15s ease, color .15s ease; }
.sb-sommaire a::before { content: counter(s,decimal-leading-zero); font: 800 12.5px/1.7 var(--sb-titre); color: var(--sb-accent-2); }
.sb-sommaire a:hover { background: var(--sb-surf); color: var(--sb-accent-fort); }
.sb-sommaire a[aria-current="true"] { background: var(--sb-surf2); color: var(--sb-accent-fort); box-shadow: inset 3px 0 0 var(--sb-rub); }

.sb-sommaire-mobile { display: none; }
.sb-art-aside-pub { margin: 0; }

@media (max-width: 980px) { .sb-art-corps { grid-template-columns: minmax(0,1fr) 260px; gap: 36px; } }
@media (max-width: 760px) {
	.sb-article-hero-grille { grid-template-columns: 1fr; gap: 26px; padding-block: 28px 0; }
	.sb-article-titre { font-size: 29px; line-height: 1.09; }
	.sb-art-corps { grid-template-columns: 1fr; gap: 0; margin-top: 26px; }
	.sb-art-aside { display: none; }
	.sb-sommaire-mobile { display: block; position: relative; overflow: hidden; margin: 0 0 1.5rem; border: 1px solid var(--sb-filet); border-radius: 14px; background: var(--sb-fond); box-shadow: var(--sb-ombre); padding: 0; }
	.sb-sommaire-mobile::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--sb-rub); }
	.sb-sommaire-mobile summary { list-style: none; display: flex; align-items: center; gap: .6rem; min-height: 54px; padding: .35rem 1rem 0; font: 800 15px/1.2 var(--sb-titre); color: var(--sb-encre); cursor: pointer; }
	.sb-sommaire-mobile summary::-webkit-details-marker { display: none; }
	.sb-sommaire-mobile summary em { font: 700 12.5px/1 var(--sb-titre); font-style: normal; color: var(--sb-doux); background: var(--sb-surf); border-radius: 999px; padding: .35rem .6rem; }
	.sb-sommaire-mobile ol { list-style: none; counter-reset: s; margin: 0; padding: .2rem 1rem .8rem; }
	.sb-sommaire-mobile li { counter-increment: s; padding: 0; border-top: 1px solid var(--sb-filet); }
	.sb-sommaire-mobile a { display: grid; grid-template-columns: 28px minmax(0,1fr); min-height: 44px; align-items: center; padding: .5rem 0; font: 700 15px/1.35 var(--sb-titre); color: var(--sb-encre); text-decoration: none; }
	.sb-sommaire-mobile a::before { content: counter(s,decimal-leading-zero); font: 800 12.5px/1 var(--sb-titre); color: var(--sb-accent-2); }
}
@media (prefers-reduced-motion: reduce) { .sb-sommaire-barre span, .sb-sommaire a { transition: none; } }

/* ============================= ENCADRÉS ============================= */

/* Listes → cartes à coches / étapes numérotées */
.sb-texte .sb-steps, .sb-texte .sb-cards { list-style: none; padding: 0; margin: 1.75rem 0; display: grid; gap: .85rem; }
.sb-texte .sb-steps { counter-reset: sbetape; }
.sb-texte .sb-steps > li { position: relative; margin: 0; padding: .95rem 1.1rem .95rem 3.9rem; background: var(--sb-surf); border-radius: var(--sb-rayon); line-height: 1.55; }
.sb-texte .sb-steps > li::before { counter-increment: sbetape; content: counter(sbetape); position: absolute; left: 1rem; top: .85rem; width: 2.1rem; height: 2.1rem; border-radius: 999px; background: var(--sb-accent); color: #fff; font: 800 15px/2.1rem var(--sb-titre); text-align: center; }
.sb-texte .sb-cards { display: block; margin: 1.6rem 0; padding: .35rem 1.3rem; background: var(--sb-surf); border: 1px solid var(--sb-filet); border-left: 4px solid var(--sb-rub); border-radius: var(--sb-rayon); }
.sb-texte .sb-cards > li { position: relative; margin: 0; padding: .8rem 0 .8rem 2.1rem; font: 500 16.5px/1.55 var(--sb-lecture); color: var(--sb-encre); }
.sb-texte .sb-cards > li + li { border-top: 1px solid var(--sb-filet); }
.sb-texte .sb-cards > li::before { content: ""; position: absolute; left: 0; top: 1.02rem; width: 1.3rem; height: 1.3rem; border-radius: 999px; background: var(--sb-rub) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/.8rem no-repeat; }

/* Tableau comparatif → cartes */
.sb-compare { display: grid; grid-template-columns: repeat(var(--sb-compare-cols, auto-fit), minmax(min(100%,17rem),1fr)); gap: 1rem; margin: 1.75rem 0; }
.sb-compare-card { padding: 1.25rem 1.35rem; background: var(--sb-fond); border: 1px solid var(--sb-filet); border-top: 4px solid var(--sb-rub); border-radius: var(--sb-rayon); box-shadow: var(--sb-ombre); }
.sb-compare-card h3 { font: 800 18px/1.25 var(--sb-titre); margin: 0 0 .8rem; color: var(--sb-encre); }
.sb-compare-row { padding: .6rem 0; border-top: 1px solid var(--sb-filet); }
.sb-compare-row:first-child { border-top: 0; padding-top: 0; }
.sb-compare-row dt { margin: 0 0 .2rem; font: 700 11.5px/1.4 var(--sb-titre); letter-spacing: .08em; text-transform: uppercase; color: var(--sb-doux); }
.sb-compare-row dd { margin: 0; font: 400 15.5px/1.5 var(--sb-lecture); color: var(--sb-encre); }

/* Bloc Sources — jamais cliquable */
.sb-sources { background: var(--sb-surf); padding: 24px 28px; border-top: 3px solid var(--sb-encre); margin: 32px 0; }
.sb-sources-titre { font: 700 11px var(--sb-titre); letter-spacing: .12em; text-transform: uppercase; color: var(--sb-encre); margin: 0 0 14px; }
.sb-sources ul, .sb-sources ol { list-style: none; margin: 0; padding: 0; counter-reset: sbsrc; }
.sb-sources ol li { counter-increment: sbsrc; }
.sb-sources ol li::before { content: counter(sbsrc); flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--sb-encre); color: var(--sb-fond); font: 700 11px/22px var(--sb-titre); text-align: center; }
.sb-sources li { display: flex; align-items: baseline; gap: 8px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--sb-encre) 10%, transparent); }
.sb-sources li:first-child { border-top: 0; }

/* "À lire aussi" terminal → bloc de liens */
.sb-alire { margin: 2.4rem 0 1.6rem; padding: 1.2rem 1.3rem .6rem; border: 1px solid var(--sb-filet); border-top: 4px solid var(--sb-rub); border-radius: var(--sb-rayon); background: var(--sb-fond); box-shadow: var(--sb-ombre); }
.sb-alire ul { list-style: none; margin: 0; padding: 0; }
.sb-alire li { border-top: 1px solid var(--sb-filet); }
.sb-alire li:first-child { border-top: 0; }
.sb-alire a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding: .75rem 0; font: 700 16px/1.35 var(--sb-titre); color: var(--sb-encre); text-decoration: none; }
.sb-alire a:hover { color: var(--sb-accent); }
.sb-alire a svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* Encadré "à retenir" automatique */
.sb-encadre-cle { margin: 40px 0; padding: 6px 28px 20px; background: var(--sb-surf); border-radius: var(--sb-rayon); }
.sb-encadre-cle h2 { border-top: 0 !important; }

/* ============================= FAQ ============================= */

.sb-faq { margin: 3rem auto 0; max-width: var(--sb-faq-largeur, 760px); }
.sb-faq-titre { text-align: center; margin-bottom: 1.2rem; }
.sb-faq-liste { display: grid; gap: .85rem; }
.sb-faq-carte { border: 1px solid var(--sb-filet); border-radius: var(--sb-rayon); padding: 16px 20px; background: var(--sb-fond); }
.sb-faq-carte summary { cursor: pointer; font: 700 16px/1.4 var(--sb-titre); color: var(--sb-encre); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; }
.sb-faq-carte summary::-webkit-details-marker { display: none; }
.sb-faq-carte summary::after { content: "+"; font-size: 22px; color: var(--sb-accent); flex: none; }
.sb-faq-carte[open] summary::after { content: "–"; }
.sb-faq-carte p { margin: 12px 0 0; color: var(--sb-doux); font: 400 15.5px/1.6 var(--sb-lecture); }

/* ============================= SIGNATURE / AUTEUR ============================= */

.sb-auteur-carte { display: grid; grid-template-columns: 110px 1fr; gap: 26px; align-items: start; margin: 46px 0 10px; padding: 28px; background: var(--sb-surf); border-top: 3px solid var(--sb-encre); border-radius: var(--sb-rayon); }
.sb-avatar { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; display: block; border: 4px solid var(--sb-fond); box-shadow: 0 8px 20px -10px rgba(0,0,0,.45); }
.sb-avatar-symbole { display: inline-grid; place-items: center; background: var(--sb-fond); }
.sb-avatar-symbole svg { width: 60%; height: 60%; }
.sb-auteur-nom { margin: 4px 0 2px; font: 400 28px/1.2 var(--sb-titre); }
.sb-auteur-nom a { text-decoration: none; color: var(--sb-encre); }
.sb-auteur-role { margin: 0 0 12px; font: 600 13px/1.4 var(--sb-titre); color: var(--sb-accent); }
.sb-auteur-bio { margin: 0 0 16px; font: 16px/1.7 var(--sb-lecture); color: var(--sb-encre); }
.sb-auteur-liens { display: flex; flex-wrap: wrap; gap: 10px; }
.sb-auteur-liens a { padding: 10px 16px; border-radius: 99px; border: 1px solid var(--sb-encre); font: 600 13px/1 var(--sb-titre); text-decoration: none; color: var(--sb-encre); }
.sb-auteur-liens a:first-child { background: var(--sb-encre); color: var(--sb-fond); }
@media (max-width: 760px) { .sb-auteur-carte { grid-template-columns: 72px 1fr; gap: 16px; padding: 20px 18px; } .sb-avatar { width: 72px; height: 72px; border-width: 3px; } .sb-auteur-nom { font-size: 23px; } .sb-auteur-bio { font-size: 15px; } }

/* ============================= PIED DE PAGE ============================= */

.sb-pied { background: var(--sb-encre); color: #fff; padding-top: 48px; }
.sb-pied-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.14); }
.sb-pied-marque { display: flex; align-items: center; gap: 16px; }
.sb-pied-nom { font: 800 18px var(--sb-titre); margin: 0; }
.sb-pied-baseline { font: 400 14px/1.5 var(--sb-lecture); color: rgba(255,255,255,.65); margin: 4px 0 0; max-width: 42ch; }
.sb-pied-loupe { display: flex; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; overflow: hidden; }
.sb-pied-loupe input { background: transparent; border: 0; color: #fff; padding: 10px 16px; min-width: 200px; }
.sb-pied-loupe button { border: 0; background: rgba(255,255,255,.12); color: #fff; padding: 10px 18px; cursor: pointer; }
.sb-pied-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 32px; padding-block: 32px; }
.sb-pied-titre { font: 700 13px var(--sb-titre); text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.55); margin: 0 0 14px; }
.sb-pied-pastilles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sb-pastille { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--sb-titre); padding: 6px 12px; border-radius: 999px; text-decoration: none; }
.sb-pied-compte { opacity: .75; font-weight: 500; }
.sb-pied-rubriques { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sb-pied-rubrique { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.sb-pied-rubrique-tete { display: flex; align-items: center; gap: 8px; font: 700 14px var(--sb-titre); color: #fff; }
.sb-pied-rubrique-point { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.sb-pied-rubrique-nom { text-decoration: none; }
.sb-pied-rubrique:hover .sb-pied-rubrique-nom { text-decoration: underline; text-underline-offset: 3px; }
.sb-pied-rubrique-chapo { font: 400 13px/1.45 var(--sb-lecture); color: rgba(255,255,255,.62); }
.sb-pied-fil, .sb-pied-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sb-pied-fil a, .sb-pied-liste a { color: rgba(255,255,255,.85); text-decoration: none; font: 500 14px var(--sb-titre); }
.sb-pied-fil a:hover, .sb-pied-liste a:hover { color: #fff; text-decoration: underline; }
.sb-pied-fil time { display: block; font-size: 11px; color: rgba(255,255,255,.5); }
.sb-ours { padding-block: 20px; border-top: 1px solid rgba(255,255,255,.14); font: 500 13px var(--sb-titre); color: rgba(255,255,255,.6); }

/* Nav mobile basse — facultative */
.sb-nav-mobile { display: none; }
@media (max-width: 760px) {
	.sb-nav-mobile { display: flex; position: fixed; inset: auto 0 0; z-index: 40; background: var(--sb-fond); border-top: 1px solid var(--sb-filet); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
	.sb-nav-mobile a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; justify-content: center; color: var(--sb-doux); text-decoration: none; font: 600 11px var(--sb-titre); }
	.sb-nav-mobile a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
	.sb-nav-mobile a.is-actif { color: var(--sb-accent); }
}

.sb-encadre-essentiel { background: var(--sb-surf2); border-left: 4px solid var(--sb-accent); border-radius: var(--sb-rayon); padding: 18px 22px 8px; margin: 28px 0; }
.sb-encadre-essentiel > .sb-kicker, .sb-encadre-chiffre > .sb-kicker { display: block; font: 700 11px var(--sb-titre); letter-spacing: .12em; text-transform: uppercase; color: var(--sb-accent-fort); margin: 0 0 8px; }
.sb-encadre-essentiel ul { list-style: none; margin: 0; padding: 0; background: none; border: 0; }
.sb-encadre-essentiel li { position: relative; padding: 8px 0 10px 28px; border-top: 1px solid color-mix(in srgb, var(--sb-encre) 10%, transparent); font: 400 16px/1.5 var(--sb-lecture); color: var(--sb-encre); }
.sb-encadre-essentiel li:first-child { border-top: 0; }
.sb-encadre-essentiel li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 12px; height: 7px; border-left: 3px solid var(--sb-accent); border-bottom: 3px solid var(--sb-accent); transform: rotate(-45deg); }
.sb-encadre-chiffre { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: center; background: var(--sb-accent); color: #fff; border-radius: var(--sb-rayon); padding: 20px 24px; margin: 32px 0; }
.sb-encadre-chiffre > .sb-kicker { grid-column: 1 / -1; color: rgba(255,255,255,.85); }
.sb-encadre-chiffre-valeur { font: 900 clamp(34px, 5vw, 52px)/1 var(--sb-titre); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sb-encadre-chiffre-libelle { font: 400 16px/1.45 var(--sb-lecture); margin: 0; }
.sb-encadre-chiffre-source { grid-column: 1 / -1; font: 500 12px var(--sb-titre); color: rgba(255,255,255,.85); margin: 4px 0 0; }
@media (max-width: 600px) { .sb-encadre-chiffre { grid-template-columns: 1fr; } }
.sb-exergue { margin: 36px 0; padding: 6px 0 6px 26px; border-left: 4px solid var(--sb-accent-2); }
.sb-exergue p { font: 600 clamp(20px, 2.4vw, 26px)/1.35 var(--sb-lecture); color: var(--sb-encre); margin: 0; text-wrap: balance; }
.sb-exergue p::before { content: "« "; color: var(--sb-accent-2); }
.sb-exergue p::after { content: " »"; color: var(--sb-accent-2); }
.sb-exergue cite { display: block; margin-top: 10px; font: 600 13px var(--sb-titre); font-style: normal; color: var(--sb-doux); }
.sb-encadre-pratique { background: var(--sb-surf); border-radius: var(--sb-rayon); padding: 18px 22px 10px; margin: 30px 0; border-top: 3px solid var(--sb-accent); }
.sb-encadre-pratique > .sb-kicker { display: block; font: 700 11px var(--sb-titre); letter-spacing: .12em; text-transform: uppercase; color: var(--sb-accent-fort); margin: 0 0 8px; }
.sb-encadre-pratique ol { list-style: none; counter-reset: sbprat; margin: 0; padding: 0; }
.sb-encadre-pratique li { counter-increment: sbprat; position: relative; padding: 8px 0 10px 38px; font: 400 16px/1.5 var(--sb-lecture); border-top: 1px solid color-mix(in srgb, var(--sb-encre) 10%, transparent); }
.sb-encadre-pratique li:first-child { border-top: 0; }
.sb-encadre-pratique li::before { content: counter(sbprat); position: absolute; left: 0; top: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--sb-accent); color: #fff; font: 700 13px/26px var(--sb-titre); text-align: center; }
.sb-duo { margin: 32px 0; }
.sb-duo > .sb-kicker { display: block; font: 700 11px var(--sb-titre); letter-spacing: .12em; text-transform: uppercase; color: var(--sb-accent-fort); margin: 0 0 10px; }
.sb-duo-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sb-duo-col { background: var(--sb-surf); border-radius: var(--sb-rayon); padding: 16px 18px 8px; border-top: 4px solid var(--sb-accent); }
.sb-duo-col + .sb-duo-col { border-top-color: var(--sb-accent-2); }
.sb-duo-titre { font: 800 16px var(--sb-titre); margin: 0 0 6px; color: var(--sb-encre); }
.sb-duo-col ul { list-style: none; margin: 0; padding: 0; }
.sb-duo-col li { padding: 7px 0 9px 18px; position: relative; font: 400 15px/1.5 var(--sb-lecture); border-top: 1px solid color-mix(in srgb, var(--sb-encre) 10%, transparent); }
.sb-duo-col li:first-child { border-top: 0; }
.sb-duo-col li::before { content: ""; position: absolute; left: 0; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .55; }
@media (max-width: 600px) { .sb-duo-grille { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
	.sb-article-hero-grille { gap: 16px; padding-block: 20px 0; }
	.sb-article-titre { font-size: 26px; }
	.sb-article-chapo { font-size: 16px; margin-top: .6rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	.sb-article-hero img, .sb-article-hero picture { max-height: 200px; width: 100%; object-fit: cover; }
}
.sb-texte a:not([class]) { color: var(--sb-accent-fort); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--sb-accent) 55%, transparent); transition: text-decoration-color .15s, background-color .15s; }
.sb-texte a:not([class]):hover { text-decoration-color: var(--sb-accent); background: color-mix(in srgb, var(--sb-surf2) 70%, transparent); }

/*
 * StarPages — Loge — habillage propre au site (aucune ligne de ceci n'est partagée).
 * Charge APRÈS blocs-figes/blocs-valides.css : redéfinit son :root, ajoute les procédés
 * propres au site (préfixe stp-), n'en modifie jamais les sélecteurs/structure.
 * Mode CLAIR UNIQUEMENT (DA §2) : le prefers-color-scheme sombre des blocs figés est
 * neutralisé plus bas (section 0bis) en recopiant les valeurs claires.
 */

/* ===== 0. RACINE — palette, formes, typo (DA §3/§4) ===== */
:root {
	--sb-fond: #FDFCFF;        /* Lumière */
	--sb-surf: #F4EFF5;        /* Poudre */
	--sb-surf2: #EAE2EC;       /* Poudre forte */
	--sb-encre: #1F1D45;       /* Encre de loge */
	--sb-doux: #5B5880;        /* Indigo voilé */
	--sb-filet: #DCD5E3;       /* Filet lilas */
	--stp-velours: #313063;    /* Velours 1999 */
	--stp-velours-haut: #3B3A78;
	--sb-accent: #B8142F;      /* Tapis rouge */
	--sb-accent-fort: #8E0E24; /* Rideau */
	--sb-accent-2: #FFCF00;    /* Or d'ampoule — jamais en texte sur fond clair */
	--sb-rub: var(--sb-accent);

	--sb-rayon: 18px;
	--sb-ombre: 0 18px 40px -18px rgba(31,29,69,.35);
	--sb-ombre-haut: 0 28px 60px -24px rgba(31,29,69,.45);
	--stp-halo: 0 0 10px 2px rgba(255,207,0,.55);

	--sb-titre: "Noto Serif Display", Georgia, "Times New Roman", serif;
	--sb-lecture: "Ysabeau Office", Arial, Helvetica, sans-serif;
	--stp-chiffre: "Ysabeau Office", Arial, Helvetica, sans-serif; /* chiffres/UI — jamais en Didone */

	--sb-aside-largeur: 300px;
	--sb-haut-collant: 176px; /* marquise 40 + bandeau 88 + menu 48 */
	--sb-faq-largeur: 760px;

	color-scheme: light;
}

/* ===== 0bis. MODE CLAIR UNIQUEMENT — neutralise le sombre des blocs figés ===== */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--sb-fond: #FDFCFF; --sb-encre: #1F1D45; --sb-doux: #5B5880; --sb-filet: #DCD5E3;
		--sb-surf: #F4EFF5; --sb-surf2: #EAE2EC;
	}
}
:root[data-theme="dark"] {
	--sb-fond: #FDFCFF; --sb-encre: #1F1D45; --sb-doux: #5B5880; --sb-filet: #DCD5E3;
	--sb-surf: #F4EFF5; --sb-surf2: #EAE2EC;
}

/* ===== 1. BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.stp-corps { margin: 0; background: var(--sb-fond); color: var(--sb-encre); font: 400 17px/1.6 var(--sb-lecture); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--sb-titre); font-stretch: 75%; font-weight: 700; line-height: 1.07; margin: 0 0 .5rem; color: var(--sb-encre); }
.stp-cadre { width: min(1280px, 100% - 2.5rem); margin-inline: auto; }
.stp-skip { position: absolute; left: -999px; top: 0; background: var(--sb-accent); color: #fff; padding: .8rem 1.2rem; z-index: 200; }
.stp-skip:focus { left: 1rem; top: 1rem; }

.stp-kicker { font: 700 12px/1.3 var(--stp-chiffre); letter-spacing: .1em; text-transform: uppercase; }

/* Boutons */
.stp-cta { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .7rem 1.3rem; border-radius: 999px; font: 700 14px/1.1 var(--stp-chiffre); text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.stp-cta--plein { background: var(--sb-accent); color: #fff; }
.stp-cta--plein:hover { background: var(--sb-accent-fort); }
.stp-cta--contour { border-color: var(--sb-encre); color: var(--sb-encre); background: transparent; }
.stp-cta--contour:hover { background: var(--sb-encre); color: var(--sb-fond); }
.stp-cta--filaire { border-color: var(--sb-filet); color: var(--sb-encre); background: var(--sb-fond); }
.stp-cta--filaire:hover { border-color: var(--sb-encre); }
.stp-cta--or { background: var(--sb-accent-2); color: var(--sb-encre); }

/* ===== 2. LOGO — wordmark + étoile cerclée d'ampoules (DA §2) ===== */
.stp-logo-mark { display: inline-flex; align-items: center; gap: .22em; font-family: var(--sb-titre); font-stretch: 70%; font-weight: 800; letter-spacing: -.01em; color: var(--sb-encre); text-decoration: none; }
.stp-logo-mark--clair { color: #fff; }
.stp-logo-etoile { width: .9em; height: .9em; overflow: visible; flex: none; }
.stp-logo-etoile-forme { fill: var(--sb-accent-2); stroke: var(--stp-velours); stroke-width: 1.5; stroke-linejoin: round; }
.stp-logo-mark--clair .stp-logo-etoile-forme { stroke: #fff; }
.stp-logo-ampoules circle { fill: var(--sb-accent-2); filter: drop-shadow(0 0 3px rgba(255,207,0,.65)); }
.stp-mono circle:first-child { fill: var(--stp-velours); }

/* ===== 3. LE MIROIR DE LOGE (procédé 1) — cadre velours cerclé d'ampoules or ===== */
.stp-miroir { position: relative; background: var(--stp-velours); border-radius: 28px; padding: 16px; isolation: isolate; box-shadow: var(--sb-ombre-haut); }
.stp-miroir-photo { position: relative; border-radius: 14px; overflow: hidden; background: var(--stp-velours-haut); }
.stp-miroir-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stp-miroir-ampoules { position: absolute; pointer-events: none; filter: drop-shadow(0 0 6px rgba(255,207,0,.6)); background-image: radial-gradient(circle, var(--sb-accent-2) 0 5px, transparent 5.5px); }
.stp-miroir-ampoules--haut { top: 4px; left: 16px; right: 16px; height: 12px; background-size: 32px 12px; background-repeat: repeat-x; background-position: left center; }
.stp-miroir-ampoules--gauche { top: 16px; bottom: 16px; left: 4px; width: 12px; background-size: 12px 32px; background-repeat: repeat-y; background-position: center top; }
.stp-miroir-ampoules--droite { top: 16px; bottom: 16px; right: 4px; width: 12px; background-size: 12px 32px; background-repeat: repeat-y; background-position: center top; }
.stp-miroir-ampoules--bas { bottom: 4px; left: 16px; right: 16px; height: 12px; background-size: 32px 12px; background-repeat: repeat-x; }

/* L'allumage (procédé 2) — une seule fois, au chargement, UNIQUEMENT sur le miroir de la une. */
@keyframes stp-allumage-h { from { -webkit-mask-image: linear-gradient(90deg,#000 0%,transparent 0%); mask-image: linear-gradient(90deg,#000 0%,transparent 0%); } to { -webkit-mask-image: linear-gradient(90deg,#000 100%,transparent 100%); mask-image: linear-gradient(90deg,#000 100%,transparent 100%); } }
@keyframes stp-allumage-v { from { -webkit-mask-image: linear-gradient(180deg,#000 0%,transparent 0%); mask-image: linear-gradient(180deg,#000 0%,transparent 0%); } to { -webkit-mask-image: linear-gradient(180deg,#000 100%,transparent 100%); mask-image: linear-gradient(180deg,#000 100%,transparent 100%); } }
.stp-hero-miroir .stp-miroir-ampoules--haut { animation: stp-allumage-h .5s ease-out both; }
.stp-hero-miroir .stp-miroir-ampoules--gauche,
.stp-hero-miroir .stp-miroir-ampoules--droite { animation: stp-allumage-v .4s ease-out .4s both; }
@media (prefers-reduced-motion: reduce) { .stp-hero-miroir .stp-miroir-ampoules { animation: none; } }

.stp-hero-miroir { position: relative; }

/* Étoile « À la une » en surimpression (angle haut droit du miroir, déborde de 20px). */
.stp-miroir-etoile { position: absolute; top: -20px; right: -20px; width: 72px; height: 72px; display: grid; place-items: center; background: var(--sb-fond); border-radius: 50%; box-shadow: var(--sb-ombre-haut); z-index: 3; }
.stp-miroir-etoile svg { width: 34px; height: 34px; }
.stp-miroir-etoile span { position: absolute; bottom: 10px; font: 800 9px/1 var(--stp-chiffre); letter-spacing: .04em; color: var(--sb-encre); text-transform: uppercase; }

/* Heure géante sur la photo (procédé 5). */
.stp-heure-geante { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 18px 14px; background: linear-gradient(0deg, rgba(31,29,69,.85), transparent); z-index: 2; }
.stp-heure-geante b { display: block; font: 800 clamp(40px,5vw,56px)/.9 var(--stp-chiffre); color: #fff; font-variant-numeric: lining-nums tabular-nums; }

/* ===== 4. EN-TÊTE DU SITE ===== */
.stp-entete { position: relative; z-index: 50; background: var(--sb-fond); }
.stp-marquise { background: var(--stp-velours); height: 40px; overflow: hidden; }
.stp-marquise-in { height: 100%; display: flex; align-items: center; gap: 1.4rem; color: #fff; }
.stp-marquise-tag { flex: none; display: inline-flex; align-items: center; gap: .5rem; font: 800 12px/1 var(--stp-chiffre); letter-spacing: .08em; background: var(--sb-accent); color: #fff; padding: .4rem .7rem; border-radius: 999px; }
.stp-point-direct { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: stp-pulse 1.6s ease-in-out infinite; }
@keyframes stp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.stp-marquise-fil { flex: 1; display: flex; gap: 2.2rem; list-style: none; margin: 0; padding: 0; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.stp-marquise-fil li { display: flex; align-items: center; gap: 2.2rem; }
.stp-marquise-fil li::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sb-accent-2); box-shadow: var(--stp-halo); margin-left: 2.2rem; flex: none; }
.stp-marquise-fil a { color: #EDEBFA; text-decoration: none; font: 600 13px/1 var(--stp-chiffre); }
.stp-marquise-fil a:hover { color: #fff; text-decoration: underline; }
.stp-marquise-maj { flex: none; font: 600 12px/1 var(--stp-chiffre); color: rgba(255,255,255,.7); }
@media (min-width: 761px) {
	.stp-marquise-fil { animation: stp-defile 38s linear infinite; }
	.stp-marquise:hover .stp-marquise-fil, .stp-marquise:focus-within .stp-marquise-fil { animation-play-state: paused; }
	@keyframes stp-defile { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) { .stp-marquise-fil { animation: none !important; overflow-x: auto; } }

.stp-bandeau { padding-block: 18px; }
.stp-bandeau-in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem; }
.stp-bandeau-date { font: 600 13px/1.2 var(--stp-chiffre); color: var(--sb-doux); white-space: nowrap; }
.stp-logo { text-align: center; display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.stp-logo-mark { font-size: 30px; }
.stp-logo-devise { font: 400 13px/1.3 var(--sb-lecture); font-style: italic; color: var(--sb-doux); margin-top: 2px; }
.stp-bandeau-actions { display: flex; align-items: center; gap: .8rem; justify-self: end; }
.stp-loupe { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--sb-filet); color: var(--sb-encre); }
.stp-loupe svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; }
.stp-burger { display: none; }

.stp-rubriques { border-top: 1px solid var(--sb-filet); border-bottom: 1px solid var(--sb-filet); background: var(--sb-fond); }
.stp-rubriques-in ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; height: 48px; overflow-x: auto; scrollbar-width: none; }
.stp-rubriques-in ul::-webkit-scrollbar { display: none; }
.stp-rubriques-in a { display: inline-flex; align-items: center; gap: .5rem; height: 100%; padding: 0 .75rem; font: 600 16px/1 var(--stp-chiffre); color: var(--sb-encre); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.stp-ampoule { width: 8px; height: 8px; border-radius: 50%; background: var(--stp-rub); flex: none; }
.stp-rubriques-in a.is-courant, .stp-rubriques-in a:hover { border-bottom-color: var(--stp-rub); }
.stp-rubriques-in a.stp-rub-phare { color: var(--sb-accent); font-weight: 800; }

.stp-panneau-mobile { display: none; }

/* Version compacte au défilement */
.stp-entete.is-pose .stp-marquise { height: 32px; }
.stp-entete.is-pose .stp-bandeau { padding-block: 8px; }
.stp-entete.is-pose .stp-logo-mark { font-size: 22px; }
.stp-entete.is-pose .stp-logo-devise { display: none; }
.stp-entete { transition: none; }

/* ===== 5. PASTILLES ===== */
.stp-pastille { display: inline-flex; align-items: center; gap: .4rem; font: 700 12.5px/1 var(--stp-chiffre); padding: .45rem .7rem; border-radius: 999px; background: var(--stp-rub); color: var(--stp-rub-texte, #fff); white-space: nowrap; }
.stp-pastille-signe { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.stp-pastille--photo { position: absolute; top: 12px; left: 12px; z-index: 2; }
.stp-repli { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 3/2; background: var(--stp-repli, var(--stp-velours)); border-radius: inherit; }
.stp-repli .stp-mono { width: 34%; }

/* ===== 6. SECTIONS D'ACCUEIL — fonds qui alternent ===== */
.stp-section { padding-block: clamp(40px, 5vw, 64px); }
.stp-fond-lumiere { background: var(--sb-fond); }
.stp-fond-poudre { background: var(--sb-surf); }
.stp-fond-velours { background: var(--stp-velours); color: #fff; }
.stp-fond-velours h2, .stp-fond-velours h3 { color: #fff; }
.stp-section-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.stp-section-tete h2 { font-size: clamp(26px, 3vw, 40px); }
.stp-fond-velours .stp-section-tete { flex-direction: column; align-items: flex-start; }
.stp-ampoules-titre { display: flex; gap: 10px; margin-top: .5rem; }
.stp-ampoules-titre span { width: 8px; height: 8px; border-radius: 50%; background: var(--sb-accent-2); box-shadow: var(--stp-halo); }
.stp-voir-tout { font: 700 14px/1 var(--stp-chiffre); text-decoration: none; color: var(--sb-accent); white-space: nowrap; }
.stp-fond-velours .stp-voir-tout { color: var(--sb-accent-2); }
.stp-voir-tout:hover { text-decoration: underline; }
.stp-sous-pastilles { display: flex; gap: .6rem; flex-wrap: wrap; margin: .6rem 0 0; }
.stp-sous-pastille { font: 600 12.5px/1 var(--stp-chiffre); padding: .4rem .75rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); color: #fff; }

/* Cartes génériques */
.stp-carte { position: relative; }
.stp-carte-photo { position: relative; display: block; border-radius: var(--sb-rayon); overflow: hidden; aspect-ratio: 3/2; background: var(--sb-surf2); }
.stp-carte-photo img, .stp-carte-photo .stp-repli { width: 100%; height: 100%; object-fit: cover; }
.stp-carte h3 { font-size: clamp(18px, 1.6vw, 22px); margin: .7rem 0 .3rem; }
.stp-carte h3 a { text-decoration: none; }
.stp-carte h3 a:hover { text-decoration: underline; text-decoration-color: var(--sb-accent); }
.stp-signature { font: 600 13px/1.3 var(--stp-chiffre); color: var(--sb-doux); }
.stp-fond-velours .stp-signature { color: rgba(255,255,255,.7); }
.stp-grille { display: grid; gap: clamp(18px, 2vw, 28px); }
.stp-grille--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.stp-grille--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.stp-grille--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* S1 — La une */
.stp-une { padding-block: clamp(28px, 3.4vw, 44px) clamp(40px, 4vw, 56px); }
.stp-une-grille { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.32fr) minmax(0,0.62fr); gap: clamp(20px, 2.6vw, 40px); align-items: start; }
.stp-une-majeur { display: flex; flex-direction: column; gap: .9rem; min-height: 0; }
.stp-une-titre { font-size: clamp(34px, 3.4vw, 56px); line-height: 1.02; }
.stp-une-chapo { font: 400 clamp(17px,1.3vw,20px)/1.45 var(--sb-lecture); color: var(--sb-doux); max-width: 46ch; }
.stp-une-auteur { display: inline-flex; align-items: center; gap: .6rem; font: 600 13.5px/1 var(--stp-chiffre); color: var(--sb-doux); }
.stp-une-auteur img, .stp-une-auteur .sb-avatar-symbole { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.stp-une-tirages { position: relative; display: flex; gap: 10px; margin-top: .8rem; }
.stp-tirage { background: #fff; padding: 8px 8px 30px; box-shadow: var(--sb-ombre-haut); width: 46%; }
.stp-tirage:first-child { transform: rotate(-2.5deg); }
.stp-tirage:last-child { transform: rotate(1.5deg); }
.stp-tirage img, .stp-tirage .stp-repli { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.stp-tirage span { display: block; font: 600 13px/1.25 var(--stp-chiffre); color: var(--sb-encre); margin-top: 6px; padding: 0 2px; }

.stp-une-miroir-zone { position: relative; background: var(--sb-surf); border-radius: 28px; padding: clamp(20px, 2.4vw, 36px); }
.stp-une-miroir-zone .stp-miroir { aspect-ratio: 524/500; }
.stp-une-miroir-zone .stp-miroir-photo { height: 100%; }

.stp-une-minute { background: var(--sb-surf); border-radius: var(--sb-rayon); padding: 1.3rem; box-shadow: var(--sb-ombre); }
.stp-minute-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.stp-minute-tete h2 { font-size: 20px; margin: 0; }
.stp-une-minute ul { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .6rem; }
.stp-minute-lien { display: flex; gap: .65rem; align-items: center; text-decoration: none; padding: .4rem; border-radius: 10px; }
.stp-minute-lien:hover { background: var(--sb-surf2); }
.stp-minute-vignette { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; flex: none; }
.stp-minute-vignette img, .stp-minute-vignette .stp-repli { width: 100%; height: 100%; object-fit: cover; }
.stp-minute-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stp-minute-heure { font: 800 12px/1 var(--stp-chiffre); color: var(--sb-accent); font-variant-numeric: tabular-nums; }
.stp-minute-titre { font: 600 14.5px/1.3 var(--sb-lecture); color: var(--sb-encre); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* S2 — Stars & Culture, en loge */
.stp-sc-grille { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 1.6rem; }
.stp-sc-principal .stp-miroir { aspect-ratio: 4/5; }
.stp-sc-principal h3 { color: #fff; font-size: clamp(22px, 2vw, 28px); margin-top: .8rem; }
.stp-sc-liste { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; align-content: start; }
.stp-sc-liste .stp-carte-photo { background: var(--sb-surf); }
.stp-sc-liste h3 { color: #fff; font-size: 17px; }

/* S3 — Box-office des lecteurs */
.stp-boxoffice { background: var(--stp-velours); border-radius: 24px; padding: clamp(20px, 2.6vw, 34px); color: #fff; }
.stp-boxoffice-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.2rem 1.6rem; }
.stp-boxoffice-liste li { display: flex; align-items: center; gap: 1rem; }
.stp-rang { font: 800 clamp(40px,4vw,56px)/1 var(--stp-chiffre); color: var(--sb-accent-2); font-variant-numeric: lining-nums tabular-nums; width: 1.1ch; flex: none; }
.stp-boxoffice-vignette { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex: none; }
.stp-boxoffice-vignette img, .stp-boxoffice-vignette .stp-repli { width: 100%; height: 100%; object-fit: cover; }
.stp-boxoffice-liste h3 { font-size: 17px; color: #fff; margin: 0; }
.stp-boxoffice-liste a { text-decoration: none; }
.stp-boxoffice-liste a:hover h3 { text-decoration: underline; }

/* S4 — Voyage : 1 grande + 3 empilées */
.stp-voyage-grille { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 1.6rem; }
.stp-voyage-principal .stp-carte-photo { aspect-ratio: 16/9; }
.stp-voyage-liste { display: grid; gap: 1rem; align-content: start; }
.stp-voyage-ligne { display: grid; grid-template-columns: 110px 1fr; gap: .8rem; text-decoration: none; }
.stp-voyage-ligne .stp-carte-photo { aspect-ratio: 4/3; }
.stp-voyage-ligne h3 { font-size: 16px; margin: 0; color: var(--sb-encre); }

/* S5/S6 — duo de rubriques côte à côte */
.stp-duo { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(24px, 3vw, 48px); }
.stp-duo-col-tete { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.stp-duo-col-tete h3 { margin: 0; font-size: 22px; }
.stp-duo-un-deux { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1rem; }
.stp-duo-un-deux .stp-grande { grid-column: 1 / -1; }

/* S7 — Argent & Conso */
.stp-argent-grille { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.3rem; }
.stp-argent-grille .stp-carte-photo { aspect-ratio: 3/2; }
.stp-chiffre-tuile { position: absolute; left: 10px; bottom: 10px; background: var(--stp-velours); color: var(--sb-accent-2); font: 800 20px/1 var(--stp-chiffre); padding: .4rem .6rem; border-radius: 10px; font-variant-numeric: tabular-nums; z-index: 2; }

/* S8 — Actualité, le fil complet */
.stp-fil-grille { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 2rem; }
.stp-fil-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.stp-fil-liste li { display: grid; grid-template-columns: 70px 1fr; gap: .9rem; padding: .7rem 0; border-top: 1px solid var(--sb-filet); }
.stp-fil-liste li:first-child { border-top: 0; }
.stp-fil-heure { font: 800 13px/1.3 var(--stp-chiffre); color: var(--sb-accent); font-variant-numeric: tabular-nums; }
.stp-fil-liste h3 { font-size: 16px; margin: 0; }
.stp-fil-cartes { display: grid; gap: 1rem; }

/* S9 — La rédaction */
.stp-redaction-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.4rem; }
.stp-redaction-carte { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; background: var(--sb-fond); border-radius: var(--sb-rayon); padding: 1.4rem 1.2rem; box-shadow: var(--sb-ombre); }
.stp-redaction-carte img, .stp-redaction-carte .sb-avatar-symbole { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.stp-redaction-carte h3 { font-size: 18px; margin: .2rem 0 0; }
.stp-redaction-carte p { margin: 0; font-size: 14px; color: var(--sb-doux); }

/* ===== 7. FRONTON / MARQUISE DE RUBRIQUE (pièce RUBRIQUE) ===== */
.stp-marquise-rubrique { position: relative; background: var(--stp-velours); color: #fff; padding-block: clamp(50px, 6vw, 80px) clamp(90px, 9vw, 120px); overflow: hidden; }
.stp-marquise-rubrique-ampoules { display: flex; justify-content: center; gap: 16px; margin-bottom: 1.4rem; }
.stp-marquise-rubrique-ampoules span { width: 9px; height: 9px; border-radius: 50%; background: var(--sb-accent-2); box-shadow: var(--stp-halo); }
.stp-marquise-rubrique h1 { text-align: center; color: #fff; font-size: clamp(40px, 7vw, 96px); font-stretch: 70%; font-weight: 800; letter-spacing: -.01em; }
.stp-marquise-rubrique-chapo { text-align: center; max-width: 54ch; margin: .6rem auto 0; font: 400 19px/1.5 var(--sb-lecture); color: #D9D4F0; }
.stp-marquise-rubrique-compteur { text-align: center; margin-top: 1rem; font: 800 14px/1 var(--stp-chiffre); color: var(--sb-accent-2); font-variant-numeric: tabular-nums; }
.stp-marquise-rubrique-sous { display: flex; justify-content: center; gap: .6rem; margin-top: 1.1rem; flex-wrap: wrap; }

.stp-trois-miroirs { position: relative; margin-top: -72px; display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 1.6rem; align-items: end; z-index: 2; }
.stp-trois-miroirs .stp-miroir { aspect-ratio: 280/340; }
.stp-trois-miroirs .stp-miroir-central { aspect-ratio: 360/440; }
.stp-trois-miroirs figcaption { margin-top: .6rem; font: 600 14px/1.3 var(--stp-chiffre); color: var(--sb-encre); text-align: center; }
.stp-trois-miroirs figure { margin: 0; }

.stp-fronton { position: relative; background: var(--stp-velours); color: #fff; padding-block: clamp(32px, 4vw, 48px); }
.stp-fronton-in { position: relative; z-index: 2; }
.stp-fronton--compact { padding-block: 32px; }
.stp-fil-ariane { font: 600 13px/1 var(--stp-chiffre); color: rgba(255,255,255,.75); margin-bottom: .8rem; }
.stp-fil-ariane a { color: #fff; }
.stp-fronton-titre { color: #fff; font-size: clamp(30px, 4vw, 48px); }
.stp-fronton-chapo { color: rgba(255,255,255,.78); max-width: 60ch; }

/* ===== 8. LISTE HORODATÉE (rubrique, recherche, index.php) ===== */
.stp-liste-horodatee { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.stp-liste-horodatee li { display: grid; grid-template-columns: 1fr 140px; gap: 1.4rem; align-items: center; padding: 1.2rem 0; border-top: 1px solid var(--sb-filet); }
.stp-liste-horodatee li:first-child { border-top: 0; }
.stp-liste-horodatee-photo { border-radius: 12px; overflow: hidden; aspect-ratio: 3/2; }
.stp-liste-horodatee-photo img, .stp-liste-horodatee-photo .stp-repli { width: 100%; height: 100%; object-fit: cover; }
.stp-secours { margin-top: 1rem; border-top: 1px solid var(--sb-filet); padding-top: 1rem; }
.stp-secours-titre { font: 700 13px var(--stp-chiffre); color: var(--sb-doux); }
.stp-secours-liste { list-style: none; margin: .5rem 0 0; padding: 0; columns: 2; gap: 2rem; }
.stp-secours-liste li { display: flex; gap: .6rem; font-size: 14px; padding: .35rem 0; break-inside: avoid; }
.stp-secours-liste time { color: var(--sb-doux); flex: none; }
.stp-suite-liens { text-align: center; margin: 2rem 0; }

/* ===== 9. CARTON DE LOGE (procédé 7) — en-tête d'article / rubrique / contact ===== */
.stp-carton { background: #fff; color: var(--sb-encre); padding: 14px 18px; border-radius: 12px; box-shadow: var(--sb-ombre-haut); border-top: 3px solid var(--sb-accent-2); transform: rotate(-2deg); }
.stp-carton p { margin: 0; font: 700 13px/1.4 var(--stp-chiffre); }
.stp-carton p + p { margin-top: 4px; font-weight: 500; color: var(--sb-doux); }

/* ===== 10. EN-TÊTE D'ARTICLE (pièce ENTETE) ===== */
.stp-entete-article { background: var(--sb-surf); padding-block: clamp(32px, 4vw, 54px); }
.stp-entete-article-in { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: clamp(28px, 3vw, 48px); align-items: start; }
.stp-entete-article-texte { display: flex; flex-direction: column; gap: .7rem; }
.stp-h1-article { font-size: clamp(32px, 3.4vw, 48px); }
.stp-filet-court { width: 64px; height: 3px; background: var(--sb-accent); border-radius: 2px; }
.stp-chapo-article { font: 400 20px/1.5 var(--sb-lecture); color: var(--sb-doux); max-width: 50ch; }
.stp-auteur-ligne { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-top: .4rem; }
.stp-auteur-mini { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font: 700 14px/1 var(--stp-chiffre); color: var(--sb-encre); }
.stp-auteur-mini img, .stp-auteur-mini .sb-avatar-symbole { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.stp-meta-article { font: 500 13.5px/1.3 var(--stp-chiffre); color: var(--sb-doux); }
.stp-actions-article { display: flex; gap: .7rem; margin-top: .6rem; flex-wrap: wrap; }

.stp-entete-article-photo { position: relative; }
.stp-entete-article-photo .stp-miroir { aspect-ratio: 4/5; }
.stp-entete-article-photo .stp-miroir-ampoules--bas, .stp-entete-article-photo .stp-miroir-ampoules--gauche, .stp-entete-article-photo .stp-miroir-ampoules--droite { display: none; }
.stp-carton-article { position: absolute; left: 24px; bottom: -36px; width: 225px; z-index: 3; }

.stp-encart-question { background: var(--sb-fond); border: 1px solid var(--sb-filet); border-radius: var(--sb-rayon); padding: 1.1rem 1.2rem; box-shadow: var(--sb-ombre); }
.stp-encart-question form { display: grid; gap: .7rem; margin-top: .6rem; }
.stp-encart-question label { display: block; font: 700 12.5px var(--stp-chiffre); margin-bottom: .3rem; }
.stp-encart-question input, .stp-encart-question textarea { width: 100%; font: 400 15px var(--sb-lecture); padding: .6rem .7rem; border: 1px solid var(--sb-filet); border-radius: 8px; }

/* ===== 11. À LA UNE — carte principale (une des pages rubrique) déjà couvert par stp-trois-miroirs ===== */

/* ===== 12. PAGES ANNEXES ===== */
.stp-ap-hero { padding-block: clamp(40px, 5vw, 64px); background: var(--sb-fond); }
.stp-ap-hero-in { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.9fr); gap: clamp(28px, 3vw, 52px); align-items: center; }
.stp-ap-titre { font-size: clamp(34px, 4vw, 54px); }
.stp-ap-devise { font: 400 18px/1.4 var(--sb-lecture); font-style: italic; color: var(--sb-doux); }
.stp-ap-chapo { font: 400 17px/1.6 var(--sb-lecture); max-width: 58ch; }
.stp-ap-actions { display: flex; gap: .8rem; margin-top: 1rem; flex-wrap: wrap; }
.stp-ap-hero-photo .stp-miroir { aspect-ratio: 4/3; }

.stp-ap-chiffres { background: var(--stp-velours); color: #fff; padding-block: clamp(28px, 3vw, 40px); }
.stp-ap-chiffres-in { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); align-items: center; }
.stp-ap-chiffres-in div { display: flex; flex-direction: column; }
.stp-ap-chiffres-in b { font: 800 clamp(34px,4vw,48px)/1 var(--stp-chiffre); color: var(--sb-accent-2); font-variant-numeric: tabular-nums; }
.stp-ap-chiffres-in span { font: 600 13px var(--stp-chiffre); color: rgba(255,255,255,.75); }

.stp-ap-rubriques { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1.2rem; }
.stp-ap-rubrique { display: block; background: var(--sb-fond); border-radius: var(--sb-rayon); padding: 1.3rem; box-shadow: var(--sb-ombre); text-decoration: none; color: var(--sb-encre); border-top: 3px solid var(--stp-rub); }
.stp-ap-rubrique-chapo { display: block; margin: .6rem 0; font-size: 14.5px; color: var(--sb-doux); }
.stp-ap-rubrique-compte { font: 700 13px var(--stp-chiffre); color: var(--sb-accent); }

.stp-ap-methode { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 2.4rem; align-items: center; }
.stp-ap-methode-photo .stp-miroir { aspect-ratio: 4/3; }
.stp-ap-etapes { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 1rem; }
.stp-ap-etapes li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .8rem; }
.stp-ap-etapes b { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--stp-velours); color: var(--sb-accent-2); font: 800 16px var(--stp-chiffre); }
.stp-ap-etapes h3 { font-size: 17px; margin: 0 0 .25rem; }
.stp-ap-etapes p { margin: 0; font-size: 15px; color: var(--sb-doux); }

.stp-contact-grille { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.8fr); gap: 2rem; align-items: start; }
.stp-contact-carte { background: var(--sb-fond); border-radius: var(--sb-rayon); padding: clamp(24px, 3vw, 36px); box-shadow: var(--sb-ombre-haut); display: grid; gap: 1.1rem; }
.stp-champ { display: grid; gap: .4rem; }
.stp-champ label { font: 700 13px var(--stp-chiffre); }
.stp-champ input, .stp-champ textarea { font: 400 16px var(--sb-lecture); padding: .75rem .9rem; border: 1px solid var(--sb-filet); border-radius: 10px; background: #fff; color: var(--sb-encre); }
.stp-champ input:focus, .stp-champ textarea:focus { outline: 2px solid var(--sb-accent); outline-offset: 1px; }
.stp-champs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.stp-piege { position: absolute; left: -9999px; }
.stp-contact-panneau { background: var(--stp-velours); color: #fff; border-radius: var(--sb-rayon); padding: clamp(22px, 3vw, 32px); }
.stp-contact-panneau h2 { color: #fff; }
.stp-contact-panneau dl { margin: 1rem 0 0; }
.stp-contact-panneau dt { font: 700 14px var(--stp-chiffre); color: var(--sb-accent-2); margin-top: .8rem; }
.stp-contact-panneau dd { margin: .2rem 0 0; font-size: 14.5px; color: rgba(255,255,255,.82); }
.stp-contact-succes { text-align: center; padding: 3rem 1rem; }

.stp-404 { text-align: center; padding-block: clamp(50px, 6vw, 90px); }
.stp-404 .stp-photo-rideau { max-width: 640px; margin: 1.5rem auto; border-radius: var(--sb-rayon); overflow: hidden; }

/* ===== 13. UTILITAIRES — hiérarchie nombres (chiffres, jamais en Didone) ===== */
.stp-num { font-family: var(--stp-chiffre); font-variant-numeric: lining-nums tabular-nums; }
.stp-page-entete { padding-block: 2.4rem; }
.stp-page-texte { max-width: 68ch; margin-inline: auto; padding: 0 2.5rem 3rem; }

/* ===== 14. PIED DE PAGE (habillage du bloc figé) — rangée d'ampoules en tête ===== */
.sb-pied { background: var(--stp-velours); position: relative; padding-top: 64px; }
.sb-pied::before { content: ""; position: absolute; top: 24px; left: 0; right: 0; height: 12px; background-image: radial-gradient(circle, var(--sb-accent-2) 0 5px, transparent 5.5px); background-size: 32px 12px; background-repeat: repeat-x; background-position: center; filter: drop-shadow(0 0 6px rgba(255,207,0,.6)); }
.sb-pied-nom { font-family: var(--sb-titre); font-stretch: 70%; font-weight: 800; }
.sb-pied-baseline { font-family: var(--sb-lecture); }
.sb-pied-titre, .sb-pied-compte, .sb-ours { font-family: var(--stp-chiffre); }
.sb-pied-rubrique-tete, .sb-pied-fil a, .sb-pied-liste a { font-family: var(--stp-chiffre); }
.sb-pied-rubrique-chapo { font-family: var(--sb-lecture); }
.sb-nav-mobile { background: var(--sb-fond); border-top-color: var(--sb-filet); }
.sb-nav-mobile a.is-actif { color: var(--sb-accent); }

/* Chiffres/UI à l'intérieur des blocs figés : jamais en Didone (DA §4). */
.sb-kicker, .sb-sommaire-duree, .sb-compare-row dt, .sb-sources-titre, .sb-auteur-role, .sb-pied-titre,
.sb-pied-compte, .sb-ours, .sb-sommaire a::before, .sb-faq-carte summary, .sb-encadre-chiffre-valeur {
	font-family: var(--stp-chiffre) !important;
}
.sb-auteur-nom, .sb-compare-card h3 { font-family: var(--sb-titre); font-stretch: 75%; }

/* ===== 15. RESPONSIVE — 390 px ===== */
@media (max-width: 980px) {
	.stp-une-grille { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
	.stp-une-minute { grid-column: 1 / -1; }
	.stp-sc-grille, .stp-voyage-grille, .stp-duo, .stp-ap-hero-in, .stp-ap-methode, .stp-contact-grille, .stp-entete-article-in { grid-template-columns: 1fr; }
	.stp-trois-miroirs { grid-template-columns: 1fr; margin-top: -40px; }
	.stp-boxoffice-liste { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.stp-fil-grille { grid-template-columns: 1fr; }
	.stp-argent-grille { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
	.stp-burger { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; background: none; border: 0; order: -1; }
	.stp-burger span { display: block; width: 100%; height: 2px; background: var(--sb-encre); }
	.stp-bandeau-in { grid-template-columns: auto 1fr auto; }
	.stp-bandeau-date { display: none; }
	.stp-logo-mark { font-size: 22px; }
	.stp-logo-devise { display: none; }
	.stp-bandeau-actions .stp-cta--contour { display: none; }
	.stp-marquise { height: 32px; }
	.stp-panneau-mobile[hidden] { display: none; }
	.stp-panneau-mobile { position: fixed; inset: 0; z-index: 90; background: var(--sb-fond); padding: 1.4rem; overflow-y: auto; }
	.stp-panneau-rubriques { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: .6rem; }
	.stp-panneau-pages { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
	.stp-panneau-pages a { font: 700 15px var(--stp-chiffre); text-decoration: none; color: var(--sb-encre); }

	.stp-une-grille { grid-template-columns: 1fr; gap: 1.4rem; }
	.stp-une-miroir-zone { order: -1; padding: 12px; }
	.stp-une-miroir-zone .stp-miroir { aspect-ratio: 4/5; }
	.stp-miroir-ampoules--haut, .stp-miroir-ampoules--bas { height: 8px; background-size: 24px 8px; }
	.stp-miroir-ampoules--gauche, .stp-miroir-ampoules--droite { width: 8px; background-size: 8px 24px; }
	.stp-miroir-etoile { width: 52px; height: 52px; top: -14px; right: -14px; }
	.stp-une-titre { font-size: 34px; }
	.stp-une-tirages { flex-wrap: nowrap; }

	.stp-grille--4, .stp-grille--3, .stp-grille--2 { grid-template-columns: 1fr; }
	.stp-argent-grille { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.stp-boxoffice-liste { grid-template-columns: 1fr; }
	.stp-duo { grid-template-columns: 1fr; }
	.stp-sc-liste { grid-template-columns: 1fr; }
	.stp-liste-horodatee li { grid-template-columns: 1fr 96px; }
	.stp-secours-liste { columns: 1; }

	.stp-marquise-rubrique h1 { font-size: 52px; }
	.stp-marquise-rubrique-ampoules span, .stp-trois-miroirs { }

	.stp-entete-article-photo { order: -1; }
	.stp-carton-article { left: 12px; bottom: -28px; width: 150px; }
}

/* =====================================================================
 * 16. PASSE DE CORRECTIONS 1 (07/10/2026) — mesures dans
 *     ~/Desktop/JOURNEES/2026-10-07/beau-site-starpages.net/CORRECTIONS-1.md
 * ===================================================================== */

/* 16.1 Titres : la Didone condensée à 75 % s'applique aussi par l'axe (filet de sécurité). */
h1, h2, h3, .stp-une-titre, .stp-h1-article { font-variation-settings: "wdth" 75; }
.stp-logo-mark, .stp-marquise-rubrique h1, .sb-pied-nom { font-variation-settings: "wdth" 70; }

/* 16.2 Le miroir de loge : la photo REMPLIT le cadre (avant : photo en haut + aplat indigo vide
   de 200-330 px dessous). Si le cadre a une hauteur, la photo s'y adapte ; sinon le cadre
   prend la hauteur de la photo — jamais de vide. */
.stp-miroir { display: flex; flex-direction: column; }
.stp-miroir-photo { flex: 1 1 auto; min-height: 0; display: flex; }
.stp-miroir-photo > a { display: flex; flex: 1 1 auto; min-width: 0; }
.stp-miroir-photo img, .stp-miroir-photo > a > img { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 0; height: auto; object-fit: cover; }

/* 16.3 En-tête du site un peu plus serré (DA §7 : bandeau 88 px). */
.stp-bandeau { padding-block: 12px; }

/* 16.4 S1 — LA UNE tient entière dans le premier écran (1440×780, 1920×950). */
.stp-une { padding-block: 22px 30px; }
.stp-une-grille { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) minmax(0,.7fr); gap: clamp(20px, 2.4vw, 36px); align-items: stretch; }
.stp-une-majeur { gap: .7rem; }
.stp-une-titre { font-size: clamp(34px, 3.1vw, 54px); line-height: 1.02; }
.stp-une-titre a { color: inherit; text-decoration: none; }
.stp-une-titre a:hover { text-decoration: underline; text-decoration-color: var(--sb-accent); text-decoration-thickness: 3px; }
.stp-une-chapo { font-size: 17px; line-height: 1.42; margin: 0; }
.stp-une-tirages { margin-top: .4rem; gap: 14px; }
.stp-tirage { width: 47%; padding: 6px 6px 10px; text-decoration: none; }
.stp-tirage img, .stp-tirage .stp-repli { aspect-ratio: 16/10; height: auto; }
.stp-tirage span { font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stp-une-miroir-zone { padding: 18px; display: flex; align-items: center; }
.stp-une-miroir-zone .stp-hero-miroir { width: 100%; }
.stp-une-miroir-zone .stp-miroir { aspect-ratio: auto; height: clamp(360px, calc(100vh - 300px), 520px); }
.stp-une-minute { padding: 1rem 1rem .9rem; display: flex; flex-direction: column; }
.stp-une-minute ul { gap: .25rem; margin-bottom: .6rem; flex: 1; align-content: start; }
.stp-minute-lien { gap: .6rem; padding: .35rem .3rem; align-items: flex-start; }
.stp-minute-vignette { width: 40px; height: 40px; margin-top: 2px; }
/* « À la minute » : 3 lignes de titre lisibles (avant : 2 lignes coupées par « … »). */
.stp-minute-titre { font-size: 14px; line-height: 1.28; -webkit-line-clamp: 3; }

/* 16.5 Bandes de l'accueil : ≤ 704 px à 1440×780 (≤ 870 à 1920×950). */
.stp-section { padding-block: clamp(36px, 3.6vw, 52px); }
.stp-section-tete { margin-bottom: 1.2rem; }
.stp-section-tete-titre { display: flex; flex-direction: column; }
.stp-fond-velours .stp-section-tete { flex-direction: row; align-items: center; }
.stp-section-tete .stp-sous-pastilles { margin: 0 auto 0 1.4rem; }
.stp-carte h3 { margin: .6rem 0 .25rem; line-height: 1.12; }
.stp-carte .stp-signature { margin: 0; }
.stp-fond-velours .stp-carte h3 a { color: #fff; }

/* S2 — Stars & Culture : miroir borné + 4 cartes 2×2 (ou lignes s'il en reste moins). */
.stp-sc-grille { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 28px; align-items: start; }
.stp-sc-grille--seul { grid-template-columns: minmax(0, 760px); justify-content: center; }
.stp-sc-principal .stp-miroir { aspect-ratio: auto; height: clamp(300px, calc(100vh - 400px), 420px); }
.stp-sc-principal h3 { margin-top: .7rem; }
.stp-sc-principal h3 a { color: #fff; text-decoration: none; }
.stp-sc-liste--grille { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 18px; }
.stp-sc-liste--grille .stp-carte-photo { aspect-ratio: 2/1; }
.stp-sc-liste--grille h3 { font-size: 17px; }
.stp-sc-liste--lignes { display: grid; gap: 16px; }
.stp-sc-liste--lignes .stp-carte { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 16px; align-items: center; }
.stp-sc-liste--lignes .stp-carte h3 { margin-top: 0; font-size: 19px; }
.stp-sc-liste .stp-signature { color: rgba(255,255,255,.72); }

/* S4 — Voyage : panoramique 2:1 + lignes qui occupent toute la hauteur (pas de vide à droite). */
.stp-voyage-grille { align-items: stretch; }
.stp-voyage-principal .stp-carte-photo { aspect-ratio: 2/1; }
.stp-voyage-principal .stp-chapo { margin: .2rem 0 0; color: var(--sb-doux); font-size: 15.5px; }
.stp-voyage-liste { grid-auto-rows: 1fr; align-content: stretch; }
.stp-voyage-ligne { grid-template-columns: 160px minmax(0,1fr); gap: 16px; align-items: center; color: var(--sb-encre); padding: 10px; border-radius: 14px; background: var(--sb-surf); }
.stp-voyage-ligne:hover { background: var(--sb-surf2); }
.stp-voyage-ligne .stp-carte-photo { aspect-ratio: 3/2; border-radius: 10px; }
.stp-voyage-ligne h3 { font-size: 17px; margin: 0 0 .3rem; }

/* S5/S6 — duo : chaque colonne = 1 grande carte carrée + 2 petites empilées (S6 en miroir). */
.stp-duo-col-tete { margin-bottom: .9rem; gap: .6rem; }
.stp-duo-col-tete h2 { margin: 0; font-size: clamp(22px, 2vw, 28px); color: var(--stp-rub); }
.stp-duo-col-tete .stp-voir-tout { margin-left: auto; font-size: 13px; }
.stp-duo-trio { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 16px; align-items: start; }
.stp-duo-trio .stp-grande .stp-carte-photo { aspect-ratio: 1/1; }
.stp-duo-trio .stp-grande h3 { font-size: 20px; }
.stp-duo-petites { display: grid; gap: 16px; }
.stp-duo-petites .stp-carte-photo { aspect-ratio: 2/1; }
.stp-duo-petites h3 { font-size: 15.5px; }
.stp-duo--inverse .stp-duo-trio { grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); }
.stp-duo--inverse .stp-grande { order: 2; }
.stp-section-tete--duo { justify-content: flex-start; gap: 1rem 3rem; }
.stp-section-tete--duo .stp-duo-col-tete { margin: 0; }
.stp-section-tete--duo .stp-duo-col-tete .stp-voir-tout { margin-left: .6rem; }

/* Grille adaptative (accueil, « Toujours dans… ») : la forme suit le nombre réel d'articles. */
.stp-adapt { display: grid; gap: clamp(16px, 2vw, 28px); }
.stp-adapt--n1 { grid-template-columns: 1fr; }
.stp-adapt--n1 .stp-carte { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 28px; align-items: center; }
.stp-adapt--n1 .stp-carte h3 { font-size: clamp(22px, 2.2vw, 30px); }
.stp-adapt--n2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.stp-adapt--n1 .stp-carte-photo, .stp-adapt--n2 .stp-carte-photo { aspect-ratio: 16/9; }
.stp-adapt--n3, .stp-adapt--n6 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.stp-adapt--n4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.stp-adapt--n5 { grid-template-columns: minmax(0,1.3fr) repeat(2, minmax(0,1fr)); }
.stp-adapt--n5 .stp-adapt-premiere { grid-row: span 2; display: flex; flex-direction: column; }
.stp-adapt--n5 .stp-adapt-premiere .stp-carte-photo { flex: 1 1 auto; aspect-ratio: auto; min-height: 240px; }
.stp-adapt--n5 .stp-adapt-premiere .stp-carte-photo img { position: absolute; inset: 0; }
.stp-adapt--n5 .stp-adapt-premiere h3 { font-size: clamp(20px, 1.9vw, 26px); }
.stp-adapt--n5 .stp-carte:not(.stp-adapt-premiere) .stp-carte-photo, .stp-adapt--n6 .stp-carte-photo { aspect-ratio: 2/1; }
.stp-adapt--sombre .stp-signature { color: rgba(255,255,255,.72); }

/* S8 — Actualité : liste horodatée à gauche, 3 cartes photo en rangée à droite. */
.stp-fil-grille { grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 2rem; align-items: start; }
.stp-fil-cartes { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.stp-fil-cartes h3 { font-size: 16px; }
.stp-fil-heure small { display: block; font: 600 11.5px/1.2 var(--stp-chiffre); color: var(--sb-doux); }
.stp-fil-liste h3 a { text-decoration: none; }
.stp-fil-liste h3 a:hover { text-decoration: underline; }

/* S9 — La rédaction : 3 vraies signatures, cartes horizontales. */
.stp-redaction-grille { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.stp-redaction-carte { flex-direction: row; text-align: left; align-items: center; gap: 1rem; text-decoration: none; color: var(--sb-encre); }
.stp-redaction-carte img, .stp-redaction-carte .sb-avatar-symbole { width: 76px; height: 76px; flex: none; }
.stp-redaction-txt { display: flex; flex-direction: column; gap: .2rem; }
.stp-redaction-compte { font: 700 13px/1 var(--stp-chiffre); color: var(--sb-accent); }
.stp-redaction-carte:hover h3 { text-decoration: underline; text-decoration-color: var(--sb-accent); }

/* 16.6 EN-TÊTE D'ARTICLE : la photo épouse la colonne du titre (du niveau de la pastille au bas
   des boutons), hauteur bornée 420-560 px — plus d'aplat indigo vide sous la photo. */
.stp-entete-article { padding-block: clamp(28px, 3vw, 44px) clamp(40px, 4vw, 56px); }
.stp-entete-article-in { align-items: stretch; }
.stp-entete-article-photo { display: flex; flex-direction: column; padding-top: 30px; }
.stp-entete-article-photo .stp-miroir { aspect-ratio: auto; flex: 1 1 auto; min-height: 420px; max-height: 560px; }

/* 16.7 Corps d'article : gouttière texte → colonne 56 px (avant 160) ; sommaire + formulaire =
   UN bloc collant plus court que la fenêtre, collé à 24 px du haut (l'en-tête du site défile). */
.sb-art-corps { grid-template-columns: minmax(0,1fr) 320px; gap: 56px; }
.sb-art-principal { max-width: none; }
.sb-colle[data-colle="true"] { top: 24px !important; }
.sb-art-aside .sb-colle-unique { display: flex; flex-direction: column; gap: 14px; }
.sb-art-aside .sb-sommaire { padding: 1rem 1rem .6rem; }
.sb-art-aside .sb-sommaire-barre { margin: .6rem 0 .3rem; }
.sb-art-aside .sb-sommaire ol { max-height: 196px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.sb-art-aside .sb-sommaire a { padding: .45rem .55rem; font-size: 14px; line-height: 1.3; }
.sb-sommaire a::before { color: var(--sb-accent); } /* or jamais en texte sur fond clair (DA §3) */
.sb-art-aside .stp-encart-question { padding: .9rem 1rem; }
.sb-art-aside .stp-encart-question form { gap: .5rem; margin-top: .4rem; }
.sb-art-aside .stp-encart-question .stp-kicker { margin: 0; }
.sb-art-aside .stp-encart-question textarea { height: 64px; resize: vertical; }
.sb-art-aside .stp-encart-question .stp-cta { width: 100%; }
.sb-texte .sb-auteur-fin { display: none; } /* boîte auteur du module commun : la boîte figée du thème suffit */

/* « Toujours dans <rubrique> » : bande pleine largeur, marge franche avant le pied. */
.stp-article-suite { margin-top: clamp(40px, 5vw, 64px); }

/* 16.8 Rubrique : trois miroirs bornés (jamais plus hauts que l'écran), forme selon le nombre. */
.stp-trois-miroirs .stp-miroir { aspect-ratio: auto; height: clamp(300px, calc(100vh - 400px), 380px); }
.stp-trois-miroirs .stp-miroir-central { height: clamp(340px, calc(100vh - 340px), 440px); }
.stp-trois-miroirs--n1 { grid-template-columns: minmax(0, 520px); justify-content: center; }
.stp-trois-miroirs--n2 { grid-template-columns: repeat(2, minmax(0, 440px)); justify-content: center; }
.stp-trois-miroirs figcaption a { font: 600 15px/1.3 var(--stp-chiffre); }
.stp-rubrique-liste { padding-block: 2.5rem 64px; }

/* 16.9 Marge franche avant le pied sur toutes les pages (R-1912). */
#stp-contenu > .stp-cadre:last-child { padding-bottom: 64px !important; }

/* 16.10 Débordements à 390 (contact, comparatifs d'article). */
.stp-champ input, .stp-champ textarea, .stp-champ select { width: 100%; max-width: 100%; min-width: 0; }
.stp-contact-grille > * { min-width: 0; }

@media (max-width: 980px) {
	.stp-une-grille { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
	.stp-sc-grille, .stp-fil-grille { grid-template-columns: minmax(0,1fr); }
	.stp-adapt--n4, .stp-adapt--n5, .stp-adapt--n6 { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.stp-adapt--n5 .stp-adapt-premiere { grid-row: auto; grid-column: 1 / -1; }
	.stp-adapt--n5 .stp-adapt-premiere .stp-carte-photo { aspect-ratio: 16/9; min-height: 0; }
	.stp-adapt--n3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.sb-art-corps { grid-template-columns: minmax(0,1fr) 280px; gap: 40px; }
	.stp-contact-grille { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 760px) {
	.stp-une-grille { grid-template-columns: minmax(0,1fr); }
	.stp-une-miroir-zone { padding: 12px; }
	.stp-une-miroir-zone .stp-miroir { height: auto; aspect-ratio: 4/5; max-height: 440px; }
	.stp-tirage { transform: none !important; }
	.stp-section-tete .stp-sous-pastilles { margin: .6rem 0 0; width: 100%; order: 3; }
	.stp-sc-principal .stp-miroir { height: auto; aspect-ratio: 4/5; max-height: 440px; }
	.stp-sc-liste--grille { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.stp-sc-liste--lignes .stp-carte { grid-template-columns: 120px minmax(0,1fr); }
	.stp-voyage-ligne { grid-template-columns: 110px minmax(0,1fr); }
	.stp-duo { gap: 40px; }
	.stp-duo-trio, .stp-duo--inverse .stp-duo-trio { grid-template-columns: minmax(0,1fr); }
	.stp-duo--inverse .stp-grande { order: 0; }
	.stp-duo-trio .stp-grande .stp-carte-photo { aspect-ratio: 16/10; }
	.stp-duo-petites { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.stp-adapt--n1 .stp-carte { grid-template-columns: minmax(0,1fr); gap: 0; }
	.stp-adapt--n2, .stp-adapt--n4, .stp-adapt--n6 { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.stp-adapt--n3, .stp-adapt--n5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.stp-adapt--n3 .stp-adapt-premiere, .stp-adapt--n5 .stp-adapt-premiere { grid-column: 1 / -1; }
	.stp-adapt .stp-carte h3 { font-size: 15.5px; }
	.stp-adapt .stp-carte-photo { aspect-ratio: 3/2; }
	.stp-adapt .stp-adapt-premiere .stp-carte-photo { aspect-ratio: 16/9; }
	.stp-fil-cartes { grid-template-columns: minmax(0,1fr); }
	.stp-fil-cartes .stp-carte { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 12px; align-items: center; }
	.stp-fil-cartes .stp-carte h3 { margin-top: 0; }
	.stp-redaction-grille { grid-template-columns: minmax(0,1fr); }
	.stp-entete-article-photo { padding-top: 0; }
	.stp-entete-article-photo .stp-miroir { aspect-ratio: 16/10; flex: none; min-height: 0; max-height: none; }
	.stp-trois-miroirs, .stp-trois-miroirs--n1, .stp-trois-miroirs--n2 { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding-bottom: 8px; }
	.stp-trois-miroirs figure { scroll-snap-align: center; }
	.stp-trois-miroirs .stp-miroir, .stp-trois-miroirs .stp-miroir-central { height: 340px; }
	.sb-compare { grid-template-columns: minmax(0,1fr) !important; }
	.stp-champs-duo { grid-template-columns: minmax(0,1fr); }
}
/* 16.11 Correctifs après mesure de la publication 1 */
.stp-adapt { gap: clamp(16px, 1.6vw, 24px); }
.stp-section-tete { margin-bottom: 1rem; }
.stp-adapt--n5 .stp-carte:not(.stp-adapt-premiere) h3, .stp-adapt--n6 .stp-carte h3 { font-size: 17px; }
.sb-art-aside .sb-sommaire ol { max-height: 150px; }
.sb-art-aside .stp-encart-question textarea { height: 52px; }
.sb-art-aside .stp-encart-question .stp-champ { gap: .25rem; }
/* Rubrique : la marquise est plus compacte, les trois miroirs remontent dans le premier écran. */
.stp-marquise-rubrique { padding-block: 26px 150px; }
.stp-marquise-rubrique .stp-fil-ariane { position: absolute; top: 18px; left: 0; margin: 0; }
.stp-marquise-rubrique-ampoules { margin-bottom: .9rem; }
.stp-marquise-rubrique-ampoules:not(:first-of-type) { margin: .7rem 0 0; }
.stp-marquise-rubrique h1 { font-size: clamp(40px, 6vw, 84px); line-height: .95; margin: 0; }
.stp-marquise-rubrique-chapo { margin-top: .7rem; }
.stp-marquise-rubrique-compteur { margin-top: .6rem; }
.stp-trois-miroirs { margin-top: -150px; }
.stp-trois-miroirs .stp-miroir { height: clamp(260px, calc(100vh - 500px), 330px); }
.stp-trois-miroirs .stp-miroir-central { height: clamp(300px, calc(100vh - 450px), 380px); }
@media (max-width: 760px) {
	.sb-art-corps { grid-template-columns: minmax(0,1fr); gap: 0; }
	.stp-section { padding-block: 44px; }
	.stp-une-miroir-zone .stp-miroir { aspect-ratio: 1/1; max-height: 380px; }
	.stp-marquise-rubrique { padding-block: 44px 90px; }
	.stp-marquise-rubrique .stp-fil-ariane { position: static; margin-bottom: .8rem; }
	.stp-trois-miroirs { margin-top: -60px; }
	.stp-trois-miroirs .stp-miroir, .stp-trois-miroirs .stp-miroir-central { height: 320px; }
}

/* 16.12 Finitions (publication 3) */
/* « À la minute » : les entrées se répartissent sur toute la hauteur du panneau (plus de vide
   de 100 px au-dessus de « Tout le fil » en 1920). */
.stp-une-minute ul { align-content: space-between; }
@media (max-width: 760px) {
	/* Carton de loge : à cheval sur le bas de la photo, sans en masquer la moitié. */
	.stp-entete-article-photo { margin-bottom: 30px; }
	.stp-carton-article { left: auto; right: 14px; bottom: -26px; width: auto; max-width: 230px; padding: 8px 12px; }
	.stp-carton-article p { font-size: 12px; line-height: 1.3; }
	.stp-carton-article p + p { margin-top: 2px; }
	.stp-une-minute ul { align-content: start; }
}

/* =====================================================================
 * 17. PASSE DE CORRECTIONS 2 (07/10/2026)
 * ===================================================================== */

/* 17.1 Barre fine collante (DA §7) : logo + rubriques + loupe, 56 px, apparaît quand l'en-tête
   complet a défilé. Les ancres (sommaire) et la colonne collante se calent dessous. */
.stp-barre { position: fixed; top: 0; left: 0; right: 0; z-index: 80; height: 56px; background: rgba(253,252,255,.97); border-top: 3px solid var(--stp-velours); border-bottom: 1px solid var(--sb-filet); box-shadow: 0 10px 24px -18px rgba(31,29,69,.55); transform: translateY(-100%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
.stp-barre.is-visible { transform: none; visibility: visible; transition: transform .22s ease; }
@media (prefers-reduced-motion: reduce) { .stp-barre, .stp-barre.is-visible { transition: none; } }
.stp-barre-in { display: flex; align-items: center; gap: 1rem; height: 100%; }
.stp-barre-logo { display: inline-flex; text-decoration: none; flex: none; }
.stp-barre-logo .stp-logo-mark { font-size: 22px; }
.stp-barre-rubriques { flex: 1; display: flex; gap: 2px; justify-content: center; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.stp-barre-rubriques::-webkit-scrollbar { display: none; }
.stp-barre-rubriques a { display: inline-flex; align-items: center; gap: .4rem; height: 36px; padding: 0 .65rem; border-radius: 999px; font: 600 14px/1 var(--stp-chiffre); color: var(--sb-encre); text-decoration: none; white-space: nowrap; }
.stp-barre-rubriques a:hover, .stp-barre-rubriques a.is-courant { background: var(--sb-surf); }
.stp-barre-loupe { width: 40px; height: 40px; flex: none; }
html { scroll-padding-top: 76px; }
.sb-texte h2, .sb-texte h3, .sb-art-principal [id] { scroll-margin-top: 76px; }
.sb-colle[data-colle="true"] { top: 72px !important; } /* 56 px de barre + 16 px */

/* 17.2 Repli photo de rubrique (article sans image à la une). */
.stp-photo-rubrique { object-fit: cover; }

/* 17.3 Haut des rubriques : la photo de la rubrique, floutée et voilée de velours, donne de la
   profondeur à la marquise ; sous-thèmes en étiquettes ; compteur réel. */
.stp-marquise-rubrique { isolation: isolate; border-bottom: 4px solid var(--stp-rub, var(--sb-accent)); }
.stp-marquise-fond { position: absolute; inset: -24px; z-index: -2; background-size: cover; background-position: center 40%; filter: blur(6px) saturate(1.15); transform: scale(1.05); opacity: .55; }
.stp-marquise-rubrique--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 50% 0%, rgba(49,48,99,.45), rgba(49,48,99,.92) 72%), linear-gradient(180deg, rgba(49,48,99,.35), var(--stp-velours) 96%); }
.stp-marquise-rubrique-sous { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 0; padding: 0; }
.stp-marquise-rubrique-sous li { font: 600 13px/1 var(--stp-chiffre); color: #fff; padding: .45rem .8rem; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); }
.stp-marquise-rubrique-compteur { font: 600 14px/1.2 var(--stp-chiffre); color: #D9D4F0; margin-top: .7rem; }
.stp-marquise-rubrique-compteur b { color: var(--sb-accent-2); font-weight: 800; font-variant-numeric: lining-nums tabular-nums; }
.stp-marquise-rubrique-chapo { margin-top: .55rem; }

/* 17.4 À PROPOS — page de marque. */
.stp-ap2-hero { padding-block: 30px 52px; background: var(--sb-fond); }
.stp-ap2-hero-in { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(28px,4vw,64px); align-items: center; }
.stp-ap2-hero-texte { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.stp-ap2-logo { font-size: 26px; }
.stp-ap2-titre { font-size: clamp(44px, 5.4vw, 80px); line-height: .95; margin: .2rem 0 0; }
.stp-ap2-devise { font: italic 400 19px/1.4 var(--sb-lecture); color: var(--sb-accent); margin: 0 0 .4rem; }
.stp-ap2-chapo { font: 400 17px/1.6 var(--sb-lecture); max-width: 54ch; margin: 0; }
.stp-ap2-chiffres { list-style: none; display: flex; gap: clamp(18px, 2.4vw, 36px); margin: .9rem 0 .6rem; padding: 0; }
.stp-ap2-chiffres li { display: flex; flex-direction: column; gap: .25rem; padding-left: .85rem; border-left: 3px solid var(--sb-accent-2); }
.stp-ap2-chiffres b { font: 800 40px/1 var(--stp-chiffre); color: var(--sb-accent); font-variant-numeric: lining-nums tabular-nums; }
.stp-ap2-chiffres span { font: 600 13px/1.2 var(--stp-chiffre); color: var(--sb-doux); }
.stp-ap2-hero-scene { position: relative; background: var(--sb-surf); border-radius: 28px; padding: 24px; }
.stp-ap2-hero-scene .stp-miroir { height: clamp(340px, calc(100vh - 330px), 480px); }
.stp-ap2-hero-scene .stp-miroir-etoile span { bottom: 9px; }
.stp-ap2-carton { position: absolute; left: -26px; bottom: -24px; max-width: 270px; z-index: 3; }
.stp-ap2-sous { margin: 0; font: italic 400 17px/1.4 var(--sb-lecture); color: var(--sb-doux); }
.stp-fond-velours .stp-ap2-sous { color: #D9D4F0; }
.stp-ap2-rubriques { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.stp-ap2-rubrique { display: flex; flex-direction: column; background: var(--sb-fond); border-radius: var(--sb-rayon); overflow: hidden; box-shadow: var(--sb-ombre); text-decoration: none; color: var(--sb-encre); border-bottom: 4px solid var(--stp-rub); }
.stp-ap2-rubrique .stp-carte-photo { aspect-ratio: 16/7; border-radius: 0; }
.stp-ap2-rubrique .stp-carte-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.stp-ap2-rubrique:hover { box-shadow: var(--sb-ombre-haut); }
.stp-ap2-rubrique:hover img { transform: scale(1.03); }
.stp-ap2-rubrique-chapo { flex: 1; padding: .8rem 1rem .35rem; font: 400 14.5px/1.4 var(--sb-lecture); }
.stp-ap2-rubrique-compte { padding: 0 1rem .9rem; font: 600 13px/1.2 var(--stp-chiffre); color: var(--sb-doux); }
.stp-ap2-rubrique-compte b { color: var(--sb-accent); font-weight: 800; }
.stp-ap2-methode { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: clamp(28px,4vw,56px); align-items: center; }
.stp-ap2-methode-photo .stp-miroir { height: clamp(320px, calc(100vh - 380px), 430px); }
.stp-ap2-cartons { display: grid; gap: 16px; margin-top: 1.2rem; }
.stp-ap2-engagement { padding: 16px 20px; transform: rotate(-1.2deg); max-width: 560px; }
.stp-ap2-engagement:nth-child(2) { transform: rotate(.9deg); margin-left: 28px; }
.stp-ap2-engagement:nth-child(3) { transform: rotate(-.5deg); margin-left: 8px; }
.stp-fond-velours .stp-ap2-engagement h3 { color: var(--sb-encre); font-size: 20px; margin: 0 0 .3rem; }
.stp-carton.stp-ap2-engagement p { font: 400 15px/1.5 var(--sb-lecture); color: var(--sb-doux); margin: 0; }
.stp-ap2-equipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.stp-ap2-signature { display: flex; gap: 18px; align-items: flex-start; background: var(--sb-surf); border-radius: var(--sb-rayon); padding: 22px; }
.stp-ap2-signature-photo img, .stp-ap2-signature-photo .sb-avatar-symbole { display: block; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--sb-fond), 0 0 0 6px var(--sb-accent-2); }
.stp-ap2-signature h3 { font-size: 24px; margin: 0; }
.stp-ap2-signature h3 a { text-decoration: none; color: var(--sb-encre); }
.stp-ap2-signature h3 a:hover { text-decoration: underline; text-decoration-color: var(--sb-accent); }
.stp-ap2-signature-role { margin: .3rem 0 .6rem; font: 400 14px/1.4 var(--sb-lecture); color: var(--sb-doux); }
.stp-ap2-signature-rubs { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .7rem; }
.stp-ap2-signature-rubs .stp-pastille { font-size: 12px; padding: .38rem .6rem; }
.stp-ap2-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; padding: 28px 32px; max-width: 980px; margin-inline: auto; transform: rotate(-.6deg); border-top-width: 4px; }
.stp-ap2-contact h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 0 0 .3rem; }
.stp-carton.stp-ap2-contact p { font: 400 15.5px/1.5 var(--sb-lecture); color: var(--sb-doux); margin: 0; }
.stp-ap2-contact-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.stp-carton.stp-ap2-contact .stp-ap2-contact-actions p { font-size: 13px; }

/* 17.5 CONTACT — le formulaire au centre d'un miroir de loge. */
.stp-ct-scene { padding-block: 30px 64px; }
.stp-ct-grille { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.35fr); grid-template-areas: "tete form" "cartons form"; gap: 1.4rem clamp(28px,4vw,56px); align-items: start; }
.stp-ct-tete { grid-area: tete; }
.stp-ct-miroir { grid-area: form; position: relative; }
.stp-ct-cartons { grid-area: cartons; }
.stp-ct-titre { font-size: clamp(36px, 4vw, 56px); margin: .3rem 0 .4rem; }
.stp-ct-chapo { font: 400 18px/1.5 var(--sb-lecture); color: var(--sb-doux); margin: 0; max-width: 46ch; }
.stp-miroir--formulaire { padding: 26px; }
.stp-ct-carte { background: var(--sb-fond); border-radius: 14px; padding: clamp(20px, 2.4vw, 30px); }
.stp-ct-carte form { display: grid; gap: .9rem; }
.stp-ct-carte .stp-cta { justify-self: start; }
.stp-ct-carte textarea { min-height: 120px; }
.stp-champ select { font: 400 16px var(--sb-lecture); padding: .75rem .9rem; border: 1px solid var(--sb-filet); border-radius: 10px; background: #fff; color: var(--sb-encre); }
.stp-ct-carton { position: absolute; right: -14px; bottom: -26px; max-width: 260px; transform: rotate(2deg); z-index: 3; }
.stp-ct-cartons h2 { font-size: 24px; margin: 0 0 .8rem; }
.stp-ct-c { margin-bottom: 14px; padding: 14px 18px; transform: rotate(-1deg); }
.stp-ct-c:nth-of-type(2) { transform: rotate(.8deg); margin-left: 18px; }
.stp-ct-c h3 { font-size: 18px; margin: 0 0 .2rem; }
.stp-carton.stp-ct-c p { font: 400 14.5px/1.5 var(--sb-lecture); color: var(--sb-doux); margin: 0; }
.stp-ct-merci { text-align: center; padding: 2rem 1rem; }
.stp-ct-merci p { color: var(--sb-doux); }

@media (max-width: 980px) {
	.stp-ap2-hero-in, .stp-ap2-methode { grid-template-columns: minmax(0,1fr); }
	.stp-ap2-rubriques { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.stp-ct-grille { grid-template-columns: minmax(0,1fr); grid-template-areas: "tete" "form" "cartons"; }
}
@media (max-width: 760px) {
	.stp-barre { height: 52px; }
	.stp-barre-logo .stp-logo-mark { font-size: 18px; }
	.stp-barre-rubriques { justify-content: flex-start; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
	.stp-ap2-hero-scene { padding: 12px; }
	.stp-ap2-hero-scene .stp-miroir { height: 300px; }
	.stp-ap2-carton { left: 10px; bottom: -22px; max-width: 230px; }
	.stp-ap2-hero-in { gap: 44px; }
	.stp-ap2-hero-scene { order: -1; }
	.stp-ap2-chiffres b { font-size: 32px; }
	.stp-ap2-rubriques { grid-template-columns: minmax(0,1fr); }
	.stp-ap2-rubrique .stp-carte-photo { aspect-ratio: 16/6; }
	.stp-ap2-methode-photo .stp-miroir { height: 240px; }
	.stp-ap2-engagement:nth-child(2) { margin-left: 10px; }
	.stp-ap2-signature { padding: 16px; }
	.stp-ap2-signature-photo img, .stp-ap2-signature-photo .sb-avatar-symbole { width: 72px; height: 72px; }
	.stp-ap2-contact { padding: 22px; transform: none; }
	.stp-ap2-contact-actions { align-items: flex-start; }
	.stp-miroir--formulaire { padding: 16px; }
	.stp-ct-carton { right: 8px; bottom: -22px; }
	.stp-ct-cartons { margin-top: 20px; }
	.stp-ct-c:nth-of-type(2) { margin-left: 8px; }
}
/* 17.6 Fond de marquise un peu plus présent (la photo de rubrique doit se lire). */
.stp-marquise-fond { opacity: .75; filter: blur(4px) saturate(1.2); }
.stp-marquise-rubrique--photo::before { background: radial-gradient(120% 95% at 50% 0%, rgba(49,48,99,.3), rgba(49,48,99,.86) 75%), linear-gradient(180deg, rgba(49,48,99,.25), var(--stp-velours) 97%); }

/* =====================================================================
 * 18. PASSE DE CORRECTIONS 3 (07/10/2026) — rouges de la porte de sortie
 * ===================================================================== */
/* 18.1 Contraste réel (≥ 4,5:1, clair ET sombre — le site est en clair seul). */
.sb-pied-fil time { color: rgba(255,255,255,.8); font-size: 12px; } /* 4,29 → ≈ 8,4:1 sur velours */
[class*="sbsrc-"][class*="__date"] { color: var(--sb-doux) !important; opacity: 1 !important; } /* module sources : .35 d'opacité → 5,9:1 */

/* 18.2 Premier écran 390 : rien ne dépasse de son cadre. */
@media (max-width: 760px) {
	.stp-miroir-etoile { top: 8px; right: 8px; width: 50px; height: 50px; }
	.stp-miroir-etoile svg { width: 24px; height: 24px; }
	.stp-miroir-etoile span { font-size: 7.5px; bottom: 7px; }
	/* Carton de loge : sous la photo, dans le flux (plus à cheval sur le bord). */
	.stp-entete-article-photo { margin-bottom: 0; }
	.stp-carton-article { position: static; transform: rotate(-1deg); margin: 10px 0 0 6px; max-width: none; width: fit-content; }
	.stp-ap2-carton { position: static; transform: rotate(-1deg); margin: 12px 0 0 4px; max-width: none; width: fit-content; }
	.stp-ct-carton { position: static; transform: rotate(-1deg); margin: 12px 0 0 4px; max-width: none; width: fit-content; }
	/* Contact : le bouton « Envoyer » visible sans défiler (titre + champs compacts). */
	.stp-ct-scene { padding-top: 16px; }
	.stp-ct-grille { gap: .9rem; }
	.stp-ct-tete .stp-fil-ariane { margin-bottom: .2rem; }
	.stp-ct-titre { font-size: 30px; margin: 0; }
	.stp-ct-chapo { display: none; }
	.stp-miroir--formulaire { padding: 10px; }
	.stp-miroir--formulaire .stp-miroir-ampoules--haut { top: 1px; height: 8px; }
	.stp-miroir--formulaire .stp-miroir-ampoules--gauche { left: 1px; }
	.stp-miroir--formulaire .stp-miroir-ampoules--droite { right: 1px; }
	.stp-ct-carte { padding: 14px; }
	.stp-ct-carte form { gap: .6rem; }
	.stp-ct-carte .stp-champs-duo { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; }
	.stp-ct-carte .stp-champ { gap: .25rem; }
	.stp-ct-carte .stp-champ label { font-size: 12.5px; }
	.stp-ct-carte .stp-champ input, .stp-ct-carte .stp-champ select { padding: .6rem .7rem; }
	.stp-ct-carte textarea { min-height: 84px; height: 84px; padding: .6rem .7rem; }
	.stp-ct-carte .stp-cta { width: 100%; }
}

/* =====================================================================
 * 19. /peaufiner — 07/10/2026 soir (jugement visuel, rouges 1-3 + oranges)
 * ===================================================================== */

/* R1 — titre de la une : deuxième ton (rouge italique), comme la devise d'À propos. */
.stp-une-titre-accent { color: var(--sb-accent); font-style: italic; font-weight: 600; }

/* R2 — bouton d'action de la une, visible sans défiler en mobile. */
.stp-cta--une { margin-top: .3rem; align-self: flex-start; }

/* R3 — bloc réseau « Dans d'autres coulisses » : air franc, centré, pas de filet blanc avant
   le pied (le bloc est injecté hors thème ; spécificité supérieure pour passer devant son
   <style> inline). */
body .sp-coulisses { margin: 64px auto 0 !important; text-align: center; }
body .sp-coulisses summary { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
body .sp-coulisses ul { justify-content: center; }

/* Orange 7 — bandeau EN DIRECT / fil À la minute : ampoule au lieu de la pastille rouge pulsée. */
.stp-marquise-tag { background: var(--stp-velours); }
.stp-point-direct { background: var(--sb-accent-2); box-shadow: 0 0 6px 1px rgba(255,207,0,.75); animation: none; }

/* Orange 10 — grande carte Voyage : air sous la photo, pas de soulignement. */
.stp-voyage-principal h3 { margin-top: 16px; }
.stp-voyage-principal h3 a { text-decoration: none; }

/* Orange 11 — Box-office : titres en police de lecture lisible, semi-gras. */
.stp-boxoffice-liste h3 { font: 600 16px/1.3 var(--sb-lecture); }

/* Orange 15 — encadrés mal calés : air en tête, Sources sans boîte-dans-la-boîte. */
.sb-sommaire-mobile summary { padding-block: .7rem; }
[class*="sbsrc-"][class*="__tbl"] .sb-sources,
[class*="sbsrc-"][class*="__tbl"] .sb-alire { margin: 0; border: 0; box-shadow: none; }
.sb-sources { padding-top: 20px; }

/* Orange 17 — en-tête d'article mobile : fil d'Ariane en premier, carte en débord sur la photo. */
.stp-entete-article-in > .stp-fil-ariane { grid-column: 1 / -1; margin: 0 0 .6rem; }
@media (max-width: 760px) {
	.stp-carton-article { position: absolute; left: auto; right: 14px; bottom: -22px; width: auto; max-width: 220px; margin: 0; transform: rotate(-2deg); }
}

/* Orange 19 — liste de rubrique : pas de soulignement, résumé sur 2 lignes, vignette plus grande. */
.stp-liste-horodatee h3 a { text-decoration: none; }
.stp-liste-horodatee .stp-chapo { margin: .3rem 0 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 760px) {
	.stp-liste-horodatee li { grid-template-columns: 1fr 120px; }
	.stp-liste-horodatee-photo { aspect-ratio: 4/3; }
}

/* Orange 20 — « Tous les articles » / page auteur : grille de cartes + pagination par ancre
   (jamais /page/N/, R-câblage généraliste) au lieu d'un mur de liens texte. */
.stp-secours { margin-top: 2rem; border-top: 1px solid var(--sb-filet); padding-top: 1.5rem; }
.stp-secours-titre { font: 700 13px var(--stp-chiffre); color: var(--sb-doux); margin: 0 0 1rem; }
.stp-secours-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; scroll-margin-top: 90px; }
.stp-secours-grille + .stp-secours-grille { margin-top: 1rem; }
.stp-secours-grille .stp-carte h3 { font-size: 14.5px; }
.stp-secours-grille .stp-carte .stp-signature { font-size: 12px; }
.stp-secours-pages { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.stp-secours-page-lien { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 .6rem; border-radius: 999px; border: 1px solid var(--sb-filet); font: 700 14px var(--stp-chiffre); color: var(--sb-encre); text-decoration: none; }
.stp-secours-page-lien:hover, .stp-secours-page-lien.is-actif { background: var(--sb-encre); color: var(--sb-fond); border-color: var(--sb-encre); }

/* Orange 21 — image brute du corps d'article : coins ronds comme le reste du site, air avant
   l'intertitre suivant ; comparatif : un seul cadre (le wrapper du module sources est neutralisé). */
.sb-texte .wp-block-image { margin: 1.75rem 0; }
.sb-texte .wp-block-image img { border-radius: var(--sb-rayon); display: block; width: 100%; }
[class*="sbsrc-"][class*="__tbl"] { border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 1.6rem 0 !important; overflow: visible !important; }

/* Orange 23 — ampoules des cadres de photo : invisibles pendant l'en-tête collant (fin de
   défilement, capture pleine page) plutôt que des taches grises résiduelles. */
.stp-entete.is-pose ~ #stp-contenu .stp-miroir-ampoules,
html.stp-barre-on #stp-contenu .stp-miroir-ampoules { opacity: 0; }

/* Orange 24 — menu des rubriques en mobile : fondu de fin + air pour ne pas couper un mot net. */
.stp-rubriques-in { position: relative; }
.stp-rubriques-in ul { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 20px; }

/* Défaut 4 (filet de sécurité gabarit) — jamais une puce native orpheline sur un <li> hors
   <ul>/<ol> laissé par un contenu mal fermé (force_balance_tags les rend visibles). */
.sb-texte li { list-style: none; }

@media (max-width: 480px) {
	.stp-une-miroir-zone .stp-miroir { aspect-ratio: auto; height: 230px; max-height: 230px; }
	/* L'étiquette, le titre et le bouton doivent tenir dans les 700 px avant la ligne de
	   flottaison : le chapô et la ligne auteur passent après le bouton, pas avant. */
	.stp-une-chapo, .stp-une-auteur { order: 9; }
}

/* ===================================================================
 * PASSE DE CORRECTIONS 2 (08/10/2026) — jugement visuel du 08/10
 * =================================================================== */

/* ROUGE 1 (Q4, éliminatoire) — le bouton « Lire la une » restait coupé par la barre fixe
 * Accueil/Chercher en 390 px : le cadre photo et les espacements de la une sont resserrés
 * encore un cran, pour que pastille + titre + bouton tiennent avant les ~56 px de la barre. */
@media (max-width: 480px) {
	.stp-une-miroir-zone .stp-miroir { height: 186px; max-height: 186px; }
	.stp-une-miroir-zone { padding: 8px; }
	.stp-une-majeur { gap: .55rem; }
	.stp-une-titre { font-size: clamp(28px, 7.2vw, 40px); }
	.stp-cta--une { margin-top: 0; }
}

/* ROUGE 2 — fin d'accueil : le lien « Dans d'autres coulisses » (bloc hors thème, injecté par
 * le plugin réseau sb-voisins après la dernière section) tombait seul dans une bande blanche
 * collée au pied. On ne peut pas toucher au fichier du plugin : on reprend son rendu ici, en
 * CSS seul, pour qu'il se lise comme la suite de « La rédaction » (même fond poudre), centré,
 * avec de l'air avant le pied. Spécificité `body .sp-coulisses` : bat les règles `!important`
 * posées par le plugin (sélecteur `.sp-coulisses` seul), sans toucher à son fichier. */
body .sp-coulisses {
	display: block !important;
	background: var(--sb-surf) !important;
	margin: 0 !important;
	padding: 28px 20px 64px !important;
	max-width: none !important;
	width: 100% !important;
	text-align: center;
}
body .sp-coulisses details { display: inline-block; text-align: center; }
body .sp-coulisses summary { opacity: .7 !important; font: 700 13px var(--stp-chiffre) !important; }
body .sp-coulisses ul { justify-content: center !important; }
/* Le bloc n'est plus le dernier `.stp-cadre` direct de `#stp-contenu` (il est injecté après) :
 * la règle 16.9 ne s'applique donc plus toute seule — on la repose ici sur le vrai dernier
 * élément visible de l'accueil. */
#stp-contenu > .sp-coulisses:last-child { padding-bottom: 64px !important; }

/* ORANGE — listes « erreurs / pièges / mythes » : le module figé réseau donne la même coche
 * verte à toutes les listes de contenu ; stp_listes_alertes() (functions.php) bascule celles
 * qui suivent un intertitre d'alerte sur cette classe, posée ici en CSS seul. Même gabarit que
 * `.sb-cards` (gardé), seule l'icône change : une croix, toujours en rouge d'alerte, quelle que
 * soit la couleur de rubrique de l'article. */
.sb-texte .sb-encadre-alertes > li::before {
	background-color: var(--sb-accent-fort);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}

/* ORANGE — « Autres pages de cette rubrique » (texte déjà en base, hors sujet) remplacé à
 * l'affichage par stp_voisins_rubrique() (functions.php) en 3 cartes photo de la même
 * rubrique : même langage visuel que « Toujours dans <rubrique> ». */
.stp-voisins-rubrique { margin: 2.2rem 0; }
.stp-voisins-titre { font: 700 13px var(--stp-chiffre); letter-spacing: .04em; text-transform: uppercase; color: var(--sb-doux); margin: 0 0 .9rem; }
.stp-voisins-rubrique .stp-adapt { margin: 0; }

/* ORANGE 4 — encadré « à retenir » : le titre touchait le haut de son cadre (padding-top trop
 * court dans le bloc figé). */
.sb-encadre-cle { padding-top: 24px; }

/* ORANGE 4 (suite) — le bloc Sources du mu-plugin réseau (the_content, priorité 20) se faisait
 * ensuite rattraper par le module figé « listes visuelles » (coche + carte) : boîte dans une
 * boîte, largeur anormalement étroite en mobile. stp_sources_propres() (functions.php) reprend
 * la classe des deux conteneurs ; ici, LEUR habillage, une seule boîte, pleine largeur. */
.stp-sources { background: var(--sb-surf); border: 1px solid var(--sb-filet); border-radius: var(--sb-rayon); padding: 1.1rem 1.3rem; margin: 1.75rem 0; }
.stp-sources-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; width: 100%; }
.stp-sources-liste > li { padding: 0 0 .6rem; border-bottom: 1px solid var(--sb-filet); font: 400 15px/1.5 var(--sb-lecture); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3em .8em; }
.stp-sources-liste > li:last-child { border-bottom: 0; padding-bottom: 0; }
.stp-sources-liste > li::before { content: none; }
@media (max-width: 480px) { .stp-sources-liste > li { flex-direction: column; align-items: flex-start; gap: .15em; } }

/* ORANGE 8 — intertitres collés au bloc FAQ juste au-dessus (aucune marge basse posée par le
 * module figé sur `.sb-faq-liste`). */
.sb-faq-liste { margin-bottom: 40px; }
.sb-faq { margin-bottom: 40px; }

/* ORANGE 9 — grande carte « Stars & Culture » : le titre dépassait du cadre de la photo (le
 * cadre « miroir » a 16 px de marge interne que le texte dessous n'avait pas), pas de
 * signature alors que les cartes voisines en ont (ajoutée côté PHP, stp_section_stars_culture()). */
.stp-sc-principal h3, .stp-sc-principal .stp-signature { padding-left: 16px; }
.stp-sc-principal .stp-signature { margin-top: .3rem; }

/* ORANGE 10 — rubriques/auteur : pagination de secours collée à gauche sous une grille dont le
 * bord droit est irrégulier (auto-fill). Centrée, comme le reste des dernières sections. */
.stp-secours-pages { justify-content: center; }
.stp-secours-titre { text-align: center; }

/* ORANGE 11 — ampoules grises à gauche/droite de la barre fine collante : son fond n'était
 * opaque qu'à 97 % (rgba(…, .97)), assez pour laisser passer en transparence les ampoules or
 * de la section qui défile dessous. Fond plein, le défaut disparaît sans rien cacher. */
.stp-barre { background: var(--sb-fond); }

/* ORANGE 11 (suite) — menu des rubriques en mobile : le fondu de 28 px posé en passe 1 était
 * trop étroit pour un mot de plusieurs lettres (« Table & Sou| ») : on le lisait encore coupé
 * net. Fondu élargi pour que l'élément partiellement visible s'efface avant d'être lisible. */
.stp-rubriques-in ul { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); padding-right: 44px; }

/* 08/10 — porte de sortie n°6 (hors_cadre 390) : la carte d'en-tête reste posée SUR la photo, sans sortir du cadre ;
   l'étiquette de rubrique tient dans les vignettes de la bande Voyage. */
@media (max-width: 760px) {
	.stp-carton-article { bottom: 12px; right: 12px; }
	.stp-voyage-ligne { grid-template-columns: 150px minmax(0,1fr); }
	.stp-voyage-ligne .stp-pastille--photo { top: 6px; left: 6px; font-size: 10px; padding: .3rem .45rem; gap: 0; }
	.stp-voyage-ligne .stp-pastille--photo .stp-pastille-signe { display: none; }
}

/* 08/10 — retours Mathias avant CERCLE.
   R-1919 : le fil « Dans les coulisses » défilait sous l'étiquette (c'est l'<ul> entier qui glissait,
   son propre overflow ne coupait donc rien) → une fenêtre fixe .stp-marquise-vue coupe le texte,
   l'<ul> défile DEDANS ; rien ne passe plus sous l'étiquette ni sous la date. */
.stp-marquise-vue { flex: 1 1 auto; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.stp-marquise-vue .stp-marquise-fil { flex: none; width: max-content; overflow: visible; mask-image: none; }
@media (prefers-reduced-motion: reduce) { .stp-marquise-vue { overflow-x: auto; } }
/* R-1918 : sommaire de la barre latérale affiché EN ENTIER, jamais de barre de défilement interne.
   Le bloc figé ne le rend collant que s'il tient dans la fenêtre (data-colle) ; sinon il défile avec la page. */
.sb-art-aside .sb-sommaire ol { max-height: none !important; overflow: visible !important; }
.sb-art-aside .sb-sommaire a { padding: .38rem .55rem; font-size: 13.5px; line-height: 1.28; }