/* ==========================================================================
   Big Talent Services — feuille de styles principale
   Extraite de la maquette Claude Design « Big Talent Services.dc.html ».
   Les styles inline de la maquette ont été convertis en classes ; les
   attributs `style-hover` du runtime dc-runtime sont devenus des :hover CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Polices — servies par le site lui-même
   --------------------------------------------------------------------------
   Poppins et Karla étaient chargées depuis fonts.googleapis.com : la feuille
   de style tierce bloquait le rendu sur le chemin critique, et chaque visite
   transmettait l'adresse IP du visiteur à Google — transfert régulièrement
   sanctionné en Europe, alors que le site s'adresse aussi à la France, la
   Belgique et la Suisse.

   Seules les graisses réellement employées par cette feuille sont servies
   (400, 600, 700) : les 500 et 800 demandées auparavant ne l'étaient jamais.
   Sous-ensembles latin et latin-ext uniquement.
   -------------------------------------------------------------------------- */

/* latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/karla-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/karla-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/karla-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/karla-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/karla-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/karla-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --------------------------------------------------------------------------
   1. Jetons de charte (props `indigo`, `teal`, `orange` de la maquette)
   -------------------------------------------------------------------------- */
:root {
  --bts-indigo: #3d4eae;
  --bts-indigo-dark: #2c3a8a;
  --bts-teal: #35a79c;
  --bts-teal-dark: #2c8f85;

  /* Déclinaisons accessibles du teal. Le teal de charte plafonne à 2,93:1 sur
     blanc et 2,59:1 sur les fonds clairs, là où WCAG AA exige 4,5:1 pour du
     texte : il reste réservé aux aplats décoratifs (pastilles d'icône, puces).
     `--bts-teal-text` (6,26:1 sur blanc, 5,52:1 sur --bts-surface) porte les
     textes et les indicateurs d'état ; `--bts-teal-solid` (4,72:1 sous du
     blanc) sert de fond aux boutons. */
  --bts-teal-text: #226b64;
  --bts-teal-solid: #298078;
  --bts-orange: #ee6c2d;

  --bts-ink: #2e3a59;
  --bts-muted: #5a6474;
  --bts-line: #e3e9f4;
  --bts-line-soft: #e8edf5;
  --bts-line-strong: #dde4f0;

  --bts-surface: #edf1f7;
  --bts-surface-alt: #f3f6fb;
  --bts-surface-soft: #f8fafd;
  --bts-blue-soft: #e3ebf6;

  --bts-yellow: #f5cf49;
  --bts-pink: #f5b8c4;
  --bts-on-dark: #c9d1ef;

  --bts-font-title: 'Poppins', 'Segoe UI', sans-serif;
  --bts-font-body: 'Karla', 'Segoe UI', sans-serif;

  --bts-radius-sm: 12px;
  --bts-radius: 20px;
  --bts-radius-lg: 28px;
  --bts-pill: 999px;

  --bts-section-y: 96px;

  /* Largeur utile maximale : au-delà, le contenu s'étirait sur toute la
     largeur de l'écran, jusqu'à séparer le logo et le bouton d'action de
     l'en-tête par plusieurs centaines de pixels de vide. */
  --bts-max: 1440px;

  /* Gouttière : 64 px au minimum, davantage dès que l'écran dépasse la largeur
     utile, de sorte que le contenu reste centré. Piloter le centrage par la
     gouttière plutôt que par un conteneur borné aligne d'un coup l'en-tête, le
     fil d'Ariane, toutes les sections et le pied de page — un `max-width` posé
     sur les seuls en-tête et pied de page aurait décalé le logo par rapport au
     texte des sections. */
  --bts-gutter: max(64px, calc((100% - var(--bts-max)) / 2));
}

/* --------------------------------------------------------------------------
   2. Base (bloc <style> du <helmet> de la maquette)
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: var(--bts-ink);
  font-family: var(--bts-font-body);
}

a { color: var(--bts-indigo); text-decoration: none; }
a:hover { color: var(--bts-indigo-dark); }
::selection { background: #dfe5f5; }

img { max-width: 100%; }

h1, h2, h3, h4, h5, h6 { font-family: var(--bts-font-title); margin: 0; font-weight: 700; }

.bts-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--bts-indigo);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--bts-radius-sm) 0;
}
.bts-skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. Utilitaires
   -------------------------------------------------------------------------- */
.section { padding: var(--bts-section-y) var(--bts-gutter); }
.section--tight { padding: 72px var(--bts-gutter); }
.section--surface { background: var(--bts-surface); }
.section--clip { position: relative; overflow: hidden; }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  margin-bottom: 48px;
}
.section-head--wide { max-width: 700px; }

.eyebrow {
  color: var(--bts-teal-text);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.eyebrow--yellow { color: var(--bts-yellow); }

.title-xl { font-size: 52px; line-height: 1.12; color: var(--bts-indigo); }
.title-lg { font-size: 40px; color: var(--bts-indigo); }
.title-md { font-size: 34px; }
.title-sm { font-size: 28px; color: var(--bts-indigo); }

.lead {
  font-size: 19px;
  line-height: 1.65;
  color: var(--bts-muted);
  margin: 0;
  max-width: 50ch;
  text-wrap: pretty;
}
.text { font-size: 16.5px; line-height: 1.7; color: var(--bts-muted); margin: 0; text-wrap: pretty; }
.text--sm { font-size: 15px; line-height: 1.7; }
.text--xs { font-size: 14.5px; line-height: 1.6; }
.text--on-dark { color: var(--bts-on-dark); font-size: 16px; }

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--cards { gap: 18px; }

/* Pastilles décoratives (les <div> ronds absolus de la maquette) */
.blob { position: absolute; border-radius: 50%; pointer-events: none; }
.blob--a { top: -140px; right: -100px; width: 460px; height: 460px; background: var(--bts-blue-soft); }
.blob--b { bottom: 60px; left: 44%; width: 56px; height: 56px; background: var(--bts-yellow); opacity: .85; }
.blob--c { top: 120px; left: -30px; width: 80px; height: 80px; background: var(--bts-pink); opacity: .6; }
.blob--f { top: -60px; right: 10%; width: 140px; height: 140px; background: var(--bts-yellow); opacity: .5; }
.blob--g { top: -50px; right: -50px; width: 180px; height: 180px; background: rgba(255, 255, 255, .08); }

/* --------------------------------------------------------------------------
   4. Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bts-pill);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 26px;
  white-space: nowrap;
  transition: background-color .2s ease, transform .2s ease;
}
.btn--teal {
  background: var(--bts-teal-solid);
  color: #fff;
  box-shadow: 0 6px 16px rgba(53, 167, 156, .35);
}
.btn--teal:hover { background: var(--bts-teal-text); color: #fff; }
.btn--lg { padding: 16px 34px; font-size: 16px; }
.btn--md { padding: 14px 30px; }

/* --------------------------------------------------------------------------
   5. Barre de navigation
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bts-line-soft);
  transition: box-shadow .25s ease, background .25s ease;
}
/* L'ombre n'apparaît qu'une fois la page défilée : au repos, la barre reste
   dans le plan du hero ; dès qu'un contenu passe dessous, elle s'en détache. */
.nav.is-scrolled {
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 8px 28px rgba(46, 58, 89, .09);
}

/* Conteneur borné : sans lui, le logo et le bouton d'action se retrouvaient
   aux deux extrémités d'un écran large, séparés par plusieurs centaines de
   pixels de vide. */
.nav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px var(--bts-gutter);
}

