/* ═══════════════════════════════════════════════════════════════════════════════════════
   ACASS — feuille des PAGES du site carrière (aujourd'hui : l'accueil).

   Le chrome (barre, pied) vit dans `site.css`, partagé avec la page des offres. Ici ne
   vivent que les bandes de contenu.

   Toutes les valeurs viennent de LEUR feuille la page d'origine la feuille de la page d'origine
   et de la géométrie calculée de leur page à 1440 / 1024 / 768 / 390, un chargement neuf par
   largeur. Le modèle de boîte est le leur :

   • chaque bande est un conteneur `flex` à `gap: 20px` (l'écart entre widgets du kit) ;
   • les bandes pleine largeur portent 10 px de marge intérieure sur les quatre côtés,
     les deux bandes peintes (#F5F4FA) n'en portent que verticalement ;
   • les marges en % d'un widget se résolvent sur la largeur de SON conteneur — c'est pour
     cela que la structure des conteneurs est reproduite à l'identique et non aplatie ;
   • leurs seuils sont ceux d'la page d'origine : 1024 et 767. Pas 1280, pas 900.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

.ac-home { background: #fff; }

/* Inter est la police de TOUTE la page d'accueil (leur post-114 la pose sur chaque titre) ;
   le composant d'offres, lui, garde la pile du thème — d'où la portée par classe. */
.ac-h-hero, .ac-h-cta, .ac-h-offers, .ac-h-about, .ac-h-storyband, .ac-h-testimonials {
  font-family: "Inter", sans-serif;
}

/* ═══ 1. Bandeau — diaporama Ken Burns ═══════════════════════════════════════════════════
   `28a5f82` : 59 vh de haut au minimum, colonne, écart 20, marge intérieure 10.
   Le fond est un diaporama de trois photos : fondu de 500 ms, 5 s par vue, zoom arrière
   permanent (la page d'origine : `transform: scale(1.3) → scale(1)` en 10 s linéaires, donc jamais
   terminé avant le changement de vue — mesuré à 1,218 chez eux). Voile #000000B8 par-dessus. */
.ac-h-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 20px; padding: 10px;
  min-height: 59vh;
}
.ac-h-slides { position: absolute; inset: 0; z-index: -2; }
.ac-h-slide {
  position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: top center;
  transform: scale(1.3); transition: opacity .5s linear;
}
.ac-h-slide.ac-on { opacity: 1; transform: scale(1); transition: opacity .5s linear, transform 10s linear; }
.ac-h-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #000000B8; }

/* Le voile et le diaporama sont posés en absolu : la colonne des widgets est donc
   `.ac-h-hero-in`, qui porte l'écart de 20 px du kit. */
