/**
 * Calmflow — styles du thème.
 * Structure du site, en-tête, pied de page et sections de l'accueil.
 * Les réglages globaux (couleurs, typographie, espacements) restent dans theme.json.
 */

/* Filet doré discret : cadre les bandes sombres côté fond clair */
body {
	--cf-hairline: color-mix(in srgb, var(--wp--preset--color--or) 35%, transparent);
}

/* ---------- Structure du site ---------- */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}
.admin-bar .wp-site-blocks {
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}
.wp-site-blocks > * {
	margin-block: 0;
}
.wp-site-blocks > .site-main {
	flex-grow: 1;
}
.site-main {
	padding-block: var(--wp--preset--spacing--60);
}
.site-main--flush {
	padding-block: 0;
}
.wp-block-post-content > .cf-section {
	margin-block: 0;
}

/* ---------- Focus clavier ---------- */
:where(a, button, input, select, textarea, .wp-element-button):focus-visible {
	outline: 2px solid var(--wp--preset--color--bleu-profond);
	outline-offset: 3px;
}
.cf-dark :where(a, .wp-element-button):focus-visible,
.site-footer :where(a, button):focus-visible,
.wp-block-navigation__responsive-container.is-menu-open :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--or);
}

/* ---------- En-tête ---------- */
.site-header {
	padding-block: var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--wp--preset--color--bordure);
}
.site-header .wp-block-site-logo img {
	height: auto;
}
@media (max-width: 599px) {
	.site-header .wp-block-site-logo img {
		width: 88px;
	}
}
.site-header .wp-block-navigation-item__content {
	padding-block: 0.5rem;
}
.site-header .wp-block-navigation-item__content[aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--or-fonce);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.45em;
}

/* Menu mobile : zones tactiles d'au moins 44 px, panneau bleu nuit */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	padding: 0.625rem;
}
.site-header .wp-block-navigation__responsive-container-open {
	margin-inline-end: -0.625rem;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding-block: 0.75rem;
	font-size: var(--wp--preset--font-size--large);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"] {
	text-decoration-color: var(--wp--preset--color--or);
}

/* ---------- Pied de page ---------- */
.site-footer {
	padding-block: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--bleu-nuit);
	color: var(--wp--preset--color--ivoire);
	box-shadow: inset 0 1px 0 var(--cf-hairline);
}
.site-footer a {
	color: var(--wp--preset--color--or);
}
.site-footer .wp-block-navigation-item__content {
	padding-block: 0.6rem;
}

/* ---------- Sections ---------- */
.cf-section {
	padding-block: var(--wp--preset--spacing--70);
}
.cf-section__head {
	margin-block-end: var(--wp--preset--spacing--50);
}
.cf-section__head > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}
.cf-section h2 {
	margin-block: 0;
	text-wrap: balance;
}

/* Sections sombres : titres et focus lisibles */
.cf-dark :where(h1, h2, h3, h4) {
	color: var(--wp--preset--color--ivoire);
}

/* ---------- Surtitre ---------- */
.cf-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bleu-profond);
}
.cf-eyebrow::before {
	content: "";
	flex: 0 0 2.5rem;
	height: 1px;
	background: currentColor;
}
.cf-dark .cf-eyebrow {
	color: var(--wp--preset--color--or);
}

.cf-lead {
	max-width: 44ch;
	font-size: clamp(1.125rem, 0.9rem + 1vw, 1.375rem);
	line-height: 1.5;
}

/* ---------- Hero ---------- */
.cf-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	overflow: clip;
	padding-block: clamp(3rem, 5vw, 4.5rem);
	/* Lumière directionnelle douce derrière le texte, opposée au graphisme */
	background-image: linear-gradient(115deg, color-mix(in srgb, var(--wp--preset--color--bleu-profond) 40%, transparent) 0%, transparent 50%);
}
/* Filet doré de bas de bande, tracé au-dessus du graphisme */
.cf-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: var(--cf-hairline);
	pointer-events: none;
}
/* Visuel signature : inséré par le thème sous les textes (styles dans signature.css, chargé
   uniquement avec le hero). Il est hors flux : le texte qui le suit ne doit pas recevoir
   l'espacement automatique de WordPress. */
