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

.avis-page{
    width:100%;
    min-height:100vh;

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

    padding:
        108px
        14px
        32px
        14px;
}

.avis-card{
    position:relative;

    width:min(560px,100%);
    min-height:620px;

    padding:24px;

    border-radius:30px;

    overflow:hidden;

    background:
        radial-gradient(circle at top right, rgba(217,155,46,.22), transparent 36%),
        radial-gradient(circle at bottom left, rgba(255,210,120,.09), transparent 42%),
        linear-gradient(180deg, rgba(12,15,20,.96), rgba(3,6,12,.99));

    border:
        1px solid rgba(217,155,46,.42);

    box-shadow:
        0 28px 80px rgba(0,0,0,.62),
        inset 0 1px 0 rgba(255,255,255,.055);
}

.avis-card::before{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.055),
            transparent 35%,
            transparent 70%,
            rgba(217,155,46,.055)
        );

    opacity:.75;
}

.avis-card-glow{
    position:absolute;
    inset:auto -80px -120px auto;

    width:260px;
    height:260px;

    border-radius:999px;

    background:rgba(217,155,46,.16);

    filter:blur(55px);

    pointer-events:none;
}

.avis-head{
    position:relative;
    z-index:2;

    margin-bottom:24px;
}

.avis-mini-label{
    width:max-content;

    margin-bottom:11px;
    padding:8px 12px;

    border-radius:999px;

    color:#120b02;

    background:
        linear-gradient(
            180deg,
            #ffe28a,
            #d99b2e
        );

    font-size:11px;
    line-height:1;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.06em;

    box-shadow:
        0 10px 24px rgba(217,155,46,.26),
        inset 0 1px 0 rgba(255,255,255,.34);
}

.avis-title{
    margin:0 0 8px 0;

    color:#ffd36a;

    font-size:34px;
    line-height:1.02;
    font-weight:950;
    letter-spacing:-1px;

    text-shadow:
        0 10px 30px rgba(0,0,0,.35);
}

.avis-sub{
    max-width:390px;

    margin:0;

    color:rgba(255,255,255,.72);

    font-size:15px;
    line-height:1.45;
    font-weight:800;
}

/* =========================================================
   BOUTON RETOUR AVIS
========================================================= */

.avis-return-btn{
    height:46px;
    min-width:46px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:0 14px 0 12px;

    border-radius:16px;

    text-decoration:none;

    color:#120b02;

    font-size:13px;
    line-height:1;
    font-weight:950;

    background:
        linear-gradient(
            180deg,
            #ffe28a,
            #d99b2e
        );

    border:
        1px solid rgba(255,216,107,.90);

    box-shadow:
        0 12px 28px rgba(217,155,46,.30),
        inset 0 1px 0 rgba(255,255,255,.42);

    transition:
        transform .18s ease,
        filter .18s ease,
        box-shadow .18s ease;
}

.avis-return-btn img{
    width:20px;
    height:20px;

    display:block;

    object-fit:contain;

    filter:
        drop-shadow(0 1px 0 rgba(255,255,255,.18));
}

.avis-return-btn span{
    display:inline-block;
}

.avis-return-btn:hover{
    filter:brightness(1.06);
    transform:translateY(-1px);

    box-shadow:
        0 16px 34px rgba(217,155,46,.36),
        inset 0 1px 0 rgba(255,255,255,.46);
}

.avis-return-btn:active{
    transform:scale(.96);
}

/* Ancien bouton si encore présent */
.avis-top-btn{
    height:46px;

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

    padding:0 16px;

    border-radius:16px;

    color:#120b02;
    text-decoration:none;

    font-size:13px;
    font-weight:950;

    background:
        linear-gradient(
            180deg,
            #ffe28a,
            #d99b2e
        );

    border:
        1px solid rgba(255,216,107,.90);

    box-shadow:
        0 12px 28px rgba(217,155,46,.30),
        inset 0 1px 0 rgba(255,255,255,.42);
}

.avis-top-btn:active{
    transform:scale(.97);
}

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

.avis-form{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    gap:16px;
}

.avis-field{
    display:flex;
    flex-direction:column;
    gap:9px;
}

.avis-field label{
    color:rgba(255,255,255,.68);

    font-size:12px;
    line-height:1;
    font-weight:950;

    text-transform:uppercase;
    letter-spacing:.05em;
}

