/* Modale d'accueil « Nautile ».
   - Vidéo de bienvenue dans un cadre dégradé aux couleurs du thème, équerres d'angle.
   - À partir de 992px : vidéo à gauche, préinscription à droite (colonnes 1,618 : 1).
   - 768 à 991px : vidéo en bandeau, puis en-tête et formulaire côte à côte.
   - Smartphone (< 768px) : plein écran ; vidéo entre l'en-tête et le formulaire, bouton d'inscription
     toujours visible en bas de l'écran.
   - Croix de fermeture : bouton carré encadré, toujours au-dessus du contenu. */
/* ── Croix, toutes largeurs ──────────────────────────────────────────────────────────── */
html body #modalWelcomePreinscription .cfy-welcome__close:not(#cfy-b1):not(#cfy-b2) {
    z-index: 3;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--cfy-t-surface);
    color: var(--cfy-tx-ink);
    border: 1px solid var(--cfy-t-line-2);
    opacity: 1;
}
html body #modalWelcomePreinscription .cfy-welcome__close svg:not(#cfy-b1):not(#cfy-b2) {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    stroke-width: 2.25;
}
html body #modalWelcomePreinscription .cfy-welcome__close:is(:hover, :focus-visible):not(#cfy-b1):not(#cfy-b2) {
    color: var(--cfy-t-accent);
    border-color: var(--cfy-t-accent);
}

/* ── Vidéo encadrée, toutes largeurs ─────────────────────────────────────────────────── */
html body #modalWelcomePreinscription .cfy-welcome__media:not(#cfy-b1) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 21px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--cfy-t-fill) 14%, transparent), transparent 55%),
        color-mix(in srgb, var(--cfy-t-fill) 6%, var(--cfy-t-surface-2));
}
html body #modalWelcomePreinscription .cfy-welcome__frame:not(#cfy-b1) {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 8px;
    background: linear-gradient(135deg, var(--cfy-t-fill-hi), var(--cfy-t-fill) 45%, var(--cfy-t-fill-lo));
    box-shadow: 0 0 0 1px var(--cfy-t-fill-lo), 0 21px 55px var(--cfy-t-shadow);
}
/* Équerres d'angle décalées autour du cadre */
html body #modalWelcomePreinscription .cfy-welcome__frame:not(#cfy-b1)::before,
html body #modalWelcomePreinscription .cfy-welcome__frame:not(#cfy-b1)::after {
    content: '';
    position: absolute;
    width: 34px;
    height: 34px;
    border: 0 solid var(--cfy-t-accent);
    pointer-events: none;
}
html body #modalWelcomePreinscription .cfy-welcome__frame:not(#cfy-b1)::before { top: -8px; left: -8px; border-top-width: 3px; border-left-width: 3px; }
html body #modalWelcomePreinscription .cfy-welcome__frame:not(#cfy-b1)::after { right: -8px; bottom: -8px; border-right-width: 3px; border-bottom-width: 3px; }

html body #modalWelcomePreinscription .cfy-welcome__screen:not(#cfy-b1) {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--cfy-t-surface-2);
    outline: 1px solid color-mix(in srgb, var(--cfy-t-on-fill) 35%, transparent);
    outline-offset: -1px;
}
html body #modalWelcomePreinscription .cfy-welcome__screen:not(.is-playing) img:not(#cfy-b1) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform .4s ease, filter .4s ease;
}
html body #modalWelcomePreinscription .cfy-welcome__screen:not(.is-playing):hover img:not(#cfy-b1) { transform: scale(1.03); filter: brightness(1.06); }
html body #modalWelcomePreinscription .cfy-welcome__screen iframe:not(#cfy-b1) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
html body #modalWelcomePreinscription .cfy-welcome__play:not(#cfy-b1) {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 76px;
    height: 76px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, var(--cfy-t-fill-hi), var(--cfy-t-fill) 60%, var(--cfy-t-fill-lo));
    color: var(--cfy-t-on-fill);
    border: 2px solid var(--cfy-t-on-fill);
    border-radius: 0;
    box-shadow: 0 8px 34px var(--cfy-t-shadow);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
