/* ==========================================================================
   LES RETOURNÉES — Thème Bootstrap 5 (maquette XD "HOME – 2")
   Bootstrap gère : grille, navbar, boutons, formulaires, utilitaires.
   Ce fichier : marque (couleurs/typo), overrides Bootstrap, composants custom.
   ========================================================================== */

:root {
  /* Palette marque */
  --rt-green-top:    #194A44;
  --rt-green-bottom: #153B36;
  --rt-green:        #194A44;
  --rt-mint:         #36C791;
  --rt-orange:       #FD5545;
  /* Le corail de marque tombe à 2,8:1 sur crème et 3,2:1 sur blanc : il ne
     tient pas les 4,5:1 exigés pour du texte courant. Cette variante foncée
     (5,5:1 sur crème, 6,4:1 sur blanc) est réservée aux messages et libellés
     lisibles — le corail reste la couleur des aplats et des boutons. */
  --rt-orange-text:  #A32A1E;
  --rt-cream:        #F5EDE3;
  --rt-white:        #FFFFFF;
  --rt-ink:          #194A44;
  --rt-ink-soft:     #4A5F5A;

  --rt-font-title: 'Bricolage Grotesque', system-ui, sans-serif;
  --rt-font-body:  'Source Sans 3', system-ui, sans-serif;

  /* Échelle typo (alignée maquette) */
  --rt-fs-hero:    clamp(2.75rem, 4.7vw, 92px);
  --rt-fs-h2:      clamp(2.05rem, 3.9vw, 58px);
  --rt-fs-h3:      clamp(1.75rem, 2.7vw, 44px);
  --rt-fs-stat:    clamp(3.4rem, 4.8vw, 84px);
  --rt-fs-lead:    clamp(1.1rem, 1.4vw, 20px);
  --rt-fs-body:    18px;
  --rt-fs-nav:     17px;
  --rt-fs-eyebrow: 15px;

  --rt-inset:      clamp(1.5rem, 5vw, 96px);
  --rt-container:  1568px;
  --rt-hero-inset: max(var(--rt-inset), calc((100vw - var(--rt-container)) / 2));
  --rt-section-y:  clamp(72px, 7vw, 128px);
  --rt-pill:       999px;
  --rt-radius:     18px;
  --rt-ease:       .25s cubic-bezier(.4, 0, .2, 1);

  /* Overrides Bootstrap */
  --bs-primary:            #FD5545;
  --bs-primary-rgb:        253, 85, 69;
  --bs-body-color:         #194A44;
  --bs-body-font-family:   var(--rt-font-body);
  --bs-body-font-size:     1.0625rem;
  --bs-border-radius:      var(--rt-radius);
}

/* scrollbar-gutter stable → hero (100vw) et container centré calculent depuis la même largeur = alignés */
html { scrollbar-gutter: stable; }
@media (min-width: 1400px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    max-width: var(--rt-container);
  }
}

body { font-family: var(--rt-font-body); color: var(--rt-ink); }
h1, h2, h3, h4 { font-family: var(--rt-font-title); font-weight: 700; }

