/* =====================================================
   PAGE
===================================================== */

.inscription-page{
    background:
        radial-gradient(circle at top left,#4b0b07 0%,transparent 35%),
        linear-gradient(135deg,#0b0b0b,#050505);
    color:#fff;
}

.inscription-page,
.inscription-page *,
.inscription-page *::before,
.inscription-page *::after{
    box-sizing:border-box;
}


/* =====================================================
   CONTAINER
===================================================== */

.inscription-container{
    width:min(1300px,92%);
    margin:auto;
}


/* =====================================================
   HERO
===================================================== */

.inscription-hero{

    padding:130px 0 90px;

    background:
        linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),
        url("/images/accueil/champion.jpg");

    background-size:cover;
    background-position:center top;
}

.inscription-kicker{

    color:#d83b2d;
    text-transform:uppercase;
    letter-spacing:4px;
    font-weight:700;
}

.inscription-hero h1{

    font-size:72px;
    font-weight:900;
    margin:15px 0;
}

.inscription-hero p{

    max-width:650px;
    color:#d0d0d0;
    font-size:20px;
}


/* =====================================================
   ETAPES
===================================================== */

.inscription-steps{

    display:flex;
    justify-content:space-between;
    gap:30px;

    margin:60px auto;
}

.step{

    flex:1;

    background:#111;

    border-radius:14px;

    padding:22px;

    text-align:center;

    border:1px solid rgba(255,255,255,.08);

    color:#999;

    font-weight:600;
}

.step span{

    width:38px;
    height:38px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    margin-right:10px;

    background:#1d1d1d;
}

.step.active{

    color:white;

    border-color:#d83b2d;

    box-shadow:0 0 30px rgba(216,59,45,.2);
}

.step.active span{

    background:#d83b2d;
}


/* =====================================================
   PANELS
===================================================== */

.info-card,
.form-panel{

    background:#111;

    border:1px solid rgba(255,255,255,.06);

    border-radius:22px;

    padding:45px;

    margin-bottom:35px;
}

.info-card h2,
.form-panel h2{

    font-size:34px;
    margin-bottom:30px;
}


/* =====================================================
   INFO
===================================================== */

.info-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

    margin-bottom:35px;
}

.info-grid p{

    color:#d6d6d6;

    line-height:1.8;
}

.info-actions{

    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.info-actions a{

    padding:14px 24px;

    border:1px solid #d83b2d;

    border-radius:10px;

    color:#d83b2d;

    text-decoration:none;

    transition:.3s;
}

.info-actions a:hover{

    background:#d83b2d;
    color:white;
}


/* =====================================================
   FORM
===================================================== */

.form-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:25px;
}

.form-field{

    display:flex;
    flex-direction:column;
    min-width:0;
}

.form-field.full{

    grid-column:1/-1;
}

.form-field label{

    margin-bottom:10px;

    font-weight:600;
}

.form-field input,
.form-field select{

    width:100%;
    max-width:100%;
    background:#181818;

    border:1px solid #2b2b2b;

    border-radius:12px;

    color:white;

    padding:15px 18px;

    transition:.3s;
}

.form-field input:focus,
.form-field select:focus{

    outline:none;

    border-color:#d83b2d;

    box-shadow:0 0 15px rgba(216,59,45,.25);
}

.form-errors{
    margin-top:30px;
    padding:24px 28px;
    border:1px solid #e74c3c;
    border-left:5px solid #e74c3c;
    border-radius:14px;
    background:rgba(140,25,20,.22);
    color:#f4f4f4;
}

.form-errors h2{
    margin:0 0 8px;
    color:#fff;
    font-size:22px;
}

.form-errors p{
    margin:0 0 10px;
    color:#ddd;
}

.form-errors ul{
    margin:0;
    padding-left:20px;
}

.form-errors li + li{
    margin-top:5px;
}

.form-field.has-error input,
.form-field.has-error select,
.gdpr-line.has-error{
    border-color:#ff5a52;
    box-shadow:0 0 0 3px rgba(255,90,82,.16);
}


/* =====================================================
   DOCUMENTS
===================================================== */

.documents-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;
}

.documents-header p{

    color:#aaa;
}

.doc-toggle{

    background:#d83b2d;

    border:none;

    color:white;

    border-radius:10px;

    padding:14px 26px;

    font-weight:700;

    transition:.3s;
}

.doc-toggle:hover{

    background:#f04f3f;
}


.upload-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin-top:25px;
}

.upload-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    min-height:260px;

    border:2px dashed #62656d;

    border-radius:18px;

    cursor:pointer;

    transition:.3s;

    background:#161616;
}

