/**
 * custom.css - Charte Visuelle « L'École buissonnière » de Neaufles-Saint-Martin
 * Ambiance chaleureuse, enfantine, scolaire & champêtre
 */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700;800&family=Quicksand:wght@500;600;700;800&family=Caveat:wght@600;700&family=JetBrains+Mono:wght@700;800&display=swap');

:root {
  --font-display: 'Fredoka', cursive, sans-serif;
  --font-body: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-hand: 'Caveat', cursive;
  --font-mono: 'JetBrains Mono', monospace;

  /* Palette officielle inspirée des visuels de l'association */
  --bg-cream: #FCFBF7;
  --bg-cream-alt: #F7F3EB;
  --green-deep: #1B4332;
  --green-forest: #2D6A4F;
  --green-leaf: #40916C;
  --green-mint: #52B788;
  --green-pastel: #D8F3DC;
  
  --sun-gold: #F6BD60;
  --sun-warm: #E76F51;
  --sun-light: #FEF3C7;
  
  --coral-pink: #F28482;
  --coral-light: #FEE2E2;

  --sky-blue: #84D2F6;
  --sky-light: #E0F2FE;

  --ink-slate: #2C3E2D;
  --ink-muted: #5C6F5E;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-cream);
  color: var(--ink-slate);
  background-image: 
    radial-gradient(#52B788 0.65px, transparent 0.65px),
    radial-gradient(#F6BD60 0.65px, var(--bg-cream) 0.65px);
  background-size: 28px 28px;
  background-position: 0 0, 14px 14px;
}

h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
}

.font-hand {
  font-family: var(--font-hand);
}

.font-mono {
  font-family: var(--font-mono);
}

/* --- BANNIÈRE RUBAN SURPIQUÉE (Style affiche) --- */
.stitched-ribbon {
  background: linear-gradient(135deg, #40916C, #2D6A4F);
  color: white;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 24px;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(45, 106, 79, 0.25);
  border: 2px dashed rgba(255, 255, 255, 0.85);
}

.stitched-ribbon-amber {
  background: linear-gradient(135deg, #F6BD60, #E76F51);
  color: white;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 20px;
  border-radius: 9999px;
  border: 2px dashed rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(231, 111, 81, 0.25);
}

/* --- GUIRLANDE DE FANIONS MULTICOLORES DÉCORATIVE --- */
.bunting-bar {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  overflow: hidden;
  height: 24px;
  user-select: none;
  pointer-events: none;
}

.bunting-flag {
  width: 22px;
  height: 22px;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  animation: flagSwing 3s ease-in-out infinite alternate;
  transform-origin: top center;
}

.bunting-flag:nth-child(even) { animation-duration: 2.4s; animation-delay: 0.2s; }
.bunting-flag:nth-child(3n) { animation-duration: 3.1s; animation-delay: 0.5s; }

@keyframes flagSwing {
  0% { transform: rotate(-3deg); }
  100% { transform: rotate(3deg); }
}

/* --- CARTES ET CADRES ENFANTINS ET CHALEUREUX --- */
.card-school {
  background: #FFFFFF;
  border-radius: 24px;
  border: 2px solid #EAE4D9;
  box-shadow: 0 10px 25px -5px rgba(45, 106, 79, 0.06), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-school:hover {
  border-color: #B7E4C7;
}

/* --- JAUGE DES PLACES EN DIRECT --- */
.jauge-container {
  background: linear-gradient(135deg, #FFFFFF 0%, #FAF6EE 100%);
  border: 2px solid #D8F3DC;
  border-radius: 24px;
  box-shadow: 0 12px 30px -8px rgba(45, 106, 79, 0.15);
  position: relative;
  overflow: hidden;
}

.jauge-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #F28482, #F6BD60, #52B788, #84D2F6, #9D4EDD);
}

.live-pulse-dot {
  width: 10px;
  height: 10px;
  background-color: #10B981;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}

.live-pulse-dot::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  border: 2px solid #10B981;
  animation: pulseLive 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulseLive {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

.progress-track {
  height: 16px;
  background-color: #EBF3ED;
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}

.progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #52B788 0%, #F6BD60 70%, #F28482 100%);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(45, 106, 79, 0.3);
}

/* --- BOUTONS ÉCOLE BUISSONNIÈRE --- */
.btn-ecole {
  background: linear-gradient(135deg, #2D6A4F 0%, #1B4332 100%);
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: 18px;
  padding: 14px 28px;
  box-shadow: 0 6px 18px -2px rgba(27, 67, 50, 0.35);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-ecole:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -3px rgba(27, 67, 50, 0.45);
  filter: brightness(1.05);
}

.btn-ecole:active {
  transform: translateY(0);
}

/* --- PACKS CARTONS INTERACTIFS --- */
.pack-card {
  background: #FFFFFF;
  border: 2px solid #EAE4D9;
  border-radius: 20px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.pack-card:hover {
  transform: translateY(-3px);
  border-color: #52B788;
  box-shadow: 0 10px 20px -5px rgba(82, 183, 136, 0.2);
}

.pack-card.selected {
  border-color: #2D6A4F;
  background: #F0FDF4;
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.2), 0 12px 24px -6px rgba(45, 106, 79, 0.18);
  transform: translateY(-2px);
}

/* Modal confirmation */
.modal-overlay {
  background-color: rgba(27, 67, 50, 0.7);
  backdrop-filter: blur(6px);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Styles pour le plan de table 40 tables */
.table-bubble {
  border-radius: 12px;
  transition: all 0.15s ease;
}

.table-bubble:hover {
  transform: scale(1.05);
  z-index: 10;
}

/* Impression */
@media print {
  body {
    background: white !important;
    color: black !important;
  }
  header, nav, .no-print, button, input[type="text"] {
    display: none !important;
  }
  .print-only {
    display: block !important;
  }
}