/* === RESET & BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

html, body {
    height: 100%;
    background: #f8f9fa;
    color: #333;
    line-height: 1.6;
}

/* === HEADER RELOOKÉ & FUSIONNÉ === */
.site-header {
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, #4EA3F1 0%, #a8e1fc 60%, #fff 100%);
    justify-content: flex-start;
    padding: 0 25px;
    min-height: 110px;
    box-shadow: 0 2px 12px rgba(78,163,241,0.09);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}

.site-header .logo {
    display: flex;
    align-items: center;
    margin-right: 26px;
    height: 110px;
    padding: 0;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.site-header .logo img {
    display: block;
    height: 108px;         /* 108px = max de 110px du header */
    width: auto;
    object-fit: contain;   /* Respecte le ratio, mais force à remplir la hauteur */
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 16px;   /* Juste pour effet doux : tu peux mettre 0 si tu veux carré */
    box-shadow: none;
}

/* MENU MODERNE TAILLE CORRIGÉE */
.main-nav ul {
    list-style: none;
    display: flex;
    gap: 22px;
    align-items: center;
    margin: 0;
}
.main-nav a {
    text-decoration: none;
    color: #205680;
    font-weight: 700;
    font-size: 15px;
    background: rgba(255,255,255,0.56);
    border-radius: 14px;
    padding: 7px 14px;
    transition: color 0.18s, background 0.18s;
    box-shadow: 0 2px 8px rgba(78,163,241,0.07);
    line-height: 1.3;
}
.main-nav a:hover {
    color: #fff;
    background: #4EA3F1;
    box-shadow: 0 2px 14px rgba(78,163,241,0.15);
}

/* BARRE RECHERCHE HEADER MODERNE, TAILLE CORRIGÉE */
.search-bar {
    flex: 1;
    max-width: 290px;
    margin-left: 18px;
    margin-right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    z-index: 1;
}

.search-bar form {
    display: flex;
    width: 100%;
    background: #fff;
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(78,163,241,0.07);
    border: 1.5px solid #c7e4f9;
    overflow: hidden;
}

.search-bar input {
    flex: 1;
    padding: 8px 10px;
    border: none;
    font-size: 14px;
    background: transparent;
    outline: none;
    border-radius: 50px 0 0 50px;
    color: #333;
}

.search-bar button {
    padding: 8px 10px;
    background: #4EA3F1;
    color: #fff;
    border: none;
    border-radius: 0 50px 50px 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: background 0.2s;
}

.search-bar button:hover {
    background: #2590e6;
}



/* HEADER RESPONSIVE */
@media (max-width: 600px) {
    .site-header {
        min-height: 70px;
        padding: 0 10px;
        background: linear-gradient(90deg, #fff 85%, #e2f1ff 100%);
    }
  .site-header .logo {
        height: 58px;
        margin-right: 7px;
    }
    .site-header .logo img {
        height: 54px;
        border-radius: 8px;
    }

    .main-nav ul {
        gap: 8px;
    }
    .main-nav a {
        font-size: 12px;
        padding: 5px 8px;
        border-radius: 8px;		
    }
    .search-bar {
        max-width: 100%;
        margin-left: 0;
    }
    .search-bar form {
        border-radius: 18px;
    }
    .search-bar input {
        border-radius: 18px 0 0 18px;
        font-size: 15px;
        padding: 10px 10px;
    }
    .search-bar button {
        border-radius: 0 18px 18px 0;
        font-size: 15px;
        padding: 10px 14px;

    }
}

/* === RESTE DE TON CSS CI-DESSOUS, NE PAS TOUCHER === */

/* === TITRES */
.search-title {
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    margin: 20px 0;
    color: #222;
}

.search-subtitle {
    font-size: 18px;
    text-align: center;
    margin: 15px 0;
    color: #444;
}

/* 🔎 FORMULAIRE DE RECHERCHE */
.search-form {
    text-align: center;
    margin-bottom: 25px;
}

.search-form input[type="text"] {
    width: 60%;
    max-width: 400px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
    transition: 0.3s ease;
}

.search-form input[type="text"]:focus {
    border-color: #4EA3F1;
    outline: none;
    box-shadow: 0 0 5px rgba(78, 163, 241, 0.5);
}

.search-form button {
    background: #4EA3F1;
    color: #fff;
    font-weight: bold;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    margin-left: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.search-form button:hover {
    background: #1C86E0;
}


/* === FOOTER === */
.site-footer {
    text-align: center;
    padding: 20px;
    background: #fff;
    border-top: 1px solid #eee;
    font-size: 14px;
    width: 100%;
    margin-top: 20px;
}

/* === MAIN === */
main.main-content {
    padding: 20px;
    max-width: 1200px;
    margin: auto;
}

/* === TITRES === */
h1 {
    font-size: 28px;
    margin-bottom: 15px;
    font-weight: 700;
    color: #222;
    text-align: left;
}
h2 {
    font-size: 22px;
    margin: 15px 0 10px;
    color: #333;
}
h3 {
    font-size: 18px;
    margin: 10px 0;
    color: #444;
    font-weight: 600;
}

/* 🎨 === STYLE MODERNE COMMENTAIRES === 🎨 */
.comments-section {
    margin-top: 30px;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.comments-section h2 {
    font-size: 22px;
    margin-bottom: 20px;
    font-weight: 700;
    color: #222;
    border-bottom: 2px solid #4EA3F1;
    padding-bottom: 8px;
}

/* Formulaire commentaire */
/* === ✅ EMBELLISSEMENT FORMULAIRE COMMENTAIRES SANS TOUCHER LE RESTE === */
#comment-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
    padding: 15px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #e6e6e6;
}

#comment-form textarea {
    padding: 14px;
    font-size: 16px;
    border-radius: 10px;
    border: 1px solid #ddd;
    resize: vertical;
    min-height: 90px;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: 'Inter', sans-serif;
}

#comment-form textarea:focus {
    outline: none;
    border-color: #4EA3F1;
    box-shadow: 0 0 6px rgba(78, 163, 241, 0.4);
}

/* Bouton d’envoi moderne */
#comment-form button {
    align-self: flex-end;
    background: #4EA3F1;
    color: #fff;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}

#comment-form button:hover {
    background: #3a8ad7;
}

.comment-form {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    gap: 10px;
}
.comment-form textarea {
    padding: 12px;
    font-size: 15px;
    border-radius: 10px;
    border: 1px solid #ddd;
    resize: vertical;
    min-height: 70px;
    transition: border-color 0.2s;
}
.comment-form textarea:focus {
    outline: none;
    border-color: #4EA3F1;
}
.comment-form button {
    align-self: flex-end;
    background: #4EA3F1;
    color: #fff;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
}
.comment-form button:hover {
    background: #3a8ad7;
}

/* Liste des commentaires */
.comment {
    display: flex;
    gap: 12px;
    background: #f9fbfd;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #e0e6ec;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    transition: transform 0.2s;
}
.comment:hover {
    transform: translateY(-2px);
}
.comment img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #4EA3F1;
}

.comment-content {
    flex: 1;
}
/* 🎨 === NOUVEAU STYLE POUR LE TEXTE DES COMMENTAIRES === 🎨 */
.comment-content p {
    margin: 0;
    padding: 12px 16px;
    background: #eef6ff; /* bleu très clair pour rester dans ton thème */
    border-radius: 12px;
    color: #222;
    border: 1px solid #d0e4ff;
    position: relative;
    display: inline-block;
    max-width: 85%;
}

