/* ================================================================
   COMCO — mobile.css — Correctifs responsive complets
   Inclus dans app.blade.php (pages internes)
   home.blade.php gère ses propres correctifs en inline
================================================================ */

/* ══════════════════════════════════════════════════════════════
   1. GLOBAL — Empêcher le scroll horizontal
══════════════════════════════════════════════════════════════ */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
*, *::before, *::after {
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════
   2. HEADER PAGES INTERNES (app.blade.php)
══════════════════════════════════════════════════════════════ */

/* Top bar : empêcher débordement */
@media (max-width: 768px) {
  .top { display: block; }
  .top .wrap {
    height: auto !important;
    min-height: 34px;
    padding: 5px 14px;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 6px;
  }
  .top .wrap > div:first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    gap: 6px !important;
    flex-wrap: nowrap;
  }
  /* Icônes tél et mail plus petites */
  .top a {
    font-size: 11.5px;
    white-space: nowrap;
  }
  /* Masquer le texte du mail, garder l'icône */
  .top-mail { display: none; }
  /* RS top droite : masquer le texte Facebook */
  .top-fb-txt { display: none; }
}

/* Mainbar pages internes */
@media (max-width: 960px) {
  .mainbar .wrap {
    height: 64px !important;
    padding: 0 14px;
    gap: 10px;
  }

  /* Logo — toujours sur fond blanc pour être visible quel que soit le fond */
  .logo {
    background: #fff !important;
    padding: 5px 10px !important;
    border-radius: 10px !important;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
  }
  .logo img { height: 42px !important; }

  /* Burger — fond blanc, icône vert foncé, toujours cliquable au-dessus de tout */
  .burger {
    display: flex !important;
    background: #fff !important;
    color: #0B3D2E !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px !important;
    cursor: pointer !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.18) !important;
    position: relative !important;
    z-index: 72 !important;   /* Au-dessus du backdrop(69) ET du nav(70) */
    pointer-events: auto !important;
  }
  .burger i, .burger svg {
    color: #0B3D2E !important;
    stroke: #0B3D2E !important;
    pointer-events: none;
  }
  /* Le hcta (conteneur du burger) doit aussi être cliquable */
  .hcta {
    position: relative;
    z-index: 72 !important;
    pointer-events: auto !important;
  }

  /* Au scroll sticky — logo fond blanc FORCÉ (écrase styles.css qui le met transparent) */
  .site-header.scrolled .logo {
    background: #fff !important;
    padding: 5px 10px !important;
    border-radius: 10px !important;
  }
  .site-header.scrolled .logo img {
    height: 42px !important;
  }
  /* Burger au scroll : reste blanc/foncé (écrase rgba(255,255,255,.16) de styles.css) */
  .site-header.scrolled .burger {
    background: #fff !important;
    color: #0B3D2E !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.2) !important;
    z-index: 72 !important;
  }
  .site-header.scrolled .burger i,
  .site-header.scrolled .burger svg {
    color: #0B3D2E !important;
    stroke: #0B3D2E !important;
  }

  /* Masquer le bouton CTA dans mainbar sur mobile */
  .hcta-btn { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   3. BANNEAU TITRE (pages internes)
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .banner .wrap { padding: 24px 14px 28px; }
  .banner h1 { font-size: clamp(20px, 5vw, 28px) !important; line-height: 1.25; }
  .banner p  { font-size: 13.5px; margin-top: 8px; }
  .crumb {
    font-size: 11.5px;
    flex-wrap: wrap;
    gap: 3px;
    line-height: 1.4;
  }
}

