/* ==========================================================================
   Medsquare — Home concept 3 · Intégration responsive
   Source visuelle : Figma « Medsquare-UI-2026 » › Home concept 3 - 1440
   Mode : responsive-inferred (desktop fidèle, tablette/mobile déduits)

   Conventions (voir integration-report.md) :
   - Tous les sélecteurs sont préfixés « ms- » et limités à .ms-home :
     aucun style global n'est livré (le thème WordPress garde la main).
   - Barlow est chargée par le thème (400 / 500 / 600 / 700 requis).
   - Breakpoints : desktop ≥ 1200px · tablette 768–1199px · mobile < 768px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
.ms-home {
  /* Couleurs (variables Figma + valeurs relevées) */
  --ms-primary: #005da3;        /* brand/primary */
  --ms-secondary: #009fdf;      /* brand/secondary */
  --ms-campaign: #c71158;       /* JFR — non tokenisé dans Figma */
  --ms-rust: #a8380f;           /* badge « Nouvelle étape » */
  --ms-muted: #575757;          /* sous-titre hero */
  --ms-on-dark: #fafafb;        /* textes sur fonds bleu / magenta */
  --ms-on-dark-title: #f2f1ea;  /* titres sur fond bleu (Pampas) */
  --ms-white: #fff;
  --ms-bg-sand: #f5f4f0;        /* hero */
  --ms-bg-light: #fafafb;       /* RDM */
  --ms-bg-mist: #f3f1f2;        /* Ultima, Actualités */
  --ms-line-grey: #d3d3d3;
  --ms-line-sand: #d5d2c9;
  --ms-banner-divider: #f1f8ff;

  /* Typographie — tailles Figma à 1440px, réduction fluide en dessous */
  --ms-font: "Barlow", sans-serif;
  --ms-fs-display: clamp(2.25rem, 1.2rem + 3.6vw, 4rem);      /* 64 — H1 / H2 */
  --ms-fs-display-xl: clamp(2.5rem, 1.2rem + 4.2vw, 4.5rem);  /* 72 — H2 JFR */
  --ms-fs-subtitle: clamp(1.5rem, 0.9rem + 2vw, 2.5rem);      /* 40 */
  --ms-fs-h3: clamp(1.5rem, 1rem + 1.2vw, 2rem);              /* 32 */
  --ms-fs-lead: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);         /* 24 */
  --ms-fs-h4: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);           /* 24 */
  --ms-fs-version: 1.375rem;   /* 22 */
  --ms-fs-banner: 1.25rem;     /* 20 */
  --ms-fs-list: 1.1875rem;     /* 19 */
  --ms-fs-intro: 1.1875rem;    /* 19 */
  --ms-fs-button: 1.125rem;    /* 18 */
  --ms-fs-body: 1rem;          /* 16 */
  --ms-fs-small: 0.875rem;     /* 14 */
  --ms-fs-meta: 0.75rem;       /* 12 — étiquettes actus (ex-9,5 px, arbitrage A5) */

  /* Mise en page */
  --ms-container: 1248px;
  --ms-gutter: clamp(20px, 6.667vw, 96px);   /* 96px à 1440 */
  --ms-rail-inset: 59px;                      /* décalage du contenu après le fil rouge (155 - 96) */
  --ms-rail-color: var(--ms-secondary);
  --ms-radius: 8px;
  --ms-radius-sm: 4px;
  --ms-blur-sm: 10px;
  --ms-blur-md: 12.5px;
  --ms-ease: 150ms ease;

  font-family: var(--ms-font);
  color: var(--ms-primary);
  -webkit-font-smoothing: antialiased;
}
#banner-header{
  display: none !important;
}
/* --------------------------------------------------------------------------
   2. Remise à zéro limitée au périmètre .ms-home
   -------------------------------------------------------------------------- */
.ms-home,
.ms-home *,
.ms-home *::before,
.ms-home *::after { box-sizing: border-box; }

