/* ════════════════════════════════════════════════════════════
   ÆNIX GREEN — mise en scène « salon de l'auto » de la fiche produit
   Inspirée des codes des fiches produit premium (fond noir, héros plein écran,
   ouvertures de chapitre lumineuses, bento, galerie épinglée à défilement horizontal,
   cadre de visée). Fichier autonome : classes .gx-* uniquement, aucune page existante n'est altérée.
   Chargé après green.css ; interactions dans js/green-x.js.
   ════════════════════════════════════════════════════════════ */

:root { --gx-g: 43, 217, 74; --gx-ink: #050806; }

/* ─── Héros plein écran ──────────────────────────────────────── */
.p-hero.gx-hero {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  min-height: min(100vh, 1020px); min-height: min(100svh, 1020px);
  display: grid; align-items: end;
  padding-top: calc(var(--nav-h) + clamp(24px, 4vh, 56px)); padding-bottom: clamp(40px, 7vh, 88px);
  background: var(--gx-ink);
}
.gx-hero .hero-grid { opacity: .28; }
.gx-hero .p-hero-inner { display: block; position: static; }
.gx-hero .p-text { margin-inline: auto; max-width: 940px; justify-items: center; gap: clamp(14px, 2.2vh, 24px); position: relative; z-index: 2; }
.gx-hero .crumbs { justify-content: center; }
.gx-hero .g-logo { margin: 0 auto -6px; width: clamp(150px, 15vw, 210px); }
.gx-hero .tags { display: none; }
.gx-hero .tags { justify-content: center; }
.gx-hero .p-title { text-shadow: 0 2px 40px rgba(0, 0, 0, .55); }
.gx-hero .p-title .g-seo { margin-inline: auto; max-width: 52ch; color: #F0F5F1; }
.gx-hero .crumbs, .gx-hero .crumbs a, .gx-hero .crumbs span { color: #EAF1EC; }
.gx-hero .crumbs i { color: #D5DED8; }
.gx-hero .p-tagline { max-width: 40ch; }
.gx-hero .p-desc { max-width: 56ch; color: #EAF1EC; font-size: clamp(15px, 1.2vw, 18px); }
.gx-hero .p-title { font-size: clamp(44px, 5.6vw, 84px); }
.gx-hero .pills, .gx-hero .cta-pair { justify-content: center; }
.gx-hero .pills span { background: rgba(8, 12, 9, .55); border: 1px solid rgba(255, 255, 255, .16); color: #E6EEE8; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* le visuel passe derrière le texte, plein cadre */
.gx-hero .p-visual { position: absolute; inset: 0; z-index: -1; max-width: none; }
.gx-hero .p-media { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0; background: var(--gx-ink); }
.gx-hero .p-media img { object-position: 62% 52%; }
.js .gx-hero .p-media[data-hero-in] { clip-path: none; opacity: 0; transition: opacity 1.6s var(--expo) .1s; }
.js.hero-ready .gx-hero .p-media[data-hero-in] { opacity: 1; }
.gx-hero .p-visual::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(90% 60% at 50% 108%, rgba(var(--gx-g), .20), transparent 62%),
    linear-gradient(180deg, rgba(5, 8, 6, .84) 0%, rgba(5, 8, 6, .62) 36%, rgba(5, 8, 6, .66) 68%, var(--gx-ink) 100%);
}
.gx-hero .p-chip { display: none; }

/* ─── Ouverture de chapitre : titre lumineux sur horizon ─────── */
.gx-chapter { position: relative; isolation: isolate; overflow: hidden; background: var(--gx-ink); text-align: center; padding-block: clamp(88px, 14vh, 160px) clamp(190px, 30vh, 330px); }
.gx-chapter .container { display: grid; gap: clamp(16px, 2.4vh, 26px); justify-items: center; }
.gx-chapter-title { font-size: clamp(34px, 5.6vw, 88px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 300; color: #fff; max-width: 17ch; filter: drop-shadow(0 0 16px rgba(var(--gx-g), .5)) drop-shadow(0 0 54px rgba(var(--gx-g), .3)); }
.gx-chapter-lead { max-width: 56ch; color: var(--steel, #B9C4BC); font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; }
.gx-horizon-wrap { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(230px, 36vh, 360px); overflow: hidden; pointer-events: none; z-index: -1; }
.gx-horizon {
  position: absolute; left: 50%; bottom: -1px; width: max(1560px, 150vw); aspect-ratio: 11 / 1; transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; border-top: 2px solid rgba(206, 255, 218, .95);
  background: radial-gradient(70% 120% at 50% 0, rgba(var(--gx-g), .34), rgba(var(--gx-g), .07) 55%, transparent 75%);
  box-shadow: 0 -4px 36px 0 rgba(var(--gx-g), .55), 0 -18px 110px 4px rgba(var(--gx-g), .28);
}

/* ─── Bento des atouts ───────────────────────────────────────── */
.gx-bento-sec { background: var(--gx-ink); padding-top: 0; }
.gx-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(210px, auto); gap: 14px; }
.gx-tile { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.4vw, 32px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)); color: var(--ink); }
.gx-tile .icon { width: 30px; height: 30px; color: var(--indigo); }
.gx-tile h3 { font-size: clamp(22px, 2vw, 30px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 300; color: #fff; }
.gx-tile p { color: var(--steel); line-height: 1.5; font-size: 15px; max-width: 44ch; }
.gx-tile-big { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.gx-tile-wide-r { grid-column: 3 / span 2; }
.gx-tile-wide-l { grid-column: 1 / span 2; }
.gx-tile-wide-r2 { grid-column: 3 / span 2; }
.gx-tile-img { padding: 0; justify-content: flex-start; }
.gx-tile-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--expo); }
.gx-tile-img::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 8, 6, .9) 0%, rgba(5, 8, 6, .62) 42%, rgba(5, 8, 6, .1) 78%), linear-gradient(90deg, rgba(5, 8, 6, .72) 0%, rgba(5, 8, 6, .2) 60%, rgba(5, 8, 6, 0) 100%); }
.gx-tile-img .gx-tile-body { display: grid; gap: 10px; padding: clamp(24px, 2.6vw, 36px); max-width: 40ch; text-shadow: 0 1px 18px rgba(0, 0, 0, .55); }
.gx-tile-img p { color: #DCE5DF; }
.gx-tile-big h3 { font-size: clamp(28px, 3vw, 46px); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .gx-tile-img:hover > img { transform: scale(1.05); } .gx-tile:hover { border-color: rgba(var(--gx-g), .38); } }
.gx-tile { transition: border-color .4s var(--ease); }
.gx-tile .gx-fig { margin-top: auto; max-width: none; font-size: clamp(54px, 5.4vw, 84px); line-height: .95; letter-spacing: -0.04em; font-weight: 300; color: #fff; text-shadow: 0 0 34px rgba(var(--gx-g), .45); }
.gx-tile .gx-fig small { margin-left: .18em; font-size: .42em; letter-spacing: 0; color: var(--indigo); text-shadow: none; }

/* ─── Galerie épinglée (usages) ──────────────────────────────── */
.gx-hs { position: relative; background: var(--gx-ink); padding-block: 0; }
.gx-hs-sticky { padding-block: clamp(64px, 9vw, 120px); }
.gx-hs-text { display: grid; gap: 18px; justify-items: start; max-width: 520px; padding-inline: var(--gutter); margin-bottom: clamp(28px, 4vw, 48px); }
.gx-hs-text .lead { color: var(--steel); }
.gx-hs-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.gx-hs-viewport::-webkit-scrollbar { display: none; }
.gx-hs-track { display: flex; gap: 16px; width: max-content; }
.gx-hs-bar { height: 2px; margin: 28px var(--gutter) 0; background: rgba(255, 255, 255, .14); border-radius: 2px; overflow: hidden; max-width: 560px; }
.gx-hs-bar i { display: block; height: 100%; background: var(--indigo); transform-origin: left; transform: scaleX(var(--p, .25)); transition: transform .25s linear; }
.gx-card { position: relative; flex: none; width: min(82vw, 440px); aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; scroll-snap-align: start; isolation: isolate; background: #0B0F0C; border: 1px solid rgba(255, 255, 255, .1); }
.gx-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.04); transition: transform 1.2s var(--expo); }
.gx-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5, 8, 6, .97) 0%, rgba(5, 8, 6, .86) 36%, rgba(5, 8, 6, .4) 60%, rgba(5, 8, 6, 0) 80%); }
.gx-card.is-active > img { transform: scale(1); }
.gx-chip { position: absolute; left: 16px; top: 16px; z-index: 2; font-size: 13px; letter-spacing: .01em; color: #fff; background: rgba(8, 12, 9, .62); border: 1px solid rgba(255, 255, 255, .2); border-radius: 9999px; padding: 6px 14px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.gx-card-body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 8px; padding: clamp(20px, 2.2vw, 30px); text-shadow: 0 1px 16px rgba(0, 0, 0, .6); }
.gx-card-body h3 { font-size: clamp(24px, 2.2vw, 34px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 300; color: #fff; }
.gx-card-body p { color: #EAF1EC; font-size: 15px; line-height: 1.45; }
.gx-card-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 4px; }
.gx-card-links a { color: #fff; font-size: 15px; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); text-underline-offset: .22em; transition: text-decoration-color .3s var(--ease); }
.gx-card-links a:hover, .gx-card-links a:focus-visible { text-decoration-color: #fff; }
/* cadre de visée sur la carte active */
.gx-vf { position: absolute; inset: 10px; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease), inset .6s var(--expo);
  --c: rgb(var(--gx-g));
  background:
    linear-gradient(var(--c), var(--c)) left top / 26px 2px no-repeat, linear-gradient(var(--c), var(--c)) left top / 2px 26px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 26px 2px no-repeat, linear-gradient(var(--c), var(--c)) right top / 2px 26px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 26px 2px no-repeat, linear-gradient(var(--c), var(--c)) left bottom / 2px 26px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 26px 2px no-repeat, linear-gradient(var(--c), var(--c)) right bottom / 2px 26px no-repeat; }
.gx-card.is-active .gx-vf { opacity: 1; inset: 14px; }
.gx-after { background: var(--gx-ink); padding-top: 0; }

/* mode épinglé (souris, grand écran) : la galerie défile à l'horizontale avec la page */
.gx-hs.is-pinned .gx-hs-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(300px, 31%) minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: clamp(24px, 3vw, 56px); align-items: center; padding-block: calc(var(--nav-h) + 20px) 28px; overflow: hidden; }
.gx-hs.is-pinned .gx-hs-text { grid-row: 1; margin-bottom: 0; padding-left: var(--gutter); padding-right: 0; }
.gx-hs.is-pinned .gx-hs-viewport { grid-row: 1; grid-column: 2; overflow: clip; padding-inline: 0; scroll-snap-type: none; }
.gx-hs.is-pinned .gx-hs-track { will-change: transform; padding-right: var(--gutter); }
.gx-hs.is-pinned .gx-card { width: min(36vw, 560px); height: min(64vh, 640px); aspect-ratio: auto; }
.gx-hs.is-pinned .gx-hs-bar { grid-row: 2; grid-column: 1 / -1; width: calc(100% - 2 * var(--gutter)); max-width: none; margin: 0 var(--gutter); }

@media (max-width: 960px) {
  .gx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gx-tile-big { grid-column: 1 / -1; grid-row: auto; min-height: 380px; }
  .gx-tile-wide-r, .gx-tile-wide-l, .gx-tile-wide-r2 { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .gx-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .gx-tile { min-height: 200px; }
  .gx-tile-img { min-height: 360px; }
  .p-hero.gx-hero { align-items: center; padding-bottom: 48px; }
  .gx-hero .p-visual::after { background: linear-gradient(180deg, rgba(5, 8, 6, .8) 0%, rgba(5, 8, 6, .55) 50%, var(--gx-ink) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .gx-card > img, .gx-tile-img > img, .gx-vf, .gx-hs-bar i { transition: none; }
}

/* ─── Caractéristiques : fiche en verre sombre ───────────────── */
.gx-spec { background: var(--gx-ink); padding-top: 0; }
.gx-spec .spec-visual { border-radius: 22px; background: #E7EAE8; border-color: rgba(var(--gx-g), .32); box-shadow: 0 36px 96px -36px rgba(var(--gx-g), .55); }
.gx-spec .spec-stats { border-radius: 18px; border-color: rgba(255, 255, 255, .1); background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); }
.gx-spec .spec-stats dd { color: #fff; }
.gx-spec .spec-stats dd small { color: var(--indigo); }
.gx-spec .spec-groups { gap: 14px; }
.gx-spec .spec-group { padding: clamp(22px, 2.4vw, 34px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)); }
.gx-spec .spec-group h3 { color: var(--indigo); letter-spacing: .1em; }
.gx-spec .spec-layout .spec-groups .spec-group:nth-child(2) > h3:first-child { padding-top: 0; }
.gx-spec .kv dd { color: #fff; }
.gx-spec .cta-pair { margin-top: clamp(28px, 4vw, 44px); }
.gx-spec .fineprint { max-width: 90ch; }

/* ─── Accompagnement / audit ─────────────────────────────────── */
.gx-support { background: var(--gx-ink); padding-top: 0; }
.gx-steps { grid-auto-rows: minmax(190px, auto); }
.gx-steps .gx-tile-big { min-height: 440px; }
.gx-num { font-size: 13px; letter-spacing: .12em; color: var(--indigo); font-weight: 400; }
.gx-tile-img .gx-tile-body .btn { justify-self: start; margin-top: 10px; }
.gx-care { margin-top: 14px; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 72px); align-items: start; padding: clamp(26px, 3.2vw, 48px); border-radius: 24px; border: 1px solid rgba(var(--gx-g), .34); background: radial-gradient(80% 130% at 0 0, rgba(var(--gx-g), .14), transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)); box-shadow: 0 30px 90px -50px rgba(var(--gx-g), .5); }
.gx-care-head { display: grid; gap: 12px; justify-items: start; }
.gx-care-name { font-size: clamp(40px, 5vw, 76px); line-height: .95; letter-spacing: -0.03em; font-weight: 300; color: #fff; filter: drop-shadow(0 0 18px rgba(var(--gx-g), .4)); }
.gx-care-pos { color: var(--steel); }
.gx-care-lead { color: #fff; max-width: 34ch; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.35; margin-top: 6px; }
.gx-care-head .btn { margin-top: 10px; }
.gx-care .kv dd { color: #fff; }

/* ─── FAQ ────────────────────────────────────────────────────── */
.gx-faq { background: var(--gx-ink); }

/* ─── Bandeau final « audit » ────────────────────────────────── */
.gx-cta { position: relative; isolation: isolate; overflow: hidden; background: var(--gx-ink); text-align: center; padding-block: clamp(96px, 16vh, 180px); min-height: min(88vh, 860px); display: grid; align-items: center; }
.gx-cta-bg { position: absolute; inset: 0; z-index: -2; }
.gx-cta-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.gx-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 55% at 50% 0%, rgba(var(--gx-g), .22), transparent 70%), linear-gradient(180deg, var(--gx-ink) 0%, rgba(5, 8, 6, .62) 24%, rgba(5, 8, 6, .72) 70%, var(--gx-ink) 100%); }
.gx-cta-in { display: grid; gap: clamp(16px, 2.4vh, 26px); justify-items: center; }
.gx-cta .gx-chapter-title { max-width: 18ch; }
.gx-cta-pair { justify-content: center; }
.gx-cta-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px clamp(24px, 4vw, 56px); margin-top: clamp(12px, 2vh, 24px); padding: 18px clamp(20px, 3vw, 40px); border-radius: 18px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(8, 12, 9, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gx-cta-contacts dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #C3CEC7; }
.gx-cta-contacts dd { font-size: 17px; color: #fff; }
.gx-cta-contacts a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: .2em; }
.gx-cta .fineprint { color: rgba(255, 255, 255, .88); }

@media (max-width: 960px) {
  .gx-care { grid-template-columns: 1fr; }
  .gx-steps .gx-tile-big { min-height: 380px; }
}
.gx-chapter-lead a { color: #fff; text-decoration: underline; text-decoration-color: rgba(var(--gx-g), .8); text-underline-offset: .22em; text-decoration-thickness: 1.5px; }
.gx-chapter-lead a:hover, .gx-chapter-lead a:focus-visible { text-decoration-color: #fff; }

/* ─── Trait lumineux d'ouverture d'un bandeau sombre (accueil : bandeau GREEN) ─── */
.g-home.gx-rim-top { padding-top: 0; position: relative; overflow: hidden; }
.gx-rim { position: relative; height: clamp(86px, 13vh, 140px); margin-bottom: clamp(20px, 4vh, 48px); pointer-events: none; }
.g-home.gx-rim-top .g-home-grid { position: relative; z-index: 1; }
.gx-horizon.gx-horizon-top { top: -1px; bottom: auto; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 30%, transparent 94%); mask-image: linear-gradient(180deg, #000 0, #000 30%, transparent 94%); }
.gx-cta .eyebrow { color: #E3EAE5; }
.gx-cta-contacts { background: rgba(8, 12, 9, .76); }