/* =============================================================================
   tastings.css — carnet de dégustation (fiche gin, fenêtre « J'ai goûté », page Mes dégustations)
   Dual-theme : jetons clairs par défaut, jetons sombres sous [data-theme="dark"].
   ============================================================================= */

.tastings-scope {
    --tg-surface: #ffffff;
    --tg-surface-2: #f7f3f8;
    --tg-border: #ece6ef;
    --tg-border-strong: #d9cfdf;
    --tg-text: #1f1b24;
    --tg-text-dim: #574f60;
    --tg-muted: #776e82;
    --tg-accent: var(--gin-primary, #BC70A4);
    --tg-accent-ink: #96437A;
    --tg-accent-soft: rgba(188, 112, 164, .12);
    --tg-star-off: #ddd3e2;
    --tg-shadow: 0 6px 20px rgba(31, 27, 36, .06);
}

[data-theme="dark"] .tastings-scope {
    --tg-surface: #1d1f28;
    --tg-surface-2: #242636;
    --tg-border: rgba(255, 255, 255, .12);
    --tg-border-strong: rgba(255, 255, 255, .18);
    --tg-text: #e8e4f0;
    --tg-text-dim: #b8b1c8;
    --tg-muted: #9a90b4;
    --tg-accent: #C48DB3;
    --tg-accent-ink: #d9a8ca;
    --tg-accent-soft: rgba(196, 141, 179, .16);
    --tg-star-off: #3a3c4d;
    --tg-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

/* ---------- Étoiles en lecture (remplies au pourcentage, demi-points compris) ----------
   Les sélecteurs qui colorent un <span> sont préfixés par .tastings-scope : dark-theme.css
   impose `[data-theme="dark"] span { color: inherit }`, plus spécifique qu'une classe seule,
   ce qui rendait les deux couches d'étoiles blanches — cinq étoiles pleines pour toute note. */
.tasting-readonly-stars {
    position: relative;
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;
}

.tastings-scope .tasting-readonly-stars__base {
    color: var(--tg-star-off);
}

.tastings-scope .tasting-readonly-stars__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--rating);
    overflow: hidden;
    color: var(--tg-accent);
}

/* ---------- Bloc sur la fiche gin ---------- */
.gin-tastings-panel {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--tg-border);
    border-radius: 16px;
    background: var(--tg-surface);
    color: var(--tg-text);
    box-shadow: var(--tg-shadow);
}

.gin-tastings-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.gin-tastings-panel__title {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--tg-text);
}

.tastings-scope .gin-tastings-panel__count {
    margin-left: .5rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--tg-accent-soft);
    color: var(--tg-accent-ink);
    font-size: .75rem;
    font-weight: 700;
}

.gin-tastings-panel__empty {
    margin: .75rem 0 0;
    font-size: .88rem;
    color: var(--tg-text-dim);
}

.tastings-scope .gin-tastings-panel__journal {
    display: inline-block;
    margin-top: .75rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--tg-accent-ink);
    text-decoration: none;
}

.tastings-scope .gin-tastings-panel__journal:hover {
    text-decoration: underline;
}

.tasting-list {
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
}

.tasting-list li + li {
    margin-top: .5rem;
}

.tasting-entry {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    width: 100%;
    padding: .7rem .85rem;
    border: 1px solid var(--tg-border);
    border-radius: 12px;
    background: var(--tg-surface-2);
    color: inherit;
    text-align: left;
    transition: border-color .2s ease;
}

.tasting-entry:hover,
.tasting-entry:focus-visible {
    border-color: var(--tg-accent);
}

.tasting-entry__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.tastings-scope .tasting-entry__date {
    font-size: .78rem;
    color: var(--tg-muted);
}

.tastings-scope .tasting-entry__meta {
    font-size: .82rem;
    font-weight: 600;
    color: var(--tg-text-dim);
}

.tastings-scope .tasting-entry__notes {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .86rem;
    line-height: 1.45;
    color: var(--tg-text-dim);
}

