/*
	Theme Name: f28
	Template: atelierf28
	Text Domain: f28
	Domain Path: /languages
	Version: 4.0
	Last update : 20.8.26
*/

/* === FONTS === */

@font-face {
	font-family: 'Gabarito';
	src: url('assets/fonts/Gabarito-VariableFont_wght.woff2') format('woff2-variations');
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Rethink Sans';
	src: url('assets/fonts/RethinkSans-VariableFont_wght.woff2') format('woff2-variations');
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}


/* === VARIABLES === */

:root {

	/* to anchor */
	--scroll-offset: 0px;

	/* Couleurs */
	--color-dark: #0c0b0f;          /* noir encre — bg-dark */
	--color-main: #efe9e1;          /* crème — texte courant */
	--color-light: #efe9e1;
	--color-secondary: #17151d;
	--color-lightgray: #f4f4f4;
	--color-primary: #efe9e1;

	/* Nappe */
	--nappe-1: #ff4d8d;
	--nappe-2: #ff6a3d;
	--nappe-3: #7b3ff2;
	--nappe-4: #e33fb0;
	--nappe-5: #ffab4a;
	/* violet profond : seule fin de dégradé qui garde le crème lisible sur la
	   troisième colonne (le magenta descend à 3:1, l'indigo tient à 7:1) */
	--nappe-6: #4a1fb8;

	--accent-cool: #2ee2bd;

	/* Typo */
	--typo-title: 'Gabarito', system-ui, sans-serif;
	--typo-main: 'Rethink Sans', system-ui, sans-serif;
	--fw-title-bold: 700;
	--fw-title-extrabold: 700;
	--track-title: -0.015em;

	--fs-title-xxl: clamp(2.6rem, 8vw, 6rem);
	--fs-title-xl: clamp(2rem, 5.5vw, 4.4rem);	
	--fs-title-lg: clamp(1.6rem, 3vw, 2.6rem);
	--fs-md: clamp(1rem, 1.4vw, 1.12rem);

	--width-logo-header: clamp(34px, 2.8vw, 44px);
	--width-logo-header-small: clamp(24px, 2.1vw, 28px);
	--logo-box: clamp(38px, 3.2vw, 50px);        /* boîte au repos, sans fond */
	--logo-pastille: clamp(34px, 2.9vw, 40px);   /* pastille au scroll, serrée */

	--padding-lg: clamp(4.5rem, 11vh, 9rem);   /* haut/bas de section */

	--f28-gut: clamp(1.5rem, 5vw, 5rem);       /* gouttière propre au site */
	--f28-rail: clamp(1.25rem, 2vw, 2rem);     /* nav latérale : distance au bord */
	--f28-rail-zone: 0px;
	--f28-indent: 0px;

	--f28-card-pad: clamp(1.5rem, 2.5vw, 2.4rem);

	--ease-wipe: cubic-bezier(.22, 1, .36, 1);
	/* le wipe démarre sec (80 % de la course dans le premier tiers) : parfait
	   pour un logo qui apparaît, trop cassant pour une nappe qui inonde une
	   fiche. Celle-ci accélère et ralentit — même durée, geste plus doux. */
	--ease-soft: cubic-bezier(.45, .05, .25, 1);

	--footer-h: clamp(280px, 38vh, 380px);
	/* separation border */
	--footer-rule: none;

}

body {
	background-color: var(--color-dark);
	font-weight: var(--fw-regular);
	line-height: var(--line-height-md);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	/* le JS n'injecte pas les calques dans ce mode ; si la préférence change
	   après coup, cette règle les laisse à opacity 0 et seul le socle reste */
	.nappe-layer { animation: none; }

	.layout-columns .column-box::before,
	.header .main-menu a::after { transition: none; }
}

/* === Typo & colors === */
h1, h2, h3, h4,
span.h1-title {
	font-weight: var(--fw-title-bold);
	letter-spacing: var(--track-title);
	line-height: 1;
}

p,
.text-content,
.column-content p,
.card-text {
	font-weight: var(--fw-regular);
}

strong, .strong {
    font-weight: var(--fw-semibold);
}

.section-header .text-content { opacity: 0.75; }
#services .column-box p { opacity: 0.75; }
section.data-posts.projects .card-text { opacity: 0.78; }
section.data-posts.projects .card-tags { opacity: 0.6; }
section.data-posts.projects .card-role { opacity: 0.55; }
/* sur un aplat de survol, le tiret reprend la couleur du texte */
#services .column-box:hover .column-content ul li::before {
	background: currentColor;
}

