/* ==========================================================================
   LE STUDIO (studio.html) : compléments propres à cette page.
   Mêmes jetons et mêmes unités (--m, --mins) que pages.css.
   Les visuels animés [data-story] sont dessinés en entier dans le HTML : sans
   JavaScript, dans l'éditeur, en ?calage ou en animations réduites, on voit
   leur état final, immobile. stories.js pose .story-armed (états de départ),
   .story-on (l'arrivée joue) et .story-live (à l'écran : les boucles tournent).
   ========================================================================== */
body[data-page="studio"]{
  --e-out:cubic-bezier(.16,1,.3,1);--e-io:cubic-bezier(.65,0,.35,1);--e-pop:cubic-bezier(.34,1.4,.64,1);
  --yl:#FFD60A;
}

/* un bloc qui suit un bloc à deux colonnes : pas de double marge */
.blk--next{padding-top:0}

/* ---------- la carte de visite (pas de photo : un nom, un lieu, une adresse) */
.signcard{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:max(calc(var(--mins) * 18px),calc(12 * var(--m)));
  width:100%;max-width:max(calc(var(--mins) * 340px),calc(230 * var(--m)));aspect-ratio:85/55;
  padding:max(calc(var(--mins) * 20px),calc(14 * var(--m))) max(calc(var(--mins) * 22px),calc(16 * var(--m)));
  font-style:normal;border:1px solid var(--line-2);border-radius:6px;
  background:
    radial-gradient(90% 110% at 100% 0,rgba(246,43,62,.2),transparent 62%),
    linear-gradient(150deg,#161618 0,#0b0b0c 55%,#070708);
  box-shadow:0 34px 60px -26px rgba(0,0,0,.95),0 0 60px -30px rgba(246,43,62,.55),inset 0 1px 0 rgba(255,255,255,.05)}
.signcard::before{content:"";position:absolute;left:-1px;top:18%;bottom:18%;width:2px;background:var(--red);box-shadow:0 0 12px var(--red-glow)}
.signcard__mid{display:block}
.signcard__top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.signcard__top img{width:max(26px,calc(19 * var(--m)));height:auto}
.signcard__name{display:block;font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 30px),calc(21 * var(--m)));line-height:.9;letter-spacing:.005em;text-transform:uppercase;color:var(--ink)}
.signcard__name span{display:block;color:var(--red)}
.signcard__role{display:block;margin-top:max(calc(var(--mins) * 9px),calc(6 * var(--m)));font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.signcard__foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;padding-top:max(calc(var(--mins) * 12px),calc(8 * var(--m)));border-top:1px solid var(--line-2);font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.signcard__foot a{font-size:max(calc(var(--mins) * 12px),calc(5.6 * var(--m)));letter-spacing:.03em;text-transform:none;color:var(--ink);border-bottom:1px solid rgba(246,43,62,.6);transition:border-color .3s,color .3s}
.signcard__foot a:hover{color:#fff;border-color:var(--red)}

/* ==========================================================================
   01 · UNE PERSONNE, TOUTE LA CHAÎNE
   La carte de visite, puis six étapes reliées par un seul fil. Un point de
   lumière part de la carte et passe par chaque étape, qui s'allume.
   Les traits (.relay__seg) vont du centre d'un rond au centre du suivant :
   colonnes égales, sans écart, ronds centrés.
   ========================================================================== */
.relay{--ring:max(calc(var(--mins) * 84px),calc(58 * var(--m)));--gap:max(calc(var(--mins) * 34px),calc(30 * var(--m)));
  display:grid;grid-template-columns:max(calc(var(--mins) * 340px),calc(230 * var(--m))) minmax(0,1fr);column-gap:var(--gap);align-items:center}
.relay__steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));counter-reset:rl}
.relay__steps li{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 6px;text-align:center}
.relay__ring{position:relative;z-index:2;display:grid;place-items:center;width:var(--ring);height:var(--ring);border-radius:50%;
  border:1px solid rgba(246,43,62,.8);background:radial-gradient(circle at 50% 38%,rgba(246,43,62,.26),#0b0b0c 72%),#0b0b0c;
  box-shadow:0 0 26px -6px var(--red-glow);color:var(--ink);
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease),background-color .5s var(--ease),color .5s var(--ease),transform .6s var(--e-pop)}
.relay__ring::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--red);opacity:0;pointer-events:none}
.relay__ring .ico{width:78%;height:78%;transition:opacity .5s var(--ease)}
.relay.story-armed li:not(.is-lit) .relay__ring .ico{opacity:.4}
.relay__steps b{display:block;margin-top:max(calc(var(--mins) * 14px),calc(10 * var(--m)));font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 19px),calc(12 * var(--m)));line-height:1;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}

