/* ========================================================== HEADER ========================================================== */ .header{ position:fixed; top:0; left:0; width:100%; z-index:var(--z-header); background:transparent; border-bottom:none; box-shadow:none; /* Voile local, indépendant de celui du hero (.hero-overlay dans hero.css/celui de .uni-hero) : le header est un élément fixed dans sa propre pile d'empilement, au-dessus de tout — sans son propre fond, sa lisibilité dépend entièrement de ce qui se trouve DESSOUS au pixel près (bas d'une photo, zone claire...), imprévisible. Ce dégradé garantit un minimum de contraste au texte clair (.header-link, logo) quel que soit le contenu en dessous. Exclu une fois .is-scrolled (fond blanc opaque déjà géré plus bas). */ transform:translateY(0); opacity:1; will-change:transform, opacity; transition: background .35s var(--ease-premium), box-shadow .35s var(--ease-premium), transform .45s var(--ease-premium), opacity .4s var(--ease-premium); } /* Séparateur au scroll porté par le seul box-shadow (plus de border-bottom) : un bord de 1px sur un élément fixed en transform (voir will-change ci-dessus) pouvait, selon le sous-pixel où retombait sa hauteur (82.63px mesuré, jamais un entier), se rasteriser en fine ligne visible même hors de l'état scrollé — signalé sur index.html, scholarships.html et universities.html à la fois, donc porté par une règle commune plutôt que par un état particulier. --shadow-sm donne la même séparation visuelle sans dépendre d'un bord à l'échelle du pixel. */ .header.is-scrolled{ background:rgba(255,255,255,.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:var(--shadow-sm); } /* 62% plat sur les 3/4 supérieurs (où le texte est réellement centré verticalement) puis dégradé vers la photo sur le dernier quart, plutôt qu'un fade linéaire sur toute la hauteur : calculé pour garantir 4,5:1 même dans le pire cas (photo blanc pur juste en dessous) — un fade continu retombait sous l'AA au niveau du texte, voir le calcul en commit. Le plateau à 75% et sa valeur .62 sont inchangés (c'est le calcul qui garantit l'AA, on n'y touche pas) ; un arrêt intermédiaire est ajouté dans le dernier quart pour adoucir sa sortie : un dégradé qui passe brutalement de "plat" à "en chute" à un seul point peut créer une bande de Mach à cet endroit précis — une ligne perçue par l'œil sans qu'aucun pixel n'y soit réellement plus sombre que ses voisins. Casser la chute en 2 étapes au lieu d'1 seule atténue cet effet. */ .header:not(.is-scrolled){ background:linear-gradient(to bottom, rgba(9,12,28,.62) 0%, rgba(9,12,28,.62) 75%, rgba(9,12,28,.35) 88%, rgba(9,12,28,.15) 100%); } /* Texte clair par défaut (hero photo dessous, .header:not(.is-scrolled) ci-dessus) — Bourses/Universités/Connexion utilisaient var(--text-light), une nuance pensée pour le fond blanc du header une fois scrollé, donc illisible sur la photo avant ça. Miroir de .logo .scholar (déjà blanc par défaut) juste au-dessus. */ .header:not(.is-scrolled) .header-link{color:rgba(255,255,255,.94);} /* Pilule fantôme plutôt que le soulignement d'origine (rendu "lien de texte" daté) : fond blanc translucide à faible opacité, dans le même esprit que la pilule du bouton "Découvrir" juste à côté mais nettement plus discret. Le texte reste blanc, contraste inchangé — le fond ajouté est trop clair pour le faire varier de façon significative. */ .header:not(.is-scrolled) .header-link:hover{color:#fff;background:rgba(255,255,255,.14);} .header.is-scrolled .header-link{color:var(--text-light);} /* Même traitement pilule sur fond clair (header scrollé) : teinte sombre à faible opacité au lieu du fond blanc (invisible sur blanc). */ /* Encre + voile chaud (2026-08-28) : virait au bleu --primary-color sur un voile slate froid rgba(15,23,42,.06), deux valeurs de la palette abandonnée. Même correction que le survol par défaut, ligne ~330. */ .header.is-scrolled .header-link:hover{color:var(--text-color);background:var(--background-alt);} /* .header-on-light (fond clair uni dès le premier pixel, sans hero photo) a existé un temps pour scholarships.html, avant que cette page reçoive elle aussi une bannière photo (audit du 2026-08-13, voir .bourses-hero dans scholarships.css) — la classe était restée posée sur le
après coup, ce qui rendait le header illisible sur sa propre photo (texte marine pensé pour un fond clair, plaqué sur un fond sombre). Retirée de scholarships.html, et ces 2 règles avec elle : plus aucune page du site n'a de header sans hero photo dessous. */ /* Immersion catalogue : dès que le visiteur commence à descendre, le header s'efface (translation verticale + opacité) pour laisser toute la place au contenu, et ne revient qu'au retour complet en haut de page — voir js/header-scroll.js. pointer-events:none pendant l'état masqué pour qu'un header invisible ne bloque jamais un clic sur le contenu qui remonte sous lui. */ .header.is-hidden{ transform:translateY(-110%); opacity:0; pointer-events:none; } @media (prefers-reduced-motion: reduce){ .header{ transition:background .35s ease, box-shadow .35s ease, border-color .35s ease; } .header.is-hidden{ transform:none; opacity:1; } } .header-container{ display:flex; align-items:center; justify-content:space-between; height:82px; gap:32px; } /* ========================================================== LOGO ========================================================== */ /* Le conteneur .logo a ete remplace par .fitz-lockup (css/base.css), qui porte lui-meme son display/align/gap. Ne restent ici que les reglages propres a l'EN-TETE : rien qui touche a la typographie ou a la couleur de la marque. */ /* Le lockup vit desormais dans css/base.css (.fitz-lockup) : un seul composant, un seul balisage, les memes polices partout. Les regles supprimees ici fixaient une largeur de 48px qui entrait en conflit avec --lockup-size, et un survol qui faisait BASCULER le logo (rotate(-4deg) scale(1.05)) — un logo d'entreprise ne bascule pas. */ .fitz-lockup:hover{ opacity:.85; } /* Symbole "la pièce qui s'emboîte" (2026-08-29, refonte de marque ScholarBridge → Fitz) — deux arcs du MÊME cercle, découpés au stroke-dasharray sur un chacun : le grand arc (.mark-structure) est l'étudiant, le petit arc ambre (.mark-accent) est l'opportunité qui vient compléter le tour. « Fitz » contient *fit* : ce qui vous va. Les couleurs ne vivent plus ici : le balisage canonique .fitz-mark et ses deux tokens (--logo-structure à deux états, --logo-accent INVARIANT #E9A319) sont définis une seule fois dans css/base.css — voir « Le symbole — une seule identité » dans DESIGN_SYSTEM.md. L'arc ambre ne bascule plus sur --amber-700 au scroll : l'accent du logo ne change jamais, sur aucun fond. */ /* ========================================================== ACTIONS ========================================================== */ .header-actions{ display:flex; align-items:center; /* Réduit de 16px : les liens (.header-link) ont désormais leur propre padding horizontal pour la pilule au survol, un gap identique aurait doublé l'espacement visuel et écarté le CTA "Découvrir" du reste. */ gap:4px; } /* Home (index.html) uniquement : Bourses/Universités/Découvrir/Connexion formaient 2 blocs disjoints (.header-nav / .header-cta-group) répartis par justify-content:space-between sur .header-container — l'écart entre les deux variait avec la largeur d'écran. .header-links les réunit en un seul groupe à droite (justify-content:space-between ne s'applique plus qu'entre logo et .header-links). Les autres pages gardent .header-actions (2 éléments max), inchangé ci-dessus. */ .header-links{ display:flex; align-items:center; gap:36px; } .header-nav{ display:flex; align-items:center; gap:32px; } .header-cta-group{ display:flex; align-items:center; gap:20px; } .header-link{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--radius-full); font-size:var(--fs-small,.92rem); font-weight:600; color:var(--text-light); text-decoration:none; transition:background-color 150ms ease, color 150ms ease; } /* Repli générique — toujours surchargé en pratique par .header:not(.is-scrolled)/.header.is-scrolled ci-dessus, qui couvrent les 2 seuls états possibles d'un header depuis le retrait de .header-on-light (voir plus haut). Laissé en place au cas où un futur contexte de header échappe aux deux. */ /* Même correction encre + chaud que la version .is-scrolled plus haut. C'est ce survol-ci que reçoit « Connexion » sur grand écran, où il reste un lien texte ordinaire — la pastille de .header-links l'exclut explicitement (voir plus bas). */ .header-link:hover{color:var(--text-color);background:var(--background-alt);} /* Nav texte minimaliste (retour arrière sur le traitement "3 pilules à contour + 1 CTA plein" du commit précédent, jugé encore trop chargé) : Bourses/Universités/Connexion perdent leur contour et deviennent de simples liens texte, distingués au survol par un soulignement animé plutôt qu'un fond/contour de bouton — seul "Découvrir" (.btn, plein) reste un vrai bouton, hiérarchie à 2 niveaux nette (texte / action principale). Scopé à .header-links (index.html) : les autres pages gardent le hover-pilule générique de .header-link plus haut, inchangé. */ .header-link-login{padding:8px 4px;} /* "Connexion" est désormais un simple lien texte au même registre que Bourses/Universités (voir .header-links .header-link plus haut) — une icône à côté du texte y faisait doublon, les 2 autres liens n'en ont pas. Masquée ici, réaffichée uniquement dans le média-query mobile plus bas où elle devient le SEUL contenu du lien (texte cliqué, voir cette règle). */ .header-link-login i, .header-link-login svg{display:none;} /* Trait de survol retiré le 2026-08-28 (demande utilisateur). Un filet de 2px qui se déploie sous « Bourses » et « Universités » est le vocabulaire d'un lien de contenu, pas d'un élément de navigation : il soulignait des libellés qui sont déjà, par leur place dans l'en-tête, identifiés comme cliquables. Remplacé par une pastille — la surface s'allume au survol et le libellé passe à l'encre pleine. C'est le même vocabulaire que le reste du site (.btn-ghost s'éclaire de la même façon, sur le même token) et ça donne au doigt comme au curseur une CIBLE, là où un trait de 2px de haut n'offrait qu'une confirmation après coup. Rembourrage horizontal passé de 2px à 12px : sans lui, la pastille épouserait le texte au pixel près et se lirait comme un surlignage. :not(.header-link-login) est indispensable, pas défensif. Sous 640px, « Connexion » devient une pastille RONDE de 36px à rembourrage nul (voir le média-query plus bas) — or ces règles-ci pèsent (0,2,0) contre (0,1,0) là-bas, et un média-query n'ajoute aucune spécificité : sans l'exclusion, le border-radius et le rembourrage écrits ici gagneraient et rendraient le cercle rectangulaire sur mobile. */ .header-links .header-link:not(.header-link-login){ position:relative; padding:8px 12px; border-radius:var(--radius-sm); transition:background-color .2s var(--ease-standard), color .2s var(--ease-standard); } /* AUCUNE règle de survol ici, volontairement. Le fond de survol existe déjà et il DÉPEND du contexte, ce qui se perd de vue facilement : .header:not(.is-scrolled) pose une pastille blanche translucide, lisible sur la photo du hero ; .header.is-scrolled pose --background-alt sur l'en-tête devenu opaque (les deux en haut du fichier). Une pastille écrite ici pèserait le même poids qu'elles (0,4,0) tout en arrivant plus bas — elle les aurait donc écrasées toutes les deux, et collé un pavé clair opaque par-dessus la photo du hero. Le rembourrage et le rayon ci-dessus suffisent : ils donnent sa FORME à un fond que le contexte colore déjà. */ /* Sur écran tactile, :hover reste collé après l'appui (même note que sur .btn, css/base.css) : la pastille resterait allumée sous un lien déjà quitté. On neutralise les deux fonds contextuels, pas un fond maison — voir juste au-dessus. */ @media (hover:none){ .header:not(.is-scrolled) .header-link:hover, .header.is-scrolled .header-link:hover{ background:transparent; } } @media(max-width:640px){ .header-link{display:none;} /* "Connexion" (index.html) reste visible sur mobile contrairement aux autres liens secondaires du header (Bourses/Universités) : c'est le seul chemin vers login.html sur la home, il ne doit jamais disparaître. Logo + CTA remplissent déjà toute la largeur disponible sur un mobile étroit (bugs réels constatés en testant : le lien débordait hors viewport en texte complet ; passer à la ligne le faisait déborder du header, fixe en hauteur, et le faisait recouvrir par le contenu en dessous) — icône seule ("log-in"), sans le texte, pour tenir sur la même ligne que le CTA sans agrandir le header. */ /* Même traitement visuel que le CTA (pastille claire + ombre) plutôt que color:var(--text-light) du .header-link générique : ce dernier est prévu pour un fond blanc une fois le header défilé (.is-scrolled), pas pour flotter directement sur la photo du hero — trop peu de contraste pour rester repérable, contrairement au bouton "Découvrir" à côté. */ .header-link-login{display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border-radius:var(--radius-full); background:#fff; color:var(--primary-color); box-shadow:var(--shadow-xs);} /* « Connexion » ne fait PAS exception (2026-09-08). La pastille ronde décrite plus bas a été retirée : elle posait un disque blanc opaque de 36 px sur la photo, le seul aplat clair de tout le hero, et le seul élément d'interface à ne pas se fondre dans l'image. L'accès n'est pas perdu : js/mobile-nav.js pose login.html dans la feuille plein écran (mnav-link, vérifié dans le fichier). Le raisonnement d'origine — « c'est le seul chemin vers login.html sur la home » — datait d'avant cette feuille. Les règles de la pastille sont laissées en place, inertes, plutôt que supprimées : elles portent le compte rendu d'un vrai bug de cascade (icône blanche sur fond blanc, 2026-08-28) qu'il ne faudrait pas réapprendre si la pastille revenait un jour. */ .header-link-login{display:none;} /* Bug réel trouvé le 2026-08-28 en testant sur un vrai viewport mobile (390px) : l'icône de ce cercle était invisible — blanche sur fond blanc. Cause : .header:not(.is-scrolled) .header-link et .header.is-scrolled .header-link (plus haut, hors média-query) pèsent chacune (0,3,0) et gagnaient systématiquement sur le color:var(--primary-color) ci-dessus, qui ne pèse que (0,1,0) — un média-query n'ajoute aucune spécificité, seule la sélectivité du sélecteur compte. Le commentaire au-dessus ("Même traitement visuel que le CTA... pour rester repérable") montre que cette couleur sombre était déjà l'intention ; elle perdait silencieusement la cascade, sans erreur visible, une icône vide ne prévenant de rien (même famille de piège que les noms d'icônes Lucide erronés, voir results.html). Corrigé en ré-affirmant la même couleur ici, avec la même spécificité (0,3,0) que les règles qu'elle doit battre, mais scopée à ce média-query mobile pour ne rien changer au lien texte "Connexion" du grand écran (voir commentaire plus haut, "réaffichée uniquement dans le média-query mobile"). */ .header:not(.is-scrolled) .header-link-login, .header.is-scrolled .header-link-login{color:var(--primary-color);} .header-link-login span{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .header-link-login i, .header-link-login svg{display:block; width:18px; height:18px;} } .header .btn{ padding:14px 24px; font-size:.95rem; border-radius:var(--radius-full); box-shadow:var(--shadow-xs); white-space:nowrap; flex-shrink:0; } .fitz-lockup{ flex-shrink:0; } .header .btn:hover{ box-shadow:var(--shadow-md); } .header .btn i, .header .btn svg{ width:18px; height:18px; } .header .btn-text-short{ display:none; } /* ========================================================== RESPONSIVE ========================================================== */ @media(max-width:992px){ .header-container{ height:76px; gap:12px; } /* Le lockup se redimensionne par son SEUL token : la taille du symbole et celle du texte en decoulent (calc dans css/base.css). Avant, il fallait piloter les deux separement — et la largeur fixee ici entrait en conflit avec --lockup-size. */ .header .fitz-lockup{ /* 32 et non 42 : la base est passée de 48 à 36 le 2026-09-01, le palier descend d'autant. Sélecteur .header .fitz-lockup : à un seul niveau, cette règle perdait contre la taille de contexte de css/base.css — et à l'époque des styles inline, elle ne s'appliquait tout simplement jamais. */ --lockup-size:32px; } .header .btn{ padding:12px 16px; font-size:.88rem; } } @media(max-width:520px){ .header-container{ gap:4px; } /* Sous 520px, logo + CTA + pastille Connexion dépassaient de la largeur du header (mesuré : ~14px de débordement à 375px, la pastille Connexion touchait quasiment le bord de l'écran) — resserré ici plutôt que de toucher le logo. */ .header-actions{ gap:4px; } .header .btn{ padding:10px 12px; font-size:.88rem; } .header .btn-text-full{ display:none; } .header .btn-text-short{ display:inline; } .header-link-login{ width:32px; height:32px; } .header-link-login i{ width:16px; height:16px; } } /* Sous 355px, seul le symbole reste : le nom serait illisible et pousserait la navigation hors de l'ecran. */ @media(max-width:355px){ .fitz-lockup-text{ display:none; } } /* ========================================================== DÉBORDEMENT DU HEADER SUR TÉLÉPHONE (corrigé le 2026-08-23) ========================================================== Mesuré avant correction, sur index.html : le bloc logo + liens réclamait 382px alors qu'un écran de 360px n'en offre que 331 à l'intérieur du conteneur. Le bouton « Découvrir » sortait donc du cadre et se retrouvait coupé net par le bord droit — sur 360, 390, 393 et 412px, c'est-à-dire sur la quasi-totalité des téléphones réellement utilisés. Seul un écran de moins de 356px y échappait, parce que la règle @media(max-width:355px) plus haut y masque le nom de la marque. Trois causes, dans l'ordre de ce qu'elles coûtaient : 1. UN ESPACE FANTÔME DE 36px. À 640px et moins, .header-link passe en display:none — mais .header-nav, son conteneur, reste un élément flex de largeur nulle. Le `gap:36px` de .header-links s'applique donc toujours entre ce vide et le groupe de boutons. Mesure : .header-links faisait 208px pour un contenu de 172px. 2. Des écarts pensés pour le bureau (36px et 20px) conservés tels quels sur un écran quatre fois plus étroit. 3. Un logo à sa taille pleine alors qu'il n'a plus à cohabiter avec la navigation. Corrigé au même point de rupture que le masquage des liens (640px) : c'est le même changement de mise en page, il n'a pas de raison d'être scindé en deux seuils. */ @media(max-width:640px){ /* Cause n°1 : sans cela, l'espace fantôme subsiste même vide. */ .header-nav{ display:none; } .header-links{ gap:10px; } .header-cta-group{ gap:8px; } .header .fitz-lockup{ --lockup-size:28px; } /* Dernier recours : si un futur libellé rallonge encore le CTA, le nom de la marque se laisse rogner plutôt que de repousser le bouton hors de l'écran. min-width:0 est indispensable — un élément flex refuse par défaut de descendre sous la largeur de son contenu. */ .fitz-lockup{ min-width:0; } .fitz-lockup-text{ overflow:hidden; } .header-links{ flex-shrink:0; } } /* ========================================================== MENU MOBILE ========================================================== Le bouton rond + panneau déroulant du 2026-09-01 (.header-menu-btn / .header-menu-panel) ont été remplacés le 2026-09-03 par la navigation mobile commune à tout le site : css/mobile-nav.css + js/mobile-nav.js (bouton animé injecté dans .header-cta-group / .header-actions, feuille plein écran). Plus aucune règle ici. */