.nav__brand { display: flex; align-items: center; flex: none; }
.nav__logo {
  height: 46px;
  width: auto;
  display: block;
  transition: transform .2s ease;
}
.nav__brand:hover .nav__logo { transform: scale(1.03); }
.nav__brand:focus-visible { outline: 2px solid var(--bts-indigo); outline-offset: 6px; border-radius: 8px; }

/* Menu : rangée alignée à droite en desktop, panneau déroulant en mobile. */
.nav__menu {
  display: flex;
  align-items: center;
  margin-left: auto;
  min-width: 0;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-weight: 600;
  font-size: 15px;
}
.nav__link {
  position: relative;
  color: var(--bts-ink);
  padding: 6px 2px;
  white-space: nowrap;
  transition: color .2s ease;
}
/* Soulignement animé : l'état actif se distinguerait mal par la seule
   couleur, sur un lien déjà sombre. */
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--bts-teal-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.nav__link:hover,
.nav__link[aria-current="location"] { color: var(--bts-indigo); }
.nav__link:hover::after,
.nav__link[aria-current="location"]::after { transform: scaleX(1); }
.nav__link:focus-visible {
  outline: 2px solid var(--bts-indigo);
  outline-offset: 4px;
  border-radius: 6px;
}

/* Bouton d'appel à l'action du header. Le padding est resserré par rapport aux
   .btn--md des sections : la barre resterait sinon plus haute que son
   contenu. */
.nav__cta { margin-left: 28px; padding: 10px 22px; flex: none; }

.nav__toggle {
  display: none;
  margin-left: auto;
  border: 1px solid var(--bts-line);
  background: #fff;
  border-radius: var(--bts-radius-sm);
  padding: 9px;
  cursor: pointer;
  color: var(--bts-indigo);
  line-height: 0;
  transition: border-color .2s ease, background .2s ease;
}
.nav__toggle:hover { border-color: var(--bts-indigo); background: var(--bts-surface-soft); }
.nav__toggle:focus-visible { outline: 2px solid var(--bts-indigo); outline-offset: 2px; }
/* Une seule des deux icônes est visible, selon l'état du panneau. */
.nav__toggle-close { display: none; }
.nav[data-open="true"] .nav__toggle-open { display: none; }
.nav[data-open="true"] .nav__toggle-close { display: block; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 72px var(--bts-gutter) 88px;
  background: linear-gradient(180deg, var(--bts-surface-alt) 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}
.hero__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  min-width: 0;
}
.hero__badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  background: var(--bts-blue-soft);
  color: var(--bts-indigo);
  padding: 8px 16px;
  border-radius: var(--bts-pill);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hero__actions { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.hero__media { position: relative; min-width: 0; }

.stats {
  display: flex;
  gap: 40px;
  margin-top: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--bts-line);
  flex-wrap: wrap;
}
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat__value {
  font-family: var(--bts-font-title);
  font-size: 30px;
  font-weight: 700;
  color: var(--bts-orange);
}
.stat__label { font-size: 14px; color: var(--bts-muted); font-weight: 600; }

/* --------------------------------------------------------------------------
   7. Emplacements images (remplacent le web component <image-slot>)
   -------------------------------------------------------------------------- */
.media-slot {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  z-index: 1;

}
.media-slot__img {
  display: block;
  width: 100%;
  height: auto;
}
/* Les illustrations à fond transparent doivent tenir entières dans le cadre :
   `cover`, taillé pour les photographies, leur couperait têtes et pieds. Le
   fond du cadre prolonge alors le dessin plutôt que de le rogner. */
.media-slot--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 1px dashed #b9c6e0;
  background: linear-gradient(135deg, var(--bts-blue-soft) 0%, var(--bts-surface-alt) 100%);
}
.media-slot__caption {
  font-family: var(--bts-font-title);
  font-size: 15px;
  font-weight: 600;
  color: #7d89a5;
  text-align: center;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   8. Blocs texte + image
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 50px;
  align-items: center;
}

.split__body { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.split__actions { display: flex; gap: 16px; margin-top: 6px; flex-wrap: wrap; }

.claim {
  font-family: var(--bts-font-title);
  font-size: 20px;
  font-weight: 600;
  color: var(--bts-indigo);
  margin: 6px 0 0;
}

/* --------------------------------------------------------------------------
   9. Icones et cartes
   -------------------------------------------------------------------------- */
.icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--bts-radius-sm);
  color: #fff;
}
.icon-tile--lg { width: 48px; height: 48px; border-radius: 14px; }
.icon-tile--xl { width: 64px; height: 64px; border-radius: 18px; }
.icon-tile--indigo { background: var(--bts-indigo); }
.icon-tile--teal { background: var(--bts-teal); }
.icon-tile--orange { background: var(--bts-orange); }
.icon { display: block; }

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--bts-line);
  border-radius: var(--bts-radius);
  padding: 24px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(61, 78, 174, .12); }
.card__title {
  font-family: var(--bts-font-title);
  font-size: 16px;
  font-weight: 600;
  color: var(--bts-indigo);
}
.card__text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--bts-muted); }

.card--atout {
  gap: 14px;
  padding: 28px;
  background: var(--bts-surface-soft);
}
.card--atout:hover { transform: none; box-shadow: none; }
.card--atout .card__title { font-size: 17px; }
.card--atout .card__text { font-size: 14.5px; line-height: 1.6; }

