/* ============================================================ Equideals — feuille de style du site Séance 5, 8 septembre 2026. Elle reprend, sans les retoucher, les valeurs de la maquette Références validée le 7 septembre (D26) : la carte, la grille, le codage des cinq types d'opération par la couleur, la densité et la hiérarchie typographique. PROVISOIRE, et rassemblé exprès en un seul endroit (D26) : - les couleurs sont les jetons du bloc :root ci-dessous ; - les polices sont les trois jetons --police-*. Changer la palette ou les polices après la revue d'équipe se fait ici, et nulle part ailleurs. Aucun gabarit ne nomme une couleur ni une police en clair. Le bouton de bascule clair/sombre de la maquette n'est pas repris : le thème suit le réglage de l'appareil, et rien d'autre (D27). ============================================================ */ :root{ /* ── L'AGRANDISSEMENT PROPORTIONNEL (23/09) ──────────────────────────── Demande de Marc : au-delà d'une largeur de référence — 1 280 par défaut, la moitié de son écran —, TOUT grandit en proportion, polices comprises, et seule la quantité visible en hauteur dépend de la forme de l'écran. Réglage du site (onglet Affichage), éteint par défaut. LE MÉCANISME EST `zoom` SUR LA RACINE, posé par un script de l'en-tête : `fenêtre / référence`, jamais sous 1, jamais au-dessus du plafond. ET IL A FALLU CORRIGER TOUTES LES UNITÉS DE FENÊTRE. `vw` et `vh` se comptent sur la fenêtre RÉELLE, que le zoom ne change pas — puis le zoom les multiplie à l'affichage. Tout ce qui était déjà calculé sur la largeur de la fenêtre grossissait donc DEUX FOIS : à l'essai sur 2 560 px, l'accroche occupait 110 % de la largeur au lieu de 55, et partait à droite parce que sa marge gauche doublait aussi. Les 66 unités de fenêtre de cette feuille passent par `--vw` et `--vh`, qui divisent par le zoom. Mesuré après correction, en part de la largeur de l'écran : à 2 560 px agrandi deux fois, le texte va de 17 à 83 %, l'accroche de 19 à 74 %, le logo commence à 19 % — **exactement** les valeurs de la fenêtre de 1 280. Sans zoom, `--vw` vaut `1vw` : rien ne change. *Une unité qui dépend de la fenêtre et un agrandissement qui dépend de la fenêtre ne se composent pas, ils se multiplient.* */ --vw:calc(1vw / var(--zoom, 1)); --vh:calc(1vh / var(--zoom, 1)); /* --- palette relevée par Marc (Couleurs Site Equideals.xlsm) --- */ --rouge:#c00822; --vert:#4e9184; --bleu-clair:#2da8cb; --bleu:#2b93b3; --marine-clair:#244155; --marine:#193040; --gris-fond:#f7f7f7; --gris-filet:#e9e9e9; --gris-texte:#cbcbcb; /* Les deux teintes du E du logo, relevées dans le fichier lui-même (logo-equideals.webp) : rouge #bd0a24 pour les traits du haut et du bas, gris #b0b0b0 pour celui du milieu. Le rouge de la palette, #c00822, en est à un cheveu — on prend celui de la palette, une teinte de moins à entretenir. Le gris, en revanche, n'y figure pas : #cbcbcb serait trop pâle et le trait du milieu s'effacerait. */ --e-rouge:var(--rouge); --e-gris:#b0b0b0; /* Le dessin de la puce E, thème clair. Les couleurs y sont écrites en clair (un data-URI ne lit pas les variables) : ce sont --e-rouge et --e-gris ci-dessus, RECOPIÉES. Si l'une change, changer aussi ici ET dans le bloc du thème sombre. Barres de 7,5/57 — voir l'encadré « La puce E ». */ --e-puce:url('data:image/svg+xml;utf8,'); /* Le gris du « + » n'est pas tout à fait celui du logo, et c'est voulu. Dans le E, le trait gris est encadré par deux traits rouges et le logo est juste à côté pour comparer : #b0b0b0 y est juste. Dans le +, la barre grise porte à elle seule la moitié du signe, et un gris pâle sur fond clair PARAÎT plus fin qu'un rouge foncé de même largeur — les deux barres font pourtant 1,90 px, mesuré. Un gris plus soutenu rétablit l'équilibre à l'œil sans toucher au dessin. */ --plus-gris:#8a8a8a; /* --- polices --- */ --police-titre:Spectral,Georgia,"Times New Roman",serif; --police-texte:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --police-chiffres:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* --- rôles, thème clair --- */ --fond:var(--gris-fond); --surface:#ffffff; --surface-creuse:#ffffff; --encre:var(--marine); --encre-douce:var(--marine-clair); --encre-tenue:#6d8092; /* dérivée : #cbcbcb est trop clair pour du texte sur blanc */ --filet:var(--gris-filet); --filet-fort:#dbe0e4; --accent:var(--rouge); --accent-texte:var(--rouge); --plaque:#ffffff; --ombre:0 1px 2px rgba(25,48,64,.05), 0 8px 20px -12px rgba(25,48,64,.18); --ombre-levee:0 2px 4px rgba(25,48,64,.07), 0 18px 34px -16px rgba(25,48,64,.28); --focus:var(--bleu); --t-vendeur:var(--rouge); --t-acheteur:var(--bleu); --t-levee:var(--vert); --t-difficulte:var(--marine-clair); --t-management:var(--bleu-clair); /* « Autres » : les fiches qu'aucune opération n'explique. Teinte neutre à dessein — ce n'est pas un type d'intervention (décision du 9/09). */ --t-autres:#9aabb6; --pas:clamp(16px,calc(3.2 * var(--vw)),28px); /* ── LA TRAME DU SITE (22/09) ───────────────────────────────────────── Marc : « il faut limiter la largeur des carrousels et des Références à la largeur retenue, qui finalement sera définie tout en haut par l'écartement que tu auras choisi entre le logo Equideals et le hamburger du menu ». C'est le bon raisonnement : une page n'a pas quatre largeurs, elle en a une, et c'est l'en-tête qui l'annonce. Tout s'y aligne — le texte, les pavés, les carrousels, les Références. L'ÉCARTEMENT EST 790 px, ET IL DÉCOULE DU TEXTE (22/09, essai demandé par Marc). Sa règle : la colonne d'un métier fait la largeur du PLUS LONG DE LEURS TITRES, et deux colonnes côte à côte donnent la trame de la page. Le plus long titre est « Financer un projet ou sécuriser du patrimoine » : 371 px à 17 px en gras, mesuré. Deux colonnes de 371 plus une gouttière de 48 font 790. *La largeur de la page n'est donc plus un choix : elle est dictée par le contenu. Changer un titre de métier change la trame — c'est voulu, et il faut le savoir.* `--largeur` porte l'écartement PLUS les deux gouttières, puisque DEUX LARGEURS, ET NON UNE (22/09, second temps). J'avais ramené TOUTE la page à 790 px, puisque c'est ce que la règle des métiers donnait. Marc l'a vu sur les pages de rubrique : « la trame impacte partout, ça non plus ce n'est pas extraordinairement beau ». Il avait raison, et la faute est de raisonnement : **790 est une largeur de LECTURE, pas une largeur de PAGE.** Une page de liste ne lit pas, elle range — la grille des Références n'avait plus que 507 px et deux cartes par rangée, les témoignages tombaient sur une colonne. Les deux besoins s'étaient retrouvés dans un seul nombre, et c'est pourquoi aucune valeur ne convenait : trop large pour lire, trop étroit pour ranger. ET C'EST LA TRAME QUI GOUVERNE, LE CADRE QUI FAIT EXCEPTION (22/09, troisième temps). J'avais d'abord fait l'inverse — cadre partout, trame seulement sur le bloc des métiers — et Marc l'a repris : la page qu'il avait validée d'un « parfait », c'était l'accueil à 790. Ce qu'il trouvait laid, c'était 790 appliqué aux PAGES DE RUBRIQUE. *J'ai corrigé les deux alors qu'un seul était en cause : une remarque portant sur une page ne vaut pas pour toutes.* - `--trame`, **790 px** : la règle de Marc — deux colonnes de métier de 371 plus leur gouttière de 48. C'est la largeur de TOUT le site : en-tête, pied, accueil, pages rédigées, et l'écartement logo ↔ hamburger qui l'annonce. - `--cadre`, **1 224 px** : réservé aux LISTES — les cinq pages de rubrique, où quatre cartes par rangée valent mieux que deux. Elles seules s'en servent, et elles le déclarent par une classe. - `--lecture`, plus bas : la colonne d'un métier. `--largeur` reste le nom employé par `.enveloppe` et vaut la trame plus les deux gouttières. Un seul nombre écrit, les autres calculés. */ --cadre:1224px; --trame:790px; --largeur:calc(var(--trame) + 56px); /* ── LA COLONNE DE LECTURE (22/09) ─────────────────────────────────── La longueur de ligne est une règle de typographie, pas un goût : entre 45 et 75 caractères, l'idéal autour de 66 (Bringhurst). Au-delà de 80, l'œil peine à retrouver le début de la ligne suivante et l'on saute des lignes. Mesuré sur la page d'accueil avant correction, en caractères RÉELS de la police du site : le texte de « Notre ADN » faisait **179 caractères** par ligne à 1 440 px — deux fois et demie le maximum. Et les textes des métiers passaient à 106 caractères à 768 px, au moment où les trois colonnes se rangent en une seule. PAS EN `ch`, ET PAS À VUE D'ŒIL NON PLUS. Le `ch` se compte sur le chiffre zéro, plus large que la lettre moyenne : mesuré sur cette police, 8,08 px contre 6,24. `65ch` ferait donc 84 caractères réels, déjà hors de la fourchette — la règle est juste, l'unité trompe. *Et j'ai posé 640 px en annonçant 70 caractères, sans le vérifier. La mesure a rendu 94 : 640 / 6,24 fait 102, pas 70. Le chiffre était faux dans la ligne même qui expliquait pourquoi il ne fallait pas se fier aux unités. Un calcul de tête n'est pas une mesure.* 371 px : la largeur du plus long titre de métier, à 17 px en gras. C'est Marc qui pose cette règle — « la largeur des paragraphes limitée à la taille que prend le plus grand des titres » —, et elle donne 58 caractères au corps de 14,5 px, au cœur de la fourchette. */ --lecture:371px; /* `--ligne` — une colonne de texte suivi de 33 em, soit 72 caractères — a vécu une heure, le temps que le cadre soit à 1 224. Elle bridait « Depuis 2008 » et « Notre ADN » à 561 px pour tenir la règle typographique. Marc l'a retirée en ramenant l'accueil à 790 : sur sa page validée, ces textes prennent toute la trame. *Une règle de typographie ne l'emporte pas sur ce que l'auteur de la page a vu et approuvé.* La mesure reste vraie — 101 caractères par ligne à 17 px sur 790 — et elle est écrite là où elle sert, au chapeau. */ /* ── LA RESPIRATION ENTRE DEUX SECTIONS (22/09) ─────────────────────── Marc : « les espaces laissés entre les rubriques me semblent extrêmement importants, tu peux les réduire significativement ? ». Mesuré avant : 181 px de blanc entre « Notre ADN » et « Métiers », 66 px avant « Notre ADN », 44 px au-dessus de chaque titre de rubrique. Quatre valeurs différentes commandaient ces blancs, dans quatre règles éloignées. Elles n'en font plus qu'une : **une section respire d'un pas, et d'un seul.** *Quatre nombres voisins finissent toujours par diverger, et personne ne sait plus lequel régler.* Le pas vaut 38 px sur un grand écran contre 72 auparavant — la moitié —, et 20 px sur un téléphone contre 40. Il se règle ici, une fois. */ --respiration:clamp(20px, calc(2.6 * var(--vw)), 38px); /* La hauteur du logo, d'où découle aussi celle de l'icône du menu. Continue entre 32 px sur un téléphone de 390 points et 56 px à 1 440 : la droite qui joint les deux (pente 2,286 % de la largeur, ordonnée 23,08 px). */ --h-logo:clamp(32px, calc(calc(2.286 * var(--vw)) + 23.08px), 56px); } /* Thème sombre : suit l'appareil (D27). Les cinq teintes de type sont éclaircies — le rouge et le marine ne tiennent pas le contraste sur fond marine. */ @media (prefers-color-scheme: dark){ :root{ --fond:var(--marine); --surface:var(--marine-clair); --surface-creuse:#1d3547; --encre:#f2f5f7; --encre-douce:#dfe6eb; --encre-tenue:var(--gris-texte); --filet:rgba(203,203,203,.20); --filet-fort:rgba(203,203,203,.34); /* Le rouge du logo ne tient pas le contraste sur fond marine — même constat que pour --t-vendeur, et la même teinte éclaircie. */ --e-rouge:#e2455c; /* La puce E, seconde version : même dessin, rouge éclairci. Recopie de --e-rouge ci-dessus et de --e-gris du bloc clair. */ --e-puce:url('data:image/svg+xml;utf8,'); /* Sur fond marine l'effet s'inverse : c'est le gris clair qui paraît plus épais que le rouge. D'où un gris légèrement rabattu, choisi sur rendu. */ --plus-gris:#93a1aa; --accent:var(--bleu-clair); --accent-texte:var(--bleu-clair); --plaque:#ffffff; --ombre:0 1px 2px rgba(0,0,0,.32), 0 10px 24px -14px rgba(0,0,0,.6); --ombre-levee:0 2px 6px rgba(0,0,0,.4), 0 22px 40px -18px rgba(0,0,0,.7); --focus:var(--bleu-clair); --t-vendeur:#e2455c; --t-acheteur:var(--bleu-clair); --t-levee:#6cb3a5; --t-difficulte:#8fa6b6; --t-management:#7fd0e6; --t-autres:#8296a3; } } *{box-sizing:border-box} html{color-scheme:light dark} /* LE TEXTE NE CHANGE PAS DE TAILLE SELON LA FAÇON DONT ON TIENT L'IPHONE (23/09). Marc : ouverte en portrait puis tournée, la page garde ses tailles ; ouverte directement en paysage, « j'ai des textes plus gros ». Ce n'est pas la feuille de style : c'est Safari sur iPhone qui GROSSIT DE LUI-MÊME le texte en paysage, par une estimation qui lui est propre, et seulement à l'ouverture. La photographie, elle, suivait déjà, parce que son texte est calculé sur la largeur de l'écran. `100%` lui dit de ne rien estimer : les tailles sont celles que la page demande, dans les deux sens et quel que soit l'ordre. Sans effet sur un ordinateur. *Une taille de texte que le navigateur décide à notre place n'est pas un réglage : c'est un aléa.* Si Marc veut des textes plus grands en paysage, ce sera une règle écrite, pas une devinette. */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{ margin:0; background:var(--fond); color:var(--encre); font-family:var(--police-texte); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; } img{max-width:100%} a{color:inherit} .enveloppe{max-width:var(--largeur);margin:0 auto;padding:0 var(--pas)} .hors-ecran{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Lien d'évitement : premier élément focalisable de la page. */ .evitement{ position:absolute;left:-9999px;top:0;z-index:100;background:var(--surface);color:var(--encre); padding:10px 14px;border:1px solid var(--filet-fort); } .evitement:focus{left:var(--pas)} /* ---------- en-tête ---------- */ .bandeau{border-top:4px solid var(--rouge);background:var(--surface);border-bottom:1px solid var(--filet)} .bandeau .enveloppe{ display:flex;align-items:center;justify-content:space-between;gap:16px; /* Le rembourrage suit lui aussi une droite (22/09) : 13 px sur un téléphone de 390 points, 18 px à 1 440. Sans lui, l'en-tête sautait encore de 68,7 à 80,1 px au passage de 640 — le logo était devenu continu, sa boîte non. *Rendre une chose continue ne sert à rien si ce qui l'entoure garde ses paliers : le saut se déplace, il ne disparaît pas.* */ padding-block:clamp(13px, calc(calc(0.476 * var(--vw)) + 11.14px), 18px);flex-wrap:wrap; } .marque{display:flex;align-items:center;gap:14px;min-width:0} /* ── LE LOGO GRANDIT SANS PALIER (22/09) ─────────────────────────────── Marc : « pourquoi le logo et le hamburger changent soudain de taille lors de l'élargissement de la fenêtre, et pourquoi n'est-ce pas une évolution continue ? ». Mesuré : il passait de 32 à 56 px entre 640 et 700 points de fenêtre — **75 % d'un coup**, parce que trois `media queries` posaient trois hauteurs fixes. La droite qui joint les deux extrémités : 32 px à 390 points, 56 px à 1 440. Pente (56 − 32) / (1 440 − 390) = 2,286 % de la largeur, ordonnée 23,08 px. Les deux bornes restent, et elles ont un sens ici : un logo doit rester lisible en bas et ne pas enfler sans fin en haut. *Ce n'est pas le titre du héros, qui devait suivre une photographie — là une borne rompait la proportion, ici elle protège une lecture.* */ .marque img{height:var(--h-logo);width:auto;display:block} /* ---------- le menu : une icône à trois traits ---------- */ /* Demande de Marc du 11/09. Il remplace le bandeau de onze entrées qui passait sur deux lignes et faisait grandir l'en-tête FIGÉ de 97 à 180 px. Bâti sur `
` : il s'ouvre sans JavaScript, au clic comme au clavier. Le script n'ajoute qu'Échap et le clic à l'extérieur. */ .menu-boite{position:relative} /* le triangle que les navigateurs ajoutent d'eux-mêmes à un */ .menu-bouton::-webkit-details-marker{display:none} .menu-bouton{ /* Le rembourrage est serré depuis le 12/09, et ce n'est pas un caprice de mise en page : l'en-tête est FIGÉ sur toutes les pages, et sa hauteur est commandée par le plus haut de ses deux éléments. Le logo fait 38 px. Un bouton de 26,6 px d'icône plus 9 px de rembourrage en ferait 46,6, et l'en-tête passerait de 97 à 106 px — repris sur chaque écran de chaque page. À 4 px, le bouton fait 36,6 : il reste sous le logo, et l'en-tête ne bouge pas. La zone cliquable, elle, ne perd rien : voir `::after`. */ list-style:none;display:inline-flex;align-items:center;cursor:pointer; position:relative; padding:4px 8px;border:1px solid var(--filet-fort);border-radius:3px; background:var(--surface);color:var(--encre); user-select:none; } .menu-bouton::marker{content:""} /* La zone cliquable déborde le bouton de 8 px sur les quatre côtés, sans rien peindre et sans rien pousser : 54 × 52 px au doigt, là où le bouton visible en fait 38 × 37. C'est le moyen de garder un bouton discret sans le rendre difficile à viser sur un téléphone. */ .menu-bouton::after{content:"";position:absolute;inset:-8px} .menu-bouton:hover{background:var(--fond)} .menu-bouton:focus-visible{outline:2px solid var(--focus);outline-offset:2px} /* ============================================================ Les trois traits, aux dimensions du E du logo ------------------------------------------------------------ Demande de Marc du 12/09 : « le E qui est dans le logo en haut à gauche du site est bien lisible, autant reprendre cette taille ». Relevé dans `logo-equideals.webp` et ramené à la taille d'affichage du logo (213 px de large sur 457 dans le fichier, soit 0,4661) : le E 43 × 57 px dans le fichier → 20,0 × 26,6 à l'écran un trait 5 px d'épaisseur → 2,33 un écart 21 px → 9,79 trait du milieu 29 px de large sur 43 → 67,4 % L'icône reprend ces valeurs telles quelles. Elle sert aux deux états : le hamburger et le E ont la MÊME géométrie, seuls la couleur et la longueur du trait du milieu changent. C'est ce qui garantit que le bouton ne change pas de taille à l'ouverture — rien ne saute. Les traits sont à angle vif, comme dans le logo et comme dans l'icône d'onglet : pas d'arrondi. ============================================================ */ /* Seule la HAUTEUR est donnée : le `viewBox` porte le rapport 43/57, donc la largeur suit toute seule. Une valeur à régler au lieu de deux, et aucun risque de les désaccorder. Et cette hauteur est un ENTIER, 27 px et non 26,6. Trouvé en mesurant : à 26,6 px, le trait du bas — qui touche le bord du dessin — sortait à 1,77 px au lieu de 2,33, rogné par le bord fractionnaire de la boîte. Les deux autres traits, eux, étaient justes. C'est le même genre de défaut que celui que Marc a repéré sur le « + » : une cote fractionnaire, un arrondi qui ne tombe pas où on croit. Le E du logo mesure 26,57 px à côté — l'écart est de quatre dixièmes de pixel, invisible ; le trait rogné, lui, se voyait. */ /* L'ICÔNE DU MENU SUIT LE LOGO, et c'est la règle écrite le 12/09 : « le E du menu fait la taille du E du logo, à chaque largeur d'écran ». Le E occupe 47,5 % de la hauteur du logo — 15,18 sur 32, 26,6 sur 56 —, et le dessin étant un SVG d'un seul tenant, la largeur et les trois traits suivent. Une seule source pour les deux depuis le 22/09 : `--h-logo`. Avant, le logo et l'icône avaient chacun leurs paliers, posés séparément ; ils sautaient ensemble par coïncidence, pas par construction. */ .menu-e{display:block;width:auto;height:calc(var(--h-logo) * 0.475)} .menu-e rect{ fill:currentColor; transform-box:fill-box;transform-origin:left center; transition:fill .18s ease,transform .18s ease; } /* ============================================================ Ouvert : les trois traits deviennent le E d'Equideals ------------------------------------------------------------ Demande de Marc du 12/09 : à l'ouverture, la croix cède la place au E du logo, rouge et gris, à la taille du hamburger. IL N'Y A PAS D'IMAGE À CHARGER, et c'est le point intéressant : le E du logo Equideals n'a pas de barre verticale. C'est exactement trois traits horizontaux — donc déjà un hamburger. Relevé au pixel dans le fichier du logo : traits de 16 px pour 168 de haut, alignés à gauche, celui du milieu large de 86 pour 125 (soit 69 %), le haut et le bas rouges, le milieu gris. Passer du hamburger au E ne demande donc que deux choses : raccourcir le trait du milieu à 67,4 % — 29 sur 43 dans le repère du dessin — et poser les deux teintes. Aucune requête de plus, aucune image à tenir à jour, et le dessin reste net à toute taille. Le raccourcissement se fait par `scaleX` et non en changeant la largeur : c'est la seule des deux qui s'anime partout, et le résultat est le même au pixel près puisque le rectangle est plein. La différence entre les deux états ne tient pas qu'à la couleur : le trait du milieu change aussi de longueur. Un daltonien voit donc le changement, et de toute façon `
` annonce lui-même son état aux lecteurs d'écran — l'icône n'a rien à porter de ce côté. ============================================================ */ .menu-boite[open] .menu-e-haut, .menu-boite[open] .menu-e-bas{fill:var(--e-rouge)} .menu-boite[open] .menu-e-milieu{fill:var(--e-gris);transform:scaleX(.6744)} .menu-boite[open] .menu-bouton{background:var(--fond)} @media(prefers-reduced-motion:reduce){.menu-e rect{transition:none}} /* Replié, le panneau doit disparaître — et il faut le DIRE. Les navigateurs masquent bien le contenu d'un `
` fermé, mais pas de la même façon selon les versions, et un enfant en `position:absolute` échappe au mécanisme : mesuré, le panneau gardait 177 px de haut et restait visible alors que le menu était replié. Une ligne explicite règle la chose partout. */ .menu-boite:not([open]) .menu{display:none} /* le panneau déroulé : au-dessus du contenu, jamais en le poussant — sinon l'ouverture du menu ferait sauter toute la page. */ .menu{ position:absolute;top:calc(100% + 9px);right:0;z-index:60; min-width:238px;max-width:calc(calc(100 * var(--vw)) - 32px); margin:0;padding:7px;list-style:none; background:var(--surface);border:1px solid var(--filet-fort);border-radius:4px; box-shadow:var(--ombre-levee); max-height:calc(calc(100 * var(--vh)) - 130px);overflow-y:auto;overscroll-behavior:contain; } .menu a{ display:block;text-decoration:none;color:var(--encre-douce); font:500 14px/1.3 var(--police-texte); padding:10px 12px;border-radius:3px;border:1px solid transparent; } .menu a:hover{color:var(--encre);background:var(--fond)} .menu a:focus-visible{outline:2px solid var(--focus);outline-offset:-2px} .menu [aria-current="page"]{color:var(--encre);background:var(--fond);font-weight:600} .menu-ext{color:var(--encre-douce);font-size:11px;margin-left:3px} @media(max-width:640px){ /* Sur téléphone le logo se réduit — il est servi à 121,7 px de large au lieu de 213. Le E qu'il contient passe donc de 20 × 26,6 à 11,45 × 15,18, et l'icône du menu le suit : la règle est « le E du menu fait la taille du E du logo », à chaque largeur d'écran, et non « la taille qu'il a sur ordinateur ». C'est aussi ce qui garde l'en-tête du téléphone à 63 px : à 26,6 px d'icône le bouton dépasserait le logo, haut de 32. Le dessin étant un SVG, il n'y a qu'à donner la hauteur : la largeur et les trois traits suivent exactement. C'est le point qui manquait à la version précédente, où chaque trait était réglé séparément — et où les épaisseurs relatives changeaient donc d'une taille à l'autre. */ } /* ============================================================ En-tête figé, et logo agrandi — ordinateur et tablette ------------------------------------------------------------ Demande de Marc du 10 septembre : « grandir le logo EQD en haut à gauche et faire en sorte que cette première ligne avec le logo et les menus soit figée en haut de page (le reste déroule), sans rien changer sur téléphone ». D'où le `min-width:641px` : c'est exactement le complément de la requête ci-dessus, qui porte le réglage du téléphone. Rien de ce qui suit ne s'applique en dessous. Pourquoi `sticky` et non `fixed` : `sticky` garde l'élément dans le flux, donc rien ne passe dessous et la hauteur de la page ne change pas. `fixed` aurait demandé de compenser à la main la hauteur du bandeau — et de la recompenser à chaque passage du menu à la ligne. Le logo passe de 38 à 56 pixels de haut, soit près de la moitié en plus. Au-delà, le bandeau devient un bloc : il est figé, donc il faut qu'il reste mince. ============================================================ */ /* Repli si le petit script du pied ne s'exécute pas. Mesuré : 97 px pour le bandeau, 58 px pour le pied, en fenêtre large. */ :root{--haut-bandeau:97px;--haut-pied:58px} /* LE TÉLÉPHONE AUSSI, DEPUIS LE 03/10 (D111). Marc, sur iPhone : « le haut de l'écran (logo + hamburger) défile aussi alors qu'il reste fixe sur PC. Pour moi ce haut de page devrait rester fixe ». La réserve du 10/09 (« sans rien changer sur téléphone ») est levée : la règle vaut à toutes les largeurs. Sur téléphone l'en-tête fait 63 px. L'accueil à photographie l'avait déjà (`.fond-photo .bandeau`, plus bas). */ .bandeau{ position:sticky;top:0;z-index:30; /* le bandeau passe au-dessus du contenu qui défile dessous */ } /* Le lien d'évitement doit rester au-dessus des deux bandeaux. */ .evitement{z-index:60} /* Un saut d'ancre — le lien « Aller au contenu », ou une adresse finissant par #contenu — doit s'arrêter SOUS l'en-tête figé, sinon il dépose le lecteur derrière lui. `scroll-padding-top` le fait sans une ligne de JavaScript. */ html{scroll-padding-top:calc(var(--haut-bandeau) + 12px)} /* ---------- titre de page ---------- */ .titre{padding-top:clamp(30px,calc(5 * var(--vw)),54px);padding-bottom:clamp(20px,calc(3 * var(--vw)),30px)} /* padding-top/bottom et non le raccourci « padding » : le raccourci remettrait à zéro les marges latérales posées par .enveloppe. */ .surtitre{ font:500 11px/1 var(--police-chiffres);letter-spacing:.2em;text-transform:uppercase; color:var(--accent-texte);margin:0 0 14px; } h1{ font-family:var(--police-titre);font-weight:400; font-size:clamp(32px,calc(6 * var(--vw)),52px);line-height:1.08;letter-spacing:-.015em; margin:0 0 18px;text-wrap:balance; } /* Le chapeau s'aligne sur la trame comme le reste (22/09) : il portait `62ch`, soit 586 px et 73 caractères — une quatrième largeur sur la page. `--lecture` le ramène à la colonne. *Et `ch` n'est pas `caractère` : il se compte sur le chiffre zéro, plus large que la lettre moyenne.* */ /* LES CHAPEAUX PRENNENT TOUTE LA TRAME (22/09). Marc : « j'imaginais les textes comme "depuis 2008…" ou "Les opérations conduites par…" occuper plus de largeur ». Ils ne sont plus bornés par la colonne de lecture : la trame est leur largeur. ⚠ À 17 px sur 790 px, une ligne fait **101 caractères** — le tiers de trop par rapport à la règle (45 à 75). Marc veut voir ce que cela donne avant de trancher ; il faudrait un corps de 24 px pour que la pleine trame rentre dans la règle. Le chiffre est ici pour qu'on ne l'oublie pas. */ .chapeau{color:var(--encre-douce);font-size:clamp(15px,calc(1.6 * var(--vw)),17px);margin:0} /* Les règles du bloc de comptage — « 92 opérations · 2014-2026 · 5 types d'intervention » — ont été retirées le 10/09 avec le bloc lui-même. La variable --police-chiffres, elle, reste : elle sert aux dates, aux effectifs des pastilles et aux surtitres. */ /* ---------- commandes ---------- */ /* Sans JavaScript, les 92 opérations s'affichent toutes, classées de la plus récente à la plus ancienne, et le bandeau de commandes reste caché : des filtres qui ne filtrent pas seraient pires que pas de filtres. */ .commandes{display:none} .js .commandes{ display:block; position:sticky;top:0;z-index:20;background:var(--fond); border-top:1px solid var(--filet);border-bottom:1px solid var(--filet); padding:14px 0;margin-bottom:clamp(20px,calc(3 * var(--vw)),30px); } /* Le bandeau de filtres est collant, comme l'en-tête. Sur ordinateur et tablette, où l'en-tête est figé, il doit se coller SOUS lui et non par dessous : d'où le décalage de la hauteur du bandeau (10/09). Cette règle doit venir APRÈS celle du dessus : à spécificité égale, c'est l'ordre du fichier qui tranche. Placée plus haut, dans la section de l'en-tête, elle était sans effet — l'en-tête recouvrait le bandeau de filtres de 97 pixels, mesuré au navigateur. */ /* À toutes les largeurs depuis le 03/10 (D111), l'en-tête étant figé partout. */ .js .commandes{top:var(--haut-bandeau)} .commandes .enveloppe, .commandes .commandes-dedans{display:flex;flex-direction:column;gap:12px} .ligne-recherche{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .champ{position:relative;flex:1 1 260px;min-width:0} .tri{flex:0 0 auto} @media(max-width:560px){ .champ{flex:1 1 100%} .tri{flex:1 1 100%} } .champ svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--encre-tenue);pointer-events:none} #q{ width:100%;padding:11px 38px 11px 34px;border:1px solid var(--filet-fort);border-radius:2px; background:var(--surface);color:var(--encre);font:400 15px/1.3 var(--police-texte); } #q::placeholder{color:var(--encre-tenue)} #q:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent} .vider{ position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent; color:var(--encre-tenue);cursor:pointer;font-size:17px;line-height:1;padding:6px 8px;border-radius:2px; } .vider:hover{color:var(--encre)} .tri{ appearance:none;border:1px solid var(--filet-fort);background:var(--surface);color:var(--encre); border-radius:2px;padding:11px 12px;font:400 13px/1 var(--police-texte);cursor:pointer; } .tri:focus-visible{outline:2px solid var(--focus);outline-offset:1px} .filtres{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none} .puce{ --teinte:var(--encre-tenue); display:inline-flex;align-items:center;gap:7px;cursor:pointer; border:1px solid var(--filet-fort);background:var(--surface);color:var(--encre-douce); border-radius:2px;padding:8px 12px;font:500 12.5px/1 var(--police-texte);white-space:nowrap; transition:background-color .14s,border-color .14s,color .14s; } .puce::before{content:"";width:8px;height:8px;background:var(--teinte);flex:0 0 auto} .puce em{font-style:normal;font-family:var(--police-chiffres);font-size:11.5px;color:var(--encre-tenue);font-variant-numeric:tabular-nums} .puce:hover{border-color:var(--teinte);color:var(--encre)} /* Actif : fond teinté, bordure de la couleur, et une coche. Pas d'aplat plein : deux des cinq couleurs de la palette ne donnent pas un contraste suffisant sous du texte blanc (mesuré : 3,7 et 3,9 pour 4,5 requis). Le fond teinté garde le texte à pleine lisibilité. */ .puce[aria-pressed="true"]{ background:var(--surface); background:color-mix(in srgb, var(--teinte) 13%, var(--surface)); border-color:var(--teinte);box-shadow:inset 0 0 0 1px var(--teinte); color:var(--encre);font-weight:600; } .puce[aria-pressed="true"] em{color:var(--encre-douce)} .puce[aria-pressed="true"]::before{ background:none;width:auto;height:auto;color:var(--teinte); content:"✓";font-size:12px;line-height:1;font-weight:700; } .puce[disabled]{opacity:.38;cursor:default} .puce[disabled]:hover{border-color:var(--filet-fort);color:var(--encre-douce)} .puce:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .puce.toutes{--teinte:var(--encre)} .puce.toutes::before,.puce.toutes[aria-pressed="true"]::before{ /* Trois tiers depuis le 02/10 (D105) : il n'y a plus que trois natures. */ background:linear-gradient(90deg,var(--t-vendeur) 0 33.34%,var(--t-acheteur) 33.34% 66.67%,var(--t-levee) 66.67% 100%); } /* Les deux cases « Entreprises : in bonis / en difficulté » (02/10, D105), sous les pastilles. Même corps que les pastilles, sans cadre : ce sont des cases, pas des boutons. */ .etats{ display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px; margin:0;padding:0;border:0;min-width:0; font:500 12.5px/1.2 var(--police-texte);color:var(--encre-douce); } .etats legend{float:left;padding:0;margin:0;color:var(--encre-tenue)} .etats label{display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap} .etats input{margin:0;width:14px;height:14px;accent-color:var(--encre);cursor:pointer} .etats input:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .compte{ font:400 13px/1 var(--police-chiffres);color:var(--encre-tenue); font-variant-numeric:tabular-nums;padding:2px 0 0; } /* ============================================================ Le bas d'une carte d'opération : contrepartie et renvois ------------------------------------------------------------ Deux demandes de Marc du 10 septembre au soir. 1. « La zone de la contrepartie doit être alignée en bas, juste au-dessus de la zone "Conseil…", de façon à ce qu'elles soient alignées même si le texte de description ne fait pas le même nombre de lignes. » D'où `margin-top:auto` : dans une colonne flexible, cela pousse le bloc contre le bas. `.corps` a déjà `flex:1`, il a donc de la hauteur à distribuer, et les contreparties de trois cartes voisines se retrouvent sur la même ligne quoi que fasse l'activité au-dessus. 2. « Les boutons me sembleraient idéalement placés sur la droite des tombstones, à la hauteur de "cédée à". » La place y était libre, et c'est en effet le seul endroit de la carte qui ne coûte pas une ligne. ============================================================ */ .bas-carte{ margin-top:auto;display:flex;align-items:flex-end;gap:12px; } .bas-carte .contrepartie{flex:1 1 auto;min-width:0} /* Les renvois : des ICÔNES, et le mot au survol seulement — « je ne voulais pas agrandir les tombstones ». Deux conséquences à tenir : - le mot est en `position:absolute`, donc son apparition ne déplace rien. Un mot qui pousse ses voisins au survol fait sauter la carte entière ; - l'icône seule ne dit rien à un lecteur d'écran, ni à qui navigue au clavier sans souris. Le nom du lien est donc porté par `aria-label` dans le gabarit, et le mot visible est marqué `aria-hidden` : sans quoi le lien s'annoncerait deux fois. Sur un écran tactile il n'y a pas de survol : le mot ne s'affiche pas, et toucher l'icône suit le lien. C'est acceptable ici — l'icône est un raccourci, pas le seul chemin vers la fiche. */ .renvois{display:flex;gap:6px;flex:0 0 auto;margin-left:auto} .renvoi{ position:relative;display:inline-flex;align-items:center;justify-content:center; width:27px;height:27px;flex:0 0 auto;text-decoration:none; border:1px solid var(--filet);border-radius:2px; color:var(--encre-tenue);background:var(--surface); transition:border-color .14s,color .14s,background-color .14s; } .renvoi svg{width:14px;height:14px;display:block} .renvoi:hover{border-color:var(--teinte);color:var(--teinte);background:var(--fond)} .renvoi:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .renvoi-mot{ position:absolute;bottom:calc(100% + 6px);right:-1px;z-index:6; white-space:nowrap;pointer-events:none; background:var(--encre);color:var(--surface); font:500 10px/1 var(--police-chiffres);letter-spacing:.07em;text-transform:uppercase; padding:5px 7px;border-radius:2px; opacity:0;transform:translateY(3px); transition:opacity .13s,transform .13s; } .renvoi:hover .renvoi-mot, .renvoi:focus-visible .renvoi-mot{opacity:1;transform:none} /* La carte sur laquelle une ancre vient de déposer le visiteur se signale quelques secondes (10/09). Sans cela, arriver au milieu d'une liste de quarante cartes ne dit pas laquelle on venait voir : le défilement s'arrête quelque part, et rien ne distingue la bonne. L'animation ne joue qu'une fois, et rien ne dépend d'elle : si le navigateur l'ignore, la carte est simplement là. Pour qui préfère les interfaces immobiles, le liséré reste, sans clignoter. */ .fiche:target{outline:2px solid var(--accent);outline-offset:3px} @media(prefers-reduced-motion:no-preference){ .fiche:target{animation:signaler 2.4s ease-out 1 forwards} } @keyframes signaler{ 0%,55%{outline-color:var(--accent)} 100%{outline-color:transparent} } @media(prefers-reduced-motion:reduce){ .renvoi-mot{transition:none;transform:none} } /* NOTE D'ORDRE, écrite après m'être fait prendre trois fois dans ce fichier : ce bloc doit rester ICI, après toutes les règles de base des commandes. Il les redéfinit à spécificité égale, donc c'est l'ORDRE du fichier qui tranche. Placé plus haut — dans la section de l'en-tête, où il paraissait logique — il était sans effet : le décalage du bandeau de filtres ne se faisait pas, et le champ de recherche gardait sa hauteur de 260 pixels parce que `flex:1 1 260px` porte sur la hauteur dans un conteneur en colonne. Les deux défauts ont été trouvés au navigateur, aucun à la lecture. */ /* ============================================================ La colonne de commandes — ordinateur et tablette large ------------------------------------------------------------ Demande de Marc du 10 septembre : « les filtres et la recherche doivent passer sur une colonne à droite, en face de la liste, colonne qui ne doit pas défiler quand le reste défile ; les options les unes au-dessus des autres, et la zone de recherche pas plus large que le plus large des boutons ». Le seuil est **860 pixels**, et non 641 comme pour l'en-tête et le pied. C'est un choix qui se mesure : la colonne prend 240 pixels, et en dessous de 860 il n'en resterait pas assez pour deux cartes côte à côte — la liste tomberait sur une seule colonne, ce qui serait perdre au change. Une tablette en paysage passe le seuil ; en portrait (810 px) elle garde le bandeau du haut. À Marc de dire si ce dernier cas le gêne. La colonne est **à droite** et pourtant **avant la liste dans la page** : c'est `order` qui l'envoie à droite. Ainsi, au clavier ou à la voix, on rencontre les filtres avant la liste qu'ils commandent — l'ordre logique —, et sur un écran étroit le bandeau reste au-dessus sans qu'on ait rien à défaire. ============================================================ */ /* LA BOÎTE QUI SERT DE RÉFÉRENCE AUX GRILLES (22/09). Les grilles comptent leurs colonnes sur la place qu'elles ont, et cette place est celle de leur conteneur — pas celle de la fenêtre. `container-type:inline-size` le déclare mesurable ; `@container liste (…)` s'y rapporte. Elle est posée sur les deux boîtes qui portent une grille : la colonne de liste des quatre pages de rubrique, et l'enveloppe de la page Équipe, qui n'a pas de colonne de filtres. *Une grille sans conteneur nommé garderait sa mise en page la plus étroite sans rien dire : les deux endroits ont été cherchés dans les gabarits, pas supposés.* `inline-size` et non `size` : seule la largeur sert, et déclarer la hauteur mesurable obligerait à la fixer. */ /* LES PAGES DE LISTE, ET ELLES SEULES, PRENNENT LE CADRE (22/09). `zone-large` est posée dans les gabarits sur les boîtes d'une page de rubrique : le titre, le chapeau et la liste. Elles s'élargissent ensemble, sinon le titre serait centré dans 790 au-dessus de cartes larges de 1 224 — *deux boîtes qui doivent s'aligner doivent recevoir la même largeur, pas seulement celle qui saute aux yeux.* L'en-tête et le pied gardent la trame : le logo continue d'annoncer la largeur du site. Sur ces cinq pages, la liste est donc plus large que l'en-tête. C'est un choix de Marc, fait en connaissance de cause. */ .zone-large{max-width:calc(var(--cadre) + 56px)} .colonne-liste, .zone-gens{container-type:inline-size;container-name:liste} .zone-liste{} @media(min-width:860px){ .zone-liste{ display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:0 clamp(24px,calc(3 * var(--vw)),44px); align-items:start; } .colonne-liste{order:1;min-width:0} /* Filtres éteints sur la rubrique (02/10, D107) : la liste prend toute la largeur. */ .zone-liste.sans-filtres{display:block} .js .commandes{ order:2; /* la colonne ne défile pas : elle se cale sous l'en-tête figé et y reste */ position:sticky;top:calc(var(--haut-bandeau) + 22px); /* plus de bandeau : ni fond pleine largeur, ni filets horizontaux */ background:none;border:0;padding:0;margin-bottom:0; /* si la fenêtre est courte et la liste de filtres longue, la colonne défile en elle-même plutôt que d'être coupée */ max-height:calc(calc(100 * var(--vh)) - var(--haut-bandeau) - var(--haut-pied) - 44px); overflow-y:auto;overscroll-behavior:contain; } .commandes .commandes-dedans{gap:14px;padding:0} /* Les options les unes au-dessus des autres, et chacune sur toute la largeur de la colonne : c'est ce qui rend la lecture verticale possible. Les effectifs se rangent à droite, alignés, donc comparables. */ .filtres{flex-direction:column;gap:6px} .filtres li{display:block} .puce{width:100%;justify-content:flex-start;white-space:normal;text-align:left} .puce em{margin-left:auto;padding-left:8px} /* Les deux cases « in bonis / en difficulté », l'une sous l'autre comme les pastilles, l'intitulé au-dessus (02/10, D105). */ .etats{flex-direction:column;align-items:flex-start;gap:7px} /* « La zone de recherche n'est pas plus large que le plus large des boutons de filtrage » : les boutons faisant toute la largeur de la colonne, le champ la fait aussi — donc jamais plus. `flex:0 0 auto` et non `1 1 auto`, et c'est un défaut payé comptant : dans un conteneur en COLONNE, `flex-basis` porte sur la HAUTEUR. Mon premier jet laissait donc le champ s'étirer sur toute la hauteur libre de la colonne, et la loupe — centrée verticalement dans ce champ — flottait seule à 100 pixels sous la case de saisie. Mesuré au navigateur ; à la lecture, la règle semblait juste. */ .ligne-recherche{flex:0 0 auto;flex-direction:column;align-items:stretch;gap:10px} .champ{flex:0 0 auto;width:100%} .filtres,.compte{flex:0 0 auto} #q{font-size:14px;padding:10px 34px 10px 32px} .compte{padding-top:2px} } /* En dessous de 860 px, le bandeau garde son fond et ses filets d'un bord à l'autre de l'écran. Il est maintenant DANS l'enveloppe de la liste, qui pose des marges latérales : on les annule, puis on les rend en padding. Le rendu est celui d'avant le 10/09, mesuré identique à 390 px. */ @media(max-width:859px){ .js .commandes{ margin-left:calc(-1 * var(--pas)); margin-right:calc(-1 * var(--pas)); padding-left:var(--pas); padding-right:var(--pas); } } /* ---------- grille ---------- */ .grille{ display:grid;gap:14px;grid-template-columns:1fr; margin:0 0 clamp(40px,calc(6 * var(--vw)),72px);padding:0;list-style:none; } /* LE NOMBRE DE COLONNES SE COMPTE SUR LA GRILLE, PAS SUR LA FENÊTRE (22/09). C'est le défaut que Marc a photographié sur la page Références : le bandeau de filtres semblait « mal placé », posé par-dessus les cartes. Il n'était pas mal placé. La grille, elle, débordait sous lui. Trois `media queries` comptaient les colonnes sur la largeur de la FENÊTRE. Or la grille n'a pas la fenêtre : la colonne de filtres lui en prend 240 plus la gouttière, et l'enveloppe le reste. À 1 440 points de fenêtre, la grille ne fait que 507 px — et recevait pourtant quatre colonnes, soit 882 px de cartes dans 507 px de place. Elles passaient sous la colonne de filtres, qui est en `sticky` donc au-dessus. `auto-fill` avec une largeur minimale compte sur la grille elle-même : deux cartes dans 507 px, quatre dans 941. Aucune `media query`, donc aucune mesure prise sur le mauvais objet. **C'est la troisième fois le même jour qu'une largeur de fenêtre servait à décider d'une largeur de contenu — les paliers des carrousels, ceux du logo, et ceux-ci.** 210 px n'est pas un chiffre neuf : c'est la largeur qu'une carte avait déjà à quatre colonnes dans l'ancienne page. La grille rend donc exactement ce qu'elle rendait là où elle rendait bien. */ .grille{grid-template-columns:repeat(auto-fill, minmax(min(100%, 210px), 1fr))} .grille [hidden]{display:none !important} .pierre{ --teinte:var(--encre-tenue); display:flex;flex-direction:column;background:var(--surface); border:1px solid var(--filet);border-top:2px solid var(--teinte); box-shadow:var(--ombre);transition:box-shadow .16s,transform .16s; } .pierre:hover{box-shadow:var(--ombre-levee);transform:translateY(-2px)} @media(prefers-reduced-motion:reduce){.pierre,.pierre:hover{transition:none;transform:none}} .pierre[data-type="Conseil vendeur"]{--teinte:var(--t-vendeur)} .pierre[data-type="Conseil acheteur"]{--teinte:var(--t-acheteur)} .pierre[data-type="Levées de fonds"]{--teinte:var(--t-levee)} .pierre[data-type="Affaire en difficultés"]{--teinte:var(--t-difficulte)} .pierre[data-type="Conseil management"]{--teinte:var(--t-management)} .plaque{ background:var(--plaque);border-bottom:1px solid var(--filet); height:104px;display:flex;align-items:center;justify-content:center;padding:16px 22px; } .plaque img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block} .corps{padding:16px 18px 0;flex:1;display:flex;flex-direction:column;gap:9px} .nom{ font-family:var(--police-titre);font-weight:600;font-size:17.5px;line-height:1.22; margin:0;color:var(--encre);text-wrap:balance; } .activite{margin:0;font-size:13.5px;line-height:1.45;color:var(--encre-douce)} .contrepartie{ margin:5px 0 0;padding:8px 0 0 12px;border-left:2px solid var(--teinte); display:flex;flex-direction:column;gap:3px; } .contrepartie .etiquette{ font:500 9.5px/1 var(--police-chiffres);letter-spacing:.15em;text-transform:uppercase; color:var(--teinte); } .contrepartie .partie{font-size:14px;line-height:1.35;font-weight:500;color:var(--encre)} .pied{ display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:14px;padding:11px 18px;border-top:1px solid var(--filet); } .type{ font:500 10.5px/1.2 var(--police-texte);letter-spacing:.09em;text-transform:uppercase; color:var(--teinte); } .annee{ font:500 12.5px/1 var(--police-chiffres);color:var(--encre-tenue);font-variant-numeric:tabular-nums; } /* ---------- rien à afficher ---------- */ .vide{ border:1px dashed var(--filet-fort);padding:44px 22px;text-align:center;color:var(--encre-douce); margin:0 0 60px; } .vide p{margin:0 0 14px} .vide button{ border:1px solid var(--filet-fort);background:var(--surface);color:var(--encre); padding:9px 15px;border-radius:2px;cursor:pointer;font:500 13px/1 var(--police-texte); } .vide button:focus-visible{outline:2px solid var(--focus);outline-offset:2px} /* ---------- corps de texte courant ---------- */ .texte{max-width:70ch;padding-bottom:clamp(40px,calc(6 * var(--vw)),72px)} /* Les mentions légales : un texte qu'on parcourt pour y trouver un fait, pas qu'on lit d'un bout à l'autre. Les sous-titres sont donc plus petits et plus serrés que sur une page de fond, et les listes d'identification n'ont pas de puces — ce sont des lignes de renseignement, pas une énumération d'idées. */ .texte-legal h2{font-size:clamp(18px,calc(1.9 * var(--vw)),21px);margin:30px 0 8px} .texte-legal ul{list-style:none;padding-left:0;margin:8px 0 18px} .texte-legal ul li{margin:0 0 3px} .texte-legal p{margin:0 0 12px} .texte h2{font-family:var(--police-titre);font-weight:600;font-size:clamp(21px,calc(2.6 * var(--vw)),27px);line-height:1.2;margin:34px 0 12px} .texte h3{font-family:var(--police-titre);font-weight:600;font-size:19px;line-height:1.25;margin:28px 0 10px} .texte p,.texte ul,.texte ol{margin:0 0 15px} .texte a{color:var(--accent-texte);text-decoration-thickness:1px;text-underline-offset:2px} .texte img{height:auto;margin:18px 0} .texte table{border-collapse:collapse;width:100%;margin:18px 0;font-size:14px} .texte th,.texte td{border:1px solid var(--filet);padding:8px 10px;text-align:left} /* ---------- pied de page ---------- */ .bas{border-top:1px solid var(--filet);background:var(--surface);padding:26px 0 34px;margin-top:auto} .bas .enveloppe{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:space-between;align-items:baseline} .bas p{margin:0;font-size:12.5px;color:var(--encre-tenue);max-width:70ch} .bas strong{color:var(--encre-douce);font-weight:500} .bas a{color:var(--encre-douce);text-decoration:none} .bas a:hover{color:var(--encre);text-decoration:underline} body{display:flex;flex-direction:column;min-height:calc(100 * var(--vh))} main{flex:1 0 auto} /* Les séparateurs de la ligne de coordonnées : un tiret cadratin après le nom, un point médian entre les coordonnées. Ils sont dans des `span` pour que le gabarit puisse en faire disparaître un avec le champ qu'il annonce — un « · » orphelin devant un téléphone absent se remarque. */ .bas-sep{color:var(--filet-fort);padding:0 2px} /* Le lien LinkedIn : le mot, dans une pastille discrète. Ce n'est pas le logo de LinkedIn — voir la note en tête de `pied.php`. */ .bas-in{ display:inline-block;border:1px solid var(--filet-fort);border-radius:2px; padding:4px 9px;margin-right:14px; font:500 11px/1 var(--police-chiffres);letter-spacing:.08em;text-transform:uppercase; } .bas-in:hover{background:var(--fond);text-decoration:none;color:var(--encre)} .bas-in:focus-visible{outline:2px solid var(--focus);outline-offset:1px} /* Quand le pictogramme officiel de LinkedIn est là, il remplace le mot : plus de cadre, plus de fond — l'image porte déjà le sien. Elle n'est ni recolorée ni recadrée ; seule sa hauteur est fixée, à 21 pixels, le minimum que LinkedIn indique pour un écran — le fichier officiel mesure 635 × 540 px, marque déposée comprise, et se rend donc à 28 × 24. La largeur suit d'elle-même, quelles que soient les dimensions du fichier déposé. L'espace de dégagement autour de la marque — que les conditions d'usage demandent — est donné par la marge droite et le `padding` : rien ne vient coller le pictogramme. */ .bas-in-picto{border:0;padding:2px;background:none} .bas-in-picto img{height:24px;width:auto;display:block} .bas-in-picto:hover{background:none} .bas-in-picto:hover img{opacity:.82} @media(prefers-reduced-motion:no-preference){.bas-in-picto img{transition:opacity .15s}} .bas-fin{display:flex;align-items:center;gap:0} .bas-copie{white-space:nowrap} /* Le lien vers les mentions légales, à droite du copyright — la place demandée par Marc le 12/09. Discret par nature : c'est une obligation légale, pas une invitation. Il ne se met jamais à la ligne tout seul (`nowrap`) : « Mentions » sur une ligne et « légales » sur la suivante ferait un pied bancal, et le pied est figé en bas de fenêtre. */ .bas-legal{white-space:nowrap;text-decoration:none;border-bottom:1px solid transparent} .bas-legal:hover, .bas-legal:focus-visible{border-bottom-color:currentColor} /* Sur un téléphone, le pied s'empile déjà : le lien passe alors à la ligne avec le copyright plutôt que de forcer une largeur. */ @media (max-width:640px){ .bas-fin{flex-wrap:wrap;row-gap:4px} } /* ============================================================ Pied figé en bas de fenêtre — ordinateur et tablette ------------------------------------------------------------ Demande de Marc du 10 septembre : « pareil sur ordi et tablette : laisse-le fixe en bas de fenêtre ». Ici c'est `fixed` et non `sticky`, contrairement à l'en-tête : un pied `sticky` reste dans le flux, donc il ne remonte au bas de l'écran que si la page est plus haute que la fenêtre — sur une page courte il resterait au milieu de l'écran. `fixed` le pose toujours au bas de la fenêtre. Le prix de `fixed` est qu'il sort du flux : il faut lui rendre sa place, sinon les dernières lignes de la page passent dessous. D'où le `padding-bottom` sur `main`, égal à la hauteur du pied, mesurée par le script du pied et rangée dans `--haut-pied`. La ligne de coordonnées est mise en UNE seule ligne, et les marges hautes et basses réduites : un bandeau figé mange l'écran, il doit donc rester mince. Mesuré à 58 pixels, soit moins que la hauteur du bandeau du haut. Sur téléphone (640 px et moins) rien de tout cela ne s'applique : le pied reste en fin de page, sur plusieurs lignes, et l'écran entier reste au texte. ============================================================ */ @media(min-width:641px){ .bas{ position:fixed;bottom:0;left:0;right:0;z-index:25; padding:14px 0; border-top:1px solid var(--filet-fort); } .bas .enveloppe{gap:6px 28px;flex-wrap:nowrap;align-items:center} .bas p{font-size:12px;max-width:none} .bas-coord{ /* la ligne se raccourcit par la fin plutôt que de passer à la ligne : le nom et le téléphone, en tête, restent lisibles jusqu'au bout */ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0; } .bas-fin{flex:0 0 auto} /* On rend au contenu la place que le pied lui a prise. */ main{padding-bottom:calc(var(--haut-pied) + 18px)} } /* Entre 641 et 1 000 pixels — une tablette, une fenêtre réduite — la ligne du pied ne tient plus. L'adresse postale s'efface alors, et non le courriel : dans un pied qui sert à joindre quelqu'un, le téléphone et le courriel passent devant, et l'adresse est sur la page Contact. Mesuré sans cette règle : à 820 px le courriel s'affichait « contact@equide… ». */ @media(min-width:641px) and (max-width:1000px){ .bas-adresse{display:none} } /* ============================================================ Séance 6 — les autres gabarits. Rien de nouveau côté charte : mêmes jetons, mêmes rapports de taille, même carte. Ce qui suit ne fait que décliner le motif validé (D26) aux quatre rubriques suivantes. ============================================================ */ /* ---------- l'accueil : accroche et pavés ---------- */ /* Séance 6, 11/09, premier volet. L'accroche est la première phrase que lit un visiteur : elle a la taille d'un titre, pas celle d'un paragraphe. */ /* NOTE, payée comptant le 11/09 : la largeur maximale se pose sur le PARAGRAPHE, jamais sur `.enveloppe`. L'enveloppe centre son contenu par `margin:0 auto` ; lui donner une largeur réduite ne rétrécit pas le texte, elle le déplace au milieu de l'écran. L'accroche s'est retrouvée centrée sur huit lignes, et la capture d'écran l'a montré tout de suite. */ .accroche{ padding-top:clamp(30px,calc(5 * var(--vw)),58px); padding-bottom:clamp(22px,calc(3 * var(--vw)),36px); } .accroche p{ margin:0;max-width:17em; font-family:var(--police-titre);font-weight:400; font-size:clamp(26px,calc(4.4 * var(--vw)),44px);line-height:1.16; color:var(--encre); } /* Les pavés. Une colonne sur téléphone, trois côte à côte au-delà de 900 px. Ils ne sont pas de même nature : « Nos métiers » réunit trois entrées, les deux autres portent un texte suivi d'un lien. Ils n'auront donc pas la même hauteur, et c'est assumé — les aligner par le bas donnerait à Mission et Valeurs un blanc que rien ne justifie. Un filet en haut de chaque pavé les relie visuellement à défaut de les égaliser. */ /* ══ L'INTRODUCTION, SOUS LA PHOTOGRAPHIE (16/09) ══════════════════════════ ELLE PORTE LA CLASSE `chapeau`, ET NE REDÉFINIT AUCUNE TYPOGRAPHIE. C'est une correction du soir même, et Marc l'a vue avant moi : « la police de caractères n'est pas très homogène avec le reste… ou bien c'est identique au texte d'introduction de Références par exemple ? » Sa question valait la réponse. Ce n'était PAS identique, et le relevé dit de combien : 18 px contre 17, un interligne de 1,62 contre 1,55, et surtout la couleur `--encre` au lieu de `--encre-douce` — rgb(25,48,64) contre rgb(36,65,85). Même famille de caractères, donc rien d'évident ; juste un texte un peu plus gros et un peu plus noir que tous les autres chapeaux du site. C'est exactement ce qu'on perçoit sans pouvoir le nommer. J'avais écrit trois valeurs typographiques « proches de » celles du chapeau, au lieu de reprendre le chapeau. **Un style proche d'un autre est un style de plus** : il faudra le retoucher deux fois le jour où la charte bouge, et il dérivera. Ici la règle a disparu : l'introduction EST un chapeau, et le restera si le chapeau change. Ne reste que l'espace en dessous, qui n'appartient qu'à cette place-là. */ .accueil-intro{padding-bottom:var(--respiration)} .accueil-intro a{color:var(--accent-texte);text-decoration-thickness:1px;text-underline-offset:2px} /* ══ LES DEUX BLOCS DE PAVÉS (16/09) ═══════════════════════════════════════ Marc : « au vu des écarts de composition, peux-tu décomposer les trois pavés en 2 blocs ». IL A MIS LE DOIGT SUR UN VRAI DÉFAUT. Les trois pavés partageaient une grille de trois colonnes égales : Métiers, Mission, Valeurs côte à côte. Or le pavé des métiers porte TROIS entrées — titre, texte et « + » chacune — quand les deux autres en portent une. Dans une colonne du tiers, il était trois fois plus haut que ses voisins, et la rangée finissait par deux colonnes vides sous Mission et Valeurs. Deux blocs, donc deux rangées, et chacune composée pour ce qu'elle porte : les trois métiers en trois colonnes — ils sont de même nature, ils se comparent —, Mission et Valeurs en deux colonnes larges. La hauteur des voisins cesse d'être un accident. `.paves` garde ses réglages communs ; seule la répartition en colonnes change d'un bloc à l'autre. */ /* UN FILET ANNONCE UN BLOC : IL EN FAIT LA LARGEUR (22/09, troisième temps). Marc, capture à l'appui : « ça a aussi modifié ici ? ». Oui, et c'est un effet de bord que je n'avais pas regardé. En élargissant le cadre à 1 224, j'ai élargi les filets rouges des pavés avec lui — mais ce qu'ils annoncent, lui, n'a pas bougé : le bloc des métiers fait toujours 790, le texte de « Notre ADN » 561. Un trait de 1 224 px au-dessus d'un texte de 561 ne souligne plus rien, il barre la page. Les blocs de composition de l'accueil s'arrêtent donc à la trame, filet compris. *J'avais borné la GRILLE des métiers à 790 sans borner la section qui la contient : la bordure, elle, est portée par la section. Borner le contenu ne borne pas ce qui l'encadre.* */ .paves{ display:grid;grid-template-columns:1fr;gap:clamp(26px,calc(3 * var(--vw)),40px); padding-bottom:var(--respiration); } /* Le bloc des métiers : un seul pavé, donc une seule colonne ici — ce sont ses ENTRÉES qui se rangent en colonnes, plus bas. */ .paves-metiers{grid-template-columns:1fr} /* Le bloc Mission et Valeurs : autant de colonnes que de pavés, dans la limite de deux. `repeat(auto-fit, …)` et non `repeat(2, …)` : s'il ne reste qu'un pavé — l'autre page passée en brouillon, son texte d'accueil vidé — il occupe la largeur au lieu de laisser un trou. */ @media(min-width:640px){ .paves-pages{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))} } /* Les trois métiers côte à côte dès qu'il y a la place. En dessous de 900 px ils restent l'un sous l'autre : trois colonnes de 200 px couperaient les titres en deux. */ @media(min-width:900px){ /* DEUX RANGÉES DE DEUX, ET NON UNE DE TROIS PLUS UNE D'UN (22/09). Marc : « que se passerait-il si tu mettais les métiers sur 2 lignes de 2 plutôt qu'une ligne de 3 et une ligne avec un sujet unique ? ». Il y a quatre métiers ; trois colonnes en laissaient un seul sur la seconde rangée, avec deux colonnes vides à sa droite. Deux rangées de deux sont pleines toutes les deux, et leur colonne donne la trame du site. */ .paves-metiers .pave-liste{grid-template-columns:repeat(2,minmax(0,1fr))} /* LE BLOC DES MÉTIERS GARDE SA TRAME DANS UN CADRE PLUS LARGE (22/09, second temps). Sa règle est de Marc et n'a pas changé : deux colonnes de 371 px, la largeur du plus long titre. Le cadre de la page, lui, est passé à 1 224 ; sans cette borne les deux colonnes se seraient étirées à 590 px chacune, avec un texte de 371 dedans et 219 px de vide à droite de chaque paragraphe. *Une règle qui porte sur une colonne doit borner la grille, pas seulement le texte qui s'y trouve.* Calé à gauche : le bloc commence où commence le titre qui l'annonce. */ } .pave{border-top:2px solid var(--accent);padding-top:16px;min-width:0} /* À LA TAILLE DES TITRES DE RUBRIQUE (05/10/2026, D118). Marc : « pourquoi "Notre ADN" et "Métiers" sur la 1re page apparaissent plus petits que "Références" (et la suite) ? ». Parce que pavés et extraits avaient été dessinés séparément (23 px gras contre 36 px maigre), sans que rien ne l'impose. Toutes les sections de l'accueil s'annoncent désormais pareil : mêmes valeurs que `.titre-rubrique`, plus bas. Les sous-titres des métiers (`.pave-sous-titre`, 17 px gras) ne changent pas. */ .pave-titre{ margin:0 0 14px; font-family:var(--police-titre);font-weight:400; font-size:clamp(26px,calc(3.6 * var(--vw)),36px);line-height:1.12;letter-spacing:-.012em; text-wrap:balance;color:var(--encre); } /* LA COLONNE DE LECTURE N'EST PLUS UN PLAFOND À PART : c'est la trame elle- même (22/09). Un pavé occupe une colonne de la grille, et la grille est calculée pour que cette colonne tienne dans la règle typographique. Une largeur imposée en plus aurait été une quatrième largeur sur la page — exactement ce que Marc voulait supprimer. `--lecture` reste comme PLAFOND DE SÛRETÉ, pour un pavé qui se retrouverait seul sur toute la trame : sans lui il ferait 1 100 px, soit 145 caractères. Il ne mord jamais quand la grille fait son travail. */ .pave-texte{max-width:var(--lecture)} /* LE TITRE D'UN MÉTIER ÉTAIT PLUS PETIT QUE SON PROPRE PARAGRAPHE — 14,5 px contre 17. Marc l'a vu : « j'ai l'impression qu'ici elle est plus petite que les textes en-dessous ». C'était vrai, et c'est de mon fait : j'avais monté les paragraphes sans regarder ce qui les annonçait. La hiérarchie est rétablie — 17 px en gras pour le titre, 14,5 pour le texte. */ .pave-liste .pave-sous-titre{font-size:17px;font-weight:600} /* UN PAVÉ QUI N'EST PAS DANS UNE LISTE SE LIT COMME UN CHAPEAU (22/09). Marc : « traiter le texte détaillant Notre ADN comme depuis 2008, police et largeur ». C'est juste : ces pavés-là annoncent une page à eux seuls, ils ne sont pas une entrée parmi quatre. Ils prennent donc la trame entière et le corps des chapeaux. La règle ne vise que `.paves-pages` : les quatre métiers, eux, restent dans leur colonne de 371 px. *Le corps reprend le `clamp` du chapeau, et non « 17 px ». J'avais d'abord écrit 17 px fixes : à 900 points de large, « Depuis 2008 » descendait à 15 px pendant que « Notre ADN » restait à 17. Deux textes que Marc a demandé identiques ne le sont que s'ils citent la même règle.* */ /* La borne est portée par le PARAGRAPHE et non par le pavé : `--ligne` est en `em`, donc elle se compte sur le corps de l'élément qui la porte. Sur le pavé, le corps est celui hérité de la page, pas celui du chapeau — la largeur aurait été juste par hasard. */ .paves-pages .pave-texte{max-width:none} .paves-pages .pave-texte p{font-size:clamp(15px,calc(1.6 * var(--vw)),17px);line-height:1.55} .pave-texte p{margin:0 0 11px;font-size:14.5px;line-height:1.55;color:var(--encre-douce)} .pave-texte p:last-child{margin-bottom:0} /* La synthèse du pavé des métiers : elle chapeaute la liste, donc un peu d'air en dessous, et rien qui la distingue du reste — c'est du texte d'introduction, pas un encadré. */ .pave-synthese{margin-bottom:16px} .pave-liste{margin:0;padding:0;list-style:none;display:grid;gap:48px} .pave-sous-titre{ margin:0 0 5px;font:600 14.5px/1.3 var(--police-texte);color:var(--encre); } /* ============================================================ Le « + » qui mène à une page ------------------------------------------------------------ Demande de Marc du 12/09 : le même signe partout, à la fin de chaque partie — au lieu d'un sous-titre cliquable dans le pavé des métiers et d'un « En savoir plus → » dans les deux autres. Dessiné sur le principe du logo, comme il le proposait : barre horizontale ROUGE, barre verticale GRISE, et l'inverse au survol. Mêmes teintes que le E du menu, et la même proportion : un trait fait 9,5 % du côté. LES DEUX BARRES DOIVENT AVOIR EXACTEMENT LA MÊME ÉPAISSEUR, et c'est pour cela que le signe est un SVG et non deux éléments comme le E. Ma première version leur donnait la même valeur en CSS — 2,33 px — et Marc a vu que la verticale était plus fine. Mesuré : la rouge sortait sur 3 pixels d'écran, la grise sur 2. Une épaisseur fractionnaire, dans une boîte dont la position verticale tombait sur un demi-pixel, et le navigateur arrondit chaque barre pour son propre compte. Dans un SVG les deux rectangles partagent le même repère et sont tramés d'un seul coup : ils ne peuvent plus diverger. Rien n'est chargé : le SVG est écrit dans la page, aucune requête. La zone cliquable déborde de 6 px sans déplacer quoi que ce soit — la marge négative reprend exactement ce que le rembourrage ajoute. 32 × 32 px au doigt pour un signe de 20. ============================================================ */ /* Le signe vit DANS le texte, à la suite du dernier mot, précédé d'un espace insécable large qui l'écarte sans jamais le laisser seul en début de ligne par accident. Il prolonge donc la dernière ligne, et bascule sur la suivante s'il n'y tient pas — avec l'interligne du paragraphe, puisqu'il ne dépasse pas la hauteur d'une ligne. `vertical-align:-.22em` le pose sur la ligne de base du texte plutôt qu'au milieu : le + s'aligne alors sur le corps des lettres, et non sur leur hauteur totale, jambages compris. La zone cliquable déborde de 5 px sans rien peindre. À gauche, la marge négative est omise : ce rembourrage-là sert d'écart entre le dernier mot et le signe. Ailleurs elle reprend ce que le rembourrage ajoute, pour que le signe ne pousse rien. 23 × 23 px au doigt, soit la hauteur d'une ligne : de quoi viser, sans mordre sur la ligne du dessus. */ .plus{ display:inline-block;text-decoration:none; padding:5px;margin:-5px -5px -5px 0; vertical-align:-.22em; } .plus-dessin{display:block;width:13px;height:13px} .plus-verticale{fill:var(--plus-gris)} .plus-horizontale{fill:var(--e-rouge)} .plus-verticale,.plus-horizontale{transition:fill .18s ease} .plus:hover .plus-verticale{fill:var(--e-rouge)} .plus:hover .plus-horizontale{fill:var(--plus-gris)} .plus:focus-visible{outline:2px solid var(--focus);outline-offset:0} /* Les titres de l'accueil qui mènent où mène leur « + » (02/10, demande de Marc). Aucune forme ne change : même couleur, même police, pas de soulignement. Au survol seulement, une ombre sous les lettres. */ .titre-lien{color:inherit;text-decoration:none;transition:text-shadow .18s ease} .titre-lien:hover{text-shadow:0 2px 6px rgba(0,0,0,.28)} @media(prefers-reduced-motion:reduce){.titre-lien{transition:none}} @media(prefers-reduced-motion:reduce){ .plus-verticale,.plus-horizontale{transition:none} } /* ============================================================ Les extraits de rubrique sur l'accueil ------------------------------------------------------------ Séance 6, 12 septembre 2026. Demande de Marc : montrer sous les pavés le début de chaque rubrique, avec un « + » vers la rubrique entière. Un extrait reprend la tête de sa rubrique — sur-titre, titre, chapeau — et ses premières fiches, avec exactement les mêmes cartes. Deux choses le distinguent de la page elle-même : 1. son titre est un `h2` et non un `h1`, et il est donc plus petit : sur l'accueil, le titre de premier niveau est l'accroche ; 2. un filet le sépare du précédent. Cinq rubriques à la suite, sans rien entre elles, se lisent comme un seul bloc interminable. Les cartes, elles, ne sont pas retouchées : c'est le même fragment que sur la rubrique, et lui donner un autre visage ici ferait deux dessins à tenir. ============================================================ */ /* Les extraits de rubrique — carrousels et Références — s'arrêtent à la trame comme le reste (22/09). Leur filet allait auparavant d'un bord à l'autre de la fenêtre, ce qui donnait à la page deux largeurs de plus. */ /* LE FILET D'UN EXTRAIT S'ALIGNE SUR SES CARTES, PAS SUR LA GOUTTIÈRE. Il était porté par `.extrait`, dont la largeur vaut le cadre PLUS les deux gouttières : il dépassait donc les cartes de 28 px de chaque côté — 1 280 contre 1 224. Le défaut existait déjà avant l'élargissement (846 contre 790) ; il se voit à 1 280. Le filet passe sur un pseudo-élément à l'intérieur du rembourrage, où il fait exactement la largeur du contenu. */ .extrait{max-width:var(--largeur);margin-inline:auto} .titre-extrait{ padding-top:0; padding-bottom:clamp(14px,calc(1.6 * var(--vw)),20px); } .titre-extrait::before{ content:"";display:block; border-top:1px solid var(--filet); margin-bottom:var(--respiration); } .extrait:first-of-type .titre-extrait::before{display:none} .titre-rubrique{ font-family:var(--police-titre);font-weight:400; font-size:clamp(26px,calc(3.6 * var(--vw)),36px);line-height:1.12;letter-spacing:-.012em; margin:0 0 14px;text-wrap:balance;color:var(--encre); } /* Les listes d'un extrait respirent moins en bas que sur leur propre page : là-bas elles finissent la page, ici un lien puis une autre rubrique suivent. */ /* `.extrait` en plus de `.liste-extrait` : sans lui, la règle du fil des actualités — écrite plus bas dans cette feuille — l'emportait, et le lien des Actualités se retrouvait à 72 px de la dernière fiche au lieu de 14. Mesuré ; à la lecture je ne l'aurais pas vu. */ .extrait .liste-extrait{margin-bottom:14px} /* Le lien vers la rubrique entière, sous la dernière fiche, calé à droite. Demande de Marc du 12/09 : le « + » ne se voyait pas assez au bout d'un chapeau surmontant quatre cartes. Il est plus appuyé que les liens de carte — « Lire la suite », « Voir l'opération », qui font 12 px en graisse moyenne : celui-ci ferme une section entière, et c'est le seul endroit par où l'on entre dans la rubrique. 14,5 px en demi-gras, la couleur d'accent, et une flèche. */ .plus-de{ margin:0 0 clamp(34px,calc(5 * var(--vw)),58px); text-align:right; } .plus-de a{ display:inline-block; font:600 14.5px/1.2 var(--police-texte);letter-spacing:.01em; color:var(--accent-texte);text-decoration:none; padding:6px 2px; } .plus-de a:hover{text-decoration:underline;text-underline-offset:4px} .plus-de a:focus-visible{outline:2px solid var(--focus);outline-offset:2px} /* Le fil des actualités est plus étroit que la grille — 74ch — et son lien doit se caler sur LUI, pas sur toute la largeur de la page : sinon il part seul à droite, loin du texte qu'il prolonge. */ .extrait-actualites .plus-de{max-width:74ch} /* ============================================================ Le carrousel des mises en avant, sur la page d'accueil ------------------------------------------------------------ Demande de Marc du 11/09 : faire défiler la totalité des mises en avant, au lieu d'un nombre fixe de fiches. LE DESSIN EST CELUI DES GRILLES, ET C'EST LA CONTRAINTE PRINCIPALE. Les cartes gardent la largeur qu'elles ont sur la page de la rubrique, aux mêmes points de bascule : 1 colonne, puis 2, 3, 4. Une carte plus étroite sur l'accueil que sur sa page ferait deux dessins à entretenir, et c'est exactement ce que D66 a fini par supprimer ailleurs. `display:flex` doit l'emporter sur `.grille` (une grille) et sur `.fil` (une colonne de 74ch) : d'où les quelques `!important` de ce bloc, les seuls de la feuille. La piste réutilise les classes de la rubrique pour que les cartes gardent leur style ; seule leur mise en rang change. Les crans d'arrêt (`scroll-snap`) font que la piste s'arrête toujours sur un bord de carte, jamais au milieu — au doigt comme au bouton. ============================================================ */ .carrousel{margin:0 0 10px} .carrousel-piste{ display:flex !important; grid-template-columns:none !important; max-width:none !important; margin:0 0 10px !important; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; /* LA GOUTTIÈRE EST UNE VARIABLE PARCE QUE LA LARGEUR D'UNE CARTE LA SOUSTRAIT. Elle valait 14 px ici et 18 px pour l'Équipe, mais le calcul de la carte, lui, soustrayait 14 px partout : à trois cartes visibles, les portraits de l'Équipe dépassaient la piste de 12 px et la troisième était rognée. **Deux endroits qui doivent dire le même nombre n'en disent qu'un seul.** */ --gouttiere:14px; gap:var(--gouttiere); /* SANS SCRIPT, la barre de défilement reste : c'est alors le seul indice qu'il y a une suite. AVEC le script, elle disparaît et les ronds la remplacent — demande de Marc du 11/09, après essai. */ scrollbar-width:thin; padding-bottom:8px; } .js .carrousel-piste{scrollbar-width:none;-ms-overflow-style:none;padding-bottom:0} .js .carrousel-piste::-webkit-scrollbar{display:none} /* LA LARGEUR D'UNE CARTE EST UN NOMBRE ENTIER DE PIXELS, ET CE N'EST PAS une coquetterie. Quatre fiches thématiques dans 1 224 px font 295,57 px chacune : la série entière mesure alors 2 166,5 px, et le rebouclage atterrissait un demi-pixel à côté — tout le texte se retramait, 53 124 pixels changeaient sur 380 664. Invisible à l'œil, mais c'est la comparaison image par image qui l'a dit, et elle ne ment pas. `round(down, …, 1px)` rend la largeur entière, donc la série entière, donc le rebouclage exact. La première déclaration sert de repli aux navigateurs qui ne connaissent pas `round()` : ils retrouvent le demi-pixel, rien de plus. Cela ne concerne QUE le carrousel — les grilles des pages de rubrique ne changent pas. */ /* ── LE NOMBRE DE CARTES VISIBLES SE RÈGLE AU PANNEAU, RUBRIQUE PAR RUBRIQUE (22/09) ──────────────────────────────────────────────────── Marc : « ce que tu n'as pas réduit, c'est le nombre de références, témoignages… visibles sur les carrousels ; ils sont donc totalement déformés, très peu larges et très hauts ». Le défaut vient de ce que les paliers portaient sur la largeur de la FENÊTRE quand ce qui compte est la largeur de la PISTE. Tant que les deux coïncidaient, la confusion ne se voyait pas ; depuis que la trame fait 790 px dans une fenêtre de 1 440, quatre cartes se partagent 790 px au lieu de 1 224 — 187 px chacune. *Une mesure prise sur le mauvais objet reste juste jusqu'au jour où les deux objets se séparent.* Le nombre vient donc du panneau, où Marc le règle par rubrique. CE N'EST PAS LE NOMBRE QUI SE REPLIE SUR UN PETIT ÉCRAN, C'EST LA PISTE QUI EN MONTRE MOINS. J'avais d'abord posé deux paliers de fenêtre — une carte sous 620 points, deux sous 900 —, et Marc l'a vu aussitôt : « pourquoi ne reste-t-on pas à 3 ? ». Le reproche était double et juste. Ces paliers décidaient à sa place, et ils sautaient d'un coup, comme ceux du logo que nous venions de supprimer le même jour. *Une correction qui rétablit un réglage ne peut pas le confisquer ailleurs.* La règle retenue, de sa main : **une carte garde la largeur que son réglage lui donne SUR LA TRAME**, quelle que soit la fenêtre. À 790 px de piste, un réglage de trois donne trois cartes exactement ; en dessous, la carte ne rétrécit plus, c'est le nombre visible qui décroît tout seul — deux cartes sur une fenêtre de 536 points, une et demie sur un téléphone. Continu, sans palier, et la moitié de carte qui dépasse dit qu'il y a une suite. Mesuré à 536 points en forçant trois cartes, c'est-à-dire ce que le réglage sans filet aurait donné : cartes de 157 px, et un témoignage passant de 444 à 1 078 px de haut. C'est exactement la déformation que Marc signalait, à l'envers. `min(100%, …)` borne la carte à la piste : un réglage de deux donne 387 px, plus large qu'un téléphone, et la carte y reprend simplement toute la largeur. `round(down, …, 1px)` reste : une largeur de carte entière rend la série entière, donc le rebouclage exact au pixel (D86). */ .carrousel-piste>*{ --carte:calc((var(--trame) - (var(--cartes, 3) - 1) * var(--gouttiere)) / var(--cartes, 3)); flex:0 0 auto; flex-basis:min(100%, var(--carte)); flex-basis:min(100%, round(down, var(--carte), 1px)); min-width:0; scroll-snap-align:start; } /* *Les trois séries de paliers qui vivaient ici — Références jusqu'à six cartes, Équipe jusqu'à quatre, Témoignages à l'échelle commune — ont disparu le 22/09 avec l'arrivée du réglage par rubrique. Elles disaient en CSS ce que Marc dit maintenant au panneau, rubrique par rubrique, et elles se seraient contredites avec lui. **Un réglage qui arrive doit emporter les exceptions qu'il remplace, sinon les deux cohabitent et personne ne sait plus laquelle gagne.*** L'Équipe garde seulement sa gouttière : ses portraits respirent un peu plus. */ .grille-gens.carrousel-piste{--gouttiere:18px;gap:var(--gouttiere)} .grille-mots.carrousel-piste{--gouttiere:16px;gap:var(--gouttiere)} /* Les témoignages : sur leur page, deux colonnes au plus — une citation se lit en largeur. Dans le carrousel de l'accueil, ils prennent l'échelle commune, c'est-à-dire la largeur qu'avaient les Références avant le 11/09 : jusqu'à quatre cartes. Demande de Marc, « plutôt comme les références actuelles ». La règle `.grille-mots` ne s'applique donc qu'à la page Témoignages. */ /* Les actualités : sur leur page c'est un fil vertical de 74ch, ici des cartes côte à côte — un carrousel ne sait pas faire autrement. Le filet du haut de chaque billet devient donc un filet AU-DESSUS de chaque carte, et le premier le reprend : en rang, il n'y a plus de « premier » qui ouvre une liste, seulement des éléments de même nature. *Sa série de paliers à elle a survécu une demi-heure de plus que les trois autres, le 22/09 : j'avais écrit juste au-dessus que « les trois séries ont disparu » sans chercher s'il y en avait une quatrième. La mesure l'a dit toute seule — à 900 points les Actualités affichaient des cartes de 388 px quand toutes les autres rubriques en donnaient 253. **Une règle qu'on remplace se cherche par la mesure, pas par le souvenir de ce qu'on a écrit.*** */ .fil.carrousel-piste .billet:first-child{border-top:1px solid var(--filet);padding-top:22px} /* le lien de la rubrique se cale sur la piste, qui est pleine largeur */ /* La piste est atteignable au clavier : elle doit donc montrer qu'elle a le focus, sans quoi on défile sans savoir ce qu'on défile. */ .carrousel-piste:focus-visible{outline:2px solid var(--focus);outline-offset:3px} /* ---------- la barre du bas : les ronds, puis le « + » ---------- */ /* Marc, le 11/09, après avoir essayé la première version : « pas de barre de défilement en bas ni les flèches ou le bouton stop/reprendre. Simplement des ronds vides sauf un grisé qui indiquent à la fois le nombre d'objets dans le carrousel et celui qu'on est en train de montrer en tête. Et à la suite des ronds, le + à la place de Plus de … » Deux choses valent d'être dites sur ce dessin : 1. **le rond visible ne fait que 9 px, mais on clique sur 23.** Le rond est dessiné par un `::before` à l'intérieur d'un bouton qui, lui, porte de quoi le viser au doigt. Un rond de 9 px cliquable sur 9 px serait inatteignable sur un téléphone ; 2. **les ronds sont dans la même barre que le « + », mais pas dans le même élément.** Les ronds sont `hidden` tant que le script ne tourne pas ; le « + », lui, reste. Sans cela, une page sans JavaScript n'offrirait plus aucun chemin vers la rubrique. */ .carrousel-barre{ display:flex;justify-content:flex-end;align-items:center;gap:14px; margin:0 0 clamp(34px,calc(5 * var(--vw)),58px); } .carrousel-points{display:flex;align-items:center;flex-wrap:wrap;gap:0} .carrousel-points[hidden]{display:none} .carrousel-point{ appearance:none;-webkit-appearance:none; display:inline-flex;align-items:center;justify-content:center; width:23px;height:23px;padding:0;margin:0; background:none;border:0;cursor:pointer; } .carrousel-point::before{ content:"";display:block;width:9px;height:9px;border-radius:50%; border:1px solid var(--filet-fort);background:transparent; transition:background-color .18s ease,border-color .18s ease; } .carrousel-point:hover::before{border-color:var(--plus-gris)} /* Le rond de la fiche en tête : plein, gris. `aria-current` porte l'état pour les lecteurs d'écran ET le dessine — un seul endroit à tenir, donc les deux ne peuvent pas diverger. */ .carrousel-point[aria-current]::before{ background:var(--plus-gris);border-color:var(--plus-gris); } .carrousel-point:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:2px} @media(prefers-reduced-motion:reduce){.carrousel-point::before{transition:none}} /* ---------- variantes de grille ---------- */ /* La variante `.grille-large` — cartes plus larges pour les fiches thématiques, dont le titre est une phrase — a été RETIRÉE le 11/09, sur décision de Marc : les fiches prennent la même largeur que les autres sections, et leur titre passe simplement sur plus de lignes. Une carte plus haute vaut mieux qu'une grille qui ne ressemble à aucune autre. Rien ne la remplace : c'est `.grille` qui s'applique, comme partout. Les règles ont été supprimées plutôt que laissées orphelines — elles n'étaient employées qu'à cet endroit, vérifié avant de les retirer. */ /* Les témoignages : deux colonnes au plus, une citation se lit en largeur. Le plafond de deux est une règle de lecture, pas une affaire de place : il reste écrit tel quel. Ce qui change (22/09), c'est le seuil — il se compte sur la grille et non sur la fenêtre, pour la raison dite plus haut. */ .grille-mots{grid-template-columns:1fr;gap:16px} @container liste (min-width:560px){.grille-mots{grid-template-columns:repeat(2,1fr)}} /* L'équipe : la photographie fait 185 px de large dans l'original, on ne l'agrandit donc pas. Quatre colonnes au plus : à cinq, les huit personnes se rangent en 5 + 3, ce qui se voit. */ .grille-gens{grid-template-columns:repeat(2,1fr);gap:18px} @container liste (min-width:440px){.grille-gens{grid-template-columns:repeat(3,1fr)}} @container liste (min-width:700px){.grille-gens{grid-template-columns:repeat(4,1fr)}} /* ---------- le fil des actualités ---------- */ /* La nature de l'opération, en petit à côté de la date : c'est ce que filtrent les pastilles, et sans cette marque le visiteur ne verrait pas pourquoi un article apparaît sous « Levée de fonds » (9/09). */ .marque-type{ display:inline-flex;align-items:center;gap:5px;margin-left:10px; font:600 10.5px/1 var(--police-chiffres);letter-spacing:.07em; text-transform:uppercase;color:var(--encre-douce); } .marque-type::before{ content:"";width:7px;height:7px;border-radius:50%; background:var(--teinte,var(--t-autres));flex:0 0 auto; } .fil{list-style:none;margin:0 0 clamp(40px,calc(6 * var(--vw)),72px);padding:0;max-width:74ch} .fil [hidden]{display:none !important} .billet{padding:22px 0;border-top:1px solid var(--filet)} .billet:first-child{border-top:0;padding-top:4px} .quand{ margin:0 0 7px;font:500 11.5px/1 var(--police-chiffres);letter-spacing:.06em; text-transform:uppercase;color:var(--encre-tenue); } .billet-titre{ font-family:var(--police-titre);font-weight:600;font-size:clamp(19px,calc(2.4 * var(--vw)),23px); line-height:1.25;margin:0 0 8px;text-wrap:balance; } .billet-titre a{text-decoration:none;color:var(--encre)} .billet-titre a:hover{color:var(--accent-texte)} .billet-titre a:focus-visible{outline:2px solid var(--focus);outline-offset:3px} .billet-chapeau{color:var(--encre-douce);font-size:14.5px;line-height:1.55} .billet-chapeau p{margin:0 0 8px} .billet-chapeau p:last-child{margin-bottom:0} /* « Lire la suite » et l'icône de renvoi sur la même ligne (10/09) : le fil des actualités ne gagne pas un pixel de hauteur. L'icône se cale à droite de la colonne de lecture, qui est étroite (74 caractères) — donc près du texte, et non perdue au bord de l'écran. */ .billet-bas{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:9px 0 0} .billet-bas .billet-lire{margin:0} .billet-lire{margin:9px 0 0} .billet-lire a{ font:500 12.5px/1 var(--police-texte);letter-spacing:.02em;color:var(--accent-texte); text-decoration:none; } .billet-lire a:hover{text-decoration:underline;text-underline-offset:3px} /* ---------- carte de fiche thématique ---------- */ .pierre-texte{--teinte:var(--accent)} .pierre-texte .corps{padding:18px 18px 4px} .etiquette-theme{ margin:0;font:500 9.5px/1.3 var(--police-chiffres);letter-spacing:.15em; text-transform:uppercase;color:var(--teinte); } .nom-long{font-size:16.5px;line-height:1.28} .nom-long a{text-decoration:none;color:inherit} .nom-long a:hover{color:var(--accent-texte)} .nom-long a:focus-visible{outline:2px solid var(--focus);outline-offset:3px} .pierre-texte .activite p{margin:0 0 7px} .pierre-texte .activite p:last-child{margin-bottom:0} /* Chaque thème garde une teinte, pour que la page ne soit pas monochrome. */ .pierre[data-type="Fiscalité"]{--teinte:var(--t-vendeur)} .pierre[data-type="Enjeux juridiques"]{--teinte:var(--t-acheteur)} .pierre[data-type="Problématiques financières"]{--teinte:var(--t-levee)} .pierre[data-type="Déroulement d'une cession ou d'une acquisition"]{--teinte:var(--t-difficulte)} .pierre[data-type="Divers"]{--teinte:var(--t-management)} /* ---------- témoignage ---------- */ .mot{padding:0} .mot-tete{ display:flex;align-items:center;gap:14px;padding:16px 18px; border-bottom:1px solid var(--filet); } .mot-logo{ flex:0 0 auto;width:84px;height:46px;background:var(--plaque); display:flex;align-items:center;justify-content:center;padding:3px; } .mot-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block} .mot-identite{min-width:0} /* L'icône de renvoi dans l'en-tête d'un témoignage : à droite, à la hauteur de la phrase de l'opération. `align-self:flex-start` la garde en haut quand la phrase passe sur deux lignes, plutôt que de la laisser flotter au milieu. */ .mot-tete .renvois{align-self:flex-start;margin-top:1px} /* « Voir l'opération » : sur la ligne du bas de la carte, à gauche de l'année, à la place du type d'intervention — qui y était presque toujours muet, la phrase de l'opération le disant déjà en mieux. Un lien en clair et non une icône, contrairement aux cartes d'opérations : ici la place existait, et Marc a jugé — à raison — qu'une icône « + » sur un témoignage ne se comprenait pas. Même graisse et même couleur que « Lire la suite » du fil des actualités, pour que les deux se lisent comme le même geste. */ .voir-operation{ font:500 12px/1 var(--police-texte);letter-spacing:.02em; color:var(--accent-texte);text-decoration:none; } .voir-operation:hover{text-decoration:underline;text-underline-offset:3px} .voir-operation:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .mot-qui{ margin:0;font:600 12px/1.3 var(--police-chiffres);letter-spacing:.09em; text-transform:uppercase;color:var(--encre-douce); } /* « Cession à X », « Levée de fonds auprès de Y » : de quoi parle le témoignage, quand il est rattaché à une opération (demande du 8/09). Sous le nom de la société, en plus petit et sans capitales, pour rester une précision et non un second titre. Deux lignes au plus : les contreparties les plus longues du contenu repris tiennent en deux lignes à 390 px. */ .mot-operation{ margin:3px 0 0;font-size:12.5px;line-height:1.35;color:var(--encre-douce); font-style:italic; } .mot-texte{ margin:0;padding:18px 18px 4px;flex:0 1 auto; font-size:14.5px;line-height:1.62;color:var(--encre); } .mot-texte p{margin:0 0 11px} .mot-texte p:last-child{margin-bottom:0} .mot-texte em{color:var(--encre)} .mot-texte strong{font-weight:600} /* La signature, recomposée depuis les trois champs (10/09). Elle est **collée au bas du pavé**, juste au-dessus de la ligne « Voir l'opération », pour que les signatures s'alignent d'une carte à l'autre quelle que soit la longueur de la citation — demande de Marc du 11/09, la même que pour les blocs « Cédée à » des cartes d'opérations. J'avais d'abord fait l'inverse (signature collée sous son texte), en pensant qu'une signature séparée de sa citation se lirait mal. Marc voit les cartes en grille, où l'alignement horizontal prime : c'est lui qui a raison. NOTE D'ORDRE : le blanc est donné à la signature, par margin-top:auto. Il ne doit pas y avoir en même temps de flex:1 sur .mot-texte ni de margin-top:auto sur .mot .pied — sinon le blanc se partage et rien n'est aligné. */ .mot-signature{ /* auto en haut : le blanc de la carte vient ici. Le padding garde un écart minimum avec la citation quand la carte n'a aucun blanc à donner. */ margin:auto 0 0;padding:13px 18px 0; font-size:13.5px;line-height:1.45;color:var(--encre-douce); } .mot-signature strong{font-weight:600;color:var(--encre)} /* ---------- équipe ---------- */ /* ============================================================ La puce « E » devant les titres de section ------------------------------------------------------------ Demande de Marc, 11 septembre : faire précéder certains titres du E d'Equideals. Et sa réponse à la question posée : le E marque **la hiérarchie** — il dit « ceci est un titre de section », pas « ceci est un moment Equideals ». Il se pose donc sur un seul niveau, partout où ce niveau existe. POURQUOI UN SVG, ET NON TROIS DÉGRADÉS COMME AU PREMIER JET ------------------------------------------------------------ Le premier jet empilait trois dégradés plats : deux barres rouges pleine largeur, une barre grise plus courte au milieu. Marc a trouvé le résultat mauvais et proposé une image, « même si elle entraîne un peu de flou ». Mesuré plutôt que supposé, sur la puce d'un titre de pavé (19 px), en comptant les pixels PARTIELLEMENT colorés — ceux d'un bord qui tombe entre deux pixels : trois dégradés ............. 4 % de pixels partiels SVG ........................ 41 % image du logo réduite ...... 74 % C'est donc le premier jet qui allumait ou éteignait les pixels : trois dégradés font trois couches peintes séparément, et le navigateur cale CHACUNE sur des pixels entiers, chacune de son côté. D'où des barres d'épaisseurs différentes selon la taille du titre — jusqu'à 48 % d'écart de matière entre la barre du haut et celle du bas, mesuré sur quatre tailles de titre et trois largeurs de fenêtre. Un cran net, pas un flou. Un SVG n'est pas un dessin de pixels : c'est une géométrie que le navigateur rastérise à la taille exacte d'affichage. Écart haut/bas ramené entre 0 et 19 %, et c'est un fondu. L'image du logo réduite ferait la même chose mais DEUX fois — une fois pour fabriquer le fichier, une fois pour le réduire —, d'où le halo visible autour de ses traits. Même raisonnement, et même conclusion, que pour le bouton du menu. L'ÉPAISSEUR DES TRAITS S'ÉCARTE DU LOGO, ET C'EST DÉLIBÉRÉ ------------------------------------------------------------ Cotes relevées dans `logo-equideals.webp` : boîte de 43 × 57, barres de 5, médiane à 67,44 % de la largeur. À 19 px de titre, une barre de 5/57 fait 1,5 pixel et s'efface. Elles sont donc épaissies de moitié — 7,5 au lieu de 5 —, les positions et les largeurs restant celles du logo. C'est un ajustement de lisibilité aux petites tailles, du même ordre qu'une graisse optique ; le logo ne s'affiche jamais à côté de ces puces. Choix de Marc sur planche comparative, 11/09 (voir `Claude outputs/puce-E-comparaison.png`). CE QUE LE SVG COÛTE, ET QU'IL FAUT SAVOIR ------------------------------------------------------------ Un SVG en data-URI ne lit pas les variables de la page : ses couleurs y sont écrites en clair. C'est le seul endroit du site où une couleur est répétée, et le thème sombre en redonne donc une seconde version. Si la palette change après la revue d'équipe, `--e-puce` est à reprendre aux DEUX endroits — c'est écrit à côté de chacun. Le reste ne change pas : rien à déposer, rien à charger (le dessin voyage dans la feuille de style), et la puce grandit avec son titre, tout étant exprimé en `em`. `vertical-align: baseline` pose la barre du bas sur la ligne d'écriture : le E monte à la hauteur des capitales, comme une lettre. ============================================================ */ .titre-section::before, .titre-rubrique::before, .pave-titre::before, /* La puce suit le titre de section, quel que soit le champ qui le porte : le fil du texte d'une fiche (`.texte h2`) comme le bloc d'une page rédigée (`h2.bloc-titre`). Oubliée au premier montage des blocs — le titre sortait nu, et la signature du site disparaissait de la page. Vu à l'écran. */ h2.bloc-titre::before, .texte h2::before{ content:""; display:inline-block; /* 43 × 57 dans le logo : 0,754 de large pour 1 de haut */ width:.6em;height:.795em; margin-right:.42em; vertical-align:baseline; /* UNE SEULE image, et non trois couches : c'est ce qui rend les trois traits égaux quelle que soit la taille du titre. */ background:var(--e-puce) no-repeat; background-size:100% 100%; } /* Les exceptions, assumées et à revoir après que Marc aura vu : les mentions légales sont une page d'obligation, pas une vitrine. */ .texte-legal h2::before{content:none} .titre-section{ font-family:var(--police-titre);font-weight:400; font-size:clamp(22px,calc(3.2 * var(--vw)),30px);line-height:1.15;letter-spacing:-.01em; margin:clamp(24px,calc(4 * var(--vw)),40px) 0 18px;padding-bottom:12px; border-bottom:1px solid var(--filet); } .gens{ display:flex;flex-direction:column;background:var(--surface); border:1px solid var(--filet);border-top:2px solid var(--accent); box-shadow:var(--ombre);transition:box-shadow .16s,transform .16s; } .gens:hover{box-shadow:var(--ombre-levee);transform:translateY(-2px)} @media(prefers-reduced-motion:reduce){.gens,.gens:hover{transition:none;transform:none}} .gens-lien{text-decoration:none;color:inherit;display:block} .gens-lien:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .gens-photo{ aspect-ratio:185/222;background:var(--surface-creuse);overflow:hidden; border-bottom:1px solid var(--filet); } .gens-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block} .gens-photo-vide{display:flex;align-items:center;justify-content:center} .gens-photo-vide span{ font-family:var(--police-titre);font-size:52px;color:var(--filet-fort); } .gens-corps{padding:14px 16px 4px} .gens-nom{ margin:0 0 4px;font-family:var(--police-titre);font-weight:600; font-size:16.5px;line-height:1.25;color:var(--encre); } .gens-lien:hover .gens-nom{color:var(--accent-texte)} .gens-fonction{ margin:0;font:500 10.5px/1.3 var(--police-texte);letter-spacing:.09em; text-transform:uppercase;color:var(--encre-tenue); } .gens-mail{margin:0;padding:10px 16px 14px} .gens-mail a{ font:400 12.5px/1 var(--police-chiffres);color:var(--encre-tenue);text-decoration:none; overflow-wrap:anywhere; } .gens-mail a:hover{color:var(--accent-texte);text-decoration:underline} .bande-advisors{background:var(--surface);border-top:1px solid var(--filet);margin-top:clamp(30px,calc(5 * var(--vw)),56px);padding:8px 0 clamp(30px,calc(5 * var(--vw)),50px)} .bande-advisors .titre-section{margin-top:clamp(20px,calc(3 * var(--vw)),32px)} .texte-large{max-width:78ch;padding-bottom:0} /* ---------- une personne ---------- */ .personne-tete{display:flex;flex-wrap:wrap;gap:clamp(18px,calc(3 * var(--vw)),32px);align-items:flex-end} .personne-photo{ flex:0 0 auto;width:clamp(120px,calc(22 * var(--vw)),185px);aspect-ratio:185/222; background:var(--surface);border:1px solid var(--filet);overflow:hidden; } .personne-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block} .personne-qui{flex:1 1 260px;min-width:0} .personne-qui h1{margin-bottom:10px} .personne-fonction{ margin:0 0 10px;font:500 12px/1.3 var(--police-texte);letter-spacing:.1em; text-transform:uppercase;color:var(--accent-texte); } .personne-mail{margin:0} .personne-mail a{font:400 14px/1 var(--police-chiffres);color:var(--encre-douce);overflow-wrap:anywhere} /* ---------- article : surtitre, date, documents joints ---------- */ .surtitre a{color:inherit;text-decoration:none} .surtitre a:hover{text-decoration:underline;text-underline-offset:3px} .separe{margin:0 .5em;color:var(--encre-tenue)} .signature-date{ margin:16px 0 0;font:400 12.5px/1 var(--police-chiffres);color:var(--encre-tenue); } .chapeau p{margin:0 0 10px} .chapeau p:last-child{margin-bottom:0} .chapeau strong{font-weight:600;color:var(--encre)} .joints{list-style:none;margin:0 0 20px;padding:0} .joints li{border-top:1px solid var(--filet)} .joints li:last-child{border-bottom:1px solid var(--filet)} .joints a{ display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;justify-content:space-between; padding:12px 2px;text-decoration:none;color:var(--encre); } .joints a:hover{color:var(--accent-texte)} .joints .poids{font:400 11.5px/1 var(--police-chiffres);color:var(--encre-tenue);white-space:nowrap} /* ---------- pour aller plus loin ---------- */ .pour-aller-plus-loin{background:var(--surface);border-top:1px solid var(--filet);padding:4px 0 clamp(26px,calc(4 * var(--vw)),44px)} .liens-fiches{list-style:none;margin:0;padding:0;display:grid;gap:12px} @media(min-width:760px){.liens-fiches{grid-template-columns:repeat(3,1fr)}} .liens-fiches a{ display:flex;flex-direction:column;gap:6px;height:100%; padding:14px 16px;text-decoration:none;color:var(--encre); background:var(--fond);border:1px solid var(--filet); } .liens-fiches a:hover{border-color:var(--encre-tenue)} .liens-fiches a:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .liens-fiches .quoi{font-family:var(--police-titre);font-weight:600;font-size:15px;line-height:1.3} /* ---------- voisins ---------- */ .voisins{border-top:1px solid var(--filet);background:var(--surface);padding:18px 0 26px} .voisins .enveloppe{ display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-start;justify-content:space-between; } .voisin{ display:flex;flex-direction:column;gap:4px;max-width:34ch; text-decoration:none;color:var(--encre); } .voisin.droite{text-align:right;margin-left:auto} .voisin .sens{ font:500 10px/1 var(--police-chiffres);letter-spacing:.14em;text-transform:uppercase; color:var(--encre-tenue); } .voisin .quoi{font-family:var(--police-titre);font-weight:600;font-size:14.5px;line-height:1.3} .voisin:hover .quoi{color:var(--accent-texte)} .voisin:focus-visible{outline:2px solid var(--focus);outline-offset:3px} .voisin.retour{ align-self:center;text-align:center;font:500 12px/1 var(--police-texte); letter-spacing:.04em;color:var(--encre-tenue);border:1px solid var(--filet-fort); padding:10px 14px;border-radius:2px; } .voisin.retour:hover{color:var(--encre);border-color:var(--encre-tenue)} @media(max-width:640px){ .voisins .enveloppe{flex-direction:column} .voisin.droite{text-align:left;margin-left:0} .voisin.retour{align-self:flex-start;order:3} } /* Les années des actualités et les thèmes sans couleur n'ont pas de pastille : un carré gris identique sur douze puces ne renseigne personne. */ .filtres.sans-teintes .puce::before{display:none} .filtres.sans-teintes .puce[aria-pressed="true"]::before{ display:inline;background:none;width:auto;height:auto;color:var(--teinte); content:"✓";font-size:12px;line-height:1;font-weight:700; } .filtres.sans-teintes .puce{--teinte:var(--encre)} /* Un chapeau repris de l'ancien site peut contenir autre chose que des paragraphes : une fiche sur les sept a le sien enveloppé dans un `blockquote`, dont le retrait par défaut du navigateur décalait la carte par rapport à ses voisines. Trouvé en regardant la page, pas le code. */ .activite blockquote, .billet-chapeau blockquote, .chapeau blockquote{margin:0;padding:0;border:0} .activite ul,.activite ol, .billet-chapeau ul,.billet-chapeau ol{margin:0 0 8px;padding-left:18px} /* ══════════════════════════════════════════════════════════════════════ LE BANDEAU DU HAUT DE L'ACCUEIL Séance 7, 14 septembre 2026 — deuxième version, celle du cadrage à la main. LA BANDE N'A PLUS DE HAUTEUR À ELLE. Le premier jet en proposait quatre, au choix, et redressait la proportion à mesure que l'écran rétrécissait — 4/3 sur téléphone, 16/9 au-dessus de 640, une hauteur posée au-delà de 1100. C'était une façon de deviner ce que Marc voulait voir. Il a demandé mieux : « qu'est-ce qui interdit de totalement recadrer manuellement la photo ? ». Rien. Alors c'est LE CADRE DESSINÉ AU PANNEAU qui donne la proportion, et il y en a deux — un pour l'écran de bureau, un pour le téléphone —, parce que la même découpe ne peut pas servir les deux. COMMENT ON DÉCOUPE. Aucune image n'est recoupée sur le serveur : l'image entière est posée dans une fenêtre qui la déborde, agrandie de `10000 / largeur_du_cadre` pour cent, puis décalée de `translate(-x%,-y%)`. Un pourcentage de `translate` se compte sur l'élément lui-même : ces deux nombres sont donc, tels quels, ceux qu'enregistre le champ. Voir l'en-tête du gabarit pour le détail du calcul. LES DEUX JEUX DE NOMBRES, ET UNE SEULE IMAGE. Le gabarit pose les deux découpes en variables — `--xg…` pour le grand écran, `--xp…` pour le téléphone — et c'est ici qu'on bascule de l'une à l'autre. Deux balises `` dont une cachée auraient été plus simples à écrire, mais un navigateur télécharge l'image cachée aussi : l'accueil aurait chargé deux fois sa grande photographie. `padding-top` ET NON `aspect-ratio`, POUR LA HAUTEUR. Les deux donnent la même forme, mais `aspect-ratio` bridé par un `max-height` fait rétrécir la LARGEUR au lieu de couper la hauteur — le bandeau s'arrêtait à 1 344 px sur un écran de 1 440, avec une bande blanche à droite. Vu à l'écran le 14/09. Un `padding-top` en pourcentage se compte sur la largeur du parent, se laisse couper par `max-height` sans rien déformer, et le morceau retenu reste centré. C'est ce qu'il faut sur un écran très large, où 43 % de 2 560 px feraient une bande de 1 100 px de haut. LE VOILE N'EST PAS UN EFFET. Un titre posé sur une photographie que nous ne choisissons pas est un pari : selon le cliché, le même blanc passe de parfaitement lisible à illisible. D'où quatre réglages au panneau — opacité, couleur, bord gauche, bord droit — plutôt qu'un dégradé gravé ici. ══════════════════════════════════════════════════════════════════════ */ .heros{ position:relative; isolation:isolate; width:100%; overflow:hidden; background:var(--marine); /* Par défaut, la découpe du téléphone. L'ordre compte : c'est la petite qui sert de base, et la grande qui prend le relais quand la place le permet. */ --x:var(--xp,0); --y:var(--yp,0); --l:var(--lp,100); --r:var(--rp,.75); /* LA TAILLE DU TITRE BASCULE AVEC LA DÉCOUPE, et pas ailleurs (D102). Les deux réglages habillent deux photographies différentes : ils doivent changer en même temps qu'elles, donc à 700 px et non à 640. Le choix d'écran vit ici, dans la feuille de style, JAMAIS dans l'attribut `style` du gabarit (D98 §5) : un style en ligne l'emporte sur une règle de feuille, et aucune requête de média ne pourrait le réécrire. Le gabarit ne pose que les deux valeurs, sans savoir laquelle servira. */ /* ── UN SEUL COEFFICIENT POUR LES DEUX CADRAGES (22/09, dernier mot) ── Marc a posé la règle et elle se simplifie d'elle-même : taille sur le téléphone = taille sur le bureau × (largeur du cadre téléphone / cadre bureau) × l'échelle d'affichage du cadre téléphone L'échelle d'affichage vaut « largeur de fenêtre / largeur du cadre téléphone ». La largeur du cadre téléphone s'annule, et il reste « taille bureau × largeur de fenêtre / largeur du cadre bureau » — la MÊME expression dans les deux vues. Donc un seul coefficient, ici, et plus de bascule à 700 px : le titre sautait de 45,6 à 25,2 px au passage d'un pixel, parce que je faisais dépendre de la vue une chose qui n'en dépend pas. *Une formule qui se simplifie est une formule qui dit qu'on avait compté deux fois.* Ce que cela coûte : sur un téléphone de 390 points, le titre fait 14 px au lieu de 25. C'est la conséquence exacte de la règle — un cadre plus étroit montre une part plus petite de la photographie. Marc : « si l'automatisme ne va pas à l'utilisateur, il n'a qu'à saisir un texte spécifique pour le téléphone et ajuster lui-même la taille des polices ». C'est à cela que sert la version téléphone. */ --titre-k:3.6; } /* LA COUCHE D'IMAGE SORTIE DU HÉROS REFAIT LE MÊME CHOIX DE CADRAGE (23/09). Elle porte les huit valeurs brutes — le gabarit lui pose le même style qu'au héros — mais `--x/--y/--l/--r`, eux, sont DÉRIVÉS par les deux règles ci-dessus et ci-dessous, qui ne visaient que `.heros`. Sortie de lui, la couche n'héritait plus de `--r` : son calcul de hauteur rendait zéro, le héros remontait de zéro, et l'accroche sortait par le haut de l'écran. *Une boîte qu'on déménage perd ce qu'elle tenait de son ancien parent, et rien ne le signale : la page s'affiche, simplement de travers.* Trouvé en mesurant les boîtes une à une, pas en relisant. */ .fond-photo .heros-vue{ --x:var(--xp,0); --y:var(--yp,0); --l:var(--lp,100); --r:var(--rp,.75); } @media(min-width:700px){ .heros, .fond-photo .heros-vue{ --x:var(--xg,0); --y:var(--yg,0); --l:var(--lg,100); --r:var(--rg,.43); } } /* LES DEUX TEXTES DE L'ACCROCHE (D102). Le second est facultatif : vide, le gabarit ne l'écrit pas du tout et cette règle ne rencontre rien. `display:none` et non `visibility` ou un décalage hors écran : c'est la seule façon de retirer vraiment le texte caché de l'arbre d'accessibilité, donc qu'un lecteur d'écran n'énonce pas l'accroche deux fois. C'est aussi ce qui garde `width:max-content` exact — un nœud en `display:none` ne participe pas au calcul de la plus longue ligne. */ .accroche-grand{display:none} .accroche-petit{display:inline} @media(min-width:700px){ .accroche-grand{display:inline} .accroche-petit{display:none} } /* La fenêtre. Sa hauteur vient du cadre, et elle se laisse couper à 78 % de l'écran sans que la largeur bouge. */ /* Le plafond de hauteur de la photographie est UNE variable : l'accroche, posée par-dessus quand la photographie est fixe, doit avoir exactement la même hauteur — y compris sur un téléphone à l'horizontale, où le plafond descend à 72. Deux valeurs écrites séparément auraient divergé là. */ :root{--heros-max:calc(78 * var(--vh))} @media(max-height:520px) and (orientation:landscape){ :root{--heros-max:calc(72 * var(--vh))} } .heros-vue{ position:relative; width:100%; max-height:var(--heros-max); overflow:hidden; } .heros-vue::before{ content:""; display:block; padding-top:calc(var(--r) * 100%); } /* ══════════════════════════════════════════════════════════════════════ LA PHOTOGRAPHIE QUI RESTE EN PLACE PENDANT QUE LA PAGE MONTE (23/09) ────────────────────────────────────────────────────────────────────── Demande de Marc : « une option faisant que le défilement de la page d'accueil se fasse en maintenant l'image où elle est, et en faisant monter à la fois le titre puis tout le reste de la page, sur un fond blanc transparent ». Il a choisi : la photographie tient **pendant tout le défilement**, et l'accroche **monte avec la page**. PAS `background-attachment:fixed`, ET PAS `position:fixed` NON PLUS. La première est cassée sur iPhone depuis des années. La seconde, que j'avais écrite d'abord, cale l'image sur la FENÊTRE quand le héros, lui, commence sous l'en-tête : l'image arrivait 97 px trop haut, et ces 97 px sont la hauteur de l'en-tête, qui varie avec la largeur de la fenêtre. Marc : « si ce chiffre dépend de la fenêtre, alors fais le calcul qui va bien ». Le bon calcul est de ne pas en faire : **`position:sticky` laisse l'image en flux**, donc exactement là où le héros commençait, et ne la fige qu'une fois le haut de la fenêtre atteint. *Le meilleur calcul de décalage est celui qu'on n'a pas à écrire.* ELLE EST SŒUR DU CONTENU, PAS ENFANT DU HÉROS — le gabarit l'en sort quand le réglage est allumé. Deux raisons, et elles se cumulent : `sticky` est bornée par son parent (dans le héros, elle n'aurait tenu que six cents pixels de défilement), et un enfant se peint APRÈS le fond de son parent (dans le héros, l'image passait par-dessus les textes qui montaient). LE VOILE EST PORTÉ PAR UNE SEULE BOÎTE, ET C'EST LA PROPOSITION DE MARC : « pourquoi ne créerais-tu pas une div qui englobe les div de classe enveloppe, et que ce soit cette div qui à la fois monte et porte le voile blanc ? ». J'avais posé le voile sur chaque bloc ; il laissait passer des bandes de photographie entre eux — 52 px après le héros, 58 px entre deux rubriques. **Un fond continu demande une boîte continue.** Le voile s'arrête à 100 %, où l'effet se réduit à une page blanche ordinaire : c'est le repli si Marc veut l'éteindre sans l'éteindre. */ .fond-photo .heros-vue{ position:sticky; /* ELLE NE BOUGE PAS D'UN PIXEL, ET C'EST LA DEMANDE DE MARC : « la photo monte pour recouvrir le logo + hamburger ; elle doit rester fixe ». Avec `top:0` elle montait de la hauteur du bandeau avant de se figer, et passait dessus. `--haut-bandeau` est la hauteur RÉELLE du bandeau, mesurée par le script du pied et remesurée à chaque redimensionnement — le repli écrit dans la charte vaut 97 px. *Le nombre existait déjà et servait à deux autres endroits collants : le réinventer ici en aurait fait un troisième, à tenir d'accord avec les deux premiers.* Comme la photographie commence exactement à cette hauteur, elle est collée dès le premier pixel de défilement : elle ne se déplace jamais. */ top:var(--haut-bandeau, 97px); z-index:0; /* LA MOITIÉ HAUTE DU BLANC TIENT AVEC LA PHOTOGRAPHIE (23/09). Marc : « cela fait un peu beaucoup de blanc avant le texte quand il commence à monter ; n'est-il pas possible de diviser cette zone en deux parties égales : la supérieure qui reste fixe avec la photo, l'autre qui suive le texte ? ». La moitié haute est une BORDURE de la couche collante, de la couleur de la page : elle est collée avec l'image, et le texte passe dessus comme sur l'image. La moitié basse reste le rembourrage de `.sous-photo`, qui monte avec le texte. Au repos, les deux font exactement le blanc d'avant : `--sous-heros`, une seule variable coupée en deux. Une bordure et non un rembourrage : l'image se centre dans la boîte de rembourrage, que la bordure laisse intacte — le cadrage ne bouge pas d'un pixel. Le plafond de hauteur est rallongé d'autant, puisque `border-box` y compterait la bordure et rognerait l'image. */ border-bottom:var(--demi-blanc) solid var(--fond); max-height:calc(var(--heros-max) + var(--demi-blanc)); } /* L'ACCROCHE EST POSÉE SUR LA PHOTOGRAPHIE, PAS REMONTÉE PAR-DESSUS (23/09). Le héros ne contient plus que l'accroche. Il reprend la hauteur que la couche d'image lui donnait — même calcul, même plafond — et il se pose en haut de `
`, là où la photographie commence. J'avais d'abord écrit une MARGE NÉGATIVE de la hauteur de l'image, pour le faire remonter. Juste dans Chrome, fausse dans Safari 27 sous l'agrandissement : Safari la comptait DEUX FOIS. Le relevé pris sur l'écran de Marc l'a dit sans ambiguïté — `heros off -460` au lieu de `92`, soit 552 px de trop, la hauteur exacte d'une photo — et le texte qui suit remontait d'autant sous le logo. Sans agrandissement, le même Safari rendait 90 : juste. Une position absolue n'a rien à compter : le haut de `
` est le haut de la photographie, puisqu'elle en est le premier enfant. Le contenu suit la photographie dans le flux, l'accroche n'y est plus. *Une superposition obtenue en soustrayant une hauteur dépend de la façon dont chaque moteur compte cette hauteur ; une superposition obtenue en posant deux boîtes au même endroit n'en dépend pas.* */ .fond-photo main{position:relative} .fond-photo .heros{ position:absolute; top:0; left:0; right:0; margin:0; max-height:var(--heros-max); background:none; z-index:1; } .fond-photo .heros::before{ content:""; display:block; padding-top:calc(var(--r) * 100%); } /* LE VOILE NE FAIT QUE LA LARGEUR DES FILETS, ET LA PHOTOGRAPHIE RESTE NUE DE PART ET D'AUTRE (23/09, demande de Marc). Il courait d'un bord à l'autre de la fenêtre ; il fait maintenant `--largeur`, c'est-à-dire la trame de 790 plus ses deux gouttières de 28 — exactement la boîte des filets rouges, avec la petite marge que Marc demandait, et pas un nombre de plus à tenir. *La « petite marge » n'a pas été choisie : c'est la gouttière que la page pose déjà de chaque côté de son contenu. Un réglage de plus aurait fait une quatrième largeur sur la page.* Sur un téléphone, 846 dépasse la fenêtre : le voile y reprend toute la largeur, ce qui est le bon comportement — il n'y a plus de marge à gagner. */ /* LE VOILE EST FAIT DE LA COULEUR DE LA PAGE, PAS DE BLANC (23/09). Marc : « pourquoi voit-on deux blancs ? ». Parce qu'il y en avait deux : le fond du site est un gris très clair, #f7f7f7, et le voile était du blanc pur. Sur la photographie la différence ne se voyait pas ; en dessous, la colonne ressortait plus claire que le reste de la page. Fait de `--fond` lui-même, le voile se confond exactement avec la page là où il n'y a plus d'image derrière. *Une couleur qui doit se fondre dans une autre doit ÊTRE cette autre, pas lui ressembler.* `color-mix` évite de recopier la couleur en composantes : si le fond du site change, le voile suit. */ .fond-photo .sous-photo{ position:relative; z-index:1; max-width:var(--largeur); margin-inline:auto; /* LE BLANC SOUS LA PHOTOGRAPHIE (23/09). Marc : « il manquerait un petit espace sous la photo ; le premier texte est trop collé ». Il l'était : avec la photographie fixe, j'avais supprimé la marge du héros pour que le voile commence au ras de l'image — et le texte avec lui. Le voile commence toujours au ras de l'image ; le texte, lui, reprend le blanc qu'il a sans l'option. Même valeur, même variable : les deux modes ne peuvent plus diverger. */ padding-top:calc(var(--sous-heros) - var(--demi-blanc)); /* l'autre moitié tient avec la photographie, plus haut */ background:color-mix(in srgb, var(--fond) calc(var(--voile-fond, .94) * 100%), transparent); } /* Le pied suit la même colonne : c'est son enveloppe qui porte le voile, pas la barre entière, sinon la bande blanche reprendrait toute la largeur juste sous une page qui ne le fait plus. */ .fond-photo .bas{position:relative;z-index:1;background:none} .fond-photo .bas .enveloppe{background:color-mix(in srgb, var(--fond) calc(var(--voile-fond, .94) * 100%), transparent)} /* L'EN-TÊTE RESTE EN HAUT, ET C'EST LUI QUI FAIT DISPARAÎTRE CE QUI MONTE. Marc : « ce qui défile doit disparaître une fois arrivé en haut de la photo, logo et menu restant à leur place en haut de la page ». Collé en haut, avec son fond opaque, le bandeau efface le contenu qui passe dessous — il n'y a donc rien à découper : *un cache opaque au bon endroit vaut mieux qu'un rognage, qui se serait décalé dès que le bandeau change de hauteur.* `z-index:3` le met au-dessus de la photographie (0) et du contenu (1). Le fond est réaffirmé ici : sans lui, un bandeau collant laisse voir au travers ce qui passe dessous. La page d'accueil « en-tête sur l'image » garde le sien, transparent par choix — les deux réglages ne se mélangent pas. */ .fond-photo .bandeau{ position:sticky; top:0; z-index:3; } .fond-photo:not(.entete-sur-image) .bandeau{background:var(--surface,#fff)} /* La boîte porte la forme exacte du cadre et reste centrée dans la fenêtre : quand celle-ci est rognée par `max-height`, on perd autant en haut qu'en bas plutôt que tout en bas. */ .heros-boite{ position:absolute; top:50%; left:0; width:100%; aspect-ratio:1 / var(--r); transform:translateY(-50%); overflow:hidden; } .heros-image{ position:absolute; top:0; left:0; width:calc(var(--l) * 1%); height:auto; max-width:none; /* la règle générale du site bride les images à 100 % */ transform:translate(calc(var(--x) * -1%), calc(var(--y) * -1%)); } /* ── LE TEXTE ET SA BANDE ────────────────────────────────────────────── Troisième version de la bande, et la deuxième de sa géométrie. ELLE EST UNIE ET NETTE. Marc, le 14/09 : « il n'y a pas de dégradé de transparence dans l'ombré sous le texte. Il est uni et finit "sharp" tant en haut, en bas, qu'à droite et à gauche. » Les deux premières versions posaient un dégradé — d'abord sur toute la hauteur de l'image, puis retourné selon la rangée du texte. Toutes deux répondaient à une question que personne n'avait posée. ELLE DÉBORDE D'UNE PART DE LA PLACE LIBRE. Marc, le 15/09 : « utiliser un % en fonction de l'espace dispo à gauche/droite ». La version précédente comptait en pourcentage de la largeur de l'écran, avec un rembourrage sur le titre — 20 % pouvait ne pas atteindre le bord à gauche et le dépasser largement à droite, et aucun réglage ne voulait dire « jusqu'au bord ». D'où TROIS CELLULES : une aile, le titre, une aile. Les colonnes latérales portent exactement la place disponible de leur côté, et une largeur en pourcentage, dans une grille, se compte sur sa colonne. **0 colle au texte, 100 touche le bord** — toujours, sur les deux écrans, sans rien calculer. Le rembourrage sur le titre ne pouvait pas y arriver : un pourcentage de rembourrage se compte sur la largeur du bloc entier, jamais sur la place qui reste d'un côté. UN JEU DE RÉGLAGES PAR ÉCRAN. Zone, fer et débordements se doublent : une bande large et basse et une vue haute de téléphone n'ont aucune raison de porter leur texte de la même manière. Restent communes la couleur et l'opacité — elles dépendent de la photographie, pas de l'écran. */ .heros-texte{ position:absolute; inset:0; z-index:2; display:grid; padding-block:clamp(18px,calc(3.2 * var(--vw)),44px); } /* La rangée : place libre à gauche | le titre | place libre à droite. `--gouttiere` est la marge du site, celle de `.enveloppe` : c'est elle qui fait qu'« à gauche » veut dire « aligné sur le contenu de la page » et non « collé au bord de l'écran ». */ .heros-rangee{ /* La marge du site. Elle n'est plus mise à l'échelle sur le téléphone : par le même calcul que le coefficient du titre, l'échelle s'annule. */ --gouttiere:calc((calc(100 * var(--vw)) - min(calc(100 * var(--vw)), var(--largeur))) / 2 + var(--pas)); width:100%; display:grid; /* LA COLONNE DU MILIEU EST `auto`, ET LA LARGEUR DU TEXTE VIENT DE SON `max-width`. Premier essai : `minmax(0, fit-content(24ch))`. Deux fautes d'un coup — `fit-content()` n'est pas admis DANS un `minmax()`, ce qui rendait toute la déclaration invalide et ramenait la rangée à une seule colonne ; et le `ch` s'y serait compté sur la police de la rangée, pas sur celle du titre, qui est trois fois plus grande. Avec `auto`, la colonne se règle sur le titre, dont le `max-width:24ch` est mesuré dans sa propre police. Vu au navigateur : la grille ne s'appliquait pas du tout, et rien dans la page ne le disait. */ /* LA COLONNE DU MILIEU RESTE EN `auto`, et c'est voulu (22/09). J'avais posé `minmax(0,auto)` le matin même pour faire mordre un garde-fou de repli ; Marc a tranché contre le repli lui-même. La colonne doit donc suivre le texte, même quand il est plus large que l'image : c'est ainsi que la bande de couleur reste collée au texte jusqu'au bord, et que le bandeau coupe proprement ce qui dépasse. *À retenir quand même de cette demi-journée : un `max-width` en pourcentage se compte sur son bloc conteneur, et si ce bloc est une colonne `auto` qui grandit avec son contenu, il vaut 100 % de lui-même — il est vrai et n'empêche rien.* */ grid-template-columns:var(--col-g,var(--gouttiere)) auto var(--col-d,1fr); } /* Les ailes prennent leur part de leur colonne, collées au titre. Elles s'étirent sur toute la hauteur de la rangée, donc sur celle du titre avec son débordement vertical. */ .heros-aile{ align-self:stretch; background:rgba(var(--bande-c-petit,15,28,38), var(--bande-o-petit,0)); } .heros-aile-g{justify-self:end; width:var(--bg-grand,20%)} .heros-aile-d{justify-self:start;width:var(--bd-grand,20%)} /* ── LA BOÎTE DU TITRE ÉPOUSE LA PLUS LONGUE LIGNE SAISIE (D102, 22/09) ── Marc : « l'utilisateur seul choisit les retours à la ligne ; le pavé dans lequel va figurer le texte s'adapte donc à la ligne la plus longue ». `max-width:24ch` faisait l'inverse : il recoupait les lignes écrites. Mesuré au navigateur sur un texte à deux retours, la ligne du milieu était coupée en deux — 535 + 273 à 1440 px, 140 + 136 à 390. `max-width:100%` n'est pas décoratif : sans lui, une ligne plus longue que la photographie déborderait au lieu de se replier. C'est le seul garde-fou contre une saisie malheureuse, et il sert aujourd'hui même — l'accroche en place n'a aucun retour à la ligne et fait, d'un bloc, plus large que l'écran. */ .heros-rangee h1{ margin:0; min-width:0; width:max-content; color:#fff; /* LA POLICE DE L'ACCROCHE SE CHOISIT AU PANNEAU (22/09). Demande de Marc : « peut-on choisir la police utilisée pour le texte sur la photo ? police unique pour tout ce texte ». Une seule pour toute l'accroche, donc une seule variable, posée sur le héros. Le choix se limite aux TROIS POLICES DÉJÀ CHARGÉES par le site. En proposer une quatrième voudrait dire la télécharger : une connexion de plus, et un fichier à déposer alors que les polices ne sont pas encore arrêtées (D26). *Un réglage qui oblige à charger autre chose n'est pas un réglage, c'est une décision déguisée.* Vide, c'est la police des titres — ce que l'accroche a toujours été. */ font-family:var(--police-accroche, var(--police-titre)); /* AUCUN REPLI AUTOMATIQUE, ET C'EST LA DEMANDE DE MARC (22/09, second tour) : « je ne veux pas de forçage. Si le texte est trop long, ce qui dépasse de l'image n'apparaît pas : à l'utilisateur de régler soit le texte, soit la taille de police. » `nowrap` n'empêche pas les retours à la ligne de l'utilisateur — un `
` coupe toujours. Il empêche seulement le navigateur d'en ajouter. Ce qui sort du cadre est coupé par l'`overflow:hidden` du bandeau, et la correction est sous la main : deux réglages et un champ de texte, avec le résultat sous les yeux. `text-wrap:balance` est parti avec : il ne sert qu'à répartir des lignes repliées, et il n'y en a plus. Un réglage qui ne peut plus rien faire est un réglage qui trompera quelqu'un un jour. `max-width:100%` est parti aussi, pour la même raison : il n'existait que pour rendre le repli propre. */ white-space:nowrap; /* LA TAILLE EN % DE LA LARGEUR VISIBLE DE LA PHOTOGRAPHIE, SANS `clamp()`. Marc : « si la variation de taille de la fenêtre entraîne une variation de taille de la photo, la police s'adapte pour que le texte occupe la même place sur la photo ». Une borne — haute ou basse — romprait précisément cette proportion : le texte cesserait de suivre l'image à partir d'une certaine largeur. Il n'y a donc pas de `clamp()` ici, et c'est voulu. `vw` et non `cqw` : le bandeau occupe toute la largeur de la fenêtre, donc 1 vw vaut 1 % de la bande de photographie que le visiteur voit. Les unités de conteneur exigeraient `container-type:inline-size` sur `.heros`, donc un confinement de mise en page, avec une image en position absolue à l'intérieur : un risque pour un gain nul. */ font-size:calc(var(--titre-k, 3.6) * calc(1 * var(--vw))); line-height:1.12; /* Le débordement du haut et du bas : fixe et faible, « pareil en haut et en bas (peu) ». C'est lui qui donne sa hauteur à la rangée, donc aux ailes. */ background:rgba(var(--bande-c-petit,15,28,38), var(--bande-o-petit,0)); padding-block:clamp(7px,calc(0.75 * var(--vw)),12px); } /* ── UNE LIGNE, UN BLOC — ET LE JUSTIFIÉ RETROUVE UN SENS (22/09) ────── Marc : « il y a deux retours à la ligne possibles qui, sur certaines applications, font que la ligne se justifie ou pas ». C'est la règle typographique, et HTML ne la connaît pas : `
` n'étire rien, pas plus qu'une fin de paragraphe. Chaque ligne est donc un bloc. Il prend la largeur du titre — celle de la plus longue ligne, puisque le titre est en `max-content` —, ce qui laisse aux lignes plus courtes la place de s'étirer. `text-align-last` ET NON `text-align`. Justifier n'agit jamais sur la dernière ligne d'un bloc ; ici chaque bloc n'a qu'une ligne, qui est donc toujours sa dernière. Un `text-align:justify` n'aurait rien fait du tout — et c'est précisément ce qui se passait avant. */ .heros-rangee h1 .l{display:block} /* Seules les lignes terminées par un saut forcé s'étirent, et seulement en « Justifié ». Une fin de paragraphe reste une dernière ligne. */ .fer-petit-justifie .l.j{text-align-last:justify} @media(min-width:700px){ .fer-justifie .l.j{text-align-last:justify} .heros-rangee h1:not(.fer-justifie) .l.j{text-align-last:auto} } /* Sans bande, le titre est nu sur la photographie : l'ombre portée redevient la seule chose qui le tienne. Par écran, comme le reste. */ .heros.sans-bande-petit .heros-rangee h1{text-shadow:0 1px 18px rgba(0,0,0,.45)} /* Sur une bande blanche, un titre blanc disparaît : l'encre du site le remplace. */ .heros.coul-petit-blanc .heros-rangee h1{color:var(--marine,#0f1c26)} .heros.coul-petit-blanc.sans-bande-petit .heros-rangee h1{text-shadow:0 1px 14px rgba(255,255,255,.55)} /* ── LES NEUF ZONES ET LES DEUX FERS, DEUX FOIS ──────────────────────── La série du téléphone d'abord, celle du grand écran ensuite dans la requête de média : même spécificité, écrite après, la cascade suffit. La rangée du haut / du milieu / du bas se règle par `align-items` sur `.heros-texte` ; la colonne, par les deux colonnes latérales de la rangée — une gouttière du côté où le texte se cale, tout le reste de l'autre. */ .zone-petit-haut-gauche, .zone-petit-haut-centre, .zone-petit-haut-droite {align-items:start} .zone-petit-milieu-gauche,.zone-petit-milieu-centre,.zone-petit-milieu-droite{align-items:center} .zone-petit-bas-gauche, .zone-petit-bas-centre, .zone-petit-bas-droite {align-items:end} .zone-petit-haut-gauche .heros-rangee, .zone-petit-milieu-gauche .heros-rangee, .zone-petit-bas-gauche .heros-rangee{--col-g:var(--gouttiere);--col-d:1fr} .zone-petit-haut-centre .heros-rangee, .zone-petit-milieu-centre .heros-rangee, .zone-petit-bas-centre .heros-rangee{--col-g:1fr;--col-d:1fr} .zone-petit-haut-droite .heros-rangee, .zone-petit-milieu-droite .heros-rangee, .zone-petit-bas-droite .heros-rangee{--col-g:1fr;--col-d:var(--gouttiere)} /* Quatre alignements depuis le 15/09 au soir, à la demande de Marc : « il n'y a que les options fer à droite ou à gauche, il pourrait y avoir aussi centré et justifié ». Justifié, `text-align-last` reste à sa valeur naturelle : la dernière ligne ne s'étire pas. C'est la règle de la justification, et l'étirer donnerait des blancs énormes entre les mots d'une ligne de trois syllabes. */ .fer-petit-gauche {text-align:left} .fer-petit-droite {text-align:right} .fer-petit-centre {text-align:center} .fer-petit-justifie{text-align:justify} .heros-aile-g{width:var(--bg-petit,20%)} .heros-aile-d{width:var(--bd-petit,20%)} @media(min-width:700px){ .zone-haut-gauche, .zone-haut-centre, .zone-haut-droite {align-items:start} .zone-milieu-gauche,.zone-milieu-centre,.zone-milieu-droite{align-items:center} .zone-bas-gauche, .zone-bas-centre, .zone-bas-droite {align-items:end} .zone-haut-gauche .heros-rangee, .zone-milieu-gauche .heros-rangee, .zone-bas-gauche .heros-rangee{--col-g:var(--gouttiere);--col-d:1fr} .zone-haut-centre .heros-rangee, .zone-milieu-centre .heros-rangee, .zone-bas-centre .heros-rangee{--col-g:1fr;--col-d:1fr} .zone-haut-droite .heros-rangee, .zone-milieu-droite .heros-rangee, .zone-bas-droite .heros-rangee{--col-g:1fr;--col-d:var(--gouttiere)} .fer-gauche {text-align:left} .fer-droite {text-align:right} .fer-centre {text-align:center} .fer-justifie{text-align:justify} .heros-aile-g{width:var(--bg-grand,20%)} .heros-aile-d{width:var(--bd-grand,20%)} /* La couleur et l'opacité de la bande basculent elles aussi, depuis le 15/09. Marc : « la couleur et transparence du bandeau ne peuvent être les mêmes pour les 2 écrans → le texte n'est pas au même endroit sur la photo ! ». Je les avais gardées communes en disant qu'elles dépendent de la photographie et non de l'écran ; c'est la justification qui était fausse. Ce qui décide de la couleur, c'est ce qu'il y a DERRIÈRE LE TEXTE, et les deux cadrages ne montrent pas le même morceau. */ .heros-aile, .heros-rangee h1{background:rgba(var(--bande-c-grand,15,28,38), var(--bande-o-grand,0))} .heros .heros-rangee h1{text-shadow:none;color:#fff} .heros.sans-bande-grand .heros-rangee h1{text-shadow:0 1px 18px rgba(0,0,0,.45)} .heros.coul-grand-blanc .heros-rangee h1{color:var(--marine,#0f1c26)} .heros.coul-grand-blanc.sans-bande-grand .heros-rangee h1{text-shadow:0 1px 14px rgba(255,255,255,.55)} } /* ── L'AIR SOUS LA BANDE ─────────────────────────────────────────────── Marc, le 15/09 : « peut-être laisser un peu d'espace entre l'image et les traits rouges au-dessus de métiers/mission/valeurs ». Les pavés commençaient à toucher la photographie : leur filet rouge se lisait comme le bord de l'image, et la page n'avait plus de respiration après le titre. L'espace est posé SOUS LA PHOTOGRAPHIE, et non au-dessus des pavés. Premier essai : `.heros + .enveloppe > .paves`. Il n'aurait rien fait sur mon banc, où les pavés n'existent pas encore — et, chez Marc, il n'aurait rien fait non plus le jour où les pavés seraient masqués et où un extrait de rubrique viendrait en premier. Ce qui a besoin d'air, c'est l'image ; c'est donc à elle de le porter, quoi qu'il y ait après. */ /* Le blanc sous la photographie : UNE valeur, pour les deux modes. Avec la photographie fixe, la marge du héros est remplacée par un rembourrage en tête de la colonne voilée — voir plus haut. */ :root{ --sous-heros:clamp(28px,calc(4 * var(--vw)),52px); /* La moitié qui tient avec la photographie fixe (23/09). Arrondie au pixel parce que c'est une bordure, et qu'un navigateur arrondit les bordures : l'autre moitié se calcule par SOUSTRACTION, et non en redivisant, pour que les deux fassent toujours exactement `--sous-heros` — sans quoi le texte se posait un pixel plus haut qu'avec l'option éteinte. */ --demi-blanc:round(down, calc(var(--sous-heros) / 2), 1px); } .heros{margin-bottom:var(--sous-heros)} /* ── L'EN-TÊTE POSÉ SUR LA PHOTOGRAPHIE (15/09) ──────────────────────── Marc : « il faut aussi que l'on puisse régler le haut (Logo + Hamburger) : au-dessus comme actuellement, ou sur l'image ». L'en-tête quitte le flux et flotte au-dessus ; la photographie commence donc tout en haut de la page et gagne la centaine de pixels qu'il occupait. Son filet rouge reste : c'est la signature du site, et elle marque le haut de la page aussi bien sur une image que sur du blanc. LE FOND DU LOGO EST UNE DÉCISION, PAS UN DÉTAIL. Sans fond, le logo et le menu gardent leur encre sombre : ils ne se lisent que si la bande, ou la photographie, est claire à cet endroit — c'est le cas qui a fait demander le réglage. Le fond blanc les rend lisibles quoi qu'il y ait derrière. Seule la page d'accueil avec photographie porte cette classe : partout ailleurs, rien de tout ceci ne s'applique. */ .entete-sur-image .bandeau{ position:absolute; top:0; left:0; right:0; z-index:5; background:rgba(var(--entete-c,255,255,255), var(--entete-o,0)); border-bottom:0; } /* LE LOGO ET LE MENU SE RÈGLENT SÉPARÉMENT (15/09, au soir). Marc : « il faut pouvoir choisir si le hamburger a un fond blanc ou n'a pas de fond, et s'il n'en a pas, sa couleur parmi les couleurs du site ». Les deux n'ont pas la même contrainte. **Le logo est une marque : on ne le repeint pas.** Sans fond il garde ses couleurs, et il faut donc que ce qu'il y a derrière les laisse lire — c'est le rôle de la plaque blanche, ou de la bande. **Le menu n'est qu'un signe** : sa couleur se choisit. La plaque est sous le logo et sous le bouton, pas sur toute la largeur : sinon ce n'est plus « sur l'image », c'est l'en-tête d'aujourd'hui avec une image en dessous. */ .entete-sur-image .bandeau.logo-blanc .marque a, .entete-sur-image .bandeau.menu-fond-blanc .menu-bouton{ background:#fff; padding:8px 12px; border-radius:2px; } .entete-sur-image .bandeau.logo-blanc .marque a{display:inline-block;line-height:0} /* ══ LE LOGO : SA TAILLE ET SON OMBRE, PAR ÉCRAN (16/09) ═══════════════════ Marc : « le logo Equideals ne ressort pas assez. J'ai essayé plusieurs choses : logo sur fond blanc, bande blanche plus ou moins transparente, … et rien ne me plaît. » MESURÉ AVANT DE RÉPONDRE, et la mesure explique l'échec de tout ce qu'il avait essayé. Les lettres du logo sont un gris 176/255 — un logo dessiné pour une page blanche. Sur la photographie de l'Arc de Triomphe, dont la luminance médiane sous le logo vaut 116, cela donne **2,16:1**, là où le seuil d'un grand élément graphique est 3:1. ET LA BANDE BLANCHE FAISAIT L'INVERSE DE CE QU'ON LUI DEMANDAIT : en éclaircissant la photographie, elle la rapprochait du gris des lettres. Mesuré : 1,35:1 à 25 %, 1,14:1 à 35 % — MOINS qu'à nu. Plus Marc montait la bande, plus le logo disparaissait. Aucune chance que cela lui plaise. D'OÙ L'OMBRE PLUTÔT QU'UNE BANDE. Une bande est une forme de plus posée sur la photographie ; une ombre ne se voit pas — on voit seulement que le logo se détache. Elle épouse les lettres parce que `drop-shadow` travaille sur le canal alpha de l'image, pas sur sa boîte : c'est la même idée que la bande qui épouse la ligne la plus longue du titre (D95 §20), un cran plus fin. CE QUE L'OMBRE APPORTE, EXACTEMENT — et j'avais commencé par le surestimer. Simulé sur la photographie de Marc, au corps réel du logo, en comparant les traits à ce qui les entoure immédiatement : **+0,75 point de contraste à fond**. Le logo blanc passe de 4,60:1 à 5,96:1. Le logo gris, lui, va de 2,21:1 à 2,87:1 — **il n'atteint jamais 3, quelle que soit l'ombre**. Mon premier chiffre, 8,5:1, comparait le gris au CŒUR de son ombre : une grandeur exacte qui ne décrit pas ce que l'œil voit. *Mesurer la bonne quantité, pas seulement mesurer.* DEUX OMBRES ET NON UNE. La première, serrée, dessine le bord des lettres. La seconde, large et diffuse, décolle l'ensemble du fond. Une seule ombre large donnerait un halo sale ; une seule serrée, un liseré dur. LE FACTEUR DE TAILLE PLUTÔT QU'UNE HAUTEUR. Le logo a déjà trois hauteurs selon la largeur de l'écran — 32, 38 et 56 px. Un réglage en pixels en écraserait deux sur trois ; un facteur les respecte toutes. `--logo-k` vaut 1 par défaut, donc une page qui n'a rien réglé ne bouge pas d'un pixel. POURQUOI PAR ÉCRAN. Marc l'a demandé pour la taille, et l'ombre suit pour la même raison : les deux cadrages ne montrent pas le même morceau de photographie. Ce qui suffit sur les toits ne suffit pas sur le ciel. */ /* LE CHOIX DE L'ÉCRAN SE FAIT ICI, ET NON DANS L'ATTRIBUT `style`. Le gabarit pose les quatre valeurs — deux tailles, deux ombres — et c'est la feuille de style qui désigne celle qui s'applique. L'inverse ne marcherait pas : un style en ligne l'emporte sur une règle de feuille pour une même propriété, donc une media query ne pourrait pas réécrire un `--logo-k` posé en ligne. Deux noms distincts, et le choix redevient possible. LE BASCULEMENT EST À 700 px, celui des deux cadrages du héros — et non 640, celui des hauteurs de logo. « Petit », ici, veut dire « c'est le cadrage du téléphone qui est à l'écran » : les réglages doivent changer en même temps que la photographie qu'ils habillent. */ .entete-sur-image .bandeau{ --logo-k:var(--logo-k-grand, 1); --logo-ombre:var(--logo-ombre-grand, 0); } @media(max-width:699px){ .entete-sur-image .bandeau{ --logo-k:var(--logo-k-petit, 1); --logo-ombre:var(--logo-ombre-petit, 0); } } .entete-sur-image .marque img{ /* La même hauteur continue que l'en-tête ordinaire (22/09), multipliée par le réglage de taille du panneau. */ height:calc(var(--h-logo) * var(--logo-k, 1)); filter:drop-shadow(0 1px 2px rgba(0,0,0,calc(var(--logo-ombre, 0) * 0.85))) drop-shadow(0 3px 14px rgba(0,0,0,calc(var(--logo-ombre, 0) * 0.55))); } /* L'ombre sur la PLAQUE et non sur le logo quand il y a une plaque : sinon on ombre des lettres posées sur un blanc opaque, ce qui ne sert à rien, et la plaque, elle, reste un rectangle qui flotte. Trouvé en regardant les deux réglages ensemble — chacun pris seul avait l'air juste. */ .entete-sur-image .bandeau.logo-blanc .marque a{ filter:drop-shadow(0 2px 10px rgba(0,0,0,calc(var(--logo-ombre, 0) * 0.5))); } .entete-sur-image .bandeau.logo-blanc .marque img{filter:none} /* *Les deux reprises de hauteur qui vivaient ici — une par media query — ont disparu avec les paliers (22/09). Elles existaient parce que cette règle est plus spécifique que le `.marque img` de base et masquait ses variantes ; la hauteur étant désormais continue et écrite une seule fois, il n'y a plus de variante à reprendre. **Une exception disparaît avec la règle qui la rendait nécessaire.*** */ /* SANS PLAQUE, IL FAUT AUSSI RETIRER CE QUI EN TENAIT LIEU. Le bouton du menu porte, dans sa règle de base, `background:var(--surface)` et une bordure grise : « sans fond » ne voulait donc rien dire, et c'est le carré blanc que Marc a photographié. Les deux sautent ici, et la zone cliquable de 8 px tout autour (`::after`) n'en est pas touchée. La couleur passe par `color`, et non par `fill` sur les rectangles : le dessin est en `currentColor`, et la transition de 0,18 s écrite dans la règle de base s'applique alors au survol sans rien ajouter. */ .entete-sur-image .bandeau.menu-fond-transparent .menu-bouton, .entete-sur-image .bandeau.menu-fond-transparent .menu-boite[open] .menu-bouton{ background:transparent; border-color:transparent; } .entete-sur-image .bandeau.menu-fond-transparent.menu-blanc .menu-bouton{color:#fff} .entete-sur-image .bandeau.menu-fond-transparent.menu-noir .menu-bouton{color:#111} .entete-sur-image .bandeau.menu-fond-transparent.menu-gris .menu-bouton{color:var(--e-gris,#b0b0b0)} .entete-sur-image .bandeau.menu-fond-transparent.menu-rouge .menu-bouton{color:var(--rouge,#c00822)} /* La plaque, elle, n'a pas de bordure : celle du logo n'en a pas, et deux traitements différents pour deux plaques côte à côte se remarquent. */ .entete-sur-image .bandeau.menu-fond-blanc .menu-bouton{border-color:transparent} /* AU SURVOL, CE SONT LES TRAITS QUI CHANGENT, PAS LE FOND. Un fond qui apparaît au survol disparaît sur les photographies de sa propre teinte — c'est ce que faisait le premier montage, et Marc l'a vu : « je vois qu'il devient transparent au survol ». Un changement de couleur, lui, se voit sur n'importe quelle image. Rouge, donc — et marine quand les traits y sont déjà, sans quoi le survol ne ferait rien. La règle du marine est écrite après celle du rouge : même spécificité, la cascade tranche. */ .entete-sur-image .bandeau.menu-fond-transparent .menu-bouton:hover{background:transparent} .entete-sur-image .bandeau.menu-fond-blanc .menu-bouton:hover{background:#fff} /* Les quatre couleurs sont rappelées ici, et ce n'est pas une redondance : la règle de repos porte cinq classes, une règle de survol qui en porterait quatre perdrait devant elle. Vu à l'écran — le survol ne faisait rien sur le blanc, le noir et le gris, et fonctionnait sur le rouge, qui était le seul écrit avec la même précision. */ .entete-sur-image .bandeau.menu-fond-blanc .menu-bouton:hover, .entete-sur-image .bandeau.menu-fond-transparent.menu-blanc .menu-bouton:hover, .entete-sur-image .bandeau.menu-fond-transparent.menu-noir .menu-bouton:hover, .entete-sur-image .bandeau.menu-fond-transparent.menu-gris .menu-bouton:hover{color:var(--rouge,#c00822)} .entete-sur-image .bandeau.menu-fond-transparent.menu-rouge .menu-bouton:hover{color:var(--marine,#193040)} /* Le menu déroulé se pose sur la photographie : il lui faut un fond opaque, sans quoi ses entrées se lisent par-dessus l'image. */ .entete-sur-image .bandeau .menu{background:var(--surface,#fff)} /* Écran étroit ET bas — un téléphone tenu à l'horizontale : la bande prendrait tout l'écran et le visiteur ne verrait rien d'autre. */ @media(max-height:520px) and (orientation:landscape){ /* le plafond de 72 est posé dans `--heros-max`, plus haut */ } /* ══════════════════════════════════════════════════════════════════════ LES BLOCS D'UNE PAGE RÉDIGÉE ══════════════════════════════════════════════════════════════════════ Séance 7, 15 septembre 2026. Marc, devant la page Mission : « une page comme celle-ci est un peu sèche… il faudrait une forme d'habillage du texte qui évite le côté mortel ». LE DÉFAUT N'ÉTAIT PAS L'ABSENCE D'ORNEMENT. Mesuré avant d'y toucher : la colonne de texte fait 584 px dans une page qui en offre 1 224, tout est aligné à gauche, et les 640 px de droite restent vides. Chaque paragraphe a le même poids que le précédent. La page ne manque pas de décor, elle manque de RELIEF et d'un point d'entrée. D'où deux largeurs, et non une : la colonne de lecture — 70 caractères, c'est ce qui se lit le mieux, et on n'y touche pas — et la pleine page, pour ce qui est détaché du fil. C'est l'alternance des deux qui remplit le blanc sans allonger la page. Chaque bloc porte sa largeur et sa présentation en classes. Rien n'est décidé ici sur le contenu : la feuille de style ne fait qu'obéir. */ .blocs{padding-bottom:clamp(40px,calc(6 * var(--vw)),72px)} /* 36,5 rem, et non 70ch — la mesure prise au banc le 15/09. `ch` était le premier jet, et il avait l'air juste : 70 caractères, c'est la bonne longueur de ligne. Mais `ch` se résout contre la taille de police de CHAQUE élément, pas contre celle du texte courant. Mesuré : le paragraphe (15 px) s'arrêtait à 584 px, le titre de section (27 px) à 945. Le titre dépassait donc de 361 px la colonne qu'il annonce — invisible sur un titre court comme « À qui nous nous adressons », flagrant dès qu'il en faut deux lignes, et le filet rouge du sous-titre aurait couru plus large que son texte. 36,5 rem vaut exactement les 584 px du paragraphe, et le `rem` se résout contre la racine : tous les blocs partagent désormais la même mesure, quelle que soit leur taille de police. Trouvé en lisant `maxWidth` calculé, pas en regardant la page — elle était plausible. */ .bloc-colonne{max-width:36.5rem} .bloc-pleine{max-width:none} /* Le fil du texte : mêmes marges et mêmes tailles que `.texte`, pour qu'une page en blocs et une fiche au fil du texte se ressemblent. */ .bloc-texte p,.bloc-texte ul,.bloc-texte ol,.bloc-liste ul,.bloc-liste ol{margin:0 0 15px} .bloc-texte > *:last-child,.bloc-liste > *:last-child{margin-bottom:0} .bloc-texte a,.bloc-liste a{color:var(--accent-texte);text-decoration-thickness:1px;text-underline-offset:2px} .bloc + .bloc{margin-top:18px} .bloc-titre{ font-family:var(--police-titre);font-weight:600;color:var(--encre); margin:34px 0 12px; } h2.bloc-titre{font-size:clamp(21px,calc(2.6 * var(--vw)),27px);line-height:1.2} h3.bloc-titre{font-size:19px;line-height:1.25;margin-top:28px;margin-bottom:10px} .bloc + h2.bloc-titre{margin-top:38px} /* ── LES QUATRE PRÉSENTATIONS D'UN BLOC DE TEXTE ─────────────────────── Marc : « en encadrer certains, mettre des traits en marge par exemple ? ». Les voici. Elles ne changent que l'apparence : un paragraphe encadré reste un paragraphe, et c'est pourquoi il n'y a qu'un type de bloc pour les cinq. */ /* Le filet en marge : le rouge du site, fin, et un retrait qui l'accompagne. C'est la façon la plus discrète de dire « ceci est à part ». */ .bloc-filet{ border-left:3px solid var(--rouge); padding-left:clamp(14px,calc(1.6 * var(--vw)),22px); } .bloc-encadre{ border:1px solid var(--filet-fort); border-top:3px solid var(--rouge); padding:clamp(16px,calc(2 * var(--vw)),24px) clamp(16px,calc(2.2 * var(--vw)),26px); background:var(--surface); } .bloc-teinte{ background:var(--fond); padding:clamp(16px,calc(2 * var(--vw)),24px) clamp(16px,calc(2.2 * var(--vw)),26px); } /* Deux colonnes AU-DELÀ DE 1 100 px seulement, et c'est la demande de Marc : « peut-être simplement passer en 2 colonnes quand la page est très large ». En dessous, deux colonnes de 40 caractères seraient illisibles. `column-fill:balance` évite qu'une colonne soit pleine et l'autre à moitié ; `break-inside:avoid` empêche qu'un paragraphe soit coupé en deux. */ @media(min-width:1100px){ .bloc-colonnes{ max-width:none; columns:2; column-gap:clamp(32px,calc(4 * var(--vw)),64px); column-fill:balance; } .bloc-colonnes p,.bloc-colonnes ul,.bloc-colonnes ol{break-inside:avoid} } /* ── L'EXERGUE ───────────────────────────────────────────────────────── Une phrase de la maison, sortie du fil. La puce E la précède — le même dessin que devant les titres de section, à la même échelle. */ .bloc-exergue{ margin:30px 0; padding-left:clamp(16px,calc(2 * var(--vw)),26px); border-left:3px solid var(--rouge); } .bloc-exergue blockquote{margin:0} .bloc-exergue p{ margin:0; font-family:var(--police-titre);font-weight:400;font-style:italic; font-size:clamp(19px,calc(2.3 * var(--vw)),25px);line-height:1.32;color:var(--encre); text-wrap:balance; } .bloc-exergue figcaption{ margin-top:10px;font-size:13px;color:var(--encre-tenue); } .bloc-exergue cite{font-style:normal} .bloc-citation{margin:26px 0;padding-left:clamp(16px,calc(2 * var(--vw)),26px);border-left:1px solid var(--filet-fort)} .bloc-citation blockquote{margin:0;font-style:italic;color:var(--encre-douce)} .bloc-citation figcaption{margin-top:8px;font-size:13px;color:var(--encre-tenue)} /* ── LES CHIFFRES CLÉS ───────────────────────────────────────────────── Deux à quatre, en ligne sur grand écran. Le nombre de colonnes suit le nombre de chiffres : trois chiffres dans une grille de quatre laisseraient un trou, et un trou se lit comme un oubli. */ .bloc-chiffres{ display:grid; grid-template-columns:1fr; gap:clamp(18px,calc(2.4 * var(--vw)),32px); margin:34px 0; padding:clamp(20px,calc(2.6 * var(--vw)),32px) 0; border-top:1px solid var(--filet-fort); border-bottom:1px solid var(--filet-fort); } @media(min-width:700px){ .bloc-chiffres{grid-template-columns:repeat(var(--combien,3),1fr)} } .chiffre{display:flex;flex-direction:column;gap:4px;min-width:0} .chiffre-valeur{ font-family:var(--police-titre);font-weight:600; font-size:clamp(30px,calc(4 * var(--vw)),44px);line-height:1;color:var(--rouge); } .chiffre-quoi{font-size:14px;line-height:1.35;color:var(--encre-douce)} /* ── LE PAVÉ DE FIN ──────────────────────────────────────────────────── Ce qu'on attend du lecteur une fois qu'il a lu. Le bouton n'est pas un bouton de formulaire : c'est un lien, et il en garde le comportement — on peut l'ouvrir dans un onglet, le copier, le suivre au clavier. */ .bloc-appel{ margin:40px 0 0; padding:clamp(22px,calc(2.8 * var(--vw)),34px) clamp(20px,calc(2.6 * var(--vw)),32px); background:var(--marine); color:#fff; } .bloc-appel .appel-titre{ margin:0; font-family:var(--police-titre);font-weight:600; font-size:clamp(20px,calc(2.4 * var(--vw)),26px);line-height:1.25; text-wrap:balance; } .bloc-appel .appel-texte{margin:10px 0 0;font-size:15px;color:rgba(255,255,255,.82);max-width:60ch} .appel-bouton{ display:inline-block;margin-top:18px; padding:11px 20px; background:var(--rouge);color:#fff;text-decoration:none; font-weight:500;font-size:15px; } .appel-bouton:hover{background:#fff;color:var(--marine)} .appel-bouton:focus-visible{outline:2px solid #fff;outline-offset:2px} .bloc-image{margin:26px 0} .bloc-image img{display:block;width:100%;height:auto} .bloc-image figcaption{margin-top:8px;font-size:13px;color:var(--encre-tenue)} /* Le filet de séparation de Kirby, ramené à la sobriété du site. */ .blocs hr{border:0;border-top:1px solid var(--filet-fort);margin:34px 0;max-width:70ch} /* Le chapeau : le premier paragraphe, en plus grand, qui donne envie de lire les autres. C'est le point d'entrée qui manquait — une page qui commence par six paragraphes de même poids n'en propose aucun. Plus grand mais pas plus large : la colonne de lecture ne s'étire pas, sinon les lignes deviennent trop longues à mesure que le corps grandit. */ .bloc-chapeau{margin-bottom:26px} .bloc-chapeau p{ font-size:clamp(17px,calc(1.9 * var(--vw)),20px); line-height:1.5; color:var(--encre); } /* ============================================================ Le cadre commun des fiches et des actualités (2 octobre 2026, D106) ------------------------------------------------------------ Validé par Marc sur maquette. Rien ici ne se règle au panneau : on y choisit à quoi sert un passage, jamais une taille ni une couleur. Unités de fenêtre : toujours `--vw` (voir la règle du 23/09). ============================================================ */ .article-meta{ font:400 12px/1 var(--police-chiffres);color:var(--encre-tenue); margin:14px 0 0;display:flex;gap:10px;flex-wrap:wrap; } .article-corps{padding-top:6px} /* L'essentiel */ .essentiel{ max-width:36.5rem;background:var(--surface);border:1px solid var(--filet); border-left:3px solid var(--rouge);padding:16px 20px 14px;margin:0 0 28px;box-shadow:var(--ombre); } .essentiel h2{font:500 11px/1 var(--police-chiffres);letter-spacing:.18em;text-transform:uppercase;color:var(--rouge);margin:0 0 12px} .essentiel ul{margin:0;padding-left:18px} .essentiel li{margin:0 0 6px} .essentiel li:last-child{margin-bottom:0} /* Le sommaire, automatique */ .sommaire{max-width:36.5rem;margin:0 0 30px;border-top:1px solid var(--filet)} .sommaire p{font:500 11px/1 var(--police-chiffres);letter-spacing:.18em;text-transform:uppercase;color:var(--encre-tenue);margin:14px 0 10px} .sommaire ol{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:5px} .sommaire li{counter-increment:s} .sommaire a{color:var(--encre-douce);text-decoration:none;display:inline-flex;gap:10px;align-items:baseline} .sommaire a::before{content:counter(s,decimal-leading-zero);font:400 12px/1 var(--police-chiffres);color:var(--rouge)} .sommaire a:hover{color:var(--encre);text-decoration:underline;text-underline-offset:3px} .article .bloc-titre{scroll-margin-top:calc(var(--haut-bandeau, 0px) + 16px)} /* La carte de l'opération */ .operation{ display:grid;grid-template-columns:150px auto 1fr;align-items:center;gap:8px 20px; background:var(--surface);border:1px solid var(--filet);border-top:2px solid var(--rouge); padding:18px 20px;margin:0 0 28px;box-shadow:var(--ombre); } .op-logo img{display:block;max-width:150px;max-height:70px;width:auto;height:auto} .op-nom{font:600 15px/1.2 var(--police-texte)} .op-sens{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--encre-tenue)} .op-sens svg{width:40px;height:12px} .op-type{font:500 10.5px/1 var(--police-chiffres);letter-spacing:.14em;text-transform:uppercase;color:var(--encre-douce);display:inline-flex;gap:6px;align-items:center;white-space:nowrap} .op-type::before{content:"";width:7px;height:7px;background:var(--t)} .op-contre span{display:block;font:500 10.5px/1 var(--police-chiffres);letter-spacing:.14em;text-transform:uppercase;color:var(--encre-tenue);margin-bottom:5px} .op-contre b{font:400 19px/1.2 var(--police-titre);color:var(--encre)} .op-contre small{display:block;font-size:12.5px;color:var(--encre-tenue);margin-top:3px} .op-liens{grid-column:1/-1;display:flex;gap:6px 18px;flex-wrap:wrap;border-top:1px solid var(--filet);padding-top:12px;margin:6px 0 0} .op-liens a{font-size:13px;font-weight:600;color:var(--accent-texte);text-decoration:none} .op-liens a::after{content:" →"} .op-liens a:hover{text-decoration:underline;text-underline-offset:3px} @media(max-width:560px){ .operation{grid-template-columns:1fr;justify-items:start} .op-sens{flex-direction:row} .op-sens svg{display:none} } /* La citation, dans une fiche ou une actualité : la parole de quelqu'un, en évidence. Les pages rédigées gardent la leur, plus discrète. */ .article .bloc-citation{border-left:2px solid var(--rouge);padding-left:22px;margin:26px 0} .article .bloc-citation blockquote{font:italic 400 clamp(17px,calc(2 * var(--vw)),20px)/1.45 var(--police-titre);color:var(--encre)} .article .bloc-citation blockquote p{margin:0} .article .bloc-citation figcaption{font-size:13px;color:var(--encre-tenue)} /* Le point clé */ .bloc-point{ display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start; background:#f0f5f7;padding:16px 18px;margin:24px 0;color:var(--bleu); } .point-attention{background:#fbf1f2;color:var(--rouge)} .point-picto{width:34px;height:34px} .point-texte{color:var(--encre)} .point-texte p{margin:0 0 8px} .point-texte > *:last-child{margin-bottom:0} .point-texte ul{margin:0;padding-left:18px} .point-texte .point-sorte{ font:500 11px/1 var(--police-chiffres);letter-spacing:.16em;text-transform:uppercase; color:var(--bleu);margin:2px 0 8px; } .point-attention .point-sorte{color:var(--rouge)} /* Le tableau */ .bloc-tableau{margin:22px 0 26px} .tableau-defile{overflow-x:auto;border:1px solid var(--filet);background:var(--surface)} .tableau-defile:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .bloc-tableau table{border-collapse:collapse;width:100%;font-size:14px} .bloc-tableau th,.bloc-tableau td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--filet);vertical-align:top} .bloc-tableau tbody tr:last-child > *{border-bottom:0} .bloc-tableau thead th{font:500 11px/1.3 var(--police-chiffres);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-tenue);background:#fafafa;white-space:nowrap} .bloc-tableau tbody th{font-weight:600;color:var(--encre)} .bloc-tableau td.nombre{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .bloc-tableau figcaption{margin-top:8px;font-size:12.5px;color:var(--encre-tenue)} @media(max-width:560px){.bloc-tableau table{min-width:480px}} /* Les étapes */ .bloc-etapes{list-style:none;padding:0;margin:26px 0 28px;counter-reset:e;display:grid;gap:18px} .bloc-etapes li{counter-increment:e;position:relative;padding:3px 0 0 46px} .bloc-etapes li::before{ content:counter(e);position:absolute;top:0;left:0;width:30px;height:30px;border-radius:50%; background:var(--rouge);color:#fff;font:600 14px/30px var(--police-chiffres);text-align:center;z-index:1; } .bloc-etapes li::after{content:"";position:absolute;top:30px;left:14px;bottom:-18px;border-left:2px solid var(--filet-fort)} .bloc-etapes li:last-child::after{display:none} .etape-titre{display:block;font-weight:600;color:var(--encre);margin-bottom:3px} .etape-texte{display:block;font-size:14px;line-height:1.5;color:var(--encre-douce)} @media(min-width:700px){ .etapes-ligne{grid-template-columns:repeat(var(--n,4),1fr);gap:0} .etapes-ligne li{padding:44px 14px 0 0} .etapes-ligne li::after{top:15px;left:30px;right:0;bottom:auto;border-left:0;border-top:2px solid var(--filet-fort)} } /* Le schéma commenté */ .bloc-schema{margin:24px 0 28px} .schema-image{position:relative;background:#fff;border:1px solid var(--filet)} .schema-image img{display:block;width:100%;height:auto} .repere{ position:absolute;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%; border:2px solid #fff;background:var(--marine);color:#fff;text-decoration:none; font:600 12px/20px var(--police-chiffres);text-align:center; box-shadow:0 1px 4px rgba(0,0,0,.3);transition:transform .15s,background-color .15s; } .repere.famille-b{background:#8a1020} .repere:hover,.repere.actif{transform:translate(-50%,-50%) scale(1.25);background:var(--rouge)} .repere:focus-visible{outline:2px solid var(--focus);outline-offset:2px} @media(max-width:640px){.repere{width:20px;height:20px;font-size:10.5px;line-height:16px}} .schema-consigne{font-size:12.5px;color:var(--encre-tenue);margin:10px 0 8px;font-style:italic} .explications{ position:relative;background:var(--surface);border:1px solid var(--filet-fort); max-height:var(--hauteur,300px);overflow-y:auto;overscroll-behavior:contain;padding:6px 20px; } .explications:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .expl{padding:12px 0 12px 38px;border-bottom:1px solid var(--filet);position:relative;transition:background-color .3s} .expl:last-child{border-bottom:0} .expl .num{position:absolute;left:0;top:13px;width:24px;height:24px;border-radius:50%;background:var(--marine);color:#fff;font:600 12px/24px var(--police-chiffres);text-align:center} .expl.famille-b .num{background:#8a1020} .expl h3{font:600 15px/1.3 var(--police-texte);margin:0 0 4px;color:var(--encre)} .expl.phase h3{font:500 11.5px/1.3 var(--police-chiffres);letter-spacing:.14em;text-transform:uppercase} .expl p{margin:0 0 6px;font-size:14px;color:var(--encre-douce)} .expl .resultat{border-left:2px solid var(--vert);padding-left:10px;margin-top:8px} .expl .resultat.negatif{border-left-color:var(--rouge)} .expl .resultat-titre{font-weight:600;color:var(--vert);font-size:13.5px;margin-bottom:2px} .expl .resultat.negatif .resultat-titre{color:var(--rouge)} .expl .resultat p{font-size:13.5px} .expl.actif{background:linear-gradient(90deg,rgba(192,8,34,.06),transparent 70%)} .expl:target{background:linear-gradient(90deg,rgba(192,8,34,.06),transparent 70%)} @media(max-width:640px){.explications{padding:4px 14px}.expl{padding-left:34px}} .schema-legende{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--encre-douce);margin:10px 0 0} .schema-legende span{display:inline-flex;align-items:center;gap:6px} .schema-legende i{width:12px;height:12px;border-radius:50%;background:var(--marine);display:inline-block} .schema-legende .famille-b i{background:#8a1020} /* Le pied : documents joints, version PDF */ .article-pied{max-width:36.5rem;margin-top:30px;display:grid;gap:14px;justify-items:start} .documents{list-style:none;margin:0;padding:0;display:grid;gap:8px;width:100%} .document{display:flex;gap:14px;align-items:center;border:1px solid var(--filet);background:var(--surface);padding:12px 16px;text-decoration:none;color:var(--encre)} .document svg{width:26px;height:32px;flex:0 0 auto;color:var(--marine)} .document svg .fleche{stroke:var(--rouge)} .document b{display:block;font-weight:600} .document small{font-size:12.5px;color:var(--encre-tenue)} .document:hover{border-color:var(--encre)} .imprimer{font:600 13px/1 var(--police-texte);color:var(--encre);background:var(--surface);border:1px solid var(--filet-fort);padding:10px 14px;cursor:pointer} .imprimer::before{content:"↓ ";color:var(--rouge)} .imprimer:hover{border-color:var(--encre)} .imprimer:focus-visible{outline:2px solid var(--focus);outline-offset:2px} /* LA VERSION PDF : l'impression d'une fiche ou d'une actualité, sans les décors du site. Le bouton « Version PDF / imprimer » ouvre l'impression du navigateur, qui propose « Enregistrer en PDF ». */ @media print{ @page{margin:16mm 14mm} html{zoom:1!important} body{background:#fff!important} .bandeau,.bas,.menu,.voisins,.pour-aller-plus-loin,.imprimer,.schema-consigne,.op-liens,.appel-bouton,.evitement{display:none!important} .article .enveloppe{max-width:none;padding:0} .article h1{font-size:26pt} .explications{max-height:none!important;overflow:visible!important;border:0;padding:0} .essentiel,.operation,.bloc-chiffres,.bloc-tableau,.bloc-citation,.bloc-point,.expl,.bloc-etapes li,.bloc-appel{break-inside:avoid} .bloc-titre{break-after:avoid} .bloc-appel{background:none;color:var(--encre);border:1px solid var(--filet-fort)} .bloc-appel .appel-texte{color:var(--encre-douce)} .tableau-defile{overflow:visible} .essentiel,.operation{box-shadow:none} } .tableau-titre{font:600 15px/1.3 var(--police-texte);color:var(--encre);margin:0 0 8px} /* ============================================================ Les actualités en pavés, sur deux colonnes (2 octobre 2026, D108) ------------------------------------------------------------ Marc : « ne serait-il pas mieux de présenter les actualités dans la liste d'ensemble sur 2 colonnes, et peut-être dans des pavés, un peu sur le principe des témoignages ? ». Même pavé que le témoignage : filet de couleur de la nature en haut, logo et opération en tête, texte, et la ligne du bas collée au pied pour que les « Lire la suite » s'alignent. La page Actualités seulement : le carrousel de l'accueil ne change pas. ============================================================ */ .fil-paves{max-width:none;display:grid;grid-template-columns:1fr;gap:16px} @container liste (min-width:560px){.fil-paves{grid-template-columns:repeat(2,1fr)}} .fil-paves .billet,.fil-paves .billet:first-child{padding:0;border-top:2px solid var(--teinte)} .pave-actu .mot-tete{min-height:79px} .pave-corps{padding:16px 18px 4px;flex:1 1 auto} .pave-actu .quand{margin-top:0} .pave-actu .billet-titre{font-size:clamp(18px,calc(2 * var(--vw)),21px)} .pave-actu .billet-chapeau{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden} .pave-actu .billet-bas{margin:0;padding:12px 18px 14px;border-top:1px solid var(--filet);margin-top:auto} /* La reprise de fin de page (02/10, D109) : transparente, la photographie se voit au travers ; la copie de l'accroche s'y pose comme `.heros` au repos. */ .fond-photo .reprise{position:relative;scroll-margin-top:var(--haut-bandeau, 97px);pointer-events:none} /* ── LA CARTE ENTIÈRE COMME LIEN, AU DOIGT (02/10/2026, D110) ───────────── Marc : sur téléphone et tablette il n'y a pas de survol qui montre que le titre est un lien ; il faut que tout le rectangle mène au détail. Actualités et fiches thématiques, partout où elles paraissent. Le lien du titre s'étend sur la carte par un `::after` : il reste UN lien pour le clavier et les lecteurs d'écran. Les renvois (icônes Témoignage) passent au-dessus et gardent leur destination. Sur ordinateur, rien ne change. */ .billet,.pierre-texte{position:relative} .lire-fiche{text-decoration:none} .lire-fiche:hover{text-decoration:underline;text-underline-offset:3px} @media (hover:none){ .billet-titre a::after, .pierre-texte .nom-long a::after{content:"";position:absolute;inset:0;z-index:1} .billet .renvoi{z-index:2} } /* ── LES PAGES RÉDIGÉES PRENNENT LA TRAME (05/10/2026, D115) ───────────── Marc, voyant le texte des Advisors revenir à la ligne avant la largeur de la page : « 2 pour les pages rédigées » — tout le texte en blocs à la largeur de l'en-tête (790), et non dans la colonne de lecture de 584. Mission, Valeurs, Notre ADN, les métiers, et le bas de la page Équipe : leurs gabarits posent `blocs-trame`. Les fiches et les actualités gardent la colonne (`article-corps` ne la porte pas). ⚠ C'est un choix contre la règle typographique, fait en connaissance de cause : environ 110 caractères par ligne en corps 15 px, pour 75 au plus. Les IMAGES restent dans la colonne : elles sont servies à 700 px de large, et 790 les agrandirait au-delà de leur définition — floues. */ .blocs-trame .bloc-colonne:not(.bloc-image){max-width:none} /* ── MOINS DE BLANC AVANT LE FILET D'UNE SECTION (05/10/2026, D119) ─────── Marc, sur l'accueil : « il reste encore beaucoup de place sous les ronds et le + avant le trait gris [...] celui sous le trait gris me semble OK, autant celui au-dessus pourrait être extrêmement réduit ». Mesuré à 1 280 : 58 px au-dessus du filet, 34 en dessous. Le dessous ne change pas (`--respiration`) ; le dessus passe à 15 px — plus les 7 px de vide que la rangée des ronds porte déjà sous eux, soit environ 22 px visibles. La DERNIÈRE section garde son blanc d'origine : derrière elle vient la fin de la page, pas un filet. */ .extrait .carrousel-barre, .extrait .plus-de{margin-bottom:clamp(10px,calc(1.2 * var(--vw)),16px)} .extrait:last-of-type .carrousel-barre, .extrait:last-of-type .plus-de{margin-bottom:clamp(34px,calc(5 * var(--vw)),58px)} /* ── LE TRAIT DE COULEUR DE CHAQUE MÉTIER (06/10/2026, D122) ──────────── Marc : « surligner chaque sous-bloc d'un trait de la couleur que tu utilises pour les différentes options du filtrage des références ». Le même trait que le haut des cartes de Références (2 px, `--teinte`), pour que la couleur se lise comme la même chose aux deux endroits. */ .pave-liste > li.metier-teinte{border-top:2px solid var(--teinte);padding-top:12px} /* ── UN SEUL SÉPARATEUR SUR L'ACCUEIL : LE FILET GRIS (14/10/2026, D124) ── Marc : « remplacer le trait rouge entre ADN et Métiers par un trait grisé, et en mettre un au-dessus de "Qui sommes-nous", exactement comme au-dessus de "Nos opérations" ». Les pavés perdent leur trait rouge de 2 px et prennent le filet des extraits de rubrique : 1 px gris, la respiration en dessous, et peu de blanc au-dessus (D119). Le premier bloc sous la photographie en porte un aussi, comme la première rubrique — qui le cachait jusqu'ici. Toutes les sections de l'accueil s'ouvrent donc de la même façon. */ .pave{border-top:0;padding-top:0} .pave::before{ content:"";display:block; border-top:1px solid var(--filet); margin-bottom:var(--respiration); } .paves{padding-bottom:clamp(10px,calc(1.2 * var(--vw)),16px)} .accueil-intro{padding-bottom:clamp(10px,calc(1.2 * var(--vw)),16px)} .extrait:first-of-type .titre-extrait::before{display:block} /* ── LE TÉMOIGNAGE : L'AUTEUR, LA CITATION, PUIS L'OPÉRATION (14/10/2026, D125). Marc : l'auteur en tête, suivi de « : » ; la ligne logo + opération en bas, sous un filet gris ; plus de filet au-dessus de « Voir l'opération », qui fait corps avec elle. Le blanc de la carte passe désormais AU-DESSUS du logo (margin-top:auto) : d'une carte à l'autre, les logos et les « Voir l'opération » s'alignent, comme les signatures s'alignaient avant (11/09). Limité à `.mot` : le pavé d'actualité garde son en-tête à logo tel quel. */ .mot .mot-signature{margin:0;padding:16px 18px 0} .mot .mot-texte{padding:10px 18px 16px} .mot .mot-tete{margin-top:auto;border-bottom:0;border-top:1px solid var(--filet)} .mot .pied{border-top:0;margin-top:0;padding-top:0} /* ── TROIS TÉMOIGNAGES DE FRONT, ET DE L'AIR AUTOUR DE L'AUTEUR (14/10/2026, D126). Marc : « passe à 3 de front dès que cela permet d'avoir des pavés au moins de la largeur de l'image jointe » — 330 px mesurés sur sa capture (660 points d'écran Retina). Trois cartes de 330 et deux gouttières de 16 font 1 022 px de liste : au-delà, trois colonnes. Sur la page sans filtres, cela arrive vers 1 100 px de fenêtre ; avec la colonne de filtres, plus tard. Le carrousel de l'accueil ne suit pas cette règle (voir plus haut). Et « un peu d'espace avant et après la ligne du nom de l'auteur ». */ @container liste (min-width:1022px){.grille-mots{grid-template-columns:repeat(3,1fr)}} .mot .mot-signature{padding-top:22px} .mot .mot-texte{padding-top:16px} /* ── LES FICHES PAR LEUR COUVERTURE (14/10/2026, D127) ─────────────────── La carte : la mention et le titre en haut, la miniature de la première page du PDF dessous, « Lire la fiche » au pied. La miniature garde le format A4 (800 × 1 131) ; sans miniature, une couverture dessinée au même format, pour que la grille reste régulière. */ .carte-couv .corps{padding:16px 18px 12px;flex:0 0 auto} .carte-couv .couv{display:block;margin:0 18px;border:1px solid var(--filet);background:#fff;line-height:0} .carte-couv .couv img{width:100%;height:auto;display:block} /* le vide d'une carte plus courte que ses voisines va entre le titre et la couverture : les couvertures d'une même rangée s'alignent par le bas */ .carte-couv .couv{margin-top:auto} .carte-couv .pied{margin-top:0;padding-top:11px} .carte-couv .couv{margin-bottom:0;text-decoration:none;color:inherit} /* ── LA COUVERTURE DESSINÉE (14/10/2026, D128) ────────────────────────── Pour une fiche sans miniature : une première page à la façon d'une Lettre E ou d'un Zoom, au format A4. Les tailles suivent la largeur de la couverture (unités cqw) : la même dessine la carte (≈ 215 px) et la miniature de côté (200 px). Toujours sur papier blanc, même en thème sombre : c'est l'image d'un document. */ .couv-generique{container-type:inline-size;display:block;aspect-ratio:800/1131;background:#fff;line-height:1.25} .cg{ display:flex;flex-direction:column;height:100%;overflow:hidden; padding:7cqw 7.5cqw 5cqw;background:#fff;color:#244155;text-align:left; font-family:Arial,"Liberation Sans",Helvetica,sans-serif;line-height:1.25; } .cg-tete{display:block;border-bottom:1px solid #b9b9b9;padding-bottom:3cqw;margin-bottom:6cqw} .couv-generique .cg-marque{display:block;width:58%;height:auto} .cg-mot{display:block;border-top:1.4cqw solid #c00822;padding-top:2.5cqw; font-weight:700;font-size:5.2cqw;letter-spacing:.32em;text-transform:uppercase;color:#c00822} .cg-titre{font-weight:700;font-size:7.6cqw;line-height:1.18;color:#c00822; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden} .cg-trait{display:block;width:22%;height:1.1cqw;background:#c00822;margin:3cqw 0 4cqw} .cg-chapeau{font-style:italic;font-size:4.1cqw;line-height:1.35;color:#555f6b; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden} .cg-essentiel{display:block;margin-top:4.5cqw;background:#e6eef2;border-left:1.3cqw solid #c00822;padding:3cqw 4cqw} .cg-essentiel-mot{display:block;font-weight:700;font-size:4cqw;color:#c00822;margin-bottom:1.5cqw} .cg-point{display:block;font-size:3.5cqw;line-height:1.3;padding-left:3cqw;position:relative;margin-top:.8cqw; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .cg-point::before{content:"•";position:absolute;left:0} /* des lignes de texte grisées remplissent la page jusqu'au pied */ .cg-lignes{flex:1 1 auto;margin-top:5cqw;min-height:0; background:repeating-linear-gradient(#fff 0 2.6cqw,#e3e7ea 2.6cqw 3.9cqw) top/100% 100% no-repeat; -webkit-mask:linear-gradient(90deg,#000 0 47%,transparent 47% 53%,#000 53%); mask:linear-gradient(90deg,#000 0 47%,transparent 47% 53%,#000 53%)} .cg-pied{display:block;border-top:1px solid #b9b9b9;margin-top:3cqw;padding-top:2.5cqw;text-align:right} .couv-generique .cg-pied img{display:inline-block;width:24%;height:auto;opacity:.85} /* ── LA FICHE ET SON PDF (14/10/2026, D128) ───────────────────────────── À gauche, le document : le PDF lui-même ou la page web habillée comme lui ; à droite, la miniature, qui reste à l'écran et télécharge le PDF. En dessous de 900 px, la miniature devient une barre fixée en bas. */ .fiche-doc{--doc-rouge:#c00822;--doc-bleu:#244155;--doc-pale:#e6eef2;--doc-encre:#1f2d3b;--doc-gris:#555f6b} .fiche-doc .fiche-doc-grille{max-width:max(var(--largeur), min(1100px, 100%))} .fiche-doc-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding-top:clamp(20px,calc(3 * var(--vw)),36px);padding-bottom:48px} .fiche-doc-principal{min-width:0;max-width:880px;width:100%;justify-self:center} .fiche-doc-surtitre{margin-bottom:16px} .pdf-cote{display:none} @media(min-width:900px){ /* D129 — la forme la plus sûre d'un élément collant, comprise par tous les navigateurs : la colonne s'étire sur toute la hauteur du document (align-self:stretch), et c'est sa boîte intérieure qui colle. */ .fiche-doc-grille{grid-template-columns:minmax(0,880px) 190px;justify-content:center;align-items:stretch} .fiche-doc-principal{align-self:start} .pdf-cote{display:block;padding-top:42px} .pdf-colle{display:flex;flex-direction:column;gap:12px;position:-webkit-sticky;position:sticky;top:calc(var(--haut-bandeau) + 28px)} } .pdf-mini{display:block;position:relative;line-height:0;background:#fff;border:1px solid var(--filet); box-shadow:var(--ombre);transition:transform .18s ease, box-shadow .18s ease;text-decoration:none;color:inherit} .pdf-mini img{width:100%;height:auto;display:block} .pdf-mini-voile{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; background:rgba(36,65,85,.78);color:#fff;font:600 14px/1 var(--police-texte);opacity:0;transition:opacity .18s ease} .pdf-mini-voile span{font-size:30px;line-height:1} .pdf-mini:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(25,48,64,.45)} .pdf-mini:hover .pdf-mini-voile{opacity:1} .pdf-mini-texte{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;text-decoration:none; font:600 13px/1.1 var(--police-texte);color:#fff;background:var(--rouge);padding:10px 12px;border-radius:2px} .pdf-mini-texte::before{content:"↓";font-size:15px;line-height:1} .pdf-mini-texte small{font:400 11px/1 var(--police-chiffres);opacity:.85} .pdf-mini-texte:hover{background:var(--accent-texte)} .pdf-mini-texte:focus-visible,.pdf-barre:focus-visible{outline:2px solid var(--focus);outline-offset:2px} /* La barre du bas, en dessous de 900 px : au-dessus du pied fixe entre 641 et 899 px, tout en bas sur téléphone (le pied n'y est pas fixe). */ .pdf-barre{position:fixed;left:0;right:0;bottom:0;z-index:24;display:flex;align-items:center;gap:12px; padding:8px var(--pas) calc(8px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--filet-fort); box-shadow:0 -6px 18px -12px rgba(25,48,64,.35);text-decoration:none;color:var(--rouge);font:600 14px/1.1 var(--police-texte)} .pdf-barre img{width:30px;height:auto;border:1px solid var(--filet);background:#fff} .pdf-barre::after{content:"↓";margin-left:auto;font-size:18px} .pdf-barre small{font:400 11.5px/1 var(--police-chiffres);color:var(--encre-tenue)} @media(min-width:641px){.pdf-barre{bottom:var(--haut-pied)}} @media(min-width:900px){.pdf-barre{display:none}} @media(max-width:899px){.fiche-doc{padding-bottom:64px}} /* Le PDF lui-même : les pages comme des feuilles posées. */ .pdf-pages{display:flex;flex-direction:column;gap:22px} .pdf-page{background:#fff;box-shadow:0 1px 2px rgba(25,48,64,.08), 0 12px 30px -16px rgba(25,48,64,.35);border:1px solid var(--filet);line-height:0} .pdf-page canvas{width:100%;height:auto;display:block} .pdf-repli{font-size:15px} .pdf-pret .pdf-repli{display:none} /* La page web habillée comme le PDF. */ .feuille{background:#fff;color:var(--doc-encre);border:1px solid var(--filet); box-shadow:0 1px 2px rgba(25,48,64,.08), 0 12px 30px -16px rgba(25,48,64,.35); padding:clamp(22px,5.5%,54px) clamp(18px,6.5%,62px) 28px; font:400 15.5px/1.55 Arial,"Liberation Sans",Helvetica,sans-serif} .doc-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;border-bottom:1px solid #b9b9b9;padding-bottom:12px;margin-bottom:clamp(20px,4%,34px)} .doc-marque{display:block;width:min(52%,300px);height:auto} .doc-marque-mot{border-top:5px solid var(--doc-rouge);padding-top:8px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--doc-rouge);font-size:15px} .doc-droite{font-weight:700;color:var(--doc-rouge);font-size:clamp(13px,1.6vw,17px);white-space:nowrap} .feuille .doc-titre{font:700 clamp(26px,3.4vw,36px)/1.15 Arial,"Liberation Sans",Helvetica,sans-serif;color:var(--doc-rouge);margin:0;letter-spacing:0} .feuille .doc-titre::after{content:"";display:block;width:68px;height:4px;background:var(--doc-rouge);margin-top:12px} .doc-chapeau{margin-top:18px;font-style:italic;color:var(--doc-gris);font-size:16px;line-height:1.5} .doc-chapeau p{margin:0 0 .6em} .doc-essentiel{background:#eef2f5;border-left:5px solid var(--doc-rouge);padding:12px 18px 10px;margin:22px 0 6px;box-shadow:0 2px 6px -3px rgba(25,48,64,.3)} .doc-essentiel h2{font:700 15px/1.2 Arial,"Liberation Sans",sans-serif;color:var(--doc-rouge);margin:0 0 6px;letter-spacing:0;text-transform:none} .doc-essentiel ul{margin:0;padding-left:18px;font-size:14.5px} .doc-essentiel li{margin:3px 0} .doc-corps{margin-top:8px} .feuille .doc-h2{position:relative;font:700 19px/1.25 Arial,"Liberation Sans",sans-serif;color:var(--doc-bleu);margin:30px 0 8px;padding-left:14px;letter-spacing:0;scroll-margin-top:calc(var(--haut-bandeau) + 16px)} .feuille .doc-h2::before{content:"";position:absolute;left:0;top:1px;bottom:1px;width:5px;background:var(--doc-rouge)} .doc-num{color:var(--doc-rouge)} .feuille .doc-h3{font:700 15.5px/1.3 Arial,"Liberation Sans",sans-serif;color:var(--doc-rouge);margin:20px 0 6px;letter-spacing:0} .doc-fil{margin:10px 0} .doc-fil p{margin:0 0 .7em;text-align:justify;hyphens:auto;-webkit-hyphens:auto} .doc-fil strong{color:var(--doc-encre)} .doc-pratique p{font-style:italic;color:var(--doc-gris);font-size:14.5px} .doc-pratique-mot{font-style:normal;color:var(--doc-rouge);font-weight:700;margin-right:3px} .doc-pratique em{font-style:italic} @media(min-width:760px){ .doc-2col{column-count:2;column-gap:30px} .doc-2col .doc-texte p,.doc-2col .doc-pratique{break-inside:avoid-column} } .doc-teinte{background:#eef2f5;border-left:5px solid var(--doc-rouge);padding:12px 18px;margin:16px 0;box-shadow:0 2px 6px -3px rgba(25,48,64,.3);font-size:14.5px} .doc-teinte p{margin:0 0 .5em}.doc-teinte p:last-child{margin:0} .doc-plus-loin p:first-child strong{color:var(--doc-rouge)} .doc-encadres{display:grid;gap:16px;margin:16px 0} @media(min-width:760px){.doc-encadres-cote{grid-template-columns:1fr 1fr}} .doc-encadre{background:#f6f8f9;border:1px solid #d9dee2;box-shadow:0 2px 6px -3px rgba(25,48,64,.3);font-size:14.5px} .doc-encadre p{margin:0;padding:6px 14px} .doc-encadre p:first-child{background:var(--doc-bleu);color:#fff;text-align:center;padding:7px 14px;margin-bottom:6px} .doc-encadre p:first-child strong{color:#fff} .doc-encadre p:last-child{padding-bottom:12px} /* les blocs du site gardent leur dessin, avec les couleurs du PDF */ .feuille .bloc{max-width:none} .feuille .bloc-tableau table{font-size:14px} .feuille .bloc-tableau thead th{background:var(--doc-bleu);color:#fff;font:700 13.5px/1.3 Arial,"Liberation Sans",sans-serif;letter-spacing:0;text-transform:none;text-align:center} .feuille .bloc-tableau tbody td{background:#f6f8f9} .feuille .bloc-exergue{background:#eef2f5;border-left:5px solid var(--doc-rouge);padding:12px 18px;font:700 italic 15px/1.45 Arial,"Liberation Sans",sans-serif;color:var(--doc-bleu)} .feuille .bloc-etapes,.feuille .bloc-image{margin:18px 0} .doc-pied{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;border-top:1px solid #b9b9b9;margin-top:30px;padding-top:10px;font-size:11.5px;color:var(--doc-gris);line-height:1.35} .doc-pied b{color:var(--doc-encre)} .doc-pied img{width:90px;height:auto} @media(max-width:640px){ .feuille{font-size:15px;padding:20px 16px 18px;margin:0 calc(-1 * var(--pas) + 6px)} .doc-tete{flex-direction:column;align-items:flex-start;gap:6px} .doc-marque{width:62%} .doc-fil p{text-align:left} } @media print{.pdf-cote,.pdf-barre{display:none}.feuille{box-shadow:none;border:0}}