/*
 * Sillage — fiche produit V2 (pixel-perfect).
 * Reproduit telle quelle la maquette validée (Sillage_Fiche_Produit_V2_Pixel_Perfect).
 * Les couleurs de la démo sont volontairement redéclarées ici, scopées à
 * .sillage-product, pour ne jamais changer les variables globales de
 * main.css dont dépend la homepage.
 */

.sillage-product {
	--paper: #eee7dc;
	--paper-soft: #f7f2e9;
	--stone: #ddd2c2;
	--ink: #171411;
	--muted: #75695d;
	--line: #cbbdab;
	--charcoal: #171411;
	--charcoal-2: #211b17;
	--tobacco: #3d5348;
	--bronze: #6f9483;
	--ivory: #f7f2e9;
	background: var(--paper);
	color: var(--ink);
}
.sillage-product img { max-width: 100%; height: auto; }
/* Bug de "décalage" mobile (voir main.css, même diagnostic) : une grille qui
   se réduit à 1 colonne sur mobile mais dont un enfant contient une image
   peut voir sa piste déborder de l'écran, l'image imposant sa propre taille
   comme minimum implicite. Reset sur toutes les grilles fiche produit
   concernées. */
.sillage-product .hero-grid>*,.sillage-product .presentation-grid>*,.sillage-product .history-grid>*,.sillage-product .archive-grid>*,.sillage-product .product-grid>*,.sillage-product .pack-grid>*,.sillage-product .mosaic>*{min-width:0}
.sillage-product .eyebrow { font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; }
.sillage-product h1,
.sillage-product h2,
.sillage-product h3 { font-family: var(--serif); font-weight: 400; line-height: .98; margin: 0; }
.sillage-product h2 { font-size: clamp(2.5rem, 5vw, 5.3rem); letter-spacing: -.045em; }
.sillage-product h3 { font-size: clamp(1.45rem, 2.2vw, 2.25rem); }
.sillage-product p { margin: 0; color: var(--muted); }
.sillage-product .rule { display: flex; align-items: center; gap: 13px; margin: 18px 0 30px; }
.sillage-product .rule:before,
.sillage-product .rule:after { content: ""; width: 56px; height: 1px; background: currentColor; opacity: .42; }
.sillage-product .rule i { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); display: block; }
.sillage-product .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: .73rem; font-weight: 700; transition: .25s; background: transparent;
}
.sillage-product .btn:hover { background: var(--ink); color: var(--ivory); }
.sillage-product .btn-primary { background: var(--bronze); color: var(--ivory); border-color: var(--bronze); }
.sillage-product .btn-primary:hover { background: #0d0b0a; border-color: #0d0b0a; color: var(--ivory); }

/* ---------- Hero produit (charbon) ---------- */
.product-hero {
	background: radial-gradient(circle at 70% 40%, #2b211b 0, #171411 47%, #0d0b0a 100%);
	color: #fff;
	padding: calc(88px + 70px) 0 100px;
	min-height: 100vh;
}
.product-hero p { color: #c5b9ad; }
.product-hero .wrap { max-width: 1600px; }
/* Grille réelle : image ~57%, contenu ~43%, gap plafonné à 64px, colonnes alignées en haut. */
.hero-grid { display: grid; grid-template-columns: 1.33fr 1fr; gap: min(4.5vw, 72px); align-items: start; }

.gallery-stage { position: relative; margin-top: 0; }
/* Photos produits systématiquement carrées (2000×2000) — le visualiseur épouse ce format, aucun rognage. */
.gallery-main {
	display: block; width: 100%; overflow: hidden; cursor: zoom-in;
	border: 1px solid rgba(255, 255, 255, .14); /* cadre discret, 1px, faible opacité */
	background: transparent; aspect-ratio: 1;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-main--placeholder { cursor: default; background: rgba(255, 255, 255, .04); }
/* Le viewer principal est un <button> : neutraliser tout le chrome par défaut du navigateur
   (padding/bordure/fond) qui créait la bande claire visible autour de la photo. */
.gallery-main .product-gallery-zoom {
	display: block; width: 100%; height: 100%; margin: 0; padding: 0;
	border: 0; background: none; font: inherit; cursor: zoom-in;
}
.inventory-seal {
	position: absolute; right: -42px; top: 40px; width: 120px; height: 120px;
	border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; display: grid; place-items: center;
	text-align: center; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
	transform: rotate(7deg); line-height: 1.5;
}
/* Miniatures légèrement plus présentes (~10%) : la rangée déborde un peu du cadre de la photo. */
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; width: calc(100% + 10%); margin-inline: -5%; }
.thumb {
	display: block; width: 100%; border: 1px solid rgba(255, 255, 255, .22); background: #30261f;
	aspect-ratio: 1; overflow: hidden; cursor: pointer; padding: 0; opacity: .78;
	transition: opacity .3s ease, border-color .3s ease;
}
.thumb:hover { opacity: 1; border-color: rgba(255, 255, 255, .5); }
.thumb.active { opacity: 1; border-color: #a8c4b8; }

.summary { width: 100%; margin-top: 0; }
@media (min-width: 1200px) {
	.summary { min-width: 540px; }
}
.summary .eyebrow { color: #a8c4b8; }
.product-title { margin-top: 18px; }
.product-title .title-line {
	display: block;
	font-family: var(--serif);
	font-size: clamp(3.2rem, 4.3vw, 5rem); /* -9% : deux lignes, jamais trois */
	letter-spacing: -.03em;
	line-height: 1.04;
	color: #fff;
	white-space: nowrap; /* "Lampe feutrée" tient sur sa ligne, "Olympe" sur la sienne */
}
.product-title .title-line--accent {
	color: #a8c4b8;
	margin-top: .06em;
}
.subtitle { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: #cbbdad; margin-top: 22px; }
/* Léger ajustement optique : le texte du fil d'Ariane a un blanc au-dessus de sa capitale
   (métrique de fonte) qui le fait paraître plus bas que le bord net de la photo. */
.product-breadcrumb { font-size: .72rem; color: rgba(255, 255, 255, .5); margin-top: -6px; }
.product-breadcrumb a { color: rgba(255, 255, 255, .7); text-decoration: underline; }

.badges { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0; }
.badge {
	border: 0; border-bottom: 1px solid rgba(255, 255, 255, .3); padding: 0 0 5px;
	font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .75);
	background: none;
}
.badge.active { color: #fff; border-color: #a8c4b8; }

.lead { font-family: var(--serif); font-size: 1.25rem; line-height: 1.5; color: #eee5da; max-width: 54ch; }
.lead p { color: inherit; }

/* 2×2 : à 4 colonnes, des valeurs réalistes ("Laiton, acier, verre soufflé") repassaient
   à la ligne mot par mot faute de largeur. */
.quick-specs {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 40px;
	border-top: 1px solid rgba(255, 255, 255, .16); border-bottom: 1px solid rgba(255, 255, 255, .16);
	padding: 30px 0; margin: 36px 0;
}
.quick-specs small { display: block; text-transform: uppercase; letter-spacing: .16em; color: #a9917c; font-size: .62rem; margin-bottom: 8px; }
.quick-specs strong { display: block; font-weight: 400; font-family: var(--serif); font-size: 1.1rem; color: #fff; line-height: 1.35; }

/* Bloc prix/stock/CTA — recomposé en colonne : prix, puis stock, puis CTA+cœur
   comme un seul ensemble. L'objet domine, ce bloc ne fait qu'accompagner. */
.purchase { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.purchase-price { display: flex; flex-direction: column; gap: 10px; }
/* Blanc cassé, sans-serif : le prix ne doit plus être la première chose que l'œil voit.
 * Règle blindée (!important) : woocommerce_template_single_price() génère son propre
 * <p class="price"> à l'intérieur de notre <div class="price">, et la feuille de style
 * par défaut de WooCommerce cible ".woocommerce div.product p.price" (spécificité 0-2-2),
 * plus précise que notre ancien ".price" seul (0-1-0) — elle gagnait systématiquement.
 * On cible directement chaque niveau du DOM réel, sans dépendre d'un "color:inherit"
 * fragile, pour une valeur exacte et non approximative. */
/* SILLAGE — RISK : prix en monospace (var(--mono)), plus étroit à taille
   égale qu'un sans-serif — taille réduite en conséquence pour un poids
   visuel comparable, pas pour l'amoindrir. */
.sillage-product .purchase-price .price,
.sillage-product .purchase-price .price .woocommerce-Price-amount,
.sillage-product .purchase-price .price bdi {
	color: #f6f2ec !important;
	font-size: 42px !important;
	font-weight: 700 !important;
	font-family: var(--mono) !important;
	letter-spacing: 0;
}
.stock-note { color: #a9917c; font-size: .72rem; letter-spacing: .04em; }
/* WooCommerce imprime aussi son propre "X en stock" (classe native .stock) dans le
   formulaire d'ajout au panier — on garde uniquement notre .stock-note sous le prix. */
.purchase-actions .stock { display: none; }
/* CTA et cœur : un seul ensemble visuel, un second CTA discret et rapproché. */
.purchase-actions { display: flex; align-items: center; gap: 22px; flex-wrap: nowrap; margin-top: 6px; }
/* Message d'échec de l'ajout au panier (pièce déjà retirée du stock, etc.) —
   affiché à la place d'un rechargement de la page (voir product.js,
   showInlineCartError()). */
.sillage-cart-inline-error { margin-top: 12px; font-size: .82rem; color: #b3413a; }
.favorite {
	box-sizing: border-box; align-self: center;
	border: 1px solid rgba(255, 255, 255, .3); width: 52px; height: 52px; background: transparent; color: rgba(255, 255, 255, .8);
	display: grid; place-items: center; cursor: pointer; border-radius: 50%; flex-shrink: 0; padding: 0; line-height: 1;
	transition: border-color .4s ease, color .4s ease;
}
.favorite:hover { border-color: #a8c4b8; color: #a8c4b8; }
.favorite svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.favorite[aria-pressed="true"] { color: #a8c4b8; border-color: #a8c4b8; }
.favorite[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); }
}
.adopted-note { margin-top: 14px; font-size: .82rem; color: #a8c4b8; }

/* Native WooCommerce add-to-cart form — CTA Sillage : fond bronze conservé, texte ivoire, survol noir. */
.purchase-actions form.cart { display: flex; align-items: center; gap: 14px; margin: 0; }
.purchase-actions .quantity { display: inline-flex; }
.purchase-actions .qty {
	box-sizing: border-box; width: 56px; height: 72px; padding: 0 6px; border: 1px solid rgba(255, 255, 255, .35); background: transparent;
	color: #fff; text-align: center; font: inherit;
}
/* CTA Sillage — plus proche d'un bouton de galerie : un peu moins large (-15%), un peu
   plus haute, texte parfaitement centré (line-height:1 + box-sizing:border-box évitent
   tout décalage optique) ; règle volontairement blindée (!important) car un style
   WooCommerce/plugin chargé après le nôtre affichait encore le violet par défaut. */
.sillage-product .single_add_to_cart_button,
.sillage-product .purchase-actions .btn-primary {
	box-sizing: border-box !important;
	display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important;
	width: auto !important; max-width: none !important; white-space: nowrap !important;
	height: 72px !important; padding: 0 24px !important; margin: 0 !important; line-height: 1 !important;
	background: #6f9483 !important; color: #f7f2e9 !important; border: 1px solid #6f9483 !important;
	border-radius: 0 !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important;
	text-transform: uppercase !important; letter-spacing: .16em !important; font-size: .68rem !important; font-weight: 700 !important;
	cursor: pointer; transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}
.sillage-product .single_add_to_cart_button::after { content: "→"; }
.sillage-product .single_add_to_cart_button:hover,
.sillage-product .single_add_to_cart_button:focus,
.sillage-product .purchase-actions .btn-primary:hover {
	background: #171411 !important; color: #f7f2e9 !important; border-color: #f7f2e9 !important;
}

/* "Adopter cet objet" — AJAX add-to-cart states (see product.js). Brief
   loading dim while the request is in flight, then a checkmark instead of
   the arrow for a moment once the photo has flown to the cart icon. */
.sillage-product .single_add_to_cart_button.sillage-adding { opacity: .6; pointer-events: none; }
.sillage-product .single_add_to_cart_button.sillage-added::after { content: "✓"; }

/* The cloned product photo that flies from the gallery to the header cart
   icon. Appended to <body> (outside .sillage-product), so left unscoped by
   design — product.css only loads on product pages, so there's no risk of
   this leaking onto any other page. */
.sillage-fly-to-cart {
	position: fixed;
	z-index: 9999;
	border-radius: 50%;
	object-fit: cover;
	pointer-events: none;
	transition: transform 1.15s cubic-bezier(.22, 1, .36, 1), opacity 1.15s ease .35s;
	will-change: transform, opacity;
}

#site-cart-link.sillage-cart-bump { animation: sillage-cart-bump .42s ease; }
@keyframes sillage-cart-bump {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}
/* SILLAGE — RISK : geste signature — l'objet "arrive" au panier comme un
   sceau qu'on presse : un anneau part du centre de l'icône et s'évanouit,
   plutôt qu'un simple badge qui change de chiffre. Neutralisé avec le reste
   des animations par la règle prefers-reduced-motion globale (main.css). */
#site-cart-link.sillage-cart-bump:after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 28px;
	height: 28px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	animation: sillage-cart-stamp .5s ease-out;
	pointer-events: none;
}
@keyframes sillage-cart-stamp {
	0% { transform: scale(.6); opacity: 1; }
	100% { transform: scale(2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	#site-cart-link.sillage-cart-bump { animation: none; }
	#site-cart-link.sillage-cart-bump:after { content: none; }
}

/* ---------- Rythme général des chapitres ---------- */
.sillage-product section.chapter { padding: clamp(90px, 10vw, 160px) 0; }
.sillage-product .chapter.dark { background: var(--charcoal); color: #fff; }
.sillage-product .chapter.dark p { color: #c5b9ad; }
.sillage-product .chapter.dark .eyebrow { color: #a8c4b8; }

/* ---------- Présentation : double page éditoriale ---------- */
.chapter.presentation .wrap { max-width: 1620px; }

/* H2 de cette strate uniquement — ne touche pas les autres chapitres. -12% supplémentaires : le texte reprend le dessus. */
.presentation-head h2 { font-size: clamp(2.05rem, 2.8vw, 3.25rem); color: #fff; }

.presentation-head { max-width: 1200px; margin-bottom: 72px; }
.presentation-head .intro {
	font-family: var(--serif); font-size: clamp(1.25rem, 1.5vw, 1.55rem); line-height: 1.4;
	color: #d9c9b8; margin-top: 26px; max-width: 60ch; white-space: normal;
}
.presentation-head .intro p { color: inherit; }

.presentation-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 5.5vw; align-items: center; }
.presentation-image {
	/* Photo produit carrée (2000×2000) — pas de recadrage forcé. */
	aspect-ratio: 1; overflow: hidden;
	margin-block: -40px; /* léger débordement : la photo participe au rythme, pas seulement posée à côté du texte */
}
.presentation-image img { width: 100%; height: 100%; object-fit: cover; }
.presentation-copy .body { max-width: 60ch; font-size: 1.06rem; }
.presentation-copy .body p { margin-bottom: 20px; }
.presentation-copy .body p:last-child { margin-bottom: 0; }

.editorial-columns {
	display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; margin-top: 72px;
	padding-top: 48px; border-top: 1px solid rgba(255, 255, 255, .14);
}
/* Petit label discret : un seul vrai titre dans ce bloc (le corps de texte qui suit), jamais deux. */
.editorial-columns h3.editorial-label {
	font-family: var(--sans); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
	color: #a8c4b8; font-weight: 700; margin-bottom: 18px; line-height: 1.4;
}

/* ---------- Intervention ---------- */
.intervention { background: var(--paper-soft); }
.intervention-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; }
.stack > * + * { margin-top: 30px; }
.item { padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.item h3 { font-size: 1.22rem; margin-bottom: 10px; }
.item ul { margin: 10px 0 0; padding-left: 20px; color: var(--muted); }
.item p { margin-top: 4px; }
.detail-image { margin-top: 40px; aspect-ratio: 1; overflow: hidden; }
.detail-image img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Caractéristiques ---------- */
.specs { background: var(--stone); }
.spec-wrap { max-width: 900px; }
.spec-table { margin-top: 44px; border-top: 1px solid rgba(23, 20, 17, .28); }
.spec-row { display: grid; grid-template-columns: 220px 1fr; padding: 18px 0; border-bottom: 1px solid rgba(23, 20, 17, .18); }
.spec-row strong { font-family: var(--serif); font-weight: 400; }
.spec-row span a { color: var(--tobacco); text-decoration: underline; }

/* ---------- Histoire ---------- */
.history { background: var(--paper); }
.history-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 8vw; align-items: start; }
.history-copy > * + * { margin-top: 28px; }
.maker-card { position: sticky; top: 30px; border: 1px solid var(--line); padding: 36px; background: var(--paper-soft); }
.maker-card img { aspect-ratio: 16/10; object-fit: cover; margin-bottom: 25px; width: 100%; }
.maker-card .eyebrow { color: var(--bronze); }
/* Un pays + une période historique très longs (ou sans espaces) ne doivent
   jamais faire déborder la fiche hors de sa colonne "sticky". */
.maker-card p { overflow-wrap: break-word; }

/* ---------- Archives ---------- */
.archives { background: var(--tobacco); color: #fff; }
.archives p { color: #d8c7ba; }
.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 50px; }
.archive-card { border-top: 1px solid rgba(255, 255, 255, .3); padding-top: 20px; }
.product-archive-image { display: block; width: 100%; border: 0; padding: 0; cursor: zoom-in; background: none; overflow: hidden; }
/* object-fit: contain (pas cover) — un document d'archive vertical ou
   horizontal ne doit jamais être rogné pour remplir le cadre comme une
   photo produit : il s'affiche en entier, en médaillon sur un fond neutre,
   ce qui préserve son identité "document", pas "objet à vendre". */
.archive-card img { aspect-ratio: 4/3; object-fit: contain; background: rgba(0, 0, 0, .15); margin-bottom: 22px; filter: sepia(.35); width: 100%; transition: transform .5s ease; }
.product-archive-image:hover img, .product-archive-image:focus-visible img { transform: scale(1.02); }
.archive-card time { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: #9dbfae; }
.archive-card h3 { font-size: 1.3rem; margin: 12px 0; color: #fff; }
.archive-source { font-style: italic; font-size: .82rem; }

/* ---------- Galerie immersive ---------- */
.immersive { background: var(--paper-soft); }
.gallery-section { margin-top: 55px; }
.gallery-section:first-of-type { margin-top: 0; }
.gallery-section h3 { margin-bottom: 20px; }
.mosaic { display: grid; grid-template-columns: 1.4fr .8fr .8fr; grid-auto-rows: 290px; gap: 12px; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic button:first-child { grid-row: span 2; }
.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pack-grid img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.product-immersive-image { display: block; width: 100%; height: 100%; border: 0; padding: 0; cursor: zoom-in; background: none; }

/* ---------- Citation — une respiration, pas une nouvelle page ---------- */
.quote-section {
	position: relative; min-height: 420px; padding: clamp(70px, 9vw, 120px) 0;
	display: grid; place-items: center; text-align: center;
	color: #fff; background-position: center; background-size: cover; background-repeat: no-repeat;
}
.quote-section blockquote { font-family: var(--serif); font-size: clamp(1.7rem, 3.3vw, 3.6rem); line-height: 1.2; max-width: 900px; margin: 0; padding: 0 var(--pad); }

/* ---------- Produits associés ---------- */
.related { background: var(--paper); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.product-card { background: #e7ded2; transition: box-shadow .3s ease; }
.product-card a { display: block; overflow: hidden; }
.product-card img { aspect-ratio: 4/5; object-fit: cover; width: 100%; transition: transform .5s ease; }
.product-card:hover { box-shadow: 0 16px 34px rgba(23, 20, 17, .12); }
.product-card:hover img { transform: scale(1.02); }
.product-card-copy { padding: 22px; }
.product-card-copy h3 { font-size: 1.5rem; }
.product-card-copy p { margin-top: 12px; }

/* ---------- Lightbox ---------- */
.sillage-lightbox {
	position: fixed; inset: 0; z-index: 9998; background: rgba(15, 12, 10, .94);
	display: none; align-items: center; justify-content: center; padding: 5vw;
}
.sillage-lightbox.is-open { display: flex; }
.sillage-lightbox img { max-width: 100%; max-height: 88vh; width: auto; height: auto; object-fit: contain; }
.sillage-lightbox-close {
	position: absolute; top: 24px; right: var(--pad); width: 44px; height: 44px;
	border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #fff;
	font-size: 1.4rem; cursor: pointer; border-radius: 50%;
}

.sillage-product :focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

/* ---------- Animations d'entrée du Hero (au chargement uniquement, jamais au scroll) ---------- */
@keyframes sillage-rise {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes sillage-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
.gallery-stage { animation: sillage-rise .65s ease-out both; }
.product-breadcrumb,
.summary .eyebrow { animation: sillage-fade .55s ease-out .1s both; }
.product-title { animation: sillage-rise .6s ease-out .2s both; }
.subtitle,
.badges,
.lead,
.quick-specs { animation: sillage-fade .55s ease-out .35s both; }
.purchase { animation: sillage-fade .6s ease-out .5s both; }

@media (prefers-reduced-motion: reduce) {
	.gallery-stage,
	.product-breadcrumb,
	.summary .eyebrow,
	.product-title,
	.subtitle,
	.badges,
	.lead,
	.quick-specs,
	.purchase { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.hero-grid,
	.presentation-grid,
	.intervention-grid,
	.history-grid { grid-template-columns: 1fr; }
	.product-hero { padding-top: calc(88px + 32px); }
	.gallery-stage { max-width: 720px; margin: 0 auto; }
	.inventory-seal { right: 18px; }
	.product-title .title-line { white-space: normal; }
	.presentation-image { margin-block: 0; max-width: 520px; margin-inline: auto; }
	.archive-grid,
	.product-grid { grid-template-columns: 1fr 1fr; }
	.mosaic { grid-template-columns: 1fr 1fr; }
	.mosaic button:first-child { grid-row: auto; }
	.maker-card { position: static; }
	.editorial-columns { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.product-title .title-line { font-size: 2.6rem; }
	.sillage-product .purchase-price .price,
	.sillage-product .purchase-price .price .woocommerce-Price-amount,
	.sillage-product .purchase-price .price bdi { font-size: 28px !important; }
	.purchase { align-items: flex-start; flex-direction: column; }
	.purchase-actions { width: 100%; }
	.purchase-actions form.cart { flex: 1; width: 100%; }
	.sillage-product .single_add_to_cart_button { flex: 1; width: 100%; white-space: normal !important; height: auto !important; min-height: 52px; padding: 12px 20px !important; }
	.quick-specs,
	.archive-grid,
	.product-grid,
	.pack-grid { grid-template-columns: 1fr; }
	.spec-row { grid-template-columns: 1fr; gap: 6px; }
	.mosaic { grid-template-columns: 1fr; grid-auto-rows: auto; }
	.mosaic img { aspect-ratio: 4/5; }
	.thumbs { grid-template-columns: repeat(4, 1fr); }
	.inventory-seal { display: none; }
	.favorite,
	.thumb,
	.badge { min-height: 44px; }
	.thumb { min-height: 0; }
}