/* ==========================================================================
   PAGE MÉTHODE (methode.html) : quatre écrans, une idée chacun.
   01 le parcours se trace et chaque temps montre ce qui s'y passe ·
   02 une seule personne (texte ; la chaîne en icônes est sur Le studio) ·
   03 on reprend, on reprend, puis « oui » · 04 l'e-mail et ses quatre points.
   Les dessins jouent une fois à l'arrivée (methode.js pose .is-up, .is-on,
   .is-play), puis se posent. Sans html.mt-arm (animations réduites, ?calage,
   éditeur du back-office, sans JS) : tout est dessiné, immobile, à l'état final.
   Courbes et durées : langage commun de l'accueil (SPEC-VITRINE § 4).
   ========================================================================== */
#contenu{--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)}

/* ---------- traits communs des dessins ------------------------------------- */
.mt-scene svg,.mt-yes svg{display:block;width:100%;height:100%;overflow:visible}
.mt-ln{fill:none;stroke:rgba(245,243,238,.6);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.mt-faint{stroke:rgba(245,243,238,.2)}
.mt-red{fill:none;stroke:var(--red);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mt-fillw{fill:rgba(245,243,238,.32)}
.mt-red-fill{fill:var(--red)}
:is(.mt-scene,.mt-yes) [pathLength]{stroke-dasharray:1 1.001}

/* ==========================================================================
   01 · LE PARCOURS
   ========================================================================== */
.mt-routeblk{padding-top:0}
.mt-route{--gap:max(calc(var(--mins) * 24px),calc(18 * var(--m)));--dot:max(calc(var(--mins) * 13px),calc(9 * var(--m)));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap);margin-top:max(calc(var(--mins) * 8px),calc(4 * var(--m)));transform-origin:50% 0}
.mt-step{position:relative;min-width:0}

/* la vignette : ce qui se passe pendant ce temps */
.mt-scene{position:relative;aspect-ratio:4/3;padding:5% 6%;border:1px solid var(--line);border-radius:6px;background:radial-gradient(110% 80% at 50% 105%,rgba(246,43,62,.09),transparent 62%),#0a0a0b;overflow:hidden;transition:border-color .6s var(--e-out),opacity .8s var(--e-out),transform 1.1s var(--e-io)}
.mt-scene::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 55%,rgba(246,43,62,.12),transparent 70%);opacity:0;transition:opacity .9s var(--e-out);pointer-events:none}
.mt-step.is-on .mt-scene,html:not(.mt-arm) .mt-scene{border-color:rgba(246,43,62,.26)}
.mt-step.is-on .mt-scene::before,html:not(.mt-arm) .mt-scene::before{opacity:1}

