/* Preloader Overlay - injecté via wp_body_open */ /* * DIRECTION ARTISTIQUE (validee client) : "filaments fins flottant dans le vide". * Fond bleu nuit + trame de points discrete = sensation de vide spatial. * Pour ajuster l'ambiance : --pl-bg (fond) et --pl-grid (trame). */ :root { --pl-bg: #0B0F18; --pl-grid: rgba(130, 160, 205, 0.085); --pl-particle: #C8D4E4; } #preloader-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: var(--pl-bg); background-image: radial-gradient(circle, var(--pl-grid) 1px, transparent 1px); background-size: 26px 26px; z-index: 999999; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; visibility: visible; opacity: 1; transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.6s cubic-bezier(0.25, 1, 0.5, 1); } /* État caché après animation (JS ajoute display:none) */ #preloader-overlay.preloader-hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; display: none !important; } /* Verrouillage du scroll pendant que le préloader est actif (géré aussi par JS) */ body.preloader-active { overflow: hidden !important; } /* The preloader overlay (position: fixed, z-index: 999999) covers the page content. No need to hide the content underneath — it renders normally behind the overlay. */ /* SVG Container styling */ .preloader-container { position: relative; width: 280px; height: 280px; /* Les SVG des etapes sont inclus a la suite dans page-preloader.php. Les retours a la ligne entre deux includes forment une ligne de texte invisible qui poussait l'atome de 18px vers le bas — alors que le globe, en position absolue, restait centre. Resultat : l'atome n'etait pas exactement confondu avec le globe, contrairement au brief de l'etape 2. Annuler la hauteur de ligne supprime cette ligne fantome. */ font-size: 0; line-height: 0; margin: 0 auto; padding: 0; flex: none; align-self: center; justify-self: center; /* Ne bloque pas les événements de souris vers la citadelle */ pointer-events: none; } .preloader-svg, #preloader-atomic-svg, #preloader-flower-svg, #preloader-ravenala-svg { width: 100%; height: 100%; display: block; object-fit: contain; object-position: 50% 50%; /* L'atome n'est pas interactif — laisse passer les événements */ pointer-events: none; } /* Base style for elements (hidden by default, intro scale & fade) transform-box: view-box => origin 150px 150px is RELATIVE TO SVG viewBox (0 0 300 300). This gives a perfect geometric pivot regardless of particle asymmetry in each group. */ .preloader-group { transform-box: view-box; transform-origin: 150px 150px; opacity: 0; /* transform: scale(0.2) removed - conflicts with GSAP svgOrigin */ isolation: isolate; } /* Individual slot origins — all use view-box for exact geometric pivot 150,150 in viewBox. */ [data-preloader-el="orbit-1"], [data-preloader-el="orbit-2"], [data-preloader-el="orbit-3"], [data-preloader-el="nucleus"] { transform-box: view-box; transform-origin: 150px 150px; } /* =========================================================== ORBIT ROTATION — gérée par GSAP (preloader.js) Les animations CSS de rotation sont SUPPRIMÉES pour éviter tout conflit avec les animations GSAP (les deux manipulent la propriété transform). =========================================================== */ /* ========================================================================== CSS FALLBACK ANIMATION (Active when GSAP is NOT running) ========================================================================== */ /* CSS FALLBACK: only active when JS is NOT running (html lacks .preloader-js). The inline script in page-preloader.php adds .preloader-js to immediately, so the fallback NEVER fires during normal page load — preventing sequence 1 from appearing while the browser is still refreshing/rendering. */ html:not(.preloader-js) #preloader-overlay .preloader-group { animation: cssPreloaderGrow 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } html:not(.preloader-js) #preloader-overlay [data-preloader-el="orbit-1"] { animation-delay: 0.25s; } html:not(.preloader-js) #preloader-overlay [data-preloader-el="orbit-2"] { animation-delay: 0.4s; } html:not(.preloader-js) #preloader-overlay [data-preloader-el="orbit-3"] { animation-delay: 0.55s; } html:not(.preloader-js) #preloader-overlay [data-preloader-el="nucleus"] { animation-delay: 0.7s; } /* Pulse whole composition gently once loading finishes in CSS fallback */ html:not(.preloader-js) #preloader-overlay .preloader-svg { animation: cssLogoPulse 3s ease-in-out infinite; animation-delay: 1.8s; } /* Auto-hide preloader after 14s as safety fallback if JS is completely broken */ html:not(.preloader-js) #preloader-overlay { animation: cssPreloaderFadeOut 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards; animation-delay: 14s; } @keyframes cssPreloaderGrow { 0% { opacity: 0; /* transform: scale(0.2) removed - conflicts with GSAP svgOrigin */ } 100% { opacity: 1; transform: scale(1); } } @keyframes cssLogoPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } } @keyframes cssPreloaderFadeOut { 0% { opacity: 1; visibility: visible; } 99% { opacity: 0; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } /* ========================================================================== MOBILE & REDUCED MOTION STYLE ========================================================================== */ @media (prefers-reduced-motion: reduce), (max-width: 768px) { #preloader-overlay .preloader-group { opacity: 1; transform: scale(1); transition: none !important; } #preloader-overlay { transition: opacity 0.4s ease, visibility 0.4s ease; } .preloader-svg { animation: mobileLogoPulse 2.5s ease-in-out infinite !important; } } @keyframes mobileLogoPulse { 0%, 100% { transform: scale(0.97); opacity: 0.9; } 50% { transform: scale(1.03); opacity: 1; } } /* ========================================================================== FINAL LOGO CONTAINER (Bird origami in wireframe sphere + typography) ========================================================================== */ /* Container for the final logo stage */ .preloader-logo-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; opacity: 0; transform: scale(0.5); /* Ne bloque pas les événements de souris vers la citadelle */ pointer-events: none; } /* Logo SVG sizing — centered via GSAP xPercent/yPercent (no CSS transform offset) Logo stays perfectly centered with NO downward movement */ .preloader-logo-svg, #preloader-logo-svg { position: absolute; top: 50%; left: 50%; /* Centering handled by GSAP xPercent/yPercent — no CSS transform offset */ /* LARGEUR PROPORTIONNELLE — ne pas remettre une valeur fixe. La citadelle est responsive (90vw, plafonnee a 650px). Avec une largeur fixe, la sphere debordait sur les petales en mobile (132 % du creux sur un ecran de 375px). Le logo doit valoir 36,9 % de la largeur de la citadelle, quel que soit le terme qui plafonne celle-ci. Les trois valeurs sont donc les trois plafonds de la citadelle multiplies par 0,369 : 90vw -> 33.4vw (largeur) 650px -> 240px (plafond absolu) 68vh -> 25.1vh (hauteur — sans lui, le logo garderait sa taille alors que la citadelle retrecit sur un ecran bas) */ width: min(33.4vw, 240px, 25.1vh); height: auto; max-width: 100%; max-height: 100%; display: block; margin: 0; opacity: 0; /* Le logo reste au-dessus de la citadelle pendant la séquence 3 */ z-index: 20; pointer-events: none; } /* #logo-graphic uses view-box so elastic.out scale pivots at the atom center (150,150) regardless of the 6px dy offset in the drop-shadow filter that pollutes fill-box */ #logo-graphic { transform-box: view-box; transform-origin: 150px 150px; } /* Active state during GSAP animation - filled by JS */ .preloader-logo-container.preloader-logo-visible { opacity: 1; transform: scale(1); } /* Reduced motion / mobile fallback */ @media (prefers-reduced-motion: reduce), (max-width: 768px) { .preloader-logo-container { opacity: 1; transform: scale(1); } } #preloader-citadel-svg { /* LA HAUTEUR COMPTE AUTANT QUE LA LARGEUR. La citadelle est haute : sa hauteur vaut 1,367 x sa largeur (viewBox 600 x 820). Dimensionnee sur la seule largeur, elle mesurait 888px de haut sur un portable 15 pouces qui n'offre que 880px : le bas sortait de l'ecran, emportant le nom central ET la bande des pays. Le terme 68vh garantit que TOUT le SVG tient dans la fenetre (68 x 1,367 = 93vh), quelle que soit la forme de l'ecran. */ width: min(90vw, 650px, 68vh); height: auto; /* La citadelle est en dessous du logo (z-index: 20) */ z-index: 10; /* La citadelle DOIT recevoir les événements de souris pour le hover */ pointer-events: all; } /* Effet hover sur les pétales de la citadelle (géré par GSAP dans preloader.js). Les listeners mouseenter/mouseleave sont attachés APRÈS l'animation d'entrée des pétales pour éviter tout conflit de transform. */ #preloader-citadel-svg [data-preloader-el="citadel-petal"] { pointer-events: all; cursor: pointer; transform-box: view-box; transform-origin: 300px 300px; } /* ============================================================= CHAMP DE PARTICULES ("flottement dans le vide") Les points sont generes par preloader.js puis animes en derive lente. Purement decoratif : aucune interaction, aria-hidden. ============================================================= */ .preloader-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .preloader-particles span { position: absolute; border-radius: 50%; background: var(--pl-particle); /* Halo doux : c'est lui qui donne l'aspect "poussiere d'etoile" */ box-shadow: 0 0 6px 1px rgba(200, 212, 228, 0.35); will-change: transform, opacity; } /* Le contenu anime reste au-dessus du champ de particules */ #preloader-overlay .preloader-container { position: relative; z-index: 1; } /* Accessibilite : pas de derive si l'utilisateur limite les animations */ @media (prefers-reduced-motion: reduce) { .preloader-particles span { animation: none !important; } } /* ============================================================= SATELLITES EN ORBITE ("petites etoiles qui gravitent") Chaque satellite est un anneau invisible centre a l'ecran, qui porte un point colore sur son bord. En faisant tourner l'anneau, le point decrit une orbite autour du globe central. Le centrage se fait par marges negatives (et NON par transform) pour laisser la propriete transform libre pour la rotation GSAP. ============================================================= */ .preloader-orbiters { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; /* Invisibles a l'ouverture : reveles par GSAP a l'etape citadelle */ opacity: 0; } .preloader-orbit { position: absolute; top: 50%; left: 50%; border-radius: 50%; will-change: transform; } /* Le point colore, pose sur le bord haut de son anneau */ .preloader-orbit > span { position: absolute; top: 0; left: 50%; margin-left: -2px; margin-top: -2px; border-radius: 50%; display: block; } @media (prefers-reduced-motion: reduce) { .preloader-orbiters { display: none; } } /* ============================================================= ETAPE 2 — LE GLOBE FILAIRE Place en arriere-plan de l'atome : plus large que lui, centre, et sous les autres couches (z-index 1 contre 2 pour l'atome). Invisible au depart, revele par GSAP a l'etape 2. ============================================================= */ #preloader-globe-svg { position: absolute; top: 50%; left: 50%; width: 165%; height: auto; /* Centrage par MARGES NEGATIVES (moitie de la largeur), et non par transform : la propriete transform doit rester libre pour GSAP, et le globe doit etre centre des la premiere image — avant tout tween. */ margin-left: -82.5%; margin-top: -82.5%; z-index: 1; opacity: 0; pointer-events: none; overflow: visible; } /* L'atome et le logo restent au premier plan */ #preloader-atomic-svg { position: relative; z-index: 2; } @media (max-width: 768px) { /* Sur petit ecran, le globe deborderait : on le resserre */ /* Le globe v2 dessine sa silhouette jusqu'au bord de son viewBox : a 128 % il ne restait que 5px de marge sur un ecran de 390px, et un telephone plus etroit la coupait. 116 % laisse ~25px de chaque cote. */ #preloader-globe-svg { width: 116%; margin-left: -58%; margin-top: -58%; } } /* ============================================================= NOYAU CLIQUABLE — affordance "assistant" Le centre est la porte d'entree du site : il doit se lire comme un element vivant et cliquable, pas comme un simple decor. ============================================================= */ /* Le SVG du logo laisse passer les clics SAUF sur la zone du noyau */ #preloader-logo-svg .core-hit { pointer-events: all; cursor: pointer; } /* L'aura ne doit jamais intercepter le curseur */ #preloader-logo-svg .core-aura { pointer-events: none; } /* Le halo reagit au survol : la lumiere se renforce */ #preloader-logo-svg .core-glow { transition: opacity 0.35s ease; } #preloader-logo-svg .core-hit:hover ~ .core-glow, #preloader-logo-svg:hover .core-glow { opacity: 1; } /* Accessibilite : focus clavier visible */ #preloader-logo-svg .core-hit:focus-visible { outline: 2px solid #7FD8F0; outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { #preloader-logo-svg .core-ping { display: none; } } /* ============================================================= ETAPE 3 — LES SILHOUETTES Meme cadrage que le globe (165 %) pour que les personnes se posent exactement dessus. Centrage par marges, jamais par transform : GSAP doit rester libre d'animer l'echelle. ============================================================= */ #preloader-people-svg { position: absolute; top: 50%; left: 50%; width: 165%; height: auto; margin-left: -82.5%; margin-top: -82.5%; z-index: 1; opacity: 0; pointer-events: none; overflow: visible; } /* Chaque silhouette est masquee au depart : GSAP les revele une a une */ #preloader-people-svg .person { opacity: 0; } @media (max-width: 768px) { #preloader-people-svg { width: 128%; margin-left: -64%; margin-top: -64%; } } /* ============================================================= ETAPE 4 — LES BRANCHES Meme principe de centrage que le globe : marges negatives, pour laisser transform libre a GSAP. ============================================================= */ #preloader-branches-svg { position: absolute; top: 50%; left: 50%; width: 210%; margin-left: -105%; margin-top: -105%; height: auto; z-index: 3; opacity: 0; pointer-events: none; overflow: visible; } @media (max-width: 768px) { #preloader-branches-svg { width: 160%; margin-left: -80%; margin-top: -80%; } } /* ============================================================ SCENE 3D PAR BRANCHE (phase "landed") - brief client 10/08/2026 ------------------------------------------------------------ Le rendu 3D est un canvas plein ecran. Les libelles, eux, restent du HTML positionne par projection : c'est bien plus net que du texte dans la scene, et ca reste selectionnable/accessible. Pilote par preloader-3d.js. Voir preloader-worlds.js pour le contenu. ============================================================ */ #preloader-3d { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000000; /* juste au-dessus de #preloader-overlay (999999) */ background: #0B0F18; opacity: 0; visibility: hidden; transition: opacity 0.65s ease; } #preloader-3d.is-open { opacity: 1; visibility: visible; } /* Pendant le retour "warp", la scene s'efface pendant que le ciel s'etire */ #preloader-3d.is-warping { opacity: 0; transition: opacity 0.55s ease-in; } /* three.js ecrit une largeur/hauteur en pixels directement sur le canvas. On force le remplissage en CSS : sinon, un redimensionnement survenu avant l'ouverture de la scene laisse un canvas plus petit que l'ecran, avec une bande noire sur le cote (constate en mobile). */ .p3d-canvas { position: absolute; top: 0; left: 0; display: block; width: 100% !important; height: 100% !important; } .p3d-labels { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* les libelles ne doivent jamais bloquer la molette */ overflow: hidden; } /* Positionnement : preloader-3d.js ecrit `transform` a chaque frame. NE PAS ajouter de transform ici - il serait ecrase (meme piege que GSAP). Pour decaler un libelle par rapport a son noeud, utiliser `margin`. */ .p3d-label { position: absolute; top: 0; left: 0; white-space: nowrap; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #E8EEF6; opacity: 0; will-change: transform, opacity; } .p3d-label-cat { margin-top: 44px; /* sous le noeud, pas dessus */ font-size: 14px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; transition: font-size 0.35s ease, letter-spacing 0.35s ease; } /* Le noeud focal : halo + libelle garantis lisibles (exigence client) */ .p3d-label-cat.is-focal { font-size: 19px; letter-spacing: 0.2em; text-shadow: 0 0 14px var(--p3d-accent, #5A7BA8), 0 0 34px rgba(11, 15, 24, 0.95); } .p3d-label-sub { margin-top: 20px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; color: rgba(232, 238, 246, 0.82); text-shadow: 0 0 12px rgba(11, 15, 24, 0.9); } /* Aide a la navigation, effacee au bout de quelques secondes */ .p3d-hint { position: absolute; left: 50%; bottom: 34px; margin: 0; transform: translateX(-50%); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(232, 238, 246, 0.5); pointer-events: none; opacity: 1; transition: opacity 0.8s ease; } .p3d-hint.is-hidden { opacity: 0; } @media (max-width: 767px) { .p3d-label-cat { font-size: 12px; margin-top: 38px; } .p3d-label-cat.is-focal { font-size: 16px; } .p3d-label-sub { font-size: 10.5px; } .p3d-hint { font-size: 10px; bottom: 22px; padding: 0 18px; text-align: center; } } /* Respect de "prefers-reduced-motion" : on garde la scene, on retire le glissement */ @media (prefers-reduced-motion: reduce) { #preloader-3d { transition: opacity 0.2s linear; } .p3d-label-cat { transition: none; } } /* ============================================================ LES 7 BRANCHES EN COURONNE ORBITALE (desktop) ------------------------------------------------------------ Les departements "Business Social" tournent autour du globe comme des satellites, chacun sur un plan de profondeur qui change en continu : un mot qui passe DERRIERE devient plus petit, plus bleu et plus flou ; en revenant devant il grandit et redevient net. Le texte ne se retourne jamais. ⚠ AUCUN `transform` ICI. preloader.js ecrit `transform` a chaque image pour placer le mot sur son orbite. Une regle CSS de positionnement (left/top/translate) serait soit ecrasee, soit viendrait se cumuler et decaler toute la couronne. ============================================================ */ /* Fonte auto-hebergee : le preloader ne doit dependre d'aucun service exterieur. Fichiers variables (une seule ressource par jeu de caracteres couvre les graisses 500 et 600). Voir fonts/LICENCE.md. */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/space-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } #preloader-branches-float { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* la couche couvre tout l'ecran : sans ca elle vole les clics des pans */ z-index: 5; /* sous la citadelle (10) et sous le logo (20) */ /* En dessous de 1100px la couronne viendrait se poser sur la citadelle : il n'y a plus assez de vide autour d'elle pour la faire tourner. */ display: none; } @media (min-width: 1100px) { #preloader-branches-float { display: block; } } /* Couche jumelle : elle porte les mots qui passent DEVANT la citadelle. Creee par preloader.js, elle vit au-dessus d elle (z-index 15) alors que #preloader-branches-float reste dessous (5). C est ce qui donne la vraie sensation d orbite : le mot disparait derriere le globe puis repasse devant. */ #preloader-branches-front { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 15; display: none; } @media (min-width: 1100px) { #preloader-branches-front { display: block; } } /* Le filament et le noeud de chaque mot, traces par preloader.js */ #preloader-branches-orbit { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .pbf-item { position: absolute; top: 0; left: 0; white-space: nowrap; font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 500; letter-spacing: 0.07em; color: #C8D4E4; opacity: 0; /* revele par GSAP, un mot apres l'autre */ will-change: transform, opacity, filter; /* Le mot est place par son centre : preloader.js applique translate(-50%,-50%) puis la position orbitale. */ } /* Trois poids visuels, valides avec le client. */ .pbf-principale { font-size: 40px; font-weight: 600; letter-spacing: 0.09em; } .pbf-forte { font-size: 33px; font-weight: 600; } .pbf-moyenne { font-size: 27px; font-weight: 500; } /* Un mot au premier plan recoit un accent discret — classe posee par le JS selon sa profondeur reelle, pas selon son intitule. */ .pbf-item.is-avant { color: #78D8EF; } @media (max-width: 1439px) { .pbf-principale { font-size: 34px; } .pbf-forte { font-size: 28px; } .pbf-moyenne { font-size: 23px; } } @media (prefers-reduced-motion: reduce) { .pbf-item { will-change: auto; } }