/* ===================================================================
   DIMITRI JULES · système noir · ivoire · or · φ
   Type    : 17 → 27,5 → 44,5 → 72 → 116,5 → 188  (×1,618)
   Espace  : 8 · 13 · 21 · 34 · 55 · 89 · 144     (Fibonacci)
   Grilles : partages 61,8 / 38,2
   =================================================================== */

:root{
  --noir:#0B0A08;
  --noir-2:#141310;
  --ivoire:#F3EFE4;
  --ivoire-2:#EAE4D3;
  --blanc:#FFFFFF;
  --or:#B99441;
  --or-fonce:#8A6D2B;
  --or-clair:#E8D28F;
  --or-texte:#7D6327;
  --taupe:#6B6557;
  --metal:linear-gradient(105deg,#8A6D2B 0%,#C9A64F 34%,#F0E0A6 50%,#C9A64F 66%,#8A6D2B 100%);

  --trait-n:rgba(11,10,8,.16);
  --trait-i:rgba(243,239,228,.18);

  --t-0:clamp(15px,1.05vw,17px);
  --t-1:clamp(20px,1.7vw,27.5px);
  --t-2:clamp(28px,2.75vw,44.5px);
  --t-3:clamp(42px,4.45vw,72px);
  --t-4:clamp(58px,7.2vw,116.5px);
  --t-5:clamp(72px,11.6vw,188px);

  --s-3:21px; --s-4:34px; --s-5:55px;
  --s-6:clamp(55px,6.5vw,89px);
  --s-7:clamp(89px,10.5vw,144px);

  --gut:clamp(21px,5vw,89px);

  --display:'Bodoni Moda','Didot',serif;
  --body:'Manrope',system-ui,sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  background:var(--ivoire);
  color:var(--noir);
  font-family:var(--body);
  font-size:var(--t-0);
  font-weight:400;
  line-height:1.618;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--or); color:var(--noir)}
a{color:inherit}
:focus-visible{outline:2px solid var(--or-fonce); outline-offset:4px}
.dark :focus-visible,.nav :focus-visible,.appel :focus-visible,.maxime :focus-visible,.encadre :focus-visible,.foot :focus-visible,.pupitre :focus-visible{outline-color:var(--or-clair)}
img{display:block}
button{font:inherit; color:inherit}

.eyebrow{
  font-size:11px; font-weight:600;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--taupe);
}
.dark .eyebrow{color:var(--or)}
.eyebrow--fil{display:flex; align-items:center; gap:13px}
.eyebrow--fil::after{content:''; flex:0 0 55px; height:1px; background:var(--or); opacity:.7}

