/**
 * DASHBOARD TRAVELER - STYLES CSS
 * Fichier de styles pour le tableau de bord voyageur
 *
 * Organisation:
 * 1. Variables CSS (couleurs, espacements, ombres)
 * 2. Boutons principaux et secondaires
 * 3. Images et logos
 * 4. En-têtes de sections
 * 5. Liens et blocs de sections
 * 6. Blocs d'état et compte à rebours
 * 7. Blocs d'actions
 * 8. Boutons de contact
 * 9. Instructions de check-in
 * 10. Détails de réservation
 * 11. Logos de plateformes
 * 12. Liens de facture
 * 13. Grilles de recommandations
 * 14. Grilles d'informations (appareils)
 * 15. Boutons sociaux
 * 16. Boutons check-in/check-out
 * 17. Modal de notation
 * 18. Responsive design
 */

/* ========================================
   1. VARIABLES CSS
   ======================================== */

/**
 * Variables système et constantes
 * Les variables de branding dynamiques sont injectées dans base.html
 */
:root {
    /* Couleurs système */
    --info-color: #3498db;
    --warning-color: #f39c12;
    --text-secondary: #7f8c8d;
    --text-light: #95a5a6;
    --border-color: #ecf0f1;

    /* Espacements standardisés */
    --spacing-xs: 0.5rem;   /* 8px */
    --spacing-sm: 1rem;     /* 16px */
    --spacing-md: 1.5rem;   /* 24px */
    --spacing-lg: 2rem;     /* 32px */

    /* Rayons de bordure */
    --border-radius: 12px;
    --border-radius-small: 8px;

    /* Ombres */
    --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-large: 0 10px 30px rgba(0, 0, 0, 0.12);
}

/* ========================================
   2. BOUTONS PRINCIPAUX ET SECONDAIRES
   ======================================== */

/**
 * Bouton primaire - Actions principales de l'interface
 */
.btn-primary {
    background: var(--button-primary-color);
}

.btn-primary:hover {
    background: var(--button-primary-hover);
}

/**
 * Bouton secondaire - Actions secondaires
 */
.btn-secondary {
    background: var(--button-secondary-color);
}

.btn-secondary:hover {
    background: var(--button-secondary-hover);
}

/* ========================================
   3. IMAGES ET LOGOS
   ======================================== */

/**
 * Logo de la marque/appartement affiché en haut de page
 */
.brand-logo {
    max-width: 200px;
    max-height: 80px;
    margin: 0 auto 1rem;
    display: block;
}

/**
 * Image mise en avant de l'appartement
 */
.apartment-featured-image {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
}

/* ========================================
   4. EN-TÊTES DE SECTIONS
   ======================================== */

/**
 * En-tête de section avec icône et titre
 * Utilisé pour structurer visuellement le dashboard
 */
.section-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
}

/**
 * Icône emoji dans l'en-tête de section
 */
.section-icon {
    font-size: 2.5rem;
    line-height: 1;
}

.section-header h2 {
    margin: 0;
    color: var(--primary-color);
}

/* ========================================
   5. LIENS ET BLOCS DE SECTIONS
   ======================================== */

/**
 * Bloc de section cliquable générique
 * Utilisé pour les sections qui mènent vers d'autres pages
 * Effet hover avec élévation et changement de couleur
 */
.section-link {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 2px solid var(--border-color);
    border-left: 6px solid var(--secondary-color);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: block;
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
}

.section-link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-large);
    border-left-color: var(--primary-color);
    text-decoration: none;
    background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
}

.section-link .section-header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-link .section-header h2 {
    margin: 0;
}

/**
 * Call-to-action dans les liens de section
 * Affiche "Voir plus →" avec animation de la flèche au hover
 */
.section-cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--info-color);
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
}

