/*
 * BLOC FIGÉ — SOMMAIRE (thématique) — CSS
 * CSS volontairement simple (voir partial-sommaire.php : la robustesse de ce bloc est
 * dans le PHP — ids séquentiels, exclusion FAQ/Sources, seuil de 3 titres — pas dans son
 * habillage). Inspiré du rendu `<details>` natif de health-nutrition-cambrai.fr
 * (« Bien Vivre Santé »), classes renommées `.sbt-sommaire*`.
 */

.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É — BARRE LATÉRALE D'ARTICLE (thématique) — CSS
 * Origine : curieux-du-web.com, theme/style.css, règles `.cdw-rail` / `.cdw-rail-carte`
 * (lignes ~854-861, renommées `.sbt-rail*` ici) — commentaire garde-fou d'origine
 * CONSERVÉ TEL QUEL ci-dessous (règle la plus importante de ce bloc).
 *
 * Inspiration secondaire documentée (pas copiée en entier) : amatauto.fr fait basculer
 * sa colonne latérale en bloc STATIQUE empilé sous le texte à partir de 1100px
 * (assets/css/v2.css, `.a2-art__cote { position: sticky; ... }` +
 * `@media (max-width: 1100px) { .a2-art__cote { position: static; } }`) — repris ici en
 * option mobile (media query 1080px, cohérente avec le point de rupture de
 * `.sbt-article-mise-en-page` dans single-article.css).
 */

/* Rail sticky — collé à la colonne de texte, séparation par un filet interne, jamais un
   gap blanc entre les deux colonnes. */
.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;
}
/* ⛔ GARDE-FOU (conservé tel quel depuis curieux-du-web.com, retour Mathias ×3) : jamais
   de overflow-y ni de max-height ici — la colonne reste collante et accompagne TOUTE la
   lecture de l'article jusqu'en bas, sans sa propre barre de défilement interne. */
.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;
}

/* Option mobile (inspirée d'amatauto.fr, cf. en-tête) : sous 1080px, la grille parente
   passe déjà en une colonne (cf. .sbt-article-mise-en-page dans single-article.css) — le
   rail redevient donc naturellement un bloc statique empilé sous le texte. */
@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; }
}

/* Sommaire tel qu'affiché dans le rail (cf. partial-sommaire.css pour le détail des
   classes `.sbt-sommaire*`) : pas de style supplémentaire ici, la carte du rail suffit. */
/*
 * 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).
 * Couleurs/polices/espacements uniquement en `var(--sb-*, repli)` : un site neuf peut
 * utiliser ce fichier tel quel sans avoir encore défini ses propres variables.
 *
 * INTERDIT DE MODIFIER : voir single-article.php (un seul <article>, « à lire aussi »
 * en <div>). LIBRE DE MODIFIER : toutes les valeurs des var() ci-dessous.
 */

.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-entete{ max-width: var(--sb-lecture, 720px); margin-inline: auto; padding-block: 8px 24px; }
.sbt-article-pastille{
	display: inline-block; background: var(--sb-surf, #f4f5fa); color: var(--sb-encre, #0f172a);
	font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-weight: 700; font-size: .75rem;
	text-transform: uppercase; letter-spacing: .04em; padding: 6px 12px; border-radius: 999px; margin-bottom: 16px;
	text-decoration: none;
}
.sbt-article-entete h1{ font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); line-height: 1.15; margin: 0; }
.sbt-article-chapo{ font-family: var(--sb-texte, 'Inter', system-ui, sans-serif); font-style: italic; font-size: clamp(1.0625rem,1rem + .3vw,1.3125rem); color: var(--sb-doux, #55607a); margin-top: 16px; }
.sbt-article-meta{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; font-size: .875rem; color: var(--sb-doux, #55607a); }
.sbt-article-meta img{ width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.sbt-article-meta-auteur{ color: inherit; font-weight: 600; text-decoration: none; }

.sbt-article-une{ max-width: var(--sb-conteneur, 1240px); margin: 28px auto 32px; padding-inline: var(--sb-gouttiere, 24px); }
.sbt-article-une-cadre{ aspect-ratio: 2.4 / 1; max-height: min(520px, 46vh); overflow: hidden; /* 01/10 : à 1440×900 le texte passait sous la ligne de flottaison (B-ART-09) */ border-radius: var(--sb-rayon, 14px); box-shadow: var(--sb-ombre, 0 8px 24px rgba(15,23,42,.08)); }
.sbt-article-une-cadre img{ width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px){ .sbt-article-une-cadre{ aspect-ratio: auto; height: 220px; max-height: 220px; } }

/* Grille corps + rail — align-items:start obligatoire pour que le rail sticky
   (cf. partial-sidebar.css) tienne sur toute la hauteur du contenu. */
.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; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); }
.sbt-article-corps h3{ margin-top: 1.8em; 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;
}

/* Sommaire replié en accordéon sur mobile uniquement (en desktop, il vit dans le rail —
   cf. partial-sidebar.php / partial-sommaire.php). */
.sbt-sommaire-mobile{ display: none; }
@media (max-width: 1080px){ .sbt-sommaire-mobile{ display: block; margin-bottom: 24px; } }
/* 01/10/2026 (baliturismo, juge visuel) : sous 1080px le rail passe SOUS l'article ; sa carte sommaire
   faisait doublon avec le sommaire mobile de tête (erreur n°6 « sommaire en double »). */
@media (max-width: 1080px){ .sbt-rail-carte--sommaire{ display: none; } }

/* « À lire aussi » (toujours un <div>, jamais un <article> — cf. single-article.php) */
.sbt-a-lire{ margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--sb-filet, #e2e5ef); }
.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); }

/* 01/10 (accessoiriste.net) : un seul sommaire visible par largeur — la carte du rail se masque quand l'accordéon mobile s'affiche. */
@media (max-width: 1080px){ .sbt-rail-carte--sommaire{ display: none; } }
/* 05/10 (operations-digestives, juge visuel) : sous-titres collés au paragraphe suivant (marge basse 0 px mesurée) */
.sbt-article-corps h2{ margin-bottom: .6em; }
.sbt-article-corps h3{ margin-bottom: .45em; }
/*
 * BLOC FIGÉ — ENCADRÉS « LE SAVIEZ-VOUS » / « POINTS À RETENIR » (thématique) — CSS
 * Origine : amatauto.fr, assets/css/v2.css, règles `.amat-encadre--retenir` / `.a2-saviez`
 * (renommées `.sbt-encadre--retenir` / `.sbt-encadre--saviez` ici). Habillage simplifié
 * (gradients/decorations ::before retirés pour rester générique et léger), la structure
 * (grille icône + texte pour « le saviez-vous », liste à puces pour « points à retenir »)
 * est conservée.
 */

.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;
}

/* « Points à retenir » — fond foncé, liste à puces check. */
.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;
}

