/* ==========================================================================
   LES RETOURNÉES — Page « Nos services » (maquette XD « HOME – 6 », 1920 px)
   Complète theme.css : marque, boutons et .rt-mark viennent de là.

   ── Deux mises en page, une seule feuille ─────────────────────────────────
   · EN FLUX (par défaut, et seule mise en page sous 1200 px, sans JS, ou si
     le visiteur demande moins d'animation) : les secteurs se suivent
     normalement, le bandeau de boutons reste collant en haut.
   · ÉPINGLÉE (≥ 1200 px, posée par services.js via [data-svc-mode="pinned"]) :
     les slides se superposent dans un cadre d'un écran et défilent au scrub
     de ScrollTrigger.
   Le mode épinglé est conditionné à un attribut écrit par le script : sans JS
   la page reste lisible en flux au lieu de n'afficher que la dernière slide.

   ── Unité de mise à l'échelle ──────────────────────────────────────────────
   La maquette place chaque secteur dans un bloc de 1920 × 1052. Chaque slide
   doit tenir dans un écran (100svh − bandeau). On définit donc une unité --u
   qui vaut 1 px de maquette :

       --u = min( largeur écran / 1920 , hauteur dispo / 1000 )

   Toutes les tailles sont exprimées en `calc(N * var(--u))` : le rendu est
   au pixel près quand l'écran a le ratio de la maquette, et se réduit
   proportionnellement (sans jamais déborder) sur les écrans plus courts.

   Le diviseur vertical est 1000 — la hauteur réellement occupée par le
   contenu — et non 1052, la hauteur du bloc dans l'artboard : sur un écran
   bas, se caler sur le contenu laisse 5 % de typo en plus pour un rendu
   identique. Sur un écran au ratio de la maquette c'est la largeur qui
   commande, le rendu reste donc au pixel près.
   La hauteur du bandeau, elle, ne dépend que de la largeur — sinon --u
   dépendrait d'une valeur qui dépend de --u.
   ========================================================================== */

.rt-svc-hero,
.rt-svc-sectors {
  /* 131 / 1920 = 6.823vw ; 1 / 1920 = 0.052083vw */
  --rt-bar-min: clamp(78px, 6.823vw, 131px);
  /* Hauteur retenue par la mise en page. Vaut la hauteur de maquette tant que
     le bandeau tient sur une ligne ; services.js la remplace par la hauteur
     réellement mesurée quand les boutons se replient — le nombre de secteurs
     est administrable, un cinquième bouton fait passer le bandeau sur deux
     rangées et tout ce qui suit doit en tenir compte.
     Deux variables et non une : lier `min-height` à la valeur que le script
     écrit créerait une boucle entre mesure et mise en page. */
  --rt-bar-h:   var(--rt-bar-min);
  --rt-screen:  calc(100svh - var(--rt-bar-h));
  --rt-u-base:  min(0.052083vw, calc(var(--rt-screen) / 1000));
  --u:          var(--rt-u-base);
  --uh:         min(0.052083vw, calc(var(--rt-screen) / 741));
  --rt-anim:    cubic-bezier(.16, 1, .3, 1);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.rt-svc-hero {
  position: relative;
  isolation: isolate;
  height: var(--rt-screen);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--rt-green-bottom);
}
/* L'export XD couvre le hero ET le bandeau (1930 × 872) : on cadre en haut
   pour retrouver exactement la portion visible de la maquette. */
.rt-svc-hero__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* Carte « verre dépoli » : XD → flou 7.8 px, luminosité −5 %, fond à 14 %. */
.rt-svc-hero__card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: calc(989 * var(--uh));
  min-height: calc(444 * var(--uh));
  /* La maquette pose la carte à 170 du haut pour 127 du bas : le centrage
     flex la remonte de 21 px, cette marge la redescend d'autant. */
  margin-top: calc(43 * var(--uh));
  padding: calc(33 * var(--uh)) calc(48 * var(--uh)) calc(64 * var(--uh));
  border-radius: calc(20 * var(--uh));
  background: linear-gradient(180deg, rgba(25, 74, 68, .14), rgba(21, 59, 54, .14));
  backdrop-filter: blur(7.8px) brightness(.95);
  -webkit-backdrop-filter: blur(7.8px) brightness(.95);
  text-align: center;
  color: var(--rt-white);
}
.rt-svc-hero__tag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: calc(280 * var(--uh)); height: calc(42 * var(--uh));
  padding-inline: calc(20 * var(--uh));
  border-radius: var(--rt-pill);
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(30px) brightness(1.15);
  -webkit-backdrop-filter: blur(30px) brightness(1.15);
  font-family: var(--rt-font-title); font-weight: 500;
  font-size: calc(19 * var(--uh)); line-height: 1;
}
.rt-svc-hero__title {
  margin: calc(34 * var(--uh)) 0 0;
  font-family: var(--rt-font-title); font-weight: 700;
  font-size: calc(74 * var(--uh)); line-height: 1.06;
  color: var(--rt-white);
}
/* La 2e ligne porte l'ondulation menthe, calée sur sa fin (maquette) : en
   absolute, elle ne pousse pas le texte. */
