/* =========================================================
   Pauline Mauroux — styles communs du site
   Header, navigation, footer et variables globales.
   ========================================================= */
:root {
  --ink: #2d2d2d;
  --violet: #AFACFB;
  --yellow: #FFDE59;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* HEADER */
.site-header {
  height: 68px;
  border-top: 3px solid rgba(175,172,251,.28);
  border-bottom: 1px solid rgba(0,0,0,.18);
  background: #fff;
  position: relative;
  z-index: 100;
}
.site-nav {
  height: 100%;
  max-width: 1180px;
  margin: auto;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.brand {
  font-weight: 950;
  color: #111;
  text-decoration: none;
  font-size: 18px;
}
.nav-pills { display:flex; align-items:center; gap:10px; }
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 22px;
  border-radius: 999px;
  background: rgba(255,222,89,.72);
  color: #272727;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
}
body[data-section="home"] [data-nav="home"],
body[data-section="formations"] [data-nav="formations"],
body[data-section="livre"] [data-nav="livre"],
body[data-section="newsletter"] [data-nav="newsletter"],
body[data-section="conferences"] [data-nav="conferences"],
body[data-section="scenarios"] [data-nav="scenarios"],
body[data-section="services"] [data-nav="services"] {
  background: rgba(175,172,251,.65);
}
.nav-group { position: relative; }
.dropdown {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  min-width: 260px;
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  box-shadow: 0 18px 36px rgba(0,0,0,.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: .16s;
}
.nav-group:hover .dropdown,
.nav-group:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.dropdown a {
  display: block;
  padding: 10px 12px;
  border-radius: 9px;
  color: #2d2d2d;
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
}
.dropdown a:hover { background: rgba(255,222,89,.22); }
.nav-toggle {
  display: none;
  margin-left: auto;
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 900;
  background: rgba(255,222,89,.72);
  cursor: pointer;
}

/* SÉPARATEUR + FOOTER */
.site-separator {
  max-width: 600px;
  margin: 0 auto 58px;
  padding: 0 20px;
}
.site-separator img { display:block; width:100%; height:auto; }
.site-footer {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px 36px;
  text-align: center;
  color: #2d2d2d;
}
.footer-row {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:300px;
  margin-bottom:20px;
}
.human-badge { width:132px; height:auto; }
.socials {
  display:flex;
  gap:24px;
  align-items:center;
  font-weight:950;
}
.social-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  line-height:1;
  transition:transform .18s ease, opacity .18s ease;
}
.social-link:hover {
  transform:translateY(-2px);
  opacity:.82;
}
.linkedin {
  font-size:28px;
  color:#0a66c2;
  letter-spacing:-.08em;
}
.instagram {
  width:31px;
  height:31px;
  color:#e1306c;
}
.instagram-glyph {
  position:relative;
  display:block;
  width:27px;
  height:27px;
  border:3px solid currentColor;
  border-radius:8px;
}
.instagram-glyph::before {
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  border:3px solid currentColor;
  border-radius:50%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.instagram-glyph::after {
  content:"";
  position:absolute;
  width:4px;
  height:4px;
  background:currentColor;
  border-radius:50%;
  right:4px;
  top:4px;
}
.site-footer p { font-size:12px; margin:5px 0; }
.site-footer .legal {
  font-size:9px;
  line-height:1.35;
  max-width:980px;
  margin:10px auto 0;
}

@media (max-width:980px) {
  .nav-pills { gap:7px; }
  .pill { padding:8px 14px; font-size:12px; }
  .footer-row { gap:180px; }
}

@media (max-width:780px) {
  .site-header { height:auto; min-height:62px; }
  .site-nav { min-height:62px; flex-wrap:wrap; padding:10px 14px; }
  .nav-toggle { display:block; }
  .nav-pills {
    display:none;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    padding:8px 0;
  }
  .site-header.menu-open .nav-pills { display:flex; }
  .nav-group { width:100%; }
  .pill { width:100%; justify-content:flex-start; }
  .dropdown {
    display:none;
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    margin-top:4px;
  }
  .footer-row { gap:70px; }
}

@media (max-width:520px) {
  .footer-row { gap:28px; }
  .site-footer .legal { font-size:8px; }
}


/* =========================================================
   V8 — RÈGLE COMMUNE DES TITRES D’OUVERTURE DES PAGES INTERNES
   Même largeur, même échelle, même comportement de retour à la ligne.
   La homepage conserve son hero spécifique.
   ========================================================= */

:root {
  --page-hero-max: 1120px;
  --page-hero-size: clamp(44px, 4.35vw, 66px);
  --page-hero-line: .96;
  --page-hero-letter: -.03em;
}



/* =========================================================
   V10 — HEADER DESKTOP RÉPARTI SUR TOUTE LA LARGEUR
   Le logo reste à gauche ; les boutons gardent leur taille ;
   l'espace restant est distribué entre les entrées du menu.
   ========================================================= */

@media (min-width: 901px) {
  .site-header {
    width: 100%;
  }

  .site-header-inner,
  .header-inner,
  .nav-wrap {
    width: 100%;
    max-width: none !important;
  }

  .site-nav,
  .main-nav,
  .header-nav {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    min-width: 0;
  }

  .site-nav > *,
  .main-nav > *,
  .header-nav > * {
    flex: 0 0 auto !important;
  }
}


/* =========================================================
   V11 — HEADER CENTRÉ, COMME LE SITE WIX ACTUEL
   Tout le contenu du header vit dans une largeur commune,
   centrée dans la fenêtre. Le menu garde des espacements
   réguliers sans s'étirer jusqu'aux bords.
   ========================================================= */

@media (min-width: 901px) {
  .site-header {
    width: 100%;
  }

  .site-header-inner,
  .header-inner,
  .nav-wrap {
    width: min(1120px, calc(100% - 48px)) !important;
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .site-nav,
  .main-nav,
  .header-nav {
    flex: 0 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    min-width: 0;
  }

  .site-nav > *,
  .main-nav > *,
  .header-nav > * {
    flex: 0 0 auto !important;
  }
}

@media (min-width: 1200px) {
  .site-nav,
  .main-nav,
  .header-nav {
    gap: 18px !important;
  }
}


/* V37 — menu principal plus lisible */
@media (min-width: 901px) {
  .pill {
    font-size: 14px !important;
  }
  .dropdown a {
    font-size: 14px !important;
  }
}