/* Page de présentation de l'app Urgences.ch — inspirée d'echosos.com.
   Réutilise clean.css (nav, footer, boutons, container) et ajoute ici
   les sections spécifiques : hero app, mockups téléphone, fonctions,
   sections détaillées, chiffres, témoignage, téléchargement. */

:root{
  --grad:linear-gradient(135deg,#E11D2B,#ff4757);
  --tint-blue:#EAF2FF; --tint-blue-fg:#2E7DF6;
  --tint-green:#E9F8EF; --tint-green-fg:#16A34A;
  --tint-amber:#FDF2E3; --tint-amber-fg:#D9880F;
}

/* ---------- Hero app ---------- */
.apphero{position:relative;overflow:hidden;padding:56px 0 40px;background:
  radial-gradient(1200px 600px at 80% -10%,rgba(225,29,43,.08),transparent 60%),
  radial-gradient(900px 500px at 0% 10%,rgba(46,125,246,.06),transparent 55%)}
.apphero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.badge-pill{display:inline-flex;align-items:center;gap:8px;background:#FDE7E9;color:var(--red);
  font-weight:700;font-size:13px;padding:7px 14px;border-radius:999px}
.badge-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--red)}
.apphero h1{margin-top:18px;font-size:clamp(36px,4.6vw,58px);line-height:1.03;letter-spacing:-.03em;font-weight:800}
.apphero h1 .hl{color:var(--red)}
.apphero .lead{margin-top:20px;color:var(--muted);font-size:18px;line-height:1.55;max-width:520px}
.hero-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.store-badges{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}
.store{display:inline-flex;align-items:center;gap:11px;background:#111318;color:#fff;
  border-radius:14px;padding:10px 16px;position:relative;transition:transform .15s ease,box-shadow .15s ease}
.store:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(17,19,24,.22)}
.store svg{flex:0 0 auto}
.store .st-top{font-size:10px;opacity:.8;letter-spacing:.02em}
.store .st-main{font-size:16px;font-weight:700;line-height:1.1;margin-top:1px}
.store .soon{position:absolute;top:-9px;right:-8px;background:var(--red);color:#fff;font-size:9px;
  font-weight:800;letter-spacing:.04em;padding:3px 7px;border-radius:999px;text-transform:uppercase}
.hero-note{margin-top:16px;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13.5px}

/* ---------- Phone mockup ---------- */
.phone-wrap{display:flex;justify-content:center;position:relative}
.phone-wrap.tilt .phone{transform:rotate(-3deg)}
.phone{position:relative;width:300px;height:612px;background:#0e0f12;border-radius:46px;
  padding:11px;box-shadow:0 40px 80px rgba(20,22,30,.28),0 8px 20px rgba(20,22,30,.16);
  transition:transform .4s ease}
