/* ============================================================
   LES TOURS DU MALT — CSS GLOBAL PREMIUM CRÈME
   Thème : fond crème chaud, accents ambre & vert, typographie Fraunces
============================================================ */

/* ─── Variables ─────────────────────────────────────────── */
:root {
    --amber:   #D98A2B;
    --gold:    #F0B429;
    --green:   #2E4A38;
    --dark:    #1A1208;
    --brick:   #C84B31;
    --cream:   #FAF8F3;
    --cream2:  #F3EFE6;
    --cream3:  #EDE6D6;
    --muted:   #9C8C7A;
    --border:  #E0D8CC;
    --text:    #1A1208;
    --textsub: #6B5E4E;
}

/* ─── Base ───────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
    background: var(--cream);
    color: var(--text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ─── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--cream2); }
::-webkit-scrollbar-thumb { background: var(--amber); border-radius: 2px; }
.beers-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.beers-scroll::-webkit-scrollbar { display: none; }

/* ─── Tailwind overrides — sections fond crème ───────────── */
/* Remplace bg-craft-dark, bg-[#181615] etc. par crème */
.section-cream  { background: var(--cream); }
.section-cream2 { background: var(--cream2); }
.section-cream3 { background: var(--cream3); }

/* Couleurs texte sur fond crème */
.text-on-cream   { color: var(--text); }
.subtext-on-cream { color: var(--textsub); }

/* ─── Reveal au scroll ───────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* ─── Animations utilitaires ─────────────────────────────── */
@keyframes bounce-slow {
    0%, 100% { transform: translateY(-4px) translateX(-50%); }
    50%       { transform: translateY(4px)  translateX(-50%); }
}
.animate-bounce-slow { animation: bounce-slow 3s ease-in-out infinite; }

@keyframes arrow-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(6px); }
}
.animate-bounce { animation: arrow-bounce 1.5s ease-in-out infinite; }

@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* ─── Composants réutilisables ───────────────────────────── */

/* Badge section */
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(46,74,56,0.2);
    background: rgba(46,74,56,0.06);
    border-radius: 100px;
    padding: 5px 16px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--green);
}

/* Titre de section */
.section-title {
    font-family: 'Fraunces', serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: var(--dark);
}
.section-title em {
    font-style: italic;
    font-weight: 400;
    color: var(--amber);
}

/* Ligne diviseur ambre */
.divider-amber {
    width: 48px; height: 2px;
    background: linear-gradient(90deg, var(--amber), var(--gold));
    border-radius: 2px;
    margin: 20px 0;
}

/* Bouton primaire dark (dark sur crème) */
.btn-dark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--dark);
    color: var(--cream);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 14px 28px;
    border-radius: 100px;
    border: 2px solid var(--dark);
    transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
    text-decoration: none;
    letter-spacing: 0.01em;
}
.btn-dark:hover {
    background: var(--amber);
    border-color: var(--amber);
    color: var(--dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(217,138,43,0.25);
}

/* Bouton outline */
.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--textsub);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 14px 24px;
    border-radius: 100px;
    border: 1.5px solid var(--border);
    transition: all 0.3s ease;
    text-decoration: none;
}
.btn-outline:hover {
    color: var(--dark);
    border-color: rgba(107,94,78,0.5);
    background: var(--cream2);
}

/* Carte générique sur fond crème */
.card-cream {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card-cream:hover {
    box-shadow: 0 16px 48px rgba(26,18,8,0.1);
    transform: translateY(-4px);
}

/* ─── Carte bière ────────────────────────────────────────── */
.beer-card {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.beer-card:hover { transform: translateY(-6px); }

/* ─── Pattern décor étiquettes ───────────────────────────── */
.pattern-malt {
    background-image: url('/assets/img/pattern-malt.svg');
    background-size: 200px 200px;
    background-repeat: repeat;
}

/* ─── Line clamp ─────────────────────────────────────────── */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── Prose ──────────────────────────────────────────────── */
.prose p      { margin-bottom: 1.25rem; color: var(--textsub); line-height: 1.75; }
.prose h2     { font-family: 'Fraunces', serif; font-size: 1.75rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--dark); }
.prose h3     { font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--dark); }
.prose ul     { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose li     { margin-bottom: 0.4rem; color: var(--textsub); }
.prose strong { color: var(--dark); }
.prose a      { color: var(--amber); text-decoration: underline; }
.prose blockquote {
    border-left: 3px solid var(--amber);
    padding-left: 1rem;
    color: var(--textsub);
    font-style: italic;
    margin: 1.5rem 0;
}

/* ─── Focus ring ─────────────────────────────────────────── */
input:focus, textarea:focus, select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(217,138,43,0.2);
    border-color: var(--amber) !important;
}

/* ─── Tables admin ───────────────────────────────────────── */
table { border-collapse: collapse; }

/* ─── Print ──────────────────────────────────────────────── */
@media print {
    aside, button, a[href] { display: none !important; }
    .main-content { margin-left: 0 !important; }
}