.card--service {
  gap: 14px;
  padding: 32px;
  border: 0;
  box-shadow: 0 2px 14px rgba(61, 78, 174, .07);
}
.card--service:hover { transform: none; box-shadow: 0 2px 14px rgba(61, 78, 174, .07); }
.card--service .card__title { font-size: 20px; }
.card--service .card__text { font-size: 15px; line-height: 1.7; text-wrap: pretty; }
.card__link { font-weight: 700; color: var(--bts-teal-text); margin-top: auto; }
.card__link:hover { color: var(--bts-teal-solid); }

/* Cartes posées sur le bandeau indigo : le fond translucide laisse passer la
   couleur de la section, et titre comme texte repassent en clair — le blanc et
   l'indigo du cas général y seraient illisibles. */
.card--dark {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
}
.card--dark:hover { transform: translateY(-4px); box-shadow: none; border-color: rgba(255, 255, 255, .4); }
.card--dark .card__title { color: #fff; }
.card--dark .card__text { color: var(--bts-on-dark); }

/* Pictogramme fourni en image : il porte déjà ses couleurs, contrairement aux
   icônes vectorielles que `.icon-tile` habille d'une pastille. */
.card__icon { display: block; width: 56px; height: 56px; object-fit: contain; }

.card--step { gap: 12px; padding: 28px; }
.card--step:hover { transform: none; box-shadow: none; }
.card__num {
  font-family: var(--bts-font-title);
  font-size: 38px;
  font-weight: 700;
  color: var(--bts-orange);
  opacity: .85;
}
.card--step .card__title { font-size: 17px; }
.card--step .card__text { font-size: 14.5px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   10. Bandeau solutions informatiques
   -------------------------------------------------------------------------- */
.banner {
  margin: 0 var(--bts-gutter) var(--bts-section-y);
  border-radius: var(--bts-radius-lg);
  background: var(--bts-surface);
  padding: 56px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 36px;
  align-items: center;
}
.banner__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.banner__text { font-size: 16px; line-height: 1.7; color: var(--bts-muted); margin: 0; text-wrap: pretty; }

/* Pôles du catalogue : un intertitre suivi de sa grille de prestations. Le
   filet marque la rupture entre deux pôles sans alourdir la page d'un fond
   supplémentaire. */
.pole + .pole { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--bts-line); }
.pole__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; max-width: 70ch; }
.pole__title {
  font-family: var(--bts-font-title);
  font-size: 26px;
  font-weight: 700;
  color: var(--bts-indigo);
  margin: 0;
}
.pole__resume { margin: 0; font-size: 16px; line-height: 1.65; color: var(--bts-muted); text-wrap: pretty; }

/* Section pleine largeur sur fond indigo. Le titre hérite de `color`, faute de
   quoi il resterait indigo sur indigo. */
.section--indigo { background: var(--bts-indigo); color: #fff; }
.section--indigo .title-lg,
.section--indigo .title-md { color: inherit; }
/* La pastille indigo disparaîtrait sur un fond de la même couleur : elle passe
   ici en blanc translucide, qui la détache sans introduire de teinte étrangère
   à la charte. */
.section--indigo .icon-tile--indigo { background: rgba(255, 255, 255, .18); }

/* --------------------------------------------------------------------------
   11. Secteurs (bandeau indigo)
   -------------------------------------------------------------------------- */
.sectors { background: var(--bts-indigo); color: #fff; }
.sectors__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 56px;
  align-items: center;
}
.sectors__intro { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 12px; min-width: 0; }
.tag {
  border: 1px solid rgba(255, 255, 255, .35);
  padding: 10px 20px;
  border-radius: var(--bts-pill);
  font-size: 15px;
  font-weight: 600;
  transition: background-color .2s ease;
}
.tag:hover { background: rgba(255, 255, 255, .12); }

/* --------------------------------------------------------------------------
   12. Témoignages
   -------------------------------------------------------------------------- */
.quote {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #fff;
  border-radius: var(--bts-radius);
  padding: 32px;
  box-shadow: 0 2px 14px rgba(61, 78, 174, .07);
}
.quote__mark {
  font-family: var(--bts-font-title);
  font-size: 34px;
  color: var(--bts-orange);
  line-height: .5;
  margin-top: 10px;
}
.quote__text { font-size: 15.5px; line-height: 1.7; color: var(--bts-ink); text-wrap: pretty; }
.quote__author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-family: var(--bts-font-title);
}
.quote__name { font-weight: 700; font-size: 14.5px; color: var(--bts-indigo); }
.quote__role { font-size: 13px; color: var(--bts-muted); }

/* --------------------------------------------------------------------------
   13. Liste à puces cochées
   -------------------------------------------------------------------------- */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.checklist__item { display: flex; align-items: flex-start; gap: 12px; }
.checklist__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--bts-teal);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.checklist__text { font-size: 15.5px; line-height: 1.6; color: var(--bts-ink); }

/* --------------------------------------------------------------------------
   14. Appel à l'action
   -------------------------------------------------------------------------- */
.cta {
  margin: 0 var(--bts-gutter) var(--bts-section-y);
  border-radius: var(--bts-radius-lg);
  background: var(--bts-indigo);
  color: #fff;
  padding: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
}
.cta__body { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.cta__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bts-yellow);
}
.cta__title {
  font-family: var(--bts-font-title);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
}
.cta__text { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--bts-on-dark); text-wrap: pretty; }

/* --------------------------------------------------------------------------
   15. Pied de page
   -------------------------------------------------------------------------- */
