/* Cru « Alène » — l'atelier de maroquinerie.
   Craie, cognac, vert forêt, et le fil de lin jaune du point sellier.
   Instrument Serif pour les titres (l'italique surtout), Albert Sans pour le reste.
   Des arrondis généreux, des coutures en pointillés, des estampes frappées à chaud. */

@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif.c008db4e8a97.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-italic.26082c73a711.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("../fonts/albert-sans.fe161fcb628d.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("../fonts/albert-sans-italic.27dd4363893d.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }

:root {
  --craie: #ece8df; --lin: #f6f3ec; --ardoise: #1c1c1e; --encre: #1c1c1e;
  --cognac: #b06f3a; --cognac-sombre: #7a4520; --foret: #22403a; --fil: #e2b957;
  --fumee: #77706a; --blanc: #fbfaf7;
  --ligne: color-mix(in srgb, var(--encre), transparent 85%);
  --ligne-forte: color-mix(in srgb, var(--encre), transparent 60%);
  --ligne-claire: color-mix(in srgb, var(--craie), transparent 75%);
  --titre: "Instrument Serif", "Times New Roman", serif;
  --texte: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  --rayon: 18px;
  --sortie: cubic-bezier(0, 0, 0, 1);
  --marge: clamp(20px, 5vw, 72px);
  --entete: 72px;
  --ombre: 0 30px 60px -36px color-mix(in srgb, var(--encre), transparent 55%);
}

/* ---------- socle ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--craie); color: var(--encre); font-family: var(--texte); font-size: 17px; line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; }
body.menu-ouvert, body.tiroir-ouvert { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
legend { padding: 0; }
.petit { font-size: 13px; letter-spacing: 0.01em; color: var(--fumee); }
.mono { font-variant-numeric: tabular-nums; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: -9999px; top: 8px; background: var(--foret); color: var(--craie); padding: 8px 14px; z-index: 1000; border-radius: 999px; }
.evitement:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--cognac); outline-offset: 3px; }

/* ---------- typographie ---------- */
.titre-geant, .titre-page, .titre-section, .titre-moyen { font-family: var(--titre); font-weight: 400; line-height: 0.96; letter-spacing: -0.015em; text-wrap: balance; }
.titre-geant { font-size: clamp(72px, 14vw, 200px); line-height: 0.88; }
.titre-page { font-size: clamp(44px, 7vw, 96px); }
.titre-section { font-size: clamp(36px, 5vw, 68px); }
.titre-moyen { font-size: clamp(28px, 3vw, 40px); }
.titre-geant em, .titre-page em, .titre-section em, .titre-moyen em, .etabli-accroche em { font-style: italic; color: var(--cognac); }
.surtitre { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--cognac); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.surtitre::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cognac); }
.texte-doux { color: var(--fumee); max-width: 60ch; font-weight: 400; }
.lien-souligne { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: var(--cognac); transition: color 400ms, text-decoration-thickness 300ms; }
.lien-souligne:hover { color: var(--cognac); text-decoration-thickness: 2px; }
.prose p + p { margin-top: 1em; }
.prose h2 { font-family: var(--titre); font-size: 30px; margin: 1.6em 0 0.5em; }
.prose ul { list-style: disc; padding-left: 1.2em; margin: 0.6em 0; }
.prose strong { font-weight: 600; }
.a-completer { background: color-mix(in srgb, var(--fil), transparent 60%); padding: 0 4px; border-radius: 4px; }

/* ---------- boutons : une couture qui se tend ---------- */
.bouton { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 15px 28px; border: 1.5px solid var(--encre); border-radius: 999px; font-weight: 600; font-size: 15px; letter-spacing: 0.01em; transition: background 400ms var(--sortie), color 400ms, border-color 400ms, transform 400ms var(--sortie), box-shadow 400ms; }
.bouton::after { content: ""; position: absolute; inset: 4px; border-radius: 999px; border: 1px dashed color-mix(in srgb, currentColor, transparent 60%); opacity: 0; transition: opacity 300ms; pointer-events: none; }
.bouton:hover, .bouton:focus-visible { background: var(--encre); color: var(--craie); transform: translateY(-1px); }
.bouton:hover::after { opacity: 1; }
.bouton-plein { background: var(--foret); border-color: var(--foret); color: var(--craie); }
.bouton-plein::after { border-color: color-mix(in srgb, var(--fil), transparent 30%); opacity: 1; }
.bouton-plein:hover { background: var(--cognac); border-color: var(--cognac); }
.bouton-clair { border-color: var(--craie); color: var(--craie); }
.bouton-clair:hover { background: var(--craie); color: var(--foret); }
.bouton-petit { padding: 10px 18px; font-size: 13px; }
.bouton-large { width: 100%; padding: 18px 28px; }
.bouton:disabled { opacity: 0.45; cursor: default; transform: none; }
.bouton-danger { border-color: var(--cognac-sombre); color: var(--cognac-sombre); }

