/* ==========================================================================
   StudioClick — système visuel unique
   --------------------------------------------------------------------------
   Source de vérité : DESIGN.md à la racine du projet.

   Direction : studio éditorial numérique indépendant depuis 2012. Grille
   éditoriale et filets 1 px (transposition de Wired) ; retenue, photographie
   et alternance de surfaces (transposition d'Apple). Signature : la ligne de
   crête, reprise de la polyligne montante du logo.

   Contraintes structurelles de ce fichier, à ne pas contourner :
     - rayons : 8 px (médias), 12 px (contrôles), 14 px (média rare), capsule ;
     - ombres : médias, et bouton primaire uniquement ;
     - aucun dégradé décoratif, aucun halo, aucun verre dépoli, aucun 3D ;
     - trois familles de hero et une dérivée, pas davantage ;
     - aucune passe d'overrides ajoutée en fin de fichier : on modifie la
       primitive concernée.

   Plan
     1. Jetons
     2. Police
     3. Reset et base
     4. Mise en page
     5. Typographie
     6. Signature : crête et grain
     7. Boutons, liens, statuts, icônes
     8. Formulaires
     9. En-tête et navigation
    10. Pied de page
    11. Fil d'Ariane
    12. Heros
    13. Composants
    14. Contenu éditorial (the_content)
    15. Commentaires
    16. Mouvement
    17. Préférences système
   ========================================================================== */

/* ==========================================================================
   1. JETONS
   ========================================================================== */

:root {
	/* --- Couleurs : valeurs verrouillées par le brief --- */
	--sc-ink: #17191f;
	--sc-ink-2: #22252d;
	--sc-paper: #ffffff;
	--sc-warm: #f7f6f4;
	--sc-cool: #eef0f3;
	--sc-text: #343842;
	--sc-muted: #5b606b;
	--sc-line: #d9dbe0;
	--sc-pink: #d80d6d;

	/* --- Variantes justifiées par la mesure de contraste (voir DESIGN.md) ---
	   #d80d6d rend 4,38:1 sur --sc-cool et 4,35:1 sur --sc-ink : sous le seuil
	   AA de 4,5:1. Le rose de marque sert donc aux aplats ; le texte rose
	   utilise ces deux variantes, mesurées à 5,65:1 et 5,99:1 au minimum. */
	--sc-pink-ink: #b80a5c;
	--sc-pink-on-dark: #f2669b;
	/* Rose de texte du contexte courant : remappé sur les surfaces encre. */
	--sc-accent-text: #b80a5c;
	--sc-pink-press: #b80a5c;
	--sc-on-dark: #ffffff;
	--sc-muted-on-dark: #c9ccd4;
	--sc-line-on-dark: rgba(255, 255, 255, 0.16);
	--sc-line-strong: #bcc0c8;
	/* Bordure de contrôle de formulaire : 3,98:1 sur papier (WCAG 1.4.11). */
	--sc-line-input: #7a7f8a;
	--sc-error: #b3261e;
	--sc-success: #1a6d3d;

	/* --- Anneau de focus : redéfini en blanc sur les surfaces encre --- */
	--sc-focus-ring: #0b57d0;

	/* --- Typographie --- */
	--sc-font: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--sc-track-display: -0.035em;
	--sc-track-title: -0.025em;

	/* --- Grille --- */
	--sc-container: 1280px;
	--sc-gutter: 24px;
	--sc-measure: 760px;
	/* Marge extérieure d'une section pleine largeur, alignée sur le conteneur.
	   Exprimée en % de la section : insensible à la barre de défilement. */
	--sc-edge: max(var(--sc-gutter), calc((100% - var(--sc-container)) / 2));

	/* --- Espaces : 8 · 16 · 24 · 32 · 48 · 64 · 96 · 128 --- */
	--sc-1: 8px;
	--sc-2: 16px;
	--sc-3: 24px;
	--sc-4: 32px;
	--sc-5: 48px;
	--sc-6: 64px;
	--sc-7: 96px;
	--sc-8: 128px;
	--sc-section-y: var(--sc-6);
	--sc-section-y-dense: var(--sc-5);
	--sc-head-gap: var(--sc-4);

	/* --- Formes : contrôles 12 px, médias 8/14, capsule sémantique --- */
	--sc-radius-compact: 8px;
	--sc-radius-control: 12px;
	--sc-radius-standard: 14px;
	--sc-radius-pill: 999px;

	/* --- Profondeur : médias, et bouton primaire --- */
	--sc-shadow-media: 0 18px 40px rgba(23, 25, 31, 0.14);
	--sc-shadow-btn: 0 12px 26px rgba(216, 13, 109, 0.24);
	--sc-shadow-btn-inset: inset 0 1px 0 rgba(255, 255, 255, 0.2);

	/* --- Mouvement --- */
	--sc-duration-ui: 180ms;
	--sc-duration-reveal: 500ms;
	--sc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* --- Divers --- */
	--sc-header-h: 72px;
	--sc-hero-index-h: 380px;

	/* Crête : hauteur du SVG, sommet visuel (centre 11,7 − demi-trait 2,3),
	   zone de sécurité sous le contenu, padding-bottom qui en résulte. */
	--sc-ridge-h: 110px;
	--sc-ridge-peak-top: 9px;
	--sc-ridge-safe: 28px;
	--sc-hero-ridge-pad: calc(var(--sc-ridge-h) - var(--sc-ridge-peak-top) + var(--sc-ridge-safe));
	--sc-hero-h1-size: clamp(2rem, 4.05vw, 3.7rem);
	--sc-after-hero-y: 44px;
	--sc-hero-photo-rule: 4px;
	--sc-dossier-value: clamp(1.625rem, 2vw, 2rem);
}

@media (min-width: 640px) {
	:root {
		--sc-gutter: 40px;
		--sc-section-y: var(--sc-7);
		--sc-section-y-dense: var(--sc-6);
		--sc-head-gap: var(--sc-5);
		--sc-after-hero-y: 56px;
	}
}

@media (min-width: 1024px) {
	:root {
		--sc-gutter: 64px;
		--sc-header-h: 76px;
		--sc-hero-index-h: 440px;
		--sc-ridge-safe: 36px;
		--sc-after-hero-y: 72px;
	}
}

/* Contexte encre : une surface sombre redéfinit les jetons de texte et de filet
   au lieu de multiplier des surcharges « sur fond sombre » composant par
   composant. Tout descendant s'adapte alors sans règle supplémentaire, y compris
   un composant ajouté plus tard. Seuls les jetons de texte sont remappés : ceux
   qui servent d'aplat (--sc-ink, --sc-pink, --sc-paper) gardent leur valeur,
   sinon les boutons et les surfaces s'inverseraient.
   Les heros photographiques et d'index sont sombres par définition : ils
   figurent donc dans cette liste au même titre que .sc-section--ink. */
.sc-section--ink,
.sc-on-ink,
.sc-hero--photo,
.sc-hero--index {
	--sc-text: var(--sc-on-dark);
	--sc-muted: var(--sc-muted-on-dark);
	--sc-accent-text: var(--sc-pink-on-dark);
	--sc-line: var(--sc-line-on-dark);
	--sc-line-strong: var(--sc-line-on-dark);
	--sc-focus-ring: var(--sc-paper);
}

@media (min-width: 1280px) {
	:root {
		--sc-section-y: var(--sc-8);
		--sc-section-y-dense: var(--sc-7);
		--sc-hero-index-h: 480px;
	}
}

@media (min-width: 1440px) {
	:root {
		--sc-gutter: 80px;
	}
}

/* ==========================================================================
   2. POLICE
   --------------------------------------------------------------------------
   Inter variable auto-hébergée, un seul fichier préchargé. Décision et motif
   documentés dans DESIGN.md § 5 : pas de seconde famille display, la
   personnalité vient de la discipline (graisses 400/600/700, tracking négatif
   au display, chiffres tabulaires sur tous les nombres structurels).
   ========================================================================== */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/inter-var-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   3. RESET ET BASE
   ========================================================================== */

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

html {
	/* Aucune image ne peut élargir le document : garde-fou global 320 px. */
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--sc-paper);
	color: var(--sc-text);
	font-family: var(--sc-font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: var(--sc-ink);
	font-weight: 700;
	text-wrap: balance;
}

p {
	margin: 0;
}

dt,
dd {
	margin: 0;
	padding: 0;
}

img,
picture,
svg,
video {
	max-width: 100%;
}

img {
	height: auto;
	border-style: none;
}

svg {
	flex: none;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

a {
	color: var(--sc-pink-ink);
}

hr {
	height: 0;
	margin: var(--sc-5) 0;
	border: 0;
	border-top: 1px solid var(--sc-line);
}

/* Chiffres structurels : réflexe d'éditeur, Inter le gère nativement. */
time,
.sc-num,
.sc-dossier__value,
.sc-timeline__year,
.sc-facts__value,
.sc-fact__value,
.sc-steps__num {
	font-variant-numeric: tabular-nums;
}

/* Les ancres ne passent jamais sous l'en-tête collant. */
[id] {
	scroll-margin-top: calc(var(--sc-header-h) + var(--sc-3));
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.sc-skip-link {
	position: absolute;
	top: -100px;
	left: var(--sc-2);
	z-index: 1001;
	padding: 12px 20px;
	border-radius: var(--sc-radius-compact);
	background: var(--sc-ink);
	color: var(--sc-on-dark);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.sc-skip-link:focus {
	top: var(--sc-2);
}

/* Un seul mécanisme de focus, visible sur clair comme sur encre : la variable
   d'anneau est redéfinie par les contextes sombres (voir .sc-on-ink). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--sc-focus-ring);
	outline-offset: 2px;
	border-radius: var(--sc-radius-compact);
}

/* ==========================================================================
   4. MISE EN PAGE
   --------------------------------------------------------------------------
   Un seul axe d'alignement pour tout le site. Un fond pleine largeur se
   déclare sur la <section> ; le contenu reste dans .sc-container.
   ========================================================================== */

.sc-container {
	width: 100%;
	max-width: calc(var(--sc-container) + 2 * var(--sc-gutter));
	margin-inline: auto;
	padding-inline: var(--sc-gutter);
}

.sc-container--measure {
	max-width: calc(var(--sc-measure) + 2 * var(--sc-gutter));
}

.sc-section {
	padding-block: var(--sc-section-y);
}

.sc-section--dense {
	padding-block: var(--sc-section-y-dense);
}

/* Surfaces : le changement de ton EST la transition entre deux sections. */
.sc-section--warm {
	background: var(--sc-warm);
}

.sc-section--cool {
	background: var(--sc-cool);
}

.sc-section--ink,
.sc-on-ink {
	background: var(--sc-ink);
	color: var(--sc-muted-on-dark);
	/* Sur encre, l'anneau de focus bleu tombe à 2,74:1 : il passe en blanc. */
	--sc-focus-ring: var(--sc-paper);
	--sc-line: var(--sc-line-on-dark);
	--sc-line-strong: var(--sc-line-on-dark);
}

.sc-section--ink h1,
.sc-section--ink h2,
.sc-section--ink h3,
.sc-on-ink h1,
.sc-on-ink h2,
.sc-on-ink h3,
.sc-on-ink strong {
	color: var(--sc-on-dark);
}

/* Deux surfaces sombres consécutives : micro-écart de ton, pas de bordure. */
.sc-section--ink + .sc-section--ink {
	background: var(--sc-ink-2);
}

/* Filet 1 px : la séparation par défaut, avant toute autre solution. */
.sc-rule {
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--sc-line);
}

.sc-section__head {
	max-width: 44ch;
	margin-bottom: var(--sc-head-gap);
}

.sc-section__head--row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sc-3);
	max-width: none;
}

.sc-section__head p {
	margin-top: var(--sc-2);
}

.sc-section__deck {
	max-width: 62ch;
	margin-bottom: var(--sc-5);
}

.sc-stack {
	display: grid;
	gap: var(--sc-3);
}

.sc-stack--wide {
	gap: var(--sc-5);
}

/* Rythme entre blocs successifs d'une même section. Ces règles remplacent les
   marges déclarées au cas par cas dans les gabarits : le rythme vertical
   reste décrit à un seul endroit. */
.sc-media + .sc-prose,
.sc-prose + .sc-tags,
.sc-prose + .sc-actions,
.sc-tags + .sc-author,
.sc-media + .sc-media,
.sc-rows + .sc-pagination {
	margin-top: var(--sc-4);
}

