/* Mart'Intérim — le socle commun à toutes les pages du site.
   Marque, base, en-tête et pied : relevés sur mart-interim.fr au chargement (jamais
   au redimensionnement) et vérifiés au pixel sur la page Offres. Ils vivent ICI et
   nulle part ailleurs — une deuxième copie dériverait dès la première retouche. */

/* ── Marque Mart'Intérim ─────────────────────────────────────────────────
   Relevé sur mart-interim.fr : indigo #4A529E (entrée courante, pied),
   jaune #EBBE31 (filet de l'en-tête, pastilles, boutons), encre #222325,
   fond de page #f6f6f6. Titres et menu en Chivo, corps en Red Hat.

   ⚠️ Sur le jaune, du BLANC — c'est leur marque. Leur kit Elementor écrit
   `color:#FFFFFF` sur tout bouton et les huit pages le montrent (1,76:1). Une
   première passe l'avait remplacé par l'encre au nom du contraste ; le client
   a demandé le 1:1 et a tranché pour le blanc. Ce qui reste corrigé, parce
   qu'il l'avait demandé, c'est l'encre des PASTILLES d'offre (#222325 : leur
   greffon y écrivait une déclaration invalide et retombait sur #7A7B7C). */
:root {
  --indigo: #4a529e;
  --indigo-dark: #3c4383;
  --yellow: #ebbe31;
  --ink: #222325;
  --page: #f6f6f6;
  /* L'ombre pleine de leur boîte de recherche, et le rose sous le motif du pied. */
  --indigo-shadow: #4a529d;
  --footer-pink: #f5b7b7;
  --display: Chivo, "Helvetica Neue", Arial, sans-serif;
  --body: "Red Hat Text", Arial, sans-serif;
  --plugin: "Red Hat Display", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--page); color: #3e3e3f;
  font-family: var(--plugin); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }


/* ── En-tête — copie du site principal (mart-interim.fr) ─────────────────
   Relevé au chargement à sept largeurs. Deux règles suffisent : le logo fait
   16 % de la largeur, posé à 2 % du bord ; le menu, lui, avance d'un demi-pixel
   et demi par pixel de largeur — il commence à 0,6 W − 477, ce qui se vérifie à
   1440, 1600, 1700 et 1920 au dixième de pixel. Les entrées se touchent, sans
   espace : c'est leur menu.

   ⚠️ SA HAUTEUR N'EST PAS FIXE. Chez eux la rangée porte 20 px de marge
   intérieure en haut ET en bas, et son contenu vaut :

       max( hauteur du logo , 20 + 22,4 + 20 )   →  bar = ce max + 40 + 3

   les 62,4 px du menu venant de SES propres 20 px de marge. Sous 1981 c'est le
   menu qui commande et la barre fait 105,4 px partout ; au-delà, c'est le LOGO,
   qui grandit avec la fenêtre — leur barre monte à 110,6 px à 2200 et 121,6 à
   2560. Écrite en `height: 102,4px`, la nôtre restait bloquée à 105,4 et le
   logo, centré, y perdait ses marges : 16 px de moins sur un écran large, ce
   que le client a vu comme « il manque du padding vertical ». */
