/* path: /assets/css/services.css */
/* ===== SECTION: Services — Minimal Luxe "MUSEUM" (no texture, no drape) ===== */

#services{
  position: relative;
  color: var(--offwhite);
  padding-top: 180px !important;
  padding-bottom: 16px;
  overflow: clip;
  background: transparent;                  /* fond propre */
}

/* Mobile : encore plus d'espace pour séparer du header */
@media (max-width: 768px) {
  #services {
    padding-top: 180px !important;
  }
}

/* --- kill all previous overlays/drapes --- */
#services::before,
#services::after{
  content: none !important;                 /* retire tout voile hérité */
}

/* === Background presets (opt-in) =================================== */
/* 1) plain (recommandé) : rien, pur et net */
#services[data-bg="plain"]::before,
#services[data-bg="plain"]::after{ content:none !important; }

/* 2) halo : très léger halo cuivre au sommet (6%), sans film sombre */
#services[data-bg="halo"]::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:320px; pointer-events:none;
  background: radial-gradient(1100px 320px at 50% 0%, rgba(184,115,51,.06), transparent 62%);
}

/* === Contenu ======================================================= */
#services .services-inner{ max-width:1140px; margin-inline:auto; }

/* En-tête éditorial (aucune ombre/texture) */
#services .services-head{
  display:grid; gap:10px; margin-bottom:30px; padding-inline:6px; position:relative;
}
#services .kicker{
  opacity:.55; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem;
}
#services .title{
  margin:0; font-weight:800; letter-spacing:.005em; line-height:1.12;
  font-size:clamp(30px,3.4vw,40px); color:rgba(250,250,250,.96);
}
#services .lead{
  margin:0; max-width:66ch; line-height:1.9; color:rgba(232,232,232,.84);
}

/* Hairline cuivre sous le H2 (très fine, sans glow) */
#services .services-head::after{
  content:""; position:absolute; left:6px; right:6px; bottom:-10px; height:1px; pointer-events:none;
  background: linear-gradient(90deg,
    rgba(184,115,51,0) 0%,
    rgba(184,115,51,.30) 18%,
    rgba(184,115,51,.45) 50%,
    rgba(184,115,51,.30) 82%,
    rgba(184,115,51,0) 100%);
  opacity:.9;
}

/* Switch FR/EN discret (inchangé) */
#services .lang-switch{ display:inline-flex; gap:12px; align-items:center; margin-top:6px; }
#services .lang-btn{
  appearance:none; background:transparent; border:0; color:rgba(245,245,245,.92);
  padding:4px 8px; border-radius:8px; cursor:pointer; font:inherit;
  transition: color 160ms ease, transform 160ms ease;
}
#services .lang-btn[aria-pressed="true"]{ color:var(--copper); }
#services .lang-btn:hover, #services .lang-btn:focus-visible{ color:var(--copper); outline:none; transform:translateY(-1px); }

/* i18n local (FR par défaut) */
#services .i18n-fr{ display:inline; }  #services .i18n-en{ display:none; }
#services[data-lang="en"] .i18n-fr{ display:none; }  #services[data-lang="en"] .i18n-en{ display:inline; }

/* Liste 1→2 colonnes, souffle généreux */
#services .services-list{
  display:grid; gap:40px; margin-top:38px; counter-reset:svcnum;
}
@media (min-width:1024px){
  #services .services-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:52px; row-gap:40px;
  }
}

/* Item minimal (zéro carte, zéro ombre) + séparateur neutre */
#services .service-item{
  counter-increment:svcnum;
  padding:20px 2px 0 2px;
  border-top:1px solid rgba(255,255,255,.08);    /* neutre au repos */
  outline:0; transition:border-color 140ms ease;
}
#services .service-item:hover,
#services .service-item:focus-within{
  border-top-color: rgba(184,115,51,.40);        /* cuivre au hover/focus */
}

