/* --------------------
   TYPOGRAPHIE
-------------------- */
.kicker { 
    font-size:0.75rem; 
    font-weight:600; 
    text-transform:uppercase; 
    letter-spacing:.15em; 
    margin-bottom:.5rem; 
    opacity:.8; 
}

h2 { 
    font-size:clamp(2rem,4vw,2.6rem); 
    margin-bottom:1.2rem; 
    line-height:1.2; 
}

.intro { 
    max-width:760px; 
    margin-bottom:3rem; 
    color:#555; 
}

.intro p + p { 
    margin-top:1rem; 
}

/* --------------------
   CARD
-------------------- */
.card { 
    background:#fff; 
    border-radius:16px; 
    overflow:hidden; 
    display:flex; 
    flex-direction:column; 
    width:100%; 
    height:100%; 
    box-shadow:0 20px 40px rgba(0,0,0,0.08); 
    transition:0.4s; 
}

.card:hover { 
    transform:translateY(-6px); 
    box-shadow:0 30px 60px rgba(0,0,0,0.12); 
}

/* --------------------
   CARD IMAGE
-------------------- */
.card-image { 
    position:relative; 
    width:100%; 
    aspect-ratio: 4/3 !important;
    height: auto !important;
    max-height: 400px;
    background:#f2f4f7; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    overflow:hidden; 
    border-radius:16px 16px 0 0; 
}

.card-image img { 
    width:100%; 
    height:100%; 
    object-fit:cover; 
    transition: transform 0.6s ease; 
}

.card:hover .card-image img { 
    transform: scale(1.05); 
}

/* --------------------
   CARD CONTENT
-------------------- */
.card-content { 
    padding:1.4rem; 
    display:flex; 
    flex-direction:column; 
    flex:1; 
}

.card-content h3 { 
    font-size:1.1rem; 
    margin-bottom:.6rem; 
}

.card-content p { 
    font-size:.95rem; 
    color:#555; 
    flex-grow:1; 
}

/* --------------------
   CARD FOOTER
-------------------- */
.card-footer { 
    margin-top:1.2rem; 
    font-size:.8rem; 
    font-weight:600; 
    text-transform:uppercase; 
    letter-spacing:.08em; 
    color:inherit; 
    opacity:.7; 
}

/* --------------------
   BOUTONS
-------------------- */
.btn { 
    margin-top:1rem; 
    padding:.5rem 1rem; 
    font-size:.9rem; 
    font-weight:600; 
    text-transform:uppercase; 
    letter-spacing:.05em; 
    border:none; 
    border-radius:8px; 
    cursor:pointer; 
    transition:.3s; 
    text-align:center; 
}

.btn-premium { 
    background:#f5a623; 
    color:#fff; 
}

.btn-premium:hover { 
    background:#e69500; 
}

.btn-annexe { 
    background:#4a90e2; 
    color:#fff; 
}

.btn-annexe:hover { 
    background:#357ab8; 
}

/* --------------------
   PREMIUM SECTION
-------------------- */
.premium { 
    background:linear-gradient(180deg, #0e1a2b, #020409); 
    color:#fff; 
}

.premium .intro { 
    color:#cfd5df; 
}

.premium .card { 
    background:#0b1422; 
    box-shadow:0 20px 40px rgba(0,0,0,0.4); 
}

.premium .card-content p { 
    color:#b7c0cf; 
}

.premium .card-image { 
    background:radial-gradient(circle at top, #1f3354, #0b1422); 
}

.premium .card-image::after { 
    content:""; 
    position:absolute; 
    inset:0; 
    background:linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.45)); 
}

/* --------------------
   ANNEXE SECTION
-------------------- */
.annexes { 
    background:#f6f7f9; 
}

.annexes .card-image {
    width:100%;
    aspect-ratio: 1/1; /* carré pour les annexes, change si tu veux rectangle */
    max-height:300px;  /* limite la hauteur si besoin */
    background:#f6f7f9;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:16px 16px 0 0;
}

.annexes .card-image img {
    width:100%;
    height:100%;
    object-fit:cover; /* ou contain si tu veux voir toute l'image */
    padding:0; /* padding inutile avec aspect-ratio */
    transition: transform 0.6s ease;
}


/* --------------------
   SWIPER
-------------------- */
.swiper { 
    padding-bottom:3rem; 
}

.swiper-slide { 
    height:auto; 
    display:flex; 
}

/* Flèches Swiper */
.swiper-button-next, .swiper-button-prev { 
    color:#fff; 
}

.annexes .swiper-button-next, .annexes .swiper-button-prev { 
    color:#4a90e2; 
}

/* --------------------
   MOBILE ADAPTATION
-------------------- */
@media (max-width:768px){ 
    .card-image { 
        aspect-ratio:16/9; 
        max-height:200px; 
    } 
}



.service-cards-v2 {
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}

.service-cards-v2 .card {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column; /* IMPORTANT */
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.service-cards-v2 .card:hover {
  transform: translateY(-15px);
  box-shadow: 0 40px 80px rgba(0,0,0,0.18);
}

.service-cards-v2 .card-image {
  height: 220px;
  flex-shrink: 0;
}

.service-cards-v2 .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-cards-v2 .card-content {
  padding: 30px;
  display: flex;
  flex-direction: column;
  flex: 1; /* CLÉ POUR HAUTEUR IDENTIQUE */
}

.service-cards-v2 .card-content h3 {
  margin-bottom: 12px;
}

.service-cards-v2 .card-content p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 24px;
}

/* 🔥 Bouton toujours aligné en bas */
.service-cards-v2 .card-content a {
  margin-top: auto;
  align-self: flex-start;
  padding: 12px 28px;
  border-radius: 30px;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  color: #fff;
  text-decoration: none;
}





a.btn .btn-primary .btn-small-width {
  width: 120px !important;
  background-color: #e21f36!important;
}