/* aplat de survol des colonnes : même règle que les fiches projets */
#services .column-box:hover { --slash: var(--color-dark); }
#services .column-box:nth-child(3):hover { --slash: var(--color-main); }

#services .section-header h2 { color: var(--nappe-1); }
#projets .section-header h2 { color: var(--nappe-5); }
/* Le bloc content_text n'a pas de .section-header : son h2 tombait à 70 px
   quand les autres titres de section font 96 px. */
section.content-text h2 {
	font-size: var(--fs-title-xxl);
	line-height: 0.94;
	max-width: 16ch;
}

#atelier h2 { color: var(--accent-cool); }

.bg-light,
.bg-gray {
	color: var(--color-dark);
}
.bg-secondary {
	color: var(--color-main);
}

/* === COLOR NAPPE (bg-primary) ===

   Première version : cinq `@property` de type <color> interpolées dans quatre
   radial-gradient. Le rendu était juste, le coût non — une propriété
   personnalisée enregistrée n'est pas accélérée par le compositeur, et un
   dégradé ne peut pas être composité comme le sont `transform` et `opacity` :
   chaque image demandait un recalcul de style et une re-rastérisation de toute
   la section. Deux sections plein écran, 26 s en boucle, sans fin.
   GTmetrix rendait « Lighthouse Error: No CPU idle period » — Lighthouse
   attend une accalmie du fil principal qui n'arrivait jamais.

   Deuxième version : les quatre palettes ne sont plus calculées, elles sont
   écrites. Cinq calques peints une seule fois, dont seule l'`opacity` varie.
   L'opacité est gérée par le compositeur : plus un seul repeint.

   Chaque calque est opaque — il porte sa couleur de fond pleine — donc celui
   qui monte à 1 masque entièrement ceux du dessous. Chaque transition est un
   fondu propre entre deux images, jamais un mélange à trois.

   Le socle est le `::before`, statique. Les quatre autres calques sont posés
   par atelierf28.js. Sans JS, ou en `prefers-reduced-motion`, la nappe reste
   affichée — simplement figée sur la première palette. */

@keyframes f28-nappe-2 { 0% { opacity: 0 } 25%, 100% { opacity: 1 } }
@keyframes f28-nappe-3 { 0%, 25% { opacity: 0 } 50%, 100% { opacity: 1 } }
@keyframes f28-nappe-4 { 0%, 50% { opacity: 0 } 75%, 100% { opacity: 1 } }
@keyframes f28-nappe-5 { 0%, 75% { opacity: 0 } 100% { opacity: 1 } }

/* Les calques, posés par atelierf28.js dans les sections nappées *et* dans le
   panneau de menu. Au niveau supérieur, donc valables partout — leur mise en
   marche, elle, dépend du contexte : `.nappe-visible` pour les sections,
   `body.menu-open` pour le panneau. À l'arrêt, rien ne tourne. */
.nappe-layer {
	position: absolute;
	inset: -10%;
	z-index: -2;
	pointer-events: none;
	opacity: 0;
	animation-duration: 26s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: paused;
}

.nappe-layer.l2 {
	animation-name: f28-nappe-2;
	background:
		radial-gradient(115% 85% at 10% 15%, var(--nappe-2) 0%, transparent 62%),
		radial-gradient(105% 80% at 90% 8%, var(--nappe-5) 0%, transparent 60%),
		radial-gradient(120% 95% at 74% 90%, var(--nappe-4) 0%, transparent 64%),
		radial-gradient(135% 105% at 22% 95%, var(--nappe-3) 0%, transparent 66%),
		var(--nappe-1);
}
.nappe-layer.l3 {
	animation-name: f28-nappe-3;
	background:
		radial-gradient(115% 85% at 10% 15%, var(--nappe-3) 0%, transparent 62%),
		radial-gradient(105% 80% at 90% 8%, var(--nappe-4) 0%, transparent 60%),
		radial-gradient(120% 95% at 74% 90%, var(--nappe-2) 0%, transparent 64%),
		radial-gradient(135% 105% at 22% 95%, var(--nappe-5) 0%, transparent 66%),
		var(--nappe-1);
}
.nappe-layer.l4 {
	animation-name: f28-nappe-4;
	background:
		radial-gradient(115% 85% at 10% 15%, var(--nappe-4) 0%, transparent 62%),
		radial-gradient(105% 80% at 90% 8%, var(--nappe-3) 0%, transparent 60%),
		radial-gradient(120% 95% at 74% 90%, var(--nappe-5) 0%, transparent 64%),
		radial-gradient(135% 105% at 22% 95%, var(--nappe-1) 0%, transparent 66%),
		var(--nappe-2);
}
/* retour à la palette du socle, pour que la boucle ne saute pas */
.nappe-layer.l5 {
	animation-name: f28-nappe-5;
	background:
		radial-gradient(115% 85% at 10% 15%, var(--nappe-1) 0%, transparent 62%),
		radial-gradient(105% 80% at 90% 8%, var(--nappe-2) 0%, transparent 60%),
		radial-gradient(120% 95% at 74% 90%, var(--nappe-3) 0%, transparent 64%),
		radial-gradient(135% 105% at 22% 95%, var(--nappe-4) 0%, transparent 66%),
		var(--nappe-5);
}