.ms-home :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; padding: 0; }
.ms-home :where(h1, h2, h3, h4) { font: inherit; color: inherit; letter-spacing: normal; text-transform: none; }
.ms-home :where(a) { color: inherit; text-decoration: none; }
.ms-home :where(img) { display: block; max-width: 100%; height: auto; }
.ms-home :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.ms-home :where(a, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.ms-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Conteneur, sections et fil rouge (rail)
   -------------------------------------------------------------------------- */
.ms-container {
  position: relative;
  width: min(var(--ms-container), 100% - 2 * var(--ms-gutter));
  margin-inline: auto;
}

.ms-section { position: relative; }
.ms-section--sand { background: var(--ms-bg-sand); }
.ms-section--light { background: var(--ms-bg-light); }
.ms-section--mist { background: var(--ms-bg-mist); }
.ms-section--blue { background: var(--ms-primary); --ms-rail-color: var(--ms-white); }
.ms-section--campaign { background: var(--ms-campaign); }
.ms-section--white { background: var(--ms-white); }

/* Fil rouge : ligne verticale de 1px à 2px du bord du conteneur,
   contenu décalé de --ms-rail-inset. La ligne court sur toute la hauteur
   de la section pour rester continue d'une section à l'autre. */
.ms-rail { padding-left: var(--ms-rail-inset); }
.ms-rail::before {
  content: "";
  position: absolute;
  top: var(--ms-rail-start, 0);
  bottom: 0;
  left: 2px;
  width: 1px;
  background: var(--ms-rail-color);
  pointer-events: none;
}

/* Marqueur carré aligné sur la ligne de base de la dernière ligne du titre */
.ms-rail-title { position: relative; }
.ms-rail-title::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--ms-rail-inset) - 3px);
  bottom: 0.3em;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--ms-rail-color);
  transform: translateY(50%);
}

/* --------------------------------------------------------------------------
   4. Typographie
   -------------------------------------------------------------------------- */
.ms-display {
  font-size: var(--ms-fs-display);
  font-weight: 700;
  line-height: 1.2;
}
.ms-display--tight { line-height: 1; }         /* H1 hero : interligne 1.0 dans Figma */
.ms-display--xl { font-size: var(--ms-fs-display-xl); line-height: 1.3; }

.ms-h3 { font-size: var(--ms-fs-h3); font-weight: 700; line-height: 1.3; }
.ms-h4 { font-size: var(--ms-fs-h4); font-weight: 600; line-height: 1.1; }

.ms-lead {
  font-size: var(--ms-fs-lead);
  font-weight: 500;
  line-height: 1;
}
.ms-lead--loose { line-height: 1.3; }          /* Experio : 1.3 dans Figma */

.ms-body { font-size: var(--ms-fs-body); font-weight: 400; line-height: 1.3; }