/* ==========================================================================
   5. TYPOGRAPHIE
   ========================================================================== */

.sc-display {
	font-size: clamp(2.125rem, 4.4vw, 4rem);
	line-height: 1.03;
	letter-spacing: var(--sc-track-display);
	max-width: 22ch;
}

/* Titre de projet, plus long : palier inférieur pour rester sur 3 lignes. */
.sc-display--long {
	font-size: clamp(1.8125rem, 3.7vw, 3.5rem);
	line-height: 1.06;
	letter-spacing: -0.03em;
	max-width: 26ch;
}

.sc-h2 {
	font-size: clamp(1.875rem, 3vw, 3rem);
	line-height: 1.08;
	letter-spacing: var(--sc-track-title);
	max-width: 26ch;
}

.sc-h3 {
	font-size: clamp(1.1875rem, 1.5vw, 1.5rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

.sc-lead {
	max-width: 56ch;
	font-size: clamp(1.0625rem, 1.2vw, 1.3125rem);
	line-height: 1.5;
	color: var(--sc-muted);
}

/* Label structurel unique du site : capitales tracées, jamais décoratif. */
.sc-label {
	display: block;
	margin-bottom: var(--sc-2);
	color: var(--sc-accent-text);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sc-label--on-dark {
	color: var(--sc-pink-on-dark);
}

.sc-label--quiet {
	color: var(--sc-muted);
}

.sc-meta {
	color: var(--sc-muted);
	font-size: 15px;
	line-height: 1.45;
}

.sc-on-ink .sc-meta,
.sc-section--ink .sc-meta {
	color: var(--sc-muted-on-dark);
}

/* Colonne de lecture longue : 18 px / 1,65 sur 760 px. */
.sc-prose {
	max-width: var(--sc-measure);
	font-size: 18px;
	line-height: 1.65;
}

/* Contenus d'archive : deux couleurs saisies en ligne dans l'éditeur d'origine
   échouent au seuil AA sur papier — #ff0000 à 4:1 et #339966 à 3,57:1. Elles
   portent une emphase, pas une information : on les remappe sur les deux
   couleurs sémantiques du système (6,6:1 et 6,4:1), ce qui conserve l'intention
   de l'auteur en passant le seuil. Le texte n'est pas réécrit.
   `!important` est ici nécessaire — un attribut `style` ne se bat pas autrement.
   Il reste borné à deux valeurs, dans le corps d'article uniquement, et
   l'archive est fermée : toute nouvelle valeur fautive serait signalée par
   l'audit avant publication. */
.sc-prose [style*="#ff0000" i],
.sc-prose [style*="#f00" i] {
	color: var(--sc-error) !important;
}

.sc-prose [style*="#339966" i] {
	color: var(--sc-success) !important;
}

@media (max-width: 639px) {
	.sc-display,
	.sc-display--long,
	.sc-h2 {
		max-width: none;
	}

	.sc-prose {
		font-size: 17px;
	}

	.sc-label {
		font-size: 11px;
	}
}

/* ==========================================================================
   6. SIGNATURE : CRÊTE MODULAIRE ET GRAIN
   --------------------------------------------------------------------------
   Un seul SVG, un seul path continu (plats + Bézier). Rose de marque,
   trait 4,6 px, vector-effect non-scaling-stroke. Aucun segment juxtaposé.
   ========================================================================== */

.sc-ridge {
	display: block;
	width: 100%;
	height: var(--sc-ridge-h);
	margin: 0;
	padding: 0;
	overflow: visible;
	line-height: 0;
	font-size: 0;
	color: var(--sc-pink);
	pointer-events: none;
}

.sc-ridge__svg {
	display: block;
	width: 100%;
	height: var(--sc-ridge-h);
	margin: 0;
	padding: 0;
	overflow: visible;
	vertical-align: bottom;
}

.sc-ridge--end {
	max-width: 640px;
	margin-left: auto;
	height: 72px;
}

.sc-ridge--end .sc-ridge__svg {
	height: 72px;
}

/* Position absolue commune : même emplacement, même échelle, aucun décalage. */
.sc-ridge--hero-index,
.sc-ridge--hero-desktop {
	position: absolute;
	z-index: 4;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: var(--sc-ridge-h);
	margin: 0;
	overflow: visible;
}

.sc-ridge--hero-desktop {
	display: none;
}

.sc-ridge--hero-mobile {
	display: none;
}

@media (max-width: 1023px) {
	.sc-ridge--hero-mobile {
		display: block;
		position: relative;
		left: 0;
		right: 0;
		bottom: auto;
		order: 2;
		width: 100%;
		height: var(--sc-ridge-h);
		margin: calc(var(--sc-ridge-h) * -1) 0 0;
		overflow: visible;
	}

	.sc-ridge--hero-mobile .sc-ridge__svg {
		height: var(--sc-ridge-h);
	}
}

/* Grain : une ou deux surfaces sombres au maximum, 1,5 %. Aucun fichier
   réseau supplémentaire, aucune texture sur surface claire ni sur photo. */
.sc-grain {
	position: relative;
	isolation: isolate;
}

.sc-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.015;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   7. BOUTONS, LIENS, STATUTS, ICÔNES
   ========================================================================== */

.sc-btn__label {
	display: block;
	line-height: 1.2;
}

.sc-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 48px;
	padding: 5px 7px 5px 20px;
	border: 1px solid transparent;
	border-radius: var(--sc-radius-control);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--sc-duration-ui) var(--sc-ease),
		border-color var(--sc-duration-ui) var(--sc-ease),
		color var(--sc-duration-ui) var(--sc-ease),
		box-shadow var(--sc-duration-ui) var(--sc-ease),
		transform var(--sc-duration-ui) var(--sc-ease);
}

.sc-btn:active {
	transform: translateY(1px);
}

.sc-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 50%;
	transition: transform var(--sc-duration-ui) var(--sc-ease),
		background-color var(--sc-duration-ui) var(--sc-ease);
}

.sc-btn__icon svg {
	width: 17px;
	height: 17px;
	display: block;
}

.sc-btn:hover .sc-btn__icon {
	transform: translate(1px, -1px);
}

.sc-btn--primary {
	background: var(--sc-pink);
	color: var(--sc-paper);
	border-color: rgba(255, 255, 255, 0.16);
	box-shadow: var(--sc-shadow-btn), var(--sc-shadow-btn-inset);
}

