/*
 * Bloc : lg/marque-finder
 *
 * Approche mobile-first — 2 breakpoints :
 *   tablet  @media (min-width: 768px)
 *   desktop @media (min-width: 1024px)
 *
 * Layout :
 *   mobile  — colonne, image order:-1 dans __content, carte chevauche image (-6rem)
 *   tablet  — image absolute depuis __content (right:0, width:82%, z-index:-1)
 *   desktop — image absolute depuis __wrapper (right:0, width:62%, z-index:-1)
 *             __content passe en static → l'image « échappe » vers __wrapper
 *
 * Sur les 3 formats, la colonne gauche est une carte glassmorphisme.
 * Le CTA configurateur = glass/outline, le CTA stock = sombre plein.
 *
 * BEM  : .lg-marque-finder
 *        __wrapper
 *        __badge-group, __badge, __badge-bar--1…5
 *        __title, __title--colored
 *        __bar
 *        __content, __left, __right
 *        __subtitle, __text
 *        __cta-group, __cta, __cta--primary, __cta--outline, __cta-icon
 *        __media, __img
 *        __placeholder
 */

/* ================================================================
   Badge
   ================================================================ */

.lg-marque-finder__badge-group {
  margin-bottom: 1.25rem;
}

.lg-marque-finder__badge {
  font-size: var(--fs-body-sm);
}

@media (min-width: 1024px) {
  .lg-marque-finder__badge-group {
    margin-bottom: 1.5rem;
  }
}

/* ================================================================
   Titre principal — mobile-first
   ================================================================ */

.lg-marque-finder__title {
  display: contents; /* mobile : text + span se comportent comme blocs directs */
  max-width: 20.375rem;
  font-family: var(--ff-heading);
  font-size: 1.625rem;  /* 26px */
  font-weight: var(--fw-bold);
  line-height: 1.23;
  text-transform: uppercase;
  color: var(--color-noir-primary);
  margin: 0 0 0.5rem;
}

.lg-marque-finder__title--colored {
  color: var(--color-rouge-lg);
}

@media (min-width: 768px) {
  .lg-marque-finder__title {
    display: block;
    max-width: none;
    font-size: 2rem;    /* 32px — Figma tablet */
    line-height: 1.125; /* 36px */
  }
}

@media (min-width: 1024px) {
  .lg-marque-finder__title {
    font-size: 3.125rem; /* 50px — Figma 4131:4049 */
    line-height: 1.36;   /* 68px */
    max-width: 46%;
    text-wrap: auto;
  }
}

/* ================================================================
   Barre rouge décorative
   ================================================================ */

.lg-marque-finder__bar {
  display: block;
  width: 80px;
  height: 3px;
  background-color: var(--color-rouge-lg);
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .lg-marque-finder__bar {
    width: 120px;
    margin-bottom: 3rem;
  }
}

/* ================================================================
   Layout — __content ancre l'image en tablet, __wrapper en desktop
   ================================================================ */