.ac-h-hero-in { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.ac-h-hero-logo { margin: 50px 0 0; text-align: center; line-height: 0; }
.ac-h-hero-logo img { max-width: 18%; width: auto; display: inline-block; }

/* Leur interligne est EXACTEMENT la taille du corps (40,32 px pour 40,32) : `line-height: 1`.
   Un 1,2 hérité rallongerait le bandeau de 8 px par ligne. */
.ac-h-hero-title {
  margin: 12vw 0 3vw; text-align: center;
  font-size: 2.8vw; font-weight: 700; line-height: 1; letter-spacing: -.8px; color: #fff;
}
.ac-h-hero-lead {
  width: 70%; align-self: center; margin: 0; padding: 0 0 8vh; text-align: center;
  font-size: 1.4vw; font-weight: 400; line-height: 1; letter-spacing: -.4px; color: #fff;
}

/* ═══ 2. Les deux appels à l'action ══════════════════════════════════════════════════════
   `1b1780ba` : rangée centrée, 35 px de marge intérieure haute, fond #F5F4FA. */
.ac-h-cta {
  display: flex; flex-direction: row; justify-content: center; gap: 20px;
  padding: 35px 0 0; background: var(--ac-page);
}
.ac-h-btn {
  align-self: center; display: block; text-align: center;
  background: #464396; color: #fff; border-radius: 6px; padding: 33px;
  font-size: 22px; font-weight: 700; line-height: 1;
  transition: filter .2s ease;
}
.ac-h-btn:hover { filter: brightness(1.12); }
.ac-h-cv { flex: 0 0 auto; align-self: center; }

/* La pastille de dépôt de CV : c'est le composant du produit, habillé comme sur LEUR accueil
   (leur raccourci écrit ces valeurs en ligne, `!important` compris) — pastille corail
   #EF3D5A de 400 px au plus, pictogramme masqué, deux lignes centrées de 22/700 et 14/400
   à 6 px d'écart. Le corps de la page des offres, lui, garde la grande zone de dépôt. */
.ac-h-cv .enso-cv-upload-form-wrap { margin: 0; }
.ac-h-cv .enso-cv-upload-main {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto; padding: 20px 16px; width: 100%; max-width: 400px; height: auto;
  border: none; border-radius: 8px; background: #EF3D5A; box-shadow: none;
  transition: filter .2s ease;
}
.ac-h-cv .enso-cv-upload-main:hover { filter: brightness(1.06); }
.ac-h-cv .enso-cv-upload-main > svg { display: none !important; }
/* ⚠️ Le cœur pose `width: 80%` sur cette phrase (pavé de dépôt de la page des offres) :
   sur la pastille de l'accueil elle passait alors sur DEUX lignes et la pastille montait de
   89 à 106 px. Ici la phrase prend sa largeur naturelle, comme chez eux. */
.ac-h-cv .enso-cv-upload-text {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; margin: 0; padding: 0; text-align: center; flex: 0 0 auto; width: auto;
  font-family: var(--ac-body);
}
.ac-h-cv .ac-cv-t1 { display: flex; color: #fff; font-size: 22px; font-weight: 700; line-height: 1.2; }
.ac-h-cv .ac-cv-t2 { display: block; color: #fff; font-size: 14px; font-weight: 400; line-height: 1.2; white-space: normal; }

/* ═══ 3. Offres : recherche, carrousel, lien ═════════════════════════════════════════════
   `f9d1f28` : colonne, 80 px de marge intérieure haute, fond #F5F4FA. */
.ac-h-offers {
  display: flex; flex-direction: column; gap: 20px;
  padding: 80px 0 0; background: var(--ac-page);
}
.ac-h-h2 { margin: 0; text-align: center; font-size: 39px; font-weight: 700; line-height: 1; letter-spacing: -.6px; color: #000; }
.ac-h-sub { margin: 0; text-align: center; font-size: 22px; font-weight: 400; line-height: 1; letter-spacing: -.6px; color: #000; }
/* Chez eux « Voir toutes les offres » de cette ligne est du texte MORT (un titre, sans lien),
   alors que la même phrase plus bas est un lien. Elle est ici un lien de même encre et sans
   soulignement : rien ne bouge d'un pixel, la phrase mène enfin quelque part. */
.ac-h-sub a { color: inherit; text-decoration: none; }
.ac-h-sub a:hover { text-decoration: underline; }

.ac-h-search { width: 65%; max-width: 65%; align-self: center; margin: 2% 0; }
/* Leur barre d'accueil porte la même boîte que celle du listing (cadre 2 px #222325,
   rayon 8, 20 px de marge intérieure) mais une AUTRE ombre : un script de leur page
   remplace `8px 8px 0 #dadada` par celle-ci, en `!important`. */
.ac-h-search .enso-search { box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .17); }
/* Leur épingle de lieu mesure 21,6 × 24 sur l'accueil et 12 × 12 sur la page des offres :
   deux jeux d'icônes, deux tailles. Sans cette règle le champ « Ville » gagne 10,4 px. */
.ac-h-search .enso-search-field.enso-hidden-mobile svg { width: 21.6px; height: 24px; }
/* Leur bouton-loupe du téléphone fait 40 × 41 (marge 10, glyphe 20 × 21) — quatre pixels de
   plus que celui du listing, qui porte un glyphe de 16. */
.ac-h-search .ac-msearch {
  display: none; align-items: center; justify-content: center;
  padding: 10px; line-height: 0; border: none; border-radius: 6px;
  background: var(--enso-cta-gradient, #EF3D55); color: #fff; cursor: pointer;
}
.ac-h-search .ac-msearch svg { width: 20px; height: 21px; display: block; }

.ac-h-carousel { width: 100%; margin: 3% 0 0; }
/* Leur carte de carrousel : 10 px de marge tout autour (donc 30 px entre deux cartes, pour
   un écart de groupe de 10), 24/20 de marge intérieure, rayon 10, fond blanc. */
.ac-h-carousel .enso-carousel-group .enso-job-result {
  margin: 10px; padding: 24px 20px; border-radius: 10px; background: #fff;
}
@media (min-width: 769px) {
  .ac-h-carousel .enso-carousel-group .enso-job-result { max-width: calc((100% - 80px) / 3); }
}
/* Leurs flèches sont deux chevrons nus indigo, pas les pastilles jaunes du produit. */
.ac-h-carousel .enso-carousel-btn {
  background: none; color: var(--ac-badge); font-size: 16px; line-height: 24px;
  height: 50px; width: 53px; padding: 10px 20px; margin: 0 10px; border-radius: 0;
}
.ac-h-carousel .enso-carousel-btn:hover { background: none; filter: none; opacity: .7; }
.ac-h-carousel .enso-carousel-btn:disabled { background: none; color: #ccc; }
.ac-h-carousel .enso-carousel-dots { margin-top: 20px; gap: 6px; }
/* ⚠️ Sur LEUR accueil le volet « expérience / 13e mois / permis » du carrousel n'est PAS
   repliable : la carte du carrousel porte `job-result-infos-wrapper`, une autre classe que
   le `job-infos-wrapper` du listing, et aucune règle ne la replie. Le chevron reste dessiné
   mais n'agit sur rien. Sous 768 leurs trois pastilles portent `hidden-mobile`. */
/* Le cœur replie par `max-height: 0` + `overflow: hidden` + `opacity: 0`, et la page des
   offres ajoute `display: none` : les quatre se lèvent ici. */
.ac-h-carousel .enso-job-infos-wrapper {
  display: flex !important; max-height: none !important; overflow: visible;
  opacity: 1; animation: none; transition: none;
}
@media (max-width: 768px) {
  .ac-h-carousel .enso-job-infos-wrapper { display: none !important; }
}

.ac-h-all { margin: 0 0 2%; text-align: center; font-size: 20px; font-weight: 400; line-height: 1; letter-spacing: -.6px; }
.ac-h-all a { color: #000; text-decoration: underline; }

/* ═══ 4. Quatre repères + « Découvrez ACASS » ════════════════════════════════════════════
   `ac3065f` : colonne centrée, marge intérieure 10. `2d3f7aa` : grille 4 × 2, écart 20,
   marge intérieure 10, 86 % de large au-dessus de 768. */
/* `overflow-x: clip` et non `hidden` : il coupe sans créer de conteneur de défilement.
   Ce qu'il coupe, à 768 seulement, ce sont les 3,5 px de « recrutements » qui sortent de sa
   cellule de 120,8 px — le même dépassement fait déborder LEUR page de 7 px de côté. */
.ac-h-about {
  display: flex; flex-direction: column; gap: 20px; padding: 10px; align-items: center;
  overflow-x: clip;
}
.ac-h-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr);
  gap: 20px; padding: 10px; width: 86%;
}
/* Leurs pictogrammes sont calés en BAS de la première rangée (`align-self: flex-end`) et le
   glyphe de 50 px vit dans une ligne de texte : c'est le talon de la ligne qui donne au
   widget ses 57 px, pas le dessin. */
/* ⚠️ `1fr` porte `min-width: auto`, donc la piste ne descend pas sous le MOT le plus long
   de sa colonne : à 768 « recrutements » (200 px à 32) portait la quatrième colonne à 230 px
   et la grille débordait la page de 135 px. Chez eux les quatre colonnes font 140,8 et les
   mots dépassent de leur cellule — c'est ce que `min-width: 0` reproduit. */
.ac-h-stats > * { min-width: 0; }
.ac-h-stat-icon { align-self: end; text-align: center; font-size: 16px; line-height: 1.5; }
.ac-h-stat-icon svg { width: 50px; height: 50px; fill: #000; display: inline-block; }
.ac-h-stat { display: flex; flex-direction: column; gap: 20px; padding: 10px; }
.ac-h-stat-big { margin: 0; text-align: center; font-size: 32px; font-weight: 600; line-height: 1; color: #000; }
.ac-h-stat-small { margin: 0; text-align: center; font-size: 20px; font-weight: 400; line-height: 1; color: #000; }

.ac-h-h2-decouvrez { margin: 5% 0 0; }
.ac-h-video { width: 92%; }
.ac-h-video iframe { display: block; width: 100%; aspect-ratio: 1.77777; border: 0; }

/* ═══ 5. Carrousel éditorial ═════════════════════════════════════════════════════════════
   `4d72d30` / `18ddb1a` : 8 % de marge intérieure haute, 6 % basse, une vue à la fois,
   défilement automatique toutes les 5 s, boucle, transition de 500 ms, flèches de 44 px
   (15 sous 768) et trois pastilles noires de 6 px.

   `--u` vaut UN pixel de leur image d'origine (2 364 px de large pour la largeur de la
   bande) : toutes les valeurs ci-dessous sont donc les leurs, au pixel de leur maquette. */
.ac-h-storyband {
  display: flex; flex-direction: column; gap: 20px; padding: 10px;
  align-items: center; justify-content: center;
}
/* `--u` vaut UN pixel de leur image d'origine : il est posé ici pour que les flèches et
   les pastilles, qui vivent hors des panneaux, s'y réfèrent aussi. */
.ac-h-story { --u: calc((100vw - 20px) / 2364); width: 100%; padding: 8% 0 6%; position: relative; }
.ac-h-story-view { overflow: hidden; }
.ac-h-story-track { display: flex; transition: transform .5s ease; }
.ac-h-slide-ed {
  flex: 0 0 100%; display: flex; aspect-ratio: 2364 / 880; background: var(--ac-page);
}
.ac-h-ed-photo { flex: 0 0 50.17%; overflow: hidden; }
.ac-h-ed-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-h-ed-text {
  flex: 1 1 auto; min-width: 0; position: relative;
  padding: calc(122 * var(--u)) calc(136 * var(--u)) 0 calc(127 * var(--u));
}
.ac-h-ed-text h2 {
  margin: 0 0 calc(75 * var(--u));
  font-size: calc(62.8 * var(--u)); font-weight: 800; line-height: 1.18;
  letter-spacing: calc(-1 * var(--u)); text-transform: uppercase; color: #000;
}
.ac-h-ed-text p {
  margin: 0; text-align: justify; hyphens: none; color: #000;
  font-size: calc(35.4 * var(--u)); font-weight: 400; line-height: 1.328;
}
.ac-h-ed-num { position: absolute; left: calc(166 * var(--u)); bottom: calc(74 * var(--u)); font-size: calc(28 * var(--u)) !important; }

.ac-h-ed-prev, .ac-h-ed-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; padding: 0; color: #000;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
}
.ac-h-ed-prev svg, .ac-h-ed-next svg { width: 27px; height: 44px; fill: currentColor; }
.ac-h-ed-prev { left: 10px; }
.ac-h-ed-next { right: 10px; }
.ac-h-ed-prev:hover, .ac-h-ed-next:hover { opacity: .6; }
.ac-h-ed-dots { display: flex; justify-content: center; gap: 12px; margin-top: calc(74 * var(--u)); }
.ac-h-ed-dots button {
  width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%;
  background: #000; opacity: .2; cursor: pointer; transition: opacity .3s;
}
.ac-h-ed-dots button.ac-on { opacity: 1; }

.ac-h-team { width: 100%; line-height: 0; }
.ac-h-team img { width: 100%; height: auto; display: block; }

/* ═══ 6. Témoignages, étapes, bouton final ═══════════════════════════════════════════════ */
.ac-h-testimonials { display: flex; flex-direction: column; gap: 20px; padding: 10px; }
.ac-h-h2-wide { margin: 8% 0 6%; }
.ac-h-h2-etapes { margin: 8% 0 6%; font-size: 38px; font-weight: 500; }
.ac-h-videos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 10px; }
.ac-h-videos .ac-h-video { width: 100%; }

/* Leurs six étapes sont six images de 244 × 174 posées bord à bord. `--su` vaut un pixel de
   cette image : la carte HTML reprend donc exactement leur dessin. */
.ac-h-steps {
  --su: calc((100vw - 20px) / 6 / 244);
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
  margin: 0; padding: 0; list-style: none;
}
.ac-h-step {
  aspect-ratio: 244 / 174; background: #fff;
  border: 1px solid #EF3D55; border-radius: calc(6 * var(--su));
  display: flex; flex-direction: column;
  padding: calc(28 * var(--su)) calc(16 * var(--su)) calc(20 * var(--su)) calc(26 * var(--su));
}
.ac-h-step-n {
  color: #EF3D55; font-size: calc(40 * var(--su)); font-weight: 700; line-height: 1;
  margin-bottom: calc(24 * var(--su));
}
.ac-h-step-t { color: #000; font-size: calc(14 * var(--su)); font-weight: 400; line-height: calc(20 * var(--su)); }
.ac-h-steps-dots { display: none; }

.ac-h-final { margin: 4% 0 3%; text-align: center; }
.ac-h-btn2 {
  display: inline-block; background: #EF3D55; color: #fff; border-radius: 3px;
  padding: 20px 23px; font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: -.4px;
  transition: filter .2s ease;
}
.ac-h-btn2:hover { filter: brightness(1.08); }

/* ═══ Seuils ═════════════════════════════════════════════════════════════════════════════
   Ceux d'la page d'origine : 1024 pour la grille des vidéos, 767 pour tout le reste. */
@media (max-width: 1024px) {
  .ac-h-videos { grid-auto-flow: row; }
}

@media (max-width: 768px) {
  /* Leur barre d'accueil échange le bouton « Rechercher » contre un carré-loupe à 768,
     comme le fait le composant sur la page des offres. */
  .ac-h-search .enso-search input[type="submit"] { display: none !important; }
  .ac-h-search .ac-msearch { display: inline-flex; }
}

@media (max-width: 767px) {
  .ac-h-hero-logo img { max-width: 70%; }
  .ac-h-hero-title { font-size: 6vw; }
  .ac-h-hero-lead { font-size: 4.1vw; }

  .ac-h-cta { flex-direction: column; align-items: center; }
  .ac-h-btn, .ac-h-cv { width: 92%; max-width: 92%; }

  .ac-h-search { width: 96%; max-width: 96%; }
  .ac-h-carousel { margin: 0; padding: 0; }

  /* ⚠️ L'accident du constructeur : leur grille retombe à une colonne et l'ordre du
     document empile les QUATRE pictogrammes, puis les QUATRE libellés. L'ordre d'affichage
     réapparie chaque picto avec le sien. Rien ne change au-dessus de 768. */
  .ac-h-stats { grid-template-columns: 1fr; grid-template-rows: none; width: 100%; }
  .ac-h-stat-icon, .ac-h-stat { order: var(--o); }
  .ac-h-stat-icon { align-self: center; }

  .ac-h-videos { grid-template-columns: 1fr; }

  /* Le panneau éditorial passe SOUS la photo et reprend des tailles lisibles : porté à
     l'échelle, leur texte mesurerait 7 px de haut sur un téléphone. */
  .ac-h-slide-ed { flex-direction: column; aspect-ratio: auto; }
  .ac-h-ed-photo { flex: 0 0 auto; aspect-ratio: 1000 / 550; }
  .ac-h-ed-text { padding: 24px 20px 44px; }
  .ac-h-ed-text h2 { font-size: 24px; line-height: 1.2; margin: 0 0 14px; letter-spacing: -.4px; }
  .ac-h-ed-text p { font-size: 15px; line-height: 1.5; text-align: left; }
  .ac-h-ed-num { position: static; margin-top: 14px !important; font-size: 14px !important; }
  /* Le panneau étant passé SOUS la photo, une flèche posée à mi-hauteur tomberait au milieu
     du texte. Les deux flèches rejoignent la rangée des pastilles, à leur taille de
     téléphone (15 px, la leur). */
  .ac-h-story { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
  .ac-h-story-view { flex: 0 0 100%; order: 1; }
  .ac-h-ed-prev, .ac-h-ed-next {
    position: static; transform: none; width: 15px; height: 15px;
  }
  .ac-h-ed-prev { order: 2; }
  .ac-h-ed-dots { order: 3; margin-top: 0; }
  .ac-h-ed-next { order: 4; }
  .ac-h-ed-prev svg, .ac-h-ed-next svg { width: 9px; height: 15px; }

  /* Leurs six étapes deviennent un rail qui se fait glisser au doigt, une carte par vue —
     leur comportement exact. Les pastilles sont ajoutées : sans elles, une bande intitulée
     « les étapes pour postuler » n'annonce QUE l'étape 01. */
  .ac-h-steps {
    /* La marge intérieure centre la première carte : sans elle le rail commence collé au
       bord gauche. Chez eux la carte est centrée dans une vue de la largeur de l'écran. */
    padding: 0 calc((100% - 244px) / 2);
    /* ⚠️ `--su` est une LONGUEUR, pas un nombre : `calc(20 * var(--su))` sur un `1` sans
       unité donne un interligne SANS unité — donc un multiplicateur, et une carte de 978 px
       de haut. Sur un téléphone la carte reprend ses cotes d'origine, un pixel pour un. */
    --su: 1px;
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .ac-h-steps::-webkit-scrollbar { display: none; }
  .ac-h-step { flex: 0 0 100%; scroll-snap-align: center; max-width: 244px; margin: 0 auto; }
  .ac-h-steps-dots { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
  .ac-h-steps-dots button {
    width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%;
    background: #000; opacity: .2; cursor: pointer; transition: opacity .3s;
  }
  .ac-h-steps-dots button.ac-on { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-h-slide, .ac-h-slide.ac-on, .ac-h-story-track { transition: none !important; }
  .ac-h-slide.ac-on { transform: none; }
}