/* =========================================================
   Maison SANS — feuille de style
   Palette : issue du logo, strictement noir et blanc.
   La photographie est la seule source de couleur de la page.
   ========================================================= */

:root{
  --ink:#0a0a0a;
  --ink-2:#3a3a3a;
  --ink-3:#666666;      /* 5.7:1 sur blanc — plancher de contraste tenu */
  --line:#d8d8d8;
  --line-2:#ececec;
  --paper:#ffffff;
  --paper-2:#f5f5f5;

  --gut:clamp(1.25rem,4vw,4.5rem);
  --stack:clamp(6rem,12vw,11rem);

  --ease:cubic-bezier(.16,1,.3,1);
  --slow:1.1s;

  --font:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.04em;line-height:.98;text-wrap:balance}
p{margin:0}
a{color:inherit}

/* --- surfaces du navigateur : elles font partie du design --- */
::selection{background:var(--ink);color:var(--paper)}
:root{caret-color:var(--ink);scrollbar-color:var(--ink) var(--paper-2);scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--ink);border:3px solid var(--paper-2)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:1px}
.hero :focus-visible,.produits :focus-visible,.avis :focus-visible{outline-color:var(--paper)}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:.75rem 1.25rem}
.skip:focus{left:0}

/* =================== NAVIGATION =================== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:clamp(1rem,2vw,1.75rem) var(--gut);
  color:var(--ink);
  transition:transform .5s var(--ease),color .45s var(--ease);
}
.nav--hidden{transform:translateY(-110%)}
/* le logo est un aplat blanc : on l'inverse pour les sections claires */
.nav__mark img{width:clamp(112px,11vw,158px);height:auto;filter:invert(1);transition:filter .45s var(--ease)}
.nav--sombre{color:var(--paper)}
.nav--sombre .nav__mark img{filter:none}
.nav__links{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.5rem)}
.nav__links a{
  color:currentColor;text-decoration:none;
  font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  position:relative;padding-block:.35rem;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease);
}
.nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
.nav__cta{border:1px solid currentColor;padding:.95rem 1.25rem!important;border-radius:999px;line-height:1}
.nav__cta::after{display:none}
@media (max-width:720px){ .nav__links a:not(.nav__cta){display:none} }

/* =================== HERO =================== */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;background:var(--ink);isolation:isolate}
.hero__gl,.hero__fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.46) 0%,rgba(10,10,10,.14) 34%,rgba(10,10,10,.20) 62%,rgba(10,10,10,.62) 100%);
}
.hero{--markW:min(78vw,720px)}
@media (min-width:900px){ .hero{--markW:min(62vw,720px)} }
.hero__mark{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:var(--markW);padding-inline:var(--gut);
}
.hero__mark img{width:100%;height:auto}
.hero__place,.hero__hours{
  color:var(--paper);font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin:0;
}
/* décalé sous le bloc-logo : la hauteur du logo suit sa largeur (ratio 831/121) */
.hero__place{position:absolute;left:50%;top:calc(50% + var(--markW) * .0728 + clamp(1.75rem,3vw,2.75rem));translate:-50% 0;opacity:.82}
.hero__foot{
  position:absolute;inset:auto var(--gut) clamp(1.5rem,3.5vw,2.75rem) var(--gut);
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
}
.hero__hours{opacity:.82}
.hero__scroll{display:block;width:1px;height:clamp(38px,6vw,64px);background:rgba(255,255,255,.32);position:relative;overflow:hidden}
.hero__scroll i{position:absolute;inset:0;background:var(--paper);transform-origin:50% 0;animation:drip 2.6s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:50% 0}45%{transform:scaleY(1);transform-origin:50% 0}
  55%{transform:scaleY(1);transform-origin:50% 100%}100%{transform:scaleY(0);transform-origin:50% 100%}}

