/* ============================================================
   ORIENT-TAPIS PRESTIGE — design system v2
   ============================================================ */

/* ---------- 1. Jetons ---------- */
:root{
  /* Palette relevee dans le logo : marine #0D2236, or #A17F58, creme #F8EEE4 */
  --paper:#FCF7F0;
  --surface:#F5EADC;
  --surface-2:#EADCC8;
  --line:#E3D6C4;
  --line-strong:#C0A98C;

  --dark:#0D2236;
  --dark-2:#16324A;
  --dark-line:rgba(248,238,228,.18);

  --ink:#12212F;
  --ink-muted:#4E5964;
  --on-dark:#F8EEE4;
  --on-dark-muted:#B9C4CE;

  --gold:#7A5C38;         /* or lisible sur fond clair : 5,2:1 sur creme */
  --gold-deep:#5E4527;
  --gold-bright:#C9A274;  /* sur fond marine : 6,9:1 */
  --gold-wash:#F7EFE2;

  --f-disp:"Archivo","Arial Narrow",Arial,sans-serif;
  --f-body:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1240px; --gut:22px;
  --e:cubic-bezier(.2,.7,.3,1);
  --e-out:cubic-bezier(.16,1,.3,1);
}
@media(min-width:900px){:root{--gut:40px}}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
@media(min-width:760px){body{font-size:17px}}
img,svg,video{max-width:100%;height:auto;display:block}
figure{margin:0}
dl,dd{margin:0}
a{color:var(--gold);text-underline-offset:3px}
a:hover{color:var(--gold-deep)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
:is(.dark,.sec--dark,.hero,.phead,.cta-band,.ftr) :focus-visible{outline-color:var(--gold-bright)}
::selection{background:var(--gold);color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 3. Typographie ---------- */
h1,h2,h3{font-family:var(--f-disp);margin:0;font-weight:600;font-stretch:80%}
.h-hero{
  font-size:clamp(2.6rem,7vw,5.75rem);font-weight:600;font-stretch:75%;
  line-height:.98;letter-spacing:-.02em;text-transform:uppercase;margin:0;
}
.h2{font-size:clamp(1.95rem,4.2vw,3.3rem);font-stretch:75%;line-height:1.04;letter-spacing:-.015em;text-transform:uppercase;margin-bottom:20px}
.h3{font-size:1.3rem;line-height:1.18;letter-spacing:-.01em;font-stretch:85%;margin-bottom:6px}
.h4{font-family:var(--f-body);font-size:1.0625rem;font-weight:600;line-height:1.3;font-stretch:100%;margin:0}
.lead{font-size:1.15rem;line-height:1.55;color:var(--ink-muted);margin:0;max-width:60ch}
:is(.dark,.sec--dark,.hero,.phead,.cta-band,.ftr) .lead{color:var(--on-dark-muted)}
p{margin:0 0 1em;max-width:68ch}
p:last-child{margin-bottom:0}
.muted{color:var(--ink-muted)}
:is(.dark,.sec--dark,.hero,.phead,.cta-band,.ftr) .muted{color:var(--on-dark-muted)}
.eyebrow{
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin:0 0 18px;
  display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:38px;height:1px;background:var(--gold);flex:none;transform-origin:left;
  transform:scaleX(0);transition:transform .6s var(--e-out) .1s}
.is-in .eyebrow::before,.eyebrow.is-in::before{transform:scaleX(1)}
html:not(.js) .eyebrow::before{transform:scaleX(1)}
:is(.dark,.sec--dark,.hero,.phead,.cta-band,.ftr) .eyebrow{color:var(--gold-bright)}
:is(.dark,.sec--dark,.hero,.phead,.cta-band,.ftr) .eyebrow::before{background:var(--gold-bright)}

/* ---------- 4. Mise en page ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sec{padding:76px 0;position:relative}
@media(min-width:900px){.sec{padding:124px 0}}
.sec--tight{padding:56px 0}
@media(min-width:900px){.sec--tight{padding:88px 0}}
.sec--alt{background:var(--surface)}
.dark,.sec--dark{background:var(--dark);color:var(--on-dark)}
.sec--dark{padding:92px 0}
@media(min-width:900px){.sec--dark{padding:152px 0}}
.sec-head{max-width:62ch;margin-bottom:48px}
@media(min-width:900px){.sec-head{margin-bottom:64px}}
.grid-2{display:grid;gap:40px}
.grid-2>*{min-width:0;position:relative}
@media(min-width:900px){.grid-2{grid-template-columns:1fr 1fr;gap:72px;align-items:center}}
.grid-2--top{align-items:start}

/* ---------- 5. Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border:1px solid var(--dark);
  background:var(--dark);color:var(--on-dark);font-weight:600;font-size:.98rem;
  text-decoration:none;position:relative;overflow:hidden;
  transition:color .2s var(--e),border-color .2s var(--e),transform .2s var(--e);
}
.btn::before{content:"";position:absolute;inset:0;background:var(--gold);
  transform:translateY(101%);transition:transform .28s var(--e)}
.btn>span{position:relative;z-index:1}
.btn:hover{color:#fff;border-color:var(--gold);transform:translateY(-2px)}
.btn:hover::before{transform:translateY(0)}
/* sur fond sombre, le marine disparaitrait : l'or prend le relais */
:is(.sec--dark,.cta-band,.ftr,.dark) .btn:not(.btn--ghost),
.hero__actions .btn:not(.btn--ghost),
.phead__actions .btn:not(.btn--ghost){
  background:#8A6A42;border-color:#8A6A42;color:#fff}
:is(.sec--dark,.cta-band,.ftr,.dark) .btn:not(.btn--ghost)::before,
.hero__actions .btn:not(.btn--ghost)::before,
.phead__actions .btn:not(.btn--ghost)::before{background:var(--on-dark)}
:is(.sec--dark,.cta-band,.ftr,.dark) .btn:not(.btn--ghost):hover,
.hero__actions .btn:not(.btn--ghost):hover,
.phead__actions .btn:not(.btn--ghost):hover{color:var(--dark);border-color:var(--on-dark)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost::before{background:var(--ink)}
.btn--ghost:hover{color:var(--paper);border-color:var(--ink)}
:is(.dark,.sec--dark,.hero,.phead,.cta-band,.ftr) .btn--ghost{color:var(--on-dark);border-color:var(--dark-line)}
:is(.dark,.sec--dark,.hero,.phead,.cta-band,.ftr) .btn--ghost::before{background:var(--on-dark)}
:is(.dark,.sec--dark,.hero,.phead,.cta-band,.ftr) .btn--ghost:hover{color:var(--dark);border-color:var(--on-dark)}
.btn--mono{font-family:var(--f-mono);font-weight:500;letter-spacing:.04em}
.btn--full{width:100%}

/* lien fléché qui s'allonge */
.more{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);text-decoration:none;
}
.more::after{content:"";width:20px;height:1px;background:currentColor;transition:width .24s var(--e)}
a:hover .more::after,.more:hover::after{width:38px}

/* ---------- 6. En-tête ---------- */
/* En-tete creme opaque : le logo est une illustration sur fond clair, il lui faut son ecrin. */
.hdr{position:fixed;inset:0 0 auto;z-index:70;background:var(--paper);
  border-bottom:1px solid var(--line);
  transition:background .3s var(--e),box-shadow .3s var(--e)}
.hdr.is-stuck{background:rgba(252,247,240,.96);backdrop-filter:blur(12px);box-shadow:0 6px 26px rgba(18,33,47,.09)}
.hdr__in{display:flex;align-items:center;gap:20px;min-height:78px;color:var(--ink)}
@media(min-width:900px){.hdr__in{min-height:124px}}
.brand{text-decoration:none;color:inherit;line-height:1.05;white-space:nowrap;display:flex;align-items:center;gap:14px}
.brand img{width:62px;height:62px;transition:width .3s var(--e),height .3s var(--e)}
@media(min-width:900px){.brand img{width:96px;height:96px}}
.hdr.is-stuck .brand img{width:54px;height:54px}
@media(min-width:900px){.hdr.is-stuck .brand img{width:68px;height:68px}}
.brand b{font-family:var(--f-disp);font-stretch:78%;font-weight:600;font-size:1.12rem;letter-spacing:.01em;text-transform:uppercase;display:block}
.brand span{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-muted)}
/* le pied reste sombre : la marque y garde les couleurs claires */
.ftr .brand span{color:var(--on-dark-muted)}
.brand--pied{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin:0 0 16px}
/* le logo est dessine pour un fond clair : sur le pied marine, on lui rend son fond */
.brand--pied picture{display:inline-block;background:var(--paper);padding:10px;border-radius:6px}
.brand--pied img{width:118px;height:118px;display:block}
.nav{display:none;margin-left:auto;align-items:center;gap:26px}
@media(min-width:1080px){.nav{display:flex}}
.nav a{color:var(--ink);text-decoration:none;font-size:.94rem;position:relative;padding:6px 0}
.nav a:not(.btn)::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .24s var(--e)}
.nav a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left}
.nav .btn{color:var(--on-dark)}
.nav .btn:hover{color:#fff}
.nav__lang{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;color:var(--ink-muted)}
.burger{margin-left:auto;display:flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;background:none;border:1px solid var(--line-strong);padding:0 12px}
@media(min-width:1080px){.burger{display:none}}
.burger span{display:block;height:1.5px;background:var(--ink);transition:transform .24s var(--e),opacity .2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.drawer{position:fixed;inset:78px 0 auto;z-index:65;background:var(--dark);border-top:1px solid var(--dark-line);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .26s var(--e),transform .26s var(--e),visibility .26s}
.drawer.is-open{opacity:1;visibility:visible;transform:none}
.drawer a{display:block;padding:16px 0;color:var(--on-dark);text-decoration:none;border-bottom:1px solid var(--dark-line);font-family:var(--f-disp);font-stretch:82%;font-size:1.25rem;text-transform:uppercase}

/* barre de progression de lecture */
.progress{position:fixed;inset:0 0 auto;height:2px;z-index:80;background:var(--gold);transform:scaleX(0);transform-origin:left}

/* ---------- 7. Hero ---------- */
.hero{position:relative;background:var(--dark);color:var(--on-dark);overflow:hidden;padding:126px 0 0}
@media(min-width:900px){.hero{padding:148px 0 0}}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.72;
  transform:scale(1.06);animation:kenburns 24s ease-out forwards}
@keyframes kenburns{to{transform:scale(1.17) translate3d(-1.6%,-1%,0)}}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(7,16,26,.94) 0%,rgba(7,16,26,.82) 30%,rgba(7,16,26,.42) 62%,rgba(7,16,26,.28) 100%)}
@media(max-width:899px){
  /* en colonne etroite les lignes vont jusqu'au bord droit : le degrade doit descendre, pas traverser */
  .hero__bg::after{background:linear-gradient(180deg,rgba(7,16,26,.86) 0%,rgba(7,16,26,.8) 62%,rgba(7,16,26,.58) 86%,rgba(7,16,26,.38) 100%)}
  .hero__txt::before{background:linear-gradient(180deg,rgba(7,16,26,.55),rgba(7,16,26,.4) 70%,rgba(7,16,26,.15))}
}
.hero__in{position:relative;z-index:1;display:grid;gap:44px;padding-bottom:52px}
.hero__txt{position:relative}
.hero__txt::before{content:"";position:absolute;inset:-40px -60px -30px -80px;z-index:-1;background:radial-gradient(75% 62% at 22% 45%,rgba(7,16,26,.88) 0%,rgba(7,16,26,.6) 55%,transparent 100%)}
@media(min-width:1000px){.hero__in{grid-template-columns:1.18fr .82fr;gap:60px;align-items:start;padding-bottom:70px}}
.hero__txt .h-hero{max-width:14ch}
.hero .lead{margin-top:26px;max-width:52ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero__note{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-muted);margin-top:20px}

