:root {
	--font-display: ui-rounded, "SF Pro Rounded", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--color-bg: #f7f8f8;
	--color-surface: #ffffff;
	--color-text: #1a1420;
	--color-text-muted: #504e53;
	--color-accent: #12333B;
	--color-accent-text: #ffffff;
	--color-accent-onbg: #031316;
	--color-accent-on-white: #0a3843;
	--color-accent-onsoft: #0a3843;
	--color-accent-soft: #dee2e4;
	--color-accent-2: #FF684A;
	--color-accent-2-text: #1a1420;
	--color-accent-2-onbg: #cf2200;
	--color-accent-3: #FFB627;
	--color-accent-3-text: #1a1420;
	--color-border: #dee2e4;
	--radius-card: 8px;
	--radius-image: 8px;
	--radius-field: 4px;
	--radius-button: 4px;
	--measure: 680px;
	--logo-height: 56px;
	--header-bg: #12333B;
	--header-text: #ffffff;
	--header-text-muted: #b3bec0;
	--header-accent: #ff7559;
	--footer-bg: #0C262D;
	--footer-text: #ffffff;
	--footer-text-muted: #aab3b6;
	--footer-accent: #ff684a;
	--hero-fallback-from: #12333B;
	--hero-fallback-via: #FF684A;
	--hero-fallback-to: #FFB627;
	--hero-fallback-text: #fff8fb;
	--hero-scrim: rgba(20, 10, 28, .5);
	--gradient-vibrant: linear-gradient(120deg, var(--hero-fallback-from), var(--hero-fallback-via), var(--hero-fallback-to));
	--shadow-rest: none;
	--shadow-hover: 0 22px 22px -14px rgba(26, 20, 32, 0.28);
}

* { box-sizing: border-box; }
picture { display: block; }

body {
	margin: 0;
	overflow-x: hidden;
	/* Un mot/URL sans espace (colle dans un texte) n'a par defaut aucun point
	   de coupure - il pousse la largeur de son conteneur au lieu de passer a
	   la ligne, ce qui elargit toute la page (incident reel signale par
	   Johan, 2026-08-28). Force la coupure a l'interieur du mot plutot que de
	   laisser deborder, quel que soit ce qui est colle dans un bloc de texte. */
	overflow-wrap: anywhere;
	word-break: break-word;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-header { display: flex; justify-content: center; padding: 0 1.25rem; background: var(--header-bg); }
.site-header-inner { width: 100%; max-width: var(--content-width, 960px); display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.site-header-brand { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: 1rem 0; }
.site-header .logo { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--header-text); text-decoration: none; letter-spacing: -.01em; }
.site-header .logo img { display: block; height: var(--logo-height); width: auto; max-width: 160px; }
.site-header .baseline { color: var(--header-text-muted); font-size: .88rem; margin: 0; }

.site-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; padding: .5rem 0; }
.site-nav a { color: var(--header-text-muted); text-decoration: none; font-size: .92rem; font-weight: 600; transition: color .2s ease; }
.site-nav .nav-search-link { display: inline-flex; align-items: center; }
.site-nav .nav-search-link:hover { color: var(--color-accent); }
.site-nav a:hover { color: var(--header-accent); }

/* Lien de nav en forme de bouton (reglage "Afficher en forme de bouton" de la
   page, cf. edit-page.php) - reprend le style de .block-button (bouton CTA)
   plutot que d'inventer une variante, taille reduite pour s'inserer dans la
   barre de nav. */
.site-nav a.nav-cta { display: inline-flex; align-items: center; padding: 0 .85rem; border-radius: var(--radius-button); background: var(--color-accent); color: var(--color-accent-text); font-weight: 700; transition: opacity .2s ease; }
.site-nav a.nav-cta:hover { opacity: .9; color: var(--color-accent-text); }

/* Pages filles (aucun JS - cf. header.php) : ":focus-within" est le
   declencheur fiable partout (clavier via Tab, tactile via tap sur le bouton
   dedie qui ne navigue jamais) ; ":hover" (plus bas, gate a la souris) n'est
   qu'un confort ADDITIONNEL, jamais le seul moyen d'ouvrir. */