.sc-btn--primary .sc-btn__icon {
	background: rgba(255, 255, 255, 0.15);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.sc-btn--primary:hover {
	background: var(--sc-pink-press);
	color: var(--sc-paper);
}

.sc-btn--ink {
	background: var(--sc-ink);
	color: var(--sc-paper);
}

.sc-btn--ink .sc-btn__icon {
	background: rgba(255, 255, 255, 0.1);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.sc-btn--ink:hover {
	background: var(--sc-ink-2);
	color: var(--sc-paper);
}

.sc-btn--outline {
	border-color: var(--sc-line-input);
	background: var(--sc-paper);
	color: var(--sc-ink);
}

.sc-btn--outline .sc-btn__icon {
	background: var(--sc-warm);
	box-shadow: inset 0 0 0 1px var(--sc-line);
}

.sc-btn--outline:hover {
	border-color: var(--sc-ink);
	color: var(--sc-ink);
}

.sc-btn--outline-on-dark {
	border-color: #505560;
	background: #20232a;
	color: var(--sc-on-dark);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.sc-btn--outline-on-dark .sc-btn__icon {
	background: #30343d;
	box-shadow: inset 0 0 0 1px #4b505c;
}

.sc-btn--outline-on-dark:hover {
	border-color: var(--sc-paper);
	color: var(--sc-on-dark);
}

.sc-btn--outline-on-dark:hover .sc-btn__icon {
	background: #3a3f49;
}

/* Bouton sans disque (header compact, pagination chiffrée). */
.sc-btn--plain {
	gap: 0;
	padding: 10px 20px;
}

.sc-btn--plain .sc-btn__icon {
	display: none;
}

.sc-icon {
	display: block;
	flex: none;
	overflow: visible;
	color: #474e5d;
	width: 28px;
	height: 28px;
}

.sc-section--ink .sc-icon,
.sc-hero--index .sc-icon,
.sc-hero--photo .sc-icon {
	color: var(--sc-muted-on-dark);
}

.sc-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: flex-start;
	align-self: start;
	gap: 12px;
}

.sc-actions .sc-btn {
	flex: none;
	align-self: center;
	white-space: nowrap;
}

/* Mise en avant produit de l'accueil : le texte et les actions forment une
   seule composition. Sur grand écran, les boutons sont centrés sur la hauteur
   du message ; dès que deux colonnes comprimeraient leurs libellés, ils
   repassent sous le texte. */
.sc-home-product__grid {
	display: grid;
	gap: var(--sc-5);
}

.sc-home-product__copy {
	max-width: 650px;
}

.sc-home-product__action-column {
	display: flex;
	align-items: center;
}

.sc-home-product__actions {
	align-self: auto;
}

@media (min-width: 1280px) {
	.sc-home-product__grid {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: var(--sc-7);
	}

	.sc-home-product__action-column {
		justify-content: flex-end;
	}

	.sc-home-product__actions {
		justify-content: flex-end;
	}
}

@media (max-width: 560px) {
	.sc-home-product__grid {
		gap: var(--sc-4);
	}

	.sc-home-product__actions {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	.sc-home-product__actions .sc-btn {
		width: 100%;
		justify-content: space-between;
		white-space: normal;
	}
}

@media (min-width: 561px) {
	.sc-section--ink .sc-actions {
		flex-wrap: nowrap;
	}
}

@media (min-width: 561px) and (max-width: 1279px) {
	.sc-section--ink .sc-actions {
		gap: 10px;
	}

	.sc-section--ink .sc-actions .sc-btn {
		min-height: 48px;
		padding: 4px 6px 4px 14px;
		font-size: 13.5px;
		gap: 10px;
	}

	.sc-section--ink .sc-actions .sc-btn__icon {
		width: 32px;
		height: 32px;
	}
}

@media (max-width: 560px) {
	.sc-section--ink .sc-actions {
		flex-wrap: wrap;
	}
}

/* Lien d'action : cible tactile complète, jamais 25 px de haut. */
.sc-action {
	display: inline-flex;
	align-items: center;
	gap: var(--sc-1);
	min-height: 44px;
	color: var(--sc-text);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.sc-action svg {
	transition: transform var(--sc-duration-ui) var(--sc-ease);
}

.sc-action:hover {
	color: var(--sc-accent-text);
}

.sc-action:hover svg {
	transform: translateX(2px);
}

/* Cible tactile des petits liens isolés — 44 x 44 px sans épaissir le rythme.
   Le remplissage agrandit la boîte cliquable, la marge négative annule son
   effet sur le flux : le fil d'Ariane, une date ou un label gardent donc leur
   compacité visuelle tout en devenant atteignables au doigt. Motif unique,
   déclaré ici une fois et réutilisé par les composants concernés. Les liens
   en ligne dans un paragraphe en sont exclus : leur cible est la phrase. */
.sc-breadcrumb a,
a.sc-label,
.sc-comment__date,
.sc-author__name a,
a.sc-row__title,
.sc-fact__value a,
.sc-facts__value a {
	display: inline-flex;
	align-items: center;
	min-width: 44px;
	min-height: 44px;
	padding-block: 11px;
	margin-block: -11px;
}

/* Lien de texte : soulignement progressif (l'un des trois mouvements admis). */
.sc-link {
	color: var(--sc-accent-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: text-decoration-thickness var(--sc-duration-ui) var(--sc-ease);
}

.sc-link:hover {
	text-decoration-thickness: 2px;
}

/* Contrôle réseau : marque officielle + libellé, pas un lien souligné.
   Fond transparent : le composant appartient à la surface courante. */
.sc-social {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 6px 14px 6px 6px;
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-control);
	color: var(--sc-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	background: transparent;
	transition: border-color var(--sc-duration-ui) var(--sc-ease);
}

.sc-social:hover {
	border-color: var(--sc-line-input);
	color: var(--sc-ink);
}

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

.sc-social__mark {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}

.sc-social__svg {
	display: block;
	width: 24px;
	height: 24px;
}

.sc-social__label {
	white-space: nowrap;
}

/* Capsule : uniquement un vrai statut ou une vraie catégorie. Couleurs prises
   aux jetons du contexte : la variante sur encre n'a donc pas de règle propre. */
.sc-status {
	display: inline-flex;
	align-items: center;
	gap: var(--sc-1);
	padding: 5px 12px;
	border: 1px solid var(--sc-line-strong);
	border-radius: var(--sc-radius-pill);
	color: var(--sc-text);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.sc-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: var(--sc-radius-pill);
	background: var(--sc-accent-text);
}

/* ==========================================================================
   8. FORMULAIRES
   ========================================================================== */

.sc-form {
	display: grid;
	gap: 0;
	max-width: 640px;
}

.sc-form .wpcf7-form {
	display: grid;
	gap: 24px;
}

.sc-field {
	display: grid;
	gap: 9px;
	min-width: 0;
}

.sc-field > br {
	display: none;
}

.sc-form label,
.sc-form .sc-field__label {
	display: block;
	margin: 0;
	color: var(--sc-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.sc-field__req {
	margin-left: 0.45em;
	color: var(--sc-muted);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.sc-form input[type="text"]:not([tabindex="-1"]),
.sc-form input[type="email"],
.sc-form input[type="tel"],
.sc-form input[type="url"],
.sc-form input[type="search"],
.sc-form select,
.sc-form textarea,
.comment-form input[type="text"]:not([tabindex="-1"]),
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	min-height: 54px;
	padding: 12px 17px;
	border: 1px solid var(--sc-line-input);
	border-radius: var(--sc-radius-control);
	background: var(--sc-paper);
	color: var(--sc-text);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	transition: border-color var(--sc-duration-ui) var(--sc-ease),
		box-shadow var(--sc-duration-ui) var(--sc-ease);
}

.sc-form select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
	background-color: var(--sc-paper);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5' stroke='%23474e5d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 18px;
}

.sc-form textarea {
	min-height: 190px;
	height: 190px;
	padding-top: 14px;
	resize: vertical;
}

@media (max-width: 639px) {
	.sc-form textarea {
		min-height: 176px;
		height: 176px;
	}
}

.sc-form input:hover,
.sc-form textarea:hover,
.sc-form select:hover {
	border-color: var(--sc-ink);
}

.sc-form input:focus-visible,
.sc-form textarea:focus-visible,
.sc-form select:focus-visible,
.comment-form input:focus-visible,
.comment-form textarea:focus-visible {
	outline: none;
	border-color: var(--sc-pink);
	box-shadow: 0 0 0 3px rgba(216, 13, 109, 0.14);
}

.sc-form ::placeholder {
	color: var(--sc-muted);
	opacity: 1;
}

.sc-form__row,
.sc-form-grid {
	display: grid;
	gap: 24px;
}

@media (min-width: 640px) {
	.sc-form__row--two,
	.sc-form-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.sc-form__foot {
	display: grid;
	justify-items: start;
	gap: 18px;
	padding-top: 4px;
}

.sc-form__foot .sc-btn,
.sc-form .wpcf7-submit.sc-btn {
	min-height: 48px;
}

.sc-form__note,
.sc-form-note {
	max-width: 42ch;
	margin-top: 18px;
	color: var(--sc-muted);
	font-size: 13px;
	line-height: 1.5;
}

/* Le texte légal unique vit sous le formulaire (gabarit). La note CF7 interne
   est un doublon historique : on la masque jusqu'à sa suppression en base. */
.wpcf7-form .sc-form-note {
	display: none;
}

.sc-form__note svg {
	vertical-align: -2px;
	margin-right: 6px;
	color: var(--sc-muted);
}

/* Case à cocher : cible réelle de 44 px, marque visuelle de 24 px dessinée par
   deux ombres internes. Le remplissage de 10 px reste cliquable sans être
   visible, ce qui évite une case surdimensionnée. Une seule règle couvre le
   consentement de Contact Form 7 et celui des commentaires. */
.sc-form input[type="checkbox"],
.comment-form input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 44px;
	height: 44px;
	margin: -10px;
	padding: 0;
	border: 0;
	background: var(--sc-paper);
	box-shadow: inset 0 0 0 10px var(--sc-paper), inset 0 0 0 11px var(--sc-line-input);
	cursor: pointer;
}

.sc-form input[type="checkbox"]:checked,
.comment-form input[type="checkbox"]:checked {
	background: var(--sc-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
	box-shadow: inset 0 0 0 10px var(--sc-paper);
}

/* La rangée de consentement aligne la case et son intitulé sur une seule ligne
   de base, l'intitulé restant en graisse de texte courant. */
.comment-form-cookies-consent,
.wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: var(--sc-1);
	min-height: 44px;
}

.comment-form-cookies-consent label,
.wpcf7-list-item label {
	margin-bottom: 0;
	font-weight: 400;
}

/* Champ piège de l'antispam local : masqué sans être retiré du DOM.
   Même technique que .screen-reader-text — découpe sur place — plutôt qu'un
   décalage à -9999 px, qui étend la zone défilable du document et faisait
   apparaître un faux débordement horizontal dans l'audit. */
.sc-hp-field,
.sc-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.sc-hp-field label,
.sc-hp-field input,
.sc-hp label,
.sc-hp input {
	display: block;
	width: 1px;
	height: 1px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	font-size: 1px;
	line-height: 1;
}

/* --- Contact Form 7 : mise au système, sans altérer son balisage --- */
.wpcf7-form p {
	margin: 0;
}

.wpcf7-form-control-wrap {
	display: block;
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: var(--sc-error);
	font-size: 14px;
	font-weight: 600;
}

.wpcf7-form input[aria-invalid="true"],
.wpcf7-form textarea[aria-invalid="true"] {
	border-color: var(--sc-error);
	border-width: 2px;
}

.wpcf7-response-output {
	margin: var(--sc-3) 0 0 !important;
	padding: 12px 16px !important;
	border: 1px solid var(--sc-line-strong) !important;
	border-radius: var(--sc-radius-compact);
	font-size: 15px;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
	border-color: var(--sc-error) !important;
	color: var(--sc-error);
}

.wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--sc-success) !important;
	color: var(--sc-success);
}

.wpcf7-spinner {
	margin: 0 0 0 var(--sc-1);
}

.wpcf7-submit.sc-btn {
	appearance: none;
	cursor: pointer;
	font-family: inherit;
}

/* Consentement CF7 : le texte légal unique vit sous le formulaire (gabarit). */
.sc-form .wpcf7-acceptance {
	display: none;
}

/* --- Recherche --- */
.sc-searchform {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-1);
	max-width: 520px;
}

.sc-searchform label {
	flex: 1 1 200px;
	min-width: 0;
}

.sc-searchform input[type="search"] {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--sc-line-input);
	border-radius: var(--sc-radius-control);
	background: var(--sc-paper);
	color: var(--sc-text);
	font-family: inherit;
	font-size: 16px;
}

/* ==========================================================================
   9. EN-TÊTE ET NAVIGATION
   ========================================================================== */

.sc-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--sc-paper);
	border-bottom: 1px solid var(--sc-line);
}

.sc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sc-4);
	width: 100%;
	max-width: calc(var(--sc-container) + 2 * var(--sc-gutter));
	min-height: var(--sc-header-h);
	margin-inline: auto;
	padding-inline: var(--sc-gutter);
}

/* Cible tactile de 44 px sans déformer le logo : le lien porte la hauteur,
   l'image garde le ratio vectoriel naturel (symbole A un peu plus haut
   que le mot-symbole, viewBox 296.08 × 51.93). */
.sc-header__logo {
	display: inline-flex;
	align-items: center;
	flex: none;
	min-height: 44px;
	text-decoration: none;
}

.sc-header__logo img {
	display: block;
	width: 172px;
	height: auto;
	aspect-ratio: 296.08 / 51.93;
	object-fit: contain;
}

@media (min-width: 1024px) {
	.sc-header__logo img {
		width: 194px;
	}
}

.sc-nav {
	display: none;
}

.sc-nav ul {
	display: flex;
	align-items: center;
	gap: var(--sc-3);
	list-style: none;
}

.sc-nav a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: 2px;
	color: var(--sc-text);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: color var(--sc-duration-ui) var(--sc-ease);
}

.sc-nav a:hover {
	color: var(--sc-ink);
}

/* L'état actif combine couleur ET filet : jamais porté par le rose seul. */
.sc-nav a[aria-current="page"] {
	color: var(--sc-ink);
}

.sc-nav a[aria-current="page"]::after {
	content: "";
	position: absolute;
	right: 2px;
	bottom: 12px;
	left: 2px;
	height: 2px;
	background: var(--sc-pink);
}

.sc-nav__cta a {
	padding: 6px 18px;
	min-height: 46px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--sc-radius-control);
	background: var(--sc-pink);
	color: var(--sc-paper);
	box-shadow: 0 8px 18px rgba(216, 13, 109, 0.18), var(--sc-shadow-btn-inset);
	font-size: 13px;
	font-weight: 600;
}

.sc-nav__cta a:hover {
	background: var(--sc-pink-press);
	color: var(--sc-paper);
}

/* L'état actif du bouton se traite par contraste, jamais comme un lien
   de navigation souligné. */
.sc-nav__cta a[aria-current="page"] {
	color: var(--sc-paper);
	background: var(--sc-pink-press);
	box-shadow: 0 8px 18px rgba(216, 13, 109, 0.28), var(--sc-shadow-btn-inset);
}

.sc-nav__cta a[aria-current="page"]::after {
	content: none;
}

.sc-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--sc-ink);
	border-radius: var(--sc-radius-control);
	background: var(--sc-paper);
	cursor: pointer;
}

.sc-menu-toggle__icon,
.sc-menu-toggle__icon::before,
.sc-menu-toggle__icon::after {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--sc-ink);
	transition: transform var(--sc-duration-ui) var(--sc-ease),
		opacity var(--sc-duration-ui) var(--sc-ease);
}

.sc-menu-toggle__icon {
	position: relative;
}

.sc-menu-toggle__icon::before,
.sc-menu-toggle__icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.sc-menu-toggle__icon::before {
	top: -6px;
}

.sc-menu-toggle__icon::after {
	top: 6px;
}

.sc-menu-toggle[aria-expanded="true"] .sc-menu-toggle__icon {
	background: transparent;
}

.sc-menu-toggle[aria-expanded="true"] .sc-menu-toggle__icon::before {
	transform: translateY(6px) rotate(45deg);
}

.sc-menu-toggle[aria-expanded="true"] .sc-menu-toggle__icon::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* Menu mobile : panneau push-down dans le flux. Décision et motif dans
   DESIGN.md § 13 (pas d'overlay : ni piège de focus, ni verrou de scroll). */
.sc-mobile-menu {
	border-top: 1px solid var(--sc-line);
	background: var(--sc-paper);
}

.sc-mobile-menu[hidden] {
	display: none;
}

.sc-mobile-menu ul {
	display: grid;
	gap: 2px;
	max-width: calc(var(--sc-container) + 2 * var(--sc-gutter));
	margin-inline: auto;
	padding: var(--sc-2) var(--sc-gutter) var(--sc-3);
	list-style: none;
}

.sc-mobile-menu a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding-inline: var(--sc-2);
	border-radius: var(--sc-radius-compact);
	color: var(--sc-ink);
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
}

.sc-mobile-menu a:hover {
	background: var(--sc-warm);
}

.sc-mobile-menu .sc-nav__cta a {
	margin-top: var(--sc-1);
	background: var(--sc-pink);
	color: var(--sc-paper);
	border-radius: var(--sc-radius-control);
}

.sc-mobile-menu .sc-nav__cta a[aria-current="page"]::after {
	content: none;
}

@media (min-width: 1024px) {
	.sc-nav {
		display: block;
	}

	.sc-menu-toggle,
	.sc-mobile-menu {
		display: none;
	}
}

/* ==========================================================================
   10. PIED DE PAGE
   ========================================================================== */

.sc-footer {
	background: var(--sc-ink);
	color: var(--sc-muted-on-dark);
	--sc-focus-ring: var(--sc-paper);
}

.sc-footer__grid {
	display: grid;
	gap: var(--sc-5);
	padding-block: var(--sc-6);
}

.sc-footer__logo {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
}

.sc-footer__logo img {
	display: block;
	width: 172px;
	height: auto;
	aspect-ratio: 296.08 / 51.93;
	object-fit: contain;
}

.sc-footer__tagline {
	max-width: 34ch;
	margin-top: var(--sc-2);
	font-size: 15px;
	line-height: 1.5;
}

