/* ============================================================================= LE FOURNIL — les tokens. LA seule source de la charte. Aucune couleur, aucune taille de police, aucun espace ne s'écrit ailleurs : une valeur en dur dans un composant est un bug. L'IDÉE : la matière d'un artisan de bouche. Le crème de la farine, le doré de la croûte, le brun sombre du four. Zéro cliché « bois + police manuscrite » : ce qui fait la chaleur ici, c'est la matière et l'espace, pas la décoration. LA SIGNATURE : la GRIGNE, l'entaille que le boulanger trace à la lame sur le pâton avant d'enfourner. On la retrouve en séparateur de section et sous les titres. C'est le seul ornement du pack, et il ne sert qu'à ça. ============================================================================= */ /* ============================================================================= LES POLICES, EMBARQUÉES DANS LE PACK (Jonas, 2026-08-05). Un pack apporte SA typographie, il ne compte pas sur celles de la machine : Georgia et Iowan Old Style ne donnent pas le même dessin sur un Mac, un Windows et un Linux, et sur Linux on tombait sur du Times. Un client qui achète une identité doit la voir, quelle que soit sa machine. Ce que le kit interdit, c'est d'APPELER un service extérieur — le doctor (check `external_cdn`) refuse tout lien vers un hébergeur de polices ou de scripts. Déposer le fichier ici et le servir depuis le pack ne pose aucun problème : c'est ce qu'on fait. NE PAS ÉCRIRE LES NOMS DE CES HÉBERGEURS DANS CE FICHIER, même en commentaire : le doctor cherche une chaîne de caractères, il ne sait pas qu'elle est commentée, et il tombe en échec. C'est arrivé ici même. Fraunces et Inter sont sous licence SIL Open Font, redistribuables. Ce sont des polices VARIABLES : un fichier couvre toutes les graisses, d'où `font-weight: 100 900`. Les italiques sont de vrais fichiers, pas une inclinaison calculée par le navigateur — la DA en fait un usage constant (le mot d'accent de chaque titre), et une fausse italique se voit. Quatre fichiers, 100 Ko en tout : moins qu'une seule photo du pack. ============================================================================= */ @font-face { font-family: 'Fraunces'; src: url('../fonts/Fraunces.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('../fonts/Fraunces-Italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/Inter.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/Inter-Italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } :root { /* ── Fonds : la farine, puis la pâte ── */ --fo-fond-0: #FEF9F1; /* le plus clair, presque blanc : sert à faire RESPIRER une section entre deux teintes soutenues (valeur donnée par Jonas) */ --fo-fond: #FAF5EC; /* crème de farine, le fond général */ --fo-fond-2: #F3E9D7; /* sections alternées, un ton plus chaud */ --fo-fond-3: #2A1F17; /* les sections « four » : texte clair dessus */ --fo-fond-4: #EEE1CF; /* la mie : nettement plus soutenu que fond-2, pour qu'une section se détache de sa voisine sans passer au sombre (Jonas, 2026-08-03) */ --fo-carte: #FFFFFF; --fo-carte-2: #FFFCF6; /* survol d'une carte */ --fo-trait: #E6D8C1; --fo-trait-fort: #CBB593; /* ── Texte ── */ --fo-txt: #2A1F17; /* brun de four, jamais du noir pur */ --fo-txt-2: #6B5744; --fo-txt-3: #9A8770; --fo-txt-clair: #F7EFE1; /* sur les fonds sombres */ /* ── Accents ── */ --fo-croute: #B9834A; /* l'accent du pack */ --fo-croute-fonce: #96662F; /* survol, texte sur crème (contraste AA) */ --fo-croute-voile: rgba(185, 131, 74, .12); --fo-braise: #B5372B; /* L'ACCENT PRINCIPAL depuis le 2026-08-03 (Jonas : plus punchy que le doré). Le doré passe en second rôle : filets, sur-titres, détails. */ --fo-braise-fonce: #8E2A20; --fo-braise-voile: rgba(181, 55, 43, .12); --fo-olive: #5A7247; /* « ouvert », les états sains */ --fo-encre: #21180F; /* le texte SUR la croûte */ /* ── Typographie ── Les deux familles sont EMBARQUÉES (cf. les @font-face en tête de fichier). Le repli système derrière n'est pas décoratif : il tient l'affichage pendant le chargement, et le jour où un fichier manque la page reste lisible au lieu de tomber en Times. FRAUNCES pour les titres : ses empattements organiques et ses chiffres elzéviriens tiennent le ton d'un artisan mieux qu'une serif de labeur, et elle est assez compacte pour qu'un titre long ne casse pas la mise en page. INTER pour le texte : neutre, dessinée pour l'écran, elle laisse la vedette aux titres. */ --fo-titre: 'Fraunces', Georgia, 'Iowan Old Style', 'Times New Roman', serif; --fo-texte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --fo-t-xxl: clamp(2.5rem, 6vw, 4.5rem); --fo-t-xl: clamp(1.9rem, 3.6vw, 2.8rem); --fo-t-l: clamp(1.3rem, 2.2vw, 1.6rem); --fo-t-m: 1.0625rem; --fo-t-s: .9375rem; --fo-t-xs: .8125rem; --fo-lh-titre: 1.08; --fo-lh-texte: 1.65; --fo-suivi-titre: -.02em; /* les serif serrent un peu en gros corps */ --fo-suivi-sur: .16em; /* les sur-titres en capitales respirent */ /* ── Rythme ── */ --fo-e-1: .25rem; --fo-e-2: .5rem; --fo-e-3: 1rem; --fo-e-4: 1.5rem; --fo-e-5: 2.5rem; --fo-e-6: 4rem; --fo-e-7: 6rem; --fo-menu-h: 86px; /* la hauteur de la capsule du menu : trois choses s'y accrochent (la barre des familles qui se colle dessous, la réserve en haut des pages intérieures, l'arrivée des ancres). Écrite une seule fois. */ --fo-section: clamp(3.5rem, 8vw, 7rem); /* le blanc entre deux sections */ --fo-large: 1180px; /* la largeur de contenu */ --fo-lecture: 68ch; /* la largeur de lecture */ /* ── Formes ── Presque droit : l'artisanat n'est pas une bulle. Seules les images sont franchement adoucies, pour évoquer la miche. */ --fo-rayon: 4px; --fo-rayon-2: 10px; --fo-rayon-img: 14px; --fo-ombre: 0 1px 2px rgba(42, 31, 23, .06), 0 6px 18px rgba(42, 31, 23, .07); --fo-ombre-haute: 0 2px 4px rgba(42, 31, 23, .08), 0 14px 34px rgba(42, 31, 23, .12); /* ── LA GRIGNE : la signature graphique du pack ── Les entailles que le boulanger trace à la lame avant d'enfourner. DEUX formes, parce qu'un même motif ne tient pas les deux emplois (constaté à la capture du 2026-08-02) : · BANDE — un dégradé répété, pour les séparateurs pleine largeur. En grand format il fait une texture de pâte, c'est exactement l'effet voulu. · MARQUE — trois entailles DESSINÉES, pour souligner un titre. En petit format le dégradé répété ne donnait que des bâtonnets alignés ; il faut de vrais traits effilés (bouts arrondis) pour lire un coup de lame. SVG en data-URI : aucun fichier, aucune requête, aucun CDN. */ --fo-grigne-bande: repeating-linear-gradient( 68deg, var(--fo-croute) 0 3px, transparent 3px 15px ); --fo-grigne-marque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 20'%3E%3Cg fill='none' stroke='%23B9834A' stroke-width='4' stroke-linecap='round'%3E%3Cline x1='6' y1='16' x2='22' y2='4'/%3E%3Cline x1='34' y1='16' x2='50' y2='4'/%3E%3Cline x1='62' y1='16' x2='78' y2='4'/%3E%3C/g%3E%3C/svg%3E"); --fo-transition: 180ms cubic-bezier(.2, .7, .3, 1); } /* Le pack respecte le réglage système : personne ne subit une animation. */ @media (prefers-reduced-motion: reduce) { :root { --fo-transition: 0ms; } }