/* ============================================================
   Lynk's — I DON'T CARE J'TASSURE.
   Palette et typo relevées sur le vêtement et sur les photos.

   Deux règles tiennent toute la mise en page :

   1. UN SEUL RYTHME VERTICAL
      --section : l'air au-dessus et au-dessous d'une section
      --stack   : l'écart entre deux blocs d'une même section
      Jamais la même valeur pour les deux, sinon la hiérarchie
      s'aplatit et la page devient une suite de blocs égaux.

   2. UNE SEULE FAÇON DE RACCORDER DEUX BLOCS
      Dès qu'une photographie touche un bord, elle s'éteint vers
      --nuit (--vers-nuit-haut / --vers-nuit-bas) : aucune photo
      ne se termine sur une coupe nette. Le filet de 1 px est
      réservé au pied et à l'intérieur des composants
      (specs, tableau, FAQ).
   ============================================================ */

:root{
  /* couleurs échantillonnées sur le shooting */
  --nuit:      #0A0A0B;   /* le noir des photos, légèrement chaud */
  --asphalte:  #131315;   /* surfaces surélevées */
  --beton:     #1E1E21;   /* bordures */
  --craie:     #EFEDE6;   /* texte */
  --fumee:     #8C8C93;   /* texte secondaire */
  --jaune:     #F8CF0D;   /* la sérigraphie jaune */
  --rose:      #EE3A6E;   /* la sérigraphie rose */

  --encre:     var(--jaune);

  --display: "Archivo Black", "Arial Black", Impact, sans-serif;
  --corps:   "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:    "Azeret Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* rythme */
  --marge:   clamp(1.25rem, 5vw, 5rem);      /* respiration horizontale */
  --section: clamp(3.25rem, 7vw, 6.5rem);    /* entre deux sections */
  --stack:   clamp(1.75rem, 3.5vw, 3.25rem); /* entre deux blocs d'une section */
  --fondu:   clamp(3rem, 6vw, 6rem);         /* hauteur des raccords en fondu */

  /* raccords : la même paire de dégradés partout */
  --vers-nuit-bas:  linear-gradient(to top,
                      var(--nuit) 0%, rgba(10,10,11,.86) 22%,
                      rgba(10,10,11,.38) 60%, transparent 100%);
  --vers-nuit-haut: linear-gradient(to bottom,
                      var(--nuit) 0%, rgba(10,10,11,.72) 26%,
                      rgba(10,10,11,.24) 62%, transparent 100%);

  --tr:    260ms cubic-bezier(.2,.7,.3,1);
  --ink-tr: 720ms cubic-bezier(.22,.72,.28,1);
  --head-h: 78px;
}
html[data-encre="rose"]{ --encre: var(--rose); }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--nuit); color:var(--craie);
  font-family:var(--corps); font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
  line-height:1.6; overflow-x:hidden;
  font-synthesis-weight:none; -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
button{ font:inherit; color:inherit; }
a{ color:inherit; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:50%; top:0; transform:translate(-50%,-140%);
  background:var(--encre); color:#000; padding:.7rem 1.2rem; z-index:1000;
  font-weight:700; text-decoration:none;
}
.skip:focus{ transform:translate(-50%,0); }

:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:2px solid var(--encre); outline-offset:3px; border-radius:2px;
}

/* ── éléments typographiques partagés ───────────────────── */
.print{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  line-height:.84; letter-spacing:-.025em; color:var(--encre);
  transition:color var(--ink-tr);
}
.print span{ display:block; }