.mt-header { background: #fff; border-bottom: 3px solid var(--yellow); }
.mt-header-inner { display: flex; align-items: center; padding: 20px 0; }
.mt-logo { flex: 0 0 auto; margin-left: 2%; width: 16%; line-height: 0; }
.mt-logo img { width: 100%; height: auto; display: block; }
/* Ses 20 px de marge verticale sont le PLANCHER de la barre (62,4 px de boîte
   pour une ligne de 22,4) : sans eux elle se refermerait sur le seul logo. */
.mt-nav {
  display: flex; align-items: center; gap: 0; min-width: 0;
  padding: 20px 0; margin-left: calc(42% - 477px);
}
.mt-nav a {
  font-family: var(--display); font-size: 22.4px; font-weight: 700; line-height: 22.4px;
  color: var(--ink); background: #fff; text-decoration: none; white-space: nowrap; padding: 0 18px;
  transition: color .18s ease;
}
.mt-nav a:hover, .mt-nav a:focus-visible { color: var(--indigo); }
.mt-nav a[aria-current="page"] { color: var(--indigo); }

.mt-burger {
  display: none; background: none; border: 0; padding: 8px; margin-left: 3.5%;
  cursor: pointer; color: var(--indigo); line-height: 0;
}
.mt-burger svg { width: 34px; height: 34px; display: block; fill: currentColor; }
/* Une seule des deux icônes à la fois — la croix ne sort qu'avec le panneau. */
.mt-burger .mt-burger-close { display: none; }
.mt-burger[aria-expanded="true"] .mt-burger-open { display: none; }
.mt-burger[aria-expanded="true"] .mt-burger-close { display: block; }

/* Leur bureau commence à 1331, pas à 1281 : mesuré au chargement, la barre
   passe de 105,4 px à sa version haute entre 1330 et 1340.

   Entre 781 et 1330 leur barre compose au `space-evenly` : le brûleur (76,8)
   et le logo (548, l'image à 70 % de cette boîte) laissent trois vides égaux
   de (W − 624,8 − 20) / 3 — 51,7 px à 800, 126,4 à 1024, vérifié au pixel.

   ⚠️ Sa HAUTEUR, elle, change trois fois, et la première migration n'en gardait
   qu'une (153,6 partout), ce qui décalait toute la page de 130 à 157 px sur la
   plage des portables. Relevé pas à pas :
       ≥ 1301        105,4   logo à gauche (2 %, 16 %), menu horizontal
       1025 – 1300   239,8   brûleur et logo centrés, logo à 81,6
        781 – 1024   153,6   brûleur à 40, logo à 38,4
       ≤ 780         160     brûleur collé au bord dans 72 px, logo à 92

   ⚠️ CES VALEURS SE RELÈVENT AU CHARGEMENT, LARGEUR PAR LARGEUR. Mesurée en
   redimensionnant une page déjà chargée, leur barre annonce 284 puis 310 px :
   le menu HFE ne recompose pas sa mise en page au redimensionnement. Une
   migration bâtie sur ces chiffres-là décale les neuf pages de 130 à 180 px sur
   toute la plage des portables. */
@media (max-width: 1300px) {
  /* 150,6 + le filet de 3 px = les 153,6 de leur barre de tablette. */
  .mt-header-inner { height: 150.6px; padding: 0; justify-content: space-evenly; gap: 20px; position: relative; }
  .mt-nav { display: none; }
  .mt-burger {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 76.8px; width: 76.8px; height: 70.6px; margin: 0; padding: 0;
  }
  .mt-logo { flex: 0 0 548px; width: auto; margin: 0; display: flex; justify-content: center; }
  .mt-logo img { width: 70%; }
  .mt-nav.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    position: absolute; left: 0; right: 0; top: 100%; background: #fff;
    border-bottom: 3px solid var(--yellow); padding: 8px 24px 18px; z-index: 98;
  }
  .mt-nav.is-open a { padding: 12px 0; font-size: 20px; }
}

/* 1025–1300 : même composition qu'en tablette, mais la barre fait 239,8 de haut
   au lieu de 153,6. Tout y reste centré. */
@media (min-width: 1025px) and (max-width: 1300px) {
  .mt-header-inner { height: 236.8px; }
}

/* ⚠️ DEUX de leurs pages portent une barre PLUS HAUTE entre 1025 et 1330 :
   284,2 px de 1301 à 1330 (où les autres gardent leur barre de bureau à 105,4)
   et 310,4 de 1025 à 1300 (contre 239,8 ailleurs). Relevé au chargement, page
   par page, trois fois : c'est l'ACCUEIL **et la page OFFRES**, les deux seules
   qui chargent la feuille du greffon d'offres (ses points de rupture sont 1330
   et 768, ceux d'Elementor 1300 et 780). La première version
   ne posait la classe que sur l'accueil, et la page Offres perdait 179 px de
   barre entre 1025 et 1330. Marqué `.mt-tallbar` sur le <body> des deux. */
@media (min-width: 1301px) and (max-width: 1330px) {
  .mt-tallbar .mt-header-inner {
    height: 281.2px; align-items: flex-start; justify-content: flex-start; gap: 0; padding: 40px 0 0;
  }
  .mt-tallbar .mt-nav { display: none; }
  .mt-tallbar .mt-burger {
    display: flex; align-items: center; justify-content: center; order: 2;
    flex: 0 0 76.8px; width: 76.8px; height: 70.6px; padding: 0;
    margin: 0 0 0 calc(42% - 477px);
  }
  .mt-tallbar .mt-logo { margin-top: 80.2px; }
  .mt-tallbar .mt-nav.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    position: absolute; left: 0; right: 0; top: 100%; background: #fff;
    border-bottom: 3px solid var(--yellow); padding: 8px 24px 18px; z-index: 98;
  }
  .mt-tallbar .mt-nav.is-open a { padding: 12px 0; font-size: 20px; }
}
@media (min-width: 1025px) and (max-width: 1300px) {
  .mt-tallbar .mt-header-inner { height: 307.4px; align-items: flex-start; padding: 40px 0 0; }
  .mt-tallbar .mt-logo { margin-top: 76.9px; }
}
/* Leur téléphone commence à 780 (le seuil d'Elementor), pas à 768 : barre de
   160, brûleur collé au bord dans 72 px, puis 20 px de vide, et le logo qui
   prend 70 % de ce qui reste (208,6 à 390, 481,6 à 780). */
