/* Page d'accueil (vitrine) — CSS 100% isolé sous #landing-screen. Généré, ne pas éditer à la main. */
#landing-screen{ background:var(--fs-bg); color:var(--fs-text); line-height:1.5; scroll-behavior:smooth; }
#landing-screen, #landing-screen *{ font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
#landing-screen a{ text-decoration:none; }
#landing-screen ul{ list-style:none; }

  
#landing-screen{
    --fs-violet:#5a1aa0; --fs-violet-light:#9168e6; --fs-turquoise:#3db5a0;
    --fs-red:#c42531; --fs-ink:#0e0e11;
    --fs-bg:#edeef1; --fs-surface:#fff; --fs-field:#f4f5f7;
    --fs-border:#e6e8ec; --fs-text:#15151a; --fs-muted:#6b6d75;
    --fs-success:#15803d; --fs-amber:#d97706;
    --shadow:0 12px 30px rgba(20,20,30,.06);
    --shadow-lg:0 24px 60px rgba(20,20,30,.10);
  }
  
#landing-screen *{box-sizing:border-box}
  
#landing-screen{scroll-behavior:smooth}
  
#landing-screen{
    margin:0; font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--fs-bg); color:var(--fs-text); line-height:1.5;
  }
  
#landing-screen h1, #landing-screen h2, #landing-screen h3{line-height:1.15; letter-spacing:-.02em; margin:0}
  
#landing-screen .wrap{max-width:1140px; margin:0 auto; padding:0 1.5rem}
  
#landing-screen .mock-ribbon{
    background:linear-gradient(90deg,#f59e0b,#f97316); color:#fff; text-align:center;
    font-weight:700; font-size:.8rem; padding:.4rem 1rem; letter-spacing:.02em;
  }
  
#landing-screen .eyebrow{font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--fs-violet)}
  
#landing-screen .bars{height:5px; border-radius:3px; width:150px;
    background:linear-gradient(90deg,var(--fs-violet) 0 49%,var(--fs-turquoise) 49% 80%,var(--fs-red) 80% 100%);}

  
#landing-screen /* Boutons */
  .btn{display:inline-flex; align-items:center; gap:.4rem; border-radius:11px; padding:.8rem 1.3rem;
    font-weight:700; font-size:.95rem; cursor:pointer; border:1.5px solid transparent; text-decoration:none; white-space:nowrap;}
  
#landing-screen .btn-primary{background:var(--fs-violet); color:#fff}
  
#landing-screen .btn-primary:hover{background:#4a1585}
  
#landing-screen .btn-outline{background:var(--fs-surface); color:var(--fs-violet); border-color:var(--fs-violet)}
  
#landing-screen .btn-ghost{background:none; color:var(--fs-text); font-weight:600; font-size:.9rem}
  
#landing-screen .btn-sm{padding:.55rem .95rem; font-size:.85rem}

  
#landing-screen /* Nav */
  .nav{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.85); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--fs-border);}
  
#landing-screen .nav-inner{display:flex; align-items:center; gap:1rem; padding:.85rem 0;}
  
#landing-screen .logo{font-weight:800; font-size:1.4rem; font-style:italic; letter-spacing:-.03em}
  
#landing-screen .logo b{color:var(--fs-violet)}
  
#landing-screen .logo .bars{margin-top:2px; width:118px; height:4px}
  
#landing-screen .nav-right{margin-left:auto; display:flex; align-items:center; gap:1rem}

  
#landing-screen /* Hero */
  .hero{padding:3.5rem 0 2rem}
  
#landing-screen .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:2.5rem; align-items:center}
  
#landing-screen .hero h1{font-size:2.9rem; font-weight:800; font-style:italic}
  
#landing-screen .hero h1 .hl{color:var(--fs-violet)}
  
#landing-screen .hero p.sub{font-size:1.12rem; color:var(--fs-muted); margin:1.1rem 0 1.6rem; max-width:33rem}
  
#landing-screen .hero-cta{display:flex; gap:.8rem; flex-wrap:wrap}
  
#landing-screen .hero .micro{font-size:.82rem; color:var(--fs-muted); margin-top:.9rem}
  
#landing-screen .hero .micro b{color:var(--fs-text)}

  
#landing-screen /* Devices (hero visual) */
  .devices{display:flex; align-items:flex-end; justify-content:center; gap:18px}
  
#landing-screen .tablet{position:relative; width:300px; background:var(--fs-surface);
    border:1px solid var(--fs-border); border-radius:18px; box-shadow:var(--shadow-lg); padding:1rem;}
  