/* ---------- bandeau, en-tête ---------- */
.bandeau { background: var(--foret); color: var(--craie); font-size: 13px; letter-spacing: 0.04em; text-align: center; padding: 8px var(--marge); }
.bandeau p::before, .bandeau p::after { content: "· · ·"; color: var(--fil); margin: 0 12px; letter-spacing: 0.2em; }
.entete { position: sticky; top: 0; z-index: 90; height: var(--entete); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--marge); background: color-mix(in srgb, var(--craie), transparent 6%); backdrop-filter: blur(12px); transition: transform 600ms var(--sortie), box-shadow 400ms; }
.entete.compacte { box-shadow: 0 1px 0 var(--ligne); }
.entete.cachee { transform: translateY(-100%); }
.marque { display: inline-flex; align-items: center; gap: 10px; font-family: var(--titre); font-size: 34px; letter-spacing: -0.01em; }
.marque-logo { height: 34px; width: auto; }
.marque-logo:not([src]), .marque-logo[src=""] { display: none; }
.navigation { display: flex; gap: 32px; justify-content: center; font-size: 15px; font-weight: 500; }
.navigation a { position: relative; padding: 6px 0; }
.navigation a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--cognac); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--sortie); border-radius: 2px; }
.navigation a:hover::after, .navigation a[aria-current="page"]::after { transform: scaleX(1); }
.entete-actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.bouton-panier { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; padding: 9px 8px 9px 16px; border: 1.5px solid var(--encre); border-radius: 999px; transition: background 400ms, color 400ms; }
.bouton-panier:hover { background: var(--encre); color: var(--craie); }
.bouton-panier-nombre { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; background: var(--cognac); color: var(--craie); border-radius: 999px; font-size: 13px; }
.bouton-panier-nombre.saute { animation: saute 600ms var(--sortie); }
@keyframes saute { 30% { transform: scale(1.4) rotate(-8deg); } }
.burger { display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.burger span { width: 22px; height: 1.5px; background: currentColor; transition: transform 500ms var(--sortie); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.menu-mobile { position: fixed; inset: var(--entete) 0 0; background: var(--foret); color: var(--craie); z-index: 89; padding: 40px var(--marge); display: flex; flex-direction: column; justify-content: space-between; }
.menu-mobile nav { display: grid; gap: 6px; }
.menu-mobile nav a { display: flex; align-items: baseline; gap: 18px; font-family: var(--titre); font-size: clamp(40px, 10vw, 72px); line-height: 1.05; }
.menu-mobile nav a small { font-family: var(--texte); font-size: 12px; color: var(--fil); letter-spacing: 0.1em; }
.menu-mobile-pied { display: grid; gap: 6px; font-size: 14px; color: color-mix(in srgb, var(--craie), transparent 35%); }

/* ---------- messages ---------- */
.messages { position: fixed; top: calc(var(--entete) + 8px); left: 50%; transform: translateX(-50%); z-index: 95; display: grid; gap: 6px; width: min(520px, calc(100vw - 32px)); }
.message { background: var(--foret); color: var(--craie); padding: 12px 18px; font-size: 14px; border-radius: 12px; border-left: 3px solid var(--fil); animation: descend 600ms var(--sortie); }
.message-error { background: var(--cognac-sombre); }
@keyframes descend { from { opacity: 0; transform: translateY(-10px); } }

/* ---------- sections communes ---------- */
main > section, main > .filtres, main > .resultats, main > .panier-page, main > .commander, main > .merci-corps, main > .fil, main > .produit, main > .tpe, main > .prose, main > .guides { padding-left: var(--marge); padding-right: var(--marge); }
.section-tete { padding-top: 110px; padding-bottom: 44px; max-width: 1100px; }
.section-tete .texte-doux { margin-top: 18px; }
.section-tete-ligne { display: flex; justify-content: space-between; align-items: end; gap: 24px; max-width: none; }
.page-tete { padding-top: 80px; padding-bottom: 44px; max-width: 1100px; }
.page-tete .texte-doux { margin-top: 18px; }
.page-tete-courte { padding-bottom: 24px; }
[data-fond-texte="clair"] { color: var(--craie); --ligne: var(--ligne-claire); --fumee: color-mix(in srgb, var(--craie), transparent 32%); }
[data-fond-texte="sombre"] { color: var(--encre); }
.pied-etiquette { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--fumee); margin-bottom: 14px; }

/* ---------- apparitions, titres mot à mot ---------- */
[data-apparition] { opacity: 0; transform: translateY(18px); transition: opacity 1200ms var(--sortie), transform 1200ms var(--sortie); transition-delay: calc(var(--i, 0) * 80ms); }
[data-apparition].visible, body.mode-edition [data-apparition] { opacity: 1; transform: none; }
[data-mots] .mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.08em 0.06em 0.12em; margin: -0.08em -0.06em -0.12em; }
[data-mots] .mot > span { display: inline-block; transform: translateY(110%); transition: transform 1400ms var(--sortie); transition-delay: calc(var(--m) * 70ms); }
[data-mots].mots-visibles .mot > span { transform: none; }

/* ---------- estampes (frappées à chaud), coutures, pastilles ---------- */
.estampe { position: absolute; top: 14px; left: 14px; padding: 6px 12px; border-radius: 999px; background: var(--cognac); color: var(--craie); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.25); text-shadow: 0 1px 0 rgba(0,0,0,0.25); }
.estampe-commande { background: var(--foret); }
.estampe-nouveau { background: var(--fil); color: var(--encre); text-shadow: none; }
.estampe-grande { font-size: 13px; padding: 8px 16px; top: 20px; left: 20px; }
.estampe-paye { position: absolute; top: auto; bottom: 90px; right: 26px; left: auto; font-size: 18px; padding: 10px 20px; transform: rotate(-8deg); animation: estamper 700ms var(--sortie) both; }
@keyframes estamper { from { opacity: 0; transform: rotate(-8deg) scale(2); } }
.couture-cadre { position: relative; }
.couture-cadre::after { content: ""; position: absolute; inset: 8px; border-radius: calc(var(--rayon) - 6px); border: 1.5px dashed color-mix(in srgb, var(--fil), transparent 20%); pointer-events: none; }
.fiche-note { display: inline-flex; gap: 4px; }
.fiche-note i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--cognac); }
.fiche-note i.plein { background: var(--cognac); }
.pastille { width: 30px; height: 30px; border-radius: 50%; background: var(--c); border: 2px solid var(--craie); box-shadow: 0 0 0 1px var(--ligne-forte); transition: transform 300ms var(--sortie), box-shadow 300ms; }
.pastille[aria-pressed="true"], .pastille:hover { transform: scale(1.15); box-shadow: 0 0 0 2px var(--encre); }