@media (max-width: 780px) {
  .mt-header-inner { height: 157px; justify-content: flex-start; align-items: center; gap: 20px; padding: 0; }
  .mt-burger { flex: 0 0 72px; width: 72px; height: 57.7px; margin: 0; }
  .mt-logo { flex: 1 1 auto; justify-content: flex-start; }
  .mt-logo img { width: 70%; }

  /* ── Leur panneau de menu, relevé au chargement à 390, 600 et 780 ─────────
     La première version en posait un à nous : un bloc blanc de 24 px de marge
     avec des entrées de 20 px, sans séparateur ni état courant. Le leur est une
     LISTE PLEINE LARGEUR, et c'est ce qu'un téléphone voit d'abord de ce site.

         panneau   x 0, LARGEUR PLEINE, rayon 15, fond blanc, haut à 132
         entrée    60 px de haut, 19/20 de marge, Chivo 22,4/700 #333232
         filet     2 px #ebbe31 sous chaque entrée SAUF la dernière, marge 3
         courante  fond #4a529e, texte #ebbe31 (et le rayon du panneau)

     ⚠️ Leur panneau commence à 132, soit 28 px AU-DESSUS du bas de la barre :
     il recouvre le filet jaune de l'en-tête, qui disparaît tant que le menu est
     ouvert. Écrit `top: 100%`, le nôtre laissait ce filet en travers et posait
     ses entrées 45 px plus bas que les leurs. */
  .mt-nav.is-open {
    top: 132px; padding: 0; border-bottom: 0;
    border-radius: 15px; overflow: hidden; z-index: 99;
  }
  .mt-nav.is-open a {
    padding: 19px 20px; font-size: 22.4px; line-height: 22.4px;
    border-bottom: 2px solid var(--yellow); margin-bottom: 3px;
    /* Le noir du panneau n'est pas celui de la barre : #333232, pas #222325. */
    color: #333232;
  }
  /* La dernière perd son filet, PAS sa marge : leur panneau fait 456 px avec
     les 3 px du bas (452,8 sans). */
  .mt-nav.is-open a:last-child { border-bottom: 0; }
  .mt-nav.is-open a[aria-current="page"] { background: var(--indigo); color: var(--yellow); }
}


/* ── Pied de page ────────────────────────────────────────────────────────
   Leur bandeau au motif « M », posé en haut à gauche à sa taille naturelle.
   Quatre colonnes de 245,5 px depuis 36 px du bord, la dernière prenant le
   reste ; titres Chivo 16/24 gras, entrées à 31 px de pas. */
.mt-footer {
  background: var(--footer-pink) url("/assets/martinterim/footer-bg.webp") 0 0 / auto no-repeat;
  color: #fff; font-family: var(--display); padding: 20px 0;
}
.mt-footer-inner {
  max-width: 1440px; margin: 0 auto; padding: 40px 36px;
  display: grid; grid-template-columns: repeat(3, 245.5px) 1fr; align-items: start;
}
.mt-footer h3 { font-size: 16px; font-weight: 700; line-height: 24px; margin: 0 0 14.4px; }
/* Leur entrée de pied a un PAS de 31 px, obtenu chez eux par un interligne de
   1 px entouré de 15 px de marge.

   ⚠️ Repris tel quel, ce `line-height: 1px` fait se SUPERPOSER les deux lignes
   d'un libellé qui se replie — ce qui arrive dès que la colonne se resserre :
   à 768, « Type de contrats », « Voir les offres » et « Nous Contacter »
   s'impriment les uns sur les autres. Chez eux aussi ; c'est un défaut de leur
   pied, pas une intention. Le pas est donc écrit à l'endroit : un interligne
   d'un cadratin et la marge qui complète les 31 px, quelle que soit la taille
   du corps. Une ligne repliée descend au lieu de se superposer, et une entrée
   d'une seule ligne tombe au pixel où elle tombait. */