section.nappe-visible .nappe-layer { animation-play-state: running; }

section.bg-primary,
section.hero.header-title:not([class*="bg-"]) {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--color-dark);
	color: var(--color-light);

	/* socle — palette 1, jamais animé */
	&::before {
		content: '';
		position: absolute;
		inset: -10%;
		z-index: -2;
		background:
			radial-gradient(115% 85% at 10% 15%, var(--nappe-1) 0%, transparent 62%),
			radial-gradient(105% 80% at 90% 8%, var(--nappe-2) 0%, transparent 60%),
			radial-gradient(120% 95% at 74% 90%, var(--nappe-3) 0%, transparent 64%),
			radial-gradient(135% 105% at 22% 95%, var(--nappe-4) 0%, transparent 66%),
			var(--nappe-5);
	}

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

/* === Global content === */
.padded {
	padding-left: var(--f28-gut);
	padding-right: var(--f28-gut);
}
/* === Content : tout calé à gauche === */
.inner,
.inner-md {
	margin-left: 0;
	margin-right: auto;
	max-width: min(1800px, 100% - var(--f28-rail-zone));
}

@media (min-width: 1024px) {
	:root {
		--f28-rail-zone: clamp(150px, 12vw, 240px);
		--f28-indent: clamp(24px, 3vw, 56px);
	}

	/* décalage contenu saut titre */
	section.padded .bloc-wrap,
	section.padded .post-container,
	section.content-text .text-content,
	section.ui-form .form-box {
		margin-left: var(--f28-indent);
	}
}


/* === HEADER === */
.header {
	background-color: transparent;
	box-shadow: none;
   padding: var(--padding-sm);

	&.smallscroll {
		background-color: transparent;
		box-shadow: none;
	   padding: var(--padding-sm);

	}
}

/* Le trait sous les entrées de menu est sorti du parent le 18.08.2026 : il n'y
   a plus rien à masquer ici. f28 ne le redessine pas — sur le rail latéral,
   l'entrée courante se signale par sa graisse et sa couleur. */


/* === LOGO === */
.header .logo :is(.header-logo.lbig, .header-logo.lsmall),
body.menu-open .header .logo :is(.header-logo.lbig, .header-logo.lsmall) {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: visible;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s var(--ease-wipe);
}

.header .logo .header-logo.lbig,
.header.smallscroll .logo .header-logo.lsmall {
	opacity: 1;
	pointer-events: auto;
}

.header.smallscroll .logo .header-logo.lbig {
	opacity: 0;
	pointer-events: none;
}
.header .logo {
	position: relative;
	display: inline-flex;
	width: var(--logo-box);
	height: var(--logo-box);
	border-radius: var(--br-round);
	background-color: transparent;
	transition: width 0.35s var(--ease-wipe), height 0.35s var(--ease-wipe),
		background-color 0.35s var(--ease-wipe);
}

.header.smallscroll .logo {
	width: var(--logo-pastille);
	height: var(--logo-pastille);
	background-color: color-mix(in srgb, var(--color-dark) 90%, transparent);
}

.header .header-logo.lbig img { width: var(--width-logo-header); height: auto; }
.header .header-logo.lsmall img { width: var(--width-logo-header-small); height: auto; }

