/* ==========================================================================
   LE MAÎTRE — quasi-noir, ivoire, un trait de cuivre.
   Un noir qui n'en est pas tout à fait un : #0E1013, avec un souffle de bleu.
   Une seule famille de caractères, Libre Caslon — la lettre des tailleurs
   anglais depuis deux siècles — en Display pour les titres, en Text pour tout
   le reste. Petites cartes, beaucoup d'air, aucun effet au survol.
   ========================================================================== */

:root{
  --noir:#0E1013;
  --noir-haut:#121518;
  --noir-bas:#0A0C0E;
  --plaque:#15171A;
  --ivoire:#ECE8E1;
  --gris:#9A9891;
  --gris-bas:#6E6D68;
  --cuivre:#B98A68;
  --trait:rgba(236,232,225,.11);
  --trait-fort:rgba(236,232,225,.24);
  --wa:#1FAD55;
  --marge:clamp(20px,4.5vw,64px);
  --h-tete:66px;
}

*,*::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(--ivoire);
  background:linear-gradient(180deg,var(--noir-haut) 0,var(--noir) 38%,var(--noir-bas) 100%) fixed;
  font-family:'Libre Caslon Text',Georgia,'Times New Roman',serif;
  font-size:16px;line-height:1.75;-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}
:focus-visible{outline:1px solid var(--ivoire);outline-offset:4px}
h1,h2,h3{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;margin:0;letter-spacing:.002em}
p{margin:0}

.eti{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gris-bas)}
.lien{
  display:inline-block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ivoire);padding-bottom:5px;border-bottom:1px solid var(--trait-fort);
  transition:border-color .3s,color .3s;cursor:pointer;
}
.lien:hover{border-color:var(--cuivre);color:var(--cuivre)}

/* ---- bandeau maquette ---- */
.mention{
  padding:8px var(--marge);text-align:center;background:#090B0D;border-bottom:1px solid var(--trait);
  color:var(--gris-bas);font-size:11.5px;letter-spacing:.02em;line-height:1.55;
}
.mention b{font-weight:400;color:var(--gris)}

/* ---- en-tête ---- */
.entete{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:28px;
  padding:12px var(--marge);background:rgba(14,16,19,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--trait);
}
/* le logo garde son fond charbon : on lui donne une plaque, on ne le retouche pas */
.griffe{flex:none;line-height:0;background:var(--plaque);border:1px solid var(--trait);padding:6px 12px}
.griffe img{height:24px;width:auto}
.menu{margin-left:auto;display:flex;gap:32px}
.menu a{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gris);padding:8px 0;transition:color .3s}
.menu a:hover{color:var(--ivoire)}
.bouton-panier{
  flex:none;cursor:pointer;display:inline-flex;align-items:baseline;gap:9px;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ivoire);
  padding:9px 0 9px 22px;border-left:1px solid var(--trait);transition:color .3s;
}
.bouton-panier:hover{color:var(--cuivre)}
.bp-n{color:var(--cuivre);letter-spacing:0;font-variant-numeric:tabular-nums}
.burger{display:none;flex:none;width:40px;height:36px;cursor:pointer;border:1px solid var(--trait-fort);padding:10px 9px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:1px;background:var(--ivoire);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(6,7,9,.78);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;background:var(--plaque);
  border-left:1px solid var(--trait-fort);display:flex;flex-direction:column;
  animation:glisse .45s cubic-bezier(.22,.7,.2,1);
}
@keyframes glisse{from{transform:translateX(100%)}to{transform:translateX(0)}}
.tiroir{width:min(84vw,320px);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(--ivoire)}
.tiroir-griffe{width:80px;margin:10px 0 30px;border:1px solid var(--trait)}
.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:'Libre Caslon Display',serif;font-size:19px;transition:color .25s}
.tiroir-liens a:hover{color:var(--cuivre)}
.tiroir-mot{margin-top:auto;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gris-bas)}

