/* ===========================================================
   Chan'beaute - mini-site (Faceasit)
   Refonte : contenu piloté par JSON, mêmes codes visuels et
   même esprit d'animation que l'ancien site (anime.js), rejoués
   ici en CSS + JS léger (mêmes durées/easings que l'original).
   =========================================================== */

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

:root {
	--color-text: #000;
	--color-bg-main: #fff;
	--color-menu-item: #fff;
	--color-menu-item-hover: #C90F50;
	--color-bg-menu: rgba(0,120,190,0.96);
	--color-bg-expander: #007ABC;
	--color-text-expander: #fff;
	--color-bg-img: #000;
	--color-bg-more-1: #fee9b1;
	--color-bg-more-2: #e0f3ca;
	--color-bg-more-3: #f3cae8;
	--color-bg-more-4: #cacaf3;
	--color-nav: #007ABC;
	--color-nav-hover: #990033;
	--color-link: #000;
	--color-link-hover: #C90F50;

	/* easings/durées reprises telles quelles de l'ancien cbesquemas.js (anime.js) */
	--ease-fluid: cubic-bezier(0.8,0,0.2,1);      /* image / more / title / expander / factsItems */
	--ease-out-expo: cubic-bezier(0.19,1,0.22,1); /* description */
	--ease-snappy: cubic-bezier(0.2,1,0.3,1);     /* menu */
	--ease-inout-quad: cubic-bezier(0.455,0.03,0.515,0.955); /* pagination */
}

html, body { margin: 0; padding: 0; }

body {
	font-family: "Montserrat", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--color-text);
	background: var(--color-bg-main);
	overflow-x: hidden;
}

a { text-decoration: none; color: var(--color-link); }
a:hover, a:focus { color: var(--color-link-hover); }

button {
	border: 0;
	background: none;
	margin: 0;
	padding:0 8px 0 8px;
	font-family: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	color: inherit;
}
button:focus-visible { outline: 2px solid var(--color-bg-expander); outline-offset: 2px; }

.hidden { position: absolute; overflow: hidden; width: 0; height: 0; pointer-events: none; }

.icon { display: inline-block; width: 1.75rem; height: 1.75rem; fill: currentColor; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ---------------- Header ---------------- */
.sections__header {padding: 1.5rem 4.5rem 0 1.5rem;}
.title {
	margin: 0;
	font-size: 2.15rem !important;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--color-menu-item-hover);
}

/* ---------------- Menu burger ---------------- */
.menu__toggle {
	position: fixed;
	top: 1.4rem;
	right: 1.4rem;
	z-index: 3200;
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	cursor: pointer;
	color: var(--color-bg-expander);
	pointer-events: auto;
}
.menu--open .menu__toggle { color: #fff; }
.menu__toggle-inner { grid-area: 1 / 1; transition: opacity .3s var(--ease-snappy); }
.menu__toggle-inner--close { opacity: 0; }
.menu--open .menu__toggle-inner--open { opacity: 0; }
.menu--open .menu__toggle-inner--close { opacity: 1; }

.menu {
	position: fixed;
	inset: 0;
	z-index: 3000;
	pointer-events: none;
	display: flex;
	align-items: center;
}
.menu::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--color-bg-menu);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s var(--ease-snappy), visibility .3s var(--ease-snappy);
	z-index: -1;
}
.menu--open::before { opacity: 1; visibility: visible; }
.menu__inner {
	list-style: none;
	margin: 0;
	padding: 6rem 2rem 2rem;
	width: 100%;
	visibility: hidden;
	pointer-events: none;
	transition: visibility .3s;
}
.menu--open .menu__inner {
	visibility: visible;
	pointer-events: auto;
}
.menu__intro-logo {
	display: block;
	max-width:480px;
	margin: 0 0 1.5rem;
}
.menu__intro {
	color: rgba(255,255,255,0.9);
	font-weight: 300;
	line-height: 1.6;
	max-width: 34rem;
	margin: 0 0 2rem;
	opacity: 0;
	transform: translateX(5%);
	transition: opacity .3s var(--ease-snappy), transform .3s var(--ease-snappy);
}
.menu--open .menu__intro { opacity: 1; transform: translateX(0); }
.menu__item {
	margin: 0 0 1.5rem;
	opacity: 0;
	transform: translateX(5%);
	transition: opacity .3s var(--ease-snappy), transform .3s var(--ease-snappy);
}
.menu--open .menu__item { opacity: 1; transform: translateX(0); }
.menu__item-link {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-menu-item);
}
.menu__item-link:hover { color: var(--color-menu-item-hover); }