#landing-screen .tablet .scanline{background:var(--fs-field); border:1px dashed var(--fs-violet-light); border-radius:10px;
    padding:.5rem .7rem; font-size:.72rem; color:var(--fs-violet); font-weight:700}
  
#landing-screen .tablet .plan-row{padding:.4rem 0; border-bottom:1px dashed var(--fs-border)}
  
#landing-screen .tablet .pr-top{display:flex; justify-content:space-between; align-items:baseline; gap:.5rem}
  
#landing-screen .tablet .pr-name{font-weight:700; font-size:.72rem}
  
#landing-screen .tablet .pr-int{color:var(--fs-muted); white-space:nowrap; font-weight:700; font-size:.68rem}
  
#landing-screen .tablet .pr-bot{display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-top:3px}
  
#landing-screen .tablet .pr-act{color:var(--fs-violet); font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em}
  
#landing-screen .tablet .pr-st{font-size:.55rem; font-weight:800; border-radius:20px; padding:.12rem .5rem; white-space:nowrap}
  
#landing-screen .tablet .st-todo{background:#fdeaea; color:var(--fs-red)}
  
#landing-screen .tablet .st-soon{background:#fdf3e3; color:var(--fs-amber)}
  
#landing-screen .tablet .st-done{background:#e7f6f1; color:var(--fs-turquoise)}
  
#landing-screen .phone{position:absolute; right:0; bottom:0; width:210px; background:var(--fs-surface);
    border:1px solid var(--fs-border); border-radius:26px; box-shadow:var(--shadow-lg); padding:.7rem; overflow:hidden}
  
#landing-screen .phone .notch{width:60px; height:5px; background:var(--fs-border); border-radius:3px; margin:.1rem auto .6rem}

  
#landing-screen /* Report card (shared) */
  .rep-head{font-weight:800; font-size:.82rem}
  
#landing-screen .rep-sub{font-size:.66rem; color:var(--fs-muted); margin-bottom:.5rem}
  
#landing-screen .pills{display:flex; gap:.3rem; margin:.4rem 0 .6rem; flex-wrap:wrap}
  
#landing-screen .pill{font-size:.6rem; font-weight:800; border-radius:20px; padding:.15rem .5rem}
  
#landing-screen .pill.ok{background:#e7f6f1; color:var(--fs-turquoise)}
  
#landing-screen .pill.warn{background:#fdf3e3; color:var(--fs-amber)}
  
#landing-screen .pill.urg{background:#fdeaea; color:var(--fs-red)}
  
#landing-screen .constat{border:1px solid var(--fs-border); border-radius:10px; padding:.5rem; margin-bottom:.45rem}
  
#landing-screen .constat .ctop{display:flex; justify-content:space-between; font-size:.68rem; font-weight:700}
  
#landing-screen .constat .tag-urg{color:var(--fs-red)} 
#landing-screen .constat .tag-warn{color:var(--fs-amber)}
  
#landing-screen .photo{position:relative; height:70px; border-radius:8px; margin-top:.4rem;
    background:linear-gradient(135deg,#3a3f47,#22262c); overflow:hidden}
  
#landing-screen .photo .circle{position:absolute; left:30%; top:24%; width:52px; height:40px; border:3px solid var(--fs-red);
    border-radius:50%; box-shadow:0 0 0 2px rgba(196,37,49,.25)}
  
#landing-screen .photo .cap{position:absolute; left:6px; bottom:5px; font-size:.58rem; color:#cfd3da; font-weight:600}
  
#landing-screen .plan-mini{background:var(--fs-field); border-radius:8px; padding:.45rem .55rem; font-size:.64rem; color:var(--fs-text)}
  
#landing-screen .plan-mini b{color:var(--fs-violet)}

  
#landing-screen /* Sections */
  section.band{padding:3.2rem 0}
  
#landing-screen .band-white{background:var(--fs-surface); border-top:1px solid var(--fs-border); border-bottom:1px solid var(--fs-border)}
  
#landing-screen .sec-head{text-align:center; max-width:40rem; margin:0 auto 2rem}
  
#landing-screen .sec-head h2{font-size:1.9rem; font-weight:800; font-style:italic}
  
#landing-screen .sec-head p{color:var(--fs-muted); margin-top:.6rem}

  
#landing-screen /* Proof section */
  .proof-grid{display:grid; grid-template-columns:300px 1fr; gap:2.5rem; align-items:center}
  
#landing-screen .proof-phone{width:300px; background:var(--fs-surface); border:1px solid var(--fs-border);
    border-radius:30px; box-shadow:var(--shadow-lg); padding:1rem; margin:0 auto}
  
#landing-screen .proof-copy h2{font-size:1.8rem; font-weight:800; font-style:italic}
  