/* === TOGGLE === */
.menu-toggle {
	background-color: transparent;

	&.active,
	&:hover {
		background-color: transparent;
	}

	.smallscroll & {
		background-color: color-mix(in srgb, var(--color-dark) 90%, transparent);
	}

	.menu_open span {
		height: 2px;
		border-radius: 0;
		background: var(--color-main);
		transition: width 0.45s var(--ease-wipe), transform 0.4s var(--ease-wipe),
			opacity 0.25s ease;

		&:nth-child(1) { width: 100%; }
		&:nth-child(2) { width: 62%; margin-left: 0; transition-delay: 0.06s; }
		&:nth-child(3) { width: 84%; transition-delay: 0.12s; }
	}

	&:hover .menu_open span { width: 100%; }

	/* ouvert : la croix, sans délai */
	&.active .menu_open span {
		width: 100%;
		transition-delay: 0s;
	}
}

/* === MAIN MENU === */
div.menu-wrap {
	background-color: var(--color-dark);
	isolation: isolate;
	overflow: hidden;

	/* même nappe que les sections, même mécanique de calques.
	   Ici les calques ne tournent que pendant que le panneau est ouvert :
	   un menu fermé n'a aucune raison de faire tourner quoi que ce soit. */
	&::before {
		content: '';
		position: absolute;
		inset: -10%;
		z-index: -2;
		background:
			radial-gradient(115% 85% at 10% 15%, var(--nappe-1) 0%, transparent 62%),
			radial-gradient(105% 80% at 90% 8%, var(--nappe-2) 0%, transparent 60%),
			radial-gradient(120% 95% at 74% 90%, var(--nappe-3) 0%, transparent 64%),
			radial-gradient(135% 105% at 22% 95%, var(--nappe-4) 0%, transparent 66%),
			var(--nappe-5);
	}
}

body.menu-open div.menu-wrap .nappe-layer { animation-play-state: running; }
nav.main-menu ul li {
	margin-bottom: var(--margin-sm);
}
nav.main-menu ul li a {
	font-size: clamp(1.75rem, 4.5vw, 3.25rem);
	font-family: var(--typo-title);
	font-weight: var(--fw-title-bold);
	letter-spacing: var(--track-title);
	line-height: 1.15;
	color: var(--color-main);
	opacity: 0.72;
	transition: opacity 0.3s var(--ease-wipe), transform 0.45s var(--ease-wipe);

	&:hover {
		opacity: 1;
		transform: translateX(0.15em);
	}
}

/* === NAVIGATION LATÉRALE (desktop) ===

   Depuis le 18.08.2026 le parent délie le panneau tout seul au-delà du seuil
   (`f28_menu_breakpoint`, déclaré à 1024 dans functions.php) : plus besoin de
   défaire `inset`, `width`, `height`, `padding`, `visibility` ni `transition`.
   Il reste ce qui fait le rail — le sortir du flux, le coller à droite, le
   centrer verticalement — et le passage en colonne, le parent livrant une
   rangée par défaut.

   ⚠️ `background-color` et `overflow` doivent quand même être remis ici : ils
   ne défont pas le parent mais **notre propre règle de base** `div.menu-wrap`
   (fond encre + nappe + `overflow: hidden`), qui est la peau du panneau burger.
   Elle pèse (0,1,1), autant que celle du parent, et charge après — donc elle
   gagne aussi en desktop. Le rail sortait noir, et l'`overflow: hidden`
   rognait les filets qui débordent à droite. Le parent ne peut pas arbitrer
   entre nos règles : nous seuls savons lesquelles sont réservées au mobile. */

