/* ==================================================
   Re-Active Dogs — style.css (CORRIGÉ)
   Objectif :
   - Restaurer Services & Qui suis-je (encadrés, mise en page)
   - Conserver vos modifs : bannière avec photo + voile clair,
     titre H1 avec contour, sous-titre surligné, logo plus grand,
     footer en texte noir, icônes réseaux sociaux noires + effet hover
   - Corriger les erreurs de syntaxe qui pouvaient casser le CSS
   Date : 2025-08-23
   ================================================== */

/* === Reset & base (origine) === */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Montserrat', Arial, sans-serif; background: #e2e3e3; color: #162028; }
header, footer { background: #408491; color: #fff; }
a { color: #408491; text-decoration: none; }
a.cta, .cta-secondary {
  display: inline-block;
  background: #408491;
  color: #fff;
  padding: 0.7em 2em;
  margin-top: 1.5em;
  border-radius: 25px;
  font-weight: bold;
  transition: background 0.2s;
}
a.cta:hover, .cta-secondary:hover { background: #236575; }
.header-inner, .footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1em 2em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo { height: 60px; }
nav ul { list-style: none; display: flex; gap: 2em; }
nav ul li a { color: #fff; font-weight: 600; }
nav ul li a.active, nav ul li a:hover { border-bottom: 2px solid #fff; }
/* (Ancien hero gradient — laissé pour compat, sera surchargé plus bas) */
.hero { min-height: 60vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(120deg, #4095a3 0%, #e2e3e3 100%); text-align: center; position: relative; overflow: hidden; }
.hero-logo { width: 140px; margin-bottom: 1em; }
.hero h1 { font-size: 2.7em; letter-spacing: 2px; margin-bottom: 0.3em; }
.slogan { font-size: 1.2em; color: #246272; }
.about { background: #fff; border-radius: 20px; box-shadow: 0 3px 15px rgba(64,133,145,0.07); padding: 2em; max-width: 800px; margin: -4em auto 3em; text-align: center; }
.about h2 { color: #246272; margin-bottom: 1em; }
.cta-secondary { background: #246272; color: #fff; margin-top: 1em; }
footer { margin-top: 4em; }
.footer-inner { flex-direction: column; gap: 0.6em; text-align: center; }
.copyright { margin-top: 0.8em; font-size: 0.95em; color: #bfd9e2; }
@media (max-width: 700px) {
  .header-inner, .footer-inner { flex-direction: column; gap: 1em; padding: 1em; }
  nav ul { gap: 1em; }
  .about, .aboutquisuisje, .hero { padding: 1.5em 1em; }
}

/* === Variables & base (origine) === */
:root { --main-bg: #e2e5e7; --accent: #3d7d8c; --dark: #232c33; --white: #fff; --orange: #f0852e; --border-radius: 16px; --shadow: 0 2px 16px rgba(61,125,140,0.08); --font-main: 'Montserrat', Arial, sans-serif; }
html, body { padding: 0; margin: 0; font-family: var(--font-main); background: var(--main-bg); color: var(--dark); }
header { background: var(--accent); color: var(--white); padding: 0.5rem 0; box-shadow: var(--shadow); }
nav { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 2vw; }
.logo { height: 60px; width: auto; display: block; margin-right: 1vw; }
.menu { list-style: none; display: flex; gap: 2vw; padding: 0; margin: 0; }
.menu li a { text-decoration: none; color: var(--white); font-weight: bold; letter-spacing: 1px; transition: color 0.2s; }
.menu li a:hover { color: var(--orange); }

/* === HERO SECTION ACCUEIL (origine — sera neutralisé plus bas) === */
.hero { position: relative; background: var(--main-bg); min-height: 45vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero::before, .hero::after { content: ""; position: absolute; width: 500px; height: 250px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--accent); opacity: 0.22; z-index: 0; }
.hero::before { left: -120px; top: -80px; }
.hero::after { right: -120px; top: -60px; }
.hero-content { position: relative; text-align: center; z-index: 1; }
.hero-logo { max-width: 130px; margin-bottom: 1rem; }
.hero h1 { font-size: 2.5rem; margin: 0 0 0.5rem; letter-spacing: 2px; color: var(--accent); font-weight: 900; }
.sous-titre { font-size: 1.1rem; color: var(--dark); margin-bottom: 2rem; }
.cta-btn { display: inline-block; background: var(--accent); color: var(--white); font-size: 1.2rem; padding: 0.8rem 2.4rem; border-radius: var(--border-radius); text-decoration: none; font-weight: 700; box-shadow: var(--shadow); transition: background 0.2s; }
.cta-btn:hover { background: var(--orange); }

/* === Intro (origine) === */
.intro { background: var(--white); max-width: 900px; margin: 2rem auto 1rem auto; padding: 2rem; border-radius: var(--border-radius); box-shadow: var(--shadow); text-align: center; }

/* === Prestations (origine) === */
main { max-width: 1100px; margin: 2rem auto 2rem auto; padding: 0 2vw; }
.grid-prestations { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 2rem; margin-top: 2rem; }
.prestation { background: var(--white); border-radius: var(--border-radius); box-shadow: var(--shadow); padding: 1.5rem; text-align: left; border-left: 7px solid var(--accent); }
.prestation h2 { margin-top: 0; color: var(--accent); font-size: 1.3rem; }
.prestation p { margin: 0.7rem 0 0; color: var(--dark); font-size: 1rem; }

/* === Contact (origine) === */
.contact-form { background: var(--white); padding: 2rem; border-radius: var(--border-radius); box-shadow: var(--shadow); max-width: 420px; margin: 2rem auto; display: flex; flex-direction: column; gap: 1.2rem; }
.contact-form label { font-weight: bold; color: var(--accent); }
.contact-form input, .contact-form textarea { padding: 0.6rem; border-radius: 8px; border: 1px solid #b4c5cc; font-size: 1rem; font-family: var(--font-main); }
.contact-form button { background: var(--accent); color: var(--white); border: none; padding: 0.7rem 1.5rem; border-radius: 8px; font-weight: 700; font-size: 1.1rem; cursor: pointer; box-shadow: var(--shadow); transition: background 0.2s; }
.contact-form button:hover { background: var(--orange); }
.contact-info { max-width: 400px; margin: 2rem auto; text-align: left; font-size: 1.05rem; color: var(--dark); background: #f6f8f9; padding: 1.3rem 1.5rem; border-radius: var(--border-radius); }

footer { background: var(--accent); color: var(--white); text-align: center; padding: 1rem 0 0.6rem 0; margin-top: 3rem; border-top-left-radius: 60px 28px; border-top-right-radius: 60px 28px; font-size: 0.98rem; }

/* === Responsive (origine) === */
@media (max-width: 800px) { .hero h1 { font-size: 2rem; } .intro, main { padding: 1rem; } .grid-prestations { gap: 1rem; } }
@media (max-width: 480px) { nav { flex-direction: column; gap: 0.8rem; } .logo { height: 45px; } .menu { gap: 1rem; } .hero-logo { max-width: 85px; } .intro, main, .contact-info { padding: 1rem; } }

/* === QUI SUIS-JE (origine restaurée) === */
.aboutquisuisje { background: #fff; border-radius: 20px; box-shadow: 0 3px 15px rgba(64,133,145,0.07); padding: 2em; max-width: 800px; margin: -4em auto 3em; text-align: center; }
.aboutquisuisje h2 { color: #246272; margin-bottom: 1em; }
.aboutquisuisje { margin-top: 3em !important; }

/* === SERVICES (origine restaurée) === */
.services { max-width: 1100px; margin: auto; padding: 2rem; font-family: 'Segoe UI', sans-serif; }
.services h1 { font-size: 2.5em; text-align: center; margin-bottom: 1.5em; color: #2a5353; }
.service-grid { display: flex; flex-direction: column; gap: 2rem; }
.service-box { background: #ffffff; border: 3px solid #69b1a7; border-left: 10px solid #2a5353; border-radius: 14px; padding: 2rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); transition: transform 0.2s ease; }
.service-box:hover { transform: translateY(-4px); }
.service-box h2 { font-size: 1.7em; color: #2a5353; margin-bottom: 0.6em; }
.service-box p, .service-box li { font-size: 1.05em; color: #333; line-height: 1.6em; }
.service-box ul { padding-left: 1.5em; margin-bottom: 1em; }
.services h3 { color: #2a5353; }
/* Harmonisation titre Contact avec Services */
.services-title, .services h1 { font-size: 2.5em; text-align: center; margin-bottom: 1.5em; color: #2a5353; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; letter-spacing: normal; }

/* === Accueil — bulles (origine) === */
.accueil-container { display: block; margin: 2em auto; max-width: 650px; }
.bulle { background: #fff; border-radius: 2em; box-shadow: 0 4px 24px rgba(44, 75, 130, 0.10), 0 1.5px 8px rgba(0,0,0,0.05); border: 2.5px solid #33818f; padding: 2em 2.5em; margin: 1.5em 0; transition: box-shadow 0.25s; }
.bulle:hover { box-shadow: 0 6px 32px rgba(51,129,143,0.18), 0 3px 16px rgba(0,0,0,0.09); }
.accueil-choisir { border-color: #33818f; }
.accueil-methode { border-color: #33818f; background: #d3edec; border-radius: 4em 4em 7em 7em; }
.bulle h2, .bulle h3 { color: #33818f; font-family: 'Montserrat', Arial, sans-serif; }
.bulle h2 { font-size: 2em; margin-bottom: 0.5em; }
.bulle h3 { font-size: 1.2em; margin: 1.1em 0 0.5em 0; }
.bulle-signature { font-style: italic; color: #888; margin-top: 1em; }
.bulle ul { margin-left: 1.5em; margin-bottom: 1em; list-style: disc; }
@media (max-width: 900px) { .accueil-container { max-width: 98vw; } .bulle { max-width: 100%; padding: 1.2em 1em; } .bulle h2 { font-size: 1.4em; } }

/* === Accueil — images & mise en page (ancienne section neutralisée) === */
:root { --overlay: rgba(0,0,0,0.35); }
/* On laisse ce bloc pour compat mais il sera surchargé par le bloc HERO unique en bas */
.hero { position: relative; min-height: 60vh; display: grid; place-items: center; text-align: center; color: #fff; background: url("img/pause.jpg") center/cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--overlay); }
.hero-content { position: relative; z-index: 1; padding: 2rem 1rem; }
.hero-logo { width:120px; height:auto; margin:0 auto 1rem; display:block; }

/* Images dans les bulles (réduction actualisée plus bas) */
.bulle-img { width:100%; max-width:680px; display:block; margin:1rem auto 1.5rem; border-radius:1rem; box-shadow:0 6px 18px rgba(0,0,0,.12); }

/* Galerie (origine) */
.galerie{ padding:2.5rem 1rem; text-align:center; }
.galerie h2{ margin-bottom:1rem; }
.galerie-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:1rem; max-width:1100px; margin:0 auto; }
.galerie-grid img{ width:100%; height:220px; object-fit:cover; border-radius:1rem; box-shadow:0 6px 18px rgba(0,0,0,.12); }

@media (max-width: 520px){ .hero{ min-height: 50vh; } .hero-logo{ width:90px; } }

/* === Footer — texte noir + liens soulignés au hover === */
footer, footer p, footer a, footer a:visited { color: #000 !important; }
footer a:hover, footer a:focus { text-decoration: underline; }

/* === Sous-titre dans la bannière — surlignage lisible === */
.sous-titre{ display:inline-block; background: rgba(246, 248, 249, 0.92); color:#33818f; padding: .45rem .75rem; border-radius: .5rem; font-weight: 600; line-height: 1.4; }

/* === Titre H1 — contour autour des lettres (sans changer la couleur) === */
.hero h1{ display:inline-block; margin:.25rem 0; font-weight:800; border:none; background: transparent; font-size: clamp(2.4rem, 7vw, 4.25rem); line-height: 1.1; color: var(--accent); -webkit-text-stroke: 2px #000; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; }

/* === Réduction des photos dans les bulles uniquement === */
.bulle .bulle-img{ max-width: 420px; }
@media (max-width: 520px){ .bulle .bulle-img{ max-width: 320px; } }

/* === Footer — réseaux sociaux (icônes noires + effet hover + accessibilité) === */
footer .social-links{ display:flex; gap:1rem; align-items:center; justify-content:center; margin-top:.5rem; color:#000 !important; }
footer .social-links a, footer .social-links a:visited{ display:inline-flex; width:36px; height:36px; line-height:0; color:#000 !important; }
footer .social-links svg{ width:100%; height:100%; fill: currentColor; }
footer .social-links a:hover, footer .social-links a:focus{ color:#000 !important; transform: scale(1.12); filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); opacity:.95; }
@media (prefers-reduced-motion: no-preference){ footer .social-links a{ transition: transform .18s ease, filter .18s ease, opacity .18s ease; } }
footer .social-links a:focus-visible{ outline:2px solid #000; outline-offset:4px; border-radius:50%; }

/* ==================================================
   BLOC FINAL — HERO UNIQUE (photo + voile clair) 
   Neutralise les anciens overlays/formes et forçe la photo
   ================================================== */
.hero{
  position: relative !important;
  min-height: 60vh !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  color: #fff !important;
  background:
    linear-gradient(rgba(0,0,0,0.12), rgba(0,0,0,0)), /* voile clair */
    url("img/pause.jpg") center/cover no-repeat !important;
  overflow: hidden !important;
}
.hero::before, .hero::after{ content:none !important; }
.hero-content{ position:relative; z-index:1; padding: 2rem 1rem; }
.hero .hero-logo{ width: clamp(180px, 18vw, 320px) !important; max-width:none !important; height:auto; margin:0 auto 1rem; display:block; }

/* ====== Menu déroulant (Services) ====== */
.menu { position: relative; }
.menu > li { position: relative; }


/* Indicateur caret */
.menu .caret{
display:inline-block; margin-left:.4rem; width:0; height:0;
border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--white);
vertical-align: middle;
}
.has-submenu.open > a .caret{ transform: rotate(180deg); }


/* Sous-menu */
.submenu{
position: absolute; left:0; top:100%; z-index: 50;
min-width: 240px; padding:.5rem 0; margin-top:.4rem;
background:#fff; color: var(--dark);
border:1px solid rgba(0,0,0,.08);
border-radius:12px; box-shadow: var(--shadow);
display:none;
}
.submenu li { list-style:none; }
.submenu a{
display:block; padding:.65rem 1rem; color: var(--dark);
}
.submenu a:hover{ background: #f6f8f9; color: var(--accent); }


/* Affichage desktop : hover + focus */
@media (hover:hover){
.has-submenu:hover > .submenu{ display:block; }
}
.has-submenu:focus-within > .submenu{ display:block; }
.has-submenu.open > .submenu{ display:block; }


/* Amélioration responsive : le sous-menu se plaque visuellement au parent */
@media (max-width: 800px){
.submenu{ position:absolute; left:0; right:auto; min-width: 70vw; }
}

/* Lien actif dans la barre de menu */
.menu li a.active{
color: var(--orange);
border-bottom: 2px solid var(--orange);
}
/* Assure que rien ne coupe le dropdown */
header, nav { overflow: visible; }

/* Parent + caret */
.has-submenu > a.menu-parent { display:inline-flex; align-items:center; gap:.35rem; }
.menu .caret{
  display:inline-block; width:0; height:0; margin-left:.35rem;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:7px solid var(--white);
  transition: transform .15s ease;
}
.has-submenu.open > a .caret{ transform: rotate(180deg); }

/* Sous-menu */
.submenu{
  position:absolute; left:0; top:100%; z-index:1000;
  min-width: 260px; padding:.5rem 0; margin-top:.4rem;
  background:#fff; color: var(--dark);
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px; box-shadow: var(--shadow);
  display:none;
}
.submenu li{ list-style:none; }
.submenu a{ display:block; padding:.65rem 1rem; color: var(--dark); white-space: nowrap; }
.submenu a:hover{ background:#f6f8f9; color: var(--accent); }

/* Ouvrir (desktop/hover, clavier, et état JS) */
@media (hover:hover){ .has-submenu:hover > .submenu{ display:block; } }
.has-submenu:focus-within > .submenu{ display:block; }
.has-submenu.open > .submenu{ display:block; }

/* Responsive : dropdown large sur mobile */
@media (max-width: 800px){ .submenu{ min-width: 70vw; } }

/* Sous-menu Services — fond sombre + texte blanc (lisible) */
.submenu{
  background: var(--accent);             /* #3d7d8c : couleur du header */
  color: #fff;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* Forcer la couleur des liens du sous-menu */
.submenu a,
.submenu a:visited{
  color:#fff !important;
}

/* Survol/focus lisible */
.submenu a:hover,
.submenu a:focus{
  background: rgba(255,255,255,.12);
  color:#fff !important;
}

/* Lien actif dans le sous-menu (optionnel) */
.submenu a.active{
  background: rgba(255,255,255,.18);
  color:#fff !important;
}
/* === Qui suis-je : photos dans les cadres === */
.services .prestation {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 18px;
  background: #fff;            /* ou var(--card-bg) si tu en as une */
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  margin-bottom: 18px;
}

.services .prestation .media {
  flex: 0 0 240px;             /* largeur fixe de la colonne image */
  max-width: 240px;
}

.services .prestation .media img {
  width: 100%;
  height: 180px;               /* hauteur uniforme pour un rendu propre */
  object-fit: cover;           /* recadre sans déformer */
  border-radius: 14px;
  display: block;
}

.services .prestation .content {
  flex: 1 1 auto;
}

/* Alterner image à droite pour 1 sur 2 */
.services .prestation:nth-of-type(even) .media { order: 2; }

/* Portrait arrondi optionnel sous le H1 */
.service-box .portrait {
  max-width: 320px;
  margin: 12px auto 18px;
}
.service-box .portrait img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 9999px;
  display: block;
}

/* Responsive */
@media (max-width: 720px) {
  .services .prestation {
    flex-direction: column;
  }
  .services .prestation .media {
    max-width: 100%;
    flex-basis: auto;
  }
  .services .prestation .media img {
    height: auto; /* laisse l'image respirer sur mobile */
  }
}
/* Dropdown : ouvert au survol ET reste ouvert quand on est dessus */
@media (hover:hover){
  .has-submenu:hover > .submenu{ display:block; }
}
.has-submenu:focus-within > .submenu{ display:block; }  /* clavier */
.has-submenu.open > .submenu{ display:block; }          /* état JS (mobile) */

/* IMPORTANT : pas d'espace qui ferait \"tomber\" le hover */
.submenu{
  top:100%;
  margin-top: 0;                  /* supprime le petit gap */
  z-index: 1000;
}

/* s'assurer que rien ne coupe le sous-menu */
header, nav{ overflow: visible; }
.carousel {
  position: relative;
  overflow: hidden;
  max-width: 400px;   /* largeur max comme avant */
  margin: 0 auto;
  border-radius: 1em;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-track img {
  min-width: 100%;      /* une seule image visible */
  height: 400px;        /* hauteur identique à la galerie précédente */
  object-fit: cover;    /* garde un rendu propre sans déformation */
  display: block;
}
@media (max-width: 768px) {
  .carousel-track img {
    height: 180px;   /* un peu plus compact sur tablette/smartphone */
  }
}


.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.3em 0.6em;
  border-radius: 50%;
  z-index: 10;
}

.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }

}
.services-icons {
  display: flex;
  gap: 2em;
  justify-content: center;
  flex-wrap: wrap;
  margin: 2em 0;
}

.service-icon {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.services-icons a {
  text-align: center;
  color: #162028;
  font-weight: 600;
  text-decoration: none;
}

.services-icons a:hover .service-icon {
  transform: scale(1.1);
}
.services-icons a{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.services-icons a p{
  margin-top: .65rem;
  text-align: center;
  min-height: 2.2em; /* pour éviter que les hauteurs de texte décalent les lignes */
}
/* === Services : grille 2 colonnes (petites vignettes) === */
.services-icons{
  display: grid !important;                 /* override l'ancien flex */
  grid-template-columns: repeat(2, 1fr);    /* 2 par ligne */
  gap: 1.25rem 2rem;
  justify-items: center;
  align-items: start;
  max-width: 820px;                         /* centré, propre */
  margin: 2rem auto;
  padding: 0 1rem;
}

.services-icons a{
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.service-icon{
  width: clamp(110px, 22vw, 150px);
  height: clamp(110px, 22vw, 150px);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  border: 4px solid #33818f12;
  background:#f6f8f9;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.services-icons a p{
  margin-top: .6rem;
  text-align: center;
  min-height: 2.2em; /* évite les sauts de ligne irréguliers */
}

/* Hover */
.services-icons a:hover .service-icon{
  transform: scale(1.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  border-color: #33818f55;
}

/* Ultra-petit écran : repasser à 1 colonne si < 380px */
@media (max-width: 380px){
  .services-icons{ grid-template-columns: 1fr; }
}
/* === Services : 3 sur la 1re ligne, 2 centrées sur la 2e === */
.services-icons{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.25rem 2rem;
  justify-items: center;
  align-items: start;
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1rem;
}


/* RWD : 2 colonnes sur tablette, 1 colonne sur très petit écran */
@media (max-width: 820px){
  .services-icons{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 380px){
  .services-icons{ grid-template-columns: 1fr; }
}

/* Grille 3 colonnes */
.services-icons{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.25rem 2rem;
  justify-items: center;
  align-items: start;
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1rem;
  grid-auto-flow: row dense;
}

/* Cas où le total ≡ 2 (5, 8, 11, …) : centrer la dernière ligne */
.services-icons > a:nth-last-child(2):nth-child(3n+1){
  grid-column: 1;  /* avant-dernier à gauche */
}
.services-icons > a:last-child{
  grid-column: 3;  /* dernier à droite */
}

/* RWD : 2 colonnes tablette, 1 colonne mobile */
@media (max-width: 820px){
  .services-icons{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .services-icons > a{ grid-column: auto !important; } /* annule le placement forcé */
}
@media (max-width: 380px){
  .services-icons{ grid-template-columns: 1fr; }
  .services-icons > a{ grid-column: auto !important; }
}


/* FIN */