.rt-svc-hero__title-line { position: relative; display: inline-block; }
.rt-svc-hero__squiggle {
  position: absolute; right: 0; top: 100%;
  width: calc(284 * var(--uh)); height: auto; margin-top: calc(6 * var(--uh));
  pointer-events: none;
}
.rt-svc-hero__lead {
  max-width: calc(892 * var(--uh));
  margin: calc(43 * var(--uh)) auto 0;
  font-size: calc(26 * var(--uh)); line-height: 1.35;
}
.rt-svc-hero__scroll {
  position: absolute; left: 50%; bottom: calc(30 * var(--uh));
  transform: translateX(-50%);
  width: calc(56 * var(--uh)); height: calc(56 * var(--uh));
  padding: 0; border: 0; background: none; cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--rt-ease), opacity var(--rt-ease);
}
.rt-svc-hero__scroll img { width: 100%; height: 100%; display: block; }
.rt-svc-hero__scroll:hover { transform: translate(-50%, 4px); }
@media (prefers-reduced-motion: no-preference) {
  .rt-svc-hero__scroll img { animation: rt-svc-bob 2.4s ease-in-out infinite; }
}
@keyframes rt-svc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ==========================================================================
   BANDEAU DE SECTEURS
   Il doit rester au-dessus des slides EN TOUTE CIRCONSTANCE : d'où le
   z-index élevé et le z-index: 0 posé sur la pile, qui enferme les slides
   dans un contexte d'empilement situé sous lui.
   ========================================================================== */
.rt-svc-sectors { position: relative; z-index: 1; }

.rt-svc-bar {
  position: sticky; top: 0; z-index: 60;
  /* min-height et non height : au-delà de quatre secteurs les boutons se
     replient et le bandeau doit grandir plutôt que les laisser déborder. */
  min-height: var(--rt-bar-min);
  padding: 8px 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--rt-orange);
}
/* Mode épinglé : toute la section est figée par ScrollTrigger (position:
   fixed). Un `sticky` n'y a plus de conteneur de défilement d'accroche — il
   se comportait comme un `relative` et finissait masqué par les slides.
   En relatif dans une section déjà figée, le bandeau est simplement toujours
   en haut, toujours visible. */
.rt-svc-sectors[data-svc-mode="pinned"] .rt-svc-bar { position: relative; }

.rt-svc-bar__list {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px clamp(12px, 3.39vw, 65px);
  list-style: none; margin: 0; padding: 0 var(--rt-inset);
  max-width: 100%;
}
.rt-svc-bar__btn {
  display: block; white-space: nowrap;
  padding: 1em 1.55em; border-radius: var(--rt-pill);
  background: var(--rt-cream); color: var(--rt-orange);
  font-family: var(--rt-font-body); font-weight: 700;
  font-size: clamp(13px, 1.0417vw, 20px); line-height: 1.2;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .28s ease, color .28s ease, box-shadow .28s ease, transform var(--rt-ease);
}
.rt-svc-bar__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .18); color: var(--rt-orange); }
.rt-svc-bar__btn:active { transform: translateY(0); }
.rt-svc-bar__btn.is-active {
  background: var(--rt-green); color: var(--rt-white);
  box-shadow: 0 10px 26px rgba(21, 59, 54, .28);
}
.rt-svc-bar__btn:focus-visible { outline: 3px solid var(--rt-white); outline-offset: 3px; }

