/* ===================================================================== ECOSYSTEME.CSS — Design system partagé AS Cachalots Le squelette commun aux 3 sites. Chaque page pose sa peau via . ===================================================================== */ /* ---------- 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; } /* ---------- 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; } 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; } 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; } /* ---------- 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);outline-offset:3px;border-radius:4px} /* ---------- ACCESSIBILITÉ & CIBLES TACTILES (partagé) ---------- Anciennement dupliqué dans le