/*
 * Sillage — page "La Collection".
 * Reproduit telle quelle la maquette validée (Sillage_La_Collection_V2).
 * TOUT est scopé sous #collection-page (variables ET composants), pas
 * seulement la palette : la maquette de référence utilise des classes
 * génériques (.intro, .featured, .card, .editorial, .newsletter...) qui
 * entraient en collision avec les classes de même nom déjà utilisées par
 * la homepage dans main.css (chargé sur toutes les pages) — un même nom
 * de classe des deux côtés, sans scope, cassait la mise en page ici.
 */

#collection-page {
	--paper: #eee7dc;
	--paper-soft: #f7f2e9;
	--stone: #ddd2c2;
	--ink: #171411;
	--muted: #766b60;
	--line: #cbbdac;
	--charcoal: #171411;
	--charcoal-2: #211b17;
	--tobacco: #3d5348;
	--bronze: #6f9483;
	--ivory: #f7f2e9;
	background: var(--paper);
	color: var(--ink);
}
#collection-page img { max-width: 100%; height: auto; }
/* Bug de "décalage" mobile (voir main.css, même diagnostic) : grilles à 1
   colonne sur mobile dont un enfant contient une image — reset du minimum
   implicite pour empêcher le débordement horizontal. */
#collection-page .featured-grid>*,#collection-page .editorial-grid>*,#collection-page .adopted-grid>*,#collection-page .grid>*{min-width:0}
#collection-page .eyebrow { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; }
#collection-page h1,
#collection-page h2,
#collection-page h3 { font-family: var(--serif); font-weight: 400; line-height: .98; margin: 0; }
#collection-page h1 { font-size: clamp(4rem, 7vw, 7.8rem); letter-spacing: -.055em; }
#collection-page h2 { font-size: clamp(2.8rem, 5vw, 5.4rem); letter-spacing: -.045em; }
#collection-page h3 { font-size: clamp(1.5rem, 2.4vw, 2.45rem); }
#collection-page p { margin: 0; color: var(--muted); }
#collection-page .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 18px;
	padding: 17px 26px; border: 1px solid currentColor; text-transform: uppercase;
	letter-spacing: .16em; font-size: .72rem; font-weight: 700; transition: .25s; background: transparent;
}
#collection-page .btn:hover { background: var(--ink); color: var(--ivory); }
#collection-page .rule { display: flex; align-items: center; gap: 13px; margin: 18px 0 30px; }
#collection-page .rule:before,
#collection-page .rule:after { content: ""; width: 56px; height: 1px; background: currentColor; opacity: .42; }
#collection-page .rule i { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); display: block; }

/* Le hero de cette page est désormais le composant partagé Sillage Page
   Header (assets/css/page-header.css), rendu hors de #collection-page. */

/* ---------- Intro éditoriale (réutilisée aussi pour "Pas de rayon vide") ----------
 * Rebaptisée .collection-intro (au lieu de .intro) : main.css définit déjà un
 * .intro pour la homepage avec son propre display:grid — même scopé sous
 * #collection-page, une propriété que je ne redéclare pas explicitement (ici,
 * display/grid-template-columns sur la SECTION elle-même) reste héritée de
 * cette règle non scopée, car le CSS fusionne par propriété, pas par bloc.
 */
#collection-page .collection-intro { background: var(--paper-soft); padding: clamp(90px, 9vw, 150px) 0; }
#collection-page .intro-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 8vw; align-items: start; }
#collection-page .intro-copy { max-width: 760px; }
#collection-page .intro-copy h2 { margin-bottom: 30px; }
#collection-page .intro-copy p { font-size: 1.05rem; }
#collection-page .intro-aside { border-left: 1px solid var(--line); padding-left: 36px; }
#collection-page .intro-aside strong { font-family: var(--serif); font-size: 1.7rem; font-weight: 400; display: block; margin-bottom: 14px; }

