/* =========================================================
   SOURIRE PRESTIGE — Système éditorial
   Primitives de composition asymétrique : numéros géants, débordements,
   grilles bento, citations-affiches, cadres d'index. Chaque section de
   l'accueil pioche dans ces briques pour rester visuellement distincte.
   ========================================================= */

/* ---- Numéros / chiffres géants traités comme motif graphique ---- */
.sp-index-num {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--fs-display-num);
	line-height: 0.8;
	letter-spacing: -0.03em;
	color: transparent;
	-webkit-text-stroke: 1px var(--sp-grey-300);
	pointer-events: none;
	user-select: none;
}
.sp-section--bg-dark .sp-index-num { -webkit-text-stroke-color: rgba(255, 255, 255, 0.18); }
.sp-index-num--solid { color: var(--sp-gold); -webkit-text-stroke: 0; opacity: 0.9; }

/* ---- Tag d'index de section (coin haut, style "planche contact") ---- */
.sp-tag-index {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--fs-caption);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--sp-text-muted);
}
.sp-tag-index__num { font-family: var(--font-display); font-style: italic; color: var(--sp-gold-text); font-size: 1.1em; }
.sp-section--bg-dark .sp-tag-index { color: var(--sp-grey-400); }
.sp-section--bg-dark .sp-tag-index__num { color: var(--sp-gold-light); }

/* ---- Citation-affiche (manifeste) ---- */
.sp-statement {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--fs-statement);
	line-height: 1.08;
	letter-spacing: var(--tracking-tight);
	color: var(--sp-text);
	max-width: 22ch;
}
.sp-statement em { font-style: italic; color: var(--sp-gold-text); }
.sp-section--bg-dark .sp-statement { color: var(--sp-white); }
.sp-section--bg-dark .sp-statement em { color: var(--sp-gold-light); }

/* ---- Débordement plein écran (casse le conteneur) ---- */
.sp-break-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ---- Grilles asymétriques (colonnes inégales) ---- */
.sp-asym {
	display: grid;
	gap: var(--gutter);
	align-items: center;
}
@media (min-width: 900px) {
	.sp-asym--5-7 { grid-template-columns: 5fr 7fr; }
	.sp-asym--7-5 { grid-template-columns: 7fr 5fr; }
	.sp-asym--4-8 { grid-template-columns: 4fr 8fr; }
	.sp-asym--8-4 { grid-template-columns: 8fr 4fr; }
	.sp-asym--3-9 { grid-template-columns: 3fr 9fr; }
}

/* ---- Superposition d'éléments (image + carte flottante, etc.) ---- */
.sp-overlap { position: relative; }
.sp-overlap__float {
	position: absolute;
	z-index: 2;
	background: var(--sp-white);
	box-shadow: var(--shadow-lift);
}
.sp-overlap__float--br { bottom: clamp(-2rem, -4vw, -1rem); right: clamp(-2rem, -4vw, -1rem); }
.sp-overlap__float--bl { bottom: clamp(-2rem, -4vw, -1rem); left: clamp(-1rem, -3vw, -0.5rem); }
.sp-overlap__float--tl { top: clamp(-2rem, -4vw, -1rem); left: clamp(-2rem, -4vw, -1rem); }
@media (max-width: 639px) {
	.sp-overlap__float { position: static; margin-top: -2.5rem; margin-inline: var(--space-4); }
}

/* ---- Grille bento (cellules de tailles inégales) ----
   4 colonnes : une tuile "large" (2×2) + 4 tuiles pilier (1×1) qui
   comblent exactement le reste — utilisée par why-us.php. ---- */
.sp-bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(180px, auto);
	gap: var(--gutter);
}
.sp-bento__item {
	position: relative;
	grid-column: span 4;
	grid-row: span 1;
	overflow: hidden;
}
@media (min-width: 900px) {
	.sp-bento__item--large { grid-column: span 2; grid-row: span 2; }
	.sp-bento__item--pillar { grid-column: span 1; grid-row: span 1; }
}

