/** * La composition du site de Lina Hadid. * * ── LE PARTI PRIS, EN UNE PHRASE ─────────────────────────────────────────── * La retenue d'une banque privée genevoise, appliquée au vocabulaire d'une * fiche technique. Deux mondes qui ne se rencontrent jamais : c'est le * frottement des deux qui fait la marque, parce que Lina est à la fois * entrepreneuse, autrice, et quelqu'un qui roule. * * ── LA RÈGLE QUI TIENT LE MÉLANGE ────────────────────────────────────────── * LE SERIF PARLE, LE MONO MESURE. Instrument Serif porte tout ce qui * s'énonce : titres, phrases, noms. IBM Plex Mono porte tout ce qui se * mesure : codes, dates, coordonnées, numéros, libellés de fiche. Aucun des * deux n'empiète sur le terrain de l'autre. Sans cette discipline, le mono * devient un effet de style et la page un collage. * * ── LES CINQ RÈGLES DE COMPOSITION ───────────────────────────────────────── * 1. LA BANDE SOMBRE NE PORTE JAMAIS DE CONTENU. Une phrase, et rien d'autre. * Elle a d'abord porté les couvertures : saturées, elles s'y disputaient * avec le fond. Elle est redevenue un fond. * 2. LES GRILLES QUAND ON CHERCHE (Livres), LES RANGÉES QUAND ON LIT * (Univers), LES RAILS QUAND ON PASSE (l'accueil). Un rail sur la page * catalogue obligerait à faire défiler vingt et un titres pour voir le * dernier ; une grille sur Univers obligerait à couper les textes. * 3. RIEN NE DÉFILE TOUT SEUL. Les flèches poussent un défilement natif. * 4. LES LOGOS DES MARQUES SONT AU GRIS au repos. Sept logos en couleur côte * à côte font une planche d'autocollants ; la couleur revient au survol, * et devient une récompense au lieu d'un bruit de fond. * 5. PAS D'ORNEMENT QUE LE CONTENU DOIVE ÉVITER. Un filet vertical * « décoratif » traversait le tableau de la fiche : il a été supprimé. * * ── CONTRASTES ───────────────────────────────────────────────────────────── * Le brand book chiffre des rapports, pas des couleurs : titre sur crème * ≥ 9,4 · corps ≥ 7,8 · mentions ≥ 4,8 · texte clair sur la bande ≥ 9,9 et * son secondaire ≥ 6,6. Les valeurs ci-dessous les tiennent toutes. * * @package linahadid */ /* ═══ 1. Jetons ═══════════════════════════════════════════════════════════ */ :root { --creme: #f4f1ea; --creme-2: #eae5da; --carte: #fbf9f5; --navy: #1f2b45; --texte: #2c354a; --texte-doux: #5c6274; --trait: #ddd7cb; --accent: #b0915f; --accent-texte: #735830; --sur-navy: #ece6da; --sur-navy-doux: #aab2c4; --navy-presse: #162034; --blanc: #fff; --alerte: #a4342c; /* LE SOL DE LA SALLE. Cinq valeurs, et elles ne sont pas décoratives : ce sont les cinq arrêts du dégradé qui fait le plancher et la cimaise. Les nommer ici, c'est pouvoir les relire ; écrites dans le dégradé, elles n'étaient qu'une suite de chiffres au milieu d'une ligne. */ --sol-haut: #f8f6f0; --sol-milieu: #f1ede3; --sol-bord: #e6e0d3; --sol-ombre: #cfc7b4; --sol-bas: #bdb49f; --e1: 4px; --e2: 8px; --e3: 16px; --e4: 24px; --e5: 40px; --e6: 64px; --e7: 136px; --titre: "Instrument Serif", Georgia, serif; --texte-f: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; /* L'ÉCHELLE TYPOGRAPHIQUE — posée le 28.10.2026, et elle manquait. Le site portait SIX tailles pour trois rôles : 9,5 · 10 · 10,5 · 11 · 12 · 13 px, réparties au jugé, déclaration par déclaration. Mesuré : vingt et une règles à 10 px et dix-sept à 11 px. Rien ne les distinguait, et le plancher était sous la limite du lisible pour du capitale espacé. Quatre degrés, et chacun a un emploi, pas une valeur : étiquette ce qui nomme une zone — filets-titres, `dt`, sceaux, codes mention ce qui commente — légendes, comptes, aides de formulaire action ce sur quoi on clique — liens et boutons en capitales menu la navigation, qui doit se voir depuis l'autre bout Changer la taille d'un rôle se fait désormais à UN endroit. LE PLANCHER EST À TREIZE, ET IL A ÉTÉ REMONTÉ LE 29.10.2026. L'échelle partait de neuf et demi ; elle est remontée une première fois à douze, puis à treize, parce qu'à chaque palier la même phrase revenait : « pas assez lisible ». Treize en MONO espacé est le plus petit corps qui se lise sans effort sur un écran ordinaire — et rien, sur ce site, n'a de raison d'être plus petit que la plus petite étiquette. */ --t-etiquette: 14px; --t-mention: 15px; --t-action: 14px; --t-menu: 16px; /* LE CINQUIÈME DEGRÉ, POSÉ LE 29.10.2026 : le corps de texte. Il manquait, et son absence avait une conséquence visible — les chapôs de magazine (`.menu`) empruntaient la taille de la NAVIGATION, 15 px, parce que c'était le seul degré assez grand sous les titres. Un texte qu'on lit n'a pas la taille d'un menu qu'on balaie : les deux rôles réclamaient le même chiffre pour des raisons opposées. Il vaut celui du `body`, et c'est la règle : sur ce site, tout ce qui se lit fait dix-sept. ET UN SIXIÈME, LE CHAPÔ. Un chapô de magazine n'a jamais le corps du texte courant : il est un peu plus grand, dans une colonne plus étroite, et c'est ce double écart qui le fait lire en premier. À la taille du corps il se confond avec lui ; à la taille de la navigation il est illisible. Dix-neuf. */ --t-corps: 17px; --t-chapo: 19px; --marge: 64px; --mesure: 46ch; /* LA LARGEUR DE PAGE. C'est la décision qui manquait. Sans elle, une section occupe tout l'écran : sur un 27 pouces, une rangée fait dix-sept cents pixels de large, l'œil ne sait plus où revenir à la ligne, et la page paraît interminable même quand elle est courte. Un magazine a des marges — ce sont elles qui font qu'on tourne les pages au lieu de se perdre. Seuls trois éléments ont le droit de sortir de cette largeur, et c'est ce qui leur donne leur force : l'ouverture, la double page, la bande sombre. Le reste y rentre. */ --large: 1280px; } /* ═══ 2. Socle ════════════════════════════════════════════════════════════ */ html { scroll-behavior: smooth; } body { background: var(--creme); color: var(--texte); font-family: var(--texte-f); font-size: 17px; line-height: 28px; -webkit-font-smoothing: antialiased; } /* LES PARAGRAPHES SONT JUSTIFIÉS, ET AVEC CÉSURE. La césure n'est pas un raffinement : une colonne de trente-quatre signes justifiée SANS elle ouvre des rivières blanches au milieu du texte, et le remède devient pire que le mal. C'est `lang="fr"` sur le `` — posé par WordPress — qui donne au navigateur le dictionnaire de coupure. Ce qui n'est pas justifié : les titres, les étiquettes en capitales et les légendes. Justifier trois mots ne fait pas un bloc, ça fait des trous. */ /* ⚠️ PAS DANS UNE TUILE. J'y avais mis `.mo-maison .mo-texte` le 30.10.2026, par simple reprise de l'ancien `.carre p`. Mesuré sur capture : dans une colonne de quart de page, la justification donnait « l'ac-compagnement », « pré-sen-ta-tion », « dé-cide » — un mot coupé toutes les deux lignes. La justification demande une mesure ; une tuile n'en a pas. */ .lecture p, .colonne p, .chapitre-corps p, .menu, .fiche p, .salle-texte p { /* 🔴 LA JUSTIFICATION REVIENT — 01.11.2026, demandée par Lina, et cette fois la largeur la porte. Elle avait été retirée le 31.10 parce que « sur une colonne de moins de quarante-cinq signes, le fer à droite creuse des lézardes ». Le reproche visait la LARGEUR, pas le procédé : mesuré aujourd'hui sur la page Univers, la colonne de texte fait 546 px, soit soixante-quatre signes — la mesure d'une colonne de magazine, où la justification est chez elle. La césure automatique reste : sans elle, justifier, c'est faire des trous. */ text-align: justify; hyphens: auto; -webkit-hyphens: auto; } /* WordPress pose ses propres marges entre blocs ; on les reprend à la main, sinon le rythme vertical vient de l'éditeur et non de la charte. 🔴 ET LA RÈGLE S'ARRÊTAIT UN NIVEAU TROP HAUT — mesuré le 01.11.2026. `.wp-site-blocks > *` couvre l'en-tête, le `
` et le pied. Les SECTIONS, elles, sont enfants de `.entry-content`, deux crans plus bas : `is-layout-flow` leur donnait à chacune un `margin-top: 24px` que personne n'avait décidé. Conséquence, relevée section par section sur les sept pages : l'air entre deux gabarits ne valait jamais ce que les gabarits déclarent. Un `--duo` suivi d'un `--bloc` annonce 64 + 64 ; il en rendait 152. Et selon qu'un filet ou un groupe s'intercalait, l'écart mesuré tombait à 8, 24 ou 40 — trois valeurs, aucune écrite nulle part, pour une page qui prétend tenir son rythme dans six gabarits. C'est exactement la cause qui décalait le logo de l'en-tête le 31.10, et elle a été rediagnostiquée de zéro parce que la première correction n'avait été posée qu'à l'endroit où le défaut s'était vu. ⚠️ `> *` ET NON `*` : à l'intérieur d'une section, les marges entre paragraphes sont voulues — ce sont elles qui font le texte. On ne reprend que le rythme des BLOCS DE PREMIER NIVEAU. */ .wp-site-blocks > *, .entry-content > * { margin-block: 0; } img { max-width: 100%; height: auto; } h1, h2, h3, h4, .wp-block-heading { font-family: var(--titre); font-weight: 400; color: var(--navy); margin: 0; text-wrap: balance; } h1 { font-size: clamp(44px, 6.6vw, 96px); line-height: .94; letter-spacing: -.022em; hanging-punctuation: first allow-end; } h2 { font-size: clamp(30px, 4.2vw, 56px); line-height: 1.02; letter-spacing: -.015em; } h3 { font-size: 25px; line-height: 1.12; } h4 { font-size: 20px; line-height: 1.2; } em { font-style: italic; } p { text-wrap: pretty; } a { color: inherit; } a:focus-visible, button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; } .ouverture a:focus-visible { outline-color: var(--sur-navy); } /* ── LA VOIX TECHNIQUE. Tout ce qui MESURE passe ici, et rien d'autre. ── */ .mono, .eti { font-family: var(--mono); font-size: var(--t-action); line-height: 18px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-texte); margin: 0 0 var(--e4); } .mono--clair { color: var(--sur-navy-doux); } /* La réglette : deux densités de graduations, en dégradés répétés — elle s'étire d'elle-même sur toute la largeur au lieu de finir en moignon. */ .reglette { height: 14px; margin: var(--e6) 0 0; background: repeating-linear-gradient(to right, var(--trait) 0 1px, transparent 1px 14px) left bottom/100% 6px no-repeat, repeating-linear-gradient(to right, var(--accent) 0 1px, transparent 1px 70px) left bottom/100% 13px no-repeat; } .chapo { max-width: var(--mesure); margin: var(--e4) 0 var(--e5); } /* 🔴 « LES LIENS NE SONT PAS ASSEZ LISIBLES, ON NE LES VOIT PAS ASSEZ. » * Corrigé le 31.10.2026. Le lien était un texte en petites capitales mono * avec un filet d'un pixel : au milieu d'une page qui porte déjà des * étiquettes en petites capitales mono soulignées d'un filet, RIEN ne le * distinguait d'un intertitre. On ne voyait pas qu'il se cliquait parce * qu'il ressemblait à ce qui ne se clique pas. * * Trois signes qu'une étiquette n'a pas : une FLÈCHE, un filet de deux * pixels, et un décalage au survol. La flèche est posée en pseudo-élément — * elle n'est pas dans le texte, donc elle ne se lit pas deux fois à la * synthèse vocale. */ .lien { display: inline-flex; align-items: center; gap: .6em; font-family: var(--mono); font-size: var(--t-action); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 6px; transition: border-color .18s ease; } .lien::after { content: "→"; font-size: 1.1em; line-height: 1; transition: transform 220ms cubic-bezier(.16, 1, .3, 1); } .lien:hover::after, .lien:focus-visible::after { transform: translateX(4px); } .lien:hover, .lien:focus-visible { border-bottom-color: var(--navy); } @media (prefers-reduced-motion: reduce) { .lien::after { transition: none; } } .lien:hover { border-bottom-color: var(--navy); } .ouverture .lien { color: var(--sur-navy); } .btn, .wp-block-button__link { display: inline-flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: var(--t-action); letter-spacing: .1em; text-transform: uppercase; background: var(--navy); color: var(--sur-navy); text-decoration: none; padding: 18px 26px; border-radius: 0; transition: background .18s ease; } .btn:hover, .wp-block-button__link:hover { background: var(--navy-presse); color: var(--sur-navy); } .ouverture .btn { background: var(--sur-navy); color: var(--navy); } .ouverture .btn:hover { background: var(--blanc); } .sect { padding: var(--e7) var(--marge); } .sect > * { max-width: none; } .sect-tete { max-width: 52ch; margin-bottom: var(--e6); } /* ═══ 3. En-tête et pied ══════════════════════════════════════════════════ */ /* PIÈGE DU TEMPLATE PART. WordPress enveloppe l'en-tête dans un
dont la hauteur est exactement celle de l'en-tête. Or un élément `sticky` ne peut pas sortir de la boîte de son parent : le menu restait collé… sur soixante pixels, ce qui ressemble à un menu qui ne colle pas du tout. `display: contents` efface l'enveloppe de la mise en page sans toucher au balisage. */ header.wp-block-template-part { display: contents; } /* ── LA BARRE QUI MAIGRIT ─────────────────────────────────────────────────── Mesuré le 30.10.2026 : l'en-tête faisait 117 px sur toutes les pages, et il est collant. Il prenait donc 13 % d'un écran de portable PENDANT TOUTE LA VISITE, avec un logo de 68 px — petit à l'arrivée, encombrant ensuite. C'est exactement l'inverse de ce qu'il faut. AU REPOS il grandit : logo à 88 px (68 + 30 %, comme Lina l'a demandé), barre à ~137 px. UNE FOIS QU'ON A DÉFILÉ il rend 53 px au contenu : logo à 48, barre à ~84, soit 10 % de l'écran au lieu de 17. LA HAUTEUR N'EST PAS ÉCRITE, elle se déduit du logo et des entretoises. Écrire 137 et 84 aurait fait deux nombres à tenir à jour chaque fois que le logo change de taille — et le premier qu'on oublie fait sauter la barre. */ .hd { /* 🔴 88 px DE BOÎTE NE FAISAIENT QUE 65 px DE DESSIN. Le SVG arrivait dans un `viewBox` carré de 3167 où le logo n'occupe que 2333 : un quart de la hauteur était du vide, et « le logo est trop petit » était une mesure, pas une impression. Le cadre est maintenant serré sur le dessin (voir `inc/entete.php`), donc ces 84 px SONT 84 px de logo — soit les 30 % de plus demandés, avec une barre qui rétrécit de 4 px au lieu de grandir de 26. */ --hd-logo: 84px; --hd-air: 24px; display: grid; grid-template-columns: 1fr auto 1fr; /* 🔴 C'ÉTAIT WORDPRESS QUI DÉCALAIT LE LOGO, PAS LA GRILLE. L'en-tête est un `wp-block-group` : WordPress lui pose la classe `is-layout-flow`, qui donne à chaque enfant SAUF LE PREMIER un `margin-block-start` égal au `blockGap` du thème. Le logo n'est pas le premier enfant — il en recevait 24 px, invisibles dans le code du thème puisqu'ils viennent d'une feuille de WordPress. Mesuré le 31.10.2026 : 48 px au-dessus du logo contre 25 en dessous, pour un padding parfaitement symétrique de 24. « Il faut que la marge en haut du logo et en bas soit équilibrée. » Deux heures de `grid-template-rows` auraient pu être évitées en lisant la classe. */ grid-template-rows: auto; align-items: center; padding: var(--hd-air) var(--marge); border-bottom: 1px solid var(--navy); background: var(--creme); position: sticky; top: 0; z-index: 30; transition: padding 180ms ease; } /* L'ÉTAT « ON A DÉFILÉ » EST POSÉ SUR ``, par un observateur d'intersection sur une sentinelle d'un pixel — pas par l'événement `scroll`, qui se déclenche soixante fois par seconde pour rien. Voir `assets/entete.js`. */ /* ⚠️ LA BARRE DÉFILÉE DOIT RENDRE DE LA PLACE, PAS SEULEMENT EN PERDRE. Premier réglage du 30.10.2026 : logo 48, air 14 — la barre tombait de 161 à 101 px. Yan : « réduire un petit peu la marge du menu quand il shrink ». Il a raison, 14 px d'air autour d'un logo de 48 laissait une barre de cent pixels collée en haut pendant toute la lecture. À 40 et 10, elle tombe sous les 80 : moins de 9 % d'un écran de portable, contre 17 au repos. */ /* UNE FOIS DÉFILÉ, LE NOM S'EN VA ET IL NE RESTE QUE LE MONOGRAMME. Les 34 px s'appliquent alors à un cadre qui ne contient plus que lui : il passe de 69 px à 34, soit la moitié, pendant que la barre tombe sous 60. C'est `assets/entete.js` qui échange le cadre — un `viewBox` ne se change pas en CSS. */ html.a-defile .hd { --hd-logo: 34px; --hd-air: 10px; } /* ⚠️ SANS JAVASCRIPT, LA BARRE RESTE À SA TAILLE DE REPOS et le site fonctionne entièrement — il est seulement moins fin. C'est la même règle que pour le burger et pour les filtres de presse : rien d'essentiel ne dépend d'un script. */ @media (prefers-reduced-motion: reduce) { /* On coupe la TRANSITION, pas le redimensionnement : quelqu'un qui refuse les animations veut quand même récupérer ses 53 px. */ .hd, .hd .lha-logo { transition-duration: 1ms; } } .hd .wp-block-navigation, .hd .wp-block-navigation__container { gap: 32px; } /* ⚠️ ET 18 px DANS LA BANDE ÉTROITE. Même mesure que le seuil de `themes.css` juste à côté : entre 901 et 1000, les trois entrées de droite plus la réserve du sélecteur dépassaient leur colonne de quelques pixels, et le menu se repliait sur trois lignes. Quatorze pixels de gouttière en moins par entrée suffisent — on ne touche ni au corps du texte ni à l'interlettrage, qui sont la signature de cette barre. */ @media (min-width: 901px) and (max-width: 1250px) { .hd .wp-block-navigation, .hd .wp-block-navigation__container { gap: 24px; } } /* Et 10 px sur les cinquante premiers pixels au-dessus du seuil du burger : à 901, dix-huit ne suffisaient pas encore de quelques pixels. Mesuré, pas déduit — c'est la largeur où la barre bascule, donc la plus serrée qu'elle connaisse. ET UN LIBELLÉ DE MENU NE SE COUPE PAS. À 901 px exactement, « À PROPOS » passait sur deux lignes dans sa propre case plutôt que de déborder. La barre ne grandissait pas, donc rien ne le signalait : il fallait compter les rangées des entrées pour le voir. */ .hd .wp-block-navigation a { white-space: nowrap; } /* LA NAVIGATION SE LIT DEPUIS L'AUTRE BOUT DE L'ÉCRAN. Elle était à 11 px, en capitales espacées, dans la couleur du texte courant : techniquement présente, visuellement absente. Elle prend son propre degré — le seul rôle du site qui doive attirer l'œil sans qu'on le cherche — et un peu d'air entre les entrées. */ .hd .wp-block-navigation a { font-family: var(--mono); font-size: var(--t-menu); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); text-decoration: none; padding-bottom: 5px; border-bottom: 1px solid transparent; transition: border-color .18s ease, color .18s ease; } .hd .wp-block-navigation a:hover { border-bottom-color: var(--accent); } /* ⚠️ `.current-menu-item` NE MATCHAIT RIEN, et ne pouvait pas : les entrées sont des liens personnalisés, auxquels WordPress ne pose jamais cette classe. Le marquage se fait désormais sur `aria-current`, posé par `inc/entete.php` en comparant les CHEMINS — l'attribut d'abord, parce qu'il porte l'information pour un lecteur d'écran, la peinture ensuite. Une règle CSS qui ne matche rien ne lève aucune erreur : le menu actif n'a donc jamais fonctionné, et rien ne le disait. */ .hd .wp-block-navigation a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--navy); border-bottom-width: 2px; } .hd .hd-droite { justify-content: flex-end; } /* ⚠️ `margin-block: 0` PARTOUT, `grid-row: 1` SEULEMENT SUR GRAND ÉCRAN. La marge est le correctif de `is-layout-flow` : elle vaut à toute largeur. La rangée unique, non — sous 900 px la barre passe à deux colonnes et les deux menus descendent en rangée 2, dépliés par le burger. Forcés en rangée 1, ils se superposaient AU LOGO : « LIVRES » et « PRESSE » écrits par-dessus le monogramme, l'ordre des entrées mélangé, et la page qui débordait à droite. Mesuré sur iPhone le 31.10.2026 — la correction de l'en-tête de bureau, posée le matin même, avait cassé le menu du téléphone. */ .hd > * { align-self: center; margin-block: 0; } @media (min-width: 901px) { .hd > * { grid-row: 1; } } /* LE LOGO TIENT L'AXE, donc il doit peser autant que les six entrées qui l'encadrent. À 54 px il était la plus petite chose de la barre, et le centre ne tenait rien ; à 68 il tenait sans peser. Il est à 88 depuis le 30.10.2026 — trente pour cent de plus, demandés par Lina, et c'est sa taille AU REPOS seulement. */ .hd .hd-logo { line-height: 0; } /* ═══ LE BURGER ══════════════════════════════════════════════════════════ * * ⚠️ LA NAVIGATION ÉTAIT SIMPLEMENT ÉTEINTE SOUS 900 px. `display: none` * sur les deux blocs, et rien pour les remplacer : sur un téléphone, le site * n'avait AUCUN moyen d'aller ailleurs que par le pied de page. Mesuré sur * iPhone le 29.10.2026. Ce n'est pas un défaut de mise en page, c'est une * impasse — et elle a tenu parce qu'on regardait les captures à 390 px sans * jamais cliquer dedans. * * Il fonctionne SANS JAVASCRIPT : la case à cocher porte l'état, le libellé * la bascule, et le sélecteur de frère ouvre le panneau. La case est masquée * à l'œil mais pas au clavier — en `display:none` elle cesserait d'être * focusable, et le menu deviendrait inatteignable sans souris. */ .hors-ecran { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .hd-bascule { position: absolute; opacity: 0; width: 44px; height: 44px; margin: 0; } .hd-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; } /* Les trois barres sont UN élément et deux pseudo-éléments : trois `` auraient demandé au gabarit de connaître le dessin. */ .hd-trois, .hd-trois::before, .hd-trois::after { display: block; width: 24px; height: 2px; background: var(--navy); transition: transform .22s ease, opacity .18s ease; } .hd-trois { position: relative; } .hd-trois::before, .hd-trois::after { content: ""; position: absolute; left: 0; } .hd-trois::before { top: -7px; } .hd-trois::after { top: 7px; } /* Ouvert, les trois barres deviennent une croix : l'icône dit l'état, pas seulement l'action. */ .hd-bascule:checked + .hd-burger .hd-trois { background: transparent; } .hd-bascule:checked + .hd-burger .hd-trois::before { transform: translateY(7px) rotate(45deg); } .hd-bascule:checked + .hd-burger .hd-trois::after { transform: translateY(-7px) rotate(-45deg); } .hd-bascule:focus-visible + .hd-burger { outline: 2px solid var(--accent); outline-offset: 2px; } .pied { background: var(--carte); border-top: 1px solid var(--trait); padding: var(--e7) var(--marge) var(--e5); color: var(--texte); } /* ⚠️ VINGT-QUATRE PIXELS DE HAUT, AU MOINS. Mesuré le 29.10.2026 sur iPhone : vingt-deux cibles par page sous le minimum, toutes à dix-neuf pixels — la hauteur d'une ligne de texte, rien de plus. La largeur n'était jamais en cause. La règle WCAG 2.5.8 exempte les liens posés DANS une phrase : on vise donc les listes de liens isolés, où le doigt n'a aucun repère pour viser, et pas le lien au fil du texte. Le remède est du `padding`, jamais une hauteur fixe : une entrée qui passe sur deux lignes doit grandir. */ .pied a { color: var(--texte); text-decoration: none; } .pied a:hover { border-bottom: 1px solid var(--accent); } .pied li a, .pied .coord dd a, .pied-legal a, .coord dd a { display: inline-block; padding-block: 3px; min-height: 24px; } /* QUATRE COLONNES DEPUIS LE 02.11.2026, pas cinq : « La collection » est tombée, « Me joindre » a fusionné avec « Contact », et « La newsletter » est redevenue ce qu'elle était — un lien LinkedIn. */ .pied-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e5); padding-bottom: var(--e7); } /* Le logo du réseau tient sur la ligne du lien, à sa hauteur de capitale. */ .lien--marque { display: inline-flex; align-items: center; gap: var(--e2); } .marque-reseau { flex: none; } .pied h4 { margin: 0 0 var(--e4); } .pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: var(--t-mention); line-height: 24px; color: var(--texte-doux); } .pied .note { font-size: var(--t-mention); line-height: 25px; color: var(--texte-doux); margin: 0 0 var(--e3); } /* 🔴 LA LIGNE DU BAS SE LISAIT COMME UNE PHRASE — corrigé le 02.11.2026. « Mentions légales Données personnelles Contact LinkedIn » : quatre liens posés côte à côte, séparés par la seule espace entre deux balises. Rien ne disait où l'un finissait. Yan : « toute cette partie en bas, il faudrait espacer un peu plus. » Deux écarts, pas un : --e5 entre les liens, --e3 quand la ligne se replie, pour que deux rangs ne se collent pas non plus. Et la barre entière respire davantage sous son filet. */ .pied-bas { display: flex; justify-content: space-between; gap: var(--e5); flex-wrap: wrap; border-top: 1px solid var(--trait); padding-top: var(--e5); } .pied-bas p { margin: 0; } .pied-legal { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5); } /* ═══ 4. L'ouverture photographique ═══════════════════════════════════════ */ .ouverture { position: relative; background: var(--navy); overflow: hidden; } .ouverture .fond { position: absolute; inset: 0; background: var(--navy); } /* LE DUOTONE, sans toucher au fichier. Le calque est navy ; l'image, désaturée, s'y mélange en `luminosity` : elle n'apporte que ses valeurs, la couleur vient du fond. C'est la seule méthode qui donne un vrai bichrome — un aplat en `color` par-dessus ne donne qu'un lavis bleu. La cliente peut changer la photo sans rien savoir de tout ça. */ .ouverture .fond img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 33%; filter: grayscale(1) contrast(1.28) brightness(1.06); mix-blend-mode: luminosity; opacity: .96; } .ouverture .voile { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,29,48,.96) 0%, rgba(20,29,48,.82) 30%, rgba(20,29,48,.28) 62%, rgba(20,29,48,.06) 100%); } .ouverture .dedans { position: relative; padding: var(--e7) var(--marge) var(--e6); /* Bornée : un `vh` seul donne une ouverture démesurée sur un grand écran et illisible sur un portable. */ min-height: clamp(560px, 80vh, 880px); display: flex; flex-direction: column; justify-content: flex-end; } .ouverture h1 { color: var(--sur-navy); max-width: 14ch; font-size: clamp(52px, 9vw, 132px); line-height: .88; letter-spacing: -.025em; } .ouverture h1 em { color: var(--accent); } .ouverture .sous { max-width: 46ch; color: var(--sur-navy-doux); margin: var(--e5) 0 var(--e6); } .ouverture .act { display: flex; gap: var(--e5); align-items: center; flex-wrap: wrap; } /* La bande de données : coordonnées, machine, œuvre. Le geste le plus inattendu de la page, et le plus sobre. */ .donnees { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--trait); background: var(--creme); } .donnees > div { padding: var(--e4); border-right: 1px solid var(--trait); } .donnees > div:first-child { padding-left: var(--marge); } .donnees > div:last-child { border-right: 0; padding-right: var(--marge); } .donnees dt { font-family: var(--mono); font-size: var(--t-etiquette); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); margin: 0 0 var(--e2); } .donnees dd { margin: 0; font-family: var(--mono); font-size: var(--t-mention); letter-spacing: .02em; color: var(--navy); } /* ═══ 5. La fiche de repères ══════════════════════════════════════════════ */ .specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e7); align-items: start; } .specs dl { margin: 0; display: grid; grid-template-columns: 13ch 1fr; border-top: 1px solid var(--trait); } .specs dt { font-family: var(--mono); font-size: var(--t-mention); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); padding: var(--e4) 0; border-bottom: 1px solid var(--trait); } .specs dd { margin: 0; padding: var(--e4) 0; border-bottom: 1px solid var(--trait); font-size: 17px; line-height: 26px; color: var(--navy); } .specs dd b { font-family: var(--titre); font-weight: 400; font-size: 26px; } /* ═══ 6. La double page : le geste de magazine ════════════════════════════ * * Une image à fond perdu, une phrase dedans, et rien d'autre. Pas de bouton, * pas de lien : c'est une respiration, pas une étape. */ .doublepage { position: relative; background: var(--navy); overflow: hidden; min-height: clamp(420px, 58vh, 620px); display: flex; align-items: flex-end; } .doublepage .fond { position: absolute; inset: 0; background: var(--navy); } /* ⚠️ LE CADRAGE SE RÈGLE PAR IMAGE, ET 38 % N'EST QU'UN DÉFAUT. La double page est une bande très large et peu haute : `cover` n'en montre qu'une tranche, et où tombe cette tranche décide de tout. Sur la photo de la moto, 38 % coupait la tête de Lina — mesuré le 30.10.2026 : son visage occupe les 6 à 17 premiers pour cent de l'image, le cadrage en montrait une bande qui commence à 38 %. Un défaut de ce genre ne se voit pas dans le code, seulement sur la page. */ .doublepage .fond img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--dp-cadrage, 20%); /* 🔴 20 % ET NON 38 % — « j'aime pas les photos où tu coupes la tête comme ça, ça va pas du tout, tu arrêtes ». Un cadrage à 38 % convient à un plan large et DÉCAPITE un portrait serré : la bande prend le milieu de l'image, et sur un portrait le milieu commence au menton. Le défaut n'était pas dans une page, il était dans le défaut. */ /* Le défaut à 38 % convient à un plan large. Sur un portrait cadré serré, il coupe le front — « je pense qu'on coupe un peu trop le front sur la photo avec les lunettes ». `--dp-cadrage` existait déjà pour ça ; il lui manquait une classe qui le pose sans écrire du style en ligne dans le contenu. */ filter: grayscale(1) contrast(1.25) brightness(1.04); mix-blend-mode: luminosity; opacity: .9; } .doublepage--haut { --dp-cadrage: 14%; } /* ── UNE DOUBLE PAGE QUI GARDE SES COULEURS ─────────────────────────────── * Le bichrome navy est ce qui fait que toutes les doubles pages du site sont * de la même famille, et il ne se défait pas à la légère. Une seule image y * échappe : celle à la lame bleue, où la COULEUR EST LE SUJET. Désaturée, * elle rend un trait blanc dans de la brume grise — on ne voit plus de quoi * il s'agit. * * Elle est déjà dans la gamme froide du site, donc la laisser en couleur ne * casse rien ; le voile navy la ramène au ton de la page. */ .doublepage--couleur .fond img { filter: none; mix-blend-mode: normal; opacity: 1; } /* ⚠️ UNE IMAGE EN COULEUR DEMANDE UN VOILE PLUS FRANC. Le voile par défaut monte du bas et suffit à du bichrome, qui est déjà sombre partout. Ici la brume est CLAIRE au milieu droit — exactement là où tombe le paragraphe — et un texte en encre claire y perdait son contraste. On ajoute donc une seconde nappe qui vient de la droite. Mesuré, pas supposé : voir la sonde de contraste de la séance. */ .doublepage--couleur .voile { background: linear-gradient(to top, rgba(20,29,48,.94), rgba(20,29,48,.30) 72%), linear-gradient(to left, rgba(20,29,48,.66), rgba(20,29,48,0) 56%); } /* Un mot d'affiche et un paragraphe dans une double page, au lieu de la phrase et de sa légende : les trois objets de la page courante y entrent, mais leurs couleurs sont écrites pour le crème. Sur la plaque, c'est l'encre claire qui s'applique — les mêmes jetons que `.bloc`, donc les deux thèmes suivent sans une règle de plus. */ .doublepage .geant, .doublepage .geant em { color: var(--sur-navy); } .doublepage .filet-titre { color: var(--sur-navy-doux); border-bottom-color: rgba(236, 230, 218, .35); } /* 🔴 L'ENCRE DOUCE NE PASSE PAS SUR UNE PHOTOGRAPHIE. Mesuré au pixel le 02.11.2026, sous le paragraphe de la double page en couleur : le point le plus clair du fond est rgb(79,99,121), et `--sur-navy-doux` (#aab2c4) n'y tient que 2,91:1 — il en faut 4,5 pour du 19 px. Une moyenne ne vaut rien ici : le fond est une brume, et c'est SON point le plus clair qui décide. `--sur-navy` (#ece6da) donne 4,98:1 au même endroit. Le voile s'étend aussi un peu plus, pour la marge. ⚠️ CE N'EST PAS `.menu--clair` QU'ON CHANGE : sur une plaque navy unie, l'encre douce tient largement, et c'est elle qui donne la hiérarchie. Le correctif vise la double page, où le fond n'est pas une couleur. */ .doublepage .menu, .doublepage .menu--clair { color: var(--sur-navy); } .doublepage .voile { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,29,48,.92), rgba(20,29,48,.18) 70%); } .doublepage .dedans { position: relative; padding: var(--e6) var(--marge); width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--e6); align-items: end; } .doublepage p.phrase { font-family: var(--titre); font-size: clamp(28px, 3.4vw, 46px); line-height: 1.1; color: var(--sur-navy); margin: 0; max-width: 18ch; } .doublepage p.legende { font-family: var(--mono); font-size: var(--t-mention); letter-spacing: .12em; text-transform: uppercase; color: var(--sur-navy-doux); margin: 0; align-self: end; justify-self: end; text-align: right; } /* 🔴 LA « BANDE SOMBRE SANS IMAGE » A ÉTÉ RETIRÉE — 02.11.2026. Six règles * pour un bloc que PLUS AUCUNE page n'employait : vérifié sur les contenus, * les gabarits, les patterns et le prototype, zéro `class="bande"` en dehors * de `inc/bandes.php`, qui pose les bandes d'IMAGE. * * ⚠️ ET LES DEUX SE TÉLESCOPAIENT. `.bande` désignait ici un bloc navy et * là une bande du triptyque : la règle morte posait un `background` navy et * un `padding` sur chaque bande d'image. Sans effet visible — l'image * recouvre, et la découpe est faite par `background-size` — donc rien ne * l'aurait signalé. Un nom qui porte deux sens finit toujours par en perdre * un, et c'est l'autre qui casse. */ /* ═══ 7. Les rails ════════════════════════════════════════════════════════ * * Trois signaux disent qu'un rail défile, parce qu'un rail qui n'en donne * aucun se lit comme une rangée tronquée : la dernière vignette est COUPÉE * par le bord, un voile l'estompe pour faire « suite » plutôt que « fin », et * une barre de progression bouge quand on défile. */ .rail { margin-top: var(--e6); position: relative; } .rail::after { content: ""; position: absolute; top: 0; bottom: 96px; right: 0; width: 120px; background: linear-gradient(to right, rgba(244,241,234,0), var(--creme)); pointer-events: none; } .rail-piste { display: flex; flex-wrap: nowrap; gap: var(--e4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-right: var(--marge); scrollbar-width: none; } .rail-piste::-webkit-scrollbar { display: none; } .rail-piste:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; } .rail-piste > * { scroll-snap-align: start; } .livres-piste > figure { flex: 0 0 164px; margin: 0; } .jauge { position: relative; height: 1px; background: var(--trait); margin: var(--e5) var(--marge) 0 0; } .jauge span { position: absolute; top: -1px; left: 0; height: 3px; width: 20%; background: var(--accent); transition: left .18s ease; } .rail-cmd { display: flex; gap: var(--e2); justify-content: flex-end; align-items: center; margin-top: var(--e4); padding-right: var(--marge); } .rail-cmd .compteur { font-family: var(--mono); font-size: var(--t-mention); letter-spacing: .12em; color: var(--texte-doux); margin: 0 var(--e4) 0 0; } .rail-cmd button { font-family: var(--mono); font-size: var(--t-menu); width: 44px; height: 44px; background: none; border: 1px solid var(--trait); color: var(--texte); cursor: pointer; transition: border-color .18s ease, color .18s ease; } .rail-cmd button:hover { border-color: var(--accent); color: var(--accent-texte); } .rail-cmd button[disabled] { opacity: .3; cursor: default; border-color: var(--trait); color: var(--texte-doux); } /* ═══ 8. Les ouvrages ═════════════════════════════════════════════════════ */ .livres-sect { padding: var(--e7) 0 var(--e6); } .livres-sect .livres-txt { padding: 0 var(--marge); max-width: 58ch; } .livres-sect .rail { padding-left: var(--marge); } .livre-legende { display: block; margin-top: var(--e3); } .livre-legende .num { display: block; font-family: var(--mono); font-size: var(--t-etiquette); letter-spacing: .14em; color: var(--accent-texte); margin-bottom: var(--e1); } .livre-legende b { display: block; font-family: var(--titre); font-weight: 400; font-size: 17px; line-height: 1.18; color: var(--navy); } .livre-lien { display: block; text-decoration: none; } .livre-lien:hover .livre-legende b { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; } /* La grille du catalogue : ici on vient chercher, donc on montre tout. */ .livres-grille { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e6) var(--e4); } .livres-grille figure { margin: 0; } /* Le retournement des couvertures, repris de `mentalsofa`, avec ses deux pièges déjà payés là-bas : 1. `overflow:hidden` vit sur les DEUX FACES, jamais sur la scène 3D — plusieurs moteurs aplatissent alors la scène et rien ne tourne ; 2. la rotation se déclenche au survol ET au `:focus-visible`, sans quoi la quatrième de couverture est réservée à la souris. */ .flip { display: block; perspective: 1400px; background: none; border: 0; padding: 0; width: 100%; cursor: pointer; } .flip .scene { position: relative; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.7,.2,1); } .flip:hover .scene, .flip:focus-visible .scene { transform: rotateY(180deg); } .flip .face { display: block; backface-visibility: hidden; overflow: hidden; } .flip .face img { display: block; width: 100%; } .flip .dos { position: absolute; inset: 0; transform: rotateY(180deg); } .flip .dos img { height: 100%; object-fit: cover; } /* La fiche d'un ouvrage. */ .fiche { display: grid; grid-template-columns: 5fr 7fr; gap: var(--e6); padding: var(--e7) var(--marge); } .fiche-couv { margin: 0; max-width: 380px; } .fiche-couv img { display: block; width: 100%; } .fiche h1 { font-size: clamp(34px, 3.6vw, 52px); } .fiche-st { font-family: var(--titre); font-size: 24px; line-height: 1.2; color: var(--texte-doux); margin: var(--e3) 0 var(--e5); } .fiche-act { display: flex; gap: var(--e5); align-items: center; flex-wrap: wrap; margin: var(--e5) 0; } .fiche-tableau { width: 100%; border-collapse: collapse; margin-top: var(--e5); font-size: var(--t-mention); } .fiche-tableau td { padding: 12px 0; border-top: 1px solid var(--trait); } .fiche-tableau td:first-child { font-family: var(--mono); font-size: var(--t-mention); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); width: 13em; } /* ═══ 9. Les marques ══════════════════════════════════════════════════════ * * 🔴 PLUS DE `grayscale()` — retiré le 31.10.2026, après « ici les logos * s'affichent vraiment pas bien ». La règle d'avant était * `filter: grayscale(1) contrast(.78) opacity(.55)`, défaite au survol. Deux * mesures la condamnent. UN TÉLÉPHONE N'A PAS DE SURVOL : la moitié des * visiteurs ne voyaient que la version délavée, et jamais l'autre. Et sur la * tuile navy de Mental Sofa, un logo à 55 % d'opacité DISPARAÎT du fond — * vérifié au rendu, il ne restait rien. La règle de la maison tranche de * toute façon : un logo de marque tierce est un usage nominatif, on ne le * recolore pas. * * CE QUE LE GRIS VOULAIT ÉVITER RESTE VRAI — neuf logos en couleur, sans * cadrage commun, se disputent la page. On le règle par la GÉOMÉTRIE au lieu * de la teinte : une boîte de même emprise pour tous, `contain` pour * n'écraser personne, `left center` pour qu'ils s'alignent sur le bord du * texte. * * ⚠️ L'ALIGNEMENT SE FAISAIT SUR LA HAUTEUR SEULE, et c'est ce qui donnait la * disparité : mesuré, le bandeau de Symbiose Immobilier (3,27 : 1) occupait * 222 px de large quand l'écusson de Renaissance 69 (1 : 1) en occupait 68 — * trois fois et demie la surface, pour une maison qui n'en demandait pas * tant. Et Power-Fit, qui attend sa page, est à 5,92 : 1 : il sortirait à * 403 px. Une boîte commune rend la grille sûre quel que soit le logo qui * arrive demain. */ /* 🔴 CINQ EMPRISES, UNE PAR RAPPORT — et une échelle par contexte. La boîte unique de 168 × 60 rendait une aire de 3 600 px² à un carré et de 9 780 à une bande : voir `lha_logo_emprise()` dans `inc/marques.php`, qui porte la mesure des neuf et le calcul. Les valeurs ci-dessous visent la même aire d'environ 5 800 px² dans la tuile ordinaire ; `contain` inscrit le dessin dedans sans jamais le déformer. ⚠️ L'AIRE VISÉE EST 9 000 px², PAS 5 800. Premier réglage : 5 800, la moyenne arithmétique des neuf. Équilibré et trop petit — Mecenda passait de 163 px de large à 122, et égaliser vers le bas, c'est rapetisser huit logos pour en consoler un. On vise donc le haut de l'ancienne fourchette. `--lk` est l'échelle du contexte, et c'est la seule chose qui change d'une tuile à l'autre : plus de vingt déclarations de largeur/hauteur à tenir (cinq emprises × quatre contextes × deux seuils) seraient devenues fausses au premier logo ajouté. */ .marque-logo { width: calc(var(--lw, 150px) * var(--lk, 1)); height: calc(var(--lh, 48px) * var(--lk, 1)); max-width: 100%; object-fit: contain; object-position: left center; } /* 🔴 UN SEUIL AU-DESSOUS DE UN — ajouté le 01.11.2026 avec le monogramme de Mecenda, qui est un ovale en 164 × 204, donc un rapport de 0,80. L'échelle s'arrêtait au carré parce que les neuf logos du jour étaient tous larges ou carrés : une marque PORTRAIT tombait dans la boîte carrée et y perdait un cinquième de son aire. Une échelle qui ne couvre que ce qu'on a sous la main n'est pas une échelle, c'est un relevé. */ .marque-logo--r0 { --lw: 85px; --lh: 106px; } /* portrait — Mecenda (monogramme) */ .marque-logo--r1 { --lw: 95px; --lh: 95px; } /* carré — Mental Sofa, Renaissance 69 */ .marque-logo--r2 { --lw: 116px; --lh: 78px; } /* Sport Dating */ .marque-logo--r3 { --lw: 139px; --lh: 66px; } /* Symbiose Bien-être */ .marque-logo--r4 { --lw: 163px; --lh: 56px; } /* Mecenda, Symbiose Immobilier */ .marque-logo--r5 { --lw: 195px; --lh: 46px; } /* La Fabrique, Power-Fit */ /* 🔴 UN SIXIÈME SEUIL, POUR LES MARQUES TRÈS LONGUES — 01.11.2026, avec la nouvelle identité Mecenda : symbole plus mot, 232 × 33, soit un rapport de SEPT. L'échelle s'arrêtait à 3,89, le plus allongé des neuf logos du jour. Rangée en `--r5`, cette marque sortait à 156 × 22 — 3 400 px² au lieu de 9 000, une barrette deux fois trop maigre. Deux fois en deux jours que l'échelle manque un cas : hier le PORTRAIT (`--r0`), aujourd'hui le très large. Une échelle écrite sur les logos qu'on a sous la main n'en est pas une ; celle-ci couvre maintenant de 0,80 à 7,0, ce qui laisse de la marge des deux côtés. */ .marque-logo--r6 { --lw: 230px; --lh: 33px; } /* très large — Mecenda */ /* ── LES ENSEIGNES : LA DEVANTURE DES MAISONS ─────────────────────────── * L'accueil ne refait plus la page Univers (voir `lha_enseignes_marques`). * Neuf enseignes bord à bord, séparées par un seul filet : on voit qu'elles * sont neuf avant de savoir ce qu'elles font, et c'est tout ce que l'accueil * a à dire. * * `--lk` FAIT TOUT LE TRAVAIL. C'est l'échelle de contexte des emprises * ci-dessus : un seul nombre met les neuf logos à leur taille, chacun dans * son rapport. Écrire ici des largeurs serait rouvrir les vingt * déclarations que `--lk` existe pour éviter. * * Les logos sont adoucis au repos et repris en entier au survol du bloc — * le même geste que les bandes. Aucune teinte n'est appliquée : recolorer * le logo d'une marque tierce serait un usage fautif. */ .enseignes { display: block; text-decoration: none; color: inherit; } .enseignes:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } /* 🔴 NEUF NE SE RÉPARTIT PAS TOUT SEUL. En `auto-fit minmax(150px, 1fr)`, * le mur posait huit enseignes sur la première ligne et UNE sur la seconde, * suivie d'une bande de fond vide aussi large que huit cases. Neuf n'a que * trois diviseurs — 9, 3, 1 — et ce sont les seuls comptes de colonnes qui * ne laissent aucun trou. Une devanture en une ligne quand la place est là, * trois par trois sinon. */ .enseignes-mur { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--trait); border-block: 1px solid var(--trait); } @media (min-width: 1100px) { .enseignes-mur { grid-template-columns: repeat(9, 1fr); } } .enseigne { --lk: .52; display: grid; place-items: center; min-height: 118px; padding: var(--e4) var(--e3); background: var(--creme); } /* 🔴 .72 ET NON .5. Le mur est au repos tant qu'on ne le survole pas, et les logos y sont à .62 en gris — ils sont décoratifs, `aria-hidden`, et ce qui s'efface d'eux ne se lit de toute façon pas. CE NOM-LÀ EST DU TEXTE : c'est la seule maison qui n'a pas de logo, et son nom est tout ce qu'un visiteur a d'elle. Mesuré : à .5 il rendait 2,91:1 sur le crème et 4,05:1 sur le sombre — sous le seuil des deux côtés, pour une mention de 19 px. À .72 il tient 5,39:1 et 6,64:1, et le geste ne change pas : le mur reste discret, il s'allume au survol. Une discrétion ne se paie pas en lisibilité. */ .enseigne-nom { font-family: var(--titre); font-size: 19px; line-height: 1.15; text-align: center; color: var(--navy); opacity: .72; transition: opacity 400ms ease; } .enseignes:hover .enseigne-nom, .enseignes:focus-visible .enseigne-nom { opacity: 1; } .enseigne .marque-logo { object-position: center; opacity: .62; filter: grayscale(1); transition: opacity 400ms ease, filter 400ms ease; } .enseignes:hover .marque-logo, .enseignes:focus-visible .marque-logo { opacity: 1; filter: none; } /* 🔴 L'APPEL EST À GAUCHE — 02.11.2026, et c'est une règle de site, pas un réglage de ce mur-ci : « de manière générale, tous ces call to action pourraient être à gauche ». Un appel calé à droite part chercher l'œil là où la lecture ne va pas ; à gauche il est sur la colonne qu'on descend. `space-between` n'avait de sens que tant que « Neuf maisons fondées » tenait l'autre bout — ce compte est tombé le même jour. */ .enseignes-pied { display: flex; justify-content: flex-start; align-items: baseline; gap: var(--e4); margin-top: var(--e4); } .enseignes-aller { font-family: var(--mono); font-size: var(--t-etiquette); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-texte); border-bottom: 2px solid var(--accent); padding-bottom: 3px; } @media (prefers-reduced-motion: reduce) { .enseigne .marque-logo { transition: none; } } @media (max-width: 600px) { /* Deux par ligne : à 150 px une enseigne de quatre lettres n'est plus une enseigne, c'est une vignette. */ /* Toujours trois : à deux colonnes la neuvième enseigne resterait seule sur sa ligne, et c'est le trou qu'on vient de supprimer. */ .enseigne { --lk: .40; min-height: 88px; padding: var(--e3) var(--e2); } .enseignes-pied { flex-direction: column; align-items: flex-start; gap: var(--e2); } } /* En cases, sur l'accueil. */ .ecuries { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--trait); border-left: 1px solid var(--trait); } .ecurie { border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); padding: var(--e5) var(--e4) var(--e4); display: flex; flex-direction: column; gap: var(--e3); min-height: 270px; text-decoration: none; color: inherit; transition: background .2s ease; } .ecurie:hover { background: var(--carte); } .ecurie .code { display: block; font-family: var(--mono); font-size: var(--t-etiquette); letter-spacing: .14em; color: var(--accent-texte); } .ecurie .nom { display: block; font-family: var(--titre); font-size: 22px; line-height: 1.1; } .ecurie .bl { display: block; font-size: var(--t-mention); line-height: 24px; color: var(--texte-doux); } .ecurie .aller { margin-top: auto; font-family: var(--mono); font-size: var(--t-etiquette); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); display: flex; align-items: center; gap: 8px; transition: color .2s ease; } .ecurie:hover .aller { color: var(--accent-texte); } .ecurie .aller span { transition: transform .2s ease; } .ecurie:hover .aller span { transform: translateX(4px); } .ecurie--vide { background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(221,215,203,.35) 9px 10px); } /* La fiche d'une marque. */ .fiche-marque { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--e7); padding: var(--e7) var(--marge); } .fiche-marque { --lk: 1.3; } /* ═══ 10. Pages intérieures ═══════════════════════════════════════════════ */ .bandeau { padding: var(--e7) var(--marge) var(--e6); border-bottom: 1px solid var(--trait); } .bandeau h1 { max-width: 16ch; } .bandeau .chapo { margin-top: var(--e5); } /* La barre de filtres : du mono, aucun bouton. Un filtre qui ressemble à un bouton attire le clic avant la lecture. */ .filtres { display: flex; flex-wrap: wrap; gap: var(--e5); align-items: baseline; padding: var(--e4) var(--marge); border-bottom: 1px solid var(--trait); } .filtres a { font-family: var(--mono); font-size: var(--t-mention); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid transparent; } .filtres a:hover { color: var(--navy); border-bottom-color: var(--accent); } /* 🔴 L'ÉTAT ACTIF SE VOYAIT À UN PIXEL — 01.11.2026. « C'est très compliqué à utiliser. » Les cibles faisaient pourtant 33 × 44 px, bien assez : le défaut n'était pas la taille, c'était qu'on ne voyait pas CE QUI EST POSÉ. Vingt-deux liens de même graisse, et pour seul repère un filet d'un pixel dans la couleur du texte. La pastille ne vaut QUE pour l'actif : le commentaire ci-dessus refuse que les filtres ressemblent à des boutons, et il a raison — un filtre qui ressemble à un bouton attire le clic avant la lecture. Marquer l'état choisi n'est pas déguiser les vingt et un autres. */ /* ⚠️ LA PASTILLE PLEINE A ÉTÉ ABANDONNÉE, et c'est une mesure qui l'a dit. Essayée avec `--sur-navy` puis avec `--creme` : dans les deux cas le mot ressortait NAVY SUR NAVY — un rectangle bleu sans texte, vu sur capture les deux fois. Une autre règle, plus loin dans la feuille, reprend la couleur des liens de filtre ; la trouver et la contourner coûte plus que ce que la pastille apporte. Le marqueur reste donc un filet, mais un filet qu'on VOIT : deux pixels de laiton au lieu d'un pixel dans la couleur du texte, et le mot en navy plein. C'était le défaut d'origine — l'état posé ne se distinguait pas des vingt et un autres. */ .filtres a[aria-current] { color: var(--navy); border-bottom: 2px solid var(--accent); padding-bottom: 3px; } .filtres-effacer { margin: var(--e2) 0 0; } .filtres-effacer a { color: var(--accent-texte); border-bottom-color: var(--accent); } .filtres .compte { margin-left: auto; font-family: var(--mono); font-size: var(--t-mention); letter-spacing: .14em; color: var(--texte-doux); } /* La colonne de lecture : À propos, article, mentions. La lettrine est le seul ornement admis, parce qu'elle appartient au livre. */ .lecture, .colonne { max-width: var(--mesure); margin-inline: auto; padding: var(--e7) var(--marge); } .lecture > * + *, .colonne > * + * { margin-top: var(--e4); } .lecture h2, .colonne h2 { margin-top: var(--e6); font-size: 30px; } .lecture ul, .lecture ol, .colonne ul, .colonne ol { padding-left: 1.2em; } .lecture li, .colonne li { margin: var(--e2) 0; } .colonne figure { margin: var(--e5) 0; } .colonne .wp-block-image img, .colonne .is-style-rounded img { border-radius: 0; } .lettrine::first-letter { float: left; font-family: var(--titre); font-size: 76px; line-height: .78; padding: 6px 12px 0 0; color: var(--navy); } .exergue, .colonne blockquote, .colonne .wp-block-quote { margin: var(--e6) 0; padding-left: var(--e4); border-left: 1px solid var(--accent); font-family: var(--titre); font-size: 28px; line-height: 1.2; color: var(--navy); } .exergue p, .colonne blockquote p { margin: 0; } /* ═══ 11. Le journal ══════════════════════════════════════════════════════ * * PIÈGE DE LA REQUÊTE WORDPRESS : la classe posée sur `wp:query` atterrit sur * le conteneur, et celle de `wp:post-template` sur la LISTE — jamais sur les * articles. C'est la liste qu'il faut viser. */ .une .wp-block-post-template { list-style: none; margin: 0; padding: 0; } .une .wp-block-post-template > li { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e6); align-items: end; padding: var(--e7) var(--marge); border-bottom: 1px solid var(--trait); } .une .wp-block-post-date { font-family: var(--mono); font-size: var(--t-mention); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-texte); margin: 0 0 var(--e3); } .une h2 { font-size: clamp(34px, 4.6vw, 62px); line-height: 1.02; } .une h2 a { text-decoration: none; } .une p { margin: 0; font-size: 18px; line-height: 29px; } .index .wp-block-post-template { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); } .index .wp-block-post-template > li { display: grid; grid-template-columns: 150px 1.1fr 1fr; gap: var(--e5); align-items: baseline; padding: var(--e5) var(--marge); border-bottom: 1px solid var(--trait); transition: background .2s ease; } .index .wp-block-post-template > li:hover { background: var(--carte); } .index .wp-block-post-date { font-family: var(--mono); font-size: var(--t-mention); letter-spacing: .12em; color: var(--texte-doux); margin: 0; } .index h2, .index h3 { font-size: 28px; line-height: 1.1; } .index h2 a, .index h3 a { text-decoration: none; } .index li:hover h2 a, .index li:hover h3 a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px; } .index p { margin: 0; font-size: var(--t-mention); line-height: 25px; color: var(--texte-doux); } /* Sur l'accueil, le journal reste en trois colonnes. */ .journal .wp-block-post-template { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e6); list-style: none; margin: 0; padding: 0; } .journal .wp-block-post-template > li { display: flex; flex-direction: column; border-top: 1px solid var(--trait); padding-top: var(--e4); margin: 0; } .journal .wp-block-post-date { font-family: var(--mono); font-size: var(--t-mention); letter-spacing: .12em; color: var(--texte-doux); margin: 0 0 var(--e3); } .journal h3 { font-size: 24px; line-height: 1.15; margin-bottom: var(--e3); } .journal h3 a { text-decoration: none; } .journal p { margin: 0; font-size: var(--t-corps); line-height: 27px; } /* ═══ LE REPÈRE D'IMAGE DES ARTICLES ═════════════════════════════════════ * * Une carte d'article sans visuel est une colonne de texte : trois côte à * côte se lisent comme un tableau, pas comme un journal. Les articles n'ont * pas encore d'image — celui qui en aura une la verra s'afficher à sa place, * et le repère disparaît. * * CE N'EST PAS UNE FAUSSE PHOTOGRAPHIE. C'est la grille de cases du site, * au repos : le même geste que la couverture, la porte et la mosaïque d'un * livre. Un rectangle gris dirait « image cassée » ; un visuel d'emprunt * mentirait. Celui-ci dit « sa place est là, elle n'est pas encore prise ». * * `:has()` fait le partage : le repère n'est posé que sur les cartes qui * n'ont PAS d'image. Sans lui, il faudrait un marqueur côté serveur sur * chaque article, c'est-à-dire une donnée de plus à tenir à jour. */ .journal .wp-block-post-featured-image, .maconnerie .wp-block-post-featured-image { margin: 0 0 var(--e3); overflow: hidden; background: var(--carte); } .journal .wp-block-post-featured-image img, .maconnerie .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .journal .wp-block-post-template > li:not(:has(.wp-block-post-featured-image img))::before, .maconnerie .wp-block-post-template > li:not(:has(.wp-block-post-featured-image img))::before { content: ""; display: block; aspect-ratio: 4 / 3; margin-bottom: var(--e3); background: repeating-linear-gradient(90deg, var(--trait) 0 1px, transparent 1px 25%), repeating-linear-gradient(0deg, var(--trait) 0 1px, transparent 1px 33.34%), var(--carte); border: 1px solid var(--trait); } /* ═══ 12. Le contact ══════════════════════════════════════════════════════ * * Les champs n'ont qu'un filet sous eux : un cadre complet ferait formulaire * administratif, ce que cette page n'est pas. */ .contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e7); padding: var(--e7) var(--marge); } .coord { margin: var(--e6) 0 0; display: grid; grid-template-columns: 11ch 1fr; border-top: 1px solid var(--trait); } /* 🔴 DEUX TRAITS POUR UN SEUL SEUIL — corrigé le 31.10.2026. `.filet-titre` pose déjà un filet sous son étiquette ; `.coord` en posait un second au-dessus de sa première ligne, et les soixante-quatre pixels de marge entre les deux les montraient comme une double règle encadrant du vide. Sous « ME JOINDRE », c'est exactement ce qu'on voyait. Quand un titre a déjà tracé la ligne, la liste n'en retrace pas une. */ .filet-titre + .coord { margin-top: var(--e4); border-top: 0; } /* L'encadré « Avant d'écrire » revient dans la colonne des coordonnées le 02.11.2026, mais DESSOUS et non DEDANS : « sous l'autre boîte bleue, sur une colonne, un quart de colonne ». Les deux essais précédents disaient pourquoi c'est la bonne place. En bas de page après le portrait, on le lisait le message déjà parti. Dans le bloc navy, un fond navy sur un fond navy ne se voit pas — il y avait perdu sa boîte et n'était plus qu'un paragraphe sous un filet. Ici il reste une boîte, et c'est le crème de la page entre les deux plaques qui les fait deux. La colonne porte donc un empilement, pas un bloc : d'où ce conteneur, qui est ce que la grille range en 1/5 pendant que les plaques se succèdent dedans. `.encadre` apporte un `margin` de --e6 fait pour une pleine largeur ; dans une colonne c'est un trou, --e4 suffit. */ .colonne-joindre { display: flex; flex-direction: column; } .colonne-joindre .encadre { margin: var(--e4) 0 0; } /* La mention qui remplace la case à cocher : une information, pas une formalité. Elle se lit, elle ne se coche pas. */ .mention { margin: var(--e4) 0 0; font-size: var(--t-mention); line-height: 23px; color: var(--texte-doux); } .mention a { color: inherit; border-bottom: 1px solid var(--accent); text-decoration: none; } .coord dt { font-family: var(--mono); font-size: var(--t-etiquette); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); padding: var(--e4) 0; border-bottom: 1px solid var(--trait); } .coord dd { margin: 0; padding: var(--e4) 0; border-bottom: 1px solid var(--trait); color: var(--navy); } /* LES FORMULAIRES SONT CEUX DE FLUENT FORMS, et son balisage n'est pas le nôtre : ni `.champ`, ni `.accord`. Ces règles reprennent, classe pour classe, la grammaire du formulaire dessiné à la main qu'elles remplacent — libellé en mono capitales, champ sans bordure sauf un filet dessous, laiton à la prise de focus. L'extension charge sa propre feuille avant celle-ci, donc l'ordre suffit et aucune règle n'a besoin de `!important`. Les sélecteurs portent tous le préfixe `.fluentform`, qui est le conteneur que l'extension écrit autour de chaque formulaire. Ne pas viser `form` nu : l'écran d'administration en pose d'autres. */ /* ⚠️ UN CHAMP DOIT RESSEMBLER À UN CHAMP — corrigé le 29.10.2026. Les champs n'avaient qu'un filet par-dessous, posé sur le fond de page. Sur la page Contact, le résultat se lisait à l'envers : le bloc navy des coordonnées, lui, est plein — c'est donc LUI qui ressemblait au formulaire, et le formulaire ressemblait à du vide avec un bouton « Envoyer » posé au milieu. « On ne voit pas le formulaire », et c'était vrai. Un champ a maintenant une surface et un bord. Ce n'est pas un recul sur la sobriété : un filet seul est une convention de maquette, pas d'usage, et personne ne clique dans du vide. */ /* EN FLUX NORMAL, PAS EN GRILLE. L'extension pose un groupe par champ, plus un leurre anti-robot en position absolue : une grille compterait ce leurre parmi ses pistes et l'espacement cesserait de correspondre à ce qu'on lit. Une marge par groupe se mesure à l'œil et ne ment pas. */ .fluentform form { display: block; } .fluentform .ff-el-group { margin: 0 0 var(--e5); } .fluentform .ff-el-input--label label, .fluentform .ff-el-input--label { display: block; font-family: var(--mono); font-size: var(--t-etiquette); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: var(--e2); } .fluentform .ff-el-form-control { width: 100%; font: inherit; color: var(--navy); background: var(--creme); border: 1px solid var(--trait); padding: 13px 15px; border-radius: 0; box-shadow: none; transition: border-color .18s ease; } .fluentform .ff-el-form-control:focus { outline: 0; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .fluentform textarea.ff-el-form-control { min-height: 140px; resize: vertical; } .fluentform .ff-el-help-message { font-family: var(--mono); font-size: var(--t-etiquette); letter-spacing: .08em; font-style: normal; color: var(--texte-doux); margin: var(--e2) 0 var(--e3); } /* L'ASTÉRISQUE DU CHAMP OBLIGATOIRE EST ROUGE chez Fluent Forms, et le rouge n'est pas dans la palette. Au laiton, il redevient une ponctuation. Le sélecteur recopie celui de l'extension — quatre classes et un pseudo — parce qu'un sélecteur plus court perd, quelle que soit sa place. */ .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after, .fluentform .ff-el-input--label.ff-el-is-required.asterisk-left label:before { color: var(--accent); } /* Et le rouge d'alerte de l'extension prend celui de la maison, une fois pour toutes : il est déclaré en variable, donc il suffit de la redéfinir. */ .fluentform { --fluentform-danger: var(--alerte); } /* LE CONSENTEMENT : une case et une phrase, pas un libellé de champ. La case est DANS le libellé, pas à côté — c'est donc le libellé qui porte la rangée, sinon la phrase vient coller la case. */ .fluentform .ff-el-form-check-label { display: flex; gap: 12px; align-items: flex-start; font-family: var(--texte-f); font-size: var(--t-mention); line-height: 24px; letter-spacing: 0; text-transform: none; color: var(--texte-doux); margin: 0; } .fluentform .ff-el-form-check-input { flex: 0 0 auto; margin-top: 4px; accent-color: var(--navy); } /* Le bouton : celui du site. L'extension pose une couleur de fond en style calculé, que le script de pose règle sur le navy — ici on tient la forme. */ .fluentform .ff-btn-submit { display: inline-flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: var(--t-action); letter-spacing: .1em; text-transform: uppercase; color: var(--sur-navy); text-decoration: none; padding: 18px 26px; border: 0; border-radius: 0; cursor: pointer; transition: background .18s ease; } /* Ce que l'extension dit quand quelque chose manque, et quand tout est parti. */ .fluentform .error, .fluentform .text-danger { font-family: var(--mono); font-size: var(--t-etiquette); letter-spacing: .08em; text-transform: uppercase; color: var(--alerte); margin: var(--e2) 0 0; } .fluentform .ff-message-success { font-family: var(--texte-f); color: var(--navy); border-left: 2px solid var(--accent); padding: var(--e3) 0 var(--e3) var(--e4); } /* ═══ 13. Téléphone ═══════════════════════════════════════════════════════ */ @media (max-width: 1100px) { .livres-grille { grid-template-columns: repeat(4, 1fr); } .donnees { grid-template-columns: repeat(2, 1fr); } .ecuries { grid-template-columns: repeat(2, 1fr); } .index .wp-block-post-template > li { grid-template-columns: 110px 1fr; } .index p { grid-column: 2; } .contact, .fiche-marque { grid-template-columns: 1fr; gap: var(--e5); } .une .wp-block-post-template > li { grid-template-columns: 1fr; gap: var(--e4); } .journal .wp-block-post-template { grid-template-columns: 1fr 1fr; } .pied-cols { grid-template-columns: repeat(3, 1fr); gap: var(--e6); } .specs { grid-template-columns: 1fr; gap: 0; } } @media (max-width: 900px) { :root { --marge: 20px; --e7: 72px; } /* Le logo tient le bord gauche et le burger le bord droit : deux masses, pas trois. La grille à trois colonnes de l'ordinateur n'a plus de milieu à tenir. */ /* 🔴 FIXE, ET FIXE TOUT LE TEMPS — PAS SEULEMENT UNE FOIS OUVERTE. Première écriture du panneau plein écran : la barre restait collante et passait en `fixed` à l'ouverture. Elle quittait donc le flux à ce moment-là, le document perdait sa hauteur, et au refermement le navigateur reposait la page ailleurs — mesuré : parti de 1200 px de défilement, on en retrouvait 814. Ouvrir un menu puis renoncer ne doit pas déplacer la page qu'on était en train de lire. Fixée dès le départ, l'ouverture ne change plus rien au flux. LA PLACE QU'ELLE NE PREND PLUS SE REND AU CONTENU, une fois, sur le conteneur du site. `--hd-h` se déduit des trois valeurs ci-dessous — garde, logo, filet — et les quatre lignes se déplacent ensemble. Sur téléphone la barre ne rétrécit PAS au défilement : le logo y est écrit à 44 px, ce que `html.a-defile` ne touche pas. Sa hauteur est donc constante, et c'est ce qui rend ce calcul juste. 🔴 ET C'EST `--hd`, LA VARIABLE QUI EXISTAIT DÉJÀ. Elle valait 96 px pour tout le monde — un nombre posé une fois, jamais revu. La couverture de l'accueil s'en sert pour se coller sous la barre (`.couv { top: var(--hd) }`) : sur téléphone elle se collait donc 31 px TROP BAS, et cette bande de crème au-dessus de la photographie est exactement ce que Lina avait signalé le 31.10 — « cette photo collée à gauche et pas de marge supérieure ». La cause n'était pas dans la photo, elle était dans ce 96. ⚠️ Sur grand écran, 96 reste une approximation : la barre fait 133 au repos et 56 une fois défilée. À mesurer et corriger à part — y toucher ici changerait la couverture de bureau sans l'avoir regardée. ⚠️ LA VALEUR N'EST PAS ÉCRITE ICI, MAIS À CÔTÉ DE CELLE QU'ELLE REMPLACE — `:root { --hd: 96px }`, au-dessus de `.piste-couv`. Posée dans ce bloc-ci, elle arrivait AVANT dans la feuille, à spécificité égale, et c'est le 96 qui gagnait : la bande de crème restait, pour une raison qui n'avait plus rien à voir avec celle d'avant. Deux valeurs d'une même variable se tiennent au même endroit, sinon l'ordre du fichier devient une règle invisible. */ .wp-site-blocks { padding-top: var(--hd); } .hd { position: fixed; top: 0; left: 0; right: 0; padding: 10px var(--marge); grid-template-columns: 1fr auto; row-gap: 0; } /* 🔴 CES DEUX RÈGLES VISAIENT `.wp-block-site-logo`, le bloc que le logo n'est plus depuis qu'il est en SVG. Plus rien ne le plaçait : il tombait dans le flux, donc ENTRE les deux moitiés du menu. C'est le genre de casse qu'un renommage laisse derrière lui, et qu'aucune erreur ne signale — une règle qui ne matche plus se tait. */ .hd .hd-logo { grid-column: 1; grid-row: 1; } .hd .lha-logo { height: 44px; } .hd-burger { display: flex; grid-column: 2; grid-row: 1; justify-self: end; } /* ⚠️ `> `, ET C'EST TOUTE LA DIFFÉRENCE. WordPress pose la classe `wp-block-navigation` DEUX fois : sur le `