html body #modalWelcomePreinscription .cfy-welcome__screen:hover .cfy-welcome__play:not(#cfy-b1),
html body #modalWelcomePreinscription .cfy-welcome__play:focus-visible:not(#cfy-b1) {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--cfy-t-fill) 35%, transparent), 0 8px 34px var(--cfy-t-shadow);
}
html body #modalWelcomePreinscription .cfy-welcome__play svg:not(#cfy-b1) { display: block; width: 34px; height: 34px; }

html body #modalWelcomePreinscription .cfy-welcome__vcap:not(#cfy-b1) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 5px 13px;
    padding: 8px 5px 0;
    color: var(--cfy-t-on-fill);
    text-align: left;
}
html body #modalWelcomePreinscription .cfy-welcome__vtitle:not(#cfy-b1) {
    flex: 1 1 260px;
    font-size: var(--cfy-fs-sm);
    font-weight: var(--cfy-fw-semibold);
    line-height: var(--cfy-lh-snug);
}
html body #modalWelcomePreinscription .cfy-welcome__vlink:not(#cfy-b1) {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    padding: 0 8px;
    font-size: var(--cfy-fs-caption);
    font-weight: var(--cfy-fw-semibold);
    color: var(--cfy-t-on-fill);
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--cfy-t-on-fill) 55%, transparent);
    white-space: nowrap;
}
html body #modalWelcomePreinscription .cfy-welcome__vlink:is(:hover, :focus-visible):not(#cfy-b1) {
    background: var(--cfy-t-on-fill);
    color: var(--cfy-t-fill-lo);
}

/* ── À partir de 768px : modale élargie ─────────────────────────────────────────────── */
@media (min-width: 768px) {
    html body #modalWelcomePreinscription .modal-dialog:not(#cfy-b1) {
        max-width: min(900px, calc(100vw - 32px));
        margin-block: 16px;
        min-height: calc(100% - 32px);
    }
    html body #modalWelcomePreinscription .cfy-welcome__content:not(#cfy-b1) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "media media" "head form" "foot foot";
        padding: 0;
        overflow: hidden;
    }
    html body #modalWelcomePreinscription .cfy-welcome__media:not(#cfy-b1) { grid-area: media; padding: 34px 34px 21px; border-bottom: 1px solid var(--cfy-t-line); }
    html body #modalWelcomePreinscription .cfy-welcome__head:not(#cfy-b1) {
        grid-area: head;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 21px 21px 21px 34px;
        background: color-mix(in srgb, var(--cfy-t-fill) 5%, var(--cfy-t-surface));
    }
    html body #modalWelcomePreinscription .cfy-welcome__logo:not(#cfy-b1) { margin: 0 auto 13px; }
    html body #modalWelcomePreinscription .cfy-welcome__eyebrow:not(#cfy-b1) { margin: 0 0 5px; }
    html body #modalWelcomePreinscription .cfy-welcome__title:not(#cfy-b1) { margin: 0 0 13px; }
    html body #modalWelcomePreinscription .cfy-welcome__audience:not(#cfy-b1) { gap: 8px; margin: 0 0 13px; }
    html body #modalWelcomePreinscription .cfy-welcome__audience li:not(#cfy-b1) { min-height: 40px; padding: 5px 8px; }
    html body #modalWelcomePreinscription .cfy-welcome__lead:not(#cfy-b1) { margin: 0; }
    html body #modalWelcomePreinscription .cfy-welcome__form:not(#cfy-b1) {
        grid-area: form;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 21px 34px 0 13px;
        padding: 21px;
    }
    html body #modalWelcomePreinscription .cfy-welcome__cta:not(#cfy-b1) { margin: 0 0 13px; font-size: var(--cfy-fs-sm); line-height: 1.55; }
    html body #modalWelcomePreinscription .cfy-welcome__actions:not(#cfy-b1) { gap: 8px; margin-top: 13px; }
    html body #modalWelcomePreinscription .cfy-welcome__foot:not(#cfy-b1) { grid-area: foot; padding: 13px 34px 21px; margin: 0; }
}

