/*
 * ============================================================
 *  FICHE BOUTEILLE — single-bouteille.php
 *  Maquette : en-tête centré (titre, sous-titre, intro, CTA),
 *  puis bouteille à gauche et sections annotées à droite.
 * ============================================================
 */

.bouteille {
    position: relative;
    overflow-x: clip;

    /* Tailles spécifiques à la fiche (maquette → fluide) */
    --fs-bouteille-titre: clamp(1.5rem, 2.083vw, 2.5rem);
    --fs-bouteille-sous-titre: clamp(1rem, 1.302vw, 1.5625rem);
    --fs-bouteille-section: clamp(1rem, 1.302vw, 1.5625rem);
    --fs-bouteille-detail: clamp(0.8125rem, 0.938vw, 1.125rem);

    display: flex;
    flex-direction: column;
}


/* ── Filigrane bouteille ────────────────────────────────────── */
.bouteille::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/background-bottle.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    pointer-events: none;
}

/* ── En-tête : titre / sous-titre / intro / CTA ────────────── */
.bouteille__header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
    margin: 0 auto;
    padding: 0 20px;
    max-width: 700px;
    text-align: center;
}

.bouteille__titre {
    font-family: "Baskervville";
    font-weight: 400;
    font-size: var(--fs-bouteille-titre);
    line-height: var(--lh-heading);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-red);
}

.bouteille__sous-titre {
    font-family: "Baskervville";
    font-size: var(--fs-bouteille-sous-titre);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-red);
}

.bouteille__intro {
    font-size: var(--fs-bouteille-detail);
    line-height: var(--lh-body);
}

.bouteille__cta {
    display: inline-block;
    padding: 0.75em 2em;
    background-color: var(--color-red);
    color: var(--color-white);
    font-size: var(--fs-a-cadre);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.2s ease;
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
}

.bouteille__cta:hover,
.bouteille__cta:focus {
    background-color: var(--color-white);
    color: var(--color-red);
    border-color: var(--color-red);
}

.bouteille__fiche {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: content-box;
    max-width: 509px;
    padding: 5vh 8vw;
    margin: 10vh auto;
}

.bouteille__image img {
    width: auto;
    max-width: 100%;
    max-height: 110vh;
    object-fit: contain;
}

/* ── Callout lines SVG overlay ──────────────────────────────── */
.bouteille__callout-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    color: var(--color-red);
    z-index: 1000000;
}

.bouteille__callout-svg line {
    stroke: currentColor;
    stroke-width: 1px;
    opacity: 0.5;
}

.bouteille__section,
.bouteille__image {
    position: relative;
    z-index: 1;
}

@media (max-width: 1023px) {
    .bouteille__callout-svg { display: none; }
}

.bouteille__section {
    position: absolute;
    /* background-color: blue; */
    max-width: min(350px, clamp(13vw, 235px, 350px));
    width: 100%;
}

.bouteille__section--terroir {
    top: 15%;
    left: 0;
}


.bouteille__section--degustation {
    top: 32%;
    right: 0;
}

.bouteille__section--conseil {
    left: -5%;
    top: 58%;
    max-width: min(350px, clamp(13vw, 210px, 350px));
}

.bouteille__section--accords {
    right: -8%;
    top: 72%;
}

.bouteille__section--trouver {
    margin: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: fit-content;
    max-width: unset;
}


/* ── Fiche : bouteille au centre, sections en quinconce ─────
 *  Maquette desktop : Terroir & Conseils à gauche, Dégustation
 *  & Accords à droite, « Où le trouver ? » sous la bouteille.
 *  Le HTML reste dans l'ordre de lecture (mobile), le placement
 *  desktop se fait par grid-area sur les modificateurs.       */
/* .bouteille__fiche {
    position: relative;
    display: grid;
    grid-template-columns: 1fr minmax(280px, 560px) 1fr;
    grid-template-rows: 1fr 1fr auto;
    column-gap: clamp(30px, 4vw, 80px);
    row-gap: clamp(2rem, 5vh, 4rem);
    margin: clamp(40px, 8vh, 100px) auto 0;
    padding: 0 clamp(20px, 4vw, 80px);
    max-width: 1500px;
}

.bouteille__image {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.bouteille__image img {
    width: auto;
    max-width: 100%;
    max-height: 110vh;
    object-fit: contain;
} */

/* Les sections sont des enfants directs de la grille */
/* .bouteille__sections {
    display: contents;
}

.bouteille__section--terroir {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
}

.bouteille__section--degustation {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
}

.bouteille__section--conseil {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
}

.bouteille__section--accords {
    grid-column: 3;
    grid-row: 2;
    align-self: end;
}

.bouteille__section--trouver {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
} */

.bouteille__section-titre {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 0.6em;
    font-family: "Baskervville";
    font-weight: 400;
    font-size: var(--fs-bouteille-section);
    line-height: var(--lh-heading);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-red);
}

/* ── Listes « Label : valeur » ─────────────────────────────── */
.bouteille__details {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    font-size: var(--fs-bouteille-detail);
}

.bouteille__detail dt,
.bouteille__detail dd {
    display: inline;
}

.bouteille__detail dt {
    font-weight: 700;
}

.bouteille__detail dt::after {
    content: " : ";
}

.bouteille__texte {
    font-size: var(--fs-bouteille-detail);
}

.bouteille__texte p {
    margin: unset;
    font-size: inherit;
}

/* ── Tablette & mobile : < 1024px ──────────────────────────
 *  En dessous, les colonnes latérales deviennent trop étroites
 *  pour les titres en capitales espacées : on empile.         */
@media screen and (max-width: 1023px) {
    .bouteille {
        padding-bottom: 0;
    }

    /* Une seule colonne : l'ordre du HTML (image, terroir,
       dégustation, conseils, accords, où le trouver) s'applique. */
    .bouteille__fiche {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        margin-bottom: 0;
    }

    .bouteille__sections {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    /* .bouteille__image img {
        max-height: 60vh;
    } */

    /* Chaque section s'affiche sous la bouteille, centrée */
    .bouteille__section {
        position: relative;
        width: 100%;
        text-align: center;
        position: relative;
        width: 100%;
        text-align: center;
        top: unset;
        right: unset;
        left: unset;
        max-width: unset;
    }

    .bouteille__section-titre {
        justify-content: center;
    }

    .bouteille__section-titre::before,
    .bouteille__section-titre::after {
        display: none;
    }
}