/* === layout.css ======================================================== */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}
.container--narrow { max-width: var(--container-narrow); }

.section {
	padding-block: clamp(var(--s-7), 8vw, var(--s-9));
	position: relative;
	overflow: hidden;
}
.section--tight   { padding-block: clamp(var(--s-6), 5vw, var(--s-7)); }
.section--alt     { background: var(--c-gris-fond); }
.section--rose    { background: var(--c-rose-fond); }
.section--hero    { padding-block: clamp(var(--s-7), 9vw, var(--s-10)); }

/* Variantes colorées (aplats forts) */
.section--violet  { background: linear-gradient(135deg, #6E32A0 0%, #8B45B8 100%); color: #fff; }
.section--bleu    { background: linear-gradient(135deg, #1478A0 0%, #2A95C2 100%); color: #fff; }
.section--gradient { background: linear-gradient(135deg, #6E32A0 0%, #AA0082 100%); color: #fff; }
.section--rose-strong { background: linear-gradient(135deg, #FA96C8 0%, #B478DC 100%); color: #fff; }

.section--violet h1, .section--violet h2, .section--violet h3, .section--violet h4,
.section--bleu h1, .section--bleu h2, .section--bleu h3, .section--bleu h4,
.section--gradient h1, .section--gradient h2, .section--gradient h3, .section--gradient h4,
.section--rose-strong h1, .section--rose-strong h2, .section--rose-strong h3, .section--rose-strong h4 {
	color: #fff;
}
.section--violet .eyebrow, .section--bleu .eyebrow,
.section--gradient .eyebrow, .section--rose-strong .eyebrow {
	color: rgba(255,255,255,0.85);
}
.section--violet p, .section--bleu p,
.section--gradient p, .section--rose-strong p {
	color: rgba(255,255,255,0.92);
}

/* Fonds pastel doux sans bordure — pour alterner */
.section--pastel-rose   { background: #FFF0F8; }
.section--pastel-violet { background: #F5EDFB; }
.section--pastel-bleu   { background: #EBF7FB; }
.section--dark          { background: var(--c-text); color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: rgba(255,255,255,0.85); }

/* === SYSTÈME DE CHEVAUCHEMENT ===
   Permet à un bloc de déborder sur la section précédente ou suivante. */
.overlap-up   { margin-top: clamp(-120px, -8vw, -60px); position: relative; z-index: 5; }
.overlap-down { margin-bottom: clamp(-120px, -8vw, -60px); position: relative; z-index: 5; }

/* Section qui réserve un padding extra pour accueillir un overlap entrant */
.section--has-overlap-top    { padding-top:    calc(clamp(var(--s-7), 8vw, var(--s-9)) + 80px); }
.section--has-overlap-bottom { padding-bottom: calc(clamp(var(--s-7), 8vw, var(--s-9)) + 80px); }

/* Bandeau-pont (le bandeau qui passe par-dessus la frontière entre 2 sections) */
.bridge {
	position: relative;
	z-index: 10;
	margin-top: clamp(-100px, -7vw, -50px);
	margin-bottom: clamp(-50px, -3vw, -20px);
}

/* Formes décoratives — blobs en background */
.section__blob {
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.35;
	pointer-events: none;
}
.section__blob--tl { top: -100px; left: -100px; width: 320px; height: 320px; background: var(--c-rose-clair); }
.section__blob--tr { top: -80px; right: -80px; width: 260px; height: 260px; background: var(--c-violet-clair); }
.section__blob--br { bottom: -120px; right: -120px; width: 340px; height: 340px; background: var(--c-bleu-clair); }
.section__blob--bl { bottom: -90px; left: -90px; width: 280px; height: 280px; background: var(--c-rose-clair); }

.section > .container { position: relative; z-index: 1; }

/* Patterns / grain léger sur sections colorées */
.section--violet::before,
.section--bleu::before,
.section--gradient::before {
	content: '';
	position: absolute; inset: 0;
	background-image:
		radial-gradient(circle at 10% 20%, rgba(255,255,255,0.08) 0%, transparent 40%),
		radial-gradient(circle at 90% 80%, rgba(255,255,255,0.08) 0%, transparent 40%);
	pointer-events: none;
	z-index: 0;
}

/* Grilles */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* 4 items, 1/2/4 cols — jamais 3 (évite l'orphelin) */
.grid--four-steps { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .grid--four-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .grid--four-steps { grid-template-columns: repeat(4, 1fr); } }
.grid--gap-lg { gap: var(--s-6); }

/* Flex helpers */
.flex { display: flex; }
.flex--col { flex-direction: column; }
.flex--center { align-items: center; justify-content: center; }
.flex--between { justify-content: space-between; align-items: center; }
.flex--gap-2 { gap: var(--s-2); }
.flex--gap-3 { gap: var(--s-3); }
.flex--gap-4 { gap: var(--s-4); }
.flex--gap-5 { gap: var(--s-5); }
.flex--wrap { flex-wrap: wrap; }

/* Spacing utilities */
.mt-0 { margin-top: 0; } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); }
.mb-0 { margin-bottom: 0; } .mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); } .mb-7 { margin-bottom: var(--s-7); }

/* Alignment */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* Surtitres */
.eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--c-accent);
	margin-bottom: var(--s-3);
}