.relay__steps li > span:last-child{display:block;margin-top:7px;max-width:16ch;font-size:max(calc(var(--mins) * 13px),calc(6.4 * var(--m)));line-height:1.4;color:var(--ink-3)}

.relay__seg{position:absolute;z-index:1;top:calc(var(--ring) / 2 - 6px);left:50%;width:100%;height:12px;overflow:hidden;pointer-events:none}
.relay__seg::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-2)}
.relay__seg > i{position:absolute;inset:0}
.relay__seg > i::before{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:linear-gradient(90deg,rgba(246,43,62,.4),var(--red));box-shadow:0 0 8px var(--red-glow)}
.relay__seg > i::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--yl);box-shadow:0 0 10px 2px rgba(255,214,10,.5);opacity:0}
.relay__seg--lead{left:calc(-1 * var(--gap));width:calc(50% + var(--gap))}

/* états animés (seulement quand stories.js a armé le visuel) */
.relay.story-armed .relay__seg > i{transform:translateX(-101%)}
.relay.story-armed .relay__seg.is-run > i{transform:none;transition:transform var(--seg,.63s) var(--e-io)}
.relay.story-armed .relay__seg.is-run:not(.is-done) > i::after{opacity:1;transition:opacity .2s}
.relay.story-armed .relay__seg.is-done > i::after{opacity:0;transition:opacity .4s}
.relay.story-armed .relay__ring{border-color:var(--line-2);background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.04),#0b0b0c 72%),#0b0b0c;box-shadow:none;color:var(--ink-4)}
.relay.story-armed .relay__steps b{color:var(--ink-2);transition:color .5s var(--ease)}
.relay.story-armed li.is-lit .relay__ring{border-color:rgba(246,43,62,.8);background:radial-gradient(circle at 50% 38%,rgba(246,43,62,.26),#0b0b0c 72%),#0b0b0c;box-shadow:0 0 26px -6px var(--red-glow);color:var(--ink);transform:scale(1.06)}
.relay.story-armed li.is-lit.is-past .relay__ring{transform:none}
.relay.story-armed li.is-lit .relay__ring::after{animation:rlPing .9s var(--e-out) both}
.relay.story-armed li.is-lit b{color:var(--ink)}
.relay.story-armed.is-reset .relay__seg > i{opacity:0;transition:opacity .6s var(--ease)}
@keyframes rlPing{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}

.relay__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 30px;margin-top:max(calc(var(--mins) * 30px),calc(22 * var(--m)))}
.relay__foot .more{margin-top:0}
.relay__cap{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-weight:500;font-size:max(calc(var(--mins) * 12.5px),calc(6.2 * var(--m)));letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.relay__cap::before{content:"";flex:none;width:max(calc(var(--mins) * 28px),calc(22 * var(--m)));height:1px;background:var(--red);box-shadow:0 0 8px var(--red-glow)}

/* ==========================================================================
   02 · SE VOIR, SE LIRE, S'ÉCOUTER : trois cartes, un seul trait
   Le même crayon (un point jaune) trace la marque, puis la page, puis la voix.
   ========================================================================== */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:max(calc(var(--mins) * 16px),calc(12 * var(--m)))}
.trio__card{position:relative;display:flex;flex-direction:column;padding:max(calc(var(--mins) * 16px),calc(12 * var(--m))) max(calc(var(--mins) * 20px),calc(16 * var(--m))) max(calc(var(--mins) * 22px),calc(16 * var(--m)));
  border:1px solid rgba(246,43,62,.3);background:linear-gradient(160deg,#0f0f11,#080809 70%);overflow:hidden;isolation:isolate;
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease)}
.trio__card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 50% 30%,rgba(246,43,62,.12),transparent 70%);opacity:.6;transition:opacity .45s var(--ease)}
.trio__card:hover,.trio__card:focus-visible{border-color:rgba(255,64,82,.9);box-shadow:0 0 calc(26 * var(--m)) -6px var(--red-glow)}
.trio__card:hover::before{opacity:1}
.trio__card:hover .round{border-color:var(--red);box-shadow:0 0 16px -2px var(--red-glow);background:rgba(246,43,62,.12)}
.trio__art{display:block;width:100%;height:auto;aspect-ratio:360/210;margin:0 0 max(calc(var(--mins) * 14px),calc(10 * var(--m)));overflow:visible}
.trio__kicker{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.trio__title{margin-top:max(calc(var(--mins) * 8px),calc(5 * var(--m)));font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 28px),calc(19 * var(--m)));line-height:.95;text-transform:uppercase;color:var(--ink)}
.trio__title span{color:var(--red)}
.trio__text{margin-top:max(calc(var(--mins) * 8px),calc(6 * var(--m)));padding-right:calc(30 * var(--m) + 20px);font-size:max(calc(var(--mins) * 14px),calc(6.8 * var(--m)));line-height:1.55;color:var(--ink-2)}
.trio__go{position:absolute;right:max(calc(var(--mins) * 16px),calc(12 * var(--m)));bottom:max(calc(var(--mins) * 16px),calc(12 * var(--m)))}