/* ------- Boutons (thème Bootstrap) ------- */
.btn { --bs-btn-border-radius: var(--rt-pill); font-family: var(--rt-font-body); font-weight: 700; font-size: var(--rt-fs-nav); padding: .85rem 1.9rem; border: 0; transition: transform var(--rt-ease), box-shadow var(--rt-ease), background var(--rt-ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .18); }
.btn-primary { --bs-btn-bg: var(--rt-orange); --bs-btn-hover-bg: #ec4234; --bs-btn-active-bg: #ec4234; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; }
.btn-cream { background: var(--rt-cream); color: var(--rt-orange); }
.btn-cream:hover { background: #efe4d5; color: var(--rt-orange); }

/* ------- Surlignage marqueur (mint, décalé bas) ------- */
.rt-mark {
  color: inherit;
  background: linear-gradient(var(--rt-mint), var(--rt-mint)) no-repeat;
  background-size: 100% 0.42em;
  background-position: 0 0.68em;
  padding: 0 .04em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ------- En-tête de section partagé ------- */
.rt-section-head { text-align: center; max-width: 900px; margin-inline: auto; }
.rt-section-title { margin: 0; font-size: var(--rt-fs-h2); line-height: 1.1; letter-spacing: -0.01em; color: var(--rt-green); }
.rt-section-title--light { color: var(--rt-white); }
.rt-section-sub { max-width: 640px; margin: 20px auto 0; font-size: var(--rt-fs-lead); line-height: 1.5; }
.rt-eyebrow { font-family: var(--rt-font-body); font-weight: 700; font-size: var(--rt-fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; }
.rt-section { padding-block: var(--rt-section-y); }

/* ------- Reveal au scroll ------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; }
.reveal--left { transform: translateX(-34px); }
.reveal--right { transform: translateX(34px); }
.reveal--left.is-in, .reveal--right.is-in { transform: none; }

/* ------- Marquee (logos) ------- */
.rt-marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.rt-marquee__track { display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 72px); width: max-content; animation: rt-marquee var(--rt-marquee-dur, 42s) linear infinite; }
.rt-marquee--rev .rt-marquee__track { animation-direction: reverse; }
.rt-marquee:hover .rt-marquee__track { animation-play-state: paused; }
@keyframes rt-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .rt-marquee__track { animation: none; }
}

/* ==========================================================================
   HEADER (navbar Bootstrap)
   ========================================================================== */
.rt-navbar { position: absolute; inset: 0 0 auto 0; z-index: 50; padding: 22px var(--rt-hero-inset) 0; }
.rt-navbar--solid { position: sticky; padding: 14px var(--rt-hero-inset); background: var(--rt-green-top); }
/* Logo V2 (main pouce levé + nom) : plus haut que l'ancien bandeau, d'où la
   navbar qui perd un peu de marge haute pour rester à la même hauteur. */
.rt-navbar .navbar-brand { display: block; color: var(--rt-white); }
.rt-navbar__logo { display: block; height: clamp(60px, 5.6vw, 108px); width: auto; }
.rt-nav-link { position: relative; font-family: var(--rt-font-title); font-weight: 500; font-size: var(--rt-fs-nav); color: var(--rt-white) !important; padding: 0 0 10px !important; transition: opacity var(--rt-ease); }
.rt-nav-link:hover { opacity: .8; }
.rt-nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: var(--rt-mint); transition: width var(--rt-ease); }
.rt-nav-link.active::after, .rt-nav-link:hover::after { width: 100%; }
.rt-navbar .navbar-toggler { border: 0; box-shadow: none; padding: 6px 0; display: flex; flex-direction: column; gap: 6px; width: 30px; }
.rt-navbar .navbar-toggler span { display: block; width: 100%; height: 2px; background: var(--rt-white); border-radius: 2px; }
.rt-navbar .navbar-nav { gap: clamp(24px, 2.6vw, 48px); }
.rt-offcanvas { background: var(--rt-green-top); color: var(--rt-white); }
.rt-offcanvas .navbar-nav { gap: 28px; }

/* ------- Sous-menu « Nos services » ------- */
.rt-nav-item--sub { position: relative; }
.rt-nav-item--sub .rt-nav-link { display: inline-flex; align-items: center; gap: 8px; }
.rt-nav-caret { flex: none; margin-top: 1px; transition: transform var(--rt-ease); }
.rt-subnav { list-style: none; margin: 0; padding: 0; }
@media (min-width: 992px) {
  /* Zone tampon au-dessus du panneau : le curseur traverse l'espace sans refermer le menu. */
  .rt-nav-item--sub::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; }
  .rt-subnav {
    position: absolute; top: calc(100% + 18px); left: 50%; z-index: 60;
    min-width: 292px; padding: 12px; transform: translate(-50%, -8px);
    border-radius: var(--rt-radius); background: var(--rt-green-bottom);
    box-shadow: 0 26px 54px rgba(9, 30, 27, .34);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--rt-ease), transform var(--rt-ease), visibility var(--rt-ease);
  }
  .rt-subnav::before { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg); background: var(--rt-green-bottom); border-radius: 3px; }
  .rt-nav-item--sub:hover > .rt-subnav,
  .rt-nav-item--sub:focus-within > .rt-subnav,
  .rt-nav-item--sub.is-open > .rt-subnav { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
  .rt-nav-item--sub:hover .rt-nav-caret,
  .rt-nav-item--sub:focus-within .rt-nav-caret,
  .rt-nav-item--sub.is-open .rt-nav-caret { transform: rotate(180deg); }
  .rt-subnav__link {
    display: block; padding: 11px 18px; border-radius: var(--rt-pill);
    font-family: var(--rt-font-body); font-weight: 700; font-size: 16px; line-height: 1.25;
    color: var(--rt-white); text-decoration: none; white-space: nowrap;
    transition: background var(--rt-ease), color var(--rt-ease);
  }
  .rt-subnav__link:hover, .rt-subnav__link:focus-visible { background: var(--rt-cream); color: var(--rt-orange); }
}
/* Mobile / tablette : le sous-menu est déroulé dans l'offcanvas. */
@media (max-width: 991.98px) {
  .rt-nav-caret { display: none; }
  .rt-subnav { margin: 16px 0 0; padding-left: 18px; border-left: 2px solid rgba(54, 199, 145, .45); display: flex; flex-direction: column; gap: 14px; }
  .rt-subnav__link { font-family: var(--rt-font-body); font-weight: 600; font-size: 16px; color: rgba(255, 255, 255, .82); text-decoration: none; transition: color var(--rt-ease); }
  .rt-subnav__link:hover, .rt-subnav__link:focus-visible { color: var(--rt-mint); }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.rt-hero { position: relative; display: grid; grid-template-columns: 63.85% 36.15%; min-height: 100vh; background: var(--rt-green-bottom); isolation: isolate; }
.rt-hero__panel { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 120px clamp(1rem, 3vw, 52px) 80px var(--rt-hero-inset); background: linear-gradient(180deg, var(--rt-green-top), var(--rt-green-bottom)); overflow: hidden; }
.rt-hero__filigrane { position: absolute; right: -314px; bottom: 0; width: 82%; opacity: .905; pointer-events: none; z-index: 0; }
.rt-hero__media { position: relative; }
.rt-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.rt-hero__content { position: relative; z-index: 1; max-width: 860px; }
.rt-hero__tag { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 18px; margin: 0 0 30px -12px; border-radius: var(--rt-pill); background: rgba(255,255,255,.1); backdrop-filter: blur(12px); font-family: var(--rt-font-title); font-weight: 500; font-size: var(--rt-fs-eyebrow); line-height: 1.3; color: var(--rt-white); }
.rt-hero__title { margin: 0; font-size: var(--rt-fs-hero); line-height: 1.04; letter-spacing: -0.01em; color: var(--rt-white); }
.rt-underline { position: relative; display: inline-block; white-space: nowrap; }
/* Trait pinceau mint du XD (Groupe de masques 17, 419×55) sous « localement ». */
/* Décalage exprimé en em : le trait suit la taille du titre à tous les breakpoints. */
.rt-underline::after { content: ""; position: absolute; left: 0; right: -0.04em; bottom: -0.33em; height: 0.42em; background: url("../images/home/underline-loc.svg") center bottom / 100% 100% no-repeat; }
.rt-hero__text { max-width: 1000%; margin: 0px auto 0; font-size: var(--rt-fs-body); line-height: 1.6; color: var(--rt-white); margin-top: 60px;}
.rt-hero__text p { margin: 0; }
.rt-hero__text p + p { margin-top: 20px; }
.rt-hero__actions { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 40px; }

/* ==========================================================================
   CHIFFRES
   ========================================================================== */
.rt-stats { background: var(--rt-cream); }
.rt-stats__eyebrow { color: var(--rt-orange); }
.rt-stats__title { font-size: var(--rt-fs-h2); line-height: 1.08; letter-spacing: -.01em; color: var(--rt-green); margin: 20px 0 0; }
.rt-stats__lead { font-size: var(--rt-fs-body); line-height: 1.65; color: var(--rt-ink-soft); }
/* Aligne le texte de droite sur la 1re ligne du titre (sous l'eyebrow « À propos »). */
@media (min-width: 992px) { .rt-stats__lead { margin-top: 45px; } }
.rt-stats__divider { border: 0; border-top: 1px solid rgba(25,74,68,.18); margin: clamp(2.5rem,5vw,60px) 0 0; opacity: 1; }
/* La row g-5 est imbriquée dans une colonne (gouttière 12px) : ses marges négatives de
   24px déborderaient du viewport. On neutralise les marges, le padding des colonnes suffit. */
.rt-stats__grid { margin-inline: 0; }
.rt-stat { text-align: center; }
.rt-stat__num { display: inline-flex; align-items: center; justify-content: center; min-width: 210px; padding: 34px 52px; font-family: var(--rt-font-title); font-weight: 700; font-size: var(--rt-fs-stat); line-height: 1; color: var(--rt-orange); background: url("../images/home/stat-ellipse.svg") center / 100% 100% no-repeat; }
.rt-stat__label { display: block; margin-top: 26px; max-width: 240px; margin-inline: auto; font-weight: 700; font-size: var(--rt-fs-body); line-height: 1.35; color: var(--rt-green); }

/* ==========================================================================
   PARTENAIRES
   ========================================================================== */
.rt-partners__title { font-size: clamp(1.25rem, 1.7vw, 26px); line-height: 1.2; color: var(--rt-green); margin: 0; }
.rt-partners__divider { border: 0; border-top: 1px solid rgba(25,74,68,.14); margin: clamp(28px,3vw,46px) 0; opacity: 1; }
.rt-partners__logo { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 64px; }
.rt-partners__logo img { max-height: 58px; max-width: 150px; width: auto; object-fit: contain; }

/* ==========================================================================
   NOS SERVICES
   ========================================================================== */
.rt-services { position: relative; background: linear-gradient(180deg, var(--rt-green-top), var(--rt-green-bottom)); color: var(--rt-white); overflow: hidden; }
.rt-services .rt-section-sub { color: var(--rt-white); }
.rt-services .rt-section-head { padding-bottom: clamp(40px, 5vw, 80px); }
.rt-services__list { display: flex; flex-direction: column; gap: clamp(64px, 6vw, 120px); }
/* Photo et texte partagent la même cellule (chevauchement « magazine » du XD),
   mais la hauteur de la ligne prend le max des deux → pas de chevauchement entre lignes. */
.rt-service { position: relative; display: grid; grid-template-columns: 1fr; align-items: center; container-type: inline-size; }
/* Photo TOUJOURS centrée (identique à chaque ligne), seul le texte alterne gauche/droite.
   Largeur ~49% (comme le XD, ~768px sur container 1568), plafonnée pour ne jamais devenir énorme. */
.rt-service__media { position: relative; grid-area: 1 / 1; width: min(49%, 780px); justify-self: center; }
.rt-service__photo { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rt-radius); box-shadow: 0 30px 70px rgba(0,0,0,.28); position: relative; z-index: 1; }
/* Filigrane organique mint (XD) posé DERRIÈRE la photo, dépasse sur le côté. Opacité pleine (~.89). */
.rt-service__filigrane { position: absolute; z-index: 0; opacity: .89; pointer-events: none; }
.rt-service__filigrane--tr { width: 100%; right: -65%; top: -30%; }
.rt-service__filigrane--br { width: 100%; right: -70%; bottom: -40%; }
.rt-service__text { grid-area: 1 / 1; position: relative; width: 44%; justify-self: start; z-index: 2; }
.rt-service--reverse .rt-service__text { justify-self: end; text-align: right; }
/* En absolute : le sparkle épouse le coin haut du titre sans pousser le texte. */
.rt-service__spark { position: absolute; top: -55px; left: -50px; width: 80px; height: auto; }
.rt-service--reverse .rt-service__spark { left: auto; right: -50px; transform: scaleX(-1); }
.rt-service__title { font-size: var(--rt-fs-h3); line-height: 1.14; color: var(--rt-white); margin: 0; text-shadow: 0 2px 22px rgba(18,46,42,.72); }
/* Le body ne doit JAMAIS passer sur la photo : largeur max = bord gauche de la photo − marge.
   (100cqw − largeur photo) / 2 = distance bord de la cellule → bord de la photo. */
