/* =====================================================================
   Les Deux Tondus — feuille de style unique du site
   Mobile d'abord. Contient (dans l'ordre) : les polices Poppins
   auto-hébergées, les quelques règles encore utiles des anciennes
   feuilles l2t_*2.css (qui ne sont plus chargées), puis les styles
   de la refonte.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Polices : Poppins (licence SIL Open Font), sous-ensemble « latin »,
   hébergée sur le site (dossier fonts/) au lieu de Google Fonts.
   Graisses chargées : 400, 500 et 700 (le 600 s'affiche en 700, comme avant).
   « Poppins Fallback » = Arial ajusté aux proportions de Poppins, pour que
   le texte ne bouge pas quand la vraie police arrive.
   --------------------------------------------------------------------- */
@font-face{
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/poppins-latin-400-normal.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

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

@font-face{
	font-family: 'Poppins Fallback';
	src: local('Arial');
	ascent-override: 93.62%;
	descent-override: 31.21%;
	line-gap-override: 8.92%;
	size-adjust: 112.16%;
}

/* ---------------------------------------------------------------------
   Reprise des 4 anciennes feuilles (l2t_master2/medium2/small2/tiny2.css) :
   uniquement les règles qui correspondent encore à un élément du site
   (extraction automatique du 21/10/2026, mêmes conditions d'écran qu'avant).
   --------------------------------------------------------------------- */

/* l2t_master2.css */
@media screen and (min-width:1250px){
*{padding: 0px; border: 0px; margin: 0px;}
html{width: 100%; min-width: 1200px; max-width: 2000px; margin: 0px auto; scroll-behavior: smooth;}
body{font-family: Poppins, 'Poppins Fallback', sans-serif; font-weight: 400; width: 100%;}
p{color: rgb(106, 106, 106); line-height: 31px; font-size: 17px; margin-bottom: 13px;}
p a{text-decoration: underline; color: rgb(106, 106, 106);}
h1{color: rgb(255, 255, 255); font-weight: 600; font-size: 36px; line-height: 53px; margin-bottom: 22px;}
h2{color: rgb(235, 8, 128); font-weight: 600; font-size: 36px; line-height: 53px; margin-bottom: 22px;}
h3{color: rgb(106, 106, 106); line-height: 35px; font-size: 19px; margin-bottom: 26px; font-weight: 600;}
a.button{display: inline-block; padding: 7px 60px 7px 25px; border-radius: 25px; text-decoration: none; font-size: 16px; text-transform: uppercase; background-color: rgb(106, 106, 106); position: relative; color: rgb(255, 255, 255); transition: 0.4s; margin-top: 20px;}
a.button::after{content: ""; width: 30px; height: 13px; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); background-image: url("images/arrow-right.svg"); background-size: 30px auto; background-position: right center; background-repeat: no-repeat; transition: 0.4s;}
a.button:hover::after{right: 14px;}
select, textarea{appearance: none; background-color: rgb(255, 255, 255);}
#heading{width: 100%; height: 30px; text-align: center; background-color: rgb(0, 60, 114);}
#heading p{color: white;}
@media (max-width: 768px){
h1{font-size: 24px;}
}
}

/* l2t_medium2.css */
@media screen and (min-width:1000px) and (max-width:1250px){
*{padding: 0px; border: 0px; margin: 0px;}
html{width: 100%; min-width: 950px; margin: 0px auto; scroll-behavior: smooth;}
body{font-family: Poppins, 'Poppins Fallback', sans-serif; font-weight: 400; width: 100%;}
p{color: rgb(106, 106, 106); line-height: 31px; font-size: 17px; margin-bottom: 13px;}
p a{text-decoration: underline; color: rgb(106, 106, 106);}
h1{color: rgb(255, 255, 255); font-weight: 600; font-size: 36px; line-height: 53px; margin-bottom: 22px;}
h2{color: rgb(235, 8, 128); font-weight: 600; font-size: 36px; line-height: 53px; margin-bottom: 22px;}
h3{color: rgb(106, 106, 106); line-height: 35px; font-size: 19px; margin-bottom: 26px; font-weight: 600;}
a.button{display: inline-block; padding: 7px 60px 7px 25px; border-radius: 25px; text-decoration: none; font-size: 16px; text-transform: uppercase; background-color: rgb(106, 106, 106); position: relative; color: rgb(255, 255, 255); transition: 0.4s; margin-top: 20px;}
a.button::after{content: ""; width: 30px; height: 13px; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); background-image: url("images/arrow-right.svg"); background-size: 30px auto; background-position: right center; background-repeat: no-repeat; transition: 0.4s;}
a.button:hover::after{right: 14px;}
select, textarea{appearance: none; background-color: rgb(255, 255, 255);}
#heading{width: 100%; height: 30px; text-align: center; background-color: rgb(0, 60, 114);}
#heading p{color: white;}
@media (max-width: 768px){
h1{font-size: 24px;}
}
}

/* l2t_small2.css */
@media screen and (min-width:800px) and (max-width:1000px){
*{padding: 0px; border: 0px; margin: 0px;}
html{width: 100%; min-width: 750px; margin: 0px auto; scroll-behavior: smooth;}
body{font-family: Poppins, 'Poppins Fallback', sans-serif; font-weight: 400; width: 100%;}
p{color: rgb(106, 106, 106); line-height: 31px; font-size: 17px; margin-bottom: 13px;}
p a{text-decoration: underline; color: rgb(106, 106, 106);}
h1{color: rgb(255, 255, 255); font-weight: 600; font-size: 36px; line-height: 53px; margin-bottom: 22px;}
h2{color: rgb(235, 8, 128); font-weight: 600; font-size: 36px; line-height: 53px; margin-bottom: 22px;}
h3{color: rgb(106, 106, 106); line-height: 35px; font-size: 19px; margin-bottom: 26px; font-weight: 600;}
a.button{display: inline-block; padding: 7px 60px 7px 25px; border-radius: 25px; text-decoration: none; font-size: 16px; text-transform: uppercase; background-color: rgb(106, 106, 106); position: relative; color: rgb(255, 255, 255); transition: 0.4s; margin-top: 20px;}
a.button::after{content: ""; width: 30px; height: 13px; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); background-image: url("images/arrow-right.svg"); background-size: 30px auto; background-position: right center; background-repeat: no-repeat; transition: 0.4s;}
a.button:hover::after{right: 14px;}
select, textarea{appearance: none; background-color: rgb(255, 255, 255);}
#heading{width: 100%; height: 30px; text-align: center; background-color: rgb(0, 60, 114);}
#heading p{color: white;}
@media (max-width: 768px){
h1{font-size: 24px;}
}
}

/* l2t_tiny2.css */
@media screen and (max-width:800px){
*{padding: 0px; border: 0px; margin: 0px;}
html{width: 100%; margin: 0px auto; scroll-behavior: smooth;}
body{font-family: Poppins, 'Poppins Fallback', sans-serif; font-weight: 400; width: 100%;}
p{color: rgb(106, 106, 106); line-height: 31px; font-size: 17px; margin-bottom: 13px;}
p a{text-decoration: underline; color: rgb(106, 106, 106);}
h1{color: rgb(255, 255, 255); font-weight: 600; font-size: 36px; line-height: 53px; margin-bottom: 22px;}
h2{color: rgb(235, 8, 128); font-weight: 600; font-size: 36px; line-height: 53px; margin-bottom: 22px;}
h3{color: rgb(106, 106, 106); line-height: 35px; font-size: 19px; margin-bottom: 26px; font-weight: 600;}
a.button{display: inline-block; padding: 7px 60px 7px 25px; border-radius: 25px; text-decoration: none; font-size: 16px; text-transform: uppercase; background-color: rgb(106, 106, 106); position: relative; color: rgb(255, 255, 255); transition: 0.4s; margin-top: 20px;}
a.button::after{content: ""; width: 30px; height: 13px; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); background-image: url("images/arrow-right.svg"); background-size: 30px auto; background-position: right center; background-repeat: no-repeat; transition: 0.4s;}
a.button:hover::after{right: 14px;}
select, textarea{appearance: none; background-color: rgb(255, 255, 255);}
#heading{width: 100%; height: 30px; text-align: center; background-color: rgb(0, 60, 114);}
#heading p{color: white;}
}