/* Titre + numérotation (accent cuivre seulement au hover) */
#services .service-title{
  margin:0; font-weight:700; letter-spacing:.01em; line-height:1.25;
  display:inline-block; font-size:clamp(20px,1.8vw,22px);
  color:rgba(250,250,250,.96); font-variant-numeric:tabular-nums;
  transition: color 140ms ease;
}
#services .service-title::before{
  content:counter(svcnum, decimal-leading-zero) " — ";
  color:rgba(255,255,255,.42); margin-right:.45em; letter-spacing:.02em;
}
#services .service-title:hover{ color:var(--copper); }

/* Description confortable, sans gris sale */
#services .service-desc{
  margin:10px 0 0 0; color:rgba(235,235,235,.82); line-height:1.9; max-width:64ch;
}

/* CTA texte only */
#services .services-cta{ margin-top:34px; padding-inline:6px; }
#services .services-cta a{
  color:rgba(245,245,245,.92); text-decoration:none; display:inline-block; padding:6px 2px; border-radius:8px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
#services .services-cta a:hover, #services .services-cta a:focus-visible{
  color:var(--copper); outline:none; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:.04em;
}

/* Focus clavier cuivre */
#services .service-item:focus-within{
  outline:2px solid rgba(184,115,51,.60); outline-offset:6px; border-radius:12px;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  #services *:not(#intro-cover):not(#intro-cover *),
  #services *::before:not(#intro-cover *::before),
  #services *::after:not(#intro-cover *::after){
    transition:none !important; animation:none !important; transform:none !important;
  }
}
/* ==== PREMIUM PATCH (plus sec, plus luxe) ==== */

/* 1) Fond: 100% clean (plus aucun film) */
#services { background: transparent !important; }
#services::before, #services::after { content: none !important; }

/* 2) Titre + lead plus haut de gamme */
#services .title { font-weight: 800; letter-spacing: 0.002em; color: rgba(255,255,255,.96); }
#services .lead  { color: rgba(236,236,236,.86); }

/* 3) Hairline header: plus fine et plus courte (évite la barre horizontale) */
#services .services-head::after{
  left:6px; right:60%; bottom:-12px; height:1px;
  background: linear-gradient(90deg, rgba(184,115,51,.42), rgba(184,115,51,0));
  opacity:.85;
}

/* 4) Grille: souffle ↑ */
#services .services-list{ gap: 48px; }
@media (min-width:1024px){
  #services .services-list{ column-gap:64px; row-gap:48px; }
}

/* 5) Séparateurs: hairline fantôme, cuivre uniquement au focus/hover */
#services .service-item{
  border-top: 1px solid rgba(255,255,255,.06);   /* plus discret */
  padding-top: 22px;
}
#services .service-item:hover,
#services .service-item:focus-within{
  border-top-color: rgba(184,115,51,.34);
}

/* 6) Titres: densité + équilibre */
#services .service-title{
  font-weight: 700;
  font-size: clamp(20px, 1.7vw, 22px);
  color: rgba(255,255,255,.94);
}
#services .service-title::before{ color: rgba(255,255,255,.38); }

/* 7) Texte: gris propre (pas “sale”), interlignage confortable */
#services .service-desc{ color: rgba(238,238,238,.84); line-height: 1.92; }

/* 8) CTA bas de section: signal faible */
#services .services-cta a{ color: rgba(240,240,240,.88); }
#services .services-cta a:hover, #services .services-cta a:focus-visible{ color: var(--copper); }

/* 9) Motion safety: déjà géré, on n’ajoute rien */
/* 0) Plain total (sécurité) */
#services[data-bg="plain"]::before,
#services[data-bg="plain"]::after { content: none !important; }

/* 1) Rythme premium */
#services { 
  padding-top: 180px;
  padding-bottom: 108px;
}
#services .services-inner { max-width: 1200px; }
#services .services-list { row-gap: 56px; }
@media (min-width:1024px){
  #services .services-list { column-gap: 72px; }
}

/* Mobile : encore plus d'espace */
@media (max-width: 768px) {
  #services {
    padding-top: 180px !important;
  }
}

