/* site.css */
@font-face{font-family:'Plus Jakarta Sans';font-weight:400;font-display:swap;src:url(/wp-content/plugins/monga-site-v9/assets/fonts/plus-jakarta-sans-400.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:500;font-display:swap;src:url(/wp-content/plugins/monga-site-v9/assets/fonts/plus-jakarta-sans-500.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:600;font-display:swap;src:url(/wp-content/plugins/monga-site-v9/assets/fonts/plus-jakarta-sans-600.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:700;font-display:swap;src:url(/wp-content/plugins/monga-site-v9/assets/fonts/plus-jakarta-sans-700.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:800;font-display:swap;src:url(/wp-content/plugins/monga-site-v9/assets/fonts/plus-jakarta-sans-800.woff2) format('woff2')}
/* =========================================================
   MONGA · Page d'accueil · style.css
   Charte : marine #031852 · bleu #1A5CFF (accent uniquement) · blanc dominant
   Toutes les classes sont préfixées « mg- » (intégration WordPress / Elementor)
   ========================================================= */

:root{
  --mg-navy:#031852;
  --mg-blue:#1A5CFF;
  --mg-blue-h:#0F46D8;
  --mg-tint:#EEF3FF;
  --mg-mute:#5B6687;
  --mg-line:#E6E9F0;
  --mg-grey:#F7F8F9;
  --mg-grid:#EEF1F7;
  --mg-green:#22A55B;
  --mg-orange:#E0782A;
  --mg-red:#E0453A;
  --mg-white:#FFFFFF;

  --mg-font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mg-max:1200px;
  --mg-gutter:24px;
  --mg-section:120px;

  --mg-r-sm:12px;
  --mg-r:20px;
  --mg-r-lg:28px;
  --mg-pill:999px;

  --mg-shadow:0 24px 48px -28px rgba(3,24,82,.25);
  --mg-shadow-h:0 30px 60px -28px rgba(3,24,82,.34);
  --mg-shadow-app:0 40px 80px -36px rgba(3,24,82,.35),0 0 0 1px var(--mg-line);
  --mg-ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- base (spécificité nulle pour ne pas gêner le thème) ---------- */
.mg,.mg *,.mg *::before,.mg *::after{box-sizing:border-box}
.mg{font-family:var(--mg-font);color:var(--mg-navy);background:var(--mg-white);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
:where(.mg) :where(h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd){margin:0}
:where(.mg) :where(ul,ol){padding:0;list-style:none}
:where(.mg) img{max-width:100%;height:auto;display:block}
:where(.mg) a{color:inherit;text-decoration:none}
:where(.mg) button{font:inherit;color:inherit;cursor:pointer}
.mg ::selection{background:var(--mg-tint);color:var(--mg-navy)}
.mg :focus-visible{outline:2px solid var(--mg-blue);outline-offset:3px;border-radius:6px}
.mg [hidden]{display:none!important}
.mg-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mg-skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--mg-navy);color:#fff;padding:10px 16px;border-radius:10px;font-weight:700}
.mg-skip:focus{top:12px}
.mg-wrap{width:100%;max-width:calc(var(--mg-max) + var(--mg-gutter)*2);margin:0 auto;padding:0 var(--mg-gutter)}
.mg-section{position:relative;padding:var(--mg-section) 0}
.mg-section--grey{background:var(--mg-grey)}
.mg-ico{width:1em;height:1em;flex:none;display:inline-block;vertical-align:middle}

/* ---------- typographie ---------- */
.mg-kicker{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mg-blue)}
.mg-kicker .mg-ico{width:30px;height:10px}
.mg-h1{font-size:clamp(44px,5.6vw,76px);font-weight:800;letter-spacing:-.04em;line-height:1.02}
.mg-h2{font-size:clamp(32px,4vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.08}
.mg-h3{font-size:20px;font-weight:800;letter-spacing:-.015em;line-height:1.3}
.mg-lead{font-size:clamp(17px,1.4vw,19px);color:var(--mg-mute);line-height:1.6;max-width:640px}
.mg-text{color:var(--mg-mute)}
.mg-accent{color:var(--mg-blue)}
.mg-head{display:grid;gap:18px;margin-bottom:56px;max-width:780px}
.mg-head--center{text-align:center;justify-items:center;margin-left:auto;margin-right:auto}

/* ---------- boutons ---------- */
.mg-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:var(--mg-pill);border:1.5px solid transparent;font-size:16px;font-weight:700;line-height:1;white-space:nowrap;transition:background .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s}
.mg-btn .mg-ico{width:18px;height:18px;transition:transform .18s}
.mg-btn:hover .mg-ico--arrow{transform:translateX(3px)}
.mg-btn--primary{background:var(--mg-blue);color:#fff;box-shadow:0 12px 26px -14px rgba(26,92,255,.9)}
.mg-btn--primary:hover{background:var(--mg-blue-h);transform:translateY(-1px)}
.mg-btn--ghost{background:#fff;color:var(--mg-navy);border-color:var(--mg-line)}
.mg-btn--ghost:hover{border-color:var(--mg-blue);color:var(--mg-blue);transform:translateY(-1px)}
.mg-btn--block{width:100%}
.mg-btn--sm{min-height:44px;padding:0 20px;font-size:15px}
.mg-link{position:relative;font-weight:700;color:var(--mg-blue);background:linear-gradient(currentColor,currentColor) left bottom/0 1.5px no-repeat;transition:background-size .25s}
.mg-link:hover{background-size:100% 1.5px}

/* ---------- cartes ---------- */
.mg-card{background:#fff;border:1px solid var(--mg-line);border-radius:var(--mg-r-lg);box-shadow:var(--mg-shadow);transition:transform .25s var(--mg-ease),box-shadow .25s var(--mg-ease),border-color .25s}
.mg-card--hover:hover{transform:translateY(-4px);box-shadow:var(--mg-shadow-h)}
.mg-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--mg-pill);border:1px solid var(--mg-line);background:#fff;font-size:14px;font-weight:600;color:var(--mg-navy)}
.mg-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;font-size:12px;font-weight:700;line-height:1.4;white-space:nowrap}
.mg-badge--red{background:#FDEBEA;color:var(--mg-red)}
.mg-badge--green{background:#E7F6EC;color:#1E8A4B}
.mg-badge--blue{background:var(--mg-tint);color:var(--mg-blue)}
.mg-badge--grey{background:var(--mg-grey);color:var(--mg-mute)}

/* =========================================================
   EN-TÊTE
   ========================================================= */
.mg-header{position:fixed;inset:0 0 auto 0;z-index:60;height:80px;display:flex;align-items:center;background:rgba(255,255,255,.85);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:height .25s var(--mg-ease),border-color .25s,box-shadow .25s}
.mg-header.mg-is-scrolled{height:68px;border-bottom-color:var(--mg-line)}
.mg-header__in{display:flex;align-items:center;gap:28px}
.mg-logo{display:flex;align-items:center}
.mg-logo img{height:28px;width:auto}
.mg-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.mg-nav__item{position:relative}
.mg-nav__link{display:flex;align-items:center;gap:6px;padding:10px 14px;white-space:nowrap;border:0;background:none;border-radius:10px;font-size:15px;font-weight:600;color:var(--mg-navy);transition:background .18s,color .18s}
.mg-nav__link:hover,.mg-nav__item:focus-within>.mg-nav__link{background:var(--mg-grey)}
.mg-nav__link .mg-ico{width:14px;height:14px;color:var(--mg-mute);transition:transform .2s}
.mg-nav__item:hover .mg-nav__link .mg-ico,.mg-nav__item:focus-within .mg-nav__link .mg-ico{transform:rotate(180deg)}
.mg-drop{position:absolute;top:calc(100% + 10px);left:-8px;min-width:290px;padding:8px;border-radius:18px;background:#fff;border:1px solid var(--mg-line);box-shadow:0 30px 60px -24px rgba(3,24,82,.3);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s}
.mg-drop::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.mg-nav__item:hover .mg-drop,.mg-nav__item:focus-within .mg-drop{opacity:1;visibility:visible;transform:none}
.mg-drop a{display:grid;gap:2px;padding:12px 14px;border-radius:12px;font-size:15px;font-weight:700}
.mg-drop a span{font-size:13px;font-weight:500;color:var(--mg-mute)}
.mg-drop a:hover{background:var(--mg-grey)}
.mg-header__cta{display:flex;align-items:center;gap:18px}
.mg-header__login{font-size:15px;font-weight:600;white-space:nowrap}
.mg-header__login:hover{color:var(--mg-blue)}
.mg-burger{display:none;margin-left:auto;width:46px;height:46px;border-radius:12px;border:1px solid var(--mg-line);background:#fff;align-items:center;justify-content:center}
.mg-burger .mg-ico{width:22px;height:22px}
.mg-mnav{display:none}

/* =========================================================
   HERO
   ========================================================= */
.mg-hero{position:relative;padding:132px 0 140px;overflow:hidden}
.mg-hero__grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--mg-grid) 1px,transparent 1px),linear-gradient(90deg,var(--mg-grid) 1px,transparent 1px);background-size:48px 48px;background-position:center top;-webkit-mask-image:radial-gradient(ellipse 70% 65% at 60% 38%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 65% at 60% 38%,#000 20%,transparent 75%);pointer-events:none}
.mg-hero__roof{position:absolute;left:50%;top:40px;width:1400px;max-width:none;transform:translateX(-30%);pointer-events:none}
.mg-hero__in{position:relative;display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center}
.mg-hero__text{display:grid;gap:24px;align-content:start}
.mg-hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.mg-proof{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:13.5px;color:var(--mg-mute)}
.mg-proof a{display:inline-flex;align-items:center;gap:10px;color:var(--mg-navy)}
.mg-proof a:hover strong{color:var(--mg-blue)}
.mg-proof strong{font-weight:700}
.mg-proof__sep{width:1px;height:18px;background:var(--mg-line)}
.mg-stars{display:inline-flex;gap:2px;color:var(--mg-blue)}
.mg-stars .mg-ico{width:15px;height:15px}
/* sélecteur « Vous êtes » */
.mg-persona{display:grid;gap:14px;margin-top:10px;padding-top:24px;border-top:1px solid var(--mg-line)}
.mg-persona__label{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mg-mute)}
.mg-persona__chips{display:flex;flex-wrap:wrap;gap:8px}
.mg-persona__chip{padding:8px 14px;border-radius:var(--mg-pill);border:1px solid var(--mg-line);background:#fff;font-size:14px;font-weight:600;transition:background .18s,border-color .18s,color .18s}
.mg-persona__chip:hover{border-color:var(--mg-blue);color:var(--mg-blue)}
.mg-persona__chip[aria-pressed="true"]{background:var(--mg-navy);border-color:var(--mg-navy);color:#fff}
.mg-persona__text{min-height:3.1em;font-size:15.5px;color:var(--mg-mute);max-width:560px;transition:opacity .2s}
.mg-persona__text.mg-is-out{opacity:0}
/* arc d'horizon */
.mg-arc{position:absolute;left:0;right:0;bottom:0;height:130px;pointer-events:none}
.mg-arc svg{position:absolute;left:50%;bottom:0;width:max(1600px,120%);height:130px;transform:translateX(-50%)}
.mg-arc__spark{stroke-dasharray:90 4000;animation:mg-spark 9s linear infinite}
@keyframes mg-spark{from{stroke-dashoffset:600}to{stroke-dashoffset:-3600}}

/* ---------- maquette d'application (hero) ---------- */
.mg-mock{position:relative;perspective:1800px;padding:34px 0 40px}
.mg-app{position:relative;background:#fff;border-radius:22px;box-shadow:var(--mg-shadow-app);overflow:hidden;transform:rotateY(-8deg) rotateX(4deg);transform-origin:60% 50%}
.mg-app__bar{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-bottom:1px solid var(--mg-line);background:#FBFCFD}
.mg-app__bar i{width:9px;height:9px;border-radius:50%;background:#DDE2EA}
.mg-app__body{display:grid;grid-template-columns:52px 1fr}
.mg-app__side{display:grid;align-content:start;justify-items:center;gap:16px;padding:16px 0;background:#FBFCFD;border-right:1px solid var(--mg-line)}
.mg-app__side img{width:24px}
.mg-app__side b{width:20px;height:20px;border-radius:6px;background:#EEF1F6}
.mg-app__side b.mg-is-on{background:var(--mg-tint);box-shadow:inset 0 0 0 2px var(--mg-blue)}
.mg-app__main{padding:16px 18px 20px;display:grid;gap:10px}
.mg-app__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.mg-app__head strong{font-size:16px}
.mg-app__head span{font-size:11px;font-weight:700;padding:7px 12px;border-radius:var(--mg-pill);background:var(--mg-blue);color:#fff}
.mg-mrow{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--mg-line);border-radius:12px}
.mg-mrow__ic{width:30px;height:30px;border-radius:9px;background:var(--mg-grey);display:flex;align-items:center;justify-content:center;color:var(--mg-mute)}
.mg-mrow__ic .mg-ico{width:16px;height:16px}
.mg-mrow strong{display:block;font-size:12.5px;line-height:1.3}
.mg-mrow small{display:block;font-size:11px;color:var(--mg-mute)}
.mg-seg{display:flex;gap:3px}
.mg-seg i{width:16px;height:5px;border-radius:3px;background:#E6E9F0}
.mg-seg i.mg-g{background:var(--mg-green)}
.mg-seg i.mg-b{background:var(--mg-blue)}
/* carte mission au premier plan */
.mg-mcard{position:absolute;left:-28px;bottom:0;width:min(330px,78%);padding:16px 16px 18px;background:#fff;border-radius:18px;box-shadow:0 30px 60px -24px rgba(3,24,82,.35),0 0 0 1px var(--mg-line);display:grid;gap:10px}
.mg-mcard__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mg-mcard__top strong{font-size:15px}
.mg-mcard small{font-size:12px;color:var(--mg-mute)}
.mg-prog{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.mg-prog i{position:relative;height:6px;border-radius:3px;background:#E6E9F0;overflow:hidden}
.mg-prog i::after{content:"";position:absolute;inset:0;background:var(--mg-green);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--mg-ease)}
.mg-prog__l{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;font-size:10px;font-weight:700;color:var(--mg-mute)}
.mg-mcard__btn{position:relative;height:36px;border-radius:var(--mg-pill);background:var(--mg-blue);color:#fff;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mg-mcard__btn span{transition:opacity .3s}
.mg-mcard__btn .mg-is-ok{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--mg-green);opacity:0;transition:opacity .3s}
.mg-mcard__done{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#1E8A4B;opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.mg-mcard__done i{width:20px;height:20px;border-radius:50%;background:var(--mg-green);color:#fff;display:flex;align-items:center;justify-content:center}
.mg-mcard__done .mg-ico{width:12px;height:12px}
.mg-notif{position:absolute;right:-10px;top:0;display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border-radius:14px;box-shadow:0 24px 50px -22px rgba(3,24,82,.35),0 0 0 1px var(--mg-line);opacity:0;transform:translateY(-10px);transition:opacity .4s,transform .4s var(--mg-ease)}
.mg-notif__ic{width:32px;height:32px;border-radius:10px;background:var(--mg-tint);color:var(--mg-blue);display:flex;align-items:center;justify-content:center}
.mg-notif__ic .mg-ico{width:16px;height:16px}
.mg-notif strong{display:block;font-size:12.5px}
.mg-notif small{display:block;font-size:11px;color:var(--mg-mute)}
/* états de la boucle (classes posées par le JS ; état final par défaut sans JS) */
.mg-mock[data-step="2"] .mg-prog i:nth-child(-n+2)::after,
.mg-mock[data-step="3"] .mg-prog i:nth-child(-n+3)::after,
.mg-mock[data-step="4"] .mg-prog i::after,
.mg-mock:not([data-step]) .mg-prog i::after{transform:scaleX(1)}
.mg-mock[data-step="1"] .mg-prog i:first-child::after{transform:scaleX(1)}
.mg-mock[data-step="2"] .mg-notif,.mg-mock[data-step="3"] .mg-notif{opacity:1;transform:none}
.mg-mock[data-step="3"] .mg-mcard__btn .mg-is-ok,.mg-mock[data-step="4"] .mg-mcard__btn .mg-is-ok,.mg-mock:not([data-step]) .mg-mcard__btn .mg-is-ok{opacity:1}
.mg-mock[data-step="4"] .mg-mcard__done,.mg-mock:not([data-step]) .mg-mcard__done{opacity:1;transform:none}

/* =========================================================
   LOGOS CLIENTS
   ========================================================= */
.mg-logos{padding:48px 0 72px}
.mg-logos__label{text-align:center;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mg-mute);margin-bottom:30px}
.mg-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mg-marquee__track{display:flex;align-items:center;gap:64px;width:max-content;animation:mg-marquee 60s linear infinite}
.mg-marquee:hover .mg-marquee__track{animation-play-state:paused}
.mg-marquee__set{display:flex;align-items:center;gap:64px}
.mg-marquee img{height:38px;width:auto;max-width:150px;object-fit:contain}
@keyframes mg-marquee{to{transform:translateX(calc(-50% - 32px))}}

/* =========================================================
   CONSTAT
   ========================================================= */

/* =========================================================
   RÉPONSE : un logiciel ET un service
   ========================================================= */

/* =========================================================
   FONCTIONNEMENT : étapes épinglées
   ========================================================= */
.mg-steps{display:grid;gap:24px}
.mg-step{display:grid;gap:22px;padding:28px;border:1px solid var(--mg-line);border-radius:var(--mg-r-lg);background:#fff;box-shadow:var(--mg-shadow)}
.mg-step__n{font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--mg-blue)}
.mg-step__lab{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mg-mute)}
.mg-step__big{font-size:clamp(34px,3.6vw,48px);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.mg-step__txt{color:var(--mg-mute);max-width:420px}
.mg-step__head{display:grid;gap:10px}
.mg-screen{border-radius:var(--mg-r);background:#fff;box-shadow:var(--mg-shadow-app);overflow:hidden}
.mg-screen__bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-bottom:1px solid var(--mg-line);background:#FBFCFD}
.mg-screen__bar i{width:8px;height:8px;border-radius:50%;background:#DDE2EA}
.mg-screen__bar b{margin-left:10px;font-size:11px;font-weight:700;color:var(--mg-mute)}
.mg-screen__body{padding:22px;display:grid;gap:14px}
.mg-field-demo{display:grid;gap:6px}
.mg-field-demo label{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mg-mute)}
.mg-field-demo div{padding:11px 14px;border:1px solid var(--mg-line);border-radius:12px;font-size:14px;font-weight:600}
.mg-field-demo div.mg-is-focus{border-color:var(--mg-blue);box-shadow:0 0 0 4px var(--mg-tint)}
.mg-cats{display:flex;flex-wrap:wrap;gap:6px}
.mg-cats span{padding:6px 12px;border-radius:var(--mg-pill);border:1px solid var(--mg-line);font-size:12.5px;font-weight:700}
.mg-cats span.mg-is-on{background:var(--mg-blue);border-color:var(--mg-blue);color:#fff}
.mg-urg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:var(--mg-grey);border-radius:12px;font-size:12.5px;font-weight:700;text-align:center}
.mg-urg span{padding:8px;border-radius:9px}
.mg-urg span.mg-is-on{background:#FDEBEA;color:var(--mg-red)}
.mg-devis{display:grid;gap:10px;padding:18px;border-radius:16px;background:var(--mg-grey)}
.mg-devis__k{font-size:10.5px;font-weight:800;letter-spacing:.14em;color:var(--mg-mute)}
.mg-devis strong{font-size:17px}
.mg-devis__btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.mg-fake-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border-radius:var(--mg-pill);font-size:13px;font-weight:700;border:1.5px solid var(--mg-line);background:#fff}
.mg-fake-btn--blue{background:var(--mg-blue);border-color:var(--mg-blue);color:#fff}
.mg-person{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--mg-line);border-radius:14px}
.mg-person__av{width:40px;height:40px;border-radius:50%;background:var(--mg-tint);color:var(--mg-blue);display:flex;align-items:center;justify-content:center}
.mg-person__av .mg-ico{width:20px;height:20px}
.mg-person strong{display:block;font-size:14px}
.mg-person small{display:block;font-size:12px;color:var(--mg-mute)}
.mg-done{display:flex;align-items:center;gap:14px}
.mg-done__ic{width:52px;height:52px;border-radius:50%;background:var(--mg-green);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px -12px rgba(34,165,91,.8)}
.mg-done__ic .mg-ico{width:26px;height:26px}
.mg-done strong{font-size:20px}
.mg-filerow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid var(--mg-line);border-radius:12px;font-size:13.5px;font-weight:700}
.mg-filerow span:first-child{display:flex;align-items:center;gap:8px}
.mg-filerow .mg-ico{width:16px;height:16px;color:var(--mg-mute)}
/* barre de progression des étapes (desktop) */
.mg-steps-nav{display:none}

/* exemple réel : avant / après */
.mg-example{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:var(--mg-r-lg);border:1px solid var(--mg-line);background:#fff;box-shadow:var(--mg-shadow)}
.mg-ba{position:relative;aspect-ratio:600/580;overflow:hidden;background:var(--mg-grey);--pos:50%;user-select:none}
.mg-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mg-ba__after{clip-path:inset(0 0 0 var(--pos))}
.mg-ba__line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(3,24,82,.12);pointer-events:none}
.mg-ba__knob{position:absolute;top:50%;left:var(--pos);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;color:var(--mg-blue);box-shadow:0 10px 24px -8px rgba(3,24,82,.4);display:flex;align-items:center;justify-content:center;pointer-events:none}
.mg-ba__knob .mg-ico{width:22px;height:22px}
.mg-ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.mg-ba__range:focus-visible~.mg-ba__knob{outline:2px solid var(--mg-blue);outline-offset:3px}
.mg-ba__tag{position:absolute;top:14px;padding:5px 12px;border-radius:var(--mg-pill);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.mg-ba__tag--b{left:14px;background:var(--mg-navy);color:#fff}
.mg-ba__tag--a{right:14px;background:var(--mg-blue);color:#fff}
.mg-example__txt{padding:44px;display:grid;gap:18px;align-content:center}
.mg-example__k{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mg-mute)}
.mg-example__nums{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.mg-example__nums strong{display:block;font-size:clamp(40px,4vw,56px);font-weight:800;letter-spacing:-.045em;line-height:1}
.mg-example__nums span{display:block;margin-top:8px;font-size:15px;color:var(--mg-mute)}
.mg-hint{font-size:13px;color:var(--mg-mute);display:flex;align-items:center;gap:8px}

/* =========================================================
   CONTRÔLE (carte devis interactive)
   ========================================================= */
.mg-ctrl{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.mg-checks{margin-top:30px}
.mg-checks li{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:center;padding:18px 0;border-bottom:1px solid var(--mg-line);font-size:17px;font-weight:600}
.mg-checks li:first-child{border-top:1px solid var(--mg-line)}
.mg-checks .mg-ico{width:22px;height:22px;color:var(--mg-blue)}
.mg-dcard{padding:28px;display:grid;gap:18px}
.mg-dcard__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mg-dcard__id{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--mg-blue)}
.mg-dcard__t{font-size:24px;font-weight:800;letter-spacing:-.02em}
.mg-dcard .mg-prog i::after{transition:transform .5s var(--mg-ease)}
.mg-dcard[data-state="init"] .mg-prog i:nth-child(1)::after,
.mg-dcard[data-state="refused"] .mg-prog i:nth-child(1)::after{transform:scaleX(1)}
.mg-dcard[data-state="init"] .mg-prog i:nth-child(2)::after,.mg-dcard[data-state="refused"] .mg-prog i:nth-child(2)::after{transform:scaleX(.5);background:var(--mg-blue)}
.mg-dcard[data-state="validated"] .mg-prog i:nth-child(-n+2)::after{transform:scaleX(1)}
.mg-dcard[data-state="validated"] .mg-prog i:nth-child(3)::after{transform:scaleX(.5);background:var(--mg-blue)}
.mg-dcard__btns{display:flex;flex-wrap:wrap;gap:10px}
.mg-dbtn{min-height:46px;padding:0 20px;border-radius:var(--mg-pill);font-size:15px;font-weight:700;border:1.5px solid var(--mg-line);background:#fff;display:inline-flex;align-items:center;gap:8px;transition:background .2s,border-color .2s,color .2s,transform .15s}
.mg-dbtn:hover{border-color:var(--mg-navy)}
.mg-dbtn:active{transform:scale(.97)}
.mg-dbtn--ok{background:var(--mg-blue);border-color:var(--mg-blue);color:#fff}
.mg-dbtn--ok:hover{background:var(--mg-blue-h);border-color:var(--mg-blue-h)}
.mg-dbtn .mg-ico{width:18px;height:18px}
.mg-dcard[data-state="validated"] .mg-dbtn--ok{background:var(--mg-green);border-color:var(--mg-green)}
.mg-dcard__msg{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:14px;font-size:15px;font-weight:600;min-height:52px}
.mg-dcard[data-state="init"] .mg-dcard__msg{background:var(--mg-grey);color:var(--mg-mute)}
.mg-dcard[data-state="validated"] .mg-dcard__msg{background:#E7F6EC;color:#1E6E40}
.mg-dcard[data-state="refused"] .mg-dcard__msg{background:var(--mg-tint);color:var(--mg-navy)}
.mg-dcard__reset{justify-self:start;border:0;background:none;padding:0;font-size:14px;font-weight:600;color:var(--mg-mute);text-decoration:underline;text-underline-offset:3px}
.mg-dcard__reset:hover{color:var(--mg-blue)}

/* =========================================================
   APPLICATION (onglets)
   ========================================================= */
.mg-tabs__list{display:inline-flex;gap:4px;padding:5px;border-radius:var(--mg-pill);background:var(--mg-grey);border:1px solid var(--mg-line);margin-bottom:40px;flex-wrap:wrap}
.mg-tab{min-height:44px;padding:0 20px;border:0;border-radius:var(--mg-pill);background:none;font-size:15px;font-weight:700;color:var(--mg-mute);transition:background .2s,color .2s,box-shadow .2s}
.mg-tab:hover{color:var(--mg-navy)}
.mg-tab[aria-selected="true"]{background:#fff;color:var(--mg-blue);box-shadow:0 6px 16px -8px rgba(3,24,82,.3)}
.mg-panel{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.mg-panel+.mg-panel{margin-top:64px}
.mg-js .mg-panel+.mg-panel{margin-top:0}
.mg-panel[hidden]{display:none}
.mg-panel.mg-is-in{animation:mg-fade .3s var(--mg-ease)}
@keyframes mg-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mg-panel__sub{font-size:22px;font-weight:800;letter-spacing:-.02em}
.mg-panel ul{display:grid;gap:14px;margin-top:22px}
.mg-panel li{display:grid;grid-template-columns:24px 1fr;gap:12px;color:var(--mg-navy)}
.mg-panel li .mg-ico{width:20px;height:20px;color:var(--mg-blue);margin-top:2px}
.mg-panel__media{display:flex;justify-content:center}
.mg-frame{background:#fff;border-radius:18px;box-shadow:var(--mg-shadow-app);overflow:hidden}
.mg-frame--desk{width:100%}
.mg-frame--phone{width:min(290px,70%);border-radius:34px;padding:0;background:#fff}
.mg-frame--phone img{border-radius:34px}
.mg-monai{margin-top:48px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 22px;border-radius:var(--mg-r);background:#fff;border:1px solid var(--mg-line)}
.mg-monai b{padding:6px 12px;border-radius:9px;background:var(--mg-blue);color:#fff;font-size:13px;font-weight:800;letter-spacing:.06em}
.mg-monai p{font-size:16px;font-weight:600}

/* =========================================================
   RÉSEAU
   ========================================================= */
.mg-net{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:stretch}
.mg-net__nums{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mg-net__num{padding:30px;display:grid;gap:10px;align-content:start}
.mg-net__v{font-size:clamp(52px,6vw,84px);font-weight:800;letter-spacing:-.055em;line-height:1;white-space:nowrap}
.mg-net__v .mg-sur{font-size:.32em;font-weight:500;letter-spacing:0;color:var(--mg-mute);margin:0 .25em}
.mg-houses{display:flex;flex-wrap:wrap;gap:6px;max-width:190px;margin:6px 0 2px}
.mg-houses .mg-ico{width:22px;height:20px;color:#C9D1E0}
.mg-houses .mg-ico.mg-is-on{color:var(--mg-blue)}
.mg-net__photo{border-radius:var(--mg-r-lg);overflow:hidden;min-height:320px;position:relative;box-shadow:var(--mg-shadow)}
.mg-net__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mg-audits{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:8px;border:1px solid var(--mg-line);border-radius:var(--mg-r-lg);background:#fff;overflow:hidden}
.mg-audit{padding:26px 24px;display:grid;gap:6px;border-right:1px solid var(--mg-line)}
.mg-audit:last-child{border-right:0}
.mg-audit b{font-size:13px;font-weight:800;color:var(--mg-blue);letter-spacing:.1em}
.mg-audit strong{font-size:17px}
.mg-audit span{font-size:14px;color:var(--mg-mute)}

/* =========================================================
   CHIFFRES
   ========================================================= */
.mg-stats4{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--mg-line);border-radius:var(--mg-r-lg);box-shadow:var(--mg-shadow);overflow:hidden}
.mg-stats4>div{padding:40px 30px;border-right:1px solid var(--mg-line)}
.mg-stats4>div:last-child{border-right:0}
.mg-stats4 strong{display:block;font-size:clamp(38px,4vw,56px);font-weight:800;letter-spacing:-.05em;line-height:1;white-space:nowrap}
.mg-stats4 strong small{font-size:.55em}
.mg-stats4 span{display:block;margin-top:12px;font-size:15px;color:var(--mg-mute)}

/* =========================================================
   OFFRES + CONFIGURATEUR + BLUE
   ========================================================= */
.mg-offers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.mg-offer{padding:34px 30px;display:flex;flex-direction:column;gap:18px}
.mg-offer__n{font-size:22px;font-weight:800}
.mg-offer__for{font-size:14px;font-weight:600;color:var(--mg-mute)}
.mg-offer__p{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 8px}
.mg-offer__p b{font-size:56px;font-weight:800;letter-spacing:-.05em;line-height:1;white-space:nowrap}
.mg-offer__p span{font-size:15px;font-weight:600;color:var(--mg-mute)}
.mg-offer__note{font-size:13px;font-weight:700;color:var(--mg-blue)}

.mg-conf{margin-top:28px;display:grid;grid-template-columns:1.05fr .95fr;background:#fff;border:1px solid var(--mg-line);border-radius:var(--mg-r-lg);box-shadow:var(--mg-shadow);overflow:hidden}
.mg-conf__in{padding:40px;display:grid;gap:26px;align-content:start}
.mg-conf__out{padding:32px 40px 40px;background:var(--mg-grey);border-left:1px solid var(--mg-line);display:grid;gap:14px;align-content:start}
.mg-conf fieldset{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.mg-conf legend,.mg-conf__label{padding:0;font-size:14px;font-weight:700;color:var(--mg-navy);margin-bottom:10px}
.mg-seg-ctrl{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:var(--mg-grey);border:1px solid var(--mg-line)}
.mg-seg-ctrl input{position:absolute;opacity:0;pointer-events:none}
.mg-seg-ctrl label{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:8px 10px;border-radius:10px;font-size:14px;font-weight:700;color:var(--mg-mute);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.mg-seg-ctrl input:checked+label{background:#fff;color:var(--mg-navy);box-shadow:0 6px 14px -8px rgba(3,24,82,.35)}
.mg-seg-ctrl input:focus-visible+label{outline:2px solid var(--mg-blue);outline-offset:2px}
.mg-lots{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.mg-lots output{font-size:40px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.mg-lots output small{font-size:16px;font-weight:600;color:var(--mg-mute);margin-left:6px;letter-spacing:0}
.mg-range{--p:12.1%;width:100%;height:8px;margin:14px 0 4px;border-radius:4px;background:linear-gradient(90deg,var(--mg-blue) var(--p),var(--mg-line) var(--p));-webkit-appearance:none;appearance:none;outline:none;cursor:pointer}
.mg-range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid var(--mg-blue);box-shadow:0 6px 14px -6px rgba(3,24,82,.4);transition:transform .15s}
.mg-range::-webkit-slider-thumb:hover{transform:scale(1.08)}
.mg-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--mg-blue)}
.mg-range:focus-visible{outline:2px solid var(--mg-blue);outline-offset:6px}
.mg-range__ends{display:flex;justify-content:space-between;font-size:12px;color:var(--mg-mute)}
.mg-m2{display:grid;gap:8px}
.mg-m2 input{height:50px;padding:0 16px;border:1px solid var(--mg-line);border-radius:12px;font:inherit;font-size:16px;font-weight:700;color:var(--mg-navy);width:100%}
.mg-m2 input:focus{outline:none;border-color:var(--mg-blue);box-shadow:0 0 0 4px var(--mg-tint)}
.mg-check{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;cursor:pointer}
.mg-check input{width:20px;height:20px;accent-color:var(--mg-blue);flex:none}
.mg-conf__k{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mg-mute)}
.mg-conf__offer{font-size:30px;font-weight:800;letter-spacing:-.02em}
.mg-conf__price{font-size:clamp(40px,4.4vw,58px);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.mg-conf__price small{font-size:18px;font-weight:600;letter-spacing:0;color:var(--mg-mute);margin-left:6px}
.mg-conf__sub{display:grid;gap:3px;font-size:14px;color:var(--mg-mute)}
.mg-conf__sub strong{font-size:17px;font-weight:800;color:var(--mg-navy);font-variant-numeric:tabular-nums}
.mg-conf__hyp{font-size:12.5px;line-height:1.45;color:var(--mg-mute)}
.mg-conf__msg{font-size:14px;font-weight:600;color:var(--mg-navy);padding:12px 14px;border-radius:12px;background:#fff;border:1px solid var(--mg-line)}
.mg-conf__cmp{display:grid;gap:10px;padding-top:16px;margin-top:4px;border-top:1px solid var(--mg-line)}
.mg-conf__int{font-size:15px;color:var(--mg-mute)}
.mg-conf__int s{text-decoration-color:var(--mg-blue);text-decoration-thickness:2px;font-weight:700;color:var(--mg-navy)}
.mg-conf__badge{justify-self:start;padding:8px 14px;border-radius:var(--mg-pill);background:var(--mg-tint);color:var(--mg-blue);font-size:14px;font-weight:800}
.mg-conf__legal{font-size:12.5px;color:var(--mg-mute)}
.mg-conf [hidden]{display:none!important}


/* =========================================================
   TÉMOIGNAGES
   ========================================================= */

/* =========================================================
   PRESSE
   ========================================================= */
.mg-press{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--mg-line);border-radius:var(--mg-r-lg);overflow:hidden;background:#fff}
.mg-press a{display:grid;justify-items:center;align-content:center;gap:16px;padding:34px 20px;min-height:170px;border-right:1px solid var(--mg-line);border-bottom:1px solid var(--mg-line);transition:background .2s}
.mg-press a:nth-child(3n){border-right:0}
.mg-press a:nth-last-child(-n+3){border-bottom:0}
.mg-press a:hover{background:var(--mg-grey)}
.mg-press img{height:46px;width:auto;max-width:190px;object-fit:contain;mix-blend-mode:multiply;transition:transform .25s var(--mg-ease)}
.mg-press a:hover img{transform:scale(1.04)}
.mg-press span{font-size:14px;font-weight:700;color:var(--mg-blue)}

/* =========================================================
   FAQ
   ========================================================= */
.mg-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.mg-faq__list{border-top:1px solid var(--mg-line)}
.mg-faq details{border-bottom:1px solid var(--mg-line)}
.mg-faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font-size:18px;font-weight:700;cursor:pointer}
.mg-faq summary::-webkit-details-marker{display:none}
.mg-faq summary:hover{color:var(--mg-blue)}
.mg-faq__pm{position:relative;width:28px;height:28px;flex:none;border-radius:50%;border:1.5px solid var(--mg-line);transition:transform .25s,border-color .2s,background .2s}
.mg-faq__pm::before,.mg-faq__pm::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.8px;margin:-.9px 0 0 -5.5px;background:currentColor;border-radius:1px;transition:transform .25s}
.mg-faq__pm::after{transform:rotate(90deg)}
.mg-faq details[open] .mg-faq__pm{background:var(--mg-blue);border-color:var(--mg-blue);color:#fff}
.mg-faq details[open] .mg-faq__pm::after{transform:rotate(0)}
.mg-faq__a{padding:0 48px 24px 0;color:var(--mg-mute);font-size:16.5px}
.mg-faq details[open] .mg-faq__a{animation:mg-fade .3s var(--mg-ease)}

/* =========================================================
   DÉMARRER + FORMULAIRE
   ========================================================= */
.mg-start{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.mg-start__steps{margin-top:30px}
.mg-start__steps li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:20px 0;border-bottom:1px solid var(--mg-line);font-size:17px;font-weight:600}
.mg-start__steps li:first-child{border-top:1px solid var(--mg-line)}
.mg-start__steps b{font-size:14px;font-weight:800;color:var(--mg-blue);letter-spacing:.08em;padding-top:2px}
.mg-call{margin-top:30px;display:grid;gap:10px}
.mg-call p{font-weight:700}
.mg-call a{display:inline-flex;align-items:center;gap:10px;font-size:17px;font-weight:600}
.mg-call a:hover{color:var(--mg-blue)}
.mg-call .mg-ico{width:20px;height:20px;color:var(--mg-blue)}
.mg-form{padding:36px;display:grid;grid-template-columns:1fr 1fr;gap:16px 16px}
.mg-form__title{grid-column:1/-1;font-size:26px;font-weight:800;letter-spacing:-.02em}
.mg-f{display:grid;gap:7px;align-content:start}
.mg-f--full{grid-column:1/-1}
.mg-f label{font-size:13.5px;font-weight:700}
.mg-f label i{color:var(--mg-blue);font-style:normal}
.mg-f input,.mg-f select,.mg-f textarea{width:100%;min-height:50px;padding:0 14px;border:1px solid var(--mg-line);border-radius:12px;background:#fff;font:inherit;font-size:15.5px;color:var(--mg-navy);transition:border-color .2s,box-shadow .2s}
.mg-f select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpolyline points='6,9 12,15 18,9' fill='none' stroke='%235B6687' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.mg-f textarea{min-height:100px;padding:12px 14px;resize:vertical}
.mg-f input:focus,.mg-f select:focus,.mg-f textarea:focus{outline:none;border-color:var(--mg-blue);box-shadow:0 0 0 4px var(--mg-tint)}
.mg-f.mg-is-err input,.mg-f.mg-is-err select{border-color:var(--mg-red)}
.mg-f__err{font-size:13px;font-weight:600;color:var(--mg-red);display:none}
.mg-f.mg-is-err .mg-f__err{display:block}
.mg-form .mg-btn{grid-column:1/-1;min-height:56px;margin-top:4px}
.mg-form .mg-btn[disabled]{opacity:.7;cursor:progress}
.mg-form__legal{grid-column:1/-1;font-size:12.5px;color:var(--mg-mute)}
.mg-form__legal a{text-decoration:underline;text-underline-offset:2px}
.mg-thanks{padding:56px 36px;text-align:center;display:grid;gap:14px;justify-items:center}
.mg-thanks[hidden]{display:none}
.mg-thanks:focus{outline:none}
.mg-thanks__ic{width:72px;height:72px;border-radius:50%;background:var(--mg-green);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 16px 34px -14px rgba(34,165,91,.8)}
.mg-thanks__ic svg{width:36px;height:36px}
.mg-thanks__ic polyline{stroke-dasharray:30;stroke-dashoffset:30;animation:mg-draw .6s .15s var(--mg-ease) forwards}
@keyframes mg-draw{to{stroke-dashoffset:0}}
.mg-thanks strong{font-size:24px;font-weight:800}
.mg-thanks p{color:var(--mg-mute)}

/* =========================================================
   PIED DE PAGE
   ========================================================= */
.mg-footer{padding:88px 0 32px;background:var(--mg-grey);border-top:1px solid var(--mg-line);font-size:15px}
.mg-footer__grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px}
.mg-footer__grid--4{grid-template-columns:1.5fr repeat(3,1fr)}
/* Sélecteur de langue (en-tête, menu mobile, pied de page) : généré par le build, absent tant qu'une seule langue est publiée */
.mg-lang{display:inline-flex;align-items:center;gap:2px;font-size:13px;font-weight:700;letter-spacing:.04em}
.mg-lang a,.mg-lang span{padding:5px 7px;border-radius:6px;line-height:1}
.mg-lang a{color:var(--mg-mute)}
.mg-lang a:hover{color:var(--mg-blue);background:var(--mg-tint)}
.mg-lang span[aria-current]{color:var(--mg-navy)}
.mg-footer__brand{display:grid;gap:18px;align-content:start}
.mg-footer__brand img{height:30px;width:auto}
.mg-footer__brand p{color:var(--mg-mute);font-size:14.5px;max-width:340px}
.mg-footer h4{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.mg-footer ul{display:grid;gap:10px}
.mg-footer li,.mg-footer li a{color:var(--mg-mute)}
.mg-footer li a:hover{color:var(--mg-blue)}
.mg-social{display:flex;gap:10px}
.mg-social a{width:40px;height:40px;border-radius:12px;border:1px solid var(--mg-line);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--mg-navy);transition:border-color .2s,color .2s}
.mg-social a:hover{border-color:var(--mg-blue);color:var(--mg-blue)}
.mg-social .mg-ico{width:18px;height:18px}
.mg-footer__bottom{margin-top:56px;padding-top:24px;border-top:1px solid var(--mg-line);display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;font-size:13.5px;color:var(--mg-mute)}
.mg-footer__bottom nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.mg-footer__bottom a:hover{color:var(--mg-blue)}

/* ---------- barre d'action mobile ---------- */
.mg-mbar{display:none}

/* =========================================================
   APPARITIONS (actives seulement si le JS tourne)
   ========================================================= */
.mg-js .mg-reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease-out,transform .5s ease-out}
.mg-js .mg-reveal.mg-is-in{opacity:1;transform:none}
.mg-js .mg-reveal[data-d="1"]{transition-delay:.08s}
.mg-js .mg-reveal[data-d="2"]{transition-delay:.16s}
.mg-js .mg-reveal[data-d="3"]{transition-delay:.24s}

/* =========================================================
   ÉTAPES ÉPINGLÉES (ordinateur, avec JS)
   ========================================================= */
@media (min-width:1024px){
  .mg-js .mg-steps-wrap{height:340vh;position:relative}
  .mg-js .mg-steps-sticky{position:sticky;top:96px;height:calc(100vh - 120px);min-height:560px;display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
  .mg-js .mg-steps{position:static;gap:0;grid-template-columns:44px 1fr;column-gap:24px;align-content:center}
  .mg-js .mg-steps-nav{display:block;grid-row:1/5;position:relative;width:2px;margin-left:21px;background:var(--mg-line);border-radius:2px}
  .mg-js .mg-steps-nav i{position:absolute;left:0;top:0;width:2px;height:var(--mg-p,0%);background:var(--mg-blue);border-radius:2px;box-shadow:0 0 12px rgba(26,92,255,.5)}
  .mg-js .mg-step{grid-column:2;padding:18px 0;border:0;border-radius:0;background:none;box-shadow:none;gap:0;transition:opacity .3s}
  .mg-js .mg-step__head{opacity:.4;transition:opacity .3s}
  .mg-js .mg-step.mg-is-active .mg-step__head{opacity:1}
  .mg-js .mg-step__big{font-size:36px}
  .mg-js .mg-step__screen{position:absolute;right:0;top:50%;width:calc(55% - 28px);transform:translateY(-46%);opacity:0;visibility:hidden;transition:opacity .3s,transform .3s var(--mg-ease),visibility .3s}
  .mg-js .mg-step.mg-is-active .mg-step__screen{opacity:1;visibility:visible;transform:translateY(-50%)}
  .mg-js .mg-step__txt{max-height:0;overflow:hidden;opacity:0;transition:max-height .35s var(--mg-ease),opacity .3s,margin .3s}
  .mg-js .mg-step.mg-is-active .mg-step__txt{max-height:120px;opacity:1;margin-top:6px}
  .mg-js .mg-steps-sticky .mg-head{margin-bottom:0}
}


/* =========================================================
   COMPLÉMENTS (structure HTML)
   ========================================================= */
.mg [id]{scroll-margin-top:84px}
.mg-head--flush{margin-bottom:0}
.mg-self-start{justify-self:start;align-self:flex-start}
.mg-section--cont{padding-top:0}
.mg-marquee__set li{flex:none}
.mg-mock{padding-bottom:206px}
.mg-mock[data-step="1"] .mg-mcard{animation:mg-fade .5s var(--mg-ease)}
.mg-mcard__btn .mg-is-ok .mg-ico{width:14px;height:14px}
.mg-prog i.mg-is-f::after{transform:scaleX(1)}
.mg-prog i.mg-is-h::after{transform:scaleX(.5);background:var(--mg-blue)}
.mg-prog__l--gap{margin-top:8px}
.mg-step__meta{display:flex;align-items:center;gap:12px}
.mg-screen__t{font-size:15px}
.mg-field-demo__row{display:flex;padding:9px 12px!important}
.mg-example__t{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.025em}
.mg-example__nums p{margin:0}
/* contrôle */
.mg-dcard .mg-devis{background:var(--mg-grey)}
.mg-dcard__msg .mg-ico{width:20px;height:20px;margin-top:1px}
.mg-dcard__btns,.mg-dcard__reset{display:none}
.mg-js .mg-dcard__btns{display:flex}
.mg-js .mg-dcard__reset{display:inline}
.mg-js .mg-dcard__reset[hidden]{display:none}
.mg-dbtn--ok .mg-ico{display:none}
.mg-dcard[data-state="validated"] .mg-dbtn--ok .mg-ico{display:block}
.mg-dbtn[disabled]{cursor:default}
.mg-dcard[data-state="validated"] .mg-dbtn:not(.mg-dbtn--ok),.mg-dcard[data-state="refused"] .mg-dbtn--ok{opacity:.45}
.mg-dcard[data-state="refused"] .mg-dbtn:not(.mg-dbtn--ok){border-color:var(--mg-navy);background:var(--mg-navy);color:#fff}
/* onglets : la barre n'apparaît qu'avec le JS (sans JS, les 3 panneaux s'empilent) */
.mg-tabs__bar{display:none;justify-content:center}
.mg-js .mg-tabs__bar{display:flex}
.mg-panel__who{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mg-blue);margin-bottom:10px}
/* chiffres : les compteurs restent en ligne */
.mg-stats4 strong .mg-count,.mg-net__v .mg-count{display:inline;margin:0;font-size:inherit;color:inherit;font-weight:inherit}
.mg-count{font-variant-numeric:tabular-nums}
.mg-offer__note--mute{color:var(--mg-mute)}
.mg-conf__title{margin-bottom:6px}
.mg-conf__out .mg-btn{justify-self:start;margin-top:8px}
.mg-press span{display:inline-flex;align-items:center;gap:6px}
.mg-press span .mg-ico{width:15px;height:15px}
.mg-press img.mg-press__sq{height:64px}
.mg-faq__head{position:sticky;top:110px}
.mg-f__opt{font-weight:500;color:var(--mg-mute)}
.mg-form__status{grid-column:1/-1;padding:12px 14px;border-radius:12px;background:#FDEBEA;color:#B4332A;font-size:14px;font-weight:600}
.mg-form__status[hidden]{display:none}
.mg-nav__item.mg-is-closed .mg-drop{opacity:0;visibility:hidden;transform:translateY(-6px)}
.mg-footer__h,.mg-footer h4{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px;color:var(--mg-navy)}
.mg-footer__bottom p{margin:0}
@media (max-width:1023px){
  .mg-faq__head{position:static}
  .mg-mock{padding-bottom:150px}
}
@media (min-width:1024px){
  .mg-js .mg-steps-sticky{align-content:center;row-gap:36px}
  .mg-js .mg-steps-sticky>*{grid-column:1}
  .mg-js .mg-step{padding:14px 0}
  .mg-js .mg-step__big{font-size:32px;margin-top:6px}
  .mg-js .mg-steps-wrap{height:300vh}
  .mg-js .mg-steps-sticky{top:88px;height:calc(100vh - 104px);min-height:500px}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1279px){
  :root{--mg-section:104px}
  .mg-header__in{gap:18px}
  .mg-nav{gap:0}
  .mg-nav__link{padding:10px 10px;font-size:14.5px}
  .mg-header__cta{gap:14px}
  .mg-footer__grid{grid-template-columns:1fr 1fr 1fr}
  .mg-footer__brand{grid-column:1/-1}
}
@media (max-width:1023px){
  :root{--mg-section:88px}
  .mg-nav,.mg-header__cta{display:none}
  .mg-burger{display:flex}
  .mg-mnav{position:fixed;inset:68px 0 0 0;z-index:59;background:#fff;padding:20px 24px 32px;overflow:auto;display:flex;flex-direction:column;gap:4px;transform:translateX(100%);visibility:hidden;transition:transform .3s var(--mg-ease),visibility .3s}
  .mg-mnav.mg-is-open{transform:none;visibility:visible}
  .mg-mnav__t{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mg-mute);margin:18px 0 6px}
  .mg-mnav a{padding:12px 0;font-size:18px;font-weight:700;border-bottom:1px solid var(--mg-line)}
  .mg-mnav .mg-lang{margin-top:16px;align-self:flex-start;font-size:15px}
  .mg-mnav .mg-lang a{padding:8px 10px;font-size:15px;border-bottom:0}
  .mg-mnav .mg-btn{margin-top:18px;border-bottom:0;font-size:16px;color:#fff}
  .mg-mnav .mg-btn--ghost{color:var(--mg-navy)}
  .mg-header{height:68px}
  .mg-hero{padding:108px 0 116px}
  .mg-hero__in,.mg-ctrl,.mg-panel,.mg-faq,.mg-start,.mg-net{grid-template-columns:1fr;gap:48px}
  .mg-mock{max-width:560px;margin:0 auto;width:100%}
  .mg-offers{grid-template-columns:1fr}
  .mg-offers{max-width:560px;margin:0 auto}
  .mg-conf,.mg-example{grid-template-columns:1fr}
  .mg-conf__out{border-left:0;border-top:1px solid var(--mg-line)}
  .mg-stats4{grid-template-columns:1fr 1fr}
  .mg-stats4>div:nth-child(2){border-right:0}
  .mg-stats4>div:nth-child(-n+2){border-bottom:1px solid var(--mg-line)}
  .mg-audits{grid-template-columns:1fr 1fr}
  .mg-audit:nth-child(2){border-right:0}
  .mg-audit:nth-child(-n+2){border-bottom:1px solid var(--mg-line)}
  .mg-steps .mg-step__screen{max-width:560px}
  .mg-mbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:55;display:block;transform:translateY(140%);transition:transform .3s var(--mg-ease)}
  .mg-mbar.mg-is-on{transform:none}
  .mg-mbar .mg-btn{width:100%;min-height:54px;box-shadow:0 18px 36px -14px rgba(3,24,82,.45)}
}
@media (max-width:767px){
  :root{--mg-section:80px}
  .mg-press{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mg-press a:nth-child(3n){border-right:1px solid var(--mg-line)}
  .mg-press a:nth-child(2n){border-right:0}
  .mg-press a:nth-last-child(-n+3){border-bottom:1px solid var(--mg-line)}
  .mg-press a:last-child{border-bottom:0}
  .mg-form{grid-template-columns:1fr;padding:26px}
  .mg-conf__in,.mg-conf__out,.mg-example__txt{padding:26px}
  .mg-net__nums{grid-template-columns:1fr}
  .mg-footer__grid{grid-template-columns:1fr 1fr}
  .mg-app{transform:none}
  .mg-faq__a{padding-right:0}
}
@media (max-width:479px){
  .mg-stats4{grid-template-columns:1fr}
  .mg-stats4>div{border-right:0;border-bottom:1px solid var(--mg-line)}
  .mg-stats4>div:last-child{border-bottom:0}
  .mg-audits{grid-template-columns:1fr}
  .mg-audit{border-right:0;border-bottom:1px solid var(--mg-line)}
  .mg-audit:last-child{border-bottom:0}
  .mg-footer__grid{grid-template-columns:1fr}
  .mg-hero__ctas .mg-btn{width:100%}
  .mg-offer__p b{font-size:48px}
  .mg-press img{height:36px;max-width:130px}
}


/* grilles : autorise les colonnes à rétrécir (évite tout débordement horizontal) */
.mg-press>*,.mg-stats4>*,.mg-audits>*,.mg-net__nums>*,.mg-hero__in>*,.mg-ctrl>*,.mg-panel>*,.mg-faq>*,.mg-start>*,.mg-net>*,.mg-conf>*,.mg-example>*,.mg-offers>*,.mg-duo__cards>*,.mg-coupe>*,.mg-cf>*,.mg-greviews>*,.mg-trades2>*,.mg-footer__grid>*,.mg-form>*,.mg-steps>*,.mg-steps-sticky>*{min-width:0}
.mg-conf__badge{border-radius:12px}
@media (max-width:767px){
  .mg-hero__roof{display:none}
  .mg-proof__sep{display:none}
  .mg-proof{flex-direction:column;align-items:flex-start;gap:6px}
  .mg-press a:last-child{grid-column:1/-1;border-right:0}
  .mg-form .mg-btn{white-space:normal;text-align:center;line-height:1.3;padding:12px 22px}
}
@media (max-width:479px){
  .mg-app__side{display:none}
  .mg-app__body{grid-template-columns:1fr}
  .mg-app__main{padding:14px}
  .mg-seg{display:none}
  .mg-mrow{grid-template-columns:28px 1fr auto;padding:9px 10px}
  .mg-mrow__ic{width:28px;height:28px}
  .mg-mock{padding-top:44px;padding-bottom:230px}
  .mg-tabs__list{display:flex;width:100%;flex-wrap:nowrap}
  .mg-tab{flex:1 1 auto;padding:0 6px;font-size:13px;white-space:nowrap}
  .mg-press a{padding:28px 12px}
  .mg-press img{max-width:100%}
  .mg-example__nums{grid-template-columns:1fr;gap:18px}
  .mg-mcard__top{flex-wrap:wrap}
  .mg-steps .mg-step{padding:22px}
  .mg-screen__body{padding:16px}
}

/* =========================================================
   V3 · HERO : maquette flottante + contenu selon l'activité
   ========================================================= */
.mg-fl{will-change:transform}
.mg-fl--app{animation:mg-float 8s ease-in-out infinite}
.mg-fl--card{position:absolute;left:-28px;bottom:0;width:min(330px,78%);z-index:2;animation:mg-float 6.5s ease-in-out -2.2s infinite}
.mg-fl--notif{position:absolute;right:-10px;top:0;z-index:2;animation:mg-float 5.5s ease-in-out -1s infinite}
.mg-fl--card .mg-mcard{position:relative;left:auto;bottom:auto;width:100%}
.mg-fl--notif .mg-notif{position:relative;right:auto;top:auto}
@keyframes mg-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}
.mg-app__tag{font-style:normal;margin-left:8px;padding:3px 9px;border-radius:999px;background:var(--mg-tint);color:var(--mg-blue);font-size:10.5px;font-weight:700;vertical-align:2px;white-space:nowrap}
.mg-mrow__st{display:flex;justify-content:flex-end}
.mg-app__main,.mg-mcard{transition:opacity .22s}
.mg-mock.mg-is-swap .mg-app__main,.mg-mock.mg-is-swap .mg-mcard{opacity:0}

/* =========================================================
   V3 · TUILES D'ICÔNES DUOTONES (constat + piliers)
   Couleurs porteuses de sens : orange = attente, rouge = urgence, indigo = coordination / équipe,
   bleu = plateforme Monga, vert d'eau = terrain / réseau
   ========================================================= */
.mg-dtile{width:62px;height:62px;border-radius:18px;display:flex;align-items:center;justify-content:center;color:var(--tc);background:linear-gradient(145deg,var(--t1),var(--t2));box-shadow:inset 0 0 0 1px var(--tb),0 12px 24px -16px var(--ts)}
.mg-dtile .mg-ico{width:40px;height:40px}
.mg-dtile--amber{--tc:#C45F16;--t1:#FFF7EE;--t2:#FDE9D6;--tb:rgba(224,120,42,.2);--ts:rgba(224,120,42,.7)}
.mg-dtile--red{--tc:#CF3A2F;--t1:#FFF3F2;--t2:#FDE1DF;--tb:rgba(224,69,58,.18);--ts:rgba(224,69,58,.6)}
.mg-dtile--indigo{--tc:#4B43D9;--t1:#F5F4FF;--t2:#E6E4FF;--tb:rgba(79,70,229,.18);--ts:rgba(79,70,229,.55)}
.mg-dtile--blue{--tc:#1A5CFF;--t1:#F3F7FF;--t2:#E0EAFF;--tb:rgba(26,92,255,.18);--ts:rgba(26,92,255,.6)}
.mg-dtile--teal{--tc:#0B8A75;--t1:#F0FAF7;--t2:#D9F2EC;--tb:rgba(14,143,122,.2);--ts:rgba(14,143,122,.55)}

/* =========================================================
   V3 · ÉTAPES ÉPINGLÉES : bloc agrandi, hauteur calculée par le JS
   ========================================================= */
@media (min-width:1024px){
  .mg-js .mg-steps-wrap{height:auto}
  .mg-js .mg-steps-sticky{height:auto;min-height:0;grid-template-columns:.84fr 1.16fr;top:96px}
  .mg-js .mg-steps{min-height:580px}
  .mg-js .mg-step{padding:16px 0}
  .mg-js .mg-step__n,.mg-js .mg-step__lab{font-size:14px}
  .mg-js .mg-step__big{font-size:46px}
  .mg-js .mg-step__txt{font-size:18px}
  .mg-js .mg-step.mg-is-active .mg-step__txt{max-height:140px}
  .mg-js .mg-step__screen{width:calc(58% - 20px)}
  .mg-js .mg-step__screen .mg-screen{border-radius:24px}
  .mg-js .mg-step__screen .mg-screen__bar{height:42px;padding:0 18px}
  .mg-js .mg-step__screen .mg-screen__bar i{width:10px;height:10px}
  .mg-js .mg-step__screen .mg-screen__bar b{font-size:13px}
  .mg-js .mg-step__screen .mg-screen__body{padding:32px;gap:20px}
  .mg-js .mg-step__screen .mg-field-demo label{font-size:12px}
  .mg-js .mg-step__screen .mg-field-demo div{font-size:16.5px;padding:14px 18px;border-radius:14px}
  .mg-js .mg-step__screen .mg-cats span{font-size:14px;padding:8px 15px}
  .mg-js .mg-step__screen .mg-badge{font-size:13.5px;padding:5px 12px}
  .mg-js .mg-step__screen .mg-devis{padding:24px;gap:14px}
  .mg-js .mg-step__screen .mg-devis__k{font-size:12px}
  .mg-js .mg-step__screen .mg-devis strong{font-size:22px}
  .mg-js .mg-step__screen .mg-person{padding:16px}
  .mg-js .mg-step__screen .mg-person strong{font-size:16px}
  .mg-js .mg-step__screen .mg-person small{font-size:13.5px}
  .mg-js .mg-step__screen .mg-person__av{width:46px;height:46px}
  .mg-js .mg-step__screen .mg-fake-btn{height:46px;padding:0 20px;font-size:15px}
  .mg-js .mg-step__screen .mg-prog i{height:8px}
  .mg-js .mg-step__screen .mg-prog__l{font-size:12.5px}
  .mg-js .mg-step__screen .mg-screen__t{font-size:19px}
  .mg-js .mg-step__screen .mg-done__ic{width:64px;height:64px}
  .mg-js .mg-step__screen .mg-done strong{font-size:26px}
  .mg-js .mg-step__screen .mg-filerow{font-size:16px;padding:16px 18px}
}

/* =========================================================
   V3 · CARTE DEVIS : 4e état « Terminée »
   ========================================================= */
.mg-dbtn--next{background:var(--mg-blue);border-color:var(--mg-blue);color:#fff;animation:mg-fade .35s var(--mg-ease)}
.mg-dbtn--next:hover{background:var(--mg-blue-h);border-color:var(--mg-blue-h)}
.mg-dcard[data-state="validated"] .mg-dbtn.mg-dbtn--next:not(.mg-dbtn--ok){opacity:1}
.mg-dcard[data-state="done"] .mg-prog i::after{transform:scaleX(1)}
.mg-dcard[data-state="done"] .mg-dcard__msg{background:#E7F6EC;color:#1E6E40}
.mg-dcard[data-state="done"] .mg-dbtn--ok{background:var(--mg-green);border-color:var(--mg-green)}
.mg-dcard[data-state="done"] .mg-dbtn--ok .mg-ico{display:block}
.mg-dcard[data-state="done"] .mg-dbtn:not(.mg-dbtn--ok){opacity:.45}

/* =========================================================
   V3 · RÉSEAU : orbite des corps d'état
   ========================================================= */
.mg-trades2__t{font-size:clamp(26px,2.8vw,36px);font-weight:800;letter-spacing:-.03em;line-height:1.12}
.mg-trades2__hint{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--mg-blue)}
.mg-trades2__hint .mg-ico{width:16px;height:16px}

/* =========================================================
   V3 · OFFRES EN ESCALIER (relief + palier + répartition Vous / Monga)
   ========================================================= */
.mg-stairs__axis{display:flex;align-items:center;gap:16px;max-width:900px;margin:0 auto 30px;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mg-navy)}
.mg-stairs__axis span:last-child{color:var(--mg-blue)}
.mg-stairs__axis i{position:relative;flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--mg-navy),var(--mg-blue))}
.mg-stairs__axis i::after{content:"";position:absolute;right:0;top:50%;width:9px;height:9px;border-top:2px solid var(--mg-blue);border-right:2px solid var(--mg-blue);transform:translateY(-50%) rotate(45deg)}
.mg-offer{position:relative;padding:30px 28px;gap:20px;box-shadow:0 10px 0 -2px #E4EAF6,0 11px 0 -2px #D3DCEC,0 46px 64px -36px rgba(3,24,82,.42);transition:transform .35s var(--mg-ease),box-shadow .35s var(--mg-ease);will-change:transform}
.mg-offer:hover{box-shadow:0 14px 0 -2px #E4EAF6,0 15px 0 -2px #D3DCEC,0 60px 74px -36px rgba(3,24,82,.48)}
.mg-offer--x{border:2px solid var(--mg-blue);box-shadow:0 0 0 6px rgba(26,92,255,.07),0 10px 0 -2px #CFDCFF,0 11px 0 -2px #B7C9FA,0 46px 72px -32px rgba(26,92,255,.55)}
.mg-offer--x:hover{box-shadow:0 0 0 6px rgba(26,92,255,.1),0 14px 0 -2px #CFDCFF,0 15px 0 -2px #B7C9FA,0 60px 80px -32px rgba(26,92,255,.6)}
.mg-offer--s1{margin-top:88px}
.mg-offer--s2{margin-top:44px}
.mg-stairs--flat .mg-offers{align-items:stretch}
@media (min-width:901px){.mg-stairs--flat .mg-offer__for{min-height:3.1em}}
.mg-offer--astr .mg-tokens li{background:#F5F8FF;border-color:#E1E9FB}
.mg-offer--astr .mg-tokens__ic{color:#2F63E0}
.mg-split--day .mg-split__lab span:first-child{color:var(--mg-blue)}
.mg-offer__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mg-lvl{display:inline-flex;align-items:flex-end;gap:3px;height:18px}
.mg-lvl i{width:6px;border-radius:2px;background:#DCE3F0}
.mg-lvl i:nth-child(1){height:8px}
.mg-lvl i:nth-child(2){height:13px}
.mg-lvl i:nth-child(3){height:18px}
.mg-lvl i.mg-on{background:var(--mg-blue)}
.mg-offer__lvl{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mg-mute)}
.mg-offer--x .mg-offer__lvl{color:var(--mg-blue)}
.mg-split{display:grid;gap:8px}
.mg-split__lab{display:flex;justify-content:space-between;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mg-navy)}
.mg-split__lab span:last-child{color:var(--mg-blue)}
.mg-split__bar{position:relative;height:10px;border-radius:6px;background:var(--mg-navy);overflow:hidden}
.mg-split__bar i{position:absolute;right:0;top:0;bottom:0;width:var(--m);border-radius:6px 0 0 6px;background:linear-gradient(90deg,#5B8BFF,var(--mg-blue));box-shadow:-2px 0 0 #fff}
.mg-js .mg-offer .mg-split__bar i{width:0;transition:width 1.1s .4s var(--mg-ease)}
.mg-js .mg-offer.mg-is-in .mg-split__bar i{width:var(--m)}
.mg-tokens{display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;padding-top:18px;border-top:1px solid var(--mg-line);flex:1}
.mg-tokens li{display:inline-flex;align-items:center;gap:9px;padding:6px 12px 6px 6px;border-radius:12px;background:var(--mg-grey);border:1px solid var(--mg-line);font-size:13.5px;font-weight:600;line-height:1.3;max-width:100%}
.mg-tokens__ic{flex:none;width:28px;height:28px;border-radius:8px;background:#fff;color:#34436B;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px var(--mg-line)}
.mg-tokens__ic .mg-ico{width:16px;height:16px}
.mg-offer--s2 .mg-tokens li{background:#F5F8FF;border-color:#E1E9FB}
.mg-offer--s2 .mg-tokens__ic{color:#2F63E0}
.mg-offer--x .mg-tokens li{background:var(--mg-tint);border-color:#D5E1FF}
.mg-offer--x .mg-tokens__ic{color:var(--mg-blue)}

/* configurateur : choix illustrés + scène résidentiel / tertiaire */
.mg-seg-ctrl label{gap:8px}
.mg-seg-ctrl label .mg-ico{width:18px;height:18px;flex:none;color:var(--mg-mute);transition:color .2s}
.mg-seg-ctrl input:checked+label .mg-ico{color:var(--mg-blue)}
.mg-scene{position:relative;aspect-ratio:320/158;margin-bottom:8px;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#FFFFFF 0%,#F2F6FD 100%);border:1px solid var(--mg-line)}
.mg-scene>svg{position:absolute;inset:auto 0 0 0;width:100%;height:auto}
.mg-scene__ground{stroke:#C9D3E6;stroke-width:1.5}
.mg-scene__wall{fill:#fff;stroke:var(--mg-navy);stroke-width:1.6;stroke-linejoin:round}
.mg-scene__roof{fill:var(--mg-tint);stroke:var(--mg-navy);stroke-width:1.6;stroke-linejoin:round}
.mg-scene__win{fill:#EEF3FF;stroke:#9DB5F2;stroke-width:1.3}
.mg-scene__line,.mg-scene__door{fill:none;stroke:var(--mg-navy);stroke-width:1.6;stroke-linecap:round}
.mg-scene__tree{fill:#E3F4EE;stroke:#0B8A75;stroke-width:1.6}
.mg-scene__grid{fill:none;stroke:#B9CBF3;stroke-width:1}
.mg-scene__res,.mg-scene__ter{transition:opacity .45s var(--mg-ease),transform .45s var(--mg-ease)}
.mg-scene[data-type="res"] .mg-scene__ter,.mg-scene[data-type="ter"] .mg-scene__res{opacity:0;transform:translateY(16px)}
.mg-scene__halo{fill:rgba(26,92,255,.14);stroke:var(--mg-blue);stroke-width:1.4;transition:fill .3s,stroke .3s}
.mg-scene__dot{fill:var(--mg-blue);transition:fill .3s}
.mg-scene__ring{fill:none;stroke:var(--mg-blue);stroke-width:1.4;transform-box:fill-box;transform-origin:center;opacity:0}
.mg-scene[data-mode="delegate"] .mg-scene__ring{animation:mg-ping 2.4s var(--d,0s) ease-out infinite}
@keyframes mg-ping{0%{opacity:.9;transform:scale(1)}80%,100%{opacity:0;transform:scale(2)}}
.mg-scene[data-mode="self"] .mg-scene__halo{fill:rgba(3,24,82,.1);stroke:var(--mg-navy)}
.mg-scene[data-mode="self"] .mg-scene__dot{fill:var(--mg-navy)}
.mg-scene__who{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:#fff;box-shadow:0 8px 20px -12px rgba(3,24,82,.4),0 0 0 1px var(--mg-line);font-size:12.5px;font-weight:700;transition:opacity .3s,transform .3s}
.mg-scene__who .mg-ico{width:24px;height:24px;padding:5px;border-radius:50%;background:var(--mg-blue);color:#fff}
.mg-scene__who--s .mg-ico{background:var(--mg-navy)}
.mg-scene[data-mode="delegate"] .mg-scene__who--s,.mg-scene[data-mode="self"] .mg-scene__who--d{opacity:0;transform:translateY(-6px)}
.mg-scene__type{position:absolute;right:14px;top:17px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mg-mute);transition:opacity .3s}
.mg-scene[data-type="res"] .mg-scene__type--t,.mg-scene[data-type="ter"] .mg-scene__type--r{opacity:0}

/* =========================================================
   V3 · TÉMOIGNAGES ÉPURÉS
   ========================================================= */
.mg-is-broken>img{display:none}
/* =========================================================
   TÉMOIGNAGES · COVERFLOW EN DÉFILEMENT AUTOMATIQUE (v9)
   Le témoignage actif au centre, les voisins en perspective de chaque côté.
   Positions calculées en JavaScript (une image par frame) ; sans JS, les témoignages s'empilent.
   ========================================================= */
.mg-cf__vp{display:grid;gap:24px}
.mg-js .mg-cf__vp{display:block;position:relative;perspective:1600px;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.mg-cf__vp.mg-is-drag{cursor:grabbing}
.mg-cf__card{position:relative;margin:0;display:flex;flex-direction:column;gap:26px;padding:40px 44px 34px;background:#fff;border:1px solid var(--mg-line);border-radius:28px;box-shadow:0 40px 80px -44px rgba(3,24,82,.45);transition:box-shadow .5s ease}
.mg-js .mg-cf__card{position:absolute;left:50%;top:0;width:min(680px,84vw);margin-left:calc(min(680px,84vw) / -2);transform-origin:50% 50%;will-change:transform,opacity}
.mg-cf__card.mg-is-on{box-shadow:0 50px 90px -40px rgba(26,92,255,.45),0 0 0 1px rgba(26,92,255,.18)}
.mg-js .mg-cf__card:not(.mg-is-on){cursor:pointer}
.mg-js .mg-cf__card:not(.mg-is-on)>*{pointer-events:none}
/* fil de lecture en bas de la carte active */
.mg-js .mg-cf__card::after{content:"";position:absolute;left:44px;right:44px;bottom:-1px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--mg-blue) var(--rp,0%),rgba(26,92,255,.12) var(--rp,0%));opacity:0;transition:opacity .4s}
.mg-js .mg-cf__card.mg-is-on::after{opacity:1}
.mg-cf__top{display:flex;align-items:center;justify-content:space-between}
.mg-cf__tag{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:var(--mg-tint);color:var(--mg-blue);font-size:12.5px;font-weight:800;letter-spacing:.02em}
.mg-cf__tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.mg-cf__mark{font-size:84px;line-height:.5;font-weight:800;color:var(--mg-blue);height:34px}
.mg-cf__card blockquote{margin:0;font-size:clamp(18px,1.8vw,23px);line-height:1.52;font-weight:600;letter-spacing:-.01em;color:var(--mg-navy)}
/* la phrase clé se surligne quand la carte arrive au centre */
.mg-cf__card mark{color:inherit;padding:0 2px;background:linear-gradient(rgba(26,92,255,.2),rgba(26,92,255,.2)) no-repeat 0 90%/100% 36%}
.mg-js .mg-cf__card mark{background-size:0% 36%;transition:background-size 1s cubic-bezier(.2,.8,.2,1) .3s}
.mg-js .mg-cf__card.mg-is-read mark{background-size:100% 36%}
.mg-cf__card figcaption{display:flex;align-items:center;gap:16px;padding-top:22px;border-top:1px solid var(--mg-line);margin-top:auto}
.mg-cf__av{position:relative;flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,#2B66FF,var(--mg-navy));color:#fff;font-size:18px;font-weight:800;box-shadow:0 0 0 3px #fff,0 8px 18px -8px rgba(3,24,82,.5)}
.mg-cf__av::before{content:attr(data-i)}
.mg-cf__av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mg-cf__who{display:grid;gap:2px;flex:1;min-width:0}
.mg-cf__who strong{font-size:16px;font-weight:800}
.mg-cf__who span{font-size:13.5px;line-height:1.4;color:var(--mg-mute)}
.mg-cf__logo{flex:none;display:flex;align-items:center;justify-content:center;height:52px;min-width:96px;padding:6px 14px;border-radius:14px;border:1px solid var(--mg-line);background:#fff}
.mg-cf__logo img{width:auto;height:auto;max-height:38px;max-width:120px;object-fit:contain}
.mg-cf__logo--sq{padding:3px 12px}.mg-cf__logo--sq img{max-height:46px}
.mg-cf__logo.mg-is-broken::before{content:attr(data-t);font-size:13.5px;font-weight:800;color:var(--mg-navy);white-space:nowrap}
/* commandes */
.mg-cf__ctrl{display:none}
.mg-js .mg-cf__ctrl{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:34px}
.mg-cf__state{display:inline-flex;align-items:center;gap:7px;min-width:92px;font-size:12.5px;font-weight:800;color:var(--mg-mute)}
.mg-cf__state i{width:8px;height:8px;border-radius:50%;background:var(--mg-green);animation:mg-cf-live 1.8s ease-out infinite}
@keyframes mg-cf-live{from{box-shadow:0 0 0 0 rgba(34,165,91,.5)}to{box-shadow:0 0 0 8px rgba(34,165,91,0)}}
.mg-cf__btn{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;padding:0;background:#fff;border:1px solid var(--mg-line);color:var(--mg-navy);cursor:pointer;box-shadow:0 10px 24px -14px rgba(3,24,82,.4);transition:transform .2s var(--mg-ease),background .2s,color .2s,border-color .2s}
.mg-cf__btn:hover{background:var(--mg-navy);color:#fff;border-color:var(--mg-navy);transform:translateY(-1px)}
.mg-cf__btn .mg-ico{width:18px;height:18px}
.mg-cf__btn--prev .mg-ico{transform:rotate(180deg)}
.mg-cf__dots{display:flex;gap:10px}
.mg-cf__dot{position:relative;width:34px;height:6px;padding:0;border:0;border-radius:6px;background:#DDE3EF;overflow:hidden;cursor:pointer;transition:width .4s var(--mg-ease)}
.mg-cf__dot[aria-current="true"]{width:64px}
.mg-cf__dot i{position:absolute;inset:0;width:var(--w,0%);background:var(--mg-blue);border-radius:inherit}
.mg-cf__count{min-width:62px;text-align:center;font-size:14px;font-weight:600;color:var(--mg-mute);font-variant-numeric:tabular-nums}
.mg-cf__count b{font-weight:800;color:var(--mg-navy)}
@media (max-width:640px){
  .mg-cf__card{padding:28px 24px 24px;gap:20px;border-radius:22px}
  .mg-js .mg-cf__card::after{left:24px;right:24px}
  .mg-cf__card figcaption{flex-wrap:wrap;row-gap:12px}
  .mg-cf__who{flex:1 1 calc(100% - 72px)}
  .mg-cf__logo{margin-left:72px;height:42px}
  .mg-cf__logo--sq img{max-height:36px}
  .mg-js .mg-cf__ctrl{gap:12px}
  .mg-cf__state{display:none}
  .mg-cf__dot{width:20px}.mg-cf__dot[aria-current="true"]{width:42px}
}
@media (prefers-reduced-motion:reduce){
  .mg-js .mg-cf__card mark{background-size:100% 36%}
  .mg-cf__state,.mg-js .mg-cf__card::after{display:none}
}

.mg-greviews{margin-top:24px;display:grid;grid-template-columns:auto 1fr;background:#fff;border:1px solid var(--mg-line);border-radius:var(--mg-r-lg);overflow:hidden}
.mg-greviews__score{display:grid;gap:8px;justify-items:start;align-content:center;min-width:270px;padding:30px 36px;border-right:1px solid var(--mg-line)}
.mg-greviews__badge{display:flex;align-items:center;min-height:44px}
.mg-greviews__badge img{height:44px;width:auto;max-width:200px}
.mg-greviews__badge.mg-is-broken::before{content:attr(data-t);font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--mg-navy)}
.mg-greviews__n{font-size:64px;font-weight:800;letter-spacing:-.05em;line-height:1}
.mg-greviews__n small{font-size:.38em;letter-spacing:0;color:var(--mg-mute)}
.mg-greviews .mg-stars .mg-ico{width:20px;height:20px}
.mg-greviews__list{display:grid;grid-template-columns:repeat(3,1fr)}
.mg-greviews__list figure{margin:0;padding:30px 28px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;border-right:1px solid var(--mg-line)}
.mg-greviews__list figure:last-child{border-right:0}
.mg-greviews__list blockquote{margin:0;font-size:15px;line-height:1.6}
.mg-greviews__list figcaption{font-size:13px;font-weight:700;color:var(--mg-mute)}

/* ---------- V3 responsive ---------- */
@media (max-width:1023px){
  .mg-stairs__axis{display:none}
  .mg-offer--s1,.mg-offer--s2{margin-top:0}
  .mg-offers{gap:32px}
  .mg-greviews{grid-template-columns:1fr}
  .mg-greviews__score{border-right:0;border-bottom:1px solid var(--mg-line);grid-template-columns:auto auto;align-items:center;gap:8px 20px;min-width:0}
  .mg-greviews__list{grid-template-columns:1fr}
  .mg-greviews__list figure{border-right:0;border-bottom:1px solid var(--mg-line)}
  .mg-greviews__list figure:last-child{border-bottom:0}
}
@media (max-width:767px){
  .mg-fl--card{left:0}
  .mg-fl--notif{right:0}
  .mg-greviews__score{grid-template-columns:1fr;padding:26px}
  .mg-greviews__list figure{padding:24px 26px}
}
@media (max-width:479px){
  .mg-fl--card{width:88%}
  .mg-app__tag{display:none}
  .mg-scene__type{display:none}
  .mg-seg-ctrl{grid-template-columns:1fr}
  .mg-dtile{width:56px;height:56px}
  .mg-dtile .mg-ico{width:32px;height:32px}
}


/* =========================================================
   V4 · CONSTAT → RÉPONSE MONGA (interrupteur, cartes qui se retournent)
   Sans JS : les deux situations s'affichent l'une sous l'autre.
   ========================================================= */
.mg-duo__head{display:grid;justify-items:center;gap:18px;max-width:840px;margin:0 auto 48px;text-align:center}
.mg-duo .mg-kicker .mg-duo__sw-on{display:none}
.mg-duo__title>span,.mg-duo__lead>span{display:block}
.mg-duo__lead{margin:0 auto}
.mg-duo__ctrl{display:none}
.mg-js .mg-duo__ctrl{display:grid;justify-items:center;gap:10px;margin-top:8px}
.mg-js .mg-duo[data-state="on"] .mg-kicker .mg-duo__sw-off{display:none}
.mg-js .mg-duo[data-state="on"] .mg-kicker .mg-duo__sw-on{display:inline}
.mg-js .mg-duo__title,.mg-js .mg-duo__lead{display:grid}
.mg-js .mg-duo__title>span,.mg-js .mg-duo__lead>span{grid-area:1/1;align-self:center;transition:opacity .45s var(--mg-ease),transform .45s var(--mg-ease)}
.mg-js .mg-duo[data-state="off"] .mg-duo__title>.mg-duo__sw-on,.mg-js .mg-duo[data-state="off"] .mg-duo__lead>.mg-duo__sw-on{opacity:0;transform:translateY(14px)}
.mg-js .mg-duo[data-state="on"] .mg-duo__title>.mg-duo__sw-off,.mg-js .mg-duo[data-state="on"] .mg-duo__lead>.mg-duo__sw-off{opacity:0;transform:translateY(-14px)}
.mg-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:5px;border:1px solid var(--mg-line);border-radius:999px;background:#fff;box-shadow:0 16px 32px -22px rgba(3,24,82,.5)}
.mg-switch__knob{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--mg-navy);box-shadow:0 8px 18px -8px rgba(3,24,82,.6);transition:transform .5s var(--mg-ease),background .5s,box-shadow .5s}
.mg-switch[aria-checked="true"] .mg-switch__knob{transform:translateX(100%);background:var(--mg-blue);box-shadow:0 10px 22px -8px rgba(26,92,255,.8)}
.mg-switch__opt{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 26px;font-size:15px;font-weight:700;color:var(--mg-mute);white-space:nowrap;transition:color .35s}
.mg-switch[aria-checked="false"] .mg-switch__opt:nth-child(2),.mg-switch[aria-checked="true"] .mg-switch__opt:nth-child(3){color:#fff}
.mg-switch__opt img{width:16px;height:auto;transition:filter .35s}
.mg-switch[aria-checked="true"] .mg-switch__opt img{filter:brightness(0) invert(1)}
.mg-duo__hint{font-size:13px;color:var(--mg-mute)}
.mg-duo__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.mg-flip{position:relative;perspective:1400px;border-radius:24px;outline-offset:5px;transition:transform .7s var(--mg-ease)}

.mg-flip__in{position:relative;display:grid;gap:14px;height:100%}
.mg-flip__face{display:grid;gap:12px;align-content:start;padding:28px;background:#fff;border:1px solid var(--mg-line);border-radius:24px;box-shadow:var(--mg-shadow);transition:box-shadow .3s}
.mg-flip__face--on{border-color:#D5EBDD;background:linear-gradient(180deg,#FFFFFF 60%,#F5FBF7)}
.mg-flip:hover .mg-flip__face{box-shadow:var(--mg-shadow-h)}
.mg-flip__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.mg-flip .mg-dtile{position:relative}
.mg-flip__ping{position:absolute;top:-4px;right:-4px;width:13px;height:13px;border-radius:50%;background:var(--mg-red);box-shadow:0 0 0 3px #fff}
.mg-flip__ping::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--mg-red);animation:mg-pulse 1.8s ease-out infinite}
@keyframes mg-pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.6);opacity:0}}
.mg-badge .mg-ico{width:13px;height:13px}
.mg-badge--amber{background:#FFF1E3;color:#B25510}
.mg-badge--indigo{background:#EFEEFF;color:#4B43D9}
.mg-js .mg-flip__in{gap:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,.7,.2,1)}
.mg-js .mg-flip__face{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.mg-js .mg-flip__face--on{transform:rotateY(180deg)}
.mg-js .mg-flip.mg-is-on .mg-flip__in{transform:rotateY(180deg)}
.mg-js .mg-flip:nth-child(2) .mg-flip__in{transition-delay:.12s}
.mg-js .mg-flip:nth-child(3) .mg-flip__in{transition-delay:.24s}
.mg-js .mg-flip:not(.mg-is-on):nth-child(1){transform:rotate(-2.2deg) translateY(10px)}
.mg-js .mg-flip:not(.mg-is-on):nth-child(2){transform:rotate(1.6deg) translateY(-6px)}
.mg-js .mg-flip:not(.mg-is-on):nth-child(3){transform:rotate(-1.2deg) translateY(12px)}
.mg-duo__band{margin-top:34px;display:grid;background:#fff;border:1px solid var(--mg-line);border-radius:var(--mg-r-lg);box-shadow:var(--mg-shadow);overflow:hidden}
.mg-duo__band>*{padding:30px 40px}
.mg-duo__panel--on{border-top:1px solid var(--mg-line)}
.mg-js .mg-duo__band>*{grid-area:1/1;border-top:0;transition:opacity .5s var(--mg-ease),transform .5s var(--mg-ease)}
.mg-js .mg-duo[data-state="off"] .mg-duo__panel--on,.mg-js .mg-duo[data-state="on"] .mg-duo__panel--off{opacity:0;transform:translateY(10px);pointer-events:none}
.mg-duo__cost{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 40px}
.mg-duo__ck{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mg-mute)}
.mg-duo__ct{margin-top:4px;font-size:22px;font-weight:800}
.mg-duo__cv{text-align:right}
.mg-duo__cv strong{display:block;font-size:clamp(34px,4.2vw,54px);font-weight:800;letter-spacing:-.045em;line-height:1;white-space:nowrap}
.mg-duo__cv strong span{font-weight:500;color:var(--mg-mute)}
.mg-duo__cv small{display:block;margin-top:8px;font-size:14px;color:var(--mg-mute)}
.mg-duo__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;align-items:start}
.mg-duo__v{font-size:clamp(44px,5vw,62px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--mg-blue);font-variant-numeric:tabular-nums}
.mg-duo__v small{margin-left:3px;font-size:.5em}
.mg-duo__l{margin-top:10px;font-size:17px;font-weight:800}
.mg-duo__d{margin-top:2px;font-size:14px;color:var(--mg-mute)}
.mg-duo__stats--off .mg-duo__v{color:var(--mg-navy)}
.mg-duo__stats--off .mg-duo__v small{margin-left:4px;font-size:.42em;letter-spacing:-.02em;color:var(--mg-mute)}

/* =========================================================
   V6 · CORPS D'ÉTAT : coupe d'immeuble au trait
   Liste des métiers à gauche, dessin à droite. Le métier survolé (ou montré
   automatiquement) s'allume en bleu dans le dessin, avec son étiquette.
   ========================================================= */
.mg-coupe{grid-column:1/-1;margin-top:8px;display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);grid-template-areas:"head fig" "list fig" "hint fig";column-gap:40px;row-gap:22px;align-items:start;padding:44px 48px;background:#fff;border:1px solid var(--mg-line);border-radius:var(--mg-r-lg);box-shadow:var(--mg-shadow)}
.mg-coupe__head{grid-area:head;display:grid;gap:14px;justify-items:start}
.mg-coupe__list{grid-area:list;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
.mg-coupe__hint{grid-area:hint}
.mg-coupe__it{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;cursor:pointer;font-family:var(--mg-font);font-size:14px;font-weight:700;line-height:1.3;color:#55607E;position:relative;-webkit-tap-highlight-color:transparent;transition:color .25s,background-color .25s}
.mg-coupe__it::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:2px;border-radius:2px;background:var(--mg-blue);transform:scaleY(0);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.mg-coupe__it:hover,.mg-coupe__it.mg-is-on{color:var(--mg-navy);background:#F4F6FB}
.mg-coupe__it.mg-is-on::before{transform:scaleY(1)}
.mg-coupe__it:focus-visible{outline:2px solid var(--mg-blue);outline-offset:1px}
.mg-coupe__n{flex:none;min-width:16px;font-variant-numeric:tabular-nums;font-size:12px;font-weight:700;color:#97A0B8;letter-spacing:.02em;transition:color .25s}
.mg-coupe__it.mg-is-on .mg-coupe__n{color:var(--mg-blue)}
.mg-coupe__fig{grid-area:fig;margin:0;align-self:center}
.mg-coupe__draw{position:relative}
/* dessin */
.mg-coupe__svg{display:block;width:100%;height:auto;overflow:visible;--ink:#031852;--bl:#1A5CFF}
.mg-coupe__svg .mg-b-earth{fill:url(#mg-hatch);stroke:none}
.mg-coupe__svg .mg-b-w{fill:#E7EBF2;stroke:var(--ink);stroke-width:1}
.mg-coupe__svg .mg-b-ln{fill:#fff;stroke:var(--ink);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.mg-coupe__svg .mg-b-dl{fill:none;stroke:var(--ink);stroke-width:.85;stroke-linecap:round;stroke-linejoin:round}
.mg-coupe__svg .mg-b-gl{fill:none;stroke:var(--ink);stroke-width:.85}
.mg-coupe__svg .mg-b-roof{fill:#E7EBF2;stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round}
.mg-coupe__svg .mg-b-ins{fill:#F1F3F8;stroke:none}
.mg-coupe__svg .mg-b-insl{fill:none;stroke:#E1E6EF;stroke-width:7;stroke-linecap:round}
.mg-coupe__svg .mg-b-cab{fill:#fff;stroke:var(--ink);stroke-width:1.2}
.mg-coupe__svg .mg-b-fl{fill:#fff;stroke:var(--ink);stroke-width:.85}
.mg-coupe__svg .mg-b-pt{fill:none;stroke:#CDD5E3;stroke-width:1.5}
.mg-coupe__svg .mg-b-pipe{fill:none;stroke:var(--ink);stroke-width:1.05}
.mg-coupe__svg .mg-b-br{fill:#fff;stroke:var(--ink);stroke-width:.85}
.mg-coupe__svg .mg-b-dot{fill:var(--ink)}
.mg-coupe__svg .mg-b-fa{opacity:.55}
.mg-coupe__svg .mg-b-lv{font:700 8px var(--mg-font);fill:#8B95AE;letter-spacing:.04em}
.mg-coupe__svg .mg-b-hit{fill:transparent;stroke:none}
.mg-coupe__svg .mg-b-z{cursor:pointer}
.mg-coupe__svg>.mg-b-w{cursor:pointer}
.mg-coupe__svg.mg-is-struct>.mg-b-w{stroke:var(--bl);fill:#E4ECFF}
/* mise en avant : le métier actif passe en bleu, le décor s'efface, la structure reste nette */
.mg-coupe__svg>*,.mg-coupe__svg .mg-b-z>*{transition:opacity .45s ease,stroke .35s,fill .35s}
.mg-coupe__svg.mg-has-on>.mg-b-ln,.mg-coupe__svg.mg-has-on>.mg-b-dl{opacity:.32}
.mg-coupe__svg.mg-has-on>.mg-b-z:not(.mg-is-on)>:not(.mg-b-w):not(.mg-b-roof):not(.mg-b-hit){opacity:.32}
.mg-coupe__svg .mg-b-z.mg-is-on .mg-b-hit{fill:rgba(26,92,255,.055)}
.mg-coupe__svg .mg-b-z.mg-is-on :is(.mg-b-ln,.mg-b-dl,.mg-b-w,.mg-b-roof,.mg-b-cab,.mg-b-fl,.mg-b-br,.mg-b-pipe,.mg-b-gl){stroke:var(--bl)}
.mg-coupe__svg .mg-b-z.mg-is-on :is(.mg-b-ln,.mg-b-cab,.mg-b-br,.mg-b-fl){fill:#F0F4FF}
.mg-coupe__svg .mg-b-z.mg-is-on :is(.mg-b-w,.mg-b-roof){fill:#E4ECFF}
.mg-coupe__svg .mg-b-z.mg-is-on .mg-b-ins{fill:#DFE8FF}
.mg-coupe__svg .mg-b-z.mg-is-on .mg-b-insl{stroke:#CFDCFF}
.mg-coupe__svg .mg-b-z.mg-is-on .mg-b-dot{fill:var(--bl)}
.mg-coupe__svg .mg-b-z.mg-is-on .mg-b-a{animation:mg-k-bob 1.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes mg-k-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
/* « Et bien d'autres… » : tout l'immeuble s'allume */
.mg-coupe__svg.mg-is-all>.mg-b-z :is(.mg-b-ln,.mg-b-dl,.mg-b-w,.mg-b-roof,.mg-b-cab,.mg-b-br,.mg-b-pipe){stroke:var(--bl)}
/* étiquette */
.mg-coupe__pin{position:absolute;left:0;top:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .25s ease,left .5s cubic-bezier(.16,1,.3,1),top .5s cubic-bezier(.16,1,.3,1)}
.mg-coupe__pin span{position:relative;display:block;padding:7px 12px;border-radius:10px;background:var(--mg-navy);color:#fff;font-size:12.5px;font-weight:700;line-height:1.3;white-space:nowrap;box-shadow:0 14px 28px -14px rgba(3,24,82,.6);transform:translate(calc(-50% + var(--dx,0px)),calc(-100% - 12px))}
.mg-coupe__pin span::after{content:"";position:absolute;left:calc(50% - var(--dx,0px));bottom:-5px;width:10px;height:10px;margin-left:-5px;background:var(--mg-navy);transform:rotate(45deg);border-radius:2px}
.mg-coupe__pin.mg-is-on{opacity:1}
@media (max-width:1199px){
  .mg-coupe{grid-template-columns:1fr;grid-template-areas:"head" "fig" "list" "hint"}
  .mg-coupe__fig{width:100%;max-width:760px;justify-self:center;padding-top:34px}
  .mg-coupe__list{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:767px){
  .mg-coupe__list{grid-template-columns:1fr 1fr}
}

.mg-demo-page{padding-top:calc(var(--mg-section) + 60px)}

/* ---------- V4 responsive ---------- */
@media (max-width:1023px){
  .mg-duo__cards{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .mg-js .mg-flip:not(.mg-is-on):nth-child(n){transform:rotate(0) translateY(0)}
  .mg-js .mg-flip:not(.mg-is-on):nth-child(1){transform:rotate(-1.2deg)}
  .mg-js .mg-flip:not(.mg-is-on):nth-child(2){transform:rotate(1deg)}
  .mg-js .mg-flip:not(.mg-is-on):nth-child(3){transform:rotate(-.8deg)}
  .mg-coupe{padding:32px}
}
@media (max-width:767px){
  .mg-duo__band>*{padding:24px}
  .mg-duo__stats{grid-template-columns:1fr;gap:22px}
  .mg-duo__cv{text-align:left}
  .mg-js .mg-duo[data-state="off"] .mg-duo__title>.mg-duo__sw-on,.mg-js .mg-duo[data-state="off"] .mg-duo__lead>.mg-duo__sw-on,
  .mg-js .mg-duo[data-state="on"] .mg-duo__title>.mg-duo__sw-off,.mg-js .mg-duo[data-state="on"] .mg-duo__lead>.mg-duo__sw-off{display:none}
  .mg-switch__opt{padding:11px 18px;font-size:14px}
}
@media (max-width:479px){
  .mg-duo__cv strong{white-space:normal}
  .mg-flip__face{padding:22px}
  .mg-coupe{padding:24px 18px}
  .mg-coupe__list{column-gap:6px}
  .mg-coupe__it{font-size:13px;padding:6px 8px;gap:8px}
}

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  .mg *,.mg *::before,.mg *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .mg-js .mg-reveal{opacity:1;transform:none}
  .mg-marquee{-webkit-mask-image:none;mask-image:none}
  .mg-marquee__track{width:auto;justify-content:center}
  .mg-marquee__set{flex-wrap:wrap;justify-content:center;gap:28px 48px}
  .mg-marquee__set[aria-hidden="true"]{display:none}
  .mg-arc__spark{display:none}
  .mg-js .mg-offer .mg-split__bar i{width:var(--m)}
}

/* motion.css */
/* =========================================================
   MONGA · Motion design V2 · motion.css
   Couche d'animations ajoutée PAR-DESSUS le site existant.
   - Active uniquement quand <html> porte la classe « mg-m » (posée dans le <head>,
     retirée automatiquement si motion.js ne se charge pas).
   - Aucune règle ici ne change un texte, une couleur de marque ou la structure.
   - Tout est désactivé avec prefers-reduced-motion (motion.js retire « mg-m »).
   Pour revenir à la version sans motion : retirer motion.css et motion.js du HTML.
   ========================================================= */

:root{
  --mg-e-out:cubic-bezier(.16,1,.3,1);        /* sortie « expo » : arrive vite, se pose doucement */
  --mg-e-inout:cubic-bezier(.65,0,.35,1);
  --mg-e-spring:cubic-bezier(.34,1.45,.55,1);  /* léger rebond */
}

/* ---------------------------------------------------------
   0. OUTILS COMMUNS : mots masqués (titres), pauses hors écran
   --------------------------------------------------------- */
.mg-m .mg-m-mask{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .02em .12em;margin:-.08em -.02em -.12em}
.mg-m .mg-m-w{display:inline-block;will-change:transform}
.mg-m .mg-m-paused,.mg-m .mg-m-paused *{animation-play-state:paused!important}

/* ---------------------------------------------------------
   1. HERO · entrée orchestrée (≈ 1,6 s) + parallaxe
   États initiaux tant que le hero n'a ni « mg-m-go » ni « mg-m-done »
   --------------------------------------------------------- */
.mg-m .mg-hero:not(.mg-m-ready):not(.mg-m-done) .mg-h1{visibility:hidden}

.mg-m .mg-hero:not(.mg-m-go):not(.mg-m-done) .mg-hero__grid-bg{opacity:0;transform:scale(1.06)}
.mg-m .mg-hero:not(.mg-m-go):not(.mg-m-done) .mg-hero__roof polyline{stroke-dasharray:1600;stroke-dashoffset:1600}
.mg-m .mg-hero:not(.mg-m-go):not(.mg-m-done) .mg-arc{opacity:0;transform:scaleX(.55)}
.mg-m .mg-hero:not(.mg-m-go):not(.mg-m-done) .mg-kicker{opacity:0;transform:translateX(-14px)}
.mg-m .mg-hero:not(.mg-m-go):not(.mg-m-done) .mg-kicker svg{stroke-dasharray:34;stroke-dashoffset:34}
.mg-m .mg-hero:not(.mg-m-go):not(.mg-m-done) .mg-m-w{transform:translateY(108%)}
.mg-m .mg-hero:not(.mg-m-go):not(.mg-m-done) .mg-lead{transform:translateY(18px)}
.mg-m .mg-hero:not(.mg-m-go):not(.mg-m-done) .mg-hero__ctas .mg-btn{opacity:0;transform:translateY(16px) scale(.97)}
.mg-m .mg-hero:not(.mg-m-go):not(.mg-m-done) .mg-proof{opacity:0;transform:translateY(10px)}
.mg-m .mg-hero:not(.mg-m-go):not(.mg-m-done) .mg-stars .mg-ico{transform:scale(0)}
.mg-m .mg-hero:not(.mg-m-go):not(.mg-m-done) .mg-persona{opacity:0;transform:translateY(14px)}
.mg-m .mg-hero:not(.mg-m-go):not(.mg-m-done) .mg-persona__chip{opacity:0;transform:translateY(8px)}
.mg-m .mg-hero:not(.mg-m-go):not(.mg-m-done) .mg-mock{opacity:0}
.mg-m .mg-hero:not(.mg-m-go):not(.mg-m-done) .mg-app{transform:translateY(70px) rotateY(-26deg) rotateX(20deg) scale(.93)}
.mg-m .mg-hero:not(.mg-m-go):not(.mg-m-done) .mg-app__head,
.mg-m .mg-hero:not(.mg-m-go):not(.mg-m-done) .mg-app__side>*{opacity:0;transform:translateY(6px)}
.mg-m .mg-hero:not(.mg-m-go):not(.mg-m-done) .mg-mrow{opacity:0;transform:translateX(-18px)}
.mg-m .mg-hero:not(.mg-m-go):not(.mg-m-done) .mg-fl--card{opacity:0;translate:-46px 46px}
.mg-m .mg-hero:not(.mg-m-go):not(.mg-m-done) .mg-fl--notif{opacity:0;translate:0 -34px}

/* transitions de l'entrée (uniquement pendant l'entrée, pour ne pas retarder les survols ensuite) */
.mg-m .mg-hero.mg-m-go:not(.mg-m-done) .mg-hero__grid-bg{transition:opacity 1.4s ease,transform 1.8s var(--mg-e-out)}
.mg-m .mg-hero.mg-m-go:not(.mg-m-done) .mg-hero__roof polyline{stroke-dasharray:1600;transition:stroke-dashoffset 1.9s var(--mg-e-inout) .15s}
.mg-m .mg-hero.mg-m-go:not(.mg-m-done) .mg-arc{transition:opacity 1s ease .6s,transform 1.6s var(--mg-e-out) .6s}
.mg-m .mg-hero.mg-m-go:not(.mg-m-done) .mg-kicker{transition:opacity .7s ease .1s,transform .9s var(--mg-e-out) .1s}
.mg-m .mg-hero.mg-m-go:not(.mg-m-done) .mg-kicker svg{stroke-dasharray:34;transition:stroke-dashoffset .9s var(--mg-e-out) .25s}
.mg-m .mg-hero.mg-m-go:not(.mg-m-done) .mg-m-w{transition:transform 1s var(--mg-e-out) calc(.22s + var(--l,0) * .11s)}
.mg-m .mg-hero.mg-m-go:not(.mg-m-done) .mg-lead{transition:opacity .8s ease .62s,transform 1s var(--mg-e-out) .62s}
.mg-m .mg-hero.mg-m-go:not(.mg-m-done) .mg-hero__ctas .mg-btn{transition:opacity .6s ease .8s,transform .9s var(--mg-e-out) .8s}
.mg-m .mg-hero.mg-m-go:not(.mg-m-done) .mg-hero__ctas .mg-btn+.mg-btn{transition-delay:.9s}
.mg-m .mg-hero.mg-m-go:not(.mg-m-done) .mg-proof{transition:opacity .6s ease 1s,transform .8s var(--mg-e-out) 1s}
.mg-m .mg-hero.mg-m-go:not(.mg-m-done) .mg-stars .mg-ico{transition:transform .5s var(--mg-e-spring) calc(1.05s + var(--s,0) * .07s)}
.mg-m .mg-hero.mg-m-go:not(.mg-m-done) .mg-persona{transition:opacity .7s ease 1.15s,transform .9s var(--mg-e-out) 1.15s}
.mg-m .mg-hero.mg-m-go:not(.mg-m-done) .mg-persona__chip{transition:opacity .5s ease calc(1.25s + var(--c,0) * .05s),transform .7s var(--mg-e-out) calc(1.25s + var(--c,0) * .05s)}
.mg-m .mg-hero.mg-m-go:not(.mg-m-done) .mg-mock{transition:opacity .7s ease .25s}
.mg-m .mg-hero.mg-m-go:not(.mg-m-done) .mg-app{transition:transform 1.5s var(--mg-e-out) .3s}
.mg-m .mg-hero.mg-m-go:not(.mg-m-done) .mg-app__head{transition:opacity .5s ease .65s,transform .7s var(--mg-e-out) .65s}
.mg-m .mg-hero.mg-m-go:not(.mg-m-done) .mg-app__side>*{transition:opacity .4s ease calc(.7s + var(--c,0) * .06s),transform .6s var(--mg-e-out) calc(.7s + var(--c,0) * .06s)}
.mg-m .mg-hero.mg-m-go:not(.mg-m-done) .mg-mrow{transition:opacity .5s ease calc(.8s + var(--c,0) * .11s),transform .8s var(--mg-e-out) calc(.8s + var(--c,0) * .11s)}
.mg-m .mg-hero.mg-m-go:not(.mg-m-done) .mg-fl--card{transition:opacity .6s ease 1.1s,translate 1.1s var(--mg-e-out) 1.1s}
.mg-m .mg-hero.mg-m-go:not(.mg-m-done) .mg-fl--notif{transition:opacity .5s ease 1.35s,translate .9s var(--mg-e-out) 1.35s}

/* parallaxe souris : l'appli s'incline de quelques degrés selon --mx / --my (posés par motion.js) */
@media (min-width:768px){
  .mg-m .mg-hero.mg-m-done .mg-app{transform:rotateY(calc(-8deg + var(--mx,0) * 5deg)) rotateX(calc(4deg - var(--my,0) * 4deg))}
}

/* pause des boucles du hero quand il n'est plus visible */
.mg-m .mg-hero.mg-m-off .mg-fl,.mg-m .mg-hero.mg-m-off .mg-arc__spark{animation-play-state:paused}

/* ---------------------------------------------------------
   2. HERO · appli vivante (curseur fantôme, cloche, mise à jour) + recalcul par profil
   --------------------------------------------------------- */
.mg-m-cursor{position:absolute;left:0;top:0;z-index:5;width:22px;height:22px;pointer-events:none;opacity:0;transform:translate(360px,-40px);transition:transform 1.05s var(--mg-e-inout),opacity .35s ease;filter:drop-shadow(0 4px 6px rgba(3,24,82,.3))}
.mg-m-cursor svg{display:block;width:100%;height:100%;transition:transform .18s ease}
.mg-m-cursor.mg-m-nt{transition:none}
.mg-m-cursor.mg-m-show{opacity:1}
.mg-m-cursor.mg-m-press svg{transform:scale(.8)}
.mg-m .mg-mcard__btn{isolation:isolate}
.mg-m-ripple{position:absolute;z-index:3;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:rgba(255,255,255,.75);pointer-events:none;animation:mg-m-ripple .7s ease-out forwards}
@keyframes mg-m-ripple{from{transform:scale(0);opacity:.9}to{transform:scale(16);opacity:0}}
.mg-m .mg-app__side b{position:relative}
.mg-m .mg-app__side b.mg-m-ping::after{content:"";position:absolute;top:-4px;right:-4px;width:8px;height:8px;border-radius:50%;background:var(--mg-red);box-shadow:0 0 0 2px #fff;animation:mg-m-bellpop .5s var(--mg-e-spring)}
@keyframes mg-m-bellpop{from{transform:scale(0)}}
.mg-m .mg-mrow{transition:background-color .6s ease,border-color .6s ease}
.mg-m .mg-mrow.mg-m-flash{background:var(--mg-tint);border-color:#CFDDFF}
.mg-m .mg-seg i{transition:background-color .5s ease}
.mg-m .mg-mcard__done i{transition:transform .5s var(--mg-e-spring)}
.mg-m .mg-mock[data-step="3"] .mg-mcard__done i,.mg-m .mg-mock[data-step="2"] .mg-mcard__done i,.mg-m .mg-mock[data-step="1"] .mg-mcard__done i{transform:scale(.4)}
/* segment en cours de remplissage : léger reflet */
.mg-m .mg-mcard .mg-prog i::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transform:translateX(-100%)}
.mg-m .mg-mock[data-step="2"] .mg-mcard .mg-prog i:nth-child(2)::before,
.mg-m .mg-mock[data-step="3"] .mg-mcard .mg-prog i:nth-child(3)::before,
.mg-m .mg-mock[data-step="4"] .mg-mcard .mg-prog i:nth-child(4)::before{animation:mg-m-sheenbar .9s ease .35s}
@keyframes mg-m-sheenbar{to{transform:translateX(100%)}}

/* recalcul quand on change de profil : les missions sortent à gauche, les nouvelles entrent par la droite */
.mg-m .mg-mock.mg-is-swap .mg-app__main{opacity:1}
.mg-m .mg-mock .mg-mrow{transition:opacity .2s ease,transform .25s ease,background-color .6s ease,border-color .6s ease}
.mg-m .mg-mock.mg-is-swap .mg-mrow{opacity:0;transform:translateX(-18px)}
.mg-m .mg-mock.mg-is-swap .mg-mrow:nth-of-type(3){transition-delay:.04s}
.mg-m .mg-mock.mg-is-swap .mg-mrow:nth-of-type(4){transition-delay:.08s}
.mg-m .mg-mock.mg-m-enter .mg-mrow{animation:mg-m-rowin .6s var(--mg-e-out) backwards}
.mg-m .mg-mock.mg-m-enter .mg-mrow:nth-of-type(3){animation-delay:.07s}
.mg-m .mg-mock.mg-m-enter .mg-mrow:nth-of-type(4){animation-delay:.14s}
@keyframes mg-m-rowin{from{opacity:0;transform:translateX(22px)}}
.mg-m .mg-mock .mg-mcard{transition:opacity .3s ease,transform .5s var(--mg-e-out)}
.mg-m .mg-mock.mg-is-swap .mg-mcard{opacity:0;transform:translateY(14px) scale(.98)}
.mg-m .mg-mock.mg-m-enter .mg-app__tag{animation:mg-m-tagpop .5s var(--mg-e-spring)}
@keyframes mg-m-tagpop{from{transform:scale(.7);opacity:0}}
/* balayage « recalcul » sur l'écran */
.mg-m .mg-app__main{position:relative;overflow:hidden}
.mg-m .mg-app__main::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(26,92,255,.10),transparent);transform:translateX(-120%)}
.mg-m .mg-mock.mg-m-recalc .mg-app__main::after{animation:mg-m-sweep .75s var(--mg-e-inout)}
@keyframes mg-m-sweep{to{transform:translateX(260%)}}
/* phrase du profil : l'ancienne monte, la nouvelle arrive par dessous */
.mg-m .mg-persona__text{transition:opacity .22s ease,transform .32s var(--mg-e-out)}
.mg-m .mg-persona__text.mg-is-out{opacity:0;transform:translateY(-10px)}
/* pastille qui glisse entre les puces « Vous êtes : » */
.mg-m .mg-persona__chips{position:relative;isolation:isolate}
.mg-m-pill{position:absolute;left:0;top:0;z-index:-1;border-radius:999px;background:var(--mg-navy);box-shadow:0 10px 22px -12px rgba(3,24,82,.7);pointer-events:none;transition:transform .55s var(--mg-e-out),width .55s var(--mg-e-out),height .55s var(--mg-e-out)}
.mg-m .mg-m-has-pill .mg-persona__chip[aria-pressed="true"]{background:transparent;border-color:transparent;color:#fff}
.mg-m .mg-persona__chip{transition:background-color .2s,border-color .2s,color .3s,opacity .5s,transform .7s var(--mg-e-out)}
.mg-m .mg-hero:not(.mg-m-go):not(.mg-m-done) .mg-m-pill{opacity:0}
.mg-m .mg-hero.mg-m-go:not(.mg-m-done) .mg-m-pill{transition:opacity .5s ease 1.3s}

/* ---------------------------------------------------------
   3. SCROLL · continuité entre sections + titres qui se révèlent
   --------------------------------------------------------- */
@media (min-width:768px){
  .mg-m .mg-section--grey{background:transparent;isolation:isolate}
  .mg-m .mg-section--grey::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--mg-grey);transform:scaleX(var(--mg-m-s,1));border-radius:var(--mg-m-r,0px);will-change:transform}
}
/* titres de section : mots qui montent depuis un masque, ligne après ligne */
.mg-m .mg-h2.mg-m-split{opacity:1!important;transform:none!important}
.mg-m .mg-m-split .mg-m-w{transform:translateY(108%);transition:transform 1s var(--mg-e-out) calc(var(--l,0) * .1s)}
.mg-m .mg-m-split.mg-m-in .mg-m-w{transform:none}
/* le petit toit bleu des surtitres se dessine */
.mg-m .mg-kicker.mg-reveal svg{stroke-dasharray:34;stroke-dashoffset:34;transition:stroke-dashoffset 1s var(--mg-e-out) .15s}
.mg-m .mg-kicker.mg-reveal.mg-is-in svg{stroke-dashoffset:0}
/* apparitions un peu plus « posées » */
.mg-m.mg-js .mg-reveal{transition:opacity .7s ease,transform .9s var(--mg-e-out)}
/* le bandeau de logos s'ouvre depuis le centre */
.mg-m .mg-logos .mg-marquee{transition:opacity 1.2s ease,clip-path 1.4s var(--mg-e-out)}
.mg-m .mg-logos:not(.mg-m-in) .mg-marquee{opacity:0;clip-path:inset(0 45% 0 45%)}
.mg-m .mg-logos.mg-m-in .mg-marquee{opacity:1;clip-path:inset(0 0 0 0)}
.mg-m .mg-marquee img{transition:transform .3s var(--mg-e-out)}
.mg-m .mg-marquee li:hover img{transform:translateY(-3px) scale(1.06)}
.mg-m .mg-marquee.mg-m-paused .mg-marquee__track{animation-play-state:paused}

/* ---------------------------------------------------------
   4. CARTES PHYSIQUES (cartes retournables + offres)
   --------------------------------------------------------- */
.mg-m .mg-flip{transition:transform .7s var(--mg-e-out),rotate .5s var(--mg-e-out),translate .5s var(--mg-e-out)}
.mg-m .mg-flip.mg-m-hover{transition:transform .7s var(--mg-e-out),rotate .12s linear,translate .3s var(--mg-e-out)}
.mg-m .mg-flip .mg-dtile{transition:translate .3s var(--mg-e-out)}
.mg-m .mg-flip__face{position:relative}
.mg-m .mg-flip__face::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(26,92,255,.07),transparent 45%);opacity:0;transition:opacity .3s}
.mg-m .mg-flip.mg-m-hover .mg-flip__face::before{opacity:1}
/* retournement : anticipation, légère sur-rotation puis pose */
.mg-m .mg-js .mg-flip__in,.mg-m.mg-js .mg-flip__in{transition:transform 1.05s cubic-bezier(.5,-.12,.2,1.22)}
.mg-m .mg-js .mg-flip:nth-child(n) .mg-flip__in,.mg-m.mg-js .mg-flip:nth-child(n) .mg-flip__in{transition-delay:0s}
/* bascule d'ensemble vers « Avec Monga » : chaque carte se redresse et se retourne au passage du balayage */
.mg-m .mg-duo.mg-m-sweep .mg-flip:nth-child(1),.mg-m .mg-duo.mg-m-sweep .mg-flip:nth-child(1) .mg-flip__in{transition-delay:.12s}
.mg-m .mg-duo.mg-m-sweep .mg-flip:nth-child(2),.mg-m .mg-duo.mg-m-sweep .mg-flip:nth-child(2) .mg-flip__in{transition-delay:.44s}
.mg-m .mg-duo.mg-m-sweep .mg-flip:nth-child(3),.mg-m .mg-duo.mg-m-sweep .mg-flip:nth-child(3) .mg-flip__in{transition-delay:.76s}
/* retour à « Sans Monga » : retournement rapide en cascade, puis les cartes retombent de travers avec un petit rebond */
.mg-m .mg-duo.mg-m-reset .mg-flip{transition:transform .9s var(--mg-e-spring),rotate .5s var(--mg-e-out),translate .5s var(--mg-e-out)}
.mg-m .mg-duo.mg-m-reset .mg-flip:nth-child(2),.mg-m .mg-duo.mg-m-reset .mg-flip:nth-child(2) .mg-flip__in{transition-delay:.07s}
.mg-m .mg-duo.mg-m-reset .mg-flip:nth-child(3),.mg-m .mg-duo.mg-m-reset .mg-flip:nth-child(3) .mg-flip__in{transition-delay:.14s}
/* la carte se soulève pendant qu'elle tourne (propriétés individuelles : ne gêne pas l'inclinaison existante) */
.mg-m .mg-flip.mg-m-flipping{animation:mg-m-lift 1.05s var(--mg-e-inout) var(--mg-fd,0s) backwards}
@keyframes mg-m-lift{0%{scale:1;translate:0 0}45%{scale:1.05;translate:0 -16px}100%{scale:1;translate:0 0}}
/* ombre au sol qui suit la carte */
.mg-m-shade{position:absolute;left:12%;right:12%;bottom:-16px;height:28px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(3,24,82,.22),transparent);pointer-events:none;opacity:.55;transform-origin:center}
.mg-m .mg-flip{isolation:isolate}
.mg-m .mg-flip.mg-m-flipping .mg-m-shade{animation:mg-m-shade 1.05s var(--mg-e-inout) var(--mg-fd,0s) backwards}
@keyframes mg-m-shade{0%{transform:scaleX(1);opacity:.55}45%{transform:scaleX(.35) translateY(10px);opacity:.25}100%{transform:scaleX(1);opacity:.55}}
/* ombrage de la face : elle s'assombrit à mi-course comme sous une vraie lumière */
.mg-m .mg-flip__face::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,rgba(3,24,82,.08),rgba(3,24,82,0));opacity:0}
.mg-m .mg-flip.mg-m-flipping .mg-flip__face::after{animation:mg-m-shadeface 1.05s var(--mg-e-inout) var(--mg-fd,0s) backwards}
@keyframes mg-m-shadeface{0%,100%{opacity:0}45%{opacity:1}}

/* offres : reflet qui suit le pointeur + contenu en profondeur */
.mg-m .mg-offer{isolation:isolate}
.mg-m .mg-offer::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;background:radial-gradient(460px circle at var(--gx,50%) var(--gy,0%),rgba(26,92,255,.08),transparent 45%);opacity:0;transition:opacity .35s}
.mg-m .mg-offer.mg-m-hover::after{opacity:1}
.mg-m .mg-offer .mg-offer__p b{display:inline-block;transition:translate .35s var(--mg-e-out)}
.mg-m .mg-offer.mg-m-hover .mg-offer__p b{translate:var(--px,0) var(--py,0)}
.mg-m .mg-offer .mg-tokens li{transition:transform .35s var(--mg-e-out),background-color .25s,border-color .25s}
.mg-m .mg-offer .mg-tokens li:hover{transform:translateY(-2px)}
/* escalier : les paliers montent l'un après l'autre */
.mg-m.mg-js .mg-offer.mg-reveal{transform:translateY(46px)}
.mg-m.mg-js .mg-offer.mg-reveal.mg-is-in{transform:none}
.mg-m.mg-js .mg-offer.mg-reveal[data-d="1"]{transition-delay:.12s}
.mg-m.mg-js .mg-offer.mg-reveal[data-d="2"]{transition-delay:.24s}
.mg-m .mg-lvl i{transition:transform .4s var(--mg-e-spring)}
.mg-m .mg-offer.mg-is-in .mg-lvl i.mg-on{animation:mg-m-lvl .6s var(--mg-e-spring) backwards}
.mg-m .mg-offer.mg-is-in .mg-lvl i.mg-on:nth-child(2){animation-delay:.1s}
.mg-m .mg-offer.mg-is-in .mg-lvl i.mg-on:nth-child(3){animation-delay:.2s}
@keyframes mg-m-lvl{from{transform:scaleY(0);transform-origin:bottom}}

/* autres cartes : icône qui réagit au survol */
.mg-m .mg-card .mg-dtile .mg-ico,.mg-m .mg-card .mg-dtile{transition:transform .35s var(--mg-e-out),translate .3s var(--mg-e-out)}
.mg-m .mg-card:hover .mg-dtile{transform:translateY(-3px) rotate(-3deg)}

/* ---------------------------------------------------------
   5. CHIFFRES · apparition, montée rapide, ralentissement, stabilisation, trait final
   --------------------------------------------------------- */
.mg-m .mg-count,.mg-m .mg-m-num,.mg-m .mg-stats4 strong .mg-count,.mg-m .mg-net__v .mg-count{display:inline-block;position:relative}
.mg-m .mg-count.mg-m-counting,.mg-m .mg-m-num.mg-m-counting{animation:mg-m-numin .5s var(--mg-e-out) backwards}
@keyframes mg-m-numin{from{opacity:0;transform:translateY(40%)}}
.mg-m .mg-count.mg-m-counted,.mg-m .mg-m-num.mg-m-counted,.mg-m [data-duo-to].mg-m-counted{animation:mg-m-settle .6s var(--mg-e-spring)}
@keyframes mg-m-settle{0%{transform:scale(1)}35%{transform:scale(1.05)}100%{transform:scale(1)}}
.mg-m .mg-count::after,.mg-m .mg-m-num::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:max(2px,.05em);border-radius:2px;background:var(--mg-blue);transform:scaleX(0);transform-origin:left;opacity:0;pointer-events:none}
.mg-m .mg-count.mg-m-counted::after,.mg-m .mg-m-num.mg-m-counted::after{animation:mg-m-underline 1.2s var(--mg-e-out) .05s}
@keyframes mg-m-underline{0%{transform:scaleX(0);opacity:1}55%{transform:scaleX(1);opacity:1;transform-origin:left}100%{transform:scaleX(1);opacity:0}}
.mg-m [data-duo-to]{display:inline-block}

/* ---------------------------------------------------------
   6. SIGNATURE 1 · « Le passage Monga » (section Sans / Avec Monga)
   Côté « Sans Monga », les cartes restent de travers (état v4).
   À la bascule, un fin balayage de lumière bleue traverse les cartes :
   chacune se redresse et se retourne à son passage, puis « Pris en charge »
   se pose comme un tampon, avec un halo vert. Le bandeau reçoit ensuite
   un reflet et passe aux chiffres. Rien n'est ajouté au repos.
   --------------------------------------------------------- */
.mg-m .mg-duo__cards,.mg-m .mg-duo__band{position:relative;z-index:1}
.mg-m .mg-duo__cards{z-index:2}
/* couche du balayage, posée sur les cartes */
.mg-m-pass{position:absolute;inset:-26px -20px;z-index:6;overflow:hidden;pointer-events:none;border-radius:34px}
.mg-m-beam{position:absolute;top:0;bottom:0;left:0;width:220px;opacity:0;translate:-230px 0;
  background:linear-gradient(90deg,rgba(26,92,255,0) 0%,rgba(26,92,255,.035) 55%,rgba(26,92,255,.11) 92%,rgba(26,92,255,.2) 99%,rgba(26,92,255,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.mg-m-beam::after{content:"";position:absolute;top:0;bottom:0;right:0;width:2px;border-radius:2px;background:linear-gradient(180deg,rgba(120,160,255,.4),#1A5CFF 30%,#1A5CFF 70%,rgba(120,160,255,.4));box-shadow:0 0 12px 2px rgba(26,92,255,.55),0 0 34px 6px rgba(26,92,255,.22)}
.mg-m-pass.mg-m-go .mg-m-beam{animation:mg-m-beam 1.2s cubic-bezier(.42,0,.58,1) forwards}
@keyframes mg-m-beam{0%{translate:-230px 0;opacity:0}7%{opacity:1}90%{opacity:1}100%{translate:var(--bw,1200px) 0;opacity:0}}
/* halo vert quand la carte se pose côté solution */
.mg-m-halo{position:absolute;inset:0;z-index:3;border-radius:24px;border:1.5px solid rgba(34,165,91,.6);box-shadow:0 0 0 6px rgba(34,165,91,.08);opacity:0;pointer-events:none}
.mg-m .mg-flip.mg-is-on.mg-m-flipping .mg-m-halo{animation:mg-m-halo 1.1s var(--mg-e-out) calc(var(--mg-fd,0s) + .78s) backwards}
@keyframes mg-m-halo{0%{opacity:0;scale:1}12%{opacity:1;scale:1}100%{opacity:0;scale:1.045}}
/* « Pris en charge » se pose comme un tampon */
.mg-m .mg-flip__face--on .mg-badge{transform-origin:70% 50%}
.mg-m .mg-flip.mg-is-on.mg-m-flipping .mg-flip__face--on .mg-badge{animation:mg-m-stamp .6s var(--mg-e-spring) calc(var(--mg-fd,0s) + .62s) backwards}
@keyframes mg-m-stamp{0%{opacity:0;scale:1.35;rotate:-5deg}55%{opacity:1;scale:.94;rotate:0deg}100%{opacity:1;scale:1;rotate:0deg}}
.mg-m .mg-flip.mg-is-on.mg-m-flipping .mg-flip__face--on .mg-badge .mg-ico{animation:mg-m-tick .45s var(--mg-e-out) calc(var(--mg-fd,0s) + .82s) backwards}
@keyframes mg-m-tick{from{opacity:0;scale:.3}}
/* l'icône de la solution arrive avec un léger rebond */
.mg-m .mg-flip.mg-is-on.mg-m-flipping .mg-flip__face--on .mg-dtile{animation:mg-m-tilein .7s var(--mg-e-spring) calc(var(--mg-fd,0s) + .55s) backwards}
@keyframes mg-m-tilein{from{scale:.7;opacity:.4}}
/* bandeau : reflet de lumière qui prolonge le balayage, puis passage aux chiffres */
.mg-m .mg-duo__band::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;translate:-100% 0;
  background:linear-gradient(100deg,transparent 25%,rgba(26,92,255,.06) 42%,rgba(255,255,255,.85) 50%,rgba(26,92,255,.06) 58%,transparent 75%)}
.mg-m .mg-duo.mg-m-sweep .mg-duo__band::after{animation:mg-m-bandsheen 1.1s var(--mg-e-inout) .95s backwards}
@keyframes mg-m-bandsheen{0%{opacity:1;translate:-100% 0}100%{opacity:1;translate:100% 0}}
.mg-m .mg-duo[data-state="on"] .mg-duo__panel--off{transition-delay:.85s}
.mg-m .mg-duo[data-state="on"] .mg-duo__panel--on{transition-delay:1.1s}
/* interrupteur : la pastille s'étire pendant qu'elle glisse, et le bouton répond à la pression */
.mg-m .mg-switch{transition:scale .2s var(--mg-e-out)}
.mg-m .mg-switch:active{scale:.97}
.mg-m .mg-switch__knob.mg-m-stretch{animation:mg-m-stretch .55s var(--mg-e-out)}
@keyframes mg-m-stretch{0%{scale:1 1}35%{scale:1.14 .9}100%{scale:1 1}}
/* mobile et tablette : le balayage descend le long des cartes empilées */
@media (max-width:1023px){
  .mg-m-pass{inset:-18px -12px}
  .mg-m-beam{left:0;right:0;top:0;bottom:auto;width:auto;height:200px;translate:0 -210px;
    background:linear-gradient(180deg,rgba(26,92,255,0) 0%,rgba(26,92,255,.035) 55%,rgba(26,92,255,.11) 92%,rgba(26,92,255,.2) 99%,rgba(26,92,255,0) 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
  .mg-m-beam::after{top:auto;left:0;right:0;bottom:0;width:auto;height:2px;background:linear-gradient(90deg,rgba(120,160,255,.4),#1A5CFF 30%,#1A5CFF 70%,rgba(120,160,255,.4))}
  .mg-m-pass.mg-m-go .mg-m-beam{animation-name:mg-m-beamv}
  @keyframes mg-m-beamv{0%{translate:0 -210px;opacity:0}7%{opacity:1}90%{opacity:1}100%{translate:0 var(--bh,900px);opacity:0}}
}

/* ---------------------------------------------------------
   7. SIGNATURE 2 · « Une mission qui traverse les 4 étapes »
   --------------------------------------------------------- */
@media (min-width:1024px){
  .mg-m.mg-js .mg-steps-sticky{perspective:1600px}
  .mg-m.mg-js .mg-step__screen{transform:translateY(-38%) rotateX(-9deg) scale(.95);transform-origin:50% 100%;transition:opacity .45s ease,transform .8s var(--mg-e-out),visibility .8s}
  .mg-m.mg-js .mg-step.mg-m-past .mg-step__screen{transform:translateY(-62%) rotateX(7deg) scale(.93);transform-origin:50% 0}
  .mg-m.mg-js .mg-step.mg-is-active .mg-step__screen{transform:translateY(-50%)}
  .mg-m.mg-js .mg-steps-nav i::after{content:"";position:absolute;left:50%;bottom:-7px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;border:3px solid var(--mg-blue);box-shadow:0 0 0 5px rgba(26,92,255,.14)}
  .mg-m.mg-js .mg-step__big{transition:transform .6s var(--mg-e-out),color .3s}
  .mg-m.mg-js .mg-step.mg-is-active .mg-step__big{transform:translateX(4px)}
}
/* micro-séquences dans chaque écran (rejouées à chaque activation) */
.mg-m .mg-step.mg-m-play[data-m="1"] .mg-field-demo{animation:mg-m-up .6s var(--mg-e-out) backwards}
.mg-m .mg-step.mg-m-play[data-m="1"] .mg-field-demo:nth-child(2){animation-delay:.12s}
.mg-m .mg-step.mg-m-play[data-m="1"] .mg-field-demo:nth-child(3){animation-delay:.24s}
.mg-m .mg-step.mg-m-play[data-m="1"] .mg-field-demo:nth-child(4){animation-delay:.36s}
.mg-m .mg-step.mg-m-play[data-m="1"] .mg-cats span.mg-is-on{animation:mg-m-select .5s var(--mg-e-spring) .7s backwards}
@keyframes mg-m-select{from{background:#fff;color:var(--mg-navy);border-color:var(--mg-line);transform:scale(1)}60%{transform:scale(1.08)}to{transform:scale(1)}}
.mg-m-type{display:inline-block;clip-path:inset(0 100% 0 0)}
.mg-m .mg-step.mg-m-play[data-m="1"] .mg-m-type{animation:mg-m-wipe .8s var(--mg-e-out) .9s forwards}
.mg-m .mg-step:not(.mg-m-play) .mg-m-type,.mg-m .mg-step.mg-m-played .mg-m-type{clip-path:none}
@keyframes mg-m-wipe{to{clip-path:inset(0 0 0 0)}}
.mg-m .mg-step.mg-m-play[data-m="1"] .mg-field-demo div.mg-is-focus{animation:mg-m-focus .6s ease .8s backwards}
@keyframes mg-m-focus{from{box-shadow:0 0 0 0 var(--mg-tint);border-color:var(--mg-line)}}
.mg-m .mg-step.mg-m-play[data-m="1"] .mg-field-demo .mg-badge{animation:mg-m-pop .5s var(--mg-e-spring) 1.7s backwards}

.mg-m .mg-step.mg-m-play[data-m="2"] .mg-devis{animation:mg-m-slidein .7s var(--mg-e-out) backwards}
@keyframes mg-m-slidein{from{opacity:0;transform:translateX(36px)}}
.mg-m .mg-devis{position:relative;overflow:hidden}
.mg-m-scan{position:absolute;top:0;bottom:0;left:0;width:38%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(26,92,255,.16),transparent);border-right:2px solid rgba(26,92,255,.35);transform:translateX(-110%);opacity:0}
.mg-m .mg-step.mg-m-play[data-m="2"] .mg-m-scan{animation:mg-m-scan 1.1s var(--mg-e-inout) .5s}
@keyframes mg-m-scan{0%{transform:translateX(-110%);opacity:1}100%{transform:translateX(290%);opacity:1}}
.mg-m .mg-step.mg-m-play[data-m="2"] .mg-devis .mg-badge--blue{animation:mg-m-pop .55s var(--mg-e-spring) 1.5s backwards}
.mg-m .mg-step.mg-m-play[data-m="2"] .mg-devis__btns{animation:mg-m-up .5s var(--mg-e-out) 1.7s backwards}
.mg-m .mg-step.mg-m-play[data-m="2"] .mg-fake-btn--blue{animation:mg-m-cta 1.2s ease 2.2s}
@keyframes mg-m-cta{0%{box-shadow:0 0 0 0 rgba(26,92,255,.45)}100%{box-shadow:0 0 0 14px rgba(26,92,255,0)}}

.mg-m .mg-step[data-m="3"] .mg-badge--blue{position:relative;padding-left:22px}
.mg-m .mg-step[data-m="3"] .mg-badge--blue::before{content:"";position:absolute;left:9px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--mg-blue);animation:mg-m-livedot 1.6s ease-out infinite}
@keyframes mg-m-livedot{0%{box-shadow:0 0 0 0 rgba(26,92,255,.5)}100%{box-shadow:0 0 0 7px rgba(26,92,255,0)}}
.mg-m .mg-step.mg-m-play[data-m="3"] .mg-prog i::after,.mg-m .mg-step.mg-m-play[data-m="4"] .mg-prog i::after{animation:mg-m-fill .55s var(--mg-e-out) backwards}
.mg-m .mg-step.mg-m-play .mg-prog i:nth-child(2)::after{animation-delay:.18s}
.mg-m .mg-step.mg-m-play .mg-prog i:nth-child(3)::after{animation-delay:.36s}
.mg-m .mg-step.mg-m-play .mg-prog i:nth-child(4)::after{animation-delay:.54s}
@keyframes mg-m-fill{from{transform:scaleX(0)}}
.mg-m .mg-step.mg-m-play[data-m="3"] .mg-person{animation:mg-m-up .6s var(--mg-e-out) .75s backwards}
.mg-m .mg-step.mg-m-play[data-m="3"] .mg-person__av{animation:mg-m-pop .55s var(--mg-e-spring) 1s backwards}
.mg-m .mg-step.mg-m-play[data-m="3"] .mg-filerow{animation:mg-m-up .6s var(--mg-e-out) 1.05s backwards}

.mg-m .mg-done__ic{position:relative}
.mg-m .mg-done__ic::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--mg-green);opacity:0}
.mg-m .mg-step.mg-m-play[data-m="4"] .mg-done__ic{animation:mg-m-pop .6s var(--mg-e-spring) backwards}
.mg-m .mg-step.mg-m-play[data-m="4"] .mg-done__ic::after{animation:mg-m-ring .9s ease-out .25s}
@keyframes mg-m-ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.9);opacity:0}}
.mg-m .mg-step.mg-m-play[data-m="4"] .mg-done strong{animation:mg-m-up .5s var(--mg-e-out) .15s backwards}
.mg-m .mg-step.mg-m-play[data-m="4"] .mg-filerow{animation:mg-m-up .55s var(--mg-e-out) .75s backwards}
.mg-m .mg-step.mg-m-play[data-m="4"] .mg-filerow+.mg-filerow{animation-delay:.9s}
.mg-m .mg-step.mg-m-play[data-m="4"] .mg-filerow .mg-badge{animation:mg-m-stamp .5s var(--mg-e-spring) 1.2s backwards}
.mg-m .mg-step.mg-m-play[data-m="4"] .mg-filerow+.mg-filerow .mg-badge{animation-delay:1.38s}
@keyframes mg-m-stamp{from{opacity:0;transform:scale(1.6) rotate(-8deg)}}
@keyframes mg-m-up{from{opacity:0;transform:translateY(14px)}}
@keyframes mg-m-pop{from{opacity:0;transform:scale(.5)}70%{transform:scale(1.08)}}

/* ---------------------------------------------------------
   8. BOUTONS · reflet, élévation, flèche, appui, onde, départ vers la page suivante
   --------------------------------------------------------- */
.mg-m .mg-btn{position:relative;overflow:hidden;isolation:isolate;transition:background .25s,color .25s,border-color .25s,transform .25s var(--mg-e-out),box-shadow .3s,translate .45s var(--mg-e-out)}
.mg-m .mg-btn::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.38) 50%,transparent 80%);transform:translateX(-130%) skewX(-12deg)}
.mg-m .mg-btn--ghost::after{background:linear-gradient(105deg,transparent 20%,rgba(26,92,255,.10) 50%,transparent 80%)}
.mg-m .mg-btn:hover::after{transform:translateX(230%) skewX(-12deg);transition:transform .85s var(--mg-e-inout)}
.mg-m .mg-btn--primary:hover{transform:translateY(-2px);box-shadow:0 18px 32px -16px rgba(26,92,255,.95)}
.mg-m .mg-btn--ghost:hover{transform:translateY(-2px);box-shadow:0 14px 26px -18px rgba(3,24,82,.5)}
.mg-m .mg-btn:hover .mg-ico--arrow{transform:translateX(4px)}
.mg-m .mg-btn:active{transform:translateY(0) scale(.97);transition-duration:.12s}
.mg-m .mg-btn .mg-m-ripple{background:rgba(255,255,255,.55)}
.mg-m .mg-btn--ghost .mg-m-ripple{background:rgba(26,92,255,.18)}
.mg-m .mg-dbtn,.mg-m .mg-tab,.mg-m .mg-testi__tab,.mg-m .mg-persona__chip{position:relative;overflow:hidden}
/* voile de transition vers la page démo */
.mg-m-veil{position:fixed;inset:0;z-index:9998;background:#fff;opacity:0;pointer-events:none;transition:opacity .28s ease}
.mg-m.mg-m-leaving .mg-m-veil{opacity:1;pointer-events:auto}

/* ---------------------------------------------------------
   9. CURSEUR · anneau discret (ordinateur uniquement), magnétique sur les boutons
   --------------------------------------------------------- */
.mg-m-ring{position:fixed;left:0;top:0;z-index:9999;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:999px;border:1.5px solid rgba(3,24,82,.28);pointer-events:none;opacity:0;transition:opacity .25s ease,width .3s var(--mg-e-out),height .3s var(--mg-e-out),margin .3s var(--mg-e-out),border-radius .3s var(--mg-e-out),border-color .25s,background-color .25s}
.mg-m-ring.mg-m-on{opacity:1}
.mg-m-ring.mg-m-link{width:46px;height:46px;margin:-23px 0 0 -23px;border-color:rgba(26,92,255,.55);background:rgba(26,92,255,.06)}
.mg-m-ring.mg-m-snap{border-color:rgba(26,92,255,.6);background:transparent}
.mg-m-ring.mg-m-text{opacity:0}
.mg-m-ring.mg-m-down{border-color:rgba(26,92,255,.9)}

/* ---------------------------------------------------------
   10. MICRO-INTERACTIONS
   --------------------------------------------------------- */
/* menu : soulignement qui glisse, sous-menu en cascade */
.mg-m a.mg-nav__link{position:relative}
.mg-m a.mg-nav__link::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:var(--mg-blue);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--mg-e-out)}
.mg-m a.mg-nav__link:hover::after{transform:scaleX(1)}
.mg-m .mg-nav__item:hover .mg-drop a,.mg-m .mg-nav__item:focus-within .mg-drop a{animation:mg-m-dropin .4s var(--mg-e-out) backwards}
.mg-m .mg-nav__item:hover .mg-drop a:nth-child(2),.mg-m .mg-nav__item:focus-within .mg-drop a:nth-child(2){animation-delay:.05s}
.mg-m .mg-nav__item:hover .mg-drop a:nth-child(3),.mg-m .mg-nav__item:focus-within .mg-drop a:nth-child(3){animation-delay:.1s}
@keyframes mg-m-dropin{from{opacity:0;transform:translateY(-6px)}}
.mg-m .mg-header{transition:height .35s var(--mg-e-out),border-color .3s,box-shadow .4s}
.mg-m .mg-header.mg-is-scrolled{box-shadow:0 10px 30px -24px rgba(3,24,82,.45)}
/* pastilles qui glissent : onglets de l'appli, liste des témoignages */
.mg-m .mg-tabs__list,.mg-m .mg-testi__list{position:relative;isolation:isolate}
.mg-m-tpill{position:absolute;left:0;top:0;z-index:-1;pointer-events:none;background:#fff;transition:transform .5s var(--mg-e-out),width .5s var(--mg-e-out),height .5s var(--mg-e-out)}
.mg-tabs__list .mg-m-tpill{border-radius:999px;box-shadow:0 6px 16px -8px rgba(3,24,82,.3)}
.mg-testi__list .mg-m-tpill{border-radius:16px;border:1px solid var(--mg-line);box-shadow:0 12px 24px -16px rgba(3,24,82,.35)}
.mg-m .mg-m-has-pill .mg-tab[aria-selected="true"],.mg-m .mg-m-has-pill .mg-testi__tab[aria-selected="true"]{background:transparent;box-shadow:none;border-color:transparent}
.mg-m .mg-panel.mg-is-in .mg-panel__media{animation:mg-m-media .7s var(--mg-e-out) backwards}
@keyframes mg-m-media{from{opacity:0;transform:translateX(26px) scale(.97)}}
.mg-m .mg-panel.mg-is-in li{animation:mg-m-up .5s var(--mg-e-out) backwards}
.mg-m .mg-panel.mg-is-in li:nth-child(2){animation-delay:.06s}
.mg-m .mg-panel.mg-is-in li:nth-child(3){animation-delay:.12s}
.mg-m .mg-panel.mg-is-in li:nth-child(4){animation-delay:.18s}
.mg-m .mg-testi__q.mg-is-in blockquote{animation:mg-m-up .6s var(--mg-e-out) backwards}
.mg-m .mg-testi__q.mg-is-in blockquote::before{animation:mg-m-pop .6s var(--mg-e-spring) backwards}
.mg-m .mg-testi__q.mg-is-in .mg-av{animation:mg-m-pop .55s var(--mg-e-spring) .15s backwards}
.mg-m .mg-testi__q.mg-is-in .mg-testi__logo{animation:mg-m-up .6s var(--mg-e-out) .25s backwards}
/* FAQ : ouverture en douceur (hauteur animée par motion.js) */
.mg-m .mg-faq__a{overflow:hidden}
.mg-m .mg-faq details[open] .mg-faq__a{animation:none}
.mg-m .mg-faq summary{transition:color .2s,padding-left .3s var(--mg-e-out)}
.mg-m .mg-faq summary:hover{padding-left:6px}
/* avant / après : poignée plus présente */
.mg-m .mg-ba__knob{transition:transform .3s var(--mg-e-spring),box-shadow .3s}
.mg-m .mg-ba:hover .mg-ba__knob{transform:scale(1.12);box-shadow:0 14px 30px -8px rgba(3,24,82,.5)}
.mg-m .mg-ba.mg-m-hint .mg-ba__knob::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #fff;animation:mg-m-ring 1.2s ease-out 2}
/* configurateur : l'offre et le prix se mettent à jour avec une courte transition */
.mg-m .mg-conf__offer.mg-m-tick,.mg-m .mg-conf__price.mg-m-tick{animation:mg-m-tick .45s var(--mg-e-out)}
@keyframes mg-m-tick{from{opacity:.2;transform:translateY(8px)}}
.mg-m .mg-conf__badge.mg-m-tick{animation:mg-m-pop .45s var(--mg-e-spring)}
.mg-m .mg-seg-ctrl label{transition:background .3s var(--mg-e-out),color .25s,box-shadow .3s,transform .2s}
.mg-m .mg-seg-ctrl label:active{transform:scale(.97)}
/* listes et petits détails */
.mg-m .mg-checks li .mg-ico{transition:transform .35s var(--mg-e-spring)}
.mg-m .mg-checks li:hover .mg-ico{transform:scale(1.18)}
.mg-m .mg-audit{transition:background-color .25s}
.mg-m .mg-audit:hover{background:var(--mg-grey)}
.mg-m .mg-audit b{display:inline-block;transition:transform .35s var(--mg-e-out)}
.mg-m .mg-audit:hover b{transform:translateX(4px)}
.mg-m .mg-press span .mg-ico{transition:transform .3s var(--mg-e-out)}
.mg-m .mg-press a:hover span .mg-ico{transform:translateX(4px)}
.mg-m .mg-social a{transition:border-color .2s,color .2s,transform .3s var(--mg-e-out)}
.mg-m .mg-social a:hover{transform:translateY(-3px)}
.mg-m .mg-f label{transition:color .2s}
.mg-m .mg-f:focus-within label{color:var(--mg-blue)}
.mg-m .mg-f input,.mg-m .mg-f select,.mg-m .mg-f textarea{transition:border-color .2s,box-shadow .25s,transform .25s var(--mg-e-out)}
.mg-m .mg-f input:focus,.mg-m .mg-f select:focus,.mg-m .mg-f textarea:focus{transform:translateY(-1px)}
.mg-m :focus-visible{transition:outline-offset .2s var(--mg-e-out)}
/* corps d'état (v6) : la coupe d'immeuble se trace du sol vers le toit (pathLength="1" posé par motion.js) */
.mg-m .mg-coupe__svg.mg-m-predraw [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0}
.mg-m .mg-coupe__svg.mg-m-predraw .mg-b-lv,.mg-m .mg-coupe__svg.mg-m-predraw .mg-b-earth{opacity:0}
.mg-m .mg-coupe__svg.mg-m-drawing [pathLength]{animation:mg-m-draw 1.2s cubic-bezier(.65,0,.35,1) var(--dl,0s) backwards}
.mg-m .mg-coupe__svg.mg-m-drawing :is(.mg-b-w,.mg-b-roof,.mg-b-ln,.mg-b-cab,.mg-b-br,.mg-b-fl,.mg-b-ins)[pathLength]{animation:mg-m-draw 1.2s cubic-bezier(.65,0,.35,1) var(--dl,0s) backwards,mg-m-fillin .6s ease calc(var(--dl,0s) + .7s) backwards}
.mg-m .mg-coupe__svg.mg-m-drawing .mg-b-lv{animation:mg-m-fillin .5s ease calc(var(--dl,0s) + .5s) backwards}
.mg-m .mg-coupe__svg.mg-m-drawing .mg-b-earth{animation:mg-m-fade .8s ease backwards}
@keyframes mg-m-draw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes mg-m-fillin{from{fill-opacity:0;opacity:0}}
@keyframes mg-m-fade{from{opacity:0}}

/* pages.css */
/* =========================================================
   MONGA · Pages intérieures · pages.css
   Composants ajoutés au design v9 (mêmes jetons --mg-*).
   ========================================================= */

/* Base : la v9 était prévue pour WordPress, dont le thème remettait la page à zéro */
html,body{margin:0;padding:0;background:#fff}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* En-tête de page intérieure */
.mg-phero{position:relative;padding:calc(var(--mg-section) + 64px) 0 calc(var(--mg-section) * .6);background:linear-gradient(180deg,var(--mg-tint) 0%,#fff 100%);overflow:hidden}
.mg-phero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--mg-grid) 1px,transparent 1px),linear-gradient(90deg,var(--mg-grid) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(180deg,#000 0%,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%);pointer-events:none}
.mg-phero__in{position:relative;display:grid;gap:22px;max-width:860px}
.mg-phero--center .mg-phero__in{margin:0 auto;text-align:center;justify-items:center}
.mg-phero__title{font-size:clamp(38px,4.8vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1.04;color:var(--mg-navy)}
.mg-phero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.mg-phero--center .mg-phero__ctas{justify-content:center}
.mg-phero__split{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.mg-phero__split .mg-phero__in{max-width:none}
.mg-phero__media img{width:100%;height:auto;border-radius:var(--mg-r-lg);box-shadow:var(--mg-shadow-app)}

/* Fil d'Ariane */
.mg-crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:13.5px;color:var(--mg-mute)}
.mg-crumbs a{color:var(--mg-mute)}
.mg-crumbs a:hover{color:var(--mg-blue)}
.mg-crumbs li{display:flex;gap:10px;align-items:center}
.mg-crumbs li+li::before{content:"/";color:var(--mg-line)}

/* Grilles de cartes */
.mg-grid{display:grid;gap:24px}
.mg-grid--2{grid-template-columns:repeat(2,1fr)}
.mg-grid--3{grid-template-columns:repeat(3,1fr)}
.mg-grid--4{grid-template-columns:repeat(4,1fr)}
.mg-feat{padding:32px;display:grid;gap:14px;align-content:start}
.mg-feat__ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--mg-tint);color:var(--mg-blue)}
.mg-feat__ico .mg-ico{width:24px;height:24px}
.mg-feat__n{font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--mg-blue)}
.mg-feat .mg-checks{margin-top:6px}

/* Bloc texte + visuel */
.mg-tm{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.mg-tm--rev>:first-child{order:2}
.mg-tm__media img{width:100%;height:auto;border-radius:var(--mg-r-lg);box-shadow:var(--mg-shadow-app)}

/* Cartes d'articles (blog, presse, guide) */
.mg-post{display:grid;grid-template-rows:auto 1fr;overflow:hidden;color:inherit}
.mg-post:hover{transform:translateY(-4px);box-shadow:var(--mg-shadow-h);border-color:transparent}
.mg-post__media{aspect-ratio:16/9;background:var(--mg-tint);display:grid;place-items:center;overflow:hidden}
.mg-post__media img{width:100%;height:100%;object-fit:cover}
.mg-post__media--logo img{width:auto;height:auto;max-width:46%;max-height:56%;object-fit:contain}
.mg-post__body{padding:24px 26px 28px;display:grid;gap:10px;align-content:start}
.mg-post__cat{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mg-blue)}
.mg-post__title{font-size:19px;font-weight:800;letter-spacing:-.015em;line-height:1.3;color:var(--mg-navy)}
.mg-post__ex{font-size:15px;color:var(--mg-mute)}
.mg-post__more{display:inline-flex;gap:8px;align-items:center;font-weight:700;font-size:14.5px;color:var(--mg-blue);margin-top:4px}

/* Filtres (pastilles) */
.mg-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.mg-chips a{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:var(--mg-pill);border:1.5px solid var(--mg-line);background:#fff;font-size:14.5px;font-weight:700;color:var(--mg-navy)}
.mg-chips a:hover,.mg-chips a[aria-current]{border-color:var(--mg-blue);color:var(--mg-blue)}

/* Texte long : articles, guide, pages légales */
.mg-prose-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:start}
.mg-prose-wrap--solo{grid-template-columns:minmax(0,760px);justify-content:center}
.mg-prose{font-size:17.5px;line-height:1.75;color:#24305A;max-width:760px}
.mg-prose>*+*{margin-top:1.1em}
.mg-prose h2{font-size:clamp(26px,2.4vw,32px);font-weight:800;letter-spacing:-.025em;line-height:1.2;color:var(--mg-navy);margin-top:2em;scroll-margin-top:110px}
.mg-prose h3{font-size:21px;font-weight:800;letter-spacing:-.015em;line-height:1.3;color:var(--mg-navy);margin-top:1.6em}
.mg-prose h4{font-size:18px;font-weight:800;color:var(--mg-navy);margin-top:1.4em}
.mg-prose ul,.mg-prose ol{padding-left:1.3em}
.mg-prose ul{list-style:disc}
.mg-prose ol{list-style:decimal}
.mg-prose li+li{margin-top:.4em}
.mg-prose li::marker{color:var(--mg-blue)}
.mg-prose a{color:var(--mg-blue);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.mg-prose strong{color:var(--mg-navy)}
.mg-prose blockquote{border-left:3px solid var(--mg-blue);padding:6px 0 6px 22px;color:var(--mg-navy);font-weight:600}
.mg-prose table{width:100%;border-collapse:collapse;font-size:15.5px}
.mg-prose th,.mg-prose td{border:1px solid var(--mg-line);padding:10px 14px;text-align:left;vertical-align:top}
.mg-prose th{background:var(--mg-grey);color:var(--mg-navy)}
.mg-prose-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--mg-mute)}

/* Encadré latéral (sommaire, CTA) */
.mg-aside{position:sticky;top:110px;display:grid;gap:20px}
.mg-aside__box{padding:26px}
.mg-aside__box h2{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mg-navy);margin-bottom:14px}
.mg-toc{display:grid;gap:10px;font-size:14.5px}
.mg-toc a{color:var(--mg-mute)}
.mg-toc a:hover{color:var(--mg-blue)}
.mg-aside__cta{padding:28px;background:var(--mg-navy);color:#fff;border-color:var(--mg-navy);display:grid;gap:14px}
.mg-aside__cta p{color:rgba(255,255,255,.75);font-size:15px}
.mg-aside__cta strong{font-size:20px;font-weight:800;letter-spacing:-.015em;line-height:1.3}

/* Bandeau d'appel à l'action */
.mg-cta-band{position:relative;overflow:hidden;border-radius:var(--mg-r-lg);background:var(--mg-navy);color:#fff;padding:64px;display:grid;grid-template-columns:1.4fr auto;gap:40px;align-items:center}
.mg-cta-band::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(26,92,255,.55),transparent 65%);pointer-events:none}
.mg-cta-band h2{font-size:clamp(28px,3.2vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:#fff}
.mg-cta-band p{color:rgba(255,255,255,.75);margin-top:12px;font-size:17px;max-width:560px}
.mg-cta-band__ctas{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px}
.mg-cta-band .mg-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.mg-cta-band .mg-btn--ghost:hover{border-color:#fff}

/* Contact */
.mg-contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.mg-contact__list{display:grid;gap:16px}
.mg-contact__item{display:flex;gap:16px;align-items:flex-start;padding:22px 24px}
.mg-contact__item strong{display:block;color:var(--mg-navy);font-size:16.5px}
.mg-contact__item span{color:var(--mg-mute);font-size:15px}

@media (max-width:1024px){
  .mg-grid--4{grid-template-columns:repeat(2,1fr)}
  .mg-grid--3{grid-template-columns:repeat(2,1fr)}
  .mg-prose-wrap{grid-template-columns:minmax(0,1fr)}
  .mg-aside{position:static}
  .mg-phero__split,.mg-tm,.mg-contact{grid-template-columns:1fr;gap:40px}
  .mg-tm--rev>:first-child{order:0}
  .mg-cta-band{grid-template-columns:1fr;padding:48px 36px}
}
@media (max-width:640px){
  .mg-grid--2,.mg-grid--3,.mg-grid--4{grid-template-columns:1fr}
  .mg-phero{padding-top:calc(var(--mg-section) + 40px)}
  .mg-feat{padding:26px}
  .mg-cta-band{padding:40px 24px}
  .mg-cta-band__ctas .mg-btn{width:100%}
  .mg-prose{font-size:16.5px}
}

/* Ajustements après migration */
.mg-aside{max-height:calc(100vh - 130px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.mg-tm__media:has(.mg-frame--phone),.mg-phero__media:has(.mg-frame--phone){display:flex;justify-content:center}
@media (max-width:640px){
  .mg-phero__title{font-size:clamp(30px,8.4vw,40px);letter-spacing:-.03em;hyphens:auto;-webkit-hyphens:auto}
  .mg-prose h2{hyphens:auto;-webkit-hyphens:auto}
}
/* Titres longs (articles du guide, presse) : plus petits pour rester lisibles */
.mg-phero__title--long{font-size:clamp(30px,3.4vw,46px);letter-spacing:-.03em;line-height:1.12}
@media (max-width:640px){.mg-phero__title--long{font-size:26px;line-height:1.18}}


/* Offre Astreinte : rappel « Tout MongaExpert, plus : » en tête de liste */
.mg-offer .mg-tokens li.mg-tokens__all{flex-basis:100%;background:none;border:0;padding:0 0 2px;font-size:14.5px;font-weight:800;color:var(--mg-blue)}
.mg-offer .mg-tokens li.mg-tokens__all .mg-tokens__ic{background:var(--mg-blue);color:#fff;box-shadow:none}

/* Vidéo « Monga en 50 secondes » (accueil) */
.mg-reel{padding-top:calc(var(--mg-section) * .7)}
.mg-reel__frame{position:relative;max-width:1040px;margin:0 auto;border-radius:var(--mg-r-lg);overflow:hidden;background:var(--mg-navy);box-shadow:var(--mg-shadow-app);aspect-ratio:16/9}
.mg-reel__video{display:block;width:100%;height:100%;object-fit:cover;background:var(--mg-navy)}
.mg-reel__play{display:none}
.mg-reel--ready .mg-reel__play{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;gap:16px;padding:clamp(18px,3.4vw,36px);border:0;background:linear-gradient(180deg,transparent 45%,rgba(3,24,82,.55) 100%);color:#fff;cursor:pointer;font:inherit;text-align:left}
.mg-reel__ico{flex:none;width:clamp(56px,7vw,76px);height:clamp(56px,7vw,76px);border-radius:50%;display:grid;place-items:center;background:var(--mg-blue);box-shadow:0 0 0 10px rgba(26,92,255,.25),0 18px 36px -12px rgba(3,24,82,.7);transition:transform .25s var(--mg-ease),box-shadow .25s var(--mg-ease)}
.mg-reel__ico svg{width:42%;height:42%;margin-left:6%}
.mg-reel__txt{display:grid;gap:2px;font-size:clamp(16px,1.6vw,19px);font-weight:800;letter-spacing:-.01em}
.mg-reel__txt small{font-size:13.5px;font-weight:600;opacity:.8}
.mg-reel__play:hover .mg-reel__ico,.mg-reel__play:focus-visible .mg-reel__ico{transform:scale(1.07);box-shadow:0 0 0 14px rgba(26,92,255,.28),0 18px 36px -12px rgba(3,24,82,.7)}
.mg-reel__play:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.mg-reel--playing .mg-reel__play{display:none}
@media (max-width:640px){.mg-reel__frame{border-radius:var(--mg-r)}.mg-reel--ready .mg-reel__play{align-items:flex-end;justify-content:center;padding-bottom:14px;background:none}.mg-reel__ico{width:46px;height:46px;box-shadow:0 0 0 7px rgba(26,92,255,.25),0 12px 24px -10px rgba(3,24,82,.7)}.mg-reel__txt{display:none}}

/* Carte MongaExpert : rappel du forfait MongaBiz */
.mg-offer__note--biz{margin-top:4px;color:var(--mg-mute);font-weight:600}

/* Page démo : prise de rendez-vous MonSpot intégrée */
.mg-demo2{grid-template-columns:.85fr 1.15fr;align-items:start}
.mg-demo2__pitch{position:sticky;top:110px}
.mg-demo2__proof{font-size:14.5px;font-weight:600;color:var(--mg-mute)}
.mg-demo2__stars{color:#F5B301;letter-spacing:2px;margin-right:6px}
.mg-demo2__book{padding:10px;overflow:hidden}
.mg-demo2__frame{display:block;width:100%;height:760px;border:0;border-radius:calc(var(--mg-r-lg) - 8px);background:transparent;transition:height .25s var(--mg-ease)}
.mg-demo2__fallback{margin:10px 14px 8px;font-size:13.5px;color:var(--mg-mute)}
.mg-demo2__fallback.mg-is-alert{padding:12px 14px;border-radius:12px;background:#FFF4E5;color:#7A4A00;font-size:14.5px;font-weight:600}
@media (max-width:1024px){.mg-demo2{grid-template-columns:1fr}.mg-demo2__pitch{position:static}}
@media (max-width:640px){.mg-demo2__book{padding:4px;border-radius:var(--mg-r)}.mg-demo2__frame{height:900px}}
.mg-demo2__frame[hidden]{display:none}

/* =========================================================
   Mascotte MonAI (David, 30/09) — portage fidèle de app-monai-mascot (front Monga) :
   une goutte bleue qui change de forme, deux yeux qui clignent. Décorative (aria-hidden).
   Tailles : brand 22px · compact 28px · default 40px · large 56px · hero 72px.
   ========================================================= */
.mg-mascot{--m-size:2.5rem;--m-eye-w:.25rem;--m-eye-h:.625rem;--m-gap:.5rem;position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;inline-size:var(--m-size);block-size:var(--m-size);background:var(--mg-blue);color:#fff;transform:rotate(-7deg);transition:transform 440ms cubic-bezier(.22,1.5,.5,1);animation:mg-mascot-blob 9s ease-in-out infinite;vertical-align:middle}
.mg-mascot[data-tone="inverse"]{background:#fff;color:var(--mg-blue)}
.mg-mascot[data-awake="true"],.mg-awake-on-hover:hover .mg-mascot{transform:rotate(6deg) scale(1.05)}
.mg-mascot[data-size="large"]{--m-size:3.5rem;--m-eye-w:.35rem;--m-eye-h:.875rem;--m-gap:.7rem}
.mg-mascot[data-size="hero"]{--m-size:4.5rem;--m-eye-w:.45rem;--m-eye-h:1.1rem;--m-gap:.9rem}
.mg-mascot[data-size="compact"],.mg-mascot[data-size="brand"]{transform:none}
.mg-awake-on-hover:hover .mg-mascot[data-size="compact"],.mg-awake-on-hover:hover .mg-mascot[data-size="brand"]{transform:none}
.mg-mascot[data-size="compact"]{--m-size:1.75rem;--m-eye-w:.1875rem;--m-eye-h:.4375rem;--m-gap:.3125rem}
.mg-mascot[data-size="brand"]{--m-size:1.375rem;--m-eye-w:.15625rem;--m-eye-h:.3125rem;--m-gap:.25rem}
.mg-mascot__eyes{display:flex;gap:var(--m-gap);transform:translate(1px,-1px);transition:transform 300ms}
.mg-awake-on-hover:hover .mg-mascot:not([data-size="compact"]):not([data-size="brand"]) .mg-mascot__eyes{transform:translate(1px,-4px)}
.mg-mascot[data-size="compact"] .mg-mascot__eyes,.mg-mascot[data-size="brand"] .mg-mascot__eyes{transform:none}
.mg-mascot__eye{display:block;inline-size:var(--m-eye-w);block-size:var(--m-eye-h);border-radius:5px;background:currentColor;animation:mg-mascot-blink 6.5s infinite}
@keyframes mg-mascot-blob{0%,100%{border-radius:58% 42% 55% 45%/52% 58% 42% 48%}33%{border-radius:45% 55% 48% 52%/58% 44% 56% 42%}66%{border-radius:52% 48% 42% 58%/45% 52% 48% 55%}}
@keyframes mg-mascot-blink{0%,42%,46%,100%{transform:scaleY(1)}44%{transform:scaleY(.12)}}
@media (prefers-reduced-motion:reduce){.mg-mascot,.mg-mascot__eyes,.mg-mascot__eye{animation:none;transition:none}.mg-mascot{border-radius:58% 42% 55% 45%/52% 58% 42% 48%}}

/* Bande MonAI de l'accueil : mascotte + nom, au lieu de la pastille */
.mg-monai .mg-monai__brand{display:inline-flex;align-items:center;gap:12px;padding:0;background:none;color:var(--mg-blue);font-size:17px;font-weight:800;letter-spacing:-.01em}
/* Pastilles « Devis analysé par MonAI » et ligne d'offre : mascotte miniature */
.mg-badge .mg-mascot{margin-right:2px}
.mg-tokens__ic .mg-mascot{--m-size:1.25rem}

/* Page Tarifs : cartes plus proches du titre */
.mg-phero + #offres{padding-top:calc(var(--mg-section) * .45)}

/* Chiffres clés : préfixe « + » centré sur le chiffre */
.mg-stats4 strong > small:first-child{vertical-align:.3em;margin-right:.08em}

/* Contraste AA des pastilles d’état (Lighthouse) */
.mg-badge--red{color:#B42318}
.mg-badge--green{color:#146C3A}

/* À propos : photos des fondateurs */
.mg-feat__photo{width:72px;height:72px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px var(--mg-tint)}
.mg-feat__in{justify-self:start;font-size:14.5px}

/* coupe-bonhomme.css */
/* Coupe d'immeuble : petit artisan au trait (décoratif, piloté par coupe-bonhomme.js) */
.mg-coupe__svg .mg-bh{pointer-events:none}
.mg-coupe__svg .mg-bh *{pointer-events:none}
.mg-coupe__svg .mg-bh__ln{fill:none;stroke:var(--ink,#031852);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.mg-coupe__svg .mg-bh__fill{fill:#fff;stroke:var(--ink,#031852);stroke-width:1.2;stroke-linejoin:round}
.mg-coupe__svg .mg-bh__eye{fill:var(--ink,#031852);stroke:none}
.mg-coupe__svg .mg-bh__cap{fill:var(--bl,#1A5CFF);stroke:var(--bl,#1A5CFF);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.mg-coupe__svg .mg-bh__belt{fill:none;stroke:var(--bl,#1A5CFF);stroke-width:1.3;stroke-linecap:round}
.mg-coupe__svg .mg-bh__box{fill:#fff;stroke:var(--bl,#1A5CFF);stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round}
.mg-coupe__svg .mg-bh__wrench{opacity:0;transition:opacity .2s}
.mg-coupe__svg .mg-bh--work .mg-bh__wrench{opacity:1}

/* monai-live.css */
/* =========================================================
   MonAI en direct (accueil, section #monai) — démo de conversation SCÉNARISÉE.
   Aucune IA réelle : réponses écrites à l'avance (assets/js/monai-live.js).
   Carte inspirée de la carte « Demandez à MonAI » de Monga App (monai-panel).
   ========================================================= */
.mg-ailive__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:64px;align-items:center}
.mg-ailive__pitch .mg-checks{margin-top:36px}
.mg-ailive__demo{min-width:0}

/* La carte bleue */
.mg-ai{position:relative;display:flex;flex-direction:column;gap:18px;padding:28px;border-radius:var(--mg-r-lg);color:#fff;overflow:hidden;
  background:radial-gradient(120% 90% at 0% 0%,rgba(110,160,255,.4),transparent 60%),var(--mg-blue);
  box-shadow:0 40px 80px -36px rgba(3,24,82,.55)}
.mg-ai__stage{display:flex;align-items:center;gap:18px}
.mg-ai__mascot{filter:drop-shadow(0 .75rem 1rem rgba(0,0,0,.25))}
.mg-ai__title{flex:1;min-width:0;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.mg-ai__pause{all:unset;box-sizing:border-box;flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--mg-pill);background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);color:#fff;cursor:pointer;transition:background-color .2s ease}
.mg-ai__pause[hidden]{display:none}
.mg-ai__pause:hover{background:rgba(255,255,255,.28)}
.mg-ai__pause:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mg-ai__pause svg{width:18px;height:18px;fill:currentColor}
.mg-ai__ico-play,.mg-ai__pause[data-state="paused"] .mg-ai__ico-pause{display:none}
.mg-ai__pause[data-state="paused"] .mg-ai__ico-play{display:block}

/* Le fil de conversation : hauteur fixe (pas de saut de mise en page), les anciens messages filent vers le haut */
.mg-ai__log{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;height:300px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 44px);mask-image:linear-gradient(to bottom,transparent 0,#000 44px)}
.mg-ai__msg{flex:none;max-width:88%;padding:11px 15px;font-size:15px;font-weight:500;line-height:1.5;overflow-wrap:anywhere;animation:mg-ai-in .32s var(--mg-ease) both}
.mg-ai__msg b{font-weight:800;white-space:nowrap}
.mg-ai__msg--me{align-self:flex-end;border-radius:18px 18px 5px 18px;background:#fff;color:var(--mg-navy);font-weight:600}
.mg-ai__msg--ai{align-self:flex-start;border-radius:18px 18px 18px 5px;background:rgba(3,24,82,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.mg-ai__msg--wait{display:inline-flex;align-items:center;gap:10px;font-weight:600}
.mg-ai__dots{display:inline-flex;gap:4px}
.mg-ai__dots i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:mg-ai-dot 1.1s ease-in-out infinite}
.mg-ai__dots i:nth-child(2){animation-delay:.15s}
.mg-ai__dots i:nth-child(3){animation-delay:.3s}

/* Bulles de suggestions (comme dans l'app) */
.mg-ai__bubbles{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.mg-ai__bubbles[hidden]{display:none}
.mg-ai__bubble{all:unset;box-sizing:border-box;display:inline-block;max-width:100%;padding:7px 14px;border-radius:17px 17px 17px 5px;background:rgba(3,24,82,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:#fff;font-size:14px;font-weight:600;line-height:1.35;cursor:pointer;transition:background-color .25s ease,transform .25s ease}
.mg-ai__bubble:hover{background:rgba(3,24,82,.4);transform:translateY(-2px)}
.mg-ai__bubble:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mg-ai__bubble[aria-current="true"]{background:#fff;color:var(--mg-blue)}

/* Le champ (factice) : pilule blanche, bouton d'envoi bleu */
.mg-ai__ask{display:flex;align-items:center;gap:8px;padding:5px 5px 5px 18px;border-radius:var(--mg-pill);background:#fff;box-shadow:0 .5rem 1.25rem -.75rem rgba(0,0,0,.35)}
.mg-ai__field{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--mg-navy);font-size:15px;font-weight:500}
.mg-ai__field[data-empty="true"]{color:var(--mg-mute)}
.mg-ai__field[data-typing="true"]::after{content:"";display:inline-block;width:2px;height:1.1em;margin-left:1px;vertical-align:-.18em;background:var(--mg-blue);animation:mg-ai-caret 1s steps(1) infinite}
.mg-ai__send{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--mg-blue);color:#fff;opacity:.35;transition:opacity .2s ease,transform .2s ease}
.mg-ai__send svg{width:17px;height:17px;fill:currentColor}
.mg-ai[data-armed="true"] .mg-ai__send{opacity:1}
.mg-ai[data-sending="true"] .mg-ai__send{transform:scale(.88)}

.mg-ai__note{margin-top:14px;text-align:center;font-size:13px;color:var(--mg-mute)}

/* Pause (bouton WCAG 2.2.2) et hors écran : tout ce qui bouge s'arrête */
.mg-ai[data-paused="true"] .mg-ai__msg,.mg-ai[data-paused="true"] .mg-mascot,.mg-ai[data-paused="true"] .mg-mascot__eye,.mg-ai[data-paused="true"] .mg-ai__dots i,.mg-ai[data-paused="true"] .mg-ai__field::after{animation-play-state:paused}

@keyframes mg-ai-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes mg-ai-dot{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes mg-ai-caret{50%{opacity:0}}

@media (max-width:1024px){
  .mg-ailive__grid{grid-template-columns:1fr;gap:44px}
  .mg-ailive__demo{max-width:620px;width:100%;margin-inline:auto}
}
@media (max-width:640px){
  .mg-ai{padding:20px 16px;gap:16px;border-radius:var(--mg-r)}
  .mg-ai__stage{gap:14px}
  .mg-ai .mg-mascot[data-size="hero"]{--m-size:3.5rem;--m-eye-w:.35rem;--m-eye-h:.875rem;--m-gap:.7rem}
  .mg-ai__title{font-size:19px}
  .mg-ai__log{height:340px}
  .mg-ai__msg{max-width:92%;font-size:14.5px;padding:10px 13px}
  .mg-ai__bubble{font-size:13.5px;padding:6px 12px}
}
@media (prefers-reduced-motion:reduce){
  .mg-ai__msg,.mg-ai__dots i,.mg-ai__field::after{animation:none}
  .mg-ai__bubble,.mg-ai__send,.mg-ai__pause{transition:none}
  .mg-ai__bubble:hover{transform:none}
}

/* Section MonAI juste après « L’application » (deux fonds blancs) : espace resserré */
#monai{padding-top:calc(var(--mg-section) * .25)}

/* consent.css */
/* =========================================================
   MONGA · Bandeau de consentement (mesure d'audience) · consent.css
   Bandeau créé par consent.js : sans JavaScript, rien n'apparaît et rien n'est chargé.
   « Tout refuser » et « Tout accepter » : même classe, même colonne de grille = même taille.
   ========================================================= */
.mg-consent{position:fixed;left:16px;right:16px;bottom:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:58;box-sizing:border-box;max-width:1080px;margin:0 auto;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;padding:22px 26px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 36px;align-items:center;background:#fff;border:1px solid var(--mg-line);border-radius:var(--mg-r);box-shadow:0 30px 70px -24px rgba(3,24,82,.38),0 4px 14px -6px rgba(3,24,82,.12);font-family:var(--mg-font);font-size:15px;line-height:1.5;color:var(--mg-navy);text-align:left;animation:mg-consent-in .35s var(--mg-ease) both}
.mg-consent *,.mg-consent *::before,.mg-consent *::after{box-sizing:border-box}
.mg-consent[hidden],.mg-consent [hidden],.mg-consent-open[hidden]{display:none!important}
.mg-consent:focus{outline:none}
.mg-consent:focus-visible{outline:2px solid var(--mg-blue);outline-offset:3px;border-radius:var(--mg-r)}
:where(.mg-consent) p{margin:0}
.mg-consent__t{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--mg-navy)}
.mg-consent__d{margin-top:4px;font-size:14.5px;color:var(--mg-mute)}
.mg-consent__d a{color:var(--mg-blue);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.mg-consent__d a:hover{color:var(--mg-blue-h)}
.mg-consent__state{margin-top:8px;font-size:13.5px;font-weight:600;color:var(--mg-navy)}
.mg-consent__err{margin:8px 0 0;font-size:13.5px;font-weight:600;color:#B42318}
.mg-consent__err:empty{margin:0}

/* Actions : deux boutons strictement identiques, puis « Personnaliser » */
.mg-consent__acts{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:8px 12px;align-items:center}
.mg-consent__acts .mg-btn{width:100%;min-height:46px;padding:0 18px;font-size:15px}
.mg-consent__more{grid-column:1/-1;justify-self:center;padding:4px 8px;border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--mg-mute);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mg-consent__more:hover,.mg-consent__more[aria-expanded="true"]{color:var(--mg-blue)}

/* Personnaliser : une seule finalité ; case non cochée par défaut (cochée seulement si l’accord est déjà donné) */
.mg-consent__prefs{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;align-items:center;padding-top:16px;border-top:1px solid var(--mg-line)}
.mg-consent__opt{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start}
.mg-consent__opt input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--mg-blue);cursor:pointer}
.mg-consent__opt label{font-size:14.5px;color:var(--mg-mute);cursor:pointer}
.mg-consent__opt b{display:block;font-weight:700;color:var(--mg-navy)}
.mg-consent__prefs .mg-btn{min-height:46px;font-size:15px}

.mg-consent :focus-visible{outline:2px solid var(--mg-blue);outline-offset:3px}

@keyframes mg-consent-in{from{opacity:0;transform:translateY(18px)}}

@media (max-width:767px){
  .mg-consent{left:12px;right:12px;bottom:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);grid-template-columns:minmax(0,1fr);gap:14px;padding:18px 18px 12px}
  .mg-consent__acts{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px}
  .mg-consent__acts .mg-btn{padding:0 12px}
  .mg-consent__prefs{grid-template-columns:minmax(0,1fr)}
  .mg-consent__prefs .mg-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .mg-consent{animation:none}
}
@media print{
  .mg-consent{display:none!important}
}

/* Pied de page : « Gérer les cookies », bouton présenté comme les liens voisins */
.mg-consent-open{padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.mg-consent-open:hover{color:var(--mg-blue)}