/* ========================================================================= La Pépite Végétale — feuille de style principale Palette et typographie reprises de la maquette validée. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Jetons de design ------------------------------------------------------------------------- */ /* * Deux couches distinctes : * — les PIGMENTS, couleurs fixes de la marque, jamais modifiées ; * — les RÔLES, qui disent à quoi sert une couleur et basculent en mode sombre. * * Toute la feuille de style n'utilise que des rôles. C'est ce qui permet * d'ajouter une variante nuit sans repasser sur 2500 lignes. */ :root { /* ---- Pigments (maquette validée) ---- */ --vert-profond: #2c4033; --vert-nuit: #2c3329; --vert-gris: #5b6157; --beige-gris: #8a8676; --vert-pale: #e4ecdf; --creme: #f5f1e8; --creme-clair: #faf8f2; --beige: #e7e1d2; --blanc: #ffffff; --jaune: #f2e500; --jaune-doux: #fbf7c4; --brique: var(--erreur); /* ---- Rôles : surfaces ---- */ --fond: var(--creme-clair); --fond-alt: var(--creme); --surface: var(--blanc); --surface-douce: var(--beige); --surface-sombre: var(--vert-profond); --surface-sombre-2: var(--vert-nuit); /* ---- Rôles : texte ---- */ --titre: var(--vert-profond); --texte: var(--vert-nuit); --texte-doux: var(--vert-gris); /* Le beige-gris de la maquette tombe a 3,3:1 sur le creme : sous le seuil AA pour du petit texte. Version assombrie, meme famille, 4,7:1. */ --texte-tenu: #6a6d5e; --sur-sombre: var(--creme-clair); --sur-sombre-doux: rgba(245, 241, 232, 0.8); /* 0,55 tombait a 4,2:1 sur le vert profond : sous le seuil AA. */ --sur-sombre-tenu: rgba(245, 241, 232, 0.66); /* ---- Rôles : traits et accents ---- */ --trait: rgba(44, 64, 51, 0.14); --trait-fort: rgba(44, 64, 51, 0.35); --trait-sombre: rgba(245, 241, 232, 0.18); --accent: var(--jaune); --accent-texte: var(--vert-nuit); --erreur: var(--brique); --erreur-fond: var(--erreur-fond); --succes-fond: var(--vert-pale); /* ---- Rôles : boutons ---- */ --btn-fond: var(--vert-profond); --btn-texte: var(--creme-clair); --btn-fond-actif: var(--vert-nuit); --btn-clair-fond: var(--creme-clair); --btn-clair-texte: var(--vert-profond); /* ---- Voile posé sur les photos ---- */ --voile: 38 45 36; /* ---- Grain papier ---- */ --fond-flou: rgba(250, 248, 242, 0.94); --grain-opacite: 0.035; /* Typographie. Pour un site 100 % Work Sans : --font-display: var(--font-base). */ --font-base: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: "EB Garamond", Georgia, "Times New Roman", serif; /* Rythme. */ --largeur: 1240px; --gouttiere: clamp(1.25rem, 4vw, 2.5rem); --section-y: clamp(4rem, 9vw, 8rem); --radius: 4px; --radius-l: 12px; --radius-xl: 24px; /* Mouvement. */ --transition: 0.4s cubic-bezier(0.22, 1, 0.36, 1); --transition-lente: 0.9s cubic-bezier(0.22, 1, 0.36, 1); --ressort: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* Suit la hauteur du logo agrandi : a 84px le dessin touchait les bords. */ --header-h: 96px; color-scheme: light; } /* * Variante nuit. Le vert profond ne peut plus servir à la fois de couleur de * titre et de fond sombre : chaque rôle prend sa propre valeur. */ /* * Variante nuit — DÉSACTIVÉE par défaut. * Elle ne s'applique que si la classe .lpv-nuit-auto est posée sur , * c'est-à-dire si l'option « Suivre le mode sombre du visiteur » est cochée * dans le personnalisateur. Sans elle, le site reste clair quel que soit le * réglage système du visiteur. */ @media (prefers-color-scheme: dark) { :root.lpv-nuit-auto { /* * En mode nuit, la logique s'inverse : les sections « vertes » doivent * devenir plus CLAIRES que la page, sinon l'alternance des bandes * disparaît et tout se confond. */ --fond: #11150d; --fond-alt: #191e15; --surface: #1e241a; --surface-douce: #2b3324; --surface-sombre: #263021; --surface-sombre-2: #0c100a; --titre: #eae7d8; --texte: #e4e1d3; --texte-doux: #b0b3a3; --texte-tenu: #8b8f7e; --sur-sombre: #eae7d8; --sur-sombre-doux: rgba(234, 231, 216, 0.78); --sur-sombre-tenu: rgba(234, 231, 216, 0.62); --trait: rgba(234, 231, 216, 0.16); --trait-fort: rgba(234, 231, 216, 0.38); --trait-sombre: rgba(234, 231, 216, 0.14); --erreur: #e8a48d; --erreur-fond: #3a231b; --succes-fond: #22301f; /* Un bouton vert foncé sur fond nuit ne se verrait plus : on inverse. */ --btn-fond: #eae7d8; --btn-texte: #14180f; --btn-fond-actif: var(--accent); --btn-clair-fond: #eae7d8; --btn-clair-texte: #14180f; --voile: 10 13 8; --fond-flou: rgba(20, 24, 15, 0.92); --grain-opacite: 0.05; color-scheme: dark; } } /* ------------------------------------------------------------------------- 2. Base ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); } body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--font-base); font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 400 plutot que 300 : demande de la cliente, la lineale manquait de presence. Work Sans 400 reste leger sans etre maigre. */ font-weight: 400; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg, video, iframe { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } ::selection { background: var(--accent); color: var(--accent-texte); } :focus-visible { outline: 2px solid var(--titre); outline-offset: 3px; border-radius: 2px; } /* ------------------------------------------------------------------------- 3. Typographie ------------------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); /* EB Garamond n'existe qu'a partir de 400 et dessine plus fin que Fraunces : 400 ici equivaut visuellement au 300 precedent. */ font-weight: 400; line-height: 1.12; letter-spacing: -0.015em; color: var(--titre); margin: 0 0 0.6em; text-wrap: balance; } h1 { font-size: clamp(2.25rem, 1.4rem + 4.2vw, 4.5rem); } h2 { font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3rem); } h3 { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); } h4 { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); } p { margin: 0 0 1.25em; color: var(--texte-doux); } p:last-child { margin-bottom: 0; } strong { font-weight: 500; color: var(--texte); } /* Sur-titre : petites capitales espacées, marque de fabrique du site. */ .lpv-surtitre { display: block; font-family: var(--font-base); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texte-tenu); margin-bottom: 1.25rem; } .lpv-lead { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); line-height: 1.6; color: var(--texte-doux); max-width: 62ch; } /* ------------------------------------------------------------------------- 4. Structure ------------------------------------------------------------------------- */ .lpv-container { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); } .lpv-container--etroit { max-width: 820px; } .lpv-section { padding-block: var(--section-y); } .lpv-section--creme { background: var(--fond-alt); } .lpv-section--vert { background: var(--surface-sombre); color: var(--sur-sombre); } .lpv-section--vert h2, .lpv-section--vert h3 { color: var(--sur-sombre); } .lpv-section--vert p { color: var(--sur-sombre-doux); } .lpv-section--vert .lpv-surtitre { color: var(--sur-sombre-tenu); } .lpv-section-head { max-width: 40ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .lpv-section-head--centre { max-width: 46ch; margin-inline: auto; text-align: center; } .lpv-section-head--centre .lpv-lead { margin-inline: auto; } /* En-tête avec titre à gauche et lien à droite. */ .lpv-section-head--split { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; } .lpv-section-head--split > div { max-width: 40ch; } .lpv-section-head--split h2 { margin-bottom: 0; } /* Filet fin décoratif. */ .lpv-trait { width: 56px; height: 2px; background: var(--accent); border: 0; margin: 0 0 1.75rem; } .lpv-section-head--centre .lpv-trait { margin-inline: auto; } /* ------------------------------------------------------------------------- 5. Boutons ------------------------------------------------------------------------- */ .lpv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; padding: 0.95em 2em; border: 1px solid transparent; border-radius: 999px; font-family: var(--font-base); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; text-align: center; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); } .lpv-btn:hover { transform: translateY(-2px); } .lpv-btn--primaire { background: var(--btn-fond); color: var(--btn-texte); } .lpv-btn--primaire:hover { background: var(--btn-fond-actif); color: var(--btn-texte); } .lpv-btn--secondaire { background: transparent; color: var(--titre); border-color: var(--trait-fort); } .lpv-btn--secondaire:hover { background: var(--btn-fond); color: var(--btn-texte); border-color: var(--btn-fond); } .lpv-btn--clair { background: var(--btn-clair-fond); color: var(--btn-clair-texte); } .lpv-btn--clair:hover { background: var(--accent); color: var(--accent-texte); } .lpv-btn--fantome { background: transparent; color: var(--sur-sombre); border-color: var(--sur-sombre-tenu); } .lpv-btn--fantome:hover { background: var(--btn-clair-fond); color: var(--btn-clair-texte); } .lpv-btns { display: flex; flex-wrap: wrap; gap: 0.875rem; } /* Lien texte avec flèche. */ .lpv-lien { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--titre); padding-bottom: 4px; border-bottom: 1px solid var(--trait); transition: border-color var(--transition), gap var(--transition); white-space: nowrap; } .lpv-lien:hover { border-color: var(--accent); gap: 0.9em; } .lpv-lien::after { content: "\2192"; transition: transform var(--transition); } /* ------------------------------------------------------------------------- 6. En-tête et navigation ------------------------------------------------------------------------- */ .lpv-header { position: fixed; inset: 0 0 auto; z-index: 100; background: var(--fond); border-bottom: 1px solid var(--trait); transition: background var(--transition), border-color var(--transition), transform var(--transition); } /* Sur l'accueil, l'en-tête flotte au-dessus de la photo. */ .has-transparent-header .lpv-header:not(.is-scrolled) { background: transparent; border-bottom-color: transparent; } /* Sur photo claire, une ombre douce garde le logo et le menu lisibles. */ .has-transparent-header .lpv-header:not(.is-scrolled) .lpv-header__inner { color: var(--sur-sombre); text-shadow: 0 1px 12px rgb(var(--voile) / 0.45); } .has-transparent-header .lpv-header:not(.is-scrolled) .lpv-logo img { filter: brightness(0) invert(1) drop-shadow(0 1px 8px rgb(var(--voile) / 0.5)); } .has-transparent-header .lpv-header:not(.is-scrolled) .lpv-btn--primaire { background: var(--fond); color: var(--titre); } .has-transparent-header .lpv-header:not(.is-scrolled) .lpv-burger span { background: var(--fond); } .lpv-header.is-scrolled { background: var(--fond-flou); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .lpv-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); color: var(--titre); transition: color var(--transition); } .lpv-logo { display: flex; align-items: center; flex-shrink: 0; } .lpv-logo img { width: auto; /* Agrandi a la demande de la cliente : le logo se perdait dans l'en-tete. La hauteur de l'en-tete suit, sinon le dessin deborderait. */ height: clamp(52px, 6.4vw, 72px); transition: filter var(--transition); } .lpv-logo__texte { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -0.01em; } .lpv-nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.5rem); } .lpv-nav ul { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.25rem); list-style: none; margin: 0; padding: 0; } .lpv-nav a { position: relative; font-size: 0.9375rem; font-weight: 400; letter-spacing: 0.01em; padding-block: 0.35rem; } .lpv-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1.5px; background: var(--accent); transition: width var(--transition); } .lpv-nav a:hover::after, .lpv-nav .current-menu-item > a::after, .lpv-nav .current_page_item > a::after { width: 100%; } .lpv-header__cta { display: none; } @media (min-width: 1100px) { .lpv-header__cta { display: inline-flex; padding: 0.75em 1.5em; font-size: 0.75rem; } } /* Bouton hamburger. */ .lpv-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; background: none; border: 0; margin-right: -10px; } .lpv-burger span { display: block; width: 24px; height: 1.5px; margin-inline: auto; background: var(--surface-sombre); transition: transform var(--transition), opacity var(--transition), background var(--transition); } .lpv-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .lpv-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .lpv-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } @media (min-width: 900px) { .lpv-burger { display: none; } } /* Panneau de navigation mobile. */ @media (max-width: 899px) { .lpv-nav { position: fixed; inset: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 6rem var(--gouttiere) 3rem; background: var(--fond); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); } .lpv-nav.is-open { opacity: 1; visibility: visible; transform: none; } .lpv-nav ul { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; } .lpv-nav li { width: 100%; border-bottom: 1px solid var(--trait); } .lpv-nav a { display: block; padding: 1.15rem 0; font-family: var(--font-display); font-size: 1.75rem; color: var(--titre); } .lpv-nav a::after { display: none; } /* Le CTA reste un bouton, il ne prend pas l'allure des liens du menu. */ .lpv-nav .lpv-header__cta { display: inline-flex; width: auto; margin-top: 2.25rem; padding: 1em 2em; font-family: var(--font-base); font-size: 0.8125rem; color: var(--sur-sombre); } /* * Le panneau couvre tout l'écran : le logo et le bouton de fermeture * doivent repasser au-dessus, sinon on ne peut plus refermer le menu. */ .lpv-logo, .lpv-burger { position: relative; z-index: 2; } /* * Menu ouvert : le panneau est clair, l'en-tête reprend donc ses couleurs * sombres même sur l'accueil où il est normalement transparent et blanc. */ body.nav-open .lpv-header__inner, body.has-transparent-header.nav-open .lpv-header:not(.is-scrolled) .lpv-header__inner { color: var(--titre); text-shadow: none; } body.nav-open .lpv-logo img, body.has-transparent-header.nav-open .lpv-header:not(.is-scrolled) .lpv-logo img { filter: none; } body.nav-open .lpv-burger span, body.has-transparent-header.nav-open .lpv-header:not(.is-scrolled) .lpv-burger span { background: var(--surface-sombre); } /* Sinon le bouton reste en version « sur photo » : crème sur crème. */ body.has-transparent-header.nav-open .lpv-header:not(.is-scrolled) .lpv-btn--primaire { background: var(--surface-sombre); color: var(--sur-sombre); } body.nav-open { overflow: hidden; } } /* Décalage du contenu sous l'en-tête fixe (sauf pages à bandeau plein écran). */ .lpv-main { padding-top: var(--header-h); } .has-transparent-header .lpv-main { padding-top: 0; } /* ------------------------------------------------------------------------- 7. Bandeau d'accueil ------------------------------------------------------------------------- */ .lpv-hero { position: relative; display: flex; align-items: flex-end; min-height: min(92vh, 900px); padding-block: calc(var(--header-h) + 3rem) clamp(3.5rem, 8vw, 7rem); background: var(--surface-sombre); overflow: hidden; isolation: isolate; } .lpv-hero__media { position: absolute; inset: 0; z-index: -2; } .lpv-hero__media img { width: 100%; height: 100%; object-fit: cover; animation: lpv-zoom 18s ease-out forwards; } @keyframes lpv-zoom { from { transform: scale(1.08); } to { transform: scale(1); } } /* * Deux voiles superposés : l'un horizontal côté texte, l'autre vertical. * Le texte reste lisible même sur un feuillage clair, tout en laissant * la photo respirer à droite. */ .lpv-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 90deg, rgb(var(--voile) / 0.8) 0%, rgb(var(--voile) / 0.55) 38%, rgb(var(--voile) / 0.12) 72%, rgb(var(--voile) / 0) 100% ), linear-gradient( 180deg, rgb(var(--voile) / 0.5) 0%, rgb(var(--voile) / 0.12) 32%, rgb(var(--voile) / 0.62) 100% ); } /* * Sous 1000 px, la mise en page éditoriale ne tient plus côte à côte : la * photo reprend tout le fond. Plutôt qu'un voile sombre, on garde l'esprit * du grand écran — la photo se fond vers le bas dans le crème de la page, * et le texte se pose sur ce fond clair. Demande de la cliente. */ @media (max-width: 999px) { .lpv-hero { background: var(--fond); } .lpv-hero::after { background: linear-gradient( 180deg, /* Léger voile en haut : l'en-tête est blanc par-dessus la photo. */ rgb(var(--voile) / 0.34) 0%, rgb(var(--voile) / 0.08) 14%, transparent 22%, rgb(from var(--fond) r g b / 0.9) 36%, var(--fond) 46% ); } } .lpv-hero__contenu { max-width: 46rem; color: var(--sur-sombre); } .lpv-hero h1 { color: var(--sur-sombre); margin-bottom: 0.5em; } .lpv-hero .lpv-surtitre { color: var(--sur-sombre); } .lpv-hero .lpv-lead { color: var(--fond-flou); margin-bottom: 2.25rem; max-width: 52ch; } .lpv-hero .lpv-trait { background: var(--accent); } /* Indicateur de défilement. */ .lpv-hero__scroll { position: absolute; left: 50%; bottom: 1.75rem; translate: -50% 0; width: 1px; height: 48px; background: var(--sur-sombre-tenu); overflow: hidden; } .lpv-hero__scroll::after { content: ""; position: absolute; inset: 0; background: var(--accent); animation: lpv-scroll 2.4s ease-in-out infinite; } @keyframes lpv-scroll { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } } /* Sur mobile, l'indicateur croiserait les boutons du bandeau. */ @media (max-width: 899px) { .lpv-hero__scroll { display: none; } } /* Bandeau simple des pages intérieures. */ .lpv-pagehead { position: relative; padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem); background: var(--fond-alt); border-bottom: 1px solid var(--trait); } /* Le bandeau de page apporte déjà de l'air : la section qui suit en reprend moins. */ .lpv-pagehead + .lpv-section { padding-top: clamp(2.5rem, 5vw, 4rem); } .lpv-pagehead h1 { margin-bottom: 0.35em; max-width: 20ch; } .lpv-pagehead .lpv-lead { max-width: 58ch; } /* Bandeau image des pages intérieures. */ .lpv-pagehead--image { display: flex; align-items: flex-end; min-height: min(70vh, 620px); padding-block: calc(var(--header-h) + 4rem) clamp(2.5rem, 6vw, 5rem); background: var(--surface-sombre); border-bottom: 0; overflow: hidden; isolation: isolate; color: var(--sur-sombre); } .lpv-pagehead--image .lpv-hero__media { position: absolute; inset: 0; z-index: -2; } .lpv-pagehead--image .lpv-hero__media img { width: 100%; height: 100%; object-fit: cover; } .lpv-pagehead--image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 90deg, rgb(var(--voile) / 0.72) 0%, rgb(var(--voile) / 0.45) 45%, rgb(var(--voile) / 0) 100% ), linear-gradient( 180deg, rgb(var(--voile) / 0.5) 0%, rgb(var(--voile) / 0.2) 40%, rgb(var(--voile) / 0.7) 100% ); } .lpv-pagehead--image h1, .lpv-pagehead--image .lpv-lead { color: var(--sur-sombre); } .lpv-pagehead--image .lpv-surtitre { color: var(--sur-sombre-doux); } /* ------------------------------------------------------------------------- 8. Grilles et cartes « univers » ------------------------------------------------------------------------- */ .lpv-grille { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); } .lpv-grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .lpv-grille--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); } /* * Grille des univers. Six colonnes servent de trame : chaque carte en occupe * deux, soit trois par rangée. Avec cinq univers, les deux dernières passent * à trois colonnes pour remplir la rangée du bas sans laisser de case vide. */ .lpv-grille--univers { grid-template-columns: 1fr; } @media (min-width: 620px) { .lpv-grille--univers { grid-template-columns: repeat(6, 1fr); } .lpv-grille--univers > * { grid-column: span 3; } /* Deux par rangée : la cinquième carte occupe seule toute la largeur. */ .lpv-grille--univers > :nth-child(5):nth-last-child(1) { grid-column: span 6; } .lpv-grille--univers > :nth-child(5):nth-last-child(1) .lpv-univers__media { aspect-ratio: 16 / 9; } } @media (min-width: 940px) { .lpv-grille--univers > * { grid-column: span 2; } /* * Cas de cinq univers : les deux dernières cartes s'élargissent pour * remplir la rangée du bas. Leur visuel s'élargit d'autant, sinon le * ratio portrait les rendrait bien plus hautes que celles du haut. */ .lpv-grille--univers > :nth-child(4):nth-last-child(2), .lpv-grille--univers > :nth-child(5):nth-last-child(1) { grid-column: span 3; } .lpv-grille--univers > :nth-child(4):nth-last-child(2) .lpv-univers__media, .lpv-grille--univers > :nth-child(5):nth-last-child(1) .lpv-univers__media { aspect-ratio: 6 / 5; } } .lpv-univers { position: relative; display: block; overflow: hidden; border-radius: var(--radius-l); background: var(--surface-sombre); isolation: isolate; } .lpv-univers__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; } .lpv-univers__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-lente); } .lpv-univers:hover .lpv-univers__media img { transform: scale(1.06); } .lpv-univers__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgb(var(--voile) / 0) 28%, rgb(var(--voile) / 0.38) 55%, rgb(var(--voile) / 0.9) 100% ); } .lpv-univers__texte { position: absolute; inset: auto 0 0; z-index: 1; padding: clamp(1.5rem, 3vw, 2rem); color: var(--sur-sombre); } .lpv-univers__texte h3 { color: var(--sur-sombre); margin-bottom: 0.35em; } .lpv-univers__texte p { color: var(--fond-flou); font-size: 0.9375rem; line-height: 1.55; margin: 0; } .lpv-univers__fleche { display: inline-flex; align-items: center; gap: 0.5em; margin-top: 1rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); opacity: 0; transform: translateY(6px); transition: opacity var(--transition), transform var(--transition); } .lpv-univers:hover .lpv-univers__fleche, .lpv-univers:focus-visible .lpv-univers__fleche { opacity: 1; transform: none; } @media (hover: none) { .lpv-univers__fleche { opacity: 1; transform: none; } } /* Version « bandes » alternées de la page Collections. */ .lpv-bande { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: clamp(3rem, 6vw, 5.5rem); border-bottom: 1px solid var(--trait); } .lpv-bande:last-child { border-bottom: 0; } @media (min-width: 860px) { .lpv-bande { grid-template-columns: 1fr 1fr; } .lpv-bande:nth-child(even) .lpv-bande__media { order: 2; } } .lpv-bande__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-l); background: var(--surface-douce); } .lpv-bande__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-lente); } .lpv-bande:hover .lpv-bande__media img { transform: scale(1.04); } .lpv-bande__contenu h2 { margin-bottom: 0.4em; } .lpv-bande__liste { list-style: none; margin: 1.75rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .lpv-bande__liste li { padding: 0.4em 1em; border: 1px solid var(--trait); border-radius: 999px; font-size: 0.8125rem; color: var(--texte-doux); background: var(--surface); } /* ------------------------------------------------------------------------- 9. Cartes « pépite » ------------------------------------------------------------------------- */ .lpv-pepite { display: flex; flex-direction: column; height: 100%; } .lpv-pepite__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-l); background: var(--surface-douce); margin-bottom: 1.125rem; } .lpv-pepite__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-lente); } .lpv-pepite:hover .lpv-pepite__media img { transform: scale(1.05); } .lpv-pepite__titre { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); margin-bottom: 0.3em; } .lpv-pepite a:hover .lpv-pepite__titre, .lpv-pepite__lien:hover .lpv-pepite__titre { color: var(--texte-doux); } .lpv-pepite__desc { font-size: 0.9375rem; line-height: 1.55; margin-bottom: 0.75rem; } .lpv-pepite__meta { margin-top: auto; padding-top: 0.75rem; font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--texte-tenu); border-top: 1px solid var(--trait); } /* Pastilles de statut. */ .lpv-badge { position: absolute; top: 0.875rem; left: 0.875rem; z-index: 2; display: inline-block; padding: 0.45em 0.9em; border-radius: 999px; font-family: var(--font-base); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; background: var(--fond); color: var(--titre); box-shadow: 0 2px 12px rgb(var(--voile) / 0.14); } .lpv-badge.is-nouveau { background: var(--accent); color: var(--accent-texte); } .lpv-badge.is-unique { background: var(--surface-sombre); color: var(--sur-sombre); } .lpv-badge.is-demande { background: var(--surface-douce); color: var(--titre); } .lpv-badge.is-reserve { background: rgb(var(--voile) / 0.78); color: var(--sur-sombre); } .lpv-badge.is-disponible { background: var(--succes-fond); color: var(--titre); } /* Pastille en ligne (fiche pépite). */ .lpv-badge--statique { position: static; box-shadow: none; } /* Bloc recherche + filtres du catalogue. */ .lpv-filtrage { margin-bottom: clamp(2rem, 4vw, 3rem); padding-bottom: 1.5rem; border-bottom: 1px solid var(--trait); } .lpv-recherche { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; } /* L'icône est positionnée sur le champ, pas sur le formulaire : sinon elle se décale quand le bouton passe à la ligne sur les petits écrans. */ .lpv-recherche__champ { position: relative; display: flex; flex: 1 1 auto; min-width: 0; } .lpv-recherche__icone { position: absolute; left: 1.1rem; top: 50%; translate: 0 -50%; width: 18px; height: 18px; fill: var(--texte-tenu); pointer-events: none; } .lpv-recherche input[type="search"] { width: 100%; min-width: 0; padding: 0.95rem 1rem 0.95rem 3rem; border: 1px solid var(--trait); border-radius: 999px; background: var(--surface); color: var(--texte); font-family: inherit; font-size: 1rem; font-weight: 400; transition: border-color var(--transition); -webkit-appearance: none; appearance: none; } .lpv-recherche input[type="search"]::placeholder { color: var(--texte-tenu); } .lpv-recherche input[type="search"]:focus { outline: none; border-color: var(--titre); } .lpv-recherche__envoi { flex: 0 0 auto; padding: 0.95em 1.75em; border: 0; border-radius: 999px; background: var(--surface-sombre); color: var(--sur-sombre); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; transition: background var(--transition); } .lpv-recherche__envoi:hover { background: var(--surface-sombre-2); } /* Rappel des filtres actifs et nombre de résultats. */ .lpv-resultats { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem 1.5rem; margin: 1.25rem 0 0; font-size: 0.9375rem; color: var(--texte-doux); } .lpv-resultats strong { font-weight: 500; } .lpv-resultats__effacer { font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--texte-tenu); border-bottom: 1px solid var(--trait); padding-bottom: 2px; transition: color var(--transition), border-color var(--transition); white-space: nowrap; } .lpv-resultats__effacer:hover { color: var(--titre); border-color: var(--accent); } @media (max-width: 560px) { .lpv-recherche { flex-wrap: wrap; } .lpv-recherche__champ, .lpv-recherche__envoi { flex: 1 1 100%; } /* Pastilles plus compactes : deux tiennent par ligne. */ .lpv-filtre { padding: 0.5em 1em; font-size: 0.75rem; } } /* Filtres du catalogue. */ .lpv-filtres { display: flex; flex-wrap: wrap; gap: 0.5rem; } .lpv-filtre { padding: 0.6em 1.35em; border: 1px solid var(--trait); border-radius: 999px; font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.03em; color: var(--texte-doux); background: transparent; transition: background var(--transition), color var(--transition), border-color var(--transition); } .lpv-filtre:hover { border-color: var(--titre); color: var(--titre); } .lpv-filtre.is-actif { background: var(--surface-sombre); border-color: var(--titre); color: var(--sur-sombre); } /* * Le filtre par statut est un