.phone::after{content:"";position:absolute;top:16px;left:50%;transform:translateX(-50%);
  width:120px;height:26px;background:#0e0f12;border-radius:0 0 16px 16px;z-index:3}
.phone-screen{position:relative;width:100%;height:100%;background:#F6F7F9;border-radius:36px;overflow:hidden}

/* Barre d'état factice */
.scr-status{display:flex;justify-content:space-between;align-items:center;padding:14px 22px 4px;font-size:12px;font-weight:700;color:#17181B}
.scr-status .dots{display:flex;gap:4px;align-items:center}
.scr-status .dots i{width:5px;height:5px;border-radius:50%;background:#17181B;display:block}

/* En-tête app */
.scr-head{display:flex;align-items:center;justify-content:space-between;padding:8px 18px 6px}
.scr-burger{display:flex;flex-direction:column;gap:4px}
.scr-burger i{width:20px;height:2px;background:#17181B;border-radius:2px;display:block}
.scr-logo{font-size:18px;font-weight:800;color:#17181B;letter-spacing:-.02em}
.scr-logo b{color:var(--red)}
.scr-callbtn{width:40px;height:40px;border-radius:50%;background:var(--red);display:grid;place-items:center;
  box-shadow:0 10px 22px rgba(225,29,43,.35)}

.scr-body{padding:6px 18px 0;overflow:hidden}
.scr-247{display:inline-flex;align-items:center;gap:6px;background:#FDE7E9;color:var(--red);
  font-size:11px;font-weight:800;padding:5px 11px;border-radius:999px;margin:8px auto 0}
.scr-center{display:flex;flex-direction:column;align-items:center;text-align:center}
.scr-title{margin-top:12px;font-size:26px;font-weight:800;color:#17181B;line-height:1.1;letter-spacing:-.02em}
.scr-title .hl{color:var(--red)}
.scr-sub{margin-top:8px;font-size:12.5px;color:#8A9099;line-height:1.4}
.scr-cta{margin-top:16px;width:100%;background:var(--red);color:#fff;border-radius:16px;padding:13px;
  display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15px;
  box-shadow:0 12px 26px rgba(225,29,43,.32)}
.scr-avail{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;color:#8A9099;font-weight:600}
.scr-secttl{margin:18px 0 10px;font-size:15px;font-weight:800;color:#17181B}
.scr-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.scr-card{background:#fff;border:1px solid #ECEDEF;border-radius:16px;padding:13px;box-shadow:0 6px 18px rgba(23,24,27,.05)}
.scr-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.scr-card h4{margin-top:10px;font-size:13.5px;font-weight:700;color:#17181B}
.scr-card p{margin-top:3px;font-size:10.5px;color:#8A9099;line-height:1.35}

/* Liste (écran demande) */
.scr-search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #ECEDEF;
  border-radius:14px;padding:11px 14px;margin-top:6px}
.scr-search span{font-size:12.5px;color:#AEB4BC}
.scr-row{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #ECEDEF;
  border-radius:16px;padding:11px;margin-top:10px;box-shadow:0 6px 16px rgba(23,24,27,.04)}
.scr-row .txt{flex:1}
.scr-row h4{font-size:13.5px;font-weight:700;color:#17181B}
.scr-row p{font-size:10.5px;color:#8A9099;margin-top:2px}
.scr-row .price{font-size:11px;font-weight:800;color:var(--red)}

/* Écran suivi */
.scr-track{background:#fff;border:1px solid #ECEDEF;border-radius:20px;padding:16px;margin-top:8px;box-shadow:0 8px 20px rgba(23,24,27,.05)}
.scr-map{height:120px;border-radius:14px;background:
  linear-gradient(0deg,rgba(46,125,246,.05),rgba(46,125,246,.05)),
  repeating-linear-gradient(0deg,#eef2f7 0 22px,#e7ecf3 22px 23px),
  repeating-linear-gradient(90deg,#eef2f7 0 22px,#e7ecf3 22px 23px);
  position:relative;overflow:hidden}
.scr-map .route{position:absolute;left:16%;top:78%;width:64%;height:2px;background:var(--red);transform:rotate(-24deg);transform-origin:left}
.scr-map .pin{position:absolute;width:16px;height:16px;border-radius:50%;border:3px solid #fff}
.scr-map .pin.a{left:14%;top:74%;background:var(--red);box-shadow:0 4px 10px rgba(225,29,43,.4)}
.scr-map .pin.b{right:14%;top:26%;background:#2E7DF6;box-shadow:0 4px 10px rgba(46,125,246,.4)}
.scr-pro{display:flex;align-items:center;gap:11px;margin-top:14px}
.scr-pro .av{width:42px;height:42px;border-radius:50%;background:var(--red);display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px}
.scr-pro h4{font-size:13.5px;font-weight:700;color:#17181B}
.scr-pro p{font-size:10.5px;color:#8A9099;margin-top:2px}
.scr-eta{margin-left:auto;text-align:right}
.scr-eta .big{font-size:16px;font-weight:800;color:var(--red)}
.scr-eta .sm{font-size:9.5px;color:#AEB4BC}
.scr-steps{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.scr-step{display:flex;align-items:center;gap:9px;font-size:11.5px;color:#3A3D44;font-weight:600}
.scr-step .st-dot{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.scr-step.done .st-dot{background:#E9F8EF}
.scr-step.now .st-dot{background:#EAF2FF}
.scr-step.todo{color:#AEB4BC}
.scr-step.todo .st-dot{background:#F0F1F3}

/* barre d'onglets factice */
.scr-tabs{position:absolute;left:0;right:0;bottom:0;height:58px;background:#fff;border-top:1px solid #ECEDEF;
  display:flex;justify-content:space-around;align-items:center;padding-bottom:6px}
.scr-tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px;font-weight:700;color:#AEB4BC}
.scr-tab.on{color:var(--red)}

/* ---------- Fonctions ---------- */
.functions{padding:64px 0 20px}
.func-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.func{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 26px;transition:transform .18s ease,box-shadow .18s ease}
.func:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(20,20,30,.08)}
.func-ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px}
.func h3{font-size:19px;font-weight:800;letter-spacing:-.01em}
.func p{margin-top:10px;color:var(--muted);font-size:14.5px;line-height:1.6}

/* ---------- Sections détaillées alternées ---------- */
.feature{padding:64px 0}
.feature-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.feature.alt .feature-in{direction:rtl}
.feature.alt .feature-txt{direction:ltr}
.feature.alt .phone-wrap{direction:ltr}
.feature-eyebrow{color:var(--red);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.feature-txt h2{margin-top:12px;font-size:clamp(26px,3.2vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.feature-txt .desc{margin-top:16px;color:var(--muted);font-size:16px;line-height:1.6;max-width:480px}
.feature-list{margin-top:24px;display:flex;flex-direction:column;gap:16px}
.feature-list li{display:flex;gap:13px;align-items:flex-start;list-style:none}
.feature-list .ck{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:#E9F8EF;display:grid;place-items:center;margin-top:1px}
.feature-list h4{font-size:15.5px;font-weight:700}
.feature-list p{color:var(--muted);font-size:14px;line-height:1.5;margin-top:2px}

/* ---------- Chiffres ---------- */
.stats{padding:28px 0}
.stats-in{background:#0e0f12;border-radius:26px;padding:44px 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat .num{font-size:clamp(30px,4vw,44px);font-weight:800;color:#fff;letter-spacing:-.02em}
.stat .num b{color:#ff6b74;font-weight:800}
.stat .lbl{margin-top:6px;color:#9aa1a9;font-size:13.5px}

/* ---------- Témoignage ---------- */
.quote{padding:72px 0}
.quote-in{max-width:820px;margin:0 auto;text-align:center}
.quote .mark{font-size:64px;line-height:.6;color:var(--red);font-weight:800}
.quote blockquote{font-size:clamp(21px,2.6vw,28px);font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--ink);margin-top:14px}
.quote .who{margin-top:22px;color:var(--muted);font-size:15px;font-weight:600}
.quote .who b{color:var(--ink)}
.stars{display:inline-flex;gap:3px;margin-bottom:8px}

/* ---------- Téléchargement ---------- */
.download{padding:20px 0 72px}
.download-in{background:var(--grad);border-radius:28px;padding:56px 40px;color:#fff;
  display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;overflow:hidden;position:relative}
.download-in h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.download-in p{margin-top:14px;font-size:16.5px;opacity:.94;line-height:1.55;max-width:420px}
.wait-form{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap;max-width:440px}
.wait-form input{flex:1;min-width:200px;border:0;border-radius:12px;padding:14px 16px;font-size:15px;font-family:inherit;color:var(--ink)}
.wait-form button{border:0;background:#111318;color:#fff;border-radius:12px;padding:14px 22px;font-weight:700;font-size:15px;cursor:pointer;font-family:inherit;transition:transform .15s ease}
.wait-form button:hover{transform:translateY(-2px)}
.wait-msg{margin-top:12px;font-size:13.5px;font-weight:600;min-height:18px}
.download .store{background:rgba(255,255,255,.14);backdrop-filter:blur(4px)}
.download .store:hover{background:rgba(255,255,255,.22)}
.download-badges{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}
.download-visual{display:flex;justify-content:center}
.download-visual .phone{width:250px;height:510px;transform:rotate(4deg)}

@media (max-width:960px){
  .apphero-in{grid-template-columns:1fr;gap:36px;text-align:center}
  .apphero .lead{margin-left:auto;margin-right:auto}
  .hero-actions,.store-badges,.hero-note{justify-content:center}
  .func-grid{grid-template-columns:1fr}
  .feature-in{grid-template-columns:1fr;gap:36px;text-align:center}
  .feature.alt .feature-in{direction:ltr}
  .feature-txt .desc{margin-left:auto;margin-right:auto}
  .feature-list{text-align:left;max-width:460px;margin-left:auto;margin-right:auto}
  .stats-in{grid-template-columns:1fr 1fr}
  .download-in{grid-template-columns:1fr;text-align:center}
  .wait-form,.download-badges{margin-left:auto;margin-right:auto;justify-content:center}
  .download-visual{margin-top:12px}
}
@media (max-width:480px){
  .scr-grid{grid-template-columns:1fr}
  .stats-in{grid-template-columns:1fr}
  .phone{width:270px;height:552px}
}