/* =====================================================================
   ATELIER VAUBÉCOURT · Paris
   Univers : pierre claire, encre profonde, un unique filet de laiton.
   Typographie en display serif tres large, capitales espacees pour les
   reperes, et de tres grandes images. Aucun arrondi, aucune ombre.
   Volontairement different du socle Peyrolle (chaleur, arrondis) et du
   socle Lartigue (acier sombre, capitales grasses).
   Polices systeme uniquement, aucune requete externe.
   ===================================================================== */
:root{
  --pierre:#F4F2ED;
  --pierre-2:#EAE6DE;
  --blanc:#FFFFFF;
  --encre:#16161A;
  --encre-douce:#55555E;
  --encre-pale:#8A8A93;
  --laiton:#9A7B4F;
  --laiton-clair:#C9B189;
  --filet:#DDD8CE;
  --nuit:#101014;

  --display:"Didot","Bodoni 72","Hoefler Text",Garamond,"Times New Roman",serif;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",SFMono-Regular,Menlo,monospace;

  --large:1440px;
  --marge:clamp(1.25rem,5vw,4.5rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);background:var(--pierre);color:var(--encre-douce);
  font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--laiton);color:#fff}

h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--encre);
  line-height:1.06;letter-spacing:-.015em}
h1{font-size:clamp(2.8rem,7.5vw,6.5rem)}
h2{font-size:clamp(2rem,4.4vw,3.6rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.85rem);line-height:1.2}
h1 em,h2 em{font-style:italic}

.repere{
  display:block;font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--laiton);font-weight:500;
}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--encre-pale)}