/* ==========================================================================
   SLIDES — mise en page en flux (défaut)
   Chaque secteur occupe au moins un écran et se lit à la suite du précédent.
   min-height (et non height) : un contenu plus long fait grandir la boîte
   au lieu d'être rogné par l'overflow.
   ========================================================================== */
.rt-svc-slide {
  /* --rt-fit : correctif d'échelle posé par services.js en mode épinglé quand
     le contenu ne tient pas dans l'écran (fenêtre basse, retour à la ligne
     imprévu). C'est aussi pourquoi aucune taille de texte n'a de plancher en
     px ici : un plancher figé rendrait l'ajustement impossible. */
  --u: calc(var(--rt-u-base) * var(--rt-fit, 1));
  position: relative; z-index: 0;
  scroll-margin-top: var(--rt-bar-h);
  min-height: var(--rt-screen);
  display: flex;
  background: var(--rt-white);
  overflow: hidden;
  /* Ombre statique : elle sépare deux secteurs qui se suivent. Elle était
     auparavant recalculée à chaque image depuis une variable animée — un
     flou de 50 px repeint 60 fois par seconde sur un élément plein écran. */
  box-shadow: 0 -18px 50px rgba(21, 59, 54, .10);
}
.rt-svc-slide__inner {
  position: relative;
  flex: 1;
  display: flex; align-items: center;
  padding-block: calc(16 * var(--u));
  /* Le recul de sortie porte sur __inner et non sur la slide : il découvre le
     fond blanc de la slide elle-même, déjà masquée par la suivante. Origine en
     haut pour que le recul creuse la profondeur sous le bandeau.
     Les valeurs sont posées par GSAP (transform + opacité uniquement) ; sans
     JS l'état neutre ci-dessous est l'état final. */
  transform-origin: 50% 0;
}