.titre{
  font-family:var(--display); text-transform:uppercase; font-weight:400;
  font-size:clamp(2rem,1.3rem + 3vw,3.4rem); line-height:.95;
  letter-spacing:-.02em; margin:.2em 0 .6em; text-wrap:balance;
}
.titre-ink{ color:var(--encre); font-style:normal; transition:color var(--ink-tr); }
.titre-s{
  font-family:var(--display); text-transform:uppercase; font-weight:400;
  font-size:1.25rem; letter-spacing:-.01em; margin:0;
}
.eyebrow{
  font-family:var(--mono); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.22em; color:var(--fumee); margin:0;
}
.mono{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; }
.note{ color:var(--fumee); font-size:.72rem; line-height:1.7; }
.lede{ font-size:clamp(1rem,.95rem + .35vw,1.2rem); color:#C9C7C1; max-width:34ch; }

/* ── boutons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.7rem 1.2rem; border:1px solid transparent;
  background:none; cursor:pointer; text-decoration:none;
  font-weight:700; font-size:.85rem; letter-spacing:.02em;
  transition:background var(--tr), color var(--tr), transform 120ms ease;
}
.btn-ink{ background:var(--encre); color:#0A0A0B; }
.btn-ink:hover{ transform:translateY(-1px); filter:brightness(1.08); }
.btn-ink:active{ transform:translateY(0); }
.btn-lg{ padding:1rem 1.9rem; font-size:.95rem; }
.btn-full{ width:100%; }

/* ── en-tête ─────────────────────────────────────────────── */
.head{
  position:fixed; inset:0 0 auto; z-index:60; height:var(--head-h);
  display:flex; align-items:center; gap:1.5rem;
  padding:.7rem var(--marge);
  background:transparent;
  isolation:isolate;
}
/* le voile et son masque suivent la MÊME courbe : quand les deux
   rampes divergent, leur produit crée une marche visible en travers
   de la photo du hero. Voile plus haut, dégradé plus progressif. */
.head::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset:0 0 -84px;
  background:linear-gradient(180deg,
    rgba(10,10,11,.78) 0%,
    rgba(10,10,11,.56) 30%,
    rgba(10,10,11,.28) 58%,
    rgba(10,10,11,.09) 80%,
    transparent 100%);
  backdrop-filter:blur(11px) saturate(110%);
  -webkit-backdrop-filter:blur(11px) saturate(110%);
  mask-image:linear-gradient(180deg,
    #000 0%, rgba(0,0,0,.86) 30%,
    rgba(0,0,0,.5) 58%, rgba(0,0,0,.16) 80%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,
    #000 0%, rgba(0,0,0,.86) 30%,
    rgba(0,0,0,.5) 58%, rgba(0,0,0,.16) 80%, transparent 100%);
}
.head > *{ position:relative; z-index:1; }
/* le logo suit l'encre : deux versions superposees en fondu, exactement
   comme la photo du hero, le tee a plat et la photo du guide des tailles */
.head-logo{
  position:relative; display:block; flex:none;
  width:78px; aspect-ratio:600/444;
  transition:transform var(--tr);
}
.head-logo img{
  position:absolute; inset:0; width:100%; height:100%; opacity:0;
  filter:drop-shadow(0 3px 9px rgba(0,0,0,.5));
  transition:opacity var(--ink-tr), filter var(--tr);
}
html[data-encre="jaune"] .head-logo img[data-for="jaune"],
html[data-encre="rose"]  .head-logo img[data-for="rose"]{ opacity:1; }
.head-logo:hover{ transform:rotate(-2deg) scale(1.04); }
.head-logo:hover img{ filter:drop-shadow(0 5px 13px color-mix(in srgb, var(--encre) 24%, transparent)); }
.head-cart{
  position:relative; display:grid; place-items:center; flex:none;
  width:46px; height:46px; margin-left:auto; padding:0;
  border:1px solid color-mix(in srgb, var(--encre) 68%, transparent); border-radius:50%;
  background:rgba(10,10,11,.72); color:var(--encre); cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.035);
  transition:transform 160ms ease, background var(--tr), color var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.head-cart:hover{
  transform:translateY(-2px); background:var(--encre); color:var(--nuit); border-color:var(--encre);
  box-shadow:0 10px 28px color-mix(in srgb, var(--encre) 20%, transparent);
}
.head-cart:active{ transform:translateY(0) scale(.96); }
.cart-icon{
  position:relative; display:block; width:18px; height:15px;
  margin-top:3px; border:2px solid currentColor; border-radius:2px 2px 4px 4px;
}
.cart-icon::before{
  content:""; position:absolute; left:3px; right:3px; top:-7px; height:8px;
  border:2px solid currentColor; border-bottom:0; border-radius:7px 7px 0 0;
}

/* ── hero ────────────────────────────────────────────────── */
.hero{
  position:relative; display:grid; align-items:end;
  min-height:100svh;
  padding:var(--section) var(--marge) clamp(2rem,5vw,4rem);
  overflow:hidden;
}
main section[id]{ scroll-margin-top:calc(var(--head-h) + 1rem); }
.hero-shots{ position:absolute; inset:0; }
.hero-shot{
  position:absolute; inset:0; opacity:0;
  transition:opacity 820ms cubic-bezier(.22,.72,.28,1);
}
.hero-shot img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
html[data-encre="jaune"] .hero-shot[data-for="jaune"],
html[data-encre="rose"]  .hero-shot[data-for="rose"]{ opacity:1; }
/* la photo s'éteint vers le bas : elle ne bute jamais sur la section produit */
.hero-shots::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,
    var(--nuit) 0%, rgba(10,10,11,.94) 40%,
    rgba(10,10,11,.52) 72%, rgba(10,10,11,.14) 100%);
}