/* ✅ Petit triangle type “bulle de chat” */
.comment-content p::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 15px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #eef6ff; /* même couleur que le fond */
}
.comment-content p::after {
    content: "";
    position: absolute;
    left: -9px;
    top: 15px;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 9px solid #d0e4ff; /* même couleur que la bordure */
}

.comment-content strong {
    font-size: 16px;
    color: #1c1c1c;
}
.comment-content small {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 6px;
}


/* Message si aucun commentaire */
.no-comment {
    text-align: center;
    font-style: italic;
    color: #777;
    margin-top: 15px;
}


/* === BLOCS SAFE === */
.main-box {
    background: #fff;
    padding: 10px;
    text-align: center;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.side-box {
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    margin-bottom: 20px;
}

/* === GRILLE VIDÉOS === */
.videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
}
.video-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    overflow: hidden;
    text-align: center;
}
.video-card img {
    width: 100%;
    height: auto;
    display: block;
}
.video-card h3 {
    padding: 10px;
    font-size: 16px;
    color: #222;
}
.category-label {
    display: block;
    font-size: 13px;
    color: #555;
    padding-bottom: 10px;
}

/* === LAYOUT PRINCIPAL AVEC SIDEBAR === */
.main-content-area {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 20px;
}

/* ✅ bloc vidéo prend toute la place */
.main-content-area > section {
    flex: 1;
}

/* ✅ sidebar reste fine */
.sidebar {
    width: 280px;
    flex-shrink: 0;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
    .main-content-area {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
        margin-top: 20px;
    }
}
/* === COOKIE BANNER === */
#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2c2c2c;
    color: #fff;
    padding: 12px 15px;
    text-align: center;
    font-size: 14px;
    z-index: 9999;
    display: none; /* masqué par défaut tant que non accepté */
    box-shadow: 0 -2px 6px rgba(0,0,0,0.2);
}

/* lien dans la barre */
#cookie-banner a {
    color: #4EA3F1;
    text-decoration: underline;
    font-weight: 500;
}

/* bouton accepter */
#cookie-banner button {
    background: #4EA3F1;
    color: white;
    border: none;
    padding: 8px 14px;
    margin-left: 12px;
    cursor: pointer;
    border-radius: 6px;
    font-weight: bold;
    transition: background 0.2s ease;
}

#cookie-banner button:hover {
    background: #3a8ad7;
}
/* === PAGE VIDÉO === */
.video-page {
    max-width: 1000px;
    margin: 30px auto;
    padding: 0 15px;
}

/* 🎥 Player centré et responsive */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* format 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    margin-bottom: 20px;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* 📜 Infos vidéo */
.video-info h1 {
    font-size: 26px;
    margin-bottom: 10px;
    color: #222;
}
.video-category {
    display: inline-block;
    background: #4EA3F1;
    color: white;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 14px;
    margin-bottom: 15px;
}
.video-description {
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    line-height: 1.6;
}

/* 💬 Section commentaires */
.comments-section {
    margin-top: 30px;
}
.comments-section h2 {
    margin-bottom: 15px;
    font-size: 22px;
    color: #333;
}

/* 💬 Formulaire de commentaire */
.comment-form {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
.comment-form textarea {
    padding: 10px;
    font-size: 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    resize: vertical;
}
.comment-form button {
    align-self: flex-end;
    background: #4EA3F1;
    color: #fff;
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s;
}
.comment-form button:hover {
    background: #3a8ad7;
}

/* 💬 Affichage des commentaires */
.comment {
    display: flex;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.comment img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #4EA3F1;
}
.comment-content strong {
    font-size: 16px;
    color: #222;
}
.comment-content small {
    display: block;
    font-size: 12px;
    color: #777;
    margin-bottom: 6px;
}
.comment-content p {
    margin: 0;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 8px;
    color: #444;
}
/* === FORMULAIRES AUTH === */
.auth-form {
    max-width: 400px;
    margin: 20px auto;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.auth-form label {
    font-weight: bold;
    margin-bottom: 5px;
}
.auth-form input {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
}
.auth-form button {
    background: #4EA3F1;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}
.auth-form button:hover {
    background: #3a8ad7;
}

/* === PROFIL === */
/* === AVATAR === */
.profil-box img.profil-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 10px;
    border: 2px solid #4EA3F1;
    object-fit: cover;
}

/* === FORMULAIRE AVATAR === */
.avatar-form {
    max-width: 400px;
    margin: 20px auto;
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
}
.avatar-form input[type=file] {
    margin: 10px 0;
}
.avatar-form button {
    background: #4EA3F1;
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}
.avatar-form button:hover {
    background: #3a8ad7;
}

/* === STYLE MENU CONNEXION === */
.login-btn, .register-btn, .logout-link, .user-link, .admin-link {
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: bold;
    transition: background 0.2s ease;
}

/* 🔑 Connexion bouton bleu clair */
.login-btn {
    background: #4EA3F1;
    color: #fff;
}
.login-btn:hover {
    background: #3a8ad7;
}

/* 📝 Inscription bouton vert */
.register-btn {
    background: #3cb371;
    color: #fff;
}
.register-btn:hover {
    background: #2e8b57;
}

/* 🚪 Déconnexion bouton rouge clair */
.logout-link {
    background: #ff5c5c;
    color: #fff;
}
.logout-link:hover {
    background: #e14c4c;
}

/* 👤 Profil simple (gris clair) */
.user-link {
    background: #f0f0f0;
    color: #333;
}
.user-link:hover {
    background: #ddd;
}

/* ⚙️ Lien admin (orange) */
.admin-link {
    background: #ff9800;
    color: white;
}
.admin-link:hover {
    background: #e68a00;
}
/* 🎥 === VIDEO WRAPPER === */
.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 25px auto;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* ✅ ratio 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background: #000;
}

/* 🎥 === VIDEO WRAPPER === */
.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 25px auto;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* ✅ ratio 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background: #000;
}

/* ✅ Iframe YT en responsive */
.video-container iframe,
.video-container #player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 🎯 PUB AMAZON PRIME (overlay) */
#amazon-ad {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.95);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    border-radius: 12px;
}

#amazon-ad img {
    max-width: 220px;
    width: 80%;
    border-radius: 10px;
    margin-bottom: 15px;
}

#amazon-ad h2 {
    font-size: 26px;
    margin-bottom: 10px;
    color: #FF9900;
}

#amazon-ad p {
    font-size: 18px;
    margin-bottom: 20px;
    max-width: 80%;
    color: #fff;
}

.ad-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

/* 🎁 Bouton Amazon Prime */
.ad-button {
    background: #FF9900;
    color: #fff;
    padding: 12px 20px;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    font-size: 16px;
    transition: background 0.2s ease;
}
.ad-button:hover {
    background: #e68a00;
}

/* ▶ Bouton rejouer */
#replay-btn {
    background: #4EA3F1;
    color: #fff;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s ease;
}
#replay-btn:hover {
    background: #357AC8;
}

/* 📱 Responsive */
@media (max-width: 600px) {
    #amazon-ad h2 { font-size: 22px; }
    #amazon-ad p { font-size: 16px; }
    .ad-button, #replay-btn { font-size: 14px; padding: 10px 16px; }
}
.ad-banner {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 20px 0; /* petit espace en haut/bas */
}
.ad-banner img {
    max-width: 100%;
    height: auto;
}
			/* ✅ FORCE LE CENTRAGE ABSOLU DES PUBS SIDEBAR */
