/* ========================================================================= LASCAUX INTERNATIONAL EXHIBITION — Design tokens Conforme à la charte graphique LSXCHARTEWEB.pdf (7 couleurs, Georgia). Pour le thème WordPress : ce fichier devient theme.json + :root. ========================================================================= */ :root { /* --------------------------------------------------------------------- 1. LES 7 COULEURS OFFICIELLES DE LA CHARTE À utiliser toujours à 100 % (aucune teinte intermédiaire). NB : le PDF de charte donne deux fois R146/V20/B26 (couleurs 4 et 7). À confirmer auprès du graphiste — la 7e est peut-être une autre teinte. --------------------------------------------------------------------- */ --lsx-1: #D4610F; /* R212 V97 B15 — orange */ --lsx-2: #C99222; /* R201 V146 B34 — ocre jaune */ --lsx-3: #B7251D; /* R183 V37 B29 — rouge brique */ --lsx-4: #92141A; /* R146 V20 B26 — rouge sombre */ --lsx-5: #8A5119; /* R138 V81 B25 — brun ocre */ --lsx-6: #614828; /* R97 V72 B40 — brun foncé */ --lsx-7: #432918; /* brun très foncé — absent du PDF (qui répète la 4e couleur), mais bien présent dans le SVG du logo : c'est le dernier trait du X. À confirmer. */ /* --------------------------------------------------------------------- 2. NOIRS & CALCAIRES Un noir chaud, jamais 100 % : on reste dans la matière de la grotte. --------------------------------------------------------------------- */ --c-ink: #17130F; /* fond principal — noir chaud, non saturé */ --c-ink-2: #1E1913; /* sections alternées */ --c-ink-3: #262019; /* cartes, surfaces surélevées */ --c-ink-4: #332A20; /* surfaces hautes, survols */ --c-ink-deep:#0E0B08; /* fond de scène derrière la vidéo, voiles */ --c-bone: #F2EDE4; /* calcaire — texte principal sur fond sombre */ --c-bone-2: #DED5C6; /* calcaire ombré — chapôs */ --c-bone-3: #B5AA98; /* texte secondaire */ /* --------------------------------------------------------------------- 3. RÔLES SÉMANTIQUES À employer dans le code de préférence aux couleurs brutes. --------------------------------------------------------------------- */ --c-bg: var(--c-ink); --c-bg-alt: var(--c-ink-2); --c-surface: var(--c-ink-3); --c-text: var(--c-bone); --c-text-muted: var(--c-bone-3); /* Accent de lecture : l'ocre jaune passe mieux que l'orange sur fond sombre (contraste ≈ 6,4:1 contre ≈ 4,3:1). L'orange est réservé aux aplats, filets et surfaces, où le contraste de texte n'entre pas en jeu. */ --c-accent: var(--lsx-2); /* Liens au fil du texte. Deux teintes selon le fond, et non une seule éclaircie : sur l'encre l'orange de la charte tient 4,85 contre 1, sur le papier il tomberait à 2,74 — c'est le brun ocre qui y passe, à 4,63. Les deux sont au-dessus des 4,5 attendus d'un texte courant. Le filet sous la ligne est la même teinte atténuée : il signale le lien sans dépendre de la couleur, pour qui la distingue mal. */ --lien: var(--lsx-1); /* Citation détachée : une voix à part, donc une couleur chaude de la charte et non l'os du texte courant. L'ocre jaune sur l'encre (6,7 contre 1), le brun ocre sur le papier (4,6) — l'ocre y tomberait à 1,9. */ --citation: var(--lsx-2); --lien-filet: rgba(212, 97, 15, 0.55); --c-accent-hover: #E0AE4A; --c-accent-solid: var(--lsx-1); --c-border: rgba(242, 237, 228, 0.16); --c-border-soft: rgba(242, 237, 228, 0.08); --c-border-warm: var(--lsx-6); /* Code couleur des deux tournées (Worldtour) */ --c-tour1: var(--lsx-2); /* Tournée 1 — 2013-2024 : ocre */ --c-tour2: var(--lsx-1); /* Tournée 2 — 2025→ : orange */ /* Éclaircissement des médias. Les plans fournis sont sombres, et le voile posé par-dessus les assombrit encore. Plutôt que de lever le voile — le texte y perdrait —, on éclaircit l'image elle-même, et l'on rend au texte son contraste par un halo local (--halo-texte ci-dessous). L'image respire, la lecture ne souffre pas. */ --video-lumiere: brightness(1.28) saturate(1.06) contrast(0.95); /* Halo de lisibilité : du noir à gauche, où se lit le texte, vers le transparent à droite, où l'image se donne à voir. Une première version posait une ellipse sous le bloc de texte. Elle laissait une arête verticale nette là où le dégradé atteignait la transparence, à l'intérieur du bloc : on voyait une bande. Un dégradé linéaire étalé sur toute la largeur du média n'a pas de bord — il ne s'arrête nulle part, il s'éteint. */ --halo-texte: linear-gradient(90deg, rgba(8, 6, 4, 0.86) 0%, rgba(8, 6, 4, 0.74) 16%, rgba(8, 6, 4, 0.52) 34%, rgba(8, 6, 4, 0.30) 52%, rgba(8, 6, 4, 0.13) 70%, rgba(8, 6, 4, 0.04) 86%, rgba(8, 6, 4, 0) 100%); /* Voiles posés sur les médias, pour garder le texte lisible. Allégés le 23/09/2026, le halo prenant le relais là où l'on lit. */ --veil-hero: linear-gradient(180deg, rgba(14, 11, 8, 0.52) 0%, rgba(14, 11, 8, 0.10) 36%, rgba(14, 11, 8, 0.28) 70%, rgba(23, 19, 15, 0.97) 100%); --veil-page: linear-gradient(180deg, rgba(14, 11, 8, 0.64) 0%, rgba(14, 11, 8, 0.14) 45%, rgba(23, 19, 15, 0.96) 100%); --veil-media: linear-gradient(180deg, rgba(14, 11, 8, 0) 35%, rgba(14, 11, 8, 0.90) 100%); /* Voile chaud des vignettes : il assoit la photographie sur le noir du site au lieu de la laisser flotter. Partagé par les vignettes de galerie et par la carte simplement illustrée, qui doit leur ressembler. */ --veil-vignette: radial-gradient(ellipse 62% 62% at 50% 50%, rgba(14, 11, 8, 0.55) 0%, rgba(14, 11, 8, 0.15) 60%, rgba(14, 11, 8, 0.62) 100%); /* 0,29 laissait le chapô ocre du bandeau « Salle des Taureaux » passer sur une zone claire de la paroi, là où le halo ne porte plus. 0,33 protège ces mots-là et reste bien au-dessous des 0,40 d'avant. */ --veil-flat: rgba(14, 11, 8, 0.33); /* voile uni sur vidéo de section */ /* --------------------------------------------------------------------- 3 bis. MATIÈRES DE FOND Habillage des fonds par les visuels de scénographie. Le dosage passe par ces variables : on règle l'intensité sans jamais retoucher l'image. Voir .textured dans main.css, et la section « Matières » du design system. --------------------------------------------------------------------- */ /* Réglages génériques de la classe .textured */ --texture-opacity: 0.22; --texture-blend: screen; /* sur fond sombre, « screen » révèle la matière */ --texture-size: cover; --texture-repeat: no-repeat; --texture-pos: center; /* Dosage par emplacement. Les matières sombres (moyenne 28 à 45 sur 255) sont posées en « screen » : seules leurs parties claires ressortent, ce qui donne du grain au noir sans l'éclaircir globalement. Un seul curseur par zone, pour régler l'ensemble du site d'ici. */ --texture-page: 0.13; /* fond général, visible sur toute la hauteur */ --texture-alt: 0.10; /* sections alternées */ --texture-footer: 0.16; /* pied de page, un peu plus marqué */ /* Filigrane des chevaux sous la carte. Abaissé de 0,30 à 0,16 le jour où le dessin est passé en « contain » : entier dans le cadre, il couvre bien plus de surface qu'auparavant, et à l'ancienne valeur il effaçait le tracé de la tournée. */ --chevaux-opacite: 0.16; /* Fonds de matière du menu plein écran : une paroi par entrée, en fondu. La durée est volontairement longue — c'est une respiration, pas une réaction d'interface. L'opacité est une valeur de référence : chaque matière la pondère par son propre facteur (voir .menu__fond dans main.css), leurs parties claires n'ayant pas du tout la même force. Un seul curseur règle donc les cinq. */ --menu-fond-opacite: 0.09; --menu-fond-duree: 0.85s; /* Pastilles de destination sur la carte du monde. Exprimées dans les unités du viewBox (1000 × 500), donc indépendantes de la taille d'affichage. Le halo est le disque diffus, le point le disque plein. */ --pin-r: 5px; --pin-halo-r: 13px; /* Durée du fondu au noir entre deux plans vidéo. Lue par site.js : une seule valeur règle l'enchaînement sur tout le site. */ --video-fade: 0.7s; /* Recadrage des vidéos par agrandissement. Les plans fournis portent un logo « Dordogne Périgord » incrusté dans le coin haut droit. Mesuré sur les trois plans de fond, il descend jusqu'à 11,8 % de la hauteur de l'image : c'est ce qu'il faut sortir du cadre. L'agrandissement seul en masque 9 % ; le décalage, négatif, remonte l'image pour porter le total à 15,6 % — une marge suffisante, et le décalage doit bien être négatif : positif, il redescendait l'image et ne masquait plus que 4 %, laissant le logo visible sur deux plans. Le calcul vaut dans le pire cas, celui d'un cadre plus étroit que le plan, où toute la hauteur est montrée ; partout ailleurs, davantage est masqué. À remettre à 1 et 0 % dès que des masters sans habillage seront fournis. */ --video-zoom: 1.22; --video-shift: -8%; /* Ken Burns — dérive lente sur image fixe. Préférable à une vidéo ralentie : l'animation est interpolée par le processeur graphique, donc fluide à n'importe quelle vitesse, là où un ralenti vidéo ne fait que rallonger l'affichage de chaque image. */ --kb-duree: 48s; --kb-depart: 1.04; --kb-arrivee: 1.18; /* Fond du lecteur vidéo en surimpression : la matière de paroi transparaît derrière le voile sombre, au lieu d'un aplat noir. Matière 2 (le voile) ou 1 (la paroi, plus marquée). */ --modal-matiere: url('../img/matieres/opt/10.jpg'); --modal-voile: 0.32; /* plus haut = fond plus sombre */ --modal-base: #C8BFAA; /* base claire : le papier de la scénographie */ /* Diaporama photo : à l'inverse du lecteur vidéo, le fond est sombre. Une photographie s'y détache mieux que sur le papier clair, et l'on retrouve la pénombre de la salle. La matière est tirée au sort par site.js parmi les trois ci-dessous, à chaque ouverture. */ --diapo-base: #14100C; --diapo-voile: 0.58; /* voile sombre posé sur la matière */ --diapo-matieres: '1', '2', '3'; /* pour mémoire — la liste vit dans site.js */ --diapo-matiere: url('../img/matieres/opt/1.jpg'); /* repli sans JS */ /* Chiffres clés dessinés en contour, à la manière du logotype. ÉCART À LA CHARTE : ils passent en grotesque, alors que la charte prescrit Georgia partout. Motif : les chiffres de Georgia sont elzéviriens et de largeur variable — ils ne s'alignent pas d'une statistique à l'autre. Une grotesque donne des chiffres de hauteur et de chasse constantes, et son dessin géométrique tient mieux le contour. */ --f-chiffres: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Bandeau des logos partenaires : une seule marge, appliquée aux quatre côtés. Le blanc autour des logos doit être visuellement égal partout, sans quoi les logos d'extrémité paraissent chassés hors du cadre. */ --bandeau-marge: clamp(1.5rem, 2.6vw, 2.5rem); /* Couverture de la brochure dans le pied de page. Format d'origine du PDF : 200 × 270 mm, soit un rapport de 0,741. */ /* Portrait en médaillon sur la page Contact. Le fichier fourni fait 230 × 230 : au-delà de 112 px il perdrait de la finesse sur écran à forte densité. */ --portrait-d: 96px; --brochure-w: 124px; /* pied de page */ --brochure-w-contact: 148px; /* page Contact, où le bloc a plus de place */ --stat-trait: 1px; /* épaisseur du tracé */ --stat-ecart: 3.5px; /* écart au repos, sans curseur */ --stat-course: 16px; /* amplitude du déplacement au curseur */ /* --------------------------------------------------------------------- 4. TYPOGRAPHIE — Georgia (charte : titres ET textes) Titres : CAPITALES BOLD Sous-titres : CAPITALES REGULAR Texte : regular, italique dans certains cas --------------------------------------------------------------------- */ --f-display: Georgia, 'Times New Roman', 'Liberation Serif', serif; --f-body: Georgia, 'Times New Roman', 'Liberation Serif', serif; /* Échelle fluide — de 360 px à 1600 px de large */ --t-hero: clamp(2.1rem, 5.9vw, 5.2rem); --t-h1: clamp(1.9rem, 4.8vw, 4.2rem); --t-h2: clamp(1.7rem, 3.8vw, 3.25rem); --t-h3: clamp(1.2rem, 1.9vw, 1.65rem); --t-h4: clamp(1.05rem, 1.4vw, 1.25rem); /* Chapô : monté d'un cran au-dessus du corps de texte et passé en gras, pour qu'il se tienne entre le titre et le texte courant sans les concurrencer. Reste en deçà de --t-h4, qui ouvre la hiérarchie des titres. */ --t-lead: clamp(1.22rem, 1.9vw, 1.6rem); --t-body: clamp(1rem, 1.05vw, 1.0625rem); --t-small: 0.9375rem; --t-micro: 0.8125rem; --lh-tight: 1.02; /* titres en capitales : pas besoin d'espace pour les jambages */ --lh-title: 1.12; --lh-snug: 1.28; --lh-body: 1.62; /* Georgia a une grande hauteur d'x : au-delà, le bloc de texte se délave et les lignes cessent de se tenir */ /* Les capitales de Georgia ont besoin d'air ; les très grands corps, moins */ --ls-hero: 0.005em; --ls-title: 0.015em; --ls-sub: 0.09em; --ls-micro: 0.2em; /* --------------------------------------------------------------------- 5. ESPACEMENTS & GRILLE --------------------------------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --section-y: clamp(4.5rem, 9vw, 9rem); --section-y-s: clamp(3rem, 5vw, 5rem); --w-max: 1400px; --w-content: 1080px; --w-text: 66ch; --gutter: clamp(1.25rem, 4vw, 4rem); /* --------------------------------------------------------------------- 6. DIVERS --------------------------------------------------------------------- */ --radius-s: 3px; --radius: 6px; --radius-l: 12px; /* Hauteur d'en-tête dictée par la charte : le logo ne peut descendre sous 200 px de long (soit 54,6 px de haut) et doit conserver autour de lui une zone libre égale à la distance base de LASCAUX → base du baseline, soit 49 % de sa hauteur. 54,6 + 2 × 26,7 ≈ 108 px. */ --header-h: clamp(104px, 12vh, 124px); --logo-w: 200px; /* longueur minimale imposée par la charte */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur: 0.4s; --dur-slow: 0.9s; --shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.8); /* L'en-tête reste au-dessus du menu plein écran : le logo et le bouton de fermeture doivent demeurer visibles et cliquables menu ouvert. */ --z-flottant: 150; /* surface du son détachée du hero : sous le menu ouvert */ /* Voile de la surface du son. Assez dense pour tenir le picto clair sur une section de papier, assez transparent pour laisser voir la paroi dessous. Au survol, le CSS y ajoute 0,18. Le flou d'arrière-plan a été retiré — on doit voir la page dessous. Le voile remonte donc à 0,45 : sans flou, c'est lui seul qui assoit le picto. Mesuré sur la section de papier, le picto clair y gagne un contraste de 3,5 contre 1, au-dessus du seuil de 3 attendu d'une commande ; à 0,24 il tombait à 2. */ --son-voile: 0.45; --z-menu: 200; --z-header: 210; --z-top: 300; } /* Sur ordinateur, le logo passe à 264 px pour gagner en présence (la charte ne fixe qu'un minimum). L'en-tête suit : la zone de protection imposée autour du logo vaut 49 % de sa hauteur, en haut comme en bas — 72 px de logo + 2 × 35 px = 143 px. En dessous de 1360 px, on reste au minimum de 200 px : mesuré, un logo plus grand fait sortir le bouton de contact et le sélecteur de langue de l'écran à 1280 px ; à 1366 px, il laisse encore 62 px avant le menu. */ @media (min-width: 1360px) { :root { --logo-w: 264px; --header-h: 143px; } }