/* 2) Titre / lead */
#services .title { letter-spacing: .0015em; color: rgba(255,255,255,.97); }
#services .lead  { color: rgba(236,236,236,.86); margin-top: 6px; }

/* 3) Hairline header très court (à gauche seulement) */
#services .services-head{ position: relative; padding-bottom: 16px; }
#services .services-head::after{
  content:""; position:absolute; bottom:0; left:6px; width:160px; height:1px;
  background: linear-gradient(90deg, rgba(184,115,51,.42), rgba(184,115,51,0));
  opacity:.85; pointer-events:none;
}

/* 4) Items: hairline fantôme + survol cuivre, espacement contrôlé */
#services .service-item{ border-top: 1px solid rgba(255,255,255,.06); padding-top: 22px; }
#services .service-item:hover,
#services .service-item:focus-within{ border-top-color: rgba(184,115,51,.32); }

/* 5) Numérotation / titre */
#services .service-title{ color: rgba(252,252,252,.95); font-size: clamp(20px,1.6vw,22px); }
#services .service-title::before{ color: rgba(255,255,255,.38); }
#services .service-title:hover{ color: var(--copper); }

/* 6) Texte (corps) — gris propre + ligne de lecture */
#services .service-desc{ color: rgba(235,235,235,.86); line-height: 1.92; max-width: 62ch; margin-top: 10px; }

/* 7) Col-rule (desktop) encore plus subtile */
@media (min-width:1024px){
  #services .services-list{ position: relative; }
  #services .services-list::before{
    content:""; position:absolute; top:-12px; bottom:-12px; left:50%; width:1px; transform:translateX(-.5px);
    background: linear-gradient(180deg, rgba(184,115,51,0), rgba(184,115,51,.18) 24%, rgba(184,115,51,.18) 76%, rgba(184,115,51,0));
    opacity:.28; pointer-events:none;
  }
}

/* 8) Lang switch: état actif net + alignement */
#services .lang-switch{ margin-top: 10px; }
#services .lang-btn[aria-pressed="true"]{
  color: var(--copper);
  text-shadow: 0 0 8px rgba(184,115,51,.18);
  border-bottom: 1px solid rgba(184,115,51,.45);
}

/* 9) Ancre — le header ne mange plus le H2 */
#services{ scroll-margin-top: 96px; }

/* 10) Motion safety (déjà géré, on renforce) */
@media (prefers-reduced-motion: reduce){
  #services *:not(#intro-cover):not(#intro-cover *),
  #services *::before:not(#intro-cover *::before),
  #services *::after:not(#intro-cover *::after) {
    transition:none !important; transform:none !important;
  }
}
/* ===== SERVICES — UPGRADE 9/10 (append at end of /assets/css/services.css) ===== */

/* 0) Fond 100% clean pour data-bg="plain" */
#services[data-bg="plain"]::before,
#services[data-bg="plain"]::after { content:none !important; }

/* 1) Rythme magazine (gouttières +) */
#services { 
  padding-top: 180px;
  padding-bottom: 112px;
  scroll-margin-top: 96px; 
}
#services .services-inner { max-width: 1200px; }
#services .services-list { row-gap: 64px; }
@media (min-width:1024px){
  #services .services-list { column-gap: 84px; }
}

/* Mobile : encore plus d'espace */
@media (max-width: 768px) {
  #services {
    padding-top: 180px !important;
  }
}

/* 2) Head: micro-polish */
#services .title { letter-spacing:.0015em; color: rgba(255,255,255,.97); }
#services .lead  { color: rgba(236,236,236,.88); line-height:1.92; }

/* 3) Hairlines: neutres au repos, cuivre uniquement en interaction */
#services .service-item{
  border-top: 1px solid rgba(255,255,255,.04);
  padding-top: 22px;
  transition: border-color 140ms ease;
}
#services .service-item:hover,
#services .service-item:focus-within{
  border-top-color: rgba(184,115,51,.34); /* cuivre */
}

