/* ========================================================================== Lomli — jetons de design Source de vérité unique. Ne jamais écrire une couleur, une taille, un rayon ou une durée en dur ailleurs dans le projet : tout passe par ces variables. ========================================================================== */ :root{ /* --- Marque ------------------------------------------------------------- Couleurs prélevées sur le logo. Le ciel va du bleu nuit (haut) au violet (bas) : c'est un ciel vu depuis une fenêtre, l'inverser casse l'image. */ --nuit: #202870; --violet: #6D3BBE; --lavande: #9C81DC; --lavande-pale: #C9B6EC; --creme: #FFE4D8; --marine: #2E1578; --etoile: #FFF8F0; --grad-ciel: linear-gradient(180deg, #202870 0%, #6D3BBE 100%); --grad-bouton: linear-gradient(135deg, #6D3BBE 0%, #3A2F93 100%); /* --- Interface claire : app en journée + site --------------------------- */ --page: #FAF8FD; --page-alt: #F2EDFB; --carte: #FFFFFF; --filet: #E6DFF5; --encre: #2E1578; --encre-douce: #6A648F; /* --- Écran de lecture : le soir uniquement ----------------------------- Jamais de dégradé ici, et jamais de blanc pur : le blanc brille dans une chambre sombre. */ --lect-fond: #131634; --lect-surface: #1C2048; --lect-texte: #E9E5F3; --lect-texte-doux: #9E99BD; --lect-filet: #2A2F5C; /* --- États -------------------------------------------------------------- Jamais employées seules : toujours accompagnées d'un mot ou d'une forme. */ --valide: #3E8E6E; --erreur: #C0455E; --attention: #C98A2E; /* --- Typographie -------------------------------------------------------- Arpona Sans, graisses 200 / 300 / 400 uniquement. Aucun 500, 600 ou 700. Kit Adobe Fonts : le nom de famille est "arpona-sans", en minuscules. */ --f: "arpona-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --t-display: 44px; --lh-display: 1.1; --w-display: 200; --t-h1: 32px; --lh-h1: 1.2; --w-h1: 200; --t-h2: 24px; --lh-h2: 1.3; --w-h2: 300; --t-h3: 19px; --lh-h3: 1.4; --w-h3: 400; --t-corps: 17px; --lh-corps: 1.65; --w-corps: 400; --t-lecture: 20px; --lh-lecture: 1.85; --w-lecture: 300; --t-label: 15px; --lh-label: 1.4; --t-petit: 13.5px; --lh-petit: 1.5; --ls-titre: -0.02em; --ls-lecture: 0.006em; /* --- Espace, base 4 ----------------------------------------------------- */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; /* --- Rayons ------------------------------------------------------------- */ --r-s: 12px; /* puces, badges */ --r-m: 20px; /* champs de saisie */ --r-l: 28px; /* cartes, blocs de choix */ --r-xl: 36px; /* feuilles, modales */ --r-full: 999px; /* boutons, pastilles */ /* --- Ombres ------------------------------------------------------------- */ --ombre-1: 0 2px 8px rgba(46,21,120,.06); --ombre-2: 0 8px 24px rgba(46,21,120,.09); --ombre-btn: 0 6px 18px rgba(109,59,190,.30); --focus: 0 0 0 3px rgba(109,59,190,.22); /* --- Mouvement ---------------------------------------------------------- Aucun rebond, aucune élasticité. */ --t-court: 180ms; --t-long: 280ms; --courbe: cubic-bezier(.2,.8,.3,1); /* --- Cibles tactiles ---------------------------------------------------- Le parent est debout, dans le noir, à une main, à 20h45. */ --cible: 56px; --ecart-cible: 12px; /* --- Mise en page web ---------------------------------------------------- */ --max-conteneur: 1120px; --max-texte: 660px; } /* ========================================================================== Base ========================================================================== */ *{ box-sizing: border-box; } body{ margin: 0; background: var(--page); color: var(--encre); font-family: var(--f); font-size: var(--t-corps); font-weight: var(--w-corps); line-height: var(--lh-corps); -webkit-font-smoothing: antialiased; } h1{ font-size: var(--t-h1); font-weight: var(--w-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-titre); } h2{ font-size: var(--t-h2); font-weight: var(--w-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-titre); } h3{ font-size: var(--t-h3); font-weight: var(--w-h3); line-height: var(--lh-h3); } p{ max-width: 64ch; } :focus-visible{ outline: none; box-shadow: var(--focus); } @media (prefers-reduced-motion: reduce){ *{ transition: none !important; animation: none !important; } } /* ========================================================================== Composants ========================================================================== */ /* --- Boutons — un seul bouton principal par écran ------------------------ */ .btn{ font-family: var(--f); font-size: var(--t-corps); font-weight: 400; border: 0; cursor: pointer; min-height: var(--cible); padding: 0 var(--e-6); border-radius: var(--r-full); color: var(--creme); background: var(--grad-bouton); box-shadow: var(--ombre-btn); transition: transform var(--t-court) var(--courbe), box-shadow var(--t-court) var(--courbe); } .btn:hover{ transform: translateY(-1px); box-shadow: 0 9px 24px rgba(109,59,190,.36); } .btn:active{ transform: translateY(0); } .btn--secondaire{ background: none; box-shadow: none; color: var(--encre); border: 1px solid var(--lavande); } /* Réservé à « Plus tard » et « Passer », qui restent toujours visibles. */ .btn--tertiaire{ background: none; box-shadow: none; color: var(--encre-douce); padding: 0 var(--e-3); min-height: 44px; } /* --- Champ de saisie — un seul par écran --------------------------------- */ .champ{ font-family: var(--f); font-size: var(--t-corps); min-height: var(--cible); padding: 0 var(--e-5); border-radius: var(--r-m); border: 1px solid var(--filet); background: var(--carte); color: var(--encre); width: 100%; } .champ:focus{ outline: none; border-color: var(--violet); box-shadow: var(--focus); } /* --- Carte de choix : univers, compagnon, situation ---------------------- La bordure existe au repos, transparente : sinon la carte saute de 2px. */ .choix{ background: var(--carte); border: 2px solid transparent; border-radius: var(--r-l); padding: var(--e-5) var(--e-5); box-shadow: var(--ombre-1); cursor: pointer; transition: border-color var(--t-court) var(--courbe), box-shadow var(--t-court) var(--courbe); } .choix[aria-pressed="true"], .choix.est-choisi{ border-color: var(--violet); box-shadow: 0 8px 22px rgba(109,59,190,.16); } /* --- Progression d'onboarding : des points, pas une barre ---------------- */ .progression{ display: flex; gap: 9px; align-items: center; } .progression i{ width: 8px; height: 8px; border-radius: 50%; background: var(--filet); display: block; } .progression i.est-active{ background: var(--violet); width: 24px; border-radius: var(--r-full); } /* --- Écran de lecture ---------------------------------------------------- Titre, texte, une sortie discrète. Rien d'autre : pas de navigation, pas d'avatar, pas de loup, pas d'étoile, pas de compteur. */ .lecture{ background: var(--lect-fond); color: var(--lect-texte); min-height: 100dvh; padding: var(--e-8) var(--e-5); } .lecture__titre{ font-size: var(--t-h2); font-weight: var(--w-h2); color: var(--creme); margin: 0 0 var(--e-4); } .lecture__texte{ max-width: 62ch; font-size: var(--t-lecture); font-weight: var(--w-lecture); line-height: var(--lh-lecture); letter-spacing: var(--ls-lecture); text-align: left; /* jamais justifié, jamais centré */ } /* --- Ciel : accueil de l'app et hero du site ----------------------------- */ .ciel{ background: var(--grad-ciel); color: var(--creme); position: relative; overflow: hidden; } /* --- Étoile : décor seulement. Jamais cliquable, jamais dans un bouton, 3 par écran au maximum, absente de l'écran de lecture. ------------------ */ .etoile{ fill: var(--etoile); pointer-events: none; }