/* ================================
   Le Grimoire Culinaire de MaruChiwa
   Style — Édition Pro v3
   ================================ */

/* ── Variables ── */
:root {
  --radius-sm:  8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow-sm:  0 2px  8px rgba(0,0,0,.18);
  --shadow-md:  0 4px 20px rgba(0,0,0,.25);
  --shadow-lg:  0 8px 40px rgba(0,0,0,.35);
  --transition: all 0.22s cubic-bezier(.4,0,.2,1);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gold: #fbbf24;
}

/* ── Reset ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  background: #050505;
  font-family: var(--font);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Scrollbar ── */
::-webkit-scrollbar            { width: 8px; }
::-webkit-scrollbar-track      { background: rgba(255,255,255,.04); }
::-webkit-scrollbar-thumb      { background: rgba(251,191,36,.3); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(251,191,36,.55); }

/* ── Sélection ── */
::selection {
  background: rgba(251,191,36,.35);
  color: #fff;
}

/* ── Animations ── */
@keyframes fadeIn  { from { opacity:0 } to { opacity:1 } }
@keyframes slideUp { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:translateY(0) } }
@keyframes slideDown{ from { opacity:0; transform:translateY(-24px) } to { opacity:1; transform:translateY(0) } }
@keyframes scaleIn { from { opacity:0; transform:scale(.93) } to { opacity:1; transform:scale(1) } }
@keyframes pulse   { 0%,100% { opacity:.5 } 50% { opacity:1 } }
@keyframes spin    { to { transform:rotate(360deg) } }

/* shimmer pour skeleton loaders */
@keyframes shimmer {
  0%   { background-position: -200% 0 }
  100% { background-position:  200% 0 }
}

/* ── Focus accessible ── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(251,191,36,.75);
  outline-offset: 2px;
}

/* ── Texte doré (classe utilitaire) ── */
.text-gold {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 60%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Classe accessible visually-hidden ── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Images ── */
img {
  max-width: 100%;
  height: auto;
}

/* ── Animation d'entrée du root ── */
#root {
  animation: fadeIn 0.3s ease-out;
}

/* ════════════════════════════════════
   RESPONSIVE MOBILE
   ════════════════════════════════════ */

/* Sur mobile la toolbar fixe peut chevaucher le contenu.
   On réserve de l'espace via padding-top dynamique.      */
@media (max-width: 600px) {
  body { font-size: 15px; }

  /* La toolbar est en haut à droite : on décale le contenu */
  #root > div > div[style*="zIndex: 1"] {
    padding-top: 80px !important;
  }

  /* La barre de recherche prend toute la largeur sur mobile */
  input[placeholder*="Rechercher"] {
    width: 120px !important;
  }
}

/* Éviter que la toolbar déborde en colonne sur petits écrans */
@media (max-width: 480px) {
  input[placeholder*="Rechercher"] {
    width: 100px !important;
    font-size: 12px !important;
  }
}

/* ════════════════════════════════════
   IMPRESSION
   ════════════════════════════════════ */
@media print {
  body {
    background: white !important;
    color: black !important;
    font-family: Georgia, serif;
    font-size: 11pt;
  }

  /* Cacher tout ce qui est fixé */
  *[style*="position:fixed"],
  *[style*="position: fixed"] {
    display: none !important;
  }

  h1 {
    color: black !important;
    -webkit-text-fill-color: black !important;
    background: none !important;
    font-size: 20pt;
    margin-bottom: 8pt;
  }

  h2 { color: #222 !important; font-size: 13pt; margin: 12pt 0 4pt; }

  button, select, nav {
    display: none !important;
  }

  textarea {
    border: 1px solid #aaa !important;
    background: white !important;
    color: black !important;
    resize: none !important;
  }

  /* Badges catégories en impression */
  span[style*="borderRadius"] {
    border: 1px solid #ccc !important;
    background: #f5f5f5 !important;
    color: black !important;
  }

  /* Éviter les coupures dans les sections */
  div[style*="marginBottom:18"],
  div[style*="marginBottom: 18"] {
    page-break-inside: avoid;
    break-inside: avoid;
    border: 1px solid #ddd !important;
    background: white !important;
    backdrop-filter: none !important;
    border-radius: 4pt;
    padding: 10pt;
    margin-bottom: 10pt;
  }

  /* QR Code toujours sur la dernière section */
  div[style*="textAlign:center"] img {
    page-break-before: avoid;
  }
}

/* ════════════════════════════════════
   PRÉFÉRENCE DE MOUVEMENT RÉDUIT
   ════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1    !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto  !important;
  }
}