/*
 * Sillage — "Empreintes" (archive + single du CPT empreinte).
 * Reprend telle quelle la maquette validée (Sillage_Empreintes_V1) pour
 * l'archive ; les gabarits du single (non fournis dans la maquette) suivent
 * le même langage visuel (eyebrow/rule/serif, sections paper/dark alternées).
 *
 * Défense anti-collision : main.css, product.css, collection.css et
 * account.css sont déjà chargés sur tout le site. CHAQUE règle ci-dessous
 * est préfixée par #empreintes-archive ou #empreinte-single (spécificité
 * ID+classe), donc aucune classe réutilisée ici (.card, .quote, .grid,
 * .section-head...) ne peut être écrasée par — ni écraser — les styles des
 * autres pages, quel que soit le nom partagé. Piège déjà rencontré et
 * traité dès le départ cette fois : main.css a une règle globale non
 * scopée "section{padding:clamp(82px,9.5vw,155px) 0}" qui s'appliquerait à
 * n'importe quelle <section> ; elle est neutralisée ci-dessous avant toute
 * autre règle.
 */

#empreintes-archive,
#empreinte-single {
	--paper: #eee7dc;
	--soft: #f7f2e9;
	--stone: #ddd2c2;
	--ink: #171411;
	--muted: #766b60;
	--line: #cbbdac;
	--dark: #171411;
	--brown: #3d5348;
	--bronze: #6f9483;
	--ivory: #f7f2e9;
	background: var(--paper);
	color: var(--ink);
}
#empreintes-archive section,
#empreinte-single section { padding: 0; }
#empreintes-archive img,
#empreinte-single img { max-width: 100%; }
/* Bug de "décalage" mobile (voir main.css, même diagnostic) : reset du
   minimum implicite sur les grilles à 1 colonne mobile contenant une image. */
#empreintes-archive .featured-grid>*,
#empreintes-archive .future-grid>*,
#empreintes-archive .grid>* { min-width: 0; }
#empreintes-archive h1,
#empreintes-archive h2,
#empreintes-archive h3,
#empreinte-single h1,
#empreinte-single h2,
#empreinte-single h3 { font-family: var(--serif); font-weight: 400; line-height: 1; margin: 0; }
#empreinte-single h1 { font-size: clamp(3.2rem, 5.4vw, 5.8rem); letter-spacing: -.05em; }
#empreintes-archive h2, #empreinte-single h2 { font-size: clamp(2.1rem, 3.6vw, 3.4rem); letter-spacing: -.04em; }
#empreintes-archive h3, #empreinte-single h3 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); }
#empreintes-archive p, #empreinte-single p { margin: 0; color: var(--muted); }
#empreintes-archive .eyebrow,
#empreinte-single .eyebrow { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; }
#empreintes-archive .rule,
#empreinte-single .rule { display: flex; align-items: center; gap: 13px; margin: 18px 0 26px; }
#empreintes-archive .rule:before, #empreintes-archive .rule:after,
#empreinte-single .rule:before, #empreinte-single .rule:after { content: ""; width: 52px; height: 1px; background: currentColor; opacity: .4; }
#empreintes-archive .rule i,
#empreinte-single .rule i { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); display: block; }
#empreintes-archive .btn,
#empreinte-single .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 14px;
	padding: 15px 22px; border: 1px solid currentColor; text-transform: uppercase;
	letter-spacing: .14em; font-size: .68rem; font-weight: 700; transition: .25s; background: transparent;
}
#empreintes-archive .btn:hover,
#empreinte-single .btn:hover { background: var(--ink); color: var(--ivory); }

/* Le hero de cette page est désormais le composant partagé Sillage Page
   Header (assets/css/page-header.css), rendu hors de #empreintes-archive —
   même traitement fond sombre que À propos et Collection, sans bandeau
   supplémentaire, pour que les 3 pages soient visuellement identiques. */

/* ---------- Manifesto ---------- */
#empreintes-archive .manifesto { background: var(--soft); padding: clamp(72px, 8vw, 120px) 0; }
#empreintes-archive .manifesto-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; }
#empreintes-archive .manifesto-copy p { font-size: 1.02rem; }
#empreintes-archive .manifesto-copy p + p { margin-top: 18px; }
#empreintes-archive .manifesto-note { margin-top: 32px; border-left: 1px solid var(--line); padding-left: 28px; font-family: var(--serif); font-size: 1.4rem; line-height: 1.35; color: var(--ink); }