/* 4) Titres + numérotation: doux par défaut, cuivre au hover */
#services .service-title{
  color: rgba(252,252,252,.95);
  font-size: clamp(20px,1.6vw,22px);
  letter-spacing:.01em;
}
#services .service-title::before{
  color: rgba(255,255,255,.38);
  margin-right:.45em;
  letter-spacing:.02em; /* align visuel */
}
#services .service-title:hover { color: var(--copper); }

/* 5) Texte: gris propre, largeur de ligne contrôlée */
#services .service-desc{
  color: rgba(235,235,235,.86);
  line-height: 1.92;
  max-width: 62ch;
  margin-top: 10px;
}

/* 6) Col-rule (desktop) ultra-subtile pour structurer sans lourdeur */
@media (min-width:1024px){
  #services .services-list{ position: relative; }
  #services .services-list::before{
    content:""; position:absolute; top:-12px; bottom:-12px; left:50%; width:1px;
    transform: translateX(-.5px);
    background: linear-gradient(180deg,
      rgba(184,115,51,0),
      rgba(184,115,51,.14) 24%,
      rgba(184,115,51,.14) 76%,
      rgba(184,115,51,0));
    opacity:.28; pointer-events:none;
  }
}

/* 7) Motion safety */
@media (prefers-reduced-motion: reduce){
  #services *:not(#intro-cover):not(#intro-cover *),
  #services *::before:not(#intro-cover *::before),
  #services *::after:not(#intro-cover *::after){
    transition:none !important; transform:none !important;
  }
}
/* === SERVICES: CTA texte-only (Setmore) === */
#services .services-cta {
  margin-top: 28px;
  padding-inline: 6px;
}

#services .services-cta a,
#services .services-cta a:link,
#services .services-cta a:visited {
  color: var(--offwhite);
  text-decoration: none;
  display: inline-block;
  padding: 6px 2px;
  border-radius: 8px;
  transition: color 180ms ease, text-shadow 180ms ease, transform 180ms ease;
}

#services .services-cta a:hover,
#services .services-cta a:focus-visible {
  color: var(--copper);
  outline: none;
  transform: translateY(-1px);
  text-shadow: 0 0 10px rgba(184,115,51,.20);
}

/* hairline cuivre discret sous le CTA au survol (comme la header line) */
#services .services-cta a:hover {
  box-shadow: inset 0 -1px 0 rgba(184,115,51,.45);
}

/* motion safety */
@media (prefers-reduced-motion: reduce){
  #services .services-cta a{ transition:none !important; transform:none !important; }
}
/* === Services: rendre les TITRES cliquables (texte-only) === */
/* path: /assets/css/services.css (ajoute en bas) */

#services .service-title { position: relative; } /* pour focus ring sans décaler */

/* Lien inside H3, hérite la gueule du titre */
#services .service-title > .svc-title-link,
#services .service-title > .svc-title-link:link,
#services .service-title > .svc-title-link:visited {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  color: inherit;
  text-decoration: none;
  padding: 4px 6px;              /* hit-area confort */
  margin: -4px -6px;             /* sans casser l’alignement */
  border-radius: 8px;
  transition: color .18s ease, text-shadow .18s ease, transform .18s ease;
}

/* Hover/Focus: cuivre + micro-lift */
#services .service-title > .svc-title-link:hover,
#services .service-title > .svc-title-link:focus-visible {
  color: var(--copper);
  text-shadow: 0 0 10px rgba(184,115,51,.18);
  transform: translateY(-1px);
  outline: none;
  box-shadow: 0 0 0 3px rgba(184,115,51,.35); /* focus visible luxe */
}

/* Option: petite hairline cuivre au survol (sous le texte) */
#services .service-title > .svc-title-link:hover {
  box-shadow:
    0 0 0 3px rgba(184,115,51,0) inset,       /* neutre (garde la taille) */
    inset 0 -1px 0 rgba(184,115,51,.45);
}

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
  #services .service-title > .svc-title-link { transition: none !important; transform: none !important; }
}
/* === HEADER/DRAWER — BOUTONS TEXTE-ONLY ============================ */