.rt-service__body { margin: 22px 0 0; max-width: calc((100cqw - min(49cqw, 780px)) / 2 - 28px); font-size: var(--rt-fs-body); line-height: 1.62; color: var(--rt-white); }
.rt-service--reverse .rt-service__body { margin-left: auto; }
.rt-service__ctas { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 30px; }
.rt-service--reverse .rt-service__ctas { align-items: flex-end; }

/* ==========================================================================
   LE RÉEMPLOI (carrousel)
   ========================================================================== */
/* Carrousel = Swiper, dans un col-lg-11 (aligné services/chiffres). Slide à 85% → aperçu de la suivante. */
.rt-reemploi { background: var(--rt-white); }
.rt-reemploi__swiper { padding-bottom: 16px; }
/* Slide en flex : la carte s'étire à la hauteur de la slide, et la .swiper-wrapper aligne
   toutes les slides sur la plus haute → toutes les cartes ont la même hauteur. */
.rt-reemploi__swiper .swiper-slide { width: 85%; height: auto; display: flex; }
.rt-reemploi__swiper .swiper-slide > .rt-card-reemploi { width: 100%; }
/* Ratio carte = maquette XD 1345 × 623.6 (≈ 2.16). Le ratio est porté par la PHOTO
   (40% × 1345 = 538) et non par la carte : si le texte a besoin de plus de place —
   ce qui arrive entre 768 et ~1200px — la ligne grandit au lieu de rogner le contenu. */