/* ---------- Fenêtre « J'ai goûté » ---------- */
.tasting-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 16px 16px;
    overflow-y: auto;
}

.tasting-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 4, 8, .55);
    backdrop-filter: blur(6px);
}

.tasting-modal__panel {
    position: relative;
    width: min(560px, 100%);
    border: 1px solid var(--tg-border);
    border-radius: 18px;
    background: var(--tg-surface);
    color: var(--tg-text);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
    animation: tasting-pop .2s ease;
}

@keyframes tasting-pop {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.tasting-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    border-bottom: 1px solid var(--tg-border);
}

.tasting-modal__head h5 {
    font-weight: 700;
    color: var(--tg-text);
}

.tastings-scope .tasting-modal__gin {
    font-size: .85rem;
    color: var(--tg-muted);
}

.tasting-modal__body {
    padding: 1.1rem 1.3rem;
}

.tasting-modal__body .form-label {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--tg-muted);
}

.tasting-modal__body .form-control {
    border-color: var(--tg-border-strong);
    background: var(--tg-surface-2);
    color: var(--tg-text);
}

.tasting-modal__body .form-control:focus {
    border-color: var(--tg-accent);
    box-shadow: 0 0 0 .2rem var(--tg-accent-soft);
}

.tasting-modal__private {
    margin: .75rem 0 0;
    font-size: .8rem;
    color: var(--tg-muted);
}

.tasting-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .9rem 1.3rem;
    border-top: 1px solid var(--tg-border);
}

[data-theme="dark"] .tasting-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Dix demi-cibles : chaque étoile est coupée en deux boutons qui ne montrent que leur moitié. */
.tasting-stars {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.tasting-stars__half {
    width: 20px;
    height: 40px;
    padding: 0;
    border: none;
    background: none;
    overflow: hidden;
    color: var(--tg-star-off);
    font-size: 2rem;
    line-height: 40px;
    cursor: pointer;
    transition: color .15s ease, transform .15s ease;
}

.tasting-stars__half i {
    display: block;
    width: 40px;
}

.tasting-stars__half--right i {
    margin-left: -20px;
}

.tasting-stars__half--right {
    margin-right: 4px;
}

.tasting-stars__half.on {
    color: var(--tg-accent);
}

.tasting-stars__half:focus-visible {
    outline: 2px solid var(--tg-accent);
    outline-offset: 2px;
}

.tastings-scope .tasting-stars__value {
    margin-left: .75rem;
    font-weight: 700;
    color: var(--tg-text-dim);
    font-variant-numeric: tabular-nums;
}

.tasting-serves {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.tasting-pill {
    min-height: 38px;
    padding: 0 1rem;
    border: 1px solid var(--tg-border-strong);
    border-radius: 999px;
    background: var(--tg-surface);
    color: var(--tg-text);
    font-size: .88rem;
    font-weight: 600;
}

.tasting-pill.on {
    border-color: var(--tg-accent);
    background: var(--tg-accent-soft);
    color: var(--tg-accent-ink);
}

/* ---------- Page « Mes dégustations » ---------- */
.tastings-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 1.5rem 16px 3rem;
    color: var(--tg-text);
}

.tastings-page__title {
    margin: 0;
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    font-weight: 800;
}

.tastings-page__subtitle {
    margin: .35rem 0 0;
    color: var(--tg-text-dim);
}

.tastings-empty {
    margin-top: 2rem;
    padding: 2rem 1.25rem;
    border: 1px dashed var(--tg-border-strong);
    border-radius: 16px;
    background: var(--tg-surface);
    text-align: center;
    color: var(--tg-text-dim);
}

.tastings-empty h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--tg-text);
}

.tastings-empty__icon {
    margin-bottom: .75rem;
    font-size: 2rem;
    color: var(--tg-accent);
}

.tastings-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin-top: 1.25rem;
}

.tastings-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .9rem .5rem;
    border: 1px solid var(--tg-border);
    border-radius: 14px;
    background: var(--tg-surface);
    box-shadow: var(--tg-shadow);
}

.tastings-scope .tastings-stats__item strong {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--tg-accent-ink);
    font-variant-numeric: tabular-nums;
}

