/* =====================================================================
   Sentis — Design System (source de vérité)
   ---------------------------------------------------------------------
   Toute valeur (couleur, espacement, taille, z-index, durée) doit
   provenir d'une variable de ce fichier. Jamais de valeur brute dans
   les CSS de modules ou de pages. Cf. AGENTS.md > Règles.
   ===================================================================== */

/* =====================================================================
   1. Scaling system (Osmo) — https://osmo.supply/
   ---------------------------------------------------------------------
   Tout est en em → tout scale automatiquement avec font-size:body.
   - --size-unit       : font-size design (sans unité)
   - --size-container  : largeur fluide entre min et max
   - --size-font       : font-size body, calculée
   - --col             : largeur exacte d'UNE colonne fluide (12-col grid)
                         à utiliser pour les marges/paddings structurels
                         qui doivent matcher la grille.
   ===================================================================== */

/* Desktop */
:root {
	--size-unit: 16;                  /* px (sans unité dans la var) */
	--size-container-ideal: 1440;     /* px de référence design */
	--size-container-min: 992px;
	--size-container-max: 1920px;
	--size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
	--size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));

	/* Padding inline du container — référence unique pour la grille.
	   5em = 80px @ 1440px (scale fluide ailleurs). */
	--container-padding-inline: 5em;
	/* Gap entre colonnes — 1.25em = 20px @ 1440px. */
	--grid-gap: 1.25em;

	/* Largeur exacte d'une colonne fluide dans une grille 10-col
	   placée à l'intérieur d'un .container.
	   Formule : (container_inner - 9 * gap) / 10
	   container_inner = min(100vw, size-container-max) - 2 * padding-inline */
	--col: calc(
		(min(100vw, var(--size-container-max)) - (2 * var(--container-padding-inline)) - (9 * var(--grid-gap)))
		/ 10
	);
}

/* Tablet */
@media screen and (max-width: 991px) {
	:root {
		--size-container-ideal: 834;
		--size-container-min: 768px;
		--size-container-max: 991px;
		/* Sur tablet la grille passe à 6 colonnes (cf. animated-grid) */
		--col: calc(
			(min(100vw, var(--size-container-max)) - (2 * var(--container-padding-inline)) - (5 * var(--grid-gap)))
			/ 6
		);
	}
}

/* Mobile landscape */
@media screen and (max-width: 767px) {
	:root {
		--size-container-ideal: 550;
		--size-container-min: 480px;
		--size-container-max: 767px;
		/* Mobile : 4 colonnes */
		--col: calc(
			(min(100vw, var(--size-container-max)) - (2 * var(--container-padding-inline)) - (3 * var(--grid-gap)))
			/ 4
		);
	}
}

/* Mobile portrait */
@media screen and (max-width: 479px) {
	:root {
		--size-container-ideal: 390;
		--size-container-min: 320px;
		--size-container-max: 479px;
	}
}

/* =====================================================================
   2. Tokens — couleurs, espacements, typo, z-index, durées, eases
   ---------------------------------------------------------------------
   Toutes les valeurs structurantes utilisent --col ou des multiples.
   Les espacements verticaux peuvent aussi être en em (scalent).
   ===================================================================== */