.rt-card-reemploi { display: grid; grid-template-columns: 40% 60%; width: 100%; border-radius: 24px; overflow: hidden; }
/* Cale en ::before plutôt qu'aspect-ratio : le ratio agit comme une hauteur MINIMALE,
   la photo continue de s'étirer si le panneau de droite est plus haut. */
.rt-card-reemploi__media { position: relative; }
.rt-card-reemploi__media::before { content: ""; display: block; padding-top: calc(623.6 / 538 * 100%); }
.rt-card-reemploi__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Contenu centré verticalement → panneau équilibré (le contenu est plus court que la carte). */
.rt-card-reemploi__panel { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(32px,3.4vw,52px); background: var(--rt-card-bg); color: var(--rt-card-fg); }
/* Déclinaisons de couleur du panneau (choix dans le back-office). Le menthe
   est trop clair pour du texte blanc : on y écrit en vert sapin. */
.rt-card-reemploi--coral { --rt-card-bg: var(--rt-orange); --rt-card-fg: var(--rt-white); --rt-card-num: var(--rt-cream); --rt-card-body: rgba(255,255,255,.92); }
.rt-card-reemploi--green { --rt-card-bg: var(--rt-green); --rt-card-fg: var(--rt-white); --rt-card-num: var(--rt-cream); --rt-card-body: rgba(255,255,255,.92); }
.rt-card-reemploi--mint  { --rt-card-bg: var(--rt-mint); --rt-card-fg: var(--rt-green); --rt-card-num: var(--rt-green); --rt-card-body: rgba(25,74,68,.92); }
.rt-card-reemploi__head { position: relative; display: flex; align-items: flex-start; gap: 22px; }
.rt-card-reemploi__num { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 108px; height: 88px; }
.rt-card-reemploi__num img { position: absolute; inset: 0; width: 100%; height: 100%; }
.rt-card-reemploi__num em { position: relative; font-style: normal; font-family: var(--rt-font-title); font-weight: 700; font-size: 42px; color: var(--rt-card-num); }
.rt-card-reemploi__title { position: relative; flex: 0 1 auto; margin: 0; padding-top: 8px; font-size: clamp(1.5rem,2vw,30px); line-height: 1.12; color: var(--rt-card-fg); }
/* La 1re ligne du titre est entourée d'un span qui épouse sa largeur → le sparkle en absolute
   se cale au bout de la 1re ligne, tout en restant ajustable au pixel via top/left. */
.rt-card-reemploi__titleline { position: relative; }
.rt-card-reemploi__spark { position: absolute; left: 100%; top: -35px; margin-left: -15px; width: 75px; pointer-events: none; }
.rt-card-reemploi__body { margin: 26px 0 30px; font-size: 15.5px; line-height: 1.55; color: var(--rt-card-body); }
.rt-card-reemploi .btn { align-self: flex-start; }
.rt-reemploi__controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 34px; }
.rt-reemploi__arrow { flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--rt-green); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--rt-ease), transform var(--rt-ease), opacity var(--rt-ease); }
.rt-reemploi__arrow:hover:not(.swiper-button-disabled) { background: var(--rt-green-bottom); transform: translateY(-2px); }
.rt-reemploi__arrow.swiper-button-disabled { opacity: .3; cursor: default; pointer-events: none; }
/* Pagination Swiper restylée aux couleurs marque (surcharge le position:absolute/width:100% de Swiper) */
.rt-reemploi .rt-reemploi__pagination { position: static; width: auto; margin: 0; display: flex; justify-content: center; align-items: center; gap: 10px; }
.rt-reemploi__pagination .swiper-pagination-bullet { width: 9px; height: 9px; margin: 0; border-radius: 50%; background: rgba(25,74,68,.2); opacity: 1; cursor: pointer; transition: background var(--rt-ease), transform var(--rt-ease); }
.rt-reemploi__pagination .swiper-pagination-bullet:hover { background: rgba(25,74,68,.4); }
.rt-reemploi__pagination .swiper-pagination-bullet-active { background: var(--rt-orange); transform: scale(1.3); }

/* ==========================================================================
   ÉQUIPE
   ========================================================================== */
