/* Eva Lovinia — Color Pack v1 (couleurs + police uniquement) */ /* Roboto via @import pour éviter de modifier les existants */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); :root{ /* Palette validée */ --eva-bg: #050505; /* principale */ --eva-gold: #F6BB03; /* secondaire */ --eva-gold-2: #D4BB52; /* optionnelle */ --eva-text: #f2f2f2; /* Overrides Bootstrap (si présent) */ --bs-body-bg: var(--eva-bg); --bs-body-color: var(--eva-text); --bs-primary: var(--eva-gold); --bs-warning: var(--eva-gold-2); --bs-link-color: var(--eva-gold); --bs-link-hover-color: #e0aa00; } html, body{ background: var(--eva-bg); color: var(--eva-text); font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; text-rendering: optimizeLegibility; } /* Utilitaires simples (couleurs) */ .text-gold { color: var(--eva-gold) !important; } .text-gold-2 { color: var(--eva-gold-2) !important; } .bg-gold { background: var(--eva-gold) !important; color:#111 !important; } .bg-gold-2 { background: var(--eva-gold-2) !important; color:#111 !important; } .border-gold { border-color: var(--eva-gold) !important; } /* Bouton or (si pas de Bootstrap) */ .btn-gold{ display:inline-block; padding:.6rem 1rem; border-radius:.5rem; background: var(--eva-gold); color:#111; border: 0; text-decoration:none; } .btn-gold:hover{ filter: brightness(0.95); } /* Bouton Bootstrap (si présent) */ .btn.btn-primary{ --bs-btn-bg: var(--eva-gold); --bs-btn-border-color: var(--eva-gold); --bs-btn-hover-bg: #e0aa00; --bs-btn-hover-border-color: #e0aa00; --bs-btn-color: #111; } /* Bandeau / header sobre */ .eva-band{ background: linear-gradient(90deg, var(--eva-gold), var(--eva-gold-2)); color:#111; padding:.5rem 1rem; } /* Liens */ a{ color: var(--eva-gold); } a:hover{ color:#e0aa00; } /* Cartes sombres (si pas de Bootstrap) */ .card-dark{ background: #0c0c0c; border:1px solid #1a1a1a; border-radius: .75rem; padding:1rem; } /* Petits helpers de contraste */ .muted{ color:#cfcfcf; opacity:.85; } hr{ border-color:#1e1e1e; } /* === AUTH AGE (fond logo + carte transparente) === */ .authAge-page{ min-height: 100svh; background-color: var(--eva-bg, #050505); /* Logo centré, pas répété, taille "contain" pour bien tenir sur mobile */ background-image: url('/assets/img/logo v3.svg'); background-repeat: no-repeat; background-position: center center; background-size: min(85vw, 520px); display: grid; place-items: center; padding: 16px; } .authAge-card{ width: 100%; max-width: 720px; border-radius: 14px; background: rgba(5,5,5,.55); /* transparent */ backdrop-filter: blur(6px); /* flou léger */ -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(246,187,3,.35); /* doré discret */ box-shadow: 0 10px 30px rgba(0,0,0,.45); padding: 24px; color: var(--eva-text, #f2f2f2); } .authAge-card h1{ font-size: clamp(1.35rem, 2.5vw, 1.9rem); margin: 0 0 .6rem; line-height: 1.25; } .authAge-card p{ margin: .4rem 0; opacity: .95; } .authAge-card .brand{ font-weight: 700; letter-spacing: .6px; color: var(--eva-gold, #F6BB03); } .authAge-actions{ display: grid; gap: 12px; margin-top: 16px; } .authAge-btn{ display: block; width: 100%; padding: .85rem 1rem; border-radius: 10px; font-weight: 600; border: 1.5px solid var(--eva-gold, #F6BB03); background: transparent; color: var(--eva-gold, #F6BB03); } .authAge-btn--solid{ background: var(--eva-gold, #F6BB03); color: #111; } .authAge-btn:hover{ filter: brightness(1.06); } .authAge-dob{ display: none; margin-top: 14px; padding: 14px; border: 1px dashed #2a2a2a; border-radius: 10px; background: rgba(0,0,0,.25); } .authAge-dob label{ display: block; margin-bottom: 6px; } .authAge-input{ width: 100%; padding: .7rem; border-radius: 8px; border: 1px solid #333; background: #0a0a0a; color: #f2f2f2; } .authAge-note{ border: 1px solid #2a2a2a; border-radius: 8px; padding: 10px; margin-top: 12px; background: rgba(15,15,15,.6); } /* EVA I18N */ .lang-switch{ position: fixed; top: 14px; right: 14px; z-index: 9999; display: inline-flex; gap: 8px; align-items: center; background: rgba(5,5,5,.4); border: 1px solid rgba(246,187,3,.35); border-radius: 999px; padding: 6px 8px; backdrop-filter: blur(6px); } .lang-switch button{ border: 0; outline: 0; cursor: pointer; background: transparent; color: #fff; font-size: 16px; line-height: 1; width: 32px; height: 32px; border-radius: 50%; } .lang-switch button.active{ box-shadow: 0 0 0 2px var(--eva-gold, #F6BB03) inset; } /* AUTH ENTER BTN */ .authEnter{ position: relative; min-height: 100svh; display: grid; place-items: center; padding: 16px; } .authEnter .enter-btn{ display: inline-block; padding: .9rem 1.2rem; border-radius: 999px; background: var(--eva-gold, #F6BB03); color: #111; border: 1px solid rgba(246,187,3,.6); font-weight: 700; letter-spacing: .3px; box-shadow: 0 8px 24px rgba(0,0,0,.35); } .authEnter .enter-btn:hover{ filter: brightness(0.96); } /* On réutilise déjà .authAge-page (logo centré) et .authAge-card (carte) */ .authAge-card{ display:none; } /* par défaut cachée : on affiche après "Entrer" */ /* AUTH ENTER BTN (duplicate kept intentional) */ .authEnter{ position: relative; min-height: 100svh; display: grid; place-items: center; padding: 16px; } .authEnter .enter-btn{ display: inline-block; padding: .9rem 1.2rem; border-radius: 999px; background: var(--eva-gold, #F6BB03); color: #111; border: 1px solid rgba(246,187,3,.6); font-weight: 700; letter-spacing: .3px; box-shadow: 0 8px 24px rgba(0,0,0,.35); } .authEnter .enter-btn:hover{ filter: brightness(0.96); } .authAge-card{ display:none; } /* === EVA TOP BAND === */ .eva-band{ position: relative; z-index: 50; background: var(--eva-gold, #F6BB03); /* secondaire */ color: #111; border-bottom: 1px solid rgba(0,0,0,.1); } .eva-band .inner{ max-width: 1200px; margin: 0 auto; padding: 10px 14px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; } .eva-band .msg{ font-weight: 700; letter-spacing: .3px; } /* Encard des drapeaux (dans le bandeau) */ .lang-card{ display: inline-flex; gap: 8px; align-items: center; background: rgba(255,255,255,.75); color: #111; padding: 6px 8px; border-radius: 999px; border: 1px solid rgba(0,0,0,.1); box-shadow: 0 4px 14px rgba(0,0,0,.08); } .lang-card button{ border: 0; outline: 0; cursor: pointer; background: transparent; width: 32px; height: 32px; border-radius: 50%; font-size: 16px; line-height: 1; } .lang-card button.active{ box-shadow: 0 0 0 2px #111 inset; } /* Empêche le bandeau de chevaucher un contenu sticky éventuel */ body{ padding-top: 0; } /* === EVA BANDEAU AUTH AGE === */ .eva-banner{ width: 100%; background: var(--eva-gold, #F6BB03); color: #111; border-bottom: 1px solid rgba(0,0,0,.1); } .eva-banner .inner{ max-width: 1200px; margin: 0 auto; padding: 10px 20px; display: grid; grid-template-columns: 1fr auto; align-items: center; } .eva-banner .msg{ font-weight: 700; letter-spacing: .3px; text-transform: uppercase; } .eva-banner .lang-card{ display: inline-flex; gap: 8px; align-items: center; background: rgba(255,255,255,.8); color: #111; padding: 6px 8px; border-radius: 999px; border: 1px solid rgba(0,0,0,.15); } .eva-banner .lang-card button{ border: none; outline: none; cursor: pointer; background: transparent; width: 30px; height: 30px; font-size: 16px; border-radius: 50%; } .eva-banner .lang-card button.active{ box-shadow: 0 0 0 2px #111 inset; } /* === FIX BANDEAU AUTH === */ :root{ --eva-banner-h: 60px; } .eva-banner{ position: sticky; /* reste en haut quand on scrolle */ top: 0; z-index: 1000; width: 100%; height: var(--eva-banner-h); background: var(--eva-gold, #F6BB03); color: #111; border-bottom: 1px solid rgba(0,0,0,.1); display: flex; align-items: center; } .eva-banner .inner{ max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; height: 100%; } .eva-banner .msg{ font-weight: 700; letter-spacing: .3px; text-transform: uppercase; } /* encart drapeaux avec vraies icônes */ .eva-banner .lang-card{ display: inline-flex; gap: 8px; align-items: center; background: rgba(255,255,255,.85); color: #111; padding: 6px 8px; border-radius: 999px; border: 1px solid rgba(0,0,0,.15); } .eva-banner .lang-card button{ border: 0; outline: 0; cursor: pointer; background: transparent; width: 32px; height: 32px; border-radius: 50%; padding: 0; display: grid; place-items: center; } .eva-banner .lang-card button.active{ box-shadow: 0 0 0 2px #111 inset; } .eva-banner .lang-card img{ width: 24px; height: 24px; display: block; border-radius: 50%; } .authAge-page{ padding-top: var(--eva-banner-h); } /* --- PATCH CLIC DRAPEAUX --- */ :root{ --eva-banner-h: 60px; } .eva-banner{ position: fixed; /* fixe en haut */ top: 0; left: 0; right: 0; z-index: 9999; /* au-dessus de tout */ } .eva-banner, .eva-banner *{ pointer-events: auto; } .eva-banner .lang-card img{ pointer-events: none; } /* clic passe au bouton */ .authAge-page{ padding-top: var(--eva-banner-h); } /* ne pas recouvrir le contenu */ /* --- BANNER COMMUN --- */ :root{ --eva-banner-h: 60px; } .eva-banner{ position: sticky; top: 0; z-index: 1000; width: 100%; height: var(--eva-banner-h); background: var(--eva-gold, #F6BB03); color: #111; border-bottom: 1px solid rgba(0,0,0,.1); display: flex; align-items: center; } .eva-banner .inner{ max-width: 1200px; margin: 0 auto; width: 100%; padding: 0 20px; height: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; } .eva-banner .msg{ font-weight: 700; letter-spacing: .3px; } /* Encart drapeaux */ #lang-switch.lang-card{ display:inline-flex; gap:8px; align-items:center; background: rgba(255,255,255,.85); padding:6px 8px; border-radius:999px; border:1px solid rgba(0,0,0,.15); } #lang-switch.lang-card button{ border:0; background:transparent; cursor:pointer; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; } #lang-switch.lang-card button.active{ box-shadow:0 0 0 2px #111 inset; } #lang-switch.lang-card img{ width:24px; height:24px; display:block; border-radius:50%; } body[data-page="authAge"].authAge-page{ padding-top: var(--eva-banner-h); } /* === EVA BANNER (FIXED) === */ :root{ --eva-banner-h: 64px; } .eva-banner{ position: fixed; top: 0; left: 0; right: 0; z-index: 1000; width: 100%; height: var(--eva-banner-h); background: var(--eva-gold, #F6BB03); color: #111; border-bottom: 1px solid rgba(0,0,0,.12); display: flex; align-items: center; } .eva-banner .inner{ max-width: 1200px; margin: 0 auto; width: 100%; padding: 0 20px; height: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; } .eva-banner .msg{ font-weight: 700; letter-spacing: .3px; } #lang-switch.lang-card{ display:inline-flex; gap:8px; align-items:center; background: rgba(255,255,255,.9); padding:6px 8px; border-radius:999px; border:1px solid rgba(0,0,0,.15); } #lang-switch.lang-card button{ border:0; background:transparent; cursor:pointer; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; } #lang-switch.lang-card button.active{ box-shadow:0 0 0 2px #111 inset; } #lang-switch.lang-card img{ width:24px; height:24px; display:block; border-radius:50%; } body[data-page="authAge"].authAge-page{ padding-top: var(--eva-banner-h); } /* EVA LAYOUT v20251031 */ :root{ --ev-black:#0B0B0C; --ev-ink:#121315; --ev-gold:#C6A45B; --ev-gold-2:#E4C67A; --ev-gold-3:#8A6B2F; --ev-white:#F5F5F5; --ev-muted:#9AA0A6; --ev-radius:16px; --ev-shadow:0 10px 30px rgba(0,0,0,.35); } body.ev-theme{background:radial-gradient(1200px 800px at 15% 10%, #161616 0%, var(--ev-black) 60%);color:var(--ev-white);} .ev-topbar{background:linear-gradient(90deg,var(--ev-gold-3),var(--ev-gold),var(--ev-gold-2));box-shadow:0 2px 10px rgba(0,0,0,.35);z-index:1035} .ev-topbar .ev-lang{background:rgba(0,0,0,.15);border:0;padding:.25rem .5rem;border-radius:999px;transition:transform .15s ease} .ev-topbar .ev-lang:hover{transform:translateY(-1px)} .ev-topbar-spacer{height:42px} .ev-navbar{backdrop-filter:blur(6px);background:rgba(0,0,0,.35);border-bottom:1px solid rgba(255,255,255,.06);transition:background .25s ease,box-shadow .25s ease} .ev-navbar.is-solid{background:rgba(0,0,0,.8);box-shadow:0 6px 24px rgba(0,0,0,.35)} .ev-logo{filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))} .nav-link{position:relative;font-weight:500;letter-spacing:.25px} .nav-link::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:linear-gradient(90deg,var(--ev-gold-3),var(--ev-gold));transition:width .2s ease} .nav-link:hover::after,.nav-link.active::after{width:100%} .ev-footer{background:#0e0e10;border-top:1px solid rgba(255,255,255,.06)} .ev-card{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:var(--ev-radius);box-shadow:var(--ev-shadow)} .ev-pill{border-radius:999px;padding:.35rem .75rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)} .ev-hero{position:relative;padding:clamp(64px,10vw,120px) 0;background:radial-gradient(900px 600px at right top, rgba(198,164,91,.08), transparent 60%)} .ev-hero h1{font-weight:800;letter-spacing:.4px} @media (max-width:991.98px){.ev-topbar-spacer{height:44px}} /* /EVA LAYOUT v20251031 */ /* EVA PALETTE FROM PDF BEGIN (v20251031) */ :root{ --ev-black:#050505; /* PDF noir profond */ --ev-ink:#0E0E0E; /* texte sur dark (léger contraste) */ --ev-gold:#D4BB52; /* PDF doré principal */ --ev-gold-acc:#F6BB03;/* PDF doré accent/jaune */ --ev-white:#F5F5F5; --ev-muted:#A6A6A6; --ev-radius:16px; --ev-shadow:0 10px 30px rgba(0,0,0,.35); } /* Fond global plus profond et propre */ body.ev-theme{ background: radial-gradient(1200px 800px at 15% 10%, #151515 0%, var(--ev-black) 60%); color: var(--ev-white); } /* Bandeau doré harmonisé avec la palette PDF */ .ev-topbar{ background: linear-gradient(135deg, var(--ev-gold) 0%, var(--ev-gold-acc) 50%, var(--ev-gold) 100%); color:#111; } .ev-topbar .ev-topbar-text{ color:#111; font-weight:700; letter-spacing:.4px; } .ev-topbar .ev-lang{ background:#fff; border:1px solid rgba(0,0,0,.12); box-shadow:0 2px 6px rgba(0,0,0,.15); } /* Navbar: survol classe avec filet doré PDF */ .nav-link::after{ background: linear-gradient(90deg, var(--ev-gold), var(--ev-gold-acc)); } /* Boutons lumineux (cohérents avec la palette) */ .btn-light{ color:#111; border:0; } .btn-light:hover{ filter: brightness(0.95); } .btn-outline-light:hover{ background: rgba(255,255,255,.1); } /* Hero highlight discret en doré PDF */ .ev-hero{ background: radial-gradient(900px 600px at right top, color-mix(in srgb, var(--ev-gold) 20%, transparent), transparent 60%); } /* EVA PALETTE FROM PDF END (v20251031) */ /* EVA TEXT VISIBILITY BEGIN (v20251031) */ body.ev-theme, body.ev-theme p, body.ev-theme li, body.ev-theme span, body.ev-theme a, body.ev-theme .navbar-brand, body.ev-theme .nav-link, body.ev-theme h1, body.ev-theme h2, body.ev-theme h3, body.ev-theme h4, body.ev-theme h5, body.ev-theme h6 { color: var(--ev-white, #F5F5F5) !important; } .ev-topbar, .ev-topbar .ev-topbar-text, .ev-topbar a, .ev-topbar button { color: #111 !important; } .navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-brand { color: rgba(255,255,255,.95) !important; } .ev-safe-text { color: currentColor !important; text-shadow: 0 1px 2px rgba(0,0,0,.25); } .ev-theme * { -webkit-text-fill-color: initial; } .ev-topbar { z-index: 1035; } .ev-navbar { z-index: 1030; } .nav-link::after{ background: linear-gradient(90deg, var(--ev-gold, #D4BB52), var(--ev-gold-acc, #F6BB03)) !important; } /* EVA TEXT VISIBILITY END (v20251031) */ /* EVA TOPBAR CENTER BEGIN */ #ev-topbar .ev-topbar-text{ display:inline-block; text-align:center; color:#111 !important; } #ev-topbar .container{ min-height:42px } .ev-topbar{ z-index:1035; } .ev-navbar{ z-index:1030; } /* EVA TOPBAR CENTER END */ /* Anti overlay noir cliquable + meilleure stabilité */ html, body { overscroll-behavior-x: none; } .ev-theme a.stretched-link { pointer-events:auto; } .ev-hero::before { pointer-events:none; } body.ev-theme, .ev-theme .nav-link, .ev-theme .navbar-brand { color: rgba(255,255,255,.95) !important; } .ev-topbar, .ev-topbar * { color:#111 !important; } /* EVA NAVBAR CENTER v3 BEGIN */ .ev-logo{ height: 52px !important; filter: drop-shadow(0 0 6px rgba(246,187,3,.45)) drop-shadow(0 0 1px rgba(246,187,3,.60)); image-rendering: -webkit-optimize-contrast; transition: transform .25s ease; } .ev-logo:hover{ transform: scale(1.04); } @media (min-width: 992px){ .ev-navbar .container{ display: flex; align-items: center; justify-content: center !important; position: relative; } .ev-navbar .navbar-brand{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .ev-navbar .navbar-collapse{ flex-grow: 0 !important; justify-content: center !important; } .ev-navbar .navbar-toggler{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); } } .ev-navbar{ background: rgba(0,0,0,.80); border-bottom: 1px solid rgba(255,255,255,.06); } .ev-navbar.is-solid{ background: rgba(0,0,0,.92); } .ev-navbar .nav-link{ color: #f5f5f5 !important; font-weight: 700; letter-spacing: .3px; } .ev-navbar .nav-link:hover, .ev-navbar .nav-link.active{ color: var(--eva-gold, var(--ev-gold, #D4BB52)) !important; } /* EVA NAVBAR CENTER v3 END */ :root{ --black:#050505; --gold:#D4BB52; --gold-accent:#F6BB03; --white:#ffffff; --light-600:#bdbdbd; } .bg-deep{ background: linear-gradient(180deg, #0b0b0b 0%, #050505 100%); } .bg-void{ background-color: #050505; } .text-light-600{ color: var(--light-600); } .text-gold-600{ color: var(--gold); } /* ---------- HERO avec carrousel d’arrière-plan ---------- */ .hero-locked{ position: relative; min-height: 86vh; background: #000; /* fond neutre derrière les images */ overflow: hidden; padding-top: calc(var(--navbar-height, 72px) + 24px); } /* Calque des slides */ .hero-slides{ position: absolute; inset: 0; z-index: 1; } /* Chaque image occupe tout le cadre sans déformation (entière visible) */ .hero-slides img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* pour voir 100% de la photo */ background: #000; /* évite flash blanc pendant le fondu */ opacity: 0; animation: heroFade 18s infinite ease-in-out; will-change: opacity; } /* Delays pour 3 images (adapter si + d’images) */ .hero-slides img:nth-child(1){ animation-delay: 0s; } .hero-slides img:nth-child(2){ animation-delay: 6s; } .hero-slides img:nth-child(3){ animation-delay: 12s; } /* Overlay (tes dégradés) au-dessus des images */ .hero-locked .hero-overlay{ position: absolute; inset: 0; z-index: 2; background: radial-gradient(100% 120% at 50% 80%, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 35%, rgba(0,0,0,.75) 100%), linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.7) 100%); pointer-events: none; } /* Contenu par-dessus tout */ .hero-locked .hero-content, .hero-locked .container{ position: relative; z-index: 3; } /* Animation de fondu */ @keyframes heroFade{ 0% { opacity: 0; } 6% { opacity: 1; } 28% { opacity: 1; } 34% { opacity: 0; } 100% { opacity: 0; } } /* Mobile : hauteur un peu plus courte */ @media (max-width: 576px){ .hero-locked{ min-height: 70vh; } } /* ---------- Effets luxe ---------- */ .text-gradient-gold{ background: linear-gradient(90deg, var(--gold-accent), var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .btn-luxe{ background: linear-gradient(90deg, var(--gold-accent), var(--gold)); color: #1a1a1a; border: 0; padding: .7rem 1.25rem; border-radius: 999px; font-weight: 600; box-shadow: 0 0 0 0 rgba(212,187,82,0.0); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .btn-luxe:hover{ transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 8px 24px -8px rgba(212,187,82,.45); } .btn-outline-luxe{ color: var(--gold); border: 1px solid rgba(212,187,82,.6); padding: .7rem 1.25rem; border-radius: 999px; font-weight: 600; background: transparent; transition: border-color .2s ease, color .2s ease, background-color .2s ease; } .btn-outline-luxe:hover{ color: #1a1a1a; background: var(--gold); border-color: var(--gold); } /* ---------- Cards luxe ---------- */ .card-luxe{ background: rgba(12,12,12,.6); border: 1px solid rgba(212,187,82,.25); border-radius: 1rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease; backdrop-filter: blur(4px); } .card-luxe:hover{ transform: translateY(-2px); border-color: rgba(212,187,82,.6); box-shadow: 0 10px 30px -10px rgba(246,187,3,.25); background: rgba(12,12,12,.75); } .card-luxe .card-footer{ background: linear-gradient(90deg, rgba(212,187,82,.08), rgba(246,187,3,.08)); border-top: 1px solid rgba(212,187,82,.25); } .card-luxe .chevron{ color: var(--gold); font-size: 1.25rem; line-height: 1; } /* ---------- Détails ---------- */ .border-top-gold-soft{ border-top: 1px solid rgba(212,187,82,.25); } /* Optionnel : s’assurer que la nav/header reste au-dessus du hero */ .navbar{ position: sticky; top: 0; z-index: 1040; } :root{ --black:#050505; --gold:#D4BB52; --gold-accent:#F6BB03; --white:#F5F5F5; } /* Bouton DA (doré dégradé) */ .btn-da{ background: linear-gradient(90deg, var(--gold), var(--gold-accent)); color: var(--black); border: none; font-weight: 600; letter-spacing: .4px; border-radius: 9999px; /* pill */ padding: .65rem 1.4rem; box-shadow: 0 6px 18px rgba(246,187,3,.18); transition: transform .15s ease, box-shadow .15s ease, filter .2s ease; } .btn-da:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(246,187,3,.28); filter: brightness(1.03); } .btn-da:active{ transform: translateY(0); box-shadow: 0 6px 18px rgba(246,187,3,.18); } .btn-da:focus{ outline: none; box-shadow: 0 0 0 .25rem rgba(212,187,82,.35); } /* Variante contour (si besoin ailleurs) */ .btn-da-outline{ background: transparent; color: var(--gold); border: 1px solid var(--gold); border-radius: 9999px; } .btn-da-outline:hover{ color: var(--black); background: var(--gold); } /* ===== Agenda Eva Lovinia ===== */ .agenda-grid{display:flex;flex-direction:column;gap:.5rem} .agenda-row{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem} .agenda-head>div{text-align:center;font-weight:600;letter-spacing:.3px;color:#D4BB52; padding:.25rem 0;border-bottom:1px solid rgba(212,187,82,.3)} .agenda-cell{ background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.2)); border:1px solid rgba(255,255,255,.06);border-radius:12px; min-height:120px;padding:.5rem .5rem .25rem;position:relative;overflow:hidden } .agenda-cell.out{opacity:.45;filter:saturate(.7)} .agenda-cell.has-reserved{filter:grayscale(.25) brightness(.95)} .agenda-date{position:absolute;top:.4rem;right:.5rem;font-size:.9rem;color:#aaa} .agenda-events{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem} .agenda-item{font-size:.85rem;line-height:1.2;padding:.4rem .5rem;border-radius:8px; display:flex;flex-wrap:wrap;gap:.35rem .5rem;align-items:center} .agenda-item .title{font-weight:600} .agenda-item .time{font-variant-numeric:tabular-nums;opacity:.9} .agenda-item.available{ background:rgba(212,187,82,.12);border:1px solid rgba(212,187,82,.35);color:#D4BB52; } .agenda-item.reserved{ background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#bbb; } .legend-dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%; vertical-align:middle;margin-right:.35rem} .legend-dot.available{background:linear-gradient(90deg,#D4BB52,#F6BB03)} .legend-pill.reserved{display:inline-block;width:1.8rem;height:.55rem;border-radius:999px; vertical-align:middle;background:rgba(255,255,255,.35)} @media(max-width:768px){.agenda-cell{min-height:90px}.agenda-item{font-size:.8rem}} .link-photo { width: 100%; height: 100%; object-fit: contain; /* 🎯 Montre toute l’image */ object-position: center; /* Centre la photo */ background-color: #000; /* Couleur autour si l’image n’est pas 16/9 */ }