/* ============================================================
   Ouvria : Mobile CSS Architecte (Agent 1)
   Source de vérité unique pour le mobile Ouvria.
   Aligné sur docs/mobile-design-spec.md + docs/mobile-refactor-plan.md
   --
   Activation : <link rel="stylesheet" href="/css/mobile.css?v=20260601">
   Scope      : toutes les classes commencent par .m- pour éviter
                les collisions avec les CSS existants.
   Application: composants par défaut mobile-first, surcharges via
                @media (min-width: 641px) pour tablette/desktop.
   ============================================================ */

/* ---------- 1. CUSTOM PROPERTIES (variables) ---------- */
:root {
  /* Couleurs Ouvria, primaires */
  --m-orange:        #EA580C;   /* --orange-600 */
  --m-orange-hover:  #C2410C;   /* --orange-700 */
  --m-orange-soft:   #FFF7ED;   /* --orange-50  */

  /* Neutres */
  --m-ink:           #0F172A;   /* --ink-900, titres */
  --m-text:          #334155;   /* --ink-700, corps */
  --m-text-muted:    #64748B;   /* --ink-500, méta/secondaire */
  --m-text-light:    #94A3B8;
  --m-line-strong:   #CBD5E1;   /* --ink-300 */
  --m-line:          #E2E8F0;   /* --ink-200, bordure subtile */
  --m-bg-subtle:     #F1F5F9;   /* --ink-100 */
  --m-bg:            #FFFFFF;
  --m-bg-cream:      #FAFAF8;
  --m-bg-soft:       #F5F0EA;

  /* Système */
  --m-success:       #16A34A;
  --m-warning:       #D97706;
  --m-error:         #DC2626;
  --m-info:          #0284C7;

  /* Type scale */
  --m-h1:      clamp(28px, 7.2vw, 36px);
  --m-h2:      clamp(22px, 5.6vw, 28px);
  --m-h3:      clamp(18px, 4.5vw, 22px);
  --m-lead:    17px;
  --m-body:    15px;
  --m-body-sm: 13px;
  --m-meta:    11px;

  /* Spacing scale stricte : 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 */
  --m-1: 4px;  --m-2: 8px;  --m-3: 12px; --m-4: 16px;
  --m-5: 24px; --m-6: 32px; --m-7: 48px; --m-8: 64px; --m-9: 96px;

  /* Radius */
  --m-r-input:  8px;
  --m-r-card:   12px;
  --m-r-cta:    16px;
  --m-r-modal:  24px;
  --m-r-pill:   999px;

  /* Ombres */
  --m-shadow-card:    0 1px 2px rgba(15,23,42,0.06), 0 4px 8px rgba(15,23,42,0.04);
  --m-shadow-cta:     0 10px 30px rgba(234,88,12,0.30), 0 4px 12px rgba(234,88,12,0.18);
  --m-shadow-sticky:  0 -4px 16px rgba(15,23,42,0.08);

  /* Touch target minimum */
  --m-tap: 48px;

  /* Hauteur topbar */
  --m-topbar-h: 56px;
}

/* ---------- 2. ANTI-OVERFLOW HORIZONTAL ---------- */
/* Anti-pattern : overflow-x:hidden global. À la place, on contraint
   simplement la largeur max. Les éléments fautifs (auroras, blobs)
   sont corrigés à la source par les chantiers suivants. */
html, body { max-width: 100vw; }

