/* ==========================================================================
   PLUS DE STYLE — « la cabine ».
   Vingt-trois chemises photographiées sur le même homme, même studio, même
   pose : le site les lui change sur le dos. Le fond de page est le gris du
   studio, pour que le mannequin soit posé sur la page et non dans un cadre.
   Le jaune soleil du logo ne sert qu'à ce qui se choisit. Les filets sont
   des points zigzag de machine, les cases sont des boutons de chemise qui
   se cousent quand on coche, le panier est un cintre.
   ========================================================================== */

:root{
  --studio:#767677;          /* le gris du fond de studio, mesuré sur les photos */
  --studio-2:#6C6C6D;
  --blanc:#F7F6F3;
  --blanc-2:#EEECE7;
  --encre:#17171A;
  --gris:#5E5D5A;
  --gris-clair:#9C9A95;
  --soleil:#F2D21B;
  --soleil-bas:#D9B80F;
  --trait:rgba(23,23,26,.12);
  --trait-fort:rgba(23,23,26,.34);
  --wa:#1FAD55;
  --marge:clamp(20px,4.5vw,64px);
  --h-tete:72px;
  --t:.5s cubic-bezier(.22,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--h-tete) + 28px)}
body{
  margin:0;color:var(--encre);background:var(--blanc);
  font-family:'Karla',system-ui,-apple-system,sans-serif;
  font-size:15.5px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.fige{overflow:hidden}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
p{margin:0}
:focus-visible{outline:2px solid var(--encre);outline-offset:4px}
h1,h2,h3{font-family:'Zilla Slab',Georgia,serif;font-weight:600;margin:0;letter-spacing:-.008em}
i{font-style:normal;color:var(--gris-clair);padding:0 .25em}
em{font-style:normal;color:var(--gris)}
.eti{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
.eti svg{width:15px;height:15px;fill:none;stroke:var(--encre);stroke-width:1.6;flex:none}
.dit{color:var(--gris);font-size:15.5px;line-height:1.75}
/* le point zigzag : le filet de la page */
.zigzag{--c:var(--trait-fort);background:linear-gradient(135deg,transparent 0 44%,var(--c) 44% 56%,transparent 56%) 0 0 / 8px 8px repeat-x,linear-gradient(45deg,transparent 0 44%,var(--c) 44% 56%,transparent 56%) 0 0 / 8px 8px repeat-x}
.lien{
  display:inline-block;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--encre);
  padding-bottom:7px;position:relative;transition:color .3s;
}
.lien::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:linear-gradient(135deg,transparent 0 44%,var(--trait-fort) 44% 56%,transparent 56%) 0 0 / 6px 6px repeat-x,linear-gradient(45deg,transparent 0 44%,var(--trait-fort) 44% 56%,transparent 56%) 0 0 / 6px 6px repeat-x}
.lien:hover{color:var(--gris)}
.bouton{
  display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 30px;cursor:pointer;
  background:var(--encre);color:var(--blanc);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  transition:background .3s,color .3s;
}
.bouton:hover{background:#000}
.bouton.faite{background:var(--soleil);color:var(--encre)}

/* ---- bandeau ---- */
.mention{padding:8px var(--marge);text-align:center;background:var(--blanc-2);border-bottom:1px solid var(--trait);color:var(--gris);font-size:11.5px;line-height:1.55}
.mention b{font-weight:600;color:var(--encre)}

/* ---- en-tête ---- */
.entete{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:28px;
  padding:10px var(--marge);background:rgba(247,246,243,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--trait);
}
.griffe{flex:none;display:flex;align-items:center;gap:12px}
.griffe img{width:50px;height:50px;object-fit:contain;background:#fff;border:1px solid var(--trait);padding:2px}
.griffe-mot{font-family:'Zilla Slab',serif;font-weight:600;font-size:17px;line-height:1.1;display:flex;flex-direction:column}
.griffe-mot small{font-family:'Karla',sans-serif;font-weight:600;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);margin-top:3px}
.menu{margin-left:auto;display:flex;gap:32px}
.menu a{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);padding:8px 0;position:relative;transition:color .3s}
.menu a::after{content:"";position:absolute;left:0;bottom:2px;height:2px;width:0;background:var(--soleil);transition:width var(--t)}
.menu a:hover{color:var(--encre)}
.menu a:hover::after{width:100%}
.bouton-panier{
  flex:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;border:1px solid var(--encre);padding:9px 16px;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--encre);transition:background .3s,color .3s;
}
.bouton-panier svg{width:22px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bouton-panier:hover{background:var(--encre);color:var(--blanc)}
.bp-n{min-width:20px;height:20px;border-radius:999px;background:var(--soleil);color:var(--encre);display:grid;place-items:center;font-size:11px;letter-spacing:0;padding:0 5px}
.burger{display:none;flex:none;width:42px;height:38px;cursor:pointer;border:1px solid var(--trait-fort);padding:11px 10px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:1.5px;background:var(--encre);transition:transform .4s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- voiles, tiroirs ---- */
.voile,.voile-panier{position:fixed;inset:0;z-index:45;background:rgba(23,23,26,.42);animation:fondu .35s ease}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.tiroir,.panier{position:fixed;z-index:50;top:0;right:0;height:100dvh;display:flex;flex-direction:column;background:var(--blanc);border-left:1px solid var(--trait);animation:glisse .45s cubic-bezier(.22,.7,.2,1)}
@keyframes glisse{from{transform:translateX(100%)}to{transform:translateX(0)}}
.tiroir{width:min(84vw,330px);padding:20px 28px 34px}
.tiroir-fermer,.panier-fermer{cursor:pointer;color:var(--gris);font-size:26px;line-height:1;padding:2px 6px;transition:color .25s}
.tiroir-fermer{align-self:flex-end}
.tiroir-fermer:hover,.panier-fermer:hover{color:var(--encre)}
.tiroir-griffe{width:64px;margin:6px 0 26px;background:#fff;border:1px solid var(--trait);padding:2px}
.tiroir-liens{list-style:none;margin:0;padding:0}
.tiroir-liens a{display:block;padding:15px 0;border-bottom:1px solid var(--trait);font-family:'Zilla Slab',serif;font-weight:500;font-size:19px;transition:padding-left var(--t)}
.tiroir-liens a:hover{padding-left:8px}
.tiroir-mot{margin-top:auto;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gris-clair)}

/* ---- rythme ---- */
.bloc{padding:clamp(72px,9vw,128px) var(--marge)}
.cadre{max-width:1200px;margin:0 auto}
.tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 48px;margin-bottom:clamp(34px,4.5vw,56px);padding-bottom:22px;position:relative}
.tete::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:linear-gradient(135deg,transparent 0 44%,var(--trait-fort) 44% 56%,transparent 56%) 0 0 / 6px 6px repeat-x,linear-gradient(45deg,transparent 0 44%,var(--trait-fort) 44% 56%,transparent 56%) 0 0 / 6px 6px repeat-x}
.tete-mot{max-width:620px}
.tete h2{font-size:clamp(1.7rem,3.1vw,2.4rem);line-height:1.18;margin-top:14px;text-wrap:balance}
.tete .dit{max-width:46ch}

