/* ============================================
   PECUNNIA — Mobile CSS (max-width: 768px)
   Fichier séparé — ne touche pas au CSS desktop
   ============================================ */

/* ── HERO ── */
@media (max-width: 768px) {
  .hero-grid { grid-template-columns: 1fr; }
  .screener { width: 100%; margin-top: 2rem; }
  .hero-btns { flex-direction: column; align-items: stretch; }
}

/* ── CALENDRIER ── */
@media (max-width: 768px) {
  .bc-cal { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 1rem; }
  .bc-cal-event { min-width: 220px; flex-shrink: 0; }
}

/* ── TARIFS ── */
@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ── FAQ ── */
@media (max-width: 768px) {
  .faq-cols { grid-template-columns: 1fr; flex-direction: column; }
}

/* ── FOOTER ── */
@media (max-width: 768px) {
  .footer-cols { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 1rem; }
}

/* ── HEADER BASE.HTML (pages internes) ── */
@media (max-width: 768px) {
  .site-header-top { padding: 0.6rem 1rem; }
  .site-header-top input,
  .site-header-top .search-bar,
  .site-header-top form { max-width: 160px; font-size: var(--txt-xs); }
}

/* ── BURGER BASE.HTML ── */
@media (max-width: 768px) {
  .site-header-top .gs-wrap,
  .site-header-top .gs-input { display: none; }
  .header-auth-wrap { display: none; }
  .mobile-nav { display: none !important; }
  .mobile-nav.open { display: flex !important; }
  .mobile-nav.open {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: auto;
    flex-direction: column;
    background: var(--surface);
    backdrop-filter: blur(12px);
    z-index: 9999;
    padding: 1rem 0;
    box-shadow: var(--ombre-2);
    overflow-y: auto;
    max-height: calc(100vh - 60px);
  }
  .mobile-nav.open .mobile-nav-item {
    flex-direction: row;
    justify-content: flex-start;
    padding: 0.75rem 1.5rem;
    font-size: var(--txt-md);
    font-weight: 500;
    color: var(--text-sec);
    border-bottom: 1px solid var(--border);
    gap: 0.75rem;
  }
  .mobile-nav.open .mobile-nav-item svg {
    display: block;
  }
  .mobile-nav.open .mobile-nav-item span {
    font-size: var(--txt-md);
    text-align: left;
  }
  .base-mobile-menu {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    padding: 1rem 2rem 1.5rem;
    background: var(--surface);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    gap: .25rem;
    z-index: 9999;
    box-shadow: var(--ombre-2);
  }
  .base-mobile-menu.open { display: flex; }
  .base-mobile-menu a {
    font-size: var(--txt-md);
    font-weight: 500;
    color: var(--text-sec);
    text-decoration: none;
    padding: .75rem 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
  }
  .base-mobile-menu a:hover { color: var(--on-or); }
  .base-mobile-cta { color: var(--or-texte) !important; font-weight: 700 !important; }
  .base-hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    margin-left: auto;
  }
  .base-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text, var(--bg));
    border-radius: var(--rayon-2xs);
  }
  html, body { overflow-x: hidden !important; width: 100% !important; }
  #comparer-wrapper { margin-left: 0 !important; width: 100% !important; }
  .sidebar { display: none !important; }
  .main-wrapper { margin-left: 0 !important; }
  .container { margin-left: 0 !important; padding-left: 1rem !important; padding-right: 1rem !important; }
  .site-header { display: none !important; }

  /* ── DASHBOARD ── */
  .d-section-label { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .d-period-group { display: flex; flex-wrap: wrap; gap: 0.25rem; }
  .d-period-btn { font-size: var(--txt-2xs); padding: 0.25rem 0.5rem; }
  .d-right { display: flex !important; flex-direction: column; width: 100% !important; margin-top: 1rem; }
  .d-body { flex-direction: column !important; }
  .d-chart-wrap { height: 250px !important; min-height: 250px; }
  #d-chart { width: 100% !important; height: 250px !important; }
  body { overflow: auto !important; }
  .d-root { overflow: auto !important; height: auto !important; }

  /* ── COMPARER ── */
  .compare-slots .compare-slot { max-width: 100% !important; min-width: 100% !important; }
  .comparer-header { margin-top: 56px; text-align: center; align-items: center; }
  .comparer-header-left { text-align: center; align-items: center; display: flex; flex-direction: column; }
  .compare-clear-btn { align-self: center; margin: 0 auto; display: block; }
  .compare-slots { align-items: center; padding: 0 1rem; width: 100%; box-sizing: border-box; }
  .comparer-layout, .main-content { overflow-x: hidden !important; max-width: 100% !important; }
}
@media (min-width: 769px) {
  .base-hamburger { display: none; }
  /* ⚠ LE MENU AUSSI, ET IL MANQUAIT. `.base-mobile-menu` n'est declare que dans
     le bloc `max-width: 768px` ci-dessus, ou il vaut `display: none` jusqu'a ce
     que `.open` l'ouvre. Au-dessus de 768 px, il n'avait AUCUNE regle : un
     <div> sans regle est `display: block`. Le defaut ne se voit pas tant que
     `header.site-header` est masque pour tout le monde ; il apparait des que la
     chrome publique revient (base.html). */
  .base-mobile-menu { display: none; }
}

