/* ============================================================
   EchoFirst — bloc « Formation sur mesure » (.smx)
   4 propositions commutables (Tweak) : map / kinetic / steps / split.
   Panneau navy signature, animations déclenchées au scroll (.sm-in).
   À charger avec site/surmesure.js (+ site/france-map.js pour la carte).
   ============================================================ */
.smx{position:relative;overflow:hidden;border-radius:28px;background:var(--navy-dark);color:#fff;
  padding:clamp(40px,5vw,64px);}
.smx::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(640px 460px at 88% 8%,rgba(79,210,224,.12),transparent 62%),
             radial-gradient(520px 420px at 4% 100%,rgba(16,57,110,.5),transparent 70%);}
.smx>*{position:relative;}
.smx--xl{padding:clamp(52px,6vw,88px);border-radius:32px;}

/* ---------- éléments communs ---------- */
.smx-kicker{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--teal-vif);}
.smx-dot{width:7px;height:7px;border-radius:50%;background:var(--teal-vif);box-shadow:0 0 0 0 rgba(79,210,224,.6);}
@media(prefers-reduced-motion:no-preference){.smx-dot{animation:smxPulse 2.4s ease-out infinite;}}
@keyframes smxPulse{0%{box-shadow:0 0 0 0 rgba(79,210,224,.55);}70%{box-shadow:0 0 0 7px rgba(79,210,224,0);}100%{box-shadow:0 0 0 0 rgba(79,210,224,0);}}
.smx-title{margin-top:16px;font-size:clamp(30px,3.4vw,50px);font-weight:600;letter-spacing:-.028em;line-height:1.08;color:#fff;text-wrap:balance;}
.smx--xl .smx-title{font-size:clamp(36px,4.2vw,64px);}
.smx-title em{font-style:normal;color:var(--teal-vif);}
body.type-archivo .smx-title{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.036em;}
.smx-lead{margin-top:16px;max-width:480px;font-size:clamp(14px,1.1vw,16px);font-weight:300;line-height:1.62;color:rgba(255,255,255,.74);}
.smx-lead strong{color:#fff;font-weight:600;}
.smx-args{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px;}
.smx-arg{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:30px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);font-size:12.5px;font-weight:500;color:rgba(255,255,255,.85);}
.smx-arg::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--teal-vif);flex:none;}
.smx-cta{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding:15px 28px;border-radius:40px;
  background:#fff;color:var(--navy);font-weight:600;font-size:14.5px;text-decoration:none;
  box-shadow:0 14px 36px rgba(4,12,28,.4);transition:transform .22s,background .22s,box-shadow .22s;}
.smx-cta:hover{transform:translateY(-2px);background:#f1f4f9;box-shadow:0 18px 44px rgba(4,12,28,.5);}
.smx-cta svg{width:13px;height:13px;}

/* entrées au scroll — l'état final est le repos ; on anime DEPUIS caché
   seulement quand .sm-in arrive et que le mouvement est accepté.
   .sm-js est posée par surmesure.js : sans JS (markup SSR), rien n'est caché */
@media(prefers-reduced-motion:no-preference){
  .smx.sm-js .sm-up{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);}
  .smx.sm-in .sm-up{opacity:1;transform:none;}
  .smx.sm-in .sm-up.sd1{transition-delay:.08s;}
  .smx.sm-in .sm-up.sd2{transition-delay:.18s;}
  .smx.sm-in .sm-up.sd3{transition-delay:.28s;}
  .smx.sm-in .sm-up.sd4{transition-delay:.38s;}
}
@media print{.smx .sm-up{opacity:1!important;transform:none!important;}}

/* ============================================================
   1 · MAP — carte de France en points : on se déplace partout
   ============================================================ */
