/*==================================================
  calendrier.css
==================================================*/


/* ================= CONTAINER ================= */

.calendrier-container{
width:95%;
max-width:1200px;
margin:20px auto;
}



/* ================= BOUTONS ================= */

.rs-btn{

display:inline-flex;
align-items:center;
justify-content:center;

background:#555;

color:#fff;

padding:12px 20px;

border-radius:14px;

text-decoration:none;

font-weight:bold;

cursor:pointer;

transition:.2s;

}


.rs-btn:hover{

transform:translateY(-2px);

filter:brightness(1.1);

}



.cal-nav,
.cal-actions{

display:flex;

gap:10px;

}



.cal-nav a,
.cal-actions a{

background:#333;

color:white;

padding:8px 14px;

border-radius:8px;

text-decoration:none;

}



/* ================= HEADER ================= */


.calendrier-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}


.calendrier-header h2{

font-size:28px;

}



.cal-actions{

justify-content:center;

margin-bottom:20px;

}




/* ================= CALENDRIER ================= */


.calendrier{

display:grid;

grid-template-columns:repeat(7,1fr);

gap:6px;

}



.cal-titre{

background:#333;

color:white;

text-align:center;

padding:12px;

font-weight:bold;

border-radius:6px;

}



.cal-case{

height:110px;

background:#d9d6d6;

border:1px solid #ddd;

border-radius:10px;

padding:10px;

position:relative;

overflow:visible;

transition:.2s;

}



.cal-case:hover{

transform:translateY(-3px);

box-shadow:0 5px 12px rgba(0,0,0,.15);

}



.numero{

font-size:20px;

font-weight:bold;

color:#141d97;

}



.autre-mois{

background:#eee;

color:#5e3a3a;

}



.weekend{

background:#e9d0b4;

}



.aujourdhui{

border:3px solid #2196f3;

background:#d2e2ed;

}




/* ================= EVENEMENTS ================= */


.cal-evenements{

display:flex;

flex-direction:column;

gap:4px;

margin-top:8px;

}



.event-ligne{

display:flex;

align-items:center;

gap:5px;

font-size:13px;

text-decoration:none;

color:#222;

position:relative;

border-radius:5px;

padding-left:3px;

}



.event-ligne:hover{

background:rgba(0,0,0,.08);

}



.event-icone{

font-size:22px;

}



.event-titre{

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

}



.anniversaire{

cursor:default;

}



/* ================= BULLE ================= */


.info-evenement{

display:none;

position:absolute;

left:0;

bottom:28px;

width:240px;

background:white;

border:1px solid #ccc;

border-radius:10px;

padding:12px;

z-index:999;

box-shadow:0 5px 20px rgba(0,0,0,.25);

color:#222;

font-size:14px;

}



.event-ligne:hover .info-evenement{

display:block;

}



.event-image{

width:100%;

max-height:120px;

object-fit:cover;

border-radius:8px;

margin-bottom:8px;

}




/* ================= MOBILE ================= */


@media(max-width:700px){


.calendrier{

gap:3px;

}


.cal-case{

height:70px;

padding:5px;

}


.numero{

font-size:15px;

}


.cal-titre{

font-size:12px;

padding:8px 0;

}


.event-titre{

display:none;

}


.event-icone{

font-size:18px;

}


/* bulle adaptée téléphone */

.info-evenement{

position:fixed;

left:10px;

right:10px;

bottom:20px;

width:auto;

}



}