@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');


:root{
	--noir:#202321;
	--blanc:#fffdf9;
	--creme:#f7f3ed;
	--texte:#262a27;
	--gris:#69716c;
	--ligne:#d9d7d0;

	--rose:#f0dfe1;
	--sauge:#F1F3E0;
	--bleu:#dbe7ee;
	--lavande:#e5e0ef;

	--accent:#927fa8;

	--rayon:18px;
	--ombre:0 18px 50px rgba(32,35,33,.1);
}


/* =========================
   BASE
========================= */

*{
    box-sizing:border-box;
}

html,
body{
	max-width:100%;
	overflow-x:hidden;
}

html{
	scroll-behavior:smooth;
	scroll-padding-top:76px;
}

body{
	margin:0;
	background:var(--blanc);
	color:var(--texte);
	font:15px/1.6 "DM Sans",sans-serif;
}

img{
	max-width:100%;
	height:auto;
	display:block;
}

button,
input,
textarea{
	font:inherit;
}

h1,
h2,
h3,
.logo{
	font-family:Manrope,sans-serif;
}

h1{
	font-size:clamp(46px,7vw,92px);
	line-height:.98;
	letter-spacing:-.055em;
	margin:0 0 28px;
}

h2{
	font-size:clamp(38px,5vw,66px);
	line-height:1.02;
	letter-spacing:-.045em;
	margin:0 0 24px;
}

h3{
	font-size:21px;
	line-height:1.2;
}

a{
	color:inherit;
}

.conteneur{
	width:min(1160px,calc(100% - 40px));
	margin:auto;
}


/* =========================
   STRUCTURES COMMUNES
========================= */

.navigation_interne,
.menu,
.hero_chapitre,
.actions,
.repere_methode{
	display:flex;
	align-items:center;
}

.tarif,
.carte_methode,
.vignette_projet{
	display:flex;
	flex-direction:column;
}

.hero,
.grille,
.parcours_methode,
.book,
.groupe_projet,
.faq,
.liste_questions,
.projet,
.rassurance,
.formulaire,
.formulaire_entete,
.champ,
.choix_methode,
.option_methode{
	display:grid;
}

.pied_interne,
.pied_bas{
	display:flex;
}


/* =========================
   NAVIGATION
========================= */

.navigation{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:1000;
	background:rgba(255,253,249,.9);
	backdrop-filter:blur(14px);
	-webkit-backdrop-filter:blur(14px);
	border-bottom:1px solid rgba(32,35,33,.08);
}

.navigation_interne{
	height:76px;
	justify-content:space-between;
}

.logo{
	font-size:20px;
	font-weight:800;
	color:var(--noir);
	text-decoration:none;
}

.logo span,
h1 span,
h2 span,
.projet span{
	color:var(--accent);
}

.menu{
	gap:28px;
}

.menu a,
.lien{
	color:var(--texte);
	text-decoration:none;
	font-weight:600;
	font-size:14px;
}

.menu_cta{
	padding:11px 16px;
	border-radius:999px;
	background:var(--noir);
	color:#fff !important;
}

.menu_bouton{
	display:none;
	border:0;
	background:none;
	padding:10px;
	cursor:pointer;
}


/* =========================
   SECTIONS
========================= */

.chapitre{
	padding:115px 0;
}

.hero_chapitre{
	min-height:calc(100vh - 76px);
	background:var(--creme);
}

.hero{
	grid-template-columns:1fr .9fr;
	gap:70px;
	align-items:center;
}

.intro{
	max-width:570px;
	margin-bottom:34px;
	font-size:19px;
	color:var(--gris);
}

.eyebrow{
	margin-bottom:20px;
	text-transform:uppercase;
	font-size:11px;
	font-weight:700;
	letter-spacing:.14em;
	color:var(--gris);
}

.entete_section{
	max-width:780px;
	margin-bottom:55px;
}

.entete_section > p:last-child{
	max-width:620px;
	font-size:17px;
	color:var(--gris);
}


/* =========================
   BOUTONS
========================= */

.actions{
	gap:10px;
	flex-wrap:wrap;
}

.bouton{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:14px;
	padding:14px 20px;
	border:0;
	border-radius:999px;
	text-decoration:none;
	font:600 14px "DM Sans",sans-serif;
	cursor:pointer;
}