.side-box .main-box {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

/* ✅ Les images/iframes des pubs ne doivent pas flotter */
.side-box .main-box img,
.side-box .main-box iframe {
    display: block !important;
    float: none !important;
    margin: 0 auto !important;
}


/* 🎨 Bloc vidéos suggérées dans la sidebar */
.suggested-videos h3 {
    font-size: 18px;
    margin-bottom: 12px;
    color: #333;
    font-weight: 700;
    text-align: center;
    border-bottom: 2px solid #4EA3F1;
    padding-bottom: 6px;
}

/* ✅ Liste sans puces */
.suggested-videos ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ✅ Chaque item */
.suggested-videos li {
    position: relative;
    background: #f8f9fa;
    margin-bottom: 8px;
    padding: 10px;
    border-radius: 8px;
    transition: background 0.2s ease;
    text-align: center;
}

.suggested-videos li:hover {
    background: #eef6ff;
}

/* ✅ Lien dans la liste */
.suggested-videos li a {
    text-decoration: none !important;
    font-weight: 600;
    color: #333;
    display: inline-block;
    width: 100%;
    padding: 6px 8px;
    transition: background 0.2s ease, color 0.2s ease;
}

.suggested-videos li a:hover {
    color: #4EA3F1;
    border-radius: 6px;
}

/* ✅ Mot fun */
.suggested-videos li .fun-word {
    font-weight: normal;
    font-style: italic;
    color: #777;
}

/* ✅ Tooltip invisible par défaut */
.suggested-videos li .tooltip-text {
    display: none;
    position: absolute;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 6px;
    max-width: 220px;
    text-align: center;
    z-index: 10;
    left: 105%;
    top: 50%;
    transform: translateY(-50%);
    white-space: normal;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ✅ Affichage du tooltip au survol */
.suggested-videos li:hover .tooltip-text {
    display: block;
}


/* === GRID CATÉGORIES === */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
}

/* === CARTE DE CATÉGORIE === */
.category-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    text-align: center;
    padding: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #eee;
}

.category-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 12px rgba(0,0,0,0.12);
}

/* === LIEN DANS LES CARTES === */
.category-link {
    text-decoration: none;    /* 🔥 PAS DE SOULIGNEMENT */
    color: inherit;           /* le texte garde la couleur du parent */
    display: block;
}

/* === TITRE DE CATÉGORIE === */
.category-card h3 {
    font-size: 20px;
    font-weight: bold;
    color: #333;
	/* ✅ Empêche le retour à la ligne dans le titre des catégories */
    white-space: nowrap;      /* 🔥 tout reste sur une ligne */
    overflow: hidden;         /* empêche un débordement disgracieux */
    text-overflow: ellipsis;  /* ajoute "…" si c’est trop long */
    max-width: 95%;
    margin: 0 auto;
    cursor: help; /* petit curseur d’aide quand on survole */
    position: relative;
}



/* === EMOJI DEVANT LE NOM === */

/* ajoute dans ton CSS global */
.emoji img,
.emoji .emoji-icon {
  display: inline-block;
  width: 1em;      /* même taille que le texte environ */
  height: 1em;
  vertical-align: -0.15em; /* petit ajustement */
}


.category-card h3 .emoji {
  font-size: 22px; /* grossit l'emoji ET le SVG */
  margin-right: 6px;
}


 /* === MOT FUN === */
.category-card h3 .fun-word {
    font-weight: normal;
    font-style: italic;
    color: #666;
    margin-left: 6px;
    font-size: 15px;
    white-space: nowrap;   /* 🔥 empêche juste “« qui parlent »” de passer à la ligne */


}
/* ✅ ENLÈVE LE SOULIGNEMENT DES LIENS DANS LES CARTES CATÉGORIES */
.category-card a {
    text-decoration: none !important;  /* enlève TOUT soulignement */
    color: inherit;                    /* garde la couleur du texte parent */
    display: block;
}
 /* ✅ TOOLTIP AU SURVOL */
