/* =====================================================================
   OMAMORI — Refonte site web · v1 maquettes
   Feuille de style partagee (accueil, offres, souscription)
   Palette : teal/turquoise Omamori (#059669)
   Aucune dependance externe : ouvrable hors-ligne dans un navigateur
   ===================================================================== */

/* ---------- 1. Tokens / variables ---------- */
:root{
  --teal-900:#064e3b;
  --teal-800:#065f46;
  --teal-700:#047857;
  --teal-600:#059669;   /* primaire marque */
  --teal-500:#10b981;
  --teal-400:#34d399;
  --teal-100:#d1fae5;
  --teal-50:#ecfdf5;

  --ink:#0f172a;
  --ink-2:#334155;
  --ink-3:#64748b;
  --ink-4:#94a3b8;

  --bg:#ffffff;
  --bg-soft:#f6f9f8;
  --bg-mute:#eef2f1;
  --border:#e3e8e6;

  --amber:#f59e0b;
  --amber-bg:#fef3c7;
  --red:#dc2626;

  --radius-sm:10px;
  --radius:16px;
  --radius-lg:24px;
  --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --shadow:0 4px 16px rgba(15,23,42,.07), 0 2px 6px rgba(15,23,42,.05);
  --shadow-lg:0 24px 48px -12px rgba(6,95,70,.22), 0 8px 20px rgba(15,23,42,.08);
  --shadow-teal:0 16px 40px -8px rgba(5,150,105,.45);

  --maxw:1240px;
  --grad-teal:linear-gradient(135deg,#10b981 0%,#059669 45%,#047857 100%);
  --font:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- 2. Reset / base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:1rem}

h1,h2,h3,h4{line-height:1.18;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:clamp(2.1rem,5vw,3.5rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h3{font-size:1.28rem;font-weight:750}
p{color:var(--ink-2)}

/* ---------- 3. Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.section{padding:84px 0}
.section--soft{background:var(--bg-soft)}
.section--tight{padding:54px 0}
.center{text-align:center}
.eyebrow{
  display:inline-block;font-size:.82rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--teal-700);
  background:var(--teal-50);border:1px solid var(--teal-100);
  padding:6px 14px;border-radius:var(--radius-pill);margin-bottom:18px;
}
.section-head{max-width:680px;margin:0 auto 48px}
.section-head.left{margin-left:0;text-align:left}
.section-head p{font-size:1.12rem;margin-top:14px;color:var(--ink-3)}
.lead{font-size:1.18rem;color:var(--ink-2)}

/* ---------- 4. Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:1rem;padding:14px 26px;border-radius:var(--radius-pill);
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
  white-space:nowrap;line-height:1;
}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--grad-teal);color:#fff;box-shadow:var(--shadow-teal)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 44px -8px rgba(5,150,105,.55)}
.btn-secondary{background:#fff;color:var(--teal-700);border:1.6px solid var(--teal-200,#a7f3d0)}
.btn-secondary{border-color:#bff0dc}
.btn-secondary:hover{background:var(--teal-50);transform:translateY(-2px)}
.btn-ghost{color:var(--ink-2);padding:14px 18px}
.btn-ghost:hover{color:var(--teal-700)}
.btn-light{background:#fff;color:var(--teal-700)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-outline-light{background:transparent;color:#fff;border:1.6px solid rgba(255,255,255,.5)}
.btn-outline-light:hover{background:rgba(255,255,255,.12)}
.btn-lg{padding:17px 34px;font-size:1.08rem}
.btn-block{width:100%}
.btn-sm{padding:10px 18px;font-size:.92rem}

/* ---------- 5. En-tete / navigation ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;gap:28px;height:74px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.28rem;letter-spacing:-.02em}
.brand .logo{width:38px;height:38px;flex:none}
.brand sup{font-size:.6rem;color:var(--ink-4);font-weight:700}
.nav-links{display:flex;gap:6px;margin-left:8px}
.nav-links a{
  padding:9px 14px;border-radius:var(--radius-sm);font-weight:600;
  font-size:.97rem;color:var(--ink-2);transition:background .15s,color .15s;
}
.nav-links a:hover{background:var(--bg-mute);color:var(--teal-700)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;width:44px;height:44px;border-radius:var(--radius-sm)}
.nav-toggle span{display:block;width:22px;height:2.4px;background:var(--ink);margin:5px auto;border-radius:2px;transition:.2s}

/* ---------- 6. Hero ---------- */
.hero{position:relative;background:var(--bg);overflow:hidden;padding-top:48px}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;padding-bottom:110px}
.hero-copy h1{margin-bottom:20px}
.hero-copy h1 .hl{
  background:linear-gradient(120deg,var(--teal-600),var(--teal-400));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-copy .lead{margin-bottom:26px;max-width:540px}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:20px}
.hero-trust{display:flex;flex-wrap:wrap;gap:18px;color:var(--ink-3);font-size:.92rem;font-weight:600}
.hero-trust span{display:flex;align-items:center;gap:7px}
.hero-trust svg{width:17px;height:17px;color:var(--teal-600);flex:none}
.hero-bg-blob{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;z-index:0;
}
.blob-1{width:420px;height:420px;background:var(--teal-100);top:-120px;right:-80px}
.blob-2{width:320px;height:320px;background:#cffafe;bottom:-40px;left:-120px}
.hero-inner,.hero .wrap{position:relative;z-index:1}

/* maquette telephone dessinee en CSS */
.phone-wrap{display:flex;justify-content:center;position:relative}
.phone{
  width:288px;background:#0f172a;border-radius:42px;padding:13px;
  box-shadow:var(--shadow-lg);position:relative;
}
.phone::before{
  content:"";position:absolute;top:13px;left:50%;transform:translateX(-50%);
  width:110px;height:24px;background:#0f172a;border-radius:0 0 16px 16px;z-index:3;
}
.phone-screen{background:var(--bg-soft);border-radius:31px;overflow:hidden}
.app-top{background:var(--grad-teal);color:#fff;padding:34px 18px 20px}
.app-top .hello{font-size:.78rem;opacity:.9}
.app-top .biz{font-weight:800;font-size:1.05rem;margin-top:2px}
.app-body{padding:14px}
.app-card{background:#fff;border-radius:14px;padding:13px;box-shadow:var(--shadow-sm);margin-bottom:10px}
.app-card .k{font-size:.68rem;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.app-card .v{font-size:1.18rem;font-weight:800;margin-top:3px}
.app-card .v.green{color:var(--teal-600)}
.app-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.app-dsf{display:flex;align-items:center;gap:10px;background:var(--teal-50);border:1px solid var(--teal-100)}
.app-dsf .tick{width:30px;height:30px;border-radius:50%;background:var(--teal-600);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.app-dsf .tick svg{width:16px;height:16px}
.app-dsf .t1{font-weight:800;font-size:.86rem}
.app-dsf .t2{font-size:.7rem;color:var(--ink-3)}
.app-chart{display:flex;align-items:flex-end;gap:7px;height:62px;padding-top:6px}
.app-chart i{flex:1;background:var(--teal-100);border-radius:5px 5px 0 0;display:block}
.app-chart i:nth-child(2){background:var(--teal-200,#a7f3d0)}
.app-chart i:nth-child(3){background:var(--teal-400)}
.app-chart i:nth-child(4){background:var(--teal-500)}
.app-chart i:nth-child(5){background:var(--teal-600)}
.app-nav{display:flex;justify-content:space-around;background:#fff;padding:11px 0;border-top:1px solid var(--border)}
.app-nav i{width:22px;height:22px;border-radius:6px;background:var(--bg-mute);display:block}
.app-nav i:first-child{background:var(--teal-600)}
.float-badge{
  position:absolute;background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);
  padding:11px 14px;display:flex;align-items:center;gap:10px;font-size:.82rem;font-weight:700;
}
.float-badge svg{width:20px;height:20px;flex:none}
.float-badge .fb-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}
.fb-top{top:54px;left:-44px}
.fb-bot{bottom:80px;right:-40px}

/* vague decorative */
.wave-divider{display:block;width:100%;height:auto;margin-bottom:-6px}

/* ---------- 7. Bandeau confiance ---------- */
.trustbar{background:var(--bg-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.trustbar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 34px;padding:26px 22px}
.trustbar .lbl{font-size:.86rem;font-weight:700;color:var(--ink-3)}
.trust-chip{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.95rem;color:var(--ink-2)}
.trust-chip svg{width:20px;height:20px;color:var(--teal-600)}

/* ---------- 8. Cartes generiques / grilles ---------- */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;transition:transform .18s ease,box-shadow .2s ease,border-color .2s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfe9df}
.card .ic{
  width:52px;height:52px;border-radius:14px;background:var(--teal-50);
  color:var(--teal-700);display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.card .ic svg{width:26px;height:26px}
.card h3{margin-bottom:8px}
.card p{font-size:.97rem;color:var(--ink-3)}

/* probleme -> solution */
.pain-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.pain-card .tag-pain{
  display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:800;
  color:var(--red);background:#fef2f2;padding:5px 11px;border-radius:var(--radius-pill);margin-bottom:12px;
}
.pain-card h3{font-size:1.08rem;margin-bottom:8px}
.pain-card p{font-size:.95rem;color:var(--ink-3);margin-bottom:14px}
.pain-card .sol{
  display:flex;gap:9px;align-items:flex-start;font-size:.95rem;font-weight:650;
  color:var(--teal-800);background:var(--teal-50);border-radius:12px;padding:12px 14px;
}
.pain-card .sol svg{width:18px;height:18px;color:var(--teal-600);flex:none;margin-top:2px}

/* ---------- 9. Sections piliers (feature alternee) ---------- */
.pillar{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.pillar+.pillar{margin-top:80px}
.pillar.rev .pillar-media{order:2}
.pillar-tag{
  display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.85rem;
  color:var(--teal-700);margin-bottom:14px;
}
.pillar-tag .n{width:26px;height:26px;border-radius:8px;background:var(--teal-600);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem}
.pillar h2{font-size:1.95rem;margin-bottom:14px}
.pillar .feat-list{margin-top:18px;display:grid;gap:11px}
.feat-list li{display:flex;gap:11px;align-items:flex-start;font-weight:600;color:var(--ink-2);font-size:1rem}
.feat-list svg{width:22px;height:22px;color:var(--teal-600);flex:none}
.pillar-media{
  background:var(--grad-teal);border-radius:var(--radius-lg);padding:34px;
  min-height:300px;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
}
.pillar-media.soft{background:linear-gradient(135deg,#ecfdf5,#d1fae5)}
.media-panel{background:#fff;border-radius:16px;padding:20px;width:100%;box-shadow:var(--shadow)}
.media-panel .mp-h{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.media-panel .mp-dot{width:10px;height:10px;border-radius:50%;background:var(--teal-500)}
.media-panel .mp-t{font-weight:800;font-size:.95rem}
.media-line{height:11px;border-radius:6px;background:var(--bg-mute);margin-bottom:9px}
.media-line.w70{width:70%}.media-line.w50{width:50%}.media-line.w85{width:85%}
.media-pill{
  display:inline-flex;align-items:center;gap:7px;background:var(--teal-50);
  color:var(--teal-800);font-weight:800;font-size:.85rem;padding:8px 13px;border-radius:var(--radius-pill);
}
.media-pill svg{width:16px;height:16px;color:var(--teal-600)}

/* ---------- 10. Personae / pour qui ---------- */
.persona-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:28px;display:flex;flex-direction:column;transition:transform .18s,box-shadow .2s;
}
.persona-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.persona-card .av{
  width:54px;height:54px;border-radius:50%;background:var(--grad-teal);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;margin-bottom:14px;
}
.persona-card h3{margin-bottom:6px}
.persona-card .who{font-size:.88rem;color:var(--teal-700);font-weight:700;margin-bottom:12px}
.persona-card p{font-size:.95rem;color:var(--ink-3);margin-bottom:16px;flex:1}
.persona-card .need{font-size:.9rem;color:var(--ink-2);display:flex;gap:8px;margin-bottom:8px}
.persona-card .need svg{width:17px;height:17px;color:var(--teal-600);flex:none;margin-top:3px}
.persona-card a.lnk{margin-top:14px;font-weight:800;color:var(--teal-700);display:flex;align-items:center;gap:6px}
.persona-card a.lnk svg{width:17px;height:17px}

/* ---------- 11. Tableau comparatif ---------- */
.table-scroll{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border)}
.cmp-table{width:100%;border-collapse:collapse;min-width:680px;background:#fff}
.cmp-table th,.cmp-table td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--border)}
.cmp-table thead th{font-size:.92rem;color:var(--ink-3);font-weight:800;background:var(--bg-soft)}
.cmp-table thead th.us{background:var(--teal-600);color:#fff;border-radius:10px 10px 0 0}
.cmp-table td.us{background:var(--teal-50);font-weight:700}
.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table td:first-child{font-weight:700;color:var(--ink)}
.cmp-yes{color:var(--teal-600);font-weight:800}
.cmp-no{color:var(--ink-4);font-weight:700}
.cmp-table svg{width:19px;height:19px;display:inline}

/* ---------- 12. Tarifs ---------- */
.bill-toggle{
  display:inline-flex;align-items:center;gap:6px;background:var(--bg-mute);
  border-radius:var(--radius-pill);padding:5px;margin:0 auto 12px;
}
.bill-toggle button{
  padding:9px 20px;border-radius:var(--radius-pill);font-weight:700;font-size:.93rem;
  color:var(--ink-3);transition:.18s;
}
.bill-toggle button.on{background:#fff;color:var(--teal-700);box-shadow:var(--shadow-sm)}
.bill-save{font-size:.86rem;color:var(--teal-700);font-weight:800}

.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;max-width:960px;margin:0 auto}
.plan{
  background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-lg);
  padding:28px 24px;display:flex;flex-direction:column;position:relative;transition:transform .18s,box-shadow .2s;
}
.plan:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.plan.featured{border-color:var(--teal-600);box-shadow:var(--shadow-lg)}
.plan.featured::before{
  content:"Le plus choisi";position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--grad-teal);color:#fff;font-size:.76rem;font-weight:800;
  padding:6px 16px;border-radius:var(--radius-pill);white-space:nowrap;letter-spacing:.02em;
}
.plan .pl-name{font-size:1.18rem;font-weight:800}
.plan .pl-for{font-size:.86rem;color:var(--ink-3);margin:5px 0 16px;min-height:38px}
.plan .pl-price{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
.plan .pl-amount{font-size:2.1rem;font-weight:850;letter-spacing:-.03em}
.plan .pl-unit{font-size:.9rem;color:var(--ink-3);font-weight:600}
.plan .pl-note{font-size:.82rem;color:var(--ink-4);margin:6px 0 18px;min-height:20px}
.plan .pl-cta{margin-bottom:20px}
.plan .pl-feats{display:grid;gap:10px}
.plan .pl-feats li{display:flex;gap:9px;font-size:.92rem;color:var(--ink-2);align-items:flex-start}
.plan .pl-feats svg{width:18px;height:18px;color:var(--teal-600);flex:none;margin-top:2px}
.plan .pl-feats li.muted{color:var(--ink-4)}
.plan .pl-feats li.muted svg{color:var(--ink-4)}
.plan-badge{
  display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--radius-pill);margin-bottom:10px;
}
.plan-badge.new{background:var(--amber-bg);color:#92400e}
.plan-badge.pop{background:var(--teal-50);color:var(--teal-700)}

.included{
  background:var(--teal-50);border:1px solid var(--teal-100);border-radius:var(--radius);
  padding:26px 28px;margin-top:30px;
}
.included h3{margin-bottom:16px;font-size:1.1rem}
.included ul{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.included li{display:flex;gap:9px;font-weight:650;font-size:.95rem;color:var(--teal-900);align-items:flex-start}
.included svg{width:19px;height:19px;color:var(--teal-600);flex:none;margin-top:2px}

.price-disclaimer{
  font-size:.85rem;color:var(--ink-3);background:var(--amber-bg);border:1px solid #fde68a;
  border-radius:12px;padding:11px 16px;margin-top:18px;display:flex;gap:9px;align-items:flex-start;
}
.price-disclaimer svg{width:18px;height:18px;color:var(--amber);flex:none;margin-top:2px}

/* ---------- 13. FAQ (accordeon natif) ---------- */
.faq{max-width:780px;margin:0 auto;display:grid;gap:12px}
.faq details{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:4px 22px;transition:box-shadow .2s;
}
.faq details[open]{box-shadow:var(--shadow-sm);border-color:#cfe9df}
.faq summary{
  list-style:none;cursor:pointer;font-weight:750;font-size:1.04rem;
  padding:17px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{
  width:28px;height:28px;border-radius:50%;background:var(--teal-50);color:var(--teal-700);
  display:flex;align-items:center;justify-content:center;flex:none;font-size:1.2rem;transition:.2s;
}
.faq details[open] summary .pm{background:var(--teal-600);color:#fff;transform:rotate(45deg)}
.faq details p{padding:0 0 18px;color:var(--ink-3);font-size:.98rem}

/* ---------- 14. Bandeau CTA final ---------- */
.cta-band{background:var(--grad-teal);position:relative;overflow:hidden}
.cta-band .wrap{padding:70px 22px;text-align:center;position:relative;z-index:1}
.cta-band h2{color:#fff;margin-bottom:14px}
.cta-band p{color:rgba(255,255,255,.92);font-size:1.12rem;max-width:560px;margin:0 auto 26px}
.cta-band .hero-actions{justify-content:center}
.cta-ring{position:absolute;border:2px solid rgba(255,255,255,.18);border-radius:50%}
.cta-ring.r1{width:340px;height:340px;top:-150px;left:-80px}
.cta-ring.r2{width:240px;height:240px;bottom:-130px;right:-40px}

/* ---------- 15. Footer ---------- */
.site-footer{background:#0c1f1a;color:#cbd5d1;padding:60px 0 28px;font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand .brand{color:#fff;margin-bottom:14px}
.foot-brand p{color:#94a3a0;font-size:.93rem;max-width:300px}
.foot-contact{margin-top:16px;display:grid;gap:8px}
.foot-contact a,.foot-contact span{display:flex;align-items:center;gap:9px;color:#cbd5d1}
.foot-contact svg{width:17px;height:17px;color:var(--teal-400);flex:none}
.foot-col h4{color:#fff;font-size:.95rem;margin-bottom:14px;letter-spacing:0}
.foot-col ul{display:grid;gap:9px}
.foot-col a{color:#94a3a0;font-size:.93rem}
.foot-col a:hover{color:var(--teal-400)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-top:24px;color:#7c8b87;font-size:.86rem}
.foot-social{display:flex;gap:10px}
.foot-social a{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center}
.foot-social a:hover{background:var(--teal-600)}
.foot-social svg{width:17px;height:17px;color:#cbd5d1}

/* ---------- 16. Tunnel de souscription ---------- */
.sub-hero{background:var(--bg-soft);border-bottom:1px solid var(--border);padding:34px 0 26px}
.sub-hero h1{font-size:clamp(1.7rem,3.5vw,2.3rem)}
.sub-hero p{margin-top:8px;color:var(--ink-3)}

.stepper{display:flex;align-items:center;gap:6px;max-width:720px;margin:24px auto 0}
.stepper .st{display:flex;align-items:center;gap:9px;flex:1}
.stepper .st .dot{
  width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;
  color:var(--ink-4);flex:none;transition:.2s;
}
.stepper .st .lbl{font-size:.84rem;font-weight:700;color:var(--ink-4)}
.stepper .st .bar{flex:1;height:3px;background:var(--border);border-radius:2px}
.stepper .st.active .dot{background:var(--teal-600);border-color:var(--teal-600);color:#fff}
.stepper .st.active .lbl{color:var(--teal-800)}
.stepper .st.done .dot{background:var(--teal-600);border-color:var(--teal-600);color:#fff}
.stepper .st.done .bar{background:var(--teal-600)}
.stepper .st.active .bar{background:var(--border)}

.sub-layout{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:start;padding:46px 0 80px}
.sub-step{display:none;animation:fade .3s ease}
.sub-step.show{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sub-step h2{font-size:1.5rem;margin-bottom:6px}
.sub-step .step-sub{color:var(--ink-3);margin-bottom:24px}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:4px}
.field.full{grid-column:1/-1}
.field label{font-weight:700;font-size:.93rem;color:var(--ink-2)}
.field label .req{color:var(--red)}
.field .hint{font-size:.82rem;color:var(--ink-4);font-weight:500}
.field input,.field select,.field textarea{
  border:1.5px solid var(--border);border-radius:11px;padding:12px 14px;
  color:var(--ink);background:#fff;transition:border .15s,box-shadow .15s;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--teal-500);box-shadow:0 0 0 4px var(--teal-50);
}
.field.error input,.field.error select{border-color:var(--red)}
.field .err-msg{font-size:.82rem;color:var(--red);font-weight:600;display:none}
.field.error .err-msg{display:block}
.input-prefix{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:11px;overflow:hidden;background:#fff}
.input-prefix:focus-within{border-color:var(--teal-500);box-shadow:0 0 0 4px var(--teal-50)}
.input-prefix span{padding:12px 12px;background:var(--bg-soft);color:var(--ink-3);font-weight:700;font-size:.92rem;white-space:nowrap}
.input-prefix input{border:none!important;box-shadow:none!important;border-radius:0}
.input-suffix span{border-left:1px solid var(--border);border-right:none}

/* choix offre dans le tunnel */
.offer-pick{display:grid;gap:14px}
.offer-opt{
  display:flex;gap:15px;align-items:flex-start;border:1.5px solid var(--border);
  border-radius:var(--radius);padding:18px 20px;cursor:pointer;transition:.16s;background:#fff;
}
.offer-opt:hover{border-color:#bfe6d6;background:var(--bg-soft)}
.offer-opt.sel{border-color:var(--teal-600);background:var(--teal-50);box-shadow:0 0 0 3px var(--teal-100)}
.offer-opt input{margin-top:3px;accent-color:var(--teal-600);width:18px;height:18px;flex:none}
.offer-opt .oo-body{flex:1}
.offer-opt .oo-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.offer-opt .oo-name{font-weight:800;font-size:1.08rem}
.offer-opt .oo-price{font-weight:800;color:var(--teal-700)}
.offer-opt .oo-desc{font-size:.9rem;color:var(--ink-3);margin-top:4px}

.radio-row{display:flex;flex-wrap:wrap;gap:10px}
.radio-card{
  border:1.5px solid var(--border);border-radius:12px;padding:12px 16px;cursor:pointer;
  font-weight:700;font-size:.93rem;color:var(--ink-2);transition:.15s;display:flex;align-items:center;gap:9px;
}
.radio-card:hover{border-color:#bfe6d6}
.radio-card.sel{border-color:var(--teal-600);background:var(--teal-50);color:var(--teal-800)}
.radio-card input{accent-color:var(--teal-600)}

.step-actions{display:flex;justify-content:space-between;gap:12px;margin-top:30px;padding-top:22px;border-top:1px solid var(--border)}

/* recap lateral */
.sub-summary{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;position:sticky;top:94px;
}
.sub-summary h3{font-size:1.05rem;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.sum-row{display:flex;justify-content:space-between;gap:12px;margin-bottom:11px;font-size:.94rem}
.sum-row .lab{color:var(--ink-3)}
.sum-row .val{font-weight:700;text-align:right}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding-top:14px;border-top:2px solid var(--border)}
.sum-total .lab{font-weight:800}
.sum-total .val{font-weight:850;font-size:1.45rem;color:var(--teal-700)}
.sum-total .per{font-size:.82rem;color:var(--ink-3);font-weight:600}
.sum-note{margin-top:14px;font-size:.83rem;color:var(--ink-3);background:var(--bg-soft);border-radius:10px;padding:12px;display:flex;gap:8px}
.sum-note svg{width:16px;height:16px;color:var(--teal-600);flex:none;margin-top:2px}
.sum-help{margin-top:16px;font-size:.86rem;color:var(--ink-3);text-align:center}

/* recap final / confirmation */
.review-box{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:18px}
.review-box h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-bottom:14px;display:flex;justify-content:space-between}
.review-box h4 a{color:var(--teal-700);font-weight:800;text-transform:none;letter-spacing:0;font-size:.86rem}
.review-line{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:.95rem}
.review-line .rl-k{color:var(--ink-3)}
.review-line .rl-v{font-weight:700;text-align:right}
.consent{display:flex;gap:11px;align-items:flex-start;margin:20px 0;font-size:.92rem;color:var(--ink-2)}
.consent input{accent-color:var(--teal-600);width:19px;height:19px;flex:none;margin-top:2px}

.confirm{text-align:center;max-width:640px;margin:0 auto;padding:30px 0}
.confirm .big-tick{
  width:88px;height:88px;border-radius:50%;background:var(--teal-50);border:3px solid var(--teal-100);
  display:flex;align-items:center;justify-content:center;margin:0 auto 24px;
}
.confirm .big-tick svg{width:44px;height:44px;color:var(--teal-600)}
.confirm h2{margin-bottom:12px}
.confirm p{font-size:1.06rem;color:var(--ink-3);margin-bottom:8px}
.confirm .ref{
  display:inline-block;background:var(--teal-50);border:1px dashed var(--teal-200,#9fe3c9);
  color:var(--teal-800);font-weight:800;padding:10px 20px;border-radius:12px;margin:14px 0 24px;
}
.next-steps{text-align:left;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-top:10px}
.next-steps h3{font-size:1.05rem;margin-bottom:16px}
.next-steps ol{list-style:none;display:grid;gap:14px}
.next-steps li{display:flex;gap:13px;align-items:flex-start}
.next-steps .ns-n{
  width:30px;height:30px;border-radius:50%;background:var(--teal-600);color:#fff;
  font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;font-size:.9rem;
}
.next-steps .ns-t b{display:block;color:var(--ink)}
.next-steps .ns-t span{font-size:.92rem;color:var(--ink-3)}

/* ---------- 17. Bandeau note maquette ---------- */
.mockup-flag{
  background:#0c1f1a;color:#d1fae5;font-size:.84rem;text-align:center;
  padding:9px 16px;font-weight:600;
}
.mockup-flag b{color:#fff}

/* ---------- 18. Utilitaires ---------- */
.mt-0{margin-top:0}
.hide-mob{display:initial}
.only-mob{display:none}

/* ---------- 19. Responsive ---------- */
@media(max-width:960px){
  .nav-links,.nav-cta .btn-ghost{display:none}
  .nav-toggle{display:block}
  .nav.open .nav-links{
    display:flex;flex-direction:column;position:absolute;top:74px;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--border);padding:14px;gap:4px;box-shadow:var(--shadow);
  }
  .nav.open .nav-links a{padding:13px 14px}
  .hero-inner{grid-template-columns:1fr;gap:36px;padding-bottom:70px}
  .phone-wrap{order:-1}
  .pillar,.pillar.rev .pillar-media{grid-template-columns:1fr;order:0}
  .pillar-media{order:-1!important}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:repeat(2,1fr)}
  .included ul{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .sub-layout{grid-template-columns:1fr}
  .sub-summary{position:static;order:-1}
  .stepper .st .lbl{display:none}
}
@media(max-width:600px){
  body{font-size:16px}
  .section{padding:58px 0}
  .grid-3,.grid-4,.grid-2,.price-grid,.included ul,.foot-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .hero-actions .btn,.cta-band .btn{width:100%}
  .stepper .st .bar{min-width:14px}
  .hide-mob{display:none}
  .only-mob{display:initial}
  .float-badge{display:none}
  .foot-bottom{flex-direction:column}
}

/* =====================================================================
   ADDITIONS v2 — logo officiel Omamori + recentrage « ERP en ligne »
   ===================================================================== */

/* --- En-tete : logo image officiel (le logo contient deja le mot Omamori) --- */
.nav{height:80px}
.brand .logo-img{height:58px;width:auto;display:block}
.sub-summary{top:104px}

/* --- Pied de page : logo sur pastille blanche (lisible sur fond sombre) --- */
.foot-logo-chip{background:#fff;border-radius:13px;padding:8px 15px;display:inline-block;margin-bottom:16px}
.foot-logo-chip img{height:54px;width:auto;display:block}

/* --- Hero v2 : maquette « navigateur » de l'ERP Omamori-Web --- */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;padding:14px 0 46px}
.browser{
  width:100%;max-width:560px;background:#fff;border-radius:16px;
  box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid var(--border);
}
.browser-bar{display:flex;align-items:center;gap:11px;padding:11px 14px;background:var(--bg-mute);border-bottom:1px solid var(--border)}
.browser-dots{display:flex;gap:6px;flex:none}
.browser-dots i{width:11px;height:11px;border-radius:50%;background:#c3cfcb;display:block}
.browser-url{
  flex:1;background:#fff;border-radius:8px;padding:7px 12px;font-size:.76rem;
  color:var(--ink-3);font-weight:650;display:flex;align-items:center;gap:7px;
  white-space:nowrap;overflow:hidden;
}
.browser-url svg{width:13px;height:13px;color:var(--teal-600);flex:none}
.erp{display:flex;min-height:312px}
.erp-side{width:80px;background:linear-gradient(180deg,#065f46,#047857);padding:15px 0;flex:none}
.erp-side .es-mark{
  width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.16);
  margin:0 auto 18px;display:flex;align-items:center;justify-content:center;
}
.erp-side .es-mark svg{width:22px;height:22px}
.erp-side i{display:block;height:8px;margin:0 16px 13px;border-radius:4px;background:rgba(255,255,255,.22)}
.erp-side i.on{background:rgba(255,255,255,.92)}
.erp-main{flex:1;padding:16px;background:var(--bg-soft);min-width:0}
.erp-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;gap:10px}
.erp-top .et-title{font-weight:800;font-size:.92rem}
.erp-top .et-pill{font-size:.66rem;background:var(--teal-50);color:var(--teal-700);font-weight:800;padding:5px 10px;border-radius:var(--radius-pill);white-space:nowrap}
.erp-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:11px}
.erp-kpi{background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 11px}
.erp-kpi .kk{font-size:.57rem;color:var(--ink-3);font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.erp-kpi .kv{font-size:.98rem;font-weight:850;margin-top:4px}
.erp-kpi .kv.green{color:var(--teal-600)}
.erp-panel{background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px 13px}
.erp-panel .ep-h{font-size:.65rem;font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;display:flex;justify-content:space-between}
.erp-chart{display:flex;align-items:flex-end;gap:8px;height:78px}
.erp-chart i{flex:1;border-radius:5px 5px 0 0;background:var(--teal-100);display:block}
.erp-chart i:nth-child(3){background:#a7f3d0}
.erp-chart i:nth-child(4){background:var(--teal-400)}
.erp-chart i:nth-child(5){background:var(--teal-500)}
.erp-chart i:nth-child(6){background:var(--teal-600)}

/* --- Petit telephone secondaire : « et aussi sur mobile » --- */
.phone-mini{
  position:absolute;right:-24px;bottom:-30px;width:140px;background:#0f172a;
  border-radius:26px;padding:7px;box-shadow:var(--shadow-lg);z-index:3;
}
.phone-mini .pms{background:var(--grad-teal);border-radius:20px;overflow:hidden}
.phone-mini .pms-top{padding:20px 13px 13px;color:#fff}
.phone-mini .pms-top b{font-size:.8rem;display:block}
.phone-mini .pms-top span{font-size:.62rem;opacity:.9}
.phone-mini .pms-body{background:#fff;padding:11px;display:grid;gap:8px}
.phone-mini .pms-card{background:var(--bg-soft);border:1px solid var(--border);border-radius:8px;height:28px}
.phone-mini .pms-card.tall{height:46px}

/* positions des badges flottants autour du navigateur */
.hero-visual .fb-top{top:-16px;left:-26px}
.hero-visual .fb-mobile{bottom:34px;left:-28px;z-index:4}

/* --- Responsive v2 --- */
@media(max-width:960px){
  .nav{height:74px}
  .brand .logo-img{height:52px}
  .nav.open .nav-links{top:74px}
  .hero-visual{padding:6px 0 16px}
  .phone-mini{right:-10px;bottom:-20px}
}
@media(max-width:600px){
  .browser{max-width:none}
  .phone-mini{width:108px;right:0;bottom:-14px;border-radius:20px}
  .erp-side{width:56px}
  .erp-side i{margin:0 12px 11px}
  .erp-kpis{gap:6px}
  .foot-logo-chip img{height:48px}
}

/* =====================================================================
   ADDITIONS v4 — logo HD, logos clients, partenaire local,
   contact, WhatsApp, mentions legales, selecteur de langue
   ===================================================================== */

/* --- Logo officiel haute definition --- */
.nav{height:88px}
.brand .logo-img{height:66px;width:auto;display:block}
.sub-summary{top:112px}
.foot-logo-chip{padding:10px 16px}
.foot-logo-chip img{height:58px}

/* --- Selecteur de langue --- */
.lang-switch{display:flex;align-items:center;gap:1px}
.lang-switch a{padding:6px 8px;border-radius:8px;font-weight:800;font-size:.82rem;color:var(--ink-4)}
.lang-switch a.on{background:var(--teal-50);color:var(--teal-700)}
.lang-switch a:hover{color:var(--teal-700)}
.lang-switch .sep{color:var(--border);font-weight:400}

/* --- Mur de logos clients (harmonises) --- */
.logo-wall{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.logo-tile{
  flex:0 0 180px;height:108px;background:#fff;border:1px solid var(--border);
  border-radius:14px;display:flex;align-items:center;justify-content:center;
  padding:18px 20px;transition:transform .18s,box-shadow .2s;
}
.logo-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.logo-tile img{
  max-height:100%;max-width:100%;width:auto;object-fit:contain;
}
a.logo-tile{text-decoration:none}

/* --- Historique des versions de l'application mobile --- */
.release-list{display:grid;gap:14px;max-width:780px;margin:0 auto}
.release-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.release-badge{background:var(--teal-600);color:#fff;font-size:.72rem;font-weight:800;padding:3px 10px;border-radius:999px}
.release-date{color:#64748b;font-size:.86rem;margin-left:auto}
.release-notes{margin-top:8px;color:#475569;white-space:pre-line}

/* --- Barre d'edition equipe (visible seulement par le staff connecte) --- */
.oma-editbar{background:#0f766e;color:#fff;font-size:.85rem;display:flex;
  align-items:center;justify-content:center;gap:10px 18px;padding:7px 16px;flex-wrap:wrap}
.oma-editbar a{color:#fff}
.oma-editbar-btn{background:#fff;color:#0f766e !important;text-decoration:none;
  font-weight:800;padding:4px 13px;border-radius:999px}

/* --- Editeur "sur la page" (mode equipe) --- */
textarea.oma-ed{font:inherit;color:inherit;line-height:inherit;letter-spacing:inherit;
  width:100%;display:block;margin:0;padding:3px 7px;box-sizing:border-box;
  border:1px dashed #10b981;border-radius:5px;background:#f0fdf4;
  resize:none;overflow:hidden}
textarea.oma-ed:focus{outline:0;border:1px solid #047857;background:#ecfdf5}
.oma-savebar{position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:#0f766e;color:#fff;display:flex;align-items:center;justify-content:center;
  gap:12px 16px;padding:12px 16px;flex-wrap:wrap;box-shadow:0 -4px 18px rgba(0,0,0,.22)}
.oma-savebar button{border:0;border-radius:999px;font-weight:800;padding:9px 20px;
  cursor:pointer;font-size:.9rem}
.oma-savebar .oma-save{background:#fff;color:#0f766e}
.oma-savebar .oma-save:disabled{opacity:.6;cursor:default}
.oma-savebar .oma-cancel{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6)}

/* --- Page libre (contenu editorial cree au back-office) --- */
.free-page{max-width:820px;margin:0 auto;padding:46px 0;line-height:1.75;color:#334155}
.free-page h2{font-size:1.5rem;margin:30px 0 12px}
.free-page h3{font-size:1.18rem;margin:24px 0 8px}
.free-page p{margin:0 0 14px}
.free-page ul,.free-page ol{margin:0 0 14px 22px}
.free-page img{max-width:100%;border-radius:12px;margin:14px 0}
.free-page a{color:#047857;font-weight:600}

/* --- Section partenaire local --- */
.local-band{background:var(--grad-teal);position:relative;overflow:hidden}
.local-band .wrap{position:relative;z-index:1;padding:74px 22px}
.local-band .eyebrow{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.25)}
.local-band h2{color:#fff}
.local-band .lead{color:rgba(255,255,255,.92)}
.local-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.local-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);padding:24px}
.local-card .lc-ic{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.local-card .lc-ic svg{width:25px;height:25px;color:#fff}
.local-card h3{color:#fff;font-size:1.08rem;margin-bottom:7px}
.local-card p{color:rgba(255,255,255,.85);font-size:.93rem}

/* --- Bouton flottant WhatsApp --- */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:80;display:flex;align-items:center;gap:0;
  height:58px;background:#25D366;border-radius:var(--radius-pill);
  box-shadow:0 12px 28px rgba(37,211,102,.45);transition:transform .15s;overflow:hidden;
}
.wa-float:hover{transform:translateY(-2px)}
.wa-float .wa-ic{width:58px;height:58px;display:flex;align-items:center;justify-content:center;flex:none}
.wa-float .wa-ic svg{width:32px;height:32px;color:#fff}
.wa-float .wa-lbl{color:#fff;font-weight:800;font-size:.95rem;max-width:0;white-space:nowrap;transition:max-width .25s,padding .25s;overflow:hidden}
.wa-float:hover .wa-lbl{max-width:220px;padding-right:22px}

/* --- Page contact --- */
.contact-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start;padding:46px 0 30px}
.contact-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:30px}
.contact-card h2{font-size:1.4rem;margin-bottom:6px}
.contact-card .cc-sub{color:var(--ink-3);margin-bottom:22px}
.channels{display:grid;gap:14px}
.channel{display:flex;gap:15px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:.18s}
.channel:hover{border-color:#bfe6d6;box-shadow:var(--shadow-sm)}
.channel .ch-ic{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex:none}
.channel .ch-ic svg{width:25px;height:25px}
.channel .ch-ic.wa{background:#e7f9ee;color:#1da851}
.channel .ch-ic.call{background:var(--teal-50);color:var(--teal-700)}
.channel .ch-ic.mail{background:#eef2ff;color:#4f46e5}
.channel .ch-ic.loc{background:#fef3c7;color:#b45309}
.channel .ch-b{flex:1;min-width:0}
.channel h3{font-size:1.05rem;margin-bottom:3px}
.channel p{font-size:.91rem;color:var(--ink-3);margin-bottom:4px}
.channel .ch-link{font-weight:800;color:var(--teal-700);font-size:.95rem;display:inline-flex;gap:6px;align-items:center;margin-top:5px}
.channel .ch-link svg{width:16px;height:16px}
.channel .ch-tag{display:inline-block;font-size:.74rem;font-weight:800;background:var(--teal-50);color:var(--teal-700);padding:3px 9px;border-radius:var(--radius-pill);margin-left:7px}

/* --- Page mentions legales --- */
.legal-layout{display:grid;grid-template-columns:240px 1fr;gap:44px;align-items:start;padding:42px 0 70px}
.legal-nav{position:sticky;top:108px}
.legal-nav .ln-h{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-4);font-weight:800;padding:14px 12px 6px}
.legal-nav a{display:block;padding:8px 12px;border-radius:9px;font-weight:650;font-size:.91rem;color:var(--ink-3)}
.legal-nav a:hover{background:var(--bg-mute);color:var(--teal-700)}
.legal-disclaimer{background:var(--amber-bg);border:1px solid #fde68a;border-radius:12px;padding:14px 18px;font-size:.9rem;color:#92400e;margin-bottom:26px;display:flex;gap:11px}
.legal-disclaimer svg{width:20px;height:20px;flex:none;margin-top:1px}
.legal-doc h2{font-size:1.5rem;margin:38px 0 6px;scroll-margin-top:108px;padding-top:8px}
.legal-doc h2:first-of-type{margin-top:0}
.legal-doc h3{font-size:1.06rem;margin:22px 0 6px}
.legal-doc p{color:var(--ink-2);font-size:.97rem;margin-bottom:11px}
.legal-doc ul{padding-left:22px;list-style:disc;margin-bottom:12px}
.legal-doc li{color:var(--ink-2);font-size:.96rem;margin-bottom:6px}
.legal-doc .legal-updated{font-size:.88rem;color:var(--ink-4);margin-bottom:4px}
.legal-doc .legal-block{border-top:1px solid var(--border);margin-top:30px;padding-top:6px}

/* --- Responsive v4 --- */
@media(max-width:960px){
  .nav{height:74px}
  .brand .logo-img{height:50px}
  .nav.open .nav-links{top:74px}
  .lang-switch{margin-left:auto}
  .local-grid{grid-template-columns:repeat(2,1fr)}
  .contact-layout{grid-template-columns:1fr}
  .legal-layout{grid-template-columns:1fr;gap:18px}
  .legal-nav{position:static;display:flex;flex-wrap:wrap;gap:4px;background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:8px}
  .legal-nav .ln-h{width:100%;padding:6px 10px}
}
@media(max-width:600px){
  .logo-tile{flex:0 0 calc(50% - 8px);height:92px;padding:14px}
  .local-grid{grid-template-columns:1fr}
  .wa-float{height:54px;right:14px;bottom:14px}
  .wa-float .wa-ic{width:54px;height:54px}
}

/* =====================================================================
   ADDITIONS v5 — couverture OHADA, indicatif tel, code promo,
   page Application, page Documentation
   ===================================================================== */

/* --- Indicatif telephone / pays dans les champs --- */
.input-prefix select.prefix-sel{
  border:none;background:var(--bg-soft);font-weight:700;font-size:.92rem;color:var(--ink-2);
  padding:12px 8px;border-right:1px solid var(--border);cursor:pointer;
}
.input-prefix select.prefix-sel:focus{outline:none}

/* --- Section couverture OHADA --- */
.ohada{background:var(--bg-soft)}
.ohada-wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:44px;align-items:center}
.ohada-visual{
  background:var(--grad-teal);border-radius:var(--radius-lg);padding:40px 30px;
  box-shadow:var(--shadow-lg);text-align:center;color:#fff;
}
.ohada-visual .ov-num{font-size:3.4rem;font-weight:850;line-height:1}
.ohada-visual .ov-lbl{font-weight:800;font-size:1.05rem;margin-top:4px}
.ohada-visual .ov-sub{color:rgba(255,255,255,.85);font-size:.92rem;margin-top:10px}
.ohada-visual .ov-ring{
  width:120px;height:120px;border-radius:50%;border:3px dashed rgba(255,255,255,.4);
  margin:0 auto 18px;display:flex;align-items:center;justify-content:center;
}
.ohada-visual .ov-ring svg{width:58px;height:58px;color:#fff}
.ohada-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.ohada-chip{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-pill);
  padding:8px 15px;font-weight:700;font-size:.9rem;color:var(--ink-2);
}
.ohada-chip.cur{background:var(--teal-600);border-color:var(--teal-600);color:#fff}

/* --- Code promo --- */
.promo-box{
  max-width:430px;margin:16px auto 0;background:#fff;border:1px solid var(--border);
  border-radius:14px;padding:14px 16px;
}
.promo-toggle{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.93rem;color:var(--teal-700);cursor:pointer;justify-content:center}
.promo-toggle svg{width:17px;height:17px}
.promo-fields{display:none;margin-top:12px;gap:9px}
.promo-fields.show{display:flex}
.promo-fields input{
  flex:1;border:1.5px solid var(--border);border-radius:10px;padding:11px 13px;
  text-transform:uppercase;font-weight:700;letter-spacing:.04em;
}
.promo-fields input:focus{outline:none;border-color:var(--teal-500);box-shadow:0 0 0 4px var(--teal-50)}
.promo-msg{font-size:.86rem;font-weight:700;margin-top:9px;text-align:center;display:none}
.promo-msg.ok{display:block;color:var(--teal-700)}
.promo-msg.no{display:block;color:var(--red)}

/* --- Page Application --- */
.app-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;padding:50px 0 60px}
.app-badges{display:flex;flex-wrap:wrap;gap:13px;margin:22px 0 16px}
.store-btn{
  display:flex;align-items:center;gap:11px;background:#0f172a;color:#fff;
  border-radius:14px;padding:11px 20px;transition:transform .15s;
}
.store-btn:hover{transform:translateY(-2px)}
.store-btn svg{width:26px;height:26px;flex:none}
.store-btn .sb-t{font-size:.7rem;opacity:.8;line-height:1.2}
.store-btn .sb-b{font-size:1.02rem;font-weight:800;line-height:1.2}
.store-btn.apk{background:var(--teal-700)}
.app-qr{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-top:6px}
.app-qr .qr{width:96px;height:96px;border-radius:10px;flex:none;background:
  repeating-conic-gradient(#0f172a 0% 25%, #fff 0% 50%) 0 0/18px 18px;border:6px solid #fff;box-shadow:inset 0 0 0 1px var(--border)}
.app-qr .qr-t b{display:block;font-size:1rem}
.app-qr .qr-t span{font-size:.88rem;color:var(--ink-3)}
.app-phone-big{display:flex;justify-content:center}
.app-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:st}
.app-step{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;position:relative}
.app-step .as-n{width:38px;height:38px;border-radius:50%;background:var(--teal-600);color:#fff;font-weight:850;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.app-step h3{font-size:1.08rem;margin-bottom:6px}
.app-step p{font-size:.94rem;color:var(--ink-3)}
.app-req{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;margin-top:8px}
.app-req span{display:flex;align-items:center;gap:8px;font-weight:650;font-size:.93rem;color:var(--ink-2)}
.app-req svg{width:18px;height:18px;color:var(--teal-600)}

/* --- Page Documentation --- */
.doc-search{max-width:560px;margin:0 auto;position:relative}
.doc-search input{
  width:100%;border:1.5px solid var(--border);border-radius:var(--radius-pill);
  padding:15px 20px 15px 50px;font-size:1rem;background:#fff;
}
.doc-search input:focus{outline:none;border-color:var(--teal-500);box-shadow:0 0 0 4px var(--teal-50)}
.doc-search svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--ink-4)}
.doc-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.doc-cat{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px;
  transition:transform .18s,box-shadow .2s,border-color .2s;display:block;
}
.doc-cat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfe9df}
.doc-cat .dc-ic{width:50px;height:50px;border-radius:13px;background:var(--teal-50);color:var(--teal-700);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.doc-cat .dc-ic svg{width:25px;height:25px}
.doc-cat h3{font-size:1.12rem;margin-bottom:6px}
.doc-cat p{font-size:.93rem;color:var(--ink-3);margin-bottom:12px}
.doc-cat .dc-links{display:grid;gap:6px}
.doc-cat .dc-links a{font-size:.9rem;color:var(--teal-700);font-weight:650;display:flex;align-items:center;gap:6px}
.doc-cat .dc-links a::before{content:"›";font-weight:800}
.doc-start{
  background:var(--grad-teal);border-radius:var(--radius-lg);padding:34px;color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.doc-start h3{color:#fff;font-size:1.3rem;margin-bottom:6px}
.doc-start p{color:rgba(255,255,255,.9)}

@media(max-width:960px){
  .ohada-wrap{grid-template-columns:1fr;gap:26px}
  .app-hero{grid-template-columns:1fr;gap:30px}
  .app-phone-big{order:-1}
  .app-steps,.doc-cats{grid-template-columns:1fr}
}
@media(max-width:600px){
  .doc-cats,.app-steps{grid-template-columns:1fr}
}

/* =====================================================================
   12. ANIMATIONS — entrees, defilement, micro-interactions
   Legeres, sans dependance externe. Tout est neutralise si l'utilisateur
   a demande des animations reduites (bloc prefers-reduced-motion en fin
   de section) ; les apparitions au defilement sont en outre desactivees
   par le script si le navigateur ne sait pas observer le defilement.
   ===================================================================== */

/* --- Apparition au defilement : 4 variantes (posees par le script) --- */
.reveal,.reveal-zoom,.reveal-left,.reveal-right{
  opacity:0;
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),
             transform .62s cubic-bezier(.22,.61,.36,1);
}
.reveal{transform:translateY(26px)}
.reveal-zoom{transform:scale(.93)}
.reveal-left{transform:translateX(-46px)}
.reveal-right{transform:translateX(46px)}
.reveal.in,.reveal-zoom.in,.reveal-left.in,.reveal-right.in{
  opacity:1;transform:none;
}

/* --- Entree du hero a l'ouverture de la page --- */
@keyframes oma-rise{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:none}
}
@keyframes oma-rise-soft{
  from{opacity:0;transform:translateY(36px) scale(.96)}
  to{opacity:1;transform:none}
}
.hero-copy .eyebrow,.hero-copy h1,.hero-copy .lead,
.hero .hero-actions,.hero-trust,
.app-hero > div:first-child{
  animation:oma-rise .72s cubic-bezier(.22,.61,.36,1) both;
}
.hero-copy h1{animation-delay:.07s}
.hero-copy .lead{animation-delay:.15s}
.hero .hero-actions{animation-delay:.23s}
.hero-trust{animation-delay:.31s}
.hero-visual,.app-phone-big{
  animation:oma-rise-soft .9s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:.16s;
}

/* --- Flottement doux des halos colores du hero --- */
@keyframes oma-float{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(16px,-24px)}
}
.hero-bg-blob{animation:oma-float 16s ease-in-out infinite}
.blob-2{animation-duration:21s;animation-direction:reverse}

/* --- Anneaux et degrade anime du bandeau d'appel a l'action --- */
@keyframes oma-spin{to{transform:rotate(360deg)}}
.cta-ring{animation:oma-spin 75s linear infinite}
.cta-ring.r2{animation-duration:99s;animation-direction:reverse}
@keyframes oma-gradient{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.cta-band{
  background-image:var(--grad-teal);
  background-size:200% 200%;
  animation:oma-gradient 18s ease-in-out infinite;
}

/* --- Pousse des barres des mini-graphiques (maquettes) --- */
@keyframes oma-grow{from{transform:scaleY(.05)}to{transform:scaleY(1)}}
.app-chart i,.erp-chart i{
  transform-origin:bottom;
  animation:oma-grow .82s cubic-bezier(.22,.61,.36,1) both;
}
.app-chart i{animation-delay:.35s}
.app-chart i:nth-child(2){animation-delay:.44s}
.app-chart i:nth-child(3){animation-delay:.53s}
.app-chart i:nth-child(4){animation-delay:.62s}
.app-chart i:nth-child(5){animation-delay:.71s}
.app-chart i:nth-child(6){animation-delay:.80s}
.erp-chart i{animation-delay:.55s}
.erp-chart i:nth-child(2){animation-delay:.63s}
.erp-chart i:nth-child(3){animation-delay:.71s}
.erp-chart i:nth-child(4){animation-delay:.79s}
.erp-chart i:nth-child(5){animation-delay:.87s}
.erp-chart i:nth-child(6){animation-delay:.95s}

/* --- En-tete : ombre et compacite au defilement --- */
.site-header{transition:box-shadow .25s ease,background .25s ease}
.site-header.scrolled{
  box-shadow:0 6px 22px rgba(15,23,42,.08);
  background:rgba(255,255,255,.97);
}
.nav,.brand .logo{transition:height .25s ease,transform .25s ease}
/* Compacite reservee au bureau : sur mobile, le menu deroulant est
   positionne par rapport a la hauteur d'en-tete de 74px. */
@media (min-width:961px){
  .site-header.scrolled .nav{height:62px}
  .site-header.scrolled .brand .logo{transform:scale(.9)}
}

/* --- Reflet lumineux qui balaie le bouton principal au survol --- */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,
             transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);pointer-events:none;transition:left .6s ease;
}
.btn-primary:hover::after{left:140%}

/* --- Lisere d'accent en haut des cartes au survol --- */
.card,.pain-card,.persona-card{position:relative;overflow:hidden}
.card::before,.pain-card::before,.persona-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--grad-teal);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s ease;
}
.card:hover::before,.pain-card:hover::before,
.persona-card:hover::before{transform:scaleX(1)}
.pain-card{transition:transform .18s ease,box-shadow .2s ease}
.pain-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}

/* --- Cartes « partenaire local » (bandeau sombre) --- */
.local-card{transition:transform .18s ease,background .2s ease}
.local-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.16)}

/* --- Micro-interactions au survol --- */
.nav-links a{position:relative}
.nav-links a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;
  background:var(--teal-600);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease;
}
.nav-links a:hover::after{transform:scaleX(1)}
.store-btn{transition:transform .16s ease,box-shadow .2s ease}
.store-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.app-step{transition:transform .18s ease,box-shadow .2s ease}
.app-step:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.phone{transition:transform .4s ease}
.app-phone-big:hover .phone,.phone-wrap:hover .phone{transform:translateY(-7px)}
.ohada-chip,.trust-chip{transition:transform .15s ease,background .15s ease}
.ohada-chip:hover,.trust-chip:hover{transform:translateY(-2px)}

/* --- Reponse de la FAQ : ouverture en fondu --- */
@keyframes oma-faq{
  from{opacity:0;transform:translateY(-7px)}
  to{opacity:1;transform:none}
}
.faq details[open] p{animation:oma-faq .28s ease}

/* --- Respect du reglage systeme « animations reduites » --- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
  }
  .reveal,.reveal-zoom,.reveal-left,.reveal-right{
    opacity:1 !important;transform:none !important;
  }
  html{scroll-behavior:auto}
}

/* =====================================================================
   13. CENTRE D'AIDE — article, categorie, recherche
   ===================================================================== */
.sub-hero--tight{padding:26px 0 22px}
.doc-cat h3 a{color:inherit}
.doc-cat h3 a:hover{color:var(--teal-700)}

/* --- Fil d'Ariane --- */
.doc-crumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:.9rem;font-weight:600;color:var(--ink-3);margin-bottom:10px;
}
.doc-crumb a{color:var(--teal-700)}
.doc-crumb a:hover{text-decoration:underline}
.doc-crumb span{color:var(--ink-4)}
.doc-crumb-sum{max-width:680px}

/* --- Mise en page article : barre laterale + contenu --- */
.doc-layout{
  display:grid;grid-template-columns:262px 1fr;gap:34px;
  padding:34px 0 66px;align-items:start;
}
.doc-side{position:sticky;top:92px}
.doc-side-card{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);padding:18px 16px;
}
.doc-side-card h4{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);margin-bottom:10px;
}
.doc-side-card ul{display:grid;gap:2px}
.doc-side-card a{
  display:block;padding:8px 11px;border-radius:9px;
  font-size:.94rem;font-weight:600;color:var(--ink-2);
  transition:background .15s,color .15s;
}
.doc-side-card a:hover{background:var(--bg-mute);color:var(--teal-700)}
.doc-side-card a.on{background:var(--teal-50);color:var(--teal-700)}
.doc-back{
  display:inline-block;margin-top:14px;padding-left:11px;
  font-size:.9rem;font-weight:650;color:var(--teal-700);
}
.doc-back:hover{text-decoration:underline}

/* --- Corps de l'article (texte enrichi) --- */
.doc-prose{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);padding:34px 38px;
}
.doc-prose>*:first-child{margin-top:0}
.doc-prose h2{font-size:1.4rem;margin:30px 0 12px}
.doc-prose h3{font-size:1.12rem;margin:24px 0 9px}
.doc-prose p{margin:0 0 13px;color:var(--ink-2)}
.doc-prose ul,.doc-prose ol{margin:0 0 14px;padding-left:22px}
.doc-prose ul{list-style:disc}
.doc-prose ol{list-style:decimal}
.doc-prose li{margin-bottom:6px;color:var(--ink-2)}
.doc-prose li::marker{color:var(--teal-600)}
.doc-prose a{color:var(--teal-700);font-weight:600;text-decoration:underline}
.doc-prose strong,.doc-prose b{color:var(--ink);font-weight:750}
.doc-prose .doc-note{
  background:var(--teal-50);border:1px solid var(--teal-100);
  border-left:4px solid var(--teal-600);border-radius:10px;
  padding:13px 16px;margin:16px 0;font-size:.96rem;
}
.doc-prose .doc-note b{color:var(--teal-800)}
.doc-prose .doc-note p:last-child,.doc-prose .doc-warn p:last-child{margin-bottom:0}
.doc-prose .doc-warn{
  background:var(--amber-bg);border:1px solid #fde68a;
  border-left:4px solid var(--amber);border-radius:10px;
  padding:13px 16px;margin:16px 0;font-size:.96rem;
}

/* --- Encart d'aide en bas d'article --- */
.doc-help{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-top:20px;padding:20px 24px;
  background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);
}
.doc-help b{display:block}
.doc-help span{font-size:.93rem;color:var(--ink-3)}

/* --- Listes d'articles (categorie & recherche) --- */
.doc-list{display:grid;gap:12px}
.doc-list-item{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);padding:18px 22px;
  transition:transform .15s,box-shadow .2s,border-color .2s;
}
.doc-list-item:hover{
  transform:translateY(-2px);box-shadow:var(--shadow);border-color:#cfe9df;
}
.doc-list-item b{display:block;font-size:1.04rem}
.doc-list-sum{display:block;font-size:.92rem;color:var(--ink-3);margin-top:3px}
.doc-list-cat{
  display:inline-block;font-size:.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;color:var(--teal-700);
  margin-bottom:4px;
}
.doc-list-go{font-size:1.5rem;color:var(--teal-600);font-weight:800;flex:none}
.doc-empty{
  background:var(--bg-soft);border:1px solid var(--border);
  border-radius:var(--radius);padding:30px;text-align:center;
}
.doc-empty b{font-size:1.05rem}
.doc-empty p{margin-top:6px;color:var(--ink-3)}
.doc-empty a{color:var(--teal-700);font-weight:600;text-decoration:underline}

@media(max-width:820px){
  .doc-layout{grid-template-columns:1fr;gap:22px;padding-top:22px}
  .doc-side{position:static}
  .doc-prose{padding:24px 22px}
}