/* =================== MANIFESTE =================== */
/* Le manifeste se lit au défilement : la section est tenue le temps que chaque
   mot s'allume. Principe emprunté au composant Text Reveal de Magic UI, porté
   ici en GSAP et adapté à la palette. */
.manifesto{height:200svh;padding:0 var(--gut)}
.manifesto__sticky{
  position:sticky;top:0;height:100svh;
  display:flex;align-items:center;justify-content:center;
}
.manifesto__text{
  max-width:22ch;margin:0 auto;text-align:center;
  font-size:clamp(1.75rem,4.4vw,3.5rem);font-weight:300;line-height:1.14;letter-spacing:-.035em;
}
@media (min-width:900px){ .manifesto__text{max-width:26ch} }
/* état de repos : le mot est en retrait, jamais fantôme.
   Magic UI descend à 20 % ; on remonte à 26 % pour garder la phrase lisible
   si le lecteur s'arrête au milieu de la section. */
.manifesto__text .mot{color:rgba(10,10,10,.26);transition:color .25s linear}

/* =================== BANDE DEFILANTE =================== */
.strip{border-block:1px solid var(--line);padding-block:clamp(.9rem,1.8vw,1.4rem);overflow:hidden;white-space:nowrap}
.strip__row{display:inline-flex;gap:clamp(1.25rem,3vw,2.75rem);will-change:transform}
.strip__row span{
  font-size:clamp(.9rem,1.5vw,1.15rem);font-weight:500;letter-spacing:-.01em;color:var(--ink-2);
  text-transform:uppercase;
}

/* =================== PRODUITS (épinglé) =================== */
.produits{background:var(--ink);color:var(--paper);height:400svh}
.produits__sticky{
  position:sticky;top:0;height:100svh;min-height:560px;
  display:grid;grid-template-columns:1fr;align-items:stretch;
}
.produits__stage{position:relative;overflow:hidden}
.produits__slide{position:absolute;inset:0;margin:0;opacity:0;clip-path:inset(0 0 100% 0)}
.produits__slide.is-active{opacity:1;clip-path:inset(0 0 0 0)}
.produits__slide img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.produits__panel{
  position:absolute;inset:auto 0 0 0;
  padding:var(--gut);
  background:linear-gradient(0deg,rgba(10,10,10,.92) 12%,rgba(10,10,10,0) 100%);
}
/* les quatre temps sont empilés dans une seule cellule de grille : la hauteur
   du panneau ne dépend plus de celui qui est actif, et rien ne se décale. */
.produits__list{list-style:none;margin:0;padding:0;display:grid;align-items:end}
.produits__list li{
  grid-area:1/1;
  opacity:0;transform:translateY(1.1rem);pointer-events:none;
  transition:opacity .42s var(--ease),transform .55s var(--ease);
}
.produits__list li.is-active{opacity:1;transform:none;pointer-events:auto}
.produits__list h2{font-size:clamp(2.25rem,7vw,5rem);margin-bottom:.6rem}
.produits__list p{max-width:46ch;color:rgba(255,255,255,.78);font-size:clamp(.95rem,1.4vw,1.0625rem)}
.produits__count{
  margin-top:1.75rem;font-size:.75rem;font-weight:600;letter-spacing:.2em;color:rgba(255,255,255,.6);
  font-variant-numeric:tabular-nums;
}
@media (min-width:900px){
  .produits__sticky{grid-template-columns:1.15fr .85fr}
  .produits__panel{position:relative;inset:auto;display:flex;flex-direction:column;justify-content:center;
    background:none;padding:var(--gut) clamp(2rem,4vw,4rem)}
  .produits__list{align-items:start}
}

/* =================== GALERIE =================== */
.galerie{padding:var(--stack) var(--gut);position:relative}
.galerie__title{font-size:clamp(2rem,6vw,4.5rem);margin-bottom:clamp(2.5rem,5vw,4rem)}
.galerie__gl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
/* six vignettes : 3x2 au large, 2x3 en tablette, 1 colonne en mobile.
   auto-fit laissait une rangée orpheline de deux images. */