/* titre révélé ligne par ligne */
.reveal-line{display:block;overflow:hidden}
.reveal-line>i{display:block;font-style:normal;transition:transform .95s var(--e-out)}
.js .reveal-line>i{transform:translateY(102%)}
.js .hero.is-ready .reveal-line>i{transform:none}
.hero.is-ready .reveal-line:nth-child(2)>i{transition-delay:.09s}
.hero.is-ready .reveal-line:nth-child(3)>i{transition-delay:.18s}
.hero.is-ready .reveal-line:nth-child(4)>i{transition-delay:.27s}

/* carte formulaire dans le hero */
.hero-form{background:var(--paper);color:var(--ink);padding:26px 22px 24px;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  transition:opacity .8s var(--e-out) .4s,transform .8s var(--e-out) .4s}
.js .hero-form{opacity:0;transform:translateY(18px)}
.js .hero.is-ready .hero-form{opacity:1;transform:none}
@media(min-width:600px){.hero-form{padding:32px 30px 30px}}
.hero-form h2{font-size:1.5rem;font-stretch:80%;text-transform:uppercase;margin-bottom:4px;line-height:1.06}
.hero-form .sub{font-size:.88rem;color:var(--ink-muted);margin:0 0 20px}

/* bandeau de chiffres */
.stats{position:relative;z-index:1;border-top:1px solid var(--dark-line);
  display:grid;grid-template-columns:repeat(2,1fr);
  background:linear-gradient(to top,rgba(7,16,26,.92),rgba(7,16,26,.74));
  backdrop-filter:blur(3px);margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut)}
