/* ═══════════════════════════════════════════════════════════
   HORT — feuille de style
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:    #F2EEE5;
  --paper-2:  #E9E3D6;
  --ink:      #121916;
  --ink-2:    #0A0F0D;
  --green:    #16382B;
  --gold:     #A8843C;
  --gold-lt:  #C6A465;
  --muted:    #6C6A61;
  --muted-lt: rgba(242,238,229,.56);

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans:  'Jost', 'Helvetica Neue', Arial, sans-serif;

  --gut: clamp(20px, 5vw, 72px);
  --shell: 1320px;

  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.62,.05,.24,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; }

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-loading{ overflow: hidden; height:100%; }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background: var(--gold); color: var(--paper); }

/* grain global ------------------------------------------------ */
body::after{
  content:''; position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:.09; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }

/* ── typographie commune ── */
.h-display{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(38px, 6.2vw, 92px);
  line-height: .98;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
}
.eyebrow{
  font-size: 11px; font-weight:400; letter-spacing:.34em; text-transform:uppercase;
  color: var(--gold); margin:0 0 1.6em;
}
.eyebrow--light{ color: var(--gold-lt); }

.rule{
  display:block; height:1px; width:100%; background: rgba(18,25,22,.16);
  transform-origin: left center; margin-top: 2.2rem;
}
.rule--light{ background: rgba(242,238,229,.18); }

/* lignes masquées (SplitText) */
.split-line{ overflow:hidden; display:block; }

/* ═══ PRÉCHARGEMENT ═══════════════════════════════════════ */
.loader{
  position:fixed; inset:0; z-index:10000;
  display:grid; place-items:center;
  background: var(--ink-2);
}
.loader__inner{ text-align:center; color:var(--gold-lt); }
.loader__crest{ width:54px; height:auto; color:var(--gold-lt); display:block; margin:0 auto 34px; }
.loader__crest path{
  stroke-dasharray: 1; stroke-dashoffset: 1;
  /* pathLength normalisé au JS */
}
.loader__bar{
  width: min(210px, 42vw); height:1px; background: rgba(198,164,101,.22); margin:0 auto 14px;
}
.loader__bar i{ display:block; height:100%; width:0%; background: var(--gold-lt); }
.loader__count{
  font-size:10.5px; letter-spacing:.3em; color: rgba(198,164,101,.7);
  font-variant-numeric: tabular-nums;
}
.loader__count em{ font-style:normal; opacity:.55; }
.loader__curtain{
  position:absolute; inset:0; background: var(--ink-2); transform-origin: top center;
}

/* ═══ EN-TÊTE ═════════════════════════════════════════════ */
.head{
  position:fixed; inset:0 0 auto 0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding: clamp(16px,2.4vw,30px) var(--gut);
  color: var(--paper);
  transition: color .5s var(--e-out), padding .5s var(--e-out), background-color .5s var(--e-out), backdrop-filter .5s;
  mix-blend-mode: normal;
}
.head::after{
  content:''; position:absolute; left:var(--gut); right:var(--gut); bottom:0; height:1px;
  background: currentColor; opacity:0; transform:scaleX(0); transform-origin:left;
  transition: opacity .5s var(--e-out), transform .7s var(--e-out);
}
.head.is-stuck{
  padding-block: clamp(11px,1.5vw,16px);
  background: rgba(10,15,13,.58);
  backdrop-filter: blur(14px) saturate(1.1);
}
.head.is-stuck.is-ink{ background: rgba(242,238,229,.78); }
.head.is-stuck::after{ opacity:.14; transform:scaleX(1); }
.head.is-ink{ color: var(--ink); }
.head.nav-open{ color: var(--paper); background:transparent; backdrop-filter:none; }

.head__brand{ display:flex; align-items:center; gap:12px; }
.head__crest{ width:20px; height:auto; color: var(--gold-lt); transition: color .5s var(--e-out); }
.head.is-ink .head__crest{ color: var(--gold); }
.head__word{
  font-family: var(--serif); font-size:19px; letter-spacing:.42em; font-weight:400;
  padding-left:.42em;
}

