@font-face{font-family:"Bodoni Moda";src:url(/fonts/bodoni-moda-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(/fonts/bodoni-moda-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(/fonts/bodoni-moda-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(/fonts/bodoni-moda-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/fonts/instrument-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/fonts/instrument-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/fonts/instrument-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

/* Jetons : porcelaine froide, noir émeraude, étain, laiton pâle */
:root{
  --porcelaine:#f5f5f2; --pierre:#e6e6e0; --pierre-2:#d9dad3;
  --nuit:#0f1f1a; --nuit-2:#172a23; --emeraude:#1e4a3b;
  --encre:#16201c; --gris:#59605b; --etain:#9ea39c; --laiton:#b08f5a; --laiton-clair:#d2b787;
  --didone:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --page:1240px; --gouttiere:clamp(16px,4.5vw,64px);
  --bord:max(var(--gouttiere),calc((100% - var(--page)) / 2));
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--porcelaine);color:var(--encre);font:400 1rem/1.7 var(--sans);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--didone);font-weight:400;line-height:1.05;margin:0;text-wrap:balance}
em{font-style:italic}
p{margin:0 0 1em}
:focus-visible{outline:1px solid var(--laiton);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.etiquette,.sur,.ref{font:600 .68rem/1.2 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gris);margin-bottom:22px}
.ref{letter-spacing:.22em;color:var(--laiton);font-variant-numeric:tabular-nums;margin-bottom:14px}

/* En-tête : transparent sur le hero, porcelaine ensuite */
.entete{position:fixed;inset:0 0 auto;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  padding:calc(20px + env(safe-area-inset-top,0px)) var(--gouttiere) 20px;color:var(--porcelaine);transition:background .4s,color .4s,padding .4s,box-shadow .4s}
.entete.clair{background:rgba(245,245,242,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--encre);padding-block:12px;box-shadow:0 1px 0 var(--pierre-2)}
.marque{display:flex;flex-direction:column;align-items:center;text-decoration:none;line-height:1}
.marque-l1{font:500 .95rem/1 var(--didone);letter-spacing:.34em;text-transform:uppercase;padding-left:.34em}
.marque-l2{font:italic 400 1.05rem/1 var(--didone);margin-top:6px;color:var(--laiton-clair)}
.entete.clair .marque-l2{color:var(--laiton)}
.nav{display:flex;gap:34px}
.nav-d{justify-content:flex-end}
.nav a{font:500 .7rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;text-decoration:none;padding:8px 0;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size .35s}
.nav a:hover{background-size:100% 1px}
.burger{display:none;justify-self:end;background:none;border:0;width:44px;height:44px;padding:12px 8px;cursor:pointer;color:inherit}
.burger span{display:block;height:1px;background:currentColor;margin:6px 0;transition:transform .3s}
.menu-mobile{display:none}

/* Hero : planche noire, la pièce brille à droite */
.hero{position:relative;background:var(--nuit);color:var(--porcelaine);min-height:clamp(620px,90vh,920px);display:grid;align-items:center;overflow:hidden}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:70% center}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,31,26,.92) 0%,rgba(15,31,26,.55) 36%,rgba(15,31,26,0) 62%)}
.hero-texte{position:relative;z-index:1;padding:140px var(--bord) 110px;max-width:calc(var(--bord) + 640px);animation:monte 1.1s cubic-bezier(.2,.7,.2,1) both}
.hero .sur{color:var(--laiton-clair)}
.hero h1{font-size:clamp(2.9rem,6.6vw,5.9rem);letter-spacing:-.015em;line-height:1}
.hero h1 em{color:var(--laiton-clair);font-weight:400}
.hero-chapo{max-width:40ch;margin:30px 0 38px;color:#c9cfc9;font-size:1.05rem}
.hero-legende{position:absolute;z-index:1;right:var(--bord);bottom:34px;margin:0;font:italic 400 .95rem/1 var(--didone);color:#aab2ab}
@keyframes monte{from{opacity:.001;transform:translateY(14px)}}
.lien-fleche{display:inline-flex;gap:14px;align-items:center;font:600 .72rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;text-decoration:none;padding-bottom:10px;border-bottom:1px solid currentColor}
.lien-fleche span{transition:transform .3s}
.lien-fleche:hover span{transform:translateX(6px)}

/* Manifeste */
.manifeste{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:32px;padding:clamp(80px,11vw,150px) var(--bord);border-bottom:1px solid var(--pierre-2)}
.manifeste-texte{font:400 clamp(1.6rem,3vw,2.5rem)/1.3 var(--didone);margin:0;max-width:30ch}
.manifeste-texte em{color:var(--emeraude)}

/* Collection */
.collection{padding-block:clamp(80px,11vw,150px) 0}
.collection-tete{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1.2fr);gap:32px;align-items:end;padding-inline:var(--bord);margin-bottom:clamp(56px,8vw,110px)}
.collection-tete .etiquette{margin:0 0 14px}
.collection-tete h2{font-size:clamp(3rem,7vw,6.2rem);letter-spacing:-.02em}
.collection-note{margin:0;color:var(--gris);font-size:.92rem}

.zoom{display:block;width:100%;padding:0;border:0;background:var(--pierre);cursor:zoom-in;overflow:hidden}
.zoom img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.zoom:hover img{transform:scale(1.035)}

.planche{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center;padding-inline:var(--bord);margin-bottom:clamp(90px,12vw,170px)}
.fiche h3{font-size:clamp(2.4rem,4.4vw,3.8rem);letter-spacing:-.01em}
.fiche-sous{font:italic 400 1.2rem/1.3 var(--didone);color:var(--emeraude);margin:10px 0 26px}
.fiche>p:not(.ref):not(.fiche-sous){color:var(--gris);max-width:42ch}
.fiche dl{margin:34px 0 0;border-top:1px solid var(--pierre-2)}
.fiche dl div{display:grid;grid-template-columns:8.5rem 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--pierre-2)}
.fiche dt{font:600 .66rem/1.9 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gris)}
.fiche dd{margin:0;font-size:.95rem}