/* ---------- apparitions ---------- */
.rv{opacity:0; transform:translateY(13px)}
.rv.is-in{opacity:1; transform:none; transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none} }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px var(--gut);
  background:rgba(11,10,8,.92);
  backdrop-filter:blur(12px);
  color:var(--ivoire);
  border-bottom:1px solid var(--trait-i);
}
.nav__name{
  font-family:var(--display);
  font-size:15px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none;
}
.nav__name i{font-style:italic; font-weight:500; color:var(--or-clair)}
.nav__links{display:flex; gap:clamp(13px,2.4vw,34px)}
.nav__links a{
  font-size:10.5px; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  text-decoration:none; color:rgba(243,239,228,.66);
  padding-bottom:3px; border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav__links a:hover{color:var(--or-clair); border-color:var(--or)}
.nav__links a[aria-current="page"]{color:var(--or-clair); border-color:var(--or)}

/* ---------- hero (accueil) ---------- */
.hero{
  background:
    radial-gradient(120% 90% at 78% 12%, #1B1810 0%, transparent 55%),
    var(--noir);
  color:var(--ivoire);
  padding:var(--s-6) var(--gut);
  overflow:hidden;
}
.hero__grid{
  display:grid;
  grid-template-columns:1.618fr 1fr;
  gap:clamp(21px,4vw,55px);
  align-items:end;
}
.hero__title{
  font-family:var(--display);
  font-weight:500;
  font-size:var(--t-5);
  line-height:.92;
  letter-spacing:.005em;
}
.hero__title .nom{
  display:block;
  font-style:italic; font-weight:600;
  background:var(--metal);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.hero__tag{
  margin-top:var(--s-4);
  font-size:var(--t-1);
  font-family:var(--display); font-style:italic; font-weight:400;
  color:rgba(243,239,228,.85);
  max-width:34ch; line-height:1.35;
}
.hero__meta{margin-top:var(--s-4); display:flex; flex-wrap:wrap; gap:10px 34px}
.hero__meta .eyebrow{color:rgba(243,239,228,.66)}

.mic-col{display:flex; justify-content:center; align-items:flex-end}
.mic{width:min(100%,232px); height:auto; overflow:visible}
.mic .tr{fill:none; stroke:url(#dorure); stroke-width:1.1; stroke-linecap:round}
.mic .maille{stroke:var(--or); stroke-width:.55; opacity:0}
.mic .lueur{fill:url(#dorure); opacity:0}
@media (prefers-reduced-motion:no-preference){
  .mic .tr{
    stroke-dasharray:1; stroke-dashoffset:1;
    animation:tracer 1.4s cubic-bezier(.4,0,.2,1) forwards;
    animation-delay:var(--d,0s);
  }
  .mic .maille{animation:paraitre .9s ease forwards 1.5s}
  .mic .lueur{animation:paraitre .9s ease forwards 1.7s}
}
@media (prefers-reduced-motion:reduce){
  .mic .tr{stroke-dasharray:none}
  .mic .maille{opacity:.55}
  .mic .lueur{opacity:1}
}
@keyframes tracer{to{stroke-dashoffset:0}}
@keyframes paraitre{to{opacity:.55}}

/* ---------- en-tête de page intérieure ---------- */
.entete{
  padding:var(--s-6) var(--gut) var(--s-5);
  border-bottom:1px solid var(--trait-n);
}
.entete__title{
  font-family:var(--display); font-weight:500;
  font-size:var(--t-4); line-height:.98; letter-spacing:.005em;
  margin-top:13px;
}
.entete__title i{font-style:italic; color:var(--or-fonce)}
.entete__note{margin-top:var(--s-3); max-width:56ch; color:var(--taupe)}
.entete--phi{
  display:grid; grid-template-columns:1.618fr 1fr;
  gap:clamp(21px,4vw,55px); align-items:center;
}

/* ---------- lecteur ---------- */
.pupitre{margin-top:var(--s-6); padding-top:var(--s-4); border-top:1px solid var(--trait-i)}
.pupitre__head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:var(--s-3)}
.pupitre__label{font-family:var(--display); font-weight:600; font-size:var(--t-1); letter-spacing:.02em}
.rig{display:flex; align-items:center; gap:clamp(13px,2vw,21px)}

.play{
  flex:none;
  width:clamp(55px,5.4vw,72px); height:clamp(55px,5.4vw,72px);
  border-radius:50%;
  border:1px solid var(--or);
  background:transparent; cursor:pointer;
  display:grid; place-items:center;
  transition:background .22s, transform .22s, box-shadow .22s;
}
.play svg{width:36%; height:36%; fill:var(--or-clair); transition:fill .22s}
.play:hover{background:var(--or); transform:scale(1.05); box-shadow:0 0 34px rgba(185,148,65,.35)}
.play:hover svg{fill:var(--noir)}
.play.is-on{background:var(--or)}
.play.is-on svg{fill:var(--noir)}

.wave{
  flex:1; position:relative;
  display:flex; align-items:center; gap:2px;
  height:clamp(64px,8vw,110px);
  cursor:pointer; touch-action:none;
}
.wave__bar{
  flex:1; min-width:1px;
  background:rgba(243,239,228,.2);
  transform:scaleY(var(--h,.1));
  transition:background .12s;
}
.wave.is-armed .wave__bar{
  animation:lever .5s cubic-bezier(.2,.8,.2,1) backwards;
  animation-delay:calc(var(--i) * 3.5ms);
}
@keyframes lever{from{transform:scaleY(.02)}}
.wave__bar.is-past{background:var(--or)}
.wave:hover .wave__bar{background:rgba(243,239,228,.34)}
.wave:hover .wave__bar.is-past{background:var(--or-clair)}

.time{
  flex:none;
  font-size:11px; font-weight:500; letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
  color:rgba(243,239,228,.55);
  min-width:9ch; text-align:right;
}

/* ---------- bande dorée ---------- */
.bande{
  overflow:hidden;
  background:var(--metal);
  color:var(--noir);
  border-block:1px solid rgba(11,10,8,.3);
}
.bande__rail{display:flex; width:max-content}
@media (prefers-reduced-motion:no-preference){
  .bande__rail{animation:defiler 55s linear infinite}
  .bande:hover .bande__rail{animation-play-state:paused}
}
@keyframes defiler{to{transform:translateX(-50%)}}
.bande__lot{display:flex; align-items:center}
.bande__lot span{
  display:flex; align-items:center; gap:21px;
  padding:11px 21px;
  font-size:10.5px; font-weight:700; letter-spacing:.34em; text-transform:uppercase;
  white-space:nowrap;
}
.bande__lot i{font-family:var(--display); font-style:italic; font-size:14px; font-weight:600; text-transform:none; letter-spacing:0}

/* ---------- sections ---------- */
.section{padding:var(--s-7) var(--gut)}
.section + .section{border-top:1px solid var(--trait-n)}
.section__head{margin-bottom:var(--s-5)}
.section__title{
  font-family:var(--display); font-weight:500;
  font-size:var(--t-3); line-height:.98; letter-spacing:.005em;
  margin-top:13px;
}
.section__title i{font-style:italic; color:var(--or-fonce)}
.section__note{margin-top:var(--s-3); max-width:52ch; color:var(--taupe)}

/* ---------- portes (accueil) ---------- */
.portes{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:13px;
}
.porte{
  display:flex; flex-direction:column; gap:var(--s-4);
  padding:var(--s-5) var(--s-4);
  border:1px solid var(--trait-n);
  text-decoration:none;
  background:transparent;
  transition:background .35s, color .35s, border-color .35s;
}
.porte__no{font-size:11px; font-weight:600; letter-spacing:.2em; color:var(--or-fonce)}
.porte__t{
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:var(--t-2); line-height:1;
}
.porte__d{color:var(--taupe); font-size:.95em; max-width:30ch; transition:color .35s}
.porte__go{
  margin-top:auto;
  font-size:10.5px; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--or-fonce);
  display:flex; align-items:center; gap:13px;
}
.porte__go::after{content:'→'; font-size:14px; transition:transform .35s}
.porte:hover{background:var(--noir); color:var(--ivoire); border-color:var(--noir)}
.porte:hover .porte__d{color:rgba(243,239,228,.6)}
.porte:hover .porte__go{color:var(--or-clair)}
.porte:hover .porte__go::after{transform:translateX(8px)}

/* ---------- démos ---------- */
/* chaque démo porte ses deux traits, superposés d'un pixel : la liste garde sa bordure basse même si la dernière démo est masquée */
.demo{padding:var(--s-4) 0; border-top:1px solid var(--trait-n); border-bottom:1px solid var(--trait-n); margin-bottom:-1px}
.demo__head{display:flex; align-items:baseline; justify-content:space-between; gap:13px; margin-bottom:var(--s-3)}
.demo__name{font-family:var(--display); font-weight:600; font-style:italic; font-size:var(--t-1)}
.demo .wave{height:clamp(42px,4.6vw,64px)}
.demo .wave__bar{background:#D9D2BE}
.demo .wave:hover .wave__bar{background:#C8BFA4}
.demo .wave__bar.is-past{background:var(--or)}
.demo .wave:hover .wave__bar.is-past{background:var(--or-fonce)}
.demo .play{width:clamp(44px,4.1vw,55px); height:clamp(44px,4.1vw,55px); border-color:var(--noir)}
.demo .play svg{fill:var(--noir)}
.demo .play:hover{background:var(--noir); box-shadow:none}
.demo .play:hover svg{fill:var(--or-clair)}
.demo .play.is-on{background:var(--noir); border-color:var(--noir)}
.demo .play.is-on svg{fill:var(--or-clair)}
.demo .time{color:var(--taupe)}

.dl{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:var(--s-3);
  font-size:10.5px; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  text-decoration:none; color:var(--taupe);
  border-bottom:1px solid var(--trait-n); padding-bottom:3px;
  transition:color .2s, border-color .2s;
}
.dl:hover{color:var(--or-fonce); border-color:var(--or)}
.demo__liens{display:flex; flex-wrap:wrap; gap:8px 34px}
.dark .dl{color:var(--or-clair); border-color:var(--trait-i)}
.dark .dl:hover{color:var(--ivoire); border-color:var(--or)}

/* ---------- jeu ---------- */
.jeu{
  display:grid; grid-template-columns:1.618fr 1fr;
  gap:clamp(34px,5vw,89px); align-items:start;
}
.shots{display:grid; grid-template-columns:1.618fr 1fr; gap:13px}
.shot{position:relative; overflow:hidden; background:var(--ivoire-2)}
.shot--l{grid-row:span 2; aspect-ratio:1/1.272}
.shot--s{aspect-ratio:1/1.05}
.shot img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  transition:filter .6s, transform .8s cubic-bezier(.2,.7,.2,1);
}
.shot:hover img{filter:grayscale(0) contrast(1); transform:scale(1.025)}
.shot__cap{
  position:absolute; left:13px; bottom:11px;
  font-size:9.5px; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--blanc); text-shadow:0 1px 8px rgba(0,0,0,.7);
}
.bio p{max-width:44ch}
.bio p + p{margin-top:1em}
.bio .lettrine::first-letter{
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:3.2em; float:left; line-height:.8;
  padding:4px 10px 0 0; color:var(--or-fonce);
}

/* ---------- listes clefs (credits, fiche) ---------- */
.credits{margin-top:var(--s-5)}
.credit{
  display:grid;
  grid-template-columns:6.5ch minmax(0,1.618fr) minmax(0,1fr);
  gap:13px; padding:13px 0;
  border-top:1px solid var(--trait-n);
  align-items:baseline;
}
.credit:last-child{border-bottom:1px solid var(--trait-n)}
.credit__yr{font-size:11px; font-weight:500; letter-spacing:.08em; color:var(--taupe); font-variant-numeric:tabular-nums}
.credit__t{font-family:var(--display); font-weight:600; font-size:1.06em}
.credit__r{font-size:.88em; color:var(--taupe)}

.fiche{max-width:610px}
.fiche__row{
  display:grid; grid-template-columns:1fr 1.618fr;
  gap:13px; padding:11px 0;
  border-top:1px solid var(--trait-n);
  align-items:baseline;
}
.fiche__row:last-child{border-bottom:1px solid var(--trait-n)}
.fiche__k{font-size:10.5px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--taupe)}
.fiche__v{font-weight:500}

/* ---------- accordéons (FAQ / services repliés) ---------- */
.serv{border-top:1px solid var(--trait-n)}
.serv:last-of-type{border-bottom:1px solid var(--trait-n)}
.serv__btn{
  width:100%; background:none; border:0; cursor:pointer;
  display:grid; grid-template-columns:6.5ch minmax(0,1fr) 34px;
  align-items:center; gap:13px;
  padding:var(--s-4) 0;
  text-align:left;
}
.serv__btn--simple{grid-template-columns:minmax(0,1fr) 34px}
.serv__no{font-size:11px; font-weight:600; letter-spacing:.2em; color:var(--or-fonce); font-variant-numeric:tabular-nums}
.serv__t{
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:var(--t-1); line-height:1.1;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), color .3s;
}
.serv__sub{margin-top:5px; color:var(--taupe); font-size:.92em; display:block}
.serv__btn:hover .serv__t{transform:translateX(13px); color:var(--or-fonce)}
.serv__x{
  position:relative; width:21px; height:21px; justify-self:end;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.serv__x::before,.serv__x::after{
  content:''; position:absolute; background:var(--or); left:0; top:10px;
  width:21px; height:1.2px;
}
.serv__x::after{transform:rotate(90deg)}
.serv.open .serv__x{transform:rotate(45deg)}
.serv__panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1)}
.serv.open .serv__panel{grid-template-rows:1fr}
.serv__inner{overflow:hidden}
.serv__body{
  display:grid; grid-template-columns:1.618fr 1fr;
  gap:clamp(21px,4vw,55px);
  padding:0 0 var(--s-4) calc(6.5ch + 13px);
}
.serv__body--simple{padding-left:0; grid-template-columns:1fr; max-width:56ch}
.serv__body p{max-width:46ch; color:#4A463C}
@media (prefers-reduced-motion:reduce){
  .serv__panel{transition:none}
  .serv__btn:hover .serv__t{transform:none}
}

/* ---------- blocs services ouverts (page studio) ---------- */
.bloc{
  display:grid; grid-template-columns:6.5ch 1.618fr 1fr;
  gap:clamp(21px,3.5vw,55px);
  padding:var(--s-5) 0;
  border-top:1px solid var(--trait-n);
}
.bloc:last-of-type{border-bottom:1px solid var(--trait-n)}
.bloc__no{font-size:11px; font-weight:600; letter-spacing:.2em; color:var(--or-fonce); padding-top:8px}
.bloc__t{
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:var(--t-2); line-height:1.05;
}
.bloc__d{margin-top:var(--s-3); max-width:46ch; color:#4A463C}
.livrables{list-style:none}
.livrables li{
  padding:8px 0 8px 21px; position:relative;
  border-top:1px solid var(--trait-n);
  font-size:.92em;
}
.livrables li:first-child{border-top:0}
.livrables li::before{content:'—'; position:absolute; left:0; color:var(--or)}

/* ---------- méthode ---------- */
.etapes{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(21px,3vw,34px)}
.etape{padding-top:var(--s-3); border-top:1px solid var(--or)}
.etape__no{
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:var(--t-2);
  background:var(--metal);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.etape__t{font-family:var(--display); font-weight:600; font-size:var(--t-1); margin-top:8px}
.etape__d{margin-top:8px; color:var(--taupe); font-size:.95em}

/* ---------- spirale φ ---------- */
.spirale{width:min(100%,340px); justify-self:end; overflow:visible}
.spirale .cadre{fill:none; stroke:var(--trait-n); stroke-width:1}
.spirale .arc{fill:none; stroke:url(#dorure); stroke-width:1.2; stroke-linecap:round}
@media (prefers-reduced-motion:no-preference){
  .spirale .arc{stroke-dasharray:1; stroke-dashoffset:1}
  .spirale.is-in .arc{animation:tracer 1.8s cubic-bezier(.4,0,.2,1) forwards; animation-delay:var(--d,0s)}
}
.spirale .phi{font-family:var(--display); font-style:italic; font-size:26px; fill:var(--or-fonce)}

/* ---------- appel (bandeau contact) ---------- */
.appel{
  background:var(--noir); color:var(--ivoire);
  padding:var(--s-6) var(--gut);
}
.appel__t{
  font-family:var(--display); font-style:italic; font-weight:500;
  font-size:var(--t-2); max-width:26ch; line-height:1.15;
}
.appel__go{
  display:inline-flex; align-items:center; gap:13px;
  margin-top:var(--s-4);
  font-size:11px; font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  text-decoration:none; color:var(--or-clair);
  border-bottom:1px solid rgba(185,148,65,.5); padding-bottom:5px;
  transition:border-color .25s, color .25s;
}
.appel__go::after{content:'→'; font-size:14px; transition:transform .3s}
.appel__go:hover{color:var(--blanc); border-color:var(--or-clair)}
.appel__go:hover::after{transform:translateX(8px)}

/* ---------- contact ---------- */
.dark{background:var(--noir); color:var(--ivoire)}
.section.dark{border-top:none}
.mailto{
  display:inline-block; margin:var(--s-3) 0 var(--s-5);
  font-family:var(--display); font-style:italic; font-weight:500;
  font-size:var(--t-3);
  line-height:1.05; letter-spacing:.01em;
  text-decoration:none;
  background:var(--metal);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  border-bottom:1px solid rgba(185,148,65,.4);
  padding-bottom:8px;
  transition:border-color .25s;
  overflow-wrap:anywhere;
}
.mailto:hover{border-color:var(--or-clair)}
.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--s-4);
  padding-top:var(--s-4);
  border-top:1px solid var(--trait-i);
}
.fact__k{font-size:10px; font-weight:600; letter-spacing:.34em; text-transform:uppercase; color:var(--or); margin-bottom:8px}
.fact__v{color:rgba(243,239,228,.82); font-weight:300}
.fact__v a{text-decoration:none; border-bottom:1px solid rgba(243,239,228,.3)}
.fact__v a:hover{border-color:var(--or)}

.brief{margin-top:var(--s-6); padding-top:var(--s-4); border-top:1px solid var(--trait-i); max-width:610px}
.brief__t{font-family:var(--display); font-style:italic; font-weight:600; font-size:var(--t-1)}
.brief ol{list-style:none; margin-top:var(--s-3); counter-reset:b}
.brief li{
  counter-increment:b;
  padding:11px 0 11px 55px; position:relative;
  border-top:1px solid var(--trait-i);
  color:rgba(243,239,228,.82); font-weight:300;
}
.brief li::before{
  content:counter(b,decimal-leading-zero);
  position:absolute; left:0;
  font-size:11px; font-weight:600; letter-spacing:.2em;
  color:var(--or); font-variant-numeric:tabular-nums;
}

/* ---------- pied ---------- */
.foot{
  padding:var(--s-3) var(--gut) var(--s-4);
  background:var(--noir); color:rgba(243,239,228,.6);
  font-size:9.5px; font-weight:500; letter-spacing:.28em; text-transform:uppercase;
  display:flex; justify-content:space-between; gap:13px; flex-wrap:wrap;
  border-top:1px solid var(--trait-i);
}
.foot i{font-style:normal; color:var(--or)}
.foot a{text-decoration:none}
.foot a:hover{color:var(--or-clair)}

/* ---------- 404 ---------- */
.perdu{
  min-height:72vh; display:grid; place-content:center; text-align:center;
  padding:var(--s-7) var(--gut);
}
.perdu .phi-g{
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:var(--t-5); line-height:1;
  background:var(--metal);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .mic-col{order:-1; justify-content:flex-end}
  .mic{width:clamp(96px,22vw,150px)}
  .jeu{grid-template-columns:1fr}
  .entete--phi{grid-template-columns:1fr}
  .spirale{display:none}
  .portes{grid-template-columns:1fr}
  .bloc{grid-template-columns:1fr}
  .bloc__no{padding-top:0}
  .etapes{grid-template-columns:1fr}
  .serv__body{grid-template-columns:1fr; padding-left:0}
}
@media (max-width:560px){
  .demo__head{flex-direction:column; gap:5px}
  .time{min-width:auto}
  .wave{gap:1px}
  .credit{grid-template-columns:5.5ch 1fr}
  .credit__r{grid-column:2}
  .fiche__row{grid-template-columns:1fr}
  .nav__links{gap:13px}
  .nav__links a{letter-spacing:.18em}
  .serv__btn{grid-template-columns:1fr 34px}
  .serv__no{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wave.is-armed .wave__bar{animation:none}
  .shot img,.play{transition:none}
}

/* ===================================================================
   COUCHE STOÏQUE : chiffres fantômes, placeholders, maximes, œuvres
   =================================================================== */

/* chiffres romains fantômes derrière les titres */
.section, .entete{position:relative; z-index:0; overflow:clip}
.ghost{
  position:absolute; right:var(--gut); top:0; z-index:-1;
  font-family:var(--display); font-weight:500; line-height:.8;
  font-size:clamp(144px,21vw,340px);
  color:var(--ivoire-2);
  pointer-events:none; user-select:none;
}
.dark .ghost{color:#15130D}
@media (max-width:900px){ .ghost{font-size:clamp(96px,26vw,180px)} }

/* placeholders visuels : à remplacer par de vraies images */
.ph{
  position:relative;
  display:grid; place-content:center; gap:13px; text-align:center;
  background:var(--ivoire-2);
  background-image:repeating-linear-gradient(45deg, rgba(11,10,8,.045) 0 1px, transparent 1px 13px);
  overflow:hidden;
}
.ph::before{
  content:''; position:absolute; inset:13px;
  border:1px solid rgba(185,148,65,.4);
  pointer-events:none;
}
.ph__mark{width:8px; height:8px; background:var(--or); transform:rotate(45deg); margin:0 auto}
.ph__cap{
  font-size:9.5px; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--taupe); padding:0 21px; max-width:34ch;
}
.ph__play{
  width:55px; height:55px; margin:0 auto;
  border:1px solid var(--or); border-radius:50%;
  display:grid; place-items:center;
}
.ph__play::before{
  content:''; margin-left:3px;
  border-left:12px solid var(--or);
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
}
.ph--noir{
  background:var(--noir-2);
  background-image:repeating-linear-gradient(45deg, rgba(243,239,228,.05) 0 1px, transparent 1px 13px);
}
.ph--noir .ph__cap{color:rgba(243,239,228,.5)}
.ph--noir::before{border-color:rgba(185,148,65,.3)}
/* rapports d'image */
.ph--45{aspect-ratio:4/5}
.ph--phi{aspect-ratio:1/1.272}
.ph--sq{aspect-ratio:1/1.05}
.ph--32{aspect-ratio:3/2}
.ph--169{aspect-ratio:16/9}

/* bande matière (accueil) et œuvres (studio) */
.matiere{display:grid; grid-template-columns:1.618fr 1fr 1fr; gap:13px}
.oeuvres{display:grid; grid-template-columns:repeat(4,1fr); gap:13px}
.duo{display:grid; grid-template-columns:1.618fr 1fr; gap:clamp(34px,5vw,89px); align-items:start}

/* maxime : pierre gravée */
.maxime{
  background:var(--noir); color:var(--ivoire);
  padding:var(--s-7) var(--gut);
  text-align:center;
}
.maxime__fil{display:block; width:55px; height:1px; background:var(--or); margin:0 auto var(--s-4)}
.maxime p{
  font-family:var(--display); font-style:italic; font-weight:500;
  font-size:var(--t-2); line-height:1.15;
  max-width:21ch; margin:0 auto;
}
.maxime .eyebrow{margin-top:var(--s-4); color:rgba(243,239,228,.62)}

@media (max-width:900px){
  .matiere{grid-template-columns:1fr}
  .oeuvres{grid-template-columns:1fr 1fr}
  .duo{grid-template-columns:1fr}
}
@media (max-width:560px){
  .oeuvres{grid-template-columns:1fr}
}

/* ===================================================================
   V3 (24 oct. 2026) : la v1 restaurée, corrigée et complétée :
   commande en ligne, page démo client, menu mobile, lecteurs réels
   =================================================================== */

/* l’onde : les barres avaient une hauteur nulle (flex + align-items:center) */
.wave__bar{height:100%; transform-origin:center}

/* « Maxime de studio » héritait du corps de la maxime */
.maxime p.eyebrow{
  font-family:var(--body); font-style:normal; font-size:11px; font-weight:600;
  letter-spacing:.34em; max-width:none;
}

/* bouton d’or : l’action principale (commander) */
.btn-or{
  display:inline-flex; align-items:center; justify-content:center; gap:13px;
  min-height:46px; padding:13px 26px;
  background:var(--metal); background-size:200% 100%; background-position:0 0;
  color:var(--noir); text-decoration:none; border:0; cursor:pointer;
  font-family:var(--body); font-size:11px; font-weight:700; letter-spacing:.3em; text-transform:uppercase;
  transition:background-position .5s ease, box-shadow .3s;
}
.btn-or:hover{background-position:100% 0; box-shadow:0 0 34px rgba(185,148,65,.35)}
.btn-or[disabled]{opacity:.55; cursor:not-allowed}
.btn-ligne{
  display:inline-flex; align-items:center; gap:13px; min-height:46px; padding:13px 0;
  font-size:11px; font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  text-decoration:none; color:var(--or-clair); border-bottom:1px solid var(--or);
}
.btn-ligne:hover{color:var(--blanc); border-color:var(--or-clair)}
.btn-ligne::after{content:'→'; font-size:14px; transition:transform .3s}
.btn-ligne:hover::after{transform:translateX(8px)}
.btn-ligne--fonce{color:var(--or-fonce); border-color:rgba(138,109,43,.45)}
.btn-ligne--fonce:hover{color:var(--noir); border-color:var(--or)}
.actions{display:flex; flex-wrap:wrap; align-items:center; gap:21px 34px; margin-top:var(--s-4)}

/* nav : la commande en or, menu sur mobile */
.nav__links{align-items:center}
.nav__links .nav__cmd{color:var(--noir); background:var(--metal); padding:8px 14px; border:0}
.nav__links .nav__cmd:hover,.nav__links .nav__cmd[aria-current="page"]{color:var(--noir); box-shadow:0 0 21px rgba(185,148,65,.4)}
.nav__menu{display:none; background:none; border:1px solid var(--trait-i); color:var(--ivoire);
  font-size:10.5px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; padding:9px 13px; cursor:pointer}
@media (max-width:760px){
  .nav{flex-wrap:wrap}
  .nav__menu{display:inline-block}
  .nav__links{display:none; width:100%; flex-direction:column; align-items:stretch; gap:0; padding:8px 0 13px}
  .nav.ouvert .nav__links{display:flex}
  .nav__links a{padding:13px 0; font-size:12px; border-bottom:1px solid var(--trait-i)}
  .nav__links .nav__cmd{margin-top:13px; text-align:center; padding:13px}
}

/* héros : sur mobile, le nom d’abord, le micro discret dans le coin */
@media (max-width:900px){
  .hero{position:relative}
  .mic-col{position:absolute; right:var(--gut); top:var(--s-5); order:0}
  .hero .eyebrow--fil{padding-right:calc(clamp(64px,16vw,96px) + 21px)}
  .hero .eyebrow--fil::after{display:none}
  .mic{width:clamp(64px,16vw,96px)}
}

/* lecteur absent : la démo n’est pas encore en ligne */
.rig.absent .wave,.rig.absent .play{opacity:.4}
.rig.absent .wave{pointer-events:none}
.rig.absent .play{cursor:not-allowed; border-style:dashed}
.rig.absent .play:hover{background:transparent; transform:none; box-shadow:none}
.note{margin-top:13px; font-size:12.5px; color:rgba(243,239,228,.55); max-width:60ch}
.demo .note{color:var(--taupe)}

/* les trois temps de la commande (accueil) */
.temps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(21px,3vw,34px)}
@media (max-width:900px){ .temps{grid-template-columns:1fr} }

/* ---------- formulaire de commande ---------- */
.commande{display:grid; grid-template-columns:1.618fr 1fr; gap:clamp(34px,5vw,89px); align-items:start}
.form{display:grid; gap:var(--s-5)}
.form fieldset{border:0; display:grid; gap:var(--s-3); min-width:0}
.form legend{font-family:var(--display); font-style:italic; font-weight:600; font-size:var(--t-2); margin-bottom:var(--s-3); padding:0}
.form legend .no{font-family:var(--body); font-style:normal; font-size:11px; font-weight:600; letter-spacing:.2em; color:var(--or-fonce); margin-right:13px; vertical-align:middle}
.champs{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3) var(--s-4)}
.champ{display:grid; gap:8px; align-content:start; min-width:0}
.champ label,.champ .etiq{font-size:10.5px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--taupe)}
.champ .aide{font-size:12.5px; color:var(--taupe)}
.champ input:not([type=radio]):not([type=checkbox]),.champ select{
  width:100%; min-height:46px; padding:12px 0;
  background:transparent; border:0; border-bottom:1px solid rgba(11,10,8,.28); border-radius:0;
  font-family:var(--body); font-size:16px; color:var(--noir); transition:border-color .2s;
}
.champ textarea{
  width:100%; padding:12px 13px; border:1px solid rgba(11,10,8,.2); background:rgba(255,255,255,.35);
  font-family:var(--body); font-size:16px; color:var(--noir); resize:vertical; min-height:110px; line-height:1.6;
}
.champ textarea.script{min-height:240px; font-family:var(--display); font-size:19px; line-height:1.55; font-style:italic}
.champ input:not([type=radio]):not([type=checkbox]):focus,.champ select:focus,.champ textarea:focus{outline:none; border-color:var(--or-fonce)}
.champ [aria-invalid="true"]{border-color:#9B2C2C}
.choix{display:flex; flex-wrap:wrap; gap:8px}
.choix label{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  padding:10px 16px; border:1px solid rgba(11,10,8,.2);
  font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--noir);
  transition:border-color .2s, background .2s;
}
.choix input{accent-color:var(--or-fonce); width:15px; height:15px; margin:0}
.choix label:has(input:checked){border-color:var(--or); background:rgba(185,148,65,.12)}
.compteur{display:flex; gap:var(--s-4); font-size:12.5px; color:var(--taupe); font-variant-numeric:tabular-nums}
.compteur b{color:var(--noir); font-weight:600}
.accord{display:flex; gap:13px; align-items:flex-start; padding:var(--s-3); border:1px solid rgba(185,148,65,.5); cursor:pointer; background:rgba(255,255,255,.3)}
.accord input{margin-top:5px; width:17px; height:17px; flex:none; accent-color:var(--or-fonce)}
.accord span{font-size:15px; color:#4A463C}
.pot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.alerte{padding:13px 16px; border-left:2px solid #9B2C2C; color:#7A1F1F; background:rgba(155,44,44,.06); font-size:15px}
.alerte:empty{display:none}
.encadre{position:sticky; top:89px; background:var(--noir); color:var(--ivoire); padding:var(--s-5) var(--s-4)}
.encadre .eyebrow{color:var(--or)}
.encadre h2{font-family:var(--display); font-style:italic; font-weight:500; font-size:var(--t-2); line-height:1.1; margin-top:13px}
.encadre ol{list-style:none; counter-reset:t; margin-top:var(--s-4); display:grid; gap:var(--s-3)}
.encadre li{counter-increment:t; display:grid; grid-template-columns:44px 1fr; gap:8px; color:rgba(243,239,228,.78); font-weight:300; font-size:15px}
.encadre li::before{
  content:counter(t,decimal-leading-zero);
  font-family:var(--display); font-style:italic; font-weight:600; font-size:22px; line-height:1.1;
  background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.encadre .petit{margin-top:var(--s-4); padding-top:var(--s-3); border-top:1px solid var(--trait-i); font-size:13px; color:rgba(243,239,228,.55)}
@media (max-width:900px){ .commande{grid-template-columns:1fr} .encadre{position:static} .champs{grid-template-columns:1fr} }
.merci .ref{font-family:var(--display); font-style:italic; font-size:var(--t-2); color:var(--or-fonce)}

/* ---------- page démo du client ---------- */
.devis{margin-top:var(--s-3)}
.devis div{display:flex; justify-content:space-between; gap:var(--s-3); padding:11px 0; border-top:1px solid var(--trait-i); font-weight:300}
.devis .total{border-top:1px solid var(--or); border-bottom:1px solid var(--or); font-weight:600}
.devis .total span:last-child{font-family:var(--display); font-style:italic; font-size:var(--t-1); color:var(--or-clair)}
.demo-client audio{width:100%; margin-top:var(--s-3)}
.demo-client textarea{width:100%; min-height:96px; padding:12px 13px; background:transparent; border:1px solid var(--trait-i); color:var(--ivoire); font-family:var(--body); font-size:15px}
.demo-client textarea:focus{outline:none; border-color:var(--or)}
.demo-client label{font-size:10.5px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--or); display:block; margin:var(--s-4) 0 8px}
.petit-clair{font-size:13px; color:rgba(243,239,228,.55); margin-top:13px; max-width:58ch}

/* --- corrections de la critique (24 oct.) --- */
.wave{min-width:0}
@media (max-width:560px){ .wave__bar{min-width:0} .rig{min-width:0; max-width:100%} }
.note,.fact__v{text-wrap:pretty}
.note a{color:var(--or-clair); text-decoration:none; border-bottom:1px solid rgba(185,148,65,.6); padding-bottom:1px}
.note a:hover{border-bottom-color:var(--or-clair)}
.porte__no,.porte__go,.serv__no,.bloc__no,.form legend .no,.btn-ligne--fonce{color:var(--or-texte)}
.champ input:not([type=radio]):not([type=checkbox]):focus,.champ select:focus,.champ textarea:focus{box-shadow:0 1px 0 var(--or-fonce)}
.choix input:focus,.accord input:focus{outline:none}
.choix label:has(input:focus-visible),.accord:has(input:focus-visible){outline:1.5px solid var(--or-fonce); outline-offset:2px}
.dl{position:relative}
.dl::before{content:""; position:absolute; left:0; right:0; top:-12px; bottom:-12px}
.req{color:var(--or-texte); margin-left:4px}

/* accueil : deux démos en un clic */
.piste + .piste{margin-top:var(--s-4)}
.piste__nom{font-family:var(--display); font-style:italic; font-weight:600; font-size:var(--t-1); color:var(--or-clair); margin-bottom:8px}
.piste__nom span{font-family:var(--body); font-style:normal; font-weight:500; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(243,239,228,.55)}
.piste__nom .sep{font-weight:inherit}
@media (max-width:560px){ .piste__nom span{display:block; margin-top:4px} .piste__nom span .sep{display:none} }
@media (max-width:560px){ .pupitre__head > .eyebrow{display:none} }

/* jeu : deux portraits, recadrage v1, grand à gauche (1/1,272), haut à droite sur la même hauteur */
.shot--haut{grid-row:span 2}
.shot--haut img{position:absolute; inset:0}
.shot--l img{aspect-ratio:auto}
@media (max-width:560px){ .shots{grid-template-columns:1.618fr 1fr} }

/* monogramme DJ du héros (approuvé le 25 oct. 2026), remplace le dessin du micro */
.dj-hero{width:min(100%,400px);height:auto}
@media (max-width:900px){
  .dj-hero{width:clamp(130px,34vw,220px)}
}
@media (max-width:560px){
  .hero .hero__title{font-size:clamp(44px,14vw,56px)}
  .dj-hero{width:clamp(112px,33vw,136px)}
  .hero .mic-col{top:178px}
}

/* sélecteur de langue FR | EN : toujours visible, à côté du menu */
.nav__lang{margin-left:auto; font-size:10.5px; font-weight:600; letter-spacing:.22em; text-decoration:none;
  color:var(--or-clair); border:1px solid rgba(185,148,65,.45); padding:7px 10px; transition:border-color .2s}
.nav__lang:hover{border-color:var(--or)}
@media (min-width:761px){ .nav__lang{margin-right:clamp(0px,1.2vw,18px)} }

/* ---------- page Écoute (lien en bio, pensée pour un téléphone) ---------- */
.ecoute{padding-top:var(--s-5); padding-bottom:var(--s-5)}
.ecoute .hero__tag{margin-top:var(--s-3)}
.ecoute__demos{padding-top:var(--s-5); padding-bottom:var(--s-5)}
.ecoute__plus{margin-top:var(--s-4)}
@media (max-width:560px){
  .ecoute .btn-or, .ecoute ~ .appel .btn-or{width:100%}
}

/* ---------- passe qualité (13 nov. 2026) : téléphone ---------- */
@media (max-width:760px){
  /* zones de toucher d'au moins 44 px dans la barre de navigation */
  .nav__lang,.nav__menu{display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px}
  .nav__name{display:inline-block; padding:12px 0; line-height:20px}
  /* l'onde se manipule au pouce */
  .demo .wave{min-height:44px}
  .dl::before{top:-13px; bottom:-13px}
  .appel__go{min-height:44px; display:inline-flex; align-items:center}
}

/* ---------- passe qualité (13 nov. 2026) : accessibilité ---------- */
.evitement{position:absolute; left:var(--gut); top:-200px; z-index:100; padding:13px 21px; background:var(--ivoire); color:var(--noir);
  font-size:11px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; text-decoration:none}
.evitement:focus{top:8px}
main:focus{outline:none}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* ---------- passe qualité (13 nov. 2026) : vitesse ---------- */
.shot picture{display:contents}

/* ---------- troisième passe (13 nov. 2026) : le visage de Dimitri ---------- */
.visage{margin:0; overflow:hidden; background:var(--noir-2); aspect-ratio:4/5}
.visage picture{display:contents}
.visage img{width:100%; height:100%; object-fit:cover; object-position:50% 28%;
  filter:grayscale(1) contrast(1.05); transition:filter .6s}
.visage:hover img{filter:grayscale(0) contrast(1)}
/* accueil : portrait à gauche des deux démos, dans le pupitre */
.pupitre--visage{display:grid; grid-template-columns:clamp(180px,19vw,280px) minmax(0,1fr);
  grid-template-areas:"visage head" "visage pistes"; column-gap:var(--s-5); align-items:start}
.pupitre--visage .visage{grid-area:visage; border:1px solid var(--trait-i)}
.pupitre--visage .pupitre__head{grid-area:head}
.pupitre--visage .pupitre__pistes{grid-area:pistes; min-width:0}
@media (max-width:900px){
  .pupitre--visage{grid-template-columns:144px minmax(0,1fr); column-gap:var(--s-4)}
  .pupitre--visage .pupitre__head > .eyebrow{display:none}
}
@media (max-width:560px){
  .pupitre--visage{grid-template-columns:89px minmax(0,1fr); grid-template-areas:"visage head" "pistes pistes"; column-gap:var(--s-3); row-gap:var(--s-3)}
  .pupitre--visage .pupitre__head{align-self:center; margin-bottom:0}
}
/* voix : colonne de droite du bloc « Le studio » */
.visage--studio{aspect-ratio:1/1.272; width:100%; max-width:340px; justify-self:end}
.visage--studio img{object-position:62% 30%}
@media (max-width:900px){ .visage--studio{justify-self:start; max-width:min(72vw,340px)} }
/* écoute : petit, à côté du nom */
.ecoute__id{display:flex; align-items:center; gap:var(--s-3); margin-top:var(--s-3)}
.ecoute__id .section__title{margin:0}
.visage--petit{flex:0 0 auto; width:clamp(72px,9vw,96px); border:1px solid rgba(185,148,65,.45)}

/* ---------- page Confidentialité : texte courant, lisible ---------- */
.clair{max-width:calc(68ch + 2 * var(--gut)); padding-top:var(--s-6)}
.clair h2{font-family:var(--display); font-style:italic; font-weight:600; font-size:var(--t-1); line-height:1.2; margin:var(--s-5) 0 13px}
.clair h2:first-child{margin-top:0}
.clair p,.clair li{max-width:62ch; color:#4A463C}
.clair p + p{margin-top:1em}
.clair ul{list-style:none; margin:13px 0 1em}
.clair li{position:relative; padding:8px 0 8px 34px; border-top:1px solid var(--trait-n)}
.clair li:last-child{border-bottom:1px solid var(--trait-n)}
.clair li::before{content:''; position:absolute; left:4px; top:1.05em; width:6px; height:6px; background:var(--or); transform:rotate(45deg)}
.clair a{color:var(--or-texte); text-decoration:none; border-bottom:1px solid rgba(138,109,43,.45)}
.clair a:hover{border-bottom-color:var(--or)}
.clair__date{margin-top:var(--s-5) !important; font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--taupe) !important}
/* pied de page : lien vers la confidentialité */
.foot{align-items:baseline}
.foot a{color:inherit; border-bottom:1px solid transparent}
.foot a:hover,.foot a:focus-visible{border-bottom-color:var(--or)}
/* commande : lien vers la confidentialité, près du bouton d'envoi */
.lien-discret{color:var(--or-texte); text-decoration:none; border-bottom:1px solid rgba(138,109,43,.45); white-space:nowrap}
.lien-discret:hover{border-bottom-color:var(--or)}

/* ---------- page Contact : plus de grand vide, deux chemins clairs ---------- */
.contact{padding-bottom:var(--s-6)}
.chemins{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-bottom:var(--s-5)}
.chemin{display:flex; flex-direction:column; gap:13px; padding:var(--s-4); border:1px solid var(--trait-i);
  text-decoration:none; color:var(--ivoire); transition:border-color .3s, background .3s}
a.chemin:hover{border-color:var(--or); background:var(--noir-2)}
.chemin__t{font-family:var(--display); font-style:italic; font-weight:600; font-size:var(--t-1); line-height:1.2; color:var(--or-clair)}
.chemin__d{color:rgba(243,239,228,.78); font-weight:300; max-width:44ch; text-wrap:pretty}
.chemin__go{margin-top:auto; padding-top:8px; align-self:flex-start; display:inline-flex; align-items:center; gap:13px; min-height:44px;
  font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--or-clair); text-decoration:none;
  border-bottom:1px solid rgba(185,148,65,.45)}
.chemin__go::after{content:'→'; font-size:14px; transition:transform .3s}
a.chemin:hover .chemin__go::after,a.chemin__go:hover::after{transform:translateX(8px)}
.contact .brief{margin-top:var(--s-5)}
@media (max-width:760px){ .chemins{grid-template-columns:1fr} }
@media (max-width:560px){ .mailto{font-size:clamp(24px,7.6vw,40px)} }

/* ---------- contenu fourni par Dimitri (assets/contenu.js), masqué tant que vide ---------- */
/* réseaux */
.liens-reseaux,.foot__reseaux{display:flex; flex-wrap:wrap; gap:8px 21px}
.liens-reseaux a{display:inline-flex; align-items:center; min-height:44px}
.foot__reseaux a{display:inline-flex; align-items:center; min-height:32px}
.ecoute__reseaux{margin-top:var(--s-5); padding-top:var(--s-4); border-top:1px solid var(--trait-n)}
.ecoute__reseaux .liens-reseaux a{font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; text-decoration:none;
  color:var(--or-texte); border-bottom:1px solid rgba(138,109,43,.45)}
/* preuves */
.clients{list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) var(--s-5);
  padding:var(--s-4) 0; border-top:1px solid var(--trait-n); border-bottom:1px solid var(--trait-n)}
.clients a{text-decoration:none; color:inherit}
.clients span{font-family:var(--display); font-style:italic; font-weight:600; font-size:var(--t-1); color:var(--taupe)}
.clients img{height:34px; width:auto; max-width:160px; object-fit:contain; filter:grayscale(1); opacity:.75}
.temoignages{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:var(--s-4); margin-top:var(--s-5)}
.clients[hidden] + .temoignages{margin-top:0}
.temoignage{border-top:1px solid var(--or); padding-top:var(--s-3); margin:0}
.temoignage blockquote p{font-family:var(--display); font-style:italic; font-size:var(--t-1); line-height:1.35; text-wrap:pretty}
.temoignage figcaption{margin-top:var(--s-3); display:grid; gap:3px; font-size:13px; color:var(--taupe)}
.temoignage figcaption b{font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--noir)}
/* vidéos */
.video{margin:0}
.video video{display:block; width:100%; aspect-ratio:16/9; background:var(--noir); border:1px solid var(--trait-i)}
.video__cap{margin-top:13px; font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:rgba(243,239,228,.66)}
/* fiche casting : CV ; contact : coordonnées de l'agente sur fond noir */
.cv{margin-top:var(--s-3)}
.fiche--sombre{margin-top:8px}
.fiche--sombre .fiche__row{border-color:var(--trait-i)}
.fiche--sombre .fiche__k{color:var(--or)}
.fiche--sombre .fiche__v a,.fiche__v a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(185,148,65,.5)}
/* fiches : le trait du bas ne dépend plus de la dernière ligne (des lignes peuvent être masquées) */
.fiche{border-bottom:1px solid var(--trait-n)}
.fiche .fiche__row:last-child{border-bottom:0}
.fiche--sombre{border-bottom-color:var(--trait-i)}
@media (max-width:560px){ .entete--clair .entete__title{font-size:clamp(32px,10.5vw,58px)} }