/* ---------- 3. MOBILE-FIRST : composants par défaut (≤ 640px) ---------- */
@media (max-width: 640px) {

  /* --- 3.1 Layout primitifs --- */
  .m-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
  }

  .m-section {
    padding: var(--m-8) 0;
    background: var(--m-bg);
  }
  .m-section--cream  { background: var(--m-bg-cream); }
  .m-section--soft   { background: var(--m-bg-soft); }
  .m-section--tight  { padding: var(--m-7) 0; }
  .m-section--ink    { background: var(--m-ink); color: #fff; }

  /* Stacks verticaux génériques */
  .m-stack > * + *        { margin-top: var(--m-3); }
  .m-stack-tight > * + *  { margin-top: var(--m-2); }
  .m-stack-loose > * + *  { margin-top: var(--m-5); }
  .m-stack-block > * + *  { margin-top: var(--m-6); }

  /* --- 3.2 Typographie --- */
  .m-overline {
    font: 600 var(--m-meta)/1 'Inter', system-ui, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--m-text-muted);
    margin: 0;
  }
  .m-overline--orange { color: var(--m-orange); }

  .m-h1 {
    font: 700 var(--m-h1)/1.1 'Sora', system-ui, sans-serif;
    letter-spacing: -0.02em;
    color: var(--m-ink);
    margin: 0;
  }
  .m-h2 {
    font: 700 var(--m-h2)/1.2 'Sora', system-ui, sans-serif;
    letter-spacing: -0.015em;
    color: var(--m-ink);
    margin: 0;
  }
  .m-h3 {
    font: 600 var(--m-h3)/1.25 'Sora', system-ui, sans-serif;
    color: var(--m-ink);
    margin: 0;
  }

  .m-lead {
    font: 400 var(--m-lead)/1.55 'Inter', system-ui, sans-serif;
    color: var(--m-text);
    max-width: 32ch;
    margin: 0;
  }
  .m-body {
    font: 400 var(--m-body)/1.6 'Inter', system-ui, sans-serif;
    color: var(--m-text);
    margin: 0;
  }
  .m-body--muted { color: var(--m-text-muted); }
  .m-secondary {
    font: 400 var(--m-body-sm)/1.5 'Inter', system-ui, sans-serif;
    color: var(--m-text-muted);
    margin: 0;
  }
  .m-meta {
    font: 500 var(--m-meta)/1.4 'Inter', system-ui, sans-serif;
    color: var(--m-text-muted);
    letter-spacing: 0.02em;
    margin: 0;
  }

  /* --- 3.3 Boutons --- */
  .m-btn-primary,
  .m-btn-secondary,
  .m-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--m-tap);
    padding: 14px 24px;
    width: 100%;
    border: 0;
    border-radius: var(--m-r-cta);
    font: 600 var(--m-body)/1 'Inter', system-ui, sans-serif;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
  }

  .m-btn-primary {
    background: var(--m-orange);
    color: #fff;
    box-shadow: var(--m-shadow-cta);
  }
  .m-btn-primary:active {
    transform: scale(0.98);
    background: var(--m-orange-hover);
  }

  .m-btn-secondary {
    background: var(--m-bg);
    color: var(--m-ink);
    border: 1px solid var(--m-line-strong);
  }
  .m-btn-secondary:active { background: var(--m-bg-cream); }

  .m-btn-ghost {
    background: transparent;
    color: var(--m-orange);
    padding: 12px 16px;
    width: auto;
    box-shadow: none;
  }
  .m-btn-ghost:active { color: var(--m-orange-hover); }

  /* Bouton compact pour topbar / cards */
  .m-btn-compact {
    display: inline-flex; align-items: center; justify-content: center;
    height: 36px; padding: 0 14px;
    background: var(--m-orange); color: #fff;
    border: 0; border-radius: var(--m-r-pill);
    font: 600 var(--m-body-sm)/1 'Inter', system-ui, sans-serif;
    text-decoration: none;
  }

  /* --- 3.4 Card --- */
  .m-card {
    background: var(--m-bg);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-card);
    padding: var(--m-5);
    box-shadow: var(--m-shadow-card);
  }
  .m-card--flat   { box-shadow: none; }
  .m-card--accent { border-color: var(--m-orange); }

  /* --- 3.5 Stat / chiffre clé --- */
  .m-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .m-stat-value {
    font: 700 36px/1 'Sora', system-ui, sans-serif;
    color: var(--m-ink);
    letter-spacing: -0.02em;
  }
  .m-stat-value--orange { color: var(--m-orange); }
  .m-stat-label {
    font: 500 var(--m-body-sm)/1.3 'Inter', system-ui, sans-serif;
    color: var(--m-text-muted);
  }

  /* Grille stats max 2×2 */
  .m-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--m-5);
  }

  /* --- 3.6 Chip / Pill --- */
  .m-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    background: var(--m-bg-subtle);
    color: var(--m-text);
    border-radius: var(--m-r-pill);
    font: 500 var(--m-body-sm)/1 'Inter', system-ui, sans-serif;
  }
  .m-chip--orange {
    background: var(--m-orange-soft);
    color: var(--m-orange-hover);
  }
  .m-chip--success {
    background: rgba(22,163,74,0.08);
    color: var(--m-success);
  }

  .m-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 18px;
    background: var(--m-bg);
    color: var(--m-ink);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-pill);
    font: 600 var(--m-body-sm)/1 'Inter', system-ui, sans-serif;
    cursor: pointer;
  }
  .m-pill[aria-pressed="true"],
  .m-pill.is-active {
    background: var(--m-ink);
    color: #fff;
    border-color: var(--m-ink);
  }

  /* --- 3.7 Checklist (puces ✓) --- */
  .m-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .m-checklist li {
    position: relative;
    display: flex;
    gap: 10px;
    padding: 8px 0;
    font: 400 var(--m-body)/1.5 'Inter', system-ui, sans-serif;
    color: var(--m-text);
  }
  .m-checklist li::before {
    content: '';
    flex: 0 0 18px;
    height: 18px;
    margin-top: 4px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat: no-repeat;
    background-size: 18px 18px;
  }

  /* --- 3.8 Divider --- */
  .m-divider {
    height: 1px;
    background: var(--m-line);
    border: 0;
    margin: var(--m-5) 0;
  }

  /* --- 3.9 Image responsive --- */
  .m-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--m-r-card);
  }

  /* --- 3.10 Pricing cards --- */
  .m-price-card {
    background: var(--m-bg);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-card);
    padding: var(--m-5);
    display: flex;
    flex-direction: column;
    gap: var(--m-4);
  }
  .m-price-card--reco {
    border: 2px solid var(--m-orange);
    box-shadow: var(--m-shadow-cta);
    position: relative;
  }
  .m-price-card--reco::before {
    content: 'Recommandé';
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    background: var(--m-orange);
    color: #fff;
    font: 600 var(--m-meta)/1 'Inter', system-ui, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: var(--m-r-pill);
  }
  .m-price-name {
    font: 600 18px/1 'Sora', system-ui, sans-serif;
    color: var(--m-ink);
  }
  .m-price-amount {
    font: 700 32px/1 'Sora', system-ui, sans-serif;
    color: var(--m-ink);
    letter-spacing: -0.02em;
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
  .m-price-amount small {
    font: 500 var(--m-body-sm)/1 'Inter', system-ui, sans-serif;
    color: var(--m-text-muted);
  }
  .m-price-positioning {
    font: 400 var(--m-body-sm)/1.5 'Inter', system-ui, sans-serif;
    color: var(--m-text-muted);
  }

  /* Toggle mensuel/annuel en chips */
  .m-pricing-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--m-bg-subtle);
    border-radius: var(--m-r-pill);
  }
  .m-pricing-toggle .m-pill {
    min-height: 36px;
    border: 0;
    background: transparent;
  }
  .m-pricing-toggle .m-pill[aria-pressed="true"] {
    background: var(--m-bg);
    color: var(--m-ink);
    box-shadow: var(--m-shadow-card);
  }

  /* --- 3.11 FAQ native (details/summary) --- */
  .m-faq {
    border-top: 1px solid var(--m-line);
  }
  .m-faq details {
    border-bottom: 1px solid var(--m-line);
  }
  .m-faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    min-height: var(--m-tap);
    font: 600 var(--m-body)/1.4 'Inter', system-ui, sans-serif;
    color: var(--m-ink);
  }
  .m-faq summary::-webkit-details-marker { display: none; }
  .m-faq summary::after {
    content: '+';
    font: 300 24px/1 'Sora', system-ui, sans-serif;
    color: var(--m-text-muted);
    transition: transform 200ms ease, content 0ms;
    flex: 0 0 auto;
  }
  .m-faq details[open] summary::after { content: '−'; }
  .m-faq-body {
    padding: 0 16px 20px;
    font: 400 14px/1.6 'Inter', system-ui, sans-serif;
    color: var(--m-text);
  }

  /* --- 3.12 Topbar fixe --- */
  .m-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--m-topbar-h);
    padding: env(safe-area-inset-top) 16px 0;
    background: rgba(255,255,255,0.88);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid var(--m-line);
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
    z-index: 50;
  }
  .m-topbar__burger {
    width: 40px; height: 40px;
    background: transparent;
    border: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--m-ink);
    cursor: pointer;
  }
  .m-topbar__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 700 16px/1 'Sora', system-ui, sans-serif;
    color: var(--m-ink);
    text-decoration: none;
  }
  .m-topbar__brand img,
  .m-topbar__brand svg { width: 28px; height: 28px; }
  .m-topbar__cta {
    display: inline-flex; align-items: center; justify-content: center;
    height: 36px; padding: 0 14px;
    background: var(--m-orange); color: #fff;
    border-radius: var(--m-r-pill);
    font: 600 var(--m-body-sm)/1 'Inter', system-ui, sans-serif;
    text-decoration: none;
  }

  /* Offset body quand topbar fixe présente */
  body.has-m-topbar {
    padding-top: calc(var(--m-topbar-h) + env(safe-area-inset-top));
  }

  /* --- 3.13 Drawer (slide gauche) --- */
  .m-drawer {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    z-index: 90;
  }
  .m-drawer.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .m-drawer__panel {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: min(86vw, 360px);
    background: var(--m-bg);
    padding: calc(env(safe-area-inset-top) + 16px) var(--m-5) calc(env(safe-area-inset-bottom) + 16px);
    transform: translateX(-100%);
    transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: var(--m-2);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .m-drawer.is-open .m-drawer__panel { transform: translateX(0); }

  .m-drawer__close {
    align-self: flex-end;
    width: 44px; height: 44px;
    background: transparent;
    border: 0;
    color: var(--m-ink);
    font-size: 20px;
    cursor: pointer;
  }
  .m-drawer a {
    display: flex;
    align-items: center;
    min-height: var(--m-tap);
    padding: 16px 24px;
    border-bottom: 1px solid var(--m-bg-subtle);
    color: var(--m-text);
    font: 500 17px/1 'Inter', system-ui, sans-serif;
    text-decoration: none;
  }
  .m-drawer a:active { background: var(--m-bg-cream); }

  .m-drawer__footer {
    margin-top: auto;
    padding-top: var(--m-5);
  }

  /* Lock scroll body quand drawer ouvert */
  body.m-drawer-open { overflow: hidden; }

  /* --- 3.14 Sticky CTA bottom --- */
  .m-sticky-cta {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    background: var(--m-ink);
    color: #fff;
    padding: 14px 20px;
    border-radius: var(--m-r-cta);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: var(--m-shadow-sticky), 0 12px 32px rgba(15,23,42,0.35);
    transform: translateY(140%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 80;
    font: 600 var(--m-body)/1.2 'Inter', system-ui, sans-serif;
  }
  .m-sticky-cta.is-visible { transform: translateY(0); }
  .m-sticky-cta a {
    background: var(--m-orange);
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--m-body-sm);
    white-space: nowrap;
  }
  .m-sticky-cta__close {
    background: transparent;
    border: 0;
    color: rgba(255,255,255,0.6);
    padding: 0;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }

  /* --- 3.15 Bandeau métiers BTP (statique en mobile) --- */
  .m-marquee {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    animation: none !important;     /* anti-marquee mobile */
  }
  .m-marquee > * {
    flex: 0 0 auto;
  }

  /* --- 3.16 Helpers d'affichage --- */
  .m-only-mobile  { display: initial; }
  .m-only-desktop,
  .m-hide         { display: none !important; }
}

/* ---------- 4. TABLETTE & DESKTOP (≥ 641px) ---------- */
@media (min-width: 641px) {
  .m-only-mobile  { display: none !important; }
  .m-only-desktop { display: initial; }
}

/* ---------- 5. FOCUS VISIBLE COHÉRENT ---------- */
@media (max-width: 640px) {
  .m-btn-primary:focus-visible,
  .m-btn-secondary:focus-visible,
  .m-btn-ghost:focus-visible,
  .m-btn-compact:focus-visible,
  .m-pill:focus-visible,
  .m-faq summary:focus-visible,
  .m-drawer a:focus-visible,
  .m-topbar__burger:focus-visible,
  .m-topbar__cta:focus-visible {
    outline: 2px solid var(--m-orange);
    outline-offset: 2px;
    border-radius: var(--m-r-input);
  }
}

/* ---------- 6. PREFERS REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .m-btn-primary,
  .m-btn-secondary,
  .m-btn-ghost,
  .m-drawer,
  .m-drawer__panel,
  .m-sticky-cta,
  .m-faq summary::after {
    transition: none !important;
  }
  .m-marquee { animation: none !important; }
}