.mt-footer-col a {
  display: block; font-size: 16px; font-weight: 400; text-decoration: none;
  line-height: 1em; padding: calc((31px - 1em) / 2) 0;
}
.mt-footer-col a:hover { text-decoration: underline; }
/* Le jaune de marque sur l'indigo du pied ne fait que 3,99:1 : pour ce seul usage
   (le repère « vous êtes ici »), il s'éclaircit d'un ton — #F2CE5C, 4,6:1. */
.mt-footer-col a[aria-current] { color: #f2ce5c; }
.mt-footer-social a { display: inline-block; line-height: 0; color: #fff; padding: 0; }
.mt-footer-social svg { width: 25px; height: 25px; fill: currentColor; display: block; }
.mt-legal {
  max-width: 1440px; margin: 20px auto 0; padding: 31.2px 28.8px; font-size: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.mt-legal-links { display: flex; }
.mt-legal a { padding: 0 19px; text-decoration: none; line-height: 16px; }
.mt-legal > div { line-height: 19px; }
.mt-legal a:hover { text-decoration: underline; }
/* Leur pied change de CORPS avant de changer de forme : sous 1331 les titres
   passent de 16/24 à 24/36 et les entrées de 16 à 24 (22,4 dans la première
   colonne, une valeur qui leur est propre), avec 30 px de marge par entrée —
   61 px de pas au lieu de 31. La ligne légale suit : 16 px en bureau, 24 en
   tablette, 12,8 sur un téléphone. C'est ce que la version générique avait
   perdu : tout y restait en 16. */
@media (max-width: 1300px) {
  .mt-footer-inner {
    display: flex; gap: 20px; grid-template-columns: none;
    padding: 40px 2.5%; align-items: flex-start;
  }
  .mt-footer-col { flex: 1 1 0; min-width: 0; }
  .mt-footer h3 { font-size: 24px; line-height: 36px; }
  .mt-footer-col a { font-size: 24px; padding: calc((61px - 1em) / 2) 0; }
  .mt-footer-col:first-child a { font-size: 22.4px; }
  .mt-legal { font-size: 24px; }
  .mt-legal a { line-height: 24px; }
}
/* Sur téléphone leurs entrées reviennent à 15 px de marge (31 px de pas) et
   la ligne légale tombe à 12,8. La colonne unique n'arrive qu'à 767 : à 768
   leurs quatre colonnes tiennent encore côte à côte. */
@media (max-width: 780px) {
  .mt-footer-col a { padding: calc((31px - 1em) / 2) 0; }
  .mt-legal { font-size: 12.8px; }
  .mt-legal a { line-height: 12.8px; }
  .mt-legal > div { line-height: 19px; font-size: 16px; }
}
@media (max-width: 767px) {
  .mt-footer-inner { flex-direction: column; padding: 20px 0; gap: 0; }
  /* 6b2ff64 : la colonne « Nous Suivre » — et elle seule — se CENTRE sur un
     téléphone, son intitulé comme son logotype. */
  .mt-footer-social h3 { text-align: center; }
  /* Le logotype est un `svg` en display:block dans un lien large de 90 % : c'est
     lui qui porte le centrage, pas un `text-align` sur le parent. */
  .mt-footer-social svg { margin: 0 auto; }
  .mt-footer-col { padding: 20px 0; width: 100%; }
  /* Leurs entrées rentrent de 5 % et prennent les 90 % qui restent. */
  .mt-footer-col a { margin-left: 5%; width: 90%; }
  /* ⚠️ Chez eux les entrées rentrent de 5 % mais les TITRES, la ligne légale et
     la mention de droits restent collés au bord gauche du verre — « Candidats »
     commence à 0 quand « Voir les offres » commence à 20. Ça se lit comme une
     colonne cassée, pas comme une intention, et c'est la dernière chose que voit
     un visiteur qui descend la page. Tout le pied part donc de la MÊME gouttière
     que les entrées : les titres gardent leur boîte de 90 % (celui de « Nous
     Suivre » s'y centre toujours) et la ligne légale s'aligne avec eux. */
  .mt-footer h3 { margin-left: 5%; width: 90%; padding: 0; }
  .mt-legal { justify-content: flex-start; text-align: left; padding: 20px 5%; }
  /* Les 19 px de côté de leurs liens légaux décaleraient le premier d'autant :
     c'est la gouttière qui porte le retrait, l'écart reste entre les deux. */
  .mt-legal a:first-child { padding-left: 0; }
}