.rt-team { position: relative; background: var(--rt-cream); overflow: hidden; }
.rt-team__filigrane { position: absolute; z-index: 0; opacity: .5; pointer-events: none; }
/* bboxes XD (container 1568) : gauche -412→468 (880w) déborde à gauche ; droite 1090→1686 (596w) déborde à droite */
.rt-team__filigrane--left { left: -37%; top: 34%; width: 56%; }
.rt-team__filigrane--right { right: -7.5%; top: 56%; width: 38%; }
/* Bascule Équipe opérationnelle / Conseil d'administration (deux CTA). */
.rt-team__switch { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: clamp(40px, 4vw, 62px); }
.rt-team__tab {
  border: 1px solid rgba(25, 74, 68, .16); border-radius: var(--rt-pill);
  padding: .85rem 1.9rem; background: var(--rt-white); color: var(--rt-green);
  font-family: var(--rt-font-body); font-weight: 700; font-size: var(--rt-fs-nav); line-height: 1.2;
  cursor: pointer; transition: background var(--rt-ease), color var(--rt-ease), border-color var(--rt-ease), transform var(--rt-ease), box-shadow var(--rt-ease);
}
.rt-team__tab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(25, 74, 68, .12); }
.rt-team__tab.is-active { background: var(--rt-orange); border-color: var(--rt-orange); color: var(--rt-white); }
.rt-team__tab.is-active:hover { box-shadow: 0 10px 26px rgba(253, 85, 69, .28); }

.rt-team__panel { position: relative; z-index: 1; margin-top: clamp(38px, 4vw, 60px); }
.rt-team__panel[hidden] { display: none; }
/* Titre de catégorie : libellé, puis filet plein largeur en dessous (maquette XD). */
.rt-team__cat { max-width: 1286px; margin-inline: auto; }
.rt-team__eyebrow { display: block; font-size: clamp(15px, 1.1vw, 19px); letter-spacing: .05em; color: var(--rt-orange); }
.rt-team__rule { display: block; height: 1px; margin-top: 26px; background: rgba(253, 85, 69, .5); }

/* 3 colonnes, colonne du milieu décalée vers le bas (maquette XD). */
.rt-team__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(34px, 4.2vw, 66px) clamp(20px, 3.4vw, 52px); max-width: 1286px; margin: clamp(38px, 4vw, 62px) auto 0; }
.rt-team__grid > :nth-child(3n + 2) { margin-top: clamp(28px, 5.8vw, 90px); }
.rt-team__more { margin-top: clamp(48px, 5.4vw, 84px); }

.rt-team-card { position: relative; z-index: 1; background: var(--rt-white); border-radius: 20px; padding: 8.2% 8.2% 4%; box-shadow: 0 22px 54px rgba(25,74,68,.09); }
.rt-team-card__photo img { display: block; width: 100%; height: auto; }
/* Repli sans portrait : les fiches d'équipe se complètent au fil du temps
   depuis le back-office, et une image manquante ne doit pas creuser un trou
   dans la grille. Le carré reprend la proportion des photos de la maquette. */
.rt-team-card__initials {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; border-radius: 14px;
  /* Menthe très diluée plutôt qu'en aplat : tant que l'association n'a pas
     déposé ses portraits, dix carrés pleins écraseraient la section. Le repli
     doit se lire comme une place en attente, pas comme un parti pris. */
  background: rgba(54, 199, 145, .18);
  font-family: var(--rt-font-title); font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1;
  color: var(--rt-green); opacity: .55;
}
.rt-team-card__body { padding: 15px 0 0; text-align: center; }
.rt-team-card__name { display: block; font-family: var(--rt-font-title); font-weight: 700; font-size: clamp(1.2rem,1.7vw,27px); line-height: 1.2; color: var(--rt-green); }
.rt-team-card__role { display: block; margin-top: 10px; font-size: clamp(15px, 1.15vw, 19px); color: var(--rt-ink-soft); }
.rt-team-card__group { display: block; margin-top: 8px; font-style: italic; font-size: clamp(15px, 1.15vw, 19px); color: var(--rt-orange); }
.rt-team-card__thumb { display: block; width: clamp(42px, 3.7vw, 58px); height: auto; margin: 18px auto 0; }

/* ==========================================================================
   ACTUALITÉS
   ========================================================================== */
.rt-news { background: var(--rt-white); }
.rt-news-card { position: relative; display: flex; min-height: 440px; border-radius: 24px; overflow: hidden; }
.rt-news-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.rt-news-card:hover img { transform: scale(1.05); }
.rt-news-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.05) 55%); }
.rt-news-card__body { position: relative; z-index: 1; margin-top: auto; padding: clamp(22px,2vw,30px); color: var(--rt-white); }
.rt-news-card__title { display: block; font-family: var(--rt-font-title); font-weight: 700; font-size: clamp(1.15rem,1.5vw,23px); }
.rt-news-card__date { display: block; margin-top: 6px; font-weight: 600; font-size: 15px; opacity: .92; }
/* Carte cliquable en entier : le lien du titre s'étire sur toute la carte
   (pseudo-élément au-dessus du dégradé). Couleur et soulignement hérités,
   pour ne pas voir surgir le bleu Bootstrap. */
.rt-news-card__link { color: inherit; text-decoration: none; }
.rt-news-card__link:hover, .rt-news-card__link:focus { color: inherit; text-decoration: none; }
.rt-news-card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.rt-news-card { cursor: pointer; }
.rt-news-card:focus-within { outline: 3px solid var(--rt-mint); outline-offset: 3px; }
.rt-news-card__link:focus-visible { outline: none; }

