/* ============================================================================ OPAQ — jetons.css ---------------------------------------------------------------------------- Les jetons du système de design, et rien d'autre. Direction claire (plan, révision R : fond crème, très grands titres en Inter 800, accent en Fraunces italique, pilules et coins arrondis) : 1. Polices (servies par le site) et leurs replis ajustés 2. Couleurs de la marque 3. Rôles : clair par défaut, sombre dans .bloc-sombre 4. Typographie : échelle fluide, de 390 à 1440 px 5. Espacements, grille, barre du haut, formes 6. Mouvement : durées, courbes, décalages MODE, la seule requête média qui décide de la mise en page de la scène (paysage / portrait), s'écrit partout exactement ainsi, sans variante : (min-aspect-ratio: 6/5) and (min-width: 640px) (mêmes caractères dans assets/site/js/mode.js et dans les ). ============================================================================ */ /* 1. Polices ------------------------------------------------------------------ Fichiers woff2 variables, sous-ensemble latin, licences SIL OFL dans assets/f/polices-5d72b91e/. Préchargés par chaque page : Inter (titres et texte) et Fraunces italique (l'accent des titres). Fraunces droite n'est plus préchargée : elle ne se télécharge que si une page s'en sert. font-display: swap : le texte s'affiche tout de suite avec la police de repli ajustée, puis la vraie police la remplace sans saut. Ce sous-ensemble d'Inter n'a ni « ss01 » ni « cv11 » (vérifié pixel à pixel) : on ne règle donc aucune variante de glyphe (plan R.2). */ @font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/assets/f/polices-5d72b91e/inter-latin-wght-normal.woff2') format('woff2'); } @font-face{ font-family:'Fraunces'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/assets/f/polices-5d72b91e/fraunces-latin-opsz-normal.woff2') format('woff2'); } @font-face{ font-family:'Fraunces'; font-style:italic; font-weight:100 900; font-display:swap; src:url('/assets/f/polices-5d72b91e/fraunces-latin-opsz-italic.woff2') format('woff2'); } /* Replis ajustés : Arial (et Arial gras pour les titres) et Georgia, ou leurs équivalents métriques (Liberation Sans, Arimo, Gelasio), mis à la taille et aux métriques verticales des vraies polices pour que rien ne bouge à leur arrivée. Valeurs mesurées dans Chromium par scripts/polices.mjs (npm run polices), qui réécrit le bloc entre les deux marqueurs : ne pas le modifier à la main. */ /* polices:debut */ @font-face{ font-family:'Inter-repli'; font-style:normal; font-weight:100 599; src:local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo'); size-adjust:106.36%; ascent-override:91.20%; descent-override:22.57%; line-gap-override:0.00%; } @font-face{ font-family:'Inter-repli'; font-style:normal; font-weight:600 900; src:local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'), local('Arimo-Bold'); size-adjust:103.39%; ascent-override:93.82%; descent-override:23.21%; line-gap-override:0.00%; } @font-face{ font-family:'Fraunces-repli'; font-style:normal; font-weight:100 900; src:local('Georgia'), local('Gelasio'), local('Gelasio Regular'), local('Gelasio-Regular'); size-adjust:96.18%; ascent-override:101.90%; descent-override:27.03%; line-gap-override:0.00%; } @font-face{ font-family:'Fraunces-repli'; font-style:italic; font-weight:100 900; src:local('Georgia Italic'), local('Georgia-Italic'), local('Gelasio Italic'), local('Gelasio-Italic'); size-adjust:88.72%; ascent-override:110.46%; descent-override:29.31%; line-gap-override:0.00%; } /* polices:fin */ :root{ /* 2. Couleurs de la marque (inchangées) ------------------------------------------ Contrastes : anthracite sur crème 14,2:1 ; cuivre sur anthracite 6,7:1 ; anthracite sur cuivre 6,7:1. Cuivre sur crème : 2,1:1, donc JAMAIS en texte sur crème (seulement aplats, filets fins, points, la 3D). Interdits : dégradé décoratif, flou, ombre portée. */ --anthracite:#1c1c1a; --anthracite-2:#22221f; /* surface sombre à peine relevée */ --creme:#EDE9E1; --cuivre:#c89968; --cuivre-appui:#b88a5b; /* aplat cuivre pendant l'appui */ /* Encres : anthracite sur crème (plan R.1). */ --encre:#1c1c1a; /* 14,2:1 */ --encre-2:rgb(28 28 26 / .72); /* secondaire, 6,0:1 */ --encre-3:rgb(28 28 26 / .64); /* le plus discret autorisé, 4,7:1 */ --filet-encre:rgb(28 28 26 / .14); /* filets décoratifs */ --filet-encre-fort:rgb(28 28 26 / .28); /* séparateurs de listes, tableaux */ --bord-encre:rgb(28 28 26 / .6); /* bords de champs, 4,2:1 (≥ 3:1 exigé) */ /* Lumières : crème sur anthracite (blocs sombres). */ --lumiere:#EDE9E1; /* 14,2:1 */ --lumiere-2:rgb(237 233 225 / .72); /* 7,8:1 */ --lumiere-3:rgb(237 233 225 / .64); /* 6,5:1 */ --filet-lumiere:rgb(237 233 225 / .14); --filet-lumiere-fort:rgb(237 233 225 / .28); --bord-lumiere:rgb(237 233 225 / .6); /* 5,9:1 */ /* 4. Typographie -------------------------------------------------------------- Titres d'affichage : Inter 800, approche serrée, interligne tendu. Accent (le des titres) : Fraunces italique 400, à l'encre sur crème, cuivre sur bloc sombre. Texte courant : Inter 400, 17 → 19 px. Valeurs à 390 → 1440 px de large. */ --sans:'Inter', 'Inter-repli', Arial, system-ui, sans-serif; --serif:'Fraunces', 'Fraunces-repli', Georgia, serif; --fs-une:clamp(3rem, 0.9rem + 7.4vw, 8.25rem); /* h1 de l'accueil, fin de page : 48 → 121 */ --fs-tete:clamp(2.75rem, 0.8rem + 6vw, 7rem); /* h1 des autres pages : 44 → 99 */ --fs-fin:var(--fs-une); /* « Parlons de… » (plan R.6.6) */ --fs-h2:clamp(2.25rem, 1.1rem + 4.2vw, 5.25rem); /* 36 → 78 */ --fs-h3:clamp(1.375rem, 1.1rem + 1vw, 2rem); /* 22 → 32 */ --fs-chiffre:clamp(2.75rem, 1rem + 5vw, 5.75rem); /* grands chiffres (« En bref ») : 44 → 88 */ --fs-prix:clamp(3rem, 1.6rem + 4vw, 6rem); /* prix des tarifs : 48 → 83 */ --fs-lead:clamp(1.125rem, 1rem + 0.42vw, 1.375rem); /* chapeaux : 18 → 22 */ --fs-corps:clamp(1.0625rem, 0.97rem + 0.25vw, 1.1875rem);/* texte courant : 17 → 19 */ --fs-bouton:1rem; /* 16 */ --fs-petit:0.875rem; /* 14 */ --fs-reperes:0.8125rem; /* 13, capitales espacées */ --fs-menu:2rem; /* 32, liens du menu téléphone */ --fs-question:clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem); /* questions de la FAQ : 19 → 24 */ /* Graisses, approches et interlignes des titres (plan R.2). */ --g-une:800; --ap-une:-.045em; --il-une:.92; /* h1, fin */ --g-h2:780; --ap-h2:-.04em; --il-h2:.95; --g-h3:650; --ap-h3:-.02em; --il-h3:1.1; --g-chiffre:800; --ap-chiffre:-.05em; --g-em:400; --ap-em:-.015em; /* Fraunces italique : moins serrée que l'Inter */ /* Largeurs de lecture */ --mesure-h1:11ch; --mesure-lead:32em; --mesure-corps:38em; /* 5. Espacements (base 4), grille, barre du haut, formes -------------------------- */ --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px; --e-7:48px; --e-8:64px; --e-9:96px; --e-10:128px; --section:clamp(80px, 6vw + 56px, 144px); /* respiration de section, 80 → 142 */ /* Grille : 4 colonnes sous 768 px, 8 jusqu'à 1199, 12 au-delà (voir plus bas). */ --colonnes:4; --marge:20px; /* marge latérale */ --gouttiere:16px; /* entre deux colonnes */ --largeur-utile:1312px; /* 1440 − 2 × 64 */ --nav-h:60px; /* 72 px à partir de 860 px de large */ /* Formes (plan R.3) : pilules pour les boutons et les étiquettes ; coins arrondis pour les images, fenêtres, cartes et le bloc sombre de fin ; 14 px pour les champs. Les filets restent nets (1 px). Le contour de focus suit l'arrondi. */ --rayon:clamp(14px, 1.6vw, 28px); --rayon-champ:14px; --rayon-pilule:999px; /* 6. Mouvement (plan §A.2) --------------------------------------------------- Seuls transform, opacity et clip-path s'animent. Les couleurs changent d'un coup. Fermetures : 60 % de la durée d'ouverture, sans décalage. */ --d-appui:120ms; /* scale(.98) à l'appui d'un bouton */ --d-ui:350ms; /* fondus d'interface, fond de la barre du haut */ --d-voile:550ms; /* voile de survol des boutons, ouverture du menu */ --d-texte:900ms; /* entrées de texte */ --d-filet:1200ms; /* filets qui se tracent */ --d-pose:1600ms; /* images d'en-tête qui se posent */ --sortie:cubic-bezier(.16, 1, .3, 1); /* toute entrée */ --douce:cubic-bezier(.65, 0, .35, 1); /* tout changement d'état réversible */ --decalage:80ms; /* entre deux éléments d'un groupe, plafonné à 6 (480 ms) */ --suite:300ms; /* entre un titre et ses boutons */ } /* 3. Rôles ----------------------------------------------------------------------- Les composants n'emploient que ces rôles, jamais les couleurs directement : ils suivent d'eux-mêmes le fond sur lequel ils sont posés. --fond, --texte, --texte-2, --texte-3 surfaces et textes --filet, --filet-fort, --bord-controle traits --em l'italique des titres --accent un mot ou un numéro mis en avant, EN TEXTE --reperes sur-titres et repères (« 01 En bref ») --trait filets fins et soulignés de marque (jamais du texte) --focus contour de focus --barre fond de la barre du haut (posé après 8 px) --btn-* les deux boutons pilule Clair partout par défaut ; .feuille-creme force le clair à l'intérieur d'un bloc sombre. Spécificité nulle aussi (voir plus bas). */ :where(:root, .feuille-creme){ --fond:var(--creme); --texte:var(--encre); --texte-2:var(--encre-2); --texte-3:var(--encre-3); --filet:var(--filet-encre); --filet-fort:var(--filet-encre-fort); --bord-controle:var(--bord-encre); --em:var(--encre); --accent:var(--encre); --reperes:var(--encre-2); --trait:var(--cuivre); --focus:var(--encre); --barre:var(--creme); /* opaque : rien ne transparaît sous la barre */ --selection-fond:var(--anthracite); --selection-texte:var(--creme); /* Primaire : aplat anthracite, texte crème, trait final cuivre. */ --btn-plein-fond:var(--anthracite); --btn-plein-texte:var(--creme); --btn-plein-voile:#34342f; /* anthracite relevé : le crème y reste à 10,3:1 */ --btn-plein-appui:var(--anthracite); --btn-plein-trait:var(--cuivre); /* Secondaire : trait anthracite de 1,5 px, texte anthracite. */ --btn-trait-bord:var(--encre); --btn-trait-texte:var(--encre); --btn-trait-voile:rgb(28 28 26 / .07); } /* Blocs sombres (plan R.1) : la fin de page + le pied de page, d'un seul tenant, et le menu du téléphone ouvert (avec la barre du haut). Le cuivre y est permis en texte (6,7:1). :where() : liste « indulgente » (un navigateur sans :has() garde quand même .bloc-sombre) et spécificité nulle (une page peut affiner un rôle). */ :where(.bloc-sombre, html:has(.nav-menu[open]) .nav){ --fond:var(--anthracite); --texte:var(--lumiere); --texte-2:var(--lumiere-2); --texte-3:var(--lumiere-3); --filet:var(--filet-lumiere); --filet-fort:var(--filet-lumiere-fort); --bord-controle:var(--bord-lumiere); --em:var(--cuivre); --accent:var(--cuivre); --reperes:var(--cuivre); --trait:var(--cuivre); --focus:var(--cuivre); --barre:var(--anthracite); --selection-fond:var(--cuivre); --selection-texte:var(--anthracite); /* Primaire : aplat cuivre, texte anthracite ; voile crème. */ --btn-plein-fond:var(--cuivre); --btn-plein-texte:var(--anthracite); --btn-plein-voile:var(--creme); --btn-plein-appui:var(--cuivre-appui); --btn-plein-trait:var(--anthracite); /* Secondaire : trait crème, texte crème. */ --btn-trait-bord:var(--lumiere); --btn-trait-texte:var(--lumiere); --btn-trait-voile:rgb(237 233 225 / .12); } /* Grille : 768–1199 px, 8 colonnes */ @media (min-width:768px){ :root{ --colonnes:8; --marge:clamp(20px, 5vw, 64px); --gouttiere:24px; } } /* Barre du haut complète */ @media (min-width:860px){ :root{ --nav-h:72px; } } /* Grille : 1200 px et plus, 12 colonnes (référence 1440) */ @media (min-width:1200px){ :root{ --colonnes:12; --marge:64px; --gouttiere:32px; } }