/* ═══════════════════════════════════════════════════════════════════ LIÈGE INSIDE · site.css ═══════════════════════════════════════════════════════════════════ CSS partagé par index.php (home) et lieu.php (galerie d'un lieu). guide.php a son propre fichier (guide.css) pour la vue panorama. ─────────────────────────────────────────────────────────────────── COMMENT LIRE CE FICHIER ─────────────────────────────────────────────────────────────────── Le CSS est organisé en 5 sections, dans cet ordre : 1. VARIABLES DE THÈME → :root (dark) et [data-theme="light"] 2. BASE → reset, body 3. HEADER → bandeau du haut, boutons thème/langue 4. HOME (index.php) → grille des lieux 5. LIEU (lieu.php) → hero + grille des œuvres 6. ÉLÉMENTS PARTAGÉS → context, disclaimer, footer, erreur 7. RESPONSIVE → mobile ≤ 600px ─────────────────────────────────────────────────────────────────── OÙ MODIFIER QUOI — MÉMO RAPIDE ─────────────────────────────────────────────────────────────────── • Changer une COULEUR globale (fond, texte, ocre…) → bloc :root pour le thème sombre, [data-theme="light"] pour le clair. Ne modifier que les VARIABLES, pas les règles concrètes en bas — tout le reste s'ajuste automatiquement. • Rendre les PHOTOS plus/moins visibles → deux leviers (identiques dans les deux thèmes) : (a) --img-filter-* (brightness, saturate, sepia, contrast) état repos + état :hover (le survol « réveille » l'image) (b) --card-grad-* (densité du voile par-dessus les photos) toujours opaque en bas = texte lisible jusqu'au bord • Changer la POLICE → --serif-display (titres), --serif-body (texte), --mono (boutons). Les @import des polices sont dans index.php/lieu.php (). • Changer une TAILLE / un ESPACEMENT → chercher le bloc concerné (ex. .lieu-card-name → font-size). Les paddings de page sont dans header, main, #grid-section, footer. • Changer le COMPORTEMENT HOVER (transforme, survol) → chercher les sélecteurs :hover (ex. .lieu-card:hover). ─────────────────────────────────────────────────────────────────── LES DEUX THÈMES ─────────────────────────────────────────────────────────────────── Thème sombre = défaut. Thème clair = attribut data-theme="light" posé sur via un petit script dans index.php/lieu.php/guide.php (lit localStorage.li_theme avant le rendu pour éviter le FOUC). Tout le reste du CSS utilise des variables — donc en basculant de thème on ne change que les 2 blocs du haut et quelques overrides spécifiques (valeurs en dur dans guide.css). ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ 1. VARIABLES DE THÈME ═══════════════════════════════════════════════════════════════════ */ /* ── Thème sombre (par défaut) ── Palette inspirée parchemin sombre + ocre patiné. Toute valeur ici est héritée sauf si [data-theme="light"] écrase. */ :root { /* Fonds et surfaces — du plus sombre (--bg) au plus clair (--surface-2). --bg : fond de la page --surface : header, context, disclaimer, footer --surface-2: carte d'œuvre sans image (skeleton, fallback) */ --bg: #0e0c09; --surface: #1c1812; --surface-2: #1c1912; /* Bordures — --border plus neutre, --border-warm teintée chaude. Utilisées pour séparer header/sections et contourer les cartes. */ --border: #2a2418; --border-warm: #3d3020; /* Ocre = couleur signature du site. --ochre : boutons, titres, accent --ochre-dim : bordures boutons, éléments secondaires --ochre-faint : fond translucide des boutons au repos --ochre-hover : fond translucide des boutons au survol */ --ochre: #c4966a; --ochre-dim: #8a6a44; --ochre-faint: rgba(196,150,106,0.08); --ochre-hover: rgba(196,150,106,0.18); /* Emeraude — réservé à la zone guide IA (plus utilisé dans site.css mais conservé ici pour cohérence si un composant partage la palette). */ --emerald: #4a7c5e; --emerald-dim: #2d5040; /* Bleu cristal — utilisé pour les sous-titres italiques (.lieu-card-title, #lieu-hero-title, .card-titre). Contraste doux avec l'ocre. */ --crystal: #7a9eb5; /* Textes — du plus saillant au plus effacé. --text-primary : titres, texte fort --text-secondary : paragraphes, descriptions --text-muted : légendes, footer, hints */ --text-primary: #e8dabc; --text-secondary: #9a8e7a; --text-muted: #5a5246; /* Couleur du filet autour des cartes au survol. En sombre on reste sur une teinte chaude proche des bordures pour un feedback discret ; en clair on bascule sur l'ocre franc (voir [data-theme="light"]). */ --card-hover-border: #5a4530; /* Gradient de recouvrement sur les cartes photo (appliqué du bas vers le haut dans .lieu-card-body, .card-body, #lieu-hero-overlay). --card-grad-strong : opacité au bas de la carte (texte lisible) --card-grad-mid : opacité au milieu --card-grad-soft : opacité aux deux-tiers --card-grad-faint : opacité au sommet (0 = image visible nette) */ --card-grad-strong: rgba(14,12,9,0.96); --card-grad-mid: rgba(14,12,9,0.78); --card-grad-soft: rgba(14,12,9,0.35); --card-grad-faint: rgba(14,12,9,0.08); /* Filtres CSS appliqués aux photos de fond. brightness < 1 → assombrit saturate < 1 → désature sepia > 0 → vire chaud contrast < 1 → aplatit (ajouté en thème clair) --img-filter : carte lieu (home), état repos --img-filter-hover : carte lieu (home), au survol --img-filter-hero : grande image du hero (lieu.php) --img-filter-card : carte œuvre (lieu.php), état repos --img-filter-card-hover : carte œuvre, au survol */ --img-filter: brightness(0.48) saturate(0.70) sepia(0.25); --img-filter-hover: brightness(0.68) saturate(0.90) sepia(0.10); --img-filter-hero: brightness(0.40) saturate(0.65) sepia(0.30); --img-filter-card: brightness(0.38) saturate(0.65) sepia(0.28); --img-filter-card-hover: brightness(0.62) saturate(0.88) sepia(0.12); /* ── Cartes home (nouveau layout : photo recadrée au-dessus d'un cartel) ── Ces variables ne servent QU'AUX cartes .lieu-card (home). Les œuvres .card sur lieu.php utilisent toujours --img-filter-card. Pour ajuster la photo : --photo-zoom : hauteur du crop (140% = on zoome vertical, les bords compressés du panorama sont coupés) --photo-pos-y : position verticale du cadrage (50% = centre) --photo-saturate : saturation au repos (1 = pleine couleur) --photo-sepia : teinte sépia au repos --photo-brightness : luminosité au repos Au survol, tous les filtres passent à 1/0/1 (photo pure). */ --photo-zoom: 140%; --photo-pos-y: 50%; --photo-saturate: 0.72; --photo-sepia: 0.08; --photo-brightness: 0.86; --card-shadow: 0 22px 44px -20px rgba(0,0,0,0.55); /* ── Hero sur lieu.php (split 50/50 + filigrane) ── Photo plus grande et plus visible que les cartes, d'où des filtres légèrement plus doux. Le filigrane utilise var(--ochre) avec une opacité fixe de 0.06 définie dans la règle #lieu-hero-content::before. */ --hero-photo-zoom: 145%; --hero-photo-pos-y: 50%; --hero-photo-sat: 0.72; --hero-photo-sep: 0.08; --hero-photo-bright: 0.88; --hero-gutter: 48px; /* Polices — familles et fallbacks. --serif-display : titres, grand format, italiques (Playfair Display) --serif-body : corps de texte, descriptions (Lora) --mono : boutons, labels, mentions techniques (JetBrains Mono) */ --serif-display: 'Playfair Display', Georgia, serif; --serif-body: 'Lora', Georgia, serif; --mono: 'JetBrains Mono', monospace; } /* ── Thème clair : parchemin ── Toutes les variables sont redéfinies ici. Ne pas ajouter de nouvelles règles — juste écraser des variables déjà présentes dans :root. */ [data-theme="light"] { /* Fonds — crème clair vers ocre pâle */ --bg: #f5efe3; --surface: #ebe3d1; --surface-2: #e0d5bd; /* Bordures parchemin */ --border: #d4c7a8; --border-warm: #b89f75; /* Ocre plus sombre pour contraster sur fond clair */ --ochre: #8a6a44; --ochre-dim: #6b5434; --ochre-faint: rgba(138,106,68,0.10); --ochre-hover: rgba(138,106,68,0.22); /* Emeraude et cristal ajustés */ --emerald: #3d6b4e; --emerald-dim: #2d5040; --crystal: #4a6b82; /* Textes inversés — sombres sur clair. */ --text-primary: #2b2419; --text-secondary: #5a4f3d; --text-muted: #6a5d45; /* Voile parchemin — mêmes proportions qu'en dark mode : descend fort jusqu'en bas pour que le texte reste toujours lisible, et s'ouvre seulement en haut pour laisser deviner l'image. */ --card-grad-strong: rgba(245,239,227,0.97); --card-grad-mid: rgba(245,239,227,0.82); --card-grad-soft: rgba(245,239,227,0.42); --card-grad-faint: rgba(245,239,227,0.15); /* Filtres images en clair : dimming UNIQUEMENT via filter (pas d'opacity), comme en dark. Saturation basse + sépia marqué + contraste réduit au repos → parchemin ancien. Au survol, filtre plus lumineux et moins sépia = l'image reprend vie. C'est la même mécanique de révélation que le dark, transposée en clair. */ --img-filter: brightness(0.78) saturate(0.50) sepia(0.38) contrast(0.88); --img-filter-hover: brightness(1.00) saturate(0.82) sepia(0.15) contrast(0.96); --img-filter-hero: brightness(0.80) saturate(0.55) sepia(0.36) contrast(0.90); --img-filter-card: brightness(0.76) saturate(0.48) sepia(0.40) contrast(0.88); --img-filter-card-hover: brightness(1.00) saturate(0.80) sepia(0.18) contrast(0.96); /* Photo carte home en clair : moins dimming, plus « musée contemporain ». */ --photo-saturate: 0.55; --photo-sepia: 0.05; --photo-brightness: 0.98; --card-shadow: 0 22px 44px -20px rgba(74,60,36,0.32); /* Filet de hover des cartes en clair : on garde l'ocre franc, bien visible sur fond parchemin (pas de plainte côté clair). */ --card-hover-border: var(--ochre); /* Hero photo en clair — mêmes réglages adoucis */ --hero-photo-sat: 0.55; --hero-photo-sep: 0.05; --hero-photo-bright: 0.96; } /* ═══════════════════════════════════════════════════════════════════ 2. BASE — reset et body ═══════════════════════════════════════════════════════════════════ */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--serif-body); background: var(--bg); color: var(--text-primary); min-height: 100dvh; /* dvh = hauteur dynamique (mobile) */ display: flex; flex-direction: column; /* header / main / footer empilés */ } /* ═══════════════════════════════════════════════════════════════════ 3. HEADER — partagé index.php + lieu.php Bandeau du haut : logo "Liège Inside" + boutons thème/langue. ═══════════════════════════════════════════════════════════════════ */ /* Conteneur général. Le padding contrôle la hauteur du header. */ header { padding: 36px 48px 32px; background: var(--surface); border-bottom: 1px solid var(--border); position: relative; } /* Filet ocre sous le header (effet décoratif). Pour le retirer : supprimer le bloc header::after entier. */ header::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent 0%, var(--ochre-dim) 30%, var(--ochre-dim) 70%, transparent 100%); opacity: 0.40; } /* Ligne du haut : logo à gauche, boutons à droite. */ .header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } /* Logo "Liège Inside". Modifier font-size pour changer sa taille. */ header h1 { font-family: var(--serif-display); font-size: 38px; font-weight: 700; font-style: italic; letter-spacing: 0.01em; color: var(--text-primary); line-height: 1; } /* Le mot "Inside" — couleur ocre, pas italique. */ header h1 span { color: var(--ochre); font-style: normal; } /* Ligne horizontale dégradée entre logo et meta. */ .header-rule { width: 100%; height: 1px; background: linear-gradient(to right, var(--border-warm) 0%, var(--border) 100%); margin-bottom: 14px; } /* Bloc sous la ligne : tagline (FR/EN) + sous-titre. */ .header-meta { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; } /* Tagline principale (ou nom du lieu sur lieu.php). */ .header-museum { font-family: var(--serif-body); font-size: 16px; font-weight: 500; font-style: normal; color: var(--ochre); letter-spacing: 0.08em; font-variant: small-caps; } /* Sous-titre discret (seulement sur la home). */ #header-subtitle { font-family: var(--mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.08em; } /* Groupe des boutons à droite (thème + langue). */ .header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Boutons génériques du header — mêmes styles pour thème et langue. Pour changer la TAILLE des boutons, modifier padding et font-size. */ #lang-btn, #theme-btn { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; /* --text-secondary = plus lumineux que --text-muted, lisible au repos (sinon les boutons « disparaissent » sur fond sombre). */ color: var(--text-secondary); background: transparent; border: 1px solid var(--border-warm); padding: 5px 13px; border-radius: 2px; cursor: pointer; transition: all 0.2s; flex-shrink: 0; } #lang-btn:hover, #theme-btn:hover { border-color: var(--ochre-dim); color: var(--ochre); } /* Le bouton thème contient une icône SVG (soleil/lune) injectée par JS. Padding réduit pour avoir un bouton carré. */ #theme-btn { padding: 5px 10px; display: inline-flex; align-items: center; justify-content: center; } #theme-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; /* hérite de la couleur du bouton */ stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ── Focus clavier (accessibilité) ── `:focus-visible` ne se déclenche QUE pour la navigation clavier, pas au clic souris — donc pas de halo disgracieux pour les souristes. L'outline ocre + offset crée un anneau net autour de l'élément actif. Pour changer la couleur de focus : éditer --ochre globalement, ou remplacer par une variable dédiée --focus-ring si besoin. */ :focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; border-radius: 2px; } .lieu-card:focus-visible, .card:focus-visible { outline-offset: 3px; /* plus d'espace pour les grosses cartes */ } /* ═══════════════════════════════════════════════════════════════════ 4. HOME (index.php) — grille des lieux Carte = photo recadrée 16/9 en haut + cartel texte en dessous (pas de voile, pas de texte par-dessus l'image). ═══════════════════════════════════════════════════════════════════ */ /* Conteneur grille. minmax(320px, 1fr) = 320 px min, sinon largeur égale. gap = espace entre cartes. Ajuster pour densifier/aérer. */ main { flex: 1; padding: 32px 48px 48px; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; align-content: start; } /* Carte d'un lieu — nouveau layout « cartel de musée » : photo recadrée en haut (16/9), cartel texte en dessous, pas de voile. Même structure dans les deux thèmes, seules les variables changent. color: inherit = empêche la couleur de lien visité (violet) de fuir sur les descendants qui n'auraient pas de color explicite. */ .lieu-card { background: var(--surface); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; min-height: 440px; cursor: pointer; text-decoration: none; color: inherit; transition: border-color 0.35s, transform 0.35s, box-shadow 0.35s; } .lieu-card:hover { border-color: var(--card-hover-border); transform: translateY(-4px); box-shadow: var(--card-shadow); } /* Photo du haut — 16/9, recadrée verticalement pour couper les bords compressés des panoramas équilatéraux. Filtre = --photo-* (thème). */ .lieu-card-bg { width: 100%; aspect-ratio: 16 / 9; background-size: auto var(--photo-zoom); background-position: center var(--photo-pos-y); background-repeat: no-repeat; background-color: var(--surface-2); filter: saturate(var(--photo-saturate)) sepia(var(--photo-sepia)) brightness(var(--photo-brightness)); transition: filter 0.6s ease, transform 0.8s ease; } .lieu-card:hover .lieu-card-bg { filter: saturate(1) sepia(0) brightness(1); /* photo pure au survol */ transform: scale(1.03); } /* Cartel texte — fond plein (surface du thème), pas de voile. */ .lieu-card-body { padding: 22px 24px 20px; display: flex; flex-direction: column; flex: 1; background: transparent; } /* Nom du lieu (La Boverie, …). */ .lieu-card-name { font-family: var(--serif-display); font-size: 26px; font-weight: 600; color: var(--text-primary); line-height: 1.12; margin-bottom: 3px; } /* Sous-titre italique cristal + filet séparateur. */ .lieu-card-title { font-family: var(--serif-body); font-size: 14px; font-style: italic; font-weight: 400; color: var(--crystal); padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); } /* Description — clippée à 3 lignes, flex:1 pour pousser le pied en bas. */ .lieu-card-desc { font-family: var(--serif-body); font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 18px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } /* Pied : compteur panoramas (gauche) + visites (droite), filet au-dessus. */ .lieu-card-footer { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); } /* Compteur panoramas : chiffre Playfair ocre + label mono. */ .lieu-card-count-pied { display: inline-flex; align-items: baseline; gap: 8px; } .lieu-card-count-num { font-family: var(--serif-display); font-size: 20px; font-weight: 600; /* --text-primary = crème en sombre, brun foncé en clair : même teinte que le titre, look cohérent et muséal, pas d'accent ocre isolé. */ color: var(--text-primary); font-variant-numeric: lining-nums; line-height: 1; } .lieu-card-count-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } /* Compteur de visites, à droite du pied (caché si v == 0 côté JS). */ .lieu-card-visits { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } .lieu-card-visits-num { color: var(--text-secondary); font-weight: 500; } /* ═══════════════════════════════════════════════════════════════════ 5. LIEU (lieu.php) — hero + grille d'œuvres Même principe que la home mais avec un grand hero en en-tête. ═══════════════════════════════════════════════════════════════════ */ /* Hero — split 50/50 : texte à gauche, photo encadrée à droite. Pas de voile, pas de texte par-dessus la photo. Filigrane géant du nom du lieu en fond, derrière le texte (via ::before + attr()). Même structure dans les deux thèmes, couleurs gérées par variables. */ #lieu-hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hero-gutter); align-items: stretch; min-height: 440px; padding: 32px var(--hero-gutter) 36px; background: var(--surface); border-bottom: 1px solid var(--border); overflow: visible; /* important : laisse le filigrane déborder si besoin */ } /* Colonne photo (droite) — zoomée verticalement pour couper les bords compressés des panoramas équilatéraux, encadrée avec marge symétrique. */ #lieu-hero-bg { order: 2; width: 100%; min-height: 420px; background-size: auto var(--hero-photo-zoom); background-position: center var(--hero-photo-pos-y); background-repeat: no-repeat; background-color: var(--surface-2); border: 1px solid var(--border-warm); border-radius: 3px; filter: saturate(var(--hero-photo-sat)) sepia(var(--hero-photo-sep)) brightness(var(--hero-photo-bright)); transition: filter 0.6s ease; overflow: hidden; } /* Voile historique : totalement désactivé, plus aucun texte sur la photo. */ #lieu-hero-overlay { display: none; } /* Colonne texte (gauche) — conteneur du filigrane. */ #lieu-hero-content { order: 1; position: relative; padding: 0; display: flex; flex-direction: column; overflow: hidden; /* clippe le filigrane à la colonne */ min-width: 0; /* évite les débordements en grid */ } /* Filigrane géant du nom du lieu — généré via attr(data-lieu) sur #lieu-hero-content. Positionné centré vertical, déborde à gauche. Pour retoucher : --ochre pour la teinte, font-size + opacity ici. */ #lieu-hero-content::before { content: attr(data-lieu); position: absolute; top: 50%; left: -30px; transform: translateY(-50%); font-family: var(--serif-display); font-style: italic; font-size: 180px; font-weight: 700; color: var(--ochre); opacity: 0.06; white-space: nowrap; pointer-events: none; user-select: none; letter-spacing: -0.04em; line-height: 0.9; z-index: 1; } /* Contenu du hero : tous les enfants passent au-dessus du filigrane. */ #back-btn, #lieu-hero-label, #lieu-hero-name, #lieu-hero-title, #lieu-hero-desc, #lieu-hero-stats { position: relative; z-index: 2; } /* Bouton "← Tous les lieux" dans le hero. Desktop : placé juste AU-DESSUS du filet des stats. C'est le margin-top: auto qui consomme l'espace vide entre la description et le bloc de pied, poussant le back-btn collé aux stats. Sur mobile il remonte en haut (override dans @media ≤900px). */ #back-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ochre); background: var(--ochre-faint); border: 1px solid var(--ochre-dim); padding: 6px 16px; border-radius: 2px; cursor: pointer; transition: background 0.2s; width: fit-content; text-decoration: none; order: 1; /* desktop : après desc (order 0), avant stats (order 2) */ margin-top: 20px; /* une ligne sous la fin de la description */ margin-bottom: 0; /* pas de marge fixe : les stats portent margin-top:auto */ } #back-btn:hover { background: var(--ochre-hover); } #back-btn::before { content: '←'; } /* Label "Liège Inside · Patrimoine" au-dessus du nom. */ #lieu-hero-label { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.20em; text-transform: uppercase; color: var(--ochre); margin-bottom: 12px; opacity: 1; /* plein contraste sur surface */ } /* Nom du lieu — titre le plus gros de la page. */ #lieu-hero-name { font-family: var(--serif-display); font-size: 52px; font-weight: 600; color: var(--text-primary); line-height: 1.02; margin-bottom: 8px; } /* Sous-titre italique + filet séparateur. max-width partagé avec .desc et les stats pour que le filet, le texte et les compteurs se terminent à la même largeur (alignés sous le nom). */ #lieu-hero-title { font-family: var(--serif-body); font-size: 15px; font-style: italic; font-weight: 400; color: var(--crystal); margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); max-width: 600px; } /* Description du lieu — contrainte à la même largeur que le filet. Pas de flex:1 ici : on laisse la place aux stats en pied de colonne. */ #lieu-hero-desc { font-family: var(--serif-body); font-size: 15px; color: var(--text-secondary); line-height: 1.78; max-width: 600px; margin-bottom: 24px; } /* Bloc compteurs en pied de colonne (panoramas + visites). Filet du haut = même largeur que le filet du sous-titre (max-width). */ #lieu-hero-stats { display: flex; align-items: baseline; gap: 48px; padding-top: 18px; border-top: 1px solid var(--border); max-width: 600px; order: 2; /* dernier enfant de la colonne */ margin-top: auto; /* pousse les stats seuls en pied ; le back-btn reste collé au texte. */ } .lieu-hero-stat { display: inline-flex; align-items: baseline; gap: 10px; } .lieu-hero-stat-num { font-family: var(--serif-display); font-size: 32px; font-weight: 600; color: var(--ochre); font-variant-numeric: lining-nums; line-height: 1; } .lieu-hero-stat-label { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } /* Barre de liens externes (site officiel, billetterie…). Vide = cachée. */ #lieu-hero-links { display: flex; gap: 10px; flex-wrap: wrap; padding: 24px 48px 32px; border-top: 1px solid var(--border); } #lieu-hero-links:empty { display: none; } /* Un lien externe — même apparence que les boutons ocre. */ .lieu-hero-link { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ochre); background: var(--ochre-faint); border: 1px solid var(--ochre-dim); padding: 6px 16px; border-radius: 2px; text-decoration: none; transition: background 0.2s; } .lieu-hero-link:hover { background: var(--ochre-hover); } /* Grille des œuvres (sous le hero). aspect-ratio 3/2 impose la forme rectangulaire. Pour des cartes plus hautes : aspect-ratio 1/1 ou 4/5. */ #grid-section { flex: 1; padding: 40px 48px 48px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; align-content: start; } /* Libellé "N panoramas" en tête de grille. */ #grid-section-label { grid-column: 1 / -1; /* prend toute la largeur */ font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ochre); padding-bottom: 12px; border-bottom: 1px solid var(--border-warm); margin-bottom: 4px; position: relative; } /* Petite accroche ocre sous le libellé. */ #grid-section-label::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 60px; height: 1px; background: var(--ochre-dim); } /* Carte d'une œuvre — même layout « cartel de musée » que .lieu-card : photo 16/9 recadrée en haut + cartel texte en dessous, pas de voile, pas de bouton (toute la carte est cliquable). */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; min-height: 460px; cursor: pointer; text-decoration: none; color: inherit; transition: border-color 0.35s, transform 0.35s, box-shadow 0.35s; } .card:hover { border-color: var(--card-hover-border); transform: translateY(-3px); box-shadow: var(--card-shadow); } /* Photo du haut — partage les mêmes variables --photo-* que .lieu-card pour garantir une cohérence parfaite entre home et pages lieu. */ .card-bg { width: 100%; aspect-ratio: 16 / 9; background-size: auto var(--photo-zoom); background-position: center var(--photo-pos-y); background-repeat: no-repeat; background-color: var(--surface-2); filter: saturate(var(--photo-saturate)) sepia(var(--photo-sepia)) brightness(var(--photo-brightness)); transition: filter 0.6s ease, transform 0.8s ease; } .card:hover .card-bg { filter: saturate(1) sepia(0) brightness(1); transform: scale(1.04); } /* Cartel texte — fond plein, pas de voile. */ .card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; background: transparent; } /* Siècle / époque — tag ocre, étiquette mono en haut du cartel. */ .card-meta { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ochre); margin-bottom: 8px; } /* Titre de l'œuvre — serif display, pas de filet ici (le filet passe sous le bloc d'identité titre + artiste, avant le teaser). */ .card-titre { font-family: var(--serif-display); font-size: 20px; font-weight: 600; color: var(--text-primary); line-height: 1.22; margin-bottom: 6px; } /* Artiste · date — italique cristal, comme les sous-titres home. */ .card-artiste { font-family: var(--serif-body); font-size: 14px; font-style: italic; color: var(--crystal); line-height: 1.5; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); } /* Amorce — premier paragraphe du « message_accueil » du médiateur, clippé à 6 lignes avec ellipsis automatique. Préfixe « Guide : » inline dans le flux (pas d'étiquette séparée) pour signaler la voix du guide sans casser le rythme visuel. */ .card-desc { font-family: var(--serif-body); font-size: 13px; line-height: 1.6; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* Préfixe attribution inline : même corps que .card-desc, italique ocre pour se distinguer subtilement du texte courant sans prendre de place. */ .card-desc-prefix { font-style: italic; color: var(--ochre); } /* ═══════════════════════════════════════════════════════════════════ 6. ÉLÉMENTS PARTAGÉS — skeletons, context, disclaimer, footer ═══════════════════════════════════════════════════════════════════ */ /* Carte fantôme pendant le chargement JSON (shimmer). .thin = variante plus courte utilisée sur lieu.php. */ .card-skeleton { background: var(--surface-2); border: 1px solid var(--border); border-radius: 3px; min-height: 440px; animation: shimmer 2s infinite; } /* Variante utilisée sur lieu.php — cartes œuvres un peu plus courtes. */ .card-skeleton.thin { min-height: 460px; } @keyframes shimmer { 0%,100%{opacity:0.35} 50%{opacity:0.60} } /* Bloc texte sous la grille (home seulement) : contexte éditorial. Le ✦ décoratif est généré par ::before. */ .context { padding: 40px 48px; border-top: 1px solid var(--border); background: var(--surface); position: relative; } .context::before { content: '✦'; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--ochre-dim); background: var(--surface); padding: 0 14px; letter-spacing: 0.06em; } .context-text { font-family: var(--serif-body); font-size: 13px; color: var(--text-secondary); line-height: 1.85; max-width: 680px; } .context-text strong { color: var(--text-primary); font-weight: 500; } /* Disclaimer légal (bêta, non contractuel). */ .disclaimer { padding: 18px 48px; border-top: 1px solid var(--border); background: var(--surface); font-family: var(--mono); font-size: 10px; color: var(--text-muted); line-height: 1.85; letter-spacing: 0.02em; } .disclaimer strong { color: var(--text-secondary); font-weight: 500; } .disclaimer a { color: var(--ochre-dim); text-decoration: none; } .disclaimer a:hover { color: var(--ochre); text-decoration: underline; } /* Pied de page. */ footer { padding: 20px 48px; border-top: 1px solid var(--border); font-family: var(--mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.08em; display: flex; align-items: center; justify-content: space-between; } /* Message d'erreur plein écran (lieu introuvable 404). */ #error-msg { flex: 1; display: flex; align-items: center; justify-content: center; padding: 60px 40px; color: var(--text-muted); font-family: var(--mono); font-size: 13px; text-align: center; } /* ═══════════════════════════════════════════════════════════════════ 7. RESPONSIVE — tablette (≤ 900 px) : le hero passe en colonnes empilées — mobile (≤ 600 px) : paddings et titres resserrés ═══════════════════════════════════════════════════════════════════ */ /* Tablette : le hero ne peut plus tenir en split 50/50, on empile photo au-dessus du texte et on masque le filigrane géant. */ @media (max-width: 900px) { #lieu-hero { grid-template-columns: 1fr; min-height: auto; padding: 24px 32px 28px; gap: 24px; } #lieu-hero-bg { min-height: 240px; order: 1; } #lieu-hero-content { order: 2; padding: 0; } #lieu-hero-content::before { display: none; } #lieu-hero-name { font-size: 38px; } /* Sur mobile, le back-btn remonte en haut : sinon il faudrait scroller sous tout le contenu pour revenir aux lieux. */ #back-btn { order: 0; margin-top: 0; margin-bottom: 20px; } } @media (max-width: 600px) { /* Header + page */ header { padding: 24px 20px 20px; } header h1 { font-size: 28px; } main { padding: 20px; gap: 16px; grid-template-columns: 1fr; } footer { padding: 16px 20px; flex-direction: column; gap: 4px; } .context { padding: 28px 20px; } .disclaimer { padding: 14px 20px; } /* Home */ .lieu-card { min-height: 300px; } .lieu-card-name { font-size: 24px; } /* Lieu — le hero est déjà empilé depuis 900px, on resserre juste */ #lieu-hero { padding: 20px 20px 24px; gap: 18px; } #lieu-hero-bg { min-height: 200px; } #lieu-hero-name { font-size: 28px; } #lieu-hero-title { font-size: 14px; } #lieu-hero-desc { font-size: 14px; } #grid-section { padding: 24px 20px; gap: 16px; grid-template-columns: 1fr; } #lieu-hero-links { padding: 20px 20px 24px; } }