/*
 * Sentinel — CSS du design system « Le plan anti-moustique »,
 * porté fidèlement et adapté aux classes Gutenberg.
 *
 * Sources : design-system/tokens/*.css, components/*, templates/*.
 * Aucun style inventé : toutes les valeurs proviennent du design system
 * (les rares extensions pragmatiques du DS — bouton pilule, champ pilule —
 * y sont signalées comme telles et reprises ici à l'identique).
 *
 * Sommaire :
 *   1. Tokens (couleurs, typographie, espacement, rayons, mouvement)
 *   2. Base (body, titres, liens)
 *   3. Gabarit (conteneur 1240px, marges latérales)
 *   4. En-tête de site (SiteNav)
 *   5. Pied de page (SiteFooter)
 *   6. Motifs signature (surtitre à puce, lien d'action + cercle-flèche, badge)
 *   7. Composants (carte d'article, newsletter, cadre photo, étape, équipe, citation, mission, héro)
 *   8. Adaptations des blocs natifs Gutenberg
 *   9. Gabarits d'article (single) et listes (index/archive)
 *  10. Responsive
 */

/* ============================================================
   1. TOKENS — copiés depuis design-system/tokens/
   Les fontes sont déclarées par theme.json (fontFace) ;
   --font-sans pointe vers le preset Gutenberg correspondant.
   ============================================================ */

:root {
	/* — Base (charte, valeurs HEX officielles charte-B.pdf p.4) — */
	--navy: #173b4f;        /* RVB 23 59 79 · CMJN 100 65 40 46 */
	--yellow: #f0ff00;      /* RVB 240 255 0 · CMJN 0 0 100 0 */
	--turquoise: #6dd8d6;   /* RVB 109 216 214 · CMJN 45 0 8 0 */

	/* — Neutres (dérivés des maquettes) — */
	--white: #ffffff;
	--off-white: #f6f5f1;     /* fond de panneau clair des maquettes */
	--gray-400: #bebebe;      /* éléments de nav inactifs */
	--black: #000000;

	/* — Déclinaisons navy (états & surfaces) — */
	--navy-700: #122f3f;      /* hover des aplats navy */
	--navy-100: #e2e9ed;      /* surface navy très claire */
	--turquoise-100: #e5f8f7; /* surface turquoise très claire */

	/* — Alias sémantiques — */
	--text-heading: var(--navy);
	--text-body: var(--navy);
	--text-muted: color-mix(in oklab, var(--navy) 62%, white);
	--text-on-dark: var(--white);
	--text-on-accent: var(--navy);   /* le navy lit parfaitement sur jaune & turquoise */

	--surface-page: var(--white);
	--surface-panel: var(--off-white);
	--surface-card-accent: var(--yellow);     /* panneau newsletter */
	--surface-dark: var(--navy);

	--accent: var(--yellow);
	--accent-2: var(--turquoise);
	--link: var(--navy);
	--link-on-photo: var(--yellow);

	--border-subtle: color-mix(in oklab, var(--navy) 14%, white);
	--focus-ring: var(--turquoise);

	/* — Typographie (échelle maquette 1440 → rem) — */
	--font-sans: var(--wp--preset--font-family--galano-grotesque, "Galano Grotesque", "Poppins", "Century Gothic", sans-serif);
	--weight-medium: 500;
	--weight-bold: 700;

	--text-hero: clamp(3.5rem, 6.8vw, 6.125rem);  /* 98px — héro */
	--text-h2: clamp(2.25rem, 3.5vw, 3.1875rem);  /* 51px — titre de section */
	--text-h3: 1.6875rem;                          /* 27px — sous-titre / panneau */
	--text-body: 1.4375rem;                        /* 23px — paragraphe maquette */
	--text-body-sm: 1.0625rem;                     /* 17px — paragraphe dense */
	--text-label: 0.75rem;                         /* 12px — nav, liens d'action */
	--text-eyebrow: 0.5625rem;                     /* 9px — surtitres */

	--leading-tight: 1.0;     /* héro */
	--leading-heading: 1.02;
	--leading-body: 1.45;

	--tracking-caps: 0.08em;  /* labels & nav en capitales */
	--tracking-eyebrow: 0.14em;
	--tracking-heading: -0.01em;

	/* — Espacement (base 4) — */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;

	/* — Gabarit page (maquette 1440) — */
	--page-max: 1240px;
	--page-margin: clamp(24px, 7vw, 100px);
	--grid-gap: 24px;

	/* — Rayons — */
	--radius-card: 19px;     /* cartes, photos d'article */
	--radius-photo: 30px;    /* grands cadres photo pleine page */
	--radius-pill: 999px;    /* boutons cercle & pastilles */

	/* — Ombres : la marque n'en utilise quasiment pas ; aplats nets — */
	--shadow-none: none;
	--shadow-soft: 0 8px 28px rgba(23, 59, 79, 0.10); /* réservé aux overlays */

	/* — Mouvement : sobre, fondus / translations courtes — */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--duration-fast: 150ms;
	--duration-base: 250ms;
}

/* ============================================================
   2. BASE
   ============================================================ */

body {
	margin: 0;
	background: var(--surface-page);
	font-family: var(--font-sans);
	font-weight: var(--weight-medium);
	color: var(--text-body);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--text-heading);
	font-weight: var(--weight-bold);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
	margin: 0;
}

a {
	color: var(--link);
}

img {
	max-width: 100%;
	height: auto;
}

:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

::selection {
	background: var(--yellow);
	color: var(--navy);
}

