/* =========================================================================
   Adnota — feuille de style principale
   Toutes les valeurs (tailles, espacements, positions) proviennent de la
   maquette Figma, exprimée sur une largeur de référence de 1920 px.
   Les clamp() reprennent ce ratio : valeur_px / 1920 * 100 = vw.
   ========================================================================= */

/* ------------------------------------------------------------- Jetons */
:root {
	--plum: #330f33;
	--plum-mid: #6a3e6a;
	--plum-veil: rgba(51, 15, 51, 0.9);
	--cream: #ede5e5;
	--white: #fff;

	--radius: 14px;
	--radius-pill: 100px;

	--gutter: clamp(20px, 6.77vw, 130px);
	--tab-h: clamp(60px, 4.53vw, 87px);
	--tab-offset: clamp(0px, 5.68vw, 109px);

	--font-title: 'Karma', 'Iowan Old Style', Georgia, serif;
	--font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--fs-h1: clamp(2.25rem, 3.333vw, 4rem);
	--fs-h2: clamp(1.75rem, 2.5vw, 3rem);
	--fs-h3: clamp(1.75rem, 2.083vw, 2.5rem);
	--fs-h4: clamp(1.5rem, 1.667vw, 2rem);
	--fs-h5: clamp(1.25rem, 1.25vw, 1.5rem);
	--fs-body: clamp(1rem, 0.9375vw, 1.125rem);
	--fs-sm: 1rem;

	--shadow-card: 0 4px 4px rgba(0, 0, 0, 0.25);
	--shadow-soft: 0 4px 2px rgba(51, 15, 51, 0.2);
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: 110px;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--cream);
	color: var(--plum);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.5;
	overflow-x: hidden;
}

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

/* Indispensable : les attributs width/height du HTML, présents sur toutes les
   images pour réserver leur place, s'appliquent comme indications de
   présentation. Sans height:auto, cette hauteur devient définie et écrase
   aussi bien aspect-ratio qu'une largeur en pourcentage — l'image se déforme.
   Les rares images à hauteur imposée (.polaroid__img, .features__icon) la
   redéfinissent explicitement. */
img {
	height: auto;
}

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

button {
	font: inherit;
	color: inherit;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote {
	margin: 0;
}

ul, ol {
	list-style: none;
	padding: 0;
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--plum);
	color: var(--cream);
	padding: 12px 20px;
	border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
	left: 0;
}

/* ------------------------------------------------------- Typographie */
.h1,
.h2,
.h3,
.h4,
.h5 {
	font-family: var(--font-title);
	line-height: 1.2;
	font-weight: 400;
}

.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.3; }
.h5 { font-size: var(--fs-h5); font-weight: 700; line-height: 1.4; }

.rich-text > * + * {
	margin-top: 1em;
}

.rich-text h2 {
	font-family: var(--font-title);
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: 1.3;
	margin-top: 2em;
}

.rich-text h3 {
	font-family: var(--font-title);
	font-size: var(--fs-h5);
	font-weight: 700;
	line-height: 1.4;
	margin-top: 1.75em;
}

.rich-text a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.rich-text a:hover {
	color: var(--plum-mid);
}

.rich-text ul,
.rich-text ol {
	padding-left: 1.25em;
	list-style: disc;
}

.rich-text ol {
	list-style: decimal;
}

.rich-text li + li {
	margin-top: 0.35em;
}

.rich-text mark {
	padding: 1px 4px;
	border-radius: 3px;
}

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

.container--narrow {
	max-width: calc(900px + 2 * var(--gutter));
}

/* ------------------------------------------------------------ Boutons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 10px 20px 6px;
	border: 0;
	border-radius: var(--radius);
	font-family: var(--font-title);
	font-weight: 600;
	font-size: var(--fs-sm);
	line-height: 1.4;
	/* justify-content centre le bloc de texte ; text-align centre chacune de
	   ses lignes. Sans lui, un libellé qui passe sur deux lignes s'aligne à
	   gauche à l'intérieur du bouton. */
	text-align: center;
	cursor: pointer;
	transition: transform 0.2s ease, filter 0.2s ease;
}

.btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.15);
}

.btn--dark {
	background: var(--plum);
	color: var(--cream);
	box-shadow: 0 2px 1px rgba(0, 0, 0, 0.25);
}

/* -------------------------------------------------------------- Badges */
.badge-round {
	width: clamp(110px, 8.54vw, 164px);
	aspect-ratio: 1;
	border-radius: 50%;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 10px;
	font-family: var(--font-title);
	font-weight: 700;
	font-size: clamp(0.875rem, 0.9375vw, 1.125rem);
	line-height: 1.4;
}

.badge-round--light {
	background: var(--white);
	color: var(--plum);
}

.badge-round--dark {
	background: var(--plum);
	color: var(--white);
}

/* Pastille cliquable : le pseudo-élément étend la zone active à tout le
   disque, sans sortir le texte de son centrage. */
.badge-round__link {
	color: inherit;
	transition: transform 0.25s ease;
}

.badge-round__link::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.badge-round:has(.badge-round__link) {
	position: relative;
	transition: transform 0.25s ease;
}



.badge-pill {
	display: inline-block;
	background: var(--plum-mid);
	color: var(--cream);
	border-radius: var(--radius);
	padding: 10px 20px;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: var(--fs-sm);
	line-height: 1.4;
	white-space: nowrap;
}

