/* ==========================================================================
   Vote Jury Jeune — Feuille de style minimaliste compatible Divi
   ========================================================================== */

.vjj-container {
    max-width: 800px;
    margin: 0 auto;
    font-family: inherit;
    color: inherit;
}

.vjj-section {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 28px 32px;
    margin-bottom: 24px;
}

.vjj-section-title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.2em;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
}

/* --- Bloc vidéo (multi-vidéo) --------------------------------------------- */
.vjj-video-block {
    margin-bottom: 48px;
    padding-bottom: 48px;
    border-bottom: 2px solid #f0f0f0;
}

.vjj-video-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.vjj-video-titre {
    font-size: 1.4em;
    font-weight: 700;
    margin: 0 0 16px;
    color: #222;
    padding-left: 12px;
    border-left: 4px solid #2271b1;
}

/* --- Vidéo responsive ----------------------------------------------------- */
.vjj-video {
    margin-bottom: 24px;
}

.vjj-video-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 6px;
    background: #000;
}

.vjj-video-responsive iframe,
.vjj-video-responsive video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
}

.vjj-video-native {
    padding-bottom: 0;
    height: auto;
}

.vjj-video-native video {
    position: static;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

.vjj-gallery-ref {
    background: #f8f8f8;
    border: 1px dashed #ccc;
    border-radius: 6px;
    padding: 16px;
    text-align: center;
    color: #666;
}

/* --- Barre utilisateur ---------------------------------------------------- */
.vjj-user-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    background: #f0f7ff;
    border: 1px solid #c8e0f7;
    border-radius: 6px;
    padding: 12px 20px;
    margin-bottom: 24px;
    font-size: 0.95em;
    color: #2c5282;
}

/* --- Alertes -------------------------------------------------------------- */
.vjj-alert {
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 0.95em;
    line-height: 1.5;
}

.vjj-alert-info {
    background: #fff8e1;
    border-left: 4px solid #f6c90e;
    color: #6d5300;
}

.vjj-alert-success {
    background: #e8f5e9;
    border-left: 4px solid #43a047;
    color: #1b5e20;
}

.vjj-alert-error {
    background: #fce4ec;
    border-left: 4px solid #e53935;
    color: #7f0000;
}

/* --- Formulaires ---------------------------------------------------------- */
.vjj-form { width: 100%; }

.vjj-field { margin-bottom: 16px; }

.vjj-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 0.9em;
    color: #444;
}

.vjj-field label em {
    font-weight: 400;
    color: #888;
}

.vjj-field input[type="text"],
.vjj-field input[type="password"],
.vjj-field input[type="email"],
.vjj-field textarea {
    width: 100%;
    max-width: 400px;
    padding: 10px 14px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: 1em;
    font-family: inherit;
    color: #333;
    background: #fafafa;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.vjj-field textarea {
    max-width: 100%;
    resize: vertical;
}

.vjj-field input:focus,
.vjj-field textarea:focus {
    outline: none;
    border-color: #4a90d9;
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.18);
    background: #fff;
}

/* --- Étoiles -------------------------------------------------------------- */
.vjj-stars-field { margin-bottom: 20px; }

.vjj-stars {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 6px;
}

.vjj-stars .vjj-star {
    background: none;
    border: none;
    padding: 0 2px;
    font-size: 2em;
    cursor: pointer;
    color: #d0d0d0;
    transition: color 0.15s, transform 0.1s;
    line-height: 1;
}

.vjj-stats .vjj-star { font-size: 1.6em; }

.vjj-stars .vjj-star.active,
.vjj-stats .vjj-star.active { color: #f6c90e; }

.vjj-stars .vjj-star:hover,
.vjj-stars .vjj-star.hover {
    color: #f6c90e;
    transform: scale(1.15);
}

.vjj-note-label {
    display: block;
    font-size: 0.85em;
    color: #888;
    margin-top: 4px;
}

/* --- Boutons -------------------------------------------------------------- */
.vjj-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border: 2px solid transparent;
    border-radius: 4px;
    font-size: 1em;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, opacity 0.2s;
}

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

.vjj-btn-primary {
    background: #2271b1;
    color: #fff;
    border-color: #2271b1;
}

.vjj-btn-primary:hover:not(:disabled) {
    background: #1a5d94;
    border-color: #1a5d94;
}

.vjj-btn-outline {
    background: transparent;
    color: #2c5282;
    border-color: #2c5282;
}

.vjj-btn-outline:hover:not(:disabled) {
    background: #2c5282;
    color: #fff;
}

.vjj-btn-sm { padding: 6px 14px; font-size: 0.85em; }

/* --- Statistiques --------------------------------------------------------- */
.vjj-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px 20px;
    background: #f8f9fa;
    border-radius: 6px;
}

.vjj-stat-moyenne {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.vjj-stat-number {
    font-size: 2.8em;
    font-weight: 700;
    color: #2271b1;
    line-height: 1;
}

.vjj-stat-unit { font-size: 1.1em; color: #888; }

.vjj-stat-stars { display: flex; gap: 2px; }

.vjj-stat-count { margin: 0; font-size: 0.9em; color: #666; }

.vjj-no-vote { color: #888; font-style: italic; }

/* --- Commentaires --------------------------------------------------------- */
.vjj-commentaires { margin-top: 20px; }

.vjj-commentaires-titre {
    font-size: 1em;
    font-weight: 600;
    margin-bottom: 14px;
    color: #555;
}

.vjj-commentaire-item {
    padding: 14px 16px;
    border-left: 3px solid #e0e0e0;
    margin-bottom: 14px;
    background: #fafafa;
    border-radius: 0 4px 4px 0;
    transition: border-color 0.2s;
}

.vjj-commentaire-item:hover { border-left-color: #f6c90e; }

.vjj-comment-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.vjj-comment-author { font-weight: 700; color: #333; font-size: 0.9em; }

.vjj-comment-stars { color: #f6c90e; font-size: 0.95em; letter-spacing: 1px; }

.vjj-comment-date { font-size: 0.8em; color: #aaa; margin-left: auto; }

.vjj-comment-text { margin: 0; font-size: 0.95em; color: #555; line-height: 1.6; }

/* --- Section connexion (centrée horizontalement et verticalement) ---------- */
.vjj-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: inherit;
}

.vjj-login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    flex: 1;
}

.vjj-login-section {
    width: 100%;
    max-width: 420px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}

.vjj-login-section .vjj-field input { max-width: 100%; }

/* --- Visibilité conditionnelle (à appliquer sur les modules Divi) ---------
   Dans Divi : Paramètres du module → Avancé → CSS → Classe CSS
   Ajoutez "vjj-masquer-si-deconnecte" pour cacher quand non connecté.
   Ajoutez "vjj-masquer-si-connecte"   pour cacher quand connecté.
   -------------------------------------------------------------------------- */
.vjj-logged-out  .vjj-masquer-si-deconnecte { display: none !important; }
.vjj-logged-in   .vjj-masquer-si-connecte   { display: none !important; }

/* --- Responsive ----------------------------------------------------------- */
@media ( max-width: 600px ) {
    .vjj-section { padding: 18px 16px; }
    .vjj-stars .vjj-star { font-size: 1.6em; }
    .vjj-stat-number { font-size: 2.2em; }
    .vjj-user-bar { flex-direction: column; align-items: flex-start; }
    .vjj-comment-date { margin-left: 0; }
}