/* dessin (état final) */
.tr-guide *{fill:none;stroke:rgba(245,243,238,.2);stroke-width:1;vector-effect:non-scaling-stroke}
.tr-guide{opacity:.7}
.tr-ink{fill:none;stroke:var(--red);stroke-width:2;vector-effect:non-scaling-stroke}
.tr-line{fill:none;stroke:rgba(245,243,238,.5);stroke-width:1.2;vector-effect:non-scaling-stroke}
.tr-sun{fill:var(--red)}
.tr-anchors rect{fill:#0b0b0c;stroke:var(--ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
.tr-anchors circle{fill:var(--ink)}
.tr-handle{fill:none;stroke:var(--ink-3);stroke-width:1;vector-effect:non-scaling-stroke}
.tr-blocks > *{fill:rgba(245,243,238,.26)}
.tr-blocks .b-red{fill:var(--red)}
.tr-blocks .b-ink{fill:var(--ink)}
.tr-blocks .b-ink2{fill:rgba(245,243,238,.62)}
.tr-blocks .b-img{fill:rgba(246,43,62,.16);stroke:rgba(246,43,62,.55);stroke-width:1;vector-effect:non-scaling-stroke}
.tr-blocks .b-card{fill:rgba(255,255,255,.03);stroke:rgba(245,243,238,.28);stroke-width:1;vector-effect:non-scaling-stroke}
.tr-wave rect{fill:rgba(245,243,238,.7)}
.tr-wave rect:nth-child(n+11):nth-child(-n+16){fill:var(--red)}
.tr-head{transform:translateX(118px)}
.tr-head path{stroke:var(--red);stroke-width:1.4;vector-effect:non-scaling-stroke}
.tr-head circle{fill:var(--yl)}
.tr-pen{fill:var(--yl);opacity:0;filter:drop-shadow(0 0 4px rgba(255,214,10,.8))}

/* animé */
.trio.story-armed .tr-draw{stroke-dasharray:1 1;stroke-dashoffset:1}
.trio.story-on .tr-draw{stroke-dashoffset:0;transition:stroke-dashoffset var(--t,.7s) var(--e-io) var(--d,0s)}
.trio.story-armed .tr-sun{transform:scaleY(0);transform-box:fill-box;transform-origin:50% 100%}
.trio.story-on .tr-sun{transform:none;transition:transform .8s var(--e-out) 1.55s}
.trio.story-armed .tr-anchors > *{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center}
.trio.story-on .tr-anchors > *{opacity:1;transform:none;transition:opacity .3s 1.3s,transform .5s var(--e-pop) 1.3s}
.trio.story-on .tr-anchors > :nth-child(n+3){transition-delay:1.4s}
.trio.story-on .tr-guide{opacity:.45;transition:opacity 1.2s var(--ease) 2.2s}
.trio.story-armed .tr-blocks > *{opacity:0;transform:translateY(7px)}
.trio.story-on .tr-blocks > *{opacity:1;transform:none;transition:opacity .45s var(--ease) calc(1.7s + var(--k) * .09s),transform .6s var(--e-out) calc(1.7s + var(--k) * .09s)}
.trio.story-armed .tr-wave rect{transform:scaleY(0);transform-box:fill-box;transform-origin:center}
.trio.story-on .tr-wave rect{transform:none;transition:transform .55s var(--e-pop) calc(2.25s + var(--k) * .034s)}
.trio.story-armed.story-live .tr-wave rect{animation:trBreath var(--b) ease-in-out calc(3.4s + var(--k) * .045s) infinite alternate}
.trio.story-armed .tr-head{opacity:0;transform:translateX(28px)}
.trio.story-on .tr-head{opacity:1;transition:opacity .6s 3.3s}
.trio.story-armed.story-live .tr-head{animation:trHead 7.3s linear 3.3s infinite}
@keyframes trBreath{from{transform:scaleY(1)}to{transform:scaleY(.42)}}
@keyframes trHead{from{transform:translateX(28px)}to{transform:translateX(332px)}}

.trio__also{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;margin-top:max(calc(var(--mins) * 24px),calc(18 * var(--m)));font-size:max(calc(var(--mins) * 15.5px),calc(7.4 * var(--m)));color:var(--ink-2)}
.trio__also .more{margin-top:0}

/* ==========================================================================
   03 · POUR QUI : quatre profils, quatre téléphones en éventail (3D)
   ========================================================================== */
.who{align-items:start}
.who__head .txt{margin-top:max(calc(var(--mins) * 18px),calc(12 * var(--m)))}
.who__list{margin-top:max(calc(var(--mins) * 22px),calc(16 * var(--m)));border-bottom:1px solid var(--line)}
.who__list li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:max(calc(var(--mins) * 14px),calc(9 * var(--m)));align-items:center;padding:max(calc(var(--mins) * 12px),calc(8 * var(--m))) 0;border-top:1px solid var(--line)}
.who__list .ico{grid-row:1 / 3;--ico-size:max(calc(var(--mins) * 56px),calc(40 * var(--m)))}
.who__list b{font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 19px),calc(11.5 * var(--m)));line-height:1.05;text-transform:uppercase;color:var(--ink)}
.who__list li > span:last-child{font-size:max(calc(var(--mins) * 13.5px),calc(6.4 * var(--m)));line-height:1.45;color:var(--ink-3)}
.who__proof{min-width:0;padding-top:max(calc(var(--mins) * 8px),calc(19 * var(--m)))}
.who__foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 26px;margin-top:max(calc(var(--mins) * 10px),calc(6 * var(--m)))}
.who__foot .txt{max-width:44ch}
.who__foot .more{margin-top:0}

