/* ================================================================
   BERGEC — Styles de la page Services
   ================================================================ */

/* En-tête page (copiée de realisations.css) */
.page-entete {
  background: linear-gradient(135deg, var(--sombre) 0%, var(--bleu-fonce) 50%, var(--bleu) 100%);
  padding: 160px 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.entete-corps { position: relative; z-index: 2; }
.page-entete .titre-section { font-size: clamp(30px, 5vw, 50px); margin-top: 12px; }
.entete-decor {
  position: absolute; bottom: -1px; left: 0; right: 0; height: 60px;
  background: var(--blanc);
  clip-path: ellipse(55% 100% at 50% 100%);
}

/* ── Grille des 6 services ── */
.services-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 80px;
}

/* Carte de service */
.carte-service {
  background: var(--blanc);
  border-radius: var(--rayon-lg);
  padding: 34px 26px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bordure);
  transition: var(--transition);
  cursor: default;
}

/* Barre colorée en haut (apparaît au survol) */
.carte-service::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bleu), var(--rouge));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.carte-service:hover::before  { transform: scaleX(1); }
.carte-service:hover          { transform: translateY(-6px); box-shadow: var(--ombre-lg); border-color: transparent; }

/* Numéro décoratif en filigrane */
.svc-numero {
  position: absolute;
  top: 18px; right: 18px;
  font-family: var(--police-titre);
  font-size: 46px;
  font-weight: 800;
  color: var(--bordure);
  line-height: 1;
  transition: var(--transition);
  user-select: none;
}

.carte-service:hover .svc-numero { color: rgba(204, 17, 34, 0.09); }

/* Icône du service */
.svc-icone {
  width: 54px; height: 54px;
  background: linear-gradient(135deg, var(--bleu), var(--bleu-clair));
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--blanc);
  font-size: 21px;
  margin-bottom: 18px;
  transition: var(--transition);
}

.carte-service:hover .svc-icone {
  background: linear-gradient(135deg, var(--rouge-fonce), var(--rouge));
  transform: scale(1.08);
}

.carte-service h3 {
  font-family: var(--police-titre);
  font-size: 17px; font-weight: 700;
  color: var(--sombre); margin-bottom: 14px; line-height: 1.3;
}

/* Liste des prestations */
.carte-service ul  { list-style: none; }
.carte-service li  {
  font-size: 14px; color: var(--discret);
  padding: 5px 0; display: flex; align-items: center; gap: 8px;
}

/* Puce rouge */
.carte-service li::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--rouge);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Flèche d'action (au survol) */
.svc-fleche {
  margin-top: 18px; color: var(--bleu);
  font-size: 14px; opacity: 0;
  transform: translateX(-8px); transition: var(--transition);
}

.carte-service:hover .svc-fleche { opacity: 1; transform: none; }

/* ── Processus de travail ── */
.methode-section { margin-top: 80px; }

.etapes-grille {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  position: relative;
}

/* Ligne de connexion entre les étapes */
.etapes-grille::before {
  content: '';
  position: absolute;
  top: 40px; left: 40px; right: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--bleu), var(--rouge));
  z-index: 0;
}

.etape {
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Numéro de l'étape */
.etape-num {
  position: absolute;
  top: -8px; right: -8px;
  width: 24px; height: 24px;
  background: var(--rouge);
  color: var(--blanc);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--police-titre);
}

/* Icône de l'étape */
.etape-icone {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, var(--bleu), var(--bleu-clair));
  border-radius: 50%; /* Cercle = évoque l'ovale du logo */
  display: flex; align-items: center; justify-content: center;
  color: var(--blanc);
  font-size: 28px;
  margin: 0 auto 16px;
  transition: var(--transition);
  border: 4px solid var(--blanc);
  box-shadow: 0 4px 16px rgba(26, 63, 122, 0.3);
}

.etape:hover .etape-icone {
  background: linear-gradient(135deg, var(--rouge-fonce), var(--rouge));
  transform: scale(1.08);
}

.etape h4 {
  font-family: var(--police-titre);
  font-size: 14px; font-weight: 700;
  color: var(--sombre); margin-bottom: 8px;
}

.etape p { font-size: 13px; color: var(--discret); line-height: 1.6; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .services-grille { grid-template-columns: repeat(2, 1fr); }
  .etapes-grille { grid-template-columns: repeat(3, 1fr); }
  .etapes-grille::before { display: none; }
}

@media (max-width: 768px) {
  .services-grille { grid-template-columns: 1fr; }
  .etapes-grille { grid-template-columns: 1fr 1fr; }
}