.nav-submenu { position: relative; display: inline-flex; align-items: center; gap: .3rem; }
.nav-submenu-toggle {
	all: unset; cursor: pointer; font-size: .7em; line-height: 1; padding: .3rem;
	color: var(--header-text-muted); transition: transform .2s ease;
}
.nav-submenu:focus-within .nav-submenu-toggle { transform: rotate(180deg); }
.nav-submenu-list {
	/* top:100%, margin:0 (ecrase le margin-block par defaut du navigateur sur
	   <ul>, ~1em) : un espace mort entre le lien et la liste coupait :hover des
	   qu'on le traversait en descendant la souris vers le sous-menu (piege
	   trouve par Johan en usage reel - cf. docs/architecture.md). La boite
	   touche directement le lien parent ; l'air visuel vient du padding
	   interne, qui EN FAIT PARTIE. */
	position: absolute; top: 100%; left: 0; z-index: 20; margin: 0;
	display: none; flex-direction: column; gap: .15rem; min-width: 180px;
	padding: .5rem; list-style: none;
	/* Radius du sous-menu reduit de 70% par rapport aux autres cartes du theme
	   (demande explicite de Johan), variable partagee avec le radius des liens
	   internes ci-dessous pour rester coherents entre eux. */
	--nav-submenu-radius: calc(var(--radius-card) * 0.3);
	background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--nav-submenu-radius);
	box-shadow: var(--shadow-rest);
}
.nav-submenu:focus-within .nav-submenu-list { display: flex; }
.nav-submenu-list a { display: block; padding: .4rem .6rem; border-radius: max(0px, calc(var(--nav-submenu-radius) - 2px)); white-space: nowrap; color: var(--color-text); transition: color .2s ease; }
.nav-submenu-list a:hover { background: var(--color-bg); }
/* pointer:fine exclut le tactile (pas de survol la-bas - le focus-within
   ci-dessus, declenche par le bouton au tap, reste le seul declencheur). */
@media (hover: hover) and (pointer: fine) {
	.nav-submenu:hover .nav-submenu-toggle { transform: rotate(180deg); }
	.nav-submenu:hover .nav-submenu-list { display: flex; }
}

/* Menu mobile (aucun JS - cf. header.php) : meme mecanisme bouton +
   ":focus-within" que les pages filles ci-dessus - un bouton dedie (aucune
   navigation) revele ".site-nav" des qu'un descendant recoit le focus
   (clic/tap/clavier). N'existe qu'en dessous du seuil mobile : au-dessus,
   aucune regle de ce bloc ne s'applique, ".site-nav" garde son rendu actuel
   (ligne horizontale, toujours visible, bouton invisible). */
.mobile-nav-toggle { display: none; }

@media (max-width: 720px) {
	/* La reference de positionnement pour le tiroir est .site-header-inner
	   (toute la largeur du header), PAS .mobile-nav (qui ne fait que la
	   largeur du bouton - un tiroir "left:0;right:0" ancre sur son plus proche
	   ancetre positionne, mauvaise largeur trouvee en verifiant les boites
	   reelles avant de considerer ce correctif termine, cf. docs/architecture.md). */
	.site-header-inner { position: relative; }
	.mobile-nav-toggle {
		display: block; cursor: pointer; font-size: 1.3rem; line-height: 1;
		background: none; border: none; padding: .5rem .6rem; color: var(--header-text);
	}
	.site-nav {
		display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
		flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: .5rem;
		background: var(--color-surface); border: 1px solid var(--color-border);
		border-radius: var(--radius-card); box-shadow: var(--shadow-rest);
	}
	.mobile-nav:focus-within .site-nav { display: flex; }
	.site-nav a { padding: .6rem; border-radius: calc(var(--radius-card) - 6px); color: var(--color-text); }
	.site-nav a:hover { background: var(--color-bg); }

	/* Pages filles : plus de bouton dedie ni de carte flottante sur mobile, la
	   liste des enfants reste depliee directement sous sa page parente (choix
	   explicite de Johan - un second niveau de tap dans un tiroir deja etroit
	   est juge peu pratique). */
	.nav-submenu { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
	.nav-submenu-toggle { display: none; }
	.nav-submenu-list {
		display: flex; position: static; margin: 0; padding: 0 0 0 1rem;
		border: none; background: none; box-shadow: none; min-width: 0;
	}
}

main { display: flex; justify-content: center; padding: 0 1.25rem 3rem; flex: 1; }
.main-inner { width: 100%; display: flex; flex-direction: column; align-items: center; }
.page-text { width: 100%; max-width: var(--content-width, 960px); }
.page-layout { width: 100%; max-width: var(--content-width, 960px); display: flex; gap: 2.5rem; align-items: flex-start; }
.main-column { flex: 1; min-width: 0; }
.sidebar { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.page-layout:has(> .main-column > .blocks:first-child) .sidebar { margin-top: 2rem; }

.card-list { display: grid; grid-template-columns: 1fr; gap: 1.25rem 1rem; margin-top: 1.5rem; }
@media (min-width: 600px) { .card-list { grid-template-columns: 1fr 1fr; } }
.sidebar .card-list { grid-template-columns: 1fr; margin-top: 0; }
/* Reglage "Colonnes" du bloc Flux d'articles (1/2/3, defaut 2 = regle
   ci-dessus, inchangee) - classe modificatrice, specificite superieure aux
   regles generiques ci-dessus (peu importe l'ordre dans le fichier). */
.article-feed .card-list.card-list-cols-1 { grid-template-columns: 1fr; }
.article-feed .card-list.card-list-cols-3 { grid-template-columns: 1fr; }
@media (min-width: 600px) { .article-feed .card-list.card-list-cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .article-feed .card-list.card-list-cols-3 { grid-template-columns: repeat(3, 1fr); } }

.article-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: 1.1rem 1.25rem;
	overflow: hidden;
	box-shadow: var(--shadow-rest);
	transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.article-card a { text-decoration: none; color: inherit; }
.article-card-thumb { display: block; margin: -1.1rem -1.25rem 1rem; aspect-ratio: 16 / 9; overflow: hidden; }
.article-card-thumb picture, .article-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.article-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin: 0 0 .3rem; letter-spacing: -.005em; }
.article-card .date { color: var(--color-text-muted); font-size: .8rem; margin: 0 0 .5rem; }
.article-card .hook { font-size: .92rem; color: var(--color-text-muted); }
.article-card .hook p { margin: 0; }
.article-card .article-card-cta {
	display: inline-flex; align-items: center; margin-top: .75rem;
	padding: .4rem .9rem; border-radius: var(--radius-button); background: var(--color-accent);
	color: var(--color-accent-text); text-decoration: none; font-weight: 700; font-size: .82rem;
	transition: transform .25s ease, box-shadow .25s ease;
}
.article-card .article-card-cta:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 2px; }

