/* ===================================================================== * HolyProject — feuille de style du socle (Lot 1 UX). * * Le THÈME re-skinne Bootstrap via 6 variables CSS (préfixe --hp-), * injectées dans :root par Support\Theme::cssVars() (cf. ). Cette * feuille ne consomme QUE ces variables pour les COULEURS — jamais de * couleur de palette en dur. Les ombres / filets / voiles translucides * utilisent du noir/blanc neutre (rgba) : ce ne sont pas des couleurs de * thème, juste de la profondeur. Les 6 variables du contrat : * --hp-grad-from, --hp-grad-to, --hp-accent, --hp-accent-contrast, * --hp-radius, --hp-surface. * Bootstrap reste le moteur responsive (grille, breakpoints, offcanvas). * ===================================================================== */ /* --- Fond de page : dégradé de thème, fixe (ne défile pas). ------------ */ body { background: linear-gradient(135deg, var(--hp-grad-from), var(--hp-grad-to)) fixed; min-height: 100vh; color: #1f2733; } /* ===================================================================== * Bandeau global (pleine largeur, sticky). .hp-navbar porte fond + ombre. * ===================================================================== */ .hp-navbar { background-color: var(--hp-surface); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 2px 12px rgba(0, 0, 0, .08); padding-top: .5rem; padding-bottom: .5rem; } .hp-navbar .navbar-brand { font-size: 1.2rem; letter-spacing: -.01em; } /* Liens de navigation : pilule au survol, accent sur l'actif. */ .hp-navbar .nav-link { border-radius: 999px; color: #354154; font-weight: 500; transition: background-color .15s ease, color .15s ease; } .hp-navbar .nav-link:hover, .hp-navbar .nav-link:focus-visible { background-color: rgba(0, 0, 0, .05); color: #111; } .hp-navbar .nav-link[aria-current="page"] { color: var(--hp-accent); font-weight: 700; } /* Panneau offcanvas (mobile) habillé par la surface de thème. */ .hp-offcanvas { background-color: var(--hp-surface); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); } /* Pastille de marque / icônes d'accent dans le bandeau. */ .hp-accent { color: var(--hp-accent); } /* Sélecteur de langue : conserve sa forme même replié en colonne. */ .hp-lang { align-self: center; } /* ===================================================================== * Cartes : rayon de thème + ombre douce + léger soulèvement au survol. * ===================================================================== */ .card { border: none; border-radius: var(--hp-radius); box-shadow: 0 6px 24px rgba(0, 0, 0, .08); transition: transform .18s ease, box-shadow .18s ease; } .card.shadow-lg { box-shadow: 0 12px 40px rgba(0, 0, 0, .14) !important; } /* Cartes-liens (cliquables) : soulèvement discret au survol. */ a.card:hover, .card.hp-hover:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0, 0, 0, .16); } /* Surface translucide de thème (cartes posées sur le dégradé). */ .hp-surface { background-color: var(--hp-surface); border-radius: var(--hp-radius); } /* ===================================================================== * Accent de thème : boutons primaires & liens. * ===================================================================== */ .btn { border-radius: 999px; font-weight: 500; } .btn-primary { background-color: var(--hp-accent); border-color: var(--hp-accent); color: var(--hp-accent-contrast); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--hp-accent); border-color: var(--hp-accent); color: var(--hp-accent-contrast); filter: brightness(.92); } .btn-outline-primary { color: var(--hp-accent); border-color: var(--hp-accent); } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { background-color: var(--hp-accent); border-color: var(--hp-accent); color: var(--hp-accent-contrast); } a { color: var(--hp-accent); text-underline-offset: .15em; } /* Anneau de focus accessible, teinté par l'accent. */ .btn:focus-visible, .form-control:focus, .form-select:focus { border-color: var(--hp-accent); box-shadow: 0 0 0 .2rem rgba(0, 0, 0, .12); outline: none; } /* Pied de page discret. */ footer .small { opacity: .95; }