/* ── À partir de 992px : vidéo à gauche (φ), préinscription à droite ──────────────────── */
@media (min-width: 992px) {
    html body #modalWelcomePreinscription .modal-dialog:not(#cfy-b1):not(#cfy-b2) { max-width: min(1180px, calc(100vw - 32px)); }
    html body #modalWelcomePreinscription .cfy-welcome__content:not(#cfy-b1):not(#cfy-b2) {
        grid-template-columns: minmax(0, 1.6180339887fr) minmax(380px, 1fr);
        grid-template-rows: 1fr auto auto;
        grid-template-areas: "media head" "media form" "media foot";
    }
    html body #modalWelcomePreinscription .cfy-welcome__media:not(#cfy-b1):not(#cfy-b2) {
        padding: 55px 34px;
        border-bottom: 0;
        border-right: 1px solid var(--cfy-t-line);
    }
    html body #modalWelcomePreinscription .cfy-welcome__head:not(#cfy-b1):not(#cfy-b2) { padding: 55px 34px 21px; }
    html body #modalWelcomePreinscription .cfy-welcome__form:not(#cfy-b1):not(#cfy-b2) { margin: 13px 34px 0; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    html body #modalWelcomePreinscription .cfy-welcome__media:not(#cfy-b1):not(#cfy-b2) { padding: 34px 21px; }
    html body #modalWelcomePreinscription .cfy-welcome__head:not(#cfy-b1):not(#cfy-b2) { padding: 34px 21px 13px; }
    html body #modalWelcomePreinscription .cfy-welcome__form:not(#cfy-b1):not(#cfy-b2) { margin: 13px 21px 0; padding: 13px; }
}
@media (min-width: 1200px) {
    html body #modalWelcomePreinscription .cfy-welcome__vtitle:not(#cfy-b1) { font-size: var(--cfy-fs-md); }
    html body #modalWelcomePreinscription .cfy-welcome__close:not(#cfy-b1):not(#cfy-b2) { width: 34px; height: 34px; }
    html body #modalWelcomePreinscription :is(.cfy-welcome__input, .cfy-welcome__btn):not(#cfy-b1):not(#cfy-b2) {
        height: 40px;
        min-height: 40px;
        padding-block: 0;
    }
}

/* ── Smartphone : plein écran ────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    html body #modalWelcomePreinscription.modal:not(#cfy-b1) { padding: 0 !important; }
    html body #modalWelcomePreinscription .modal-dialog:not(#cfy-b1):not(#cfy-b2) {
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 100%;
        margin: 0;
    }
    html body #modalWelcomePreinscription .cfy-welcome__content:not(#cfy-b1):not(#cfy-b2) {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0;
        border: 0 !important;
        box-shadow: inset 0 3px 0 var(--cfy-t-fill);
    }
    html body #modalWelcomePreinscription .cfy-welcome__head:not(#cfy-b1) {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 13px 10px 8px;
        background: color-mix(in srgb, var(--cfy-t-fill) 5%, var(--cfy-t-surface));
        border-bottom: 1px solid var(--cfy-t-line);
    }
    html body #modalWelcomePreinscription .cfy-welcome__logo:not(#cfy-b1) { width: 140px; margin: 0 auto 5px; }
    html body #modalWelcomePreinscription .cfy-welcome__eyebrow:not(#cfy-b1) { margin: 0 52px 3px; font-size: 12px; line-height: 1.35; }
    html body #modalWelcomePreinscription .cfy-welcome__title:not(#cfy-b1) { margin: 0 0 8px; font-size: 20px; }
    html body #modalWelcomePreinscription .cfy-welcome__audience:not(#cfy-b1) { gap: 5px; margin: 0 0 8px; }
    html body #modalWelcomePreinscription .cfy-welcome__audience li:not(#cfy-b1) { min-height: 40px; padding: 3px 5px; font-size: 12px; }
    html body #modalWelcomePreinscription .cfy-welcome__lead:not(#cfy-b1) { margin: 0; font-size: 14px; line-height: 1.4; }
    html body #modalWelcomePreinscription .cfy-welcome__form:not(#cfy-b1) {
        flex: 0 0 auto;
        margin: 0;
        padding: 10px;
        border: 0;
        border-bottom: 1px solid var(--cfy-t-line);
    }
    html body #modalWelcomePreinscription .cfy-welcome__cta:not(#cfy-b1) { margin: 0 0 8px; font-size: 13px; line-height: 1.4; }
    html body #modalWelcomePreinscription .cfy-welcome__tag:not(#cfy-b1) { margin-top: 3px; }
    html body #modalWelcomePreinscription .cfy-welcome__input:not(#cfy-b1):not(#cfy-b2) { height: 44px; }
    html body #modalWelcomePreinscription .cfy-welcome__actions:not(#cfy-b1) {
        position: sticky;
        bottom: 0;
        z-index: 2;
        gap: 5px;
        margin: 8px -10px -10px;
        padding: 0 10px 10px;
        background: var(--cfy-t-surface-2);
    }
    html body #modalWelcomePreinscription .cfy-welcome__btn--primary:not(#cfy-b1):not(#cfy-b2) { min-height: 44px; }
    html body #modalWelcomePreinscription .cfy-welcome__btn--secondary:not(#cfy-b1):not(#cfy-b2) { min-height: 40px; }
    html body #modalWelcomePreinscription .cfy-welcome__foot:not(#cfy-b1) {
        flex: 0 0 auto;
        min-height: 40px;
        margin: 0;
        padding: 3px 10px;
    }
    html body #modalWelcomePreinscription .cfy-welcome__foot > :is(a, button):not(#cfy-b1) {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
}

/* Très petit téléphone (320px) : surtitre sur toute la largeur sous la croix, pied resserré */
@media (max-width: 359.98px) {
    html body #modalWelcomePreinscription .cfy-welcome__head:not(#cfy-b1):not(#cfy-b2) { padding-top: 16px; }
    html body #modalWelcomePreinscription .cfy-welcome__logo:not(#cfy-b1):not(#cfy-b2) { width: 120px; margin-bottom: 13px; }
    html body #modalWelcomePreinscription .cfy-welcome__eyebrow:not(#cfy-b1):not(#cfy-b2) { margin: 0 0 3px; }
    html body #modalWelcomePreinscription .cfy-welcome__title:not(#cfy-b1):not(#cfy-b2) { margin-bottom: 5px; font-size: 18px; }
    html body #modalWelcomePreinscription .cfy-welcome__audience:not(#cfy-b1):not(#cfy-b2) { margin-bottom: 5px; }
    html body #modalWelcomePreinscription .cfy-welcome__cta:not(#cfy-b1):not(#cfy-b2) { font-size: 12px; margin-bottom: 5px; }
    html body #modalWelcomePreinscription .cfy-welcome__foot:not(#cfy-b1):not(#cfy-b2) { gap: 0 8px; font-size: 12px; padding-block: 0; }
}

