/* ============================================================================
   Auteur : Jean-Yves Le Naour
   Fichier : BandeauControleModerne.css
   Version : 1.0.0
   Date    : 2026-05-04 11:18 CEST
   Rôle    : Styles dédiés au bandeau v5.5 (vues, recherche, filtres, CSV, stats)
   Notes   : Optimisé pour Kadence et pour le mobile portrait.
   ============================================================================ */

:root {
  --timpo-blue: #667eea;
  --timpo-purple: #764ba2;
  --timpo-green: #10b981;
  --timpo-green-dark: #059669;
  --timpo-orange: #f59e0b;
  --timpo-orange-dark: #d97706;
  --timpo-red: #ef4444;
  --timpo-text: #374151;
  --timpo-border: rgba(102,126,234,.18);
  --timpo-soft: rgba(102,126,234,.08);
  --timpo-soft-2: rgba(0,0,0,.03);
  --timpo-shadow: 0 4px 18px rgba(0,0,0,.08);
  --timpo-shadow-2: 0 6px 16px rgba(0,0,0,.12);
  --timpo-radius: 14px;
  --timpo-radius-s: 10px;
  --timpo-transition: 0.2s ease;
}

/* Conteneur principal du bandeau */
.bandeau-v55 {
  background: #fff;
  border-radius: var(--timpo-radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1.4rem;
  box-shadow: var(--timpo-shadow);
  border: 1px solid var(--timpo-border);
}

/* Lignes de structure */
.bandeau-ligne1,
.bandeau-ligne2 {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
}

.bandeau-ligne1 { margin-bottom: .95rem; }
.bandeau-ligne2 { justify-content: space-between; padding-top: .95rem; border-top: 1px solid rgba(0,0,0,.06); }

/* Groupe des vues */
.vues-groupe {
  display: flex;
  flex-wrap: nowrap;
  gap: .45rem;
  background: var(--timpo-soft-2);
  padding: .35rem;
  border-radius: 12px;
  align-items: center;
}

/* Boutons de vue */
.vue-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .55rem .95rem;
  border-radius: 10px;
  border: 1px solid rgba(102,126,234,.22);
  background: #fff;
  color: #1159af;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--timpo-transition), background var(--timpo-transition), color var(--timpo-transition), border-color var(--timpo-transition), box-shadow var(--timpo-transition);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* Icônes des boutons de vue */
.vue-btn svg,
.vue-btn i {
  color: currentColor;
  fill: currentColor;
}

.vue-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.vue-btn:hover {
  transform: translateY(-1px);
  border-color: var(--timpo-blue);
  background: rgba(102,126,234,.08);
}

.vue-btn.active {
  background: linear-gradient(135deg, var(--timpo-blue), var(--timpo-purple));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(102,126,234,.22);
}

/* Bloc recherche et création calendrier */
.actions-groupe {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex: 1;
  flex-wrap: wrap;
}

.recherche-box {
  flex: 1;
  min-width: 220px;
  max-width: 420px;
  position: relative;
  display: flex;
  align-items: center;
}

.recherche-box i.fa-search {
  position: absolute;
  left: .85rem;
  color: var(--timpo-blue);
  font-size: .98rem;
  pointer-events: none;
  z-index: 1;
}

.recherche-box input {
  width: 100%;
  padding: .72rem 2.8rem .72rem 2.45rem;
  border: 2px solid rgba(102,126,234,.25);
  border-radius: 12px;
  font-size: .95rem;
  font-weight: 500;
  transition: var(--timpo-transition);
}

.recherche-box input:focus {
  outline: 0;
  border-color: var(--timpo-blue);
  box-shadow: 0 0 0 3px rgba(102,126,234,.14);
}

.btn-clear {
  position: absolute;
  right: .6rem;
  background: var(--timpo-red);
  border: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.btn-clear i {
  font-size: .7rem;
  color: #fff;
}

.btn-creer-cal {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.15rem;
  background: linear-gradient(135deg, var(--timpo-green), var(--timpo-green-dark));
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: .92rem;
  box-shadow: 0 3px 10px rgba(16,185,129,.28);
  transition: var(--timpo-transition);
  white-space: nowrap;
}

.btn-creer-cal:hover {
  transform: translateY(-1px);
  box-shadow: var(--timpo-shadow-2);
}

/* Filtres */
.filtres-compact {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.label-aff {
  font-size: .85rem;
  color: var(--timpo-text);
  font-weight: 600;
}

.filtre-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .85rem;
  border: 2px solid #9ca3af;
  background: #fff;
  color: var(--timpo-text);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: .85rem;
  transition: var(--timpo-transition);
}

.filtre-btn:hover {
  border-color: var(--timpo-blue);
  background: rgba(102,126,234,.08);
  transform: translateY(-1px);
}

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

/* CSV et bascule */
.actions-compact {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.btn-csv,
.btn-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .9rem;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: .85rem;
  color: #fff;
  border: 0;
  transition: var(--timpo-transition);
  white-space: nowrap;
  text-decoration: none;
}

.btn-csv {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.btn-toggle {
  background: linear-gradient(135deg, var(--timpo-orange), var(--timpo-orange-dark));
}

.btn-csv:hover,
.btn-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.14);
}

/* Statistiques */
.stats-avec-labels {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem;
  background: rgba(102,126,234,.08);
  border-radius: 10px;
  border: 1px solid rgba(102,126,234,.15);
}

.stat-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
}