/* ============================================================
   3. GABARIT — conteneur ~1240px centré, marges latérales généreuses
   ============================================================ */

.site-conteneur {
	max-width: var(--page-max);
	margin: 0 auto;
	padding: 0 var(--page-margin);
}

/* ============================================================
   4. EN-TÊTE DE SITE — composant SiteNav
   Marque écrite à gauche, liens en capitales espacées,
   item actif en Bold.
   ============================================================ */

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 34px 0;
}

.site-header__marque {
	display: inline-flex;
	align-items: center;
	color: var(--navy);
	text-decoration: none;
}

/* Logotype Mosqity — rendu en masque monochrome (SVG « currentColor » du brand
   book) : la teinte vient de `color` du parent (navy en nav, jaune en footer),
   jamais bi-couleur. Zone de respiration et taille mini ≈ 24px respectées. */
.mosqity-logo {
	display: block;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: left center;
	mask-position: left center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.mosqity-logo--principal {
	width: 81px; /* 40 × 510.16/252.05 */
	height: 40px;
	-webkit-mask-image: url( ../img/mosqity-logo.svg );
	mask-image: url( ../img/mosqity-logo.svg );
}

.mosqity-logo--q {
	width: 31px; /* 34 × 245.25/278.56 */
	height: 34px;
	-webkit-mask-image: url( ../img/mosqity-q.svg );
	mask-image: url( ../img/mosqity-q.svg );
}

.site-header__nav ul {
	display: flex;
	align-items: center;
	gap: 38px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header__nav a {
	font-size: var(--text-label);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	text-decoration: none;
	font-weight: var(--weight-medium);
	color: var(--navy);
}

.site-header__nav .current-menu-item > a,
.site-header__nav .current_page_item > a,
.site-header__nav .current-page-ancestor > a,
.site-header__nav .current-page-parent > a {
	font-weight: var(--weight-bold);
}

/* CTA « Mon diagnostic » en bouton pilule jaune dans la nav. */
.site-header__nav .menu-item-cta a {
	padding: 10px 22px;
	border-radius: var(--radius-pill);
	background: var(--yellow);
	color: var(--navy);
	font-weight: var(--weight-bold);
	transition: background var(--duration-fast) var(--ease-out);
}
.site-header__nav .menu-item-cta a:hover {
	background: #e2f000;
}

/* Bascule mobile — extension pragmatique, la charte ne définit pas de
   comportement mobile. Formes du DS uniquement (cercle navy, traits blancs). */
.site-header__bascule {
	display: none;
	width: 48px;
	height: 48px;
	border: none;
	border-radius: var(--radius-pill);
	background: var(--navy);
	color: var(--white);
	cursor: pointer;
	font-size: var(--text-label);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

/* ============================================================
   5. PIED DE PAGE — composant SiteFooter
   Bloc navy arrondi : bandeau photo en tête, marque écrite en jaune,
   coordonnées blanches en capitales.
   ============================================================ */

.site-footer {
	/* Respiration avant le pied de page : la maquette la porte sur le
	   margin-bottom du dernier bloc (110px) ; ici on la pose sur le footer
	   pour couvrir les pages dont le dernier bloc n'en a pas (hub de rubrique,
	   accueil…). Les marges fusionnent avec .site-conteneur : pas de double
	   espacement sur les pages d'article qui ont déjà leur .sentinel-section--fin. */
	margin-top: 110px;
	padding: 0 var(--page-margin) 40px;
}

.site-footer__panneau {
	max-width: var(--page-max);
	margin: 0 auto;
	background: var(--navy);
	border-radius: var(--radius-photo);
	overflow: hidden;
}

.site-footer__bandeau {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}

.site-footer__contenu {
	padding: 52px 60px 30px;
	color: var(--white);
}

/* Grille du pied : bloc marque (logo jaune + baseline + social) + 3 colonnes
   de liens éditoriaux. Sans e-commerce (ni colonne Boutique, ni badges de
   réassurance commerciale, ni CGV du modèle du design system). */
.site-footer__grille {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 40px;
}

.site-footer__marque-bloc {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.site-footer__marque {
	display: inline-flex;
	color: var(--yellow);
	text-decoration: none;
}

/* Logo un peu plus présent au pied (comme la maquette). */
.site-footer__marque .mosqity-logo--principal {
	width: 93px; /* 46 × 510.16/252.05 */
	height: 46px;
}

.site-footer__baseline {
	margin: 0;
	max-width: 30ch;
	font-size: 15px;
	line-height: 1.5;
	font-weight: var(--weight-medium);
	color: var(--white);
	opacity: 0.75;
}

.site-footer__social {
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__social a {
	font-size: 11px;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--yellow);
	font-weight: var(--weight-medium);
	text-decoration: none;
}

.site-footer__colonne p,
.site-footer__colonne ul {
	margin: 0;
	padding: 0;
}

.site-footer__colonne ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 16px;
}

.site-footer__colonne-titre {
	font-size: 11px;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--yellow);
	font-weight: var(--weight-bold);
}

.site-footer__colonne a {
	font-size: 14px;
	color: var(--white);
	opacity: 0.85;
	font-weight: var(--weight-medium);
	text-decoration: none;
}

.site-footer__colonne a:hover {
	opacity: 1;
}

.site-footer__filet {
	border: 0;
	height: 1px;
	background: rgba( 255, 255, 255, 0.18 );
	margin: 40px 0 24px;
}

.site-footer__bas {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.site-footer__legal {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__legal a,
.site-footer__copyright {
	margin: 0;
	font-size: 10px;
	letter-spacing: var(--tracking-caps);
	color: var(--white);
	opacity: 0.6;
	font-weight: var(--weight-medium);
	text-transform: uppercase;
	text-decoration: none;
}

@media (max-width: 1023px) {
	.site-footer__contenu {
		padding: 44px 32px 28px;
	}
	.site-footer__grille {
		grid-template-columns: 1fr 1fr;
	}
	.site-footer__marque-bloc {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.site-footer__bandeau {
		height: 140px;
	}
	.site-footer__contenu {
		padding: 36px 24px 24px;
	}
	.site-footer__grille {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.site-footer__bas {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ============================================================
   6. MOTIFS SIGNATURE
   ============================================================ */

/* — Surtitre à puce (Eyebrow) : « ● NOTRE MISSION » —
   Disque navy sur fond clair, jaune sur photo/sombre. */
.sentinel-surtitre {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 11px;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	font-weight: var(--weight-medium);
	color: var(--navy);
}

.sentinel-surtitre::before {
	content: "";
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--navy);
	flex: none;
}

.sentinel-surtitre--jaune::before { background: var(--yellow); }
.sentinel-surtitre--turquoise::before { background: var(--turquoise); }
.sentinel-surtitre--inverse { color: var(--white); }
.sentinel-surtitre--inverse::before { background: var(--yellow); }

/* — Lien d'action (TextLink) : capitales espacées, soulignement au survol — */
.sentinel-lien-action {
	margin: 0;
}

.sentinel-lien-action a {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: var(--text-label);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	font-weight: var(--weight-medium);
	color: var(--navy);
	text-decoration: none;
	border-bottom: 1.5px solid transparent;
	padding-bottom: 2px;
	transition: border-color var(--duration-fast) var(--ease-out);
}

.sentinel-lien-action a:hover {
	border-bottom-color: currentColor;
}

/* — Lien d'action avec bouton cercle-flèche (CircleButton ≈48px, 34px en ligne).
   Flèche → en caractère, conformément à l'iconographie de la charte
   (formes dessinées en pur CSS/caractères). — */
.sentinel-lien-action--fleche a {
	border-bottom: none;
	padding-bottom: 0;
}

.sentinel-lien-action--fleche a::after {
	content: "\2192"; /* → */
	width: 34px;
	height: 34px;
	border-radius: var(--radius-pill);
	background: var(--navy);
	color: var(--yellow);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	flex: none;
	transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.sentinel-lien-action--fleche a:hover::after {
	background: var(--navy-700);
	transform: translateX(2px);
}

/* Tonalités : jaune sur photo sombre, blanc, navy par défaut. */
.sentinel-lien-action--jaune a { color: var(--yellow); }
.sentinel-lien-action--jaune.sentinel-lien-action--fleche a::after {
	background: var(--yellow);
	color: var(--navy);
}
.sentinel-lien-action--jaune.sentinel-lien-action--fleche a:hover::after { background: #e2f000; }

.sentinel-lien-action--blanc a { color: var(--white); }
.sentinel-lien-action--blanc.sentinel-lien-action--fleche a::after {
	background: var(--white);
	color: var(--navy);
}
.sentinel-lien-action--blanc.sentinel-lien-action--fleche a:hover::after { background: var(--yellow); }

/* — Badge pilule contouré (tag des cartes d'article) — */
.sentinel-badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin: 0;
	padding: 7px 16px;
	border: 1.5px solid var(--navy);
	border-radius: var(--radius-pill);
	color: var(--navy);
	font-size: 11px;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	font-weight: var(--weight-medium);
	white-space: nowrap;
}

.sentinel-badge--inverse {
	border-color: var(--white);
	color: var(--white);
}

/* — Pictogrammes de rubrique (SVG inline, héritent de currentColor) — */
.sentinel-picto {
	display: inline-flex;
	flex: none;
	width: 1.4em;
	height: 1.4em;
	line-height: 0;
	vertical-align: middle;
}
.sentinel-picto svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* Picto à gauche du libellé, dans le badge pilule. */
.sentinel-badge {
	gap: 6px;
}
.sentinel-badge .sentinel-picto {
	margin-left: -2px; /* compense l'air interne du picto */
}

/* Picto de hub : médaillon navy, picto jaune, posé au-dessus du titre. */
.sentinel-hub-picto {
	margin: 56px 0 20px;
	line-height: 0;
}
.sentinel-hub-picto + .sentinel-titre-page {
	margin-top: 0;
}
.sentinel-picto--hub {
	width: 76px;
	height: 76px;
	border-radius: var(--radius-pill);
	background: var(--navy);
	color: var(--yellow);
}

/* ============================================================
   7. COMPOSANTS
   ============================================================ */

/* — Héro (maquette accueil) : 98px Bold navy, interlignage 1.0 — */
.sentinel-hero {
	margin: 56px 0 96px;
	font-size: var(--text-hero);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-heading);
	max-width: 11ch;
	text-wrap: balance;
}

/* — Héro (Cover) : photo en fond, voile navy + dégradé, titre blanc,
   sous-titre jaune et CTA pilule posés en bas à gauche. Aligné sur la grille
   1240px comme les cartes et arrondi au même rayon (--radius-photo) ; large
   respiration avant la grille des derniers articles. — */
.wp-block-cover.sentinel-hero-cover {
	margin: 8px 0 var(--space-10);
	min-height: clamp(460px, 72vh, 680px);
	border-radius: var(--radius-photo);
	overflow: hidden;
	align-items: flex-end;        /* contenu posé en bas… */
	justify-content: flex-start;  /* …à gauche (idem .sentinel-cadre-photo) */
}

/* Dégradé de lisibilité (coin bas-gauche), par-dessus le voile navy du bloc. */
.wp-block-cover.sentinel-hero-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(72deg, rgba(18, 47, 63, 0.80) 0%, rgba(18, 47, 63, 0.32) 44%, rgba(18, 47, 63, 0) 72%),
		linear-gradient(to top, rgba(18, 47, 63, 0.62) 0%, rgba(18, 47, 63, 0) 50%);
}

/* Contenu posé en retrait des bords arrondis (idiome .sentinel-cadre-photo).
   z-index en !important : le cœur de WP force .wp-block-cover__inner-container
   à z-index:1 via un sélecteur très spécifique (body … :not(:has(…))), ce qui
   sinon laisse le dégradé ::after (z-index:1, peint après) voiler le contenu. */
.wp-block-cover.sentinel-hero-cover > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2 !important;
	width: 100%;
	margin: 0;
	padding: clamp(40px, 6vw, 72px) clamp(32px, 5vw, 64px);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.sentinel-hero-cover__titre {
	color: var(--white);
	font-size: clamp(2.5rem, 5.2vw, 4.5rem);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-heading);
	max-width: 17ch;
	text-wrap: balance;
	margin: 0;
}

.sentinel-hero-cover__accroche {
	color: var(--yellow);
	font-size: var(--text-h3);
	line-height: var(--leading-heading);
	max-width: 32ch;
	margin: 0;
}

.sentinel-hero-cover .wp-block-buttons {
	margin: 0;
}

/* — Titre de page intérieure (maquette démarche) : 51px, 16ch — */
.sentinel-titre-page {
	margin: 56px 0 72px;
	font-size: var(--text-h2);
	line-height: var(--leading-heading);
	max-width: 16ch;
	text-wrap: balance;
}

/* — En-tête de section : surtitre + titre 51px — */
.sentinel-entete-section {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin: 0 0 40px;
}

.sentinel-entete-section h2 {
	font-size: var(--text-h2);
	line-height: var(--leading-heading);
	max-width: 16ch;
}

/* — Grille de cartes : gouttières 24px — */
.sentinel-grille {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--grid-gap);
	align-items: stretch;
}

.sentinel-grille--quatre { grid-template-columns: repeat(4, 1fr); }

/* Adaptation wp:columns utilisées dans les compositions. */
.wp-block-columns.sentinel-grille {
	display: flex; /* on laisse le comportement natif des colonnes… */
	gap: var(--grid-gap); /* …mais avec la gouttière de la maquette. */
}

/* — Carte d'article (ArticleCard) : bloc plein arrondi, badge pilule,
   extrait justifié, photo en pied avec lien blanc + cercle-flèche — */
.sentinel-carte-article {
	display: flex;
	flex-direction: column;
	background: var(--navy);
	border-radius: var(--radius-photo);
	overflow: hidden;
}

.sentinel-carte-article__texte {
	padding: 26px 26px 30px;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.sentinel-carte-article .sentinel-badge {
	border-color: var(--white);
	color: var(--white);
}

.sentinel-carte-article__extrait {
	margin: 0;
	color: var(--white);
	font-size: 22px;
	line-height: 1.3;
	font-weight: var(--weight-medium);
	text-align: left;
}

.sentinel-carte-article__photo {
	position: relative;
	margin-top: auto;
	aspect-ratio: 0.97 / 1;
	background: var(--navy-700); /* repli si pas d'image à la une */
}

.sentinel-carte-article__photo img,
.sentinel-carte-article__photo figure {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.sentinel-carte-article__photo figure img { position: static; }

.sentinel-carte-article__photo .sentinel-lien-action {
	position: absolute;
	left: 22px;
	right: 18px;
	bottom: 18px;
}

.sentinel-carte-article__photo .sentinel-lien-action a {
	width: 100%;
	justify-content: space-between;
	font-size: 13px;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
	/* Le cercle-flèche animé suffit comme affordance : pas de trait au survol. */
	border-bottom: none;
	padding-bottom: 0;
}

.sentinel-carte-article__photo .sentinel-lien-action a::after {
	content: "\2192";
	width: 56px;
	height: 56px;
	border-radius: var(--radius-pill);
	background: var(--white);
	color: var(--navy);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 21px;
	text-shadow: none;
	flex: none;
	transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.sentinel-carte-article__photo .sentinel-lien-action a:hover::after {
	background: var(--yellow);
	transform: translateX(2px);
}

/* Variante jaune (accent, parcimonieux) : texte navy, cercle navy. */
.sentinel-carte-article--jaune { background: var(--yellow); }
.sentinel-carte-article--jaune .sentinel-badge {
	border-color: var(--navy);
	color: var(--navy);
}
.sentinel-carte-article--jaune .sentinel-carte-article__extrait { color: var(--navy); }
.sentinel-carte-article--jaune .sentinel-carte-article__photo .sentinel-lien-action a::after {
	background: var(--navy);
	color: var(--yellow);
}
.sentinel-carte-article--jaune .sentinel-carte-article__photo .sentinel-lien-action a:hover::after {
	background: var(--navy-700);
}

/* — Panneau newsletter (NewsletterPanel) : le bloc d'accent signature.
   Jaune, texte navy, coins 19px. — */
.sentinel-newsletter {
	background: var(--yellow);
	color: var(--navy);
	border-radius: var(--radius-card);
	padding: 36px 34px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-sizing: border-box;
}

.sentinel-newsletter h3 {
	font-size: 24px;
	line-height: 1.15;
}

.sentinel-newsletter p:not(.sentinel-surtitre):not(.sentinel-lien-action) {
	margin: 0;
	font-size: 16px;
	line-height: var(--leading-body);
}

/* — Cadre photo (PhotoFrame) sur wp:cover : coins arrondis, contenu posé
   en bas, pas de voile d'assombrissement (dimRatio 0 dans les maquettes). — */
.wp-block-cover.sentinel-cadre-photo {
	border-radius: var(--radius-photo);
	overflow: hidden;
	align-items: flex-end;
	justify-content: flex-start;
}

.wp-block-cover.sentinel-cadre-photo--rayon-carte {
	border-radius: var(--radius-card);
}

.wp-block-cover.sentinel-cadre-photo .wp-block-cover__inner-container {
	margin: 0;
	padding: 36px 38px;
	max-width: 520px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-items: flex-start;
}

.wp-block-cover.sentinel-cadre-photo h2 {
	font-size: clamp(28px, 3.5vw, 51px);
	line-height: var(--leading-heading);
}

/* Photo sombre → texte jaune · photo claire → texte navy. */
.sentinel-cadre-photo--texte-jaune h2 { color: var(--yellow); }
.sentinel-cadre-photo--texte-navy h2 { color: var(--navy); }

/* — Duo de la maquette accueil : cadre photo 1.55fr + newsletter 1fr — */
.sentinel-accueil-duo {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: var(--grid-gap);
	margin: 96px 0 110px;
	align-items: stretch;
}

/* Cadre photo statique (PhotoFrame hors éditeur) : rayon 19px sur
   l'accueil, photo sombre → contenu jaune posé en bas à gauche. */
.sentinel-cadre-photo-statique {
	position: relative;
	border-radius: var(--radius-card);
	overflow: hidden;
	min-height: 460px;
	display: flex;
}

.sentinel-cadre-photo-statique img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sentinel-cadre-photo-statique__contenu {
	position: relative;
	align-self: flex-end;
	padding: 36px 38px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 520px;
}

.sentinel-cadre-photo-statique__contenu h2 {
	color: var(--yellow);
	font-size: clamp(28px, 3.5vw, 51px);
	line-height: var(--leading-heading);
}

/* — Carte d'étape numérotée (StepCard) : pastille ronde, titre Bold — */
.sentinel-etape {
	background: var(--off-white);
	color: var(--navy);
	border-radius: var(--radius-card);
	padding: 30px 28px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	box-sizing: border-box;
	height: 100%;
}

.sentinel-etape__numero {
	width: 48px;
	height: 48px;
	margin: 0;
	border-radius: var(--radius-pill);
	background: var(--yellow);
	color: var(--navy);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--weight-bold);
	font-size: 20px;
	flex: none;
}

.sentinel-etape h3 {
	font-size: 21px;
	line-height: 1.15;
}

.sentinel-etape p:not(.sentinel-etape__numero) {
	margin: 0;
	font-size: 16px;
	line-height: var(--leading-body);
}

/* Variantes navy et jaune. */
.sentinel-etape--navy {
	background: var(--navy);
	color: var(--white);
}
.sentinel-etape--navy h3 { color: var(--white); }

.sentinel-etape--jaune { background: var(--yellow); }
.sentinel-etape--jaune .sentinel-etape__numero {
	background: var(--navy);
	color: var(--yellow);
}

/* — Carte de membre d'équipe (TeamCard) : photo carrée arrondie,
   nom Bold navy, rôle en capitales espacées — */
.sentinel-membre {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sentinel-membre__photo {
	margin: 0;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--navy-100);
}

.sentinel-membre__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sentinel-membre__nom {
	font-size: 18px;
	line-height: 1.1;
	color: var(--navy);
	letter-spacing: normal;
}

.sentinel-membre__role {
	margin: 0;
	font-size: 11px;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: var(--weight-medium);
}

/* — Bloc citation (QuoteBlock) : panneau plein arrondi, grande citation
   Bold, attribution en capitales — appliqué au bloc natif wp:quote. — */
.wp-block-quote.sentinel-citation {
	margin: 0;
	border: none;
	background: var(--yellow);
	color: var(--navy);
	border-radius: var(--radius-photo);
	padding: 48px 52px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	box-sizing: border-box;
}

.wp-block-quote.sentinel-citation p {
	margin: 0;
	font-size: 27px;
	line-height: 1.25;
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-heading);
	text-wrap: pretty;
	font-style: normal;
}

.wp-block-quote.sentinel-citation cite {
	font-size: 11px;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	font-weight: var(--weight-medium);
	font-style: normal;
}

.wp-block-quote.sentinel-citation--navy {
	background: var(--navy);
	color: var(--white);
}

.wp-block-quote.sentinel-citation--claire {
	background: var(--off-white);
}

/* — Section mission (maquette démarche) : panneau blanc cassé 30px,
   grille 1.1fr 1fr 1fr — */
.sentinel-mission {
	background: var(--off-white);
	border-radius: var(--radius-photo);
	padding: 64px 72px;
	display: grid;
	grid-template-columns: 1.1fr 1fr 1fr;
	gap: var(--grid-gap);
	align-items: start;
}

.sentinel-mission__intro {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.sentinel-mission h2 {
	font-size: var(--text-h3);
	line-height: 1.25;
	letter-spacing: normal;
}

.sentinel-mission p:not(.sentinel-surtitre):not(.sentinel-lien-action) {
	margin: 0;
	font-size: 18px;
	line-height: var(--leading-body);
	color: var(--navy);
}

/* ============================================================
   8. ADAPTATIONS DES BLOCS NATIFS GUTENBERG
   ============================================================ */

/* — Bouton pilule (composant Button — extension pragmatique du DS :
   préférer le lien d'action + cercle-flèche quand le contexte le permet).
   Défaut : pilule jaune, texte navy. — */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	border-radius: var(--radius-pill);
	background: var(--yellow);
	color: var(--navy);
	border: 1.5px solid transparent;
	font-family: var(--font-sans);
	font-weight: var(--weight-medium);
	font-size: var(--text-label);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--duration-fast) var(--ease-out);
}

.wp-block-button__link:hover {
	background: #e2f000;
	color: var(--navy);
}

/* Variante navy. */
.is-style-pilule-navy .wp-block-button__link {
	background: var(--navy);
	color: var(--white);
}
.is-style-pilule-navy .wp-block-button__link:hover {
	background: var(--navy-700);
	color: var(--white);
}

/* Variante contour (ghost). */
.is-style-pilule-contour .wp-block-button__link {
	background: transparent;
	color: var(--navy);
	border-color: var(--navy);
}
.is-style-pilule-contour .wp-block-button__link:hover {
	background: var(--navy-100);
}

/* — Images : coins arrondis du DS via classes utilitaires — */
.wp-block-image.sentinel-rayon-carte img { border-radius: var(--radius-card); }
.wp-block-image.sentinel-rayon-photo img { border-radius: var(--radius-photo); }

/* — Champ pilule (composant Input — extension pragmatique) :
   contour navy fin, focus turquoise. Pour formulaires (recherche, newsletter). — */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"] {
	font-family: var(--font-sans);
	font-weight: var(--weight-medium);
	font-size: 14px;
	color: var(--navy);
	background: var(--white);
	border: 1.5px solid var(--navy);
	outline: none;
	border-radius: var(--radius-pill);
	padding: 13px 22px;
	min-width: 220px;
	box-sizing: border-box;
	transition: border-color var(--duration-fast) var(--ease-out);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="url"]:focus {
	border-color: var(--focus-ring);
}

/* — Séparateur sobre — */
hr.wp-block-separator {
	border: none;
	border-top: 1.5px solid var(--border-subtle);
}

/* ============================================================
   9. GABARITS — article (single), page, listes (index/archive)
   ============================================================ */

/* — En-tête d'article (gabarit page-article) : 780px centré — */
.sentinel-article__entete {
	max-width: 780px;
	margin: 48px auto 0;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.sentinel-article__meta {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.sentinel-article__date {
	margin: 0;
	font-size: 11px;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--navy);
	opacity: 0.55;
	font-weight: var(--weight-medium);
}

.sentinel-article__titre {
	font-size: var(--text-h2);
	line-height: 1.05;
	text-wrap: balance;
}

.sentinel-article__chapo {
	margin: 0;
	font-size: 21px;
	line-height: var(--leading-body);
}

/* — Photo d'en-tête : pleine largeur, 460px, coins 30px — */
.sentinel-article__photo {
	margin: 48px 0 64px;
}

.sentinel-article__photo img {
	width: 100%;
	height: 460px;
	object-fit: cover;
	border-radius: var(--radius-photo);
	display: block;
}

/* — Corps d'article : 720px centré, 18px/1.55 — */
.sentinel-article__corps {
	max-width: 720px;
	margin: 0 auto;
}

.sentinel-article__corps > * {
	margin: 0 0 26px;
}

/* Signature d'article (bascule Mosqity) : « Rédigé par la Mosqiteam · Relu
   par le comité scientifique ». Filet fin puis label en capitales espacées. */
.sentinel-article__signature {
	margin-bottom: 0;
	padding-top: 22px;
	border-top: 1px solid var(--border-subtle);
	font-size: var(--text-label);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	font-weight: var(--weight-medium);
	color: var(--navy);
	opacity: 0.7;
}

.sentinel-article__corps p,
.sentinel-article__corps li {
	font-size: 18px;
	line-height: 1.55;
}

.sentinel-article__corps h2 {
	font-size: var(--text-h3);
	line-height: 1.2;
	margin-top: 48px;
	letter-spacing: normal;
}

.sentinel-article__corps h3 {
	font-size: 21px;
	line-height: 1.2;
	margin-top: 32px;
}

.sentinel-article__corps ul,
.sentinel-article__corps ol {
	padding-left: 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sentinel-article__corps img {
	border-radius: var(--radius-card);
}

/* Les éléments larges du corps (citation, cover…) s'étendent à 920/1240px. */
.sentinel-article__corps .alignwide {
	max-width: 920px;
	width: calc(100vw - 2 * var(--page-margin));
	margin-left: 50%;
	transform: translateX(-50%);
}

/* — Contenu de page (page.php) : pleine largeur du conteneur,
   les compositions y posent leur propre gabarit — */
.sentinel-page__contenu > * + * {
	margin-top: 26px;
}

.sentinel-page__contenu > .sentinel-grille + *,
.sentinel-page__contenu > * + .sentinel-grille,
.sentinel-page__contenu > * + .sentinel-entete-section {
	margin-top: var(--space-9);
}

/* — Section « À lire aussi » / listes d'articles — */
.sentinel-section {
	margin: 0 0 var(--space-9);
}

.sentinel-section--fin {
	margin-bottom: 110px;
}

.sentinel-section--alire {
	margin-top: 110px;
}

/* — Pagination : capitales espacées, navy — */
.sentinel-pagination {
	margin: var(--space-8) 0;
}

.sentinel-pagination .nav-links {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.sentinel-pagination .page-numbers {
	font-size: var(--text-label);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--navy);
	font-weight: var(--weight-medium);
}

.sentinel-pagination .page-numbers.current {
	font-weight: var(--weight-bold);
}

.sentinel-pagination .page-numbers.dots {
	color: var(--gray-400);
}

/* — Gabarit GEO : grille corps + rail sommaire (Chantier A) — */
.sentinel-article__grille {
	display: grid;
	grid-template-columns: 240px minmax(0, 760px);
	gap: 56px;
	max-width: 1056px;
	margin: 0 auto;
}

.sentinel-article__grille .sentinel-article__corps {
	max-width: none;
	margin: 0;
}

.sentinel-article__rail .sentinel-sommaire {
	position: sticky;
	top: var(--space-7);
	align-self: start;
}

/* Neutralise le full-bleed des blocs larges quand il y a un rail. */
.sentinel-article__grille .sentinel-article__corps .alignwide {
	max-width: 100%;
	width: auto;
	margin-left: 0;
	transform: none;
}

/* — Sommaire — */
.sentinel-sommaire {
	border-left: 2px solid var(--yellow);
	padding-left: var(--space-4);
}
.sentinel-sommaire__titre { margin-bottom: var(--space-3); }
.sentinel-sommaire__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.sentinel-sommaire__liste a {
	text-decoration: none;
	color: var(--navy);
	font-size: var(--text-body-sm);
	line-height: 1.3;
}
.sentinel-sommaire__liste a:hover { text-decoration: underline; }

/* Le titre ne colle pas au bord haut au saut d'ancre. */
.sentinel-article__corps :is(h2, h3) { scroll-margin-top: var(--space-6); }

/* — Encadré « En bref » — */
.sentinel-en-bref {
	background: var(--surface-panel);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-card);
	padding: var(--space-5);
	margin-bottom: var(--space-6);
}
.sentinel-en-bref__titre { margin-bottom: var(--space-3); }
.sentinel-en-bref ul { margin: 0; }

/* — FAQ : accordéon natif — */
.sentinel-faq {
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-card);
	overflow: hidden;
}
.sentinel-faq > h2 { padding: var(--space-5) var(--space-5) 0; }
.sentinel-faq details {
	border-top: 1px solid var(--border-subtle);
	padding: var(--space-4) var(--space-5);
}
.sentinel-faq details:first-of-type { border-top: 0; }
.sentinel-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3);
	font-weight: var(--weight-bold);
	color: var(--navy);
}
.sentinel-faq summary::-webkit-details-marker { display: none; }
.sentinel-faq summary::after {
	content: "+";
	font-size: 1.4em;
	line-height: 1;
}
.sentinel-faq details[open] summary::after { content: "–"; }
.sentinel-faq details > *:not(summary) { margin-top: var(--space-3); }

/* — Encarts d'article (avis d'expert, focus, conseils, sources) —
   Boîte panneau + titre-surtitre dont la puce est un pictogramme de rubrique
   (mask CSS coloré, comme le picto 404). Le picto est choisi par la classe
   modificatrice ; le libellé reste éditable dans le pattern. */
.sentinel-encart {
	background: var(--surface-panel);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-card);
	padding: var(--space-5);
	margin-bottom: var(--space-6);
}
.sentinel-encart__titre {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 var(--space-3);
	font-size: 11px;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	font-weight: var(--weight-medium);
	color: var(--navy);
}
.sentinel-encart__titre::before {
	content: "";
	flex: none;
	width: 30px;
	height: 30px;
	background: var(--navy);
	-webkit-mask: var(--enc-picto, none) no-repeat center / contain;
	mask: var(--enc-picto, none) no-repeat center / contain;
}
.sentinel-encart > *:last-child { margin-bottom: 0; }
.sentinel-encart ul { margin: 0; }

