/* ==========================================================
   TABLETTE
========================================================== */



@media (max-width: 1100px){

    .container{
        width:min(var(--max),calc(100% - 50px));
    }

    .hero{

        grid-template-columns:1fr;

        height:auto;

        min-height:unset;

        padding:60px 0;

        background:
        linear-gradient(
            rgba(255,255,255,.90),
            rgba(255,255,255,.70)
        ),
        url("../img/hero.jpg");

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

    }

    .hero-content{

        max-width:700px;

    }

    .nav-links{

        gap:20px;

        font-size:.85rem;

    }

    .network{

        display:none;

    }

    .features{

        grid-template-columns:1fr;

    }

    .feature{

        border-right:none;

        border-bottom:1px solid var(--border);

    }

    .deal-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

    .about{

        grid-template-columns:1fr;

        gap:40px;

    }

    .form-row{

        grid-template-columns:1fr 1fr;

    }

    .form-row .btn{

        grid-column:1/-1;

    }

    .criteria-row{

        grid-template-columns:1fr 1fr;

    }

    .trust-row{

        grid-template-columns:1fr 1fr;

    }

}


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

@media (max-width:768px){

  #approche,
    #exemple,
    #apropos,
    #inscription{

        scroll-margin-top:170px;

    }


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

    header{

        height:auto;

        padding:18px 0;

    }

    .hero-actions{

    flex-direction:column;
    align-items:flex-start;
    gap:14px;

    }

    .hero-actions .btn{

        width:100%;
        text-align:center;

    }

    .nav{

        flex-direction:column;

        gap:20px;

    }

    .logo img{

        height:72px;

    }

       .nav-cta{
        display:none;
    }


    .nav-links{

        flex-wrap:wrap;

        justify-content:center;

        gap:16px;

        font-size:.9rem;

    }

    h1{

        font-size:2.6rem;

        letter-spacing:-2px;

    }

    .hero{

        padding:40px 0;
        padding-top:30px;

    }

    section{

        padding:70px 0;

    }

    .section-title{

        margin-bottom:40px;

    }

    .form-row{

        grid-template-columns:1fr;

    }

    .criteria-row{

        grid-template-columns:1fr;

    }

    .criteria-box{

        padding:18px;

    }

    .trust-row{

        grid-template-columns:1fr;

        gap:12px;

    }

    .footer-grid{

        flex-direction:column;

        text-align:center;

    }

    .footer-links{

        flex-direction:column;

        gap:12px;

    }

    .floating-card{

        position:relative;

        top:auto;

        right:auto;

        width:100%;

        margin-top:20px;

    }

}


/* ==========================================================
   PETITS TELEPHONES
========================================================== */

@media (max-width:480px){

    h1{

        font-size:2rem;

    }

    .hero p{

        font-size:1rem;

    }

    .btn{

        width:100%;

    }

    .deal-card img{

        height:260px;

    }

    .thank-you-card{

        padding:35px 25px;

    }

}