:root { /* Main brand colors */ --primary-color: #71c09b; --primary-color-selected: #4e886d; --secondary-color: #4fbfc1; --secondary-color-selected: #357d7e; --tertiary-color: #9cacd6; --light-color: #e7fafe; --dark-color: #00243a; --alert-color: #B0403E; --warning-color: #FFCD33; --font-size-title: 1.4rem; --font-size-normal: 0.8rem; --font-size-text: 0.8rem; --font-size-small: 0.6rem; --border-radius: 20px; --border-radius-small: 10px; --border-radius-xsmall: 5px; --width-container: clamp(calc(100vw - 320px), 100%, 1280px); --shadow: 0 0 10px rgba(0, 0, 0, 0.1); --dur: 220ms; --ease: cubic-bezier(.2, .6, .2, 1); } * { box-sizing: border-box; margin: 0; padding: 0; scrollbar-width: thin; } html { width: 100%; height: 100%; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } /* RTL sans changer le HTML : si est posé */ html[dir="rtl"] select { padding: 10px 10px 10px 2.5rem; background-position: left 2.25rem center, left 0.75rem center; } body { background: var(--light-color); background-size: cover; background-attachment: fixed; width: 100%; min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; margin: 0; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scrollbar-gutter: stable; } ul { list-style: none; padding: 0; margin: 0; } h1 { font-size: clamp(1rem, 2vw, 3rem); } h2 { font-size: clamp(0.8rem, 1.5vw, 2rem); } a { text-decoration: none; display: block; } button { display: block; background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; } /* Adaptation pour mobiles */ @media (max-width: 480px) { select { padding: 8px 2.25rem 8px 8px; font-size: 14px; } html[dir="rtl"] select { padding: 8px 8px 8px 2.25rem; } } @media (max-width: 768px) { body { background-attachment: scroll; } } /* ================================================================= ACCESSIBILITÉ ================================================================= */ /* Focus visible pour navigation clavier */ :focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; } /* Préférences utilisateur pour les animations */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* High-contrast / Windows forced-colors */ @media (forced-colors: active) { select { background-image: none !important; border: 1px solid CanvasText; } } /* ================================================================= PRINT ================================================================= */ @media print { * { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; } a { text-decoration: underline; } img { max-width: 100% !important; } table { border-collapse: collapse !important; } th, td { border: 1px solid #000 !important; } } /* ================================================================= SCROLLBARS - COMPATIBLE TOUS NAVIGATEURS ================================================================= */ /* Webkit (Chrome, Safari, Edge) */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: rgba(231, 250, 254, 0.1); border-radius: 50px; } ::-webkit-scrollbar-thumb { background: rgba(113, 192, 155, 0.3); /* Invisible par défaut */ border-radius: 50px; transition: background-color 0.3s ease; } /* Apparition au hover du conteneur */ body:hover::-webkit-scrollbar-thumb { background: var(--primary-color); } body:hover::-webkit-scrollbar-thumb:hover { background: var(--secondary-color); } ::-webkit-scrollbar-corner { background: transparent; } html, body { scrollbar-color: var(--primary-color) transparent; }