/* ========================================================================= MUSLIMA WORK — L'EN-TÊTE, LE MÊME SUR TOUT LE SITE C'est l'en-tête de la fiche d'annonce, posé partout : blanc, un filet en bas, rien d'autre. Il ne flotte pas au-dessus de la page, il en est la première ligne. Le monogramme et le nom à gauche, sans capsule ; la navigation ; les deux actions à droite. Une seule différence avec la fiche, demandée : « Trouver un emploi » reprend le dégradé de l'accueil — bordeaux vers framboise, de gauche à droite — au lieu de l'aplat bordeaux. Cette feuille est chargée en dernier, après style.css, refonte.css et public-v2.css. Chacune des trois avait redessiné la barre à sa manière et elle ne se ressemblait plus d'une page à l'autre. Les règles sont écrites à une spécificité suffisante pour l'emporter sur les trois, sans un seul !important. Les angles suivent le système éditorial du site : les blocs à 4px, les boutons et les champs à 6px, et rien qui ressemble à une capsule. La barre compacte des fiches sur petit écran (« .ofbar », avec retour et partage) n'est pas concernée : ce n'est pas cet en-tête, c'est un fil d'Ariane, et elle a ses propres boutons. ========================================================================= */ /* --- La barre, et la plaque de verre qu'elle porte ------------------------ La barre elle-même n'a plus de fond : elle est transparente d'un bord à l'autre de la fenêtre, et ce qu'on voit est la plaque de verre posée au milieu — un blanc translucide, cerné d'un filet lumineux, avec un reflet sur son bord haut et une ombre très claire. Le rose n'y est qu'un reflet : le dégradé part du blanc presque plein et ne se teinte qu'en fin de course, d'un rose pâle. C'est le blanc qui domine — une plaque franchement rosée s'imposait devant la page qu'elle surplombe. Elle est en `sticky` : posée sur la photographie du hero au repos, elle s'y colle dès qu'on descend. C'est le navigateur qui s'en charge, sans script et sans que la mise en page bouge d'un pixel — un passage de `absolute` à `fixed` déplacerait la page au moment du basculement. Le hero, lui, remonte sous elle (voir `.hero` dans style.css) : la barre flotte dans l'image au lieu de la trancher. */ /* La barre est collante : sans cette réserve, toute ancre — « Trouver un emploi » vers la recherche, le menu vers la FAQ, et « Aller au contenu » qui sert aux lecteurs d'écran — amenait sa cible au tout premier pixel de la fenêtre, c'est-à-dire quatre-vingt-dix pixels sous la barre, invisible. Le navigateur s'arrête maintenant assez haut pour la dégager, et vingt pixels de plus pour qu'elle ne soit pas collée dessous. */ html{scroll-padding-top:110px} /* La barre pleine largeur ne peint plus rien — dans aucun état. Elle portait un blanc opaque sur les pages intérieures, et une bande de quatre-vingt-dix pixels traversait donc l'écran derrière une plaque qui, elle, est arrondie et large de mille trois cent soixante-seize : on lisait deux en-têtes l'un dans l'autre, et la plaque paraissait posée sur un bandeau rose pâle plutôt que sur la page. Les trois sélecteurs sont écrits ensemble, et c'est nécessaire : trois feuilles chargées avant celle-ci redonnent un fond à la barre dès qu'elle se colle, et « .header.is-stuck » pèse plus lourd que « .header ». style.css .header.is-stuck{background:rgba(255,255,255,.95); box-shadow:0 4px 18px …} refonte.css .header.is-stuck{box-shadow:0 1px 4px …} public-v2.css .header.is-stuck,.header.is-scrolled{background:#FFFFFF} Les nommer ici, à égalité de poids et en dernier, est ce qui les éteint — sans un seul !important, comme le reste de cette feuille. Ce qui reste visible est la plaque, et elle seule : c'est son propre fond, son filet, son arrondi et son ombre douce qui font l'en-tête. Elle n'est pas touchée d'un pixel. */ /* --- Le fond de la zone extérieure, page par page ------------------------ Un jeton par famille de pages, et un seul endroit où ils sont écrits. La première section de la page lit le même jeton de son côté : la valeur est donc dite une fois, et les deux zones ne peuvent pas diverger. Chaque page passe le sien à
— voir components/accueil/Header.tsx. Ce n'est pas un sélecteur déduit de la position dans le DOM : c'est la page qui déclare, explicitement, le fond de sa propre première section. La valeur en regard est celle qui est réellement peinte sous la barre, relevée à la pipette sur la page rendue, et non une couleur approchée. */ :root{ /* Le repli, quand une page ne dit rien : le blanc du site. */ --fond-entete:#FFFFFF; --fond-accueil:transparent; /* .hero — la photographie passe dessous */ --fond-annonces:#FFFFFF; /* page « Toutes les annonces » : blanc */ /* Le corps de la page des annonces — filtres et cartes. L'ivoire du site, celui de « .zone-ivoire » sur l'accueil : le rose reste à l'introduction, et tout ce qui suit respire en neutre. */ --fond-annonces-corps:#FFFFFF; --fond-formations:#FFFFFF; /* main.fo */ --fond-contact:#FFFBFD; /* .ct-hero */ --fond-publier:#FAF8F9; /* le corps de la page de dépôt */ --fond-soumission:#FDF9FB; /* .soum-fin — « merci », « renvoyé » */ --fond-juridique:#FFFFFF; /* le corps des trois pages juridiques (blanc) */ --fond-offre:#FDF7FA; /* le premier arrêt du dégradé de .of-top */ --fond-prune:var(--bg-plum); /* pour une première section prune */ } .header, .header.is-stuck, .header.is-scrolled{ position:sticky;top:0;z-index:200; /* Le fond de la première section de la page, prolongé derrière la barre : c'est le jeton que la page a déclaré en passant `fond` à
. Sans rien, c'est le blanc du site. La zone pleine largeur ne porte que cela — pas d'ombre, pas de filet, pas de pseudo-élément. L'ombre douce est celle du conteneur arrondi, et elle seule. */ background:var(--fond-entete); border:0; box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none; /* Douze pixels de part et d'autre : le conteneur arrondi flotte, sans que la barre occupe plus de hauteur qu'il n'en faut pour le porter. */ padding-block:12px; min-height:0; } /* Au défilement, rien ne change : la bande garde exactement la teinte de la première section, pleine. Elle avait un temps été rendue translucide, avec un flou derrière elle. Ce n'est plus le cas : il n'y a plus de plaque de verre pour masquer le texte qui monte, et c'est donc la bande — la même couleur, opaque — qui s'en charge. La couleur ne bouge pas d'un ton entre le repos et le défilement, et il n'y a pas de bandeau étranger qui apparaît : c'est le fond de la page elle-même. */ /* Et rien ne redessine la bande par-derrière : la barre n'a pas de pseudo-élément, et n'en aura pas. (Le reflet du bord haut appartient à la plaque — voir « .header .wrap::before » plus bas.) */ .header::before, .header::after{content:none} /* --- Le conteneur de navigation, tel qu'il était -------------------------- La plaque de verre : un blanc translucide qui se teinte de rose en fin de course, un filet lumineux, un reflet rasant sur le bord haut, une ombre très claire, et le flou appliqué à ce qui passe derrière. Elle n'est pas touchée. C'est le fond pleine largeur qui est parti, pas elle. `isolation` la détache : son reflet et son ombre ne se mélangent pas à ce qui passe dessous. */ .header .wrap{ position:relative;isolation:isolate; /* La grille éditoriale du site, définie dans style.css et partagée avec le hero : le conteneur et le texte du hero commencent à la même abscisse et s'arrêtent à la même. Il ne va jamais bord à bord — 32 px le séparent au minimum du bord de la fenêtre — et il s'arrête à 1400 px sur les très grands écrans. */ width:calc(100% - (2 * var(--grille-marge,32px))); max-width:var(--grille-max,1400px); margin-inline:auto; border-radius:12px; background:linear-gradient(150deg,rgba(255,255,255,.94) 0%,rgba(255,240,246,.88) 100%); border:1px solid rgba(255,255,255,.86); -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%); box-shadow: 0 8px 26px rgba(168,96,132,.12), 0 1px 4px rgba(168,96,132,.05); transition:background-color 260ms ease,box-shadow 260ms ease; } /* Le reflet du bord haut : une lumière rasante, pas un liseré. */ .header .wrap::before{ content:"";position:absolute;top:0;left:12px;right:12px;height:1px;pointer-events:none; background:linear-gradient(90deg, rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 24%, rgba(255,255,255,.85) 76%,rgba(255,255,255,0) 100%); } /* Au défilement, le verre se ferme un peu : ce qui passe dessous ne doit pas venir gêner la lecture de la barre. Rien d'autre ne change — ni la hauteur, ni la position, ni les marges. */ .header.is-stuck .wrap,.header.is-scrolled .wrap{ background:linear-gradient(150deg,rgba(255,255,255,.98) 0%,rgba(255,244,248,.95) 100%); box-shadow: 0 10px 30px rgba(168,96,132,.15), 0 1px 5px rgba(168,96,132,.06); } /* Trois colonnes, celles des bords de même poids : le menu tombe au centre exact de la barre, et il y reste quelle que soit la longueur du nom ou des deux boutons. En file simple, il se rangeait contre la marque et le milieu glissait dès qu'un lien s'allongeait. */ .header .header__in{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center; gap:44px;height:62px;padding:0 var(--grille-pad,24px); } /* Les trois colonnes sont nommées une à une : sous 920 px la navigation disparaît, et sans cela les deux actions viendraient prendre sa place au milieu de la barre au lieu de rester contre le bord. */ .header .header__logo{grid-column:1;justify-self:start} .header .header__cta{grid-column:3;justify-self:end} /* Il y avait ici une règle qui effaçait la barre sur la seule page à hero — l'accueil. Elle n'a plus d'objet : la barre est transparente partout, et ce qui était l'exception de l'accueil est devenu la règle du site. */ /* --- Le bloc de marque -------------------------------------------------- Le monogramme sur son cercle, puis le nom en toutes lettres. Pas de capsule : le monogramme porte déjà la couleur. Le nom a besoin de son espace — collé au monogramme, il se lisait comme un seul mot. */ .header .header__logo{ display:inline-flex;align-items:center;flex:none;gap:11px; padding:0;max-width:none; background:none;box-shadow:none;border-radius:0; } .header .header__logo img,.header .header__logo .marque__mono{ display:block;width:36px;height:36px;flex:none; } .header .marque__mot{ font-size:22px;font-weight:600;line-height:1; letter-spacing:-.035em;white-space:nowrap;color:#2A1220; } /* --- La navigation ------------------------------------------------------ Des mots, pas des pastilles. Le trait actif est framboise et fin : c'est un repère, pas un surlignage. */ .header .nav{display:flex;margin:0;grid-column:2;justify-self:center} .header .nav ul{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0} .header .nav a{ position:relative;display:block;padding:4px 0;border-radius:0;white-space:nowrap; font-size:15px;font-weight:500;color:#3E2233;text-decoration:none; background:none; transition:color 180ms ease; } @media (hover:hover){ .header .nav a:hover{color:#C92D78;background:none} } /* --- La pastille « Nouveau » --------------------------------------------- Hors du flux, et c'est tout l'enjeu. Posée dans la ligne, elle poussait « FAQ » de soixante pixels et laissait un trou sous elle : le menu perdait son rythme pour une mention de huit lettres. En position absolue, elle ne prend aucune largeur — les intitulés gardent exactement l'écart qu'ils avaient, et elle se pose au-dessus du mot. Petite, franche, carrée : huit pixels et demi de texte, un aplat vert, pas d'ombre ni de dégradé. Elle signale, elle ne décore pas. Le vert est fixé par le texte blanc : sur un vert pomme lumineux le blanc tombe à 2,2 contre 1 — illisible. À #2F8A10 il passe à 4,5, le minimum pour un texte de cette taille. Elle vit dans lib/contenu.ts, en troisième élément de l'entrée de menu : l'effacer là l'enlève partout. */ .header .nav a:has(.nav__neuf){position:relative} .header .nav a .nav__neuf{ /* Onze pixels au-dessus du mot : assez pour ne pas le toucher, assez peu pour ne pas venir coller le bord haut de la plaque de verre. */ position:absolute;left:50%;top:-11px;transform:translateX(-50%); display:block;padding:3px 7px; background:#2F8A10;color:#FFFFFF; font-size:8.5px;font-weight:700;line-height:1;letter-spacing:.09em; text-transform:uppercase;white-space:nowrap; } /* Dans le menu du téléphone, les entrées sont empilées et larges : la pastille reprend sa place dans la ligne, à la suite du mot. */ .header .mmenu a .nav__neuf{ display:inline-block;margin-left:9px;padding:3px 7px; background:#2F8A10;color:#FFFFFF; font-size:9px;font-weight:700;line-height:1;letter-spacing:.09em; text-transform:uppercase;vertical-align:2px; } .header .nav a::after{ content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:0; background:#C92D78;transform:scaleX(0);transform-origin:left; transition:transform 200ms ease; } @media (hover:hover){ .header .nav a:hover::after{transform:scaleX(1)} } /* --- Les deux actions --------------------------------------------------- Leur dessin est dans boutons.css, avec celui de tous les boutons du site : la barre en montre deux exemplaires plus petits, elle ne les redessine pas. Ne reste ici que leur rangement. */ .header .header__cta{display:flex;align-items:center;gap:12px;flex:none} /* --- Le bouton de menu --------------------------------------------------- */ .header .burger{ /* Le carré se fait rectangle : trente-six pixels de haut pour quarante-quatre de large. Le trait du menu occupe seize pixels — les quatorze qui restaient au-dessus et au-dessous en faisaient un bouton plus haut que le mot de la marque posé en face. La cible tactile, elle, ne bouge pas : le `::after` ci-dessous la ramène à quarante-quatre pixels, débordant le dessin de quatre de chaque côté. On enlève du rembourrage visible, pas de la surface où le doigt tombe. */ position:relative; display:none;width:44px;height:36px;flex:none; align-items:center;justify-content:center; background:#fff;border:1px solid #EDE5E9;border-radius:6px; box-shadow:none;color:#2A1220;cursor:pointer; } .header .burger::after{content:"";position:absolute;inset:-4px 0;border-radius:inherit} .header .burger svg{display:block} .header .burger__close{display:none} .header .burger[aria-expanded="true"] .burger__open{display:none} .header .burger[aria-expanded="true"] .burger__close{display:grid} /* --- Le menu déroulant : une liste, pas un panneau ----------------------- */ .header .mmenu{display:none} /* Le voile n'existe que sur téléphone, comme le panneau qu'il détache : au delà du palier, le bouton de menu n'est pas affiché et le menu ne peut pas s'ouvrir. La règle est ici, à côté de celle du panneau, pour que les deux se lisent ensemble. */ .header .mmenu__voile{display:none} .header .mmenu ul{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;gap:0} .header .mmenu li + li{border-top:1px solid #EDE5E9} .header .mmenu a{display:block;padding:14px 2px;font-size:16px;font-weight:500;color:#2A1220;text-decoration:none} .header .mmenu__cta{display:flex;flex-direction:column;gap:10px;margin-top:18px} /* Le compte, en pied de menu : un filet le sépare des actions, et tout y est d'un cran plus bas — treize pixels et demi contre seize, un prune adouci contre le prune plein. « .mmenu a » impose un lien en bloc à seize pixels ; il faut le redire ici, sans quoi cette ligne pèserait autant qu'un lien de navigation. */ .header .mmenu__social{ margin:16px 0 0;padding-top:14px; border-top:1px solid #EDE5E9; } .header .mmenu .mmenu__social a{ display:inline-flex;align-items:center;gap:8px; padding:6px 2px; font-size:13.5px;font-weight:500;color:#7C6E76; transition:color 200ms cubic-bezier(.22,.68,.28,1); } .header .mmenu .mmenu__social svg{flex:none;color:#A8949F; transition:color 200ms cubic-bezier(.22,.68,.28,1)} @media (hover:hover){ .header .mmenu .mmenu__social a:hover{color:#2A1220} } @media (hover:hover){ .header .mmenu .mmenu__social a:hover svg{color:var(--mw-accent,#C92D78)} } .header .mmenu .mmenu__social a:focus-visible{outline:2px solid #951753;outline-offset:3px;border-radius:5px} /* --- Les paliers --------------------------------------------------------- La barre se vide dans l'ordre : d'abord la seconde action, qui se retrouve dans le menu déroulant ; puis la navigation, quand les quatre liens et les deux boutons ne tiennent plus côte à côte. Sans ces paliers, « Trouver un emploi » sortait de la plaque entre 760 et 980 px. ------------------------------------------------------------------------- */ @media (max-width:1180px){ .header .header__in{gap:28px} .header .nav ul{gap:22px} } /* « Publier une annonce » part la première : avec quatre liens au menu, les deux boutons sortaient de la plaque dès 1060 px. Le lien reste dans le menu déroulant, et l'action principale garde toute sa place. */ @media (max-width:1080px){ .header .header__cta .btn--secondary{display:none} } @media (max-width:920px){ /* La marge de la grille se resserre : 16 px de chaque côté au lieu de 32. La plaque et le contenu du hero la suivent tous les deux, sans qu'aucun des deux n'ait de règle propre — c'est la variable qui change, pas eux. */ :root{--grille-marge:16px} .header .wrap{width:calc(100% - 32px)} .header .header__in{height:62px;gap:12px} .header .header__logo{gap:9px} .header .header__logo img,.header .header__logo .marque__mono{width:34px;height:34px} .header .marque__mot{font-size:21px} .header .nav{display:none} /* La marque d'un côté, le bouton de menu de l'autre, et rien entre les deux : les deux actions passent dans le menu déroulant. */ .header .header__cta{margin-left:auto;gap:0} .header .header__cta .btn{display:none} .header .burger{display:flex} /* --- Le menu déroulant, posé par-dessus la page ---------------------- Il était dans le flux de l'en-tête : un bloc de plus après la plaque, donc une barre qui grandissait de toute la hauteur du panneau, et la page entière — le hero le premier — qui descendait d'autant à chaque ouverture. Il en descendait plus de trois cents pixels, et la photographie du hero était repoussée hors de l'écran. Il est maintenant fixe. La barre garde sa hauteur, la page ne bouge pas d'un pixel, ni à l'ouverture ni à la fermeture, et le panneau se pose par-dessus le hero au lieu de le pousser devant lui. `--mmenu-plaque` est le bas de la plaque de verre, calculé et non relevé : le rembourrage haut de la barre plus la hauteur de sa rangée. Il est écrit une fois par palier, et il commande deux choses — où le panneau commence, et jusqu'où il peut descendre. Si la barre change de hauteur, les deux suivent. Le verre, les couleurs, le filet et le contenu ne changent pas. L'ombre perd un tiers : le voile détache maintenant le panneau de la page, elle n'a plus à le faire seule. */ :root{--mmenu-plaque:74px} /* 12 de rembourrage + 62 de rangée */ /* Collée, la barre reprend les douze pixels de rembourrage de la règle générale — « .header.is-stuck » pèse une classe de plus que le palier qui les ramène à dix. La plaque descend donc de deux pixels au défilement, et le panneau la suit : sans cela, l'écart passait de huit à six dès qu'on ouvrait le menu après avoir descendu la page. */ .header.is-stuck,.header.is-scrolled{--mmenu-plaque:74px} /* La plaque repasse devant le voile. Sans « position », son z-index ne vaudrait rien, et le voile — plus loin dans le document — l'aurait grisée. */ .header .wrap{position:relative;z-index:3} .header .mmenu{ display:block; position:fixed;z-index:2; top:calc(var(--mmenu-plaque) + 8px); left:16px;right:16px;width:auto;margin:0; padding:10px 14px 16px; /* Jamais plus haut que ce que la fenêtre offre sous la barre, et le défilement n'apparaît que si le contenu dépasse vraiment. « dvh » et non « vh » : sur un téléphone, la barre d'adresse se rétracte et « vh » reste sur la hauteur du départ. */ max-height:calc(100dvh - var(--mmenu-plaque) - 24px); overflow-y:auto;overscroll-behavior:contain; border-radius:12px; background:linear-gradient(150deg,rgba(255,252,253,.94),rgba(255,248,251,.90)); border:1px solid rgba(255,255,255,.62); -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%); box-shadow:0 10px 24px rgba(70,20,48,.11); /* L'apparition : un fondu et huit pixels, pas davantage. Rien n'est animé sur la hauteur — c'est ce qui faisait sauter la mise en page. */ animation:mmenu-entre 180ms cubic-bezier(.22,.61,.36,1) both; } .header .mmenu[hidden]{display:none} /* Le voile : très clair, il ne fait que détacher le menu de ce qu'il surplombe. « touch-action:none » lui interdit de transmettre le geste à la page — le défilement est déjà coupé, ceci empêche le rebond d'iOS. */ .header .mmenu__voile{ display:block; position:fixed;inset:0;z-index:1; background:rgba(42,18,32,.20); touch-action:none; animation:mmenu-voile 180ms ease-out both; } .header .mmenu__voile[hidden]{display:none} /* « .mmenu a » impose aux liens display:block, un texte prune et un alignement à gauche : les deux boutons du bas retrouvent leur allure. */ .header .mmenu a.btn{ display:flex;align-items:center;justify-content:center; height:48px;padding:0 24px;font-size:15px;font-weight:600;border-radius:6px; } .header .mmenu a.btn--primary{ background:linear-gradient(105deg,#68153D 0%,#951753 45%,#C92D78 100%); border:1px solid transparent;color:#fff; } .header .mmenu a.btn--secondary{background:transparent;color:#2A1220;border:1px solid rgba(42,18,32,.18)} } /* ========================================================================= TÉLÉPHONE — la barre s'efface devant ce qu'elle surplombe Sur l'accueil, la barre se pose sur la photographie du hero : le conteneur arrondi y formait un gros bloc blanc de quatre-vingt-six pixels, à l'angle franc et à l'ombre large, et c'est lui qu'on voyait d'abord. Rien n'est retiré — le logo, le nom, le bouton de menu et le comportement collant sont les mêmes. Le conteneur se resserre, son angle se referme, son ombre se réduit à un souffle, et son filet redevient un filet. Il reste clair : le logo doit se lire sur une image. La zone extérieure, elle, ne peint toujours rien sur l'accueil — c'est le jeton « --fond-accueil », transparent —, et la photographie passe donc sous la barre sans qu'aucune bande ne l'en sépare. ========================================================================= */ @media (max-width:760px){ .header{ /* Dix pixels au lieu de douze, et le repli d'écran des iPhone compté en plus : en mode plein écran, la barre ne passe pas sous l'encoche. */ padding-block:calc(10px + env(safe-area-inset-top,0px)) 10px; } .header .wrap{ border-radius:10px; border:1px solid rgba(255,255,255,.72); /* Un souffle, non une ombre portée : elle faisait vingt-six pixels de diffusion et détachait la barre de la photographie comme une carte posée dessus. */ box-shadow:0 2px 10px rgba(96,42,72,.10); } .header.is-stuck .wrap,.header.is-scrolled .wrap{ box-shadow:0 3px 14px rgba(96,42,72,.14); } .header .header__in{height:56px} /* La plaque est plus courte ici — dix de rembourrage, cinquante-six de rangée —, et le repli d'écran des iPhone s'y ajoute. Le panneau et sa hauteur maximale suivent, sans avoir à être réécrits. */ :root{--mmenu-plaque:calc(66px + env(safe-area-inset-top,0px))} .header.is-stuck,.header.is-scrolled{ --mmenu-plaque:calc(68px + env(safe-area-inset-top,0px)); } /* L'angle du panneau suit celui de la plaque, qui se referme à dix. */ .header .mmenu{border-radius:10px} .header .header__logo{gap:8px} .header .header__logo img, .header .header__logo .marque__mono{width:31px;height:31px} .header .marque__mot{font-size:19px} } /* Les deux apparitions du menu. Le panneau monte de huit pixels, le voile ne fait que paraître. Ni l'un ni l'autre n'anime de hauteur : c'est une translation et une opacité, rien qui puisse déplacer quoi que ce soit. */ @keyframes mmenu-entre{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} } @keyframes mmenu-voile{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){ .header .header__cta .btn:hover{transform:none} .header .nav a::after{transition:none} /* Le menu paraît d'un coup, à sa place : aucune translation, aucun fondu. */ .header .mmenu,.header .mmenu__voile{animation:none} }