.section-cta .arrow {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.section-link:hover .section-cta .arrow {
    transform: translateX(5px);
}

/**
 * Sections verrouillées (non accessibles selon la période)
 * Visuellement désactivées avec curseur not-allowed
 */
.section-link.locked {
    opacity: 0.5;
    cursor: not-allowed;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border-left-color: #bdc3c7;
}

.section-link.locked:hover {
    transform: none;
    box-shadow: none;
    border-left-color: #bdc3c7;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

.section-link.locked .section-header h2,
.section-link.locked .section-cta {
    color: #95a5a6;
}

.section-link.locked .lock-icon {
    font-size: 1.2rem;
    margin-left: 0.5rem;
}

/* ========================================
   6. BLOCS D'ÉTAT ET COMPTE À REBOURS
   ======================================== */

/**
 * Bloc d'état générique pour afficher des informations importantes
 * Utilisé pour les messages de statut et comptes à rebours
 */
.status-block {
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border: 2px solid #bdc3c7;
    border-left: 6px solid #95a5a6;
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

/**
 * Variante du bloc d'état pour les comptes à rebours
 * Couleur orange pour attirer l'attention
 */
.status-block.countdown {
    background: linear-gradient(135deg, #fff5e6 0%, #ffe4cc 100%);
    border-left-color: var(--warning-color);
}

/**
 * Timer du compte à rebours affiché en grand
 */
.countdown-timer {
    font-size: 2rem;
    font-weight: 700;
    color: var(--warning-color);
    margin: var(--spacing-sm) 0;
}

/**
 * Message expliquant pourquoi une section est verrouillée
 */
.lock-message {
    color: var(--text-secondary);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* ========================================
   7. BLOCS D'ACTIONS
   ======================================== */

/**
 * Grille de blocs d'actions
 * S'adapte automatiquement selon la largeur d'écran
 */
.action-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

/**
 * Bloc d'action individuel - CTA visuellement marqué
 * Utilisé pour les actions importantes (ex: voir facture, contacter)
 */
.action-block {
    background: white;
    border: 2px solid var(--border-color);
    border-left: 6px solid var(--secondary-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: block;
    text-align: center;
}

.action-block:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-large);
    border-left-color: var(--primary-color);
    text-decoration: none;
}

/**
 * Icône du bloc d'action (emoji de grande taille)
 */
.action-block .action-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-sm);
}

/**
 * Titre du bloc d'action
 */
.action-block .action-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}

/**
 * Sous-titre explicatif du bloc d'action
 */
.action-block .action-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* ========================================
   8. BOUTONS DE CONTACT
   ======================================== */

/**
 * Grille de boutons de contact (WhatsApp, téléphone)
 */
.contact-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-md) 0;
}

/**
 * Bouton de contact générique
 */
.contact-button {
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

/**
 * Bouton WhatsApp avec couleur officielle
 */
.contact-button.whatsapp {
    background: #25D366;
    color: white;
}

.contact-button.whatsapp:hover {
    background: #1ea952;
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

/**
 * Bouton téléphone
 */
.contact-button.phone {
    background: var(--info-color);
    color: white;
}

.contact-button.phone:hover {
    background: #2980b9;
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

/* ========================================
   9. INSTRUCTIONS DE CHECK-IN
   ======================================== */

/**
 * Bloc étendu pour les instructions de check-in
 * Contient vidéos, codes d'accès, etc.
 */
.checkin-expanded {
    background: white;
    border: 2px solid var(--border-color);
    border-left: 6px solid var(--success-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.checkin-expanded h3 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/**
 * Conteneur responsive pour vidéo YouTube (ratio 16:9)
 */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--border-radius);
    margin-top: var(--spacing-md);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ========================================
   10. DÉTAILS DE RÉSERVATION
   ======================================== */

/**
 * Grille des détails de réservation
 */
.reservation-details {
    display: grid;
    gap: var(--spacing-md);
}

/**
 * Item individuel de réservation (dates, prix, plateforme, etc.)
 * Effet hover avec décalage vers la droite
 */
.reservation-item {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    padding: var(--spacing-md);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    transition: all 0.3s ease;
}

.reservation-item:hover {
    box-shadow: var(--shadow-small);
    border-color: var(--secondary-color);
    transform: translateX(5px);
}

/**
 * Icône de l'item de réservation
 */
.reservation-item .item-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

/**
 * Contenu de l'item (label + valeur)
 */
.reservation-item .item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/**
 * Label de l'item (ex: "DATE D'ARRIVÉE")
 */
.reservation-item .item-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/**
 * Valeur de l'item
 */
.reservation-item .item-value {
    font-size: 1.1rem;
    color: var(--primary-color);
    font-weight: 600;
}

/**
 * Valeur du prix (style spécial en vert)
 */
.reservation-item .price-value {
    color: var(--success-color);
    font-size: 1.4rem;
    font-weight: 700;
}

/* ========================================
   11. LOGOS DE PLATEFORMES
   ======================================== */

/**
 * Item de réservation pour la plateforme (layout en colonne)
 */
.platform-item {
    flex-direction: column;
    align-items: stretch;
}

.platform-item .item-header {
    margin-bottom: var(--spacing-sm);
}

/**
 * Zone d'affichage du logo de plateforme
 */
.platform-display {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    background: #f8f9fa;
    border-radius: var(--border-radius-small);
}

/**
 * Conteneur du logo avec nom de la plateforme
 */
.platform-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-small);
    background: white;
    box-shadow: var(--shadow-small);
}

.platform-logo svg {
    flex-shrink: 0;
}

/**
 * Nom de la plateforme
 */
.platform-name {
    font-size: 1.2rem;
    font-weight: 700;
}

/**
 * Logo Airbnb avec couleur officielle
 */
.airbnb-logo .platform-name {
    color: #FF5A5F;
}

/**
 * Logo Booking.com avec couleur officielle
 */
.booking-logo .platform-name {
    color: #003580;
}

/**
 * Logo générique pour plateformes non identifiées
 */
.generic-logo {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
}

.generic-logo .platform-icon {
    font-size: 2rem;
}

/* ========================================
   12. LIENS DE FACTURE
   ======================================== */

/**
 * Lien vers la facture
 */
.invoice-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

/**
 * Facture disponible (cliquable)
 */
.invoice-link.available {
    color: var(--success-color);
    cursor: pointer;
}

.invoice-link.available:hover {
    color: #1e8449;
    text-decoration: underline;
}

/**
 * Facture non disponible (verrouillée)
 */
.invoice-link.locked {
    color: var(--text-light);
    font-style: italic;
    cursor: not-allowed;
}

/* ========================================
   13. GRILLES DE RECOMMANDATIONS
   ======================================== */

/**
 * Texte d'introduction de section
 */
.section-intro {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    font-size: 1rem;
}

/**
 * Grille de cartes de recommandations (restaurants, activités)
 */
.recommendations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-md);
}