:root {
	/* Couleurs */
	--color-bg: #ffffff;        /* fond du site (blanc franc) */
	--color-surface: #f4f4f4;   /* fond "surface" des cards / modules qui
	                                ont besoin de profondeur visuelle
	                                (FAQ items, testimonials cards, values
	                                cards, etc.). À utiliser à la place
	                                de #ffffff sur tout ce qui doit se
	                                détacher du fond blanc du site. */
	--color-fg: #111111;
	--color-muted: #6b6b6b;
	--color-border: #e5e5e5;
	--color-primary: #e8eaff;
	/* Overlay animated-grid : sombre car le bg du site est clair (#ffffff).
	   Si un jour on passe en dark theme → repasser sur une couleur claire. */
	--color-overlay-grid: #222222;

	/* Typo — tailles fluides via em (scalent avec --size-font) */
	--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace;

	--12px-size: 0.75em;
	--14px-size: 0.875em;
	--16px-size: 1em;
	--20px-size: 1.25em;
	--24px-size: 1.5em;
	--32px-size: 2em;
	--48px-size: 3em;
	--64px-size: 4em;
	--96px-size: 6em;

	/* Espacements verticaux (em → scalent) */
	--space-xs: 0.5em;
	--space-sm: 1em;
	--space-md: 1.5em;
	--space-lg: 2.5em;
	--space-xl: 4em;
	--space-2xl: 6em;
	/* Hauteur des barres d'UI Sketchfab (titre en haut, contrôles en bas)
	   que l'on sort du cadre via le cadrage de l'iframe (cf. projet-page). */
	--sketchfab-chrome: 2.75em;
	--space-3xl: 10em;

	/* Espacements/marges STRUCTURELS — en --col (matchent la grille).
	   Pas demi (`-half`) et quart (`-quarter`) pour finesse en layout.
	   `1.5` / `2.5` etc. invalides en custom-property (les `.` sont
	   interdits), d'où le suffixe `-half` / `-quarter` cohérent. */
	--space-col-quarter: calc(var(--col) / 4);
	--space-col-half:    calc(var(--col) / 2);
	--space-col-1:       var(--col);
	--space-col-1-half:  calc(var(--col) * 1.5);
	--space-col-2:       calc(var(--col) * 2);
	--space-col-2-half:  calc(var(--col) * 2.5);
	--space-col-3:       calc(var(--col) * 3);
	--space-col-3-half:  calc(var(--col) * 3.5);

	/* Z-index */
	--z-base: 0;
	--z-content: 10;
	--z-sticky: 100;
	--z-header: 1000;
	--z-overlay-grid: 200;     /* animated-grid (cf. Osmo) */
	--z-cursor: 9999;
	--z-transition: 9998;

	/* Durées & eases */
	--duration-fast: 0.2s;
	--duration-base: 0.4s;
	--duration-slow: 0.8s;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* =====================================================================
   3. Reset minimal + base
   ===================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Clip horizontal au niveau racine — sinon pendant l'animation
	   d'ouverture/fermeture du menu, [data-main] et l'overlay translatent
	   à -30em (hors viewport à gauche) et certains navigateurs créent
	   une scrollbar horizontale sur <html>. `clip` est préféré à `hidden`
	   car il ne crée pas de scroll container parasite. */
	overflow-x: clip;
}

body {
	margin: 0;
	font-size: var(--size-font);
	font-family: var(--font-sans);
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-fg);
	/* IMPORTANT — pattern Osmo "underlay-nav" :
	   le <body> sert de FOND DU DRAWER (sombre). Le wrapper [data-main]
	   couvre toute la viewport avec le bg clair de la page. Quand le menu
	   s'ouvre, [data-main] glisse à gauche → révèle le body sombre à droite
	   qui apparaît comme background du drawer.
	   Cf. menu-code/menu-code-overrides.css. */
	background: var(--color-fg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Idem que <html> — clippe l'overflow horizontal pendant les translates. */
	overflow-x: clip;
}

/* Wrapper persistant qui contient TOUT le contenu de la page.
   Ouvert dans header.php après le menu, fermé dans footer.php avant </body>.
   - background : couleur claire de la page (couvre le bg sombre du body)
   - min-height : remplit le viewport même si le contenu est court
   - position relative + z-index : DOIT être au-dessus du drawer (z=1 dans
     menu-code.css) pour le RECOUVRIR quand [data-main] revient de
     translateX(-30em) → 0 à la fermeture du menu. Sans ça, on voit les
     items du menu finir leur animation (autoAlpha 1 → 0) au lieu d'être
     masqués par le wrapper qui revient.
     Le header et l'overlay du menu ont z=100 (cf. menu-code.css) → ils
     restent au-dessus de [data-main]. */
[data-main] {
	background: var(--color-bg);
	min-height: 100vh;
	min-height: 100dvh;
	position: relative;
	z-index: 10;
}