.bouton_noir{
	background:var(--noir);
	color:#fff;
}

/* =========================
   MOCKUP HERO
========================= */

.hero_mockup{
	padding:24px;
}

.hero_carrousel{
	position:relative;
	width:100%;
	aspect-ratio:1.15;
	padding:0;
	overflow:hidden;
	background:#fff;
	border:1px solid var(--ligne);
	border-radius:8px;
	box-shadow:0 0 15px 5px rgba(0,0,0,.2);
	transform:rotate(1.5deg);
	cursor:pointer;
	transition:transform .3s ease,box-shadow .3s ease;
}

.hero_carrousel:hover{
	transform:rotate(1.5deg) scale(.985);
	box-shadow:0 24px 60px rgba(32,35,33,.16);
}

.hero_carrousel:focus-visible{
	outline:3px solid var(--noir);
	outline-offset:5px;
}

.hero_indication{
	right:16px;
	bottom:16px;
	padding:8px 12px;
	background:rgba(32,35,33,.84);
	font:700 10px Manrope,sans-serif;
	letter-spacing:.03em;
}

.vignette_projet,
.carrousel_projet,
.hero_carrousel{
	-webkit-tap-highlight-color:transparent;
	-webkit-user-select:none;
	user-select:none;
	touch-action:pan-y;
}

.carrousel_projet img,
.hero_carrousel img{
	width:100%;
	height:100%;
	object-fit:cover;
	pointer-events:none;
	-webkit-user-drag:none;
	user-select:none;
}

.image_glissement{
	position:absolute;
	inset:0;
	transition:transform .38s cubic-bezier(.22,.61,.36,1),opacity .3s ease;
	will-change:transform,opacity;
}

.image_sortante{
	z-index:1;
}

.glissement_sortie_gauche,
.glissement_entree_gauche{
	transform:translateX(-100%);
	opacity:0;
}

.glissement_sortie_droite,
.glissement_entree_droite{
	transform:translateX(100%);
	opacity:0;
}

.hero_indication,
.indicateur_projet{
	position:absolute;
	border-radius:999px;
	color:#fff;
	z-index:2;
}

.carrousel_projet:focus:not(:focus-visible),
.hero_carrousel:focus:not(:focus-visible){
	outline:none;
}

/* =========================
   COULEURS
========================= */

.rose{
	background:var(--rose);
}

.sauge{
	background:var(--sauge);
}

.bleu{
	background:var(--bleu);
}

.lavande{
	background:var(--lavande);
}

.noir{
	background:var(--noir);
	color:#fff;
}


/* =========================
   GRILLES / CARTES
========================= */

.grille{
	gap:18px;
}


.deux{
	grid-template-columns:repeat(2,1fr);
}

.trois{
	grid-template-columns:repeat(3,1fr);
}

.carte{
	position: relative;
	padding:30px;
	background:rgba(255,255,255,.55);
	border:1px solid rgba(32,35,33,.08);
	border-radius:var(--rayon);
}

.carte > b{
	display:block;
	margin-bottom:45px;
	font-size:11px;
	color:var(--gris);
}


/* =========================
   TARIFS
========================= */

.tarifs{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:18px;
}

.tarif{
	position:relative;
	min-height:500px;
	padding:32px;
	background:rgba(255,255,255,.62);
	border:1px solid rgba(32,35,33,.1);
	border-radius:var(--rayon);
}

.vedette{
	background:#fff;
	box-shadow:var(--ombre);
	transform:translateY(-8px);
}

.tarif_type{
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:.12em;
	font-weight:700;
}

.tarif h3{
	font-size:28px;
}

.tarif h3 strong{
	display:block;
	font-size:42px;
	letter-spacing:-.04em;
}

.tarif ul{
	flex:1;
	list-style:none;
	padding:15px 0;
	margin:10px 0 30px;
	border-top:1px solid var(--ligne);
}

.tarif li{
	padding:8px 0;
}

.tarif li::before{
	content:"✓";
	margin-right:10px;
	color:var(--accent);
}

.tarif > p{
	color:var(--gris);
}

.badge{
	position:absolute;
	top:20px;
	right:20px;
	padding:6px 10px;
	border-radius:99px;
	background:var(--accent);
	font-size:9px;
	text-transform:uppercase;
	font-weight:700;
	color: white;
}


/* =========================
   METHODE
========================= */

