.mobile-menu-btn,
.mobile-side-menu,
.mobile-menu-overlay{
  display:none;
}

@media(max-width:640px){

  .desktop-only{
    display:none !important;
  }

  .premium-hero-top{
    display:grid;
    grid-template-columns:42px 1fr auto;
    align-items:center;
    gap:10px;
    margin-bottom:24px;
  }

  /* Le sélecteur de langue reste visible dans l'en-tête sur mobile,
     il n'est plus caché dans le menu latéral. */
  .premium-hero .lang-toggle-v2.header-lang{
    display:inline-flex !important;
    justify-self:end;
    padding:3px;
    border:1px solid #dce7f5;
    border-radius:999px;
    background:#f3f7fc;
    box-shadow:none;
  }

  .premium-hero .lang-toggle-v2.header-lang button{
    min-width:40px;
    height:32px;
    padding:0 9px;
    border:none;
    border-radius:999px;
    background:transparent;
    color:var(--text-muted);
    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    transition:background .15s ease,color .15s ease;
  }

  .premium-hero .lang-toggle-v2.header-lang button.active{
    background:linear-gradient(135deg,#1976e5,#0f5fc4);
    color:#fff;
    box-shadow:0 5px 12px rgba(20,108,218,.22);
  }

  .premium-brand{
    justify-self:center;
    min-width:0;
  }

  .premium-brand .hero-logo{
    height:34px;
    max-width:125px;
  }

  .mobile-menu-btn{
    display:flex;
    width:42px;
    height:42px;
    padding:0;
    border:0;
    border-radius:12px;
    background:#ffffff;
    color:var(--blue-deep);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    cursor:pointer;
    box-shadow:0 5px 16px rgba(15,82,168,.10);
  }

  .mobile-menu-btn span{
    width:20px;
    height:2px;
    border-radius:2px;
    background:currentColor;
    transition:.2s ease;
  }

  .mobile-menu-overlay{
    display:block;
    position:fixed;
    inset:0;
    z-index:900;
    background:rgba(7,24,47,.45);
    opacity:0;
    visibility:hidden;
    transition:.25s ease;
    backdrop-filter:blur(2px);
  }

  .mobile-menu-overlay.open{
    opacity:1;
    visibility:visible;
  }

  .mobile-side-menu{
    display:flex;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    z-index:901;
    width:min(84vw,320px);
    padding:20px;
    background:#ffffff;
    box-shadow:20px 0 50px rgba(8,32,66,.22);
    flex-direction:column;
    transform:translateX(-105%);
    transition:transform .28s cubic-bezier(.22,.8,.25,1);
  }

  .mobile-side-menu.open{
    transform:translateX(0);
  }

  .mobile-menu-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:18px;
    border-bottom:1px solid var(--border-soft);
  }

  .mobile-menu-title{
    color:var(--blue-deep);
    font-family:'Space Grotesk',sans-serif;
    font-size:22px;
    font-weight:700;
  }

  .mobile-menu-close{
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    background:var(--panel);
    color:var(--text-muted);
    font-size:25px;
    line-height:1;
    cursor:pointer;
  }

  .mobile-menu-nav{
    display:grid;
    gap:10px;
    margin-top:22px;
  }

  .mobile-menu-item{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:52px;
    padding:0 15px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#ffffff;
    color:var(--text);
    font-size:14px;
    font-weight:700;
    text-decoration:none;
  }

  .mobile-menu-item svg{
    width:21px;
    height:21px;
    color:var(--blue);
  }

  .mobile-menu-item-primary{
    background:linear-gradient(135deg,#1976e5,#0f5fc4);
    color:#ffffff;
    border-color:transparent;
    box-shadow:0 12px 24px rgba(20,108,218,.22);
  }

  .mobile-menu-item-primary svg{
    color:#ffffff;
  }

  .mobile-menu-kicker{
    margin-bottom:3px;
    color:var(--blue);
    font:700 10px "JetBrains Mono";
    letter-spacing:.12em;
  }

  .mobile-menu-info{
    margin-top:24px;
    padding:16px;
    border:1px solid var(--border-soft);
    border-radius:14px;
    background:var(--panel);
  }

  .mobile-menu-info-title{
    margin-bottom:5px;
    color:var(--blue-deep);
    font-weight:800;
    font-size:13px;
  }

  .mobile-menu-info-text{
    color:var(--text-muted);
    font-size:12px;
    line-height:1.55;
  }

  .mobile-whatsapp{
    margin-top:auto;
    min-height:48px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    background:#1fae5a;
    color:#ffffff;
    font-weight:700;
    text-decoration:none;
  }

  .mobile-whatsapp svg{
    width:20px;
    height:20px;
    flex-shrink:0;
  }

  body.menu-open{
    overflow:hidden;
  }
}

.suivre-devis-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  min-height:38px;
  padding:0 14px;

  border:1px solid #d7e4f5;
  border-radius:999px;

  background:#ffffff;
  color:var(--blue);

  font-size:12px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;

  box-shadow:0 5px 14px rgba(20,108,218,.09);

  transition:
    transform .2s ease,
    background .2s ease,
    color .2s ease,
    border-color .2s ease;
}

.suivre-devis-link svg{
  width:17px;
  height:17px;
  flex-shrink:0;
}

