/* =============================================================
   VINZ CRÉATIONS — Feuille de style
   Direction : « Atelier sombre & bronze »
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Couleurs */
  --bg:        #0D0C0B;   /* noir chaud */
  --bg-2:      #131110;   /* sections alternées */
  --surface:   #191614;   /* cartes */
  --surface-2: #211D19;   /* cartes survolées */
  --text:      #ECE7E0;   /* plâtre */
  --muted:     #9A9188;   /* texte secondaire */
  --faint:     #6B645C;   /* labels, mentions */
  --accent:    #E8B96A;   /* or */
  --accent-lt: #FFD98A;   /* or clair */
  --accent-dk: #A87C3C;   /* or sombre */
  --line:      rgba(236,231,224,.10);
  --line-2:    rgba(236,231,224,.18);

  /* Or métallique : les reflets viennent des ruptures brutales
     entre les arrêts clairs et sombres, pas d'un dégradé lisse. */
  --metal: linear-gradient(100deg,
    #8A6A3E 0%, #C9A05F 12%, #FFD98A 26%, #FFF4D6 34%,
    #E8B96A 44%, #A87C3C 58%, #FFD98A 74%, #FFF0C9 82%,
    #C9A05F 92%, #8A6A3E 100%);
  --metal-soft: linear-gradient(100deg,
    #C9A05F 0%, #E8B96A 25%, #FFE7B0 45%, #E8B96A 62%, #B98F4C 100%);

  /* Typo */
  --serif: "Cormorant Garamond", Cormorant, Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Rythme */
  --wrap: 1180px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --sec-y: clamp(5rem, 11vw, 9.5rem);
  --r: 3px;

  /* Mouvement */
  --e: cubic-bezier(.22,.61,.36,1);
  --e-out: cubic-bezier(.16,1,.3,1);

  /* Logo — déclaré ici pour qu'il s'affiche dès la première image, sans
     attendre le JavaScript. Sinon le nom écrit apparaissait une fraction
     de seconde avant d'être remplacé, à chaque changement de page.
     `data.js` peut toujours redéfinir ces deux valeurs à chaud. */
  --logo-src: url("images/logo.png");
  --logo-ratio: 2000 / 500;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:84px;
  -webkit-text-size-adjust:100%;
  /* Android surligne en bleu translucide l'élément touché. Sur les
     pastilles couleur/résine, le cadre déborde sur toute la photo
     pendant une seconde. Nos propres états de survol et de focus
     suffisent à montrer ce qui est actif. */
  -webkit-tap-highlight-color:transparent;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(.975rem,.93rem + .18vw,1.0625rem);
  font-weight:300;
  line-height:1.7;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  /* `clip` et non `hidden` : `hidden` ferait du body un conteneur de
     défilement, ce qui casserait le `position:sticky` de la galerie. */
  overflow-x:clip;
}

/* grain d'atelier, très léger */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-.015em;
  margin:0;
}

::selection{ background:var(--accent); color:#0D0C0B; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
  position:relative;
  z-index:1;
}
.wrap--narrow{ max-width:820px; }

.skip{
  position:absolute; left:-9999px; top:0;
  z-index:200;
  background:var(--accent); color:#0D0C0B;
  padding:.75rem 1.25rem; font-size:.9rem;
}
.skip:focus{ left:1rem; top:1rem; }

/* ---------- 3. Éléments partagés ---------- */
.eyebrow{
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 1.25rem;
  display:flex; align-items:center; gap:.85rem;
}
.eyebrow::before{
  content:""; width:2rem; height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);
  flex:none;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.9rem;
  background:var(--metal-soft);
  background-size:200% 100%;
  background-position:0% 50%;
  color:#120E07;
  font-size:.82rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  border:1px solid var(--accent);
  border-radius:var(--r);
  cursor:pointer;
  position:relative; overflow:hidden;
  box-shadow:0 0 0 rgba(232,185,106,0);
  transition:background-position .8s var(--e-out), transform .45s var(--e),
             box-shadow .45s var(--e), border-color .45s var(--e), color .45s var(--e);
}
.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.55),transparent 80%);
  transform:translateX(-120%);
  transition:transform .8s var(--e-out);
}
.btn:hover{
  background-position:100% 50%;
  border-color:var(--accent-lt);
  transform:translateY(-2px);
  box-shadow:0 8px 28px -10px rgba(232,185,106,.55);
}
.btn:hover::after{ transform:translateX(120%); }
.btn:active{ transform:translateY(0); }

.btn--ghost{
  background:transparent; color:var(--text);
  border-color:var(--line-2);
}
.btn--ghost:hover{
  background:rgba(200,160,106,.09);
  border-color:var(--accent);
  color:var(--accent-lt);
}
.btn--sm{ padding:.68rem 1.3rem; font-size:.72rem; }
.btn--full{ width:100%; }