.smx-mapgrid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,64px);align-items:center;}
@media(max-width:900px){.smx-mapgrid{grid-template-columns:1fr;}}
.smx-scene{position:relative;aspect-ratio:1.15/1;max-height:420px;min-height:280px;}
.smx--xl .smx-scene{max-height:520px;}
.smx-scene--map{aspect-ratio:112/102;max-height:none;min-height:0;width:100%;max-width:560px;margin:0 auto;}
.smx--xl .smx-scene--map{max-width:640px;}
.smx-map{position:absolute;inset:0;max-width:none;margin:0;aspect-ratio:auto;}
.smx-map svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;}
.smx-map .fm-dot{fill:#fff;}

/* balayage sonar : visible uniquement en variante « sweep » */
.smx-map .fm-sweep{display:none;}
.smx-scene--map[data-anim="sweep"] .fm-sweep{display:block;}
@media(prefers-reduced-motion:no-preference){
  .smx-scene--map[data-anim="sweep"] .fm-sweep{animation:smxSweep 7s linear infinite;}
}
@keyframes smxSweep{0%{transform:translateX(0);}100%{transform:translateX(152px);}}

/* villes */
.smx-city{position:absolute;transform:translate(-50%,-50%);z-index:3;}
.smx-city .c{display:block;width:9px;height:9px;border-radius:50%;background:var(--teal-vif);
  box-shadow:0 0 0 3px rgba(79,210,224,.16),0 0 14px rgba(79,210,224,.5);}
.smx-city.min .c{width:6px;height:6px;background:rgba(255,255,255,.55);box-shadow:0 0 8px rgba(255,255,255,.25);}
.smx-city .r{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  border:1.5px solid var(--teal-vif);opacity:0;pointer-events:none;}
.smx-city b{position:absolute;top:50%;transform:translateY(-50%);font-size:10.5px;font-weight:600;
  color:rgba(255,255,255,.78);white-space:nowrap;text-shadow:0 1px 8px rgba(4,12,28,.8);}
.smx-city.tip-r b{left:calc(100% + 8px);}
.smx-city.tip-l b{right:calc(100% + 8px);}
@media(max-width:640px){.smx-city b{font-size:9.5px;}}

/* entrée des villes (stagger) */
@media(prefers-reduced-motion:no-preference){
  .smx .smx-city{opacity:0;transition:opacity .5s;transition-delay:calc(.35s + var(--i,0)*.05s);}
  .smx.sm-in .smx-city{opacity:1;}
}

/* variante « pings » : ondes qui s'allument un peu partout */
@media(prefers-reduced-motion:no-preference){
  .smx.sm-in [data-anim="pings"] .smx-city .r{animation:smxCityPing 5.8s var(--ease-out) infinite;animation-delay:var(--pd,0s);}
  .smx.sm-in [data-anim="pings"] .smx-city .c{animation:smxCityGlow 5.8s ease infinite;animation-delay:var(--pd,0s);}
  /* variante « sweep » : les villes s'illuminent au passage du front (cycle 7 s) */
  .smx.sm-in [data-anim="sweep"] .smx-city .r{animation:smxCityPing 7s var(--ease-out) infinite;animation-delay:var(--sd,0s);}
  .smx.sm-in [data-anim="sweep"] .smx-city .c{animation:smxCityGlow 7s ease infinite;animation-delay:var(--sd,0s);}
}
@keyframes smxCityPing{0%{transform:scale(1);opacity:.85;}16%{transform:scale(3.6);opacity:0;}100%{transform:scale(3.6);opacity:0;}}
@keyframes smxCityGlow{0%{transform:scale(1.5);}10%,100%{transform:scale(1);}}

/* variante « routes » : trajets qui voyagent entre les villes */
.smx-map .smx-net{z-index:2;display:none;}
.smx-scene--map[data-anim="routes"] .smx-net{display:block;}
.smx-net .leg{fill:none;stroke:var(--teal-vif);stroke-width:.7;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:0;opacity:.28;}
.smx-net .comet{fill:#fff;opacity:0;filter:drop-shadow(0 0 3px rgba(79,210,224,.9));}
.smx-net .arr{fill:none;stroke:var(--teal-vif);stroke-width:.6;opacity:0;transform-box:fill-box;transform-origin:center;}
@media(prefers-reduced-motion:no-preference){
  .smx-scene--map[data-anim="routes"] .leg{animation:smxLeg 18s linear infinite;}
  .smx-scene--map[data-anim="routes"] .comet{animation:smxComet 18s linear infinite;}
  .smx-scene--map[data-anim="routes"] .arr{animation:smxArr 18s linear infinite;}
}
@keyframes smxLeg{
  0%{stroke-dashoffset:1;opacity:0;}
  1.2%{opacity:.9;}
  8.33%{stroke-dashoffset:0;opacity:.9;}
  14%{opacity:0;stroke-dashoffset:0;}
  100%{opacity:0;stroke-dashoffset:0;}
}
@keyframes smxComet{
  0%{offset-distance:0%;opacity:0;}
  1%{opacity:1;}
  7.8%{opacity:1;}
  8.33%{offset-distance:100%;opacity:0;}
  100%{offset-distance:100%;opacity:0;}
}
@keyframes smxArr{
  0%,7.5%{transform:scale(.2);opacity:0;}
  8.6%{transform:scale(.4);opacity:.85;}
  14%{transform:scale(1);opacity:0;}
  100%{transform:scale(1);opacity:0;}
}

/* légende « + votre établissement » */
.smx-mapnote{position:absolute;left:0;bottom:2%;display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:30px;border:1px dashed rgba(255,255,255,.32);
  background:rgba(8,26,52,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:rgba(255,255,255,.72);font-size:12px;font-weight:500;white-space:nowrap;z-index:4;}
.smx-mapnote b{color:var(--teal-vif);font-weight:700;}
@media(max-width:640px){.smx-mapnote{font-size:11px;padding:7px 12px;}}

/* repère mobile « + votre établissement » sur la carte */
.smx-you{position:absolute;z-index:3;transform:translate(-50%,-50%);pointer-events:none;
  opacity:1;transition:opacity .38s ease;}
.smx-you.mv{opacity:0;}
.smx-you .yr{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
  border:1.5px dashed var(--teal-vif);border-radius:50%;}
.smx-you .yc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-style:normal;color:var(--teal-vif);font-size:15px;font-weight:700;line-height:1;
  text-shadow:0 0 8px rgba(79,210,224,.55);}
.smx-you b{position:absolute;left:50%;top:17px;transform:translateX(-50%);
  color:rgba(255,255,255,.92);font-size:10.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  background:rgba(8,26,52,.72);padding:3px 9px;border-radius:20px;border:1px solid rgba(79,210,224,.35);}
@media(prefers-reduced-motion:no-preference){
  .smx-you .yr{animation:smxYouSpin 16s linear infinite,smxYouPulse 2.6s ease-out infinite;}
}
@keyframes smxYouSpin{to{transform:rotate(360deg);}}
@keyframes smxYouPulse{0%{box-shadow:0 0 0 0 rgba(79,210,224,.4);}70%{box-shadow:0 0 0 10px rgba(79,210,224,0);}100%{box-shadow:0 0 0 0 rgba(79,210,224,0);}}
@media(max-width:640px){.smx-you b{font-size:9.5px;}}

/* Carte STATIQUE (blocs de bas de page — animations retirées, audit SEO) :
   villes visibles d'emblée (pas de fondu au scroll), repère « + votre structure »
   figé. Les trajets (.smx-net) restent masqués (aucun data-anim="routes"). */
.smx-scene--map[data-anim="static"] .smx-city{opacity:1;transition:none;}
@media(prefers-reduced-motion:no-preference){
  .smx-scene--map[data-anim="static"] .smx-you .yr{animation:none;}
}

/* ============================================================
   2 · KINETIC — grande typo révélée + bandeau d'arguments statique
   ============================================================ */
.smx-kin .smx-lines{margin-top:20px;}
.smx-kin .l{display:block;overflow:hidden;}
.smx-kin .l i{display:block;font-style:normal;font-weight:600;letter-spacing:-.03em;line-height:1.08;
  font-size:clamp(38px,5vw,72px);color:#fff;}
.smx--xl .smx-kin .l i{font-size:clamp(44px,5.8vw,86px);}
body.type-archivo .smx-kin .l i{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.038em;}
.smx-kin .l i em{font-style:normal;color:var(--teal-vif);}
.smx-kin .l .dim{color:rgba(255,255,255,.42);}
@media(prefers-reduced-motion:no-preference){
  .smx-kin .l i{transform:translateY(112%);transition:transform .8s var(--ease-out);}
  .smx.sm-in .smx-kin .l:nth-child(1) i{transform:none;transition-delay:.05s;}
  .smx.sm-in .smx-kin .l:nth-child(2) i{transform:none;transition-delay:.17s;}
  .smx.sm-in .smx-kin .l:nth-child(3) i{transform:none;transition-delay:.29s;}
}

/* variante « rule » : filet d'arguments statique, pleine largeur */
.smx-rule{margin:30px calc(clamp(40px,5vw,64px) * -1) 0;padding:15px clamp(40px,5vw,64px);
  border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 22px;
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62);}
.smx--xl .smx-rule{margin:30px calc(clamp(52px,6vw,88px) * -1) 0;padding:15px clamp(52px,6vw,88px);}
.smx-rule .sep{color:var(--teal-vif);font-size:9px;}
@media(max-width:1000px){.smx-rule{justify-content:flex-start;}.smx-rule .sep{display:none;}}

/* variante « chips » : puces statiques */
.smx-kstrip{margin-top:26px;}
.smx-kstrip .smx-args{margin-top:0;}

.smx-kfoot{margin-top:26px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.smx-kfoot .smx-lead{margin-top:0;}
.smx-kfoot .smx-cta{margin-top:0;flex:none;}

/* ============================================================
   3 · STEPS — séquence en 3 temps
   ============================================================ */
.smx-shead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.smx-shead .smx-cta{margin-top:0;}
.smx-track{position:relative;margin-top:38px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,34px);}
@media(max-width:820px){.smx-track{grid-template-columns:1fr;}}
.smx-prog{position:absolute;left:0;right:0;top:23px;height:1.5px;background:rgba(255,255,255,.14);}
.smx-prog i{position:absolute;inset:0;background:linear-gradient(90deg,var(--teal-vif),rgba(79,210,224,.2));transform-origin:left;transform:scaleX(0);}
@media(prefers-reduced-motion:no-preference){
  .smx.sm-in .smx-prog i{transform:scaleX(1);transition:transform 1.6s var(--ease-out) .2s;}
}
@media(prefers-reduced-motion:reduce){.smx-prog i{transform:scaleX(1);}}
@media(max-width:820px){.smx-prog{display:none;}}
.smx-step{position:relative;padding-top:12px;}
.smx-step .n{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  background:var(--navy-dark);border:1.5px solid rgba(79,210,224,.55);color:var(--teal-vif);
  font-size:14px;font-weight:700;letter-spacing:.04em;margin-top:-12px;}
.smx-step h3{margin-top:16px;font-size:17.5px;font-weight:600;color:#fff;line-height:1.3;}
.smx-step p{margin-top:8px;font-size:13.5px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.68);}

/* ============================================================
   4 · SPLIT — photo + devis express
   ============================================================ */
.smx-split{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,4vw,60px);align-items:center;}
@media(max-width:900px){.smx-split{grid-template-columns:1fr;}}
.smx-photo{position:relative;border-radius:20px;overflow:hidden;min-height:300px;align-self:stretch;
  border:1px solid rgba(255,255,255,.14);}
.smx-photo image-slot{position:absolute;inset:0;width:100%;height:100%;display:block;}
.smx-photo .ph-fallback{position:absolute;inset:0;display:flex;align-items:flex-end;padding:14px;
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 10px,rgba(255,255,255,.09) 10px 20px);
  font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:11px;color:rgba(255,255,255,.5);}