/* le titre est dimensionné sur SA colonne (cqw), pas sur la fenêtre :
   en vw il débordait sur la photo entre 830 et 1150 px de large */
.hero-type{
  position:relative; z-index:2;
  container-type:inline-size;
  width:min(100%, 46rem); margin-right:auto;
  justify-self:start; text-align:left;
}
.hero .print{
  width:auto; max-width:100%;
  font-size:clamp(2.5rem, 13.5cqw, 7rem);
  margin:.22em 0 .46em;
}
.hero-buy{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.75rem;
  justify-content:flex-start; margin:.9rem 0 0;
}
.prix{
  font-family:var(--display); font-size:1.9rem; margin:0;
  letter-spacing:-.02em;
}
.prix-lg{ font-size:2.4rem; }

/* choix d'encre */
.encres{ display:flex; gap:.5rem; border:0; padding:0; margin:0; }
.encre{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .95rem; cursor:pointer;
  border:1px solid var(--beton); background:rgba(19,19,21,.7);
  font-size:.82rem; font-weight:600;
  transition:border-color var(--tr), background var(--tr);
}
.encre input{ position:absolute; opacity:0; width:0; height:0; }
.pastille{
  width:.85rem; height:.85rem; border-radius:50%; flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset;
}
.encre[data-encre-opt="jaune"] .pastille{ background:var(--jaune); }
.encre[data-encre-opt="rose"]  .pastille{ background:var(--rose); }
.encre:hover{ border-color:#3A3A40; }
.encre:has(input:checked){ border-color:var(--encre); background:var(--asphalte); }
.encre:has(input:focus-visible){ outline:2px solid var(--encre); outline-offset:3px; }

/* ── le tee ──────────────────────────────────────────────── */
.tee{
  display:grid; gap:var(--stack);
  padding:var(--section) var(--marge);
  align-items:center;
}
.tee-cadre{
  position:relative; aspect-ratio:1100/700;
  background:radial-gradient(58% 62% at 50% 46%,
    color-mix(in srgb, var(--encre) 16%, transparent) 0%,
    rgba(255,255,255,.055) 34%, transparent 70%);
  transition:background var(--ink-tr);
}
/* posé sur une surface plutôt que découpé dans le vide : une ombre de
   contact courte, une ombre portée large, et un très léger dévers — un
   vêtement photographié à plat n'est jamais parfaitement d'équerre.
   Les deux encres portent la MÊME rotation, sinon le fondu de l'une à
   l'autre cisaillerait. L'ombre reste en CSS (et non cuite dans le PNG)
   pour qu'elle se lise comme portée, pas comme collée au vêtement. */
.tee-plat{
  position:absolute; inset:4% 8%; opacity:0;
  transform:rotate(-1.15deg);
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.5))
         drop-shadow(0 28px 36px rgba(0,0,0,.55));
  transition:opacity 760ms cubic-bezier(.22,.72,.28,1);
}
.tee-plat img{ width:100%; height:100%; object-fit:contain; }
html[data-encre="jaune"] .tee-plat[data-for="jaune"],
html[data-encre="rose"]  .tee-plat[data-for="rose"]{ opacity:1; }
.visu-tag{ color:var(--fumee); margin:.9rem 0 0; text-transform:uppercase; }

.specs{ list-style:none; margin:0 0 clamp(1.75rem,3vw,2.5rem); padding:0; }
.specs li{
  display:grid; grid-template-columns:8.5rem 1fr; gap:1rem;
  padding:.85rem 0; border-top:1px solid var(--beton);
  font-size:.92rem;
}
.specs li:last-child{ border-bottom:1px solid var(--beton); }
.specs .mono{ color:var(--fumee); text-transform:uppercase; padding-top:.22em; }