/* Conteneur Barba — FOND OPAQUE REQUIS par la transition parallax.
   Pendant `leave`/`enter` (cf. parallax-page-transition.js), DEUX <main>
   coexistent : l'ancien recule (y:-25vh) sous le voile sombre, le nouveau
   glisse par-dessus (y:100vh → 0, z:3). Dans le template Osmo/Webflow
   d'origine, chaque page a son propre background opaque. Ici le fond
   était porté UNIQUEMENT par [data-main] (le wrapper) → les <main> étaient
   transparents → les 2 pages se voyaient l'une à travers l'autre pendant
   toute la transition (textes superposés, effet « pété » + « boum » final
   quand l'ancien container est retiré du DOM).
   - background : opaque, même couleur que la page.
   - min-height : l'ancien <main> doit couvrir le viewport même si la page
     est courte, sinon le nouveau glisse sur un trou.
   ⚠ PAS de z-index/position ici : c'est le JS de transition qui les pose
   (position:fixed au beforeEnter, zIndex:3 à l'enter, clearProps à la fin). */
main[data-barba="container"] {
	background: var(--color-bg);
	min-height: 100vh;
	min-height: 100dvh;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	/* Défensif : on force Inter explicitement même si l'héritage depuis body
	   suffirait normalement. Garde-fou contre les modules tiers qui posent
	   un font-family sur des sélecteurs `h*` (page builders, plugins WP,
	   reset CSS injectés par Kinsta MU, etc.). */
	font-family: var(--font-sans);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.h1 { font-size: var(--96px-size); }
.h2 { font-size: var(--64px-size); }
.h3 { font-size: var(--48px-size); }
.h4 { font-size: var(--32px-size); }

p { margin: 0; }
p + p { margin-top: var(--space-sm); }

a {
	color: inherit;
	text-decoration: none;
}

img, svg, video {
	display: block;
	max-width: 100%;
	height: auto;
}

kbd {
	display: inline-block;
	padding: 0.15em 0.4em;
	font-family: var(--font-mono);
	font-size: var(--14px-size);
	border: 1px solid var(--color-border);
	border-bottom-width: 2px;
	border-radius: 0.25em;
	background: #fff;
}

.meta {
	font-family: var(--font-mono);
	font-size: var(--14px-size);
	color: var(--color-muted);
}

/* =====================================================================
   4. Container — largeur fluide (Osmo)
   ===================================================================== */

.container {
	width: 100%;
	max-width: var(--size-container);
	margin-inline: auto;
	padding-inline: var(--container-padding-inline);
}

.container.medium {
	max-width: calc(var(--size-container) * 0.85);
}

.container.small {
	max-width: calc(var(--size-container) * 0.7);
}

.container.is--full-height {
	height: 100%;
}

/* =====================================================================
   5. Grille 10 colonnes
   ---------------------------------------------------------------------
   À utiliser dans toute section. Toujours dans un .container.
   Les enfants se placent via `grid-column: span X` (X ∈ 1..10).
   Responsive : 10 cols desktop → 6 cols tablet → 4 cols mobile.
   ===================================================================== */

.grid-10 {
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	gap: var(--grid-gap);
}

@media screen and (max-width: 991px) {
	.grid-10 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media screen and (max-width: 767px) {
	.grid-10 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =====================================================================
   6. Sections — padding-block standard
   ---------------------------------------------------------------------
   `.section`, `.featured-slider`, `.hero` (en cascade générale) :
       padding-block 1 col → sections courantes.
   `.section--hero`, `.hero` (override spécifique) :
       padding-top 1.5 col pour dégager du header menu (fixed, top:0),
       padding-bottom 0 → enchaînement direct avec la section suivante.

   Ordre : règle générale d'abord, override hero après → cascade simple,
   pas besoin de jouer sur la spécificité.
   ===================================================================== */

.section,
.hero,
.featured-slider {
	padding-block: var(--space-col-half);
}

/* Page Mentions légales — prose (réutilise .toc-article) dans une section
   avec un peu d'air en haut/bas. */
.legal {
	padding-block: var(--space-col-1) var(--space-col-1-half);
}

.section--hero,
.hero {
	padding-top: var(--space-col-1-half);
	padding-bottom: 0;
}

/* Hero — H1 (7 cols) + CTA (3 cols) sur la même row de la grid-10.
   align-items: end → les deux cellules s'alignent sur la baseline du
   bas. Le CTA est placé en bas-droite de sa cellule. Sous 991px la
   grid passe à 6 cols → H1 et CTA chacun span auto. */
.hero__grid {
	align-items: end;
}

.hero__cta {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	padding-bottom: 0.6em; /* aligne baseline du pill avec la baseline du H1 */
}

/* Marquee dans le hero : vit dans le couloir cols 7 → fin de la RANGÉE
   2 (la même rangée que la `.hero__description` à gauche).
   `align-self: start` (override du `align-items: end` posé sur
   `.hero__grid` pour la rangée 1 H1+CTA) → le top du ruban de logos
   s'aligne sur la 1ère ligne de la description « Modélisation produits ».
   `min-width: 0` indispensable pour qu'overflow:hidden fonctionne
   dans une grid-column. */
.hero__marquee {
	margin-top: var(--space-col-quarter); /* même offset que la description pour matcher le top visuellement */
	min-width: 0;
	align-self: start;
}

.hero__description {
	margin: var(--space-col-quarter) 0 0;
	font-size: var(--20px-size);
	line-height: 1.4;
	color: var(--color-muted);
	align-self: start;
	letter-spacing: -0.01em;
}

@media screen and (max-width: 991px) {
	/* Tablet : H1 prend toute la grid (6 cols), CTA passe en dessous (6 cols) */
	.hero__grid > .hero__title {
		grid-column: 1 / -1 !important;
	}
	.hero__grid > .hero__cta {
		grid-column: 1 / -1 !important;
		justify-content: flex-start;
		padding-bottom: 0;
		padding-top: var(--space-col-half);
	}
	/* Marquee : pleine largeur sous la description sur tablet/mobile. */
	.hero__grid > .hero__marquee {
		grid-column: 1 / -1 !important;
	}
}

/* =====================================================================
   7. Section « À propos de moi » (front-page)
   ---------------------------------------------------------------------
   Pattern repris du moodboard fourni : eyebrow gauche + grosse phrase
   droite, puis portrait + bio sur la ligne suivante, et 4 stats en bas.
   Le H2 sémantique = "À propos de moi" est l'eyebrow (small visible),
   et la grosse phrase est un <p class="about__lead">. Choix conscient
   pour respecter le pattern du moodboard tout en gardant un H2 court.
   ===================================================================== */

.about {
	padding-block: var(--space-col-1);
}

.about__grid {
	row-gap: var(--space-col-half);
	align-items: start;
}

/* --- Eyebrow (h2 sémantique, style visuel small + carré orange) --- */
.about__eyebrow {
	grid-column: span 3;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding-top: 0.4em;
	font-size: var(--14px-size);
	font-weight: 500;
	/* Override de la `letter-spacing: -0.02em` héritée de la règle h1-h6 :
	   l'eyebrow est en uppercase, il lui faut du tracking positif. */
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--color-fg);
}

.about__eyebrow-dot {
	width: 0.7em;
	height: 0.7em;
	background-color: var(--color-primary);
	border-radius: 0.1em;
	flex-shrink: 0;
	display: inline-block;
}

/* --- Lead — la grosse phrase, équivalent visuel d'un h2 --- */
.about__lead {
	grid-column: span 7;
	margin: 0;
	font-size: var(--48px-size);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--color-fg);
}

/* --- Ligne 2 : portrait (col 4 / span 3) + 2 marquees stackés
   (col 7 / span 4), alignés sur la même ligne. Le wrapper marquees a
   `align-self: stretch` → il s'étire à la hauteur du portrait (1:1
   aspect-ratio). Chaque marquee enfant prend flex:1 pour partager
   cette hauteur en deux moitiés égales. --- */
.about__media {
	grid-column: 4 / span 3;
	margin: 0;
}

.about__image {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 1em;
	display: block;
}

.about__marquees {
	grid-column: 7 / span 4;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: var(--grid-gap);
	min-width: 0;       /* permet aux marquees enfants de se cropper */
	overflow: hidden;   /* safety net */
}

/* Chaque marquee enfant prend la moitié de la hauteur de l'image,
   sans card (pas de bg / pas de border / pas de padding inutile) — les
   logos doivent occuper directement toute la cell, le plus gros possible.
   L'overflow:hidden du module clippe naturellement les logos qui sortent. */
.about__marquees > .draggable-marquee {
	flex: 1 1 0;
	min-height: 0;      /* important pour que flex:1 fonctionne dans
	                       un parent en hauteur fixe */
	padding-block: 0;   /* override du padding-block du marquee global */
}

/* Logos qui remplissent toute la hauteur disponible de la cell.
   Plus de padding-block sur l'item → l'image prend 100% de la hauteur
   de son container. Le `aspect-ratio: auto` du module garde le ratio
   natif des logos (paysage). */
.about__marquees .draggable-marquee__item {
	height: 100%;
	margin-right: 1.5em;
	padding-block: 0;
}

.about__marquees .draggable-marquee__item-img {
	height: 100%;
	max-height: none;   /* pas de cap → l'image fait toute la hauteur
	                       de la cell, donc ~6-7em sur desktop @ 1440 */
}

/* --- Ligne 3 : barre des 4 stats ---
   SPEC DEMANDÉE (littérale) : chaque stat = 2.5 col de width — dont
   2 col de contenu (le chiffre + son label) + 0.5 col de gap. 4 × 2.5
   col = 10 col → remplit PILE la largeur de la grille parent.

   Implémentation :
     - .about__stats : grid de 4 cellules égales (`repeat(4, 1fr)`)
       → chaque cellule fait 1/4 de la largeur du parent = 2.5 col.
     - .about__stat  : padding-right = 20% = 0.5/2.5 de la cellule
       → le contenu (le chiffre) occupe 80% de la cellule = 2 col,
       les 20% restants = 0.5 col de gap avant la cellule suivante.

   Résultat : 4 chiffres équidistants, alignés sur des "boundaries"
   proportionnelles aux 10 colonnes (cells aux positions 0%, 25%, 50%,
   75% en partant de la gauche). */
.about__stats {
	grid-column: 1 / -1;
	list-style: none;
	margin: 0;
	/* Padding-bottom 0 (demandé) : la stack des stats se cale directement
	   sur la section suivante sans coussin vertical supplémentaire. Le
	   padding-top reste pour respirer après le portrait. */
	padding: var(--space-col-half) 0 0;
	border-top: 1px solid var(--color-border);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	row-gap: var(--space-col-half);
}

.about__stat {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	align-items: flex-start;
	text-align: left;
	min-width: 0;
	/* 20% right padding = 0.5 col / 2.5 col → le "gap" de la spec
	   utilisateur, intégré à chaque cellule (et non comme grid-gap
	   externe, ce qui éviterait de remplir pile 10 col). */
	padding-right: 20%;
	box-sizing: border-box;
}

.about__stat-number {
	margin: 0;
	font-size: var(--64px-size);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--color-fg);
}