.article-feed { margin-top: 1.75rem; }
.article-feed h2 { margin: 0 0 .75rem; }
.article-feed-list .card-list { display: flex; flex-direction: column; gap: .75rem; }
.article-feed-list .article-card { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; padding: .75rem; }
.article-feed-list .article-card a:not(.article-card-thumb):not(.article-card-cta) { flex: 1; min-width: 0; }
.article-feed-list .article-card-thumb { width: 96px; height: 96px; flex-shrink: 0; margin: 0; aspect-ratio: 1; border-radius: var(--radius-image); overflow: hidden; }
.article-feed-list .article-card h3 { font-size: 1rem; margin: 0 0 .2rem; }
.article-feed-list .article-card .hook { display: none; }

.home-intro { padding: 4rem 0 1.5rem; text-align: center; }
.home-intro h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 6vw, 3.4rem); letter-spacing: -.01em; margin: 0 0 1rem; text-wrap: balance; }
.home-intro .lede { color: var(--color-text-muted); font-size: 1.2rem; max-width: 560px; margin: 0 auto; }

.main-column h2, .page-text h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: -.005em; margin: 2rem 0 0; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.section-heading h2 { margin: 0; }

.link-list { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.link-list a { color: var(--color-text); font-weight: 600; text-decoration: none; }
.link-list a:hover { color: var(--color-accent-2-onbg); }

.page-layout > .main-column > h1:first-child, .page-text > h1:first-child { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 4.5vw, 2.6rem); letter-spacing: -.01em; margin: 2.5rem 0 1rem; text-wrap: balance; }

@media (max-width: 760px) { .page-layout { flex-direction: column; } .sidebar { width: 100%; } }

.article { width: 100%; max-width: var(--content-width, 960px); animation: xt-fade-up .5s ease both; }
@media (prefers-reduced-motion: reduce) { .article { animation: none; } }
@keyframes xt-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.article-header { text-align: center; padding: 3rem 0 1.5rem; }
.eyebrow { color: var(--color-accent-2-onbg); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 .9rem; }
.article-header h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 1rem; text-wrap: balance; }
.byline { color: var(--color-text-muted); font-size: .88rem; margin: 0 0 1.5rem; }
.hook { font-size: 1.2rem; color: var(--color-text-muted); max-width: 560px; margin: 0 auto; }
.hook p { margin: 0; }

.hero-image { margin: 2rem 0; border-radius: var(--radius-image); overflow: hidden; box-shadow: var(--shadow-rest); }
.hero-image img { width: 100%; height: auto; display: block; }

/* L'espacement "Auto" du tout premier bloc de .blocks est calcule et pose en
   ligne par le PHP (render.php::xt_render_blocks(), page.php/article.php) -
   jamais une regle CSS ici, pour qu'un reglage explicite (y compris 0) sur ce
   bloc precis puisse toujours le remplacer, quelle que soit la profondeur
   d'imbrication (page-layout/main-column/blocks). Seul le rythme ENTRE les
   blocs suivants reste une regle de classe (rien a en imbrique). */
