/* ============================================================
   MAQUETTE PAGE D'ACCUEIL — synthese
   typographie de 1a  ·  palette et alternance de fonds de 1b
   structure de l'axe E  ·  section boutique inspiree de 1c
   ============================================================ */
:root{
  --paper:#FBF8F2;          /* beige clair  (1b) */
  --mat:#EFE7D8;            /* beige fonce  (1b) */
  --ink:#3A2C21;
  --soft:#6B5A4B;
  --bronze:#8A6E3F;
  --gold:#B99B63;
  --sand:#D9CDB8;
  --dark:#2B2118;
  --line:rgba(138,110,63,.24);
  --shadow:0 18px 44px rgba(58,44,33,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:300 16.5px/1.75 'Jost',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;margin:0;line-height:1.14}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,32px)}
section{padding:clamp(3.6rem,7vw,6.4rem) 0}
.alt{background:var(--mat)}
.kicker{font:500 11.5px/1 'Jost',sans-serif;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bronze);line-height:1.7;margin:0 0 1rem}
.lead{color:var(--soft);font-size:17.5px;max-width:58ch;font-weight:300}
.section-head{max-width:660px;margin:0 auto clamp(2.4rem,5vw,3.6rem);text-align:center}
.section-head h2{font-size:clamp(2rem,3.8vw,2.9rem)}
.section-head .lead{margin:1rem auto 0}
.rule{width:54px;height:1px;background:var(--gold);margin:1.4rem auto 0}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;white-space:nowrap;
  font:400 13px/1 'Jost',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  padding:1.05rem 1.7rem;transition:background .25s ease,color .25s ease,border-color .25s ease}