.footer {
  background: var(--bts-surface-alt);
  color: var(--bts-muted);
  padding: 72px var(--bts-gutter) 28px;
  border-top: 1px solid var(--bts-line);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--bts-line-strong);
}
.footer__about { display: flex; flex-direction: column; gap: 14px; }
.footer__brand { align-self: flex-start; }
.footer__brand:focus-visible { outline: 2px solid var(--bts-indigo); outline-offset: 6px; border-radius: 8px; }
.footer__logo { height: 46px; width: auto; display: block; }
.footer__text { margin: 0; font-size: 14.5px; line-height: 1.7; text-wrap: pretty; }
.footer__claim {
  margin: 0;
  font-family: var(--bts-font-title);
  font-weight: 600;
  font-size: 15px;
  color: var(--bts-indigo);
}
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer__title {
  font-family: var(--bts-font-title);
  font-weight: 600;
  color: var(--bts-indigo);
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
/* Intertitre à l'intérieur d'une colonne : plus discret que le titre de
   colonne, il sépare deux listes sans introduire un second niveau de titre
   dans le plan du document. */
.footer__subtitle {
  margin: 12px 0 2px;
  font-family: var(--bts-font-title);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--bts-ink);
}
.footer__link {
  color: var(--bts-muted);
  font-size: 14.5px;
  line-height: 1.5;
  transition: color .2s ease, transform .2s ease;
}
.footer__link:hover { color: var(--bts-indigo); transform: translateX(3px); }
.footer__link:focus-visible { outline: 2px solid var(--bts-indigo); outline-offset: 3px; border-radius: 4px; }
.footer__link--strong { font-weight: 700; color: var(--bts-ink); font-size: 16px; }
.footer__contact {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14.5px;
  line-height: 1.6;
}
/* L'icône garde sa largeur quelle que soit la longueur de la coordonnée, pour
   que les lignes de la colonne restent alignées sur un même axe. */
.footer__contact-icon { flex: 0 0 auto; display: inline-flex; color: var(--bts-teal); margin-top: 2px; }
.footer__contact-link { color: inherit; transition: color .2s ease; }
.footer__contact-link:hover { color: var(--bts-indigo); }
.footer__contact-link:focus-visible { outline: 2px solid var(--bts-indigo); outline-offset: 3px; border-radius: 4px; }
.footer__cta { margin-top: 8px; }

/* Profils officiels : pastilles carrées, l'icône héritant de la couleur. */
.social { display: flex; gap: 10px; margin-top: 4px; }
.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--bts-radius-sm);
  border: 1px solid var(--bts-line-strong);
  background: #fff;
  color: var(--bts-indigo);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.social__link:hover {
  background: var(--bts-indigo);
  border-color: var(--bts-indigo);
  color: #fff;
  transform: translateY(-2px);
}
.social__link:focus-visible { outline: 2px solid var(--bts-indigo); outline-offset: 3px; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 22px;
}
.footer__legal { margin: 0; font-size: 13.5px; }
/* `margin-right: auto` regroupe le lien avec la mention légale à gauche :
   sans lui, la répartition en `space-between` l'isolerait au centre. */
.footer__legal-link {
  margin-right: auto;
  font-size: 13.5px;
  color: var(--bts-muted);
  transition: color .2s ease;
}
.footer__legal-link:hover { color: var(--bts-indigo); text-decoration: underline; }
.footer__legal-link:focus-visible { outline: 2px solid var(--bts-indigo); outline-offset: 3px; border-radius: 4px; }
.footer__top { font-size: 13.5px; font-weight: 600; color: var(--bts-indigo); }
.footer__top:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   15b. Pages intérieures — en-tête, valeurs, services détaillés, contact
   -------------------------------------------------------------------------- */

/* En-tête commun aux pages « Qui sommes-nous », « Services » et « Contact » */
.page-hero {
  padding: 72px var(--bts-gutter) 56px;
  background: linear-gradient(180deg, var(--bts-surface-alt) 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}
.page-hero__eyebrow { position: relative; margin: 0 0 12px; }
.page-hero__title {
  position: relative;
  font-size: 46px;
  line-height: 1.2;
  color: var(--bts-indigo);
}
.page-hero__title--narrow { max-width: 20ch; }

.blob--h { top: -120px; right: -80px; width: 340px; height: 340px; background: var(--bts-blue-soft); }
.blob--i { bottom: 0; left: 30%; width: 70px; height: 70px; background: var(--bts-pink); opacity: .6; }
.blob--j { bottom: 0; left: 34%; width: 64px; height: 64px; background: var(--bts-yellow); opacity: .7; }
.blob--k { bottom: 0; left: 38%; width: 60px; height: 60px; background: var(--bts-pink); opacity: .6; }

/* Bloc « Qui sommes-nous » : texte à gauche, visuel à droite */
.split--reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.split--intro { padding: 56px var(--bts-gutter) var(--bts-section-y); }
.split--intro .text { font-size: 17px; line-height: 1.75; }
.split--intro .claim { font-size: 22px; margin-top: 8px; }

/* Cartes « Nos valeurs » */
.section-title { margin: 0 0 44px; font-size: 36px; color: var(--bts-indigo); }

/* Variante sans bordure, posée sur ombre portée (page Services) */
.card--shadow {
  border: 0;
  background: #fff;
  box-shadow: 0 2px 14px rgba(61, 78, 174, .07);
}

.card--value {
  gap: 14px;
  padding: 32px;
  border: 0;
  box-shadow: 0 2px 14px rgba(61, 78, 174, .07);
}
.card--value:hover { transform: none; box-shadow: 0 2px 14px rgba(61, 78, 174, .07); }
.card--value .card__title { font-size: 19px; }
.card--value .card__text { font-size: 15px; line-height: 1.7; text-wrap: pretty; }

/* Bandeau « Notre engagement » */
.pledge {
  background: var(--bts-indigo);
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 56px;
  align-items: center;
  padding: 88px var(--bts-gutter);
}
.pledge__intro { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pledge__text {
  font-size: 17px;
  line-height: 1.8;
  color: var(--bts-on-dark);
  margin: 0;
  min-width: 0;
  text-wrap: pretty;
}

/* Fiches services détaillées (page Services) */
.service-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 56px var(--bts-gutter) 40px;
}
.service-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 32px;
  border: 1px solid var(--bts-line);
  border-radius: 24px;
  padding: 40px;
  background: var(--bts-surface-soft);
}
.service-item__body { display: flex; flex-direction: column; gap: 12px; }
.service-item__title { font-size: 26px; color: var(--bts-indigo); }
.service-item__text { font-size: 16.5px; line-height: 1.75; color: var(--bts-muted); margin: 0; text-wrap: pretty; }