/* le rail : un point par temps, un segment vers le suivant */
.mt-step__rail{position:relative;height:var(--dot);margin:max(calc(var(--mins) * 22px),calc(15 * var(--m))) 0 max(calc(var(--mins) * 16px),calc(11 * var(--m)))}
.mt-step__dot{position:absolute;left:0;top:0;z-index:2;width:var(--dot);height:var(--dot);border-radius:50%;border:1.5px solid var(--red);background:#1a0306;box-shadow:0 0 0 3px rgba(246,43,62,.12),0 0 12px var(--red-glow);transition:opacity .4s var(--e-out),background-color .4s var(--e-out),box-shadow .5s var(--e-out)}
.mt-step__dot::after{content:"";position:absolute;inset:22%;border-radius:50%;background:var(--yellow);opacity:0;transition:opacity .35s var(--e-out)}
.mt-step__dot::before{content:"";position:absolute;inset:-180%;border-radius:50%;background:radial-gradient(circle,rgba(246,43,62,.38),transparent 62%);opacity:0;transition:opacity .5s var(--e-out)}
.mt-step.is-cur .mt-step__dot::after,.mt-step.is-cur .mt-step__dot::before,
html:not(.mt-arm) .mt-step:last-child .mt-step__dot::after,html:not(.mt-arm) .mt-step:last-child .mt-step__dot::before{opacity:1}
.mt-step__seg{position:absolute;left:calc(var(--dot) / 2);right:calc(-1 * var(--gap));top:calc(var(--dot) / 2 - .5px);height:1px;background-image:linear-gradient(90deg,rgba(255,255,255,.22) 50%,transparent 50%);background-size:4px 1px}
.mt-step__seg i{position:absolute;left:0;right:0;top:-.5px;height:2px;background:linear-gradient(90deg,var(--red),var(--red-hi));box-shadow:0 0 8px var(--red-glow);transform-origin:left center;transition:transform .38s var(--e-io)}
/* après le 04, la ligne continue et s'efface : on reste joignables */
.mt-step:last-child .mt-step__seg{right:0;-webkit-mask-image:linear-gradient(90deg,#000 30%,transparent);mask-image:linear-gradient(90deg,#000 30%,transparent)}

.mt-step__num{display:block;font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 16px),calc(9 * var(--m)));line-height:1.1;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);transition:color .5s var(--e-out)}
.mt-step__title{margin-top:max(calc(var(--mins) * 6px),calc(3 * var(--m)));font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 26px),calc(18.5 * var(--m)));line-height:1;letter-spacing:.005em;text-transform:uppercase;color:var(--red);transition:color .5s var(--e-out),text-shadow .5s var(--e-out)}
.mt-step.is-on .mt-step__title{text-shadow:0 0 18px rgba(246,43,62,.3)}
.mt-step__txt{margin-top:max(calc(var(--mins) * 10px),calc(6 * var(--m)));max-width:26em;font-size:max(calc(var(--mins) * 14.5px),calc(7 * var(--m)));line-height:1.6;color:var(--ink-2);transition:color .5s var(--e-out)}
.mt-step__you{margin-top:max(calc(var(--mins) * 10px),calc(6 * var(--m)));max-width:26em;font-family:var(--f-mono);font-size:max(calc(var(--mins) * 11.5px),calc(5.6 * var(--m)));line-height:1.55;letter-spacing:.01em;color:var(--ink-3)}
.mt-step__you strong{font-weight:500;color:var(--red)}

/* --- arrivée : le plan se redresse, puis chaque temps s'allume ------------- */
html.mt-arm .mt-route{opacity:0;transform:perspective(1600px) rotateX(24deg) translate3d(0,56px,0);transition:opacity .9s var(--e-out),transform 1.3s var(--e-io)}
html.mt-arm .mt-route.is-up{opacity:1;transform:none}
html.mt-arm .mt-step:not(.is-on) .mt-step__dot{opacity:.5;background:var(--bg);box-shadow:none}
html.mt-arm .mt-step:not(.is-on) .mt-step__num{color:var(--ink-2)}
html.mt-arm .mt-step:not(.is-on) .mt-step__title{color:rgba(246,43,62,.42)}
html.mt-arm .mt-step:not(.is-on) .mt-step__txt{color:var(--ink-3)}
html.mt-arm .mt-step.is-on .mt-step__dot{animation:mtPop .6s var(--e-pop)}
html.mt-arm .mt-step:not(.is-go) .mt-step__seg i{transform:scaleX(0)}
html.mt-arm .mt-step:last-child.is-go .mt-step__seg i{transition-duration:.9s}
@keyframes mtPop{0%{transform:scale(.6)}55%{transform:scale(1.25)}100%{transform:none}}
/* la tête de lumière respire, seulement quand le parcours est à l'écran */
html.mt-arm .mt-route.is-vis .mt-step.is-cur .mt-step__dot::before{animation:mtBreathe 6s ease-in-out infinite}
@keyframes mtBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

/* --- vignette 01 · écouter : la question, puis les notes -------------------- */
.s1-q{font-family:var(--f-title);font-weight:700;font-size:40px;fill:var(--ink)}
.s1-w{fill:none;stroke:rgba(245,243,238,.72);stroke-width:1.4;stroke-linecap:round}
.s1-bubble,.s1-pad,.s1-q{transform-box:fill-box}
.s1-bubble{transform-origin:15% 100%}
html.mt-arm .mt-step:not(.is-play) :is(.s1-bubble,.s1-pad,.s1-q){opacity:0}
html.mt-arm .mt-step:not(.is-play) :is(.s1-w,.s1-u,.s1-wave,.s1-bubble path){stroke-dashoffset:1}
html.mt-arm .is-play .s1-bubble{animation:mtIn .6s var(--e-pop) both}
html.mt-arm .is-play .s1-bubble path{animation:mtDraw .7s var(--e-io) both}
html.mt-arm .is-play .s1-q{animation:mtRise .5s var(--e-out) .35s both}
html.mt-arm .is-play .s1-pad{animation:mtRise .7s var(--e-out) .2s both}
html.mt-arm .is-play .s1-wave{animation:mtDraw .35s var(--e-io) calc(.5s + var(--n) * .15s) both}
html.mt-arm .is-play .s1-w{animation:mtDraw .38s var(--e-io) calc(.8s + var(--n) * .22s) both}
html.mt-arm .is-play .s1-u{animation:mtDraw .45s var(--e-io) 1.55s both}