.dedans{max-width:var(--large);margin:0 auto;padding-left:var(--marge);padding-right:var(--marge)}
section{padding:clamp(4.5rem,10vw,9rem) 0}
.serre{padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.nuit{background:var(--nuit);color:#9A9AA4}
.nuit h1,.nuit h2,.nuit h3{color:#F2F0EC}
.nuit .repere{color:var(--laiton-clair)}
.creme{background:var(--pierre-2)}

/* --- en-tete --- */
header{position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .35s ease,border-color .35s ease}
header.pose{background:rgba(244,242,237,.92);backdrop-filter:blur(10px) saturate(1.3);
  border-bottom:1px solid var(--filet)}
.barre{max-width:var(--large);margin:0 auto;padding:1.5rem var(--marge);
  display:flex;align-items:center;justify-content:space-between;gap:2rem}
/* L'en-tete suit le fond sur lequel il passe : clair au-dessus du bandeau
   sombre, encre des que la page defile et que le fond devient creme.
   ⚠️ Ces deux etats doivent etre revus ENSEMBLE a chaque changement de hero :
   la version claire seule a rendu le nom invisible sur creme, la version encre
   seule l'a rendu invisible sur la photo. */
.marque{font-family:var(--display);font-size:1.3rem;letter-spacing:.02em;
  text-decoration:none;color:#F6F4F0;transition:color .35s}
header.pose .marque{color:var(--encre)}
.marque span{display:block;font-family:var(--sans);font-size:.56rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--laiton-clair);margin-top:.3rem}
header.pose .marque span{color:var(--laiton)}
.menu{display:flex;gap:2.2rem;align-items:center}
.menu a{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:rgba(246,244,240,.8);transition:color .25s}
header.pose .menu a{color:var(--encre-douce)}
.menu a:hover{color:var(--laiton-clair)}
header.pose .menu a:hover{color:var(--laiton)}
.ouvrir{display:none;background:none;border:0;cursor:pointer;padding:.4rem}
.ouvrir i{display:block;width:22px;height:1px;background:#F6F4F0;margin:6px 0}
header.pose .ouvrir i{background:var(--encre)}

/* --- boutons --- */
.bouton{display:inline-block;text-decoration:none;text-align:center;cursor:pointer;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  padding:1.1rem 2.4rem;border:1px solid var(--encre);color:var(--encre);
  background:transparent;transition:background .25s,color .25s,border-color .25s}
.bouton:hover{background:var(--encre);color:var(--pierre)}
.bouton-clair{border-color:rgba(242,240,236,.45);color:#F2F0EC}
.bouton-clair:hover{background:#F2F0EC;color:var(--nuit);border-color:#F2F0EC}
.bouton-plein{background:var(--encre);color:var(--pierre)}
.bouton-plein:hover{background:var(--laiton);border-color:var(--laiton);color:#fff}

/* --- hero --- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding-bottom:clamp(3rem,7vw,6rem);overflow:hidden;background:var(--nuit)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,16,20,.55) 0%,rgba(16,16,20,.15) 40%,rgba(16,16,20,.88) 100%)}
.hero .dedans{position:relative;z-index:2;width:100%}
.hero h1{color:#F6F4F0;max-width:16ch;margin:1.6rem 0 1.8rem}
.hero p{color:rgba(246,244,240,.82);max-width:34rem;font-size:1.05rem;margin-bottom:2.4rem}
.hero .bas{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.hero .lieux{display:flex;gap:1.6rem;flex-wrap:wrap}
.hero .lieux span{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(246,244,240,.6)}

/* --- deux colonnes --- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.duo-texte p + p{margin-top:1.2rem}
.duo img{width:100%;aspect-ratio:3/4;object-fit:cover}
.decalee{margin-top:clamp(2rem,6vw,5rem)}

/* --- projets --- */
.projets{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.4vw,2rem)}
.projet{position:relative;display:block;text-decoration:none;overflow:hidden}
.projet img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.projet:hover img{transform:scale(1.035)}
.projet figcaption{padding-top:1.1rem;display:flex;justify-content:space-between;gap:1rem;
  align-items:baseline;border-top:1px solid var(--filet);margin-top:1.1rem}
.projet figcaption b{font-family:var(--display);font-size:1.15rem;font-weight:400;color:var(--encre)}
.projet figcaption span{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--encre-pale)}
.p-7{grid-column:span 7}.p-5{grid-column:span 5}
.p-6{grid-column:span 6}.p-4{grid-column:span 4}.p-8{grid-column:span 8}
.r-4-5 img{aspect-ratio:4/5}.r-3-2 img{aspect-ratio:3/2}.r-1-1 img{aspect-ratio:1/1}

/* --- chiffres et listes --- */
.releve{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--filet)}
.releve div{padding:2.4rem 1.6rem 0}
.releve b{display:block;font-family:var(--display);font-size:clamp(2.2rem,4vw,3.2rem);
  color:var(--encre);line-height:1}
.nuit .releve{border-color:rgba(242,240,236,.16)}
.nuit .releve b{color:#F2F0EC}
.releve span{display:block;margin-top:.8rem;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--encre-pale)}

.etapes{border-top:1px solid var(--filet)}
.etapes > div{display:grid;grid-template-columns:5rem 1fr 1.3fr;gap:clamp(1rem,3vw,3rem);
  padding:2.2rem 0;border-bottom:1px solid var(--filet);align-items:baseline}
.etapes .num{font-family:var(--mono);font-size:.74rem;color:var(--laiton)}
.etapes p{font-size:.96rem}

/* --- pied --- */
footer{background:var(--nuit);color:#8A8A93;padding:clamp(4rem,8vw,6.5rem) 0 2.5rem}
footer h3{color:#F2F0EC;margin-bottom:1.6rem}
.pied{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(2rem,5vw,4rem)}
footer a{text-decoration:none;transition:color .25s}
footer a:hover{color:var(--laiton-clair)}
footer ul{list-style:none}
footer li{padding:.3rem 0;font-size:.9rem}
.pied-bas{margin-top:4rem;padding-top:1.8rem;border-top:1px solid rgba(242,240,236,.14);
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.fictif{color:var(--laiton-clair)}

@media(max-width:1000px){
  .projets{grid-template-columns:repeat(6,1fr)}
  .p-7,.p-5,.p-6,.p-4,.p-8{grid-column:span 6}
  .releve{grid-template-columns:repeat(2,1fr)}
  .pied{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .menu{display:none;position:fixed;inset:0;background:var(--nuit);
    flex-direction:column;justify-content:center;gap:2.2rem;z-index:70}
  .menu.ouvert{display:flex}
  .menu a{font-size:1.1rem;color:#F2F0EC}
  .ouvrir{display:block;position:relative;z-index:80}
  .duo{grid-template-columns:1fr}
  .decalee{margin-top:0}
  .etapes > div{grid-template-columns:3rem 1fr;gap:1rem}
  .etapes > div p{grid-column:2}
}
@media(max-width:640px){
  .releve{grid-template-columns:1fr}
  .pied{grid-template-columns:1fr}
  .hero h1{font-size:clamp(2.4rem,11vw,3.4rem)}
}