.sentinel-encart--expert   { --enc-picto: url( ../img/pictos/avis-de-lexpert.svg ); }
.sentinel-encart--focus    { --enc-picto: url( ../img/pictos/focus-sur.svg ); }
.sentinel-encart--conseils { --enc-picto: url( ../img/pictos/conseils-et-astuces.svg ); }
.sentinel-encart--sources  { --enc-picto: url( ../img/pictos/autres-sources.svg ); }

/* Défilement doux vers les ancres, hors préférence de mouvement réduit. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* ============================================================
   10. RESPONSIVE — la maquette est 1440px ; en deçà, les grilles
   se replient sans changer le langage visuel.
   ============================================================ */

@media (max-width: 1024px) {
	.sentinel-grille { grid-template-columns: repeat(2, 1fr); }
	.sentinel-grille--quatre { grid-template-columns: repeat(2, 1fr); }
	.sentinel-accueil-duo { grid-template-columns: 1fr; }
	.sentinel-mission {
		grid-template-columns: 1fr;
		padding: 40px 36px;
	}
	.sentinel-article__grille {
		display: block;
		max-width: 720px;
	}
	.sentinel-article__rail .sentinel-sommaire {
		position: static;
		border-left: 0;
		padding-left: 0;
		margin-bottom: var(--space-6);
		border: 1px solid var(--border-subtle);
		border-radius: var(--radius-card);
		padding: var(--space-5);
	}
}

