/* =====================================================================
   MAISON VANEAU · Paris VII
   Univers : ivoire, encre, un seul rouge sourd. Beaucoup de blanc, des
   capitales tres espacees, une serif a fort contraste pour le nom.
   En-tete separe, le nom au centre, la navigation de part et d'autre.
   Volontairement different de Vaubecourt (Didot sur nuit, laiton) et des
   socles artisans. Polices systeme uniquement.
   ===================================================================== */
:root{
  --ivoire:#FBFAF7;
  --ivoire-2:#F1EEE7;
  --encre:#1A1A1A;
  --encre-douce:#4A4A4A;
  --encre-pale:#8C8880;
  --filet:#E2DED5;
  --rouge:#8E2F3A;
  --nuit:#141414;

  --titre:"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:1380px;
  --marge:clamp(1.1rem,4vw,3.5rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--ivoire);color:var(--encre-douce);
  font-size:15px;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--encre);color:var(--ivoire)}
[hidden]{display:none!important}

h1,h2,h3{font-family:var(--titre);font-weight:400;color:var(--encre);line-height:1.1}
h1{font-size:clamp(2.4rem,6vw,5rem);letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,3.6vw,3rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.5rem)}
h1 em,h2 em{font-style:italic}

.caps{font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;font-weight:500}
.mono{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em}
.dedans{max-width:var(--large);margin:0 auto;padding-left:var(--marge);padding-right:var(--marge)}
section{padding:clamp(4rem,9vw,8rem) 0}
.ivoire2{background:var(--ivoire-2)}
.nuit{background:var(--nuit);color:#A8A49C}
.nuit h1,.nuit h2,.nuit h3{color:var(--ivoire)}

/* ---------- en-tete separe : le nom au centre ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(251,250,247,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--filet)}
.barre{max-width:var(--large);margin:0 auto;padding:1.1rem var(--marge);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem}
.cote{display:flex;gap:2rem}
.cote.droite{justify-content:flex-end}
.cote a{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--encre-douce);transition:color .2s}
.cote a:hover{color:var(--rouge)}
.nom{text-align:center;white-space:nowrap}
.nom b{display:block;font-family:var(--titre);font-size:clamp(1.15rem,2.2vw,1.7rem);
  font-weight:400;letter-spacing:.06em;color:var(--encre)}
.nom span{display:block;font-size:.52rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--encre-pale);margin-top:.25rem}
.ouvrir{display:none;background:none;border:0;cursor:pointer;padding:.4rem;justify-self:start}
.ouvrir i{display:block;width:20px;height:1px;background:var(--encre);margin:5px 0}

/* ---------- boutons ---------- */
.bouton{display:inline-block;cursor:pointer;text-align:center;font-family:var(--sans);
  font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;
  padding:1rem 2.2rem;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(--ivoire)}
.bouton-plein{background:var(--encre);color:var(--ivoire)}
.bouton-plein:hover{background:var(--rouge);border-color:var(--rouge)}
.bouton-clair{border-color:rgba(251,250,247,.4);color:var(--ivoire)}
.bouton-clair:hover{background:var(--ivoire);color:var(--nuit);border-color:var(--ivoire)}

/* ---------- le portant ---------- */
.scene{padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(2rem,4vw,3.5rem)}
.scene-tete{text-align:center;max-width:44rem;margin:0 auto clamp(1.2rem,3vw,2rem)}
.scene-tete .caps{color:var(--rouge);display:block;margin-bottom:1rem}
.scene-tete h1{margin-bottom:.9rem}
.scene-tete p{max-width:34rem;margin:0 auto}
.portant-boite{position:relative;height:clamp(340px,52vh,560px);
  touch-action:pan-y}
.portant-boite canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Le bloc sous le portant tient les deux etats au meme endroit : le mode
   d'emploi au repos, l'etiquette de la piece des qu'on en survole une.
   Une hauteur fixe evite que la page saute a chaque survol. */
.sous-portant{position:relative;min-height:5.2rem;margin-top:1rem}
.etiquette{position:absolute;inset:0;text-align:center;pointer-events:none;
  opacity:0;transition:opacity .25s}
.etiquette.montre{opacity:1}
.sous-portant .mode-emploi{position:absolute;inset:0;margin:0;transition:opacity .25s;
  display:flex;align-items:center;justify-content:center}
.sous-portant.nomme .mode-emploi{opacity:0}
.etiquette b{display:block;font-family:var(--titre);font-size:1.3rem;color:var(--encre)}
.etiquette span{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  color:var(--encre-pale);margin-top:.3rem}
.etiquette i{display:block;font-style:normal;font-size:.8rem;letter-spacing:.1em;
  color:var(--rouge);margin-top:.35rem}
.mode-emploi{text-align:center;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--encre-pale);margin-top:1rem}

/* ---------- la fiche d'une piece ---------- */
.piece-fiche{border-top:1px solid var(--filet);margin-top:2.4rem;padding-top:2rem;
  display:none}
.piece-fiche.montre{display:block;animation:paraitre .35s ease}
@keyframes paraitre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.piece-fiche .grille{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:start}
.piece-fiche h3{margin-bottom:.6rem}
.piece-fiche dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;font-size:.88rem}
.piece-fiche dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--encre-pale);padding-top:.2rem}
.piece-fiche dd{margin:0;color:var(--encre)}
.tailles{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem}
.tailles span{border:1px solid var(--filet);padding:.35rem .7rem;font-family:var(--mono);
  font-size:.68rem;color:var(--encre-douce)}
