/* ════════════════════════════════════════════════════════════
   ATMOSPHÈRE — grain, formes diffuses, dégradés dynamiques
   (principes repris du concept Japhy)

   La couleur est une lumière saturée posée DERRIÈRE des éléments
   blancs, avec un grain bien visible, et elle déborde en fondu.
   Couche posée par-dessus main.css : elle ne change ni les polices
   ni les composants, seulement les couleurs et les fonds.
   Retour en arrière : retirer dans index.html le <link> vers ce
   fichier et le <script> js/atmosphere.js.
════════════════════════════════════════════════════════════ */

:root {
	/* Fond : un blanc cassé plus lumineux que l'ancien beige */
	--bg: #F7F5F3;

	/* Nappes pastel (Japhy) */
	--atmo-peach:    #FFEED8;
	--atmo-pink:     #FFD7F0;
	--atmo-lavender: #D0B2FF;
	--atmo-sky:      #B9D3FF;
	--atmo-coral:    #FFB898;

	/* Grain teinté, appliqué en « multiply » comme sur Japhy */
	--atmo-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .1 0 0 0 0 .31 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body { background: var(--bg); }

/* ── HERO : repris de la version Amplemarket de Japhy ──
   Pas de cadre, fond uni (pas de ciel violet). Seul le swoosh de couleur
   (WebGL, js/atmosphere.js, mêmes réglages qu'Amplemarket : orange vif,
   nappes ciel / lavande / pêche) passe derrière les études de cas et file
   vers le coin haut droit. */
.hj {
	position: relative;
	isolation: isolate;
	overflow-x: clip;
	padding: 128px 0 clamp(5rem, 9vw, 8rem);
	text-align: center;
	background: var(--bg);
}

/* Logo en haut à gauche, à la hauteur du menu */
.hs__top.hj__top {
	position: absolute;
	z-index: 5;
	top: 1.75rem;
	left: clamp(1.25rem, 4vw, 3.5rem);
	height: 56px;
	min-height: 0;
	padding: 0;
	justify-content: flex-start;
}

.hj__inner {
	position: relative;
	z-index: 2;                 /* le titre reste devant la traînée */
	max-width: 62rem;
	margin: 0 auto;
	padding: 0 1.25rem;
	color: var(--black);
}
.hj__title { margin: 0; }


/* Études de cas à la place de l'écran produit */
.hj__visual {
	position: relative;
	max-width: 1120px;
	margin: 72px auto 0;
	padding: 0 24px;
	scroll-margin-top: 6rem;
}
.hj__fluid { position: absolute; left: -30%; right: -14%; top: -22%; bottom: -30%; z-index: 0; pointer-events: none; }
.hj__fluid canvas { display: block; width: 100%; height: 100%; }
/* Curseur au bout du swoosh (même place et même balancement que la balle d'Amplemarket) */
.hj-cursor {
	position: absolute;
	z-index: 2;
	right: -5%;
	top: -15%;
	width: 130px;
	overflow: visible;
	color: var(--black);
	pointer-events: none;
	animation: hj-bob 5s ease-in-out infinite;
}
@keyframes hj-bob {
	0%, 100% { transform: translateY(0) rotate(-6deg); }
	50%      { transform: translateY(-8px) rotate(-2deg); }
}
.hj__fluid.fallback {
	background:
		radial-gradient(40% 60% at 20% 55%, #D0B2FF, transparent 70%),
		radial-gradient(45% 55% at 70% 40%, #FFEED8, transparent 70%),
		#E8400D;
	-webkit-mask-image: radial-gradient(60% 70% at 18% 62%, #000 30%, transparent 72%);
	        mask-image: radial-gradient(60% 70% at 18% 62%, #000 30%, transparent 72%);
}

/* Surtitre « Histoires Client », en haut à gauche des cartes, nettement plus grand que la phrase d'accroche */
.svc-eyebrow.hj__label {      /* double classe : passe devant la règle commune des surtitres */
	position: relative;
	z-index: 1;
	margin: 0 0 1.25rem;
	font-size: clamp(1.375rem, 1.9vw, 1.625rem);   /* 22 → 26px : un palier (×1,25) au-dessus de la phrase d'accroche (21px) */
	letter-spacing: -.02em;
	line-height: 1.15;
	text-align: left;
}
.hj-cases {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}
.hj-case {
	display: flex;
	flex-direction: column;
	padding: 10px 10px 22px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 0 rgba(36, 36, 36, .05), 0 30px 60px -36px rgba(40, 25, 80, .45);
	transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.hj-case:nth-child(1) { transform: rotate(-1.2deg); }
.hj-case:nth-child(2) { transform: rotate(.8deg) translateY(10px); }
.hj-case:nth-child(3) { transform: rotate(-.4deg); }
.hj-case:hover,
.hj-case:focus-within { transform: rotate(0) translateY(-4px); }
/* Visuel : photo de l'étude de cas floutée + grain, logo du client en blanc */
.hj-case__img {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 9px;
	background: #8A8580;
}
/* La photo, floutée (agrandie pour que le flou ne laisse pas de bord clair) */
.hj-case__img::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	filter: blur(10px) saturate(1.35) contrast(1.05);
	transform: scale(1.18);
}
/* Voile léger pour la lisibilité du logo + grain */
.hj-case__img::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		var(--atmo-noise) 0 0 / 180px 180px,
		linear-gradient(rgba(36, 36, 36, .06), rgba(36, 36, 36, .18));
	mix-blend-mode: multiply;   /* grain teinté, comme le reste du site */
	opacity: .85;
	pointer-events: none;
}
.hj-case__img img {
	position: relative;
	z-index: 1;
	display: block;
	width: var(--logo-w, 46%);
	height: auto;
	filter: brightness(0) invert(1) drop-shadow(0 1px 12px rgba(0, 0, 0, .18));   /* logo en blanc */
}
.hj-case__img--pernod { --logo-w: 44%; }
.hj-case__img--clear  { --logo-w: 46%; }
.hj-case__img--ff     { --logo-w: 40%; }
.hj-case__img--pernod::before { background-image: url("../img/hero/pernod.jpg"); }
.hj-case__img--clear::before  { background-image: url("../img/hero/clearfashion.jpg"); }
.hj-case__img--ff::before     { background-image: url("../img/hero/ff.jpg"); }
/* Photo Clear Fashion très claire : voile plus soutenu pour que le logo blanc ressorte */
.hj-case__img--clear::before { filter: blur(10px) saturate(1.35) contrast(1.05) brightness(.82); }
.hj-case__img--clear img { filter: brightness(0) invert(1) drop-shadow(0 1px 14px rgba(0, 0, 0, .28)); }
.hj-case__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px 10px 0; }
.hj-case__q { flex: 1; margin: 0; }
.hj-case .hs__link { margin-top: .5rem; align-items: center; gap: .45rem; }
/* Étude de cas pas encore en ligne (Frenchfounders) : carte à moitié transparente */
.hj-case.is-soon { opacity: .5; }
/* Toute la carte est cliquable : le lien s'étend sur la carte (lien « étiré ») */
.hj-case { position: relative; }
.hj-case a.hs__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 16px; }
.hj-case:has(a.hs__link) { cursor: pointer; }
.hj-case a.hs__link:focus-visible { outline: none; }
.hj-case:has(a.hs__link:focus-visible) { outline: 2px solid var(--black); outline-offset: 4px; }
/* Flèche tracée à la main ; elle avance au survol de la carte */
.hs__arrow {
	width: 1.6em;
	height: .8em;
	overflow: visible;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.hj-case:hover .hs__arrow,
.hj-case:focus-within .hs__arrow { transform: translateX(4px); }
/* Flèche « → » d'origine : elle avance au survol de toute la carte */
.hj-case:hover .hs__link span,
.hj-case:focus-within .hs__link span { transform: translateX(3px); }

@media (max-width: 900px) {
	.hj-cases { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
	.hj-case:nth-child(2) { transform: rotate(.8deg); }
}
@media (max-width: 767px) {
	.hj__fluid, .hj-cursor { display: none; }   /* comme Amplemarket : ni traînée ni curseur sur mobile */
	.hj__visual { margin-top: 48px; padding: 0 16px; }
}
@media (max-width: 600px) {
	/* Le menu prend toute la largeur : le logo passe dessous */
	.hj { padding-top: 0; }
	.hs__top.hj__top { position: relative; top: auto; left: auto; height: auto; padding: 5rem 1.25rem 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
	.hj-cursor { animation: none; transform: rotate(-6deg); }
	.hj-case { transition: none; }
}

.contact-sec__bg canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.contact-sec__bg.fallback::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--atmo-noise);
	background-size: 180px 180px;
	opacity: .08;                /* à peine perceptible : dégradé plus propre */
	mix-blend-mode: multiply;
}

/* ── MARQUES : fond uni (pas de dégradé sous les logos) ── */
/* Défilement piloté par js/marquee.js : on coupe l'animation CSS d'origine */
.marques__row.is-js { animation: none !important; will-change: transform; }
/* Logos sur verre dépoli pour laisser passer les couleurs */
.marques__logo {
	background: rgba(255, 255, 255, .62);
	border: 1px solid rgba(255, 255, 255, .8);
	-webkit-backdrop-filter: blur(8px);
	        backdrop-filter: blur(8px);
}

/* ── EXPERTISES : chaque carte porte un dégradé vivant, du clair au saturé ──
   Le cœur saturé (--c2) dérive en haut à droite, loin du texte (js/atmosphere.js) */
.svc-section .svc-item {
	background:
		radial-gradient(120% 140% at var(--gx, 85%) var(--gy, 15%),
			var(--c2) 0%, var(--c1) var(--s1, 40%), var(--c0) var(--s2, 92%));
}
#svcItem0 { --c0: #FFF3EA; --c1: #FFD9C3; --c2: #F7A584; }  /* pêche → corail */
#svcItem1 { --c0: #F7F2FE; --c1: #E3D6FB; --c2: #BFA6F5; }  /* lilas → lavande */
#svcItem2 { --c0: #F0F6FF; --c1: #D5E5FD; --c2: #A3C6F8; }  /* ciel → bleu */
#svcItem3 { --c0: #FFF8E6; --c1: #FDE7B4; --c2: #F7C46C; }  /* crème → soleil */
/* Grain teinté plus présent (multiply) à la place du grain « overlay » */
.svc-section .svc-item::after {
	background-image: var(--atmo-noise);
	background-size: 180px 180px;
	mix-blend-mode: multiply;
	opacity: .3;
}

/* ── CONTACT : fond uni, la couleur monte depuis le bas en halos très diffus
   (ciel #ACE9FF · orange #E8400D · pêche #FFA26E, la palette du swoosh), comme une lueur posée sur le bord de la page ── */
.contact-sec__bg {
	inset: 0;
	overflow: hidden;
	background: var(--bg);
}
.contact-sec__bg::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: min(1280px, 100%);
	height: 260px;
	transform: translateX(-50%) translateY(50%);
	background:
		radial-gradient(closest-side, rgba(172, 233, 255, .8), rgba(172, 233, 255, 0)) 18% 50% / 34% 100% no-repeat,
		radial-gradient(closest-side, rgba(232, 64, 13, .4), rgba(232, 64, 13, 0)) 50% 50% / 40% 100% no-repeat,
		radial-gradient(closest-side, rgba(255, 162, 110, .6), rgba(255, 162, 110, 0)) 82% 50% / 34% 100% no-repeat;
	filter: blur(28px);
	pointer-events: none;
}
/* Version animée (js/atmosphere.js) : le fluide du swoosh, grain compris,
   découpé en halo qui sort du bas de la page ; le dégradé CSS reste en secours */
.contact-glow {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: min(1280px, 100%);
	height: 240px;
	transform: translateX(-50%);
	pointer-events: none;
	-webkit-mask-image: radial-gradient(42% 100% at 50% 100%, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 35%, rgba(0,0,0,.12) 65%, transparent 88%);
	        mask-image: radial-gradient(42% 100% at 50% 100%, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 35%, rgba(0,0,0,.12) 65%, transparent 88%);
}
.contact-sec__bg.has-glow::before { display: none; }
/* le fondu bas de la section masquerait la lueur */
.contact-sec::after { display: none; }
.contact-sec__bg.fallback::after { display: none; }

@media (max-width: 900px) {
	.contact-sec__bg::before { width: 140%; height: 200px; }
}

/* Titre du contact : « Pour le reste, » en Neue Montreal, retour à la ligne,
   « parlons-en » en Nocturne en contour (le <em> garde le style vide de main.css).
   Même équilibre que les titres des étapes : la Neue à .94em (même hauteur d'x
   que la Nocturne) et très légèrement épaissie. */
.contact-sec__title-sans {
	display: block;
	font-family: var(--fb);
	font-weight: 400;
	font-size: .94em;
	letter-spacing: -.03em;
	-webkit-text-stroke: .011em currentColor;
	margin-bottom: .04em;
}

/* Message de copie de l'email : contraste suffisant sur la nappe orange */
.contact-sec__status { color: var(--black); }

/* ── TITRES DES ÉTAPES : serif + Neue Montreal, tout en noir ──
   « Écouter » reste en Nocturne ; la seconde partie (« avant de dessiner »…)
   passe en Neue Montreal Regular, très légèrement épaissi par un fin contour
   de la même couleur : une graisse entre le Regular et le Medium (seules
   graisses disponibles), équilibrée avec la serif.
   Les mots en contour (hero, « ensemble ») gardent leur contour noir d'origine. */
.proc-step__title .svc-item__title-outline {
	color: var(--black) !important;
	-webkit-text-fill-color: currentColor;
	-webkit-text-stroke: .011em currentColor !important;
	font-family: var(--fb);
	font-weight: 400;
	font-size: .94em;            /* même hauteur d'x que la serif : 48 / 51 */
	line-height: 1;
	letter-spacing: -.03em;
	margin-top: .08em;
}

/* ── LOGO : « Leslie / Soler » en bloc, en Neue Montreal ──
   Les deux lignes ont exactement la même largeur : js/atmosphere.js ajuste
   la taille de « Soler » une fois la police chargée. */
.hs__logo {
	position: relative;
	z-index: 0;                  /* le trait coloré passe sous les lettres */
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	font-family: var(--fb);
	font-size: 1.3rem;
	font-weight: 500;
	line-height: .86;
	letter-spacing: -.01em;
	font-kerning: normal;
	font-synthesis: none;
	color: var(--black);
	text-decoration: none;
	white-space: nowrap;
}
.hs__logo-l2 { font-size: 1.06em; }   /* valeur de départ, affinée en JS */
/* Au survol : le trait coloré du swoosh (dégradé orange) se dessine sous le nom */
.hs__logo-line {
	position: absolute;
	z-index: -1;
	left: -4%;
	bottom: -.34em;
	width: 108%;
	height: .36em;
	overflow: visible;
	pointer-events: none;
}
.hs__logo-line path {
	transform-origin: 0 50%;
	transform: scaleX(0);
	transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.hs__logo:hover .hs__logo-line path,
.hs__logo:focus-visible .hs__logo-line path { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
	.hs__logo-line path { transition: none; }
}

/* ── SURTITRES : même style partout, en minuscules, un peu plus grands ──
   Restent « Histoire client » (barre des logos du hero) et « Avant de m'écrire ». */
.hs__bar-label,
.marques__eyebrow,
.svc-eyebrow {
	font-family: var(--fb);
	font-size: 1rem;              /* au lieu de .8125rem */
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -.005em;
	text-transform: none;
	color: var(--black);
}

/* ── BOUTONS : remplissage organique (remplace le balayage en diagonale) ──
   Une goutte d'encre au contour irrégulier naît sous la souris, s'étale en
   tournant légèrement, puis se résorbe vers le point de sortie (js/btn-fill.js). */
.btn--wayra::before {
	top: var(--fy, 50%);
	left: var(--fx, 50%);
	width: var(--fd, 260%);
	height: auto;
	aspect-ratio: 1;
	border-radius: 47% 53% 42% 58% / 56% 44% 57% 43%;
	transform: translate(-50%, -50%) scale(0) rotate(-30deg);
	transform-origin: 50% 50%;
	transition: transform .5s cubic-bezier(.5, 0, .2, 1);
}
.btn--wayra:hover::before,
.btn--wayra:focus-visible::before {
	transform: translate(-50%, -50%) scale(1) rotate(25deg);
	transition: transform .75s cubic-bezier(.2, .8, .2, 1);
}
.btn--wayra:focus-visible { color: #fff; border-color: var(--black); }
/* le texte passe en blanc un peu après le départ de la goutte, pour la suivre */
.btn--wayra:hover { transition-delay: .1s; }
@media (prefers-reduced-motion: reduce) {
	.btn--wayra::before,
	.btn--wayra:hover::before { transition: none; }
}

/* ── CONTACT : phrase d'invitation + coordonnées en une ligne ── */
.contact-sec__lead {
	max-width: 30rem;
	margin: 0;
	font-family: var(--fb);
	font-size: var(--ts-lead, 22px);
	line-height: var(--lh-lead, 32px);
	color: var(--black);
}
.contact-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--fb);
	font-size: var(--ts-micro, 14px);
	line-height: var(--lh-micro, 20px);
	color: var(--gray);
}
.contact-meta li + li::before { content: "·"; margin-right: 20px; color: rgba(36, 36, 36, .35); }
.contact-meta a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--black);
	font-weight: 500;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size .45s cubic-bezier(.2, .7, .2, 1);
}
.contact-meta a:hover,
.contact-meta a:focus-visible { background-size: 100% 1px; }
.contact-meta a:hover .hs__arrow { transform: translateX(4px); }

