/*
 * Accueil - DA2 « L'Ecurie »
 *
 * Suit la composition de reference/DA-2026-07-26/da2-lecurie.html (maquette
 * validee par le client) : colonne editoriale fixe (.l-split/.l-rail/.l-flow,
 * base.css) + flux (hero photo, chiffres, rayon panoramique, univers,
 * gammes, sellerie, engagements, pratique). Les composants partages (carte
 * produit, rail, liste univers, planche gamme...) viennent de
 * components.css et ne sont pas redefinis ici.
 */

/* ---------------------------------------------------------------------
 * SECTION - rythme vertical + gouttiere horizontale du flux. Sert
 * d'ancrage au recul negatif de .shelf (components.css) : sans ce
 * padding-inline, la marge negative du rail panoramique deborde
 * reellement du viewport au lieu de compenser une gouttiere existante.
 * --------------------------------------------------------------------- */
.sec { padding: var(--sec-y) var(--pad-x); border-bottom: 1px solid var(--c-line); }

/* ---------------------------------------------------------------------
 * COLONNE EDITORIALE (contenu propre a la home dans .l-rail)
 * --------------------------------------------------------------------- */
.rail-hand { margin-bottom: var(--sp-4); }
.rail-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

.rail-foot { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--c-ink-faint); }
@media (max-width: 60.99rem) { .rail-foot { flex-direction: row; flex-wrap: wrap; gap: var(--sp-5); } }

/* ---------------------------------------------------------------------
 * HERO PHOTO - pleine largeur de la colonne .l-flow
 * --------------------------------------------------------------------- */
.hero-shot { position: relative; height: clamp(21.25rem, 64vh, 38.75rem); overflow: hidden; }
.hero-shot img { width: 100%; height: 100%; object-fit: cover; filter: var(--c-photo-filter); }
.hero-shot__stamp {
	position: absolute;
	top: var(--sp-5);
	right: var(--sp-5);
	width: clamp(4.5rem, 8vw, 6.5rem);
	aspect-ratio: 1;
	color: var(--od-ivory);
	opacity: .92;
}
.hero-shot__cap {
	position: absolute;
	left: var(--sp-5);
	bottom: var(--sp-5);
	padding: var(--sp-2) var(--sp-4);
	background: var(--od-paper);
	color: var(--od-navy);
	font-size: var(--t-micro);
	letter-spacing: .18em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------
 * BANDEAU CHIFFRES
 * --------------------------------------------------------------------- */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--c-line); }
.fig { padding: clamp(1.375rem, 3vw, 2.5rem) clamp(.875rem, 2vw, 1.75rem); border-right: 1px solid var(--c-line); }
.fig:last-child { border-right: 0; }
.fig b { display: block; font-family: var(--od-serif); font-weight: 300; font-size: clamp(2.125rem, 4.6vw, 4.25rem); line-height: .9; letter-spacing: -.04em; }
.fig span { display: block; margin-top: var(--sp-3); font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--c-ink-soft); }
.fig--hl b { color: var(--c-accent); }

@media (max-width: 60.99rem) {
	.figures { grid-template-columns: 1fr 1fr; }
	.fig:nth-child(2) { border-right: 0; }
	.fig:nth-child(1), .fig:nth-child(2) { border-bottom: 1px solid var(--c-line); }
}

/* ---------------------------------------------------------------------
 * PLANCHE GAMME - variante graphique quand aucune photo lifestyle
 * n'existe (Prestige/Protect : aucune des 19 photos client ne montre de
 * croquettes ou d'ingredients, voir rapport de livraison). Reprend le
 * traitement deja etabli pour l'univers Volailles (.univ__th--graphic)
 * plutot que d'inventer une image de banque.
 * --------------------------------------------------------------------- */
.plate__im--graphic {
	background: var(--c-plate);
	border: 1px solid var(--c-line-gold);
	display: grid;
	place-items: center;
}
.plate__im--graphic .emblem { width: 34%; height: 34%; color: var(--od-navy); }

/* ---------------------------------------------------------------------
 * SELLERIE - section a contre-emploi (fond navy dans les deux themes)
 * --------------------------------------------------------------------- */
.sellerie { background: var(--c-bg-invert); color: var(--c-ink-invert); padding: clamp(2.875rem, 6.5vw, 6rem) var(--pad-x); }
.sellerie .sec-head__no,
.sellerie h2 { color: var(--c-ink-invert); }
.sellerie .sec-head__aside { color: var(--c-ink-invert-soft); }

.sell-grid { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
@media (min-width: 61rem) { .sell-grid { grid-template-columns: 1.15fr .85fr; } }

.sell-big {
	font-family: var(--od-serif);
	font-weight: 300;
	font-size: clamp(4.375rem, 12vw, 11.375rem);
	line-height: .82;
	letter-spacing: -.05em;
	color: var(--od-gold);
}
.sell-big i {
	font-style: normal;
	font-size: .2em;
	color: var(--c-ink-invert);
	letter-spacing: .02em;
	display: block;
	margin-top: var(--sp-4);
}
.sellerie p { color: var(--c-ink-invert-soft); max-width: 46ch; margin: var(--sp-6) 0 var(--sp-5); }
.sellerie .lnk { color: var(--c-ink-invert); border-color: rgba(207, 175, 99, .5); }
.sellerie .lnk:hover { color: var(--od-gold); border-color: var(--od-gold); }

.sellphoto { aspect-ratio: 5 / 4; overflow: hidden; border-radius: var(--r-sm); }
.sellphoto img { width: 100%; height: 100%; object-fit: cover; filter: var(--c-photo-filter); }

/* ---------------------------------------------------------------------
 * ENGAGEMENTS - condense de "Nos engagements" (detail complet sur sa
 * propre page, voir pages.css .pillars)
 * --------------------------------------------------------------------- */
.eng { display: grid; gap: 1px; background: var(--c-line); border-top: 1px solid var(--c-line); }
@media (min-width: 48rem) { .eng { grid-template-columns: repeat(3, 1fr); } }
.en { background: var(--c-bg); padding: clamp(1.5rem, 3vw, 2.75rem) var(--pad-x); }
@media (min-width: 48rem) { .en { padding: clamp(1.5rem, 3vw, 2.75rem); } }
.en__no { font-family: var(--od-serif); font-size: clamp(1.875rem, 3.4vw, 3.25rem); font-weight: 300; color: var(--c-deco-ink); line-height: 1; }
.en h3 { margin: var(--sp-4) 0 var(--sp-2); }
.en p { font-size: var(--t-small); color: var(--c-ink-soft); }

/* ---------------------------------------------------------------------
 * PRATIQUE - adresse / horaires / telephone
 * --------------------------------------------------------------------- */
.prat { display: grid; gap: clamp(1.25rem, 3vw, 3.125rem); padding: clamp(2.375rem, 5vw, 4.5rem) var(--pad-x); border-top: 1px solid var(--c-line); }
@media (min-width: 48rem) { .prat { grid-template-columns: repeat(3, 1fr); } }
.prat span { display: block; font-size: var(--t-micro); letter-spacing: .28em; text-transform: uppercase; color: var(--c-deco-ink); margin-bottom: var(--sp-3); }
.prat b { font-family: var(--od-serif); font-weight: 400; font-size: clamp(1.0625rem, 1.7vw, 1.4375rem); display: block; line-height: 1.3; }
.prat i { font-style: normal; font-size: var(--t-small); color: var(--c-ink-soft); display: block; margin-top: var(--sp-2); }