.ms-label {
  font-size: var(--ms-fs-body);
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   5. Composants
   -------------------------------------------------------------------------- */

/* 5.1 Flèche (masque CSS : la couleur suit currentColor) */
.ms-arrow {
  flex: none;
  display: inline-block;
  width: 25px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("../img/home/icons/arrow.svg") no-repeat center / contain;
          mask: url("../img/home/icons/arrow.svg") no-repeat center / contain;
  transition: transform var(--ms-ease);
}

/* 5.2 Bouton plein — « CTA white » dans Figma */
a[class*="ms-btn"],
button[class*="ms-btn"],
input[class*="ms-btn"],
label[class*="ms-btn"],
.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  min-height: 52px;
  padding: 0 32px;
  font-size: var(--ms-fs-button);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  transition: background-color var(--ms-ease), color var(--ms-ease);
}
.ms-btn:hover .ms-arrow,
a.ms-btn:hover .ms-arrow,
button.ms-btn:hover .ms-arrow,
input.ms-btn:hover .ms-arrow,
label.ms-btn:hover .ms-arrow{
  transform: translateX(4px);
}
.ms-btn--primary,
a.ms-btn--primary,
button.ms-btn--primary,
input.ms-btn--primary,
label.ms-btn--primary{
  background-color: var(--ms-secondary);
  color: var(--ms-white);
}
.ms-btn--primary:hover,
a.ms-btn--primary:hover,
button.ms-btn--primary:hover,
input.ms-btn--primary:hover,
label.ms-btn--primary:hover{
  background-color: var(--ms-primary);
}
.ms-btn--inverse,
a.ms-btn--inverse,
button.ms-btn--inverse,
input.ms-btn--inverse,
label.ms-btn--inverse{
  background-color: var(--ms-on-dark);
  color: var(--ms-secondary);
}
.ms-btn--inverse:hover,
a.ms-btn--inverse:hover,
button.ms-btn--inverse:hover,
input.ms-btn--inverse:hover,
label.ms-btn--inverse:hover{
  background-color: var(--ms-white);
  color: var(--ms-primary);
}
.ms-btn--block,
a.ms-btn--block,
button.ms-btn--block,
input.ms-btn--block,
label.ms-btn--block{
  display: flex;
  width: 100%;
}

/* 5.3 Lien fléché (soulignement 2px, hauteur 44px) */
.ms-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 0 10px;
  border-bottom: 2px solid currentColor;
  font-size: var(--ms-fs-body);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ms-secondary);
}
.ms-link:hover .ms-arrow { transform: translateX(4px); }
.ms-link--light { color: var(--ms-white); }
.ms-link--compact { gap: 15px; padding: 0 0 5px; }   /* bandeau JFR (Figma) */

/* 5.4 Lien discret du hero (« Découvrir Experio → ») */
.ms-link-subtle {
  display: inline-block;
  padding: 12px 0 5px;
  border-bottom: 1px solid var(--ms-line-grey);
  font-size: var(--ms-fs-small);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ms-primary);
  transition: border-color var(--ms-ease);
}
.ms-link-subtle:hover { border-color: currentColor; }

/* 5.5 Eyebrow produit : LABEL ——— accroche */
.ms-eyebrow {
  display: flex;
  align-items: center;
  gap: 20px;
}
.ms-eyebrow__label {
  flex: none;
  display: flex;
  align-items: center;
  gap: 20px;
}
.ms-eyebrow__label::after {
  content: "";
  width: 110px;
  height: 1px;
  background: var(--ms-secondary);
}
.ms-eyebrow__lead { color: var(--ms-secondary); }
.ms-section--blue .ms-eyebrow__lead { color: var(--ms-white); }

/* 5.6 Colonne d'information */
.ms-info__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

/* 5.7 Étiquette (actualités) */
.ms-tag {
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid currentColor;
  font-size: var(--ms-fs-meta);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1.33px;
  text-transform: uppercase;
}
.ms-tag--dashed { border-style: dashed; }

.ms-meta {
  font-size: var(--ms-fs-meta);
  font-weight: 400;
  line-height: 1;
}

/* 5.8 Médias (cadre arrondi, flou optionnel) */
.ms-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--ms-radius);
  background: var(--ms-primary);
}
.ms-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Flou volontaire (arbitrage A2) : photos nettes en entrée, flou appliqué ici.
   Léger agrandissement pour masquer le halo clair des bords. */
/*.ms-media--blur img { filter: blur(var(--ms-blur-md)); transform: scale(1.1); }
.ms-media--blur-sm img { filter: blur(var(--ms-blur-sm)); transform: scale(1.1); }*/

/* --------------------------------------------------------------------------
   6. Bandeau campagne JFR
   -------------------------------------------------------------------------- */