/* Bloc de conclusion « Envie d'en savoir plus ? » */
.closing {
  padding: 80px var(--bts-gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.closing__title { font-size: 32px; color: var(--bts-indigo); }
.closing__actions { display: flex; gap: 16px; flex-wrap: wrap; }

.btn--ghost {
  border: 2px solid #d7dff0;
  color: var(--bts-indigo);
  padding: 12px 30px;
  background: transparent;
}
.btn--ghost:hover { border-color: var(--bts-indigo); color: var(--bts-indigo); }

/* Page Contact ---------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 64px;
  padding: 56px var(--bts-gutter) var(--bts-section-y);
  align-items: start;
}
.contact__aside { display: flex; flex-direction: column; gap: 24px; }
/* Titre de section de la page Contact : la page n'avait qu'un <h1>, ce qui
   privait la navigation au lecteur d'écran de tout point de repère entre les
   coordonnées et le formulaire. */
.contact__heading {
  font-family: var(--bts-font-title);
  font-size: 20px;
  font-weight: 700;
  color: var(--bts-indigo);
  margin: 0;
}
.contact__intro { font-size: 17px; line-height: 1.75; color: var(--bts-muted); margin: 0; text-wrap: pretty; }
.contact__details { display: flex; flex-direction: column; gap: 16px; }

.detail {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--bts-line);
  border-radius: 16px;
  padding: 18px 22px;
  background: var(--bts-surface-soft);
}
.detail__icon { width: 42px; height: 42px; }
.detail__label { font-weight: 700; font-size: 14px; color: var(--bts-indigo); }
.detail__value { font-size: 15px; color: var(--bts-muted); margin-top: 2px; }
.detail__value a { color: var(--bts-muted); }
.detail__value a:hover { color: var(--bts-indigo); }

/* Formulaire ------------------------------------------------------------ */
.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1px solid var(--bts-line);
  border-radius: 24px;
  padding: 40px;
  background: #fff;
  box-shadow: 0 4px 24px rgba(61, 78, 174, .08);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form__field { display: flex; flex-direction: column; gap: 8px; font-weight: 700; font-size: 14px; color: var(--bts-indigo); }

.form__input,
.form__select,
.form__textarea {
  font-family: var(--bts-font-body);
  font-weight: 400;
  color: var(--bts-ink);
  border: 1px solid #d7dff0;
  border-radius: var(--bts-radius-sm);
  padding: 13px 16px;
  font-size: 15px;
  background: #fff;
  width: 100%;
}
.form__input:focus,
.form__select:focus,
.form__textarea:focus { outline: 2px solid var(--bts-indigo); outline-offset: 1px; }
.form__textarea { resize: vertical; }
.form__input[aria-invalid="true"],
.form__select[aria-invalid="true"],
.form__textarea[aria-invalid="true"] { border-color: #d1495b; }

.form__error { font-weight: 600; font-size: 13px; color: #d1495b; }

.form__submit {
  align-self: flex-start;
  border: none;
  cursor: pointer;
  padding: 15px 32px;
  font-size: 16px;
  font-family: var(--bts-font-body);
}
.form__submit[disabled] { opacity: .6; cursor: progress; }

/* Anti-robot ------------------------------------------------------------ */
/* Champ leurre injecté avant </form> par le filtre honeypot : masqué à
   l'écran comme aux lecteurs d'écran, seul un robot le remplit. */
.form__honeypot { display: none !important; }

/* Le badge flottant de reCAPTCHA v3 est masqué : les conditions d'utilisation
   de Google l'autorisent à condition d'afficher la mention ci-dessous, portée
   par .form__legal dans le formulaire. */
.grecaptcha-badge { visibility: hidden; }

.form__legal { margin: 0; font-size: 12px; line-height: 1.6; color: #6b7392; }
.form__legal a { color: inherit; text-decoration: underline; }

/* Information sur le traitement des données (RGPD) ----------------------- */
/* Premier niveau toujours lisible, détail replié : l'information est complète
   sans allonger le formulaire de six paragraphes. */
.rgpd {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--bts-line);
  border-radius: var(--bts-radius-sm);
  background: var(--bts-surface-soft);
}
.rgpd__intro { margin: 0; font-size: 13px; line-height: 1.6; color: var(--bts-muted); }
.rgpd__summary {
  font-family: var(--bts-font-title);
  font-size: 13px;
  font-weight: 600;
  color: var(--bts-indigo);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rgpd__summary::-webkit-details-marker { display: none; }
.rgpd__summary::after {
  content: '+';
  font-size: 16px;
  line-height: 1;
  color: var(--bts-teal-text);
  transition: transform .2s ease;
}
.rgpd__details[open] .rgpd__summary::after { content: '−'; }
.rgpd__summary:focus-visible {
  outline: 2px solid var(--bts-indigo);
  outline-offset: 3px;
  border-radius: 4px;
}
.rgpd__body { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.rgpd__details[open] .rgpd__body { animation: bts-fade-up .3s ease both; }
.rgpd__text { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--bts-muted); }
.rgpd__text strong { color: var(--bts-ink); font-weight: 700; }
.rgpd__text a { color: var(--bts-indigo); text-decoration: underline; }

/* Le bouton de révélation de l'adresse s'aligne sur la petite typographie du
   bloc plutôt que sur celle du bloc coordonnées, où il est trois fois plus
   grand. */
.rgpd__text .email-reveal__button { padding: 3px 10px; font-size: 12.5px; }

/* Messages de retour ---------------------------------------------------- */
.alert {
  border-radius: var(--bts-radius-sm);
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.6;
}
.alert--success { background: #e4f4f1; color: #1f6b62; border: 1px solid #b7e0d9; }
.alert--error { background: #fbe9ec; color: #8f2534; border: 1px solid #f0c2ca; }

/* Pied de page réduit --------------------------------------------------- */
.footer--compact { padding: 40px var(--bts-gutter); }
.footer__inner--compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 32px;
}
.footer__logo--sm { height: 40px; }
.footer__compact-contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 20px;
}
/* Dans la barre réduite, les coordonnées se replient ensemble et restent
   légèrement plus petites : elles y côtoient logo, profils et mention légale
   sur une seule ligne, là où le pied de page complet leur donne une colonne. */
.footer--compact .footer__contact { font-size: 13.5px; }
.footer--compact .footer__contact-icon { margin-top: 1px; }
.footer--compact .social { margin-top: 0; }
.footer--compact .footer__legal { margin-left: auto; }
/* Dans le pied de page réduit, la mention et le lien forment un même bloc
   aligné à droite : le `margin-right: auto` du cas général l'en détacherait. */
.footer--compact .footer__legal-link { margin-right: 0; }

/* Page « Domaines d'expertise » ------------------------------------------ */
.page-hero__lead {
  position: relative;
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--bts-muted);
  text-wrap: pretty;
}

/* Sommaire : les huit domaines tiennent en une bande d'étiquettes, ce qui
   évite au visiteur de faire défiler la page pour savoir ce qu'elle contient. */
.domaine-toc { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 0; }
.domaine-toc__link {
  padding: 9px 16px;
  border: 1px solid var(--bts-line-strong);
  border-radius: var(--bts-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--bts-indigo);
  background: #fff;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.domaine-toc__link:hover {
  background: var(--bts-blue-soft);
  border-color: var(--bts-indigo);
  transform: translateY(-2px);
}
.domaine-toc__link:focus-visible { outline: 2px solid var(--bts-indigo); outline-offset: 3px; }

.domaine-list { display: flex; flex-direction: column; gap: 20px; }
.domaine {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  padding: 32px;
  border-radius: var(--bts-radius-lg);
  background: #fff;
  box-shadow: 0 2px 14px rgba(61, 78, 174, .07);
}
.domaine__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.domaine__title {
  font-family: var(--bts-font-title);
  font-size: 22px;
  font-weight: 700;
  color: var(--bts-indigo);
  margin: 0;
}
.domaine__desc { margin: 0; font-size: 16px; line-height: 1.6; color: var(--bts-muted); }
.domaine__metiers {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
}
.domaine__metier {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--bts-ink);
}
.domaine__mark { flex: none; font-weight: 700; color: var(--bts-teal-text); }

@media (max-width: 940px) {
  .domaine { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 26px; }
  .domaine__metiers { grid-template-columns: minmax(0, 1fr); }
}

/* Page de mentions légales / politique de confidentialité ---------------- */
/* Colonne étroite : un texte juridique se lit en 65 à 75 caractères par ligne,
   au-delà l'œil perd la ligne suivante. */
/* Aligné à gauche, comme le titre et le fil d'Ariane : centrer la colonne
   décalerait le texte par rapport à l'en-tête de page. */
.legal { max-width: 820px; }
.legal__intro {
  margin: 0 0 40px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--bts-muted);
  text-wrap: pretty;
}
.legal__body { display: flex; flex-direction: column; gap: 40px; }
.legal__block { display: flex; flex-direction: column; gap: 12px; }
.legal__title {
  font-family: var(--bts-font-title);
  font-size: 24px;
  font-weight: 700;
  color: var(--bts-indigo);
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bts-line);
}
.legal__subtitle {
  font-family: var(--bts-font-title);
  font-size: 17px;
  font-weight: 600;
  color: var(--bts-ink);
  margin: 10px 0 0;
}
.legal__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--bts-muted);
  text-wrap: pretty;
}
.legal__text strong { color: var(--bts-ink); font-weight: 700; }
.legal__text a { text-decoration: underline; }
.legal__list {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--bts-muted);
}
.legal__list strong { color: var(--bts-ink); font-weight: 700; }
.legal__list::marker, .legal__list li::marker { color: var(--bts-teal-text); }
/* Identité de l'éditeur : deux colonnes libellé / valeur, qui repassent en
   liste simple sous 560 px, où la colonne des libellés étrangle les valeurs. */