.sc-footer__title {
	margin-bottom: var(--sc-2);
	color: var(--sc-on-dark);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sc-footer__nav ul {
	list-style: none;
}

.sc-footer a {
	color: var(--sc-muted-on-dark);
	text-decoration: none;
}

.sc-footer a:hover {
	color: var(--sc-on-dark);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.sc-footer__nav a,
.sc-footer__contact a {
	display: inline-flex;
	align-items: center;
	min-width: 44px;
	min-height: 44px;
	font-size: 15px;
}

/* Une adresse électronique est un mot insécable : dans la colonne étroite du
   pied à 1024 px, elle débordait de 14 px. La colonne de contact a été élargie
   (voir la grille du pied), et la coupure reste ici en dernier recours pour une
   adresse future plus longue. */
.sc-footer__contact a {
	max-width: 100%;
	overflow-wrap: anywhere;
}

.sc-footer__contact p {
	font-size: 15px;
	line-height: 1.5;
}

.sc-footer__bottom {
	border-top: 1px solid var(--sc-line-on-dark);
}

.sc-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sc-2);
	width: 100%;
	max-width: calc(var(--sc-container) + 2 * var(--sc-gutter));
	margin-inline: auto;
	padding: var(--sc-2) var(--sc-gutter);
	font-size: 14px;
}

.sc-footer__bottom-inner a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

@media (min-width: 640px) {
	.sc-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sc-5) var(--sc-4);
	}
}

@media (min-width: 1024px) {
	.sc-footer__grid {
		grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
		padding-block: var(--sc-7);
	}

	/* La colonne de contact porte le contenu le plus large — adresse
	   électronique, téléphone, adresse postale : elle reçoit donc plus de place
	   que les colonnes de navigation, dont les entrées sont courtes. L'adresse
	   tient alors sur une ligne, et `overflow-wrap` ne sert plus que de filet
	   pour une adresse future plus longue. */
	.sc-footer__grid {
		grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr)) 1.3fr;
	}

	.sc-footer__grid--five {
		grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)) 1.3fr;
	}
}

/* ==========================================================================
   11. FIL D'ARIANE
   ========================================================================== */

.sc-breadcrumb {
	margin-bottom: var(--sc-3);
	font-size: 14px;
	line-height: 1.45;
	overflow-wrap: anywhere;
	word-break: normal;
}

/* Flux inline unique : le retour à la ligne est piloté par le texte, pas par
   un li flex qui se pose en bloc. Les cibles tactiles des liens restent le
   motif centralisé (.sc-breadcrumb a dans § 7). */
.sc-breadcrumb ol {
	display: block;
	list-style: none;
}

.sc-breadcrumb li {
	display: inline;
	max-width: 100%;
}

.sc-breadcrumb li + li::before {
	content: "/";
	margin-inline: var(--sc-1);
	color: var(--sc-muted);
}

.sc-breadcrumb a {
	color: var(--sc-muted);
	text-decoration: none;
	vertical-align: baseline;
}

.sc-breadcrumb a:hover {
	color: var(--sc-pink-ink);
	text-decoration: underline;
}

.sc-breadcrumb [aria-current] {
	color: var(--sc-ink);
	font-weight: 600;
	overflow-wrap: anywhere;
	word-break: normal;
}

/* Sur encre : #5b606b tombait à 2,79:1. Les deux tons passent au clair. */
.sc-breadcrumb--on-dark a,
.sc-breadcrumb--on-dark li + li::before {
	color: var(--sc-muted-on-dark);
}

.sc-breadcrumb--on-dark a:hover {
	color: var(--sc-on-dark);
}

.sc-breadcrumb--on-dark [aria-current] {
	color: var(--sc-on-dark);
}

/* ==========================================================================
   12. HEROS — trois familles, une dérivée. Aucune autre.
   ========================================================================== */

/* --------------------------------------------------------------------------
   12.1 hero--photo : accueil, agence, blog, 404
   Composition rectangulaire, sans carte extérieure. Le fond et l'image
   saignent ; le texte reste dans la grille.
   -------------------------------------------------------------------------- */

.sc-hero--photo {
	position: relative;
	background: var(--sc-ink);
	color: var(--sc-muted-on-dark);
	overflow: hidden;
	border-bottom: var(--sc-hero-photo-rule) solid var(--sc-pink);
	--sc-focus-ring: var(--sc-paper);
	--sc-bleed: max(var(--sc-gutter), calc((100% - var(--sc-container)) / 2));
}

/* Hero photographique : aucun SVG Bézier, aucun fragment à la jonction. */
.sc-hero--photo .sc-ridge {
	display: none;
}

.sc-hero--photo .sc-hero__inner {
	position: relative;
	display: grid;
	min-height: 552px;
}

.sc-hero--photo .sc-hero__copy {
	position: relative;
	z-index: 2;
	min-width: 0;
	padding: var(--sc-6) 0 var(--sc-4);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sc-hero--photo .sc-hero__media {
	position: relative;
	min-width: 0;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: #303542;
}

.sc-hero--photo .sc-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 52% center;
}

.sc-hero--photo .sc-hero__media-note {
	position: absolute;
	right: 22px;
	top: 22px;
	z-index: 2;
	padding: 8px 10px;
	background: rgba(23, 25, 31, 0.82);
	color: var(--sc-paper);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

@media (min-width: 1024px) {
	.sc-hero--photo .sc-hero__inner {
		position: static;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		grid-template-rows: minmax(0, 1fr);
		align-items: stretch;
	}

	.sc-hero--photo .sc-hero__copy {
		grid-column: 1;
		grid-row: 1;
		padding: 68px clamp(24px, 4vw, 58px) 68px 0;
	}

	.sc-hero--photo .sc-hero__media {
		grid-column: 2;
		grid-row: 1;
		aspect-ratio: auto;
		min-height: 552px;
	}

	.sc-hero--photo .sc-hero__media img {
		inset: 0 auto 0 0;
		width: calc(100% + var(--sc-bleed));
		height: 100%;
		object-position: 52% center;
	}

}

@media (max-width: 1023px) {
	.sc-hero--photo .sc-hero__inner {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.sc-hero--photo .sc-hero__copy {
		order: 1;
		min-height: 420px;
		padding: 56px 0 var(--sc-6);
	}

	/* Image décorative desktop : aucun espace, aucun lazy-load visible. */
	.sc-hero--photo .sc-hero__media {
		display: none;
	}

}

.sc-hero__title,
.sc-hero .sc-display,
.sc-hero .sc-display--long {
	color: var(--sc-on-dark);
	font-size: var(--sc-hero-h1-size);
	line-height: 1.03;
	letter-spacing: var(--sc-track-display);
}

.sc-hero__lead {
	margin-top: var(--sc-3);
}

.sc-hero__actions {
	margin-top: var(--sc-4);
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px;
}

.sc-hero__actions .sc-btn {
	flex: none;
	white-space: nowrap;
}

@media (min-width: 561px) and (max-width: 1279px) {
	.sc-hero__actions .sc-btn {
		min-height: 46px;
		padding: 4px 6px 4px 16px;
		font-size: 14px;
		gap: 12px;
	}

	.sc-hero__actions .sc-btn__icon {
		width: 32px;
		height: 32px;
	}
}

@media (max-width: 560px) {
	.sc-hero__actions {
		flex-wrap: wrap;
	}
}

.home .sc-hero--photo .sc-hero__title {
	max-width: 20ch;
}

/* Méta de cap : dans le flux, séparée par un filet. Jamais un bloc flottant. */
.sc-hero__note {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sc-2);
	max-width: 46ch;
	margin-top: var(--sc-5);
	padding-top: var(--sc-2);
	border-top: 1px solid var(--sc-line-on-dark);
}

.sc-hero__note-label {
	flex: none;
	color: var(--sc-pink-on-dark);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sc-hero__note-value {
	color: var(--sc-on-dark);
	font-size: 16px;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   12.2 hero--index : expertises, projets, extension, contact
   Bandeau sombre simple, pleine largeur, hauteur maîtrisée. Sans mosaïque,
   sans panneau clair vide, sans ombre, sans carte. Remplace directement les
   deux régressions les plus graves.
   -------------------------------------------------------------------------- */

.sc-hero--index {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--sc-hero-index-h);
	padding-block: var(--sc-6) var(--sc-hero-ridge-pad);
	background: var(--sc-ink);
	color: var(--sc-muted-on-dark);
	overflow-x: clip;
	overflow-y: visible;
	--sc-focus-ring: var(--sc-paper);
}

.sc-hero--index .sc-hero__inner {
	width: 100%;
}

.sc-hero--index .sc-hero__copy {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.sc-hero--index .sc-hero__lead {
	margin-top: var(--sc-3);
	max-width: 56ch;
}

/* Variante à deux colonnes : la respiration de droite porte des informations
   réelles au lieu de rester vide. Aucune carte, aucun aplat, aucune ombre,
   aucune image : uniquement le rail de faits du système, structuré par filets.
   Même grille et mêmes alignements que le hero photographique (11/10 → 7/4,
   la colonne secondaire restant nettement minoritaire). */
.sc-hero__inner--split {
	display: grid;
	gap: var(--sc-5);
}

@media (min-width: 1024px) {
	.sc-hero__inner--split {
		grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
		gap: var(--sc-7);
		align-items: stretch;
	}

	/* La colonne secondaire s'aligne sur la première ligne de texte, pas sur
	   le fil d'Ariane : le rail démarre à hauteur du titre. */
	.sc-hero__inner--split .sc-hero__aside {
		padding-top: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* Variante produit : icône + eyebrow composés sur une ligne, 40 px. */
.sc-hero__kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: var(--sc-2);
}

.sc-hero__kicker .sc-label {
	margin: 0;
}

.sc-hero__kicker .sc-hero__product-icon {
	width: 40px;
	height: 40px;
	margin-bottom: 0;
}

.sc-hero__product-icon {
	display: block;
	width: 56px;
	height: 56px;
	margin-bottom: var(--sc-3);
	border-radius: var(--sc-radius-compact);
}

@media (min-width: 1024px) {
	.sc-hero__product-icon {
		width: 64px;
		height: 64px;
	}

	.sc-hero__kicker .sc-hero__product-icon {
		width: 40px;
		height: 40px;
	}
}

/* Panneau de navigation d'expertises : dans le hero, pas une seconde section.
   Filets, pictos, libellés courts, indice directionnel. Pas trois cartes. */
.sc-hero-nav {
	min-width: 0;
}

.sc-hero-nav ul {
	list-style: none;
	width: 100%;
	border-top: 1px solid var(--sc-line-on-dark);
}

.sc-hero-nav a {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) 16px;
	align-items: center;
	gap: 14px;
	min-height: 56px;
	padding: 2px 0;
	border-bottom: 1px solid var(--sc-line-on-dark);
	color: var(--sc-on-dark);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.015em;
	text-decoration: none;
	transition: color var(--sc-duration-ui) var(--sc-ease);
}

.sc-hero-nav a:hover,
.sc-hero-nav a:focus-visible {
	color: var(--sc-paper);
}

.sc-hero-nav__cue {
	justify-self: end;
	color: var(--sc-pink-on-dark);
	transition: transform var(--sc-duration-ui) var(--sc-ease);
}

.sc-hero-nav a:hover .sc-hero-nav__cue,
.sc-hero-nav a:focus-visible .sc-hero-nav__cue {
	transform: translateX(3px);
}

@media (min-width: 1024px) {
	.sc-hero-nav {
		padding-left: var(--sc-5);
		border-left: 1px solid var(--sc-line-on-dark);
	}
}

@media (max-width: 1023px) {
	.sc-hero-nav ul {
		display: flex;
		flex-wrap: wrap;
		border-top: 0;
	}

	.sc-hero-nav li {
		flex: 1 1 10rem;
		min-width: 0;
	}

	.sc-hero-nav a {
		min-height: 48px;
		padding-right: 12px;
		border-bottom: 0;
		border-top: 1px solid var(--sc-line-on-dark);
	}
}

.sc-hero__status {
	margin-top: var(--sc-3);
}

/* Crête : une occurrence, en pied de bandeau. */
.sc-hero__ridge {
	margin-top: 0;
}

.sc-hero--index .sc-container {
	position: relative;
	z-index: 1;
}

/* Après un bandeau d'index : le changement de surface sépare déjà.
   Pas de filet + grand vide empilés. 72 / 56 / 44 px. */
.sc-hero--index + .sc-section,
.sc-hero--index + .sc-chapter {
	padding-top: var(--sc-after-hero-y);
	border-top: 0;
}

/* --------------------------------------------------------------------------
   12.3 hero--doc : légal, support, confidentialité, recherche, archives, plan
   Surface claire, compacte, titre à gauche, aucune métaphore marketing.
   -------------------------------------------------------------------------- */

.sc-hero--doc {
	padding-top: var(--sc-3);
	padding-bottom: var(--sc-5);
	border-bottom: 1px solid var(--sc-line);
	background: var(--sc-warm);
}

.sc-hero--doc .sc-hero__inner {
	container-type: inline-size;
}

.sc-hero--doc .sc-hero__title {
	color: var(--sc-ink);
	font-size: var(--sc-hero-h1-size);
	line-height: 1.03;
	letter-spacing: var(--sc-track-display);
	max-width: 30ch;
}

.sc-hero--doc .sc-hero__lead {
	margin-top: var(--sc-2);
	font-size: 17px;
}

.sc-hero--doc .sc-meta {
	margin-top: var(--sc-2);
}

.sc-hero--doc .sc-searchform {
	margin-top: var(--sc-3);
}

/* Byline E-E-A-T : pastille, rôle réel, dates natives. Compact, pas une carte. */
.sc-article-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sc-2) var(--sc-3);
	margin-top: var(--sc-3);
	max-width: 42rem;
}

.sc-article-byline__photo {
	display: block;
	flex: none;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border: 1px solid var(--sc-line);
	border-radius: 50%;
	background: var(--sc-warm);
}

.sc-article-byline__photo img,
.sc-article-byline__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-article-byline__body {
	flex: 1 1 12rem;
	min-width: 0;
}

.sc-article-byline__who {
	margin: 0;
	color: var(--sc-text);
	font-size: 15px;
	line-height: 1.4;
}

.sc-article-byline__cred {
	margin: 4px 0 0;
	color: var(--sc-muted);
	font-size: 14px;
	line-height: 1.4;
}

.sc-article-byline__dates {
	display: flex;
	flex-wrap: wrap;
	gap: 2px var(--sc-3);
	margin: 6px 0 0;
	color: var(--sc-muted);
	font-size: 14px;
	line-height: 1.4;
}

.sc-article-byline__date {
	display: inline-flex;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
	max-width: 100%;
}

.sc-article-byline__date > :not(.sc-article-byline__icon) {
	min-width: 0;
}

.sc-article-byline__icon {
	display: block;
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 0.15em;
	color: var(--sc-muted);
	overflow: visible;
}

@media (min-width: 640px) {
	.sc-hero--doc {
		padding-block: var(--sc-6);
	}
}

/* --------------------------------------------------------------------------
   12.4 Dérivée : case-header (fiches projet)
   Le hero--index décliné, suivi d'un rail de faits compact. Sans grille
   lumineuse, sans carte vitrée, sans numéro décoratif géant.
   -------------------------------------------------------------------------- */

.sc-case-header .sc-hero__lead {
	max-width: 60ch;
}

.sc-facts {
	display: grid;
	gap: 0;
	margin-top: var(--sc-5);
	border-top: 1px solid var(--sc-line-on-dark);
}

.sc-fact,
.sc-facts__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	align-items: start;
	padding-block: 20px;
	border-bottom: 1px solid var(--sc-line-on-dark);
}