.tag{
  display:inline-block;
  font-size:.63rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  padding:.34rem .72rem;
  border:1px solid var(--line-2);
  border-radius:100px;
  color:var(--muted);
  backdrop-filter:blur(8px);
  background:rgba(13,12,11,.6);
}
.tag--disponible{ color:var(--accent-lt); border-color:rgba(200,160,106,.5); }
.tag--vendu{ color:var(--faint); }

/* ---------- 4. Animations d'apparition ---------- */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .9s var(--e-out), transform .9s var(--e-out);
}
.reveal.in{ opacity:1; transform:none; }
.reveal--d1{ transition-delay:.09s; }
.reveal--d2{ transition-delay:.18s; }
.reveal--d3{ transition-delay:.27s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}

/* ---------- 5. En-tête ---------- */
.hdr{
  position:fixed; inset:0 0 auto;
  z-index:100;
  transition:background .5s var(--e), border-color .5s var(--e), backdrop-filter .5s var(--e);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(13,12,11,.82);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.hdr__in{
  max-width:var(--wrap);
  margin-inline:auto;
  padding:1.15rem var(--gut);
  display:flex; align-items:center; gap:2rem;
  transition:padding .5s var(--e);
}
.hdr.is-stuck .hdr__in{ padding-block:.75rem; }

.brand{ display:flex; align-items:center; gap:.75rem; margin-right:auto; }

/* Le logo est un tracé noir sur fond transparent. On ne l'affiche pas :
   on s'en sert comme masque devant l'or métallique, ce qui le recolore
   proprement sans toucher au fichier. */
.brand__logo{
  display:block;
  width:clamp(196px,20vw,286px);
  aspect-ratio:var(--logo-ratio,4/1);
  background:var(--metal);
  background-size:220% 100%;
  -webkit-mask:var(--logo-src) no-repeat center / contain;
          mask:var(--logo-src) no-repeat center / contain;
  transition:filter .5s var(--e);
}
.brand:hover .brand__logo{ filter:brightness(1.14); }
/* Quand le logo est en place, le monogramme et le nom écrit disparaissent. */
.brand.has-logo .brand__mark,
.brand.has-logo .brand__txt{ display:none; }

.brand__mark{ color:var(--accent); display:flex; transition:transform .6s var(--e-out); }
.brand:hover .brand__mark{ transform:rotate(-4deg) scale(1.05); }
.brand__txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand__txt b{
  font-family:var(--serif); font-weight:400; font-size:1.28rem; letter-spacing:.005em;
}
.brand__txt i{
  font-style:normal; font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint);
}

.nav{ display:flex; gap:2.1rem; }
.nav a{
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
  position:relative; padding-block:.3rem;
  transition:color .35s var(--e);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--e-out);
}
.nav a:hover, .nav a.is-active{ color:var(--text); }
.nav a:hover::after, .nav a.is-active::after{ transform:scaleX(1); transform-origin:left; }

.hdr__act{ display:flex; align-items:center; gap:.9rem; }

.lang{
  background:none; border:1px solid var(--line-2);
  border-radius:100px;
  padding:.42rem .85rem;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); cursor:pointer;
  transition:color .35s var(--e), border-color .35s var(--e), background .35s var(--e);
}
.lang:hover{ color:var(--accent-lt); border-color:var(--accent); background:rgba(200,160,106,.08); }

.burger{
  display:none;
  width:42px; height:42px;
  background:none; border:1px solid var(--line-2); border-radius:var(--r);
  cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{
  display:block; width:17px; height:1px; background:var(--text);
  transition:transform .4s var(--e), opacity .3s var(--e);
}
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }

/* ---------- 6. Accueil ---------- */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column;
  padding:7.5rem 0 2.5rem;
  position:relative;
  isolation:isolate;
}
.hero__glow{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(70% 55% at 78% 18%, rgba(200,160,106,.16), transparent 62%),
    radial-gradient(60% 60% at 12% 88%, rgba(138,106,62,.11), transparent 65%),
    linear-gradient(180deg, #100E0D 0%, var(--bg) 55%);
}
.hero__glow::after{
  content:""; position:absolute; inset:auto 0 0; height:180px;
  background:linear-gradient(180deg,transparent,var(--bg));
}
/* `margin-block:auto` centre le bloc dans l'espace restant tout en
   laissant la mention « faire défiler » vivre dans le flux en dessous :
   sur un écran bas, elle est repoussée au lieu de chevaucher les boutons. */
.hero__in{ max-width:1040px; margin-block:auto; }

.hero__t{
  font-size:clamp(2.8rem,8.6vw,6.6rem);
  margin:0 0 1.6rem;
}
.hero__t span{ display:block; }
.hero__t--em{
  font-style:italic;
  background:var(--metal);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  padding-bottom:.08em;   /* laisse respirer les jambages */
  animation:sheen 9s linear infinite;
}
@keyframes sheen{
  from{ background-position:0% 50%; }
  to  { background-position:220% 50%; }
}
.hero__lead{
  max-width:52ch;
  font-size:clamp(1.02rem,.97rem + .35vw,1.22rem);
  color:var(--muted);
  margin:0 0 2.8rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; }

.hero__scroll{
  margin:3rem auto 0;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-size:.6rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--faint);
}
.hero__scroll i{
  width:1px; height:46px; display:block;
  background:linear-gradient(180deg,var(--accent),transparent);
  animation:drop 2.4s var(--e) infinite;
  transform-origin:top;
}
@keyframes drop{
  0%   { transform:scaleY(0);   opacity:0; }
  35%  { transform:scaleY(1);   opacity:1; }
  100% { transform:scaleY(1);   opacity:0; }
}

