/* ==========================================================================
   webpunivers — Section « Nos univers »
   Titre aligné sur la conv. PSD (Bai Jamjuree Light, brun #433b30, gauche)
   Grille Bento avec ratio fidèle au mockup Pencil
   ========================================================================== */

/* === Wrapper section ===
   Aligné sur webpselection pour transition douce entre les 2 sections.
*/
.webpunivers-section {
    width: 100%;
    /* Fond blanc (PSD PB-SITE-HOME-V3, zone « Nos univers »), pas le beige. */
    background: var(--pb-color-white, #ffffff);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: clamp(32px, 4vh, 72px) 0;
}

.webpunivers-section__container {
    /* Suit le conteneur du site : le token vaut 1820px, ramené à 1520px
       au-delà de 1520px de large (plafond du 10/09/2026, tâche 16426).
       Sans cette variable, la section restait 300px plus large que le
       header et le footer sur grand écran. Repli 1820 si le thème n'est
       pas chargé. */
    max-width: var(--pb-content-max, 1820px);
    margin: 0 auto;
    padding: 0 clamp(16px, 2.65vw, 51px);
}

/* === Titre — aligné sur webpselection pour cohérence === */
.webpunivers-section__title {
    /* Typo commune via .pb-section-title (thème). Propre : espacement sous le titre. */
    margin: 0 0 clamp(16px, 1.5vw, 24px);
}
/* Palier titre (cohérent avec webpselection) : sous 992px le titre descend d'un
   cran dans l'échelle, le token portant les deux paliers (40px de 768 à 991,
   30px en dessous). */
@media (max-width: 991.98px) {
    .webpunivers-section__title { font-size: var(--pb-text-3xl); }
}

/* Surcharge .pb-categories-grid quand utilisé par le module (classe additionnelle .webpunivers-grid).
   Hauteurs FIXES (height auto serait dicté par les images plein-poids). */
.webpunivers-grid {
  --pb-uni-row-h: 280px;  /* fallback pour layouts sans cap */
  display: grid;
  gap: var(--pb-space-4, 1rem);
}

/* Cap global : tous les layouts ont une hauteur fixée selon le nombre de rows visuelles
   pour éviter que les images natives imposent leur taille.
   Aligné sur Nos Agences : desktop bento à partir de 1200, slider en dessous. */
@media (min-width: 1200px) {
  /* TOUS les layouts : ratio mockup PSD 1920/1131 + gap entre cards */
  .webpunivers-grid {
    width: 100% !important;
    aspect-ratio: 1920 / 1131 !important;
    height: auto !important;
    max-height: 80vh !important;  /* cap 80vh = 100vh − menu sticky (retours Pao 2026-06-10) */
    max-width: 100% !important;
    /* Gap entre tuiles = 5px (PSD V3 : écart exact entre les calques du bento,
       mesuré 5px en H et V). Avant 16px → bien trop large (retour Pao A20). */
    gap: 5px !important;
  }

  /* Layout pencil-exact / pencil-masonry-5 / auto à 5 cards : 2 rangées égales */
  .webpunivers-grid[data-layout="pencil-exact"],
  .webpunivers-grid[data-layout="pencil-masonry-5"],
  .webpunivers-grid[data-layout="auto"]:has(.webpunivers-card:nth-child(5):last-child) {
    grid-template-rows: 1fr 1fr !important;
    grid-auto-rows: 1fr !important;
  }

  .webpunivers-grid[data-layout="2-colonnes"],
  .webpunivers-grid[data-layout="grid-3x2"] {
    /* N rangées visuelles selon le nombre d'items */
    grid-template-rows: repeat(var(--webpunivers-grid-rows, 2), 1fr) !important;
    grid-auto-rows: 1fr !important;
    height: clamp(380px, calc(var(--webpunivers-grid-rows, 2) * 28vh), 85vh);
    max-width: 100%;
  }

  /* Custom : aspect-ratio cells carrées + cap 85vh */
  .webpunivers-grid[data-layout="custom"] {
    aspect-ratio: var(--webpunivers-grid-cols, 12) / var(--webpunivers-grid-rows, 6);
    grid-template-rows: repeat(var(--webpunivers-grid-rows, 6), 1fr);
    max-height: 85vh;
    max-width: calc(85vh * var(--webpunivers-grid-cols, 12) / var(--webpunivers-grid-rows, 6));
    width: 100%;
    margin-inline: auto;
  }
}

/* Les images doivent absolument être contenues dans leur tuile */
.webpunivers-card {
  overflow: hidden;
}
.webpunivers-card .pb-cat-item__link {
  height: 100%;
}
.webpunivers-card .pb-cat-item__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Badge en surimpression --- */
.webpunivers-card {
  position: relative;
}

/* Lisibilité texte sur image — SCRIM SOLIDE uni (retours Sergio 12/06 : le
   gradient ne se voyait pas, le titre tombait dans la zone transparente).
   Best practice « scrim » (Material) : panneau translucide uni derrière le
   bloc texte uniquement → contraste constant sur tout le texte, sans dénaturer
   le reste de la photo (pas de voile plein écran, pas de dégradé). */
.webpunivers-card__overlay {
  /* PSD V3 : scrim noir UNIFORME sur toute l'image (calque "Calque 32",
     opacité 94/255 ≈ 37%), pas un dégradé en bas. Le bloc texte (titre Prata
     + « Découvrez ») est CENTRÉ H+V dans la tuile (calques texte centrés). */
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pb-space-2, 0.5rem);
  text-align: center;
  background: rgba(0, 0, 0, 0.37);
}