.galerie__grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;
  gap:clamp(1rem,2.4vw,2rem) clamp(1rem,2vw,1.75rem);
}
@media (min-width:600px){ .galerie__grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .galerie__grid{grid-template-columns:repeat(3,1fr)} }
.galerie__grid li{margin:0;position:relative}
.galerie__grid img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--paper-2)}
.galerie__grid figcaption{
  margin-top:.75rem;font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
/* quand le WebGL prend la main, les <img> servent de source de texture uniquement */
.galerie--gl .galerie__grid img{opacity:0}

/* =================== SERVICES =================== */
.services{padding:var(--stack) var(--gut);border-top:1px solid var(--line-2)}
.services__head h2{font-size:clamp(2rem,6vw,4.5rem);max-width:16ch}
.services__body{
  margin-top:clamp(3rem,6vw,5rem);
  display:grid;gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:1fr;
}
@media (min-width:960px){ .services__body{grid-template-columns:1.1fr .9fr;align-items:start} }
.services__list{margin:0}
.services__row{
  display:grid;gap:.4rem 2rem;
  padding-block:clamp(1.5rem,2.6vw,2.25rem);
  border-top:1px solid var(--line);
}
.services__row:last-child{border-bottom:1px solid var(--line)}
@media (min-width:640px){ .services__row{grid-template-columns:minmax(9rem,15rem) 1fr} }
.services__row dt{font-size:clamp(1.125rem,1.9vw,1.5rem);font-weight:700;letter-spacing:-.025em}
.services__row dd{margin:0;color:var(--ink-2);max-width:52ch}
.services__figure{margin:0;overflow:hidden}
.services__figure img{width:100%;aspect-ratio:3/4;object-fit:cover;will-change:transform}
@media (max-width:959px){ .services__figure img{aspect-ratio:16/10} }

/* =================== LA MAISON =================== */
.maison{
  padding:var(--stack) var(--gut);
  display:grid;gap:clamp(2.5rem,5vw,5rem);align-items:center;
  grid-template-columns:1fr;
  background:var(--paper-2);
}
@media (min-width:900px){ .maison{grid-template-columns:.9fr 1.1fr} }
.maison__portrait{margin:0;overflow:hidden}
.maison__portrait img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.06)}
.maison__text h2{font-size:clamp(2rem,5.2vw,3.75rem);margin-bottom:clamp(1.25rem,2.4vw,2rem)}
.maison__text p{max-width:60ch;color:var(--ink-2);margin-bottom:1.1rem}
.maison__sign{
  margin-top:1.75rem!important;font-size:.75rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink)!important;
}

/* =================== TEMOIGNAGES =================== */
.avis{background:var(--ink);color:var(--paper);padding:var(--stack) var(--gut)}
.avis__list{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
}
.avis blockquote{
  margin:0 0 1.5rem;font-size:clamp(1.125rem,2.1vw,1.6rem);font-weight:300;line-height:1.32;letter-spacing:-.025em;
  max-width:32ch;
}
.avis blockquote::before{content:"« "}
.avis blockquote::after{content:" »"}
.avis cite{
  font-style:normal;font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.avis cite span{color:rgba(255,255,255,.38)}

/* =================== CONTACT =================== */
.contact{padding:var(--stack) var(--gut);display:grid;gap:clamp(2.5rem,5vw,5rem);grid-template-columns:1fr}
@media (min-width:960px){ .contact{grid-template-columns:.85fr 1.15fr;align-items:start} }
.contact__frame{overflow:hidden;position:sticky;top:clamp(5rem,10vh,8rem)}
.contact__frame img{width:100%;aspect-ratio:3/4;object-fit:cover}
@media (max-width:959px){ .contact__frame{position:static}.contact__frame img{aspect-ratio:16/10} }
.contact__body h2{font-size:clamp(2rem,5.4vw,4rem)}
.contact__lede{margin-top:1.25rem;max-width:46ch;color:var(--ink-2)}

/* --- formulaire --- */
.form{margin-top:clamp(2.5rem,4vw,3.5rem);display:grid;gap:1.5rem 1.75rem;grid-template-columns:1fr}
@media (min-width:640px){ .form{grid-template-columns:1fr 1fr}.field--wide,.form__note{grid-column:1/-1} }
.field{display:flex;flex-direction:column;gap:.5rem}
.field label{font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field textarea{
  font:inherit;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:.65rem 0;transition:border-color .35s var(--ease);
}
.field input:hover,.field textarea:hover{border-color:var(--ink-3)}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--ink)}
.field textarea{resize:vertical;min-height:6.5rem}
.field--error input,.field--error textarea{border-color:var(--ink)}
.field__error{font-size:.8125rem;color:var(--ink);font-weight:500}
.field__error::before{content:"↳ ";color:var(--ink-3)}