/* ---------------- Modals (menu burger) ---------------- */
.md-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,122,188,0.76);
	opacity: 0;
	visibility: hidden;
	z-index: 4000;
	transition: opacity .3s var(--ease-snappy);
}
.md-overlay.is-open { opacity: 1; visibility: visible; }

.md-modal {
	position: fixed;
	top: 0;
	right: 0;
	width: min(560px, 100%);
	height: 100%;
	background: #fff;
	z-index: 4100;
	visibility: hidden;
	transform: translateX(4%);
	opacity: 0;
	transition: transform .5s var(--ease-fluid), opacity .35s var(--ease-snappy), visibility .5s;
	display: flex;
	flex-direction: column;
}
.md-modal.md-show { visibility: visible; transform: translateX(0); opacity: 1; }

.md-top {
	position: relative;
	padding: 1.75rem 3.5rem 1.25rem 1.5rem;
	border-bottom: 2px solid var(--color-menu-item-hover);
	flex: 0 0 auto;
}
.md-top-logo { max-width: 70px; display: block; margin: 0 0 0.75rem; }
.md-top h3 {
	margin: 0;
	color: var(--color-bg-expander);
	text-transform: uppercase;
	font-weight: 700;
	font-size: 1.15rem;
}
.md-close {
	position: absolute;
	top: 1.4rem;
	right: 1rem;
	color: var(--color-bg-expander);
	width: 2.25rem;
	height: 2.25rem;
}
.md-close:hover { color: var(--color-menu-item-hover); }
.md-content {
	padding: 1.5rem;
	overflow-y: auto;
	flex: 1 1 auto;
	line-height: 1.65;
	font-weight: 300;
}
.md-content h4 {
	color: var(--color-bg-expander);
	text-transform: uppercase;
	margin: 1.5rem 0 0.5rem;
}
.md-content a { color: var(--color-menu-item-hover); font-weight: 400; }
.md-liens { margin: 0.5rem 0 0; padding: 0 0 0 1.1rem; }
.md-liens li { margin: 0 0 0.6rem; }

/* ---------------- Navigation des sections ---------------- */
.sections__index {
	position: fixed;
	top: 1.6rem;
	left: 1.5rem;
	z-index: 20;
	color: var(--color-bg-expander);
	font-size: 0.75rem;
	display: flex;
	align-items: center;
	letter-spacing: 1px;
}
.sections__index-current {
	position: relative;
	overflow: hidden;
	display: inline-block;
}
.sections__index-inner { display: block; }
.sections__index-total { margin-left: 0.5rem; opacity: 0.55; }
.sections__index-total::before { content: '/'; margin-right: 0.5rem; }
.sections__nav {
	position: fixed;
	right: 1.4rem;
	bottom: 1.6rem;
	z-index: 99;
	display: flex;
	gap: 0.6rem;
}
.sections__nav-item {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	border: 2px solid var(--color-nav);
	background: var(--color-bg-main);
	display: grid;
	place-items: center;
	color: var(--color-nav);
	transition: border-color .3s var(--ease-snappy), color .3s var(--ease-snappy), transform .3s var(--ease-snappy);
}
.sections__nav-item:hover { border-color: var(--color-nav-hover); color: var(--color-nav-hover); transform: scale(1.06); }
.sections__nav-item .icon {
	width: 2.7rem;
	height: 4.3rem;
}

/* ---------------- Sections (mobile first : empilé) ---------------- */
.sections { position: relative; }

.section { display: none; }
.section--current { display: block; }

/* Réapparition en cascade des éléments de la section active,
   mêmes durées/délais/easings que l'ancien site (anime.js). */