/* Header: Menu / Réservation (pas d’underline) */
.hero-min-header .header-btn,
.hero-min-header .header-btn:link,
.hero-min-header .header-btn:visited {
  text-decoration: none !important;
  color: rgba(245,245,245,.96);
  transition: color 180ms ease, text-shadow 180ms ease, transform 180ms ease;
}
.hero-min-header .header-btn:hover,
.hero-min-header .header-btn:focus-visible {
  color: var(--copper);
  text-shadow: 0 0 12px rgba(184,115,51,.22);
  transform: translateY(-1px);
  outline: none;
}

/* Drawer: liens (dont “Réservation”) */
.side-link,
.side-link:link,
.side-link:visited {
  text-decoration: none !important;
  color: rgba(245,245,245,.96);
  transition: color 180ms ease, text-shadow 180ms ease, transform 180ms ease;
}
.side-link:hover,
.side-link:focus-visible {
  color: var(--copper);
  text-shadow: 0 0 12px rgba(184,115,51,.22);
  transform: translateY(-1px);
  outline: none;
}
/* Accent pour .side-link--cta (Réservation) */
.side-link--cta { color: var(--copper) !important; font-weight: 900; }

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .hero-min-header .header-btn,
  .side-link { transition: none !important; transform: none !important; }
}
/* === SERVICES — MÉTA + BOUTON PAR SERVICE (PATCH FINAL) === */

/* Ligne méta sous le titre (durée, extra, etc.) */
#services .service-meta{
  margin: 6px 0 0 0;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(235,235,235,.64);
  font-weight: 500;
}

/* Espacement entre méta et description */
#services .service-desc{
  margin-top: 8px;          /* déjà défini plus haut, ici on raffine un peu */
}

/* Bouton CTA texte-only sous chaque service */
#services .service-cta-btn,
#services .service-cta-btn:link,
#services .service-cta-btn:visited{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 0;
  border-radius: 8px;
  color: rgba(245,245,245,.94);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  transition:
    color 180ms ease,
    text-shadow 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

/* Icône flèche optionnelle (si tu ajoutes un ::after plus tard) */
#services .service-cta-btn::after{
  content: "↗";
  font-size: 0.9rem;
  opacity: .75;
}

/* Hover/focus : cuivre subtil, micro-lift */
#services .service-cta-btn:hover,
#services .service-cta-btn:focus-visible{
  color: var(--copper);
  text-shadow: 0 0 10px rgba(184,115,51,.22);
  transform: translateY(-1px);
  outline: none;
  box-shadow: inset 0 -1px 0 rgba(184,115,51,.55);
}

/* Mobile : on garde tout lisible */
@media (max-width: 768px){
  #services .service-meta{
    font-size: 0.82rem;
    letter-spacing: 0.07em;
  }

  #services .service-cta-btn{
    margin-top: 8px;
  }
}
/* PATCH MICRO-POLISH SERVICES (optionnel) */

/* Reserrer un peu la zone de texte sur grands écrans */
@media (min-width: 1200px){
  #services .services-inner{
    max-width: 1120px;
  }
}

/* Titre de service un poil plus fort visuellement */
#services .service-title{
  font-size: clamp(20px, 1.5vw, 23px);
  letter-spacing: 0.01em;
}

/* Ligne "Réserver ce service" un peu plus petite et espacée du texte */
#services .service-cta-inline{
  margin-top: 10px;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Hover CTA inline : cuivre doux */
#services .service-cta-inline a{
  text-decoration: none;
  color: rgba(245,245,245,.9);
  transition: color .18s ease, text-shadow .18s ease, transform .18s ease;
}
#services .service-cta-inline a:hover,
#services .service-cta-inline a:focus-visible{
  color: var(--copper);
  text-shadow: 0 0 10px rgba(184,115,51,.20);
  transform: translateY(-1px);
  outline: none;
}
/* === SERVICES — CTA PAR SERVICE CENTRÉ & LUXE === */

