/* Base */
*{box-sizing:border-box;} html,body{margin:0;height:100%;font-family:Arial,sans-serif;} 
body{display:flex;flex-direction:column;min-height:100vh;background:#f8f8f8;color:#222;}
main{flex:1;max-width:1000px;margin:0 auto;padding:20px;}
h1{text-align:center;margin-bottom:20px;}

/* Header/Menu */
header{background:#111;padding:15px 20px;}
nav{display:flex;justify-content:space-between;align-items:center;max-width:1000px;margin:0 auto;}
nav .logo{color:#e63946;font-size:20px;font-weight:bold;text-decoration:none;}
.menu-links{display:flex;}
.menu-links a{color:#eee;text-decoration:none;margin-left:20px;font-weight:bold;}
.menu-links a:hover{color:#e63946;}

/* Coquelicot Image */
.coquelicot-img{display:block;margin:30px auto;max-width:30vw;min-width:180px;width:100%;height:auto;}

/* Player */
.player{text-align:center;margin-bottom:20px;}
audio{width:100%;max-width:500px;}
.track-list{list-style:none;padding:0;margin-top:20px;}
.track-list li{padding:8px;cursor:pointer;border-bottom:1px solid #ddd;outline:none;}
.track-list li:hover,.track-list li.active{background:#e63946;color:#fff;}

/* Admin */
.admin-list{list-style:none;padding:0;}
.admin-list li{padding:6px 0;}
.admin-video-item{display:flex;justify-content:space-between;align-items:flex-start;padding:10px 0;border-bottom:1px solid #ddd;}
.admin-video-content{max-width:80%;}
.admin-video-delete button{background:#e63946;color:#fff;border:none;padding:6px 12px;cursor:pointer;}
.admin-video-delete button:hover{background:#c62839;}

/* Footer */
footer{background:#111;color:#eee;text-align:center;padding:20px 10px;border-top:2px solid #e63946;}
footer a{color:#e63946;text-decoration:none;}
footer a:hover{text-decoration:underline;}

/* =========================
   VIDEO YOUTUBE 16:9
========================= */
.video-item {
    max-width: 900px;      /* largeur max de la vidéo */
    margin: 40px auto;     /* centrée */
}

.video-item iframe {
    width: 100%;
    aspect-ratio: 16 / 9;  /* ⭐ clé du 16:9 */
    height: auto;
    border: none;
}



/* Responsive */
@media(max-width:768px){nav{flex-direction:column;}.menu-links{margin-top:10px;}.menu-links a{margin:5px;}.coquelicot-img{max-width:70vw;}}