/* Le bac à sable — la page du visiteur (voir index.html) */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(50% 40% at 25% 45%,rgba(217,169,76,.08),transparent 70%),radial-gradient(45% 40% at 80% 50%,rgba(91,141,255,.05),transparent 70%)}
.e-tete{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;padding:14px 28px;background:rgba(10,11,15,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-soft)}
.e-logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:18px}
.e-logo img{width:30px;height:30px;border-radius:8px}.e-logo b{color:var(--gold)}
.e-avis{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:13px;color:var(--text-dim)}
.e-avis i{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px #4ade80}
.e-cta{font:700 13px var(--sans);color:#1a1305;text-decoration:none;padding:10px 16px;border-radius:10px;background:linear-gradient(155deg,var(--metal-1),var(--metal-2))}
.e-main{position:relative;max-width:1320px;margin:0 auto;padding:0 24px}

.e-intro{text-align:center;max-width:760px;margin:0 auto;padding:56px 0 34px}
.e-etiquette{font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.e-intro h1{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.4vw,56px);line-height:1.06;letter-spacing:-.8px;color:#fff;margin:0 0 16px}
.e-intro h1 em,.e-fin h2 em{font-style:italic;color:var(--gold)}
.e-intro p{font-size:17px;line-height:1.65;color:var(--muted);margin:0}
.e-intro b{color:#fff}

.e-scene{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:48px;align-items:start;padding-bottom:40px}
.e-titre-cote{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);margin-bottom:16px}
.e-num{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#1a1305;background:linear-gradient(155deg,var(--metal-1),var(--metal-2))}

/* Le téléphone */
.e-tel{position:relative;width:100%;max-width:360px;aspect-ratio:390/800;margin:0 auto;border-radius:48px;padding:11px;
  background:linear-gradient(145deg,#2a2e38,#0c0e12 40%,#1b1e25);box-shadow:0 0 0 1.5px #3a3f4b,0 50px 90px -30px #000,0 0 120px -40px rgba(217,169,76,.45)}
.e-tel-ecran{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;background:#0a0b0f}
.e-tel-ecran iframe,.e-ordi-ecran iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#0a0b0f}
.e-ilot{position:absolute;top:20px;left:50%;width:90px;height:26px;margin-left:-45px;border-radius:20px;background:#000;pointer-events:none}

/* Le texto, affiché comme une notification */
.e-notif{position:absolute;left:8px;right:8px;top:44px;z-index:3;padding:12px 14px;border-radius:18px;background:rgba(38,39,44,.96);
  box-shadow:0 20px 40px -10px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.08);font:13px/1.38 -apple-system,var(--sans);color:#fff;
  opacity:0;transform:translateY(-120%);transition:opacity .35s var(--ease),transform .6s cubic-bezier(.2,1.25,.3,1);pointer-events:none}
.e-notif.on{opacity:1;transform:none}
.e-notif-tete{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.e-notif-app{font-weight:700}
.e-notif-de{font-weight:700;margin-bottom:2px}
.e-notif-txt::after{content:"Texto simulé : rien n’a été envoyé";display:block;margin-top:8px;font-size:10.5px;color:#d9a94c}

.e-guide{list-style:none;counter-reset:g;margin:22px auto 0;padding:0;max-width:360px;display:flex;flex-direction:column;gap:8px}
.e-guide li{counter-increment:g;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);transition:color .3s}
.e-guide li::before{content:counter(g);width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;border:1px solid var(--border);color:var(--text-dim);flex:none;transition:all .3s}
.e-guide li.on{color:#fff}.e-guide li.on::before{border-color:var(--gold);color:var(--gold)}
.e-guide li.fait{color:var(--text-dim)}.e-guide li.fait::before{content:"✓";background:#27c281;border-color:#27c281;color:#06140d}

/* L'ordinateur */
.e-ordi{position:relative}
.e-ordi-ecran{position:relative;aspect-ratio:1366/854;border-radius:14px;overflow:hidden;background:#000;
  box-shadow:0 0 0 2px #2b303d,0 0 0 8px #0d0f13,0 0 0 9.5px #2b303d,0 60px 100px -40px #000,0 0 120px -40px rgba(217,169,76,.3);transition:box-shadow .6s}
.e-ordi.eclair .e-ordi-ecran{box-shadow:0 0 0 2px var(--gold),0 0 0 8px #0d0f13,0 0 0 9.5px #2b303d,0 60px 100px -40px #000,0 0 140px -20px rgba(217,169,76,.75)}
.e-ordi-pied{width:28%;height:40px;margin:12px auto 0;background:linear-gradient(#1a1d24,#0f1116);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.e-voile{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#0a0b0f;color:var(--text-dim);font-size:14px;transition:opacity .5s}
.e-voile span{width:30px;height:30px;border-radius:50%;border:2px solid rgba(217,169,76,.25);border-top-color:var(--gold);animation:tourne .9s linear infinite}
.e-voile.parti{opacity:0;pointer-events:none}
@keyframes tourne{to{transform:rotate(360deg)}}

.e-alerte{margin-top:18px;max-width:520px;padding:12px 16px;border-radius:14px;background:rgba(22,26,34,.92);border:1px solid #2b303d;font-size:14px;color:#fff;
  opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease),transform .6s var(--ease);display:none}
.e-alerte.on{display:block}.e-alerte.vu{opacity:1;transform:none}
.e-alerte-tete{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.e-apres{display:none;margin-top:18px}
.e-apres.on{display:block;animation:monte .6s var(--ease)}
@keyframes monte{from{opacity:0;transform:translateY(12px)}}
.e-apres p{margin:0 0 12px;color:var(--muted);font-size:15px;line-height:1.6}.e-apres b{color:#fff}
.e-boutons{display:flex;flex-wrap:wrap;gap:8px}
.e-boutons button{font:600 13px var(--sans);padding:9px 14px;border-radius:10px;border:1px solid rgba(217,169,76,.4);background:rgba(217,169,76,.08);color:#fff;cursor:pointer}
.e-boutons button:hover{background:rgba(217,169,76,.16)}
.e-boutons .e-sec{border-color:var(--border);background:none;color:var(--text-dim)}

.e-fin{text-align:center;padding:60px 0 90px}
.e-fin h2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.4vw,44px);color:#fff;margin:0 0 22px}
.e-btn{display:inline-flex;padding:15px 26px;border-radius:12px;text-decoration:none;font-weight:800;color:#1a1305;background:linear-gradient(155deg,var(--metal-1),var(--metal-2))}
.e-note{font-size:12px;color:var(--muted2);margin-top:18px}

@media (max-width:980px){
  .e-tete{padding:12px 16px;gap:10px}.e-avis{display:none}.e-cta{margin-left:auto;padding:8px 12px;font-size:12px}
  .e-main{padding:0 16px}
  .e-intro{padding:36px 0 26px}
  .e-scene{grid-template-columns:1fr;gap:40px}
  .e-tel{max-width:330px}
  /* le côté commerce devient le cellulaire du gérant */
  .e-ordi{max-width:330px;margin:0 auto}
  .e-ordi-ecran{aspect-ratio:390/800;border-radius:38px;box-shadow:0 0 0 11px #15171d,0 0 0 12.5px #3a3f4b,0 50px 90px -30px #000,0 0 120px -40px rgba(217,169,76,.35)}
  .e-ordi.eclair .e-ordi-ecran{box-shadow:0 0 0 11px #15171d,0 0 0 12.5px var(--gold),0 50px 90px -30px #000,0 0 140px -20px rgba(217,169,76,.75)}
  .e-ordi-pied{display:none}
  .e-alerte,.e-apres{max-width:360px;margin-left:auto;margin-right:auto}
}