.tastings-scope .tastings-stats__item span {
    font-size: .78rem;
    color: var(--tg-muted);
}

/* Timeline : un fil vertical, une pastille par dégustation. */
.tastings-timeline {
    position: relative;
    margin-top: .5rem;
    padding-left: 22px;
}

.tastings-timeline::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    bottom: 0;
    left: 5px;
    width: 2px;
    border-radius: 2px;
    background: var(--tg-border-strong);
}

.tastings-timeline__month {
    margin: 1.5rem 0 .6rem;
    font-size: .95rem;
    font-weight: 750;
    text-transform: capitalize;
    color: var(--tg-text-dim);
}

.tastings-timeline__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    margin-bottom: .75rem;
    padding: .9rem;
    border: 1px solid var(--tg-border);
    border-radius: 14px;
    background: var(--tg-surface);
    box-shadow: var(--tg-shadow);
    isolation: isolate;
}

.tastings-timeline__item::before {
    content: "";
    position: absolute;
    top: 26px;
    left: -22px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--tg-accent);
    box-shadow: 0 0 0 3px var(--tg-surface-2);
}

.tastings-timeline__item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(100deg, var(--gin-c1), var(--gin-c2));
    opacity: .08;
}

.tastings-scope .tastings-timeline__media {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 64px;
    height: 84px;
    border-radius: 10px;
    background: var(--tg-surface-2);
    color: var(--tg-muted);
    font-size: 1.5rem;
}

.tastings-timeline__media img {
    max-width: 86%;
    max-height: 92%;
    object-fit: contain;
}

.tastings-timeline__body {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    flex: 1;
    min-width: 0;
}

.tastings-timeline__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.tastings-scope .tastings-timeline__date {
    font-size: .78rem;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--tg-muted);
}

.tastings-timeline__top .btn-link {
    font-size: .8rem;
    color: var(--tg-accent-ink);
    text-decoration: none;
}

.tastings-scope .tastings-timeline__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    color: var(--tg-text);
    text-decoration: none;
}

.tastings-scope .tastings-timeline__name:hover {
    text-decoration: underline;
}

.tastings-timeline__notes {
    margin: .2rem 0 0;
    font-size: .9rem;
    line-height: 1.5;
    white-space: pre-line;
    color: var(--tg-text-dim);
}

@media (max-width: 480px) {
    .tastings-stats__item strong {
        font-size: 1.25rem;
    }

    .tastings-timeline__media {
        width: 52px;
        height: 70px;
    }
}

/* ---------- Bandeau public d'agrégats sur la fiche gin ---------- */
.gin-tasting-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .9rem;
    margin-top: 1rem;
    padding: .7rem 1rem;
    border: 1px solid var(--tg-border);
    border-radius: 14px;
    background: var(--tg-accent-soft);
    color: var(--tg-text);
    font-size: .88rem;
}

.tastings-scope .gin-tasting-stats__icon {
    color: var(--tg-accent-ink);
}

.tastings-scope .gin-tasting-stats__item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--tg-text-dim);
}

.tastings-scope .gin-tasting-stats__item + .gin-tasting-stats__item::before {
    content: "·";
    margin-right: .55rem;
    color: var(--tg-muted);
}

.tastings-scope .gin-tasting-stats__item strong {
    color: var(--tg-text);
}

/* ---------- « Publier aussi comme mon avis public » ---------- */
.tasting-modal__publish {
    margin-top: .9rem;
    padding: .7rem .85rem .7rem 2.2rem;
    border: 1px solid var(--tg-border);
    border-radius: 12px;
    background: var(--tg-surface-2);
}

.tastings-scope .tasting-modal__publish-hint {
    display: block;
    font-size: .8rem;
    color: var(--tg-muted);
}

.tasting-modal__publish-warn {
    margin-top: .4rem;
    font-size: .82rem;
    font-weight: 600;
    color: #b8860b;
}

[data-theme="dark"] .tasting-modal__publish-warn {
    color: #e3b341;
}