@media (max-width: 680px) {
	.sentinel-grille,
	.sentinel-grille--quatre { grid-template-columns: 1fr; }

	.sentinel-article__photo img { height: 320px; }

	/* Navigation repliée derrière la bascule. */
	.site-header { flex-wrap: wrap; }
	.site-header__bascule { display: inline-flex; align-items: center; justify-content: center; }
	.site-header__nav { display: none; width: 100%; }
	.site-header.est-ouvert .site-header__nav { display: block; }
	.site-header.est-ouvert .site-header__nav ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		padding: 8px 0 16px;
	}
}

/* — Fil d'Ariane : ligne de labels en capitales espacées, sous l'en-tête. — */
.sentinel-fil-ariane {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 40px 0 0;
	font-size: 11px;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	font-weight: var(--weight-medium);
	color: var(--navy);
}
.sentinel-fil-ariane a {
	color: var(--navy);
	text-decoration: none;
	opacity: 0.6;
}
.sentinel-fil-ariane a:hover {
	opacity: 1;
}
.sentinel-fil-ariane [aria-current="page"] {
	font-weight: var(--weight-bold);
}
.sentinel-fil-ariane__sep {
	opacity: 0.4;
}

/* ============================================================
   11. PAGE 404 — modèle « Page erreur »
   ============================================================ */