/* ---------- 1. l'établi (héros) ---------- */
.etabli { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); height: clamp(560px, calc(100svh - var(--entete)), 880px); align-items: stretch; }
.etabli-texte { display: grid; gap: 26px; align-content: center; padding: 60px 0 60px; padding-right: clamp(20px, 5vw, 72px); }
.etabli-accroche { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.4; max-width: 34ch; text-wrap: pretty; }
.etabli-accroche em { font-family: var(--titre); font-size: 1.15em; }
.etabli-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.etabli-chiffres { display: flex; gap: 40px; border-top: 1px dashed var(--ligne-forte); padding-top: 22px; margin-top: 10px; }
.etabli-chiffres dt { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fumee); font-weight: 600; }
.etabli-chiffres dd { font-family: var(--titre); font-size: 30px; line-height: 1.1; margin-top: 4px; }
.etabli-chiffres dd b { font-weight: 400; color: var(--cognac); font-size: 40px; }
.etabli-chiffres dd small { font-family: var(--texte); font-size: 13px; color: var(--fumee); display: block; }
.etabli-photo { position: relative; overflow: hidden; border-radius: var(--rayon) 0 0 var(--rayon); margin: 24px calc(-1 * var(--marge)) 24px 0; }
.etabli-photo img { width: 100%; height: 100%; object-fit: cover; }
.couture { position: absolute; inset: 0; width: 100%; height: 100%; }
.couture-trace { fill: none; stroke: var(--fil); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 14 10; vector-effect: non-scaling-stroke; stroke-dashoffset: var(--long, 2000); transition: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5)); }
.couture-trace.cousue { animation: coudre 3200ms cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.couture-trace-2.cousue { animation-delay: 1200ms; }
@keyframes coudre { to { stroke-dashoffset: 0; } }
.alene { position: absolute; left: var(--x, -10%); top: var(--y, 15%); width: 46px; height: 5px; background: linear-gradient(90deg, #8a8a8a, #ddd 60%, var(--cognac-sombre) 60%, var(--cognac) 100%); border-radius: 3px; transform: rotate(-30deg); box-shadow: 0 2px 4px rgba(0,0,0,0.4); opacity: 0; }
.alene.visible { opacity: 1; transition: left 3200ms cubic-bezier(0.4, 0, 0.2, 1), top 3200ms cubic-bezier(0.4, 0, 0.2, 1); }

/* ---------- 2. qu'emportez-vous ? ---------- */
.emportez { padding-bottom: 110px; }
.emportez-choix { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.jeton { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1.5px solid var(--ligne-forte); border-radius: 999px; font-size: 15px; font-weight: 500; text-transform: capitalize; transition: background 300ms, color 300ms, border-color 300ms, transform 300ms var(--sortie); }
.jeton small { font-size: 11px; color: var(--fumee); }
.jeton:hover { border-color: var(--encre); transform: translateY(-1px); }
.jeton[aria-pressed="true"] { background: var(--foret); border-color: var(--foret); color: var(--craie); }
.jeton[aria-pressed="true"] small { color: var(--fil); }
.emportez-compte { margin-bottom: 24px; }
.grille-pieces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grille-pieces-large { grid-template-columns: repeat(4, 1fr); }
.piece { position: relative; background: var(--lin); border-radius: var(--rayon); overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: transform 700ms var(--sortie), box-shadow 700ms var(--sortie), opacity 500ms, filter 500ms; box-shadow: 0 1px 0 var(--ligne); }
.piece:hover { transform: translateY(-4px); box-shadow: var(--ombre); }
.piece.estompee { opacity: 0.28; filter: grayscale(0.6); }
.piece.estompee:hover { transform: none; box-shadow: 0 1px 0 var(--ligne); }
.piece-photo { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--craie); }
.piece-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--sortie); }
.piece:hover .piece-photo img { transform: scale(1.04); }
.epuisee .piece-photo img { filter: grayscale(1); opacity: 0.6; }
.piece-corps { padding: 18px 20px 20px; display: grid; gap: 6px; align-content: start; }
.piece-cuir { text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; font-weight: 600; }
.piece-nom { font-family: var(--titre); font-size: 30px; line-height: 1; }
.piece-accroche { font-size: 14px; color: var(--fumee); line-height: 1.45; }
.piece-bas { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.piece-coloris { display: inline-flex; gap: 5px; }
.piece-coloris i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }
.piece-prix { font-weight: 600; font-size: 15px; }

/* ---------- 3. le nuancier des cuirs ---------- */
.nuancier { padding-bottom: 110px; }
.echantillons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.echantillon { display: grid; gap: 10px; text-align: left; }
.echantillon-face { display: block; aspect-ratio: 1; border-radius: var(--rayon); background: var(--c); overflow: hidden; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12), inset 0 -20px 40px -20px rgba(0,0,0,0.35); transition: transform 600ms var(--sortie), box-shadow 600ms var(--sortie); }
.echantillon-face::before { content: ""; position: absolute; top: 14px; left: 14px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #eee, #999 70%); box-shadow: 0 1px 2px rgba(0,0,0,0.5); z-index: 2; }
.echantillon-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 600ms var(--sortie); }
.echantillon:hover .echantillon-face, .echantillon[aria-expanded="true"] .echantillon-face { transform: rotate(-3deg) translateY(-6px); box-shadow: var(--ombre), inset 0 0 0 1px rgba(0,0,0,0.12); }
.echantillon:hover .echantillon-face img, .echantillon[aria-expanded="true"] .echantillon-face img { opacity: 1; }
.echantillon[aria-expanded="true"] .echantillon-face { outline: 2px solid var(--encre); outline-offset: 3px; }
.echantillon-nom { font-family: var(--titre); font-size: 22px; line-height: 1; }
.echantillon-detail { font-size: 12px; }
.nuancier-fiche { margin-top: 30px; }
.cuir-fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; background: var(--lin); border-radius: var(--rayon); padding: 32px; animation: descend 600ms var(--sortie); }
.cuir-fiche-texte { display: grid; gap: 12px; align-content: start; }
.cuir-fiche-pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; align-content: start; }
.cuir-fiche-pieces a { display: grid; gap: 6px; font-size: 13px; font-weight: 500; }
.cuir-fiche-pieces img { aspect-ratio: 1; object-fit: cover; border-radius: 12px; }