.smx-form{margin-top:26px;display:flex;flex-direction:column;gap:10px;max-width:440px;}
.smx-form input{height:50px;padding:0 18px;border-radius:14px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:#fff;font-family:inherit;font-size:14px;transition:border-color .2s,background .2s;}
.smx-form input::placeholder{color:rgba(255,255,255,.45);}
.smx-form input:focus{outline:none;border-color:var(--teal-vif);background:rgba(255,255,255,.09);}
.smx-form button{height:50px;border:none;border-radius:14px;background:#fff;color:var(--navy);
  font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;transition:transform .2s,background .2s;}
.smx-form button:hover{transform:translateY(-1px);background:#f1f4f9;}
.smx-ok{margin-top:14px;display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:var(--teal-vif);}
.smx-ok::before{content:'✓';font-weight:700;}

/* ============================================================
   Repli sans FranceMap — scène sonar historique
   ============================================================ */
.smx-rings{position:absolute;left:50%;top:54%;width:1px;height:1px;}
.smx-rings i{position:absolute;left:50%;top:50%;width:var(--d);height:var(--d);margin-left:calc(var(--d)/-2);margin-top:calc(var(--d)/-2);
  border-radius:50%;border:1.5px solid rgba(79,210,224,.5);opacity:.25;}
.smx-rings i:nth-child(1){--d:110px;}
.smx-rings i:nth-child(2){--d:230px;}
.smx-rings i:nth-child(3){--d:350px;}
.smx-rings i:nth-child(4){--d:470px;}
@media(prefers-reduced-motion:no-preference){
  .smx.sm-in .smx-rings i{animation:smxRing 4.2s var(--ease-out) infinite;}
  .smx.sm-in .smx-rings i:nth-child(1){animation-delay:0s;}
  .smx.sm-in .smx-rings i:nth-child(2){animation-delay:1.05s;}
  .smx.sm-in .smx-rings i:nth-child(3){animation-delay:2.1s;}
  .smx.sm-in .smx-rings i:nth-child(4){animation-delay:3.15s;}
}
@keyframes smxRing{0%{transform:scale(.12);opacity:0;}12%{opacity:.85;}100%{transform:scale(1.06);opacity:0;}}
.smx-emit{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;white-space:nowrap;z-index:2;}
.smx-emit b{width:16px;height:16px;border-radius:50%;background:var(--teal-vif);
  box-shadow:0 0 0 5px rgba(79,210,224,.22),0 0 26px rgba(79,210,224,.8);}
.smx-pin{position:absolute;display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.85);white-space:nowrap;}
.smx-pin i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.85);flex:none;box-shadow:0 0 12px rgba(255,255,255,.5);}
@media(prefers-reduced-motion:no-preference){
  .smx .smx-pin{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s;}
  .smx.sm-in .smx-pin{opacity:1;transform:none;}
}
.smx-grid{position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.5px);background-size:26px 26px;
  mask-image:radial-gradient(closest-side at 50% 54%,#000,transparent);
  -webkit-mask-image:radial-gradient(closest-side at 50% 54%,#000,transparent);}