/* ── À PROPOS (à droite du contact) : 3 photos qui se déploient en éventail ──
   L'état ci-dessous est l'état déployé (sans JS ou avec « réduire les animations ») ;
   js/about-cards.js part du tas serré et déploie les photos au fil du défilement. */
.contact-about {
	position: absolute;
	z-index: 10;
	top: calc(50% - 1rem);   /* même centre que le bloc de gauche (padding 7rem / 9rem) */
	right: calc(max(1.5rem, (100vw - 1244px) / 2) + min(90px, 6vw));   /* place pour les photos déployées */
	width: min(460px, 34vw);
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 12px;
	scroll-margin-top: 7rem;
}
.about-stack {
	position: relative;
	height: clamp(280px, 28vw, 390px);
	margin-bottom: 0;
}
.about-card {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: 12px;
	background: transparent;
	box-shadow: 0 1px 2px rgba(36, 36, 36, .06), 0 30px 60px -30px rgba(36, 36, 36, .45);
	will-change: transform;
}
.about-card img,
.about-card__ph {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	object-fit: cover;
}
.about-card--main  { width: 52%; aspect-ratio: 4 / 5; z-index: 3; transform: translate(-50%, -50%) rotate(-2deg); }
.about-card--left  { width: 50%; aspect-ratio: 4 / 3; z-index: 1; transform: translate(-50%, -50%) translate(-85%, 26%) rotate(-7deg); }
.about-card--right { width: 50%; aspect-ratio: 4 / 3; z-index: 2; transform: translate(-50%, -50%) translate(85%, -28%) rotate(6deg); }