/* « Le saviez-vous ? » — encadré clair, icône ampoule. */
.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; }
}
/* 04/10/2026 (invalidcast.com) : la règle de liste du corps d'article écrasait le retrait → la coche mangeait la 1re lettre. */
.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
 * Visuel inspiré du rendu RÉEL de solutionminceur.fr, classes `.smr-faq*` récupérées par
 * un unique curl en lecture seule sur
 * `https://solutionminceur.fr/wp-content/themes/solutionminceur-v2/roxane.css`
 * (fichier CSS distant, absent du mirroir local du chantier — ce curl a RÉUSSI, voir
 * README). Classes renommées `.sbt-faq*` ici, variables de couleur remplacées par des
 * `var(--sb-*, repli)` génériques.
 *
 * Mécanisme accordéon (natif <details>/<summary>, sans JS) : cf. partial-faq.php, origine
 * health-nutrition-cambrai.fr.
 */

.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='%232563eb' 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
 * Visuel inspiré du rendu RÉEL de solutionminceur.fr, classes `.smr-auteur*` récupérées
 * par le même curl en lecture seule que partial-faq.css (roxane.css, voir README).
 * Classes renommées `.sbt-auteur*` ici, variables de couleur remplacées par des
 * `var(--sb-*, repli)` génériques.
 */

.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
 * Origine : curieux-du-web.com, theme/style.css, règles `.cdw-footer*` / `.cdw-cookies*` /
 * `.cdw-popup-sortie*` / `.cdw-btn*` (renommées `.sbt-footer*` / `.sbt-cookies*` /
 * `.sbt-popup-sortie*` / `.sbt-btn*` ici).
 */

.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 a.sbt-btn, .sbt-footer a.sbt-btn:hover{ color: #fff; } /* 10/10/2026 (blueau.fr) : « .sbt-footer a » battait la couleur du bouton (texte gris sur accent, 4,25:1) */

.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; } } /* 04/10/2026 (invalidcast.com) : texte collé au bord dès qu'un thème donne un fond de carte au bandeau */
.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; }

/* Bandeau cookies — deux boutons de MÊME poids (même classe .sbt-btn/.sbt-btn--petit),
   jamais un seul « J'ai compris » qui vaudrait acceptation forcée. */
.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; }

/* Popup de sortie — jamais de colonne image vide : si pas d'image, la boîte bascule sur
   une seule colonne (cf. .sbt-popup-sortie-boite--sans-image). */
.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; }
/* ═══ Échancrure — habillage du site (assemblé avec les blocs figés dans tout.css) ═══ */
@font-face { font-family: 'Italiana'; src: url('fonts/italiana-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Josefin Sans'; src: url('fonts/josefin-sans.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }

:root {
	--ecume: #F3F7F5; --blanc: #FFFFFF; --petrole: #0E3A40; --petrole-2: #165A61; --verre: #D5EBE4; --verre-fort: #9CCFC4;
	--wax: #F2C94C; --wax-fonce: #E0B22E; --sable: #EFE6DA; --encre: #14302F; --doux: #4A6461; --filet: #D3E2DD; --lagon: #1C7472;
	--titre: 'Italiana', 'Didot', Georgia, serif; --texte: 'Josefin Sans', 'Avenir Next', system-ui, sans-serif;
	--r: 20px; --r-grand: 28px; --ombre: 0 18px 40px -18px rgba(14,58,64,.35); --ombre-forte: 0 30px 60px -24px rgba(14,58,64,.45);
	--in: 1320px; --g: clamp(18px, 3vw, 40px); --entete: 76px;
	/* jetons des blocs figés */
	--sb-conteneur: 1240px; --sb-lecture: 760px; --sb-rail: 336px; --sb-gouttiere: 24px; --sb-accent: var(--lagon); --sb-accent-clair: var(--verre);
	--sb-encre: var(--encre); --sb-doux: var(--doux); --sb-filet: var(--filet); --sb-fond-carte: #fff; --sb-surf: var(--ecume); --sb-fonce: var(--petrole);
	--sb-sur-fonce: #E7F2EF; --sb-rayon: 18px; --sb-rayon-grand: 24px; --sb-ombre: var(--ombre); --sb-ombre-forte: var(--ombre-forte);
	--sb-titre: var(--texte); --sb-texte: var(--texte);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + 16px); }
body { margin: 0; background: var(--ecume); color: var(--encre); font-family: var(--texte); font-size: 18px; line-height: 1.6; font-weight: 400; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lagon); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 400; letter-spacing: .005em; line-height: 1.08; color: var(--petrole); margin: 0 0 .5em; text-wrap: balance; }
h2 { font-size: clamp(32px, 3.2vw, 52px); }
h3 { font-size: 26px; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--wax-fonce); outline-offset: 3px; border-radius: 6px; }
.ech-vh, .ech-piege { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ech-saut { position: absolute; left: 12px; top: -60px; background: var(--wax); color: var(--petrole); padding: 10px 16px; border-radius: 10px; z-index: 100; }
.ech-saut:focus { top: 12px; }
.ech-in { max-width: var(--in); margin-inline: auto; padding-inline: var(--g); }

/* ── Boutons ── */
.ech-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 14px 26px 12px; border-radius: 999px; border: 0;
	font: 600 17px/1.1 var(--texte); letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; white-space: nowrap; }