/* ---------- Featured / single hero (shared component) ---------- */
#empreintes-archive .featured,
#empreinte-single .featured { background: var(--dark); color: #fff; padding: clamp(80px, 8.5vw, 140px) 0; }
#empreintes-archive .featured-grid,
#empreinte-single .featured-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 6vw; align-items: center; }
#empreintes-archive .featured-media,
#empreinte-single .featured-media { position: relative; }
#empreintes-archive .featured-media img,
#empreinte-single .featured-media img { aspect-ratio: 4/5; object-fit: cover; }
#empreintes-archive .badge,
#empreinte-single .badge {
	position: absolute; right: -30px; top: 40px; width: 116px; height: 116px;
	border: 1px solid rgba(255, 255, 255, .42); border-radius: 50%; display: grid; place-items: center;
	text-align: center; font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; line-height: 1.5;
	transform: rotate(5deg); background: var(--dark);
}
#empreintes-archive .featured-copy .eyebrow,
#empreinte-single .featured-copy .eyebrow { color: #d6b485; }
#empreintes-archive .featured-copy h2,
#empreinte-single .featured-copy h1 { margin: 12px 0 20px; color: #fff; }
#empreintes-archive .featured-story,
#empreinte-single .featured-story { font-family: var(--serif); font-size: clamp(1.25rem, 1.8vw, 1.7rem); line-height: 1.35; color: #f1e7dc; margin: 22px 0; }
#empreintes-archive .featured-story p + p,
#empreinte-single .featured-story p + p { margin-top: 16px; }
#empreintes-archive .story-meta,
#empreinte-single .story-meta {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 30px;
	border-top: 1px solid rgba(255, 255, 255, .15); border-bottom: 1px solid rgba(255, 255, 255, .15);
	padding: 22px 0; margin: 26px 0;
}
#empreintes-archive .story-meta small,
#empreinte-single .story-meta small { display: block; font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: #a58c74; }
#empreintes-archive .story-meta strong,
#empreinte-single .story-meta strong { font-family: var(--serif); font-size: 1.02rem; font-weight: 400; color: #fff; }

/* ---------- Wall / grid ---------- */
#empreintes-archive .wall { padding: clamp(76px, 8vw, 120px) 0; }
#empreintes-archive .section-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 44px; }
#empreintes-archive .section-head p { max-width: 480px; }
#empreintes-archive .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
#empreintes-archive .grid.grid--1 { grid-template-columns: minmax(0, 640px); justify-content: center; }
#empreintes-archive .grid.grid--2 { grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: center; }
/* main.css has its own UNSCOPED ".card"/".card-copy" (the homepage's
   image-overlay collection cards): position:relative + min-height:600px on
   .card, an absolutely-positioned dark ".card:after" gradient with no
   competing rule here, and ".card-copy{position:absolute;color:#fff}" —
   all of that silently applied to these cards too and hid the photo behind
   a phantom overlay. Reset explicitly rather than relying on background/
   overflow alone (same lesson as collection.css's card fixes). */
#empreintes-archive .card { position: relative; min-height: 0; background: #e4dacd; overflow: hidden; transition: box-shadow .3s ease; }
#empreintes-archive .card:after { content: none; }
#empreintes-archive .card:hover { box-shadow: 0 16px 34px rgba(23, 20, 17, .12); }
#empreintes-archive .card-media { aspect-ratio: 4/5; overflow: hidden; }
#empreintes-archive .card-media img { height: 100%; object-fit: cover; transition: transform .6s; }
#empreintes-archive .card:hover .card-media img { transform: scale(1.02); }
#empreintes-archive .card-copy { position: static; left: auto; right: auto; bottom: auto; z-index: auto; color: var(--ink); padding: 22px; }
#empreintes-archive .card-copy .meta { font-size: .64rem; letter-spacing: .15em; text-transform: uppercase; color: #8c7159; }
#empreintes-archive .card-copy h3 { font-size: 1.4rem; margin: 9px 0 7px; color: var(--ink); }
#empreintes-archive .card-copy blockquote { font-family: var(--serif); font-size: 1.02rem; line-height: 1.4; margin: 14px 0 0; font-style: normal; color: var(--ink); }
#empreintes-archive .card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(23, 20, 17, .15); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
#empreintes-archive .card-foot a { white-space: nowrap; }
#empreintes-archive .pagination,
#empreintes-archive nav.navigation.pagination { margin-top: 46px; display: flex; justify-content: center; gap: 10px; }
#empreintes-archive .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; border: 1px solid var(--line); font-size: .78rem; }
#empreintes-archive .pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Process ---------- */
#empreintes-archive .process { background: var(--stone); padding: clamp(72px, 8vw, 115px) 0; }
#empreintes-archive .process-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 6vw; }
#empreintes-archive .steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
#empreintes-archive .step { background: rgba(255, 255, 255, .32); border: 1px solid var(--line); padding: 22px; min-height: 170px; }
#empreintes-archive .step-number { font-family: var(--serif); font-size: 2.4rem; color: var(--bronze); }
#empreintes-archive .step h3 { font-size: 1.15rem; margin: 6px 0 12px; }
#empreintes-archive .step p { font-size: .85rem; }