.ms-banner {
  background: var(--ms-campaign);
  border-bottom: 1px solid var(--ms-line-sand);
  color: var(--ms-white);
}
.ms-banner__inner {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 64px;
  padding-block: 10px;
}
.ms-banner__date { white-space: nowrap; }
.ms-banner__divider {
  flex: none;
  width: 1px;
  height: 22px;
  background: var(--ms-banner-divider);
}
.ms-banner__title {
  font-size: var(--ms-fs-banner);
  font-weight: 700;
  line-height: 1.3;
}
.ms-banner__cta { margin-left: auto; white-space: nowrap; }

/* --------------------------------------------------------------------------
   7. Hero (slider)
   -------------------------------------------------------------------------- */
.ms-hero {
  /* Largeur de l'image : 480px à 1440, réduite proportionnellement jusqu'à 1200 */
  --ms-hero-media: min(480px, 40.4 * (min(var(--ms-container), 100vw - 2 * var(--ms-gutter)) - var(--ms-rail-inset)) / 100);
  position: relative;
  background: var(--ms-bg-sand);
  color: var(--ms-primary);
}

/* Fil rouge du hero : fixe (ne défile pas avec les slides), démarre sous le haut du titre */
.ms-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 188px;
  bottom: 0;
  left: calc(max(var(--ms-gutter), (100% - var(--ms-container)) / 2) + 2px);
  width: 1px;
  background: var(--ms-secondary);
  pointer-events: none;
}

.ms-hero__viewport {
  overflow-x: auto;                 /* sans JS : défilement horizontal natif */
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ms-hero__viewport::-webkit-scrollbar { display: none; }
.ms-hero.is-enhanced .ms-hero__viewport { overflow: hidden; }

.ms-hero__track {
  display: flex;
  transition: transform 400ms ease;
}

.ms-hero__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

.ms-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ms-hero-media);
  column-gap: 30px;
  align-items: start;
  padding-block: 60px;
  padding-left: var(--ms-rail-inset);
}

.ms-hero__content {
  display: flex;
  flex-direction: column;
  padding-top: 58px;              /* texte à 118px du haut, image à 60px */
}
.ms-hero__title { max-width: 649px; }
.ms-hero__subtitle {
  max-width: 676px;
  margin-top: 32px;
  font-size: var(--ms-fs-subtitle);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ms-muted);
}
.ms-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-top: 44px;
}

.ms-hero__media {
  aspect-ratio: 1;
  width: 100%;
}

/* Contrôles : flèches Figma centrées au-dessus de l'image (y = 23px) ;
   bouton pause ajouté entre les flèches (WCAG 2.2.2). */
.ms-hero__controls {
  position: absolute;
  z-index: 2;
  top: 17px;
  right: calc(max(var(--ms-gutter), (100% - var(--ms-container)) / 2) + (var(--ms-hero-media) - 97px) / 2);
  display: none;
  align-items: center;
  gap: 0.5px;
  color: var(--ms-primary);
}
.ms-hero.is-enhanced .ms-hero__controls { display: flex; }
.ms-hero.is-single .ms-hero__controls { display: none; }

.ms-hero__btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
}
button.ms-hero__btn::before {
  content: "";
  width: 25px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--ms-icon) no-repeat center / contain;
          mask: var(--ms-icon) no-repeat center / contain;
}
.ms-hero__btn--prev { --ms-icon: url("../img/home/icons/slider-prev.svg"); }
.ms-hero__btn--next { --ms-icon: url("../img/home/icons/slider-next.svg"); }

