/* ============================================================
   NOS SOLUTIONS — carrousel (retour client du 21/09/2026)
   « images non entières, entre-coupées ; défilement invisible sur mobile ; réduire l'espace des écritures ».
   Causes corrigées :
   1) sur mobile, la section #services (marge « auto » dans un conteneur flex) prenait la largeur de TOUT le rail
      (≈1 320 px pour un écran de 390 px) : le rail ne défilait jamais, seule la 1re carte apparaissait, coupée
      (correctif dans mobile-fixes.css : main > .section) ;
   2) l'image était recadrée (object-fit: cover sur 185 px de haut) alors que ce sont des affiches complètes ;
   3) aucun repère de défilement (ni flèches, ni points) et carte de 350 px de haut dont la moitié de texte.
   Ici : image ENTIÈRE (object-fit: contain, fond = la même image floutée), texte compact, flèches + points.
   ============================================================ */
.service-carousel{position:relative;margin-top:36px;--img-h:200px}
.service-grid{
  display:flex;gap:16px;margin-top:0;padding:4px 2px 8px;position:relative;min-width:0;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.service-grid::-webkit-scrollbar{display:none}
.service-grid:focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:12px}

.service-grid article{
  flex:0 0 calc((100% - 48px) / 4);min-width:0;min-height:0;padding:0;
  display:flex;flex-direction:column;overflow:hidden;background:#fff;
  border:1px solid var(--line);border-radius:20px;scroll-snap-align:start;
  transition:box-shadow .25s;
}
.service-grid article:hover{transform:none;box-shadow:0 10px 30px #04313022;border-color:var(--line)}

/* Image entière : l'affiche n'est jamais recadrée ; les bandes éventuelles reprennent ses propres couleurs. */
.service-media{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1/1;background:#dcebe8}
.service-media::before{content:"";position:absolute;inset:-14%;z-index:-1;background:var(--bg) center/cover no-repeat;filter:blur(20px) saturate(1.1);transform:translateZ(0)}
.service-grid .service-photo{display:block;width:100%;height:100%;margin:0;object-fit:contain}

/* Texte compact : titre sur une ligne avec sa pastille, description limitée à 2 lignes. */
.service-copy{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 10px;padding:12px 14px 14px}
.service-grid .service-icon{width:28px;height:28px;border-radius:9px;font-size:15px}
.service-grid .service-copy h3{margin:0;font-size:15px;line-height:1.25}
.service-grid .service-copy p{
  grid-column:1/-1;margin:0;font-size:12.5px;line-height:1.45;color:var(--muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
}

/* Repères de défilement : flèches (centrées sur l'image) et points. */
.service-arrow{
  position:absolute;top:calc(var(--img-h) / 2 + 4px);transform:translateY(-50%);z-index:3;
  width:36px;height:36px;padding:0 0 3px;border:0;border-radius:50%;
  display:grid;place-items:center;font-size:24px;line-height:1;
  background:#fffffff0;color:var(--teal);box-shadow:0 4px 14px #0000003a;cursor:pointer;
}
.service-arrow:hover{background:#fff}
.service-arrow:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.service-prev{left:6px}.service-next{right:6px}
.service-dots{display:flex;justify-content:center;gap:2px;margin-top:6px}
.service-dot{width:24px;height:24px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer}
.service-dot::before{content:"";width:8px;height:8px;border-radius:99px;background:#b7cbc8;transition:width .2s,background .2s}
.service-dot[aria-current="true"]::before{width:24px;background:var(--teal)}
.service-dot:focus-visible{outline:2px solid var(--teal);border-radius:8px}
.service-carousel.is-static .service-arrow,.service-carousel.is-static .service-dots{display:none}

/* Tablettes : 2 cartes visibles */
@media (max-width:1099px){
  .service-grid article{flex-basis:calc((100% - 16px) / 2)}
}
/* Téléphones en portrait : une carte + l'amorce de la suivante, rail jusqu'au bord de l'écran */
@media (max-width:640px){
  .service-carousel{margin-top:26px;margin-inline:-16px}
  .service-grid{padding-inline:16px;scroll-padding-inline:16px;gap:12px}
  .service-grid article{flex-basis:min(78vw,320px)}
  .service-arrow{width:34px;height:34px;font-size:22px}
}
/* Téléphones en paysage (écran bas) : trois cartes, image toujours entière */
@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){
  .service-carousel{margin-top:22px;margin-inline:0}
  .service-grid{padding-inline:2px;scroll-padding-inline:2px}
  .service-grid article{flex-basis:calc((100% - 32px) / 3)}
}
@media (prefers-reduced-motion:reduce){.service-grid{scroll-behavior:auto}}