/* product.css — fiches produit (originals/prints) : colonnes, galerie, slider
   mobile, infos, menus déroulants, partage, produits similaires. */

/* Product page ---------------------------------------------------------- */
/* Deux colonnes : galerie (plus large) et infos. Les deux sont `sticky` —
   la plus courte reste visible pendant qu'on défile la plus longue, puis
   elles repartent ensemble en fin de bloc. Le `top` exact est calculé en JS
   (setupStickyColumns, js/product-shared.js) pour qu'une colonne plus haute
   que l'écran puisse défiler jusqu'à son bas avant de se coller ; 88px =
   valeur par défaut (header fixe de 64px + respiration).
   max-width : sans ça, l'image principale s'étire sur un grand écran, au-delà
   de la résolution générée (1600px max, voir IMAGE_WIDTHS dans js/images.js) —
   visiblement flou. Pas de padding horizontal ici : #app en a déjà, de sorte
   que l'image et le titre partagent exactement le même bord haut (et
   l'image le bord gauche de la page). */
.product {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    gap: 72px;
    align-items: flex-start;
}

.product-left,
.product-right {
    position: sticky;
    top: 88px;
    align-self: flex-start;
    min-width: 0;
}

.product-left {
    flex: 1.35 1 0;
}

.product-right {
    flex: 1 1 0;
}

/* Galerie ------------------------------------------------------------------ */
/* Fond blanc, pas le gris de chargement : la photo est en object-fit:contain
   dans un cadre fixe, donc un éventuel "letterboxing" reste visible en
   permanence — en blanc il se fond dans la page. Pas de flèches précédent/
   suivant : les vignettes suffisent, et le clic sur la photo ouvre la
   lightbox (qui a les siennes). */
.carousel-viewer {
    width: 100%;
    aspect-ratio: 4/5;
    overflow: hidden;
    position: relative;
    background: var(--bg);
    cursor: zoom-in; /* clic -> overlay zoom, voir lightbox.css / js/lightbox.js */
}

.carousel-viewer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.carousel-thumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

.carousel-thumbs:empty {
    display: none;
}

.carousel-thumbs img {
    width: 112px;
    height: 112px;
    object-fit: cover;
    background: var(--surface);
    cursor: pointer;
    border: 2px solid transparent;
}

.carousel-thumbs img.active {
    border-color: var(--text);
}

/* Slider mobile (voir sliderHtml, js/product-shared.js) : masqué par défaut,
   affiché à la place de la galerie sous 800px (voir la fin du fichier). */
.slider {
    display: none;
}

/* Le défilement et l'accroche par carte viennent de .scroll-row-x
   (components.css), posée sur le même élément dans le HTML généré (voir
   sliderHtml, js/product-shared.js). */
.slider-track {
    gap: 8px;
    /* Marge de chaque côté = ce qui laisse dépasser l'image précédente/
       suivante (voir .slide) ; sans ça la 1ère/dernière diapo ne pourrait pas
       se centrer (rien à gauche/droite pour compenser). Valeur de repli pour
       le cas courant (diapo à 84%, voir .slide) : quand le plafond de hauteur
       de .slide s'active, `syncSliderPeek` (js/product-shared.js) mesure la
       diapo réellement affichée et corrige cette marge en pixels — deux
       formules séparées (CSS ici, calc() là) pour la même valeur finissaient
       par diverger légèrement selon le navigateur, d'où l'écart inégal
       observé de chaque côté. */
    padding-inline: 8%;
}

/* Pleine largeur de la zone utile (une fois les 8%+8% de marge ci-dessus
   retirés du track — 100% de CETTE zone, pas du track entier : une diapo est
   positionnée par rapport à ce qu'il en reste une fois le padding posé) —
   sauf sur un écran bas (fenêtre large mais peu haute, tablette en
   paysage...), où le ratio 4/5 donnerait une image plus haute que l'écran :
   les flèches/compteur du slider (.slider-nav, juste en dessous) resteraient
   hors champ tant qu'on n'a pas fait défiler toute l'image. Plafonnée en
   LARGEUR (dont la hauteur découle par aspect-ratio) plutôt qu'en hauteur
   directement : un max-height seul aurait gardé la diapo à 100% de large
   sans réduire sa largeur d'autant, donc écrasé l'image (letterboxing) sans
   rien gagner. Plafond de hauteur = écran moins header (64px) + marge haute
   d'#app (88px) + la rangée .slider-nav (~46px) + un peu de respiration. */