/* ---------- 7. Chiffres ---------- */
.stats{
  border-block:1px solid var(--line);
  background:var(--bg-2);
}
.stats__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
}
.stat{
  background:var(--bg-2);
  padding:clamp(2rem,4vw,3.1rem) clamp(1rem,2vw,1.75rem);
  text-align:center;
}
.stat b{
  display:block;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.2rem,5.5vw,3.4rem);
  line-height:1;
  color:var(--accent);
  margin-bottom:.55rem;
}
.stat span{
  font-size:.7rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--faint);
}

/* ---------- 8. Sections ---------- */
.sec{ padding-block:var(--sec-y); position:relative; }
.sec--alt{ background:var(--bg-2); border-block:1px solid var(--line); }

.sec__head{ max-width:660px; margin-bottom:clamp(2.75rem,6vw,4.5rem); }
.sec__t{ font-size:clamp(2.1rem,5.2vw,3.6rem); margin:0 0 1.1rem; }
.sec__lead{ color:var(--muted); margin:0; max-width:56ch; }

/* ---------- 9. Galerie : rail horizontal ---------- */
/* Le défilement n'est plus piloté par le scroll de la page : on garde
   un vrai conteneur défilant, manœuvré aux flèches sur ordinateur et
   au doigt sur tablette et téléphone. */
.gal{ overflow:hidden; }

.gal__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.gal__intro{ max-width:620px; }

.gal__nav{ display:flex; gap:.6rem; flex:none; }
.gal__arrow{
  width:46px; height:46px;
  display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:50%;
  background:none; color:var(--text);
  cursor:pointer;
  transition:background .35s var(--e), color .35s var(--e),
             border-color .35s var(--e), opacity .35s var(--e);
}
.gal__arrow:hover:not(:disabled){
  background:var(--accent); color:#120E07; border-color:var(--accent);
}
.gal__arrow:disabled{ opacity:.28; cursor:default; }

/* Le rail déborde volontairement de la grille pour aller au bord de
   l'écran, mais sa première carte reste alignée sur le texte. */
.gal__rail{
  overflow-x:auto;
  overflow-y:hidden;
  /* Pas de défilement adouci ici : il transformerait chaque pixel du
     défilement automatique en animation et le rendrait saccadé.
     Les flèches demandent l adoucissement au coup par coup. */
  scroll-behavior:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  padding-inline:max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
  padding-block:.4rem 1.2rem;
  -webkit-overflow-scrolling:touch;
}
.gal__rail::-webkit-scrollbar{ display:none; }

/* Deux rangées : les pièces remplissent la colonne de haut en bas,
   puis passent à la colonne suivante. */
.gal__track{
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:auto;
  grid-auto-columns:clamp(196px,21vw,296px);
  align-items:stretch;
  gap:clamp(.7rem,1.4vw,1.15rem);
  width:max-content;
}
#grid{ display:grid; }

.gal__bar{
  height:1px;
  background:var(--line-2);
  margin-top:.4rem;
}
.gal__bar i{
  display:block; height:100%; width:0;
  background:var(--metal-soft);
}
.gal__bar.is-hidden{ visibility:hidden; }

/* ---------- Cartes 3D ---------- */
.card{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface);
  cursor:pointer;
  text-align:left;
  padding:0;
  display:flex; flex-direction:column;
  transform-style:preserve-3d;
  transform:
    perspective(1000px)
    rotateX(var(--rx,0deg))
    rotateY(var(--ry,0deg))
    translate3d(0,var(--ty,0),0);
  transition:border-color .55s var(--e), background .55s var(--e),
             box-shadow .55s var(--e), transform .7s var(--e-out);
}
.card.is-tilting{ transition:border-color .55s var(--e), background .55s var(--e), box-shadow .55s var(--e); }
.card:hover{
  border-color:rgba(232,185,106,.45);
  background:var(--surface-2);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.85);
  --ty:-6px;
}

.card__media{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(150deg,#1B1815,#100E0D);
}
/* Deux visuels superposés : le rendu couleur, et dessous la version
   résine qui se révèle au survol. C'est la comparaison la plus parlante. */
.card__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.92) contrast(1.03);
  transform:scale(1.06) translate3d(var(--ix,0),var(--iy,0),0);
  transition:transform .7s var(--e-out), filter .7s var(--e), opacity .55s var(--e);
  /* La carte est en `preserve-3d` et ces images portent une
     transformation 3D : elles vivent donc dans l'espace, où le
     `z-index` ne les départage plus de façon fiable du bouton
     d'ouverture. Selon que le navigateur compose en accéléré ou en
     logiciel, l'image pouvait passer devant et avaler le clic — la
     photo ne s'ouvrait qu'en visant la bordure. Une image est
     décorative : elle n'a aucune raison de recevoir le pointeur. */
  pointer-events:none;
}
.card.is-tilting .card__media img{ transition:filter .7s var(--e), opacity .55s var(--e); }
.card:hover .card__media img{ filter:saturate(1) contrast(1.07); }