.sentinel-404 {
	max-width: 640px;
	margin: 0 auto;
	padding: var(--space-9) var(--page-margin) var(--space-10);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
}

.sentinel-404__picto {
	width: 104px;
	height: 104px;
	background-color: var(--navy);
	-webkit-mask: url( ../img/moustique-a.svg ) no-repeat center / contain;
	mask: url( ../img/moustique-a.svg ) no-repeat center / contain;
}

.sentinel-404 .sentinel-surtitre {
	justify-content: center;
}

.sentinel-404__titre {
	font-size: var(--text-h2);
	line-height: var(--leading-heading);
	margin: 0;
}

.sentinel-404__texte {
	max-width: 46ch;
	margin: 0;
	font-size: var(--text-body-sm);
	line-height: var(--leading-body);
	color: var(--text-muted);
}

.sentinel-404__actions {
	justify-content: center;
	margin-top: var(--space-3);
}

/* ============================================================
   12. CONTACT / DIAGNOSTIC & RÉSULTATS
   ============================================================ */

.sentinel-diag__entete {
	max-width: 760px;
}
.sentinel-diag__intro {
	max-width: 60ch;
	font-size: var(--text-body-sm);
	line-height: var(--leading-body);
	color: var(--text-muted);
}
.sentinel-diag__intro p {
	margin: 0 0 12px;
}

