/* ============================================================
   creneaux.css — Page Créneaux CTT Brunoy v2
   Design moderne et sobre : intro centrée, encadrants en cartes,
   tableau desktop avec fusion automatique des cellules,
   bascule en cartes empilées sur mobile.
   ============================================================ */

/* ============================================================
   FOND DE PAGE (vagues, identique à l'accueil)
   Si le nom de fichier diffère chez toi, remplace juste le chemin
   ci-dessous — c'est la seule ligne à changer.
   ============================================================ */
.page-wrapper.page-creneaux {
  background-image  : url('../Image/Fond/Creneaux.png');
  background-repeat  : no-repeat;
  background-size    : cover;
  background-position: top center;
}

/* ============================================================
   1. INTRODUCTION
   .creneaux-intro, .creneaux-titre, .creneaux-titre::after,
   .creneaux-texte : voir global.css §10 (composants partagés)
   ============================================================ */

/* ============================================================
   2. GRILLE PRINCIPALE (encadrants + tableau)
   ============================================================ */
.creneaux-grid {
  display              : grid;
  grid-template-columns: 300px 1fr;
  gap                  : var(--espace-lg);
  align-items          : start;
  padding-bottom       : var(--espace-xl);
}

/* .creneaux-soustitre : voir global.css §10 (mutualisé avec .annonce-detail-titre) */


/* ============================================================
   3. COLONNE ENCADRANTS
   ============================================================ */
.liste-encadrants {
  display      : flex;
  flex-direction: column;
  gap          : var(--espace-xs);
  margin-bottom: var(--espace-md);
}

.carte-encadrant {
  display      : flex;
  align-items  : center;
  gap          : var(--espace-sm);
  padding      : var(--espace-sm);
  background   : var(--blanc);
  border       : 1px solid var(--gris-bordure);
  border-radius: var(--rayon-md);
  transition   : transform var(--transition), box-shadow var(--transition);
}

/* .carte-encadrant:hover : voir global.css §10 (mutualisé avec .comp-tournois-carte:hover) */

.carte-encadrant img {
  width        : 56px;
  height       : 56px;
  border-radius: 50%;
  object-fit   : cover;
  flex-shrink  : 0;
  background   : var(--gris-clair);
}

.carte-encadrant-texte {
  display       : flex;
  flex-direction: column;
  gap           : 2px;
  min-width     : 0;
}

.carte-encadrant-nom {
  font-family: var(--font-sous-titre);
  font-size  : 14px;
  color      : var(--noir-texte);
}

.carte-encadrant-nom strong {
  font-weight: 700;
}

.carte-encadrant-role {
  font-family: var(--font-texte);
  font-size  : 12px;
  color      : var(--gris-texte);
}

/* Bouton de téléchargement des horaires */
.carte-telechargement {
  display      : flex;
  align-items  : center;
  gap          : var(--espace-sm);
  padding      : var(--espace-sm);
  background   : var(--gris-clair);
  border       : 1px solid var(--gris-bordure);
  border-radius: var(--rayon-md);
  text-decoration: none;
  transition   : background var(--transition), transform var(--transition);
}

.carte-telechargement:hover {
  background: #e8eef5;
  transform : translateY(-2px);
}

.carte-telechargement-icone {
  width          : 36px;
  height         : 36px;
  flex-shrink    : 0;
  border-radius  : 50%;
  background     : var(--bleu-bouton);
  color          : var(--blanc);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 16px;
}

.carte-telechargement strong {
  display    : block;
  font-family: var(--font-sous-titre);
  font-size  : 13px;
  color      : var(--noir-texte);
}

.carte-telechargement small {
  font-family: var(--font-texte);
  font-size  : 11px;
  color      : var(--gris-texte);
}

/* ============================================================
   4. TABLEAU DES CRÉNEAUX (desktop / tablette)
   ============================================================ */
.creneaux-tableau-conteneur {
  background   : var(--blanc);
  border-radius: var(--rayon-md);
  box-shadow   : var(--ombre-carte);
  overflow     : hidden;
}

/* .creneaux-tableau et .creneaux-tableau thead th (base) : voir global.css §10 (mutualisé avec .comp-tableau) */

.creneaux-tableau tbody td,
.creneaux-tableau tbody th {
  padding      : 12px var(--espace-sm);
  border-bottom: 1px solid var(--gris-bordure);
  vertical-align: middle;
}

.creneaux-tableau tbody tr.bande-a td,
.creneaux-tableau tbody tr.bande-a th { background: var(--blanc); }
.creneaux-tableau tbody tr.bande-b td,
.creneaux-tableau tbody tr.bande-b th { background: #f7f9fc; }

.creneaux-tableau tbody tr:hover td,
.creneaux-tableau tbody tr:hover th {
  background: #eef3fa;
}

.cellule-jour {
  font-family: var(--font-sous-titre);
  font-weight: 600;
  color      : var(--bleu-titre);
  text-align : center;
  width      : 110px;
}

.cellule-horaire {
  font-variant-numeric: tabular-nums;
  color      : var(--noir-texte);
  white-space: nowrap;
}

.cellule-encadrement {
  color     : var(--gris-texte);
  text-align: center;
}

/* ============================================================
   5. VERSION MOBILE (cartes empilées par jour)
   ============================================================ */
.creneaux-mobile { display: none; }

.creneaux-mobile-jour {
  border-bottom: 1px solid var(--gris-bordure);
}
.creneaux-mobile-jour:last-child { border-bottom: none; }

.creneaux-mobile-titre {
  font-family   : var(--font-sous-titre);
  font-size     : 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color         : var(--blanc);
  background    : var(--bleu-titre);
  padding       : 10px var(--espace-sm);
  margin        : 0;
}

.creneaux-mobile-ligne {
  padding      : var(--espace-sm);
  border-bottom: 1px dashed var(--gris-bordure);
}
.creneaux-mobile-ligne:last-child { border-bottom: none; }

.creneaux-mobile-public {
  font-family: var(--font-sous-titre);
  font-weight: 600;
  font-size  : 14px;
  color      : var(--noir-texte);
  margin     : 0 0 4px;
}

.creneaux-mobile-horaire {
  font-family: var(--font-texte);
  font-size  : 14px;
  color      : var(--bleu-bouton);
  margin     : 0 0 2px;
}

.creneaux-mobile-encadrant {
  font-family: var(--font-texte);
  font-size  : 12px;
  color      : var(--gris-texte);
  margin     : 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .creneaux-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .creneaux-tableau-conteneur table { display: none; }
  .creneaux-mobile { display: block; }
}