/* ========================================================================== DESIGN SYSTEM – Rosa Alaimo Avocat Identité récupérée de l'ancien site (AMP/Tailwind, kit Typekit csv5dhv). Objectif : rapprocher le site de cette charte d'origine. (Écrit du temps où le site tournait encore sous Divi ; la migration est terminée depuis le 2026-07-01, et le contenu Divi résiduel a été purgé le 2026-08-10.) ========================================================================== */ :root { /* --- Couleurs de marque (valeurs exactes de l'ancien site) --- */ --ra-primaire: #182135; /* bleu nuit / encre — titres, traits, bandeaux */ --ra-sombre: #020617; /* presque noir — texte courant */ --ra-secondaire: #99876c; /* or / taupe — filets, accents, soulignés */ --ra-vertparis: #768e84; /* vert-de-gris parisien — séparateurs, footer */ --ra-clair: #ffffff; /* fonds, encadrés */ /* Déclinaisons utiles */ --ra-vertparis-20: rgba(118, 142, 132, 0.20); /* fond footer */ --ra-vertparis-10: rgba(118, 142, 132, 0.10); /* survol listes services */ /* Bandeau d'appel à l'action des pages domaine. À mi-chemin entre le plein (trop sombre) et les 20 % du footer (trop faibles pour se détacher d'une page blanche) : contraste avec la page 1,65 contre 1,24 pour le footer, et le texte sombre y reste à 12,24. */ --ra-vertparis-45: rgba(118, 142, 132, 0.45); /* VERT FONCÉ — état de survol de TOUS les liens du site, et marqueur de page courante des menus (2026-08-10). Ce n'est pas une quatrième couleur de charte : c'est le vert-de-gris assombri, 70 % de --ra-vertparis + 30 % de --ra-sombre. Contraste mesuré sur blanc : 6,16. ⚠️ IL COMBLE UN TROU RÉEL DE LA PALETTE. Les traits de survol étaient en encre : le survol faisait donc passer le contraste de 3,52 à 20,17 d'un coup, et le trait noir écrasait le reste. Or entre le vert (3,52) et l'encre (20,17) la charte n'avait rien — l'or plafonne à 3,48, inutilisable comme renfort. Les transparences du vert vont toutes dans l'autre sens (45 % = 1,65 : un trait qui s'efface, donc un lien qui a l'air désactivé). Il fallait assombrir le vert, pas l'éclaircir. */ --ra-vertparis-fonce: #536563; /* (`--ra-secondaire-soft`, un or à 15 %, a été retiré le 2026-08-07 : son unique consommateur était le filet de chapitre des pages domaine, où il contrastait à 1,17 avec la page — invisible. Passé à l'or plein.) */ --ra-gris-carte: #f4f3f1; /* fond gris chaud des cartes blog */ --ra-gris-carte-hover: #e4e0d9; /* survol carte blog — creusé : l'écart précédent (#ece9e4) ne faisait que 8 unités de gris, le survol passait inaperçu */ /* Texte */ --ra-text: var(--ra-sombre); --ra-text-muted: #5b6172; /* --- Typographie --- Polices d'origine (Adobe Fonts) : Lapture Display (titres) + Eskapade (texte). Replis hérités de l'ancien site Divi : PT Serif / Fenix. */ --ra-font-heading: 'jaf-lapture-display', 'PT Serif', Georgia, serif; --ra-font-body: 'eskapade', 'PT Serif', Georgia, serif; --ra-tracking-head: -0.025em; /* interlettrage serré des titres */ --ra-line-body: 1.4; /* Échelle typographique — fluide, calée pour atteindre les tailles EXACTES de l'ancien site à ~1280px (desktop) tout en descendant proprement en mobile. Cibles desktop : body 30, emphase 48, h1 60, h2 48, h3 30, cat-menu 30, services 30, honneurs 24 (px). */ --ra-fs-body: clamp(1.25rem, 0.99rem + 1.10vw, 1.875rem); /* 20 → 30px */ /* Chapô : un cran au-dessus du corps éditorial. (Variable retirée lors de la passe « code mort » faute d'usage, rétablie ici — le chapô existe à nouveau.) */ --ra-fs-lead: clamp(1.5rem, 1.19rem + 1.33vw, 2.25rem); /* 24 → 36px */ /* DEUX VOIX TYPOGRAPHIQUES. — Éditoriale (--ra-fs-body, 30px) : accueil, listes de services, citations. Échelle affirmée de l'ancien site, pensée pour des blocs courts qu'on embrasse d'un regard. — Lecture (--ra-fs-lecture, 22px) : tout ce qui se lit d'affilée (corps des pages domaine, articles, réponses de FAQ, mentions légales). Confondre les deux aplatit la hiérarchie : à 30px de corps, un h3 à 26px passe SOUS le texte qu'il annonce et la page ne se parcourt plus. --ra-fs-courant porte la voix ACTIVE ; un conteneur de lecture la redéclare et tout son contenu suit par héritage (cf. « Contextes de lecture »). */ --ra-fs-lecture: clamp(1.125rem, 1.02rem + 0.44vw, 1.375rem); /* 18 → 22px */ /* Voix de lecture élargie — pages domaine (contenus SEO longs). Mesuré : à 22px dans une colonne de 945px, les lignes faisaient 113 caractères, très au-delà des 60-75 de confort. 26px dans 46rem ramène à 74. La colonne se resserre EN MÊME TEMPS que le corps grossit : c'est la longueur de ligne qui fatigue, pas la petitesse du texte. */ --ra-fs-lecture-large: clamp(1.25rem, 1.05rem + 0.85vw, 1.625rem); /* 20 → 26px */ --ra-mesure-lecture: 46rem; /* colonne de lecture des pages domaine */ --ra-fs-courant: var(--ra-fs-body); --ra-lh-courant: var(--ra-line-body); /* Titres DANS un contenu rédactionnel. Portés par des variables, comme le corps : un contexte de lecture les remonte en même temps que lui, sans qu'aucune règle n'ait à se battre en spécificité contre `.rich h2`. */ --ra-fs-rich-h2: clamp(1.75rem, 1.55rem + 0.90vw, 2.125rem); /* 28 → 34px */ --ra-fs-rich-h3: clamp(1.5rem, 1.42rem + 0.35vw, 1.625rem); /* 24 → 26px */ --ra-fs-emphase: clamp(1.5rem, 0.88rem + 2.65vw, 3rem); /* 24 → 48px */ --ra-fs-h3: clamp(1.5rem, 1.34rem + 0.66vw, 1.875rem); /* 24 → 30px */ --ra-fs-h2: clamp(1.875rem, 1.41rem + 1.99vw, 3rem); /* 30 → 48px */ --ra-fs-h1: clamp(2.25rem, 1.63rem + 2.65vw, 3.75rem); /* 36 → 60px */ /* Menu des domaines. 30px le mettait au niveau du H1 voisin et lui imposait 412px de large — d'où la coupure de « Droit du dommage corporel » dès que le titre s'allongeait. 26px est calé de sorte que ses TROIS lignes (interligne 1.7) fassent 132,6px, soit la hauteur exacte du H1 de l'accueil sur deux lignes (60px × 1.1 × 2 = 132px). Les deux blocs s'alignent en bas. */ --ra-fs-catmenu: clamp(1.0625rem, 0.85rem + 1.00vw, 1.625rem); /* 17 → 26px */ --ra-fs-services: clamp(1.25rem, 0.99rem + 1.10vw, 1.875rem); /* 20 → 30px */ --ra-fs-honneurs: clamp(1rem, 0.70rem + 0.90vw, 1.5rem); /* 16 → 24px */ /* --- Espacements --- */ --ra-container: 1536px; /* largeur max "megabloc" */ /* Rythme vertical des pages intérieures : air au-dessus du titre de page et avant le footer. Une seule valeur pour tous les gabarits — chacun posait la sienne en `style=` inline, d'où 128 / 80 / 48 / 32px d'air selon la page pour des titres de même taille. Le héros (accueil, pages domaine) garde délibérément le cran au-dessus (8rem) : c'est une entrée. Même palier 3rem → 6rem que les séparateurs. */ --ra-rythme-page: 3rem; /* Hauteur de l'en-tête collant. Trois valeurs MESURÉES dans le navigateur (81 / 104 / 120px) : la barre prend la hauteur du plus grand de ses deux enfants — le groupe de boutons drap, ou le wordmark et son padding haut — plus le `padding-bottom: 1.5rem` qui empêche le contenu défilant de venir toucher le wordmark. Elle est consommée par le décalage des ancres, qui atterriraient sinon SOUS la barre. (Elle servait aussi au sommaire collant des pages domaine, retiré le 2026-08-07.) ⚠️ À remesurer si l'on touche au padding du wordmark, à ce padding bas ou à la hauteur des boutons drap : une valeur fausse ici ne casse rien visiblement, elle fait juste atterrir les ancres au mauvais endroit. */ --ra-entete-h: 81px; /* --- Divers --- */ --ra-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); /* Durée des changements d'ÉTAT (panneau qui se déplie, filet qui apparaît), par opposition aux retours de survol. 150ms convient à un changement de couleur, qui est instantané par nature ; sur une hauteur qui se déplie, le mouvement devient un saccadement. 280ms laisse l'œil suivre la course sans que l'attente se sente. */ --ra-transition-panneau: 280ms cubic-bezier(0.4, 0, 0.2, 1); /* Autorise les transitions VERS `auto` (hauteur d'un accordéon qui s'ouvre). ⚠️ Posé sur :root et non sur le composant : la propriété est héritée, et elle doit couvrir l'élément animé ET ses ancêtres. Elle ne produit aucun effet là où aucune transition ne vise `auto` — c'est-à-dire partout ailleurs sur ce site. */ interpolate-size: allow-keywords; } @media (min-width: 768px) { :root { --ra-entete-h: 104px; } } @media (min-width: 1024px) { :root { --ra-rythme-page: 6rem; } } @media (min-width: 1280px) { :root { --ra-entete-h: 120px; } }