.sentinel-diag {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: var(--space-7);
	align-items: start;
	margin-bottom: var(--space-9);
}

/* Formulaire — panneau clair, champs contour navy fin, focus turquoise. */
.sentinel-form {
	background: var(--surface-panel);
	border-radius: var(--radius-photo);
	padding: 40px 40px 44px;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}
.sentinel-form__note {
	margin: 0;
	font-size: var(--text-eyebrow);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--text-muted);
}
.sentinel-form__ligne {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
}
.sentinel-form__champ {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: var(--text-label);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	font-weight: var(--weight-medium);
	color: var(--navy);
}
.sentinel-form__champ input,
.sentinel-form__champ select,
.sentinel-form__champ textarea {
	font-family: inherit;
	font-size: var(--text-body-sm);
	letter-spacing: normal;
	text-transform: none;
	font-weight: var(--weight-medium);
	color: var(--navy);
	background: var(--white);
	border: 1.5px solid var(--border-subtle);
	border-radius: 14px;
	padding: 13px 18px;
}
.sentinel-form__champ textarea {
	border-radius: var(--radius-card);
	resize: vertical;
}
.sentinel-form__champ input::placeholder,
.sentinel-form__champ textarea::placeholder {
	color: var(--text-muted);
}
.sentinel-form__champ :is(input, select, textarea):focus-visible {
	outline: none;
	border-color: var(--turquoise);
	box-shadow: 0 0 0 3px var(--turquoise-100);
}
.sentinel-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--text-body-sm);
	color: var(--text-muted);
}
.sentinel-form__consent input {
	margin-top: 3px;
	accent-color: var(--navy);
}