.tailles span.rupture{color:var(--encre-pale);text-decoration:line-through}

/* ---------- blocs ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.tete{max-width:42rem;margin-bottom:clamp(2rem,4vw,3rem)}
.tete .caps{color:var(--rouge);display:block;margin-bottom:1rem}
.tete p{margin-top:1rem}
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.6rem)}
.note{border-left:1px solid var(--filet);padding-left:1.4rem}
.note b{display:block;font-family:var(--titre);font-size:1.25rem;color:var(--encre);margin-bottom:.5rem}
.note p{font-size:.92rem}

.horaires{font-family:var(--mono);font-size:.82rem;line-height:2.1;color:var(--encre)}
.horaires span{color:var(--encre-pale);display:inline-block;width:7.5rem}

/* ---------- pied ---------- */
footer{background:var(--nuit);color:#8C8880;padding:clamp(3.5rem,7vw,5.5rem) 0 2rem}
footer h3{color:var(--ivoire);font-size:1.2rem;margin-bottom:1.2rem}
.pied{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(2rem,5vw,4rem)}
footer a:hover{color:var(--ivoire)}
footer li{list-style:none;padding:.25rem 0;font-size:.88rem}
.pied-bas{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(251,250,247,.14);
  display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  font-size:.64rem;letter-spacing:.16em;text-transform:uppercase}
.fictif{color:var(--rouge)}

@media(max-width:900px){
  .piece-fiche .grille{grid-template-columns:1fr;gap:1.6rem}
  .duo{grid-template-columns:1fr}
  .trois{grid-template-columns:1fr}
  .pied{grid-template-columns:1fr 1fr}
  .cote{display:none;position:fixed;inset:0;background:var(--ivoire);
    flex-direction:column;justify-content:center;align-items:center;gap:2rem;z-index:70}
  .cote.ouvert{display:flex}
  .cote a{font-size:1rem}
  .ouvrir{display:block;position:relative;z-index:80}
  .barre{grid-template-columns:auto 1fr auto}
  .cote.droite{display:none}
}
@media(max-width:600px){
  .pied{grid-template-columns:1fr}
  .portant-boite{height:clamp(300px,46vh,420px)}
}

/* =====================================================================
   MISE EN PAGE PHOTOGRAPHIQUE · sur le modele Amely
   Grande banniere, trois rayons, une piece mise en avant, une grille de
   campagne. Le portant physique descend au milieu de page, en operation
   commerciale, il n'est plus la banniere.
   ===================================================================== */
.banniere{position:relative;min-height:88svh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ivoire-2)}
.banniere img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
/* Le voile est plus appuye en bas qu'en haut : le titre se posait sur un mur
   clair et se lisait mal. Le degrade remonte des 55 % de hauteur. */
.banniere::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,20,20,.34) 0%,rgba(20,20,20,.06) 38%,
             rgba(20,20,20,.42) 68%,rgba(20,20,20,.74) 100%)}
.banniere .dedans{position:relative;z-index:2;width:100%;padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.banniere .caps{color:rgba(251,250,247,.82);display:block;margin-bottom:1.1rem}
.banniere h1{color:var(--ivoire);max-width:14ch;margin-bottom:1.6rem}
.banniere .actions{display:flex;gap:.8rem;flex-wrap:wrap}

.rayons{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.rayon{position:relative;display:block;overflow:hidden}
.rayon img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.rayon:hover img{transform:scale(1.04)}
.rayon figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1.4rem 1.3rem;
  background:linear-gradient(transparent,rgba(20,20,20,.72));color:var(--ivoire)}
.rayon figcaption b{display:block;font-family:var(--titre);font-size:1.5rem;font-weight:400}
.rayon figcaption span{display:block;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(251,250,247,.7);margin-top:.4rem}

.mise-avant{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0}
.mise-avant img{width:100%;height:100%;object-fit:cover;min-height:26rem}
.mise-avant .texte{background:var(--ivoire-2);display:flex;flex-direction:column;
  justify-content:center;padding:clamp(2rem,5vw,4.5rem)}
.mise-avant .prix{font-family:var(--mono);font-size:1rem;color:var(--rouge);margin:1rem 0 1.6rem}

.campagne{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.6rem,1.4vw,1.1rem)}
.campagne img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.campagne .grand{grid-column:span 2;grid-row:span 2}
.campagne .grand img{aspect-ratio:auto;height:100%}

/* le portant, desormais une section parmi les autres */
.operation{background:var(--ivoire-2)}
.operation .tete{margin-left:auto;margin-right:auto;text-align:center}
.operation .tete p{margin-left:auto;margin-right:auto;max-width:34rem}

@media(max-width:900px){
  .rayons{grid-template-columns:1fr}
  .mise-avant{grid-template-columns:1fr}
  .mise-avant img{min-height:18rem}
  .campagne{grid-template-columns:repeat(2,1fr)}
  .campagne .grand{grid-column:span 2;grid-row:auto}
  .campagne .grand img{aspect-ratio:4/5}
}