/* =====================================================================
   Styles de la refonte
   ===================================================================== */

:root{
	--l2t-pink: #EB0880;
	--l2t-pink-2: #FA2D56;
	--l2t-ink: #0A0A0A;
	--l2t-grey: #6A6A6A;
	--l2t-line: #ECECEC;
	--l2t-header-h: 72px;
	--l2t-gutter: clamp(16px, 4vw, 48px);
}

@media (min-width: 1000px){
	:root{ --l2t-header-h: 92px; }
}

html{ scroll-padding-top: var(--l2t-header-h); }
picture{ display: contents; }
body{ background: #fff; }
html.nav-open{ overflow: hidden; }

.sr-only{
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ---------------------------------------------------------------------
   Message d'en-tête (table heading_message)
   --------------------------------------------------------------------- */
#heading{
	height: auto;
	padding: 9px var(--l2t-gutter);
	background: var(--l2t-ink);
}

#heading p{
	margin: 0;
	color: #fff;
	font-size: 14px;
	line-height: 1.45;
}


/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.site-header{
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid transparent;
	transition: border-color .3s;
}

.site-header.is-scrolled{ border-bottom-color: var(--l2t-line); }

.site-header__inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1440px;
	height: var(--l2t-header-h);
	margin: 0 auto;
	padding: 0 var(--l2t-gutter);
	box-sizing: border-box;
}

.site-header__logo{
	position: relative;
	z-index: 2;
	display: block;
	flex: 0 0 auto;
}

.site-header__logo img{
	display: block;
	width: auto;
	height: 46px;
}

/* Bouton burger (mobile) */
.nav-toggle{
	position: relative;
	z-index: 2;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 7px;
	width: 48px;
	height: 48px;
	margin-right: -12px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.nav-toggle__bar{
	display: block;
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: var(--l2t-ink);
	transition: transform .3s;
}

.site-header.is-open .nav-toggle__bar:nth-child(1){ transform: translateY(4.5px) rotate(45deg); }
.site-header.is-open .nav-toggle__bar:nth-child(2){ transform: translateY(-4.5px) rotate(-45deg); }

/* Menu : plein écran en mobile */
.site-nav{
	position: fixed;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: calc(var(--l2t-header-h) + 56px) var(--l2t-gutter) 32px;
	overflow-y: auto;
	background: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s;
}

.site-header.is-open .site-nav{
	opacity: 1;
	visibility: visible;
}

.site-nav__list{
	display: flex;
	flex-direction: column;
	gap: 6px;
	list-style: none;
}

.site-nav__list a{
	display: inline-block;
	color: var(--l2t-ink);
	font-size: clamp(30px, 8vw, 42px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	text-decoration: none;
	transition: color .3s;
}

.site-nav__list a:hover,
.site-nav__list a[aria-current="page"]{ color: var(--l2t-pink); }

.site-nav__cta{
	order: 1;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 32px;
	padding: 15px 26px;
	border-radius: 999px;
	background: var(--l2t-ink);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .3s;
}

.site-nav__cta svg{
	width: 20px;
	height: auto;
	flex: 0 0 auto;
	transition: transform .3s;
}

.site-nav__cta:hover{ background: var(--l2t-pink); }
.site-nav__cta:hover svg{ transform: translateX(4px); }

.site-nav__social{
	order: 2;
	display: flex;
	gap: 16px;
	margin-top: auto;
	padding-top: 40px;
}

.site-nav__social a{
	display: block;
	width: 34px;
	height: 34px;
	background-color: var(--l2t-ink);
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	transition: background-color .3s, transform .3s;
}

.site-nav__social .instagram{
	-webkit-mask-image: url(images/icon-instagram.svg);
	mask-image: url(images/icon-instagram.svg);
}

.site-nav__social .facebook{
	-webkit-mask-image: url(images/icon-facebook.svg);
	mask-image: url(images/icon-facebook.svg);
}

.site-nav__social a:hover{
	background-color: var(--l2t-pink);
	transform: scale(1.08);
}

.site-header a:focus-visible,
.nav-toggle:focus-visible{
	outline: 2px solid var(--l2t-pink);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Header : desktop */
@media (min-width: 1000px){
	.site-header__logo img{ height: 58px; }

	.nav-toggle{ display: none; }

	.site-nav{
		position: static;
		flex-direction: row;
		align-items: center;
		gap: 36px;
		padding: 0;
		overflow: visible;
		background: none;
		opacity: 1;
		visibility: visible;
		transition: none;
	}

	.site-nav__list{
		flex-direction: row;
		align-items: center;
		gap: clamp(22px, 2.6vw, 40px);
	}

	.site-nav__list a{
		position: relative;
		padding: 6px 0;
		font-size: 15px;
		font-weight: 500;
		letter-spacing: 0;
	}

	.site-nav__list a::after{
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2px;
		background: var(--l2t-pink);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform .3s;
	}

	.site-nav__list a:hover,
	.site-nav__list a[aria-current="page"]{ color: var(--l2t-ink); }

	.site-nav__list a:hover::after,
	.site-nav__list a[aria-current="page"]::after{ transform: scaleX(1); }

	.site-nav__social{
		order: 0;
		gap: 12px;
		margin: 0;
		padding: 0;
	}

	.site-nav__social a{
		width: 24px;
		height: 24px;
	}

	.site-nav__cta{
		order: 0;
		margin: 0;
		padding: 12px 22px;
		font-size: 14px;
	}

	.site-nav__cta svg{ width: 18px; }
}


/* ---------------------------------------------------------------------
   Hero (page d'accueil)
   --------------------------------------------------------------------- */
.hero{
	padding: clamp(28px, 5vw, 72px) 0 clamp(40px, 6vw, 88px);
	overflow: hidden;
	text-align: center;
}

#home .hero .hero__title{
	max-width: 1400px;
	margin: 0 auto clamp(28px, 4.5vw, 64px);
	padding: 0 var(--l2t-gutter);
	color: var(--l2t-ink);
	font-family: 'Poppins', 'Poppins Fallback', sans-serif;
	font-size: clamp(2.4rem, 0.9rem + 6.4vw, 7rem);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.035em;
	text-align: center;
	text-wrap: balance;
}

.hero__heart{
	display: inline-block;
	width: auto;
	height: 0.74em;
	vertical-align: -0.04em;
	animation: l2t-heartbeat 3s ease-in-out infinite;
	transform-origin: center;
}

@keyframes l2t-heartbeat{
	0%, 40%, 100%{ transform: scale(1); }
	10%, 30%{ transform: scale(1.1); }
	20%{ transform: scale(.96); }
}

/* Slider : sans JavaScript, simple rangée centrée */
.hero__slider{
	--slide-w: clamp(124px, 15vw, 250px);
	position: relative;
	height: calc(var(--slide-w) * 1.5 * 1.45);
}

.hero__track{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: calc(var(--slide-w) * .08);
	height: 100%;
}

.hero__slide{
	flex: 0 0 var(--slide-w);
	width: var(--slide-w);
	aspect-ratio: 2 / 3;
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
	background: #F3F3F3;
}

.hero__slide img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
}

/* Fondu blanc sur les bords */
.hero__slider::before,
.hero__slider::after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: clamp(24px, 9vw, 160px);
	pointer-events: none;
}

