/* Mart'Intérim — les pages du site (tout sauf la page Offres, qui a le sien).

   REPRISE FIDÈLE. Les valeurs de ce fichier ne sont pas mesurées à l'œil : elles
   viennent de LEUR CSS Elementor (`post-10.css` pour l'accueil, `post-54.css` /
   `post-95.css` pour les autres pages, `post-5.css` pour les réglages globaux du
   kit), relevé sur mart-interim.fr. Quand une valeur paraît arbitraire (80 %,
   5 %, 3vw, 662 px), c'est la leur, pas une approximation.

   Réglages globaux de leur kit (post-5.css), qui expliquent la plupart des
   espacements ci-dessous :
     conteneur    : largeur max 1140 px (1024 sous 1301, 780 sous 781)
     conteneur    : padding 20 px en haut et en bas, 0 sur les côtés
     widget       : 20 px de marge basse, sauf le dernier d'un conteneur
     écart (gap)  : 20 px
     seuils       : 1300 px (tablette) et 780 px (téléphone) — PAS 1024/768
     page         : fond #F6F6F6, primaire #4A529E, secondaire #EBBE31 */

/* ── Les conteneurs d'Elementor ─────────────────────────────────────────────
   `.mt-con` = un conteneur : 20 px en haut et en bas, rien sur les côtés.
   `.mt-boxed` = un conteneur « boxed » : son contenu est borné à 1140 px
   (1024 sous 1301, 780 sous 781) et centré.
   Ces deux règles portent TOUTE la verticale des pages : leur mise en page est
   faite de conteneurs imbriqués, et chaque niveau ajoute ses 20 px. C'est
   pourquoi le balisage calque leur imbrication au lieu de l'aplatir. */
.mt-con { padding: 20px 0; }
.mt-boxed > *, .mt-boxed.mt-h2 { width: 100%; max-width: 1140px; margin-inline: auto; }
.mt-wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0; }
@media (max-width: 1300px) {
  .mt-boxed > * { max-width: 1024px; }
  .mt-wrap { max-width: 1024px; }
}
@media (max-width: 780px) {
  .mt-boxed > * { max-width: 780px; }
  .mt-wrap { max-width: 780px; padding: 0 20px; }
}

/* ── Titre de section + filet doré ──────────────────────────────────────────
   Leur composant : un conteneur en COLONNE aligné au centre — donc le titre et
   le filet se réduisent à leur contenu, ils ne prennent pas la largeur — un
   titre Chivo 42/800 indigo (1,4rem sous 781), et sous lui l'image
   `Line-137.png` remontée de 15 à 22 px selon le widget.

   Le filet est INLINE chez eux : sa boîte de ligne fait ~32 px de haut alors
   que l'image n'en fait que 9, et ces 23 px poussent tout ce qui suit. C'est ce
   que reproduit la marge basse — sans elle la page remonte de 23 px par titre.
   Sa largeur est réglée widget par widget (586, 702, 425…) : d'où `--mt-rule`. */