.planche-sombre{grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--nuit);color:var(--porcelaine);padding-block:clamp(70px,9vw,130px)}
.planche-sombre .zoom{background:var(--nuit-2)}
.planche-sombre .fiche-sous,.planche-sombre .ref{color:var(--laiton-clair)}
.planche-sombre .fiche>p:not(.ref):not(.fiche-sous){color:#b9c1ba}
.planche-sombre dl,.planche-sombre dl div{border-color:#2c4038}
.planche-sombre dt{color:#8e9890}

.duo,.trio{display:grid;gap:clamp(24px,4vw,64px);padding-inline:var(--bord);margin-bottom:clamp(90px,12vw,170px);align-items:start}
.duo{grid-template-columns:repeat(2,minmax(0,1fr))}
.duo .carte:nth-child(2){margin-top:clamp(0px,10vw,160px)}
.trio{grid-template-columns:repeat(3,minmax(0,1fr))}
.carte-texte{padding-top:24px}
.carte h3{font-size:clamp(1.6rem,2.4vw,2.1rem);margin-bottom:12px}
.carte-texte>p:not(.ref):not(.prix){color:var(--gris);font-size:.94rem;max-width:40ch;margin-bottom:14px}
.prix{font:italic 400 1.15rem/1 var(--didone);color:var(--emeraude);margin:0}

/* Savoir-faire */
.savoir{background:var(--nuit);color:var(--porcelaine);padding:clamp(90px,12vw,160px) var(--bord)}
.savoir .etiquette{color:var(--laiton-clair)}
.savoir-tete{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 64px;align-items:end;margin-bottom:clamp(48px,6vw,80px)}
.savoir-tete .etiquette{grid-column:1/-1;margin:0}
.savoir-tete h2{font-size:clamp(2.6rem,5.4vw,4.6rem)}
.savoir-tete h2 em{color:var(--laiton-clair)}
.savoir-tete>p{margin:0;color:#b9c1ba;max-width:52ch}
.savoir-img{margin:0 0 clamp(56px,7vw,96px)}
.savoir-img img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--nuit-2)}
.savoir-img figcaption{margin-top:14px;font:italic 400 .95rem/1.4 var(--didone);color:#8e9890}
.etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.etapes li{border-top:1px solid #2c4038;padding-top:24px}
.etape-n{display:block;font:italic 400 2.4rem/1 var(--didone);color:var(--laiton-clair);margin-bottom:22px}
.etapes h3{font-size:1.45rem;margin-bottom:10px}
.etapes p{margin:0;color:#b9c1ba;font-size:.93rem}

/* La créatrice */
.maison{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,120px);align-items:center;padding:clamp(90px,12vw,160px) var(--bord)}
.portrait{margin:0;max-width:480px}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;filter:saturate(.9)}
.portrait figcaption{margin-top:14px;font:italic 400 .95rem/1 var(--didone);color:var(--gris)}
.maison-texte h2{font-size:clamp(3rem,6vw,5.2rem);letter-spacing:-.02em;margin-bottom:28px}
.maison-cite{font:italic 400 clamp(1.3rem,2.2vw,1.7rem)/1.35 var(--didone);color:var(--emeraude);max-width:28ch;margin-bottom:26px}
.maison-texte>p:not(.etiquette):not(.maison-cite){color:var(--gris);max-width:50ch;margin-bottom:34px}

/* Rendez-vous */
.rdv{padding:0 var(--bord) clamp(90px,12vw,160px)}
.rdv-tete{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end;border-top:1px solid var(--pierre-2);padding-top:clamp(70px,9vw,120px);margin-bottom:48px}
.rdv-tete .etiquette{grid-column:1/-1;margin:0}
.rdv-tete h2{font-size:clamp(2.4rem,4.6vw,3.8rem)}
.rdv-tete h2 em{color:var(--emeraude)}
.rdv-tete>p{margin:0;color:var(--gris);max-width:48ch}
.agenda{width:100%;border-collapse:collapse}
.agenda th{text-align:left;font:600 .66rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gris);padding:0 0 16px;border-bottom:1px solid var(--encre)}
.agenda td{padding:24px 16px 24px 0;border-bottom:1px solid var(--pierre-2);vertical-align:baseline}
.agenda td:first-child{font:500 .8rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--laiton);white-space:nowrap;width:22%}
.agenda td:nth-child(2){font:400 clamp(1.25rem,2vw,1.6rem)/1.2 var(--didone)}
.agenda td:last-child{color:var(--gris);font-size:.94rem}
.rdv-suite{margin-top:22px;color:var(--gris);font-size:.92rem}
.rdv-suite a{color:var(--emeraude)}

/* Sur mesure */
.sur-mesure{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--emeraude);color:var(--porcelaine)}
.sm-img{min-height:clamp(320px,42vw,620px);background:url(/img/ambiance/verre.jpg) center/cover,var(--nuit-2)}
.sm-texte{padding:clamp(56px,8vw,120px) var(--gouttiere) clamp(56px,8vw,120px) clamp(32px,6vw,96px);align-self:center;max-width:640px}
.sm-texte .etiquette{color:var(--laiton-clair)}
.sm-texte h2{font-size:clamp(2.4rem,4.4vw,3.8rem);margin-bottom:26px}
.sm-texte h2 em{color:var(--laiton-clair)}
.sm-texte>p:not(.etiquette){color:#d4ddd7;max-width:46ch;margin-bottom:38px}
.bouton{display:inline-flex;align-items:center;min-height:54px;padding:0 34px;border:1px solid var(--laiton-clair);color:var(--porcelaine);text-decoration:none;font:600 .72rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;transition:background .3s,color .3s}
.bouton:hover{background:var(--laiton-clair);color:var(--nuit)}

/* Pied */
.pied{background:var(--pierre);padding:clamp(64px,8vw,100px) var(--bord) calc(36px + env(safe-area-inset-bottom,0px));display:grid;justify-items:center;text-align:center;gap:18px}
.marque-pied .marque-l1{font-size:1.2rem}
.marque-pied .marque-l2{color:var(--laiton);font-size:1.25rem}
.pied>p{margin:0;color:var(--gris);font-size:.9rem}
.pied nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 32px;margin-top:10px}
.pied nav a{font:500 .68rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;text-decoration:none;padding:8px 0}
.pied nav a:hover{color:var(--emeraude)}
.pied .legal{max-width:70ch;margin-top:26px;padding-top:26px;border-top:1px solid var(--pierre-2);font-size:.76rem;color:#7a817c}

/* Visionneuse */
.visionneuse{border:0;padding:0;background:transparent;max-width:min(92vw,1100px);max-height:92vh}
.visionneuse::backdrop{background:rgba(15,31,26,.94)}
.visionneuse img{max-height:90vh;width:auto;margin:auto}
.fermer{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));right:16px;width:48px;height:48px;border:1px solid var(--laiton-clair);border-radius:50%;background:transparent;color:var(--porcelaine);font-size:1.5rem;cursor:pointer}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Tablette */
@media (max-width:1000px){
  .collection-tete{grid-template-columns:1fr;gap:18px}
  .planche,.planche-sombre{grid-template-columns:1fr}
  .planche-sombre .fiche{order:2}
  .trio{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trio .carte:last-child{grid-column:1/-1;max-width:calc(50% - clamp(12px,2vw,32px))}
  .etapes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .savoir-tete,.rdv-tete{grid-template-columns:1fr}
  .maison{grid-template-columns:1fr}
  .sur-mesure{grid-template-columns:1fr}
}
/* Téléphone */
@media (max-width:760px){
  .entete{grid-template-columns:1fr auto}
  .nav{display:none}
  .marque{align-items:flex-start;position:relative;z-index:2}
  .marque-l1{font-size:.8rem;padding-left:0}
  .marque-l2{font-size:.95rem}
  .burger{display:block;position:relative;z-index:2}
  .menu-mobile{display:flex;position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:center;gap:30px;background:var(--nuit);color:var(--porcelaine);opacity:0;pointer-events:none;transition:opacity .35s}
  .menu-mobile a{font:400 1.9rem/1 var(--didone);text-decoration:none}
  .menu-ouvert{overflow:hidden}
  .menu-ouvert .menu-mobile{opacity:1;pointer-events:auto}
  .menu-ouvert .entete{color:var(--porcelaine);background:transparent;box-shadow:none;backdrop-filter:none}
  .menu-ouvert .burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .menu-ouvert .burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .hero{min-height:0;display:flex;flex-direction:column}
  .hero-img{position:relative;inset:auto;height:62vh;min-height:380px}
  .hero-img img{object-position:78% center}
  .hero::after{background:linear-gradient(180deg,rgba(15,31,26,.35) 0%,rgba(15,31,26,0) 22%,rgba(15,31,26,0) 40%,var(--nuit) 62vh)}
  .hero-texte{padding:0 var(--gouttiere) 72px;margin-top:-90px;max-width:none}
  .hero-legende{display:none}
  .manifeste{grid-template-columns:1fr;gap:8px}
  .duo,.trio{grid-template-columns:1fr}
  .duo .carte:nth-child(2){margin-top:0}
  .trio .carte:last-child{max-width:none}
  .fiche dl div{grid-template-columns:7rem 1fr}
  .etapes{grid-template-columns:1fr}
  .agenda thead{display:none}
  .agenda tr{display:grid;gap:4px;padding:20px 0;border-bottom:1px solid var(--pierre-2)}
  .agenda td{padding:0;border:0;width:auto}
}