/* ---------- 4. la patine ---------- */
.patine { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; background: var(--foret); color: var(--craie); padding-top: 100px; padding-bottom: 100px; }
.patine .surtitre { color: var(--fil); }
.patine .surtitre::before { background: var(--fil); }
.patine .texte-doux { color: color-mix(in srgb, var(--craie), transparent 30%); margin: 18px 0 30px; }
.patine-curseur { display: grid; gap: 12px; }
.patine-curseur .petit { color: color-mix(in srgb, var(--craie), transparent 30%); font-size: 14px; }
.patine-curseur b { font-family: var(--titre); font-size: 40px; color: var(--fil); font-weight: 400; margin: 0 4px; }
.patine-curseur input { appearance: none; width: 100%; height: 3px; background: color-mix(in srgb, var(--craie), transparent 70%); border-radius: 2px; }
.patine-curseur input::-webkit-slider-thumb { appearance: none; width: 30px; height: 30px; border-radius: 50%; background: var(--fil); border: 3px solid var(--foret); box-shadow: 0 0 0 2px var(--fil); cursor: grab; }
.patine-curseur input::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--fil); border: 3px solid var(--foret); box-shadow: 0 0 0 2px var(--fil); cursor: grab; }
.patine-legende { margin-top: 10px; color: var(--fil); font-style: italic; font-family: var(--titre); font-size: 22px; }
.patine-photo { border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.patine-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: sepia(calc(var(--p, 0) * 0.55)) saturate(calc(1 + var(--p, 0) * 0.5)) contrast(calc(1 + var(--p, 0) * 0.18)) brightness(calc(1 - var(--p, 0) * 0.28)); transition: filter 500ms var(--sortie); }
.patine-page { border-radius: var(--rayon); margin: 40px var(--marge) 110px; padding-left: clamp(24px, 5vw, 72px); padding-right: clamp(24px, 5vw, 72px); }
main > .patine-page { padding-left: clamp(24px, 5vw, 72px); padding-right: clamp(24px, 5vw, 72px); }

/* ---------- 5. le graveur ---------- */
.graveur { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding-top: 110px; padding-bottom: 110px; }
.graveur-texte { display: grid; gap: 18px; justify-items: start; }
.graveur-texte .surtitre { margin-bottom: 0; }
.graveur-saisie { display: grid; gap: 8px; }
.graveur-saisie input, .gravure-ligne input { width: 200px; padding: 14px 18px; border: 1.5px solid var(--ligne-forte); border-radius: 14px; background: var(--lin); font-family: var(--titre); font-size: 28px; letter-spacing: 0.1em; text-transform: uppercase; }
.graveur-saisie input:focus, .gravure-ligne input:focus { outline: none; border-color: var(--encre); }
.graveur-couleurs { display: flex; gap: 10px; }
.graveur-cuir { position: relative; aspect-ratio: 5 / 4; border-radius: var(--rayon); background: var(--c); background-image: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.18), transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(0,0,0,0.25), transparent 60%); box-shadow: var(--ombre), inset 0 0 0 1px rgba(0,0,0,0.15); display: grid; place-items: center; transition: background 600ms var(--sortie); overflow: hidden; }
.graveur-cuir::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"); mix-blend-mode: overlay; pointer-events: none; }
.graveur-couture { position: absolute; inset: 16px; border-radius: calc(var(--rayon) - 6px); border: 2px dashed color-mix(in srgb, var(--fil), transparent 25%); pointer-events: none; }
.graveur-marque, .gravure-apercu b, .marque-photo { font-family: var(--titre); text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in srgb, var(--c), black 45%); text-shadow: 0 1px 0 rgba(255,255,255,0.28), 0 -1px 1px rgba(0,0,0,0.5); }
.graveur-marque { font-size: clamp(64px, 9vw, 130px); position: relative; z-index: 1; transition: transform 500ms var(--sortie); }
.graveur-marque.frappe { animation: frapper 500ms var(--sortie); }
@keyframes frapper { 30% { transform: scale(0.92); } 60% { transform: scale(1.03); } }

/* ---------- 6. le livre d'atelier ---------- */
.livre { padding-bottom: 110px; }
.pages-livre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.page-livre { position: relative; background: var(--lin); border-radius: var(--rayon); padding: 28px 28px 26px; display: grid; gap: 18px; align-content: start; }
.page-livre::before { content: "“"; position: absolute; top: 10px; right: 22px; font-family: var(--titre); font-size: 96px; line-height: 1; color: color-mix(in srgb, var(--cognac), transparent 75%); }
.page-livre blockquote { font-family: var(--titre); font-size: 24px; line-height: 1.25; text-wrap: pretty; }
.page-livre figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: var(--fumee); border-top: 1px dashed var(--ligne-forte); padding-top: 14px; }
.page-livre-piece { color: var(--cognac); font-weight: 600; }

/* ---------- 7. l'atelier (comptoir) ---------- */
.comptoir { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.comptoir-photo { border-radius: 0 var(--rayon) var(--rayon) 0; overflow: hidden; }
.comptoir-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 480px; }
.comptoir-texte { padding: 72px clamp(24px, 5vw, 72px); display: grid; gap: 22px; align-content: center; justify-items: start; }
.comptoir-modes { display: grid; border-top: 1px dashed var(--ligne-forte); width: 100%; }
.comptoir-modes li { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 14px 0; border-bottom: 1px dashed var(--ligne-forte); }
.comptoir-modes b { font-weight: 600; }
.comptoir-modes small { grid-column: 1 / -1; color: var(--fumee); font-size: 13px; }
.comptoir-modes .petit { text-align: right; }
.comptoir-modes-compact li { padding: 8px 0; }
main > .comptoir { padding-left: 0; padding-right: 0; }

/* ---------- pied ---------- */
.pied { background: var(--foret); color: var(--craie); padding: 80px var(--marge) 28px; margin-top: 40px; border-radius: var(--rayon) var(--rayon) 0 0; }
.pied-haut { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px dashed color-mix(in srgb, var(--fil), transparent 50%); }
.pied-nom { font-family: var(--titre); font-size: clamp(48px, 7vw, 96px); line-height: 0.9; }
.pied-baseline { margin: 16px 0 24px; max-width: 40ch; color: color-mix(in srgb, var(--craie), transparent 30%); }
.pied-lignes { display: grid; gap: 10px; font-size: 14px; color: color-mix(in srgb, var(--craie), transparent 25%); }
.pied .pied-etiquette { color: var(--fil); }
.pied-horaires { display: grid; gap: 4px; font-size: 14px; }
.pied-horaires li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed color-mix(in srgb, currentColor, transparent 80%); }
.pied-horaires .aujourd-hui { color: var(--fil); font-weight: 600; }
.pied-nav { display: grid; gap: 8px; }
.pied-nav a:hover { color: var(--fil); }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 22px; font-size: 13px; color: color-mix(in srgb, var(--craie), transparent 45%); }
.pied-bas nav { display: flex; flex-wrap: wrap; gap: 18px; }
.pied-bas a:hover { color: var(--craie); }

