/* ============================================================= feniks.css — Styles personnalisés du site Feniks Remplace : style.css · custom-style.css · loading-animation.css · form.css ============================================================= */ /* ===[ VARIABLES ]=========================================== */ :root { --primary-color: #C9AC64; /* Or Feniks */ --primary-medium-color: #ead79b; --primary-light-color: #faf5e6; --secondary-color: #000000; /* Noir */ --text-color: #ffffff; --loader-ease: cubic-bezier(.2, .6, .2, 1); } /* ===[ BASE ]================================================ */ /* NE PAS redéfinir body color ici : ud-styles.css gère la couleur de base (--body-color = #637381). Les sections sombres héritent via leurs propres règles. */ /* ===[ LOADER ]============================================== */ html.loading, body.loading { height: 100%; overflow: hidden; background: #fff; overscroll-behavior: none; } /* Bloque l'interaction avec le reste de la page */ body.loading > *:not(.loader) { visibility: hidden; } /* Visite récente détectée avant le CSS (html.no-loader posé dans ) : annule tous les états du loader dès le premier rendu — zéro flash garanti */ html.no-loader .loader { display: none !important; } html.no-loader body.loading { overflow: auto; height: auto; } html.no-loader body.loading > * { visibility: visible !important; } html.no-loader body.loading #app { opacity: 1 !important; } .loader { touch-action: none; position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; background: #fff; z-index: 9999; } body:not(.loading) .loader { display: none; } /* Apparition fluide du contenu une fois le loader terminé */ body.loading #app { opacity: 0; } body:not(.loading) #app { opacity: 1; transition: opacity 0.25s ease; } .loader .visual { inline-size: min(220px, 70vw); aspect-ratio: 1; position: relative; } .loader .phoenix-img { position: absolute; inset: 0; display: block; width: 72%; height: 72%; margin: auto; object-fit: contain; animation: floaty 3.2s var(--loader-ease) infinite; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .08)); } .loader .title { font-weight: 600; letter-spacing: .02em; } .loader .subtitle { color: #6b7280; font-size: .95rem; margin-top: -4px; } .loader .progress { width: min(320px, 84vw); height: 6px; border-radius: 9999px; background: #eceff3; overflow: hidden; } .loader .bar { height: 100%; width: 0%; background: var(--primary-color); transition: width .2s var(--loader-ease); } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { .loader .phoenix-img, .loader .bar { animation: none !important; } } /* ===[ NAVIGATION LANGUE ]=================================== */ .lang-nav { margin-right: auto; } .dropdown-item { padding: 0.3rem; text-align: center; } .dropdown-menu { min-width: auto; padding: 0.2rem; } .flag-icon { font-size: 1.5rem; border-radius: 50%; display: inline-block; width: 1.8rem; height: 1.8rem; } .btn-flag { background: none; border: none; padding: 0; } /* ===[ HERO ]================================================ */ .ud-hero { position: relative; min-height: 750px; display: flex; overflow: hidden; /* Neutralise le background or du template (caché par .ud-hero-banner de toute façon) */ background: var(--primary-color); /* Neutralise le padding-top du template, géré par le positionnement du banner */ padding-top: 180px; } /* Texte blanc dans le hero (section sombre) */ .ud-hero, .ud-hero .ud-hero-content { color: var(--text-color); } .ud-hero-banner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: white; } .ud-hero-banner img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); } /* Overlay sombre par-dessus le banner */ .hero-overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, .4); } /* Conteneur du hero avec débordement masqué */ .hero-container { position: relative; overflow: hidden; } .ud-hero-content { position: relative; z-index: 2; color: var(--text-color); } /* Rangée du logo lettres "F + ENIKS" */ .hero-logo-row { display: flex; justify-content: center; } /* Rangée de la tagline */ .hero-tagline-row { display: flex; justify-content: center; flex-direction: column; align-items: center; } .ud-hero-title { font-size: 3.5rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--text-color); } /* Spécificité 0,2,0 pour battre .ud-hero-content .ud-hero-desc dans ud-styles.css */ .ud-hero-content .ud-hero-desc { font-weight: 600; font-size: 1.8em; color: var(--primary-color); font-family: serif; margin-bottom: 2rem; opacity: 1; /* reset l'opacity: 0.8 imposé par ud-styles */ max-width: none; /* reset le max-width: 600px de ud-styles */ line-height: normal; } .ud-main-btn { background-color: var(--primary-color); color: var(--white); } .ud-main-btn:hover { background-color: var(--text-color); border-color: var(--primary-color); color: var(--secondary-color); } /* ===[ TITRE "FENIKS" (composition lettre + image) ]========= */ .feniks { margin-left: 95px; } .feniks-letter { display: flex; align-items: flex-end; position: relative; left: -100px; } .feniks-title { font-size: 120px !important; font-family: serif; letter-spacing: 6px; } .feniks-img { width: 240px; } .prez { display: flex; flex-direction: column; justify-content: center; align-items: center; } /* ===[ BOUTON RETOUR EN HAUT ]============================== */ /* Reset des styles natifs du