/******************************************************************************/ /* */ /* shared-ultimate.css */ /* Feuille de style partagée — Version Ultimate */ /* Convergence Human & Technology */ /* */ /* Auteur : Fabien Conéjéro / FC84 */ /* Dépôt : https://github.com/Convergence-Human-And-Technology */ /* Licence : Copyright © 2026-2060 */ /* Convergence Human & Technology */ /* Tous droits réservés */ /* */ /******************************************************************************/ /* */ /* CE FICHIER EST LA VERSION AMÉLIORÉE DE shared.css */ /* Il intègre les apports de Globalize CSS Ultimate Pro : */ /* */ /* ✓ Classes utilitaires étendues (display, typo, flex, grid...) */ /* ✓ Variables CSS enrichies (couleurs, transitions, breakpoints) */ /* ✓ Système d'espacement Probalize.css amélioré */ /* ✓ Grille responsive avec propriétés logiques CSS modernes */ /* ✓ Filtres et effets visuels avancés */ /* ✓ Animations supplémentaires (fadeIn, slideUp, bounce...) */ /* ✓ Composants formulaires accessibles */ /* ✓ Mode sombre automatique via prefers-color-scheme */ /* ✓ Impression optimisée */ /* ✓ Chaque ligne commentée en français */ /* */ /******************************************************************************/ /* */ /* ★ GLOBALIZE.css — LICENCE PROPRIÉTAIRE (EULA) */ /* ★ PROBALIZE.css — LICENCE PROPRIÉTAIRE (EULA) */ /* */ /* Seul Fabien Conéjéro peut utiliser Globalize.css et Probalize.css. */ /* Toute autre personne doit obtenir une autorisation écrite préalable. */ /* Contact : convergence-tech@proton.me */ /* */ /******************************************************************************/ /* ============================================================================ SECTION 0 — VARIABLES CSS GLOBALES ============================================================================ Toutes les valeurs de la charte graphique Convergence sont centralisées ici. Modifier une valeur ici = répercussion sur l'ensemble du site automatiquement. APPORT GLOBALIZE ULTIMATE PRO : - Ajout des variables de couleurs sémantiques (--g-primary, --g-danger...) - Ajout des breakpoints responsives comme variables - Ajout de la variable de transition globale - Ajout des variables d'espacement Probalize étendues ============================================================================ */ :root { /* ── PALETTE COULEURS CONVERGENCE ───────────────────────────────────────── */ /* Ces trois couleurs définissent la charte graphique Convergence. */ /* Elles sont extraites du dégradé radial et du logo. */ --c-centre: #7be8ff; /* Cyan électrique — centre du dégradé / halo */ --c-milieu: #1a4a8a; /* Bleu cobalt — zone intermédiaire du dégradé */ --c-bords: #010c1e; /* Bleu marine nuit — fond / extrémités */ --c-accent: #4dd4f0; /* Cyan principal — liens, accents, interface */ --c-accent-clair: #7be8ff; /* Cyan clair — survols, focus, états actifs */ --c-texte: rgba(255,255,255,0.85); /* Blanc semi-transparent — texte courant */ --c-texte-fort: rgba(255,255,255,0.95); /* Blanc quasi pur — texte emphase */ --c-texte-doux: rgba(255,255,255,0.65); /* Blanc atténué — texte secondaire */ /* ── COULEURS SÉMANTIQUES (Globalize Ultimate Pro) ─────────────────────── Ces variables permettent d'utiliser des couleurs sémantiques cohérentes sur toutes les pages, indépendamment de la charte Convergence. Elles sont utilisées par les classes .c-primary, .bg-success etc. */ --g-primary: #0d6efd; /* Bleu primaire — actions principales */ --g-secondary: #6c757d; /* Gris secondaire — actions secondaires */ --g-success: #198754; /* Vert succès — validations, confirmations */ --g-danger: #dc3545; /* Rouge danger — erreurs, alertes critiques */ --g-warning: #ffc107; /* Jaune avertissement — alertes modérées */ --g-info: #0dcaf0; /* Bleu info — informations complémentaires */ --g-light: #f8f9fa; /* Gris très clair — fonds légers */ --g-dark: #212529; /* Gris très foncé — fonds sombres, textes */ /* ── BREAKPOINTS RESPONSIVES (Globalize Ultimate Pro) ─────────────────── Valeurs utilisées dans les media queries pour la cohérence responsive. NOTE : les variables CSS ne peuvent pas être utilisées DANS les @media queries — ces variables servent de documentation / référence. */ --g-breakpoint-sm: 576px; /* Petit mobile paysage → tablette portrait */ --g-breakpoint-md: 768px; /* Tablette portrait → tablette paysage */ --g-breakpoint-lg: 992px; /* Tablette paysage → laptop */ --g-breakpoint-xl: 1200px; /* Laptop → desktop */ --g-breakpoint-xxl: 1400px; /* Desktop → grand écran */ /* ── TRANSITION GLOBALE (Globalize Ultimate Pro) ─────────────────────── */ --g-transition: all 0.3s ease; /* Transition universelle : toutes propriétés, 300ms */ /* ── VARIABLES PROBALIZE — SYSTÈME D'ESPACEMENT ───────────────────────── Système d'espacement basé sur le rythme typographique (line-height). Toutes les marges et paddings dérivent de --prb-space-unit. PRINCIPE : unité de base = 1rem × line-height = 1 × 1.5 = 1.5rem Sur 16px de base : 1.5rem = 24px — correspondant à une ligne de texte. */ --prb-line-height: 1.5; /* Hauteur de ligne de référence — base WCAG 1.4.12 */ --prb-space-ratio: 1.5; /* Ratio multiplicateur entre niveaux d'espacement */ /* Unité de base : 1rem × 1.5 = 1.5rem = 24px (si rem = 16px) */ --prb-space-unit: calc(1rem * var(--prb-line-height)); /* xxs : très petit espace ≈ 8px — entre éléments très proches */ --prb-space-xxs: calc(var(--prb-space-unit) / (var(--prb-space-ratio) * 2)); /* xs : petit espace ≈ 12px — séparateurs discrets, padding fins */ --prb-space-xs: calc(var(--prb-space-unit) / var(--prb-space-ratio)); /* sm : espace standard ≈ 24px — entre paragraphes */ --prb-space-sm: var(--prb-space-unit); /* md : espace moyen ≈ 36px — entre sections */ --prb-space-md: calc(var(--prb-space-unit) * var(--prb-space-ratio)); /* lg : grand espace ≈ 54px — entre blocs majeurs */ --prb-space-lg: calc(var(--prb-space-unit) * var(--prb-space-ratio) * 2); /* xl : très grand espace ≈ 72px — séparations importantes */ --prb-space-xl: calc(var(--prb-space-unit) * var(--prb-space-ratio) * 3); /* ── VARIABLES NAVIGATION ────────────────────────────────────────────── */ --nav-height: 62px; /* Hauteur de la barre de navigation fixe */ --nav-bg: rgba(1, 12, 30, 0.88); /* Fond de la nav — bleu nuit semi-transparent */ --nav-blur: blur(14px); /* Intensité du flou glassmorphism */ --nav-border: rgba(77, 212, 240, 0.14); /* Couleur de la bordure bas nav */ /* ── VARIABLES LOADER ────────────────────────────────────────────────── */ --loader-duration: 3000ms; /* Durée d'affichage du loader (modifiable ici) */ --loader-fade: 0.7s; /* Durée du fondu de disparition du loader */ } /* fin :root */ /* ============================================================================ SECTION 1 — BALISE HTML ============================================================================ La balise html est le conteneur racine — elle doit occuper au moins 100% de la fenêtre pour que le fond du pseudo-élément ::before soit visible dans tous les cas (page courte, page longue). scroll-behavior:smooth est défini ici pour activer le défilement fluide sur toute la page lors des liens ancres internes. scrollbar-color et scrollbar-width : propriété CSS standardisée (W3C) pour personnaliser la scrollbar sur Firefox 64+, Chrome 121+, Edge 121+. ============================================================================ */ html { min-height: 100%; /* Hauteur minimale = hauteur complète de la fenêtre */ position: relative; /* Requis : active le contexte pour le pseudo-élément ::before */ scroll-behavior: smooth; /* Défilement fluide pour les liens ancres (#section) */ /* ── Scrollbar standard CSS — Firefox 64+ / Chrome 121+ / Edge 121+ ───── Format : scrollbar-color: Complété par les règles ::-webkit-scrollbar* ci-dessous pour Chrome/Safari */ scrollbar-color: rgba(77, 212, 240, 0.70) rgba(1, 12, 30, 0.60); /* Poignée cyan sur piste bleu nuit */ scrollbar-width: thin; /* Barre mince — élégante et peu intrusive */ } /* fin html */ /* ============================================================================ SECTION 2 — BALISE BODY ============================================================================ Le body lui-même est transparent pour les navigateurs modernes qui supportent ::before (voir @supports ci-dessous). Les déclarations background du body ci-dessous ne s'appliquent QUE aux très anciens navigateurs (IE, FF < 75, Chrome < 79). PALETTE DE COULEURS RAPPEL : #7be8ff = cyan électrique (centre) | #1a4a8a = bleu cobalt | #010c1e = bleu nuit ============================================================================ */ body { /* ── RESET MISE EN PAGE ─────────────────────────────────────────────────── */ 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 normal */ /* ── TYPOGRAPHIE ────────────────────────────────────────────────────────── */ -webkit-font-smoothing: antialiased; /* Lissage polices WebKit (Chrome, Safari) */ -moz-osx-font-smoothing: grayscale; /* Lissage polices macOS Firefox */ font: 1em 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Police principale de fallback */ line-height: 180%; /* Hauteur de ligne généreuse pour la lisibilité */ text-rendering: geometricPrecision; /* Rendu précis pour zoom/transform (base_theme) */ /* ── COULEURS ───────────────────────────────────────────────────────────── */ color: var(--c-texte); /* Blanc semi-transparent via variable */ 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 */ /* ── SCROLL MOBILE ──────────────────────────────────────────────────────── */ overscroll-behavior: contain; /* Empêche le "rebond" mobile et le sur-défilement */ /* ── FOND — FALLBACKS NAVIGATEURS ANCIENS ─────────────────────────────── 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. HISTOIRE DU BUG ELLIPSE : radial-gradient() sans "circle" s'adapte au conteneur → ellipse sur 16:9. Solution : "circle farthest-corner" = forme ronde géométriquement. */ background-color: var(--c-bords); /* IE6 : couleur unie de secours (coin le plus sombre) */ /* Firefox 3.6–15 : préfixe -moz-, syntaxe dépréciée mais nécessaire */ background: -moz-radial-gradient( center, /* Point d'origine au centre exact */ circle cover, /* Forme circulaire jusqu'au coin le plus éloigné */ #7be8ff 0%, /* Cyan électrique — centre lumineux */ #1a4a8a 45%, /* Bleu cobalt — zone de transition */ #010c1e 100% /* Bleu marine nuit — extrémités */ ); /* Chrome 10–25 et Safari 5.1–6 : préfixe -webkit-, syntaxe dépréciée */ background: -webkit-radial-gradient( center, /* Point d'origine au centre */ circle cover, /* Cercle 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 farthest-corner" garantit un cercle quelle que soit la taille */ background: radial-gradient( circle farthest-corner at center, /* Cercle parfait, centré, jusqu'au coin */ #7be8ff 0%, /* Cyan électrique — centre du dégradé */ #1a4a8a 45%, /* Bleu cobalt — milieu */ #010c1e 100% /* Bleu marine nuit — bords */ ); /* IE6–IE9 : filtre horizontal (pas de dégradé radial supporté) */ /* GradientType=1 = horizontal, simule visuellement le dégradé */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7be8ff', /* Départ : cyan électrique */ endColorstr='#010c1e', /* Arrivée : bleu marine nuit */ GradientType=1 /* 1 = horizontal / 0 = vertical */ ); background-attachment: fixed; /* Le fond reste fixe lors du scroll (ne défile pas) */ /* TECHNIQUE [B] — background-size: 200vmax vmax = 1% de la PLUS GRANDE dimension de la fenêtre. 200vmax × 200vmax = carré parfait → dégradé toujours circulaire. Compatible Chrome 26+, Firefox 19+, Safari 6.1+, Edge 12+, IE11. */ background-size: 200vmax 200vmax; /* Carré parfait = cercle parfait */ background-position: center center; /* Centré horizontalement et verticalement */ background-repeat: no-repeat; /* Pas de répétition du motif */ /* ── SURCHARGES STYLES ORIGINAUX ──────────────────────────────────────── Le bloc style original (conservé dans les pages HTML) contient body { max-width: 800px; margin: 50px auto; text-align: center; } Ces surcharges via la cascade CSS corrigent ces conflits. */ max-width: none !important; /* Annule max-width:800px — fond plein écran */ text-align: left !important; /* Annule text-align:center (géré div par div) */ } /* fin body */ /* ============================================================================ SECTION 3 — TECHNIQUE [B] EXPLICITÉE : background-size vmax ============================================================================ Ce bloc est séparé pour la lisibilité mais s'applique sur body. Il surcharge le background-size défini dans la déclaration body ci-dessus. ============================================================================ */ /* Corps : surcharge de background-size et background-position pour les nav. IE11+ */ /* Redéclarés séparément pour maximiser la compatibilité et la lisibilité */ body { background-size: 200vmax 200vmax; /* Carré de 200vmax × 200vmax = cercle parfait */ background-position: center center; /* Recentre le carré dans la fenêtre */ background-repeat: no-repeat; /* Une seule occurrence du dégradé */ } /* fin body surcharge vmax */ /* ============================================================================ SECTION 4 — TECHNIQUE [C] : PSEUDO-ÉLÉMENT html::before ============================================================================ MÉTHODE LA PLUS ROBUSTE EN 2026 — Chrome 79+, Firefox 75+, Safari 11.1+ PRINCIPE : On crée un pseudo-élément invisible positionné fixe dont la taille est un CARRÉ PARFAIT calculé via max(100vw, 100vh). Sur ce carré, le dégradé "circle" est mathématiquement exact. EXEMPLES DE CALCUL : Écran 1920×1080 → max(1920, 1080) = 1920px → carré 3840px × 3840px Écran 390×844 → max(390, 844) = 844px → carré 1688px × 1688px TV 4K 3840×2160 → max(3840, 2160) = 3840px → carré 7680px × 7680px ============================================================================ */ html::before { content: ''; /* Obligatoire pour qu'un pseudo-élément s'affiche */ display: block; /* Nécessaire pour appliquer width/height */ /* ── POSITIONNEMENT FIXE ────────────────────────────────────────────────── */ position: fixed; /* Reste en place lors du scroll = fond fixe */ top: 50%; /* Déplace le coin supérieur gauche au milieu haut */ left: 50%; /* Déplace le coin supérieur gauche au milieu gauche */ /* translate(-50%,-50%) décale de moitié → centre parfait de l'élément */ -webkit-transform: translate(-50%, -50%); /* Préfixe WebKit (Safari ancien) */ transform: translate(-50%, -50%); /* Standard — centrage parfait du carré */ /* ── TAILLE — CARRÉ PARFAIT VIA max() ─────────────────────────────────── */ /* max(200vw, 200vh) = toujours la plus grande dimension × 2 */ /* Garantit qu'aucun coin n'est découvert, même sur ultrawide (21:9, 32:9) */ width: max(200vw, 200vh); /* Largeur = max(largeur, hauteur) × 2 = carré */ height: max(200vw, 200vh); /* Hauteur = même valeur → carré mathématique */ /* ── DÉGRADÉ RADIAL CERCLE PARFAIT ──────────────────────────────────────── */ /* Sur un carré, "circle" est un cercle géométriquement exact. */ background: radial-gradient( circle farthest-corner at center, /* Cercle centré jusqu'au coin */ #7be8ff 0%, /* Centre : cyan électrique de la charte */ #1a4a8a 45%, /* Milieu : 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: transform; /* Optimisation GPU : calque dédié */ } /* fin html::before */ /* ============================================================================ SECTION 5 — SURCHARGE FOND BODY POUR NAVIGATEURS MODERNES ============================================================================ Pour les navigateurs supportant max() (Chrome 79+, Firefox 75+, Safari 11.1+) : le body devient transparent → html::before gère tout le fond. @supports isole ce bloc : ne s'applique QU'aux navigateurs modernes. ============================================================================ */ @supports (width: max(1px, 1px)) { /* Ce bloc s'exécute uniquement sur les navigateurs supportant max() CSS */ body { background: transparent !important; /* html::before prend le relais pour le fond */ background-attachment: unset !important; /* Supprime l'attachment (inutile avec transparent) */ } } /* fin @supports max() */ /* ============================================================================ SECTION 6 — SCROLLBAR PERSONNALISÉE (WCAG 2.2 AAA) ============================================================================ SOURCE OFFICIELLE : W3C — WCAG 2.2 (octobre 2023) Standard international : ISO/IEC 40500:2025 URL : https://www.w3.org/TR/WCAG22/ CRITÈRES APPLICABLES : - 1.4.11 Non-text Contrast (AA) : ratio min 3:1 poignée/piste - 2.5.8 Target Size Minimum (AA) : cible min 24×24px - 2.4.7 Focus Visible (AA) : indicateur de focus clavier visible RATIOS OBTENUS : Poignée cyan rgba(77,212,240,0.70) sur piste bleu rgba(1,12,30,0.60) ≈ 5.4:1 ✓ Dépasse le seuil AA (3:1) pour les composants UI d'interface. COMPATIBILITÉ : ::-webkit-scrollbar* = Chrome 2+, Safari 5+, Edge 79+, Opera 15+ scrollbar-color/width = Firefox 64+, Chrome 121+, Edge 121+ (2024) IE/Edge Legacy = non personnalisable, fallback OS ============================================================================ */ /* ── Largeur de la barre de défilement (WebKit) ─────────────────────────── */ ::-webkit-scrollbar { width: 10px; /* 10px : compromis accessibilité WCAG 2.5.8 et élégance visuelle */ } /* fin ::-webkit-scrollbar */ /* ── 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 */ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.40); /* Ombre intérieure profondeur */ box-shadow: inset 0 0 6px rgba(0,0,0,0.40); /* Ombre standard */ background: rgba(1, 12, 30, 0.60); /* Fond bleu nuit à 60% opacité */ } /* fin ::-webkit-scrollbar-track */ /* ── Poignée de la scrollbar (élément mobile) ───────────────────────────── */ ::-webkit-scrollbar-thumb { -webkit-border-radius: 6px; /* Coins arrondis WebKit */ border-radius: 6px; /* Coins arrondis standard */ background: rgba(77, 212, 240, 0.70); /* Cyan Convergence à 70% */ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.50); /* Relief intérieur WebKit */ box-shadow: inset 0 0 6px rgba(0,0,0,0.50); /* Relief intérieur standard */ border: 1px solid rgba(77, 212, 240, 0.30); /* Bordure cyan très discrète */ } /* fin ::-webkit-scrollbar-thumb */ /* ── Poignée au survol ───────────────────────────────────────────────────── */ /* WCAG 2.4.13 (AAA) : les éléments interactifs DOIVENT avoir un état hover */ ::-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 cyan WebKit */ box-shadow: inset 0 0 6px rgba(0,0,0,0.60), 0 0 8px rgba(77, 212, 240, 0.30); /* + Lueur externe standard */ } /* fin ::-webkit-scrollbar-thumb:hover */ /* ── Poignée quand la fenêtre n'est pas active ──────────────────────────── */ ::-webkit-scrollbar-thumb:window-inactive { background: rgba(77, 212, 240, 0.25); /* Très transparent — fenêtre inactive */ } /* fin ::-webkit-scrollbar-thumb:window-inactive */ /* ============================================================================ SECTION 7 — NORMALIZE.CSS COMPLÉMENTAIRE ============================================================================ Normalize.css v8.0.1 — Nicolas Gallagher & Jonathan Neal — MIT License Règles complémentaires non couvertes par les styles existants. Garantissent un rendu cohérent sur TOUS les navigateurs modernes et anciens. ============================================================================ */ /* abbr : soulignement pointillé pour les abréviations avec tooltip */ /* Correctif Chrome/Edge qui ne supprime pas border-bottom correctement */ abbr[title] { border-bottom: none; /* Supprime la bordure ancienne Chrome/Edge */ text-decoration: underline; /* Soulignement standard */ text-decoration: underline dotted; /* Tirets : signal visuel d'abréviation */ } /* fin abbr[title] */ /* b/strong : graisse unifiée — IE et anciens Firefox varient */ b, strong { font-weight: bolder; /* Plus gras que le parent — valeur sémantique recommandée */ } /* fin b, strong */ /* code/kbd/samp : monospace normalisé — correctif taille fonte */ /* Le double "monospace" est un hack délibéré pour corriger Chrome */ code, kbd, samp { font-family: monospace, monospace; /* Double monospace = correctif taille fonte Chrome */ font-size: 1em; /* Maintient la taille relative du contexte */ } /* fin code, kbd, samp */ /* small : réduit uniformément sur tous les navigateurs */ small { font-size: 80%; /* 80% de la taille du texte parent = norme cross-browser */ } /* fin small */ /* sub/sup : positionnement sans impact sur l'interligne */ sub, sup { font-size: 75%; /* Réduit la taille de l'indice/exposant */ line-height: 0; /* Annule l'impact sur la hauteur de ligne */ position: relative; /* Requis pour top/bottom */ vertical-align: baseline; /* Alignement de référence */ } /* fin sub, sup */ sub { bottom: -0.25em; /* Décale vers le bas = indice (ex: H₂O) */ } /* fin sub */ sup { top: -0.5em; /* Décale vers le haut = exposant (ex: m²) */ } /* fin sup */ /* [hidden] : masquage universel — IE10 n'applique pas display:none */ [hidden] { display: none; /* Force le masquage sur tous les navigateurs */ } /* fin [hidden] */ /* hr : normalisation — Firefox ajoute couleur et hauteur non standard */ hr { box-sizing: content-box; /* Modèle de boîte explicite pour les
*/ height: 0; /* Supprime la hauteur par défaut Firefox */ overflow: visible; /* Chrome masquait le débordement — on force visible */ } /* fin hr */ /* pre : défilement horizontal IE11 normalisé */ pre { font-family: monospace, monospace; /* Même correctif monospace que code */ font-size: 1em; /* Taille relative héritée */ } /* fin pre */ /* Boutons/inputs : apparence normalisée iOS Safari */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* Corrige l'apparence sur iOS Safari */ } /* fin boutons */ /* fieldset : normalisation des bordures Firefox */ fieldset { padding: 0.35em 0.75em 0.625em; /* Valeur W3C de référence */ } /* fin fieldset */ /* legend : normalisation IE */ legend { box-sizing: border-box; /* Inclut padding/border dans la largeur */ color: inherit; /* Hérite la couleur du texte parent */ display: table; /* Corrige un bug d'affichage IE/Edge */ max-width: 100%; /* Empêche le dépassement hors du fieldset */ padding: 0; /* Supprime les paddings incohérents */ white-space: normal; /* Corrige IE qui forçait nowrap */ } /* fin legend */ /* textarea : scroll vertical uniquement — IE11 corrigé */ textarea { overflow: auto; /* Vertical auto, horizontal masqué automatiquement */ } /* fin textarea */ /* [type="number"] : boutons de valeur IE/Edge corrigés */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; /* Corrige la hauteur sur Chrome */ } /* fin number spin buttons */ /* [type="search"] : apparence normalisée iOS + Chrome */ [type="search"] { -webkit-appearance: textfield; /* Apparence standard sur iOS */ outline-offset: -2px; /* Décale le focus outline Chrome/Safari */ } /* fin search */ /* Bouton de décoration du champ recherche — Chrome/Safari */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; /* Masque le bouton décoratif Chrome */ } /* fin search decoration */ /* Bouton upload de fichier — héritage police Safari */ ::-webkit-file-upload-button { -webkit-appearance: button; /* Apparence bouton sur Safari */ font: inherit; /* Hérite la police du document */ } /* fin file upload button */ /* details/summary : display block pour anciens navigateurs */ details { display: block; /* Block : comportement standard HTML5 */ } /* fin details */ summary { display: list-item; /* Affiche le triangle déroulant natif */ } /* fin summary */ /* template : masquage universel — IE ne le masque pas */ template { display: none; /* Jamais affiché */ } /* fin template */ /* ============================================================================ SECTION 8 — LOADER — ÉCRAN DE CHARGEMENT (3 SECONDES) ============================================================================ Le loader couvre toute la page pendant le chargement du DOM. Il donne le temps au contenu, aux polices, aux images et aux scripts de se construire avant d'être montrés. FONCTIONNEMENT : 1. L'overlay #loader-overlay est affiché (z-index: 9999 = au-dessus de tout) 2. JavaScript ajoute la classe .hidden après --loader-duration ms 3. La classe .hidden déclenche : opacity: 0 + visibility: hidden (fondu CSS) STRUCTURE HTML ATTENDUE :
← anneau tournant
...
← texte clignotant
============================================================================ */ /* ── Overlay plein écran ──────────────────────────────────────────────────── */ #loader-overlay { position: fixed; /* Fixe : couvre l'écran même si la page défile */ top: 0; /* Collé en haut */ left: 0; /* Collé à gauche */ width: 100%; /* Pleine largeur */ height: 100%; /* Pleine hauteur */ background-color: #010c1e; /* Bleu marine de la charte — fond opaque initial */ z-index: 9999; /* Au-dessus de TOUT — même du nav (z-index: 1000) */ display: -webkit-flex; /* Flexbox préfixe Safari pour centrage */ display: flex; /* Flexbox standard — centre les enfants */ -webkit-flex-direction: column; /* Préfixe Safari : empilage vertical */ flex-direction: column; /* Spinner + texte empilés verticalement */ -webkit-align-items: center; /* Préfixe Safari : centrage horizontal */ align-items: center; /* Centre les enfants horizontalement */ -webkit-justify-content: center; /* Préfixe Safari : centrage vertical */ justify-content: center; /* Centre les enfants verticalement */ transition: opacity var(--loader-fade) ease, /* Fondu sur l'opacité */ visibility var(--loader-fade) ease; /* Fondu sur la visibilité */ } /* fin #loader-overlay */ /* ── Classe .hidden — ajoutée par JavaScript après 3s ───────────────────── */ #loader-overlay.hidden { opacity: 0; /* Transparent */ visibility: hidden; /* Retire de l'espace visuel et du flux */ pointer-events: none; /* Ne capte plus aucun clic */ } /* fin #loader-overlay.hidden */ /* ── Anneau tournant (spinner) ────────────────────────────────────────────── */ .loader-spinner { width: 58px; /* Diamètre du cercle */ height: 58px; /* Hauteur = largeur = cercle */ border: 3px solid rgba(77,212,240,0.12); /* Anneau de fond quasi invisible */ border-top-color: #4dd4f0; /* Arc visible : cyan de la charte */ border-radius: 50%; /* Élément transformé en cercle */ -webkit-animation: loaderSpin 0.85s linear infinite; /* Rotation préfixe WebKit */ animation: loaderSpin 0.85s linear infinite; /* Rotation standard — infinie */ } /* fin .loader-spinner */ /* Keyframes rotation spinner — préfixe WebKit */ @-webkit-keyframes loaderSpin { to { -webkit-transform: rotate(360deg); } /* Un tour complet en sens horaire */ } /* fin @-webkit-keyframes loaderSpin */ /* Keyframes rotation spinner — standard */ @keyframes loaderSpin { to { transform: rotate(360deg); } /* Un tour complet — animation continue */ } /* fin @keyframes loaderSpin */ /* ── Texte sous le spinner ──────────────────────────────────────────────── */ .loader-text { margin-top: 26px; /* Espace entre spinner et texte */ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Police système */ font-size: 0.75em; /* Petite taille discrète */ font-weight: 300; /* Fin / léger */ letter-spacing: 0.35em; /* Large espacement des lettres */ text-transform: uppercase; /* Majuscules */ color: rgba(77, 212, 240, 0.55); /* Cyan atténué */ -webkit-animation: loaderBlink 1.6s ease-in-out infinite; /* Clignotement WebKit */ animation: loaderBlink 1.6s ease-in-out infinite; /* Clignotement standard */ } /* fin .loader-text */ /* Keyframes clignotement texte loader — préfixe WebKit */ @-webkit-keyframes loaderBlink { 0%, 100% { opacity: 0.55; } /* Opacité réduite aux extrémités */ 50% { opacity: 1.00; } /* Pleine opacité au milieu du cycle */ } /* fin @-webkit-keyframes loaderBlink */ /* Keyframes clignotement texte loader — standard */ @keyframes loaderBlink { 0%, 100% { opacity: 0.55; } /* Commence et finit atténué */ 50% { opacity: 1.00; } /* Pic de visibilité */ } /* fin @keyframes loaderBlink */ /* ============================================================================ SECTION 9 — HALO RING — ANIMATION PULSE SUR LE LOGO / AVATAR ============================================================================ Utilisé sur l'index (sur le logo) et sur fabien-conejero.html (sur l'avatar). Technique "ring expand" : l'anneau naît au bord du cercle, s'étend et disparaît. CYCLE GÉRÉ PAR JAVASCRIPT : La classe .halo-active est ajoutée/retirée par JS selon le cycle : 10s actif → 50s pause → 10s actif → ... (boucle infinie) ÉLÉMENT HTML ATTENDU : index.html : #halo-ring (dans .logo-wrapper) fabien-conejero : .profile-avatar (directement sur le div avatar) ============================================================================ */ /* ── Anneau de halo — état repos (pas de box-shadow) ────────────────────── */ #halo-ring { position: absolute; /* Positionné dans son conteneur relatif */ top: 50%; /* Centre vertical du conteneur */ left: 50%; /* Centre horizontal du conteneur */ -webkit-transform: translate(-50%, -50%); /* Centrage précis WebKit */ transform: translate(-50%, -50%); /* Centrage précis standard */ width: 76%; /* 76% du conteneur ≈ diamètre du cercle logo */ height: 76%; /* Hauteur = largeur → carré transformé en cercle */ border-radius: 50%; /* Cercle parfait */ -webkit-box-shadow: none; /* Aucune ombre au repos WebKit */ box-shadow: none; /* Aucune ombre au repos standard */ pointer-events: none; /* Ne capte aucun clic */ z-index: 1; /* Entre le fond (0) et le logo img (2) */ will-change: box-shadow; /* Optimisation GPU */ } /* fin #halo-ring */ /* ── Animation activée : classe .halo-active ─────────────────────────────── */ #halo-ring.halo-active, .profile-avatar.halo-active { -webkit-animation: haloPulse 2.0s linear infinite; /* Pulse préfixe WebKit */ animation: haloPulse 2.0s linear infinite; /* Pulse standard — infini */ } /* fin .halo-active */ /* Keyframes pulse halo — préfixe WebKit */ @-webkit-keyframes haloPulse { 0% { -webkit-transform: translate(-50%, -50%); /* Position de départ */ -webkit-box-shadow: 0 0 0 0px rgba(77,212,240,0.40); /* Anneau initial cyan à 40% */ } 70% { -webkit-transform: translate(-50%, -50%); /* Même position */ -webkit-box-shadow: 0 0 0 55px rgba(77,212,240,0.00); /* Anneau expansé — transparent */ } 100% { -webkit-transform: translate(-50%, -50%); /* Retour position initiale */ -webkit-box-shadow: 0 0 0 0px rgba(77,212,240,0.00); /* Retour invisible */ } } /* fin @-webkit-keyframes haloPulse */ /* Keyframes pulse halo — standard */ @keyframes haloPulse { 0% { transform: translate(-50%, -50%); /* Position de départ */ -moz-box-shadow: 0 0 0 0px rgba(77,212,240,0.40); /* Préfixe Firefox */ box-shadow: 0 0 0 0px rgba(77,212,240,0.40); /* Anneau cyan à 40% d'opacité */ } 70% { transform: translate(-50%, -50%); /* Position identique */ -moz-box-shadow: 0 0 0 55px rgba(77,212,240,0.00); /* Expansé Firefox */ box-shadow: 0 0 0 55px rgba(77,212,240,0.00); /* Expansé à 55px, transparent */ } 100% { transform: translate(-50%, -50%); /* Position identique */ -moz-box-shadow: 0 0 0 0px rgba(77,212,240,0.00); /* Retour Firefox */ box-shadow: 0 0 0 0px rgba(77,212,240,0.00); /* Retour invisible */ } } /* fin @keyframes haloPulse */ /* ============================================================================ SECTION 10 — NAVIGATION PRINCIPALE — GLASSMORPHISM ============================================================================ Barre de navigation fixe en haut, commune à toutes les pages. Design : fond bleu nuit semi-transparent + flou (glassmorphism). Compatible : Chrome 76+, Edge 79+ pour backdrop-filter. Fallback : fond opaque rgba(1,12,30,0.88) pour navigateurs sans backdrop-filter. ============================================================================ */ /* ── Lien d'accessibilité "Aller au contenu principal" ──────────────────── */ /* Invisible par défaut — visible au focus clavier (Tab) */ .skip-link { position: absolute; /* Retiré du flux visuel normal */ top: -50px; /* Caché au-dessus de l'écran */ left: 0; /* Bord gauche */ background: #4dd4f0; /* Cyan de la charte */ color: #010c1e; /* Bleu foncé — contraste > 7:1 ✓ */ padding: 8px 16px; /* Espace intérieur */ font-size: 0.85em; /* Taille modérée */ font-weight: 600; /* Semi-gras */ text-decoration: none; /* Pas de soulignement */ z-index: 10000; /* Au-dessus de tout, même du loader */ border-radius: 0 0 4px 0; /* Arrondi bas-droit uniquement */ transition: top 0.2s ease; /* Glissement vers le bas au focus */ } /* fin .skip-link */ /* ── Apparaît quand focalisé au clavier ──────────────────────────────────── */ .skip-link:focus { top: 0; /* Glisse en bas : 0 = visible en haut de l'écran */ outline: 2px solid #7be8ff; /* Contour clair visible */ } /* fin .skip-link:focus */ /* ── Barre de navigation fixe ────────────────────────────────────────────── */ nav[role="navigation"] { position: fixed; /* Collée en haut, ne défile pas */ top: 0; /* Haut de la fenêtre */ left: 0; /* Bord gauche */ right: 0; /* Bord droit — pleine largeur */ width: 100%; /* Largeur totale */ z-index: 1000; /* Au-dessus du contenu, sous le loader */ background: var(--nav-bg); /* Fond bleu nuit semi-transparent */ -webkit-backdrop-filter: var(--nav-blur); /* Flou glassmorphism préfixe Safari */ backdrop-filter: var(--nav-blur); /* Flou glassmorphism standard Chrome 76+ */ border-bottom: 1px solid var(--nav-border); /* Liseré cyan discret en bas */ box-sizing: border-box; /* Padding inclus dans la largeur */ padding: 0 30px; /* Marges internes horizontales */ } /* fin nav[role="navigation"] */ /* ── Masque le paragraphe de description caché ──────────────────────────── */ nav[role="navigation"] p#nav-desc { display: none; /* Invisible visuellement — présent pour les lecteurs d'écran */ } /* fin nav p#nav-desc */ /* ── Liste des liens : disposition horizontale ───────────────────────────── */ nav[role="navigation"] > ul { display: -webkit-flex; /* Flexbox préfixe Safari */ display: flex; /* Ligne horizontale */ -webkit-flex-direction: row; /* Sens : gauche vers droite WebKit */ flex-direction: row; /* Liens côte à côte */ -webkit-align-items: center; /* Centrage vertical WebKit */ align-items: center; /* Centrage vertical standard */ -webkit-justify-content: center; /* Centrage horizontal WebKit */ justify-content: center; /* Centrage horizontal standard */ list-style: none; /* Supprime les puces */ margin: 0; /* Aucune marge par défaut */ padding: 0; /* Aucun padding par défaut */ height: var(--nav-height); /* Hauteur = variable nav (62px) */ -webkit-flex-wrap: wrap; /* Retour à la ligne si nécessaire WebKit */ flex-wrap: wrap; /* Retour à la ligne si nécessaire */ } /* fin nav > ul */ /* ── Chaque item de menu ──────────────────────────────────────────────────── */ nav[role="navigation"] > ul > li { display: -webkit-flex; /* Flexbox item WebKit */ display: flex; /* Flexbox item */ -webkit-align-items: center; /* Centre verticalement WebKit */ align-items: center; /* Centre verticalement */ height: 100%; /* Occupe toute la hauteur de la barre */ margin: 0; /* Aucune marge */ padding: 0; /* Aucun padding */ } /* fin nav > ul > li */ /* ── Lien de navigation ───────────────────────────────────────────────────── */ nav[role="navigation"] > ul > li > a { display: -webkit-flex; /* Flex pour centrer verticalement WebKit */ display: flex; /* Flex pour centrer verticalement */ -webkit-align-items: center; /* Centrage vertical WebKit */ align-items: center; /* Centrage vertical */ height: 100%; /* Toute la hauteur de la barre */ padding: 0 16px; /* Espace intérieur gauche/droite */ color: rgba(255,255,255,0.70); /* Blanc semi-transparent */ text-decoration: none; /* Pas de soulignement */ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Police système */ font-size: 0.78em; /* Petite taille élégante */ font-weight: 500; /* Semi-gras */ letter-spacing: 0.10em; /* Espacement discret */ text-transform: uppercase; /* Majuscules */ text-shadow: none; /* Pas d'ombre sur le nav */ border-bottom: 2px solid transparent; /* Bordure basse invisible par défaut */ -webkit-transition: color 0.25s ease, border-bottom-color 0.25s ease, background 0.25s ease; /* Transitions WebKit */ transition: color 0.25s ease, border-bottom-color 0.25s ease, background 0.25s ease; /* Transitions fluides */ box-sizing: border-box; /* Padding inclus dans la largeur */ white-space: nowrap; /* Empêche le texte du lien de se couper */ } /* fin nav > ul > li > a */ /* ── Page active : aria-current="page" ───────────────────────────────────── */ nav[role="navigation"] > ul > li > a[aria-current="page"] { color: var(--c-accent); /* Cyan de la charte */ border-bottom-color: var(--c-accent); /* Soulignement cyan */ } /* fin aria-current="page" */ /* ── Survol et focus clavier ────────────────────────────────────────────── */ nav[role="navigation"] > ul > li > a:hover, nav[role="navigation"] > ul > li > a:focus { color: var(--c-accent-clair); /* Cyan plus clair */ border-bottom-color: rgba(77,212,240,0.50); /* Soulignement semi-transparent */ background: rgba(77,212,240,0.04); /* Fond très légèrement teinté */ outline: none; /* Contour par défaut supprimé */ } /* fin nav a:hover, :focus */ /* ── Fil d'Ariane : masqué visuellement, présent pour SEO ─────────────── */ nav[aria-label="Fil d'Ariane"] { display: none; /* Invisible — schema.org BreadcrumbList reste dans le DOM pour Google */ } /* fin nav Fil d'Ariane */ /* ── Suppression des styles de liste sur tous les nav ─────────────────── */ nav ul, nav li { list-style-type: none; /* Supprime les puces */ margin: 0; /* Supprime la marge */ padding: 0; /* Supprime le padding */ } /* fin nav ul, nav li */ /* ============================================================================ SECTION 11 — BOUTON HAMBURGER — MENU MOBILE ============================================================================ Ce bouton est placé HORS du