/* ==========================================================================
   MADRASSAT-E - le site (abdAllah, 12/10)
   L'arche du logo (la porte de l'école) est le motif du site : elle encadre
   le prix de chaque module et celui du socle. Le reste reste sobre.
   1. Jetons  2. Base  3. En-tête  4. Boutons  5. Sections  6. Héros
   7. Problèmes  8. Socle  9. Modules  10. Différence  11. Appel
   12. Pages intérieures  13. Démo  14. Simulateur  15. FAQ  16. Formulaires
   17. Pied  18. Animation du schéma  19. Petits écrans, mouvement réduit
   ========================================================================== */

/* ---------- 1. Jetons ---------------------------------------------------- */
:root{
  --ms-nuit:#0B3954;        /* l'encre du logo */
  --ms-bleu:#065D89;        /* la marque */
  --ms-bleu-clair:#3E8DB8;
  --ms-ciel:#EAF3F8;        /* fond des sections alternées */
  --ms-or:#DDB65C;          /* l'or du logo : prix et accents */
  --ms-or-clair:#F3E6C6;
  --ms-texte:#1C3344;
  --ms-gris:#5E7384;
  --ms-trait:#D7E4EC;
  --ms-blanc:#FFFFFF;

  --ms-titre:"Sora","Segoe UI",system-ui,sans-serif;
  --ms-corps:"Figtree","Segoe UI",system-ui,sans-serif;

  /* L'arche : un rayon plein en haut, des angles droits en bas. */
  --ms-arche:999px 999px 14px 14px;
  --ms-r:8px;
  --ms-ombre:0 18px 40px -22px rgba(11,57,84,.45);


  /* LA PORTE (abdAllah, 12/10) : l'arc brisé du logo, avec ses petites encoches à la naissance de
     l'arc. Dessinée en SVG (fond en dégradé et contour), étirée à la taille de chaque bloc. */
  --ms-porte-bleu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234c8aaa'/%3E%3Cstop offset='1' stop-color='%23065D89'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M1.5%2C138.5 L1.5%2C67 Q5%2C65.5 4%2C62 Q2.5%2C60.5 1.5%2C58.5 C1.5%2C29 23%2C10.5 50%2C1.2 C77%2C10.5 98.5%2C29 98.5%2C58.5 Q97.5%2C60.5 96%2C62 Q95%2C65.5 98.5%2C67 L98.5%2C138.5 Z' fill='url%28%23g%29' stroke='%230B3954' stroke-width='2.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --ms-porte-or:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e8d090'/%3E%3Cstop offset='1' stop-color='%23cfa64e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M1.5%2C138.5 L1.5%2C67 Q5%2C65.5 4%2C62 Q2.5%2C60.5 1.5%2C58.5 C1.5%2C29 23%2C10.5 50%2C1.2 C77%2C10.5 98.5%2C29 98.5%2C58.5 Q97.5%2C60.5 96%2C62 Q95%2C65.5 98.5%2C67 L98.5%2C138.5 Z' fill='url%28%23g%29' stroke='%23a8812f' stroke-width='2.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --ms-porte-clair:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23dddddd'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M1.5%2C138.5 L1.5%2C67 Q5%2C65.5 4%2C62 Q2.5%2C60.5 1.5%2C58.5 C1.5%2C29 23%2C10.5 50%2C1.2 C77%2C10.5 98.5%2C29 98.5%2C58.5 Q97.5%2C60.5 96%2C62 Q95%2C65.5 98.5%2C67 L98.5%2C138.5 Z' fill='url%28%23g%29' stroke='%23DDB65C' stroke-width='2.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --ms-porte-nuit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230e4566'/%3E%3Cstop offset='1' stop-color='%230B3954'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M1.5%2C138.5 L1.5%2C67 Q5%2C65.5 4%2C62 Q2.5%2C60.5 1.5%2C58.5 C1.5%2C29 23%2C10.5 50%2C1.2 C77%2C10.5 98.5%2C29 98.5%2C58.5 Q97.5%2C60.5 96%2C62 Q95%2C65.5 98.5%2C67 L98.5%2C138.5 Z' fill='url%28%23g%29' stroke='%230B3954' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");

  /* Animation du schéma (héros) */
  --a-socle:#022D42; --a-fusion:#065D89; --a-organisation:#194257; --a-communication:#20546F;
  --a-cotisations:#276786; --a-evenements:#2E799E; --a-inscriptions:#358BB6; --a-viescolaire:#419BC8;
  --a-enseignement:#59A8CF; --a-comptabilite:#71B4D6; --a-jaune:#FFD320;
  --mc-bleu:#065D89; --mc-titre:var(--ms-titre);
}