.btn-solid{background:var(--bronze);color:#FFF}
.btn-solid:hover{background:#6F5730}
.btn-outline{border:1px solid var(--bronze);color:var(--bronze)}
.btn-outline:hover{background:var(--bronze);color:#FFF}
.btn-light{border:1px solid rgba(255,255,255,.55);color:#FFF}
.btn-light:hover{background:#FFF;color:var(--ink);border-color:#FFF}
.btn-ghost{padding:0;color:var(--bronze);border-bottom:1px solid var(--line);padding-bottom:.3rem}
.btn-ghost:hover{border-color:var(--bronze)}

/* ---------- barre d'informations ---------- */
.infobar{background:var(--ink);color:#D8CBB4;font:300 12.5px/1 'Jost',sans-serif;letter-spacing:.04em}
.infobar .wrap{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  flex-wrap:wrap;padding:.7rem clamp(18px,4vw,32px)}
.infobar a{color:#EFE6D4;text-decoration:none;white-space:nowrap}

/* ---------- entete ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(251,248,242,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hbar{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:1rem 0}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.brand img{width:40px;height:40px}
.brand span{font-family:'Cormorant Garamond',serif;font-size:1.3rem;letter-spacing:.03em;white-space:nowrap}
nav.main{display:flex;gap:2rem}
nav.main a{font:400 13px/1 'Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  text-decoration:none;padding-bottom:.25rem;border-bottom:1px solid transparent}
nav.main a:hover{color:var(--bronze);border-color:var(--gold)}
.hactions{display:flex;align-items:center;gap:1.2rem}
@media(min-width:1081px) and (max-width:1240px){nav.main{gap:1.35rem}}
/* menu mobile : sans JavaScript */
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:10px 4px}
.burger i{display:block;width:24px;height:1px;background:var(--ink)}
#nav-toggle{display:none}
@media(max-width:1080px){
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:.6rem 0}
  nav.main a{padding:1rem clamp(18px,4vw,32px);border-bottom:1px solid var(--line)}
  #nav-toggle:checked~header nav.main{display:flex}
  .burger{display:flex}
  .hactions .btn{display:none}
}

/* ---------- hero : grande image de fond, texte par dessus (1a + 1b) ---------- */
.hero{position:relative;min-height:clamp(540px,80vh,780px);display:flex;align-items:center;
  overflow:hidden;padding:clamp(4rem,9vw,6rem) 0}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* voile fonce : le texte doit rester lisible meme sur la partie claire de la photo */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(30,22,15,.55) 0%,rgba(30,22,15,.45) 50%,rgba(30,22,15,0) 85%),
    linear-gradient(180deg,rgba(30,22,15,.55) 0%,rgba(30,22,15,.3) 42%,rgba(30,22,15,.7) 100%)}
.hero .wrap{position:relative;z-index:2}
/* texte du bandeau cale a gauche de l ecran (et non dans la colonne centree) */
.hero > .wrap{max-width:none;width:100%;padding-left:clamp(18px,5vw,88px)}
.hero-inner{max-width:44rem;color:#FFF;text-shadow:0 2px 18px rgba(20,14,9,.5)}
.hero .kicker{color:#E8C89A}
.hero h1{font-size:clamp(2.3rem,5.2vw,3.9rem);font-weight:300;margin-bottom:1.4rem}
.nb{white-space:nowrap}
.hero p{color:rgba(255,255,255,.9);font-size:clamp(17px,1.5vw,19px);font-weight:300;
  max-width:44ch;margin:0 0 2.2rem}
.hero-actions{display:flex;gap:.9rem;flex-wrap:wrap}
.hero-foot{position:absolute;left:0;right:0;bottom:0;z-index:2;
  border-top:1px solid rgba(255,255,255,.2)}
.hero-foot .wrap{display:flex;gap:clamp(1rem,4vw,3rem);flex-wrap:wrap;padding-top:1rem;padding-bottom:1rem;
  font:400 11.5px/1.4 'Jost',sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.88);text-shadow:0 2px 10px rgba(20,14,9,.6)}
/* mobile : les trois reperes passent sur trois lignes, on reserve leur place sous les boutons */
@media(max-width:700px){.hero{padding-bottom:9.5rem}}

/* ---------- les deux metiers : deux planches posees sur l'etabli ----------
   Plus de carte blanche a ombre portee (trop "site de services") : chaque
   metier est montre comme une piece montee sous passe-partout - marge de
   papier, filet dore, etiquette d'atelier posee de travers - et le texte
   tient a cote, comme la fiche qui accompagne la commande. Les deux blocs
   sont en quinconce et inverses : meme idee de desordre tenu que l'animation. */
.metiers{display:grid;gap:clamp(3.4rem,6vw,5.4rem)}
.metier{display:grid;gap:clamp(2rem,3vw,2.8rem);align-items:center;scroll-margin-top:140px}
@media(min-width:880px){
  .metier{grid-template-columns:1.04fr .96fr;gap:clamp(2.4rem,4vw,3.6rem)}
  .metier:nth-child(2){margin-top:clamp(1rem,3.5vw,3rem)}
  .metier:nth-child(2) .ph{order:2}
  .metier:nth-child(2) .txt{order:1}
}
/* la photo, montee sous passe-partout */
.metier .ph{position:relative;background:#FDFBF6;padding:clamp(14px,2.2vw,26px);
  border:1px solid var(--line);box-shadow:0 14px 34px rgba(58,44,33,.07)}
.metier .ph-in{overflow:hidden;aspect-ratio:1/1}
.metier .ph-in img{height:100%;object-fit:cover;transition:transform .8s ease}
.metier:hover .ph-in img{transform:scale(1.04)}
.metier .ph::after{content:"";position:absolute;pointer-events:none;
  inset:calc(clamp(14px,2.2vw,26px) - 7px);border:1px solid var(--gold)}
/* l'etiquette, comme celle accrochee aux pieces en attente dans l'atelier */
.metier .tag{position:absolute;left:clamp(14px,2.2vw,26px);bottom:-17px;z-index:3;
  display:inline-flex;align-items:baseline;gap:.6rem;
  background:var(--paper);border:1px solid var(--line);padding:.65rem 1.1rem;
  transform:rotate(-1.7deg);box-shadow:0 8px 20px rgba(58,44,33,.10);
  font:500 11px/1 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)}
.metier .tag b{font:400 15px/1 'Cormorant Garamond',serif;font-style:italic;font-weight:400;color:var(--gold)}
.metier h3{font-size:clamp(1.9rem,3.2vw,2.5rem);margin:0 0 .9rem}
.metier .desc{color:var(--soft);margin:0;font-size:16px;max-width:42ch}
/* ce que l'on fait, dit comme au comptoir : une ligne par chose */
.faire{list-style:none;margin:1.6rem 0 1.5rem;padding:1.4rem 0 0;
  border-top:1px solid var(--line);display:grid;gap:.62rem}
.faire li{position:relative;padding-left:1.5rem;font-size:15px;color:var(--soft)}
.faire li::before{content:"";position:absolute;left:0;top:.75em;width:9px;height:1px;background:var(--gold)}
.matlist{font:500 10.5px/1.9 'Jost',sans-serif;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bronze);margin:0 0 1.7rem}
.metier .btn-ghost{align-self:flex-start}

/* ---------- etapes : un fil qui relie, comme un point de couture ---------- */
.process{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.6rem);align-items:center}
@media(min-width:900px){.process{grid-template-columns:.8fr 1.2fr}}
.process-img{overflow:hidden;box-shadow:var(--shadow)}
.process-img img{aspect-ratio:4/5;object-fit:cover}
.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.step{position:relative;display:grid;grid-template-columns:46px 1fr;gap:1.4rem;
  padding-bottom:clamp(1.6rem,3vw,2.3rem)}
.step:last-child{padding-bottom:0}
/* le pseudo-element doit etre place explicitement dans la grille, sinon il passe en 2e colonne */
.step::after{grid-column:1;grid-row:1;counter-increment:step;content:counter(step,lower-roman);
  display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  background:var(--mat);border:1px solid var(--gold);color:var(--bronze);
  font:400 16px/1 'Cormorant Garamond',serif;font-style:italic;z-index:1}
.step>div{grid-column:2;grid-row:1}
.step:not(:last-child)::before{content:"";position:absolute;left:23px;top:46px;bottom:0;width:1px;
  background:linear-gradient(to bottom,var(--gold),var(--line) 70%,transparent)}
.step h3{font-size:1.2rem;margin:.5rem 0 .3rem}
.step p{color:var(--soft);font-size:15px;margin:0;max-width:44ch}

/* ---------- realisations ---------- */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.6rem,1.4vw,1.1rem)}
@media(min-width:760px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gitem{overflow:hidden;aspect-ratio:1}
.gitem img{height:100%;object-fit:cover;transition:transform .6s ease}
.gitem:hover img{transform:scale(1.07)}
.gallery-foot{text-align:center;margin-top:2.6rem}

/* ---------- l'atelier ---------- */
.about{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.6rem);align-items:center}
@media(min-width:900px){.about{grid-template-columns:.9fr 1.1fr}}
.about-img{box-shadow:var(--shadow)}
.about-img img{aspect-ratio:4/5;object-fit:cover}
.timeline{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.1rem}
.timeline li{display:grid;grid-template-columns:104px 1fr;gap:1.1rem;font-size:15.5px;color:var(--soft)}
.timeline b{color:var(--bronze);font-family:'Cormorant Garamond',serif;font-size:1.2rem;
  font-weight:500;white-space:nowrap}

/* ---------- la boutique (esprit 1c) ---------- */
.shop{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.6rem);align-items:center}
@media(min-width:900px){.shop{grid-template-columns:1.05fr .95fr}}
.shop-img{position:relative;box-shadow:var(--shadow)}
.shop-img img{aspect-ratio:3/4;object-fit:cover}
.shop h2{font-size:clamp(2rem,3.6vw,2.8rem);margin-bottom:1.1rem}
.infos{list-style:none;margin:2rem 0 2.2rem;padding:0;display:grid;gap:1.3rem}
.infos li{display:grid;grid-template-columns:118px 1fr;gap:1rem;align-items:start;
  padding-bottom:1.3rem;border-bottom:1px solid var(--line)}
