/* Feuille commune à toutes les pages, chargée par includes/head.php
   (avant le <style> propre à chaque page, qui peut donc la surcharger).
   Remplace l'ancien bloc <style> inline de head.php et l'appel à Google Fonts. */

/* ── Police Lato hébergée sur le site (OFL, ../fonts/OFL.txt) — sous-ensemble latin ── */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/lato-300.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 300; font-display: swap; src: url('../fonts/lato-300-italic.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/lato-400.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/lato-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/lato-700.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/lato-900.woff2') format('woff2'); }

/* ── Canonical site header (shared nav) ──────────────────────────────────
   Single source of truth for the top bar so it is pixel-identical on every
   page (no logo/CTA shift when navigating). Declared here in <head>, before
   each page's own <style>, so pages can still add responsive @media overrides
   (e.g. hiding .nav-links on mobile). Do NOT redefine these per page. */
nav { position: sticky; top: 0; z-index: 100; background: var(--white); padding: 0 24px; box-shadow: 0 1px 0 var(--grey2), 0 4px 16px rgba(0,50,85,.07); }
.nav-inner { max-width: 1140px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-links a { color: var(--blue); text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: .02em; transition: color .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--green); }
/* Fixed CTA size (overrides each page's .btn-sm via higher specificity) so the
   button width — and thus the centered menu — never shifts between pages. */
nav .nav-cta { margin-left: 8px; padding: 10px 20px; font-size: 14px; }

/* Desktop : .nav-menu est transparent au layout (display:contents) → la barre
   reste logo | liens | CTA, exactement comme avant. Le hamburger est masqué. */
.nav-menu { display: contents; }
.nav-toggle { display: none; }

/* ── Menu mobile (hamburger) ──────────────────────────────────────────────
   Sous 820px : liens + CTA masqués, remplacés par un bouton hamburger qui
   déplie un panneau plein largeur sous la barre. Centralisé ici → toutes les
   pages en bénéficient. Ne pas remettre « .nav-links { display:none } » par page. */
@media (max-width: 820px) {
  /* Logo 2× plus petit sur mobile (override du style inline height:40px). */
  .nav-logo img { height: 20px !important; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0; margin: 0; border: 0;
    background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle span {
    display: block; width: 24px; height: 2px; margin: 0 auto; border-radius: 2px;
    background: var(--blue); transition: transform .2s ease, opacity .2s ease;
  }
  nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); padding: 8px 24px 20px;
    box-shadow: 0 8px 16px rgba(0,50,85,.08); border-top: 1px solid var(--grey2);
  }
  nav.open .nav-menu { display: flex; }
  .nav-menu .nav-links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav-menu .nav-links li { width: 100%; }
  .nav-menu .nav-links a { display: block; padding: 14px 4px; font-size: 16px; border-bottom: 1px solid var(--grey2); }
  nav .nav-cta { display: block; margin: 16px 0 0; text-align: center; }
}

/* Heroicons inline SVG — sizing & brand color (replaces the former emoji icons) */
.hi { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex-shrink: 0; }
.pain-icon .hi, .sector-icon .hi, .solution-mini-icon .hi, .uc-icon .hi,
.sf-icon .hi, .extra-icon .hi, .pp-icon .hi, .risk-icon .hi, .alert-icon .hi,
.hero-icon-big .hi, .featured-icon .hi, .client-logo-icon .hi,
.pain-icon, .sector-icon, .solution-mini-icon, .uc-icon, .sf-icon,
.extra-icon, .pp-icon, .risk-icon, .alert-icon, .hero-icon-big,
.featured-icon, .client-logo-icon { color: var(--green, #6cb255); }
.card-visual-icon { color: #fff; }