/* ── Plain Form Shop — réplique du design live ───────────────── */

/* Chemins absolus depuis la racine du domaine, et non relatifs : @import se
   résout par rapport à l'URL de la feuille, pas de la page. En relatif, ces deux
   imports donnaient /public/includes/… sur le domaine admin — où la boutique est
   servie sous /public/shop/ — mais /includes/… sur shop.plain-form.com, où elle
   est servie à la racine : 404, donc aucune variable --fs-* définie, et tous les
   titres qui retombaient à la taille par défaut. Même chose pour le thème du
   panier Snipcart, qui vient de snipcart.css. */
@import url('/public/includes/variables.css');
@import url('/public/includes/snipcart.css');

:root {
    --nav-h: 60px;
    --fs-grand-sp-pfw: 1.45rem; /* PetitFrereWide grand format — overridé sur mobile */
}

*, *::before, *::after { box-sizing: border-box; }

body {
    background: black;
    color: white;
    font-family: "BasicallySans", sans-serif;
    font-size: var(--fs-normal);
    margin: 0;
    line-height: 1.2;
}

a { color: white; text-decoration: none; }
a:hover { color: white; }

/* ── Navigation ─────────────────────────────────────────────── */
.shop-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: black;
    border-bottom: 1px solid white;
}
.shop-nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    padding: 20px 0;
}
.shop-nav-logo {
    font-family: "BasicallySans", sans-serif;
    font-weight: bold;
    font-size: var(--fs-petit);
    letter-spacing: .01em;
    flex: 1;
}
.shop-nav-links {
    display: flex;
    font-size: var(--fs-petit);
    justify-content: center;
}
.shop-nav-links a { color: white; padding: 0 25px; }
.shop-nav-links a:hover { color: grey; }
.shop-nav-links a:active {
    -webkit-text-stroke-width: 0.8em;
    -webkit-text-stroke-color: inherit;
}
.shop-nav-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    font-size: var(--fs-petit);
}
.shop-nav-right .cart-btn {
    background: none;
    border: none;
    color: white;
    font-family: "BasicallySans", sans-serif;
    font-size: var(--fs-petit);
    cursor: pointer;
    padding: 0;
}
.shop-nav-right .cart-btn:hover { opacity: .7; }

/* ── Bannière ────────────────────────────────────────────────── */
.shop-banner {
    width: 100%;
    height: 70vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: stretch;
}
.shop-banner-right {
    margin-left: auto;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 40px;
    gap: 24px;
}
.shop-banner-text {
    font-family: "PetitFrereWide", sans-serif;
    font-size: clamp(20px, 2.5vw, 42px);
    font-weight: normal;
    line-height: 1.35;
    color: white;
}
/* Bouton « sticker » de la bannière. Décision du propriétaire : plus de fond
   noir ni de bordure, mais un gros contour noir autour des lettres et un texte
   blanc. Le contour et le remplissage sont deux calques superposés portant le
   même texte (voir .shop-banner-btn-stroke / .shop-banner-btn-fill) : un
   -webkit-text-stroke unique peint contour ET remplissage lettre par lettre,
   donc un contour épais mord sur le remplissage de la lettre voisine. */
