/*
 * Panneau d'inscription : image 858 × 1587 affichée sur 280 px maquette.
 * --p = 1 px de l'image du panneau.
 */

.page-form .main {
    justify-content: center;
    padding: calc(var(--u) * 66) 0 calc(var(--u) * 26);
}

.panel {
    --p: calc(var(--u) * 280 / 858);
    position: relative;
    width: calc(var(--p) * 858);
    aspect-ratio: 858 / 1587;
    background: url("../images/panneau-inscription-17a5698386885b3eaab09e9a1dfd3cc8.webp") center / 100% 100% no-repeat;
    animation: panel-in .6s both cubic-bezier(.2, .8, .3, 1);
}

.panel-scroll {
    position: absolute;
    inset: calc(var(--p) * 38) calc(var(--p) * 68) calc(var(--p) * 44) calc(var(--p) * 30);
    padding: calc(var(--p) * 40) calc(var(--p) * 22) calc(var(--p) * 60);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(transparent, #000 calc(var(--p) * 24), #000 calc(100% - var(--p) * 40), transparent);
    mask-image: linear-gradient(transparent, #000 calc(var(--p) * 24), #000 calc(100% - var(--p) * 40), transparent);
}

.panel-scroll::-webkit-scrollbar {
    display: none;
}

.panel-scroll:focus {
    outline: none;
}

/* Ascenseur : la feuille glisse le long du filet doré du panneau */
.panel-scrollbar {
    position: absolute;
    left: calc(var(--p) * 790);
    top: calc(var(--p) * 56);
    width: calc(var(--p) * 52);
    height: calc(var(--p) * 1470);
    touch-action: none;
    cursor: pointer;
}

.panel-thumb {
    width: 100%;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

.panel-scrollbar.is-dragging .panel-thumb {
    cursor: grabbing;
}

.panel-scrollbar[hidden] {
    display: none;
}

/* ---------- En-tête ---------- */

.panel-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: calc(var(--p) * 10);
    background: radial-gradient(closest-side, rgb(220 226 145 / .95), rgb(220 226 145 / .45) 55%, rgb(220 226 145 / 0)) center calc(var(--p) * 70) / calc(var(--p) * 660) calc(var(--p) * 360) no-repeat;
}

.panel-title {
    font-size: calc(var(--p) * 66);
    font-weight: 600;
    line-height: .82;
    text-align: center;
    color: var(--cream);
}

.panel-movie {
    width: calc(var(--p) * 402);
    margin-top: calc(var(--p) * 22);
}

.panel-date {
    width: calc(var(--p) * 362);
    margin-top: calc(var(--p) * 20);
}

/* ---------- Champs ---------- */

.registration {
    margin-top: calc(var(--p) * 48);
}

.fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--p) * 34) calc(var(--p) * 44);
    margin-inline: calc(var(--p) * 40);
}

.field {
    grid-column: 1 / -1;
}

.field--half {
    grid-column: auto;
}

.field input {
    display: block;
    width: 100%;
    /* 16 px minimum : évite le zoom automatique d'iOS au focus */
    height: max(28px, calc(var(--p) * 56));
    padding: 0 calc(var(--p) * 14);
    border: 2px solid transparent;
    border-radius: calc(var(--p) * 12);
    background: var(--khaki);
    color: #fff;
    font-size: max(16px, calc(var(--p) * 32));
    font-weight: 600;
    letter-spacing: .01em;
    transition: border-color .2s, background-color .2s;
}

.field input::placeholder {
    color: var(--cream);
    opacity: 1;
}

.field input:focus {
    outline: none;
    border-color: var(--gold);
    background-color: #c4c26c;
}

.field.has-error input,
.field input:user-invalid {
    border-color: var(--error);
}

.form-error {
    margin-top: calc(var(--p) * 6);
    padding-inline: calc(var(--p) * 6);
    color: var(--error);
    font-size: max(11px, calc(var(--p) * 30));
    font-weight: 600;
    line-height: 1.1;
}