/* -------------------------------------------------------- Photo penchée */
.polaroid {
	position: relative;
	aspect-ratio: 473.933 / 614.834;
	--tilt: -5deg;
	--frame-w: 89.67%;
	--frame-h: 94.34%;
}

.polaroid--tilt-right {
	--tilt: 5deg;
}

.polaroid__frame {
	position: absolute;
	inset: 0;
	margin: auto;
	width: var(--frame-w);
	height: var(--frame-h);
	border: 10px solid var(--white);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	transform: rotate(var(--tilt));
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.polaroid__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------- Onglet de section */
.section-tab {
	position: absolute;
	top: calc(-1 * var(--tab-h));
	left: calc(var(--gutter) + var(--tab-offset));
	height: var(--tab-h);
	display: inline-flex;
	align-items: center;
	gap: clamp(10px, 1.04vw, 20px);
	padding-inline: clamp(16px, 1.56vw, 30px);
	border-radius: var(--radius) var(--radius) 0 0;
	background: var(--tab-bg, var(--white));
	color: var(--tab-color, var(--plum));
	font-family: var(--font-title);
	font-weight: 700;
	font-size: var(--fs-body);
	line-height: 1.4;
	white-space: nowrap;
	z-index: 2;
	/* Pas d'ombre : l'onglet et la section forment une seule et même surface.
	   Une ombre portée vers le bas retomberait sur cette surface et dessinerait
	   une bavure sombre le long de la jonction. */
}

.section-tab__icon {
	width: clamp(32px, 2.29vw, 44px);
	aspect-ratio: 1;
	border: 1px solid currentColor;
	border-radius: 50%;
	display: grid;
	place-items: center;
	flex: none;
	transition: transform 0.25s ease;
}

.section-tab__arrow {
	transform: rotate(90deg);
	width: clamp(12px, 0.9vw, 17px);
	height: auto;
}

.section-tab:hover .section-tab__icon {
	transform: translateY(3px);
}

/* ------------------------------------------------------------ En-tête */
/* Fixe en grand écran : il reste accessible pendant tout le défilement.
   En mobile il redevient absolu (voir la requête média).
   Sans fond ni ombre, à aucun moment : seul le logo change au défilement. */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 20;
}

.site-header__inner {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding-inline: clamp(16px, 2.03vw, 39px);
}

/* Le conteneur porte la taille, les deux images se superposent en absolu :
   le fondu se fait sans à-coup et rien ne bouge autour. */
.site-header__logo {
	position: relative;
	flex: none;
	margin-top: clamp(16px, 1.67vw, 32px);
	width: clamp(180px, 16.4vw, 315px);
	height: clamp(24px, 2.19vw, 42px);
	transition: width 0.3s ease;
}

.site-header__logo img {
	position: absolute;
	left: 0;
	top: 0;
	width: auto;
	height: 100%;
	transition: opacity 0.25s ease;
}

.site-header__logo-mark {
	opacity: 0;
}

/* Au défilement, le logo complet cède la place au monogramme. */
.site-header.is-scrolled .site-header__logo {
	width: clamp(24px, 2.19vw, 42px);
}

.site-header.is-scrolled .site-header__logo-full {
	opacity: 0;
}

.site-header.is-scrolled .site-header__logo-mark {
	opacity: 1;
}

/* Centrée sur la page, et non dans l'espace libre entre logo et bouton :
   c'est ce que fait la maquette. */
.site-nav {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
}

/* Chaque lien est un onglet autonome — fond, coins arrondis et ombre propres.
   Ils se recouvrent de 8 px : dans la maquette ils font 196 de large pour un
   pas de 188. La hauteur de la liste est figée pour que l'onglet survolé
   déborde vers le bas sans repousser l'en-tête. */
.site-nav__list {
	display: flex;
	align-items: flex-start;
	height: var(--tab-h);
}

.site-nav__item + .site-nav__item {
	margin-left: clamp(-8px, -0.42vw, -4px);
}

.site-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: clamp(120px, 10.21vw, 196px);
	height: var(--tab-h);
	padding-inline: 12px;
	background: var(--white);
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: var(--shadow-soft);
	font-family: var(--font-title);
	font-weight: 600;
	font-size: clamp(0.8125rem, 0.833vw, 1rem);
	line-height: 1.4;
	/* Teinte alpha plutôt qu'opacity : le fond blanc doit rester opaque. */
	color: rgba(51, 15, 51, 0.5);
	transition: height 0.25s ease, color 0.2s ease;
}

/* Au survol : l'onglet s'allonge vers le bas, passe au premier plan et son
   libellé retrouve sa pleine intensité. Le texte reste centré, il descend
   donc de la moitié de l'allongement. */
.site-nav__link:hover,
.site-nav__link:focus-visible {
	height: calc(var(--tab-h) + clamp(20px, 1.67vw, 32px));
	color: var(--plum);
	z-index: 2;
}

.site-header__cta {
	flex: none;
	margin-top: clamp(16px, 1.72vw, 33px);
}

/* Menu mobile */
.site-header__burger {
	display: none;
	flex: none;
	margin-top: 16px;
	width: 48px;
	height: 48px;
	padding: 12px;
	background: var(--white);
	border: 0;
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	cursor: pointer;
}