.category-card h3:hover::after {
    content: attr(data-full-text); /* 🔥 affiche le texte complet */
    position: absolute;
    bottom: 110%; /* au-dessus du texte */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 6px 10px;
    font-size: 14px;
    white-space: normal;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    max-width: 220px;
    text-align: center;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.category-card h3:hover::after {
    opacity: 1;
}

.tooltip-text {
    display: none;
    position: absolute;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 6px;
    max-width: 220px;
    text-align: center;
    z-index: 10;
    bottom: 120%; /* au-dessus du titre */
    left: 50%;
    transform: translateX(-50%);
    white-space: normal;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ✅ Afficher le tooltip quand on survole le titre */
.category-card h3:hover + .tooltip-text {
    display: block;
}

/* ✅ Titre de la catégorie */
.categorie-titre {
    font-size: 28px;
    font-weight: bold;
    margin: 30px 0 20px;
    text-align: center;
    color: #222;
    letter-spacing: 1px;
}

/* ✅ Carte vidéo */
.video-carte {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.video-carte:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* ✅ Wrapper miniature pour un effet clean */
.miniature-wrapper {
    width: 100%;
    height: 150px;
    overflow: hidden;
}

.miniature {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.video-carte:hover .miniature {
    transform: scale(1.05);
}

/* ✅ Titre vidéo (non souligné) */
.video-titre {
    font-size: 17px;
    font-weight: bold;
    color: #333;
    margin: 12px 10px 6px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.video-carte a {
    text-decoration: none;
}

.video-carte:hover .video-titre {
    color: #007BFF;
}

/* ✅ Humoriste */
.video-humoriste {
    color: #777;
    font-size: 14px;
    margin-bottom: 12px;
    text-align: center;
}

/* ✅ Message si aucune vidéo */
.aucune-video {
    text-align: center;
    font-size: 18px;
    margin-top: 30px;
    color: #999;
}
/* 🎯 TITRE ET INTRO */
.contact-title {
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    margin: 20px 0 10px;
    color: #222;
}

.contact-intro {
    text-align: center;
    color: #666;
    margin-bottom: 25px;
    font-size: 16px;
}

/* ✅ FORMULAIRE CONTACT */
.contact-form {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-width: 500px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 18px;
}

.contact-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 6px;
    color: #333;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 15px;
    transition: 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #4EA3F1;
    outline: none;
    box-shadow: 0 0 5px rgba(78, 163, 241, 0.5);
}

/* ✅ BOUTON CONTACT */
.contact-btn {
    background: #4EA3F1;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 12px;
    border: none;
    border-radius: 8px;
    width: 100%;
    cursor: pointer;
    transition: background 0.3s ease;
}

.contact-btn:hover {
    background: #1C86E0;
}

/* ✅ MESSAGE DE SUCCÈS / ERREUR */
.contact-success {
    background: #d4f8d4;
    color: #2d662d;
    padding: 12px;
    text-align: center;
    border-radius: 8px;
    margin-bottom: 15px;
    font-weight: bold;
}

.contact-error {
    background: #fcdcdc;
    color: #8b0000;
    padding: 12px;
    text-align: center;
    border-radius: 8px;
    margin-bottom: 15px;
    font-weight: bold;
}
/* 🎯 RESET TOTAL DES TOOLTIP INLINE */
.sidebar .suggested-videos li .tooltip-text {
    all: unset !important;              /* 🔥 Supprime TOUS les styles inline */
    position: absolute !important;
    left: 105% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(0, 0, 0, 0.95) !important;
    color: #fff !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    max-width: 260px !important;
    text-align: center !important;
    white-space: normal !important;
    z-index: 99999 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;

    display: none !important;   /* ✅ CACHÉ PAR DÉFAUT */
}

/* ✅ Affichage au hover */
.sidebar .suggested-videos li:hover .tooltip-text {
    display: block !important;
}
.cashpage-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 150px auto 30px auto; /* 🔥 énorme espace au-dessus */
    padding: 15px;
    text-align: center;
}

/* ✅ Conteneur pour miniature + lecteur */
.video-thumb {
    position: relative;
    display: inline-block;
    width: 112px; /* largeur miniature w-28 */
    height: 63px; /* hauteur miniature */
    overflow: visible; /* important pour que le lecteur déborde */
}

/* ✅ Iframe masqué par défaut */
.video-thumb iframe {
    display: none;
    position: absolute;
    top: -50px;       /* remonte un peu */
    left: -50px;      /* décale un peu à gauche */
    width: 320px;     /* 👈 taille lecteur au survol */
    height: 180px;    /* 👈 taille lecteur au survol */
    z-index: 999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    border-radius: 8px;
}
/* === PATCH MOBILE GLOBAL === */
@media (max-width: 600px) {

    html, body {
        overflow-x: hidden;
        width: 100%;
    }

    .site-header,
    .main-nav ul,
    .search-bar,
    .main-content-area,
    .videos-grid,
    .video-grille,
    .categories-grid {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden;
        flex-wrap: wrap;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .main-nav a {
        padding: 10px 0;
        display: block;
        width: 100%;
    }

    .search-bar {
        flex-direction: column;
        margin-left: 0;
        gap: 10px;
    }

    .search-bar input,
    .search-bar button {
        width: 100%;
        border-radius: 8px !important;
    }

    .main-content-area {
        flex-direction: column;
    }

    .sidebar {
        width: 100% !important;
        margin-top: 20px;
    }

    .video-carte,
    .category-card,
    .video-card {
        margin: auto;
        max-width: 90%;
    }

    .categorie-titre {
        font-size: 22px;
    }

    .video-titre {
        font-size: 16px;
    }

    .search-form input[type="text"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    .search-form button {
        width: 100%;
        margin-left: 0;
    }
}
.main-nav ul {
    list-style: none;
    display: flex;
    gap: 22px;
    align-items: center;
    margin: 0;
}
.main-nav a {
    display: inline-flex;           /* aligne l'icône et le texte sur une ligne */
    align-items: center;
    text-decoration: none;
    color: #205680;
    font-weight: 700;
    font-size: 17px;
    background: rgba(255,255,255,0.56);
    border-radius: 16px;
    padding: 8px 14px;              /* padding vertical réduit */
    transition: color 0.18s, background 0.18s;
    box-shadow: 0 2px 8px rgba(78,163,241,0.07);
    line-height: 1.3;
    white-space: nowrap;            /* NE PAS PASSER À LA LIGNE */
}
.main-nav a span,
.main-nav a i,
.main-nav a svg {
    margin-right: 7px;
    font-size: 19px;
    display: inline-block;
    vertical-align: middle;
}
.main-nav a:hover {
    color: #fff;
    background: #4EA3F1;
    box-shadow: 0 2px 14px rgba(78,163,241,0.15);
}


/* ✅ CORRECTION DÉFINITIVE : menu mobile horizontal, compact, fluide */
@media (max-width: 900px) {
    .site-header {
        flex-direction: column;
        align-items: center;
        padding: 10px 12px;
    }

    .site-header .logo {
        text-align: center;
        margin-bottom: 6px;
    }

    .main-nav {
        width: 100%;
    }

    .main-nav ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 0;
        margin: 0;
        width: 100% !important;
    }

    .main-nav li {
        flex: none;
    }

    .main-nav a {
        font-size: 14px;
        padding: 6px 8px;
        border-radius: 6px;
        border: 1px solid #ddd;
        background: #fff;
        display: inline-block;
        text-align: center;
        white-space: nowrap;
    }

    @media (max-width: 600px) {
    /* 🔍 Bouton pour afficher la recherche */
    .search-toggle {
        display: inline-block;
        background: #4EA3F1;
        color: white;
        padding: 6px 10px;
        font-size: 14px;
        border-radius: 6px;
        cursor: pointer;
        margin-top: 4px;
    }

    /* 🔍 Masquer la barre de recherche par défaut */
    .search-bar {
        display: none;
        width: 100%;
        margin-top: 8px;
    }

    .search-bar.show {
        display: flex;
        width: 100%;
    }

    .search-bar form {
        display: flex;
        width: 100%;
        gap: 6px;
    }

    .search-bar input[type="text"] {
        flex: 1;
        padding: 12px;
        border-radius: 8px;
        font-size: 15px;
        border: 1px solid #ccc;
    }

    .search-bar button {
        flex: 0 0 auto;
        padding: 12px 16px;
        border-radius: 8px;
        font-size: 15px;
        background: #4EA3F1;
        color: white;
        border: none;
        cursor: pointer;
    }
}
/* 👇👇👇  AJOUT : fermeture manquante du @media (max-width: 900px) */
}
/* ===========================
   THEME MOBILE EXCLUSIF
   =========================== */
@media (max-width: 768px){
  html, body { background:#fff; color:#222; }
  .video-page, .container, main, .content { padding: 0 12px; }

  /* Header compact + actions */
  .site-header{
    position:sticky; top:0; z-index:1000; display:flex; align-items:center; justify-content:space-between;
    padding:10px 12px; box-shadow:0 2px 10px rgba(0,0,0,.06); background:#fff;
  }
  .site-header .logo img{ height:46px !important; width:auto; display:block; }

  .mobile-actions{ display:flex; align-items:center; gap:8px; }
  .btn-burger, .search-toggle{
    display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px;
    border:1px solid #e5e7eb; background:#fff; font-size:18px; line-height:1; cursor:pointer;
  }
  .btn-burger:active, .search-toggle:active{ transform:scale(.98); }

  /* Drawer menu */
  .main-nav{ position:fixed; inset:0 0 auto 0; top:56px; z-index:999; }
  .main-nav ul{
    position:fixed; left:0; right:0; top:56px; background:#fff; border-top:1px solid #eee;
    transform:translateY(-120%); transition:transform .25s ease; padding:10px 12px; box-shadow:0 12px 24px rgba(0,0,0,.06);
  }
  .main-nav.show ul{ transform:translateY(0); }
  .main-nav li{ margin:6px 0; }
  .main-nav a{ display:block; padding:12px; border-radius:10px; background:#f7f8fa; font-weight:600; color:#111; text-decoration:none; }
  .main-nav a:active{ background:#eef2ff; }

  /* Barre de recherche togglable */
  .search-bar{ display:none; width:100%; padding:10px 12px; background:#fff; border-top:1px solid #eee; }
  .search-bar.show{ display:flex; gap:8px; }
  .search-bar input{ flex:1; padding:12px 14px; border:1px solid #e5e7eb; border-radius:10px; }
  .search-bar button{ padding:12px 16px; border-radius:10px; border:1px solid #111; background:#111; color:#fff; }

  /* Player */
  .video-wrapper, .video-container, #player-container{ width:100%; }
  #player-desktop, #player-mobile, #amazon-ad{ width:100%; aspect-ratio:16/9; }
  #amazon-ad{ display:none; align-items:center; justify-content:center; flex-direction:column; gap:10px; padding:12px; }

  /* Infos vidéo */
  .video-info{ width:100% !important; margin:10px auto 14px !important; }
  .video-info h1{ font-size:20px; line-height:1.2; margin:8px 0 10px; }
  .video-info .video-category{ font-size:14px; padding:6px 10px; border-radius:999px; background:#f1f5f9; display:inline-block; }

  .video-info .meta-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; }
  .report-btn{
    padding:8px 10px; border-radius:10px; border:1px solid #fecaca; background:#fff1f2; color:#b91c1c; font-weight:700; font-size:13px;
  }

  .video-card{ border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.06); }
  .video-card .thumb{ aspect-ratio:16/9; width:100%; object-fit:cover; }

  /* Commentaires */
  .comments-section{ margin-top:18px; }
  .comments-section h2{ font-size:18px; margin-bottom:8px; }
  #comment-form textarea{ width:100%; min-height:90px; border:1px solid #e5e7eb; border-radius:12px; padding:10px; }
  #comment-form button{ margin-top:8px; width:100%; padding:12px; border-radius:12px; background:#111; color:#fff; border:1px solid #111; }
  .comment{ display:flex; gap:10px; padding:10px 0; border-bottom:1px solid #f1f5f9; }
  .comment img{ width:40px; height:40px; border-radius:999px; object-fit:cover; }
  .comment-content strong{ font-size:14px; }
  .comment-content small{ color:#64748b; }
  .comment-content p{ font-size:14px; margin-top:4px; }

  /* Bottom nav (optionnel) */
  .mobile-bottom-nav{
    position:fixed; left:0; right:0; bottom:0; z-index:1000; display:flex; justify-content:space-around; align-items:center;
    padding:8px 6px; background:#fff; border-top:1px solid #eee;
  }
  .mobile-bottom-nav a{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px; text-decoration:none; color:#111; }
  body{ padding-bottom:64px; }
}

/* DESKTOP (>=769px) – forcer l’affichage normal */
@media (min-width:769px){
  .mobile-actions, .mobile-bottom-nav{ display:none !important; }
  .main-nav{ position:static !important; }
  .main-nav ul{
    position:static !important; transform:none !important; box-shadow:none !important; border:0 !important; padding:0 !important;
    display:flex !important; gap:16px;
  }
}

/* ======================================================
   FUNZONE SLIDERS (scopé .fz-*)
   ====================================================== */
.fz-slider{
  position:relative; width:100%; overflow:hidden; border-radius:12px; background:#0b0c10;
  box-shadow:0 6px 20px rgba(0,0,0,.08); margin:14px 0;
}
.fz-slider .fz-track{
  display:flex; scroll-snap-type:x mandatory; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
}
.fz-slider .fz-slide{
  position:relative; min-width:100%; height:320px; scroll-snap-align:start;
  display:flex; align-items:flex-end; justify-content:flex-start; background:#111; color:#fff;
}
@media (min-width:768px){ .fz-slider .fz-slide{ height:420px; } }
.fz-slider .fz-slide .fz-inner{
  position:relative; z-index:2; padding:22px 26px; width:100%;
  background:linear-gradient(0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,0) 60%);
}
.fz-slider .fz-title{
  display:block; margin:0 0 8px; max-width:min(900px,92%); font-weight:800; line-height:1.15; letter-spacing:.2px;
  font-size:clamp(20px, 2.6vw, 36px); color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.65), 0 10px 24px rgba(0,0,0,.45);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.fz-slider .fz-title::after{
  content:""; display:block; width:56px; height:3px; border-radius:3px; background:#4EA3F1; margin-top:8px; opacity:.9;
}
.fz-slider .fz-meta{
  display:inline-block; margin-top:6px; padding:6px 10px; font-size:14px; color:#fff; border-radius:999px;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.18);
}
/* Flèches héros */
.fz-slider .fz-prev,.fz-slider .fz-next{
  position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px;
  border:1px solid rgba(255,255,255,.55); background:rgba(0,0,0,.25); color:#fff; border-radius:8px;
  z-index:20; pointer-events:auto; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:22px; line-height:1; user-select:none; outline:none;
}
.fz-slider .fz-prev{ left:10px; } .fz-slider .fz-next{ right:10px; }
.fz-slider .fz-prev:hover,.fz-slider .fz-next:hover{ background:rgba(0,0,0,.35); border-color:rgba(255,255,255,.7); }
.fz-slider .fz-prev:active,.fz-slider .fz-next:active{ transform:translateY(-50%) scale(.98); }
/* Dots */
.fz-slider .fz-dots{ position:absolute; left:0; right:0; bottom:12px; text-align:center; }
.fz-slider .fz-dots button{
  width:10px; height:10px; border-radius:50%; border:0; margin:0 4px; background:rgba(255,255,255,.45);
}
.fz-slider .fz-dots button.active{ background:#fff; }

/* CTA */
.fz-slider .btn.btn-primary{
  display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:800;
  font-size:15px; letter-spacing:.2px; color:#fff !important; border:0;
  background:linear-gradient(180deg,#4EA3F1 0%, #1C86E0 100%);
  box-shadow:0 10px 22px rgba(28,134,224,.35), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:saturate(120%) blur(2px); -webkit-backdrop-filter:saturate(120%) blur(2px);
  transition: transform .18s, box-shadow .18s, background .18s;
}
.fz-slider .btn.btn-primary::before{ content:"▶"; display:inline-block; font-size:13px; line-height:1; translate:0 1px; opacity:.95; }
.fz-slider .btn.btn-primary:hover{
  background:linear-gradient(180deg,#2590e6 0%, #1C86E0 100%); transform:translateY(-2px); box-shadow:0 14px 28px rgba(28,134,224,.4);
}
.fz-slider .btn.btn-primary:active{ transform:translateY(-1px) scale(.98); box-shadow:0 8px 16px rgba(28,134,224,.35); }
.fz-slider .btn.btn-primary:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(78,163,241,.35), 0 10px 22px rgba(28,134,224,.35);
}
@media (max-width:600px){
  .fz-slider .fz-inner{ padding:14px 12px; }
  .fz-slider .fz-title{ font-size:clamp(18px, 5vw, 22px); -webkit-line-clamp:3; }
  .fz-slider .btn.btn-primary{ padding:10px 14px; font-size:14px; gap:6px; }
  .fz-slider .btn.btn-primary::before{ font-size:12px; }
}

/* Carrousel cartes */
.fz-carousel{ position:relative; overflow:hidden; margin:14px 0; }
.fz-carousel .fz-track{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.fz-carousel .fz-slide{ scroll-snap-align:start; min-width:78%; }
@media (min-width:600px){ .fz-carousel .fz-slide{ min-width:48%; } }
@media (min-width:992px){ .fz-carousel .fz-slide{ min-width:31%; } }
.fz-card{
  background:#fff; color:#111827; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.fz-thumb{ width:100%; height:160px; background:#f4f6fa; object-fit:cover; display:block; }
.fz-card .fz-body{ padding:10px 12px; }
.fz-card .fz-title{ font-size:16px; margin:0 0 6px; font-weight:600; }
.fz-card .fz-cat{ font-size:12px; color:#6b7280; }
.fz-carousel .fz-prev,.fz-carousel .fz-next{
  position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border:1px solid #cbd5e1; background:#fff; color:#111;
  border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,.05); z-index:15; pointer-events:auto; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:18px; line-height:1; user-select:none;
}
.fz-carousel .fz-prev{ left:6px; } .fz-carousel .fz-next{ right:6px; }
.fz-carousel .fz-prev:hover,.fz-carousel .fz-next:hover{ background:#f8fafc; }

/* Masquer scrollbar visuelle */
.fz-slider .fz-track::-webkit-scrollbar,
.fz-carousel .fz-track::-webkit-scrollbar{ height:0; }

/* Empêcher le texte bas de bloquer les flèches */
.fz-slider .fz-inner{ pointer-events:none; }
.fz-slider .fz-inner a, .fz-slider .fz-inner .btn{ pointer-events:auto; }

/* Sidebar: Catégories populaires (nouveau bloc) */
.popular-cats .pc-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.popular-cats .pc-item{ min-width:0; }
.popular-cats .pc-link{
  display:flex; align-items:center; gap:10px; min-width:0; text-decoration:none; color:#111; background:#f8fafc;
  border:1px solid #e5e7eb; border-radius:12px; padding:10px 12px;
  transition: background .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.popular-cats .pc-link:hover{
  background:#fff; border-color:#dbeafe; box-shadow:0 6px 16px rgba(30,64,175,.08); transform:translateY(-1px);
}
.popular-cats .pc-ico{
  flex:0 0 auto; width:38px; height:38px; border-radius:10px; background:#eef6ff; display:grid; place-items:center; font-size:20px; border:1px solid #dbeafe;
}
.popular-cats .pc-ico img{ width:22px; height:22px; display:block; object-fit:contain; }
.popular-cats .pc-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.popular-cats .pc-title{
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; white-space:normal; word-break:break-word; overflow-wrap:anywhere;
  font-weight:700; font-size:14px; line-height:1.2; color:#0f172a;
}
.popular-cats .pc-meta{ font-size:12px; color:#64748b; }
.popular-cats .pc-arr{ margin-left:auto; font-size:18px; color:#94a3b8; transition: transform .18s, color .18s; }
.popular-cats .pc-link:hover .pc-arr{ transform:translateX(2px); color:#475569; }
.popular-cats .pc-tip{ position:absolute; left:-9999px; top:auto; opacity:0; pointer-events:none; }
.popular-cats .pc-item.more .pc-ico{ background:#f1f5f9; border-color:#e2e8f0; }

/* Bouton "Voir plus" intégré dans la grille */
#videosGrid .grid-more{ grid-column:1 / -1; text-align:center; margin:14px 0 6px; }

/* ====== VIDÉO – HEADER INFOS ====== */
.video-info h1{ font-weight:800; letter-spacing:-.015em; line-height:1.15; margin-bottom:6px; }
.video-category{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:#eef6ff; color:#0f5fb8; font-weight:700; border:1px solid #d6e9ff;
}
.meta-row{ align-items:center; gap:12px; }
.meta-center{ flex:1; display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.meta-center span{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-size:14px; color:#374151;
  background:#f6f8fb; border:1px solid #e7ecf2; box-shadow:0 1px 0 rgba(17,24,39,.02) inset;
}
.meta-center span:nth-child(2){ display:none; } /* masque la puce “•” si présente */

.report-btn{
  display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; font-weight:800;
  color:#b42318; background:#fff; border:1px solid #f4d4d1; box-shadow:0 4px 12px rgba(244,63,94,.10);
}
.report-btn::before{ content:"🚩"; }
.report-btn:hover{ background:#fff3f2; border-color:#f2b4ae; }



/* ===============================
   PAGE VIDÉO — STYLES ESSENTIELS
   =============================== */

/* Container page */
.video-page{max-width:1000px;margin:30px auto;padding:0 15px}

/* ——— PLAYER ——— */
.video-wrapper{position:relative;width:100%;max-width:900px;margin:0 auto 20px}
.video-container{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.08);background:#000}
.video-container iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Pub Amazon (overlay) */
#amazon-ad{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px;border-radius:12px;background:rgba(0,0,0,.95);text-align:center}
#amazon-ad img{max-width:220px;width:80%;border-radius:10px}
#amazon-ad h2{color:#FF9900;margin:0}
#amazon-ad p{color:#fff;margin:0 0 8px}
.ad-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.ad-button{background:#FF9900;color:#fff;text-decoration:none;padding:10px 16px;border-radius:8px;font-weight:700}
#ad-button:hover{filter:brightness(.95)}
#replay-btn{background:#4EA3F1;color:#fff;border:0;padding:10px 16px;border-radius:8px;font-weight:700}

/* ——— INFOS VIDÉO / HEADER ——— */
.video-info h1{font-weight:800;letter-spacing:-.015em;line-height:1.15;margin:8px 0 10px}
.video-category{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:#eef6ff;color:#0f5fb8;font-weight:700;border:1px solid #d6e9ff}

/* Meta: catégorie | durée | vues | signaler */
.meta-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.meta-center{flex:1;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.meta-center span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:14px;color:#374151;background:#f6f8fb;border:1px solid #e7ecf2}
.meta-center span:nth-child(2){display:none} /* masque la puce "•" */

/* Bouton signaler (emoji ajouté en CSS, pas dans le HTML) */
.report-btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;font-weight:800;color:#b42318;background:#fff;border:1px solid #f4d4d1;box-shadow:0 4px 12px rgba(244,63,94,.10);cursor:pointer}
.report-btn::before{content:"🚩";display:inline-block}
.report-btn:hover{background:#fff3f2;border-color:#f2b4ae}

/* ——— BARRE DE PARTAGE (compacte, 1 seule ligne) ——— */
.side-box .share-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fafbff;border:1px solid #e8ecf5;border-radius:14px;padding:10px;box-shadow:0 6px 14px rgba(17,24,39,.04)}
.share-actions .btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;font-weight:700;background:#fff;color:#1f2937;text-decoration:none;border:1px solid #e5e7eb;box-shadow:0 2px 10px rgba(0,0,0,.04);white-space:nowrap}
.share-actions .btn .ico{font-size:15px;line-height:1}
.share-actions .btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.06)}
.share-actions .btn.primary{color:#fff;border:0;background:linear-gradient(180deg,#4EA3F1 0%,#1C86E0 100%);box-shadow:0 10px 22px rgba(28,134,224,.22)}
@media (max-width:640px){
  .meta-center{justify-content:flex-start}
  .share-actions{padding:8px}
  .share-actions .btn{padding:7px 10px;font-size:14px}
}

/* ——— DESCRIPTION ——— */
.section-subtitle{margin:14px 0 6px;font-size:16px;font-weight:800;color:#0f172a;display:flex;align-items:center;gap:8px}
.section-subtitle::after{content:"";flex:1;height:2px;background:#e5e7eb;border-radius:2px}
.video-description{background:#fff;padding:14px;border-radius:10px;box-shadow:0 2px 5px rgba(0,0,0,.05);line-height:1.65;color:#111}

/* ——— SLIDER "Dans la même catégorie" (classes .fz-*) ——— */
.related-wrap{margin-top:18px}
.related-wrap h3{margin:0 0 8px}
.fz-carousel{position:relative;overflow:hidden}
.fz-carousel .fz-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.fz-carousel .fz-slide{scroll-snap-align:start;min-width:78%}
@media (min-width:600px){.fz-carousel .fz-slide{min-width:48%}}
@media (min-width:992px){.fz-carousel .fz-slide{min-width:31%}}
.fz-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.06)}
.fz-thumb{width:100%;height:160px;object-fit:cover;display:block;background:#f4f6fa}
.fz-body{padding:10px 12px}
.fz-title{font-size:16px;margin:0;font-weight:600;color:#0f172a}
.fz-prev,.fz-next{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border:1px solid #cbd5e1;background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.06);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;z-index:5}
.fz-prev{left:6px}.fz-next{right:6px}
.fz-prev:hover,.fz-next:hover{background:#f8fafc}

/* ——— MODALE SIGNALER ——— */
#reportModalBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;justify-content:center;align-items:center;z-index:2000}
#reportModal{width:100%;max-width:520px;background:#fff;border-radius:12px;box-shadow:0 10px 35px rgba(0,0,0,.2);padding:18px}
#reportModal h3{margin:0 0 10px}
#reportModal form{display:flex;flex-direction:column;gap:10px}
#reportModal select,#reportModal textarea,#reportModal input[type="text"]{width:100%;padding:10px;border-radius:8px;border:1px solid #ddd}
#reportModal .row{display:flex;gap:10px}
#reportModal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
#reportSuccess,#reportError{display:none;padding:10px;border-radius:8px}
#reportSuccess{background:#e6fcf5;color:#0c6b58;border:1px solid #c3fae8}
#reportError{background:#fff5f5;color:#c92a2a;border:1px solid #ffe3e3}

/* ——— COMMENTAIRES (si pas déjà stylés dans ton global) ——— */
.comments-section{margin-top:24px;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.06);padding:16px}
.comments-section h2{font-size:20px;margin:0 0 12px;border-bottom:2px solid #4EA3F1;padding-bottom:6px}
#comment-form{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
#comment-form textarea{min-height:90px;border:1px solid #ddd;border-radius:10px;padding:12px}
#comment-form button{align-self:flex-end;background:#4EA3F1;color:#fff;border:0;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer}
.comment{display:flex;gap:12px;background:#f9fbfd;border:1px solid #e0e6ec;border-radius:12px;padding:12px;margin-bottom:12px}
.comment img{width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid #4EA3F1}
.comment-content strong{font-size:16px}
.comment-content small{display:block;color:#64748b;margin-bottom:6px}
.comment-content p{margin:0;padding:12px 16px;background:#eef6ff;border:1px solid #d0e4ff;border-radius:12px;display:inline-block;max-width:85%}
.comment-content p::before{content:"";position:absolute}



/* PATCH — icônes de partage plus petites et mieux alignées */
.share-actions .btn .ico,
.share-actions .ico{
  font-size: 12px !important; /* avant 15–16px */
  line-height: 1;
  display: inline-block;
  transform: translateY(1px);  /* micro-alignement vertical */
}

.share-actions .btn{ gap: 6px; } /* un poil moins d'espace icon/texte */

@media (max-width: 480px){
  .share-actions .btn .ico,
  .share-actions .ico{ font-size: 10px !important; }
}
/* favoris/like */
.btn.active { background:#ffe9a8; border-color:#f5c542; }
.reactions .btn { border:1px solid #ddd; padding:6px 10px; border-radius:8px; }
.reactions .btn.active { border-color:#4EA3F1; box-shadow:0 0 0 2px rgba(78,163,241,.15) inset; }
/* === Bouton "Ajouter aux favoris" (joli, accessible) === */
#btn-fav.btn{
  /* on cache le vieux "⭐" en mettant la fonte à 0,
     puis on remet une taille sur le texte .txt */
  font-size:0;
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:9999px;
  border:1px solid #f2c1c9;
  background:linear-gradient(180deg,#fff 0%, #fff5f7 100%);
  box-shadow:0 2px 10px rgba(255,105,135,0.12);
  cursor:pointer;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

#btn-fav.btn .txt{
  font-size:14px;       /* reaffiche le texte lisible */
  line-height:1;
  color:#b83256;        /* framboise doux */
  font-weight:700;
  letter-spacing:.2px;
  white-space:nowrap;
}

/* Icône cœur (SVG en pseudo-élément) */
#btn-fav.btn::before{
  content:"";
  width:18px; height:18px;
  display:inline-block;
  flex:0 0 18px;
  background: currentColor;
  color:#ff5c7a;          /* cœur rose */
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12.1 21.35 10 19.28C5.4 14.36 2 11.27 2 7.5 2 5 4 3 6.5 3c1.74 0 3.41.81 4.5 2.09C12.09 3.81 13.76 3 15.5 3 18 3 20 5 20 7.5c0 3.77-3.4 6.86-8 11.78l-1.9 2.07Z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12.1 21.35 10 19.28C5.4 14.36 2 11.27 2 7.5 2 5 4 3 6.5 3c1.74 0 3.41.81 4.5 2.09C12.09 3.81 13.76 3 15.5 3 18 3 20 5 20 7.5c0 3.77-3.4 6.86-8 11.78l-1.9 2.07Z"/></svg>') center/contain no-repeat;
}

/* Hover/Focus */
#btn-fav.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(255,105,135,0.18);
  border-color:#f6a9b5;
}
#btn-fav.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,92,122,.25), 0 6px 18px rgba(255,105,135,0.18);
}

/* État "actif" (déjà ajouté aux favoris) */
#btn-fav.btn.active{
  background:linear-gradient(180deg,#ffe6ec 0%, #ffd1db 100%);
  border-color:#ff9db0;
}
#btn-fav.btn.active .txt{ color:#a01e3f; }
#btn-fav.btn.active::before{ color:#e91e63; }

/* Petite impulsion quand on active */
#btn-fav.btn.active:after{
  content:"";
  position:absolute; inset:0;
  border-radius:9999px;
  box-shadow:0 0 0 0 rgba(233,30,99,.35);
  animation:fzFavPulse 700ms ease-out 1;
  pointer-events:none;
}
@keyframes fzFavPulse{
  from{ box-shadow:0 0 0 0 rgba(233,30,99,.35); }
  to  { box-shadow:0 0 0 14px rgba(233,30,99,0); }
}

/* Version compacte sur mobile */
@media (max-width:480px){
  #btn-fav.btn{ padding:9px 12px; gap:8px; }
  #btn-fav.btn .txt{ font-size:13px; }
}

/* Dark mode basique si tu en as un */
@media (prefers-color-scheme: dark){
  #btn-fav.btn{
    background:linear-gradient(180deg,#2b2b2b 0%, #241f21 100%);
    border-color:#4a2a32;
    box-shadow:none;
  }
  #btn-fav.btn .txt{ color:#ff8aa0; }
}
#btn-fav.is-loading { opacity:.75; pointer-events:none; }
#btn-fav.is-loading .txt::after{
  content:"…";
  margin-left:4px;
  opacity:.8;
}

.fz-reactions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.fz-reaction-btn {
  font-size: 22px;
  background: #f9f9f9;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fz-reaction-btn:hover {
  background: #fff;
  border-color: #ddd;
  transform: translateY(-2px);
}

.fz-reaction-btn.active {
  background: #4EA3F1;
  color: white;
  border-color: #4EA3F1;
}

.fz-reaction-btn .count {
  font-size: 14px;
  font-weight: 600;
  color: #555;
}

.fz-reaction-btn.active .count {
  color: white;
}
/* Réactions fun */
.reactions .react{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border:1.5px solid #e5e7eb; border-radius:12px;
  background:#fff; cursor:pointer; font-weight:700; font-size:16px;
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  user-select:none;
}
.reactions .react:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(78,163,241,.14); border-color:#dbe7fb; }
.reactions .react.active{ background:#4EA3F1; color:#fff; border-color:#4EA3F1; box-shadow:0 6px 16px rgba(78,163,241,.25); }
.reactions .react .cpt{ font-size:13px; font-weight:800; opacity:.8; }
.reactions .react.active .cpt{ opacity:1; }

/* petit bump du compteur */
@keyframes fzBump { 0%{transform:translateY(0) scale(1)} 40%{transform:translateY(-3px) scale(1.12)} 100%{transform:translateY(0) scale(1)} }
.reactions .react .cpt.bump{ animation:fzBump .35s ease; }

/* état disable pendant requête */
.reactions .react.is-loading{ opacity:.7; pointer-events:none; }

/* focus clavier */
.reactions .react:focus-visible{ outline:3px solid rgba(78,163,241,.45); outline-offset:2px; border-color:#4EA3F1; }

/* === Profil (ajouts non destructifs) === */
.page-title {
  margin: 18px 0 12px;
  font-size: 28px;
  font-weight: 800;
}

.fz-alert {
  margin: 12px 0 18px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(78,163,241,0.25);
  background: #eef6ff;
  color: #075985;
}

.profile-container {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
}
@media (max-width: 960px) {
  .profile-container { grid-template-columns: 1fr; }
}

.profile-card,
.favorites-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  padding: 18px;
}

.avatar-wrapper {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.avatar-img {
  width: 108px; height: 108px;
  border-radius: 999px;
  object-fit: cover;
  border: 3px solid #f0f4ff;
  box-shadow: 0 4px 10px rgba(78,163,241,0.15);
}

.avatar-form .visually-hidden {
  position: absolute !important;
  clip: rect(1px,1px,1px,1px);
  width: 1px; height: 1px; overflow: hidden;
}

.profile-infos .info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border: 1px solid #eee; border-radius: 10px;
  background: #fafcff; margin-bottom: 10px;
}
.profile-actions { margin-top: 10px; }

.section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.section-head h2 { font-size: 22px; font-weight: 800; }
.badge {
  display: inline-block; min-width: 28px; text-align: center;
  padding: 4px 8px; border-radius: 999px;
  background: #4EA3F1; color: #fff; font-weight: 700;
}

/* Grille des favoris */
.fav-grid {
  display: grid;
  grid-template-columns: repeat( auto-fill, minmax(220px, 1fr) );
  gap: 14px;
}
.fav-card {
  display: flex; flex-direction: column; border: 1px solid #eee;
  border-radius: 12px; overflow: hidden; background: #fff;
  transition: transform .12s ease, box-shadow .12s ease;
}
.fav-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
.thumb-link { position: relative; display: block; }
.fav-thumb {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
  background: #f3f4f6;
}
.play-badge {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(0,0,0,0.6); color:#fff; font-weight: 900;
  padding: 6px 8px; border-radius: 10px; font-size: 12px;
}
.fav-body { padding: 10px; display: grid; gap: 8px; }
.fav-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-weight: 700; line-height: 1.25;
  text-decoration: none; color: #1f2937;
}
.fav-title:hover { text-decoration: underline; }

.fav-actions { display: flex; justify-content: flex-end; }

/* Boutons */
.btn { display: inline-flex; gap: 6px; align-items: center; justify-content: center;
  padding: 9px 12px; border-radius: 10px; font-weight: 700; border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
}
.btn-sm { padding: 6px 10px; font-size: 14px; border-radius: 8px; }
.btn-secondary { background: #4EA3F1; color:#fff; }
.btn-secondary:hover { filter: brightness(.95); }
.btn-outline { background: #fff; border-color:#dbeafe; color:#1d4ed8; }
.btn-outline:hover { background:#eff6ff; }
.btn-danger { background: #fee2e2; color:#991b1b; border-color:#fecaca; }
.btn-danger:hover { background:#fecaca; }

/* Textes doux */
.muted { color: #6b7280; }

/* Ajustement pour compat mobiles */
@media (max-width: 420px) {
  .avatar-img { width: 86px; height: 86px; }
}

.profile-infos .info-row {
  display: flex;
  align-items: center;
  gap: 10px;             /* espace fixe entre label et valeur */
  margin-bottom: 8px;
}

.profile-infos .info-row span {
  min-width: 120px;      /* aligne tous les labels */
  font-weight: 600;
  color: #374151;
}

.profile-infos .info-row strong {
  color: #111827;
  word-break: break-word; /* évite que l’email déborde */
}

/* Ligne des actions sous la vidéo */
.engage-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 12px 0;
  padding-left: 12px; /* <-- décale légèrement du bord */
}


/* Bouton favoris */
#btn-fav {
  display: flex;
  align-items: center;
  gap: 6px;                     /* espace entre icône et texte */
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .1s;
}
#btn-fav:hover {
  background: #f3f4f6;
  transform: translateY(-1px);
}
#btn-fav.active {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}
.video-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  padding: 12px 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-weight: 600;
}

.video-nav a {
  color: #2563eb;
  text-decoration: none;
  transition: color .2s;
}

.video-nav a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.video-prev a::before {
  content: "⬅ ";
}

.video-next a::after {
  content: " ➡";
}
/* === FIX CATEGORIE: conteneur centré et paddé === */
.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;          /* respire sur les côtés */
  width: 100%;
  box-sizing: border-box;
}

/* === FIX: une seule version saine de .video-grille (remplace tes 2 blocs) === */
.video-grille{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* fluide sans débordement */
  gap: 20px;
  margin: 20px 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* petit padding si tu veux un bord “soft” dans la grille */
  /* padding: 0 4px; */
}

/* Cartes et images garanties “contenues” */
.video-carte{ overflow: hidden; border-radius: 12px; }
.miniature-wrapper{ width: 100%; height: 150px; overflow: hidden; }
.miniature{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* Ceinture et bretelles : évite un débordement imprévu */
html, body { overflow-x: hidden; }

/* ===== Hover preview YouTube ===== */
.yt-hover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
}

.yt-hover img,
.yt-hover iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yt-hover iframe {
  pointer-events: none;   /* clic = ouvre ta page vidéo */
  display: none;          /* masqué tant que non "playing" */
}

.yt-hover.is-playing img { opacity: 0; transition: opacity .12s ease; }
.yt-hover.is-playing iframe { display: block; }

/* === Pages Auth (connexion / inscription) === */
.auth-container {
  max-width: 400px;
  margin: 40px auto;
  text-align: center;
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.auth-container h1 {
  margin-bottom: 20px;
  font-size: 1.8rem;
  color: #333;
}

.auth-error {
  color: #d33;
  margin-bottom: 15px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.auth-form label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.auth-form input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.auth-form button {
  margin-top: 10px;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #4EA3F1;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}

.auth-form button:hover {
  background: #3189d4;
}

.auth-register {
  margin-top: 18px;
  font-size: 14px;
}

.auth-register a {
  color: #4EA3F1;
  font-weight: 600;
  text-decoration: none;
}

.auth-register a:hover {
  text-decoration: underline;
}