.head__nav{ display:flex; gap: clamp(20px,2.6vw,40px); }
.head__nav a{
  position:relative; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  padding-block:6px; opacity:.86;
}
.head__nav a span{ display:block; }
.head__nav a::after{
  content:''; position:absolute; left:0; bottom:2px; width:100%; height:1px;
  background: currentColor; transform:scaleX(0); transform-origin:right;
  transition: transform .55s var(--e-out);
}
.head__nav a:hover{ opacity:1; }
.head__nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.head__burger{ display:none; width:30px; height:30px; position:relative; z-index:3; }
.head__burger i{
  position:absolute; left:3px; right:3px; height:1px; background:currentColor;
  transition: transform .45s var(--e-out), opacity .3s;
}
.head__burger i:nth-child(1){ top:12px; }
.head__burger i:nth-child(2){ top:18px; }
.head__burger.is-open i:nth-child(1){ transform: translateY(3px) rotate(45deg); }
.head__burger.is-open i:nth-child(2){ transform: translateY(-3px) rotate(-45deg); }

/* ═══ CANVAS WEBGL ════════════════════════════════════════ */
/* Le lissage de défilement place tout le contenu dans un seul contexte
   d'empilement : les vignettes sont donc rendues sur un canvas fixe posé
   par-dessus, tandis que le hero possède son propre canvas, dans le flux. */
#smooth-wrapper{ position:relative; z-index:1; }
#gl-tiles{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:2; pointer-events:none; opacity:0;
  transition: opacity .9s var(--e-out);
}
body.gl-on #gl-tiles{ opacity:1; }
#gl-hero{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition: opacity .9s var(--e-out);
}
body.gl-on #gl-hero{ opacity:1; }

/* ═══ HERO ════════════════════════════════════════════════ */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden; background: var(--ink-2);
  padding: 0 var(--gut) clamp(22px,3.4vw,44px);
  color: var(--paper);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity 2.4s var(--e-io);
}
.hero__img.is-on{ opacity:1; }
body.gl-on .hero__img{ opacity:0 !important; }
.hero__veil{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(to top, rgba(8,12,10,.72) 0%, rgba(8,12,10,0) 44%, rgba(8,12,10,.24) 100%),
    radial-gradient(140% 100% at 26% 14%, rgba(8,12,10,0) 0%, rgba(8,12,10,.30) 100%);
}

.hero__body{
  position:absolute; left:var(--gut); right:var(--gut); top:50%; transform:translateY(-50%);
  text-align:center; z-index:4;
}
.hero__title{ margin:0; }
.hero__letters{
  display:flex; justify-content:center; overflow:hidden;
  font-family: var(--serif); font-weight:300;
  font-size: clamp(76px, 20vw, 300px);
  line-height: .86;
  letter-spacing: .1em; padding-left:.1em;
  color: var(--paper);
}
.hero__letters i{ display:block; font-style:normal; will-change:transform; }
.hero__line{
  margin: clamp(26px,4vw,54px) 0 0;
  font-size: clamp(11px,1.15vw,13px); letter-spacing:.42em; text-transform:uppercase;
  color: var(--gold-lt);
}
.hero .eyebrow{ margin-bottom: clamp(16px,2.4vw,30px); }

.hero__foot{
  position:relative; z-index:4; display:grid;
  grid-template-columns: 1fr auto 1fr; align-items:end; gap:20px;
}
.hero__meta{
  margin:0; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  line-height:1.9; color: var(--muted-lt);
}
.hero__idx{
  margin:0; justify-self:end; font-size:11.5px; letter-spacing:.2em;
  color: var(--muted-lt); font-variant-numeric:tabular-nums;
}
.hero__idx b{ color: var(--gold-lt); font-weight:400; }
.hero__idx em{ font-style:normal; opacity:.7; }
.hero__cue{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted-lt);
}
.hero__cueline{
  display:block; width:1px; height: clamp(38px,5vw,64px);
  background: linear-gradient(to bottom, var(--gold-lt), rgba(198,164,101,0));
  transform-origin: top; animation: cue 2.6s var(--e-io) infinite;
}
@keyframes cue{
  0%{ transform:scaleY(0); opacity:0 }
  30%{ opacity:1 }
  100%{ transform:scaleY(1); opacity:0 }
}

/* ═══ MANIFESTE ═══════════════════════════════════════════ */
.manifeste{ position:relative; z-index:2; background:var(--paper); padding: clamp(96px,14vw,190px) 0 clamp(60px,8vw,110px); }
.manifeste .shell{ max-width: 1020px; }
.manifeste__text{
  font-family: var(--serif); font-weight:300;
  font-size: clamp(24px,3.1vw,44px); line-height:1.28; letter-spacing:-.005em;
  margin:0; color: var(--ink);
}