/* ---- sur le gris du studio, tout passe en clair ---- */
.sur-studio{color:var(--blanc)}
.sur-studio .eti{color:rgba(247,246,243,.72)}
.sur-studio .eti svg{stroke:var(--soleil)}
.sur-studio .dit{color:rgba(247,246,243,.78)}
.sur-studio .lien{color:var(--blanc)}
.sur-studio .lien::after,.sur-studio .ajouter::after,.sur-studio .tete::after{--c:rgba(247,246,243,.45);
  background:linear-gradient(135deg,transparent 0 44%,var(--c) 44% 56%,transparent 56%) 0 0 / 6px 6px repeat-x,linear-gradient(45deg,transparent 0 44%,var(--c) 44% 56%,transparent 56%) 0 0 / 6px 6px repeat-x}
.sur-studio .bouton{background:var(--blanc);color:var(--encre)}
.sur-studio .bouton:hover{background:#fff}
.sur-studio .essai{border-top-color:rgba(247,246,243,.35)}
.sur-studio .essai-nom em,.sur-studio .echantillons-note{color:rgba(247,246,243,.62)}
.sur-studio .recherche{color:rgba(247,246,243,.7);border-bottom-color:rgba(247,246,243,.4)}
.sur-studio .recherche:focus-within{color:var(--blanc);border-bottom-color:var(--blanc)}
.sur-studio .recherche input{color:var(--blanc)}
.sur-studio .recherche input::placeholder{color:rgba(247,246,243,.5)}
.sur-studio .groupe legend,.sur-studio .compte,.sur-studio .piece-meta,.sur-studio .rien{color:rgba(247,246,243,.65)}
.sur-studio .coche{color:rgba(247,246,243,.82)}
.sur-studio .coche:hover,.sur-studio .piece h3,.sur-studio .ajouter{color:var(--blanc)}
.sur-studio .coche svg{fill:transparent;stroke:rgba(247,246,243,.6)}
.sur-studio .coche svg .croix{stroke:var(--encre)}
.sur-studio .coche input:checked ~ svg{fill:var(--soleil);stroke:var(--soleil)}
.sur-studio .coche sup{color:rgba(247,246,243,.5)}
.sur-studio .effacer{color:rgba(247,246,243,.75);border-bottom-color:rgba(247,246,243,.4)}
.sur-studio .effacer:hover{color:var(--blanc);border-bottom-color:var(--blanc)}
.sur-studio .ajouter:hover{color:rgba(247,246,243,.7)}
.sur-studio .ajouter.faite{color:var(--soleil)}
.sur-studio .qte button{border-color:rgba(247,246,243,.35);color:var(--blanc)}

/* ---- la cabine ---- */
.cabine{background:var(--studio);position:relative;overflow:hidden}
.cabine-cadre{max-width:1200px;margin:0 auto;padding:clamp(40px,5vw,72px) var(--marge) 0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:end}
.cabine-mot{padding-bottom:clamp(48px,6vw,84px);align-self:center}
.cabine h1{font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.08;margin-top:22px;text-wrap:balance;max-width:14ch}
.cabine .dit{margin-top:20px;max-width:44ch}
.essai{margin-top:30px;padding:18px 0 0;border-top:1px solid var(--trait-fort)}
.essai-nom{display:flex;flex-direction:column;gap:2px}
.essai-nom span{font-family:'Zilla Slab',serif;font-weight:600;font-size:1.35rem;line-height:1.2}
.essai-nom em{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.essai-actes{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:16px}
/* les échantillons : l'empiècement de chaque chemise, à choisir */
.echantillons{display:flex;flex-wrap:wrap;gap:6px;margin-top:26px;max-width:520px}
.ech{width:40px;height:40px;cursor:pointer;padding:0;border:2px solid transparent;position:relative;transition:transform .25s,border-color .25s;background:var(--studio-2)}
.ech img{width:100%;height:100%;object-fit:cover}
.ech:hover{transform:translateY(-2px)}
.ech[aria-selected="true"]{border-color:var(--soleil);transform:translateY(-2px)}
.ech[aria-selected="true"]::after{content:"";position:absolute;left:50%;bottom:-9px;width:6px;height:6px;background:var(--soleil);transform:translateX(-50%) rotate(45deg)}
.echantillons-note{margin-top:14px;font-size:11.5px;color:var(--gris-clair)}
/* le mannequin : deux couches, la suivante fond sur la précédente */
.mannequin{margin:0;position:relative;aspect-ratio:3/4;width:100%;max-width:560px;justify-self:end}
.couche{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .55s ease}
#couche-b{opacity:0}
.mannequin.bascule #couche-b{opacity:1}

/* ---- le mur : les chemises sur le gris du studio ---- */
.mur{background:var(--studio)}
.rayon{display:grid;grid-template-columns:212px minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:start}
.cote{position:sticky;top:calc(var(--h-tete) + 28px);max-height:calc(100vh - var(--h-tete) - 48px);overflow-y:auto;overscroll-behavior:contain;padding-right:6px;scrollbar-width:thin}
.cote-haut{display:flex;align-items:center;gap:12px}
.recherche{display:flex;align-items:center;gap:9px;flex:1;min-width:0;padding-bottom:9px;border-bottom:1px solid var(--trait-fort);color:var(--gris);transition:border-color .3s,color .3s}
.recherche:focus-within{border-color:var(--encre);color:var(--encre)}
.recherche svg{width:16px;height:16px;flex:none}
.recherche input{flex:1;min-width:0;border:0;background:none;padding:2px 0;font:inherit;font-size:13.5px;color:var(--encre);outline:none;-webkit-appearance:none;appearance:none}
.recherche input::placeholder{color:var(--gris-clair)}
.recherche input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.replier{display:none}
.cote-zone{margin-top:26px}
.cote-dedans{display:flex;flex-direction:column;gap:24px}
.groupe{margin:0;padding:0;border:0;min-width:0}
.groupe legend{padding:0;margin-bottom:8px;font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gris)}
.coche{display:flex;align-items:center;gap:10px;padding:5px 0;cursor:pointer;font-size:13.5px;color:var(--gris);transition:color .25s;user-select:none}
.coche:hover{color:var(--encre)}
.coche input{position:absolute;opacity:0;width:0;height:0}
/* la case : un bouton de chemise, cousu d'une croix de fil quand on coche */
.coche svg{flex:none;width:16px;height:16px;fill:var(--blanc);stroke:var(--gris-clair);stroke-width:1.4;transition:stroke .2s,fill .2s}
.coche svg .croix{opacity:0;stroke:var(--encre);stroke-width:2.2;transition:opacity .2s}
.coche input:checked ~ svg{fill:var(--soleil);stroke:var(--encre)}
.coche input:checked ~ svg .croix{opacity:1}
.coche input:focus-visible ~ svg{outline:2px solid var(--encre);outline-offset:3px;border-radius:50%}
.coche sup{font-size:9px;color:var(--gris-clair);margin-left:auto;font-weight:400;vertical-align:baseline}
.effacer{align-self:flex-start;cursor:pointer;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);padding-bottom:4px;border-bottom:1px solid var(--trait-fort);transition:color .3s,border-color .3s}
.effacer:hover{color:var(--encre);border-color:var(--encre)}
.compte{margin:0 0 22px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(36px,4vw,56px) clamp(18px,2.4vw,32px)}
.piece{opacity:0;transition:opacity .7s ease}
.piece.vue{opacity:1}
.piece-vue{position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--studio-2)}
.piece-vue img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,.7,.2,1)}
.piece:hover .piece-vue img{transform:scale(1.03)}
/* l'empiècement, en pastille sur la photo, et « l'essayer » au survol */
.piece-ech{position:absolute;left:12px;bottom:12px;width:44px;height:44px;border:2px solid var(--blanc);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.piece-ech img{width:100%;height:100%;object-fit:cover}
.essayer{position:absolute;right:12px;bottom:12px;cursor:pointer;background:var(--blanc);color:var(--encre);padding:9px 12px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s,background .3s}
.piece:hover .essayer,.essayer:focus-visible{opacity:1;transform:none}
.essayer:hover{background:var(--soleil)}
.piece-bas{margin-top:14px}
.piece h3{font-size:1.06rem;font-weight:600;line-height:1.35}
.piece-meta{display:block;margin-top:4px;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.ajouter{
  display:inline-block;margin-top:12px;cursor:pointer;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--encre);padding-bottom:6px;position:relative;transition:color .3s;
}
.ajouter::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:linear-gradient(135deg,transparent 0 44%,var(--trait-fort) 44% 56%,transparent 56%) 0 0 / 6px 6px repeat-x,linear-gradient(45deg,transparent 0 44%,var(--trait-fort) 44% 56%,transparent 56%) 0 0 / 6px 6px repeat-x}
.ajouter:hover{color:var(--gris)}
.ajouter.faite{color:var(--soleil-bas)}
.rien{color:var(--gris);font-size:14px}