/* ---- rythme ---- */
.bloc{padding:clamp(80px,10vw,150px) var(--marge)}
.cadre{max-width:1180px;margin:0 auto}
.tete{margin-bottom:clamp(40px,5vw,64px)}
.tete h2{font-size:clamp(1.7rem,3vw,2.35rem);line-height:1.2;margin-top:16px;max-width:22ch;text-wrap:balance}
.tete .dit{margin-top:16px;color:var(--gris);max-width:52ch;font-size:15.5px}
.filet{height:1px;background:var(--trait);border:0;margin:0}

/* ---- ouverture ---- */
.ouverture{
  max-width:1180px;margin:0 auto;padding:clamp(64px,8vw,120px) var(--marge) clamp(64px,8vw,110px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(40px,7vw,120px);align-items:center;
}
.ouverture h1{font-size:clamp(2rem,4vw,3.1rem);line-height:1.18;margin-top:22px;text-wrap:balance;max-width:16ch}
.ouverture .dit{margin-top:22px;color:var(--gris);max-width:40ch;font-size:16px}
.ouverture .lien{margin-top:36px}
/* la pièce du moment : elle sort de la grille pour ouvrir la page */
.piece-du-moment{margin:0}
.piece-du-moment img{width:100%;aspect-ratio:4/5;object-fit:cover}
.piece-du-moment figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:14px}
.pdm-nom{font-style:italic;font-size:15.5px}
.pdm-eti{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gris-bas)}
.piece-du-moment .ajouter{margin-top:10px}

/* ---- collection : petites cartes, beaucoup d'air ---- */
.filtres{display:flex;flex-wrap:wrap;gap:0 30px;margin:0 0 clamp(36px,4vw,54px);padding-bottom:18px;border-bottom:1px solid var(--trait)}
.puce{
  cursor:pointer;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gris-bas);
  padding:4px 0;transition:color .3s;
}
.puce sup{font-size:9px;letter-spacing:0;margin-left:5px;color:var(--gris-bas)}
.puce:hover{color:var(--gris)}
.puce[aria-pressed="true"]{color:var(--ivoire)}
.grille{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(44px,5vw,72px) clamp(24px,3vw,40px)}
.piece{opacity:0;transition:opacity .7s ease}
.piece.vue{opacity:1}
.piece-vue{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--plaque)}
.piece-vue img{width:100%;height:100%;object-fit:cover}
/* Les photos viennent de studios différents. Un voile de nuit les ramène
   toutes vers la page, sans toucher aux fichiers. */
.piece-vue::after,.pv::after{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(14,16,19,.14)}
.piece-bas{margin-top:14px}
.piece h3{font-family:'Libre Caslon Text',serif;font-style:italic;font-weight:400;font-size:15.5px;line-height:1.4}
.piece-fam{display:block;margin-top:5px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gris-bas)}
.piece-det{margin-top:8px;color:var(--gris);font-size:13.5px;line-height:1.6}
.ajouter{
  display:inline-block;margin-top:12px;cursor:pointer;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ivoire);padding-bottom:4px;border-bottom:1px solid var(--trait-fort);transition:color .3s,border-color .3s;
}
.ajouter:hover{color:var(--cuivre);border-color:var(--cuivre)}
.ajouter.faite{color:var(--cuivre);border-color:var(--cuivre)}
.rien{color:var(--gris-bas);font-size:14px}

/* ---- notre histoire : du texte, rien d'autre ---- */
.histoire{padding:clamp(80px,10vw,150px) var(--marge);border-block:1px solid var(--trait);background:rgba(255,255,255,.012)}
.histoire-cadre{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,120px);align-items:start}
.histoire blockquote{margin:0;font-family:'Libre Caslon Display',serif;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.18;text-wrap:balance}
.histoire blockquote span{color:var(--cuivre)}
.histoire-texte{display:grid;gap:22px;color:var(--gris);font-size:15.5px;max-width:54ch;padding-top:6px}
.histoire-texte p:first-child{color:var(--ivoire)}
.histoire .eti{margin-bottom:18px;display:block}

/* ---- sur-mesure ---- */
.etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.etapes li{padding:26px clamp(18px,2.4vw,34px) 0 0;border-top:1px solid var(--trait)}
.etape-n{display:block;font-size:10.5px;letter-spacing:.3em;color:var(--cuivre);margin-bottom:14px}
.etapes h3{font-size:1.2rem;margin-bottom:10px}
.etapes p{color:var(--gris);font-size:14px;line-height:1.7}