.blocks { display: flex; flex-direction: column; }
.blocks > * + * { margin-top: 1.75rem; }
.block-row { display: flex; flex-wrap: wrap; gap: 1.75rem; align-items: flex-start; }
.block-row-item { min-width: 0; flex: 1 1 100%; }
.block-row-1-2 { flex-basis: calc(50% - .875rem); }
.block-row-1-3 { flex-basis: calc(33.333% - 1.1667rem); }
.block-row-2-3 { flex-basis: calc(66.666% - .5833rem); }
.block-row-reversed { order: -1; }
@media (max-width: 720px) { .block-row-1-2, .block-row-1-3, .block-row-2-3 { flex-basis: 100%; } }

.block-text { font-size: calc(1.08rem * var(--xt-text-scale, 1)); }
.block-text h2 { font-family: var(--font-display); font-weight: 700; font-size: calc(1.55rem * var(--xt-text-scale, 1)); letter-spacing: -.005em; margin: 1.5rem 0 .75rem; text-wrap: balance; }
.block-text p { margin: 0 0 1rem; }
.block-text ul, .block-text ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.block-text li { margin: 0 0 .35rem; }
/* Rythme du texte courant : chaque titre/paragraphe/liste de l'editeur est
   un bloc "text" a part, qui recevait EN PLUS le rythme entre blocs (28px,
   .blocks > * + *) - 44px entre deux paragraphes, et un titre presque aussi
   loin de son texte que deux paragraphes entre eux. Entre deux blocs texte
   consecutifs, seules les marges propres du texte comptent desormais (p :
   1rem ; titre : marge haute plus grande que la basse). Marges internes
   inchangees : tout autre enchainement (texte -> image, bouton, embed...)
   garde exactement son ecart actuel. L'enveloppe SANS classe posee pour une
   ancre (render.php::xt_block_wrapper_attrs()) est couverte ; un espacement
   explicite (style en ligne sur cette enveloppe) gagne toujours. */
:is(.blocks, .block-group, .block-group-inner) > :is(.block-text, div:not([class]):has(> .block-text)) + :is(.block-text, div:not([class]):has(> .block-text)) { margin-top: 0; }
/* Interligne propre aux titres (au lieu du 1.6 du texte courant, qui
   ajoutait ~10px d'air invisible au-dessus et en dessous d'un h2) ; h3-h6
   alignes sur le h2 au lieu des marges par defaut du navigateur. */
.block-text h2, .block-text h3, .block-text h4, .block-text h5, .block-text h6 { line-height: 1.25; }
.block-text h3, .block-text h4, .block-text h5, .block-text h6 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.005em; text-wrap: balance; }
.block-text h3 { font-size: calc(1.25rem * var(--xt-text-scale, 1)); margin: 1.25rem 0 .6rem; }
.block-text h4, .block-text h5, .block-text h6 { font-size: calc(1.1rem * var(--xt-text-scale, 1)); margin: 1.1rem 0 .5rem; }
.block-text a { color: var(--color-accent-onbg); text-decoration-color: var(--color-accent-2); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.block-html { max-width: 100%; overflow-x: auto; }
/* Reglage "Pleine largeur" (Tune xtLayout, n'importe quel type de bloc) -
   meme calcul que le fond du bloc Section (.block-bg), mais sans imposer de
   largeur de contenu interieure : le contenu du bloc reste libre de definir
   sa propre mise en page (cf. render.php::xt_block_bleed_class()). */
.block-bleed { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; }

.block-faq h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; margin: 0 0 1rem; }
.block-faq .faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: .9rem 1.1rem; margin-bottom: .75rem; transition: border-color .25s ease; }
.block-faq .faq-item:hover { border-color: var(--color-accent-2); }
.block-faq .faq-item summary { cursor: pointer; font-weight: 700; }
.block-faq .faq-item summary:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 2px; }
.block-faq .faq-answer { margin-top: .6rem; color: var(--color-text-muted); }

.block-summary { background: var(--color-accent-soft); border-left: 4px solid var(--color-accent); border-radius: var(--radius-card); padding: 1.1rem 1.3rem; }
.block-summary .summary-intro { margin: 0 0 .75rem; font-weight: 700; }
.block-summary .summary-intro:last-child { margin-bottom: 0; }
.block-summary .summary-points { margin: 0; padding-left: 1.2rem; }
.block-summary .summary-points li { margin-bottom: .4rem; }
.block-summary .summary-points li:last-child { margin-bottom: 0; }

.block-image img, .block-video video { width: 100%; height: auto; border-radius: var(--radius-image); display: block; box-shadow: var(--shadow-rest); }
/* Largeur d'affichage du bloc image (reglage "Largeur"), en fraction de la
   colonne - une image plus etroite que la colonne n'est plus etiree a 100%.
   Sans ce reglage, un logo de 240px s'affichait a la largeur de la colonne. */
