/* ============================================================
   RÉSERVATION EN LIGNE — fenêtre de réservation (includes/reservation-widget.php)
   Couleurs du site : accent #be5a1e, texte #111111 / #374151, gris #646b76
   ============================================================ */

.resa { font-size: 15px; color: #111111; }
.resa [hidden] { display: none !important; }
.resa h3 { font-size: 22px; font-weight: 700; color: #1f2937; margin: 0 0 6px; }
.resa-intro { font-size: 13px; color: #646b76; margin: 0 0 16px; line-height: 1.55; }



/* Jours */
/* 7 jours de consultation = une ligne de 7 (RESA_NB_JOURS) ; avec 14, deux lignes pleines */
.resa-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.resa-jour { background: #ffffff; border: 2px solid #e5e7eb; border-radius: 10px; padding: 8px 4px; text-align: center; cursor: pointer; line-height: 1.25; transition: border-color .2s, background .2s; color: #111111; }
.resa-jour:hover { border-color: #be5a1e; }
.resa-jour small { display: block; font-size: 12px; color: #646b76; }
.resa-jour strong { display: block; font-size: 16px; }
.resa-jour em { display: block; font-style: normal; font-size: 11px; color: #646b76; margin-top: 2px; }
.resa-jour.actif { border-color: #be5a1e; background: #fdf3ec; }
.resa-jour:disabled { opacity: .45; cursor: default; border-color: #e5e7eb; background: #f3f4f6; }

/* Créneaux */
.resa-titre-creneaux { font-size: 14px; font-weight: 600; color: #374151; margin: 0 0 10px; }
.resa-creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.resa-creneau { background: #ffffff; border: 2px solid #e5e7eb; border-radius: 8px; padding: 10px 0; font-size: 15px; font-weight: 600; color: #111111; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.resa-creneau:hover { border-color: #be5a1e; color: #be5a1e; }
.resa-creneaux.longs { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

/* Récapitulatif du créneau choisi */
.resa-recap { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #ffffff; border: 2px solid #be5a1e; border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; }
.resa-recap strong { font-size: 15px; }
.resa-recap span { display: block; font-size: 13px; color: #646b76; }
.resa-lien { background: none; border: 0; padding: 0; color: #be5a1e; font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer; white-space: nowrap; }

/* Formulaire */
.resa-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-bottom: 16px; }
.resa-champ label { display: block; font-size: 14px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.resa-champ input, .resa-champ textarea { width: 100%; padding: 11px 14px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 15px; background: #ffffff; font-family: inherit; }
.resa-champ input:focus, .resa-champ textarea:focus { outline: none; border-color: #be5a1e; }
.resa-champ.large { grid-column: 1 / -1; }

/* Boutons et messages */
.resa-bouton { display: block; width: 100%; background: #be5a1e; color: #ffffff; border: 0; border-radius: 50px; padding: 15px; font-size: 16px; font-weight: 700; cursor: pointer; transition: background .2s; }
.resa-bouton:hover { background: #a24c18; }
.resa-bouton:disabled { background: #d9a481; cursor: wait; }
.resa-erreur { color: #b91c1c; background: #fef2f2; border-radius: 8px; padding: 10px 14px; font-size: 14px; margin: 12px 0 0; }
.resa-note { font-size: 12px; color: #646b76; text-align: center; margin: 10px 0 0; }
.resa-note + .resa-note { margin-top: 4px; }
.resa-minuteur { font-size: 13px; color: #646b76; margin: -8px 0 14px; }
.resa-stripe { background: #ffffff; border-radius: 10px; padding: 14px; margin-bottom: 16px; min-height: 120px; }

/* Chargement, confirmation, échec */
.resa-attente { text-align: center; padding: 50px 10px; color: #374151; }
.resa-cercle { width: 44px; height: 44px; border: 4px solid #f1dccd; border-top-color: #be5a1e; border-radius: 50%; margin: 0 auto 16px; animation: resa-tourne 0.9s linear infinite; }
@keyframes resa-tourne { to { transform: rotate(360deg); } }
.resa-fin { text-align: center; padding: 30px 10px; }
.resa-fin .resa-pastille { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; color: #ffffff; background: #15803d; }
.resa-fin.echec .resa-pastille { background: #b91c1c; }
.resa-fin p { font-size: 15px; color: #374151; margin: 0 0 10px; line-height: 1.55; }
.resa-fin a.resa-meet { display: inline-block; margin-top: 6px; color: #be5a1e; font-weight: 700; word-break: break-all; }

@media (max-width: 767px) {
    .resa-grille { grid-template-columns: 1fr; }
    .resa-jours { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* téléphone : 4 + 3 */
    .resa-recap { flex-direction: column; align-items: flex-start; }
}

/* Formules (visio 30 min, visio 1 h, cabinet 1 h) */
.resa-sous-titre { font-size: 15px; font-weight: 700; color: #1f2937; margin: 0 0 10px; }
.resa-sous-titre small { font-weight: 400; color: #646b76; font-size: 13px; }
.resa-formules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.resa-formule { background: #ffffff; border: 2px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; text-align: left; cursor: pointer; line-height: 1.3; color: #111111; transition: border-color .2s, background .2s; }
.resa-formule:hover { border-color: #be5a1e; }
.resa-formule small { display: block; font-size: 12px; color: #646b76; }
.resa-formule strong { display: block; font-size: 16px; margin: 2px 0; }
.resa-formule span { display: block; font-size: 13px; color: #be5a1e; font-weight: 700; }
.resa-formule.actif { border-color: #be5a1e; background: #fdf3ec; }
.resa-formule-detail { font-size: 13px; color: #646b76; margin: 0 0 18px; }
@media (max-width: 480px) {
    .resa-formules { grid-template-columns: 1fr; }
    .resa-formule { display: flex; align-items: baseline; gap: 8px; }
    .resa-formule strong { margin: 0; }
    .resa-formule span { margin-left: auto; }
}

/* Onglet « Consultation » de la popup : sous-titre « Au choix 30 min ou 1 heure » */
.popup-tab-btn .tab-text .tab-sous-titre, .ci-tab-btn .ci-tab-text .tab-sous-titre { display: block; font-size: 12px; font-weight: 500; color: #646b76; margin-top: 2px; }
.popup-tab-btn.active .tab-text .tab-sous-titre, .ci-tab-btn.active .ci-tab-text .tab-sous-titre { color: #be5a1e; }