/* ------- Newsletter ------- */
.rt-newsletter { position: relative; overflow: hidden; border-radius: 30px; background: linear-gradient(135deg, var(--rt-green-top), var(--rt-green-bottom)); color: var(--rt-white); }
.rt-newsletter__swoosh { position: absolute; left: -12%; top: -8%; width: 33%; opacity: .088; z-index: 0; pointer-events: none; }
.rt-newsletter__title { font-family: var(--rt-font-title); font-weight: 700; font-size: clamp(1.35rem,1.9vw,28px); line-height: 1.16; margin: 0; }
.rt-newsletter__sub { font-family: var(--rt-font-title); font-weight: 600; font-size: 18px; color: var(--rt-mint); margin: 10px 0 0; }
.rt-newsletter__socials { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.rt-newsletter__socials a { display: inline-flex; transition: transform .2s ease; }
.rt-newsletter__socials a img { width: 46px; height: 46px; display: block; }
.rt-newsletter__socials a:hover { transform: translateY(-3px); }
.rt-newsletter__arrow-icons { width: 58px; height: auto; margin-left: 12px; transform: rotate(6deg); }
.rt-newsletter__label { position: relative; display: inline-flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; font-family: var(--rt-font-title); font-weight: 700; font-size: 22px; color: var(--rt-mint); }
.rt-newsletter__arrow { width: 54px; height: auto; margin-top: -4px; }
.rt-newsletter__input { height: 54px; padding: 0 22px; border: 0; border-radius: var(--rt-pill); background: var(--rt-white); font-size: 16px; color: var(--rt-ink); }
.rt-newsletter__note { margin: 16px 0 0; font-style: italic; font-size: 13px; color: rgba(255,255,255,.6); }

/* ==========================================================================
   CTA FINAL (blocs libres et page Nos services)
   ========================================================================== */
.rt-cta { position: relative; isolation: isolate; padding-block: clamp(90px,12vw,180px); overflow: hidden; }
.rt-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.rt-cta__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(21,59,54,.82), rgba(21,59,54,.9)); }
.rt-cta__content { max-width: 920px; margin-inline: auto; text-align: center; color: var(--rt-white); }
.rt-cta__title { font-size: var(--rt-fs-h2); line-height: 1.1; color: var(--rt-white); margin: 0; }
.rt-cta__text { max-width: 720px; margin: 22px auto 0; font-size: var(--rt-fs-lead); line-height: 1.55; color: rgba(255,255,255,.85); }

/* ==========================================================================
   PASSER À L'ACTION (accueil) : bandeau biseauté + deux volets sur photo
   ========================================================================== */
.rt-action { position: relative; isolation: isolate; color: var(--rt-white); overflow: hidden; }
/* Le bandeau vert mord sur la photo : sa pointe basse est à droite du centre,
   comme sur la maquette. Le chevauchement (marge négative) évite un liseré. */
.rt-action__head {
  position: relative; z-index: 1;
  padding: clamp(56px, 6vw, 96px) 0 clamp(70px, 8vw, 150px);
  margin-bottom: calc(-1 * clamp(40px, 5vw, 92px));
  background: var(--rt-green-top); text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - clamp(28px, 3.6vw, 66px)), 58% 100%, 0 calc(100% - clamp(24px, 3vw, 56px)));
}
.rt-action__title { margin: 0; font-size: var(--rt-fs-h2); line-height: 1.1; color: var(--rt-white); }
/* Dans ce bloc le surligneur couvre les mots en entier (maquette V2), et il
   est corail sur le titre. */
.rt-action .rt-mark { background-size: 100% 100%; background-position: 0 0; padding: 0 .12em; }
.rt-action__title .rt-mark { background-image: linear-gradient(var(--rt-orange), var(--rt-orange)); }
.rt-action__lead { margin: 18px auto 0; max-width: 820px; font-family: var(--rt-font-title); font-weight: 600; font-size: clamp(1.3rem, 2.1vw, 34px); line-height: 1.25; color: var(--rt-white); }
.rt-action__lead p { margin: 0; }
.rt-action__body { position: relative; padding: clamp(96px, 11vw, 190px) 0 clamp(64px, 6vw, 100px); text-align: center; }
.rt-action__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.rt-action__overlay { position: absolute; inset: 0; z-index: -1; background: rgba(21, 59, 54, .62); }
.rt-action__item { max-width: 980px; margin-inline: auto; }
.rt-action__question { margin: 0; font-family: var(--rt-font-title); font-weight: 600; font-size: clamp(1.35rem, 1.9vw, 32px); line-height: 1.35; color: var(--rt-white); }
.rt-action__text { margin: 14px auto 0; max-width: 760px; font-size: var(--rt-fs-lead); line-height: 1.5; color: rgba(255,255,255,.88); }
.rt-action__text p { margin: 0; }
.rt-action__item .btn { margin-top: 26px; }
.rt-action__divider { width: min(100%, 1180px); margin: clamp(40px, 4.5vw, 72px) auto; border: 0; border-top: 1px solid rgba(255,255,255,.55); opacity: 1; }