.block-image.image-size-large img { max-width: 75%; }
.block-image.image-size-medium img { max-width: 50%; }
.block-image.image-size-small img { max-width: 25%; }
.block-image.image-align-center img { margin-left: auto; margin-right: auto; }
/* Barre native fine, contrairement a l'image/video ci-dessus - pas d'arrondi
   ni d'ombre, une fausse note visuelle sur un controle aussi mince. */
.block-audio audio { width: 100%; display: block; }
.block-embed { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-image); overflow: hidden; }
.block-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.block-file a { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border-radius: var(--radius-button); background: var(--color-accent-soft); color: var(--color-accent-onsoft); text-decoration: none; font-weight: 700; font-size: .9rem; transition: transform .25s ease, box-shadow .25s ease; }
.block-file a:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.block-file a:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 2px; }

.block-button a { display: inline-flex; align-items: center; padding: .7rem 1.5rem; border-radius: var(--radius-button); background: var(--color-accent); color: var(--color-accent-text); text-decoration: none; font-weight: 700; transition: transform .25s ease, box-shadow .25s ease; }
.block-button a:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 2px; }
/* Variante "secondaire" du bouton : meme forme, poids visuel moindre - pour
   l'action de repli posee a cote de l'action principale. */
.block-button.button-secondary a { background: var(--color-surface); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-border); }
.block-button.button-secondary a:hover { box-shadow: inset 0 0 0 1px var(--color-accent); opacity: 1; }

.block-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }
.block-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-image); display: block; transition: transform .4s ease; }

.block-hero.block-hero-full { min-height: 100dvh; }

.site-header:has(+ main .main-inner > .block-hero.hero-header-overlay:first-child) {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

.hero-overlay { position: absolute; inset: 0; }
.block-hero.hero-custom-overlay::before { content: none; }

.block-bg {
	position: relative;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	box-sizing: border-box;
	padding: 4rem 1.25rem;
}
.block-bg-neutral { background: var(--color-surface); }
.block-bg-accent { background: var(--color-accent-2, var(--color-accent)); color: var(--color-accent-2-text, var(--color-accent-text)); }
.block-bg-highlight { background: var(--color-accent-3, var(--color-accent)); color: var(--color-accent-3-text, var(--color-accent-text)); }
.block-bg-dark { background: rgb(20, 10, 28); color: var(--hero-fallback-text); }
.block-bg-media { position: absolute; inset: 0; z-index: 0; }
.block-bg-media picture, .block-bg-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.block-bg-image { background: rgb(20, 10, 28); color: var(--hero-fallback-text); }
.block-bg-image::after { content: ''; position: absolute; inset: 0; background: var(--hero-scrim); }
.block-bg-content { position: relative; z-index: 1; max-width: var(--content-width, 960px); margin: 0 auto; }

.block-hero {
	position: relative;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	min-height: 380px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-sizing: border-box;
	padding: 3rem 1.5rem;
	text-align: center;
	background: var(--gradient-vibrant);
	color: var(--hero-fallback-text);
}
.block-hero::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--hero-scrim); }
.block-hero .hero-bg { position: absolute; inset: 0; z-index: 0; }
.block-hero .hero-bg picture, .block-hero .hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.block-hero .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.72)); }
.block-hero .hero-content { position: relative; z-index: 1; max-width: 640px; }
.block-hero h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 .75rem; text-shadow: 0 2px 16px rgba(0,0,0,.5); text-wrap: balance; color: inherit; }
/* Idem pour le hero, dont le titre est promu en h1 sur une page sans titre
   natif (page.php, $heroIsPageH1) - meme habillage que son h2, a la taille
   d'un titre principal. */
.block-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5vw, 3.1rem); margin: 0 0 .75rem; text-shadow: 0 2px 16px rgba(0,0,0,.5); text-wrap: balance; color: inherit; }

.block-hero p { font-size: 1.1rem; margin: 0 0 1.25rem; opacity: .95; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.hero-button { display: inline-flex; align-items: center; padding: .7rem 1.5rem; border-radius: var(--radius-button); background: #fff; color: var(--color-accent-on-white); text-decoration: none; font-weight: 700; transition: transform .25s ease, box-shadow .25s ease; }
.hero-button:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(0,0,0,.35); }

.block-section { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }
.block-section h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 0 0 .75rem; }
.block-section p { font-size: 1.05rem; margin: 0 0 1.25rem; opacity: .95; }
/* Alignement "Aligne a gauche" (reglage "Alignement" du bloc Section) : le
   defaut reste centre sur 640px (bandeau), "left" transforme le bloc en
   intertitre de section au fil du contenu, sur toute la largeur de la colonne.
   Specificite ".block-section p.section-kicker" (0,2,1) volontaire : la regle
   generique ".block-section p" (0,1,1) ci-dessus gagnerait sinon toujours et
   afficherait le surtitre comme un paragraphe ordinaire (meme piege que
   .text-markers-kicker, cf. plus bas). */