/* Pause / lecture : pictogramme en CSS (élément ajouté, non présent dans Figma) */
.ms-hero__btn--toggle{
  display: none !important;
}
.ms-hero__btn--toggle::before {
  width: 10px;
  height: 12px;
  -webkit-mask: none;
          mask: none;
  background: none;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.ms-hero__btn--toggle[aria-pressed="true"]::before {   /* en pause → icône lecture */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}

/* --------------------------------------------------------------------------
   8. Experio (univers étendu)
   -------------------------------------------------------------------------- */
.ms-experio { color: var(--ms-on-dark); }
.ms-experio .ms-container {
  --ms-rail-inset: 136px;          /* contenu à x = 232 dans Figma */
  padding-top: 108px;
  padding-bottom: 45px;
}
.ms-experio__head { display: flex; flex-direction: column; gap: 25px; }
.ms-experio__head .ms-eyebrow { margin-top: 14px; }   /* boîte titre Figma : 168px pour 154px de texte */
.ms-experio__title { color: var(--ms-on-dark-title); }
.ms-experio .ms-eyebrow__label { color: var(--ms-on-dark-title); }

.ms-experio__media {
  margin-top: 26px;
  aspect-ratio: 1106 / 507;
}

.ms-experio__grid {
  display: grid;
  grid-template-columns: 426fr 341fr 341fr;
  align-items: start;
  margin-top: 26px;
  border-top: 1px solid var(--ms-on-dark);
}
.ms-experio__col--intro { padding: 30px 56px 0 0; }
.ms-experio__col--intro .ms-h3 { max-width: 543px; color: var(--ms-on-dark-title); }
.ms-experio__col--intro .ms-body { margin-top: 18px; }

.ms-experio__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 48px 0 49px;
  border-left: 1px solid var(--ms-on-dark);
}
.ms-experio__card .ms-h3 { color: var(--ms-on-dark-title); }
.ms-experio__accent { color: var(--ms-secondary); }
.ms-experio__col > .ms-link { margin-left: 49px; margin-top: 12px; }

.ms-experio__cta { margin-top: 26px; }

/* --------------------------------------------------------------------------
   9. Univers compacts : RDM et Ultima
   -------------------------------------------------------------------------- */
.ms-universe .ms-container {
  display: grid;
  align-items: center;
  padding-block: 120px;
}
.ms-universe--rdm .ms-container {
  grid-template-columns: minmax(0, 701fr) minmax(0, 397fr);
  column-gap: 91px;
  padding-block: 119px 120px;
}
.ms-universe--ultima .ms-container {
  grid-template-columns: minmax(0, 1fr) 497px;
  column-gap: 0;
  padding-block: 117px;
}

.ms-universe__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}
.ms-universe__title { max-width: 4.875em; }          /* 312px à 64px : force « Exploiter / la donnée » */
.ms-universe .ms-eyebrow { min-height: 59px; }
.ms-universe .ms-eyebrow__lead { max-width: 398px; }

.ms-universe__details {
  width: 100%;
  max-width: 675px;
  padding-top: 29px;
  border-top: 1px solid var(--ms-line-grey);
}
.ms-universe--ultima .ms-universe__details { max-width: 601px; }
.ms-universe__details > .ms-body { padding-top: 4px; }

.ms-universe__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: 52px;
  row-gap: 32px;
}
.ms-universe__col { display: flex; flex-direction: column; gap: 14px; }
.ms-universe__col + .ms-universe__col { gap: 13.5px; padding-top: 5.5px; }
.ms-universe__col .ms-body { padding-top: 4px; }
.ms-universe__col + .ms-universe__col .ms-body { padding-top: 0; }

.ms-version {
  font-size: var(--ms-fs-version);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.22px;
  text-transform: none;
}
.ms-badge-new { color: var(--ms-rust); }
.ms-label--accent { color: var(--ms-secondary); }

.ms-universe__media--rdm { aspect-ratio: 397 / 499; }
.ms-universe__media--ultima { aspect-ratio: 497 / 347; }

/* --------------------------------------------------------------------------
   10. Module campagne JFR
   -------------------------------------------------------------------------- */
