/* ========================================================================= NUQUE — DESIGN SYSTEM Tout ce qui fait l'identité vit ICI. Le logo et la charte définitifs se brancheront en modifiant ce seul fichier, sans toucher à une seule page. Exigence §3 du brief de direction artistique. ========================================================================= */ /* --- Typographies auto-hébergées (perf + RGPD : aucun appel à Google) ----- */ /* ⚠️ **Archivo remplace Schibsted Grotesk** — direction « 1a Éditorial ». Récupérée sur Google Fonts puis **auto-hébergée** : le CSP est `font-src 'self'`, un lien vers fonts.gstatic.com serait bloqué net, et l'appel partirait chez Google à chaque visite (RGPD). Fonte variable, axe 400→800 : un seul fichier pour les quatre graisses employées (500 à 800). Les deux `@font-face` Schibsted Grotesk plus bas ne sont plus référencés par aucun jeton. Ils sont conservés le temps de l'arbitrage : une déclaration qu'aucune règle n'emploie ne déclenche AUCUN téléchargement — elle ne coûte rien au visiteur, et elle épargne un aller-retour si l'on revient en arrière. À supprimer, avec les woff2, le jour où la direction est actée. */ @font-face { font-family: 'Archivo'; src: url('../fonts/archivo-latin.woff2') format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; src: url('../fonts/archivo-latin-ext.woff2') format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Schibsted Grotesk'; src: url('../fonts/schibsted-grotesk-latin.woff2') format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Schibsted Grotesk'; src: url('../fonts/schibsted-grotesk-latin-ext.woff2') format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Serif 4'; src: url('../fonts/source-serif-4-latin.woff2') format('woff2'); font-weight: 400 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Serif 4'; src: url('../fonts/source-serif-4-latin-ext.woff2') format('woff2'); font-weight: 400 600; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ========================================================================= DIRECTION « 1a ÉDITORIAL » — maquette v2, section par section ⚠️ **Le site change de dominante.** Il était navy avec des respirations claires ; il devient CLAIR, le navy réservé à deux sections — Financement et Réservation — et aux boutons. Le rythme tonal décrit plus bas dans `app.css` (« sombre → clair → sombre ») ne vaut donc plus : ce qui sépare désormais les sections est un filet d'un pixel, pas un aplat. ⚠️ **Trois couleurs de la maquette échouent au contraste sur fond clair**, et pour une raison mécanique : elles étaient posées sur navy dans l'ancien site, elles passent sur papier dans la nouvelle. Mesuré avant d'appliquer, formule WCAG 2.1, seuil AA : accent #2f6fed en petit texte sur #f5f4f1 .... 4,13 🔴 prix barré #98a1ad ........................... 2,38 🔴 note fine #8a94a2 ............................ 2,79 🔴 Résolution, minimale et à teinte constante : — l'accent GARDE #2f6fed **en aplat** (blanc dessus : 4,55 ✅), conforme au pixel près ; un jeton frère assombri sert quand il devient du petit texte sur clair ; — le prix barré et les notes fines reprennent `--color-cool`, déjà au système et déjà arbitré. Le projet a déjà tranché ce débat une fois, le 11 août : #8A8F98 avait été remplacé par #666B74 après mesure Lighthouse. Repropager une couleur sous le seuil défferait ce travail en silence. ========================================================================= */ :root { /* --- Couleurs — direction 1a ------------------------------------------ */ --color-navy: #0E1B2C; /* sections Financement et Réservation, boutons */ --color-navy-card: #132438; /* cartes posées SUR le navy */ --color-paper: #f5f4f1; /* fond de page — la dominante désormais */ --color-surface: #ffffff; /* cartes posées sur le papier */ --color-soft-blue: #7fa4e8; /* kickers et numéros sur navy */ /* Secondaire — labels, légendes, notes. 5,30 sur papier, 5,83 sur blanc. Reprend aussi les deux gris trop clairs de la maquette (#98a1ad pour le prix barré, #8a94a2 pour les mentions légales), qui tombaient à 2,4 et 2,8 : une mention légale illisible n'est pas une mention légale. */ --color-cool: #5b6675; /* Accent en APLAT — fond de bouton, filets. Valeur de la maquette, intacte. */ --color-volt: #2f6fed; /* ⚠️ Le VERT n'entre dans la charte que pour une chose : l'argent que le salon ne paiera pas. Demandé par Jeremy le 10 septembre — « une couleur vive, genre en vert » — pour la simulation d'aide. Vif sur le papier et lisible : 4,9:1 sur --color-paper. Il ne sert à rien d'autre, sinon il cesserait de vouloir dire « aide ». */ --color-aide: #067A4B; /* Le MÊME sens, sur l'autre fond. Le vert foncé est illisible sur le navy de l'en-tête (1,4 de contraste) : le bouton « Simulation d'aide » y prend donc sa version claire, et c'est le navy qui écrit dessus — 10,6 de contraste. Deux valeurs, une seule signification : l'argent que le salon ne paiera pas. */ --color-aide-clair: #4FD1A0; /* Le même accent quand il devient du TEXTE sur fond clair : kickers de section, en 12 px capitales. #2f6fed n'y donne que 4,13 ; celui-ci 4,52, pour un écart de teinte invisible à l'œil. */ --color-volt-text: #2467ec; /* Gris froid du fond de studio des rendus. Conservé : la maquette pose la photo sur une carte BLANCHE bordée, mais l'image elle-même garde son fond de studio. */ --color-plate: #EDEDEF; /* ⚠️ **LE SEUL ROUGE DU SITE**, et il ne sert qu'à la remise. Ajouté le 13 août à la demande de Jeremy. Toute la direction est navy/papier/accent bleu : un rouge ne s'y invite que pour la chose que le rouge signifie partout, un prix qui baisse. Ne jamais l'employer pour un message d'erreur — le tunnel et l'administration ont déjà leurs propres couleurs d'état. #c62828 et non un rouge vif : mesuré 5,11 sur le papier, contre 4,53 pour #d32f2f. Le seuil AA du petit texte est 4,5 — passer à 4,53 revient à n'avoir aucune marge, et cette pastille est en 13 px. */ --color-sale: #c62828; --color-ink: var(--color-navy); --color-ink-muted: #3d4756; /* texte courant — 8,55 sur papier */ --color-on-navy: #E8EBEF; --color-on-navy-dim: #aeb9c9; /* paragraphes sur navy — 8,73 */ --color-on-navy-faint: #7d8ba0; /* notes sur navy — 5,01 */ /* --- Filets — la direction repose dessus, pas sur des ombres ---------- */ --rule: rgba(14, 27, 44, .12); /* séparateurs de sections */ --rule-firm: rgba(14, 27, 44, .15); /* bordure des cartes */ --rule-strong: rgba(14, 27, 44, .35); /* boutons en contour */ --rule-on-navy: rgba(255, 255, 255, .12); /* --- Typographie ------------------------------------------------------ */ --font-display: 'Archivo', system-ui, sans-serif; --font-body: 'Source Serif 4', Georgia, serif; --font-util: 'Archivo', system-ui, sans-serif; /* Échelle relevée sur la maquette v2. Elle est fluide de bout en bout : `clamp()` partout où la maquette en emploie, avec SES bornes. Reproduire des paliers `@media` à la place donnerait des sauts que la maquette n'a pas — c'est le point 3 de la méthode. */ --step--3: 0.6875rem; /* 11px — labels de cotes */ --step--2: 0.75rem; /* 12px — kickers */ --step--1: 0.8125rem; /* 13px — légendes */ --step-0: 1rem; /* 16px — UI, boutons */ --step-1: 1.0625rem; /* 17px — texte sur navy */ --step-2: 1.125rem; /* 18px — chapô de section */ --step-3: 1.25rem; /* 20px — chapô du deck */ --step-4: 1.5rem; /* 24px — chiffres de specs */ --title-s: clamp(1.75rem, 3.6vw, 2.25rem); /* 28→36 — H2 clairs */ --title-m: clamp(1.875rem, 4vw, 2.5rem); /* 30→40 — H2 navy */ --title-l: clamp(2.125rem, 4.6vw, 3.375rem); /* 34→54 — H1 du deck */ --title-xl: clamp(3rem, 8vw, 4.5rem); /* 48→72 — « 5 ans » */ --step-price: clamp(2rem, 4vw, 2.5rem); /* 32→40 — le prix */ --tracking-wide: .14em; /* kickers */ --tracking-label: .1em; /* labels de specs */ --tracking-brand: .3em; /* wordmark hors bloc */ --tracking-block: .16em; /* plaque NUQUE de la fiche */ --tracking-tight: -.02em; /* grands titres (1a) */ --tracking-snug: -.015em; /* titres de section (1a) */ /* --- Espacement ------------------------------------------------------- */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.75rem; --space-8: 3.5rem; --space-9: 4.5rem; --space-10: 6rem; /* Gouttière et respiration verticale, relevées sur la maquette. */ --page-pad: clamp(1.25rem, 4vw, 3rem); /* 20 → 48 px */ --section-y: clamp(2.25rem, 5vw, 3.5rem); /* 36 → 56 px */ --section-y-navy: clamp(2.5rem, 5vw, 4rem); /* 40 → 64 px */ --gap-cols: clamp(1.75rem, 4vw, 3.5rem); /* 28 → 56 px */ --measure: 34rem; --content-max: 80rem; /* la maquette cadre à 1280 px */ --radius: 3px; /* boutons uniquement — les cartes restent à angles vifs */ --ease: cubic-bezier(.22, .61, .36, 1); }