@media (min-width: 1024px) {

	div.menu-wrap {
		position: fixed;
		inset: auto var(--f28-rail) auto auto;
		top: 50%;
		transform: translateY(-50%);
		z-index: 12;

		/* peau du panneau burger, annulée : voir l'avertissement ci-dessus */
		background-color: transparent;
		overflow: visible;

		&::before { display: none; }
	}

	nav.main-menu ul.menu {
		flex-flow: column nowrap;
		align-items: flex-end;
	}

	nav.main-menu {
		text-align: right;

		/* le parent remet la marge à 0 pour une rangée ; le rail est vertical
		   et a besoin d'un interligne entre les entrées */
		ul.menu > li {
			margin-bottom: var(--margin-xs);
		}

		ul li a {
			position: relative;
			justify-content: flex-end;
			font-size: var(--fs-sm);
			font-weight: var(--fw-regular);
			letter-spacing: 0;
			opacity: 0.55;
			transition: opacity 0.3s var(--ease-wipe), font-weight 0.3s var(--ease-wipe),
				transform 0.4s var(--ease-wipe);

			/* le filet qui rejoint le bord de l'écran, plus discret que le mot */
			&::after {
				content: '';
				position: absolute;
				top: 50%;
				right: calc(-1 * var(--f28-rail));
				width: var(--f28-rail);
				height: 1px;
				background: currentColor;
				opacity: 0.35;
				transform-origin: right center;
				transition: opacity 0.3s var(--ease-wipe), transform 0.4s var(--ease-wipe);
			}

			/* au survol : le décalage suffit, pas de soulignement */
			&:hover {
				opacity: 1;
				transform: translateX(-0.35em);
			}
		}

		ul li a.is-current {
			font-weight: 600;
			opacity: 1;

			&::after { opacity: 1; }
		}
	}

	.menu-wrap .menu-social { display: none; }
}


/* === HERO === */
section.hero .swiper-pagination { display: none; }

/* Parallax */
.home main > section.hero.height_full {
	position: sticky;
	top: 0;
	z-index: 0;
}
.home main > section.hero.height_full ~ section {
	position: relative;
	z-index: 1;
}

section.hero {
	&.height_full {
		min-height: 100svh;
		height: auto;
		scroll-snap-align: none;   /* pas de snap : pénible au clavier et sur mobile */
	}
	align-items: flex-end;

	.tagline {
		text-align: left;
		padding-bottom: clamp(3.5rem, 8vh, 6rem);
		padding-top: clamp(6rem, 11vh, 8rem);

		span.h1-title {
			font-size: clamp(3rem, 10vw, 9rem);
			line-height: 0.88;
			letter-spacing: var(--track-title);
			max-width: 14ch;
		}
	}

	.hero-text {
		margin-top: var(--margin-lg);

		h2 {
			font-size: clamp(1.15rem, 2.4vw, 2rem);
			font-weight: var(--fw-medium);
			line-height: 1.2;
			letter-spacing: -0.02em;
			max-width: 34ch;
			margin-bottom: var(--margin-md);
		}

		p {
			max-width: 46ch;
		}

	}
}

.wiggle {
	display: none;
}

/* === BOUTONS === */
a.button-link,
.bg-dark a.button-link,
.bg-secondary a.button-link,
.bg-primary a.button-link,
.hero-text p:last-child a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45em;
	padding: 0;
	font-family: var(--typo-title);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-main);
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	text-decoration: none;
	overflow: visible;
	transition: color 0.3s var(--ease-wipe);
}
a.button-link::before,
.hero-text p:last-child a::before {
	content: '//';
	color: var(--slash, var(--nappe-1));
	transition: transform 0.35s var(--ease-wipe), color 0.34s ease 0.16s;
}

/* la flèche du parent */
a.button-link::after,
button.button-link::after {
	content: none;
}

a.button-link:hover,
.bg-dark a.button-link:hover,
.bg-secondary a.button-link:hover {
	background: transparent;
	color: var(--nappe-1);
}
a.button-link:hover::before {
	transform: translateX(0.2em);
}
.bg-primary,
section.hero.header-title:not([class*="bg-"]) {
	--slash: var(--color-dark);
}

.bg-primary a.button-link,
.bg-primary .hero-text p:last-child a,
section.hero.header-title:not([class*="bg-"]) .hero-text p:last-child a {
	color: var(--color-dark);
}

.bg-primary a.button-link:hover {
	color: color-mix(in srgb, var(--color-dark) 65%, transparent);
}

/* === Header section === */
.section-header {
	h2 {
		font-size: var(--fs-title-xxl);
		line-height: 0.94;
		max-width: 16ch;
	}

	.surtitle {
		font-family: var(--typo-title);
		font-size: var(--fs-sm);
		font-weight: var(--fw-medium);
		color: inherit;
		opacity: 0.5;
		text-transform: none;
		letter-spacing: 0;
		margin-bottom: var(--margin-sm);
	}

	.text-content {
		max-width: 44ch;
		margin-top: var(--margin-md);
		opacity: 0.6;
	}
}


