/*!
 * Pascal Malapert — Critical CSS
 * Chargé en premier dans <head>. Above-the-fold + @font-face.
 * Thème standalone — aucun override de thème parent nécessaire.
 */

/* ─── @font-face — déclarées ici pour que le preload soit associé immédiatement ─
   Les fichiers .woff2 sont preloadés via <link rel="preload"> dans performance.php.
   Sans @font-face dans ce fichier, le navigateur ne peut pas les utiliser
   avant que fonts.css (async) ne charge → risque de CLS. ─────────────────── */
@font-face {
  font-family: 'Syne';
  src: url('../fonts/syne-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Familjen Grotesk';
  src: url('../fonts/familjen-grotesk-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Familjen Grotesk';
  src: url('../fonts/familjen-grotesk-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Familjen Grotesk';
  src: url('../fonts/familjen-grotesk-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ─── Reset minimal ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Familjen Grotesk',sans-serif;background:#fff;color:#0C0C0B;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font:inherit}

/* ─── Variables CSS ──────────────────────────────────────────────────────── */
:root {
  --noir:        #0C0C0B;
  --orange:      #C4440A;
  --beige:       #F7F5F0;
  --blanc:       #FFFFFF;
  --font-title:  'Syne', sans-serif;
  --font-body:   'Familjen Grotesk', sans-serif;
  --border:      2px solid #0C0C0B;
  --max-w:       1200px;
  --max-article: 760px;
  --pad-h:       60px;
  --nav-h:       88px;
}

/* ─── Skip link accessibilité ────────────────────────────────────────────── */
.skip-link{position:absolute;top:-40px;left:0;background:var(--orange);color:#fff;padding:8px 16px;z-index:999;font-size:14px;font-weight:600;transition:top 0.2s}
.skip-link:focus{top:0}

/* ─── Navigation ─────────────────────────────────────────────────────────── */
.site-nav {
  height: var(--nav-h);
  padding: 0 var(--pad-h);
  display: flex;
  align-items: center;
  border-bottom: var(--border);
  background: var(--blanc);
}
.site-nav__logo {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.03em;
  color: var(--noir);
  flex-shrink: 0;
  white-space: nowrap;
}
.site-nav__logo span { color: var(--orange); }
.site-nav__menu {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 52px;
  font-size: 15px;
  font-weight: 500;
  margin-left: auto;
  margin-right: auto;
}
.site-nav__menu a { color: var(--noir); transition: color 0.15s; }
.site-nav__menu a:hover, .site-nav__menu a.current { color: var(--orange); }
.site-nav__menu a.current { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ─── Sous-menus (dropdown) ──────────────────────────────────────────────── */
/* .site-nav__item occupe toute la hauteur de la nav : le dropdown se colle
   pile sous la bordure de la nav, sans "trou" qui casserait le :hover. */
.site-nav__item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
}
.site-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  color: var(--noir);
  cursor: pointer;
  flex-shrink: 0;
}
.site-nav__item:hover .site-nav__toggle,
.site-nav__item.is-open .site-nav__toggle,
.site-nav__item:has(.current) .site-nav__toggle { color: var(--orange); }
.site-nav__toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* La flèche ne pivote pas et ne bouge pas : seul le sous-menu apparaît/disparaît. */
.site-nav__arrow { display: block; pointer-events: none; }

.site-nav__submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  min-width: 220px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--blanc);
  border: var(--border);
  box-shadow: 4px 4px 0 rgba(12, 12, 11, 0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
.site-nav__item:hover .site-nav__submenu,
.site-nav__item:focus-within .site-nav__submenu,
.site-nav__item.is-open .site-nav__submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.site-nav__submenu li { list-style: none; }
.site-nav__submenu a {
  display: block;
  padding: 10px 20px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--noir);
  transition: color 0.15s, background-color 0.15s;
}
.site-nav__submenu a:hover,
.site-nav__submenu a:focus-visible,
.site-nav__submenu a.current {
  color: var(--orange);
  background-color: rgba(196, 68, 10, 0.06);
}

/* ─── Burger (mobile uniquement — activé dans main.css sous 768px) ───────── */
.site-nav__burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.site-nav__burger-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--noir);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-nav.is-open .site-nav__burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav.is-open .site-nav__burger-bar:nth-child(2) { opacity: 0; }
.site-nav.is-open .site-nav__burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .site-nav__burger-bar { transition: none; } }

.site-nav__actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.site-nav__linkedin {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: var(--border); color: var(--noir);
  flex-shrink: 0; transition: background 0.15s, color 0.15s;
}
.site-nav__linkedin:hover { background: var(--noir); color: var(--blanc); }

/* ─── Utilitaires typographiques ─────────────────────────────────────────── */
/* Remplace les inline style="color:var(--orange)" — utiliser class="text-orange" */
.text-orange { color: var(--orange); }

/* ─── Boutons ────────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--orange); color: var(--blanc) !important;
  padding: 14px 28px; font-family: var(--font-title);
  font-weight: 800; font-size: 13px; letter-spacing: 0.06em;
  cursor: pointer; box-shadow: 0 2px 8px rgba(196,68,10,0.2);
  display: inline-block; transition: opacity 0.15s, transform 0.15s; white-space: nowrap;
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); color: var(--blanc) !important; }
.btn-primary--large { padding: 16px 36px; font-size: 14px; letter-spacing: 0.04em; }
.btn-primary--xl    { padding: 18px 44px; font-size: 16px; box-shadow: 0 4px 16px rgba(196,68,10,0.4); }
.btn-secondary {
  border: var(--border); color: var(--noir); padding: 14px 28px;
  font-size: 14px; font-weight: 600; cursor: pointer; background: transparent;
  display: inline-block; transition: background 0.15s, color 0.15s;
}
.btn-secondary:hover { background: var(--noir); color: var(--blanc); }

/* ─── Hero ────────────────────────────────────────────────────────────────── */
.hero { padding: 72px var(--pad-h) 56px; border-bottom: var(--border); }
.hero__eyebrow {
  font-size: 11px; font-weight: 600; color: var(--orange);
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 32px;
}
.hero__grid {
  display: grid; grid-template-columns: 1fr 340px;
  gap: 56px; align-items: start; margin-bottom: 56px;
}
.hero__h1 {
  font-family: var(--font-title); font-weight: 800;
  font-size: 78px; line-height: 0.92; letter-spacing: -0.05em;
  margin: 0 0 40px; color: var(--noir);
}
.hero__h1 span { color: var(--orange); }
.hero__lead { font-size: 17px; color: #555; line-height: 1.7; margin: 0 0 44px; max-width: 480px; }
.hero__cta  { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__image-wrap {
  background: var(--beige); height: 440px; border: var(--border);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hero__image-wrap img { width: 100%; height: 440px; object-fit: cover; }

/* ─── Section helpers ─────────────────────────────────────────────────────── */
.section-label {
  font-family: var(--font-title); font-weight: 800; font-size: 10px;
  color: var(--orange); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px;
}
.section-label--large { font-size: 11px; margin-bottom: 20px; }
.section-title {
  font-family: var(--font-title); font-weight: 800; font-size: 44px;
  line-height: 1.1; letter-spacing: -0.04em; margin: 0 0 52px; color: var(--noir);
}
.site-main { max-width: var(--max-w); margin: 0 auto; }