.methode_entete{
	max-width:900px;
}

.parcours_methode{
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:16px;
	margin-bottom:35px;
}

.carte_methode{
	position:relative;
	min-height:465px;
	padding:26px;
	border:1px solid rgba(32,35,33,.1);
	border-radius:var(--rayon);
	background:rgba(255,255,255,.7);
	box-shadow:0 12px 35px rgba(32,35,33,.06);
	transition:transform .3s ease,box-shadow .3s ease;
}

.carte_methode.apparition.visible:hover{
	transform:translateY(-8px);
	box-shadow:0 20px 45px rgba(32,35,33,.12);
}

.repere_methode{
	justify-content:space-between;
	gap:12px;
	margin-bottom:48px;
}

.numero_methode{
	width:46px;
	height:46px;
	display:grid;
	place-items:center;
	border-radius:50%;
	background:var(--noir);
	color:#fff;
	font:700 12px Manrope,sans-serif;
}

.moment_methode{
	padding:6px 9px;
	border:1px solid rgba(32,35,33,.15);
	border-radius:999px;
	font-size:9px;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
}

.carte_methode h3{
	margin:0 0 18px;
	font-size:clamp(23px,2.2vw,31px);
	letter-spacing:-.045em;
}

.carte_methode > p{
	margin:0;
	color:var(--gris);
}

.carte_methode_active{
	background:var(--noir);
	color:#fff;
	box-shadow:0 18px 45px rgba(32,35,33,.2);
}

.carte_methode_active .numero_methode{
	background:#fff;
	color:var(--noir);
}

.carte_methode_active .moment_methode{
	border-color:#4b514d;
}

.carte_methode_active > p{
	color:#b9c0bc;
}

.choix_methode{
	gap:8px;
	margin-top:auto;
	padding-top:24px;
}

.option_methode{
	grid-template-columns:25px 1fr;
	gap:8px;
	align-items:center;
	padding:10px;
	border-radius:10px;
	background:rgba(32,35,33,.06);
}

.option_methode b{
	font:700 9px Manrope,sans-serif;
	color:var(--gris);
}

.option_methode span{
	font-size:11px;
	font-weight:600;
}


/* =========================
   PROJETS / MOCKUPS
========================= */

.book{
	gap:42px;
}

.groupe_projet{
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:22px;
}

.vignette_projet{
	appearance:none;
	min-height:390px;
	justify-content:space-between;
	padding:30px;
	border:0;
	border-radius:var(--rayon);
	font:inherit;
	text-align:left;
	text-decoration:none;
	color:var(--noir);
	transition:.3s;
	cursor:pointer;
	overflow:hidden;
}

.vignette_projet:hover{
	transform:translateY(-5px) scale(.98);
	box-shadow:var(--ombre);
}

.vignette_projet:focus-visible{
	outline:3px solid var(--noir);
	outline-offset:4px;
}

.vignette_projet strong{
	font:700 clamp(30px,4vw,52px)/.96 Manrope,sans-serif;
	letter-spacing:-.05em;
}

.vignette_projet small,
.vignette_projet span{
	font-size:11px;
}

.vignette_projet b{
	align-self:flex-end;
	font-size:11px;
}

.carrousel_projet{
	position:relative;
	padding:0;
}

.indicateur_projet{
	right:18px;
	bottom:18px;
	padding:7px 10px;
	background:rgba(32,35,33,.82);
	font:700 11px Manrope,sans-serif;
	letter-spacing:.04em;
}

.sante{
	background:#e9ddd4;
}

.sante strong{
	color:#6b4c3e;
}

.coach{
	background:#cfded5;
}

.coach strong{
	color:#28483c;
}

.restau{
	background:#e2e2dc;
}

.restau strong{
	color:#30332f;
}

.artisan{
	background:#ead3bf;
}

.artisan strong{
	color:#71452f;
}

.yoga{
	background:#d7e1ed;
}

.yoga strong{
	color:#344b65;
}

.shop{
	background:#ddd5e7;
}

.shop strong{
	color:#59436b;
}


/* =========================
   QUESTIONS FREQUENTES
========================= */

.faq{
	grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
	gap:70px;
	align-items:start;
}

.faq_entete{
	margin-bottom:0;
}

.liste_questions{
	gap:12px;
}