.fan{--rx:8deg;--ry:-17deg;position:relative;aspect-ratio:16/9.4;perspective:max(1300px,calc(1000 * var(--m)));perspective-origin:50% 30%}
.fan__rig{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(var(--rx) - var(--py,0) * 10deg)) rotateY(calc(var(--ry) + var(--px,0) * 16deg))}
.fan__ph{position:absolute;top:2%;left:calc(4% + var(--k) * 23.5%);width:20.5%;margin:0;transform-style:preserve-3d;transform:translateZ(calc(var(--k) * 26px - 40px)) rotateY(9deg);transition:transform .6s var(--e-out)}
.fan__ph .phone{border-width:6px;border-radius:26px}
.fan__ph .phone img{padding-top:0;background:#000}   /* écran plein : la capture monte sous l'encoche (Yann, 10/10) */
.fan__ph .cap{justify-content:center;margin-top:14px}
.fan__ph:hover{transform:translateZ(calc(var(--k) * 26px + 10px)) translateY(-3%) rotateY(4deg)}
.fan__floor{position:absolute;left:4%;right:6%;bottom:2%;height:16%;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(246,43,62,.3),rgba(246,43,62,.08) 55%,transparent 72%);pointer-events:none;z-index:-1}

.fan.story-armed .fan__ph{opacity:0;transform:translateZ(-220px) translateY(30%) rotateX(-34deg) rotateY(9deg)}
.fan.story-on .fan__ph{opacity:1;transform:translateZ(calc(var(--k) * 26px - 40px)) rotateY(9deg);transition:transform 1.35s var(--e-out) calc(.15s + var(--k) * .14s),opacity .7s var(--ease) calc(.15s + var(--k) * .14s)}
.fan.story-on.is-settled .fan__ph{transition:transform .6s var(--e-out)}
.fan.story-on.is-settled .fan__ph:hover{transform:translateZ(calc(var(--k) * 26px + 10px)) translateY(-3%) rotateY(4deg)}
.fan.story-armed .fan__floor{opacity:0;transform:scaleX(.4)}
.fan.story-on .fan__floor{opacity:1;transform:none;transition:opacity 1.2s var(--ease) .3s,transform 1.4s var(--e-out) .3s}

