/* ===================================================================== Androclinique — tokens.css (design clair premium) Source unique de verite : couleur, typo, espacement, rythme. Aucune valeur brute ailleurs dans le CSS. ===================================================================== */ :root { /* ---- Neutres ----------------------------------------------------- Blanc CHAUD (#FBFAF8), pas blanc froid : sur un site medical le blanc pur donne un rendu hopital. Le texte est un bleu-nuit tres sombre, jamais du noir pur. */ --paper: #FBFAF8; --surface: #FFFFFF; --tint: #F2F6F9; --ink: #14212C; --ink-2: #3A4E5F; --muted: #6B8194; --faint: #9BADBC; --line: #E3EAEF; --line-2: #CFDBE4; /* Filet interne, plus clair que --line : separe les lignes d'une liste ou d'un tableau sans decouper le bloc. */ --line-soft: #EFF4F7; /* ---- Accent espace HOMME (defaut) -------------------------------- --accent texte, filets, boutons (7:1 sur blanc) --accent-br version lumineuse, decoratif uniquement --accent-tint fonds de blocs --accent-veil voile pose sur les photos, en composantes RVB */ --accent: #0F6E96; --accent-deep: #0B5474; --accent-br: #1B92C4; --accent-tint: #EAF4F9; --accent-hair: #C4DEEB; --accent-veil: 10, 42, 60; /* ---- Retours systeme --------------------------------------------- */ --ok: #2E7D5B; --warn: #9A5B00; --danger: #A32B2B; --ok-tint: #E7F3ED; --warn-tint: #FBF0E0; --danger-tint: #F8E9E9; /* ---- Typographie ------------------------------------------------- Cormorant Garamond en display : serif haute et contrastee, c'est elle qui porte le registre haut de gamme. Inter en corps : neutre, lisible en petit corps, excellente sur les chiffres. */ --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-data: "IBM Plex Mono", ui-monospace, monospace; /* Echelle fluide. L'ecart display/corps est volontairement large : c'est le contraste d'echelle qui fait l'elegance, pas l'ornement. */ --t--1: clamp(0.75rem, 0.73rem + 0.10vw, 0.81rem); --t-0: clamp(0.95rem, 0.92rem + 0.15vw, 1.00rem); --t-1: clamp(1.06rem, 1.00rem + 0.28vw, 1.18rem); --d-1: clamp(1.45rem, 1.22rem + 1.00vw, 2.10rem); --d-2: clamp(1.85rem, 1.38rem + 2.00vw, 2.85rem); --d-3: clamp(2.15rem, 1.48rem + 2.90vw, 3.85rem); /* Le titre de hero porte tout l'impact : on va franchement plus loin en grand ecran, tout en restant lisible sur un telephone. */ --d-4: clamp(2.95rem, 1.85rem + 4.70vw, 6.00rem); /* Interlignage : le display se resserre quand il grandit, sinon les lignes flottent ; le corps de texte respire au contraire. */ --lh-tight: 0.98; --lh-snug: 1.28; --lh-body: 1.75; --track-eyebrow: 0.20em; /* Cormorant a un dessin large : un leger negatif reserre les capitales sans coller les bas de casse. */ --track-display: -0.025em; --track-body: 0.004em; /* Cormorant s'incline joliment ; l'arabe non (voir plus bas). */ --display-style: italic; /* ---- Espacement (base 4px) --------------------------------------- Les petites valeurs restent fixes : un ecart de 8px doit valoir 8px partout. Les GRANDES respirations deviennent fluides — c'est la ou un ecran large doit donner de l'air, et un telephone ne pas gaspiller la hauteur. */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); --sp-8: clamp(2.5rem, 1.9rem + 2.2vw, 3.75rem); --sp-9: clamp(3.25rem, 2.3rem + 3.4vw, 5.25rem); /* Rythme vertical des sections : une seule variable pilote la respiration de tout le site. */ --section-y: clamp(3.5rem, 2.2rem + 5.2vw, 7.5rem); /* ---- Structure ---------------------------------------------------- */ --wrap: 90rem; --wrap-narrow: 44rem; --radius-1: 4px; --radius-2: 7px; --radius-3: 12px; --radius-4: 16px; --rule: 2px; /* Ombres en DEUX couches : un contact net et proche, plus une diffusion large et tres douce. Une ombre a une seule couche parait toujours plastique ; c'est la superposition qui donne la profondeur. */ --shadow-1: 0 1px 2px rgba(20, 33, 44, 0.05), 0 1px 8px rgba(20, 33, 44, 0.03); --shadow-2: 0 2px 6px rgba(20, 33, 44, 0.05), 0 10px 32px rgba(20, 33, 44, 0.07); --shadow-3: 0 4px 12px rgba(20, 33, 44, 0.06), 0 24px 64px rgba(20, 33, 44, 0.12); /* Ombre teintee de l'accent : reservee aux CTA, pour que le bouton principal ait l'air de flotter dans SA couleur. */ --shadow-accent: 0 2px 8px rgba(15, 110, 150, 0.14), 0 12px 28px rgba(15, 110, 150, 0.16); /* Deux courbes distinctes : une sortie douce pour ce qui apparait, un leger depassement pour ce qui reagit au doigt. */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --dur-1: 180ms; --dur-2: 320ms; --dur-3: 720ms; --header-h: 4.5rem; --z-header: 300; --z-drawer: 400; } /* ===================================================================== ESPACE FEMME — un attribut sur repeint tout le site. Aucun composant n'a de variante .card--femme a maintenir. ===================================================================== */ [data-space="femme"] { --shadow-accent: 0 2px 8px rgba(178, 106, 98, 0.14), 0 12px 28px rgba(178, 106, 98, 0.16); --accent: #B26A62; --accent-deep: #8E5049; --accent-br: #D08C82; --accent-tint: #FBF0EE; --accent-hair: #EBCFC9; --accent-veil: 74, 32, 29; } [data-space="commun"] { --accent: #0F6E96; --accent-deep: #0B5474; --accent-br: #1B92C4; --accent-tint: #EAF4F9; --accent-hair: #C4DEEB; --accent-veil: 10, 42, 60; } /* ===================================================================== ARABE — la langue change la famille ET le rythme vertical. Cormorant n'a pas de jeu arabe : on bascule display et corps sur IBM Plex Sans Arabic, qui tient les deux roles proprement. ===================================================================== */ [lang="ar"] { --font-display: "IBM Plex Sans Arabic", "Noto Naskh Arabic", system-ui, sans-serif; --font-body: "IBM Plex Sans Arabic", "Noto Naskh Arabic", system-ui, sans-serif; --lh-body: 1.90; --lh-snug: 1.50; --lh-tight: 1.30; /* Le letter-spacing negatif casse les ligatures arabes. */ --track-display: 0; --track-eyebrow: 0; /* L'arabe n'a pas d'italique typographique : le faux-italique penche les glyphes mecaniquement et abime la lisibilite. */ --display-style: normal; } @media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media (prefers-contrast: more) { :root { --line: #A8BBC8; --line-2: #7E96A6; --line-soft: #C3D2DC; --muted: #435868; --faint: #5F7688; } }