/* Marges laterales seulement (ex-"margin: 0" / "margin: 0 auto") : la forme
   courte remettait AUSSI la marge haute a 0, plus specifique que le rythme
   ".blocks > * + *" - un intertitre sans fond se retrouvait colle (16px) au
   texte du dessus et plus loin (40px) du sien, hierarchie inversee. Le texte
   qui SUIT un intertitre lui est rattache comme apres un titre de l'editeur
   (marges propres seules), sauf si l'intertitre se termine par un bouton
   (qui n'a aucune marge propre). */
.block-section.section-left { text-align: left; max-width: none; margin-left: 0; margin-right: 0; }
.block-section.section-left h2 { line-height: 1.25; }
:is(.blocks, .block-group, .block-group-inner) > :is(.block-section.section-left, div:not([class]):has(> .block-section.section-left)):has(> :is(h1, h2, p):last-child, > .block-section > :is(h1, h2, p):last-child) + :is(.block-text, div:not([class]):has(> .block-text)) { margin-top: 0; }
.block-section p.section-kicker { color: var(--color-accent-onbg); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .5rem; }
/* Titre promu en <h1> : un article ou une page qui masque son en-tete natif
   fait porter le titre principal par le premier bloc "section"/"hero" titre
   (cf. render.php, $promoteFirstTitleToH1). Sans regle propre, ce h1 tombait
   sur le style par defaut du navigateur (2em) - donc PLUS PETIT que les
   intertitres h2 du meme bloc, hierarchie inversee (signale par Hermes sur la
   fiche pilote Yoga Safran). Style derive de ".article-header h1" ci-dessus,
   pour rester coherent avec le titre d'article de ce theme. */
.block-section h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 .75rem; text-wrap: balance; }


/* --- Groupe : surface commune a plusieurs blocs ---------------------------
   Habille exactement la zone de ses blocs, DANS la colonne de contenu -
   contrairement a .block-bg (fond du bloc Section), qui sort en bandeau
   pleine largeur. C'est ce qui permet de poser un titre ET son contenu sur
   la meme surface.
   ".block-group > * + *" reprend le rythme vertical de ".blocks > * + *" :
   les blocs d'un groupe ne sont plus enfants de .blocks, ils perdraient
   sinon tout espacement entre eux. */
.block-group { display: flex; flex-direction: column; border-radius: var(--radius-card); }
.block-group > * + * { margin-top: 1.75rem; }
.block-group-neutral { background: var(--color-surface); }
.block-group-accent { background: var(--color-accent-2, var(--color-accent)); color: var(--color-accent-2-text, var(--color-accent-text)); }
.block-group-highlight { background: var(--color-accent-3, var(--color-accent)); color: var(--color-accent-3-text, var(--color-accent-text)); }
.block-group-dark { background: var(--color-text); color: var(--color-bg); }
.block-group-bordered { border: 1px solid var(--color-border); }
.block-group-pad-none { padding: 0; }
.block-group-pad-small { padding: 1.25rem; }
.block-group-pad-medium { padding: 1.75rem; }
.block-group-pad-large { padding: 2.75rem; }
@media (max-width: 600px) {
	.block-group-pad-medium { padding: 1.375rem; }
	.block-group-pad-large { padding: 1.625rem 1.375rem; }
}
/* Un fond de bloc (Section) ou un bloc "Pleine largeur" place DANS un groupe
   sortirait de l'ecran via ses marges negatives, en debordant de la surface
   qui est justement censee le contenir : on le ramene dans le groupe. */
/* "Fond sur toute la largeur de l'ecran" (Groupe) : la surface sort bord a
   bord, les blocs restent recentres dans la colonne de contenu - meme calcul
   que .block-bg (fond du bloc Section), etendu ici a plusieurs blocs. Arrondi
   supprime : un bandeau qui touche les deux bords de l'ecran n'a pas de coin
   visible a arrondir. */
.block-group-bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; max-width: 100vw; border-radius: 0; }
.block-group-inner { display: flex; flex-direction: column; max-width: var(--content-width, 960px); margin: 0 auto; width: 100%; }
.block-group-inner > * + * { margin-top: 1.75rem; }
.block-group .block-bg,
.block-group .block-bleed { margin-left: 0; margin-right: 0; width: auto; }
.block-group .block-bg { padding: 1.25rem; border-radius: var(--radius-card); }


