/*
Theme Name: Meta 2i
Theme URI: https://meta2i.com
Author: Meta 2i
Description: Thème custom pour le site meta2i.com — refonte 2026, éditeur/intégrateur MES. Rendu en dur fidèle à la maquette ; zones de gestion en back-office (Références, Modules, Offres). Compatible multisite + Polylang.
Version: 3.10.198
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: meta2i
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
/* Police de remplacement de Century Gothic (3.10.60). */
@font-face {
  font-family: 'TeX Gyre Adventor';
  src: url('assets/fonts/texgyreadventor-regular.woff2') format('woff2'), url('assets/fonts/texgyreadventor-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TeX Gyre Adventor';
  src: url('assets/fonts/texgyreadventor-bold.woff2') format('woff2'), url('assets/fonts/texgyreadventor-bold.otf') format('opentype');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Échelle des tailles de texte (09/10/2026, « on change trop souvent de
     taille ») : six tailles pour tout le texte courant, au lieu d'une
     trentaine (12, 12,5, 13, 14, 14,5, 15…). Les grands titres et les
     chiffres (30 px et plus) gardent leurs tailles propres. */
  --m2i-fs-xs: 12px;   /* étiquettes, surtitres, mentions */
  --m2i-fs-sm: 14px;   /* texte secondaire : boutons, légendes, notes */
  --m2i-fs-base: 16px; /* texte courant */
  --m2i-fs-md: 18px;   /* texte de lecture, accroches */
  --m2i-fs-lg: 21px;   /* titres de cartes */
  --m2i-fs-xl: 26px;   /* intertitres */
  --m2i-yellow: #F0BE2C;
  /* Couleurs de marque (06/10/2026) : le jaune est la couleur de Meta 2i,
     sur tout le site ; l'orange est celle de KmProd, réservé aux zones qui
     parlent de KmProd et de ses offres (voir .m2i-kmprod-scope plus bas).
     --m2i-accent porte la couleur de la zone, --m2i-accent-deep sa version
     pour les pictogrammes sur fond clair. Ni le jaune ni l'orange ne servent
     de couleur de texte sur fond clair : contraste insuffisant (audit UX). */
  --m2i-kmprod: #FE7415;
  --m2i-yellow-deep: #A67C00;
  --m2i-accent: var(--m2i-yellow);
  --m2i-accent-deep: var(--m2i-yellow-deep);
  --m2i-orange: var(--m2i-kmprod);
  --m2i-dark: #111419;
  --m2i-darker: #0D1117;
  --m2i-bg-light: #F7F7F5;
  --m2i-border: #E5E7EB;
  --m2i-border-light: #EEEDE8;
  --m2i-border-lighter: #F3F4F6;
  --m2i-text-body: #374151;
  --m2i-text-gray: #6B7280;
  --m2i-text-gray-light: #9CA3AF;
  /* Century Gothic si le visiteur l'a (licence web non acquise : elle n'est
     pas servie par le site), sinon TeX Gyre Adventor, police libre très
     proche servie par le thème (assets/fonts, licence GUST, 06/10/2026). */
  --m2i-font: 'Century Gothic', 'CenturyGothic', 'TeX Gyre Adventor', 'Avant Garde', Futura, 'Trebuchet MS', sans-serif;
  --m2i-max-width: 1280px;
  --m2i-header-height: 68px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Le header est fixe (voir .m2i-header) : sans ce réglage, un lien d'ancre
   (#offres, #solutions...) positionne la section juste sous le header,
   cachée. scroll-padding-top décale le point d'arrivée de la hauteur du
   header, pour toute navigation par ancre (clic menu, chargement direct
   d'une URL avec #id). */
html {
  scroll-padding-top: var(--m2i-header-height);
}

body {
  font-family: var(--m2i-font);
  background: #fff;
  color: var(--m2i-dark);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* Texte réservé aux lecteurs d'écran. WordPress fournit bien cette classe, mais
   seulement quand la CSS des blocs est chargée — elle ne l'est pas sur toutes
   les pages du thème. On la définit donc ici pour ne pas en dépendre. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  word-wrap: normal !important;
}

@keyframes m2i-pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

.m2i-container {
  max-width: var(--m2i-max-width);
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.m2i-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--m2i-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 56px;
  background: #fff;
  border-bottom: 1px solid var(--m2i-border);
  box-shadow: 0 1px 12px rgba(0, 0, 0, .06);
}

/* La barre d'admin WordPress est elle aussi fixée en haut du viewport : sans
   ce décalage, elle se superpose à notre header (aussi fixe). WordPress pose
   automatiquement la classe "admin-bar" sur <body> quand la barre est
   affichée (via body_class(), déjà appelé dans header.php). Les seuils
   32px/46px et le point de rupture 782px reproduisent ceux de la barre
   d'admin elle-même (wp-admin/css/admin-bar.min.css). */
body.admin-bar .m2i-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .m2i-header { top: 46px; }
}
/* Sous 600 px, WordPress passe la barre d'admin en position absolue : elle
   défile avec la page et laissait un trou de 46 px au-dessus du header, par
   où le contenu apparaissait (3.10.36). On la garde fixe, comme au-dessus. */
@media screen and (max-width: 600px) {
  body.admin-bar #wpadminbar { position: fixed; }
}

.m2i-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.m2i-header__logo img { height: 36px; object-fit: contain; }

.m2i-header__menu {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}
.m2i-header__menu a {
  font-size: var(--m2i-fs-base);
  font-weight: 500;
  color: var(--m2i-text-body);
}

/* Rubrique en cours (inc/nav-structure.php) : le visiteur sait où il est.
   Texte foncé et soulignement jaune sous l'entrée de premier niveau ; dans un
   sous-menu, la page en cours passe en gras. */
.m2i-header__menu > .current-menu-item > a,
.m2i-header__menu > .current-menu-ancestor > a {
  color: var(--m2i-dark);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--m2i-yellow);
}
.m2i-header__menu .sub-menu .current-menu-item > a { color: var(--m2i-dark); font-weight: 700; }

/* --------------------------------------------------------------------------
   Sous-menus du header (1 niveau, cf. 'depth' => 2 dans header.php).
   Ouverture au survol ET au focus clavier (:focus-within) : pas de JS, et
   le menu reste atteignable en tabulation.
   -------------------------------------------------------------------------- */
.m2i-header__menu li { position: relative; }

/* Chevron sur les entrées qui ont un sous-menu. */
.m2i-header__menu .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 7px;
  vertical-align: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}

/* Passerelle invisible entre le lien parent et le panneau : sans elle, le
   survol se perd dans l'espace vide dès que la souris descend. */
.m2i-header__menu .menu-item-has-children::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
}

.m2i-header__menu .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 210px;
  padding: 8px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--m2i-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .10);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 210;
}

.m2i-header__menu .menu-item-has-children:hover > .sub-menu,
.m2i-header__menu .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.m2i-header__menu .sub-menu li { display: block; }

.m2i-header__menu .sub-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}

.m2i-header__menu .sub-menu a:hover,
.m2i-header__menu .sub-menu a:focus-visible {
  background: var(--m2i-bg-light);
  color: var(--m2i-dark);
}

.m2i-btn-cta {
  background: var(--m2i-yellow);
  color: var(--m2i-dark);
  font-size: var(--m2i-fs-sm);
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 7px;
  letter-spacing: .1px;
  display: inline-block;
}

/* Bouton Support : présent à côté du CTA, volontairement moins appuyé que lui
   (contour plutôt qu'aplat jaune) — c'est un service, pas une conversion. */
.m2i-btn-support {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--m2i-fs-sm);
  font-weight: 600;
  color: var(--m2i-text-body);
  border: 1px solid var(--m2i-border);
  border-radius: 7px;
  padding: 9px 15px;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.m2i-btn-support:hover,
.m2i-btn-support:focus-visible {
  color: var(--m2i-dark);
  border-color: var(--m2i-dark);
  background: var(--m2i-bg-light);
}

/* display:contents — le conteneur ne crée PAS de boîte sur desktop : .m2i-header__menu
   et .m2i-header__utils restent les enfants flex directs du header, donc la mise en
   page desktop est strictement inchangée. Sous 768px il redevient une boîte (voir le
   media query « Responsive ») et sert de panneau au burger. */
.m2i-header__collapse { display: contents; }

.m2i-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--m2i-border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--m2i-dark);
}
.m2i-burger { display: block; width: 20px; height: 14px; position: relative; }
.m2i-burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .22s ease, opacity .18s ease, top .22s ease;
}
.m2i-burger span:nth-child(1) { top: 0; }
.m2i-burger span:nth-child(2) { top: 6px; }
.m2i-burger span:nth-child(3) { top: 12px; }

/* Croix quand le panneau est ouvert. */
.m2i-header.is-open .m2i-burger span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.m2i-header.is-open .m2i-burger span:nth-child(2) { opacity: 0; }
.m2i-header.is-open .m2i-burger span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.m2i-header__utils { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Sélecteur langue/pays (globe + code) dans le header, avec panneau
   déroulant natif via <details>/<summary> (pas de dépendance JS pour le
   toggle ; assets/js/lang-switcher.js ferme juste le panneau au clic
   extérieur, en confort). */
.m2i-lang-switcher { position: relative; }
.m2i-lang-switcher__trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--m2i-fs-sm);
  font-weight: 700;
  color: var(--m2i-text-body);
  cursor: pointer;
  list-style: none;
  padding: 6px 4px;
  user-select: none;
}
.m2i-lang-switcher__trigger::-webkit-details-marker { display: none; }
.m2i-lang-switcher__trigger:hover { color: var(--m2i-dark); }

.m2i-lang-switcher__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--m2i-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
  padding: 16px;
  z-index: 210;
}
.m2i-lang-switcher__country {
  font-size: var(--m2i-fs-sm);
  font-weight: 700;
  color: var(--m2i-dark);
  margin-bottom: 10px;
}
.m2i-lang-switcher__list { list-style: none; margin-bottom: 14px; }
.m2i-lang-switcher__list li + li { margin-top: 2px; }
.m2i-lang-switcher__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--m2i-fs-sm);
  color: var(--m2i-text-body);
  padding: 7px 6px;
  border-radius: 6px;
}
.m2i-lang-switcher__list a:hover { background: var(--m2i-bg-light); }
.m2i-lang-switcher__list a.is-current { color: var(--m2i-dark); font-weight: 700; }
.m2i-lang-switcher__list a svg { color: var(--m2i-accent-deep); flex-shrink: 0; }

.m2i-lang-switcher__change {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-size: var(--m2i-fs-sm);
  font-weight: 600;
  color: var(--m2i-dark);
  background: var(--m2i-bg-light);
  border: 1px solid var(--m2i-border);
  border-radius: 100px;
  padding: 9px 14px;
}
.m2i-lang-switcher__change:hover { background: var(--m2i-border-lighter); }

/* ==========================================================================
   Hero
   ========================================================================== */
/* Le hero occupe tout l'écran et les chiffres doivent y rester visibles, quelle
   que soit la hauteur de la fenêtre. Tailles et marges fixes (calées sur un
   grand écran) faisaient dépasser le contenu sur un portable : à 1536 x 730,
   les chiffres tombaient à 714-818px, sous la ligne de flottaison. Elles
   suivent maintenant la hauteur de fenêtre (vh) entre un plancher et le
   plafond d'origine, qui reste atteint sur grand écran. */
.m2i-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.m2i-hero__media {
  position: absolute;
  inset: 0;
  background: var(--m2i-darker);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.m2i-hero__media video {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: translate(-50%, -50%) scale(1.45);
  transform-origin: center center;
}

.m2i-hero__gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Deux voiles (retour du 03/10/2026 sur la lisibilité) : un dégradé
     horizontal assombrit la moitié gauche, où se tient le texte, et laisse la
     vidéo visible à droite ; le dégradé vertical d'origine fonce le bas. */
  background:
    linear-gradient(to right, rgba(13, 17, 23, .72) 0%, rgba(13, 17, 23, .55) 45%, rgba(13, 17, 23, 0) 80%),
    linear-gradient(to bottom, rgba(13, 17, 23, .45) 0%, rgba(13, 17, 23, .35) 30%, rgba(13, 17, 23, .7) 65%, rgba(13, 17, 23, .95) 100%);
}

.m2i-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--m2i-max-width);
  margin: 0 auto;
  width: 100%;
  padding: calc(var(--m2i-header-height) + clamp(12px, 2.5vh, 32px)) 56px clamp(16px, 3.5vh, 48px);
}

.m2i-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(240, 190, 44, .35);
  padding: 6px 18px;
  border-radius: 100px;
  margin-bottom: clamp(10px, 2.6vh, 36px);
  background: rgba(240, 190, 44, .07);
  backdrop-filter: blur(8px);
}
/* Séparateur du badge : un point jaune dessiné, et non le glyphe « · », que
   la police décentrait. La marge gauche retranche l'espacement de lettre
   laissé après le mot précédent, pour un point à égale distance des mots. */