.slide {
    flex: 0 0 min(100%, calc((100vh - 160px) * 4 / 5));
    aspect-ratio: 4/5;
    scroll-snap-align: center;
    background: var(--bg);
    cursor: zoom-in;
}

.slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Infos produit ------------------------------------------------------------ */
.product-title {
    font-family: "dazzle-unicase", sans-serif;
    font-weight: 400;
    font-size: clamp(28px, 2.8vw, 42px);
    line-height: 1.12;
    margin: 0;
}

/* Plus petit et plus léger que le titre. */
.product-price {
    font-size: 22px;
    font-weight: 300;
    margin-top: 20px;
}

.product-shipping {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    margin-top: 6px;
}

.option-label {
    font-size: 13px;
    color: var(--muted);
    margin: 24px 0 8px;
}

/* Sélecteur de format en "pilules" : sélectionné = plein noir, pas de fond
   gris. */
.size-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.size-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--muted);
    border-radius: 999px;
    padding: 9px 22px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.size-btn:hover {
    border-color: var(--text);
}

.size-btn.selected {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

.product-text {
    margin: 28px 0 0;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 300;
    color: var(--text-soft);
}

/* Menus déroulants (<details> natif : clavier/accessibilité gratuits). */
.accordion {
    margin-top: 28px;
    border-top: 1px solid var(--line);
}

.accordion-item {
    border-bottom: 1px solid var(--line);
}

.accordion-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    /* Un double clic pour ouvrir/fermer ne doit pas sélectionner le titre. */
    user-select: none;
    -webkit-user-select: none;
}

.accordion-item summary::-webkit-details-marker {
    display: none;
}

.accordion-item summary::after {
    content: '';
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.accordion-item[open]:not([data-closing]) summary::after {
    transform: rotate(-135deg);
}

.accordion-body {
    padding: 0 0 22px 10px;
    font-size: 15px;
    line-height: 1.9;
    font-weight: 300;
    color: var(--text-soft);
}

.accordion-body p,
.accordion-body ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Même graisse que le texte de description (.product-text) : sans ça, la
   règle globale des <p> (base.css) les allège par rapport aux listes. */
.accordion-body p {
    font-weight: inherit;
}

.accordion-body .dim-block + .dim-block {
    margin-top: 1.4em;
}

/* Bouton partage : texte + icône, sans le fond noir des <button> par défaut. */
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding: 6px 0;
    background: none;
    color: var(--text);
    font-size: 14px;
}

.share-btn:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Produits similaires ------------------------------------------------------- */
.similar {
    max-width: 1500px;
    margin: 96px auto 0;
}

.similar h2 {
    margin: 0 0 24px;
}

.similar-more {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.similar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 20px;
    align-items: start;
}

.similar-card {
    position: relative;
    display: block;
    text-decoration: none;
}

/* Empilé sous 800px : plus de colonnes collantes, chaque bloc reprend sa place
   dans le flux (le `top` posé en JS est alors sans effet) ; le slider remplace la
   galerie (image + vignettes). */
@media (max-width: 800px) { /* md */
    .product {
        flex-direction: column;
        gap: 24px;
        align-items: stretch;
    }

    .slider {
        display: block;
    }

    .slider + .carousel {
        display: none;
    }

    /* Même plafond, même raisonnement (largeur plutôt que hauteur, voir
       .slide) pour une fiche à une seule photo (pas de .slider dans le DOM
       dans ce cas — voir sliderHtml/gallery.length dans originals.js et
       prints.js — donc .carousel reste affiché tel quel sur mobile) : sans
       vignettes ni .slider-nav en dessous, pas besoin de leur faire de place.
       Centrée (margin-inline auto) : sans ça, une largeur réduite collerait
       au bord gauche de la colonne au lieu de rester au milieu. */
    .product-left:not(:has(.slider)) .carousel-viewer {
        width: min(100%, calc((100vh - 100px) * 4 / 5));
        margin-inline: auto;
    }

    .product-left,
    .product-right {
        position: static;
        width: 100%;
        flex: none;
    }

    .similar {
        margin-top: 64px;
    }

    .similar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}