/*
	Diététique Plénitude — styles personnalisés
	(hors template Hyperspace, garde ce fichier séparé de main.css)
*/

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500&family=Outfit:wght@200;300;400&display=swap');

/* ─── RESET ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── LOGO INTRO ────────────────────────────────── */
.intro-logo-link {
	display: block;
	text-align: center;
	border: none;
	margin: 0 auto 1.5rem;
}

.intro-logo-img {
	width: 100%;
	max-width: 300px;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* ─── SECTION WRAPPER (citation) ────────────────── */
.parcours-section {
	max-width: 720px;
	margin: 0 auto;
	padding: 4rem 2.5rem;
	background: #faf8f5;
}

/* ─── CITATION HIPPOCRATE ───────────────────────── */
.citation-wrap {
	position: relative;
	padding: 1.8rem 2rem 1.8rem 3rem;
	border-left: 2px solid #a4c8b0;
	margin-bottom: 2.8rem;
}

.citation-guillemet {
	position: absolute;
	top: -14px;
	left: 16px;
	font-family: 'Cormorant Garamond', serif;
	font-size: 90px;
	color: #82bc96;
	opacity: .15;
	line-height: 1;
	pointer-events: none;
	user-select: none;
}

.citation-texte {
	font-family: 'Dancing Script', cursive;
	font-size: clamp(1.25rem, 3vw, 1.6rem);
	font-weight: 500;
	color: #9ac4a9;
	line-height: 1.6;
	letter-spacing: .01em;
	margin-bottom: .75rem;

	/* Effet machine à écrire */
	overflow: hidden;
	white-space: nowrap;
	width: 0;
	animation: ecriture 2.8s steps(60, end) .3s forwards;
}

@keyframes ecriture {
	from { width: 0; opacity: 0; }
	3%   { opacity: 1; }
	to   { width: 100%; }
}

.citation-auteur {
	font-family: 'Jost', sans-serif;
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #c6ffd7;
	opacity: 0;
	animation: fadeup .6s ease .5s forwards;
}

/* ─── SÉPARATEUR ────────────────────────────────── */
.separateur {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 2rem 0 2.2rem;
	opacity: 0;
	animation: fadeup .6s ease 3.2s forwards;
}

.separateur::before,
.separateur::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, transparent, #b5d4bb, transparent);
}

.separateur-icon {
	font-size: 13px;
	color: #2D5A3D;
	opacity: .45;
}

/* ─── PARAGRAPHES (parcours) ────────────────────── */
.parcours-body p {
	font-size: clamp(1rem, 2.2vw, 1.15rem);
	line-height: 1.95;
	color: #ffffff;
	margin-bottom: 1.1rem;
	opacity: 0;
}

.parcours-body p em {
	font-style: italic;
	color: #d2f2dd;
}

.parcours-body p:nth-child(1) { animation: fadeup .7s ease 3.4s forwards; }
.parcours-body p:nth-child(2) { animation: fadeup .7s ease 3.75s forwards; }
.parcours-body p:nth-child(3) { animation: fadeup .7s ease 4.1s forwards; }
.parcours-body p:nth-child(4) { animation: fadeup .7s ease 4.45s forwards; }
.parcours-body p:nth-child(5) { animation: fadeup .7s ease 4.8s forwards; }

/* ─── CONCLUSION MANUSCRITE ─────────────────────── */
.conclusion {
	font-family: 'Dancing Script', cursive;
	font-size: clamp(1.2rem, 2.8vw, 1.4rem);
	font-weight: 500;
	color: #b9efcc;
	text-align: center;
	line-height: 1.75;
	margin-top: 2rem;
	opacity: 0;
	animation: fadeup .9s ease 5.2s forwards;
}

/* ─── ANIMATION COMMUNE ─────────────────────────── */
@keyframes fadeup {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ─── RESPONSIVE ────────────────────────────────── */
@media (max-width: 480px) {
	.parcours-section { padding: 2.5rem 1.25rem; }
	.citation-texte   { white-space: normal; width: auto; animation: fadein 1s ease .3s both; }
	@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
}

/* ── OVERRIDE SECTION HERO ───────────────────────── */
#intro.wrapper {
	font-family: 'Outfit', sans-serif !important;
	position: relative;
	overflow: hidden;
}

/* ── INNER ───────────────────────────────────────── */
#intro .inner {
	position: relative;
	z-index: 1;
	max-width: 800px !important;
	text-align: center;
}

/* ── H1 ──────────────────────────────────────────── */
#intro .inner h1 {
	font-family: 'Zen Kaku Gothic New', sans-serif !important;
	font-weight: 300 !important;
	font-size: clamp(2.2rem, 5.5vw, 3.2rem) !important;
	line-height: 1.25 !important;
	color: #f5f0e8 !important;
	letter-spacing: -.01em !important;
	margin-bottom: 1.2rem !important;
	border: none !important;
	opacity: 0;
	animation: dp-up .7s ease .2s forwards;
}

/* ── H2 — nom / titre ────────────────────────────── */
#intro .inner h2 {
	font-family: 'Outfit', sans-serif !important;
	font-weight: 200 !important;
	font-size: clamp(1rem, 2vw, 1.2rem) !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: rgb(195, 238, 208) !important;
	margin-bottom: 1.8rem !important;
	border: none !important;
	opacity: 0;
	animation: dp-up .5s ease .4s forwards;
}

/* ── SÉPARATEUR après H2 ─────────────────────────── */
#intro .inner h2::after {
	content: '';
	display: block;
	width: 0;
	height: 1px;
	background: rgba(255, 253, 249, 0.2);
	margin: 1.6rem auto 0;
	animation: dp-grow .5s ease .6s forwards;
}
@keyframes dp-grow {
	from { width: 0; opacity: 0; }
	to   { width: 32px; opacity: 1; }
}

/* ── PARAGRAPHES ─────────────────────────────────── */
/* 1er paragraphe = localisation badge */
#intro .inner p:nth-of-type(1) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Outfit', sans-serif !important;
	font-size: 1rem !important;
	font-weight: 300 !important;
	letter-spacing: .2em !important;
	text-transform: uppercase !important;
	color: #e8fff1 !important;
	margin-bottom: 1.8rem !important;
	opacity: 0;
	animation: dp-up .5s ease .55s forwards;
}
#intro .inner p:nth-of-type(1)::before {
	content: '';
	width: 18px; height: 1px;
	background: #ddffe7;
	display: inline-block;
	flex-shrink: 0;
}

/* 2ème paragraphe = accroche */
#intro .inner p:nth-of-type(2) {
	font-family: 'Zen Kaku Gothic New', sans-serif !important;
	font-weight: 300 !important;
	font-size: clamp(1.1rem, 2.4vw, 1.35rem) !important;
	color: rgba(237,232,222,.85) !important;
	line-height: 1.7 !important;
	margin-bottom: .5rem !important;
	opacity: 0;
	animation: dp-up .6s ease .7s forwards;
}

/* 3ème paragraphe = corps */
#intro .inner p:nth-of-type(3) {
	font-family: 'Outfit', sans-serif !important;
	font-weight: 200 !important;
	font-size: 1rem !important;
	color: rgba(255, 255, 255, 0.863) !important;
	line-height: 1.85 !important;
	letter-spacing: .03em !important;
	margin-bottom: 2.5rem !important;
	opacity: 0;
	animation: dp-up .6s ease .85s forwards;
}

/* ── BOUTON CENTRÉ ────────────────────────────────── */
#intro .inner ul.actions {
	justify-content: center;
}

/* ── ANIMATIONS ──────────────────────────────────── */
@keyframes dp-up {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}