/* ── Smartphone : vidéo entre l'en-tête et le formulaire ─────────────────────────────── */
@media (max-width: 767.98px) {
    html body #modalWelcomePreinscription .cfy-welcome__head:not(#cfy-b1):not(#cfy-b2) { order: 1; }
    html body #modalWelcomePreinscription .cfy-welcome__media:not(#cfy-b1):not(#cfy-b2) {
        order: 2;
        flex: 0 0 auto;
        padding: 13px;
        border-bottom: 1px solid var(--cfy-t-line);
    }
    html body #modalWelcomePreinscription .cfy-welcome__form:not(#cfy-b1):not(#cfy-b2) { order: 3; }
    html body #modalWelcomePreinscription .cfy-welcome__foot:not(#cfy-b1):not(#cfy-b2) { order: 4; }
    html body #modalWelcomePreinscription .cfy-welcome__frame:not(#cfy-b1):not(#cfy-b2) { padding: 5px; }
    html body #modalWelcomePreinscription .cfy-welcome__frame:not(#cfy-b1)::before,
    html body #modalWelcomePreinscription .cfy-welcome__frame:not(#cfy-b1)::after { width: 21px; height: 21px; }
    html body #modalWelcomePreinscription .cfy-welcome__frame:not(#cfy-b1)::before { top: -5px; left: -5px; }
    html body #modalWelcomePreinscription .cfy-welcome__frame:not(#cfy-b1)::after { right: -5px; bottom: -5px; }
    html body #modalWelcomePreinscription .cfy-welcome__play:not(#cfy-b1):not(#cfy-b2) { width: 55px; height: 55px; }
    html body #modalWelcomePreinscription .cfy-welcome__vcap:not(#cfy-b1):not(#cfy-b2) { padding-top: 5px; }
    html body #modalWelcomePreinscription .cfy-welcome__vtitle:not(#cfy-b1):not(#cfy-b2) { font-size: 13px; }
}