/**
 * Carte de recommandation individuelle
 * Effet hover avec élévation
 */
.recommendation-card {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}

.recommendation-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-large);
    border-color: var(--secondary-color);
}

/**
 * Icône de la carte (emoji de grande taille)
 */
.card-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-sm);
}

/**
 * Contenu principal de la carte
 */
.card-content {
    flex-grow: 1;
}

.card-content h3 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}

/**
 * Description textuelle de la recommandation
 */
.card-description {
    color: var(--text-secondary);
    margin: var(--spacing-sm) 0;
    line-height: 1.6;
    font-size: 0.95rem;
}

/**
 * Métadonnées de la carte (distance, prix)
 */
.card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: var(--spacing-sm) 0;
    font-size: 0.9rem;
    font-weight: 600;
}

/**
 * Distance depuis l'appartement
 */
.distance {
    color: var(--info-color);
}

/**
 * Indication de prix (€, $$, etc.)
 */
.price {
    color: var(--warning-color);
    font-weight: bold;
}

/**
 * Horaires d'ouverture
 */
.opening-hours {
    font-size: 0.85rem;
    color: var(--text-light);
    margin: var(--spacing-xs) 0;
}

/**
 * Zone d'actions de la carte (bouton Google Maps)
 */
.card-actions {
    margin-top: var(--spacing-md);
}

/**
 * Bouton "Voir sur la carte" dans les cartes de recommandations
 */
.btn-map-small {
    display: block;
    width: 100%;
    padding: var(--spacing-sm);
    background: var(--info-color);
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: var(--border-radius-small);
    font-weight: 600;
    transition: all 0.2s;
}

.btn-map-small:hover {
    background: #2980b9;
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    text-decoration: none;
}

/* ========================================
   14. GRILLES D'INFORMATIONS (APPAREILS)
   ======================================== */

/**
 * Grille d'informations pour appareils (machine à laver, chauffage, etc.)
 */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

/**
 * Carte d'information individuelle
 */
.info-card {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    transition: all 0.3s;
}

.info-card:hover {
    box-shadow: var(--shadow-medium);
    border-color: var(--secondary-color);
}

/**
 * Icône de la carte d'information
 */
.info-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
}

.info-card h3 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

/**
 * Contenu des instructions d'appareil
 */
.appareil-content {
    margin-top: var(--spacing-sm);
}

/**
 * Instructions d'utilisation
 */
.instructions {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

/* ========================================
   15. BOUTONS SOCIAUX
   ======================================== */

/**
 * Effets hover pour boutons sociaux (WhatsApp, Facebook, Instagram)
 */
.btn-whatsapp:hover,
.btn-facebook:hover,
.btn-instagram:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    opacity: 0.9;
}

/* ========================================
   16. BOUTONS CHECK-IN / CHECK-OUT
   ======================================== */

