/* ============================================================
   OTOMEO — design system partagé (chargé par TOUTES les pages)
   Une seule identité : Inter, blanc, bleu Otomeo, Double O.
   Ce fichier est chargé APRÈS les styles de page : il fait autorité
   sur la typographie, les couleurs, les rayons, les ombres, le focus.
   ============================================================ */

:root{
  /* — couleurs — */
  --oto-ink:#1D1D1F;          /* titres */
  --oto-body:#4B5563;         /* corps de texte — 7,5:1 sur blanc */
  --oto-muted:#6E6E73;        /* secondaire — 4,66:1, jamais sous 13px */
  --oto-line:#D8DCE3;
  --oto-line-soft:#E7E9ED;
  --oto-bg:#FFFFFF;
  --oto-bg2:#F5F5F7;
  --oto-blue:#2563EB;
  --oto-blue-d:#1D4FD8;
  --oto-navy:#0B1F3A;
  --oto-green:#0E7A46;
  /* — rayons : 4 valeurs, pas 11 — */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:980px;
  /* — ombres : 3 valeurs, pas 18 — */
  --sh-sm:0 2px 8px rgba(11,31,58,.06);
  --sh-md:0 14px 34px -18px rgba(11,31,58,.28);
  --sh-lg:0 44px 90px -46px rgba(11,31,58,.45);
  /* — mouvement — */
  --oto-ease:cubic-bezier(.22,1,.36,1);
  --oto-fast:.18s; --oto-slow:.4s;
}

/* ---------- Typographie unifiée : une seule famille ---------- */
body,
body h1, body h2, body h3, body h4, body h5,
body p, body a, body li, body span, body button, body input,
body select, body textarea, body label, body figcaption, body small, body blockquote{
  font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Helvetica,Arial,sans-serif;
}
/* le mono ne subsiste que sur les données chiffrées explicitement marquées */
body .mono, body .tnum, body code, body kbd{
  font-family:'Spline Sans Mono','SF Mono',ui-monospace,Menlo,monospace;
}
body h1,body h2,body h3,body h4{letter-spacing:-.03em;font-weight:600;color:var(--oto-ink);text-wrap:balance}
body h1{line-height:1.05}
body h2{line-height:1.08}
body p,body li{text-wrap:pretty}
.tnum,.f-num,.cn-v,.kv,.num,.stat .num,.price,.migproof .num,.kpi .kv{font-variant-numeric:tabular-nums}

/* ---------- Contrastes : plus aucun texte sous 4,6:1 ---------- */
body p, body li, body figcaption, body .desc, body .dcap, body .lab{color:var(--oto-body)}
body small, body .onote, body .migproof-note, body .hero-note,
body .form-note, body .cap p, body footer{color:var(--oto-muted)}
body small, body .onote, body .migproof-note{font-size:13px}
/* jamais de texte utile sous 13px */
body p, body li, body span, body figcaption, body small, body label{font-size:max(13px,1em)}

/* ---------- Rayons & ombres normalisés ---------- */
body .card, body .vcard, body .ocard, body .step, body .tcard, body .dcap,
body .mapcard, body .sw, body .eco, body .prob, body .signal, body .w,
body .obefore, body .oafter, body .oshot, body .hcard, body .migcard{border-radius:var(--r-md)}
body .btn, body .cta, body .obtn, body .b1, body .b2, body .btn-primary{border-radius:var(--r-pill)}
body .hshot, body .dshot, body .agentlive, body .form-card, body .offer-card{border-radius:var(--r-lg)}
body .chip, body .tag, body .tagk, body .eyebrow, body .oeyebrow, body .hbadges span{border-radius:var(--r-pill)}

