/**
 * ARTS TEC — Styles page de réservation
 * Chemin : /wp-content/themes/Divi/css/atec-booking.css
 */

@import url('https://fonts.googleapis.com/css2?family=Exo:wght@600;700;800&family=Lato:wght@400;700&display=swap');

/* ===== RESET ===== */
.atec-resa * { box-sizing: border-box; margin: 0; padding: 0; }
.atec-resa { font-family: 'Lato', sans-serif; font-size: 15px; color: #2c2c2c; max-width: 900px; margin: 0 auto; padding: 40px 20px 60px; }

/* ===== ÉTAPES (STYLE LIGNE UNIQUE) ===== */
.atec-steps { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    max-width: 850px; 
    margin: 0 auto 40px; 
    background: #ffffff;
    padding: 12px 24px;
    border-radius: 50px; /* Forme de pilule élégante */
    box-shadow: 0 2px 15px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0;
}

.atec-step { 
    display: flex; 
    flex-direction: row; /* Aligne le numéro et le texte sur la même ligne */
    align-items: center; 
    gap: 8px; 
    font-family: 'Lato', sans-serif;
    color: #9ca3af;
    transition: all 0.3s ease;
}

/* Le cercle du numéro (plus compact) */
.atec-step-num { 
    width: 28px; 
    height: 28px; 
    border-radius: 50%; 
    background: #f3f4f6; 
    color: #9ca3af; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-family: 'Exo', sans-serif; 
    font-weight: 700; 
    font-size: 13px; 
    transition: all 0.3s ease;
}

/* Étape en cours ou validée */
.atec-step.active .atec-step-num,
.atec-step.done .atec-step-num { 
    background: #5F98A1; 
    color: #fff; 
}

/* Le texte à côté du numéro */
.atec-step span:not(.atec-step-num) {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
}

.atec-step.active span:not(.atec-step-num) { 
    color: #1f2937; /* Texte foncé pour l'étape active */
}
.atec-step.done span:not(.atec-step-num) { 
    color: #5F98A1; /* Texte coloré pour les étapes terminées */
}

/* La ligne de connexion entre les étapes */
.atec-step-sep { 
    flex-grow: 1; 
    height: 2px; 
    background: #e5e7eb; 
    margin: 0 15px; 
    transition: all 0.3s ease;
}
.atec-step-sep.done { 
    background: #5F98A1; 
}

/* ===== PANNEAUX ===== */
.atec-panel { display: none; animation: fadeIn 0.3s ease; }
.atec-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.atec-panel-title { font-family: 'Exo', sans-serif; font-size: 24px; font-weight: 800; color: #1a1a1a; margin-bottom: 6px; }
.atec-panel-sub { font-size: 15px; color: #888; margin-bottom: 28px; }

/* ===== GRILLE ESPACES ===== */
.atec-spaces-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 32px; }
.atec-space-card { border: 2px solid #e8e8e8; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s; background: #fff; }
.atec-space-card:hover { border-color: #5F98A1; box-shadow: 0 4px 16px rgba(95,152,161,0.15); }
.atec-space-card.selected { border-color: #5F98A1; background: #eef4f5; }
.atec-space-card .atec-space-icon { font-size: 28px; margin-bottom: 10px; }
.atec-space-card h3 { font-family: 'Exo', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.atec-space-card p { font-size: 13px; color: #888; line-height: 1.5; margin-bottom: 8px; }
.atec-space-badge { display: inline-block; background: #eef4f5; color: #5F98A1; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }

/* ===== FORMULES ===== */
.atec-formules { display: none; }
.atec-formules.active { display: block; }
.atec-formules-title { font-family: 'Exo', sans-serif; font-size: 17px; font-weight: 700; color: #1a1a1a; margin-bottom: 14px; }
.atec-formules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 28px; }
.atec-formule-btn { border: 2px solid #e8e8e8; border-radius: 10px; padding: 14px 16px; cursor: pointer; background: #fff; text-align: left; transition: all 0.2s; }
.atec-formule-btn:hover { border-color: #5F98A1; }
.atec-formule-btn.selected { border-color: #5F98A1; background: #eef4f5; }
.atec-formule-btn .atec-f-name { font-family: 'Exo', sans-serif; font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 3px; }
.atec-formule-btn .atec-f-detail { font-size: 12px; color: #999; margin-bottom: 6px; }
.atec-formule-btn .atec-f-price { font-family: 'Exo', sans-serif; font-size: 18px; font-weight: 800; color: #a32d2f; }

/* ===== CALENDRIER ===== */
.atec-calendar-wrap { background: #fff; border-radius: 12px; border: 1px solid #e8e8e8; box-shadow: 0 2px 12px rgba(0,0,0,0.06); overflow: hidden; margin-bottom: 24px; }
.atec-cal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: #5F98A1; color: #fff; }
.atec-cal-header h3 { 
    font-family: 'Exo', sans-serif; 
    font-size: 17px; 
    font-weight: 700; 
    color: #ffffff !important; /* Le !important bloque la couleur noire de Divi */
    margin: 0;
}
.atec-cal-nav { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; padding: 4px 10px; border-radius: 6px; transition: background 0.2s; }
.atec-cal-nav:hover { background: rgba(255,255,255,0.2); }
.atec-cal-days-header { display: grid; grid-template-columns: repeat(7, 1fr); background: #f0f7f8; }
.atec-cal-day-name { text-align: center; padding: 10px 4px; font-family: 'Exo', sans-serif; font-size: 12px; font-weight: 700; color: #5F98A1; text-transform: uppercase; letter-spacing: 0.5px; }
.atec-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 12px; }
.atec-cal-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-family: 'Lato', sans-serif; font-size: 14px; cursor: default; transition: all 0.15s; position: relative; }
.atec-cal-cell.empty { background: transparent; }
.atec-cal-cell.past { color: #ddd; }
.atec-cal-cell.closed { color: #ddd; }
.atec-cal-cell.full { background: #fde8e8; color: #e0a0a0; }
.atec-cal-cell.full::after { content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: #e0a0a0; }
.atec-cal-cell.available { background: #eef4f5; color: #2c7a85; cursor: pointer; font-weight: 700; }
.atec-cal-cell.available:hover { background: #5F98A1; color: #fff; transform: scale(1.08); }
.atec-cal-cell.available::after { content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: #5F98A1; }
.atec-cal-cell.available:hover::after { background: #fff; }
.atec-cal-cell.selected { background: #5F98A1 !important; color: #fff !important; }
.atec-cal-cell.today { border: 2px solid #5F98A1; }

/* ===== GESTION DES DEMI-JOURNÉES (Bicolore) ===== */

/* Matin occupé (Haut rouge, Bas vert) */
.atec-cal-cell.partial-matin {
    background: linear-gradient(to bottom, #fde8e8 50%, #eef4f5 50%);
    border: 1px solid #e8e8e8;
    color: #1f2937; /* Texte foncé pour rester lisible sur les deux couleurs */
}

/* Après-midi occupé (Haut vert, Bas rouge) */
.atec-cal-cell.partial-apm {
    background: linear-gradient(to bottom, #eef4f5 50%, #fde8e8 50%);
    border: 1px solid #e8e8e8;
    color: #1f2937;
}

/* On garde l'effet de zoom au survol pour montrer que c'est cliquable */
.atec-cal-cell.partial-matin:hover,
.atec-cal-cell.partial-apm:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Légende calendrier */
.atec-cal-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 16px 14px; border-top: 1px solid #f0f0f0; }
.atec-cal-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #888; }
.atec-cal-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ===== CRÉNEAUX ===== */
.atec-slots-wrap { margin-bottom: 28px; }
.atec-slots-title { font-family: 'Exo', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; }
.atec-slots-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.atec-slot-btn { border: 2px solid #e8e8e8; border-radius: 8px; padding: 10px 18px; cursor: pointer; background: #fff; font-family: 'Lato', sans-serif; font-size: 14px; color: #444; transition: all 0.2s; }
.atec-slot-btn:hover { border-color: #5F98A1; color: #5F98A1; }
.atec-slot-btn.selected { border-color: #5F98A1; background: #eef4f5; color: #5F98A1; font-weight: 700; }
.atec-slot-btn.taken { border-color: #f5d5d5; background: #fdf5f5; color: #daa; cursor: not-allowed; text-decoration: line-through; }

/* ===== FORMULAIRE ===== */
.atec-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.atec-form-field { display: flex; flex-direction: column; gap: 6px; }
.atec-form-field.full { grid-column: 1 / -1; }
.atec-form-field label { font-size: 13px; font-weight: 700; color: #555; }
.atec-form-field label .req { color: #a32d2f; }
.atec-form-field input,
.atec-form-field select,
.atec-form-field textarea {
  border: 1.5px solid #ddd;
  border-radius: 8px;
  padding: 11px 14px;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  color: #2c2c2c;
  background: #fff;
  transition: border-color 0.2s;
  outline: none;
}
.atec-form-field input:focus,
.atec-form-field select:focus,
.atec-form-field textarea:focus { border-color: #5F98A1; }
.atec-form-field textarea { resize: vertical; min-height: 90px; }

/* ===== UNIFORMISATION DES HAUTEURS ===== */
.atec-form-field input[type="text"],
.atec-form-field input[type="email"],
.atec-form-field input[type="tel"],
.atec-form-field input[type="number"],
.atec-form-field select {
    height: 46px; /* Force une hauteur identique pour tous */
    box-sizing: border-box;
}

/* ===== LIGNE 2/3 - 1/3 (Organisation / Nb personnes) ===== */
.atec-form-row-split {
    grid-column: 1 / -1; /* Prend toute la largeur de la grille principale */
    display: flex;
    gap: 16px; /* Même espacement que votre grille */
    width: 100%;
}

.atec-form-col-2 {
    flex: 2; /* 66% de l'espace */
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.atec-form-col-1 {
    flex: 1; /* 33% de l'espace */
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Les champs à l'intérieur de ces nouvelles colonnes doivent hériter du style */
.atec-form-col-2 label, .atec-form-col-1 label {
    font-size: 13px; font-weight: 700; color: #555;
}
.atec-form-col-2 input, .atec-form-col-1 input {
    border: 1.5px solid #ddd;
    border-radius: 8px;
    padding: 11px 14px;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    color: #2c2c2c;
    background: #fff;
    transition: border-color 0.2s;
    outline: none;
    height: 46px;
    width: 100%;
    box-sizing: border-box;
}
.atec-form-col-2 input:focus, .atec-form-col-1 input:focus {
    border-color: #5F98A1;
}

/* ===== RÉCAPITULATIF ===== */
.atec-recap-box { background: #f4f9fa; border-radius: 12px; padding: 24px; margin-bottom: 28px; border: 1px solid #d8eaec; }
.atec-recap-box h3 { font-family: 'Exo', sans-serif; font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: 16px; }
.atec-recap-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #ddeef0; font-size: 15px; }
.atec-recap-row:last-child { border-bottom: none; font-weight: 700; font-size: 17px; padding-top: 14px; }
.atec-recap-row .rl { color: #666; }
.atec-recap-row .rv { color: #1a1a1a; text-align: right; }
.atec-recap-row:last-child .rv { color: #a32d2f; font-family: 'Exo', sans-serif; }

/* ============================================================
   BOUTONS DE NAVIGATION
============================================================ */

/* 1. Bouton principal actif (Rouge) */
.atec-btn {
    background-color: #d32f2f; /* Un beau rouge vif et professionnel */
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

/* Effet au survol de la souris (Rouge légèrement plus foncé) */
.atec-btn:hover:not(:disabled) {
    background-color: #b71c1c;
}

/* 2. Bouton inactif / non cliquable (Gris clair) */
.atec-btn:disabled {
    background-color: #e5e7eb; /* Fond gris très clair */
    color: #9ca3af; /* Texte gris moyen */
    cursor: not-allowed;
    box-shadow: none;
}

/* 3. Bouton "Retour" (Discret pour ne pas voler la vedette au rouge) */
.atec-btn.atec-btn-outline {
    background-color: transparent;
    color: #4b5563;
    border: 1px solid #d1d5db;
}

.atec-btn.atec-btn-outline:hover {
    background-color: #f3f4f6;
    color: #1f2937;
}

/* Loader */
.atec-loader { display: none; width: 18px; height: 18px; border: 3px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.atec-btn.loading .atec-loader { display: block; }
.atec-btn.loading .atec-btn-text { opacity: 0.7; }

/* ===== MESSAGES ===== */
.atec-msg { padding: 12px 16px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; display: none; }
.atec-msg.error { background: #fde8e8; color: #a32d2f; border: 1px solid #f5c0c0; display: block; }
.atec-msg.success { background: #e8f5f0; color: #2a7a5a; border: 1px solid #b0dcc8; display: block; }
.atec-msg.info { background: #eef4f5; color: #3a7a85; border: 1px solid #b0d4da; display: block; }

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
  .atec-spaces-grid { grid-template-columns: 1fr; }
  .atec-form-grid { grid-template-columns: 1fr; }
  .atec-form-field.full { grid-column: 1; }
    /* Ajustement de la ligne 2/3 - 1/3 sur mobile */
  .atec-form-row-split { flex-direction: column; }
  
  /* Ajustements de la nouvelle Timeline sur mobile */
  .atec-steps { gap: 0; margin-bottom: 30px; }
  .atec-step { width: auto; flex: 1; }
  .atec-step span:not(.atec-step-num) { font-size: 11px; margin-top: 2px; }
  .atec-step-num { width: 30px; height: 30px; font-size: 14px; }
  .atec-step-sep { margin-top: 15px; margin-left: 4px; margin-right: 4px; }
}