/**
 * Conteneurs pour les boutons de check-in et check-out
 */
.checkin-action-block,
.checkout-action-block {
    margin: var(--spacing-md) 0;
    text-align: center;
    width: 100%;
    max-width: 100%;
}

/**
 * Bouton primaire de check-in
 * Grand bouton vert avec gradient et ombre
 */
.btn-checkin-primary {
    width: 100%;
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--success-color) 0%, #1e8449 100%);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

.btn-checkin-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(39, 174, 96, 0.4);
}

.btn-checkin-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/**
 * Bouton primaire de check-out
 * Grand bouton bleu avec gradient et ombre
 */
.btn-checkout-primary {
    width: 100%;
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--info-color) 0%, #2980b9 100%);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.btn-checkout-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
}

.btn-checkout-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/**
 * Bouton d'accès aux instructions de check-in
 * Utilisé dans la période BEFORE pour rediriger vers la page détaillée
 * Gradient bleu (primary → secondary) pour cohérence avec le design
 */
.btn-checkin-instructions {
    display: block;
    width: 100%;
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
   /* background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);*/
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: none;
}

.btn-checkin-instructions:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    color: white;
}

/**
 * Message de confirmation de statut (check-in/check-out effectué)
 */
.status-confirmed {
    background: #d4edda;
    border: 2px solid #28a745;
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    text-align: center;
    color: #155724;
    font-weight: 600;
    margin: var(--spacing-md) 0;
}

/* ========================================
   17. MODAL DE NOTATION
   ======================================== */

/**
 * Overlay de fond du modal (arrière-plan sombre semi-transparent)
 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    transition: opacity 0.3s ease;
}

/**
 * Modal caché (invisible et non cliquable)
 */
.modal.hidden {
    opacity: 0;
    pointer-events: none;
}

/**
 * Contenu du modal (carte blanche centrée)
 */
.modal-content {
    background: white;
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/**
 * En-tête du modal avec question
 */
.modal-header h3 {
    text-align: center;
    color: var(--success-color);
    margin: 0 0 var(--spacing-md) 0;
}

/**
 * Sous-titre du modal (texte secondaire)
 */
.modal-subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

/**
 * Instruction pour la notation par étoiles
 */
.rating-instruction {
    text-align: center;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

/**
 * Conteneur des boutons étoiles (disposition horizontale)
 */
.rating-buttons {
    display: flex;
    gap: var(--spacing-xs);
    justify-content: center;
    margin: var(--spacing-md) 0;
}

/**
 * Bouton étoile individuel
 * Par défaut : gris en nuances de gris (grayscale)
 * Sélectionné : orange/jaune vif sans filtre
 */
.btn-rating {
    padding: var(--spacing-sm);
    background: white;
    border: none;
    cursor: pointer;
    font-size: 2rem;
    transition: all 0.2s;
    color: #ddd;
    filter: grayscale(100%);
}

/**
 * Effet hover sur étoile : agrandissement et couleur
 */
.btn-rating:hover {
    transform: scale(1.2);
    filter: grayscale(0%);
}

/**
 * Étoile sélectionnée : orange sans grayscale
 */
.btn-rating.selected {
    color: #ffa500;
    filter: grayscale(0%);
}

/**
 * Bouton de soumission de la notation
 * Désactivé tant qu'aucune étoile n'est sélectionnée
 */
.btn-submit-rating {
    flex: 1;
    padding: var(--spacing-md);
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius-small);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-submit-rating:hover:not(:disabled) {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/**
 * Bouton désactivé (aucune étoile sélectionnée)
 */
.btn-submit-rating:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

/**
 * Section du commentaire optionnel
 */
.comment-section {
    margin: var(--spacing-lg) 0;
}

/**
 * Label du champ de commentaire
 */
.comment-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    font-weight: 500;
}

/**
 * Zone de texte pour le commentaire
 */
.comment-textarea {
    width: 100%;
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-small);
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
    transition: border-color 0.3s;
}

/**
 * Zone de texte en focus (bordure colorée)
 */
.comment-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

/**
 * Placeholder du textarea
 */
.comment-textarea::placeholder {
    color: #aaa;
}

/**
 * Bouton de rappel pour contacter en cas de problème
 * Affiché dans le modal de notation
 */
.contact-reminder-button {
    display: block;
    text-align: center;
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--info-color);
    color: white;
    font-weight: 600;
    border-radius: var(--border-radius-small);
    text-decoration: none;
    transition: all 0.3s;
}

