/* ===================================================
   1. LE CONTENEUR PRINCIPAL (L'ENVELOPPE)
   =================================================== */
.calendar-container {
    max-width: 400px;         /* Largeur maximale du calendrier */
    margin: 20px auto;        /* Centre le calendrier horizontalement avec de l'espace en haut/bas */
    background: #fff;         /* Fond blanc pour le corps du calendrier */
    border-radius: 15px;      /* Arrondit les coins du cadre */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Ombre douce pour donner de la profondeur (relief) */
    overflow: hidden;         /* Coupe tout ce qui dépasse (indispensable pour les coins arrondis) */
    font-family: 'Segoe UI', sans-serif; /* Police système moderne et lisible */
}

/* ===================================================
   2. L'EN-TÊTE (TITRE ET MOIS ACTUEL)
   =================================================== */
.calendar-header {
          /* Fond bleu foncé */
    color: white;             /* Texte blanc pour le contraste */
    padding: 15px;            /* Espace intérieur pour aérer le titre */
    text-align: center;       /* Centre le nom du mois */
    border-radius: 20px; /* Rend la barre totalement arrondie aux extrémités */
}

/* Le bouton "Statistiques" à l'intérieur de l'en-tête */
.btn-main {
    display: inline-block;
    background: rgba(255,255,255,0.2); /* Fond blanc semi-transparent */
    color: white;
    padding: 5px 15px;
    border-radius: 20px;      /* Forme "pilule" */
    text-decoration: none;    /* Enlève le soulignement du lien */
    font-size: 0.8em;         /* Texte un peu plus petit */
    margin-bottom: 10px;      /* Espace sous le bouton */
}

/* ===== NAVIGATION (Année / Mois) ===== */
.calendar-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 12px 5px; /* Un peu plus d'espace vertical */
    background: #f8fafc;
    border-bottom: 1px solid #eee;
    border-radius: 20px; /* Rend la barre totalement arrondie aux extrémités */
}

.calendar-nav a {
    text-decoration: none;
    color: #2c6faa;
    font-size: 0.75em;
    font-weight: bold;
    
    /* --- TRANSFORMATION EN BOUTON ARRONDI --- */
    background: #ffffff;          /* Fond blanc pour détacher le bouton */
    padding: 5px 12px;           /* Espace intérieur (haut/bas, gauche/droite) */
    border: 1px solid #e2e8f0;    /* Bordure très fine */
    border-radius: 20px;          /* Angles totalement arrondis (style pill) */
    
    transition: all 0.2s ease;    /* Animation fluide au survol */
    display: flex;
    align-items: center;
    gap: 4px;                     /* Espace entre la flèche et le texte */
}

/* Effet au survol des boutons de navigation */
.calendar-nav a:hover {
    background: #2c6faa;          /* Le fond devient bleu */
    color: #ffffff;               /* Le texte devient blanc */
    border-color: #2c6faa;
    transform: scale(1.05);       /* Très léger grossissement */
}

/* Style spécifique pour les icônes « » ‹ › */
.calendar-nav a .icon {
    font-size: 1.2em;             /* Flèches légèrement plus grandes */
    line-height: 0;
}

/* ===================================================
   4. LA GRILLE DU CALENDRIER (LES JOURS)
   =================================================== */
.calendar-grid {
    display: grid;             /* Active le mode Grille */
    grid-template-columns: repeat(7, 1fr); /* Crée 7 colonnes égales (une par jour) */
    padding: 10px;             /* Espace entre les jours et le bord du cadre */
}

/* Libellés des jours (Lun, Mar, Mer...) */
.day-label {
    font-weight: 800;          /* On force un gras bien visible */
    text-transform: uppercase; /* Garde les majuscules */
    text-align: center;
    font-size: 0.8em;          /* On augmente légèrement la taille (était à 0.7em) */
    padding: 8px 0;            /* On donne un peu plus d'espace */
    
    /* MODIFICATION DE LA COULEUR ICI */
    color: #2c6faa;            /* Utilise le même bleu que l'en-tête pour une meilleure harmonie */
    /* OU utilise #1a202c pour un noir très lisible */
}

/* Le style des chiffres (les dates) */
.day a {
    text-decoration: none;
    color: #334155;            /* Couleur du chiffre */
    width: 30px;               /* Largeur du bouton cliquable */
    height: 30px;              /* Hauteur égale pour faire un carré */
    display: flex;             /* Permet de centrer le chiffre dans son cercle */
    align-items: center;       /* Centrage vertical */
    justify-content: center;   /* Centrage horizontal */
    border-radius: 50%;        /* Transforme le carré en cercle parfait */
    transition: 0.2s;          /* Animation fluide pour l'effet de survol */
}

/* Effet quand on passe la souris sur une date */
.day a:hover {
    background: #e2e8f0;       /* Fond gris clair au survol */
    color: #2c6faa;            /* Le chiffre devient bleu */
}

/* Mise en évidence du jour actuel (Aujourd'hui) */
.day.today a {
    background: #4da3ff;       /* Fond bleu vif */
    color: white;              /* Chiffre blanc */
    font-weight: bold;
}

/* Style pour les cases vides (début/fin de mois) */
.day.empty {
    background: transparent;
    height: 20px;              /* Hauteur réduite pour les cases sans date */
}

/* ===================================================
   5. LE PIED DE PAGE (SIGNATURE)
   =================================================== */
.calendar-footer {
    text-align: center;
    font-size: 0.7em;
    color: #94a3b8;
    padding: 10px;
}

/* ===================================================
   6. ARRONDIR ANGLE FRAME
  =================================================== */   

.iframe-container {
    height: 1350px; 
    width: 920px; 
    margin: 10px auto; /* Centre le cadre */
    border: 1px solid #ccc;
    
    /* --- LES 3 PROPRIÉTÉS CLÉS POUR ARRONDIR --- */
    border-radius: 20px;    /* Définit l'arrondi (augmentez pour plus de rondeur) */
    overflow: hidden;       /* Coupe les angles droits de l'iframe interne */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Optionnel : ajoute du relief */
}

.iframe-container iframe {
    width: 100%; 
    height: 100%; 
    border: none;           /* On enlève la bordure par défaut de l'iframe */
    border-radius: 20px;    /* On répète l'arrondi par sécurité */
}