/* ------- Panneau de couleur + photo ------- */
.rt-svc-slide__panel {
  position: absolute; inset: 0 auto 0 0; z-index: 0;
  width: calc(677 * var(--u));
  background: var(--rt-slide-tone);
}
.rt-svc-slide__photo {
  position: absolute; left: calc(221 * var(--u)); top: 50%; z-index: 1;
  width: calc(651 * var(--u)); height: calc(805 * var(--u));
  border-radius: 0 0 calc(25 * var(--u)) 0;
  overflow: hidden;
  transform: translateY(-50%);
}
.rt-svc-slide__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------- Décors (couleur pilotée en CSS via mask-image) ------- */
.rt-svc-slide__ribbon,
.rt-svc-slide__doodle {
  position: absolute; pointer-events: none;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.rt-svc-slide__ribbon {
  left: 0; top: 0;
  width: calc(223 * var(--u)); height: calc(717 * var(--u));
  background: var(--rt-cream); opacity: var(--rt-slide-ribbon);
  -webkit-mask-image: url("../images/services/deco-ribbon.svg");
  mask-image: url("../images/services/deco-ribbon.svg");
}
.rt-svc-slide__doodle {
  left: calc(772 * var(--u)); top: 50%; z-index: 0;
  width: calc(1103 * var(--u)); height: calc(1052 * var(--u));
  transform: translateY(-50%);
  background: var(--rt-slide-doodle); opacity: var(--rt-slide-doodle-o);
  -webkit-mask-image: url("../images/services/deco-doodle.svg");
  mask-image: url("../images/services/deco-doodle.svg");
}

/* ------- Déclinaisons de couleur (relevées sur la maquette) ------- */
.rt-svc-slide--green {
  --rt-slide-tone: var(--rt-green);
  --rt-slide-ribbon: .078;
  --rt-slide-doodle: #3D867D;
  --rt-slide-doodle-o: .059;
}
.rt-svc-slide--coral {
  --rt-slide-tone: var(--rt-orange);
  --rt-slide-ribbon: .12;
  --rt-slide-doodle: var(--rt-orange);
  --rt-slide-doodle-o: .09;
}
.rt-svc-slide--mint {
  --rt-slide-tone: var(--rt-mint);
  --rt-slide-ribbon: .12;
  --rt-slide-doodle: var(--rt-mint);
  --rt-slide-doodle-o: .09;
}

/* ==========================================================================
   CONTENU DE SLIDE
   ========================================================================== */
.rt-svc__body {
  position: relative; z-index: 2;
  width: calc(733 * var(--u));
  /* Le bloc n’est pas centré dans la slide : la maquette laisse 81 px en haut
     pour 52 px en bas. Avec align-items:center, une marge haute le descend de
     la moitié de sa valeur — d’où ces 16 px pour ~8 px d’écart. */
  margin: calc(26 * var(--u)) 0 0 calc(970 * var(--u));
  color: var(--rt-green);
}
.rt-svc__eyebrow {
  margin: 0;
  font-weight: 700; font-size: calc(30 * var(--u)); line-height: 1.2;
  color: var(--rt-orange);
}
/* Le titre déborde volontairement de la colonne de texte (la maquette pose
   des lignes jusqu'à ~890 px pour une colonne de 733) : les retours sont
   gérés par les <br> du contenu, pas par la largeur. */
/* Bricolage Grotesque est variable : à 74 px le navigateur choisit un opsz
   élevé, plus resserré, alors que le XD a composé à l'optique par défaut —
   d'où des titres 11 % trop étroits. On fige l'axe (wght repris explicitement,
   font-variation-settings ayant priorité sur font-weight). */
.rt-svc__title,
.rt-svc-hero__title { font-variation-settings: "opsz" 14, "wght" 700; }

.rt-svc__title {
  width: max-content; max-width: calc(920 * var(--u));
  margin: 0;
  font-family: var(--rt-font-title); font-weight: 700;
  font-size: calc(74 * var(--u)); line-height: 1.04;
  letter-spacing: -.015em; color: var(--rt-green);
}
/* Surlignage menthe : la maquette pose une bande de 40 px sur un texte de
   74 px, de −0.34em à +0.20em autour de la ligne de base. Bricolage a une
   ascendante de 0.93em → le fond démarre à 0.93 − 0.34 = 0.59em du haut. */
.rt-svc__title .rt-mark,
.rt-svc-hero__title .rt-mark { background-size: 100% .54em; background-position: 0 .59em; }
/* La maquette déborde le surlignage et le bouton de 7 px à gauche du texte. */
.rt-svc__title .rt-mark {
  background-size: calc(100% + 9 * var(--u)) .54em;
  background-position: calc(-7 * var(--u)) .59em;
}
.rt-svc__lead {
  margin: calc(20 * var(--u)) 0 0;
  font-size: calc(20 * var(--u)); line-height: 1.5;
}
.rt-svc__subtitle {
  margin: calc(32 * var(--u)) 0 0;
  font-weight: 700; font-size: calc(30 * var(--u)); line-height: 1.2;
  color: var(--rt-orange);
}
.rt-svc__list {
  margin: calc(10 * var(--u)) 0 0; padding: 0; list-style: none;
  font-size: calc(20 * var(--u)); line-height: 1.5;
}
.rt-svc__list li { padding-left: 1em; }
/* Alternative vide : la puce reste décorative pour les lecteurs d'écran. */
.rt-svc__list li::before { content: "•" / ""; float: left; margin-left: -1em; }
.rt-svc__note {
  margin: calc(26 * var(--u)) 0 0;
  font-weight: 600; font-size: calc(20 * var(--u)); line-height: 1.5;
}

/* ------- Grille « Les Retournées vous accompagnent » ------- */
/* Deux colonnes, mais un nombre de pictogrammes libre : le back-office en
   autorise un à six. minmax(0, …) et non une largeur fixe — sans le minimum
   à zéro, un libellé long refuse de se replier et déborde de la colonne. */
.rt-svc__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, calc(405 * var(--u))));
  gap: calc(23 * var(--u)) 0;
  margin-top: calc(14 * var(--u));
  margin-left: calc(-10 * var(--u));  /* la colonne d'icônes déborde à gauche du texte */
}
.rt-svc-feature { display: flex; align-items: center; gap: calc(42 * var(--u)); }
.rt-svc-feature__icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: calc(118 * var(--u)); height: calc(118 * var(--u));
}
.rt-svc-feature__icon img { max-width: 100%; max-height: 100%; }
.rt-svc-feature__label {
  font-family: var(--rt-font-title); font-weight: 600;
  font-size: calc(20 * var(--u)); line-height: 1.2;
  color: var(--rt-green);
}
.rt-svc__cta { margin-top: calc(26 * var(--u)); margin-left: calc(-7 * var(--u)); }
/* Bouton de la maquette : 290 × 64. */
.rt-svc__cta .btn {
  min-width: calc(290 * var(--u));
  padding: calc(17 * var(--u)) calc(38 * var(--u));
  font-size: calc(20 * var(--u)); text-align: center;
  touch-action: manipulation;
}

