@charset "UTF-8"; /* ========================================================================== WAKE UP MISSION - FEUILLE DE STYLE PRINCIPALE (style.css) ========================================================================== */ /* ------------------------------------------------------------------ 1. VARIABLES CSS - Charte graphique officielle WUM ------------------------------------------------------------------ */ /* Polices Google (Outfit + Poppins) : désormais chargées via + dans le de chaque page HTML. (L'@import sérialisait le téléchargement des polices APRÈS celui de style.css, ce qui provoquait un long FOUT — polices qui « disparaissaient » au chargement.) */ :root { /* --- Couleurs principales --- */ --bleu-principal: #4D41D9; --violet: #803DB4; --aqua-marine: #71F4B3; --noir: #000000; --gris-clair: #D4D6D5; --blanc: #FFFFFF; /* --- Fonds des sections --- */ --fond-sombre: #07070A; --fond-sombre-2: #0F0F18; --fond-clair: #FFFFFF; /* --- Textes (contraste WCAG AA ∅ 4,5:1 sur fonds sombres/clairs) --- */ --texte-clair: #F4F4FA; --texte-sombre: #121218; --texte-secondaire: #C5C5D4; --texte-secondaire-clair: #3A3A48; --texte-footer: #ECECF4; --focus-anneau: #71F4B3; --focus-anneau-clair: #3D32C4; /* --- Dégradés & Effets Verre --- */ --gradient-bleu-violet: linear-gradient(135deg, #4D41D9 0%, #803DB4 100%); --gradient-sombre: linear-gradient(180deg, #07070A 0%, #0F0F18 100%); --gradient-aqua: linear-gradient(135deg, #71F4B3 0%, #4D41D9 100%); --glass-bg: rgba(13, 13, 25, 0.80); --glass-border: rgba(77, 65, 217, 0.25); --glass-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); --overlay-photo: rgba(7, 7, 10, 0.55); --verre-sombre: rgba(12, 12, 22, 0.48); --verre-clair: rgba(255, 255, 255, 0.58); /* --- Typographies --- */ --police-titre: 'Outfit', sans-serif; --police-corps: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* --- Transitions & Tailles --- */ --transition-lisse: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1); --transition-rapide: all 0.18s ease; --max-largeur: 1200px; --max-largeur: min(1200px, 95vw); --padding-section: 4rem 1.5rem; --padding-section: min(4.5rem, 8vw) min(1.25rem, 2.5vw); } /* Protection contre le débordement horizontal à haut niveau de zoom */ html, body { overflow-x: hidden; max-width: 100vw; } /* S'assurer que les images ne débordent pas */ img { max-width: 100%; height: auto; } /* Protection pour les sections avec des grilles */ .grille-2, .grille-3 { overflow: hidden; } /* ------------------------------------------------------------------ 2. RESET & BASE ------------------------------------------------------------------ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: auto; scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .lien-eviter { position: absolute; left: 1rem; top: -4rem; z-index: 10000; padding: 0.75rem 1.25rem; background: var(--aqua-marine); color: #03030A; font-family: var(--police-titre); font-weight: 700; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); } .lien-eviter:focus, .lien-eviter:focus-visible { top: 1rem; outline: 3px solid var(--blanc); outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } body { font-family: var(--police-corps); background-color: var(--fond-sombre); background-image: none; color: var(--texte-clair); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--police-titre); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } a { text-decoration: none; color: inherit; transition: var(--transition-rapide); } /* Soulignement léger GLOBAL — appliqué à tous les liens du site, SAUF : — boutons [class*="btn"], .rm5-lien-item, .whatsapp-flottant, .bouton-retour-haut — barre de navigation .nav-lien, .btn-nav-cta, .logo-link — lien d'évitement .lien-eviter (a11y) Les liens en dégradé text-clip (footer réseaux, infolines RM Club) restent sans trait visible : color:transparent text-decoration-color currentColor = pas de filet. Exclusions supplémentaires : .lien-tiktok-handle, .lien-instagram-footer, .lien-whatsapp-footer, .footer-contact .lien-instagram (@iamwum du footer : dégradé + filet blanc définis plus bas), .footer-contact a[href*="youtube.com"], .partenariat-rm5-actions .lien-whatsapp-partenariat, .communaute-reseaux-actions .lien-tiktok-handle (tous utilisent background-clip:text). Trés discret : 1px, décalé sous la ligne de base, skip-ink pour respirer. */ a:not([class*="btn"]):not(.nav-lien):not(.logo-link):not(.lien-eviter):not(.whatsapp-flottant):not(.bouton-retour-haut):not(.rm5-lien-item):not(.lien-tiktok-handle):not(.lien-instagram-footer):not(.lien-whatsapp-footer):not(.footer-contact .lien-instagram):not(.footer-contact .lien-tiktok-handle):not(.footer-contact .lien-instagram-footer):not(.footer-contact .lien-whatsapp-footer):not(.communaute-reseaux-actions .lien-tiktok-handle):not(.footer-contact a[href*="youtube.com"]):not(.partenariat-rm5-actions .lien-whatsapp-partenariat) { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-skip-ink: auto; text-underline-offset: 0.18em; text-decoration-color: currentColor; } a:not([class*="btn"]):not(.nav-lien):not(.logo-link):not(.lien-eviter):not(.whatsapp-flottant):not(.bouton-retour-haut):not(.rm5-lien-item):not(.lien-tiktok-handle):not(.lien-instagram-footer):not(.lien-whatsapp-footer):not(.footer-contact .lien-instagram):not(.footer-contact .lien-tiktok-handle):not(.footer-contact .lien-instagram-footer):not(.footer-contact .lien-whatsapp-footer):not(.communaute-reseaux-actions .lien-tiktok-handle):not(.footer-contact a[href*="youtube.com"]):not(.partenariat-rm5-actions .lien-whatsapp-partenariat):hover, a:not([class*="btn"]):not(.nav-lien):not(.logo-link):not(.lien-eviter):not(.whatsapp-flottant):not(.bouton-retour-haut):not(.rm5-lien-item):not(.lien-tiktok-handle):not(.lien-instagram-footer):not(.lien-whatsapp-footer):not(.footer-contact .lien-instagram):not(.footer-contact .lien-tiktok-handle):not(.footer-contact .lien-instagram-footer):not(.footer-contact .lien-whatsapp-footer):not(.communaute-reseaux-actions .lien-tiktok-handle):not(.footer-contact a[href*="youtube.com"]):not(.partenariat-rm5-actions .lien-whatsapp-partenariat):focus-visible { text-decoration-thickness: 1px; } /* Annonces et poignée Instagram du hero : aucun soulignement (.lien-instagram du footer est re-stylé plus bas avec dégradé + soulignement blanc) */ .hero-annonce-rm5, .hero-instagram a { text-decoration: none !important; } :focus { outline: none; } :focus-visible { outline: 3px solid var(--focus-anneau); outline-offset: 3px; } .fond-clair :focus-visible, .btn-aqua:focus-visible { outline-color: var(--focus-anneau-clair); } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; } /* ------------------------------------------------------------------ 3. HEADER & NAVIGATION ------------------------------------------------------------------ */ header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: var(--glass-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--glass-border); box-shadow: 0 2px 30px rgba(0, 0, 0, 0.4); transition: var(--transition-lisse); } .scroll-progress { position: fixed; top: 70px; left: 0; z-index: 998; width: 100%; height: 3px; max-width: 100vw; overflow: hidden; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.22) 15%, var(--aqua-marine) 50%, #9EFFC9 85%, transparent 100%); box-shadow: 0 0 8px rgba(113,244,179,0.7), 0 0 22px rgba(113,244,179,0.4), 0 0 45px rgba(113,244,179,0.18); border-radius: 999px; pointer-events: none; transform: scaleX(0); transform-origin: left center; will-change: transform; } .compteur-anime { display: inline-block; opacity: 0; transform: translateY(12px); } .compteur-anime--actif { animation: compteurPulse 0.6s ease-out; } @keyframes compteurPulse { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-6px) scale(1.14); } 100% { transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } .compteur-anime { animation: none !important; opacity: 1 !important; transform: none !important; } } .header-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; max-width: var(--max-largeur); margin: 0 auto; padding: 0.85rem 1.5rem; padding: 0.85rem min(2rem, 3vw); } .logo-link { display: flex; align-items: center; gap: 0.75rem; } .logo-img { height: 42px; width: auto; object-fit: contain; } .logo-texte { font-family: var(--police-titre); font-size: 1.05rem; font-weight: 800; color: var(--blanc); letter-spacing: 0.04em; line-height: 1.15; } .nav-bureau { display: flex; align-items: center; gap: 0.25rem; } .nav-lien { font-size: 0.875rem; font-weight: 500; padding: 0.45rem 0.9rem; color: var(--texte-clair); border-radius: 6px; transition: var(--transition-rapide); } .nav-lien:hover, .nav-lien.actif, .nav-lien[aria-current="page"] { color: var(--aqua-marine); background: rgba(113, 244, 179, 0.08); } .nav-lien:focus-visible { outline-offset: 2px; } .btn-nav-cta { background: var(--gradient-bleu-violet); color: var(--blanc) !important; font-weight: 700; padding: 0.55rem 1.3rem; border-radius: 50px; border: 2px solid transparent; font-family: var(--police-titre); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 4px 15px rgba(77, 65, 217, 0.35); transition: var(--transition-lisse); margin-left: 0.5rem; } .btn-nav-cta:hover { background: transparent; border-color: var(--bleu-principal); color: var(--blanc) !important; box-shadow: 0 4px 20px rgba(77, 65, 217, 0.5); transform: translateY(-2px); } .toggle-mobile { display: none; background: none; border: none; cursor: pointer; padding: 0.4rem; flex-direction: column; gap: 5px; border-radius: 6px; } .toggle-mobile span { display: block; width: 26px; height: 2px; background-color: var(--blanc); transition: var(--transition-lisse); transform-origin: center; } .toggle-mobile.ouvert span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .toggle-mobile.ouvert span:nth-child(2) { opacity: 0; transform: scaleX(0); } .toggle-mobile.ouvert span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } .menu-mobile { position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background: #0D0D1A; border-left: 1px solid var(--glass-border); padding: 4rem 1.75rem 2rem 1.75rem; display: flex; flex-direction: column; gap: 0.5rem; box-shadow: -15px 0 40px rgba(0, 0, 0, 0.6); transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 999; } .menu-mobile.ouvert { right: 0; } .overlay-mobile { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); z-index: 998; } .overlay-mobile.actif { display: block; } .menu-mobile .nav-lien { font-size: 1.05rem; padding: 0.7rem 1rem; } .menu-mobile .btn-nav-cta { margin-left: 0; margin-top: 1rem; text-align: center; display: block; } /* ------------------------------------------------------------------ 4. HERO SECTION ------------------------------------------------------------------ */ .hero { position: sticky; top: 0; height: 100vh; min-height: 620px; display: flex; align-items: center; justify-content: center; padding: 0 2rem; overflow: hidden; background-image: url('../Image/WUM_ID.png'); background-position: center center; background-size: cover; background-repeat: no-repeat; } /* Safari/iOS : conserve un fallback 100vh pour les anciens WebKit, puis utilise la hauteur stable afin d'eviter les sauts quand la barre d'adresse bouge. */ @supports (height: 100svh) { .menu-mobile, .overlay-mobile, .hero { height: 100svh; } } .hero-video-conteneur { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 1; } .hero-video { width: 100%; height: 100%; object-fit: cover; opacity: 0.28; filter: saturate(1.3) hue-rotate(-10deg); } .hero-titre-ligne { backface-visibility: hidden; -webkit-backface-visibility: hidden; } .hero-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: radial-gradient(ellipse at center, rgba(7, 7, 10, 0.45) 0%, rgba(7, 7, 10, 0.70) 100%); z-index: 2; } .hero-contenu { position: sticky; top: 70px; z-index: 3; max-width: 820px; display: flex; flex-direction: column; align-items: center; text-align: center; } .hero-tagline { display: inline-block; font-family: var(--police-titre); font-size: 0.72rem; font-weight: 700; color: var(--aqua-marine); letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 1.5rem; padding: 0.4rem 1.2rem; border: 1px solid rgba(113, 244, 179, 0.3); border-radius: 50px; overflow-wrap: break-word; word-break: break-word; white-space: normal; max-width: 100%; } .hero-titre { display: inline-block; font-size: 2.6rem; font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 900; color: var(--blanc); margin-bottom: 1.5rem; letter-spacing: -0.03em; line-height: 1.05; /* Jamais de rognage : le titre se replie (mobile-first) */ white-space: normal; overflow: visible; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; -webkit-hyphens: auto; max-width: 100%; } h1 .accent, h2 .accent { color: var(--aqua-marine); background: linear-gradient(135deg, #B8B3FF 0%, #71F4B3 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================================ MAIN-TITLES — centrage garanti + aucun effet (fade/transition) Les styles locaux des pages alignaient le span à gauche et certaines animations de frappe ont été retirées du JS. Ces régles globales couvrent toutes les pages du site. ============================================================ */ h1.section-titre.titre-tape, .hero-titre:not(.tw) { text-align: center; animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; } /* ------------------------------------------------------------ TYPEWRITER - curseur clignotant (injecte par js/app.js) La frappe est pilotee par initTypewriter(). Le curseur est un element INLINE : il suit le texte sans jamais le rogner. Aucun overflow:hidden / masque de largeur -> le titre reste integral et se replie normalement sur mobile (multi-lignes). ------------------------------------------------------------ */ .tw-curseur { display: inline-block; width: 0.075em; min-width: 2px; height: 0.78em; margin-left: 0.08em; border-radius: 1px; background: var(--aqua-marine); box-shadow: 0 0 0.35em rgba(113, 244, 179, 0.75); vertical-align: -0.02em; animation: tw-clignote 0.75s linear infinite; pointer-events: none; } @keyframes tw-clignote { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.06; } } /* Fin de frappe : le curseur cesse de clignoter et s'efface en douceur, ce qui laisse ensuite le texte d'origine STRICTEMENT intact. */ .tw-curseur-fin { animation: none !important; opacity: 0; transition: opacity 0.45s ease; } @media (prefers-reduced-motion: reduce) { .tw-curseur { display: none !important; animation: none !important; } } h1.section-titre .hero-titre-ligne, .hero-titre-ligne { text-align: center; opacity: 1 !important; transform: none !important; transition: none !important; white-space: normal; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; -webkit-hyphens: auto; max-width: 100%; text-overflow: clip; overflow: visible; } /* ============================================================ LIQUID GLASS PREMIUM — .section-label (pill d'en-tête de section) Plus compact que .hero-tagline pour rester un LABEL, pas un titre. ============================================================ */ .section-label { display: flex; align-items: center; justify-content: center; position: sticky; top: 0; z-index: 100; overflow: hidden; width: max-content; max-width: 100%; padding: 0.4rem 1rem; border-radius: 50px; background: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.20) inset, 0 4px 14px rgba(7, 7, 10, 0.22), 0 8px 28px rgba(77, 65, 217, 0.16); color: #F4F4FA; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 auto 1rem; transition: background-color .25s ease, border-color .25s ease, box-shadow .35s ease; } /* Reflet lumineux glissant — synchronisé avec .hero-tagline */ .section-label::before { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%); animation: glass-reflet 5s ease-in-out 4s infinite; pointer-events: none; } /* Variante pour sections sur fond clair : verre légérement plus opaque */ .fond-clair .section-label { background: rgba(77, 65, 217, 0.06); border-color: rgba(77, 65, 217, 0.18); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 4px 14px rgba(7, 7, 10, 0.10), 0 8px 28px rgba(77, 65, 217, 0.14); } @keyframes glass-reflet { 0% { left: -100%; } 30% { left: 130%; } 100% { left: 130%; } } @media (prefers-reduced-motion: reduce) { .section-label::before { animation: none; } } .hero-sous-titre { font-size: 1.05rem; color: var(--texte-secondaire); margin-bottom: 2.5rem; max-width: 600px; margin-left: auto; margin-right: auto; font-weight: 400; overflow-wrap: break-word; word-break: break-word; hyphens: auto; -webkit-hyphens: auto; } .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; overflow-wrap: inherit; word-break: normal; } .hero-instagram { display: flex; align-items: center; gap: 0.6rem; justify-content: center; margin-top: 2rem; } .hero-instagram a { font-size: 0.85rem; color: var(--aqua-marine); font-weight: 500; } .hero-instagram a:hover { opacity: 0.8; } .lien-tiktok { color: var(--blanc); text-decoration: none; font-weight: 700; transition: opacity 0.25s ease, transform 0.25s ease; } .lien-tiktok:hover, .lien-tiktok:focus-visible { opacity: 0.9; transform: translateY(-1px); } .lien-tiktok-handle { background: linear-gradient(90deg, #00F2EA 0%, #FF0050 52%, #FFFFFF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 800; } .communaute-reseaux { position: sticky; top: 0; isolation: isolate; overflow: hidden; max-width: 760px; margin: 0 auto; padding: 1.75rem 1.5rem; padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1rem, 4vw, 2rem); border: 1px solid rgba(128, 112, 166, 0.42); border-radius: 24px; background: linear-gradient(135deg, rgba(91, 79, 178, 0.88), rgba(105, 61, 145, 0.94)), linear-gradient(120deg, rgba(184, 179, 255, 0.12), rgba(77, 65, 217, 0.18)); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.26) inset, 0 18px 50px rgba(65, 51, 92, 0.22), 0 3px 12px rgba(18, 18, 24, 0.12); text-align: center; } .communaute-reseaux::before, .communaute-reseaux::after { content: ""; position: absolute; pointer-events: none; z-index: -1; border-radius: 50%; filter: blur(24px); } .communaute-reseaux::before { width: 180px; height: 180px; top: -105px; left: -55px; background: rgba(184, 179, 255, 0.16); } .communaute-reseaux::after { width: 170px; height: 170px; right: -60px; bottom: -105px; background: rgba(77, 65, 217, 0.18); } .communaute-reseaux-label { position: sticky; top: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; margin: 0 auto 1rem; padding: 0.42rem 0.9rem; border: 1px solid rgba(235, 229, 249, 0.28); border-radius: 50px; background: rgba(38, 29, 57, 0.22); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 6px 18px rgba(43, 32, 64, 0.14); color: #EEE9FA; font-family: var(--police-titre); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .communaute-reseaux-label::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, 0.14) 50%, transparent 75%); transform: translateX(-120%); animation: communaute-label-reflet 5s ease-in-out 3s infinite; pointer-events: none; } @keyframes communaute-label-reflet { 0%, 35% { transform: translateX(-120%); } 65%, 100% { transform: translateX(120%); } } .communaute-reseaux-titre { margin: 0 0 0.8rem; color: #FAF8FF; font-family: var(--police-titre); font-size: 1.75rem; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; letter-spacing: 0; } .communaute-reseaux-titre span { background: linear-gradient(90deg, #F0C4D7, #D9C8F0 52%, #B8E6DB); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .communaute-reseaux-intro { max-width: 500px; margin: 0 auto 1.6rem; color: rgba(244, 241, 250, 0.82); font-size: 0.92rem; line-height: 1.65; } .communaute-reseaux-actions { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; } .communaute-reseaux-actions .btn { min-height: 44px; padding: 0.7rem 1.2rem; font-size: 0.82rem; } .communaute-reseaux-actions .lien-tiktok { display: inline-flex; align-items: center; gap: 0.35rem; color: #252532; border-color: rgba(37, 37, 50, 0.24); background: rgba(255, 255, 255, 0.38); } .communaute-reseaux-actions .lien-tiktok svg { width: 16px; height: 16px; flex: 0 0 16px; } .communaute-reseaux-actions .lien-tiktok:hover, .communaute-reseaux-actions .lien-tiktok:focus-visible { color: #11111A; border-color: #00BFB9; background: rgba(255, 255, 255, 0.7); } .communaute-reseaux-actions .lien-tiktok-handle { font-weight: 700; } .communaute-reseaux-actions .btn-whatsapp-reseaux { display: inline-flex; align-items: center; gap: 0.4rem; color: #E8FFF0; border-color: rgba(126, 235, 163, 0.45); background: rgba(25, 116, 67, 0.42); } .communaute-reseaux-actions .btn-whatsapp-reseaux svg { width: 16px; height: 16px; flex: 0 0 16px; } .communaute-reseaux-actions .btn-whatsapp-reseaux:hover, .communaute-reseaux-actions .btn-whatsapp-reseaux:focus-visible { color: #FFFFFF; border-color: #8FF0B1; background: rgba(35, 145, 82, 0.62); } .communaute-reseaux-actions .btn-instagram-reseaux { display: inline-flex; align-items: center; gap: 0.4rem; color: #ffffff; border-color: rgba(216, 122, 158, 0.45); background: rgba(0, 0, 0, 0.35); border-radius: 50px; transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease; } .communaute-reseaux-actions .btn-instagram-reseaux .instagram-gradient-text { background: linear-gradient(90deg, #E7C95B 0%, #D87A9E 48%, #9279C5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .communaute-reseaux-actions .btn-instagram-reseaux:hover, .communaute-reseaux-actions .btn-instagram-reseaux:focus-visible { opacity: 0.82; transform: translateY(-2px); border-color: rgba(216, 122, 158, 0.8); background: rgba(0, 0, 0, 0.5); } .communaute-reseaux-actions .btn-instagram-reseaux svg { width: 16px; height: 16px; flex: 0 0 16px; } @media (max-width: 560px) { .communaute-reseaux { padding: 1.5rem 0.9rem; border-radius: 18px; } .communaute-reseaux-actions { align-items: stretch; flex-direction: column; } .communaute-reseaux-actions .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .communaute-reseaux::before, .communaute-reseaux::after { filter: none; } .communaute-reseaux-label::before { animation: none; } } .lien-instagram-footer { background: linear-gradient(90deg, #E7C95B 0%, #D87A9E 48%, #9279C5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 600; transition: opacity 0.25s ease, transform 0.25s ease; } .lien-instagram-footer:hover, .lien-instagram-footer:focus-visible { opacity: 0.82; } .footer-contact a[href*="youtube.com"] { background: linear-gradient(90deg, #E98287 0%, #D95A5A 55%, #E2D9D9 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 600; transition: opacity 0.25s ease; /* Soulignement blanc : le texte est transparent (background-clip), la décoration hériterait sinon d'une couleur parasite. */ text-decoration-color: #FFFFFF; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } .footer-contact a[href*="youtube.com"]:hover, .footer-contact a[href*="youtube.com"]:focus-visible { opacity: 0.82; } .lien-whatsapp-footer { background: linear-gradient(90deg, #A5DDB8 0%, #63C98B 52%, #DCEFE2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 600; } .footer-contact .lien-instagram-footer, .footer-contact .lien-tiktok, .footer-contact .lien-whatsapp-footer, .footer-contact a[href*="youtube.com"] { font-size: 0.86rem; font-weight: 600; text-decoration: underline; transition: opacity 0.25s ease; } .footer-contact .lien-tiktok-handle { font-weight: 600; } .footer-contact .lien-tiktok:hover, .footer-contact .lien-tiktok:focus-visible { opacity: 0.82; transform: none; } /* @iamwum du footer : dégradé Instagram identique au hero RM Club + soulignement blanc (comme YouTube WUM). */ .footer-contact .lien-instagram { background: linear-gradient(90deg, #E7C95B 0%, #D87A9E 48%, #9279C5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-size: 0.86rem; font-weight: 600; text-decoration: underline; text-decoration-color: #FFFFFF; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: opacity 0.25s ease; } .footer-contact .lien-instagram:hover, .footer-contact .lien-instagram:focus-visible { opacity: 0.82; } .footer-cta-whatsapp-label { background: linear-gradient(90deg, #FFFFFF 0%, #D8FFE5 52%, #8FF0B1 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 800; } /* ------------------------------------------------------------------ 5. SECTIONS & LAYOUT GÉNÉRAL ------------------------------------------------------------------ */ section { padding: var(--padding-section); width: 100%; } .section-conteneur { max-width: var(--max-largeur); margin: 0 auto; width: 100%; } /* Les régles .section-label sont définies plus haut (ligne 413) avec le style glassmorphism complet. */ .fond-sombre .section-label { color: var(--aqua-marine); } .fond-sombre-2 .section-label { color: var(--aqua-marine); } .fond-clair .section-label { color: var(--bleu-principal); } .section-titre { font-size: 2.1rem; font-size: clamp(2rem, 5vw, 3rem); text-align: center; margin-bottom: 1rem; line-height: 1.1; } /* H1 HERO — main titles : inline, nowrap, une seule ligne. La taille responsive est définie PAGE PAR PAGE (inline sur chaque

), calibrée sur la longueur exacte du titre de chaque page. / h1.section-titre { display: inline-block; font-size: clamp(2.2rem, 8vw, 3.5rem); white-space: nowrap; overflow: visible; max-width: 100%; letter-spacing: -0.02em; } .fond-sombre .section-titre { color: var(--blanc); } .fond-sombre-2 .section-titre { color: var(--blanc); } .fond-clair .section-titre { color: var(--texte-sombre); } .section-intro { text-align: center; max-width: 660px; margin: 0 auto 1.6rem auto; margin: 0 auto clamp(1.5rem, 3vw, 2rem) auto; font-size: 1.15rem; } .fond-sombre .section-intro { color: #C8C8DA; } .fond-sombre-2 .section-intro { color: #C8C8DA; } .fond-clair .section-intro { color: #4E4E62; } .section-photo { position: sticky; top: 0; isolation: isolate; } / Voile sombre doux (lisibilité texte) / .section-photo::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: var(--overlay-photo); z-index: 0; pointer-events: none; } / Voile lumineux subtil — booste l'exposition sans laver la photo / .section-photo::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 65%), linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.15) 100%); z-index: 0; pointer-events: none; mix-blend-mode: screen; } .section-photo> { position: sticky; top: 0; z-index: 1; } /* Éclaircit l'image de fond (boost luminosité) — spécificité (0,1,1) gagne sur .fond-sombre (0,1,0) pour les sections photo sur fond sombre. / .fond-sombre.section-photo, .section-photo.fond-sombre, .section-photo { background-blend-mode: luminosity; background-color: rgba(255, 255, 255, 0.10); } / ------------------------------------------------------------------ SÉPARATEUR entre 2 sections photo consécutives Ligne dégradée aqua-marine violet + petit halo glow, pour aérer la transition visuelle entre deux .section-photo. N'utilise pas ::before/::after pour ne pas écraser l'overlay sombre du carousel/photo (l'overlay reste prioritaire). ------------------------------------------------------------------ / .section-photo+.section-photo, .entete-formation+.fond-sombre-2, .fond-sombre-2+.fond-sombre.section-photo, .fond-sombre-2+.section-photo { border-top: 2px solid transparent; border-image: linear-gradient(90deg, rgba(113, 244, 179, 0) 0%, rgba(113, 244, 179, 0.9) 20%, rgba(77, 65, 217, 0.8) 50%, rgba(128, 61, 180, 0.9) 80%, rgba(128, 61, 180, 0) 100%) 1; box-shadow: 0 -2px 12px -2px rgba(113, 244, 179, 0.4), 0 -1px 24px -4px rgba(128, 61, 180, 0.3); position: sticky; top: 0; } .fond-sombre { background-color: var(--fond-sombre); color: var(--texte-clair); } .fond-sombre-2 { position: sticky; top: 0; isolation: isolate; background-color: var(--fond-sombre-2); background-image: url('../Image/IMG_1357.JPG'); background-position: center center; background-size: cover; background-repeat: no-repeat; color: var(--texte-clair); } .fond-sombre-2::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: var(--overlay-photo); z-index: 0; pointer-events: none; } .fond-sombre-2> { position: sticky; top: 0; z-index: 1; } .fond-clair { position: sticky; top: 0; overflow: hidden; color: var(--texte-sombre); background: radial-gradient(ellipse at top left, rgba(77, 65, 217, 0.10) 0%, transparent 55%), radial-gradient(ellipse at bottom right, rgba(128, 61, 180, 0.12) 0%, transparent 60%), linear-gradient(180deg, #FFFFFF 0%, #F4F4FA 50%, #FFFFFF 100%); } .fond-clair::before, .fond-clair::after { content: ""; position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: 0; } .fond-clair::before { width: 380px; height: 380px; background: var(--aqua-marine, #71F4B3); top: -120px; right: -100px; opacity: 0.22; } .fond-clair::after { width: 420px; height: 420px; background: var(--violet, #803DB4); bottom: -140px; left: -120px; opacity: 0.18; } .fond-clair>* { position: sticky; top: 0; z-index: 1; } .grille-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } /* ------------------------------------------------------------------ 6. COMPOSANTS : BOUTONS ------------------------------------------------------------------ / .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 2rem; border-radius: 50px; font-weight: 700; font-family: var(--police-titre); font-size: 0.9rem; letter-spacing: 0.03em; transition: var(--transition-lisse); cursor: pointer; border: 2px solid transparent; text-decoration: none; } .btn-primaire { background: var(--gradient-bleu-violet); color: var(--blanc); box-shadow: 0 4px 20px rgba(77, 65, 217, 0.35); } .btn-primaire:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(77, 65, 217, 0.5); opacity: 0.92; } .btn-secondaire { / Style « verre dépoli » — repris du bouton .btn-pdf du hero RM_Club.html (bordure blanche nette + voile blanc translucide + halo lumineux, hover : voile aqua-marine + halo aqua) / border: 2px solid rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.18); box-shadow: 0 0 20px rgba(255, 255, 255, 0.25), 0 4px 16px rgba(0, 0, 0, 0.4); color: var(--blanc); font-weight: 600; } .btn-secondaire:hover { border-color: var(--aqua-marine); background: rgba(113, 244, 179, 0.25); box-shadow: 0 0 25px rgba(113, 244, 179, 0.5), 0 6px 20px rgba(0, 0, 0, 0.5); transform: translateY(-2px); } / Bouton « contour » fantôme (look .btn-secondaire historique, avant verre). Utilisé par les formules RM_Club.html et les réseaux de ressources.html — la classe était référencée dans le HTML mais jamais définie en CSS. / .btn-contour { background: transparent; border-color: rgba(240, 240, 246, 0.35); color: var(--blanc); } .btn-contour:hover { border-color: var(--aqua-marine); color: var(--aqua-marine); transform: translateY(-2px); } .btn-aqua { background-color: var(--aqua-marine); color: #03030A; font-weight: 800; box-shadow: 0 4px 20px rgba(113, 244, 179, 0.3); } .btn-aqua:hover { background-color: transparent; border-color: var(--aqua-marine); color: var(--aqua-marine); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(113, 244, 179, 0.4); } .btn-contour-violet { background: transparent; border-color: var(--aqua-marine); color: var(--aqua-marine); } .btn-contour-violet:hover { background: var(--aqua-marine); color: #03030A; transform: translateY(-2px); } .fond-clair .btn-contour-violet { border-color: var(--bleu-principal); color: var(--bleu-principal); } .fond-clair .btn-contour-violet:hover { background: var(--bleu-principal); color: var(--blanc); } / ------------------------------------------------------------------ 6b. COMPOSANTS : CARTES ------------------------------------------------------------------ Styles réutilisables pour les cartes d'information. Les cartes constituent un composant fondamental du design system WUM. Elles existent sous plusieurs variantes : - .carte = carte générique - .carte-sur-photo = carte avec photographie en arriére-plan - .carte-valeur = carte utilisée dans "Nos Valeurs" IMPORTANT : Le systéme .carte-sur-photo utilise directement le background-image défini sur la carte HTML. Nous n'utilisons volontairement PAS : - de variable CSS --carte-bg ; - d'image positionnée absolument ; - de dépendance à un pseudo-élément pour charger le fichier image. Cette approche est la plus robuste pour cette page car elle correspond au systéme qui fonctionnait déjé avec les visuels WUM. ------------------------------------------------------------------ / .carte { position: sticky; top: 0; isolation: isolate; overflow: hidden; padding: 1.35rem 1.2rem; border-radius: 18px; transition: var(--transition-lisse); background: var(--verre-sombre); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 8px 24px rgba(7, 7, 10, 0.45), 0 16px 48px rgba(77, 65, 217, 0.18), 0 24px 80px rgba(128, 61, 180, 0.10); -webkit-backdrop-filter: blur(18px) saturate(1.35); backdrop-filter: blur(18px) saturate(1.35); } .carte:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 10px 28px rgba(7, 7, 10, 0.55), 0 18px 56px rgba(77, 65, 217, 0.32), 0 28px 96px rgba(128, 61, 180, 0.18), 0 0 0 1px rgba(113, 244, 179, 0.22); } / Tous les éléments placés directement dans une carte restent au-dessus du fond photographique et de son overlay. Le z-index est volontairement positif afin de conserver une hiérarchie claire dans le stacking context créé par .carte. / .carte> { position: sticky; top: 0; z-index: 2; } /* ------------------------------------------------------------------------ CARTES SUR FOND SOMBRE ------------------------------------------------------------------------ Ces cartes sont utilisées lorsque leur parent est .fond-sombre ou .fond-sombre-2. / .fond-sombre .carte, .fond-sombre-2 .carte { background: var(--verre-sombre); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--texte-clair); } / Effet de survol sur les cartes sombres. / .fond-sombre .carte:hover, .fond-sombre-2 .carte:hover { transform: translateY(-6px); border-color: rgba(113, 244, 179, 0.35); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35); } / Titres des cartes placées sur fond sombre. / .fond-sombre .carte h3, .fond-sombre-2 .carte h3 { color: var(--blanc); } / ------------------------------------------------------------------------ CARTES SUR FOND CLAIR ------------------------------------------------------------------------ Les cartes ordinaires utilisent le verre clair. / .fond-clair .carte { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(77, 65, 217, 0.20); box-shadow: 0 8px 28px rgba(15, 15, 24, 0.10), 0 2px 6px rgba(77, 65, 217, 0.08); } / Effet de survol pour les cartes sur fond blanc. / .fond-clair .carte:hover { transform: translateY(-5px); box-shadow: 0 12px 35px rgba(77, 65, 217, 0.12); border-color: rgba(77, 65, 217, 0.28); } / ------------------------------------------------------------------------ ICÔNES ------------------------------------------------------------------------ / .carte-icone { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; font-size: 1.35rem; } / Couleurs des icônes sur fond sombre. / .fond-sombre .carte-icone, .fond-sombre-2 .carte-icone { background: rgba(77, 65, 217, 0.18); color: var(--aqua-marine); } / Couleurs des icônes sur fond clair. / .fond-clair .carte-icone { background: rgba(77, 65, 217, 0.10); color: var(--bleu-principal); } / ------------------------------------------------------------------------ TYPOGRAPHIE DES CARTES ------------------------------------------------------------------------ / .carte h3 { font-size: 1.15rem; margin-bottom: 0.55rem; } .carte p { font-size: 0.9rem; color: var(--texte-secondaire); line-height: 1.6; } .fond-clair .carte h3 { color: var(--texte-sombre); } .fond-clair .carte p { color: var(--texte-secondaire-clair); } / ------------------------------------------------------------------ 6c. CARTES AVEC PHOTOGRAPHIE EN ARRIÈRE-PLAN ------------------------------------------------------------------ CORRECTION DÉFINITIVE DU PROBLÈME DES IMAGES --------------------------------------------- Le fond photographique est déclaré directement dans le HTML : style=" background-image: url('Image/ID WUM - 11.png'); " La classe .carte-sur-photo ne tente donc PAS de récupérer l'image depuis une variable CSS ou une balise . Le navigateur sait exactement quoi charger. Le composant se décompose ainsi : .carte-sur-photo š Å“— background-image š — photographie š Å“— ::before š — overlay sombre š — contenu — texte + icône Cette architecture est volontairement simple et prévisible. ------------------------------------------------------------------ / / ------------------------------------------------------------------------ CONTENEUR PHOTO ------------------------------------------------------------------------ La carte devient le contexte de positionnement de l'overlay. IMPORTANT : On ne remet PAS "background: ..." ici. On laisse le background-image défini directement dans le HTML. / .carte-sur-photo { position: relative; isolation: isolate; overflow: hidden; color: var(--blanc); border: 1px solid rgba(255, 255, 255, 0.14); background-color: #101018; } / ------------------------------------------------------------------------ OVERLAY PHOTOGRAPHIQUE ------------------------------------------------------------------------ Ce pseudo-élément ne contient aucune image. Son seul rôle est d'assombrir la photographie située derriére afin que les titres et paragraphes restent parfaitement lisibles. Il est placé sous le contenu mais AU-DESSUS du background-image. / .carte-sur-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(7, 7, 10, 0.48) 0%, rgba(7, 7, 10, 0.72) 45%, rgba(7, 7, 10, 0.94) 100%); pointer-events: none; } / ------------------------------------------------------------------------ CONTENU AU-DESSUS DE L'OVERLAY ------------------------------------------------------------------------ Le contenu conserve un z-index supérieur au pseudo-élément ::before. / .carte-sur-photo> { position: relative; z-index: 2; } /* Titres et paragraphes des cartes photographiques. Le blanc est imposé pour conserver le contraste quel que soit le visuel utilisé comme arrière-plan. / .carte-sur-photo h3, .carte-sur-photo p { color: var(--blanc) !important; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.80); } / ------------------------------------------------------------------------ EFFET DE SURVOL ------------------------------------------------------------------------ On conserve le déplacement global de la carte. L'image elle-même n'est pas transformée par CSS : cela permet de garder le background-image parfaitement stable et évite les artefacts. / .carte-sur-photo:hover { transform: translateY(-6px); border-color: rgba(113, 244, 179, 0.38); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); } / ------------------------------------------------------------------------ CARTES DE VALEURS ------------------------------------------------------------------------ Les quatre cartes de "Nos Valeurs" sont légérement plus hautes afin d'obtenir une composition équilibrée dans la grille. / .carte-valeur { min-height: 380px; color: var(--blanc); } .carte-valeur::before { background: linear-gradient(135deg, rgba(7, 7, 10, 0.55) 0%, rgba(14, 10, 31, 0.42) 45%, rgba(7, 7, 10, 0.70) 100%); } .carte-valeur::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #71F4B3 0%, #4D41D9 50%, #803DB4 100%); z-index: 1; pointer-events: none; opacity: 0.85; } / Le contenu des cartes de valeurs reste blanc sur photographie. / .carte-valeur h3, .carte-valeur p { color: var(--blanc) !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65); } .carte-valeur h3 { font-size: 1.35rem; margin-bottom: 0.8rem; } .carte-valeur p { font-size: 1.05rem; line-height: 1.7; } / ------------------------------------------------------------------ 6d. ACCESSIBILITÉ / FALLBACK ------------------------------------------------------------------ Si l'utilisateur active la réduction des transparences, on désactive les effets glassmorphism afin de conserver une interface lisible. La photographie reste affichée, mais l'overlay garantit tout de même un contraste convenable. ------------------------------------------------------------------ / @media (prefers-reduced-transparency: reduce) { .carte { -webkit-backdrop-filter: none; backdrop-filter: none; } .carte-sur-photo { background-color: #0F0F18; } .carte-sur-photo::before { background: rgba(7, 7, 10, 0.58); } } / ------------------------------------------------------------------ 7. TIMELINE ------------------------------------------------------------------ / .timeline { position: sticky; top: 0; max-width: 820px; margin: 0 auto; padding: 2rem 0; } .timeline::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 100%; background: linear-gradient(180deg, var(--bleu-principal) 0%, var(--violet) 100%); opacity: 0.35; } .timeline-item { position: sticky; top: 0; width: 50%; padding: 1.5rem 2.5rem; } .timeline-item:nth-child(odd) { left: 0; text-align: right; } .timeline-item:nth-child(even) { left: 50%; text-align: left; } .timeline-point { position: absolute; top: 2rem; width: 14px; height: 14px; border-radius: 50%; background: var(--aqua-marine); border: 3px solid var(--bleu-principal); z-index: 5; } .timeline-item:nth-child(odd) .timeline-point { right: -7px; } .timeline-item:nth-child(even) .timeline-point { left: -7px; } .timeline-date { font-family: var(--police-titre); font-size: 1.1rem; font-weight: 800; color: var(--aqua-marine); margin-bottom: 0.5rem; } .timeline-contenu { background: var(--verre-sombre); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; padding: 1.5rem; -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); } .timeline-contenu h3 { font-size: 1.1rem; color: var(--blanc); margin-bottom: 0.5rem; } .timeline-contenu p { font-size: 0.9rem; color: var(--texte-secondaire); line-height: 1.65; } @media (max-width: 768px) { .timeline::before { left: 20px; } .timeline-item { width: 100%; left: 0 !important; text-align: left !important; padding-left: 50px; padding-right: 0; } .timeline-point { left: 13px !important; right: auto !important; } } / ------------------------------------------------------------------ 8. LES 5 SIGNES DU WAKE UP ------------------------------------------------------------------ / .signes-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 3rem; } .signe-carte { position: sticky; top: 0; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(77, 65, 217, 0.2); border-radius: 16px; padding: 2rem 1.5rem; text-align: center; cursor: default; transition: var(--transition-lisse); overflow: hidden; } .signe-carte::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--gradient-bleu-violet); opacity: 0; transition: var(--transition-lisse); } .signe-carte:hover { border-color: rgba(77, 65, 217, 0.5); transform: translateY(-5px); box-shadow: 0 15px 40px rgba(77, 65, 217, 0.15); } .signe-carte:hover::before { opacity: 1; } .signe-numero { font-family: var(--police-titre); font-size: 2.5rem; font-weight: 900; color: rgba(113, 244, 179, 0.12); line-height: 1; margin-bottom: 0.75rem; transition: var(--transition-lisse); } .signe-carte:hover .signe-numero { color: rgba(113, 244, 179, 0.35); } .signe-icone { font-size: 2rem; margin-bottom: 1rem; display: block; } .signe-titre { font-size: clamp(0.95rem, 2.2vw, 1.25rem); font-weight: 700; color: var(--blanc); margin-bottom: 0.6rem; font-family: var(--police-titre); } .signe-description { font-size: 0.85rem; color: var(--texte-secondaire); line-height: 1.6; } / --- VERSION PHOTO AVANCÉE (Design Premium) --- / .signes-grille-featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; margin-top: 3rem; } .signe-carte-photo { position: sticky; top: 0; border-radius: 18px; overflow: hidden; min-height: auto; border: 1px solid rgba(77, 65, 217, 0.25); transition: var(--transition-lisse); background: var(--fond-sombre-2); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); } .signe-carte-photo:hover { transform: translateY(-6px); border-color: rgba(113, 244, 179, 0.45); box-shadow: 0 20px 50px rgba(77, 65, 217, 0.25); } .signe-carte-photo-visuel { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: var(--gradient-bleu-violet); } .signe-carte-photo-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.2); opacity: 0.55; transition: filter 0.5s ease, opacity 0.5s ease, transform 0.6s ease; } .signe-carte-photo:hover .signe-carte-photo-img:not(.image-manquante) { filter: grayscale(0%) contrast(1.1); opacity: 0.75; transform: scale(1.05); } .signe-carte-photo-img.image-manquante { display: none; } .signe-carte-photo-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: linear-gradient(180deg, rgba(7, 7, 10, 0.62) 0%, rgba(7, 7, 10, 0.82) 42%, rgba(7, 7, 10, 0.96) 100%); transition: var(--transition-lisse); } .signe-carte-photo:hover .signe-carte-photo-overlay { background: linear-gradient(180deg, rgba(77, 65, 217, 0.38) 0%, rgba(7, 7, 10, 0.72) 48%, rgba(7, 7, 10, 0.94) 100%); } / Mobile / tactile : le :hover n'existe pas de faé§on fiable sur écrans tactiles on applique directement la version claire (celle du hover desktop) pour que l'overlay ne paraisse pas trop sombre en mobile. / @media (max-width: 768px) { .signe-carte-photo-overlay { background: linear-gradient(180deg, rgba(77, 65, 217, 0.25) 0%, rgba(7, 7, 10, 0.60) 48%, rgba(7, 7, 10, 0.82) 100%); } / Image légèrement plus présente : moins désaturée, plus lumineuse (équivalent tactile du rendu hover desktop). / .signe-carte-photo-img:not(.image-manquante) { filter: grayscale(15%) contrast(1.05); opacity: 0.80; } } .signe-carte-photo-contenu { position: sticky; top: 0; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.75rem 1.5rem; text-align: left; } .signe-carte-photo .signe-numero { font-size: 2.5rem; font-weight: 900; color: var(--aqua-marine); margin-bottom: 0.5rem; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } .signe-carte-photo .signe-titre { font-size: 1.2rem; font-weight: 700; color: var(--blanc); margin-bottom: 0.65rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } .signe-carte-photo .signe-description { font-size: 0.88rem; color: rgba(240, 240, 246, 0.88); line-height: 1.6; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } .section-signes-featured { background: linear-gradient(160deg, #07070A 0%, #1a1240 50%, #0F0F18 100%); padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2rem); position: sticky; top: 0; overflow: hidden; } .section-signes-featured::before { content: ''; position: absolute; top: -30%; right: -10%; width: 50%; height: 80%; background: radial-gradient(circle, rgba(77, 65, 217, 0.2) 0%, transparent 70%); pointer-events: none; } .section-signes-featured .section-titre, .section-signes-featured .signe-titre { color: var(--blanc); } .section-signes-featured .section-intro { color: var(--texte-secondaire); } / ------------------------------------------------------------------ 9. ACTIVITÉS & ÉVÉNEMENTS ------------------------------------------------------------------ / .activite-vedette { background: linear-gradient(135deg, #3A2A4D 0%, #2A1F38 50%, #3A2A4D 100%); border: 1px solid rgba(128, 61, 180, 0.35); border-radius: 20px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: auto; margin-bottom: 2rem; box-shadow: 0 12px 40px rgba(128, 61, 180, 0.35), 0 4px 16px rgba(77, 65, 217, 0.20); position: sticky; top: 0; } / Halo mauve visible en haut-droite (cohérent avec charte WUM) / .activite-vedette::before { content: ""; position: absolute; top: -30%; right: -10%; width: 60%; height: 120%; background: radial-gradient(circle, rgba(128, 61, 180, 0.35) 0%, transparent 70%); pointer-events: none; z-index: 0; } .activite-vedette> { position: sticky; top: 0; z-index: 1; } .activite-vedette-image { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; } .activite-vedette-contenu { padding: clamp(1.25rem, 3.5vw, 2rem); display: flex; flex-direction: column; justify-content: center; color: var(--blanc); border: 1px solid rgba(184, 179, 255, 0.18); border-radius: 0px 0px 24px 24px; /* Border fixed babyyyy / -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 12px 40px rgba(0, 0, 0, 0.30); background: / Voile sombre global (assombrissement marqué) / linear-gradient(135deg, rgba(7, 7, 10, 0.55) 0%, rgba(7, 7, 10, 0.40) 50%, rgba(7, 7, 10, 0.55) 100%), / Bande aqua diagonale trés atténuée (effet subtil) / linear-gradient(115deg, transparent 0%, transparent 42%, rgba(113, 244, 179, 0.04) 47%, transparent 52%, transparent 100%), / Bande sombre diagonale (profondeur) / linear-gradient(115deg, transparent 0%, transparent 68%, rgba(7, 7, 10, 0.55) 73%, rgba(7, 7, 10, 0.70) 78%, transparent 85%, transparent 100%), / Dégradé oblique corporate : bleu nuit violet profond bleu nuit (moins flashy) / linear-gradient(115deg, #0E0A1F 0%, #1A1140 18%, #2A1F60 38%, #3A2A78 52%, #2D1A60 68%, #1A1140 85%, #0E0A1F 100%); position: sticky; top: 0; } .badge-vedette { position: sticky; top: 0; display: inline-flex; align-items: center; overflow: hidden; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(235, 229, 249, 0.3); border-radius: 12px; color: #EEE9FA; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.4rem 1rem; margin-bottom: 1.25rem; width: fit-content; -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset, 0 6px 18px rgba(7, 7, 10, 0.18); } .badge-vedette::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, 0.14) 50%, transparent 75%); transform: translateX(-120%); animation: badge-liquid-reflet 5s ease-in-out 1.5s infinite; pointer-events: none; } @keyframes badge-liquid-reflet { 0%, 35% { transform: translateX(-120%); } 65%, 100% { transform: translateX(120%); } } / Badge totalement round (variante pill/cercle — classe additionnelle) / .badge-vedette.badge-totalement-round { border-radius: 999px; } / Centre le badge vedette horizontalement dans son conteneur flex / .badge-vedette { margin-left: auto; margin-right: auto; } @media (prefers-reduced-motion: reduce) { .badge-vedette::before { animation: none; } } .activite-vedette-contenu h2 { font-size: 2.4rem; font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; margin-bottom: 1rem; color: var(--blanc); } .activite-vedette-contenu p { font-size: 0.95rem; opacity: 0.9; margin-bottom: 1.5rem; line-height: 1.7; } .activite-meta-info { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 2rem; font-size: 0.9rem; } .activite-meta-info span { opacity: 0.85; display: flex; align-items: flex-start; gap: 0.5rem; line-height: 1.5; min-width: 0; flex-wrap: nowrap; } .activite-meta-info>span>.icone-meta { flex: 0 0 auto; margin-top: 0.18em; } .activite-meta-info>span>strong { flex: 0 0 auto; white-space: nowrap; margin-right: 0.15rem; } .activite-meta-info>span>strong+ { flex: 0 0 auto; min-width: 0; overflow-wrap: anywhere; white-space: normal; } /* ------------------------------------------------------------------ Section événement Vedette (#rm5) — fond clair pour contraster avec la box .activite-vedette (dégradé bleu-violet flashy). Dégradé discret cohérent avec la charte graphique WUM. ------------------------------------------------------------------ / #rm5 { background: radial-gradient(ellipse at top left, rgba(77, 65, 217, 0.06) 0%, transparent 55%), radial-gradient(ellipse at bottom right, rgba(128, 61, 180, 0.08) 0%, transparent 60%), linear-gradient(180deg, #FFFFFF 0%, #F8F8FC 50%, #FFFFFF 100%); color: var(--texte-sombre, #121218); position: sticky; top: 0; overflow: hidden; } / Halo trés subtil (adoucissement) / #rm5::before { content: ""; position: absolute; top: -20%; right: -10%; width: 50%; height: 80%; background: radial-gradient(circle, rgba(113, 244, 179, 0.08) 0%, transparent 70%); pointer-events: none; z-index: 0; } #rm5> { position: sticky; top: 0; z-index: 1; } /* Couleurs de la section #rm5 (labels, labels Vedette) sur fond clair / #rm5 .section-label { color: var(--bleu-principal, #4D41D9); } #rm5 .section-titre { color: var(--texte-sombre, #121218); } / Boutons d'action sous l'événement vedette (responsive) / .activite-vedette-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; position: sticky; top: 0; z-index: 1; justify-content: center; } .activite-vedette-actions .btn { flex: 1 1 auto; min-width: 180px; text-align: center; padding: 0.75rem 1.25rem; font-size: 0.9rem; white-space: normal; word-wrap: break-word; line-height: 1.3; } .activite-vedette-actions .btn:hover { transform: translateY(-2px); } / ------------------------------------------------------------------ CTA PRINCIPAUX — Effets phosphorescents "breathe" (quête de jeu vidéo) - .cta-conference : phosphorescence aqua-marine (couleur du btn) - .cta-banquet : phosphorescence violette (contour + halo) - N'affecte pas la grille ni le responsive - Respecte prefers-reduced-motion ------------------------------------------------------------------ / .cta-principal { position: sticky; top: 0; animation: cta-breathe 2.6s ease-in-out infinite; will-change: transform, box-shadow, filter; } / Phosphorescence AQUA-MARINE pour le CTA Conférence (btn-aqua) / .cta-conference { animation-name: cta-breathe-aqua; } / Phosphorescence VIOLETTE pour le CTA Banquet (btn-secondaire) / .cta-banquet { border-color: rgba(113, 244, 179, 0.55); animation-name: cta-breathe-violet; } / Keyframe générique (au cas où) / @keyframes cta-breathe { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.025); filter: brightness(1.10); } } / Breathe aqua — scale léger + halo aqua-marine qui respire / @keyframes cta-breathe-aqua { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(113, 244, 179, 0.55), 0 0 16px 2px rgba(113, 244, 179, 0.35), 0 4px 20px rgba(77, 65, 217, 0.35); filter: brightness(1) drop-shadow(0 0 0 rgba(113, 244, 179, 0)); } 50% { transform: scale(1.03); box-shadow: 0 0 0 6px rgba(113, 244, 179, 0), 0 0 26px 6px rgba(113, 244, 179, 0.65), 0 8px 30px rgba(77, 65, 217, 0.5); filter: brightness(1.10) drop-shadow(0 0 8px rgba(113, 244, 179, 0.65)); } } / Breathe violet — scale léger + halo violet qui respire / @keyframes cta-breathe-violet { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(128, 61, 180, 0.55), 0 0 16px 2px rgba(128, 61, 180, 0.30), inset 0 0 0 1px rgba(113, 244, 179, 0.35); filter: brightness(1) drop-shadow(0 0 0 rgba(128, 61, 180, 0)); } 50% { transform: scale(1.03); box-shadow: 0 0 0 6px rgba(128, 61, 180, 0), 0 0 26px 6px rgba(128, 61, 180, 0.55), inset 0 0 0 1px rgba(113, 244, 179, 0.65); filter: brightness(1.10) drop-shadow(0 0 8px rgba(128, 61, 180, 0.55)); } } / Hover : animation plus rapide + intensité boostée / .cta-principal:hover, .cta-principal:focus-visible { animation-duration: 1.3s; filter: brightness(1.15) drop-shadow(0 0 12px currentColor); } .cta-principal:focus-visible { outline: 2px solid var(--aqua-marine, #71F4B3); outline-offset: 3px; } / A11y : désactiver pour les utilisateurs réduisant les animations / @media (prefers-reduced-motion: reduce) { .cta-principal, .cta-conference, .cta-banquet { animation: none !important; } } / Responsive : mobile — boutons empilés pleine largeur / @media (max-width: 600px) { .activite-vedette-actions { flex-direction: column; gap: 0.6rem; } .activite-vedette-actions .btn { width: 100%; min-width: 0; padding: 0.85rem 1rem; font-size: 0.88rem; } } / ------------------------------------------------------------------ RM Club — Programme phare (section .activite-vedette sur fond sombre) Cohérent avec la charte WUM : accents aqua-marine + violet. ------------------------------------------------------------------ / #rm-club { position: sticky; top: 0; overflow: hidden; } #rm-club::before { content: ""; position: absolute; top: -30%; right: -15%; width: 50%; height: 90%; background: radial-gradient(circle, rgba(113, 244, 179, 0.08) 0%, transparent 70%); pointer-events: none; z-index: 0; } #rm-club> { position: sticky; top: 0; z-index: 1; } #rm-club .section-label { color: var(--aqua-marine, #71F4B3); } #rm-club .section-titre { color: var(--blanc); } /* CTA RM Club — phosphorescence aqua-marine / .cta-rm-club { animation-name: cta-breathe-aqua; } .activites-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; } .activite-carte { position: sticky; top: 0; isolation: isolate; background: var(--verre-sombre); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; overflow: hidden; transition: var(--transition-lisse); -webkit-backdrop-filter: blur(18px) saturate(1.35); backdrop-filter: blur(18px) saturate(1.35); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22); } .activite-carte:hover { transform: translateY(-5px); border-color: rgba(77, 65, 217, 0.3); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); } .activite-carte-image { width: 100%; height: clamp(140px, 30vw, 200px); object-fit: cover; transition: transform 0.5s ease; } .activite-carte:hover .activite-carte-image { transform: scale(1.03); } .activite-carte-corps { padding: 1.75rem; } .activite-badge { display: inline-block; background: rgba(113, 244, 179, 0.1); color: var(--aqua-marine); font-size: 0.7rem; font-weight: 700; padding: 0.25rem 0.7rem; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem; } .activite-titre { font-size: 1.3rem; font-weight: 700; color: var(--blanc); margin-bottom: 0.5rem; font-family: var(--police-titre); } .activite-description { font-size: 0.88rem; color: var(--texte-secondaire); line-height: 1.65; margin-bottom: 1.25rem; } .activite-infos { display: flex; gap: 1rem; font-size: 0.8rem; color: var(--texte-secondaire); margin-bottom: 1.5rem; flex-wrap: wrap; } .activite-infos span { display: flex; align-items: center; gap: 0.3rem; } / ------------------------------------------------------------------ 10. FORMULAIRES ------------------------------------------------------------------ / .form-section { max-width: 620px; margin: 0 auto; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.07); padding: clamp(1.25rem, 4vw, 2.5rem); border-radius: 18px; box-shadow: var(--glass-shadow); } .form-groupe { margin-bottom: 1.5rem; } .form-etiquette { display: block; font-weight: 600; margin-bottom: 0.5rem; font-size: 0.875rem; color: var(--texte-clair); } .form-controle { width: 100%; padding: 0.85rem 1.1rem; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--texte-clair); font-family: var(--police-corps); font-size: 0.92rem; transition: var(--transition-rapide); } .form-controle:focus, .form-controle:focus-visible { outline: 3px solid var(--focus-anneau); outline-offset: 2px; border-color: var(--aqua-marine); background: rgba(77, 65, 217, 0.12); box-shadow: 0 0 0 3px rgba(113, 244, 179, 0.25); } .form-controle::placeholder { color: var(--texte-secondaire); } select.form-controle { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238A8A9A' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } .case-a-cocher-groupe { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; } .case-a-cocher-etiquette { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.88rem; cursor: pointer; color: var(--texte-clair); line-height: 1.5; } .case-a-cocher-etiquette input[type="checkbox"] { margin-top: 0.2rem; accent-color: var(--bleu-principal); width: 16px; height: 16px; cursor: pointer; } / ------------------------------------------------------------------ 11. ONGLETS (Tabs) ------------------------------------------------------------------ / .onglets-conteneur { max-width: var(--max-largeur); margin: 0 auto; } .onglets-nav { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); padding-bottom: 0; flex-wrap: wrap; } .onglet-btn { background: none; border: none; font-family: var(--police-titre); font-size: 0.95rem; font-weight: 600; color: var(--texte-clair); padding: 0.75rem 1.5rem; cursor: pointer; position: sticky; top: 0; transition: var(--transition-rapide); border-radius: 8px 8px 0 0; } .onglet-btn:hover { color: var(--texte-clair); } .onglet-btn.actif { color: var(--aqua-marine); } .onglet-btn.actif::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: var(--aqua-marine); } .panneau-onglet { display: none; } .panneau-onglet.actif { display: block; animation: apparaitre 0.4s ease forwards; } @keyframes apparaitre { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } / ------------------------------------------------------------------ 12. MODULE D'ONBOARDING ------------------------------------------------------------------ / .wizard-onboarding { max-width: 680px; margin: 0 auto; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 20px; padding: clamp(1.25rem, 4vw, 2.5rem); box-shadow: var(--glass-shadow); } .barre-progression-ext { height: 5px; background: rgba(255, 255, 255, 0.06); border-radius: 3px; margin-bottom: 2rem; overflow: hidden; } .barre-progression-int { height: 100%; background: var(--gradient-aqua); border-radius: 3px; width: 0%; transition: width 0.5s ease; } .etape-question { display: none; } .etape-question.active { display: block; } .question-texte { font-size: 1.2rem; font-weight: 600; margin-bottom: 1.5rem; color: var(--blanc); font-family: var(--police-titre); } .options-reponse { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 2rem; } .btn-option { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); padding: 1rem 1.4rem; border-radius: 12px; color: var(--texte-clair); text-align: left; font-family: var(--police-corps); font-size: 0.92rem; cursor: pointer; transition: var(--transition-rapide); } .btn-option:hover { background: rgba(77, 65, 217, 0.1); border-color: var(--bleu-principal); } .btn-option.selectionne { background: rgba(77, 65, 217, 0.2); border-color: var(--aqua-marine); box-shadow: 0 0 12px rgba(113, 244, 179, 0.12); } .pied-wizard { display: flex; justify-content: space-between; align-items: center; } / ------------------------------------------------------------------ 13. TABLEAU DE BORD DE MOBILISATION ------------------------------------------------------------------ / .dashboard-grille { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; } @media (max-width: 992px) { .dashboard-grille { grid-template-columns: 1fr; } } .db-panneau { background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 18px; padding: 2rem; } .db-titre { font-size: 1.4rem; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); padding-bottom: 0.75rem; color: var(--blanc); } .taches-liste, .talents-liste { display: flex; flex-direction: column; gap: 1rem; } .tache-item { background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; padding: 1.4rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; transition: var(--transition-rapide); } .tache-item:hover { border-color: rgba(113, 244, 179, 0.2); } .talent-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 10px; background: rgba(255, 255, 255, 0.02); } .avatar-talent { width: 34px; height: 34px; border-radius: 50%; background: var(--gradient-bleu-violet); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--blanc); flex-shrink: 0; } .btn-attribuer { background: transparent; border: 1px solid var(--aqua-marine); color: var(--aqua-marine); padding: 0.4rem 1rem; font-size: 0.8rem; border-radius: 8px; cursor: pointer; font-family: var(--police-corps); transition: var(--transition-rapide); } .btn-attribuer:hover { background: var(--aqua-marine); color: var(--noir); } / ------------------------------------------------------------------ 14. FOOTER ------------------------------------------------------------------ / body>footer { position: sticky; top: 0; background: radial-gradient(ellipse 50% 40% at 80% 0%, rgba(128, 61, 180, 0.18) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 10% 100%, rgba(77, 65, 217, 0.15) 0%, transparent 60%), linear-gradient(180deg, #06060C 0%, #03030A 100%); border-top: 1px solid rgba(113, 244, 179, 0.10); padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 2rem) clamp(1.5rem, 4vw, 2rem); color: var(--texte-footer); overflow: hidden; isolation: isolate; } / Les modales sont declarees inline sur plusieurs pages : !important garantit le même comportement de viewport sur Safari et les navigateurs modernes. / @supports (height: 100svh) { .rm5-modal { max-height: calc(100svh - 2rem) !important; } .maintenance { min-height: calc(100svh - 70px - 320px) !important; } } / Pop-up RM5 — responsive sans barre de scroll (sur tous types d'écran) Sélecteur #rm5-popup .rm5-modal (spécificité 0,1,1) + !important pour primer sur les blocs