/* On organise chaque service en colonne (titre, meta, texte, bouton) */
#services .service-item{
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* texte aligné à gauche */
  gap: 6px;
}

/* Bouton "Réserver ce service" pour chaque carte */
#services .service-cta-btn,
#services .service-cta-btn:link,
#services .service-cta-btn:visited{
  align-self: center;                /* 👉 centre le bouton dans l'article */
  margin-top: 10px;
  padding: 7px 18px;
  border-radius: 999px;              /* pilule luxe */
  border: 1px solid rgba(184,115,51,.55);
  background: rgba(0,0,0,.10);
  color: rgba(245,245,245,.95);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 500;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 160ms ease;
}

#services .service-cta-btn:hover,
#services .service-cta-btn:focus-visible{
  color: #000;
  background: var(--copper);
  border-color: var(--copper);
  transform: translateY(-1px);
  box-shadow:
    0 0 18px rgba(184,115,51,.30),
    0 8px 22px rgba(0,0,0,.60);
  outline: none;
}

/* petit chevron optionnel si tu ajoutes "↗" dans le texte */
#services .service-cta-btn::after{
  content: "↗";
  font-size: 0.8em;
  opacity: .9;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  #services .service-cta-btn{
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
}
/* === SERVICE CTA — TEXTE ONLY + ALIGNEMENT PARFAIT + COPPER === */

#services .service-item{
  display: flex;
  flex-direction: column;
  gap: 14px;             /* écart régulier */
  align-items: flex-start;
}

/* Numérotation copper par défaut */
#services .service-title::before{
  color: var(--copper) !important;
  font-weight: 600;
  opacity: 0.9;
}

/* CTA texte-only */
#services .service-cta-btn,
#services .service-cta-btn:link,
#services .service-cta-btn:visited{
  align-self: flex-start;              /* 👉 même alignement pour tous */
  text-decoration: none;
  color: var(--copper);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  display: inline-flex;
  gap: 6px;
  cursor: pointer;
  transition: opacity .2s ease, transform .18s ease;
  margin-top: 6px;
}

/* Hover — subtil mais luxe */
#services .service-cta-btn:hover,
#services .service-cta-btn:focus-visible{
  opacity: 1;
  transform: translateX(3px);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Petite flèche premium */
#services .service-cta-btn::after{
  content: "↗";
  font-size: 0.85em;
  opacity: .95;
}

/* Motion Safe */
@media (prefers-reduced-motion: reduce){
  #services .service-cta-btn{
    transition: none !important;
    transform: none !important;
  }
}
/* === SERVICES — OVERRIDE FINAL TEXTE-ONLY COPPER =================== */

/* Tous les blocs service structurés pareil */
#services .service-item{
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* tout aligné à gauche */
  gap: 10px;
}

/* Numérotation 01 —, 02 — en copper */
#services .service-title::before{
  color: var(--copper) !important;
  font-weight: 600;
  opacity: .9;
}

/* "Réserver ce service" = texte only, plus de bouton/pilule */
#services .service-cta-btn,
#services .service-cta-btn:link,
#services .service-cta-btn:visited{
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;                 /* enlève le feeling bouton */
  margin-top: 6px;

  color: var(--copper);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .8rem;
  font-weight: 500;

  display: inline-block;
  cursor: pointer;
  transition: color .18s ease, transform .18s ease, text-decoration .18s ease;
}

/* Survol : juste un underline + léger slide → luxe sec */
#services .service-cta-btn:hover,
#services .service-cta-btn:focus-visible{
  text-decoration: underline;
  text-underline-offset: 4px;
  transform: translateX(3px);
  outline: none;
}