/* ---------- Pièce à l'honneur ---------- */
#collection-page .featured { background: var(--charcoal); color: #fff; padding: clamp(100px, 10vw, 170px) 0; }
#collection-page .featured-grid { display: grid; grid-template-columns: 1.14fr .86fr; gap: 6vw; align-items: center; }
#collection-page .featured-media { position: relative; }
/* Photos produits systématiquement carrées (2000×2000) — aucun rognage forcé. */
#collection-page .featured-media img { aspect-ratio: 1; object-fit: cover; }
#collection-page .seal {
	position: absolute; right: -42px; top: 38px; width: 120px; height: 120px;
	border: 1px solid rgba(255, 255, 255, .42); border-radius: 50%; display: grid; place-items: center;
	text-align: center; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1.55; transform: rotate(6deg);
}
#collection-page .featured-copy .eyebrow { color: #d6b485; }
#collection-page .featured-copy h2 { margin: 14px 0 24px; }
#collection-page .featured-copy .lead { font-family: var(--serif); font-size: 1.35rem; line-height: 1.45; color: #efe5d8; max-width: 600px; }
#collection-page .featured-copy .lead p { color: inherit; }
#collection-page .featured-specs {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 32px;
	border-top: 1px solid rgba(255, 255, 255, .16); border-bottom: 1px solid rgba(255, 255, 255, .16);
	padding: 26px 0; margin: 34px 0;
}
#collection-page .featured-specs small { display: block; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: #aa9079; }
#collection-page .featured-specs strong { font-family: var(--serif); font-weight: 400; font-size: 1.08rem; }
/* SILLAGE — RISK : le prix en monospace — une étiquette de vente aux
   enchères, pas un prix de boutique en ligne. */
#collection-page .featured .price { font-family: var(--mono); font-weight: 700; font-size: 2.2rem; color: #f6f2ec; margin-bottom: 18px; }
#collection-page .featured-actions { display: flex; gap: 18px; align-items: center; }
#collection-page .featured-actions .btn { background: var(--bronze); border-color: var(--bronze); color: #fff; }
#collection-page .featured-actions .btn:hover { background: #111; border-color: #fff; }
#collection-page .heart {
	width: 54px; height: 54px; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff;
	border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; padding: 0;
	transition: border-color .3s ease, color .3s ease;
}
#collection-page .heart svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; }
#collection-page .heart:hover { border-color: #a8c4b8; color: #a8c4b8; }
#collection-page .heart[aria-pressed="true"] { color: #a8c4b8; border-color: #a8c4b8; }
#collection-page .heart[aria-pressed="true"] svg { fill: currentColor; animation: sillage-heart-stamp .4s ease; }
@keyframes sillage-heart-stamp {
	0% { transform: scale(.7); }
	55% { transform: scale(1.25); }
	100% { transform: scale(1); }
}

/* ---------- Grille produits + filtres ---------- */
#collection-page .products { padding: clamp(90px, 9vw, 150px) 0; background: var(--paper); }
#collection-page .section-head { display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 52px; }
#collection-page .section-head p { max-width: 580px; }
#collection-page .filters { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 34px; }
#collection-page .filter {
	border: 1px solid var(--line); padding: 9px 13px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
	background: transparent; color: inherit; cursor: pointer; font-family: var(--sans); transition: .2s;
}
#collection-page .filter.active { background: var(--ink); color: #fff; border-color: var(--ink); }
#collection-page .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* main.css définit aussi un .card (cartes de la homepage) avec min-height:600px
   et un ::after en dégradé sombre plein cadre — remis à zéro ici, sans quoi
   ils s'appliquaient aussi à ces cartes-ci malgré le scope #collection-page. */
#collection-page .card { position: relative; background: #e5dccf; overflow: hidden; min-height: 0; transition: box-shadow .3s ease; }
#collection-page .card:after { content: none; }
#collection-page .card:hover { box-shadow: 0 16px 34px rgba(23, 20, 17, .12); }
#collection-page .card-media { display: block; aspect-ratio: 4/5; overflow: hidden; }
#collection-page .card-media img { height: 100%; object-fit: cover; transition: transform .6s ease; }
#collection-page .card:hover .card-media img { transform: scale(1.02); filter: none; }
/* main.css positionne .card-copy en absolute avec un texte blanc, pensé pour se
   superposer à l'image (cartes de la homepage) — ici le texte est en dessous
   de l'image, dans le flux normal, en couleurs sombres : tout remis à zéro. */
