/* Page « Linogravures » v2 : en-tête compact, frise, filtres et grille de 3 cartes.
   Tout est préfixé lg- et s'appuie sur les variables de home-v2.css (couleurs, polices). */

.lg-page {font-family: var(--v2-font-sans); color: var(--v2-fg);}
.lg-wrap {max-width: 80rem; margin-inline: auto; padding-inline: 1.5rem;}

/* ---------- En-tête compact ---------- */
.lg-hero {background: var(--v2-primary); color: var(--v2-primary-fg); padding: 72px 0 0; overflow: hidden;}
.lg-hero-inner {padding-block: 2.25rem 2.75rem;}
.lg-hero .v2-eyebrow {color: var(--v2-accent);}
.lg-hero h1 {font-family: var(--v2-font-display); font-weight: 400; font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.05; letter-spacing: -.01em; margin: .6rem 0 0; color: inherit;}
.lg-hero h1 em {font-style: italic; color: var(--v2-accent);}
.lg-sub {margin: .9rem 0 0; max-width: 34rem; font-size: 1.05rem; opacity: .85;}

/* ---------- Filtres ---------- */
.lg-bar {background: #fff; border-bottom: 1px solid rgba(29,0,176,.1);}
.lg-bar-inner {display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; padding-block: 1.25rem;}
.lg-group {display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;}
.lg-label {font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--v2-muted); margin-right: .25rem;}
.lg-pill {appearance: none; display: inline-flex; align-items: center; gap: .45rem; border: 1px solid rgba(29,0,176,.25); background: #fff; color: var(--v2-primary); border-radius: 999px; padding: .5rem 1rem; font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s;}
.lg-pill:hover {transform: translateY(-2px); border-color: var(--v2-primary);}
.lg-pill:active {transform: scale(.96);}
.lg-pill:focus-visible {outline: 3px solid var(--v2-accent-strong); outline-offset: 2px;}
.lg-pill .lg-n {font-size: .72rem; font-weight: 700; opacity: .6;}
.lg-pill[aria-pressed="true"] {background: var(--v2-primary); border-color: var(--v2-primary); color: #fff;}
.lg-pill[aria-pressed="true"] .lg-n {opacity: .85;}
.lg-sep {width: 1px; height: 1.6rem; background: rgba(29,0,176,.15);}
.lg-count {margin-left: auto; font-family: var(--v2-font-display); font-size: 1.05rem; color: var(--v2-muted);}
.lg-count strong {color: var(--v2-primary); font-weight: 600;}

/* ---------- Grille ---------- */
.lg-main {padding-block: 2.5rem 4.5rem;}
.lg-grid {display: grid; gap: 2.25rem 2rem; grid-template-columns: 1fr;}
@media (min-width: 640px) {.lg-grid {grid-template-columns: repeat(2, 1fr);}}
@media (min-width: 1000px) {.lg-grid {grid-template-columns: repeat(3, 1fr);}}
.lg-card {display: block; text-decoration: none; color: var(--v2-fg);}
.lg-card[hidden] {display: none;}
.lg-img {position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 1.25rem; background: var(--v2-paper); transition: transform .35s ease, box-shadow .35s ease;}
.lg-img img {display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease;}
.lg-img video {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transition: transform .7s ease;}
.lg-img .lg-alt {position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease, transform .7s ease;}
.lg-badge {position: absolute; left: 1rem; top: 1rem; z-index: 2; background: var(--v2-accent-strong); color: #fff; border-radius: 999px; padding: .25rem .75rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;}
.lg-go {position: absolute; right: 1rem; bottom: 1rem; z-index: 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--v2-accent-strong); color: #fff; opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .3s ease, transform .3s ease;}
.lg-go svg {width: 1.1rem; height: 1.1rem;}
.lg-meta {display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-top: 1rem;}
.lg-meta h3 {font-family: var(--v2-font-display); font-weight: 600; font-size: 1.3rem; margin: 0; color: var(--v2-fg); transition: color .2s;}
.lg-meta p {margin: .15rem 0 0; font-size: .875rem; color: var(--v2-muted);}
.lg-price {font-family: var(--v2-font-display); font-size: 1.25rem; color: var(--v2-primary);}
@media (hover: hover) {
    .lg-card:hover .lg-img, .lg-card:focus-visible .lg-img {transform: translateY(-4px); box-shadow: 0 18px 30px -14px rgba(20,18,59,.35);}
    .lg-card:hover .lg-alt, .lg-card:focus-visible .lg-alt {opacity: 1;}
    .lg-card:hover .lg-img img, .lg-card:focus-visible .lg-img img, .lg-card:hover .lg-img video {transform: scale(1.04);}
    .lg-card:hover .lg-go, .lg-card:focus-visible .lg-go {opacity: 1; transform: none;}
    .lg-card:hover .lg-meta h3, .lg-card:focus-visible .lg-meta h3 {color: var(--v2-primary);}
}
.lg-card:focus-visible {outline: none;}
.lg-card:focus-visible .lg-img {outline: 3px solid var(--v2-accent-strong); outline-offset: 3px;}

/* Apparition au défilement, et quand un filtre change */
.js .lg-reveal {opacity: 0; transform: translateY(18px); transition: opacity .6s ease var(--d, 0s), transform .6s ease var(--d, 0s);}
.js .lg-reveal.is-visible {opacity: 1; transform: none;}
@keyframes lg-pop {from {opacity: 0; transform: translateY(14px) scale(.97);} to {opacity: 1; transform: none;}}
.lg-card.is-in {animation: lg-pop .45s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both;}

/* Aucun résultat */
.lg-empty {text-align: center; padding: 3rem 1rem;}
.lg-empty[hidden] {display: none;}
.lg-empty p {font-family: var(--v2-font-display); font-size: 1.4rem; color: var(--v2-primary); margin: 0 0 1rem;}
.lg-reset {appearance: none; border: 0; border-radius: 999px; background: var(--v2-accent-strong); color: #fff; padding: .85rem 1.6rem; font: inherit; font-weight: 700; cursor: pointer; transition: transform .2s;}
.lg-reset:hover {transform: scale(1.04);}

/* Texte de présentation, sous la grille */
.lg-intro {background: var(--v2-paper); padding-block: 4rem;}
.lg-intro p {max-width: 46rem; margin: 0 auto; text-align: center; font-family: var(--v2-font-display); font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.6; color: var(--v2-fg);}

@media (prefers-reduced-motion: reduce) {
    .js .lg-reveal {opacity: 1; transform: none; transition: none;}
    .lg-card.is-in {animation: none;}
    .lg-img, .lg-img img, .lg-alt, .lg-go {transition: none;}
}
@media (max-width: 575px) {
    .lg-bar-inner {gap: .9rem 1rem; padding-block: 1rem;}
    .lg-pill {min-height: 2.75rem;}
    .lg-sep {display: none;}
    .lg-count {margin-left: 0; width: 100%;}
    .lg-main {padding-block: 1.75rem 3rem;}
    .lg-intro {padding-block: 3rem;}
}

/* Texte sur la technique : la fleur du logo en fil rouge (motif défini dans home-v2.css) */
.lg-intro {position: relative; overflow: hidden;}
.lg-intro .lg-wrap {position: relative; z-index: 1;}
.lg-deco-1 {width: 13rem; height: 13rem; left: -3.5rem; bottom: -4rem; color: var(--v2-accent); opacity: .22;}
.lg-deco-2 {width: 9rem; height: 9rem; right: -2rem; top: -2.5rem; color: var(--v2-primary); opacity: .1;}
.lg-orne {width: 2.75rem; height: 2.75rem; margin: 0 auto 1.25rem; color: var(--v2-accent-strong); transition: transform .8s cubic-bezier(.3,.7,.2,1);}
@media (hover: hover) {.lg-intro:hover .lg-orne {transform: rotate(60deg) scale(1.1);}}
@media (prefers-reduced-motion: reduce) {.lg-orne {transition: none;}}