/* Titre + CTA centrés (override de l'alignement gauche du thème). */
.webpunivers-card .webpunivers-card__title {
  text-align: center;
  margin: 0;
  /* PSD V3 : label bento en Prata ITALIQUE (cf. calque « Bois massif »). */
  font-style: italic;
}
/* Renfort accessibilité : ombre portée légère pour décoller le texte du scrim. */
.webpunivers-card__title,
.webpunivers-card__subtitle {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.webpunivers-card__badge {
  position: absolute;
  top: var(--pb-space-4, 1rem);
  right: var(--pb-space-4, 1rem);
  z-index: 2;
  background: var(--pb-color-accent, #ff7100);
  color: #fff;
  padding: 0.35rem 0.75rem;
  font-family: var(--pb-font-sans, sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Sous-titre sous le titre de la card */
.webpunivers-card__subtitle {
  font-family: var(--pb-font-sans, sans-serif);
  font-size: 0.9rem;
  color: #fff;
  margin: 0 0 var(--pb-space-2, 0.5rem);
  opacity: 0.9;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* CTA — style sobre identique au slider (DÉCOUVREZ underline blanc, hover olive) */
/* Composant .cta.cta--link (cf. thème _cta.css). La classe thème .pb-cat-link
   (soulignement + flèche →) a été RETIRÉE du markup : plus besoin de la
   neutraliser à coups de !important. Couleur = blanc (image sombre). */
/* .webpunivers-card__cta : plus aucune règle propre — couleur via .cta--on-dark,
   taille (--pb-fs-cta = 20px) / graisse / majuscules / trait / hover via
   .cta + .cta--link. La classe reste dans le markup comme point d'ancrage. */

/* Survol accent → centralisé dans .cta--link:hover / .cta-zone:hover .cta--link
   (_cta.css). La carte porte .cta-zone (cf. grid.tpl). */

/* ==========================================================================
   Adaptations par nombre de cards (desktop ≥ 1200px, aligné Nos Agences)
   ========================================================================== */
@media (min-width: 1200px) {

  /* ============================================================
     Template "custom" — layout libre dessiné via GridStack (BO)
     Le PHP injecte --webpunivers-grid-cols et applique des grid-column/row inline.
     ============================================================ */
  .webpunivers-grid[data-layout="custom"] {
    grid-template-columns: repeat(var(--webpunivers-grid-cols, 12), 1fr);
    gap: 0.5rem;
  }
  /* Items non-positionnés (en plus du layout JSON) tombent en flow auto sous la grille */
  .webpunivers-grid[data-layout="custom"] .webpunivers-card:not(.webpunivers-card--positioned) {
    grid-column: span var(--webpunivers-grid-cols, 12);
    min-height: 280px;
  }

  /* ============================================================
     Template "pencil-exact" — reproduction fidèle du mockup Pencil
     Structure :
     +-------+---------------+-------+
     |       |    Bois M.    |       |
     |  T.   +-------+-------+  P.E. |
     |       | Parq. | Déc.  |       |
     +-------+-------+-------+-------+
     Ratios mesurés sur le PSD : 546 / 410 / 410 / 544 (≈ 1.33 / 1 / 1 / 1.33)
     ============================================================ */
  .webpunivers-grid[data-layout="pencil-exact"] {
    grid-template-columns: 1.33fr 1fr 1fr 1.33fr;
    grid-template-rows: var(--pb-uni-row-h) var(--pb-uni-row-h);
    grid-template-areas:
      "card1 card2 card2 card5"
      "card1 card3 card4 card5";
    /* Fidélité PSD totale (choix Sergio 27/06) : la section prend la hauteur
       réelle du mockup (aspect-ratio 1920/1131) sans le cap 80vh de Pao. */
    max-height: none !important;
  }
  .webpunivers-grid[data-layout="pencil-exact"] .webpunivers-card:nth-child(1) { grid-area: card1; }
  .webpunivers-grid[data-layout="pencil-exact"] .webpunivers-card:nth-child(2) { grid-area: card2; }
  .webpunivers-grid[data-layout="pencil-exact"] .webpunivers-card:nth-child(3) { grid-area: card3; }
  .webpunivers-grid[data-layout="pencil-exact"] .webpunivers-card:nth-child(4) { grid-area: card4; }
  .webpunivers-grid[data-layout="pencil-exact"] .webpunivers-card:nth-child(5) { grid-area: card5; }

  /* Labels = PSD : Prata italique 55px / « Découvrez » 22px (le slider est en
     réalité à 55px, donc l'alignement slider + PSD coïncident). Palier xl réduit. */
  .webpunivers-card .webpunivers-card__title {
    font-size: 50px;
    line-height: 1.05;
  }
  /* CTA taille = --pb-fs-cta (20px), héritée de .cta — plus d'override ici. */

  /* ============================================================
     Template "pencil-masonry-5" — 1 grande G | 2x2 D (variante)
     ============================================================ */
  .webpunivers-grid[data-layout="pencil-masonry-5"] {
    grid-template-columns: 1.5fr 1fr 1fr;
    grid-template-rows: var(--pb-uni-row-h) var(--pb-uni-row-h);
  }
  .webpunivers-grid[data-layout="pencil-masonry-5"] .webpunivers-card:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  /* ============================================================
     Template "2-colonnes" — cards égales, 2 par ligne
     ============================================================ */
  .webpunivers-grid[data-layout="2-colonnes"] {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: calc(var(--pb-uni-row-h) * 1.4);
  }

  /* ============================================================
     Template "grid-3x2" — 3 colonnes uniformes
     ============================================================ */
  .webpunivers-grid[data-layout="grid-3x2"] {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: var(--pb-uni-row-h);
  }

  /* ============================================================
     Template "auto" — adaptatif via :has(:nth-child(N))
     ============================================================ */
  .webpunivers-grid[data-layout="auto"]:has(.webpunivers-card:nth-child(1):last-child) {
    grid-template-columns: 1fr;
    grid-auto-rows: calc(var(--pb-uni-row-h) * 1.7);
  }
  .webpunivers-grid[data-layout="auto"]:has(.webpunivers-card:nth-child(2):last-child) {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: calc(var(--pb-uni-row-h) * 1.7);
  }
  .webpunivers-grid[data-layout="auto"]:has(.webpunivers-card:nth-child(3):last-child) {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: var(--pb-uni-row-h) var(--pb-uni-row-h);
  }
  .webpunivers-grid[data-layout="auto"]:has(.webpunivers-card:nth-child(3):last-child) .webpunivers-card:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .webpunivers-grid[data-layout="auto"]:has(.webpunivers-card:nth-child(4):last-child) {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: var(--pb-uni-row-h) var(--pb-uni-row-h);
  }
  .webpunivers-grid[data-layout="auto"]:has(.webpunivers-card:nth-child(4):last-child) .webpunivers-card:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .webpunivers-grid[data-layout="auto"]:has(.webpunivers-card:nth-child(4):last-child) .webpunivers-card:nth-child(2),
  .webpunivers-grid[data-layout="auto"]:has(.webpunivers-card:nth-child(4):last-child) .webpunivers-card:nth-child(3) {
    grid-column: 2;
  }
  .webpunivers-grid[data-layout="auto"]:has(.webpunivers-card:nth-child(4):last-child) .webpunivers-card:nth-child(4) {
    grid-column: 3;
    grid-row: 1 / 3;
  }
  .webpunivers-grid[data-layout="auto"]:has(.webpunivers-card:nth-child(5):last-child) {
    grid-template-columns: 1.5fr 1fr 1fr;
    grid-template-rows: var(--pb-uni-row-h) var(--pb-uni-row-h);
  }
  .webpunivers-grid[data-layout="auto"]:has(.webpunivers-card:nth-child(5):last-child) .webpunivers-card:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .webpunivers-grid[data-layout="auto"]:has(.webpunivers-card:nth-child(6)) {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: var(--pb-uni-row-h);
  }
  .webpunivers-grid[data-layout="auto"]:has(.webpunivers-card:nth-child(6)) .webpunivers-card {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Palier xxl (>=1400) : labels au PSD = Prata italique 55px / « Découvrez » 22px
   (le slider est lui aussi à 55px, cf _hero-fold.css). */
@media (min-width: 1400px) {
  .webpunivers-card .webpunivers-card__title {
    font-size: var(--pb-fs-title); /* 55px → 50px (Revue RDV 30/06 #149) */
  }
  /* CTA taille = --pb-fs-cta (20px), héritée de .cta — plus d'override ici. */
}

/* ==========================================================================
   Mobile + tablette (<1200px) — Slider horizontal scroll-snap
   Bascule alignée sur Nos Agences (cohérence visuelle entre les sections home)
   ========================================================================== */
@media (max-width: 1199.98px) {
  .webpunivers-section {
    padding: clamp(32px, 4vh, 72px) 0;
  }

  .webpunivers-section__container {
    padding: 0;
  }

  .webpunivers-section__title {
    padding-inline: 16px;
    margin-bottom: 12px;
  }

  /* La grille devient un slider flex */
  .webpunivers-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: 16px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    aspect-ratio: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    max-width: none !important;
    margin-inline: 0 !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    gap: 12px !important;
    padding-inline: 16px !important;
    padding-block-end: 16px !important;
  }

  .webpunivers-grid::-webkit-scrollbar {
    display: none;
  }

  .webpunivers-grid .webpunivers-card {
    /* Taille de card adaptative selon viewport (pattern webpinspiration) :
       3 visibles entre 768-1199, 2 entre 576-767, 1.4 en dessous (aperçu suivante). */
    flex: 0 0 calc((100% - 2 * 12px) / 3) !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    aspect-ratio: 4 / 5 !important;    /* Card portrait douce, friendly mobile */
    height: auto !important;
    min-height: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;
  }

  .webpunivers-card__title {
    font-size: 1.25rem;
  }

  .webpunivers-card__subtitle {
    font-size: 0.8rem;
  }

  .webpunivers-card__badge {
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.6rem;
    padding: 0.2rem 0.5rem;
  }

}

/* ==========================================================================
   Adaptation taille cards selon viewport (carrousel mobile) :
   - 768-1199 : 3 cards visibles (pattern webpinspiration)
   - 576-767  : 2 cards visibles
   - <576     : 1.4 cards (aperçu de la suivante)
   ========================================================================== */
@media (max-width: 767.98px) {
  .webpunivers-grid .webpunivers-card {
    flex: 0 0 calc((100% - 12px) / 2) !important;  /* 2 cards */
  }
}

@media (max-width: 575.98px) {
  .webpunivers-grid .webpunivers-card {
    flex: 0 0 70% !important;  /* 1.4 cards (aperçu de la suivante) */
  }
}

/* ==========================================================================
   Dots indicateurs — style identique à webpselection (cohérence visuelle
   entre les 2 sections home qui passent en carrousel mobile)
   ========================================================================== */
.webpunivers-dots {
    display: none;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding: 0 clamp(16px, 2.65vw, 51px);
}

@media (max-width: 1199.98px) {
    .webpunivers-dots { display: flex; }
}

.webpunivers-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--pb-color-surface, #d8d3c5);
    opacity: 0.5;
    cursor: pointer;
    transition: width 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
}

.webpunivers-dot:hover,
.webpunivers-dot:focus-visible {
    opacity: 0.8;
    outline: none;
}

.webpunivers-dot.is-active {
    width: 24px;
    border-radius: 4px;
    background: var(--pb-color-primary, #42491f);
    opacity: 1;
}

/* ==========================================================================
   Responsive mobile (< 576px) — 1 colonne empilée
   ========================================================================== */
@media (max-width: 575.98px) {
  .webpunivers-grid {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    grid-auto-rows: 240px;
    gap: var(--pb-space-3, 0.75rem);
  }
  .webpunivers-grid .webpunivers-card {
    grid-column: 1;
    grid-row: auto;
    grid-area: auto;
    min-height: 240px;
  }
  .webpunivers-card__badge {
    top: 0.75rem;
    right: 0.75rem;
    font-size: 0.65rem;
    padding: 0.25rem 0.6rem;
  }
}

/* Paliers responsive du titre : définis plus haut (l.30-36, alignés sur
   webpselection = 40px tablette / 30px mobile). L'ancien doublon 30/20px qui
   vivait ici écrasait ces valeurs par ordre source → titre à 20px en mobile,
   sous le corps de texte. Retiré le 15/07 (revue intégrateur). */