/* ════════════════════════════════════════════════════════════ michelbatlle.art — V2 / TWEAKS Surcharge le thème d'origine : header & footer clairs, logo simplifié, héros épurés, mises en page Artiste / Livre / Contact. ┌──────────────────────────────────────────────────────────┐ │ ACTIVER / DÉSACTIVER LES TWEAKS │ │ │ │ • Méthode 1 — globale (recommandée) : │ │ dans app.js, tout en haut → var V2_TWEAKS = true; │ │ Mets false pour revenir au thème noir d'origine. │ │ Un seul réglage agit sur les 6 pages. │ │ │ │ • Méthode 2 — par page : │ │ commente / supprime, dans le de la page, │ │ la ligne │ └──────────────────────────────────────────────────────────┘ Ce fichier est chargé APRÈS styles.css : ses règles ont donc priorité (même spécificité, source plus tardive). ════════════════════════════════════════════════════════════ */ /* ── Header blanc : liens noirs, rouge au survol ── */ .nav--transparent, .nav--dark, .nav--light { background: #ffffff; box-shadow: 0 1px 0 var(--color-border); } .nav--dark .brand__line1, .nav--transparent .brand__line1, .nav--light .brand__line1 { color: var(--color-brand); } .nav--dark .nav__link, .nav--transparent .nav__link, .nav--light .nav__link { color: var(--color-text-primary); } .nav__link:hover { color: var(--color-brand); border-bottom-color: var(--color-brand); } .nav__link[aria-current="page"] { color: var(--color-brand); border-bottom-color: var(--color-brand); } .nav__hamburger span { background: var(--color-text-primary); } /* ── Header : bandeau agrandi ── */ :root { --nav-height: 92px; } .nav__link { font-size: 0.9375rem; } .lang-switcher__btn { font-size: 0.8125rem; } /* Logo : MICHEL / BATLLE empilés, agrandi et resserré, sans carré rouge ni sous-titre */ .brand__line1 { font-size: 2.125rem; line-height: 1.0; letter-spacing: 0.005em; } /* Sélecteur de langue : couleurs sombres + espacement très resserré */ .lang-switcher { gap: 2px; } .lang-switcher__btn { color: var(--color-gray-500); } .lang-switcher__btn.is-active { color: var(--color-text-primary); } .lang-switcher__btn:hover { color: var(--color-brand); } .lang-switcher__separator { color: var(--color-border); } /* ── Footer gris clair, bandeau agrandi : logo + Instagram (icône + pseudo), sans trait ── */ .site-footer { background: var(--color-bg-section); border-top: 1px solid var(--color-border); padding: var(--space-16) 0 var(--space-10); } .site-footer .container { padding-inline: var(--space-10); } /* aligne le bord gauche/droit sur le header */ .site-footer__inner { border-bottom: none; margin-bottom: var(--space-3); } .site-footer__brand { font-family: 'Barlow', sans-serif; font-weight: 900; font-size: 1.0625rem; line-height: 1.04; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-brand); } .site-footer__social { display: inline-flex; align-items: center; gap: var(--space-2); font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--color-text-primary); transition: color var(--duration-fast) var(--ease-out); } .site-footer__social:hover { color: var(--color-brand); } .site-footer__link { color: var(--color-text-primary); } .site-footer__link:hover { color: var(--color-brand); } .site-footer__bottom { justify-content: flex-end; } .site-footer__copy { color: var(--color-gray-600); font-size: 0.8125rem; } /* ── Héros intérieurs (toutes pages sauf accueil) : hauteur réduite + kicker rouge masqué ── */ .hero--page { min-height: 42vh; } .hero--page .hero__content { padding-top: calc(var(--nav-height) + var(--space-3)); padding-bottom: var(--space-5); } .hero--page .hero__accent { margin-bottom: var(--space-4); } .hero--page .display-l { font-size: clamp(2rem, 3.6vw, 3rem); } .hero--page .hero__sub { margin-top: var(--space-3); } .hero--page .hero__kicker { display: none; } /* ── Héros accueil : titre centré verticalement (tagline + boutons retirés du HTML) ── */ .hero--cover { align-items: center; } .hero--cover .hero-cover__content { padding-bottom: 0; } /* ── Héros accueil : zoom Ken Burns désactivé sur la photo de fond ── */ .hero--cover .hero__bg-image { animation: none; transform: scale(1); } /* ── Portails accueil : sans effet de zoom ni dégradé noir sur les photos ── */ .portal:hover .portal__media img, .portal:focus-visible .portal__media img { transform: none; } .portal__scrim, .portal:hover .portal__scrim { background: none; } .portal__title { text-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 2px 16px rgba(0,0,0,0.7); } /* ── Page Artiste : présentation photo + texte justifié ── */ .bio-layout { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; } .bio-layout__media { position: sticky; top: calc(var(--nav-height) + var(--space-8)); } .bio-layout__media img { width: 100%; height: auto; display: block; } .bio-layout__text p { text-align: justify; } /* ── Hero accueil : scrim très clair (photo plus visible) ── */ .hero-cover__scrim { background: linear-gradient(90deg, rgba(12,12,12,0.18) 0%, rgba(12,12,12,0.06) 45%, rgba(12,12,12,0) 100%), linear-gradient(0deg, rgba(12,12,12,0.18) 0%, rgba(12,12,12,0) 50%), linear-gradient(180deg, rgba(12,12,12,0.10) 0%, rgba(12,12,12,0) 22%); } /* ── Accroche home : taille réduite, police fine ── */ .statement__line { font-family: 'Poppins', sans-serif; font-size: clamp(1rem, 2vw, 1.75rem); font-weight: 300; letter-spacing: 0; } /* ── Texte courant EN : poids 200 (styles.css) trop fin → paraît gris. On l'aligne sur le FR (400) pour un noir franc, cohérent entre langues. ── */ .body-en { font-weight: 400; } /* ── Titres de page : majuscules + poids réduit ── */ .page-head__title { text-transform: uppercase; font-weight: 400; letter-spacing: 0.08em; font-size: clamp(1.5rem, 3vw, 2.75rem); } /* ── Portails : titres uppercase, poids réduit, blanc adouci (opaque) ── */ .portal__title { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #efedea; } /* ── Citation Artiste sur fond gris : texte sombre, taille réduite, police fine, 2 lignes ── */ .section--gray .pullquote-block__text { color: var(--color-text-primary); font-family: 'Poppins', sans-serif; font-weight: 300; font-size: clamp(1rem, 1.8vw, 1.5rem); letter-spacing: 0; line-height: 1.6; max-width: 44ch; margin-left: auto; margin-right: auto; } /* ── Guillemet citation : harmoniser avec Poppins ── */ .section--gray .pullquote-block__glyph { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 2.5rem; color: var(--color-text-label); line-height: 1; } /* ── Prix livre : discret ── */ .book-price { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 1.25rem; color: var(--color-text-label); } /* ── Titres de page : trait rouge plus fin ── */ .page-head__accent { height: 3px; } /* ── Livre : colonnes alignées en haut ── */ .book-layout { align-items: start; } /* ── Œuvres : grille 4 colonnes alignées (retour sur la version organique) ── */ [role="tabpanel"] .artwork-card__title { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 0.8125rem; letter-spacing: 0.01em; color: var(--color-text-primary); } [role="tabpanel"] .artwork-card__detail { font-weight: 300; font-size: 0.75rem; color: var(--color-text-label); } /* ── Traits horizontaux section-header : supprimés pour plus d'aération ── */ .section-header__line { display: none; } /* ── Œuvres : trait gris sous les tabs supprimé ── */ .tabs { border-bottom: none; } /* ── Lightbox : fond clair au lieu de noir ── */ .lightbox { background: rgba(250,250,249,0.97); } .lightbox__title { color: var(--color-text-primary); } .lightbox__close, .lightbox__prev, .lightbox__next { color: var(--color-text-primary); } .lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { color: var(--color-brand); } /* ── Bouton retour en haut ── */ .back-to-top { position: fixed; right: var(--space-6); bottom: var(--space-6); width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--color-brand); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease; z-index: var(--z-sticky); box-shadow: 0 4px 14px rgba(0,0,0,0.22); } .back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-to-top:hover { background: #c20021; } /* ── Mobile : menu déroulant clair + bio en 1 colonne ── */ @media (max-width: 767px) { :root { --nav-height: 76px; } .brand__line1 { font-size: 1.5rem; } .nav__links { background: #ffffff; box-shadow: 0 10px 20px -10px rgba(0,0,0,0.2); } .nav__links li { border-top: 1px solid var(--color-border); } .bio-layout { grid-template-columns: 1fr; gap: var(--space-8); } .bio-layout__media { position: static; max-width: 340px; } .back-to-top { right: var(--space-4); bottom: var(--space-4); width: 40px; height: 40px; } } /* Lightbox — tout contenu dans la viewport, pas de scroll */ .lightbox__image { max-height: calc(90vh - 100px); max-width: 90vw; } .lightbox__caption { margin-top: var(--space-3); } /* Lightbox counter — dans le flux sous la caption, plus de superposition */ .lightbox__counter { position: static; transform: none; margin-top: var(--space-2); text-align: center; } /* ════════════════════════════════════════════════════════════ ŒUVRES — galerie « toiles entières », disposition en quinconce Les œuvres ne sont plus recadrées en 4/3 : elles s'affichent en ENTIER, plus petites, aérées sur fond blanc, façon galerie (réf. Opera Gallery). Le décalage vient du masonry (colonnes CSS). ════════════════════════════════════════════════════════════ */ [role="tabpanel"] .artwork-grid-4 { display: block; column-count: 3; column-gap: clamp(1.75rem, 3vw, 3.25rem); } @media (min-width: 1280px) { [role="tabpanel"] .artwork-grid-4 { column-count: 4; } } @media (max-width: 767px) { [role="tabpanel"] .artwork-grid-4 { column-count: 2; column-gap: var(--space-5); } } @media (max-width: 460px) { [role="tabpanel"] .artwork-grid-4 { column-count: 1; } } /* La carte devient un bloc masonry insécable */ [role="tabpanel"] .artwork-card { display: inline-block; width: 100%; margin: 0 0 clamp(2.25rem, 3.2vw, 3.75rem); break-inside: avoid; -webkit-column-break-inside: avoid; transform: none; } [role="tabpanel"] .artwork-card:hover { transform: none; } /* Image montrée en entier (ratio naturel), plus aucun recadrage */ [role="tabpanel"] .artwork-card__image-wrap, [role="tabpanel"] .artwork-card__image-wrap.aspect-4-3 { aspect-ratio: auto; overflow: visible; } [role="tabpanel"] .artwork-card__image { height: auto; object-fit: contain; transition: opacity var(--duration-normal) var(--ease-out); } [role="tabpanel"] .artwork-card:hover .artwork-card__image, [role="tabpanel"] .artwork-card:focus-visible .artwork-card__image { transform: none; opacity: 0.82; } [role="tabpanel"] .artwork-card__caption { padding: var(--space-3) 0 0; } /* Le décalage des hauts de colonnes (peintures / dessins) est géré en JS (initArtworkStagger dans app.js) : en multicol, seule la 1re carte de chaque colonne peut réellement décaler le haut, ce qu'un motif CSS ne peut cibler. */ /* ── Contact : mise en page aérée. Le titre garde la même marge haute que les autres pages (padding-top de base = nav + space-12 ≈ 140px, non surchargé) ; formulaire aligné en haut sur la colonne de gauche ; colonne infos espacée. Peut dépasser la hauteur d'écran (aération prioritaire sur le no-scroll). */ .contact-section .contact-layout { align-items: start; } .contact-section .contact-info { gap: var(--space-8); } /* Le formulaire démarre au niveau du bloc « Adresse » (sous le titre) : décalage = accent + sa marge + hauteur du titre + sa marge + le gap infos. */ @media (min-width: 1024px) { .contact-section .contact-info + div { padding-top: calc(3px + var(--space-5) + clamp(1.5rem, 3vw, 2.75rem) + var(--space-6) + var(--space-8)); } } /* ════════════════════════════════════════════════════════════ LIVRE — test « tout en noir » : les accents rouges du CONTENU (trait de titre, labels, bouton, citation, liens) passent au noir pour réduire le nombre d'éléments colorés. La couleur ne subsiste que dans les photos. Nav & footer gardent le rouge (cohérence site). ════════════════════════════════════════════════════════════ */ .page-livre main { --color-brand: var(--color-text-primary); --color-brand-dark: #000; --color-brand-pressed: #000; } .page-livre main .book-price { color: var(--color-text-primary); } /* Photo réelle : ombre discrète (la photo a déjà son fond clair) */ .page-livre .book-cover img { box-shadow: 0 18px 44px -26px rgba(0,0,0,0.4); } /* ════════════════════════════════════════════════════════════ FRISE EXPOSITIONS — format sur 3 niveaux (demande client) : Titre de l'expo en GRAS · Lieu en NORMAL · Ville-pays en ITALIQUE. ════════════════════════════════════════════════════════════ */ .frieze__event .frieze__title { display: block; font-weight: 700; color: var(--color-text-primary); } .frieze__event .frieze__venue { display: block; font-weight: 400; color: var(--color-text-primary); } .frieze__event .frieze__place { font-style: italic; margin-top: 2px; }