.infos li:last-child{border-bottom:0;padding-bottom:0}
.infos .lbl{font:500 11px/1.6 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)}
.infos .val{font-size:16px;color:var(--ink)}
.infos .val small{display:block;color:var(--soft);font-size:14.5px}

/* ---------- avis ---------- */
.reviews{display:grid;grid-template-columns:1fr;gap:clamp(1.2rem,2.4vw,2rem)}
@media(min-width:860px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{background:var(--paper);border:1px solid var(--line);padding:clamp(1.6rem,3vw,2.2rem);
  display:flex;flex-direction:column}
.stars{color:var(--gold);letter-spacing:.22em;font-size:13px;margin-bottom:1rem}
.review p{font-family:'Cormorant Garamond',serif;font-size:19.5px;font-style:italic;
  line-height:1.5;color:var(--ink);margin:0 0 1.4rem}
.review .who{margin-top:auto;font:400 11.5px/1 'Jost',sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:var(--soft)}

/* ---------- instagram ---------- */
/* En production : flux recupere par un plugin (Instagram Feed / Bricks). Ici, vignettes statiques. */
.ig-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.4rem;
  flex-wrap:wrap;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.ig-head h2{font-size:clamp(1.8rem,3.2vw,2.4rem)}
.ig-handle{font:400 13px/1 'Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bronze);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}
.ig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.5rem,1.2vw,.9rem)}
@media(min-width:640px){.ig-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.ig-grid{grid-template-columns:repeat(6,1fr)}}
.ig-item{position:relative;aspect-ratio:1;overflow:hidden;display:block}
.ig-item img{height:100%;object-fit:cover;transition:transform .6s ease}
.ig-item::after{content:"";position:absolute;inset:0;background:rgba(43,33,24,0);transition:background .3s ease}
.ig-item:hover img{transform:scale(1.07)}
.ig-item:hover::after{background:rgba(43,33,24,.22)}