.card__media img.is-resin{ opacity:0; }
.card.is-resin-view .card__media img.is-color{ opacity:0; }
.card.is-resin-view .card__media img.is-resin{ opacity:1; }

/* Zone cliquable qui ouvre la fiche : elle couvre la vignette
   sans englober les boutons de vue, posés au-dessus.
   Le `translateZ` la place explicitement devant les images dans
   l'espace 3D de la carte, plutôt que de s'en remettre au seul
   `z-index` que `preserve-3d` rend imprévisible. */
.card__open{
  position:absolute; inset:0; z-index:3;
  transform:translateZ(1px);
  border:0; background:none; padding:0;
  cursor:zoom-in;
}

/* Deux boutons explicites, lisibles au doigt comme à la souris. */
.card__switch{
  position:absolute; z-index:4;
  /* Même raison que pour `.card__open` : on se place explicitement
     devant, la bascule doit rester cliquable par-dessus la zone
     d'ouverture. */
  left:50%; transform:translateX(-50%) translateZ(2px);
  bottom:.6rem;
  display:flex; gap:2px; padding:2px;
  border:1px solid var(--line-2); border-radius:100px;
  background:rgba(13,12,11,.72); backdrop-filter:blur(8px);
}
.card__switch button{
  border:0; border-radius:100px;
  background:none; color:var(--muted);
  padding:.3rem .62rem;
  font-size:.6rem; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap;
  transition:color .3s var(--e), background .3s var(--e);
}
.card__switch button:hover{ color:var(--text); }
.card__switch button.is-on{
  background:var(--metal-soft);
  color:#120E07; font-weight:600;
}

.card__tag{ position:absolute; top:.55rem; left:.55rem; z-index:4; font-size:.55rem; padding:.26rem .55rem; }

.card__body{
  padding:1.05rem 1.15rem 1.2rem;
  transform:translateZ(24px);
  flex:1;
  display:flex; flex-direction:column;
}
.card__body h3{
  font-size:1.32rem;
  margin:0 0 .3rem;
  transition:color .4s var(--e);
}
.card:hover .card__body h3{ color:var(--accent-lt); }
.card__meta{
  display:flex; flex-wrap:wrap; gap:.3rem .7rem;
  font-size:.7rem; letter-spacing:.08em;
  color:var(--faint);
  margin:0 0 .85rem;
}
.card__price{
  font-size:.78rem; letter-spacing:.04em;
  color:var(--accent);
  /* le prix reste collé en bas : les pièces vendues n'en affichent pas,
     et leur carte ne doit pas se désaligner pour autant */
  margin:auto 0 0;
  min-height:1.5em;
}

/* Les cartes apparaissent en opacité seule. Elles n'utilisent surtout pas
   `.reveal`, dont le `transform` entrerait en conflit avec l'inclinaison 3D. */
.fade{ opacity:0; transition:opacity .9s var(--e-out); }
.fade.in{ opacity:1; }

/* ---------- 10. Processus ---------- */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
.step{
  background:var(--bg-2);
  padding:clamp(1.75rem,3.2vw,2.6rem);
  position:relative;
  transition:background .5s var(--e);
}
.step:hover{ background:var(--surface); }
.step b{
  display:block;
  font-family:var(--serif); font-weight:300;
  font-size:2.6rem; line-height:1;
  color:var(--accent-dk);
  margin-bottom:1.1rem;
  transition:color .5s var(--e);
}
.step:hover b{ color:var(--accent); }
.step h3{ font-size:1.5rem; margin:0 0 .7rem; }
.step p{ margin:0; color:var(--muted); font-size:.93rem; }

/* ---------- 11. Formules ---------- */
.plans{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:clamp(1rem,2vw,1.6rem);
  align-items:start;
}
.plan{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface);
  padding:clamp(1.9rem,3.2vw,2.5rem);
  display:flex; flex-direction:column;
  position:relative;
  transition:border-color .5s var(--e), transform .5s var(--e-out);
}
.plan:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.plan--star{
  border-color:rgba(200,160,106,.42);
  background:linear-gradient(170deg,rgba(200,160,106,.07),var(--surface) 58%);
}
.plan--star:hover{ border-color:var(--accent); }
.plan__badge{
  position:absolute; top:-.72rem; left:clamp(1.9rem,3.2vw,2.5rem);
  background:var(--accent); color:#0D0C0B;
  font-size:.6rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  padding:.32rem .8rem; border-radius:100px;
}
.plan h3{ font-size:1.85rem; margin:0 0 .45rem; }
.plan__resume{ color:var(--muted); font-size:.92rem; margin:0 0 1.6rem; min-height:2.8em; }
.plan__price{
  display:flex; align-items:baseline; gap:.5rem;
  padding-bottom:1.5rem; margin-bottom:1.5rem;
  border-bottom:1px solid var(--line);
}
.plan__price em{
  font-style:normal;
  font-size:.66rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--faint);
}