@media(min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:26px 20px 30px;border-right:1px solid var(--dark-line)}
.stat:first-child{padding-left:0}
.stat:last-child{border-right:0}
@media(max-width:899px){.stat{padding-inline:0 16px}.stat:nth-child(2n){border-right:0;padding-left:16px}.stat:nth-child(-n+2){border-bottom:1px solid var(--dark-line)}}
.stat b{display:block;font-family:var(--f-disp);font-stretch:72%;font-weight:600;
  font-size:clamp(2.1rem,4.4vw,3rem);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.stat b small{font-size:.4em;font-weight:600;margin-left:.14em;letter-spacing:0}
.stat>span{display:block;font-size:.8rem;color:var(--on-dark-muted);margin-top:8px;max-width:24ch;line-height:1.4}
.stat b span{font:inherit;letter-spacing:inherit}

/* ---------- 8. Marquee des origines ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--paper);padding:16px 0}
.marquee__track{display:flex;gap:52px;width:max-content;animation:slide 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee__item{font-family:var(--f-disp);font-stretch:74%;font-weight:600;font-size:1.15rem;
  text-transform:uppercase;letter-spacing:.02em;color:var(--ink);white-space:nowrap;
  display:flex;align-items:center;gap:52px;opacity:.4;transition:opacity .3s}
.marquee:hover .marquee__item{opacity:.72}
.marquee__item::after{content:"";width:5px;height:5px;background:var(--gold);flex:none;transform:rotate(45deg)}

/* ---------- 9. Cartes ---------- */
.cards{display:grid;gap:22px}
.cards>*{min-width:0}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){
  .cards--3{grid-template-columns:repeat(3,1fr)}
  .cards--4{grid-template-columns:repeat(4,1fr)}
}
.card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  text-decoration:none;color:inherit;height:100%;
  transition:border-color .24s var(--e),transform .24s var(--e),box-shadow .24s var(--e)}
.card:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:0 18px 40px rgba(18,33,47,.1)}
.card__img{overflow:hidden;aspect-ratio:4/3}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .85s var(--e-out)}
.card:hover .card__img img{transform:scale(1.07)}
.card__in{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card__in p{font-size:.94rem;color:var(--ink-muted);margin:0;flex:1}
.card .more{margin-top:6px}

/* ---------- 10. Onglets ---------- */
.tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto;margin-bottom:34px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:14px 20px 13px;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-muted);white-space:nowrap;transition:color .2s var(--e),border-color .2s var(--e)}
.tab:first-child{padding-left:0}
.tab[aria-selected=true]{color:var(--gold);border-color:var(--gold)}
.tabpanel[hidden]{display:none}
.tabpanel{animation:fadeup .55s var(--e-out)}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}}

/* ---------- 11. Étapes numérotées ---------- */
.steps{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
.step__n{font-family:var(--f-mono);font-size:.72rem;color:var(--gold);padding-top:5px}
.step h3{margin-bottom:6px}
.step p{font-size:.95rem;color:var(--ink-muted);margin:0}
:is(.dark,.sec--dark) .steps,:is(.dark,.sec--dark) .step{border-color:var(--dark-line)}
:is(.dark,.sec--dark) .step p{color:var(--on-dark-muted)}
:is(.dark,.sec--dark) .step__n{color:var(--gold-bright)}

/* ---------- 12. Le retournement recto / verso ---------- */
.flip-scene{perspective:1800px}
.flip{position:relative;transform-style:preserve-3d;transition:transform 1s var(--e-out);aspect-ratio:4/5}
.flip.is-verso{transform:rotateY(180deg)}
.flip__face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;background:var(--surface-2)}
.flip__face img,.flip__face svg{width:100%;height:100%;object-fit:cover;display:block}
.flip__face--verso{transform:rotateY(180deg);background:#F0E4D3}
.flip__tag{position:absolute;top:14px;left:14px;z-index:2;background:var(--dark);color:var(--on-dark);
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;padding:7px 11px}
.flip-ctrl{margin-top:18px}

/* ---------- 13. Lumière rasante ---------- */
.rasante{position:relative;overflow:hidden;background:var(--dark)}
.rasante img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:50% 38%;filter:brightness(.66)}
@media(max-width:760px){.rasante img{aspect-ratio:4/3}}
.rasante__light{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(105deg,transparent 34%,rgba(255,238,208,.9) 50%,transparent 66%);
  transform:translateX(var(--sweep,-60%))}
.rasante__txt{position:absolute;inset:auto 0 0 0;padding:70px 0 34px;color:var(--on-dark);
  background:linear-gradient(to top,rgba(7,16,26,.95),rgba(7,16,26,.72) 45%,transparent)}
.rasante__txt p{max-width:46ch;margin:0;font-family:var(--f-disp);font-stretch:82%;font-weight:600;
  font-size:clamp(1.05rem,2.1vw,1.5rem);line-height:1.28;text-transform:uppercase}

/* ---------- 14. Boucles vidéo ---------- */
.loops{display:grid;gap:20px}
@media(min-width:760px){.loops{grid-template-columns:repeat(3,1fr)}}
.loop video{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--dark-2)}
.loop figcaption{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-dark-muted);margin-top:12px;line-height:1.5}

/* ---------- 15. Formulaires ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.field .hint{font-family:var(--f-body);font-size:.82rem;letter-spacing:0;text-transform:none;color:var(--ink-muted);margin-top:3px;line-height:1.45;display:block}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;min-height:50px;padding:12px 14px;
  border:1px solid var(--line-strong);border-radius:0;background:var(--paper);color:var(--ink);
  transition:border-color .2s var(--e),box-shadow .2s var(--e)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-wash)}
.field input:focus:not(:focus-visible),.field select:focus:not(:focus-visible),.field textarea:focus:not(:focus-visible){outline:none}
.field textarea{min-height:112px;resize:vertical}
.two{display:grid;gap:0 16px}
@media(min-width:560px){.two{grid-template-columns:1fr 1fr}}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--ink-muted);margin-bottom:18px;line-height:1.45}
.consent input{margin-top:3px;flex:none;width:17px;height:17px;accent-color:var(--gold)}
.form-note{font-size:.85rem;color:var(--ink-muted);margin-top:12px}
.form-note--ok{color:var(--gold);font-weight:600}
.form-alt{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
.gotcha{position:absolute;left:-9999px}
.form-side{display:grid;gap:38px}
.form-side>*{min-width:0}
@media(min-width:1000px){.form-side{grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:64px;align-items:start}}

/* ---------- 16. FAQ ---------- */
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;gap:20px;align-items:center;
  padding:20px 0;font-family:var(--f-disp);font-stretch:84%;font-weight:600;font-size:1.1rem}