.registration > .form-error {
    margin: 0 calc(var(--p) * 40) calc(var(--p) * 24);
    text-align: center;
}

.panel-note {
    margin: calc(var(--p) * 40) calc(var(--p) * 10) 0;
    font-size: max(12px, calc(var(--p) * 37));
    font-weight: 500;
    line-height: 1.12;
    text-align: center;
}

/* ---------- Cases à cocher ---------- */

.checkboxes {
    display: grid;
    gap: calc(var(--p) * 18);
    margin: calc(var(--p) * 34) calc(var(--p) * 40) 0;
}

.checkboxes-required {
    font-size: max(11px, calc(var(--p) * 26));
    font-weight: 600;
    opacity: .85;
}

.checkbox {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: calc(var(--p) * 16);
    align-items: start;
}

.checkbox input {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: max(16px, calc(var(--p) * 40));
    height: max(16px, calc(var(--p) * 40));
    margin: 0;
    border: 2px solid var(--gold);
    border-radius: calc(var(--p) * 8);
    background: var(--khaki) no-repeat center / 70%;
    cursor: pointer;
    transition: background-color .2s;
}

.checkbox input:checked {
    background-color: var(--gold);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%2371814a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.checkbox.has-error input,
.checkbox input:user-invalid {
    border-color: var(--error);
}

.checkbox label {
    padding-top: 1px;
    font-size: max(12px, calc(var(--p) * 31));
    font-weight: 500;
    line-height: 1.15;
    cursor: pointer;
}

.checkbox .form-error {
    grid-column: 2;
    padding: 0;
}

/* ---------- Bouton ---------- */

.panel-cta {
    width: calc(var(--p) * 425);
    margin: calc(var(--p) * 44) auto 0;
}

.panel-cta[disabled] {
    opacity: .7;
    cursor: progress;
}

/* ---------- Règlement ---------- */

.rules {
    margin-top: calc(var(--p) * 48);
    scroll-margin-top: calc(var(--p) * 20);
}

.rules-title {
    font-size: calc(var(--p) * 66);
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.rules-text,
.panel-legal {
    margin: calc(var(--p) * 14) calc(var(--p) * 30) 0;
    font-size: max(11px, calc(var(--p) * 30));
    font-weight: 500;
    line-height: 1.25;
    text-align: justify;
    hyphens: auto;
}

.rules-text h3 {
    margin-top: calc(var(--p) * 18);
    font-size: 1.1em;
    font-weight: 700;
    text-align: left;
}

.rules-link {
    text-align: center;
}

.rules-link a {
    display: inline-block;
    margin-top: .4em;
    padding: .35em 1em;
    border-radius: 999px;
    background: var(--gold);
    color: var(--green-dark);
    font-weight: 700;
    text-decoration: none;
}

.checkbox label a,
.panel-legal a {
    color: var(--gold);
}

.rules-text p + p,
.panel-legal p + p {
    margin-top: .6em;
}

.panel-legal {
    margin-top: calc(var(--p) * 36);
    opacity: .8;
    font-size: max(10px, calc(var(--p) * 25));
}

@keyframes panel-in {
    from { opacity: 0; transform: translateY(calc(var(--u) * 40)); }
    to { opacity: 1; transform: none; }
}

/* ---------- Captcha ALTCHA (invisible) ---------- */

/* Le widget calcule sa preuve de travail en arrière-plan : il reste dans le
   formulaire (pour envoyer sa réponse) mais n'est pas affiché. */
.captcha {
    margin: 0 calc(var(--p) * 40);
    text-align: center;
}

.captcha .form-error {
    margin-top: calc(var(--p) * 30);
}

.captcha altcha-widget {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.panel-cta.is-loading {
    opacity: .75;
    cursor: progress;
    animation: cta-wait 1s ease-in-out infinite;
}

@keyframes cta-wait {
    50% { transform: scale(.97); }
}