.about__stat-label {
	margin: 0;
	font-size: var(--14px-size);
	line-height: 1.4;
	color: var(--color-muted);
}

/* Tablet : la grid passe à 6 cols → on stack tout en pleine largeur,
   marquees passent en dessous de l'image (et plus à droite), et les
   stats wrap en 2×2 (flex-basis 50% - gap). */
@media screen and (max-width: 991px) {
	.about__grid > .about__eyebrow,
	.about__grid > .about__lead,
	.about__grid > .about__stats {
		grid-column: 1 / -1 !important;
	}

	.about__grid > .about__media {
		grid-column: 1 / span 3 !important;
	}

	.about__grid > .about__marquees {
		grid-column: 4 / span 3 !important;
		align-self: stretch;
	}

	.about__lead {
		font-size: var(--32px-size);
	}

	/* Tablet : 2 cellules par rangée (toujours la même règle 80%/20%). */
	.about__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.about__stat-number {
		font-size: var(--48px-size);
	}
}

/* Mobile : eyebrow + lead full width, image plus large, marquees stack
   en dessous de l'image en pleine largeur, stats en colonne. */
@media screen and (max-width: 767px) {
	.about__grid > .about__media {
		grid-column: 1 / -1 !important;
		max-width: 18em;
	}

	.about__grid > .about__marquees {
		grid-column: 1 / -1 !important;
		height: 14em; /* hauteur fixe sur mobile, équivalent à 2x7em */
	}

	/* Mobile : 1 cellule par rangée, pas de gap interne. */
	.about__stats {
		grid-template-columns: minmax(0, 1fr);
	}

	.about__stat {
		padding-right: 0;
	}
}