/* --- vignette 02 · aligner : les pistes tournent et prennent une direction -- */
.s2-a{transform:translate(var(--x),var(--y));opacity:.42}
.s2-a--main{transform:translate(calc(var(--x) + 14px),var(--y));opacity:1}
.s2-a--main path{stroke:var(--red);stroke-width:2.2}
#contenu .s2-axis{stroke-dasharray:3 4}
.s2-goal{fill:var(--yellow);transform-box:fill-box;transform-origin:center}
html.mt-arm .mt-step:not(.is-play) :is(.s2-a,.s2-goal,.s2-axis){opacity:0}
html.mt-arm .is-play .s2-a{animation:s2Align 1.3s var(--e-io) both}
html.mt-arm .is-play .s2-a:nth-child(3){animation-delay:.08s}
html.mt-arm .is-play .s2-a:nth-child(4){animation-name:s2Main;animation-duration:1.9s;animation-delay:.04s}
html.mt-arm .is-play .s2-a:nth-child(5){animation-delay:.12s}
html.mt-arm .is-play .s2-a:nth-child(6){animation-delay:.16s}
html.mt-arm .is-play .s2-a--main path{animation:s2Red 1.9s linear both}
html.mt-arm .is-play .s2-axis{animation:mtFade .6s var(--e-out) 1s both}
html.mt-arm .is-play .s2-goal{animation:mtIn .5s var(--e-pop) 1.6s both}
@keyframes s2Align{0%{transform:translate(var(--x0),var(--y0)) rotate(var(--r0));opacity:0}25%{opacity:.6}100%{transform:translate(var(--x),var(--y)) rotate(0deg);opacity:.42}}
@keyframes s2Main{0%{transform:translate(var(--x0),var(--y0)) rotate(var(--r0));opacity:0}17%{opacity:.6}68%{transform:translate(var(--x),var(--y)) rotate(0deg);opacity:1}100%{transform:translate(calc(var(--x) + 14px),var(--y));opacity:1}}
@keyframes s2Red{0%,62%{stroke:rgba(245,243,238,.6);stroke-width:1.3}80%,100%{stroke:var(--red);stroke-width:2.2}}

/* --- vignette 03 · exécuter : le logo, le site, le téléphone, l'épisode ----- */
.s3-logo{fill:var(--red)}
.s3-hero{fill:rgba(245,243,238,.05);stroke:rgba(245,243,238,.24);stroke-width:1}
.s3-h1{fill:none;stroke:rgba(245,243,238,.86);stroke-width:4;stroke-linecap:round}
.s3-btn{fill:var(--red)}
.s3-wave rect{fill:rgba(246,43,62,.78);transform-box:fill-box;transform-origin:center}
html.mt-arm .mt-step:not(.is-play) :is(.s3-in,.s3-wave rect){opacity:0}
html.mt-arm .mt-step:not(.is-play) :is(.s3-frame,.s3-phone,.s3-logo){stroke-dashoffset:1}
html.mt-arm .mt-step:not(.is-play) .s3-logo{fill-opacity:0}
html.mt-arm .is-play .s3-frame{animation:mtDraw .75s var(--e-io) both}
html.mt-arm .is-play .s3-logo{animation:s3Logo .8s var(--e-io) .3s both}
html.mt-arm .is-play .s3-in{animation:mtRise .5s var(--e-out) calc(.45s + var(--n) * .13s) both}
html.mt-arm .is-play .s3-phone{animation:mtDraw .75s var(--e-io) .55s both}
html.mt-arm .is-play .s3-wave rect{animation:s3Bar .5s var(--e-pop) calc(1.25s + var(--n) * 24ms) both}
@keyframes s3Logo{0%{stroke-dashoffset:1;fill-opacity:0}60%{stroke-dashoffset:0;fill-opacity:0}100%{stroke-dashoffset:0;fill-opacity:1}}
@keyframes s3Bar{0%{transform:scaleY(0);opacity:0}30%{opacity:1}100%{transform:none;opacity:1}}

