/* ========================================================================== Fabian Branas — feuille de style principale -------------------------------------------------------------------------- Les animations image par image sont dans _sprites.css, GÉNÉRÉ par tools/build-assets.sh. Ce fichier-ci s'écrit à la main. Sommaire 1. Variables 2. Reset & base 3. Curseur personnalisé 4. Accessibilité 5. Boutons-images (motif réutilisable) 6. Annotations manuscrites 7. En-tête 8. Pied de page 9. Page d'accueil 10. Masques de découpe 11. Contenu sobre (en attente des dessins de Fabian) 12. Menus déroulants 13. Modales et formulaires ========================================================================== */ /* ========================================================================== 1. VARIABLES ========================================================================== */ :root { /* Palette relevée à la pipette directement dans les PNG de Fabian. Une seule couleur d'accent sur tout le site : le vert EST le signal d'interaction. Ne pas en ajouter une deuxième. */ --fb-vert: #359b3c; --fb-noir: #000000; --fb-blanc: #ffffff; --fb-rose: #ef87aa; /* signature « nickel. » uniquement */ /* Gris utilitaires — n'existent pas dans les maquettes, réservés aux éléments que Fabian n'a pas encore dessinés (formulaires, tableaux…). */ --fb-gris: #767676; /* contraste 4.6:1 sur blanc : lisible */ --fb-gris-clair: #e6e6e6; /* Typographie : Adobe Garamond Pro via Typekit (kit clr2hux). ⚠ Les kits Adobe Fonts sont restreints par domaine. Si la police ne s'affiche pas, vérifier que fabian-branas, localhost et fabianbranas.art sont autorisés dans les réglages du kit. La pile de secours ci-dessous assure que le site reste lisible entre-temps. ⚠ CETTE LIGNE N'EST PLUS LE DERNIER MOT (20 octobre 2026). Le réglage « Police du site » (Apparence → Personnaliser) peut redéfinir `--fb-serif` juste après ce fichier, avec l'une des deux polices embarquées dans le thème — Fraunces ou DM Sans. Le code est dans inc/typographie.php, les fichiers dans assets/fonts/. Ce qui est écrit ici reste le DÉFAUT, et le défaut reste Garamond : tant que personne n'a touché au réglage, le site charge ce qu'il a toujours chargé. ⚠ ET C'EST POURQUOI AUCUNE RÈGLE DU THÈME NE DOIT ÉCRIRE UN NOM DE POLICE EN DUR. Les dix `font-family` du projet passent toutes par cette variable (plus une dans galerie.css) ; c'est exactement ce qui a permis d'ajouter le réglage en touchant zéro règle de style. Une seule police écrite en dur quelque part, et le site se mettrait à panacher. ⚠ LE NOM DIT « serif » ET LA VALEUR PEUT NE PAS EN ÊTRE UNE. Choisir DM Sans met une sans serif dans une variable qui s'appelle `--fb-serif`. On garde le nom : le renommer voudrait dire toucher onze règles réparties dans 345 Ko de CSS pour un gain purement cosmétique. À lire comme « la police du site ». */ --fb-serif: "adobe-garamond-pro", "EB Garamond", "Adobe Garamond Pro", Garamond, Georgia, "Times New Roman", serif; /* Échelle typographique fluide : la taille suit la largeur de l'écran, sans paliers brutaux. clamp(mini, idéal, maxi). */ --fb-texte: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --fb-petit: clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem); --fb-titre: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); /* Rythme */ --fb-gouttiere: clamp(1.25rem, 4vw, 3rem); --fb-largeur: 900px; /* HAUTEUR DES DEUX OBJETS POSÉS DANS LES COINS HAUTS : « IN ENGLISH PLEASE. » à gauche, le panier à droite. Une seule valeur parce qu'ils doivent se répondre — deux `clamp()` indépendants, ce qu'il y avait ici, divergent au premier réglage fait d'un seul côté. Le bilingue étant masqué pour l'instant, la divergence ne se verrait même pas tout de suite : elle apparaîtrait le jour où on rallume le lien, longtemps après la cause. Remontée le 23 septembre 2026 (1 → 1,75 rem au plancher, 2 → 2,9 rem au plafond) : le panier est FIXE au-dessus de 1250 px, donc calé sur le bord de la fenêtre et non sur la page — à 2 rem il touchait presque le haut de l'écran. « Le décoller un peu », Fabian. */ --fb-coin-haut: clamp(1.75rem, 3.4vw, 2.9rem); /* Échelle calée sur la page de maintenance dessinée par Fabian, qui sert de référence : composition de 620 px de large, titre de 560 px, boutons de 65 px, gouttière de 20 px. Le site reprend ces proportions. Les assets restent exportés en 380 px pour un affichage à ~124 px : plus de 2x, donc parfaitement nets sur écran Retina — et il y a de la marge si on décide plus tard de les agrandir. */ --fb-compo: 790px; /* largeur max de la composition d'accueil */ /* ×1,2 le 9 septembre 2026, à la demande de Fabian (« environ 120 % ») : 124 → 149 px au plafond, et la composition suit (660 → 790). Les assets sont exportés en 380 px : encore 2,5× la taille affichée, nets sur Retina. */ --fb-bouton: clamp(84px, 11.4vw, 149px); /* Plancher des vignettes d'accueil, plus bas que --fb-bouton À DESSEIN. Les 5 vignettes doivent tenir sur une seule ligne le plus longtemps possible : c'est la lecture voulue de la navigation. En dessous de cette taille on renonce et on passe à 4 colonnes — vers 340 px de large, donc seulement sur les tout petits téléphones. */ --fb-vignette-mini: 56px; /* Hauteur des pilules de navigation. Réduite une deuxième fois (40 → 34 px au plafond) : le menu doit rester un sous-titre du logo, pas une barre qui lui tient tête. Le plancher ne descend pas sous 25 px — en dessous, le contour dessiné à la main de « À PROPOS » devient un trait continu à l'écran. */ --fb-nav-h: clamp(25px, 2.5vw, 34px); --fb-ecart: clamp(0.35rem, 0.8vw, 0.7rem); /* GÉOMÉTRIE DE LA RANGÉE DE RÉSEAUX SOCIAUX. Déclarée ici, dans `:root`, et pas sur `.fb-reseaux` où elle est utilisée, parce qu'un deuxième élément en dépend : le bouton « Me soutenir » doit faire exactement la largeur des quatre icônes réunies, et c'est son FRÈRE, pas son descendant. Une variable descend l'arbre, elle ne traverse pas. Trois valeurs à un seul endroit, donc, et une largeur qui reste juste quand on retouche la taille des icônes ou leur écart. */ --fb-reseau-l: clamp(26px, 2.4vw, 28px); --fb-reseau-ecart: clamp(0.25rem, 0.65vw, 0.5rem); --fb-reseaux-l: calc(var(--fb-reseau-l) * 4 + var(--fb-reseau-ecart) * 3); /* Hauteur du bord déchiré qui ouvre le pied de page. Déclarée ICI et pas sur `.fb-pied`, où elle vivait, parce qu'elle sert désormais à quelqu'un qui n'est pas un descendant du pied de page : sur l'accueil, le contenu mesure `100svh` MOINS cette hauteur, pour que la déchirure affleure le bas de l'écran. Une variable ne franchit pas l'arbre, seulement la descendance — d'où la remontée à la racine. */ /* Hauteur du bord déchiré. Ramenée de 40 à 26 px avec le passage du pied en position fixe : c'est du noir permanent à l'écran, il se paie cher. L'image source fait 3307 × 133 et s'étire en `100% 100%` — le trait est donc comprimé d'un facteur 2,2 au lieu de 1,4. Sur un trait dessiné à la main, irrégulier par nature, ça ne se lit pas. En dessous de ~20 px, si. */ --fb-dechirure-h: clamp(14px, 1.9vw, 26px); /* DE COMBIEN LA DÉCHIRURE S'ENFONCE SOUS LA BANDE NOIRE. La bande remonte de cette valeur (margin négatif sur la déchirure) et vient recouvrir le bas du dessin. Ce bas est du noir plein — on n'y perd donc aucun trait, on gagne 10 px de budget et le bord déchiré se lit comme mordant dans la bande plutôt que posé dessus, ce que demandait Fabian. Écrite ici, en un seul endroit, parce que deux règles en dépendent : la déchirure elle-même et la bulle « nickel. », qui doit remonter au-dessus de tout le noir et donc savoir combien il y en a. */ --fb-dechirure-enfoncement: 10px; --fb-transition: 140ms ease-out; } /* ========================================================================== 2. RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* LA BARRE DE DÉFILEMENT EN VERT (Fabian, 17 septembre 2026). Deux mécanismes, parce que les navigateurs n'en ont pas un seul : `scrollbar-color` est le standard (Firefox, Chrome et Edge depuis 121) ; `::-webkit-scrollbar` est ce que Safari comprend. Là où le standard est reconnu, il gagne et les règles ::-webkit- sont ignorées — c'est voulu par Chrome, et les deux donnent la même chose. Sur macOS avec les barres « au défilement », Safari affiche une vraie barre dès qu'on la stylise : un effet secondaire, pas un bug — la barre verte est justement ce qu'on veut voir. On ne touche pas à la largeur : celle du système reste la plus facile à attraper. */ html { scrollbar-color: var(--fb-vert) transparent; } ::-webkit-scrollbar { width: 14px; height: 14px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { /* Le rail est transparent (Fabian, 17 sept. 2026) : le poignet est écarté du bord par une bordure TRANSPARENTE, et `background-clip: padding-box` empêche le vert de passer dessous — une bordure blanche aurait dessiné un liseré sur le bandeau noir du pied. */ background: var(--fb-vert); background-clip: padding-box; border: 3px solid transparent; border-radius: 7px; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* LE PIED DE PAGE EST EN `position: fixed` — CE QUE ÇA CHANGE ICI --------------------------------------------------------------- ⚠ AU-DESSUS DE 700 px SEULEMENT. Sur téléphone il est rendu au flux et cette réserve est ramenée à sa seule gouttière — tout est expliqué dans le bloc `@media (max-width: 700px)` de la section 8. Ce qui suit décrit donc le cas de l'ordinateur, qui reste le cas général. Avant, `body` était une colonne flex avec `min-height: 100vh` : le pied était poussé en bas par `.site-main { flex: 1 0 auto }`, et il défilait avec la page. Fabian le veut maintenant toujours visible. Un élément en `position: fixed` est sorti du flux : le contenu passerait DERRIÈRE lui, et les derniers paragraphes de chaque page seraient illisibles. On réserve donc la place avec un `padding-bottom` égal à sa hauteur. Cette hauteur dépend des `clamp()` du CSS et du nombre de lignes que prend le bloc clair : le CSS ne sait pas la mesurer pour s'en servir ailleurs. C'est assets/js/interface.js qui la recopie dans `--fb-pied-h`, via un ResizeObserver. La valeur de repli ci-dessous est volontairement généreuse : sans JavaScript, mieux vaut un blanc de trop qu'un lien caché. `min-height` et la colonne flex ne servent plus à rien — c'était la mécanique du pied « collé en bas », remplacée par le `fixed`. ON NE RÉSERVE PLUS LA HAUTEUR DU PIED ENTIER, SEULEMENT CELLE DE LA BANDE. Le bloc clair (réseaux + « Me soutenir ») n'a plus de fond : la page défile DERRIÈRE lui, volontairement, les icônes se posant dans les marges de part et d'autre du texte. Lui réserver de la place reviendrait à annuler l'effet en laissant un grand vide blanc sous chaque page. La bande noire, elle, est opaque : ce qui passe dessous est perdu, donc sa hauteur reste due. C'est `--fb-pied-bande-h`, mesurée par interface.js. */ body { margin: 0; /* La hauteur de la bande, PLUS une gouttière blanche. Cette gouttière n'est pas du confort : les bulles d'annotation des réseaux sociaux s'affichent AU-DESSUS de leurs icônes (`bottom: 100%`), donc au-dessus du pied, donc par-dessus la page. Sans une bande blanche pour les recevoir, un dessin au trait noir se superposerait au dernier paragraphe — deux choses noires l'une sur l'autre, illisibles toutes les deux. C'est le même raisonnement que la marge haute de `.fb-entete`, qui réserve la place de « RETOUR À L'ACCUEIL. ». */ padding-bottom: calc(var(--fb-pied-bande-h, 80px) + clamp(1.5rem, 4vw, 3rem)); background: var(--fb-blanc); color: var(--fb-noir); font-family: var(--fb-serif); font-size: var(--fb-texte); line-height: 1.6; } img { max-width: 100%; height: auto; display: block; } /* Les listes purement structurelles (grilles, réseaux sociaux) n'ont pas à afficher de puces. On ne cible que celles marquées role="list" : l'attribut est là pour que les lecteurs d'écran continuent d'annoncer « liste de N éléments » malgré la suppression du style — Safari cesse de le faire dès qu'on retire list-style. */ ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.15em; } h1, h2, h3 { font-weight: 700; line-height: 1.2; margin: 0 0 0.5em; } button { font: inherit; } .fb-conteneur { width: 100%; max-width: var(--fb-largeur); margin-inline: auto; padding-inline: var(--fb-gouttiere); } /* -------------------------------------------------------------------------- PLUS DE ZOOM AU DOUBLE-TAP -------------------------------------------------------------------------- Fabian, 7 octobre 2026 : « désactiver le zoom sur le double clic ». Sur téléphone, un double-tap rapide agrandit la page — et comme tout le site est fait de dessins qu'on tape (les onglets, les vignettes, les plus et les moins du panier), deux appuis un peu rapprochés déclenchaient un zoom à la place d'un double achat d'attention. ⚠ CE N'EST PAS `user-scalable=no`, ET IL NE FAUT SURTOUT PAS LE METTRE. La solution qu'on trouve partout consiste à écrire ``. Elle supprime bien le double-tap — en supprimant AUSSI le zoom à deux doigts, c'est-à-dire le seul moyen qu'a une personne malvoyante de lire un texte trop petit. C'est un échec au critère 1.4.4 des WCAG, et c'est pour cette raison que Safari l'ignore depuis iOS 10. `touch-action: manipulation` dit exactement ce qu'on veut dire : « sur cet élément, le navigateur garde le défilement et le pincement, et abandonne le double-tap ». Le zoom à deux doigts reste entier. SUR `(pointer: coarse)` ALORS QUE LA PROPRIÉTÉ NE CONCERNE QUE LE TACTILE. Elle n'a en effet aucun effet à la souris, la limiter est donc théoriquement inutile. On la limite quand même, parce que la consigne de cette mise à jour est que rien de ce qui est écrit pour le téléphone ne puisse atteindre le grand écran : une règle sans garde-fou est une règle dont il faut vérifier qu'elle est inoffensive, et c'est une vérification de plus à refaire à chaque relecture. ⚠ SUR `body` ET PAS SUR `html` : `touch-action` s'hérite mal — elle ne s'hérite pas du tout, mais elle s'applique à l'élément et à ses descendants qui ne la redéclarent pas. Posée sur `html`, elle laisse passer les éléments qui créent leur propre contexte de défilement. Sur `body`, elle couvre tout ce qui est dessiné dans la page. */ @media (pointer: coarse) { body { touch-action: manipulation; } } /* ========================================================================== 3. CURSEUR PERSONNALISÉ -------------------------------------------------------------------------- Fait avec la propriété CSS `cursor`, pas avec un
qui suit la souris en JavaScript. La différence est nette : le curseur natif est dessiné par le système d'exploitation, donc il ne peut PAS avoir de retard à l'affichage. Un curseur en JS accuse toujours une image de latence, ce qui se voit. Les deux nombres après l'URL sont le « point d'accroche » : le pixel de l'image qui correspond à la position réelle du clic. Pour le crayon, c'est sa pointe (en haut à gauche) ; pour la main, le bout de l'index. ⚠ LES RÈGLES ELLES-MÊMES SONT DANS _sprites.css, généré par le build. Raison : `cursor` ne sait pas redimensionner une image, elle s'affiche à la taille du fichier. La taille se règle donc à la génération (`CURSEUR_ECHELLE` dans tools/build-assets.sh), et le point d'accroche doit suivre la même échelle. Les garder ici obligerait à modifier deux fichiers en même temps, et un oubli décalerait le clic par rapport au dessin. Pour changer la taille : modifier CURSEUR_ECHELLE, relancer le build. ⚠ IL N'Y A AUCUN `cursor:` DANS CETTE FEUILLE, ET C'EST VOULU (23 septembre 2026). Fabian : « à travers TOUT le site, que ce soit toujours soit le crayon soit la main ; il y a encore beaucoup d'endroits qui ne prennent pas ça en compte — fais en sorte que ce soit par défaut, sans devoir l'ajouter sur chaque bouton. » Le crayon était posé sur `body` et comptait sur l'héritage. Ça tient tant que personne ne redéclare `cursor` en chemin — et tout le monde le redéclare : WooCommerce sur ses boutons, PhotoSwipe sur ses images, cette feuille-ci sur une quinzaine de règles. Chaque `cursor: pointer` un peu plus spécifique rendait le curseur du système, à l'endroit précis où l'on clique. Les trois curseurs sont donc déclarés une seule fois, dans _sprites.css, en `!important` : le crayon sur `*`, la main sur tout ce qui se clique ET ses descendants, le curseur texte sur les champs de saisie. Les `cursor: pointer` qui vivaient ici sont partis avec — ils ne faisaient plus rien, et ils laissaient croire qu'il fallait y penser bouton par bouton. Le seul cas qui demande encore un geste : un élément rendu cliquable par du JavaScript, sans , sans