/* Polices servies LOCALEMENT, sans requête tierce. SEULES déclarations @font-face du site : styles/site.css n'en répète aucune. Trois familles depuis le 19/09/2026 (client) : Archivo pour les titres, Roboto pour le texte courant, IBM Plex Mono 400 et 600 pour les étiquettes. Newsreader, puis Source Serif 4 qui l'avait remplacée le 13/08, ne sont plus servies : les titres de la maquette passent en Archivo, voir §3bis bis de tools/cloner-reference.mjs. */ @font-face{font-family:'Archivo';src:url('/polices/archivo-latin-variable.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'Archivo';src:url('/polices/archivo-latin-variable-italic.woff2') format('woff2-variations');font-weight:100 900;font-style:italic;font-display:swap} @font-face{font-family:'IBM Plex Mono';src:url('/polices/ibm-plex-mono-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'IBM Plex Mono';src:url('/polices/ibm-plex-mono-latin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} /* font-stretch DOIT etre declare ici, sinon le navigateur ignore l'axe de chasse du fichier et toute valeur de font-stretch rend la meme largeur. 75 a 100 % est l'etendue de l'axe wdth de Roboto : 75 % donne le dessin de Roboto Condensed sans servir un second fichier. */ @font-face{font-family:'Roboto';src:url('/polices/roboto-latin-variable.woff2') format('woff2-variations');font-weight:100 900;font-stretch:75% 100%;font-style:normal;font-display:swap} /* Fond photographique du hero (§3quater). Il vit ici et non dans un attribut style parce qu'il lui faut une variante allégée sur petit écran — 67 Ko au lieu de 176 — et qu'une media query ne s'écrit pas dans un attribut. La déclaration url() précède image-set() : les navigateurs qui ignorent image-set() gardent le JPEG, les autres écrasent avec le WebP. */ .fond-hero{ background-image:url('/assets/photos/hero.jpg'); background-image:image-set(url('/assets/photos/hero.webp') type('image/webp'),url('/assets/photos/hero.jpg') type('image/jpeg')); background-size:cover; background-position:center 42%; background-repeat:no-repeat; } @media (max-width:700px){ .fond-hero{ background-image:url('/assets/photos/hero-960.jpg'); background-image:image-set(url('/assets/photos/hero-960.webp') type('image/webp'),url('/assets/photos/hero-960.jpg') type('image/jpeg')); } } /* Bande de navigation, deux états. L'ÉTAT PAR DÉFAUT est la bande claire — celui qui est lisible partout. C'est délibéré : sans JavaScript, aucune classe n'est posée, et le site reste parfaitement navigable (SPEC §2). Le script n'AJOUTE que l'état « sur le hero », qui est l'agrément, jamais la condition de lisibilité. Sur le hero, la bande porte un DÉGRADÉ DE BLANC (demande du client du 15/08), dense en haut et qui s'allège vers le bas. Il n'est pas décoratif : le texte de navigation est en pétrole dans les DEUX états, et le pétrole ne tient pas sur une photo nue — mesuré, 100 % de la bande sous 4,5:1 sans ce voile. C'est lui qui rend la couleur lisible. */ /* La marge négative vit ICI et non dans l'attribut style : c'est elle qui met la barre en surimpression sur le hero, et le menu mobile doit pouvoir l'annuler. Or les classes extraites des attributs style sont écrites en FIN de feuille — à spécificité égale, elles gagneraient contre toute media query placée avant. */ .entete{ margin-bottom:-88px; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgba(1,73,88,.12); box-shadow:0 1px 12px rgba(14,26,29,.10); } /* Les transitions n'existent qu'à partir de la classe « prete », posée au frame suivant le premier rendu. Sans ce délai, le passage à l'état « sur le hero » — que le script applique au chargement — s'ANIMERAIT : la bande claire apparaîtrait puis se dissoudrait sous les yeux du visiteur. On veut l'état initial d'emblée, et l'animation seulement pour les bascules provoquées par le défilement. */ .entete.prete{ transition:background-color .25s ease,box-shadow .25s ease,border-color .25s ease; } .entete.prete .lien-nav{transition:color .18s ease} .entete .lien-nav{color:var(--brand-petrole)} /* Dégradé de blanc, le plus opaque en haut. Les trois opacités sont le réglage le PLUS TRANSPARENT qui garde le texte de navigation lisible : mesuré sur la photo réelle, .91/.77/.46 donne 4,67:1 au pire, et .90/.76/.44 tombe à 4,48 — sous le seuil de 4,5:1. Ce n'est donc pas une valeur de goût, c'est une limite. */ .entete.est-sur-hero{ background:linear-gradient(180deg,rgba(255,255,255,.91) 0%,rgba(255,255,255,.77) 55%,rgba(255,255,255,.46) 100%); border-bottom-color:transparent; box-shadow:none; } /* Menu mobile — le balisage est piloté par src/scripts/menu-mobile.js. Tout est sous media query : au-dessus de 60rem, le bouton reste caché et la navigation garde exactement la disposition de la maquette. Sous 60rem, l'en-tête cesse de chevaucher le hero. C'est ce qui rend le repli sûr : la barre blanche grandit avec son contenu au lieu de le laisser déborder sur la photo, y compris SANS JavaScript, où la navigation reste déployée sur plusieurs lignes. */ .entete__bascule{ display:none; align-items:center; gap:10px; background:none; border:0; padding:10px 2px; cursor:pointer; font:500 15.5px/1 'Archivo',sans-serif; letter-spacing:.02em; color:var(--brand-petrole); } .entete__bascule[hidden]{display:none} .entete__bascule-icone{width:26px;height:26px} .entete__bascule:hover,.entete__bascule:focus-visible{color:var(--brand-jaune)} @media (max-width:60rem){ .entete{margin-bottom:0} /* Sélecteur à deux classes, et non « .entete__barre » seul : la classe extraite de l'attribut style porte « height:88px » et est écrite plus bas dans la feuille. À 0-1-0 contre 0-1-0, elle l'emporterait, et la barre ne pourrait pas grandir pour accueillir le menu déployé. */ .entete .entete__barre{ grid-template-columns:1fr auto; height:auto; min-height:88px; row-gap:0; } .entete__bascule:not([hidden]){display:flex;grid-column:2;grid-row:1;justify-self:end} #navigation-principale{ grid-column:1 / -1; grid-row:2; justify-self:stretch; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; } #navigation-principale .lien-nav{ padding:14px 0; text-align:left; border-top:1px solid rgba(1,73,88,.12); } /* Le bloc d'action suit la navigation : il se replie avec elle plutôt que de rester seul en travers de la barre. Il vise .entete__actions et non le bouton : depuis le 19/08 le bouton n'est plus enfant direct de la grille, il est dans ce conteneur avec le selecteur de langue. */ .entete__barre > .entete__actions{ grid-column:1 / -1; grid-row:3; justify-self:stretch; margin:4px 0 18px; flex-direction:column-reverse; align-items:stretch; gap:14px; } #navigation-principale[data-replie="true"], #navigation-principale[data-replie="true"] ~ .entete__actions{display:none} } /* Agrandissement ponctuel d'un logo partenaire (§4septies). Le facteur voyage dans une variable posée sur l'élément, pour que la règle reste valable quel que soit le logo concerné. Le seuil de 56.25rem (900 px) est celui au-dessus duquel la grille des partenaires tient sur UNE seule rangée. En dessous elle se replie, et le débordement d'un logo agrandi recouvrirait ses voisins. */ @media (min-width:56.25rem){ .logo-agrandi{transform:scale(var(--echelle,1))} } /* Boutons de sortie de section (§4octies). Aplat pétrole au repos, jaune de la charte au survol — texte encre foncé, 9,2:1. LE BALAYAGE. Le jaune n'est pas une couleur de fond mais un DÉGRADÉ, dont seule la largeur est animée : de 0 à 100 %, ancré à gauche. D'où l'effet de tapis qu'on déroule, sans pseudo-élément ni balise en plus, et le texte reste au-dessus sans avoir à le repositionner — un fond est toujours derrière son contenu. C'est pour ça que les attributs style des trois boutons déclarent background-color et non le raccourci background : le raccourci remettrait background-image à zéro, et les classes extraites étant écrites plus bas dans la feuille, elles effaceraient le dégradé. La couleur du texte ne se FOND pas, elle BASCULE d'un coup à 0,19 s, soit aux trois quarts du balayage. Un fondu avait été essayé : il fait passer le texte par un gris intermédiaire pendant ~150 ms, illisible aussi bien sur le pétrole que sur le jaune. Une bascule sèche évite ce moment mort. Aucune couleur ne tient sur les deux fonds — clair sur jaune donne 1,55:1, foncé sur pétrole 1,37:1 — le compromis est donc de choisir QUAND basculer, pas de l'adoucir. MAINTENIR LE BLANC CASSÉ PENDANT TOUT LE SURVOL a été essayé le 17/08 à la demande du client, puis annulé : le libellé tombait à 1,55:1 sur le jaune, contre 9,14:1 au repos. Sous prefers-reduced-motion, le balayage devient instantané : les couleurs changent, le mouvement disparaît. */ .bouton-plein{ background-image:linear-gradient(to right,var(--brand-jaune) 0 100%); background-repeat:no-repeat; background-size:0 100%; transition:background-size .38s cubic-bezier(.22,.61,.36,1),color 0s linear .19s; } .bouton-plein:hover,.bouton-plein:focus-visible{ background-size:100% 100%; color:var(--survol-texte,#0A2A26); } @media (prefers-reduced-motion:reduce){ .bouton-plein{transition-duration:.01ms;transition-delay:0s} } /* Vidéo de fond du hero. Elle recouvre exactement la photo qui lui sert d'affiche, dans le même cadre : même recadrage, même point de fuite. L'affiche reste visible tant que la vidéo n'a pas de première image, et à jamais si aucune source ne correspond (petit écran, animations coupées, économie de données) — voir §3quater. object-position reprend le cadrage de la photo pour que le passage de l'une à l'autre ne fasse pas sauter l'image. */ .fond-hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block; } /* Icônes de réseaux sociaux du pied de page (§4septdecies), en carrés arrondis. LA GÉOMÉTRIE N'EST PAS LIBRE : le client veut la rangée exactement alignée sur le logo au-dessus, bord gauche du premier carré sur le bord gauche du logo, bord droit du dernier sur son bord droit. Le logo fait 144 px. Trois carrés et deux écarts doivent donc totaliser 144 : 3 x 40 + 2 x 12 = 144. Ces valeurs se tiennent — changer la taille du logo oblige à les recalculer. 40 px de côté reste sous les 44 px de confort tactile recommandés ; c'est la contrainte d'alignement qui l'impose, et on reste très au-dessus du minimum de 24 px de WCAG 2.5.8. LE VOILE A CHANGÉ DE SENS le 17/08, quand le haut du pied est passé au blanc : un voile clair sur fond clair ne se voit plus, et une icone en blanc casse y disparait. Voile sombre et icone en encre, donc, ce qui porte le pictogramme a 13,8:1 — tres au-dessus des 3:1 que WCAG 1.4.11 demande. Jaune au survol ET au focus clavier, comme les liens de navigation. */ .lien-social{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:8px; background:rgba(1,73,88,.14); color:var(--neutral-encre); transition:color .18s ease,background-color .18s ease; } .lien-social:hover,.lien-social:focus-visible{ color:#0A3A34; background:var(--brand-jaune); } /* Plan du site : GRAS ET JAUNE au survol et au focus clavier (arbitrage du client, 17/08, apres essai du soulignement puis de l'aplat). QUATRE ETATS AURONT ETE MESURES AVANT CELUI-CI : texte en jaune libelle a 1,53:1 — on ne lit plus le mot soulignement jaune libelle a 15,90:1 — trait de 2 px a 1,53:1 aplat jaune libelle a 10,42:1 — aplat a 1,53:1 gras + jaune libelle a 1,53:1 — retenu LE CHIFFRE EST CONNU ET ASSUME : 1,53:1 contre les 4,5:1 exiges. Le gras epaissit le trait des lettres, ce qui aide a percevoir le changement d'etat, mais ne deplace pas le seuil — celui du gros texte ne commence qu'a 18,66 px en gras, et ces libelles font 14,08 px. La cause reste le fond : sur le vert tres pale du haut de pied, aucun emploi du jaune de marque en TEXTE n'atteint 4,5:1. Roboto est servie en variable de 100 a 900, donc le 700 est dessine et non synthetise. La boite du lien ne bouge pas : les liens sont des elements flex etires sur la largeur de la colonne, le gras s'y elargit sans rien deplacer autour. Le focus clavier est traite avec le survol, sans quoi la mise en valeur n'existerait qu'a la souris. */ .plan-du-site a,.plan-du-site button{transition:color .18s ease} .plan-du-site a:hover,.plan-du-site a:focus-visible, .plan-du-site button:hover,.plan-du-site button:focus-visible{ color:var(--brand-jaune); font-weight:700; } @media (prefers-reduced-motion:reduce){ .plan-du-site a,.plan-du-site button{transition-duration:.01ms} } /* Cartes « Ce que nous faisons » (§4quinquies) : titre seul en bas au repos, description devoilee au survol (demande du client, 18/08). LE RANG QUI S'OUVRE. Le bloc de texte est une grille de deux rangs : le titre en auto, la description en 0fr qui passe a 1fr. Le contenu etant colle en bas de la carte, l'ouverture du second rang POUSSE le titre vers le haut — c'est le mouvement demande, et il ne coute aucune valeur en dur : rien ne dit ici combien de lignes fait une description. min-height:0 et overflow:hidden sur le paragraphe sont indispensables : sans eux, la hauteur minimale automatique d'un element de grille l'empeche de descendre sous sa hauteur de contenu, et le rang a 0fr resterait ouvert. SI LE NAVIGATEUR N'ANIME PAS grid-template-rows (avant Chrome 107, Safari 17.2, Firefox 120), la description apparait d'un coup au lieu de se derouler. Le contenu reste accessible, seul le fondu disparait : c'est une degradation acceptable, pas une panne. AU TOUCHER, TOUT EST OUVERT. Il n'y a pas de survol au doigt : laisser la description derriere un :hover la rendrait inatteignable sur telephone. Sous pointer:coarse les cartes sont donc affichees ouvertes en permanence. :focus-within accompagne :hover : la carte est un