/* ---------- Focus visible (WCAG 2.4.7) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:2.5px solid var(--oto-blue);
  outline-offset:3px;
  border-radius:4px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible){outline:none}

/* ---------- Cibles tactiles : 44px minimum ---------- */
@media(max-width:900px){
  body .nav ul a, body .mobile-menu a, body footer a, body .seg button{
    min-height:44px; display:flex; align-items:center;
  }
  body .burger{min-width:44px;min-height:44px;display:grid;place-items:center;font-size:22px}
  body .btn, body .cta, body .obtn{min-height:46px}
}

/* ---------- Navigation mobile (corrige le menu cassé) ---------- */
@media(max-width:900px){
  body .nav ul{
    display:none; position:fixed; top:var(--nav-h,48px); left:0; right:0;
    flex-direction:column; gap:0; margin:0; padding:8px 22px 18px;
    background:rgba(255,255,255,.97);
    backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid var(--oto-line-soft);
    box-shadow:var(--sh-md); z-index:999;
  }
  body .nav ul.open{display:flex}
  body .nav ul li{border-bottom:1px solid var(--oto-line-soft)}
  body .nav ul li:last-child{border-bottom:0}
  body .nav ul a{font-size:16px;padding:2px 0;width:100%}
  body .burger[aria-expanded="true"]{color:var(--oto-blue)}
}

/* ---------- Boutons : une seule grammaire ---------- */
body .btn-primary, body .cta, body .obtn.solid, body .b1{
  background:var(--oto-blue); color:#fff; border:0;
  box-shadow:0 1px 2px rgba(37,99,235,.28), 0 10px 22px -12px rgba(37,99,235,.5);
  transition:background var(--oto-fast) var(--oto-ease), transform var(--oto-fast) var(--oto-ease), box-shadow var(--oto-fast) var(--oto-ease);
}
body .btn-primary:hover, body .cta:hover, body .obtn.solid:hover{
  background:var(--oto-blue-d); transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(37,99,235,.3), 0 16px 30px -14px rgba(37,99,235,.55);
}
body .btn-primary:active, body .cta:active{transform:translateY(0) scale(.99)}

/* ---------- Images : pas de saut de mise en page ---------- */
img{max-width:100%;height:auto}

/* ---------- Mouvement respecté ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------------- Menu Services (toutes pages) ---------------- */
body .nav .has-sub{position:relative}
body .nav .subtrig{display:flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;font:inherit;
  font-size:13px;color:var(--oto-ink);opacity:.82;padding:0;transition:opacity .2s}
body .nav .subtrig:hover,body .nav .subtrig[aria-expanded="true"]{opacity:1}
body .nav .chev{font-size:9px;transition:transform .25s var(--oto-ease);display:inline-block}
body .nav .subtrig[aria-expanded="true"] .chev{transform:rotate(180deg)}
body .submenu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  width:308px;background:rgba(255,255,255,.97);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--oto-line);border-radius:16px;padding:8px;box-shadow:var(--sh-md);
  opacity:0;visibility:hidden;transition:opacity .22s var(--oto-ease),transform .22s var(--oto-ease),visibility .22s;z-index:60}
body .has-sub:hover .submenu,body .submenu.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
body .submenu a{display:block;padding:10px 12px;border-radius:10px;transition:background .16s}
body .submenu a:hover{background:#F5F7FB}
body .submenu a[aria-current="page"]{background:#EFF4FF}
body .submenu b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--oto-ink);margin-bottom:1px}
body .submenu span{display:block;font-size:12.5px;color:var(--oto-body);line-height:1.35}
@media(max-width:900px){
  body .nav .has-sub{width:100%}
  body .nav .subtrig{width:100%;justify-content:space-between;font-size:16px;padding:12px 0;min-height:44px}
  body .submenu{position:static;transform:none;width:100%;border:0;box-shadow:none;background:transparent;
    padding:0 0 8px 12px;opacity:1;visibility:visible;display:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  body .submenu.open{display:block}
  body .has-sub:hover .submenu:not(.open){display:none}
  body .submenu a{padding:9px 8px}
}