.upload-card:hover{

    background:#1d1d1d;

    transform:translateY(-5px);

    border-color:#d83b2d;
}

.upload-card span{

    font-size:48px;

    margin:25px 0;
}

.upload-card strong .parental-required{
    display:inline;
    margin:0 0 0 2px;
    font-size:1em;
    line-height:inherit;
    vertical-align:baseline;
}

.upload-card small{

    color:#999;
}

.upload-card .file-status{
    min-height:34px;
    margin-top:12px;
    padding:0 10px;
    overflow-wrap:anywhere;
}

.upload-card.has-file{
    border-color:#36c878;
    background:rgba(54,200,120,.1);
}

.upload-card.has-file .file-status{
    color:#72e6a6;
    font-weight:700;
}

.upload-card.has-error{
    border-color:#ff5a52;
    background:rgba(255,90,82,.1);
    box-shadow:0 0 0 3px rgba(255,90,82,.12);
}

.upload-card.has-error .file-status{
    color:#ff9b96;
    font-weight:700;
}

.upload-card input{

    display:none;
}

.upload-card.parental-authorization{
    transition:opacity .2s ease, filter .2s ease, border-color .2s ease;
}

.upload-card.parental-authorization.is-disabled{
    opacity:.48;
    filter:grayscale(.7);
    cursor:not-allowed;
    border-style:dashed;
}

.upload-card.parental-authorization.is-disabled input{
    pointer-events:none;
}

.upload-card strong .parental-required.is-hidden{
    display:none;
}


/* =====================================================
   VALIDATION
===================================================== */

.validation-panel{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;
}

.gdpr-line{

    display:flex;

    align-items:center;

    gap:15px;

    color:#ddd;
}

.gdpr-line a{

    color:#d83b2d;
}

.submit-btn{

    background:#d83b2d;

    color:white;

    border:none;

    padding:18px 42px;

    border-radius:12px;

    font-size:18px;

    font-weight:700;

    transition:.3s;
}

.submit-btn:hover{

    transform:translateY(-3px);

    background:#f04f3f;

    box-shadow:0 10px 30px rgba(216,59,45,.35);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1100px){

    .info-grid{
        grid-template-columns:1fr;
    }

    .form-grid{
        grid-template-columns:1fr 1fr;
    }

    .upload-grid{
        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:768px){

    .inscription-container{
        width:calc(100% - 28px);
    }

    .inscription-hero{
        padding:72px 0 46px;
        background-position:center top;
    }

    .inscription-kicker{
        font-size:12px;
        letter-spacing:2px;
    }

    .inscription-hero h1{
        font-size:clamp(34px, 10vw, 48px);
        line-height:1.05;
        margin:10px 0;
    }

    .inscription-hero p{
        font-size:15px;
        line-height:1.45;
    }

    .inscription-steps{

        flex-direction:column;
        gap:12px;
        margin:28px auto;
    }

    .step{
        padding:14px 16px;
        font-size:12px;
        border-radius:10px;
    }

    .step span{
        width:30px;
        height:30px;
        margin-right:7px;
    }

    .info-card,
    .form-panel{
        padding:22px 20px;
        margin-bottom:18px;
        border-radius:16px;
    }

    .info-card h2,
    .form-panel h2{
        margin-bottom:20px;
        font-size:26px;
        line-height:1.1;
    }

    .info-grid{
        grid-template-columns:1fr;
        gap:13px;
        margin-bottom:20px;
    }

    .info-grid p{
        margin:0;
        font-size:14px;
        line-height:1.5;
    }

    .info-actions{
        flex-direction:column;
        gap:10px;
    }

    .info-actions a{
        width:100%;
        padding:12px 14px;
        text-align:center;
        font-size:12px;
    }

    .form-grid{

        grid-template-columns:1fr;
        gap:14px;
    }

    .form-field label{
        margin-bottom:7px;
        font-size:12px;
    }

    .form-field input,
    .form-field select{
        min-width:0;
        padding:12px 13px;
        font-size:13px;
    }

    .upload-grid{

        grid-template-columns:1fr;
    }

    .documents-header{

        flex-direction:column;
        align-items:flex-start;
        gap:20px;
    }

    .documents-header h2{
        font-size:26px;
    }

    .documents-header p{
        font-size:13px;
    }

    .doc-toggle,
    .submit-btn{
        width:100%;
        padding:14px 16px;
        font-size:14px;
    }

    .upload-card{
        min-height:210px;
    }

    .validation-panel{

        flex-direction:column;
        align-items:flex-start;
        gap:18px;
    }

    .gdpr-line{
        align-items:flex-start;
        gap:10px;
        font-size:12px;
        line-height:1.45;
    }

}