.legal__facts {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 10px 28px;
  font-size: 16px;
  line-height: 1.7;
}
.legal__facts dt { color: var(--bts-ink); font-weight: 700; }
.legal__facts dd { margin: 0; color: var(--bts-muted); }
.legal__facts .email-reveal__button { padding: 4px 12px; font-size: 15px; }
@media (max-width: 560px) {
  .legal__facts { grid-template-columns: 1fr; gap: 2px 0; }
  .legal__facts dd { margin-bottom: 10px; }
}

.legal__updated {
  margin: 6px 0 0;
  font-size: 14px;
  font-style: italic;
  color: var(--bts-muted);
}
/* Le bouton de révélation s'aligne sur la taille du texte courant. */
.legal__text .email-reveal__button { padding: 4px 12px; font-size: 15px; }

@media (max-width: 720px) {
  .legal__intro { font-size: 16.5px; }
  .legal__title { font-size: 21px; }
}

/* --------------------------------------------------------------------------
   15 bis. Page 404
   -------------------------------------------------------------------------- */
.notfound { display: flex; flex-direction: column; gap: 28px; max-width: 900px; }
.notfound__text, .notfound__help {
  margin: 0;
  font-size: 17px;
  line-height: 1.75;
  color: var(--bts-muted);
  text-wrap: pretty;
}
.notfound__help a { color: var(--bts-teal-text); font-weight: 700; text-decoration: underline; }
.notfound__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.notfound__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--bts-line);
  border-radius: var(--bts-radius);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.notfound__link:hover {
  border-color: var(--bts-line-strong);
  box-shadow: 0 10px 30px rgba(46, 58, 89, .07);
  transform: translateY(-2px);
}
.notfound__link:focus-visible { outline: 2px solid var(--bts-indigo); outline-offset: 3px; }
.notfound__link-title { font-family: var(--bts-font-title); font-weight: 700; color: var(--bts-indigo); }
.notfound__link-text { font-size: 14.5px; line-height: 1.6; color: var(--bts-muted); }

/* --------------------------------------------------------------------------
   16. Responsive — absent de la maquette (largeur fixe 1920), ajouté ici.
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  :root { --bts-gutter: 40px; --bts-section-y: 72px; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .footer__about { grid-column: 1 / -1; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .title-xl { font-size: 44px; }
  .title-lg { font-size: 34px; }
  .hero { gap: 36px; }
}

@media (max-width: 940px) {
  /* Le header mobile se réduit au logo et au bouton d'ouverture ; liens et
     appel à l'action passent dans un panneau déroulant. */
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: 8px var(--bts-gutter) 20px;
    background: #fff;
    border-bottom: 1px solid var(--bts-line-soft);
    box-shadow: 0 18px 30px rgba(46, 58, 89, .1);
  }
  .nav[data-open="true"] .nav__menu { display: flex; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    padding: 14px 0;
    width: 100%;
    border-bottom: 1px solid var(--bts-line-soft);
  }
  /* Le soulignement animé n'a pas de sens sur une entrée pleine largeur. */
  .nav__link::after { display: none; }
  .nav__link[aria-current="location"] { color: var(--bts-indigo); }
  /* Le dernier lien du panneau n'a pas de suivant : son filet ferait double
     emploi avec la bordure basse du panneau lui-même. */
  .nav__links .nav__link:last-child { border-bottom: 0; }
  /* Dans le panneau, le bouton occupe toute la largeur sous les liens, comme
     une dernière entrée mise en avant. */
  .nav__cta { margin: 12px 0 0; width: 100%; text-align: center; }

  .hero,
  .split,
  .sectors__grid,
  .grid--2,
  .grid--3 { grid-template-columns: minmax(0, 1fr); }

  .hero { padding-bottom: 56px; }
  .hero__media { order: -1; }


  .banner { grid-template-columns: minmax(0, 1fr); padding: 36px; text-align: left; }
  .cta { padding: 36px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .footer__inner--compact { justify-content: center; text-align: center; }
  .footer__compact-contact { justify-content: center; width: 100%; }
  .footer--compact .social { justify-content: center; width: 100%; }
  .footer--compact .footer__legal { margin-left: 0; width: 100%; }

  .split--reverse,
  .pledge,
  .contact { grid-template-columns: minmax(0, 1fr); }
  .split--reverse .split__media { order: -1; }
  .pledge { gap: 24px; padding: 56px var(--bts-gutter); }
  .page-hero__title { font-size: 36px; }
  .service-item { padding: 32px; }
  .form { padding: 28px; }
}

