@font-face {
  font-family: 'Science Gothic';
  font-style: oblique 0deg 10deg;
  font-weight: 100 900;
  font-stretch: 50% 200%;
  font-display: swap;
  src: url(../fonts/science-gothic-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Science Gothic';
  font-style: oblique 0deg 10deg;
  font-weight: 100 900;
  font-stretch: 50% 200%;
  font-display: swap;
  src: url(../fonts/science-gothic-var-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: 'Host Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/host-grotesk-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Host Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/host-grotesk-400-italic-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: 'Host Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/host-grotesk-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/host-grotesk-400-normal-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: 'Host Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/host-grotesk-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/host-grotesk-500-normal-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: 'Host Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/host-grotesk-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/host-grotesk-700-normal-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: Coach Sportif 27 — Pignon
Theme URI: https://coachsportif27.com/
Author: Coach Sportif 27
Description: Thème code-pur de coachsportif27.com — coaching sportif à domicile dans l'Eure
 et l'agglomération de Rouen. Signature : le pignon à colombages (photos maîtresses découpées
 en silhouette de maison normande), le chrono de séance, la semaine cochée, les fiches de
 verre sur photo, le tapis qui se déroule (formulaire), le carnet de séance ligné, la dalle
 caoutchouc mouchetée. Palette craie / bleu nuit / vermillon élastique / blé du Neubourg.
 Mode clair uniquement.
Version: 1.0.0
Text Domain: s27-pignon
*/

/*
 * BLOC FIGÉ — ARTICLE (thématique) — CSS
 * Origine : curieux-du-web.com, theme/style.css, règles `.cdw-article*` /
 * `.cdw-fil-ariane` / `.cdw-a-lire` / `.cdw-carte*` (renommées `.sbt-*` ici).
 * Posé tel quel (copie du registre sb-kit, blocs-valides/thematique), habillage
 * uniquement par les variables --sb-* définies dans assets/css/app.css.
 * INTERDIT DE MODIFIER : voir single-article.php du registre (un seul <article>,
 * « à lire aussi » en <div>). Le gabarit single.php de ce thème réutilise les
 * classes .sbt-article-mise-en-page / .sbt-article-corps / .sbt-a-lire / .sbt-carte*
 * définies ici, avec une en-tête propre au site (s27-entete-article) posée au-dessus.
 */

.sbt-conteneur{ max-width: var(--sb-conteneur, 1240px); margin-inline: auto; padding-inline: var(--sb-gouttiere, 24px); }

.sbt-fil-ariane{ font-size: .8125rem; color: var(--sb-doux, #55607a); display: flex; gap: 6px; flex-wrap: wrap; padding-block: 16px; }
.sbt-fil-ariane a{ color: var(--sb-doux, #55607a); text-decoration: none; }
.sbt-fil-ariane a:hover{ color: var(--sb-encre, #0f172a); }

.sbt-article-mise-en-page{
	display: grid; grid-template-columns: minmax(0, var(--sb-lecture, 720px)) var(--sb-rail, 340px);
	column-gap: var(--sb-gouttiere, 24px); row-gap: var(--sb-gouttiere, 24px);
	max-width: var(--sb-conteneur, 1240px); margin-inline: auto;
	padding: 32px var(--sb-gouttiere, 24px) 64px; align-items: start; justify-content: center;
}
@media (max-width: 1080px){ .sbt-article-mise-en-page{ grid-template-columns: minmax(0,1fr); } .sbt-article-principal, .sbt-rail{ min-width: 0; } }
.sbt-article-mise-en-page--suite{ padding-top: 0; }

.sbt-article-corps{ font-size: 1.0625rem; line-height: 1.7; color: var(--sb-encre, #0f172a); font-family: var(--sb-texte, 'Inter', system-ui, sans-serif); }
.sbt-article-corps h2{ margin-top: 2.2em; margin-bottom: .6em; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); }
.sbt-article-corps h3{ margin-top: 1.8em; margin-bottom: .45em; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); }
.sbt-article-corps p{ margin-bottom: 1.3em; }
.sbt-article-corps img{ border-radius: var(--sb-rayon, 14px); margin-block: 1.6em; width: 100%; height: auto; }
.sbt-article-corps blockquote{
	margin: 1.8em 0; padding: 18px 24px; border-left: 4px solid var(--sb-accent, #2563eb);
	background: var(--sb-surf, #f4f5fa); border-radius: 8px; font-style: italic;
}

.sbt-sommaire-mobile{ display: none; }
@media (max-width: 1080px){ .sbt-sommaire-mobile{ display: block; margin-bottom: 24px; } }
@media (max-width: 1080px){ .sbt-rail-carte--sommaire{ display: none; } }

.sbt-a-lire{ margin-top: 0; padding-top: 0; border-top: 0; }
.sbt-kicker{ font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-size: .9375rem; font-weight: 700; margin-bottom: 12px; }
.sbt-grille{ display: grid; gap: var(--sb-gouttiere, 24px); }
.sbt-grille--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 760px){ .sbt-grille--3{ grid-template-columns: 1fr; } }
.sbt-carte{
	background: var(--sb-fond-carte, #ffffff); border: 1px solid var(--sb-filet, #e2e5ef);
	border-radius: var(--sb-rayon, 14px); overflow: hidden; box-shadow: var(--sb-ombre, 0 8px 24px rgba(15,23,42,.08));
	transition: transform .2s ease, box-shadow .2s ease;
}
.sbt-carte:hover{ transform: translateY(-4px); box-shadow: var(--sb-ombre-forte, 0 16px 40px rgba(15,23,42,.16)); }
.sbt-carte a{ display: block; color: inherit; text-decoration: none; }
.sbt-carte img{ width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.sbt-carte-corps{ padding: 18px; }
.sbt-carte-corps h3{ margin: 0; font-size: 1.0625rem; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); }

.sbt-article-commentaires{ margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--sb-filet, #e2e5ef); }

/*
 * BLOC FIGÉ — BARRE LATÉRALE D'ARTICLE (thématique) — CSS
 * Copié tel quel depuis sb-kit/gabarits-design/blocs-valides/thematique/partial-sidebar.css.
 * GARDE-FOU conservé : jamais de overflow-y ni de max-height sur .sbt-rail.
 */

.sbt-rail{
	position: sticky; top: 96px; align-self: start;
	display: flex; flex-direction: column; gap: 20px;
	border-left: 1px solid var(--sb-filet, #e2e5ef); padding-left: 20px;
}
.sbt-rail-carte{
	background: var(--sb-fond-carte, #ffffff); border: 1px solid var(--sb-filet, #e2e5ef);
	border-radius: var(--sb-rayon, 14px); padding: 18px;
}
.sbt-rail-carte .sbt-t4, .sbt-rail-carte h4{
	font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-size: .875rem;
	text-transform: uppercase; letter-spacing: .04em; color: var(--sb-doux, #55607a); margin: 0 0 10px;
}
@media (max-width: 1080px){
	.sbt-rail{ position: static; border-left: 0; padding-left: 0; border-top: 1px solid var(--sb-filet, #e2e5ef); padding-top: 20px; }
}

/*
 * BLOC FIGÉ — SOMMAIRE (thématique) — CSS
 * Copié tel quel depuis sb-kit/gabarits-design/blocs-valides/thematique/partial-sommaire.css.
 */

.sbt-sommaire{
	background: var(--sb-fond-carte, #ffffff); border: 1px solid var(--sb-filet, #e2e5ef);
	border-left: 4px solid var(--sb-accent, #2563eb); border-radius: var(--sb-rayon, 14px);
	padding: 16px 20px;
}
.sbt-sommaire-titre{
	font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-weight: 700;
	font-size: .9375rem; cursor: pointer; list-style: none;
}
.sbt-sommaire-titre::-webkit-details-marker{ display: none; }
.sbt-sommaire ol{ list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sbt-sommaire li a{
	display: flex; align-items: baseline; gap: 10px; font-size: .9375rem;
	color: var(--sb-encre, #0f172a); text-decoration: none;
}
.sbt-sommaire li a:hover{ color: var(--sb-accent, #2563eb); text-decoration: underline; }
.sbt-sommaire-num{
	font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-weight: 700; font-size: .75rem;
	color: var(--sb-encre, #0f172a); background: var(--sb-surf, #f4f5fa); border-radius: 50%;
	width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}

/*
 * BLOC FIGÉ — ENCADRÉS « LE SAVIEZ-VOUS » / « POINTS À RETENIR » (thématique) — CSS
 * Copié tel quel depuis sb-kit/gabarits-design/blocs-valides/thematique/partial-encadres.css.
 */

.sbt-encadre{ margin-block: 2em; border-radius: var(--sb-rayon-grand, 22px); }

.sbt-encadre-titre{
	margin: 0 0 12px; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif);
	font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em;
}

.sbt-encadre--retenir{
	background: var(--sb-fonce, #141733); color: var(--sb-sur-fonce, #ffffff);
	padding: 28px 30px;
}
.sbt-encadre--retenir .sbt-encadre-titre{ color: var(--sb-accent-clair, #93c5fd); }
.sbt-retenir-liste{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sbt-retenir-liste li{
	position: relative; padding-left: 32px; font-size: 1rem; line-height: 1.55;
}
.sbt-retenir-liste li::before{
	content: ""; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; border-radius: 50%;
	background: var(--sb-accent, #2563eb)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
		center / 12px no-repeat;
}

.sbt-encadre--saviez{
	display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start;
	padding: 22px 24px; background: var(--sb-surf, #f4f5fa);
}
.sbt-encadre--saviez::before{
	content: "?"; grid-row: 1 / span 2; width: 48px; height: 48px; border-radius: 14px;
	background: var(--sb-accent, #2563eb); color: #fff; display: flex; align-items: center; justify-content: center;
	font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-weight: 700; font-size: 1.375rem;
}
.sbt-encadre--saviez .sbt-encadre-titre{ grid-column: 2; margin: 0; color: var(--sb-encre, #0f172a); }
.sbt-encadre--saviez p:not(.sbt-encadre-titre){ grid-column: 2; margin: 0; font-size: 1rem; line-height: 1.6; color: var(--sb-encre, #0f172a); }

@media (max-width: 620px){
	.sbt-encadre--saviez{ grid-template-columns: 1fr; }
	.sbt-encadre--saviez::before{ grid-row: 1; }
	.sbt-encadre--saviez .sbt-encadre-titre, .sbt-encadre--saviez p:not(.sbt-encadre-titre){ grid-column: 1; }
}
.sbt-article-corps .sbt-retenir-liste{ padding: 0; margin: 0; list-style: none; }
.sbt-article-corps .sbt-retenir-liste li{ padding-left: 34px; margin: 0; text-indent: 0; }

/*
 * BLOC FIGÉ — FAQ EN ACCORDÉON (thématique) — CSS
 * Copié tel quel depuis sb-kit/gabarits-design/blocs-valides/thematique/partial-faq.css,
 * chevron recoloré en vermillon (habillage libre, cf. en-tête du fichier d'origine).
 */

.sbt-faq{ margin: 56px 0; padding: 30px; border-radius: var(--sb-rayon-grand, 22px); background: var(--sb-surf, #f4f5fa); border: 1px solid var(--sb-filet, #e2e5ef); }
.sbt-faq-liste{ display: grid; gap: 10px; }
.sbt-faq-liste details{
	background: var(--sb-fond-carte, #ffffff); border: 1px solid var(--sb-filet, #e2e5ef) !important;
	border-radius: 14px; padding: 0 !important; transition: box-shadow .25s ease, border-color .25s ease;
}
.sbt-faq-liste details[open]{ box-shadow: var(--sb-ombre, 0 8px 24px rgba(15,23,42,.08)); border-color: var(--sb-accent, #2563eb) !important; }
.sbt-faq-liste summary{
	list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
	gap: 18px; padding: 18px 20px; font-size: 1.03rem; font-weight: 600; line-height: 1.45; color: var(--sb-encre, #0f172a);
}
.sbt-faq-liste summary::-webkit-details-marker{ display: none; }
.sbt-faq-liste summary::after{
	content: ""; width: 30px; height: 30px; flex: none; border-radius: 50%;
	background: var(--sb-surf, #f4f5fa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B83A18' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 15px no-repeat;
	transition: transform .3s ease;
}
.sbt-faq-liste details[open] summary::after{ transform: rotate(135deg); }
.sbt-faq-liste summary:hover{ color: var(--sb-accent, #2563eb); }
.sbt-faq-reponse{ padding: 0 20px 18px; font-size: .96875rem; line-height: 1.75; color: var(--sb-doux, #55607a); }
.sbt-faq-reponse p{ margin: 0 0 14px; }
.sbt-faq-reponse p:last-child{ margin-bottom: 0; }

@media (max-width: 760px){
	.sbt-faq{ padding: 20px; }
}

/*
 * BLOC FIGÉ — SIGNATURE / BOÎTE AUTEUR (thématique) — CSS
 * Copié tel quel depuis sb-kit/gabarits-design/blocs-valides/thematique/partial-bloc-auteur.css.
 */

.sbt-auteur{
	display: grid; grid-template-columns: 120px 1fr; gap: 26px; margin: 54px 0 10px;
	padding: 30px; border-radius: var(--sb-rayon-grand, 22px);
	background: var(--sb-surf, #f4f5fa); border: 1px solid var(--sb-filet, #e2e5ef);
}
.sbt-auteur-photo img{
	width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
	box-shadow: 0 0 0 5px var(--sb-fond-carte, #ffffff), var(--sb-ombre, 0 8px 24px rgba(15,23,42,.08));
}
.sbt-auteur-sur{ margin: 0 0 2px; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sb-doux, #55607a); }
.sbt-auteur-nom{ font-size: 1.5rem; margin: 0 0 4px; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); }
.sbt-auteur-nom a{ color: var(--sb-encre, #0f172a); text-decoration: none; }
.sbt-auteur-nom a:hover{ text-decoration: underline; }
.sbt-auteur-role{ margin: 0 0 12px; font-size: .8125rem; font-weight: 600; color: var(--sb-accent, #2563eb); text-transform: uppercase; letter-spacing: .05em; }
.sbt-auteur-bio{ font-size: .96875rem; line-height: 1.7; color: var(--sb-encre, #0f172a); margin: 0 0 16px; }
.sbt-auteur-chiffres{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sbt-auteur-chiffres span{ background: var(--sb-fond-carte, #ffffff); border-radius: 12px; padding: 8px 12px; font-size: .78125rem; color: var(--sb-doux, #55607a); }
.sbt-auteur-chiffres b{ color: var(--sb-encre, #0f172a); margin-right: 4px; }
.sbt-auteur-der{ margin-bottom: 18px; }
.sbt-auteur-der p{ margin: 0 0 6px; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sb-doux, #55607a); }
.sbt-auteur-der a{ display: block; font-size: .9375rem; font-weight: 500; padding: 6px 0; color: var(--sb-encre, #0f172a); text-decoration: none; border-bottom: 1px dashed var(--sb-filet, #e2e5ef); }
.sbt-auteur-der a:hover{ color: var(--sb-accent, #2563eb); }
.sbt-auteur-actions{ display: flex; flex-wrap: wrap; gap: 10px; }
.sbt-auteur-actions .sbt-btn{
	display: inline-block; padding: 10px 18px; border-radius: 999px; font-size: .875rem; font-weight: 600;
	text-decoration: none; background: var(--sb-accent, #2563eb); color: #fff;
}
.sbt-auteur-actions .sbt-btn--fantome{ background: transparent; border: 1.5px solid var(--sb-filet, #e2e5ef); color: var(--sb-encre, #0f172a); }

@media (max-width: 700px){
	.sbt-auteur{ grid-template-columns: 1fr; padding: 22px; }
	.sbt-auteur-photo img{ width: 88px; height: 88px; }
}

/*
 * BLOC FIGÉ — PIED DE PAGE (thématique) — CSS
 * Copié tel quel depuis sb-kit/gabarits-design/blocs-valides/thematique/footer.css
 * (origine curieux-du-web.com). Couleurs en dur d'origine signalées par le README
 * (#c4c7e4, #a9acd0, #8b8fb5) : surchargées dans assets/css/app.css §19.
 */

.sbt-btn{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 24px; border-radius: 999px; font-weight: 700; font-size: 1rem;
	background: var(--sb-accent, #2563eb); color: #fff; text-decoration: none; border: 0; cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease;
}
.sbt-btn:hover{ transform: translateY(-2px); box-shadow: var(--sb-ombre, 0 8px 24px rgba(15,23,42,.08)); }
.sbt-btn--petit{ padding: 10px 18px; font-size: .875rem; }
.sbt-btn--fantome{ background: transparent; border: 1.5px solid rgba(255,255,255,.5); color: inherit; }

.sbt-footer{ background: var(--sb-fonce, #141733); color: var(--sb-sur-fonce, #ffffff); padding-block: clamp(40px,6vw,64px) 24px; }
.sbt-footer a{ color: #c4c7e4; text-decoration: none; }
.sbt-footer a:hover{ color: #fff; }

.sbt-footer-cta{
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	padding: 24px 28px; margin-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 600px){ .sbt-footer-cta{ padding: 20px; } }
.sbt-footer-cta .sbt-t3{ color: #fff; margin: 0 0 4px; font-size: 1.25rem; }
.sbt-footer-cta p{ color: #a9acd0; margin: 0; max-width: 46ch; }

.sbt-footer-grille{ display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.12); }
@media (max-width: 980px){ .sbt-footer-grille{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .sbt-footer-grille{ grid-template-columns: 1fr; } }
.sbt-footer-colonne .sbt-t4{ font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: #8b8fb5; margin: 0 0 14px; }
.sbt-footer-colonne ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sbt-footer-colonne ul a{ font-size: .875rem; }
.sbt-footer-logo{ display: block; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-weight: 700; font-size: 1.125rem; color: #fff; margin-bottom: 14px; }
.sbt-footer-desc{ color: #a9acd0; font-size: .9375rem; margin: 0; max-width: 32ch; }
.sbt-footer-contact{ display: flex; flex-direction: column; gap: 8px; font-size: .875rem; }

.sbt-footer-bas{ padding-top: 20px; font-size: .8125rem; color: #8b8fb5; }

.sbt-cookies{
	position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 80;
	background: var(--sb-fonce, #141733); color: #fff; border-radius: 12px;
	padding: 10px 14px; display: none; align-items: center; gap: 12px;
	box-shadow: var(--sb-ombre-forte, 0 16px 40px rgba(15,23,42,.16)); max-height: 64px; overflow: hidden;
}
.sbt-cookies.est-visible{ display: flex; }
.sbt-cookies p{ margin: 0; flex: 1; min-width: 0; font-size: .75rem; line-height: 1.3; }
.sbt-cookies-actions{ display: flex; gap: 8px; flex-shrink: 0; }
.sbt-cookies .sbt-btn{ flex-shrink: 0; padding: 8px 14px; min-height: 32px; font-size: .8125rem; }

.sbt-popup-sortie{ position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; }
.sbt-popup-sortie.est-ouvert{ display: flex; }
.sbt-popup-sortie-fond{ position: absolute; inset: 0; background: rgba(15,23,42,.7); }
.sbt-popup-sortie-boite{
	position: relative; z-index: 1; background: var(--sb-fond-carte, #ffffff); border-radius: var(--sb-rayon, 14px);
	max-width: 720px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
	box-shadow: var(--sb-ombre-forte, 0 16px 40px rgba(15,23,42,.16)); max-height: 90vh;
}
.sbt-popup-sortie-boite--sans-image{ grid-template-columns: 1fr; max-width: 480px; }
@media (max-width: 640px){ .sbt-popup-sortie-boite{ grid-template-columns: 1fr; max-height: 85vh; overflow-y: auto; } }
.sbt-popup-sortie-image{ min-height: 220px; }
.sbt-popup-sortie-image img{ width: 100%; height: 100%; object-fit: cover; }
.sbt-popup-sortie-texte{ padding: 28px; color: var(--sb-encre, #0f172a); }
.sbt-popup-sortie-fermer{
	position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
	background: var(--sb-fond-carte, #ffffff); border: 1px solid var(--sb-filet, #e2e5ef);
	display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.sbt-popup-sortie-fermer svg{ width: 20px; height: 20px; }

/*
 * app.css — Coach Sportif 27 (thème s27-pignon)
 * Palette craie / bleu nuit / vermillon élastique / blé du Neubourg — mode clair uniquement.
 * Procédés : pignon à colombages, chrono de séance, semaine cochée, fiches de verre sur
 * photo, tapis qui se déroule, carnet de séance ligné, dalle caoutchouc mouchetée.
 * Chargé après les CSS des blocs (les variables --sb-* sont surchargées ici).
 */

/* ===================== 1. Jetons ===================== */
:root{
	--sb-encre: #18203A;
	--sb-doux: #4A5068;
	--sb-accent: #B83A18;
	--sb-accent-survol: #9E3113;
	--sb-accent-clair: #EDC35A;
	--sb-chene: #3A2A1F;
	--sb-surf: #ECE4D6;
	--sb-fond: #F6F3EE;
	--sb-fond-carte: #FFFFFF;
	--sb-fonce: #18203A;
	--sb-sur-fonce: #F6F3EE;
	--sb-filet: #DCD3C4;

	--sb-titre: 'Science Gothic', system-ui, sans-serif;
	--sb-texte: 'Host Grotesk', system-ui, sans-serif;

	--sb-conteneur: 1240px;
	--sb-lecture: 720px;
	--sb-rail: 320px;
	--sb-gouttiere: 24px;
	--sb-rayon: 20px;
	--sb-rayon-grand: 32px;
	--sb-ombre: 0 16px 36px -16px rgba(24,32,58,.22);
	--sb-ombre-forte: 0 30px 60px -22px rgba(24,32,58,.40);
	--s27-entete-h: 72px;

	color-scheme: light;
}
@media (min-width: 1600px){ :root{ --sb-conteneur: 1320px; } }

/* ===================== 2. Base ===================== */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--s27-entete-h) + 16px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
body{
	margin: 0; background: var(--sb-fond); color: var(--sb-encre);
	font-family: var(--sb-texte); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; height: auto; display: block; }
[hidden]{ display: none !important; }
h1,h2,h3,h4{ font-family: var(--sb-titre); font-weight: 650; font-stretch: 92%; line-height: 1.05; margin: 0; color: var(--sb-encre); }
a{ color: inherit; }
:focus-visible{ outline: 3px solid var(--sb-accent); outline-offset: 2px; }
.s27-skip{ position: absolute; left: -999px; top: 0; background: var(--sb-encre); color: #fff; padding: 10px 16px; z-index: 300; }
.s27-skip:focus{ left: 12px; top: 12px; }
.s27-visually-hidden{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.s27-conteneur{ max-width: var(--sb-conteneur); margin-inline: auto; padding-inline: var(--sb-gouttiere); }

/* ===================== 3. Boutons ===================== */
.s27-btn{
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap;
	padding: 14px 26px; border-radius: 14px; border: 0; cursor: pointer; min-height: 48px;
	font-family: var(--sb-texte); font-weight: 650; font-size: 1rem; line-height: 1.2;
	background: var(--sb-accent); color: #fff; text-decoration: none;
	box-shadow: 0 10px 24px -10px rgba(184,58,24,.55);
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.s27-btn:hover{ background: var(--sb-accent-survol); transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(184,58,24,.6); }
.s27-btn--fantome{ background: transparent; color: var(--sb-encre); border: 1.5px solid var(--sb-filet); box-shadow: none; }
.s27-btn--fantome:hover{ background: var(--sb-surf); color: var(--sb-encre); }
.s27-btn--clair{ background: var(--sb-fond-carte); color: var(--sb-encre); box-shadow: 0 14px 30px -14px rgba(24,32,58,.5); }
.s27-btn--clair:hover{ background: var(--sb-fond); color: var(--sb-encre); }
.s27-btn--petit{ padding: 10px 18px; font-size: .875rem; min-height: 42px; }
.s27-btn--large{ width: 100%; padding: 14px 20px; font-size: 1.0625rem; }
.s27-btn--court{ display: none; }
@media (max-width: 1080px){ .s27-btn--entete .s27-btn--long{ display: none; } .s27-btn--entete .s27-btn--court{ display: inline; } }

/* ===================== 4. En-tête ===================== */
.s27-entete{ position: sticky; top: 0; z-index: 100; background: rgba(246,243,238,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--sb-filet); }
.s27-entete-barre{ max-width: var(--sb-conteneur); margin-inline: auto; padding-inline: var(--sb-gouttiere); height: var(--s27-entete-h); display: flex; align-items: center; gap: 28px; }
.s27-logo{ display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.s27-logo-symbole{ width: 40px; height: 40px; flex-shrink: 0; }
.s27-logo-texte{ font-family: var(--sb-titre); font-weight: 700; font-stretch: 88%; font-size: 1.3125rem; color: var(--sb-encre); white-space: nowrap; letter-spacing: -.005em; }
.s27-logo-accent{ color: var(--sb-accent); margin-left: 2px; }
.s27-nav{ flex: 1; min-width: 0; display: flex; justify-content: center; }
.s27-nav ul{ list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; }
.s27-nav a{ position: relative; text-decoration: none; font-weight: 600; font-size: 1.0625rem; color: var(--sb-encre); white-space: nowrap; padding-block: 8px; }
.s27-nav a::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--sb-accent); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.s27-nav a:hover{ color: var(--sb-accent); }
.s27-nav a:hover::after{ transform: scaleX(1); }
.s27-nav-bascule{ display: none; background: none; border: 0; padding: 8px; color: var(--sb-encre); cursor: pointer; width: 44px; height: 44px; align-items: center; justify-content: center; flex-shrink: 0; }
.s27-nav-bascule svg{ width: 26px; height: 26px; }
.s27-nav-mobile{ display: none; }
@media (max-width: 1080px){
	:root{ --s27-entete-h: 64px; }
	.s27-nav{ display: none; }
	.s27-nav-bascule{ display: inline-flex; }
	.s27-entete-barre{ gap: 12px; }
	.s27-btn--entete{ margin-left: auto; }
	.s27-nav-mobile{ border-top: 1px solid var(--sb-filet); background: var(--sb-fond); }
	.s27-nav-mobile:not([hidden]){ display: block; }
	.s27-nav-mobile ul{ list-style: none; margin: 0; padding: 10px var(--sb-gouttiere) 18px; display: flex; flex-direction: column; gap: 4px; }
	.s27-nav-mobile a{ display: block; padding: 12px 4px; text-decoration: none; font-weight: 600; font-size: 1.0625rem; color: var(--sb-encre); }
}
@media (max-width: 480px){
	.s27-entete-barre{ padding-inline: 16px; gap: 8px; }
	.s27-logo{ gap: 8px; }
	.s27-logo-symbole{ width: 34px; height: 34px; }
	.s27-logo-texte{ font-size: 1.0625rem; font-stretch: 80%; }
	.s27-btn--entete{ padding: 10px 14px; min-height: 42px; font-size: .9375rem; }
	.s27-nav-bascule{ width: 42px; margin-right: -6px; }
}
@media (min-width: 1081px){ .s27-nav-mobile{ display: none !important; } }

/* ===================== 5. Le pignon à colombages ===================== */
.s27-pignon{ position: relative; height: 100%; }
.s27-pignon-cadre{ position: relative; width: 100%; height: 100%; aspect-ratio: 4/5; filter: drop-shadow(0 28px 34px rgba(24,32,58,.28)); }
.s27-pignon-cadre > img, .s27-pignon-cadre > .s27-repli{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: url(#s27-pignon-clip); }
.s27-pignon-poutres{ position: absolute; inset: 0; pointer-events: none; clip-path: url(#s27-pignon-clip); }
.s27-poutre{ position: absolute; background: var(--sb-chene); border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
/* Les poutres restent dans le triangle du toit : croix de Saint-André + entrait. */
.s27-poutre--a{ width: 8px; height: 30%; left: 50%; top: 2%; transform: translateX(-50%) rotate(38deg); transform-origin: top center; }
.s27-poutre--b{ width: 8px; height: 30%; left: 50%; top: 2%; transform: translateX(-50%) rotate(-38deg); transform-origin: top center; }
.s27-poutre--c{ height: 8px; left: 6%; right: 6%; top: calc(32% - 4px); }
.s27-repli{ display: grid; place-items: center; }
.s27-repli .s27-logo-symbole{ width: 34%; max-width: 180px; height: auto; opacity: .9; }
.s27-hero .s27-repli{ place-items: start end; padding: 40% 9% 0 0; }
.s27-hero .s27-repli .s27-logo-symbole{ width: 28%; }
.s27-credit-photo{ position: absolute; bottom: 6px; right: 16px; margin: 0; font-size: .6875rem; color: #fff; background: rgba(24,32,58,.72); padding: 2px 8px; border-radius: 999px; z-index: 3; }

/* ===================== 6. Le chrono de séance ===================== */
.s27-chrono{ position: relative; width: 132px; height: 132px; border-radius: 50%; background: var(--sb-fond-carte); box-shadow: var(--sb-ombre-forte); display: grid; place-items: center; }
.s27-chrono--petit{ width: 96px; height: 96px; }
.s27-chrono-anneau{ position: absolute; inset: 0; border-radius: 50%;
	background: conic-gradient(var(--sb-accent) var(--s27-pct, 50%), rgba(184,58,24,.14) 0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
	animation: s27-anneau 1.4s cubic-bezier(.2,.7,.2,1) both;
}
@property --s27-pct{ syntax: '<percentage>'; inherits: true; initial-value: 0%; }
@keyframes s27-anneau{ from{ --s27-pct: 0%; } }
.s27-chrono-centre{ display: flex; flex-direction: column; align-items: center; gap: 2px; z-index: 1; }
.s27-chrono-chiffres{ font-family: var(--sb-titre); font-weight: 300; font-stretch: 70%; font-size: 2.125rem; line-height: 1; color: var(--sb-encre); font-variant-numeric: tabular-nums; }
.s27-chrono--petit .s27-chrono-chiffres{ font-size: 1.5rem; }
.s27-chrono-legende{ font-size: .6875rem; line-height: 1.2; color: var(--sb-doux); text-align: center; max-width: 76px; }

.s27-chrono-niveau{ position: relative; width: 68px; height: 68px; border-radius: 50%; background: var(--sb-fond-carte); box-shadow: var(--sb-ombre-forte); display: grid; place-items: center; }
.s27-chrono-niveau-anneau{ position: absolute; inset: 0; border-radius: 50%;
	background: conic-gradient(var(--sb-accent) 0 33.33%, var(--sb-accent-clair) 33.33% 66.66%, var(--sb-encre) 66.66% 100%);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
}
.s27-chrono-niveau-centre{ z-index: 1; color: var(--sb-encre); display: grid; place-items: center; }
.s27-chrono-niveau-centre svg{ width: 26px; height: 26px; }

/* ===================== 7. La semaine cochée ===================== */
.s27-semaine{ display: flex; gap: 8px; }
.s27-jour{ width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--sb-titre); font-weight: 700; font-size: .9375rem; background: var(--sb-surf); color: var(--sb-doux); }
.s27-jour--coche{ background: var(--sb-accent); color: #fff; }
.s27-semaine--sombre .s27-jour{ background: rgba(255,255,255,.08); color: rgba(246,243,238,.72); }
.s27-semaine--sombre .s27-jour--coche{ background: var(--sb-accent-clair); color: var(--sb-encre); }
.s27-semaine--petit .s27-jour{ width: 32px; height: 32px; font-size: .8125rem; }
@media (max-width: 500px){ .s27-semaine .s27-jour{ width: 36px; height: 36px; font-size: .8125rem; } .s27-semaine{ gap: 6px; } }

/* ===================== 8. Fiches de verre ===================== */
.s27-verre{
	background: rgba(246,243,238,.22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border-radius: 16px; padding: 12px 16px; box-shadow: inset 1px 1px 1px rgba(255,255,255,.45); color: #fff;
}
.s27-verre-titre{ font-family: var(--sb-texte); font-weight: 700; font-size: .8125rem; letter-spacing: .02em; margin: 0 0 6px; }
.s27-verre p{ margin: 0; font-size: .9375rem; }
.s27-verre--craie{ background: rgba(246,243,238,.94); color: var(--sb-encre); box-shadow: var(--sb-ombre); }
/* Verre teinté nuit : texte blanc lisible quelle que soit la photo dessous. */
.s27-verre--nuit{ background: rgba(24,32,58,.7); color: #fff; }
.s27-verre--pose{ position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 7px 12px; border-radius: 12px; font-size: .8125rem; font-weight: 650; line-height: 1.2; max-width: calc(100% - 24px); }

/* ===================== 9. Tapis qui se déroule + formulaire ===================== */
.s27-tapis{ position: relative; height: 10px; border-radius: 999px; background: var(--sb-surf); overflow: hidden; flex-shrink: 0; }
.s27-tapis-rouleau{ position: absolute; inset: 0; width: var(--s27-tapis, 25%); border-radius: 999px; background: linear-gradient(90deg, var(--sb-accent-survol), var(--sb-accent)); transition: width .35s ease; }
.s27-tapis-rouleau::after{ content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--sb-accent), #7d250d); box-shadow: inset -2px 0 3px rgba(0,0,0,.25); }
h2.s27-h2{ position: relative; padding-bottom: 20px; }
h2.s27-h2::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--sb-accent-survol), var(--sb-accent)); }
h2.s27-h2--centre::after{ left: 50%; transform: translateX(-50%); }
.s27-section--vermillon h2.s27-h2::after, .s27-dalle h2.s27-h2::after{ background: var(--sb-accent-clair); }

.s27-form-carte{
	background: var(--sb-fond-carte); border-radius: 24px; box-shadow: var(--sb-ombre-forte);
	padding: 20px 22px 20px; display: flex; flex-direction: column; gap: 12px;
}
.s27-form-titre-p{ margin: 0; font-family: var(--sb-titre); font-weight: 650; font-stretch: 88%; font-size: 1.1875rem; line-height: 1.15; color: var(--sb-encre); }
.s27-form-titre .s27-form-sous{ margin-top: 4px; }
.s27-form-carte:not([data-etape="1"]) .s27-form-titre{ display: none; }
.s27-form-entete{ display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; }
.s27-form-entete .s27-tapis{ flex: 1; min-width: 60px; }
.s27-form-serie{ font-family: var(--sb-texte); font-weight: 700; font-size: .8125rem; color: var(--sb-accent); white-space: nowrap; }
.s27-form-retour{ display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; color: var(--sb-doux); font-size: .875rem; font-weight: 600; cursor: pointer; padding: 4px 6px 4px 0; min-height: 32px; }
.s27-form-retour:hover{ color: var(--sb-encre); }
.s27-form-retour svg{ width: 16px; height: 16px; }
.s27-form-question{ font-family: var(--sb-titre); font-size: 1.0625rem; font-weight: 650; font-stretch: 92%; line-height: 1.2; margin: 0; }
.s27-form-sous{ margin: 0; color: var(--sb-doux); font-size: .8125rem; line-height: 1.35; }
.s27-form-etape{ display: none; flex-direction: column; gap: 10px; }
.s27-form-etape.est-active{ display: flex; animation: s27-etape .25s ease both; }
@keyframes s27-etape{ from{ opacity: 0; transform: translateX(10px); } }
.s27-tuiles{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.s27-tuile{
	display: flex; align-items: center; gap: 10px; text-align: left; min-height: 54px;
	padding: 9px 12px; border-radius: 14px; border: 1.5px solid var(--sb-filet); background: var(--sb-fond-carte);
	font-family: var(--sb-texte); font-size: .8125rem; line-height: 1.25; font-weight: 600; color: var(--sb-encre); cursor: pointer;
	transition: border-color .15s ease, background .15s ease, transform .15s ease; text-decoration: none;
}
.s27-tuile svg{ width: 22px; height: 22px; color: var(--sb-accent); flex-shrink: 0; }
.s27-tuile:hover{ border-color: var(--sb-accent); background: #FDF6F2; }
.s27-tuile:active{ transform: scale(.98); }
.s27-tuile.est-choisie{ border-color: var(--sb-accent); background: #FBEFE9; box-shadow: inset 0 0 0 1px var(--sb-accent); }
.s27-tuiles > .s27-tuile:last-child:nth-child(odd){ grid-column: 1 / -1; }
.s27-form-ligne{ display: flex; gap: 10px; }
.s27-form-ligne > *{ flex: 1; min-width: 0; }
.s27-champ{ display: flex; flex-direction: column; gap: 4px; }
.s27-champ label{ font-size: .8125rem; font-weight: 650; color: var(--sb-doux); }
.s27-champ input, .s27-champ select, .s27-champ textarea{
	width: 100%; padding: 10px 12px; min-height: 44px; border-radius: 12px; border: 1.5px solid var(--sb-filet); background: var(--sb-fond-carte);
	font-family: var(--sb-texte); font-size: 1rem; color: var(--sb-encre);
}
.s27-champ input:focus, .s27-champ select:focus, .s27-champ textarea:focus{ outline: 2px solid var(--sb-accent); outline-offset: 1px; border-color: var(--sb-accent); }
.s27-form-aide{ margin-top: -2px; }
.s27-form-consentement{ display: flex; align-items: flex-start; gap: 8px; font-size: .75rem; color: var(--sb-doux); line-height: 1.35; cursor: pointer; }
.s27-form-consentement input{ margin-top: 2px; flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--sb-accent); }
.s27-form-mention{ margin: 0; font-size: .6875rem; color: var(--sb-doux); line-height: 1.35; }
.s27-form-mention a{ text-decoration: underline; }
.s27-form-confirmation{ display: none; text-align: center; padding: 32px 8px; }
.s27-form-confirmation.est-active{ display: flex; flex-direction: column; align-items: center; gap: 10px; }
.s27-form-confirmation svg{ width: 48px; height: 48px; color: var(--sb-accent); }
@media (max-width: 460px){
	.s27-form-carte{ padding: 18px 16px; }
	.s27-form-ligne{ flex-direction: column; gap: 10px; }
}

/* ===================== 10. Carnet de séance ===================== */
.s27-carnet{
	position: relative; background: repeating-linear-gradient(to bottom, var(--sb-surf) 0 31px, var(--sb-filet) 31px 32px);
	border-radius: var(--sb-rayon-grand); padding: 32px; border-left: 4px solid var(--sb-chene);
}
.s27-carnet table{ background: var(--sb-fond-carte); }

/* ===================== 11. Dalle caoutchouc mouchetée ===================== */
.s27-dalle{
	background-color: var(--sb-encre);
	background-image:
		radial-gradient(1.6px 1.6px at 20px 30px, rgba(237,195,90,.16), transparent),
		radial-gradient(1.6px 1.6px at 90px 80px, rgba(184,58,24,.2), transparent),
		radial-gradient(1.6px 1.6px at 140px 40px, rgba(246,243,238,.12), transparent),
		radial-gradient(1.6px 1.6px at 60px 120px, rgba(237,195,90,.12), transparent),
		radial-gradient(1.6px 1.6px at 160px 150px, rgba(184,58,24,.14), transparent),
		radial-gradient(1.2px 1.2px at 110px 170px, rgba(246,243,238,.1), transparent);
	background-size: 180px 180px;
	color: var(--sb-sur-fonce);
}
.s27-dalle h2, .s27-dalle h3{ color: var(--sb-sur-fonce); }
/* Une carte blanche posée sur la dalle garde l'encre sombre. */
.s27-dalle .s27-carte-article, .s27-dalle .s27-carte-article h3{ color: var(--sb-encre); }

/* ===================== 12. Sections, grilles, cartes ===================== */
.s27-section{ padding-block: clamp(48px, 6vw, 72px); }
.s27-section--serre{ padding-block: clamp(32px, 4.5vw, 52px); }
.s27-section--craie{ background: var(--sb-fond); }
.s27-section--lin{ background: var(--sb-surf); }
.s27-section--blanc{ background: var(--sb-fond-carte); }
.s27-section--vermillon{ background: var(--sb-accent); color: #fff; }
.s27-section--vermillon h2{ color: #fff; }
.s27-section-tete{ display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.s27-section-tete h2, h2.s27-h2{ font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.75rem); }
.s27-chapo{ color: var(--sb-doux); font-size: 1.0625rem; max-width: 60ch; margin: 0; }

.s27-grille{ display: grid; gap: 24px; }
.s27-grille--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.s27-grille--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.s27-grille--4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.s27-grille--6{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 980px){ .s27-grille--3, .s27-grille--4{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px){ .s27-grille--2, .s27-grille--3, .s27-grille--4{ grid-template-columns: 1fr; } }
.s27-grille > *{ min-width: 0; }

.s27-carte-article{
	position: relative; display: flex; flex-direction: column; background: var(--sb-fond-carte); border-radius: var(--sb-rayon);
	overflow: hidden; box-shadow: var(--sb-ombre); text-decoration: none; color: var(--sb-encre); min-width: 0;
	transition: transform .2s ease, box-shadow .2s ease;
}
a.s27-carte-article:hover{ transform: translateY(-4px); box-shadow: var(--sb-ombre-forte); }
.s27-carte-article-photo{ position: relative; aspect-ratio: 16/10; flex-shrink: 0; overflow: hidden; background: var(--sb-surf); }
.s27-carte-article-photo img, .s27-carte-article-photo .s27-repli{ width: 100%; height: 100%; object-fit: cover; }
.s27-pastille{
	position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--sb-accent); color: #fff;
	font-size: .75rem; font-weight: 700; letter-spacing: .01em; line-height: 1.2;
	padding: 5px 11px; border-radius: 999px; max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s27-pastille--texte{ position: static; align-self: flex-start; background: var(--sb-surf); color: var(--sb-accent-survol); }
.s27-carte-article-corps{ padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.s27-carte-article-corps h3{ font-size: 1.0625rem; font-weight: 600; font-stretch: 100%; line-height: 1.25; color: var(--sb-encre); }
.s27-carte-article-meta{ font-size: .8125rem; color: var(--sb-doux); margin-top: auto; }

/* Carte rubrique */
.s27-carte-rubrique{ display: flex; flex-direction: column; background: var(--sb-fond-carte); border-radius: var(--sb-rayon); overflow: hidden; box-shadow: var(--sb-ombre); text-decoration: none; color: var(--sb-encre); transition: transform .2s ease, box-shadow .2s ease; min-width: 0; }
.s27-carte-rubrique:hover{ transform: translateY(-4px); box-shadow: var(--sb-ombre-forte); }
.s27-carte-rubrique-photo{ position: relative; height: 150px; overflow: hidden; background: var(--sb-surf); }
.s27-carte-rubrique-photo img, .s27-carte-rubrique-photo .s27-repli{ width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.s27-carte-rubrique:hover .s27-carte-rubrique-photo img{ transform: scale(1.04); }
.s27-carte-rubrique-corps{ padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 4px; }
.s27-carte-rubrique-corps h3{ font-size: 1.1875rem; }
.s27-carte-rubrique-corps p{ margin: 0; color: var(--sb-doux); font-size: .9375rem; line-height: 1.4; }

/* ===================== 13. Accueil ===================== */
/* S1 — premier écran : titre + pignon, carte formulaire posée sur la photo */
.s27-hero{ background: var(--sb-fond); padding: 24px 0 36px; overflow-x: clip; }
.s27-hero-grille{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: center; max-width: var(--sb-conteneur); margin-inline: auto; padding-inline: var(--sb-gouttiere); }
.s27-hero-texte-col{ min-width: 0; }
.s27-hero-surtitre{ display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 700; color: var(--sb-accent); }
.s27-hero-surtitre svg{ width: 18px; height: 18px; }
.s27-hero-titre{ margin-top: 12px; font-size: clamp(2.5rem, 1.1rem + 3.7vw, 5rem); font-weight: 650; font-stretch: 80%; line-height: .95; letter-spacing: -.01em; }
.s27-hero-titre span{ display: block; }
.s27-hero-titre em{ display: block; font-style: oblique 8deg; color: var(--sb-accent); }
.s27-hero-texte{ margin: 18px 0 0; font-size: 1.1875rem; line-height: 1.5; color: var(--sb-doux); max-width: 44ch; }
.s27-hero-cta-mobile{ display: none; }
.s27-hero-preuves{ list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.s27-hero-preuves li{ display: flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 600; }
.s27-hero-preuves svg{ width: 18px; height: 18px; color: var(--sb-accent); flex-shrink: 0; }
.s27-hero-villes{ list-style: none; margin: 20px 0 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.s27-hero-villes a{ display: inline-block; background: var(--sb-surf); color: var(--sb-encre); text-decoration: none; font-size: .875rem; font-weight: 650; padding: 8px 14px; border-radius: 999px; transition: background .15s ease, color .15s ease; }
.s27-hero-villes a:hover{ background: var(--sb-accent); color: #fff; }

.s27-hero-visuel{ position: relative; height: clamp(560px, calc(100vh - var(--s27-entete-h) - 64px), 800px); min-width: 0; }
.s27-hero-visuel .s27-pignon-cadre{ aspect-ratio: auto; }
.s27-hero-formulaire{ position: absolute; left: -64px; bottom: 24px; width: min(440px, calc(100% + 40px)); z-index: 5; }
.s27-hero-chrono{ position: absolute; top: 9%; right: -14px; z-index: 4; }

@media (max-width: 1180px){
	.s27-hero{ padding-top: 20px; }
	/* Premier écran mobile : titre + bouton, puis tout de suite le pignon et la carte posée dessus ;
	   le texte, les preuves et les villes passent sous le formulaire. */
	.s27-hero-grille{ grid-template-columns: minmax(0,1fr); gap: 0; }
	.s27-hero-texte-col{ display: contents; }
	.s27-hero-surtitre{ order: 1; }
	.s27-hero-titre{ order: 2; }
	.s27-hero-cta-mobile{ order: 3; display: flex; margin-top: 18px; max-width: 420px; }
	.s27-hero-visuel{ order: 4; margin-top: 26px; }
	.s27-hero-texte{ order: 5; margin-top: 26px; }
	.s27-hero-preuves{ order: 6; }
	.s27-hero-villes{ order: 7; }
	.s27-hero-visuel{ height: auto; max-width: 560px; width: 100%; margin-inline: auto; }
	.s27-hero-visuel .s27-pignon{ height: auto; }
	.s27-hero-visuel .s27-pignon-cadre{ aspect-ratio: 4/3; height: auto; }
	.s27-hero-formulaire{ position: relative; left: auto; bottom: auto; width: auto; margin: -110px 14px 0; }
	.s27-hero-chrono{ top: 6%; right: 0; }
}
@media (max-width: 620px){
	.s27-hero-titre{ font-size: clamp(2.25rem, 1.4rem + 4.4vw, 2.75rem); }
	.s27-hero-texte{ font-size: 1.0625rem; }
	.s27-hero-preuves li{ font-size: .875rem; align-items: flex-start; }
	.s27-hero-visuel .s27-pignon-cadre{ aspect-ratio: 5/4; }
	.s27-hero-chrono .s27-chrono{ width: 96px; height: 96px; }
	.s27-hero-chrono .s27-chrono-chiffres{ font-size: 1.5rem; }
	.s27-hero-chrono .s27-chrono-legende{ font-size: .625rem; }
	.s27-hero-formulaire{ margin: -72px 0 0; }
}

/* S2 — la semaine qui tient */
.s27-s2{ padding-block: clamp(44px, 5vw, 64px) 0; position: relative; }
.s27-s2-tete{ text-align: center; max-width: 960px; margin: 0 auto; }
.s27-s2 .s27-semaine{ justify-content: center; margin: 18px 0 28px; }
.s27-s2-cartes{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; padding-bottom: clamp(48px, 5vw, 64px); }
.s27-s2-cartes .s27-carte-article-photo{ aspect-ratio: 16/9; }
/* BE-0044 : plus de carte à cheval sur la section suivante, marge basse franche dans la bande ; pas de vide blanc sous le titre */
.s27-s2-cartes .s27-carte-article-corps{ display: flex; flex-direction: column; gap: 10px; flex: 1; }
.s27-s2-cartes .s27-carte-article-corps h3{ margin: 0; }
.s27-s2-lire{ margin-top: auto; font-size: .875rem; font-weight: 600; color: var(--sb-accent); }
@media (max-width: 860px){ .s27-s2-cartes{ grid-template-columns: 1fr; padding-bottom: 40px; } .s27-s2-cartes .s27-carte-article{ flex-direction: row; } .s27-s2-cartes .s27-carte-article-photo{ width: 42%; aspect-ratio: auto; min-height: 120px; } }

/* S3 — rubriques (la carte débordante de S2 passe par-dessus) */
.s27-s3{ padding-top: 80px; padding-bottom: 48px; }
@media (max-width: 860px){ .s27-s3{ padding-top: 48px; } }
@media (max-width: 980px){ .s27-grille--6{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; } }
@media (max-width: 620px){
	.s27-grille--6 .s27-carte-rubrique-photo{ height: 104px; }
	.s27-grille--6 .s27-carte-rubrique-corps{ padding: 10px 12px 12px; }
	.s27-grille--6 .s27-carte-rubrique-corps h3{ font-size: 1rem; }
	.s27-grille--6 .s27-carte-rubrique-corps p{ display: none; }
	.s27-grille--6 .s27-pastille{ top: 8px; left: 8px; font-size: .6875rem; padding: 4px 9px; }
}

/* S4 — outil séance de 20 minutes : choix à gauche, fiche résultat à droite */
.s27-s4{ padding-block: 40px 56px; }
.s27-outil{ border-radius: var(--sb-rayon-grand); position: relative; overflow: hidden; }
.s27-outil-fond{ position: absolute; inset: 0; z-index: 0; }
.s27-outil-fond img{ width: 100%; height: 100%; object-fit: cover; }
.s27-outil-fond:has(img)::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24,32,58,.82), rgba(24,32,58,.4) 60%, rgba(24,32,58,.2)); }
.s27-outil-corps{ position: relative; z-index: 1; padding: 40px 44px; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 40px; align-items: center; }
.s27-outil-choix{ display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.s27-outil h2.s27-h2{ color: #fff; font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); margin-bottom: 4px; }
.s27-outil-intro{ margin: 0 0 4px; color: rgba(246,243,238,.86); font-size: 1rem; max-width: 52ch; }
.s27-outil-pilules{ display: flex; gap: 8px; flex-wrap: wrap; }
.s27-outil-pilule{ background: rgba(246,243,238,.92); color: var(--sb-encre); border: 0; border-radius: 999px; padding: 9px 14px; min-height: 40px; font-family: var(--sb-texte); font-size: .875rem; font-weight: 650; cursor: pointer; transition: background .15s ease, color .15s ease; }
.s27-outil-pilule:hover{ background: #fff; }
.s27-outil-pilule.est-choisie{ background: var(--sb-accent); color: #fff; }
.s27-outil-fiche-resultat{ background: var(--sb-fond-carte); color: var(--sb-encre); border-radius: 24px; padding: 28px; box-shadow: var(--sb-ombre-forte); border-top: 10px solid var(--sb-accent); }
.s27-outil-fiche-resultat .s27-verre-titre{ color: var(--sb-accent); }
.s27-outil-titre-guide{ margin: 4px 0 20px; font-family: var(--sb-titre); font-weight: 650; font-stretch: 90%; font-size: 1.625rem; line-height: 1.12; }
.s27-outil-actions{ display: flex; flex-wrap: wrap; gap: 10px; }
.s27-outil-actions .s27-btn{ flex: 1 1 auto; }
@media (max-width: 860px){ .s27-outil-corps{ grid-template-columns: minmax(0,1fr); padding: 28px 20px; gap: 22px; } .s27-outil-titre-guide{ font-size: 1.375rem; } }

/* S5 — repères */
.s27-reperes{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; text-align: center; }
.s27-repere b{ display: block; font-family: var(--sb-titre); font-weight: 300; font-stretch: 70%; font-size: clamp(2.75rem, 1.9rem + 2.4vw, 4.5rem); line-height: 1; color: var(--sb-encre); font-variant-numeric: tabular-nums; }
.s27-repere span{ display: block; font-size: .9375rem; margin-top: 8px; }
.s27-repere small{ display: block; font-size: .75rem; color: var(--sb-doux); margin-top: 4px; }
@media (max-width: 760px){ .s27-reperes{ grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 28px; } }

/* S6 — carte de l'Eure */
.s27-s6{ display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1fr); gap: 48px; align-items: center; }
.s27-carte-dep-conteneur{ position: relative; max-width: 520px; }
.s27-carte-dep-conteneur svg{ width: 100%; height: auto; display: block; }
.s27-carte-dep{ fill: var(--sb-surf); stroke: var(--sb-chene); stroke-width: 1.5; }
.s27-carte-ville{ fill: var(--sb-accent); stroke: var(--sb-fond-carte); stroke-width: 2; }
.s27-carte-note{ position: absolute; bottom: 4%; left: 0; max-width: 190px; }
.s27-carte-note p{ font-size: .875rem; line-height: 1.35; }
.s27-villes-liste{ display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.s27-villes-liste a{ background: var(--sb-fond-carte); border: 1.5px solid var(--sb-filet); color: var(--sb-encre); text-decoration: none; font-weight: 700; padding: 10px 18px; border-radius: 999px; }
.s27-villes-liste a:hover{ border-color: var(--sb-accent); color: var(--sb-accent); }
.s27-communes-liste{ display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.s27-communes-liste a{ background: var(--sb-surf); color: var(--sb-doux); text-decoration: none; font-size: .8125rem; padding: 6px 12px; border-radius: 999px; }
.s27-communes-liste a:hover{ color: var(--sb-encre); }
@media (max-width: 900px){ .s27-s6{ grid-template-columns: minmax(0,1fr); gap: 28px; } .s27-carte-note{ position: static; max-width: none; margin-top: 10px; } }

/* S7 — à lire cette semaine */
.s27-s7{ display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 24px; }
.s27-s7-grande{ height: 420px; }
.s27-s7-grande .s27-carte-article-photo{ aspect-ratio: auto; flex: 1; min-height: 0; }
.s27-s7-grande .s27-carte-article-corps{ flex: 0 0 auto; padding: 18px 22px 20px; }
.s27-s7-grande h3{ font-size: 1.5rem; font-stretch: 92%; }
.s27-s7-pile{ display: flex; flex-direction: column; gap: 14px; }
.s27-s7-pile .s27-carte-article{ flex-direction: row; height: 130px; }
.s27-s7-pile .s27-carte-article-photo{ width: 130px; aspect-ratio: auto; height: 100%; }
.s27-s7-pile .s27-carte-article-corps{ justify-content: center; padding: 12px 16px; }
.s27-s7-pile h3{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 860px){ .s27-s7{ grid-template-columns: minmax(0,1fr); } .s27-s7-grande{ height: 360px; } .s27-s7-pile .s27-carte-article{ height: 112px; } .s27-s7-pile .s27-carte-article-photo{ width: 112px; } }

/* S8 — comment ça se passe */
.s27-s8{ padding-block: 56px; }
.s27-s8-grille{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 56px; align-items: center; }
.s27-etapes-marque{ list-style: none; margin: 24px 0 28px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.s27-etape-marque{ display: flex; align-items: center; gap: 18px; }
.s27-etape-marque b{ flex: 0 0 56px; font-family: var(--sb-titre); font-weight: 300; font-stretch: 70%; font-size: 3.5rem; line-height: 1; color: #fff; text-align: center; }
.s27-etape-marque p{ margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.s27-s8 .sbt-faq.s27-s8-faq{ margin: 0; padding: 24px; background: rgba(24,32,58,.18); border: 1px solid rgba(255,255,255,.22); }
.s27-s8-faq-titre{ margin: 0 0 12px; font-family: var(--sb-titre); font-weight: 650; font-size: 1.25rem; color: #fff; }
.s27-s8 .sbt-faq-liste summary{ padding: 14px 18px; font-size: 1rem; }
@media (max-width: 900px){ .s27-s8-grille{ grid-template-columns: minmax(0,1fr); gap: 32px; } }

/* S9 — appel final : grand bloc arrondi, marge franche avant le pied de page */
.s27-fin{ padding-block: 24px 80px; background: var(--sb-fond); }
.s27-appel-final{ position: relative; min-height: 440px; display: flex; align-items: center; overflow: hidden; border-radius: var(--sb-rayon-grand); box-shadow: var(--sb-ombre); }
.s27-appel-final > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s27-appel-final:has(> img)::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24,32,58,.82) 0%, rgba(24,32,58,.45) 50%, rgba(24,32,58,.05) 100%); }
.s27-appel-final-corps{ position: relative; z-index: 1; color: #fff; max-width: 720px; padding: 48px 56px; }
.s27-appel-final h2{ color: #fff; font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem); }
.s27-appel-final p{ margin: 14px 0 22px; font-size: 1.0625rem; color: rgba(246,243,238,.9); max-width: 44ch; }
.s27-appel-final-decor{ position: absolute; right: 8%; top: 50%; transform: translateY(-50%); width: 260px; height: 260px; }
.s27-appel-final-decor .s27-logo-symbole{ width: 100%; height: 100%; opacity: .95; }
.s27-appel-final-decor .s27-chrono{ position: absolute; right: -70px; bottom: -46px; }
@media (max-width: 980px){ .s27-appel-final-decor{ display: none; } }
@media (max-width: 760px){ .s27-fin{ padding-bottom: 56px; } .s27-appel-final{ min-height: 380px; } .s27-appel-final-corps{ padding: 32px 24px; } }

/* Section de fin générique (pages internes) : panneau centré, jamais collé au pied */
.s27-fin-panneau{ background: var(--sb-surf); border-radius: var(--sb-rayon-grand); padding: 36px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.s27-fin-panneau p{ margin: 0; color: var(--sb-doux); }

/* ===================== 14. Rubrique ===================== */
.s27-rubrique-entete{ padding-block: 40px 48px; background: var(--sb-surf); overflow-x: clip; }
.s27-rubrique-entete-grille{ display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 56px; align-items: center; }
.s27-rubrique-surtitre{ display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9375rem; color: var(--sb-accent); text-decoration: none; }
.s27-rubrique-surtitre svg{ width: 20px; height: 20px; }
.s27-rubrique-entete h1{ font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem); font-stretch: 84%; margin-top: 10px; }
.s27-rubrique-entete .s27-chapo{ margin-top: 12px; }
.s27-serie-table{ margin-top: 22px; background: repeating-linear-gradient(to bottom, var(--sb-fond-carte) 0 47px, var(--sb-filet) 47px 48px); border-radius: var(--sb-rayon); border-left: 4px solid var(--sb-chene); overflow: hidden; box-shadow: var(--sb-ombre); }
.s27-serie-ligne{ display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 18px; text-decoration: none; color: var(--sb-encre); }
.s27-serie-ligne:hover{ background: var(--sb-fond); color: var(--sb-accent); }
.s27-serie-ligne i{ font-style: normal; font-family: var(--sb-titre); font-weight: 300; font-stretch: 70%; font-size: 1.375rem; color: var(--sb-accent); width: 26px; flex-shrink: 0; }
.s27-serie-ligne b{ font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.s27-serie-ligne span{ color: var(--sb-doux); font-size: .8125rem; white-space: nowrap; }
.s27-rubrique-entete-visuel{ height: 440px; position: relative; }
.s27-rubrique-entete-visuel .s27-pignon-cadre{ aspect-ratio: auto; }
.s27-rubrique-entete-visuel .s27-verre--pose{ left: 9%; bottom: 18px; font-size: .9375rem; padding: 10px 16px; }
@media (max-width: 900px){ .s27-rubrique-entete-grille{ grid-template-columns: minmax(0,1fr); gap: 28px; } .s27-rubrique-entete-visuel{ height: 300px; max-width: 420px; width: 100%; margin-inline: auto; order: -1; } }
@media (max-width: 620px){ .s27-serie-ligne span{ display: none; } .s27-rubrique-entete-visuel{ height: 240px; } }

.s27-une-carte{ display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); height: clamp(360px, calc(100vh - 300px), 460px); margin-bottom: 28px; background: var(--sb-fond-carte); border-radius: var(--sb-rayon); overflow: hidden; box-shadow: var(--sb-ombre); text-decoration: none; color: var(--sb-encre); transition: box-shadow .2s ease; }
.s27-une-carte:hover{ box-shadow: var(--sb-ombre-forte); }
.s27-une-carte .s27-carte-article-photo{ aspect-ratio: auto; height: 100%; }
.s27-une-corps{ padding: 32px 36px; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; }
.s27-une-corps h2{ font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.125rem); line-height: 1.1; }
.s27-une-corps p{ margin: 0; color: var(--sb-doux); font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.s27-une-corps .s27-btn{ align-self: flex-start; margin-top: 6px; }
.s27-une-corps .s27-carte-article-meta{ margin-top: 0; }
@media (max-width: 860px){ .s27-une-carte{ grid-template-columns: minmax(0,1fr); height: auto; } .s27-une-carte .s27-carte-article-photo{ aspect-ratio: 16/10; height: auto; } .s27-une-corps{ padding: 20px; } }

.s27-liste-rubrique > .est-replie{ display: none; }
/* Jamais une carte seule sur sa ligne : la dernière, si elle est orpheline, s'étale en largeur. */
@media (min-width: 981px){
	.s27-liste-rubrique > .s27-carte-article:last-child:nth-child(3n+1){ grid-column: 1 / -1; flex-direction: row; min-height: 220px; }
	.s27-liste-rubrique > .s27-carte-article:last-child:nth-child(3n+1) .s27-carte-article-photo{ width: 40%; aspect-ratio: auto; }
}
@media (min-width: 621px) and (max-width: 980px){
	.s27-liste-rubrique > .s27-carte-article:last-child:nth-child(odd){ grid-column: 1 / -1; flex-direction: row; min-height: 200px; }
	.s27-liste-rubrique > .s27-carte-article:last-child:nth-child(odd) .s27-carte-article-photo{ width: 45%; aspect-ratio: auto; }
}
.s27-voir-plus{ text-align: center; margin-top: 32px; }

.s27-autres-rubriques{ display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.s27-autre-rubrique{ display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--sb-encre); background: var(--sb-fond-carte); border-radius: 999px; padding: 8px 20px 8px 8px; box-shadow: var(--sb-ombre); font-weight: 650; }
.s27-autre-rubrique-photo{ width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--sb-surf); display: grid; place-items: center; }
.s27-autre-rubrique-photo img{ width: 100%; height: 100%; object-fit: cover; }
.s27-autre-rubrique-photo svg{ width: 22px; height: 22px; color: var(--sb-accent); }
.s27-autre-rubrique:hover{ box-shadow: var(--sb-ombre-forte); color: var(--sb-accent); }

/* ===================== 15. En-tête d'article — fiche de séance lignée ===================== */
.s27-entete-article{ padding-block: 0 0; }
.s27-entete-article .sbt-fil-ariane{ padding-block: 14px 12px; }
.s27-entete-article-carnet{ display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 40px; max-width: calc(var(--sb-conteneur) - 2 * var(--sb-gouttiere)); margin-inline: auto; padding: 36px 40px; background: repeating-linear-gradient(to bottom, var(--sb-surf) 0 31px, var(--sb-filet) 31px 32px); border-radius: var(--sb-rayon-grand); border-left: 4px solid var(--sb-chene); position: relative; }
.s27-entete-article-colonne{ display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.s27-entete-article-colonne .s27-rubrique-surtitre{ align-self: flex-start; background: var(--sb-accent); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: .8125rem; }
.s27-entete-article h1{ font-size: clamp(1.875rem, 1.25rem + 1.7vw, 3rem); font-stretch: 86%; margin-top: 14px; line-height: 1.04; }
.s27-entete-article-chapo{ margin: 14px 0 0; font-size: 1.125rem; line-height: 1.5; color: var(--sb-doux); max-width: 60ch; }
.s27-entete-article-meta{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 20px; font-size: .875rem; color: var(--sb-doux); }
.s27-entete-article-meta img{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--sb-fond-carte); }
.s27-entete-article-meta a{ color: var(--sb-encre); font-weight: 700; text-decoration: none; }
.s27-entete-article-meta a:hover{ color: var(--sb-accent); }
.s27-entete-article-photo{ position: relative; align-self: start; margin-bottom: -56px; }
.s27-entete-article-photo-cadre{ aspect-ratio: 4/5; max-height: 420px; width: 100%; border-radius: 24px; overflow: hidden; box-shadow: var(--sb-ombre-forte); background: var(--sb-surf); }
.s27-entete-article-photo-cadre img{ width: 100%; height: 100%; object-fit: cover; }
.s27-entete-article-chrono{ position: absolute; top: -18px; left: -24px; z-index: 2; }
@media (max-width: 980px){
	.s27-entete-article-carnet{ grid-template-columns: minmax(0,1fr); padding: 24px 22px 28px; margin-inline: var(--sb-gouttiere); gap: 22px; }
	.s27-entete-article-photo{ margin-bottom: 0; order: -1; }
	.s27-entete-article-photo-cadre{ aspect-ratio: 16/10; max-height: 280px; }
	.s27-entete-article-chrono{ left: auto; right: 12px; top: -14px; }
}
@media (max-width: 480px){ .s27-entete-article-carnet{ margin-inline: 16px; padding-inline: 18px; } }

/* Corps d'article : sommaire en tête, rythme serré, barre latérale = formulaire seul */
.sbt-article-mise-en-page{ padding-top: 72px; padding-bottom: 32px; column-gap: 40px; }
@media (max-width: 1080px){ .sbt-article-mise-en-page{ padding-top: 28px; } }
.sbt-sommaire-mobile{ display: block; margin-bottom: 28px; }
.sbt-sommaire-mobile .sbt-sommaire{ background: repeating-linear-gradient(to bottom, var(--sb-fond-carte) 0 31px, #EFE8DC 31px 32px); border-left-color: var(--sb-chene); padding: 18px 22px; }
.sbt-sommaire-mobile .sbt-sommaire-titre{ font-size: 1.0625rem; }
@media (min-width: 760px){ .sbt-sommaire-mobile .sbt-sommaire ol{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 24px; } }
.sbt-sommaire li a{ line-height: 1.35; }
.sbt-article-corps{ font-size: 1.125rem; line-height: 1.68; }
.sbt-article-corps > *:first-child{ margin-top: 0; }
.sbt-article-corps h2{ font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); margin-top: 1.5em; margin-bottom: .5em; line-height: 1.12; }
.sbt-article-corps h3{ font-size: 1.25rem; margin-top: 1.3em; margin-bottom: .4em; font-stretch: 96%; }
.sbt-article-corps p{ margin: 0 0 1.05em; }
.sbt-article-corps a{ color: var(--sb-accent-survol); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: rgba(184,58,24,.45); }
.sbt-article-corps a:hover{ color: var(--sb-encre); text-decoration-color: var(--sb-accent); }
.sbt-article-corps .s27-btn, .sbt-article-corps .sbt-btn{ color: #fff; text-decoration: none; }
.sbt-article-corps img{ margin-block: 1.1em; }
.sbt-article-corps figure{ margin: 1.4em 0; }
.sbt-article-corps figure img{ margin: 0; border-radius: var(--sb-rayon); }
.sbt-article-corps figcaption{ margin-top: 8px; font-size: .875rem; color: var(--sb-doux); }
.sbt-article-corps .sbt-faq{ margin: 40px 0; }
.sbt-article-corps aside.sources, .sbt-article-corps .sources{ font-size: .9375rem; }
.sbt-article-corps .table-defilable, .sbt-article-corps .sbs-tableau{ overflow-x: auto; }
.sbt-rail{ top: calc(var(--s27-entete-h) + 20px); border-left: 0; padding-left: 0; }
.sbt-rail-carte{ border-radius: var(--sb-rayon); box-shadow: var(--sb-ombre); border-color: var(--sb-filet); padding: 18px; }
.sbt-rail-carte .sbt-t4{ font-family: var(--sb-titre); font-size: 1.125rem; font-stretch: 92%; text-transform: none; letter-spacing: 0; color: var(--sb-encre); }
.sbt-rail .s27-tuile{ min-height: 48px; padding: 8px 10px; }
@media (max-width: 1080px){ .sbt-rail{ border-top: 0; } }
.sbt-auteur{ margin-top: 28px; }

/* « Toujours dans <rubrique> » pleine largeur, marge franche avant le pied */
.s27-a-lire-pleine{ background: var(--sb-fond); padding-block: 40px 80px; }
.s27-a-lire-pleine .sbt-kicker{ font-family: var(--sb-titre); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); font-weight: 650; font-stretch: 92%; margin: 0 0 24px; position: relative; padding-bottom: 18px; }
.s27-a-lire-pleine .sbt-kicker::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--sb-accent-survol), var(--sb-accent)); }
.s27-a-lire-pleine .sbt-carte{ border: 0; box-shadow: var(--sb-ombre); }
.s27-a-lire-pleine .sbt-carte img{ aspect-ratio: 16/10; background: var(--sb-surf); }
.s27-a-lire-pleine .sbt-carte-corps h3{ font-stretch: 100%; font-weight: 600; line-height: 1.25; }

/* ===================== 16. Pages annexes ===================== */
.s27-propos-bandeau{ padding-block: 56px 64px; overflow: hidden; }
.s27-propos-grille{ display: grid; grid-template-columns: auto minmax(0,1fr); gap: 48px; align-items: center; }
.s27-propos-bandeau .s27-logo-symbole{ width: 200px; height: 200px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); }
.s27-propos-bandeau h1{ color: var(--sb-sur-fonce); font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem); font-stretch: 82%; }
.s27-propos-bandeau p{ color: rgba(246,243,238,.86); max-width: 60ch; margin: 16px 0 0; font-size: 1.125rem; }
.s27-propos-bandeau .s27-semaine{ margin-top: 22px; }
@media (max-width: 760px){ .s27-propos-grille{ grid-template-columns: minmax(0,1fr); gap: 20px; text-align: left; } .s27-propos-bandeau .s27-logo-symbole{ width: 110px; height: 110px; } }
.s27-fiches-2{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.s27-fiches-2 .s27-carnet h3{ font-size: 1.5rem; margin-bottom: 10px; }
.s27-fiches-2 .s27-carnet p{ margin: 0; line-height: 2; }
@media (max-width: 760px){ .s27-fiches-2{ grid-template-columns: minmax(0,1fr); } }
.s27-propos-eure{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: center; }
.s27-propos-eure-visuel{ height: 420px; }
.s27-propos-eure-visuel .s27-pignon-cadre{ aspect-ratio: auto; }
@media (max-width: 860px){ .s27-propos-eure{ grid-template-columns: minmax(0,1fr); gap: 28px; } .s27-propos-eure-visuel{ height: 300px; } }

.s27-contact{ padding-block: 48px 96px; }
.s27-contact-grille{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 72px; align-items: center; }
.s27-contact h1{ font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem); font-stretch: 84%; margin-top: 10px; }
.s27-contact .s27-chapo{ margin-top: 14px; }
.s27-contact .s27-chapo a{ color: var(--sb-accent-survol); font-weight: 700; }
.s27-contact-cas{ list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.s27-contact-cas li{ display: flex; align-items: center; gap: 12px; background: var(--sb-fond-carte); border-radius: 999px; padding: 12px 20px; font-size: 1rem; font-weight: 600; box-shadow: var(--sb-ombre); }
.s27-contact-cas svg{ width: 20px; height: 20px; color: var(--sb-accent); }
.s27-contact-visuel{ position: relative; height: 560px; }
.s27-contact-visuel .s27-pignon{ width: 78%; margin-left: auto; }
.s27-contact-visuel .s27-pignon-cadre{ aspect-ratio: auto; }
.s27-contact-formulaire{ position: absolute; left: 0; bottom: 24px; width: min(380px, 100%); z-index: 3; }
.s27-contact-formulaire .s27-champ textarea{ resize: vertical; min-height: 96px; }
@media (max-width: 980px){
	.s27-contact-grille{ grid-template-columns: minmax(0,1fr); gap: 32px; }
	.s27-contact-visuel{ height: auto; }
	.s27-contact-visuel .s27-pignon{ width: 100%; height: 260px; }
	.s27-contact-formulaire{ position: relative; bottom: auto; width: auto; margin: -64px 12px 0; }
}

/* ===================== 17. Hub & page ville ===================== */
.s27-hub-hero, .s27-ville-hero{ padding-block: clamp(40px, 5vw, 64px); }
.s27-ville-accordeons details{ background: var(--sb-fond-carte); border-radius: var(--sb-rayon); margin-bottom: 12px; padding: 4px 22px; }
.s27-ville-accordeons summary{ cursor: pointer; font-weight: 700; font-family: var(--sb-titre); padding: 16px 0; list-style: none; font-size: 1.0625rem; }
.s27-ville-accordeons summary::-webkit-details-marker{ display: none; }
.s27-ville-accordeons p{ padding-bottom: 16px; color: var(--sb-doux); }
.s27-prix-tuiles{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.s27-prix-tuile{ background: var(--sb-fond-carte); border-radius: var(--sb-rayon); padding: 24px; text-align: center; box-shadow: var(--sb-ombre); }
.s27-prix-tuile b{ display: block; font-family: var(--sb-titre); font-size: 1.75rem; color: var(--sb-accent); }
.s27-prix-tuile small{ display: block; margin-top: 6px; color: var(--sb-doux); font-size: .75rem; }
@media (max-width: 760px){ .s27-prix-tuiles{ grid-template-columns: minmax(0,1fr); } }

/* ===================== 18. Listes et tableaux du contenu ===================== */
.sbt-article-corps .s27-etapes{ list-style: none; margin: 1.3em 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: s27-etape; }
.sbt-article-corps .s27-etapes li{ position: relative; padding: 14px 16px 14px 60px; background: var(--sb-fond-carte); border-radius: 16px; box-shadow: var(--sb-ombre); }
.sbt-article-corps .s27-etapes li::before{ counter-increment: s27-etape; content: counter(s27-etape); position: absolute; left: 14px; top: 12px; width: 32px; height: 32px; border-radius: 50%; background: var(--sb-accent); color: #fff; font-family: var(--sb-titre); font-weight: 700; font-size: .9375rem; display: flex; align-items: center; justify-content: center; }
.sbt-article-corps .s27-encadre.s27-coches{ list-style: none; margin: 1.3em 0; padding: 20px 22px; background: var(--sb-surf); border-radius: var(--sb-rayon); display: flex; flex-direction: column; gap: 10px; }
.sbt-article-corps .s27-encadre.s27-coches li{ position: relative; padding-left: 30px; }
.sbt-article-corps .s27-encadre.s27-coches li::before{ content: ""; position: absolute; left: 0; top: .25em; width: 20px; height: 20px; border-radius: 50%; background: var(--sb-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat; }
.s27-encadre-cta{ margin: 1.6em 0; padding: 20px 24px; background: var(--sb-surf); border-radius: var(--sb-rayon-grand); border-left: 4px solid var(--sb-accent); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.s27-encadre-cta p{ margin: 0 !important; font-size: 1rem; max-width: 46ch; }
.sbt-article-corps table{ border-collapse: collapse; width: 100%; margin: 1.4em 0; font-family: var(--sb-texte); background: var(--sb-fond-carte); border-radius: 14px; overflow: hidden; }
.sbt-article-corps table th, .sbt-article-corps table td{ padding: 10px 14px; border-bottom: 1px solid var(--sb-filet); text-align: left; font-size: .9375rem; vertical-align: top; }
.sbt-article-corps table th{ background: var(--sb-surf); font-family: var(--sb-titre); font-weight: 650; font-stretch: 92%; }

/* ===================== 19. Pied de page — habillage du bloc figé ===================== */
.sbt-footer{ background-color: var(--sb-fonce); background-image: radial-gradient(1.6px 1.6px at 20px 30px, rgba(237,195,90,.12), transparent), radial-gradient(1.6px 1.6px at 90px 80px, rgba(184,58,24,.16), transparent), radial-gradient(1.6px 1.6px at 140px 40px, rgba(246,243,238,.08), transparent); background-size: 180px 180px; }
.sbt-footer-cta{ background: rgba(246,243,238,.06); border-radius: var(--sb-rayon); border-bottom: 0; }
.sbt-footer-cta .sbt-t3{ font-family: var(--sb-titre); font-weight: 650; }
.sbt-footer-colonne .sbt-t4{ color: var(--sb-accent-clair); }
.sbt-footer a{ color: rgba(246,243,238,.8); }
.sbt-footer a:hover{ color: #fff; }
.sbt-footer-logo{ font-stretch: 88%; }
.sbt-footer-desc, .sbt-footer-cta p{ color: rgba(246,243,238,.75); }
.sbt-footer-bas{ color: rgba(246,243,238,.62); }
.sbt-btn{ background: var(--sb-accent); }
.sbt-btn:hover{ background: var(--sb-accent-survol); }
@media (min-width: 1081px){ .sbt-cookies{ right: auto; max-width: 560px; } }

.s27-footer-villes ul{ display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 18px; }
@media (min-width: 981px){ .sbt-footer-grille{ grid-template-columns: 1.3fr 1fr 1fr .8fr; } }

/* ===================== 20. Mobile ===================== */
@media (max-width: 480px){
	:root{ --sb-gouttiere: 16px; }
	.s27-hero-grille{ padding-inline: 16px; }
}