/* ========================================================================= LUIS MORAIS CARRELAGE — tokens.css · v2, 06/08/2026 ------------------------------------------------------------------------- Direction : AZULEJO — révisée le 06/08 sur trois arbitrages de Saadou : ① le jaune est SUPPRIMÉ du branding ② le blanc chaud devient un blanc FROID ③ titrage plus moderne Chaque choix cite son entrée dans 04-krescia/design-library/carreleur.html. ⛔ Une valeur de ce fichier ne se rouvre pas sans arbitrage écrit dans etat.md. ========================================================================= */ /* ---------- POLICES — self-hostées, jamais fonts.googleapis.com ---------- Titres : Syne (Google Fonts, libre) — variable 400→800. Géométrique aux largeurs inégales, terminaisons coupées net : c'est le registre « centre d'art », le plus contemporain des six candidats montrés le 06/08. Remplace Tanker (lettrage d'enseigne, une seule graisse, registre plus populaire). ↩︎ revenir à Tanker = changer --f-titre et le @font-face, rien d'autre. Courant : Switzer variable (Fontshare, libre) — neutre, très lisible à 19 px. ⛔ Aucune des deux n'est dans la liste des marqueurs « défaut IA ». */ @font-face{ font-family:"Syne"; src:url("assets/fonts/Syne.woff2") format("woff2"); font-weight:400 800; font-style:normal; font-display:swap; } @font-face{ font-family:"Switzer"; src:url("assets/fonts/Switzer-Variable.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; } :root{ /* ======================================================================= 1. COULEURS — AZULEJO sans jaune, papier froid ⛔ RÈGLE NON NÉGOCIABLE : une couleur = un rôle. --brique ne sert QU'aux actions et aux grands nombres ; --vert-faience QU'aux preuves ; le reste est structure. ======================================================================= */ --azul: #1B4B8F; /* couleur maîtresse : navbar, sections fortes */ --azul-profond: #0F3260; /* pied de page, bloc contact */ --blanc: #F0F3F6; /* le papier — FROID (remplace le crème #F5F1E8)*/ --brique: #B84A26; /* ACTIONS uniquement (remplace le safran) */ --brique-clair: #F2B8A3; /* la même, éclaircie, pour les fonds sombres */ --vert-faience: #2E6B5E; /* preuves : décennale, garanties */ --encre: #16171B; /* texte courant */ --encre-douce: #414750; /* texte secondaire — froid, pas brun */ --gris-joint: #C3C9D0; /* filets, séparations, joints de la galerie */ /* alias de compatibilité — l'ancien nom pointe vers le blanc froid */ --chaux: var(--blanc); --terre-cuite: var(--brique); /* Contrastes vérifiés au calcul (seuils du 00-audit) : encre sur blanc froid ..... 16,1:1 ✅ (exigé ≥ 7:1, texte courant) blanc sur azul ............ 7,7:1 ✅ blanc sur azul profond .... 11,5:1 ✅ blanc sur brique .......... 4,7:1 ✅ (bouton = UI, exigé ≥ 4,5:1) blanc sur vert faïence .... 5,6:1 ✅ brique clair sur azul ..... 5,0:1 ✅ · sur encre 10,4:1 · sur profond 7,4:1 ⛔ jamais de brique pleine sur azul (1,96:1) — utiliser --brique-clair. */ /* ======================================================================= 2. TYPOGRAPHIE Cible : 45-60 ans, mobile, plein soleil. Corps ≥ 19 px, jamais moins. ======================================================================= */ --f-titre: "Syne", Georgia, serif; --f-texte: "Switzer", system-ui, -apple-system, "Segoe UI", sans-serif; --t-h1: clamp(2.6rem, 8.5vw, 5.2rem); --t-h2: clamp(1.9rem, 5vw, 3rem); --t-h3: clamp(1.3rem, 3.4vw, 1.6rem); --t-chiffre:clamp(2.4rem, 6.5vw, 3.4rem); --t-corps: 1.1875rem; /* 19 px — plancher, pas cible */ --t-corps-l:1.3125rem; /* 21 px — chapô */ --t-petit: 1rem; --t-label: 0.75rem; /* capitales espacées uniquement */ --lh-titre: 1.02; /* Syne a un œil large : un poil plus d'air que Tanker */ --lh-corps: 1.6; --ls-titre: -0.02em; --ls-label: 0.22em; /* ======================================================================= 3. MISE EN PAGE ======================================================================= */ --container: 1080px; --gouttiere: 1.25rem; --cible-tactile: 48px; --joint: 10px; /* ⭐ la galerie-joint (dessin Figma de Saadou) : les photos sont les carreaux, ce gap est le joint, et le FOND est une photo de chape. */ --r-plat: 0; /* ⛔ AUCUN arrondi. Un carreau a des angles vifs. */ /* ======================================================================= 4. COMPOSANTS ======================================================================= */ --nav-fond: var(--azul); --nav-texte: var(--blanc); --nav-accent: var(--brique-clair); /* le mot CARRELAGE */ --nav-mention: #CFE0F5; --nav-logo-taille: 52px; --nav-logo-fond: var(--blanc); --nav-logo-marge: 11%; --btn-1-fond: var(--brique); --btn-1-texte: #FFFFFF; --btn-2-bord: var(--azul); --btn-2-texte: var(--azul); --btn-h: 56px; --preuve-fond: var(--vert-faience); --preuve-texte: var(--blanc); /* ======================================================================= 5. MOUVEMENT ⛔ La classe d'animation n'est JAMAIS écrite dans le markup. ⛔ La page reste lisible à 100 % sans JavaScript. ======================================================================= */ --transition: 220ms cubic-bezier(.2,.6,.2,1); --ease: cubic-bezier(.16,.84,.3,1); } @media (prefers-reduced-motion: reduce){ :root{ --transition: 0ms; } } /* ========================================================================= PROVENANCE — chaque choix cite sa source, sinon c'est un défaut ------------------------------------------------------------------------- Palette azulejo ......... direction A, validée Saadou 06/08. Fondement : Luis-Miguel Morais est portugais, le Portugal est le pays du carreau, et aucun des 15 sites du corpus ne joue cette carte. Suppression du jaune .... arbitrage Saadou 06/08. Papier froid ............ arbitrage Saadou 06/08 (« un blanc beaucoup plus froid et moderne »). Syne .................... arbitrage Saadou 06/08 (« une police plus moderne ») — candidat n°3 de branding/typographies. --joint + fond photo .... dessin Figma de Saadou (« photo 1 — gris, arrière plan » : le fond du mur de photos est une photo). Angles vifs ............. règle anti-« défaut IA », skill site-artisan §3. Corps ≥ 19 px, cibles ≥ 48 px, container 1080 . seuils chiffrés du skill site-artisan §3. ========================================================================= */ /* L'état de l'envoi du formulaire — annoncé aussi aux lecteurs d'écran par role="status" sur l'élément. Vert faïence pour ce qui a réussi, brique pour ce qui a échoué : les deux rôles de la palette, rien de nouveau. */ .f-etat{margin-top:10px;font-size:15px;font-weight:600;line-height:1.5} .f-etat--ok{color:var(--vert-faience)} .f-etat--ko{color:var(--brique)} /* ========================================================================= PAGES SECONDAIRES — mentions, confidentialité, cookies, merci, 404 ------------------------------------------------------------------------- ⚠️ Trouvé le 12/08 en regardant le rendu, pas le code : ces cinq pages ne chargent QUE ce fichier, et ce fichier ne contenait que des variables. Elles s'affichaient donc en Times New Roman, sans mise en page — du HTML brut montré à un client. Les styles vivent ici et pas dans chaque page : c'est le seul fichier qu'elles partagent. Les classes reprennent le nom qu'elles utilisent déjà (`btn--primaire`, `btn--secondaire`) ; l'apparence, elle, est copiée de l'accueil — même hauteur de bouton, mêmes couleurs de rôle, mêmes angles vifs. ⛔ TOUT EST PRÉFIXÉ PAR `.section`, ET CE N'EST PAS COSMÉTIQUE. Ce fichier est chargé par l'accueil AUSSI. Écrite sans préfixe, la règle `.row{margin-top:1.8rem}` s'est appliquée au `.brand .row` de la navbar et a poussé le logo de 29 px vers le bas — l'accueil n'ayant aucun `margin-top` sur ce sélecteur pour la contrer. `.section` n'existe que sur les cinq pages secondaires : c'est la clôture. Toute règle ajoutée ici la porte. ========================================================================= */ /* Le body porte le fond et la police par defaut : sans ca, un texte pose hors d'un `.section` retombe en Times. L'accueil garde la main — son