/* ========================================= ALBORE — CSS unifié (propre, sans doublons) ========================================= */ /* -------- Variables & reset -------- */ :root{ --bg:#0c2038; /* bleu nuit */ --txt:#e9e9e9; --muted:#b9b9b9; --gold:#c7a35b; --card:#1a1c1f; --card-b:#26292e; --accent:#5fb4ff; } *{ box-sizing:border-box; margin:0; padding:0; } html,body{ height:100%; } body{ background:var(--bg); color:var(--txt); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } img{ max-width:100%; display:block; border-radius:10px; } a{ color:inherit; text-decoration:none; } p{ line-height:1.6; color:var(--muted); } h1,h2,h3{ color:#f7f2e7; } /* -------- Splash / Landing -------- */ /* (compat: deux systèmes possibles : .splash ou .landing) */ .splash, .landing{ position:fixed; inset:0; z-index:9999; background:url('assets/hero.jpg') center/cover no-repeat; display:grid; place-items:center; } .splash::after, .landing::after{ content:''; position:absolute; inset:0; background:radial-gradient(transparent,rgba(0,0,0,.45) 55%,rgba(0,0,0,.6)); } .logo, .landing__logo{ width:min(44vw,360px); filter:drop-shadow(0 8px 24px rgba(0,0,0,.5)); cursor:pointer; position:relative; z-index:1; transition:transform .35s ease,opacity .35s ease; } body.entered .splash, .landing.hidden{ pointer-events:none; animation:fadeOut .7s ease forwards; } @keyframes fadeOut{ to{ opacity:0; visibility:hidden } } /* -------- Header (liseré or dégradé) + Nav centrée -------- */ header{ position: sticky; top:0; z-index:20; background: rgba(12,15,18,.88); backdrop-filter: saturate(140%) blur(6px); border-top: 2px solid transparent; border-bottom: 2px solid transparent; border-image: linear-gradient(to right, rgba(166,132,58,.6), #c6a766, rgba(166,132,58,.6)) 1; box-shadow: 0 0 12px rgba(198,167,102,.25), inset 0 0 6px rgba(198,167,102,.15); } .nav--centered{ max-width:1160px; margin:0 auto; padding:10px 16px; display:grid; grid-template-columns: 1fr auto 1fr; /* gauche | logo | droite */ align-items:center; gap:14px; } .nav-left,.nav-right{ display:flex; align-items:center; gap:18px; list-style:none; margin:0; padding:0; white-space:nowrap; } .nav-left{ justify-self:start; } .nav-right{ justify-self:end; } .brand-center{ justify-self:center; } .brand-logo{ height:28px; width:auto; display:block; } .nav--centered a{ color: var(--txt, #e7e7e7); text-decoration:none; padding:8px 10px; border-radius:10px; text-transform:uppercase; font-weight:600; letter-spacing:.04em; } .nav--centered a:hover{ background: rgba(255,255,255,.06); } /* Hamburger */ .hamburger{ width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:rgba(255,255,255,.04); } .hamburger svg{ width:22px; height:22px; } /* -------- Backdrop piloté par -------- */ body::after{ content:""; position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:998; } body.menu-open::after{ opacity:1; pointer-events:auto; } /* -------- Drawer (menu latéral gauche) -------- */ .drawer{ position:fixed; inset:0; z-index:999; display:grid; grid-template-columns: min(340px, 86vw) 1fr; /* panneau | zone clic backdrop */ transform: translateX(-100%); transition: transform .25s ease; pointer-events:none; } .drawer.open{ transform: translateX(0); pointer-events:auto; } .drawer__panel{ background: rgba(12,15,18,.96); border-right:1px solid rgba(255,255,255,.08); padding:16px 14px; } .drawer__title{ margin:2px 0 12px; font-weight:700; letter-spacing:.1em; color:var(--gold); } .drawer__list{ list-style:none; margin:0; padding:10px 8px; display:grid; gap:8px; } .drawer__list a{ display:block; padding:10px 8px; border-radius:8px; color:#e9e9e9; } .drawer__list a:hover{ background:rgba(255,255,255,.06); } .drawer__close{ background:transparent; border:0; color:#ddd; font-size:22px; line-height:1; cursor:pointer; } .drawer__backdrop{ background:transparent; } /* on capte juste le clic */ /* -------- Sections génériques -------- */ main{ opacity:0; transform:translateY(12px); transition:opacity .5s ease .25s, transform .5s ease .25s; } body.entered main{ opacity:1; transform:none; } section{ max-width:1080px; margin:auto; padding:56px 16px; } h1{ font-size:2.4rem; margin:0 0 8px; } h2{ font-size:1.6rem; margin:0 0 14px; } .lede{ font-size:1.1rem; } /* -------- Grilles / Cartes -------- */ .grid{ display:grid; gap:14px; } @media (min-width:800px){ .grid{ grid-template-columns:repeat(3,1fr); } } /* Cartes génériques + style ALBORE pour la Gamme */ .cards{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); } .card{ display:flex; flex-direction:column; background: linear-gradient(180deg, var(--card), var(--card-b)); border: 1px solid rgba(255,255,255,.08); border-radius:12px; overflow:hidden; transition: transform .15s ease, border-color .15s ease, box-shadow .15s; } .card:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,.18); box-shadow:0 14px 28px rgba(0,0,0,.35); } .card__img{ aspect-ratio:4/3; background:#0e1f2f center/cover no-repeat; } .card__body{ padding:14px; } .badge{ display:inline-block; font-size:.78rem; letter-spacing:.08em; color:var(--gold); } .card__title{ margin:.35em 0 .2em; font-size:1.1rem; font-weight:700; color:#fff; } .card__txt{ font-size:.95rem; color:var(--muted); } /* Accent ALBORE doré pour les cartes de la section .cards */ .cards .card{ background:#0b2d4a; border:1px solid var(--gold); box-shadow:0 4px 12px rgba(0,0,0,.25); } .cards .card:hover{ border-color:#d8c07a; box-shadow:0 8px 18px rgba(0,0,0,.35); } .cards .card .card__title{ color:#d8c07a; } .cards .card .badge{ background: rgba(199,163,91,.12); color:#d8c07a; } /* -------- Galerie générique -------- */ .gallery{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:12px; } .gallery img{ width:100%; height:260px; object-fit:cover; border-radius:10px; border:1px solid rgba(255,255,255,.08); } figure{ margin:0; } figcaption{ padding:8px 10px; color:var(--muted); font-size:.95rem; } /* -------- Footer -------- */ footer{ border-top:1px solid rgba(255,255,255,.08); color:var(--muted); text-align:center; padding:20px; } .cta{ display:inline-block; background:var(--gold); color:#111; padding:10px 14px; border-radius:8px; font-weight:600; } /* ========================================= FICHES PRODUIT (AURORA / PROTEUS / NEREUS / PELAGOS) ========================================= */ .product-hero{ max-width:1200px; margin: 100px auto 40px; padding:0 20px; display:grid; grid-template-columns: 1.1fr 0.9fr; gap:40px; } .product-hero h1{ margin:0 0 12px; font-size:clamp(32px,4vw,48px); } .product-meta{ font-size:15px; opacity:.9; margin-bottom:16px; } .price{ font-weight:600; font-size:18px; margin: 18px 0; color:#f7f2e7; } .product-cta{ display:flex; gap:12px; flex-wrap: wrap; } .product-cta a{ padding:10px 16px; border-radius:8px; background:#d6b773; color:#1a1a1a; font-weight:600; } .product-cta a.secondary{ background:#2b2b2b; color:#eee; border:1px solid #3a3a3a; } /* Galerie produit en bas de page */ .product-hero + .gallery{ max-width:1200px; margin: 10px auto 80px; padding: 0 20px; display:grid; gap:16px; grid-template-columns: repeat(3,1fr); } .product-hero + .gallery figure{ margin:0; background:#141414; border:1px solid #2a2a2a; border-radius:10px; overflow:hidden; } .product-hero + .gallery img{ width:100%; display:block; aspect-ratio: 4/3; object-fit:cover; } .product-hero + .gallery figcaption{ padding:10px 12px; font-size:14px; opacity:.9 } .backline{ max-width:1200px; margin: 0 auto; padding:0 20px 40px;} .backline a{ color:#d6b773; } /* Module d’options (config) */ .product-options{ margin-top:18px; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:16px; } .product-options h3{ margin:0 0 10px; } .product-options .opt-row{ margin:8px 0; display:flex; gap:12px; align-items:center; flex-wrap:wrap; } .product-options label{ min-width:160px; color:var(--muted); } .product-options select{ padding:8px 10px; border-radius:8px; background:rgba(255,255,255,.03); color:var(--txt,#e9e9e9); border:1px solid rgba(255,255,255,.06); } .product-options .totals{ margin-top:12px; display:flex; gap:16px; flex-wrap:wrap; align-items:center; color:#e9e9e9; } .product-options .actions{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; } .product-options .btn{ padding:10px 12px; border-radius:10px; background:var(--gold,#c7a35b); color:#111; border:none; cursor:pointer; font-weight:600; } .product-options .btn.secondary{ background:rgba(255,255,255,.08); color:#eee; border:1px solid rgba(255,255,255,.12); } /* ========================================= Contact (nouvelle présentation) ========================================= */ .contact2 .contact__grid{ display:grid; gap:22px; grid-template-columns: 1.1fr 1fr; align-items:start; } @media (max-width:800px){ .contact2 .contact__grid{ grid-template-columns:1fr; } } .contact__intro p{ margin:0; color:var(--muted); font-size:clamp(15px, 1.6vw, 18px); } .contact__card{ background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius: 12px; padding:16px; } .contact__list{ list-style:none; margin:0 0 10px; padding:0; } .contact__list li{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px dashed rgba(255,255,255,.08); } .contact__list li:last-child{ border-bottom:0; } .icon{ width:1em; height:1em; flex:0 0 1em; display:inline-grid; place-items:center; color:var(--gold); } .social{ display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; } .social__link{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); color:var(--text); } .social__link:hover{ border-color: rgba(255,255,255,.18); } .social__link svg{ width:1em; height:1em; color:var(--gold); } /* ========================================= Responsive ========================================= */ @media (max-width:900px){ .product-hero{ grid-template-columns:1fr; margin-top:70px; } .product-hero + .gallery{ grid-template-columns: 1fr 1fr; } } @media (max-width:680px){ /* Empêche le scroll quand tiroir ouvert */ body.menu-open{ overflow:hidden; } /* Header compact + centrage logo */ header{ padding-top: env(safe-area-inset-top); } .nav--centered{ grid-template-columns: auto 1fr auto; padding:8px 12px; gap:8px; } .brand-logo{ height:26px; } /* Masque les liens, garde burger */ .nav-left li:not(:first-child), .nav-right li{ display:none; } /* Drawer largeur mobile */ .drawer{ grid-template-columns: min(82vw, 340px) 1fr; } /* Sections plus serrées */ section{ padding:32px 16px; margin:32px auto; } h1{ font-size: clamp(26px, 6vw, 34px); } h2{ font-size: clamp(20px, 4.8vw, 26px); } /* Cards en 1 colonne */ .cards{ grid-template-columns:1fr; gap:12px; } .card__img{ aspect-ratio: 16 / 10; } /* Galerie générique : 2 puis 1 colonne */ .gallery{ grid-template-columns: repeat(2, 1fr); gap:10px; } } @media (max-width:420px){ .gallery{ grid-template-columns: 1fr; } }