.ms-jfr { color: var(--ms-on-dark); }
.ms-jfr .ms-container {
  display: grid;
  grid-template-columns: minmax(0, 693fr) minmax(0, 480fr);
  column-gap: 75px;
  align-items: start;
  padding-block: 65px 50px;
}
.ms-jfr__content { display: flex; flex-direction: column; gap: 19.5px; }
.ms-jfr__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ms-jfr__meta-line { width: 60px; height: 1px; background: var(--ms-on-dark); }
.ms-jfr__title { padding-top: 4px; max-width: 774px; }
.ms-jfr__intro {
  max-width: 582px;
  padding-bottom: 18.5px;
  font-size: var(--ms-fs-intro);
  line-height: 29.45px;
}
.ms-jfr__infos {
  display: grid;
  grid-template-columns: 301px 329px;
  border-top: 1px solid var(--ms-on-dark);
}
.ms-jfr__info { display: flex; flex-direction: column; gap: 10px; padding: 20px 13px 20px 0; }
.ms-jfr__info + .ms-jfr__info { padding-left: 33px; border-left: 1px solid var(--ms-on-dark); }
.ms-jfr__info ul { padding-left: 24px; list-style: disc; }

.ms-jfr__aside { display: flex; flex-direction: column; gap: 31px; }
.ms-jfr__media {
  aspect-ratio: 480 / 362;
  border-radius: 0;
  background: var(--ms-white);
}

/* --------------------------------------------------------------------------
   11. Actualités
   -------------------------------------------------------------------------- */
.ms-news .ms-container { padding-block: 80px 53px; }
.ms-news__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  min-height: 77px;
}
.ms-news__grid {
  display: grid;
  grid-template-columns: minmax(0, 764fr) minmax(0, 420fr);
  column-gap: 64px;
  align-items: start;
  margin-top: 40px;
}

.ms-news-featured { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ms-news-featured__media {
  width: 100%;
  aspect-ratio: 764 / 382;
  border: 1px solid var(--ms-line-sand);
  border-radius: 0;
  background: var(--ms-line-sand);
}
.ms-news-featured__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding-top: 10px;
  border-top: 3px solid var(--ms-primary);
}
.ms-news-featured__meta .ms-meta:first-child { letter-spacing: 1.4px; text-transform: uppercase; }
.ms-news-featured__sep { width: 1px; height: 12px; background: var(--ms-primary); }
.ms-news-featured .ms-h3 { max-width: 598px; }
.ms-news-featured .ms-body { max-width: 520px; padding-top: 2px; }

.ms-news-list { list-style: none; }
.ms-news-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 25px 0 24px;
  border-top: 1px solid var(--ms-secondary);
}
.ms-news-item:last-child { padding-bottom: 25px; border-bottom: 1px solid var(--ms-secondary); }
.ms-news-item__meta { display: flex; align-items: center; gap: 12px; color: var(--ms-secondary); }
.ms-news-item .ms-h3 { padding-top: 2px; }
.ms-news-item a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
   12. Témoignages
   -------------------------------------------------------------------------- */
.ms-proof .ms-container { padding-block: 94px 118px; }
.ms-proof__title { color: var(--ms-on-dark-title); }
.ms-proof__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 21px;
  margin-top: 52px;
  list-style: none;
}
.ms-testimonial {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  height: 100%;
  padding: 15px;
  border-radius: var(--ms-radius);
  background: var(--ms-white);
  color: var(--ms-primary);
}
.ms-testimonial__media {
  width: 100%;
  aspect-ratio: 350 / 264;
  border-radius: var(--ms-radius-sm);
}
.ms-testimonial__media img { object-position: left top; }
.ms-testimonial .ms-h4 { padding-top: 2px; min-height: calc(3 * 1.1em + 2px); }
.ms-testimonial blockquote { padding-top: 2px; }
.ms-testimonial .ms-link { margin-top: auto; }

/* --------------------------------------------------------------------------
   13. Conversion finale
   -------------------------------------------------------------------------- */
.ms-cta .ms-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  column-gap: 0;
  align-items: start;
  padding-block: 48px 63px;
}
.ms-cta__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  padding-right: 40px;
}
.ms-cta__text { max-width: 630px; font-size: var(--ms-fs-lead); line-height: 1.3; }
.ms-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  padding-top: 10px;
}