/* ---------- le tiroir (panier) ---------- */
.tiroir-voile { position: fixed; inset: 0; background: color-mix(in srgb, var(--foret), transparent 45%); z-index: 96; animation: fondu 400ms; }
@keyframes fondu { from { opacity: 0; } }
.tiroir { position: fixed; top: 12px; right: 12px; bottom: 12px; width: min(440px, calc(100vw - 24px)); background: var(--lin); z-index: 97; display: grid; grid-template-rows: auto 1fr auto; border-radius: var(--rayon); transform: translateX(calc(100% + 24px)); transition: transform 600ms var(--sortie); box-shadow: var(--ombre); overflow: hidden; }
.tiroir.ouvert { transform: none; }
.tiroir-tete { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px dashed var(--ligne-forte); }
.tiroir-titre { font-family: var(--titre); font-size: 28px; display: flex; gap: 10px; align-items: baseline; }
.tiroir-fermer { font-size: 28px; line-height: 1; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; transition: background 300ms; }
.tiroir-fermer:hover { background: var(--craie); }
.tiroir-corps { overflow-y: auto; padding: 8px 24px; }
.tiroir-vide { color: var(--fumee); padding: 24px 0; }
.ticket-lignes li { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; padding: 16px 0; border-bottom: 1px dashed var(--ligne-forte); align-items: start; }
.ticket-lignes li.retiree { animation: retirer 400ms var(--sortie) forwards; }
@keyframes retirer { to { opacity: 0; transform: translateX(20px); } }
.ticket-photo { width: 60px; aspect-ratio: 1; object-fit: cover; background: var(--craie); border-radius: 12px; }
.ticket-nom { font-weight: 600; line-height: 1.2; }
.ticket-nom small { display: flex; align-items: center; gap: 6px; font-weight: 400; color: var(--fumee); font-size: 13px; margin-top: 4px; }
.ticket-nom small i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }
.ticket-qte { font-size: 13px; color: var(--fumee); }
.ticket-prix { text-align: right; font-size: 15px; font-weight: 600; }
.ticket-outils { grid-column: 2 / -1; display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.ticket-outils .quantite { --taille: 32px; }
.ticket-outils .lien-souligne { font-size: 13px; color: var(--fumee); margin-left: auto; }
.ticket-alerte { grid-column: 1 / -1; font-size: 12px; color: var(--cognac-sombre); }
.tiroir-pied { padding: 18px 24px 24px; border-top: 1px solid var(--ligne); display: grid; gap: 12px; background: var(--craie); }
.jauge-port { display: grid; gap: 8px; }
.jauge-port-texte { font-size: 13px; color: var(--fumee); }
.jauge-port-texte b { color: var(--foret); }
.jauge-port-barre { height: 10px; border-radius: 999px; background: var(--lin); border: 1px solid var(--ligne-forte); position: relative; overflow: hidden; }
.jauge-port-barre i { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--p, 0) * 1%); background: repeating-linear-gradient(90deg, var(--fil) 0 8px, var(--foret) 8px 14px); transition: width 800ms var(--sortie); }
.ticket-total, .ticket-remise, .ticket-poids { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; }
.ticket-remise { color: var(--foret); }
.ticket-grand-total { font-weight: 700; font-size: 18px; border-top: 1px solid var(--encre); padding-top: 10px; margin-top: 4px; }
.ticket-grand-total b { font-size: 20px; }
.ticket-poids { font-size: 13px; color: var(--fumee); }
.tiroir-note { font-size: 13px; color: var(--fumee); }
.tiroir-lien { justify-self: center; font-size: 13px; }

/* ---------- quantité ---------- */
.quantite { --taille: 48px; display: inline-grid; grid-template-columns: var(--taille) 1fr var(--taille); border: 1.5px solid var(--encre); border-radius: 999px; height: var(--taille); min-width: calc(var(--taille) * 3.2); overflow: hidden; }
.quantite button { font-size: 18px; transition: background 300ms, color 300ms; }
.quantite button:hover { background: var(--encre); color: var(--craie); }
.quantite input { text-align: center; border: 0; background: transparent; font-size: 15px; font-weight: 600; width: 100%; min-width: 0; appearance: textfield; -moz-appearance: textfield; }
.quantite input::-webkit-inner-spin-button, .quantite input::-webkit-outer-spin-button { appearance: none; }

/* ---------- boutique : filtres ---------- */
.filtres { border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); position: sticky; top: var(--entete); background: var(--craie); z-index: 20; }
.filtres-categories { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; font-size: 15px; font-weight: 500; }
.filtres-categories a { padding: 16px 14px; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.filtres-categories a small { color: var(--fumee); font-size: 12px; }
.filtres-categories a[aria-current="page"] { border-bottom-color: var(--cognac); color: var(--cognac); }
.filtres-plus summary { cursor: pointer; padding: 12px 0; font-size: 14px; font-weight: 600; list-style: none; display: flex; gap: 10px; align-items: baseline; }
.filtres-plus summary::before { content: "+"; font-size: 16px; }
.filtres-plus[open] summary::before { content: "−"; }
.filtres-plus summary small { color: var(--fumee); font-weight: 400; }
.filtres-form { display: grid; grid-template-columns: 1.4fr 1.4fr 1fr auto; gap: 24px; padding: 8px 0 22px; align-items: start; }
.filtres-form legend { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--fumee); margin-bottom: 10px; }
.pastilles-filtre, .jetons { display: flex; flex-wrap: wrap; gap: 8px; }
.pastille-filtre, .jeton-filtre { position: relative; }
.pastille-filtre input, .jeton-filtre input { position: absolute; opacity: 0; }
.pastille-filtre i { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--ligne-forte); vertical-align: middle; margin-right: 6px; }
.pastille-filtre span, .jeton-filtre span { display: inline-flex; align-items: center; padding: 6px 12px 6px 6px; border: 1.5px solid var(--ligne-forte); border-radius: 999px; font-size: 13px; cursor: pointer; transition: background 300ms, color 300ms, border-color 300ms; }
.jeton-filtre span { padding: 6px 12px; }
.pastille-filtre input:checked ~ span, .jeton-filtre input:checked + span { background: var(--foret); color: var(--craie); border-color: var(--foret); }
.pastille-filtre input:focus-visible ~ span, .jeton-filtre input:focus-visible + span { outline: 2px solid var(--cognac); outline-offset: 2px; }
.pastille-filtre span { padding-left: 4px; }
.pastille-filtre i { margin-left: 2px; }
.filtres-actions { display: grid; gap: 10px; justify-items: start; padding-top: 22px; }
.resultats { padding-top: 22px; padding-bottom: 110px; }
.resultats-compte { text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; font-size: 12px; }
.resultats .grille-pieces { margin-top: 16px; }
.resultats-vide { padding: 48px 0; color: var(--fumee); }
.fil { padding-top: 22px; }
.fil a:hover { color: var(--cognac); }