.shop-banner-btn {
    /* Ancre les calques positionnés : le calque de remplissage s'aligne sur le
       coin haut-gauche du bouton sans z-index à gérer. */
    position: relative;
    display: inline-block;
    /* Police réglable par ligne en admin, posée en variable CSS sur le <a> :
       héritée par les deux calques. Le repli couvre une entrée historique. */
    font-family: var(--banner-font, 'PetitFrereWide'), sans-serif;
    /* 1,5 fois la taille de base : les boutons doivent porter la bannière, pas la
       commenter. En calc() la valeur reste solidaire du responsive. C'est la
       taille appliquée tant que le champ « taille » de la ligne est vide ; sinon
       le style en ligne pose un font-size en rem qui l'emporte. */
    font-size: calc(var(--fs-grand-sp-pfw) * 1.5);
    font-weight: normal;
    color: white;
    text-decoration: none;
    /* Interlignage réglable en admin via --banner-line-height (posée sur le
       conteneur), sans unité : c'est un multiplicateur de la police de l'élément,
       donc il s'adapte à chaque ligne maintenant que la taille est par bouton.
       Sans réglage, le repli « inherit » reproduit exactement le rendu d'avant
       (la valeur héritée de body, 1.2). Un navigateur qui refuserait le mot-clé
       en repli rendrait la déclaration invalide, donc non définie — et
       line-height étant héritée, le résultat serait encore « inherit ». Le repli
       ne peut donc pas casser le rendu actuel. */
    line-height: var(--banner-line-height, inherit);
    /* Texte centré dans la largeur du bouton. Sur un libellé d'une seule ligne le
       bouton se cale sur son texte, donc le centrage ne se voit pas ; il devient
       visible dès que le libellé tient sur plusieurs lignes (les balises <br>
       sont autorisées dans le texte du bouton) ou qu'il est plus étroit que lui. */
    text-align: center;
    /* Sticker : le contour déborde du cadre, donc ni fond, ni bordure, ni
       padding qui rognerait ou décalerait les calques. */
    background: none;
    border: none;
    padding: 0;
    overflow: visible;
    align-self: flex-start;
    /* « scale » et non « transform: scale() » au survol : les boutons portent
       déjà un transform:rotate() en style en ligne, et l'inline l'emporte sur
       la feuille — un transform de survol écraserait donc la rotation. La
       propriété indépendante scale se compose avec transform. */
    transition: scale .15s;
}
/* Calque de contour : en flux normal, il donne sa taille au bouton. Le
   remplissage des lettres est transparent pour ne pas recouvrir le contour des
   voisines ; le trait est peint d'un coup sur toute la ligne.
   Épaisseur réglable en admin via --banner-stroke (posée sur le conteneur), en
   em et non en rem : le contour reste proportionné à la police du bouton, ce qui
   compte maintenant que chaque ligne a sa taille. Le repli 0.07em est le rendu
   d'avant le réglage, donc rien ne change tant que le champ est vide. */
.shop-banner-btn-stroke {
    color: black;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: var(--banner-stroke, 0.07em) black;
}
/* Calque de remplissage : positionné en absolu, donc peint après (donc devant)
   le calque en flux, sans z-index. Même police et même taille que lui : les
   deux textes se superposent au pixel près. */
/* Le barré d'un <del> vient du navigateur, et il ne suffit pas ici : l'épaisseur
   par défaut est calculée pour du texte courant, pas pour une police d'affiche de
   cette taille, et le trait se perd entre les lettres. On le déclare donc
   explicitement, avec une épaisseur proportionnelle à la taille du bouton — donc
   en em, comme le contour. Appliqué aux deux calques : le trait du dessous sert de
   liseré, celui du dessus reste aligné sur le remplissage. */
.shop-banner-btn del,
.shop-banner-btn s,
.shop-banner-btn strike {
    text-decoration-line: line-through;
    text-decoration-thickness: 0.07em;
    text-decoration-color: black;
}
.shop-banner-btn-fill {
    position: absolute;
    top: 0;
    left: 0;
    /* Toute la largeur du bouton, et non la sienne : le calque en flux, lui,
       occupe toute cette largeur. Sans ça, un texte centré (text-align) dans un
       bouton plus large que son contenu décalerait le remplissage par rapport au
       contour, et les deux calques ne se superposeraient plus. */
    width: 100%;
    color: white;
}
/* Les deux calques héritent police et taille du <a> et partagent ses métriques. */
.shop-banner-btn-stroke,
.shop-banner-btn-fill {
    font: inherit;
    white-space: nowrap;
}
/* Groupe de boutons. Les marges automatiques le centrent verticalement dans
   l'espace laissé libre sous le texte ; si le contenu dépasse la hauteur de la
   bannière, elles retombent simplement à zéro. C'est ici que la page pose les
   variables communes à tous les boutons : --banner-stroke (contour) et
   --banner-line-height (interlignage). Le décalage et la rotation « stickers »,
   eux, sont tirés au hasard par la page pour chaque bouton. */