/* ==========================================================================
   MODE ÉPINGLÉ (≥ 1200 px, attribut posé par services.js)
   La pile fait un écran, les slides y sont superposées en absolu et
   ScrollTrigger fait monter chacune par-dessus la précédente au fil du
   défilement (scrub). Aucun geste n'est intercepté : la molette, le pavé,
   la barre de défilement et le clavier gardent leur comportement natif.
   ========================================================================== */
@media (min-width: 1200px) {
  .rt-svc-sectors[data-svc-mode="pinned"] .rt-svc-stack {
    position: relative; z-index: 0;
    height: var(--rt-screen);
    overflow: hidden;
    background: var(--rt-white);
  }
  .rt-svc-sectors[data-svc-mode="pinned"] .rt-svc-slide {
    position: absolute; inset: 0;
    min-height: 0;
    box-shadow: none;
    will-change: transform;
  }
  /* Seules transform et opacité sont animées : le compositeur s'en charge
     sans repeindre. (L'ancien filter: brightness recalculait un rendu
     plein écran à chaque image — d'où les à-coups au défilement rapide.) */
  .rt-svc-sectors[data-svc-mode="pinned"] .rt-svc-slide__inner { will-change: transform, opacity; }
}

@media (prefers-reduced-motion: reduce) {
  .rt-svc-hero__scroll img { animation: none; }
  .rt-svc-bar__btn { transition: none; }
}

/* ==========================================================================
   TABLETTE / MOBILE (< 1200 px)
   Sous 1200 px, --u descend sous 0.62 : reproduire la maquette telle quelle
   rendrait le texte illisible. On passe donc en une colonne, typo en clamp,
   et on abandonne la superposition : sur un téléphone un secteur ne tient
   pas en une hauteur d'écran — le figer reviendrait à tronquer le contenu
   ou à imposer un défilement dans le défilement.
   Seuil repris par services.js, qui n'y construit alors aucune timeline.
   ========================================================================== */