/* ---------- 2. Base ------------------------------------------------------ */
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--ms-corps);color:var(--ms-texte);background:var(--ms-blanc);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--ms-titre);color:var(--ms-nuit);letter-spacing:-.01em}
h1{font-weight:700;line-height:1.08}
h2{font-weight:700;font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1.15}
h3{font-weight:600;font-size:1.15rem}
a{color:var(--ms-bleu)}
a:focus-visible,button:focus-visible,.form-control:focus-visible{outline:3px solid var(--ms-or);outline-offset:3px}
.ms-lien-saut{position:absolute;top:.5rem;left:.5rem;z-index:2000;background:var(--ms-nuit);color:#fff;padding:.5rem 1rem;border-radius:8px}

/* ---------- 3. En-tête ---------------------------------------------------
   Le dégradé « grady-dark » de l'ERP (abdAllah, 12/10) : la couleur de la marque en bas, une
   teinte plus claire en haut, texte blanc. */
.ms-entete{position:sticky;top:0;z-index:1030;color:#fff;
  background:var(--ms-bleu);background:linear-gradient(color-mix(in srgb,var(--ms-bleu) 72%,#fff),var(--ms-bleu));
  transition:box-shadow .2s ease}
.ms-entete.est-fixe{box-shadow:0 8px 24px -14px rgba(11,57,84,.7)}
.ms-entete .navbar{padding:.7rem 0}
.ms-marque{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--ms-titre);font-weight:700;
  font-size:1.15rem;color:var(--ms-nuit);letter-spacing:.02em}
.ms-marque:hover{color:var(--ms-nuit)}
.ms-marque-claire,.ms-marque-claire:hover,.ms-entete .ms-marque,.ms-entete .ms-marque:hover{color:#fff}
.ms-entete .nav-link{font-weight:600;color:rgba(255,255,255,.88);padding:.5rem .9rem!important;border-radius:8px}
.ms-entete .nav-link:hover,.ms-entete .nav-link:focus-visible{color:#fff;background:rgba(255,255,255,.14)}
.ms-entete .nav-link.active{color:#fff;background:rgba(255,255,255,.2)}
.ms-entete .navbar-nav{gap:.35rem}
.ms-nav-contact{margin-left:.5rem}
.ms-entete .ms-btn{background:var(--ms-or);border-color:var(--ms-or);color:var(--ms-nuit)}
.ms-entete .ms-btn:hover{background:#fff;border-color:#fff;color:var(--ms-nuit)}
.ms-burger{border:0;font-size:1.8rem;color:#fff;padding:.2rem .4rem}
.ms-burger:focus{box-shadow:none}

/* ---------- 4. Boutons --------------------------------------------------- */
.ms-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.4rem;border-radius:8px;border:2px solid var(--ms-bleu);
  background:var(--ms-bleu);color:#fff;font-weight:600;text-decoration:none;line-height:1.2;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}
.ms-btn:hover{background:var(--ms-nuit);border-color:var(--ms-nuit);color:#fff;transform:translateY(-1px)}
.ms-btn i{font-size:1.2em}
.ms-btn-petit{padding:.5rem 1.1rem;font-size:.95rem}
.ms-btn-contour{background:transparent;color:var(--ms-bleu)}
.ms-btn-contour:hover{background:var(--ms-bleu);color:#fff;border-color:var(--ms-bleu)}
.ms-btn-or{background:var(--ms-or);border-color:var(--ms-or);color:var(--ms-nuit)}
.ms-btn-or:hover{background:#fff;border-color:#fff;color:var(--ms-nuit)}
.ms-btn-clair{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.ms-btn-clair:hover{background:#fff;border-color:#fff;color:var(--ms-nuit)}
.ms-lien{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;text-decoration:none}
.ms-lien:hover{text-decoration:underline}

/* ---------- 5. Sections -------------------------------------------------- */
/* Révélation : un titre se pose en douceur à son arrivée à l'écran (site.js). */
[data-revele]{opacity:0;transform:translateY(18px);transition:opacity .7s ease var(--delai,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--delai,0ms)}
[data-revele].est-revele{opacity:1;transform:none}
.ms-section{padding:clamp(4rem,8vw,6.5rem) 0}
.ms-tete{max-width:44rem;margin:0 auto 3rem;text-align:center}
.ms-tete p{color:var(--ms-gris);margin:.8rem 0 0;font-size:1.1rem}

/* ---------- 6. Héros ----------------------------------------------------- */
.ms-hero{padding:clamp(2.5rem,6vw,5rem) 0 clamp(3rem,6vw,4.5rem);
  background:radial-gradient(60rem 30rem at 85% 30%,var(--ms-ciel),transparent 70%)}
.ms-hero-grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3rem;align-items:center}
.ms-hero h1{font-size:clamp(2.3rem,4.6vw,3.7rem);margin:0}
.ms-hero-punch{font-family:var(--ms-titre);font-weight:600;font-size:clamp(1.25rem,2vw,1.6rem);color:var(--ms-or);margin:.9rem 0 1.2rem}
.ms-hero-lead{color:var(--ms-gris);font-size:1.12rem;max-width:34rem}
.ms-hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}

/* ---------- 6 bis. Sans limite : les trois arguments forts, sous le héros ---- */
.ms-illimite{background:var(--ms-nuit);color:#fff;padding:2.6rem 0}
.ms-illimite-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.ms-illimite-liste li{display:flex;gap:1rem;align-items:flex-start}
.ms-illimite-liste i{font-size:2.8rem;color:var(--ms-or);flex:none;line-height:1}
.ms-illimite-liste h2{color:#fff;font-size:clamp(1.35rem,2vw,1.7rem);margin:0 0 .3rem}
.ms-illimite-liste p{margin:0;color:rgba(255,255,255,.78);font-size:1rem}
@media (max-width:767.98px){.ms-illimite-liste{grid-template-columns:1fr;gap:1.4rem}}

/* ---------- 7. Problèmes : tuiles qui se retournent ---------------------- */
.ms-tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.ms-tuile{position:relative;min-height:10rem;border:0;padding:0;background:none;perspective:1200px;text-align:left;cursor:pointer}
.ms-tuile-face{position:absolute;inset:0;display:flex;flex-direction:column;gap:.4rem;padding:1.2rem 1.3rem;border-radius:var(--ms-r);
  backface-visibility:hidden;transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.ms-tuile-recto{background:var(--ms-ciel);color:var(--ms-texte)}
/* Bordure, ombre, et l'icône en haut à droite (abdAllah, 12/10). */
.ms-tuile-face{border:1px solid #c9dce7;box-shadow:0 10px 24px -14px rgba(11,57,84,.45)}
.ms-tuile-verso{border-color:var(--ms-nuit)}
.ms-tuile-face{border-left:5px solid #065D92}
.ms-tuile-face > i{position:absolute;top:1.05rem;right:1.1rem}
.ms-tuile-face > strong{padding-right:2.6rem}
.ms-tuile-verso{background:var(--ms-nuit);color:#fff;transform:rotateY(180deg)}
.ms-tuile i{font-size:2rem;color:var(--ms-bleu)}
.ms-tuile-verso i{color:var(--ms-or)}
.ms-tuile strong{font-family:var(--ms-titre);font-size:1.12rem;font-weight:600;color:var(--ms-nuit)}
.ms-tuile-verso strong{color:var(--ms-or)}
.ms-tuile-face > span{font-size:1rem;line-height:1.5}
.ms-tuile-recto > span{color:var(--ms-gris)}
.ms-tuile.est-retournee .ms-tuile-recto{transform:rotateY(-180deg)}
.ms-tuile.est-retournee .ms-tuile-verso{transform:rotateY(0)}
@media (hover:hover){
  .ms-tuile:hover .ms-tuile-recto{transform:rotateY(-180deg)}
  .ms-tuile:hover .ms-tuile-verso{transform:rotateY(0)}
}

/* ---------- 8. Socle ----------------------------------------------------- */
.ms-socle{background:var(--ms-nuit);color:#fff}
.ms-socle-grille{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:3.5rem;align-items:start}
.ms-socle-porte{border-radius:0;padding:6rem 2rem 2.4rem;text-align:center;position:sticky;top:100px;
  /* Le dégradé « grady-light » de l'ERP (abdAllah, 12/10) : blanc vers gris clair, texte à la couleur de la marque. */
  background:linear-gradient(#fff,#ddd);color:var(--ms-bleu);border:2.5px solid var(--ms-or)}
.ms-socle-nom{font-family:var(--ms-titre);font-weight:600;font-size:1.3rem;margin:0;color:var(--ms-bleu)}
.ms-prix{font-family:var(--ms-titre);font-weight:700;font-size:1.6rem;color:var(--ms-or);margin:.4rem 0 0;font-variant-numeric:tabular-nums;white-space:nowrap}
.ms-prix-grand{font-size:clamp(2.6rem,4vw,3.4rem);line-height:1.05}
.ms-prix-note{font-size:.85rem;margin:.15rem 0 0;color:var(--ms-gris)}
.ms-socle .ms-prix-note{color:var(--ms-gris)}
.ms-socle-porte .ms-prix{color:#9a7428}
.ms-socle-texte{margin:1.4rem 0 0;color:var(--ms-texte);font-size:1rem}
.ms-socle-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem 2.2rem}
.ms-socle-liste li{display:flex;gap:1rem;align-items:flex-start}
.ms-socle-liste i{font-size:1.9rem;color:var(--ms-or);flex:none;margin-top:.1rem}
.ms-socle-liste h3{color:#fff;margin:0 0 .25rem;font-size:1.1rem}
.ms-socle-liste p{margin:0;color:rgba(255,255,255,.75);font-size:.98rem}

/* ---------- 9. Modules : cartes horizontales ----------------------------- */
.ms-modules{display:flex;flex-direction:column;gap:1.4rem}
/* Fond : un dégradé radial, blanc au centre, bleu très clair vers les bords. Au survol, un reflet glossy traverse la carte
   (abdAllah, 12/10). */
.ms-module{position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:12.5rem minmax(0,1fr) 15rem;gap:2rem;align-items:start;
  padding:1.6rem;border:1px solid var(--ms-trait);border-radius:10px;
  background:radial-gradient(#fff 50%,#e0f2ff);
  transition:box-shadow .5s ease,border-color .5s ease,background .6s ease}
.ms-module::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.95) 48%,rgba(255,255,255,.6) 52%,transparent 65%);
  transform:translateX(-120%);transition:transform 2.4s cubic-bezier(.45,.05,.25,1)}
.ms-module::before{content:"";position:absolute;inset:0 0 55% 0;z-index:-1;pointer-events:none;border-radius:10px 10px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));opacity:0;transition:opacity .6s ease}
.ms-module:hover{box-shadow:var(--ms-ombre),inset 0 1px 0 #fff;border-color:#b9d1df;
  background:radial-gradient(#fff 40%,#cde9fd)}
.ms-module:hover::after{transform:translateX(120%)}
.ms-module:hover::before{opacity:1}
.ms-module,.ms-module:hover{border-right:5px solid #065D92}
.ms-module-porte{border-radius:0;padding:3.6rem 1rem 1.4rem;text-align:center;color:#fff;
  /* Le dégradé « grady-dark » de l'ERP (abdAllah, 12/10). */
  background:var(--ms-bleu);background:linear-gradient(color-mix(in srgb,var(--ms-bleu) 72%,#fff),var(--ms-bleu));
  border:2.5px solid var(--ms-nuit)}
.ms-module-porte i{font-size:2.4rem;color:#fff}
.ms-module-porte h3{margin:.6rem 0 0;font-size:1.12rem;color:#fff}
.ms-module-porte .ms-prix{font-size:1.45rem;color:var(--ms-or-clair)}
.ms-module-porte .ms-prix-note{color:rgba(255,255,255,.75)}
/* Modules complémentaires : le même dégradé, en or. */
.ms-module.est-complementaire .ms-module-porte{background:#cfa64e;background:linear-gradient(color-mix(in srgb,#cfa64e 72%,#fff),#cfa64e);border-color:#a8812f}
.ms-module.est-complementaire .ms-prix{color:#fff}
.ms-cible{display:inline-block;margin:0 0 .5rem;font-size:.85rem;font-weight:600;color:#8a6a22;background:var(--ms-or-clair);padding:.15rem .7rem;border-radius:5px}
.ms-accroche{font-size:1.1rem;font-weight:500;color:var(--ms-nuit);margin:.2rem 0 1.2rem}
.ms-groupes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 2rem}
.ms-groupe h4{font-size:.98rem;font-weight:600;margin:0 0 .4rem;color:var(--ms-bleu)}
.ms-groupe ul{margin:0;padding:0;list-style:none}
.ms-groupe li{position:relative;padding-left:1rem;font-size:.95rem;color:var(--ms-texte);margin:.2rem 0}
.ms-groupe li::before{content:"";position:absolute;left:0;top:.62em;width:.38rem;height:.38rem;border-radius:999px 999px 1px 1px;background:var(--ms-or)}
.ms-groupe li.ms-plus{display:none}
.ms-module.est-deplie .ms-groupe li.ms-plus{display:list-item;animation:ms-apparait .35s ease both}
@keyframes ms-apparait{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ms-deplier{margin-top:1rem;border:0;background:none;padding:.3rem 0;font-weight:600;color:var(--ms-bleu);display:inline-flex;align-items:center;gap:.35rem}
.ms-deplier i{transition:transform .25s ease}
.ms-deplier-fermer{display:none}
.ms-module.est-deplie .ms-deplier-ouvrir{display:none}
.ms-module.est-deplie .ms-deplier-fermer{display:inline}
.ms-module.est-deplie .ms-deplier i{transform:rotate(180deg)}
.ms-module-cote{border-left:1px solid var(--ms-trait);padding-left:1.5rem;font-size:.92rem}
.ms-cote-titre{font-weight:600;color:var(--ms-gris);margin:0 0 .5rem}
.ms-pastilles{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.ms-pastilles li{background:var(--ms-ciel);color:var(--ms-nuit);border-radius:5px;padding:.12rem .65rem;font-size:.85rem}
.ms-requiert,.ms-complete{display:flex;gap:.4rem;margin:0 0 .7rem;line-height:1.4}
.ms-requiert{color:var(--ms-nuit);font-weight:600}
.ms-requiert i{color:var(--ms-bleu);margin-top:.15rem}
.ms-complete{color:var(--ms-gris)}
.ms-complete i{color:var(--ms-or);margin-top:.15rem}
.ms-tete-complementaires{margin-top:5rem}

/* ---------- 9 bis. L'application mobile (abdAllah, 12/10) ------------------
   Deux téléphones, des notifications qui tombent l'une après l'autre, puis les points forts. */
.ms-hero-atouts{list-style:none;margin:1.3rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.ms-hero-atouts a{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .85rem;border-radius:5px;border:1px solid var(--ms-trait);
  background:#fff;color:var(--ms-bleu);font-weight:600;font-size:.92rem;text-decoration:none;transition:background .3s ease,border-color .3s ease}
.ms-hero-atouts a i{font-size:1.15rem;color:var(--ms-or)}
.ms-hero-atouts a:hover{background:var(--ms-ciel);border-color:#b9d1df}
.ms-surtitre{display:inline-flex;align-items:center;gap:.45rem;margin:0 0 .9rem;padding:.3rem .8rem;border-radius:5px;
  background:var(--ms-or-clair);color:var(--ms-nuit);font-weight:600;font-size:.9rem}
.ms-surtitre i{font-size:1.1rem;color:#a8812f}
.ms-tete .ms-surtitre{margin:0 0 .9rem;color:var(--ms-nuit);font-size:.9rem}
.ms-installation .ms-tete{max-width:54rem}

.ms-mobile{background:radial-gradient(60rem 36rem at 15% 40%,#dcecf6,transparent 70%),var(--ms-ciel);overflow:hidden}
.ms-mobile-grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:3.5rem;align-items:center}
.ms-mobile-scene{position:relative;height:36rem;display:flex;justify-content:center;align-items:center}
.ms-tel{position:absolute;width:15.5rem;aspect-ratio:390/844;border:.6rem solid #0d2231;border-radius:2.2rem;background:#0d2231;
  box-shadow:0 40px 70px -30px rgba(11,57,84,.65),inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
.ms-tel img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:1.6rem}
.ms-tel::before{content:"";position:absolute;z-index:2;top:.45rem;left:50%;width:4.2rem;height:1.05rem;margin-left:-2.1rem;border-radius:999px;background:#0d2231}
.ms-tel-arriere{transform:translate(-5.5rem,1.2rem) rotate(-9deg) scale(.88);filter:saturate(.85);opacity:.92}
.ms-tel-avant{z-index:1;transform:translate(3.2rem,-.6rem) rotate(4deg);animation:ms-flotte 7s ease-in-out infinite}
@keyframes ms-flotte{0%,100%{translate:0 0}50%{translate:0 -12px}}
.ms-mobile-halo{position:absolute;inset:12% 8%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--ms-or) 45%,transparent),transparent);filter:blur(10px)}
.ms-notifs{position:absolute;z-index:3;top:2.1rem;left:.45rem;right:.45rem;height:4rem}
.ms-notif{position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:.5rem;padding:.55rem .6rem;border-radius:.9rem;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);box-shadow:0 12px 26px -10px rgba(11,57,84,.55);
  font-size:.72rem;line-height:1.25;color:var(--ms-texte);opacity:0;
  animation:ms-notif 12s cubic-bezier(.2,.7,.2,1) infinite;animation-delay:calc(var(--n) * 3s)}
.ms-notif-logo{flex:none;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:.5rem;
  background:linear-gradient(color-mix(in srgb,var(--ms-bleu) 72%,#fff),var(--ms-bleu))}
.ms-notif-texte{flex:1;min-width:0}
.ms-notif-texte b{display:block;font-family:var(--ms-titre);font-weight:600;color:var(--ms-nuit);font-size:.74rem}
.ms-notif > i{flex:none;font-size:1.2rem;color:var(--ms-bleu)}
@keyframes ms-notif{
  0%{opacity:0;transform:translateY(-18px) scale(.94)}
  4%,21%{opacity:1;transform:none}
  25%,100%{opacity:0;transform:translateY(-8px) scale(.97)}}
.ms-mobile-texte h2{margin:0 0 1rem}
.ms-mobile-lead{color:var(--ms-gris);font-size:1.1rem;margin:0 0 1.8rem}
.ms-mobile-liste{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:1.1rem}
.ms-mobile-liste li{display:flex;gap:1rem;align-items:flex-start}
.ms-mobile-liste i{font-size:1.55rem;color:var(--ms-bleu)}
.ms-mobile-ico{flex:none;display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:8px;
  background:#fff;border:1px solid var(--ms-trait);box-shadow:0 8px 18px -12px rgba(11,57,84,.5)}
.ms-mobile-liste h3{font-size:1.05rem;margin:.1rem 0 .2rem}
.ms-mobile-liste p{margin:0;color:var(--ms-gris);font-size:.97rem}

/* ---------- 9 ter. L'installation guidée (abdAllah, 12/10) -----------------
   Sept pastilles reliées par un trait doré qui se remplit, puis le relais de l'ERP. */
.ms-installation{background:linear-gradient(160deg,var(--ms-nuit),#0c4a6c);color:#fff}
.ms-installation .ms-tete h2{color:#fff}
.ms-installation .ms-tete p:not(.ms-surtitre){color:rgba(255,255,255,.78)}
.ms-etapes{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1rem}
.ms-etapes::before,.ms-etapes::after{content:"";position:absolute;top:2rem;left:calc(100% / 14);right:calc(100% / 14);height:3px;border-radius:3px;margin-top:-1.5px}
.ms-etapes::before{background:rgba(255,255,255,.14)}
.ms-etapes::after{background:linear-gradient(90deg,var(--ms-or),#f3dc9b);transform:scaleX(0);transform-origin:left;
  transition:transform 1.9s cubic-bezier(.4,0,.2,1) .2s}
.ms-etapes.est-revele::after{transform:none}
.ms-etapes li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;
  opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i) * 260ms + 200ms)}
.ms-etapes.est-revele li{opacity:1;transform:none}
.ms-etape-pastille{position:relative;display:grid;place-items:center;width:4rem;height:4rem;margin-bottom:.5rem;border-radius:50%;
  background:var(--ms-nuit);border:2px solid rgba(255,255,255,.22);transition:border-color .4s ease,box-shadow .4s ease;
  transition-delay:inherit}
.ms-etapes.est-revele .ms-etape-pastille{border-color:var(--ms-or);box-shadow:0 0 0 6px rgba(221,182,92,.12)}
.ms-etape-pastille i{font-size:1.75rem;color:var(--ms-or)}
.ms-etape-num{position:absolute;top:-.3rem;right:-.3rem;display:grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:50%;
  background:var(--ms-or);color:var(--ms-nuit);font-family:var(--ms-titre);font-weight:700;font-size:.78rem}
.ms-etapes strong{font-family:var(--ms-titre);font-weight:600;font-size:.98rem;line-height:1.25}
.ms-etapes li > span:last-child{font-size:.86rem;color:rgba(255,255,255,.7);line-height:1.4}
.ms-relais{margin:3.2rem auto 0;max-width:52rem;padding:1.5rem 1.6rem;border-radius:10px;text-align:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-left:5px solid var(--ms-or)}
.ms-relais-titre{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1rem;font-family:var(--ms-titre);font-weight:600;font-size:1.15rem;color:var(--ms-or)}
.ms-relais-titre i{font-size:1.4rem}
.ms-relais-liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem 1.5rem}
.ms-relais-liste li{position:relative;display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .8rem;border-radius:5px;background:#fff;color:var(--ms-nuit);
  font-weight:600;font-size:.92rem;opacity:0;transform:scale(.9);transition:opacity .4s ease,transform .4s ease;
  transition-delay:calc(var(--i) * 140ms + 300ms)}
.ms-relais-liste li + li::before{content:"";position:absolute;left:-.95rem;top:50%;width:.45rem;height:.45rem;margin-top:-.22rem;
  border-top:2px solid var(--ms-or);border-right:2px solid var(--ms-or);transform:rotate(45deg)}
.ms-relais.est-revele .ms-relais-liste li{opacity:1;transform:none}
.ms-relais-note{margin:1rem 0 0;color:rgba(255,255,255,.72);font-size:.95rem}
.ms-installation-plus{list-style:none;margin:2.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2.4rem}
.ms-installation-plus li{display:flex;align-items:center;gap:.55rem;font-weight:600}
.ms-installation-plus i{font-size:1.5rem;color:var(--ms-or)}
@media (max-width:991.98px){
  .ms-mobile-grille{grid-template-columns:1fr;gap:1rem}
  .ms-mobile-scene{height:31rem;order:2}
  .ms-tel{width:13.5rem}
  .ms-etapes{grid-template-columns:1fr;gap:1.4rem;max-width:30rem;margin:0 auto}
  .ms-etapes::before,.ms-etapes::after{top:2rem;bottom:2rem;left:2rem;right:auto;width:3px;height:auto;margin:0 0 0 -1.5px}
  .ms-etapes::after{transform:scaleY(0);transform-origin:top;background:linear-gradient(var(--ms-or),#f3dc9b)}
  .ms-etapes li{display:grid;grid-template-columns:4rem minmax(0,1fr);column-gap:1rem;align-items:center;text-align:left}
  .ms-etape-pastille{grid-row:span 2;margin:0}
  .ms-etapes strong{align-self:end}
  .ms-etapes li > span:last-child{align-self:start}
}
@media (max-width:575.98px){.ms-relais-liste{gap:.5rem}.ms-relais-liste li + li::before{display:none}.ms-tel-arriere{transform:translate(-3.6rem,1rem) rotate(-9deg) scale(.86)}.ms-tel-avant{transform:translate(2.2rem,-.6rem) rotate(4deg)}}
@media (prefers-reduced-motion:reduce){
  .ms-tel-avant,.ms-notif{animation:none}
  .ms-notif:first-child{opacity:1}
  .ms-etapes li,.ms-relais-liste li{opacity:1;transform:none;transition:none}
  .ms-etapes::after{transform:none;transition:none}
}

/* ---------- 10. Différence ----------------------------------------------- */
.ms-plus{background:var(--ms-ciel)}
.ms-comparaison{max-width:58rem;margin:0 auto 3.5rem;background:#fff;border-radius:10px;padding:0 2rem 1rem;box-shadow:var(--ms-ombre);overflow:hidden}
.ms-comparaison-tete{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:0 -2rem .2rem;padding:1rem 2rem;
  font-family:var(--ms-titre);font-weight:600;font-size:1.1rem;color:#fff;
  /* L'en-tête « grady-dark » de l'ERP (abdAllah, 12/10). */
  background:var(--ms-bleu);background:linear-gradient(color-mix(in srgb,var(--ms-bleu) 72%,#fff),var(--ms-bleu))}
.ms-comparaison-tete span:first-child{color:rgba(255,255,255,.75)}
.ms-comparaison-tete span:last-child{color:#fff}
.ms-comparaison ul{list-style:none;margin:0;padding:0}
.ms-comparaison li{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:.85rem 0;border-bottom:1px solid var(--ms-trait)}
.ms-comparaison li:last-child{border-bottom:0}
.ms-cmp-etiq{display:none}
.ms-autres{color:var(--ms-gris);text-decoration:line-through;text-decoration-color:rgba(94,115,132,.45)}
.ms-nous{color:var(--ms-nuit);font-weight:600;display:flex;gap:.5rem}
.ms-nous::before{content:"";flex:none;width:.5rem;height:.6rem;margin-top:.5em;border-radius:999px 999px 1px 1px;background:var(--ms-or)}
.ms-atouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
.ms-atout i{font-size:2rem;color:var(--ms-bleu)}
.ms-atout h3{margin:.6rem 0 .3rem}
.ms-atout p{color:var(--ms-gris);margin:0;font-size:.98rem}

/* ---------- 11. Appel final --------------------------------------------- */
.ms-appel{padding:0 0 clamp(4rem,8vw,6rem)}
.ms-plus + .ms-appel{padding-top:clamp(4rem,8vw,6rem);background:linear-gradient(var(--ms-ciel) 50%,#fff 50%)}
.ms-appel-boite{background:var(--ms-nuit);color:#fff;border-radius:12px;padding:clamp(2.5rem,5vw,4rem);text-align:center;
  background-image:radial-gradient(30rem 16rem at 50% -10%,rgba(221,182,92,.28),transparent 70%)}
.ms-appel-boite h2{color:#fff}
.ms-appel-boite p{color:rgba(255,255,255,.8);max-width:36rem;margin:.8rem auto 0}
.ms-appel-boite .ms-hero-actions{justify-content:center}

/* ---------- 12. Pages intérieures --------------------------------------- */
.mc-banniere{padding:clamp(3rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem);background:radial-gradient(50rem 22rem at 80% 0,var(--ms-ciel),transparent 70%)}
.mc-banniere h1{font-size:clamp(2rem,4vw,3rem);max-width:22ch}
.mc-banniere .lead,.mc-mesure{color:var(--ms-gris);font-size:1.15rem;max-width:42rem}
.mc-fil{font-size:.9rem;color:var(--ms-gris);margin-bottom:1rem}
.mc-fil a{color:var(--ms-gris);text-decoration:none}
.mc-fil a:hover{color:var(--ms-bleu)}
.mc-section{padding:clamp(3rem,6vw,5rem) 0}
.mc-legal{margin-bottom:2.4rem}
.mc-legal h2{font-size:1.35rem;display:flex;gap:.8rem;align-items:baseline}
.mc-legal h2 span{color:var(--ms-or);font-size:1rem}
.mc-legal-maj{color:var(--ms-gris);font-size:.92rem;border-top:1px solid var(--ms-trait);padding-top:1.5rem}

/* ---------- 13. Démo : galerie ------------------------------------------ */
.ms-demo-appel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center;background:var(--ms-nuit);color:#fff;
  border-radius:8px;padding:clamp(1.8rem,4vw,2.8rem)}
.ms-demo-appel h2{color:#fff;margin:0}
.ms-demo-appel p{color:rgba(255,255,255,.8);margin:.6rem 0 0}
.ms-profils-demo{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.ms-profils-demo li{display:flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.1);border-radius:5px;padding:.25rem .8rem;font-size:.92rem}
.ms-profils-demo i{color:var(--ms-or)}
.ms-filtres{display:flex;flex-wrap:wrap;gap:.5rem;margin:3rem 0 1.8rem}
.ms-filtre{border:1px solid var(--ms-trait);background:#fff;color:var(--ms-texte);border-radius:8px;padding:.4rem 1rem;font-weight:600;font-size:.95rem}
.ms-filtre-module{border:1px solid var(--ms-trait);border-radius:8px;padding:.4rem 2.2rem .4rem 1rem;font-weight:600;font-size:.95rem;color:var(--ms-texte);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23065D89' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 1rem center;appearance:none;margin-left:auto}
.ms-filtre:hover{border-color:var(--ms-bleu);color:var(--ms-bleu)}
.ms-filtre[aria-pressed="true"]{background:var(--ms-bleu);border-color:var(--ms-bleu);color:#fff}
.ms-galerie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}
.ms-capture{margin:0}
.ms-capture[hidden]{display:none}
.ms-capture button{display:block;width:100%;border:0;padding:0;background:var(--ms-ciel);border-radius:8px;overflow:hidden;
  box-shadow:0 1px 0 var(--ms-trait),0 12px 28px -20px rgba(11,57,84,.5);transition:transform .2s ease,box-shadow .2s ease}
.ms-capture button:hover{transform:translateY(-3px);box-shadow:0 1px 0 var(--ms-trait),0 22px 40px -22px rgba(11,57,84,.6)}
.ms-capture img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.ms-capture.est-mobile img{aspect-ratio:16/10;object-fit:contain;background:var(--ms-ciel)}
.ms-capture figcaption{padding:.8rem .2rem 0}
.ms-capture strong{display:block;font-family:var(--ms-titre);font-weight:600;color:var(--ms-nuit)}
.ms-capture span{display:block;font-size:.93rem;color:var(--ms-gris)}
.ms-capture-etiquette{display:inline-flex!important;align-items:center;gap:.3rem;margin-top:.35rem;font-size:.82rem!important;color:var(--ms-bleu)!important}
.ms-visionneuse .modal-content{background:transparent;border:0}
.ms-visionneuse img{width:100%;height:auto;border-radius:8px;max-height:82vh;object-fit:contain}
.ms-visionneuse figcaption{color:#fff;text-align:center;margin-top:.8rem;font-weight:600}
.ms-visionneuse .btn-close{position:absolute;top:-2.4rem;right:0}
.ms-visionneuse .modal-content{position:relative}
.ms-visio-nav{position:absolute;top:calc(50% - 1.5rem);width:3rem;height:3rem;border:0;border-radius:999px;
  background:rgba(11,57,84,.75);color:#fff;font-size:1.5rem;display:flex;align-items:center;justify-content:center;
  transition:background-color .2s ease,transform .2s ease}
.ms-visio-nav:hover{background:var(--ms-bleu);transform:scale(1.06)}
.ms-visio-nav[hidden]{display:none}
.ms-visio-prec{left:-1.2rem}
.ms-visio-suiv{right:-1.2rem}
.ms-visio-rang{opacity:.7;margin-left:.5rem;font-size:.9em}
@media (max-width:767.98px){.ms-visio-prec{left:.3rem}.ms-visio-suiv{right:.3rem}}

/* ---------- 14. Simulateur ---------------------------------------------- */
.ms-sim{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:2.5rem;align-items:start}
.ms-sim-modules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.ms-sim-case{position:relative;display:flex}
.ms-sim-case input{position:absolute;opacity:0;pointer-events:none}
.ms-sim-case label{display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;flex:1;min-height:5.2rem;border:1px solid var(--ms-trait);border-radius:8px;cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease}
@media (min-width:992px) and (max-width:1199.98px){.ms-sim-case label{min-height:6.5rem}}
.ms-sim-case label i{font-size:1.5rem;color:var(--ms-bleu)}
.ms-sim-case label span{flex:1;font-weight:600;color:var(--ms-nuit);line-height:1.25}
.ms-sim-case label small{display:block;font-weight:400;color:var(--ms-gris);font-size:.85rem}
.ms-sim-case label b{font-family:var(--ms-titre);font-weight:600;color:var(--ms-gris);font-size:.95rem;white-space:nowrap}
.ms-sim-case input:checked + label{border-color:var(--ms-bleu);background:radial-gradient(#e6f1f8 30%,#cfe3ef)}
/* Survol : le fond s'éclaire en bleu et un reflet glossy traverse la case (abdAllah, 12/10). */
.ms-sim-case label{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(#fff 50%,#eef7fd)}
.ms-sim-case label::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.95) 48%,rgba(255,255,255,.6) 52%,transparent 65%);
  transform:translateX(-120%);transition:transform 1.6s cubic-bezier(.45,.05,.25,1)}
.ms-sim-case label:hover{border-color:#b9d1df;background:radial-gradient(#fff 30%,#d6ecfb)}
.ms-sim-case label:hover::after{transform:translateX(120%)}
.ms-sim-case input:checked + label:hover{background:radial-gradient(#dcebf5 30%,#c2dbea)}
.ms-sim-case input:checked + label b{color:var(--ms-bleu)}
.ms-sim-case input:focus-visible + label{outline:3px solid var(--ms-or);outline-offset:2px}
.ms-sim-socle{display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;border-radius:8px;background:var(--ms-nuit);color:#fff;margin-bottom:.7rem}
.ms-sim-socle i{font-size:1.5rem;color:var(--ms-or)}
.ms-sim-socle span{flex:1;font-weight:600}
.ms-sim-socle b{font-family:var(--ms-titre);color:var(--ms-or)}
.ms-sim-titre{font-family:var(--ms-titre);font-weight:600;font-size:1.05rem;color:var(--ms-nuit);margin:1.6rem 0 .7rem}
.ms-sim-resultat{position:sticky;top:100px;border-radius:0;color:#fff;padding:6rem 2rem 2.2rem;text-align:center;
  /* Le dégradé « grady-dark » de l'ERP (abdAllah, 12/10). */
  background:var(--ms-bleu);background:linear-gradient(color-mix(in srgb,var(--ms-bleu) 72%,#fff),var(--ms-bleu));
  border:2.5px solid var(--ms-nuit)}
.ms-sim-resultat .ms-socle-nom{color:#fff}
.ms-sim-resultat .ms-prix{font-size:clamp(2.2rem,3.4vw,2.9rem)}
.ms-sim-resultat .ms-prix-note{color:rgba(255,255,255,.7)}
.ms-sim-resultat label{display:block;text-align:left;font-size:.92rem;color:rgba(255,255,255,.8);margin:1.8rem 0 .4rem}
.ms-sim-resultat input{width:100%;border-radius:8px;border:0;padding:.7rem 1rem;font-size:1.1rem;font-weight:600}
/* Le montant actuel : moins large, centré (abdAllah, 13/10). */
.ms-sim-resultat #simAbo{display:block;width:10rem;max-width:100%;margin:0 auto;text-align:center}
.ms-sim-resultat label[for=simAbo]{text-align:center}
/* Tout cocher, et le détail tarif / charges / total (abdAllah, 13/10). */
.ms-sim-titre-tout{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.ms-sim-tout{font-family:inherit;font-size:.85rem;font-weight:600;color:var(--ms-nuit);background:#fff;border:1px solid currentColor;border-radius:999px;padding:.3rem .9rem;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem}
.ms-sim-tout:hover{background:var(--ms-nuit);color:#fff}
.ms-sim-detail{margin:1.2rem 0 0;padding-top:1rem;border-top:1px solid rgba(255,255,255,.15);text-align:left;font-size:.95rem}
.ms-sim-detail div{display:flex;justify-content:space-between;gap:1rem;padding:.2rem 0}
.ms-sim-detail dt{font-weight:400;color:rgba(255,255,255,.8)}
.ms-sim-detail dd{margin:0;font-weight:600;color:#fff;white-space:nowrap}
.ms-sim-detail .ms-sim-detail-total{margin-top:.3rem;padding-top:.5rem;border-top:1px dashed rgba(255,255,255,.25)}
.ms-sim-detail .ms-sim-detail-total dt,.ms-sim-detail .ms-sim-detail-total dd{color:var(--ms-or);font-weight:700}
.ms-sim-amorti{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.15)}
.ms-sim-amorti strong{display:block;font-family:var(--ms-titre);font-size:1.6rem;color:#fff}
.ms-sim-amorti span{color:rgba(255,255,255,.75);font-size:.95rem}
.ms-sim-avis{font-size:.9rem;border-radius:8px;padding:.7rem 1rem;margin:.9rem 0 0;background:var(--ms-or-clair);color:#6b5114}
.ms-sim-avis[hidden]{display:none}
.ms-sim-note{color:var(--ms-gris);font-size:.88rem;margin-top:1rem}

/* ---------- 15. FAQ ----------------------------------------------------- */
.ms-faq{max-width:52rem;margin:0 auto}
.ms-faq h2{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:1.25rem;margin:2.8rem 0 .8rem;padding:.75rem 1.2rem;border-radius:8px;color:#fff;font-weight:600;
  background:var(--ms-bleu);background:linear-gradient(color-mix(in srgb,var(--ms-bleu) 72%,#fff),var(--ms-bleu))}
.ms-faq h2:first-child{margin-top:0}
.ms-faq h2 i{font-size:1.6rem;color:var(--ms-or);flex:none}
.ms-faq details{margin-bottom:.6rem}
.ms-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;
  font-weight:600;color:var(--ms-nuit);font-size:1.05rem;
  position:relative;overflow:hidden;isolation:isolate;border:1px solid var(--ms-trait);border-radius:8px;
  background:radial-gradient(#fff 50%,#eef7fd);transition:border-color .3s ease,background .4s ease}
/* Entêtes : fond clair, reflet glossy au survol, une seule question ouverte à la fois (abdAllah, 12/10). */
.ms-faq summary::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.95) 48%,rgba(255,255,255,.6) 52%,transparent 65%);
  transform:translateX(-120%);transition:transform 1.6s cubic-bezier(.45,.05,.25,1)}
.ms-faq summary:hover{border-color:#b9d1df;background:radial-gradient(#fff 30%,#d6ecfb)}
.ms-faq summary:hover::after{transform:translateX(120%)}
.ms-faq details[open] summary{border-color:var(--ms-bleu);background:radial-gradient(#e6f1f8 30%,#cfe3ef)}
.ms-faq summary,.ms-faq summary:hover,.ms-faq details[open] summary{border-left:5px solid #065D92}
.ms-faq summary::-webkit-details-marker{display:none}
.ms-faq summary i{color:var(--ms-bleu);transition:transform .25s ease;flex:none;margin-top:.2rem}
.ms-faq details[open] summary i{transform:rotate(45deg)}
.ms-faq details p{margin:0;padding:1rem 1.2rem .6rem;color:var(--ms-gris);max-width:46rem}

/* ---------- 16. Formulaires --------------------------------------------- */
.ms-contact{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:2.5rem;align-items:start}
.ms-contact-carte{border-radius:0;background:var(--ms-porte-nuit) center/100% 100% no-repeat;color:#fff;padding:5.5rem 1.8rem 2.2rem}
.ms-contact-carte h2{color:#fff;font-size:1.4rem;text-align:center}
.ms-contact-ligne{display:flex;gap:.8rem;align-items:flex-start;margin-top:1.3rem}
.ms-contact-ligne i{font-size:1.5rem;color:var(--ms-or)}
/* Le bloc des coordonnées centré dans la porte ; l'icône calée sur la ligne du libellé (abdAllah, 13/10). */
.ms-contact-liste{width:fit-content;max-width:100%;margin:0 auto}
.ms-contact-liste .ms-contact-ligne > i{flex:0 0 1.6rem;line-height:1;margin-top:.05rem;text-align:center}
/* Survol (abdAllah, 13/10) : fond doré clair (au clavier aussi : focus-visible, pas focus-within, sinon le fond restait après un clic) sur E-mail, Ligne directe et WhatsApp ; toute la ligne est cliquable. */
.ms-contact-liste .ms-contact-ligne{margin-top:.6rem;padding:.45rem .7rem;border-radius:.6rem}
/* Rien ne se coupe en deux lignes (e-mail, numéros), et le bloc descend là où la porte s'élargit (abdAllah, 13/10). */
.ms-contact-liste a,.ms-contact-liste span{white-space:nowrap}
.ms-contact-carte{padding-top:7.6rem}
.ms-contact-liste{font-size:.92rem}
@media (min-width:992px) and (max-width:1199.98px){
  .ms-contact-carte{padding-left:1rem;padding-right:1rem}
  .ms-contact-liste{font-size:.8rem}
  .ms-contact-liste .ms-contact-ligne > i{font-size:1.3rem;flex-basis:1.4rem}
  .ms-contact-liste .ms-contact-ligne{padding:.4rem .55rem;gap:.6rem}
}
.ms-contact-lien{position:relative;overflow:hidden;transition:background-color .2s ease}
/* Reflet glossy en biais, de gauche à droite, au survol (abdAllah, 13/10). */
.ms-contact-lien::before{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg)}
.ms-contact-lien:hover::before{animation:ms-glossy .9s ease forwards}
@keyframes ms-glossy{to{left:125%}}
@media (prefers-reduced-motion:reduce){.ms-contact-lien:hover::before{animation:none}}
/* Le message « Adresse copiée ». */
.ms-toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,1rem);z-index:2000;max-width:calc(100% - 2rem);
  background:var(--ms-nuit);color:#fff;border-left:4px solid var(--ms-or);border-radius:.6rem;padding:.75rem 1.1rem;
  box-shadow:0 .6rem 1.6rem rgba(0,0,0,.25);font-size:.92rem;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.ms-toast.visible{opacity:1;transform:translate(-50%,0)}
.ms-contact-lien a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.ms-contact-lien:hover,.ms-contact-lien:has(a:focus-visible){background:#F7EBCB}
.ms-contact-lien:hover strong,.ms-contact-lien:hover a,.ms-contact-lien:has(a:focus-visible) strong,.ms-contact-lien:has(a:focus-visible) a{color:var(--ms-nuit)}
.ms-contact-lien:hover i,.ms-contact-lien:has(a:focus-visible) i{color:#A97E22}
.ms-contact-ligne strong{display:block}
.ms-contact-ligne a,.ms-contact-ligne span{color:rgba(255,255,255,.82);text-decoration:none;word-break:break-word}
.ms-form{border:1px solid var(--ms-trait);border-radius:10px;padding:clamp(1.5rem,3vw,2.2rem);background:var(--bs-light)}
.ms-form label{font-weight:600;font-size:.95rem;color:var(--ms-nuit);margin-bottom:.3rem}
.ms-form .form-control,.ms-form .form-select{border-radius:4px;border-color:var(--ms-trait);padding:.42rem .75rem;font-size:.95rem}
/* Champs avec leur icône à gauche (abdAllah, 12/10). */
.ms-form .input-group-text{background:var(--ms-ciel);border-color:var(--ms-trait);border-radius:4px 0 0 4px;padding:0 .7rem;
  transition:border-color .15s ease}
.ms-form .input-group-text i{font-size:1.15rem;color:var(--ms-bleu)}
.ms-form .input-group:has(textarea) .input-group-text{align-items:flex-start;padding-top:.5rem}
.ms-form .input-group:focus-within .input-group-text{border-color:var(--ms-bleu)}
.ms-form .input-group > .form-control,.ms-form .input-group > .form-select{border-radius:0 4px 4px 0}
.ms-form .was-validated .input-group:has(:invalid) .input-group-text,.ms-form.was-validated .input-group:has(:invalid) .input-group-text{border-color:var(--bs-form-invalid-border-color)}
.ms-requis{color:var(--bs-danger);font-weight:700}
.ms-piege{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.ms-lien-or{color:var(--ms-or)!important;font-weight:700;text-decoration:underline!important;text-underline-offset:3px}
.ms-lien-or:hover{color:#f3dc9b!important}
/* Un lien en bouton arrondi, doré (contact : le simulateur) - abdAllah, 13/10. */
.ms-pilule-or{display:inline-flex;align-items:center;gap:.35rem;margin-left:.3rem;padding:.25rem .9rem;border-radius:999px;background:var(--ms-or);color:var(--ms-nuit)!important;font-weight:700;font-size:.9rem;text-decoration:none!important;transition:background .2s,transform .2s}
.ms-pilule-or:hover{background:#f3dc9b;transform:translateY(-1px)}
.ms-pilule-or i,.ms-contact-ligne .ms-pilule-or i{font-size:1.05rem;color:var(--ms-nuit)}
/* Simulateur - les trois formules types (abdAllah, 13/10). */
.ms-formules-titre{text-align:center;margin:3.5rem 0 2.2rem;font-size:clamp(1.5rem,2.4vw,1.9rem)}
.ms-formules-rappel{list-style:none;padding:0;margin:0 0 2.4rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1rem}
.ms-formules-rappel li{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem 1rem;border-radius:999px;background:var(--ms-or-clair);color:var(--ms-nuit);font-weight:600;font-size:.92rem}
.ms-formules-rappel i{font-size:1.15rem;color:var(--ms-bleu)}
.ms-formules{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:stretch;margin-bottom:2rem}
.ms-formule{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #DCE7EE;border-radius:14px;padding:1.8rem 1.5rem 1.5rem;box-shadow:var(--ms-ombre);text-align:center}
.ms-formule-vedette{border:2px solid var(--ms-or);transform:translateY(-6px)}
.ms-formule-bandeau{position:absolute;top:-.85rem;left:50%;transform:translateX(-50%);background:var(--ms-or);color:var(--ms-nuit);font-weight:700;font-size:.8rem;padding:.25rem .9rem;border-radius:999px;white-space:nowrap}
.ms-formule-icone{font-size:2.2rem;color:var(--ms-bleu)}
.ms-formule h3{margin:.4rem 0 .2rem;font-size:1.35rem}
.ms-formule-pour{color:var(--ms-gris);font-size:.92rem;min-height:2.6em;margin-bottom:.8rem}
.ms-formule ul{list-style:none;padding:0;margin:0 0 1.2rem;text-align:left;flex:1}
.ms-formule li{padding:.35rem 0 .35rem 1.6rem;border-bottom:1px dashed #DCE7EE;position:relative;font-size:.95rem}
.ms-formule li:nth-child(odd){background:#F2F7FA}
.ms-formule li::before{content:"✓";position:absolute;left:.2rem;color:var(--ms-or);font-weight:700}
.ms-formule-prix{font-family:var(--ms-titre);font-weight:700;font-size:1.9rem;color:var(--ms-nuit);margin:0}
.ms-formule-prix small{font-size:.9rem;font-weight:400;color:var(--ms-gris)}
.ms-formule-taxes{font-size:.85rem;color:var(--ms-gris);margin:.2rem 0 1.1rem}
.ms-formule-taxes b{color:var(--ms-nuit)}
.ms-formule .ms-btn{justify-content:center}
@media (max-width:991.98px){.ms-formules{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}.ms-formule-vedette{transform:none}.ms-formule-pour{min-height:0}}

/* La page Sur mesure (abdAllah, 13/10). */
.ms-dev-titre{text-align:center;margin:3.2rem 0 1.6rem;font-size:clamp(1.5rem,2.4vw,1.9rem)}
.ms-dev-offres{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.ms-dev-offre{background:#fff;border:1px solid #DCE7EE;border-radius:14px;padding:1.6rem 1.4rem;box-shadow:var(--ms-ombre)}
.ms-dev-offre i{font-size:2.2rem;color:var(--ms-bleu)}
.ms-dev-offre h3{font-size:1.15rem;margin:.6rem 0 .4rem}
.ms-dev-offre p{color:var(--ms-gris);font-size:.95rem;margin:0}
.ms-dev-tarif{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1.5rem 3rem;margin:2.5rem auto 0;max-width:56rem;padding:1.8rem 2rem;border-radius:14px;background:var(--ms-nuit);color:#fff}
.ms-dev-tarif-prix{font-family:var(--ms-titre);font-weight:700;font-size:2.4rem;color:var(--ms-or);margin:0;line-height:1.1}
.ms-dev-tarif-prix small{font-size:1rem;font-weight:400;color:rgba(255,255,255,.8)}
.ms-dev-tarif-note{margin:.2rem 0 0;font-size:.88rem;color:rgba(255,255,255,.7)}
.ms-dev-tarif ul{list-style:none;margin:0;padding:0}
.ms-dev-tarif li{display:flex;align-items:center;gap:.5rem;padding:.2rem 0}
.ms-dev-tarif li i{color:var(--ms-or);font-size:1.2rem}
.ms-dev-etapes{list-style:none;margin:0 auto;padding:0;max-width:52rem;position:relative}
.ms-dev-etapes::before{content:"";position:absolute;left:1.35rem;top:1rem;bottom:1rem;width:2px;background:repeating-linear-gradient(var(--ms-or) 0 6px,transparent 6px 12px)}
.ms-dev-etapes li{position:relative;display:flex;gap:1.2rem;align-items:flex-start;padding:.7rem 0}
.ms-dev-num{flex:0 0 2.7rem;height:2.7rem;border-radius:50%;background:var(--ms-or);color:var(--ms-nuit);font-family:var(--ms-titre);font-weight:700;font-size:1.15rem;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;box-shadow:0 0 0 5px #fff}
.ms-dev-etapes h3{font-size:1.1rem;margin:.45rem 0 .25rem}
.ms-dev-etapes p{margin:0;color:var(--ms-gris)}
.ms-dev-badge{display:inline-block;margin-left:.4rem;padding:.1rem .6rem;border-radius:999px;background:var(--ms-or-clair);color:var(--ms-nuit);font-size:.75rem;font-weight:700;vertical-align:middle}
.ms-dev-garanties{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 1.6rem;max-width:60rem;margin:0 auto}
.ms-dev-garantie{display:flex;gap:.9rem;align-items:flex-start;padding:1.1rem 1.2rem;border-radius:12px;background:#F2F7FA}
.ms-dev-garantie i{font-size:1.8rem;color:var(--ms-bleu);flex-shrink:0}
.ms-dev-garantie strong{display:block;color:var(--ms-nuit)}
.ms-dev-garantie span{color:var(--ms-gris);font-size:.93rem}
.ms-dev-appel{margin:3.5rem auto 1rem;max-width:44rem;text-align:center;padding:2.2rem 2rem;border-radius:14px;border:2px dashed var(--ms-or)}
.ms-dev-appel h2{font-size:1.6rem;margin-bottom:.5rem}
.ms-dev-appel p{color:var(--ms-gris)}
@media (max-width:991.98px){.ms-dev-offres{grid-template-columns:repeat(2,1fr)}}
@media (max-width:575.98px){.ms-dev-offres,.ms-dev-garanties{grid-template-columns:1fr}.ms-dev-tarif{text-align:center}}

/* Contact - « Votre prix » centré sur deux lignes, sous un trait pointillé comme le total du simulateur. */
.ms-contact-prix{display:block;text-align:center;margin-top:1.6rem;padding-top:1.3rem;border-top:1px dashed rgba(255,255,255,.25)}
.ms-contact-prix strong{display:inline-flex;align-items:center;gap:.5rem}
.ms-contact-prix strong i{font-size:1.5rem}
.ms-contact-prix span{display:block;margin-top:.2rem}
.ms-contact-prix .ms-pilule-or{margin:.6rem 0 0}
.ms-form .form-control:focus,.ms-form .form-select:focus{border-color:var(--ms-bleu);box-shadow:0 0 0 .2rem rgba(6,93,137,.15)}

/* ---------- 17. Pied ---------------------------------------------------- */
.ms-pied{background:var(--ms-nuit);color:rgba(255,255,255,.75);padding:4rem 0 1.5rem;font-size:.95rem}
.ms-pied-grille{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.5fr));gap:2rem}
.ms-pied h2{font-family:var(--ms-titre);font-size:.95rem;color:#fff;margin:0 0 .8rem}
.ms-pied a:not(.ms-marque){display:block;color:rgba(255,255,255,.75);text-decoration:none;margin:.3rem 0}
.ms-pied a:not(.ms-marque):hover{color:var(--ms-or)}
.ms-pied-texte{margin:1rem 0 0;max-width:30ch}
.ms-pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;border-top:1px solid rgba(255,255,255,.12);margin-top:3rem;padding-top:1.4rem;font-size:.88rem}
.ms-pied a.ms-pied-dzsil{display:inline;margin:0;color:var(--ms-or);font-weight:600}
.ms-pied a.ms-pied-dzsil:hover{color:#fff}
/* Survol des liens du pied (abdAllah, 13/10) : or + léger agrandissement, ancré à gauche. */
.ms-pied a:not(.ms-marque){width:fit-content;transform-origin:left center;transition:color .2s ease,transform .2s ease}
.ms-pied a:not(.ms-marque):hover,.ms-pied a:not(.ms-marque):focus-visible{transform:scale(1.07)}
.ms-pied a.ms-pied-dzsil{display:inline-block;transform-origin:center}
@media (prefers-reduced-motion:reduce){.ms-pied a:not(.ms-marque):hover{transform:none}}
.ms-haut{position:fixed;right:1.2rem;bottom:1.2rem;z-index:1020;width:3rem;height:3rem;border-radius:999px;border:0;background:var(--ms-bleu);color:#fff;
  font-size:1.3rem;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.ms-haut.est-visible{opacity:1;visibility:visible;transform:none}

/* ---------- 18. Animation du schéma (héros) ------------------------------ */
.mc-scene{width:100%;margin-inline:auto}
.mc-scene svg{display:block;width:100%;height:auto;overflow:visible}
.piece{transform-box:fill-box;transform-origin:center;will-change:transform,opacity}
.piece path{transition:fill .55s ease,stroke-opacity .45s ease}
.label{fill:#fff;font-weight:700;font-size:15px;text-anchor:middle;pointer-events:none;transition:opacity .55s ease;font-family:var(--ms-titre)}
.ico{fill:#fff;transition:opacity .55s ease}
.socle-titre{fill:#fff;font-weight:700;font-size:19px;letter-spacing:.06em;text-anchor:middle;font-family:var(--ms-titre)}
.socle-item{fill:var(--a-jaune);font-weight:700;font-size:13.5px;text-anchor:middle;font-family:var(--ms-titre)}
#groupeSocleTexte{transition:opacity .55s ease}
#halo,#plaque{opacity:0;transform-box:fill-box;transform-origin:center}
#halo{transform:scale(.82);transition:transform .8s cubic-bezier(.2,.85,.3,1),opacity .5s ease}
#titreFinal{opacity:0;transition:opacity .6s ease}
#titreFinal text{fill:#fff;text-anchor:middle;font-family:var(--ms-titre)}
.t1{font-weight:700;font-size:26px;letter-spacing:.09em}
.t2{font-weight:700;font-size:19px}
.mc-scene-barre{display:flex;align-items:center;justify-content:center;gap:1.2rem;flex-wrap:wrap;margin-top:.4rem}
#legende{min-height:1.4em;font-size:.95rem;font-weight:600;font-family:var(--ms-titre);color:var(--ms-bleu);transition:opacity .25s ease}

/* ---------- 19. Petits écrans, mouvement réduit -------------------------- */
@media (max-width:1199.98px){
  .ms-module{grid-template-columns:11rem minmax(0,1fr)}
  .ms-module-cote{grid-column:2;border-left:0;padding-left:0;border-top:1px solid var(--ms-trait);padding-top:1rem}
  .ms-atouts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:991.98px){
  .ms-hero-grille,.ms-socle-grille,.ms-sim,.ms-contact{grid-template-columns:1fr}
  .ms-hero-scene{order:-1;max-width:34rem;margin:0 auto;width:100%}
  .ms-socle-porte,.ms-sim-resultat{position:static}
  .ms-tuiles,.ms-galerie{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ms-pied-grille{grid-template-columns:1fr 1fr}
  .ms-nav-contact{margin:.5rem 0 0}
  .ms-entete .navbar-collapse{padding:.8rem 0}
}
@media (max-width:767.98px){
  .ms-module{grid-template-columns:1fr;gap:1.2rem}
  .ms-module-porte{display:grid;grid-template-columns:auto 1fr auto;align-items:center;text-align:left;gap:.2rem 1rem;
    border-radius:8px;padding:1rem 1.2rem}
  .ms-module-porte i{grid-row:1/3;font-size:2rem}
  .ms-module-porte h3{margin:0}
  .ms-module-porte .ms-prix{grid-column:3;grid-row:1;margin:0}
  .ms-module-porte .ms-prix-note{grid-column:3;grid-row:2;margin:0}
  .ms-module-cote{grid-column:1}
  .ms-groupes,.ms-socle-liste,.ms-sim-modules{grid-template-columns:1fr}
  /* Sur téléphone, la fiche repliée ne montre que les titres des groupes. */
  .ms-groupes{gap:.15rem}
  .ms-module:not(.est-deplie) .ms-groupe ul{display:none}
  .ms-module:not(.est-deplie) .ms-groupe h4{margin:0;font-weight:500}
  .ms-module:not(.est-deplie) .ms-module-cote .ms-pastilles{display:none}
  .ms-module:not(.est-deplie) .ms-cote-titre{display:none}
  .ms-comparaison{padding:0 1.2rem .5rem}
  .ms-comparaison-tete{margin:0 -1.2rem .2rem;padding:.9rem 1.2rem}
  .ms-comparaison li,.ms-comparaison-tete{gap:1rem;font-size:.95rem}
  .ms-demo-appel{grid-template-columns:1fr}
}
@media (max-width:575.98px){
  .ms-tuiles,.ms-galerie,.ms-atouts,.ms-pied-grille{grid-template-columns:1fr}
  .ms-tuile{min-height:9.5rem}
  /* Sur téléphone, l'en-tête disparaît : chaque ligne porte ses deux étiquettes (abdAllah, 12/10). */
  .ms-comparaison-tete{display:none}
  .ms-comparaison{padding:.4rem 1rem .4rem}
  .ms-comparaison li{grid-template-columns:1fr;gap:.15rem;padding:1rem 0}
  .ms-cmp-etiq{display:block;font-family:var(--ms-titre);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ms-gris)}
  .ms-cmp-etiq.est-nous{margin-top:.55rem;color:var(--ms-bleu)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ms-tuile-face,.ms-btn,.ms-module,.ms-capture button{transition:none}
  .ms-module::after,.ms-sim-case label::after,.ms-faq summary::after{display:none}
  [data-revele]{opacity:1!important;transform:none!important;transition:none}
}

/* ---------- 20. Les portes (arc brisé) -----------------------------------
   Placé en dernier : remplace le fond et la bordure des blocs en arche. */
.ms-module-porte,.ms-sim-resultat{background:var(--ms-porte-bleu) center/100% 100% no-repeat!important;border:0!important}
.ms-module.est-complementaire .ms-module-porte{background:var(--ms-porte-or) center/100% 100% no-repeat!important}
.ms-socle-porte{background:var(--ms-porte-clair) center/100% 100% no-repeat!important;border:0!important}
/* Sur téléphone, la porte du module devient un bandeau : un rectangle arrondi suffit. */
@media (max-width:767.98px){
  .ms-module-porte{border-radius:8px;padding:1rem 1.2rem;
    background:linear-gradient(color-mix(in srgb,var(--ms-bleu) 72%,#fff),var(--ms-bleu))!important}
  .ms-module.est-complementaire .ms-module-porte{background:linear-gradient(color-mix(in srgb,#cfa64e 72%,#fff),#cfa64e)!important}
}

/* ===================================================================== LE REFLET GLOSSY DES BOUTONS (abdAllah, 13/10)
   Tous les boutons : un reflet passe en biais, de gauche à droite, au survol. Blanc sur les boutons
   foncés ou dorés, doré sur les boutons blancs (filtres, « Tout cocher »), où le blanc ne se verrait pas. */
.ms-btn,.ms-pilule-or,.btn:not(.btn-close),.ms-filtre,.ms-sim-tout{position:relative;overflow:hidden;isolation:isolate}
.ms-haut{overflow:hidden;isolation:isolate}
.ms-btn::after,.ms-pilule-or::after,.btn:not(.btn-close)::after,.ms-filtre::after,.ms-sim-tout::after,.ms-haut::after{
  content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-20deg)}
.ms-filtre::after,.ms-sim-tout::after,.ms-btn-or:hover::after,.ms-btn-clair:hover::after{
  background:linear-gradient(100deg,rgba(221,182,92,0) 0%,rgba(221,182,92,.45) 50%,rgba(221,182,92,0) 100%)}
.ms-btn:hover::after,.ms-pilule-or:hover::after,.btn:not(.btn-close):hover::after,.ms-filtre:hover::after,.ms-sim-tout:hover::after,.ms-haut:hover::after{
  animation:ms-glossy .8s ease forwards}
@media (prefers-reduced-motion:reduce){
  .ms-btn:hover::after,.ms-pilule-or:hover::after,.btn:not(.btn-close):hover::after,.ms-filtre:hover::after,.ms-sim-tout:hover::after,.ms-haut:hover::after{animation:none}}
/* La barre du haut aussi (abdAllah, 13/10) : liens du menu et bouton du menu mobile ; doré sur
   « Nous écrire », qui passe au blanc au survol. */
.ms-entete .nav-link,.ms-entete .ms-burger{position:relative;overflow:hidden;isolation:isolate}
.ms-entete .nav-link::after,.ms-entete .ms-burger::after{
  content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-20deg)}
.ms-entete .nav-link:hover::after,.ms-entete .ms-burger:hover::after{animation:ms-glossy .8s ease forwards}
.ms-entete .ms-btn:hover::after{background:linear-gradient(100deg,rgba(221,182,92,0) 0%,rgba(221,182,92,.45) 50%,rgba(221,182,92,0) 100%)}
@media (prefers-reduced-motion:reduce){.ms-entete .nav-link:hover::after,.ms-entete .ms-burger:hover::after{animation:none}}

/* ===================================================================== LA COMMANDE EN LIGNE (abdAllah, 14/10)
   Même grille que le simulateur : le formulaire et les modules à gauche, le récapitulatif collant à droite. */
.ms-btn-contour-clair{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.ms-btn-contour-clair:hover{background:#fff;border-color:#fff;color:var(--ms-nuit)}
.ms-sim-resultat .ms-btn{display:flex;justify-content:center}
.ms-cmd{background:transparent;border:0;padding:0}
.ms-cmd .ms-sim{align-items:start}
.ms-cmd-titre{display:flex;align-items:center;gap:.7rem;font-family:var(--ms-titre);font-weight:600;font-size:1.3rem;color:var(--ms-nuit);margin:0 0 1.2rem}
.ms-cmd-titre span{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--ms-nuit);color:var(--ms-or);font-size:1rem}
.ms-cmd-libelle{display:block;font-weight:600;font-size:.95rem;color:var(--ms-nuit);margin-bottom:.3rem}
.ms-cmd-aide{font-weight:400;color:var(--ms-gris);font-size:.82rem;margin-left:.3rem}
.ms-cmd .form-control{background:#fff}
/* Type et civilité : un groupe de boutons, le choix en bleu nuit. */
.ms-choix{display:flex}
.ms-choix label{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;margin:0;padding:.42rem .6rem;cursor:pointer;
  font-weight:600;font-size:.95rem;color:var(--ms-nuit);background:#fff;border:1px solid var(--ms-trait);white-space:nowrap;transition:background .2s,color .2s}
.ms-choix label + input + label{margin-left:-1px}
.ms-choix label:first-of-type{border-radius:4px 0 0 4px}
.ms-choix label:last-of-type{border-radius:0 4px 4px 0}
.ms-choix label:hover{background:var(--ms-ciel)}
.ms-choix .btn-check:checked + label{background:var(--ms-nuit);border-color:var(--ms-nuit);color:#fff}
.ms-choix .btn-check:checked + label i{color:var(--ms-or)}
.ms-choix label i{color:var(--ms-bleu);font-size:1.15rem}
.ms-choix .btn-check:focus-visible + label{outline:3px solid var(--ms-or);outline-offset:2px}
.was-validated .ms-choix:has(:invalid) label{border-color:var(--bs-form-invalid-border-color)}
.was-validated .ms-choix:has(:invalid) ~ .invalid-feedback{display:block}
/* Le récapitulatif ligne par ligne. */
.ms-cmd-lignes{list-style:none;margin:1.2rem 0 0;padding:0;text-align:left;font-size:.92rem;max-height:16rem;overflow:auto}
/* LA BARRE DE DÉFILEMENT DU RÉCAP (abdAllah, 14/10) : fine, translucide sur le bleu, à l'écart des montants. */
.ms-cmd-lignes{padding-right:.7rem;margin-right:-.7rem;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
.ms-cmd-lignes::-webkit-scrollbar{width:4px}
.ms-cmd-lignes::-webkit-scrollbar-track{background:transparent}
.ms-cmd-lignes::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:4px}
.ms-cmd-lignes::-webkit-scrollbar-thumb:hover{background:rgba(232,190,90,.8)}
.ms-cmd-lignes::-webkit-scrollbar-button{display:none;height:0}
.ms-cmd-lignes li{display:flex;justify-content:space-between;gap:1rem;padding:.25rem 0;color:rgba(255,255,255,.85)}
.ms-cmd-lignes b{font-weight:600;color:#fff;white-space:nowrap}
.ms-cmd-note{margin:1rem 0 0;font-size:.82rem;color:rgba(255,255,255,.7)}
/* Le remerciement. */
.ms-cmd-merci{max-width:44rem;margin:0 auto;text-align:center;padding:3rem 2rem;border:1px solid var(--ms-trait);border-radius:10px;background:var(--bs-light)}
.ms-cmd-merci > i{font-size:3.5rem;color:#1E7B4B}
.ms-cmd-merci h2{font-family:var(--ms-titre);font-weight:600;color:var(--ms-nuit);margin:.8rem 0}
.ms-cmd-ref{font-size:1.05rem}
.ms-cmd-ref b{font-family:var(--ms-titre);color:var(--ms-bleu)}
/* Le socle, case cochée d'office, en bleu nuit comme avant (abdAllah, 14/10). */
.ms-cmd-socle{margin-bottom:.7rem}
.ms-cmd-socle input:checked + label{background:var(--ms-nuit);border-color:var(--ms-nuit)}
.ms-cmd-socle input:checked + label span,.ms-cmd-socle input:checked + label b{color:#fff}
.ms-cmd-socle input:checked + label i,.ms-cmd-socle input:checked + label b{color:var(--ms-or)}
.ms-cmd-socle input:checked + label small{color:rgba(255,255,255,.7)}
.ms-cmd-socle label{min-height:0}
/* Le socle coché au survol (abdAllah, 14/10) : le fond clair du survol est gardé, le texte passe en foncé. */
.ms-cmd-socle input:checked + label:hover{background:radial-gradient(#dcebf5 30%,#c2dbea);border-color:var(--ms-nuit)}
.ms-cmd-socle input:checked + label:hover span{color:var(--ms-nuit)}
.ms-cmd-socle input:checked + label:hover small{color:var(--ms-gris)}
.ms-cmd-socle input:checked + label:hover i,.ms-cmd-socle input:checked + label:hover b{color:var(--ms-bleu)}
/* Les étapes se numérotent seules (le bloc « établissement » disparaît pour un client existant) - abdAllah, 14/10. */
.ms-cmd{counter-reset:etape}
.ms-cmd-titre{counter-increment:etape}
.ms-cmd-titre span::before{content:counter(etape)}
.ms-cmd-titre-suite{margin-top:3rem}
#cmdIdentite[hidden] + .ms-cmd-titre-suite{margin-top:0}
.ms-cmd-existant{margin:-.2rem 0 1rem;padding:1.1rem 1.2rem;border:1px solid var(--ms-or);border-radius:8px;background:#FFFBEF}
.ms-cmd-existant-titre{display:flex;align-items:center;gap:.5rem;font-weight:600;color:var(--ms-nuit);margin:0 0 .8rem}
.ms-cmd-existant-titre i{font-size:1.4rem;color:var(--ms-or)}
.ms-cmd-existant .form-text{font-size:.8rem;margin:.25rem 0 0}

/* LA PAGE COMMANDE AU RAYON DES CHAMPS (abdAllah, 14/10) : cadre, modules, socle et bloc client existant à 4 px. */
.ms-form.ms-cmd{border-radius:4px}
.ms-cmd .ms-sim-case label,.ms-cmd .ms-sim-socle,.ms-cmd-existant{border-radius:4px}

/* LE RAPPEL DES DÉPENDANCES (abdAllah, 14/10) : un encadré sous « Les modules », la mention dorée sur la carte. */
.ms-cmd-rappel{display:flex;gap:.8rem;align-items:flex-start;margin:0 0 1rem;padding:.8rem 1rem;border:1px solid var(--ms-or);border-left-width:4px;border-radius:4px;background:#FFFBEF;color:var(--ms-nuit);font-size:.9rem}
.ms-cmd-rappel > i{font-size:1.4rem;color:var(--ms-or);flex:0 0 auto;margin-top:.05rem}
.ms-cmd-rappel p{margin:0 0 .15rem}
.ms-cmd-rappel b{font-weight:600}
.ms-cmd-rappel .ms-cmd-rappel-note{margin:.3rem 0 0;color:#6b5114;font-size:.85rem}
.ms-cmd .ms-sim-case label small.ms-cmd-dep{color:#8a6a12;font-weight:400;font-size:.72rem;line-height:1.3;margin-top:.1rem}
.ms-cmd .ms-cmd-dep i{color:var(--ms-or);font-size:.9em;vertical-align:-.05em}
.ms-cmd .ms-sim-case input:checked + label small.ms-cmd-dep{color:#6b5114}

/* LE RÉCAP EN UNE COLONNE (abdAllah, 14/10) : sous le formulaire, la porte garde une largeur mesurée, centrée. */
@media (max-width:991.98px){
  .ms-cmd .ms-sim-resultat{max-width:28rem;width:100%;margin:0 auto}
}

/* LES ERREURS SOUS LES CHAMPS APRÈS UN REFUS DU SERVEUR, ET LE MODULE MANQUANT (abdAllah, 14/10). */
.ms-choix.is-invalid label{border-color:var(--bs-form-invalid-border-color)}
.ms-cmd-erreur{margin:.9rem 0 0;padding:.7rem 1rem;border:1px solid var(--bs-form-invalid-border-color);border-radius:4px;background:#FDF0EF;color:var(--bs-form-invalid-color);font-size:.9rem}
.ms-cmd-erreur[hidden]{display:none}

/* LES DEUX CASES DE L'ENVOI AUX COULEURS DU SITE (abdAllah, 14/10) : contour bleu, cochée dorée, coche bleu nuit. */
.ms-cmd .form-check .form-check-input[type=checkbox]{width:1.15em;height:1.15em;margin-top:.2em;border:1.5px solid var(--ms-bleu);border-radius:4px;cursor:pointer}
.ms-cmd .form-check .form-check-input[type=checkbox]:checked{background-color:var(--ms-or);border-color:var(--ms-or);
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2306263a' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")}
.ms-cmd .form-check .form-check-input[type=checkbox]:focus{box-shadow:0 0 0 .2rem rgba(224,179,79,.35);border-color:var(--ms-or)}
.ms-cmd .form-check .form-check-label{cursor:pointer;color:var(--ms-nuit)}
.ms-cmd .form-check .form-check-label a{color:var(--ms-bleu);font-weight:600}
.was-validated .ms-cmd .form-check .form-check-input[type=checkbox]:valid,.ms-cmd.was-validated .form-check .form-check-input[type=checkbox]:valid{border-color:var(--ms-or)}
.ms-cmd.was-validated .form-check .form-check-input[type=checkbox]:valid ~ .form-check-label{color:var(--ms-nuit)}
.ms-cmd .form-check .form-check-input[type=checkbox].is-invalid,.ms-cmd.was-validated .form-check .form-check-input[type=checkbox]:invalid{border-color:var(--bs-form-invalid-border-color)}
/* LES CHAMPS REFUSÉS PAR LE SERVEUR (abdAllah, 14/10) : contour rouge, icône comprise. */
.ms-form .form-control.is-invalid{border-color:var(--bs-form-invalid-border-color)}
.ms-form .input-group:has(.is-invalid) .input-group-text{border-color:var(--bs-form-invalid-border-color)}
/* LE TITRE DU REMERCIEMENT SUR UNE LIGNE (abdAllah, 14/10) : plus petit, sans retour à la ligne sur grand écran. */
.ms-cmd-merci h2{font-size:clamp(1.2rem,2.2vw,1.55rem)}
@media (min-width:768px){.ms-cmd-merci h2{white-space:nowrap}}
/* PAS ENCORE DE NOM DE DOMAINE (abdAllah, 14/10). */
.ms-cmd-sans-domaine{margin:.5rem 0 0;padding:.6rem .9rem;border:1px solid var(--ms-or);border-radius:4px;background:#FFFBEF;color:#6b5114;font-size:.88rem}
.ms-cmd-sans-domaine i{color:var(--ms-or);font-size:1.1rem;vertical-align:-.15em;margin-right:.2rem}
.ms-cmd-sans-domaine[hidden]{display:none}
#domaine:disabled{background:#F2F5F7}

/* LE TYPE ENCADRÉ D'ICÔNES (abdAllah, 14/10), comme dans LICENCES : mosquée à gauche, association à droite,
   les deux choix au milieu, d'un seul tenant. */
.ms-type-groupe{flex-wrap:wrap}
.ms-type-groupe>.ms-choix{flex:1 1 0;min-width:0;margin-left:-1px}
.ms-type-groupe .ms-choix label{border-radius:0!important;min-width:0}
.ms-type-groupe>.ms-type-droite{border-radius:0 4px 4px 0!important;margin-left:-1px}
.ms-type-groupe>.input-group-text:first-child{border-radius:4px 0 0 4px!important}
.ms-type-groupe:has(.ms-choix.is-invalid) .input-group-text,.was-validated .ms-type-groupe:has(:invalid) .input-group-text{border-color:var(--bs-form-invalid-border-color)}
.was-validated .ms-type-groupe:has(:invalid)>.invalid-feedback{display:block}
/* Le choix fait, l'icône de son côté passe en doré (abdAllah, 14/10). */
/* Les icônes gardent la bordure des choix, même au focus (le bleu du focus ne vaut que pour un champ texte). */
.ms-form .ms-type-groupe:focus-within>.input-group-text{border-color:var(--ms-trait)}
.ms-form .ms-type-groupe:has(input[value="mosquee"]:checked)>.input-group-text:first-child,
.ms-form .ms-type-groupe:has(input[value="association"]:checked)>.ms-type-droite{background:var(--ms-or);border-color:var(--ms-or)}
.ms-type-groupe:has(input[value="mosquee"]:checked)>.input-group-text:first-child i,
.ms-type-groupe:has(input[value="association"]:checked)>.ms-type-droite i{color:var(--ms-nuit)}