/* ---- pour elle ---- */
.elle-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px)}
.elle-grille figure{margin:0}
.elle-grille .piece-vue{background:var(--blanc-2)}
.elle-grille figcaption{margin-top:12px}
.elle-grille h3{font-size:1.06rem;font-weight:600}

/* ---- l'atelier ---- */
.atelier{background:var(--blanc-2)}
.etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.etapes li{padding-top:18px;border-top:2px solid var(--encre)}
.etape-n{display:block;font-family:'Zilla Slab',serif;font-weight:600;font-size:13px;letter-spacing:.2em;color:var(--gris);margin-bottom:12px}
.etapes h3{font-size:1.25rem;margin-bottom:8px}
.etapes p{color:var(--gris);font-size:14.5px;line-height:1.7}

/* ---- commander ---- */
.coordonnees{list-style:none;margin:0;padding:0;max-width:820px}
.coordonnees li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 24px;padding:18px 0;border-top:1px solid var(--trait)}
.coordonnees li:last-child{border-bottom:1px solid var(--trait)}
.coordonnees span{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
.coordonnees b{font-weight:500;font-size:15px;text-align:right}
.coordonnees b a{border-bottom:1px solid var(--trait-fort);transition:border-color .3s}
.coordonnees b a:hover{border-color:var(--encre)}

/* ---- la sélection : un cintre ---- */
.panier{width:min(92vw,400px)}
.panier-tete{display:flex;align-items:center;justify-content:space-between;padding:18px 24px 14px;border-bottom:1px solid var(--trait)}
.panier-titre{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gris)}
.panier-liste{list-style:none;margin:0;padding:0 24px;overflow-y:auto;flex:1}
.ligne{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--trait);animation:entre .4s ease}
@keyframes entre{from{opacity:0}to{opacity:1}}
.ligne.sort{animation:sort .3s ease forwards}
@keyframes sort{to{opacity:0;height:0;padding:0;border:0}}
.ligne img{width:56px;aspect-ratio:3/4;object-fit:cover;background:var(--studio)}
.ligne-nom{font-family:'Zilla Slab',serif;font-weight:600;font-size:15px;line-height:1.35}
.ligne-det{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin-top:3px}
.ligne-pied{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.qte{display:flex;align-items:center;gap:10px}
.qte button{width:24px;height:24px;cursor:pointer;border:1px solid var(--trait);display:grid;place-items:center;font-size:13px;line-height:1;color:var(--gris);transition:border-color .25s,color .25s}
.qte button:hover{border-color:var(--encre);color:var(--encre)}
.qte b{min-width:16px;text-align:center;font-weight:600;font-size:13px;font-variant-numeric:tabular-nums}
.oter{cursor:pointer;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gris-clair);transition:color .25s}
.oter:hover{color:var(--encre)}
.panier-vide{padding:34px 24px;color:var(--gris);font-size:14px;text-align:center}
.panier-vide svg{width:64px;height:40px;fill:none;stroke:var(--gris-clair);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 14px}
.panier-bas{padding:18px 24px 26px;border-top:1px solid var(--trait);background:var(--blanc-2)}
.panier-note{margin-bottom:16px;font-size:12.5px;line-height:1.6;color:var(--gris)}
.bouton-wa{display:flex;align-items:center;justify-content:center;gap:11px;min-height:50px;background:var(--wa);color:#04190D;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;transition:opacity .3s}
.bouton-wa svg{width:18px;height:18px;fill:currentColor}
.bouton-wa[aria-disabled="true"]{opacity:.35;pointer-events:none}
.panier-manque{margin-top:10px;text-align:center;font-size:11.5px;color:var(--gris)}
.bouton-copier{margin-top:12px;width:100%;min-height:46px;cursor:pointer;border:1px solid var(--trait-fort);color:var(--encre);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;transition:border-color .3s,background .3s}
.bouton-copier:hover{border-color:var(--encre)}
.bouton-copier.ok{border-color:var(--wa);color:var(--wa)}

/* ---- pied ---- */
.pied{padding:clamp(52px,6vw,84px) var(--marge) 36px;border-top:1px solid var(--trait)}
.pied-zone{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px}
.pied-griffe{width:64px;height:64px;object-fit:contain;background:#fff;border:1px solid var(--trait);padding:2px}
.pied-mot{font-size:14px;color:var(--gris)}
.pied-bas{max-width:1200px;margin:30px auto 0;padding-top:18px;border-top:1px solid var(--trait);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 30px;color:var(--gris-clair);font-size:11.5px}

/* ---- révélation ---- */
.leve{opacity:0;transition:opacity .8s ease}
.leve.vue{opacity:1}

/* ---- adaptations ---- */
@media (max-width:1080px){
  .menu{display:none}
  .burger{display:flex}
  .bouton-panier{margin-left:auto}
  .griffe-mot{display:none}
  .cabine-cadre{grid-template-columns:1fr;gap:10px;padding-top:32px}
  .cabine-mot{padding-bottom:20px}
  .cabine h1{max-width:none}
  .mannequin{justify-self:center;max-width:420px}
  .rayon{grid-template-columns:1fr;gap:0}
  .cote{position:sticky;top:var(--h-tete);z-index:30;max-height:none;overflow:visible;background:var(--studio);margin:0 calc(var(--marge) * -1) 30px;padding:12px var(--marge);border-bottom:1px solid rgba(247,246,243,.25)}
  .sur-studio .replier{color:var(--blanc);border-color:rgba(247,246,243,.5)}
  .sur-studio .replier[aria-expanded="true"]{border-color:var(--blanc)}
  .replier{display:inline-flex;align-items:center;gap:8px;flex:none;cursor:pointer;min-height:38px;padding:0 14px;border:1px solid var(--trait-fort);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--encre);transition:border-color .3s}
  .replier[aria-expanded="true"]{border-color:var(--encre)}
  .replier-n{min-width:18px;height:18px;border-radius:999px;background:var(--soleil);color:var(--encre);display:grid;place-items:center;font-size:10px;letter-spacing:0;padding:0 5px}
  .chev{width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s}
  .replier[aria-expanded="true"] .chev{transform:rotate(225deg) translateY(-1px)}
  .cote-zone{margin-top:0;max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,.7,.2,1)}
  .cote-zone.ouvert{overflow:auto}
  .cote-dedans{padding:18px 0 6px;gap:18px}
  .groupe .cases{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
  .coche{padding:6px 0}
  .compte{margin-bottom:16px}
  .etapes{grid-template-columns:1fr;gap:26px}
  .elle-grille{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .entete{gap:14px;padding:9px 18px}
  .griffe img{width:42px;height:42px}
  .bouton-panier{padding:9px 12px;letter-spacing:.14em}
  .bp-mot{display:none}
  .cabine h1{font-size:2rem}
  .echantillons{max-width:none;gap:5px}
  .ech{width:34px;height:34px}
  .mannequin{max-width:none}
  .grille{grid-template-columns:repeat(2,1fr);gap:28px 14px}
  .piece h3{font-size:.98rem}
  .piece-ech{width:36px;height:36px;left:8px;bottom:8px}
  .essayer{display:none}
  .ajouter{font-size:10px;letter-spacing:.14em}
  .bouton{width:100%}
  .coordonnees b{text-align:left}
  .cote{margin:0 -18px 26px;padding:10px 18px}
  .elle-grille{grid-template-columns:1fr 1fr}
  .elle-grille figure:last-child{grid-column:span 2}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .leve,.piece{opacity:1}
}