.sc-fact:has(> .sc-icon),
.sc-facts__item:has(> .sc-icon),
.sc-dossier__line {
	grid-template-columns: 24px minmax(0, 1fr);
	column-gap: 22px;
}

.sc-fact:has(> .sc-icon) > .sc-icon,
.sc-facts__item:has(> .sc-icon) > .sc-icon,
.sc-dossier__line > .sc-icon {
	margin-top: 2px;
}

.sc-dossier__line > .sc-icon {
	width: 24px;
	height: 24px;
}

.sc-fact__copy,
.sc-facts__item > div {
	display: grid;
	gap: 7px;
	min-width: 0;
}

.sc-fact__term,
.sc-facts__term {
	margin: 0;
	padding: 0;
	color: var(--sc-accent-text);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sc-fact__value,
.sc-facts__value {
	margin: 0;
	padding: 0;
	color: var(--sc-text);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

.sc-fact__value a,
.sc-facts__value a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

@media (min-width: 640px) {
	.sc-facts:not(.sc-facts--stack) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sc-facts:not(.sc-facts--stack) .sc-fact,
	.sc-facts:not(.sc-facts--stack) .sc-facts__item {
		padding: 20px var(--sc-3) 20px 0;
		border-bottom: 0;
		border-left: 1px solid var(--sc-line-on-dark);
		padding-left: var(--sc-3);
	}

	.sc-facts:not(.sc-facts--stack) .sc-fact:first-child,
	.sc-facts:not(.sc-facts--stack) .sc-facts__item:first-child {
		border-left: 0;
		padding-left: 0;
	}
}

.sc-facts--stack {
	grid-template-columns: minmax(0, 1fr);
	margin-top: 0;
}

.sc-facts--stack .sc-fact,
.sc-facts--stack .sc-facts__item {
	padding: 20px 0;
	border-bottom: 1px solid var(--sc-line);
	border-left: 0;
}

/* ==========================================================================
   13. COMPOSANTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   13.1 Dossier éditorial (accueil) — chapitre froid, suivi d'une transition
   douce vers le chapitre métiers sur papier. Compact, pleine largeur, aucune
   carte. Grille 44 / 56 dès 1024 px ; pile en dessous.
   -------------------------------------------------------------------------- */

.sc-dossier {
	padding-block: var(--sc-5) var(--sc-4);
}

.sc-dossier__grid {
	display: grid;
	gap: var(--sc-5);
}

.sc-dossier__copy .sc-h2 {
	max-width: 17ch;
}

.sc-dossier__copy .sc-lead {
	max-width: 38ch;
	margin: 0;
}

.sc-dossier__lines {
	display: grid;
	margin: 0;
}

.sc-dossier__line {
	display: grid;
	align-items: start;
	min-width: 0;
	margin: 0;
	padding-block: var(--sc-2);
	border-top: 1px solid var(--sc-line);
}

.sc-dossier__line:last-child {
	border-bottom: 1px solid var(--sc-line);
}

.sc-dossier__value {
	margin: 0;
	color: var(--sc-ink);
	font-size: var(--sc-dossier-value);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.sc-dossier__caption {
	margin: 0;
	color: var(--sc-muted);
	font-size: 15px;
	line-height: 1.45;
}

@media (min-width: 640px) {
	.sc-dossier {
		padding-block: var(--sc-6) var(--sc-5);
	}
}

@media (min-width: 1024px) {
	.sc-dossier__grid {
		grid-template-columns: minmax(0, 11fr) minmax(0, 14fr);
		gap: var(--sc-7);
		align-items: start;
	}
}

/* --------------------------------------------------------------------------
   13.2 Colonnes éditoriales — filet en tête, aucune carte, aucune ombre,
   aucun numéro décoratif, aucune capsule d'icône.
   -------------------------------------------------------------------------- */

.sc-cols {
	display: grid;
	gap: var(--sc-4);
}

.sc-col {
	padding-top: var(--sc-3);
	border-top: 2px solid var(--sc-ink);
}

.sc-col__icon {
	margin-bottom: var(--sc-2);
	width: 28px;
	height: 28px;
}

.sc-col--quiet {
	border-top-width: 1px;
	border-top-color: var(--sc-line-strong);
}

.sc-col__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.sc-col__title {
	margin-bottom: var(--sc-1);
}

.sc-col__text {
	color: var(--sc-muted);
	font-size: 16px;
	line-height: 1.55;
}

.sc-section--ink .sc-col {
	border-top-color: var(--sc-line-on-dark);
}

.sc-section--ink .sc-col__text {
	color: var(--sc-muted-on-dark);
}

.sc-col__more {
	margin-top: var(--sc-2);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	color: var(--sc-pink-ink);
	font-size: 15px;
	font-weight: 600;
}

.sc-col:hover {
	border-top-color: var(--sc-pink);
}

@media (min-width: 640px) {
	.sc-cols--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.sc-cols {
		gap: var(--sc-5);
	}

	.sc-cols--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   13.3 Carte — unique pour projet et article. Ordre constant : média,
   catégorie, titre, résumé, action. Filet 1 px, aucune ombre. Le texte n'est
   jamais posé sur le média.
   -------------------------------------------------------------------------- */

.sc-grid {
	display: grid;
	gap: var(--sc-4);
}

@media (min-width: 640px) {
	.sc-grid--2,
	.sc-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.sc-grid {
		gap: var(--sc-5) var(--sc-4);
	}

	.sc-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.sc-card {
	display: flex;
	min-width: 0;
}

.sc-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.sc-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: var(--sc-radius-compact);
	background: var(--sc-warm);
}

.sc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform var(--sc-duration-reveal) var(--sc-ease);
}

/* Capture de site : les captures réelles sont en 2:1. Ce palier évite de les
   recadrer, et l'index concerné reste une grille parfaitement régulière. */
.sc-card__media--wide {
	aspect-ratio: 2 / 1;
}

/* Placeholder éditorial : retour du visuel encre historique, modernisé avec
   le symbole vectoriel actuel. Il reste explicitement générique et ne simule
   donc pas une fausse image à la une. */
.sc-card__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sc-3);
	border: 1px solid rgba(255, 255, 255, 0.08);
	background:
		radial-gradient(circle at 84% 112%, rgba(216, 13, 109, 0.22) 0, rgba(216, 13, 109, 0) 48%),
		linear-gradient(135deg, var(--sc-ink) 0, var(--sc-ink-2) 100%);
	color: var(--sc-muted-on-dark);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sc-card__media--empty::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(118deg, transparent 28%, rgba(255, 255, 255, 0.035) 49%, transparent 70%);
	pointer-events: none;
}

.sc-card__placeholder-mark {
	position: relative;
	z-index: 1;
	width: clamp(58px, 18%, 78px) !important;
	height: auto !important;
	object-fit: contain !important;
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28));
	transition: transform var(--sc-duration-ui) var(--sc-ease) !important;
}

.sc-card__placeholder-label {
	position: absolute;
	right: var(--sc-3);
	bottom: var(--sc-3);
	left: var(--sc-3);
	z-index: 1;
	color: var(--sc-muted-on-dark);
	font-size: 10px;
	letter-spacing: 0.16em;
}

.sc-card__link:hover .sc-card__placeholder-mark {
	transform: translateY(-2px) scale(1.02);
}

.sc-card__media--brand {
	position: relative;
	padding: 0;
	aspect-ratio: 16 / 10;
	border-radius: var(--sc-radius-compact);
	border: 1px solid rgba(23, 25, 31, 0.08);
}

/* Couverture de marque : motif plein cadre + panneau wordmark. Pas un
   rectangle vide avec un titre posé en bas. */
.sc-cover {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: stretch;
	overflow: hidden;
	isolation: isolate;
}

.sc-cover__motif {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.5;
	pointer-events: none;
	color: inherit;
}

.sc-cover__panel {
	position: relative;
	z-index: 1;
	grid-column: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	min-width: 0;
	margin: 16px 8px 16px 16px;
	padding: 18px 16px 16px;
	background: var(--sc-cover-panel, rgba(255, 255, 255, 0.42));
	border: 1px solid rgba(23, 25, 31, 0.1);
	border-left: 3px solid var(--sc-pink);
}

.sc-cover__domain {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.72;
}