/* On enlève la flèche si tu n'en veux plus */
#services .service-cta-btn::after{
  content: "";
}
/* === SERVICES — TYPO OVERRIDE (DM Serif Text + Inter) ============== */
/* Corps de texte (Inter) */
#services,
#services p,
#services li,
#services .lead,
#services .kicker,
#services .service-desc,
#services .service-meta,
#services .services-cta a,
#services .service-cta-btn {
  font-family: var(--font-body) !important;   /* Inter */
  font-weight: 400 !important;
  font-style: normal !important;
}

/* Titres (DM Serif Text) */
#services h1,
#services h2,
#services h3,
#services .title,
#services .service-title,
#services .service-title > .svc-title-link {
  font-family: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
}

/* CTA en caps = Inter un peu plus fort */
#services .service-cta-btn {
  font-weight: 600 !important;        /* un poil plus solide en Inter */
  letter-spacing: .12em !important;
  text-transform: uppercase;
}
/* === SERVICES — TITRES EN MAJUSCULES (FR & EN) ==================== */

/* H2 de section: "Nos Services" / "Our Services" */
#services .title,
#services .title .i18n-fr,
#services .title .i18n-en{
  text-transform: uppercase;
  letter-spacing: .08em;       /* tracking pour lisibilité en caps */
  font-weight: 800;            /* garde le côté éditorial */
}

/* Titres de chaque service (H3) + lien cliquable à l’intérieur */
#services .service-title,
#services .service-title > .svc-title-link{
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;            /* DM Serif Text n'a pas de vrai bold, ajuste si besoin */
}

/* Mobile: resserrer légèrement le tracking */
@media (max-width:640px){
  #services .title,
  #services .title .i18n-fr,
  #services .title .i18n-en{
    letter-spacing: .06em;
  }
  #services .service-title,
  #services .service-title > .svc-title-link{
    letter-spacing: .045em;
  }
}
/* === SERVICES — descendre le titre ================================ */
/* pousse tout le contenu des services plus bas */
/* 🔥 DÉSACTIVÉ - Causait des conflits avec mobile spacing */
/*
#services{
  padding-top: clamp(200px, 26vh, 300px) !important;
}
*/

/* mobile: un peu moins pour garder le contenu dans l'écran */
/* 🔥 DÉSACTIVÉ - Géré par inline CSS dans index.html */
/*
@media (max-width: 640px){
  #services{
    padding-top: 200px !important;
  }
}
*/
/* === SERVICES — INTER LOCK (append at end) ========================= */
/* Utilise la variable globale déjà pointée vers Inter/InterVariable */
:root{
  --font-body: "InterVariable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* 1) Inter partout dans #services (sauf icônes & code) */
#services,
#services :where(*):not(svg):not(i):not([class*="icon"]):not([class*="fa-"]):not(code):not(kbd):not(pre){
  font-family: var(--font-body) !important;
  font-variant-caps: normal !important;
  font-feature-settings: normal !important;
}

/* 2) Poids conseillés (titres/texte) */
#services .title{ font-weight: 800 !important; letter-spacing: .06em; text-transform: uppercase; }
#services .kicker{ font-weight: 600 !important; letter-spacing: .14em; text-transform: uppercase; }
#services .service-title{ font-weight: 700 !important; letter-spacing: .04em; text-transform: uppercase; }
#services .lead,
#services .service-desc,
#services .service-meta{ font-weight: 400 !important; }

/* 3) Liens/CTA dans la section → Inter + caps clean */
#services .services-cta a,
#services .service-cta-btn{
  font-family: inherit !important;
  text-transform: uppercase;
  letter-spacing: .10em;
  font-weight: 600 !important;
}

/* 4) Mobile: tracking un peu réduit pour la lisibilité */
@media (max-width:640px){
  #services .title{ letter-spacing: .05em; }
  #services .service-title{ letter-spacing: .045em; }
}

/* ========================================
   🔥 MOBILE SPACING FIX - FINAL OVERRIDE
   MUST BE LAST IN FILE
   ======================================== */
@media (max-width: 768px) {
  #services,
  section#services {
    padding-top: 180px !important;
  }
}

@media (max-width: 640px) {
  #services,
  section#services {
    padding-top: 180px !important;
  }
}