.site-header__burger span {
	display: block;
	height: 2px;
	background: var(--plum-mid);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.site-header__burger span + span {
	margin-top: 5px;
}

.site-header__burger[aria-expanded='true'] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.site-header__burger[aria-expanded='true'] span:nth-child(2) {
	opacity: 0;
}

.site-header__burger[aria-expanded='true'] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.site-nav-mobile {
	background: var(--cream);
	box-shadow: var(--shadow-soft);
	padding: 16px clamp(16px, 2.03vw, 39px) 24px;
}

.site-nav-mobile__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.site-nav-mobile__list a:not(.btn) {
	display: block;
	padding: 12px 4px;
	font-family: var(--font-title);
	font-weight: 600;
	border-bottom: 1px solid var(--plum-mid);
}

.site-nav-mobile__list .btn {
	margin-top: 12px;
	align-self: flex-start;
}

/* ------------------------------------------ Apparitions au défilement */
/* Conditionnées à deux choses : le JavaScript est actif (classe .js posée
   dans le <head>) et le visiteur n'a pas demandé à réduire les animations.
   Hors de ces cas, le contenu s'affiche normalement, sans état intermédiaire. */
@media (prefers-reduced-motion: no-preference) {
	.js [data-reveal='up'] {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
		transition-delay: var(--reveal-delay, 0ms);
	}

	.js [data-reveal='up'].is-revealed {
		opacity: 1;
		transform: none;
	}

	/* Le fil se déroule de la gauche vers la droite. */
	.js [data-reveal='line']::before {
		transform: translateX(-50%) scaleX(0);
		transform-origin: left center;
		transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.js [data-reveal='line'].is-revealed::before {
		transform: translateX(-50%) scaleX(1);
	}
}

/* ------------------------------------------------------------ Sections */
.section {
	position: relative;
}

.section__title {
	max-width: calc(717px + 2 * var(--gutter));
	margin-inline: auto;
	text-align: center;
	padding-inline: var(--gutter);
}

.section__title--light { color: var(--cream); }
.section__title--dark { color: var(--plum); }
.section__title--plum { color: var(--plum); }

/* ---------------------------------------------------------------- Héros */
.section--hero {
	background: var(--cream);
	padding-top: clamp(120px, 9.01vw, 173px);
	padding-bottom: clamp(60px, 9.01vw, 173px);
}

/*
 * Le héros occupe au moins une hauteur d'écran, et les photos — son élément
 * le plus haut — sont plafonnées par cette même hauteur. L'onglet
 * « Mes services », posé sur son bord bas, reste donc visible sans défiler,
 * quelle que soit la hauteur de la fenêtre.
 */
@media (min-width: 1025px) {
	.section--hero {
		display: flex;
		align-items: center;
		min-height: 100vh;
		min-height: 100svh;
	}

	.section--hero > .hero {
		width: 100%;
	}

	/* 380 = marge haute 173 + marge basse 173 + un peu de jeu. */
	.hero__photos {
		justify-self: end;
		width: auto;
		height: 685.8px;
		max-height: calc(100svh - 380px);
	}
}

/* Fenêtres basses : la colonne de texte à elle seule dépasserait l'écran.
   On récupère de la place sur les marges, le titre et le paraphe. */
@media (min-width: 1025px) and (max-height: 880px) {
	.section--hero {
		padding-top: 104px;
		padding-bottom: var(--tab-h);
	}

	.hero__title {
		font-size: clamp(2rem, 2.6vw, 3rem);
	}

	.hero__squiggle {
		height: clamp(120px, 26vh, 261px);
		width: auto;
	}

	.hero__photos {
		max-height: calc(100svh - 230px);
	}
}

.hero {
	display: grid;
	grid-template-columns: minmax(0, 746fr) minmax(0, 882fr);
	align-items: center;
	gap: clamp(24px, 2.24vw, 43px);
}

.hero__content {
	padding-left: var(--tab-offset);
}

.hero__title {
	max-width: 573px;
}

.hero__intro {
	display: flex;
	align-items: center;
	gap: clamp(16px, 1.04vw, 20px);
	margin-top: clamp(20px, 1.04vw, 20px);
}

.hero__text {
	max-width: 417px;
}

.hero__squiggle {
	flex: none;
	width: clamp(90px, 10.42vw, 200px);
	height: auto;
}

.hero__photos {
	position: relative;
	aspect-ratio: 881.9 / 685.8;
}

/* Mobile uniquement : en grand écran le bouton vit dans l'en-tête. */
.hero__cta {
	display: none;
}

.hero__photos .polaroid {
	position: absolute;
	width: 53.74%;
	margin: 0;
}

.hero__photos .polaroid--tilt-left {
	left: 0;
	top: 0;
}

.hero__photos .polaroid--tilt-right {
	left: 46.26%;
	top: 10.35%;
}

.hero__photos .badge-round {
	position: absolute;
	left: 52.3%;
	top: 52.5%;
	transform: translate(-50%, -50%);
}

/* Au survol, la photo se redresse. L'ordre de superposition ne bouge pas :
   celle de droite reste au-dessus, comme dans la maquette. */
@media (hover: hover) and (pointer: fine) {
	.hero__photos .polaroid:hover .polaroid__frame {
		transform: rotate(0deg);
	}
}

/* ------------------------------------------------------------- Services */
.section--services {
	background: var(--plum-veil);
	padding-top: clamp(90px, 9.11vw, 175px);
	padding-bottom: clamp(70px, 10.94vw, 210px);
	--tab-bg: var(--plum-veil);
	--tab-color: var(--cream);
}

.features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 310px));
	justify-content: center;
	gap: clamp(32px, 5.21vw, 100px);
	max-width: calc(1312px + 2 * var(--gutter));
	margin-top: clamp(40px, 5.68vw, 109px);
	text-align: center;
	color: var(--cream);
}