.qa summary::-webkit-details-marker{display:none}
.qa .ic{position:relative;width:15px;height:15px;flex:none;margin-left:auto}
.qa .ic::before,.qa .ic::after{content:"";position:absolute;background:var(--gold);transition:transform .3s var(--e)}
.qa .ic::before{inset:7px 0 auto;height:1.5px}
.qa .ic::after{inset:0 7px;width:1.5px}
.qa details[open] .ic::after{transform:scaleY(0)}
.qa-body{padding:0 0 22px;color:var(--ink-muted);max-width:70ch;animation:fadeup .35s var(--e-out)}

/* ---------- 17. Bandeau CTA ---------- */
.cta-band{background:var(--dark);color:var(--on-dark);position:relative;overflow:hidden}
.cta-band__in{position:relative;z-index:1;padding:74px 0;display:grid;gap:30px;align-items:center}
@media(min-width:900px){.cta-band__in{grid-template-columns:1.3fr auto;padding:100px 0}}

/* ---------- 18. Pied de page ---------- */
.ftr{background:var(--dark);color:var(--on-dark);padding:70px 0 28px;border-top:1px solid var(--dark-line)}
.ftr a{color:var(--on-dark);text-decoration:none;opacity:.82}
.ftr a:hover{opacity:1;color:var(--gold-bright)}
.ftr__grid{display:grid;gap:38px}
@media(min-width:820px){.ftr__grid{grid-template-columns:1.5fr 1fr 1fr}}
.ftr h3{font-family:var(--f-mono);font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:16px;font-stretch:100%}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:.94rem}
.ftr__bas{margin-top:50px;padding-top:22px;border-top:1px solid var(--dark-line);
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;color:var(--on-dark-muted);
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between}

/* ---------- 19. Barre d'action mobile ---------- */
.bar{position:fixed;inset:auto 0 0 0;z-index:75;display:grid;grid-template-columns:1fr 1fr;
  transform:translateY(105%);transition:transform .32s var(--e)}
.bar.is-on{transform:none}
.bar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:58px;
  color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;background:var(--dark)}
.bar a+a{background:var(--gold)}
@media(min-width:1080px){.bar{display:none}}
@media(max-width:1079px){body.has-bar{padding-bottom:58px}}

/* ---------- 20. Mouvement ---------- */
[data-reveal]{opacity:0;transform:translateY(20px)}
.js [data-reveal].is-in{opacity:1;transform:none;
  transition:opacity .75s var(--e-out),transform .75s var(--e-out)}
html:not(.js) [data-reveal]{opacity:1;transform:none}
[data-reveal][data-d="1"].is-in{transition-delay:.07s}
[data-reveal][data-d="2"].is-in{transition-delay:.14s}
[data-reveal][data-d="3"].is-in{transition-delay:.21s}
[data-reveal][data-d="4"].is-in{transition-delay:.28s}

.rule{height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--e-out)}
.rule.is-in{transform:scaleX(1)}
html:not(.js) .rule{transform:scaleX(1)}

.para{will-change:transform}
.tilt-scene{perspective:1200px}
.tilt{transform-style:preserve-3d;transition:transform .4s var(--e)}
.tilt-scene:hover .tilt{transition:transform .1s linear}

@media(prefers-reduced-motion:reduce){
  [data-reveal],.js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .reveal-line>i{transform:none!important;transition:none!important}
  .hero-form{opacity:1!important;transform:none!important;transition:none!important}
  .hero__bg img{animation:none;transform:none}
  .marquee__track{animation:none}
  .rule,.eyebrow::before{transform:scaleX(1)!important}
  .flip{transition:none}
  .rasante__light{display:none}
  .tilt{transform:none!important}
  .btn:hover,.card:hover{transform:none}
  .card:hover .card__img img{transform:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ============================================================
   21. Fil d'Ariane
   ============================================================ */
.fil{border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);padding:14px 0}
.fil a{color:var(--ink-muted);text-decoration:none}
.fil a:hover{color:var(--gold)}
.fil .sep{margin:0 10px;opacity:.5}
.fil [aria-current]{color:var(--ink)}

/* ============================================================
   22. En-tête de page intérieure
   ============================================================ */
.phead{background:var(--dark);color:var(--on-dark);position:relative;overflow:hidden;padding:150px 0 68px}
@media(min-width:900px){.phead{padding:190px 0 92px}}
.phead__bg{position:absolute;inset:0;z-index:0}
.phead__bg img{width:100%;height:100%;object-fit:cover;opacity:.74}
/* Voile unique, sans arete : fort sous la colonne de texte, transparent sur la photo a droite. */
.phead__bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(97deg,rgba(7,16,26,.93) 0%,rgba(7,16,26,.88) 30%,rgba(7,16,26,.66) 52%,rgba(7,16,26,.28) 74%,rgba(7,16,26,.16) 100%),
    linear-gradient(180deg,rgba(7,16,26,.55) 0%,rgba(7,16,26,.1) 26%,rgba(7,16,26,0) 60%)}