/* ── MINI TOPBAR MOBILE (comparer + dashboard) ── */
.mobile-topbar {
  display: none;
}
@media (max-width: 768px) {
  .mobile-topbar {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--surface);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding: 0 1rem;
    z-index: 9998;
    gap: 1rem;
  }
  .mobile-topbar-burger {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
  }
  /* ⚠ CES TROIS BARRES ETAIENT INVISIBLES, ET C'EST LE MEME DEFAUT QUE LE TITRE
     JUSTE EN DESSOUS, A UN JETON PRES. Elles valaient `var(--surface)` —
     c'est-a-dire LE FOND DE LA BARRE QUI LES PORTE (#111116 en sombre) : trois
     traits noirs sur du noir. Mesure a la capture, 2026-09-10, Terminal a
     390 px : la moitie gauche de la barre haute etait vide, et le SEUL moyen
     d'ouvrir le menu sous 768 px ne se voyait pas.
     ⚠ NI L'OUTIL DE CONTRASTE NI CELUI DES LARGEURS NE POUVAIENT LE VOIR : un
     <span> vide de 22 x 2 px ne porte aucun TEXTE a mesurer, et il ne deborde
     de rien. Il n'y avait qu'a regarder — et la barre n'etait sur aucune
     capture avant que le Terminal en recoive une a 390 px.
     `--text-sec` et non `--text` : une commande de chrome n'est pas le sujet. */
  .mobile-topbar-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text-sec);
    border-radius: var(--rayon-2xs);
  }
  /* Le burger est la seule cible de cette barre : il prend le plancher tactile
     du § 2.6 au lieu des 30 x 30 que son rembourrage de 4 px lui donnait. */
  .mobile-topbar-burger {
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    margin-left: -10px;
  }
  /* ⚠ CE TITRE ETAIT INVISIBLE, ET C'EST UN JETON EMPLOYE A CONTRESENS.
     Il valait `var(--on-or)` : #16171e, l'encre prevue POUR UN APLAT D'OR, ou
     elle donne 9,5:1. Posee ici sur `--surface` (#111116 en sombre), elle donne
     1,05:1 — le mot « Terminal » etait un fantome en haut de chaque ecran sous
     768 px, depuis que la barre existe.
     ⚠ ET AUCUN DES DEUX OUTILS NE POUVAIT LE VOIR : contraste_ecran.py mesurait
     a 1 280 px, ou `.mobile-topbar` est en `display: none`. C'est pour cela
     qu'il prend desormais une largeur en argument. */
  .mobile-topbar-title {
    font-size: var(--txt-md);
    font-weight: 600;
    color: var(--text);
  }
}