.features__item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Boîte fixe de 48 × 40 comme dans la maquette : la hauteur est identique pour
   les trois icônes quelles que soient leurs largeurs natives (36, 40 et 32).
   « contain » garde le rapport d'origine et borne aussi une icône remplacée
   depuis l'admin, sans jamais la déformer. */
.features__icon {
	width: clamp(38px, 2.5vw, 48px);
	height: clamp(32px, 2.08vw, 40px);
	object-fit: contain;
	margin-bottom: clamp(18px, 1.56vw, 30px);
}

.features__title {
	margin-bottom: clamp(14px, 1.25vw, 24px);
}

/* Blocs Particulier / Professionnel */
.audience-list {
	display: flex;
	flex-direction: column;
	gap: clamp(40px, 7.03vw, 135px);
	margin-top: clamp(60px, 10.99vw, 211px);
}

.audience {
	display: grid;
	grid-template-columns: minmax(0, 615fr) minmax(0, 530fr);
	align-items: center;
	gap: clamp(32px, 4.17vw, 80px);
	padding: clamp(48px, 6.51vw, 125px) clamp(24px, 5vw, 96px);
	background: var(--cream);
	border-radius: var(--radius);
}

.audience--reverse {
	background: var(--white);
}

.audience--reverse .audience__media {
	order: 2;
}

.audience__media {
	position: relative;
}

.audience__media .polaroid {
	aspect-ratio: 614.834 / 473.933;
	--frame-w: 94.34%;
	--frame-h: 89.67%;
}

.audience__badge {
	position: absolute;
	left: 15.4%;
	top: -23.2%;
	z-index: 2;
}

.audience__seal {
	position: absolute;
	left: 54.5%;
	top: 70.7%;
	width: 30.6%;
	height: auto;
	z-index: 2;
}

.audience__body {
	min-width: 0;
}

/* Ornement ancré au dernier mot du titre : il le suit quel que soit l'endroit
   où le texte se replie, et reste juste si le titre est réécrit. */
.accent-word {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.accent-word__mark {
	position: absolute;
	left: 50%;
	pointer-events: none;
	max-width: none;
}

/* Trait qui souligne le mot. */
.accent-word__mark--line {
	top: 100%;
	transform: translateX(-50%);
	width: 116%;
	margin-top: -0.12em;
}

/* Boucle qui entoure le mot. */
.accent-word__mark--circle {
	top: 50%;
	transform: translate(-50%, -50%);
	width: 138%;
}

.audience__text {
	margin-top: clamp(20px, 2.29vw, 44px);
}

.audience .disclosure-list {
	margin-top: clamp(24px, 2.19vw, 42px);
}

/* --------------------------------------------------------- Fonctionnement */
.section--process {
	background: var(--plum-mid);
	padding-top: clamp(90px, 10.05vw, 193px);
	padding-bottom: clamp(80px, 14.74vw, 283px);
	--tab-bg: var(--plum-mid);
	--tab-color: var(--cream);
}

.steps {
	--steps-gap: clamp(24px, 2.6vw, 50px);
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(32px, 10.68vw, 205px);
	max-width: calc(1336px + 2 * var(--gutter));
	margin-top: clamp(40px, 6.93vw, 133px);
	text-align: center;
	color: var(--cream);
}

/* Ligne de temps : positionnée sur le centre exact des pastilles.
   1.2 × la hauteur du numéro + l'écart + le rayon de la pastille. */
.steps::before {
	content: '';
	position: absolute;
	top: calc(1.2 * var(--fs-h3) + var(--steps-gap) + 10px);
	left: 50%;
	transform: translateX(-50%);
	width: min(1660px, 100vw - 2 * var(--gutter));
	height: 1px;
	background: var(--white);
}

.steps__item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.steps__number {
	font-family: var(--font-title);
	font-size: var(--fs-h3);
	line-height: 1.2;
	color: var(--white);
	margin-bottom: var(--steps-gap);
}

.steps__dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--plum);
	box-shadow: 0 0 0 20px var(--plum-mid);
	margin-bottom: var(--steps-gap);
	position: relative;
	z-index: 1;
}

.steps__title {
	margin-bottom: clamp(14px, 1.25vw, 24px);
}

/* -------------------------------------------------------------- À propos */
.section--about {
	background: var(--cream);
	padding-top: clamp(80px, 7.76vw, 149px);
	padding-bottom: clamp(80px, 14.64vw, 281px);
	--tab-bg: var(--cream);
	--tab-color: var(--plum);
}

.about__portrait {
	position: relative;
	width: clamp(140px, 11.04vw, 212px);
	margin-inline: auto;
}

.about__photo {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
}

.about__badge {
	position: absolute;
	transform: translateX(-50%);
}

.about__badge--left {
	left: -12.7%;
	top: 22.2%;
}

.about__badge--right {
	left: 114.4%;
	top: 56.6%;
}

.section--about .section__title {
	margin-top: clamp(32px, 3.96vw, 76px);
	position: relative;
	z-index: 1;
}