/* === Columns layout === */
.layout-columns .column-box.reveal {
	opacity: 1;
	transform: none;
	animation: none;
}
section.layout-columns {

	.bloc-wrap {
		display: grid;
		grid-template-columns: 1fr;
		gap: clamp(1.5rem, 3vw, 3rem);
		background: none;
	}

	@media (min-width: 680px) {
		.bloc-wrap { grid-template-columns: repeat(min(2, var(--col-max, 3)), minmax(0, 1fr)); }
	}

	@media (min-width: 992px) {
		.bloc-wrap { grid-template-columns: repeat(var(--col-max, 3), minmax(0, 1fr)); }
	}

	.bloc-wrap .column-box {
		flex: initial;
		width: auto;
		max-width: none;
	}

	.column-box {
		position: relative;
		isolation: isolate;
		overflow: hidden;   /* coupe le débord du voile, voir ::before */
		background: var(--color-dark);
		transition: color 0.4s ease 0.22s;

		&::before {
			content: '';
			position: absolute;
			inset: 0 -12% 0 0;
			z-index: -1;
			background: linear-gradient(to right,
				var(--fill-a, var(--nappe-1)), var(--fill-b, var(--nappe-4)) 90%, transparent);
			background: linear-gradient(to right in oklab,
				var(--fill-a, var(--nappe-1)), var(--fill-b, var(--nappe-4)) 90%, transparent);
			transform: scaleX(0);
			transform-origin: left center;
			transition: transform 0.8s var(--ease-soft);
		}
	}

	.column-wrap { height: 100%; }

	.column-content {
		h3 {
			font-size: var(--fs-title-lg);
			margin-bottom: var(--margin-sm);
		}

		p { margin-bottom: var(--margin-sm); }

		ul {
			list-style: none;
			padding: 0;
			margin-top: var(--margin-md);
			font-size: 0.98rem;
			line-height: 1.5;
			opacity: 0.6;

			li {
				position: relative;
				padding-left: 1.5rem;
				margin-bottom: 0.55em;

				&:last-child { margin-bottom: 0; }

				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 1.05em;
					width: 0.75rem;
					height: 3px;
					margin-left: 0;
					background: var(--nappe-1);
					border-radius: 0;
					transition: background 0.34s ease 0.16s;
				}
			}
		}
	}
}

/* === Services === */
#services {

	.bloc-wrap {
		margin-left: max(0px, calc(var(--f28-indent) - var(--f28-card-pad)));
	}

	.column-box {
		padding: clamp(1.8rem, 3vw, 2.8rem) var(--f28-card-pad);

		&:hover {
			&::before { transform: scaleX(1); }

			p, ul { opacity: 0.85; }
		}

		p, ul { transition: opacity 0.4s ease 0.22s; }

		/* nappe hover */
		&:nth-child(1) { --fill-a: var(--nappe-1); --fill-b: var(--nappe-4); }
		&:nth-child(2) { --fill-a: var(--nappe-5); --fill-b: var(--nappe-2); }
		&:nth-child(3) { --fill-a: var(--nappe-3); --fill-b: var(--nappe-6); }
	}

	.column-box:hover :is(h2, h3, h4, p, ul, li, strong, em) {
		color: var(--color-dark);
	}

	/* violet*/
	.column-box:nth-child(3):hover :is(h2, h3, h4, p, ul, li, strong, em) {
		color: var(--color-main);
	}
}


/* === Atelier === */
#atelier {

	.text-content {
		max-width: 60ch;
		font-size: clamp(1.15rem, 1.6vw, 1.4rem);
		line-height: 1.6;
	}

}