/* Aside coordonnées. */
.sentinel-diag__aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.sentinel-diag__aside-titre {
	margin: 0;
	font-size: var(--text-h3);
	line-height: 1.15;
}
.sentinel-diag__coord {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.sentinel-diag__coord li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: var(--text-body-sm);
}
.sentinel-diag__coord span {
	font-size: var(--text-eyebrow);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--text-muted);
}
.sentinel-diag__coord a {
	color: var(--navy);
	text-decoration: none;
	font-weight: var(--weight-bold);
}
.sentinel-diag__reassurance {
	margin: 0;
	font-size: var(--text-body-sm);
	color: var(--text-muted);
}

/* Récapitulatif des réponses — pilules. */
.sentinel-recap {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: var(--space-9);
}
.sentinel-recap__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Titre du panneau newsletter quand c'est un h2 (page résultats). */
.sentinel-newsletter__titre {
	font-size: 24px;
	line-height: 1.15;
	margin: 0;
}

/* Formulaire en ligne (envoi du plan par e-mail) sur le panneau jaune. */
.sentinel-form--enligne {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	background: none;
	padding: 0;
}
.sentinel-form--enligne .sentinel-form__champ {
	flex: 1 1 260px;
}
.sentinel-form--enligne .sentinel-form__champ input {
	border-color: transparent;
}

/* Utilitaire lecteur d'écran (au cas où le thème ne le fournit pas). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 900px) {
	.sentinel-diag {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}
}
@media (max-width: 640px) {
	.sentinel-form {
		padding: 28px 24px 32px;
	}
	.sentinel-form__ligne {
		grid-template-columns: 1fr;
	}
}