/* ============================================================
   TICKETS N°1 — styles partagés
   Palette : Navy #0F1E3A (base) · Teal #2B7A7A (accent) · Orange #C95526 (CTA)
   ============================================================ */
:root{
  --navy:#0F1E3A; --navy-700:#16294d;
  --teal:#2B7A7A; --teal-600:#23625f; --teal-50:#E7F2F1;
  --orange:#C95526; --orange-600:#b54a20;
  --green:#3B6D11; --green-50:#EAF3DE;
  --amber-50:#FAEEDA; --amber-700:#854F0B;
  --ink:#1d2433; --muted:#5b6473;
  --bg:#ffffff; --bg-soft:#f1f6f6; --bg-cream:#FAF9F5; --line:#e4e8ea;
  --radius:14px; --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Manrope,system-ui,sans-serif;color:var(--navy);line-height:1.15;margin:0 0 .4em}
h1{font-weight:800;font-size:clamp(2rem,5vw,3.3rem);letter-spacing:-.02em}
h2{font-weight:800;font-size:clamp(1.5rem,3.2vw,2.2rem);letter-spacing:-.01em}
h3{font-weight:700;font-size:1.15rem}
p{margin:0 0 1rem}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.section{padding:64px 0}
.lead{font-size:1.15rem;color:var(--muted)}
.eyebrow{font-family:Manrope;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--teal);margin-bottom:.6rem}
.center{text-align:center}
.narrow{max-width:760px;margin:0 auto}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:Manrope;font-weight:800;font-size:1.25rem;color:var(--navy);text-decoration:none}
.logo span{color:var(--orange)}
.nav-cta{display:flex;gap:10px;align-items:center}

/* Buttons — CTA reste ORANGE (contraste = conversion) */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:Manrope;font-weight:700;font-size:1rem;border-radius:11px;padding:13px 22px;text-decoration:none;cursor:pointer;border:2px solid transparent;transition:.15s}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-600)}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--teal)}
.btn-sm{padding:9px 16px;font-size:.92rem;border-radius:9px}
.reassure{font-size:.9rem;color:var(--muted);margin-top:12px}

