/**
 * Bloc : lg/concession-hero
 *
 * LAYOUT (mobile-first) :
 *   Mobile  — image hero (2:1) → galerie (overlap -0.5rem) → card contenu
 *   Tablette — identique, galerie décalée à droite, CTAs côte à côte
 *   Desktop  — grid 2 col : [card+logo] [hero+galerie], logo concession visible
 *
 * DIMENSIONS FIGMA :
 *   Mobile  — section padding: 32px×32px, top: 20px
 *             gallery: 284×70px, 1px border, r=10px, overlap hero: 9px
 *             thumbs: 81×52px, r=6px
 *             content card: 326×460px, gap avec gallery: 42px
 *   Tablette — gallery: 518×124px, 2px border, r=20px, overlap: 30px
 *             gallery center: 50%+65px from page left
 *             thumbs: 149×96px, r=10px, gap 16px
 *             content card: py=24px, px=38px, gap: 45px
 *   Desktop  — left card: 612×442px (left:64, top:53)
 *             logo: top:89 (36px from card top), title: top:132
 *             right hero: 726×361px (left:650, top:53)
 *             gallery: 518×124px centered bottom-right of hero
 *
 * BEM :
 *   .lg-concession-hero
 *     __liseret, __liseret--mobile/tablet/desktop
 *     __media, __hero, __gallery-card, __gallery, __thumb
 *     __card, __logo, __sep, __title, __title-accent
 *     __text, __cta-group, __cta, __cta--glass, __cta--dark, __cta-icon
 */

/* ── Variables locales ──────────────────────────────────────────── */

.lg-concession-hero {
  --_ch-pad-x:        2rem;            /* padding horizontal (32px) */
  --_ch-pad-top:      1.25rem;         /* padding top section (20px) */
  --_ch-radius-card:  1.25rem;         /* 20px — card principale et galerie md+ */
  --_ch-radius-card-sm: 0.625rem;      /* 10px — gallery card mobile */
  --_ch-radius-thumb-sm: 0.375rem;     /* 6px  — miniatures mobile */
  --_ch-radius-thumb:    0.625rem;     /* 10px — miniatures tablette+ */
  --_ch-card-blur:    0.3125rem;       /* 5px  — backdrop-blur card contenu */
  --_ch-gallery-blur: 0.9375rem;       /* 15px — backdrop-blur galerie */
  --_ch-cta-blur:     0.9375rem;       /* 15px — backdrop-blur CTA glass */
  --_ch-glass-bg:     rgba(190, 190, 190, 0.3);  /* card contenu */
  --_ch-gallery-bg:   rgba(255, 255, 255, 0.3);  /* gallery card */
  --_ch-glass-border: #cfcfcf;
  --_ch-shadow-out:   0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
  --_ch-shadow-gallery: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.2);
  --_ch-shadow-in:    inset 0 0 1.875rem rgba(0, 0, 0, 0.1);
  --_ch-color-dark:   #141414;
  --_ch-color-red:    #E52A19;
  --_ch-color-gray:   #979797;
}

/* ── Section ────────────────────────────────────────────────────── */

.lg-concession-hero {
  position: relative;
  background: #fff;
  padding: var(--_ch-pad-top) 0;
  overflow: visible;
}

/* ── Liserets SVG ───────────────────────────────────────────────── */

.lg-concession-hero__liseret {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

.lg-concession-hero__liseret--mobile  { 
    display: block;
    top: 0;
    left: calc(var(--container-px) * -1);
    height: 100%;
    width: fit-content;
}
.lg-concession-hero__liseret--tablet  { display: none;  }
.lg-concession-hero__liseret--desktop { display: none;  }

/* ── Zone images ────────────────────────────────────────────────── */

.lg-concession-hero__media {
  position: relative;
  z-index: 1;
}

/* Image principale */

.lg-concession-hero__hero {
  border-radius: var(--_ch-radius-card);
  overflow: visible;
  /* Desktop ? */
  height: 100%;
}

.lg-concession-hero__hero img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;

  /* Desktop ? */
    height: 100%;
    width: auto;
}

/* ── Gallery card ─────────────────────────────────── MOBILE ────── */
/* Placée en flux avec margin-top négatif pour chevaucher le hero   */

.lg-concession-hero__gallery-card {
  position: relative;
  z-index: 2;
  margin-top: -0.5625rem;           /* -9px : overlap sur le hero */
  margin-left: calc(10% + 45%); /* centré par rapport à la partie droite de l'image */
  transform: translateX(-50%);
  margin-right: auto;
  width: calc(100% - 2.25rem);
  max-width: 17.75rem;              /* 284px sur mobile */
  background: var(--_ch-gallery-bg);
  backdrop-filter: blur(var(--_ch-gallery-blur));
  -webkit-backdrop-filter: blur(var(--_ch-gallery-blur));
  border: 1px solid var(--_ch-glass-border);  /* 1px sur mobile */
  border-radius: var(--_ch-radius-card-sm);   /* 10px sur mobile */
  padding: 0.5rem;
  box-shadow: var(--_ch-shadow-gallery), var(--_ch-shadow-in);
}