/* ==========================================================================
   Tablette et mobile
   ========================================================================== */
@media (max-width:1279px){
  .relay{grid-template-columns:1fr;row-gap:40px}
  .relay__seg--lead{display:none}
}
@media (max-width:1023px){
  .signcard{max-width:380px}
  .trio{grid-template-columns:1fr;max-width:560px}
  .trio__text{padding-right:56px}
  .who__proof{padding-top:34px}
  .fan{max-width:640px}
}
@media (max-width:759px){
  .relay{--ring:72px;--gap:30px;row-gap:30px}
  .relay__steps{grid-template-columns:1fr;row-gap:22px}
  .relay__steps li{display:grid;grid-template-columns:var(--ring) minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;align-items:start;padding:0;text-align:left}
  .relay__ring{grid-row:1 / 3}
  .relay__steps b{margin-top:3px;font-size:19px}
  .relay__steps li > span:last-child{max-width:none;margin-top:5px;font-size:14px}
  .relay__seg{top:calc(var(--ring) / 2);left:calc(var(--ring) / 2 - 6px);width:12px;height:calc(100% + 22px)}
  .relay__seg::before{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto}
  .relay__seg > i::before{left:50%;right:auto;top:0;bottom:0;width:1.5px;height:auto;margin:0 0 0 -.75px;background:linear-gradient(180deg,rgba(246,43,62,.4),var(--red))}
  .relay__seg > i::after{left:50%;right:auto;top:auto;bottom:0;margin:0 0 0 -3.5px}
  .relay.story-armed .relay__seg > i{transform:translateY(-101%)}
  .relay__seg--lead{display:block;top:calc(-1 * var(--gap));height:calc(var(--gap) + var(--ring) / 2)}
}
@media (max-width:640px){
  .fan{aspect-ratio:16/12.5;--rx:6deg;--ry:-12deg}
  .fan__ph{left:calc(1% + var(--k) * 24.5%);width:26%}
  .fan__ph .phone{border-width:4px;border-radius:16px}
  .fan__ph .phone::before{--cam-top:3px;--cam:4px}
  .fan__ph .phone img{padding-top:0}
  .fan__ph .cap{display:none}
  .who__foot{margin-top:4px}
}