.btn{
  grid-column:1/-1;justify-self:start;
  position:relative;overflow:hidden;isolation:isolate;
  font:inherit;font-weight:600;letter-spacing:.02em;
  color:var(--paper);background:var(--ink);border:1px solid var(--ink);
  padding:1rem 2.25rem;border-radius:999px;cursor:pointer;
  transition:color .45s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);
  transform:scaleY(0);transform-origin:50% 100%;transition:transform .45s var(--ease);
}
.btn:hover,.btn:focus-visible{color:var(--ink)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleY(1);transform-origin:50% 0}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[disabled]:hover{color:var(--paper)}
.btn[disabled]:hover::before{transform:scaleY(0)}
.form__note{font-size:.875rem;color:var(--ink-2);min-height:1.25rem}

.contact__infos{
  margin-top:clamp(3rem,5vw,4.5rem);padding-top:clamp(1.75rem,3vw,2.5rem);border-top:1px solid var(--line);
  font-style:normal;display:grid;gap:1.75rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));
}
.contact__infos span{
  display:block;margin-bottom:.4rem;
  font-size:.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
}
.contact__infos a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;
  text-decoration-color:var(--line);transition:text-decoration-color .35s var(--ease);
  /* surface tactile portée à 44px sans déplacer la ligne de base */
  display:inline-block;padding-block:.7rem;margin-block:-.7rem}
.contact__infos a:hover{text-decoration-color:var(--ink)}

/* =================== PIED =================== */
.foot{
  padding:clamp(2.5rem,5vw,4rem) var(--gut);border-top:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 2rem;
}
.foot__mark{width:clamp(120px,13vw,180px);height:auto}
.foot__cols{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 2rem;font-size:.8125rem;font-weight:500;color:var(--ink-3)}
.foot__cols a{text-decoration:none;position:relative;display:inline-flex;align-items:center;min-height:44px}
.foot__cols a::after{content:"";position:absolute;left:0;bottom:11px;width:100%;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease)}
.foot__cols a:hover{color:var(--ink)}
.foot__cols a:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* =================== ETATS D'ANIMATION =================== */
.line{display:block;overflow:hidden}
.line__in{display:block;will-change:transform}
[data-reveal],[data-row],[data-quote],[data-clip]{will-change:transform,opacity}

/* =================== MOUVEMENT REDUIT =================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hero__scroll i{animation:none;transform:scaleY(1)}
  .produits__sticky{position:static;height:auto;min-height:0}
  .produits__stage{height:70svh}
  .produits__list{display:block}
  .produits__list li{opacity:1;transform:none;margin-bottom:2.5rem}
  .manifesto{height:auto;padding:var(--stack) var(--gut)}
  .manifesto__sticky{position:static;height:auto}
  .manifesto__text .mot{color:var(--ink)}
  .contact__frame{position:static}
}