/* AJOUTER DANS style.css */

/* PAGE TIPS */

.tips-page{
    background:#f4f7fb;
    font-family:'Poppins', sans-serif;
}

/* HERO */

.tips-hero{
    height:500px;
    background:url('https://images.unsplash.com/photo-1516035069371-29a1b244cc32?q=80&w=1920') center/cover no-repeat;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:20px;
}

.tips-overlay{
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.65);
}

.tips-hero-content{
    position:relative;
    z-index:2;
    color:white;
    max-width:850px;
}

.tips-badge{
    display:inline-block;
    background:#3da1ff;
    padding:10px 22px;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
    margin-bottom:25px;
    letter-spacing:1px;
}

.tips-hero h1{
    font-size:60px;
    line-height:1.2;
    margin-bottom:25px;
}

.tips-hero p{
    font-size:20px;
    opacity:0.9;
}

/* CONTAINER */

.tips-container{
    width:90%;
    max-width:1300px;
    margin:auto;
    margin-top:-80px;
    position:relative;
    z-index:10;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;

    padding-bottom:80px;
}
a{
    text-decoration: none;
    font-weight: bold;
    color:red;
}
/* CARD */

.tips-card{
    background:white;
    border-radius:25px;
    padding:35px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:0.3s;
    position:relative;
    overflow:hidden;
}

.tips-card:hover{
    transform:translateY(-8px);
}

.tips-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
    background:#3da1ff;
}

.tips-icon{
    width:75px;
    height:75px;
    background:#3da1ff;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:30px;
    margin-bottom:25px;
    box-shadow:0 10px 20px rgba(61,161,255,0.3);
}

.tips-card h2{
    font-size:25px;
    margin-bottom:18px;
    color:#111;
}

.tips-card p{
    color:#666;
    line-height:1.8;
    font-size:15px;
}

/* SPECIAL CARD */

.special-card{
    background:linear-gradient(135deg,#3da1ff,#1e88e5);
    color:white;
}

.special-card h2,
.special-card p{
    color:white;
}

.special-card .tips-icon{
    background:white;
    color:#3da1ff;
}

/* CONTRACT CARD */

.contract-card::before{
    background:#111;
}

/* RESPONSIVE */

@media(max-width:900px){

    .tips-hero{
        height:420px;
    }

    .tips-hero h1{
        font-size:38px;
    }

    .tips-hero p{
        font-size:17px;
    }

    .tips-container{
        margin-top:-50px;
    }

}
/* AJOUTER DANS style.css */

/* HERO MODELE */

.modele-hero{
    background:url('https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=1920') center/cover no-repeat;
}

/* CARD DANGER */

.danger-card::before{
    background:#ff4d6d;
}

.danger-card .tips-icon{
    background:#ff4d6d;
    box-shadow:0 10px 20px rgba(255,77,109,0.3);
}

/* IMPORTANT CARD */

.important-card::before{
    background:#ff9800;
}

.important-card .tips-icon{
    background:#ff9800;
    box-shadow:0 10px 20px rgba(255,152,0,0.3);
}

/* BEAUTY CARD */

.beauty-card::before{
    background:#9c27b0;
}

.beauty-card .tips-icon{
    background:#9c27b0;
    box-shadow:0 10px 20px rgba(156,39,176,0.3);
}

/* WARNING CARD */

.warning-card::before{
    background:#f44336;
}

.warning-card .tips-icon{
    background:#f44336;
    box-shadow:0 10px 20px rgba(244,67,54,0.3);
}

/* MONEY CARD */

.money-card::before{
    background:#00b894;
}

.money-card .tips-icon{
    background:#00b894;
    box-shadow:0 10px 20px rgba(0,184,148,0.3);
}

/* COPYRIGHT CARD */

.copyright-card::before{
    background:#111;
}

.copyright-card .tips-icon{
    background:#111;
    box-shadow:0 10px 20px rgba(0,0,0,0.3);
}