/* ============================================================ BACKGROUND.CSS — Noctule Ce fichier contrôle tout l'aspect visuel du site. Chaque section est commentée pour t'aider à personnaliser. ============================================================ */ /* ============================================================ 🎨 VARIABLES — MODE ÉTÉ (défaut) Appliquées quand a la classe "saison-ete" ============================================================ */ .saison-ete { /* Couleur de fond */ --bg: rgb(254, 244, 235); /* ↑ Exemple jaune : rgb(255, 204, 51) | rose : rgb(255, 222, 235) */ /* Couleur principale des textes */ --text: rgb(87, 50, 107); /* ↑ Violet foncé. Exemple noir : rgb(20, 20, 20) */ /* Couleur secondaire (labels colonnes footer, etc.) */ --text-muted: rgba(87, 50, 107, 0.55); /* ↑ Même couleur que --text à 55% d'opacité */ /* Couleur des traits et bordures */ --divider: rgba(87, 50, 107, 0.18); /* ↑ Monte à 0.4 pour des traits plus visibles */ /* Couleur du toggle */ --btn-bg: rgba(87, 50, 107, 0.1); --btn-text: rgb(87, 50, 107); --btn-border: rgba(87, 50, 107, 0.3); } /* ============================================================ ❄️ VARIABLES — MODE HIVER Appliquées automatiquement au clic du toggle. ============================================================ */ .saison-hiver { /* Couleur de fond — identique à l'été */ --bg: rgb(254, 244, 235); /* Couleur principale des textes en hiver */ --text: rgb(255, 127, 66); /* ↑ Orange. Change les 3 chiffres pour une autre couleur. */ /* Couleur secondaire */ --text-muted: rgba(255, 127, 66, 0.55); /* Traits et bordures */ --divider: rgba(255, 127, 66, 0.25); /* Couleur du toggle */ --btn-bg: rgba(255, 127, 66, 0.12); --btn-text: rgb(255, 127, 66); --btn-border: rgba(255, 127, 66, 0.35); } /* ============================================================ 🔤 POLICES ============================================================ */ :root { --font-display: 'Cormorant Garamond', Georgia, serif; /* ↑ Police des titres. Exemples : 'Playfair Display' / 'EB Garamond' */ --font-body: 'Jost', sans-serif; /* ↑ Police du texte courant. Exemples : 'Raleway' / 'DM Sans' */ } /* ============================================================ 🔧 RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background-color: var(--bg); color: var(--text); font-family: var(--font-body); font-weight: 300; /* ↑ 300 = fin | 400 = normal | 700 = gras */ font-size: 1rem; line-height: 1.7; min-height: 100vh; transition: background-color 0.4s ease, color 0.4s ease; /* ↑ Transition douce lors du changement de saison */ } /* ============================================================ 🖼️ IFRAMES — zéro bordure, zéro contour, zéro fond ============================================================ */ iframe { border: none; outline: none; background: transparent; display: block; -webkit-appearance: none; pointer-events: none; /* ↑ Les iframes ne captent pas les clics — le toggle reste cliquable */ } /* ============================================================ 🔝 NAVBAR ============================================================ */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: grid; grid-template-columns: 1fr auto 1fr; /* ↑ 3 colonnes : gauche | centre | droite */ align-items: center; padding: 0.1rem 1.8rem; /* ↑ 1er chiffre = hauteur navbar | 2ème = marges gauche/droite */ background: var(--bg); border-bottom: 1px solid var(--divider); /* ↑ Épaisseur du trait sous la navbar : "1px", "2px", "3px"... */ transition: background-color 0.4s ease, border-color 0.4s ease; } .nav-left { justify-self: start; } .nav-centre { justify-self: center; } .nav-right { justify-self: end; } /* ── Mascotte (gauche) ── */ .nav-iframe-mascotte { width: 56px; /* ↑ LARGEUR de la mascotte en navbar */ height: 56px; /* ↑ HAUTEUR de la mascotte en navbar */ } /* ── Logo + bar (centre) ── */ .nav-logo-iframe { width: 270px; /* ↑ LARGEUR du logo central — augmente si le logo est coupé */ height: 78px; /* ↑ HAUTEUR du logo central */ } /* ============================================================ 🔘 TOGGLE SAISON (Été ●○ Hiver) ============================================================ */ /* Conteneur cliquable */ .toggle-saison { display: flex; align-items: center; gap: 0.5rem; /* ↑ Espace entre "Été", la piste et "Hiver" */ cursor: pointer; user-select: none; position: relative; z-index: 200; /* ↑ z-index élevé pour rester au-dessus de tout — ne pas réduire */ padding: 0.5rem; /* ↑ Zone cliquable élargie autour du toggle */ } /* Labels "Été" et "Hiver" */ .toggle-label { font-family: var(--font-body); font-size: 0.72rem; /* ↑ Taille des textes Été / Hiver */ font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); transition: color 0.3s ease, font-weight 0.3s ease; } /* Label de la saison active — plus visible */ .toggle-label.toggle-actif { color: var(--text); font-weight: 500; /* ↑ La saison en cours est plus foncée et légèrement plus grasse */ } /* La piste (fond de la glissière) */ .toggle-piste { position: relative; width: 36px; /* ↑ LARGEUR de la piste */ height: 20px; /* ↑ HAUTEUR de la piste */ background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: 20px; transition: background 0.3s ease, border-color 0.3s ease; flex-shrink: 0; } /* Le rond qui glisse */ .toggle-curseur { position: absolute; top: 3px; left: 3px; width: 12px; /* ↑ Taille du rond — doit rester < hauteur piste - 6px */ height: 12px; border-radius: 50%; background: var(--btn-text); transition: transform 0.3s ease, background 0.3s ease; } /* Position du curseur côté Hiver */ .toggle-curseur.curseur-hiver { transform: translateX(16px); /* ↑ Distance = largeur piste (36) - taille curseur (12) - 8 = 16px Si tu changes la largeur de piste, recalcule : largeur - 12 - 8 */ } .toggle-saison:hover .toggle-piste { opacity: 0.75; } /* ============================================================ 🦸 HERO ============================================================ */ .hero { display: flex; flex-direction: column; align-items: center; padding: 110px 2rem 4rem; /* ↑ 110px = espace pour la navbar fixe Si la navbar est plus haute, augmente ce chiffre 2rem = marges gauche/droite | 4rem = espace en bas */ gap: 3rem; /* ↑ Espace entre le titre et l'image */ } /* Grand titre */ .hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.2rem); /* ↑ min 2rem — max 3.2rem. Change le dernier chiffre pour plus grand/petit */ font-weight: 300; line-height: 1.2; text-align: center; color: var(--text); max-width: 700px; transition: color 0.4s ease; } .hero h1 em { font-style: italic; font-weight: 300; } /* Conteneur de l'image centrale */ .hero-media { width: 100%; max-width: 860px; /* ↑ Largeur max de l'image au milieu */ display: flex; justify-content: center; } /* L'iframe de l'image centrale */ .hero-iframe { width: 100%; max-width: 860px; min-height: 540px; /* ↑ Hauteur min — augmente si l'image est coupée en bas */ } /* Alternative si tu utilises un */ .hero-img { width: 100%; max-width: 860px; height: auto; object-fit: cover; } /* ============================================================ ➖ SÉPARATEUR ============================================================ */ .divider { border: none; border-top: 1px solid var(--divider); /* ↑ Épaisseur : "1px", "2px", "3px"... */ margin: 3rem auto; max-width: 860px; transition: border-color 0.4s ease; } /* ============================================================ 🦶 FOOTER ============================================================ */ .footer { max-width: 900px; margin: 0 auto; padding: 2rem 2rem 4rem; /* ↑ 1er chiffre = espace en haut | dernier = espace en bas */ display: flex; flex-direction: column; align-items: center; gap: 2.5rem; /* ↑ Espace entre logo, colonnes et copyright */ } /* Logo footer */ .footer-logo { display: flex; justify-content: center; } .footer-logo-iframe { height: 70px; /* ↑ HAUTEUR du logo footer */ width: 160px; /* ↑ LARGEUR du logo footer */ } /* 4 colonnes */ .footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); /* ↑ 4 colonnes égales. Pour 3 : repeat(3, 1fr) */ gap: 2rem; /* ↑ Espace entre les colonnes */ width: 100%; text-align: left; } /* Titres des colonnes (LOCALISATION, HORAIRES...) */ .footer-col h3 { font-family: var(--font-body); font-size: 0.72rem; /* ↑ Taille des titres de colonnes */ font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.6rem; transition: color 0.4s ease; } /* Texte des colonnes */ .footer-col p { font-size: 0.9rem; line-height: 1.9; color: var(--text); transition: color 0.4s ease; } /* Liens dans le footer */ .footer-col a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--divider); /* ↑ Soulignement discret. Mets "none" pour le supprimer. */ transition: opacity 0.2s, color 0.4s ease, border-color 0.4s ease; } .footer-col a:hover { opacity: 0.5; } /* Copyright */ .footer-copy { font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.06em; transition: color 0.4s ease; } /* ============================================================ 📱 RESPONSIVE — mobile ============================================================ */ @media (max-width: 700px) { .navbar { padding: 0.6rem 1rem; } .nav-logo-iframe { width: 160px; height: 56px; } .footer-cols { grid-template-columns: 1fr 1fr; /* ↑ 2 colonnes sur tablette/mobile */ gap: 1.5rem; } .hero { padding-top: 90px; } } @media (max-width: 440px) { .footer-cols { grid-template-columns: 1fr; /* ↑ 1 colonne sur très petit écran */ text-align: center; } }