@media (max-width: 620px) {
  :root { --bts-gutter: 20px; --bts-section-y: 56px; }
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .title-xl { font-size: 34px; }
  .title-lg { font-size: 28px; }
  .title-md { font-size: 26px; }
  .lead { font-size: 17px; }
  .stats { gap: 24px; }
  .banner, .cta { padding: 28px; }
  .card--service, .quote { padding: 24px; }

  .page-hero__title { font-size: 30px; }
  .section-title, .closing__title { font-size: 26px; }
  .service-item { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px; }
  .service-item__title { font-size: 22px; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
}

/* Ancres internes : compense la hauteur de l'en-tête collant, sans quoi la
   section visée se retrouve masquée derrière lui après le défilement. */
[id] { scroll-margin-top: 96px; }

@media (max-width: 940px) {
  [id] { scroll-margin-top: 84px; }
}

/* --------------------------------------------------------------------------
   12. Compléments SEO / accessibilité
   Ajouts postérieurs à la maquette : fil d'Ariane, questions fréquentes,
   sous-titre du H1 et utilitaire de contenu réservé aux lecteurs d'écran.
   -------------------------------------------------------------------------- */

/* Texte destiné aux seules technologies d'assistance et aux robots : il
   complète les libellés de liens génériques sans alourdir le rendu. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Sous-titre du H1 : la baseline rejoint le titre principal pour que celui-ci
   porte la requête cible, sans modifier la hiérarchie visuelle du hero. */
.title-xl__sub {
  display: block;
  margin-top: 10px;
  font-family: var(--bts-font-body);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bts-muted);
}

/* Fil d'Ariane */
.breadcrumb {
  padding: 18px var(--bts-gutter) 0;
  background: #ffffff;
}
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--bts-muted);
}
.breadcrumb__item { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb__link { color: var(--bts-indigo); }
.breadcrumb__link:hover { text-decoration: underline; }
.breadcrumb__sep { color: var(--bts-line-strong); }
.breadcrumb__current { color: var(--bts-muted); }

/* Questions fréquentes (support visible du balisage FAQPage) */
.faq__list {
  display: grid;
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
}
.faq__item {
  background: #ffffff;
  border: 1px solid var(--bts-line);
  border-radius: var(--bts-radius);
  padding: 20px 24px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq__item[open] {
  border-color: var(--bts-line-strong);
  box-shadow: 0 10px 30px rgba(46, 58, 89, .06);
}
.faq__item:hover { border-color: var(--bts-line-strong); }
.faq__question {
  font-family: var(--bts-font-title);
  font-size: 17.5px;
  font-weight: 700;
  color: var(--bts-indigo);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: '+';
  flex: none;
  font-size: 22px;
  line-height: 1;
  color: var(--bts-teal-text);
  transition: transform .2s ease;
}
.faq__item[open] .faq__question::after { content: '−'; }
.faq__question:focus-visible {
  outline: 2px solid var(--bts-indigo);
  outline-offset: 4px;
  border-radius: 6px;
}
.faq__answer {
  margin: 14px 0 0;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--bts-muted);
  text-wrap: pretty;
}

@media (max-width: 720px) {
  .title-xl__sub { font-size: 18px; }
  .faq__item { padding: 18px 20px; }
  .faq__question { font-size: 16.5px; }
}

/* --------------------------------------------------------------------------
   16. Animations
   Ajout postérieur à la maquette. Trois familles, toutes désactivables :
     16.1 révélation des blocs à l'entrée dans le champ de vision ;
     16.2 flottement des pastilles décoratives ;
     16.3 micro-interactions (survol, ouverture du menu, messages).
   Seules `opacity` et `transform` sont animées : ce sont les deux propriétés
   que le navigateur compose sans recalculer la mise en page.
   -------------------------------------------------------------------------- */

/* 16.1 Révélation au défilement -------------------------------------------
   L'état masqué n'existe que si le JavaScript est actif (`scripting: enabled`) :
   sans lui, la page reste entièrement lisible, simplement sans animation.
   Filet de sécurité supplémentaire : si app.js ne s'exécute pas (erreur
   réseau, script bloqué), l'animation `bts-reveal-safety` rétablit la
   visibilité au bout de 4 s. Dès que le script prend la main il pose la classe
   `bts-js` sur <html>, ce qui la neutralise. */
@keyframes bts-reveal-safety {
  from { opacity: 0; }
  to   { opacity: 1; transform: none; }
}

@media (scripting: enabled) {
  [data-reveal],
  [data-reveal-children] > * {
    opacity: 0;
    transform: translateY(20px);
    animation: bts-reveal-safety .5s ease 4s forwards;
  }

  /* Variantes de direction, pour les blocs côte à côte. */
  [data-reveal="left"]  { transform: translateX(-28px); }
  [data-reveal="right"] { transform: translateX(28px); }
  [data-reveal="zoom"]  { transform: scale(.965); }

  .bts-js [data-reveal],
  .bts-js [data-reveal-children] > * {
    animation: none;
    transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
  }

  .bts-js [data-reveal].is-revealed,
  .bts-js [data-reveal-children].is-revealed > * {
    opacity: 1;
    transform: none;
  }

  /* Retard explicite, pour enchaîner deux blocs voisins qui ne sont pas les
     enfants d'un même conteneur (l'intitulé et le titre d'un en-tête de page,
     par exemple). */
  .bts-js [data-reveal][data-reveal-delay="1"] { transition-delay: 90ms; }
  .bts-js [data-reveal][data-reveal-delay="2"] { transition-delay: 180ms; }
  .bts-js [data-reveal][data-reveal-delay="3"] { transition-delay: 270ms; }

  /* Cascade : les enfants d'une grille entrent l'un après l'autre plutôt que
     d'un bloc. Au-delà du huitième, le retard est plafonné — une liste longue
     donnerait l'impression que la page peine à s'afficher. */
  .bts-js [data-reveal-children] > *:nth-child(2) { transition-delay: 70ms; }
  .bts-js [data-reveal-children] > *:nth-child(3) { transition-delay: 140ms; }
  .bts-js [data-reveal-children] > *:nth-child(4) { transition-delay: 210ms; }
  .bts-js [data-reveal-children] > *:nth-child(5) { transition-delay: 280ms; }
  .bts-js [data-reveal-children] > *:nth-child(6) { transition-delay: 350ms; }
  .bts-js [data-reveal-children] > *:nth-child(7) { transition-delay: 420ms; }
  .bts-js [data-reveal-children] > *:nth-child(n + 8) { transition-delay: 490ms; }
}

/* 16.2 Pastilles décoratives ----------------------------------------------
   Les `.blob` sont purement ornementales (`aria-hidden`). Un déplacement lent
   et de faible amplitude suffit à donner de la profondeur à la page ; les
   durées sont volontairement premières entre elles pour que les pastilles ne
   se synchronisent jamais. */
@keyframes bts-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -18px, 0); }
}
@keyframes bts-float-wide {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(14px, -12px, 0) scale(1.04); }
}

