/* ============================================================ anim.css — couche d'animation globale (niveau « Modéré ») Active uniquement si (ajouté par anim.js si IntersectionObserver dispo ET prefers-reduced-motion off). Failsafe : si la classe est retirée, tout redevient visible. ============================================================ */ /* 1) Révélation au défilement — entrée raffinée (fondu + glissement + zoom + léger flou) */ html.anim .reveal{ opacity:0; transform:translateY(22px) scale(.985); filter:blur(6px); transition:opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1), filter .65s ease-out; will-change:opacity, transform, filter; } html.anim .reveal.in{ opacity:1; transform:none; filter:none; } /* 2) Cartes : ombre douce au survol (toutes), sans déformer les cadres pleins */ .card{ transition:border-color .3s ease, box-shadow .3s ease; } .card:hover{ box-shadow:0 12px 34px -18px rgba(0,0,0,.6); } /* 2b) Cartes interactives « travaillées » (.fx-card ajouté par anim.js aux cartes de contenu) : élévation fluide + bordure dorée + HALO LUMINEUX QUI SUIT LE CURSEUR (spotlight). */ .fx-card{ position:relative; isolation:isolate; transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; } .fx-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none; opacity:0; transition:opacity .35s ease; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(232,160,32,.16), rgba(232,160,32,.05) 35%, transparent 60%); } .fx-card > *{ position:relative; z-index:1; } .fx-card:hover{ transform:translateY(-4px); border-color:rgba(232,160,32,.55); box-shadow:0 22px 48px -22px rgba(0,0,0,.75), 0 0 0 1px rgba(232,160,32,.22); } .fx-card:hover::before{ opacity:1; } /* Élévation simple sur les cartes de listes (compat) */ .briefing-card, [data-lift]{ transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease; } .briefing-card:hover, [data-lift]:hover{ transform:translateY(-4px); } /* 2c) Lignes de tableau & lignes de liste : surbrillance douce au survol */ tbody tr{ transition:background .2s ease; } tbody tr:hover{ background:rgba(232,160,32,.06); } /* 2d) Léger zoom au survol des lignes de listes (prochains vols, dernières activités…) */ .fx-zoom{ transition:transform .2s cubic-bezier(.2,.7,.2,1), background .2s ease, box-shadow .2s ease; transform-origin:center; cursor:pointer; } .fx-zoom:hover{ transform:scale(1.02); background:rgba(232,160,32,.16); box-shadow:inset 4px 0 0 var(--accent), 0 12px 26px -12px rgba(0,0,0,.65); border-radius:6px; position:relative; z-index:2; } /* 3) Barre de progression de lecture (créée par anim.js) */ #anim-readbar{ position:fixed; top:0; left:0; height:3px; width:0; z-index:9999; background:linear-gradient(90deg, var(--accent), #ffd27a); box-shadow:0 0 10px rgba(232,160,32,.55); pointer-events:none; } /* 4) En-tête briefing : image en zoom lent (Ken Burns) + parallaxe (transform piloté par anim.js) */ .anim-kenburns{ animation:anim-kb 26s ease-in-out infinite alternate; will-change:transform; } @keyframes anim-kb{ from{ transform:scale(1.06) translate(0,0); } to { transform:scale(1.15) translate(-1.5%,-1.5%); } } /* 5) Transition de contenu d'onglet (ajouter .anim-slidein au nouveau contenu) */ .anim-slidein{ animation:anim-slide .35s ease-out; } @keyframes anim-slide{ from{ opacity:0; transform:translateX(14px); } to{ opacity:1; transform:none; } } /* 6) Squelette « shimmer » de chargement (utilitaire .anim-skel) */ .anim-skel{ position:relative; overflow:hidden; background:var(--bg-surface, #1d222c); border-radius:6px; } .anim-skel::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); animation:anim-shimmer 1.3s infinite; } @keyframes anim-shimmer{ 100%{ transform:translateX(100%); } } /* 7) Surbrillance animée des boutons d'action (S'inscrire, etc.) */ .btn-primary{ position:relative; overflow:hidden; transition:box-shadow .25s ease, transform .08s ease, background .2s ease; } .btn-primary::after{ content:""; position:absolute; top:-50%; left:-130%; width:55%; height:200%; background:linear-gradient(120deg, transparent 0, rgba(255,255,255,.55) 50%, transparent 100%); transform:skewX(-20deg); pointer-events:none; transition:left .6s ease; } .btn-primary:hover::after{ left:160%; } /* balayage lumineux au survol */ .btn-primary:hover{ box-shadow:0 0 0 1px rgba(232,160,32,.5), 0 8px 22px -6px rgba(232,160,32,.6); } .btn-primary:active{ transform:scale(.97); } /* Halo pulsé discret pour attirer l'œil sur l'action principale (.btn-cta / [data-glow]) */ html.anim .btn-cta, html.anim [data-glow]{ animation:anim-btnpulse 2.6s ease-in-out infinite; } html.anim .btn-cta:hover, html.anim [data-glow]:hover{ animation:none; } @keyframes anim-btnpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(232,160,32,.45); } 50% { box-shadow:0 0 0 4px rgba(232,160,32,0), 0 0 18px -2px rgba(232,160,32,.7); } } /* Logos du forum : pulsation douce et régulière (respiration), discrète et pro */ html.anim .forum-logo-beat{ animation:anim-logopulse 2.6s ease-in-out infinite; transform-origin:center; will-change:transform; } @keyframes anim-logopulse{ 0%,100%{ transform:scale(1); } 50% { transform:scale(1.12); } } /* Accessibilité : aucune animation si l'utilisateur la désactive */ @media (prefers-reduced-motion:reduce){ .btn-primary::after{ display:none !important; } html.anim .btn-cta, html.anim [data-glow]{ animation:none !important; } html.anim .reveal{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; } .anim-kenburns{ animation:none !important; } .anim-slidein{ animation:none !important; } .anim-skel::after{ animation:none !important; } html.anim .forum-logo-beat{ animation:none !important; transform:none !important; } #anim-readbar{ display:none !important; } .briefing-card:hover, [data-lift]:hover, .fx-card:hover, .fx-zoom:hover{ transform:none !important; } .fx-card::before{ display:none !important; } }