/* === Projets === */
section.data-posts.projects {
	.post-container {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.cpt-card {
		position: relative;
		isolation: isolate;
		overflow: hidden;   /* coupe le débord du voile, voir ::before */
		transition: color 0.4s ease 0.22s;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
		column-gap: clamp(1.5rem, 4vw, 4rem);
		align-items: start;
		padding: clamp(2rem, 4vw, 3.2rem) var(--f28-card-pad);
		margin-inline: calc(-1 * var(--f28-card-pad));
		color: inherit;
		text-decoration: none;

		&::before {
			content: '';
			position: absolute;
			inset: 0 -12% 0 0;
			z-index: -1;
			background: linear-gradient(to right,
				var(--fill-a, var(--nappe-5)), var(--fill-b, var(--nappe-2)) 90%, transparent);
			background: linear-gradient(to right in oklab,
				var(--fill-a, var(--nappe-5)), var(--fill-b, var(--nappe-2)) 90%, transparent);
			transform: scaleX(0);
			transform-origin: left center;
			transition: transform 0.85s var(--ease-soft);
		}

		/* les trois fiches descendent la nappe d'un bout à l'autre : ambre en
		   haut, magenta en bas, chaque fiche reprenant la teinte où la
		   précédente s'arrête */
		&:nth-child(1) { --fill-a: var(--nappe-5); --fill-b: var(--nappe-2); }
		&:nth-child(2) { --fill-a: var(--nappe-2); --fill-b: var(--nappe-1); }
		&:nth-child(3) { --fill-a: var(--nappe-1); --fill-b: var(--nappe-4); }

		&:hover {
			color: var(--color-dark);

			&::before { transform: scaleX(1); }

			.card-role,
			.card-text,
			.card-tags { opacity: 0.78; }
		}
	}


	.card-title {
		font-size: clamp(2rem, 5vw, 4rem);
		line-height: 0.95;
		margin: 0;
	}

	.card-role,
	.card-text,
	.card-tags {
		transition: opacity 0.4s ease 0.22s;
	}

	.card-role {
		display: block;
		font-size: var(--fs-xs);
		font-weight: var(--fw-regular);
		opacity: 0.45;
		margin-top: var(--margin-xs);
	}

	.card-text {
		max-width: 52ch;
		opacity: 0.62;
		margin-bottom: var(--margin-sm);
	}

	.card-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4em 2em;
		list-style: none;
		padding: 0;
		margin-bottom: var(--margin-sm);
		font-family: var(--typo-main);
		font-size: 0.82rem;
		font-weight: var(--fw-regular);
		text-transform: lowercase;
		letter-spacing: 0.02em;
		opacity: 0.45;

		li::before { content: none; }
	}

	.button-container { margin-top: var(--margin-md); }

	.cpt-card:hover :is(h2, h3, h4, p, span, strong, em) {
		color: var(--color-dark);
	}

	/* la fiche s'inonde d'ambre, de corail ou de rose : le marqueur et le
	   libellé passent en encre, seul ton lisible sur les trois */
	.cpt-card:hover {
		--slash: var(--color-dark);

		a.button-link { color: var(--color-dark); }
	}

	@media (max-width: 900px) {
		.cpt-card {
			grid-template-columns: 1fr;
			row-gap: var(--margin-sm);
		}
	}
}

/* === Contact === */
section.ui-form {

	.form-box { max-width: 560px; }
}


/* === Gravity === */
body .bg-primary .gform_wrapper {
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	textarea,
	select {
		font-family: var(--typo-main);
		font-size: clamp(1.15rem, 1.9vw, 1.6rem);
		font-weight: var(--fw-medium);
		color: var(--color-main);
		background: transparent;
		border: none;
		border-bottom: 2px solid color-mix(in srgb, var(--color-main) 55%, transparent);
		border-radius: 0;
		padding: 0.9em 0 0.5em;

		&::placeholder { color: color-mix(in srgb, var(--color-main) 60%, transparent); }

		&:focus {
			outline: none;
			border-bottom-color: var(--color-main);
		}

		/* Keyboard focus: the bottom rule only, in white. An outline would draw a
		   box on four sides around a field that has a single edge. The inset
		   shadow thickens the rule without shifting the layout by a pixel. */
		&:focus-visible {
			outline: none;
			border-bottom-color: #fff;
			box-shadow: inset 0 -3px 0 0 #fff;
		}
	}

	.gfield_label,
	legend {
		font-family: var(--typo-title);
		font-size: var(--fs-sm);
		font-weight: var(--fw-semibold);
		color: var(--color-main);
		letter-spacing: 0;
	}

	.gfield { margin-bottom: clamp(1.5rem, 3vh, 2.5rem); }

	.gform_button[type="submit"],
	input[type="submit"].gform_button {
		font-family: var(--typo-title);
		font-size: clamp(1rem, 1.4vw, 1.2rem);
		font-weight: var(--fw-title-bold);
		color: var(--color-main);
		background: var(--color-dark);
		border: none;
		border-radius: 0;
		padding: 1.1em 3em;
		cursor: pointer;
		transition: background 0.35s var(--ease-wipe), color 0.35s var(--ease-wipe);

		&:hover {
			background: var(--color-main);
			color: var(--color-dark);
		}
	}
}