.contact-reminder-button:hover {
    background: #2980b9;
    transform: translateY(-2px);
    text-decoration: none;
}

/**
 * Pied du modal (boutons d'action)
 */
.modal-footer {
    margin-top: var(--spacing-lg);
    text-align: center;
}

/**
 * Bouton "Passer" pour fermer le modal sans noter
 */
.btn-skip {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: transparent;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-small);
    cursor: pointer;
    color: var(--text-secondary);
    font-weight: 600;
}

.btn-skip:hover {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

/**
 * Message de feedback (succès ou erreur)
 * Affiché après soumission de la notation
 */
.feedback-message {
    text-align: center;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-small);
    margin: var(--spacing-sm) 0;
    font-weight: 600;
}

/**
 * Message de succès (fond vert)
 */
.feedback-message.success {
    background: #d4edda;
    color: #155724;
}

/**
 * Message d'erreur (fond rouge)
 */
.feedback-message.error {
    background: #f8d7da;
    color: #721c24;
}

/* ========================================
   18. REVIEW & SOCIAL LINKS
   ======================================== */

/**
 * Liens de review (Google, Facebook) et réseaux sociaux
 * Utilisés dans les périodes AFTER et autres pages
 */
.review-links, .social-links {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.review-links a, .social-links a {
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-links a:hover, .social-links a:hover {
    transform: scale(1.2);
    opacity: 0.8;
}

.review-links svg, .social-links svg {
    width: 40px;
    height: 40px;
    fill: currentColor;
}

/**
 * Classe utilitaire pour action-blocks non-cliquables
 */
.non-clickable {
    cursor: default;
}

/**
 * Titre de carte avec couleur primaire
 */
.card h3.card-title {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

/**
 * Section header avec flex layout
 */
.section-header-flex {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/**
 * Indicateur de période (BEFORE, DURING, EVE_CHECKOUT, AFTER)
 */
.period-indicator {
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 4px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
}

.period-indicator.before {
    background: #e3f2fd;
}

.period-indicator.during {
    background: #e8f5e9;
}

.period-indicator.eve-checkout {
    background: #fff3e0;
}

.period-indicator.after {
    background: #f3e5f5;
}

.period-indicator span {
    text-transform: uppercase;
}

/**
 * Info text pour le countdown
 */
.countdown-info {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/**
 * Affichage du code d'accès (grand, vert, gras)
 */
.access-code-display {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--success-color);
    margin-top: 0.5rem;
}

/**
 * Status confirmed avec spacing
 */
.status-confirmed-spacing {
    margin-bottom: var(--spacing-md);
}

/**
 * Action block verrouillé (grisé, non cliquable)
 */
.action-block-locked {
    opacity: 0.6;
    cursor: not-allowed;
    background: #f5f5f5 !important;
    color: #999;
}

.action-block-locked .action-icon {
    opacity: 0.5;
}

.action-block-locked .action-title {
    color: #999;
}

.action-block-locked .action-subtitle {
    color: #bbb;
}

/* ========================================
   18. TEST PERIODS PAGE
   ======================================== */

.test-period-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
    margin: -20px -20px 20px -20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.test-period-container {
    max-width: 1200px;
    margin: 0 auto;
}

.test-period-title {
    color: white;
    margin: 0 0 15px 0;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
}

.period-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.period-btn {
    flex: 1;
    min-width: 150px;
    max-width: 250px;
    padding: 12px 20px;
    background: rgba(255,255,255,0.2);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.period-btn small {
    font-size: 0.8em;
    opacity: 0.9;
}

.period-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    background: rgba(255,255,255,0.3) !important;
}

.period-btn.active {
    border-color: white;
}

.period-btn.active.before {
    background: #4CAF50;
}

.period-btn.active.during {
    background: #2196F3;
}

.period-btn.active.eve-checkout {
    background: #FF9800;
}

.period-btn.active.after {
    background: #9C27B0;
}

.period-btn.active:hover {
    transform: none;
}

.test-period-info {
    margin-top: 15px;
    padding: 10px;
    background: rgba(255,255,255,0.15);
    border-radius: 8px;
    color: white;
    text-align: center;
    font-size: 0.9em;
}

/* ========================================
   19. RESPONSIVE DESIGN
   ======================================== */

/**
 * Adaptation mobile (écrans < 768px)
 * Grilles en une seule colonne
 */
@media (max-width: 768px) {
    .recommendations-grid {
        grid-template-columns: 1fr;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }
}