/* ---- portés ---- */
.portes-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px)}
.portes-grille figure{margin:0}
.pv{position:relative;overflow:hidden}
.portes-grille img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 18%}
.portes-grille figcaption{margin-top:12px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gris-bas)}

/* ---- commander ---- */
.coordonnees{list-style:none;margin:0;padding:0;max-width:760px}
.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:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gris-bas)}
.coordonnees b{font-weight:400;font-style:italic;font-size:1.02rem}
.a-fournir{color:var(--gris-bas)!important}
.coordonnees b a{border-bottom:1px solid var(--trait-fort);transition:border-color .3s,color .3s}
.coordonnees b a:hover{color:var(--cuivre);border-color:var(--cuivre)}

/* ---- sélection ---- */
.panier{width:min(92vw,392px)}
.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:10.5px;letter-spacing:.26em;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:54px 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:54px;aspect-ratio:4/5;object-fit:cover}
.ligne-nom{font-style:italic;font-size:15px;line-height:1.4}
.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(--ivoire);color:var(--ivoire)}
.qte b{min-width:16px;text-align:center;font-weight:400;font-size:13px;font-variant-numeric:tabular-nums}
.oter{cursor:pointer;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris-bas);transition:color .25s}
.oter:hover{color:var(--cuivre)}
.panier-vide{padding:26px 24px;color:var(--gris-bas);font-size:14px}
.panier-bas{padding:20px 24px 26px;border-top:1px solid var(--trait)}
.panier-note{margin-bottom:16px;font-size:12.5px;line-height:1.6;color:var(--gris-bas)}
.bouton-wa{
  display:flex;align-items:center;justify-content:center;gap:11px;min-height:50px;
  background:var(--wa);color:#04190D;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;transition:opacity .3s;
}
.bouton-wa svg{width:18px;height:18px;fill:currentColor}
.bouton-wa[aria-disabled="true"]{opacity:.34;pointer-events:none}
.bouton-copier{
  margin-top:14px;width:100%;min-height:46px;cursor:pointer;border:1px solid var(--trait-fort);
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;transition:border-color .3s,color .3s;
}
.bouton-copier:hover{border-color:var(--ivoire)}
.bouton-copier.ok{border-color:var(--wa);color:var(--wa)}

/* ---- pied ---- */
.pied{padding:clamp(56px,6vw,90px) var(--marge) 36px;border-top:1px solid var(--trait);background:#090B0D}
.pied-zone{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px}
.pied-griffe{width:88px;border:1px solid var(--trait)}
.pied-mot{font-style:italic;color:var(--gris)}
.pied-bas{max-width:1180px;margin:32px 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-bas);font-size:11.5px}

/* ---- révélation : un simple fondu ---- */
.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}
  .grille{grid-template-columns:repeat(3,1fr)}
  .etapes{grid-template-columns:repeat(2,1fr);gap:28px 0}
  .histoire-cadre{grid-template-columns:1fr;gap:34px}
}
@media (max-width:760px){
  .ouverture{grid-template-columns:1fr;gap:44px}
  .ouverture h1{max-width:none}
  .piece-du-moment{max-width:420px}
  .grille{grid-template-columns:repeat(2,1fr);gap:36px 18px}
  .portes-grille{grid-template-columns:1fr 1fr;gap:18px}
  .portes-grille figure:last-child{grid-column:span 2}
}
@media (max-width:560px){
  .entete{gap:14px;padding:11px 18px}
  .griffe{padding:5px 9px}
  .griffe img{height:19px}
  .bouton-panier{padding-left:14px;letter-spacing:.16em}
  .bp-mot{display:none}
  .filtres{gap:0 20px}
  .piece h3{font-size:14.5px}
  .piece-det{font-size:13px}
  .ajouter{font-size:9.5px;letter-spacing:.16em}
  .etapes{grid-template-columns:1fr}
  .portes-grille{grid-template-columns:1fr}
  .portes-grille figure:last-child{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .leve,.piece{opacity:1}
}