/* Cie Sputnik — thème alternatif "Marin / Nature" (moderne, dynamique) Surcouche de assets/css/style.css : n'active rien tant que n'est pas posé par assets/js/theme-toggle.js */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Space+Grotesk:wght@400;500;700&display=swap'); [data-theme="nature"]{ --ink:#0f2f2b; --black:#0f2f2b; --white:#fbfaf4; --paper:#eaf5f1; --paper-2:#e0f0e9; --paper-3:#d5ebe1; --line:#bfe0d0; --muted:#4f7d70; --accent:#e08e45; --accent-2:#1f8a72; --font-display:'Fraunces', serif; --font-ui:'Space Grotesk', sans-serif; --font-label:'Space Grotesk', sans-serif; } /* transition douce entre les deux thèmes */ html{transition:background-color .4s ease;} body, .nav, .barfoot, .section, .creation-cell, .hero-box, .btn, .agenda-list li{ transition:background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease, transform .25s ease; } /* ---------- Nav ---------- */ [data-theme="nature"] .nav{ box-shadow:0 2px 18px rgba(15,47,43,.08); } [data-theme="nature"] .nav-links a{ position:relative; font-weight:500; } [data-theme="nature"] .nav-links a::after{ content:''; position:absolute; left:0; right:100%; bottom:-4px; height:2px; background:var(--accent-2); transition:right .25s ease; } [data-theme="nature"] .nav-links a:hover{opacity:1;} [data-theme="nature"] .nav-links a:hover::after{right:0;} /* ---------- Hero : dégradé marin + boîte flottante arrondie ---------- */ [data-theme="nature"] .hero::before{ background:linear-gradient(165deg, rgba(8,35,33,.25), rgba(6,50,54,.8)); } [data-theme="nature"] .hero-box{ border:1px solid rgba(255,255,255,.35); border-radius:20px; background:rgba(10,42,40,.22); backdrop-filter:blur(6px); box-shadow:0 20px 60px rgba(6,30,28,.35); } [data-theme="nature"] .hero-title{ font-weight:600; text-transform:none; letter-spacing:.01em; } [data-theme="nature"] .hero-subtitle{ font-style:normal; font-family:var(--font-ui); letter-spacing:.04em; text-transform:uppercase; font-size:13px; } /* Vague décorative sous le hero, injectée par theme-toggle.js */ .wave-divider{display:none;} [data-theme="nature"] .wave-divider{ display:block;line-height:0;margin-top:-4px;position:relative;z-index:3; } [data-theme="nature"] .wave-divider svg{width:100%;height:56px;display:block;} [data-theme="nature"] .wave-divider svg path{fill:var(--white);} /* ---------- Sections : texture douce au lieu du quadrillage ---------- */ [data-theme="nature"] .section{ background-image: radial-gradient(circle at 15% 0%, rgba(31,138,114,.10), transparent 45%), radial-gradient(circle at 85% 30%, rgba(224,142,69,.08), transparent 40%); background-size:auto; } /* ---------- Grille des créations : cartes flottantes arrondies ---------- */ [data-theme="nature"] .creations-grid{ border:none; gap:14px; padding:0; } [data-theme="nature"] .creation-cell{ border:none; border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(15,47,43,.15); transform:scale(1); } [data-theme="nature"] .creation-cell:hover{ transform:scale(1.02); box-shadow:0 16px 40px rgba(15,47,43,.28); } [data-theme="nature"] .creation-cell::before{ background:linear-gradient(200deg, rgba(8,35,33,.15), rgba(6,50,54,.72)); } [data-theme="nature"] .creation-title{text-transform:none;font-weight:700;} [data-theme="nature"] .creation-sub{font-style:normal;font-family:var(--font-ui);letter-spacing:.03em;} /* ---------- Boutons : pilule dynamique ---------- */ [data-theme="nature"] .btn{ border:none; border-radius:999px; padding:10px 24px; background:linear-gradient(120deg, var(--accent-2), #2fae8f); color:#fff; font-weight:600; letter-spacing:.04em; box-shadow:0 8px 20px rgba(31,138,114,.35); } [data-theme="nature"] .btn:hover{ transform:translateY(-2px); background:linear-gradient(120deg, #1a7863, var(--accent-2)); box-shadow:0 12px 26px rgba(31,138,114,.45); color:#fff; } /* ---------- Page spectacle ---------- */ [data-theme="nature"] .show-title{text-transform:none;} [data-theme="nature"] .show-subtitle{font-style:normal;color:var(--accent-2);font-weight:500;} [data-theme="nature"] .show-rule{ width:44px;height:4px;border-radius:2px; background:linear-gradient(90deg, var(--accent-2), var(--accent)); } [data-theme="nature"] .facts dt{color:var(--accent-2);} [data-theme="nature"] .gallery img, [data-theme="nature"] .show-body > div > img{ border-radius:12px; } [data-theme="nature"] .gallery{gap:10px;} /* ---------- Agenda : lignes arrondies alternées + pastilles ---------- */ [data-theme="nature"] .agenda h3{font-weight:600;} [data-theme="nature"] .agenda-list li{ border:none;border-radius:10px; padding:10px 14px;margin-bottom:4px; background:var(--paper-2); } [data-theme="nature"] .agenda-list li:nth-child(even){background:var(--paper-3);} [data-theme="nature"] .agenda-list li:hover{background:#d3ecdf;} [data-theme="nature"] .agenda-list .date{color:var(--accent-2);} [data-theme="nature"] .agenda-list .tag{ border:none;border-radius:999px; background:var(--accent);color:#fff; padding:2px 10px;font-weight:600; } /* ---------- Contact ---------- */ [data-theme="nature"] .contact-grid input, [data-theme="nature"] .contact-grid textarea{ border:none;border-radius:10px; background:var(--paper-2); box-shadow:inset 0 0 0 1px var(--line); } [data-theme="nature"] .contact-grid input:focus, [data-theme="nature"] .contact-grid textarea:focus{ outline:none; box-shadow:inset 0 0 0 2px var(--accent-2); } /* ---------- Bouton flottant de bascule de thème ---------- */ .theme-toggle-btn{ position:fixed; right:22px;bottom:22px; z-index:999; border:1px solid rgba(0,0,0,.15); background:#fff; color:#111; font-family:'Space Grotesk', var(--font-label, sans-serif); font-size:13px; font-weight:600; padding:12px 18px; border-radius:999px; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.18); transition:transform .2s ease, box-shadow .2s ease, background .4s ease, color .4s ease; } .theme-toggle-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.24);} [data-theme="nature"] .theme-toggle-btn{ background:linear-gradient(120deg, var(--accent-2), #2fae8f); color:#fff; border:none; }