/* ===================================================================== ECOSYSTEME.CSS — Design system partagé AS Cachalots Le squelette commun aux 3 sites. Chaque page pose sa peau via . ===================================================================== REPÈRE RAPIDE (ajouté le 08/08/2026, pour s'y retrouver sans relire tout le fichier) : Couleurs — chaque peau redéfinit ces variables, ne jamais coder une couleur en dur dans une page si l'un de ces tokens convient : --accent, --accent-d couleur de marque de la peau + variante foncée --eau bleu/cyan d'accent secondaire --bg, --surface, --surface-2 fond de page / carte / carte imbriquée --ink, --muted texte principal / texte secondaire --line bordures --eau-text, --accent-text variantes de --eau/--accent SÛRES EN TEXTE (contraste WCAG ≥4,5:1 vérifié par calcul) — utiliser CES tokens, jamais --eau/--accent bruts, dès qu'ils colorent du texte lisible. Sur skin-cup (fond sombre), ces variantes valent --eau/--accent elles-mêmes : déjà conformes, pas de double calcul nécessaire. Classes utilitaires (espacements/tailles répétés sur plusieurs pages — si un nouvel ajustement se répète 3+ fois, il mérite d'en rejoindre une plutôt que de rester en style="" local) : .mt-8 .mt-12 .mt-16 .mt-22 .mt-24 .mt-26 .mt-30 margin-top .pt-30 padding-top .center text-align:center .max-640 .max-820 max-width .text-ink .text-accent-d couleur de texte .lead-wide paragraphe d'intro large .logo-ico logo nav/pied de page 40px .section-band bandeau de section alterné .fil fil d'Ariane (nav + a + [aria-current]) Un ajustement qui ne se répète qu'une fois reste légitimement en style="" local à sa page — ce repère ne concerne que les motifs transversaux, voir /areas/cachalots-web-ecosystem.md pour l'historique complet des passes de nettoyage. ===================================================================== */ /* ---------- TOKENS DE BASE (identiques partout) ---------- */ :root{ --encre:#0B1B2B; --ardoise:#33475B; --brume:#7089A0; --nuage:#D6E2EC; --ecume:#F4F9FC; --blanc:#FFFFFF; --titre:"Sora", system-ui, sans-serif; --texte:"Inter", system-ui, sans-serif; --r-pill:999px; --r-carte:16px; --r-media:20px; --ombre:0 6px 24px rgba(11,27,43,.10); --ombre-forte:0 14px 44px rgba(11,27,43,.16); --max:1140px; /* Couleurs de marque des 3 sites. Ce ne sont PAS des couleurs de peau : elles identifient un site et restent identiques quelle que soit la peau de la page qui les affiche (pastilles de l'eco-bar et du module « famille »). */ --marque-club:#0C5FA8; --marque-ete:#FFB020; --marque-cup:#FF2E7E; } /* ---------- LES 3 PEAUX (seules les couleurs changent) ---------- */ body.skin-club{ --accent:#0C5FA8; --accent-d:#083C6E; --eau:#37A8E0; --bg:#F4F9FC; --surface:#FFFFFF; --surface-2:#EDF4FA; --ink:#0B1B2B; --muted:#54687C; --line:#D6E2EC; --on-accent:#FFFFFF; /* --eau-text : variante lisible de --eau quand elle sert de couleur de TEXTE (05/08/2026 — --eau brute est à 2,53:1 sur --bg, sous le seuil WCAG AA 4,5:1). --eau reste inchangée pour les fonds/bordures, où ce n'est pas le même calcul. */ --eau-text:#1F6E9C; --accent-text:var(--accent); } body.skin-ete{ --accent:#FFB020; --accent-d:#FF6A5B; --eau:#0FA9C4; --base-club:#0C5FA8; --bg:#FFF7EC; --surface:#FFFFFF; --surface-2:#FFF0D8; --ink:#0B1B2B; --muted:#6B5A3C; --line:#F0DCB8; --on-accent:#3A2A00; /* idem club : --eau (2,64:1) ET --accent (1,72:1) échouaient toutes deux en couleur de texte sur cette peau. Variantes assombries, même teinte. */ --eau-text:#0A6A7E; --accent-text:#8F5E0C; } body.skin-cup{ --accent:#FF2E7E; --accent-d:#FF74AC; --eau:#25D3E4; --bg:#0D1114; --surface:#161B21; --surface-2:#1F262E; --ink:#F4F9FC; --muted:#8FA0AD; --line:#242C34; --on-accent:#FFFFFF; /* déjà conformes sur fond sombre (--eau 10,40:1, --accent 5,37:1) : aucun changement */ --eau-text:var(--eau); --accent-text:var(--accent); } /* ---------- COULEURS D'IDENTITÉ DES ÉPREUVES (Six Fours Swim Cup) ---------- Ce ne sont PAS des couleurs de peau : chaque teinte identifie une distance et doit rester identique entre le planning (planning.html) et les tracés de la carte 3D (parcours-3d.html). Source unique : ne pas redéfinir en local. */ body.skin-cup{ --c-5km:#2FAE4F; /* Swim 5 — Rouv'Eau Libre */ --c-3km:#E8503A; /* Swim 3 — Open & Coupe de France */ --c-2km:#3AA4E8; /* Swim 2 */ --c-1km:#9AA7B0; /* Swim 1 & Relais 3×1000 */ --c-500m:#1C6B3C; /* Swim 500 */ --c-3x300m:#8A5CC7; /* Relais 3×300 */ --c-200m:#C8872A; /* Swim 200 — Kids */ --c-4x200m:#D84F8E; /* Relais 4×200 (tracé non couru en 2026) */ /* niveaux de difficulté des fiches d'épreuve — sémantiques, pas décoratifs */ --niv-1:#2FAE4F; /* Découverte */ --niv-2:#E8B33A; /* Intermédiaire */ } /* ---------- RESET ---------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:76px;overflow-x:clip} body{font-family:var(--texte);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--titre);line-height:1.12;letter-spacing:-.02em} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button{font-family:inherit;cursor:pointer} :focus-visible{outline:3px solid var(--eau-text);outline-offset:3px;border-radius:4px} /* ---------- ACCESSIBILITÉ & CIBLES TACTILES (partagé) ---------- Anciennement dupliqué dans le