/* Formule affichée mais pas encore commandable */
.plan--soon{ position:relative; }
.plan--soon > *:not(.plan__stamp){ opacity:.46; }
.plan__stamp{
  position:absolute; z-index:3;
  top:1.5rem; right:-.6rem;
  transform:rotate(6deg);
  padding:.42rem 1.1rem;
  font-size:.64rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-lt);
  border:1px solid var(--accent);
  border-radius:2px;
  background:rgba(13,12,11,.9);
  box-shadow:0 6px 22px -10px rgba(0,0,0,.9);
}
.btn.is-off{ cursor:not-allowed; }
.plan__price b{
  font-family:var(--serif); font-weight:300;
  font-size:2.5rem; line-height:1;
  color:var(--text);
}
.plan ul{ list-style:none; margin:0 0 2rem; padding:0; display:grid; gap:.72rem; flex:1; }
.plan li{
  display:flex; gap:.7rem; align-items:flex-start;
  font-size:.9rem; color:var(--muted);
}
.plan li svg{ flex:none; margin-top:.42em; color:var(--accent); }

/* ---------- 12. Atelier ---------- */
.studio{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:center;
}
.studio__media{ position:relative; }
.studio__media img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--r);
  filter:saturate(.9) contrast(1.04);
}
.studio__frame{
  position:absolute; inset:0;
  border:1px solid rgba(200,160,106,.4);
  border-radius:var(--r);
  transform:translate(16px,16px);
  pointer-events:none;
  transition:transform .8s var(--e-out);
}
.studio__media:hover .studio__frame{ transform:translate(10px,10px); }

.studio__txt p{ color:var(--muted); }
.studio__txt p:not(.eyebrow):not(.studio__sign){ margin:0 0 1.15rem; }
.studio__sign{
  font-family:var(--serif); font-style:italic;
  font-size:1.35rem; color:var(--accent);
  margin:2rem 0 0;
}

/* ---------- 13. Témoignages ---------- */
.quotes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(1rem,2vw,1.6rem);
}
.quote{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface);
  padding:clamp(1.8rem,3vw,2.4rem);
  position:relative;
  transition:border-color .5s var(--e), background .5s var(--e);
}
.quote:hover{ border-color:var(--line-2); background:var(--surface-2); }
.quote::before{
  content:"“";
  font-family:var(--serif);
  font-size:5.5rem; line-height:1;
  color:var(--accent-dk);
  opacity:.5;
  position:absolute; top:.55rem; right:1.2rem;
}
.quote p{
  font-family:var(--serif);
  font-size:1.22rem; line-height:1.55;
  margin:0 0 1.6rem;
  position:relative;
}
.quote footer{
  font-size:.75rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--faint);
}
.quote footer b{ color:var(--accent); font-weight:500; }

/* ---------- 14. FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none;
  cursor:pointer;
  padding:1.5rem 3rem 1.5rem 0;
  position:relative;
  font-family:var(--serif);
  font-size:clamp(1.15rem,2.3vw,1.5rem);
  line-height:1.3;
  transition:color .4s var(--e);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--accent-lt); }
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:50%;
  width:11px; height:11px;
  border-right:1px solid var(--accent); border-bottom:1px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .45s var(--e);
}
.faq details[open] summary::after{ transform:translateY(-20%) rotate(-135deg); }
.faq__a{
  overflow:hidden;
  color:var(--muted);
  font-size:.95rem;
  padding:0 3rem 1.75rem 0;
  margin:0;
  max-width:66ch;
}
.faq details[open] .faq__a{ animation:unfold .55s var(--e-out); }
@keyframes unfold{
  from{ opacity:0; transform:translateY(-8px); }
  to  { opacity:1; transform:none; }
}

/* ---------- 15. Contact ---------- */
.sec--contact{
  background:
    radial-gradient(75% 60% at 82% 8%, rgba(200,160,106,.11), transparent 60%),
    var(--bg);
  border-top:1px solid var(--line);
}
.contact{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5rem);
  align-items:start;
}
.contact__list{
  list-style:none; margin:2.5rem 0 0; padding:0;
  display:grid; gap:1.15rem;
}
.contact__list li{ display:flex; gap:.95rem; align-items:flex-start; }
.contact__list svg{ flex:none; margin-top:.3em; color:var(--accent); }
.contact__list b{
  display:block;
  font-size:.66rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--faint);
  margin-bottom:.15rem;
}
.contact__list a{ transition:color .35s var(--e); }
.contact__list a:hover{ color:var(--accent-lt); }