@media(max-width:899px){
  /* en colonne etroite le texte va jusqu'au bord droit : le degrade doit descendre, pas traverser */
  .phead__bg img{opacity:.7}
  .phead__bg::after{background:linear-gradient(180deg,rgba(7,16,26,.86) 0%,rgba(7,16,26,.83) 55%,rgba(7,16,26,.66) 80%,rgba(7,16,26,.38) 100%)}
}
.phead__in{position:relative;z-index:1}
.phead .eyebrow,.phead .lead,.phead__actions{max-width:min(100%,54ch)}
.phead .h-hero{font-size:clamp(2.1rem,4.6vw,4rem);max-width:min(100%,17ch)}
.phead .lead{margin-top:22px;color:rgba(248,238,228,.94)}
/* sur photo, la garance vive passait juste sous le seuil de lisibilite : demi-ton plus clair, hero uniquement */
.phead .eyebrow{color:#D0AC80}
.phead .eyebrow::before{background:#D0AC80}
.phead__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ============================================================
   23. Anatomie d'un tapis — illustration interactive
   ============================================================ */
.ana{display:grid;gap:34px}
@media(min-width:900px){.ana{grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}}
.ana__fig svg{width:100%;max-width:340px;margin-inline:auto;height:auto}
.ana__fig [data-ana-part]{transition:opacity .3s var(--e)}
.ana.is-focus [data-ana-part]{opacity:.28}
.ana.is-focus [data-ana-part].is-on{opacity:1}
.ana__btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.ana__btn{display:inline-flex;align-items:center;gap:9px;background:none;
  border:1px solid var(--line);padding:9px 14px;font-size:.88rem;color:var(--ink);
  transition:border-color .2s var(--e),color .2s var(--e),background .2s var(--e)}
.ana__btn:hover{border-color:var(--line-strong)}
.ana__btn[aria-pressed=true]{border-color:var(--gold);color:var(--gold);background:var(--gold-wash)}
.ana__k{font-family:var(--f-mono);font-size:.66rem;color:var(--gold);letter-spacing:.08em}
.ana__txts{min-height:5.4em;border-top:1px solid var(--line);padding-top:18px}
.ana__txt{margin:0;color:var(--ink-muted);animation:fadeup .35s var(--e-out)}
.ana__txt b{color:var(--ink)}

/* ============================================================
   24. Les deux nœuds
   ============================================================ */
.noeuds{display:grid;gap:26px}
@media(min-width:700px){.noeuds{grid-template-columns:1fr 1fr}}
.noeud{display:flex;gap:20px;align-items:flex-start}
.noeud__d{flex:none;width:132px;background:var(--surface);border:1px solid var(--line);padding:14px}
:is(.dark,.sec--dark) .noeud__d{background:var(--dark-2);border-color:var(--dark-line)}
.noeud__d svg{width:100%;height:auto}
.noeud p{font-size:.94rem;color:var(--ink-muted);margin:0}
.noeuds__leg{grid-column:1/-1;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-muted);margin:0}

/* ============================================================
   25. Échelle de densité
   ============================================================ */
.dens{display:grid;gap:22px}
@media(min-width:640px){.dens{grid-template-columns:repeat(3,1fr)}}
.dens__c svg{width:100%;height:auto;max-width:220px}
.dens__c figcaption{margin-top:14px}
.dens__n{display:block;font-family:var(--f-disp);font-stretch:74%;font-weight:600;
  font-size:2.1rem;line-height:1;font-variant-numeric:tabular-nums}
.dens__c span{display:block;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);margin-top:5px}
.dens__c em{display:block;font-style:normal;font-size:.9rem;color:var(--ink-muted);margin-top:8px}

/* ============================================================
   26. Procédé en étapes
   ============================================================ */
.proc{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:700px){.proc{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.proc{grid-template-columns:repeat(4,1fr)}}
.proc__i{background:var(--paper);padding:26px 22px 28px}
.proc__n{display:block;font-family:var(--f-mono);font-size:.7rem;color:var(--gold);
  letter-spacing:.1em;margin-bottom:12px}
.proc__i h3{margin-bottom:8px}
.proc__i p{font-size:.9rem;color:var(--ink-muted);margin:0}
:is(.dark,.sec--dark) .proc{background:var(--dark-line);border-color:var(--dark-line)}
:is(.dark,.sec--dark) .proc__i{background:var(--dark)}
:is(.dark,.sec--dark) .proc__i p{color:var(--on-dark-muted)}
:is(.dark,.sec--dark) .proc__n{color:var(--gold-bright)}

/* ============================================================
   27. Galerie
   ============================================================ */
.gal{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.gal{grid-template-columns:repeat(4,1fr)}}
.gal figure{overflow:hidden;position:relative}
.gal img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .9s var(--e-out)}
.gal figure:hover img{transform:scale(1.08)}
.gal--haut img{aspect-ratio:3/4}
.gal figcaption{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);margin-top:9px}
:is(.dark,.sec--dark) .gal figcaption{color:var(--on-dark-muted)}

/* ============================================================
   28. Bloc de texte long (SEO) et tableau
   ============================================================ */
.prose{max-width:70ch}
.prose h3{margin-top:38px}
.prose h3:first-child{margin-top:0}
.prose ul{padding-left:1.1rem;margin:0 0 1em;color:var(--ink-muted)}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--gold)}
/* sur fond sombre, les listes gardaient le gris destine au fond clair */
:is(.dark,.sec--dark,.hero,.phead,.cta-band,.ftr) .prose ul{color:var(--on-dark-muted)}
:is(.dark,.sec--dark,.hero,.phead,.cta-band,.ftr) .prose li::marker{color:var(--gold-bright)}
:is(.dark,.sec--dark,.hero,.phead,.cta-band,.ftr) .prose :is(p,dd,td,th){color:var(--on-dark-muted)}
:is(.dark,.sec--dark,.hero,.phead,.cta-band,.ftr) .prose :is(h2,h3,h4,strong,b){color:var(--on-dark)}
:is(.dark,.sec--dark,.cta-band,.ftr) :is(p,li) a{color:var(--gold-bright)}
:is(.dark,.sec--dark,.cta-band,.ftr) :is(p,li) a:hover{color:var(--on-dark)}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:.94rem;min-width:520px}
.tbl th,.tbl td{text-align:left;padding:14px 16px 13px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-muted);font-weight:500;white-space:nowrap}
.tbl td:first-child{font-weight:600}
.tbl tr:last-child td{border-bottom:0}

/* ============================================================
   29. Encart d'alerte / rappel
   ============================================================ */
.note{border-left:3px solid var(--gold);background:var(--surface);padding:20px 24px;margin:32px 0}
.note p:last-child{margin-bottom:0}
.note strong{color:var(--ink)}

/* ============================================================
   30. Animations supplémentaires
   ============================================================ */
/* tracé de trait SVG à l'apparition */
.draw path,.draw line,.draw circle,.draw rect{
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600)}
.js .draw.is-in path,.js .draw.is-in line,.js .draw.is-in circle,.js .draw.is-in rect{
  stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--e-out)}
html:not(.js) .draw path,html:not(.js) .draw line{stroke-dashoffset:0}

/* mot surligné au scroll */
.mark{position:relative;white-space:nowrap}
.mark::after{content:"";position:absolute;inset:auto 0 .04em;height:.42em;background:var(--gold);
  opacity:.16;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--e-out) .25s}
.js .is-in .mark::after{transform:scaleX(1)}
html:not(.js) .mark::after{transform:scaleX(1)}

/* apparition en cascade des points de densité */
.dens__c.is-in svg g circle{animation:pop .5s var(--e-out) backwards}
@keyframes pop{from{transform:scale(0);opacity:0}}