.stat-label {
  font-size: .7rem;
  color: #6b7280;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.stat-valeur {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .85rem;
  font-weight: 800;
  color: var(--timpo-text);
}

.stat-valeur i {
  color: var(--timpo-blue);
  font-size: .9rem;
}

.stat-sep {
  color: #9ca3af;
  font-size: 1rem;
  font-weight: 700;
}

/* Tablettes */
@media (max-width: 1024px) and (min-width: 601px) {
  .vue-btn,
  .filtre-btn,
  .btn-csv,
  .btn-toggle {
    padding: .45rem .8rem;
    font-size: .82rem;
  }

  .btn-creer-cal {
    padding: .6rem .95rem;
    font-size: .84rem;
  }

  .vues-groupe {
    gap: .35rem;
  }
}

/* Mobile paysage */
@media (max-width: 600px) and (orientation: landscape) {
  .bandeau-v55 { padding: .8rem .75rem; }
  .bandeau-ligne1,
  .bandeau-ligne2 { gap: .65rem; }
  .vue-btn { padding: .45rem .72rem; font-size: .78rem; }
  .recherche-box { min-width: 180px; }
  .btn-creer-cal { padding: .58rem .85rem; font-size: .82rem; }
}

/* Mobile portrait */
@media (max-width: 600px) and (orientation: portrait) {
  .bandeau-v55 { padding: .72rem .65rem; border-radius: 12px; }
  .bandeau-ligne1,
  .bandeau-ligne2 {
    flex-direction: column;
    align-items: stretch;
    gap: .65rem;
  }

  .vues-groupe {
    width: 100%;
    padding: .32rem;
    gap: .32rem;
  }

  .vue-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: .55rem 0;
    font-size: 0;
    border-radius: 10px;
  }

  .vue-btn span {
    display: none;
  }

  .vue-btn svg,
  .vue-btn i {
    width: 20px;
    height: 20px;
    font-size: 20px;
  }

  .actions-groupe {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
  }

  .recherche-box {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .recherche-box input {
    font-size: 16px;
  }

  .btn-creer-cal {
    width: 100%;
    justify-content: center;
  }

  .bandeau-ligne2 {
    padding-top: .75rem;
    margin-top: .1rem;
  }

  .filtres-compact {
    width: 100%;
    flex-wrap: wrap;
  }

  .label-aff {
    display: none;
  }

  .actions-compact {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .stats-avec-labels {
    width: 100%;
    justify-content: center;
  }
}

/* Très petits écrans */
@media (max-width: 420px) {
  .vue-btn { padding: .52rem 0; }
  .filtre-btn { padding: .4rem .58rem; font-size: .72rem; }
  .btn-csv,
  .btn-toggle { padding: .42rem .62rem; font-size: .72rem; }
  .btn-csv span,
  .btn-toggle span,
  .cal-text { display: none; }
  .stat-label { font-size: .62rem; }
  .stat-valeur { font-size: .74rem; }
}