/* Emplacement tant que la photo n'est pas déposée */
.about-card__ph {
	display: none;
	position: relative;
	place-items: center;
	text-align: center;
	font-family: var(--fb);
	font-size: var(--ts-micro, 14px);
	line-height: 1.3;
	font-weight: 500;
	color: #fff;
}
.about-card__ph small { font-weight: 400; opacity: .8; }
.about-card.is-empty img { display: none; }
.about-card.is-empty .about-card__ph { display: grid; }
.about-card--main .about-card__ph  { background: radial-gradient(60% 70% at 25% 20%, #ACE9FF, transparent 70%), radial-gradient(70% 70% at 80% 90%, #FFA26E, transparent 70%), #E8400D; }
.about-card--left .about-card__ph  { background: radial-gradient(60% 80% at 20% 20%, #ACE9FF, transparent 70%), #328EFA; }
.about-card--right .about-card__ph { background: radial-gradient(60% 80% at 80% 15%, #FFEED8, transparent 70%), #EC9A2A; }

.contact-about__eyebrow { margin: 0; }
.contact-about__lead {
	margin: 0;
	font-family: var(--fb);
	font-size: var(--ts-lead, 22px);
	line-height: var(--lh-lead, 32px);
	font-weight: 500;
	color: var(--black);
}
.contact-about__text {
	margin: 0;
	font-family: var(--fb);
	font-size: var(--ts-body, 18px);
	line-height: var(--lh-body, 28px);
	color: var(--black);
}
@media (max-width: 900px) {
	.contact-about {
		position: relative;
		top: auto;
		right: auto;
		width: auto;
		transform: none;
		margin: -3rem var(--pad, 1.5rem) 5rem;
	}
	.about-stack { height: 62vw; max-height: 340px; }
}

/* Titre « Comment je travaille » centré */
.proc .svc-header { text-align: center; justify-content: center; }
.proc .svc-heading { margin-inline: auto; text-align: center; }

/* Voile derrière la phrase des marques : plus couvrant, les logos ne gênent plus la lecture */
.marques__header::before { opacity: 1; filter: blur(18px); transform: scaleX(1.05) scaleY(1.35); box-shadow: 0 0 30px 20px var(--bg); }

/* « Pas la bonne personne » : étoile pleine, la même que dans le bandeau défilant */
.fit-list__star {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	fill: #242424;
	align-self: center;
}


/* ── CONTACT + À PROPOS (piste « portrait éditorial ») ──
   Portrait à gauche, la calanque posée en coin ; texte et boutons à droite. Aucune animation. */
.contact-sec__inner.contact-sec__inner--split {
	max-width: var(--maxw, 1280px);              /* même gabarit que les autres sections */
	width: calc(100% - 2 * var(--pad, 1.5rem));
	margin: 0 auto;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-items: center;
	gap: clamp(3rem, 7vw, 6rem);
	padding-inline: 0;
}
.contact-sec__text { display: grid; gap: 0; justify-items: start; }
.contact-sec__text .contact-sec__title { margin: 0 0 24px; }   /* titre + phrase vont ensemble… */
.contact-sec__text .contact-sec__lead { margin: 0 0 40px; }    /* …puis l'action */
.nowrap { white-space: nowrap; }
.contact-photo {
	position: relative;
	width: min(380px, 100%);
	justify-self: start;   /* calé sur la ligne de gauche de la page */
	scroll-margin-top: 7rem;
}
.contact-photo__main {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(36, 36, 36, .06), 0 30px 60px -30px rgba(36, 36, 36, .45);
}
.contact-photo__aside {
	position: absolute;
	width: 52%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	right: -22%;
	bottom: -8%;
	border-radius: 10px;
	transform: rotate(4deg);
	box-shadow: 0 20px 40px -20px rgba(36, 36, 36, .5);
}
@media (max-width: 900px) {
	.contact-sec__inner.contact-sec__inner--split { grid-template-columns: 1fr; }
	.contact-photo { width: min(300px, 72%); justify-self: start; margin-bottom: 45px; }   /* 64px jusqu'au titre, sous la calanque */
	.contact-photo__aside { right: -30%; }
}