/* ═══════════════════════════════════════════════════
   SEG Gamme — Front-end styles
   Cohérent avec la charte Segway Mont-Blanc :
   Barlow / Barlow Semi Condensed, diagonale 18°,
   accent gold, fond --seg-snow.
   ═══════════════════════════════════════════════════ */

/* ── Pages gamme : hero raccourci (~−50%) & espacements resserrés ──
   Surcharge le thème (.hero=100vh, .products/.gmm-others=100px) ; ce CSS
   est chargé après main.css et les sélecteurs sont plus spécifiques. ── */
header.hero {
  min-height: 50vh;
  padding: 48px 48px 56px;
}
section.products {
  padding-top: 48px;
}
@media (max-width: 768px) {
  header.hero {
    min-height: 56vh;
    padding: 64px 24px 48px;
  }
}

/* ── Hero — image de fond uploadée ── */
.hero--custom-bg .hero-bg {
  background-image:
    /* Scrim gauche : assombrit la zone texte */
    linear-gradient(100deg, rgba(4, 8, 20, 0.88) 0%, rgba(4, 8, 20, 0.55) 45%, rgba(4, 8, 20, 0.10) 72%, transparent 100%),
    /* Vignette bas : fondu vers la section suivante */
    linear-gradient(to bottom, transparent 55%, rgba(4, 8, 20, 0.60) 100%),
    /* Photo */
    var(--hero-bg);
  background-size: auto, auto, cover;
  background-position: 0 0, 0 0, center center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* Textes : blancs sur fond sombre */
.hero--custom-bg .hero-eyebrow            { color: rgba(255,255,255,0.65); }
.hero--custom-bg .hero-eyebrow::before    { background: rgba(255,255,255,0.40); }
.hero--custom-bg h1                       { color: #fff; }
.hero--custom-bg h1 .line-pale            { color: rgba(255,255,255,0.18); }
.hero--custom-bg .hero-sub                { color: rgba(255,255,255,0.72); }

/* Watermark : lisible sur fond photo sombre */
.hero--custom-bg .hero-watermark {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.18);
  text-shadow: none;
}

/* Bouton outline : blanc sur fond sombre */
.hero--custom-bg .btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}
.hero--custom-bg .btn-outline:hover {
  background: #fff;
  border-color: #fff;
  color: var(--seg-black);
}