.achat{ border:1px solid var(--beton); padding:clamp(1.25rem,3vw,1.9rem); background:var(--asphalte); }
.tailles-choix{ border:0; padding:0; margin:0 0 1.5rem; }
.legend{ color:var(--fumee); text-transform:uppercase; padding:0; margin-bottom:.7rem; }
.tailles-boutons{ display:flex; flex-wrap:wrap; gap:.45rem; }
.taille-b{
  min-width:3.4rem; padding:.6rem .5rem; cursor:pointer;
  border:1px solid var(--beton); background:transparent;
  font-weight:700; font-size:.85rem; text-align:center;
  transition:border-color var(--tr), background var(--tr), color var(--tr);
}
.taille-b:hover{ border-color:#3A3A40; }
.taille-b[aria-pressed="true"]{ background:var(--encre); border-color:var(--encre); color:#0A0A0B; }
.achat-bas{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem; margin:1.6rem 0 .9rem;
}

/* ── deux encres : les photos sont le sélecteur ─────────── */
.diptyque{
  display:flex; gap:2px; background:var(--nuit);
  height:clamp(26rem,72svh,46rem);
}
.volet{
  position:relative; flex:1; min-width:0; padding:0; cursor:pointer;
  border:0; background:none; overflow:hidden; display:block;
  transition:flex-grow 760ms cubic-bezier(.22,.72,.28,1);
}
.volet picture{ display:block; height:100%; }
.volet img{
  width:100%; height:100%; object-fit:cover; object-position:50% 28%;
  transition:filter 720ms ease, transform 760ms cubic-bezier(.22,.72,.28,1);
  filter:grayscale(.7) brightness(.42) contrast(1.05);
}
/* entrée et sortie en fondu : ni filet, ni coupe nette */
.volet::after{
  content:""; position:absolute; inset:0;
  background:
    var(--vers-nuit-bas)  bottom / 100% 46% no-repeat,
    var(--vers-nuit-haut) top    / 100% 22% no-repeat;
}
html[data-encre="jaune"] .volet[data-set-encre="jaune"],
html[data-encre="rose"]  .volet[data-set-encre="rose"]{ flex-grow:1.55; }
html[data-encre="jaune"] .volet[data-set-encre="jaune"] img,
html[data-encre="rose"]  .volet[data-set-encre="rose"] img{ filter:none; }
.volet:hover img{ filter:grayscale(.25) brightness(.72); transform:scale(1.015); }
html[data-encre="jaune"] .volet[data-set-encre="jaune"]:hover img,
html[data-encre="rose"]  .volet[data-set-encre="rose"]:hover img{ filter:none; transform:scale(1.015); }

.volet-lab{
  position:absolute; z-index:2; left:clamp(1rem,2.4vw,2.2rem); bottom:clamp(1rem,2.4vw,2.2rem);
  display:grid; gap:.3rem; text-align:left;
}
.volet-nom{
  font-family:var(--display); text-transform:uppercase; font-size:clamp(1rem,2.1vw,1.7rem);
  letter-spacing:-.01em; line-height:1; color:#EFEDE6;
}
.volet-hex{ color:var(--fumee); letter-spacing:.16em; }
.volet[data-set-encre="jaune"][aria-pressed="true"] .volet-nom{ color:var(--jaune); }
.volet[data-set-encre="rose"][aria-pressed="true"]  .volet-nom{ color:var(--rose); }
.volet[aria-pressed="true"] .volet-hex{ color:#C9C7C1; }
.volet:focus-visible{ outline:2px solid var(--encre); outline-offset:-6px; }

/* ── shooting : mur de photos, bord à bord ──────────────── */
/* Grille (et non colonnes CSS) : toutes les cases d'une rangée ont
   la même hauteur, donc le bas du mur est droit. La dernière rangée
   est complétée par main.js (ajusterMur) quel que soit le nombre de
   photos visibles — c'est ce qui supprime les deux trous noirs que
   les colonnes CSS laissaient en bas. */
.shooting{ position:relative; }
/* 3 colonnes : avec 6 photos par encre, cela fait exactement deux rangees
   pleines. A 4 colonnes il resterait 2 photos en derniere rangee, qui
   doubleraient de hauteur pour ne pas etre recadrees — le mur ne perdrait
   rien alors qu'il est justement la pour s'alleger. */
.grille{
  display:grid; gap:3px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.frame-item{
  position:relative; margin:0; overflow:hidden;
  aspect-ratio:2/3;                        /* le format natif des photos :
                                              object-fit ne recadre rien */
}
.frame-item picture{ position:absolute; inset:0; display:block; }
.frame-item img{ width:100%; height:100%; object-fit:cover; }
/* prévu pour une photo paysage — aucune en place aujourd'hui. Ajoute la
   classe f-wide à un <figure> dont l'image est un 3:2 : sur deux colonnes,
   le rapport 4/3 lui donne exactement la hauteur de rangée des portraits
   (2 largeurs / 1,5 hauteur), donc la rangée reste plate. */
.frame-item.f-wide{ grid-column:span 2; aspect-ratio:4/3; }
.frame-item::after{
  content:""; position:absolute; inset:auto 0 0 0; height:38%;
  background:linear-gradient(to top, rgba(10,10,11,.72), transparent);
  opacity:0; transition:opacity var(--tr); pointer-events:none;
}
.frame-item figcaption{
  position:absolute; z-index:2; left:.7rem; bottom:.6rem;
  color:#EFEDE6; text-transform:uppercase; letter-spacing:.16em;
  opacity:0; transform:translateY(4px);
  transition:opacity var(--tr), transform var(--tr);
  text-shadow:0 1px 6px rgba(0,0,0,.8);
}
.frame-item:hover::after, .frame-item:focus-within::after{ opacity:1; }
.frame-item:hover figcaption, .frame-item:focus-within figcaption{ opacity:1; transform:none; }
/* filtrage par encre : les images cachées ne se chargent pas */
html[data-encre="jaune"] .grille:not(.tout) .frame-item[data-encre-item="rose"],
html[data-encre="rose"]  .grille:not(.tout) .frame-item[data-encre-item="jaune"]{ display:none; }
/* le mur s'allume et s'éteint : il ne commence ni ne finit net */
.shooting::before, .shooting::after{
  content:""; position:absolute; left:0; right:0; z-index:3;
  height:var(--fondu); pointer-events:none;
}
.shooting::before{ top:0;    background:var(--vers-nuit-haut); }
.shooting::after { bottom:0; background:var(--vers-nuit-bas); }

/* ── tailles : la photo tient la section ────────────────── */
.tailles{ display:grid; align-items:stretch; }
.tailles-photo{ position:relative; margin:0; min-height:22rem; overflow:hidden; }
.fit-shot{ position:absolute; inset:0; opacity:0; transition:opacity 760ms cubic-bezier(.22,.72,.28,1); }
html[data-encre="jaune"] .fit-shot[data-for="jaune"],
html[data-encre="rose"]  .fit-shot[data-for="rose"]{ opacity:1; }
.tailles-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
/* même traitement que les autres photos : c'était la seule sans fondu,
   elle se coupait net sur le filet du pied */
.tailles-photo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    var(--vers-nuit-bas)  bottom / 100% 34% no-repeat,
    var(--vers-nuit-haut) top    / 100% 22% no-repeat;
}
.tailles-photo figcaption{
  position:absolute; z-index:2; left:clamp(1rem,2.4vw,2rem); bottom:clamp(1rem,2.4vw,2rem);
  color:#EFEDE6; text-transform:uppercase; letter-spacing:.16em;
  text-shadow:0 1px 6px rgba(0,0,0,.85);
}
.tailles-panneau{
  position:relative; z-index:2;            /* passe au-dessus de la photo */
  background:var(--asphalte); border:1px solid var(--beton);
  padding:clamp(1.5rem,4vw,3rem);
  align-self:center;
}
.table-wrap{ overflow-x:auto; }
.table-tailles{ width:100%; border-collapse:collapse; min-width:22rem; }
.table-tailles caption{
  text-align:left; color:var(--fumee); text-transform:uppercase;
  padding-bottom:1rem; letter-spacing:.14em;
}
.table-tailles th, .table-tailles td{
  padding:.8rem .6rem; text-align:left; border-bottom:1px solid var(--beton);
  font-size:.92rem;
}
.table-tailles thead th{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fumee); font-weight:400;
}
.table-tailles tbody th{ font-family:var(--display); font-weight:400; font-size:1.05rem;
  color:var(--encre); transition:color var(--tr); }
.table-tailles td{ font-variant-numeric:tabular-nums; color:#C9C7C1; }

.faq{ margin-top:2.2rem; }
.faq details{ border-bottom:1px solid var(--beton); }
.faq summary{
  cursor:pointer; padding:1rem 0; font-weight:600; font-size:.95rem;
  list-style:none; display:flex; justify-content:space-between; gap:1rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--encre); font-family:var(--mono); }
.faq details[open] summary::after{ content:"–"; }
.faq p{ margin:0 0 1.2rem; color:var(--fumee); font-size:.92rem; max-width:60ch; }
.faq a{ color:var(--encre); text-decoration:none; border-bottom:1px solid currentColor; }

/* ── pied ────────────────────────────────────────────────── */
/* bande de clôture : un filet, les trois lignes, rien d'autre.
   Un seul filet et un seul écart — sans le bloc logo au-dessus,
   garder l'air d'une section entière ne ferait qu'un trou noir. */
.pied{ border-top:1px solid var(--beton); padding:var(--stack) var(--marge); }
.pied-bas{
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between;
  margin:0; color:var(--fumee);
}
.pied-bas p{ margin:0; text-transform:uppercase; }
.pied-bas a{ color:var(--craie); text-decoration:none; border-bottom:1px solid var(--encre); }

/* ── barre mobile ────────────────────────────────────────── */
.barre-mob{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  display:none; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem var(--marge) calc(.7rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--nuit) 92%, transparent);
  backdrop-filter:blur(14px); border-top:1px solid var(--beton);
  transform:translateY(110%); transition:transform var(--tr);
}
.barre-mob.vue{ transform:translateY(0); }
.barre-txt{ display:grid; gap:.15rem; margin:0; }
.barre-txt .mono{ color:var(--fumee); text-transform:uppercase; }
.barre-txt strong{ font-family:var(--display); font-size:1.15rem; }

/* ── commande ────────────────────────────────────────────── */
.commande{
  border:0; padding:0; background:var(--asphalte); color:var(--craie);
  width:min(30rem,100%); height:100dvh; max-height:100dvh;
  margin:0 0 0 auto; overflow-y:auto;
  border-left:1px solid var(--beton);
}
.commande::backdrop{ background:rgba(5,5,6,.72); backdrop-filter:blur(3px); }
.commande-form{ padding:clamp(1.25rem,4vw,2rem); }
.commande-tete{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
.fermer{
  border:1px solid var(--beton); background:none; cursor:pointer;
  width:2.2rem; height:2.2rem; line-height:1; font-size:.9rem;
  transition:border-color var(--tr);
}
.fermer:hover{ border-color:#3A3A40; }
.recap{ display:flex; gap:1rem; align-items:center; padding-bottom:1.5rem; border-bottom:1px solid var(--beton); }
.recap-img{ flex:none; width:5.5rem; background:var(--nuit); border:1px solid var(--beton); }
.recap-img img{ width:100%; }
.recap-nom{ font-family:var(--display); text-transform:uppercase; font-size:.9rem; margin:0 0 .35rem; line-height:1.15; }
.recap-det{ color:var(--fumee); margin:0; text-transform:uppercase; }
.bloc{ border:0; padding:0; margin:1.7rem 0 0; }
.total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:1.8rem 0 1.2rem; padding-top:1.2rem; border-top:1px solid var(--beton);
}
.total .mono{ color:var(--fumee); text-transform:uppercase; }
.total strong{ font-family:var(--display); font-size:1.7rem; }
.note-c{ text-align:center; margin:.9rem 0 0; }

/* ── pages annexes : paiement, merci ─────────────────────── */
/* Même grammaire que le reste : le noir, le filet, l'encre. Une seule
   colonne centrée, rien autour — c'est un tunnel, pas une vitrine. */
.page{
  min-height:100svh;
  display:grid; align-content:center; justify-items:center;
  padding:calc(var(--head-h) + var(--section)) var(--marge) var(--section);
}
.page-bloc{ width:min(30rem, 100%); }
.page .print{ font-size:clamp(2.2rem,9vw,3.8rem); margin:0 0 1rem; }
.page-txt{ color:var(--fumee); font-size:.95rem; line-height:1.7; margin:0 0 1.6rem; max-width:44ch; }
.page-txt strong{ color:var(--craie); font-weight:600; }
.page-ref{
  border:1px solid var(--beton); background:var(--asphalte);
  padding:.85rem 1rem; margin:0 0 1.6rem;
}
.page-ref .mono{ color:var(--fumee); text-transform:uppercase; display:block; margin-bottom:.35rem; }
.page-ref code{
  font-family:var(--mono); font-size:.78rem; color:var(--craie);
  word-break:break-all; line-height:1.5;
}
.page-liens{ display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:1.8rem; }
.page-liens a{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fumee); text-decoration:none; border-bottom:1px solid var(--beton);
  transition:color var(--tr), border-color var(--tr);
}
.page-liens a:hover{ color:var(--craie); border-color:var(--encre); }

/* ── voile doux lors du changement d'encre ──────────────── */
.voile-encre{
  position:fixed; inset:0; z-index:900; pointer-events:none;
  background:radial-gradient(circle at 50% 35%,
    color-mix(in srgb, var(--encre) 22%, transparent) 0%,
    color-mix(in srgb, var(--encre) 8%, transparent) 42%,
    transparent 76%);
  opacity:0;
}
.voile-encre.declenche{ animation:fondu-encre 820ms cubic-bezier(.22,.72,.28,1); }
@keyframes fondu-encre{
  0%{ opacity:0 }
  38%{ opacity:.55 }
  100%{ opacity:0 }
}

/* ── révélation au scroll ────────────────────────────────── */
/* règle unique : les blocs de contenu montent, les photographies
   ne bougent pas. La liste des cibles est dans main.js. */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.3,1); }