/* marquee ---------------------------------------------------- */
.marquee{
  margin-top: clamp(56px,8vw,120px);
  border-block: 1px solid rgba(18,25,22,.1);
  padding-block: clamp(14px,1.8vw,22px);
  overflow:hidden;
}
.marquee__track{ display:flex; width:max-content; will-change:transform; }
.marquee__track span{
  display:block; white-space:nowrap; padding-right:.6em;
  font-family: var(--serif); font-size: clamp(22px,3vw,40px); font-weight:300;
  letter-spacing:.02em; color: rgba(18,25,22,.62);
}
.marquee__track i{ font-style:normal; color: var(--gold); padding-inline:.35em; }

/* ═══ COLLECTION ══════════════════════════════════════════ */
.collection{ position:relative; z-index:2; background:var(--paper); padding: clamp(80px,10vw,140px) 0 clamp(80px,12vw,180px); }
.collection__head{ margin-bottom: clamp(56px,8vw,120px); }
.collection__head .h-display{ max-width:14ch; }

.products{ display:flex; flex-direction:column; gap: clamp(90px,13vw,200px); }
.product{
  width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut);
  display:grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(32px,6vw,96px); align-items:center;
}
.product--rev .product__media{ order:2; }
.product--rev .product__info{ order:1; }

.product__media{
  position:relative; margin:0; aspect-ratio: 4/5; overflow:hidden;
  background: var(--ink-2);
}
.product__media img{
  width:100%; height:100%; object-fit:cover;
  transition: opacity .6s var(--e-out);
}
body.gl-on .product__media img{ opacity:0; }
.product__media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(242,238,229,.07);
}

.product__info{ max-width: 46ch; }
.product__num{
  margin:0 0 1.2rem; font-size:11px; letter-spacing:.32em; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.product__name{
  font-family:var(--serif); font-weight:300; letter-spacing:-.005em;
  font-size: clamp(30px,3.9vw,56px); line-height:1.02; margin:0 0 .5em;
}
.product__desc{ margin:0 0 2.2rem; color: var(--muted); font-size:15.5px; max-width:38ch; }

.product__spec{ border-top:1px solid rgba(18,25,22,.12); margin-bottom:2.4rem; }
.product__spec li{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding: 13px 0; border-bottom:1px solid rgba(18,25,22,.1);
  font-size:13px;
}
.product__spec b{ font-weight:400; letter-spacing:.16em; text-transform:uppercase; font-size:10.5px; color:var(--muted); }
.product__spec span{ color: var(--ink); }

.product__price{
  font-family:var(--serif); font-weight:300; font-size:22px; letter-spacing:.01em;
  margin:0 0 1.2rem; color: var(--ink);
}

/* lien fléché ------------------------------------------------- */
.link{
  display:inline-flex; align-items:center; gap:14px;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
}
.link span{ position:relative; padding-bottom:4px; }
.link span::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background: currentColor; opacity:.35; transform-origin:right; transform:scaleX(1);
  transition: transform .5s var(--e-out);
}
.link i{
  width:30px; height:1px; background: var(--gold); position:relative; display:block;
  transition: width .5s var(--e-out);
}
.link i::after{
  content:''; position:absolute; right:0; top:-2.5px; width:6px; height:6px;
  border-top:1px solid var(--gold); border-right:1px solid var(--gold);
  transform: rotate(45deg);
}
.link:hover i{ width:46px; }
.link:hover span::after{ transform:scaleX(0); transform-origin:left; }

/* ═══ SAVOIR-FAIRE (épinglé) ══════════════════════════════ */
.savoir{ position:relative; z-index:2; background: var(--ink-2); color: var(--paper); }
.savoir__pin{ height:100svh; overflow:hidden; }
.savoir__stage{ position:relative; height:100svh; }
.savoir__frames{ position:absolute; inset:0; }
.savoir__frame{
  position:absolute; inset:0;
  clip-path: inset(0 0 100% 0);
}
.savoir__frame.is-on{ clip-path: inset(0 0 0% 0); }
.savoir__frame img{ width:100%; height:100%; object-fit:cover; opacity:.46; }
.savoir__frames::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(105deg, rgba(8,12,10,.92) 0%, rgba(8,12,10,.55) 52%, rgba(8,12,10,.8) 100%);
}