/* Stats strip : glassmorphism sur fond sombre */
.hero--custom-bg .hero-stats {
  background: rgba(4, 8, 20, 0.50);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,0.10);
}
.hero--custom-bg .stat-num   { color: #fff; }
.hero--custom-bg .stat-label { color: rgba(255,255,255,0.45); }

/* ── Intro ── */
.seg-gamme-intro {
  max-width: none;
  margin: 0;
  padding: 16px 48px 0;   /* moins d'espace au-dessus */
}
.seg-gamme-intro__text {
  font-family: var(--seg-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--seg-gray, #6B7280);
}
/* Sur desktop large, l'intro tient sur une seule ligne. */
@media (min-width: 1100px) {
  .seg-gamme-intro__text { white-space: nowrap; }
}

/* ── Points forts (compact) ── */
.seg-features {
  padding: 48px 48px 56px;
  background: var(--seg-snow, #F7F7F7);
}

.seg-features__header {
  margin-bottom: 32px;
}

.seg-features__header h2 {
  font-family: var(--seg-font-head);
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  line-height: 1;
  margin-top: 8px;
}

.seg-features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 1px;
  background: var(--seg-border, rgba(10,10,10,0.08));
  border: 1px solid var(--seg-border, rgba(10,10,10,0.08));
}

.seg-features__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 20px;
  background: var(--seg-white, #FFFFFF);
  transition: background 0.2s;
}

.seg-features__item:hover {
  background: var(--seg-dark-mid, #EDEDED);
}

.seg-features__num {
  flex-shrink: 0;
  font-family: var(--seg-font-head);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  color: var(--seg-gray-light, #E8EEF7);
  letter-spacing: -1px;
  min-width: 28px;
}

.seg-features__item:hover .seg-features__num {
  color: var(--seg-accent, #D0E02B);
}

.seg-features__title {
  font-family: var(--seg-font-head);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--seg-black, #0A0A0A);
  margin-bottom: 4px;
}

.seg-features__desc {
  font-family: var(--seg-font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--seg-gray, #6B7280);
}

@media (max-width: 768px) {
  .seg-features {
    padding: 32px 20px 40px;
  }

  .seg-features__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Lien cat-name stretched sur toute la card ── */
.cat-card:has(a.cat-name) .cat-content {
  position: static;
  z-index: auto;
}

.cat-card:has(a.cat-name) .cat-content > * {
  position: relative;
  z-index: 2;
}

a.cat-name {
  position: static;
  text-decoration: none;
  color: inherit;
}

a.cat-name::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* ── Sélecteur d'année ── */
.seg-gamme-years {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin: 32px 0 48px;
  padding: 0 48px;
}

.seg-gamme-years__item {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  font-family: var(--seg-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--seg-gray, #6B7280);
  background: var(--seg-dark-mid, #EDEDED);
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition: background 0.2s, color 0.2s;
}

.seg-gamme-years__item:hover {
  background: rgba(16, 69, 142, 0.08);
  color: var(--seg-red, #10458E);
}

.seg-gamme-years__item--active {
  background: var(--seg-accent, #D0E02B);
  color: var(--seg-black, #0A0A0A);
}

/* ═══════════════════════════════════════════════════
   FAQ — Gamme Polaris
   ═══════════════════════════════════════════════════ */
.seg-gamme-faq {
  padding: 100px 48px;
  background: var(--seg-white, #FFFFFF);
  border-top: 1px solid var(--seg-border, rgba(10,10,10,0.08));
}

/* ── Header ── */
.seg-gamme-faq__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1100px;
  margin-bottom: 72px;
}

.seg-gamme-faq__intro {
  font-family: var(--seg-font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--seg-gray, #6B7280);
}

/* ── Liste ── */
.seg-gamme-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Item ── */
.seg-gamme-faq__item {
  position: relative;
  border-top: 1px solid var(--seg-border, rgba(10,10,10,0.08));
  overflow: hidden;
}

.seg-gamme-faq__item:last-child {
  border-bottom: 1px solid var(--seg-border, rgba(10,10,10,0.08));
}

/* Accent bar — signature gold stripe on the left on open */
.seg-gamme-faq__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--seg-accent, #D0E02B);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 2;
}

.seg-gamme-faq__item[open]::before {
  transform: scaleY(1);
}

/* ── Question (summary) ── */
.seg-gamme-faq__question {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  cursor: pointer;
  list-style: none;
  transition: background 0.2s;
}

.seg-gamme-faq__question::-webkit-details-marker { display: none; }

.seg-gamme-faq__question:hover {
  background: var(--seg-dark-mid, #EDEDED);
}

/* Numéro */
.seg-gamme-faq__num {
  flex-shrink: 0;
  font-family: var(--seg-font-head);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  color: var(--seg-gray-light, #E8EEF7);
  letter-spacing: -1px;
  min-width: 40px;
  transition: color 0.3s;
}

.seg-gamme-faq__item[open] .seg-gamme-faq__num {
  color: var(--seg-accent, #D0E02B);
}

/* Texte de la question */
.seg-gamme-faq__q-text {
  flex: 1;
  font-family: var(--seg-font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--seg-black, #0A0A0A);
  line-height: 1.3;
}

/* Chevron */
.seg-gamme-faq__chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--seg-gray, #6B7280);
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.2s;
}

.seg-gamme-faq__item[open] .seg-gamme-faq__chevron {
  transform: rotate(180deg);
  color: var(--seg-accent, #D0E02B);
}

/* ── Réponse ── */
.seg-gamme-faq__answer {
  padding: 0 28px 28px 88px;
  font-family: var(--seg-font-body);
  font-size: 14px;
  line-height: 1.9;
  color: var(--seg-gray, #6B7280);
  animation: faqSlideIn 0.3s ease both;
}

.seg-gamme-faq__answer p {
  margin-bottom: 12px;
}

.seg-gamme-faq__answer p:last-child {
  margin-bottom: 0;
}

@keyframes faqSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Responsive FAQ / Intro / Years ── */
@media (max-width: 768px) {
  .seg-gamme-faq {
    padding: 60px 20px;
  }

  .seg-gamme-faq__header {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 40px;
  }

  .seg-gamme-faq__question {
    padding: 18px 16px;
    gap: 14px;
  }

  .seg-gamme-faq__num {
    font-size: 22px;
    min-width: 30px;
  }

  .seg-gamme-faq__q-text {
    font-size: 13px;
  }

  .seg-gamme-faq__answer {
    padding: 0 16px 20px 60px;
  }

  .seg-gamme-intro {
    padding: 32px 20px 0;
  }

  .seg-gamme-years {
    padding: 0 20px;
    flex-wrap: wrap;
  }
}


/* ═══════════════════════════════════════════════════
   HERO — Keyframe manquant pour les animations
   ═══════════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════
   HERO WATERMARK — Grande typo décorative
   ═══════════════════════════════════════════════════ */
.hero-watermark {
  position: absolute;
  right: 48px;
  bottom: 80px;
  z-index: 1;
  font-family: var(--seg-font-head, 'Barlow Semi Condensed', sans-serif);
  font-size: clamp(120px, 22vw, 320px);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -8px;
  color: rgba(218, 41, 28, 0.06);
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  animation: wmFadeIn 1.2s ease 0.6s both;
}

.hero-watermark--gamme {
  font-size: clamp(80px, 16vw, 240px);
  letter-spacing: -4px;
}

@keyframes wmFadeIn {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* ═══════════════════════════════════════════════════
   CAT-INDEX — Numéro overlay sur les cat-cards
   ═══════════════════════════════════════════════════ */
.cat-index {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  font-family: var(--seg-font-head, 'Barlow Semi Condensed', sans-serif);
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  color: rgba(255, 255, 255, 0.08);
  pointer-events: none;
  transition: color 0.4s ease, transform 0.4s ease;
}

.cat-card:hover .cat-index {
  color: rgba(255, 255, 255, 0.18);
  transform: translateY(-4px);
}


/* ═══════════════════════════════════════════════════
   TRUST STRIP — Barre de réassurance
   ═══════════════════════════════════════════════════ */
.seg-trust-strip {
  display: flex;
  justify-content: center;
  gap: 24px;
  background: var(--seg-white, #FFFFFF);
  border-top: 1px solid var(--seg-border, rgba(0, 0, 0, 0.08));
  border-bottom: 1px solid var(--seg-border, rgba(0, 0, 0, 0.08));
}

.seg-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 36px;
  font-family: var(--seg-font-head, 'Barlow Semi Condensed', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--seg-gray, #6A6A6A);
  transition: color 0.2s, background 0.2s;
}

.seg-trust-item:last-child {
  border-right: none;
}

.seg-trust-item:hover {
  color: var(--seg-red, #DA291C);
  background: var(--seg-dark-mid, #EDEDED);
}

.seg-trust-item svg {
  flex-shrink: 0;
  color: var(--seg-red-pale, #F19A93);
  transition: color 0.2s;
}

.seg-trust-item:hover svg {
  color: var(--seg-red, #DA291C);
}

@media (max-width: 1100px) {
  .seg-trust-strip {
    flex-wrap: wrap;
  }
  .seg-trust-item {
    flex: 1 1 45%;
    justify-content: center;
  }
  .seg-trust-item:nth-child(2) { border-right: none; }
  .seg-trust-item:nth-last-child(-n+2) { border-bottom: none; }
}

@media (max-width: 600px) {
  .seg-trust-item {
    flex: 1 1 100%;
    padding: 14px 24px;
    font-size: 10px;
    letter-spacing: 1.5px;
  }
}


/* ═══════════════════════════════════════════════════
   GAMME — Modèles grid (3 colonnes pour modèles)
   ═══════════════════════════════════════════════════ */
.gmm-models-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Cartes modèles en format paysage (les photos officielles sont horizontales)
   pour ne plus tronquer le visuel. Hauteur +20 % (16/10 → 16/12). */
.gmm-models-grid .cat-card {
  aspect-ratio: 16 / 12;
}

@media (max-width: 700px) {
  .gmm-models-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════
   PAGE MODÈLE (sous-version) — /gamme-{year}/{cat}/{slug}
   ═══════════════════════════════════════════════════ */
.gmm-model-switch {
  background: #0a1424;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.gmm-model-switch__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 16px 24px;
}
.gmm-model-switch__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--seg-font-head, 'Barlow Semi Condensed', sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.gmm-model-switch__item:hover {
  border-color: #F19A93;
  color: #fff;
}
.gmm-model-switch__item.is-current {
  border-color: #DA291C;
  background: #DA291C;
  color: #fff;
}
.gmm-model-switch__img {
  width: 44px;
  height: 30px;
  background-size: cover;
  background-position: center;
  border-radius: 5px;
  flex-shrink: 0;
}

.gmm-model { background: var(--seg-snow, #F7F7F7); }
.gmm-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

.gmm-sec { padding: 56px 0; }
.gmm-sec:nth-child(even) { background: #fff; }
.gmm-sec__title {
  font-family: var(--seg-font-head, 'Barlow Semi Condensed', sans-serif);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--seg-red, #DA291C);
  margin: 0 0 28px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--seg-red, #DA291C);
  display: inline-block;
}

/* ── Aperçu + points clés ── */
.gmm-overview__lead {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: rgba(0,0,0,0.78);
  max-width: 880px;
  margin: 0 0 32px;
}
.gmm-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.gmm-highlight {
  background: #fff;
  border: 1px solid rgba(218, 41, 28,0.12);
  border-left: 4px solid var(--seg-lime, #D0E02B);
  border-radius: 8px;
  padding: 20px 22px;
}
.gmm-highlight__title {
  font-family: var(--seg-font-head, 'Barlow Semi Condensed', sans-serif);
  font-size: 18px; font-weight: 800;
  color: var(--seg-red, #DA291C);
  margin-bottom: 6px;
}
.gmm-highlight__text { font-size: 14px; line-height: 1.5; color: rgba(0,0,0,0.6); }

/* ── Versions (trims) ── */
.gmm-trims__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.gmm-trim {
  background: #0a1424;
  color: #fff;
  border-radius: 12px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gmm-trim__name {
  font-family: var(--seg-font-head, 'Barlow Semi Condensed', sans-serif);
  font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
}
.gmm-trim__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.gmm-trim__label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.55); width: 100%; }
.gmm-trim__old { text-decoration: line-through; color: rgba(255,255,255,0.45); font-size: 16px; }
.gmm-trim__now { font-size: 26px; font-weight: 800; color: var(--seg-lime, #D0E02B); }
.gmm-trim__monthly { font-size: 13px; color: rgba(255,255,255,0.7); }
.gmm-trim__cta {
  margin-top: auto;
  align-self: flex-start;
  background: var(--seg-red, #DA291C);
  color: #fff; text-decoration: none;
  font-family: var(--seg-font-head, 'Barlow Semi Condensed', sans-serif);
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  padding: 11px 20px; border-radius: 6px;
  transition: background 0.2s;
}
.gmm-trim__cta:hover { background: var(--seg-red-light, #E8483C); color: #fff; }

/* ── Points forts (features) ── */
.gmm-features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.gmm-feature {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
}
.gmm-feature:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,0.1); }
.gmm-feature__img {
  aspect-ratio: 16 / 10;
  background-size: cover; background-position: center;
}
.gmm-feature__body { padding: 18px 20px 22px; }
.gmm-feature__title {
  font-family: var(--seg-font-head, 'Barlow Semi Condensed', sans-serif);
  font-size: 17px; font-weight: 700; color: var(--seg-red, #DA291C);
  margin: 0 0 8px;
}
.gmm-feature__text { font-size: 14px; line-height: 1.55; color: rgba(0,0,0,0.6); margin: 0; }

/* ── Galerie ── */
.gmm-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.gmm-gallery__item {
  aspect-ratio: 4 / 3;
  background-size: cover; background-position: center;
  border-radius: 8px;
  display: block;
  transition: transform 0.3s, filter 0.3s;
  filter: saturate(0.95);
}
.gmm-gallery__item:hover { transform: scale(1.03); filter: saturate(1.1); }

/* ── Fiche technique (tableaux) ── */
.gmm-specs__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 28px 40px;
}
.gmm-specs__group-title {
  font-family: var(--seg-font-head, 'Barlow Semi Condensed', sans-serif);
  font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: #0a1424;
  margin: 0 0 12px;
}
.gmm-specs__table { width: 100%; border-collapse: collapse; }
.gmm-specs__table tr { border-bottom: 1px solid rgba(0,0,0,0.08); }
.gmm-specs__table th {
  text-align: left; vertical-align: top;
  font-weight: 600; color: rgba(0,0,0,0.55);
  font-size: 14px; padding: 10px 16px 10px 0; width: 45%;
}
.gmm-specs__table td {
  text-align: left; vertical-align: top;
  font-weight: 600; color: #0a1424;
  font-size: 14px; padding: 10px 0;
}

.gmm-rawcontent img { max-width: 100%; height: auto; }

.gmm-model-back {
  max-width: 1140px;
  margin: 40px auto 72px;
  padding: 0 24px;
}


/* ═══════════════════════════════════════════════════
   AUTRES GAMMES — Cross-sell horizontal
   ═══════════════════════════════════════════════════ */
.gmm-others {
  padding: 48px 48px 100px;
  background: var(--seg-snow, #F7F7F7);
  border-top: 1px solid var(--seg-border, rgba(0, 0, 0, 0.08));
}

.gmm-others__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  gap: 32px;
}

.gmm-others__intro {
  max-width: 360px;
  font-family: var(--seg-font-body, 'Barlow', sans-serif);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--seg-gray, #6A6A6A);
}

.gmm-others__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
}
@media (max-width: 700px) {
  .gmm-others__grid { grid-template-columns: 1fr; }
}

.gmm-others__card {
  position: relative;
  overflow: hidden;
  display: flex;
  text-decoration: none;
  color: #FFFFFF;
  background: var(--seg-dark-mid, #EDEDED);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  aspect-ratio: 16 / 10;
}

.gmm-others__card:hover {
  transform: scale(1.02);
  z-index: 2;
  color: #FFFFFF;
  text-decoration: none;
}

/* Gradient overlay */
.gmm-others__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.18) 55%, transparent 100%);
  z-index: 1;
}

/* Accent line top on hover */
.gmm-others__card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--seg-red, #DA291C);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  z-index: 3;
}

.gmm-others__card:hover::after {
  transform: scaleX(1);
}

.gmm-others__card .cat-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
  filter: brightness(0.72) saturate(0.82);
}

.gmm-others__card:hover .cat-card-bg {
  transform: scale(1.06);
  filter: brightness(0.9) saturate(0.95);
}

.gmm-others__card-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 20px;
  padding: 28px 24px;
  width: 100%;
}

.gmm-others__num {
  font-family: var(--seg-font-head, 'Barlow Semi Condensed', sans-serif);
  font-size: 56px;
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -3px;
  color: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  transition: color 0.4s;
}

.gmm-others__card:hover .gmm-others__num {
  color: rgba(255, 255, 255, 0.16);
}

.gmm-others__name {
  font-family: var(--seg-font-head, 'Barlow Semi Condensed', sans-serif);
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 6px;
}

.gmm-others__desc {
  font-family: var(--seg-font-body, 'Barlow', sans-serif);
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
  margin-bottom: 12px;
}

.gmm-others__card .cat-arrow {
  margin-left: auto;
  flex-shrink: 0;
  align-self: flex-end;
}

@media (max-width: 768px) {
  .gmm-others {
    padding: 60px 24px;
  }

  .gmm-others__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .gmm-others__grid {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════════════
   REVEAL DELAYS — Pour les cartes indexées
   ═══════════════════════════════════════════════════ */
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }
.reveal-d5 { transition-delay: 0.40s; }
.reveal-d6 { transition-delay: 0.48s; }
.reveal-d7 { transition-delay: 0.56s; }
.reveal-d8 { transition-delay: 0.64s; }
.reveal-d9 { transition-delay: 0.72s; }
.reveal-d10 { transition-delay: 0.80s; }


/* ═══════════════════════════════════════════════════
   RESPONSIVE — Hero watermark
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero-watermark {
    right: 20px;
    bottom: 24px;
    font-size: 80px;
    letter-spacing: -3px;
  }
  .hero-watermark--gamme {
    font-size: 60px;
    letter-spacing: -2px;
  }
}

/* ═══════════════════════════════════════════════════
   MONTAGE — Bandeau photo pleine largeur (hub gamme)
   5 panneaux véhicules, le survolé s'élargit.
   ═══════════════════════════════════════════════════ */
.gmm-montage {
  padding: 48px 48px 100px;
  background: var(--seg-snow, #F7F7F7);
  border-top: 1px solid var(--seg-border, rgba(0, 0, 0, 0.08));
}

.gmm-montage__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  gap: 32px;
}

.gmm-montage__intro {
  max-width: 360px;
  font-family: var(--seg-font-body, 'Barlow', sans-serif);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--seg-gray, #6A6A6A);
}

.gmm-montage__strip {
  display: flex;
  gap: 3px;
  height: 360px;
}

.gmm-montage__panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
  transition: flex-grow 0.5s ease;
}

.gmm-montage__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.72) saturate(0.9);
  transition: transform 0.6s ease, filter 0.6s ease;
}

/* Scrim bas pour la lisibilité du libellé */
.gmm-montage__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 8, 20, 0.78) 0%, rgba(4, 8, 20, 0.10) 45%, transparent 70%);
  z-index: 1;
}

.gmm-montage__panel:hover {
  flex-grow: 1.7;
}

.gmm-montage__panel:hover .gmm-montage__bg {
  transform: scale(1.06);
  filter: brightness(0.92) saturate(1);
}

.gmm-montage__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gmm-montage__name {
  font-family: var(--seg-font-head, 'Barlow Semi Condensed', sans-serif);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}

.gmm-montage__badge {
  font-family: var(--seg-font-head, 'Barlow Semi Condensed', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--seg-lime, #D0E02B);
}

@media (max-width: 768px) {
  .gmm-montage {
    padding: 40px 16px 64px;
  }
  .gmm-montage__header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 12px;
  }
  .gmm-montage__strip {
    flex-direction: column;
    height: auto;
  }
  .gmm-montage__panel {
    height: 170px;
  }
  .gmm-montage__panel:hover {
    flex-grow: 1;
  }
}

/* ═══════════════════════════════════════════════════
   HUB — hero 2 colonnes : texte à gauche, montage à droite
   ═══════════════════════════════════════════════════ */
header.hero--hub {
  min-height: auto;
  padding: 72px 48px 56px;
}

.hero-split {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 56px;
  width: 100%;
}

.hero-split .hero-content {
  flex: 1 1 0;
  max-width: 620px;
}

.gmm-hero-montage {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  max-width: 460px;
}

/* La 1re tuile prend toute la largeur en bandeau panoramique. */
.gmm-hero-montage__tile:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 20 / 9;
}

.gmm-hero-montage__tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  text-decoration: none;
  border-radius: 3px;
}

.gmm-hero-montage__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.82) saturate(0.9);
  transition: transform 0.5s ease, filter 0.5s ease;
}

.gmm-hero-montage__tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 8, 20, 0.78) 0%, transparent 62%);
}

.gmm-hero-montage__tile:hover .gmm-hero-montage__bg {
  transform: scale(1.08);
  filter: brightness(0.98) saturate(1);
}

.gmm-hero-montage__name {
  position: absolute;
  left: 12px;
  bottom: 9px;
  z-index: 1;
  font-family: var(--seg-font-head, 'Barlow Semi Condensed', sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
}

@media (max-width: 900px) {
  .hero-split {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }
  .hero-split .hero-content {
    max-width: none;
  }
  .gmm-hero-montage {
    max-width: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Phase 2 cocon — Guide éditorial + maillage métiers (fiche modèle)
   ═══════════════════════════════════════════════════════════════════════ */
.gmm-editorial__body {
  max-width: 820px;
  font-family: var(--seg-font-body);
  color: #1f2937;
  line-height: 1.7;
}
.gmm-editorial__body h2 {
  font-family: var(--seg-font-head);
  color: #DA291C;
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 2.2rem 0 .9rem;
}
.gmm-editorial__body h3 {
  font-family: var(--seg-font-head);
  color: #10458E;
  font-size: 1.2rem;
  margin: 1.6rem 0 .6rem;
}
.gmm-editorial__body p { margin: 0 0 1rem; }
.gmm-editorial__body ul { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.gmm-editorial__body li { margin: .25rem 0; }
.gmm-editorial__body blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid #D0E02B;
  background: #F7F7F7;
  font-size: 1.05rem;
}
.gmm-editorial__body strong { color: #0a1424; }

.gmm-metiers__lead { color: #6B7280; margin: 0 0 1rem; }
.gmm-metiers__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .6rem;
}
.gmm-metiers__grid a {
  display: block;
  padding: .7rem 1rem;
  background: #EDEDED;
  border-radius: 8px;
  color: #DA291C;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.gmm-metiers__grid a:hover {
  background: #DA291C;
  color: #fff;
  transform: translateY(-1px);
}