/* ============================================================
   header-fix.css — correction du bandeau (10/09/2026)

   Problèmes corrigés :
     1. Le logo touchait le menu (écart mesuré : 0 px) et rendait
        « Notre approche » illisible.
     2. « Notre approche », « Nos formules » et « Notre exigence »
        passaient sur deux lignes : les 9 liens + le CTA réclamaient
        1265 px pour 1152 px disponibles (déficit 113 px), le flex
        comprimait donc les liens jusqu'à la coupure. Seuls les
        libellés en deux mots pouvaient couper — d'où les 3 premiers.
     3. Logo trop haut pour la barre (99,8 px dans un bandeau
        compact de 119,8 px, marge 10 px, clippé par
        `header.header { overflow: hidden }` au moindre survol).

   Fichier ADDITIF : aucun fichier existant n'est modifié.
   À charger APRÈS style.css et mobile-fixes.css.
   Tout est scopé à `.header` : le reste du site ne bouge pas.
   ============================================================ */


/* ------------------------------------------------------------
   1. ÉCART LOGO ↔ PREMIER LIEN : 48 px garantis
   `.header-content` est en flex + `justify-content: space-between`.
   `gap` fixe l'écart MINIMUM, space-between répartit ensuite
   l'espace restant. Mesuré après correction : 52,7 px à 1920 px,
   50,1 px à 1366 px — jamais moins de 48 px.
   ------------------------------------------------------------ */
.header .header-content {
    gap: 48px;
}


/* ------------------------------------------------------------
   2. LOGO : tient dans la hauteur du bandeau, sans déformation
   Seule la LARGEUR est touchée. Le SVG conserve son viewBox et
   son `height: auto` (défini dans style.css), donc le ratio est
   préservé mathématiquement : 56 × (1270,76 / 1018,59) = 69,9 px.
   Le centrage vertical vient de `align-items: center` déjà présent
   sur `.header-content` ; `align-self` le verrouille.
   Marge sous le logo après correction : 25 px (bandeau haut),
   10 px (bandeau compact `.scrolled`). Plus aucun risque de coupe.
   ------------------------------------------------------------ */
.header .header-logo-animation {
    width: 56px;              /* 80 px → 56 px : hauteur 99,8 → 69,9 px */
}

.header .logo {
    flex: 0 0 auto;           /* le logo n'est jamais comprimé par le flex */
    align-self: center;
}


/* ------------------------------------------------------------
   3. LIENS DU MENU SUR UNE SEULE LIGNE
   `nowrap` interdit la coupure du libellé ; `flex: 0 0 auto`
   interdit au flex de comprimer un lien sous la largeur de son
   texte (c'est cette compression qui provoquait le retour à la
   ligne, pas le `white-space`).
   ------------------------------------------------------------ */
.header .nav-desktop .nav-link {
    white-space: nowrap;
    flex: 0 0 auto;
}


/* ------------------------------------------------------------
   4. FAIRE TENIR LES 9 LIENS + LE CTA DANS LES 1152 px UTILES
   `nowrap` seul ne suffit pas : sans place, le menu déborderait
   et serait rogné par `overflow: hidden`. On récupère les 113 px
   manquants + les 48 px d'écart sur les gouttières et la taille
   de texte — jamais sur la lisibilité.
     • gouttières 32 → 16 px ........... 128 px récupérés
     • liens 15 → 14 px ................  53 px récupérés
     • logo 80 → 56 px .................  24 px récupérés
     • margin-left du CTA 28 → 0 .......  28 px récupérés
       (le `gap: 48px` du point 1 prend le relais)
   Occupation finale mesurée : 1138,5 px sur 1152 → 13,5 px de marge.
   ------------------------------------------------------------ */
.header .nav-desktop {
    gap: 16px;
    flex: 0 1 auto;
    min-width: 0;
}

.header .nav-desktop .nav-link {
    font-size: 0.875rem;      /* 15 px → 14 px */
}

.header .btn.btn-primary {
    margin-left: 0;
    flex: 0 0 auto;
    white-space: nowrap;
}


/* ------------------------------------------------------------
   5. MOBILE : comportement actuel conservé à l'identique
   Sous 768 px, mobile-fixes.css masque `.nav-desktop` et le CTA
   au profit du burger — les règles 1, 3 et 4 deviennent donc
   inertes. On annule ici les deux seules règles qui déborderaient
   sur le mobile (le gap et la largeur du logo) pour restituer
   exactement les valeurs d'origine.
   Vérifié à 390 px : nav-desktop `none`, logo 60 × 74,9 px,
   bandeau 107,9 px, aucun débordement.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .header .header-content {
        gap: 0;
    }
    .header .header-logo-animation {
        width: 60px;          /* valeur d'origine de style.css */
    }
}


/* ------------------------------------------------------------
   OPTION (désactivée) — si tu préfères garder les liens à 15 px
   Élargir le bandeau à 1280 px libère 80 px : on peut alors
   remonter la taille de texte et les gouttières. Contrepartie :
   le header ne s'aligne plus sur la grille 1200 px du reste de
   la page. Décommenter les 3 règles ci-dessous pour l'essayer.
   ------------------------------------------------------------ */
/*
.header .container      { max-width: 1280px; }
.header .nav-desktop    { gap: 22px; }
.header .nav-desktop .nav-link { font-size: 0.9375rem; }
*/