/* =====================================================================
   7. Utilities accessibilité
   ===================================================================== */

.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* =====================================================================
   8. Contact — bloc coordonnées (page Contact)
   ---------------------------------------------------------------------
   Réutilise le pattern `.about` (eyebrow span 3 + lead span 7) puis une
   rangée de blocs « label + valeur » alignée sur la grille 10-col.
   ===================================================================== */

.contact-info {
	padding-block: var(--space-col-1);
}

.contact-info__list {
	grid-column: 1 / -1;
	list-style: none;
	margin: var(--space-col-half) 0 0;
	padding: var(--space-col-half) 0 0;
	border-top: 1px solid var(--color-border);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--grid-gap);
}

.contact-info__item {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	min-width: 0;
}

.contact-info__label {
	font-size: var(--14px-size);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--color-muted);
}

.contact-info__value {
	font-size: var(--20px-size);
	line-height: 1.3;
	color: var(--color-fg);
	text-decoration: none;
}

@media screen and (max-width: 767px) {
	.contact-info__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--space-col-half);
	}
}

/* =====================================================================
   9. Blog — index des articles (page Blog)
   ===================================================================== */

.blog-list {
	padding-block: var(--space-col-1);
}

.blog-list__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-col-1) var(--grid-gap);
}

.blog-card {
	display: flex;
	flex-direction: column;
	gap: 0.8em;
	min-width: 0;
}