.ech-btn:hover { transform: translateY(-2px); }
.ech-btn--wax { background: var(--wax); color: var(--petrole); box-shadow: 0 10px 24px -12px rgba(224,178,46,.9); }
.ech-btn--wax:hover { background: #F6D46A; }
.ech-btn--petrole { background: var(--petrole); color: #fff; }
.ech-btn--petrole:hover { background: var(--petrole-2); }
.ech-btn--grand { min-height: 58px; padding-inline: 34px; font-size: 18px; }
.ech-lien-fort { font-weight: 600; color: var(--petrole); text-decoration: none; border-bottom: 2px solid var(--wax); padding-bottom: 2px; }
.ech-lien-fort:hover { border-color: var(--lagon); }

/* ── En-tête ── */
.ech-entete { position: sticky; top: 0; z-index: 50; background: rgba(243,247,245,.94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid rgba(14,58,64,.08); }
.ech-entete-in { max-width: var(--in); margin: 0 auto; padding: 0 var(--g); height: var(--entete); display: flex; align-items: center; gap: 28px; }
.ech-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--petrole); flex-shrink: 0; }
.ech-logo img { width: 42px; height: 42px; }
.ech-logo-nom { font-family: var(--titre); font-size: 30px; line-height: 1; display: flex; flex-direction: column; }
.ech-logo-nom small { font-family: var(--texte); font-size: 13px; letter-spacing: .08em; color: var(--doux); margin-top: 3px; }
.ech-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.ech-nav a:not(.ech-btn) { color: var(--encre); text-decoration: none; font-weight: 500; font-size: 17px; padding: 6px 0; border-bottom: 2px solid transparent; }
.ech-nav a:not(.ech-btn):hover, .ech-nav a[aria-current] { border-color: var(--wax); }
.ech-nav-action { min-height: 46px; padding: 12px 22px 10px; }
.ech-menu-bouton { display: none; }

/* ── Premier écran ── */
.ech-hero { position: relative; display: grid; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); min-height: min(calc(100vh - var(--entete)), 820px); background: var(--ecume); overflow: hidden; }
.ech-hero-texte { padding: clamp(24px, 4.2vh, 56px) 0 32px max(var(--g), calc((100vw - var(--in)) / 2 + var(--g))); display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 3; }
.ech-hero h1 { font-size: clamp(42px, 3.75vw, 76px); line-height: 1.0; margin: 0 0 18px; max-width: 15em; color: var(--petrole); }
.ech-hero h1 .ech-ton2 { display: block; color: var(--lagon); font-style: italic; }
.ech-hero-chapo { font-size: 19px; color: var(--doux); max-width: 34em; margin-bottom: 22px; }
.ech-hero-visuel { position: relative; min-height: 460px; }
.ech-hero-photo { position: absolute; inset: 0 0 0 56px; border-bottom-left-radius: 0; overflow: hidden;
	-webkit-mask: radial-gradient(ellipse 46% 58% at 0% 100%, transparent 99.4%, #000 100%); mask: radial-gradient(ellipse 46% 58% at 0% 100%, transparent 99.4%, #000 100%); }
.ech-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 40%; }
.ech-surpiqure { position: absolute; pointer-events: none; }
.ech-hero-visuel .ech-surpiqure { left: 56px; bottom: 0; width: calc((100% - 56px) * .46); height: 58%; }
.ech-hero-visuel .ech-surpiqure::before { content: ""; position: absolute; right: -12px; top: -12px; width: calc(200% + 24px); height: calc(200% + 24px); border: 2px dashed var(--wax-fonce); border-radius: 50%; }
.ech-hero-visuel .ech-surpiqure { overflow: hidden; }
.ech-etiquette-taille { position: absolute; left: 0; top: 13%; z-index: 4; background: #fff; border-radius: 14px; padding: 16px 20px 12px; box-shadow: var(--ombre); transform: rotate(-2.5deg); outline: 1.5px dashed var(--verre-fort); outline-offset: -7px; }
.ech-etiquette-taille p { margin: 0 0 6px; font-size: 14px; color: var(--doux); }
.ech-etiquette-taille ul { margin: 0; padding: 0; list-style: none; }
.ech-etiquette-taille li { font-size: 16px; line-height: 1.35; color: var(--encre); }
.ech-etiquette-taille strong { display: inline-block; min-width: 1.4em; font-family: var(--texte); font-weight: 700; color: var(--lagon); font-variant-numeric: tabular-nums; }

/* ── Carnet des coupes (formulaire en étapes) ── */
.ech-carnet { position: relative; width: calc(100% + 96px); max-width: 640px; background: #fff; border-radius: var(--r-grand); box-shadow: var(--ombre-forte); padding: 20px 22px 18px; }
.ech-carnet-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ech-carnet-titre { margin: 0; font-family: var(--titre); font-size: 26px; color: var(--petrole); line-height: 1.1; }
.ech-carnet-etape { margin: 0; font-size: 14px; color: var(--doux); font-variant-numeric: tabular-nums; }
.ech-carnet-barre { height: 5px; border-radius: 5px; background: var(--verre); margin: 10px 0 14px; overflow: hidden; }
.ech-carnet-barre i { display: block; height: 100%; background: linear-gradient(90deg, var(--lagon), var(--verre-fort)); border-radius: inherit; transition: width .35s ease; }
.ech-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.ech-q legend { font-weight: 600; font-size: 18px; color: var(--encre); margin-bottom: 12px; padding: 0; }
.ech-choix { display: grid; gap: 10px; }
.ech-choix--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ech-choix--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ech-choix button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 56px; padding: 12px 10px 10px; border: 1.5px solid var(--filet); border-radius: 16px; background: var(--ecume);
	font: 600 16px/1.2 var(--texte); color: var(--petrole); cursor: pointer; text-align: center; transition: border-color .15s, background-color .15s, transform .15s; }
.ech-choix button svg { width: 28px; height: 28px; fill: none; stroke: var(--lagon); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ech-choix button:hover { border-color: var(--lagon); background: #fff; transform: translateY(-1px); }
.ech-choix button[aria-pressed="true"] { border-color: var(--petrole); background: var(--verre); }
.ech-retour { margin-top: 10px; background: none; border: 0; padding: 4px 0; color: var(--doux); font: 500 15px var(--texte); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ech-retour--lien { margin: 0; font-size: 13px; }
.ech-resultat-coupe { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 8px; margin-bottom: 10px; border-radius: 16px; background: var(--ecume); text-decoration: none; color: var(--encre); }
.ech-resultat-photo { display: block; width: 64px; height: 80px; border-radius: 12px 12px 12px 34px; overflow: hidden; background: var(--verre); }
.ech-resultat-coupe img { width: 64px; height: 80px; object-fit: cover; }
.ech-resultat-coupe small { display: block; font-size: 13px; color: var(--doux); }
.ech-resultat-coupe strong { display: block; font-family: var(--titre); font-weight: 400; font-size: 26px; color: var(--petrole); line-height: 1.1; }
.ech-resultat-coupe em { display: block; font-style: normal; font-size: 14px; line-height: 1.35; color: var(--doux); }
.ech-carnet-ligne { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.ech-champ { display: block; margin-bottom: 10px; }
.ech-champ span { display: block; font-size: 14px; font-weight: 600; color: var(--doux); margin-bottom: 4px; }
.ech-champ input, .ech-champ select, .ech-champ textarea { width: 100%; min-height: 48px; padding: 12px 14px 10px; border: 1.5px solid var(--filet); border-radius: 12px; background: #fff; font: 400 17px var(--texte); color: var(--encre); }
.ech-champ textarea { min-height: 84px; resize: vertical; }
.ech-champ input:focus, .ech-champ select:focus, .ech-champ textarea:focus { border-color: var(--lagon); outline: none; box-shadow: 0 0 0 3px rgba(28,116,114,.18); }
.ech-carnet-form .ech-btn, .ech-contact-form .ech-btn { width: 100%; }
.ech-rgpd { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--doux); }
.ech-rgpd a { color: var(--doux); }
.ech-ok { margin: 8px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--verre); color: var(--petrole); font-weight: 600; }

/* ── Bandes de l'accueil ── */
.ech-bande { padding-block: clamp(44px, 4.4vw, 72px); }
.ech-bande--blanc { background: var(--blanc); }
.ech-bande--ecume { background: var(--ecume); }
.ech-bande--verre { background: var(--verre); }
.ech-bande--sable { background: var(--sable); }
.ech-bande--petrole { background: var(--petrole); color: #E7F2EF; }
.ech-bande--wax { background: var(--wax); }
.ech-bande-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: end; margin-bottom: 24px; }
.ech-bande-tete h2 { grid-column: 1; margin: 0 0 8px; }
.ech-bande-tete p { grid-column: 1; margin: 0; color: var(--doux); max-width: 40em; }
.ech-bande-tete .ech-lien-fort { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-bottom: 4px; }
.ech-bande-tete--clair h2 { color: #fff; }
.ech-bande-tete--clair p { color: #C7DEDA; }

/* Cartes de coupes : coin bas-gauche échancré (le motif du site) */
.ech-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 22px) / 4); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 18px; margin-inline: -4px; scrollbar-width: thin; }
.ech-rail > * { scroll-snap-align: start; }
.ech-coupe { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: var(--r) var(--r) var(--r) var(--r); box-shadow: var(--ombre); text-decoration: none; color: var(--encre); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.ech-coupe:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.ech-coupe-photo { position: relative; display: block; aspect-ratio: 4 / 3.1; overflow: hidden; border-radius: 0 0 0 46% / 0 0 0 32%; }
.ech-coupe-photo img { width: 100%; height: 100%; object-fit: cover; }
.ech-etiquette { position: absolute; left: 12px; top: 12px; z-index: 2; background: #fff; color: var(--petrole); font-size: 13px; font-weight: 600; padding: 7px 12px 5px; border-radius: 8px; line-height: 1.2; }
.ech-etiquette--cousue { outline: 1.5px dashed var(--verre-fort); outline-offset: -4px; }
.ech-coupe-trace { position: absolute; right: 12px; bottom: 12px; width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-items: center; box-shadow: 0 6px 14px -6px rgba(14,58,64,.5); }
.ech-trace { width: 70%; height: 70%; fill: none; stroke: var(--petrole); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ech-coupe-corps { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px 16px; flex: 1; }
.ech-coupe-nom { font-family: var(--titre); font-size: 28px; line-height: 1.05; color: var(--petrole); }
.ech-coupe-pour { font-size: 15.5px; line-height: 1.4; color: var(--doux); }
.ech-coupe-eaux { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.ech-coupe-eaux span { font-size: 13px; font-weight: 600; padding: 4px 10px 2px; border-radius: 999px; background: var(--ecume); color: var(--lagon); }
.ech-bientot { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--petrole); }
.ech-bientot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--wax-fonce); box-shadow: 0 0 0 4px rgba(242,201,76,.35); }
.ech-bientot--grand { font-size: 17px; margin-bottom: 6px; }

/* Selon l'eau (bande pétrole) */
.ech-eaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ech-eau { display: flex; flex-direction: column; background: #12474E; border-radius: var(--r-grand); overflow: hidden; text-decoration: none; color: #E7F2EF; box-shadow: 0 24px 50px -28px rgba(0,0,0,.6); transition: transform .2s ease; }
.ech-eau:hover { transform: translateY(-4px); }
.ech-eau-photo { display: block; aspect-ratio: 16 / 6.6; overflow: hidden; }
.ech-eau-photo img { width: 100%; height: 100%; object-fit: cover; }
.ech-eau-corps { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.ech-eau-titre { font-family: var(--titre); font-size: 32px; line-height: 1; color: #fff; }
.ech-eau-texte { font-size: 16px; line-height: 1.45; color: #C7DEDA; margin-bottom: 6px; }
.ech-jauge { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 14.5px; }
.ech-jauge-b { display: inline-flex; gap: 4px; }
.ech-jauge-b i { width: 18px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.18); }
.ech-jauge-b i.on { background: var(--wax); }
.ech-fiche-jauges .ech-jauge-b i { background: var(--filet); }
.ech-fiche-jauges .ech-jauge-b i.on { background: var(--lagon); }

/* Lire une coupe (bande verre) */
.ech-lecture { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ech-lecture-dessin { position: relative; aspect-ratio: 1 / 1; max-height: 520px; background: #fff; border-radius: var(--r-grand) var(--r-grand) var(--r-grand) 46% / var(--r-grand) var(--r-grand) var(--r-grand) 34%; box-shadow: var(--ombre); display: grid; place-items: center; }
.ech-trace--grand { width: 58%; height: 58%; stroke-width: 1.8; stroke: var(--petrole); stroke-dasharray: none; }
.ech-repere { position: absolute; background: var(--petrole); color: #fff; font-size: 14px; font-weight: 600; padding: 8px 12px 6px; border-radius: 10px; box-shadow: var(--ombre); }
.ech-repere::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--wax); border: 2px solid var(--petrole); }
.ech-repere--1 { left: 6%; bottom: 22%; } .ech-repere--1::after { right: -16px; top: 8px; }
.ech-repere--2 { right: 6%; top: 12%; } .ech-repere--2::after { left: -16px; top: 8px; }
.ech-repere--3 { left: 8%; top: 18%; } .ech-repere--3::after { right: -16px; top: 8px; }
.ech-lecture-texte p { color: var(--doux); }
.ech-reperes { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.ech-reperes li { background: rgba(255,255,255,.72); border-radius: 16px; padding: 14px 18px 12px; line-height: 1.5; font-size: 17px; border-left: 4px solid var(--lagon); }
.ech-reperes strong { color: var(--petrole); }

/* Grilles d'articles */
.ech-grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ech-grille-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; align-items: start; }
.ech-carte { display: flex; flex-direction: column; background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--ombre); text-decoration: none; color: var(--encre); transition: transform .2s ease, box-shadow .2s ease; }
.ech-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.ech-carte-photo { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.ech-carte-photo img { width: 100%; height: 100%; object-fit: cover; }
.ech-carte-corps { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.ech-carte-titre { font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--petrole); }
.ech-carte-meta { font-size: 14px; color: var(--doux); }

/* Avant l'ouverture (FAQ d'accueil) */
.ech-faq-accueil { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ech-faq-photo { border-radius: var(--r-grand) var(--r-grand) var(--r-grand) 46% / var(--r-grand) var(--r-grand) var(--r-grand) 34%; overflow: hidden; box-shadow: var(--ombre); aspect-ratio: 5 / 4.6; max-height: 520px; }
.ech-faq-photo img { width: 100%; height: 100%; object-fit: cover; }
.ech-faq details { background: var(--ecume); border-radius: 16px; margin-bottom: 10px; border: 1px solid var(--filet); }
.ech-faq summary { cursor: pointer; list-style: none; padding: 16px 52px 14px 20px; font-weight: 600; font-size: 18px; color: var(--petrole); position: relative; }
.ech-faq summary::-webkit-details-marker { display: none; }
.ech-faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--lagon); border-bottom: 2px solid var(--lagon); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.ech-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.ech-faq details p { padding: 0 20px 16px; margin: 0; color: var(--doux); }

/* Capture « me prévenir » */
.ech-capture { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.ech-capture h2 { margin-bottom: 10px; }
.ech-capture p { margin: 0; color: var(--petrole); font-size: 18px; }
.ech-bande--wax .ech-capture h2 { color: var(--petrole); }
.ech-capture--clair h2 { color: #fff; }
.ech-capture--clair p { color: #C7DEDA; }
.ech-capture--clair .ech-btn { justify-self: end; }
.ech-prevenir { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.ech-prevenir .ech-champ { margin: 0; }
.ech-prevenir .ech-rgpd, .ech-prevenir .ech-ok { grid-column: 1 / -1; }
.ech-bande--wax .ech-prevenir { background: #fff; padding: 18px; border-radius: var(--r); box-shadow: var(--ombre); }
.ech-bande--wax .ech-prevenir .ech-btn--wax { background: var(--petrole); color: #fff; box-shadow: none; }

/* ── En-têtes de liste, de page et de fiche ── */
.ech-liste-tete { background: var(--verre); padding-block: 0; overflow: hidden; }
.ech-liste-tete-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-block: 24px 40px; }
.ech-page-tete-seule { padding-block: 24px 44px; max-width: 980px; }
.ech-liste-tete h1 { font-size: clamp(40px, 4vw, 66px); margin-bottom: 14px; }
.ech-liste-tete p { color: var(--doux); font-size: 19px; max-width: 36em; }
.ech-liste-photo { position: relative; aspect-ratio: 16 / 11; max-height: 400px; border-radius: var(--r-grand) var(--r-grand) var(--r-grand) 46% / var(--r-grand) var(--r-grand) var(--r-grand) 34%; overflow: hidden; box-shadow: var(--ombre-forte); }
.ech-liste-photo img { width: 100%; height: 100%; object-fit: cover; }
.ech-surpiqure--liste, .ech-surpiqure--une, .ech-surpiqure--fiche { position: absolute; inset: 9px; border: 2px dashed rgba(255,255,255,.75); border-radius: calc(var(--r-grand) - 6px) calc(var(--r-grand) - 6px) calc(var(--r-grand) - 6px) 46% / calc(var(--r-grand) - 6px) calc(var(--r-grand) - 6px) calc(var(--r-grand) - 6px) 34%; left: 9px; pointer-events: none; }
.ech-puces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ech-puces a, .ech-puces button { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 9px 16px 7px; border-radius: 999px; background: #fff; border: 1.5px solid transparent; color: var(--petrole); text-decoration: none; font: 600 15.5px var(--texte); cursor: pointer; }
.ech-puces small { font-size: 13px; color: var(--doux); font-weight: 500; }
.ech-puces a:hover, .ech-puces button:hover { border-color: var(--lagon); }
.ech-puces [aria-current], .ech-puces [aria-pressed="true"] { background: var(--petrole); color: #fff; }
.ech-puces [aria-current] small, .ech-puces [aria-pressed="true"] small { color: #C7DEDA; }
.ech-collection-item[hidden] { display: none; }
.ech-bande--liste { padding-top: 48px; }
.ech-grille-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ech-carte--une { grid-column: span 2; grid-row: span 2; }
.ech-carte--une .ech-carte-photo { aspect-ratio: 16 / 10.4; }
.ech-carte--une .ech-carte-titre { font-family: var(--titre); font-weight: 400; font-size: 34px; line-height: 1.1; }
.ech-suite { display: flex; justify-content: center; gap: 14px; margin-top: 40px; }
.ech-suite a { display: inline-flex; min-height: 50px; align-items: center; padding: 12px 24px 10px; border-radius: 999px; background: var(--petrole); color: #fff; text-decoration: none; font-weight: 600; }
.ech-vide { background: #fff; border-radius: var(--r); padding: 32px; text-align: center; box-shadow: var(--ombre); }
.ech-h2-petit { font-size: 36px; }

/* Fiche d'une coupe */
.ech-fiche-tete { background: var(--ecume); }
.ech-fiche-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-block: 28px 56px; }
.ech-fiche-visuel { position: relative; padding: 0 0 0 0; }
.ech-fiche-photo { aspect-ratio: 4 / 4.6; max-height: calc(100vh - var(--entete) - 80px); min-height: 420px; border-radius: var(--r-grand) var(--r-grand) var(--r-grand) 46% / var(--r-grand) var(--r-grand) var(--r-grand) 34%; overflow: hidden; box-shadow: var(--ombre-forte); }
.ech-fiche-photo img { width: 100%; height: 100%; object-fit: cover; }
.ech-fiche-plat { position: absolute; right: 18px; bottom: 18px; width: 138px; background: #fff; border-radius: 18px; padding: 12px 12px 8px; text-align: center; box-shadow: var(--ombre); outline: 1.5px dashed var(--verre-fort); outline-offset: -6px; }
.ech-fiche-plat svg { width: 100%; height: auto; aspect-ratio: 100 / 106; }
.ech-trace--plat { stroke-width: 2.2; }
.ech-fiche-plat span { font-size: 13px; color: var(--doux); }
.ech-fiche-texte .ech-etiquette { position: static; display: inline-block; margin-bottom: 12px; background: #fff; }
.ech-fiche-texte h1 { font-size: clamp(48px, 4.6vw, 84px); line-height: 1; margin-bottom: 12px; }
.ech-fiche-pour { font-size: 20px; color: var(--doux); margin-bottom: 18px; }
.ech-fiche-jauges { display: grid; gap: 8px; max-width: 420px; margin-bottom: 14px; color: var(--encre); }
.ech-coupe-eaux--fiche { margin: 0 0 20px; }
.ech-fiche-action { background: #fff; border-radius: var(--r-grand); padding: 20px 22px; box-shadow: var(--ombre); max-width: 560px; }
.ech-fiche-note { font-size: 15.5px; color: var(--doux); margin-bottom: 12px; }
.ech-fiche-corps, .ech-page-corps { max-width: 900px; }
.ech-panneau { background: #fff; }
.ech-page--legale .ech-panneau { font-size: 17px; }

/* Contact : tient entier dans le premier écran, mobile compris */
.ech-contact-tete { background: var(--verre); }
.ech-contact-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-block: 28px 40px; }
.ech-contact-texte h1 { font-size: clamp(40px, 4vw, 64px); }
.ech-contact-texte p { color: var(--doux); font-size: 19px; }
.ech-contact-photo { width: 100%; aspect-ratio: 16 / 10; max-height: 320px; object-fit: cover; border-radius: var(--r-grand) var(--r-grand) var(--r-grand) 46% / var(--r-grand) var(--r-grand) var(--r-grand) 34%; box-shadow: var(--ombre); }
.ech-contact-form { background: #fff; border-radius: var(--r-grand); padding: 22px 24px 20px; box-shadow: var(--ombre-forte); }
.ech-contact-form .ech-carnet-titre { margin-bottom: 12px; }

/* Équipe */
.ech-equipe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ech-membre { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 22px; background: #fff; border-radius: var(--r-grand); padding: 22px; box-shadow: var(--ombre); }
.ech-membre img { width: 140px; height: 140px; object-fit: cover; border-radius: 50% 50% 50% 18px; }
.ech-membre h2 { font-size: 32px; margin-bottom: 2px; }
.ech-membre-role { font-weight: 600; color: var(--lagon); margin-bottom: 8px; }
.ech-membre p { font-size: 16.5px; color: var(--doux); }
.ech-auteur-in { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 24px 44px; }
.ech-auteur-photo { width: 220px; height: 220px; object-fit: cover; border-radius: 50% 50% 50% 28px; box-shadow: var(--ombre-forte); }
.ech-auteur-role { font-weight: 600; color: var(--lagon); }

/* ── Article : en-tête propre au site ── */
.ech-art-bande { background: linear-gradient(180deg, var(--verre) 0, var(--verre) 74%, var(--ecume) 74%); padding-bottom: 8px; }
.ech-art-entete { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; max-width: 1240px; }
.ech-art-entete .sbt-article-entete { max-width: none; margin: 0; padding-block: 0 28px; }
.ech-art-entete h1 { font-family: var(--titre); font-size: clamp(38px, 3.6vw, 60px); line-height: 1.06; color: var(--petrole); }
.ech-art-entete .sbt-article-pastille { background: #fff; color: var(--petrole); text-transform: none; letter-spacing: .01em; font-size: 14px; border-radius: 8px; padding: 8px 14px 6px; }
.ech-art-entete .sbt-article-chapo { font-style: normal; font-size: 19px; }
.ech-art-entete .sbt-article-meta img { width: 44px; height: 44px; border: 2px solid #fff; box-shadow: 0 4px 10px -4px rgba(14,58,64,.5); }
.ech-art-signature { display: flex; flex-direction: column; line-height: 1.35; }
.ech-art-signature a { color: var(--petrole); font-weight: 700; }
.ech-art-une { position: relative; margin: 24px 0 0; padding: 0; max-width: none; }
.ech-art-une .sbt-article-une-cadre { aspect-ratio: 5 / 4; max-height: min(440px, 56vh); border-radius: var(--r-grand) var(--r-grand) var(--r-grand) 46% / var(--r-grand) var(--r-grand) var(--r-grand) 34%; box-shadow: var(--ombre-forte); }
.sbt-article-mise-en-page { column-gap: 48px; }
.sbt-article-corps { font-size: 18.5px; line-height: 1.72; }
.sbt-article-principal { background: #fff; border-radius: var(--r-grand); padding: clamp(22px, 3vw, 44px); box-shadow: 0 12px 30px -24px rgba(14,58,64,.4); }
.sbt-article-corps h2 { font-family: var(--titre); font-size: clamp(30px, 2.6vw, 40px); color: var(--petrole); }
.sbt-article-corps h3 { font-family: var(--texte); font-weight: 700; font-size: 21px; color: var(--petrole); }
.sbt-article-corps > ul, .sbt-article-corps > ol { padding-left: 0; list-style: none; display: grid; gap: 8px; margin: 0 0 1.4em; }
.sbt-article-corps > ul > li, .sbt-article-corps > ol > li { position: relative; background: var(--ecume); border-radius: 12px; padding: 10px 14px 8px 40px; }
.sbt-article-corps > ul > li::before { content: ""; position: absolute; left: 16px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--lagon); }
.sbt-article-corps > ol { counter-reset: n; }
.sbt-article-corps > ol > li { counter-increment: n; }
.sbt-article-corps > ol > li::before { content: counter(n); position: absolute; left: 12px; top: 9px; font-weight: 700; color: var(--lagon); }
.sbt-article-corps table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.4em 0; font-size: 16px; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--filet); display: block; overflow-x: auto; }
.sbt-article-corps th { background: var(--petrole); color: #fff; text-align: left; padding: 12px 14px 10px; font-weight: 600; }
.sbt-article-corps td { padding: 11px 14px 9px; border-top: 1px solid var(--filet); background: #fff; }
.sbt-article-corps tr:nth-child(even) td { background: var(--ecume); }
.sbt-article-corps a { color: var(--lagon); font-weight: 600; }
.ech-a-lire-t { font-family: var(--titre); font-weight: 400; font-size: 34px; color: var(--petrole); }
.sbt-a-lire .sbt-carte img { aspect-ratio: 16 / 10; }
.sbt-carte-corps h3 { font-family: var(--texte); font-weight: 600; font-size: 18px; color: var(--petrole); line-height: 1.3; }
.sbt-rail-carte { background: #fff; border-radius: var(--r); box-shadow: var(--ombre); }
.ech-rail-prevenir { padding: 18px; background: var(--petrole) !important; color: #E7F2EF; }
.ech-rail-titre { font-family: var(--titre); font-size: 26px; color: #fff; margin: 0 0 4px; line-height: 1.1; }
.ech-rail-texte { font-size: 15px; color: #C7DEDA; margin-bottom: 10px; }
.ech-rail-prevenir .ech-prevenir { grid-template-columns: 1fr; }
.ech-rail-prevenir .ech-champ span, .ech-rail-prevenir .ech-rgpd, .ech-rail-prevenir .ech-rgpd a { color: #C7DEDA; }
.ech-rail-prevenir .ech-champ input { min-height: 44px; }
.ech-lecture-barre { position: fixed; left: 0; right: 0; top: var(--entete); height: 4px; z-index: 49; background: transparent; }
.ech-lecture-barre i { display: block; height: 100%; width: 0; background: var(--wax-fonce); }
.ech-restant { position: fixed; right: 18px; bottom: 18px; z-index: 48; margin: 0; padding: 10px 16px 8px; border-radius: 999px; background: var(--petrole); color: #fff; font-size: 14.5px; font-weight: 600; box-shadow: var(--ombre); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.ech-restant.on { opacity: 1; transform: none; }

/* ── Pied de page (bloc figé, habillage) ── */
.sbt-footer { background: var(--petrole) !important; color: #C7DEDA; }
.sbt-footer a { color: #E7F2EF !important; }
.sbt-footer-logo { display: inline-flex !important; align-items: center; gap: 10px; font-family: var(--titre) !important; font-size: 30px !important; color: #fff !important; }
.sbt-footer-logo img { width: 40px; height: 40px; }
.sbt-footer .sbt-t4, .sbt-footer .sbt-t3 { color: #fff !important; font-family: var(--texte); }
.sbt-footer-desc, .sbt-footer-bas { color: #A9C8C3 !important; }
.sbt-footer-cta { background: #12474E !important; border-radius: var(--r-grand) !important; }
.sbt-footer-cta .sbt-btn { background: var(--wax) !important; color: var(--petrole) !important; border-radius: 999px; }

/* ── Tablette ── */
@media (max-width: 1180px) {
	.ech-nav { gap: 18px; }
	.ech-nav a:not(.ech-btn) { font-size: 16px; }
	.ech-rail { grid-auto-columns: calc((100% - 2 * 22px) / 3); }
	.ech-grille-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ech-carnet { width: calc(100% + 48px); }
}
@media (max-width: 980px) {
	:root { --entete: 64px; }
	.ech-menu-bouton { display: flex; flex-direction: column; justify-content: center; gap: 6px; margin-left: auto; width: 48px; height: 48px; border: 0; border-radius: 12px; background: var(--verre); cursor: pointer; padding: 0 12px; }
	.ech-menu-bouton span:not(.ech-vh) { display: block; height: 2px; background: var(--petrole); border-radius: 2px; }
	.ech-nav { display: none; position: absolute; left: 0; right: 0; top: var(--entete); flex-direction: column; align-items: stretch; gap: 0; background: var(--ecume); padding: 8px var(--g) 20px; box-shadow: 0 20px 30px -20px rgba(14,58,64,.4); }
	.ech-menu-ouvert .ech-nav { display: flex; }
	.ech-nav a:not(.ech-btn) { padding: 14px 0; border-bottom: 1px solid var(--filet); }
	.ech-nav-action { margin-top: 14px; }
	.ech-logo-nom { font-size: 26px; }
	.ech-hero { display: flex; flex-direction: column; min-height: 0; }
	.ech-hero-texte { display: contents; }
	.ech-hero h1 { order: 1; padding: 20px var(--g) 0; font-size: clamp(36px, 8.6vw, 56px); margin-bottom: 8px; }
	.ech-hero-chapo { order: 2; padding: 0 var(--g); font-size: 17px; margin-bottom: 12px; }
	.ech-hero-visuel { order: 3; min-height: 0; height: clamp(190px, 46vw, 340px); }
	.ech-hero-photo { inset: 0; -webkit-mask: none; mask: none; border-radius: 0 0 0 0; }
	.ech-hero-visuel .ech-surpiqure, .ech-etiquette-taille { display: none; }
	.ech-hero .ech-carnet, .ech-hero--page .ech-carnet { order: 4; width: auto; max-width: none; margin: -54px var(--g) 28px; }
	.ech-hero--page .sbt-fil-ariane { order: 0; padding: 8px var(--g) 0; }
	.ech-eaux, .ech-grille-3 { grid-template-columns: 1fr; }
	.ech-lecture, .ech-faq-accueil, .ech-capture, .ech-liste-tete-in, .ech-fiche-in, .ech-contact-in, .ech-art-entete, .ech-equipe { grid-template-columns: minmax(0, 1fr); }
	.ech-lecture-dessin { max-width: 420px; width: 100%; margin-inline: auto; }
	.ech-grille-liste, .ech-grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ech-carte--une { grid-column: 1 / -1; grid-row: auto; }
	.ech-bande-tete { grid-template-columns: 1fr; }
	.ech-bande-tete .ech-lien-fort { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 12px; }
	.ech-art-une { margin-top: 0; }
	.ech-capture--clair .ech-btn { justify-self: start; }
	.ech-liste-photo { max-height: 260px; }
	.ech-fiche-photo { min-height: 0; max-height: 460px; }
}
/* ── Mobile ── */
@media (max-width: 640px) {
	body { font-size: 17px; }
	.ech-hero-chapo { display: none; }
	.ech-carnet { padding: 16px 16px 14px; border-radius: 22px; }
	.ech-carnet-titre { font-size: 23px; }
	.ech-q legend { font-size: 17px; margin-bottom: 10px; }
	.ech-choix--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.ech-choix button { font-size: 15px; min-height: 52px; padding: 10px 6px 8px; }
	.ech-choix--2 { grid-template-columns: 1fr 1fr; }
	.ech-carnet-ligne { grid-template-columns: 1fr 1fr; gap: 8px; }
	.ech-rail { grid-auto-columns: 74%; }
	.ech-grille-liste, .ech-grille-4 { grid-template-columns: 1fr; }
	.ech-prevenir { grid-template-columns: 1fr; }
	.ech-membre { grid-template-columns: 1fr; }
	.ech-auteur-in { grid-template-columns: 1fr; gap: 18px; }
	.ech-auteur-photo { width: 160px; height: 160px; }
	.ech-contact-in { padding-block: 12px 24px; gap: 14px; }
	.ech-contact-texte h1 { font-size: 36px; margin-bottom: 6px; }
	.ech-contact-texte p { font-size: 16px; margin-bottom: 0; }
	.ech-contact .sbt-fil-ariane { display: none; }
	.ech-contact-photo { height: 96px; max-height: 96px; aspect-ratio: auto; margin-top: 10px; border-radius: 16px 16px 16px 40px; }
	.ech-contact-form { padding: 16px; }
	.ech-contact-form .ech-champ textarea { min-height: 76px; }
	.ech-art-entete h1 { font-size: 34px; }
	.ech-restant { right: 12px; bottom: 12px; }
	.sbt-article-principal { padding: 18px; border-radius: 20px; }
	.ech-repere { font-size: 12.5px; padding: 6px 9px 4px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

.ech-carte-sans { display: grid; place-items: center; width: 100%; height: 100%; background: var(--verre); }
.ech-carte-sans svg { width: 30%; height: 60%; }

/* ── Blocs de contenu des pages et fiches ── */
.ech-panneau.sbt-article-corps { border-radius: var(--r-grand); padding: clamp(24px, 3.4vw, 48px); box-shadow: 0 12px 30px -24px rgba(14,58,64,.4); }
.ech-bande--blanc .ech-panneau { background: var(--ecume); box-shadow: none; }
.ech-page-corps, .ech-fiche-corps { margin-inline: auto; }
.sbt-article-corps > :first-child { margin-top: 0; }
.ech-blocs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 1.2em 0 1.6em; }
.ech-bloc { background: #fff; border-radius: 18px; padding: 18px 18px 14px; box-shadow: 0 10px 24px -18px rgba(14,58,64,.45); border-top: 4px solid var(--lagon); }
.ech-bloc:nth-child(2) { border-top-color: var(--wax-fonce); }
.ech-bloc:nth-child(3) { border-top-color: var(--petrole); }
.ech-bloc-t { font-weight: 700; color: var(--petrole); margin: 0 0 6px !important; font-size: 17px; }
.ech-bloc p:last-child { margin: 0; font-size: 16px; line-height: 1.5; color: var(--doux); }
.ech-encadre { margin: 1.6em 0; padding: 20px 22px 16px 22px; border-radius: 18px 18px 18px 60px / 18px 18px 18px 40px; background: var(--petrole); color: #E7F2EF; }
.ech-encadre-t { font-family: var(--titre); font-size: 26px; color: #fff; margin: 0 0 6px !important; }
.ech-encadre p:last-child { margin: 0; color: #D2E6E2; font-size: 16.5px; }
.ech-encadre a { color: var(--wax) !important; }
@media (max-width: 760px) { .ech-blocs { grid-template-columns: 1fr; } }

.ech-surpiqure-svg { position: absolute; inset: 0 0 0 56px; width: calc(100% - 56px); height: 100%; pointer-events: none; z-index: 2; overflow: hidden; }
.ech-surpiqure-svg ellipse { fill: none; stroke: var(--wax); stroke-width: 2.4; stroke-dasharray: 8 7; vector-effect: non-scaling-stroke; }
@media (max-width: 980px) { .ech-surpiqure-svg { display: none; } }

@media (max-width: 980px) {
	.ech-fiche-in { display: flex; flex-direction: column; gap: 18px; padding-top: 12px; }
	.ech-fiche-texte { display: contents; }
	.ech-fiche-texte .sbt-fil-ariane { order: 0; padding: 0; }
	.ech-fiche-visuel { order: 1; }
	.ech-fiche-photo { aspect-ratio: auto; height: 210px; min-height: 0; }
	.ech-fiche-plat { width: 96px; right: 10px; bottom: 10px; padding: 8px 8px 4px; }
	.ech-fiche-texte .ech-etiquette { order: 2; align-self: flex-start; margin: 0; }
	.ech-fiche-texte h1 { order: 3; font-size: 44px; margin: -8px 0 0; }
	.ech-fiche-pour { order: 4; font-size: 17px; margin: -8px 0 0; }
	.ech-fiche-action { order: 5; padding: 16px; }
	.ech-fiche-note { display: none; }
	.ech-fiche-jauges { order: 6; }
	.ech-coupe-eaux--fiche { order: 7; }
}

@media (max-width: 980px) {
	.ech-fiche-in { align-items: stretch; }
	.ech-fiche-visuel, .ech-fiche-photo { width: 100%; }
	.ech-fiche-texte h1 { text-align: left; }
	.ech-art-entete { display: flex; flex-direction: column; gap: 0; }
	.ech-art-une { order: -1; margin: 12px 0 4px; }
	.ech-art-une .sbt-article-une-cadre { aspect-ratio: auto; height: 200px; max-height: 200px; }
	.ech-art-bande { background: var(--verre); }
	.ech-art-entete .sbt-article-entete { padding-bottom: 20px; }
	.ech-art-entete .sbt-article-chapo { font-size: 17px; margin-top: 10px; }
	.ech-art-entete .sbt-article-meta { margin-top: 12px; }
}

/* Tableaux et sources hérités : lisibles et contenus dans la colonne */
.sbt-article-corps table th, .sbt-article-corps .sbs_tableau th { background: var(--petrole) !important; color: #fff !important; }
.sbt-article-corps .sbsrc-f64964ba__tbl, .sbt-article-corps .sbs_tableau { max-width: 100%; overflow-x: auto; }
.sbt-article-corps li, .sbt-article-corps p, .sbt-article-corps td { overflow-wrap: anywhere; }
@media (max-width: 640px) {
	.sbt-article-corps table { display: table; table-layout: fixed; width: 100%; font-size: 14px; }
	.sbt-article-corps th, .sbt-article-corps td { padding: 8px 6px 6px; word-break: break-word; hyphens: auto; }
}

/* « La coupe qui va avec » : fiche patron posée dans l'article */
.ech-coupe-liee { margin: 2em 0; }
.ech-coupe-liee a { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px 22px 18px 18px; border-radius: 20px 20px 20px 64px / 20px 20px 20px 44px; background: var(--verre); text-decoration: none !important; color: var(--encre); outline: 1.5px dashed var(--verre-fort); outline-offset: -8px; transition: transform .2s ease; font-weight: 400 !important; }
.ech-coupe-liee a:hover { transform: translateY(-2px); }
.ech-coupe-liee-plat { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: #fff; box-shadow: var(--ombre); }
.ech-coupe-liee-plat svg { width: 64%; height: 64%; }
.ech-coupe-liee figcaption { display: flex; flex-direction: column; gap: 4px; }
.ech-coupe-liee-sur { font-size: 14px; color: var(--doux); }
.ech-coupe-liee strong { font-family: var(--titre); font-weight: 400; font-size: 32px; line-height: 1.05; color: var(--petrole); }
.ech-coupe-liee-pour { font-size: 16px; color: var(--doux); }
@media (max-width: 640px) { .ech-coupe-liee a { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; } .ech-coupe-liee-plat { width: 84px; height: 84px; } .ech-coupe-liee strong { font-size: 26px; } }

/* Journal : à la une, bandes par rubrique, index par date */
.ech-journal-une { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: 24px; }
.ech-journal-une .ech-carte--une { grid-row: span 2; grid-column: 1; }
.ech-rail--articles { grid-auto-columns: calc((100% - 3 * 22px) / 4); }
.ech-journal-rub { padding-block: clamp(40px, 4.4vw, 64px); }
.ech-index { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 48px; }
.ech-index li { break-inside: avoid; border-bottom: 1px solid rgba(255,255,255,.14); }
.ech-index a { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; padding: 11px 0 9px; color: #E7F2EF; text-decoration: none; }
.ech-index a:hover span { color: var(--wax); }
.ech-index time { font-size: 14px; color: #A9C8C3; font-variant-numeric: tabular-nums; padding-top: 2px; }
.ech-index span { font-weight: 600; font-size: 16.5px; line-height: 1.35; }
.ech-index em { grid-column: 2; font-style: normal; font-size: 13.5px; color: var(--verre-fort); }
@media (max-width: 980px) { .ech-journal-une { grid-template-columns: 1fr; } .ech-journal-une .ech-carte--une { grid-row: auto; } .ech-index { columns: 1; } .ech-rail--articles { grid-auto-columns: 70%; } }
@media (max-width: 640px) {
	.ech-contact-in { padding-block: 8px 20px; gap: 10px; }
	.ech-contact-texte h1 { font-size: 32px; margin-bottom: 4px; }
	.ech-contact-texte p { font-size: 15px; line-height: 1.4; }
	.ech-contact-photo { height: 64px; max-height: 64px; margin-top: 8px; }
	.ech-contact-form { padding: 14px 14px 12px; }
	.ech-contact-form .ech-carnet-titre { font-size: 22px; margin-bottom: 8px; }
	.ech-contact-form .ech-champ { margin-bottom: 8px; }
	.ech-contact-form .ech-champ span { margin-bottom: 2px; font-size: 13px; }
	.ech-contact-form .ech-champ input, .ech-contact-form .ech-champ select { min-height: 44px; padding-block: 10px 8px; }
	.ech-contact-form .ech-champ textarea { min-height: 64px; }
}