.suivre-devis-link:hover{
  transform:translateY(-1px);
  background:var(--blue);
  color:#ffffff;
  border-color:var(--blue);
}
  :root{
    --bg:#FFFFFF;
    --panel:#F4F8FE;
    --panel-2:#E9F1FC;
    --border:#D7E4F5;
    --border-soft:#E9F1FC;
    --blue:#146CDA;
    --blue-deep:#0F52A8;
    --blue-soft:#5B9BF0;
    --text:#0F1F33;
    --text-muted:#5C7189;
    --text-faint:#93A6B8;
    --radius:12px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
    padding:28px 20px 60px;
    min-height:100vh;
  }
  /* Sur l'écran d'accueil (avant "Commencer"), on ne force plus la pleine hauteur —
     ça évite le grand espace vide sous la carte hero, mobile comme desktop. */
  body:not(.wizard-started){
    min-height:auto;
    padding-bottom:28px;
  }
  .wrap{max-width:1180px;margin:0 auto;}
  html[dir="rtl"] body{font-family:'Cairo',sans-serif;}
  html[dir="rtl"] .eyebrow, html[dir="rtl"] .pill, html[dir="rtl"] .wizard-step-label,
  html[dir="rtl"] .field-label, html[dir="rtl"] .running-total strong{font-family:'Cairo',sans-serif;}
  html[dir="rtl"] .panel-title{font-family:'Cairo',sans-serif;letter-spacing:0;}
  html[dir="rtl"] .cam-split-head, html[dir="rtl"] .checkline, html[dir="rtl"] .wizard-nav-row,
  html[dir="rtl"] .hud-topbar, html[dir="rtl"] .acc-row, html[dir="rtl"] header, html[dir="rtl"] .brand{
    flex-direction:row-reverse;
  }
  html[dir="rtl"] .trust-bar span{flex-direction:row-reverse;}
  html[dir="rtl"] .stepper{flex-direction:row-reverse;}
  html[dir="rtl"] .req-mark{margin-right:3px;margin-left:0;}
  html[dir="rtl"] .hud-item, html[dir="rtl"] .qi-val{text-align:left;}
  html[dir="rtl"] .night-demo{flex-direction:row-reverse;text-align:right;}
  .lang-toggle{
    display:flex;border:1px solid var(--border);border-radius:20px;overflow:hidden;
    font-family:'Inter',sans-serif;font-size:11px;font-weight:700;margin-left:10px;
  }
  .lang-toggle button{
    padding:6px 12px;border:none;background:#fff;color:var(--text-muted);cursor:pointer;
  }
  .lang-toggle button.active{background:var(--blue);color:#fff;}
  .trust-bar{
    display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:center;
    padding:10px 12px;margin-bottom:14px;background:var(--panel);border:1px solid var(--border-soft);
    border-radius:var(--radius);max-width:640px;margin-left:auto;margin-right:auto;
  }
  .trust-bar span{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-muted);font-weight:600;white-space:nowrap;}
  .trust-bar svg{width:13px;height:13px;color:var(--blue);flex-shrink:0;}
  @media(max-width:480px){.trust-bar{gap:7px 12px;} .trust-bar span{font-size:10px;}}
  .premium-hero {
    position: relative; overflow: hidden; max-width: 1040px; margin: 0 auto 24px;
    padding: 30px 34px 0; text-align: left;
    background: radial-gradient(circle at 92% 20%, rgba(20,108,218,.13), transparent 29%), linear-gradient(135deg,#ffffff 0%,#ffffff 58%,#f1f7ff 100%);
    border: 1px solid var(--border-soft); border-radius: 24px;
    box-shadow: 0 20px 55px rgba(15,82,168,.08), 0 3px 12px rgba(15,31,51,.04);
  }
  .premium-hero::before {content:"";position:absolute;top:-140px;right:-90px;width:390px;height:390px;border-radius:50%;border:1px solid rgba(20,108,218,.09);pointer-events:none;}
  .premium-hero::after {content:"";position:absolute;top:84px;right:78px;width:180px;height:180px;background-image:radial-gradient(circle,rgba(20,108,218,.18) 1.3px,transparent 1.3px);background-size:13px 13px;opacity:.55;pointer-events:none;}
  .premium-hero-top {position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:38px;}
  .premium-brand {display:inline-flex;align-items:center;min-width:150px;}
  .premium-brand .hero-logo {display:block;width:auto;height:58px;max-width:230px;object-fit:contain;}
  .premium-brand .hero-logo-fallback {margin:0;}
  .premium-hero-content {position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(280px,.82fr);gap:38px;align-items:center;padding-bottom:36px;}
  .premium-hero-copy {max-width:650px;}
  .premium-eyebrow {display:inline-flex;align-items:center;gap:9px;min-height:36px;padding:0 14px;margin-bottom:20px;color:var(--blue-deep);background:#edf5ff;border:1px solid #dcecff;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;}
  .premium-eyebrow svg {width:18px;height:18px;color:var(--blue);}
  .premium-title {margin:0;max-width:700px;color:#102b4d;font-family:'Space Grotesk',sans-serif;font-size:clamp(34px,4.6vw,56px);font-weight:700;line-height:1.06;letter-spacing:-.035em;}
  .premium-title strong {display:block;color:var(--blue);font-weight:700;}
  .premium-description {max-width:590px;margin:24px 0 0;color:var(--text-muted);font-size:17px;line-height:1.7;}
  .premium-mobile-cta {display:inline-flex;align-items:center;gap:9px;margin-top:23px;color:var(--blue-deep);font-size:13px;font-weight:700;}
  .premium-status-dot {width:9px;height:9px;background:#24a866;border-radius:50%;box-shadow:0 0 0 5px rgba(36,168,102,.13);}
  .premium-hero-visual {position:relative;min-height:280px;display:flex;align-items:center;justify-content:center;}
  .visual-orbit {position:absolute;border:1px solid rgba(20,108,218,.13);border-radius:50%;}
  .orbit-one {width:270px;height:270px;}
  .orbit-two {width:205px;height:205px;}
  .visual-badge {position:absolute;z-index:5;display:flex;align-items:center;gap:8px;min-height:43px;padding:8px 13px;color:#263f5c;background:rgba(255,255,255,.93);border:1px solid #e0ebf8;border-radius:13px;box-shadow:0 12px 30px rgba(15,82,168,.12);backdrop-filter:blur(8px);font-size:11px;font-weight:700;}
  .visual-badge svg {width:20px;height:20px;color:var(--blue);}
  .visual-badge-top {top:22px;right:0;}
  .visual-badge-bottom {bottom:22px;left:0;}
  .premium-trust-grid {position:relative;z-index:4;display:grid;grid-template-columns:repeat(4,1fr);margin:0 -34px;background:rgba(248,251,255,.93);border-top:1px solid var(--border);}
  .premium-trust-item {position:relative;display:flex;align-items:center;justify-content:center;gap:11px;min-height:88px;padding:16px;color:#29435f;text-align:center;font-size:12px;font-weight:700;line-height:1.4;}
  .premium-trust-item:not(:last-child)::after {content:"";position:absolute;top:21px;right:0;width:1px;height:46px;background:var(--border);}
  .premium-trust-icon {display:inline-flex;align-items:center;justify-content:center;width:37px;height:37px;flex:0 0 37px;color:var(--blue);background:#eaf4ff;border-radius:12px;}
  .premium-trust-icon svg {width:20px;height:20px;}
  .premium-hero .lang-toggle-v2 {display:inline-flex;padding:4px;background:#f3f7fc;border:1px solid #dce7f5;border-radius:999px;box-shadow:none;}
  .premium-hero .lang-toggle-v2 button {min-width:58px;height:38px;padding:0 15px;border-radius:999px;font-size:12.5px;font-family:'Inter',sans-serif;font-weight:700;border:none;background:transparent;color:var(--text-muted);cursor:pointer;transition:all .15s;}
  .premium-hero .lang-toggle-v2 button.active {background:linear-gradient(135deg,#1976e5,#0f5fc4);color:#fff;box-shadow:0 7px 16px rgba(20,108,218,.22);}
  @media (max-width:850px) {
    .premium-hero {padding:25px 25px 0;}
    .premium-hero-content {grid-template-columns:minmax(0,1.1fr) minmax(230px,.9fr);gap:20px;}
    .premium-title {font-size:clamp(32px,5.4vw,46px);}
    .premium-description {font-size:15.5px;}
    .premium-hero-visual {min-height:240px;}
    .premium-trust-grid {margin:0 -25px;}
    .premium-trust-item {flex-direction:column;gap:8px;min-height:104px;}
  }
  @media (max-width:640px) {
    .premium-hero {padding:21px 19px 0;border-radius:20px;}
    .premium-hero::before {top:-150px;right:-180px;}
    .premium-hero::after {top:140px;right:-20px;width:130px;height:160px;opacity:.35;}
    .premium-hero-top {margin-bottom:30px;}
    .premium-brand {min-width:0;}
    .premium-brand .hero-logo {height:43px;max-width:155px;}
    .premium-hero .lang-toggle-v2 button {min-width:46px;height:35px;padding:0 10px;font-size:11px;}
    .premium-hero-content {display:block;padding-bottom:28px;}
    .premium-eyebrow {min-height:32px;padding:0 11px;margin-bottom:17px;font-size:9.5px;letter-spacing:.06em;}
    .premium-eyebrow svg {width:16px;height:16px;}
    .premium-title {max-width:100%;font-size:clamp(30px,9vw,42px);line-height:1.08;letter-spacing:-.03em;}
    .premium-description {margin-top:20px;font-size:14.5px;line-height:1.6;}
    .premium-mobile-cta {margin-top:20px;font-size:11.5px;}
    .premium-hero-visual {display:none;}
    .premium-trust-grid {grid-template-columns:1fr 1fr;margin:0 -19px;}
    .premium-trust-item {min-height:100px;padding:12px 10px;flex-direction:column;gap:8px;font-size:10.5px;}
    .premium-trust-item:nth-child(2)::after {display:none;}
    .premium-trust-item:nth-child(-n+2) {border-bottom:1px solid var(--border);}
    .premium-trust-icon {width:34px;height:34px;flex-basis:34px;}
    .premium-trust-icon svg {width:18px;height:18px;}
  }
  html[dir="rtl"] .premium-hero {text-align:right;}
  html[dir="rtl"] .premium-hero-top {flex-direction:row-reverse;}
  html[dir="rtl"] .premium-hero-content {direction:rtl;}
  html[dir="rtl"] .premium-eyebrow {flex-direction:row-reverse;}
  html[dir="rtl"] .premium-title {font-family:'Cairo',sans-serif;letter-spacing:0;line-height:1.25;}
  html[dir="rtl"] .premium-description {font-family:'Cairo',sans-serif;}
  html[dir="rtl"] .premium-mobile-cta {flex-direction:row-reverse;}
  html[dir="rtl"] .premium-trust-item {direction:rtl;}
  html[dir="rtl"] .visual-badge {flex-direction:row-reverse;}
  .hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px;}
  .hero-start-btn{appearance:none;border:0;border-radius:14px;background:linear-gradient(135deg,#1976e5,#0f5fc4);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:50px;padding:0 22px;font-family:'Inter',sans-serif;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 12px 28px rgba(20,108,218,.25);transition:transform .18s ease,box-shadow .18s ease,background .18s ease;}
  .hero-start-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(20,108,218,.31);background:linear-gradient(135deg,#2380ee,#0d56b5);}
  .hero-start-btn:active{transform:translateY(0);}
  .hero-start-btn svg{width:18px;height:18px;transition:transform .18s ease;}
  .hero-start-btn:hover svg{transform:translateX(3px);}
  html[dir="rtl"] .hero-start-btn svg{transform:rotate(180deg);}
  html[dir="rtl"] .hero-start-btn:hover svg{transform:rotate(180deg) translateX(3px);}
  .camera-3d-scene{position:relative;width:350px;height:270px;display:flex;align-items:center;justify-content:center;perspective:1000px;filter:drop-shadow(0 24px 24px rgba(15,82,168,.18));}
  .camera-halo{position:absolute;width:245px;height:245px;border-radius:50%;background:radial-gradient(circle,rgba(54,120,229,.24) 0%,rgba(54,120,229,.10) 38%,rgba(54,120,229,0) 72%);animation:cameraHalo 3.6s ease-in-out infinite;}
  .camera-3d{position:relative;width:245px;height:110px;transform-style:preserve-3d;transform:rotateX(-9deg) rotateY(-18deg) rotateZ(-2deg);animation:cameraFloat 4.2s ease-in-out infinite;}
  .camera-body{position:absolute;left:18px;top:20px;width:178px;height:78px;border-radius:32px 24px 24px 32px;background:linear-gradient(145deg,#fefefe 5%,#e4ecf8 42%,#b9c9df 100%);border:1px solid rgba(105,133,170,.38);box-shadow:inset 0 5px 12px rgba(255,255,255,.9),inset 0 -8px 16px rgba(62,92,132,.13),0 12px 25px rgba(16,55,105,.18);}
  .camera-body::before{content:"";position:absolute;inset:8px 10px;border-radius:26px 19px 19px 26px;border:1px solid rgba(255,255,255,.72);pointer-events:none;}
  .camera-face{position:absolute;left:2px;top:14px;width:92px;height:92px;border-radius:50%;background:linear-gradient(145deg,#dae5f4,#879fbe);border:5px solid #f8fbff;box-shadow:0 8px 20px rgba(15,82,168,.26),inset 0 0 0 2px rgba(31,82,150,.2);}
  .camera-lens-ring{position:absolute;inset:14px;border-radius:50%;background:linear-gradient(145deg,#173765,#07162b);box-shadow:inset 0 0 0 6px #315a9b,inset 0 0 22px rgba(0,0,0,.9);}
  .camera-lens{position:absolute;inset:15px;border-radius:50%;background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.82) 0 5%,transparent 6%),radial-gradient(circle at 55% 60%,#1f68d8 0 14%,#0c2a56 15% 39%,#020713 40% 100%);box-shadow:0 0 18px rgba(40,117,236,.65);}
  .camera-tail{position:absolute;right:8px;top:38px;width:70px;height:43px;background:linear-gradient(145deg,#dfe8f5,#9fb3cf);clip-path:polygon(0 12%,70% 12%,100% 50%,70% 88%,0 88%);border-radius:6px;box-shadow:inset 0 3px 8px rgba(255,255,255,.8),0 8px 18px rgba(15,82,168,.16);}
  .camera-bracket{position:absolute;left:120px;top:-6px;width:64px;height:17px;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,#245bbb,#133f8d);transform:rotate(-4deg);box-shadow:0 5px 10px rgba(15,82,168,.2);}
  .camera-bracket::after{content:"";position:absolute;left:6px;top:-17px;width:11px;height:23px;border-radius:5px 5px 0 0;background:#1d54ae;}
  .camera-brand{position:absolute;left:112px;top:49px;font-family:'Inter',sans-serif;font-size:9px;font-weight:800;letter-spacing:.12em;color:#385a86;opacity:.78;transform:skewX(-5deg);}
  .camera-led{position:absolute;left:148px;top:77px;width:5px;height:5px;border-radius:50%;background:#27b76f;box-shadow:0 0 8px rgba(39,183,111,.9);}
  .camera-shadow{position:absolute;bottom:24px;width:225px;height:30px;border-radius:50%;background:rgba(20,68,130,.13);filter:blur(10px);transform:rotate(-4deg);}
  @keyframes cameraFloat{0%,100%{transform:rotateX(-9deg) rotateY(-18deg) rotateZ(-2deg) translateY(0)}50%{transform:rotateX(-7deg) rotateY(-15deg) rotateZ(-1deg) translateY(-8px)}}
  @keyframes cameraHalo{0%,100%{transform:scale(.96);opacity:.75}50%{transform:scale(1.06);opacity:1}}
  @media (prefers-reduced-motion:reduce){.camera-3d,.camera-halo{animation:none;}}
  @media(max-width:850px){.camera-3d-scene{width:280px;height:230px;transform:scale(.88)}}
  @media(max-width:640px){.hero-actions{margin-top:22px}.hero-start-btn{width:100%;min-height:50px}.premium-mobile-cta{width:100%;}.camera-3d-scene{display:none;}}
  .step-indicator{display:flex;align-items:flex-start;justify-content:space-between;background:#fff;border:1px solid var(--border-soft);border-radius:16px;padding:18px 14px 16px;margin-bottom:22px;overflow-x:auto;}
  body:not(.wizard-started) .step-indicator,
  body:not(.wizard-started) .grid,
  body:not(.wizard-started) .wizard-nav{display:none !important;}

  .sub-section-title{
    font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:var(--blue);margin-bottom:10px;
  }
  .sub-section-title-spaced{margin-top:22px;padding-top:18px;border-top:1px solid var(--border-soft);}
  .si-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;min-width:52px;}
  .si-circle{width:34px;height:34px;border-radius:50%;border:2px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:var(--text-faint);transition:all .2s;}
  .si-step.active .si-circle{border-color:var(--blue);background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(20,108,218,.3);}
  .si-step.done .si-circle{border-color:var(--blue);color:var(--blue);}
  .si-name{font-size:10px;color:var(--text-faint);font-weight:600;text-align:center;white-space:nowrap;}
  .si-step.active .si-name{color:var(--blue-deep);}
  .si-line{flex:1;height:2px;background:var(--border);margin-top:17px;min-width:14px;}
  .si-line.done{background:var(--blue);}
  @media(max-width:640px){ .si-name{display:none;} .step-indicator{padding:14px 10px;} }
  .compact-step-label{display:none;}
  .hero-header.premium-hero.compact {display:flex;align-items:center;justify-content:space-between;max-width:640px;min-height:70px;padding:12px 15px;margin-bottom:16px;background:#fff;border-radius:16px;}
  .hero-header.premium-hero.compact::before,.hero-header.premium-hero.compact::after,.hero-header.premium-hero.compact .premium-hero-content,.hero-header.premium-hero.compact .premium-trust-grid {display:none;}
  .hero-header.premium-hero.compact .premium-hero-top {display:contents;margin:0;}
  .hero-header.premium-hero.compact .premium-brand {min-width:0;flex-shrink:0;order:1;}
  .hero-header.premium-hero.compact .premium-brand .hero-logo {height:32px;max-width:110px;}
  .hero-header.premium-hero.compact .compact-step-label {display:block;order:2;flex:1;padding:0 8px;color:var(--text-muted);text-align:center;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;}
  .hero-header.premium-hero.compact .lang-toggle-v2 {order:3;padding:3px;}
  .hero-header.premium-hero.compact .lang-toggle-v2 button {min-width:40px;height:30px;padding:0 8px;font-size:10.5px;}
  .hero-header.premium-hero.compact .suivre-devis-link{display:none;}
  @media(max-width:640px){
    .hero-header.premium-hero.compact {padding:10px 12px;}
    .hero-header.premium-hero.compact .premium-brand .hero-logo {height:28px;max-width:90px;}
    .hero-header.premium-hero.compact .compact-step-label {font-size:9px;line-height:1.35;}
  }
  html[dir="rtl"] .hero-header.premium-hero.compact {flex-direction:row-reverse;}
  .running-total-v2{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border-soft);}
  .rt-icon{width:36px;height:36px;border-radius:50%;background:var(--panel-2);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
  .rt-label{font-size:11px;color:var(--text-muted);font-weight:600;}
  .rt-value strong{color:var(--blue-deep);font-family:'JetBrains Mono',monospace;font-size:17px;}
  .btn-next-chevron{display:flex;align-items:center;justify-content:center;gap:6px;}
  .btn-next-chevron::after{content:'›';font-size:16px;line-height:1;}
  html[dir="rtl"] .btn-next-chevron::after{content:'‹';}
  .brand-mark{width:36px;height:36px;border:2px solid var(--blue);border-radius:50%;position:relative;flex-shrink:0;}
  .brand-mark::after{content:'';position:absolute;inset:10px;background:var(--blue);border-radius:50%;}
  .admin-toggle{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.05em;background:#fff;border:1px solid var(--blue);color:var(--blue);padding:9px 16px;border-radius:var(--radius);cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .15s, color .15s;}
  .admin-toggle:hover{background:var(--blue);color:#fff;}
  .admin-toggle svg{width:14px;height:14px;}
  .grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:start;max-width:640px;margin:0 auto;}
  .panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px 22px;margin-bottom:16px;}
  .panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
  .panel-title{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:8px;}
  .panel-title::before{content:'';width:5px;height:5px;background:var(--blue);border-radius:50%;}
  .panel-note{font-size:11.5px;color:var(--text-faint);}
  .field{margin-bottom:16px;}
  .field:last-child{margin-bottom:0;}
  .field-label{font-size:12.5px;color:var(--text-muted);margin-bottom:8px;display:flex;justify-content:space-between;}
  .field-label b{color:var(--text);font-weight:600;}
  .stepper{display:flex;align-items:center;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;width:fit-content;background:#fff;}
  .cam-split-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .cam-split-item{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;}
  .cam-split-head{display:flex;align-items:center;gap:6px;margin-bottom:2px;}
  .cam-split-head label{font-size:11.5px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;font-weight:600;}
  .cam-split-head svg{color:var(--blue);}
  .cam-visual{display:none;}
  .cam-visual-icon{width:22px;height:22px;color:var(--blue);flex-shrink:0;}
  .cam-visual-icon .draw-in{stroke-dasharray:80;stroke-dashoffset:80;animation:drawIn 1s ease forwards;}
  @keyframes drawIn{ to{ stroke-dashoffset:0; } }
  @media (prefers-reduced-motion: reduce){ .cam-visual-icon .draw-in{ animation:none; stroke-dashoffset:0; } }
  .cam-caption{font-size:10px;color:var(--text-faint);line-height:1.35;margin-bottom:6px;}
  @media(max-width:420px){.cam-split-row{grid-template-columns:1fr;}}
  .stepper button{background:var(--panel-2);border:none;color:var(--blue);width:36px;height:36px;font-size:16px;cursor:pointer;font-family:'JetBrains Mono',monospace;}
  .stepper button:hover{background:var(--blue);color:#fff;}
  .stepper input{width:56px;text-align:center;background:transparent;border:none;border-left:1px solid var(--border);border-right:1px solid var(--border);color:var(--text);font-family:'JetBrains Mono',monospace;font-size:15px;height:36px;}
  .stepper input:focus{border-color:var(--blue);}
  .pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
  .pill{padding:9px 14px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--text-muted);cursor:pointer;transition:all .12s;user-select:none;display:inline-flex;align-items:center;gap:7px;position:relative;}
  .pill-storage{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 13px;}
  .pill-storage .sub{margin-left:0;}
  .sub-days{display:block;font-family:'Inter',sans-serif;font-size:10px;font-weight:600;color:var(--blue-soft);margin-top:1px;}
  .pill-storage.selected .sub-days{color:var(--blue);}
  .pill:hover{border-color:var(--blue-soft);}
  .pill.selected{border-color:var(--blue);color:var(--blue);background:var(--panel-2);}
  .pill .sub{color:var(--text-faint);margin-left:6px;}
  .pill.selected .sub{color:var(--blue-soft);}
  .pill-icon{width:17px;height:17px;flex-shrink:0;}
  .acc-icon{width:19px;height:19px;flex-shrink:0;color:var(--blue);}
  .reco-badge{
    display:none !important;
  }

  /*
   * Chaque résolution possède maintenant son propre conteneur.
   * Le badge recommandé est indépendant du bouton : il peut afficher
   * tout son texte sans entrer dans le bouton 6MP.
   */
  #resPills{
    align-items:flex-end;
    row-gap:18px;
    overflow:visible;
  }

  .res-pill-wrap{
    position:relative;
    display:inline-flex;
    align-items:center;
    padding-top:0;
    overflow:visible;
  }

  .res-pill-wrap.is-recommended{
    padding-top:15px;
  }

  .res-pill-wrap .res-pill{
    min-width:0;
    justify-content:center;
  }

  .reco-badge-external{
    position:absolute;
    z-index:8;
    left:50%;
    bottom:calc(100% - 18px);
    transform:translateX(-50%);
    display:inline-flex;
    align-items:center;
    gap:4px;
    width:max-content;
    max-width:none;
    padding:4px 9px;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,#2378e1,#115bb9);
    box-shadow:0 5px 13px rgba(20,108,218,.24);
    font-family:'Inter',sans-serif;
    font-size:8px;
    font-weight:800;
    line-height:1;
    letter-spacing:.005em;
    white-space:nowrap;
    pointer-events:none;
  }

  .reco-badge-external::after{
    content:'';
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    border:4px solid transparent;
    border-top-color:#1765c8;
  }

  html[dir="rtl"] .reco-badge-external{
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }

  @media(max-width:520px){
    #resPills{
      gap:9px 7px;
      row-gap:18px;
    }

    .res-pill-wrap.is-recommended{
      padding-top:15px;
    }

    .reco-badge-external{
      padding:4px 7px;
      font-size:7.5px;
    }
  }


  .popular-badge{
    position:absolute;top:-11px;right:8px;
    background:linear-gradient(135deg,#ff8a3d,#e8622a);color:#fff;
    font-family:'Inter',sans-serif;font-size:10px;font-weight:800;padding:4px 10px;
    border-radius:20px;white-space:nowrap;letter-spacing:.01em;
    box-shadow:0 4px 12px rgba(232,98,42,.4);
    display:inline-flex;align-items:center;gap:3px;
    animation:popularPulse 2.2s ease-in-out infinite;
  }
  @keyframes popularPulse{
    0%,100%{transform:scale(1);box-shadow:0 4px 12px rgba(232,98,42,.4);}
    50%{transform:scale(1.06);box-shadow:0 6px 16px rgba(232,98,42,.55);}
  }
  @media (prefers-reduced-motion: reduce){ .popular-badge{animation:none;} }
  html[dir="rtl"] .popular-badge{right:auto;left:8px;}
  .acc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--border-soft);}
  .acc-row:first-child{border-top:none;}
  .acc-row .checkline{padding:0;border-top:none;flex:1;min-width:0;}
  .acc-qty{display:flex;align-items:center;gap:6px;flex-shrink:0;}
  .acc-qty input{width:56px;text-align:center;background:#fff;border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:'JetBrains Mono',monospace;font-size:13px;padding:7px 4px;}
  .acc-qty input:focus{outline:none;border-color:var(--blue);}
  .acc-qty .acc-qty-label{font-size:10.5px;color:var(--text-faint);}
  .dynamic-schema{
  margin-top:14px;
  padding:18px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 8px 28px rgba(15,82,168,.06);
}

.dynamic-schema-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:24px;
}

.dynamic-schema-title{
  color:var(--blue-deep);
  font-size:14px;
  font-weight:700;
}

.dynamic-schema-subtitle{
  margin-top:4px;
  color:var(--text-faint);
  font-size:11px;
}

.dynamic-schema-total{
  display:flex;
  align-items:baseline;
  gap:5px;
  padding:9px 13px;
  background:var(--panel-2);
  border-radius:12px;
  color:var(--blue-deep);
}

.dynamic-schema-total strong{
  font-family:'JetBrains Mono',monospace;
  font-size:20px;
}

.dynamic-schema-total span{
  font-size:10px;
  font-weight:600;
}

.dynamic-schema-canvas{
  display:grid;
  grid-template-columns:
    minmax(150px,1.3fr)
    minmax(55px,.45fr)
    minmax(110px,.9fr)
    minmax(55px,.45fr)
    minmax(105px,.85fr);
  align-items:center;
  gap:12px;
}

.schema-device{
  min-width:0;
  text-align:center;
}

.schema-cameras{
  display:flex;
  justify-content:center;
  gap:12px;
}

.schema-camera-group{
  flex:1;
  min-width:0;
  text-align:center;
  transition:
    opacity .25s ease,
    transform .25s ease;
}

.schema-camera-group.hidden{
  display:none;
}

.schema-device-icon{
  position:relative;
  width:58px;
  height:58px;
  margin:0 auto 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--blue);
  background:linear-gradient(145deg,#f5f9ff,#e7f1ff);
  border:1px solid var(--border);
  border-radius:17px;
  box-shadow:
    0 7px 18px rgba(20,108,218,.10),
    inset 0 1px 0 rgba(255,255,255,.8);
}

.schema-device-icon svg{
  width:34px;
  height:34px;
}

.schema-count-badge{
  position:absolute;
  top:-7px;
  right:-7px;
  min-width:24px;
  height:24px;
  padding:0 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(135deg,#1976e5,#0f5fc4);
  border:3px solid #fff;
  border-radius:999px;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  font-weight:700;
  box-shadow:0 5px 12px rgba(20,108,218,.24);
}

.schema-device-name{
  color:var(--text);
  font-size:11px;
  font-weight:700;
  line-height:1.35;
}

.schema-device-note{
  margin-top:3px;
  color:var(--text-faint);
  font-size:9.5px;
  line-height:1.35;
}

.schema-connection{
  position:relative;
  min-width:35px;
  padding-bottom:21px;
}

.schema-flow-line{
  position:relative;
  height:3px;
  overflow:hidden;
  border-radius:999px;
  background:var(--border);
}

.schema-flow-line::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      90deg,
      var(--blue) 0 8px,
      transparent 8px 15px
    );
  animation:schemaDynamicFlow .9s linear infinite;
}

.schema-flow-label{
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  width:95px;
  color:var(--text-faint);
  font-size:8px;
  text-align:center;
  white-space:nowrap;
}

@keyframes schemaDynamicFlow{
  from{
    transform:translateX(-15px);
  }

  to{
    transform:translateX(0);
  }
}

.schema-power-row{
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:26px;
  padding:13px 15px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--panel);
  transition:
    background .25s ease,
    border-color .25s ease;
}

.schema-power-row.poe-mode{
  background:#eef8ff;
  border-color:#bee0fb;
}

.schema-power-icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:var(--blue);
  background:#fff;
  border-radius:12px;
}

.schema-power-icon svg{
  width:25px;
  height:25px;
}

.schema-power-content{
  flex:1;
  min-width:0;
}

.schema-power-content strong{
  display:block;
  color:var(--text);
  font-size:12px;
}

.schema-power-content span{
  display:block;
  margin-top:3px;
  color:var(--text-faint);
  font-size:10px;
  line-height:1.4;
}

.schema-power-value{
  color:var(--blue-deep);
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}

.schema-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:14px;
}


.dynamic-schema.schema-updated{
  animation:schemaUpdatePulse .35s ease;
}

@keyframes schemaUpdatePulse{
  0%{
    transform:scale(.992);
    opacity:.85;
  }

  100%{
    transform:scale(1);
    opacity:1;
  }
}

@media(max-width:700px){

  .dynamic-schema-canvas{
    grid-template-columns:
      minmax(100px,1fr)
      35px
      minmax(75px,.8fr)
      35px
      minmax(80px,.85fr)
      35px
      minmax(70px,.8fr);
    gap:4px;
  }

  .schema-device-icon{
    width:48px;
    height:48px;
  }

  .schema-device-icon svg{
    width:28px;
    height:28px;
  }

  .schema-device-name{
    font-size:9.5px;
  }

  .schema-device-note,
  .schema-flow-label{
    font-size:7.5px;
  }
}

@media(max-width:520px){

  .dynamic-schema{
    padding:14px 12px;
  }

  .dynamic-schema-head{
    align-items:flex-start;
    margin-bottom:18px;
  }

  .dynamic-schema-canvas{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    overflow:visible;
    padding:0;
  }

  .schema-cameras{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .schema-camera-group{
    padding:12px 8px;
    border:1px solid var(--border);
    border-radius:13px;
    background:var(--panel);
  }

  .schema-camera-group.hidden{
    display:none;
  }

  .schema-device{
    width:100%;
    padding:12px;
    border:1px solid var(--border);
    border-radius:13px;
    background:var(--panel);
  }

  .schema-connection{
    width:100%;
    height:32px;
    padding:0;
    display:flex;
    justify-content:center;
    align-items:center;
  }

  .schema-flow-line{
    width:3px;
    height:30px;
  }

  .schema-flow-line::after{
    background:
      repeating-linear-gradient(
        180deg,
        var(--blue) 0 7px,
        transparent 7px 13px
      );
    animation:schemaDynamicFlowVertical .9s linear infinite;
  }

  .schema-flow-label{
    top:50%;
    left:calc(50% + 12px);
    transform:translateY(-50%);
    width:100px;
    text-align:left;
    font-size:7.5px;
  }

  .schema-power-row{
    margin-top:16px;
    padding:12px;
  }
}

@keyframes schemaDynamicFlowVertical{
  from{
    transform:translateY(-13px);
  }

  to{
    transform:translateY(0);
  }
}

@media(prefers-reduced-motion:reduce){

  .schema-flow-line::after,
  .dynamic-schema.schema-updated{
    animation:none;
  }
}
  .schema-svg{width:100%;height:auto;color:var(--blue-deep);display:block;}
  .schema-label{font-family:'JetBrains Mono',monospace;font-size:8.5px;fill:var(--text-muted);}
  .schema-flow{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-dasharray:4 4;animation:schemaFlow 1.2s linear infinite;}
  @keyframes schemaFlow{ to{ stroke-dashoffset:-16; } }
  @media (prefers-reduced-motion: reduce){ .schema-flow{ animation:none; } }
  .schema-caption{font-size:11px;color:var(--text-faint);line-height:1.6;margin-top:8px;text-align:center;}
  .info-box{margin-top:10px;padding:11px 13px;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);font-size:12px;color:var(--text-muted);line-height:1.6;}
  .info-box b{color:var(--blue-deep);}
  .type-cards-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;}
  .type-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px 10px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;cursor:pointer;transition:border-color .15s, background .15s, transform .15s;position:relative;}
  .type-card:hover{border-color:var(--blue-soft);}
  .type-card.selected{border-color:var(--blue);background:var(--panel-2);animation:selectPulse .25s ease;}
  .type-card-icon svg{width:34px;height:34px;color:var(--blue);}
  .type-card-title{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:13px;color:var(--text);}
  .type-card-caption{font-size:10.5px;color:var(--text-faint);}
  @keyframes selectPulse{0%{transform:scale(.95);}100%{transform:scale(1);}}
  @media (prefers-reduced-motion: reduce){ .type-card.selected{animation:none;} }
  select.nice{width:100%;background:#fff;border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:'JetBrains Mono',monospace;font-size:13px;padding:10px 12px;appearance:none;-webkit-appearance:none;background-repeat:no-repeat;background-position:right 10px center;background-size:16px;}
  select.nice:focus{border-color:var(--blue);}
  select.nice option:disabled{color:#B8C4D0;}
  .checkline{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--border-soft);cursor:pointer;}
  .checkline:first-of-type{border-top:none;}
  .checkline input[type=checkbox]{appearance:none;width:17px;height:17px;border:1.5px solid var(--border);border-radius:3px;background:#fff;position:relative;cursor:pointer;flex-shrink:0;}
  .checkline input[type=checkbox]:checked{border-color:var(--blue);background:var(--blue);}
  .checkline input[type=checkbox]:checked::after{content:'';position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
  .checkline .cl-text{font-size:13px;color:var(--text);}
  .checkline .cl-sub{font-size:11.5px;color:var(--text-faint);margin-top:1px;}


  .ip-included-pack{
    position:relative;
    display:grid;
    grid-template-columns:46px minmax(0,1fr) 30px;
    align-items:center;
    gap:13px;
    margin:10px 0 12px;
    padding:14px 15px;
    overflow:hidden;
    border:1px solid #bcdcf8;
    border-radius:15px;
    background:
      radial-gradient(circle at 94% 5%,rgba(20,108,218,.13),transparent 34%),
      linear-gradient(135deg,#f3f9ff,#eaf5ff);
    box-shadow:0 8px 22px rgba(20,108,218,.08);
  }

  .ip-included-pack[hidden]{display:none !important;}

  .ip-included-pack-icon{
    width:46px;height:46px;
    display:flex;align-items:center;justify-content:center;
    border-radius:14px;color:#fff;
    background:linear-gradient(145deg,#2684ed,#0f5fc4);
    box-shadow:0 8px 18px rgba(20,108,218,.22);
  }

  .ip-included-pack-icon svg{width:24px;height:24px;}
  .ip-included-pack-content{min-width:0;}

  .ip-included-pack-kicker{
    color:var(--blue);
    font-family:'JetBrains Mono',monospace;
    font-size:9px;font-weight:800;
    letter-spacing:.075em;text-transform:uppercase;
  }

  .ip-included-pack-title{
    margin-top:4px;color:var(--blue-deep);
    font-size:12.5px;font-weight:800;line-height:1.4;
  }

  .ip-included-features{
    display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;
  }

  .ip-included-features span{
    display:inline-flex;align-items:center;gap:5px;
    padding:5px 8px;border:1px solid rgba(20,108,218,.14);
    border-radius:999px;background:rgba(255,255,255,.82);
    color:#4d6782;font-size:9.5px;
  }

  .ip-included-features i{color:var(--blue);}

  .ip-included-check{
    width:28px;height:28px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;color:#118452;background:#e5f8ef;
    font-size:14px;font-weight:900;
  }

  html[dir="rtl"] .ip-included-pack{
    grid-template-columns:30px minmax(0,1fr) 46px;
  }
  html[dir="rtl"] .ip-included-pack-icon{grid-column:3;grid-row:1;}
  html[dir="rtl"] .ip-included-pack-content{grid-column:2;grid-row:1;text-align:right;}
  html[dir="rtl"] .ip-included-check{grid-column:1;grid-row:1;}

  @media(max-width:480px){
    .ip-included-pack{
      grid-template-columns:40px minmax(0,1fr) 26px;
      gap:10px;padding:12px;
    }
    .ip-included-pack-icon{width:40px;height:40px;border-radius:12px;}
    .ip-included-pack-title{font-size:11.5px;}
    .ip-included-features{display:grid;grid-template-columns:1fr;gap:5px;}
  }

  .night-demo{
  margin-top:12px;
  padding:0;
  background:transparent;
  border:none;
  border-radius:16px;
  overflow:hidden;
}

.night-demo-scene{
  position:relative;
  width:100%;
  height:180px;
  overflow:hidden;
  border-radius:16px;
  background:#081426;
  box-shadow:
    0 10px 28px rgba(8,20,38,.22),
    0 2px 8px rgba(8,20,38,.12);
  isolation:isolate;
}

.night-demo-scene::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(5,14,29,.05) 35%,
      rgba(5,14,29,.68) 100%
    );
}

.night-demo-scene img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:1;
  transform:scale(1);
  filter:saturate(1) contrast(1.04);
  transition:
    opacity .28s ease,
    transform .8s cubic-bezier(.2,.7,.2,1),
    filter .45s ease;
}

.night-demo:hover .night-demo-scene img{
  transform:scale(1.045);
}

.night-demo:not(.color) .night-demo-scene img{
  filter:grayscale(1) contrast(1.13) brightness(.95);
}

.night-demo.color .night-demo-scene img{
  filter:saturate(1.13) contrast(1.05) brightness(1.02);
}

.night-demo-overlay{
  position:absolute;
  z-index:3;
  left:12px;
  right:12px;
  bottom:11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  pointer-events:none;
}

.night-mode-badge,
.night-tech-badge{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(5,15,31,.66);
  color:#fff;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 5px 14px rgba(0,0,0,.18);
}

.night-mode-badge{
  gap:7px;
  padding:6px 11px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:700;
}

.night-tech-badge{
  justify-content:center;
  min-width:40px;
  padding:6px 10px;
  border-radius:9px;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
}

.night-mode-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#c8d4e4;
  box-shadow:0 0 0 4px rgba(200,212,228,.13);
  transition:all .3s ease;
}

.night-demo.color .night-mode-dot{
  background:#ffd24a;
  box-shadow:
    0 0 0 4px rgba(255,210,74,.15),
    0 0 14px rgba(255,210,74,.75);
}

.night-demo.color .night-mode-badge,
.night-demo.color .night-tech-badge{
  border-color:rgba(255,220,106,.30);
  background:rgba(39,28,5,.61);
}

.night-demo.pop{
  animation:colorvuPremiumPop .44s cubic-bezier(.34,1.56,.64,1);
}

@keyframes colorvuPremiumPop{
  0%{
    opacity:.65;
    transform:translateY(-3px) scale(.985);
  }
  60%{
    opacity:1;
    transform:translateY(1px) scale(1.008);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

#colorvuLine.colorvu-glow{
  animation:colorvuGlow .6s ease;
}

@keyframes colorvuGlow{
  0%{background:transparent;}
  35%{background:#fff3d6;}
  100%{background:transparent;}
}

/* ============================================================
   Message bonus « micro intégré » — affiché quand le client
   coche ColorVu en analogique.
   ============================================================ */
.mic-bonus-alert{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:10px 0 4px;
  padding:13px 14px;
  border-radius:14px;
  border:1px solid #BFE3C9;
  background:linear-gradient(135deg,#F0FBF3 0%,#E6F7EC 100%);
  box-shadow:0 2px 10px rgba(23,124,66,.08);
  overflow:hidden;
  position:relative;
}

.mic-bonus-alert[hidden]{
  display:none !important;
}

.mic-bonus-alert.pop{
  animation:micBonusIn .5s cubic-bezier(.34,1.5,.64,1) both;
}

@keyframes micBonusIn{
  0%{opacity:0;transform:translateY(-8px) scale(.97);}
  60%{opacity:1;transform:translateY(2px) scale(1.01);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}

.mic-bonus-icon{
  flex:0 0 auto;
  width:34px;height:34px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#1E9E5A;
  color:#fff;
  font-size:16px;
  box-shadow:0 0 0 4px rgba(30,158,90,.14);
}

.mic-bonus-alert.pop .mic-bonus-icon{
  animation:micBonusPulse 1.5s ease 2;
}

@keyframes micBonusPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(30,158,90,.14);}
  50%{box-shadow:0 0 0 9px rgba(30,158,90,.05);}
}

.mic-bonus-body{flex:1 1 auto;min-width:0;}

.mic-bonus-title{
  font-size:13.5px;
  font-weight:800;
  color:#0E6B3C;
  line-height:1.3;
}

.mic-bonus-sub{
  margin-top:3px;
  font-size:12px;
  line-height:1.45;
  color:#3F6B52;
}

html[dir="rtl"] .mic-bonus-alert{flex-direction:row-reverse;text-align:right;}

@media (max-width:520px){
  .mic-bonus-sub{font-size:11.5px;}
}

@media (prefers-reduced-motion:reduce){
  .mic-bonus-alert.pop,
  .mic-bonus-alert.pop .mic-bonus-icon{animation:none;}
}

@media (prefers-reduced-motion:reduce){
  .night-demo.pop{
    animation:none;
  }

  .night-demo-scene img{
    transition:none;
  }
}

@media(max-width:480px){
  .night-demo-scene{
    height:155px;
  }

  .night-demo-overlay{
    left:9px;
    right:9px;
    bottom:9px;
  }

  .night-mode-badge{
    font-size:9.5px;
    padding:5px 9px;
  }

  .night-tech-badge{
    min-width:36px;
    font-size:9px;
  }
}
  .req-mark{color:#D64545;font-weight:700;}
  .field-optional{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;background:var(--panel-2);color:var(--text-faint);font-size:9.5px;font-weight:700;letter-spacing:.02em;text-transform:lowercase;vertical-align:middle;}
  html[dir="rtl"] .field-optional{margin-left:0;margin-right:6px;}
  .field-hint{margin-top:6px;color:var(--text-muted);font-size:11px;line-height:1.5;}
  .field-error{display:none;color:#D64545;font-size:11.5px;margin-top:6px;font-family:'JetBrains Mono',monospace;}
  .field-error.show{display:block;}
  input.meters.invalid, textarea.meters.invalid{border-color:#D64545;}
  input.meters, textarea.meters{width:100%;background:#fff;border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:'JetBrains Mono',monospace;font-size:14px;padding:9px 12px;}
  input.meters:focus, textarea.meters:focus{border-color:var(--blue);}
  textarea.meters{font-family:'Inter',sans-serif;resize:vertical;min-height:64px;}
  .volume-slider-wrap{display:flex;align-items:center;gap:12px;margin-top:6px;}
  .volume-value{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;color:var(--blue-deep);min-width:64px;text-align:right;}
  .volume-value small{font-size:12px;color:var(--text-faint);font-weight:600;margin-left:2px;}
  input[type="range"].volume-range{-webkit-appearance:none;appearance:none;flex:1;height:14px;border-radius:7px;outline:none;background:linear-gradient(to right, var(--tier-color, var(--blue)) 0%, var(--tier-color, var(--blue)) var(--fill,20%), var(--panel-2) var(--fill,20%), var(--panel-2) 100%);border:1px solid var(--border);cursor:pointer;transition:background .15s;}
  input[type="range"].volume-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--tier-color, var(--blue));cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:border-color .15s;}
  input[type="range"].volume-range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--tier-color, var(--blue));cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:border-color .15s;}
  input[type="range"].volume-range::-moz-range-track{background:transparent;}
  .meters-tier-label{
    display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:5px 11px;
    border-radius:20px;font-size:11.5px;font-weight:700;
    background:var(--tier-color, var(--panel-2));color:#fff;
    transition:background .2s ease;
  }
  .meters-tier-label::before{content:'';width:6px;height:6px;border-radius:50%;background:#fff;opacity:.8;}
  .install-detail{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-soft);display:none;}
  .install-detail.show{display:block;}
  .static-line{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:13px;}
  .static-line .lbl{color:var(--text-muted);}
  .static-line .val{font-family:'JetBrains Mono',monospace;color:var(--text);}
  .hud-outer{position:sticky;top:20px;}
  .hud{background:#fff;border:1px solid var(--border);border-radius:var(--radius);position:relative;padding:22px;overflow:hidden;box-shadow:0 4px 24px rgba(21,94,171,.07);}
  .corner{position:absolute;width:18px;height:18px;border-color:var(--blue);opacity:.55;}
  .corner.tl{top:10px;left:10px;border-top:2px solid;border-left:2px solid;}
  .corner.tr{top:10px;right:10px;border-top:2px solid;border-right:2px solid;}
  .corner.bl{bottom:10px;left:10px;border-bottom:2px solid;border-left:2px solid;}
  .corner.br{bottom:10px;right:10px;border-bottom:2px solid;border-right:2px solid;}
  .hud-topbar{display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--text-faint);margin-bottom:6px;letter-spacing:.04em;}
  .rec{display:flex;align-items:center;gap:6px;color:var(--blue);}
  .rec-dot{width:7px;height:7px;background:var(--blue);border-radius:50%;animation:blink 1.4s infinite;}
  @keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}}
  .hud-title{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-faint);text-align:center;letter-spacing:.16em;text-transform:uppercase;margin:8px 0 18px;}
  .hud-client{font-size:11.5px;color:var(--text-muted);margin:-4px 0 14px;min-height:14px;}
  .hud-client b{color:var(--text);}
  .hud-items{margin-bottom:4px;}
  .hud-item{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px dashed var(--border-soft);font-size:12.5px;}
  .hud-item:first-child{border-top:none;}
  .hud-item .qi-label{color:var(--text-muted);}
  .hud-item .qi-label small{display:block;color:var(--text-faint);font-size:10.5px;margin-top:2px;}
  .hud-item .qi-val{font-family:'JetBrains Mono',monospace;color:var(--text);white-space:nowrap;}
  .hud-total{margin-top:16px;padding-top:16px;border-top:2px solid var(--border);display:flex;justify-content:space-between;align-items:baseline;}
  .hud-total .tot-label{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--blue);letter-spacing:.12em;text-transform:uppercase;}
  .hud-total .tot-val{font-family:'JetBrains Mono',monospace;font-size:28px;font-weight:700;color:var(--blue-deep);}
  .hud-total .tot-val .cur{font-size:14px;color:var(--blue-soft);margin-left:4px;}
  .hud-footnotes{margin-top:16px;padding-top:14px;border-top:1px solid var(--border-soft);font-size:10.5px;color:var(--text-faint);line-height:1.7;}
  .hud-footnotes div::before{content:'– ';color:var(--text-faint);}

  .audio-badge{
    display:flex;align-items:center;gap:9px;margin-top:14px;padding:10px 13px;
    background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);
    font-size:11.5px;font-weight:600;color:var(--blue-deep);
  }
  .audio-badge svg{width:18px;height:18px;color:var(--blue);flex-shrink:0;}

.hud-faq{margin-top:16px;padding-top:14px;border-top:1px solid var(--border-soft);}
  .hud-faq-title{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:8px;}
  .faq-item{border-bottom:1px solid var(--border-soft);}
  .faq-item:last-child{border-bottom:none;}
  .faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:9px 0;font-size:12.5px;color:var(--text);font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:inherit;}
  .faq-q:hover{color:var(--blue-deep);}
  .faq-q::after{content:'+';font-family:'JetBrains Mono',monospace;color:var(--blue);font-size:14px;flex-shrink:0;transition:transform .2s;}
  .faq-item.open .faq-q::after{content:'–';}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;font-size:11.5px;color:var(--text-muted);line-height:1.6;}
  .faq-item.open .faq-a{max-height:220px;padding-bottom:10px;}
  .hud-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
  .btn-generate{width:100%;padding:15px 12px;font-size:13px;margin-top:6px;box-shadow:0 4px 14px rgba(20,108,218,.28);}
  .btn-generate:disabled{opacity:.65;cursor:default;box-shadow:none;}
  .btn-generate svg{width:16px;height:16px;}
  .generate-status{font-size:11.5px;margin-top:8px;text-align:center;min-height:16px;}
  .generate-status.success{color:#1a9e5a;font-weight:600;}
  .generate-status.error{color:#d1453b;font-weight:600;}
  .btn{flex:1;min-width:110px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.03em;padding:11px 8px;border-radius:var(--radius);cursor:pointer;text-align:center;border:1px solid transparent;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:6px;}
  .btn-primary{background:var(--blue);color:#fff;border-color:var(--blue);}
  .btn-primary:hover{background:var(--blue-deep);}
  .btn-ghost{background:#fff;border-color:var(--border);color:var(--text-muted);}
  .btn-ghost:hover{border-color:var(--blue);color:var(--blue);}
  .btn svg{width:13px;height:13px;}
  .copied-msg{text-align:center;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--blue);margin-top:8px;height:14px;opacity:0;transition:opacity .2s;}
  .copied-msg.show{opacity:1;}
  .hp-field{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible, .pill:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px;}
  .top-progress-wrap{margin:0 0 22px;}
  .top-progress-label{margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted);letter-spacing:.03em;text-align:center;}
  .wizard-nav{display:none;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--border);box-shadow:0 -4px 18px rgba(21,94,171,.08);padding:10px 16px calc(10px + env(safe-area-inset-bottom));z-index:500;}
  .wizard-progress{height:3px;background:var(--border-soft);border-radius:2px;margin-bottom:10px;overflow:hidden;}
  .wizard-progress-bar{height:100%;background:var(--blue);width:20%;transition:width .25s ease;}
  .running-total{text-align:center;font-size:12.5px;color:var(--text-muted);margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border-soft);}
  .running-total strong{color:var(--blue-deep);font-family:'JetBrains Mono',monospace;font-size:15px;}
  body.wizard-active[data-current-step="7"] .running-total{display:none;}
  .wizard-nav-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .wizard-nav-row .btn{flex:0 0 auto;min-width:92px;}
  .wizard-step-label{flex:1;text-align:center;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted);letter-spacing:.03em;}
  body.wizard-active.wizard-started{padding-bottom:150px;}
  body.wizard-active .wizard-step{display:none;}
  body.wizard-active .wizard-step.active-step{display:block;}
  body.wizard-active .wizard-nav{display:block;}
  body.wizard-active .hud-outer{position:static;top:auto;}
  body.wizard-active #configCol .panel{margin-bottom:0;}

  /* =========================================
   ANIMATION FLUIDE DES ÉTAPES
   ========================================= */

body.wizard-active .wizard-step.active-step{
  animation:stepPremiumEnter .42s cubic-bezier(.22,.8,.25,1) both;
}

@keyframes stepPremiumEnter{
  0%{
    opacity:0;
    transform:translateY(18px) scale(.985);
    filter:blur(3px);
  }

  65%{
    opacity:1;
    transform:translateY(-2px) scale(1.002);
    filter:blur(0);
  }

  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

/* Animation légère des éléments internes */
body.wizard-active .wizard-step.active-step .field,
body.wizard-active .wizard-step.active-step .panel-head{
  animation:stepContentEnter .45s ease both;
}

body.wizard-active .wizard-step.active-step .field:nth-child(2){
  animation-delay:.05s;
}

body.wizard-active .wizard-step.active-step .field:nth-child(3){
  animation-delay:.10s;
}

body.wizard-active .wizard-step.active-step .field:nth-child(4){
  animation-delay:.15s;
}

body.wizard-active .wizard-step.active-step .field:nth-child(5){
  animation-delay:.20s;
}

@keyframes stepContentEnter{
  from{
    opacity:0;
    transform:translateY(10px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================================
   ANIMATION DU TOTAL
   ========================================= */

#runningTotalValue,
#totalVal{
  display:inline-block;
  transition:
    transform .25s ease,
    color .25s ease,
    text-shadow .25s ease;
}

#runningTotalValue.total-updated,
#totalVal.total-updated{
  animation:totalPremiumPulse .48s cubic-bezier(.34,1.56,.64,1);
}

@keyframes totalPremiumPulse{
  0%{
    transform:scale(1);
  }

  45%{
    transform:scale(1.13);
    color:#1976e5;
    text-shadow:0 5px 18px rgba(25,118,229,.25);
  }

  100%{
    transform:scale(1);
  }
}

.running-total-v2.total-box-updated{
  animation:totalBoxGlow .55s ease;
}

@keyframes totalBoxGlow{
  0%{
    background:transparent;
  }

  40%{
    background:#edf6ff;
    box-shadow:0 0 0 7px rgba(20,108,218,.06);
  }

  100%{
    background:transparent;
    box-shadow:none;
  }
}

@media (prefers-reduced-motion:reduce){
  body.wizard-active .wizard-step.active-step,
  body.wizard-active .wizard-step.active-step .field,
  body.wizard-active .wizard-step.active-step .panel-head,
  #runningTotalValue.total-updated,
  #totalVal.total-updated,
  .running-total-v2.total-box-updated{
    animation:none;
  }
}

/* ==========================================================
   ÉTAPE 05 — MODALITÉS
   ========================================================== */

.modalities-panel{
  padding:24px;
}

.modalities-panel-head{
  align-items:flex-start;
  gap:20px;
  margin-bottom:20px;
}

.modalities-intro{
  max-width:520px;
  margin:8px 0 0;
  color:var(--text-faint);
  font-size:11.5px;
  line-height:1.55;
}

.modalities-secure-badge{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border:1px solid #d8e8fa;
  border-radius:999px;
  background:#fff;
  color:var(--blue-deep);
  font-size:9.5px;
  font-weight:700;
  white-space:nowrap;
}

.modalities-secure-badge svg{
  width:16px;
  height:16px;
  color:var(--blue);
}

.modalities-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
}

.modality-card{
  position:relative;
  min-width:0;
  min-height:142px;
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:17px;
  background:#fff;
  overflow:hidden;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.modality-card::before{
  content:'';
  position:absolute;
  top:-45px;
  right:-45px;
  width:110px;
  height:110px;
  border-radius:50%;
  background:rgba(20,108,218,.035);
  pointer-events:none;
}

.modality-card:hover{
  transform:translateY(-2px);
  border-color:#a9caf3;
  box-shadow:0 13px 30px rgba(15,82,168,.10);
}

.modality-card-option{
  cursor:pointer;
  padding-right:58px;
}

.modality-input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.modality-checkbox{
  position:absolute;
  top:16px;
  right:16px;

  width:24px;
  height:24px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin:0;

  border:1.7px solid #bfd2ea;
  border-radius:7px;

  background:#fff;
  color:#fff;

  box-shadow:0 4px 10px rgba(20,108,218,.08);

  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.modality-checkbox svg{
  width:14px;
  height:14px;
  opacity:0;
  transform:scale(.6);
  transition:opacity .18s ease,transform .18s ease;
}

.modality-card-option:has(.modality-input:checked){
  border-color:var(--blue);
  background:
    radial-gradient(circle at 95% 8%,rgba(20,108,218,.13),transparent 30%),
    #f5f9ff;
  box-shadow:0 13px 30px rgba(20,108,218,.13);
}

.modality-card-option:has(.modality-input:checked) .modality-checkbox{
  border-color:var(--blue);
  background:var(--blue);
  box-shadow:0 6px 15px rgba(20,108,218,.25);
}

@media(max-width:520px){

  .modality-card-option{
    padding-right:50px;
  }

  .modality-checkbox{
    top:14px;
    right:14px;
    width:22px;
    height:22px;
  }
}

.modality-card-option:has(.modality-input:checked) .modality-checkbox svg{
  opacity:1;
  transform:scale(1);
}

.modality-icon{
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:1px;
  border-radius:15px;
}

.modality-icon svg{
  width:25px;
  height:25px;
}

.modality-icon-blue{
  color:var(--blue);
  background:linear-gradient(145deg,#f4f9ff,#e8f2ff);
  border:1px solid #d9e8fb;
}

.modality-icon-red{
  color:#e22639;
  background:linear-gradient(145deg,#fff7f8,#ffecef);
  border:1px solid #ffd5db;
}

.modality-content{
  flex:1;
  min-width:0;
}

.modality-title-line{
  min-height:25px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}

.modality-title-line strong{
  color:var(--text);
  font-size:13px;
  font-weight:700;
  line-height:1.4;
}

.modality-price{
  display:inline-flex;
  align-items:center;
  padding:4px 7px;
  border-radius:7px;
  background:#edf5ff;
  color:var(--blue);
  font-family:'JetBrains Mono',monospace;
  font-size:9.5px;
  font-weight:700;
  white-space:nowrap;
}

.modality-description{
  display:block;
  margin-top:5px;
  color:var(--text-faint);
  font-size:10.5px;
  line-height:1.55;
}

.modality-small-note{
  display:block;
  margin-top:8px;
  color:var(--text-muted);
  font-size:9px;
  line-height:1.45;
}

.modality-small-note-red{
  color:#a84b56;
}

.modality-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  font-size:8.5px;
  font-weight:800;
  white-space:nowrap;
}

.modality-badge-free{
  color:#118246;
  background:#e8f8ee;
}

.modality-badge-info{
  color:var(--blue-deep);
  background:#eaf3ff;
}

.modality-badge-official{
  color:#bd2032;
  background:#ffedf0;
}

.modality-status-icon{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
}

.modality-status-icon svg{
  width:15px;
  height:15px;
}

.modality-status-success{
  color:#169452;
  background:#e9f8ef;
}

.modality-status-hikvision{
  color:#df2638;
  background:#fff0f2;
}

.modality-option-state{
  display:block;
  margin-top:9px;
  color:var(--blue);
  font-size:9px;
  font-weight:700;
}

.state-checked{
  display:none;
}

.modality-card-option:has(.modality-input:checked) .state-unchecked{
  display:none;
}

.modality-card-option:has(.modality-input:checked) .state-checked{
  display:inline;
}

.hikvision-logo-wrap{
  min-height:27px;
  display:flex;
  align-items:center;
  margin-top:7px;
}

.hikvision-logo{
  display:block;
  width:94px;
  max-height:25px;
  object-fit:contain;
  object-position:left center;
}

.hikvision-logo-fallback{
  display:none;
  align-items:center;
  justify-content:center;
  padding:5px 9px;
  border-radius:6px;
  background:#df2638;
  color:#fff;
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.08em;
}

.modality-card-hikvision{
  border-color:#f0d7dc;
  background:
    radial-gradient(circle at 94% 5%,rgba(222,38,56,.10),transparent 31%),
    linear-gradient(145deg,#fff,#fff9fa);
}

.modality-card-hikvision::before{
  background:rgba(222,38,56,.04);
}

.modality-card-hikvision:hover{
  border-color:#ee9daa;
  box-shadow:0 13px 30px rgba(222,38,56,.09);
}

/* ============================================================
   Localisation du site — visible uniquement quand
   « Étude sur site » est cochée à l'étape 5.
   ============================================================ */
.site-loc{
  /* Dans la grille des modalités : pleine largeur.
     Desktop → placé en dernier (sous les 4 cartes).
     Mobile  → laissé à sa place naturelle, donc juste
     sous la carte « Étude sur site ». */
  grid-column:1 / -1;
  order:99;
  padding:16px 16px 14px;
  border:1px solid #BBD6F5;
  border-radius:16px;
  background:linear-gradient(150deg,#F5FAFF 0%,#EDF5FE 100%);
  box-shadow:0 3px 14px rgba(20,108,218,.07);
}

.site-loc[hidden]{ display:none !important; }

.site-loc.pop{
  animation:siteLocIn .45s cubic-bezier(.34,1.5,.64,1) both;
}

@keyframes siteLocIn{
  0%{opacity:0;transform:translateY(-8px) scale(.985);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}

.site-loc-head{
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin-bottom:13px;
}

.site-loc-icon{
  flex:0 0 auto;
  width:34px;height:34px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue);
  color:#fff;
  box-shadow:0 0 0 4px rgba(20,108,218,.13);
}

.site-loc-icon svg{width:18px;height:18px;}

.site-loc-title{
  font-size:14px;
  font-weight:800;
  color:var(--blue-deep);
  line-height:1.3;
}

.site-loc-sub{
  margin-top:3px;
  font-size:11.5px;
  line-height:1.5;
  color:var(--text-muted);
}

.site-loc-gps{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:12px 14px;
  border:none;
  border-radius:12px;
  background:var(--blue);
  color:#fff;
  font-family:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:background .18s ease,transform .12s ease,box-shadow .18s ease;
  box-shadow:0 4px 14px rgba(20,108,218,.25);
}

.site-loc-gps:hover:not(:disabled){
  background:var(--blue-deep);
  transform:translateY(-1px);
}

.site-loc-gps:disabled{
  opacity:.7;
  cursor:progress;
}

.site-loc-gps svg{width:17px;height:17px;flex:0 0 17px;}

.site-loc-gps.locating svg{animation:siteLocSpin 1.1s linear infinite;}

@keyframes siteLocSpin{to{transform:rotate(360deg);}}

.site-loc-status{
  margin-top:9px;
  font-size:11.5px;
  line-height:1.5;
  font-weight:600;
  display:none;
}

.site-loc-status.show{display:block;}
.site-loc-status.ok{color:#0E6B3C;}
.site-loc-status.err{color:#B4232F;}
.site-loc-status.info{color:var(--text-muted);}

.site-loc-result{
  margin-top:11px;
  border:1px solid #BBD6F5;
  border-radius:13px;
  overflow:hidden;
  background:#fff;
}

.site-loc-result[hidden]{display:none !important;}

.site-loc-map{
  display:block;
  width:100%;
  height:180px;
  border:0;
  background:#E9F1FC;
}

.site-loc-result-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  padding:9px 11px;
  border-top:1px solid var(--border-soft);
  font-size:11px;
}

.site-loc-coords{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  color:var(--text-muted);
  flex:1 1 auto;
  min-width:0;
}

.site-loc-open{
  color:var(--blue);
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}

.site-loc-open:hover{text-decoration:underline;}

.site-loc-clear{
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-muted);
  font-family:inherit;
  font-size:10.5px;
  font-weight:700;
  padding:5px 9px;
  border-radius:8px;
  cursor:pointer;
}

.site-loc-clear:hover{border-color:#E4A6AD;color:#B4232F;}

.site-loc-field{margin-top:11px;}

.site-loc-field .field-label{margin-bottom:5px;}

.site-loc-or{
  margin:13px 0 2px;
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--text-faint);
  font-size:10px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.site-loc-or::before,
.site-loc-or::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:var(--border);
}

.site-loc-note{
  margin-top:11px;
  font-size:10px;
  line-height:1.55;
  color:var(--text-faint);
}

html[dir="rtl"] .site-loc-head{flex-direction:row-reverse;text-align:right;}
html[dir="rtl"] .site-loc-result-row{flex-direction:row-reverse;}

@media (prefers-reduced-motion:reduce){
  .site-loc.pop{animation:none;}
  .site-loc-gps.locating svg{animation:none;}
}

.modalities-footer{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:15px;
  padding:12px 14px;
  border:1px solid var(--border-soft);
  border-radius:13px;
  background:rgba(255,255,255,.65);
  color:var(--text-faint);
  font-size:9.5px;
  line-height:1.55;
}

.modalities-footer-icon{
  width:19px;
  height:19px;
  flex:0 0 19px;
  color:var(--blue);
}

.modalities-footer-icon svg{
  width:100%;
  height:100%;
}

@media(max-width:700px){

  .modalities-panel{
    padding:20px;
  }

  .modalities-panel-head{
    align-items:flex-start;
  }

  .modalities-grid{
    grid-template-columns:1fr;
  }

  /* Une seule colonne : le bloc reprend sa position naturelle,
     c'est-à-dire directement sous « Étude sur site ». */
  .site-loc{
    order:0;
  }

  .modality-card{
    min-height:120px;
  }
}

@media(max-width:520px){

  .modalities-panel{
    padding:17px 14px;
  }

  .modalities-panel-head{
    display:block;
  }

  .modalities-secure-badge{
    margin-top:12px;
  }

  .modalities-grid{
    gap:10px;
  }

  .modality-card{
    min-height:0;
    gap:11px;
    padding:14px 12px;
    border-radius:14px;
  }

  .modality-checkbox{
    width:22px;
    height:22px;
    flex-basis:22px;
    margin-top:10px;
  }

  .modality-icon{
    width:43px;
    height:43px;
    flex-basis:43px;
    border-radius:13px;
  }

  .modality-icon svg{
    width:22px;
    height:22px;
  }

  .modality-title-line strong{
    font-size:12px;
  }

  .modality-description{
    font-size:9.7px;
  }

  .modality-status-icon{
    display:none;
  }

  .hikvision-logo{
    width:82px;
  }
}


/* ======================================================
   STOCKAGE PREMIUM
   ====================================================== */

.storage-section{
  margin-top:22px;
}

.storage-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:13px;
}

.storage-main-label{
  margin-bottom:4px;
  color:var(--text);
  font-size:13px;
  font-weight:700;
}

.storage-section-help{
  max-width:470px;
  color:var(--text-faint);
  font-size:10.5px;
  line-height:1.5;
}

.storage-camera-summary{
  flex:0 0 auto;
  display:flex;
  align-items:baseline;
  gap:5px;
  padding:8px 11px;
  border:1px solid var(--border);
  border-radius:11px;
  background:#fff;
  color:var(--blue-deep);
}

.storage-camera-summary span{
  font-family:'JetBrains Mono',monospace;
  font-size:17px;
  font-weight:700;
}

.storage-camera-summary small{
  color:var(--text-muted);
  font-size:9px;
  font-weight:700;
}

.storage-recommendation{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:14px;
  padding:12px 14px;
  border:1px solid #bcd8fb;
  border-radius:14px;
  background:
    radial-gradient(
      circle at 95% 10%,
      rgba(20,108,218,.12),
      transparent 30%
    ),
    #f4f9ff;
}

.storage-recommendation-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#fff;
  color:var(--blue);
  box-shadow:0 7px 16px rgba(20,108,218,.11);
}

.storage-recommendation-icon svg{
  width:20px;
  height:20px;
}

.storage-recommendation-content{
  min-width:0;
}

.storage-recommendation-content strong{
  display:block;
  color:var(--blue-deep);
  font-size:11.5px;
}

.storage-recommendation-content span{
  display:block;
  margin-top:3px;
  color:var(--text-muted);
  font-size:9.5px;
  line-height:1.4;
}

.storage-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
}

.storage-card{
  position:relative;
  min-width:0;
  min-height:176px;
  display:flex;
  flex-direction:column;
  padding:16px;
  border:1px solid var(--border);
  border-radius:17px;
  background:#fff;
  color:var(--text);
  text-align:left;
  cursor:pointer;
  overflow:hidden;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.storage-card:hover{
  transform:translateY(-2px);
  border-color:#a8caf5;
  box-shadow:0 13px 28px rgba(15,82,168,.10);
}

.storage-card.selected{
  border-color:var(--blue);
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(20,108,218,.14),
      transparent 34%
    ),
    #f5f9ff;
  box-shadow:0 13px 30px rgba(20,108,218,.14);
}

.storage-card-top{
  display:flex;
  align-items:center;
  gap:11px;
  padding-right:30px;
}

.storage-card-icon{
  width:45px;
  height:45px;
  flex:0 0 45px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #d8e8fb;
  border-radius:14px;
  background:linear-gradient(145deg,#f5f9ff,#e8f2ff);
  color:var(--blue);
}

.storage-card-icon svg{
  width:24px;
  height:24px;
}

.storage-capacity-block{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.storage-capacity{
  color:var(--text);
  font-family:'JetBrains Mono',monospace;
  font-size:14px;
  line-height:1.3;
}

.storage-price{
  margin-top:4px;
  color:var(--text-muted);
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;
  font-weight:600;
}

.storage-divider{
  height:1px;
  margin:13px 0 11px;
  background:var(--border-soft);
}

.storage-days{
  display:flex;
  align-items:baseline;
  gap:6px;
  color:var(--blue);
}

.storage-days strong{
  font-family:'JetBrains Mono',monospace;
  font-size:20px;
}

.storage-days span{
  color:var(--blue-deep);
  font-size:10.5px;
  font-weight:700;
}

.storage-usage-label{
  margin-top:7px;
  color:var(--text-faint);
  font-size:9.5px;
  line-height:1.45;
}

.storage-recommended-badge{
  position:absolute;
  top:0;
  right:0;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:5px 9px;
  border-radius:0 16px 0 11px;
  background:linear-gradient(135deg,#146cda,#0f52a8);
  color:#fff;
  font-size:7.8px;
  font-weight:800;
}

.storage-recommended-badge svg{
  width:10px;
  height:10px;
}

.storage-check{
  position:absolute;
  right:12px;
  bottom:12px;
  width:25px;
  height:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  opacity:0;
  transform:scale(.65);
  box-shadow:0 6px 14px rgba(20,108,218,.24);

  transition:
    opacity .18s ease,
    transform .18s ease;
}

.storage-check svg{
  width:14px;
  height:14px;
}

.storage-card.selected .storage-check{
  opacity:1;
  transform:scale(1);
}

/* Sans disque */

.storage-card-no-disk{
  border-style:dashed;
}

.storage-card-no-disk .storage-card-icon{
  color:#bd6c00;
  border-color:#f0d3a2;
  background:#fff7ea;
}

.storage-card-no-disk.selected{
  border-color:#d28a22;
  background:#fffaf1;
}

.storage-card-no-disk.selected .storage-check{
  background:#c87a09;
}

.storage-warning-title{
  color:#a45d00;
  font-size:11.5px;
  font-weight:800;
}

.storage-warning-description{
  margin-top:5px;
  padding-right:20px;
  color:#9b7a4c;
  font-size:9.5px;
  line-height:1.45;
}

.storage-disclaimer{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:12px;
  padding:10px 12px;
  border-radius:11px;
  background:rgba(255,255,255,.65);
  color:var(--text-faint);
  font-size:9px;
  line-height:1.45;
}

.storage-disclaimer svg{
  width:16px;
  height:16px;
  flex:0 0 16px;
  color:var(--blue);
}

/* Mobile */

@media(max-width:520px){

  .storage-section-head{
    gap:10px;
  }

  .storage-section-help{
    font-size:9.5px;
  }

  .storage-camera-summary{
    padding:7px 9px;
  }

  .storage-camera-summary span{
    font-size:15px;
  }

  .storage-recommendation{
    padding:10px 11px;
  }

  .storage-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }

  .storage-card{
    min-height:164px;
    padding:12px 10px;
    border-radius:14px;
  }

  .storage-card-top{
    display:block;
    padding-right:22px;
  }

  .storage-card-icon{
    width:39px;
    height:39px;
    margin-bottom:8px;
    border-radius:12px;
  }

  .storage-card-icon svg{
    width:21px;
    height:21px;
  }

  .storage-capacity{
    font-size:12px;
  }

  .storage-price{
    font-size:10.5px;
  }

  .storage-divider{
    margin:10px 0 8px;
  }

  .storage-days{
    display:block;
  }

  .storage-days strong{
    display:block;
    font-size:17px;
  }

  .storage-days span{
    display:block;
    margin-top:2px;
    font-size:9px;
  }

  .storage-usage-label,
  .storage-warning-description{
    padding-right:17px;
    font-size:8px;
  }

  .storage-recommended-badge{
    max-width:78px;
    padding:5px 7px;
    line-height:1.15;
    text-align:center;
  }

  .storage-check{
    right:8px;
    bottom:8px;
    width:22px;
    height:22px;
  }
}


.seo-content{
  max-width:1040px;
  margin:42px auto 0;
  padding:30px;
  border:1px solid var(--border-soft);
  border-radius:20px;
  background:#fff;
  color:var(--text-muted);
  line-height:1.75;
}

.seo-content h2,
.seo-content h3{
  color:var(--blue-deep);
  font-family:'Space Grotesk',sans-serif;
}

.seo-content h2{
  margin:0 0 14px;
  font-size:26px;
}

.seo-content h2:not(:first-child){
  margin-top:30px;
}

.seo-content h3{
  margin:0 0 9px;
  font-size:17px;
}

.seo-content-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px;
  margin-top:22px;
}

.seo-content-grid article{
  padding:18px;
  border:1px solid var(--border-soft);
  border-radius:15px;
  background:var(--panel);
}

.seo-content ul{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 25px;
}

@media(max-width:700px){
  .seo-content{
    padding:21px 17px;
  }

  .seo-content h2{
    font-size:21px;
  }

  .seo-content-grid,
  .seo-content ul{
    grid-template-columns:1fr;
  }
}

/* Afficher le contenu SEO uniquement sur la page d'accueil */
body.wizard-started .seo-premium{
  display:none !important;
}

.seo-premium{
  max-width:1200px;
  margin:70px auto;
  padding:48px 50px;
  border-radius:28px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border:1px solid #dbe8fb;
  box-shadow:0 25px 60px rgba(30,70,130,.08);
  color:var(--text);
}

.seo-header{
  text-align:center;
  max-width:820px;
  margin:0 auto 42px;
}

.seo-badge{
  display:inline-block;
  padding:7px 15px;
  margin-bottom:16px;
  border-radius:999px;
  border:1px solid #cfe1f8;
  background:#eef5ff;
  color:var(--blue-deep);
  font-size:11px;
  font-weight:800;
  letter-spacing:.03em;
}

.seo-header h2{
  margin:0;
  font-size:34px;
  line-height:1.22;
  font-weight:850;

  color:#0d2744;
  letter-spacing:-.4px;
}

.seo-subtitle{
  margin:16px auto 0;
  max-width:760px;
  font-size:15px;
  line-height:1.72;
  color:#5d6e82;
}

.seo-block{
  margin-top:46px;
}

.seo-block > h3{
  margin:0 0 12px;
  font-size:22px;
  line-height:1.3;
  font-weight:850;
  color:#0d2744;
  letter-spacing:-.2px;
}

.seo-text{
  margin:0 0 20px;
  max-width:900px;
  font-size:14px;
  line-height:1.75;
  color:#5d6e82;
}

.seo-note{
  margin:14px 0 0;
  padding:12px 14px;
  border-left:3px solid var(--blue-soft);
  border-radius:0 10px 10px 0;
  background:#f2f7fe;
  font-size:12.5px;
  line-height:1.65;
  color:#5d6e82;
}

/* ---------- Tableau de prix ---------- */
.seo-table-wrap{
  overflow-x:auto;
  border:1px solid #dbe8fb;
  border-radius:16px;
  background:#fff;
}

.seo-table{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-size:13px;
}

.seo-table th,
.seo-table td{
  padding:13px 15px;
  text-align:left;
  border-bottom:1px solid #edf3fb;
  vertical-align:top;
  line-height:1.55;
}

.seo-table thead th{
  background:#f3f8ff;
  color:#4a5f78;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
}

.seo-table tbody th{
  color:#0d2744;
  font-weight:800;
  width:24%;
}

.seo-table tbody td{
  color:#5d6e82;
}

.seo-table tbody tr:last-child th,
.seo-table tbody tr:last-child td{
  border-bottom:none;
}

.seo-table tbody tr:hover{background:#fafcff;}

.seo-table-price{
  color:var(--blue-deep) !important;
  font-weight:850;
  font-size:14px;
  white-space:nowrap;
}

/* ---------- Cartes technologies ---------- */
.seo-features{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.seo-card{
  padding:24px;
  border:1px solid #e2ecf9;
  border-radius:18px;
  background:#fff;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}

.seo-card:hover{
  transform:translateY(-3px);
  border-color:#c6dcf7;
  box-shadow:0 14px 34px rgba(30,70,130,.09);
}

.seo-icon{
  width:42px;
  height:42px;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#eef5ff;
  color:var(--blue);
}

.seo-icon svg{width:22px;height:22px;}

.seo-card h4{
  margin:0 0 9px;
  font-size:15px;
  line-height:1.35;
  font-weight:800;
  color:#0d2744;
}

.seo-card p{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:#5d6e82;
}

/* ---------- Bénéfices ---------- */
.seo-benefits{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}

.seo-benefit{
  padding:16px;
  border:1px solid #e2ecf9;
  border-radius:14px;
  background:#fff;
}

.seo-benefit strong{
  display:block;
  font-size:13px;
  font-weight:800;
  color:#0d2744;
  line-height:1.35;
}

.seo-benefit small{
  display:block;
  margin-top:5px;
  font-size:11.5px;
  line-height:1.6;
  color:#6f8199;
}

/* ---------- Zones couvertes ---------- */
.seo-zones{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

.seo-zones li{
  padding:7px 13px;
  border:1px solid #dbe8fb;
  border-radius:999px;
  background:#fff;
  font-size:12px;
  font-weight:700;
  color:#4a5f78;
}

/* ---------- FAQ ---------- */
.seo-faq{
  border:1px solid #e2ecf9;
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}

.seo-faq-item{
  border-bottom:1px solid #edf3fb;
}

.seo-faq-item:last-child{border-bottom:none;}

.seo-faq-item summary{
  padding:15px 18px;
  cursor:pointer;
  font-size:14px;
  font-weight:800;
  color:#0d2744;
  line-height:1.45;
  list-style:none;
  position:relative;
  padding-right:44px;
  transition:background .15s ease;
}

.seo-faq-item summary::-webkit-details-marker{display:none;}

.seo-faq-item summary:hover{background:#f8fbff;}

.seo-faq-item summary::after{
  content:"+";
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  color:var(--blue);
  font-size:19px;
  font-weight:700;
  line-height:1;
}

.seo-faq-item[open] summary::after{content:"\2013";}

.seo-faq-item p{
  margin:0;
  padding:0 18px 16px;
  font-size:13px;
  line-height:1.72;
  color:#5d6e82;
}

/* ---------- Bloc final ---------- */
.seo-bottom{
  margin-top:46px;
  padding:32px;
  border-radius:20px;
  border:1px solid #dbe8fb;
  background:linear-gradient(135deg,#f3f8ff,#eaf2fd);
  text-align:center;
}

.seo-bottom h3{
  margin:0 0 14px;
  font-size:24px;
  font-weight:850;
  color:#0d2744;
  letter-spacing:-.2px;
}

.seo-bottom p{
  margin:0 auto;
  max-width:900px;
  font-size:14px;
  line-height:1.78;
  color:#5d6e82;
}

.seo-cta-line{margin-top:22px !important;}

.seo-cta{
  display:inline-block;
  padding:13px 26px;
  border-radius:12px;
  background:var(--blue);
  color:#fff !important;
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(20,108,218,.28);
  transition:background .18s ease,transform .15s ease;
}

.seo-cta:hover{
  background:var(--blue-deep);
  transform:translateY(-1px);
}

html[dir="rtl"] .seo-table th,
html[dir="rtl"] .seo-table td{text-align:right;}

html[dir="rtl"] .seo-note{
  border-left:none;
  border-right:3px solid var(--blue-soft);
  border-radius:10px 0 0 10px;
}

html[dir="rtl"] .seo-faq-item summary{
  padding-right:18px;
  padding-left:44px;
}

html[dir="rtl"] .seo-faq-item summary::after{right:auto;left:18px;}

html[dir="rtl"] .seo-premium,
html[dir="rtl"] .seo-card h4,
html[dir="rtl"] .seo-block > h3,
html[dir="rtl"] .seo-faq-item summary{font-family:'Cairo',sans-serif;}

@media(max-width:900px){
  .seo-premium{
    padding:30px 20px;
    margin:44px auto;
    border-radius:20px;
  }

  .seo-header h2{font-size:26px;}
  .seo-subtitle{font-size:14px;}
  .seo-block{margin-top:36px;}
  .seo-block > h3{font-size:19px;}
  .seo-bottom{padding:24px 18px;}
  .seo-bottom h3{font-size:20px;}

  .seo-features,
  .seo-benefits{
    grid-template-columns:1fr;
  }
}

@media(max-width:520px){
  .seo-benefits{grid-template-columns:repeat(2,minmax(0,1fr));}
  .seo-benefit{padding:13px;}
}

/* ==========================================================
   CORRECTIF FINAL APP.CSS — MOBILE RTL ET ÉTAPE 4
   Placé en fin de fichier pour prendre priorité sur les
   anciennes règles sans modifier le fonctionnement desktop.
   ========================================================== */

/* Sécurité générale contre les débordements horizontaux. */
html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.wrap,
.grid,
#configCol,
.wizard-step,
.panel,
.field,
.panel-head{
  min-width:0;
}

/* Le menu mobile ne doit jamais participer à la largeur de la page. */
.mobile-side-menu{
  box-sizing:border-box;
  position:fixed !important;
  top:0;
  bottom:0;
  width:min(84vw,320px);
  max-width:320px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
}

.mobile-menu-overlay{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
}

/* Français : tiroir à gauche. */
html:not([dir="rtl"]) .mobile-side-menu{
  left:0 !important;
  right:auto !important;
  transform:translateX(-105%) !important;
  box-shadow:20px 0 50px rgba(8,32,66,.22);
}

html:not([dir="rtl"]) .mobile-side-menu.open{
  transform:translateX(0) !important;
}

/* Arabe : tiroir à droite. */
html[dir="rtl"] .mobile-side-menu{
  left:auto !important;
  right:0 !important;
  transform:translateX(105%) !important;
  box-shadow:-20px 0 50px rgba(8,32,66,.22);
}

html[dir="rtl"] .mobile-side-menu.open{
  transform:translateX(0) !important;
}

html[dir="rtl"] .mobile-menu-head,
html[dir="rtl"] .mobile-menu-item,
html[dir="rtl"] .mobile-whatsapp{
  direction:rtl;
}

@media(max-width:640px){

  html,
  body{
    width:100%;
    max-width:100vw;
    overflow-x:hidden !important;
  }

  body{
    padding-left:12px;
    padding-right:12px;
  }

  body.menu-open{
    overflow:hidden !important;
    touch-action:none;
  }

  /* Le simulateur doit occuper exactement la largeur disponible. */
  body.wizard-active .wrap,
  body.wizard-active .grid,
  body.wizard-active #configCol{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    transform:none !important;
  }

  body.wizard-active .wizard-step,
  body.wizard-active .wizard-step.active-step{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    justify-self:stretch !important;
  }

  /*
   * L'animation utilise transform. On ne la neutralise que pour
   * l'étape active sur mobile afin d'éviter qu'elle élargisse la page.
   */
  body.wizard-active .wizard-step.active-step{
    transform:none;
    overflow:visible;
  }

  body.wizard-active #configCol .panel{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* Étape 4 : coordonnées du client. */
  body.wizard-active[data-current-step="4"] #configCol,
  body.wizard-active[data-current-step="4"] .wizard-step.active-step,
  body.wizard-active[data-current-step="4"] .wizard-step.active-step .panel{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  body.wizard-active[data-current-step="4"] .wizard-step.active-step .panel{
    padding-left:16px !important;
    padding-right:16px !important;
    box-sizing:border-box;
  }

  body.wizard-active[data-current-step="4"] .panel-head,
  body.wizard-active[data-current-step="4"] .field,
  body.wizard-active[data-current-step="4"] .field-label,
  body.wizard-active[data-current-step="4"] input,
  body.wizard-active[data-current-step="4"] select,
  body.wizard-active[data-current-step="4"] textarea,
  body.wizard-active[data-current-step="4"] .pills{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box;
  }

  body.wizard-active[data-current-step="4"] .field-label{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
  }

  body.wizard-active[data-current-step="4"] .pills{
    display:flex !important;
    flex-wrap:wrap !important;
  }

  body.wizard-active[data-current-step="4"] .pill{
    min-width:0;
    max-width:100%;
  }

  /* Mise en page arabe de l'étape 4. */
  html[dir="rtl"] body.wizard-active[data-current-step="4"] .wrap,
  html[dir="rtl"] body.wizard-active[data-current-step="4"] .grid,
  html[dir="rtl"] body.wizard-active[data-current-step="4"] #configCol,
  html[dir="rtl"] body.wizard-active[data-current-step="4"] .wizard-step.active-step,
  html[dir="rtl"] body.wizard-active[data-current-step="4"] .panel{
    direction:rtl !important;
    text-align:right !important;
  }

  html[dir="rtl"] body.wizard-active[data-current-step="4"] .panel-head,
  html[dir="rtl"] body.wizard-active[data-current-step="4"] .field,
  html[dir="rtl"] body.wizard-active[data-current-step="4"] .field-label{
    text-align:right !important;
  }

  html[dir="rtl"] body.wizard-active[data-current-step="4"] input[type="text"],
  html[dir="rtl"] body.wizard-active[data-current-step="4"] textarea,
  html[dir="rtl"] body.wizard-active[data-current-step="4"] select{
    direction:rtl !important;
    text-align:right !important;
  }

  /* Téléphone et e-mail restent lisibles de gauche à droite. */
  html[dir="rtl"] body.wizard-active[data-current-step="4"] input[type="tel"],
  html[dir="rtl"] body.wizard-active[data-current-step="4"] input[type="email"]{
    direction:ltr !important;
    text-align:left !important;
    unicode-bidi:plaintext;
  }

  html[dir="rtl"] body.wizard-active[data-current-step="4"] .pills{
    justify-content:flex-start !important;
  }

  /* Barre de navigation inférieure dans la largeur du mobile. */
  .wizard-nav{
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:100vw !important;
  }
}

@media(max-width:380px){
  body{
    padding-left:8px;
    padding-right:8px;
  }

  body.wizard-active[data-current-step="4"] .wizard-step.active-step .panel{
    padding-left:12px !important;
    padding-right:12px !important;
  }
}

/* ==========================================================
   CASE À COCHER À GAUCHE EN LANGUE ARABE
   ========================================================== */

html[dir="rtl"] .modality-card-option{
  padding-right:18px;
  padding-left:58px;
}

html[dir="rtl"] .modality-card-option .modality-checkbox{
  right:auto;
  left:16px;
}

@media(max-width:520px){

  html[dir="rtl"] .modality-card-option{
    padding-right:12px;
    padding-left:50px;
  }

  html[dir="rtl"] .modality-card-option .modality-checkbox{
    right:auto;
    left:14px;
  }
}


/* =========================================================
   ACCUEIL → SIMULATEUR
   Le configurateur reste invisible avant le clic sur
   "Commencer la configuration"
   ========================================================= */

body:not(.wizard-started) .grid,
body:not(.wizard-started) .step-indicator,
body:not(.wizard-started) .wizard-nav {
    display: none !important;
}

/* Une fois le simulateur lancé */
body.wizard-started .grid {
    display: grid;
}

body.wizard-started .step-indicator {
    display: flex;
}

/* Les étapes restent cachées par défaut */
.wizard-step {
    display: none;
}

/* Seulement l'étape active */
body.wizard-started .wizard-step.active-step {
    display: block;
}

/* ============================================================
   FIX — ESPACE ENTRE MICRO INSTALLATION ET ÉTUDE SUR SITE
   ============================================================ */

.install-detail.show{
    margin-bottom:24px;
}

/* Mobile */
@media (max-width:640px){
    .install-detail.show{
        margin-bottom:20px;
    }
}


/* =========================================================
   GARANTIE HIKVISION — PLEINE LARGEUR
   ========================================================= */

.modality-card-hikvision {
    grid-column: 1 / -1;
    width: 100%;
}

/* =========================================================
   ESPACEMENT TOTAL ESTIMÉ → MODALITÉS
   ========================================================= */

.modalities-grid{
    margin-top: 24px;
}