.m2i-hero__badge-sep {
  display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--m2i-yellow); vertical-align: middle;
  position: relative; top: -1px;
  margin: 0 .75em 0 calc(.75em - 1.5px);
}
.m2i-hero__badge span {
  font-size: var(--m2i-fs-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, .75);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.m2i-hero__title {
  font-size: clamp(34px, min(5.2vw, 7.2vh), 72px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.04em;
  color: #fff;
  margin-bottom: clamp(10px, 2.2vh, 28px);
  max-width: 860px;
}
.m2i-hero__title em { color: var(--m2i-yellow); font-style: normal; }

.m2i-hero__subtitle {
  font-size: clamp(var(--m2i-fs-base), 2.1vh, var(--m2i-fs-md));
  line-height: 1.7;
  color: rgba(255, 255, 255, .8);
  max-width: 560px;
  margin-bottom: clamp(16px, 3.4vh, 44px);
}

.m2i-hero__actions {
  display: flex;
  gap: 12px;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: clamp(18px, 4.4vh, 64px);
}
.m2i-btn-primary {
  background: var(--m2i-accent);
  color: var(--m2i-dark);
  font-size: var(--m2i-fs-base);
  font-weight: 700;
  padding: 16px 36px;
  border-radius: 8px;
}
.m2i-btn-outline {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: var(--m2i-fs-base);
  font-weight: 500;
  padding: 16px 28px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(8px);
}

.m2i-hero__stats {
  display: flex;
  gap: 0;
  padding-top: clamp(14px, 2.8vh, 36px);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.m2i-hero__stat {
  padding: 0 52px;
  border-right: 1px solid rgba(255, 255, 255, .12);
  text-align: center; /* Chiffre et libellé centrés l'un sur l'autre (07/10/2026). */
}
.m2i-hero__stat:first-child { padding-left: 0; }
.m2i-hero__stat:last-child { border-right: none; }
.m2i-hero__stat-value {
  font-size: clamp(28px, 5vh, 48px);
  font-weight: 900;
  color: var(--m2i-yellow);
  line-height: 1;
  letter-spacing: -2px;
}
.m2i-hero__stat-label {
  font-size: var(--m2i-fs-xs);
  line-height: 1.4;
  color: rgba(255, 255, 255, .65);
  margin-top: 6px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* ==========================================================================
   Secteurs — bandeau sous le hero. Texte réel + liens vers l'archive de
   chaque terme m2i_sector (déjà publique), pour du maillage interne ciblé
   plutôt qu'un simple mot-clé.
   ========================================================================== */
.m2i-sectors { border-bottom: 1px solid var(--m2i-border); }
.m2i-sectors__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
  padding-block: 22px;
}
.m2i-sectors__intro { font-size: var(--m2i-fs-sm); color: var(--m2i-text-gray); margin: 0; }
.m2i-sectors__intro strong { color: var(--m2i-dark); font-weight: 700; }
.m2i-sectors__list { display: flex; flex-wrap: wrap; gap: 8px 32px; list-style: none; margin: 0; padding: 0; }
.m2i-sectors__list a { font-size: var(--m2i-fs-base); font-weight: 700; color: var(--m2i-text-body); letter-spacing: -.2px; }
.m2i-sectors__list a:hover, .m2i-sectors__list a:focus-visible { color: var(--m2i-dark); text-decoration: underline; text-decoration-color: var(--m2i-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.m2i-sectors__list a.m2i-sectors__all { font-weight: 600; color: var(--m2i-dark); text-decoration: underline; text-decoration-color: var(--m2i-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Le bandeau en pied du hero (retour du 03/10/2026) : il fait partie du
   premier écran, sur un voile sombre au-dessus de la vidéo. Il remplace
   l'indicateur « Scroll », qui occupait ce coin. */
.m2i-sectors--hero {
  position: relative;
  z-index: 2;
  border-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: rgba(13, 17, 23, .55);
  backdrop-filter: blur(8px);
}
.m2i-sectors--hero .m2i-sectors__row { padding-block: clamp(14px, 2.4vh, 22px); }
.m2i-sectors--hero .m2i-sectors__intro { color: rgba(255, 255, 255, .7); }
.m2i-sectors--hero .m2i-sectors__intro strong { color: #fff; }
/* Secteurs en pastilles bordées (retour : « il faut comprendre qu'ils sont
   cliquables ») : une forme de bouton, qui se remplit de jaune au survol. */
.m2i-sectors--hero .m2i-sectors__list { gap: 8px 10px; }
.m2i-sectors--hero .m2i-sectors__list a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 100px;
  font-size: var(--m2i-fs-sm); color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .06);
  transition: background .15s, color .15s, border-color .15s;
}
.m2i-sectors--hero .m2i-sectors__list a:hover,
.m2i-sectors--hero .m2i-sectors__list a:focus-visible { background: var(--m2i-yellow); border-color: var(--m2i-yellow); color: var(--m2i-dark); }
.m2i-sectors--hero .m2i-sectors__list a.m2i-sectors__all { color: var(--m2i-yellow); border-color: rgba(240, 190, 44, .55); background: rgba(240, 190, 44, .08); }
.m2i-sectors--hero .m2i-sectors__list a.m2i-sectors__all:hover,
.m2i-sectors--hero .m2i-sectors__list a.m2i-sectors__all:focus-visible { background: var(--m2i-yellow); color: var(--m2i-dark); }
/* Pastilles : jamais soulignées, ni au repos ni au survol (3.10.62). Le
   soulignement des liens de secteurs (3.10.54) ne vaut que hors du hero. */
.m2i-sectors--hero .m2i-sectors__list a,
.m2i-sectors--hero .m2i-sectors__list a:hover,
.m2i-sectors--hero .m2i-sectors__list a:focus-visible { text-decoration: none; }

/* ==========================================================================
   Pages secteurs (taxonomy-m2i_sector.php) et page « Secteurs d'activité ».
   Même vocabulaire que l'accueil : en-tête sombre, sections blanches
   bordées, cas d'usage sur fond sombre, CTA jaune.
   ========================================================================== */
.m2i-sector-draft {
  position: relative; z-index: 150;
  margin-top: var(--m2i-header-height);
  background: #FFF4D6; border-bottom: 1px solid var(--m2i-yellow);
  font-size: var(--m2i-fs-sm); color: var(--m2i-dark);
}
.m2i-sector-draft .m2i-container { padding-block: 10px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.m2i-sector-draft a { font-weight: 700; text-decoration: underline; }
.m2i-sector-draft + .m2i-sector-hero { padding-top: 64px; }

.m2i-sector-hero {
  background: var(--m2i-darker);
  color: #fff;
  padding: calc(var(--m2i-header-height) + 64px) 0 80px;
}
.m2i-sector-hero__title {
  font-size: 64px; font-weight: 900; line-height: 1.02; letter-spacing: -2.5px;
  margin-bottom: 24px; max-width: 900px;
}
.m2i-sector-hero__lede { font-size: var(--m2i-fs-lg); line-height: 1.65; color: rgba(255, 255, 255, .68); max-width: 640px; margin-bottom: 40px; }
.m2i-sector-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.m2i-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 40px; font-size: var(--m2i-fs-sm); }
.m2i-breadcrumb li { color: rgba(255, 255, 255, .5); }
.m2i-breadcrumb li + li::before { content: "/"; margin-right: 6px; color: rgba(255, 255, 255, .3); }
.m2i-breadcrumb a { color: rgba(255, 255, 255, .75); }
.m2i-breadcrumb a:hover, .m2i-breadcrumb a:focus-visible { color: var(--m2i-yellow); }
.m2i-breadcrumb [aria-current] { color: #fff; }

/* Sous-secteurs métiers : cartes cliquables juste sous l'en-tête. */
.m2i-sector-subs { padding: 56px 0; border-bottom: 1px solid var(--m2i-border); }
.m2i-sector-subs__title { font-size: var(--m2i-fs-sm); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--m2i-text-gray); margin-bottom: 20px; }
.m2i-sector-subs__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.m2i-sector-subs__list a {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; height: 100%;
  padding: 20px 22px; border: 1px solid var(--m2i-border); border-radius: 12px; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.m2i-sector-subs__list a:hover, .m2i-sector-subs__list a:focus-visible {
  border-color: var(--m2i-yellow); box-shadow: 0 8px 24px rgba(0, 0, 0, .07); transform: translateY(-2px);
}
.m2i-sector-subs__name { font-size: var(--m2i-fs-md); font-weight: 800; color: var(--m2i-dark); }
.m2i-sector-subs__lede { grid-column: 1; font-size: var(--m2i-fs-base); line-height: 1.55; color: var(--m2i-text-gray); }
.m2i-sector-subs__arrow { grid-column: 2; grid-row: 1; display: flex; align-items: center; color: var(--m2i-accent-deep); }

/* Titre à gauche, texte à droite (enjeux, FAQ). */
.m2i-sector-split { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
.m2i-sector-prose p { font-size: var(--m2i-fs-md); line-height: 1.75; color: var(--m2i-text-body); }
.m2i-sector-prose p + p { margin-top: 20px; }

/* Cas d'usage : fond sombre, grille numérotée (le <ol> porte l'ordre). */
.m2i-sector-usecases { background: var(--m2i-dark); }
.m2i-sector-usecases .m2i-h2 { color: #fff; max-width: 760px; }
/* Cartes séparées, 3 colonnes au plus : une grille à filets laissait des
   cases vides visibles quand le nombre de cas ne remplit pas la rangée. */
.m2i-usecase-grid {
  list-style: none; counter-reset: m2i-usecase;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px;
}
.m2i-usecase {
  counter-increment: m2i-usecase; padding: 30px 28px 32px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px;
}
.m2i-usecase::before {
  content: counter(m2i-usecase, decimal-leading-zero);
  display: block; margin-bottom: 18px; font-size: var(--m2i-fs-xs); font-weight: 700; letter-spacing: 2px; color: var(--m2i-yellow);
}
.m2i-usecase__title { font-size: var(--m2i-fs-lg); font-weight: 800; color: #fff; letter-spacing: -.3px; line-height: 1.3; margin-bottom: 10px; }
.m2i-usecase__text { font-size: var(--m2i-fs-base); line-height: 1.65; color: rgba(255, 255, 255, .72); }

/* Méthode : les 4 piliers en ligne. */
.m2i-sector-pillars {
  list-style: none; counter-reset: m2i-step;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 48px 0 40px;
}
.m2i-sector-pillars li { counter-increment: m2i-step; padding-top: 20px; border-top: 3px solid var(--m2i-yellow); }
.m2i-sector-pillars li::before { content: counter(m2i-step, decimal-leading-zero); display: block; font-size: var(--m2i-fs-xs); font-weight: 700; letter-spacing: 2px; color: var(--m2i-dark); margin-bottom: 8px; }
.m2i-sector-pillars h3 { font-size: var(--m2i-fs-lg); font-weight: 800; color: var(--m2i-dark); margin-bottom: 8px; }
.m2i-sector-pillars p { font-size: var(--m2i-fs-base); line-height: 1.65; color: var(--m2i-text-gray); }

/* FAQ : <details> natifs, accessibles au clavier sans JS. */
.m2i-faq__item { border-bottom: 1px solid var(--m2i-border); }
.m2i-faq__item:first-child { border-top: 1px solid var(--m2i-border); }
.m2i-faq__item summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 22px 40px 22px 0; font-size: var(--m2i-fs-md); font-weight: 700; color: var(--m2i-dark); line-height: 1.4;
}
.m2i-faq__item summary::-webkit-details-marker { display: none; }
.m2i-faq__item summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: var(--m2i-fs-xl); font-weight: 400; color: var(--m2i-accent-deep);
}
.m2i-faq__item[open] summary::after { content: "–"; }
.m2i-faq__item summary:focus-visible { outline: 2px solid var(--m2i-yellow); outline-offset: 4px; }
.m2i-faq__item p { padding-bottom: 24px; font-size: var(--m2i-fs-md); line-height: 1.75; color: var(--m2i-text-body); max-width: 70ch; }

.m2i-sector-others { padding: 48px 0; border-top: 1px solid var(--m2i-border); }
.m2i-sector-others__title { font-size: var(--m2i-fs-sm); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--m2i-text-gray); margin-bottom: 16px; }

/* Page « Secteurs d'activité » : une carte par secteur principal. */
.m2i-sector-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px; margin: 40px 0; }
.m2i-sector-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 30px 28px 28px; background: #fff;
  border: 1px solid var(--m2i-border); border-top: 3px solid var(--m2i-yellow); border-radius: 14px;
}
.m2i-sector-card__title { font-size: var(--m2i-fs-xl); font-weight: 900; letter-spacing: -.6px; line-height: 1.2; }
.m2i-sector-card__title a:hover, .m2i-sector-card__title a:focus-visible { color: var(--m2i-dark); text-decoration: underline; text-decoration-color: var(--m2i-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.m2i-sector-card__lede { font-size: var(--m2i-fs-md); line-height: 1.65; color: var(--m2i-text-gray); }
.m2i-sector-card__subs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.m2i-sector-card__subs a {
  display: inline-block; padding: 6px 12px; border-radius: 100px;
  background: var(--m2i-bg-light); border: 1px solid var(--m2i-border);
  font-size: var(--m2i-fs-sm); font-weight: 600; color: var(--m2i-text-body);
}
.m2i-sector-card__subs a:hover, .m2i-sector-card__subs a:focus-visible { border-color: var(--m2i-yellow); color: var(--m2i-dark); }
.m2i-sector-card .m2i-link-underline { margin-top: auto; align-self: flex-start; }

/* Focus métier : texte à gauche, points clés cochés à droite dans une carte. */
.m2i-sector-focus { display: grid; grid-template-columns: 6fr 5fr; gap: 72px; align-items: start; }
.m2i-sector-focus .m2i-h2 { margin-bottom: 24px; }
.m2i-sector-focus__text { font-size: var(--m2i-fs-md); line-height: 1.75; color: var(--m2i-text-body); margin-bottom: 20px; }
.m2i-sector-focus .m2i-link-underline { margin-top: 8px; }
.m2i-sector-focus__points {
  list-style: none; padding: 32px; background: #fff;
  border: 1px solid var(--m2i-border); border-top: 3px solid var(--m2i-yellow); border-radius: 14px;
}
.m2i-sector-focus__points li {
  position: relative; padding: 12px 0 12px 34px;
  font-size: var(--m2i-fs-base); line-height: 1.55; color: var(--m2i-text-body);
}
.m2i-sector-focus__points li + li { border-top: 1px solid var(--m2i-border-lighter); }
.m2i-sector-focus__points li::before {
  content: ""; position: absolute; left: 4px; top: 18px;
  width: 14px; height: 8px; border-left: 2.5px solid var(--m2i-accent-deep); border-bottom: 2.5px solid var(--m2i-accent-deep);
  transform: rotate(-45deg);
}
@media (max-width: 1024px) { .m2i-sector-focus { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 640px) {
  .m2i-sector-focus__text { font-size: var(--m2i-fs-md); }
  .m2i-sector-focus__points { padding: 20px; }
  .m2i-sector-focus__points li { font-size: var(--m2i-fs-base); }
}

/* Textes courants agrandis sur les pages secteurs (retour du 03/10/2026 : « la
   plupart des textes simples trop petits ») — limité à ces pages, l'accueil
   garde ses tailles de maquette. */
.m2i-sector .m2i-eyebrow { font-size: var(--m2i-fs-xs); }
.m2i-sector .m2i-ref-chip { font-size: var(--m2i-fs-sm); padding: 15px 24px; }
.m2i-sector .m2i-sectors__list a { font-size: var(--m2i-fs-md); }
.m2i-sector .m2i-link-underline,
.m2i-sector-card .m2i-link-underline { font-size: var(--m2i-fs-sm); }
.m2i-sector .m2i-btn-primary,
.m2i-sector .m2i-btn-outline { font-size: var(--m2i-fs-base); }

@media (max-width: 1024px) {
  .m2i-sector-split { grid-template-columns: 1fr; gap: 32px; }
  .m2i-sector-pillars, .m2i-usecase-grid { grid-template-columns: repeat(2, 1fr); }
  .m2i-sector-hero__title { font-size: 48px; }
}
@media (max-width: 640px) {
  .m2i-sector-hero__title { font-size: 36px; letter-spacing: -1.2px; }
  .m2i-sector-hero__lede { font-size: var(--m2i-fs-md); }
  .m2i-sector-prose p { font-size: var(--m2i-fs-md); }
  .m2i-usecase__text, .m2i-sector-pillars p { font-size: var(--m2i-fs-base); }
  .m2i-sector-pillars, .m2i-usecase-grid { grid-template-columns: 1fr; }
  .m2i-sector-cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Section shared
   ========================================================================== */
.m2i-section { padding: 112px 0; }
.m2i-section--bordered-top { border-top: 1px solid var(--m2i-border); }
.m2i-section--accent-top { border-top: 4px solid var(--m2i-accent); }
.m2i-section--light { background: var(--m2i-bg-light); }
.m2i-eyebrow {
  font-size: var(--m2i-fs-xs);
  font-weight: 700;
  color: var(--m2i-dark);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.m2i-eyebrow::before {
  content: ''; display: inline-block; width: 18px; height: 3px; border-radius: 2px;
  background: var(--m2i-accent); vertical-align: middle; margin: -2px 10px 0 0;
}
:is(.m2i-phero, .m2i-tone-dark, .m2i-sector-usecases, .m2i-acad-start__main) .m2i-eyebrow { color: var(--m2i-accent); }
.m2i-h2 {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1.05;
  color: var(--m2i-dark);
}
.m2i-lede { font-size: var(--m2i-fs-base); line-height: 1.75; color: var(--m2i-text-gray); }
.m2i-link-underline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--m2i-fs-sm);
  font-weight: 700;
  color: var(--m2i-dark);
  letter-spacing: .3px;
  border-bottom: 2px solid var(--m2i-accent);
  padding-bottom: 3px;
}

/* Pillars (KmProd)
   ---------------------------------------------------------------------------
   Les 4 piliers étaient des cartes en grille 2x2, à droite d'une colonne de
   texte. Ils passent en LISTE NUMÉROTÉE verticale, l'illustration occupant
   toute la colonne de gauche : chaque étape tient sur une ligne et se lit dans
   l'ordre, et le schéma a enfin la place d'être lisible.
   ------------------------------------------------------------------------- */

/* En-tête de section, désormais pleine largeur au-dessus des deux colonnes. */
.m2i-solutions-head { max-width: 760px; margin-bottom: 56px; }
.m2i-solutions-head .m2i-lede { margin: 20px 0 24px; }

.m2i-solutions-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
}

.m2i-pillars-list { list-style: none; margin: 0; padding: 0; }

.m2i-pillar {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 16px;
  align-items: start;
  padding: 26px 0;
  border-top: 1px solid var(--m2i-border);
}
.m2i-pillar:first-child { border-top: none; padding-top: 0; }
.m2i-pillar:last-child { padding-bottom: 0; }

.m2i-pillar__dot {
  width: 10px;
  height: 10px;
  margin-top: 10px;
  border-radius: 50%;
  /* La couleur vient du champ "Couleur" du pilier (back-office) — pas de
     numéro affiché (retour utilisateur : trop vu ailleurs, "moche"). */
}
.m2i-pillar__title {
  font-size: var(--m2i-fs-xl);
  font-weight: 800;
  color: var(--m2i-dark);
  letter-spacing: -.8px;
  line-height: 1.2;
  margin-bottom: 10px;
}
.m2i-pillar__text { font-size: var(--m2i-fs-base); color: var(--m2i-text-gray); line-height: 1.65; }

/* ==========================================================================
   Solutions — illustration, accent connecteur, démo produit
   ========================================================================== */
.m2i-solutions-illustration {
  /* Plus de marge haute : l'illustration n'est plus sous un bloc de texte,
     elle occupe sa propre colonne et se cale sur la liste des piliers. */
  margin: 0;
  padding: 32px;
  border: 1px solid var(--m2i-border-light);
  border-radius: 12px;
  background-color: var(--m2i-bg-light);
  background-image: radial-gradient(var(--m2i-border) 1px, transparent 1px);
  background-size: 18px 18px;
}
.m2i-solutions-illustration img { width: 100%; height: auto; }
.m2i-solutions-illustration__caption {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: var(--m2i-fs-xs);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m2i-text-gray-light);
}
.m2i-solutions-illustration__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--m2i-accent);
  animation: m2i-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* Le connecteur séparait les piliers des cartes "Bénéfices". Celles-ci ayant
   été retirées, il marque maintenant la transition vers la démo à onglets —
   même rôle de respiration, cible différente. */
.m2i-solutions-connector { margin-top: 72px; }
.m2i-solutions-connector__line { display: block; height: 1px; background: var(--m2i-border); }

.m2i-solutions-demo { margin-top: 96px; }
.m2i-solutions-demo__head { max-width: 640px; margin-bottom: 40px; }
.m2i-solutions-demo__title { font-size: var(--m2i-fs-xl); font-weight: 800; color: var(--m2i-dark); letter-spacing: -.6px; }

.m2i-solutions-demo__layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.m2i-solutions-demo__tabs { display: grid; gap: 6px; }
.m2i-solutions-demo__tabs button {
  display: block;
  text-align: left;
  background: none;
  border: 0;
  border-left: 2px solid var(--m2i-border);
  padding: 18px 16px;
  font: inherit;
  color: var(--m2i-text-gray);
  cursor: pointer;
  border-radius: 0 8px 8px 0;
}
.m2i-solutions-demo__tabs button[aria-selected="true"] {
  border-left-color: var(--m2i-accent);
  background: var(--m2i-bg-light);
  color: var(--m2i-dark);
}
.m2i-solutions-demo__tab-copy { display: grid; gap: 4px; }
.m2i-solutions-demo__tab-copy b { font-size: var(--m2i-fs-sm); font-weight: 700; letter-spacing: -.2px; }
.m2i-solutions-demo__tab-copy small { font-size: var(--m2i-fs-xs); line-height: 1.5; color: var(--m2i-text-gray); }

.m2i-solutions-demo__window {
  border: 1px solid var(--m2i-border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 48px -28px rgba(17, 20, 25, .18);
}
.m2i-solutions-demo__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--m2i-dark);
  color: rgba(255, 255, 255, .75);
  font-size: var(--m2i-fs-xs);
}
.m2i-solutions-demo__bar strong { color: var(--m2i-accent); font-size: var(--m2i-fs-base); }
.m2i-solutions-demo__concept-tag {
  margin-left: auto;
  font-size: var(--m2i-fs-xs);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .25);
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
}
/* Un panneau = une photo (pleine surface) ou l'interface illustrative des
   onglets d'origine (barre, contenu, mention « données fictives »). */
.m2i-solutions-demo__panel { padding: 0; }
.m2i-solutions-demo__panel--photo .m2i-media { border-radius: 0; height: 100%; }
.m2i-solutions-demo__app-body { padding: 28px; min-height: 320px; }

.m2i-solutions-demo__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--m2i-border-lighter);
  padding: 18px 0;
  margin-bottom: 8px;
}
.m2i-solutions-demo__metrics > div { padding-left: 18px; border-left: 1px solid var(--m2i-border-lighter); }
.m2i-solutions-demo__metrics > div:first-child { padding-left: 0; border-left: 0; }
.m2i-solutions-demo__metrics small { display: block; font-size: var(--m2i-fs-xs); color: var(--m2i-text-gray-light); }
.m2i-solutions-demo__metrics strong { display: block; margin-top: 8px; font-size: var(--m2i-fs-xl); font-weight: 800; color: var(--m2i-dark); }
.m2i-solutions-demo__amber { color: var(--m2i-kmprod) !important; }

.m2i-solutions-demo__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 8px;
  border-bottom: 1px solid var(--m2i-border-lighter);
  font-size: var(--m2i-fs-sm);
}
.m2i-solutions-demo__row--warning { background: rgba(254, 116, 21, .06); }
.m2i-solutions-demo__row-icon {
  flex-shrink: 0;
  font-size: var(--m2i-fs-xs);
  font-weight: 700;
  border: 1px solid var(--m2i-border);
  border-radius: 4px;
  padding: 6px 8px;
  color: var(--m2i-text-gray);
}
.m2i-solutions-demo__row-copy { display: grid; gap: 2px; }
.m2i-solutions-demo__row-copy small { font-size: var(--m2i-fs-xs); color: var(--m2i-text-gray-light); }
.m2i-solutions-demo__state {
  margin-left: auto;
  white-space: nowrap;
  font-size: var(--m2i-fs-xs);
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 100px;
  background: var(--m2i-bg-light);
  color: var(--m2i-text-body);
}
.m2i-solutions-demo__state--warning { background: rgba(254, 116, 21, .14); color: #9a4c0f; }

.m2i-solutions-demo__lot {
  padding: 16px;
  background: var(--m2i-bg-light);
  border-left: 3px solid var(--m2i-accent);
  border-radius: 0 8px 8px 0;
  margin-bottom: 20px;
}
.m2i-solutions-demo__lot span { display: block; font-size: var(--m2i-fs-xs); color: var(--m2i-text-gray-light); text-transform: uppercase; letter-spacing: .8px; }
.m2i-solutions-demo__lot strong { display: block; font-size: var(--m2i-fs-lg); margin-top: 6px; color: var(--m2i-dark); }
.m2i-solutions-demo__track { list-style: none; padding-left: 20px; margin: 0; border-left: 1px solid var(--m2i-border); }
.m2i-solutions-demo__track li { position: relative; font-size: var(--m2i-fs-sm); margin-bottom: 16px; }
.m2i-solutions-demo__track li:last-child { margin-bottom: 0; }
.m2i-solutions-demo__track li::before {
  content: "";
  position: absolute;
  left: -25px; top: 3px;
  width: 9px; height: 9px;
  background: var(--m2i-accent);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--m2i-border);
}
.m2i-solutions-demo__track b { display: block; font-weight: 700; color: var(--m2i-dark); }
.m2i-solutions-demo__track span { display: block; margin-top: 3px; font-size: var(--m2i-fs-xs); color: var(--m2i-text-gray); }

.m2i-solutions-demo__chart-subtitle { font-size: var(--m2i-fs-xs); color: var(--m2i-text-gray); margin-bottom: 24px; }
.m2i-solutions-demo__bars { display: grid; gap: 18px; }
.m2i-solutions-demo__bars > div { display: grid; grid-template-columns: 100px 1fr 48px; align-items: center; gap: 12px; font-size: var(--m2i-fs-xs); color: var(--m2i-text-body); }
.m2i-solutions-demo__bars i { display: block; height: 16px; background: var(--m2i-accent); border-radius: 0 4px 4px 0; }
.m2i-solutions-demo__bars b { font-weight: 600; text-align: right; }