.form{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(1.6rem,3.4vw,2.6rem);
  display:grid; gap:1.15rem;
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
.field{ display:grid; gap:.5rem; }
.field > span{
  font-size:.66rem; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--faint);
}
.field input,
.field select,
.field textarea{
  width:100%;
  background:rgba(13,12,11,.55);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  color:var(--text);
  font-family:inherit; font-size:.95rem; font-weight:300;
  padding:.82rem .95rem;
  transition:border-color .35s var(--e), background .35s var(--e), box-shadow .35s var(--e);
}
.field textarea{ resize:vertical; min-height:120px; line-height:1.6; }
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C8A06A' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.6rem;
  cursor:pointer;
}
.field select option{ background:#17141200; background-color:#171412; color:var(--text); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--accent);
  background:rgba(13,12,11,.85);
  box-shadow:0 0 0 3px rgba(200,160,106,.12);
}
.field input::placeholder,
.field textarea::placeholder{ color:#5A544D; }
.field.is-bad input,
.field.is-bad textarea{ border-color:#A5533F; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__note{
  margin:0; font-size:.85rem; min-height:1.3em;
  color:var(--muted);
}
.form__note.is-ok{ color:var(--accent-lt); }
.form__note.is-bad{ color:#D98A72; }

/* ---------- 16. Pied de page ----------
   Réduit au strict nécessaire : mention de propriété et réseaux.
   La navigation et le logo restent accessibles dans l'en-tête fixe. */
.ftr{
  background:#0A0908;
  border-top:1px solid var(--line);
  font-size:.9rem;
}
.ftr__bot{
  padding-block:1.6rem;
  display:flex; flex-wrap:wrap; gap:1rem 2rem;
  align-items:center; justify-content:space-between;
  font-size:.76rem; color:var(--faint);
}
.ftr__bot > span{ max-width:62ch; }

/* ---------- 17. Lightbox ---------- */
.lb{
  position:fixed; inset:0; z-index:150;
  display:grid; place-items:center;
  padding:clamp(1rem,3vw,2.5rem);
  /* Pas de `backdrop-filter` ici. Ce fond est opaque à 93 % : le flou
     ne se voyait pratiquement pas, mais il obligeait le navigateur à
     recalculer un flou plein écran à chaque image pendant l'ouverture.
     Mesuré à sa suppression : de 38 ms à 16 ms par image. */
  background:rgba(6,5,5,.955);
  opacity:0;
  transition:opacity .45s var(--e);
}
.lb[hidden]{ display:none; }
.lb.is-open{ opacity:1; }

.lb__box{
  width:100%; max-width:1060px;
  max-height:88vh;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  overflow:hidden;
  transform:scale(.965) translateY(14px);
  transition:transform .55s var(--e-out);
}
.lb.is-open .lb__box{ transform:none; }

.lb__fig{
  margin:0; min-height:0; position:relative;
  background:radial-gradient(120% 100% at 50% 0%, #16120F, #0B0A09);
}
/* `contain` et non `cover` : la fiche montre la pièce entière, socle
   compris. Les pièces n'ont pas toutes le même format, un recadrage
   coupait le haut du décor ou le bas du socle. */
.lb__fig img{
  width:100%; height:100%;
  max-height:88vh;
  object-fit:contain;
}

/* Bascule couleur / résine */
.seg{
  display:flex;
  max-width:100%;   /* la bascule ne peut plus déborder de la fiche */
  padding:3px;
  border:1px solid var(--line-2); border-radius:100px;
  background:rgba(13,12,11,.6);
  margin:0 0 1rem;
}
.seg__btn{
  flex:1 1 0; min-width:0;
  border:0; border-radius:100px;
  background:none; color:var(--muted);
  padding:.48rem 1rem;
  font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap;
  transition:color .4s var(--e), background .4s var(--e);
}
.seg__btn:hover{ color:var(--text); }
.seg__btn.is-on{
  background:var(--metal-soft);
  color:#120E07; font-weight:600;
}

/* Mention « image générée, non contractuelle » */
.notice{
  margin:0 0 1.6rem;
  padding-left:.85rem;
  border-left:2px solid var(--accent-dk);
  font-size:.78rem; line-height:1.6;
  color:var(--faint);
}
.notice--inline{
  border-left:0; padding-left:0;
  margin:1.1rem 0 0;
  display:flex; gap:.55rem; align-items:flex-start;
}
.notice--inline svg{ flex:none; margin-top:.25em; color:var(--accent-dk); }
.lb__side{
  padding:clamp(1.6rem,3vw,2.6rem);
  overflow-y:auto;
  display:flex; flex-direction:column; align-items:flex-start;
}
.lb__side h3{ font-size:clamp(1.9rem,3.6vw,2.7rem); margin:.9rem 0 1rem; }
.lb__desc{ color:var(--muted); font-size:.94rem; margin:0 0 1.75rem; }
.lb__specs{
  margin:0 0 1.5rem; padding:1.25rem 0 0;
  border-top:1px solid var(--line);
  width:100%;
  display:grid; grid-template-columns:auto 1fr; gap:.65rem 1.5rem;
  font-size:.86rem;
}
.lb__specs dt{
  font-size:.63rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--faint); align-self:center;
}
.lb__specs dd{ margin:0; color:var(--text); }
.lb__price{
  font-family:var(--serif); font-size:1.6rem;
  color:var(--accent); margin:0 0 1.75rem;
}
.lb__price:empty{ display:none; }

.lb__close,
.lb__nav{
  position:absolute; z-index:2;
  display:grid; place-items:center;
  background:rgba(23,20,18,.75);
  border:1px solid var(--line-2);
  color:var(--text);
  cursor:pointer;
  /* Ces pastilles reposent sur un fond déjà opaque : un flou d'arrière-plan
     n'y change rien à l'œil et coûte un calcul par image. */
  transition:background .35s var(--e), color .35s var(--e), border-color .35s var(--e);
}
.lb__close{ top:1.1rem; right:1.1rem; width:44px; height:44px; border-radius:50%; }
.lb__nav{ top:50%; transform:translateY(-50%); width:50px; height:50px; border-radius:50%; }
.lb__nav--prev{ left:clamp(.5rem,2vw,1.6rem); }
.lb__nav--next{ right:clamp(.5rem,2vw,1.6rem); }
.lb__close:hover,
.lb__nav:hover{ background:var(--accent); color:#0D0C0B; border-color:var(--accent); }

body.is-locked{ overflow:hidden; }

/* ---------- 18. Responsive ---------- */
/* Au doigt, l'inclinaison 3D n'a pas de sens et la carte doit rester
   parfaitement lisible pendant le balayage. */
@media (hover: none), (prefers-reduced-motion: reduce){
  .card{ transform:none !important; }
  .card__media img{ transform:scale(1.02) !important; }
  .card__body{ transform:none; }
}
@media (max-width:820px){
  .gal__head{ flex-direction:column; align-items:flex-start; gap:1.4rem; }
  .gal__nav{ display:none; }         /* au doigt, les flèches sont inutiles */
  .gal__track{ grid-auto-columns:min(62vw,240px); }
}

@media (max-width:1000px){
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .studio, .contact{ grid-template-columns:1fr; }
  .studio__media{ max-width:460px; }
  .lb__box{ grid-template-columns:1fr; max-height:92vh; overflow-y:auto; }
  .lb__fig img{ max-height:52vh; }
}

@media (max-width:820px){
  html{ scroll-padding-top:70px; }
  .burger{ display:flex; }

  .nav{
    position:fixed; inset:0 0 auto;
    padding:6.5rem var(--gut) 2.5rem;
    flex-direction:column; gap:.35rem;
    background:rgba(13,12,11,.97);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    transform:translateY(-102%);
    transition:transform .55s var(--e-out);
    z-index:-1;
  }
  .nav.is-open{ transform:none; }
  .nav a{
    font-family:var(--serif);
    font-size:1.7rem; letter-spacing:0; text-transform:none;
    color:var(--text);
    padding-block:.6rem;
    border-bottom:1px solid var(--line);
  }
  .nav a::after{ display:none; }

  .brand__txt i{ display:none; }
  .hdr__act .btn--sm{ display:none; }

  .form__row{ grid-template-columns:1fr; }
  .hero{ min-height:auto; padding:9rem 0 6rem; }
  .hero__scroll{ display:none; }
  .quote::before{ font-size:4rem; }
}

@media (max-width:520px){
  .ftr__bot{ flex-direction:column; align-items:flex-start; }
  .hero__cta .btn{ width:100%; }
  .lb__nav{ width:42px; height:42px; }
}

/* ---------- 18 bis. Densité sur téléphone et tablette ----------
   Empilées les unes sous les autres, ces sections faisaient défiler la
   page sur plusieurs écrans pour quatre chiffres et trois formules. On
   les remet côte à côte : en damier pour les blocs courts, en bandeau
   que l'on balaye du doigt pour les cartes longues, comme la galerie. */
@media (max-width:820px){

  /* Chiffres : quatre libellés courts, deux par ligne suffisent. */
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .stat{ padding:clamp(1.3rem,4vw,2rem) .85rem; }
  .stat b{ font-size:clamp(1.75rem,7vw,2.4rem); }

  /* Bandeau balayable, partagé par le processus, les formules et les
     témoignages. La carte suivante dépasse volontairement du bord :
     c'est ce débord qui fait comprendre qu'on peut faire glisser. */
  .steps,
  .plans,
  .quotes{
    display:flex;
    grid-template-columns:none;
    gap:.9rem;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    overflow-y:hidden;
    /* Les cartes filent jusqu'au bord de l'écran, sans marge perdue. */
    margin-inline:calc(var(--gut) * -1);
    padding:1.1rem var(--gut) .5rem;
  }
  .steps::-webkit-scrollbar,
  .plans::-webkit-scrollbar,
  .quotes::-webkit-scrollbar{ display:none; }

  .steps > *,
  .plans > *,
  .quotes > *{
    flex:0 0 min(76vw,300px);
    scroll-snap-align:center;
  }

  /* Ces cartes sont pour la plupart hors écran au chargement : une
     apparition au défilement les laisserait vides tant qu'on n'a pas
     balayé jusqu'à elles. Elles sont donc visibles d'emblée. */
  .steps > .reveal,
  .plans > .reveal,
  .quotes > .reveal{ opacity:1; transform:none; transition:none; }

  /* Le processus perdait ses séparateurs : chaque étape reprend sa
     propre bordure, puisqu'elles ne se touchent plus. */
  .steps{
    background:none;
    border:0;
    border-radius:0;
  }
  .step{
    border:1px solid var(--line);
    border-radius:var(--r);
    padding:clamp(1.3rem,4.5vw,1.8rem);
  }
  .step h3{ font-size:1.25rem; }
  .step p{ font-size:.88rem; }

  .plan{ padding:clamp(1.4rem,4.5vw,1.9rem); }
  .plan h3{ font-size:1.5rem; }
  .plan__badge{ left:clamp(1.4rem,4.5vw,1.9rem); }
  .plan__price b{ font-size:2.1rem; }

  .quote{ padding:clamp(1.4rem,4.5vw,1.9rem); }
  .quote p{ font-size:1.08rem; }
}

@media (max-width:380px){
  .steps > *,
  .plans > *,
  .quotes > *{ flex-basis:84vw; }
}

/* Section atelier sans photo : le texte occupe toute la largeur. */
.studio--seul{ grid-template-columns:1fr; max-width:760px; }

/* ---------- 19. Protection des visuels ----------
   Le glisser-déposer et la sélection longue (mobile) sont neutralisés.
   Un calque transparent couvre l'image de la fiche : un clic droit y
   atterrit, pas sur l'image elle-même. */
img{
  -webkit-user-drag:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.lb__fig::after{
  content:"";
  position:absolute; inset:0;
  z-index:1;
}


/* ---------- 20. Portfolio ---------- */
/* L en-tete est fixe : la page doit demarrer sous lui. */
.pf{ padding-block:clamp(8.5rem,13vw,11rem) var(--sec-y); }

.pf__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(.9rem,2vw,1.6rem);
  margin-bottom:clamp(2.5rem,5vw,3.5rem);
}
.pf__grid .card{ width:100%; }

.pagin{ display:flex; align-items:center; justify-content:center; gap:1.4rem; }
.pagin__btn{
  width:46px; height:46px;
  display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:50%;
  background:none; color:var(--text);
  cursor:pointer;
  transition:background .35s var(--e), color .35s var(--e),
             border-color .35s var(--e), opacity .35s var(--e);
}
.pagin__btn:hover:not(:disabled){ background:var(--accent); color:#120E07; border-color:var(--accent); }
.pagin__btn:disabled{ opacity:.28; cursor:default; }
.pagin__etat{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint); font-variant-numeric:tabular-nums;
}

/* Lien vers le portfolio, sous le carrousel de l'accueil */
.gal__more{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
  margin-top:clamp(1.5rem,3vw,2.4rem);
}
.gal__note{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); margin:0;
}

@media (max-width:820px){
  .pf__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .pagin{ gap:1rem; }
  .gal__more{ flex-direction:column; align-items:stretch; }
  .gal__more .btn{ width:100%; }
  .gal__note{ text-align:center; }
}
@media (max-width:480px){
  .pf__grid{ gap:.6rem; }
  .pf__grid .card__body{ padding:.7rem .75rem .85rem; }
  .pf__grid .card__body h3{ font-size:1rem; }
  .pf__grid .card__meta{ font-size:.62rem; gap:.15rem .45rem; }
  .pf__grid .card__price{ font-size:.72rem; }
}
@media (max-width:340px){
  .pf__grid{ grid-template-columns:1fr; }
}

/* Dans le portfolio, la pièce prime sur l'alignement : on affiche
   l'image entière. Toutes n'ont pas le même format, un recadrage
   coupait le socle ou le haut du décor. */
.pf__grid .card__media{
  aspect-ratio:4/5;
  background:radial-gradient(120% 100% at 50% 0%, #1A1613, #0C0B0A);
}
.pf__grid .card__media img{ object-fit:contain; }
.pf__grid .card__media::after{ opacity:.45; }


/* ---------- 21. Réseaux sociaux ---------- */
.ftr__social{ display:flex; gap:.7rem; }
.ftr__social a{
  width:42px; height:42px;
  display:grid; place-items:center;
  margin:0;                       /* annule l'espacement des liens du pied de page */
  border:1px solid var(--line-2); border-radius:50%;
  color:var(--muted);
  transition:color .35s var(--e), border-color .35s var(--e),
             background .35s var(--e), transform .35s var(--e);
}
.ftr__social a:hover{
  color:#120E07;
  background:var(--metal-soft);
  border-color:var(--accent);
  transform:translateY(-2px);
}