/* Grille 3 miniatures */

.lg-concession-hero__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.lg-concession-hero__thumb {
  border-radius: var(--_ch-radius-thumb-sm); /* 6px mobile */
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.lg-concession-hero__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Card contenu ───────────────────────────────────────────────── */

.lg-concession-hero__card {
  position: relative;
  z-index: 1;
  margin-top: 2.625rem;              /* 42px : gap Figma gallery→card */
  background: var(--_ch-glass-bg);
  backdrop-filter: blur(var(--_ch-card-blur));
  -webkit-backdrop-filter: blur(var(--_ch-card-blur));
  border: 2px solid var(--_ch-glass-border);
  border-radius: var(--_ch-radius-card);
  padding: 1.375rem 1.25rem; 
  box-shadow: var(--_ch-shadow-out), var(--_ch-shadow-in);
  text-align: center;
}

.lg-concession-hero__card-svg {
  display: none;
}

/* ── Logo concession (desktop uniquement) ───────────────────────── */

.lg-concession-hero__logo {
  display: none;
}

.lg-concession-hero__logo img {
  height: 1.3125rem;  /* 21px */
  width: auto;
  display: block;
}

/* ── Titre ──────────────────────────────────────────────────────── */

.lg-concession-hero__title {
  font-family: var(--ff-heading, 'Inria Sans', sans-serif);
  font-size: 1.375rem;   /* 22px */
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  line-height: 1.27;
  color: var(--_ch-color-dark);
  margin: 0 0 0.875rem;
}

.lg-concession-hero__title-accent {
  color: var(--_ch-color-red);
}

/* ── Description ────────────────────────────────────────────────── */

.lg-concession-hero__text {
  font-family: var(--ff-body, 'Inria Sans', sans-serif);
  font-size: 1rem;      /* 16px */
  line-height: 1.5;
  color: var(--_ch-color-dark);
  margin: 0 0 1.75rem;
}

.lg-concession-hero__text p          { margin: 0 0 0.5rem; }
.lg-concession-hero__text p:last-child { margin-bottom: 0; }

/* ── Groupe CTAs ────────────────────────────────────────────────── */

.lg-concession-hero__cta-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── CTA générique (pill) ───────────────────────────────────────── */

.lg-concession-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--ff-body, 'Inria Sans', sans-serif);
  font-size: 1rem;       /* 16px */
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  border-radius: 9999px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
}

/* CTA glass — configurateur */

.lg-concession-hero__cta--glass {
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(var(--_ch-cta-blur));
  -webkit-backdrop-filter: blur(var(--_ch-cta-blur));
  border: 1px solid var(--_ch-color-gray);
  color: var(--_ch-color-dark);
}

.lg-concession-hero__cta--glass:hover {
  background: rgba(0, 0, 0, 0.18);
}

.lg-concession-hero__cta-icon {
  flex-shrink: 0;
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  /* padding: 0.5125rem; */

  justify-content: center;
  align-items: center;
  /* gap: 0.625rem; */
  border-radius: 100%;
  background: var(--color-rouge-lg);
}
.lg-concession-hero__cta-icon svg {
  width: 0.5rem;
  height: 0.5rem;
  fill: var(--color-blanc);
}

/* CTA dark — stock */

.lg-concession-hero__cta--dark {
  background: var(--_ch-color-dark);
  color: #fff;
  border: 1px solid var(--_ch-color-dark);
}

.lg-concession-hero__cta--dark:hover {
  background: #2a2a2a;
  border-color: #2a2a2a;
}

/* ════════════════════════════════════════════════════════════════
   TABLETTE — min-width: 768px
   ════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {

  /* Liserets */
  .lg-concession-hero__liseret--mobile  { display: none;  }
  .lg-concession-hero__liseret--tablet  { 
    display: block; 
    /** Reset top */
    top: auto;
    bottom: 3.875rem;

    /* transform: translateY(-50%); */
    left: calc(var(--container-px) * -1);
    height: fit-content;
  }

  /* Hero : ratio légèrement plus large */
  .lg-concession-hero__hero img {
    aspect-ratio: 2 / 1;
    width: 100%;
  }

  /* Gallery card : 518×124px, 2px border, r=20px, offset droite */
  .lg-concession-hero__gallery-card {
    margin-top: -1.875rem;         /* -30px overlap hero */
    margin-left: calc(10% + 45%);
    transform: translateX(-50%);
    width: min(32.375rem, calc(100% - 2.5rem)); /* max 518px */
    border-radius: var(--_ch-radius-card);  /* 20px */
    border-width: 2px;
    padding: 0.875rem;             /* ~14px top/bottom */
    gap: 1rem;
    max-width: none;
    height: 7.75rem;              /* 124px fixed height */
  }

  .lg-concession-hero__gallery {
    gap: 1rem;                     /* 16px entre thumbs */
  }

  /* Thumbs : 10px radius */
  .lg-concession-hero__thumb {
    border-radius: var(--_ch-radius-thumb);
  }

  /* Card contenu : px=38px, py=24px, gap=45px */
  .lg-concession-hero__card {
    margin-top: 2.8125rem;        /* 45px gap gallery→card */
    padding: 1.5rem 2.375rem;     /* py=24px, px=38px */
    text-align: center;
  }

  /* CTAs : côte à côte en tablette */
  .lg-concession-hero__cta-group {
    flex-direction: row;
    justify-content: center;
    gap: 1.5rem;
  }

  .lg-concession-hero__cta {
    flex: 1 0 0;
  }

}

