/* ==========================================================================
   Bouteille 33 cl + étiquette collée — responsive
   - La taille s'adapte à la largeur du conteneur (ratio de l'image 1024 x 1536).
   - Toutes les positions sont en % : réglables dans les variables ci-dessous.
   - Une nouvelle bière = une nouvelle image d'étiquette (face avant).
   - bouteille.js ajoute l'arrondi (cylindre) ; sans lui, l'étiquette reste à plat.
   ========================================================================== */

.bouteille {
    /* ► Réglages (en pixels de l'image de la bouteille 1024 x 1536) */
    --b-w: 1024;
    --b-h: 1536; /* dimensions de l'image de bouteille               */
    --e-x: 313;
    --e-y: 751; /* coin haut-gauche de l'étiquette sur la bouteille */
    --e-w: 402;
    --e-h: 569; /* taille de l'étiquette sur la bouteille           */

    position: relative;
    width: 100%;
    max-width: var(--bouteille-max, 360px);
    aspect-ratio: 1024 / 1536;
    margin: 0 auto;
    cursor: pointer;
}

.bouteille__verre {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Cadre de l'étiquette */
.bouteille__etiquette {
    position: absolute;
    left: calc(var(--e-x) / var(--b-w) * 100%);
    top: calc(var(--e-y) / var(--b-h) * 100%);
    width: calc(var(--e-w) / var(--b-w) * 100%);
    height: calc(var(--e-h) / var(--b-h) * 100%);
    overflow: hidden;
    isolation: isolate;
}

    /* Image de l'étiquette (repli sans JavaScript : affichée à plat) */
    .bouteille__etiquette img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
    }

/* Dessin arrondi créé par bouteille.js */
.bouteille__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Calques d'ombre et de reflet */
.bouteille__etiquette::before,
.bouteille__etiquette::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* Ombres (multiply) : bords gauche et droit, à l'intérieur de l'étiquette */
.bouteille__etiquette::before {
    background: linear-gradient(to right, rgba(0,0,0,.34) 0%, rgba(0,0,0,.24) 1.2%, rgba(0,0,0,.15) 3%, rgba(0,0,0,.09) 6%, rgba(0,0,0,.05) 11%, rgba(0,0,0,.022) 18%, rgba(0,0,0,.01) 28%, rgba(0,0,0,.012) 38%, rgba(0,0,0,.03) 48%, rgba(0,0,0,.065) 58%, rgba(0,0,0,.10) 68%, rgba(0,0,0,.125) 78%, rgba(0,0,0,.125) 88%, rgba(0,0,0,.13) 95%, rgba(0,0,0,.20) 98.8%, rgba(0,0,0,.30) 100%);
    mix-blend-mode: multiply;
}

/* Reflet doux du verre côté gauche */
.bouteille__etiquette::after {
    background: linear-gradient(to right, rgba(255,255,255,0) 14%, rgba(255,255,255,.10) 24%, rgba(255,255,255,0) 36%);
    mix-blend-mode: screen;
}

/* Variante dimensionnée par la HAUTEUR (ex. dans une carte de la liste des bières) :
   <figure class="bouteille bouteille--h" style="--bouteille-h: 260px"> */
.bouteille--h {
    --bouteille-h: 180px;
    height: var(--bouteille-h);
    width: calc(var(--bouteille-h) * 1024 / 1536);
    max-width: none;
}

/* Coup de pinceau coloré derrière la bouteille.
   À placer AVANT l'image de la bouteille :
     <span class="bouteille__trait" style="--trait-couleur: #c0392b"></span>
   Réglages (sur .bouteille ou .bouteille__trait) :
   --trait-couleur  couleur en hexadécimal (défaut #f5aa19, l'orange d'origine)
   --trait-w   largeur, en % de la largeur de la bouteille  (défaut 150%)
   --trait-x   position horizontale du centre, en % (défaut 50%)
   --trait-y   position verticale du centre, en % de la hauteur (défaut 60%)
   --trait-rot rotation (défaut -20deg)    --trait-opacite (défaut 1)
   Couleur exacte ; la texture du pinceau est conservée (--trait-texture : 0 à 1).
   Image : par défaut ../Images/omalt-wordmark-horizontal.png (relatif à ce fichier CSS).
   Si ton dossier est ailleurs, adapte l'URL aux deux endroits ci-dessous. */
.bouteille__trait {
    position: absolute;
    left: var(--trait-x, 50%);
    top: var(--trait-y, 60%);
    width: var(--trait-w, 150%);
    aspect-ratio: 1774 / 887;
    transform: translate(-50%, -50%) rotate(var(--trait-rot, -20deg));
    opacity: var(--trait-opacite, 1);
    pointer-events: none;
    user-select: none;
    /* couleur exacte (la valeur hexadécimale telle quelle) */
    background-color: var(--trait-couleur, #f5aa19);
    /* découpe : la forme du pinceau */
    -webkit-mask-image: url("../Images/omalt-wordmark-horizontal.png");
    mask-image: url("../Images/omalt-wordmark-horizontal.png");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

    /* texture du pinceau, par-dessus la couleur (sans la changer en moyenne) */
    .bouteille__trait::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("../Images/omalt-wordmark-horizontal.png") 0 0 / 100% 100% no-repeat;
        filter: grayscale(1) brightness(.7);
        mix-blend-mode: soft-light;
        opacity: var(--trait-texture, 1); /* 0 = aplat, 1 = texture complète */
    }

/* Zoom léger de la bouteille (et de son étiquette) au survol de la souris.
   Réglage : --zoom (défaut 1.12). Pour déclencher le zoom au survol de toute la carte,
   remplacer .bouteille:hover par .beer-card:hover .bouteille */
.bouteille__verre,
.bouteille__etiquette {
    transition: transform .35s ease;
}

.bouteille__verre {
    transform-origin: 50% 50%;
}

/* l'étiquette zoome autour du centre de la bouteille, pas de son propre centre */
.bouteille__etiquette {
    transform-origin: calc((var(--b-w) / 2 - var(--e-x)) / var(--e-w) * 100%) calc((var(--b-h) / 2 - var(--e-y)) / var(--e-h) * 100%);
}

.bouteille:hover .bouteille__verre,
.bouteille:hover .bouteille__etiquette {
    transform: scale(var(--zoom, 1.12));
}

@media (prefers-reduced-motion: reduce) {
    .bouteille__verre,
    .bouteille__etiquette {
        transition: none;
    }

    .bouteille:hover .bouteille__verre,
    .bouteille:hover .bouteille__etiquette {
        transform: none;
    }
}


/* Médailles, en haut à droite de la bouteille (empilées les unes au-dessus des autres).
   <div class="bouteille__medailles">
     <img src="~/Images/medaille-avignon-argent.png" alt="Médaille d'argent, Avignon">
   </div>
   Réglages : --medaille-h (hauteur, défaut 40px), --medailles-x / --medailles-y (décalage, défauts -22px et 12px),
   --medaille-ombre (ombre, filtre CSS, ex. none ou drop-shadow(0 6px 10px rgba(0,0,0,.5))) */
.bouteille__medailles {
    position: absolute;
    top: var(--medailles-y, 12px);
    left: calc(100% + var(--medailles-x, -22px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 3;
    pointer-events: none;
}

    .bouteille__medailles img {
        display: block;
        height: var(--medaille-h, 40px);
        width: auto;
        filter: var(--medaille-ombre, drop-shadow(0 3px 6px rgba(0, 0, 0, .4)));
    }