/* ---------- Future ---------- */
#empreintes-archive .future { background: var(--brown); color: #fff; padding: clamp(80px, 8.5vw, 130px) 0; }
#empreintes-archive .future-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 6vw; align-items: center; }
#empreintes-archive .future .eyebrow { color: #d8b990; }
#empreintes-archive .future h2 { color: #fff; margin: 12px 0 20px; }
#empreintes-archive .future p { color: #dfd1c5; font-size: 1rem; }
#empreintes-archive .future-media { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
#empreintes-archive .future-media img { aspect-ratio: 1; object-fit: cover; filter: saturate(.8); }

/* ---------- CTA ---------- */
#empreintes-archive .cta { background: var(--soft); text-align: center; padding: 90px 0; }
#empreintes-archive .cta h2 { max-width: 820px; margin: auto; }
#empreintes-archive .cta p { max-width: 580px; margin: 20px auto 26px; }
#empreintes-archive .cta .btn { background: var(--bronze); border-color: var(--bronze); color: #fff; }
#empreintes-archive .cta .btn:hover { background: var(--ink); border-color: var(--ink); }

/* ---------- Single: origin / intervention chapters ---------- */
#empreinte-single .chapter { background: var(--soft); padding: clamp(70px, 8vw, 140px) 0; }
#empreinte-single .chapter.intervention { background: var(--paper); }
#empreinte-single .chapter-copy { display: grid; gap: 34px; margin-top: 36px; }
#empreinte-single .chapter-copy > div + div { border-top: 1px solid var(--line); padding-top: 26px; }
#empreinte-single .chapter-copy h3 { font-size: 1.2rem; margin-bottom: 10px; }
#empreinte-single .chapter-copy--split { grid-template-columns: repeat(2, 1fr); gap: 26px 44px; }
#empreinte-single .chapter-copy--split > div + div { border-top: 0; padding-top: 0; }

/* ---------- Single: story ---------- */
#empreinte-single .story-chapter { background: var(--dark); color: #fff; }
#empreinte-single .story-wrap { max-width: 880px; }
#empreinte-single .story-chapter .eyebrow { color: #d7b484; }
#empreinte-single .story-copy { font-family: var(--serif); font-size: 1.25rem; line-height: 1.5; color: #ede3d7; margin: 26px 0 36px; }
#empreinte-single .story-copy p + p { margin-top: 18px; }
#empreinte-single .story-chapter .btn { color: #fff; }

/* ---------- Single: back nav ---------- */
#empreinte-single .single-nav { background: var(--paper); padding: 26px 0; border-top: 1px solid var(--line); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	#empreintes-archive .manifesto-grid,
	#empreintes-archive .featured-grid,
	#empreinte-single .featured-grid,
	#empreintes-archive .process-grid,
	#empreintes-archive .future-grid { grid-template-columns: 1fr; }
	#empreintes-archive .grid { grid-template-columns: 1fr 1fr; }
	#empreintes-archive .grid.grid--1,
	#empreintes-archive .grid.grid--2 { grid-template-columns: 1fr 1fr; }
	#empreintes-archive .section-head { align-items: flex-start; flex-direction: column; }
	#empreintes-archive .badge,
	#empreinte-single .badge { right: 12px; }
	#empreintes-archive .future-media { grid-template-columns: repeat(2, 1fr); }
	#empreinte-single .chapter-copy--split { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	#empreintes-archive h1, #empreinte-single h1 { font-size: 2.8rem; }
	#empreintes-archive .grid,
	#empreintes-archive .grid.grid--1,
	#empreintes-archive .grid.grid--2,
	#empreintes-archive .steps { grid-template-columns: 1fr; }
	#empreintes-archive .story-meta,
	#empreinte-single .story-meta { grid-template-columns: 1fr; }
}