/* === Footer === */
footer {
	position: relative;
	overflow: hidden;
	background: var(--color-dark);
	color: var(--color-main);
	border-top: none;

	.wrap {
		max-width: none;
		margin-left: 0;
		margin-right: auto;
	}

	.footer-content.columns .wrap {
		gap: clamp(2rem, 5vw, 5rem);
	}

	.footer-item .text-content {
		font-size: var(--fs-sm);
		line-height: 1.7;
		opacity: 0.55;
	}

	.footer-content.bottom {
		margin-top: clamp(2rem, 5vh, 3.5rem);
		font-size: var(--fs-sm);
		opacity: 0.55;
	}

	.footer-item h4 {
		font-family: var(--typo-title);
		font-size: var(--fs-sm);
		font-weight: var(--fw-medium);
		color: var(--color-main);
		opacity: 0.45;
		letter-spacing: 0;
		margin-bottom: var(--margin-sm);
	}

	a {
		color: inherit;
		text-decoration: none;
		opacity: 1;
		transition: color 0.3s var(--ease-wipe);

		&:hover { color: var(--nappe-1); }
	}

	&::after {
		content: 'atelier f28';
		position: absolute;
		left: var(--f28-gut);
		bottom: -0.28em;
		z-index: 0;
		font-family: var(--typo-title);
		font-size: clamp(5rem, 17vw, 16rem);
		font-weight: var(--fw-title-bold);
		letter-spacing: -0.05em;
		line-height: 1;
		color: var(--color-main);
		opacity: 0.05;
		pointer-events: none;
		user-select: none;
	}

	.inner { position: relative; z-index: 1; }
}

@media (min-width: 900px) {
	main {
		position: relative;
		z-index: 1;
		background: var(--color-dark);
		margin-bottom: var(--footer-h);
	}

	footer {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 0;
		min-height: var(--footer-h);
		display: flex;
		align-items: flex-end;
	}
}

/* === Cookies === */
body .cookie-banner,
body .cookie-toggle {
	--cookie-surface: var(--color-dark);
	--cookie-ink: var(--color-main);
	--cookie-accent: var(--nappe-3);
	--cookie-muted: color-mix(in srgb, var(--color-main) 62%, transparent);
	--cookie-line: color-mix(in srgb, var(--color-main) 20%, transparent);
	--cookie-veil: transparent;
}

body .cookie-banner {
	width: min(58rem, calc(100% - (var(--padding-md) * 2)));
	max-width: none;
	border-radius: var(--br-lg);
	border: 1px solid var(--cookie-line);
	box-shadow: none;
	color: var(--cookie-ink);

	/* disposition en bandeau : texte à gauche, actions à droite */
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--padding-md);

	.cookie-banner__head { grid-column: 1; }
	.cookie-banner__text { grid-column: 1; margin-bottom: 0; }
	.cookie-banner__actions { grid-column: 2; flex-wrap: nowrap; }

	.cookie-banner__title {
		font-family: var(--typo-title);
		letter-spacing: var(--track-title);
	}

	.cookie-btn {
		font-family: var(--typo-title);
		font-weight: var(--fw-title-bold);
		white-space: nowrap;
	}

	.cookie-btn--solid {
		background-color: var(--nappe-3);
		color: var(--color-main);

		&:hover { background-color: var(--nappe-1); }
	}

	.cookie-btn--ghost {
		color: var(--cookie-muted);

		&:hover { color: var(--cookie-ink); }
	}

	@media (max-width: 860px) {
		grid-template-columns: 1fr;
		row-gap: var(--padding-sm);

		.cookie-banner__actions { grid-column: 1; }
	}
}

body .cookie-toggle {
	border-radius: 999px;
	border: 1px solid var(--cookie-line);
	background-color: var(--cookie-surface);
	color: var(--cookie-ink);
	box-shadow: none;

	.cookie-toggle__icon { background-color: var(--cookie-ink); }

	.cookie-toggle__label {
		font-family: var(--typo-title);
		font-weight: var(--fw-medium);
	}

	&:hover {
		background-color: var(--nappe-3);
		border-color: var(--nappe-3);
		color: var(--color-main);

		.cookie-toggle__icon { background-color: var(--color-main); }
	}
}

/* cookies menu open */
body.menu-open {
	.cookie-banner,
	.cookie-toggle {
		opacity: 0;
		pointer-events: none;
	}
}