.sc-cover__mark {
	display: block;
	font-size: clamp(1.55rem, 2.9vw, 2.45rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.035em;
}

.sc-cover__mark span {
	display: block;
}

.sc-cover__logo {
	display: block;
	max-width: 100%;
	max-height: 72px;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: left center;
}

.sc-case-brand.sc-cover {
	min-height: 0;
	max-width: 640px;
	aspect-ratio: 16 / 10;
	margin-bottom: var(--sc-5);
	padding: 0;
	border-radius: var(--sc-radius-compact);
	border: 1px solid rgba(23, 25, 31, 0.08);
}

@media (max-width: 639px) {
	.sc-cover {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
	}

	.sc-cover__panel {
		margin: 12px 6px 12px 12px;
		padding: 14px 12px;
		gap: 8px;
	}

	.sc-cover__mark {
		font-size: clamp(1.25rem, 5.4vw, 1.6rem);
	}

	.sc-cover__motif {
		opacity: 0.44;
	}
}

.sc-card__link:hover .sc-cover__motif {
	opacity: 0.58;
}

.sc-card__mark {
	display: block;
	position: relative;
	color: inherit;
	font-size: clamp(1.75rem, 3vw, 2.35rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.sc-card__domain {
	display: block;
	position: relative;
	margin-top: 10px;
	color: inherit;
	opacity: 0.72;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.sc-card__logo {
	display: block;
	position: relative;
	max-width: min(82%, 320px);
	max-height: 88px;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: left center;
}

.sc-card__meta {
	display: block;
	margin-bottom: 6px;
	color: var(--sc-muted);
	font-size: 13px;
}

.sc-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding-top: var(--sc-3);
	border-top: 1px solid var(--sc-line);
	margin-top: var(--sc-2);
	gap: var(--sc-2);
}

.sc-card__cta {
	margin-top: auto;
	align-self: flex-start;
}

.sc-card__link .sc-btn {
	pointer-events: none;
}

.sc-card__link:hover .sc-btn--outline {
	border-color: var(--sc-ink);
}

.sc-card__cat {
	display: block;
	margin-bottom: 6px;
	color: var(--sc-pink-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sc-card__title {
	margin-bottom: 6px;
	color: var(--sc-ink);
	font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.sc-card__text {
	display: block;
	color: var(--sc-muted);
	font-size: 15px;
	line-height: 1.5;
}

.sc-card__date {
	display: block;
	margin-bottom: 6px;
	color: var(--sc-muted);
	font-size: 14px;
}

.sc-card__action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin-top: auto;
	padding-top: var(--sc-1);
	color: var(--sc-ink);
	font-size: 15px;
	font-weight: 600;
}

.sc-card__action svg {
	transition: transform var(--sc-duration-ui) var(--sc-ease);
}

/* Survol : filet rose discret et déplacement d'image de 1 % maximum. */
.sc-card__link:hover .sc-card__body {
	border-top-color: var(--sc-pink);
}

.sc-card__link:hover .sc-card__media img {
	transform: scale(1.01);
}

.sc-card__link:hover .sc-card__action {
	color: var(--sc-pink-ink);
}

.sc-card__link:hover .sc-card__action svg {
	transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   13.4 Rangées à filets — plan du site, listes documentaires, ressources
   -------------------------------------------------------------------------- */

.sc-rows {
	list-style: none;
	border-top: 1px solid var(--sc-line);
}

.sc-rows > li {
	border-bottom: 1px solid var(--sc-line);
}

.sc-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sc-1) var(--sc-3);
	min-height: 56px;
	padding-block: var(--sc-2);
	color: var(--sc-ink);
	text-decoration: none;
}

.sc-row:hover .sc-row__title {
	color: var(--sc-pink-ink);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.sc-row__title {
	font-size: 17px;
	font-weight: 600;
}

.sc-row__text {
	color: var(--sc-muted);
	font-size: 15px;
}

.sc-row__note {
	flex: 1 1 100%;
	color: var(--sc-muted);
	font-size: 15px;
	line-height: 1.5;
}

.sc-row__aside {
	margin-left: auto;
	color: var(--sc-muted);
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   13.5 Frise chronologique — dense, réellement séquentielle
   -------------------------------------------------------------------------- */

.sc-timeline {
	display: grid;
	gap: var(--sc-4);
	list-style: none;
	border-top: 1px solid var(--sc-line-strong);
}

.sc-timeline__item {
	padding-top: var(--sc-3);
	position: relative;
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: var(--sc-2);
	align-items: start;
}

.sc-timeline__icon {
	margin-top: 6px;
}

/* Repère d'axe : 3 px de rose, le seul aplat rose de la frise. */
.sc-timeline__item::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 32px;
	height: 3px;
	background: var(--sc-pink);
}

.sc-timeline__year {
	display: block;
	color: var(--sc-ink);
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
}

.sc-timeline__title {
	margin: var(--sc-2) 0 6px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

.sc-timeline__text {
	color: var(--sc-muted);
	font-size: 15px;
	line-height: 1.5;
}

@media (min-width: 640px) {
	.sc-timeline {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sc-5) var(--sc-4);
	}
}

@media (min-width: 1024px) {
	.sc-timeline {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   13.6 Personnes — composition éditoriale, pas deux fiches produit
   -------------------------------------------------------------------------- */

/* La composition dépend de la largeur réellement disponible, pas de celle de la
   fenêtre : sur l'accueil ce bloc vit dans une colonne de 424 px, sur /agence
   dans les 1280 px de la mesure. Deux fiches par ligne quand la place existe,
   une seule sinon — le repli est intrinsèque, aucune requête n'est nécessaire.
   C'est ce qui corrige le cas où deux portraits de 160 px se retrouvaient côte à
   côte dans 424 px, écrasant les noms à 12 px et débordant la page à 1024 px. */
.sc-people {
	container-type: inline-size;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-4);
}

.sc-people > * {
	flex: 1 1 340px;
	min-width: 0;
}

.sc-person {
	display: grid;
	gap: var(--sc-3);
	margin: 0;
	padding-top: var(--sc-3);
	border-top: 1px solid var(--sc-line-strong);
}

/* Portraits d'équipe : les fichiers de assets/img/team/ sont carrés (400×400).
   Le cadre conserve ce ratio naturel, donc `cover` ne recadre rien et rien
   n'est déformé. Aucun filtre, aucun traitement colorimétrique. */
.sc-person__photo {
	display: block;
	overflow: hidden;
	width: 100%;
	max-width: 200px;
	aspect-ratio: 1 / 1;
	border-radius: var(--sc-radius-compact);
	background: var(--sc-warm);
}

.sc-person__photo--round {
	border-radius: 50%;
}

.sc-person__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.sc-person__name {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.015em;
}

.sc-person__role {
	display: block;
	margin-top: 4px;
	color: var(--sc-pink-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sc-person__bio {
	margin-top: var(--sc-2);
	color: var(--sc-muted);
	font-size: 15px;
	line-height: 1.55;
}

/* Photo à côté du texte dès que la fiche dispose de 360 px : 160 px de portrait,
   24 px de gouttière, au moins 176 px de texte. En dessous — un téléphone, ou une
   colonne étroite — le portrait passe au-dessus du texte.
   Sans prise en charge des requêtes de conteneur, tout reste empilé : le repli
   est celui de la pile mobile, jamais une mise en page cassée. */
@container (min-width: 360px) {
	.sc-person {
		grid-template-columns: 160px minmax(0, 1fr);
		align-items: start;
	}

	/* La colonne fait 160 px : le cadre carré la remplit exactement, sans
	   étirement possible. */
	.sc-person__photo {
		max-width: 160px;
	}
}

/* --------------------------------------------------------------------------
   13.6b Dossier auteur — bandes pleine largeur. Le changement de surface
   (paper / cool / warm) est la transition. Pas de carte, pas d’empilement.
   -------------------------------------------------------------------------- */

.sc-author-band__head {
	display: flex;
	align-items: center;
	gap: var(--sc-2);
	margin-bottom: var(--sc-4);
}

.sc-author-band__icon {
	width: 24px;
	height: 24px;
}

.sc-author-band__title {
	margin: 0;
}

.sc-author-band__intro {
	display: grid;
	gap: var(--sc-5);
	min-width: 0;
}

.sc-author-band__rail,
.sc-author-band__bio,
.sc-author-band__chapter,
.sc-author-band__split {
	min-width: 0;
}

.sc-author-band__ext {
	margin-top: var(--sc-3);
}

.sc-author-band__split {
	display: grid;
	gap: var(--sc-5);
}

@media (max-width: 639px) {
	.sc-author-band .sc-row__aside {
		flex-basis: 100%;
		margin-left: 0;
	}
}

@media (max-width: 1023px) {
	.sc-author-band__split--2 > * + * {
		padding-top: var(--sc-5);
		border-top: 1px solid var(--sc-line);
	}
}

@media (min-width: 1024px) {
	.sc-author-band__intro--split {
		grid-template-columns: minmax(0, 1fr) 240px;
		gap: var(--sc-6);
		align-items: start;
	}

	.sc-author-band__rail {
		padding-left: var(--sc-5);
		border-left: 1px solid var(--sc-line);
	}

	.sc-author-band__split--2 {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--sc-6);
		align-items: start;
	}

	.sc-author-band__split--2 > :nth-child(2) {
		padding-left: var(--sc-5);
		border-left: 1px solid var(--sc-line);
	}
}

/* --------------------------------------------------------------------------
   13.7 Chapitre d'expertise — chapitre ouvert, pas de panneau blanc géant.
   La transition entre chapitres se fait par changement de surface.
   -------------------------------------------------------------------------- */

.sc-chapter {
	padding-block: var(--sc-section-y-dense);
	border-top: 1px solid var(--sc-line);
}

.sc-chapter:first-of-type {
	border-top: 0;
}

.sc-chapter--cool {
	background: var(--sc-cool);
	border-top: 0;
}

.sc-chapter--warm {
	background: var(--sc-warm);
	border-top: 0;
}

.sc-chapter__grid {
	display: grid;
	gap: var(--sc-5);
}

.sc-chapter__intro .sc-label {
	margin-bottom: var(--sc-1);
}

.sc-chapter__title {
	font-size: clamp(1.625rem, 2.6vw, 2.25rem);
	line-height: 1.1;
	letter-spacing: var(--sc-track-title);
}

.sc-chapter__lead {
	max-width: 46ch;
	margin-top: var(--sc-2);
	color: var(--sc-muted);
	font-size: 17px;
	line-height: 1.6;
}

.sc-chapter__cta {
	margin-top: var(--sc-2);
}

/* Numéros : uniquement les trois étapes réelles du processus, où l'ordre
   porte une information. Nulle part ailleurs sur le site. */
.sc-steps {
	display: grid;
	gap: 0;
	list-style: none;
	border-top: 1px solid var(--sc-line-strong);
}

.sc-steps li {
	display: flex;
	align-items: center;
	gap: var(--sc-2);
	padding-block: var(--sc-2);
	border-bottom: 1px solid var(--sc-line);
}

.sc-steps .sc-icon {
	margin-top: 0;
}

.sc-steps__copy {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.sc-steps__num {
	flex: none;
	color: var(--sc-pink-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
}

.sc-steps strong {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
}

@media (min-width: 640px) {
	.sc-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sc-steps li {
		border-bottom: 0;
		border-left: 1px solid var(--sc-line);
		padding-inline: var(--sc-2);
	}

	.sc-steps li:first-child {
		border-left: 0;
		padding-left: 0;
	}
}

.sc-chapter__block {
	padding-top: var(--sc-3);
	margin-top: var(--sc-4);
	border-top: 1px solid var(--sc-line);
}

.sc-chapter__subtitle {
	margin-bottom: var(--sc-2);
	color: var(--sc-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sc-list {
	display: grid;
	gap: var(--sc-1);
	list-style: none;
}

.sc-list li {
	position: relative;
	padding-left: var(--sc-3);
	font-size: 16px;
	line-height: 1.55;
}

/* Puce : filet rose de 8 px, pas une icône décorative. */
.sc-list li::before {
	content: "";
	position: absolute;
	top: 0.7em;
	left: 0;
	width: 10px;
	height: 2px;
	background: var(--sc-pink);
}

.sc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-1);
	list-style: none;
}

/* Capsule sémantique : ces entrées sont de vraies catégories de livrable. */
.sc-tags li,
.sc-tags a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 4px 12px;
	border: 1px solid var(--sc-line-strong);
	border-radius: var(--sc-radius-pill);
	color: var(--sc-text);
	font-size: 14px;
	text-decoration: none;
}

.sc-tags a:hover {
	border-color: var(--sc-ink);
	color: var(--sc-ink);
}

/* Preuve concrète : filet rose à gauche, aucun aplat rose, aucune carte. */
.sc-proof {
	margin-top: var(--sc-4);
	padding: var(--sc-1) 0 var(--sc-1) var(--sc-3);
	border-left: 3px solid var(--sc-pink);
}

.sc-proof__label {
	display: block;
	margin-bottom: 4px;
	color: var(--sc-pink-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sc-proof p {
	font-size: 16px;
	line-height: 1.55;
}

@media (min-width: 1024px) {
	.sc-chapter__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: var(--sc-7);
	}
}

/* Sommaire interne des expertises : rail sobre, pas de panneau vitré. */
.sc-toc {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--sc-line);
	list-style: none;
}

.sc-toc li {
	border-bottom: 1px solid var(--sc-line);
}

.sc-toc a {
	display: flex;
	align-items: center;
	gap: var(--sc-2);
	min-height: 56px;
	color: var(--sc-ink);
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
}

.sc-toc a:hover {
	color: var(--sc-pink-ink);
}

.sc-toc a svg {
	margin-left: auto;
	transition: transform var(--sc-duration-ui) var(--sc-ease);
}

.sc-toc a:hover svg {
	transform: translate(2px, -2px);
}

@media (min-width: 640px) {
	.sc-toc {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sc-toc li {
		border-bottom: 0;
		border-left: 1px solid var(--sc-line);
	}

	.sc-toc li:first-child {
		border-left: 0;
	}

	.sc-toc a {
		padding-inline: var(--sc-2);
	}

	.sc-toc li:first-child a {
		padding-left: 0;
	}
}

/* --------------------------------------------------------------------------
   13.8 Médias
   -------------------------------------------------------------------------- */

.sc-media {
	margin: 0;
}

.sc-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sc-radius-compact);
}

.sc-media--band img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center 45%;
}

/* La seule ombre du système, réservée aux médias qui doivent se détacher. */
.sc-media--raised img {
	border-radius: var(--sc-radius-standard);
	box-shadow: var(--sc-shadow-media);
}

/* Légende sous l'image, jamais posée dessus. */
.sc-media figcaption,
.sc-media__caption {
	display: block;
	margin-top: var(--sc-1);
	color: var(--sc-muted);
	font-size: 14px;
	line-height: 1.45;
}

.sc-section--ink .sc-media figcaption,
.sc-section--ink .sc-media__caption {
	color: var(--sc-muted-on-dark);
}

.sc-captures {
	display: grid;
	gap: var(--sc-5);
}

@media (min-width: 1024px) {
	.sc-captures--multiple {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sc-captures--multiple > :first-child {
		grid-column: 1 / -1;
	}
}

.sc-browser-preview {
	position: relative;
	margin: 0;
	padding-bottom: 10px;
}

.sc-browser-preview__window {
	overflow: hidden;
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-standard);
	background: var(--sc-paper);
	box-shadow: var(--sc-shadow-media);
}

.sc-browser-preview__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 36px;
	padding: 0 12px;
	background: var(--sc-warm);
	border-bottom: 1px solid var(--sc-line);
}

.sc-browser-preview__controls {
	display: flex;
	gap: 6px;
	flex: none;
}

.sc-browser-preview__controls span {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sc-line-strong);
}

.sc-browser-preview__address {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 4px 10px;
	border-radius: 4px;
	background: var(--sc-paper);
	color: var(--sc-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.sc-browser-preview__stage {
	background: var(--sc-cool);
}

.sc-browser-preview__stage img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.sc-browser-preview__badge {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: -8px 0 0 12px;
	padding: 6px 12px;
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-pill);
	background: var(--sc-paper);
	color: var(--sc-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
}

.sc-browser-preview__icon {
	width: 16px;
	height: 16px;
	color: #474e5d;
}

/* --------------------------------------------------------------------------
   13.9 CTA commun — ouvert, titre à gauche, texte et action à droite.
   Le changement de surface sépare déjà : pas de filet ni de vide supérieur.
   -------------------------------------------------------------------------- */

.sc-cta {
	padding-block: var(--sc-section-y-dense);
}

/* Surface chaude optionnelle : la séparation se fait par le fond, pas un filet. */
.sc-cta--warm {
	background: var(--sc-warm);
	border-top: 0;
	border-radius: 0;
	box-shadow: none;
}

.sc-cta__grid {
	display: grid;
	gap: var(--sc-4);
}

.sc-cta__title {
	max-width: 20ch;
}

.sc-cta__text {
	max-width: 44ch;
	color: var(--sc-muted);
	font-size: 17px;
	line-height: 1.55;
}

.sc-cta__actions {
	margin-top: var(--sc-3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-2);
}

@media (min-width: 1024px) {
	.sc-cta__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--sc-7);
		align-items: start;
	}
}

/* --------------------------------------------------------------------------
   13.10 Bandeau « projet suivant » — simple, pas une nouvelle grosse carte
   -------------------------------------------------------------------------- */

.sc-next {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sc-1) var(--sc-3);
	min-height: 44px;
	padding-block: var(--sc-3);
	border-top: 1px solid var(--sc-line);
	border-bottom: 1px solid var(--sc-line);
	color: var(--sc-ink);
	text-decoration: none;
}

.sc-pager-section {
	padding-block: var(--sc-4);
	border-top: 1px solid var(--sc-line);
}

@media (min-width: 1024px) {
	.sc-pager-section {
		padding-block: var(--sc-4) var(--sc-5);
	}
}

.sc-pager {
	display: grid;
	gap: var(--sc-2);
	min-width: 0;
}

@media (min-width: 640px) {
	.sc-pager {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--sc-4);
	}
}

.sc-pager__link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
	min-height: 64px;
	padding: 10px 0;
	color: var(--sc-ink);
	text-decoration: none;
}

.sc-pager__link--next {
	align-items: flex-end;
	text-align: right;
}

@media (max-width: 639px) {
	.sc-pager__link--next {
		align-items: flex-start;
		text-align: left;
	}
}

.sc-pager__dir {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--sc-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sc-pager__name {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	font-weight: 600;
	letter-spacing: -0.015em;
}

.sc-pager__cat {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--sc-muted);
	font-size: 13px;
}

.sc-pager__link:hover .sc-pager__name {
	color: var(--sc-pink-ink);
}

.sc-pager .sc-btn__icon {
	width: 28px;
	height: 28px;
	background: var(--sc-warm);
	box-shadow: inset 0 0 0 1px var(--sc-line);
}

.sc-case-brand {
	display: grid;
	min-width: 0;
}

.sc-case-brand__mark {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.sc-case-brand__domain {
	margin-top: 10px;
	opacity: 0.62;
	font-size: 14px;
	font-weight: 600;
}

.sc-case-brand__logo {
	max-width: min(60%, 320px);
	max-height: 80px;
	object-fit: contain;
	object-position: left center;
}

.sc-next__label {
	color: var(--sc-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sc-next__name {
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	font-weight: 600;
	letter-spacing: -0.015em;
}

.sc-next__arrow {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
}

.sc-next:hover {
	border-color: var(--sc-pink);
}

.sc-next:hover .sc-next__name {
	color: var(--sc-pink-ink);
}

/* --------------------------------------------------------------------------
   13.11 Pages documentaires — sommaire latéral et contenu
   -------------------------------------------------------------------------- */

.sc-doc__grid {
	display: grid;
	gap: var(--sc-5);
}

.sc-doc__nav ul {
	list-style: none;
	border-top: 1px solid var(--sc-line);
}

.sc-doc__nav li {
	border-bottom: 1px solid var(--sc-line);
}

.sc-doc__nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	color: var(--sc-text);
	font-size: 15px;
	text-decoration: none;
}

.sc-doc__nav .sc-icon {
	width: 22px;
	height: 22px;
}

.sc-doc__nav a:hover {
	color: var(--sc-pink-ink);
}

/* État actif : couleur ET filet, jamais le rose seul. */
.sc-doc__nav [aria-current="page"] {
	color: var(--sc-ink);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--sc-pink);
	padding-left: var(--sc-2);
}

@media (min-width: 1024px) {
	.sc-doc__grid {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: var(--sc-7);
		align-items: start;
	}

	.sc-doc__nav {
		position: sticky;
		top: calc(var(--sc-header-h) + var(--sc-3));
	}
}

/* Contact : formulaire dominant, coordonnées en appui. Aucune carte ombrée. */
.sc-contact {
	display: grid;
	gap: var(--sc-6);
	align-items: start;
}

.sc-contact > * {
	min-width: 0;
}

@media (min-width: 1024px) {
	.sc-contact {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--sc-7);
	}

	.sc-contact aside {
		padding-left: var(--sc-5);
		border-left: 1px solid var(--sc-line);
	}
}

/* --------------------------------------------------------------------------
   13.12 Pagination, états vides, note
   -------------------------------------------------------------------------- */

.sc-pagination {
	margin-top: var(--sc-5);
	padding-top: var(--sc-3);
	border-top: 1px solid var(--sc-line);
}

.sc-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-1);
	list-style: none;
}