.savoir__panels{
  position:absolute; inset:0; display:grid; place-items:center;
  padding: 0 var(--gut);
}
.savoir__panel{
  grid-area:1/1; text-align:center; max-width: 30ch;
  opacity:0; visibility:hidden;
}
.savoir__panel.is-on{ opacity:1; visibility:visible; }
.savoir__num{
  font-family:var(--serif); font-size:13px; letter-spacing:.5em; color:var(--gold-lt);
  margin:0 0 2.2rem; padding-left:.5em;
}
.savoir__panel h3{
  font-family:var(--serif); font-weight:300; font-size: clamp(40px,7vw,104px);
  line-height:1; margin:0 0 .38em; letter-spacing:-.015em;
}
.savoir__panel p{ margin:0; color: var(--muted-lt); font-size:15.5px; line-height:1.85; }

.savoir__progress{
  position:absolute; left:var(--gut); right:var(--gut); bottom: clamp(26px,4vw,46px);
  height:1px; background: rgba(242,238,229,.14);
}
.savoir__progress i{
  display:block; height:100%; width:100%; background: var(--gold-lt);
  transform: scaleX(0); transform-origin:left;
}

/* ═══ NOTRE HISTOIRE ══════════════════════════════════════ */
.histoire{ position:relative; z-index:2; background: var(--paper); padding: clamp(90px,13vw,190px) 0; }
.histoire__grid{
  display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: clamp(36px,6vw,110px); align-items:center;
}
.histoire__media{
  margin:0; overflow:hidden; aspect-ratio:4/5; position:relative;
  clip-path: inset(0 0 100% 0);
}
.histoire__media img{ width:100%; height:120%; object-fit:cover; }
.histoire__text p{ color: var(--muted); margin:0 0 1.5rem; max-width:46ch; font-size:15.5px; }
.histoire__text .h-display{ margin-bottom:.55em; }

.histoire__sign{ display:flex; align-items:center; gap:18px; margin-top: clamp(30px,4vw,54px); }
.histoire__crest{ width:26px; height:auto; color:var(--gold); flex:none; }
.histoire__sign p{
  margin:0; font-size:11px; letter-spacing:.22em; text-transform:uppercase; line-height:2;
  color: var(--ink);
}
.histoire__sign em{ font-style:normal; color:var(--muted); letter-spacing:.16em; }

/* ═══ TÉMOIGNAGES ═════════════════════════════════════════ */
.paroles{
  position:relative; z-index:2; background: var(--green); color: var(--paper);
  padding: clamp(90px,12vw,170px) 0 clamp(80px,10vw,150px); overflow:hidden;
}
@media (min-width: 761px){
  .paroles{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; }
}
.paroles__list{
  display:flex; gap: clamp(20px,2.6vw,40px);
  padding: clamp(46px,6vw,80px) var(--gut) 0; width:max-content;
}
.parole{
  margin:0; flex:none; width: clamp(280px, 34vw, 430px);
  border-top:1px solid rgba(242,238,229,.2); padding-top: clamp(22px,3vw,34px);
}
.parole p{
  font-family:var(--serif); font-weight:300; font-size: clamp(20px,2.1vw,28px);
  line-height:1.4; margin:0 0 clamp(26px,3.4vw,44px); color: var(--paper);
}
.parole footer{ display:flex; flex-direction:column; gap:4px; }
.parole b{ font-weight:400; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-lt); }
.parole span{ font-size:12px; letter-spacing:.06em; color: var(--muted-lt); }

/* ═══ CONTACT ═════════════════════════════════════════════ */
.contact{ position:relative; z-index:2; background: var(--paper); padding: clamp(90px,13vw,185px) 0; }
.contact__grid{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(40px,7vw,120px);
}
.contact__lead p{ color: var(--muted); margin:0 0 1.4rem; max-width:40ch; font-size:15.5px; }
.contact__info{ margin-top: clamp(30px,4vw,52px); border-top:1px solid rgba(18,25,22,.12); }
.contact__info li{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid rgba(18,25,22,.1); font-size:13.5px;
}
.contact__info b{ font-weight:400; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.contact__info a{ border-bottom:1px solid rgba(168,132,60,.5); padding-bottom:2px; }
.contact__info a:hover{ color: var(--gold); }

.form{ display:flex; flex-direction:column; gap: clamp(18px,2.4vw,28px); }
.field{ display:block; }
.field span{
  display:block; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color: var(--muted); margin-bottom:10px;
}
.field input, .field textarea{
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid rgba(18,25,22,.22);
  padding: 8px 0 12px; border-radius:0;
  transition: border-color .4s var(--e-out);
}
.field textarea{ resize:vertical; min-height:96px; }
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--gold); }

