/* ======================================================
   SECTION SAVOIR-FAIRE
====================================================== */

.services{

    padding:100px 0;

    background:#fff;

}

/* ======================================================
   EN-TÊTE
   (.section-header et .section-tag sont définis une
   seule fois dans global.css — ne pas les redéfinir ici,
   sinon cette section perd la cohérence visuelle avec
   les autres badges/titres du site)
====================================================== */

/* ======================================================
   GRILLE
====================================================== */

.services__grid{

    display:grid;

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

    gap:30px;

}

/* ======================================================
   CARTE
   Même esprit "patch cousu / tampon" que .family-card
   et .value-card dans about.css : ombre plate décalée,
   pas de flou, légère rotation au survol.
====================================================== */

.service-card{

    background:var(--color-surface);

    border-radius:10px;

    border:2px solid var(--color-border);

    box-shadow:6px 6px 0 rgba(0,0,0,.08);

    overflow:hidden;

    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;

}

.service-card:hover{

    transform:translateY(-6px) rotate(-1deg);

    box-shadow:10px 10px 0 var(--color-primary);

    border-color:var(--color-primary);

}

/* ======================================================
   IMAGE
====================================================== */

.service-card img{

    display:block;

    width:100%;

    height:320px;

    object-fit:contain;

    object-position:center top;

    background:#ffffff;

    padding:12px 12px 0;

    transition:transform .35s ease;

}

.service-card:hover img{

    transform:scale(1.03);

}

/* ======================================================
   TITRE
====================================================== */

.service-card h3{

    padding:25px 30px 10px;

    margin:0;

    font-size:1.9rem;

    font-weight:700;

    color:var(--color-text);

    text-align:center;

}

/* ======================================================
   TEXTE
====================================================== */

.service-card p{

    padding:0 30px 30px;

    color:var(--color-text-light);

    line-height:1.8;

}

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

@media (max-width:1100px){

    .services__grid{

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

    }

}

@media (max-width:700px){

    .services{

        padding:80px 0;

    }

    .services__grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .service-card img{

        height:300px;

    }

}