.m2i-solutions-demo__footer {
  padding: 12px 20px;
  background: var(--m2i-bg-light);
  border-top: 1px solid var(--m2i-border-lighter);
  font-size: var(--m2i-fs-xs);
  color: var(--m2i-text-gray);
  text-align: center;
}

[hidden] { display: none !important; }

/* Offers */
.m2i-offers-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 64px; }
/* Nombre de colonnes piloté par PHP selon la parité du nombre d'offres
   (--m2i-offers-cols, voir front-page.php) : pair -> 2 colonnes, impair ->
   3 colonnes. Repli à 2 si la variable n'est pas fournie. */
.m2i-offers-grid { display: grid; grid-template-columns: repeat(var(--m2i-offers-cols, 2), 1fr); gap: 24px; }
/* Cartes plus étroites sur 3 colonnes : padding réduit pour rester lisible. */
.m2i-offers-grid--cols-3 .m2i-offer-card { padding: 40px 32px; }

/* Grille commune des cartes : chaque carte occupe six rangées du parent
   (étiquette, titre, sous-titre, prix, avantages, bouton) et les partage par
   subgrid. Un titre sur deux lignes dans une carte décale donc la même bande
   dans toutes les autres, et les textes restent alignés d'une carte à l'autre.
   Sans subgrid (navigateur ancien) : colonne flex, bouton calé en bas. */
.m2i-offer-card {
  padding: 52px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@supports (grid-template-rows: subgrid) {
  .m2i-offer-card { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
  .m2i-offer-card__features { align-self: start; }
}
.m2i-offer-card--light { background: #fff; border: 1px solid var(--m2i-border); box-shadow: 0 4px 24px rgba(0, 0, 0, .04); }
.m2i-offer-card--dark { background: var(--m2i-dark); border: 1px solid rgba(254, 116, 21, .12); box-shadow: 0 4px 32px rgba(0, 0, 0, .18); }
/* Filet orange du haut (3.10.66) : peint dans le fond de la carte, bordure
   comprise, et non plus par un bloc posé à l'intérieur. La bordure de 1 px
   restait visible au-dessus du filet : bleu nuit sur la carte sombre. */
.m2i-offer-card.m2i-offer-card--light,
.m2i-offer-card.m2i-offer-card--dark {
  background-image: linear-gradient(var(--m2i-kmprod), var(--m2i-kmprod));
  background-size: 100% 5px; background-repeat: no-repeat; background-origin: border-box;
  border-top-color: transparent;
}
.m2i-offer-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.m2i-offer-card__badge-new {
  background: var(--m2i-kmprod); color: var(--m2i-dark);
  font-size: var(--m2i-fs-xs); font-weight: 700; padding: 4px 11px;
  border-radius: 100px; letter-spacing: 1.5px;
}
.m2i-offer-card__tag {
  font-size: var(--m2i-fs-xs); font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  padding: 4px 12px; border-radius: 100px;
}
.m2i-offer-card--light .m2i-offer-card__tag { color: var(--m2i-dark); background: rgba(254, 116, 21, .12); border: 1px solid rgba(254, 116, 21, .35); }
.m2i-offer-card--dark .m2i-offer-card__tag { color: var(--m2i-kmprod); background: rgba(254, 116, 21, .08); border: 1px solid rgba(254, 116, 21, .2); }
.m2i-offer-card__title { font-size: 34px; font-weight: 900; margin-top: 18px; letter-spacing: -1.5px; }
.m2i-offer-card--light .m2i-offer-card__title { color: var(--m2i-dark); }
.m2i-offer-card--dark .m2i-offer-card__title { color: #fff; }
.m2i-offer-card__subtitle { font-size: var(--m2i-fs-sm); margin-top: 6px; }
.m2i-offer-card__pricing { margin: 28px 0 32px; }
.m2i-offer-card--light .m2i-offer-card__subtitle { color: var(--m2i-text-gray); }
.m2i-offer-card--dark .m2i-offer-card__subtitle { color: rgba(255, 255, 255, .6); }
.m2i-offer-card__price-label { font-size: var(--m2i-fs-xs); margin-bottom: 4px; letter-spacing: .5px; text-transform: uppercase; }
.m2i-offer-card--light .m2i-offer-card__price-label { color: var(--m2i-text-gray); }
.m2i-offer-card--dark .m2i-offer-card__price-label { color: rgba(255, 255, 255, .6); }
.m2i-offer-card__price { font-size: 38px; font-weight: 900; letter-spacing: -1.5px; line-height: 1; white-space: nowrap; }
.m2i-offer-card--light .m2i-offer-card__price { color: var(--m2i-dark); position: relative; padding-bottom: 12px; }
.m2i-offer-card--light .m2i-offer-card__price::after { content: ''; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; border-radius: 2px; background: var(--m2i-kmprod); }
.m2i-offer-card--dark .m2i-offer-card__price { color: var(--m2i-kmprod); }

.m2i-offer-card__features { display: flex; flex-direction: column; gap: 0; margin-bottom: 40px; }
.m2i-offer-card--light .m2i-offer-card__features { border-top: 1px solid var(--m2i-border-lighter); }
.m2i-offer-card--dark .m2i-offer-card__features { border-top: 1px solid rgba(255, 255, 255, .07); }
.m2i-offer-card__feature { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; line-height: 1.45; }
.m2i-offer-card--light .m2i-offer-card__feature { border-bottom: 1px solid var(--m2i-border-lighter); }
.m2i-offer-card--dark .m2i-offer-card__feature { border-bottom: 1px solid rgba(255, 255, 255, .07); }
.m2i-offer-card__feature:last-child { border-bottom: none; }
/* Puce des avantages (3.10.66) : un trait court, comme la barre des surtitres
   et le trait sous le prix, au lieu d'une case cochée. Calé sur le milieu de
   la première ligne. */
.m2i-offer-card__check {
  width: 14px; height: 3px; border-radius: 2px; flex-shrink: 0;
  background: var(--m2i-kmprod);
  font-size: var(--m2i-fs-sm); margin-top: calc(.725em - 1.5px);
}
.m2i-offer-card__feature span:last-child { font-size: var(--m2i-fs-sm); }
.m2i-offer-card--light .m2i-offer-card__feature span:last-child { color: var(--m2i-text-body); }
.m2i-offer-card--dark .m2i-offer-card__feature span:last-child { color: rgba(255, 255, 255, .75); }

.m2i-offer-card__cta {
  margin-top: auto;
  display: block; text-align: center; font-size: var(--m2i-fs-sm); font-weight: 700;
  padding: 16px; border-radius: 10px; letter-spacing: .2px;
}
.m2i-offer-card--light .m2i-offer-card__cta { background: var(--m2i-kmprod); color: var(--m2i-dark); }
.m2i-offer-card--dark .m2i-offer-card__cta { background: var(--m2i-kmprod); color: var(--m2i-dark); }

/* About */
.m2i-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
/* « Notre histoire » + « Nous rejoindre » côte à côte, qui repassent l'un sous
   l'autre quand la colonne devient trop étroite. */
.m2i-about-links { display: flex; flex-wrap: wrap; gap: 16px 32px; }

.m2i-about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.m2i-about-stat { background: var(--m2i-dark); padding: 32px; border-radius: 12px; }
.m2i-about-stat__value { font-size: 52px; font-weight: 900; color: var(--m2i-yellow); letter-spacing: -2.5px; line-height: 1; }
.m2i-about-stat__label { font-size: var(--m2i-fs-xs); font-weight: 700; color: rgba(255, 255, 255, .35); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 10px; }
.m2i-about-services {
  background: var(--m2i-bg-light); padding: 28px; border-radius: 12px; border: 1px solid var(--m2i-border-light);
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.m2i-about-service {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  background: #fff; border-radius: 8px; border: 1px solid var(--m2i-border);
}
.m2i-about-service__icon {
  width: 26px; height: 26px; background: var(--m2i-yellow); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.m2i-about-service span { font-size: var(--m2i-fs-xs); font-weight: 700; color: var(--m2i-dark); letter-spacing: .3px; text-transform: uppercase; }

/* Partners */
.m2i-partners { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.m2i-partners__label { font-size: var(--m2i-fs-xs); font-weight: 700; color: var(--m2i-text-gray-light); letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 12px; }
.m2i-partners__text { font-size: var(--m2i-fs-base); color: var(--m2i-text-body); max-width: 460px; line-height: 1.65; }
.m2i-partners__logos { display: flex; align-items: center; gap: 16px; flex-shrink: 0; flex-wrap: wrap; }
.m2i-partners__logo-box {
  background: #fff; border: 1px solid var(--m2i-border); padding: 18px 28px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; min-height: 80px;
}
.m2i-partners__logo-box img { height: 44px; object-fit: contain; }

/* --------------------------------------------------------------------------
   Glossaire : index alphabétique collant + définitions groupées par lettre.
   -------------------------------------------------------------------------- */
.m2i-glossary-index {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 32px 0 40px;
  padding: 14px 16px;
  background: var(--m2i-bg-light);
  border: 1px solid var(--m2i-border);
  border-radius: 12px;
  /* Reste accessible au défilement ; décalé de la hauteur du header fixe. */
  position: sticky;
  top: calc(var(--m2i-header-height) + 12px);
  z-index: 5;
}
.m2i-glossary-index a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: var(--m2i-fs-sm);
  font-weight: 700;
  color: var(--m2i-text-body);
  background: #fff;
  border: 1px solid var(--m2i-border);
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.m2i-glossary-index a:hover,
.m2i-glossary-index a:focus-visible {
  background: var(--m2i-yellow);
  border-color: var(--m2i-yellow);
  color: var(--m2i-dark);
}

.m2i-glossary-group { margin-bottom: 40px; }
.m2i-glossary-group__letter {
  font-size: var(--m2i-fs-base);
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--m2i-dark);
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--m2i-border);
}

.m2i-glossary-list { margin: 0; }
.m2i-glossary-term { margin-top: 20px; }
.m2i-glossary-term:first-child { margin-top: 0; }
.m2i-glossary-term__name { font-size: var(--m2i-fs-md); font-weight: 800; color: var(--m2i-dark); }
.m2i-glossary-term__full {
  margin-left: 10px;
  font-size: var(--m2i-fs-base);
  font-style: italic;
  color: var(--m2i-text-gray);
}
.m2i-glossary-def {
  margin: 8px 0 0;
  font-size: var(--m2i-fs-base);
  line-height: 1.7;
  color: var(--m2i-text-body);
  max-width: 70ch;
}

@media (max-width: 768px) {
  /* Sur mobile le header est déjà bas ; un index collant mangerait l'écran. */
  .m2i-glossary-index { position: static; }
}

/* --------------------------------------------------------------------------
   Académie : les pôles thématiques (CPT « Pôles Académie ») et leurs articles.
   -------------------------------------------------------------------------- */
.m2i-academy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
  margin: 40px 0;
}
.m2i-academy-topic {
  padding: 28px 28px 26px;
  background: #fff;
  border: 1px solid var(--m2i-border);
  border-radius: 14px;
  border-top: 3px solid var(--m2i-yellow);
}
.m2i-academy-topic__title { font-size: var(--m2i-fs-lg); line-height: 1.3; margin-bottom: 10px; color: var(--m2i-dark); }
.m2i-academy-topic__intro { font-size: var(--m2i-fs-base); line-height: 1.65; color: var(--m2i-text-gray); margin-bottom: 18px; }
.m2i-academy-topic__list { list-style: none; margin: 0 0 20px; padding: 0; }
.m2i-academy-topic__list li { border-top: 1px solid var(--m2i-border-lighter); }
.m2i-academy-topic__list a {
  display: block;
  padding: 11px 0;
  font-size: var(--m2i-fs-base);
  line-height: 1.5;
  color: var(--m2i-text-body);
}
.m2i-academy-topic__list a:hover,
.m2i-academy-topic__list a:focus-visible { color: var(--m2i-dark); text-decoration: underline; }

/* Cartes du shortcode [m2i_ressources] : la page Ressources présente ses
   sous-rubriques. auto-fit + minmax pour que la grille s'adapte au nombre de
   cartes sans point de rupture dédié. */
.m2i-resource-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 32px 0;
}
.m2i-resource-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--m2i-border);
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.m2i-resource-card:hover,
.m2i-resource-card:focus-visible {
  border-color: var(--m2i-yellow);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .07);
  transform: translateY(-2px);
}
.m2i-resource-card__title { font-size: var(--m2i-fs-base); font-weight: 700; color: var(--m2i-dark); }
.m2i-resource-card__arrow { display: flex; color: var(--m2i-accent-deep); flex-shrink: 0; }

/* Grille de logos rendue par le shortcode [m2i_partenaires] sur la page
   « Partenaires / Intégrateurs » : hors de la bande d'accueil, elle a besoin
   de sa propre respiration verticale. */
.m2i-partners__logos--standalone { margin: 32px 0; gap: 20px; }

/* References */
.m2i-references-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 64px; }
.m2i-references-head p { font-size: var(--m2i-fs-base); color: var(--m2i-text-gray); max-width: 320px; text-align: right; line-height: 1.6; }
/* Pêle-mêle : toutes les références mélangées, sans regroupement par secteur
   (retour utilisateur — les secteurs vivent désormais dans .m2i-sectors,
   sous le hero). */
.m2i-ref-mosaic { display: flex; flex-wrap: wrap; gap: 12px; }
.m2i-ref-chip {
  background: var(--m2i-bg-light); border: 1px solid var(--m2i-border); border-radius: 10px;
  padding: 14px 22px; display: flex; align-items: center; justify-content: center;
  font-size: var(--m2i-fs-sm); font-weight: 700; color: var(--m2i-text-body); letter-spacing: .3px;
}

.m2i-ref-footer {
  margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--m2i-border-lighter);
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.m2i-ref-footer__left { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.m2i-ref-footer__stat {
  background: var(--m2i-dark); padding: 16px 28px; border-radius: 10px;
  display: flex; align-items: baseline; gap: 6px;
}
.m2i-ref-footer__stat strong { font-size: 32px; font-weight: 900; color: var(--m2i-yellow); letter-spacing: -1px; }
.m2i-ref-footer__stat span { font-size: var(--m2i-fs-sm); color: rgba(255, 255, 255, .5); font-weight: 500; }
.m2i-ref-footer__text { font-size: var(--m2i-fs-sm); color: var(--m2i-text-gray); line-height: 1.6; max-width: 320px; }

/* CTA final */
.m2i-cta { background: var(--m2i-accent); padding: 100px 0; position: relative; overflow: hidden; }
.m2i-cta::before {
  content: ''; position: absolute; top: -80px; right: -80px; width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255, 255, 255, .25), transparent 65%); pointer-events: none;
}
.m2i-cta-grid { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 80px; position: relative; }
.m2i-cta h2 { font-size: 52px; font-weight: 900; letter-spacing: -2.5px; color: var(--m2i-dark); line-height: 1.05; margin-bottom: 16px; }
.m2i-cta p { font-size: var(--m2i-fs-md); color: rgba(17, 20, 25, .75); line-height: 1.7; }
.m2i-cta-actions { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.m2i-cta-actions .m2i-btn-primary--dark {
  background: var(--m2i-dark); color: #fff; font-size: var(--m2i-fs-base); font-weight: 700; padding: 18px 40px;
  border-radius: 10px; display: block; text-align: center; white-space: nowrap;
}
.m2i-cta-actions .m2i-btn-ghost {
  background: transparent; color: var(--m2i-dark); font-size: var(--m2i-fs-sm); font-weight: 600; padding: 16px 40px;
  border-radius: 10px; display: block; text-align: center; border: 2px solid rgba(17, 20, 25, .35); white-space: nowrap;
}

/* Footer
   ---------------------------------------------------------------------------
   Accessibilité (v3.3.0) : les textes étaient en blanc à 18–45% d'opacité sur
   #0D1117, soit un contraste très en dessous du minimum WCAG AA (4.5:1). Les
   opacités ci-dessous donnent 6,9:1 (libellés) à 11:1 (texte courant), et les
   tailles passent de 10,5–13px à 12–15px. La colonne "Navigation" a été
   supprimée : 3 colonnes au lieu de 4, plus larges et plus aérées.
   ------------------------------------------------------------------------- */
.m2i-footer { background: var(--m2i-darker); padding: 72px 0 36px; }
/* Présentation calée à gauche, contact calé à droite (3.10.81), comme la
   ligne du bas (copyright à gauche, liens à droite) : le contact flottait
   aux deux tiers de la largeur, laissant un grand vide au milieu. */
/* Trois colonnes proportionnées (3.10.187) : avec « auto », les deux
   colonnes de liens se tassaient à droite et laissaient un grand vide au
   centre. */
.m2i-footer-grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 64px;
  padding-bottom: 52px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
/* Logo blanc posé directement sur le fond sombre (3.10.75), à la place du
   logo foncé dans une pastille claire ; 44 px pour que la baseline
   « industrial intelligence » se lise. */
.m2i-footer-brand__logo { display: inline-flex; margin-bottom: 20px; }
.m2i-footer-brand__logo img { height: 44px; object-fit: contain; }
.m2i-footer-brand p { font-size: var(--m2i-fs-base); color: rgba(255, 255, 255, .78); line-height: 1.7; max-width: 380px; }
.m2i-footer-social { margin-top: 24px; display: flex; gap: 10px; }
.m2i-footer-social a {
  width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
/* Les icônes sont en fill/stroke "currentColor" : c'est cette couleur qui les
   rend visibles sur le fond sombre du footer. */
.m2i-footer-social a { color: rgba(255, 255, 255, .78); }
.m2i-footer-social a:hover, .m2i-footer-social a:focus-visible { border-color: rgba(255, 255, 255, .6); color: #fff; }
.m2i-footer-social svg [stroke] { stroke: currentColor; }
/* Titres de colonne à la taille du contenu, en gras et en blanc plein
   (3.10.188) : en petites capitales de 12 px, ils paraissaient plus petits
   que les liens qu'ils annoncent. */
.m2i-footer-col__title {
  font-size: var(--m2i-fs-base); font-weight: 700; color: #fff; letter-spacing: .2px;
  margin-bottom: 16px;
}
/* Colonne Informations (3.10.186) : liens légaux et cookies, qui
   s’alignaient tous dans la ligne du bas. */
.m2i-footer-col__links { display: flex; flex-direction: column; gap: 4px; list-style: none; margin: 0; padding: 0; line-height: 1.7; }
.m2i-footer-col__links a { overflow-wrap: anywhere; font-size: var(--m2i-fs-base); color: rgba(255, 255, 255, .78); }
.m2i-footer-col__links a:hover, .m2i-footer-col__links a:focus-visible { color: #fff; text-decoration: underline; }
.m2i-footer-contact { font-size: var(--m2i-fs-base); color: rgba(255, 255, 255, .78); line-height: 1.7; }
/* Pied de page sur mobile (3.10.78) : sous 600 px, la présentation et le
   contact passent l'un sous l'autre. Côte à côte, la colonne contact faisait
   150 px et « commercial@meta2i.com », sans point de coupure, dépassait de
   l'écran : toute la page défilait de côté. L'adresse peut aussi se couper
   en dernier recours. */
.m2i-footer-contact { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .m2i-footer .m2i-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
a.m2i-footer-contact:hover, a.m2i-footer-contact:focus-visible { color: #fff; text-decoration: underline; }
.m2i-footer-bottom {
  padding-top: 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
}
.m2i-footer-bottom span, .m2i-footer-bottom a { font-size: var(--m2i-fs-sm); color: rgba(255, 255, 255, .62); }
.m2i-footer-bottom a:hover, .m2i-footer-bottom a:focus-visible { color: #fff; text-decoration: underline; }
.m2i-footer-bottom-links { display: flex; gap: 28px; flex-wrap: wrap; }

/* Body offset for fixed header */
body { padding-top: 0; }
.m2i-hero { margin-top: 0; }

/* ==========================================================================
   Sélecteur de marché (page de garde)
   ========================================================================== */
.m2i-gate-body { margin: 0; }
.m2i-gate {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: #fff;
  overflow: hidden;
}
/* Fond : mappemonde beige (07/10/2026) + halo doux */
.m2i-gate::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--m2i-gate-map);
  background-repeat: no-repeat;
  background-position: center 42%;
  background-size: 120% auto;
  pointer-events: none;
}
.m2i-gate::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(240, 190, 44, .10), transparent 60%);
  pointer-events: none;
}

.m2i-gate__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  text-align: center;
}
.m2i-gate__brand { display: flex; justify-content: center; margin-bottom: 24px; }
/* Logo agrandi ; clamp pour rester propre du mobile au desktop, max-width
   pour ne jamais déborder horizontalement (pas d'ascenseur sur mobile). */
.m2i-gate__logo { height: clamp(60px, 14vw, 88px); width: auto; max-width: 100%; }
.m2i-gate__tagline {
  font-size: var(--m2i-fs-md);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--m2i-text-gray);
  margin: 0 0 40px;
}

.m2i-gate__panel {
  margin: 0 auto;
  max-width: 760px;
  background: #fff;
  border: 1px solid var(--m2i-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .10);
  text-align: left;
}
.m2i-gate__panel-head {
  background: var(--m2i-bg-light);
  border-bottom: 1px solid var(--m2i-border);
  padding: 18px 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--m2i-fs-base);
  font-weight: 700;
  color: var(--m2i-dark);
}
.m2i-gate__globe { font-size: var(--m2i-fs-lg); }

