/* ═══════════════════════════════════════════════════════════════ NAV - maquette validée (Figma nœud 10:1042), toutes pages Relevé Figma, canevas 1440 : barre 0 → 109.4, fond --page, filet bas 1px --ink-fort logo x=72 (gouttière) y=26 236 × 56.4 liens x=550 → 1015 y=44.7 h=19, gap 22 langue x=1069 → 1131.3 bouton x=1185.3 → 1357.3 172 × 37 (y=35.7) D'où les deux gouttières de 54px du groupe droit : 1069 − 1015 = 54 et 1185.3 − 1131.3 = 54. Le bord droit du bouton (1357.3) tombe bien sur 1440 − 72 − 10.7 : les 10.7px manquants sont la marge optique du texte dans le Figma, on aligne le bouton sur la gouttière stricte (1368). Cette feuille REMPLACE l'habillage du parent (style.css l. 214-520 et 1696-1800) sans en changer les classes : hero.js du parent pilote .header, .nav, .nav__group, .nav__link--parent, .burger et .mega. Renommer l'une d'elles casserait le JS en silence. ═══════════════════════════════════════════════════════════════ */ /* ─── Barre ─────────────────────────────────────────────────── Le parent faisait de .header lui-même le flex container, avec un padding calculé au max() pour recentrer le contenu au-delà de 1440px. Ici la barre porte le fond sur toute la largeur et le centrage est délégué à .vf-shell, comme dans toutes les sections de la maquette : deux mécanismes de centrage cohabiteraient sinon et le logo se décalerait de quelques pixels par rapport au hero situé dessous. */ body.vf .header{ position:relative; z-index:60; display:block; padding:0; gap:0; background:var(--page); /* Filet bas sur TOUTE la largeur, pas seulement sous le contenu : c'est lui qui pose la barre dans la maquette. En box-shadow plutôt qu'en border-bottom pour qu'il ne s'ajoute pas aux 109.4px. */ box-shadow:inset 0 -1px 0 var(--ink-fort); } /* 109.4px de haut au pixel près : la hauteur vient du logo (56.4) plus 2 × 26.5 de marge. On la fixe pour que la barre ne bouge pas si le logo tarde à charger. */ .vf-nav__shell{ display:flex; align-items:center; justify-content:space-between; gap:32px; min-height:109.4px; } /* ─── Logo ─────────────────────────────────────────────────── 236 × 56.4 dans le Figma, soit exactement le rapport du SVG français (996 × 238 = 4.184). height:auto est obligatoire : les attributs width/height du HTML (posés par vanessa_logo() contre le décalage de mise en page) imposeraient sinon 238px de hauteur de barre. AUCUNE inversion ici, contrairement au parent : le SVG est noir et le fond est clair. */ .vf-nav__lien-logo{ display:block; flex:0 0 auto; line-height:0; } /* PIÈGE : le parent cible `.header__logo img` (spécificité 0,2,1) et y pose width:250px ET filter:invert(1) brightness(1.15). Une classe seule (0,1,0) perdait : le logo restait blanc sur fond clair, donc invisible. On garde le sélecteur descendant du parent pour le battre à égalité de spécificité tout en venant après dans la cascade. */ body.vf .header__logo .vf-nav__logo{ display:block; width:236px; height:auto; filter:none; } /* ─── Groupe droit ─────────────────────────────────────────── Trois blocs espacés de 54px : liens, langue, bouton. */ body.vf .nav{ display:flex; align-items:center; gap:54px; } /* Les cinq entrées, gap 22. C'est un bloc à part (et non les liens en enfants directs de .nav) parce que leur gouttière est de 22 et non de 54 : sans conteneur intermédiaire, un seul gap devrait servir les deux. */ .vf-nav__liens{ display:flex; align-items:center; gap:22px; } /* ─── Liens ────────────────────────────────────────────────── Schibsted 400 11.5px, ls 2.53px (le Figma est en PIXELS, pas en em : 0.22em donnerait 2.53 à 11.5px par hasard mais dériverait au moindre changement de corps). Hauteur de boîte 19px = 15px de texte + 4px sous la ligne de base, sur lesquels se pose le soulignement doré. */ body.vf .nav__link{ display:inline-flex; align-items:center; height:19px; padding:0; font-family:var(--font-ui); font-weight:400; font-size:var(--fs-surtitre); line-height:1; letter-spacing:var(--ls-surtitre); text-transform:uppercase; text-decoration:none; color:var(--ink-fort); /* PIÈGE : sans nowrap, « À propos » se coupait en deux lignes dès 1024px (la barre se resserre avant le passage au burger), ce qui désalignait toute la rangée et faisait grandir le header. */ white-space:nowrap; /* Le parent posait une text-shadow pour se détacher de la photo : sur fond clair elle salit le texte, on la supprime. */ text-shadow:none; border-bottom:1px solid transparent; transition:opacity .25s var(--ease), border-color .25s var(--ease); } /* Page courante : graisse 500 + filet doré. Le Figma pose le trait sur « Accueil » uniquement (nœud 10:1047, STROKE #b9a46a). */ body.vf .nav__link.is-current{ font-weight:500; border-bottom-color:var(--or); } body.vf .nav__link:hover, body.vf .nav__link:focus-visible{ opacity:.7; border-bottom-color:var(--or); } /* Le sous-menu vit dans un .nav__group (ancre du panneau absolu et cible de l'accordéon mobile). PIÈGE : ce conteneur intercalé est un bloc, sa hauteur suit le lien mais le lien s'y aligne en haut, d'où « Thérapies » 1.5px plus bas que les quatre autres entrées. Le passer en flex centré remet les cinq libellés sur la même ligne de base. */ body.vf .nav__group{ position:relative; display:flex; align-items:center; height:19px; } /* Chevron du sous-menu : le parent le dessinait en doré et 6px, la maquette veut un repère discret. 8px, --muted. PIÈGE MESURÉ (correctif 3) : dans l'arbre Figma le nœud « a Thérapies » (#10:1051) ne contient QUE son TEXT (#10:1052) et vaut 85.2px de large ; aucun vecteur de chevron n'y figure. Tant que le chevron restait dans le flux du lien (gap 9 + 8px de glyphe), le lien mesurait 102.2px et poussait toute la barre : Accueil/À propos/Thérapies partaient 6.5px trop à gauche, Articles/Contact 10.5px trop à droite, et le bloc de liens faisait 482 au lieu de 465 (bord droit 1025.5 au lieu de 1015). La spec §1 demande malgré tout « Chevron discret 8px en --muted » : on le garde, mais SORTI DU FLUX (position:absolute à left:100%), donc invisible pour le calcul de largeur. Le lien retombe à 85.2px et les cinq libellés retrouvent leurs abscisses Figma exactes ; le chevron se pose dans la gouttière de 22px qui sépare « Thérapies » d'« Articles » (cf. le margin-left ci-dessous), et il est masqué sous 1180 où cette gouttière se resserre trop pour l'accueillir. */ body.vf .nav__link--parent{ display:inline-flex; align-items:center; /* Le chevron est DANS le flux du lien (retour d'Emmanuel du 09/09) : la gouttière de 22px entre les entrées se mesure ainsi APRÈS lui, et l'espace est le même entre tous les éléments du menu. Sorti du flux, il tombait dans la gouttière et serrait « Articles ». Le lien est donc plus large que le nœud Figma (qui n'a pas de chevron) : assumé, l'égalité des espacements prime. */ gap:8px; } body.vf .nav__chevron{ width:8px; height:8px; border-right:1px solid var(--muted); border-bottom:1px solid var(--muted); border-top:0; border-left:0; /* Les transformations s'appliquent de droite à gauche : translateY AVANT rotate (dans l'écriture) déplacerait le V en diagonale, dans le repère déjà tourné. On écrit donc translateY PUIS rotate pour remonter tout droit : la pointe du V est en bas, on le remonte de 1.5px pour centrer son milieu visuel sur celui des capitales (retour d'Emmanuel du 09/09, mesuré). */ transform:translateY(-1.5px) rotate(45deg); transition:transform .3s var(--ease); flex:0 0 auto; /* Le carré tourné à 45° déborde de sa boîte de 8px d'environ 1.6px de chaque côté : sans cette marge, l'écart VISIBLE avant « Articles » tombait à 18.9px au lieu des 22 mesurés ailleurs. */ margin-right:3px; } /* :focus-within à côté de :hover - cf. le PIÈGE CLAVIER commenté sur l'ouverture du panneau plus bas. Le chevron doit se retourner dans les mêmes conditions que le panneau, sinon il pointerait encore vers le bas alors que le sous-menu est déplié par la tabulation. */ body.vf .nav__group:hover .nav__chevron, body.vf .nav__group:focus-within .nav__chevron, body.vf .nav__group.is-open .nav__chevron{transform:translateY(1.5px) rotate(-135deg)} /* ─── Langue « FR | EN » ───────────────────────────────────── Gap 8 (Figma : 1096.1 − 1088.1 = 8 puis 1111.1 − 1103.1 = 8). La langue courante est soulignée d'or comme le lien courant, l'autre est en --muted (#5b6066, relevé sur le nœud 10:1061), le séparateur en --gris-clair (#9aa0a6, nœud 10:1060). */ body.vf .nav__langs{ display:inline-flex; align-items:center; gap:8px; padding:0; font-family:var(--font-ui); font-size:var(--fs-surtitre); line-height:1; letter-spacing:var(--ls-surtitre); text-transform:uppercase; } body.vf .nav__lang{ display:inline-flex; align-items:center; height:19px; font-weight:400; color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; opacity:1; transition:color .25s var(--ease), border-color .25s var(--ease); } body.vf a.nav__lang:hover, body.vf a.nav__lang:focus-visible{ color:var(--ink-fort); border-bottom-color:var(--or); } body.vf .nav__lang.is-current{ font-weight:500; color:var(--ink-fort); border-bottom-color:var(--or); } body.vf .nav__langs-sep{ color:var(--gris-clair); font-weight:400; /* Le « | » de Schibsted dépasse de sa boîte de 1px vers le bas : compensé ici pour qu'il s'aligne sur le milieu des deux libellés. */ line-height:1; transform:translateY(-1px); } /* ─── Bouton « Rendez-vous » ───────────────────────────────── 172 × 37 (les tokens posent 49px de haut pour le hero : on surcharge localement). Icône à 20px du bord gauche, texte à 25px de l'icône (1230.3 − 1205.3), donc padding 0 20px et gap 10px puisque l'icône fait 15px de large. */ /* PIÈGE : base.css pose `body.vf a{color:inherit}` (spécificité 0,1,1), qui bat le `color:var(--page)` de .btn-plein (0,1,0) : le libellé du bouton héritait de --texte et disparaissait sur l'encre. On reprend la couleur ici, sur un sélecteur au moins aussi fort. Même chose pour .btn-contour sur les autres sections, hors périmètre de cette feuille. */ body.vf a.vf-nav__cta{ flex:0 0 auto; /* 172 x 37 dans le Figma (nœud 10:1062). PIÈGE MESURÉ : .btn-plein de tokens.css pose un border de 1px, qui ajoutait 2px à la largeur intrinsèque (contenu + 2 x 20 de padding) : le bouton mesurait 174 pour une boîte de contenu de 132. Le nœud Figma 10:1062 est un FRAME en aplat, SANS contour : on retire donc la bordure plutôt que de figer une largeur. Le noir vient de --grad-bouton (fond), la bordure ne servait qu'à doubler cet aplat. Mesure après correctif : 171.97 x 37, sans width imposée, donc le bouton reste compressible aux paliers étroits. tokens.css étant hors du périmètre éditable, la neutralisation se fait ici, sur un sélecteur (0,3,1) qui bat largement le (0,1,0) de .btn-plein. */ border:0; box-sizing:border-box; height:37px; padding:0 20px; gap:10px; color:var(--page); justify-content:center; } .vf-nav__cta .btn-plein__icone{ width:15px; height:15px; } /* ─── Header rappelé au défilement ─────────────────────────── hero.js pose .is-pinned quand on remonte et .is-hidden quand on redescend (deux @keyframes du parent, conservées). Le parent le passait en noir à 86 % : sur une page claire ce serait une barre étrangère. Ici : fond de page à 96 %, flou léger, même filet bas. */ body.vf .header.is-pinned{ position:fixed; top:0; left:0; right:0; background:rgba(245,244,241,.96); box-shadow:inset 0 -1px 0 var(--ink-fort), 0 14px 30px -26px rgba(14,15,17,.55); backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1); } /* ─── Sous-menu Thérapies (.mega) ──────────────────────────── Le parent avait un panneau noir bordé d'or. Restylé en panneau clair : fond blanc, filet argent, ombre douce des tokens. Les noms de classes du parent sont conservés (hero.js bascule .is-open sur .nav__group). */ body.vf .mega{ position:absolute; top:100%; left:-24px; right:auto; z-index:40; width:420px; /* Le padding-top garde le survol continu entre le lien et le panneau ; le fond est porté par ::before, en retrait de cette zone morte. */ padding-top:18px; display:grid; grid-template-columns:1fr; text-transform:none; letter-spacing:normal; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; } body.vf .mega::before{ content:''; position:absolute; top:18px; left:0; right:0; bottom:0; background:var(--blanc); border:1px solid var(--argent); border-top:1px solid var(--argent); box-shadow:var(--ombre); } /* PIÈGE CLAVIER (bloquant, relevé par le vérificateur) : ces deux sélecteurs étaient les SEULS à rouvrir le panneau. Or .is-open n'est posé par hero.js du parent que dans sa branche matchMedia('(max-width:900px)') : au-dessus de 900px il ne reste que le survol. Le panneau restait donc en visibility:hidden en navigation au clavier, et ses cinq liens (quatre thérapies + « Voir toutes les thérapies ») n'étaient jamais atteignables à la tabulation - violation WCAG 2.1.1 et 2.4.3. hero.js étant interdit d'édition, la parade est entièrement CSS : :focus-within ouvre le panneau dès que le focus entre dans le groupe (lien parent compris) et le referme dès qu'il en sort. Aucun script requis, et la visibility:visible rend les liens focusables AVANT que le focus ne les atteigne (le navigateur applique le style au moment où il évalue le candidat suivant). */ body.vf .nav__group:hover .mega, body.vf .nav__group:focus-within .mega, body.vf .nav__group.is-open .mega{ opacity:1; visibility:visible; transform:translateY(0); } body.vf .mega__main{ position:relative; display:flex; flex-direction:column; padding:26px 28px 22px; } body.vf .mega__label{ margin:0 0 18px; font-family:var(--font-ui); font-weight:500; font-size:var(--fs-etiquette); letter-spacing:var(--ls-etiquette); text-transform:uppercase; color:var(--muted); } /* Le panneau est desormais une vraie liste (ul/li), et non plus une suite de nus : role="menu"/"menuitem" a ete retire du gabarit (contrat clavier ARIA non honore, cf. parts/nav.php). Reset complet de la puce et du retrait par defaut du navigateur - sans lui, les items partiraient 40px a droite avec un point noir devant. */ body.vf .mega__liste{ margin:0; padding:0; list-style:none; } body.vf .mega__item{ display:grid; /* Une seule colonne depuis le 09/09 : la colonne de 26px du numéro a disparu avec lui, titre et accroche partent du bord gauche. */ grid-template-columns:1fr; gap:0; padding:13px 0; border-top:1px solid var(--filet-doux); text-decoration:none; transition:background .25s var(--ease); } /* PIÈGE de sélecteur introduit par le passage en