@keyframes cbRise {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes cbImageReveal {
	from { opacity: 0; transform: scale(1.06); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes cbContentRise {
	from { opacity: 0; transform: translateY(42px); }
	to   { opacity: 1; transform: translateY(0); }
}
/* le bloc de contenu entier arrive en glissant depuis le bas à chaque
   changement de section (clic nav, swipe, flèches clavier) */
.section--current .section__content {
	animation: cbContentRise .7s var(--ease-fluid) both;
}
.section--current .section__eyebrow,
.section--current .section__title,
.section--current .section__subtitle,
.section--current .section__description,
.section--current .section__more {
	animation: cbRise .8s var(--ease-fluid) both;
}
.section--current .section__eyebrow   { animation-duration: .6s; animation-delay: .05s; }
.section--current .section__title     { animation-duration: .6s; animation-delay: .2s; }
.section--current .section__subtitle  { animation-duration: .6s; animation-delay: .3s; }
.section--current .section__description {
	animation-duration: .8s;
	animation-delay: .4s;
	animation-timing-function: var(--ease-out-expo);
}
.section--current .section__more { animation-duration: .8s; animation-delay: .35s; }
.section--current .section__img-inner { animation: cbImageReveal .8s var(--ease-fluid) both; }

.section__content { padding: 4.5rem 1.5rem 0; }

.section__eyebrow {
	display: block;
	font-size: 0.7rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-bg-expander);
	margin: 0 0 0.5rem;
}

.section__title {
	margin: 0 0 0.75rem;
	font-size: 1.9rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1.1;
}

.section__subtitle {
	font-weight: 300;
	font-style: italic;
	margin: 0 0 1rem;
	color: #555;
}

.section__description { margin: 0; }
.section__description-inner {
	display: block;
	font-weight: 300;
	line-height: 1.75;
}

.section__img {
	margin: 1.75rem 0 0;
	height: 42vh;
	min-height: 220px;
	overflow: hidden;
}
.section__img-inner {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: 50% 50%;
	background-color: var(--color-bg-img);
}

.section__more { padding: 0; margin: 1.75rem 1.5rem 0; }
.section__more-inner {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.5rem;
	border-radius: 4px;
	color: var(--color-text);
}
.section__more-inner--bg1 { background: var(--color-bg-more-1); }
.section__more-inner--bg2 { background: var(--color-bg-more-2); }
.section__more-inner--bg3 { background: var(--color-bg-more-3); }
.section__more-inner--bg4 { background: var(--color-bg-more-4); }
.section__more-text { font-weight: 700; }
.section__more-link { display: flex; align-items: center; gap: 0.5rem; font-weight: 300; }
.icon--arrowlong { width: 1.8rem; height: 1rem; }

/* ---------------- Expander (titres des blocs) + panneau blocs ----------------
   Reprend le principe de l'ancien .section__expander : un bandeau bleu
   ancré sur toute la largeur de la colonne image, dont le panneau des
   fiches (.section__blocks) surgit en glissant (translateY), avec les
   mêmes durée/easing que l'ancien "expander" (700ms, cubic(0.8,0,0.2,1)). */
.section__expander {
	display: block;
	width: 100%;
	text-align: left;
	margin: 1.75rem 0 0;
	padding: 1.5rem;
	background: var(--color-bg-expander);
	color: var(--color-text-expander);
	max-height: 14rem;
	overflow: hidden;
	transition: max-height .55s var(--ease-fluid), opacity .45s var(--ease-fluid),
		padding-top .55s var(--ease-fluid), padding-bottom .55s var(--ease-fluid),
		transform .55s var(--ease-fluid);
}
/* une fois ouvert, le bandeau glisse vers le bas et disparait :
   c'est le bouton rond (X) du panneau qui referme désormais */
.section__expander[aria-expanded="true"] {
	max-height: 0;
	opacity: 0;
	padding-top: 0;
	padding-bottom: 0;
	transform: translateY(14px);
	pointer-events: none;
}
.section__expander-icon {
	display: inline-flex;
	width: 1.6rem;
	height: 1.6rem;
	margin: 0 0.6rem 0 0;
	vertical-align: middle;
}
.section__expander-label {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 1.5px;
	vertical-align: middle;
}

.section__expander-titles {
	list-style: none;
	margin: 1rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid rgba(255,255,255,0.35);
	font-weight: 300;
}
.section__expander-titles li {
	margin: 0 0 0.5rem;
	padding-left: 1.1rem;
	position: relative;
}
.section__expander-titles li::before {
	content: '—';
	position: absolute;
	left: 0;
}

.section__blocks {
	position: relative;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height .7s var(--ease-fluid), opacity .5s var(--ease-fluid);
	background: #f4f8fb;
}
.section__blocks.is-open {
	max-height: 4000px;
	opacity: 1;
}
.section__blocks-inner { padding: 0.5rem 1.5rem; }

.section__blocks-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: 2px solid var(--color-bg-expander);
	background: #fff;
	color: var(--color-bg-expander);
	display: grid;
	place-items: center;
	z-index: 5;
	opacity: 0;
	transform: scale(0.7);
	transition: opacity .3s var(--ease-snappy) .15s, transform .3s var(--ease-snappy) .15s,
		border-color .25s var(--ease-snappy), color .25s var(--ease-snappy);
}
.section__blocks.is-open .section__blocks-close { opacity: 1; transform: scale(1); }
.section__blocks-close:hover { border-color: var(--color-menu-item-hover); color: var(--color-menu-item-hover); }
.section__blocks-close .icon { width: 1.1rem; height: 1.1rem; }

.section__block {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	align-items: flex-start;
	padding: 1.75rem 0;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .5s var(--ease-fluid), transform .5s var(--ease-fluid);
}
.section__blocks.is-open .section__block { opacity: 1; transform: translateY(0); }
.section__block + .section__block { border-top: 1px solid rgba(0,0,0,0.08); }

.section__block-img {
	flex: 0 0 auto;
	width: 120px;
}
.section__block-img img {
	display: block;
	width: 100%;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.section__block-content { flex: 1 1 220px; min-width: 0; }
.section__block-title {
	margin: 0 0 0.4rem;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--color-bg-expander);
}
.section__block-text { font-weight: 300; line-height: 1.65; font-size: 0.95rem; }
.section__block-link {
	display: inline-block;
	margin-top: 0.6rem;
	font-weight: 700;
	color: var(--color-menu-item-hover);
}

/* ===========================================================
   Ecrans larges (tablette paysage / desktop) : mise en page
   2 colonnes proche de l'originale, section en plein écran.
   =========================================================== */
@media screen and (min-width: 60em) {

	.sections { position: relative; height: 100vh; overflow: hidden; }
	.sections__header {
		padding: 2rem 3rem 0 3rem;
		background: #FFFFFFC7;
		position: absolute;
		z-index: 99;
		width: 43%;
	}
	.title { font-size: 1.6rem; }

	/* burger ancré en haut à droite de .section__content (comme l'original :
	   right = largeur de la colonne image, soit ici 56%) */
	.menu__toggle { top: 2rem; right: calc(56% + 1.5rem); }

	.section {
		position: absolute;
		inset: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .5s var(--ease-fluid), visibility .5s var(--ease-fluid);
	}
	.section--current {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.section__content {
		position: absolute;
		top: 0; left: 0; bottom: 0;
		width: 44%;
		padding: 7rem 3rem 8rem 3rem;
		overflow-y: auto;
	}
	.section__title { font-size: 2.6rem; }

	.section__description-inner { max-width: 32rem; }

	.section__img {
		position: absolute;
		top: 0; right: 0; bottom: 0;
		left: 44%;
		width: 56%;
		height: 100%;
		margin: 0;
	}

	.section__more {
		position: absolute;
		left: 3rem;
		bottom: 2rem;
		width: calc(44% - 6rem);
		margin: 0;
	}

	/* bandeau ancré sur toute la largeur de la colonne image (comme
	   l'ancien .section__expander, qui couvrait toute cette zone) */
	.section__expander {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 44%;
		width:25%;
		margin: 0;
		padding: 1.35rem 3rem;
		z-index: 30;
	}

	/* le panneau des fiches surgit en glissant depuis le bas, sur toute
	   la hauteur/largeur de la colonne image (translateY, comme l'original) */
	.section__blocks {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		left: 44%;
		width: 56%;
		max-height: none;
		height: 100%;
		overflow-y: auto;
		opacity: 1;
		transform: translateY(100%);
		transition: transform .7s var(--ease-fluid);
	}
	.section__blocks.is-open { transform: translateY(0); }
	.section__blocks-inner { padding: 6rem 3rem 3rem; }
	.sections__nav {
		right: 2.5rem;
		bottom: 0.5rem;
		left: 60%;
	}
	.sections__index { top: 2.2rem; left: 3rem; font-size: 0.85rem; }
}

@media screen and (min-width: 60em) and (max-height: 44em) {
	.section__content { padding-top: 5.5rem; }
}