/* ---- Media pleine hauteur / ratio dramatique ---- */
.sp-editorial-media { position: relative; overflow: hidden; }
.sp-editorial-media img, .sp-editorial-media .sp-placeholder { width: 100%; height: 100%; object-fit: cover; }
.sp-editorial-media--tall { aspect-ratio: 3/4.2; }
.sp-editorial-media--wide { aspect-ratio: 16/8; }
.sp-editorial-media--square { aspect-ratio: 1/1; }

/* ---- Wordmark filigrane (CTA finale, footer) ---- */
.sp-watermark {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.sp-watermark span {
	font-family: var(--font-display);
	font-size: clamp(6rem, 4rem + 14vw, 22rem);
	line-height: 1;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.08);
}

/* ---- Panneau "produit" plein écran (showcase-panel.php) — utilisé sur
   l'accueil et sur la page Prestations, d'où sa place ici plutôt que dans
   un page-*.css spécifique. ---- */
.sp-showcase__panel {
	min-height: 92vh;
	display: flex;
	align-items: center;
	padding-block: var(--space-10);
	border-top: 1px solid var(--sp-border);
}
.sp-showcase--standalone .sp-showcase__panel:first-child { border-top: 0; }
.sp-showcase__media { position: relative; }
.sp-showcase__media--order-2 { order: 2; }
.sp-showcase__text--order-1 { order: 1; }
.sp-showcase__num {
	position: absolute;
	top: clamp(-3rem, -5vw, -1.5rem);
	left: clamp(-1rem, -3vw, 0rem);
	z-index: 2;
}
.sp-showcase__title { margin-top: var(--space-4); margin-bottom: var(--space-5); }
.sp-showcase__excerpt { font-size: var(--fs-body-lg); color: var(--sp-text-muted); max-width: 40ch; margin-bottom: var(--space-6); }
.sp-showcase__meta { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: var(--sp-text-muted); margin-bottom: var(--space-7); }
.sp-showcase__meta .sp-icon { width: 14px; height: 14px; color: var(--sp-accent); }
.sp-showcase__cta { display: flex; }
@media (max-width: 899px) {
	.sp-showcase__panel { min-height: auto; padding-block: var(--space-8); }
	.sp-showcase__media--order-2, .sp-showcase__text--order-1 { order: initial; }
	.sp-showcase__num { display: none; }
}

/* ---- Pourquoi nous (bento, accueil + Prestations) ---- */
.sp-why-us__hero { border-radius: var(--radius-lg); background: var(--sp-black); color: var(--sp-white); display: flex; box-shadow: var(--shadow-card); }
.sp-why-us__hero-media { position: absolute; inset: 0; }
.sp-why-us__hero-media .sp-placeholder,
.sp-why-us__hero-media picture,
.sp-why-us__hero-media img { width: 100%; height: 100%; object-fit: cover; }
.sp-why-us__hero-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(10, 20, 40, 0.85) 0%, rgba(10, 20, 40, 0.15) 55%, transparent 80%);
}
.sp-why-us__hero-copy { position: relative; z-index: 1; align-self: flex-end; padding: var(--space-7); }
.sp-why-us__hero-copy p { color: var(--sp-white); font-family: var(--font-display); font-size: var(--fs-h4); font-style: italic; margin: 0; }
.sp-why-us__pillar {
	background: var(--sp-white);
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: var(--radius-lg);
	border: 1px solid var(--sp-border);
	box-shadow: var(--shadow-card);
	transition: transform var(--duration-base) var(--ease-premium), box-shadow var(--duration-base) var(--ease-premium);
}
.sp-why-us__pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.sp-why-us__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--sp-white);
	color: var(--sp-accent);
	margin-bottom: var(--space-4);
}
.sp-why-us__icon .sp-icon { width: 18px; height: 18px; }
.sp-why-us__title { font-size: var(--fs-body); font-family: var(--font-body); font-weight: 600; margin-bottom: var(--space-2); }
.sp-why-us__pillar p { font-size: var(--fs-small); margin: 0; }

