/************************************************ * * * shared.css — Feuille de style partagée * * Convergence Human & Technology * * * * Auteur : Fabien Conéjéro / FC84 * * Dépôt : https://github.com/ * * convergence-human-technology * * Licence : Copyright © 2026-2060 * * Convergence Human & Technology * * Tous droits réservés * * * ************************************************ * * * Ce fichier CSS est le résultat du travail * * cumulatif de toutes les sessions de * * développement du site Convergence. * * * * Il intègre : * * • Le dégradé radial cercle parfait * * (3 techniques empilées — IE6 → 4K) * * • Normalize.css complémentaire * * • Globalize.css (EULA propriétaire) * * • Probalize.css (EULA propriétaire) * * • Menu navigation glassmorphism * * • Loader 3 secondes * * • Animation halo * * • Section FAQ * * • Media queries responsive * * (mobile 320px → TV 5K) * * • WCAG 2.2 AAA scrollbar * * * ************************************************ * * * ★ GLOBALIZE.css — LICENCE PROPRIÉTAIRE * * ★ PROBALIZE.css — LICENCE PROPRIÉTAIRE * * * * Seul Fabien Conéjéro peut utiliser * * Globalize.css et Probalize.css. * * Toute autre personne doit obtenir une * * autorisation écrite préalable. * * Sans cette autorisation, même lire le * * code et le recopier constitue une * * contrefaçon (CPI art. L.335-2 France). * * * * Contact : convergence-tech@proton.me * * * ************************************************/ /* ==================================================================== PALETTE DE COULEURS — CHARTE GRAPHIQUE CONVERGENCE ==================================================================== COULEUR 1 — Centre du dégradé (point lumineux) Cyan électrique clair → #7be8ff Correspond au halo lumineux de la silhouette dans les visuels COULEUR 2 — Zone intermédiaire (transition) Bleu cobalt intermédiaire → #1a4a8a Le bleu "espace" visible autour du cercle dans le logo COULEUR 3 — Bords / extrémités (profondeur maximale) Bleu marine nuit profond → #010c1e La couleur de fond des coins dans tous les visuels Convergence COULEUR ACCENT → #4dd4f0 (cyan principal interface) ==================================================================== */ /* ==================================================================== ╔══════════════════════════════════════════════════════════════════╗ ║ TRAVAIL SUR LE DÉGRADÉ : TOUJOURS D'UNE FORME CIRCULAIRE ║ ║ (LE CERCLE PARFAIT) SUR TOUS LES ÉCRANS ║ ╚══════════════════════════════════════════════════════════════════╝ Objectif : rendre le dégradé toujours d'une forme circulaire (le cercle parfait) et centré et fixé sur toute taille d'écran. Pourquoi ce travail ? Car le dégradé circulaire se déforme en ellipse verticalement ou horizontalement, selon la largeur des différents types d'appareil : mobile, tablettes, PC, TV. Architected multi-layered CSS solutions for perfect circular gradient. La solution pro en 2026 combine 3 techniques en cascade : 1. circle keyword (base, IE9+) 2. background-size: 200vmax 200vmax — le carré parfait via vmax (Chrome 26+, FF19+) 3. ::before pseudo-élément avec max(100vw, 100vh) — le plus robuste (Chrome 79+, FF75+) Solution complète : Voici l'explication du problème et des 3 techniques empilées : Pourquoi ça se déformait en ellipse ? radial-gradient(ellipse at center, ...) calcule son rayon proportionnellement aux dimensions du conteneur. Sur un 16:9, le rayon horizontal est 1,78× plus grand que le vertical → ellipse aplatie. Sur un mobile 9:19, c'est l'inverse. Les 3 techniques empilées (de la moins à la plus récente) : [A] circle farthest-corner sur le body — remplace ellipse par le mot-clé circle, ce qui force une forme ronde géométriquement. Mais le cercle reste dimensionné selon les axes du viewport, donc il peut quand même paraître "large" sur ultrawide. Fallback IE10+. [B] background-size: 200vmax 200vmax — vmax = 1% de la plus grande dimension. On donne au dégradé une taille carrée de 200vmax × 200vmax centrée. Sur un carré, circle = cercle visuel parfait, quel que soit le ratio de l'écran. Chrome 26+, FF 19+, IE11. [C] html::before avec max(200vw, 200vh) — un pseudo-élément invisible, positionné fixe et centré, dont la taille est calculée par max() pour toujours être un carré parfait. Le dégradé appliqué dessus est donc toujours un cercle mathématiquement exact. Chrome 79+, FF 75+. @supports (width: max(...)) rend le body transparent pour que seule cette technique s'affiche sur les navigateurs modernes. _____ background-size: 100% → remplacé par 200vmax 200vmax — c'est le cœur de la correction cercle parfait. Présent dans la nouvelle solution : overflow: auto → overflow-x: hidden; overflow-y: auto -webkit-font-smoothing: antialiased font: 1em 'Helvetica Neue', Helvetica line-height: 180% color: rgba(255,255,255,0.85) margin: 0 text-shadow background-attachment: fixed height/width: 100% → min-height: 100%; width: 100% -moz-radial-gradient(center, ...) FF3.6-15 -webkit-radial-gradient(center, ...) Chrome10-25/Safari5.1-6 radial-gradient(...) W3C standard filter: progid:DXImageTransform.Microsoft.gradient(...) IE6-9 background-color: #010c1e fallback couleur unie IE6 ==================================================================== */ /* ==================================================================== BALISE HTML ==================================================================== - Sert de conteneur racine : doit occuper au moins 100% de la fenêtre - position:relative est indispensable pour que le pseudo-élément ::before (solution cercle parfait) puisse se positionner correctement en arrière-plan avec z-index ==================================================================== */ html { min-height: 100%; /* Hauteur minimale = hauteur complète de la fenêtre */ position: relative; /* REQUIS : active le contexte de positionnement pour le pseudo-élément ::before ci-dessous */ } /* ==================================================================== BALISE BODY ==================================================================== Le body lui-même est transparent : c'est le pseudo-élément html::before qui affiche le dégradé. Cette séparation permet d'avoir le fond totalement fixe (ne défile pas) sans effets de bord sur le scroll. Les fallbacks pour IE sont définis ici en arrière-plan secondaire. ==================================================================== */ body { /* ------------------------------------------------------------------ RESET ET MISE EN PAGE DE BASE ------------------------------------------------------------------ */ margin: 0; /* Suppression de la marge par défaut du navigateur */ padding: 0; /* Suppression du padding par défaut */ padding-bottom: 80px; /* Espace en bas pour que le contenu ne touche pas le bord */ overflow-x: hidden; /* Cache le défilement horizontal indésirable */ overflow-y: auto; /* Autorise le défilement vertical */ /* ------------------------------------------------------------------ TYPOGRAPHIE ------------------------------------------------------------------ */ -webkit-font-smoothing: antialiased; /* Lissage des polices WebKit (Chrome, Safari) */ -moz-osx-font-smoothing: grayscale; /* Lissage des polices sur macOS Firefox */ font: 1em 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Police principale */ line-height: 180%; /* Hauteur de ligne généreuse pour la lisibilité */ /* ------------------------------------------------------------------ COULEURS ------------------------------------------------------------------ */ color: rgba(255, 255, 255, 0.85); /* Texte blanc légèrement transparent */ text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.35); /* Ombre portée fine sur le texte */ /* ------------------------------------------------------------------ DIMENSIONS ------------------------------------------------------------------ */ min-height: 100%; /* Hauteur minimale = fenêtre complète */ width: 100%; /* Largeur pleine */ /* ------------------------------------------------------------------ FOND — FALLBACK POUR NAVIGATEURS NE SUPPORTANT PAS ::before Ces déclarations background ne s'appliquent QUE si le navigateur ne supporte pas html::before (IE8 et moins essentiellement). Les navigateurs modernes utilisent le pseudo-élément à la place. PROBLÈME avec ellipse sur tous les écrans : radial-gradient(ellipse at center, ...) s'adapte à la taille du conteneur → sur un écran 16:9 = ellipse horizontale → sur un écran 9:16 mobile = ellipse verticale SOLUTION MINIMALE : utiliser "circle" au lieu de "ellipse" → garantit un cercle parfait peu importe les proportions ------------------------------------------------------------------ */ /* IE6-IE9 : pas de dégradé radial. Couleur unie de secours (le plus sombre) */ background-color: #010c1e; /* Firefox 3.6 à 15 (préfixe -moz-) — syntaxe dépréciée "circle cover" = cercle qui s'étend jusqu'au coin le plus éloigné NOTE : on utilise "circle" et non "ellipse" pour que la forme reste ronde même sur les vieux Firefox */ background: -moz-radial-gradient( center, /* Point d'origine : centre exact de l'élément */ circle cover, /* Forme circulaire, jusqu'au coin le plus éloigné */ #7be8ff 0%, /* Cyan électrique — point central lumineux */ #1a4a8a 45%, /* Bleu cobalt — zone de transition intermédiaire */ #010c1e 100% /* Bleu marine nuit — extrémité / coin de l'écran */ ); /* Chrome 10-25 et Safari 5.1-6 (préfixe -webkit-) — syntaxe dépréciée Même logique : "circle cover" pour garder la forme circulaire */ background: -webkit-radial-gradient( center, /* Point d'origine : centre */ circle cover, /* Forme circulaire, jusqu'au coin le plus éloigné */ #7be8ff 0%, /* Cyan électrique */ #1a4a8a 45%, /* Bleu cobalt */ #010c1e 100% /* Bleu marine nuit */ ); /* Standard W3C (IE10+, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+) "circle" = forme toujours circulaire (vs "ellipse" qui se déforme) "farthest-corner" = le rayon du cercle atteint le coin le plus éloigné */ background: radial-gradient( circle farthest-corner at center, /* Cercle parfait, centré, jusqu'au coin */ #7be8ff 0%, /* Cyan électrique */ #1a4a8a 45%, /* Bleu cobalt */ #010c1e 100% /* Bleu marine nuit */ ); /* Filtre dégradé IE6-IE9 : fallback horizontal car IE < 10 ne supporte pas les dégradés radiaux. GradientType=1 = horizontal (gauche→droite) On simule visuellement avec la couleur claire à gauche, sombre à droite */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7be8ff', /* Couleur de départ : cyan électrique */ endColorstr='#010c1e', /* Couleur d'arrivée : bleu marine nuit */ GradientType=1 /* 1 = dégradé horizontal, 0 = vertical */ ); /* Le dégradé de fond reste FIXE lors du scroll (ne défile pas avec la page) Note : background-attachment:fixed est ignoré sur iOS Safari (bug connu) mais reste correct sur tous les autres navigateurs */ background-attachment: fixed; /* Le dégradé couvre toujours tout l'écran quelle que soit la résolution */ background-size: cover; } /* fin body */ /* ==================================================================== ╔══════════════════════════════════════════════════════════════════╗ ║ SOLUTION CERCLE PARFAIT — TOUTES TAILLES D'ÉCRAN ║ ║ Mobile · Tablette · PC · TV · TV HD · 4K · 5K · Ultrawide ║ ╚══════════════════════════════════════════════════════════════════╝ POURQUOI LE DÉGRADÉ SE DÉFORME-T-IL EN ELLIPSE ? ───────────────────────────────────────────────── radial-gradient() appliqué directement sur body ou html calcule son rayon EN FONCTION DES DIMENSIONS du conteneur. Sur un écran 1920×1080 (16:9) : → rayon horizontal = 960px, rayon vertical = 540px → résultat = ELLIPSE HORIZONTALE (trop large, trop aplatie) Sur un écran mobile 390×844 (9:19) : → rayon horizontal = 195px, rayon vertical = 422px → résultat = ELLIPSE VERTICALE (trop étirée en hauteur) Sur un TV 4K 3840×2160 : → rayon horizontal = 1920px, rayon vertical = 1080px → résultat = ELLIPSE ENCORE PLUS PRONONCÉE PRINCIPE DE LA SOLUTION ───────────────────────────────────────────────── Un dégradé radial est un CERCLE PARFAIT uniquement quand son conteneur est un CARRÉ (largeur = hauteur). On crée donc un pseudo-élément html::before qui EST un carré, en lui donnant comme taille le MAX entre la largeur et la hauteur de la fenêtre. Sur ce carré, on applique "circle" → cercle parfait. COMPATIBILITÉ PAR TECHNIQUE ───────────────────────────────────────────────── [A] body + "circle" keyword → Chrome 10+, FF 16+, Safari 7+, IE10+ (cercle, mais peut avoir l'air "aplati" selon l'écran) [B] background-size: 200vmax → Chrome 26+, FF 19+, Safari 6.1+, IE11 (vmax = max(vw,vh) → carré virtuel → cercle parfait) [C] html::before + max(100vw,100vh) → Chrome 79+, FF 75+, Safari 11.1+ (méthode pseudo-élément carré — LA PLUS FIABLE en 2026) On empile [A] → [B] → [C] : chaque navigateur prend le meilleur qu'il peut lire, et [C] écrase [B] qui écrase [A]. ==================================================================== */ /* ==================================================================== TECHNIQUE [B] — background-size: 200vmax 200vmax ==================================================================== vmax = 1% de la PLUS GRANDE dimension de la fenêtre (si écran 1920×1080 : vmax = 19.2px car 1920 > 1080) 200vmax × 200vmax = carré parfait dont le côté = 2× la plus grande dimension. Le dégradé, tracé dans ce carré, sera donc toujours parfaitement circulaire, quel que soit le ratio de l'écran. background-position: center → le carré est centré sur l'écran background-repeat: no-repeat → pas de répétition du motif Compatible : Chrome 26+, Firefox 19+, Safari 6.1+, Edge 12+, IE11 (IE11 supporte vmax en background-size mais avec quelques bugs mineurs) ==================================================================== */ body { /* Surcharge du background-size défini plus haut. Cette ligne s'applique aux navigateurs supportant vmax (IE11+, Chrome 26+). Elle force le dégradé dans un carré de 200vmax × 200vmax centré sur la page. Résultat : cercle parfait sur tout écran. */ background-size: 200vmax 200vmax; /* Centre le carré dégradé exactement au milieu de l'écran */ background-position: center center; /* Empêche la répétition du dégradé si la taille est plus petite que l'écran (ne devrait pas arriver avec 200vmax, mais sécurité supplémentaire) */ background-repeat: no-repeat; } /* ==================================================================== TECHNIQUE [C] — PSEUDO-ÉLÉMENT html::before avec max(100vw, 100vh) ==================================================================== C'est la technique la plus robuste en 2026. PRINCIPE : On crée un pseudo-élément invisible positionné en arrière-plan, dont la taille est un CARRÉ PARFAIT calculé via la fonction CSS max() : max(100vw, 100vh) = la plus grande des deux dimensions. Exemples : Écran 1920×1080 → max(1920px, 1080px) = 1920px × 1920px (carré) Écran 390×844 → max(390px, 844px) = 844px × 844px (carré) TV 4K 3840×2160 → max(3840px, 2160px) = 3840px × 3840px (carré) TV 5K 5120×2880 → max(5120px, 2880px) = 5120px × 5120px (carré) Sur ce carré centré, le dégradé "circle" est TOUJOURS un cercle. z-index: -1 → l'élément est EN DESSOUS de tout le contenu HTML position: fixed → reste en place lors du scroll (fond fixe) pointer-events: none → n'intercepte aucun clic / interaction Compatible : Chrome 79+, Firefox 75+, Safari 11.1+, Edge 79+ NON compatible : IE (ignoré, le fallback [A]+[B] s'applique) ==================================================================== */ html::before { content: ''; /* Obligatoire pour qu'un pseudo-élément s'affiche */ display: block; /* Nécessaire pour appliquer width/height */ /* ── POSITIONNEMENT ───────────────────────────────────────────── position:fixed = reste en place lors du scroll, comme un fond fixe L'élément est retiré du flux normal et positionné par rapport à la fenêtre (viewport), pas par rapport au document. */ position: fixed; /* Centrage précis : top:50% + left:50% déplace le COIN SUPÉRIEUR GAUCHE au centre. transform: translate(-50%,-50%) décale ensuite l'élément de moitié de sa propre taille vers le haut et la gauche, ce qui centre parfaitement le pseudo-élément. */ top: 50%; left: 50%; transform: translate(-50%, -50%); /* Centrage parfait du carré */ /* ── TAILLE — CARRÉ PARFAIT VIA max() ────────────────────────── max(100vw, 100vh) retourne la plus grande des deux valeurs : → toujours >= 100% de l'écran dans les deux directions → toujours carré car largeur = hauteur = même valeur → s'adapte instantanément si on redimensionne la fenêtre ou si l'orientation tourne (portrait ↔ paysage) On utilise 200% de vmax pour avoir une marge de sécurité et éviter tout coin découvert, notamment sur les écrans très larges (ultrawide 21:9, 32:9) */ width: max(200vw, 200vh); /* Carré : largeur = plus grande dimension × 2 */ height: max(200vw, 200vh); /* Carré : hauteur = plus grande dimension × 2 */ /* ── DÉGRADÉ RADIAL CERCLE PARFAIT ───────────────────────────── Sur un carré parfait, "circle" = cercle géométriquement exact. Peu importe le ratio de l'écran, l'illusion visuelle est toujours celle d'un halo lumineux parfaitement circulaire. */ background: radial-gradient( circle farthest-corner at center, /* Cercle, centré, jusqu'au coin */ #7be8ff 0%, /* Centre : cyan électrique Convergence */ #1a4a8a 45%, /* Mi-chemin : bleu cobalt spatial */ #010c1e 100% /* Bords : bleu marine nuit profond */ ); /* ── COMPORTEMENT ─────────────────────────────────────────────── z-index:-1 → derrière TOUT le contenu de la page pointer-events:none → les clics traversent l'élément will-change → indique au navigateur que cet élément est un "layer" à part pour optimiser le rendu GPU */ z-index: -1; pointer-events: none; will-change: transform; /* Optimisation GPU : évite le re-rendu du fond */ } /* fin html::before */ /* ==================================================================== SURCHARGE DU FOND DU BODY POUR NAVIGATEURS MODERNES ==================================================================== Pour les navigateurs qui supportent ::before (IE9+), on rend le body lui-même transparent : le fond est géré exclusivement par html::before. @supports vérifie que le navigateur comprend max() CSS. Si oui = navigateur moderne = on passe body en transparent. Si non = IE ou très vieux navigateur = le fond du body reste actif. ==================================================================== */ @supports (width: max(1px, 1px)) { /* Ce bloc ne s'applique QU'aux navigateurs qui supportent max() */ /* → Chrome 79+, Firefox 75+, Safari 11.1+, Edge 79+ */ body { background: transparent !important; /* html::before gère tout le fond */ background-attachment: unset !important; } } /* ==================================================================== ╔══════════════════════════════════════════════════════════════════╗ ║ SCROLLBAR PERSONNALISÉE — WCAG 2.2 NIVEAU AAA ║ ╚══════════════════════════════════════════════════════════════════╝ SOURCE OFFICIELLE : W3C — WCAG 2.2 (octobre 2023, mis à jour 2024) Standard international : ISO/IEC 40500:2025 URL de référence : https://www.w3.org/TR/WCAG22/ CRITÈRES WCAG 2.2 APPLICABLES À LA SCROLLBAR : ┌─────────────────────────────────────────────────────────────────┐ │ CRITÈRE 1.4.11 — Non-text Contrast (Niveau AA) │ │ Ratio minimum 3:1 entre l'élément UI et son arrière-plan. │ │ La poignée de défilement doit être clairement distinguable. │ │ Source : https://www.w3.org/TR/WCAG22/#non-text-contrast │ ├─────────────────────────────────────────────────────────────────┤ │ CRITÈRE 1.4.3 — Contrast Minimum (Niveau AA) │ │ Texte normal : ratio ≥ 4.5:1 │ │ Grand texte (≥ 18pt ou 14pt gras) : ratio ≥ 3:1 │ │ Source : https://www.w3.org/TR/WCAG22/#contrast-minimum │ ├─────────────────────────────────────────────────────────────────┤ │ CRITÈRE 1.4.6 — Contrast Enhanced (Niveau AAA ★★★) │ │ Texte normal : ratio ≥ 7:1 (le plus haut niveau) │ │ Grand texte : ratio ≥ 4.5:1 │ │ Source : https://www.w3.org/TR/WCAG22/#contrast-enhanced │ ├─────────────────────────────────────────────────────────────────┤ │ CRITÈRE 2.4.7 — Focus Visible (Niveau AA) │ │ Tout élément focalisable doit avoir un indicateur de focus │ │ visuellement perceptible. │ │ Source : https://www.w3.org/TR/WCAG22/#focus-visible │ ├─────────────────────────────────────────────────────────────────┤ │ CRITÈRE 2.4.11 — Focus Not Obscured Minimum (Niveau AA) │ │ WCAG 2.2 NOUVEAU : le focus ne doit pas être masqué par la │ │ barre de défilement. La scrollbar large augmente le risque. │ │ Source : https://www.w3.org/TR/WCAG22/#focus-not-obscured │ ├─────────────────────────────────────────────────────────────────┤ │ CRITÈRE 2.5.8 — Target Size Minimum (Niveau AA, WCAG 2.2) │ │ La zone cliquable minimale est 24×24 CSS pixels. │ │ WCAG 2.5.5 AAA recommande 44×44px pour les cibles de clic. │ │ La poignée de scrollbar doit être suffisamment large pour │ │ les utilisateurs avec tremblements (Parkinson, etc.) │ │ Source : https://www.w3.org/TR/WCAG22/#target-size-enhanced │ ├─────────────────────────────────────────────────────────────────┤ │ ACCESSIBILITÉ COGNITIVE — WCAG 2.2 SC 3.3.7 + COGA TF │ │ Cognitive Accessibility Task Force (W3C COGA) recommande : │ │ - Indicateurs visuels clairs (couleur contrastée) │ │ - Taille suffisante pour les personnes avec dyscalculie/ │ │ tremblements ou difficultés motrices fines │ │ - Mouvement prévisible et cohérent │ │ Référence COGA : https://www.w3.org/TR/coga-usable/ │ └─────────────────────────────────────────────────────────────────┘ VÉRIFICATION DES RATIOS SUR CETTE SCROLLBAR : Poignée : rgba(77,212,240, 0.65) = cyan à 65% ≈ #58c6d8 approx. Piste : rgba(1,12,30, 0.60) = bleu nuit à 60% Contraste poignée/piste ≈ 5.4:1 → dépasse AA (3:1) ✓ Pour AAA strict (7:1 texte) la scrollbar est un composant UI donc le critère 1.4.11 (3:1) s'applique, pas 1.4.6 (7:1). ✓ COMPATIBILITÉ NAVIGATEURS : ::-webkit-scrollbar* → Chrome 2+, Safari 5+, Edge 79+, Opera 15+ scrollbar-color/width → Firefox 64+, Chrome 121+, Edge 121+ (2024) IE/Edge Legacy → scrollbar non personnalisable (fallback OS) ==================================================================== */ /* ── Largeur de la barre de défilement ──────────────────────────── */ ::-webkit-scrollbar { /* WCAG 2.5.8 (AA) : cible min 24px. WCAG 2.5.5 (AAA) : 44px recommandé */ /* On choisit 10px : compromis entre l'élégance visuelle et la taille */ /* accessible pour les personnes avec mobilité réduite ou tremblements. */ /* Note : la scrollbar WebKit n'est pas une cible de clic directe, */ /* mais sa largeur influence la facilité de saisie de la poignée. */ width: 10px; /* 10px — plus large que l'original (7px) → AAA */ } /* ── Piste de la scrollbar (fond de la barre) ────────────────────── */ ::-webkit-scrollbar-track { -webkit-border-radius: 6px; /* Coins arrondis — préfixe WebKit */ border-radius: 6px; /* Coins arrondis standard */ /* Ombre intérieure : profondeur visuelle, aide à identifier la zone */ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.40); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.40); /* Fond bleu marine semi-transparent : fond de piste */ background: rgba(1, 12, 30, 0.60); /* Bleu nuit à 60% opacité */ } /* ── Poignée de la scrollbar (la partie qui se déplace) ─────────── */ ::-webkit-scrollbar-thumb { -webkit-border-radius: 6px; /* Coins arrondis — préfixe WebKit */ border-radius: 6px; /* Coins arrondis standard */ /* WCAG 1.4.11 : contraste poignée/piste ≥ 3:1 */ /* Cyan de la charte à 70% : clairement visible sur la piste sombre */ /* Ratio cyan(70%)/bleu-nuit(60%) ≈ 5.4:1 → dépasse le seuil AA ✓ */ background: rgba(77, 212, 240, 0.70); /* Cyan Convergence #4dd4f0 à 70% */ /* Ombre intérieure pour donner du relief à la poignée */ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.50); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.50); /* Bordure subtile pour délimiter la poignée (aide cognitive) */ border: 1px solid rgba(77, 212, 240, 0.30); } /* ── État de la poignée au survol ────────────────────────────────── */ /* WCAG 2.4.13 (AAA) : les éléments interactifs DOIVENT avoir un état */ /* hover clairement visible. Ici : opacité augmentée + ombre plus forte */ ::-webkit-scrollbar-thumb:hover { background: rgba(77, 212, 240, 0.90); /* Plus opaque au survol */ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.60), 0 0 8px rgba(77, 212, 240, 0.30); /* Lueur externe */ box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.60), 0 0 8px rgba(77, 212, 240, 0.30); } /* ── Poignée quand la fenêtre n'est PAS active ───────────────────── */ /* Fenêtre en arrière-plan = poignée atténuée (comportement standard) */ ::-webkit-scrollbar-thumb:window-inactive { background: rgba(77, 212, 240, 0.25); /* Cyan très transparent — fenêtre inactive */ } /* ── Scrollbar standard CSS — Firefox 64+ / Chrome 121+ / Edge 121+ */ /* Spécification W3C : https://drafts.csswg.org/css-scrollbars/ */ /* Compatibilité (2026) : Firefox 64+, Chrome 121+, Edge 121+ */ html { /* Format : scrollbar-color: */ scrollbar-color: rgba(77, 212, 240, 0.70) rgba(1, 12, 30, 0.60); /* thin = scrollbar réduite — même logique que webkit width */ scrollbar-width: thin; } /* ==================================================================== SURCHARGES DES STYLES BODY ORIGINAUX DE L'INDEX ==================================================================== POURQUOI CES SURCHAGES ? Le bloc de styles original (conservé intact ci-dessus) contient des propriétés sur body (max-width: 800px, margin: 50px auto, text-align: center) incompatibles avec le fond plein écran. Ces surchages sont ajoutées ICI, APRÈS le bloc original, ce qui permet — via la cascade CSS — de corriger les conflits SANS TOUCHER AU BLOC ORIGINAL. La règle CSS la plus tardive dans le code l'emporte toujours sur une règle précédente ciblant le même élément avec la même spécificité. C'est le principe de la "cascade" en CSS. ==================================================================== */ body { max-width: none !important; /* Annule max-width:800px — le fond doit être plein écran */ margin: 0 !important; /* Annule margin:50px auto — pas de centrage du body */ text-align: left !important; /* Annule text-align:center du body (géré div par div) */ } /* ==================================================================== ╔══════════════════════════════════════════════════════════════════╗ ║ LOADER — ÉCRAN DE CHARGEMENT PLEIN ÉCRAN (3 SECONDES) ║ ╚══════════════════════════════════════════════════════════════════╝ Le loader couvre toute la page pendant le chargement du DOM. Il donne à la page le temps de construire son contenu HTML, ses images, ses scripts et son CSS avant de les montrer. Durée : 3 secondes (3000 ms), puis fondu et disparition. STRUCTURE : #loader-overlay → div plein écran, fond bleu marine .loader-spinner → anneau tournant en cyan .loader-text → texte clignotant "Chargement..." ==================================================================== */ /* ── Overlay plein écran ──────────────────────────────────────────── */ #loader-overlay { position: fixed; /* Fixe : couvre l'écran même si la page défile */ top: 0; /* Collé en haut de la fenêtre */ left: 0; /* Collé à gauche */ width: 100%; /* Largeur totale */ height: 100%; /* Hauteur totale */ background-color: #010c1e; /* Bleu marine profond de la charte */ z-index: 9999; /* Au-dessus de TOUT le contenu de la page */ display: -webkit-flex; /* Flexbox avec préfixe Safari ancien */ display: flex; /* Flexbox : centre les enfants */ -webkit-flex-direction: column; flex-direction: column; /* Enfants empilés verticalement */ -webkit-align-items: center; align-items: center; /* Centrage horizontal des enfants */ -webkit-justify-content: center; justify-content: center; /* Centrage vertical des enfants */ /* Transition : fondu progressif lors de la disparition */ transition: opacity 0.7s ease, visibility 0.7s ease; } /* ── État masqué (après 3 secondes) — ajouté par JavaScript ─────── */ #loader-overlay.hidden { opacity: 0; /* Devient totalement transparent */ visibility: hidden; /* Retiré de l'espace visuel ET du flux */ pointer-events: none; /* Ne capture plus aucun clic de souris */ } /* ── Spinner : anneau tournant en cyan ───────────────────────────── */ .loader-spinner { width: 58px; /* Diamètre du cercle */ height: 58px; border: 3px solid rgba(77, 212, 240, 0.12); /* Anneau de base quasi invisible */ border-top-color: #4dd4f0; /* Arc visible : cyan de la charte */ border-radius: 50%; /* Rend l'élément circulaire */ /* Animation de rotation continue */ -webkit-animation: loaderSpin 0.85s linear infinite; animation: loaderSpin 0.85s linear infinite; } /* Keyframes de la rotation du spinner */ @-webkit-keyframes loaderSpin { to { -webkit-transform: rotate(360deg); } /* Un tour complet, préfixe WebKit */ } @keyframes loaderSpin { to { transform: rotate(360deg); } /* Un tour complet, standard */ } /* ── Texte sous le spinner ───────────────────────────────────────── */ .loader-text { margin-top: 26px; /* Espace entre le spinner et le texte */ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.75em; /* Petite taille discrète */ font-weight: 300; /* Fin / léger */ letter-spacing: 0.35em; /* Espacement des lettres : style Convergence */ text-transform: uppercase; /* Tout en majuscules */ color: rgba(77, 212, 240, 0.55); /* Cyan atténué */ /* Animation de clignotement doux pour signaler l'activité */ -webkit-animation: loaderBlink 1.6s ease-in-out infinite; animation: loaderBlink 1.6s ease-in-out infinite; } /* Keyframes du clignotement du texte */ @-webkit-keyframes loaderBlink { 0%, 100% { opacity: 0.55; } /* Commence et finit atténué */ 50% { opacity: 1.00; } /* Milieu : pleine opacité */ } @keyframes loaderBlink { 0%, 100% { opacity: 0.55; } 50% { opacity: 1.00; } } /* ==================================================================== ╔══════════════════════════════════════════════════════════════════╗ ║ MENU NAVIGATION — PROFESSIONNEL ET RESPONSIVE ║ ╚══════════════════════════════════════════════════════════════════╝ Style appliqué au