@media(prefers-reduced-motion:reduce){
  .draw path,.draw line,.draw circle,.draw rect{stroke-dashoffset:0!important;transition:none!important}
  .mark::after{transform:scaleX(1)!important;transition:none!important}
  .dens__c.is-in svg g circle{animation:none}
  .gal figure:hover img{transform:none}
}

/* ============================================================
   31. La carte des origines
   ============================================================ */
.carte{display:grid;gap:32px}
@media(min-width:900px){.carte{grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}}
.carte__fig svg{width:100%;height:auto}
.carte__v{cursor:pointer}
.carte__v text{font-family:var(--f-mono);font-size:9px;fill:var(--ink-muted);transition:fill .2s var(--e)}
.carte__p{fill:var(--line-strong);transition:fill .25s var(--e),r .25s var(--e)}
.carte__v:hover .carte__p,.carte__v:focus .carte__p,.carte__v.is-on .carte__p{fill:var(--gold);r:6.5}
.carte__v:hover text,.carte__v:focus text,.carte__v.is-on text{fill:var(--gold)}
.carte__v:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.carte__v:focus-visible .carte__p{fill:var(--gold);stroke:var(--gold);stroke-width:2.5}
.carte__leg{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);margin-top:14px}
.carte__side{border-left:1px dashed var(--line);padding-left:32px;min-height:9em}
@media(max-width:899px){.carte__side{border-left:0;border-top:1px dashed var(--line);padding:22px 0 0}}
.carte__i{margin:0;color:var(--ink-muted);animation:fadeup .3s var(--e-out)}
.carte__i b{color:var(--ink);font-family:var(--f-disp);font-stretch:80%;font-size:1.5rem;
  display:block;text-transform:uppercase;line-height:1.1;margin-bottom:2px}
.carte__i em{font-style:normal;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:12px}
:is(.dark,.sec--dark) .carte__i{color:var(--on-dark-muted)}
:is(.dark,.sec--dark) .carte__i b{color:var(--on-dark)}
:is(.dark,.sec--dark) .carte__i em{color:var(--gold-bright)}
:is(.dark,.sec--dark) .carte__side{border-color:var(--dark-line)}
:is(.dark,.sec--dark) .carte__leg{color:var(--on-dark-muted)}

/* ============================================================
   32. Les motifs
   ============================================================ */
.motifs{display:grid;gap:26px}
@media(min-width:560px){.motifs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.motifs{grid-template-columns:repeat(3,1fr)}}
.motif{display:flex;gap:18px;align-items:flex-start}
.motif svg{flex:none;width:82px;height:82px;background:var(--surface);border:1px solid var(--line);padding:6px}
.motif h3{margin-bottom:5px}
.motif p{font-size:.9rem;color:var(--ink-muted);margin:0}
:is(.dark,.sec--dark) .motif svg{background:var(--dark-2);border-color:var(--dark-line);stroke:var(--gold-bright)}
:is(.dark,.sec--dark) .motif p{color:var(--on-dark-muted)}

/* ============================================================
   33. Le métier à tisser
   ============================================================ */
.tiss{display:grid;gap:34px}
@media(min-width:900px){.tiss{grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}}
.tiss__fig svg{width:100%;max-width:300px;height:auto}
.tiss__r{opacity:0;transform:translateY(6px)}
.js .tiss.is-in .tiss__r{opacity:1;transform:none;transition:opacity .34s var(--e-out),transform .34s var(--e-out)}
html:not(.js) .tiss__r{opacity:1;transform:none}
.tiss__leg{font-size:.84rem;color:var(--ink-muted);margin-top:18px;max-width:34ch}
.tiss__side .h2{margin-bottom:26px}
:is(.dark,.sec--dark) .tiss__leg{color:var(--on-dark-muted)}

/* ============================================================
   34. La coupe
   ============================================================ */
.coupe svg{width:100%;height:auto;border:1px solid var(--line)}
.coupe__lbl{display:grid;gap:14px;margin-top:22px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.coupe__lbl{grid-template-columns:repeat(5,1fr)}}
.coupe__lbl b{display:block;font-size:.94rem}
.coupe__lbl span{font-size:.84rem;color:var(--ink-muted)}
:is(.dark,.sec--dark) .coupe svg{border-color:var(--dark-line)}
:is(.dark,.sec--dark) .coupe__lbl span{color:var(--on-dark-muted)}

/* ============================================================
   35. La frise chronologique
   ============================================================ */
.frise{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
  margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);scrollbar-width:thin}
.frise__piste{display:flex;gap:20px;width:max-content;padding-bottom:18px}
.frise__c{flex:none;width:min(78vw,320px);scroll-snap-align:start;
  border-top:2px solid var(--gold);padding-top:20px}
.frise__d{display:block;font-family:var(--f-disp);font-stretch:76%;font-weight:600;
  font-size:1.6rem;text-transform:uppercase;line-height:1;margin-bottom:12px}
.frise__c p{font-size:.92rem;color:var(--ink-muted);margin:0}
:is(.dark,.sec--dark) .frise__c p{color:var(--on-dark-muted)}

/* ============================================================
   36. Le comparateur à curseur
   ============================================================ */
.comp__box{position:relative;overflow:hidden;touch-action:pan-y}
.comp__box img{width:100%;display:block}
.comp__a img{filter:brightness(.72) saturate(.85)}
.comp__b{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x));overflow:hidden}
.comp__b img{filter:brightness(1.06) saturate(1.12) contrast(1.05)}
.comp__tag{position:absolute;top:14px;left:14px;background:var(--dark);color:var(--on-dark);
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px}
.comp__tag--b{left:auto;right:14px;background:var(--gold)}
.comp__bar{position:absolute;inset-block:0;left:var(--x,50%);width:2px;background:var(--paper);
  box-shadow:0 0 0 1px rgba(0,0,0,.28);pointer-events:none}
.comp__bar::after{content:"";position:absolute;top:50%;left:50%;width:42px;height:42px;
  transform:translate(-50%,-50%);border:2px solid var(--paper);border-radius:50%;
  background:rgba(7,16,26,.4);backdrop-filter:blur(2px)}
.comp__in{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.comp__leg{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);margin-top:14px}
:is(.dark,.sec--dark) .comp__leg{color:var(--on-dark-muted)}