.sc-pagination a,
.sc-pagination .current,
.sc-pagination .dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 44px;
	min-height: 48px;
	padding-inline: 12px;
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-control);
	color: var(--sc-text);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.sc-pagination .sc-btn__icon {
	width: 28px;
	height: 28px;
	background: var(--sc-warm);
	box-shadow: inset 0 0 0 1px var(--sc-line);
}

.sc-pagination .sc-btn__icon svg {
	width: 14px;
	height: 14px;
}

.sc-pagination a:hover {
	border-color: var(--sc-ink);
	color: var(--sc-ink);
}

.sc-pagination .current {
	border-color: var(--sc-ink);
	background: var(--sc-ink);
	color: var(--sc-paper);
}

.sc-pagination .dots {
	border-color: transparent;
}

.sc-empty {
	max-width: 60ch;
	padding: var(--sc-4) 0;
}

.sc-empty p {
	margin-top: var(--sc-2);
	color: var(--sc-muted);
}

.sc-empty__actions {
	margin-top: var(--sc-3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-2);
}

.sc-notice {
	max-width: var(--sc-measure);
	margin-bottom: var(--sc-4);
	padding: var(--sc-2) var(--sc-3);
	border-left: 3px solid var(--sc-line-strong);
	background: var(--sc-warm);
	color: var(--sc-text);
	font-size: 16px;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   13.13 Bloc auteur — bande éditoriale, portrait rond, pas de carte ni de CTA interne.
   -------------------------------------------------------------------------- */

.sc-author {
	display: grid;
	gap: var(--sc-3);
	max-width: var(--sc-measure);
}

.sc-author__photo {
	display: block;
	width: 96px;
	height: 96px;
	overflow: hidden;
	border: 1px solid var(--sc-line);
	border-radius: 50%;
	background: var(--sc-warm);
}

.sc-author__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.sc-author__name {
	font-size: clamp(1.1875rem, 1.5vw, 1.5rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

.sc-author__role {
	display: block;
	margin-top: 6px;
	color: var(--sc-pink-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sc-author__expertise {
	margin-top: 8px;
	color: var(--sc-text);
	font-size: 16px;
}

.sc-author__bio {
	margin-top: var(--sc-2);
	color: var(--sc-muted);
	font-size: 16px;
	line-height: 1.55;
}

.sc-author__ext {
	margin-top: var(--sc-3);
}

.sc-eeat {
	max-width: var(--sc-measure);
	margin-top: var(--sc-5);
}

@media (min-width: 640px) {
	.sc-author {
		grid-template-columns: 112px minmax(0, 1fr);
		gap: var(--sc-5);
		align-items: start;
	}

	.sc-author__photo {
		width: 112px;
		height: 112px;
	}
}

.sc-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--sc-radius-pill);
	background: var(--sc-warm);
	color: var(--sc-muted);
	font-weight: 700;
	overflow: hidden;
}

.sc-avatar--photo {
	border-radius: var(--sc-radius-pill);
	object-fit: cover;
}

/* ==========================================================================
   14. CONTENU ÉDITORIAL (the_content) — articles et pages historiques
   --------------------------------------------------------------------------
   Le corps historique n'est pas altéré : on le rend lisible et contenu.
   ========================================================================== */

.sc-prose > * + * {
	margin-top: var(--sc-3);
}

.sc-prose h2 {
	margin-top: var(--sc-5);
	font-size: clamp(1.5rem, 2.2vw, 1.875rem);
	line-height: 1.15;
	letter-spacing: var(--sc-track-title);
}

.sc-prose h3 {
	margin-top: var(--sc-4);
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
	font-weight: 600;
	line-height: 1.25;
}

.sc-prose h4,
.sc-prose h5,
.sc-prose h6 {
	margin-top: var(--sc-4);
	font-size: 18px;
	font-weight: 600;
}

.sc-prose a {
	color: var(--sc-pink-ink);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.sc-prose ul,
.sc-prose ol {
	padding-left: var(--sc-3);
}

.sc-prose li + li {
	margin-top: var(--sc-1);
}

.sc-prose blockquote {
	margin: var(--sc-4) 0;
	padding-left: var(--sc-3);
	border-left: 3px solid var(--sc-pink);
	color: var(--sc-ink);
	font-size: 19px;
	line-height: 1.5;
}

.sc-prose blockquote p + p {
	margin-top: var(--sc-2);
}

.sc-prose code,
.sc-prose kbd,
.sc-prose samp {
	padding: 2px 6px;
	border-radius: var(--sc-radius-compact);
	background: var(--sc-warm);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

.sc-prose pre {
	overflow-x: auto;
	max-width: 100%;
	padding: var(--sc-3);
	border-radius: var(--sc-radius-compact);
	background: var(--sc-warm);
	font-size: 15px;
}

.sc-prose pre code {
	padding: 0;
	background: none;
}

/* Images et embeds historiques : responsive, jamais étirés, jamais débordants. */
.sc-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--sc-radius-compact);
}

.sc-prose figure {
	margin: var(--sc-4) 0;
}

.sc-prose figcaption,
.sc-prose .wp-caption-text {
	margin-top: var(--sc-1);
	color: var(--sc-muted);
	font-size: 14px;
	line-height: 1.45;
}

.sc-prose iframe,
.sc-prose embed,
.sc-prose object,
.sc-prose video {
	display: block;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
	border: 0;
	border-radius: var(--sc-radius-compact);
}

.sc-prose .wp-caption {
	max-width: 100%;
}

.sc-prose .alignleft,
.sc-prose .alignright,
.sc-prose .aligncenter,
.sc-prose .alignnone {
	max-width: 100%;
	height: auto;
}

.sc-prose .aligncenter {
	display: block;
	margin-inline: auto;
}

@media (min-width: 768px) {
	.sc-prose .alignleft {
		float: left;
		margin: 0 var(--sc-3) var(--sc-2) 0;
		max-width: 50%;
	}

	.sc-prose .alignright {
		float: right;
		margin: 0 0 var(--sc-2) var(--sc-3);
		max-width: 50%;
	}
}

/* Tableaux anciens : conteneur défilable accessible, sans élargir le document. */
.sc-table-scroll {
	overflow-x: auto;
	max-width: 100%;
	margin: var(--sc-4) 0;
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-compact);
	-webkit-overflow-scrolling: touch;
}

.sc-table-scroll:focus-visible {
	outline: 3px solid var(--sc-focus-ring);
	outline-offset: 2px;
}

.sc-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.sc-table-scroll table {
	margin: 0;
	min-width: 480px;
}

.sc-prose th,
.sc-prose td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--sc-line);
	text-align: left;
	vertical-align: top;
}

