/* =========================================================
   GEOSEF — Services
   Charte : var(--red)=#C1272D, var(--grey-50)
   Objectif :
   - Mini-slider même hauteur que l’accordéon (colonne gauche)
   - Flèches visibles en surimpression
   - Mise en page compacte et équilibrée
   ========================================================= */

/* Utilitaires */
.page-services .center{ text-align:center; }
.page-services .narrow{ max-width:980px; margin:0 auto; }
.page-services .section-title{ margin-bottom:8px; }
.page-services .intro-lead{ line-height:1.8; color:#333; margin:0; }

/* ===== Intro ===== */
.page-services .svc-intro{ background:var(--grey-50); padding:26px 0 20px; }

/* ===== Grille 2 colonnes ===== */
.page-services .svc-engagements{ background:#fff; padding:26px 0; }
.page-services .grid-2{
  display:grid; gap:22px; grid-template-columns:1fr;
  align-items:stretch; /* mêmes hauteurs entre colonnes */
}
@media (min-width:1100px){
  .page-services .grid-2{ grid-template-columns: 1.1fr .9fr; }
}

/* ===== Accordéon (gauche) ===== */
.page-services .eng-col{ display:flex; height:100%; }
.page-services .accordion{ display:grid; gap:12px; width:100%; align-content:start; }

.page-services .acc-item{
  border:1px solid var(--grey-200); border-radius:12px; overflow:hidden;
  background:#fff; box-shadow:var(--shadow);
}
.page-services .acc-btn{
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 14px; border:0; cursor:pointer; background:#fff;
  font:600 1.02rem/1 "Roboto",system-ui; color:var(--black);
  border-left:4px solid var(--red);
}
.page-services .acc-btn .chev{ transition:transform .2s ease; }
.page-services .acc-btn[aria-expanded="true"] .chev{ transform:rotate(180deg); }

/* Panneau : masqué via [hidden] (tous fermés par défaut) */
.page-services .acc-panel{ padding:0 14px 12px; }
.page-services .acc-panel[hidden]{ display:none; }

.page-services .eng-text{ margin:8px 0 6px; color:#333; line-height:1.7; }
.page-services .eng-list{ margin:0; padding:0; list-style:none; display:grid; gap:6px; }
.page-services .eng-list li{ display:flex; gap:8px; }
.page-services .eng-list li::before{ content:"•"; color:var(--red); font-weight:700; }

/* ===== Mini-slider (droite) — même hauteur que la colonne gauche ===== */
.page-services .eng-media{ display:flex; height:100%; }
.page-services .mini-slider{
  position:relative; border-radius:14px; overflow:hidden;
  border:1px solid var(--grey-200); box-shadow:var(--shadow);
  height:100%;      /* <-- synchronisé avec la colonne gauche */
  min-height:240px; /* garde un minimum esthétique si tout est fermé */
  width:100%;
}
.page-services .mini-track{ position:relative; width:100%; height:100%; }
.page-services .mini-slide{
  position:absolute; inset:0; opacity:0; transition:opacity .35s ease;
}
.page-services .mini-slide.is-active{ opacity:1; z-index:1; }
.page-services .mini-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Flèches — toujours visibles au-dessus de l’image */
.page-services .mini-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(0,0,0,.38); color:#fff; font-size:20px; line-height:36px; text-align:center;
  z-index:3; /* <-- au-dessus */
}
.page-services .mini-nav:hover{ background:rgba(0,0,0,.55); }
.page-services .mini-nav.prev{ left:10px; }
.page-services .mini-nav.next{ right:10px; }

/* Puces */
.page-services .mini-dots{
  position:absolute; left:0; right:0; bottom:8px; display:flex; gap:6px; justify-content:center;
  z-index:3; /* au-dessus aussi */
}
.page-services .mini-dots button{
  width:8px; height:8px; border-radius:999px; border:0; background:#fff; opacity:.55; cursor:pointer;
}
.page-services .mini-dots button[aria-current="true"]{ background:var(--red); opacity:1; }

/* Angle rouge */
.page-services .corner{
  position:absolute; left:0; top:0; width:0; height:0;
  border-top:64px solid var(--red); border-right:64px solid transparent;
  border-top-left-radius:12px; pointer-events:none;
  z-index:2;
}

/* ===== Cartes “Ce que nous offrons” ===== */
.page-services .svc-cards{ background:#fff; padding:24px 0 32px; }
.page-services .cards-grid{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:900px){ .page-services .cards-grid{ grid-template-columns:repeat(3,1fr); } }

.page-services .card{
  display:flex; flex-direction:column;
  background:#fff; border-radius:14px; border:1px solid var(--grey-200);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  padding:14px; min-height:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
.page-services .card:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,0,0,.09); }
/* remplace ces deux règles existantes */

.page-services .card h3{ margin:2px 0 6px; font-size:1.02rem; }
.page-services .card-text{ margin:0 0 10px; color:#333; line-height:1.7; }

/* Clamp pour égaliser les hauteurs de cartes */
.page-services .clamp{
  display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden;
}

/* Bouton outline */
.page-services .btn{ display:inline-block; padding:9px 14px; border-radius:999px; font-weight:700; text-decoration:none; }
.page-services .btn-outline{ border:2px solid var(--red); color:var(--red); background:#fff; }
.page-services .btn-outline:hover{ background:var(--red); color:#fff; }

/* Mobile */
@media (max-width:540px){
  .page-services .mini-nav{ width:32px; height:32px; font-size:18px; }
}

/* --- FIX anti-crop pour les images des cards (priorité + reset) --- */
.page-services .svc-cards .card .card-media > img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain !important;      /* force le non-crop */
  object-position:center center;
  aspect-ratio:auto !important;       /* annule tout aspect-ratio résiduel sur l’img */
  display:block;
  border-radius:10px;
}

/* la boîte garde la régularité visuelle (letterboxing acceptable) */
.page-services .svc-cards .card .card-media{
  aspect-ratio:4/4;
  background:#FFF;
  border-radius:10px;
  overflow:hidden;
  display:grid;
  place-items:center;
}