/* Grille de cartes numerotees - meme reglage "Colonnes" (1/2/3, defaut 3 ici)
   et meme mecanique de classe modificatrice que .card-list (Flux d'articles). */
.block-card-grid > h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 0 0 .5rem; }
.card-grid-intro { color: var(--color-text-muted); margin: 0 0 1.5rem; max-width: 640px; }
.card-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem 1rem; margin-top: 1.5rem; }
@media (min-width: 600px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card-grid.card-grid-cols-1 { grid-template-columns: 1fr; }
.card-grid.card-grid-cols-2 { grid-template-columns: 1fr; }
@media (min-width: 600px) { .card-grid.card-grid-cols-2 { grid-template-columns: repeat(2, 1fr); } }
.card-grid-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 1.25rem 1.25rem 1.5rem; }
/* Carte cliquable (champ "url" rempli) : meme apparence, sans le style de
   lien natif du navigateur - un leger changement de bordure au survol
   signale que toute la carte est cliquable. */
a.card-grid-item { display: block; color: inherit; text-decoration: none; transition: border-color .2s ease; }
a.card-grid-item:hover { border-color: var(--color-accent); }
.card-grid-num { display: block; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82rem; font-weight: 700; color: var(--color-accent-onbg); margin-bottom: .6rem; }
.card-grid-item h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin: 0 0 .5rem; }
.card-grid-item p { margin: 0; color: var(--color-text-muted); font-size: .95rem; }
/* Lignes structurees d'une carte (champ "lines") : intitule a gauche,
   precision a droite, separees par un filet - repli aligne a gauche sur
   mobile, ou les deux colonnes passent l'une sous l'autre. */
.card-grid-lines { list-style: none; margin: 1rem 0 0; padding: 0; }
.card-grid-lines li { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; border-top: 1px solid var(--color-border); padding: .55rem 0; font-size: .95rem; }
.card-grid-lines strong { font-weight: 700; }
.card-grid-lines span { color: var(--color-text-muted); font-size: .88rem; text-align: right; }
@media (max-width: 480px) { .card-grid-lines span { text-align: left; } }


/* Texte + liste de reperes - 2 colonnes cote a cote des 700px, empilees avant.
   "text-markers-reversed" inverse l'ordre VISUEL via "order" (jamais le DOM,
   pour garder un ordre de lecture stable). */
.block-text-markers { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
@media (min-width: 700px) {
	.block-text-markers { grid-template-columns: 1fr 1fr; align-items: center; gap: 2.5rem; }
	.block-text-markers.text-markers-reversed .text-markers-copy { order: 2; }
	.block-text-markers.text-markers-reversed .text-markers-list { order: 1; }
}
.text-markers-copy h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .75rem; }
.text-markers-copy p { color: var(--color-text-muted); margin: 0; }
/* Specificite ".text-markers-copy p" (0,1,1) > ".text-markers-kicker" seule
   (0,1,0) : le kicker est un <p> DANS .text-markers-copy, la regle generique
   ci-dessus gagnait donc toujours et l'affichait en gris attenue au lieu de
   sa couleur d'accent voulue - jamais corrige jusqu'ici, trouve en verifiant
   visuellement le correctif de contraste du 2026-09-13. Qualifiee par son
   parent pour repasser devant sans toucher l'ordre des regles ni le CSS deja
   ecrit par ailleurs. */
.text-markers-copy p.text-markers-kicker { color: var(--color-accent-onbg); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .5rem; }
.text-markers-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.text-markers-list li { padding-left: 1.5rem; position: relative; }
.text-markers-list li::before { content: ''; position: absolute; left: 0; top: .45rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-accent-onbg); }
.text-markers-list strong { display: block; font-weight: 700; margin-bottom: .2rem; }
.text-markers-list span { color: var(--color-text-muted); font-size: .92rem; }

/* Panneau CTA - encadre compact (pas le traitement plein-bandeau du bloc
   Section), memes roles de fond que .block-bg-* (couleur de texte incluse sur
   accent/highlight/dark, meme raison que ces roles - cf. retex JSD du
   2026-08-26/27), sauf "image" (cf. CtaPanelBlockTool, admin/edit-article.php),
   meme bouton (.hero-button) que Section/Hero. */
.block-cta-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: 860px; margin: 0 auto; padding: 2rem 2.25rem; border-radius: var(--radius-card); }
.cta-panel-bg-neutral { background: var(--color-surface); border: 1px solid var(--color-border); }
.cta-panel-bg-accent { background: var(--color-accent-2, var(--color-accent)); color: var(--color-accent-2-text, var(--color-accent-text)); }
.cta-panel-bg-highlight { background: var(--color-accent-3, var(--color-accent)); color: var(--color-accent-3-text, var(--color-accent-text)); }
.cta-panel-bg-dark { background: rgb(20, 10, 28); color: var(--hero-fallback-text); }
.cta-panel-copy { flex: 1; min-width: 220px; }
.cta-panel-kicker { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .4rem; opacity: .85; }
.cta-panel-copy h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; margin: 0 0 .4rem; }
.cta-panel-copy p { margin: 0; opacity: .85; }
.block-cta-panel .hero-button { flex-shrink: 0; }