/* ---------- fiche produit ---------- */
.produit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); padding-top: 24px; padding-bottom: 80px; }
.produit-photo { position: sticky; top: calc(var(--entete) + 20px); align-self: start; display: grid; gap: 14px; }
.cadre-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--lin); border-radius: var(--rayon); box-shadow: var(--ombre); }
.cadre-photo img { width: 100%; height: 100%; object-fit: cover; }
.marque-photo { position: absolute; right: 8%; bottom: 8%; font-size: clamp(22px, 3vw, 40px); --c: var(--cognac); pointer-events: none; animation: descend 500ms var(--sortie); }
.fiche-technique { background: var(--lin); border-radius: var(--rayon); padding: 20px 24px; display: grid; }
.fiche-technique div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--ligne); font-size: 14px; }
.fiche-technique div:last-child { border-bottom: 0; }
.fiche-technique dt { color: var(--fumee); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; font-weight: 600; align-self: center; }
.produit-choix { display: grid; gap: 28px; align-content: start; }
.produit-accroche { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.4; text-wrap: pretty; font-family: var(--titre); }
.achat { display: grid; gap: 26px; }
.achat legend { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--fumee); margin-bottom: 12px; display: flex; gap: 10px; align-items: baseline; }
.achat legend b { color: var(--encre); text-transform: none; letter-spacing: 0; font-size: 15px; }
.achat legend small { color: var(--cognac); text-transform: none; letter-spacing: 0; font-weight: 500; }
.coloris-liste { display: flex; flex-wrap: wrap; gap: 10px; }
.coloris-choix { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; padding: 10px 16px 10px 10px; border: 1.5px solid var(--ligne-forte); border-radius: 999px; cursor: pointer; transition: border-color 300ms, background 300ms, box-shadow 300ms; }
.coloris-choix input { position: absolute; opacity: 0; }
.coloris-choix i { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15), inset 0 -8px 12px -6px rgba(0,0,0,0.35); }
.coloris-choix:has(input:checked) { border-color: var(--encre); background: var(--lin); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fil), transparent 40%); }
.coloris-choix:has(input:focus-visible) { outline: 2px solid var(--cognac); outline-offset: 2px; }
.coloris-choix.epuise { opacity: 0.45; cursor: default; }
.coloris-nom { font-weight: 600; font-size: 15px; line-height: 1.1; }
.coloris-prix { font-size: 12px; }
.gravure-ligne { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.gravure-apercu { width: 120px; aspect-ratio: 1; border-radius: 14px; background: var(--c); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15), inset 0 -14px 24px -12px rgba(0,0,0,0.35); transition: background 400ms; }
.gravure-apercu b { font-size: 30px; font-weight: 400; }
.gravure .petit { margin-top: 10px; display: block; }
.achat-ligne { display: grid; grid-template-columns: auto 1fr; gap: 12px; }
.achat-ligne .bouton { justify-content: space-between; }
.achat-ok { color: var(--foret); font-weight: 600; margin-top: -12px; }
.produit-texte { max-width: 60ch; }
.produit-promesses { display: grid; border-top: 1px dashed var(--ligne-forte); font-size: 14px; }
.produit-promesses div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--ligne-forte); }
.produit-promesses dt { text-transform: uppercase; letter-spacing: 0.1em; color: var(--fumee); font-size: 11px; font-weight: 600; align-self: center; }
.produit-plus { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; padding-bottom: 80px; align-items: start; }
.cuir-carte { display: grid; grid-template-columns: 200px 1fr; gap: 24px; border-radius: var(--rayon); padding: 24px; background: var(--lin); border-left: 10px solid var(--c); }
.cuir-carte img { aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.cuir-carte .petit { margin: 8px 0 14px; }
.entretiens-liste { display: grid; border-top: 1px dashed var(--ligne-forte); }
.entretiens-liste a { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px dashed var(--ligne-forte); align-items: baseline; }
.entretiens-liste a:hover b { color: var(--cognac); }
.produit-avis, .semblables { padding-bottom: 110px; }
.produit-avis .pages-livre { margin-top: 20px; }
.semblables .section-tete { padding-top: 0; padding-bottom: 20px; }

/* ---------- l'atelier ---------- */
.gestes { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding-bottom: 110px; align-items: start; }
.gestes-photos { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.gestes-photos figure:first-child { grid-column: 1 / -1; }
.gestes-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); }
.gestes-photos figure:first-child img { aspect-ratio: 16 / 10; }
.gestes-texte { position: sticky; top: calc(var(--entete) + 30px); }
.gestes-texte .titre-section { margin-bottom: 24px; }
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--foret); color: var(--craie); padding-top: 60px; padding-bottom: 60px; gap: 24px; border-radius: var(--rayon); margin: 0 var(--marge); }
.chiffre { display: grid; gap: 8px; border-left: 1px dashed color-mix(in srgb, var(--fil), transparent 40%); padding-left: 20px; }
.chiffre b { font-family: var(--titre); font-weight: 400; font-size: clamp(40px, 5vw, 72px); color: var(--fil); line-height: 1; }
.chiffre span { font-size: 13px; color: color-mix(in srgb, var(--craie), transparent 30%); }
.tanneries { padding-bottom: 110px; }
.tanneries-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.tannerie { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 24px; background: var(--lin); border-radius: var(--rayon); border-left: 10px solid var(--c); }
.tannerie img, .tannerie-teinte { aspect-ratio: 1; object-fit: cover; border-radius: 12px; width: 100%; background: var(--c); display: block; }
.tannerie h3 { margin: 6px 0 10px; }
.tannerie p:nth-of-type(2) { max-width: 55ch; margin-bottom: 12px; }
.lettre { padding-top: 80px; padding-bottom: 110px; border-top: 1px dashed var(--ligne-forte); }
.lettre-interieur { max-width: 720px; }