.blob {
  animation: bts-float 11s ease-in-out infinite;
  will-change: transform;
}
.blob--a { animation: bts-float-wide 17s ease-in-out infinite; }
.blob--b { animation-duration: 7s;  animation-delay: -3s; }
.blob--c { animation-duration: 9s;  animation-delay: -5s; }
.blob--f { animation-duration: 10s; animation-delay: -2s; }
.blob--g { animation: bts-float-wide 19s ease-in-out -6s infinite; }
.blob--h { animation-duration: 16s; }
.blob--i { animation-duration: 8s;  animation-delay: -4s; }
.blob--j { animation-duration: 12s; animation-delay: -6s; }
.blob--k { animation-duration: 9s;  animation-delay: -1s; }

/* 16.3 Micro-interactions -------------------------------------------------- */

/* Boutons : léger soulèvement au survol, enfoncement au clic. */
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--teal:hover { box-shadow: 0 10px 22px rgba(53, 167, 156, .42); }
.btn--teal { transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }

/* Cartes : l'icône accompagne le survol de la carte entière. */
.icon-tile { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.card:hover .icon-tile { transform: scale(1.08) rotate(-4deg); }

/* Visuels : léger rapprochement, contenu dans le cadre arrondi. */
.media-slot__img { transition: transform .5s ease; }
.split__media:hover .media-slot__img,
.hero__media:hover .media-slot__img { transform: scale(1.04); }

/* Étiquettes de secteurs et liens du bloc « Suivez-nous ». */
.tag { transition: transform .2s ease, background .2s ease, color .2s ease; }
.tag:hover { transform: translateY(-2px); }

/* Questions fréquentes : la réponse se déplie, le « + » pivote. */
.nav[data-open="true"] .nav__menu { animation: bts-fade-up .22s ease both; }
.faq__item[open] .faq__answer { animation: bts-fade-up .35s ease both; }
.faq__question::after { transition: transform .25s ease, color .2s ease; }
.faq__item[open] .faq__question::after { transform: rotate(180deg); }

/* Menu mobile : le panneau glisse depuis la barre plutôt que d'apparaître
   d'un coup. `display` n'étant pas transitionnable, l'effet passe par une
   animation jouée à l'affichage. */

/* Messages de retour du formulaire. */
.alert { animation: bts-fade-up .4s ease both; }

@keyframes bts-fade-up {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* 16.4 Mouvement réduit ---------------------------------------------------
   Préférence système « réduire les animations » : tout mouvement est coupé et
   les blocs à révéler sont rendus visibles immédiatement. Le contenu et
   l'ordre de lecture restent strictement identiques. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-reveal-children] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   13. Adresse de contact protégée
   Le bouton précède la révélation de l'adresse ; il adopte l'apparence d'un
   lien pour ne pas alourdir les blocs de coordonnées, tout en restant un
   <button> — c'est bien une action, pas une navigation.
   -------------------------------------------------------------------------- */
.email-reveal { display: inline-flex; align-items: center; }
.email-reveal__button {
  appearance: none;
  border: 1px dashed var(--bts-line-strong);
  background: transparent;
  border-radius: var(--bts-pill);
  padding: 6px 14px;
  font-family: var(--bts-font-body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--bts-indigo);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.email-reveal__button:hover {
  border-color: var(--bts-indigo);
  border-style: solid;
  background: var(--bts-blue-soft);
}
.email-reveal__button:focus-visible {
  outline: 2px solid var(--bts-indigo);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   14. Bandeau de consentement à la mesure d'audience
   Ancré en bas de fenêtre plutôt qu'en plein écran : il informe sans
   interrompre, le site restant consultable sans avoir à répondre.
   -------------------------------------------------------------------------- */
.consent {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 60;
  width: min(920px, calc(100% - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 20px 24px;
  background: #ffffff;
  border: 1px solid var(--bts-line-strong);
  border-radius: var(--bts-radius);
  box-shadow: 0 20px 50px rgba(46, 58, 89, .18);
}
.consent__body { flex: 1 1 380px; min-width: 0; }
.consent__title {
  margin: 0 0 6px;
  font-family: var(--bts-font-title);
  font-size: 16px;
  font-weight: 700;
  color: var(--bts-indigo);
}
.consent__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--bts-muted);
  text-wrap: pretty;
}
.consent__link { font-weight: 600; text-decoration: underline; }
.consent__actions { display: flex; gap: 12px; flex: none; }
/* Les deux boutons ont volontairement la même taille et la même lisibilité :
   un refus rendu moins accessible que l'acceptation vicierait le consentement. */
.consent__button { min-width: 132px; justify-content: center; text-align: center; }

@media (max-width: 620px) {
  .consent { bottom: 12px; padding: 18px; gap: 16px; }
  .consent__actions { width: 100%; }
  .consent__button { flex: 1; min-width: 0; }
}