.block-form { max-width: var(--measure); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 1.5rem; }
.block-form .form-title { margin: 0 0 1rem; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; }
.block-form .form-sent-notice { margin: 0 0 1.25rem; padding: .75rem 1rem; border-radius: calc(var(--radius-card) - 6px); background: var(--color-accent-soft); color: var(--color-accent-onsoft); font-weight: 700; }
.block-form .form-field { margin-bottom: 1rem; }
.block-form .form-field label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .9rem; }
.block-form .form-field input[type=text], .block-form .form-field input[type=email], .block-form .form-field input[type=tel], .block-form .form-field textarea, .block-form .form-field select {
	width: 100%; box-sizing: border-box; padding: .6rem .8rem; border: 1px solid var(--color-border); border-radius: var(--radius-field); background: var(--color-bg); color: var(--color-text); font: inherit; transition: border-color .2s ease, box-shadow .2s ease;
}
.block-form .form-field input:focus, .block-form .form-field textarea:focus, .block-form .form-field select:focus { outline: none; border-color: var(--color-accent-2); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent-2) 25%, transparent); }
.block-form .form-field textarea { resize: vertical; }
.block-form .form-checkbox-inline { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.block-form .form-checkbox-inline input { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.block-form .form-submit { display: inline-flex; align-items: center; padding: .7rem 1.5rem; border: 0; border-radius: var(--radius-button); background: var(--color-accent); color: var(--color-accent-text); font: inherit; font-weight: 700; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; }
.xt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.block-search { max-width: var(--measure); }
.block-search .search-input { width: 100%; box-sizing: border-box; padding: .7rem 1.1rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text); font: inherit; transition: border-color .2s ease, box-shadow .2s ease; }
.block-search .search-input:focus { outline: none; border-color: var(--color-accent-2); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent-2) 25%, transparent); }
.block-search .search-status { margin: .75rem 0 0; color: var(--color-text-muted); font-size: .88rem; }
.block-search .search-results { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.block-search .search-results li { padding: .75rem 1.1rem; border: 1px solid var(--color-border); border-radius: calc(var(--radius-card) - 8px); background: var(--color-surface); }
.block-search .search-results a { font-weight: 700; color: var(--color-text); text-decoration: none; }
.block-search .search-results a:hover { color: var(--color-accent-onbg); }
.block-search .search-results p { margin: .3rem 0 0; color: var(--color-text-muted); font-size: .88rem; }

.article-footer { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-border); }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
.tag { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: .35rem .9rem; font-size: .82rem; color: var(--color-text-muted); }
.tag-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-text); }

.related { margin-top: 2rem; }
.related h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin: 0 0 .75rem; }
.related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.related a { color: var(--color-accent-onbg); font-weight: 600; text-decoration: none; }
.related a:hover { text-decoration: underline; }

a:focus-visible, .logo:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 2px; }
.skip-link { position: absolute; top: -3rem; left: 1rem; background: var(--color-accent); color: var(--color-accent-text); padding: .6rem 1rem; border-radius: 6px; text-decoration: none; font-weight: 700; font-size: .85rem; z-index: 100; transition: top .15s ease; }
.skip-link:focus { top: 1rem; }

@media (max-width: 560px) { .article-header { text-align: left; } .hook { margin: 0; } }

.site-footer { border-top: 1px solid var(--color-border); padding: 1.75rem 1.5rem; background: var(--footer-bg); }
.site-footer-inner { max-width: var(--content-width, 960px); margin: 0 auto; font-size: .85rem; color: var(--footer-text-muted); }
.site-footer .copyright { margin: 0; }
/* Colonnes : "Navigation"/"Contact"/"Suivez-nous", chacune omise si vide (cf.
   footer.php) - auto-fit s'adapte seul au nombre de colonnes reellement
   presentes (1 a 3), pas de reglage de mise en page a gerer en plus. */
.footer-columns {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem 2rem;
	margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-border);
}
.footer-col-title { margin: 0 0 .6rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--footer-text); }
.footer-pages, .footer-social, .footer-contact { display: flex; flex-direction: column; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.footer-pages a, .footer-social a, .footer-contact a { color: var(--footer-text-muted); text-decoration: none; transition: color .2s ease; }
.footer-pages a:hover, .footer-social a:hover, .footer-contact a:hover { color: var(--footer-accent); }