/* ============================================================
   WORLD MOBILE — Design System « Atelier de précision »
   Surcharge premium. Chargé APRÈS le style inline de chaque page.
   Aucune modification fonctionnelle. v1.0 — 2026-07-06
   ============================================================ */

:root{
  --bg:#F8F7F4; --bg2:#F1F0EB; --bg3:#EEF1F6;
  --ink:#15171C; --mute:#878C95;
  --line:#EAE8E2;
  --accent:#0A1E3C; --accent-light:#14304F; --accent-dark:#0A1E3C;
  --gold:#A8843C; --green:#3D7A5F; --green-dark:#2E5F4A;
  --urg:#A8843C; --wa:#0A1E3C;
  --radius:16px; --radius-lg:16px;
  --shadow:0 1px 2px rgba(16,20,28,.04);
  --shadow-md:0 2px 6px rgba(16,20,28,.05),0 8px 20px rgba(16,20,28,.05);
  --shadow-lg:0 4px 12px rgba(16,20,28,.06),0 16px 40px rgba(16,20,28,.09);
  --shadow-accent:0 1px 2px rgba(16,20,28,.12);
}
::selection{background:rgba(10,30,60,.12)}
body{-webkit-font-smoothing:antialiased}

/* ---------- Icônes wm (remplacement emojis) ---------- */
.wmi{width:1em;height:1em;display:inline-block;vertical-align:-.125em;
  stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wmi-fill{fill:currentColor;stroke:none}

/* ---------- Typographie : jamais au-delà de 650 ---------- */
h1,h2,h3{font-weight:650;letter-spacing:-.015em}
.btn-xl,.brand-title,.brand-card.selected::after,.brand-card.selected .brand-label,
.price-box .p,.tier-price,.tier-badge,.upsell-item b,.svc .from,.proc::before,.prix-cell{font-weight:650}

/* ---------- Topbar ---------- */
.topbar{background:var(--accent);letter-spacing:.01em}
.topbar .rating{color:#C9A961;font-weight:600}

/* ---------- Header ---------- */
header.site{background:rgba(250,249,246,.82);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
nav a{font-weight:500;color:#484D55}

/* ---------- Boutons ---------- */
.btn{font-weight:600;border-radius:12px}
.btn::after{content:none}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-primary{background:linear-gradient(180deg,#13294D 0%,#0A1E3C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 1px 2px rgba(16,20,28,.12)}
.btn-primary:hover{background:linear-gradient(180deg,#183159 0%,#0D2447 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 6px 16px rgba(10,30,60,.16)}
.btn-call{background:linear-gradient(180deg,#13294D 0%,#0A1E3C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 1px 2px rgba(16,20,28,.12)}
.btn-call:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 6px 16px rgba(10,30,60,.16)}
.btn-wa{background:#fff;color:var(--ink);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(16,20,28,.04)}
.btn-wa:hover{border-color:#C9C6C0;background:#FCFBF9;box-shadow:var(--shadow-md)}
.btn-dark{background:linear-gradient(180deg,#13294D 0%,#0A1E3C 100%);box-shadow:0 1px 2px rgba(16,20,28,.12)}
.btn-ghost,.btn-map{background:#fff;color:var(--ink);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(16,20,28,.04)}
.btn-ghost:hover,.btn-map:hover{border-color:#C9C6C0;color:var(--ink);background:#FCFBF9}
.btn-xl{box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 1px 2px rgba(16,20,28,.12);border-radius:14px}
.btn:focus-visible{outline:3px solid rgba(10,30,60,.25);outline-offset:1px}

/* ---------- Hero ----------
   (le fond du hero est géré par le remappage des couleurs dans chaque template :
   clair sur l'accueil, bleu nuit sur les pages locales — jamais forcé ici) */
.hero h1 span{background:none;-webkit-text-fill-color:var(--accent);color:var(--accent)}
.hero-urgent{background:#fff;color:var(--green);border:1px solid var(--line);
  border-radius:999px;font-weight:600;box-shadow:var(--shadow)}
.hero-counter{background:var(--bg3);color:#484D55;border:1px solid var(--line);font-weight:500}
.hero-counter strong{color:var(--accent)}
.stars{color:var(--gold)}

/* ---------- Tunnel ---------- */
.tunnel{border:1px solid rgba(21,23,28,.06);border-radius:20px;box-shadow:var(--shadow-lg)}
.tunnel::before{content:none}
.tunnel h3{font-weight:650}
.step.active{background:var(--accent)}
.choice .ico{background:var(--bg3)}
.cat-hero{background:var(--accent);box-shadow:0 12px 28px -14px rgba(10,30,60,.4)}
.cat-ico{filter:none}
.tunnel-search:focus{box-shadow:0 0 0 3px rgba(10,30,60,.12)}
.brand-card.brand-card{border:1px solid var(--line);box-shadow:var(--shadow)}
.brand-card.brand-card:hover{border-color:#B9C3D2;box-shadow:var(--shadow-md);transform:translateY(-3px)}
.brand-card.selected{background:var(--bg3);border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(10,30,60,.12),var(--shadow-md)}
.brand-logo{filter:grayscale(1);opacity:.88}
.brand-card:hover .brand-logo{opacity:1}
.tier{border-radius:16px}
.tier-premium{border:1.5px solid var(--accent);background:#fff;transform:scale(1.04);
  box-shadow:0 16px 36px -16px rgba(10,30,60,.28)}
.tier-badge{background:var(--accent);box-shadow:0 2px 8px rgba(10,30,60,.25)}
.guarantee{background:linear-gradient(180deg,#0F2747 0%,#0A1E3C 100%)}
.bundle-deal{background:var(--bg3);border:1px solid var(--line);color:var(--ink);font-weight:600}
.bundle-deal b{color:var(--accent)}

/* ---------- Sections ---------- */
.section-head h2::after{content:none}
.svc::before{content:none}
.svc:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.svc .ic{background:var(--bg3)}
.svc:hover .ic{background:#E4EAF2}
.svc .from{color:var(--ink);font-variant-numeric:tabular-nums}
.why-item .ic{background:var(--bg3);color:var(--accent)}
.why-item:hover .ic{background:#E4EAF2;transform:none}
.proc::before{background:var(--accent)}
.local{background:var(--accent)}
.local p{color:rgba(255,255,255,.65)}
.final .btn-primary{background:#fff;color:var(--accent);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.final .btn-wa{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:none}
.final .btn-wa:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.06)}

/* ---------- Table des prix ---------- */
.prix-table{border:1px solid var(--line)}
.prix-table thead{background:var(--bg2);color:var(--ink)}
.prix-table th{font-weight:600;letter-spacing:.06em}
.prix-table tbody tr:hover{background:#FBFAF8}
.prix-cell{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- Bulles flottantes ---------- */
.fab a{background:#fff;color:var(--ink);border:1px solid var(--line);
  box-shadow:var(--shadow-md);animation:none;font-size:22px}
.fab a:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.fab-call a{background:var(--accent);box-shadow:var(--shadow-lg);animation:none;font-size:22px}
.fab-call a:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}

/* ---------- Barre mobile ---------- */
.mobile-call{background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--line);box-shadow:none}

/* ---------- Hiérarchie CTA conversion : Appeler = action primaire ---------- */
.header-cta .btn-primary{background:#fff;color:var(--ink);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(16,20,28,.04)}
.header-cta .btn-primary:hover{border-color:#C9C6C0;background:#FCFBF9;color:var(--ink)}
.header-cta a[href^="tel"]{background:linear-gradient(180deg,#13294D 0%,#0A1E3C 100%);color:#fff;
  border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 1px 2px rgba(16,20,28,.12)}
.header-cta a[href^="tel"]:hover{color:#fff;background:linear-gradient(180deg,#183159 0%,#0D2447 100%)}
.hero-ctas .btn-primary:not([href^="tel"]):not(.btn-call){background:#fff;color:var(--ink);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(16,20,28,.04)}
.hero-ctas .btn-primary:not([href^="tel"]):not(.btn-call):hover{border-color:#C9C6C0;background:#FCFBF9}
.hero-ctas a[href^="tel"]{background:linear-gradient(180deg,#13294D 0%,#0A1E3C 100%);color:#fff;
  border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 1px 2px rgba(16,20,28,.12)}
.mobile-call a[href^="tel"]{background:linear-gradient(180deg,#13294D 0%,#0A1E3C 100%);color:#fff;border-color:transparent}

/* ---------- Divers ---------- */
.mobile-nav{background:rgba(10,30,60,.96)}
.mobile-nav a:hover{color:#C9A961}
.choice:focus-visible,.cat-card:focus-visible,.brand-card:focus-visible,.model-card:focus-visible{
  outline:3px solid rgba(10,30,60,.35);outline-offset:2px}

/* ---------- Logo officiel ---------- */
.logo{display:inline-flex;align-items:center;line-height:0}
.logo .wm-logo{height:38px;width:auto;display:block}
@media (max-width:640px){.logo .wm-logo{height:27px}}
/* v1.1 */