/* Theme override for Ana Ruiz site - Default: clair (crème) - Option: sombre Controlled via: Objectifs (source de vérité : README.md) - Fond clair = crème très clair (pas blanc pur) - Texte lisible en clair (plus sombre) - Pas de "box" blanche séparée pour les blocs de texte (fond crème continu) - Fond sombre disponible (☾) / fond clair (☀︎) visible sur toutes les pages */ :root{ /* Clair (par défaut) */ --bg: #fbf7ef; /* crème très clair */ --text: #1a1712; /* texte plus sombre */ --muted: #3f3a33; --heading: #15120e; /* En clair : on évite les panneaux blancs, on laisse respirer le fond crème */ --panel-bg: transparent; --panel-bg-soft: rgba(251, 247, 239, 0.92); /* Cartes (œuvres, vignettes) : léger contraste mais sans blanc pur */ --card-bg: rgba(26, 23, 18, 0.03); --card-border: rgba(26, 23, 18, 0.10); --nav-bg: rgba(251, 247, 239, 0.92); --nav-shadow: 0 8px 28px rgba(20, 18, 16, 0.12); --nav-text: #1a1712; --nav-link-hover-bg: rgba(26, 23, 18, 0.06); --footer-bg: transparent; --link: #2d4a7a; --link-hover: #1f3560; --image-bg: rgba(26,23,18,0.04); --btn-bg: rgba(26,23,18,0.06); --btn-bg-hover: rgba(26,23,18,0.10); --btn-text: var(--nav-text); --focus-ring: 0 0 0 4px rgba(45, 74, 122, 0.22); } html[data-theme="dark"]{ --bg: #151516; --text: #e9ecef; --muted: #b8bac2; --heading: #f4efe9; --panel-bg: rgba(38, 37, 41, 0.14); --panel-bg-soft: rgba(38, 37, 41, 0.10); --card-bg: rgba(38, 37, 41, 0.12); --card-border: rgba(255, 255, 255, 0.06); --nav-bg: rgba(28, 28, 31, 0.70); --nav-shadow: 0 8px 28px rgba(0, 0, 0, 0.25); --nav-text: #e9ecef; --nav-link-hover-bg: rgba(200, 195, 175, 0.07); --footer-bg: rgba(0, 0, 0, 0.14); --link: #97bbc6; --link-hover: #b8d6df; --image-bg: #222; --btn-bg: rgba(238, 233, 222, 0.14); --btn-bg-hover: rgba(238, 233, 222, 0.24); --btn-text: #e6e6e6; --focus-ring: 0 0 0 4px rgba(151, 187, 198, 0.25); } /* Base (évite le "bandeau noir" qui venait du fond html restant en sombre) */ html, body{ background: var(--bg) !important; color: var(--text) !important; min-height: 100%; } /* Liens */ a{ color: var(--link); } a:hover{ color: var(--link-hover); } /* Navbar */ .navbar{ background: var(--nav-bg) !important; box-shadow: var(--nav-shadow) !important; } .nav-logo a{ color: var(--nav-text) !important; text-shadow: none !important; } /* Layout navbar : liens + actions (thème + hamburger) */ .navbar-container{ display:flex !important; align-items:center !important; gap: 1rem !important; justify-content: flex-start !important; /* Légèrement plus large pour éviter les libellés rognés (ex : "Accueil") */ max-width: 1400px !important; width: 100% !important; } .nav-links{ display:flex !important; align-items:center !important; justify-content:flex-end !important; gap: 0.9rem !important; list-style:none !important; padding:0 !important; margin:0 !important; /* autorise le shrink sans pousser le bouton de thème hors écran */ flex: 1 1 auto !important; min-width: 0 !important; /* IMPORTANT: On évite l'overflow-x auto sur desktop car cela "rogne" parfois le premier item (ex: Accueil). Si l'espace manque, on bascule en menu hamburger (voir media query plus bas). */ overflow: visible !important; flex-wrap: nowrap !important; } .nav-links a{ color: var(--nav-text) !important; /* Évite les libellés "coupés" verticalement (ex : Accueil) selon certaines polices/tailles */ line-height: 1.15 !important; white-space: nowrap; } .nav-links a.active{ background: var(--nav-link-hover-bg) !important; color: var(--nav-text) !important; } .nav-links a:hover, .nav-links a:focus{ background: var(--nav-link-hover-bg) !important; color: var(--nav-text) !important; box-shadow: var(--focus-ring) !important; outline: none !important; } .nav-actions{ display:flex; align-items:center; gap: .35rem; flex: 0 0 auto; } /* Hamburger : caché par défaut (desktop). Affiché quand la navbar bascule en mode compact. */ .hamburger{ color: var(--nav-text) !important; display: none !important; } /* Signature : lisible en clair / sombre */ html[data-theme="dark"] .nav-signature{ filter: invert(1) drop-shadow(0 2px 6px rgba(0,0,0,0.25)); opacity: 0.92; } html[data-theme="light"] .nav-signature{ filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15)); opacity: 0.88; } /* Bouton thème (☀︎/☾) */ .theme-toggle{ border: none; background: transparent; color: var(--nav-text); cursor: pointer; display: inline-grid; place-items: center; width: 42px; height: 38px; border-radius: 999px; transition: background 0.15s, transform 0.08s; } .theme-toggle:hover{ background: var(--nav-link-hover-bg); } .theme-toggle:active{ transform: translateY(1px); } .theme-toggle:focus-visible{ outline: none; box-shadow: var(--focus-ring); } .theme-toggle .theme-icon{ font-size: 1.15rem; line-height: 1; } /* Conteneurs principaux : fond continu (pas de box blanche) */ .gallery-page, .gallery-container, .diaporama-container, .about-container, .contact-container, .legal-container, .oeuvres-section, .publications-section{ background: var(--panel-bg) !important; color: var(--text) !important; border: none !important; box-shadow: none !important; } /* Cartes (œuvres / vidéos) : léger contraste */ .gallery-card, .gallery-work{ background: var(--card-bg) !important; border: 1px solid var(--card-border) !important; } /* Titres */ .gallery-title, .gallery-title a, .gallery-work-title, .diapo-title, .diapo-gallery, .oeuvres-section h1, .oeuvres-section h2, .about-title, .contact-title, .legal-container h1, .legal-container h2, .container .page-title, .container .section-title{ color: var(--heading) !important; } /* Textes secondaires (mais lisibles) */ .gallery-desc, .gallery-work-desc, .gallery-citation, .oeuvres-note, .diapo-caption, .diapo-indicator, .note, .page-subtitle{ color: var(--muted) !important; } /* Textes principaux qui étaient trop clairs sur fond clair (inline CSS legacy) */ .about-text, .contact-info, .legal-container{ color: var(--text) !important; } /* Formulaire contact (force le clair) */ html[data-theme="light"] .contact-form label{ color: var(--muted) !important; } html[data-theme="light"] .contact-form input, html[data-theme="light"] .contact-form textarea{ background: var(--panel-bg-soft) !important; color: var(--text) !important; border: 1px solid var(--card-border) !important; } html[data-theme="light"] .contact-form button{ background: var(--btn-bg) !important; color: var(--text) !important; } html[data-theme="light"] .contact-form button:hover{ background: var(--btn-bg-hover) !important; } /* Contact : supprimer le voile sombre en mode clair */ html[data-theme="light"] body::after{ display: none !important; } /* Images */ .gallery-work img, .diapo-img, .gallery-thumb, .lightbox-img{ background: var(--image-bg) !important; } /* Boutons (diapo, formulaires, lightbox, etc.) */ .diapo-btn, form button, input[type="submit"], #lightbox-close, .zoom-btn{ background: var(--btn-bg); color: var(--btn-text); } .diapo-btn:hover, form button:hover, input[type="submit"]:hover, #lightbox-close:hover, .zoom-btn:hover{ background: var(--btn-bg-hover); } /* Bouton audio diapo */ .diapo-audio-btn{ background: transparent; border: none; cursor: pointer; font-size: 1.4rem; line-height: 1; color: var(--muted); padding: 0.15rem 0.35rem; border-radius: 10px; } .diapo-audio-btn:hover{ color: var(--link-hover); } .diapo-audio-btn:focus-visible{ outline: none; box-shadow: var(--focus-ring); } /* Footer */ footer{ background: var(--footer-bg) !important; color: var(--muted) !important; } footer a{ color: var(--link) !important; } /* En mode clair, le footer doit être bien lisible (plus sombre) */ html[data-theme="light"] footer{ color: var(--text) !important; } html[data-theme="light"] footer a{ color: var(--text) !important; } html[data-theme="light"] footer a:hover{ color: var(--link-hover) !important; } /* Lightbox overlay - Clair : fond blanc (vrai blanc) autour de l'œuvre - Sombre : fond noir uniquement */ html[data-theme="light"] .lightbox, html[data-theme="light"] .lightbox-overlay{ background: #ffffff !important; } html[data-theme="dark"] .lightbox, html[data-theme="dark"] .lightbox-overlay{ background: rgba(0,0,0,0.92) !important; } /* Ajustement de l'image de fond de l'accueil selon le thème */ html[data-theme="light"] .background-slideshow{ filter: brightness(0.82) blur(1px) grayscale(8%) !important; } html[data-theme="dark"] .background-slideshow{ filter: brightness(0.52) blur(1.2px) grayscale(10%) !important; } /* Offset sécurité sous la navbar fixe (évite les chevauchements) */ .gallery-page, .oeuvres-section, .diaporama-container, .about-container, .contact-container, .legal-container{ margin-top: calc(var(--site-nav-offset, 80px) + 0.8rem) !important; } /* Navbar compacte (tablettes + mobile) : - évite que les rubriques soient coupées (ex: "Accueil") - affiche un menu hamburger */ @media (max-width: 1100px){ .theme-toggle{ width: 46px; height: 40px; } /* Hamburger visible */ .hamburger{ display: grid !important; } /* Menu déroulant */ .nav-links{ display:none !important; position:absolute; top: calc(100% + 8px); right: 0.8rem; left: 0.8rem; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; padding: 0.5rem; border-radius: 16px; background: var(--nav-bg) !important; box-shadow: var(--nav-shadow) !important; overflow: visible; } .nav-links.open, .nav-links.show{ display:flex !important; } .nav-links a{ padding: .7rem .9rem !important; } } /* Navbar compacte forcée (si le script détecte un débordement) -> même comportement que le breakpoint 1100px, mais applicable sur desktop. */ html.nav-force-hamburger .theme-toggle{ width: 46px; height: 40px; } html.nav-force-hamburger .hamburger{ display: grid !important; } html.nav-force-hamburger .nav-links{ display:none !important; position:absolute; top: calc(100% + 8px); right: 0.8rem; left: 0.8rem; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; padding: 0.5rem; border-radius: 16px; background: var(--nav-bg) !important; box-shadow: var(--nav-shadow) !important; overflow: visible; } html.nav-force-hamburger .nav-links.open, html.nav-force-hamburger .nav-links.show{ display:flex !important; } html.nav-force-hamburger .nav-links a{ padding: .7rem .9rem !important; } /* =========================== Language switcher (flags) Only visible element for language selection (no extra text). =========================== */ .lang-switcher{ display:flex; align-items:center; gap: .18rem; } .lang-link{ display:inline-grid; place-items:center; width: 34px; height: 34px; font-size: 1.15rem; line-height: 1; text-decoration:none; border-radius: 999px; background: transparent; user-select: none; } .lang-link:hover{ background: var(--nav-link-hover-bg); } .lang-link:focus-visible{ outline: none; box-shadow: var(--focus-ring); } .lang-link.active{ background: var(--nav-link-hover-bg); } /* Slightly larger tap targets on small screens */ @media (max-width: 840px){ .lang-link{ width: 38px; height: 36px; font-size: 1.2rem; } } /* Ultra-mobile portrait: la navbar doit rester 100% utilisable. Problème rencontré : la rangée d’actions (drapeaux + thème + hamburger) peut pousser l’icône ☰ hors écran, rendant la navigation impossible. Solution : - compacter légèrement les icônes - autoriser un retour à la ligne (actions sur 2e ligne) => le hamburger reste toujours visible. */ @media (max-width: 520px){ .navbar-container{ flex-wrap: wrap !important; gap: .55rem !important; padding: 0.55rem 0.7rem !important; } .nav-logo{ flex: 1 1 auto !important; min-width: 0 !important; } .nav-logo a{ /* éviter que le logo prenne toute la largeur */ max-width: 58vw !important; overflow: hidden !important; text-overflow: ellipsis !important; display: inline-block !important; vertical-align: middle !important; } .nav-actions{ width: 100% !important; flex: 1 1 100% !important; justify-content: flex-end !important; gap: .25rem !important; } .lang-switcher{ gap: .1rem !important; } .lang-link{ width: 30px !important; height: 30px !important; font-size: 1rem !important; } .theme-toggle{ width: 38px !important; height: 36px !important; } .theme-toggle .theme-icon{ font-size: 1.05rem !important; } .hamburger{ width: 40px !important; height: 36px !important; font-size: 1.05rem !important; } } /* =========================== Expanded description panels (La maison...) must follow theme - In light mode: dark text on cream (no white-on-black) =========================== */ html[data-theme="light"] .expanded-text{ background: var(--panel-bg-soft) !important; color: var(--text) !important; box-shadow: 0 10px 32px rgba(20,18,16,0.14) !important; } html[data-theme="light"] .expanded-text p{ color: var(--text) !important; } html[data-theme="light"] .expanded-text blockquote{ color: var(--muted) !important; border-left-color: rgba(26,23,18,0.14) !important; } html[data-theme="light"] .expanded-text .source{ color: var(--muted) !important; } html[data-theme="light"] .expanded-close{ color: var(--text) !important; background: rgba(26,23,18,0.06) !important; } /* =========================== Bio : Distinctions - En mode clair, on ne veut pas de bloc sombre (fond noir) =========================== */ html[data-theme="light"] .distinctions-block{ background: var(--panel-bg-soft) !important; color: var(--text) !important; border-left-color: rgba(26,23,18,0.18) !important; box-shadow: 0 10px 32px rgba(20,18,16,0.12) !important; } html[data-theme="light"] .distinctions-block h2{ color: var(--heading) !important; } html[data-theme="light"] .distinctions-list, html[data-theme="light"] .distinctions-list li{ color: var(--text) !important; } html[data-theme="light"] .distinctions-list li span{ color: var(--muted) !important; } /* =========================== Contact form status messages =========================== */ .form-status{ margin-top: 0.8rem; font-size: 0.95rem; line-height: 1.35; color: var(--muted); min-height: 1.35em; } .form-status.ok{ color: #1c6f3a; } html[data-theme="dark"] .form-status.ok{ color: #6fe3a3; } .form-status.error{ color: #b3261e; } html[data-theme="dark"] .form-status.error{ color: #ff8a80; } .form-status.info{ color: var(--muted); } /* Utility: visually hidden (for honeypot) */ .visually-hidden{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; } /* =========================== Extra small screens polish - keep flags + theme toggle accessible without breaking layout =========================== */ @media (max-width: 420px){ .nav-actions{ gap: .22rem !important; } .lang-link{ width: 32px !important; height: 32px !important; font-size: 1.05rem !important; } .theme-toggle{ width: 40px !important; height: 34px !important; } .hamburger{ width: 40px !important; height: 34px !important; font-size: 1.05rem !important; } .nav-logo a{ max-width: 140px !important; } .nav-signature{ display:none !important; } } @media (max-width: 360px){ .nav-actions{ flex-wrap: wrap !important; justify-content: flex-end !important; } .lang-switcher{ width: 100%; justify-content: flex-end; } } /* =========================== Mobile padding: keep content comfortable to read =========================== */ @media (max-width: 700px){ .gallery-page, .diaporama-container, .about-container, .contact-container, .legal-container, .oeuvres-section, .publications-section{ padding-left: 0.9rem !important; padding-right: 0.9rem !important; } }