.reveal.vu{ opacity:1; transform:none; }

/* ── grands écrans ───────────────────────────────────────── */
@media (min-width:52em){
  .hero{ grid-template-columns:minmax(0,1fr) minmax(0,44%); align-items:center; }
  .hero-shots{ left:auto; width:46%; }
  /* deux couches : le fondu vers le bas ET le fondu vers la gauche.
     L'ancienne règle n'en gardait qu'une, la photo se coupait net. */
  .hero-shots::after{
    background:
      var(--vers-nuit-bas) bottom / 100% 46% no-repeat,
      linear-gradient(to right,
        var(--nuit) 0%, rgba(10,10,11,.5) 30%,
        rgba(10,10,11,.12) 62%, transparent 100%);
  }
  .hero-type{ grid-column:1; justify-self:start; padding-right:2rem; }
  .tee{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); column-gap:clamp(2rem,5vw,4.5rem); }
  .tailles{ grid-template-columns:minmax(0,.44fr) minmax(0,.56fr); }
  .tailles-photo::after{
    background:
      var(--vers-nuit-bas)  bottom / 100% 34% no-repeat,
      var(--vers-nuit-haut) top    / 100% 22% no-repeat,
      linear-gradient(to left, var(--nuit) 0%, transparent 100%) right / 26% 100% no-repeat;
  }
  .tailles-panneau{ margin:var(--section) var(--marge) var(--section) -8%; }
}
@media (max-width:51.99em){
  :root{ --head-h:66px; }
  .head-logo{ width:66px; }
  .head-cart{ width:42px; height:42px; }
  .hero{ align-items:end; padding-bottom:1.5rem; }
  .hero-shot img{ object-position:50% 12%; }
  .barre-mob{ display:flex; }
  .hero-buy{
    display:grid; grid-template-columns:1fr auto; align-items:center;
    gap:.85rem 1rem;
  }
  .hero-buy .prix{ justify-self:end; font-size:1.7rem; }
  .hero-buy .btn{ grid-column:1 / -1; width:100%; }
  /* le pied ne laisse de place à la barre d'achat que là où elle existe */
  .pied{ padding-bottom:calc(var(--stack) + 5rem); }
  .grille{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .diptyque{ height:clamp(20rem,58svh,30rem); }
  .tailles-photo{ min-height:0; aspect-ratio:5/4; }
  .tailles-panneau{ margin:-3.5rem var(--marge) var(--section); position:relative; z-index:2; }
  .commande{
    margin:auto 0 0; width:100%; height:auto; max-height:92dvh;
    border-left:0; border-top:1px solid var(--beton);
  }
}
@media (max-width:34em){
  .table-tailles{ min-width:0; }
  .table-tailles caption{ letter-spacing:.1em; }
  .table-tailles th, .table-tailles td{ padding:.7rem .3rem; font-size:.85rem; }
  .table-tailles thead th{ letter-spacing:.06em; font-size:.62rem; }
  .tailles-panneau{ padding:1.25rem 1rem; }
  .specs li{ grid-template-columns:1fr; gap:.15rem; }
  .achat-bas{ display:grid; }
  .achat-bas .btn{ width:100%; }
}

/* ── mouvement réduit ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .voile-encre.declenche{ animation:none; }
  .reveal{ opacity:1; transform:none; }
}