.ms-cta__solutions {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 72px;
  padding-left: 57px;
  border-left: 1px solid var(--ms-secondary);
}
.ms-solutions { list-style: none; }
.ms-solutions li { border-top: 1px solid var(--ms-secondary); }
.ms-solutions li:last-child { border-bottom: 1px solid var(--ms-secondary); }
.ms-solutions a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60.5px;
  padding-left: 28px;
  font-size: var(--ms-fs-list);
  font-weight: 600;
  letter-spacing: -0.285px;
  color: var(--ms-primary);
  transition: background-color var(--ms-ease);
}
.ms-solutions .ms-arrow { color: var(--ms-secondary); margin-top: 4px; }
.ms-solutions a:hover { background: var(--ms-bg-light); }
.ms-solutions a:hover .ms-arrow { transform: translateX(4px); }

/* ==========================================================================
   14. Tablette — 768 à 1199px
   ========================================================================== */
@media (max-width: 1199px) {
  .ms-home { --ms-rail-inset: 40px; }

  /* Hero : texte puis image, contrôles sous l'image */
  .ms-hero::before { top: 128px; }                /* 58px de padding + 70px, comme sur desktop */
  .ms-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
    padding-left: var(--ms-rail-inset);
    padding-block: 58px 24px;
  }
  .ms-hero__content { padding-top: 0; }
  .ms-hero__media { aspect-ratio: 16 / 9; }
  /* Les contrôles passent visuellement sous l'image (ordre DOM inchangé) */
  .ms-hero { display: flex; flex-direction: column; }
  .ms-hero__viewport { order: 1; }
  .ms-hero__controls {
    order: 2;
    position: static;
    width: min(var(--ms-container), 100% - 2 * var(--ms-gutter));
    margin-inline: auto;
    padding: 0 0 40px var(--ms-rail-inset);
    gap: 4px;
  }
  .ms-hero__btn { width: 44px; height: 44px; }

  /* Experio : même retrait que les autres sections */
  .ms-experio .ms-container { --ms-rail-inset: 40px; padding-top: 80px; padding-bottom: 64px; }
  .ms-experio__grid { grid-template-columns: 1fr 1fr; }
  .ms-experio__col--intro { grid-column: 1 / -1; padding: 30px 0 32px; }
  .ms-experio__col--intro .ms-h3 { max-width: 640px; }
  .ms-experio__col--intro + .ms-experio__col .ms-experio__card { padding-left: 0; border-left: 0; }
  .ms-experio__col--intro + .ms-experio__col > .ms-link { margin-left: 0; }
  .ms-experio__col--intro + .ms-experio__col { border-top: 1px solid var(--ms-on-dark); }
  .ms-experio__col:last-child { border-top: 1px solid var(--ms-on-dark); }
  .ms-experio__col:last-child .ms-experio__card { padding-right: 0; }
  .ms-experio__cta { margin-top: 40px; }

  /* RDM / Ultima : texte puis image (paysage) */
  .ms-universe .ms-container,
  .ms-universe--rdm .ms-container,
  .ms-universe--ultima .ms-container {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
    padding-block: 80px;
  }
  .ms-universe__media--rdm,
  .ms-universe__media--ultima { aspect-ratio: 16 / 9; }

  /* JFR : contenu puis visuel + CTA */
  .ms-jfr .ms-container {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
    padding-block: 64px;
  }
  .ms-jfr__aside { max-width: 640px; }

  /* Actualités : une colonne */
  .ms-news .ms-container { padding-block: 72px 64px; }
  .ms-news__grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }

  /* Témoignages : défilement horizontal (aucune carte supprimée) */
  .ms-proof .ms-container { padding-block: 80px; }
  .ms-proof__list {
    display: flex;
    gap: 21px;
    margin-right: calc(-1 * var(--ms-gutter));
    padding: 0 var(--ms-gutter) 16px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .ms-proof__list > li { flex: 0 0 min(380px, 46%); scroll-snap-align: start; }
  .ms-proof__list:focus-visible { outline: 2px solid var(--ms-white); outline-offset: 4px; }

  /* Conversion : empilée */
  .ms-cta .ms-container { grid-template-columns: minmax(0, 1fr); padding-block: 72px; }
  .ms-cta__content { padding-right: 0; }
  .ms-cta__solutions { margin-top: 56px; max-width: 640px; }
}

