/*
 * Sillage — page "À propos" (template-a-propos.php).
 * Reprend telle quelle la maquette validée (Sillage_A_Propos_Customizer_V1).
 *
 * Le hero de cette page est le composant partagé Sillage Page Header
 * (assets/css/page-header.css), rendu volontairement HORS de #sillage-about
 * (voir template-a-propos.php) pour qu'aucune règle locale (h1/h2/.eyebrow)
 * ne puisse l'écraser. Scopé sous #sillage-about, avec sa propre
 * redéclaration locale de la palette — même discipline que
 * cart.css/checkout.css/contact.css/information.css.
 */

#sillage-about {
	--paper: #efe7dc;
	--ivory: #f8f3eb;
	--soft: #e5d9ca;
	--ink: #171411;
	--muted: #776b60;
	--line: #cbbdac;
	--dark: #171411;
	--tabac: #3d5348;
	--bronze: #6f9483;
	background: var(--paper);
	color: var(--ink);
	line-height: 1.65;
}
#sillage-about h2, #sillage-about h3 { font-family: var(--serif); font-weight: 400; line-height: 1.03; margin: 0; text-wrap: balance; }
#sillage-about h2 { font-size: clamp(2.5rem, 4.5vw, 5rem); letter-spacing: -.045em; }
#sillage-about h3 { font-size: clamp(1.5rem, 2vw, 2.2rem); }
#sillage-about p { margin: 0; color: var(--muted); }
#sillage-about .eyebrow { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; }
#sillage-about .btn {
	display: inline-flex; align-items: center; justify-content: center; padding: 15px 22px; border: 1px solid currentColor;
	text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; font-weight: 700; background: transparent; min-height: 44px; cursor: pointer;
}
#sillage-about .rule { display: flex; align-items: center; gap: 12px; margin: 18px 0 28px; }
#sillage-about .rule:before, #sillage-about .rule:after { content: ''; width: 52px; height: 1px; background: currentColor; opacity: .4; }
#sillage-about .rule i { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); flex: none; }

/* ---------- Strates communes ---------- */
#sillage-about .manifesto,
#sillage-about .origin,
#sillage-about .principles,
#sillage-about .selection,
#sillage-about .transmission,
#sillage-about .note { padding: clamp(90px, 9vw, 145px) 0; }
#sillage-about .manifesto { background: var(--ivory); }

/* ---------- Manifeste ---------- */
#sillage-about .manifesto-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; }
#sillage-about .manifesto-copy p { font-family: var(--serif); font-size: clamp(1.25rem, 1.9vw, 2.1rem); line-height: 1.4; color: var(--ink); }
#sillage-about .manifesto-copy p + p { margin-top: 22px; }

/* ---------- Origine / Sélection ---------- */
#sillage-about .origin-grid,
#sillage-about .selection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; align-items: center; }
/* Bug de "décalage" mobile (voir main.css, même diagnostic) : reset du
   minimum implicite sur les colonnes-image de ces grilles. */
#sillage-about .origin-grid > *,
#sillage-about .selection-grid > * { min-width: 0; }
#sillage-about .origin-grid.image-right { grid-template-columns: 1fr 1fr; }
#sillage-about .origin-grid.image-right .visual { order: 2; }
#sillage-about .visual,
#sillage-about .selection-visual {
	aspect-ratio: 4/5; overflow: hidden;
	background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.5), transparent 28%), linear-gradient(155deg, #cdbba5, #876c58 52%, #3f3028);
}
#sillage-about .visual img,
#sillage-about .selection-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
#sillage-about .origin-copy h2, #sillage-about .selection-copy h2 { margin: 10px 0 24px; }
#sillage-about .origin-copy p + p { margin-top: 14px; }
#sillage-about .origin-copy .btn { margin-top: 28px; }

/* ---------- Principes ---------- */
/* main.css has its own unrelated bare ".principles{display:grid;
   grid-template-columns:1fr 1fr;gap:0;margin-top:46px;border:1px solid
   var(--line)}" rule (from the homepage's "La maison Sillage" strate,
   same class name, different component) — every one of those properties
   has to be reset here or it leaks straight through and turns this whole
   <section> into a 2-column grid with .wrap stuck in the first cell. */
#sillage-about .principles { background: var(--dark); color: #fff; display: block; grid-template-columns: none; gap: normal; margin-top: 0; border: 0; }
#sillage-about .principles .eyebrow { color: #d6b384; }
#sillage-about .principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.15); margin-top: 48px; }
/* Same collision as .principles above: main.css's unrelated bare
   ".principle{padding:24px}" + ":nth-child(odd){border-right:...}" +
   ":nth-child(-n+2){border-bottom:...}" rules also match this class name
   — border has to be reset explicitly since nothing here was overriding
   it otherwise. */
#sillage-about .principle { background: var(--dark); padding: 34px; min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; border: 0; }
#sillage-about .principle span { color: #c8a57a; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; }
#sillage-about .principle h3 { margin-top: 10px; color: #fff; }
#sillage-about .principle p { color: #b9aa9d; margin-top: 18px; }

/* ---------- Sélection ---------- */
#sillage-about .selection { background: var(--soft); }
#sillage-about .selection-list { margin-top: 28px; border-top: 1px solid var(--line); }
#sillage-about .selection-item { display: grid; grid-template-columns: 70px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
#sillage-about .selection-item span { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); }

/* ---------- Transmission ---------- */
#sillage-about .transmission { text-align: center; }
#sillage-about .transmission.bg-tabac { background: var(--tabac); color: #fff; }
#sillage-about .transmission.bg-sombre { background: var(--dark); color: #fff; }
#sillage-about .transmission.bg-clair { background: var(--ivory); color: var(--ink); }
#sillage-about .transmission .eyebrow { color: #d5b48b; }
#sillage-about .transmission.bg-clair .eyebrow { color: var(--bronze); }
#sillage-about .transmission h2 { max-width: 1050px; margin: 10px auto 24px; }
#sillage-about .transmission p { max-width: 740px; margin: auto; font-family: var(--serif); font-size: 1.35rem; }
#sillage-about .transmission.bg-tabac p, #sillage-about .transmission.bg-sombre p { color: #ddcec0; }
#sillage-about .transmission .btn { margin-top: 28px; }
#sillage-about .transmission.bg-tabac .btn, #sillage-about .transmission.bg-sombre .btn { border-color: #fff; color: #fff; }
#sillage-about .transmission.bg-tabac .btn:hover, #sillage-about .transmission.bg-sombre .btn:hover { background: #fff; color: var(--ink); }

/* ---------- Note finale ---------- */
#sillage-about .note { background: var(--ivory); }
#sillage-about .note-grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
#sillage-about .note p { margin-top: 10px; max-width: 620px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	#sillage-about .manifesto-grid,
	#sillage-about .origin-grid,
	#sillage-about .selection-grid { grid-template-columns: 1fr; }
	#sillage-about .origin-grid.image-right .visual { order: 0; }
	#sillage-about .principle-grid { grid-template-columns: 1fr; }
	#sillage-about .note-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	#sillage-about .hero { padding: 140px 0 60px; min-height: 70vh; }
}

/* ---------- Accessibilité / mouvement réduit ---------- */
#sillage-about .btn:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	#sillage-about * { animation: none !important; transition: none !important; }
}