.m2i-gate__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--m2i-border);
}
.m2i-gate__card {
  background: #fff;
  padding: 36px 32px;
  text-align: center;
}
.m2i-gate__card-flag { font-size: 40px; margin-bottom: 12px; }
.m2i-gate__card-flag-wrap { margin-bottom: 12px; }
.m2i-gate__card-flag-img { height: 44px; width: auto; display: inline-block; border-radius: 4px; object-fit: contain; }
/* Carte de la zone du marché (07/10/2026) et drapeau devant chaque langue. */
.m2i-gate__card-map-wrap { margin-bottom: 12px; }
.m2i-gate__card-map { width: 160px; height: auto; display: inline-block; }
.m2i-gate__card-langs a { display: inline-flex; align-items: center; gap: 8px; }
.m2i-gate__lang-flag { width: 16px; height: 11px; flex-shrink: 0; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.m2i-gate__card-name { font-size: var(--m2i-fs-md); font-weight: 700; color: var(--m2i-dark); margin-bottom: 16px; }
.m2i-gate__card-langs { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.m2i-gate__card-langs a {
  font-size: var(--m2i-fs-sm);
  font-weight: 600;
  color: var(--m2i-dark);
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid var(--m2i-yellow);
}
.m2i-gate__card-langs a:hover { background: var(--m2i-yellow); color: var(--m2i-dark); }

.m2i-gate__note {
  padding: 24px 32px 32px;
  font-size: var(--m2i-fs-sm);
  color: var(--m2i-text-gray);
  line-height: 1.6;
  text-align: center;
  background: #fff;
}

.m2i-gate__admin-note {
  max-width: 760px;
  margin: 0 auto 24px;
  padding: 14px 20px;
  background: rgba(240, 190, 44, .12);
  border: 1px solid rgba(240, 190, 44, .4);
  border-radius: 10px;
  font-size: var(--m2i-fs-sm);
  color: var(--m2i-dark);
  line-height: 1.5;
  text-align: left;
}
.m2i-gate__admin-note--bottom { margin: 24px auto 0; }

/* Mobile : on garde les 2 marchés côte à côte (une seule rangée) et on
   compacte les espacements pour que le sélecteur tienne dans l'écran sans
   ascenseur vertical. */
@media (max-width: 640px) {
  .m2i-gate { padding: 20px 14px; }
  .m2i-gate__brand { margin-bottom: 12px; }
  .m2i-gate__logo { height: clamp(48px, 13vw, 64px); }
  .m2i-gate__tagline { font-size: var(--m2i-fs-sm); margin-bottom: 18px; }
  .m2i-gate__panel-head { padding: 12px 16px; font-size: var(--m2i-fs-sm); }
  .m2i-gate__card { padding: 18px 12px; }
  .m2i-gate__card-flag { font-size: 30px; margin-bottom: 8px; }
  .m2i-gate__card-flag-wrap { margin-bottom: 8px; }
  .m2i-gate__card-flag-img { height: 34px; }
  .m2i-gate__card-map { width: 120px; }
  .m2i-gate__card-name { font-size: var(--m2i-fs-sm); margin-bottom: 12px; }
  .m2i-gate__card-langs { gap: 8px; }
  .m2i-gate__card-langs a { padding: 7px 12px; font-size: var(--m2i-fs-sm); }
  .m2i-gate__note { padding: 14px 16px 18px; font-size: var(--m2i-fs-xs); }
  .m2i-gate__admin-note { font-size: var(--m2i-fs-xs); padding: 12px 16px; }
}

/* Très petits écrans : là seulement on empile les 2 marchés. */
@media (max-width: 360px) {
  .m2i-gate__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Blog
   ========================================================================== */
.m2i-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.m2i-blog-card {
  border: 1px solid var(--m2i-border);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.m2i-blog-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.m2i-blog-card__link { display: block; }
.m2i-blog-card__img { aspect-ratio: 16/10; overflow: hidden; background: var(--m2i-bg-light); }
.m2i-blog-card__img img { width: 100%; height: 100%; object-fit: cover; }
.m2i-blog-card__body { padding: 24px; }
.m2i-blog-card__meta { font-size: var(--m2i-fs-xs); font-weight: 700; color: var(--m2i-text-gray-light); letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 10px; }
.m2i-blog-card__title { font-size: var(--m2i-fs-md); font-weight: 800; color: var(--m2i-dark); letter-spacing: -.4px; margin-bottom: 10px; line-height: 1.3; }
.m2i-blog-card__excerpt { font-size: var(--m2i-fs-sm); color: var(--m2i-text-gray); line-height: 1.6; }
.m2i-blog-pagination { margin-top: 56px; display: flex; gap: 16px; justify-content: center; }
.m2i-blog-pagination .page-numbers {
  font-size: var(--m2i-fs-sm); font-weight: 600; color: var(--m2i-text-body);
  padding: 8px 16px; border-radius: 8px; border: 1px solid var(--m2i-border);
}
.m2i-blog-pagination .page-numbers.current { background: var(--m2i-dark); color: #fff; border-color: var(--m2i-dark); }

.m2i-article__cover { margin: 32px 0; border-radius: 12px; overflow: hidden; }
.m2i-article__content { font-size: var(--m2i-fs-base); line-height: 1.8; color: var(--m2i-text-body); }
.m2i-article__content p { margin-bottom: 24px; }
.m2i-article__content h2 { font-size: var(--m2i-fs-xl); font-weight: 800; color: var(--m2i-dark); letter-spacing: -.6px; margin: 40px 0 16px; }
.m2i-article__content h3 { font-size: var(--m2i-fs-lg); font-weight: 800; color: var(--m2i-dark); margin: 32px 0 14px; }
.m2i-article__content ul, .m2i-article__content ol { margin: 0 0 24px 20px; }
.m2i-article__content img { border-radius: 10px; margin: 24px 0; }
.m2i-article__content blockquote { border-left: 3px solid var(--m2i-accent); padding-left: 20px; font-style: italic; color: var(--m2i-text-gray); margin: 24px 0; }
.m2i-article__content a { color: var(--m2i-dark); text-decoration: underline; text-decoration-color: var(--m2i-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }

@media (max-width: 1024px) {
  .m2i-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .m2i-blog-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .m2i-container, .m2i-header, .m2i-hero__content { padding-left: 32px; padding-right: 32px; }
  .m2i-solutions-grid, .m2i-about-grid { grid-template-columns: 1fr; gap: 48px; }
  .m2i-offers-grid { grid-template-columns: 1fr; }
  /* Les cartes "Bénéfices" ont été retirées de l'accueil : plus rien à empiler ici. */
  .m2i-cta-grid { grid-template-columns: 1fr; gap: 32px; text-align: left; }
}

/* Menu burger jusqu'à 1200 px (3.10.35) : entre 769 et 1200 px, les six
   entrées du menu et les deux boutons ne tenaient pas sur une ligne, et les
   libellés passaient sur deux lignes (« Logiciel MES », « Qui sommes-nous »).
   Seconde moitié du bloc (hero, grilles…) toujours à 768 px, plus bas. */
@media (max-width: 1200px) {
  /* --------------------------------------------------------------------
     Menu burger. Avant la v3.3.0, le menu et le CTA étaient purement et
     simplement masqués sous 768px : le site n'avait aucune navigation sur
     mobile. Ils sont maintenant repliés dans un panneau piloté par
     .m2i-header__toggle (assets/js/nav.js pose .is-open sur le header).
     Le panneau est en position:absolute DANS le header, lui-même fixed :
     il suit donc automatiquement le décalage de la barre d'admin WordPress.
     -------------------------------------------------------------------- */
  .m2i-header__toggle { display: inline-flex; }

  .m2i-header__collapse {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--m2i-header-height));
    overflow-y: auto;
    padding: 12px 24px 24px;
    background: #fff;
    border-top: 1px solid var(--m2i-border);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .m2i-header.is-open .m2i-header__collapse {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  /* Le menu redevient une liste verticale ; les sous-menus sont toujours
     dépliés (pas de survol possible au doigt) et simplement indentés. */
  .m2i-header__menu { display: block; }
  .m2i-header__menu > li { border-bottom: 1px solid var(--m2i-border-lighter); }
  .m2i-header__menu a { display: block; padding: 14px 2px; font-size: var(--m2i-fs-base); }
  .m2i-header__menu .menu-item-has-children > a::after,
  .m2i-header__menu .menu-item-has-children::after { content: none; }

  /* visibility et pointer-events HÉRITÉS du panneau, jamais forcés : forcés
     à visible/auto, les sous-menus restaient cliquables, transparents, par-
     dessus la page quand le menu était fermé (03/10/2026 : un clic sur le
     bandeau des métiers ouvrait « Nous rejoindre »). */
  .m2i-header__menu .sub-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: inherit;
    pointer-events: inherit;
    min-width: 0;
    margin: 0 0 8px 14px;
    padding: 0;
    background: none;
    border: none;
    border-left: 2px solid var(--m2i-border);
    border-radius: 0;
    box-shadow: none;
  }
  /* Au doigt, toucher une entrée déclenche :hover et :focus-within : la règle
     d'ouverture du bureau, plus spécifique, décalait alors le sous-menu de
     50 % vers la gauche (translateX), hors de l'écran (05/10/2026). */
  .m2i-header__menu .menu-item-has-children:hover > .sub-menu,
  .m2i-header__menu .menu-item-has-children:focus-within > .sub-menu {
    transform: none;
    visibility: inherit;
    pointer-events: inherit;
  }
  .m2i-header__menu .sub-menu a { padding: 11px 14px; font-size: var(--m2i-fs-sm); color: var(--m2i-text-gray); }

  /* Utilitaires empilés et pleine largeur : cibles tactiles confortables. */
  .m2i-header__utils {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 18px;
  }
  .m2i-header .m2i-btn-cta,
  .m2i-header .m2i-btn-support {
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 13px 18px;
    font-size: var(--m2i-fs-sm);
  }
}

@media (max-width: 768px) {
  .m2i-hero__title { font-size: clamp(30px, 9vw, 38px); }
  /* Chiffres sur une rangée de trois plutôt qu'empilés : le hero gagne
     ~130px de hauteur sur téléphone. */
  .m2i-hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .m2i-hero__stat { border-right: none; padding: 0 !important; }
  .m2i-hero__stat-value { font-size: clamp(26px, 8vw, 34px); letter-spacing: -1px; }
  .m2i-hero__stat-label { font-size: var(--m2i-fs-xs); letter-spacing: .6px; }
  .m2i-about-stats, .m2i-about-services { grid-template-columns: 1fr; }
  /* Tablette : présentation sur toute la largeur, Informations et Contact
     côte à côte dessous (3.10.186). */
  .m2i-footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .m2i-footer-brand { grid-column: 1 / -1; }
  .m2i-h2 { font-size: 30px; }
  .m2i-section { padding: 64px 0; }
}

/* ==========================================================================
   Refonte 3.10 — pages intérieures
   --------------------------------------------------------------------------
   Diagnostic de départ (03/10/2026) : pages « tristes et trop IA », toutes
   sur le même moule (titre noir, sous-titre gris, grille de cartes blanches à
   filet jaune), sans une seule image. Principes retenus :
   - un en-tête sombre avec photo, dans la continuité de la vidéo d'accueil ;
   - des blocs texte + image qui alternent, plutôt que des grilles de puces ;
   - le jaune en aplat (bandeaux), pas seulement en filet ;
   - des photos unifiées par un traitement noir et jaune ;
   - des emplacements « photo à venir » lisibles tant que la vraie manque.
   ========================================================================== */

.m2i-container--narrow { max-width: 860px; }

/* Textes « [À compléter : …] » : visibles exprès, mais distincts du contenu. */
.m2i-todo {
  border: 1.5px dashed #D9A514; background: #FFF8E1; color: #6B5300;
  padding: 14px 18px; border-radius: 10px; font-size: var(--m2i-fs-base); line-height: 1.6;
}
.m2i-tone-dark .m2i-todo { background: rgba(240, 190, 44, .1); color: #F6D77A; border-color: rgba(240, 190, 44, .5); }

/* Tons de section */
.m2i-tone-light { background: var(--m2i-bg-light); }
.m2i-tone-dark { background: var(--m2i-darker); color: #fff; }
.m2i-tone-dark .m2i-h2 { color: #fff; }
.m2i-tone-dark .m2i-prose p,
.m2i-tone-dark .m2i-prose { color: rgba(255, 255, 255, .74); }
.m2i-tone-dark .m2i-link-underline { color: #fff; }

/* --------------------------------------------------------------------------
   Images : photo, traitement bichrome, placeholder
   -------------------------------------------------------------------------- */
.m2i-media { position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: #E4E1D8; }
.m2i-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Bichrome : niveaux de gris + voile chaud. Unifie des photos de sources et
   de qualités différentes (sites KmProd, salons, photos de clients). */
/* Un filtre seul, sans calque en mix-blend-mode : la version avec un voile en
   « multiply » sur chaque photo bloquait le rendu de la mosaïque des secteurs
   (une dizaine de calques fusionnés à recomposer à chaque défilement). */
.m2i-media--duotone img { filter: grayscale(1) sepia(.42) saturate(1.5) contrast(1.06) brightness(.88); }

/* Placeholder : trame de plan technique + ce qu'il faut photographier. */
.m2i-media--placeholder {
  display: flex; align-items: flex-end;
  background-color: #2A2F37;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(160deg, rgba(240, 190, 44, .22), rgba(13, 17, 23, 0) 60%);
  background-size: 28px 28px, 28px 28px, 100% 100%;
}
.m2i-media--placeholder::after { content: none; }
/* Hauteur minimale seulement sans ratio : cumulée avec un aspect-ratio, elle
   imposait une largeur (220 px x 16/10 = 352 px) qui débordait sur mobile. */
.m2i-media--placeholder:not([style*="aspect-ratio"]) { min-height: 220px; }
.m2i-media__label {
  margin: 18px; padding: 7px 12px; border-radius: 6px;
  background: rgba(13, 17, 23, .72); color: rgba(255, 255, 255, .85);
  font-size: var(--m2i-fs-xs); font-weight: 600; letter-spacing: .3px; line-height: 1.4;
}

/* Logos : jamais recadrés, sur fond blanc. */
.m2i-media--logo {
  display: flex; align-items: center; justify-content: center;
  height: 96px; padding: 18px 22px; background: #fff; border: 1px solid var(--m2i-border); border-radius: 12px;
}
.m2i-media--logo img { width: auto; max-width: 100%; height: auto; max-height: 52px; object-fit: contain; }
/* Logo mesuré (3.10.81, inc/logo-fit.php) : la boîte a le format du dessin,
   l'image y est décalée pour masquer ses marges. */
.m2i-logo-fit { display: block; max-width: 100%; overflow: hidden; flex-shrink: 0; direction: ltr; }
.m2i-media--logo .m2i-logo-fit img { display: block; max-width: none; max-height: none; height: auto; object-fit: fill; }
.m2i-partner-card .m2i-media--logo { --m2i-logo-scale: .95; }
.m2i-case__logo .m2i-media--logo { --m2i-logo-scale: .85; }
.m2i-media--logo.m2i-media--placeholder {
  min-height: 0; align-items: center; background: #fff; background-image: none;
  border-style: dashed; border-color: #CFCBBE;
}
.m2i-media--logo .m2i-media__label {
  margin: 0; padding: 0; background: none; color: #7A7568;
  font-size: var(--m2i-fs-base); font-weight: 800; letter-spacing: .6px; text-transform: uppercase; text-align: center;
}

/* --------------------------------------------------------------------------
   En-tête des pages intérieures
   -------------------------------------------------------------------------- */
.m2i-phero { position: relative; background: var(--m2i-darker); color: #fff; overflow: hidden; }
.m2i-phero__inner {
  position: relative; max-width: var(--m2i-max-width); margin: 0 auto;
  padding: calc(var(--m2i-header-height) + 72px) 56px 88px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center;
  min-height: min(640px, 78vh);
}
.m2i-phero__text { position: relative; z-index: 1; }
.m2i-phero__title {
  font-size: clamp(40px, 4.6vw, 64px); font-weight: 900; line-height: 1.02; letter-spacing: -.04em;
  margin-bottom: 24px; color: #fff;
}
.m2i-phero__lede { font-size: var(--m2i-fs-lg); line-height: 1.6; color: rgba(255, 255, 255, .72); max-width: 560px; }
.m2i-phero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.m2i-phero .m2i-breadcrumb ol { margin-bottom: 28px; }

/* La photo occupe toute la moitié droite et déborde jusqu'au bord de l'écran. */
.m2i-phero__media { position: absolute; top: 0; bottom: 0; left: 50%; right: 0; }
.m2i-phero__media .m2i-media { position: absolute; inset: 0; border-radius: 0; height: 100%; }
.m2i-phero__media .m2i-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--m2i-darker) 0%, rgba(13, 17, 23, 0) 35%);
}
.m2i-phero__media .m2i-media__label { position: relative; z-index: 2; }

.m2i-phero--compact .m2i-phero__inner { grid-template-columns: 1fr; min-height: 0; padding-bottom: 64px; }
.m2i-phero--compact .m2i-phero__title { font-size: clamp(36px, 4vw, 54px); }

/* --------------------------------------------------------------------------
   Texte + image
   -------------------------------------------------------------------------- */
.m2i-split__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.m2i-split--reverse .m2i-split__media { order: -1; }
.m2i-split .m2i-h2 { margin-bottom: 28px; }
.m2i-split .m2i-link-underline { margin-top: 28px; }
.m2i-prose p { font-size: var(--m2i-fs-md); line-height: 1.75; color: var(--m2i-text-body); }
.m2i-prose p + p { margin-top: 20px; }

/* Texte d'éditeur (articles, pages simples, études de cas). */
.m2i-prose--article h2 { font-size: 30px; font-weight: 900; letter-spacing: -.8px; color: var(--m2i-dark); margin: 48px 0 18px; }
.m2i-prose--article h3 { font-size: var(--m2i-fs-lg); font-weight: 800; color: var(--m2i-dark); margin: 36px 0 14px; }
.m2i-prose--article ul, .m2i-prose--article ol { margin: 20px 0 20px 22px; font-size: var(--m2i-fs-md); line-height: 1.7; color: var(--m2i-text-body); }
.m2i-prose--article li + li { margin-top: 6px; }
.m2i-prose--article img { border-radius: 14px; margin: 28px 0; height: auto; }
.m2i-prose--article blockquote { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--m2i-accent); font-size: var(--m2i-fs-lg); line-height: 1.5; color: var(--m2i-dark); }
.m2i-prose--article a { color: var(--m2i-dark); text-decoration: underline; text-decoration-color: var(--m2i-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.m2i-prose--article > *:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   Phrase forte, citation
   -------------------------------------------------------------------------- */
.m2i-statement { background: var(--m2i-accent); padding: 88px 0; }
.m2i-statement__text {
  font-size: clamp(30px, 3.6vw, 48px); font-weight: 900; line-height: 1.12; letter-spacing: -.035em;
  color: var(--m2i-dark); max-width: 980px;
}
.m2i-statement__note { margin-top: 18px; font-size: var(--m2i-fs-md); color: rgba(17, 20, 25, .8); max-width: 720px; }

.m2i-quote__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.m2i-quote__body { margin: 0; }
.m2i-quote blockquote p {
  font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; line-height: 1.35; letter-spacing: -.02em; color: var(--m2i-dark);
}
.m2i-quote blockquote p::before { content: "«\00a0"; color: var(--m2i-accent-deep); }
.m2i-quote blockquote p::after { content: "\00a0»"; color: var(--m2i-accent-deep); }
.m2i-quote figcaption { margin-top: 28px; font-size: var(--m2i-fs-base); color: var(--m2i-text-gray); }
.m2i-quote figcaption strong { display: block; font-size: var(--m2i-fs-md); color: var(--m2i-dark); }

/* --------------------------------------------------------------------------
   Logos
   -------------------------------------------------------------------------- */
.m2i-logos__title { margin-bottom: 40px; }
.m2i-logos__grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 16px; }
.m2i-logos__more { margin-top: 36px; }

.m2i-refs-group + .m2i-refs-group { margin-top: 64px; }
.m2i-refs-group__title {
  font-size: var(--m2i-fs-base); font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--m2i-text-gray);
  padding-bottom: 14px; margin-bottom: 20px; border-bottom: 2px solid var(--m2i-border);
}
.m2i-refs-group__title a:hover, .m2i-refs-group__title a:focus-visible { color: var(--m2i-dark); text-decoration: underline; text-decoration-color: var(--m2i-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Cartes d'articles (toujours illustrées)
   -------------------------------------------------------------------------- */
.m2i-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.m2i-card__link { display: flex; flex-direction: column; height: 100%; }
.m2i-card .m2i-media { border-radius: 14px; transition: transform .25s ease; }
.m2i-card__link:hover .m2i-media, .m2i-card__link:focus-visible .m2i-media { transform: translateY(-3px); }
.m2i-card__body { padding-top: 18px; }
.m2i-card__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--m2i-fs-sm); font-weight: 700; letter-spacing: .4px; color: var(--m2i-text-gray); margin-bottom: 10px; }
.m2i-card__meta span::before { content: "·"; margin-right: 14px; color: var(--m2i-accent-deep); }
.m2i-card__meta > :first-child::before { content: none; margin: 0; }
.m2i-card__title { font-size: var(--m2i-fs-lg); font-weight: 800; line-height: 1.3; letter-spacing: -.4px; color: var(--m2i-dark); }
.m2i-card__link:hover .m2i-card__title, .m2i-card__link:focus-visible .m2i-card__title { text-decoration: underline; text-decoration-color: var(--m2i-accent); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.m2i-card__excerpt { margin-top: 12px; font-size: var(--m2i-fs-md); line-height: 1.65; color: var(--m2i-text-body); }

/* Magazine : la première carte occupe toute la largeur, image à gauche. */
.m2i-card--lead { grid-column: 1 / -1; }
.m2i-card--lead .m2i-card__link { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.m2i-card--lead .m2i-card__body { padding-top: 0; }
.m2i-card--lead .m2i-card__title { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -.03em; }

/* --------------------------------------------------------------------------
   Secteurs : mosaïque
   -------------------------------------------------------------------------- */
.m2i-mosaic { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 300px; gap: 16px; }
.m2i-mosaic__tile--lead { grid-column: span 2; grid-row: span 2; }
.m2i-mosaic__tile a { position: relative; display: block; height: 100%; border-radius: 16px; overflow: hidden; }
.m2i-mosaic__tile .m2i-media { position: absolute; inset: 0; height: 100%; border-radius: 0; transition: transform .4s ease; }
.m2i-mosaic__tile a:hover .m2i-media, .m2i-mosaic__tile a:focus-visible .m2i-media { transform: scale(1.04); }
.m2i-mosaic__tile .m2i-media__label { display: none; }
.m2i-mosaic__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 64px 26px 24px;
  background: linear-gradient(0deg, rgba(13, 17, 23, .92), rgba(13, 17, 23, 0));
  display: flex; flex-direction: column; gap: 8px; color: #fff;
}
.m2i-mosaic__name { font-size: var(--m2i-fs-xl); font-weight: 900; letter-spacing: -.6px; line-height: 1.1; }
.m2i-mosaic__tile--lead .m2i-mosaic__name { font-size: clamp(32px, 3.4vw, 46px); letter-spacing: -.03em; }
.m2i-mosaic__lede { font-size: var(--m2i-fs-base); line-height: 1.5; color: rgba(255, 255, 255, .78); max-width: 520px; }
.m2i-mosaic__tile--lead .m2i-mosaic__lede { font-size: var(--m2i-fs-md); }
.m2i-mosaic__tile a:focus-visible { outline: 3px solid var(--m2i-yellow); outline-offset: 3px; }
.m2i-mosaic__outro { margin-top: 48px; font-size: var(--m2i-fs-md); line-height: 1.7; color: var(--m2i-text-body); max-width: 860px; }

/* Secteur : cas d'usage en paragraphes à intertitre intégré, sur deux colonnes. */
.m2i-concrete .m2i-h2 { max-width: 760px; margin-bottom: 48px; }
.m2i-concrete__text { columns: 2; column-gap: 72px; }
.m2i-concrete__text p { break-inside: avoid; margin: 0 0 26px; font-size: var(--m2i-fs-md); line-height: 1.7; color: rgba(255, 255, 255, .74); }
.m2i-concrete__text strong { color: #fff; font-weight: 800; }

/* --------------------------------------------------------------------------
   KmProd : comparatif des offres
   -------------------------------------------------------------------------- */
.m2i-compare__head { max-width: 760px; margin-bottom: 44px; }
.m2i-compare__text { margin-top: 18px; font-size: var(--m2i-fs-md); line-height: 1.7; color: var(--m2i-text-body); }
.m2i-compare__scroll { overflow-x: auto; border: 1px solid var(--m2i-border); border-radius: 16px; }
.m2i-compare__scroll:focus-visible { outline: 3px solid var(--m2i-yellow); outline-offset: 3px; }
/* Comparatif (3.10.69) : bandeau d'en-tête sombre commun à toutes les offres
   (aucune n'est mise en avant), étiquette orange, nom cliquable vers la page
   de l'offre, prix en orange. Lignes alternées et cases centrées pour suivre
   une ligne d'un bout à l'autre. */
.m2i-compare__scroll { border-color: var(--m2i-border); box-shadow: 0 4px 24px rgba(0, 0, 0, .05); }
.m2i-compare__table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--m2i-fs-base); table-layout: fixed; }
.m2i-compare__table th, .m2i-compare__table td { padding: 18px 24px; text-align: center; vertical-align: middle; }
.m2i-compare__table thead th, .m2i-compare__table thead td { background: var(--m2i-dark); color: #fff; padding: 30px 24px 26px; vertical-align: bottom; position: relative; }
.m2i-compare__table thead th + th::before { content: ''; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: rgba(255, 255, 255, .1); }
.m2i-compare__tag {
  display: inline-block; margin-bottom: 12px; padding: 4px 12px; border-radius: 100px;
  font-size: var(--m2i-fs-xs); font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--m2i-kmprod); background: rgba(254, 116, 21, .08); border: 1px solid rgba(254, 116, 21, .3);
}
.m2i-compare__name { display: block; font-size: var(--m2i-fs-lg); font-weight: 900; letter-spacing: -.5px; color: #fff; text-decoration: none; transition: color .15s; }
/* Toute la case d'en-tête est cliquable. */
.m2i-compare__name::after { content: ''; position: absolute; inset: 0; }
.m2i-compare__name:focus-visible { color: var(--m2i-kmprod); }
@media (hover: hover) { .m2i-compare__table thead th:hover .m2i-compare__name { color: var(--m2i-kmprod); } }
.m2i-compare__name:focus-visible { outline: none; }
.m2i-compare__name:focus-visible::after { outline: 3px solid var(--m2i-kmprod); outline-offset: -3px; }
.m2i-compare__price { display: block; margin-top: 8px; font-size: var(--m2i-fs-base); font-weight: 700; color: var(--m2i-kmprod); }
.m2i-compare__table tbody tr:nth-child(even) > * { background: var(--m2i-bg-light); }
.m2i-compare__table tbody tr:not(.m2i-compare__actions) > * { border-bottom: 1px solid var(--m2i-border); }
/* Séparations verticales entre les offres (3.10.70). */
.m2i-compare__table tbody td + td { border-left: 1px solid var(--m2i-border); }
/* Survols réservés aux écrans à souris et au tableau complet (3.10.71) :
   au doigt, le survol restait accroché à la dernière case touchée. */
@media (hover: hover) and (min-width: 768px) {
.m2i-compare__table tbody tr:not(.m2i-compare__actions):hover > * { background: rgba(254, 116, 21, .06); }
/* Survol d'une colonne (3.10.70) : en-tête ou case d'une offre survolée, toute
   sa colonne se teinte et son nom passe à l'orange. Une case commune à toutes
   les offres (is-shared) ne déclenche rien et ne se teinte pas. :has() n'est
   pas lu par un navigateur ancien : le survol de ligne reste alors seul.
   Jusqu'à cinq offres. */
.m2i-compare__table:has(:is(thead th, tbody td):nth-child(2):not(.is-shared):hover) tbody td:nth-child(2):not(.is-shared),
.m2i-compare__table:has(:is(thead th, tbody td):nth-child(3):not(.is-shared):hover) tbody td:nth-child(3):not(.is-shared),
.m2i-compare__table:has(:is(thead th, tbody td):nth-child(4):not(.is-shared):hover) tbody td:nth-child(4):not(.is-shared),
.m2i-compare__table:has(:is(thead th, tbody td):nth-child(5):not(.is-shared):hover) tbody td:nth-child(5):not(.is-shared),
.m2i-compare__table:has(:is(thead th, tbody td):nth-child(6):not(.is-shared):hover) tbody td:nth-child(6):not(.is-shared) { background: rgba(254, 116, 21, .1); }
.m2i-compare__table:has(:is(thead th, tbody td):nth-child(2):not(.is-shared):hover) thead th:nth-child(2),
.m2i-compare__table:has(:is(thead th, tbody td):nth-child(3):not(.is-shared):hover) thead th:nth-child(3),
.m2i-compare__table:has(:is(thead th, tbody td):nth-child(4):not(.is-shared):hover) thead th:nth-child(4),
.m2i-compare__table:has(:is(thead th, tbody td):nth-child(5):not(.is-shared):hover) thead th:nth-child(5),
.m2i-compare__table:has(:is(thead th, tbody td):nth-child(6):not(.is-shared):hover) thead th:nth-child(6) { background: #20252d; box-shadow: inset 0 3px 0 var(--m2i-kmprod); }
.m2i-compare__table:has(:is(thead th, tbody td):nth-child(2):not(.is-shared):hover) thead th:nth-child(2) .m2i-compare__name,
.m2i-compare__table:has(:is(thead th, tbody td):nth-child(3):not(.is-shared):hover) thead th:nth-child(3) .m2i-compare__name,
.m2i-compare__table:has(:is(thead th, tbody td):nth-child(4):not(.is-shared):hover) thead th:nth-child(4) .m2i-compare__name,
.m2i-compare__table:has(:is(thead th, tbody td):nth-child(5):not(.is-shared):hover) thead th:nth-child(5) .m2i-compare__name,
.m2i-compare__table:has(:is(thead th, tbody td):nth-child(6):not(.is-shared):hover) thead th:nth-child(6) .m2i-compare__name { color: var(--m2i-kmprod); }
}
.m2i-compare__table thead th, .m2i-compare__table td { transition: background-color .15s; }
.m2i-compare__table tbody th { width: 22%; text-align: left; font-size: var(--m2i-fs-xs); font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--m2i-dark); border-right: 1px solid var(--m2i-border); }
.m2i-compare__table td { color: var(--m2i-dark); line-height: 1.5; }
.m2i-compare__table td.is-empty, .m2i-offer__facts dd.is-empty { color: #A8A396; font-style: italic; }
.m2i-compare__table td.is-shared { font-weight: 700; }
/* Tableau compact (3.10.77) : il tient sur un écran d'ordinateur portable,
   en-tête et ligne « Voir l'offre » compris. Colonne des libellés à 18 %
   (en table-layout fixed, c'est la première ligne qui fixe les largeurs) :
   les textes des offres passent sur moins de lignes. */
.m2i-compare__head { margin-bottom: 28px; }
.m2i-compare__table { font-size: var(--m2i-fs-sm); }
.m2i-compare__table thead td:first-child { width: 18%; }
.m2i-compare__table th, .m2i-compare__table td { padding: 11px 20px; }
.m2i-compare__table td { line-height: 1.45; }
.m2i-compare__table thead th, .m2i-compare__table thead td { padding: 18px 20px 16px; }
.m2i-compare__table thead th + th::before { top: 16px; bottom: 16px; }
.m2i-compare__tag { margin-bottom: 7px; padding: 3px 10px; font-size: var(--m2i-fs-xs); }
.m2i-compare__name { font-size: var(--m2i-fs-md); }
.m2i-compare__price { margin-top: 4px; font-size: var(--m2i-fs-sm); }
.m2i-compare__table tbody th { font-size: var(--m2i-fs-xs); letter-spacing: 1px; }
.m2i-compare__table tbody tr.m2i-compare__actions > * { padding-top: 13px; padding-bottom: 14px; }
.m2i-compare__tools { margin-bottom: 10px; }
.m2i-compare__table tbody tr.m2i-compare__actions > * { background: #fff; padding-top: 24px; padding-bottom: 26px; }
.m2i-compare__actions td { border-bottom: 0; }

/* Outils du comparatif (3.10.71) : interrupteur « Seulement les
   différences », sur toutes les tailles ; pastilles du duel, sur mobile. */
.m2i-compare__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px; margin-bottom: 16px; }
.m2i-compare__duel { display: none; }
.m2i-compare__diff { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--m2i-fs-sm); font-weight: 600; color: var(--m2i-dark); cursor: pointer; user-select: none; }
.m2i-compare__diff input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.m2i-compare__switch { position: relative; width: 38px; height: 22px; border-radius: 100px; background: var(--m2i-border); transition: background .2s; flex-shrink: 0; }
.m2i-compare__switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.m2i-compare__diff input:checked + .m2i-compare__switch { background: var(--m2i-kmprod); }
.m2i-compare__diff input:checked + .m2i-compare__switch::after { transform: translateX(16px); }
.m2i-compare__diff input:focus-visible + .m2i-compare__switch { outline: 3px solid var(--m2i-kmprod); outline-offset: 2px; }
.m2i-compare__table.is-diff-only tbody tr.is-same { display: none; }

/* Mode duel (mobile) : deux offres face à face, choisies dans les pastilles.
   Bandeau des deux noms collé sous le header avec un « VS » au milieu ; chaque
   critère en titre au-dessus des deux valeurs ; une valeur identique pour les
   deux s'affiche une fois. Sans JavaScript, le tableau défile comme avant. */
@media (max-width: 767px) {
  .m2i-compare__tools { justify-content: flex-start; }
  .m2i-compare__duel { display: block; width: 100%; }
  .m2i-compare__duel-hint { font-size: var(--m2i-fs-xs); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--m2i-text-gray); margin-bottom: 10px; }
  .m2i-compare__pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .m2i-compare__pill {
    flex-shrink: 0; padding: 9px 16px; border-radius: 100px; font: inherit; font-size: var(--m2i-fs-sm); font-weight: 700;
    border: 1px solid var(--m2i-border); background: #fff; color: var(--m2i-dark); cursor: pointer; min-height: 44px;
  }
  .m2i-compare__pill[aria-pressed="true"] { background: var(--m2i-dark); border-color: var(--m2i-dark); color: #fff; box-shadow: inset 0 -3px 0 var(--m2i-kmprod); }

  .m2i-compare__scroll:has(.is-duel) { overflow: visible; }
  .m2i-compare__table.is-duel, .m2i-compare__table.is-duel :is(thead, tbody) { display: block; min-width: 0; }
  .m2i-compare__table.is-duel tr { display: grid; grid-template-columns: 1fr 1fr; }
  .m2i-compare__table.is-duel :is(thead, tbody) :is(th, td):not(.is-on):not(.is-shared):not([scope="row"]) { display: none; }
  /* C'est le thead qui colle : son parent (la table) a toute la hauteur du
     comparatif, alors qu'une ligne ne peut pas sortir de son thead. */
  .m2i-compare__table.is-duel thead {
    position: sticky; top: var(--m2i-header-height); z-index: 5;
    background: var(--m2i-dark); border-radius: 16px 16px 0 0;
  }
  body.admin-bar .m2i-compare__table.is-duel thead { top: calc(var(--m2i-header-height) + 46px); }
  .m2i-compare__table.is-duel thead tr { position: relative; }
  .m2i-compare__table.is-duel thead th { padding: 18px 14px 16px; }
  .m2i-compare__table.is-duel thead th::before { display: none; }
  .m2i-compare__table.is-duel .m2i-compare__name { font-size: var(--m2i-fs-md); }
  .m2i-compare__table.is-duel .m2i-compare__price { font-size: var(--m2i-fs-sm); }
  .m2i-compare__table.is-duel .m2i-compare__tag { margin-bottom: 8px; font-size: var(--m2i-fs-xs); letter-spacing: 1.5px; padding: 3px 9px; }
  .m2i-compare__table.is-duel thead tr::after {
    content: 'VS'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: var(--m2i-kmprod); color: var(--m2i-dark); font-size: var(--m2i-fs-xs); font-weight: 900; letter-spacing: .5px;
    box-shadow: 0 0 0 4px var(--m2i-dark); pointer-events: none;
  }
  .m2i-compare__table.is-duel tbody tr > * { background: transparent; border: 0; }
  .m2i-compare__table.is-duel tbody tr:not(.m2i-compare__actions) { border-bottom: 1px solid var(--m2i-border); }
  .m2i-compare__table.is-duel tbody tr:nth-child(even) { background: var(--m2i-bg-light); }
  .m2i-compare__table.is-duel tbody th { grid-column: 1 / -1; width: auto; text-align: center; padding: 16px 16px 4px; font-size: var(--m2i-fs-xs); color: var(--m2i-text-gray); }
  .m2i-compare__table.is-duel tbody td { padding: 4px 14px 16px; font-size: var(--m2i-fs-sm); }
  .m2i-compare__table.is-duel tbody td.is-on-b { border-left: 1px solid var(--m2i-border); }
  .m2i-compare__table.is-duel tbody :is(td.is-shared, td.is-merged) { grid-column: 1 / -1; border-left: 0; font-weight: 700; }
  .m2i-compare__table.is-duel tbody td.is-dup { display: none; }
  .m2i-compare__table.is-duel tbody tr.m2i-compare__actions > td { padding: 18px 14px 20px; }
}

/* Page d'une offre */
.m2i-offer { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 72px; align-items: start; }
.m2i-offer__main h2 { font-size: var(--m2i-fs-xl); font-weight: 900; letter-spacing: -.6px; margin: 44px 0 18px; color: var(--m2i-dark); }
/* Présentation qui commence par un intertitre (3.10.73) : pas de marge au-dessus. */
.m2i-offer__main > :is(h2, h3):first-child { margin-top: 0; }
/* Sous-intertitre de la présentation (3.10.74). */
.m2i-offer__main h3 { font-size: var(--m2i-fs-lg); font-weight: 800; letter-spacing: -.3px; margin: 28px 0 8px; color: var(--m2i-dark); }
.m2i-offer__main h2 + h3 { margin-top: 0; }
/* Encadré de la fiche d'offre, collé à 24 px sous le header (3.10.83).
   Plus de défilement à l'intérieur (08/10/2026, « l'ascenseur dans
   l'ascenseur ») : espacements multipliés par --k, que assets/js/offer-page.js
   réduit jusqu'à ce que l'encadré tienne dans la fenêtre (0,6 au plus bas) ;
   le texte garde sa taille (échelle --m2i-fs-*, 09/10/2026). S'il ne tient
   toujours pas, il n'est plus collé (classe is-unstuck) et défile avec la
   page. Prix et bouton restent groupés en bas. */
.m2i-offer__aside {
  display: flex; flex-direction: column;
  position: sticky; top: calc(var(--m2i-header-height) + 24px);
  padding: calc(24px * var(--k, 1)) 26px; border-radius: 16px; background: var(--m2i-dark); color: #fff;
}
.m2i-offer__aside.is-unstuck { position: static; }
.m2i-offer__price { font-size: var(--m2i-fs-xl); font-weight: 900; letter-spacing: -.8px; color: var(--m2i-accent); margin-bottom: calc(14px * var(--k, 1)); line-height: 1.1; }
.m2i-offer__facts { margin: 0 0 calc(18px * var(--k, 1)); }
.m2i-offer__facts div { padding: calc(8px * var(--k, 1)) 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.m2i-offer__facts div:first-child { border-top: 0; padding-top: 0; }
.m2i-offer__facts dt { font-size: var(--m2i-fs-xs); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.m2i-offer__facts dd { margin: calc(2px * var(--k, 1)) 0 0; font-size: var(--m2i-fs-sm); line-height: 1.4; }
.m2i-offer__deal { flex: none; padding-top: calc(18px * var(--k, 1)); border-top: 1px solid rgba(255, 255, 255, .2); }
.m2i-offer__aside .m2i-btn-primary { display: block; text-align: center; }
.m2i-checklist { list-style: none; margin: 0; }
.m2i-checklist li { position: relative; padding: 12px 0 12px 34px; font-size: var(--m2i-fs-md); line-height: 1.55; color: var(--m2i-text-body); border-top: 1px solid var(--m2i-border-lighter); }
/* Trait au lieu d'une coche (3.10.81), comme les avantages des cartes
   d'offre de l'accueil ; calé sur le milieu de la première ligne. */
.m2i-checklist li::before {
  content: ""; position: absolute; left: 2px; top: calc(12px + .775em - 1.5px); width: 16px; height: 3px;
  border-radius: 2px; background: var(--m2i-accent);
}

/* --------------------------------------------------------------------------
   Partenaires, Ressources, Académie, études de cas
   -------------------------------------------------------------------------- */
.m2i-partners-list__title { margin-bottom: 40px; }
.m2i-partner-cards { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
/* Fiche partenaire (09/10/2026, « moins d'espace perdu ») : logo compact à
   côté du nom et de la région, présentation sur toute la largeur dessous, au
   lieu d'une colonne de logo vide sur toute la hauteur du texte. */
.m2i-partner-card {
  display: grid; grid-template-columns: 136px minmax(0, 1fr);
  grid-template-areas: "logo name" "logo country" "desc desc" "link link";
  column-gap: 20px; align-items: center;
  padding: 24px; background: #fff; border-radius: 16px; border: 1px solid var(--m2i-border);
}
.m2i-partner-card__body { display: contents; }
.m2i-partner-card > .m2i-media--logo { grid-area: logo; height: 76px; padding: 10px 14px; }
.m2i-partner-card__name { grid-area: name; align-self: end; font-size: var(--m2i-fs-lg); font-weight: 900; letter-spacing: -.4px; color: var(--m2i-dark); }
.m2i-partner-card__country { grid-area: country; align-self: start; margin-top: 4px; font-size: var(--m2i-fs-xs); font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--m2i-text-gray); }
.m2i-partner-card__desc, .m2i-partner-card .m2i-todo { grid-area: desc; margin-top: 16px; font-size: var(--m2i-fs-base); line-height: 1.6; color: var(--m2i-text-body); }
.m2i-partner-card .m2i-todo { font-size: var(--m2i-fs-sm); }
.m2i-partner-card .m2i-link-underline { grid-area: link; justify-self: start; margin-top: 14px; }

.m2i-doors { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.m2i-door a { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.m2i-door .m2i-media { margin-bottom: 8px; transition: transform .25s ease; }
.m2i-door a:hover .m2i-media, .m2i-door a:focus-visible .m2i-media { transform: translateY(-3px); }
.m2i-door__title { display: flex; align-items: center; gap: 10px; font-size: var(--m2i-fs-xl); font-weight: 900; letter-spacing: -.6px; color: var(--m2i-dark); }
.m2i-door__title svg { color: var(--m2i-accent-deep); }
.m2i-door__text { font-size: var(--m2i-fs-md); line-height: 1.65; color: var(--m2i-text-body); }
.m2i-door__type { margin-bottom: -6px; } /* Type de logiciel, page Solutions. */
/* Tiret de couleur des logiciels dans le menu Solutions (07/10/2026). */
.m2i-nav-dash { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--m2i-yellow); vertical-align: middle; margin: -2px 10px 0 0; }
/* Quatre portes (Ressources) : deux par ligne plutôt qu'une seule sur la dernière. */
@media (min-width: 1025px) { .m2i-doors--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Modules de KmProd (10/10/2026) : quatre par ligne, illustration, nom, accroche. */
.m2i-modules__grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; }
.m2i-module__inner { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.m2i-module .m2i-media { margin-bottom: 10px; border-radius: 6px; overflow: hidden; }
.m2i-module .m2i-media--screen img { padding: 14px; }
a.m2i-module__inner .m2i-media { transition: transform .25s ease; }
a.m2i-module__inner:hover .m2i-media, a.m2i-module__inner:focus-visible .m2i-media { transform: translateY(-3px); }
.m2i-module__title { position: relative; padding-left: 22px; font-size: var(--m2i-fs-lg); font-weight: 800; letter-spacing: -.3px; color: var(--m2i-dark); }
.m2i-module__title::before { content: ""; position: absolute; left: 0; top: .62em; width: 14px; height: 3px; border-radius: 2px; background: var(--m2i-accent); }
.m2i-module__lede { font-size: var(--m2i-fs-base); line-height: 1.6; color: var(--m2i-text-body); }

.m2i-topic__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.m2i-topic__intro { margin-top: 14px; font-size: var(--m2i-fs-md); line-height: 1.65; color: var(--m2i-text-body); max-width: 680px; }

.m2i-cases { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
.m2i-case a { display: block; }
.m2i-case__body { padding-top: 20px; }
.m2i-case__title { font-size: var(--m2i-fs-xl); font-weight: 900; line-height: 1.2; letter-spacing: -.6px; color: var(--m2i-dark); }
.m2i-case__excerpt { margin-top: 12px; font-size: var(--m2i-fs-md); line-height: 1.65; color: var(--m2i-text-body); }
.m2i-case__logo { margin-top: 20px; max-width: 200px; }
.m2i-case__logo .m2i-media--logo { height: 72px; }
.m2i-case-story { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: 64px; align-items: start; }
.m2i-case-story__client { position: sticky; top: calc(var(--m2i-header-height) + 24px); }
.m2i-case-story__client p { margin-top: 10px; font-size: var(--m2i-fs-sm); font-weight: 700; color: var(--m2i-text-gray); }

/* --------------------------------------------------------------------------
   Rejoindre, contact, support
   -------------------------------------------------------------------------- */
.m2i-jobs { list-style: none; margin: 32px 0; border-top: 2px solid var(--m2i-dark); }
.m2i-jobs a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; border-bottom: 1px solid var(--m2i-border); font-size: var(--m2i-fs-lg); font-weight: 800; color: var(--m2i-dark); }
.m2i-jobs a:hover, .m2i-jobs a:focus-visible { color: var(--m2i-dark); text-decoration: underline; text-decoration-color: var(--m2i-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.m2i-jobs__none { margin: 24px 0; font-size: var(--m2i-fs-md); line-height: 1.6; color: var(--m2i-text-body); }
.m2i-jobs__mail { margin-top: 28px; }

.m2i-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: start; }
.m2i-contact__title { font-size: var(--m2i-fs-xl); font-weight: 900; letter-spacing: -.6px; color: var(--m2i-dark); margin-bottom: 20px; }
.m2i-contact address { font-style: normal; font-size: var(--m2i-fs-md); line-height: 1.6; color: var(--m2i-text-body); }
.m2i-contact__lines { margin: 22px 0; font-size: var(--m2i-fs-lg); font-weight: 800; line-height: 1.7; }
.m2i-contact__lines a:hover, .m2i-contact__lines a:focus-visible { color: var(--m2i-dark); text-decoration: underline; text-decoration-color: var(--m2i-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.m2i-contact__support { margin-bottom: 32px; font-size: var(--m2i-fs-base); color: var(--m2i-text-gray); }
.m2i-form-placeholder { padding: 36px; border-radius: 16px; background: var(--m2i-bg-light); border: 1px solid var(--m2i-border); }
.m2i-form-placeholder .m2i-todo { margin-bottom: 24px; }

.m2i-support { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 40px; }
.m2i-support__channel { display: flex; flex-direction: column; gap: 10px; padding: 36px; border-radius: 16px; background: var(--m2i-dark); color: #fff; transition: transform .2s ease; }
.m2i-support__channel:hover, .m2i-support__channel:focus-visible { transform: translateY(-3px); }
.m2i-support__kind { font-size: var(--m2i-fs-sm); font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--m2i-yellow); }
.m2i-support__value { font-size: clamp(24px, 2.6vw, 34px); font-weight: 900; letter-spacing: -.6px; }
.m2i-support__hours { font-size: var(--m2i-fs-md); color: var(--m2i-text-body); margin-bottom: 20px; }
.m2i-support__portal { margin-top: 24px; }

/* --------------------------------------------------------------------------
   Responsive de la refonte
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .m2i-phero__inner { grid-template-columns: 1fr; gap: 40px; min-height: 0; padding: calc(var(--m2i-header-height) + 48px) 32px 0; }
  .m2i-phero--compact .m2i-phero__inner { padding-bottom: 56px; }
  .m2i-phero__media { position: relative; left: auto; right: auto; margin: 0 -32px; height: 340px; }
  .m2i-phero__media .m2i-media::before { background: linear-gradient(180deg, var(--m2i-darker) 0%, rgba(13, 17, 23, 0) 30%); }
  /* minmax(0, 1fr) et non 1fr : 1fr vaut minmax(auto, 1fr), et un contenu long
     (adresse e-mail, titre) imposait alors sa largeur et faisait déborder. */
  .m2i-split__grid, .m2i-quote__grid, .m2i-offer, .m2i-contact, .m2i-case-story { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .m2i-split--reverse .m2i-split__media { order: 0; }
  .m2i-offer__aside, .m2i-case-story__client { position: static; }
  .m2i-cards, .m2i-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m2i-modules__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m2i-card--lead .m2i-card__link { grid-template-columns: 1fr; gap: 0; }
  .m2i-card--lead .m2i-card__body { padding-top: 18px; }
  .m2i-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 260px; }
  .m2i-partner-cards { grid-template-columns: 1fr; }
  .m2i-concrete__text { columns: 1; }
}
@media (max-width: 640px) {
  /* Gouttière du thème inchangée sur mobile (32px) : l'en-tête s'y aligne. */
  .m2i-phero__media { height: 260px; }
  .m2i-phero__lede { font-size: var(--m2i-fs-md); }
  .m2i-prose p { font-size: var(--m2i-fs-md); }
  .m2i-cards, .m2i-doors, .m2i-cases, .m2i-support { grid-template-columns: minmax(0, 1fr); }
  .m2i-modules__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .m2i-contact__lines, .m2i-support__value { overflow-wrap: anywhere; }
  .m2i-mosaic { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 240px; }
  .m2i-mosaic__tile--lead { grid-column: auto; grid-row: span 1; }
  .m2i-partner-card { grid-template-columns: 112px minmax(0, 1fr); padding: 20px; }
  .m2i-statement { padding: 56px 0; }
  .m2i-topic__head { flex-direction: column; align-items: flex-start; }
}

/* Capture du logiciel dans un en-tête : montrée en entier, pas recadrée. */
.m2i-phero__media .m2i-media--natural { background: var(--m2i-darker); }
.m2i-phero__media .m2i-media--natural img { object-fit: contain; padding: 48px 40px 48px 64px; }
.m2i-phero__media .m2i-media--natural::before { background: linear-gradient(90deg, var(--m2i-darker) 0%, rgba(13, 17, 23, 0) 18%); }
@media (max-width: 1024px) {
  .m2i-phero__media .m2i-media--natural img { padding: 24px 0; }
}

/* Captures d'écran (bibliothèque, fit « contain ») : entières, sur un fond
   neutre, avec une ombre légère pour détacher l'interface. Pas de bichrome. */
.m2i-media--screen { background: #ECEAE4; }
.m2i-media--screen img { object-fit: contain; padding: 28px; filter: drop-shadow(0 10px 24px rgba(13, 17, 23, .14)); }
.m2i-tone-dark .m2i-media--screen { background: #1C222B; }
.m2i-media--screen.m2i-media--duotone img { filter: drop-shadow(0 10px 24px rgba(13, 17, 23, .14)); }
.m2i-phero__media .m2i-media--screen { background: var(--m2i-darker); }
.m2i-phero__media .m2i-media--screen img { padding: 48px 40px 48px 64px; filter: none; }
.m2i-mosaic__tile .m2i-media--screen img, .m2i-door .m2i-media--screen img { padding: 18px; }

/* ==========================================================================
   Accueil — « Qui sommes-nous » : photo + chiffres en surimpression
   (remplace la grille des services à carrés jaunes, 03/10/2026)
   ========================================================================== */
.m2i-about-visual { position: relative; }
.m2i-about-visual .m2i-media { border-radius: 18px; }
.m2i-about-visual__stats {
  position: absolute; left: 20px; right: 20px; bottom: 20px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
/* Un seul encart : toute la largeur de la photo. */
.m2i-about-visual__stats--single { grid-template-columns: minmax(0, 1fr); }
.m2i-about-visual__stats .m2i-about-stat {
  background: rgba(13, 17, 23, .88); border-radius: 14px; padding: 22px 24px;
  backdrop-filter: blur(6px);
}
.m2i-about-visual .m2i-media--placeholder .m2i-media__label { margin-bottom: 150px; }

/* Accueil — références : mêmes logos que les pages intérieures. */
#references .m2i-logos__grid { margin-bottom: 8px; }

/* ==========================================================================
   Académie — look « bibliothèque », distinct du magazine de l'actualité
   ========================================================================== */
.m2i-acad-hero {
  padding: calc(var(--m2i-header-height) + 72px) 0 64px;
  background-color: #F4F1E8;
  background-image:
    linear-gradient(rgba(17, 20, 25, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 20, 25, .05) 1px, transparent 1px);
  background-size: 32px 32px;
  border-bottom: 1px solid #E2DDCD;
}
.m2i-acad-hero__title { font-size: clamp(44px, 5vw, 72px); font-weight: 900; letter-spacing: -.045em; line-height: 1; color: var(--m2i-dark); }
.m2i-acad-hero__lede { margin-top: 22px; max-width: 640px; font-size: var(--m2i-fs-lg); line-height: 1.6; color: var(--m2i-text-body); }
.m2i-acad-toc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.m2i-acad-toc a {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: #fff; border: 1px solid #E2DDCD; border-radius: 100px;
  font-size: var(--m2i-fs-base); font-weight: 700; color: var(--m2i-dark);
}
.m2i-acad-toc a:hover, .m2i-acad-toc a:focus-visible { border-color: var(--m2i-dark); }

.m2i-acad-start__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; align-items: stretch; border-radius: 18px; overflow: hidden; background: var(--m2i-dark); }
.m2i-acad-start__main { display: flex; flex-direction: column; gap: 16px; padding: 56px; color: #fff; }
.m2i-acad-start__title { font-size: clamp(30px, 3vw, 42px); font-weight: 900; letter-spacing: -.03em; line-height: 1.1; }
.m2i-acad-start__text { font-size: var(--m2i-fs-md); line-height: 1.65; color: rgba(255, 255, 255, .74); max-width: 560px; }
.m2i-acad-start__main .m2i-link-underline { color: #fff; align-self: flex-start; margin-top: 8px; }
.m2i-acad-start__grid .m2i-media { border-radius: 0; height: 100%; }

.m2i-acad-chapter { border-top: 1px solid var(--m2i-border); }
.m2i-acad-chapter__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; align-items: start; }
.m2i-acad-chapter__head { position: sticky; top: calc(var(--m2i-header-height) + 32px); }
.m2i-acad-chapter__title { font-size: 34px; font-weight: 900; letter-spacing: -.03em; color: var(--m2i-dark); }
.m2i-acad-chapter__intro { margin: 14px 0 22px; font-size: var(--m2i-fs-md); line-height: 1.65; color: var(--m2i-text-body); }

/* Liste de lecture (Académie, archives de ses catégories) */
.m2i-rows { list-style: none; margin: 0; border-top: 2px solid var(--m2i-dark); }
.m2i-row a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 22px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--m2i-border); }
.m2i-row .m2i-media { border-radius: 10px; }
.m2i-row .m2i-media__label { display: none; }
.m2i-row__body { display: flex; flex-direction: column; gap: 6px; }
.m2i-row__title { font-size: var(--m2i-fs-lg); font-weight: 800; line-height: 1.3; letter-spacing: -.3px; color: var(--m2i-dark); }
.m2i-row__excerpt { font-size: var(--m2i-fs-base); line-height: 1.55; color: var(--m2i-text-body); }
.m2i-row__date { font-size: var(--m2i-fs-sm); font-weight: 700; letter-spacing: .4px; color: var(--m2i-text-gray); }
.m2i-row a:hover .m2i-row__title, .m2i-row a:focus-visible .m2i-row__title { text-decoration: underline; text-decoration-color: var(--m2i-accent); text-decoration-thickness: 3px; text-underline-offset: 4px; }

.m2i-acad-glossary { background: #F4F1E8; }
.m2i-acad-glossary__text { margin: 18px 0 28px; max-width: 640px; font-size: var(--m2i-fs-md); line-height: 1.65; color: var(--m2i-text-body); }
.m2i-acad-az { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.m2i-acad-az a {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  background: #fff; border: 1px solid #E2DDCD; border-radius: 10px; font-size: var(--m2i-fs-md); font-weight: 900; color: var(--m2i-dark);
}
.m2i-acad-az a:hover, .m2i-acad-az a:focus-visible { background: var(--m2i-yellow); border-color: var(--m2i-yellow); }

@media (max-width: 1024px) {
  .m2i-acad-start__grid, .m2i-acad-chapter__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .m2i-acad-chapter__head { position: static; }
  .m2i-acad-start__main { padding: 40px 32px; }
}
@media (max-width: 640px) {
  .m2i-row a { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
  .m2i-row__excerpt { display: none; }
  .m2i-about-visual__stats { left: 12px; right: 12px; bottom: 12px; gap: 8px; }
  .m2i-about-visual__stats .m2i-about-stat { padding: 16px; }
}
.m2i-about-visual__stats .m2i-about-stat__value { font-size: clamp(32px, 3.4vw, 46px); }

/* Pages de l'Académie (glossaire, guide MES) : en-tête clair commun. */
.m2i-acad-hero--page { padding-bottom: 56px; }
.m2i-breadcrumb--light ol { margin-bottom: 24px; }
.m2i-breadcrumb--light li { color: var(--m2i-text-gray); }
.m2i-breadcrumb--light li + li::before { color: #B9B2A0; }
.m2i-breadcrumb--light a { color: var(--m2i-text-body); }
.m2i-breadcrumb--light a:hover, .m2i-breadcrumb--light a:focus-visible { color: var(--m2i-dark); text-decoration: underline; text-decoration-color: var(--m2i-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.m2i-breadcrumb--light [aria-current] { color: var(--m2i-dark); font-weight: 700; }

/* Glossaire : index aux couleurs de l'Académie. */
.m2i-glossary-page .m2i-glossary-index { background: #F4F1E8; border-color: #E2DDCD; }
.m2i-glossary-page .m2i-glossary-index a { width: 40px; height: 40px; border-color: #E2DDCD; font-size: var(--m2i-fs-base); font-weight: 900; }
.m2i-glossary-page .m2i-glossary-group__letter { font-size: 34px; letter-spacing: -.02em; color: var(--m2i-dark); border-bottom: 2px solid var(--m2i-dark); }
.m2i-glossary-page .m2i-glossary-term__name { font-size: var(--m2i-fs-md); }
.m2i-glossary-page .m2i-glossary-def { font-size: var(--m2i-fs-md); }

/* Hero tenu dans le premier écran, bandeau des métiers compris (retour du
   03/10/2026 : « je dois le voir sans défiler, sur PC aussi »). Les tailles
   verticales ci-dessus suivent la hauteur de fenêtre ; sur téléphone, où le
   sous-titre et les boutons empilés prenaient le plus de place, on resserre
   et les secteurs passent à la ligne. */
@media (max-height: 640px) and (min-width: 769px) {
  .m2i-hero__badge { display: none; }
}
@media (max-width: 768px) {
  .m2i-hero__content { padding-top: calc(var(--m2i-header-height) + 14px); padding-bottom: 14px; }
  .m2i-hero__badge { margin-bottom: 14px; padding: 5px 14px; }
  .m2i-hero__title { margin-bottom: 10px; }
  .m2i-hero__subtitle { font-size: var(--m2i-fs-sm); line-height: 1.55; margin-bottom: 16px; }
  .m2i-hero__actions { gap: 8px; margin-bottom: 18px; }
  .m2i-hero__actions .m2i-btn-primary,
  .m2i-hero__actions .m2i-btn-outline { padding: 12px 18px; font-size: var(--m2i-fs-sm); }
  .m2i-hero__stats { padding-top: 12px; }
  .m2i-sectors--hero .m2i-sectors__row { gap: 8px; padding-block: 12px; }
  .m2i-sectors--hero .m2i-sectors__intro { font-size: var(--m2i-fs-xs); }
  .m2i-sectors--hero .m2i-sectors__list { gap: 6px; }
  .m2i-sectors--hero .m2i-sectors__list a { font-size: var(--m2i-fs-sm); padding: 5px 12px; }
}
@media (max-width: 768px) and (max-height: 700px) {
  .m2i-hero__badge { margin-bottom: 10px; }
  .m2i-sectors--hero .m2i-sectors__row { gap: 6px; padding-block: 10px; }
  .m2i-hero__title { font-size: var(--m2i-fs-xl); }
  .m2i-hero__subtitle { font-size: var(--m2i-fs-sm); margin-bottom: 12px; }
  .m2i-hero__stat-value { font-size: var(--m2i-fs-xl); }
}

/* Écrans étroits (retours du 03/10/2026). Le hero garde tout l'écran (« il
   doit jouer son rôle de hero »), mais son contenu se centre dans l'espace
   au-dessus du bandeau : calé en bas, il laissait un grand vide en haut
   (« l'organisation verticale est cata »). La vidéo perd son zoom ×1,45 :
   recadrée en hauteur, elle n'en montrait qu'un cinquième.
   TODO : une version verticale de la vidéo pour téléphone (<source media>). */
@media (max-width: 1024px) {
  .m2i-hero__content {
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    padding-top: calc(var(--m2i-header-height) + 32px);
  }
  .m2i-hero__badge { align-self: flex-start; }
  .m2i-hero__media video { transform: translate(-50%, -50%); }
  /* Le texte occupe toute la largeur : le voile horizontal, transparent à
     droite, y laissait la fin des lignes sur la vidéo claire. Voile uniforme. */
  .m2i-hero__gradient { background: linear-gradient(to bottom, rgba(13, 17, 23, .62) 0%, rgba(13, 17, 23, .72) 60%, rgba(13, 17, 23, .92) 100%); }
}
@media (max-width: 768px) {
  .m2i-hero__content { padding-top: calc(var(--m2i-header-height) + 20px); }
}

/* « KmProd en situation » sur écran étroit (retour du 03/10/2026 : « les
   images sont écrasées tout à droite au lieu d'être en dessous des trois
   blocs »). La grille gardait sa colonne d'onglets de 300 px à toutes les
   largeurs : la fenêtre se tassait à droite, et débordait sous 380 px. */
@media (max-width: 900px) {
  .m2i-solutions-demo__layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .m2i-solutions-demo { margin-top: 64px; }
}

/* « KmProd en situation », écran large (07/10/2026) : l'image occupe toute
   la largeur de sa colonne, en 16/10, comme les autres blocs de la page ; la
   liste d'onglets s'étire à sa hauteur, chaque onglet en prend une part égale,
   avec des textes plus grands. Une capture 4/3 perd un peu de son bas, le haut
   de l'interface reste visible. Les panneaux illustratifs (sans photo)
   gardent leur mise en page. */
@media (min-width: 901px) {
  .m2i-solutions-demo__layout:has(.m2i-solutions-demo__panel--photo) { align-items: stretch; }
  .m2i-solutions-demo__layout:has(.m2i-solutions-demo__panel--photo) .m2i-solutions-demo__tabs { grid-auto-rows: 1fr; }
  .m2i-solutions-demo__layout:has(.m2i-solutions-demo__panel--photo) .m2i-solutions-demo__tabs button { display: flex; align-items: center; padding: 14px 20px; }
  .m2i-solutions-demo__layout:has(.m2i-solutions-demo__panel--photo) .m2i-solutions-demo__tab-copy { gap: 6px; }
  .m2i-solutions-demo__layout:has(.m2i-solutions-demo__panel--photo) .m2i-solutions-demo__tab-copy b { font-size: var(--m2i-fs-md); }
  .m2i-solutions-demo__layout:has(.m2i-solutions-demo__panel--photo) .m2i-solutions-demo__tab-copy small { font-size: var(--m2i-fs-sm); }
  .m2i-solutions-demo__window > .m2i-solutions-demo__panel--photo .m2i-media { aspect-ratio: 16 / 10 !important; height: auto; }
  .m2i-solutions-demo__window > .m2i-solutions-demo__panel--photo .m2i-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
}

/* « Nos offres MES » sur un écran d'ordinateur (07/10/2026) : la section
   faisait 1 190 px de haut, plus qu'un écran. Espacements multipliés par
   --k, posé sur la section par assets/js/offers-slider.js d'après la hauteur
   de la fenêtre : de 0,5 (petit portable) à 1,25 (grand écran), pour que les
   cartes tiennent entières sous l'en-tête avec le plus d'air possible. Le
   texte garde sa taille (échelle --m2i-fs-*, 09/10/2026).
   Sans script, --k vaut 1. */
@media (min-width: 1025px) {
  .m2i-offers-section.m2i-section { padding: calc(48px * var(--k, 1)) 0 calc(56px * var(--k, 1)); }
  .m2i-offers-section .m2i-offers-head { margin-bottom: calc(28px * var(--k, 1)); }
  .m2i-offers-section .m2i-offer-card,
  .m2i-offers-section .m2i-offers-grid--cols-3 .m2i-offer-card { padding: calc(34px * var(--k, 1)) 32px; }
  .m2i-offers-section .m2i-offer-card__title { font-size: var(--m2i-fs-xl); margin-top: calc(14px * var(--k, 1)); letter-spacing: -1.2px; }
  .m2i-offers-section .m2i-offer-card__price { font-size: 36px; }
  .m2i-offers-section .m2i-offer-card__pricing { margin: calc(20px * var(--k, 1)) 0 calc(22px * var(--k, 1)); }
  .m2i-offers-section .m2i-offer-card__feature { padding: calc(7px * var(--k, 1)) 0; gap: 14px; line-height: 1.4; }
  .m2i-offers-section .m2i-offer-card__feature span:last-child { font-size: var(--m2i-fs-sm); }
  .m2i-offers-section .m2i-offer-card__features { margin-bottom: calc(26px * var(--k, 1)); }
  .m2i-offers-section .m2i-offer-card__cta { padding: calc(15px * var(--k, 1)); }
}

/* Sections de l'accueil ajustées à la hauteur de l'écran (07/10/2026), comme
   « Nos offres MES ». Chaque écran (attribut data-m2i-fit) reçoit un facteur
   --k de assets/js/fit-screens.js, qui ne touche jamais la taille du texte
   (retour du 09/10/2026 : un zoom global le rendait trop petit) : seuls les
   espacements, le cadre de l'illustration et la largeur des images, dont
   dépend leur hauteur, se réduisent ; les images pas en dessous de 70 %,
   pour rester lisibles. Les marges verticales de la section
   suivent (--ks). Sur ordinateur seulement ; --k vaut 1 par défaut. */
@media (min-width: 1025px) {
  .m2i-fit-section.m2i-section { padding-block: calc(112px * var(--ks, 1)); }

  /* KmProd : présentation et étapes. */
  [data-m2i-fit] .m2i-solutions-head { margin-bottom: calc(56px * var(--k, 1)); }
  [data-m2i-fit] .m2i-solutions-head .m2i-lede { margin: calc(20px * var(--k, 1)) 0 calc(24px * var(--k, 1)); }
  [data-m2i-fit] .m2i-solutions-grid { gap: calc(72px * var(--k, 1)); }
  [data-m2i-fit] .m2i-solutions-illustration { padding: calc(32px * var(--k, 1)); width: calc(100% * max(var(--k, 1), .7)); justify-self: center; }
  [data-m2i-fit] .m2i-pillar { padding-block: calc(26px * var(--k, 1)); }
  [data-m2i-fit] .m2i-pillar:first-child { padding-top: 0; }
  [data-m2i-fit] .m2i-pillar:last-child { padding-bottom: 0; }
  [data-m2i-fit] .m2i-pillar__title { margin-bottom: calc(10px * var(--k, 1)); }

  /* KmProd en situation : marges seulement. L'image garde sa pleine largeur :
     la liste d'onglets, à taille de texte normale, se cale sur sa hauteur. */
  .m2i-solutions-demo[data-m2i-fit] { margin-top: calc(96px * var(--k, 1)); }
  .m2i-solutions-demo[data-m2i-fit] .m2i-solutions-demo__head { margin-bottom: calc(40px * var(--k, 1)); }

  /* Qui sommes-nous : photo moins large, marges des paragraphes. */
  .m2i-about-grid[data-m2i-fit] { gap: calc(80px * var(--k, 1)); }
  .m2i-about-grid[data-m2i-fit] > div > p { margin-block: calc(24px * var(--k, 1)) !important; }
  .m2i-about-grid[data-m2i-fit] .m2i-about-visual { width: calc(100% * max(var(--k, 1), .7)); justify-self: center; }

  /* Références. */
  [data-m2i-fit] .m2i-references-head { margin-bottom: calc(64px * var(--k, 1)); }
  [data-m2i-fit] .m2i-logos__grid { gap: calc(16px * var(--k, 1)); }
  [data-m2i-fit] .m2i-logos__grid .m2i-media--logo { height: calc(96px * max(var(--k, 1), .75)); padding-block: calc(18px * var(--k, 1)); }
  [data-m2i-fit] .m2i-ref-footer { margin-top: calc(56px * var(--k, 1)); padding-top: calc(40px * var(--k, 1)); }
}

/* Partenaires par catégorie (09/10/2026) : une liste par catégorie. */
.m2i-partners-group + .m2i-partners-group { margin-top: 72px; }

/* Vidéo d'en-tête lancée au clic (07/10/2026) : bouton lecture sur l'image
   d'attente, puis lecteur 16/9 centré dans la zone de l'image. */
.m2i-video-facade__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 22px 10px 10px; border: 0; border-radius: 100px; cursor: pointer;
  background: rgba(13, 17, 23, .82); color: #fff; font: inherit; font-size: var(--m2i-fs-base); font-weight: 700;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35); transition: transform .2s ease, background .2s ease;
}
.m2i-video-facade__play:hover, .m2i-video-facade__play:focus-visible { transform: translate(-50%, -50%) scale(1.05); background: rgba(13, 17, 23, .92); }
.m2i-video-facade__icon {
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--m2i-accent); color: var(--m2i-dark);
}
/* Miniature de la vidéo comme image d'attente : entière, sur le fond sombre
   de l'en-tête (une miniature porte souvent du texte, qu'un recadrage coupait). */
.m2i-phero__media .m2i-media--video-thumb { background: var(--m2i-darker); }
.m2i-phero__media .m2i-media--video-thumb img { object-fit: contain; padding: 0; }
/* Bouton sous la miniature, dans la bande sombre, pour ne rien en cacher. */
.m2i-video-facade:has(.m2i-media--video-thumb) .m2i-video-facade__play { top: auto; bottom: 28px; transform: translateX(-50%); }
.m2i-video-facade:has(.m2i-media--video-thumb) .m2i-video-facade__play:hover,
.m2i-video-facade:has(.m2i-media--video-thumb) .m2i-video-facade__play:focus-visible { transform: translateX(-50%) scale(1.05); }
/* Toute l'image lance la vidéo, pas seulement le bouton. */
.m2i-video-facade:not(.is-playing) .m2i-media { cursor: pointer; }
.m2i-video-facade.is-playing .m2i-media, .m2i-video-facade.is-playing .m2i-video-facade__play { display: none; }
.m2i-video-facade__frame {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  width: 100%; aspect-ratio: 16 / 9; max-height: 100%; border: 0; background: #000;
}

/* Légende des panneaux : seulement en slider. */
.m2i-solutions-demo__caption { display: none; }

/* Slider « KmProd en situation » sous 900 px (3.10.76) : les vues défilent
   au doigt, la suivante dépasse à droite pour inviter au geste ; titre et
   texte sous l'image ; les onglets deviennent des points sous la piste.
   Classe posée par assets/js/solutions-tabs.js : sans JavaScript, les
   onglets restent empilés au-dessus du premier panneau. */
@media (max-width: 900px) {
  .m2i-solutions-demo__layout.is-slider { gap: 14px; }
  .is-slider .m2i-solutions-demo__window {
    display: flex; gap: 12px; align-items: flex-start;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
    align-items: stretch;
    border: 0; border-radius: 0; background: none; box-shadow: none;
  }
  .is-slider .m2i-solutions-demo__window::-webkit-scrollbar { display: none; }
  .is-slider .m2i-solutions-demo__panel {
    flex: 0 0 86%; scroll-snap-align: start;
    border: 1px solid var(--m2i-border); border-radius: 12px; overflow: hidden; background: #fff;
  }
  /* Hauteur fixe (3.10.79) : zone d'image de 230 px pour toutes les vues ;
     les vues illustrées, deux fois plus hautes, sont recadrées en haut avec
     un fondu. Les cartes s'alignent sur la légende la plus longue : la
     section ne change plus de hauteur d'une vue à l'autre. */
  .is-slider .m2i-solutions-demo__panel { display: flex; flex-direction: column; }
  .is-slider .m2i-solutions-demo__panel > :first-child { flex: 0 0 230px; height: 230px; aspect-ratio: auto !important; overflow: hidden; }
  .is-slider .m2i-solutions-demo__app { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .is-slider .m2i-solutions-demo__caption { display: grid; align-content: start; gap: 4px; padding: 14px 16px 16px; border-top: 1px solid var(--m2i-border-lighter); }
  .m2i-solutions-demo__caption b { font-size: var(--m2i-fs-base); font-weight: 700; color: var(--m2i-dark); letter-spacing: -.2px; }
  .m2i-solutions-demo__caption small { font-size: var(--m2i-fs-sm); line-height: 1.5; color: var(--m2i-text-gray); }

  .is-slider .m2i-solutions-demo__tabs { order: 2; display: flex; justify-content: center; gap: 4px; }
  .is-slider .m2i-solutions-demo__tabs button {
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none;
    display: grid; place-items: center;
  }
  .is-slider .m2i-solutions-demo__tabs button::before {
    content: ''; width: 9px; height: 9px; border-radius: 100px; background: var(--m2i-border); transition: width .2s, background .2s;
  }
  .is-slider .m2i-solutions-demo__tabs button[aria-selected="true"] { background: none; }
  .is-slider .m2i-solutions-demo__tabs button[aria-selected="true"]::before { width: 26px; background: var(--m2i-accent); }
  .is-slider .m2i-solutions-demo__tab-copy {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .m2i-solutions-demo__app-body { padding: 18px; min-height: 0; }
  .m2i-solutions-demo__metrics > div { padding-left: 10px; }
  .m2i-solutions-demo__metrics strong { font-size: var(--m2i-fs-lg); }
  .m2i-solutions-demo__bars > div { grid-template-columns: 76px minmax(0, 1fr) 40px; gap: 8px; }
  .m2i-solutions-demo__bar { flex-wrap: wrap; }
}

/* En-têtes de section de l'accueil sur écran étroit (retour du 03/10/2026 :
   « tout se chevauche un peu bizarrement »). « Nos offres » et « Ils nous
   font confiance » gardaient leur titre et leur lien ou texte côte à côte :
   le titre se tassait sur trois lignes, le texte restait aligné à droite.
   Ils s'empilent, alignés à gauche. */
@media (max-width: 900px) {
  .m2i-offers-head,
  .m2i-references-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 40px; }
  .m2i-references-head p { text-align: left; max-width: none; }
}

/* Rubrique en cours dans le menu burger : une barre jaune à gauche, plutôt
   qu'un soulignement sur toute la largeur de la ligne. */
@media (max-width: 1200px) {
  .m2i-header__menu > .current-menu-item > a,
  .m2i-header__menu > .current-menu-ancestor > a { box-shadow: inset 3px 0 0 var(--m2i-yellow); padding-left: 12px; }
}

/* ==========================================================================
   Formulaires (inc/forms.php) : contact et démo, candidature, newsletter.
   Libellés au-dessus des champs, champs pleine largeur, cibles de 48 px.
   ========================================================================== */
.m2i-form { display: grid; gap: 18px; padding: 32px; border-radius: 16px; background: var(--m2i-bg-light); border: 1px solid var(--m2i-border); }
.m2i-section--light .m2i-form { background: #fff; }
.m2i-form__field { display: grid; gap: 6px; }
.m2i-form__field > label { font-size: var(--m2i-fs-sm); font-weight: 600; color: var(--m2i-dark); }
.m2i-form__field > label span { color: var(--m2i-dark); }
.m2i-form input[type="text"],
.m2i-form input[type="email"],
.m2i-form input[type="tel"],
.m2i-form input[type="url"],
.m2i-form textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: inherit; font-size: var(--m2i-fs-base); color: var(--m2i-dark);
  background: #fff; border: 1px solid #D1D5DB; border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.m2i-form textarea { min-height: 150px; resize: vertical; }
.m2i-form input:focus,
.m2i-form textarea:focus { outline: none; border-color: var(--m2i-dark); box-shadow: 0 0 0 3px rgba(240, 190, 44, .45); }
.m2i-form .has-error input,
.m2i-form .has-error textarea { border-color: #B42318; }
.m2i-form__error { margin: 0; font-size: var(--m2i-fs-sm); font-weight: 600; color: #B42318; }
.m2i-form__choice { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.m2i-form__choice legend { width: 100%; margin-bottom: 8px; font-size: var(--m2i-fs-sm); font-weight: 600; color: var(--m2i-dark); }
.m2i-form__choice label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--m2i-fs-base); color: var(--m2i-text-body); cursor: pointer; }
.m2i-form__consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--m2i-fs-sm); line-height: 1.5; color: var(--m2i-text-body); cursor: pointer; }
.m2i-form__consent input { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; accent-color: var(--m2i-dark); }
.m2i-form__consent a { text-decoration: underline; }
.m2i-form input[type="radio"] { width: 18px; height: 18px; accent-color: var(--m2i-dark); }
.m2i-form__submit { justify-self: start; min-height: 48px; border: 0; cursor: pointer; font-family: inherit; }
.m2i-form__notice { margin: 0; padding: 14px 16px; border-radius: 8px; font-size: var(--m2i-fs-base); line-height: 1.5; }
.m2i-form__notice--ok { background: #ECFDF3; color: #05603A; border: 1px solid #ABEFC6; }
.m2i-form__notice--error { background: #FEF3F2; color: #B42318; border: 1px solid #FECDCA; }
/* Champ piège : hors de l'écran, pas display:none (certains robots l'ignorent alors). */
.m2i-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 768px) {
  .m2i-form { padding: 20px; }
  .m2i-form__submit { justify-self: stretch; }
}

/* Plan du site (3.10.43) : trois blocs, le menu principal en arbre. */
.m2i-sitemap { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
.m2i-sitemap__title { font-size: var(--m2i-fs-sm); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--m2i-text-gray); margin: 0 0 16px; }
.m2i-sitemap__list { list-style: none; margin: 0; padding: 0; }
.m2i-sitemap__list li { margin: 0 0 10px; }
.m2i-sitemap__list a { color: var(--m2i-dark); text-decoration: none; font-weight: 600; }
.m2i-sitemap__list a:hover, .m2i-sitemap__list a:focus-visible { color: var(--m2i-dark); text-decoration: underline; text-decoration-color: var(--m2i-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.m2i-sitemap__list--tree > li { margin-bottom: 18px; }
.m2i-sitemap__list .sub-menu { list-style: none; margin: 10px 0 0 14px; padding-left: 14px; border-left: 2px solid var(--m2i-border); }
.m2i-sitemap__list .sub-menu a { font-weight: 500; color: var(--m2i-text-body); }
@media (max-width: 900px) {
  .m2i-sitemap { grid-template-columns: 1fr; gap: 32px; }
}

/* --------------------------------------------------------------------------
   Lien « Comparer les offres » de l'accueil (3.10.47) : une classe au lieu
   d'un style en ligne, et le lien mène directement au comparatif.
   -------------------------------------------------------------------------- */
.m2i-offers-compare-link { color: var(--m2i-text-gray); font-weight: 600; font-size: var(--m2i-fs-sm); }
.m2i-offers-compare-link:hover, .m2i-offers-compare-link:focus-visible { color: var(--m2i-dark); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Zones de clic sur écran tactile (3.10.47, revue UX du 03/10/2026) : les
   liens textuels mesuraient 16 à 28 px de haut, pour un confort au doigt
   vers 44 px. La zone cliquable est agrandie par un pseudo-élément
   transparent, sans changer le dessin (soulignés, fil d'Ariane).
   -------------------------------------------------------------------------- */
@media (hover: none), (max-width: 768px) {
  .m2i-breadcrumb a,
  .m2i-link-underline,
  .m2i-offers-compare-link,
  .m2i-refs-group__title a,
  .m2i-contact__lines a,
  .m2i-sector-subs__list a {
    position: relative;
  }
  .m2i-breadcrumb a::after,
  .m2i-link-underline::after,
  .m2i-offers-compare-link::after,
  .m2i-refs-group__title a::after,
  .m2i-contact__lines a::after,
  .m2i-sector-subs__list a::after {
    content: '';
    position: absolute;
    inset: -12px -6px;
  }
  /* Pastilles des secteurs du hero : plus hautes, dans la limite de ce qui
     garde le hero sur un seul écran (retour du 03/10/2026). */
  .m2i-sectors--hero .m2i-sectors__list a { padding: 8px 14px; }
  .m2i-sectors--hero .m2i-sectors__list { gap: 8px; }
}
/* Sélecteur de langue dans le menu burger : une vraie cible au doigt. */
@media (max-width: 1200px) {
  .m2i-header .m2i-lang-switcher__trigger { min-height: 44px; display: flex; align-items: center; }
}

/* Page introuvable (3.10.47). */
.m2i-404 { padding-top: calc(var(--m2i-header-height) + 64px); padding-bottom: 96px; max-width: 760px; }
.m2i-404 .m2i-h2 { margin-bottom: 20px; }
.m2i-404 .m2i-lede { margin-bottom: 32px; }
.m2i-404__doors { list-style: none; padding: 0; margin: 0 0 40px; display: grid; gap: 18px; }

/* Accessibilité (3.10.49, audit UX du 06/10/2026) : lien d'évitement visible
   au clavier seulement, et <nav> du menu sans effet sur la mise en page. */
.m2i-skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 1000;
  background: var(--m2i-yellow); color: var(--m2i-dark); font-weight: 700;
  padding: 12px 18px; border-radius: 8px;
}
.m2i-skip-link:focus { top: 16px; }
.m2i-header__nav { display: contents; }

/* Rubriques à icône des articles repris (3.10.51) : l'icône à gauche, en
   petit, le titre et le texte à droite. Remplace le zigzag du constructeur
   de pages de l'ancien site, aplati à l'import (icônes en pleine largeur). */
.m2i-article-feature {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
  margin: 0 0 28px;
}
/* Thème classique : WordPress enveloppe le contenu du groupe dans un
   .wp-block-group__inner-container, neutralisé pour que la grille porte
   directement sur l'icône, le titre et le texte. */
.m2i-article-feature > .wp-block-group__inner-container { display: contents; }
.m2i-article-feature .wp-block-image { grid-column: 1; grid-row: 1 / span 6; margin: 4px 0 0; }
.m2i-article-feature .wp-block-image img { width: 64px; height: auto; }
.m2i-article-feature > .wp-block-group__inner-container > :not(.wp-block-image) { grid-column: 2; margin-top: 0; }
.m2i-article-feature :is(h2, h3, h4) { margin-bottom: 6px; }
.m2i-article-feature p { margin-bottom: 8px; }
@media (max-width: 480px) {
  .m2i-article-feature { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; }
  .m2i-article-feature .wp-block-image img { width: 48px; }
}

/* --------------------------------------------------------------------------
   Zones KmProd (3.10.54) : l'orange KmProd remplace le jaune Meta 2i comme
   couleur d'accent (traits des surtitres, pictogrammes, soulignés) là où
   l'on parle de KmProd et de ses offres : section KmProd et offres de
   l'accueil, page Solution KmProd, pages des offres, comparatif.
   -------------------------------------------------------------------------- */
:is(.m2i-kmprod-scope, .m2i-page--kmprod, .single-m2i_offer, .m2i-compare) {
  --m2i-accent: var(--m2i-kmprod);
  --m2i-accent-deep: var(--m2i-kmprod);
}

/* En-tête des pages KmProd (3.10.59) : le bouton « Demander une démo » passe
   à l'orange KmProd, texte noir. Partout ailleurs il reste jaune Meta 2i. */
.m2i-kmprod-page .m2i-header .m2i-btn-cta { background: var(--m2i-kmprod); }

/* Header plus lisible (3.10.75) : menu en 15 px au lieu de 13, boutons et
   langue en 14 px. Entre 1201 et 1439 px, menu un peu resserré pour que les
   six entrées et les deux boutons tiennent encore sur une ligne. */
.m2i-header .m2i-btn-cta, .m2i-header .m2i-btn-support { font-size: var(--m2i-fs-sm); }
@media (min-width: 1201px) and (max-width: 1439px) {
  .m2i-header { padding-left: 32px; padding-right: 32px; }
  .m2i-header__menu { gap: 16px; }
  .m2i-header__menu > li > a { font-size: var(--m2i-fs-sm); }
}

/* Signe « + » des chiffres clés (3.10.61) : remonté au milieu des chiffres et
   un peu réduit. Dans Century Gothic comme dans TeX Gyre Adventor, il est
   centré sur les minuscules et paraissait tomber à côté de « 30 ». */
.m2i-stat-plus {
  display: inline-block;
  font-size: .78em;
  transform: translateY(-.14em);
  margin-right: .04em;
}

/* Textes en capitales sur deux lignes (3.10.63) : interligne explicite.
   L'interligne par défaut de TeX Gyre Adventor collait les deux lignes. */
.m2i-eyebrow, .m2i-solutions-illustration__caption { line-height: 1.45; }

/* Champ vidé en back-office (3.10.65) : l'élément ne laisse ni marge ni
   trait. :empty ignore les pseudo-éléments, donc le trait des surtitres
   disparaît avec eux. */
.m2i-eyebrow:empty, .m2i-h2:empty, .m2i-lede:empty, .m2i-main p:empty, main p:empty,
main h1:empty, main h2:empty, main h3:empty, main h4:empty,
.m2i-hero__badge span:empty, .m2i-hero__subtitle:empty, .m2i-hero__stat-value:empty, .m2i-hero__stat-label:empty,
.m2i-solutions-demo__title:empty, .m2i-solutions-illustration__caption:empty { display: none; }

/* --------------------------------------------------------------------------
   Mobile plus compact (3.10.81)
   -------------------------------------------------------------------------- */
/* Points du slider des offres (3.10.82) : mêmes points que « KmProd en
   situation », affichés seulement sur mobile. */
.m2i-offers-dots { display: none; }
.m2i-dots { justify-content: center; gap: 4px; margin-top: 6px; }
.m2i-dots button {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.m2i-dots button::before {
  content: ''; width: 9px; height: 9px; border-radius: 100px; background: var(--m2i-border); transition: width .2s, background .2s;
}
.m2i-dots button[aria-current="true"]::before { width: 26px; background: var(--m2i-accent); }

/* Barre de devis de la fiche d'offre : masquée hors mobile. */
.m2i-offer-bar { display: none; }

@media (max-width: 768px) {
  /* Nos offres en slider : les cartes défilent au doigt, la suivante dépasse
     à droite. Trois cartes empilées faisaient 2 500 px de haut. */
  .m2i-offers-grid {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -32px; padding: 6px 32px 10px; scroll-padding: 0 32px;
  }
  .m2i-offers-grid::-webkit-scrollbar { display: none; }
  .m2i-offers-dots { display: flex; }
  .m2i-offers-grid .m2i-offer-card { flex: 0 0 86%; scroll-snap-align: start; display: flex; flex-direction: column; padding: calc(28px * var(--k, 1)) 22px; }
  /* Carte et points sur un seul écran (3.10.83) : --k, posé par
     assets/js/offers-slider.js, réduit textes et espacements tant que la
     carte la plus haute ne tient pas sous le header avec ses points. */
  .m2i-offers-grid .m2i-offer-card__title { font-size: var(--m2i-fs-xl); margin-top: calc(14px * var(--k, 1)); letter-spacing: -1px; }
  .m2i-offers-grid .m2i-offer-card__subtitle { font-size: var(--m2i-fs-sm); }
  .m2i-offers-grid .m2i-offer-card__pricing { margin: calc(18px * var(--k, 1)) 0 calc(18px * var(--k, 1)); }
  .m2i-offers-grid .m2i-offer-card__price { font-size: 32px; }
  .m2i-offers-grid .m2i-offer-card__features { margin-bottom: calc(20px * var(--k, 1)); }
  .m2i-offers-grid .m2i-offer-card__feature { padding: calc(9px * var(--k, 1)) 0; }
  .m2i-offers-grid .m2i-offer-card__feature span:last-child { font-size: var(--m2i-fs-sm); line-height: 1.4; }
  .m2i-offers-grid .m2i-offer-card__cta { padding: calc(14px * var(--k, 1)); }

  /* Logos sur deux colonnes, boîtes plus basses. */
  .m2i-logos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .m2i-logos__grid .m2i-media--logo { height: 76px; padding: 10px 12px; --m2i-logo-scale: .78; }

  /* Piliers en grille 2 × 2, sans filets. */
  .m2i-pillars-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
  .m2i-pillar, .m2i-pillar:first-child, .m2i-pillar:last-child { grid-template-columns: 8px 1fr; gap: 10px; padding: 0; border-top: 0; }
  .m2i-pillar__dot { width: 8px; height: 8px; margin-top: 8px; }
  .m2i-pillar__title { font-size: var(--m2i-fs-md); letter-spacing: -.4px; margin-bottom: 6px; }
  .m2i-pillar__text { font-size: var(--m2i-fs-sm); line-height: 1.55; }

  /* Fiche d'offre : barre de devis collée SOUS LE HEADER (3.10.83). En bas
     de l'écran, elle sautait quand la barre d'adresse du navigateur mobile
     se repliait (Safari surtout) ; le haut de l'écran ne bouge pas. Elle
     glisse sous le header quand les boutons du bandeau sortent de l'écran
     (assets/js/offer-page.js), et se range quand on y remonte. */
  .m2i-offer-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 0; right: 0; top: var(--m2i-offer-bar-top, var(--m2i-header-height)); z-index: 150;
    padding: 8px 16px;
    background: var(--m2i-dark); box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    transform: translateY(-120%); visibility: hidden;
    transition: transform .25s ease, visibility .25s;
  }
  .m2i-offer-bar.is-visible { transform: none; visibility: visible; }
  .m2i-offer-bar__price { color: var(--m2i-accent); font-weight: 900; font-size: var(--m2i-fs-md); letter-spacing: -.3px; }
  .m2i-offer-bar .m2i-btn-primary { padding: 12px 18px; font-size: var(--m2i-fs-sm); white-space: nowrap; }
}

/* Boutons empilés de même largeur (3.10.82) : sous 600 px, les deux boutons
   des bandeaux passent l'un sous l'autre ; ils prennent tous la largeur du
   plus long (grille qui s'ajuste au plus large), texte centré. */
@media (max-width: 600px) {
  :is(.m2i-hero__actions, .m2i-phero__actions, .m2i-sector-hero__actions) {
    display: inline-grid; grid-template-columns: minmax(0, 1fr); justify-items: stretch; max-width: 100%;
  }
  :is(.m2i-hero__actions, .m2i-phero__actions, .m2i-sector-hero__actions) > * {
    width: 100%; justify-content: center; text-align: center;
  }
}

/* Sigles du glossaire (inc/glossary-abbr.php) : infobulle native au survol ;
   sur écran tactile, bulle sous le mot au toucher (assets/js/glossary-abbr.js). */
.m2i-abbr { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: help; }
.m2i-abbr-tip { position: fixed; z-index: 1000; max-width: min(320px, calc(100vw - 32px)); padding: 10px 12px; background: #111419; color: #fff; font-size: 14px; line-height: 1.45; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.25); }

/* Rythme des articles (inc/article-rhythm.php) : sommaire, encarts
   « À retenir » et « Chiffre clé ». */
.m2i-article-layout { display: grid; grid-template-columns: 240px minmax(0, 860px); gap: 56px; justify-content: center; align-items: start; }
.m2i-toc { position: sticky; top: calc(var(--m2i-header-height) + 24px); max-height: calc(100vh - var(--m2i-header-height) - 48px); overflow-y: auto; }
.m2i-toc__title { list-style: none; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--m2i-dark); margin-bottom: 14px; pointer-events: none; }
.m2i-toc__title::-webkit-details-marker { display: none; }
.m2i-toc__list { list-style: none; margin: 0; padding: 0; border-left: 2px solid #E5E2D9; }
.m2i-toc__list li + li { margin-top: 2px; }
.m2i-toc__list a { display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.4; color: var(--m2i-text-body); text-decoration: none; }
.m2i-toc__list a:hover, .m2i-toc__list a:focus-visible { color: var(--m2i-dark); }
.m2i-toc__list a.is-active { color: var(--m2i-dark); font-weight: 700; border-left-color: var(--m2i-accent); }
@media (max-width: 1024px) {
  .m2i-article-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 860px; }
  .m2i-toc { position: static; max-height: none; background: #F4F1E8; border-radius: 12px; padding: 16px 20px; }
  .m2i-toc__title { pointer-events: auto; cursor: pointer; margin-bottom: 0; display: flex; justify-content: space-between; align-items: center; }
  .m2i-toc__title::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
  .m2i-toc[open] .m2i-toc__title::after { transform: rotate(-135deg); }
  .m2i-toc[open] .m2i-toc__title { margin-bottom: 12px; }
}
.m2i-prose--article .is-style-m2i-retenir { margin: 32px 0; padding: 20px 24px; background: #F4F1E8; border-left: 4px solid var(--m2i-accent); border-radius: 0 12px 12px 0; color: var(--m2i-dark); font-weight: 600; }
.m2i-prose--article .is-style-m2i-retenir::before { content: "À retenir"; display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--m2i-accent-deep); }
html[lang^="en"] .m2i-prose--article .is-style-m2i-retenir::before { content: "Key takeaway"; }
.m2i-prose--article .is-style-m2i-chiffre { margin: 32px 0; padding: 24px 28px; background: var(--m2i-dark); border-radius: 12px; color: #fff; font-size: var(--m2i-fs-lg); line-height: 1.5; }
.m2i-prose--article .is-style-m2i-chiffre strong { color: var(--m2i-accent); font-size: 1.6em; font-weight: 900; letter-spacing: -.5px; white-space: nowrap; }

/* Bandeau de consentement Complianz aux couleurs du site (le violet par
   défaut détonnait). Les variables sont celles de Complianz. */
.cmplz-cookiebanner, #cmplz-manage-consent {
  --cmplz_button_accept_background_color: var(--m2i-yellow);
  --cmplz_button_accept_border_color: var(--m2i-yellow);
  --cmplz_button_accept_text_color: var(--m2i-dark);
  --cmplz_hyperlink_color: var(--m2i-dark);
  --cmplz_slider_active_color: var(--m2i-yellow-deep);
  --cmplz_text_color: var(--m2i-dark);
  --cmplz_button_border_radius: 8px 8px 8px 8px;
}
.cmplz-cookiebanner, .cmplz-cookiebanner .cmplz-btn { font-family: inherit; }
.cmplz-cookiebanner .cmplz-btn { font-weight: 700; }
/* Onglet flottant « Gérer le consentement » masqué : le lien « Gérer les
   cookies » du pied de page le remplace. Le bouton reste dans la page, le
   lien l'actionne (inc/analytics.php). */
#cmplz-manage-consent .cmplz-manage-consent { display: none !important; }