/* ZeroBlabla.AI — reset + polices auto-hébergées + responsive.
   Le détail visuel des pages reste en styles inline (fidélité maquettes). */

/* --- Polices auto-hébergées (woff2 dans /assets/fonts). Fallback système. --- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/space-grotesk-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/space-grotesk-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/space-grotesk-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/manrope-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/manrope-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/manrope-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/manrope-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 800; font-display: swap;
  src: url('/assets/fonts/manrope-800.woff2') format('woff2');
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
section[id] { scroll-margin-top: 84px; }
img { max-width: 100%; height: auto; }

/* --- Responsive : on réduit les très gros titres / paddings sur petit écran. --- */
@media (max-width: 720px) {
  h1 { font-size: 40px !important; letter-spacing: -1px !important; }
  h2 { font-size: 30px !important; }
  section { padding-left: 18px !important; padding-right: 18px !important; }
}
@media (max-width: 560px) {
  /* grilles 2/3/4 colonnes -> 1 colonne */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* Pied de home : zones d'intervention repliées derrière la ligne de résumé.
   Le contenu (villes/départements) reste dans le HTML initial → indexé par Google. */
.zb-zones > summary { list-style: none; display: block; }
.zb-zones > summary::marker { content: ""; display: none; }
.zb-zones > summary::-webkit-details-marker { display: none; }

/* Modal de prise de RDV (desktop) : overlay + iframe, voir assets/js/rdv-modal.js. */
.zb-rdv-overlay { position: fixed; inset: 0; background: rgba(15, 24, 69, .72); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.zb-rdv-box { position: relative; width: min(1060px, 96vw); height: min(780px, 92vh); background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.zb-rdv-box iframe { width: 100%; height: 100%; border: 0; display: block; }
.zb-rdv-close { position: absolute; top: 10px; right: 12px; z-index: 2; background: #15205a; color: #fff; border: 0; width: 34px; height: 34px; border-radius: 50%; font-size: 20px; cursor: pointer; line-height: 1; }
.zb-rdv-close:hover { background: #1c2a6e; }

/* Infobulle ⓘ (méthode ZeroBlabla : « irritants ») — CSS pur, survol desktop / tap mobile (focus). */
.zb-info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: #e4e7f0; color: #5a6385; font-size: 10px; font-weight: 800; font-style: normal; cursor: help; position: relative; vertical-align: 1px; margin-left: 2px; outline: none; }
.zb-info::after { content: attr(data-tip); position: absolute; bottom: 140%; left: 50%; transform: translateX(-50%); background: #15205a; color: #fff; padding: 10px 13px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16); font-size: 12px; font-weight: 500; line-height: 1.55; width: 250px; text-align: left; opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 30; box-shadow: 0 10px 26px rgba(20, 33, 90, .35); }
.zb-info:hover::after, .zb-info:focus::after { opacity: 1; }
/* Variante claire du tooltip : sur fond sombre (hero marine), le tooltip devient blanc pour trancher. */
.zb-info--light::after { background: #ffffff; color: #15205a; border-color: rgba(20, 33, 90, .12); box-shadow: 0 14px 32px rgba(0, 0, 0, .35); }

/* ============================================================
   Menu principal (partials/nav) : liens + dropdown « Solutions »
   sur desktop, burger pur CSS (checkbox) sur mobile (<900px).
   ============================================================ */
.zb-burger-cb { display: none; }
.zb-burger { display: none; }
.zb-menu { display: flex; align-items: center; gap: 22px; font-family: 'Manrope', sans-serif; }
.zb-menu-link { font-size: 15px; font-weight: 700; color: #15205a; text-decoration: none; cursor: pointer; }
.zb-menu-link:hover { color: #1a9e5f; }
.zb-menu-sub { position: relative; }
.zb-menu-panel { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #eceef5; border-radius: 12px; box-shadow: 0 14px 34px rgba(20, 33, 90, .14); padding: 8px; display: none; min-width: 230px; z-index: 60; }
.zb-menu-panel::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } /* pont : évite que le survol se coupe entre le parent et le panneau */
.zb-menu-sub:hover .zb-menu-panel, .zb-menu-sub:focus-within .zb-menu-panel { display: block; }
.zb-menu-sublink { display: block; padding: 10px 14px; border-radius: 8px; font-size: 14.5px; font-weight: 600; color: #15205a; text-decoration: none; white-space: nowrap; }
.zb-menu-sublink:hover { background: #f5f7fb; color: #1a9e5f; }

@media (max-width: 899px) {
  .zb-burger { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 42px; height: 38px; padding: 0 10px; border: 1px solid #e3e6f5; border-radius: 9px; cursor: pointer; flex: none; background: #fff; }
  .zb-burger span { display: block; height: 2px; background: #15205a; border-radius: 2px; }
  .zb-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #ffffff; border-bottom: 1px solid #eef0f6; box-shadow: 0 18px 34px rgba(20, 33, 90, .12); flex-direction: column; align-items: stretch; gap: 0; padding: 6px 18px 14px; }
  .zb-burger-cb:checked ~ .zb-menu { display: flex; }
  .zb-menu-link { padding: 12px 4px; border-bottom: 1px solid #f1f2fa; }
  .zb-menu-parent { pointer-events: none; color: #8c95bd; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; border-bottom: 0; padding-bottom: 4px; } /* simple intitulé de groupe sur mobile */
  .zb-menu-panel { position: static; transform: none; display: block; border: 0; box-shadow: none; padding: 0 0 6px 12px; min-width: 0; }
  .zb-menu-panel::before { display: none; }
  .zb-menu-sublink { padding: 10px 4px; border-bottom: 1px solid #f1f2fa; border-radius: 0; }
}