/* ---- Statistiques + bandeau marquee (accueil + à propos) ---- */
.sp-stats { position: relative; overflow: hidden; }
.sp-stats__marquee {
	position: absolute;
	top: 50%;
	left: 0; right: 0;
	transform: translateY(-50%) rotate(-2deg);
	z-index: 0;
	pointer-events: none;
}
.sp-stats__marquee .sp-marquee__item {
	font-size: clamp(3rem, 2rem + 5vw, 7rem);
	color: transparent;
	-webkit-text-stroke: 1px rgba(10, 10, 9, 0.1);
}
.sp-stats__dot { color: var(--sp-gold); -webkit-text-stroke: 0; font-size: 0.4em; vertical-align: middle; }
.sp-stats__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.sp-stats__grid > * { grid-column: span 12; }
@media (min-width: 640px) { .sp-stats__grid > * { grid-column: span 6; } }
@media (min-width: 900px) { .sp-stats__grid > * { grid-column: span 3; } }

/* ---- Processus : frise éditoriale statique (accueil + Prestations) ----
   Lecture immédiate, aucune capture du scroll : en-tête puis 4 étapes
   numérotées reliées par un filet fin. */
.sp-process { background: var(--sp-bg-alt); }
.sp-process__head { max-width: 30ch; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.sp-process__title { margin-top: var(--space-3); }

.sp-process__steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.sp-process__step {
	position: relative;
	padding-top: var(--space-6);
	border-top: 1px solid var(--sp-border);
}
/* Pastille de progression posée sur le filet, en tête de chaque étape. */
.sp-process__step::before {
	content: '';
	position: absolute;
	top: -4px; left: 0;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--sp-accent);
}
.sp-process__num {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem);
	line-height: 1;
	color: var(--sp-gold-text);
	margin-bottom: var(--space-4);
}
.sp-process__step-title { font-size: var(--fs-h4); margin-bottom: var(--space-3); }
.sp-process__step-text { font-size: var(--fs-small); color: var(--sp-text-muted); }

@media (max-width: 900px) {
	.sp-process__steps { grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 2.5rem); }
}
@media (max-width: 520px) {
	.sp-process__steps { grid-template-columns: 1fr; }
}

/* ---- CTA finale (utilisée sur toutes les pages) ---- */
.sp-cta-final {
	position: relative;
	overflow: hidden;
	text-align: center;
	background:
		radial-gradient(60% 70% at 50% 100%, rgba(15, 78, 140, 0.16), transparent 60%),
		var(--sp-sand);
}
.sp-cta-final__inner { position: relative; z-index: 1; }
.sp-cta-final__title { margin-inline: auto; max-width: 18ch; }
.sp-cta-final__text { margin-inline: auto; max-width: 52ch; margin-bottom: var(--space-8); color: var(--sp-text-muted); }
.sp-cta-final .sp-watermark span { -webkit-text-stroke-color: rgba(10, 10, 9, 0.06); }

/* ---- En-tête de page générique (toutes les pages intérieures) ---- */
.sp-page-header { padding-top: calc(var(--space-12) + 2rem); padding-bottom: var(--space-8); }
.sp-page-header__title { margin-top: var(--space-3); }
.sp-page-header__intro { max-width: 640px; font-size: var(--fs-body-lg); }
.sp-page-header .sp-breadcrumbs { margin-bottom: var(--space-5); }

/* ---- Filet fin décoratif (séparateurs éditoriaux) ---- */
.sp-rule { height: 1px; background: var(--sp-border); border: 0; }
.sp-rule--gold { background: var(--sp-gold-dim); }
.sp-section--bg-dark .sp-rule { background: rgba(255, 255, 255, 0.12); }