.hero__slider::before{
	left: 0;
	background: linear-gradient(90deg, #fff 15%, rgba(255, 255, 255, 0));
}

.hero__slider::after{
	right: 0;
	background: linear-gradient(-90deg, #fff 15%, rgba(255, 255, 255, 0));
}

/* Slider : avec JavaScript (scripts/hero-slider.js) */
.hero__slider.is-ready .hero__track{
	display: block;
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}

.hero__slider.is-ready .hero__slide{
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: calc(var(--slide-w) * -.75);
	will-change: transform;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}


/* ---------------------------------------------------------------------
   Accueil : bloc « atelier » (texte révélé au défilement + photo à droite)
   --------------------------------------------------------------------- */
.atelier{ position: relative; }

.atelier__sticky{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 32px;
	padding: clamp(56px, 8vw, 120px) 0;
	box-sizing: border-box;
}

.atelier__text{ padding: 0 var(--l2t-gutter); }

#home .atelier__quote{
	max-width: 19em;
	margin: 0;
	color: var(--l2t-ink);
	font-size: clamp(1.75rem, 0.9rem + 3vw, 3.75rem);
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: -0.025em;
	text-wrap: pretty;
}

/* Mots : gris, puis noirs un à un (scripts/scroll-reveal.js) */
.reveal-word{ transition: color .35s; }
.is-animating .reveal-word{ color: #DADADA; }
.is-animating .reveal-word.is-revealed{ color: var(--l2t-ink); }

.atelier__photo{
	position: relative;
	margin: 0;
}

/* Bulle « Kim et Goran » posée sur la photo, pointe vers le duo.
   Position en % de la photo : réglée pour la photo entière (mobile)
   et pour le recadrage 5:4 (desktop). */
.atelier__bulle{
	--bulle-x: 59%;
	--bulle-y: 9%;
	position: absolute;
	left: min(var(--bulle-x), calc(100% - 150px));
	top: var(--bulle-y);
	z-index: 1;
	padding: 9px 16px;
	border-radius: 999px;
	background: #fff;
	color: var(--l2t-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 8px 24px rgba(10, 10, 10, .14);
	transform-origin: 14px 100%;
	transition: opacity .35s ease, transform .55s cubic-bezier(.34, 1.56, .64, 1);
}

.atelier__bulle::before{
	content: '';
	position: absolute;
	left: 14px;
	bottom: -5px;
	width: 12px;
	height: 12px;
	border-radius: 2px;
	background: #fff;
	transform: rotate(45deg);
}

/* Apparition pendant la révélation du texte (scripts/scroll-reveal.js) */
.is-animating .atelier__bulle{
	opacity: 0;
	transform: translateY(10px) scale(.85);
}

.is-animating .atelier__bulle.is-visible{
	opacity: 1;
	transform: none;
}

.atelier__photo img{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Épinglé en colonne (téléphone) : la photo ne prend jamais plus de 42 % de l'écran,
   pour que le texte reste toujours entièrement visible */
.atelier.is-animating .atelier__photo img{
	max-height: 42svh;
	object-position: 50% 10%; /* on garde les têtes (et la bulle) si la photo est raccourcie */
}

/* Épinglage pendant la révélation (seulement quand le script est actif) */
.atelier.is-animating{
	--reveal-distance: 700px;
	height: calc(100vh - var(--l2t-header-h) + var(--reveal-distance));
	height: calc(100svh - var(--l2t-header-h) + var(--reveal-distance));
}

.atelier.is-animating .atelier__sticky{
	position: sticky;
	top: var(--l2t-header-h);
	height: calc(100vh - var(--l2t-header-h));
	height: calc(100svh - var(--l2t-header-h));
	padding: 24px 0;
	overflow: hidden;
}

/* Écran trop bas (téléphone à l'horizontale) : pas d'épinglage */
@media (max-height: 520px){
	.atelier.is-animating{ height: auto; }
	.atelier.is-animating .atelier__sticky{
		position: relative;
		top: auto;
		height: auto;
		padding: 56px 0;
	}
}

@media (min-width: 700px){
	.atelier.is-animating{ --reveal-distance: 1000px; }

	.atelier__sticky{
		flex-direction: row;
		align-items: center;
		gap: 0;
	}

	.atelier__text{
		flex: 1 1 0;
		padding-left: max(var(--l2t-gutter), calc((100% - 1440px) / 2 + var(--l2t-gutter)));
		padding-right: clamp(32px, 5vw, 96px);
	}

	/* Photo collée au bord droit : 40 % de la largeur, au format de l'image (5:4)
	   pour ne rien rogner. Sur un écran peu haut, elle rétrécit au lieu d'être coupée. */
	.atelier__photo{
		flex: 0 0 auto;
		width: min(40%, calc((100vh - var(--l2t-header-h) - 96px) * 1.25));
	}

	.atelier__photo img,
	.atelier.is-animating .atelier__photo img{
		max-height: none;
		object-position: 50% 50%;
		aspect-ratio: 5 / 4;
		border-radius: 20px 0 0 20px;
	}

	.atelier__bulle{
		--bulle-x: 64%;
		--bulle-y: 10%;
		padding: 10px 18px;
		font-size: 15px;
	}
}


/* ---------------------------------------------------------------------
   Éléments communs : surtitres, titres de section, boutons
   --------------------------------------------------------------------- */
.section-head{
	max-width: 1440px;
	margin: 0 auto clamp(32px, 4vw, 56px);
	padding: 0 var(--l2t-gutter);
	box-sizing: border-box;
}

.section-head--row{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

h2.section-title{
	max-width: 18ch;
	margin: 0;
	color: var(--l2t-ink);
	font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 24px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .3s, color .3s, border-color .3s;
}

.btn__fleche{
	flex: 0 0 auto;
	width: 18px;
	height: auto;
	transition: transform .3s;
}

.btn:hover .btn__fleche{ transform: translateX(4px); }

.btn__icone{
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.btn--dark{ background: var(--l2t-ink); color: #fff; }
.btn--dark:hover{ background: var(--l2t-pink); }
.btn--pink{ background: var(--l2t-pink); color: #fff; }
.btn--pink:hover{ background: #C9066D; }
.btn--outline{ border-color: var(--l2t-ink); background: transparent; color: var(--l2t-ink); }
.btn--outline:hover{ background: var(--l2t-ink); color: #fff; }
.btn--light{ background: #fff; color: var(--l2t-ink); }
.btn--light:hover{ background: var(--l2t-pink); color: #fff; }

.btn:focus-visible{
	outline: 2px solid var(--l2t-pink);
	outline-offset: 3px;
}


/* ---------------------------------------------------------------------
   Accueil : le hero reste en place, la suite de la page passe par-dessus
   (--hero-top est calculé par scripts/site.js quand le hero dépasse l'écran)
   --------------------------------------------------------------------- */
#home .hero{
	position: sticky;
	top: var(--hero-top, var(--l2t-header-h));
	z-index: 0;
}

.home-content{
	position: relative;
	z-index: 1;
	background: #fff;
	box-shadow: 0 -30px 60px rgba(10, 10, 10, .06);
}

.home-content__sentinel{
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}


/* ---------------------------------------------------------------------
   Accueil : nos deux produits (cartes empilées)
   --------------------------------------------------------------------- */
.produits{ padding: clamp(80px, 10vw, 160px) 0 clamp(64px, 8vw, 120px); }

/* Titre plus large : 2 lignes équilibrées */
.produits h2.section-title{
	max-width: 30ch;
	text-wrap: balance;
}

.produits__list{
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--l2t-gutter);
	box-sizing: border-box;
}

.produit{
	display: grid;
	grid-template-columns: 1fr;
	overflow: hidden;
	border: 1px solid var(--l2t-line);
	border-radius: 24px;
	background: #fff;
}

.produit__photo{
	margin: 0;
	height: min(100vw - 2 * var(--l2t-gutter), 500px);
	background: #F3F3F3;
}

.produit__photo img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.produit__body{
	display: flex;
	flex-direction: column;
	padding: 28px 24px 32px;
}

.produit__top{
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.produit__badge{
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(235, 8, 128, .1);
	color: var(--l2t-pink);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

#home .produit__titre{
	margin: 0 0 14px;
	color: var(--l2t-ink);
	font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
}

#home .produit__texte{
	max-width: 52ch;
	margin: 0 0 28px;
	color: #4A4A4A;
	font-size: 17px;
	line-height: 1.6;
}

.produit__points{
	margin-bottom: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--l2t-line);
}

#home .produit__points-titre{
	margin: 0 0 4px;
	color: var(--l2t-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.produit__points ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.produit__points li{
	position: relative;
	padding: 12px 0 12px 34px;
	border-bottom: 1px solid var(--l2t-line);
	color: var(--l2t-ink);
	font-size: 16px;
	line-height: 1.45;
}

.produit__points li::before{
	content: '';
	position: absolute;
	left: 0;
	top: 12px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--l2t-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.produit__bas{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
}

#home .produit__prix{
	margin: 0;
	color: var(--l2t-ink);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

@media (min-width: 900px){
	.produits__list{ gap: 48px; }

	.produit{ grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }

	.produit__photo{ height: 100%; }

	.produit__body{ padding: clamp(32px, 4vw, 56px); }
}

/* Grand écran : fiche compacte en 3 colonnes (photo | présentation | « En bref ») */
@media (min-width: 1100px){
	.produit{ grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }

	.produit__body{
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto auto 1fr auto;
		grid-template-areas:
			"top points"
			"titre points"
			"texte points"
			"bas points";
		column-gap: clamp(32px, 4vw, 64px);
		padding: 40px clamp(32px, 3.5vw, 56px);
	}

	.produit__top{ grid-area: top; }
	#home .produit__titre{ grid-area: titre; font-size: clamp(1.8rem, 1rem + 1.4vw, 2.4rem); }
	#home .produit__texte{ grid-area: texte; margin-bottom: 24px; }
	.produit__bas{ grid-area: bas; }

	.produit__points{
		grid-area: points;
		margin: 0;
		padding-top: 0;
		border-top: 0;
	}

	.produit__points li{ padding-top: 10px; padding-bottom: 10px; font-size: 15px; }
	.produit__points li::before{ top: 10px; }
}

/* Empilement façon novaform : la fiche suivante glisse par-dessus la précédente,
   dont le haut reste visible ; les deux repartent ensemble à la fin */
@media (min-width: 1100px) and (min-height: 680px){
	.produits__list{ gap: 15vh; }

	.produit{
		position: sticky;
		top: calc(var(--l2t-header-h) + 24px);
		box-shadow: 0 -16px 48px rgba(10, 10, 10, .08);
	}

	.produit:not(:last-child){ margin-bottom: 72px; }
	.produit + .produit{ top: calc(var(--l2t-header-h) + 24px + 72px); }
}


/* ---------------------------------------------------------------------
   Accueil : FAQ (dégradé rose, grain, logo en filigrane, cartes vitrées)
   --------------------------------------------------------------------- */
.faq{
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(80px, 10vw, 160px) 0;
	background: linear-gradient(135deg, #EB0880 0%, #F2126F 45%, #FA2D56 100%);
	color: #fff;
}

/* Grain */
.faq::before{
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: .55;
	mix-blend-mode: soft-light;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	background-size: 180px 180px;
	pointer-events: none;
}

/* Logo en filigrane */
.faq::after{
	content: '';
	position: absolute;
	right: -6%;
	bottom: 0;
	z-index: -1;
	width: min(110vw, 1240px);
	aspect-ratio: 616.47 / 324.21;
	background: url(images/logo-dessin-blanc.svg) center bottom / contain no-repeat;
	opacity: .1;
	pointer-events: none;
}

.faq__inner{
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--l2t-gutter);
	box-sizing: border-box;
}

.faq__head{
	max-width: 720px;
	margin-bottom: clamp(32px, 4vw, 56px);
}

#home .faq__title{
	margin: 0 0 16px;
	color: #fff;
	font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.035em;
}

#home .faq__intro{
	margin: 0;
	color: rgba(255, 255, 255, .92);
	font-size: 17px;
	line-height: 1.6;
}

#home .faq__intro a,
#home .faq-card__a-inner a{
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Cartes : en rangées ; la carte ouverte s'élargit et ses voisines de rangée rétrécissent (façon swimtopia) */
.faq__grid{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 16px;
}

.faq-card{
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	overflow: hidden;
	border: 1.5px solid rgba(255, 255, 255, .35);
	border-radius: 24px;
	background: rgba(255, 255, 255, .1);
	box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .35), 0 12px 40px rgba(110, 0, 50, .18);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-sizing: border-box;
	transition: width .5s cubic-bezier(.4, 0, .2, 1), background-color .3s, border-color .3s;
}

.faq-card:hover{ background: rgba(255, 255, 255, .16); }

.faq-card.is-open{
	border-color: rgba(255, 255, 255, .6);
	background: rgba(255, 255, 255, .2);
}

#home .faq-card__q{ margin: 0; }

.faq-card__toggle{
	display: flex;
	align-items: flex-start;
	width: 100%;
	min-height: 0;
	padding: 22px 76px 22px 22px;
	border: 0;
	background: none;
	color: #fff;
	font-family: inherit;
	font-size: clamp(18px, 1rem + .4vw, 22px);
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	box-sizing: border-box;
}

/* Toute la carte est cliquable */
.faq-card__toggle::after{
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 22px;
}

.faq-card__toggle:focus-visible{ outline: none; }

.faq-card__toggle:focus-visible::after{
	outline: 2px solid #fff;
	outline-offset: -6px;
}

.faq-card__plus{
	position: absolute;
	right: 14px;
	top: 14px;
	width: 44px;
	height: 44px;
	border: 1.5px solid rgba(255, 255, 255, .75);
	border-radius: 50%;
	transition: background-color .3s, border-color .3s;
}

.faq-card__plus::before,
.faq-card__plus::after{
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background: #fff;
	transform: translate(-50%, -50%);
	transition: transform .4s, background-color .3s;
}

.faq-card__plus::after{ transform: translate(-50%, -50%) rotate(90deg); }

.faq-card.is-open .faq-card__plus{
	border-color: #fff;
	background: #fff;
}

.faq-card.is-open .faq-card__plus::before,
.faq-card.is-open .faq-card__plus::after{ background: var(--l2t-pink); }

.faq-card.is-open .faq-card__plus::after{ transform: translate(-50%, -50%) rotate(0); }

/* Réponses : visibles sans JavaScript ; avec (classe faq--js), affichées à l'ouverture en fondu */
.faq-card__a{
	position: relative;
	z-index: 1;
	padding-bottom: 24px;
}

.faq--js .faq-card__a{ display: none; }

.faq--js .faq-card.is-open .faq-card__a{
	display: block;
	animation: faq-reponse .45s .2s both;
}

@keyframes faq-reponse{
	from{ opacity: 0; transform: translateY(8px); }
	to{ opacity: 1; transform: none; }
}

.faq-card__a-inner > *{ margin: 0 22px 12px; }
.faq-card__a-inner > :last-child{ margin-bottom: 0; }

#home .faq-card__a-inner p,
#home .faq-card__a-inner li{
	color: rgba(255, 255, 255, .94);
	font-size: 16px;
	line-height: 1.6;
}

.faq-card__a-inner ol{ padding-left: 44px; }
.faq-card__a-inner li + li{ margin-top: 6px; }

/* Tablette : 2 par rangée (ouverte 60 % / voisine 40 %) */
@media (min-width: 700px){
	.faq__grid{ gap: 20px; }

	.faq-card{ width: calc((100% - 20px) / 2); min-height: 176px; }
	.faq-card.is-open{ width: calc((100% - 20px) * .6); }
	.faq-card.is-shrunk{ width: calc((100% - 20px) * .398); }

	.faq-card__toggle{
		padding: 28px 88px 20px 28px;
	}

	.faq-card__plus{ top: auto; right: 24px; bottom: 24px; }

	/* Largeur finale fixée : le texte ne bouge pas pendant l'élargissement */
	.faq--js .faq-card__a-inner{ width: calc((var(--faq-grille, 100%) - 20px) * .6 - 3px); }
	.faq-card__a-inner > *{ margin: 0 28px 12px; }
	.faq-card__a-inner > :last-child{ margin-bottom: 0; }
	.faq-card__a-inner ol{ padding-left: 48px; }
	.faq-card__a{ padding-bottom: 80px; }
}

/* Desktop : 3 par rangée (ouverte ~47 % / voisines ~26,5 %) */
@media (min-width: 1100px){
	.faq__grid{ gap: 24px; }

	.faq-card{ width: calc((100% - 48px) / 3); min-height: 200px; }
	.faq-card.is-open{ width: calc((100% - 48px) * .4685); }
	.faq-card.is-shrunk{ width: calc((100% - 48px) * .2655); }


	.faq--js .faq-card__a-inner{ width: calc((var(--faq-grille, 100%) - 48px) * .4685 - 3px); }
}


/* ---------------------------------------------------------------------
   Accueil : Instagram
   --------------------------------------------------------------------- */
.insta{ padding: clamp(80px, 10vw, 160px) 0; }

.insta__widget{
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--l2t-gutter);
	box-sizing: border-box;
}

.insta__widget iframe{
	display: block;
	border-radius: 20px;
}


/* ---------------------------------------------------------------------
   Accueil : avis Google (titre fixe, cartes inclinées qui défilent dessus)
   --------------------------------------------------------------------- */
.avis{
	position: relative;
	background: var(--l2t-ink);
	color: #fff;
}

.avis__sticky{
	position: sticky;
	top: var(--l2t-header-h);
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(100vh - var(--l2t-header-h));
	height: calc(100svh - var(--l2t-header-h));
	padding: 0 var(--l2t-gutter);
	box-sizing: border-box;
	text-align: center;
}

.avis__note{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	color: #fff;
	font-size: 16px;
	line-height: 1.4;
}

.avis__etoiles{
	color: var(--l2t-pink);
	font-size: 22px;
	letter-spacing: 2px;
}

#home .avis__titre{
	max-width: 12ch;
	margin: 0 auto 28px;
	color: #fff;
	font-size: clamp(2.5rem, 1.2rem + 4.6vw, 6rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
}

.avis__cartes{
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	max-width: 1440px;
	margin: 0 auto;
	margin-top: calc(-1 * (100vh - var(--l2t-header-h)));
	margin-top: calc(-1 * (100svh - var(--l2t-header-h)));
	padding: 75vh var(--l2t-gutter) calc(100vh - var(--l2t-header-h) + 25vh);
	padding-bottom: calc(100svh - var(--l2t-header-h) + 25svh);
	box-sizing: border-box;
	pointer-events: none;
}

.avis-carte{
	position: relative;
	align-self: start;
	justify-self: center;
	width: 100%;
	max-width: 420px;
	margin: 0;
	padding: 28px 28px 22px;
	border-radius: 6px;
	background: #fff;
	color: var(--l2t-ink);
	box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
	transform: rotate(var(--r, -3deg));
	box-sizing: border-box;
	pointer-events: auto;
}

.avis-carte:nth-child(3n+1){ --r: -5deg; }
.avis-carte:nth-child(3n+2){ --r: 4deg; }
.avis-carte:nth-child(3n){ --r: -2deg; }

.avis-carte__etoiles{
	margin-bottom: 14px;
	color: var(--l2t-pink);
	font-size: 18px;
	letter-spacing: 2px;
}

.avis-carte__texte{ margin: 0 0 18px; }

#home .avis-carte__texte p{
	margin: 0;
	color: var(--l2t-ink);
	font-size: 17px;
	line-height: 1.55;
}

.avis-carte__auteur{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	padding-top: 14px;
	border-top: 1px solid var(--l2t-line);
	font-size: 14px;
}

.avis-carte__nom{ font-weight: 600; }
.avis-carte__date{ color: var(--l2t-grey); }

.avis-carte--exemple{
	outline: 2px dashed var(--l2t-pink);
	outline-offset: 6px;
}

.avis-carte--exemple::before{
	content: 'Exemple';
	position: absolute;
	top: -14px;
	right: 16px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--l2t-pink);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}

.avis__exemple-info{
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin: 0 auto;
	padding: 0 var(--l2t-gutter) 64px;
	color: rgba(255, 255, 255, .7);
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

@media (min-width: 900px){
	.avis__cartes{
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10vh 5vw;
	}

	.avis-carte:nth-child(3n+2){ margin-top: 22vh; }
	.avis-carte:nth-child(3n){ margin-top: 8vh; }
}

/* Téléphone et tablette (cartes l'une sous l'autre) : seulement les 6 avis les plus récents
   (le tableau $avis_google est trié du plus récent au plus ancien). Grand écran : tous les avis. */
@media (max-width: 899.98px){
	.avis-carte:nth-child(n+7){ display: none; }
}


.btn--petit{
	padding: 10px 18px;
	font-size: 14px;
}

.btn--contour-clair{
	border-color: rgba(255, 255, 255, .6);
	background: transparent;
	color: #fff;
}

.btn--contour-clair:hover{
	border-color: #fff;
	background: #fff;
	color: var(--l2t-ink);
}

a[href^="tel:"]{ white-space: nowrap; }


/* ---------------------------------------------------------------------
   Boutons fixes en bas à gauche (toutes les pages)
   --------------------------------------------------------------------- */
.actions-rapides{
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 8px;
}

.actions-rapides__cta,
.actions-rapides__tel{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 52px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 10px 30px rgba(10, 10, 10, .18);
	transition: transform .3s, background-color .3s, color .3s;
}

.actions-rapides__cta{
	padding: 0 24px;
	background: var(--l2t-pink);
	color: #fff;
}

.actions-rapides__cta:hover{
	background: #C9066D;
	transform: translateY(-2px);
}

.actions-rapides__tel{
	justify-content: center;
	width: 52px;
	background: #fff;
	color: var(--l2t-ink);
}

.actions-rapides__tel svg{
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.actions-rapides__tel:hover{
	transform: translateY(-2px);
	color: var(--l2t-pink);
}

.actions-rapides__num{ display: none; }

.actions-rapides a:focus-visible{
	outline: 2px solid var(--l2t-ink);
	outline-offset: 3px;
}

@media (min-width: 700px){
	.actions-rapides{
		left: 24px;
		bottom: 24px;
		gap: 10px;
	}

	.actions-rapides__cta{ height: 56px; padding: 0 28px; font-size: 16px; }
	.actions-rapides__tel{ width: auto; height: 56px; padding: 0 22px 0 18px; }
	.actions-rapides__num{ display: inline; }
}

/* Mobile : la bannière cookies prend la place des boutons le temps du choix */
@media (max-width: 699px){
	.cookies-visibles .actions-rapides{ display: none; }
}

/* Espace pour ne pas masquer le bas du footer */
.site-footer__bas{ padding-bottom: 104px; }



/* ---------------------------------------------------------------------
   Pop-up « Personnaliser mon tapis » (fr/scripts/demande.php)
   --------------------------------------------------------------------- */
html.demande-ouverte{ overflow: hidden; }

.demande{
	width: min(760px, calc(100% - 24px));
	max-width: none;
	max-height: calc(100dvh - 24px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 24px;
	background: #fff;
	color: var(--l2t-ink);
	box-shadow: 0 40px 120px rgba(10, 10, 10, .35);
	overflow: hidden;
}

.demande::backdrop{
	background: rgba(10, 10, 10, .55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.demande[open]{ animation: demande-entree .35s cubic-bezier(.2, .8, .2, 1); }

@keyframes demande-entree{
	from{ opacity: 0; transform: translateY(24px) scale(.98); }
	to{ opacity: 1; transform: none; }
}

.demande__form{
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - 24px);
	font-family: 'Poppins', 'Poppins Fallback', sans-serif;
}

.demande__entete{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 24px 16px;
}

.demande p.demande__etape{
	margin: 0 0 4px;
	color: var(--l2t-pink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.demande h2.demande__titre{
	margin: 0;
	color: var(--l2t-ink);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.025em;
}

.demande p.demande__promesse{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 12px 0 0;
	color: var(--l2t-ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}

.demande__gratuit{
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--l2t-pink);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .01em;
}

.demande__delai{
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.demande__delai svg{
	width: 18px;
	height: 18px;
	color: var(--l2t-pink);
}

.demande__fermer{
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--l2t-line);
	border-radius: 50%;
	background: #fff;
	color: var(--l2t-ink);
	cursor: pointer;
	transition: background-color .3s;
}

.demande__fermer svg{ width: 20px; height: 20px; }
.demande__fermer:hover{ background: #F4F4F4; }

.demande__progression{
	height: 3px;
	margin: 0 24px;
	border-radius: 3px;
	background: var(--l2t-line);
	overflow: hidden;
}

.demande__progression span{
	display: block;
	width: 33.33%;
	height: 100%;
	background: var(--l2t-pink);
	transition: width .4s ease;
}

.demande__corps{
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 24px;
	overscroll-behavior: contain;
}

.demande fieldset{
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.demande legend{ padding: 0; }

.demande fieldset.champ{ margin-bottom: 18px; }

.demande legend.demande__question{
	margin-bottom: 20px;
	color: var(--l2t-ink);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

/* Cartes de choix (étape 1) */
.demande__choix{
	display: grid;
	gap: 12px;
}

.choix{
	position: relative;
	display: block;
	cursor: pointer;
}

.choix input{
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.choix__carte{
	display: block;
	padding: 18px 20px 18px 56px;
	border: 1.5px solid var(--l2t-line);
	border-radius: 16px;
	transition: border-color .25s, background-color .25s;
	position: relative;
}

.choix__carte::before{
	content: '';
	position: absolute;
	left: 20px;
	top: 21px;
	width: 20px;
	height: 20px;
	border: 1.5px solid #BDBDBD;
	border-radius: 50%;
	box-sizing: border-box;
	transition: border-color .25s, box-shadow .25s;
}

.choix:hover .choix__carte{ border-color: #CFCFCF; }

.choix input:checked + .choix__carte{
	border-color: var(--l2t-pink);
	background: rgba(235, 8, 128, .05);
}

.choix input:checked + .choix__carte::before{
	border-color: var(--l2t-pink);
	box-shadow: inset 0 0 0 5px var(--l2t-pink);
}

.choix input:focus-visible + .choix__carte{
	outline: 2px solid var(--l2t-pink);
	outline-offset: 2px;
}

.choix__titre{
	display: block;
	margin-bottom: 4px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

.choix__texte{
	display: block;
	color: var(--l2t-grey);
	font-size: 15px;
	line-height: 1.45;
}

/* Champs */
.champ{ margin-bottom: 18px; }

.demande .champ__label{
	display: block;
	margin-bottom: 8px;
	color: var(--l2t-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}


.champ__input{
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1.5px solid #DADADA;
	border-radius: 12px;
	background: #fff;
	color: var(--l2t-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	box-sizing: border-box;
	transition: border-color .2s, box-shadow .2s;
}

select.champ__input{
	padding-right: 40px;
	-webkit-appearance: none;
	appearance: none;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 18px no-repeat;
}

textarea.champ__input{ min-height: 96px; resize: vertical; }

.champ__input::placeholder{ color: #9A9A9A; }

.champ__input:focus{
	border-color: var(--l2t-ink);
	outline: none;
	box-shadow: 0 0 0 3px rgba(10, 10, 10, .08);
}

.champs-2{
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 16px;
}

@media (min-width: 640px){
	.champs-2{ grid-template-columns: 1fr 1fr; }
}

/* Pastilles (choix courts) */
.pastilles{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pastille{
	position: relative;
	cursor: pointer;
}

.pastille input{
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pastille span{
	display: inline-block;
	padding: 10px 16px;
	border: 1.5px solid #DADADA;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	transition: border-color .2s, background-color .2s, color .2s;
}

.pastille:hover span{ border-color: #BDBDBD; }

.pastille input:checked + span{
	border-color: var(--l2t-ink);
	background: var(--l2t-ink);
	color: #fff;
}

.pastille input:focus-visible + span{
	outline: 2px solid var(--l2t-pink);
	outline-offset: 2px;
}

/* Case à cocher */
.case{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 4px 0 20px;
	padding: 14px 16px;
	border-radius: 12px;
	background: #F7F7F7;
	font-size: 15px;
	line-height: 1.45;
	cursor: pointer;
}

.case[hidden]{ display: none; }

.case input{
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--l2t-pink);
}

/* Dépôt de fichiers */
.depot{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 20px;
	border: 1.5px dashed #CFCFCF;
	border-radius: 16px;
	text-align: center;
	cursor: pointer;
	transition: border-color .2s, background-color .2s;
}

.depot input{
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.depot:hover,
.depot.is-survol{
	border-color: var(--l2t-pink);
	background: rgba(235, 8, 128, .04);
}

.depot:focus-within{
	outline: 2px solid var(--l2t-pink);
	outline-offset: 2px;
}

.depot.is-chargement{ opacity: .6; cursor: progress; }
.depot.is-chargement .depot__texte::after{ content: ' (préparation…)'; }

.depot.is-plein{
	opacity: .5;
	pointer-events: none;
}

.depot__texte{ font-size: 15px; line-height: 1.4; }
.depot__texte strong{ color: var(--l2t-pink); }
.depot__aide{ color: var(--l2t-grey); font-size: 13px; line-height: 1.4; }

.fichiers{
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.fichiers__item{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 8px 8px 14px;
	border-radius: 10px;
	background: #F7F7F7;
	font-size: 14px;
	line-height: 1.4;
}

.fichiers__item + .fichiers__item{ margin-top: 6px; }

.fichiers__nom{
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fichiers__suppr{
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--l2t-ink);
	cursor: pointer;
}

.fichiers__suppr svg{ width: 16px; height: 16px; }
.fichiers__suppr:hover{ background: #E9E9E9; }

/* Anti-spam : champ piège hors écran */
.demande__piege{
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.demande p.demande__aide{
	margin: -8px 0 18px;
	color: var(--l2t-grey);
	font-size: 14px;
	line-height: 1.5;
}

/* « Je ne suis pas sûr » : bascule vers la version simplifiée */
.pas-sur{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin: -4px 0 22px;
	padding: 12px 12px 12px 16px;
	border-radius: 14px;
	background: rgba(235, 8, 128, .07);
}

.demande .pas-sur p{
	margin: 0;
	color: var(--l2t-ink);
	font-size: 15px;
	line-height: 1.4;
}

.pas-sur__btn{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1.5px solid var(--l2t-pink);
	border-radius: 999px;
	background: #fff;
	color: var(--l2t-pink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .3s, color .3s;
}

.pas-sur__btn svg{ width: 16px; height: auto; }

.pas-sur__btn:hover{
	background: var(--l2t-pink);
	color: #fff;
}

.pas-sur__btn:focus-visible{
	outline: 2px solid var(--l2t-pink);
	outline-offset: 3px;
}

.demande__erreur{
	margin-top: 16px;
	padding: 12px 16px;
	border-radius: 12px;
	background: #FDECEF;
	color: #A3002F;
	font-size: 14px;
	line-height: 1.5;
}

.demande__actions{
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 16px 24px 24px;
	border-top: 1px solid var(--l2t-line);
}

.demande__actions[hidden],
.demande__actions [hidden]{ display: none; }

.demande__actions [data-prev]{ margin-right: auto; }

.demande__actions .btn:disabled{ opacity: .6; cursor: wait; }

/* Confirmation */
.demande__merci{
	padding: 24px 0 8px;
	text-align: center;
	outline: none;
}

.demande__merci-icone{
	display: inline-grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--l2t-pink);
	color: #fff;
}

.demande__merci-icone svg{ width: 30px; height: 30px; }

.demande h3.demande__merci-titre{
	margin: 0 0 10px;
	color: var(--l2t-ink);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

.demande__merci p{
	max-width: 44ch;
	margin: 0 auto 24px;
	color: #4A4A4A;
	font-size: 16px;
	line-height: 1.6;
}

@media (min-width: 640px){
	.demande__entete{ padding: 32px 36px 20px; }
	.demande__progression{ margin: 0 36px; }
	.demande__corps{ padding: 28px 36px; }
	.demande__actions{ padding: 20px 36px 28px; }
}


/* ---------------------------------------------------------------------
   Bande « Votre projet » avant le footer (toutes les pages)
   --------------------------------------------------------------------- */
.cta-final{
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	background: var(--l2t-ink);
	color: #fff;
}

.cta-final__texte{
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(64px, 9vw, 140px) var(--l2t-gutter);
}

h2.cta-final__titre{
	max-width: 14ch;
	margin: 0 0 20px;
	color: #fff;
	font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.5rem);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.035em;
}

p.cta-final__intro{
	max-width: 46ch;
	margin: 0 0 32px;
	color: rgba(255, 255, 255, .8);
	font-size: 18px;
	line-height: 1.6;
}

.cta-final__boutons{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.cta-final__photo{
	margin: 0;
	height: min(125vw, 500px);
}

.cta-final__photo img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 92%;
}

@media (min-width: 900px){
	.cta-final{ grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }

	.cta-final__texte{
		padding-left: max(var(--l2t-gutter), calc((100vw - 1440px) / 2 + var(--l2t-gutter)));
		padding-right: clamp(32px, 5vw, 96px);
	}

	.cta-final__photo{
		position: relative;
		height: auto;
		min-height: min(820px, 88vh);
	}

	/* La photo (portrait) remplit la colonne sans en dicter la hauteur */
	.cta-final__photo img{
		position: absolute;
		inset: 0;
	}
}


/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-footer{
	position: relative;
	z-index: 1;
	background: #141414;
	color: rgba(255, 255, 255, .75);
	font-size: 15px;
	line-height: 1.7;
}

.site-footer a{
	color: #fff;
	text-decoration: none;
	transition: color .3s;
}

.site-footer a:hover{ color: var(--l2t-pink); }

.site-footer__inner{
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 64px var(--l2t-gutter) 48px;
	box-sizing: border-box;
}

.site-footer__logo img{
	display: block;
	width: 72px;
	height: auto;
	margin-bottom: 20px;
}

.site-footer p{
	margin: 0;
	color: rgba(255, 255, 255, .75);
	font-size: 15px;
	line-height: 1.7;
}

.site-footer__marque p{ max-width: 32ch; }

.site-footer p.site-footer__titre{
	margin-bottom: 12px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.site-footer ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer address{ font-style: normal; }

.site-footer__rdv{
	display: inline-block;
	margin-bottom: 4px;
	color: rgba(255, 255, 255, .55);
	font-size: 14px;
	font-style: italic;
}

.site-footer__reseaux{
	display: flex;
	gap: 12px;
}

.site-footer a.reseau{
	position: relative;
	display: block;
	width: 48px;
	height: 48px;
	border: 1.5px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
	box-sizing: border-box;
	transition: background-color .3s, border-color .3s;
}

.reseau::before{
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 22px;
	height: 22px;
	background-color: #fff;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
}

.reseau--instagram::before{
	-webkit-mask-image: url(images/icon-instagram.svg);
	mask-image: url(images/icon-instagram.svg);
}

.reseau--facebook::before{
	-webkit-mask-image: url(images/icon-facebook.svg);
	mask-image: url(images/icon-facebook.svg);
}

.site-footer a.reseau:hover,
.site-footer a.reseau:focus-visible{
	border-color: var(--l2t-pink);
	background-color: var(--l2t-pink);
}

.site-footer__bas{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	max-width: 1440px;
	margin: 0 auto;
	padding-top: 24px;
	padding-left: var(--l2t-gutter);
	padding-right: var(--l2t-gutter);
	border-top: 1px solid rgba(255, 255, 255, .12);
	box-sizing: border-box;
}

.site-footer__bas p{ font-size: 13px; }

.site-footer__lien-bouton{
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font: inherit;
	cursor: pointer;
}

.site-footer__lien-bouton:hover{ color: var(--l2t-pink); }

@media (min-width: 900px){
	.site-footer__inner{
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		padding-top: 88px;
		padding-bottom: 64px;
	}
}


/* ---------------------------------------------------------------------
   Bannière cookies (scripts/consent.js)
   --------------------------------------------------------------------- */
.cookies{
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 95;
	padding: 20px;
	border-radius: 20px;
	background: #fff;
	color: var(--l2t-ink);
	box-shadow: 0 20px 60px rgba(10, 10, 10, .25);
}

.cookies[hidden]{ display: none; }

p.cookies__titre{
	margin: 0 0 6px;
	color: var(--l2t-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

p.cookies__texte{
	margin: 0 0 16px;
	color: #4A4A4A;
	font-size: 14px;
	line-height: 1.5;
}

.cookies__texte a{ color: inherit; text-decoration: underline; }

.cookies__boutons{
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

@media (min-width: 700px){
	.cookies{
		left: auto;
		right: 24px;
		bottom: 24px;
		width: 380px;
	}
}


/* ---------------------------------------------------------------------
   Pages intérieures : en-tête de page, texte courant
   --------------------------------------------------------------------- */
.page-tete{
	max-width: 1440px;
	margin: 0 auto;
	padding: clamp(40px, 7vw, 112px) var(--l2t-gutter) clamp(32px, 4vw, 56px);
	box-sizing: border-box;
}

h1.page-tete__titre{
	max-width: 20ch;
	margin: 0;
	color: var(--l2t-ink);
	font-size: clamp(2.2rem, 1.2rem + 3.6vw, 5rem);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.035em;
}

p.page-tete__intro{
	max-width: 56ch;
	margin: 20px 0 0;
	color: #4A4A4A;
	font-size: 18px;
	line-height: 1.6;
}

p.page-tete__meta{
	margin: 20px 0 0;
	color: var(--l2t-grey);
	font-size: 15px;
	line-height: 1.5;
}

.page-tete__retour{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 24px;
	color: var(--l2t-ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.page-tete__retour svg{ width: 18px; height: auto; transition: transform .3s; }
.page-tete__retour:hover svg{ transform: translateX(-4px); }

.prose{
	max-width: 760px;
	margin: 0 auto;
	padding: 0 var(--l2t-gutter) clamp(64px, 8vw, 120px);
	box-sizing: content-box;
	color: #2B2B2B;
	font-size: 17px;
	line-height: 1.75;
}

.prose p,
.prose li{
	margin: 0 0 1.1em;
	color: #2B2B2B;
	font-size: 17px;
	line-height: 1.75;
}

.prose h2{
	margin: 2em 0 .6em;
	color: var(--l2t-ink);
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.prose h3{
	margin: 1.6em 0 .5em;
	color: var(--l2t-ink);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
}

.prose a{
	color: var(--l2t-pink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.prose ul,
.prose ol{ margin: 0 0 1.1em; padding-left: 1.4em; }

.prose img{ max-width: 100%; height: auto; border-radius: 12px; }

.lien-fleche{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--l2t-ink);
	font-size: 15px;
	font-weight: 600;
}

.lien-fleche svg{ width: 18px; height: auto; transition: transform .3s; }


/* ---------------------------------------------------------------------
   Blog : article à la une + grille
   --------------------------------------------------------------------- */
.blog{ padding-bottom: clamp(64px, 8vw, 120px); }

.blog__vide{
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--l2t-gutter);
}

.blog-une{
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	max-width: 1440px;
	margin: 0 auto clamp(48px, 6vw, 96px);
	padding: 0 var(--l2t-gutter);
	box-sizing: border-box;
	color: inherit;
	text-decoration: none;
}

.blog-une__photo{
	margin: 0;
	overflow: hidden;
	border-radius: 24px;
	aspect-ratio: 4 / 3;
	background: #F3F3F3;
}

.blog-une__photo img,
.blog-carte__photo img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.blog-une:hover .blog-une__photo img,
.blog-carte:hover .blog-carte__photo img{ transform: scale(1.03); }

.blog-une:hover .lien-fleche svg,
.blog-carte:hover .lien-fleche svg{ transform: translateX(4px); }

.blog-une__texte{
	display: flex;
	flex-direction: column;
	justify-content: center;
}


h2.blog-une__titre{
	margin: 0 0 16px;
	color: var(--l2t-ink);
	font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

p.blog-une__resume{
	margin: 0 0 24px;
	color: #4A4A4A;
	font-size: 17px;
	line-height: 1.6;
}

.blog-grille{
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px 24px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--l2t-gutter);
	box-sizing: border-box;
}

.blog-carte{
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.blog-carte__photo{
	margin: 0 0 16px;
	overflow: hidden;
	border-radius: 20px;
	aspect-ratio: 4 / 3;
	background: #F3F3F3;
}


.blog-carte__titre,
h2.blog-carte__titre{
	margin: 0 0 12px;
	color: var(--l2t-ink);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

@media (min-width: 700px){
	.blog-grille{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px){
	.blog-une{
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		gap: clamp(32px, 4vw, 72px);
	}

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


/* ---------------------------------------------------------------------
   Article
   --------------------------------------------------------------------- */
.page-tete--article{ max-width: 1100px; }

.article__photo{
	max-width: 1100px;
	margin: 0 auto clamp(40px, 5vw, 72px);
	padding: 0 var(--l2t-gutter);
	box-sizing: border-box;
}

.article__photo img{
	display: block;
	width: 100%;
	height: auto;
	max-height: 80vh;
	object-fit: cover;
	border-radius: 24px;
}

.article__contenu{ padding-bottom: 32px; }

.article__galerie{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	max-width: 760px;
	margin: 0 auto 56px;
	padding: 0 var(--l2t-gutter);
	box-sizing: content-box;
}

.article__galerie a{
	display: block;
	overflow: hidden;
	border-radius: 14px;
	aspect-ratio: 1 / 1;
}

.article__galerie img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s;
}

.article__galerie a:hover img{ transform: scale(1.05); }

.article__cta{
	max-width: 760px;
	margin: 0 auto clamp(64px, 8vw, 112px);
	padding: 32px;
	border-radius: 24px;
	background: linear-gradient(135deg, #EB0880 0%, #FA2D56 100%);
	color: #fff;
	box-sizing: border-box;
}

@media (max-width: 820px){
	.article__cta{ margin-left: var(--l2t-gutter); margin-right: var(--l2t-gutter); }
}

p.article__cta-titre{
	margin: 0 0 6px;
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

.article__cta p{
	margin: 0 0 20px;
	color: rgba(255, 255, 255, .9);
	font-size: 16px;
	line-height: 1.5;
}

.article__cta .btn--pink{ background: #fff; color: var(--l2t-ink); }
.article__cta .btn--pink:hover{ background: var(--l2t-ink); color: #fff; }

.article__autres{ padding-bottom: clamp(64px, 8vw, 120px); }

h2.article__autres-titre{
	max-width: 1440px;
	margin: 0 auto 32px;
	padding: 0 var(--l2t-gutter);
	box-sizing: border-box;
	color: var(--l2t-ink);
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
}


/* ---------------------------------------------------------------------
   Mentions légales
   --------------------------------------------------------------------- */
.infos-legales{
	display: grid;
	grid-template-columns: 1fr;
	margin: 0 0 32px;
	border-top: 1px solid var(--l2t-line);
}

.infos-legales dt{
	padding-top: 14px;
	color: var(--l2t-grey);
	font-size: 14px;
}

.infos-legales dd{
	margin: 0;
	padding: 2px 0 14px;
	border-bottom: 1px solid var(--l2t-line);
	color: var(--l2t-ink);
	font-weight: 500;
}

@media (min-width: 640px){
	.infos-legales{ grid-template-columns: 220px 1fr; }
	.infos-legales dt,
	.infos-legales dd{ padding: 14px 0; border-bottom: 1px solid var(--l2t-line); }
}


/* ---------------------------------------------------------------------
   Page 404
   --------------------------------------------------------------------- */
.page-404{
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 40px;
	max-width: 1440px;
	margin: 0 auto;
	padding: clamp(40px, 7vw, 112px) var(--l2t-gutter) clamp(64px, 8vw, 120px);
	box-sizing: border-box;
}

.page-404__boutons{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

.page-404__photo{
	margin: 0;
	overflow: hidden;
	border-radius: 24px;
	aspect-ratio: 4 / 5;
	max-height: 70vh;
}

.page-404__photo img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 900px){
	.page-404{ grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}


/* ---------------------------------------------------------------------
   Mouvements réduits
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
	.hero__heart{ animation: none; }
	.site-nav,
	.nav-toggle__bar,
	.site-nav__cta svg,
	.reveal-word,
	.atelier__bulle,
	.btn,
	.btn__fleche,
	.faq-card,
	.faq-card__plus,
	.faq-card__plus::before,
	.faq-card__plus::after,
	.actions-rapides a,
	.demande__progression span{ transition: none; }
	.demande[open],
	.faq--js .faq-card.is-open .faq-card__a{ animation: none; }
}