/* Le conteneur occupe la largeur de la section et découpe lui-même : sans ça
   l'image, plus large que l'écran, provoquerait un débordement horizontal que
   seul l'overflow-x du body masquerait — un filet trop mince pour compter. */
.about__wave {
	position: absolute;
	left: 0;
	right: 0;
	top: clamp(300px, 24.17vw, 464px);
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}

.about__wave img {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: max(100%, 1200px);
	max-width: none;
	height: auto;
}

/* Les trois cartes reposent dans une grille régulière ; la pile penchée de la
   maquette est obtenue uniquement par transform. Au survol du groupe, un simple
   transform:none suffit donc à les ranger — aucun recalcul de mise en page. */
.about__carousel {
	position: relative;
	z-index: 1;
	max-width: calc(1323px + 2 * var(--gutter));
	margin-top: clamp(24px, 1.3vw, 25px);
}

.about__cards {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: clamp(12px, 1.25vw, 24px);
	padding-top: clamp(20px, 5.99vw, 115px);
	padding-bottom: clamp(8px, 0.99vw, 19px);
}

/* Commandes du carrousel : mobile uniquement (voir la requête média). */
.about__nav {
	display: none;
}

.carousel-btn {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	background: none;
	border: 1px solid var(--plum);
	border-radius: 50%;
	color: var(--plum);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.carousel-btn:hover:not(:disabled) {
	background: var(--plum);
	color: var(--cream);
}

/* Le bouton se remplit aussi à la prise de focus : sur un rond déjà bordé,
   l'anneau seul se lit comme une bordure doublée, pas comme un état. */
.carousel-btn:focus-visible {
	background: var(--plum);
	color: var(--cream);
	outline-offset: 4px;
}

.carousel-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.carousel-btn--prev svg {
	transform: rotate(180deg);
}

.about-card {
	flex: 0 1 425px;
	min-width: 0;
	min-height: clamp(340px, 24.38vw, 468px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 2.6vw, 50px);
	padding: clamp(32px, 4.43vw, 85px) clamp(24px, 3.33vw, 64px);
	background: var(--white);
	border-radius: var(--radius);
	box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
	text-align: center;
	transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Décalages en pourcentage : ils suivent la carte quand elle rétrécit.
   17,3 % = 73,5 px sur 425 ; 18,2 % = 85 px sur 468 (mesures de la maquette).
   Ordre de superposition repris de Figma : « Mon histoire » au-dessus. */
.about-card--tilt-left {
	transform: translateX(17.3%) rotate(-5deg);
	z-index: 3;
}

.about-card--straight {
	transform: translateY(-18.2%);
	z-index: 2;
}

.about-card--tilt-right {
	transform: translateX(-17.3%) rotate(5deg);
	z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
	.about__cards:hover .about-card,
	.about__cards:focus-within .about-card {
		transform: none;
	}
}

.about-card__text {
	max-width: 296px;
}

/* ------------------------------------------------------------------- FAQ */
.section--faq {
	background: var(--white);
	padding-top: clamp(80px, 8.49vw, 163px);
	padding-bottom: clamp(70px, 10.31vw, 198px);
	--tab-bg: var(--white);
	--tab-color: var(--plum);
}

.faq {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 3.13vw, 60px);
	max-width: calc(1460px + 2 * var(--gutter));
	align-items: start;
}

/* ------------------------------------------------------ Appel à action */
.cta {
	position: relative;
	margin-top: clamp(50px, 6.4vw, 123px);
	max-width: 1451px;
	margin-inline: auto;
	min-height: clamp(320px, 24.38vw, 468px);
	display: grid;
	place-items: center;
	padding: clamp(40px, 4vw, 76px) clamp(20px, 3vw, 60px);
	border-radius: var(--radius);
	background-image: var(--cta-image);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	isolation: isolate;
}

.cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
	z-index: -1;
}

.cta__inner {
	max-width: 560px;
	text-align: center;
	color: var(--white);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.cta__btn {
	margin-top: clamp(8px, 0.63vw, 12px);
	min-width: 256px;
}

/* ------------------------------------------------- Lignes dépliables */
.disclosure-list {
	display: flex;
	flex-direction: column;
}

.disclosure {
	border-top: 1px solid var(--plum);
}

.disclosure__head {
	width: 100%;
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.25vw, 24px);
	min-height: 70px;
	padding: 15px 0;
	background: none;
	border: 0;
	text-align: left;
}

button.disclosure__head {
	cursor: pointer;
}

.disclosure__title {
	flex: 1;
	min-width: 0;
	font-family: var(--font-title);
	font-weight: 700;
	font-size: var(--fs-body);
	line-height: 1.4;
	color: var(--plum);
}

.disclosure__icon {
	flex: none;
	width: 40px;
	height: 40px;
	border: 1px solid var(--plum);
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--plum);
	transition: transform 0.25s ease, background-color 0.2s ease, color 0.2s ease;
}

button.disclosure__head:hover .disclosure__icon {
	background: var(--plum);
	color: var(--cream);
}

/* Repos : flèche vers la droite. Ouvert : elle pivote vers le haut. */
.disclosure__head[aria-expanded='true'] .disclosure__icon {
	transform: rotate(-90deg);
}