.cf-hero__art + * {
	margin-block-start: 0;
}
.cf-hero__inner > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}
.cf-hero__title {
	max-width: 13ch;
	font-size: clamp(2.5rem, 6vw, 4.75rem);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: normal;
}

/* Boutons : empilés et de même largeur sur mobile, côte à côte dès 600 px */
.cf-hero .cf-hero__actions {
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--50);
}
.cf-hero__actions .wp-block-button__link {
	display: block;
	box-sizing: border-box;
	width: 100%;
}
@media (min-width: 600px) {
	.cf-hero .cf-hero__actions {
		flex-direction: row;
		align-items: center;
	}
	.cf-hero__actions .wp-block-button__link {
		display: inline-block;
		width: auto;
	}
}

.cf-btn-or .wp-block-button__link {
	background: var(--wp--preset--color--or);
	color: var(--wp--preset--color--bleu-nuit);
}
.cf-btn-or .wp-block-button__link:hover,
.cf-btn-or .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--or-clair);
	color: var(--wp--preset--color--bleu-nuit);
}
.cf-dark .wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid currentColor;
	padding: calc(0.85em - 1px) calc(1.6em - 1px);
}
.cf-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--ivoire);
	color: var(--wp--preset--color--bleu-nuit);
}

/* ---------- Index numérotés ---------- */
.cf-index {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.16em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--bleu-profond);
}
.cf-dark .cf-index {
	color: var(--wp--preset--color--or);
}

/* ---------- Cartes univers : 1 colonne, puis 2 dès 600 px ---------- */
.cf-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
}
@media (min-width: 600px) {
	.cf-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
/* Dans une grille, les éléments ne reçoivent pas l'espacement vertical automatique de WordPress */
.cf-cards > *,
.cf-pillars > * {
	margin: 0;
}
.cf-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--bordure);
	border-color: color-mix(in srgb, var(--wp--preset--color--or) 45%, transparent);
	/* Profondeur : un liseré clair en haut, une ombre courte et une ombre portée diffuse */
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 0.9),
		0 1px 2px rgb(14 24 34 / 0.06),
		0 18px 36px -24px rgb(14 24 34 / 0.32);
}
.cf-card > * {
	margin: 0;
}
.cf-card h3 {
	font-size: var(--wp--preset--font-size--x-large);
}
.cf-card:hover {
	border-color: var(--wp--preset--color--or);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 0.9),
		0 1px 2px rgb(14 24 34 / 0.08),
		0 24px 44px -24px rgb(14 24 34 / 0.42);
}
.cf-card__link {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--20);
	font-weight: 600;
}
.cf-card__link a {
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--or);
	padding-bottom: 2px;
}
.cf-card__link a::after {
	content: " \2192" / "";
}
/* La carte entière est cliquable, via l'unique lien qu'elle contient */
.cf-card__link a::before {
	content: "";
	position: absolute;
	inset: 0;
}
.cf-card__link a:focus-visible {
	outline-offset: 4px;
}
/* Si le navigateur le permet, l'anneau de focus entoure toute la carte */
@supports selector(:has(a)) {
	.cf-card:has(a:focus-visible) {
		outline: 2px solid var(--wp--preset--color--bleu-profond);
		outline-offset: 4px;
	}
	.cf-card__link a:focus-visible {
		outline: none;
	}
}

/* ---------- Approche : 2 colonnes, puis 4 dès 960 px ---------- */
/* Lumière directionnelle venue du haut, sans halo */
.cf-approche {
	background-image: linear-gradient(170deg, color-mix(in srgb, var(--wp--preset--color--bleu-profond) 55%, transparent) 0%, transparent 60%);
	box-shadow: inset 0 1px 0 var(--cf-hairline), inset 0 -1px 0 var(--cf-hairline);
}
/* Ordinateur : la même famille de lignes de tension que le hero, en haut à droite, sans répéter sa composition */
@media (min-width: 60rem) {
	.cf-approche {
		background-image:
			url("../images/approche-tension.svg"),
			linear-gradient(170deg, color-mix(in srgb, var(--wp--preset--color--bleu-profond) 55%, transparent) 0%, transparent 60%);
		background-position: right top, 0 0;
		background-size: auto 100%, auto;
		background-repeat: no-repeat;
	}
}
.cf-pillars {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}
@media (min-width: 60rem) {
	.cf-pillars {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.cf-pillar {
	padding-block-start: var(--wp--preset--spacing--30);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--or) 50%, transparent);
}
.cf-pillar > * {
	margin: 0;
}
.cf-pillar h3 {
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--large);
	overflow-wrap: break-word;
}