@media(prefers-reduced-motion:reduce){
  .tiss__r{opacity:1!important;transform:none!important;transition:none!important}
  .carte__i{animation:none}
}
.carte__mer{font-family:var(--f-mono);font-size:7.5px;fill:#6B7F92;letter-spacing:.08em;text-transform:uppercase}
.carte__fig svg{max-width:520px;margin-inline:auto}

/* ============================================================
   37. Pages locales
   ============================================================ */
.phead--court{padding:132px 0 56px}
@media(min-width:900px){.phead--court{padding:168px 0 76px}}
.phead--court .h-hero{font-size:clamp(2rem,4.6vw,3.6rem)}
.maillage{display:grid;gap:26px}
@media(min-width:560px){.maillage{grid-template-columns:1fr 1fr}}
.maillage ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.92rem}
.maillage a{color:var(--on-dark);text-decoration:none;opacity:.82;border-bottom:1px solid transparent}
.maillage a:hover{opacity:1;color:var(--gold-bright);border-color:currentColor}
.maillage h3{margin-bottom:12px;color:var(--on-dark)}
.maillage>p{grid-column:1/-1}

/* liste des arrondissements sur les pages mères */
.arrs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.arrs{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1100px){.arrs{grid-template-columns:repeat(5,1fr)}}
.arrs a{background:var(--paper);padding:15px 16px;text-decoration:none;color:var(--ink);
  font-size:.92rem;display:flex;align-items:center;justify-content:space-between;gap:10px;
  transition:background .2s var(--e),color .2s var(--e)}
.arrs a::after{content:"→";color:var(--gold);opacity:0;transform:translateX(-6px);
  transition:opacity .2s var(--e),transform .2s var(--e)}
.arrs a:hover{background:var(--gold);color:#fff}
.arrs a:hover::after{opacity:1;transform:none;color:#fff}
:is(.dark,.sec--dark) .arrs{background:var(--dark-line);border-color:var(--dark-line)}
:is(.dark,.sec--dark) .arrs a{background:var(--dark);color:var(--on-dark)}

/* ============================================================
   38. 3D — la scène commune
   ============================================================ */
.d3{perspective:1400px;perspective-origin:50% 45%}
.d3--loin{perspective:2200px}

/* --- 38a. Carrousel en profondeur (coverflow) --- */
.cover{position:relative;padding:26px 0 0;transform-style:preserve-3d;overflow:hidden}
.cover__piste{position:relative;height:clamp(360px,46vw,560px);transform-style:preserve-3d}
.cover__i{position:absolute;top:0;left:50%;width:clamp(200px,26vw,330px);
  margin-left:calc(clamp(200px,26vw,330px) / -2);
  transform-style:preserve-3d;transition:transform .85s var(--e-out),opacity .85s var(--e-out),filter .85s var(--e-out);
  cursor:pointer}
.cover__i img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;max-height:clamp(300px,38vw,460px);
  box-shadow:0 30px 60px rgba(7,16,26,.42)}
.cover__i figcaption{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-muted);margin-top:14px;text-align:center;
  opacity:0;transition:opacity .5s var(--e)}
.cover__i.is-actif figcaption{opacity:1}
:is(.dark,.sec--dark) .cover__i figcaption{color:var(--on-dark-muted)}
.cover__nav{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:26px}
.cover__b{width:46px;height:46px;background:none;border:1px solid var(--line-strong);
  color:inherit;font-size:1.1rem;line-height:1;transition:background .2s var(--e),color .2s var(--e),border-color .2s var(--e)}
.cover__b:hover{background:var(--gold);border-color:var(--gold);color:#fff}
:is(.dark,.sec--dark) .cover__b{border-color:var(--dark-line)}
.cover__pts{display:flex;gap:7px;margin-inline:14px}
.cover__pt{width:7px;height:7px;background:var(--line-strong);border:0;padding:0;
  transform:rotate(45deg);transition:background .25s var(--e),transform .25s var(--e)}
.cover__pt.is-on{background:var(--gold);transform:rotate(45deg) scale(1.5)}

/* --- 38b. La pile qui s'écarte --- */
.pile{position:relative;height:clamp(340px,46vw,560px);transform-style:preserve-3d;isolation:isolate;overflow:hidden}
.pile__i{position:absolute;inset:0 20% 14% 0;transform-style:preserve-3d;transform-origin:0% 100%;
  transition:transform 1.1s var(--e-out),opacity .8s var(--e-out)}
.pile__i img{width:100%;height:100%;object-fit:cover;box-shadow:0 24px 54px rgba(7,16,26,.4)}

/* --- 38c. Carte qui s'incline fortement --- */
.card3{transform-style:preserve-3d;transition:transform .6s var(--e-out),box-shadow .6s var(--e-out)}
.d3:hover .card3{box-shadow:0 40px 80px rgba(7,16,26,.28)}

/* --- 38d. Mur de photos en profondeur --- */
.mur{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);transform-style:preserve-3d}
@media(min-width:760px){.mur{grid-template-columns:repeat(4,1fr);gap:18px}}
.mur figure{overflow:hidden;transform-style:preserve-3d;transition:transform .7s var(--e-out)}
.mur img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .9s var(--e-out)}
.mur figure:hover img{transform:scale(1.08)}
.mur figure:nth-child(4n+1){transform:translateZ(-40px)}
.mur figure:nth-child(4n+2){transform:translateZ(10px)}
.mur figure:nth-child(4n+3){transform:translateZ(-70px)}
.mur figure:nth-child(4n+4){transform:translateZ(30px)}
@media(max-width:759px){.mur figure{transform:none !important}}

/* --- 38e. Bande photo pleine largeur --- */
.bande{position:relative;overflow:hidden;height:clamp(280px,42vw,540px)}
.bande img{position:absolute;inset:0;width:100%;height:118%;object-fit:cover;will-change:transform}
.bande__txt{position:absolute;inset:auto 0 0 0;padding:110px 0 40px;
  background:linear-gradient(to top,rgba(7,16,26,.94) 0%,rgba(7,16,26,.9) 46%,
    rgba(7,16,26,.55) 74%,rgba(7,16,26,0) 100%);
  color:var(--on-dark)}
.bande__txt p{text-shadow:0 2px 18px rgba(7,16,26,.7);font-family:var(--f-disp);font-stretch:78%;font-weight:600;text-transform:uppercase;
  font-size:clamp(1.3rem,3.4vw,2.6rem);line-height:1.05;max-width:20ch;margin:0}

/* ============================================================
   39. Scrollytelling des services
   ============================================================ */
