/* =========================================================
   THÈME FEUILLETTE — crème / chocolat / or
   Pour revenir à l'ancien design : supprimer la ligne
   <link ... theme-feuillette.css> et <script ... theme-feuillette.js>
   dans index.html.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --primary: #4A2A18;
    --primary-dark: #331C0F;
    --primary-light: #6B4128;
    --primary-surface: #F3EADB;
    --accent: #B39E6A;
    --accent-light: #EFE6D2;
    --cream: #F7F1E6;
    --paper: #FFFCF6;
    --line: #E4D8C2;
    --ink: #3A2416;
    --muted: #8A7560;
    --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Base ---------- */
html body {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--ink);
    background-color: var(--cream);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html h1, html h2, html h3,
html .text-2xl, html .text-3xl, html .text-4xl {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    letter-spacing: -0.005em;
}
html ::selection { background: var(--accent); color: #fff; }

/* ---------- Header ---------- */
html .glass-header {
    background: rgba(255, 252, 246, .92);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(179, 158, 106, .25);
}
html .glass-header .text-white,
html .glass-header .text-red-100,
html .glass-header .text-red-200 { color: var(--ink); }
html .glass-header [class*="bg-white/"],
html .glass-header [class*="bg-black/"] { background: transparent; border-color: var(--line); }
html .glass-header button:hover { background: var(--primary-surface); color: var(--primary); }
.fl-logo { height: 44px; width: auto; transition: transform .5s var(--ease); }
.fl-logo:hover { transform: rotate(-4deg) scale(1.04); }
.fl-brand { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.6rem; letter-spacing: .08em; color: var(--primary); line-height: 1; }
.fl-tag { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--accent); font-size: .85rem; }

/* ---------- Cartes ---------- */
html .glass-card {
    background: var(--paper);
    backdrop-filter: none;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(74, 42, 24, .04), 0 8px 24px -12px rgba(74, 42, 24, .12);
    transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
html .bg-white { background-color: var(--paper); }

/* ---------- Remap de la palette ---------- */
html .bg-slate-50  { background-color: #FAF5EC; }
html .bg-slate-100 { background-color: #F1E8D8; }
html .bg-slate-900, html .bg-slate-800 { background-color: var(--primary); }
html .border-slate-100 { border-color: #EFE6D5; }
html .border-slate-200, html .border-slate-300 { border-color: var(--line); }
html .divide-slate-100 > * + *, html .divide-slate-200 > * + * { border-color: var(--line); }
html .text-slate-900, html .text-slate-800 { color: var(--ink); }
html .text-slate-700, html .text-slate-600 { color: #5C4331; }
html .text-slate-500, html .text-slate-400 { color: var(--muted); }

html .text-red-800, html .text-red-900, html .feuillette-text { color: var(--primary); }
html .border-red-800, html .feuillette-border { border-color: var(--primary); }
html .bg-red-50  { background-color: var(--primary-surface); }
html .bg-red-800, html .bg-red-900, html .feuillette-bg { background-color: var(--primary); }
html .feuillette-bg-gradient { background: linear-gradient(160deg, #5A3520 0%, #3A2114 100%); }
html .shadow-red-900\/20 { --tw-shadow-color: rgba(74, 42, 24, .2); }

/* Statuts : tons naturels */
html .bg-emerald-100 { background-color: #E3EADB; }
html .text-emerald-700, html .text-emerald-800 { color: #4F6B45; }
html .bg-emerald-700, html .bg-emerald-600 { background-color: #6F8A62; }
html .bg-amber-50  { background-color: #FBF3E2; }
html .bg-amber-100 { background-color: #F5E6C6; }
html .text-amber-900, html .text-amber-800 { color: #7A5A1E; }
html .border-amber-200 { border-color: #EAD8AE; }
html .status-badge { border-radius: 4px; letter-spacing: .04em; text-transform: uppercase; font-size: 10px; }
html .status-badge.status-en-attente::before { background-color: #C9962F; }
html .status-badge.status-confirmee::before  { background-color: #6F8A62; }
html .status-badge.status-prepa::before      { background-color: #8C6A4A; }
html .status-badge.status-prete::before      { background-color: #B39E6A; }
html .status-badge.status-livree::before     { background-color: #4A2A18; }
html .status-badge.status-annulee::before    { background-color: #A3402E; }

/* ---------- Boutons & champs ---------- */
html .feuillette-hover { transition: background-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
html .feuillette-hover:hover { background-color: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(74, 42, 24, .45); }
html button { transition: transform .2s var(--ease), background-color .2s, color .2s, box-shadow .2s; }
html button:active { transform: scale(.97); }
html input, html select, html textarea { background-color: var(--paper); border-color: var(--line); transition: border-color .2s, box-shadow .2s; }
html input:focus, html select:focus, html textarea:focus, html .feuillette-ring:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(179, 158, 106, .25);
}

/* ---------- Tableaux ---------- */
html thead th { font-weight: 600; color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .08em; border-bottom: 1px solid var(--accent) !important; }
html tbody tr { transition: background-color .25s var(--ease); }
html tbody tr:hover { background-color: #F6EEDF; }

/* Suppression des "blobs" flous typés IA */
html .blur-2xl.rounded-full { display: none; }

/* ---------- Animations ---------- */
@keyframes flRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes flLogo { from { opacity: 0; transform: scale(.92) rotate(-6deg); } to { opacity: 1; transform: none; } }
html .tab-content-enter { animation: flRise .5s var(--ease) both; }
html .modal-animated { animation: flRise .45s var(--ease) both; }
.fl-stagger { animation: flRise .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.fl-login-logo { width: 110px; margin: 0 auto 12px; display: block; animation: flLogo .9s var(--ease) both; }
html .animate-bounce { animation: flRise .4s var(--ease) both; }

/* Scrollbar */
html ::-webkit-scrollbar-thumb { background: #D8C9AC; }
html ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}