/* ══════════════════════════════════════════════════════════════
   SYSTÈME RESPONSIVE FLUIDE UNIVERSEL — JADMALL
   ──────────────────────────────────────────────────────────────
   Moteur ADDITIF (chargé APRÈS style.css sur chaque page) :
   variables + utilitaires fluides basés sur clamp()/min()/max()/
   minmax()/auto-fit, pensés pour fonctionner progressivement
   d'environ 150px à 7680px+ SANS dépendre uniquement de quelques
   breakpoints figés. Ne redéfinit aucune règle du thème existant
   (style.css, Bootstrap, owl.carousel, etc.) — vient compléter et
   protéger les zones qui en ont besoin, jamais tout remplacer.
   Inclus via inc/fluid_system_assets.php sur chaque page.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Espacements fluides (échelle à 4 paliers) */
  --sp-1: clamp(4px, 0.6vw, 8px);
  --sp-2: clamp(8px, 1.2vw, 14px);
  --sp-3: clamp(12px, 2vw, 24px);
  --sp-4: clamp(20px, 3.5vw, 44px);

  /* Typographie fluide — jamais illisible en dessous, jamais
     "affiche géante" au-dessus, même sur 8K */
  --fs-xs:   clamp(11px,   0.6vw + 0.55rem, 13px);
  --fs-sm:   clamp(12.5px, 0.7vw + 0.6rem,  14.5px);
  --fs-body: clamp(13.5px, 0.8vw + 0.65rem, 16px);
  --fs-lg:   clamp(15px,   1vw   + 0.7rem,  19px);
  --fs-xl:   clamp(18px,   1.6vw + 0.8rem,  26px);
  --fs-2xl:  clamp(22px,   2.4vw + 0.9rem,  36px);
  --fs-3xl:  clamp(26px,   3.4vw + 1rem,    48px);

  /* Conteneur central — plafonné sur écrans géants (2K/4K/8K),
     jamais plus étroit que le viewport disponible sur petit écran */
  --container-max: 1720px;
  --container-pad: clamp(12px, 3vw, 40px);

  /* Grille de cartes — pilotée par une largeur minimale acceptable,
     jamais par un nombre de colonnes codé en dur */
  --card-min: 220px;
  --card-min-sm: 150px;
}

/* ── Conteneur fluide générique ── */
.fluid-container {
  width: min(100% - (var(--container-pad) * 2), var(--container-max));
  margin-inline: auto;
  max-width: 100%;
}

/* ── Grille de cartes auto-adaptative ──
   Le nombre de colonnes découle de la largeur réelle disponible ET
   de la largeur minimale acceptable d'une carte — jamais figé. */
.fluid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min)), 1fr));
  gap: var(--sp-3);
  max-width: 100%;
}
.fluid-grid.fluid-grid-sm {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min-sm)), 1fr));
}

/* ── Protection universelle des images ──
   Jamais de déformation, jamais de débordement du cadre. */
.fluid-img,
.fluid-media img {
  max-width: 100%;
  height: auto;
  display: block;
}
.fluid-ratio {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: var(--ratio, 1 / 1);
  overflow: hidden;
  background: #f4f4f2;
}
.fluid-ratio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.fluid-ratio.contain img { object-fit: contain; }

/* ── Typographie fluide — classes utilitaires ── */
.fs-xs   { font-size: var(--fs-xs); }
.fs-sm   { font-size: var(--fs-sm); }
.fs-body { font-size: var(--fs-body); }
.fs-lg   { font-size: var(--fs-lg); }
.fs-xl   { font-size: var(--fs-xl); }
.fs-2xl  { font-size: var(--fs-2xl); }
.fs-3xl  { font-size: var(--fs-3xl); }

/* ── Rangée de boutons fluide ──
   Empile verticalement si l'espace manque, jamais de texte coupé,
   zone tactile minimale garantie sur mobile. */
.fluid-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.fluid-btn-row > * { min-height: 40px; }

/* ── Grille enfant protégée contre le débordement de contenu ──
   À poser sur l'ENFANT DIRECT d'une grille (min-width:auto est la
   cause n°1 des débordements de grille CSS, cf. audit NeoMaterna
   du même jour — même principe ici). */
.fluid-cell { min-width: 0; }

/* ── Écrans géants (2K/4K/8K) ──
   Le conteneur reste plafonné ; l'espace excédentaire devient
   marge latérale, jamais un agrandissement des composants. */
@media (min-width: 1920px) {
  :root { --container-max: 1880px; }
}
@media (min-width: 2560px) {
  :root { --container-max: 2100px; }
}
@media (min-width: 3840px) {
  :root { --container-max: 2400px; --card-min: 260px; }
}

/* ── Ultra-petits écrans (<360px) ──
   Resserre l'échelle d'espacement sans jamais rendre le texte
   illisible (plancher déjà garanti par clamp() ci-dessus). */
@media (max-width: 359px) {
  :root { --container-pad: 8px; --sp-3: 8px; --sp-4: 14px; }
}

/* ── Hauteur d'écran ──
   100dvh plutôt que 100vh pour les zones plein écran ajoutées via
   ce système (barres flottantes, panneaux) — évite le décalage dû
   aux barres d'adresse mobiles qui apparaissent/disparaissent. */
.fluid-full-height { min-height: 100dvh; }