@media (max-width: 1199.98px) {
  .rt-svc-hero,
  .rt-svc-sectors { --rt-bar-min: 64px; --uh: 1px; }

  .rt-svc-hero { height: auto; min-height: min(100svh, 720px); padding: 132px var(--rt-inset) 96px; }
  .rt-svc-hero__card {
    width: 100%; max-width: 640px; min-height: 0; margin-inline: auto;
    padding: 26px 24px 32px; border-radius: 20px;
    /* backdrop-filter est l'un des effets les plus coûteux sur GPU mobile :
       il force une capture + un flou du fond à chaque image de défilement.
       Un aplat translucide donne la même lecture sans le coût. */
    background: rgba(21, 59, 54, .46);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .rt-svc-hero__tag {
    min-width: 0; height: 38px; font-size: 15px;
    background: rgba(255, 255, 255, .22);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .rt-svc-hero__title { margin-top: 22px; font-size: clamp(2rem, 7vw, 3.1rem); }
  .rt-svc-hero__squiggle { width: clamp(150px, 40vw, 240px); }
  .rt-svc-hero__lead { margin-top: 26px; font-size: clamp(1rem, 2.6vw, 1.2rem); }
  .rt-svc-hero__scroll { width: 46px; height: 46px; bottom: 28px; }

  /* Rail horizontal plutôt qu'une grille de deux rangées : le bandeau est
     collant en permanence, deux rangées lui coûtaient ~116 px d'écran sur
     toute la page. En rail il tient en 64 px, les libellés restent entiers
     sur une ligne, et services.js ramène la pastille active au centre au fur
     et à mesure de la lecture. */
  .rt-svc-bar { padding-block: 10px; }
  .rt-svc-bar__list {
    display: flex; flex-wrap: nowrap; align-items: stretch;
    justify-content: flex-start; justify-content: safe center;
    gap: 8px;
    width: 100%; max-width: none; padding-inline: var(--rt-inset);
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .rt-svc-bar__list::-webkit-scrollbar { width: 0; height: 0; }
  .rt-svc-bar__list > li { flex: none; display: flex; scroll-snap-align: center; }
  .rt-svc-bar__btn {
    display: flex; align-items: center; justify-content: center;
    /* 44 px : la cible tactile minimale recommandée. Les pastilles étaient à
       ~35 px, d'où les clics qui « ne prenaient pas ». */
    min-height: 44px; padding: .5em 1.15em;
    font-size: 14px; line-height: 1.2;
    text-align: center; white-space: nowrap;
  }
  .rt-svc-bar__btn:hover { transform: none; box-shadow: none; }
  /* Dégradés de bord : ils signalent que le rail se poursuit. */
  .rt-svc-bar::before,
  .rt-svc-bar::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 24px; z-index: 2;
    pointer-events: none;
  }
  .rt-svc-bar::before { left: 0; background: linear-gradient(90deg, var(--rt-orange), rgba(253, 85, 69, 0)); }
  .rt-svc-bar::after { right: 0; background: linear-gradient(270deg, var(--rt-orange), rgba(253, 85, 69, 0)); }

  .rt-svc-slide { min-height: 0; display: block; box-shadow: none; }
  /* Filet de séparation : plus lisible qu'une ombre portée, et gratuit au
     défilement. */
  .rt-svc-slide + .rt-svc-slide { border-top: 1px solid rgba(21, 59, 54, .08); }
  .rt-svc-slide__inner { display: block; padding: 0 0 clamp(28px, 5vw, 48px); }
  .rt-svc-slide__panel {
    position: relative; inset: auto; width: 100%;
    height: clamp(88px, 15vw, 150px); display: block; overflow: hidden;
  }
  /* Le ruban garde son rapport natif (223 × 717) et déborde du panneau, qui
     le rogne : l'étirer sur une bande basse le rendait méconnaissable. */
  .rt-svc-slide__ribbon { height: 260%; width: auto; aspect-ratio: 223 / 717; }
  .rt-svc-slide__doodle { display: none; }
  /* Photo recadrée en paysage : en portrait elle mangeait à elle seule les
     deux tiers de l'écran. */
  .rt-svc-slide__photo {
    position: relative; left: auto; top: auto; transform: none;
    width: min(80%, 440px); height: auto; aspect-ratio: 4 / 3;
    margin: clamp(-96px, -13vw, -56px) auto 0;
    border-radius: 0 0 18px 0;
  }

  .rt-svc__body {
    width: auto; margin: clamp(24px, 4vw, 40px) auto 0;
    max-width: 640px; padding-inline: var(--rt-inset);
  }
  .rt-svc__eyebrow { font-size: clamp(1rem, 3.2vw, 1.35rem); }
  .rt-svc__title { width: auto; max-width: none; margin-top: 6px; font-size: clamp(1.7rem, 6vw, 2.6rem); }
  .rt-svc__lead,
  .rt-svc__list,
  .rt-svc__note { margin-top: 18px; font-size: 16px; }
  .rt-svc__subtitle { margin-top: 18px; font-size: clamp(1rem, 3.2vw, 1.35rem); }
  .rt-svc__features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin: 14px 0 0; }
  .rt-svc-feature { gap: 10px; }
  .rt-svc-feature__icon { width: 54px; height: 54px; }
  .rt-svc-feature__label { font-size: 14px; line-height: 1.25; }
  .rt-svc__cta { margin-top: 22px; margin-left: 0; }
  .rt-svc__cta .btn { min-width: 0; padding: .85rem 1.9rem; font-size: var(--rt-fs-nav); }
}

/* Sur les écrans les plus étroits, les pictogrammes passent en une colonne :
   à deux, le libellé se coupait en trois lignes sous 380 px. */
@media (max-width: 400px) {
  .rt-svc__features { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* Tablette et petits portables : même mise en page empilée, mais on profite
   de la largeur disponible (photo plus grande, typo plus confortable). */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .rt-svc-slide__photo { width: min(62%, 520px); }
  .rt-svc__body { max-width: 780px; }
  .rt-svc__lead,
  .rt-svc__list,
  .rt-svc__note { font-size: 18px; }
  .rt-svc__features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 30px; }
  .rt-svc-bar__btn { font-size: 15px; padding: .55em 1.3em; }
}