/* ==============================================
   NAOS WEBINAIRE — Styles
   ============================================== */

/* ---- Base ---- */
.naos-register,
.naos-watch {
    max-width: 780px;
    margin: 0 auto;
    font-family: inherit;
    color: #2d3748;
}

/* ---- Messages ---- */
.naos-error {
    background: #fff5f5;
    border: 1px solid #fc8181;
    border-radius: 6px;
    padding: 16px 20px;
    color: #c53030;
    margin-bottom: 20px;
}
.naos-success-box {
    background: #f0fff4;
    border: 1px solid #68d391;
    border-radius: 8px;
    padding: 32px;
    text-align: center;
}
.naos-success-box__icon { font-size: 48px; margin-bottom: 12px; }
.naos-success-box h3    { margin: 0 0 12px; color: #276749; font-size: 22px; }

/* ---- Formulaire ---- */
.naos-form__row {
    margin-bottom: 22px;
}
.naos-form__row--half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 480px) {
    .naos-form__row--half { grid-template-columns: 1fr; }
}
.naos-form__row label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 15px;
}
.naos-form__row label span[aria-hidden] {
    color: #e53e3e;
    margin-left: 2px;
}
.naos-form input[type="text"],
.naos-form input[type="email"],
.naos-form input[type="tel"] {
    width: 100%;
    max-width: 420px;
    padding: 10px 14px;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    font-size: 15px;
    transition: border-color .2s;
    box-sizing: border-box;
}
.naos-form input:focus {
    outline: none;
    border-color: #3182ce;
    box-shadow: 0 0 0 3px rgba(49,130,206,.15);
}

/* ---- Sessions ---- */
.naos-sessions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 8px;
}
.naos-session-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}
.naos-session-card {
    cursor: pointer;
    display: block;
}
.naos-session-card__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border: 2px solid #cbd5e0;
    border-radius: 8px;
    background: #fff;
    transition: border-color .2s, background .2s;
    text-align: center;
    gap: 4px;
}
.naos-session-card input:checked + .naos-session-card__inner {
    border-color: #2b6cb0;
    background: #ebf8ff;
}
.naos-session-card:hover .naos-session-card__inner {
    border-color: #63b3ed;
}
.naos-session-card__label {
    font-size: 13px;
    font-weight: 600;
    color: #2b6cb0;
    text-align: center;
    line-height: 1.3;
}
.naos-session-card__time {
    font-size: 18px;
    font-weight: 700;
    color: #1a365d;
    margin-top: 4px;
}

/* ---- Message feedback ---- */
#naos-form-message {
    padding: 10px 16px;
    border-radius: 6px;
    margin-bottom: 14px;
    font-size: 14px;
    display: none;
}
#naos-form-message.is-error   { background:#fff5f5; border:1px solid #fc8181; color:#c53030; display:block; }
#naos-form-message.is-success { background:#f0fff4; border:1px solid #68d391; color:#276749; display:block; }

/* ---- Bouton ---- */
.naos-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .2s, transform .1s;
}
.naos-btn:hover { opacity: .88; transform: translateY(-1px); }
.naos-btn:active { transform: translateY(0); }
.naos-btn--primary { background: #2b6cb0; color: #fff; }
.naos-btn--cta     { background: #F95B57; color: #fff; }
.naos-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ==============================================
   PAGE DE VISIONNAGE
   ============================================== */

.naos-watch__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.naos-watch__date {
    margin: 0;
    color: #4a5568;
    font-size: 15px;
}

/* ---- Badges ---- */
.naos-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
}
.naos-badge--live  { background: #e53e3e; color: #fff; animation: naos-pulse 1.4s ease-in-out infinite; }
.naos-badge--soon  { background: #3182ce; color: #fff; }
.naos-badge--ended { background: #718096; color: #fff; }

@keyframes naos-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .6; }
}

/* ---- Compte à rebours ---- */
.naos-countdown-wrap {
    text-align: center;
    padding: 48px 20px;
    background: #1a365d;
    border-radius: 12px;
    color: #fff;
}
.naos-countdown-label {
    font-size: 18px;
    margin-bottom: 24px;
    opacity: .85;
}
.naos-countdown {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}
.naos-countdown__block {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.naos-countdown__num {
    font-size: 60px;
    font-weight: 900;
    line-height: 1;
    min-width: 70px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.naos-countdown__unit {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: .7;
    margin-top: 4px;
}
.naos-countdown__sep {
    font-size: 50px;
    font-weight: 900;
    opacity: .5;
    margin-bottom: 12px;
}
.naos-countdown-hint {
    opacity: .6;
    font-size: 14px;
    margin: 0;
}

/* ---- Player ---- */
.naos-player-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}
#naos-yt-player,
.naos-player-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
}
.naos-player-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 10;
    gap: 16px;
    transition: opacity .4s;
}
.naos-player-overlay.hidden { opacity: 0; pointer-events: none; }

/* ---- Spinner ---- */
.naos-spinner {
    width: 40px; height: 40px;
    border: 4px solid rgba(255,255,255,.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: naos-spin .8s linear infinite;
}
@keyframes naos-spin { to { transform: rotate(360deg); } }

/* ---- Infos sous le player ---- */
.naos-watch__info {
    font-size: 14px;
    color: #718096;
}
.naos-latearrival { font-style: italic; }

/* ---- Terminé ---- */
.naos-ended {
    text-align: center;
    padding: 60px 20px;
    background: #f7fafc;
    border-radius: 12px;
}
.naos-ended__icon { font-size: 60px; margin-bottom: 16px; }
.naos-ended h3    { font-size: 24px; margin-bottom: 12px; }
.naos-ended p     { color: #718096; margin-bottom: 12px; }

/* ---- Bloquer le hover YouTube (cache titre + bouton pause central) ---- */
.naos-yt-blocker {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* ---- Bande noire couvrant la barre de titre YouTube en haut ---- */
.naos-yt-top-cover {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 55px;
    background: #000;
    z-index: 3;
    pointer-events: none;
}

/* ---- Bande noire couvrant la barre "Regarder sur YouTube" en bas ---- */
.naos-yt-bottom-cover {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 42px;
    background: #000;
    z-index: 3;
    pointer-events: none;
}

/* ---- Logo cover + bouton plein écran ---- */
.naos-yt-logo-cover {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 42px;
    background: #000;
    z-index: 5;
    pointer-events: none;
}
.naos-fs-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 20;
    background: rgba(0,0,0,.65);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 17px;
    cursor: pointer;
    line-height: 1;
    transition: background .2s;
}
.naos-fs-btn:hover { background: rgba(0,0,0,.9); }

/* ---- Bouton "Activer le son" (autoplay muet) ---- */
.naos-unmute-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    background: rgba(0,0,0,.80);
    color: #fff;
    border: 2px solid rgba(255,255,255,.8);
    border-radius: 8px;
    padding: 12px 28px;
    font-size: 15px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, border-color .2s;
}
.naos-unmute-btn:hover { background: #000; border-color: #fff; }
#naos-player-wrap:-webkit-full-screen { height: 100vh; padding-bottom: 0; }
#naos-player-wrap:-moz-full-screen    { height: 100vh; padding-bottom: 0; }
#naos-player-wrap:fullscreen          { height: 100vh; padding-bottom: 0; }

/* ---- Responsive ---- */
@media (max-width: 540px) {
    .naos-sessions { grid-template-columns: repeat(2, 1fr); }
    .naos-countdown__num { font-size: 40px; min-width: 50px; }
    .naos-countdown__sep { font-size: 35px; }
}