/* ========================================================================== GROUPE IMPEC — styles-v5.css -------------------------------------------------------------------------- Styles de la V5 : méga-menu, slogan, bande de preuve, cartes de services, procédé, notre entreprise, réalisations, témoignages, FAQ, soumission, carrières. Rythme clair/foncé. Les couleurs, rayons et espacements viennent tous de css/tokens-v5.css. On n'écrit jamais une couleur en dur ici : on appelle un jeton de rôle (--fond-page, --texte, --accent, --filet…). Voir l'en-tête des jetons pour la correspondance avec les anciens noms. TABLE DES MATIÈRES 1. Base et réinitialisation 11. Procédé 2. Accessibilité 12. Notre entreprise 3. Éléments partagés 13. Réalisations 4. En-tête + méga-menu 14. Témoignages 5. Menu mobile 15. FAQ 6. Hero 16. Soumission (formulaire) 7. Slogan 17. Carrières 8. Services (cartes photo) 18. Pied de page 9. Autres services 19. Responsive 10. Secteurs (liste) 20. prefers-reduced-motion ========================================================================== */ /* ========================================================================= 1. BASE ET RÉINITIALISATION ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--fond-page); color: var(--texte); font-family: var(--police-corps); font-size: var(--taille-corps); line-height: var(--interligne-corps); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } h1 { margin: 0; font-family: var(--police-affiche); font-weight: var(--graisse-titre); line-height: var(--interligne-titre); letter-spacing: -0.02em; } h2, h3 { margin: 0; font-family: var(--police-titre); font-weight: var(--graisse-titre); line-height: var(--interligne-titre); letter-spacing: -0.03em; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } /* ========================================================================= 2. ACCESSIBILITÉ ========================================================================= */ .lien-evitement { position: absolute; top: -4rem; left: var(--espace-s); z-index: 300; padding: 0.7rem 1.1rem; background: var(--marine); color: #fff; border-radius: var(--rayon-xs); transition: top var(--transition); } .lien-evitement:focus { top: var(--espace-s); } .visuellement-cache { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } :focus-visible { outline: 3px solid var(--marine); outline-offset: 2px; border-radius: 2px; } .hero :focus-visible, .secteurs :focus-visible, .temoignages :focus-visible, .carrieres :focus-visible, .pied :focus-visible, .entete:not(.entete--solide) :focus-visible { outline-color: var(--accent); } /* ========================================================================= 3. ÉLÉMENTS PARTAGÉS ========================================================================= */ /* Centrage du contenu (fond pleine largeur, contenu limité à --largeur-max) */ :where(main > section:not(.hero), .hero__contenu, .entete__interieur, .pied) { padding-inline: max(var(--gouttiere), calc((100% - var(--largeur-max)) / 2)); } /* Rythme vertical par défaut. Les sections qui ont leur propre respiration (hero, slogan, bande de preuve, carrières, et le bloc soudé Services + Autres services) sont exclues et traitées à leur endroit. */ main > section:not(.hero):not(.slogan):not(.proof-strip):not(.carrieres):not( .services ):not(.autres) { padding-block: var(--espace-section); } /* Étiquette « eyebrow » + trait de raclette doré */ .eyebrow { display: inline-flex; align-items: center; font-family: var(--police-detail); font-size: 1rem; /* noms de section plus grands */ font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--texte-doux); } .eyebrow::before { content: ""; width: 2.25rem; height: 5px; margin-right: 0.75rem; background: var(--accent-chaud); } .eyebrow-fonce { display: inline-flex; align-items: center; font-family: var(--police-detail); font-size: 0.9rem; /* noms de section plus grands */ letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--texte-doux); } .eyebrow-fonce::before { content: ""; width: 2.25rem; height: 2px; margin-right: 0.75rem; background: var(--texte); } /* En-tête de section (uniforme sur toute la page) */ .section__entete { max-width: none; margin-bottom: var(--espace-m); } .section__titre { margin-top: var(--espace-s); font-size: var(--taille-h2); max-width: 24ch; text-wrap: balance; /* titres sur 1 à 2 lignes, équilibrées */ } .section__intro { margin-top: var(--espace-m); max-width: 50ch; font-size: var(--taille-corps-grand); color: var(--texte-doux); } /* Variante : en-tête sur une rangée (titre à gauche, lien à droite) */ .section__entete--rangee { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--espace-m); } /* Boutons — trois tailles : .bouton--s · .bouton (défaut) · .bouton--l. Aucune taille ne doit plus être posée à la main ailleurs dans la feuille. */ .bouton { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: var(--bouton-m-padding); font-family: var(--police-bouton); font-size: var(--bouton-m-texte); font-weight: 400; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; border-radius: var(--rayon-pilule); transition: transform var(--transition), background-color var(--transition), color var(--transition); } /* Tailles */ .bouton--s { padding: var(--bouton-s-padding); font-size: var(--bouton-s-texte); } .bouton--l { padding: var(--bouton-l-padding); font-size: var(--bouton-l-texte); } /* Couleurs */ .bouton--or { background: var(--accent); color: var(--texte-sur-accent); } .bouton--or:hover { background: var(--accent-chaud); transform: translateY(-2px); } .bouton--fantome { background: transparent; color: inherit; border-color: currentColor; } .bouton--fantome:hover { transform: translateY(-2px); } .bouton--indigo { background: var(--marine); color: #fff; } .bouton--indigo:hover { transform: translateY(-2px); color: var(--accent-chaud); } /* Lien « flèche » */ .lien-fleche { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--police-detail); font-size: var(--taille-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--marine); } .lien-fleche::after { content: "\2192"; transition: transform var(--transition); } .lien-fleche:hover::after { transform: translateX(4px); } /* Bloc d'image temporaire (dégradé de marque + étiquette mono) */ .media-placeholder { display: flex; align-items: flex-end; justify-content: flex-end; min-height: 200px; padding: var(--espace-s); border-radius: var(--rayon-media); color: rgba(255, 255, 255, 0.5); font-family: var(--police-detail); font-size: var(--taille-label); letter-spacing: 0.03em; text-align: right; background: linear-gradient( 115deg, transparent 42%, rgba(201, 176, 116, 0.16) 50%, transparent 58% ), linear-gradient(140deg, var(--fond-sombre), var(--marine)); } /* =========================== INTRO --------------------------- Animation entièrement en CSS, 3,45 s au total. Le JS ne l'anime pas ; il se borne à trois choses, toutes dans le script en ligne du sauf la dernière : - décider si l'intro doit jouer → classe .a-intro - la déclencher au bon moment → classe .intro-demarree - retirer l'overlay à la fin → main-v3.js main-v3.js EST PARTAGÉ AVEC LA V5 ET LA V6. Rien ici ne doit demander une retouche du JS : l'intro V7 est du CSS et une balise (.intro__voile). Deux règles de sécurité, à respecter pour toute modification : - Sans .a-intro, l'overlay n'existe pas et la page s'affiche normalement. Un échec du script ne peut donc jamais masquer la page. - Sans .intro-demarree, tout reste en pause : c'est ce qui garantit que le visiteur voit la séquence depuis sa première image. Le filet de sécurité de main-v3.js retire l'overlay au bout de 4,5 s quoi qu'il arrive. Ces deux garde-fous sont inchangés depuis la V5 : c'est la mécanique de démarrage, elle a fait ses preuves et rien ici ne la touche. --------------------------- CE QUI CHANGE PAR RAPPORT À LA V5 La V5 était un lever de voile : un aplat marine s'efface, le mot se dissout au centre, le hero apparaît en fondu. La V7 en reprend le vocabulaire — aplat marine, lettres blanches — mais l'organise en deux temps nets : 1. un rideau MARINE se lève et découvre la vidéo, PLEIN CADRE ; 2. le mot s'inscrit en blanc, à 80 % de la largeur, EN HAUT et directement sur la vidéo — aucun fond derrière lui ; 3. il s'efface sur place, PUIS la navigation descend et la vidéo redescend avec elle, retrouvant son cadrage sous la barre. Pendant les deux premiers temps, la navigation n'existe pas à l'écran et la vidéo touche les quatre bords : rien ne concurrence le mot. La lisibilité du blanc ne demande aucun artifice. Le haut du hero porte déjà son propre voile sombre (.hero::after, rgba(9, 10, 30, 0.5)) : le blanc y tient autour de 5:1 même sur un ciel clair, là où 3:1 suffisent pour du grand texte. Et comme ce voile vit À L'INTÉRIEUR de .hero, il monte avec la vidéo — il couvre donc aussi le bord haut. La cascade lettre par lettre est celle de la V5, au geste près. Ce qui disparaît : le trait bleu pâle, le bicolore des lettres, et l'entrée en fondu du hero — c'est le rideau qui le découvre, il n'a plus rien à animer. --------------------------- SÉQUENCE 0,00 s TEMPS MORT (0,12 s) : absorbe le coût de démarrage des animations. Sans ce répit, les premières images sont prises sur le début du rideau, qu'on découvre déjà entamé. 0,12 s le rideau marine monte et sort par le haut (0,80 s). La vidéo se découvre par le bas, plein cadre. 0,92 s RESPIRATION (0,08 s) : la vidéo seule, un instant 1,00 s le « G » entame sa montée, puis une lettre toutes les 0,07 s 2,06 s la dernière lettre est posée 2,06 s PALIER (0,26 s) : le mot est stable et lisible 2,32 s le mot S'EFFACE EN FONDU, sur place (0,50 s) — il ne se déplace pas, il ne rétrécit pas 2,82 s RESPIRATION (0,08 s) : la vidéo seule à nouveau 2,90 s ENSUITE SEULEMENT : la barre de navigation descend (0,80 s), et LA VIDÉO REDESCEND AVEC ELLE — même délai, même durée, même courbe. La barre semble pousser la vidéo à sa place. 3,00 s le contenu du hero et la barre mobile s'installent 3,02 s le contenu de la barre apparaît en cascade, de gauche à droite 3,67 s le contenu de la barre est au complet 3,70 s la barre est posée, la vidéo est recadrée sous elle 3,86 s le calque s'est effacé — fin, et retrait par le JS LES DEUX RESPIRATIONS ne sont pas du remplissage. Avant elles, chaque geste démarrait à la milliseconde où le précédent finissait : l'intro s'enchaînait sans jamais reprendre son souffle, et l'arrivée de la barre se lisait comme une conséquence de la disparition du mot plutôt que comme un temps à part. 0,08 s de vidéo nue suffisent à séparer les intentions. --------------------------- TROIS CONTRAINTES DE CALAGE, si les durées bougent 1. LA BARRE ET LE RECADRAGE DOIVENT FINIR AVANT LE CALQUE. main-v3.js pose .intro-sautee sur au retrait de l'overlay — y compris à la fin normale, pas seulement au clic. Comme .intro-sautee coupe l'animation de la barre ET celle du hero, les deux doivent être terminées (3,70 s) avant l'animationend du calque (3,86 s). Sans cette marge, la barre se poserait d'un coup à mi-course et la vidéo sauterait à sa place. 2. TOTAL SOUS ~3,9 s. Le filet de sécurité du JS retire l'overlay à 4,5 s, et ce compte à rebours démarre dès l'exécution du script alors que l'animation, elle, attend la première peinture. La marge de 0,64 s est ce qui absorbe cet écart sur une machine lente. C'EST LA CONTRAINTE LA PLUS DURE DE TOUTE LA SECTION, parce qu'elle est hors de portée : main-v3.js est partagé avec la V5 et la V6, ce 4,5 s ne peut pas bouger. Chaque geste rallongé se paie donc sur la marge ou sur un autre geste. La marge est déjà passée de 0,94 à 0,64 s en finançant le rideau (0,60 → 0,80 s), la descente (0,70 → 0,80 s) et deux respirations de 0,08 s ; le palier a rendu 0,12 s au passage. Si tu veux encore ralentir quelque chose, reprends le temps sur le palier ou sur l'écart entre lettres — jamais sur cette marge. 3. TOUT NAÎT EN PAUSE. Chaque animation est déclarée « paused » sur sa propre règle, et son sélecteur figure dans la règle de libération plus bas. Un oubli et l'élément partirait avant les autres. --------------------------- LES CINQ RÉGLAGES Un seul nombre par intention — inutile d'aller chercher ailleurs : durée du rideau → 0,80 s sur .intro__voile écart entre lettres → 0,07 s sur .intro__lettre longueur du palier → décalage entre 2,06 s et 2,32 s taille du mot → --taille-logo (8vw : le mot fait 10 fois sa police, donc 80 % de la largeur d'écran) hauteur du mot → --mot-haut sur .a-intro .intro Et une seule courbe pour tous les grands déplacements — cubic-bezier(0.65, 0, 0.35, 1), symétrique : le rideau qui monte, la barre qui descend, la vidéo qui se recadre. La changer à un endroit sans la changer aux deux autres casserait l'unité de l'ensemble. La hauteur dont la vidéo remonte n'est pas un réglage : c'est celle de l'en-tête, --hauteur-entete + son filet de 1 px. Elle doit valoir exactement ça, sinon la vidéo ne se recale pas sous la barre. Rien n'anime de propriété de mise en page : seuls opacity et transform sont touchés, les deux étant composés par le GPU. =========================== */ /* Masqué par défaut : c'est le cas « pas d'intro ». */ .intro { display: none; } /* --------------------------------------------------------------------- DÉPART DE LA SÉQUENCE Toutes les animations naissent en pause — la pause est déclarée sur chaque règle qui pose une animation, jamais à distance. C'est délibéré : la propriété raccourcie « animation: » réinitialise animation-play-state à « running », si bien qu'un bloc de pause séparé et de même spécificité se ferait écraser selon sa position dans le fichier. Cette règle-ci libère tout d'un coup. Trois classes contre deux : elle l'emporte sur chaque déclaration quelle que soit leur place, l'ordre du fichier n'entre donc pas en ligne de compte. Le script du pose .intro-demarree depuis un requestAnimationFrame, c'est-à-dire au moment où le navigateur peint réellement. Sans ce verrou, l'horloge démarre dès la résolution des styles — soit avant la première peinture si une feuille bloquante se fait attendre, et le visiteur découvre l'intro déjà entamée. La barre de navigation, son contenu ET LE HERO LUI-MÊME sont dans la liste : ils font partie de la chorégraphie, pas de la page. Le hero y est entré avec son recadrage — un oubli ici et la vidéo redescendrait avant la première peinture, donc jamais plein cadre. --------------------------------------------------------------------- */ .a-intro.intro-demarree .intro, .a-intro.intro-demarree .intro__voile, .a-intro.intro-demarree .intro__logo, .a-intro.intro-demarree .intro__lettre, .a-intro.intro-demarree .entete, .a-intro.intro-demarree .entete__logo, .a-intro.intro-demarree .megamenu__item, .a-intro.intro-demarree .entete__actions, .a-intro.intro-demarree .burger, .a-intro.intro-demarree .hero, .a-intro.intro-demarree .hero__contenu, .a-intro.intro-demarree .hero__bascule-video, .a-intro.intro-demarree .hero__defiler, .a-intro.intro-demarree .barre-mobile { animation-play-state: running; } /* Le calque n'a plus aucun fond : le seul aplat de l'intro est le rideau d'ouverture, qui a sa propre balise (.intro__voile). Le mot est nu sur la vidéo. Ce qui reste ici, c'est le positionnement, les deux mesures du mot, et le repère de fin pour le JS. Le calque est au-dessus de tout (99999) : le « cliquer pour passer » vaut ainsi sur toute la surface, y compris sur la zone de l'en-tête. */ .a-intro .intro { position: fixed; inset: 0; display: flex; flex-direction: column; /* Le mot se tient EN HAUT. --mot-haut vaut la hauteur de l'en-tête plus un demi-rem : pendant l'intro l'en-tête n'est pas là, mais le mot se pose quand même là où il commencerait s'il y était — c'est ce qui donne à la barre l'air de venir prendre une place déjà dessinée. */ justify-content: flex-start; align-items: center; padding-top: var(--mot-haut); z-index: 99999; overflow: hidden; cursor: pointer; /* cliquer pour passer */ /* Taille de référence de l'intro. Le mot faisant 10 fois sa police de large, 8vw le pose à 80 % de la largeur d'écran. Plancher 1,5rem pour tenir sous 300 px ; plafond 12rem, qui ne mord qu'au-delà de 2400 px et garde la proportion sur les grands écrans. */ --taille-logo: clamp(1.5rem, 8vw, 12rem); --mot-haut: calc(var(--hauteur-entete) + 0.5rem); /* Ce fondu n'est pas l'effet de sortie — c'est un filet, et le repère de fin pour le JS. L'effet, c'est le fondu du mot lui-même, qui a fini à 2,66 s : il ne reste alors plus rien à effacer. Ne subsistent que deux rôles : nettoyer ce qui traînerait sur un écran inhabituel, et fournir l'animationend que main-v3.js attend pour retirer le calque. Fin à 3,56 s : APRÈS la pose de la barre et le recadrage de la vidéo (3,36 s tous les deux), et c'est impératif — le même animationend fait poser .intro-sautee, qui coupe ces deux animations. Voir la contrainte 1 en tête de section. */ animation: intro-sortie 0.16s 3.7s var(--sortie) forwards paused; } /* visibility en fin de course : même si le retrait JS n'a pas lieu, l'overlay cesse d'intercepter les clics. */ @keyframes intro-sortie { from { opacity: 1; } to { opacity: 0; visibility: hidden; } } /* --------------------------------------------------------------------- 1. LE RIDEAU L'aplat marine plein cadre, et rien d'autre — c'est le seul fond de toute l'intro. Il monte et sort par le haut ; son bord bas balaie l'écran de bas en haut, découvrant la vidéo au fur et à mesure. Comme le hero est remonté sous l'en-tête pendant ce temps (voir « LE RECADRAGE DE LA VIDÉO » plus bas), ce qu'il découvre est une vidéo plein cadre, sans bande au-dessus. translateY et non « height » ou « top » : la hauteur et la position sont des propriétés de mise en page, les animer refait le calcul de tout le calque à chaque image. Le transform est composé par le GPU. La courbe est une ease-in-out franche. Le rideau ne se pose nulle part — il quitte le cadre — donc rien à décélérer à l'arrivée ; mais un départ sec depuis l'immobilité se lit comme un à-coup. Les deux extrémités sont donc arrondies, la vitesse est prise au milieu du trajet. « forwards » : passé 0,82 s il reste hors cadre. Sans quoi il retomberait en place à la fin de son animation et masquerait la page. --------------------------------------------------------------------- */ .intro__voile { position: absolute; inset: 0; background: var(--marine); /* Fait préparer la couche de composition avant que ça bouge : sans ça, la promotion se fait sur la première image animée, d'où un accroc au démarrage. Le calque étant retiré du DOM à la fin, ce coût ne dure pas. */ will-change: transform; animation: intro-voile-monte 0.8s 0.12s cubic-bezier(0.65, 0, 0.35, 1) forwards paused; } @keyframes intro-voile-monte { from { transform: none; } to { transform: translateY(-100%); } } /* --------------------------------------------------------------------- 2. LE MOT Blanc, nu sur la vidéo, et il s'efface SUR PLACE. Le fondu est porté ICI, sur le bloc, et jamais sur les lettres : leur propre transform porte déjà leur montée d'entrée, et un fondu par lettre ferait un effilochage là où on veut un mot qui s'éteint d'un coup. --------------------------------------------------------------------- */ .intro__logo { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; font-family: var(--police-titre); font-weight: 700; font-size: var(--taille-logo); /* Blanc, comme en V5. Le mot n'a plus de fond à lui : il est posé sur la vidéo, dont le haut porte déjà le voile sombre de .hero::after. Le blanc y tient autour de 5:1, très au-dessus des 3:1 exigés pour du grand texte. La couleur est portée par le bloc — les lettres n'ont pas de bicolore à jouer, elles héritent. */ color: var(--texte-inverse); letter-spacing: 0.18em; margin-right: -0.18em; /* compense l'interlettrage traînant, recentre */ user-select: none; will-change: opacity; /* Il ne bouge pas en partant : plus de montée, plus de déplacement, plus de rétrécissement. Le mot s'éteint là où il s'est écrit, et c'est le silence qui suit qui laisse la place à la navigation. */ animation: intro-mot-efface 0.5s 2.32s var(--sortie) forwards paused; } @keyframes intro-mot-efface { to { opacity: 0; } } .intro__lettre { display: inline-block; /* Même raison que sur le rideau : préparer la couche avant que ça bouge. */ will-change: transform; /* Une seule animation, l'entrée. La sortie est portée par .intro__logo, qui éteint le mot d'un bloc — la V5 échelonnait la disparition lettre par lettre, ça n'a plus de sens dès lors qu'il s'éteint entier. Le 0,72 s en tête n'est pas un réglage de goût : c'est le moment où le rideau a fini de sortir. La première lettre monte sur une vidéo déjà découverte, jamais sur le marine. 0,07 s d'écart pour 0,36 s de trajet — deux crans plus serré que les 0,10 s de la V5. Ce n'est pas un choix esthétique : c'est une des trois coupes qui financent l'intro séquentielle (voir la contrainte 2 en tête de section). C'est ce 0,07 s qu'il faut bouger pour changer la cadence du mot, en reprenant le temps ailleurs. */ animation: intro-lettre 0.36s calc(1s + var(--i) * 0.07s) ease-out both paused; } /* Entrée d'après la vidéo de référence : la lettre surgit par le bas, dépasse la ligne, puis redescend s'y poser. Le dépassement est ce qui donne le poids — sans lui on retombe sur un simple fondu. Deux courbes distinctes : une montée franche et décélérée, puis un retour plus posé. Une seule courbe sur tout le trajet donnerait un rebond mécanique. En em et non en px : la course suit la taille de police, donc le geste reste identique du téléphone au grand écran. Plus de « color » ici : la V5 faisait surgir la lettre en bleu pâle avant de la poser en blanc, ce qui coûtait un redessin par glyphe et par image. Le blanc tient du début à la fin sur la vidéo assombrie — l'animation ne touche donc plus que des propriétés composées par le GPU. */ @keyframes intro-lettre { 0% { opacity: 0; transform: translateY(0.6em); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 55% { opacity: 1; transform: translateY(-0.22em); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } 100% { opacity: 1; transform: translateY(0); } } /* En em : l'espace du logo suit la taille de police. */ .intro__espace { width: 0.5em; } /* --------------------------------------------------------------------- 3. LA BARRE DE NAVIGATION QUI DESCEND Ces règles vivent dans la section INTRO et non plus bas avec l'en-tête : ce sont des temps de la séquence, ils se lisent avec le tableau du haut. Elles ne s'appliquent que sous .a-intro — sans intro, l'en-tête est simplement là, comme sur n'importe quelle page. L'en-tête garde sa place dans le flux : aucun passage en position fixed, donc aucun décalage de mise en page à l'arrivée. Son emplacement de 81 px n'est jamais visible pendant l'intro, puisque le hero est remonté par dessus — la vidéo occupe tout l'écran jusqu'au moment où la barre descend et la repousse à sa place. « backwards » et non « forwards », sur toutes les animations d'ici : à la fin, l'élément retrouve son état naturel sans transform résiduel. Deux bénéfices — un transform permanent sur .entete ferait d'elle le bloc conteneur du panneau du méga-menu ; et si le visiteur passe l'intro, la règle .intro-sautee plus bas coupe l'animation et tout se pose net. --------------------------------------------------------------------- */ .a-intro .entete { /* Départ à 2,90 s : le mot s'est éteint à 2,82 s, et on laisse 0,08 s de vidéo nue avant que la barre n'arrive. Cette respiration fait de son arrivée une décision et non une réaction — sans elle, les deux gestes se touchaient et l'œil les lisait comme un seul événement. LA COURBE EST LE POINT IMPORTANT. Elle était sur --courbe (cubic-bezier(0.2, 0.6, 0.2, 1)), très décélérante : relevé image par image, la barre avait parcouru 59 % du trajet au bout de 20 % du temps. Elle ne descendait pas, elle surgissait puis s'attardait. La courbe symétrique du rideau étale le mouvement — à mi-course, à mi-chemin — et le pose en décélérant sur la fin. C'est aussi ce qui unifie l'intro : rideau, barre et vidéo partagent désormais la même courbe. Le recadrage de la vidéo partage exactement ce délai, cette durée et cette courbe — les deux ne font qu'un seul mouvement, la barre paraît pousser l'image à sa place. */ animation: entete-descente 0.8s 2.9s cubic-bezier(0.65, 0, 0.35, 1) backwards paused; } @keyframes entete-descente { from { transform: translateY(-100%); } } /* --------------------------------------------------------------------- LE RECADRAGE DE LA VIDÉO Pendant toute l'intro, le hero est remonté de la hauteur exacte de l'en-tête : la vidéo touche donc le bord haut, plein cadre, et rien ne trahit l'emplacement de la future barre. Puis elle redescend AVEC la barre — même délai, même durée, même courbe — et retrouve précisément le cadrage dessiné, sous la navigation. 81 px, et pas un de plus : --hauteur-entete (5rem) plus le filet de 1 px qui borde l'en-tête. C'est ce qui fait que la vidéo se recale pile, sans liseré ni recouvrement. « backwards » comme la barre, et pour la même raison : pendant le délai le hero porte l'état de départ (remonté), et à la fin il retrouve son état naturel SANS transform résiduel. Rien de permanent n'est écrit, aucune propriété de mise en page n'est touchée — un visiteur qui ne voit pas l'intro a exactement la même page. Un transform sur .hero en fait le bloc conteneur de ses enfants positionnés ; ils sont tous en absolute, donc rien ne bouge. Et le hero a overflow: hidden, la vidéo ne peut pas déborder ailleurs. Remonter le hero le déplace sans le grandir : il laisserait donc voir, sous son bord bas, une bande de la hauteur dont il a bougé. C'est pour cela que le hero fait désormais 100svh sans plafond (voir sa règle, section HÉROS) : il remplit la fenêtre, le décalage ne découvre rien. Une version précédente comblait cette bande avec une ombre portée animée — un bouche-trou qui ne traitait que les 81 px du décalage, pas ce qui dépassait au-delà sur les grandes fenêtres. La cause étant réglée, l'ombre a disparu. --------------------------------------------------------------------- */ /* ⚠️ L'ÉTAT DE DÉPART EST ÉCRIT ICI, PAS LAISSÉ AU « backwards ». C'est la correction du défaut que Patrik filmait : pendant toute l'intro le hero restait en bas, laissant voir la bande de 81 px réservée à la barre, puis SAUTAIT en haut à 2,9 s avant de redescendre. Relevé image par image sur sa vidéo, hauteur de la bande claire : 9,6 s → 130 px · 10,0 s → 22 px · 10,6 s → 125 px. Le saut est là, net. La cause tient à une différence entre les deux animations, par ailleurs jumelles. Celle de la barre part de « translateY(-100%) » — une valeur qui se résout seule. Celle du hero partait d'un calc() sur --hauteur-entete : un keyframe qui dépend d'une variable CSS. Le remplissage « backwards » ne tenait pas cet état-là pendant le délai. L'animation, elle, jouait correctement une fois lancée — d'où le saut plutôt qu'une absence totale d'effet. La règle ordinaire, elle, résout var() sans difficulté. On y pose donc le départ, et le keyframe reçoit une arrivée explicite. Conséquence : il faut « forwards » et non plus « backwards », faute de quoi la fin de l'animation rendrait la main à la règle et le hero remonterait. Rien n'est piégé par le transform résiduel : le hero n'a aucun descendant en position fixed — vérifié — et ses enfants sont tous en absolute à l'intérieur. --------------------------------------------------------------------- */ .a-intro .hero { transform: translateY(calc(-1 * var(--intro-recadre, calc(var(--hauteur-entete) + 1px)))); animation: hero-recadre 0.8s 2.9s cubic-bezier(0.65, 0, 0.35, 1) forwards paused; } @keyframes hero-recadre { from { transform: translateY(calc(-1 * var(--intro-recadre, calc(var(--hauteur-entete) + 1px)))); } to { transform: translateY(0); } } /* Le contenu ne descend pas avec la barre d'un bloc : il s'y installe de gauche à droite, dans l'ordre de lecture, pendant que la barre finit sa course. Décalage de 0,04 s — assez pour qu'on sente le sens, trop peu pour qu'on compte les éléments. Tout est en place à 3,35 s, juste avant que la barre ne se pose (3,36 s). */ .a-intro .entete__logo, .a-intro .megamenu__item, .a-intro .entete__actions, .a-intro .burger { animation: entete-contenu 0.35s var(--courbe) backwards paused; } .a-intro .entete__logo { animation-delay: 3.02s; } .a-intro .megamenu__item:nth-child(1) { animation-delay: 3.07s; } .a-intro .megamenu__item:nth-child(2) { animation-delay: 3.12s; } .a-intro .megamenu__item:nth-child(3) { animation-delay: 3.17s; } .a-intro .megamenu__item:nth-child(4) { animation-delay: 3.22s; } .a-intro .megamenu__item:nth-child(5) { animation-delay: 3.27s; } .a-intro .entete__actions, .a-intro .burger { animation-delay: 3.32s; } @keyframes entete-contenu { from { opacity: 0; transform: translateY(-6px); } } /* --------------------------------------------------------------------- 4. LE CONTENU DU HERO Le rideau découvre la VIDÉO, pas encore le discours. Tant que le mot est à l'écran, le hero ne montre que son film : sans ça, « DES BÂTIMENTS IMPECCABLES » se dresse en énorme juste sous « GROUPE IMPEC » et les deux titres se disputent le regard — l'intro perd son moment. Le contenu s'installe donc à 2,86 s, avec la barre et non avec le mot : le mot est parti, la page peut se présenter. Il monte de 10 px, dans le sens inverse de la barre qui descend — les deux se rejoignent. Le bouton pause de la vidéo est du lot : main-v3.js le dévoile dès que la lecture démarre, soit en plein milieu de l'intro. Sans cette règle il apparaîtrait seul dans un coin, avant tout le reste. La barre d'action mobile aussi : elle est en position fixe au bas de l'écran, dans la partie transparente du calque — elle se découvrait donc dès la levée du rideau, un aplat marine en bas d'un écran qui n'a pas fini de se présenter. Elle monte maintenant avec le reste. --------------------------------------------------------------------- */ .a-intro .hero__contenu, .a-intro .hero__bascule-video, .a-intro .hero__defiler, .a-intro .barre-mobile { animation: hero-contenu 0.7s 3s var(--courbe) backwards paused; } @keyframes hero-contenu { from { opacity: 0; transform: translateY(10px); } } /* Intro passée (clic, Échap, filet de sécurité) : on coupe tout, l'en-tête et le hero retrouvent leur état naturel immédiatement — le « backwards » de leurs animations fait qu'une coupure les repose exactement en place. main-v3.js pose aussi cette classe à la fin normale de la séquence — d'où la contrainte 1 en tête de section, qui veut que la barre ET le recadrage aient fini avant. */ .intro-sautee .entete, .intro-sautee .entete__logo, .intro-sautee .megamenu__item, .intro-sautee .entete__actions, .intro-sautee .burger, .intro-sautee .hero, .intro-sautee .hero__contenu, .intro-sautee .hero__bascule-video, .intro-sautee .hero__defiler, .intro-sautee .barre-mobile { animation: none; } /* ⚠️ INDISSOCIABLE DE LA RÈGLE CI-DESSUS. Depuis que l'état de départ du hero est posé par une règle ordinaire et non plus par « backwards », couper l'animation ne suffit plus à le reposer : sans cette ligne, il resterait remonté de 81 px, à découvert sous la barre. Le transform doit tomber en même temps que l'animation. */ .intro-sautee .hero { transform: none; } /* Ceinture et bretelles : le script du couvre déjà ce cas. */ @media (prefers-reduced-motion: reduce) { .a-intro .intro { display: none; } .a-intro .entete, .a-intro .entete__logo, .a-intro .megamenu__item, .a-intro .entete__actions, .a-intro .burger, .a-intro .hero, .a-intro .hero__contenu, .a-intro .hero__bascule-video, .a-intro .hero__defiler, .a-intro .barre-mobile { animation: none; } /* Même raison qu'après .intro-sautee : le départ du hero n'est plus porté par le remplissage de l'animation, donc le couper ne le repose pas. */ .a-intro .hero { transform: none; } } /* ========================================================================= 4. EN-TÊTE + MÉGA-MENU ------------------------------------------------------------------------ L'en-tête est opaque dès le chargement : il ne chevauche jamais le hero. .entete--solide (posée par le JS au défilement) ne fait plus que compacter la barre — fond et couleur de texte ne bougent plus. ========================================================================= */ .entete { position: sticky; top: 0; z-index: var(--z-entete); color: var(--texte); background: var(--fond-entete); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--filet); transition: background-color var(--transition), color var(--transition), box-shadow var(--transition); } .entete__interieur { display: flex; align-items: center; justify-content: space-between; /* logo à gauche · actions à droite */ gap: var(--espace-m); min-height: var(--hauteur-entete); transition: min-height var(--transition); position: relative; /* pour centrer le méga-menu en absolu */ } .entete--solide .entete__interieur { min-height: 4rem; } /* en-tête plus compact au défilement (était égal à --hauteur-entete : sans effet) */ /* Logo : version couleur en permanence, puisque la barre est toujours claire. Le menu mobile ouvert a son propre logo blanc séparé (.menu-mobile__logo, en fin de feuille) — rien à voir avec celui-ci. */ .entete__logo { display: flex; align-items: center; flex-shrink: 0; justify-self: start; /* Respiration sous le logo : le padding rend l'item plus haut que la min-height de la barre, donc le logo remonte et dégage du vide en dessous. Réduit au défilement, pour garder l'en-tête compact. */ padding-bottom: var(--espace-s); transition: padding-bottom var(--transition); } .entete--solide .entete__logo { padding-bottom: 0.5rem; } /* ⚠️ « width: auto » ÉVITÉ EXPRÈS — voir le commentaire jumeau, bien plus long, dans impec/css/habillage.css (même section). Bug trouvé le 7 août 2026 : un logo aussi large que haut (446 × 159, ratio 2,805) se retrouvait écrasé bien en dessous de sa hauteur déclarée dès que la barre était resserrée, malgré flex-shrink: 0 sur .entete__logo. Largeur calculée explicitement depuis la hauteur (× 2,805031446540881) pour contourner l'ambiguïté plutôt que de la corriger. */ .entete__logo img { height: 72px; width: 202px; transition: height var(--transition), width var(--transition); } .entete--solide .entete__logo img { height: 42px; width: 117.81px; } /* Méga-menu : partie centrale de l'en-tête (logo · menu · actions) */ .megamenu { display: flex; justify-content: center; align-self: stretch; /* occupe toute la hauteur de l'en-tête */ } .megamenu__liste { display: flex; align-items: stretch; /* items pleine hauteur, pour combler le vide sous le titre */ height: 100%; } .megamenu__item { position: static; /* le panneau s'ancre sur .entete__interieur (pleine largeur) */ display: flex; align-items: center; /* garde le titre centré verticalement */ /* padding au lieu de gap : les zones de survol se touchent, pas d'espace mort */ padding-inline: clamp(0.375rem, 0.8vw, 0.75rem); } .megamenu__trigger, .megamenu__lien { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0; background: none; border: 0; color: inherit; font-family: var(--police-corps); font-size: 1rem; font-weight: 700; position: relative; white-space: nowrap; /* chaque catégorie sur une seule ligne */ } /* Soulignement doré animé (décoratif) */ .megamenu__trigger::after, .megamenu__lien::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); } .megamenu__item:hover .megamenu__trigger::after, .megamenu__item:focus-within .megamenu__trigger::after, .megamenu__lien:hover::after, .megamenu__trigger[aria-expanded="true"]::after { transform: scaleX(1); } .chevron { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--transition); } .megamenu__item:hover .chevron, .megamenu__trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); } /* ------------------------------------------------------------------------- PANNEAU DU MÉGA-MENU (inspiré de broccolini.com) ------------------------------------------------------------------------ Un seul panneau pour toutes les catégories : c'est lui qui porte l'aplat crème et la hauteur animée, de sorte qu'en passant d'une catégorie à l'autre le fond ne clignote jamais (le défaut du panneau par catégorie : deux fonds en fondu laissaient voir la page au travers). Il est enfant de .entete (qui est `sticky`, donc positionné) et déborde en pleine largeur de fenêtre, sous la barre. La barre passe elle aussi en crème à l'ouverture : les deux ne forment qu'un seul bloc. ------------------------------------------------------------------------- */ .megamenu__panneau { position: absolute; top: 100%; left: 0; right: 0; overflow: hidden; height: 0; /* piloté au pixel par le JS, pour animer la hauteur */ background: var(--fond-page); color: var(--texte); border-bottom: 1px solid var(--filet); transition: height var(--transition-lent); } .megamenu__panneau[hidden] { display: none; } /* Une vue = une catégorie : rien d'autre que la liste verticale des sous-sections. Pas de photo — le panneau reste purement typographique. */ .megamenu__vue { display: block; /* Moins de blanc en haut qu'en bas : la barre pose déjà son propre écart sous les titres, alors qu'en bas rien ne retient l'œil. Un retrait égal des deux côtés paraissait creux au-dessus du premier lien. */ padding-block: clamp(0.85rem, 1.2vw, 1.15rem) clamp(1.5rem, 2vw, 2rem); padding-inline: max(var(--gouttiere), calc((100% - var(--largeur-max)) / 2)); /* Retrait gauche : les sous-sections démarrent sous le premier titre de la barre (« LAVAGE DE VITRES »), pas au bord de page. Toutes les catégories partagent ce bord — la colonne ne bouge pas d'une catégorie à l'autre. La valeur dépend de la largeur du logo, qui rétrécit au défilement : elle n'est pas calculable en CSS, c'est le JS qui pose --mega-retrait. Le `max()` reste comme repli si le script ne s'exécute pas. */ padding-left: var( --mega-retrait, max(var(--gouttiere), calc((100% - var(--largeur-max)) / 2)) ); } .megamenu__vue[hidden] { display: none; } /* Le contenu entre en fondu à chaque changement de catégorie */ .megamenu__vue > * { animation: menu-apparition var(--transition-lent) both; } @keyframes menu-apparition { from { opacity: 0; transform: translateY(8px); } } /* Liste verticale : le cœur du parti pris — de gros titres empilés */ .megamenu__sousliste { display: flex; flex-direction: column; align-items: flex-start; /* Compense le retrait interne des liens (voir plus bas) : le texte reste aligné au pixel sur « LAVAGE DE VITRES ». */ margin-left: -0.5rem; } .megamenu__sousliste a { display: inline-block; /* Retrait horizontal permanent : l'aplat de survol a de quoi respirer et rien ne bouge au passage de la souris. Le retrait vertical reste minime : c'est lui, avec l'interligne, qui règle l'écart entre les sous-sections. */ padding: 0.05em 0.5rem; border-radius: var(--rayon-xs); color: var(--marine); font-family: var(--police-titre); font-size: clamp(0.95rem, 1.6vw, 1.5rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; text-transform: uppercase; transition: background-color var(--transition), color var(--transition), transform var(--transition); } /* Les liens non survolés gardent leur bleu plein : sur la crème, les faire passer en retrait les rendait simplement gris et ternes. Seul le lien survolé change — c'est lui qui porte la distinction. Le bleu pâle est porté par le fond, pas par le texte : en couleur de texte, il tombe à 1,42:1 sur la crème (illisible, le minimum étant 3:1 pour du grand texte). En aplat, c'est la convention des boutons du site — fond bleu pâle, texte marine — et le contraste remonte à 12,7:1. */ .megamenu__sousliste a:hover, .megamenu__sousliste a:focus-visible { color: #65b3d6; transform: translateX(0.35rem); } /* (Les règles de l'en-tête ouvert sont en fin de fichier, après le bloc responsive : elles doivent gagner aussi bien en desktop qu'en mobile.) */ /* Voile : assombrit la page sous l'en-tête pendant l'ouverture */ .nav-voile { position: fixed; inset: 0; z-index: calc(var(--z-entete) - 1); background: rgba(4, 14, 20, 0.6); opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); } .nav-voile.est-visible { opacity: 1; visibility: visible; } @media (prefers-reduced-motion: reduce) { .megamenu__panneau, .megamenu__vue > * { transition: none; animation: none; } } /* Actions de droite */ .entete__actions { display: flex; align-items: center; gap: var(--espace-m); flex-shrink: 0; justify-self: end; } /* Bouton de la nav : fond pêche au survol (au lieu du bleu foncé) */ .entete__actions .bouton--or:hover { background: var(--accent-chaud); color: var(--texte); } /* Bascule de langue : une seule étiquette, celle de la langue courante */ .entete__langue { padding: 0.25rem 0.1rem; background: none; border: 0; color: inherit; font-family: var(--police-detail); font-size: var(--taille-label); font-weight: 700; letter-spacing: var(--tracking-label); cursor: pointer; transition: color var(--transition); } .entete__langue:hover { color: var(--accent); } .entete__tel { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--police-detail); font-size: var(--taille-petite); font-weight: 700; color: currentColor; white-space: nowrap; } .entete__tel-point { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; animation: pulsation-accent 2.4s ease-in-out infinite; } @keyframes pulsation-accent { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bleu-pale-rvb), 0.55); } 50% { box-shadow: 0 0 0 6px rgba(var(--bleu-pale-rvb), 0); } } /* Hamburger (masqué sur desktop) */ .burger { display: none; flex-direction: column; gap: 5px; padding: 0.5rem; background: none; border: 0; /* Les