: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: #fef6f7;
	--color-surface: #ffffff;
	--color-text: #1a1420;
	--color-text-muted: #706d74;
	--color-accent: #E40618;
	--color-accent-text: #ffffff;
	--color-accent-onbg: #E40618;
	--color-accent-on-white: #E40618;
	--color-accent-onsoft: #c10614;
	--color-accent-soft: #fbdcdf;
	--color-accent-2: #16181D;
	--color-accent-2-text: #ffffff;
	--color-accent-2-onbg: #686a6d;
	--color-accent-3: #FFAE00;
	--color-accent-3-text: #1a1420;
	--color-border: #fbdcdf;
	--radius-card: 3px;
	--radius-image: 3px;
	--radius-field: 3px;
	--radius-button: 3px;
	--measure: 680px;
	--logo-height: 56px;
	--header-bg: #FFFFFF;
	--header-text: #1a1420;
	--header-text-muted: #6a666e;
	--header-accent: #16181D;
	--footer-bg: #16181D;
	--footer-text: #ffffff;
	--footer-text-muted: #adaeb0;
	--footer-accent: #86878b;
	--hero-fallback-from: #E40618;
	--hero-fallback-via: #16181D;
	--hero-fallback-to: #FFAE00;
	--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: 0 22px 22px -14px rgba(26, 20, 32, 0.28);
	--shadow-hover: 0 40px 40px -18px rgba(26, 20, 32, 0.55);
}

* { 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: 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: 960px; }
.page-layout { width: 100%; max-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: 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; }
.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); }
/* 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; }

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

/* 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); 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; }

/* 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-kicker { color: var(--color-accent); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .5rem; }
.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; }
.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); }
.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); }
.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: 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); }

.article-card:hover { transform: translateY(-6px) scale(1.015); border-color: var(--color-accent-2); box-shadow: var(--shadow-hover); }
.article-card:hover .article-card-thumb img { transform: scale(1.06); }
.article-card .article-card-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.block-button a:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.block-form .form-submit:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.block-gallery a:hover img, .block-gallery img:hover { transform: scale(1.04); }
.block-hero:not(:has(.hero-bg))::after {
	content: '';
	position: absolute;
	inset: -25%;
	z-index: -1;
	background: var(--gradient-vibrant);
	animation: xt-gradient-flow 18s ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes xt-gradient-flow {
	0% { transform: translate3d(0, 0, 0) rotate(0deg); }
	100% { transform: translate3d(-6%, -5%, 0) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
	.block-hero:not(:has(.hero-bg))::after { animation: none; }
}
@supports (animation-timeline: view()) {
	/* .blocks > * + * (pas .blocks > *) : exclut volontairement le tout
	   premier bloc de la page, deja quasi entierement visible au chargement
	   (souvent juste sous le header, parfois plein ecran) - meme principe que
	   le hero natif, qui n'a jamais cette animation car rendu hors de
	   .blocks. Sans cette exclusion, l'animation liee au scroll (pas au
	   temps) ne se termine pas forcement au chargement pour un element deja
	   presque entierement dans la fenetre - reste visible un residu de
	   quelques pixels de translateY (repere par Johan, "petite zone de 4 ou 5
	   pixels" sur son premier bloc). */
	.blocks > * + *, .sidebar .card-list .article-card, .card-list > .article-card {
		animation: xt-reveal linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 25%;
	}
	@keyframes xt-reveal { from { transform: translateY(28px); } to { transform: translateY(0); } }
	@media (prefers-reduced-motion: reduce) {
		.blocks > * + *, .sidebar .card-list .article-card, .card-list > .article-card { animation: none !important; }
	}
}