/* Composants de l'interface « Carnet » : puces, cartes, boutons de choix. Les couleurs viennent du thème DaisyUI « beer ». */
.pb-title { font-family: 'Castoro', serif; color: var(--color-secondary); }

.pb-card {
    background: var(--color-base-200);
    border: 1px solid #d9cfc5;
    border-radius: 0.75rem;
}

.pb-card.is-general { background: var(--color-primary); border-color: var(--color-secondary); }

/* Chiffres des statistiques : une seule teinte (celle du thème « success »), lisible sur le fond beige */
.pb-stat { color: var(--color-success); }

/* Pastille d'information (style, degré, note) */
.pb-pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.5rem; border-radius: 9999px; border: 1px solid #d9cfc5; background: var(--color-base-100); font-size: 0.625rem; line-height: 1.2; color: #6b625a; }
.pb-pill.hidden { display: none; }  /* nearby.js masque et révèle les pastilles avec « hidden » */
.pb-pill.is-primary { background: var(--color-primary); border-color: var(--color-secondary); color: #000; font-weight: 700; }

.pb-section {
    display: flex; justify-content: space-between; align-items: baseline;
    margin: 1.25rem 0 0.5rem; font-weight: 700; font-size: 1rem;
}
.pb-section a { font-size: 0.75rem; font-weight: 500; color: #6b625a; }

/* Bouton retour de toutes les pages (partials/back_link.html) ; « .pb-back--float » : posé sur une photo */
.pb-back { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9999px; flex-shrink: 0; color: var(--color-secondary); transition: background 0.15s, transform 0.15s; }
.pb-back:hover { background: rgba(0, 0, 0, 0.06); }
.pb-back:active { transform: scale(0.94); }
.pb-back--float { background: color-mix(in srgb, var(--color-base-200) 90%, transparent); border: 1px solid color-mix(in srgb, var(--color-secondary) 20%, transparent); color: #000; backdrop-filter: blur(4px); box-shadow: 0 1px 2px #0002; }
.pb-back--float:hover { background: var(--color-base-200); }

/* Visionneuse d'image (partials/image_viewer.html) : image entière sur un fond flou ; « data-zoom-image » marque les images cliquables */
img[data-zoom-image] { cursor: zoom-in; }
.pb-viewer { width: 100%; height: 100%; max-width: none; max-height: none; padding: 1rem; border: 0; background: transparent; cursor: zoom-out; }
.pb-viewer[open] { display: flex; align-items: center; justify-content: center; }
.pb-viewer::backdrop { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.pb-viewer-image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0.75rem; box-shadow: 0 8px 32px #0006; }

/* Puce : filtre, onglet ou choix */
.pb-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.4rem 0.85rem; border-radius: 9999px; font-size: 0.8rem; line-height: 1.2;
    background: var(--color-base-200); border: 1px solid #d9cfc5; color: var(--color-secondary);
    white-space: nowrap; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.pb-chip:hover { border-color: var(--color-secondary); }
.pb-chip.is-on, .pb-chip[aria-current="true"], .pb-chip[aria-pressed="true"] { background: var(--color-secondary); color: var(--color-base-200); border-color: var(--color-secondary); }
.pb-chip.is-primary { background: var(--color-primary); border-color: var(--color-primary); color: #000; }
.pb-chips { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: none; }
.pb-chips::-webkit-scrollbar { display: none; }

/* Choix unique (boutons radio affichés comme des puces) */
.pb-choice { position: relative; display: inline-block; }
.pb-choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.pb-choice span {
    display: inline-flex; align-items: center; padding: 0.5rem 0.95rem; border-radius: 9999px; font-size: 0.85rem;
    background: var(--color-base-100); border: 1px solid #d9cfc5; color: var(--color-secondary); transition: background 0.15s;
}
.pb-choice input:checked + span { background: var(--color-primary); border-color: var(--color-secondary); font-weight: 600; }
.pb-choice input:focus-visible + span { outline: 2px solid var(--color-secondary); outline-offset: 2px; }

.pb-input, .pb-select {
    width: 100%; padding: 0.6rem 0.75rem; border: 1px solid #d9cfc5; border-radius: 0.6rem;
    background-color: var(--color-base-100); font-size: 0.9rem; color: var(--color-secondary);
}
.pb-input:focus, .pb-select:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* Listes déroulantes : une seule flèche, la nôtre, pour tous les <select> du site (le navigateur et les styles de formulaire en ajoutaient chacun une) */
select:not([multiple]):not([size]) {
    appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem 1rem;
}


/* Ligne de réglage (Profil) */
.pb-set { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 0.9rem; border-bottom: 1px solid #d9cfc5; color: var(--color-secondary); }
.pb-set:last-child { border-bottom: 0; }
.pb-set > span { flex: 1; }
.pb-set:hover { background: color-mix(in oklab, var(--color-primary) 18%, transparent); }
.pb-set.is-danger { color: var(--color-error); font-weight: 600; }
.pb-set.is-danger:hover { background: color-mix(in oklab, var(--color-error) 12%, transparent); }

/* Glissement des onglets (tab_slide.js) */
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(15px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-15px); }
    to { opacity: 1; transform: translateX(0); }
}

.slide-in-right {
    animation: slideInRight 0.25s ease-out forwards;
}
.slide-in-left {
    animation: slideInLeft 0.25s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
    .slide-in-right, .slide-in-left { animation: none; }
}


/* Fenêtres : même habillage pour toutes (DaisyUI), en-tête avec croix de fermeture, étiquettes de champ */
.modal-box { background: var(--color-base-200); border: 1px solid #d9cfc5; border-radius: 1rem; color: var(--color-secondary); }
.modal-box.border-error { border-color: var(--color-error); }
.pb-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.pb-label { display: block; font-size: 0.75rem; font-weight: 700; margin-bottom: 0.25rem; }

/* Fenêtre de notation en deux étapes (modal_steps.js) : sans JavaScript, tout est affiché et les boutons d'étape sont masqués */
.js [data-steps] [data-step="2"], .js dialog[data-step="2"] [data-steps] [data-step="1"] { display: none; }
.js dialog[data-step="2"] [data-steps] [data-step="2"] { display: block; }
dialog[data-step="2"] [data-hide-on-step-2] { display: none; }
html:not(.js) [data-step-go], html:not(.js) [data-step-back] { display: none; }

/* Barre de progression et récapitulatif par étapes (ajout de bière, inscription, notation d'une bière) */
.wizard-progress { height: 8px; border-radius: 4px; background: #e5ddd4; overflow: hidden; }
.wizard-progress > i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--color-primary); transition: width 0.3s ease; }
@media (prefers-reduced-motion: reduce) { .wizard-progress > i { transition: none; } }
.pb-recap .recap-row { display: flex; gap: 0.75rem; align-items: baseline; justify-content: space-between; width: 100%; text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid #d9cfc5; }
.pb-recap .recap-row:last-child { border-bottom: 0; }
.pb-recap .recap-row:hover { background: color-mix(in oklab, var(--color-primary) 18%, transparent); }
.pb-recap dt { font-size: 0.8rem; color: #6b625a; flex: none; }
.pb-recap dd { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.pb-recap dd.is-empty { font-weight: 400; color: #6b625a; font-style: italic; }

/* Notation par étapes (stepper.js) : un panneau à la fois ; sans JavaScript tout est affiché et la navigation est masquée */
.js [data-stepper] .pb-stepper-step { display: none; }
.js [data-stepper][data-current="1"] [data-stepper-step="1"],
.js [data-stepper][data-current="2"] [data-stepper-step="2"],
.js [data-stepper][data-current="3"] [data-stepper-step="3"],
.js [data-stepper][data-current="4"] [data-stepper-step="4"],
.js [data-stepper][data-current="5"] [data-stepper-step="5"],
.js [data-stepper][data-current="6"] [data-stepper-step="6"] { display: block; animation: pb-step-in 0.25s ease; }
.js [data-stepper][data-current="1"] [data-stepper-back] { visibility: hidden; }
.js [data-stepper]:not([data-last]) [data-stepper-submit], .js [data-stepper][data-last] [data-stepper-next] { display: none; }
html:not(.js) [data-stepper] [data-stepper-back], html:not(.js) [data-stepper] [data-stepper-next], html:not(.js) [data-stepper] > header { display: none; }
html:not(.js) [data-stepper] .pb-stepper-step { margin-bottom: 1rem; }
@keyframes pb-step-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js [data-stepper] .pb-stepper-step { animation: none !important; } }

/* Liste de choix de dégustations (carnets) : défilante, lignes rendues à la demande (content-visibility) pour rester fluide avec des centaines de bières */
.pb-picker-list { max-height: 15rem; overflow-y: auto; border: 1px solid #d9cfc5; border-radius: 0.75rem; background: var(--color-base-100); }
.pb-picker-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.75rem; border-bottom: 1px solid #ece5dd; cursor: pointer; content-visibility: auto; contain-intrinsic-size: auto 3rem; }
.pb-picker-row:last-of-type { border-bottom: 0; }
.pb-picker-row:hover { background: color-mix(in oklab, var(--color-primary) 18%, transparent); }
.pb-picker-row[hidden] { display: none; }
.pb-picker-row:has(input:checked) { background: color-mix(in oklab, var(--color-primary) 28%, transparent); }
/* Case à cocher : carré arrondi, jaune quand elle est cochée, avec une vraie coche (la règle globale de base.css retire celle de daisyUI) */
.pb-picker-row input[type=checkbox] {
    appearance: none; -webkit-appearance: none; flex-shrink: 0;
    width: 1.4rem; height: 1.4rem; border-radius: 0.4rem;
    border: 2px solid var(--color-primary); background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: 80%;
    transition: background-color 0.12s ease, transform 0.12s ease;
}
.pb-picker-row input[type=checkbox]::before { display: none; }
.pb-picker-row input[type=checkbox]:checked {
    /* la règle globale [type=checkbox]:checked (!important) peint fond et bord en `currentcolor` : on règle donc la couleur du texte */
    color: var(--color-primary); background-color: var(--color-primary); box-shadow: 0 0 0 1.5px var(--color-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211811' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    transform: scale(1.05);
}
.pb-picker-row input[type=checkbox]:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; }

/* Menus « trois points » (DaisyUI dropdown) : même habillage partout */
.pb-menu { background: var(--color-base-200); border: 1px solid #d9cfc5; border-radius: 0.75rem; padding: 0.375rem; box-shadow: 0 10px 28px rgba(51, 51, 51, 0.14); color: var(--color-secondary); }
.pb-menu li > a, .pb-menu li > button { border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; }
.pb-menu li > a:hover, .pb-menu li > button:hover, .pb-menu li > a:focus-visible, .pb-menu li > button:focus-visible { background: color-mix(in oklab, var(--color-primary) 22%, transparent); }
.pb-menu li > .text-error:hover { background: color-mix(in oklab, var(--color-error) 12%, transparent); }

/* Contenu des fenêtres : titres, champs et boutons principaux au style du thème, sans modifier chaque gabarit */
.modal-box h3:not(.text-error) { font-family: 'Castoro', serif; color: var(--color-secondary); border-bottom: 0; }
.modal-box :is(.input, .textarea, .select) { background: var(--color-base-100); border-color: #d9cfc5; border-radius: 0.6rem; }
.modal-box .btn-success { background: var(--color-primary); border-color: var(--color-secondary); color: #000; }

/* Boutons « contour » principaux : texte et contour du thème (le jaune seul manque de contraste sur le fond beige) */
.btn-outline.btn-primary { color: var(--color-secondary); border-color: var(--color-secondary); background: transparent; }
.btn-outline.btn-primary:hover { color: #000; border-color: var(--color-secondary); background: color-mix(in oklab, var(--color-primary) 30%, transparent); }

/* Attente visible (static/script/pending.js) : bouton grisé avec un cercle qui tourne, zone estompée pendant un rechargement. Le cercle et
   l'estompage n'apparaissent qu'après un court délai pour ne pas clignoter sur une réponse rapide. */
.pb-spinner {
    display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.15em; margin-right: 0.4em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: pb-spin 0.7s linear infinite, pb-appear 0.15s 0.15s backwards;
}
.btn-circle > .pb-spinner, .btn-square > .pb-spinner { margin-right: 0; }
.pb-pending { cursor: progress; }
.pb-pending > svg { display: none; }  /* l'icône du bouton cède la place au cercle */
a.pb-pending { pointer-events: none; opacity: 0.7; }
.pb-region { opacity: 0.55; pointer-events: none; transition: opacity 0.15s 0.15s; cursor: progress; }
.pb-search-spinner { display: none; }
#search-form[aria-busy="true"] .pb-search-spinner { display: inline-block; }
#search-form[aria-busy="true"] .pb-search-icon { display: none; }
@keyframes pb-spin { to { transform: rotate(360deg); } }
@keyframes pb-appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pb-spinner { animation: pb-appear 0.15s 0.15s backwards; border-right-color: currentColor; opacity: 0.6; } }

/* Appui immédiat : les puces et les boutons de choix réagissent dès le toucher */
.pb-chip:active, .pb-choice:active { transform: scale(0.96); }

/* Champs des formulaires générés par Django (forms.PLAIN_INPUT_CLASS) et champ refusé, vidé pour être ressaisi (forms.clear_invalid_fields) */
.pb-plain-input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px; box-sizing: border-box; }
.pb-field-invalid { border: 2px solid #ef4444 !important; }
.pb-plain-input.is-tight { margin-bottom: 0; }