/* ============================================================================ FONTAINE FORMATIONS - STRUCTURE ET COMPOSANTS ============================================================================ Cette feuille tient la mise en page et les composants. Elle doit suffire : le site est complet, lisible et navigable sans une seule ligne de visuels.css, qui n'ajoute que de la profondeur et du mouvement. ========================================================================= */ /* ---------------------------------------------------------------------------- 1. REMISE A ZERO ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background-color: var(--ff-sol); color: var(--ff-encre); font-family: var(--ff-police-corps); font-size: var(--ff-txt-corps); line-height: var(--ff-interligne-corps); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg, video { display: block; max-inline-size: 100%; } img, video { block-size: auto; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } /* ---------------------------------------------------------------------------- 2. LA COLONNE, ECRITE UNE SEULE FOIS ---------------------------------------------------------------------------- C'est le correctif du piege le plus discret d'un gabarit, et il est pose ici PLUTOT QUE COMPOSANT PAR COMPOSANT. Deux facons de tenir une colonne cohabitent d'ordinaire dans un theme : une trame de grille dont la gouttiere passe dans des PISTES a cote de la colonne, et une bande qui court bord a bord dont la gouttiere passe en REMPLISSAGE a l'interieur d'une largeur maximale. Avec box-sizing: border-box, la seconde se prend le remplissage SUR sa largeur maximale au lieu de l'ajouter a cote : son contenu commence donc une gouttiere plus loin que celui de la premiere. Mesure faite sur le site precedent, fenetre de 1427 px : 37,5 px d'ecart de chaque cote, soit exactement une gouttiere, entre le titre d'une section et le lettrage de l'en-tete. Le nom du site et le premier lien du menu etaient en retrait de tout le reste de la page, a toutes les largeurs de bureau. ICI, TOUT EST UNE BANDE. En-tete, pied, entete de section, grille, colonne de page : tous portent la MEME largeur maximale et le MEME remplissage. Il n'y a donc plus deux facons de tenir une colonne, il n'y en a qu'une, et rien ne peut plus diverger. Le controle qui prend dix secondes, a trois ou quatre largeurs : const g = s => Math.round(document.querySelector(s).getBoundingClientRect().left * 10) / 10; g('.bloc__titre') === g('.entete__lettrage') // doit etre vrai ------------------------------------------------------------------------- */ .entete__interieur, .pied__interieur, .pied__mention, .bloc__entete, .bloc__appui, .grille, .etapes, .chiffres, .appel, .corps-page__colonne, .hero__texte, .banniere__texte, .fiche__reperes, .fiche__corps, .fiche__appel, .billet__corps, .billet__figure, .billet__citees, .voisins, .billet__retour, .dossier__section, .filtres, .compte, .pagination, .plan, .vide, .resultats, .recherche, .contact, .bloc__suite, .bloc__colonne, .bande__colonne { inline-size: 100%; max-inline-size: var(--ff-bande-max); margin-inline: auto; padding-inline: var(--ff-gouttiere); } .corps-page__colonne--large { max-inline-size: calc(var(--ff-contenu-large-max) + var(--ff-gouttiere) * 2); } /* * UNE COLONNE DANS UNE COLONNE N'EST PLUS UNE COLONNE. * * C'est le corollaire de la regle ci-dessus, et il a coute un debordement. * * La liste precedente nomme tous les elements qui TIENNENT la colonne. Certains * sont des enfants directs d'une section, d'autres sont a l'interieur d'une * colonne de page : « .grille » est l'un et l'autre selon le gabarit. Quand * deux d'entre eux s'imbriquent, chacun pose sa gouttiere ET reclame la meme * largeur maximale. On obtient donc deux gouttieres cumulees et une largeur * demandee superieure a celle du parent. * * Mesure au navigateur, fenetre de 1207 px : la grille du catalogue s'etendait * de 37 a 1310,9 px, soit 1 273,9 px de large pour 1 207 disponibles. CENT * DIX-NEUF PIXELS HORS DE LA FENETRE, et une barre de defilement horizontale * sur toutes les pages construites sur « corps-page ». * * Le defaut n'apparait qu'en dessous d'environ 1 280 px : a 1 440, la largeur * maximale n'est pas atteinte et rien ne deborde. C'est exactement le genre de * chose qu'on ne voit pas en regardant une maquette a une seule largeur. * * La regle ci-dessous rend l'imbrication inoffensive : la colonne interieure * abandonne sa largeur maximale et sa gouttiere, et se contente de celles de * la colonne qui la porte. Ecrite UNE fois, avec les deux memes listes, elle ne * peut pas diverger. * * `:is()` ET NON `:where()`, et c'est le deuxieme temps du meme defaut. * * La premiere version employait `:where()`, qui ne pese rien. La regle de base * pese (0,1,0) : la regle de de-imbrication, a (0,0,0), perdait donc toujours, * quel que soit son ordre dans la feuille. Elle etait ecrite, elle etait juste, * et elle ne s'appliquait a rien. Mesure au navigateur : les 119 px de * debordement etaient toujours la apres correction. * * `:is()` prend le poids de son argument le plus lourd : deux `:is()` a la * suite pesent (0,2,0) et l'emportent. Une regle qui doit ANNULER une autre ne * peut pas etre plus legere qu'elle. */ :is( .entete__interieur, .pied__interieur, .pied__mention, .bloc__entete, .bloc__appui, .grille, .etapes, .chiffres, .appel, .corps-page__colonne, .hero__texte, .banniere__texte, .fiche__reperes, .fiche__corps, .fiche__appel, .billet__corps, .billet__figure, .billet__citees, .voisins, .billet__retour, .dossier__section, .filtres, .compte, .pagination, .plan, .vide, .resultats, .recherche, .contact, .bloc__suite, .bande__colonne, .bloc__colonne ) :is( .entete__interieur, .pied__interieur, .pied__mention, .bloc__entete, .bloc__appui, .grille, .etapes, .chiffres, .appel, .corps-page__colonne, .hero__texte, .banniere__texte, .fiche__reperes, .fiche__corps, .fiche__appel, .billet__corps, .billet__figure, .billet__citees, .voisins, .billet__retour, .dossier__section, .filtres, .compte, .pagination, .plan, .vide, .resultats, .recherche, .contact, .bloc__suite, .bande__colonne, .bloc__colonne ) { max-inline-size: none; padding-inline: 0; margin-inline: 0; } /* ---------------------------------------------------------------------------- 3. TYPOGRAPHIE ---------------------------------------------------------------------------- Les titres sont composes en ARCHIVO, a chasse etroite et en capitales pour les plus grands : c'est l'ecriture de la signaletique de securite, celle d'un panneau « SORTIE DE SECOURS ». La police ne decore pas le sujet, elle le parle. ------------------------------------------------------------------------- */ .hero__titre, .banniere__titre, .bloc__titre, .appel__titre, .dossier__titre, .reference__titre, .vide__titre, .confirmation__titre, .verrou__titre { font-family: var(--ff-police-titre); font-weight: 800; font-stretch: var(--ff-chasse-etroite); line-height: var(--ff-interligne-titre); letter-spacing: var(--ff-lettrage-serre); text-transform: uppercase; text-wrap: balance; } .carte__titre, .domaine__titre, .etape__titre, .terrain__titre, .apport__titre, .chrono__titre, .fiche__titre, .plan__titre, .pied__titre, .encart__titre, .resultat__titre, .contact__titre { font-family: var(--ff-police-titre); font-weight: 700; font-stretch: 92%; line-height: 1.18; letter-spacing: var(--ff-lettrage-serre); margin: 0; } /* Les mentions techniques : des donnees, pas de la prose. */ .technique, .hero__repere, .carte__duree, .repere__valeur, .chiffre__valeur, .etape__rang, .chrono__periode, .filtres__compte, .reference__date, .carte__date, .pagination__position, .compte, .resultat__type, .banniere__surtitre, .hero__surtitre, .carte__domaine, .pied__etiquette, .fiche__etiquette, .voisin__sens, .reference__lieu { font-family: var(--ff-police-technique); font-weight: 500; letter-spacing: var(--ff-lettrage-ouvert); font-size: var(--ff-txt-petit); text-transform: uppercase; } .visuellement-cache { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------------------------------------------------------------------------- 4. LE GESTE SIGNATURE : LA HACHURE DE SECURITE ---------------------------------------------------------------------------- UN SEUL TRACE, A UN SEUL ENDROIT. Le dessin est isole dans cette regle unique, et tous ses emplois la reprennent. Aucune ligne de motif n'est recopiee ailleurs dans la feuille. LE SENS N'EST PAS NEGOCIABLE : les bandes MONTENT de gauche a droite, comme sur une barriere de chantier et sur le marquage au sol devant un extincteur. Des bandes qui descendraient ne seraient plus le meme signal. ELLE NE PORTE JAMAIS D'INFORMATION. Toujours un pseudo-element, donc absente de l'arbre d'accessibilite, donc supprimable sans rien retirer au document. C'est ce qui autorise a l'animer, et a l'eteindre en contraste renforce. POUR LA REDUIRE, ON CHANGE SES GRANDEURS, JAMAIS SON ECHELLE. Sous une entree de menu elle passe de 20/10 px a 8/4. Le rapport trait = pas / 2 est conserve, donc l'angle reste a 45 degres et le motif reste exactement le meme, simplement vu de plus loin. Un transform: scale() aurait amaigri les bandes et brouille les aretes. ELLE SE DEROULE PAR clip-path, JAMAIS PAR scaleX. Une mise a l'echelle horizontale ETIRE ce qu'elle revele : sur un trait plein cela ne se voit pas, sur un motif cela aplatit les bandes puis les laisse reprendre leur forme. C'est une fenetre qui s'ouvre sur le motif, pas le motif qui grandit. ------------------------------------------------------------------------- */ .hachure, .entete__lien::after, .navigation__lien::before, .pied::before, .banniere::after, .appel::before, .carte__vignette::after, .reference::before, .verrou__panneau::before { background-image: repeating-linear-gradient( 135deg, var(--ff-hachure-teinte) 0, var(--ff-hachure-teinte) var(--ff-hachure-trait), var(--ff-hachure-fond) var(--ff-hachure-trait), var(--ff-hachure-fond) var(--ff-hachure-pas) ); } /* ---------------------------------------------------------------------------- 5. LE LIEN D'EVITEMENT ------------------------------------------------------------------------- */ .lien-evitement { position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: var(--ff-plan-evitement); padding: var(--ff-esp-3) var(--ff-esp-5); background-color: var(--ff-encre); color: var(--ff-sol-releve); font-weight: 600; text-decoration: none; transform: translateY(-120%); } .lien-evitement:focus-visible { transform: translateY(0); outline: var(--ff-filet-plaque) solid var(--ff-signal); outline-offset: -6px; } /* ---------------------------------------------------------------------------- 6. L'EN-TETE : LA BARRE FLOTTANTE ---------------------------------------------------------------------------- L'en-tete etait une bande collee en haut, pleine largeur, avec le menu deploye a droite. C'est maintenant une PLAQUE : une barre arrondie en retrait des quatre bords, posee PAR-DESSUS le contenu. TROIS CONSEQUENCES, ET ELLES SONT TOUTES VOULUES. 1. La page commence SOUS la barre, pas apres elle. Le hero et les bannieres remontent donc jusqu'en haut de la fenetre et passent dessous : c'est ce qui donne a la barre son air de flotter. Les pages sans banniere, elles, reservent la hauteur en remplissage — sans quoi leur premier titre passerait derriere. 2. La barre est PRESQUE OPAQUE, et ce n'est pas une timidite. Une barre transparente posee sur une video fait dependre la lisibilite de son lettrage de l'image qui defile dessous — c'est-a-dire d'une variable qu'on ne controle pas. A 0,92 d'opacite plus un flou, le texte est sur du blanc, et son contraste est le meme a la seconde 0 et a la seconde 8. 3. Le menu ne tient plus a l'horizontale et n'a plus a le faire : il passe derriere un bouton a TOUTES les largeurs. Voir section 7. ------------------------------------------------------------------------- */ /* * LA BARRE S'ANCRE AU DEFILEMENT, ET SON RAYON BASCULE. * * C'est le geste qu'on ne remarque qu'en le cherchant, et c'est lui qui donne * son caractere a la barre : * * AU REPOS elle flotte en retrait du haut, arrondie EN HAUT seulement. * Le bas reste droit : elle a l'air posee sur la page, pas * detachee d'elle. * * AU DEFILEMENT elle vient se coller au bord superieur de la fenetre, et son * arrondi BASCULE EN BAS. Elle a alors l'air suspendue au bord * de l'ecran. * * Un rayon sur les quatre coins, comme dans la premiere version, donne une * pastille qui flotte au milieu de rien. La bascule, elle, raconte d'ou la * barre vient et ou elle va. * * L'ANCRAGE EST POSE PAR LE SCRIPT (classe est-ancree), et c'est un CONFORT : * sans script, la barre reste a l'etat de repos, en retrait et arrondie en * haut. Elle est fixe de toute facon, donc rien n'est perdu — ni la * navigation, ni le numero, ni le devis. */ .entete { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--ff-plan-entete); padding: var(--ff-rayon-barre) var(--ff-gouttiere) 0; pointer-events: none; /* la zone morte autour de la plaque laisse passer */ transition: padding-block-start 220ms ease; } .entete.est-ancree { padding-block-start: 0; } .entete__barre { pointer-events: auto; max-inline-size: var(--ff-contenu-large-max); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--ff-esp-4); padding: var(--ff-esp-3) var(--ff-esp-4); /* * LE RAYON N'EST PAS SUR LES QUATRE COINS. Voir la note de .entete * ci-dessus : en haut au repos, en bas une fois ancree. */ border-radius: var(--ff-rayon-barre) var(--ff-rayon-barre) 0 0; /* * LE FOND EST A 0,90, ET CETTE VALEUR EST LE RESULTAT D'UN TABLEAU. * * La barre etait a 0,96 : presque opaque, donc lisible a coup sur, mais * lourde. Elle ne flottait plus sur la video, elle la cachait. * * Ce qui l'empechait de s'alleger, c'est le mot « Fontaine ». Une barre * translucide n'a pas UN fond, elle en a autant que la video en a * d'images : le pire cas est la barre posee sur du noir pur, et c'est * celui-la qu'il faut tenir, pas la moyenne. * * CONTRASTE DU LETTRAGE SUR LE PIRE LIT, calcule pour chaque combinaison : * * 0,86 0,88 0,90 0,92 0,94 * #c43839 (la carte) 3,83 4,02 4,22 4,42 4,63 * #b8302f (fonctionnel) 4,34 4,56 4,78 5,01 5,25 * * Le rouge EXACT de la carte de visite ne passe qu'a partir de 0,94, et * encore, avec treize centiemes de marge : c'est la barre lourde qu'on * voulait quitter. Le rouge FONCTIONNEL passe des 0,88 et tient * confortablement a 0,90. * * Le jeu de couleurs prevoyait deja cette distinction : le rouge exact est * reserve a ce qui est « compose en grand », le fonctionnel sert partout * ailleurs. Un lettrage de 19 px n'est pas du grand corps — il relevait du * second depuis le debut, et personne ne voit la difference de teinte. * * Le flou reste un CONFORT, jamais un moyen de tenir le contraste. Les * moteurs qui ne savent pas flouter rendent la meme barre, un peu moins * jolie et exactement aussi lisible. */ background-color: rgb(255 255 255 / 0.90); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-radius 220ms ease; } /* * L'ombre est retiree : une barre qui porte a la fois un fond translucide, un * flou ET une ombre portee accumule trois signaux pour dire une seule chose. * Le flou suffit a la decoller de ce qui passe dessous. */ .entete.est-ancree .entete__barre { border-radius: 0 0 var(--ff-rayon-barre) var(--ff-rayon-barre); } /* ---------- L'enseigne, au centre ---------- */ .entete__enseigne { grid-column: 2; margin: 0; display: flex; justify-content: center; min-inline-size: 0; } .entete__lien { display: inline-flex; align-items: center; gap: var(--ff-esp-3); text-decoration: none; color: inherit; border-radius: var(--ff-rayon-menu); } .entete__enseigne > .entete__marque, .entete__lien { min-inline-size: 0; } .entete__enseigne:not(:has(.entete__lien)) { display: flex; align-items: center; gap: var(--ff-esp-3); } .entete__marque { display: inline-flex; flex: 0 0 auto; } .entete__marque img { display: block; inline-size: 40px; block-size: 40px; } .entete__lettrage { display: inline-flex; align-items: baseline; gap: 0.3em; white-space: nowrap; font-family: var(--ff-police-titre); font-size: var(--ff-txt-large); line-height: 1; } .entete__mot { /* Le rouge FONCTIONNEL, et non celui de la carte : voir la note du fond. */ color: var(--ff-le-incendie); font-weight: 400; letter-spacing: 0.01em; } .entete__mot--appui { color: var(--ff-marque-bleu); font-weight: 700; font-style: italic; letter-spacing: -0.01em; } .entete__lien:hover .entete__mot, .entete__lien:focus-visible .entete__mot { color: var(--ff-le-incendie); } /* ---------- Les outils, a droite ---------- */ /* * LE LIBELLE DU DEVIS NE SE COUPE JAMAIS. * * DEFAUT MESURE a 1 191 px : « DEMANDER UN DEVIS » passait sur deux lignes, * et la barre entiere grandissait de 76 a 100 px pour l'accueillir. Une barre * qui change de hauteur selon la largeur de la fenetre n'est plus une barre, * c'est un bloc de texte avec un fond. * * Le defaut n'apparaissait qu'entre 768 et 1 280 px : au-dessus il y a la * place, en dessous le libelle est deja replie. C'est exactement la bande de * largeurs qu'on ne regarde pas, parce qu'on teste « bureau » et * « telephone ». */ .commande--menu { white-space: nowrap; } .entete__outils { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: var(--ff-esp-2); min-inline-size: 0; } .entete__tel { display: inline-flex; align-items: center; gap: var(--ff-esp-2); min-block-size: var(--ff-cible-min); padding-inline: var(--ff-esp-3); border-radius: var(--ff-rayon-pilule); color: var(--ff-marque-bleu); text-decoration: none; font-family: var(--ff-police-technique); font-size: var(--ff-txt-petit); font-weight: 600; letter-spacing: var(--ff-lettrage-ouvert); white-space: nowrap; } .entete__tel:hover, .entete__tel:focus-visible { background-color: var(--ff-sol-creux); } .entete__icone { flex: 0 0 auto; } /* ---------- Le combine sonne au survol ---------- */ /* * LE MOUVEMENT DIT CE QUE LE LIEN FAIT, IL NE DECORE PAS. * * L'icone est un COMBINE. On la fait donc sonner : une brève secousse en * rotation, exactement le geste d'un telephone qui vibre. Un simple decalage * lateral ou un agrandissement auraient anime la meme icone sans rien dire de * plus qu'un survol deja signale par le fond. * * ELLE NE TOURNE PAS EN BOUCLE, et c'est la decision qui compte. Cette barre * est FIXE : elle reste a l'ecran du haut en bas de chaque page. Une animation * qui se repeterait tant que la souris passe dessus deviendrait un point qui * bouge en permanence dans le champ de vision — le genre de detail qui rend un * site fatigant sans qu'on sache dire pourquoi. Elle joue une fois, en six * dixiemes de seconde, et s'arrete. * * L'AMPLITUDE DECROIT (12, 10, 8, 6, 3 degres) au lieu d'osciller a valeur * constante : c'est ce que fait un objet qu'on lache, et l'oeil le reconnait * comme un mouvement physique plutot que comme une boucle de code. * * ELLE JOUE AUSSI AU FOCUS CLAVIER, et pas seulement au survol : quelqu'un qui * navigue a la tabulation a droit au meme retour que quelqu'un qui a une * souris. C'est une ligne de plus, et son absence est un oubli classique. * * RIEN A DESACTIVER POUR LE MOUVEMENT REDUIT : la regle globale de la * section 28 ramene deja toute animation a 0,01 ms. L'icone se contente alors * de ne pas bouger, et le fond du lien continue de signaler le survol. */ @keyframes ff-sonnerie { 0%, 100% { transform: rotate(0deg); } 12% { transform: rotate(-12deg); } 26% { transform: rotate(10deg); } 40% { transform: rotate(-8deg); } 54% { transform: rotate(6deg); } 70% { transform: rotate(-3deg); } 85% { transform: rotate(1deg); } } .entete__tel:hover .entete__icone, .entete__tel:focus-visible .entete__icone { /* * L'origine est le centre du combine et non celui de la boite : le trace * occupe le quart bas gauche du carre de 24, et une rotation autour du * centre geometrique le ferait pivoter de travers. */ transform-origin: 45% 55%; animation: ff-sonnerie 620ms ease-in-out; } /* ---------------------------------------------------------------------------- 7. LE MENU : UN
, ET SON PANNEAU ---------------------------------------------------------------------------- POURQUOI UN
ET PAS UN BOUTON PILOTE PAR SCRIPT. Depuis la refonte, ce panneau est LE seul acces aux pages du site. Un panneau ouvert par un script, c'est une navigation qui disparait entierement des que le script ne s'execute pas : reseau coupe en cours de chargement, extension qui bloque, erreur ailleurs dans le fichier. Sur un site vitrine, c'est un site mort.
/ ouvre et ferme sans une ligne de script, au clic comme au clavier, et annonce son etat replie ou deploye sans qu'on ait rien a declarer. Le script n'ajoute que le confort : echappement, clic exterieur, blocage du defilement dessous. LE MARQUEUR NATIF EST RETIRE de trois facons differentes, parce que trois moteurs le dessinent differemment et qu'aucune des trois ne suffit seule. ------------------------------------------------------------------------- */ .menu { grid-column: 1; justify-self: start; position: relative; } /* * LE BOUTON N'A PLUS DE FOND, ET IL N'EN AVAIT PAS BESOIN. * * Il portait une pilule anthracite pleine. Dans une barre qui est deja une * plaque posee sur la page, c'etait un deuxieme objet dans le premier : deux * formes fermees emboitees, dont l'une n'ouvre rien. Le mot et le dessin * suffisent a dire ce que le bouton fait. * * L'AFFORDANCE PASSE AU SURVOL, et elle reprend exactement celle du telephone * juste a cote : un fond tres leger sur la teinte creuse du papier. Deux * commandes voisines qui reagissent de la meme facon se lisent comme un meme * type d'objet. * * LA CIBLE RESTE CARREE A 44 px. Sans fond, rien ne dessine plus l'etendue du * bouton : c'est min-inline-size qui la tient, pas le remplissage. */ .menu__bouton { display: inline-flex; align-items: center; justify-content: center; gap: var(--ff-esp-3); min-block-size: var(--ff-cible-min); min-inline-size: var(--ff-cible-min); padding-inline: var(--ff-esp-3); border-radius: var(--ff-rayon-pilule); background-color: transparent; color: var(--ff-encre); font-family: var(--ff-police-titre); font-size: var(--ff-txt-appui); font-weight: 600; letter-spacing: var(--ff-lettrage-ouvert); text-transform: uppercase; cursor: pointer; list-style: none; /* Firefox */ user-select: none; } .menu__bouton::-webkit-details-marker { display: none; } /* Safari, Chrome ancien */ .menu__bouton::marker { content: ''; } /* la norme */ .menu__bouton:hover, .menu__bouton:focus-visible { background-color: var(--ff-sol-creux); } /* ---------- Le burger : trois traits, dont deux dessines ---------- */ /* * Le trait du milieu est un vrai element ; les deux autres sont ses * pseudo-elements. Trois auraient fait trois fois le meme travail. * * LES TROIS TRAITS SONT DECLARES ENSEMBLE, UNE SEULE FOIS. La largeur, la * hauteur et la couleur sont ecrites dans un unique bloc qui vise les trois : * c'est la seule facon de garantir qu'ils ne peuvent pas diverger. Trois * declarations separees, c'est trois occasions d'en corriger une et d'oublier * les deux autres. * * L'ECART EST UNE VARIABLE, et il sert a deux endroits : a poser les traits * exterieurs au repos, et a les ramener au centre a l'ouverture. Ecrit en dur, * il faudrait le changer a quatre endroits et la croix se decalerait au * premier oubli. */ .menu__burger { position: relative; inline-size: 20px; block-size: 14px; flex: 0 0 auto; --ff-trait-ecart: 6px; } .menu__trait, .menu__trait::before, .menu__trait::after { position: absolute; inset-inline-start: 0; inline-size: 20px; block-size: 2px; background-color: currentColor; transition: transform 200ms ease, background-color 120ms ease; } .menu__trait { inset-block-start: var(--ff-trait-ecart); } .menu__trait::before { content: ''; inset-block-start: calc(var(--ff-trait-ecart) * -1); } .menu__trait::after { content: ''; inset-block-start: var(--ff-trait-ecart); } /* * A L'OUVERTURE, LE MILIEU S'EFFACE PAR SA COULEUR, JAMAIS PAR SON OPACITE. * * DEFAUT CORRIGE, ET IL EST DE CEUX QU'ON REFAIT : la version precedente * posait « opacity: 0 » sur le trait du milieu, puis « opacity: 1 » sur ses * deux pseudo-elements pour les rattraper. Cela ne marche pas, et cela ne peut * pas marcher. * * L'opacite ne se transmet pas comme une couleur : elle cree un GROUPE de * composition, et tout ce que l'element contient — pseudo-elements inclus — * est aplati dedans avant d'etre rendu. Un enfant ne peut pas redevenir opaque * dans un parent transparent : la regle est ecrite, elle est lue, et elle n'a * aucun effet. La croix ne s'affichait donc jamais. * * « background-color: transparent » ne touche que la surface de l'element * lui-meme. Les deux pseudo-elements gardent la leur, pivotent, et forment la * croix. */ .menu[open] .menu__trait { background-color: transparent; } .menu[open] .menu__trait::before { transform: translateY(var(--ff-trait-ecart)) rotate(45deg); } .menu[open] .menu__trait::after { transform: translateY(calc(var(--ff-trait-ecart) * -1)) rotate(-45deg); } /* ---------- Le panneau ---------- */ .menu__panneau { position: fixed; inset-block-start: calc(var(--ff-rayon-barre) + var(--ff-cible-min) + var(--ff-esp-3) * 2 + var(--ff-esp-2)); inset-inline: var(--ff-gouttiere); z-index: var(--ff-plan-entete); max-block-size: calc(100dvh - var(--ff-esp-9)); overflow-y: auto; overscroll-behavior: contain; padding: var(--ff-esp-6); border-radius: var(--ff-rayon-plaque); background-color: var(--ff-sol-releve); box-shadow: var(--ff-ombre-levee); } /* * LE PANNEAU EST CENTRE SUR LA MEME COLONNE QUE LA BARRE, et pas sur la * fenetre : sur un tres grand ecran, un panneau ancre au bord gauche partirait * seul dans un coin pendant que la barre reste centree. */ @media (min-width: 90rem) { .menu__panneau { inline-size: min(var(--ff-contenu-large-max), 100% - var(--ff-gouttiere) * 2); inset-inline: 0; margin-inline: auto; } } .menu__colonnes { display: grid; gap: var(--ff-esp-7); grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); align-items: start; } .menu__bloc { display: grid; gap: var(--ff-esp-4); align-content: start; } .menu__titre { font-family: var(--ff-police-technique); font-size: var(--ff-txt-petit); font-weight: 600; letter-spacing: var(--ff-lettrage-large); text-transform: uppercase; color: var(--ff-encre-tenue); } .menu__liste { display: grid; gap: var(--ff-esp-2); } .menu__liste--simple { gap: 0; } .menu__lien { display: flex; align-items: center; gap: var(--ff-esp-3); min-block-size: var(--ff-cible-min); padding: var(--ff-esp-2) var(--ff-esp-3); margin-inline-start: calc(var(--ff-esp-3) * -1); border-radius: var(--ff-rayon-menu); text-decoration: none; color: var(--ff-encre); font-size: var(--ff-txt-corps); } .menu__lien:hover, .menu__lien:focus-visible { background-color: var(--ff-sol); } /* * L'ICONE DU DOMAINE PREND LA COULEUR DU DOMAINE, et pas une couleur unique. * C'est la meme mecanique que partout ailleurs sur le site : data-domaine * recalcule --ff-accent, et l'icone hérite. Un seul jeu de regles pour quatre * couleurs. */ .menu__icone { flex: 0 0 auto; color: var(--ff-accent, var(--ff-marque-bleu)); } .menu__lien-texte { display: grid; gap: 2px; min-inline-size: 0; } .menu__lien-nom { font-weight: 600; } .menu__lien-phrase { font-size: var(--ff-txt-petit); color: var(--ff-encre-tenue); line-height: 1.35; } .menu__suite { margin-block-start: calc(var(--ff-esp-2) * -1); } /* ---------- La carte d'appel du panneau ---------- */ .menu__carte { display: grid; gap: var(--ff-esp-3); padding: var(--ff-esp-5); border-radius: var(--ff-rayon-carte); background-color: var(--ff-marque-bleu); color: var(--ff-encre-claire); } .menu__carte-titre { font-family: var(--ff-police-titre); font-size: var(--ff-txt-large); font-weight: 700; } .menu__carte-texte { font-size: var(--ff-txt-appui); color: rgb(255 255 255 / 0.86); } .menu__carte-commandes { display: flex; flex-wrap: wrap; gap: var(--ff-esp-2); } /* * Dans la carte marine, la commande claire est un contour BLANC : le contour * par defaut est marine, et marine sur marine ne se voit pas. */ .menu__carte .commande--claire { border-color: rgb(255 255 255 / 0.5); color: var(--ff-encre-claire); background-color: transparent; } .menu__carte .commande--claire:hover { background-color: rgb(255 255 255 / 0.12); } /* ---------- Le voile derriere le panneau ---------- */ /* * IL EST ACCROCHE A L'EN-TETE, ET NON AU
. DEFAUT VU A L'ECRAN. * * Premiere version : un ::after sur le
ouvert, en z-index -1. Le *
vit DANS la barre, et la barre a son propre contexte * d'empilement : le voile se retrouvait donc au-dessus du fond de la barre au * lieu d'etre dessous. Resultat, la barre virait au gris des qu'on ouvrait le * menu, et le lettrage de la marque avec elle. * * Un z-index negatif ne fait pas passer un element derriere n'importe quoi : * il le fait passer derriere ce qui se trouve DANS LE MEME CONTEXTE. C'est le * genre de defaut qu'on ne voit pas en lisant la regle, seulement en ouvrant * le menu. * * Il est donc pose sur l'en-tete, qui est le contexte englobant, et la barre * remonte d'un cran au-dessus de lui. Toujours aucun element de plus dans le * document, et il disparait tout seul a la fermeture. * * IL NE CAPTE PAS LE CLIC : c'est le script qui ferme au clic exterieur, et * sans script on ferme par le bouton, qui reste au-dessus. * * Les moteurs sans `:has()` n'affichent pas de voile. Le menu s'ouvre, se lit * et se ferme exactement pareil : on perd l'assombrissement du fond, rien * d'autre. */ .entete:has(.menu[open])::before { content: ''; position: fixed; inset: 0; z-index: 0; background-color: rgb(20 24 27 / 0.45); pointer-events: none; } .entete__barre { position: relative; z-index: 1; } /* ---------- Ce qui tombe sur ecran etroit ---------- */ /* * UNE ICONE DANS UNE COMMANDE NE SE COMPRIME JAMAIS. * * DEFAUT MESURE, a 414 px de large : l'icone du devis rendait 4 px de large * pour 18 de haut. Un SVG place dans un conteneur flex est comprimable par * defaut ; des que le libelle disparait et que le remplissage se resserre, le * moteur prend sur la seule chose qui accepte de retrecir — le dessin. * * Le defaut ne se voit pas a l'oeil sur une planche-contact : l'icone est * toujours la, elle est simplement devenue un trait. Il se mesure. * * La regle vaut pour TOUTES les commandes du site, pas seulement celle-ci : * partout ou une icone accompagne un mot, le mot peut disparaitre en etroit. */ .commande__signe, .entete__icone, .menu__icone, .coord__icone { flex: 0 0 auto; } @media (max-width: 61.99rem) { .entete__tel-numero { display: none; } /* * LA CIBLE RESTE CARREE A 44 px UNE FOIS LE NUMERO RETIRE. * * Mesure : 36 x 44. C'est au-dessus du plancher absolu de 24 px du critere * 2.5.8, donc conforme AA — et en dessous des 44 px que le site vise, qui * sont ceux du critere 2.5.5. Sur un telephone tenu d'une main, trente-six * pixels de large pour un lien qui DECLENCHE UN APPEL, ce n'est pas assez : * l'erreur coute un appel non voulu. */ .entete__tel { padding-inline: var(--ff-esp-2); min-inline-size: var(--ff-cible-min); justify-content: center; } } /* * LE BLOC D'ECRAN ETROIT DE L'EN-TETE A DEMENAGE EN FIN DE FEUILLE. * * Il etait ecrit ici, et il ne s'appliquait qu'a moitie. « .commande--menu » * et « .commande » pesent le meme poids (0,1,0) : entre deux regles de meme * specificite, c'est la DERNIERE ECRITE qui gagne. La regle de base des * commandes vit en section 8, donc apres celle-ci : le remplissage de 24 px y * survivait au resserrement demande. * * Consequence mesuree a 414 px : le bouton faisait 51 px de large pour 48 px * de remplissage. Il restait 3 px pour le dessin, et l'icone rendait ZERO * pixel de large pour 18 de haut. Le bouton paraissait plein, il etait vide. * * Voir la section 32, en fin de fichier. */ /* * En dessous de 26 rem, l'enseigne complete ne tient plus entre le bouton et * les outils. Le lettrage sort, le logo reste : il est reconnaissable seul, et * le lien garde son nom accessible. */ @media (max-width: 25.99rem) { .entete__lettrage { display: none; } } /* ---------------------------------------------------------------------------- 8. LES COMMANDES ---------------------------------------------------------------------------- LE SITE NE PARLE QU'UNE SEULE FORME : L'ANGLE DROIT. Ce qui distingue une commande d'un contenant n'est donc pas son arrondi, c'est sa MATIERE (un fond plein, un filet de deux pixels, comme une plaque vissee) et son MOUVEMENT (la hachure s'y deroule au survol ET au focus clavier). ------------------------------------------------------------------------- */ .commande { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--ff-esp-2); min-block-size: var(--ff-cible-min); padding: var(--ff-esp-3) var(--ff-esp-5); border: var(--ff-filet-epais) solid var(--ff-marque-bleu); background-color: var(--ff-marque-bleu); color: var(--ff-sol-releve); font-family: var(--ff-police-titre); font-size: var(--ff-txt-appui); font-weight: 700; font-stretch: 92%; letter-spacing: var(--ff-lettrage-ouvert); text-transform: uppercase; text-decoration: none; cursor: pointer; overflow: hidden; transition: background-color var(--ff-duree-courte) var(--ff-courbe), color var(--ff-duree-courte) var(--ff-courbe); } /* La hachure qui se deroule dans la commande. Purement decorative. */ .commande::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 5px; --ff-hachure-pas: 10px; --ff-hachure-trait: 5px; --ff-hachure-fond: transparent; --ff-hachure-teinte: currentColor; background-image: repeating-linear-gradient( 135deg, var(--ff-hachure-teinte) 0, var(--ff-hachure-teinte) var(--ff-hachure-trait), var(--ff-hachure-fond) var(--ff-hachure-trait), var(--ff-hachure-fond) var(--ff-hachure-pas) ); clip-path: inset(0 100% 0 0); transition: clip-path var(--ff-duree) var(--ff-courbe); pointer-events: none; } .commande:hover::after, .commande:focus-visible::after { clip-path: inset(0 0 0 0); } .commande--pleine:hover, .commande--pleine:focus-visible { background-color: var(--ff-le-incendie); border-color: var(--ff-le-incendie); } .commande--claire { background-color: var(--ff-sol-releve); color: var(--ff-encre); border-color: var(--ff-encre); } .commande--claire:hover, .commande--claire:focus-visible { background-color: var(--ff-sol-creux); } .commande--fine { padding: var(--ff-esp-2) var(--ff-esp-4); background-color: transparent; color: var(--ff-encre); font-size: var(--ff-txt-petit); } .commande--fine:hover, .commande--fine:focus-visible { background-color: var(--ff-marque-bleu); color: var(--ff-sol-releve); } .commande--large { padding-inline: var(--ff-esp-6); font-size: var(--ff-txt-corps); } .commande__signe { flex: 0 0 auto; } /* * UN BOUTON POSE SUR UNE IMAGE PORTE SON PROPRE FOND, OPAQUE. * Un bouton transparent est excellent sur un aplat ; sur une image il n'a plus * de surface, seulement un contour, et son texte s'ecrit sur ce qui passe * derriere. */ .hero .commande, .banniere .commande { background-color: var(--ff-marque-bleu); } .hero .commande--claire, .banniere .commande--claire { background-color: var(--ff-sol-releve); } /* ---------- Les liens de suite ---------- */ .lien-suite { display: inline-flex; align-items: center; gap: var(--ff-esp-2); min-block-size: var(--ff-cible-min); font-family: var(--ff-police-titre); font-weight: 700; font-stretch: 92%; letter-spacing: var(--ff-lettrage-ouvert); text-transform: uppercase; font-size: var(--ff-txt-appui); text-decoration: none; color: var(--ff-accent); } .lien-suite__mot { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 2px; } .lien-suite__signe { transition: transform var(--ff-duree) var(--ff-courbe); } .lien-suite:hover .lien-suite__signe, .lien-suite:focus-visible .lien-suite__signe { transform: translateX(6px); } .lien-suite--retour:hover .lien-suite__signe, .lien-suite--retour:focus-visible .lien-suite__signe { transform: translateX(-6px); } .bloc__suite { margin-block-start: var(--ff-esp-6); } /* ---------------------------------------------------------------------------- 9. LE FOCUS ---------------------------------------------------------------------------- Visible, contraste, et JAMAIS supprime. Le jaune d'avertissement est ici a sa place : c'est le seul endroit du site ou il porte un signal. ------------------------------------------------------------------------- */ :focus-visible { outline: var(--ff-filet-plaque) solid var(--ff-signal); outline-offset: 3px; } .commande:focus-visible { outline-offset: 4px; } /* ---------------------------------------------------------------------------- 10. LE HERO VIDEO, ET SES QUATRE VOLETS ---------------------------------------------------------------------------- LA COMPOSITION EST COMMANDEE PAR L'IMAGE, pas l'inverse. Les quatre rushes ont leur sujet a droite ou au centre ; la colonne de lecture est donc a gauche, et le voile n'assombrit qu'elle. LE VOILE EST UNE COLONNE, PAS UN VOILE GENERAL. Un voile uniforme assez fort pour tenir le contraste eteindrait la video, qui est le sujet. Un degrade horizontal qui n'assombrit que la colonne de lecture laisse l'image en pleine lumiere. La sortie est dans la geometrie, pas dans le dosage — c'est la meme decision que sur les bannieres, ou le surtitre a fini par porter son propre lit opaque. LA HAUTEUR EST EN dvh ET NON EN vh. Sur telephone, vh compte la fenetre BARRE D'ADRESSE RETRACTEE : un hero en 100vh depasse donc l'ecran de la hauteur de cette barre au chargement, et les onglets du bas se retrouvent sous le pli. dvh suit la fenetre reelle. ------------------------------------------------------------------------- */ .heros { position: relative; isolation: isolate; display: grid; grid-template-rows: 1fr auto; min-block-size: min(46rem, 100dvh); padding-block-start: var(--ff-esp-9); padding-block-end: var(--ff-esp-5); border-end-start-radius: var(--ff-rayon-plaque); border-end-end-radius: var(--ff-rayon-plaque); overflow: hidden; color: var(--ff-encre-claire); background-color: var(--ff-marque-bleu); /* le lit, avant que la video arrive */ } /* ---------- La scene ---------- */ .heros__scene { position: absolute; inset: 0; z-index: var(--ff-plan-fond); } .heros__plan { position: absolute; inset: 0; } /* * [hidden] ne suffit pas : la regle de position ci-dessus a plus de poids que * la regle d'agent utilisateur, et le plan masque resterait affiche. On le * redit ici, apres. */ .heros__plan[hidden] { display: none; } .heros__video { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .heros__voile { position: absolute; inset: 0; background-image: linear-gradient( to right, rgb(12 24 44 / 0.94) 0%, rgb(12 24 44 / 0.88) 32%, rgb(12 24 44 / 0.55) 56%, rgb(12 24 44 / 0.18) 100% ), linear-gradient(to top, rgb(12 24 44 / 0.55) 0%, rgb(12 24 44 / 0) 45%); } /* ---------- Le texte ---------- */ .heros__texte { position: relative; z-index: var(--ff-plan-contenu); inline-size: 100%; max-inline-size: var(--ff-bande-max); margin-inline: auto; padding-inline: var(--ff-gouttiere); align-self: center; display: grid; /* les volets se superposent dans la meme case */ } /* * LA COLONNE DU PROPOS EST PLUS LARGE QUE SON TEXTE, ET C'EST VOULU. * * Defaut vu a l'ecran : bornee a 34 rem — la bonne longueur de ligne pour le * chapeau — elle forcait les DEUX COMMANDES a passer l'une sous l'autre, parce * qu'a elles deux elles depassent cette largeur. Deux boutons empiles en * hauteur dans un hero se lisent comme un choix par defaut suivi d'un * repentir, pas comme deux chemins. * * La colonne monte donc a 42 rem, et c'est le CHAPEAU qui garde sa borne a * 34 rem. La longueur de ligne est une propriete du texte, pas du bloc. */ .heros__propos { grid-area: 1 / 1; display: grid; gap: var(--ff-esp-4); justify-items: start; max-inline-size: 42rem; } .heros__propos[hidden] { display: none; } /* * L'ETIQUETTE PORTE SON PROPRE LIT OPAQUE. * * C'est la correction deja faite sur les bannieres, appliquee d'emblee ici : * l'orange de la flamme est le ton le plus clair de la palette, il ne peut pas * s'ecrire sur une image dont on ne maitrise pas la luminosite — et une video * change de luminosite pendant qu'on la regarde. Sur le lit marine opaque, il * rend 8,2:1, et ce chiffre ne bouge plus. */ .heros__etiquette { display: inline-block; padding: 0.45em 0.85em; border-radius: var(--ff-rayon-pilule); background-color: rgb(12 24 44); color: var(--ff-signal); font-family: var(--ff-police-technique); font-size: var(--ff-txt-petit); font-weight: 600; letter-spacing: var(--ff-lettrage-large); text-transform: uppercase; } /* * LE TITRE EST EN ARCHIVO CONDENSE, EN GRAND ET EN CLAIR. * * C'est la lettre de la signaletique de securite : etroite parce qu'elle doit * tenir sur un panneau, claire parce qu'elle est composee en tres grand corps. * Le meme mot en graisse normale et en chasse normale ferait une accroche de * brochure ; ici, il fait une inscription. */ .heros__titre { font-family: var(--ff-police-titre); font-size: clamp(2.25rem, 1.1rem + 4.4vw, 4.5rem); font-weight: 500; font-stretch: 84%; line-height: 1.02; letter-spacing: var(--ff-lettrage-serre); text-wrap: balance; margin: 0; } .heros__chapeau { font-size: var(--ff-txt-chapeau); line-height: 1.5; color: rgb(255 255 255 / 0.92); max-inline-size: 34rem; text-wrap: pretty; } .heros__commandes { display: flex; flex-wrap: wrap; gap: var(--ff-esp-3); } /* ---------- Les onglets ---------- */ .heros__onglets { position: relative; z-index: var(--ff-plan-contenu); inline-size: 100%; max-inline-size: var(--ff-bande-max); margin-inline: auto; padding-inline: var(--ff-gouttiere); display: grid; gap: var(--ff-esp-3); grid-template-columns: repeat(4, 1fr); } .heros__onglets[hidden] { display: none; } .onglet { position: relative; display: grid; gap: var(--ff-esp-1); justify-items: start; text-align: start; padding: var(--ff-esp-4) var(--ff-esp-4) var(--ff-esp-5); border: 0; border-radius: var(--ff-rayon-carte); background-color: rgb(255 255 255 / 0.13); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ff-encre-claire); cursor: pointer; transition: background-color 200ms ease; overflow: hidden; } .onglet:hover { background-color: rgb(255 255 255 / 0.22); } /* * L'ONGLET ACTIF PASSE EN BLANC PLEIN, et son texte en encre. * * Le distinguer par la seule opacite du fond ne suffirait pas : entre 0,13 et * 0,30 de blanc sur une video qui bouge, l'ecart se perd. Le renversement * complet, lui, se voit a coup sur — et il ne repose sur aucune couleur, donc * il tient aussi pour qui ne distingue pas les teintes. */ .onglet[aria-selected='true'] { background-color: var(--ff-sol-releve); color: var(--ff-encre); } .onglet__etiquette { font-family: var(--ff-police-technique); font-size: var(--ff-txt-mention); font-weight: 600; letter-spacing: var(--ff-lettrage-large); text-transform: uppercase; color: rgb(255 255 255 / 0.72); } .onglet[aria-selected='true'] .onglet__etiquette { color: var(--ff-accent, var(--ff-marque-bleu)); } .onglet__titre { font-family: var(--ff-police-titre); font-size: var(--ff-txt-corps); font-weight: 600; font-stretch: 90%; line-height: 1.25; /* * Deux lignes au plus. Les titres des volets vont de trois a onze mots : * sans borne, l'onglet le plus long imposerait sa hauteur aux trois autres. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* ---------- La jauge : le geste de signature ---------- */ /* * C'EST LA HACHURE DE SECURITE, ET C'EST LE SEUL ENDROIT OU ELLE BOUGE. * * Le site porte partout la meme bande a 45 degres, tiree de la signaletique de * chantier. Ici elle ne separe plus deux aplats : elle AVANCE, et elle dit * combien de temps il reste avant que le volet suivant prenne la main. * * Elle ne porte aucune information dont on ait besoin — le volet change tout * seul, et les onglets restent cliquables — donc aria-hidden, et rien a * annoncer. */ .onglet__jauge { position: absolute; inset-block-end: 0; inset-inline: 0; block-size: 6px; background-color: rgb(255 255 255 / 0.18); overflow: hidden; } .onglet[aria-selected='true'] .onglet__jauge { background-color: var(--ff-sol-creux); } .onglet__part { display: block; block-size: 100%; inline-size: 0; background-image: repeating-linear-gradient( 135deg, var(--ff-accent, var(--ff-marque-bleu)) 0 8px, var(--ff-signal) 8px 16px ); } .onglet[aria-selected='true'] .onglet__part { animation: ff-jauge var(--ff-duree-volet, 7s) linear forwards; } @keyframes ff-jauge { from { inline-size: 0; } to { inline-size: 100%; } } /* ---------- Ce qui tombe sur ecran etroit ---------- */ /* ---------------------------------------------------------------------------- 10 ter. LE HERO SUR TELEPHONE ---------------------------------------------------------------------------- LES ONGLETS NE S'EMPILENT PLUS, ILS DEFILENT. Empiles, les quatre cartes prenaient environ 380 px de haut — plus de la moitie d'un ecran de telephone. Le titre, le chapeau et les deux commandes se retrouvaient comprimes dans ce qui restait, et le hero entier donnait l'impression d'un formulaire tasse plutot que d'une ouverture. En bande horizontale, les quatre cartes tiennent sur UNE hauteur de carte : on recupere environ 290 px, et c'est exactement ce qui manquait pour que le texte respire. LA CARTE FAIT 78 % DE LA LARGEUR, ET CE N'EST PAS UN ARRONDI. Une carte pleine largeur ne montrerait pas qu'il y en a d'autres, et une bande qui ne dit pas qu'elle defile ne defile jamais. A 78 %, la suivante depasse d'un cinquieme : c'est le signe, et il ne coute aucun pictogramme ni aucune pastille. L'ACCROCHE AU DEFILEMENT (scroll-snap) fait qu'on ne s'arrete jamais entre deux cartes. Sans elle, un doigt un peu court laisse deux moities a l'ecran et plus rien ne se lit. Le clavier continue de fonctionner sans rien de plus : les fleches deplacent le focus d'un onglet a l'autre, et le navigateur amene tout seul l'onglet focalise dans la bande. ------------------------------------------------------------------------- */ @media (max-width: 61.99rem) { .heros { min-block-size: auto; padding-block-start: var(--ff-esp-9); padding-block-end: var(--ff-esp-4); } /* * LE TEXTE DESCEND EN BAS DE LA SCENE. Centre, il coupait l'image en deux * et ne laissait respirer ni l'un ni l'autre. Pose en bas, il laisse la * video occuper le haut de l'ecran — c'est elle qui donne le ton, et c'est * la premiere chose qu'on voit. */ .heros__texte { align-self: end; padding-block-start: var(--ff-esp-8); } .heros__onglets { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; overscroll-behavior-x: contain; /* * « proximity » ET NON « mandatory », ET C'EST UNE MESURE QUI TRANCHE. * * Avec « mandatory », le moteur DOIT s'arreter sur un point d'accroche. * Or la derniere carte ne peut jamais aligner son bord gauche sur celui * de la bande : il n'y a pas assez de course apres elle. Le moteur la * juge donc inatteignable et ramene le defilement sur l'avant-derniere, * ce qui decale TOUTE la serie d'un cran. * * Mesure : le volet 2 s'arretait a 369 px au lieu de 720, le volet 3 a * 720 au lieu du maximum, et l'onglet actif restait hors champ. Le * defaut ne venait ni du calcul de position ni du script — les deux * etaient justes — mais de cette regle-ci. * * « proximity » n'accroche que si l'on s'arrete pres d'un point. Le * geste du doigt reste cale, le defilement programme arrive ou on le * demande, et la derniere carte redevient atteignable. */ scroll-snap-type: x proximity; scroll-padding-inline-start: var(--ff-gouttiere); padding-block: var(--ff-esp-2); /* La barre de defilement ne doit pas manger la carte en dessous. */ scrollbar-width: none; } .heros__onglets::-webkit-scrollbar { display: none; } .onglet { scroll-snap-align: start; padding: var(--ff-esp-4) var(--ff-esp-4) var(--ff-esp-5); } .onglet__titre { -webkit-line-clamp: 2; } /* * Sous cette largeur, le voile en colonne n'a plus de colonne a couvrir : * le texte occupe toute la largeur. Il redevient donc vertical, comme sur * les bannieres. */ .heros__voile { background-image: linear-gradient( to top, rgb(12 24 44 / 0.94) 0%, rgb(12 24 44 / 0.86) 45%, rgb(12 24 44 / 0.62) 100% ); } } @media (max-width: 35.99rem) { /* * L'ESPACEMENT AUGMENTE AU LIEU DE DIMINUER, et c'est la correction d'un * reflexe : on resserre pour faire tenir. Sur un ecran etroit, resserrer * ne fait pas tenir davantage — la page defile de toute facon — cela rend * seulement chaque bloc plus difficile a distinguer du suivant. * * L'etiquette, le titre, le chapeau et les commandes sont QUATRE objets * differents. C'est le blanc entre eux qui le dit. */ .heros__propos { gap: var(--ff-esp-5); } .heros__commandes { gap: var(--ff-esp-3); inline-size: 100%; } .heros__commandes .commande { inline-size: 100%; justify-content: center; } .onglet__titre { -webkit-line-clamp: 2; } } /* ---------------------------------------------------------------------------- 10 bis. LA VIDEO QUAND LE SYSTEME DEMANDE MOINS D'ANIMATION ---------------------------------------------------------------------------- Une video de fond qui tourne en boucle est exactement ce que le reglage « reduire les animations » existe pour arreter : elle bouge sans arret, elle n'a pas de commande, et personne ne l'a demandee. ON NE PERD RIEN POUR AUTANT : l'affiche prend exactement sa place. ET C'EST FAIT SANS SCRIPT, ce qui demande une precaution. Le premier reflexe est de masquer la video en `visibility: hidden` — mais l'affiche est portee par son attribut `poster`, donc masquer la video masque aussi l'affiche, et il ne reste qu'un aplat marine. C'est le defaut classique de ce reglage : on croit avoir retire le mouvement, on a retire l'image. L'affiche est donc AUSSI posee en fond du plan, par une variable ecrite au gabarit. La video se retire, le fond reste, et personne n'a besoin que le script s'execute pour cela. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .heros__video { display: none; } .heros__plan { background-image: var(--ff-affiche); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; } .onglet[aria-selected='true'] .onglet__part { animation: none; inline-size: 100%; } } /* ---------------------------------------------------------------------------- 11. LES BANNIERES DE PAGE ------------------------------------------------------------------------- */ .banniere { position: relative; display: grid; align-items: end; min-block-size: clamp(15rem, 9rem + 16vw, 22rem); padding-block: var(--ff-esp-8) var(--ff-esp-7); isolation: isolate; color: var(--ff-sol-releve); background-color: var(--ff-marque-bleu); } .banniere__plans { position: absolute; inset: 0; z-index: var(--ff-plan-fond); overflow: hidden; } .banniere__image { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; } /* * UN VOILE DE LISIBILITE SE MESURE EN LONGUEUR ABSOLUE, JAMAIS EN POURCENTAGE. * Ce qui doit etre couvert, c'est le texte, pas une fraction du cadre : le bloc * de titre se tient toujours a la meme distance du bas quelle que soit la * hauteur de la banniere, alors qu'un voile en pourcentage retrecit avec elle. */ .banniere__voile { position: absolute; inset: 0; z-index: var(--ff-plan-voile); background-image: linear-gradient( to top, rgba(14, 28, 50, 0.92) 0, rgba(14, 28, 50, 0.86) 12rem, rgba(14, 28, 50, 0.5) 18rem, rgba(14, 28, 50, 0.28) 100% ); } /* La hachure borde le bas de la banniere, comme un marquage au sol. */ .banniere::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: var(--ff-hachure-epaisseur); z-index: var(--ff-plan-contenu); --ff-hachure-fond: var(--ff-accent); --ff-hachure-teinte: var(--ff-sol-releve); } .banniere__texte { position: relative; z-index: var(--ff-plan-contenu); display: grid; gap: var(--ff-esp-3); justify-items: start; } /* * LE SURTITRE PORTE SON PROPRE LIT, ET C'EST UN DEFAUT MESURE. * * Il etait pose en orange de flamme, directement sur la photographie. Or cet * orange est le ton le plus clair de la palette : la note des couleurs le dit * deja en toutes lettres, « il ne peut porter aucun texte sur fond clair, et ne * sert donc que de signe sur fond sombre ». La banniere etait precisement * l'endroit ou cette regle avait ete oubliee. * * MESURE SUR LES VRAIS PIXELS, voile compris, sur les seize bannieres : le * surtitre rendait entre 1,58:1 et 2,81:1 sur les onze bannieres * photographiques. Le seuil AA d'un texte de cette taille est 4,5:1. Il ne * passait QUE sur les cinq plaques, dont l'aplat est uniforme. * * Le titre, lui, passe partout (4,73:1 au pire), et c'est un grand corps dont * le seuil n'est que de 3:1 : il n'avait pas de probleme. * * POURQUOI UN LIT PLUTOT QU'UN VOILE PLUS FORT. Assombrir le voile jusqu'a * porter cet orange demanderait de le monter a 0,86 sur toute la hauteur du * texte : la photographie deviendrait un aplat, et on ne mettrait plus de * photographie du tout. Le lit ne coute que la surface de trois mots, laisse * l'image intacte, et rend le contraste INDEPENDANT de ce qu'il y a dessous — * y compris de la photographie que le client deposera un jour a la place. * * C'est la meme logique que le hero, dont le voile est une colonne et non un * gris general : la sortie est dans la geometrie, pas dans le dosage. * * Le lit reprend l'exacte couleur du voile, opaque. Sur elle, l'orange rend * 8,6:1 — la paire est deja celle du pied de page. */ .banniere__surtitre { color: var(--ff-signal); letter-spacing: var(--ff-lettrage-large); background-color: rgb(14 28 50); padding: 0.45em 0.85em; /* Le decalage compense le rembourrage : le mot reste aligne sur le titre. */ margin-inline-start: -0.85em; } .banniere__titre { font-size: var(--ff-txt-t1); max-inline-size: 20ch; } .banniere__chapeau { max-inline-size: 54ch; font-size: var(--ff-txt-chapeau); color: var(--ff-sol-releve); } /* ---------------------------------------------------------------------------- 12. LES SECTIONS : LES BLOCS ET LES BANDES ---------------------------------------------------------------------------- LE SYSTEME A CHANGE, ET C'EST LE COEUR DE LA REFONTE. AVANT : des sections pleine largeur qui se touchent, alternant blanc et sol en nth-of-type. La page se lisait comme une pile de bandes, et l'alternance etait le seul rythme disponible. Elle avait un defaut connu : deux aplats de couleur qui se suivaient fusionnaient en un seul bloc sombre, et il fallait les compter a la main pour l'eviter. MAINTENANT : deux objets seulement, et ils ne font pas le meme travail. .bloc Le cas courant. Il n'a PAS de fond a lui : il laisse voir le sol, et ce sont les CARTES posees dessus qui sont blanches. Le rythme ne vient plus de l'alternance des fonds mais de la respiration entre les groupes de cartes. Deux blocs qui se suivent ne peuvent plus fusionner, puisqu'aucun des deux ne pose d'aplat. .bande L'exception. Un aplat de la couleur de marque, bord a bord, arrondi aux quatre coins et pose sur le sol comme une plaque. Deux par page au plus, et jamais deux qui se suivent — la regle d'avant reste vraie, elle porte maintenant sur un objet nomme au lieu d'un rang. L'ALTERNANCE PAR nth-of-type A DISPARU, et c'est un soulagement : elle dependait de l'ORDRE des sections, donc en ajouter une au milieu repeignait tout ce qui suivait. Le nouveau systeme se lit dans le gabarit. ------------------------------------------------------------------------- */ /* * > AVANT DE NOMMER UN BLOC, VERIFIER QUE WORDPRESS NE POSE PAS DEJA CE NOM * > SUR LE BODY. La liste est longue : page, home, blog, archive, search, * > single, error404, date, paged, attachment, category, tag, author, admin-bar. * > * > C'est un defaut deja paye : la classe « page » avait donne 72 px de * > remplissage au body sur toutes les pages du site. Il etait invisible en * > relisant le code — la valeur venait d'un jeton, et le selecteur ne nommait * > pas le body — et il a fallu desactiver les feuilles une par une pour le * > voir. « bloc » et « bande » ne figurent pas dans la liste. */ .bloc, .corps-page, .fiche, .billet, .dossier { position: relative; padding-block: var(--ff-esp-8); background-color: var(--ff-sol); } /* Deux blocs qui se suivent ne doublent pas la respiration entre eux. */ .bloc + .bloc { padding-block-start: 0; } /* ---------- La bande : l'aplat de marque ---------- */ /* * DANS UN APLAT, TOUS LES JETONS SE RECALENT : l'encre devient la couleur du * texte de l'aplat, le sol devient l'aplat, les filets se recalculent sur ce * texte. Un composant ecrit correctement n'a donc rien a savoir de la couleur * sur laquelle il est pose — c'est ce qui permet de reutiliser les memes * cartes, les memes commandes et les memes chiffres partout. */ /* * LA SURFACE ET LA GEOMETRIE SONT SEPAREES, ET C'EST LA CORRECTION D'UN * DEFAUT QUE LA REFONTE AVAIT INTRODUIT. * * Avant la refonte, « .accueil__section--appel » et « .dossier__section--appel » * partageaient UN SEUL bloc : les jetons recalcules ET le fond. En passant au * systeme des bandes, le fond a suivi « .bande » et le dossier n'a garde que * les jetons — c'est-a-dire l'encre BLANCHE, sans l'aplat rouge qui la portait. * * Resultat sur /dossier-de-presentation/ : le bloc « Prenons contact » rendait * du blanc sur du blanc. Le titre, le texte et les deux boutons etaient * INVISIBLES, sur la seule page qu'on envoie a un interlocuteur pour se * presenter. * * Le defaut ne se voyait ni en relisant le CSS — les deux regles sont justes * separement — ni dans les controles de structure, qui verifient le document * et non la couleur calculee. Il a fallu comparer l'encre d'un element au fond * REELLEMENT peint derriere lui. * * D'ou la separation : ce qui fait la COULEUR vaut pour les deux, ce qui fait * la FORME de plaque ne vaut que pour la bande. Un troisieme bloc de couleur * ajoute demain heritera de la surface sans avoir a recopier treize lignes. */ .bande, .dossier__section--appel { position: relative; --ff-sol: var(--ff-accent); --ff-sol-releve: color-mix(in srgb, var(--ff-accent) 86%, #ffffff); --ff-sol-creux: color-mix(in srgb, var(--ff-accent) 88%, #000000); --ff-encre: var(--ff-accent-sur); /* * 90 % ET NON 84 %. Sur le rouge plein, le blanc a 84 % rendait 4,66:1 : * il passait le seuil de 4,5 avec seize centiemes de marge. Une valeur qui * tient tout juste ne tient plus des qu'on change un fond d'un cran, et * c'est exactement ce qui vient d'arriver sur le dossier. */ --ff-encre-douce: color-mix(in srgb, var(--ff-accent-sur) 90%, transparent); --ff-encre-tenue: color-mix(in srgb, var(--ff-accent-sur) 68%, transparent); --ff-filet: color-mix(in srgb, var(--ff-accent-sur) 30%, transparent); --ff-filet-appuye: var(--ff-accent-sur); background-color: var(--ff-accent); color: var(--ff-accent-sur); } /* * LA BANDE EST EN RETRAIT DES BORDS, ET NON BORD A BORD. * * Bord a bord, elle redeviendrait la bande d'avant : une barre de couleur qui * coupe la page en deux. En retrait, avec ses quatre coins arrondis, elle se * lit comme une PLAQUE posee sur le papier — le meme objet que la barre de * l'en-tete et que les cartes, a une autre echelle. C'est ce qui tient * l'unite de la page. */ /* La geometrie de plaque, elle, ne vaut que pour la bande. */ .bande { margin-block: var(--ff-esp-8); padding-block: var(--ff-esp-8); border-radius: var(--ff-rayon-plaque); inline-size: min(100% - var(--ff-gouttiere) * 2, var(--ff-contenu-large-max)); margin-inline: auto; } /* * LES DEUX APLATS NE SONT PAS DE LA MEME COULEUR, ET C'EST LE LOGO QUI LE DIT. * * Les chiffres prennent le bleu marine, qui est la couleur de maison : c'est un * constat, il se lit posement. * * L'appel prend le rouge de la flamme. C'est le dernier bloc de la page, celui * qui demande une action, et il est suivi du pied de page en bleu. On retrouve * alors, de haut en bas, l'ordre meme du logo : la flamme, puis la feuille * bleue. */ .bande--chiffres { --ff-accent: var(--ff-marque-bleu); --ff-accent-sur: #ffffff; } .bande--appel, .dossier__section--appel { --ff-accent: var(--ff-le-incendie); --ff-accent-sur: #ffffff; --ff-accent-voile: rgba(184, 48, 47, 0.09); } /* * Dans un aplat, le bouton plein ne peut pas reprendre la couleur de l'aplat : * il disparaitrait. Il passe au blanc, avec l'encre de l'aplat, et son survol * prend l'anthracite. */ .bande .commande--pleine, .dossier__section--appel .commande--pleine { background-color: #ffffff; border-color: #ffffff; color: var(--ff-accent); } .bande .commande--pleine:hover, .bande .commande--pleine:focus-visible, .dossier__section--appel .commande--pleine:hover, .dossier__section--appel .commande--pleine:focus-visible { background-color: var(--ff-le-acier); border-color: var(--ff-le-acier); color: #ffffff; } .bande .commande--claire, .dossier__section--appel .commande--claire { background-color: transparent; border-color: #ffffff; color: #ffffff; } .bande .commande--claire:hover, .bande .commande--claire:focus-visible, .dossier__section--appel .commande--claire:hover, .dossier__section--appel .commande--claire:focus-visible { background-color: rgba(255, 255, 255, 0.14); } /* ---------- L'entete d'un bloc ---------- */ .bloc__entete { display: grid; gap: var(--ff-esp-4); margin-block-end: var(--ff-esp-7); } /* * L'ENTETE RANGEE : le titre a gauche, le chapeau a droite. * * Elle sert quand le titre est court — « Les formations », « Actualités » — et * que le chapeau ferait sinon une ligne solitaire sous deux mots. Sous 62 rem * elle repasse en pile : deux colonnes de texte a moins de 30 rem chacune ne * se lisent plus. */ .bloc__entete--range { align-items: end; } @media (min-width: 62rem) { .bloc__entete--range { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ff-esp-7); } .bloc__entete--range .bloc__chapeau { margin-block-end: 0.35em; } } /* * L'ETIQUETTE DE BLOC : le mot qui dit de quoi la section parle, avant son * titre. Elle porte la marque a la hachure, en tres petit, et c'est le seul * endroit du corps de page ou la hachure paraisse encore : ailleurs elle a * migre vers la jauge du hero. */ .bloc__etiquette { display: flex; align-items: center; gap: var(--ff-esp-3); font-family: var(--ff-police-technique); font-size: var(--ff-txt-petit); font-weight: 600; letter-spacing: var(--ff-lettrage-large); text-transform: uppercase; color: var(--ff-accent, var(--ff-marque-bleu)); } .bloc__etiquette::before { content: ''; inline-size: 1.75rem; block-size: 0.55rem; flex: 0 0 auto; background-image: repeating-linear-gradient( 135deg, currentColor 0 4px, transparent 4px 8px ); } .bloc__titre { font-size: var(--ff-txt-t2); max-inline-size: 24ch; text-wrap: balance; } .bloc__chapeau { max-inline-size: 62ch; font-size: var(--ff-txt-chapeau); color: var(--ff-encre-douce); text-wrap: pretty; } .bloc__sous-titre { font-family: var(--ff-police-titre); font-size: var(--ff-txt-t3); font-weight: 700; font-stretch: 92%; margin-block-end: var(--ff-esp-3); } .bloc__suite { margin-block-start: var(--ff-esp-6); } /* * LE BLOC DES CHIFFRES N'A PAS D'ENTETE VISIBLE : les quatre chiffres se * lisent seuls. Son titre existe quand meme, cache, parce qu'une section sans * nom accessible est une section qu'un lecteur d'ecran ne peut pas situer. */ .bande--chiffres .bande__colonne > .chiffres { margin-block: 0; } /* ---------------------------------------------------------------------------- 13. LES JOINTURES ENTRE DEUX APLATS ---------------------------------------------------------------------------- SYMPTOME : un trait clair d'une fraction de pixel entre une section coloree et la suivante. CE QUE CE N'EST PAS : un defaut de mise en page. La geometrie est exacte au milliieme de pixel. LA CAUSE : la hauteur d'une section est celle de son contenu, donc elle tombe presque toujours sur un pixel fractionnaire. Le moteur arrondit ensuite CHAQUE BOITE PEINTE POUR SON PROPRE COMPTE. Quand le bas de l'une s'arrondit vers le haut pendant que le haut de l'autre s'arrondit vers le bas, il reste entre elles une fraction de pixel ou l'on voit le fond de la page. CE QU'IL NE FAUT PAS FAIRE : chercher a faire tomber les bornes sur des entiers, ce qui reviendrait a figer la hauteur des sections. Ni recouvrir avec une couleur semi-transparente : le pixel de recouvrement se melangerait a la couleur du bloc du dessus, et le lisere clair deviendrait une raie sombre. LE CORRECTIF : faire mordre le bloc du dessous d'un pixel. Ecrit ici une seule fois, pour toutes les sections. Ce defaut depend de la densite d'affichage : present en densite 1, 1,25 et 1,5, absent en densite 2. Il se controle en photographiant la jointure et en lisant les pixels, jamais a l'oeil. ------------------------------------------------------------------------- */ .bloc + .bloc, .dossier__section + .dossier__section { margin-block-start: -1px; padding-block-start: calc(var(--ff-esp-8) + 1px); } /* ---------------------------------------------------------------------------- 14. LES GRILLES ET LES CARTES ---------------------------------------------------------------------------- UNE GRILLE DE CARTES EST UNE LISTE.
    , un
  • par carte, jamais une suite de
    . C'est ecrit dans les gabarits ; ici on ne fait que la peindre. LES VIGNETTES D'UNE MEME RANGEE DOIVENT AVOIR EXACTEMENT LA MEME HAUTEUR. Defaut deja rencontre : 213,86 px pour l'une, 226,05 pour ses voisines. La carte est un element de grille, donc etiree a la hauteur de la plus haute de sa rangee ; la carte est elle-meme une grille, et une grille etiree distribue son surplus a ses lignes. La premiere ligne etant la vignette, une carte dont le titre tient sur une ligne se retrouvait avec une vignette plus haute qu'une carte dont le titre en prend deux. Correctif : grid-template-rows: auto 1fr. La vignette prend ce qu'il lui faut, le corps absorbe le surplus. ------------------------------------------------------------------------- */ .grille { display: grid; gap: var(--ff-esp-5); grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); } .grille--domaines { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); } .grille--terrains, .grille--apports { grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); } .grille__item { display: grid; } .carte { display: grid; grid-template-rows: auto 1fr; background-color: var(--ff-sol-releve); border: var(--ff-filet-fin) solid var(--ff-filet); block-size: 100%; } .carte__vignette { position: relative; overflow: hidden; aspect-ratio: var(--ff-format-carte); background-color: var(--ff-sol-creux); } .carte__vignette img { inline-size: 100%; block-size: 100%; object-fit: cover; } /* La hachure descend sur le visuel au survol de la carte. */ .carte__vignette::after { content: ''; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 8px; --ff-hachure-pas: 16px; --ff-hachure-trait: 8px; --ff-hachure-fond: var(--ff-accent); --ff-hachure-teinte: #ffffff; clip-path: inset(0 100% 0 0); transition: clip-path var(--ff-duree) var(--ff-courbe); } .carte:hover .carte__vignette::after, .carte:focus-within .carte__vignette::after { clip-path: inset(0 0 0 0); } .carte__corps { display: grid; align-content: start; gap: var(--ff-esp-2); padding: var(--ff-esp-5); } .carte__domaine { color: var(--ff-accent); } .carte__date { color: var(--ff-encre-tenue); } .carte__titre { font-size: var(--ff-txt-t3); } .carte__lien { text-decoration: none; } /* Toute la carte est cliquable, et le lien reste un vrai lien. */ .carte__lien::after { content: ''; position: absolute; inset: 0; } .carte { position: relative; } .carte__resume { color: var(--ff-encre-douce); font-size: var(--ff-txt-appui); } .carte__duree { color: var(--ff-encre-tenue); margin-block-start: var(--ff-esp-2); } .carte:hover { border-color: var(--ff-filet-interface); } /* ---------- Les domaines ---------- */ .domaine { display: grid; align-content: start; gap: var(--ff-esp-3); padding: var(--ff-esp-5); block-size: 100%; background-color: var(--ff-sol-releve); border: var(--ff-filet-fin) solid var(--ff-filet); position: relative; } .domaine__signe { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; background-color: var(--ff-accent); color: #ffffff; } .domaine__titre { font-size: var(--ff-txt-t3); } .domaine__lien { text-decoration: none; } .domaine__lien::after { content: ''; position: absolute; inset: 0; } .domaine__phrase { color: var(--ff-encre-douce); font-size: var(--ff-txt-appui); } .domaine:hover { border-color: var(--ff-accent); } /* ---------- Les terrains et les apports ---------- */ .terrain, .apport { display: grid; align-content: start; gap: var(--ff-esp-3); padding: var(--ff-esp-5); block-size: 100%; background-color: var(--ff-sol-releve); border: var(--ff-filet-fin) solid var(--ff-filet); } .terrain__titre, .apport__titre { font-size: var(--ff-txt-t3); } .terrain__texte, .apport__texte { color: var(--ff-encre-douce); font-size: var(--ff-txt-appui); } /* ---------------------------------------------------------------------------- 15. LES ETAPES, LES CHIFFRES, LA CHRONOLOGIE ------------------------------------------------------------------------- */ .etapes { display: grid; gap: var(--ff-esp-6); grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); counter-reset: etape; } .etape { display: grid; align-content: start; gap: var(--ff-esp-3); } .etape__rang { font-size: 2.5rem; font-weight: 600; color: var(--ff-encre-tenue); line-height: 1; } .etape__titre { font-size: var(--ff-txt-t3); } .etape__texte { color: var(--ff-encre-douce); } .chiffres { display: grid; gap: var(--ff-esp-5); grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); } .chiffre { display: grid; align-content: start; gap: var(--ff-esp-2); padding-block-start: var(--ff-esp-4); border-block-start: var(--ff-filet-epais) solid var(--ff-filet-appuye); } .chiffre__valeur { font-family: var(--ff-police-titre); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); font-weight: 800; font-stretch: 84%; line-height: 1; text-transform: uppercase; } .chiffre__legende { font-size: var(--ff-txt-appui); color: var(--ff-encre-douce); } .bloc__appui { display: grid; gap: var(--ff-esp-7); grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); align-items: center; margin-block-start: var(--ff-esp-8); } .bloc__appui-texte { display: grid; gap: var(--ff-esp-4); align-content: start; } .bloc__appui-texte p { color: var(--ff-encre-douce); } .chrono { display: grid; gap: var(--ff-esp-6); } .chrono__etape { display: grid; gap: var(--ff-esp-2); padding-inline-start: var(--ff-esp-6); position: relative; } .chrono__etape::before { content: ''; position: absolute; inset-inline-start: 0; inset-block: 0.4em 0; inline-size: var(--ff-filet-plaque); background-color: var(--ff-filet); } .chrono__etape--appui::before { background-color: var(--ff-accent); } .chrono__periode { color: var(--ff-accent); } .chrono__titre { font-size: var(--ff-txt-t3); } .chrono__texte { color: var(--ff-encre-douce); } /* ---------------------------------------------------------------------------- 16. L'APPEL ------------------------------------------------------------------------- */ /* * « .fiche__appel » EST RATTACHE ICI, ET IL AURAIT DU L'ETRE DEPUIS LE DEBUT. * * Son