/* ══════════════════════════════════════════════════════════════
   4. LAYOUT PRINCIPAL (colonnes → empilé)
══════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 24px 0 36px !important;
  }
  .side { position: static !important; top: auto !important; }
}

/* ══════════════════════════════════════════════════════════════
   5. IMAGE FLOTTANTE → pleine largeur
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .page-hero-img {
    float: none !important;
    width: 100% !important;
    margin: 0 0 24px 0 !important;
    shape-outside: none !important;
    border-radius: 12px;
  }
  .page-hero-photo { height: 240px !important; }
  .inst-img-wrap {
    float: none !important;
    width: 100% !important;
    margin: 0 0 18px 0 !important;
  }
  .inst-img { min-height: 180px !important; }
  .page-body::after { content: ''; display: table; clear: both; }
}

/* ══════════════════════════════════════════════════════════════
   6. GRILLES → 1 colonne
══════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .g2, .g3, .g4, .nl .wrap, .cta {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .cta { padding: 26px 18px !important; }
}

/* ══════════════════════════════════════════════════════════════
   7. SIDEBAR
══════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .side .box { border-radius: 10px; }
  .side .box h3 { font-size: 14.5px; padding: 11px 14px; }
  .side nav a  { font-size: 13.5px; padding: 9px 12px; }
  .help { padding: 14px; }
}

/* ══════════════════════════════════════════════════════════════
   8. MENU MOBILE (pages internes)
══════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .nav {
    position: fixed;
    top: 0; right: 0;
    height: 100dvh;
    width: min(300px, 82vw);
    background: #fff;
    z-index: 70;
    display: block;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow: -12px 0 40px -8px rgba(11,61,46,.4);
    overflow-y: auto;
    padding-bottom: 40px;
    pointer-events: none;        /* ← bloque les clics quand le nav est hors écran */
  }
  .nav.open {
    transform: translateX(0);
    pointer-events: auto;        /* ← réactive les clics quand ouvert */
  }
  .nav .wrap { flex-direction: column; align-items: stretch; padding: 0; gap: 0; }
  .nav::before {
    content: 'Menu';
    display: block;
    font-weight: 700;
    color: #0B3D2E;
    font-size: 16px;
    padding: 18px 18px 10px;
    border-bottom: 2px solid #E4EBE7;
  }
  .nav .item { border-bottom: 1px solid #F0ECE2; }
  .nav .item > a { color: #0B3D2E !important; padding: 13px 18px; font-weight: 600; font-size: 14.5px; justify-content: space-between; }
  .nav .item.active > a, .nav .item:hover > a { background: #EAF6F1; }
  .nav .drop {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 4px 0 10px;
    background: #F8FAF9;
  }
  .nav .drop a { padding: 9px 18px 9px 30px; font-size: 13.5px; color: #5A6560; }
  .nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(11,61,46,.5);
    z-index: 69;
    opacity: 0; visibility: hidden;
    transition: opacity .3s;
  }
  .nav-backdrop.open { opacity: 1; visibility: visible; }
  body.nav-lock { overflow: hidden; }
}

/* ══════════════════════════════════════════════════════════════
   9. CONTENU CMS
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .cms-content { font-size: 15px; line-height: 1.75; }
  .cms-content h2 { font-size: 19px; margin: 20px 0 10px; }
  .cms-content h3 { font-size: 16px; margin: 16px 0 8px; }
  .cms-content table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .cms-content .grid,
  .cms-content .g2,
  .cms-content .g3,
  .cms-content .g4 { grid-template-columns: 1fr !important; gap: 12px !important; }
  .cms-content .cta { grid-template-columns: 1fr !important; padding: 20px 16px !important; }
  .cms-content .card { padding: 16px; }
}

/* ══════════════════════════════════════════════════════════════
   10. BOUTON SCROLL TO TOP — au-dessus du flash info
══════════════════════════════════════════════════════════════ */
.totop {
  bottom: 62px !important;  /* flash=46px + marge 16px */
  right: 16px !important;
  z-index: 57 !important;   /* Au-dessus du flash (z-index:56) */
}
@media (max-width: 640px) {
  .totop { bottom: 58px !important; right: 12px !important; width: 44px !important; height: 44px !important; }
}

/* ══════════════════════════════════════════════════════════════
   11. FLASH INFO — taille mobile
══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .flash { height: 42px; }
  .flash .lbl { padding: 0 12px 0 10px; font-size: 11.5px; }
  body { padding-bottom: 42px; }
}

/* ══════════════════════════════════════════════════════════════
   12. WRAP — padding réduit
══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .wrap { padding: 0 14px !important; }
}

/* ══════════════════════════════════════════════════════════════
   13. INPUTS — éviter zoom auto iOS
══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  input, textarea, select { font-size: 16px !important; }
}