/* ------- Fenêtre « agir en tant que citoyen » ------- */
.rt-modal .modal-dialog { max-width: 620px; }
.rt-modal__content {
  position: relative; border: 0; border-radius: var(--rt-radius);
  padding: clamp(48px, 5vw, 64px) clamp(24px, 4vw, 56px) clamp(36px, 4vw, 52px);
  background: linear-gradient(180deg, var(--rt-green-top), var(--rt-green-bottom));
  color: var(--rt-white); text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.rt-modal__close {
  position: absolute; top: 14px; right: 22px; padding: 4px 8px; border: 0; background: none;
  font-family: var(--rt-font-title); font-weight: 700; font-size: 30px; line-height: 1; color: var(--rt-mint);
  transition: transform var(--rt-ease);
}
.rt-modal__close:hover { transform: scale(1.15); }
.rt-modal__text { margin: 0 auto 22px; max-width: 420px; font-style: italic; font-size: 20px; line-height: 1.3; color: rgba(255,255,255,.92); }
.rt-modal__divider { width: 86%; margin: 30px auto; border: 0; border-top: 1px solid rgba(255,255,255,.5); opacity: 1; }

/* ==========================================================================
   LOGO (entre le bloc d'action et le footer)
   ========================================================================== */
.rt-prefooter { background: var(--rt-white); padding: clamp(40px, 3.3vw, 62px) 0 clamp(40px, 3.3vw, 62px); }
.rt-prefooter__brand { display: block; width: fit-content; margin-inline: auto; color: var(--rt-green); }
.rt-prefooter__brand .rt-logo { display: block; width: clamp(200px, 15vw, 290px); height: auto; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.rt-footer { background: var(--rt-green-top); color: var(--rt-white); }
.rt-footer > .container { min-height: 78px; padding-block: 18px; }
.rt-footer__copy { font-family: var(--rt-font-title); font-weight: 500; font-size: clamp(15px, 1.1vw, 18px); opacity: .82; }
.rt-footer__nav { column-gap: clamp(20px, 2.6vw, 48px); }
.rt-footer__nav a { font-family: var(--rt-font-title); font-weight: 500; font-size: clamp(15px, 1.1vw, 18px); color: var(--rt-white); text-decoration: none; opacity: .9; transition: opacity var(--rt-ease); }
.rt-footer__nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
  .rt-navbar .navbar-nav { gap: 24px; }
  /* width:fit-content → le soulignement mint épouse le libellé au lieu de toute la colonne. */
  .rt-offcanvas .rt-nav-link { width: fit-content; color: var(--rt-white) !important; font-size: 20px; }
}
/* Mobile / tablette : pas de photo dans le hero — le panneau vert occupe toute la largeur. */
@media (max-width: 991.98px) {
  .rt-hero { grid-template-columns: 1fr; min-height: auto; }
  .rt-hero__media { display: none; }
  .rt-hero__panel { min-height: min(100svh, 780px); padding: 132px var(--rt-hero-inset) 72px; }
  .rt-hero__filigrane { right: -22%; width: 105%; opacity: .55; }
  .rt-hero__text { margin-top: 36px; }
}
/* Le chevauchement « magazine » n'est lisible qu'en grand écran : en dessous on empile
   (photo au-dessus, texte en dessous) — sinon le texte passe sur la photo (illisible). */
@media (max-width: 991.98px) {
  .rt-service { display: flex; flex-direction: column; align-items: stretch; gap: 1.75rem; }
  .rt-service__media { width: 100%; order: -1; }
  .rt-service__text { width: 100%; text-align: left; }
  .rt-service__body { max-width: 36rem; }
  .rt-service__title, .rt-service__body { text-shadow: none; }
  .rt-service--reverse .rt-service__text { text-align: left; }
  .rt-service--reverse .rt-service__body { margin-left: 0; }
  .rt-service--reverse .rt-service__ctas { align-items: flex-start; }
  /* Une fois la carte empilée, le sparkle (calé en absolu au-dessus du titre) n'a plus
     de place : il retombe soit sur la photo, soit sur le titre. On ne l'affiche pas. */
  .rt-service__spark { display: none; }
}
/* Tablette : la carte réemploi est en 2 colonnes mais le panneau de droite est étroit
   (~290px utiles). Avec le chiffre sur la même ligne, il ne restait que 160px au titre
   → 4 lignes, et le sparkle sortait de la carte (rogné par l'overflow). On empile le
   chiffre au-dessus du titre, qui récupère toute la largeur. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .rt-card-reemploi__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .rt-card-reemploi__num { width: 84px; height: 68px; }
  .rt-card-reemploi__num em { font-size: 32px; }
  .rt-card-reemploi__title { padding-top: 0; font-size: 1.2rem; }
  .rt-card-reemploi__spark { top: -24px; margin-left: -10px; width: 52px; }
}
/* Équipe : 3 colonnes ne tiennent plus — 2 puis 1, et on supprime le décalage vertical. */
@media (max-width: 991.98px) {
  /* Le filet séparait l'en-tête sur 2 colonnes des chiffres ; une fois la mise en page
     empilée il ne sépare plus rien et alourdit le bloc. */
  .rt-stats__divider { display: none; }
  .rt-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
  .rt-team__grid > :nth-child(3n + 2) { margin-top: 0; }
  .rt-team__grid > :nth-child(2n) { margin-top: clamp(24px, 5vw, 60px); }
  .rt-team__cat { max-width: 760px; }
}
@media (max-width: 767.98px) {
  /* Photo à ratio fixe (identique sur les 5 slides) + panneau en 1fr centré : l'écart de
     longueur des textes est absorbé par le padding haut/bas du bloc orange. */
  .rt-card-reemploi { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .rt-card-reemploi__media::before { padding-top: 72%; }
  /* Pas d'aperçu de la slide suivante en mobile : chaque carte occupe toute la largeur. */
  .rt-reemploi__swiper .swiper-slide { width: 100%; }
  /* Six logos sur une ligne fluide donnent des rangées bancales : grille 3 × 2. */
  /* Le footer passe sur deux lignes à cette largeur : on centre plutôt que d'aligner à gauche. */
  .rt-footer > .container { justify-content: center; text-align: center; }
  .rt-footer__nav { justify-content: center; }
}
@media (max-width: 575.98px) {
  /* 12px de gouttière Bootstrap, c'est trop serré pour des titres de cette taille. */
  .container { padding-inline: 20px; }
  .rt-hero__actions { flex-direction: column; align-items: stretch; }
  .rt-hero__actions .btn { width: 100%; }
  .rt-hero__tag { flex-direction: column; align-items: flex-start; gap: 2px; margin-left: 0; }
  .rt-hero__tag-sep { display: none; }
  .rt-team__grid { grid-template-columns: minmax(0, 1fr); max-width: 360px; row-gap: 26px; }
  .rt-team__grid > :nth-child(2n) { margin-top: 0; }
  .rt-team__cat { max-width: none; }
  .rt-team__switch .rt-team__tab { width: 100%; }
  /* Titre à droite de la pastille (et non dessous) : on gagne la hauteur du chiffre.
     Pastille et titre réduits pour laisser au titre une largeur exploitable. */
  .rt-card-reemploi__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .rt-card-reemploi__num { width: 84px; height: 68px; }
  .rt-card-reemploi__num em { font-size: 32px; }
  .rt-card-reemploi__title { padding-top: 0; font-size: 1.4rem; }
  /* Sparkles décoratifs conservés en mobile, simplement remis à l'échelle du titre. */
  .rt-card-reemploi__spark { top: -24px; margin-left: -10px; width: 52px; }
}

/* ==========================================================================
   MESSAGES FLASH
   Bandeau de confirmation sous la navigation (envoi du formulaire de
   contact, aujourd'hui le seul émetteur). Le gabarit d'origine réutilisait
   les classes .alert de Bootstrap, dont le bleu et le rouge n'ont rien à
   voir avec la charte.
   ========================================================================== */
.rt-flash {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px var(--rt-inset);
  font-family: var(--rt-font-body); font-weight: 600; font-size: 16.5px; line-height: 1.45;
  text-align: center;
}
.rt-flash__icon { display: flex; flex: none; }
.rt-flash--success { background: var(--rt-mint); color: var(--rt-green); }
/* Fond soutenu plutôt que teinté : sur crème, le corail seul tombait à
   3,2:1 pour le texte — insuffisant. */
.rt-flash--error { background: var(--rt-orange-text); color: var(--rt-white); }

/* ------- Texte mis en forme depuis le back-office (filtre Twig `rich`) -------
   Le conteneur garde sa taille et sa couleur de texte ; on ne règle ici que
   le rythme vertical et les éléments que l'éditeur peut produire. */
.rt-rich > :first-child { margin-top: 0; }
.rt-rich > :last-child { margin-bottom: 0; }
.rt-rich p, .rt-rich ul, .rt-rich ol, .rt-rich blockquote, .rt-rich table, .rt-rich figure { margin: 0 0 .9em; }
.rt-rich h2, .rt-rich h3, .rt-rich h4 { margin: 1.4em 0 .5em; line-height: 1.2; color: inherit; }
.rt-rich h2 { font-size: var(--rt-fs-h3); }
.rt-rich h3 { font-size: clamp(1.3rem, 1.8vw, 28px); }
.rt-rich h4 { font-size: clamp(1.1rem, 1.4vw, 22px); }
.rt-rich a { color: var(--rt-orange-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rt-rich a:hover { color: var(--rt-orange); }
.rt-rich ul, .rt-rich ol { padding-left: 1.3em; }
.rt-rich ul li::marker { color: var(--rt-mint); }
.rt-rich li + li { margin-top: .25em; }
.rt-rich blockquote { padding: 4px 0 4px 20px; border-left: 4px solid var(--rt-mint); font-family: var(--rt-font-title); font-weight: 500; font-size: 1.1em; }
.rt-rich img { max-width: 100%; height: auto; border-radius: var(--rt-radius); }
.rt-rich figure.image { display: table; margin-inline: auto; }
.rt-rich figure.image figcaption { display: table-caption; caption-side: bottom; margin-top: 8px; font-size: .9em; color: var(--rt-ink-soft); text-align: center; }
.rt-rich .align-left { float: left; margin: 0 1.5em 1em 0; max-width: 50%; }
.rt-rich .align-right { float: right; margin: 0 0 1em 1.5em; max-width: 50%; }
.rt-rich .align-center { display: block; margin-inline: auto; }
.rt-rich .text-center { text-align: center; }
.rt-rich hr { border: 0; border-top: 1px solid rgba(25, 74, 68, .18); margin: 2em 0; opacity: 1; }
.rt-rich table { width: 100%; border-collapse: collapse; font-size: .95em; }
.rt-rich th, .rt-rich td { padding: 10px 14px; border-bottom: 1px solid rgba(25, 74, 68, .14); text-align: left; vertical-align: top; }
.rt-rich th { font-weight: 700; }
.rt-rich::after { content: ""; display: block; clear: both; }
/* Sur fond sombre, liens et filets suivent la couleur du texte. */
.rt-block--green .rt-rich a, .rt-block--coral .rt-rich a, .rt-cta .rt-rich a, .rt-page-hero .rt-rich a, .rt-hero .rt-rich a, .rt-svc-hero .rt-rich a { color: inherit; }
.rt-block--green .rt-rich th, .rt-block--green .rt-rich td, .rt-block--coral .rt-rich th, .rt-block--coral .rt-rich td { border-color: rgba(255, 255, 255, .3); }