#landing-screen .proof-copy .lead{color:var(--fs-muted); margin:.8rem 0 1.2rem; font-size:1.05rem}
  
#landing-screen .checklist{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem}
  
#landing-screen .checklist li{display:flex; gap:.6rem; align-items:flex-start; font-size:.95rem}
  
#landing-screen .checklist .ck{color:var(--fs-turquoise); font-weight:800}

  
#landing-screen /* Amorce */
  .amorce{background:linear-gradient(180deg,#faf7ff,#fff); text-align:center}
  
#landing-screen .amorce h2{font-size:1.55rem; font-weight:800; font-style:italic; max-width:36rem; margin:0 auto}
  
#landing-screen .amorce p{color:var(--fs-muted); max-width:34rem; margin:1rem auto 0}

  
#landing-screen /* Steps */
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
  
#landing-screen .step{background:var(--fs-surface); border:1px solid var(--fs-border); border-radius:14px; padding:1.2rem; box-shadow:var(--shadow)}
  
#landing-screen .step .num{width:34px; height:34px; border-radius:10px; background:var(--fs-violet); color:#fff;
    font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:.7rem}
  
#landing-screen .step h3{font-size:1rem; margin-bottom:.35rem}
  
#landing-screen .step p{font-size:.85rem; color:var(--fs-muted); margin:0}

  
#landing-screen /* Deux côtés */
  .twin{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
  
#landing-screen .side{border-radius:16px; padding:1.5rem; border:1px solid var(--fs-border)}
  
#landing-screen .side.garage{background:var(--fs-surface)}
  
#landing-screen .side.client{background:#eaf7f3; border-color:#c9ece2}
  
#landing-screen .side .tag{font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.8rem}
  
#landing-screen .side.garage .tag{color:var(--fs-violet)} 
#landing-screen .side.client .tag{color:var(--fs-turquoise)}
  
#landing-screen .side ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem}
  
#landing-screen .side li{display:flex; gap:.55rem; font-size:.92rem}
  
#landing-screen .side li::before{content:"✓"; font-weight:800}
  
#landing-screen .side.garage li::before{color:var(--fs-violet)} 
#landing-screen .side.client li::before{color:var(--fs-turquoise)}
  
#landing-screen .twin-mid{text-align:center; font-weight:700; color:var(--fs-text); margin-top:1.2rem; font-style:italic}

  
#landing-screen /* Modules */
  .mods{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
  
#landing-screen .mod{background:var(--fs-surface); border:1px solid var(--fs-border); border-radius:14px; padding:1.1rem; box-shadow:var(--shadow)}
  
#landing-screen .mod .ic{font-size:1.4rem; margin-bottom:.5rem}
  
#landing-screen .mod h3{font-size:.95rem; margin-bottom:.3rem}
  
#landing-screen .mod p{font-size:.8rem; color:var(--fs-muted); margin:0}

  
#landing-screen /* Business */
  .biz{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.8rem}
  
#landing-screen .biz .b{background:var(--fs-surface); border:1px solid var(--fs-border); border-radius:14px; padding:1.1rem; box-shadow:var(--shadow)}
  
#landing-screen .biz .b h3{font-size:1rem; color:var(--fs-violet); margin-bottom:.3rem}
  
#landing-screen .biz .b p{font-size:.84rem; color:var(--fs-muted); margin:0}
  
#landing-screen .quote{background:var(--fs-surface); border:1px solid var(--fs-border); border-left:4px solid var(--fs-violet);
    border-radius:12px; padding:1.3rem 1.5rem; box-shadow:var(--shadow); max-width:44rem; margin:0 auto}
  
#landing-screen .quote p{font-size:1.05rem; font-style:italic; margin:0 0 .6rem}
  
#landing-screen .quote .who{font-size:.82rem; color:var(--fs-muted)}
  
#landing-screen .quote .todo{display:inline-block; font-size:.66rem; font-weight:800; color:var(--fs-amber);
    background:#fdf3e3; border-radius:6px; padding:.1rem .45rem; margin-left:.4rem}

  
#landing-screen /* Forfaits */
  .plans{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; align-items:stretch}
  
#landing-screen .plan{background:var(--fs-surface); border:1px solid var(--fs-border); border-radius:16px; padding:1.5rem; box-shadow:var(--shadow); display:flex; flex-direction:column}
  
#landing-screen .plan.reco{border:2px solid var(--fs-violet); box-shadow:var(--shadow-lg); position:relative}
  
#landing-screen .plan.reco .flag{position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--fs-violet); color:#fff;
    font-size:.68rem; font-weight:800; padding:.2rem .7rem; border-radius:20px}
  
#landing-screen .plan .pname{font-size:.75rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--fs-muted)}
  
#landing-screen .plan .ptitle{font-size:1.15rem; font-weight:800; margin:.3rem 0 .6rem}
  
#landing-screen .plan p{font-size:.86rem; color:var(--fs-muted); margin:0 0 1rem}
  
#landing-screen .plan .btn{margin-top:auto; justify-content:center}

  
#landing-screen /* CTA final */
  .final{background:linear-gradient(135deg,var(--fs-violet),#7b2fc7); color:#fff; text-align:center; border-radius:0}
  
#landing-screen .final h2{font-size:2rem; font-weight:800; font-style:italic}
  
#landing-screen .final p{opacity:.9; margin:.8rem auto 1.5rem; max-width:32rem}
  
#landing-screen .final .btn-primary{background:#fff; color:var(--fs-violet)}
  
#landing-screen .final .btn-ghost{color:#fff; text-decoration:underline; opacity:.9}
  
#landing-screen .final .rassure{font-size:.82rem; opacity:.85; margin-top:1.1rem}

  
#landing-screen /* Footer */
  footer{padding:2rem 0; text-align:center; color:var(--fs-muted); font-size:.85rem}
  
#landing-screen footer .bars{margin:0 auto .8rem}

  /* Anti-débordement horizontal : AUCUN enfant ne doit faire « glisser » la
     page de côté (bouton hors écran vu sur iPhone, 2 juillet). Le clip vit sur
     la racine de l'accueil — CSS 100 % isolé, ne touche pas l'app. */
  #landing-screen{overflow-x:clip}

  @media(max-width:900px){

#landing-screen .hero-grid, #landing-screen .proof-grid{grid-template-columns:1fr}

#landing-screen .devices{flex-direction:column; align-items:center; margin-top:1.5rem}

#landing-screen .steps, #landing-screen .mods, #landing-screen .biz{grid-template-columns:1fr 1fr}

#landing-screen .twin, #landing-screen .plans{grid-template-columns:1fr}

#landing-screen .hero h1{font-size:2.2rem}

#landing-screen .cf-row{grid-template-columns:1fr}
  }

  /* Petits écrans : l'en-tête doit tenir dans la largeur (logo 264px + deux
     boutons débordaient de ~180px sur iPhone → page qui glisse de côté).
     Le CTA « Réserver une démo » reste bien visible dans le héros. */
  @media(max-width:640px){

#landing-screen .brand-mark svg{width:180px; height:auto}

#landing-screen .nav-right{gap:.6rem}

#landing-screen .nav-right .btn.btn-primary{display:none}

#landing-screen .steps{grid-template-columns:1fr}
  }
  
#landing-screen /* Appareils avec vraies captures d'écran */
  .phone-real{position:relative; width:178px; margin-bottom:16px; border-radius:26px; overflow:hidden; box-shadow:var(--shadow-lg); border:5px solid #fff; background:#fff; line-height:0}
  
#landing-screen .phone-real img{display:block; width:100%}
  
#landing-screen .proof-phone-real{width:300px; margin:0 auto; border-radius:28px; overflow:hidden; box-shadow:var(--shadow-lg); border:6px solid #fff; background:#fff; line-height:0}
  
#landing-screen .proof-phone-real img{display:block; width:100%}
  
#landing-screen /* Contact */
  .contact-form{background:var(--fs-surface); border:1px solid var(--fs-border); border-radius:16px; padding:1.5rem; box-shadow:var(--shadow)}
  
#landing-screen .cf-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
  
#landing-screen .cf-g{display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem}
  
#landing-screen .cf-g label{font-size:.8rem; font-weight:700; color:var(--fs-text)}
  
#landing-screen .cf-g input, #landing-screen .cf-g textarea{border:1px solid var(--fs-border); border-radius:10px; padding:.7rem .85rem; font-size:.95rem; font-family:inherit; background:var(--fs-field); color:var(--fs-text)}
  
#landing-screen .cf-g input:focus, #landing-screen .cf-g textarea:focus{outline:none; border-color:var(--fs-violet); box-shadow:0 0 0 3px rgba(90,26,160,.12)}


  /* Surcharges MOBILES — doivent rester en FIN de fichier : les règles de
     base (.cf-row, .contact-form…) sont déclarées plus haut et, à
     spécificité égale, la DERNIÈRE déclaration gagne. */
  @media(max-width:900px){

#landing-screen .cf-row{grid-template-columns:1fr}

#landing-screen .cf-g input, #landing-screen .cf-g textarea{width:100%; min-width:0; box-sizing:border-box}
  }