/* ======================================================================
   shop-worn.css  ·  le maillot Paris montre porte
   ----------------------------------------------------------------------
   Fichier separe volontairement. shop.css, shop2026.css et style.css sont
   retouchees par d'autres passes en parallele ; tout ce qui concerne la
   presentation du maillot porte vit donc ici, et nulle part ailleurs.

   Les deux photos sont recadrees en carre des la generation, par
   tools/optimize_worn_photos.py. La grille n'a donc aucun rognage a faire :
   les vignettes s'alignent d'elles-memes malgre des sources de proportions
   differentes (1270x1068 et 802x952). C'est le recadrage choisi a la main
   qui garantit que le polo et les visages restent dans le cadre, au lieu
   d'un object-fit qui coupe au hasard.

   minmax(0, 1fr) sur les colonnes n'est pas decoratif : sans le minimum a
   zero, une piste de grille refuse de descendre sous la largeur
   intrinseque de son contenu et pousse le document, ce qui provoque un
   defilement lateral sur les petits ecrans.
   ====================================================================== */

/* ---- Espacement du haut de page -------------------------------------
   Le bloc d'en-tete de la boutique portait 8,5rem de marge interieure
   haute. Il a ete retire a la demande du fondateur pour ouvrir
   directement sur les produits. Le fil d'Ariane degage deja la barre de
   navigation fixe ; il reste a redonner un peu d'air pour que la
   premiere rangee ne soit pas collee dessous. Le selecteur ne vise que
   le cas ou la section suit immediatement le fil d'Ariane, c'est a dire
   exactement le nouveau haut de page. */
.breadcrumb + .shop-section { padding-top: 2.4rem; }

/* La mention livraison et paiement vivait dans le bloc supprime. Elle est
   relogee dans l'en-tete de section, ou elle reste juste au-dessus des
   fiches et de leur bouton d'achat. */
.shop-section-header .shop-drop-ship { margin-top: 0.9rem; }

/* ---- Presentation du maillot porte ---------------------------------- */
.worn {
    max-width: 760px;
    margin: 0 auto 2.4rem;
    display: grid;
    gap: 0.7rem;
}

.worn-frame {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(201, 162, 39, 0.22);
    background: #0a0908;
}

.worn-frame video {
    display: block;
    width: 100%;
    height: auto;
}

.worn-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.worn-photo {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: #0a0908;
}

.worn-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

.worn-note {
    margin: 0.1rem 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #b9b2a8;
    text-align: center;
}