/* ===================================================================== Jetons de conception --------------------------------------------------------------------- Les valeurs par défaut sont ci-dessous ; l'administration les remplace à chaud via /api/theme.css, chargée après cette feuille. Toute couleur d'action a été vérifiée à 4,5:1 au moins sur fond blanc, et les couleurs de texte à 7:1. ===================================================================== */ :root { /* — Couleurs ---------------------------------------------------------- DEUX DEMANDES SUCCESSIVES, ET COMMENT ELLES COEXISTENT. En v1.7.0 le client demandait « les mêmes couleurs vives que Apple ». En v1.9.1 il demande « les couleurs des logos comme point de départ ». La seconde est la plus récente et porte sur l'IDENTITÉ : c'est donc elle qui commande la couleur de marque et la couleur d'action, désormais tirées du logo (voir juste en dessous). Ce que la première a apporté reste en place, parce que c'est juste et que cela ne touche pas à l'identité : la distinction entre deux jeux de couleurs, et des neutres soignés. --color-* la valeur LISIBLE, pour le texte et les bordures ; --vivid-* la valeur VIVE, pour les aplats, les pastilles et les dégradés, jamais pour du texte sur blanc. La raison de cette séparation vaut pour n'importe quelle palette : une couleur vive posée en texte sur blanc tombe presque toujours sous 3:1 et devient illisible — le vert système d'Apple n'y tient que 1,9:1, le turquoise de notre logo 3,23:1. Chacune à sa place, donc. */ /* — LA COULEUR VIENT DU LOGO (v1.9.1) --------------------------------- Demande du client : « utilise les couleurs des logos comme point de départ ». Le logo porte un bleu marine (#16437e), un turquoise (#14a098) et un bleu clair (#22a7f0). Aucun des trois n'était la couleur d'action du site, qui restait le bleu d'apple.com — une couleur empruntée, sans lien avec la marque. TROIS CHOIX, MESURÉS ET NON DEVINÉS (ratios sur blanc, WCAG) : • ACTION #1a5fae — 6,38:1. C'est le bleu du logo éclairci : assez vif pour qu'un bouton donne envie, assez profond pour rester sérieux. Il remplace un bleu à 4,70:1, donc la lisibilité y GAGNE. • SURVOL #16437e — 9,82:1. Le marine EXACT du logo. La couleur de la marque est ainsi littéralement dans l'interface, au moment précis où l'on appuie. • ACCENT #0b7f78 — 4,86:1. Le turquoise du logo, dans sa variante lisible. C'est lui qui distingue le site Taxi sans changer la couleur d'action : les deux services restent de la même maison. Le turquoise brut (#14a098) ne tient que 3,23:1 et le bleu clair 2,67:1 : ils restent donc décoratifs, jamais du texte. */ --color-primary: #1a5fae; /* 6,38:1 — le bleu du logo */ --color-primary-dark: #16437e; /* 9,82:1 — le marine exact du logo */ --color-primary-soft: #e9f0fa; --color-primary-tint: #f5f8fd; --color-accent: #0b7f78; /* 4,86:1 — le turquoise du logo */ --color-accent-soft: #e3f4f2; --color-accent-bright: #14a098; /* décoratif uniquement — 3,23:1 */ --color-deep: #1d1d1f; /* le noir d'Apple, 17,1:1 */ --color-deep-soft: #2c2c2e; --color-bg: #f5f5f7; /* le gris d'Apple */ --color-surface: #ffffff; --color-surface-raised: #ffffff; --color-text: #1d1d1f; /* 17,1:1 sur blanc */ --color-muted: #6e6e73; /* 5,09:1 sur blanc */ --color-border: #d2d2d7; --color-border-strong: #b0b0b8; --color-focus: #1a5fae; /* systemGreen assombri jusqu'a 5,02:1 : la variante accessible publiee par Apple (#248a3d) n'atteint que 4,40:1 sur blanc, en dessous du seuil AA que le produit s'impose. */ --color-success: #14803c; /* 5,02:1 sur blanc */ --color-warning: #b25000; /* systemOrange, variante accessible */ --color-danger: #d70015; /* systemRed, variante accessible */ --color-info: #1a5fae; --color-success-soft: #e7f6ea; --color-warning-soft: #fff2e3; --color-danger-soft: #ffecec; --color-info-soft: #e8f1fd; /* Les couleurs VIVES d'Apple, telles quelles. Réservées aux aplats, aux pastilles et aux dégradés — jamais à du texte posé sur blanc. */ --vivid-blue: #007aff; --vivid-green: #34c759; --vivid-indigo: #5856d6; --vivid-orange: #ff9500; --vivid-pink: #ff2d55; --vivid-purple: #af52de; --vivid-red: #ff3b30; --vivid-teal: #30b0c7; --vivid-mint: #00c7be; --vivid-yellow: #ffcc00; --vivid-cyan: #32ade6; /* — Dégradés et effets ------------------------------------------------ Regroupés ici pour qu'un changement de palette dans l'administration les entraîne automatiquement : ils sont tous exprimés à partir des variables ci-dessus, jamais avec des valeurs écrites en dur. */ --gradient-brand: linear-gradient(135deg, #1d1d1f 0%, #2c2c2e 55%, #3a3a3c 100%); /* Le dégradé d'accent part lui aussi du logo : marine → turquoise. C'est la marque en mouvement, plutôt qu'un dégradé emprunté ailleurs. */ --gradient-accent: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-accent-bright) 100%); --gradient-vivid: linear-gradient(120deg, var(--vivid-blue) 0%, var(--vivid-purple) 45%, var(--vivid-pink) 100%); --gradient-surface: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%); --gradient-veil: linear-gradient(180deg, rgba(29, 29, 31, 0) 0%, rgba(29, 29, 31, 0.7) 62%, rgba(29, 29, 31, 0.92) 100%); /* Le verre dépoli d'Apple : très translucide, très flou. C'est ce qui rend ses barres de navigation reconnaissables au premier coup d'œil. */ --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(255, 255, 255, 0.5); --glass-blur: 20px; /* — Typographie ------------------------------------------------------- SAN FRANCISCO (v1.7.0), à la demande du client : « mets la même police San Francisco que sur le site Apple TV ». C'est bien San Francisco qui s'affiche — mais elle n'est PAS livrée avec le produit, et c'est délibéré : sa licence ne permet pas de la redistribuer sur un site. On la demande donc au système, ce que fait Apple elle-même sur ses pages. Concrètement : • sur Mac, iPhone et iPad → San Francisco, exactement ; • sur Windows → Segoe UI Variable, son équivalent le plus proche, de construction très voisine ; • sur Android → Roboto. Avantage annexe, et il n'est pas mince : plus aucun fichier de police à télécharger. Les quatre fichiers Fraunces et Manrope pesaient ensemble près de 200 Ko, chargés avant le premier texte lisible. « -apple-system » doit rester EN TÊTE : c'est le seul nom que Safari reconnaît pour obtenir San Francisco. */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", "Noto Sans", sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --font-size-base: 17px; /* la taille de texte d'Apple */ --type-scale: 128; /* Les titres d'Apple sont lourds et très resserrés : c'est ce qui leur donne leur densité. 700 et -22 millièmes reproduisent ce dessin. */ --heading-weight: 700; --line-height-body: 158; --heading-tracking: -22; --interface-zoom: 100; /* Plus d'axe variable : San Francisco n'en expose aucun par cette voie. */ --display-settings: normal; /* Échelle typographique dérivée du ratio administrable. */ --ratio: calc(var(--type-scale) / 100); --size-xs: calc(var(--font-size-base) * 0.75); --size-sm: calc(var(--font-size-base) * 0.875); --size-md: var(--font-size-base); --size-lg: calc(var(--font-size-base) * var(--ratio)); --size-xl: calc(var(--size-lg) * var(--ratio)); --size-2xl: calc(var(--size-xl) * var(--ratio)); --size-3xl: calc(var(--size-2xl) * var(--ratio)); --size-4xl: calc(var(--size-3xl) * var(--ratio)); /* — Mise en page ------------------------------------------------------ */ --page-max-width: 1240px; --page-gutter: 24px; --content-measure: 680px; --section-spacing: 72px; --grid-gap: 20px; --header-height: 72px; --sidebar-width: 244px; --form-max-width: 760px; --modal-max-width: 620px; --hero-min-height: 78vh; --workspace-min-height: 72vh; /* — Composants -------------------------------------------------------- Les arrondis d'Apple sont généreux et les boutons franchement capsulés : c'est l'autre moitié de sa signature visuelle, avec la typographie. */ --radius-card: 20px; --radius-button: 980px; --radius-input: 12px; --radius-image: 18px; --radius-pill: 999px; /* * JETON MANQUANT, AJOUTÉ EN v1.9.1. * * `--radius-md` était déjà employé par la médiathèque de l'administration * et par la page « dossier », mais n'avait jamais été défini nulle part. * `border-radius: var(--radius-md)` sans valeur est une déclaration * invalide : le navigateur la jette, et ces deux écrans affichaient des * angles VIFS là où tout le reste du produit est arrondi. Aucune erreur * n'était signalée — une variable absente ne se plaint pas. * * Sa valeur se place entre le champ (12) et la carte (20), ce qui est le * cran intermédiaire que ces écrans cherchaient. */ --radius-md: 16px; --card-padding: 22px; --control-height: 46px; --border-width: 1px; --shadow-strength: 80; --focus-ring-width: 3px; --hero-image-height: 460px; --card-image-height: 200px; /* Ombres : très discrètes, dérivées de l'intensité administrable. */ --shadow-alpha: calc(var(--shadow-strength) / 1000); --shadow-sm: 0 1px 2px rgba(13, 36, 54, calc(var(--shadow-alpha) * 1.2)); --shadow-md: 0 2px 4px rgba(13, 36, 54, calc(var(--shadow-alpha) * 0.9)), 0 8px 20px -8px rgba(13, 36, 54, calc(var(--shadow-alpha) * 1.6)); --shadow-lg: 0 4px 8px rgba(13, 36, 54, calc(var(--shadow-alpha) * 0.8)), 0 24px 48px -16px rgba(13, 36, 54, calc(var(--shadow-alpha) * 2)); /* — Espacement -------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --transition-fast: 120ms cubic-bezier(0.2, 0, 0.2, 1); --transition: 200ms cubic-bezier(0.2, 0, 0.2, 1); /* — La marque ----------------------------------------------------------- Ces quatre couleurs sont celles du LOGO. Elles ne figurent pas au catalogue des réglages et ne suivent donc pas le thème : un logo dont la couleur change avec la palette n'est plus un logo, c'est une décoration. `--brand-accent` est la couleur du dessin, `--brand-accent-text` celle du mot qui l'accompagne. Les deux diffèrent pour une raison mesurée : le turquoise du dessin tient 3,2:1 sur blanc — assez pour un tracé, pas pour un texte réduit à 16 px sur téléphone. La variante de texte tient 4,86:1, donc AA quelle que soit la taille. */ --brand-deep: #16437e; --brand-accent: #14a098; --brand-accent-text: #0b7f78; --brand-spark: #22a7f0; } /* Les DEUX sites partagent désormais la même palette et la même police. C'est ce que fait Apple : apple.com et tv.apple.com ne se distinguent pas par leur couleur mais par leur contenu. Le client a tranché dans le même sens en remettant un logo Taxi turquoise, identique à l'autre. Ce qui les différencie reste la teinte décorative des grandes surfaces — le bleu d'un côté, le turquoise de l'autre — jamais la couleur d'action, qui doit rester reconnaissable d'un site à l'autre. */ [data-site="taxi"] { --color-cta: var(--color-primary); --color-cta-dark: var(--color-primary-dark); --color-cta-soft: var(--color-primary-soft); --gradient-accent: linear-gradient(135deg, var(--vivid-teal) 0%, var(--vivid-blue) 100%); } [data-site="medical"] { --color-cta: var(--color-primary); --color-cta-dark: var(--color-primary-dark); --color-cta-soft: var(--color-primary-soft); } /* Préréglages typographiques administrables (Administration → Apparence). « APPLE » est celui livré depuis la v1.7.0 : la police du système, donc San Francisco sur matériel Apple. Les autres restent disponibles, y compris « SIGNATURE », qui rétablit les deux polices livrées jusqu'en v1.6.0 — elles sont toujours dans le produit. */ :root[data-font="APPLE"] { --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, sans-serif; --display-settings: normal; --heading-weight: 700; --heading-tracking: -22; } :root[data-font="SIGNATURE"] { --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Fraunces", Georgia, "Iowan Old Style", "Palatino Linotype", serif; --display-settings: "opsz" 96, "SOFT" 30; --heading-weight: 600; --heading-tracking: -12; } :root[data-font="MODERN"] { --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Manrope", ui-sans-serif, system-ui, sans-serif; --display-settings: normal; --heading-weight: 720; --heading-tracking: -22; } :root[data-font="SYSTEM"] { --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", sans-serif; --font-display: var(--font-sans); --display-settings: normal; --heading-weight: 680; --heading-tracking: -18; } :root[data-font="GEOMETRIC"] { --font-sans: "Avenir Next", "Century Gothic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: var(--font-sans); --display-settings: normal; --heading-tracking: -18; } :root[data-font="HUMANIST"] { --font-sans: "Segoe UI", Frutiger, "Frutiger Linotype", "Myriad Pro", ui-sans-serif, system-ui, sans-serif; --font-display: var(--font-sans); --display-settings: normal; } :root[data-font="EDITORIAL"] { --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; --display-settings: normal; } :root[data-font="ACCESSIBLE"] { --font-sans: Verdana, Tahoma, "DejaVu Sans", ui-sans-serif, sans-serif; --font-display: Verdana, Tahoma, "DejaVu Sans", ui-sans-serif, sans-serif; --display-settings: normal; --heading-tracking: 0; } /* ===================================================================== TOUT LE SITE EN CAPITALES --------------------------------------------------------------------- Demandé par le client en v1.7.2. Piloté par `data-caps`, lui-même posé depuis les réglages administrables : la bascule se fait dans Administration → Apparence, sans livraison. `text-transform` capitalise les ACCENTS (é → É, à → À, ç → Ç), ce que demande le français correct et que beaucoup de sites ratent en écrivant les majuscules à la main. Le texte source, lui, reste écrit normalement : ce qu'on copie depuis la page se recolle en minuscules, et un lecteur d'écran continue de lire des mots et non des suites de lettres. TROIS EXCEPTIONS, et elles comptent : • les champs de saisie — voir une adresse e-mail se capitaliser pendant qu'on la tape laisse croire qu'elle est mal saisie ; • les adresses, codes et références — ils se lisent caractère par caractère et la casse peut y être significative ; • le logotype, qui porte déjà sa propre casse. ===================================================================== */ :root[data-caps="ON"] body { text-transform: uppercase; } /* Les contrôles de formulaire n'héritent PAS de `text-transform` : la feuille de style du navigateur la remet à `none` sur `button`, `input`, `select` et `textarea`. Sans cette ligne, un bouton `