.question_faq{
	overflow:hidden;
	border:1px solid rgba(32,35,33,.12);
	border-radius:var(--rayon);
	background:rgba(255,255,255,.55);
	transition:background .25s ease,box-shadow .25s ease;
}

.question_faq[open]{
	background:#fff;
	box-shadow:0 12px 35px rgba(32,35,33,.08);
}

.question_faq summary{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	padding:22px 24px;
	list-style:none;
	font:700 17px/1.35 Manrope,sans-serif;
	cursor:pointer;
}

.question_faq summary::-webkit-details-marker{
	display:none;
}

.question_faq summary::marker{
	content:"";
}

.question_faq summary::after{
	content:"+";
	flex:0 0 32px;
	width:32px;
	height:32px;
	display:grid;
	place-items:center;
	border-radius:50%;
	background:var(--noir);
	color:#fff;
	font-size:20px;
	line-height:1;
	transition:transform .25s ease;
}

.question_faq[open] summary::after{
	transform:rotate(45deg);
}

.reponse_faq{
	padding:0 76px 22px 24px;
	color:var(--gris);
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.reponse_faq p{
	margin:0;
}


/* =========================
   CONTACT
========================= */

.projet{
	grid-template-columns:1fr .9fr;
	gap:90px;
	align-items:center;
}

.projet_intro{
	padding:20px 0;
}

.projet_intro h2{
	font-size:clamp(42px,5vw,72px);
	margin-bottom:30px;
}

.projet_texte{
	max-width:520px;
	font-size:18px;
	line-height:1.65;
	color:#aeb4b0;
}


/* RASSURANCE */

.projet_rassurance{
	max-width:520px;
	margin-top:55px;
	border-top:1px solid #353a37;
}

.rassurance{
	grid-template-columns:45px 1fr;
	gap:15px;
	padding:20px 0;
	border-bottom:1px solid #353a37;
}

.rassurance > span{
	font:700 11px Manrope,sans-serif;
	color:#777f7a;
}

.rassurance strong{
	display:block;
	margin-bottom:3px;
	font-size:14px;
	color:#fff;
}

.rassurance p{
	margin:0;
	font-size:13px;
	color:#858d88;
}


/* FORMULAIRE */

.formulaire{
	gap:20px;
	padding:36px;
	background:#222623;
	border:1px solid #353a37;
	border-radius:var(--rayon);
	box-shadow:0 25px 60px rgba(0,0,0,.2);
}

.formulaire_entete{
	gap:5px;
	margin-bottom:8px;
}

.formulaire_entete strong{
	font:700 24px Manrope,sans-serif;
	color:#fff;
	letter-spacing:-.03em;
}

.formulaire_entete span{
	font-size:13px;
	color:#858d88;
}


/* CHAMPS */

.champ{
	gap:7px;
}

.champ label{
	font-size:12px;
	font-weight:600;
	color:#dfe3e0;
}

.champ label span{
	font-weight:400;
	color:#777f7a;
}

.champ input,
.champ textarea{
	width:100%;
	padding:10px 0;
	border:0;
	border-bottom:1px solid #555c58;
	outline:0;
	background:transparent;
	color:#fff;
	font:15px "DM Sans",sans-serif;
	resize:vertical;
	transition:border-color .2s;
}

.champ textarea{
	min-height:120px;
}

.champ input::placeholder,
.champ textarea::placeholder{
	color:#69716c;
}

.champ input:focus,
.champ textarea:focus{
	border-color:#fff;
}


/* BOUTON CONTACT */

.bouton_contact{
	width:100%;
	margin-top:8px;
	padding:17px 22px;
	background:#fff;
	color:var(--noir);
	transition:.25s;
}

.bouton_contact:hover{
	transform:translateY(-2px);
	box-shadow:0 10px 30px rgba(0,0,0,.2);
}

.bouton_contact span{
	font-size:17px;
}

.formulaire_note{
	margin:0;
	text-align:center;
	font-size:11px;
	color:#69716c;
}


/* =========================
   PIED DE PAGE
========================= */

.pied{
	padding:60px 0 25px;
	background:#171a18;
	color:#aeb4b0;
}

.pied_interne{
	align-items:start;
	justify-content:space-between;
	gap:30px;
}

.pied_interne p{
	max-width:420px;
}

.pied a{
	color:#fff;
	text-decoration:none;
}

.pied_bas{
	justify-content:space-between;
	gap:20px;
	margin-top:50px;
	padding-top:20px;
	border-top:1px solid #353a37;
	font-size:11px;
}


/* =========================
   ANIMATIONS
========================= */

.apparition{
	opacity:0;
	transform:translateY(20px);
	transition:
		opacity .65s ease,
		transform .65s ease;
}

.apparition.visible{
	opacity:1;
	transform:none;
}

@media(prefers-reduced-motion:reduce){

	html{
		scroll-behavior:auto;
	}

	.apparition{
		opacity:1;
		transform:none;
		transition:none;
	}

	.vignette_projet,
	.carte_methode,
	.question_faq,
	.question_faq summary::after,
	.image_glissement{
		transition:none;
	}
}

@media(max-width:1050px){

	.carte_methode{
		min-height:390px;
	}
}


/* =========================
   MOBILE
========================= */

@media(max-width:800px){

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

	.conteneur{
		width:min(100% - 30px,600px);
	}

	.navigation_interne{
		height:68px;
	}

	.menu_bouton{
		display:grid;
		gap:5px;
		z-index:1002;
	}

	.menu_bouton span{
		display:block;
		width:24px;
		border-top:2px solid var(--noir);
		transition:.25s;
	}

	.menu{
		position:fixed;
		top:0;
		right:0;
		width:min(86vw,350px);
		height:100dvh;

		background:var(--blanc);
		padding:95px 30px 30px;

		flex-direction:column;
		justify-content:center;
		gap:8px;

		transform:translateX(100%);
		visibility:hidden;
		opacity:0;
		pointer-events:none;

		transition:
			transform .3s ease,
			opacity .3s ease,
			visibility 0s linear .3s;

		box-shadow:-20px 0 50px rgba(0,0,0,.1);
	}

	.menu a{
		padding:12px 16px;
		font-size:18px;
	}

	.menu.ouvert{
		transform:translateX(0);
		visibility:visible;
		opacity:1;
		pointer-events:auto;

		transition:
			transform .3s ease,
			opacity .3s ease,
			visibility 0s;
	}

	.menu_bouton[aria-expanded="true"] span:first-child{
		transform:translateY(3.5px) rotate(45deg);
	}

	.menu_bouton[aria-expanded="true"] span:last-child{
		transform:translateY(-3.5px) rotate(-45deg);
	}

	.hero,
	.deux,
	.trois,
	.tarifs,
	.faq,
	.projet,
	.groupe_projet,
	.parcours_methode{
		grid-template-columns:1fr;
	}

	.hero{
		gap:35px;
	}

	.faq{
		gap:35px;
	}

	.faq_entete{
		margin-bottom:0;
	}

	.question_faq summary{
		padding:19px 18px;
		font-size:16px;
	}

	.reponse_faq{
		padding:0 68px 20px 18px;
	}

	.vedette{
		transform:none;
	}

	.vignette_projet{
		min-height:330px;
		max-height:330px;
	}

	.tarif,
	.carte_methode{
		min-height:auto;
	}

	.repere_methode{
		margin-bottom:34px;
	}

	.pied_interne,
	.pied_bas{
		display:grid;
	}
}






/* CONFIRMATION */

.page-confirmation {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.confirmation-page {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 0 70px;
    background: var(--blanc-casse);
}

.confirmation-contenu {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.confirmation-symbole {
    width: 58px;
    height: 58px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lavande);
    color: var(--accent);
    font-size: 1.4rem;
    font-weight: 700;
}

.confirmation-contenu h1 {
    margin: 18px 0;
}

.confirmation-contenu h1 span {
    color: var(--accent);
}

.confirmation-contenu p {
    max-width: 600px;
    margin: 0 auto;
    color: var(--texte-secondaire);
    line-height: 1.8;
}

.confirmation-redirection {
    margin: 30px 0;
    color: var(--texte-secondaire);
    font-size: 0.8rem;
}

.confirmation-redirection strong {
    color: var(--accent);
}

.confirmation-contenu .bouton-contact {
    display: inline-flex;
}


/* RESPONSIVE */

@media (max-width: 767px) {

    .confirmation-page {
        padding: 110px 20px 50px;
    }

    .confirmation-contenu h1 {
        font-size: 1.8rem;
    }

    .confirmation-contenu p {
        font-size: 0.9rem;
    }

}