/* ════════════════════════════════════════════════════════════════
   DESKTOP — min-width: 1024px
   ════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {

  /* Section : grid 2 colonnes (card gauche | images droite) */
  .lg-concession-hero {
    display: grid;
    grid-template-areas: "card media";
    grid-template-columns: 612fr 726fr;  /* proportions Figma exactes */
    align-items: stretch;
    padding: 3.3125rem 0;             /* ~53px top (Figma: 53px), 64px sides */
    overflow: visible;
    width: fit-content;
  }

  .lg-concession-hero__card-svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* height: 100%; */
    z-index: -1;
  }

  /* Liserets */
  .lg-concession-hero__liseret--tablet  { display: none;  }
  .lg-concession-hero__liseret--desktop { 
    display: block; 
    top: calc(50% - 20px);
    /* transform: translateY(-50%); */
    /* left: calc(var(--container-px) * -1); */
    transform: translate(-50%, -50%);
    left: calc((1440px / 2) - 20px - var(--container-px));
    min-width: calc(1440px + var(--container-px));
  }

  /* Zone images → colonne droite */
  .lg-concession-hero__media {
    grid-area: media;
    position: relative;
    padding-bottom: 5.06rem;   /* espace pour gallery card qui dépasse (124px + 6px) */
    margin-left: -6%;
  }
  
  .lg-concession-hero__hero img {
    aspect-ratio: 726 / 361;   /* ratio exact Figma desktop */
    border-radius: var(--_ch-radius-card);
    max-width: none;
    object-position: left;
  }

  /* Gallery card : absolute en bas de la zone media */
  .lg-concession-hero__gallery-card {
    left: calc(10% + 45% - 3%);
    transform: translate(-50%, 50%);
    margin-left: 0;
    max-width: none;
    bottom: calc(0.875rem * 2);

    position: absolute;
    /* bottom: 1.375rem; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    width: min(32.375rem, 100%); /* 518px */
    margin-top: 0;               /* reset du flux (absolute) */
    border-radius: var(--_ch-radius-card);
    border-width: 2px;
    padding: 0.875rem;
  }

  .lg-concession-hero__gallery {
    gap: 1rem;
  }

  .lg-concession-hero__thumb {
    border-radius: var(--_ch-radius-thumb);
  }

  /* Card contenu → colonne gauche */
  .lg-concession-hero__card {
    grid-area: card;
    margin-top: 0;
    /*margin-right: 2rem;          /* léger gap visuel avec la colonne droite */
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2.25rem 3.125rem;  /* top: 36px (pour logo), left/right: 46px/50px */

    justify-content: center;

    backdrop-filter: none;
    background: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: inherit;
    box-shadow: none;
  }

  /* Logo concession : visible en desktop */
  .lg-concession-hero__logo {
    display: block;
    margin-bottom: 0.875rem;
  }

  .lg-concession-hero__logo img {
    height: 1.3125rem; /* 21px */
    width: auto;
    max-width: 13.5625rem; /* 217px */
  }

  /* Titre : 32px en desktop */
  .lg-concession-hero__title {
    font-size: 2rem;
    line-height: 1.4375; /* 46/32 */
    margin-bottom: 0.75rem;
  }

  /* Description : 18px en desktop */
  .lg-concession-hero__text {
    font-size: 1.125rem;
    line-height: 1.5;
    margin-bottom: 2rem;
  }

  /* CTAs : en ligne, largeur auto */
  .lg-concession-hero__cta-group {
    flex-direction: row;
    justify-content: flex-start;
    gap: 1.5rem;
  }

  .lg-concession-hero__cta {
    flex: 0 0 auto;
  }

  .lg-concession-hero__cta--glass,
  .lg-concession-hero__cta--dark {
    font-size: 1.125rem;  /* 18px */
  }

}

@media (min-width: 1440px) {
  .lg-concession-hero__liseret--desktop { 
    top: calc(50% - 38px);
  }
}