/* Hero — 2 colonnes : texte + visuel app */
.hero{background:linear-gradient(180deg,#fff 0%,var(--bg-cream) 100%);padding:64px 0 56px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.hero h1{max-width:16ch}
.hero .subhead{font-family:Manrope;font-weight:700;font-size:clamp(1.1rem,2.2vw,1.4rem);color:var(--navy);margin:0 0 .6rem}
.hero .lead{font-size:1.12rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-visual{display:flex;justify-content:center;align-items:center}

/* Trust strip */
.trust{background:var(--navy);color:#fff}
.trust .wrap{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;padding:16px 22px;font-size:.92rem;font-weight:500}
.trust b{color:#fff;font-weight:700}
.trust .dot{opacity:.4}

/* Generic */
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.soft{background:var(--bg-soft)}
.cream{background:var(--bg-cream)}

/* Problem list */
.pain{list-style:none;padding:0;margin:0;display:grid;gap:14px;max-width:760px}
.pain li{display:flex;gap:12px;align-items:flex-start;font-size:1.08rem}
.pain .x{flex:none;width:26px;height:26px;border-radius:50%;background:#fbeae6;color:var(--orange);display:flex;align-items:center;justify-content:center;font-weight:700;margin-top:2px}

/* Steps — pastilles teal */
.steps{counter-reset:s;display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.step::before{counter-increment:s;content:counter(s);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--teal);color:#fff;font-family:Manrope;font-weight:800;font-size:1.2rem;margin-bottom:14px}
.clic{font-family:Manrope;font-weight:800;color:var(--teal);font-size:1.05rem;margin-bottom:6px}

/* Benefit — icône teal */
.benefit{display:flex;gap:14px;align-items:flex-start}
.benefit .ic{flex:none;width:42px;height:42px;border-radius:11px;background:var(--teal-50);color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:1.4rem}

/* eIDAS highlight */
.eidas{background:var(--navy);color:#fff;border-radius:20px;padding:48px;position:relative;overflow:hidden}
.eidas h2{color:#fff}
.eidas .lead{color:#cdd9da}
.eidas .seal{display:inline-flex;align-items:center;gap:8px;background:rgba(43,122,122,.22);border:1px solid rgba(43,122,122,.5);color:#bfeae6;border-radius:999px;padding:7px 15px;font-family:Manrope;font-weight:700;font-size:.85rem;margin-bottom:18px}

/* Pricing */
.price-grid{display:grid;gap:20px;grid-template-columns:repeat(2,1fr);max-width:820px;margin:0 auto}
.plan{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px}
.plan.feat{border:2px solid var(--teal);box-shadow:0 10px 30px rgba(15,30,58,.08)}
.plan .tag{font-family:Manrope;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--teal)}
.plan .amt{font-family:Manrope;font-weight:800;font-size:2.6rem;color:var(--navy);line-height:1}
.plan .amt small{font-size:1rem;font-weight:500;color:var(--muted)}
.plan ul{list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:9px}
.plan li{display:flex;gap:9px;font-size:.98rem}
.plan li::before{content:"✓";color:var(--teal);font-weight:700}
.plan .btn{width:100%;justify-content:center}
.guarantee{text-align:center;color:var(--muted);margin-top:18px;font-size:.95rem}

/* FAQ */
.faq{max-width:780px;margin:0 auto}
details{border-bottom:1px solid var(--line);padding:16px 0}
summary{font-family:Manrope;font-weight:700;font-size:1.05rem;color:var(--navy);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--teal);font-weight:700;font-size:1.4rem;line-height:1}
details[open] summary::after{content:"–"}
details p{margin:12px 0 2px;color:var(--muted)}

/* Demo section */
.demo-stage{max-width:880px;margin:26px auto 0;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 16px 50px rgba(15,30,58,.12);background:#fff}
.demo-ph{aspect-ratio:16/9;background:linear-gradient(135deg,var(--navy),#0a1426);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;gap:14px}
.demo-ph .play{width:74px;height:74px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;font-size:1.6rem;box-shadow:0 8px 30px rgba(201,85,38,.5)}
.demo-ph small{color:#9fb0c4;font-size:.85rem}

/* Final CTA */
.final{background:linear-gradient(180deg,var(--bg-cream),#fff);text-align:center}
.final .quote{font-family:Manrope;font-weight:500;font-style:italic;font-size:1.2rem;color:var(--muted);max-width:680px;margin:0 auto 22px}

footer{background:var(--navy);color:#aeb8cc;font-size:.88rem;padding:40px 0}
footer a{color:#fff;text-decoration:none}
footer .row{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;align-items:center}

/* Hub */
.hub{padding:48px 0 64px}
.hub .grid-hub{display:grid;gap:18px;grid-template-columns:repeat(2,1fr);margin-top:28px}
.hub .vcard{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;text-decoration:none;transition:.15s}
.hub .vcard:hover{border-color:var(--teal);transform:translateY(-2px)}
.hub .vcard .kw{font-family:Manrope;font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--teal)}
.hub .vcard h3{margin:6px 0 6px}
.hub .vcard p{color:var(--muted);font-size:.96rem;margin:0}

/* ============================================================
   MAQUETTES D'APP (recréations fidèles) + ANIMATIONS
   ============================================================ */
.phone{width:262px;background:#0b1424;border-radius:34px;padding:9px;box-shadow:0 24px 60px rgba(15,30,58,.30);position:relative}
.phone::before{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);width:74px;height:5px;border-radius:3px;background:rgba(255,255,255,.25);z-index:3}
.phone .screen{background:#fff;border-radius:27px;overflow:hidden;min-height:430px}
.browser{width:100%;max-width:460px;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 60px rgba(15,30,58,.18);background:#fff}
.browser .bar{height:36px;background:#eef0ee;display:flex;align-items:center;gap:7px;padding:0 13px;border-bottom:1px solid var(--line)}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#d3d3cb;display:inline-block}
.appbar{background:var(--navy);color:#fff;padding:11px 14px;font-family:Manrope;font-weight:800;font-size:.9rem;display:flex;justify-content:space-between;align-items:center}
.appbar span{color:var(--orange)}
.appbar .mini{font-weight:500;font-size:.66rem;color:#9fb0c4}
.applist{padding:8px 10px}
.t-row{display:flex;align-items:center;gap:10px;padding:9px 8px;border-bottom:1px solid #eef0f1;font-size:.78rem}
.t-row:last-child{border-bottom:none}
.t-thumb{width:32px;height:32px;border-radius:7px;background:var(--teal-50);flex:none;display:flex;align-items:center;justify-content:center;font-size:1rem}
.t-row .meta{flex:1;min-width:0}
.t-row .meta b{color:var(--navy);font-weight:700}
.t-row .meta small{color:var(--muted);display:block;font-size:.68rem}
.badge{font-size:.62rem;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.badge.seal{background:var(--green-50);color:var(--green)}
.badge.review{background:var(--amber-50);color:var(--amber-700)}
.badge.tosela{background:var(--teal-50);color:var(--teal-600)}
.seal-chip{display:inline-flex;align-items:center;gap:7px;background:var(--teal);color:#fff;border-radius:999px;padding:7px 13px;font-size:.74rem;font-weight:700;font-family:Manrope}
.shield{width:15px;height:18px;flex:none}
.scanline{position:relative;overflow:hidden}
.scanline::after{content:"";position:absolute;left:0;right:0;top:0;height:34%;background:linear-gradient(180deg,rgba(43,122,122,0),rgba(43,122,122,.22),rgba(43,122,122,0));animation:scan 3.2s ease-in-out infinite}
.export-pill{display:inline-flex;align-items:center;gap:8px;background:var(--teal-50);color:var(--teal-600);border:1px solid rgba(43,122,122,.3);border-radius:10px;padding:9px 13px;font-weight:700;font-size:.78rem;font-family:Manrope}
.collab{display:flex;align-items:center;gap:9px;padding:8px;border-radius:9px;font-size:.78rem}
.av{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.72rem;font-family:Manrope}
.cert{width:100%;max-width:330px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 24px 60px rgba(15,30,58,.18);position:relative}
.cert .doclines div{height:7px;border-radius:3px;background:#eceef0;margin:7px 0}
.cert-seal{position:absolute;right:16px;bottom:46px;width:74px;height:74px;border-radius:50%;background:var(--teal);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;box-shadow:0 0 0 8px rgba(43,122,122,.16)}
.cert-seal b{font-size:.66rem;font-family:Manrope}
.cert .stamp{margin-top:14px;font-size:.72rem;color:var(--teal-600);font-weight:700;font-family:Manrope}
.timeline{margin-top:10px;height:6px;border-radius:3px;background:#eceef0;position:relative}
.timeline::after{content:"";position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:3px;background:var(--teal);transform-origin:left;animation:grow 3s ease-in-out infinite alternate}

@keyframes floatIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 8px rgba(43,122,122,.16)}50%{transform:scale(1.04);box-shadow:0 0 0 14px rgba(43,122,122,.05)}}
@keyframes scan{0%{transform:translateY(-40%)}50%{transform:translateY(330%)}100%{transform:translateY(-40%)}}
@keyframes grow{from{transform:scaleX(.15)}to{transform:scaleX(1)}}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.float{animation:drift 5s ease-in-out infinite}
.pulse{animation:pulse 2.6s ease-in-out infinite}
.stagger>*{opacity:0;animation:floatIn .55s ease both}
.stagger>*:nth-child(1){animation-delay:.15s}
.stagger>*:nth-child(2){animation-delay:.35s}
.stagger>*:nth-child(3){animation-delay:.55s}
.stagger>*:nth-child(4){animation-delay:.75s}
.stagger>*:nth-child(5){animation-delay:.95s}

/* Reveal au défilement */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .scanline::after,.timeline::after,.float,.pulse,.stagger>*{animation:none}
  .stagger>*{opacity:1}
  .reveal{opacity:1;transform:none;transition:none}
}
@media(max-width:880px){
  .hero .wrap{grid-template-columns:1fr;gap:30px}
  .hero-visual{order:2}
  .g3,.g4,.steps,.g2,.price-grid,.hub .grid-hub{grid-template-columns:1fr}
  .section{padding:48px 0}
  .eidas{padding:32px 24px}
  .nav-cta .btn-ghost{display:none}
}