.blog-card__link {
	display: flex;
	flex-direction: column;
	gap: 0.8em;
	text-decoration: none;
	color: inherit;
}

.blog-card__media {
	aspect-ratio: 4 / 3;
	border-radius: 0.6em;
	overflow: hidden;
	background: var(--color-primary);
}

.blog-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--duration-slow) var(--ease-out);
}

.blog-card__link:hover .blog-card__img {
	transform: scale(1.04);
}

.blog-card__meta {
	font-size: var(--14px-size);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.blog-card__title {
	font-size: var(--24px-size);
	line-height: 1.2;
	letter-spacing: -0.01em;
	font-weight: 500;
	color: var(--color-fg);
}

.blog-card__excerpt {
	font-size: var(--16px-size);
	line-height: 1.5;
	color: var(--color-muted);
}

.blog-list__empty {
	row-gap: var(--space-col-half);
	align-items: end;
}

/* --- Pagination ---------------------------------------------------- */
.blog-pagination {
	margin-top: var(--space-col-1);
}

.blog-pagination__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
}

.blog-pagination__item {
	display: flex;
}

.blog-pagination__item .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6em;
	height: 2.6em;
	padding: 0 0.9em;
	border: 1px solid var(--color-border);
	border-radius: 0.5em;
	font-size: var(--16px-size);
	line-height: 1;
	color: var(--color-fg);
	text-decoration: none;
	transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}

.blog-pagination__item a.page-numbers:hover {
	border-color: var(--color-fg);
	background-color: var(--color-surface);
	color: var(--color-fg);
}

.blog-pagination__item .page-numbers.current {
	border-color: var(--color-primary);
	background-color: var(--color-primary);
	color: var(--color-fg);
}

.blog-pagination__item .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

@media screen and (max-width: 991px) {
	.blog-list__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 767px) {
	.blog-list__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =====================================================================
   10. Article (single post) — image de couverture
   ---------------------------------------------------------------------
   Le corps de l'article + le sommaire vivent dans le module Osmo
   `table-contents` (.toc-layout). Ici on ne style que le hero (réutilise
   `.hero`) et l'image de couverture pleine largeur de la grille.
   ===================================================================== */

.article__cover {
	padding-bottom: var(--space-col-half);
}

.article__cover-fig {
	margin: 0;
}

.article__cover-img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 1em;
	display: block;
}