.shop-banner-buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: auto;
    margin-bottom: auto;
}
.shop-banner-btn:hover { scale: 1.04; }

@media (max-width: 900px) {
    .shop-banner-right { width: 100%; }
}

/* ── Product grid (listing) ─────────────────────────────────── */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
    margin-top: 80px;
    margin-bottom: 80px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.product-cell a {
    display: block;
}
.product-cell-image {
    width: 100%;
    aspect-ratio: 1/1;
    position: relative;
    overflow: hidden;
    background: #111;
}
.pci-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: none;
    will-change: filter;
}
.product-cell:hover .pci-layer {
    mix-blend-mode: difference;
    filter: grayscale(1) contrast(9999) invert(1);
}
.product-cell-info {
    padding: 10px 0 28px 0;
}
.product-cell-name {
    font-family: "PetitFrereWide", sans-serif;
    font-weight: 300;
    font-size: var(--fs-normal);
    line-height: 1.25;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.preorder-tag {
    font-size: var(--fs-normal);
    font-style: normal;
    font-weight: normal;
    letter-spacing: 0;
    text-transform: uppercase;
}
.product-cell-name .preorder-tag {
    font-size: var(--fs-petit);
}
.product-cell-price {
    font-size: var(--fs-normal);
    color: white;
}
.product-cell-price del {
    color: #666;
    text-decoration: line-through;
    margin-right: .3em;
}
.product-cell-price .sold-out {
    font-style: italic;
    text-decoration: line-through;
    color: #666;
    margin-right: 4px;
}

/* ── Intro section (below grid) ─────────────────────────────── */
.shop-intro {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 0;
    padding: 80px 0 0;
    margin-top: 40px;
    margin-bottom: 160px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.shop-intro-label {
    font-size: var(--fs-petit);
    color: white;
    padding-top: 6px;
}
.shop-intro-text {
    font-size: var(--fs-grand);
    line-height: 1.15;
    font-weight: normal;
}
.shop-intro-text + .shop-intro-text {
    font-size: var(--fs-normal);
    line-height: 1.6;
    margin-top: 24px;
}
.shop-intro-sub {
    font-size: var(--fs-moyen);
    color: white;
    margin-top: 24px;
    line-height: 1.5;
}

/* ── Footer ─────────────────────────────────────────────────── */
.shop-footer {
    border-top: 1px solid white;
    padding: 32px 0 48px;
    font-size: var(--fs-petit);
    color: white;
}
.shop-footer-inner {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}
.shop-footer-inner > div:nth-child(2) { width: 25em; flex-shrink: 0; }
.shop-footer h3 {
    font-size: var(--fs-petit);
    font-weight: normal;
    margin: 0 0 12px;
    color: white;
}
.shop-footer a { color: white; display: block; margin-bottom: 4px; }
.shop-footer a:hover { color: white; }

/* ── Product detail ─────────────────────────────────────────── */
.detail-layout {
    display: grid;
    grid-template-columns: 57fr 43fr;
    height: calc(100vh - var(--nav-h));
}

.detail-image {
    background-size: cover;
    background-position: center;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.detail-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 32px 40px 32px 40px;
    border-left: 1px solid white;
}

.detail-top { flex: 1; }

.detail-title {
    font-family: "PetitFrereWide", sans-serif;
    font-size: var(--fs-grand-sp-pfw);
    font-weight: normal;
    margin: 0 0 24px;
    line-height: 1.05;
}

.detail-info hr {
    border: none;
    border-top: 1px solid white;
    margin: 0 0 24px;
}

.detail-price {
    font-family: "PetitFrereWide", sans-serif;
    font-size: var(--fs-grand-sp-pfw);
    font-weight: normal;
    margin-bottom: 24px;
    line-height: 1;
}
.detail-price del {
    color: #666;
    text-decoration: line-through;
    margin-right: .3em;
}
.detail-price .sold-out-note {
    display: block;
    font-family: "BasicallySans", sans-serif;
    font-size: var(--fs-petit);
    color: #666;
    margin-top: 8px;
}

.detail-desc {
    font-size: var(--fs-normal);
    line-height: 1.55;
    color: white;
    margin-bottom: 24px;
    max-width: 35em;
}
.detail-desc p { margin: 0 0 .6em; }

.size-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.size-btn {
    font-family: "PetitFrereWide", sans-serif;
    font-size: var(--fs-petit);
    text-transform: uppercase;
    border: 1px solid white;
    background: none;
    color: white;
    padding: 4px 12px;
    cursor: pointer;
    transition: .1s border-color, .1s background;
}
.size-btn:hover, .size-btn.selected {
    background: white;
    color: black;
    border-color: white;
}

.detail-bottom { }

.detail-add-to-cart {
    display: block;
    width: 100%;
    font-family: "PetitFrereWide", sans-serif;
    font-size: var(--fs-grand-sp-pfw);
    font-weight: normal;
    background: none;
    border: none;
    color: white;
    text-align: left;
    cursor: pointer;
    padding: 0;
    line-height: 1.05;
    margin-top: 24px;
    transition: .1s opacity;
}
.detail-add-to-cart:hover { opacity: .6; }
.detail-add-to-cart:disabled {
    opacity: .25;
    cursor: not-allowed;
}

.gallery-arrow {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 2;
    user-select: none;
}
.gallery-arrow-left {
    left: 0;
    cursor: none;
}
.gallery-arrow-right {
    right: 0;
    cursor: none;
}
.gallery-cursor {
    position: fixed;
    pointer-events: none;
    z-index: 1000;
    mix-blend-mode: difference;
    color: white;
    font-family: 'PetitFrereWide', sans-serif;
    font-size: 2.67rem;
    text-transform: uppercase;
    display: none;
    transform: translate(-50%, -50%);
    line-height: 1;
    user-select: none;
}

/* ── Barre bas mobile ───────────────────────────────────────── */
.shop-bottom-bar {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: black;
    border-top: 1px solid white;
    z-index: 9999;
    align-items: center;
    justify-content: space-between;
    padding: 0 1em;
    height: 2.4em;
}
.shop-bottom-home {
    font-family: "BasicallySans", sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 0;
    text-transform: none;
    color: white;
    text-decoration: none;
}
.shop-bottom-home:hover { color: white; }
.shop-menu-trigger {
    background: none;
    border: none;
    font-family: "BasicallySans", sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0;
    text-transform: none;
    color: white;
    cursor: pointer;
    padding: 0;
}
.shop-menu-overlay {
    display: flex;
    visibility: hidden;
    pointer-events: none;
    position: fixed;
    inset: 0;
    background: black;
    z-index: 9998;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2.5rem 2rem 5rem;
    gap: 0.2em;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.25, 0, 0.1, 1), visibility 0.32s;
}
.shop-menu-overlay.open {
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.shop-menu-overlay > a,
.shop-menu-overlay .shop-menu-cart {
    font-family: "Paraiso", "BasicallySans", sans-serif;
    font-size: 3.5rem;
    letter-spacing: 0;
    font-feature-settings: 'ss04';
    text-transform: none;
    color: white;
    display: block;
    line-height: 0.95;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: center;
}
.shop-menu-overlay > a:hover,
.shop-menu-overlay .shop-menu-cart:hover { opacity: 0.6; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .shop-intro { grid-template-columns: 1fr; }
    .shop-intro-label { display: none; }
    .shop-footer-inner { flex-wrap: wrap; }
    .shop-footer-inner > div { flex: 1 1 40%; }
    .detail-layout { grid-template-columns: 1fr; height: auto; }
    .detail-image { min-height: 60vw; height: 70vh; }
}

/* ── Tablette portrait (561px–900px) ────────────────────────── */
@media (min-width: 561px) and (max-width: 900px) {
    /* Nav : liens visibles mais resserrés */
    .shop-nav-links { display: flex; }
    .shop-nav-links a { padding: 0 14px; }

    /* Grille produits : 2 colonnes, largeur 90% */
    .product-grid { width: 90%; }

    /* Intro */
    .shop-intro { width: 90%; margin-bottom: 100px; }

    /* Footer : 2 colonnes nettes */
    .shop-footer-inner {
        width: 90%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    .shop-footer-inner > div:nth-child(1),
    .shop-footer-inner > div:nth-child(2) { grid-column: 1 / -1; }
    .shop-footer-inner > div:nth-child(2) { width: auto; }

    /* Fiche produit : info sans border-left, padding adapté */
    .detail-info { padding: 28px 32px; border-left: none; }
}
@media (max-width: 560px) {
    .product-grid { grid-template-columns: 1fr; width: 90%; }
    .shop-banner { background-position: left center; }
    .shop-banner-right { justify-content: flex-end; }
    /* Fond noir derrière le paragraphe sur image claire. Il était réglable
       (shop_banner_mobile_bg) ; le réglage est retiré et la valeur par défaut
       (#000, celle qui servait jusque-là) est fixée ici. Indispensable : le
       style sticker ne protège que le texte des boutons, pas le paragraphe. */
    .shop-banner-text { font-size: var(--fs-moyen); background: #000; padding: 8px 12px; }
    /* Le bouton n'a plus de fond du tout, donc plus rien à repeindre en mobile :
       l'ancien background: var(--banner-mobile-bg) !important poserait un pavé
       derrière le sticker. */
    .detail-info { margin-left: 5%; margin-right: 5%; padding-left: 0; padding-right: 0; padding-top: 25px; border-left: none; }
    .detail-layout ~ footer { display: none; }
    .detail-bottom hr { display: none; }
    .detail-add-to-cart { border: 1px solid white; padding: 16px; text-align: center; margin-top: 10px; }
    .gallery-cursor { display: none !important; }
    .gallery-arrow { cursor: pointer; display: flex; align-items: center; }
    .gallery-arrow-left  { justify-content: flex-start; padding-left: 16px; }
    .gallery-arrow-right { justify-content: flex-end;   padding-right: 16px; }
    .gallery-arrow-left::after  { content: '←'; font-family: 'PetitFrereWide', sans-serif; font-size: 3.5rem; color: white; mix-blend-mode: difference; }
    .gallery-arrow-right::after { content: '→'; font-family: 'PetitFrereWide', sans-serif; font-size: 3.5rem; color: white; mix-blend-mode: difference; }
    .product-cell-info { padding: 10px 0 0 0; }
    .shop-intro { width: 90%; margin-bottom: 80px; padding-top: 50px; }
    .shop-footer { border-top: none; padding-bottom: 15px; }
    .shop-footer-inner { width: 90%; border-top: 1px solid white; padding-top: 32px; }
    .shop-footer { font-size: var(--fs-normal); }
    .shop-footer h3 { font-size: inherit; }
    .shop-footer-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; flex-direction: unset; }
    .shop-footer-inner > div:nth-child(1),
    .shop-footer-inner > div:nth-child(2) { grid-column: 1 / -1; }
    .shop-footer-inner > div:nth-child(2) { width: auto; flex-shrink: unset; }
    .shop-nav { display: none; }
    .shop-bottom-bar { display: flex; }

    body { font-size: 1.3em; padding-bottom: 4em; }
}