/* ---------- formulaires ---------- */
.champ, .formulaire-champ { display: grid; gap: 6px; }
.champ label, .formulaire-champ label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--fumee); }
.champ label small, .formulaire-champ label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.champ input:not([type="checkbox"]), .champ textarea, .champ select, .formulaire-champ input:not([type="checkbox"]), .formulaire-champ textarea, .formulaire-champ select { width: 100%; padding: 14px 18px; border: 1.5px solid var(--ligne-forte); background: var(--lin); border-radius: 14px; transition: border-color 300ms, box-shadow 300ms; }
.champ input:focus, .champ textarea:focus, .formulaire-champ input:focus, .formulaire-champ textarea:focus { border-color: var(--encre); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--fil), transparent 50%); }
.champ textarea, .formulaire-champ textarea { min-height: 120px; resize: vertical; }
.champ.en-erreur input, .formulaire-champ.en-erreur input, .formulaire-champ.en-erreur textarea { border-color: var(--cognac-sombre); }
.errorlist, .formulaire-erreur { list-style: none; font-size: 13px; color: var(--cognac-sombre); }
.champ-case label, .formulaire-case { display: flex; gap: 12px; align-items: start; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 14px; color: var(--encre); }
.champ-case input, .formulaire-case input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--foret); flex: none; }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.champs-3 { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 16px; }
.form-erreurs { border: 1.5px solid var(--cognac-sombre); border-radius: 14px; padding: 12px 16px; color: var(--cognac-sombre); font-size: 14px; margin-bottom: 20px; }
.formulaire-bloc { display: grid; gap: 18px; }
.formulaire-titre { font-family: var(--titre); font-size: clamp(36px, 5vw, 60px); line-height: 0.96; }
.formulaire-intro { color: var(--fumee); max-width: 60ch; }
.formulaire { display: grid; gap: 18px; border-top: 1px dashed var(--ligne-forte); padding-top: 24px; }
.formulaire-aide { font-size: 13px; color: var(--fumee); }
.formulaire-merci { font-family: var(--titre); font-size: 30px; }
.formulaire-piege { position: absolute; left: -9999px; }
.formulaire-actions { justify-self: start; }

/* ---------- panier (page) ---------- */
.panier-page { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 40px; padding-bottom: 110px; align-items: start; }
.ticket { position: relative; background: var(--lin); border-radius: var(--rayon); padding: 24px 28px; display: grid; gap: 14px; box-shadow: 0 1px 0 var(--ligne); }
.ticket::before { content: ""; position: absolute; inset: 8px; border-radius: calc(var(--rayon) - 6px); border: 1.5px dashed color-mix(in srgb, var(--cognac), transparent 55%); pointer-events: none; }
.ticket-grand { padding: 28px 32px; }
.ticket-titre { font-size: 12px; text-align: center; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; border-bottom: 1px dashed var(--ligne-forte); padding-bottom: 12px; line-height: 1.7; }
.ticket-numero { font-size: 13px; color: var(--fumee); text-align: center; }
.ticket-numero b { color: var(--encre); font-size: 17px; }
.ticket-lignes-fixe li { grid-template-columns: auto 1fr auto; }
.ticket-adresse { font-size: 13px; color: var(--fumee); border-top: 1px dashed var(--ligne-forte); padding-top: 12px; }
.ticket-tva { font-size: 12px; text-align: right; }
.promo { display: grid; gap: 8px; padding: 14px 0; border-bottom: 1px dashed var(--ligne-forte); }
.promo label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--fumee); }
.promo-ligne { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.promo-ligne input { padding: 10px 14px; border: 1.5px solid var(--ligne-forte); border-radius: 999px; background: var(--lin); text-transform: uppercase; }
.promo-erreur { color: var(--cognac-sombre); font-size: 13px; }
.promo-ok { color: var(--foret); font-size: 13px; }
.promo-ok button { color: inherit; font-size: inherit; }
.panier-cote { display: grid; gap: 18px; position: sticky; top: calc(var(--entete) + 20px); }
.panier-note { font-size: 13px; }

/* ---------- commander ---------- */
.commander { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 48px; padding-bottom: 110px; align-items: start; }
.commander-form { display: grid; gap: 40px; }
.bloc-form { display: grid; gap: 16px; }
.bloc-form legend { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; color: var(--cognac); border-bottom: 1px dashed var(--ligne-forte); padding-bottom: 10px; margin-bottom: 20px; width: 100%; }
.modes-choix { display: grid; gap: 8px; }
.mode-choix { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; border: 1.5px solid var(--ligne-forte); border-radius: 16px; cursor: pointer; transition: border-color 300ms, background 300ms, box-shadow 300ms; }
.mode-choix:has(input:checked) { border-color: var(--encre); background: var(--lin); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fil), transparent 40%); }
.mode-choix input { accent-color: var(--foret); width: 18px; height: 18px; }
.mode-choix-corps { display: grid; gap: 2px; }
.mode-choix-corps b { font-weight: 600; }
.mode-choix-corps small { font-size: 13px; color: var(--fumee); }
.mode-choix-prix { font-weight: 600; }
.adresse { display: grid; gap: 16px; }
.retrait-note { font-size: 13px; }
.commander-recap { position: sticky; top: calc(var(--entete) + 20px); display: grid; gap: 16px; }
.commander-note { font-size: 13px; }