#collection-page .card-copy { position: static; left: auto; right: auto; bottom: auto; z-index: auto; color: var(--ink); padding: 22px 22px 25px; }
#collection-page .card-copy .meta { font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; color: #8e745d; }
#collection-page .card-copy h3 { font-size: 1.55rem; margin: 9px 0 10px; color: var(--ink); }
#collection-page .card-copy p { font-size: .88rem; color: var(--muted); max-width: none; margin-top: 0; }
#collection-page .card-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(23, 20, 17, .16); }
#collection-page .card-price { font-family: var(--mono); font-weight: 700; font-size: 1rem; }
#collection-page .card-price .woocommerce-Price-amount { color: inherit; }
#collection-page .status { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; }
#collection-page .card.adopted:after {
	content: "Adopté"; position: absolute; top: 18px; left: 18px; background: rgba(23, 20, 17, .9); color: #fff;
	padding: 8px 11px; font-size: .63rem; letter-spacing: .16em; text-transform: uppercase;
}
#collection-page .card.is-hidden { display: none; }

/* ---------- Ce qui relie ces objets ---------- */
#collection-page .editorial { background: var(--tobacco); color: #fff; padding: clamp(100px, 10vw, 160px) 0; }
/* main.css définit aussi un .editorial-grid (cartes Journal de la homepage)
   avec background:var(--line) — un beige destiné à servir de trait de
   grille entre ses cartes. Sans reset ici, ce fond beige apparaissait dans
   le "gap" de cette grille-ci (image + texte), coupant en deux le fond
   sombre de la section. */
#collection-page .editorial-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 7vw; align-items: center; background: none; }
#collection-page .editorial-image { aspect-ratio: 4/5; overflow: hidden; }
#collection-page .editorial-image img { height: 100%; object-fit: cover; }
/* main.css définit aussi .editorial-copy (padding:30px) et .editorial-copy p
   (margin-top:10px) pour la homepage — remis à zéro ici pour cette page. */
#collection-page .editorial-copy { padding: 0; }
#collection-page .editorial-copy .eyebrow { color: #fff; margin-bottom: 0; }
#collection-page .editorial-copy h2 { margin: 12px 0 28px; }
#collection-page .editorial-copy p { color: #ddcfc2; font-size: 1.02rem; margin-top: 0; }
#collection-page .editorial-copy blockquote { font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.7rem); line-height: 1.25; margin: 34px 0; color: #fff; }

/* ---------- Empreintes / objets adoptés ---------- */
#collection-page .adopted-strip { background: var(--stone); padding: 90px 0; }
#collection-page .adopted-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; align-items: center; }
#collection-page .adopted-copy h2 { font-size: clamp(2.5rem, 4.5vw, 4.8rem); }
#collection-page .adopted-copy p { margin: 24px 0 30px; max-width: 580px; }
#collection-page .adopted-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#collection-page .adopted-mosaic img { aspect-ratio: 1; object-fit: cover; filter: saturate(.7); }

/* ---------- Newsletter (identique dans l'esprit à la homepage, copie propre à cette page) ---------- */
#collection-page .newsletter { background: #111; color: #fff; text-align: center; padding: 110px 0; }
#collection-page .newsletter-logo { width: min(320px, 70vw); margin: 0 auto 26px; filter: brightness(0) invert(1); }
#collection-page .newsletter p { max-width: 580px; margin: 18px auto 30px; color: #aaa; }
#collection-page .newsletter-form { display: flex; max-width: 620px; margin: auto; border-bottom: 1px solid rgba(255, 255, 255, .5); }
#collection-page .newsletter-form input { flex: 1; background: transparent; border: 0; padding: 17px 4px; color: #fff; font: inherit; }
#collection-page .newsletter-form button { background: transparent; border: 0; color: #fff; text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; cursor: pointer; }

#collection-page :focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

@media (max-width: 980px) {
	#collection-page .intro-grid,
	#collection-page .featured-grid,
	#collection-page .editorial-grid,
	#collection-page .adopted-grid { grid-template-columns: 1fr; }
	#collection-page .grid { grid-template-columns: 1fr 1fr; }
	#collection-page .section-head { align-items: flex-start; flex-direction: column; }
	#collection-page .seal { right: 18px; }
	#collection-page .featured-media { max-width: 720px; }
	#collection-page .intro-aside { border-left: 0; border-top: 1px solid var(--line); padding: 28px 0 0; margin-top: 28px; }
}

@media (max-width: 640px) {
	#collection-page h1 { font-size: 4rem; }
	#collection-page .grid { grid-template-columns: 1fr; }
	#collection-page .featured-actions { align-items: stretch; }
	#collection-page .featured-actions .btn { flex: 1; }
}