/* ==========================================================================
   15. Mobile — moins de 768px
   ========================================================================== */
@media (max-width: 767px) {
  .ms-home { --ms-rail-inset: 24px; }

  /* Bandeau : date au-dessus du titre, lien sur sa propre ligne */
  .ms-banner__inner { flex-wrap: wrap; gap: 4px 16px; padding-block: 12px 14px; }
  .ms-banner__divider { display: none; }
  .ms-banner__date { flex-basis: 100%; }
  .ms-banner__title { flex-basis: 100%; font-size: 1.125rem; }
  .ms-banner__cta { margin-left: 0; margin-top: 8px; }

  .ms-hero::before { top: 118px; }
  .ms-hero__inner { padding-block: 48px 24px; row-gap: 40px; }
  .ms-hero__subtitle { margin-top: 24px; }
  .ms-hero__actions { margin-top: 32px; }
  .ms-hero__actions .ms-btn { width: 100%; }
  .ms-hero__media { aspect-ratio: 4 / 3; }
  .ms-hero__controls { padding-bottom: 32px; }

  .ms-eyebrow { flex-direction: column; align-items: flex-start; gap: 12px; }

  .ms-experio .ms-container { --ms-rail-inset: 24px; padding-top: 64px; padding-bottom: 56px; }
  .ms-experio__media { aspect-ratio: 4 / 3; }
  .ms-experio__grid { grid-template-columns: minmax(0, 1fr); }
  .ms-experio__card,
  .ms-experio__col:last-child .ms-experio__card { padding: 30px 0 0; border-left: 0; }
  .ms-experio__col > .ms-link { margin-left: 0; }
  .ms-experio__col:not(:first-child) { padding-bottom: 32px; }
  .ms-experio__cta { width: 100%; }

  .ms-universe .ms-container,
  .ms-universe--rdm .ms-container,
  .ms-universe--ultima .ms-container { padding-block: 64px; row-gap: 40px; }
  .ms-universe .ms-eyebrow { min-height: 0; }
  .ms-universe__cols { grid-template-columns: minmax(0, 1fr); }
  .ms-universe__media--rdm,
  .ms-universe__media--ultima { aspect-ratio: 4 / 3; }
  .ms-universe .ms-btn { width: 100%; }

  .ms-jfr .ms-container { padding-block: 56px; }
  .ms-jfr__infos { grid-template-columns: minmax(0, 1fr); }
  .ms-jfr__info { padding-right: 0; }
  .ms-jfr__info + .ms-jfr__info { padding-left: 0; border-left: 0; border-top: 1px solid var(--ms-on-dark); }

  .ms-news .ms-container { padding-block: 56px; }
  .ms-news-item .ms-h3 { font-size: 1.5rem; }

  .ms-proof .ms-container { padding-block: 64px; }
  .ms-proof__list { margin-top: 40px; }
  .ms-proof__list > li { flex-basis: 85%; }

  .ms-cta .ms-container { padding-block: 56px; }
  .ms-cta__actions .ms-btn { width: 100%; }
  .ms-cta__solutions { padding-left: 0; border-left: 0; margin-top: 48px; }
  .ms-solutions a { padding-left: 0; }
}

/* --------------------------------------------------------------------------
   16. Préférences utilisateur
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ms-home *,
  .ms-home *::before,
  .ms-home *::after {
    transition-duration: 0.01ms !important;   /* exception documentée : préférence système */
  }
}

#page-content:has(.ms-home){
  margin-top: 120px;
}