/* ============================================================================
   Auteur : Jean-Yves Le Naour
   Fichier : timpo-theme.css
   Version : 1.0.0
   Date    : 2026-05-04 11:18 CEST
   Rôle    : Socle graphique global du site Timpo FR (variables, bases, cards,
            boutons génériques, tableaux, grilles et animations).
   ============================================================================ */

:root {
  /* Palette Timpo */
  --timpo-blue: #667eea;
  --timpo-purple: #764ba2;
  --timpo-green: #10b981;
  --timpo-orange: #f59e0b;
  --timpo-red: #ff6b6b;
  --timpo-gray: #374151;
  --timpo-gray-light: #f3f4f6;
  --timpo-bg: #f8f9fa;

  /* Typographie */
  --timpo-font: 'Segoe UI', system-ui, sans-serif;
  --timpo-font-size-s: 0.75rem;
  --timpo-font-size-m: 0.9rem;
  --timpo-font-size-l: 1rem;

  /* Espacements */
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 12px;
  --space-l: 16px;
  --space-xl: 24px;

  /* Rayons */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 16px;

  /* Ombres */
  --shadow-s: 0 1px 2px rgba(0,0,0,.05);
  --shadow-m: 0 2px 8px rgba(0,0,0,.08);
  --shadow-l: 0 4px 16px rgba(0,0,0,.12);

  /* Transition globale */
  --timpo-transition: all 0.25s ease;
}

/* Base page */
body {
  background: var(--timpo-bg);
  font-family: var(--timpo-font);
  line-height: 1.6;
  color: var(--timpo-gray);
}

.conteneur-principal {
  max-width: 1200px;
  margin: 2rem auto;
  padding: var(--space-m);
}

/* Cartes réutilisables */
.timpo-card {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  margin: var(--space-l) 0;
  box-shadow: var(--shadow-m);
  transition: var(--timpo-transition);
}

.timpo-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-l);
}

/* Boutons génériques */
.timpo-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-l);
  border-radius: var(--radius-m);
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: var(--timpo-transition);
  font-size: var(--timpo-font-size-m);
  text-decoration: none;
}

.timpo-btn-primary {
  background: linear-gradient(135deg, var(--timpo-blue), var(--timpo-purple));
  color: #fff;
}

.timpo-btn-primary:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

.timpo-btn-green {
  background: var(--timpo-green);
  color: #fff;
}

.timpo-btn-outline {
  border: 2px solid var(--timpo-blue);
  color: var(--timpo-blue);
  background: #fff;
}

/* Badges */
.timpo-badge {
  padding: 2px 6px;
  border-radius: var(--radius-s);
  font-size: var(--timpo-font-size-s);
  font-weight: 700;
}

.timpo-badge-blue {
  background: rgba(102,126,234,.15);
  color: var(--timpo-blue);
}

/* Tableaux */
.tableau-timpo {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
}

.tableau-timpo th,
.tableau-timpo td {
  padding: var(--space-l);
  text-align: left;
  border-bottom: 1px solid #EDF2F7;
}

.tableau-timpo th {
  background: var(--timpo-blue);
  color: #fff;
  font-weight: 600;
  position: sticky;
  top: 0;
}

.tableau-timpo tr:nth-child(even) {
  background: var(--timpo-gray-light);
}

/* Grilles */
.grille-evenements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-l);
  padding: var(--space-m) 0;
}

.evenement-carte {
  background: #fff;
  border-radius: var(--radius-l);
  padding: var(--space-l);
  transition: var(--timpo-transition);
}

.evenement-carte:hover {
  transform: translateY(-5px);
}

/* Animation */
@keyframes entree-douce {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animation-entree {
  animation: entree-douce 0.6s ease-out;
}

/* Responsive global */
@media (max-width: 768px) {
  .conteneur-principal {
    padding: var(--space-s);
  }

  .tableau-timpo th,
  .tableau-timpo td {
    padding: var(--space-m);
    font-size: 0.9rem;
  }

  .grille-evenements {
    grid-template-columns: 1fr;
  }
}