/* ==========================================================================
   MEETennis — assets/formats-images.css
   LE FORMAT DES VISUELS — chargé après correctifs.css

   Le problème
   -----------
   Toutes les vignettes de l'app étaient cadrées en 16/9 avec
   object-fit: cover. C'est le bon réglage pour une photo de court ou une
   miniature YouTube ; c'est le mauvais pour ce que vend MEETennis :

     · les couvertures des FORMATIONS et des PACKS D'EXERCICES sont
       CARRÉES. Dans un cadre 16/9, cover rogne le haut et le bas — donc
       le titre, qui est précisément ce qu'on a mis sur la couverture.
     · les visuels des DOCUMENTS et des FICHES RESSOURCES sont en
       PORTRAIT (une page de PDF). Le rognage y est pire encore : il ne
       reste qu'une bande médiane où l'on ne reconnaît rien.

   La règle appliquée
   ------------------
   1. Le CADRE prend le format du visuel : .carre -> 1/1, .portrait -> 3/4.
      Quand le cadre a le format de l'image, cover ne rogne plus rien : on
      voit l'image entière ET la grille reste régulière, ce qui n'est pas
      négociable dans une liste de cartes.
   2. Sur la FICHE — produit ou ressource — on passe en contain sur un fond
      neutre. Là, une carte de plus ou de moins n'a pas à s'aligner sur ses
      voisines, et la garantie de voir l'image entière prime : un visuel
      hors norme (une capture 16/9 glissée parmi des couvertures carrées)
      s'affiche en entier plutôt que d'être coupé.

   Pourquoi un fichier à part : app-v2.css décrit la mise en page générale.
   Le format des visuels dépend, lui, de ce que MEETennis fabrique — le jour
   où les couvertures passent en 4/5, tout se règle ici, en trois lignes.
   ========================================================================== */


/* ==========================================================================
   1. LES CARTES
   ========================================================================== */

/* Marketplace : couverture carrée. C'est le format des visuels fournis par
   les éditeurs tiers, et le repli de tout ce qui n'est pas classé. */
.f-cover.carre,
.a-cover.carre{aspect-ratio:1/1}

/* Formations : visuel en PAYSAGE. Le cadre carré d'avant coupait les bords
   gauche et droit d'une image 16/9 — donc, sur une couverture de formation,
   le début et la fin du titre. */
.f-cover.paysage,
.a-cover.paysage{aspect-ratio:16/9}

/* Packs d'exercices : visuel en PORTRAIT, comme les documents. Même 3/4 que
   les fiches ressources, pour la même raison : une carte deux fois plus
   haute que large mange l'écran d'un téléphone. */
.f-cover.portrait{aspect-ratio:3/4}

/* Documents et fiches ressources : visuel en portrait. 3/4 plutôt que le
   A4 exact (1/1.414) : une carte deux fois plus haute que large mange
   l'écran d'un téléphone et fait disparaître le titre sous la ligne de
   flottaison. 3/4 laisse voir la page sans écraser le texte de la carte. */
.a-cover.portrait{aspect-ratio:3/4}

/* La rangée « Mes contenus » : mêmes couvertures, mêmes formats. Elle
   mélange formations et packs, donc les trois classes y servent. */
.pl-item .t.carre{aspect-ratio:1/1;height:auto}
.pl-item .t.paysage{aspect-ratio:16/9;height:auto}
.pl-item .t.portrait{aspect-ratio:3/4;height:auto}
.pl-item .t.carre img,
.pl-item .t.paysage img,
.pl-item .t.portrait img{width:100%;height:100%;object-fit:cover;display:block}

/* Un visuel manquant ne doit pas produire un cadre vide plus grand que la
   carte : le fond reste celui des vignettes du reste de l'app. */
.f-cover.carre,
.f-cover.paysage,
.f-cover.portrait,
.a-cover.carre,
.a-cover.paysage,
.a-cover.portrait{background:#e9e0d8}


/* ==========================================================================
   2. LA FICHE PRODUIT
   --------------------------------------------------------------------------
   Le carrousel et la couverture simple : cadre carré, image entière.
   Le fond est volontairement neutre et non blanc — une couverture claire
   sur fond blanc perd ses bords, et on ne sait plus où finit l'image.
   ========================================================================== */
.pd-gal-vue{aspect-ratio:1/1}
.pd-gal-vue img{object-fit:contain;background:var(--body-bg,#e9e6e3)}

.pd-cover{aspect-ratio:1/1;background:var(--body-bg,#e9e6e3);border-radius:12px;overflow:hidden}
.pd-cover img{width:100%;height:100%;object-fit:contain;display:block}


/* ==========================================================================
   3. LA FICHE RESSOURCE (document, article)
   --------------------------------------------------------------------------
   .d-cover sert aux DEUX familles de fiches : un article de blog (photo en
   16/9, qui doit le rester) et un document (page de PDF, en portrait). La
   classe .portrait est donc posée par resource.php, uniquement sur les
   documents. Viser .d-cover tout court mettrait les articles du blog en
   portrait, ce qui remplacerait un défaut par un autre.
   ========================================================================== */
.d-cover.portrait{aspect-ratio:3/4;background:var(--body-bg,#e9e6e3)}
.d-cover.portrait img{width:100%;height:100%;object-fit:contain;display:block}

/* Sur grand écran, la fiche est en deux colonnes (shop-desktop.css) : le
   visuel n'a plus besoin de toute la largeur, et une couverture carrée
   étirée sur 520 px repousse le prix sous la ligne de flottaison. */
@media (min-width:900px){
  .pd > .pd-cover,
  .pd > .pd-gal{max-width:420px}
  .d-cover.portrait{max-width:380px;margin-left:auto;margin-right:auto}
}