/* ---------- TPE de démonstration ---------- */
.tpe { max-width: 420px; margin: 0 auto 110px; border-radius: var(--rayon); background: var(--foret); color: var(--craie); padding: 26px; display: grid; gap: 22px; box-shadow: var(--ombre); }
.tpe-ecran { background: #1f2a1e; color: #c9f5b6; padding: 20px; display: grid; gap: 8px; font-size: 13px; letter-spacing: 0.06em; border-radius: 12px; font-family: Menlo, monospace; }
.tpe-montant { font-size: 34px; font-weight: 500; }
.tpe-clignote { animation: clignote 1.2s steps(2) infinite; }
@keyframes clignote { to { opacity: 0.3; } }
.tpe-touches { display: grid; gap: 10px; }
.tpe .bouton-petit { border-color: color-mix(in srgb, var(--craie), transparent 60%); color: var(--craie); }
.tpe .bouton-plein { background: var(--cognac); border-color: var(--cognac); }

/* ---------- merci, suivi ---------- */
.merci-corps { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr); gap: 48px; padding-bottom: 110px; align-items: start; }
.merci-corps .ticket { max-width: 420px; }
.merci-suite { display: grid; gap: 22px; justify-items: start; }
.pas { display: grid; gap: 0; border-top: 1px dashed var(--ligne-forte); width: 100%; }
.pas li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px dashed var(--ligne-forte); font-size: 15px; }
.pas b { font-family: var(--titre); font-size: 22px; color: var(--cognac); font-weight: 400; }
.frise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.frise li { display: grid; gap: 6px; padding-top: 18px; position: relative; border-top: 2px dashed var(--ligne); }
.frise li.faite { border-top: 2px solid var(--cognac); }
.frise li::before { content: ""; position: absolute; top: -9px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--craie); border: 2px solid var(--ligne-forte); }
.frise li.faite::before { background: var(--cognac); border-color: var(--cognac); }
.frise b { color: var(--fumee); font-size: 11px; font-weight: 600; }
.frise span { font-weight: 600; }
.frise small { font-size: 12px; color: var(--fumee); }
.suivi-colis { font-size: 14px; }

/* ---------- entretenir ---------- */
.guides { padding-bottom: 60px; }
.guides-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.guides-onglets a { padding: 10px 18px; border: 1.5px solid var(--ligne-forte); border-radius: 999px; font-weight: 500; font-size: 15px; transition: background 300ms, color 300ms, border-color 300ms; }
.guides-onglets a[aria-current="true"] { background: var(--foret); border-color: var(--foret); color: var(--craie); }
.guide { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.guide-photo { position: sticky; top: calc(var(--entete) + 20px); }
.guide-photo img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; border-radius: var(--rayon); }
.guide-corps { display: grid; gap: 26px; }
.guide-reglages { display: flex; flex-wrap: wrap; gap: 10px; }
.guide-reglages div { display: grid; gap: 2px; padding: 12px 18px; border: 1.5px solid var(--ligne-forte); border-radius: 16px; }
.guide-reglages dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--fumee); }
.guide-reglages dd { font-weight: 600; }
.etapes { display: grid; gap: 8px; }
.etape { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; width: 100%; text-align: left; padding: 14px 16px; border-radius: 16px; background: var(--lin); transition: background 300ms, color 300ms; }
.etape i { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ligne-forte); display: grid; place-items: center; transition: background 300ms, border-color 300ms; }
.etape i::after { content: "✓"; font-size: 14px; color: var(--craie); opacity: 0; }
.etape[aria-pressed="true"] { color: var(--fumee); text-decoration: line-through; text-decoration-color: var(--cognac); }
.etape[aria-pressed="true"] i { background: var(--foret); border-color: var(--foret); }
.etape[aria-pressed="true"] i::after { opacity: 1; }
.etapes-fait { color: var(--foret); font-weight: 600; }
.guide-pieces { font-size: 14px; }

/* ---------- pages légales ---------- */
.legale { max-width: 72ch; padding-bottom: 110px; }

/* ---------- édition ---------- */
body.mode-edition .couture-trace { stroke-dashoffset: 0; }
body.mode-edition .piece.estompee { opacity: 1; filter: none; }

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  [data-mots] .mot > span { transform: none; }
  .couture-trace { stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
}

/* ---------- points de rupture ---------- */
@media (max-width: 1200px) {
  .grille-pieces-large { grid-template-columns: repeat(3, 1fr); }
  .filtres-form { grid-template-columns: 1fr 1fr; }
  .echantillons { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  :root { --entete: 64px; }
  .navigation { display: none; }
  .burger { display: flex; }
  .entete { grid-template-columns: auto 1fr; }
  .bouton-panier-mot { display: none; }
  .bouton-panier { padding: 6px; }
  .grille-pieces, .grille-pieces-large { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .etabli, .patine, .graveur, .comptoir, .produit, .produit-plus, .gestes, .panier-page, .commander, .merci-corps, .guide, .cuir-fiche, .tanneries-liste { grid-template-columns: 1fr; }
  .etabli { min-height: 0; max-height: none; }
  .etabli-photo { margin: 0 calc(-1 * var(--marge)); border-radius: 0; aspect-ratio: 4 / 3; }
  .etabli-texte { padding: 48px 0 40px; }
  .graveur-cuir { order: -1; aspect-ratio: 16 / 10; }
  .comptoir-photo { border-radius: var(--rayon); margin: 0 var(--marge); }
  .comptoir-photo img { min-height: 320px; }
  .pied-haut { grid-template-columns: 1fr 1fr; }
  .pages-livre { grid-template-columns: 1fr 1fr; }
  .chiffres { grid-template-columns: 1fr 1fr; }
  .tannerie, .cuir-carte { grid-template-columns: 1fr; }
  .tannerie img, .cuir-carte img { max-width: 220px; }
  .produit-photo, .gestes-texte, .guide-photo, .panier-cote, .commander-recap { position: static; }
  .produit-photo { max-width: 560px; }
  .etabli-chiffres { gap: 24px; }
  .merci-corps .ticket { order: 2; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .grille-pieces, .grille-pieces-large { grid-template-columns: 1fr 1fr; }
  .piece-nom { font-size: 24px; }
  .piece-corps { padding: 12px 14px 14px; }
  .piece-bas { flex-direction: column; align-items: start; gap: 4px; }
  .pages-livre, .pied-haut, .chiffres, .champs-2, .champs-3, .echantillons { grid-template-columns: 1fr; }
  .echantillons { grid-template-columns: 1fr 1fr; }
  .section-tete { padding-top: 70px; }
  .frise { grid-template-columns: 1fr 1fr; }
  .achat-ligne { grid-template-columns: 1fr; }
  .tiroir { top: 0; right: 0; bottom: 0; width: 100vw; border-radius: 0; }
  .titre-geant { font-size: clamp(64px, 20vw, 120px); }
  .patine-page { margin-left: 0; margin-right: 0; border-radius: 0; }
  .chiffres { margin: 0; border-radius: 0; }
  .coloris-choix { width: 100%; }
}

/* En édition : le logo vide reste petit dans l'en-tête. */
.marque .ed-vide { height: 28px; width: auto; min-width: 0; padding: 0 10px; font-size: 10px; white-space: nowrap; }