/* ==========================================================================
   p-detail.css — Mise en page fiche véhicule occasion (2 colonnes)
   Propriétaire UNIQUE de : largeur, colonnes, rythme vertical, sticky.
   Les partials ne gèrent plus leur propre container dans ce contexte.
   ========================================================================== */

:root {
  --uc-gap: 28px;            /* rythme vertical entre blocs gauche */
  --uc-col-gutter: 32px;     /* gouttière entre colonnes */
  --uc-aside-width: 384px;   /* largeur colonne droite (desktop) */
  --uc-sticky-top: 24px;     /* offset sticky, corrigé au runtime (cf. script view) */
}

/* ---- Conteneur 2 colonnes (max-width/padding/margin hérités de global.css) ---- */
.page-container {
  display: flex;
  flex-direction: column;   /* mobile : empilé */
}

/* ---- Colonne gauche ---- */
.p-left-side {
  width: 100%;
  min-width: 0;             /* évite le piège min-content du flex */
}

/* Rythme vertical unique entre les blocs */
.p-left-side > * + * { margin-top: var(--uc-gap); }

/* Neutralisation des containers internes des partials */
.p-left-side .container-max {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* py-2 / py-5 Bootstrap = !important -> surcharge en !important */
.p-left-side .faq-content-section,
.p-left-side .warranty-card-block {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ---- Colonne droite ---- */
.p-right-side { width: 100%; }

/* ---- Desktop : 2 colonnes + sticky ---- */
@media (min-width: 1024px) {
  .page-container {
    flex-direction: row;
    align-items: flex-start;          /* indispensable au sticky */
    gap: var(--uc-col-gutter);
  }

  .p-left-side {
    flex: 1 1 auto;
    max-width: 956px;
    width: auto;
  }

  .p-right-side {
    flex: 0 0 var(--uc-aside-width);
    width: var(--uc-aside-width);
    position: sticky;
    top: var(--uc-sticky-top);
    align-self: flex-start;
  }

  .p-right-side .pr-container { max-width: 100%; }
}

/* ---- Mobile (< 1024px) : Réorganisation du flux ----
   1. Galerie photos
   2. Bloc prix / titre avec modèle / financement
   3. Caractéristiques et autres blocs en dessous
   ==================================================== */
@media (max-width: 1023px) {
  .page-container {
    display: flex;
    flex-direction: column;
    gap: var(--uc-gap);
  }

  .p-left-side,
  .p-right-side {
    display: contents;
  }

  .p-left-side > * + * {
    margin-top: 0;
  }

  /* Ordre par défaut pour tous les blocs */
  .p-left-side > *,
  .p-right-side > * {
    order: 10;
  }

  /* 1er lieu : Galerie photos */
  .p-left-side > .franck-used-cars-gallery,
  .p-left-side > .used-car-vehicle-photo-gallery,
  .p-left-side > [class*="used-cars-gallery"],
  .p-left-side > [class*="photo-gallery"] {
    order: 1 !important;
  }

  /* 2e lieu : Bloc prix, titre avec modèle, financement */
  .p-right-side > .franck-used-car-price-cta-box,
  .p-right-side > .used-car-price-cta-box,
  .p-right-side > .used-car-price-and-cta-box,
  .p-right-side > [class*="price-cta-box"],
  .p-right-side > [class*="price-and-cta-box"] {
    order: 2 !important;
  }

  /* 3e lieu : Caractéristiques du véhicule */
  .p-left-side > .fucc,
  .p-left-side > .franck-used-cars-characteristics,
  .p-left-side > [class*="characteristics"] {
    order: 3 !important;
  }

  /* 4e lieu : Bloc contact concession */
  .p-right-side > .franck-used-cars-bloc-contact,
  .p-right-side > [class*="used-cars-bloc-contact"] {
    order: 4 !important;
  }

  /* 5e lieu : Bannière VO */
  .p-left-side > .fucdb,
  .p-left-side > .franck-used-cars-detail-banner,
  .p-left-side > [class*="detail-banner"] {
    order: 5 !important;
  }

  /* 6e lieu : Texte SEO */
  .p-left-side > .fucst,
  .p-left-side > .franck-used-cars-text-seo,
  .p-left-side > [class*="text-seo"] {
    order: 6 !important;
  }

  /* 7e lieu : Équipements et options */
  .p-left-side > section:has(.acc-equip),
  .p-left-side > .equipment-and-options,
  .p-left-side > [class*="equipment-and-options"] {
    order: 7 !important;
  }

  /* 8e lieu : Informations techniques */
  .p-left-side > section:has(.acc-tech),
  .p-left-side > .technical-information,
  .p-left-side > [class*="technical-information"] {
    order: 8 !important;
  }

  /* 9e lieu : Simulation Financement CGI */
  .p-left-side > section:has(.acc-financing),
  .p-left-side > .cgi-finance,
  .p-left-side > .financing-widget,
  .p-left-side > [class*="cgi-finance"],
  .p-left-side > [class*="financing-widget"] {
    order: 9 !important;
  }

  /* 10e lieu : Questions sur ce modèle / contact */
  .p-left-side > section:has(.cta-block),
  .p-left-side > .model-query,
  .p-left-side > [class*="model-query"] {
    order: 10 !important;
  }
}