/* --- vignette 04 · accompagner : en ligne, ça grandit, on reste joignables -- */
.s4-pill rect{fill:rgba(246,43,62,.12);stroke:rgba(246,43,62,.55);stroke-width:1}
.s4-pill text{font-family:var(--f-mono);font-weight:500;font-size:7.6px;letter-spacing:.12em;fill:var(--ink)}
.s4-live{fill:var(--red)}
.s4-area{fill:rgba(246,43,62,.1)}
.s4-tip,.s4-new{fill:var(--yellow);transform-box:fill-box;transform-origin:center}
.s4-frame,.s4-mail{transform-box:fill-box;transform-origin:center}
html.mt-arm .mt-step:not(.is-play) :is(.s4-frame,.s4-in,.s4-area,.s4-tip,.s4-mail,.s4-new){opacity:0}
html.mt-arm .mt-step:not(.is-play) :is(.s4-curve,.s4-inf){stroke-dashoffset:1}
html.mt-arm .is-play .s4-frame{animation:mtIn .7s var(--e-out) both}
html.mt-arm .is-play .s4-in{animation:mtRise .45s var(--e-out) calc(.3s + var(--n) * .15s) both}
html.mt-arm .is-play .s4-curve{animation:mtDraw .85s var(--e-io) .65s both}
html.mt-arm .is-play .s4-area{animation:mtFade .7s var(--e-out) 1.2s both}
html.mt-arm .is-play .s4-tip{animation:mtIn .45s var(--e-pop) 1.4s both}
html.mt-arm .is-play .s4-mail{animation:s4Mail .6s var(--e-out) 1.45s both}
html.mt-arm .is-play .s4-new{animation:mtIn .4s var(--e-pop) 1.95s both}
html.mt-arm .is-play .s4-inf{animation:mtDraw 1.1s var(--e-io) 1.7s both}
@keyframes s4Mail{0%{transform:translate3d(18px,0,0);opacity:0}100%{transform:none;opacity:1}}

/* gestes communs des vignettes */
@keyframes mtDraw{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@keyframes mtFade{0%{opacity:0}100%{opacity:1}}
@keyframes mtIn{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes mtRise{0%{transform:translate3d(0,8px,0);opacity:0}100%{transform:none;opacity:1}}

/* ==========================================================================
   02 · UNE PERSONNE (texte seul : la chaîne en icônes est sur Le studio)
   ========================================================================== */
.mt-who{display:flex;align-items:center;gap:12px;margin-top:max(calc(var(--mins) * 18px),calc(12 * var(--m)));font-size:var(--fs-body);color:var(--ink)}
.mt-who::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 10px rgba(255,210,31,.5)}

/* ==========================================================================
   03 et 04 · texte à gauche, la scène à droite
   ========================================================================== */
.mt-duo{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);column-gap:max(calc(var(--mins) * 40px),calc(34 * var(--m)));align-items:center}
/* 03 : texte et engagements à gauche, la scène sur toute la hauteur à droite */
#engagements .mt-duo{grid-template-areas:"a b" "c b";grid-template-rows:auto 1fr;align-items:start}
#engagements .mt-duo__text{grid-area:a}
#engagements .mt-yes{grid-area:b;align-self:center}
#engagements .mt-pledges{grid-area:c}
.mt-duo__text .txt{margin-top:max(calc(var(--mins) * 18px),calc(12 * var(--m)));max-width:30em}
.mt-duo__text .txt + .txt{margin-top:.8em}

/* 03 · les trois autres engagements */
.mt-pledges{margin-top:max(calc(var(--mins) * 30px),calc(20 * var(--m)));border-top:1px solid var(--line-2)}
.mt-pledges{--ic:max(calc(var(--mins) * 54px),calc(33 * var(--m)))}
.mt-pledges li{display:grid;grid-template-columns:var(--ic) minmax(0,1fr);column-gap:max(calc(var(--mins) * 16px),calc(10 * var(--m)));align-items:center;padding:max(calc(var(--mins) * 16px),calc(10 * var(--m))) 0;border-bottom:1px solid var(--line)}
.mt-pledges .ico{--ico-size:var(--ic);grid-row:1 / 3}
.mt-pledges b{font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 20px),calc(12.6 * var(--m)));line-height:1.05;text-transform:uppercase;color:var(--ink)}
.mt-pledges li > span:not(.ico){margin-top:3px;font-size:max(calc(var(--mins) * 14.5px),calc(6.9 * var(--m)));line-height:1.55;color:var(--ink-2)}