/* piège à robots : invisible pour l'humain, lisible pour un script */
.field--trap{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}
.form__status{
  margin:0; font-size:13px; line-height:1.6; min-height:1.6em;
  color: var(--muted); opacity:0; transform:translateY(6px);
  transition: opacity .5s var(--e-out), transform .5s var(--e-out);
}
.form__status.is-on{ opacity:1; transform:none; }
.form__status.is-error{ color:#8C3A2B; }
.form__status.is-ok{ color: var(--gold); }
.form.is-sending{ opacity:.55; pointer-events:none; }

.btn{
  align-self:flex-start; display:inline-flex; align-items:center; gap:16px;
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  padding: 17px 30px; margin-top:8px;
  border:1px solid rgba(18,25,22,.28); color: var(--ink);
  position:relative; overflow:hidden; isolation:isolate;
  transition: color .5s var(--e-out), border-color .5s var(--e-out);
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1; background: var(--ink);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .55s var(--e-out);
}
.btn i{
  width:22px; height:1px; background:currentColor; display:block; position:relative;
  transition: width .5s var(--e-out);
}
.btn i::after{
  content:''; position:absolute; right:0; top:-2.5px; width:6px; height:6px;
  border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg);
}
.btn:hover{ color: var(--paper); border-color: var(--ink); }
.btn:hover::before{ transform: scaleY(1); transform-origin: top; }
.btn:hover i{ width:34px; }

/* ═══ PIED ════════════════════════════════════════════════ */
.foot{ position:relative; z-index:2; background: var(--ink-2); color: var(--paper); padding-top: clamp(60px,8vw,110px); overflow:hidden; }
.foot__word{
  display:flex; justify-content:center; overflow:hidden;
  padding-inline: var(--gut);
}
.foot__word span{
  display:block; font-family:var(--serif); font-weight:300;
  font-size: clamp(88px, 23vw, 380px); line-height:.78;
  letter-spacing:.06em; padding-left:.06em;
  color: rgba(242,238,229,.1);
  will-change: transform;
}
.foot__bar{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding-block: clamp(26px,3.4vw,42px);
  border-top:1px solid rgba(242,238,229,.12); margin-top: clamp(24px,4vw,56px);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color: var(--muted-lt);
}
.foot__bar p{ margin:0; }
.foot__links{ display:flex; gap: clamp(16px,2.2vw,32px); }
.foot__links a:hover{ color: var(--gold-lt); }
.foot__tag{ color: var(--gold-lt); }

/* ═══ ÉTATS D'ANIMATION (avant JS) ════════════════════════ */
[data-anim="fade"]{ opacity:0; transform: translateY(14px); }
.hero__letters i{ transform: translateY(105%); }
.no-js [data-anim="fade"], .no-js .hero__letters i{ opacity:1; transform:none; }

/* ═══ RESPONSIVE ══════════════════════════════════════════ */
@media (max-width: 1000px){
  .product, .product--rev{ grid-template-columns: 1fr; gap: clamp(26px,5vw,44px); }
  .product--rev .product__media{ order:0; }
  .product--rev .product__info{ order:0; }
  .product__media{ aspect-ratio: 5/4; }
  .histoire__grid, .contact__grid{ grid-template-columns:1fr; }
  .histoire__media{ aspect-ratio: 5/4; }
}

@media (max-width: 760px){
  .head__burger{ display:block; }
  .head__nav{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:clamp(18px,4vw,28px); padding: 0 var(--gut);
    background: var(--ink-2); color: var(--paper);
    clip-path: inset(0 0 100% 0);
    transition: clip-path .8s var(--e-out);
  }
  .head__nav.is-open{ clip-path: inset(0 0 0% 0); z-index:1; }
  .head__nav a{ font-size:clamp(22px,7vw,34px); letter-spacing:.1em; text-transform:none; font-family:var(--serif); }
  .head__nav a::after{ display:none; }

  .hero__foot{ grid-template-columns: 1fr auto; align-items:end; }
  .hero__idx{ display:none; }
  .hero__meta{ font-size:10.5px; }
  .hero__cue span{ display:none; }          /* sur mobile, le trait suffit */
  .hero__cueline{ height:34px; }
  .paroles__list{ flex-direction:column; width:100%; gap:34px; }
  .parole{ width:100%; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-anim="fade"]{ opacity:1; transform:none; }
  .hero__letters i{ transform:none; }
  .histoire__media, .savoir__frame, .head__nav{ clip-path:none !important; }
}