/* ═══════════════════════════════════════════════════════════════════════════
   Fair4Pitch — habillage commun (header + footer + barre d'action mobile).

   Base : le header fourni par Alex (classes .f4h__*, maquette d'origine).
   Objectif : rendu et comportement IDENTIQUES sur les 5 pages publiques, alors
   que chacune embarque son propre CSS.

   Trois précautions, sans lesquelles le header se déformait d'une page à l'autre :
     1. cette feuille est chargée APRÈS le <style> de chaque page, donc elle
        gagne à spécificité égale ;
     2. reset local (.f4h *, .f4p-ft *) : marges, polices, interlignage,
        graisses et espacements ne sont plus hérités du <body> de la page ;
     3. tout est en px — les pages ne déclarent pas la même taille de police
        de référence, donc des rem donneraient des tailles différentes.

   Largeur : les pages ont des contenus de largeurs différentes (accueil 1100,
   startups 1180, marraines 1240, candidature et réservation 760, volontairement
   étroites pour la lisibilité des formulaires). Le header adopte UNE largeur
   unique (--f4h-wrap) pour ne plus changer d'une rubrique à l'autre.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --f4h-wrap: 1180px;      /* largeur de la zone de texte du header et du footer */
  --f4h-gutter: 24px;   /* meme gouttiere que le contenu des pages */
  --f4h-top-h: 36px;       /* hauteur du bandeau événement */
  --f4h-main-h: 84px;      /* hauteur de la barre principale, constante */
}

/* ─── 1 · Reset local : on coupe tout héritage venant de la page ─────────── */
.f4h,
.f4h *,
.f4h *::before,
.f4h *::after,
.f4p-ft,
.f4p-ft *,
.f4p-ft *::before,
.f4p-ft *::after,
.f4h-mobile,
.f4h-mobile * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  list-style: none;
  border: 0;
  background: none;
  float: none;
  position: static;
  max-width: none;
  min-width: 0;
  text-align: left;
  text-shadow: none;
  box-shadow: none;
  border-radius: 0;
  transform: none;
  opacity: 1;
}

/* Les ancres internes doivent s'arrêter sous le header collant. */
html { scroll-padding-top: calc(var(--f4h-top-h) + var(--f4h-main-h) + 12px); }

/* position:sticky exige qu'aucun ancetre ne cree de contexte de defilement.
   Les pages candidature et reservation posent body{overflow-x:hidden}, ce qui
   suffit a rendre le header non collant. overflow-x:clip empeche le meme
   debordement horizontal SANS creer ce contexte : le header reste collant.
   Cette feuille etant chargee apres le CSS des pages, cette regle gagne. */
body { overflow-x: clip; }

/* ─── 2 · Header collant ─────────────────────────────────────────────────── */
.f4h {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #000;
  /* Pas de liseré clair sous le header : il passait inaperçu sur les pages
     crème mais ressortait comme une ligne blanche sur les fonds sombres
     (page startups, page marraines). Une bordure sombre suffit à détacher
     le header du contenu. */
  border-bottom: 1px solid #1E1E1E;
  display: block;
}
.f4h a { text-decoration: none; color: inherit; }

/* Zone de texte alignée sur le contenu des pages */
.f4h__in {
  max-width: var(--f4h-wrap);
  margin: 0 auto;
  padding: 0 var(--f4h-gutter);
  display: flex;
  align-items: center;
  gap: 26px;
  width: 100%;
  height: 100%;
}

/* Bandeau du haut — aligné sur celui de fair4b.com : contenu centré, lien de
   retour épinglé à droite pour ne pas décaler le centrage. */
