/* ========================================================= 1) BASE & VARIABLES ========================================================= */ :root{ --bg:#0b0b0c; --fg:#ffffff; --gold:#d7c07f; --gray:#999; --card:#151515; } *{ box-sizing:border-box; margin:0; padding:0; } a{ color:inherit; text-decoration:none; } h1,h2,h3{ font-family:Merriweather, Georgia, serif; } /* ========================================================= 2) FOND GLOBAL — UNIFORME, SANS BANDES ========================================================= */ /* Le fond “solide” vit sur */ html{ background: var(--bg); /* vignette douce optionnelle pour focaliser le regard */ box-shadow: inset 0 0 120px rgba(0,0,0,.42); } /* transparent (pour voir l’overlay), typographie globale */ body{ color: var(--fg); font-family:"Poppins", Arial, sans-serif; line-height:1.6; background: transparent; position: relative; z-index: 0; } /* Overlay doré sombre, fixe, ultra large (pas de bandes) */ body::before{ content:""; position: fixed; inset: -12vmax; /* dépasse pour éviter les coutures */ z-index: -1; pointer-events: none; background: radial-gradient(120vmax 80vmax at 15% 10%, rgba(215,192,127,.085), transparent 70%), radial-gradient(100vmax 70vmax at 85% 20%, rgba(255,231,170,.06), transparent 78%), radial-gradient(160vmax 120vmax at 50% 120%, rgba(215,192,127,.05), transparent 75%); filter: blur(8px) saturate(105%); animation: pageHalo 90s ease-in-out infinite alternate; } @keyframes pageHalo{ 0% { transform: translate3d(0,0,0) scale(1); opacity:.78; } 100% { transform: translate3d(-3vmax,2vmax,0) scale(1.01); opacity:.86; } } /* ========================================================= 3) PROGRESSIVE ENHANCEMENT (Patch .js) – REVEAL ========================================================= */ /* Par défaut : visible même si JS KO */ .reveal { opacity: 1; transform: none; } /* Si JS actif : prépare l'animation */ .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; } /* États affichés */ .js .reveal.show, .js .reveal.is-visible { opacity: 1; transform: none; } /* ========================================================= 4) LAYOUT ========================================================= */ .container{ width:90%; max-width:1100px; margin:0 auto; padding:20px; } /* Toutes les sections doivent rester transparentes */ .section{ padding:56px 0; background: transparent !important; } /* ========================================================= 5) HEADER & NAV ========================================================= */ .topbar{ background:rgb(11, 11, 12); border-bottom:1px solid rgba(255,255,255,.08); position: sticky; top: 0px; /* sous la barre de 5px */ z-index: 9998; } .topbar .container{ display:flex; align-items:center; justify-content:space-between; min-height:64px; } .logo{ font-family:Merriweather, Georgia, serif; font-weight:700; color:var(--gold); letter-spacing:.3px; font-size:24px; line-height:1.1; } /* Nav (desktop) */ .menu{ display:flex; align-items:center; gap:22px; } .menu a{ position:relative; padding:8px 0; font-weight:500; } .menu a::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--gold); transition:width .18s ease; } .menu a:hover::after{ width:100%; } /* CTA */ .menu .cta{ background:var(--gold); color:#111; padding:9px 14px; border-radius:999px; font-weight:700; } .menu .cta:hover{ filter:brightness(1.06); } /* Burger (mobile) */ .burger{ display:none; background:transparent; border:1px solid rgba(255,255,255,.22); color:var(--fg); padding:6px 10px; border-radius:10px; font-size:20px; } /* ========================================================= 6) FOOTER ========================================================= */ footer{ border-top:1px solid rgba(255,255,255,.1); text-align:center; padding:30px 0; font-size:.9rem; color:var(--gray); background: transparent !important; } /* ========================================================= 7) HERO ========================================================= */ .hero-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap:40px; align-items:center; min-height:520px; background: transparent !important; } .hero-title{ font-size:48px; line-height:1.12; margin:0 0 8px 0; } .gold{ color:var(--gold); } .hero-subtitle{ color:#cfcfcf; font-weight:600; letter-spacing:.02em; margin:0 0 16px 0; } .hero-card{ background:var(--card); border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:18px 20px; max-width:420px; margin:0 0 16px 0; box-shadow:0 12px 40px rgba(0,0,0,.35); } .hero-text{ color:#ddd; } /* Bouton CTA */ .hero-cta{ position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); color: #111; font-weight: 700; letter-spacing: .2px; background: linear-gradient(135deg, var(--gold) 0%, #ffe09b 50%, var(--gold) 100%); box-shadow: 0 8px 24px rgba(215,192,127,.25), inset 0 -2px 0 rgba(0,0,0,.15); transform: translateZ(0); transition: transform .15s ease, box-shadow .2s ease, filter .2s ease; } .hero-cta:hover{ transform: translateY(-1px); box-shadow: 0 12px 32px rgba(215,192,127,.32), inset 0 -2px 0 rgba(0,0,0,.18); filter: saturate(1.02); } .hero-cta:active{ transform: translateY(0); box-shadow: 0 6px 16px rgba(215,192,127,.22), inset 0 1px 0 rgba(0,0,0,.12); } .hero-cta:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(215,192,127,.35), 0 10px 30px rgba(215,192,127,.28); } /* Glow doux */ .hero-cta::before{ content:""; position:absolute; inset:-2px; border-radius: inherit; background: radial-gradient(60% 100% at 50% 0, rgba(215,192,127,.35), transparent 60%); filter: blur(10px); opacity: 0; transition: opacity .25s ease; pointer-events: none; } .hero-cta:hover::before{ opacity:.6; } /* Shimmer */ .hero-cta::after{ content:""; position:absolute; inset:0; border-radius: inherit; background: radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 40%), linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%); mix-blend-mode: screen; opacity: 0; transform: translateX(-30%); transition: opacity .35s ease, transform .55s ease; pointer-events: none; } .hero-cta:hover::after{ opacity:.7; transform:translateX(0%); } /* Carte image */ .media-card{ background:var(--card); border:1px solid rgba(255,255,255,.10); border-radius:16px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.45); max-width:6000px; margin-left:auto; } .media-card img{ display:block; width:175%; height:auto; } /* ========================================================= 8) DIVIDERS — FONDU SANS COUPURE ========================================================= */ .divider-fade{ position: relative; height: 110px; background: transparent !important; /* aucune nouvelle couleur */ overflow: hidden; opacity: 1; transform: none; } .divider-fade::before{ content:""; position:absolute; inset:0; background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 55%, rgba(0,0,0,.18) 100% ); pointer-events: none; } /* Reveal si JS actif */ .js .divider-fade{ opacity:0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; } .js .divider-fade.show, .js .divider-fade.is-visible{ opacity:1; transform:none; } /* ========================================================= 9) SECTION HEADINGS ========================================================= */ .h2{ font-size: 34px; line-height: 1.15; margin-bottom: 10px; } .section-sub{ color:#cfcfcf; margin-bottom: 22px; } .section-head{ margin-bottom: 18px; } /* ========================================================= 10) BENEFITS GRID ========================================================= */ .benefits-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; background: transparent !important; } .benefit-card{ background: var(--card); border:1px solid rgba(255,255,255,.10); border-radius: 16px; padding: 18px; box-shadow: 0 12px 40px rgba(0,0,0,.32); position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease; } /* liseré doré */ .benefit-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity:.65; } .benefit-card:hover{ transform: translateY(-2px); border-color: rgba(215,192,127,.30); box-shadow: 0 16px 44px rgba(0,0,0,.38), 0 0 0 1px rgba(215,192,127,.10) inset; } .benefit-card .ico{ width:40px; height:40px; display:grid; place-items:center; border-radius:10px; background: rgba(215,192,127,.12); border:1px solid rgba(215,192,127,.35); color: var(--gold); font-size: 20px; margin-bottom: 12px; } .benefit-card h3{ font-size: 20px; margin-bottom: 8px; } .benefit-card p{ color:#ddd; } /* Stagger */ .d0{ transition-delay: .05s; } .d1{ transition-delay: .18s; } .d2{ transition-delay: .31s; } .d3{ transition-delay: .44s; } .d4{ transition-delay: .57s; } .d5{ transition-delay: .70s; } /* ========================================================= 11) STORY / TIMELINE ========================================================= */ .timeline{ position:relative; max-width:1000px; margin:40px auto 0; padding:0; list-style:none; background: transparent !important; } .timeline-track{ position:absolute; left:50%; top:0; bottom:0; width:3px; transform:translateX(-50%); background: linear-gradient(to bottom, rgba(255,255,255,.09), rgba(255,255,255,.14)); border-radius:2px; box-shadow: inset 0 0 1px rgba(0,0,0,.35); } .timeline-progress{ position:absolute; left:50%; top:0; width:3px; height:0%; transform:translateX(-50%); background: linear-gradient(to bottom, var(--gold), #b6934f); border-radius:2px; box-shadow: 0 0 14px rgba(226,198,126,.55), 0 2px 18px rgba(0,0,0,.45); transition: height .25s ease; } .tl-item{ display:grid; grid-template-columns: 1fr 28px 1fr; gap:14px; align-items:stretch; margin:24px 0; opacity:1; transform:none; } .js .tl-item{ opacity:0; transform: translateY(10px); } .js .tl-item.reveal{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; } .tl-dot{ grid-column:2; justify-self:center; align-self:center; width:14px; height:14px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #fff, var(--gold) 55%, #8f7846 100%); box-shadow: 0 0 0 5px rgba(215,192,127,.10), 0 8px 22px rgba(0,0,0,.35); } .tl-card{ background: rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px; box-shadow: 0 12px 35px rgba(0,0,0,.28); backdrop-filter: blur(4px); position: relative; max-width: 520px; } .tl-item:nth-child(odd) .tl-card{ grid-column:1 } .tl-item:nth-child(even) .tl-card{ grid-column:3 } .tl-item:nth-child(odd) .tl-card::after, .tl-item:nth-child(even) .tl-card::after{ content:""; position:absolute; top:26px; width:18px; height:2px; background: rgba(226,198,126,.45); box-shadow: 0 0 0 1px rgba(226,198,126,.15); } .tl-item:nth-child(odd) .tl-card::after{ right:-18px; } .tl-item:nth-child(even) .tl-card::after{ left:-18px; } .tl-card h3{ margin:0 0 6px; font-size: clamp(18px, 2.1vw, 20px); color: var(--gold); letter-spacing:.15px; } .tl-card p{ margin:0; color:#ddd; line-height:1.55 } /* ========================================================= 12) SECTION SURVIE (story immersive) ========================================================= */ .survie{ position:relative; overflow:hidden; background: transparent !important; /* re-assert */ color: var(--fg); padding: clamp(60px,6vw,120px) 20px; isolation:isolate; } .survie::before{ content:""; position:absolute; inset:-20%; background: radial-gradient(80vmax 60vmax at 15% 10%, rgba(215,192,127,.08), transparent 70%), radial-gradient(70vmax 50vmax at 85% 20%, rgba(255,231,170,.05), transparent 80%); filter: blur(12px); animation: survieGlow 40s ease-in-out infinite alternate; z-index:0; } @keyframes survieGlow{ 0%{ transform:translate3d(0,0,0); opacity:.55; } 100%{ transform:translate3d(-4vmax,3vmax,0); opacity:.75; } } .survie-head{ text-align:center; position:relative; z-index:1; max-width:800px; margin:0 auto 60px; background: transparent !important; } .survie-head h2{ font-size:clamp(30px,4vw,48px); color:var(--gold); margin-bottom:12px; } .survie-head p{ color:#cfcfcf; font-size:clamp(15px,1.2vw,18px); } .survie-story{ display:flex; flex-direction:column; gap:48px; position:relative; z-index:1; background: transparent !important; } .scene{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:32px 26px; box-shadow:0 12px 40px rgba(0,0,0,.35); backdrop-filter:blur(6px); opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; } .scene.is-visible{ opacity:1; transform:none; } .scene h3{ color:var(--gold); margin-bottom:14px; font-size:clamp(20px,2vw,24px); } .scene p{ color:#ddd; line-height:1.65; font-size:clamp(15px,1.1vw,17px); } .scene.conclusion{ text-align:center; border-color:rgba(215,192,127,.25); background:rgba(215,192,127,.04); box-shadow:0 0 40px rgba(215,192,127,.1); } .scene.conclusion strong{ display:block; margin-top:16px; font-size:clamp(20px,2vw,24px); color:var(--gold); opacity:0; transition:opacity 1.2s ease; } .scene.conclusion.show-strong strong{ opacity:1; } /* ========================================================= 13) RESPONSIVE ========================================================= */ @media (max-width:900px){ .burger{ display:block; } /* Menu mobile */ .menu{ display:none; position:absolute; right:20px; top:66px; flex-direction:column; gap:10px; background:#111; padding:14px; border:1px solid rgba(255,255,255,.12); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.35); min-width:230px; } .menu.open{ display:flex; } .menu .cta{ text-align:center; } /* Hero */ .hero-grid{ grid-template-columns:1fr; } .hero-title{ font-size:36px; } .hero-card{ margin-left:auto; margin-right:auto; } .hero-cta{ display:inline-block; margin-left:auto; margin-right:auto; } .hero-left, .hero-right{ text-align:center; } .media-card{ margin: 10px auto 0; } } @media (max-width: 820px){ .timeline{ padding-left:8px } .timeline-track, .timeline-progress{ left:22px; transform:none } .tl-item{ grid-template-columns: 28px 1fr; gap:10px; margin:20px 0; } .tl-dot{ grid-column:1 } .tl-card{ grid-column:2; max-width:none; } .tl-card::after{ left:-12px !important; right:auto !important; width:12px; } } @media (max-width: 980px){ .benefits-grid{ grid-template-columns:1fr; } } /* ========================================================= 14) REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce){ .hero-cta, .hero-cta::after, .hero-cta::before, .reveal, .tl-item, .divider-fade, .timeline-progress{ transition: none !important; } .js .reveal, .js .tl-item, .js .divider-fade{ opacity: 1 !important; transform: none !important; } body::before{ animation: none !important; } } .accomp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:40px; } .accomp-item{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:28px 26px; box-shadow:0 12px 40px rgba(0,0,0,.35); backdrop-filter:blur(6px); transition:transform .25s ease, box-shadow .25s ease; } .accomp-item:hover{ transform:translateY(-4px); box-shadow:0 16px 44px rgba(0,0,0,.45); border-color:rgba(215,192,127,.2); } .accomp-item h3{ color:var(--gold); margin-bottom:12px; font-size:clamp(20px,2vw,24px); } .accomp-item p, .accomp-item li{ color:#ddd; line-height:1.6; } .accomp-item ul{ list-style:none; margin:10px 0 10px 0; padding:0; } .accomp-item ul li::before{ content:"– "; color:var(--gold); } .cta-center{ text-align:center; margin-top:48px; } @media (max-width:900px){ .accomp-grid{ grid-template-columns:1fr; } } .testimonials-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; } .testimonial-card{ background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 26px 24px; box-shadow: 0 12px 40px rgba(0,0,0,.35); backdrop-filter: blur(6px); transition: transform .25s ease, box-shadow .25s ease; } .testimonial-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 44px rgba(0,0,0,.45); border-color: rgba(215,192,127,.2); } .testimonial-header{ display:flex; align-items:center; gap:16px; margin-bottom:16px; } .testimonial-avatar{ width:60px; height:60px; border-radius:50%; object-fit:cover; border:2px solid rgba(215,192,127,.25); } .testimonial-card h3{ font-size:18px; font-weight:600; color:var(--fg); margin:0; } .role{ color:#bbb; font-size:14px; margin-top:4px; } .quote{ color:#ddd; line-height:1.6; font-style:italic; margin-bottom:14px; } .result{ background:rgba(215,192,127,.07); border-left:3px solid var(--gold); padding:10px 12px; border-radius:8px; font-size:15px; color:#eee; box-shadow:inset 0 0 10px rgba(0,0,0,.25); } @media (max-width:980px){ .testimonials-grid{ grid-template-columns:1fr; } .testimonial-card{ text-align:center; } .testimonial-header{ justify-content:center; } } /* ====== SECTION CADEAUX ====== */ .cadeaux{ position:relative; background:transparent !important; color:var(--fg); isolation:isolate; padding: clamp(60px,6vw,120px) 20px; } .cadeaux-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:28px; margin-top:40px; } .cadeau-card{ background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:26px 22px; box-shadow:0 12px 40px rgba(0,0,0,.35); backdrop-filter:blur(6px); text-align:center; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .cadeau-card:hover{ transform:translateY(-4px); box-shadow:0 16px 44px rgba(0,0,0,.45); border-color:rgba(215,192,127,.2); } .cadeau-card .ico{ width:48px; height:48px; display:grid; place-items:center; margin:0 auto 12px auto; border-radius:12px; background:rgba(215,192,127,.12); border:1px solid rgba(215,192,127,.35); color:var(--gold); font-size:22px; } .cadeau-card h3{ font-size:clamp(18px,2vw,22px); color:var(--gold); margin-bottom:8px; } .cadeau-card p{ color:#ddd; line-height:1.6; } /* Bloc newsletter */ .newsletter-block{ text-align:center; margin-top:70px; padding:40px 20px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,.35); backdrop-filter:blur(6px); } .newsletter-block h3{ color:var(--gold); font-size:clamp(22px,2.4vw,28px); margin-bottom:10px; } .newsletter-block p{ color:#ccc; max-width:700px; margin:0 auto 26px auto; line-height:1.65; } .iframe-wrapper{ max-width:650px; margin:0 auto; border-radius:16px; overflow:hidden; } /* Responsive */ @media (max-width:980px){ .cadeaux-grid{ grid-template-columns:1fr; gap:20px; } } /* Ressources */ .ressources-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .ress-card{ background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 22px; box-shadow: 0 12px 40px rgba(0,0,0,.35); backdrop-filter: blur(6px); } .ress-card h3{ color: var(--gold); margin-bottom: 8px; } .ress-card p{ color:#ddd; margin-bottom: 12px; } @media (max-width:980px){ .ressources-grid{ grid-template-columns: 1fr; } } /* Modal */ .lead-modal{ position: fixed; inset: 0; display: none; z-index: 9999; } .lead-modal.is-open{ display:block; } .lead-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter: blur(3px); } .lead-modal__dialog{ position:relative; z-index:1; width:min(520px, 92vw); margin: 8vh auto; padding: 22px; background: rgba(21,21,21,.9); border:1px solid rgba(255,255,255,.1); border-radius:16px; box-shadow: 0 20px 60px rgba(0,0,0,.5); } .lead-modal__close{ position:absolute; right:10px; top:8px; background:transparent; border:0; color:#fff; font-size:22px; cursor:pointer; } .lead-form .field{ margin-bottom: 12px; } .lead-form label{ display:block; font-size:14px; color:#bbb; margin-bottom:6px; } .lead-form input{ width:100%; padding:12px 14px; border-radius:12px; background:#111; color:#fff; border:1px solid rgba(255,255,255,.12); outline:none; } .lead-form input:focus{ border-color: rgba(215,192,127,.45); box-shadow: 0 0 0 3px rgba(215,192,127,.15); } .privacy-note{ font-size:12px; color:#aaa; margin-top:10px; text-align:center; } /* ===== FAQ ===== */ .faq{ background: transparent; } .faq-list{ display:flex; flex-direction:column; gap:14px; } .faq-item{ background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:14px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.28); } .faq-q{ margin:0; } .faq-toggle{ width:100%; text-align:left; padding:16px 18px; background:transparent; border:0; color:var(--fg); font-weight:600; font-size:18px; line-height:1.3; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; } .faq-toggle::after{ content:"+"; font-weight:700; color:var(--gold); transition: transform .2s ease; } .faq-toggle[aria-expanded="true"]::after{ content:"–"; transform: rotate(0deg); } .faq-a{ max-height:0; overflow:hidden; padding:0 18px; transition:max-height .25s ease, padding .25s ease; border-top:1px solid rgba(255,255,255,.06); } .faq-a p{ color:#ddd; padding:14px 0; } .faq-item.open .faq-a{ max-height:400px; /* suffisant pour un paragraphe ; ajuste si besoin */ padding:8px 18px 16px; } @media (max-width:900px){ .faq-toggle{ font-size:17px; padding:14px 16px; } } /* ===== Progress bar (top) ===== */ .progress-top{ position: fixed; left: 0; top: 0; width: 100%; height: 5px; background: rgba(255,255,255,.06); z-index: 9999; overflow: hidden; } .progress-top__bar{ display: block; width: 0%; height: 100%; background: linear-gradient(90deg, var(--gold), #ffe09b, var(--gold)); box-shadow: 0 0 12px rgba(215,192,127,.35); transition: width .08s linear; /* réactif mais fluide */ } /* ===== Progress bar (side right) ===== */ .progress-side{ position: fixed; right: 12px; top: 10vh; width: 6px; height: 80vh; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; z-index: 9999; backdrop-filter: blur(3px); border: 1px solid rgba(255,255,255,.08); } .progress-side__bar{ display: block; width: 100%; height: 0%; background: linear-gradient(180deg, var(--gold), #b6934f); box-shadow: 0 0 12px rgba(215,192,127,.35); transition: height .08s linear; } /* ===== Footer socials ===== */ .footer-socials{ display: flex; gap: 12px; align-items: center; justify-content: center; margin: 10px 0 14px; flex-wrap: wrap; } .footer-socials .social-btn{ width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 8px 24px rgba(0,0,0,.28); transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease; } .footer-socials .social-btn:hover{ transform: translateY(-2px); border-color: rgba(215,192,127,.35); box-shadow: 0 12px 30px rgba(0,0,0,.34), 0 0 0 1px rgba(215,192,127,.12) inset; } .footer-socials svg{ width: 20px; height: 20px; fill: var(--gold); } /* ========================================================= SOUS-MENU — À PROPOS ========================================================= */ .menu-item{ position:relative; display:flex; align-items:center; } /* lien "À propos" */ .menu-item > a{ padding-right:14px; } /* Sous-menu (desktop) */ .sub-menu{ position:absolute; top:100%; left:0; display:none; flex-direction:column; gap:6px; margin-top:10px; padding:14px 16px; min-width:240px; background:#0f0f0f; border-radius:14px; border:1px solid rgba(255,255,255,.12); box-shadow:0 12px 32px rgba(0,0,0,.55); z-index:9999; } /* liens du sous-menu */ .sub-menu a{ padding:6px 4px; font-size:.9rem; color:#fff; opacity:.9; transition:opacity .18s ease, color .18s ease; } /* survol des liens */ .sub-menu a:hover{ opacity:1; color:var(--gold); } /* Affichage au survol (desktop) */ .menu-item.has-sub:hover .sub-menu{ display:flex; } /* =============================== MOBILE VERSION — MENU CENTRÉ & PRO =============================== */ @media (max-width:900px){ /* La nav mobile doit être centrée */ .menu{ align-items:center; text-align:center; } /* Parent À propos */ .menu-item{ width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; } /* Sous-menu CENTRÉ */ .sub-menu{ position:static; display:flex !important; flex-direction:column; gap:8px; background:transparent; border:0; box-shadow:none; padding:0; margin:4px 0 0 0; align-items:center; /* <-- Centre horizontalement */ text-align:center; /* <-- Alignement centré */ } /* Liens du sous-menu (même style que le reste) */ .sub-menu a{ padding:8px 0; font-size:1rem; font-weight:500; color:#fff; width:100%; } .sub-menu a:hover{ color:var(--gold); } }