.lg-marque-finder__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Tablet : __content = ancre pour l'image absolute */
@media (min-width: 768px) {
  .lg-marque-finder__content {
    position: relative;
    isolation: isolate; /* stacking context : z-index:-1 de __right reste interne */
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
}

/* Desktop : __content perd son positionnement → __right « échappe » vers __wrapper */
@media (min-width: 1024px) {
  .lg-marque-finder__content {
    position: static;
    isolation: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
}

/* ================================================================
   Wrapper — ancre de positionnement de l'image (desktop uniquement)
   Sur tablet, c'est __content qui ancre. Sur desktop, __content
   passe en static et l'image remonte se positionner depuis __wrapper.
   ================================================================ */

@media (min-width: 1024px) {
  .lg-marque-finder__wrapper {
    position: relative;
    isolation: isolate;
  }
}

/* ================================================================
   Colonne gauche — carte glassmorphisme sur tous les formats
   ================================================================ */

/* Base mobile — Figma 4132:8894 : carte centrée, chevauche le bas de l'image */
.lg-marque-finder__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background: rgba(190, 190, 190, 0.3);
  border: 2px solid #cfcfcf;
  border-radius: 20px;
  padding: 1.5rem; /* 24px — Figma 4132:8894 */
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 0 30px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1; /* au-dessus de l'image */
  margin-top: -6rem; /* chevauchement bas de l'image — Figma : ~71px */
}

/* Tablet */
@media (min-width: 768px) {
  .lg-marque-finder__left {
    position: relative;
    z-index: 1;
    flex: none;
    width: 20.5rem;
    margin-top: 4.94rem;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding: 1.5rem;
  }
}

/* Desktop — Figma 4131:4040 : carte w:704px sur conteneur ~1280px ≈ 55% */
@media (min-width: 1024px) {
  .lg-marque-finder__left {
    position: relative;
    z-index: 1;
    flex: none;
    width: 55%;
    margin-top: 0;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding: 2rem; /* 4131:4040 : offset intérieur */
  }
}

/* ================================================================
   Colonne droite — image positionnée en arrière-plan
   ================================================================ */

/* Mobile : image avant la carte via order:-1 dans __content flex column */
.lg-marque-finder__right {
  order: -1;
  flex: 1 1 0;
  min-width: 0;
}

/* Tablet : absolute depuis __content, 82% droite — Figma 4132:7741 */
@media (min-width: 768px) {
  .lg-marque-finder__right {
    position: absolute;
    top: 0;
    right: 0;
    width: 82%;
    height: 100%;
    z-index: -1;
    order: 0;
    flex: none;
  }
}

/* Desktop : absolute depuis __wrapper (échappé de __content), 62% — Figma 4133:10662 */
@media (min-width: 1024px) {
  .lg-marque-finder__right {
    position: absolute;
    top: 0;
    right: 0;
    width: 62%;
    height: 100%;
    z-index: -1;
  }
}

/* ================================================================
   Image responsive
   ================================================================ */

.lg-marque-finder__media {
  display: block;
  overflow: hidden;
  border-radius: 20px;
  width: 100%;
  height: auto; /* mobile : hauteur naturelle de l'image */
}

.lg-marque-finder__img {
  display: block;
  width: 100%;
  height: auto; /* mobile : proportions naturelles */
}

/* Tablet + desktop : pleine hauteur, crop Figma h[153.6%] top[-26.8%] → center 27% */
@media (min-width: 768px) {
  .lg-marque-finder__media {
    height: 100%;
  }

  .lg-marque-finder__img {
    height: 100%;
    object-fit: cover;
    object-position: center 27%;
  }
}

/* ================================================================
   Sous-titre accrocheur
   ================================================================ */

.lg-marque-finder__subtitle {
  display: block;
  font-family: var(--ff-heading);
  font-size: 1.355rem; 
  font-weight: var(--fw-bold);
  line-height: 1.273; /* 28px */
  text-transform: uppercase;
  color: var(--color-noir-primary);
  margin: 0 0 0.875rem;
}

/* Desktop — Figma 4131:4059 : 36px / 40px */
@media (min-width: 1024px) {
  .lg-marque-finder__subtitle {
    font-size: 2.25rem;  /* 36px */
    line-height: 1.111;  /* 40px */
  }
}

.lg-marque-finder__subtitle .colored,
.lg-marque-finder__subtitle strong {
  color: var(--color-rouge-lg);
  font-weight: inherit;
}

/* ================================================================
   Texte descriptif (wysiwyg)
   ================================================================ */

.lg-marque-finder__text {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 0.875rem;
}

/* Desktop — Figma 4131:4060 : 24px / 31px */
@media (min-width: 1024px) {
  .lg-marque-finder__text {
    font-size: 1.5rem;   /* 24px */
    line-height: 1.292;  /* 31px */
    margin: 0 0 1.5rem;
  }
}

.lg-marque-finder__text p {
  margin: 0 0 0.75rem;
}

.lg-marque-finder__text p:last-child {
  margin-bottom: 0;
}

/* ================================================================
   CTAs
   mobile + tablet : colonne, glass configurateur + sombre stock
   desktop         : ligne, même styles (glass + sombre), taille 24px
   ================================================================ */

/* Base mobile */
.lg-marque-finder__cta-group {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: stretch;
  width: 100%;
}

/* Tablet */
/* Tablet — Figma 4132:8052 : CTAs alignés à gauche */
@media (min-width: 768px) {
  .lg-marque-finder__cta-group {
    align-items: flex-start;
    width: 100%;
  }
}

/* Desktop — Figma 4131:4051 : flex-row, gap 24px */
@media (min-width: 1024px) {
  .lg-marque-finder__cta-group {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    width: auto;
  }
}

/* Base CTA mobile */
.lg-marque-finder__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--ff-heading);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  text-decoration: none;
  border-radius: 2000px;
  border: 2px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}

/* Tablet */
@media (min-width: 768px) {
  .lg-marque-finder__cta {
    width: 16rem;
  }
}

/* Desktop — Figma 4131:4052/4056 : 24px, largeur auto */
@media (min-width: 1024px) {
  .lg-marque-finder__cta {
    width: auto;
    font-size: 1.5rem; /* 24px */
  }
}

/* ——— CTA Configurateur : glass (tous formats) ——— */
/* Figma : backdrop-blur-15px, bg rgba(0,0,0,0.1), border #979797, text #141414 */
.lg-marque-finder__cta--primary {
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  background-color: rgba(0, 0, 0, 0.1);
  color: var(--color-noir-primary);
  border: 1px solid #979797;
  gap: 0.5rem;
}

.lg-marque-finder__cta--primary:hover,
.lg-marque-finder__cta--primary:focus-visible {
  background-color: rgba(0, 0, 0, 0.2);
  border-color: #555555;
}

/* Tablet : width fixe */
@media (min-width: 768px) {
  .lg-marque-finder__cta--primary {
    width: 16rem;
  }
}

/* Desktop : width auto */
@media (min-width: 1024px) {
  .lg-marque-finder__cta--primary {
    width: auto;
    padding: 0.75rem 1rem; /* px-16 py-12 — Figma 4131:4052 */
  }
}

/* ——— CTA Stock : fond sombre (tous formats) ——— */
/* Figma : bg #141414, text blanc, pas de border visible */
.lg-marque-finder__cta--outline {
  background-color: #141414;
  color: var(--color-blanc);
  border-color: transparent;
}

.lg-marque-finder__cta--outline:hover,
.lg-marque-finder__cta--outline:focus-visible {
  background-color: #000000;
  color: var(--color-blanc);
}

/* Tablet : width fixe */
@media (min-width: 768px) {
  .lg-marque-finder__cta--outline {
    width: 16rem;
    padding: 0.75rem 1rem;
  }
}

/* Desktop : width auto, padding-x plus généreux — Figma 4131:4056 : px-24 py-12 */
@media (min-width: 1024px) {
  .lg-marque-finder__cta--outline {
    width: auto;
    padding: 0.75rem 1.5rem;
  }
}

/* ——— Icône flèche : visible sur tous les formats ——— */
.lg-marque-finder__cta-icon {
  display: inline-flex;
  flex-shrink: 0;
}

/* ================================================================
   Placeholder éditeur Gutenberg
   ================================================================ */

.lg-marque-finder__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background-color: #f4f4f4;
  border-radius: 20px;
  color: #979797;
  font-size: 0.875rem;
  text-align: center;
  padding: 2rem;
}