.f4h .f4h__top {
  height: var(--f4h-top-h);
  border-bottom: 1px solid #0F0F0F;
  font-size: 12.5px;
  line-height: 1;
  white-space: nowrap;
}
.f4h .f4h__top .f4h__in {
  position: relative;
  justify-content: center;
}
.f4h .f4h__tl {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.f4h .f4h__back {
  position: absolute;
  right: var(--f4h-gutter);
  top: 50%;
  transform: translateY(-50%);
  color: #A3A3A1;
  white-space: nowrap;
}
.f4h .f4h__back:hover { color: #fff; }
.f4h .f4h__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7EB0A7;
  flex: 0 0 auto;
}
.f4h .f4h__strong { color: #fff; font-weight: 600; }
.f4h .f4h__muted { color: #D5D5D3; }
.f4h .f4h__signup { color: #8BC2B8; margin-left: 7px; }
.f4h .f4h__signup:hover { color: #a7d5cd; }



/* Barre principale */
.f4h .f4h__main {
  height: var(--f4h-main-h);
}
.f4h .f4h__main .f4h__in { gap: 14px; }
.f4h .f4h__logo {
  height: 50px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}
.f4h .f4h__init {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 10px;
  letter-spacing: 1.6px;
  color: #808080;
  text-transform: uppercase;
  white-space: nowrap;
}
.f4h .f4h__nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
  font-size: 14.5px;
  line-height: 1;
  color: #BFBFBF;
  white-space: nowrap;
}
.f4h .f4h__nav a { padding: 4px 0; border-bottom: 2px solid transparent; }
.f4h .f4h__nav a:hover { color: #fff; border-bottom-color: #EB459E; }
.f4h .f4h__nav a[aria-current="page"] { color: #fff; border-bottom-color: #EB459E; }
.f4h .f4h__right {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 40px;
  flex: 0 0 auto;
}

/* Sélecteur de langue en boîtier, comme sur fair4b.com : deux boutons accolés
   dans un cadre, l'actif en aplat. */
.f4h .f4h__lang {
  display: flex;
  border: 1px solid #2A2A2A;
  border-radius: 4px;
  overflow: hidden;
  gap: 0;
}
.f4h .f4h__lang button {
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  line-height: 1;
  color: #8A8A88;
  cursor: pointer;
  transition: background .16s, color .16s;
}
.f4h .f4h__lang button:hover { color: #fff; }
.f4h .f4h__lang button.is-active,
.f4h .f4h__lang button.on {
  background: #EB459E;
  color: #fff;
}

.f4h .f4h__cta {
  background: #EB459E;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  height: 37px;
  padding: 0 22px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  transition: background .16s;
  flex: 0 0 auto;
}
.f4h .f4h__cta:hover { background: #d63a8d; }

/* Bouton burger — masqué au-dessus de 860 px */
.f4h .f4h__burger {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border: 1px solid #2A2A2A;
  border-radius: 3px;
  flex: 0 0 auto;
}
.f4h .f4h__burger:hover { border-color: #EB459E; }

/* ─── 3 · Footer ─────────────────────────────────────────────────────────── */
.f4p-ft {
  display: block;
  background: #0E1A2E;
  border-top: 1px solid #1E2C45;
  color: #A8B4C8;
  font-size: 14px;
  padding: 44px 0 0;
  margin-top: 64px;
}
.f4p-ft a { color: inherit; text-decoration: none; }
.f4p-ft__in {
  max-width: var(--f4h-wrap);
  margin: 0 auto;
  padding: 0 var(--f4h-gutter) 36px;
  display: grid;
  gap: 34px;
}
.f4p-ft__brand img { height: 40px; width: auto; display: block; margin-bottom: 14px; }
.f4p-ft__baseline { max-width: 34em; color: #8996AC; font-size: 13.5px; line-height: 1.6; }
.f4p-ft__h {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #6E7B91;
  margin-bottom: 14px;
}
.f4p-ft__col ul { display: grid; gap: 8px; }
.f4p-ft__col a:hover { color: #EB459E; }
.f4p-ft__next {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 12.5px;
  color: #8BC2B8;
  margin-bottom: 16px;
}
.f4p-ft__cta {
  display: inline-flex;
  align-items: center;
  height: 37px;
  padding: 0 20px;
  background: #EB459E;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 2px;
  transition: background .16s;
}
.f4p-ft__cta:hover { background: #d63a8d; }
.f4p-ft__legal { border-top: 1px solid #1E2C45; }
.f4p-ft__legal-in {
  max-width: var(--f4h-wrap);
  margin: 0 auto;
  padding: 16px var(--f4h-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 12.5px;
  color: #6E7B91;
}
.f4p-ft__legal-in a:hover { color: #8BC2B8; }

/* ─── 4 · Barre d'action mobile (masquée au-dessus de 860 px) ────────────── */
.f4h-mobile {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: #000;
  border-top: 1px solid #1E2C45;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
.f4h-mobile__in {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: var(--f4h-wrap);
  margin: 0 auto;
}
.f4h-mobile__txt {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8BC2B8;
  line-height: 1.3;
}
.f4h-mobile__cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  background: #EB459E;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: 3px;
  white-space: nowrap;
  text-decoration: none;
}
.f4h-mobile__cta:active { background: #d63a8d; }

/* ─── 5 · Accessibilité ─────────────────────────────────────────────────── */
.f4h a:focus-visible,
.f4h button:focus-visible,
.f4p-ft a:focus-visible,
.f4h-mobile a:focus-visible {
  outline: 2px solid #EB459E;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .f4h .f4h__cta,
  .f4h .f4h__lang button,
  .f4p-ft__cta { transition: none; }
}

/* ─── 6 · Points de rupture ─────────────────────────────────────────────── */
@media (min-width: 861px) {
  .f4p-ft__in { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

@media (max-width: 1150px) {
  .f4h .f4h__in { gap: 14px; }
  .f4h .f4h__tl { flex: 1 1 auto; }
  .f4h .f4h__main .f4h__in { gap: 12px; }
  .f4h .f4h__init { display: none; }
  .f4h .f4h__nav { gap: 16px; font-size: 13.5px; }
  .f4h .f4h__right { margin-left: 18px; gap: 10px; }
}

@media (max-width: 860px) {
  /* Bandeau : le lien de retour repasse dans le flux, le contenu reste centré. */
  .f4h .f4h__back {
    position: static;
    transform: none;
    margin-left: auto;
  }
  .f4h .f4h__right { margin-left: auto; gap: 10px; }
  :root {
    --f4h-gutter: 16px;
    --f4h-top-h: auto;
    --f4h-main-h: 62px;
  }

  /* Bandeau : deux lignes autorisées, mais il reste collant en haut. */
  .f4h .f4h__top { height: auto; line-height: 1.4; white-space: normal; }
  .f4h .f4h__top .f4h__in {
    height: auto;
    padding-top: 7px;
    padding-bottom: 7px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .f4h .f4h__muted { display: none; }        /* « · La Défense » : redondant sur petit écran */

  .f4h .f4h__main { height: var(--f4h-main-h); }
  .f4h .f4h__logo { height: 38px; }

  /* Le CTA du header disparaît : il est repris par la barre d'action du bas. */
  .f4h .f4h__cta { display: none; }

  .f4h .f4h__burger { display: inline-flex; }

  /* Nav en panneau déroulant sous la barre */
  .f4h .f4h__nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #0A0A0A;
    border-top: 1px solid #1E1E1E;
    border-bottom: 1px solid #1E1E1E;
    padding: 6px 0;
    white-space: normal;
    font-size: 15px;
  }
  .f4h .f4h__main { position: relative; }
  .f4h .f4h__nav.is-open { display: flex; }
  .f4h .f4h__nav a {
    padding: 13px var(--f4h-gutter);
    border-bottom: 0;
    border-left: 3px solid transparent;
  }
  .f4h .f4h__nav a:hover,
  .f4h .f4h__nav a[aria-current="page"] {
    border-bottom: 0;
    border-left-color: #EB459E;
    background: #121212;
    color: #fff;
  }

  html { scroll-padding-top: 116px; }

  .f4h-mobile { display: block; }
  /* Le contenu ne doit pas finir sous la barre d'action fixe. */
  .f4p-ft { padding-bottom: 76px; }

  .f4p-ft__in { padding: 0 var(--f4h-gutter) 30px; }
  .f4p-ft__legal-in { padding: 16px var(--f4h-gutter); }
}

@media (max-width: 480px) {
  .f4h-mobile__txt { display: none; }        /* on garde le seul bouton */
  .f4h-mobile__cta { margin-left: 0; width: 100%; }
}