/* ---------- Guide gratuit ---------- */
/* Lumière chaude venue de la droite, du côté de la couverture */
.cf-guide {
	background-image: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / 0.5) 100%);
}
/* Mobile : titre, couverture, puis présentation. Ordinateur : texte à gauche, couverture à droite. */
.cf-guide__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "head" "cover" "body";
	gap: var(--wp--preset--spacing--40);
}
.cf-guide__inner > * {
	margin: 0;
}
@media (min-width: 48rem) {
	.cf-guide__inner {
		grid-template-columns: minmax(0, 1fr) clamp(11rem, 26vw, 18rem);
		grid-template-rows: 1fr auto auto 1fr;
		grid-template-areas: ". cover" "head cover" "body cover" ". cover";
		gap: 0 var(--wp--preset--spacing--60);
	}
	/* Le texte reste centré en hauteur face à la couverture */
	.cf-guide__body {
		padding-block-start: var(--wp--preset--spacing--30);
	}
}
.cf-guide__head {
	grid-area: head;
}
.cf-guide__body {
	grid-area: body;
}
.cf-guide__head > * + *,
.cf-guide__body > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}
.cf-guide__head > *,
.cf-guide__body > * {
	max-width: 46rem;
}
.cf-guide h2 {
	max-width: 24ch;
}

/* Emplacement de la couverture officielle (ratio 3:4) : un bloc Image peut le remplacer */
.cf-guide__cover {
	grid-area: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: min(100%, 9rem);
	aspect-ratio: 3 / 4;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--or) 45%, transparent);
	background: var(--wp--preset--color--creme);
	/* Posé comme un objet : ombre portée courte et diffuse */
	box-shadow: 0 2px 6px rgb(14 24 34 / 0.08), 0 30px 48px -30px rgb(14 24 34 / 0.45);
}
@media (min-width: 48rem) {
	.cf-guide__cover {
		width: 100%;
		align-self: center;
	}
}
.cf-guide__cover > * {
	margin: 0;
}
.cf-guide__cover .cf-placeholder {
	padding: 0;
	border: 0;
	text-align: center;
}
.cf-guide__cover :where(figure, img) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Contenu à fournir : signalé visuellement */
.cf-placeholder {
	padding: 0.85rem 1.1rem;
	border: 1px dashed var(--wp--preset--color--or-fonce);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ardoise);
}

/* ---------- Mouvements ----------
   Tous les mouvements sont réservés aux personnes qui ne demandent pas à les réduire.
   Ceux du texte et des cartes sont en CSS seul : sans JavaScript, le contenu reste visible et
   l'état final s'affiche (la lumière du visuel signature suit la même règle, voir signature.css).
   Seules transform et opacity sont animées pour le texte (aucun décalage de mise en page). */
@media (prefers-reduced-motion: no-preference) {
	/* A. La révélation de la lumière du visuel signature est pilotée par assets/js/signature.js
	   (GSAP/WebGL) : aucune animation CSS ne la double. */

	/* B. Titre puis accroche : apparition douce, translation de 10 px.
	   Le titre part de 15 % d'opacité (et non de 0) : il reste l'élément affiché en premier,
	   sans retarder sa prise en compte comme contenu principal (LCP). */
	.cf-hero__title {
		animation: cf-rise-titre 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
	}
	.cf-hero .cf-lead {
		animation: cf-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.09s backwards;
	}

	/* C. Cartes : élévation de 2 px au survol */
	.cf-card {
		transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	}
	.cf-card:hover {
		transform: translateY(-2px);
	}
}
@keyframes cf-rise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}
@keyframes cf-rise-titre {
	from {
		opacity: 0.15;
		transform: translateY(10px);
	}
}

/* Identité officielle : contrastes fonctionnels, communs au site et à l’éditeur. */
.cf-dark .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--ivoire);
	background: transparent;
}
.cf-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	color: var(--wp--preset--color--bleu-nuit);
	background: var(--wp--preset--color--ivoire);
}