/* Repli animé : une grille dont l'unique ligne passe de 0fr à 1fr. C'est le
   seul moyen d'animer vers une hauteur « automatique » sans la mesurer en JS.
   visibility retire le contenu replié de l'arbre d'accessibilité. */
.disclosure__panel {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
		visibility 0.38s;
}

.disclosure__panel-inner {
	overflow: hidden;
	min-height: 0;
	opacity: 0;
	transition: opacity 0.28s ease 0.06s;
}

.disclosure.is-open > .disclosure__panel {
	grid-template-rows: 1fr;
	visibility: visible;
}

.disclosure.is-open .disclosure__panel-inner {
	opacity: 1;
}

/* La marge basse ne peut pas vivre sur le conteneur en grille : elle
   resterait visible replié. */
.disclosure.is-open .disclosure__panel-inner > :last-child {
	margin-bottom: 20px;
}

.disclosure__panel-inner p + p {
	margin-top: 0.75em;
}

/* ------------------------------------------------------------ Pied de page */
.site-footer {
	position: relative;
	background: var(--plum);
	color: var(--cream);
	padding-top: clamp(60px, 5.89vw, 113px);
	padding-bottom: clamp(60px, 6.3vw, 121px);
	--tab-bg: var(--plum);
	--tab-color: var(--cream);
}

