/* ===================================================================== YAFOYE — LE SYSTÈME ===================================================================== V101.850 — POURQUOI CE FICHIER EXISTE. Le site comptait 1 052 couleurs distinctes, huit rayons d'arrondi et AUCUNE variable. C'était la cause, pas le symptôme : sans source unique, personne ne peut être cohérent, et changer une teinte demande de modifier trois cents endroits. Cinq marines se ressemblaient sans se confondre — #031B3A, #073568, #082F52, #072A57 — et trois bleus jouaient le même rôle. L'œil ne les distingue pas ; il enregistre seulement que quelque chose n'est pas rangé. TOUT EST NOMMÉ PAR SON RÔLE, jamais par son apparence. `--sur` et non `--vert` : le jour où la teinte change, le nom reste vrai et les trois cents usages suivent. CE FICHIER NE CHANGE RIEN VISUELLEMENT à son ajout. Il ne fait qu'exister. Les écrans le rejoindront un par un, chacun déployable seul. */ :root { /* --- LES SURFACES ------------------------------------------------ Du plus lointain au plus proche. La profondeur se fait désormais par opacité, jamais par une nouvelle teinte : c'est ainsi qu'on évite de recréer cinq marines. */ --fond: #F7F9FC; --surface: #FFFFFF; --surface-douce: #EEF3F9; --encre: #031B3A; --encre-douce: #5B6B7D; --trait: #DBE4EE; --voile: rgba(3, 27, 58, .06); --voile-fort: rgba(3, 27, 58, .72); /* --- LES ACCENTS ------------------------------------------------- UNE COULEUR = UNE SIGNIFICATION, sur tout le site. Le vert ne veut dire qu'une chose : vérifié par Yafoye, ou sans frais. Jamais « joli ». L'ambre : payant, ou en attente. Un utilisateur apprend ce code en trois écrans et ne le réapprend plus. C'est ce qui manquait : trois bleus se partageaient le rôle de la marque. */ --marque: #3FA9F5; --marque-sombre: #0D7EA4; --marque-fond: #EAF4FB; --sur: #0B5E37; --sur-fond: #E9F9EF; --sur-trait: #B7E3C7; --attention: #A8760A; --attention-fond: #FDF6E3; --alerte: #C0392F; --alerte-fond: #FBEDEA; /* --- LA TYPOGRAPHIE ---------------------------------------------- Sora structure, Manrope se lit. La règle tient en une phrase, et elle suffit à tenir tout le site. */ --titre: 'Sora', 'Manrope', system-ui, sans-serif; --texte: 'Manrope', system-ui, sans-serif; --t-page: 32px; /* Sora 800, interlettrage -1px */ --t-section: 22px; /* Sora 800, interlettrage -.5px */ --t-carte: 17px; /* Manrope 800 */ --t-corps: 15px; /* Manrope 400 */ --t-second: 13px; /* Manrope 400 */ --t-micro: 11.5px; /* Manrope 700 */ /* V101.857 — LE PALIER DES TRES PETITS LIBELLES. Le site employait du 7px et du 8px : sous cette taille, un texte n'est pas « discret », il est inaccessible. Mais tout remonter a 11.5px ferait deborder des pastilles concues pour du 9px. `--t-nano` est le plancher REEL : 10px, lisible sur un telephone, et compatible avec les etiquettes denses. Rien en dessous. */ --t-nano: 10px; /* Manrope 700 — etiquettes denses */ /* --- LES FORMES -------------------------------------------------- Trois rayons, pas huit. Les valeurs 11, 12, 13, 14, 16, 18 et 20 px coexistaient sans qu'aucune ne signifie quoi que ce soit. */ --r-petit: 10px; /* champs, boutons, pastilles carrées */ --r-carte: 18px; /* cartes, panneaux, fenêtres */ --r-rond: 999px; /* badges, pastilles, boutons ronds */ /* --- L'ÉLÉVATION ------------------------------------------------- UNE OMBRE ANNONCE QU'ON PEUT TOUCHER. Ce n'est pas une décoration, c'est une information. Aujourd'hui une carte d'annonce et un panneau de réglages portent la même ombre : l'œil ne sait pas ce qui est cliquable. */ --ombre: 0 8px 24px rgba(3, 27, 58, .07); --ombre-haute: 0 20px 56px rgba(3, 27, 58, .22); /* V101.858 — L'ombre de la preuve. Le badge « Vérifié » est le seul élément du site à porter du vert plein, et la seule ombre teintée de vert : c'est là qu'on dépense la hardiesse, et nulle part ailleurs. */ --ombre-preuve: 0 2px 8px rgba(11, 94, 55, .28); /* --- L'ESPACE ---------------------------------------------------- Échelle de 4. Rien entre les valeurs. L'espace vertical DIT LE LIEN entre deux éléments : un titre est à 8px de son texte parce qu'ils vont ensemble ; deux sections sont à 48px parce qu'elles ne vont pas ensemble. */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-6: 24px; --e-8: 32px; --e-12: 48px; --e-16: 64px; /* --- LE MOUVEMENT ------------------------------------------------ Une seule durée, une seule courbe. Le mouvement répond à un geste : il montre ce qui a changé. Il n'annonce jamais l'arrivée d'une section. */ --glisse: 160ms cubic-bezier(.2, .8, .3, 1); } /* Le réglage système est respecté : une personne qui a demandé moins d'animations en reçoit moins, sans perdre d'information. */ @media (prefers-reduced-motion: reduce) { :root { --glisse: 1ms linear; } } /* ===================================================================== LES CLASSES DE BASE ===================================================================== Le strict nécessaire. Ce fichier décrit le système, il ne remplace pas les feuilles de chaque écran — celles-ci le rejoindront une par une. */ .yf-carte { background: var(--surface); border-radius: var(--r-carte); box-shadow: var(--ombre); } /* Un panneau INFORME, il ne se touche pas : bordure, pas d'ombre. C'est la distinction que le site ne faisait nulle part. */ .yf-panneau { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-carte); } .yf-badge { display: inline-flex; align-items: center; gap: var(--e-1); padding: 3px 11px; border-radius: var(--r-rond); font: 800 var(--t-micro) / 1.4 var(--texte); } .yf-badge-sur { background: var(--sur-fond); color: var(--sur); } .yf-badge-attention { background: var(--attention-fond); color: var(--attention); } .yf-badge-alerte { background: var(--alerte-fond); color: var(--alerte); } .yf-titre-page { font: 800 var(--t-page) / 1.15 var(--titre); letter-spacing: -1px; color: var(--encre); margin: 0 0 var(--e-2); } .yf-titre-section { font: 800 var(--t-section) / 1.25 var(--titre); letter-spacing: -.5px; color: var(--encre); margin: 0 0 var(--e-2); } /* V101.859 — DES CARTES EN LISTE RESPIRENT. Le fondateur, sur l'ecran des reservations annulees : « separer les cartes, elles sont collees ». Elles l'etaient : `.list` n'etait style NULLE PART, donc les cartes se suivaient sans le moindre espace. L'espace vertical DIT LE LIEN entre deux elements. Colles, deux annulations distinctes se lisent comme un seul bloc — et le lecteur doit chercher ou l'une finit et ou l'autre commence. */ .list, .yf-liste-cartes { display: flex; flex-direction: column; gap: var(--e-4); } .yf-texte { font: 400 var(--t-corps) / 1.6 var(--texte); color: var(--encre); } .yf-texte-second { font: 400 var(--t-second) / 1.55 var(--texte); color: var(--encre-douce); }