.scroly{position:relative}
@media(min-width:1000px){
  .scroly{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
  .scroly__media{position:sticky;top:110px;height:min(78vh,660px);perspective:1600px}
}
.scroly__media{position:relative;overflow:hidden;transform-style:preserve-3d}
@media(max-width:999px){.scroly__media{height:58vh;margin-bottom:34px;position:sticky;top:88px;z-index:1}}
.scroly__ph{position:absolute;inset:0;opacity:0;transform:scale(1.08) rotateY(9deg) translateZ(-70px);
  transition:opacity .8s var(--e-out),transform 1.1s var(--e-out)}
.scroly__ph.is-on{opacity:1;transform:none}
.scroly__ph img{width:100%;height:100%;object-fit:cover}
.scroly__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,16,26,.5),transparent 55%)}
.scroly__n{position:absolute;left:18px;bottom:16px;z-index:2;color:var(--on-dark);
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;
  background:rgba(7,16,26,.82);padding:7px 11px}
.scroly__etapes{display:grid;gap:0}
.scroly__e{padding:14vh 0;opacity:.28;transition:opacity .5s var(--e)}
.scroly__e.is-on{opacity:1}
@media(max-width:999px){.scroly__e{padding:8vh 0}}
.scroly__e h3{font-family:var(--f-disp);font-stretch:75%;font-weight:600;text-transform:uppercase;
  font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.04;margin-bottom:16px}
.scroly__e p{font-size:1.06rem;color:var(--ink-muted);max-width:44ch}
:is(.dark,.sec--dark) .scroly__e p{color:var(--on-dark-muted)}
.scroly__e .more{margin-top:20px}

@media(prefers-reduced-motion:reduce){
  .cover__i,.pile__i,.scroly__ph,.mur figure{transition:none!important;transform:none!important}
  .scroly__ph{opacity:1;position:relative}
  .scroly__ph+.scroly__ph{display:none}
  .scroly__e{opacity:1}
  .bande img{height:100%}
}

/* ============================================================
   40. Transitions entre pages (View Transitions API)
   Navigation fluide là où le navigateur le supporte, navigation
   classique ailleurs. Aucun script, aucune librairie.
   ============================================================ */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-sortie .28s var(--e) both}
  ::view-transition-new(root){animation:vt-entree .42s var(--e-out) both}
}
@keyframes vt-sortie{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-entree{from{opacity:0;transform:translateY(14px)}}
.hdr{view-transition-name:entete}
.bar{view-transition-name:barre}
::view-transition-group(entete),::view-transition-group(barre){animation-duration:.01s}

/* ============================================================
   41. Grain — la texture qui manque aux fonds unis
   ============================================================ */
.dark::after,.sec--dark::after,.cta-band::after,.ftr::after,.hero__bg::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.2;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
  background-size:140px 140px}
.sec--dark,.cta-band,.ftr{position:relative}
.sec--dark>.wrap,.cta-band>.wrap,.ftr>.wrap,.dark>.wrap{position:relative;z-index:2}
.hero__bg::before{background-size:140px 140px}

/* ============================================================
   42. Séquence d'ouverture
   ============================================================ */
.voile{position:fixed;inset:0;z-index:200;background:var(--dark);pointer-events:none;
  transform-origin:top;transition:transform .8s cubic-bezier(.76,0,.24,1),opacity .5s .3s}
.voile.is-parti{transform:scaleY(0);opacity:0}
html:not(.js) .voile{display:none}
@media(prefers-reduced-motion:reduce){.voile{display:none}}

/* ============================================================
   43. Curseur sur les zones média
   ============================================================ */
.curseur{position:fixed;top:0;left:0;z-index:150;width:64px;height:64px;margin:-32px 0 0 -32px;
  border:1px solid rgba(248,238,228,.8);border-radius:50%;pointer-events:none;
  opacity:0;transform:scale(.5);transition:opacity .25s var(--e),transform .3s var(--e-out);
  mix-blend-mode:difference}
.curseur.is-on{opacity:1;transform:scale(1)}
.curseur span{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:.54rem;letter-spacing:.1em;color:#F8EEE4;text-transform:uppercase}
@media(pointer:coarse),(prefers-reduced-motion:reduce){.curseur{display:none}}

/* ============================================================
   44. Scrollytelling — transitions cinématographiques
   ============================================================ */
.scroly__ph{transform:scale(1.14) translateZ(-120px) rotateY(11deg);filter:brightness(.5)}
.scroly__ph.is-on{transform:none;filter:none;
  transition:opacity .9s var(--e-out),transform 1.25s var(--e-out),filter 1.1s var(--e-out)}
.scroly__ph.est-sorti{opacity:0;transform:scale(.94) translateZ(-40px) rotateY(-7deg);filter:brightness(.35)}
.scroly__barre{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(248,238,228,.22);z-index:3}
.scroly__barre i{display:block;height:100%;background:var(--gold-bright);width:0;
  transition:width .55s var(--e-out)}

/* ============================================================
   45. La boutique — 51 rue de Babylone
   ============================================================ */
.boutique-vue{position:relative;margin:44px 0 0;overflow:hidden}
.boutique-vue img{width:100%;height:clamp(300px,52vw,640px);object-fit:cover;
  object-position:center 46%;
  transform:scale(1.06);transition:transform 1.4s var(--e-out)}
.js .boutique-vue.is-in img{transform:scale(1)}
.boutique-vue figcaption{
  position:absolute;inset:auto 0 0;padding:82px var(--gut) 20px;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-dark);
  /* le trottoir est clair : le voile doit etre franc la ou le texte se pose */
  background:linear-gradient(to top,rgba(7,16,26,.95) 0%,rgba(7,16,26,.92) 52%,
    rgba(7,16,26,.5) 78%,rgba(7,16,26,0) 100%)}
@media(min-width:900px){.boutique-vue figcaption{padding-inline:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)))}}

.boutique-bas{margin-top:52px}

.boutique-trio{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.boutique-trio img{aspect-ratio:3/4;object-fit:cover;width:100%}
.boutique-trio picture:nth-child(3){grid-column:1 / -1}
.boutique-trio picture:nth-child(3) img{aspect-ratio:16/9}
.boutique-trio picture{display:block;overflow:hidden}
.boutique-trio picture img{transition:transform .6s var(--e)}
.boutique-trio picture:hover img{transform:scale(1.05)}

.boutique-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.boutique-actions .btn{flex:1 1 auto}

/* liste d'informations pratiques */
.pratique{margin:26px 0 20px;border-top:1px solid var(--line)}
.pratique>div{display:grid;grid-template-columns:8rem 1fr;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.pratique dt{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-muted);padding-top:2px}
.pratique dd{margin:0}
@media(max-width:559px){.pratique>div{grid-template-columns:1fr;gap:2px}}

/* lien vers la fiche Google, dans le pied */
.lien-google{display:inline-flex;align-items:center;gap:7px}
.lien-google::after{content:"\2197";font-size:.85em;line-height:1;opacity:.75}