/* ============================================================
   Signature cinétique MADIOR — acrostiche animé du hero
   Porté depuis « L'Ingénierie Absolue » (Sources/landing-absolue).
   Tout est scopé sous .mdr-sig ; keyframes préfixées mdr* ;
   tokens locaux → aucune collision avec le CSS/animations existants.
   ============================================================ */
.mdr-sig{
  /* tokens locaux — thème sombre (défaut du site) */
  --cu:#d4a574; --cu-l:#ecd2b6; --cu-d:#a8794f;
  --ink:#f4f1ea; --ink2:#a6a299; --ink3:#6c685f;
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --e:cubic-bezier(.2,.7,.2,1);
  --e2:cubic-bezier(.65,0,.35,1);
  position:relative;
  text-align:left; /* la signature reste calée à gauche même si le hero est centré */
}
[data-theme="light"] .mdr-sig{
  --cu:#a8794f; --cu-l:#c08f5d; --cu-d:#855c34;
  --ink:#211f1b; --ink2:#5c574c; --ink3:#928c7e;
}

/* eyebrow */
.mdr-eyebrow{display:flex; align-items:center; gap:13px;
  font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cu); margin:0 0 clamp(16px,2.2vh,26px);
  opacity:0; animation:mdrFade .8s var(--e) .25s forwards}
.mdr-eyebrow::before{content:''; width:26px; height:1px; background:var(--cu); flex:0 0 auto}
.mdr-eyebrow .muted{color:var(--ink3)}

/* zone signature (les deux états se superposent) */
.mdr-sigwrap{position:relative; margin:0 0 clamp(8px,1.4vh,16px);
  min-height:clamp(118px,17vh,196px)}

/* État 1 : les 6 mots en colonne, montée en cascade */
.mdr-words{position:absolute; left:0; top:0; right:0;
  display:flex; flex-direction:column; gap:.04em;
  font-family:var(--serif); font-weight:300; line-height:1.08;
  font-size:clamp(1.25rem,1.9vw,1.95rem); color:var(--ink2);
  transform-origin:left center;
  animation:mdrWordsOut 1.1s var(--e2) 4.4s forwards}
.mdr-words .wl{display:flex; align-items:baseline; gap:.26em; white-space:nowrap;
  opacity:0; transform:translateY(16px);
  animation:mdrRise2 .72s var(--e) forwards}
.mdr-words .wl:nth-child(1){animation-delay:.30s}
.mdr-words .wl:nth-child(2){animation-delay:.42s}
.mdr-words .wl:nth-child(3){animation-delay:.54s}
.mdr-words .wl:nth-child(4){animation-delay:.66s}
.mdr-words .wl:nth-child(5){animation-delay:.78s}
.mdr-words .wl:nth-child(6){animation-delay:.90s}
.mdr-words .i{font-style:italic; font-weight:500; font-size:1.16em;
  background:linear-gradient(118deg,var(--cu-l),var(--cu) 55%,var(--cu-d));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}

/* État 2 : le wordmark MADIOR, lettre par lettre */
.mdr-mark{position:absolute; left:0; top:50%; transform:translateY(-50%);
  display:flex; align-items:flex-end;
  font-family:var(--serif); font-weight:300; line-height:.86;
  font-size:clamp(3rem,7.2vw,7.6rem); letter-spacing:-.045em;
  font-optical-sizing:auto; font-variation-settings:"opsz" 72;
  pointer-events:none}
.mdr-mark .c{display:inline-block; opacity:0;
  transform:translateY(46%) scale(.62); filter:blur(4px);
  color:var(--ink);
  animation:mdrMarkIn .82s var(--e) forwards}
.mdr-mark .c:nth-child(1){animation-delay:4.62s}
.mdr-mark .c:nth-child(2){animation-delay:4.70s}
.mdr-mark .c:nth-child(3){animation-delay:4.78s}
.mdr-mark .c:nth-child(4){animation-delay:4.86s}
.mdr-mark .c:nth-child(5){animation-delay:4.94s}
.mdr-mark .c:nth-child(6){animation-delay:5.02s}
.mdr-mark .tm{font-family:var(--mono); font-weight:400; font-size:.16em;
  color:var(--cu); align-self:flex-start; margin-left:.12em; margin-top:.2em;
  opacity:0; animation:mdrFade .5s var(--e) 5.3s forwards}

/* promesse — sert de <h1> (SEO/i18n) et de résolution de l'animation.
   Sélecteur volontairement spécifique : neutralise le shimmer holographique
   « header.hero h1 » de madior-fr-polish.css (sinon h1 transparent + invisible). */
header.hero .mdr-sig .mdr-promise{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.25rem,1.8vw,1.8rem); line-height:1.25; letter-spacing:-.01em;
  background:none; color:var(--ink); -webkit-text-fill-color:currentColor;
  margin:clamp(6px,1vh,12px) 0 0;
  opacity:0; transform:translateY(10px);
  animation:mdrRise2 .8s var(--e) 5.55s forwards}
header.hero .mdr-sig .mdr-promise b{font-style:italic; font-weight:400;
  background:linear-gradient(118deg,var(--cu-l),var(--cu) 52%,var(--cu-d));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}

/* filet sous le titre */
.mdr-rule{position:relative; height:1px; width:0;
  margin:clamp(14px,2vh,24px) 0 clamp(4px,1vh,10px);
  background:linear-gradient(90deg,var(--cu),var(--cu-d) 56%,transparent);
  animation:mdrDraw 1.3s var(--e) 5.4s forwards}
.mdr-rule::after{content:''; position:absolute; right:-2px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--cu); box-shadow:0 0 9px var(--cu);
  opacity:0; animation:mdrFade .4s var(--e) 6.5s forwards}

/* keyframes (préfixées pour ne rien écraser) */
@keyframes mdrFade{to{opacity:1}}
@keyframes mdrRise2{to{opacity:1; transform:translateY(0)}}
@keyframes mdrWordsOut{0%{opacity:1}55%{opacity:.5}to{opacity:0; transform:translateY(-26px) scale(.9); filter:blur(4px)}}
@keyframes mdrMarkIn{to{opacity:1; transform:translateY(0) scale(1); filter:blur(0)}}
@keyframes mdrDraw{to{width:46%}}
@media(max-width:760px){ .mdr-rule{} @keyframes mdrDraw{to{width:72%}} }

/* accessibilité : pas d'animation → état final immédiat */
@media(prefers-reduced-motion:reduce){
  .mdr-words{animation:none; opacity:0}
  .mdr-mark .c{opacity:1; transform:none; filter:none; animation:none}
  .mdr-eyebrow,.mdr-mark .tm{opacity:1; transform:none; animation:none}
  header.hero .mdr-sig .mdr-promise{opacity:1; transform:none; animation:none}
  .mdr-rule{width:46%; animation:none}
  .mdr-rule::after{opacity:1; animation:none}
}