.mt-h2 { display: flex; flex-direction: column; align-items: center; }
.mt-h2 h2 {
  margin: 0; font-family: var(--display); font-size: 42px; font-weight: 800;
  line-height: 1; color: #4a529d; text-align: center;
}
.mt-h2 > img {
  display: block; height: 9px; width: var(--mt-rule, 586px); max-width: 100%;
  margin: var(--mt-rule-top, 13.3px) auto 23px;
}
@media (max-width: 780px) {
  .mt-h2 h2 { font-size: 1.4rem; }
  .mt-h2 > img { height: 8px; width: var(--mt-rule-sm, 80%); margin-top: 6.3px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ACCUEIL
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Bandeau (c9ba23a) ──────────────────────────────────────────────────────
   1000 px de haut (500 sous 781), contenu poussé EN BAS et centré.
   Leur fond est un diaporama de six photos hébergées sur un domaine de
   préproduction Hostinger qui répond 404 depuis des mois : ce qu'un visiteur
   voit est donc uniquement la surimpression `#FFFFFF42 → #000000C7` posée
   par-dessus. Elle est reprise ici en dégradé opaque calé sur SIX points
   relevés dans leur page (246 → 213 → 180 → 148 → 118 → 91), plus fidèle que
   la formule d'origine, dont la composition dépend du moteur. */
.mt-hero-home {
  position: relative; min-height: 1000px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  gap: 20px; padding: 20px 0;
  background: linear-gradient(180deg,
    #f7f7f7 0%, #d5d5d5 20%, #b4b4b4 40%, #949494 60%, #767676 80%, #5b5b5b 100%);
}
/* c3f0cf8 : le conteneur du titre. */
.mt-hh-title { width: 100%; padding: 20px 0; display: flex; flex-direction: column; align-items: center; }
/* 639111a : 90 % de large, texte calé à gauche, Chivo 94/900 blanc. */
.mt-hh-title h1 {
  width: 90%; margin: 0; text-align: start;
  font-family: var(--display); font-size: 94px; font-weight: 900; line-height: 1; color: #fff;
}
/* f76dc90 : pleine largeur, contenu calé à gauche. */
.mt-hh-search { width: 100%; padding: 20px 0; display: flex; align-items: flex-start; }
/* cb9a0a6 : le widget fait 80 % et son contenu part à 5 % de ce bloc. */
/* cb9a0a6 : le widget fait 80 % et son contenu part à 5 % de ce bloc.
   Le cœur pose la boîte en `inline-flex`, qui se réduit à son contenu : ici
   elle doit remplir les 95 % restants, d'où le `display: flex`. */
.mt-hh-search > div { width: 80%; }
.mt-hh-search .enso-search { display: flex; width: auto; margin-left: 5%; box-shadow: 8px 8px 0 0 var(--indigo-shadow); }
/* Mêmes habillages de champ et de bouton que sur la page Offres — c'est le même
   greffon chez eux, donc les mêmes valeurs. */
.mt-hh-search .enso-search input[type="text"],
.mt-hh-search .enso-search input:not([type]) {
  background: #fff; border-radius: 3px; padding: 8px 16px; font-size: 16px; line-height: 24px;
}
.mt-hh-search .enso-search .enso-btn { font-family: inherit; border-radius: 10px; box-shadow: rgba(0, 0, 0, .2) 0 4px 4px 0; }
/* Sous 781 leur bouton devient une loupe de 40 × 41 : le cœur le dessine
   désormais aussi, il ne lui manque que leur hauteur. */
@media (max-width: 780px) {
  .mt-hh-search .enso-search .enso-btn { min-height: 41px; height: 41px; padding: 10px; }
}
/* da382bb : 90 % de large (donc centré à 1440), dépôt puis bouton, 90 px entre. */
.mt-hh-cta { width: 90%; padding: 20px 0; display: flex; flex-direction: row; align-items: center; gap: 0; }
.mt-hh-cv { margin-right: 90px; }
@media (max-width: 780px) {
  .mt-hero-home { min-height: 500px; }
  .mt-hh-title h1 { width: 100%; text-align: center; font-size: 3rem; }
  .mt-hh-search { width: 90%; align-self: center; justify-content: center; align-items: center; }
  .mt-hh-search > div { width: 100%; }
  .mt-hh-search .enso-search { margin-left: 0; width: 100%; }
  .mt-hh-cta { flex-wrap: wrap; justify-content: center; align-items: center; }
  .mt-hh-cv { margin: 0 0 30px; }
}

/* Leur zone de dépôt du bandeau : 300 × 104, fond blanc, tirets noirs de 2 px,
   rayon 10, icône de 24 px, et leur phrase en 20/20 dans la pile système. */
/* Chez eux l'icône et la phrase sont CÔTE À CÔTE (icône à 99,6, texte à
   123,6 pour une boîte qui commence à 72) : le produit les empile, cette
   instance-ci les remet en ligne. */
.mt-hh-cv .enso-cv-upload-main {
  width: 300px; max-width: 100%; height: 104px; margin: 0; gap: 0; padding: 10px;
  flex-direction: row; font-size: 20px;
  background: #fff; border: 2px solid #333232; border-radius: 10px;
  box-shadow: 8px 8px 0 0 #4a529e;
}
.mt-hh-cv .enso-cv-upload-main svg { width: 24px; height: 24px; fill: #7a7b7c; }
.mt-hh-cv .enso-cv-upload-main .enso-cv-upload-text {
  width: 80%; margin: 0; font-size: 20px; line-height: 20px; color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Leur bouton « Candidature spontanée » : 300 × 104, ombre pleine indigo. Le
   cœur le dessine déjà à 96 px de haut ; seule la hauteur est rendue ici. */
/* Leur bouton « Candidature spontanée » : 300 × 104, ombre pleine indigo. Le
   cœur le dessine déjà à 96 px ; la hauteur et la pile de caractères de la page
   (système, comme tout l'accueil) sont rendues ici. */
.mt-hh-spont .enso-btn-spontaneous {
  height: 104px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ── Offres récentes ────────────────────────────────────────────────────────*/
/* e78346f : 30 px au-dessus du titre ; 87a5524 : filet de 586 px (80 % sous 781). */
.mt-h2-recent { --mt-rule: 586px; --mt-rule-sm: 80%; }
.mt-h2-recent h2 { margin-top: 30px; }

/* c9defee : la ligne du compteur — « + », « de », le nombre, la phrase.
   Écart 2 %, marge basse 3vw, et elle passe en COLONNE sous 1301. */
.mt-count {
  display: flex; flex-direction: row; justify-content: center; align-items: center;
  gap: 2%; padding: 20px 0; margin: 0 0 3vw;
}
/* Le picto « + » occupe 4,6rem de dessin plus les 7 px de descente de sa ligne :
   c'est LUI qui fixe la hauteur de la rangée (80,6 en bureau, 95 sur un
   téléphone où il passe à 88). */
.mt-count-plus { display: block; height: calc(4.6rem + 7px); }
.mt-count-plus svg { width: 4.6rem; height: 4.6rem; color: #4a529e; display: block; }
.mt-count-de, .mt-count-tail, .mt-count strong {
  font-family: var(--display); font-weight: 900; line-height: 1; margin: 0;
}
.mt-count-de   { font-size: 52px; color: #4a529e; text-align: start; }
.mt-count strong { font-size: 78px; color: #ebbe31; text-align: center; font-variant-numeric: tabular-nums; }
.mt-count-tail { font-size: 51px; color: #4a529e; width: 662px; max-width: 100%; text-align: center; }
@media (max-width: 1300px) { .mt-count { flex-direction: column; } }
@media (max-width: 780px) {
  .mt-count { width: 100%; }
  .mt-count-plus { height: 95px; }
  .mt-count-plus svg { width: 88px; height: 88px; }
}

/* 308dab4 / 3038dea : le carrousel occupe 95 % de la page, centré. Le reste
   (flèches, cartes, pastilles) est peint par le cœur, qui reproduit déjà le
   greffon au pixel sur la page Offres. */
.mt-carousel { width: 95%; margin: 0 auto; }
/* Leur carte de carrousel (`.job-result-carroussel` du greffon) : marge de 10,
   padding 24/20, rayon 10, ni bordure ni ombre. Et surtout — c'est ce qui la
   distingue de la page Offres — elle hérite la PILE SYSTÈME, parce que
   l'accueil est une page Elementor et non la page du greffon. */
.mt-carousel .enso-job-result {
  margin: 10px; padding: 24px 20px; border: 0; box-shadow: none; border-radius: 10px;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Leur intitulé de carrousel est en 17/23,8 — la page Offres, elle, est en 20/28. */
.mt-carousel .enso-job-title { font-size: 17px; line-height: 23.8px; }
.mt-carousel .enso-badge { padding: 6px 9px; border-radius: 4px; }
.mt-carousel .enso-badge div { font-size: 14.4px; line-height: 17.28px; }
/* Leur ligne d'agence tient sur 24 px (interligne 21), la date sur 19,5. */
.mt-carousel .enso-line.enso-space-between.enso-wfull { min-height: 24px; line-height: 21px; }
.mt-carousel .enso-date { line-height: 19.5px; }
.mt-carousel .enso-btn { font-family: inherit; border-radius: 10px; box-shadow: rgba(0, 0, 0, .2) 0 4px 4px 0; }
/* Sur le CARROUSEL — et là seulement — leurs pastilles « expérience » et
   « permis » sont dépliées d'office ; sur la page Offres elles restent sous le
   chevron. Elles disparaissent sous 769 (leur classe `hidden-mobile`). */
.mt-carousel .enso-job-infos-wrapper { max-height: none; opacity: 1; overflow: visible; }
/* Sous 769 leur `hidden-mobile` vide ce bloc. Chez eux il garde quand même sa
   ligne de 21 px, qui ne sert qu'à repousser les pastilles hors de leur coupe ;
   ici la carte n'est plus coupée et les pastilles ne sont plus rendues, donc
   cette ligne ne serait que 21 px de blanc sous l'intitulé. */
@media (max-width: 768px) { .mt-carousel .enso-job-infos-wrapper { display: none; } }
/* ⚠️ Leur `height: 20vh` est une hauteur de FENÊTRE déguisée en hauteur de carte,
   et la carte n'y tient pas : à 800 leur pastille « Permis B » est tranchée en
   deux par la coupe du groupe, à 1024 c'est le bouton « Consulter ». Écrite en
   hauteur MINIMALE, la carte garde leur respiration quand le contenu est court
   et s'ouvre quand il ne l'est pas — les trois cartes d'un groupe restent de
   même hauteur, le conteneur flex les étire déjà. */
@media (max-width: 1330px) { .mt-carousel .enso-job-result { min-height: 20vh; } }
/* ⚠️ SUR TÉLÉPHONE, PAS DE HAUTEUR FIXE. Leurs 20vh sont une hauteur de fenêtre
   déguisée en hauteur de carte : 114 px sur un écran de 568, 169 sur un de 844.
   La carte porte pourtant toujours le même contenu, donc selon le téléphone la
   même offre sort soit avec 80 px de blanc mort sous son intitulé, soit avec
   l'intitulé coupé en deux — et un intitulé sur trois lignes se coupe partout.
   Chez eux c'est le groupe qui rattrape, en tranchant ce qui dépasse : leur
   carte de téléphone est un accident de mise en page, pas une carte.

   Sous 769 le contenu est en plus celui que LEUR page montre : l'agence, la
   date, le partage, le chevron et l'intitulé. Les pastilles et le bouton, que
   leur coupe fait entièrement disparaître à ces largeurs, sortent franchement
   au lieu d'être tranchés à mi-hauteur. Rien de tronqué, rien de vide, et la
   même carte sur tous les écrans. */
@media (max-width: 768px) {
  .mt-carousel .enso-job-result { min-height: 0; }
  .mt-carousel .enso-job-result > .enso-line.enso-align-start { display: none; }
}
@media (max-width: 768px)  { .mt-carousel .enso-job-result { padding: 12px 10px; } }

/* ── Secteurs d'activités ───────────────────────────────────────────────────
   Leur grille : 80 % de la page (90 % et UNE colonne sous 781), trois colonnes,
   20 px d'écart, rayon 10. Le libellé est dessiné DANS l'image. */
/* 09d5a20 : 50 px au-dessus ; 46144ba : filet de 702 px (322 sous 781), remonté de 16. */
.mt-h2-sectors { --mt-rule: 702px; --mt-rule-sm: 322px; --mt-rule-top: 12.3px; }
.mt-h2-sectors h2 { margin-top: 50px; }
.mt-sectors-center { display: flex; justify-content: center; align-items: center; }
.mt-sectors {
  width: 80%; padding: 20px 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; border-radius: 10px;
}
.mt-sector { line-height: 0; display: block; }
/* ⚠️ La vignette ne s'ÉTIRE PAS au-delà de sa taille naturelle (440 × 445) : au
   sein de sa colonne elle garde `width: auto` et s'y centre. Posée en
   `width: 100%` elle grossissait avec la fenêtre — 498,7 px à 1920 contre 440
   chez eux, soit une image visiblement plus « zoomée » que la leur. Vérifié
   chez eux à 1920 (440 dans 498,7), 1600 (413,3), 1440 (370,7), 1024 (259,7),
   780 (440 dans 450) et 390 (351). */
.mt-sector img { width: auto; max-width: 100%; height: auto; display: block; margin: 0 auto; }
/* Sous 781 c'est le conteneur PARENT (444f967) qui passe à 500 px : la grille
   garde ses 90 %, donc 450 px de vignette et non 500. Ces 50 px par ligne
   faisaient 450 px d'écart sur les neuf. */
@media (max-width: 780px) {
  .mt-sectors-center { width: 500px; max-width: 100%; margin: 0 auto; }
  .mt-sectors { width: 90%; grid-template-columns: 1fr; }
}

/* 30a5784 / 07b10b9 : leur filet de fin de secteurs, 66 % de large, 8 px.
   Inline chez eux : sa boîte de ligne fait 24 px, l'image y flotte à 8,8 px du
   haut. Les marges reproduisent la boîte, comme pour les filets de titre. */
.mt-rule { text-align: center; }
.mt-rule img { display: block; margin: 8.8px auto 7.2px; width: 66%; max-width: 100%; height: 8px; }

/* ── Bande indigo (7d40f63) ─────────────────────────────────────────────────
   Relevé dans LEUR DOM, conteneur par conteneur : la bande est une colonne
   flex à 20 px d'écart et 20 px de padding ; elle porte un bloc à 35 px de
   padding (604d6da), puis un filet SEUL, puis le bloc « Vous recherchez »
   (fb69642, 20 px). Leurs séparateurs mesurent 31 px (15 + 1 + 15) — 5 px pour
   celui de « Vous recherchez : » — et n'affichent rien : leur trait est réglé
   à 0 % de large. C'est cette imbrication qui donne les 55 px entre les deux
   filets du milieu, et non les 20 px qu'un aplatissement produirait. */
.mt-band-stats { display: flex; flex-direction: column; gap: 20px; padding: 20px 0; background: #4a529e; }
.mt-bs-inner, .mt-bs-seek, .mt-bs-capbox, .mt-bs-vals {
  display: flex; flex-direction: column; gap: 20px;
}
.mt-bs-inner { padding: 35px 20px; }
.mt-bs-seek, .mt-bs-capbox, .mt-bs-vals { padding: 20px 0; }
.mt-bs-brand, .mt-bs-lead, .mt-bs-cap {
  margin: 0; text-align: center; font-family: var(--display); font-weight: 900; color: #fff; line-height: 1;
}
.mt-bs-brand { font-size: 67px; }
.mt-bs-lead  { font-size: 32px; }
.mt-bs-cap   { font-size: 40px; }
.mt-bs-div { height: 31px; }
.mt-bs-div-tight { height: 5px; }
/* 032c949 / eb4fedc : une grille de trois colonnes — picto calé à DROITE de sa
   colonne, nombre au centre, troisième colonne vide. Le picto occupe 80,6 px
   (73,6 de dessin plus la descente de sa ligne) : c'est lui qui fixe la hauteur
   de la rangée, ici comme dans le compteur d'offres. */
.mt-bs-row {
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; padding: 20px 0;
}
.mt-bs-icon { justify-self: end; display: block; height: 80.6px; }
.mt-bs-icon svg { width: 4.6rem; height: 4.6rem; color: #fff; display: block; }
.mt-bs-num {
  justify-self: center; font-family: var(--display); font-size: 6rem; font-weight: 900;
  line-height: 1; color: #ebbe31; font-variant-numeric: tabular-nums;
}
/* Leurs quatre valeurs : un widget par valeur — libellé Chivo 37/900 jaune sur
   55,5 d'interligne PUIS le picto de 41 px, côte à côte —, empilés à 20 px. */
.mt-bs-values { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.mt-bs-values li { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 16px; }
.mt-bs-vtext {
  font-family: var(--display); font-size: 37px; font-weight: 900; line-height: 55.5px; color: #ebbe31;
}
/* Leur liste inline pose 8 px de marge de chaque côté de chaque élément : le
   bloc porte donc 16 px de traîne à droite, ce qui décale le centrage de 7,6 px
   vers la gauche. Sans elle les quatre lignes tombent 7,6 px trop à droite. */
.mt-bs-vicon { width: 41px; height: 41px; display: block; flex: 0 0 41px; margin-right: 16px; }
/* b7c1835 : leur bouton d'appel — fond indigo (donc invisible sur la bande),
   rayon 3, padding 12/24, libellé Chivo 36/900 blanc. */
.mt-bs-cta {
  align-self: center; background: #4a529e; color: #fff; border-radius: 3px;
  padding: 12px 24px; text-decoration: none;
  font-family: var(--display); font-size: 36px; font-weight: 900; line-height: 1;
}
.mt-bs-cta:hover { color: #4aa5dc; }
@media (max-width: 780px) {
  .mt-bs-brand { font-size: 2.9em; }
  .mt-bs-vtext { font-size: 24px; line-height: 36px; }
}

/* ── Suivez nous (fca31cb) ──────────────────────────────────────────────────
   Leur liste « inline » : le libellé et le logotype Instagram côte à côte, tous
   deux liens vers leur compte. Le titre est en 42/800 sur 63 d'interligne. */
/* d006e99 : filet de 425 px. */
/* d006e99 : filet de 425 px (84 % sous 781) ; 6796baa : le titre passe à 30 px
   sur téléphone, pas au 1,4rem des autres titres de section. */
.mt-h2-follow { --mt-rule: 425px; --mt-rule-sm: 84%; --mt-rule-top: 3.3px; }
@media (max-width: 780px) { .mt-h2-follow h2 { font-size: 30px; } }
.mt-follow-link {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit;
}
.mt-h2-follow h2 { display: inline; line-height: 63px; }
.mt-follow-ico { display: inline-flex; color: #4a529e; }
.mt-follow-ico svg { width: 49px; height: 49px; display: block; }

/* Mart'Intérim — les pages du site (tout sauf la page Offres, qui a le sien).
   Reprise fidèle de mart-interim.fr : même contenu, même ordre de bandes, même
   identité (Chivo pour les titres, indigo #4A529E, jaune #EBBE31, filet doré).
   Assainie là où leur Elementor accidente : plus de bande à hauteur fixe qui
   déborde sur un portable, plus de marge négative, une seule grille. */

/* ── Grille commune ─────────────────────────────────────────────────────────
   Leur conteneur de contenu fait 1140 px (largeur Elementor), pas 1280. */

/* ── Bandeau de tête ────────────────────────────────────────────────────────
   Leur bande fait 1000 px de haut sur toutes les pages et ne porte AUCUNE
   image : un dégradé du blanc de la page vers le gris, le titre en Chivo 900
   blanc posé en bas à gauche (relevé à 1440 : titre à 560 px du haut de bande).
   Sous 1024 la hauteur suit la fenêtre — une bande de 1000 px sur un téléphone
   posé à l'horizontale ne montre plus rien d'autre. */

/* ── Titre de section + filet doré ──────────────────────────────────────────
   Leur filet est une image (Line-137) posée sous le titre, largeur variable
   selon la longueur du titre. Ici c'est la même image, centrée, à 62 % du bloc. */

.mt-lead { max-width: 78ch; margin: 0 auto; text-align: center; font-size: 18px; line-height: 1.7; color: #3e3e3f; }

/* ── Cartes à picto ─────────────────────────────────────────────────────────
   Leurs quatre/cinq atouts : un picto SVG, un titre Chivo, un paragraphe. */
.mt-grid { display: grid; gap: 28px; }
.mt-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.mt-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.mt-grid.c4 { grid-template-columns: repeat(4, 1fr); }
.mt-card {
  background: #fff; border-radius: 14px; padding: 32px 26px; text-align: center;
  box-shadow: 0 2px 18px rgba(34,35,37,.07);
  transition: transform .22s ease, box-shadow .22s ease;
}
.mt-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(34,35,37,.12); }
.mt-card img { width: 84px; height: 84px; object-fit: contain; margin: 0 auto 18px; display: block; }
.mt-card h3 {
  font-family: var(--display); font-size: 20px; font-weight: 800; color: var(--indigo);
  margin: 0 0 12px; text-transform: uppercase;
}
.mt-card p { margin: 0; font-size: 16px; line-height: 1.65; color: #3e3e3f; }

/* ── Secteurs d'activité ────────────────────────────────────────────────────
   Neuf vignettes carrées, le libellé est DANS leur image (pas de surcouche à
   inventer). Le zoom au survol est la seule chose ajoutée. */

/* Leur ligne tient d'un seul tenant, le nombre plus gros que les mots autour :
   « + de 2374 offres sont à pourvoir » (52 px pour les mots, le compteur au-dessus). */

/* ── Offres récentes ────────────────────────────────────────────────────────
   Trois cartes tirées de l'API, mêmes pastilles jaunes que la page Offres. */

/* Squelettes : la forme de la carte, pas un rond qui tourne. */

 .mt-skel i.b { width: 84%; height: 22px; }
 .mt-skel i.d { width: 38%; height: 40px; margin-top: 18px; }
@keyframes mt-sweep { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* ── Bouton de marque ───────────────────────────────────────────────────────
   Blanc sur le jaune, comme chez eux : leur kit Elementor pose
   `color:#FFFFFF` sur tout bouton, et les huit pages le montrent. Le contraste
   n'y est que de 1,76:1 ; c'est LEUR marque et le client a tranché pour le
   1:1. → `martinterim.brand.json` */
.mt-btn {
  display: inline-block; background: var(--yellow); color: #fff; border-radius: 10px;
  padding: 15px 34px; font-family: var(--display); font-weight: 700; font-size: 17px;
  text-decoration: none; border: 0; cursor: pointer; transition: filter .18s ease, transform .18s ease;
}
.mt-btn:hover { filter: brightness(.94); transform: translateY(-1px); }
.mt-btn.ghost { background: transparent; color: var(--indigo); border: 2px solid var(--indigo); }
.mt-btn.ghost:hover { background: var(--indigo); color: #fff; }
.mt-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 42px; }

/* ── Deux colonnes texte + image ────────────────────────────────────────────*/
.mt-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.mt-split img { width: 100%; height: auto; border-radius: 14px; display: block; }
.mt-split h3 { font-family: var(--display); font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; color: var(--indigo); margin: 0 0 18px; }
.mt-split p { font-size: 17px; line-height: 1.75; color: #3e3e3f; margin: 0 0 16px; }

/* ══════════════════════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════════════════════ */
.mt-faq { background: var(--page); }
/* a44ded8 : deux colonnes égales. */
.mt-faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
/* 25c28aa : leur colonne de gauche est une grille de cinq rangées égales, tout
   calé en haut à gauche ; chaque élément y est remonté par sa propre
   translation (−32, −40, −55), ce qui donne leur composition serrée. */
.mt-faq-titles {
  display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(5, 86px);
  justify-items: start; align-items: start; align-self: flex-start; padding: 20px 0;
}
.mt-faq-titles h2 {
  margin: 0 0 0 20px; font-family: var(--display); font-size: 42px; font-weight: 800;
  line-height: 1; color: var(--indigo);
}
.mt-faq-titles h2:first-child { align-self: flex-end; margin-bottom: 20px; }
.mt-faq-titles > img { width: 67%; height: 11px; margin-left: 13px; transform: translateY(-32px); }
.mt-faq-titles p {
  max-width: 100%; margin: 0 0 0 20px; transform: translateY(-40px);
  font-family: var(--display); font-size: 1.3vw; font-weight: 400; line-height: 1; color: var(--indigo);
}
/* 383d652 : pastille dorée, Chivo 24/900 BLANC, padding 22/30/20/22, remontée de 55. */
.mt-faq-btn {
  margin-left: 20px; transform: translateY(-55px);
  display: inline-block; background: var(--yellow); color: #fff; border-radius: 10px;
  padding: 22px 30px 20px 22px; text-decoration: none;
  font-family: var(--display); font-size: 24px; font-weight: 900; line-height: 1;
  transition: background .2s ease;
}
.mt-faq-btn:hover { background: #4aa5dc; }
/* 4436854 : la colonne de droite descend de 25 % de sa propre largeur. */
.mt-faq-right { margin-top: 25%; }
.mt-faq-right > .mt-acc { margin-top: -2.5px; }

/* afe8435 : leur accordéon — question Chivo 26/900 indigo, picto ＋/− doré de
   16 px à 15 px du texte, réponse Chivo 19,2/400 indigo sur 28,8. Aucun cadre,
   aucun chevron : c'est un signe plus qui devient un moins.
   ⚠️ Seule la PREMIÈRE question est ouverte. */
/* Leur accordéon porte le filet par défaut d'Elementor : 1 px #d5d8dc autour de
   chaque élément, et 30 px de respiration au-dessus et en dessous du titre —
   c'est ce qui donne les 101 px d'un élément replié. */
.mt-acc details { border: 1px solid #d5d8dc; background: none; }
.mt-acc summary {
  display: flex; align-items: flex-start; gap: 15px; cursor: pointer; list-style: none;
  padding: 30px 0; margin: 0;
}
.mt-acc summary::-webkit-details-marker { display: none; }
.mt-acc-ico { flex: 0 0 14px; color: var(--yellow); padding-top: 11.5px; line-height: 0; }
.mt-acc { padding-left: 10px; }
.mt-acc details { padding: 0; }
.mt-acc-ico svg { width: 14px; height: 16px; display: block; }
.mt-acc details[open] .mt-acc-plus, .mt-acc .mt-acc-minus { display: none; }
.mt-acc details[open] .mt-acc-minus { display: block; }
.mt-acc-q {
  font-family: var(--display); font-size: 26px; font-weight: 900; line-height: 39px; color: var(--indigo);
}
.mt-acc-a { padding: 21px 0 33.4px; }
.mt-acc-a p {
  margin: 0; font-family: var(--display); font-size: 19.2px; font-weight: 400;
  line-height: 28.8px; color: var(--indigo);
}
.mt-acc details[open] .mt-acc-a { animation: mt-open .28s ease; }
@keyframes mt-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Sous 1301 leur page passe à une colonne : le titre au-dessus, l'accordéon
   dessous, et la colonne de droite perd sa descente. */
@media (max-width: 1300px) {
  .mt-faq-grid { grid-template-columns: 1fr; }
  .mt-faq-right { margin-top: 0; }
  .mt-faq-titles p { font-size: 18px; }
}

/* ── Agences (contact) ──────────────────────────────────────────────────────*/
.mt-agency { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 18px rgba(34,35,37,.07); }
.mt-agency .card { padding: 28px; }
.mt-agency h3 { font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--indigo); margin: 0 0 14px; }
.mt-agency p { margin: 0 0 10px; font-size: 16px; line-height: 1.6; }
.mt-agency a { color: var(--indigo); font-weight: 600; }
.mt-agency iframe { width: 100%; height: 280px; border: 0; display: block; }
.mt-visit { width: 100%; height: auto; border-radius: 14px; display: block; }

/* ── Équipe ─────────────────────────────────────────────────────────────────*/
/* ⚠️ Ici vivaient six règles du GABARIT du produit — `.mt-team`, `.mt-member`,
   `.mt-role` (que rien n'utilise : les portraits de Mart sont `.mt-ct-member`)
   et un second `.mt-partners` en quatre colonnes dont l'`img` posait
   `filter: grayscale(1); opacity: .78`. La grille était bien réécrite plus bas,
   dans la section AVANTAGES — mais pas le filtre : les trois logos de leurs
   partenaires (Intérimaires Santé, FASTT, Armado) sortaient en GRIS à toutes
   les largeurs, alors qu'ils sont en couleur chez eux. Un contrôle de bandes en
   niveaux de gris ne pouvait pas le voir ; c'est en regardant un téléphone que
   ça saute aux yeux. */

/* ── Pages de texte (légal) ─────────────────────────────────────────────────*/
/* ── Pages juridiques (confidentialité, cookies) ────────────────────────────
   Leur forme, relevée sur `privacy-policy-2` et `cookies` : un titre NOIR
   centré en Chivo 40/40 sur toute la colonne bornée, 40 px de vide, puis une
   grille de DEUX MOITIÉS (710 px à 1440, 20 px d'écart). La moitié gauche ne
   porte rien : le sommaire est un bloc FIXE à 55 px du bord et 231 px du haut,
   large de 45 % de la fenêtre. Le texte occupe les 80 % de la moitié droite.

   La première migration avait rendu ces deux pages comme un article du
   produit : une colonne de 820 px centrée, un sommaire numéroté dans une carte
   blanche, des intertitres indigo 26/800 et un corps gris 16,5/1,8. Rien de
   tout cela n'est chez eux. */
/* ⚠️ Le préfixe est `mt-lp-`, pas `mt-legal-` : `.mt-legal` est DÉJÀ la barre
   légale du pied (site.css), et une section qui portait ce nom héritait de son
   `display: flex`, de ses 28,8 px de marge intérieure et de son `line-height:
   16px` sur les liens — le titre partait à 28,8 px du bord et les URL de la
   page cookies se resserraient. */
.mt-lp-title {
  margin: 0 auto; text-align: center;
  font-family: var(--display); font-size: 40px; font-weight: 600; line-height: 40px; color: #000;
}
/* Leur conteneur vide entre le titre et la grille : deux fois 20 px. */
.mt-lp-spacer { height: 40px; }
.mt-lp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 20px 0; }

/* Le sommaire est FIXE : il ne suit pas le défilement, il ne bouge pas d'un
   pixel entre le haut et le bas de la page. C'est bien ce que fait leur
   conteneur (`--position: fixed; top: 231px; left: 55px`), et c'est pour cela
   que leur moitié gauche est vide. */
.mt-lp-nav {
  position: fixed; top: 231px; left: 55px; width: 45%; padding: 20px 0; z-index: 5;
}
.mt-lp-nav ul { list-style: none; margin: 0; padding: 0; }
.mt-lp-nav li:not(:last-child) { margin-bottom: 35px; }
.mt-lp-nav a {
  display: block; padding: 0 40px; text-decoration: none;
  font-family: var(--display); font-size: 24px; font-weight: 600; line-height: 24px; color: var(--indigo);
  transition: color .18s ease;
}
/* Leur survol prend l'accent du kit (#4AA5DC), pas une nuance inventée. */
.mt-lp-nav a:hover, .mt-lp-nav a:focus-visible { color: #4aa5dc; }
.mt-lp-toggle { display: none; }

.mt-lp-body {
  width: 80%; padding: 20px 0;
  display: flex; flex-direction: column; align-items: flex-start;
}
/* Chaque widget d'Elementor porte 20 px sous lui (réglage du kit) ; à
   l'intérieur d'un bloc de texte, chaque paragraphe en porte 14,4. Ces deux
   valeurs font TOUTE la verticale de la page. */
/* 20 px AU-DESSUS aussi : chaque intertitre est précédé chez eux d'un widget
   « ancre de menu » de hauteur nulle, qui n'apporte que sa marge de 20 px. */
.mt-lp-body h2 {
  margin: 20px 0; max-width: 100%;
  font-family: var(--display); font-size: 32px; font-weight: 600; line-height: 32px; color: #000;
}
.mt-lp-text {
  width: 100%; margin: 0 0 20px;
  font-family: "Red Hat Display", Arial, sans-serif; font-size: 16px; font-weight: 400;
  line-height: 24px; color: #000;
}
.mt-lp-text p { margin: 0 0 14.4px; }
.mt-lp-text a { color: #cc3366; text-decoration: underline; }
/* Leur exposant (« 1ère connexion ») : 12 px et interligne nul, sinon il
   pousse sa ligne d'un pixel et demi. */
.mt-lp-text sup { font-size: 12px; line-height: 0; }

/* Sous 1025 leur sommaire se replie derrière un brûleur (le seuil « tablette »
   du greffon de menu, qui n'est PAS celui d'Elementor). Le panneau est un
   simple carré blanc, entrées séparées d'un filet gris et 15 px de marge
   verticale — leurs valeurs, déclarées dans post-1165.css. */
@media (max-width: 1024px) {
  .mt-lp-toggle {
    display: block; background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--indigo); line-height: 0;
  }
  .mt-lp-toggle svg { width: 44px; height: 44px; fill: currentColor; display: block; }
  .mt-lp-nav ul {
    display: none; background: #fff; margin-top: 20px;
  }
  .mt-lp-nav.is-open ul { display: block; }
  .mt-lp-nav li:not(:last-child) { margin-bottom: 0; border-bottom: 1px solid #c4c4c4; }
  .mt-lp-nav a { padding: 15px 40px; }
}
/* ⚠️ Sous 781 leur bloc fixe garde ses `left: 55px` ET passe à 100 % de large :
   il sort de l'écran de 55 px et fait défiler la page latéralement. Le nôtre
   se cale à 0 — la seule divergence de ces deux pages, et elle répare un
   débordement horizontal, pas un choix de mise en page. */
@media (max-width: 780px) {
  .mt-lp-grid { grid-template-columns: minmax(0, 1fr); }
  .mt-lp-nav { width: 100%; left: 0; }
  .mt-lp-body { width: 100%; }
}
/* Leur page cookies aligne des URL entières : sous 361 px elles ne tiennent
   plus sur une ligne et poussaient la page de 12 px sur le côté. */
.mt-lp-text { overflow-wrap: anywhere; }

/* ── Bande CV en pied de page ───────────────────────────────────────────────*/
.mt-cvband { background: var(--indigo); color: #fff; padding: 62px 0; text-align: center; }
.mt-cvband h2 { font-family: var(--display); font-size: clamp(24px, 3vw, 36px); font-weight: 800; margin: 0 0 14px; }
.mt-cvband p { margin: 0 0 28px; font-size: 17px; opacity: .92; }

/* ── Entrées à l'apparition ─────────────────────────────────────────────────
   Une seule animation, courte, et seulement si la personne ne l'a pas refusée. */
.mt-rise { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.mt-rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mt-rise { opacity: 1; transform: none; transition: none; }
  .mt-sector img, .mt-card, .mt-btn { transition: none; }
}

/* ── Largeurs ───────────────────────────────────────────────────────────────
   Les seuils sont ceux de l'en-tête (1330 / 768) pour que toute la page tourne
   d'un bloc, plus 520 pour les grilles qui ne tiennent plus à deux. */
@media (max-width: 1330px) {
  .mt-grid.c4 { grid-template-columns: repeat(2, 1fr); }
  .mt-team { grid-template-columns: repeat(3, 1fr); }
  
}
@media (max-width: 900px) {
  .mt-grid.c3 { grid-template-columns: repeat(2, 1fr); }
  .mt-split { grid-template-columns: 1fr; gap: 32px; }
  .mt-partners { grid-template-columns: repeat(3, 1fr); }
  .mt-team { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .mt-grid.c2, .mt-grid.c3, .mt-grid.c4, .mt-partners { grid-template-columns: 1fr; }

  
  
  .mt-acc summary { font-size: 16.5px; padding: 18px 46px 18px 20px; }
}

/* ── Citation de marque (page « Qui sommes-nous ? ») ────────────────────────*/
.mt-quote {
  margin: 0 auto 38px; max-width: 820px; text-align: center; border: 0; padding: 0;
  font-family: var(--display); font-weight: 800; font-size: clamp(20px, 2.4vw, 28px);
  color: var(--indigo);
}
/* Une carte dont le corps est du texte long : le centrage ne tient plus. */
.mt-card-text { text-align: left; }
.mt-card-text img { margin-left: 0; }
.mt-card-text h3 { text-align: left; }
.mt-card-text ul { margin: 0; padding-left: 20px; }
.mt-card-text li { font-size: 16px; line-height: 1.65; color: #3e3e3f; margin-bottom: 10px; }
.mt-card-text p + p { margin-top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Une carte qui est un lien ne doit pas souligner son titre ni son sous-titre. */
a.mt-card { text-decoration: none; color: inherit; }
a.mt-card:hover h3 { text-decoration: underline; }

/* Un picto en colonne de gauche n'est pas une photo : chez eux il fait 144 px,
   pas la largeur de la colonne. */
.mt-split.picto img { max-width: 300px; margin: 0 auto; }

/* ── Préchargeur ────────────────────────────────────────────────────────────
   Leur `flat-preloader` : overlay blanc plein écran, leur GIF au centre, page
   bloquée en défilement tant qu'il est là, puis `.hide` (opacité 0, visibilité
   cachée) 3 s après `load`. Valeurs relevées dans leur feuille : transition
   `all .2s ease-in`, image à 10 px du bas de son bloc.

   ⚠️ Leur GIF s'affiche à sa TAILLE NATURELLE, 1200 × 675, borné par le
   `max-width: 100%` du thème : 1200 px de 1201 à 1920, puis la largeur de la
   fenêtre (1024 à 1024, 390 à 390). La classe `fpo-custom` de leur greffon ne
   pose aucune largeur — c'est `.fpo-default` qui rapetisse à 40 px, et leur
   overlay n'a pas cette classe. Fixé à 220 px, il rendait cinq fois trop petit.

   ⚠️ Il ne vit QUE sur l'accueil (`"display":"home"` dans leurs réglages) : les
   huit autres pages n'ont pas d'overlay du tout. */
#mt-preloader {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 999999999;
  background: #fff; display: flex; align-items: center; justify-content: center;
  flex-direction: column; transition: all .2s ease-in; opacity: 1; visibility: visible;
}
#mt-preloader img { margin-bottom: 10px; width: 1200px; max-width: 100%; height: auto; }
#mt-preloader.hide { opacity: 0; visibility: hidden; }
body.mt-preloading { overflow: hidden; }
/* Sans script, l'overlay ne doit pas rester en travers de la page. */
.no-js #mt-preloader { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   ENTREPRISES
   ══════════════════════════════════════════════════════════════════════════ */

/* Leurs trois titres de section et leurs filets (412, 645, 420 px). */
.mt-h2-entr1 { --mt-rule: 412px; }
.mt-h2-entr1 h2 { margin-top: 50px; }
.mt-h2-entr2 { --mt-rule: 645px; }
.mt-h2-entr3 { --mt-rule: 420px; --mt-rule-top: 9.3px; }
/* 84ed5c4 : sur la bande indigo, leur titre est en 32/700 BLANC, pas en 42/800. */
.mt-h2-entr3 h2 { font-size: 32px; font-weight: 700; color: #fff; }
.mt-h2-entr3 > img { height: 7px; }

/* 47a2b2c : quatre cartes, écart 8 %, dans un bloc à 90 % avec 20 px de côté.
   Chaque carte (edd419b) est une grille d'une colonne et deux rangées : la
   rangée du haut (picto + titre) est DESCENDUE de 15 px, celle du bas porte le
   sous-titre et le bouton. */
.mt-ways-wrap { display: flex; justify-content: center; align-items: center; padding: 20px 0 40px; }
.mt-ways {
  width: 90%; padding: 0 20px;
  display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 8%;
  justify-items: center; align-items: center;
}
.mt-way {
  display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr);
  width: 100%; margin: 20px 0; padding: 1px 1px 21.6px; align-self: flex-start;
  background: #fff; border-radius: 20px; box-shadow: 1px 8px 16px -4px rgba(0, 0, 0, .35);
}
.mt-way-head {
  display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
  align-self: flex-start; transform: translateY(15px);
}
.mt-way-head img { width: 40px; height: 40px; margin: 0 0 2px 10px; display: block; }
.mt-way-head h3 {
  max-width: 10rem; margin: 0 0 0 20px;
  font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1; color: var(--indigo);
}
/* La première carte porte un titre de 18 px — leur réglage, widget par widget. */
.mt-way-first .mt-way-head h3 { font-size: 18px; }
/* 7d176c7 : leur bloc du bas déborde sur cinq rangées implicites (`grid-row:
   span 5`) — c'est ce qui donne la hauteur de leurs cartes. */
.mt-way-body { grid-row: span 5; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; align-self: flex-start; }
.mt-way-body p {
  width: 100%; margin: 0; padding: 0 0 0 5%;
  font-family: var(--display); font-size: 14.4px; font-weight: 300; line-height: 1; color: #7a7b7c;
}
/* Leur bouton : pastille jaune de 47 px, rayon 10, libellé Roboto 15/500 BLANC. */
.mt-way-btn {
  align-self: center; margin-top: 20px; padding: 16px 32px;
  background: var(--yellow); color: #fff; border-radius: 10px;
  font-family: Roboto, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1;
  text-decoration: none; transition: filter .18s ease;
}
.mt-way-btn:hover { filter: brightness(.94); }

/* 55b7ff4 : leur paragraphe — Chivo 1,3vw indigo sur 1,5 d'interligne. */
.mt-lead-entr {
  margin: 0 5%; font-family: var(--display); font-size: 1.3vw; font-weight: 400;
  line-height: 1.5; color: var(--indigo);
}
/* 87d7a0f : leur picto à 10 % de la largeur, 30 px de marge basse. */
/* Son bloc porte 11,8 px de boîte de ligne au-dessus, comme leurs filets. */
.mt-illus { text-align: center; padding: 31.5px 0 20px; }
.mt-illus img { display: block; margin: 0 auto 30px; width: 10%; height: auto; }

/* ── Le composant « types de contrats » (02d1c17) ───────────────────────────
   Leur feuille intégrée, reprise valeur pour valeur : une grille de deux
   colonnes de 70vh de haut, une colonne de pastilles blanches qui débordent à
   gauche (rayon 0 20 20 0, 35vw × 10vh, ombre 10/10/10 noire à 33 %), et une
   carte carrée pivotée de 6° qui entre par la droite au clic. La pastille
   choisie s'élargit à 40vw et prend un dégradé blanc → jaune.
   ⚠️ Rien n'est choisi au chargement : la carte est absente jusqu'au clic. */
.mt-contracts { background: var(--indigo); padding: 20px 0 44.7px; }
.mt-tabs { display: grid; grid-template-columns: 1fr 1fr; color: #4a529d; min-height: 70vh; overflow: hidden; }
.mt-tabs-left { display: flex; width: 40%; align-items: flex-start; flex-direction: column; justify-content: center; }
.mt-tabs-right { display: flex; flex-direction: column; justify-content: center; align-items: end; overflow: hidden; }
.mt-opt {
  background: #fff; color: #4a529d;
  display: flex; align-items: center; justify-content: space-between;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: bold; cursor: pointer; transition: .3s ease;
  border-radius: 0 20px 20px 0; border: none;
  width: 35vw; height: 10vh; gap: 25px; margin-top: 4vh;
  font-size: 2.6vh; font-style: normal; line-height: 50px;
  padding-left: 20px; box-shadow: 10px 10px 10px rgba(33, 33, 33, .329); white-space: unset;
}
.mt-opt:hover { background: #ffd34e; }
.mt-opt.mt-selected {
  background: linear-gradient(90deg, #fff 0%, #ebbe31 100%);
  width: 40vw; font-size: 3vh; transition: background .8s ease;
}
.mt-opt img { width: 8vh; aspect-ratio: 1; margin-right: 1vw; }
.mt-tabcard {
  display: none; flex-direction: column; gap: 63px; background: #fff;
  border-radius: 20px; position: relative; opacity: 1;
  align-items: center; justify-content: center;
  transition: transform .5s ease-out, opacity .5s ease-out;
  box-shadow: 10px 10px 10px rgba(33, 33, 33, .329);
  aspect-ratio: 1; max-height: 60vh;
}
.mt-tabcard.mt-active { transform: rotate(6deg) translateX(-55px); animation: mt-slide-in 1s ease-out forwards; display: flex; }
.mt-tabcard.mt-reset { transform: rotate(6deg) translateX(-55px); animation: mt-slide-out 1s ease-out forwards; }
.mt-tabcard-title {
  align-self: stretch; font-weight: bold; color: #4a529d; margin: 0 4% 0 6%;
  font-size: 3vh; line-height: 35px; transform: rotate(-6deg);
}
.mt-tabcard-text {
  color: #4a529e; font-size: 2.3vh; line-height: 28px; margin: -5% 10% 0; transform: rotate(-6deg);
}
@keyframes mt-slide-in {
  0%   { transform: translateX(100%) rotate(6deg) translateX(-55px); }
  60%  { transform: translateX(-10%) rotate(6deg) translateX(-55px); }
  80%  { transform: translateX(5%)   rotate(6deg) translateX(-55px); }
  100% { transform: translateX(0)    rotate(6deg) translateX(-55px); }
}
@keyframes mt-slide-out {
  0%   { transform: translateX(0)    rotate(6deg) translateX(-55px); }
  100% { transform: translateX(150%) rotate(6deg) translateX(-55px); }
}
/* Leur seuil à eux dans ce composant est 1024 : la carte se range alors SOUS la
   pastille choisie, sans rotation, et son titre disparaît. */
@media (max-width: 1024px) {
  .mt-tabs { display: flex; flex-direction: column; align-items: center; overflow: hidden; height: fit-content; min-height: 0; }
  .mt-opt { width: 70vw; height: 10vh; margin-top: 2vh; font-size: 4.5vw; }
  .mt-opt.mt-selected { width: 80vw; height: 10vh; font-size: 4.5vw; }
  .mt-tabs-left { width: 100%; margin-bottom: 20px; }
  .mt-tabs-right { width: fit-content; overflow-x: hidden; justify-content: center; align-items: center; }
  .mt-tabcard {
    margin-top: 2vh; position: relative; width: 100%; height: auto;
    max-height: none; aspect-ratio: unset; transform: none; margin-left: 0; padding: 2vw 2vh;
  }
  .mt-tabcard.mt-active { animation: mt-slide-in-sm 1s ease-out forwards; display: flex; padding-top: 2vw; max-height: max-content; overflow: visible; }
  .mt-tabcard.mt-reset { animation: mt-slide-out-sm 1s ease-out forwards; }
  .mt-tabcard-title, .mt-tabcard-text { transform: none !important; }
  .mt-tabcard-text { font-size: 4vh; margin: 10%; }
  @keyframes mt-slide-in-sm { 0% { transform: translateX(100%); } 60% { transform: translateX(-10%); } 80% { transform: translateX(5%); } 100% { transform: translateX(0); } }
  @keyframes mt-slide-out-sm { 0% { transform: translateX(0); } 100% { transform: translateX(150%); } }
}

/* Légende sous un logo partenaire (Santé / Soutien / Protection chez eux). */
.mt-partner { text-align: center; }
.mt-partner figcaption {
  margin-top: 14px; font-family: var(--display); font-weight: 700;
  font-size: 20px; color: var(--indigo);
}



/* ══════════════════════════════════════════════════════════════════════════
   BANDEAU DES PAGES INTÉRIEURES
   ══════════════════════════════════════════════════════════════════════════
   ⚠️ Les cinq pages intérieures portent bien une PHOTO de bandeau, et chacune
   la sienne. La première migration les avait toutes retirées — d'abord parce
   qu'on y avait posé de mauvaises images, puis en corrigeant trop loin. Elles
   sont ici avec leur vrai fichier, leur vraie hauteur et leur vraie
   surimpression, relevés dans `post-499/8/326/328/501.css`. */
.mt-hero-page {
  position: relative; min-height: 1000px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; padding: 20px 0;
  background: #4a529e 50% 50% / cover no-repeat;
}
.mt-hero-page::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.mt-hero-page > * { position: relative; z-index: 1; }
.mt-hero-page h1 {
  margin: 0; font-family: var(--display); font-weight: 900; color: #fff; line-height: 1;
}
/* Leurs hauteurs de bandeau, par page et par seuil (post-*.css). */
@media (max-width: 780px) { .mt-hero-page { min-height: 500px; } }
@media (max-width: 1300px) { .mt-hero-entreprises { min-height: 465px; } }
@media (max-width: 780px)  { .mt-hero-entreprises { min-height: 472px; } }

/* Entreprises (2c8fb74) — 94/900, calé à gauche à 5rem. */
.mt-hero-entreprises { background-image: url("/assets/martinterim/site/administratif_2-scaled.webp"); }
.mt-hero-entreprises::before { background-image: linear-gradient(180deg, #FFFFFF00 0%, #000000 72%); opacity: .29; }
.mt-hero-entreprises h1 { font-size: 94px; margin-left: 5rem; align-self: flex-start; }
@media (max-width: 780px) { .mt-hero-entreprises h1 { font-size: 3rem; margin-left: 0; align-self: center; text-align: center; } }

/* Avantages (69ee32b) — 90/900, dans un bloc à 80 %. */
.mt-hero-avantages { background-image: url("/assets/martinterim/site/lesavantages.webp"); }
.mt-hero-avantages::before { background-image: linear-gradient(180deg, #0000007A 0%, #000000C7 100%); opacity: .5; }
.mt-hero-avantages h1 { font-size: 90px; width: 80%; margin: 0 auto; }
@media (max-width: 780px) { .mt-hero-avantages h1 { font-size: 3.7rem; width: 100%; text-align: center; } }

/* Mart'Interim (671f3bc) — 90/900 calé à gauche, bandeau de 465 sous 1301. */
.mt-hero-apropos { background-image: url("/assets/martinterim/site/brooke-cagle-rndggnmeoao-unsplash-scaled.webp"); }
.mt-hero-apropos::before { background-image: linear-gradient(180deg, #D8909000 64%, #000000 73%); opacity: .6; }
.mt-hero-apropos h1 { font-size: 90px; width: 80%; margin: 0 auto; text-align: start; }
@media (max-width: 1300px) { .mt-hero-apropos { min-height: 465px; } }
@media (max-width: 780px)  { .mt-hero-apropos { min-height: 500px; } }
@media (max-width: 780px) { .mt-hero-apropos h1 { font-size: 3rem; width: 100%; text-align: center; } }

/* Contact (4e7d48f) — 90/900 dans un bloc à 80 %. */
.mt-hero-contact { background-image: url("/assets/martinterim/site/hero-1.webp"); }
.mt-hero-contact::before { background-image: linear-gradient(180deg, #64626200 0%, #000000C7 100%); opacity: .5; }
.mt-hero-contact h1 { font-size: 90px; width: 80%; margin: 0 auto; }
@media (max-width: 780px) { .mt-hero-contact h1 { font-size: 3rem; width: 100%; text-align: center; } }

/* FAQ (95d7345) — bandeau de 838 (700 sous 1301), titre 100/900 posé à 20 % du
   haut et 5 % du bord, dans un conteneur qui ajoute ses 20 px ; centré sous 1301. */
.mt-hero-faq {
  min-height: 838px; justify-content: flex-start;
  background-image: url("/assets/martinterim/site/hero.webp");
}
.mt-hero-faq::before { background-image: linear-gradient(180deg, #FFFFFF 0%, #000000 100%); opacity: .21; }
.mt-hero-faq > .mt-con { padding: 20px 0; }
.mt-hero-faq h1 { font-size: 100px; margin: 20% 0 0 5%; }
/* ⚠️ L'ORDRE compte : les deux blocs s'appliquent tous les deux sur un
   téléphone, et c'est le DERNIER qui gagne à égalité de spécificité. Écrit
   avant celui de 1300, le seuil téléphone était sans effet : leur bandeau de
   FAQ faisait 700 px au lieu de 501, et toute la page descendait de 171 px. */
@media (max-width: 1300px) {
  .mt-hero-faq { min-height: 700px; justify-content: center; }
  .mt-hero-faq h1 { font-size: 6rem; margin: 0; width: 100%; text-align: center; }
}
@media (max-width: 780px) { .mt-hero-faq { min-height: 501px; } }

/* ══════════════════════════════════════════════════════════════════════════
   MART'INTERIM — « Qui sommes-nous ? »
   ══════════════════════════════════════════════════════════════════════════ */
/* 2a92540 : une seule colonne — titre, filet, signature, texte. */
.mt-ap { display: flex; flex-direction: column; }
.mt-ap-h2 {
  margin: 50px 0 0; text-align: center;
  font-family: var(--display); font-size: 42px; font-weight: 800; line-height: 1; color: var(--indigo);
}
/* a92c93f : filet à 31 % (335 px au plus), 8 px, remonté de 15. */
.mt-ap-rule { display: block; width: 31%; max-width: 335px; height: 8px; margin: 13.8px auto 23px; }
.mt-ap-quote {
  margin: 20px 0 0; text-align: center;
  font-family: var(--display); font-size: 28px; font-weight: 800; line-height: 1; color: var(--indigo);
}
/* b4366ae : leur bloc de texte — 70 % de large, centré, Chivo 24/500 indigo sur
   36 d'interligne, avec des paragraphes VIDES entre les vrais (leur balisage).
   C'est ce bloc qui donnait à la page migrée son air de gabarit : il était en
   16,5 px gris dans la police du produit. */
.mt-ap-text {
  max-width: 70%; align-self: center; margin-top: 50px; text-align: center;
  font-family: var(--display); font-size: 24px; font-weight: 500; line-height: 36px; color: var(--indigo);
}
.mt-ap-text p { margin: 0 0 14.4px; }
/* 729da41 : quatre colonnes, picto de 250 centré, libellé 25/700 vingt pixels
   plus bas et centré sous lui. */
.mt-values { display: grid; grid-template-columns: repeat(4, 1fr); }
.mt-value { display: flex; flex-direction: column; align-items: center; padding: 20px 0; }
.mt-value img { width: 250px; max-width: 100%; height: auto; display: block; }
.mt-value h3 {
  margin: 20px 0 0; font-family: var(--display); font-size: 25px; font-weight: 700;
  line-height: 1; color: var(--indigo);
}
@media (max-width: 1300px) { .mt-values { grid-template-columns: repeat(2, 1fr); row-gap: 20px; } }
@media (max-width: 780px) { .mt-values { grid-template-columns: 1fr; } .mt-ap-text { max-width: 90%; } }

/* ══════════════════════════════════════════════════════════════════════════
   AVANTAGES
   ══════════════════════════════════════════════════════════════════════════ */
.mt-band-indigo { background: var(--indigo); }
.mt-band-page { background: var(--page); }

/* 2e79fa9 / f8913ea : leurs deux titres de bande sont en 36/600 (blanc sur
   l'indigo, indigo sur le fond de page) — pas en 42/800 comme ailleurs. */
.mt-h2-av1 h2, .mt-h2-av2 h2 { font-size: 36px; font-weight: 600; }
.mt-h2-av1 h2 { color: #fff; margin-top: 30px; }
.mt-h2-av2 h2 { color: var(--indigo); margin-top: 30px; }
.mt-h2-av1 { --mt-rule: 800px; --mt-rule-top: 29.3px; }
.mt-h2-av1 > img, .mt-h2-av2 > img { height: 7px; }
.mt-h2-av2 { --mt-rule: 475.2px; --mt-rule-top: 29.3px; }

/* 719794c : sur cette page le composant à onglets porte 100 px de marge basse. */
.mt-tabs-av { margin-bottom: 100px; padding: 42.4px 0; }

/* 97bb96f : trois cartes blanches de 336 × 340, rayon 20, marge 32. */
/* Leur bande de partenaires respire beaucoup : 240 px entre le filet et les
   cartes, 240 de plus sous elles. Valeurs relevées, pas devinées. */
.mt-partners-wrap { display: flex; justify-content: center; align-items: center; padding: 191.7px 0 236.1px; }
/* ⚠️ `minmax(0, 1fr)` et non `1fr` : la carte fait 336 px de large, et dans une
   colonne `1fr` (= `minmax(auto, 1fr)`) c'est ELLE qui fixe le minimum de la
   colonne — son `max-width` ne peut pas se résoudre contre une colonne qu'il
   détermine. La grille débordait de 144 px à 1024 et de 48 à 320. */
.mt-partners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; width: 100%; }
.mt-partner {
  display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr);
  justify-items: center; align-items: center;
  width: 336px; max-width: calc(100% - 64px); min-height: 340px; margin: 32px;
  background: #fff; border-radius: 20px;
}
.mt-partner img { width: 236px; max-width: 100%; height: auto; display: block; }
/* e2ca383 : leur pastille dorée, 20/700 BLANC, rayon 10, 16/32 de marge intérieure. */
.mt-partner-btn {
  background: var(--yellow); color: #fff; border-radius: 10px; padding: 16px 32px;
  font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1;
  text-decoration: none; transition: background .2s ease;
}
.mt-partner-btn:hover { background: #4aa5dc; color: #fff; }

/* 7eb8a91 : la bande des chiffres. c7e34f1 descend de 130 px. */
.mt-av-stats { display: flex; flex-direction: column; }
.mt-av-stats-head { margin-top: 130px; }
.mt-av-brand, .mt-av-lead, .mt-av-baseline {
  margin: 0 0 20px; text-align: center; font-family: var(--display); line-height: 1;
}
.mt-av-brand { font-size: 90px; font-weight: 800; color: #fff; }
.mt-av-lead { font-size: 40px; font-weight: 600; color: #fff; }
.mt-av-baseline { font-size: 48px; font-weight: 700; color: var(--yellow); }
.mt-av-row { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 20px; margin-bottom: 20px; }
.mt-av-icon { display: block; height: 87px; }
.mt-av-icon svg { width: 80px; height: 80px; color: #fff; display: block; }
.mt-av-num {
  font-family: var(--display); font-size: 100px; font-weight: 800; line-height: 1;
  color: var(--yellow); font-variant-numeric: tabular-nums;
}
/* 0172669 : leur séparateur de cette page respire 39 px, les deux derniers 15. */
.mt-av-div { height: 79px; margin-bottom: 20px; }
.mt-av-div-sm { height: 96px; }

/* 32bfe80 : leurs trois photos de fin de page, sur trois colonnes. */
/* Leurs trois photos flottent au milieu de 297 px de vide, en haut comme en bas. */
.mt-av-shots { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; justify-items: center; width: 90%; margin: 0 auto; padding: 297px 0; }
.mt-av-shots img { max-width: 100%; height: auto; display: block; }
@media (max-width: 780px) {
  .mt-partners, .mt-av-shots { grid-template-columns: minmax(0, 1fr); }
  .mt-av-brand { font-size: 3rem; }
  .mt-av-baseline { font-size: 32px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════════════════════════════════════ */
.mt-h2-ct1 { --mt-rule: 466px; padding-top: 20px; }
.mt-h2-ct1 h2 { margin-top: 50px; }
.mt-h2-ct2 { --mt-rule: 1300px; }
.mt-h2-ct2 h2 { margin-top: 50px; line-height: 77px; }
.mt-h2-ct3 { --mt-rule: 432px; }
.mt-h2-ct3 h2 { margin-top: 50px; }

/* 1e6508e : leur formulaire à gauche dans une boîte blanche de 355 × 772,
   rayon 10 ; à droite leurs deux cartes de visite, décalées l'une sur l'autre
   par des transformations — et masquées sous 1301, comme chez eux. */
.mt-ct-form-row { display: flex; align-items: flex-start; position: relative; padding-top: 38.7px; }
.mt-ct-form {
  flex: 0 0 355px; width: 355px; min-height: 772.1px; margin-left: 177.5px;
  background: #fff; border-radius: 10px; overflow: hidden;
}
.mt-ct-nojs { margin: 24px; font-family: var(--display); color: var(--indigo); }
.mt-ct-cards { flex: 1 1 auto; height: 772.1px; }
/* Leurs deux cartes de visite sont posées par des transformations Elementor.
   Les deux font 550 × 356,1 ; celle de Rochefort n'est que translatée, celle de
   La Rochelle est PIVOTÉE de 12,39° (leur matrice : 0,976691 / −0,21465).
   ⚠️ La première version avait relevé la BOÎTE ENGLOBANTE de la carte pivotée
   (613,6 × 465,8) et posé l'image à cette taille, droite : une carte plus
   grande, plus plate et sans inclinaison. Le point d'ancrage tient compte de
   l'écart entre l'élément et sa boîte englobante — 31,8 px de chaque côté,
   54,85 en haut et en bas. */
.mt-ct-card-ro {
  position: absolute; left: 577px; top: 58.7px; width: 550px; height: 356.1px;
  box-shadow: 13px 28px 20px -8px rgba(0, 0, 0, .31);
}
.mt-ct-card-lr {
  position: absolute; left: 845.3px; top: 364.8px; width: 550px; height: 356.1px;
  transform: rotate(-12.395deg);
  box-shadow: 13px 28px 24px 2px rgba(0, 0, 0, .21);
}
@media (max-width: 1300px) {
  .mt-ct-cards { display: none; }
  .mt-ct-form { margin: 0 auto; }
}
@media (max-width: 780px) { .mt-ct-form { width: 100%; flex-basis: auto; max-width: 355px; } }

/* 365f2f5 : deux colonnes, un plan Google de 550 par agence, puis le nom en
   25/600 et l'adresse en 20/400 sur 30 d'interligne. */
/* Leur grille de plans fait 1346,4 px, centrée : les deux plans tombent à 108
   et 781,2, pas au quart et aux trois quarts de la page. */
/* `minmax(0, 1fr)` : voir `.mt-partners` — la fiche fait 550,8 px et fixerait
   sinon le minimum de sa colonne (78 px de débordement à 1024). */
.mt-ct-maps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center;
  width: 1346.4px; max-width: 100%; margin: 0 auto; padding: 58.7px 0 34.4px; }
.mt-ct-agency { width: 550.8px; max-width: 100%; text-align: center; }
.mt-ct-agency iframe { width: 100%; height: 550px; border: 0; display: block; }
.mt-ct-div { height: 51px; }
.mt-ct-agency h3 {
  margin: 0; font-family: var(--display); font-size: 25px; font-weight: 600; line-height: 1; color: var(--indigo);
}
.mt-ct-agency p {
  margin: 20px 0 0; font-family: var(--display); font-size: 20px; font-weight: 400;
  line-height: 30px; color: var(--indigo);
}

/* 8fbe071 : un intitulé en 40/600 puis la grille des portraits, chaque légende
   en 20/500 centrée sur toute la largeur de SA COLONNE (560 px à 1440, pas la
   largeur de la photo — c'est ce que `justify-items: center` avait perdu).

   ⚠️ L'intitulé se centre comme son bloc. Dans un bloc borné il prend les
   1140 px et se centre avec eux (x = 150 à 1440) ; la marge raccourcie
   `margin: 18.8px 0 60px` écrasait le `margin-inline: auto` de `.mt-boxed > *`
   et le collait au bord gauche — 150 px trop à gauche, sous des portraits, eux,
   centrés. D'où le `auto` explicite ici et dans les deux variantes. */
/* 221 px séparent deux blocs d'équipe chez eux, 60 le titre de ses portraits. */
.mt-ct-role {
  margin: 18.8px auto 60px; text-align: center;
  font-family: var(--display); font-size: 40px; font-weight: 600; line-height: 1; color: var(--indigo);
}
.mt-ct-team { display: grid; }
/* Deux colonnes de 560 et 20 px d'écart : 1140 en tout, le conteneur borné. */
.mt-ct-team-2 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
/* Trois colonnes JOINTIVES sur 85 % de la fenêtre (1224 à 1440, 1632 à 1920) :
   leur bloc à trois portraits déborde volontairement des 1140 px. Sous 1301 il
   prend toute la largeur. */
.mt-ct-team-3 { grid-template-columns: repeat(3, 1fr); gap: 0; width: 85%; margin-inline: auto; align-items: center; }
@media (max-width: 1300px) { .mt-ct-team-3 { width: 100%; } }
/* Leurs trois blocs d'équipe ne respirent pas pareil : 261 px après la
   direction, 225,5 après l'agence de La Rochelle. Valeurs relevées. */
/* 60 px, et non 64,5 : leur grille à trois portraits centre ses cellules, si
   bien que la rangée COMMENCE 4,5 px plus haut que les deux portraits courts
   (la photo d'Elodie fait 384 px contre 375). */
.mt-ct-block-2 .mt-ct-role { margin: 221px auto 60px; width: fit-content; }
.mt-ct-block-3 .mt-ct-role { margin: 185.5px auto 60px; }
.mt-ct-member { margin: 0; text-align: center; }
/* Les portraits gardent leur taille de fichier (271 × 375, 272 × 384 pour
   Elodie) et se centrent dans leur colonne. */
.mt-ct-member img { width: auto; max-width: 100%; height: auto; display: block; margin: 0 auto; }
.mt-ct-member figcaption { display: flex; flex-direction: column; margin-top: 20px; }
.mt-ct-name, .mt-ct-job, .mt-ct-where {
  font-family: var(--display); font-size: 20px; font-weight: 500; line-height: 20px; color: var(--indigo);
}
/* Chez eux la légende à deux lignes (les agences) respire 51 px, celle à trois
   (la direction) 20 : c'est une ligne vide de plus dans leur balisage. */
.mt-ct-job, .mt-ct-where { margin-top: 20px; }
.mt-ct-member figcaption > .mt-ct-job:last-child { margin-top: 51px; }
@media (max-width: 780px) {
  .mt-ct-maps, .mt-ct-team-2, .mt-ct-team-3 { grid-template-columns: 1fr; row-gap: 40px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   PASSE TÉLÉPHONE
   ══════════════════════════════════════════════════════════════════════════
   Leurs valeurs de téléphone, relevées dans les blocs `@media(max-width:780px)`
   de `post-8/10/326/328/499/501.css` et vérifiées à 390. Elles vivent ICI, en
   fin de feuille, parce qu'elles corrigent des règles écrites plus haut : la
   migration avait été bâtie au bureau, et un réglage de bureau qui n'a pas son
   pendant mobile ne se voit pas tant qu'on ne regarde pas un téléphone.

   ⚠️ Rien dans ce bloc ne touche le bureau : tout est sous un seuil.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Le composant à onglets (contrats, avantages) ───────────────────────────
   Leur feuille intégrée a des réglages sous 1025 que le portage avait
   sautés, et le premier casse la mise en page : sans `line-height: normal` le
   libellé garde ses 50 px d'interligne, si bien qu'une pastille de deux lignes
   demande 100 px dans une boîte de 84 — le texte sort de la pastille et se
   superpose à la suivante. */
@media (max-width: 1024px) {
  .mt-opt { line-height: normal; }
  /* ⚠️ Et leur `height: 10vh` reste 7 px trop court pour l'étiquette la plus
     longue — « Nous sommes proches et accompagnons nos intérimaires » perd le
     bas de sa dernière ligne, chez eux aussi. Même cas que l'interligne de
     1 px de leur pied : c'est un défaut, pas une intention, et il rend le
     libellé illisible. Écrit en hauteur MINIMALE, une pastille d'une ligne
     tombe au pixel où elle tombait et celle de trois lignes s'ouvre. */
  .mt-opt, .mt-opt.mt-selected { height: auto; min-height: 10vh; }
  /* ⚠️ Leur picto de pastille NE CHANGE PAS de taille : 8vh à 390 comme à 1440
     (64 px sur une fenêtre de 800, relevé à sept largeurs). Le `6vh` relevé
     dans leur feuille sous 1025 est écrasé chez eux ; repris ici, il rendait le
     picto un quart trop petit sur tout téléphone et toute tablette. */
  /* ⚠️ Leur `width: 80%` porte sur une colonne en `fit-content` et se résout à
     100 % de la fenêtre chez eux ; posé sur notre carte il la rétrécissait à
     312 px pour 390 chez eux. */
  .mt-tabcard { width: 100%; }
  /* …sauf sur Avantages, où leur colonne a bien une largeur définie et la carte
     y fait 80 % (312 px à 390). Les deux pages portent leur propre copie du
     composant, avec des valeurs différentes. */
  .mt-tabs-av .mt-tabcard { width: 80%; }
  /* Leur texte de carte est en `4vh` — 33,8 px sur un téléphone, deux fois le
     corps de la page. Ramené au corps de leurs pages ; c'est la seule valeur
     de cette passe qui n'est PAS la leur, et c'est une demande du client. */
  .mt-tabcard-text { font-size: 18px; line-height: 28px; }
}

@media (max-width: 780px) {
  /* ── Entreprises ────────────────────────────────────────────────────────
     47a2b2c : UNE colonne et quatre rangées, 12 px d'écart ; chaque carte a
     8 px de marge latérale et 9/8 de marge intérieure. La grille à quatre
     colonnes du bureau restait en place et débordait de 241 px. */
  /* ⚠️ `justify-items: center` du bureau fait rétrécir la carte à son contenu :
     247 px au lieu des 350 de leur colonne, et le sous-titre se repliait sur
     deux lignes. Leur grille garde ses 20 px de marge latérale et la carte s'y
     étire. */
  .mt-ways { width: 100%; padding: 0 20px; grid-template-columns: 1fr; column-gap: 0; row-gap: 12px; justify-items: stretch; }
  .mt-way { width: auto; margin: 0; padding: 0 8px 0 9px; gap: 20px; }
  /* 55b7ff4 : 5,2vw centré — le `1,3vw` du bureau donnait 5 px à 390, un
     paragraphe illisible qui raccourcissait la page de 900 px. */
  .mt-lead-entr { margin: 0; font-size: 5.2vw; text-align: center; }
  /* 87d7a0f : leur picto tombe à 1 % (10 % au bureau). */
  .mt-illus img { width: 1%; }
  .mt-hero-entreprises h1 { font-size: 3.4rem; }
  .mt-h2-entr1 { --mt-rule-sm: 245px; }
  .mt-h2-entr2 { --mt-rule-sm: 336px; }
  .mt-h2-entr3 { --mt-rule-sm: 390px; }
  .mt-h2-entr1 > img, .mt-h2-entr2 > img { height: 6px; }

  /* ── Avantages ──────────────────────────────────────────────────────────
     2e79fa9 : 2rem ; cf504d1 : le logo FASTT, et lui seul, passe à 200 × 128. */
  .mt-h2-av1 h2 { font-size: 2rem; }
  .mt-h2-av1 { --mt-rule-sm: 339.3px; }
  .mt-h2-av2 { --mt-rule-sm: 115.8px; }
  .mt-av-brand { font-size: 50px; }
  .mt-av-baseline { font-size: 48px; }
  .mt-partner:nth-child(2) img { width: 200px; height: 128px; }

  /* ── À propos ───────────────────────────────────────────────────────────
     5e8d7fc 4,2rem · 404a8b2 2,2rem · a92c93f filet 182 × 6 · les quatre
     valeurs en UNE colonne avec un picto à 72 % et un libellé de 20. */
  .mt-hero-apropos h1 { font-size: 4.2rem; }
  .mt-ap-h2 { font-size: 2.2rem; }
  .mt-ap-rule { width: 182px; max-width: 100%; height: 6px; }
  .mt-ap-text { max-width: 70%; }
  .mt-value img { width: 72%; }
  .mt-value h3 { font-size: 20px; }

  /* ── Contact ────────────────────────────────────────────────────────────
     14dae2c 56px · bb5ffe0 et a937b2c 2,2rem ; « NOS ÉQUIPES » garde ses 42.
     ⚠️ `.mt-ct-agency` fait 550,8 px : dans une grille `1fr`, ce sont ses
     550,8 px qui fixent le MINIMUM de la colonne (`minmax(auto, 1fr)`), le
     `max-width: 100%` ne pouvant pas se résoudre contre une colonne qu'il
     détermine. La colonne gonflait donc à 550,8 et la page débordait de 161 px.
     `minmax(0, 1fr)` casse la circularité ; la largeur, elle, redevient 100 %. */
  .mt-hero-contact h1 { font-size: 56px; }
  .mt-h2-ct1 h2, .mt-h2-ct2 h2 { font-size: 2.2rem; }
  .mt-h2-ct3 h2 { font-size: 42px; }
  .mt-h2-ct1 { --mt-rule-sm: 331px; }
  .mt-h2-ct3 { --mt-rule-sm: 343.2px; }
  .mt-h2-ct1 > img, .mt-h2-ct2 > img, .mt-h2-ct3 > img { height: 9px; }
  .mt-ct-maps { grid-template-columns: minmax(0, 1fr); }
  /* Leur colonne d'agence garde 90 % de la fenêtre, centrée — 351 px à 390, 450
     à 500, 702 à 780, relevé au chargement. Écrite à 100 %, la nôtre collait le
     plan aux deux bords : sur un téléphone c'est la seule bande de la page qui
     touche le verre, et ça se voit avant le reste. */
  .mt-ct-agency { width: 90%; margin-inline: auto; }

  /* ── FAQ ────────────────────────────────────────────────────────────────
     eac6f86/1f5ca80 2,2rem · 490bc32 5,4vw · ec45886 filet 93 % × 6 ·
     383d652 bouton borné à 90 % avec 23 px de marge intérieure ·
     afe8435 question 1,8rem, réponse 6vw. */
  /* 25c28aa : leur colonne de gauche garde sa grille de CINQ rangées, mais des
     rangées de 94 px avec 20 px d'écart, et tout y est CENTRÉ. Les trois
     translations qui la resserrent au bureau (−32, −40, −55) tombent : seul le
     filet en garde une, −60. Rangées à 741, 855, 969, 1083 et 1197. */
  .mt-faq-titles { grid-template-rows: repeat(5, 94px); gap: 20px; justify-items: center; }
  .mt-faq-titles h2 { font-size: 2.2rem; margin: 0; }
  .mt-faq-titles h2:first-child { margin-bottom: 0; }
  .mt-faq-titles > img { width: 325px; max-width: 100%; height: 6px; margin-left: 0; transform: translateY(-50px); }
  .mt-faq-titles p { font-size: 5.4vw; margin: 0; transform: none; text-align: center; }
  .mt-faq-btn { max-width: 90%; margin-left: 0; padding: 23px; transform: none; }
  /* afe8435 : leur signe ＋/− passe à 40 px. */
  .mt-acc-q { font-size: 1.8rem; }
  .mt-acc-a p { font-size: 6vw; }
  .mt-acc-ico { flex: 0 0 35px; padding-top: 0; }
  .mt-acc-ico svg { width: 35px; height: 40px; }

  /* ── Accueil ────────────────────────────────────────────────────────────
     888d597 : leurs deux compteurs tombent à 67,2 px. */
  .mt-bs-num { font-size: 67.2px; }

  /* ── Avantages ──────────────────────────────────────────────────────────
     Le compteur de CETTE page tombe à 80, pas à 100 : la passe téléphone avait
     descendu ceux de l'accueil et oublié celui-ci, qui restait 20 px trop gros
     (mesuré à 390 : 80 px chez eux, 100 chez nous). */
  .mt-av-num { font-size: 80px; }

  /* ── Deuxième tour, mesuré après le premier ─────────────────────────────
     673d77a : leur formulaire perd sa hauteur minimale (`--min-height: 0px`).
     Les 772,1 px du bureau laissaient 486 px de boîte blanche vide sous lui. */
  .mt-ct-form { min-height: 0; }
  /* 729da41 : leur cellule de valeur fait 250 px de large, et le picto 72 %
     DE CETTE CELLULE — 180 px, pas 72 % de la fenêtre. */
  .mt-value { width: 250px; margin-inline: auto; }
  /* 2a92540 : la marge du bloc passe à 0, le titre ne garde que ses 20 px. */
  .mt-ap-h2 { margin-top: 20px; }
  .mt-ap-rule { margin-top: 3.8px; }
  /* c7e34f1 : la bande des chiffres perd ses 130 px de marge haute, et leurs
     trois photos leurs 297 px de marge intérieure — c'est une hauteur minimale
     de 830 px qui les tient. */
  .mt-av-stats-head { margin-top: 0; }
  .mt-av-shots { padding: 20px 0; min-height: 830px; }
}