.avis-input,
.avis-textarea{
    width:100%;

    border:none;
    outline:none;

    border-radius:17px;

    color:#fff;

    font-size:14px;
    font-weight:800;

    background:
        linear-gradient(
            180deg,
            rgba(19,24,34,.96),
            rgba(9,12,19,.98)
        );

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 12px 32px rgba(0,0,0,.28);

    transition:
        border .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.avis-input{
    height:52px;
    padding:0 16px;
}

.avis-textarea{
    min-height:150px;
    padding:15px 16px;

    resize:vertical;
    line-height:1.45;
}

.avis-input::placeholder,
.avis-textarea::placeholder{
    color:rgba(255,255,255,.36);
}

.avis-input:focus,
.avis-textarea:focus{
    border-color:rgba(217,155,46,.95);

    box-shadow:
        0 0 0 4px rgba(217,155,46,.12),
        0 16px 40px rgba(0,0,0,.34);
}

/* =========================================================
   STARS
========================================================= */

.avis-stars{
    display:flex;
    flex-direction:row-reverse;
    justify-content:flex-end;

    gap:6px;

    padding:4px 0 2px;
}

.avis-stars input{
    display:none;
}

.avis-stars label{
    cursor:pointer;

    color:rgba(255,255,255,.20);

    font-size:38px;
    line-height:1;
    font-weight:900;

    transition:
        color .16s ease,
        transform .16s ease,
        text-shadow .16s ease;
}

.avis-stars input:checked ~ label,
.avis-stars label:hover,
.avis-stars label:hover ~ label{
    color:#ffd36a;

    transform:translateY(-1px) scale(1.06);

    text-shadow:
        0 0 18px rgba(217,155,46,.26);
}

/* =========================================================
   BUTTON SUBMIT
========================================================= */

.avis-submit{
    width:100%;
    height:56px;

    margin-top:2px;

    border:none;
    outline:none;

    border-radius:18px;

    cursor:pointer;

    color:#120b02;

    font-size:15px;
    line-height:1;
    font-weight:950;

    background:
        linear-gradient(
            180deg,
            #ffe28a,
            #d99b2e
        );

    border:
        1px solid rgba(217,155,46,.90);

    box-shadow:
        0 16px 34px rgba(217,155,46,.30),
        inset 0 1px 0 rgba(255,255,255,.36);

    transition:
        transform .18s ease,
        filter .18s ease,
        box-shadow .18s ease;
}

.avis-submit:hover{
    filter:brightness(1.05);

    box-shadow:
        0 18px 38px rgba(217,155,46,.36),
        inset 0 1px 0 rgba(255,255,255,.40);
}

.avis-submit:active{
    transform:scale(.98);
}

/* =========================================================
   ALERTS
========================================================= */

.avis-errors{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    gap:8px;

    margin-bottom:16px;
}

.avis-alert{
    padding:13px 15px;

    border-radius:16px;

    font-size:13px;
    font-weight:900;
}

.avis-alert.err{
    color:#fff;

    background:
        rgba(239,68,68,.18);

    border:
        1px solid rgba(239,68,68,.44);
}

/* =========================================================
   POPUP
========================================================= */

.avis-popup-overlay{
    position:fixed;
    inset:0;
    z-index:99999;

    display:none;
    align-items:center;
    justify-content:center;

    padding:20px;

    background:rgba(0,0,0,.74);

    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
}

.avis-popup-overlay.active{
    display:flex;
}

.avis-popup{
    width:min(370px,100%);

    padding:30px 24px;

    border-radius:28px;

    text-align:center;

    background:
        radial-gradient(circle at top, rgba(34,197,94,.20), transparent 45%),
        linear-gradient(180deg, rgba(18,24,30,.98), rgba(5,8,13,.98));

    border:
        1px solid rgba(34,197,94,.52);

    box-shadow:
        0 24px 80px rgba(0,0,0,.65),
        0 0 30px rgba(34,197,94,.16);
}

.avis-popup-icon{
    width:70px;
    height:70px;

    margin:0 auto 17px;

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

    border-radius:999px;

    color:#07140d;

    font-size:38px;
    font-weight:950;

    background:
        linear-gradient(
            135deg,
            #65f0a5,
            #16a34a
        );

    box-shadow:
        0 14px 34px rgba(34,197,94,.30),
        inset 0 1px 0 rgba(255,255,255,.35);
}

.avis-popup-title{
    color:#fff;

    font-size:26px;
    line-height:1.1;
    font-weight:950;

    margin-bottom:8px;
}

.avis-popup-text{
    color:rgba(255,255,255,.76);

    font-size:14px;
    line-height:1.45;
    font-weight:800;
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .avis-page{
        padding:
            94px
            10px
            24px
            10px;
    }

    .avis-card{
        min-height:680px;
        padding:20px;
        border-radius:26px;
    }

    .avis-title{
        font-size:29px;
    }

    .avis-sub{
        font-size:14px;
    }

    .avis-stars label{
        font-size:35px;
    }

    .avis-textarea{
        min-height:150px;
    }

    .avis-submit{
        height:54px;
        border-radius:17px;
    }
}

@media(max-width:520px){

    .avis-return-btn{
        width:46px;
        padding:0;
        border-radius:15px;
    }

    .avis-return-btn span{
        display:none;
    }

    .avis-return-btn img{
        width:21px;
        height:21px;
    }
}

@media(max-width:370px){

    .avis-card{
        padding:18px;
    }

    .avis-title{
        font-size:27px;
    }

    .avis-stars label{
        font-size:32px;
    }
}