/* ============================================================================================= VITADOMICILE — Feuille de style · v3 --------------------------------------------------------------------------------------------- La charte graphique v1 fait foi. Elle fixe onze couleurs, deux familles typographiques, deux rayons, l'interdiction des ombres portées sur les cartes et un dosage 60/30/10. Elle ne dit rien de la composition, du rythme vertical ni de la hiérarchie — c'est là que se joue tout ce qui suit. PARTI PRIS DE LA v3 · LE GROS CARACTÈRE ASSUMÉ Le plancher de 18 px imposé au §6 n'est pas une contrainte à contourner : c'est le brief. Cette page est lue le soir, sur un téléphone, par quelqu'un de fatigué, pour un parent qui a une cataracte. On assume donc l'échelle : peu d'éléments par écran, beaucoup d'air, un rythme vertical lent. L'élégance vient de l'espace et du trait — ce que la charte impose déjà en interdisant les ombres. CE QUE LA v2 RATAIT, ET QUI EST MESURABLE Les deux fonds alternés, --fond et --sable, ont un contraste de 1,028. L'alternance de sections était invisible : la page défilait comme un seul long bloc, sans respiration ni point d'appui. La v3 la remplace par une bande pleine largeur en --turquoise-encre (6,97 contre le fond), qui donne enfin une colonne vertébrale à la page, et réserve --sable au seul bloc portrait, où le changement de température se voit parce qu'il est isolé. CORRECTIONS D'ACCESSIBILITÉ HÉRITÉES DE LA REVUE — à ne pas défaire A1 le dégradé signature ne porte jamais de texte (contraste tombant à 1,81 côté vert) A3 dans un bloc au fond turquoise voile, les liens passent en turquoise encre A4 voile sous un texte posé sur photo : 55 %, et non 40 % + `.vita a:not(.vita-bouton)` — voir le commentaire à cet endroit, c'est ce qui empêche le bouton d'appel de redevenir invisible ============================================================================================= */ :root { /* ---- Couleurs de marque — charte p.08-09, à ne jamais compléter ------------------------ */ --turquoise: #0E9FB0; /* aplats, bandeaux, pictogrammes — jamais du texte courant */ --turquoise-profond: #0A7D8B; /* boutons et liens sur fond clair */ --turquoise-encre: #08606C; /* titres, liens sur voile, et la bande sombre de la page */ --vert: #7AD65F; /* accents uniquement — jamais de texte blanc dessus */ --vert-soin: #2A8049; /* bouton secondaire, confirmations */ --fond: #F9FBFB; /* fond de toutes les pages */ --sable: #FBF7F1; /* un seul bloc : le portrait */ --texte: #333333; /* texte courant, jamais de noir pur */ --texte-2: #5A6B6E; /* légendes, mentions, intertitres */ --turquoise-voile: #E8F7F9; /* encadrés, cartes, panneau tarif */ --vert-voile: #EDF9E6; /* messages positifs */ /* Dégradé signature — deux apparitions par page au maximum, et jamais sous du texte. */ --degrade: linear-gradient(135deg, #0E9FB0 0%, #7AD65F 100%); /* Dégradé porteur de texte blanc : 7,24 → 4,86 sur toute sa longueur (correction A1). */ --degrade-texte: linear-gradient(135deg, #08606C 0%, #0A7D8B 100%); /* ---- Typographie ---------------------------------------------------------------------- Lora ne sert qu'aux titres, aux citations et aux montants — jamais à un paragraphe, jamais tout en capitales. Inter porte tout le reste. */ --police-titre: 'Lora', Georgia, 'Times New Roman', serif; --police-texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Échelle fluide. Les bornes basses sont les tailles mobiles, les hautes les tailles de la charte. Le corps de texte, lui, ne varie pas : 19 px partout. */ --t-display: clamp(34px, 6.2vw, 60px); --t-titre: clamp(27px, 3.6vw, 38px); --t-sous: clamp(21px, 2.2vw, 24px); --t-corps: 19px; --t-intro: clamp(20px, 2.1vw, 23px); --t-montant: clamp(46px, 8.5vw, 82px); /* ---- Formes — jamais d'angle vif ------------------------------------------------------- */ --rayon-bouton: 8px; --rayon-carte: 12px; /* ---- Rythme vertical — une seule échelle, utilisée partout ------------------------------ */ --e1: .5rem; --e2: 1rem; --e3: 1.75rem; --e4: 3rem; --e5: clamp(4rem, 9vw, 7rem); /* ---- Largeurs -------------------------------------------------------------------------- */ --largeur: 70rem; /* le conteneur */ --mesure: 62ch; /* la longueur de ligne du texte courant, quelle que soit la largeur */ /* Hauteur de la barre d'appel fixe : bouton 60 + rappel 44 + écarts et marges. Valeur de repli ; le script la remplace par la hauteur MESURÉE, qui varie avec la largeur d'écran — à 320 px le libellé du bouton passe sur deux lignes et la barre grandit. */ --hauteur-barre-appel: 124px; } /* --------------------------------------------------------------------------------------------- BASE --------------------------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body.vita { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police-texte); font-size: var(--t-corps); line-height: 1.75; -webkit-font-smoothing: antialiased; /* La barre d'appel est fixe : sans cette réserve, elle recouvrirait le pied de page, et sur iOS elle passerait sous la barre système. */ padding-bottom: calc(var(--hauteur-barre-appel) + env(safe-area-inset-bottom, 0px)); } /* THÈME UNIQUE, ET DIT AU NAVIGATEUR — défaut trouvé sur la page publiée, ne pas retirer. La charte est contractuelle : ses couleurs ne s'inversent pas selon le réglage du visiteur. Mais un visualiseur ou un système en mode sombre pose `color-scheme: dark` sur le document, et les contrôles de formulaire — boutons, curseur, champs — prennent alors les couleurs SOMBRES du navigateur pour tout ce que la feuille ne fixe pas. Résultat observé : les boutons de choix du parcours, fond blanc fixé, texte laissé au navigateur → texte blanc sur fond blanc, tunnel illisible ; curseur du simulateur à la couleur du thème sombre. Deux parades, cumulées : le bloc déclare son propre schéma clair, et chaque contrôle fixe TOUTES ses couleurs. Le second point protège aussi d'un thème WordPress qui peint ses boutons (Kadence peint les