.sc-prose th {
	background: var(--sc-warm);
	color: var(--sc-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Résidus de constructeur de page dans les contenus historiques : contenus,
   jamais élargisseurs de document. */
.sc-prose [class*="vc_"],
.sc-prose [class*="wpb_"] {
	max-width: 100%;
	padding: 0;
	background-image: none;
}

.sc-prose .wpb_wrapper > :first-child {
	margin-top: 0;
}

/* ==========================================================================
   15. COMMENTAIRES
   ========================================================================== */

.sc-comments {
	max-width: var(--sc-measure);
	margin-top: var(--sc-6);
	padding-top: var(--sc-4);
	border-top: 1px solid var(--sc-line);
}

/* Première pièce d’une section : le changement de surface suffit. */
.sc-container > .sc-comments:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.sc-comments__title {
	margin-bottom: var(--sc-4);
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	letter-spacing: var(--sc-track-title);
}

.sc-comments ol,
.sc-comments ul {
	list-style: none;
}

.sc-comment {
	padding-top: var(--sc-3);
	border-top: 1px solid var(--sc-line);
}

.sc-comments > .sc-comment-list > .sc-comment:first-child {
	border-top: 0;
	padding-top: 0;
}

/* Indentation des réponses : 12 px mobile, 24 px desktop, aplatie au-delà
   d'une profondeur raisonnable (voir max_depth côté gabarit). */
.sc-comment .children {
	margin-top: var(--sc-4);
	padding-top: var(--sc-3);
	padding-left: 16px;
	border-left: 1px solid var(--sc-line);
}

@media (min-width: 640px) {
	.sc-comment .children {
		padding-left: var(--sc-4);
	}
}

.sc-comment__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sc-1);
	margin-bottom: var(--sc-1);
}

.sc-comment__meta img,
.sc-comment__meta .sc-avatar {
	flex: none;
	width: 40px;
	height: 40px;
}

.sc-comment__author {
	color: var(--sc-ink);
	font-size: 16px;
	font-weight: 600;
}

.sc-comment__date {
	color: var(--sc-muted);
	font-size: 14px;
	text-decoration: none;
}

.sc-comment__text {
	font-size: 16px;
	line-height: 1.6;
}

.sc-comment__text > * + * {
	margin-top: var(--sc-2);
}

.sc-comment__moderation {
	color: var(--sc-muted);
	font-style: italic;
}

.sc-comment__reply {
	margin-top: var(--sc-1);
}

.sc-comment__reply a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--sc-pink-ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.sc-comment__reply a:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.comment-respond {
	margin-top: var(--sc-5);
	padding-top: var(--sc-4);
	border-top: 1px solid var(--sc-line);
}

.comment-reply-title {
	margin-bottom: var(--sc-3);
	font-size: 20px;
	font-weight: 600;
}

.comment-form {
	display: grid;
	gap: var(--sc-3);
}

.comment-form label {
	display: block;
	margin-bottom: 6px;
	color: var(--sc-ink);
	font-size: 15px;
	font-weight: 600;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--sc-line-input);
	border-radius: var(--sc-radius-control);
	background: var(--sc-paper);
	color: var(--sc-text);
	font-family: inherit;
	font-size: 16px;
}

.comment-form textarea {
	min-height: 136px;
	resize: vertical;
}

.comment-form .submit {
	justify-self: start;
	min-height: 48px;
	padding: 5px 20px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--sc-radius-control);
	background: var(--sc-pink);
	color: var(--sc-paper);
	box-shadow: var(--sc-shadow-btn), var(--sc-shadow-btn-inset);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.comment-form .submit:hover {
	background: var(--sc-pink-press);
}

.comment-form .comment-notes,
.comment-form .comment-form-cookies-consent label {
	color: var(--sc-muted);
	font-size: 13px;
	font-weight: 400;
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--sc-1);
}

.comment-form-cookies-consent input {
	margin-top: 4px;
}

.comment-form-cookies-consent label {
	margin: 0;
}

/* ==========================================================================
   16. MOUVEMENT
   --------------------------------------------------------------------------
   Trois mouvements seulement, en transform et opacity : apparition unique de
   section, survol de carte (§ 13.3), soulignement de lien (§ 7).
   Le contenu est visible par défaut : sans JavaScript, rien ne manque.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.sc-reveal-ready .sc-reveal:not(.is-visible) {
		opacity: 0;
		transform: translateY(14px);
	}

	.sc-reveal-ready .sc-reveal.is-visible {
		opacity: 1;
		transform: none;
		transition: opacity var(--sc-duration-reveal) var(--sc-ease),
			transform var(--sc-duration-reveal) var(--sc-ease);
	}

	.sc-reveal-ready .sc-reveal.is-visible:nth-child(2) {
		transition-delay: 60ms;
	}

	.sc-reveal-ready .sc-reveal.is-visible:nth-child(3) {
		transition-delay: 120ms;
	}
}

/* ==========================================================================
   16b. CLASSIC SEARCH — landing produit
   Hero d'index avec sommaire ancré, galerie éditoriale, FAQ.
   ========================================================================== */

.sc-hero__trust {
	margin-top: var(--sc-3);
	color: var(--sc-muted-on-dark);
	font-size: 14px;
	line-height: 1.45;
	max-width: 42ch;
}

.sc-hero--product-index {
	--sc-hero-index-h: 360px;
	padding-top: var(--sc-5);
}

@media (max-width: 1023px) {
	.sc-hero--product-index {
		padding-top: var(--sc-4);
	}
}

.sc-hero--doc .sc-hero__actions {
	margin-top: var(--sc-3);
}

.sc-cs-landing .sc-section:first-child {
	padding-top: var(--sc-6);
}

/* Une seule grille éditoriale : chaque chapitre part de l'axe principal du
   site. Les paragraphes gardent une longueur de lecture confortable sans
   recréer une colonne étroite centrée au milieu de la page. */
.sc-cs-landing .sc-section__head {
	max-width: none;
}

.sc-cs-landing .sc-section > .sc-container > p {
	max-width: 72ch;
}

.sc-cs-points {
	list-style: none;
	display: grid;
	gap: 0;
	border-top: 1px solid var(--sc-line);
}

.sc-cs-points li {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	column-gap: 18px;
	padding-block: var(--sc-3);
	border-bottom: 1px solid var(--sc-line);
}

.sc-cs-points h3 {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
}

.sc-cs-points p {
	margin: 0;
	color: var(--sc-muted);
	font-size: 15px;
	line-height: 1.55;
}

@media (min-width: 1024px) {
	.sc-cs-points {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--sc-5);
		border-top: 0;
	}

	.sc-cs-points li {
		display: flex;
		flex-direction: column;
		gap: var(--sc-2);
		padding-top: var(--sc-3);
		border-bottom: 0;
		border-top: 1px solid var(--sc-line-strong);
	}
}

.sc-cs-steps li {
	align-items: flex-start;
	padding-block: var(--sc-3);
}

.sc-cs-steps .sc-steps__copy {
	display: block;
}

.sc-cs-steps strong {
	display: block;
	margin-bottom: 8px;
}

.sc-cs-step__text {
	display: block;
	color: var(--sc-muted);
	font-size: 15px;
	line-height: 1.55;
}

.sc-cs-source,
.sc-cs-inline-action {
	margin-top: var(--sc-4);
}

.sc-cs-gallery__stage {
	margin: 0;
	overflow: visible;
	background: transparent;
}

.sc-cs-gallery__frame {
	overflow: hidden;
	background: var(--sc-ink);
}

.sc-cs-gallery__stage img {
	display: block;
	width: 100%;
	height: auto;
}

.sc-cs-gallery__stage figcaption {
	padding: 12px 0 0;
	color: var(--sc-muted);
	font-size: 14px;
}

.sc-cs-gallery__nav {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	margin-top: var(--sc-3);
}

@media (max-width: 639px) {
	.sc-cs-gallery__nav {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.sc-cs-gallery__thumb {
	margin: 0;
	padding: 0;
	min-height: 44px;
	border: 1px solid var(--sc-line);
	background: var(--sc-paper);
	cursor: pointer;
}

.sc-cs-gallery__thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.sc-cs-gallery__thumb[aria-pressed="true"] {
	border-color: var(--sc-pink);
}

.sc-cs-gallery__thumb:focus-visible {
	outline: 2px solid var(--sc-pink);
	outline-offset: 2px;
}

.sc-faq details {
	border-bottom: 1px solid var(--sc-line);
}

.sc-faq summary {
	cursor: pointer;
	padding-block: var(--sc-2);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	list-style: none;
}

.sc-faq summary::-webkit-details-marker {
	display: none;
}

.sc-faq .sc-faq__body {
	padding-bottom: var(--sc-3);
	color: var(--sc-muted);
}

.sc-cs-disclaimer {
	margin-top: var(--sc-4);
	max-width: 62ch;
	color: var(--sc-muted);
	font-size: 14px;
	line-height: 1.55;
}

/* ==========================================================================
   17. PRÉFÉRENCES SYSTÈME
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* Tout le contenu est affiché immédiatement, sans exception. */
	.sc-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}

@media (prefers-contrast: more) {
	:root {
		--sc-text: #1d2026;
		--sc-muted: #43474f;
		--sc-line: #9aa0aa;
		--sc-line-strong: #6d7280;
		--sc-line-input: #43474f;
		--sc-pink-ink: #99084c;
		--sc-muted-on-dark: #f2f3f5;
	}

	.sc-card__media,
	.sc-media img {
		border: 1px solid var(--sc-line-strong);
	}
}

@media print {
	.sc-header,
	.sc-footer,
	.sc-mobile-menu,
	.sc-cta,
	.sc-next,
	.sc-skip-link {
		display: none;
	}

	body {
		color: #000;
		font-size: 12pt;
	}

	.sc-prose {
		max-width: none;
	}
}