/* ---------- appel final ---------- */
.cta{background:var(--dark);color:#F3EBDD;text-align:center}
.cta h2{font-size:clamp(2rem,4vw,3rem);color:#FFF;margin-bottom:1rem}
.cta p{color:rgba(243,235,221,.78);max-width:52ch;margin:0 auto 2.2rem;font-weight:300}
.cta-actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

/* ---------- pied de page ---------- */
footer{background:#221A12;color:#B6A88C;padding:clamp(3rem,6vw,4.5rem) 0 2rem;
  font-size:15px}
.fgrid{display:grid;grid-template-columns:1fr;gap:2.4rem}
@media(min-width:760px){.fgrid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
footer h4{font:500 11.5px/1 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1.2rem}
footer a{color:#CBBBA3;text-decoration:none}
footer a:hover{color:#FFF}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.fbrand img{width:54px;margin-bottom:1.2rem}
.fbrand p{color:#9A8B79;margin:0;max-width:34ch;font-weight:300}
.fbottom{margin-top:clamp(2.4rem,5vw,3.4rem);padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:#8C7E6D;font-size:13.5px}


/* ---------- panneaux en parallaxe ---------- */
/* le zoom (scale) et le plafond de decalage du script vont ensemble :
   sans plafond, l'image translatee sort du cadre et decouvre le fond sombre. */
.parallax{position:relative;overflow:hidden;isolation:isolate;background:#1A140E}
.parallax-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.28);transform-origin:center center;z-index:0;will-change:transform}
.parallax-ov{position:absolute;inset:0;z-index:1;pointer-events:none}
.ov-dark{background:linear-gradient(180deg,rgba(20,14,9,.64) 0%,rgba(20,14,9,.52) 45%,rgba(20,14,9,.74) 100%)}
.ov-soft{background:rgba(20,14,9,.14)}
.ov-quote{background:linear-gradient(180deg,rgba(18,12,7,.72) 0%,rgba(18,12,7,.66) 50%,rgba(18,12,7,.76) 100%)}
.parallax-content{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.parallax-bg{transform:none !important}}

/* ---------- respiration plein ecran : la lumiere ----------
   l'image s'allume et se decadre au fil du defilement, sans script
   (animation-timeline native). Sans ce support, ou en animations reduites,
   elle s'affiche simplement allumee : etat par defaut = etat final. */
.lum{position:relative;min-height:100svh;padding:0;overflow:hidden;isolation:isolate;
  background:#120C07;display:flex;align-items:flex-end}
.lum-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.lum-dim{position:absolute;inset:0;z-index:1;background:#0B0703;opacity:0;pointer-events:none}
.lum-veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,7,3,.55) 0%,rgba(11,7,3,0) 30%,rgba(11,7,3,.72) 100%)}
.lum-txt{position:relative;z-index:3;width:100%;padding-bottom:clamp(3rem,9vh,6rem);color:#F3E8D6}
.lum-txt .kicker{color:#E8C89A}
.lum-txt h2{font-size:clamp(2rem,4.4vw,3.4rem);color:#FFF;max-width:20ch;
  text-shadow:0 2px 26px rgba(11,7,3,.7)}
.lum-txt p.lum-lead{margin:1.2rem 0 0;max-width:46ch;color:#D6C6AE;font-weight:300;
  text-shadow:0 1px 16px rgba(11,7,3,.7)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* DEUX PIEGES ici, verifies sur le rendu reel :
       1. le raccourci `animation` remet animation-duration a 0s : l'animation se joue
          d'un coup. On declare donc les proprietes une par une, avec duration:auto.
       2. `animation-timeline:view()` sur les enfants ne marche PAS : .lum a overflow:hidden,
          donc c'est LUI le conteneur de defilement le plus proche, et la progression reste
          figee. On nomme la timeline sur la section (dont le scrollport est la page)
          et les enfants s'y rattachent. */
    .lum{view-timeline-name:--lum}
    .lum-img,.lum-dim,.lum-txt{animation-timing-function:linear;animation-fill-mode:both;
      animation-duration:auto;animation-timeline:--lum}
    .lum-img{animation-name:lum-cadre;animation-range:entry 0% cover 55%}
    .lum-dim{animation-name:lum-allume;animation-range:entry 0% cover 50%}
    .lum-txt{animation-name:lum-monte;animation-range:entry 20% cover 52%}
  }
}
@keyframes lum-cadre{from{transform:scale(1.16)}to{transform:scale(1)}}
@keyframes lum-allume{from{opacity:.82}to{opacity:0}}
@keyframes lum-monte{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ---------- le passe-partout : l'image vue au travers d'une marge et d'un filet ---------- */
.passe{background:var(--mat)}
.pp{margin:0}
.pp-frame{background:var(--paper);padding:clamp(13px,2.6vw,38px);box-shadow:var(--shadow)}
.pp-window{min-height:clamp(280px,46vh,470px);border:1px solid var(--gold)}
.cartel{display:flex;justify-content:space-between;align-items:baseline;gap:1rem 2rem;flex-wrap:wrap;
  margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--line)}
.cartel .t{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.4rem;color:var(--ink)}
.cartel .m{font:400 11px/1.8 'Jost',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--soft)}

/* ---------- bandeau citation ---------- */
.quote{min-height:clamp(340px,54vh,540px);display:flex;align-items:center;text-align:center}
.quote blockquote{margin:0 auto;max-width:34ch;color:#FFF;
  text-shadow:0 2px 20px rgba(15,10,6,.6)}
.quote q{font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;quotes:none;
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.38;display:block;margin-bottom:1.6rem}
.quote cite{font:400 11.5px/1 'Jost',sans-serif;letter-spacing:.24em;text-transform:uppercase;
  font-style:normal;color:#E8C89A}

/* ---------- triptyque des matieres, trois vitesses ---------- */
.matieres{background:var(--dark);color:#EFE3D2}
.matieres .kicker{color:#E8C89A}
.matieres .section-head h2{color:#FFF}
.matieres .section-head .lead{color:#B7A48B}
.mat-grid{display:grid;grid-template-columns:1fr;gap:clamp(.9rem,1.8vw,1.5rem)}
@media(min-width:760px){.mat-grid{grid-template-columns:repeat(3,1fr)}}
.mat-col .parallax{min-height:clamp(240px,50vh,500px)}
.mat-col h3{font-size:1.5rem;color:#FFF;margin:1.2rem 0 .4rem}
.mat-col p{margin:0;color:#A9967F;font-size:15px;max-width:34ch}

/* ============================================================
   MISE AU CADRE - animation au scroll
   ------------------------------------------------------------
   Idee : a l'atelier, les pieces arrivent posees de travers sur
   l'etabli, et l'encadreur les met d'aplomb. Chaque bloc entre
   donc legerement desaxe (angle, decalage, echelle courte) puis
   se cale exactement sur la grille du design : le desordre est
   ECRIT, jamais aleatoire, et il se resout toujours au meme
   endroit - c'est ce qui garde le fil du metier lisible.
   Deux garde-fous :
   - les etats de depart ne s'appliquent QUE sous html.anim, classe
     posee par le script : sans JS, ou en reduced-motion, la page
     s'affiche normalement et rien n'est masque ;
   - data-set est retire quand le mouvement est fini, ce qui rend a
     l'element ses transitions natives (survol des cartes metier).
   --amp : amplitude laterale, nulle en petite largeur ou un debord
   ferait defiler la page de cote.
   ============================================================ */
html{--amp:1}
@media(max-width:1000px){html{--amp:.55}}
@media(max-width:760px){html{--amp:0}}

/* -- etat de depart : pose de travers -- */
.anim :is(
  .hero-inner[data-set] > *,
  .hero-foot .wrap[data-set],
  .section-head[data-set] > *,
  .metiers[data-set] > .metier,
  .pp[data-set],
  .process-img[data-set],
  .steps[data-set] > .step,
  .gallery[data-set] > .gitem,
  .gallery-foot[data-set],
  blockquote[data-set] > *,
  .about[data-set] > *,
  .shop[data-set] > *,
  .mat-grid[data-set] > .mat-col,
  .reviews[data-set] > .review,
  .ig-head[data-set] > *,
  .ig-grid[data-set] > .ig-item,
  .cta[data-set] .wrap > *
){
  --dx:0px; --dy:28px; --rot:0deg; --sc:1; --d:0ms;
  opacity:0;
  transform:translate3d(calc(var(--dx) * var(--amp)),var(--dy),0)
            rotate(calc(var(--rot) * var(--amp))) scale(var(--sc));
  transition:opacity .8s ease var(--d),
             transform 1.05s cubic-bezier(.2,.84,.14,1) var(--d);
  will-change:transform,opacity;
}
/* -- arrivee : d'aplomb, a la place exacte prevue par la grille -- */
.anim :is(
  .hero-inner[data-set].is-set > *,
  .hero-foot .wrap[data-set].is-set,
  .section-head[data-set].is-set > *,
  .metiers[data-set].is-set > .metier,
  .pp[data-set].is-set,
  .process-img[data-set].is-set,
  .steps[data-set].is-set > .step,
  .gallery[data-set].is-set > .gitem,
  .gallery-foot[data-set].is-set,
  blockquote[data-set].is-set > *,
  .about[data-set].is-set > *,
  .shop[data-set].is-set > *,
  .mat-grid[data-set].is-set > .mat-col,
  .reviews[data-set].is-set > .review,
  .ig-head[data-set].is-set > *,
  .ig-grid[data-set].is-set > .ig-item,
  .cta[data-set].is-set .wrap > *
){opacity:1;transform:none}

/* -- amplitude et cadence, bloc par bloc -- */

/* hero : la composition se pose, sans faire attendre la lecture */
.anim .hero-inner[data-set] > *{--dy:20px}
.anim .hero-inner[data-set] > :nth-child(1){--dx:-12px;--d:60ms}
.anim .hero-inner[data-set] > :nth-child(2){--dy:26px;--rot:-.5deg;--d:150ms}
.anim .hero-inner[data-set] > :nth-child(3){--d:280ms}
.anim .hero-inner[data-set] > :nth-child(4){--d:400ms}
.anim .hero-foot .wrap[data-set]{--dy:14px;--d:520ms}

/* titres de section : le sur-titre se resserre, le filet se trace */
.anim .section-head[data-set] > *{--dy:18px}
.anim .section-head[data-set] > :nth-child(2){--d:120ms}
.anim .section-head[data-set] > :nth-child(3){--d:220ms}
.anim :is(.section-head,.hero-inner)[data-set] > .kicker{letter-spacing:.52em;
  transition:opacity .8s ease var(--d),
             transform 1.05s cubic-bezier(.2,.84,.14,1) var(--d),
             letter-spacing 1.4s cubic-bezier(.2,.84,.14,1) var(--d)}
.anim :is(.section-head,.hero-inner)[data-set].is-set > .kicker{letter-spacing:.24em}
.anim .section-head[data-set] > .rule{--dy:0px;--d:320ms;transform:scaleX(.04)}
.anim .section-head[data-set].is-set > .rule{transform:scaleX(1)}

/* les deux metiers : deux pieces posees en sens contraire */
.anim .metiers[data-set] > .metier:nth-child(1){--dx:-26px;--dy:38px;--rot:-1.7deg;--sc:.965}
.anim .metiers[data-set] > .metier:nth-child(2){--dx:26px;--dy:14px;--rot:1.5deg;--sc:.965;--d:160ms}

/* l'oeuvre encadree : le cadre se met d'aplomb, le cartel suit */
.anim .pp[data-set]{--dy:44px;--rot:-1.5deg;--sc:.975}

/* le fil du metier : l'image, les etapes en cascade, puis le fil qui se trace */
.anim .process-img[data-set]{--dx:-24px;--dy:30px;--rot:-1.2deg;--sc:.97}
.anim .steps[data-set] > .step{--dx:30px;--dy:16px;--rot:.7deg}
.anim .steps[data-set] > .step:nth-child(2){--d:130ms}
.anim .steps[data-set] > .step:nth-child(3){--d:260ms}
.anim .steps[data-set] > .step:nth-child(4){--d:390ms}
.anim .steps[data-set] > .step:not(:last-child)::before{transform:scaleY(0);transform-origin:top center;
  transition:transform .9s cubic-bezier(.3,.8,.2,1) calc(var(--d) + 300ms)}
.anim .steps[data-set].is-set > .step:not(:last-child)::before{transform:scaleY(1)}

/* realisations : des tirages eparpilles qu'on range en grille */
.anim .gallery[data-set] > .gitem{--sc:.9}
.anim .gallery[data-set] > .gitem:nth-child(1){--dx:-30px;--dy:46px;--rot:-3.4deg}
.anim .gallery[data-set] > .gitem:nth-child(2){--dx:18px;--dy:64px;--rot:2.6deg;--d:80ms}
.anim .gallery[data-set] > .gitem:nth-child(3){--dx:-14px;--dy:34px;--rot:3deg;--d:160ms}
.anim .gallery[data-set] > .gitem:nth-child(4){--dx:28px;--dy:56px;--rot:-2.2deg;--d:240ms}
.anim .gallery[data-set] > .gitem:nth-child(5){--dx:-22px;--dy:60px;--rot:2.8deg;--d:300ms}
.anim .gallery[data-set] > .gitem:nth-child(6){--dx:16px;--dy:38px;--rot:-3deg;--d:370ms}
.anim .gallery[data-set] > .gitem:nth-child(7){--dx:-26px;--dy:52px;--rot:1.8deg;--d:440ms}
.anim .gallery[data-set] > .gitem:nth-child(8){--dx:24px;--dy:42px;--rot:-2.6deg;--d:510ms}
.anim .gallery-foot[data-set]{--dy:18px;--d:640ms}

/* citation */
.anim blockquote[data-set] > *{--dy:24px}
.anim blockquote[data-set] > :nth-child(2){--d:240ms}

/* atelier et boutique : l'image et le texte arrivent en contre-sens */
.anim :is(.about,.shop)[data-set] > :nth-child(1){--dx:-24px;--dy:34px;--rot:-1.2deg;--sc:.97}
.anim :is(.about,.shop)[data-set] > :nth-child(2){--dx:22px;--dy:24px;--d:170ms}

/* les matieres : trois colonnes a trois hauteurs, comme sur l'etabli */
.anim .mat-grid[data-set] > .mat-col:nth-child(1){--dy:64px;--rot:-1.3deg;--sc:.96}
.anim .mat-grid[data-set] > .mat-col:nth-child(2){--dy:98px;--rot:1deg;--sc:.96;--d:140ms}
.anim .mat-grid[data-set] > .mat-col:nth-child(3){--dy:46px;--rot:-.8deg;--sc:.96;--d:280ms}

/* avis : trois fiches en eventail qui se redressent */
.anim .reviews[data-set] > .review:nth-child(1){--dx:-16px;--dy:30px;--rot:-2.2deg}
.anim .reviews[data-set] > .review:nth-child(2){--dy:46px;--rot:1.5deg;--d:130ms}
.anim .reviews[data-set] > .review:nth-child(3){--dx:16px;--dy:26px;--rot:-1.1deg;--d:260ms}

/* instagram : la mosaique se remet au carre */
.anim .ig-head[data-set] > *{--dy:16px}
.anim .ig-head[data-set] > :nth-child(2){--d:150ms}
.anim .ig-grid[data-set] > .ig-item{--sc:.88;--dy:34px}
.anim .ig-grid[data-set] > .ig-item:nth-child(1){--dx:-18px;--rot:-3deg}
.anim .ig-grid[data-set] > .ig-item:nth-child(2){--dx:12px;--rot:2.4deg;--d:70ms}
.anim .ig-grid[data-set] > .ig-item:nth-child(3){--dx:-10px;--rot:3deg;--d:140ms}
.anim .ig-grid[data-set] > .ig-item:nth-child(4){--dx:16px;--rot:-2.6deg;--d:210ms}
.anim .ig-grid[data-set] > .ig-item:nth-child(5){--dx:-14px;--rot:2.2deg;--d:280ms}
.anim .ig-grid[data-set] > .ig-item:nth-child(6){--dx:18px;--rot:-3.2deg;--d:350ms}

/* appel final */
.anim .cta[data-set] .wrap > *{--dy:26px}
.anim .cta[data-set] .wrap > :nth-child(2){--d:140ms}
.anim .cta[data-set] .wrap > :nth-child(3){--d:280ms}


/* ============================================================
   PAGES INTERIEURES
   Memes materiaux que l'accueil (papier, filet dore, cartel,
   etiquette de travers), mais des agencements differents d'une
   page a l'autre pour que la lecture ne devienne pas mecanique.
   ============================================================ */

/* ---------- en-tete de page : plus court que le hero d'accueil ---------- */
.phero{position:relative;min-height:clamp(340px,52vh,520px);display:flex;align-items:flex-end;
  overflow:hidden;padding:0}
.phero-bg{position:absolute;inset:0;z-index:0}
.phero-bg img{width:100%;height:100%;object-fit:cover}
.phero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,20,13,.46) 0%,rgba(28,20,13,.30) 40%,rgba(28,20,13,.80) 100%)}
.phero .wrap{position:relative;z-index:2;padding-top:clamp(4rem,10vw,7rem);padding-bottom:clamp(2.2rem,4vw,3.4rem)}
.phero-inner{max-width:46rem;color:#FFF;text-shadow:0 2px 18px rgba(20,14,9,.55)}
.phero .kicker{color:#E8C89A}
.phero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:300;margin-bottom:1.1rem}
.phero p{color:rgba(255,255,255,.9);font-weight:300;max-width:48ch;margin:0;font-size:17px}
/* fil d'Ariane */
.crumb{position:absolute;top:0;left:0;right:0;z-index:2}
.crumb .wrap{padding-top:1.1rem;padding-bottom:0}
.crumb a,.crumb span{font:400 11px/1.6 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.72);text-decoration:none}
.crumb a:hover{color:#E8C89A}
.crumb em{font-style:normal;color:rgba(255,255,255,.4);padding:0 .55rem}

/* ---------- fiches : ce que l'on encadre / ce que l'on fabrique ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:clamp(1rem,2vw,1.6rem)}
@media(min-width:620px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column}
.card figure{margin:0;overflow:hidden;aspect-ratio:4/3}
.card figure img{height:100%;object-fit:cover;transition:transform .7s ease}
.card:hover figure img{transform:scale(1.05)}
.card .in{padding:clamp(1.2rem,2.2vw,1.7rem);display:flex;flex-direction:column;flex:1}
.card h3{font-size:1.45rem;margin:0 0 .5rem}
.card p{margin:0;color:var(--soft);font-size:15px}
.card .num{font:400 11px/1 'Jost',sans-serif;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.8rem}

/* ---------- frise : les etapes en bande horizontale ---------- */
.frise{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,3vw,2.4rem);counter-reset:fr}
@media(min-width:900px){.frise{grid-template-columns:repeat(4,1fr)}}
.frise>li{list-style:none;position:relative;padding-top:2.6rem}
.frise>li::before{counter-increment:fr;content:counter(fr,decimal-leading-zero);position:absolute;top:0;left:0;
  font:400 13px/1 'Jost',sans-serif;letter-spacing:.2em;color:var(--gold)}
.frise>li::after{content:"";position:absolute;top:.45rem;left:2.6rem;right:0;height:1px;background:var(--line)}
.frise h3{font-size:1.2rem;margin:0 0 .45rem}
.frise p{margin:0;color:var(--soft);font-size:15px}

/* ---------- questions courantes : accordeon natif, sans script ---------- */
.faq{max-width:52rem;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.35rem 2.4rem 1.35rem 0;position:relative;
  font-family:'Cormorant Garamond',serif;font-size:1.35rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.5rem;top:50%;width:11px;height:11px;
  border-right:1px solid var(--bronze);border-bottom:1px solid var(--bronze);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--bronze)}
.faq .rep{padding:0 0 1.5rem;margin:0;color:var(--soft);font-size:15.5px;max-width:60ch}

/* ---------- duo : un texte et une image, en alternance ---------- */
.duo{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.4rem);align-items:center}
@media(min-width:900px){
  .duo{grid-template-columns:1fr 1fr}
  .duo.inverse>figure{order:2}
}
.duo>figure{margin:0;position:relative;background:#FDFBF6;padding:clamp(12px,1.8vw,20px);
  border:1px solid var(--line);box-shadow:0 14px 34px rgba(58,44,33,.07)}
.duo>figure img{aspect-ratio:4/3;object-fit:cover}
.duo>figure figcaption{font:400 10.5px/1.8 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:var(--soft);padding-top:.7rem}
.duo h2{font-size:clamp(1.8rem,3.2vw,2.5rem);margin-bottom:1rem}
.duo h3{font-size:1.5rem;margin-bottom:.8rem}
.duo .lead{margin-bottom:1.4rem}

/* ---------- formes : une bande de vignettes, comme un nuancier ---------- */
.formes{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.6rem)}
@media(min-width:720px){.formes{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.formes{grid-template-columns:repeat(6,1fr)}}
.forme{text-align:center}
.forme .rond{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 10px 26px rgba(58,44,33,.08)}
.forme .rond img{height:100%;object-fit:cover;transition:transform .7s ease}
.forme:hover .rond img{transform:scale(1.07)}
.forme b{display:block;margin-top:.95rem;font:500 11px/1.5 'Jost',sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bronze);font-weight:500}
.forme span{display:block;color:var(--soft);font-size:14px;margin-top:.25rem}

/* ---------- mosaique : la planche-contact de l'atelier ---------- */
.mosaic{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.6rem,1.4vw,1.1rem)}
@media(min-width:760px){.mosaic{grid-template-columns:repeat(6,1fr)}}
.mitem{position:relative;overflow:hidden;aspect-ratio:1;display:block}
.mitem img{height:100%;object-fit:cover;transition:transform .7s ease}
.mitem:hover img{transform:scale(1.06)}
@media(min-width:760px){
  .mitem{grid-column:span 2}
  .mitem.w3{grid-column:span 3;aspect-ratio:3/2}
  /* la grande verticale couvre deux rangees : sa hauteur doit venir de la grille
     (deux rangees + la gouttiere), pas d'un rapport fixe qui la laisse plus
     courte que ses voisines. Image en absolu pour qu'elle ne dicte rien. */
  .mitem.h2{grid-row:span 2;aspect-ratio:auto}
  .mitem.h2 img{position:absolute;inset:0;width:100%;height:100%}
  .mitem.w4{grid-column:span 4;aspect-ratio:2/1}
}
/* le cartel, comme sous une piece accrochee */
.mitem .lg{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.4rem 1.1rem .95rem;
  background:linear-gradient(180deg,rgba(16,11,6,0),rgba(16,11,6,.78));
  color:#F4EADA;font:400 11px/1.5 'Jost',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transition:opacity .4s ease}
.mitem:hover .lg,.mitem:focus-visible .lg{opacity:1}

/* ---------- pratique : adresse, horaires, acces ---------- */
.pratique{display:grid;grid-template-columns:1fr;gap:clamp(1.2rem,2.4vw,2rem)}
@media(min-width:760px){.pratique{grid-template-columns:repeat(3,1fr)}}
.prat{background:var(--paper);border:1px solid var(--line);padding:clamp(1.5rem,2.6vw,2rem)}
.prat h3{font:500 11px/1.6 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bronze);margin:0 0 1rem}
.prat p{margin:0 0 .5rem;font-size:15.5px;color:var(--ink)}
.prat p:last-child{margin-bottom:0}
.prat small{color:var(--soft);font-size:14px}
.prat a{color:var(--bronze);text-decoration:none;border-bottom:1px solid var(--line)}
.prat a:hover{border-color:var(--bronze)}

/* ---------- formulaire ---------- */
.form{display:grid;gap:1.15rem}
.form .row{display:grid;grid-template-columns:1fr;gap:1.15rem}
@media(min-width:620px){.form .row{grid-template-columns:1fr 1fr}}
.form label{display:block;font:500 11px/1.6 'Jost',sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bronze);margin-bottom:.45rem}
.form input,.form select,.form textarea{width:100%;background:var(--paper);color:var(--ink);
  border:1px solid var(--line);padding:.85rem 1rem;font:300 16px/1.5 'Jost',sans-serif;
  border-radius:0;transition:border-color .25s ease}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--bronze)}
.form textarea{min-height:150px;resize:vertical}
.form .mention{font-size:13.5px;color:var(--soft);margin:0}

/* ---------- mise au cadre : les blocs propres aux pages interieures ---------- */
.anim :is(
  .phero-inner[data-set] > *,
  .cards[data-set] > .card,
  .frise[data-set] > li,
  .faq[data-set] > details,
  .duo[data-set] > *,
  .formes[data-set] > .forme,
  .mosaic[data-set] > .mitem,
  .pratique[data-set] > .prat,
  .form[data-set] > *
){
  --dx:0px; --dy:28px; --rot:0deg; --sc:1; --d:0ms;
  opacity:0;
  transform:translate3d(calc(var(--dx) * var(--amp)),var(--dy),0)
            rotate(calc(var(--rot) * var(--amp))) scale(var(--sc));
  transition:opacity .8s ease var(--d),
             transform 1.05s cubic-bezier(.2,.84,.14,1) var(--d);
  will-change:transform,opacity;
}
.anim :is(
  .phero-inner[data-set].is-set > *,
  .cards[data-set].is-set > .card,
  .frise[data-set].is-set > li,
  .faq[data-set].is-set > details,
  .duo[data-set].is-set > *,
  .formes[data-set].is-set > .forme,
  .mosaic[data-set].is-set > .mitem,
  .pratique[data-set].is-set > .prat,
  .form[data-set].is-set > *
){opacity:1;transform:none}

.anim .phero-inner[data-set] > *{--dy:18px}
.anim .phero-inner[data-set] > :nth-child(2){--dx:-10px;--rot:-.4deg;--d:130ms}
.anim .phero-inner[data-set] > :nth-child(3){--d:260ms}
/* les fiches, comme des cartons poses en pile puis alignes */
.anim .cards[data-set] > .card{--dy:40px;--sc:.965}
.anim .cards[data-set] > .card:nth-child(1){--dx:-20px;--rot:-1.6deg}
.anim .cards[data-set] > .card:nth-child(2){--dy:56px;--rot:1.2deg;--d:110ms}
.anim .cards[data-set] > .card:nth-child(3){--dx:20px;--rot:-1deg;--d:220ms}
.anim .cards[data-set] > .card:nth-child(4){--dx:-16px;--rot:1.4deg;--d:150ms}
.anim .cards[data-set] > .card:nth-child(5){--dy:50px;--rot:-1.2deg;--d:260ms}
.anim .cards[data-set] > .card:nth-child(6){--dx:18px;--rot:1.6deg;--d:370ms}
/* la frise : les reperes se posent de gauche a droite */
.anim .frise[data-set] > li{--dy:22px}
.anim .frise[data-set] > li:nth-child(2){--d:120ms}
.anim .frise[data-set] > li:nth-child(3){--d:240ms}
.anim .frise[data-set] > li:nth-child(4){--d:360ms}
/* questions : une simple montee, la lecture prime */
.anim .faq[data-set] > details{--dy:16px}
.anim .faq[data-set] > details:nth-child(2){--d:80ms}
.anim .faq[data-set] > details:nth-child(3){--d:160ms}
.anim .faq[data-set] > details:nth-child(4){--d:240ms}
.anim .faq[data-set] > details:nth-child(5){--d:320ms}
.anim .faq[data-set] > details:nth-child(6){--d:400ms}
/* duo : l'image et le texte arrivent en contre-sens */
.anim .duo[data-set] > :nth-child(1){--dx:-22px;--dy:32px;--rot:-1.2deg;--sc:.97}
.anim .duo[data-set] > :nth-child(2){--dx:20px;--dy:22px;--d:160ms}
/* nuancier des formes : les vignettes roulent en place */
.anim .formes[data-set] > .forme{--dy:30px;--sc:.86}
.anim .formes[data-set] > .forme:nth-child(2){--d:70ms}
.anim .formes[data-set] > .forme:nth-child(3){--d:140ms}
.anim .formes[data-set] > .forme:nth-child(4){--d:210ms}
.anim .formes[data-set] > .forme:nth-child(5){--d:280ms}
.anim .formes[data-set] > .forme:nth-child(6){--d:350ms}
/* mosaique : des tirages eparpilles que l'on range */
.anim .mosaic[data-set] > .mitem{--sc:.9;--dy:44px}
.anim .mosaic[data-set] > .mitem:nth-child(odd){--dx:-22px;--rot:-2.6deg}
.anim .mosaic[data-set] > .mitem:nth-child(even){--dx:22px;--rot:2.2deg}
.anim .mosaic[data-set] > .mitem:nth-child(2){--d:80ms}
.anim .mosaic[data-set] > .mitem:nth-child(3){--d:160ms}
.anim .mosaic[data-set] > .mitem:nth-child(4){--d:240ms}
.anim .mosaic[data-set] > .mitem:nth-child(5){--d:320ms}
.anim .mosaic[data-set] > .mitem:nth-child(6){--d:400ms}
.anim .mosaic[data-set] > .mitem:nth-child(7){--d:470ms}
.anim .mosaic[data-set] > .mitem:nth-child(8){--d:540ms}
.anim .mosaic[data-set] > .mitem:nth-child(9){--d:610ms}
/* pratique et formulaire : sobre, on ne joue pas avec un formulaire */
.anim .pratique[data-set] > .prat{--dy:26px}
.anim .pratique[data-set] > .prat:nth-child(2){--d:120ms}
.anim .pratique[data-set] > .prat:nth-child(3){--d:240ms}
.anim .form[data-set] > *{--dy:18px}
.anim .form[data-set] > :nth-child(2){--d:90ms}
.anim .form[data-set] > :nth-child(3){--d:180ms}
.anim .form[data-set] > :nth-child(4){--d:270ms}
.anim .form[data-set] > :nth-child(5){--d:360ms}

/* cartels : au survol sur ordinateur, toujours visibles sur ecran tactile
   (sans ca, une legende qui ne s'affiche qu'au hover n'existe pas sur telephone) */
@media(hover:none){.mitem .lg{opacity:1}}
/* page realisations : les cartels font partie de la lecture, on les laisse poses */
.mosaic.legendes .lg{opacity:1}

/* l'en-tete est collant : sans cette marge, une ancre amene le titre de section
   SOUS l'en-tete et on croit avoir rate le lien */
section[id],div[id].phero,article[id]{scroll-margin-top:132px}
/* page courante, dans le menu */
nav.main a.on{color:var(--bronze);border-color:var(--gold)}

/* ============================================================
   VISIONNEUSE
   Les photos d'atelier s'ouvrent en grand par-dessus la page,
   au lieu d'emmener le visiteur sur une autre page. On passe
   d'une piece a l'autre sans revenir a la grille.
   ============================================================ */
html.has-lbox .mosaic a,
html.has-lbox .gallery a,
html.has-lbox .ig-grid a{cursor:zoom-in}

.lbox{border:0;padding:0;background:transparent;overflow:hidden;
  width:100%;height:100%;max-width:100vw;max-height:100vh}
.lbox[open]{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
.lbox::backdrop{background:rgba(14,10,6,.965);backdrop-filter:blur(7px)}

.lbox-fig{margin:0;height:100%;min-width:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(.9rem,2vw,1.4rem);
  padding:clamp(3rem,6vw,4rem) 0 clamp(1.2rem,3vw,2rem)}
.lbox-fig img{display:block;width:auto;height:auto;max-width:100%;
  max-height:calc(100vh - 11rem);object-fit:contain;
  box-shadow:0 30px 90px rgba(0,0,0,.55)}
.lbox-fig figcaption{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:.5rem 1.4rem;text-align:center;padding:0 1rem;
  font:400 11px/1.6 'Jost',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#EDE2D2}
.lbox-n{color:var(--gold);white-space:nowrap}

.lbox-nav,.lbox-x{background:none;border:0;cursor:pointer;color:#EDE2D2;
  font:300 1em/1 'Jost',sans-serif;opacity:.6;transition:opacity .25s ease}
.lbox-nav:hover,.lbox-x:hover,.lbox-nav:focus-visible,.lbox-x:focus-visible{opacity:1}
.lbox-nav{font-size:clamp(2rem,4vw,3rem);padding:1.4rem clamp(.5rem,1.6vw,1.5rem)}
.lbox-x{position:absolute;top:0;right:0;z-index:2;font-size:clamp(1.6rem,3vw,2.1rem);
  padding:.9rem 1.2rem}

/* ---------- formulaire de devis : messages de retour et piege a robots ---------- */
.form-msg{display:none;margin:0 0 1.4rem;padding:1rem 1.2rem;border-radius:6px;
  background:#EEF1E6;color:var(--ink);font-size:15.5px}
.form-msg-err{background:#F6E7E1}
.form-msg:target{display:block;scroll-margin-top:140px}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- bandeau cookies : discret, en bas a gauche ---------- */
.cookies{position:fixed;left:clamp(12px,3vw,24px);bottom:clamp(12px,3vw,24px);z-index:200;
  max-width:400px;background:var(--paper);color:var(--ink);border:1px solid rgba(43,33,24,.15);
  border-radius:8px;box-shadow:0 10px 34px rgba(43,33,24,.18);padding:1.1rem 1.2rem;font-size:14.5px;line-height:1.55}
.cookies p{margin:0 0 .9rem}
.cookies a{color:inherit}
.cookies-btns{display:flex;gap:.6rem}
.cookies-btns .btn{flex:1;padding:.7rem .8rem;font-size:11px;cursor:pointer;background:transparent}
@media(max-width:480px){.cookies{right:12px;max-width:none}}