/* 03 · la scène « jusqu'au oui » : deux versions reprises, la troisième validée */
.mt-yes{position:relative;width:100%;max-width:max(calc(var(--mins) * 560px),calc(370 * var(--m)));aspect-ratio:420/320;justify-self:center}
.mt-yes::before{content:"";position:absolute;inset:6% 4% 0 18%;background:radial-gradient(closest-side,rgba(246,43,62,.14),transparent);pointer-events:none}
.y-card,.y-stamp{transform-box:fill-box;transform-origin:center}
.y-paper{fill:#0e0e10;stroke:rgba(245,243,238,.2);stroke-width:1}
.y-c3 .y-paper{stroke:rgba(246,43,62,.55)}
.y-ln{fill:none;stroke:rgba(245,243,238,.42);stroke-width:2.2;stroke-linecap:round}
.y-faint{stroke:rgba(245,243,238,.12);stroke-width:1}
.y-dot{fill:rgba(245,243,238,.25)}
.y-block{fill:rgba(245,243,238,.5)}
.y-img{fill:rgba(245,243,238,.05);stroke:rgba(245,243,238,.2);stroke-width:1}
.y-btn{fill:rgba(245,243,238,.18)}
.y-block--ok{fill:var(--ink)}
.y-img--ok{fill:rgba(246,43,62,.12);stroke:rgba(246,43,62,.5)}
.y-btn--ok{fill:var(--red)}
.y-mark{fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.y-tag{font-family:var(--f-mono);font-weight:500;font-size:9.5px;letter-spacing:.14em;fill:var(--red)}
.y-c1{transform:translate(86px,54px) rotate(-6deg)}
.y-c2{transform:translate(118px,86px) rotate(-3deg)}
.y-c3{transform:translate(150px,118px)}
.y-c1 .y-paper{fill:#09090a}
.y-c1 :is(.y-ln,.y-block,.y-img,.y-btn,.y-mark){opacity:.55}
.y-c2 .y-paper{fill:#0b0b0d}
.y-c2 :is(.y-ln,.y-block,.y-img,.y-btn,.y-mark){opacity:.75}
.y-stamp{transform:translate(352px,262px) rotate(-10deg)}
.y-ring{fill:none;stroke:var(--red);stroke-width:2.6}
.y-stamp .y-ring:first-child{fill:rgba(8,6,6,.92)}
#contenu .y-ring--in{stroke-width:1.1;stroke-dasharray:2.5 3.5}
.y-oui{font-family:var(--f-title);font-weight:700;font-size:30px;letter-spacing:.02em;fill:var(--red)}

html.mt-arm .mt-yes{opacity:0;transform:perspective(1400px) rotateX(18deg) translate3d(0,40px,0);transform-origin:50% 100%;transition:opacity .8s var(--e-out),transform 1.2s var(--e-io)}
html.mt-arm .mt-yes.is-play{opacity:1;transform:none}
html.mt-arm .mt-yes:not(.is-play) :is(.y-card,.y-stamp,.y-tag){opacity:0}
html.mt-arm .mt-yes:not(.is-play) .y-mark{stroke-dashoffset:1}
html.mt-arm .mt-yes.is-play .y-c1{animation:yC1 4.2s var(--e-io) both}
html.mt-arm .mt-yes.is-play .y-c2{animation:yC2 4.2s var(--e-io) both}
html.mt-arm .mt-yes.is-play .y-c3{animation:yC3 4.2s var(--e-io) both}
html.mt-arm .mt-yes.is-play .y-c1 .y-mark{animation:yMark1 4.2s linear both}
html.mt-arm .mt-yes.is-play .y-c1 .y-mark + .y-mark{animation-delay:.14s}
html.mt-arm .mt-yes.is-play .y-c2 .y-mark{animation:yMark2 4.2s linear both}
html.mt-arm .mt-yes.is-play .y-c2 .y-mark + .y-mark{animation-delay:.14s}
html.mt-arm .mt-yes.is-play .y-c1 .y-tag{animation:yTag1 4.2s linear both}
html.mt-arm .mt-yes.is-play .y-c2 .y-tag{animation:yTag2 4.2s linear both}
html.mt-arm .mt-yes.is-play .y-stamp{animation:yStamp 4.2s var(--e-out) both}
@keyframes yC1{0%{opacity:0;transform:translate(150px,150px) scale(.9)}12%{opacity:1;transform:translate(150px,118px)}30%{opacity:1;transform:translate(150px,118px)}44%,100%{opacity:1;transform:translate(86px,54px) rotate(-6deg)}}
@keyframes yC2{0%,30%{opacity:0;transform:translate(150px,150px) scale(.9)}42%{opacity:1;transform:translate(150px,118px)}58%{opacity:1;transform:translate(150px,118px)}70%,100%{opacity:1;transform:translate(118px,86px) rotate(-3deg)}}
@keyframes yC3{0%,58%{opacity:0;transform:translate(150px,150px) scale(.9)}70%,100%{opacity:1;transform:translate(150px,118px)}}
@keyframes yMark1{0%,13%{stroke-dashoffset:1}23%,100%{stroke-dashoffset:0}}
@keyframes yMark2{0%,44%{stroke-dashoffset:1}53%,100%{stroke-dashoffset:0}}
@keyframes yTag1{0%,25%{opacity:0}29%,100%{opacity:1}}
@keyframes yTag2{0%,54%{opacity:0}58%,100%{opacity:1}}
@keyframes yStamp{0%,74%{opacity:0;transform:translate(352px,262px) rotate(-26deg) scale(1.7)}84%{opacity:1;transform:translate(352px,262px) rotate(-10deg) scale(.94)}90%,100%{opacity:1;transform:translate(352px,262px) rotate(-10deg) scale(1)}}

/* 04 · l'e-mail : la fenêtre, l'adresse, puis les quatre points */
.mt-mail{position:relative;width:100%;max-width:max(calc(var(--mins) * 600px),calc(330 * var(--m)));justify-self:center;border:1px solid var(--line-2);border-radius:8px;background:linear-gradient(180deg,#121214,#0b0b0c);box-shadow:0 40px 80px -30px rgba(0,0,0,.92),0 0 70px -30px rgba(246,43,62,.38);overflow:hidden}
.mt-mail__bar{display:flex;align-items:center;gap:6px;height:max(calc(var(--mins) * 34px),calc(18 * var(--m)));padding:0 16px;background:#161618;border-bottom:1px solid var(--line)}
.mt-mail__bar i{width:8px;height:8px;border-radius:50%;background:#34343a}
.mt-mail__bar i:first-child{background:rgba(246,43,62,.75)}
.mt-mail__bar span{margin-left:10px;font-family:var(--f-mono);font-size:var(--fs-nano);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.mt-mail__fields p{display:flex;align-items:baseline;gap:14px;padding:max(calc(var(--mins) * 13px),calc(7 * var(--m))) max(calc(var(--mins) * 22px),calc(13 * var(--m)));border-bottom:1px solid var(--line);font-size:max(calc(var(--mins) * 15px),calc(7.2 * var(--m)));color:var(--ink)}
.mt-mail__fields small{flex:none;width:4.6em;font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.mt-mail__to{position:relative;font-weight:500}
.mt-mail__to::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:var(--red);box-shadow:0 0 8px var(--red-glow);transform-origin:left center}
.mt-mail__list{padding:max(calc(var(--mins) * 6px),calc(3 * var(--m))) max(calc(var(--mins) * 22px),calc(13 * var(--m))) max(calc(var(--mins) * 14px),calc(8 * var(--m)))}
.mt-mail__list{--ic:max(calc(var(--mins) * 50px),calc(29 * var(--m)))}
.mt-mail__list li{display:grid;grid-template-columns:var(--ic) minmax(0,1fr);column-gap:max(calc(var(--mins) * 16px),calc(10 * var(--m)));align-items:center;padding:max(calc(var(--mins) * 15px),calc(8.5 * var(--m))) 0;border-bottom:1px dashed rgba(255,255,255,.09)}
.mt-mail__list li:last-child{border-bottom:0}
.mt-mail__list .ico{--ico-size:var(--ic);grid-row:1 / 3}
.mt-mail__list b{font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 20px),calc(12.4 * var(--m)));line-height:1.05;text-transform:uppercase;color:var(--ink)}
.mt-mail__list li > span:not(.ico){margin-top:4px;font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.14em;line-height:1.45;text-transform:uppercase;color:var(--ink-3)}

html.mt-arm .mt-mail{opacity:0;transform:perspective(1400px) rotateX(16deg) translate3d(0,44px,0);transform-origin:50% 100%;transition:opacity .8s var(--e-out),transform 1.2s var(--e-io)}
html.mt-arm .mt-mail.is-play{opacity:1;transform:none}
html.mt-arm .mt-mail .mt-mail__to::after{transform:scaleX(0);transition:transform .7s var(--e-io) .7s}
html.mt-arm .mt-mail.is-play .mt-mail__to::after{transform:none}
html.mt-arm .mt-mail__list li{opacity:0;transform:translate3d(-14px,0,0);transition:opacity .6s var(--e-out),transform .8s var(--e-out);transition-delay:calc(.95s + var(--n) * .2s)}
html.mt-arm .mt-mail.is-play .mt-mail__list li{opacity:1;transform:none}

/* ==========================================================================
   Tablette et téléphone
   ========================================================================== */
@media (min-width:1024px) and (max-width:1279px){
  .mt-step__txt{font-size:14px}
}
@media (max-width:1023px){
  /* 01 : le parcours devient une colonne, la ligne descend le long des temps ;
     chaque temps arrive de la profondeur quand on l'atteint */
  .mt-route{--gap:44px;--dot:13px;grid-template-columns:1fr;row-gap:var(--gap);padding-left:34px;margin-top:6px}
  .mt-scene{aspect-ratio:16/10;max-width:520px;margin-bottom:18px}
  .mt-step__rail{position:absolute;left:-34px;top:0;bottom:calc(-1 * var(--gap));width:var(--dot);height:auto;margin:0}
  .mt-step__dot{top:0}
  .mt-step__seg{left:calc(var(--dot) / 2 - .5px);right:auto;top:calc(var(--dot) / 2);bottom:0;width:1px;height:auto;background-image:linear-gradient(180deg,rgba(255,255,255,.22) 50%,transparent 50%);background-size:1px 4px}
  .mt-step__seg i{left:-.5px;right:auto;top:0;bottom:0;width:2px;height:auto;background:linear-gradient(180deg,var(--red),var(--red-hi));transform-origin:center top}
  .mt-step:last-child .mt-step__seg{right:auto;bottom:auto;height:70px;-webkit-mask-image:linear-gradient(180deg,#000 20%,transparent);mask-image:linear-gradient(180deg,#000 20%,transparent)}
  html.mt-arm .mt-step:not(.is-go) .mt-step__seg i{transform:scaleY(0)}
  html.mt-arm .mt-route{opacity:1;transform:none}
  html.mt-arm .mt-step:not(.is-on) .mt-scene{opacity:0;transform:perspective(900px) rotateX(20deg) translate3d(0,34px,0)}
  .mt-step__title{font-size:26px}
  .mt-step__txt{font-size:15.5px;max-width:520px}
  .mt-step__you{font-size:12.5px}

  /* 03 et 04 : la scène sous le texte */
  .mt-duo{grid-template-columns:1fr;row-gap:40px}
  #engagements .mt-duo{grid-template-areas:"a" "b" "c";grid-template-rows:none;row-gap:0}
  #engagements .mt-yes{margin:34px 0 10px}
  .mt-yes{max-width:520px;justify-self:start}
  .mt-mail{max-width:560px;justify-self:start}
  .mt-pledges b{font-size:21px}
  .mt-pledges li > span:not(.ico){font-size:15px}
  .mt-pledges{--ic:50px}
  .mt-mail__list{--ic:48px}
  .mt-mail__list b{font-size:20px}
}
@media (max-width:420px){
  .mt-route{padding-left:30px}
  .mt-step__rail{left:-30px}
  .mt-mail__fields p,.mt-mail__list{padding-left:16px;padding-right:16px}
  .mt-mail__fields p{font-size:14px;gap:10px}
  .mt-mail__fields small{width:3.8em}
  .mt-mail__list b{font-size:18.5px}
  .mt-mail__list li{column-gap:14px}
}

/* animations réduites : tout est dessiné, immobile (filet si mt-arm restait posé) */
@media (prefers-reduced-motion:reduce){
  html.mt-arm .mt-route,html.mt-arm .mt-scene,html.mt-arm .mt-yes,html.mt-arm .mt-mail,html.mt-arm .mt-mail__list li{opacity:1;transform:none;transition:none}
  html.mt-arm #contenu *,html.mt-arm #contenu *::before,html.mt-arm #contenu *::after{animation:none!important}
}