: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: #fefefe;
	--color-surface: #ffffff;
	--color-text: #1a1420;
	--color-text-muted: #706d74;
	--color-accent: #DDEBDD;
	--color-accent-text: #1a1420;
	--color-accent-onbg: #676f67;
	--color-accent-on-white: #707970;
	--color-accent-onsoft: #676f67;
	--color-accent-soft: #fafcfa;
	--color-accent-2: #7FA88A;
	--color-accent-2-text: #1a1420;
	--color-accent-2-onbg: #5b7963;
	--color-accent-3: #D3B37C;
	--color-accent-3-text: #1a1420;
	--color-border: #fafcfa;
	--radius-card: 16px;
	--radius-image: 14px;
	--radius-field: 12px;
	--radius-button: 64px;
	--measure: 680px;
	--logo-height: 56px;
	--header-bg: #F7FAF7;
	--header-text: #1a1420;
	--header-text-muted: #67656b;
	--header-accent: #5b7963;
	--footer-bg: #E5EEE7;
	--footer-text: #1a1420;
	--footer-text-muted: #616066;
	--footer-accent: #546f5b;
	--hero-fallback-from: #DDEBDD;
	--hero-fallback-via: #7FA88A;
	--hero-fallback-to: #D3B37C;
	--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(127, 168, 138, 0.28);
	--shadow-hover: 0 22px 22px -14px rgba(127, 168, 138, 0.28), 0 13px 13px -8px rgba(211, 179, 124, 0.22);
}

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