/* ============================================ DESIGN TOKENS - ROSES & METS ============================================ */ /* === POLICES === Les fichiers de police vivent avec les familles qui les nomment, plus bas dans --police-*. Ils étaient déclarés dans style.css jusqu'au 2026-09-17 : les pages 404 et de maintenance, qui ne chargent que ce fichier-ci, retombaient alors sur une police système. */ @font-face { font-family: 'Satisfy'; src: url('../assets/fonts/satisfy-v22-latin-regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Supreme'; src: url('../assets/fonts/Supreme-Variable.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; } :root { /* === COULEURS === Deux couches (ADR 0018). Les matières, nommées par ce qu'elles sont, d'abord ; les rôles, plus bas, sont les seuls noms que les règles appellent. */ /* === MATIÈRES CALCULÉES (ADR 0019) === Les valeurs dérivent de la règle ci-dessous, et la section 14 de verifier.sh les recalcule : une retouche à la main échoue. Seuls les crans employés sont déclarés ; un cran nouveau se calcule, il ne se choisit pas. règle : neutre H86 C0.012 constante règle : sauge H118 C0.05 règle : corail H30 C0.15 crans : 50=0.975/0.12 100=0.94/0.25 200=0.87/0.5 300=0.78/0.8 400=0.68/0.95 500=0.58/1 600=0.49/0.92 700=0.41/0.8 800=0.33/0.68 */ --blanc: #FFFFFF; --neutre-50: #FAF6EE; --neutre-100: #EFEBE2; --neutre-200: #D8D4CC; --neutre-600: #636059; --neutre-700: #4D4A43; --sauge-50: #F6F7F3; --sauge-300: #B5BB9F; --sauge-600: #5E6446; --sauge-700: #484E35; --corail-50: #FFF4F2; --corail-200: #FEC4BA; --corail-600: #A03A2D; --corail-700: #7F2A1F; /* === TYPOGRAPHIE === */ /* Familles de polices */ /* Satisfy porte deux rôles : l'affiche (titre du hero, pages d'erreur) et le manuscrit (citations du chef, prix, valeurs). Le logo est un SVG. */ --police-affiche: 'Satisfy', cursive; /* titre du hero, pages d'erreur */ --police-manuscrite: 'Satisfy', cursive; /* citations, prix, valeurs - style personnel */ --police-corps: 'Supreme', sans-serif; /* tout le reste - lisibilité */ /* === ÉCHELLE TYPOGRAPHIQUE CALCULÉE (plan du 2026-10-08) === La matière des tailles : un cran vaut la base multipliée par le rapport élevé à son rang, arrondi au pixel, écrit en rem ; le corps est le cran 0. La section 16 de verifier.sh les recalcule : une retouche à la main échoue. Seuls les crans employés sont déclarés ; un cran nouveau se calcule, il ne se choisit pas. Rapport 1,125 depuis le 2026-10-09 : le rapport 1,2, retenu la veille, n'avait aucun cran entre 13 et 16 px, et notes, boutons et étiquettes n'avaient le choix qu'entre trop petit et aussi gros que le texte (ADR 0020, amendement). règle : base 16 rapport 1.125 */ --echelle-moins-1: 0.875rem; /* 14px */ --echelle-0: 1rem; /* 16px */ --echelle-1: 1.125rem; /* 18px */ --echelle-2: 1.25rem; /* 20px */ --echelle-3: 1.4375rem; /* 23px */ --echelle-5: 1.8125rem; /* 29px */ --echelle-7: 2.25rem; /* 36px */ --echelle-9: 2.875rem; /* 46px */ --echelle-11: 3.625rem; /* 58px */ --echelle-16: 6.5625rem; /* 105px */ /* Tailles de texte, nommées par le niveau du texte (ADR 0018) : les seuls noms que les règles appellent. Chacune prend un cran de l'échelle. Trois niveaux de texte courant, et pas davantage : le corps pour tout paragraphe qu'on lit, chapô compris ; la note, un cran dessous, pour les encarts, le consentement et les messages ; la légende pour les seules étiquettes. Sur mobile, un titre prend le niveau du dessous. */ --taille-legende: var(--echelle-moins-1); /* libellés, dates, copyright */ --taille-note: var(--echelle-0); /* encarts, consentement, messages du formulaire, sous-titre du hero */ --taille-corps: var(--echelle-1); /* tout paragraphe, chapô compris ; texte des boutons */ --taille-accent: var(--echelle-2); /* un cran sur le corps : titres d'accordéon sur mobile, textes de la formule, messages d'erreur, initiale des avis */ --taille-titre-carte: var(--echelle-3); /* titres des cartes et des blocs (services, contact, modales, accordéon) */ --taille-manuscrit: var(--echelle-3); /* prix, citation, valeurs, en Satisfy */ --taille-manuscrit-mobile: var(--echelle-2); /* titres des valeurs sur mobile, en Satisfy */ --taille-glyphe: var(--echelle-3); /* « + » de l'accordéon, croix, cœur */ --taille-sous-chiffre: var(--echelle-3); /* total sous la note des avis */ --taille-titre-secondaire: var(--echelle-5); /* titres de section sur mobile, titres de la page carte, des modales, des pages d'erreur */ --taille-titre-principal: var(--echelle-7); /* titres de section sur ordinateur */ --taille-titre-page-mobile: var(--echelle-7); /* titre du hero et de la page carte, sur mobile */ --taille-chiffre: var(--echelle-7); /* la note des avis */ --taille-titre-page: var(--echelle-9); /* titre du hero et de la page carte, tablette et ordinateur */ --taille-affiche: var(--echelle-11); /* code des pages d'erreur */ --taille-decoration: var(--echelle-16); /* décoration des pages d'erreur */ /* Poids de police. Supreme est une face variable (100 à 800, ADR 0024) : toute graisse de cette plage a son dessin, et la section 17 de verifier.sh vérifie chaque rôle contre les fichiers de sa propre police. Satisfy n'en a qu'une, le 400. Depuis le 2026-10-09, les titres passent au 700 à la demande du fondateur, Supreme en 600 paraissant trop maigre ; les libellés restent au 500, le texte au 400, l'insistance au 600. */ --graisse-courante: 400; /* texte courant ; langue inactive */ --graisse-manuscrite: 400; /* Satisfy n'existe qu'en une graisse : jamais de gras */ --graisse-libelle: 500; /* libellés, liens de navigation, du pied de page et du contact */ --graisse-titre: 700; /* titres, intitulés en gras */ --graisse-bouton: 700; /* texte des boutons, détaché des titres */ --graisse-titre-carte: 700; /* titres des cartes de service */ --graisse-actif: 800; /* langue active, en marque ; l'inactive en graisse courante */ --graisse-insistance: 600; /* et : un cran sous les titres, choix du fondateur le 2026-10-09 */ /* Trois hauteurs de ligne, la matière des interlignes (plan du 2026-10-08) : six valeurs voisines s'y sont ralliées. */ --ligne-serree: 1.25; /* titres, textes en Satisfy */ --ligne-courante: 1.5; /* corps, cartes, citation, accroche */ --ligne-ample: 1.75; /* lecture longue */ /* Interlignes, nommés par le texte qu'ils portent (ADR 0018). Les valeurs `1` et `normal`, mécanique et mot-clé, restent écrites en clair. */ --interligne-corps: var(--ligne-courante); --interligne-corps-carte: var(--ligne-courante); /* description des cartes de service */ --interligne-lecture: var(--ligne-ample); /* textes longs : intro, modales, restaurant */ --interligne-chapo: var(--ligne-courante); /* accroche du hero */ --interligne-titre: var(--ligne-serree); /* titres des cartes de service */ --interligne-citation: var(--ligne-courante); /* citation du chef, en Satisfy */ --interligne-manuscrit: var(--ligne-serree); /* titres des valeurs, en Satisfy */ --interligne-manuscrit-mobile: var(--ligne-serree); /* === APPROCHES DE LETTRES === Rapatriées le 2026-10-07 (ADR 0018). Les remises à 0 restent en clair, comme toute mécanique. */ --approche-affiche: -0.02em; /* titre du hero, en Satisfy */ --approche-sous-titre: 0.15em; /* sous-titre du hero, en capitales */ --approche-langue: 0.03em; /* boutons de langue */ --approche-selecteur-langue: 0.04em; /* déclencheur du menu de langue */ /* === EFFETS === Opacités, zoom et angle qui sont des choix de design, pas de la mécanique. */ --opacite-separateur: 0.4; /* séparateur des boutons de langue */ --opacite-decoration: 0.3; /* décoration des pages d'erreur */ --zoom-survol-image: 1.05; /* image de galerie au survol */ --zoom-survol-coeur: 1.3; /* cœur du pied de page au survol */ --angle-degrade-erreur: 135deg; /* fond des pages d'erreur */ /* === CIBLES TACTILES === Deux seuils, qui ne disent pas la même chose. 24px est une obligation (WCAG 2.2 AA, critère 2.5.8) ; 44px une recommandation (niveau AAA et règles des systèmes tactiles). On choisit par rôle plutôt qu'uniformément : le confort là où l'on navigue, le minimum là où l'on arrive en fin de course. La cible n'est pas la boîte visible : l'étendre par un pseudo-élément évite d'emporter le bord de l'élément avec elle. */ --cible-tactile-confort: 44px; /* === TAILLES DE PICTOGRAMME === L'icône est ce qu'on voit, la cible tactile ce qu'on touche : les deux ne se confondent pas. Un pictogramme de 24px peut vivre dans une cible de 44px sans être étiré. */ --icone-contact-mobile: 18px; --icone-contact: 20px; /* pictogrammes de contact, téléphone d'en-tête */ --icone-reseau: 24px; /* réseaux sociaux, en-tête et pied de page */ --icone-avatar: 40px; /* avatar d'un avis client */ --icone-valeur-mobile: 60px; --icone-valeur: 80px; /* pictogramme de valeur, à partir de la tablette */ /* === TRAITS ET CALES OPTIQUES === Ajustements fins qui ne suivent pas l'échelle d'espacement, parce qu'ils corrigent une perception et non un rythme. Chacun est nommé par ce qu'il corrige, jamais par sa taille. */ --filet-encart: 3px; /* trait vertical des encarts : note restaurant, phone-notice */ --cale-optique: 2px; /* décalage fin : alignement d'icône, écart d'étoiles, survol */ --cale-fine: 5px; /* écart interne du sélecteur de langue */ --cale-detachement: 6px; /* détachement d'un menu sous son déclencheur, et son rembourrage */ --bascule-burger: 12px; /* course des barres du menu mobile vers la croix */ --retrait-hors-ecran: 100px; /* position du lien d'évitement tant qu'il n'a pas le focus */ --cale-case-a-cocher: 0.2em; /* aligne la case sur la première ligne de son libellé */ /* === GABARIT DE L'EN-TÊTE === La hauteur de l'en-tête fixe sert au calcul du décalage de défilement : une ancre doit s'arrêter sous lui, pas dessous. La formule vit dans le CSS plutôt que dans un commentaire, pour qu'elle reste vraie. */ --hauteur-entete: 4.5rem; /* 72px à la taille de police par défaut ; en rem pour suivre une police agrandie, comme le contenu de l'en-tête */ /* === LARGEUR DU CONTENU === Seule dimension de conteneur réellement transversale : elle vaut pour le conteneur principal comme pour celui de l'en-tête, et doit rester identique aux deux, par défaut comme sur grand écran. Les hauteurs et largeurs propres à un bloc restent locales, voir « Gabarits de conteneur » dans DESIGN.md. */ --largeur-contenu: 1280px; /* largeur du contenu par défaut */ --largeur-contenu-grand-ecran: 1400px; /* à partir du grand écran */ /* === ESPACEMENTS === */ /* Une échelle, jamais un usage (ADR 0018, profil site-web du socle). Sept crans depuis le 2026-10-07 : 96px et 128px ne servaient plus qu'à la marge basse de la section des avis, ramenée à celle des autres sections. Valeurs de la grille de Tailwind 3.4.17. */ --espace-1: 0.25rem; /* 4px */ --espace-2: 0.5rem; /* 8px */ --espace-3: 1rem; /* 16px */ --espace-4: 1.5rem; /* 24px */ --espace-5: 2rem; /* 32px */ --espace-6: 3rem; /* 48px */ --espace-7: 4rem; /* 64px */ /* === TRAITS === Épaisseurs de bordure et de contour, nommées par emploi. */ --trait-bordure: 1px; /* bordure ordinaire */ --trait-appui: 2px; /* bordure qui doit se voir : bouton, champ en erreur */ --trait-focus: 2px; /* contour de focus clavier */ --trait-alerte: 4px; /* filet gauche des alertes de modale */ /* === OMBRES === Trois élévations, la matière (2026-10-08) : ce qui est posé sur la page, ce qui flotte au-dessus, ce qui la recouvre. Les valeurs brutes y sont à leur domicile : c'est ici, et nulle part ailleurs, qu'une couleur ou une distance s'écrit. Les rôles, nommés par leur emploi (ADR 0018), sont les seuls noms que les règles appellent. */ --elevation-posee: 0 8px 24px rgba(0, 0, 0, 0.1); --elevation-flottante: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --elevation-recouvrante: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --ombre-carte-hero: var(--elevation-posee); --ombre-flottante: var(--elevation-flottante); /* menu de langue, bandeau des cookies */ --ombre-bouton-survol: var(--elevation-flottante); /* bouton des pages d'erreur */ --ombre-panneau: var(--elevation-recouvrante); /* menu mobile */ --ombre-modale: var(--elevation-recouvrante); --anneau-focus: 0 0 0 3px rgba(94, 100, 70, 0.2); /* --sauge-600 à 20 % */ /* === RÔLES DE COULEUR === Les seuls noms de couleur que les règles appellent. Une famille, un sens (ADR 0019) : le neutre pour le texte, les fonds et les bordures, la sauge pour la marque et ce qui se clique, le corail pour le signal et la mise en avant. Vingt et un rôles depuis le 2026-10-07, cinquante-neuf avant ; la correspondance est dans l'historique git (étiquette avant-degraissage). */ --texte: var(--neutre-700); --texte-attenue: var(--neutre-600); --marque: var(--sauge-600); /* titres, liens, boutons, icônes, pied de page */ --marque-survol: var(--sauge-700); /* survols de la marque ; le cran 700 sert aussi à --sur-pastille */ --marque-profonde: var(--sauge-700); /* bande basse du pied de page, rétablie le 2026-10-09 */ --surface-douce: var(--sauge-50); /* encart, succès, survol du bouton secondaire : sur fond blanc */ --filet-doux: var(--sauge-300); /* bande de l'encart d'information, contour du succès, séparateur */ --signal: var(--corail-600); /* réservation, prix, étoiles, erreurs, mise en avant */ --signal-survol: var(--corail-700); --mise-en-avant-fond: var(--corail-50); --mise-en-avant-contour: var(--corail-200); --surface-page: var(--blanc); /* fond de page ; en-tête et carte du hero, blancs depuis le 2026-10-10 ; champs, modales */ --surface: var(--neutre-50); /* cartes ; fond et barres de la page carte */ --surface-appuyee: var(--neutre-100); /* survol des cartes, vignettes, bouton de fermeture */ --bordure: var(--neutre-200); --surface-pastille: var(--neutre-200); /* ronds des initiales d'avis (sur --surface) et des réseaux de l'en-tête (sur --surface-page) */ --sur-pastille: var(--sauge-700); /* initiale d'avis sur son rond */ --sur-marque: var(--neutre-50); /* texte et pastilles sur le fond de marque */ --sur-marque-survol: var(--neutre-100); --sur-action: var(--blanc); /* texte des boutons pleins */ --voile-fort: rgba(0, 0, 0, 0.7); /* sans matière : un noir translucide */ --voile-leger: rgba(0, 0, 0, 0.15); /* Contrastes des rôles de texte sur le fond où ils s'affichent, formule WCAG 2. Chaque ligne est recalculée par la section 10 de verifier.sh, qui échoue si un ratio ne correspond plus aux couleurs, ou s'il est écrit sous une forme qu'elle ne lit pas. Tous au seuil AA depuis le 2026-10-07 : les écarts acceptés le 2026-07-29 ont disparu avec la charte calculée. contraste : --texte sur --surface-page = 8,84:1 contraste : --texte sur --surface = 8,20:1 contraste : --texte-attenue sur --surface-page = 6,27:1 contraste : --texte-attenue sur --surface = 5,82:1 contraste : --texte-attenue sur --surface-douce = 5,83:1 contraste : --marque sur --surface-page = 6,20:1 contraste : --marque sur --surface = 5,75:1 contraste : --marque sur --surface-douce = 5,76:1 contraste : --marque sur --surface-appuyee = 5,21:1 contraste : --marque-survol sur --surface-page = 8,69:1 contraste : --sur-marque sur --marque = 5,75:1 contraste : --sur-marque-survol sur --marque = 5,21:1 contraste : --sur-marque sur --marque-profonde = 8,06:1 contraste : --sur-marque-survol sur --marque-profonde = 7,30:1 contraste : --sur-action sur --marque = 6,20:1 contraste : --sur-action sur --signal = 6,69:1 contraste : --signal sur --surface-page = 6,69:1 contraste : --signal sur --surface = 6,21:1 contraste : --signal sur --mise-en-avant-fond = 6,21:1 contraste : --signal-survol sur --mise-en-avant-fond = 8,64:1 contraste : --sur-pastille sur --surface-pastille = 5,88:1 */ /* === TRANSITIONS === */ /* Nommées par rôle, et non par vitesse : « rapide » ou « lent » ne dit pas à quoi la durée sert, et deux valeurs proches finissent par diverger sans que personne sache laquelle employer. Les crans jamais employés ont été retirés le 2026-08-28 (150ms et 500ms) : un jeton déclaré et jamais employé est une décision fantôme. */ --transition-etat: 300ms ease; /* survols, apparitions, changements d'état */ --transition-suivi: 200ms ease; /* fondu court d'un élément qui suit le doigt */ --transition-accordeon: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* ouverture et fermeture d'un panneau */ /* Durées d'animation, distinctes des transitions : une animation se joue seule, une transition répond à un changement d'état. */ --duree-battement: 600ms; /* battement du cœur du pied de page */ --duree-explosion: 2s; /* dispersion des cœurs, easter egg */ /* === LARGEURS MAXIMALES === */ --largeur-modale: 768px; --largeur-lecture: 768px; /* colonne de lecture : la page carte */ --largeur-menu-mobile: 400px; /* === PLANS === Valeurs de z-index, nommées par ce qu'elles superposent. */ --plan-menu-langue: 200; --plan-ancres: 200; /* barre d'ancres de la carte, collée en haut */ --plan-bandeau: 1000; /* bandeau des cookies */ --plan-barre-edition: 1000; /* barre du personnel, en bas de la carte */ --plan-entete: 1020; --plan-modale: 1050; --plan-message: 1050; /* message d'une action, au-dessus de la barre */ --plan-particules: 1070; /* cœurs du pied de page */ --plan-evitement: 9999; /* lien d'évitement : au-dessus de tout */ } /* === FAMILLES SANS JETON, CHACUNE AVEC SA RAISON === Le profil site-web du studio en attend treize. Quatre n'ont pas de jeton, et c'est voulu ; le détail vit dans DESIGN.md, « Couverture du système ». Aucun jeton de rayon : coins carrés partout depuis le 2026-10-07, et les deux exceptions rondes sont des cercles, qui ne sont pas un cran d'échelle. Aucun jeton de point de rupture : var() est interdit dans une media query, les valeurs vivent donc dans les @media, seul domicile possible. Aucune mesure de ligne : les largeurs de lecture sont portées par les gabarits de bloc, qui restent locaux. Aucun jeton de marque : le logo et la rose sont des fichiers SVG, rangés dans assets/images/logo/, et non des valeurs. */