/* Accueil issu de la maquette 04 : blocs natifs, aucun mouvement décoratif. */
.site-header {background:#0E1822;color:#F3EEE7;border:0;padding-block:24px;}
.site-header .wp-block-site-logo {padding:0 27px;}
.site-header .wp-block-site-logo img {width:160px;height:160px;object-fit:contain;}
.site-header .wp-block-navigation a {color:#F3EEE7;}
.site-header :where(a,button):focus-visible {outline-color:#C4A063;}
.cf-hero__title,.cf-hero .cf-lead {animation:none!important;}
.cf-hero::after,.cf-eyebrow::before {display:none;}
.cf-hero,.cf-approche {background-image:none!important;box-shadow:none;}
.cf-home-v4 {background:#F3EEE7;color:#0E1822;margin-block:0;}
.cf-home-v4 > * {margin-block:0;}
.cf4-wrap {width:min(1200px,calc(100% - 64px));margin-inline:auto;}
.cf4-label {font-size:12px;letter-spacing:.18em;font-weight:700;line-height:1.5;margin:0 0 16px;}
.cf-home-v4 h1,.cf-home-v4 h2,.cf-home-v4 h3 {font-weight:600;letter-spacing:normal;margin:0;text-wrap:balance;}
.cf-home-v4 p {line-height:1.65;}
.cf4-hero {background:#0E1822;color:#F3EEE7;}
.cf4-hero-grid {display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:56px;padding-block:32px 64px;}
.cf4-hero-grid > * {min-width:0;margin:0;}
.cf4-intro .cf4-label {color:#C4A063;}
.cf4-intro h1 {font-size:clamp(38px,4.3vw,64px);line-height:1.06;color:#F3EEE7;max-width:20ch;}
.cf4-intro h1 em {color:#C4A063;font-style:normal;}
.cf4-signature {font-size:20px;margin:24px 0 28px;}
.cf4-quicklinks {display:flex;gap:16px;flex-wrap:wrap;}
.cf4-quicklinks > * {margin:0;flex:1;}
.cf4-quicklinks .wp-block-button {width:100%;}
.cf4-quicklinks .wp-block-button__link {display:block;text-align:center;background:#F3EEE7;color:#0E1822;border:1px solid #F3EEE7;min-height:48px;font-size:16px;padding:14px 20px;}
.cf4-quicklinks > :last-child .wp-block-button__link {background:#C4A063;border-color:#C4A063;}
.cf4-architecture {position:relative;overflow:hidden;aspect-ratio:320 / 211;margin:0;width:100%;background:#1B2A3A;}
.cf4-architecture img {position:absolute;top:-370.616%;left:0;width:329.6875%!important;max-width:none!important;height:auto!important;display:block;}
.cf4-univers {padding-block:64px 72px;}
.cf4-univers h2 {font-size:clamp(34px,3.2vw,46px);line-height:1.12;max-width:30ch;margin-bottom:32px;}
.cf4-portals {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
.cf4-portals > * {margin:0;}
.cf4-portal {display:flex;flex-direction:column;padding:36px;min-width:0;border-radius:3px;}
.cf4-portal > * {margin-top:0;}
.cf4-student {background:#D8CEC1;color:#0E1822;border-top:4px solid #6A83C7;}
.cf4-performance {background:#1B2A3A;color:#F3EEE7;border-top:4px solid #C4A063;}
.cf4-portal h3 {font-size:clamp(30px,3vw,42px);line-height:1.12;margin-bottom:24px;color:inherit;}
.cf4-portal .cf4-audience {font-size:16px;font-weight:700;margin:0 0 8px;}
.cf4-portal .wp-block-buttons {margin-top:auto;padding-top:20px;}
.cf4-portal .wp-block-button__link {font-size:16px;background:#0E1822;color:#F3EEE7;min-height:48px;padding:14px 22px;}
.cf4-performance .wp-block-button__link {background:#C4A063;color:#0E1822;}
.cf4-performance .cf4-label {color:#C4A063;}
.cf4-note {font-size:13px;line-height:1.5!important;margin:16px 0 0;}
.cf4-portal .cf4-note {max-width:42ch;}
.cf4-method {background:#0E1822;color:#F3EEE7;padding-block:56px;}
.cf4-method-grid {display:grid;grid-template-columns:.8fr 1.6fr;gap:48px;align-items:center;}
.cf4-method-grid > * {margin:0;min-width:0;}
.cf4-method .cf4-label {color:#C4A063;}
.cf4-method h2 {color:#F3EEE7;font-size:clamp(32px,3.2vw,44px);line-height:1.15;}
.cf4-steps {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px;}
.cf4-step {margin:0;border-top:1px solid #C4A063;padding-top:20px;}
.cf4-step h3 {color:#F3EEE7;font-size:29px;}
.cf4-step p {font-size:15px;margin:10px 0 0;}
.cf4-guide {padding-block:64px;background:#F3EEE7;}
.cf4-guide-grid {display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:center;}
.cf4-guide-grid > * {margin:0;min-width:0;}
.cf4-guide h2 {font-size:clamp(32px,3.5vw,46px);line-height:1.15;}
.cf4-guide .wp-block-button__link {font-size:16px;padding:14px 22px;}
.cf4-contact {padding:40px 0;background:#D8CEC1;}
.cf4-contact h2 {font-size:36px;}
.cf4-contact p {margin:12px 0 0;}
.cf-home-v4 a:hover {text-decoration:underline;text-underline-offset:4px;}
.cf-home-v4 .wp-block-button__link:hover {filter:brightness(.96);}
.cf4-hero :where(a,button):focus-visible,.cf4-performance :where(a,button):focus-visible,.cf4-method :where(a,button):focus-visible {outline:3px solid #F3EEE7;outline-offset:5px;}
.cf-home-v4 .wp-block-button__link {border-radius:2px;font-weight:600;}
@media(max-width:900px){
 .cf4-hero-grid {gap:28px;grid-template-columns:1.1fr .9fr;}
 .cf4-method-grid {grid-template-columns:1fr;}
 .cf4-method .cf4-architecture {display:none;}
 .cf4-guide-grid {gap:32px;}
}
@media(max-width:640px){
 .site-header {padding:24px 0;}
 .site-header .wp-block-site-logo {padding-inline:27px;}
 .site-header .wp-block-site-logo img {width:160px;height:160px;}
 .cf4-wrap {width:calc(100% - 40px);}
 .cf4-hero-grid {grid-template-columns:1fr;padding:16px 0 32px;gap:28px;}
 .cf4-intro h1 {font-size:42px;}

 .cf4-univers,.cf4-guide {padding-block:40px;}
 .cf4-portals,.cf4-guide-grid {grid-template-columns:1fr;gap:20px;}
 .cf4-portal {padding:28px 24px;}
 .cf4-portal h3 {font-size:36px;}
 .cf4-steps {grid-template-columns:1fr;gap:24px;}
 .cf4-method {padding-block:40px;}
 .cf4-contact a {overflow-wrap:anywhere;}
}
@media(prefers-reduced-motion:reduce){.cf-home-v4 *, .cf-home-v4 *::before,.cf-home-v4 *::after{animation:none!important;transition:none!important;}}
/* En-tête : conserver la cible tactile à l'intérieur du viewport. */
.site-header {padding-inline:20px;}
.site-header .wp-block-navigation__responsive-container-open {margin-inline-end:0;}
@media(max-width:640px){
 .cf4-quicklinks {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
 .cf4-quicklinks > * {min-width:0;margin:0!important;}
 .cf4-quicklinks .wp-block-button__link {padding:14px 10px;font-size:14px;}
}

/* Correction Farid : intégrer le logo sans rectangle visible. Le maître reste intact. */
.site-header .wp-block-site-logo img {
 border-radius:50%;
 -webkit-mask-image:radial-gradient(circle closest-side,#000 96%,transparent 100%);
 mask-image:radial-gradient(circle closest-side,#000 96%,transparent 100%);
}
/* Ouverture éditoriale, après retrait du visuel architectural refusé. */
.cf4-hero-grid {grid-template-columns:minmax(0,1fr);padding-block:32px 56px;}
.cf4-intro {max-width:960px;}
.cf4-intro h1 {max-width:23ch;font-size:clamp(42px,5vw,72px);}
.cf4-quicklinks {max-width:590px;}
.cf4-method-grid {grid-template-columns:minmax(0,1fr);}
.cf4-method-copy {max-width:1040px;}
@media(max-width:640px){
 .cf4-hero-grid {padding-block:16px 40px;}
 .cf4-intro h1 {font-size:42px;}
}