.site-footer__inner {
	width: 100%;
	max-width: calc(1660px + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp(32px, 4.17vw, 80px);
}

.site-footer__logo img {
	width: clamp(220px, 24.11vw, 463px);
	height: auto;
}

.site-footer__cols {
	display: flex;
	gap: clamp(32px, 4.17vw, 80px);
	font-family: var(--font-title);
	font-weight: 700;
	line-height: 1.4;
}

.site-footer__tagline {
	color: var(--plum-mid);
	font-family: var(--font-title);
	font-weight: 700;
	font-size: var(--fs-h5);
	line-height: 1.4;
	max-width: 285px;
}

.site-footer__list {
	font-size: var(--fs-body);
}

.site-footer__list a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------- Pages internes */
.page-content {
	background: var(--white);
	padding-block: clamp(140px, 12vw, 230px) clamp(80px, 8vw, 160px);
}

.entry__content {
	margin-top: 32px;
}

/* ========================================================== Responsive */

@media (max-width: 1400px) {
	.site-nav__link {
		min-width: 0;
		padding-inline: 16px;
	}
}

@media (max-width: 1200px) {
	.site-nav,
	.site-header__cta {
		display: none;
	}

	.site-header__burger {
		display: block;
		margin-left: auto;
	}

	.site-header__inner {
		padding-block: 0 12px;
	}
}

/* =========================================================================
   MOBILE — d'après le frame Figma « Mobile Adnota » (390 px de large).
   Les pourcentages reprennent les coordonnées de la maquette ; les valeurs
   fixes sont exprimées en clamp() sur la même base de 390 px.
   ========================================================================= */
@media (max-width: 1024px) {
	:root {
		--tab-h: 60px;
		--gutter: clamp(16px, 6.41vw, 25px);
		/* Corps de texte à 14 px, comme la maquette mobile. */
		--fs-body: 0.875rem;
	}

	html {
		scroll-padding-top: 80px;
	}

	/* ------------------------------------------------------------ En-tête */
	/*
	 * L'en-tête reste fixe : le menu et la prise de rendez-vous doivent être
	 * atteignables depuis n'importe quel point de la page.
	 *
	 * En haut de page il garde l'aspect de la maquette — logo complet et
	 * burger, sans fond. Dès qu'on défile, il se compacte : le logo devient le
	 * monogramme, le bouton apparaît, et un fond crème s'installe. Sans ce
	 * fond, logo et bouton, tous deux sombres, disparaîtraient au passage des
	 * sections foncées.
	 */
	.site-header.is-scrolled {
		background: var(--cream);
		box-shadow: var(--shadow-soft);
	}

	.site-header__inner {
		align-items: center;
		transition: padding 0.3s ease;
	}

	.site-header__logo {
		width: clamp(180px, 59vw, 230px);
		height: clamp(24px, 7.95vw, 31px);
	}

	.site-header.is-scrolled .site-header__logo {
		width: clamp(24px, 7.95vw, 31px);
	}

	.site-header.is-scrolled .site-header__inner {
		padding-block: 10px;
	}

	.site-header.is-scrolled .site-header__logo,
	.site-header.is-scrolled .site-header__burger {
		margin-top: 0;
	}

	/* Le bouton n'apparaît qu'une fois collé : en haut de page, c'est celui
	   du héros qui joue ce rôle. */
	.site-header.is-scrolled .site-header__cta {
		display: inline-flex;
		margin-top: 0;
		margin-left: auto;
		padding: 9px 14px 5px;
		font-size: clamp(0.6875rem, 3.1vw, 0.8125rem);
	}

	.site-header.is-scrolled .site-header__burger {
		margin-left: clamp(10px, 3.6vw, 14px);
	}

	/* Le menu se réduit à trois traits nus : ni cadre blanc, ni ombre. */
	.site-header__burger {
		display: block;
		margin-left: auto;
		margin-top: 26px;
		width: 36px;
		height: 18px;
		padding: 0;
		background: none;
		border-radius: 0;
		box-shadow: none;
	}

	.site-header__burger span + span {
		margin-top: 6px;
	}

	.site-header__burger[aria-expanded='true'] span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.site-header__burger[aria-expanded='true'] span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}

	.site-header__inner {
		padding-inline: clamp(14px, 4.87vw, 19px);
		padding-bottom: 12px;
	}

	.site-header__logo {
		margin-top: 17px;
	}

	.site-header__logo img {
		width: clamp(180px, 59vw, 230px);
	}

	.site-nav,
	.site-header__cta {
		display: none;
	}

	/* ----------------------------------------------- Onglets de section */
	.section-tab {
		left: clamp(10px, 3.85vw, 15px);
		gap: 15px;
		padding-inline: 15px;
		font-size: clamp(0.8125rem, 3.59vw, 0.875rem);
		font-weight: 500;
	}

	.section-tab__icon {
		width: 30px;
	}

	.section-tab__arrow {
		width: 12px;
	}

	/* --------------------------------------------------------------- Héros */
	/* Titre et paragraphe centrés, photos côte à côte, paraphe en dessous. */
	.section--hero {
		padding-top: clamp(90px, 29.2vw, 114px);
		padding-bottom: clamp(30px, 10.8vw, 42px);
	}

	/* L'ordre change : titre, texte, photos, puis paraphe. Comme le paraphe
	   est imbriqué dans .hero__intro, on efface les deux boîtes intermédiaires
	   avec display:contents pour que tout devienne frère dans .hero et qu'un
	   simple `order` suffise — plutôt que de dupliquer le SVG dans le HTML. */
	.hero {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.hero__content,
	.hero__intro {
		display: contents;
	}

	.hero__title {
		order: 1;
		max-width: 340px;
	}

	.hero__text {
		order: 2;
		max-width: 296px;
		margin-top: 20px;
	}

	.hero__photos {
		order: 3;
		aspect-ratio: 340 / 249;
		max-width: 340px;
		width: 100%;
		margin-top: 20px;
	}

	.hero__photos .polaroid {
		width: 49.4%;
	}

	.hero__photos .polaroid--tilt-left {
		left: 2.65%;
		top: 11.55%;
	}

	.hero__photos .polaroid--tilt-right {
		left: 48.5%;
		top: 0.3%;
	}

	/* Cadre plus fin et moins arrondi qu'en grand écran. */
	.polaroid__frame {
		border-width: 5px;
		border-radius: 8px;
	}

	/* Les pastilles deviennent des rectangles arrondis, et les deux passent
	   en blanc sur fond sombre — la variante foncée ne vaut qu'en grand écran. */
	.hero__photos .badge-round {
		aspect-ratio: auto;
		border-radius: var(--radius);
		padding: 10px;
		font-size: clamp(0.75rem, 3.59vw, 0.875rem);
		font-weight: 500;
		line-height: 1.5;
		background: var(--white);
		color: var(--plum);
	}

	.hero__photos .polaroid--tilt-left .badge-round {
		width: 64%;
		left: 20.85%;
		top: 45.7%;
		transform: none;
	}

	.hero__photos .polaroid--tilt-right .badge-round {
		width: 69%;
		left: 50%;
		top: 55%;
		transform: translate(-50%, -50%);
	}

	/* Le paraphe repasse sous les photos, centré. */
	.hero__squiggle {
		order: 4;
		display: block;
		width: clamp(70px, 24.1vw, 94px);
		margin-top: clamp(16px, 5vw, 20px);
	}

	/* Bouton de rendez-vous : bas droite du héros, en vis-à-vis de l'onglet
	   « Mes services » qui occupe le bas gauche. Positionné par rapport à la
	   section, comme dans la maquette (x 247, y 711 sur 390 × 807). */
	.hero__cta {
		display: inline-flex;
		position: absolute;
		right: clamp(12px, 5.9vw, 23px);
		bottom: clamp(12px, 6.2vw, 24px);
		z-index: 3;
		width: clamp(104px, 30.8vw, 120px);
		padding: 15px;
		font-size: clamp(0.75rem, 3.59vw, 0.875rem);
		font-weight: 500;
		line-height: 1.5;
		text-align: center;
	}

	/* ----------------------------------------------------------- Services */
	/* 100 px de fond en plus sous la dernière carte : c'est la bande qui
	   accueille l'onglet de la section suivante. Toutes les sections en
	   réservent autant, d'où les padding-bottom généreux plus bas. */
	.section--services {
		padding-top: clamp(60px, 25.6vw, 100px);
		padding-bottom: clamp(70px, 25.6vw, 100px);
	}

	.features {
		grid-template-columns: minmax(0, 200px);
		justify-content: center;
		gap: 30px;
		margin-top: clamp(30px, 15.4vw, 60px);
	}

	.features__icon {
		width: 30px;
		height: 25px;
		margin-bottom: clamp(20px, 7.7vw, 30px);
	}

	.features__title {
		margin-bottom: clamp(14px, 5.6vw, 22px);
	}

	.audience-list {
		gap: clamp(12px, 4.4vw, 17px);
		margin-top: clamp(40px, 30vw, 117px);
	}

	.audience {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(24px, 9.2vw, 36px);
		padding: clamp(24px, 9.2vw, 36px) clamp(20px, 8.2vw, 32px);
		max-width: 620px;
		margin-inline: auto;
		width: 100%;
	}

	.audience--reverse .audience__media {
		order: 0;
	}

	/* La maquette mobile n'affiche pas l'ornement des titres. */
	.accent-word__mark {
		display: none;
	}

	/* Pastille recentrée sur la photo, sceau ramené vers la gauche. */
	.audience__badge {
		left: 30.2%;
		top: -25.3%;
		width: 39.3%;
		aspect-ratio: auto;
		border-radius: var(--radius);
		padding: 10px;
		font-size: clamp(0.75rem, 3.59vw, 0.875rem);
		font-weight: 500;
		line-height: 1.5;
	}

	.audience__seal {
		left: 31.6%;
		top: 78%;
		width: 36.4%;
	}

	/* Place réservée au débord de la pastille (au-dessus) et du sceau (en
	   dessous) : 54 px de part et d'autre dans la maquette, soit 19,6 % de la
	   largeur du cadre photo — donc un ratio qui suit la mise à l'échelle. */
	.audience__media {
		padding-block: 19.6%;
	}

	/* Ces deux écarts valent 44 et 42 px aussi bien en mobile qu'en grand
	   écran : les clamp() calés en vw sur 1920 les écrasaient ici. */
	.audience__text {
		margin-top: clamp(32px, 11.3vw, 44px);
	}

	.audience .disclosure-list {
		margin-top: clamp(30px, 10.8vw, 42px);
	}

	/* ---------------------------------------------------- Fonctionnement */
	.section--process {
		padding-top: clamp(60px, 25.6vw, 100px);
		padding-bottom: clamp(80px, 31vw, 121px);
	}

	.steps {
		grid-template-columns: minmax(0, 310px);
		justify-content: center;
		gap: clamp(32px, 15.4vw, 60px);
		margin-top: clamp(30px, 15.4vw, 60px);
	}

	/* Ni ligne de temps ni pastilles en mobile : la maquette les supprime. */
	.steps::before,
	.steps__dot {
		display: none;
	}

	.steps__number {
		margin-bottom: clamp(24px, 12.8vw, 50px);
	}

	/* --------------------------------------------------------- À propos */
	.section--about {
		padding-top: clamp(50px, 20.8vw, 81px);
		padding-bottom: clamp(70px, 25.6vw, 100px);
	}

	.about__portrait {
		width: clamp(150px, 52.6vw, 205px);
	}

	.about__badge {
		transform: none;
	}

	.about__badge--left {
		left: -37%;
		top: 31.7%;
	}

	.about__badge--right {
		left: 73.7%;
		top: 57%;
	}

	.badge-pill {
		font-size: clamp(0.75rem, 3.59vw, 0.875rem);
		padding: 8px 11px;
	}

	.section--about .section__title {
		margin-top: clamp(28px, 13.3vw, 52px);
	}

	.about__wave {
		top: clamp(240px, 113.6vw, 443px);
	}

	.about__wave img {
		width: max(100%, 1006px);
	}

	/* Carrousel : une carte à la fois, glissement au doigt avec accrochage. */
	.about__carousel {
		margin-top: clamp(30px, 15.4vw, 60px);
	}

	.about__cards {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 100%;
		/* Impératif : le justify-content:center du grand écran recentrerait la
		   piste débordante et rendrait la première carte inatteignable. */
		justify-content: start;
		align-items: start;
		gap: 16px;
		padding-block: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}

	.about__cards::-webkit-scrollbar {
		display: none;
	}

	.about-card {
		scroll-snap-align: center;
		flex: none;
		width: 100%;
		min-height: 0;
		transform: none;
		padding: clamp(28px, 12vw, 46px) clamp(20px, 7.7vw, 30px);
		gap: clamp(20px, 7.7vw, 30px);
	}

	/* Précédent et suivant, côte à côte et centrés sous la carte. */
	.about__nav {
		display: flex;
		justify-content: center;
		gap: 20px;
		margin-top: 31px;
	}

	/* --------------------------------------------------------------- FAQ */
	.section--faq {
		padding-top: clamp(50px, 13.3vw, 52px);
		padding-bottom: clamp(90px, 40vw, 156px);
	}

	.faq {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.cta {
		margin-top: clamp(30px, 8vw, 31px);
		min-height: clamp(320px, 120vw, 468px);
	}

	.cta__btn {
		min-width: 0;
		width: 100%;
		max-width: 256px;
	}

	/* --------------------------------------------------------- Pied de page */
	/* Tout est centré et empilé. */
	.site-footer {
		padding-top: clamp(40px, 13.3vw, 52px);
		padding-bottom: clamp(40px, 18.5vw, 72px);
		text-align: center;
	}

	.site-footer__inner {
		flex-direction: column;
		align-items: center;
		gap: clamp(28px, 15.1vw, 59px);
	}

	.site-footer__logo img {
		width: clamp(200px, 75.9vw, 296px);
	}

	.site-footer__cols {
		flex-direction: column;
		align-items: center;
		gap: clamp(28px, 13.3vw, 52px);
	}

	.site-footer__tagline {
		max-width: 285px;
	}

	/* Le pied de page garde ses 18 px : dans la maquette mobile ses colonnes
	   font 232 et 299 px pour quatre lignes de 25, soit 18 px en 1,4. C'est le
	   seul bloc de texte qui ne descend pas à 14. */
	.site-footer__list {
		font-size: clamp(1rem, 4.6vw, 1.125rem);
	}
}

@media (max-width: 560px) {
	.disclosure__icon {
		width: 32px;
		height: 32px;
	}
}

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

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}