/* ═══════════════════════════════════════════════════════════════════════════════════════
   ACASS — feuille de la page des offres.

   TOUT vient d'emploi.acass.fr — le corps comme le chrome. Le site n'a PAS de barre du
   haut : ses pages commencent par leur propre bandeau, et son seul élément de chrome est le
   pied (bandeau indigo #383578, logo, signature, réseaux, deux liens légaux).

   Ses seuils sont ceux d'la page d'origine (1024 / 767) pour la mise en page et ceux du
   composant d'offres (1330 / 768) pour le listing ; sa police est Roboto et son indigo
   #464396 pour le corps, #383578 pour le pied.

   Le produit, lui, bascule à 900 px : la plage 769–900 est rendue ici pour que le tiroir de
   filtres s'ouvre au même seuil que chez eux (768).
   ═══════════════════════════════════════════════════════════════════════════════════════ */

:root {
  --ac-badge: #464396;
  --ac-cta: #EF3D55;
  --ac-page: #F5F4FA;
  --ac-yellow: #F0D055;
  --ac-footer: #383578;

  /* La pile du thème de la page carrière, mot pour mot. Roboto y est chargée, donc c'est
     Roboto qui peint dès qu'aucune police système Apple ou Microsoft n'existe. */
  --ac-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
             "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
             "Noto Color Emoji";
  --ac-roboto: "Roboto", sans-serif;
  /* ⚠️ « Red Hat Display » n'est PAS auto-hébergée : la feuille du composant la demande, mais
     la page d'origine ne la charge nulle part et rend donc en Arial. La déclarer sans la
     servir reproduit exactement leur rendu. → assets/acass/fonts.css */
  --ac-listing: "Red Hat Display", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: #fff; color: #000;
  font-family: var(--ac-body); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

.ac-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100002;
  background: var(--ac-badge); color: #fff; padding: 10px 18px; border-radius: 0 0 6px 0;
}
.ac-skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ═══ BANDEAU DE PAGE ════════════════════════════════════════════════════════════════════
   Conteneur pleine largeur : photo en fond, voile noir à 50 %, 50 vh de haut au moins.
   Sous 768 le minimum tombe à 130 px — c'est le contenu qui le dépasse. */
.ac-hero {
  position: relative; display: flex; flex-direction: column;
  justify-content: center; align-items: center; min-height: 50vh;
  background: url('/assets/acass/hero.webp') center center / cover no-repeat;
}
.ac-hero::before { position: absolute; inset: 0; content: ''; background: #000; opacity: .5; }
.ac-back {
  position: absolute; top: 75px; left: 75px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8.8px;
  background: #fff; padding: 9px 14px 9px 9px; border: 1px solid var(--ac-badge);
  border-radius: 100px; transition: box-shadow .2s ease, transform .2s ease;
}
.ac-back:hover { box-shadow: 0 6px 16px rgba(70, 67, 150, .28); transform: translateY(-1px); }
.ac-back svg { display: block; width: 35px; height: 35px; flex: 0 0 auto; }
/* Leur pilule mesure 146,8 px : 9 de marge, le glyphe de 35, 8,8 d'écart, puis le libellé —
   qui porte lui-même 5 px de marge intérieure à gauche — et 14 de marge à droite. */
.ac-back span {
  font-family: "Inter", sans-serif; font-size: 20px; font-weight: 600; line-height: 30px; color: #000;
  padding-left: 5px;
  /* Leur Inter vient de l'API v1 de Google, qui sert l'instance statique : sans cela la
     taille optique automatique du fichier variable rend « Accueil » 5 px trop étroit. */
  font-optical-sizing: none;
}
/* Leur conteneur intérieur porte `--flex-grow:1` : il REMPLIT le bandeau, si bien que ses
   30 px de marge haute placent la marque à 30 px du bord et non au milieu du vide. */
.ac-hero-inner {
  position: relative; z-index: 1; width: 100%; flex: 1 0 auto;
  display: flex; flex-direction: column; align-items: center; padding: 30px 0;
}
.ac-hero-logo { display: block; line-height: 0; }
.ac-hero-logo img { width: 360px; max-width: 100%; height: auto; display: block; }
.ac-hero-title {
  margin: 120px 0 0; font-family: var(--ac-roboto); font-size: 60px; font-weight: 700;
  line-height: 60px; color: #fff;
}

/* ═══ CORPS ══════════════════════════════════════════════════════════════════════════════
   la page d'origine : conteneur plafonné à 1140 px, 10 px de marge intérieure à chaque niveau. */
.ac-body { background: var(--ac-page); padding: 0 10px; }
.ac-inner { max-width: 1140px; margin: 0 auto; }
/* Les trois respirations verticales du corps, relevées chez eux : 65 px entre le haut de la
   bande et le pavé de CV, 75 px entre ce pavé et la barre de recherche, 80 px entre la
   pagination et le bandeau jaune. Ce sont leurs espaceurs la page d'origine PLUS l'écart de 20 px que
   leur kit met sous chaque widget — les additionner ici évite d'imbriquer quatre conteneurs
   pour retrouver la même somme. */
.ac-spacer { height: var(--s, 20px); }

.ac-cvgrid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: center; padding: 0 10px; }
.ac-cvtitle {
  margin: 0; font-family: var(--ac-roboto); font-size: 40px; font-weight: 700; line-height: 40px;
  color: #000;
}
.ac-cvtitle span { color: var(--ac-badge); }

/* ── Zone de dépôt du CV ───────────────────────────────────────────────────────────────
   Chez eux c'est un pavé indigo plein, pas le rectangle en pointillés du produit. */
.enso-cv-upload-main {
  background: var(--ac-badge); color: #fff; border: none; border-radius: 10px;
  padding: 24px; line-height: 24px; height: 200px;
  transition: filter .2s ease, box-shadow .2s ease;
}
.enso-cv-upload-main:hover { filter: brightness(1.06); box-shadow: 0 10px 24px rgba(70, 67, 150, .25); }
.enso-cv-upload-main.enso-dragging { background: #363392; }
/* ⚠️ Le glyphe du cœur porte `style="width:24px;height:24px"` EN LIGNE : seule une déclaration
   `!important` le ramène aux 50 px de leur page. */
.enso-cv-upload-main svg { width: 50px !important; height: 50px !important; min-height: 0; fill: #fff; }
.enso-cv-upload-main .enso-cv-upload-text {
  width: 80%; color: #fff; margin: 0; font-size: 16px; line-height: 24px;
}
.enso-cv-upload-main .enso-filename { color: #fff; }

/* ═══ LISTING — les écarts entre le produit et leur composant ════════════════════════════ */
/* ⚠️ Deux polices cohabitent chez eux, et la frontière est le FORMULAIRE du listing :
   `#jobs-listing-container form` pose « Red Hat Display » sur la recherche, les filtres, les
   cartes et les fenêtres ; tout ce qui est en dehors (le pavé de dépôt de CV, le chatbot, le
   bouton spontané autonome) reste sur la pile du thème, donc sur Roboto. */
.enso, .enso-onepage { font-family: var(--ac-body); }
.enso-listing, .enso-listing *, .enso-popup, .enso-popup * { font-family: var(--ac-listing); }
.enso-badge, .enso-badge * { font-family: sans-serif; }
/* Leur pastille : 6 px de rayon, 6/9 de marge, 0,9 rem, et le texte en `sans-serif` — c'est
   ce que leur feuille écrit, pas la police du listing. */
.enso-badge {
  padding: 6px 9px; border-radius: 6px; font-size: .9rem; line-height: 1.2;
  font-family: sans-serif;
}
.enso-btn { border-radius: 6px; }
.enso-search .enso-btn { font-size: 20px; }
/* Leur champ de recherche fait 40 px de haut (8/16 de marge intérieure, interligne 24) et
   leur bouton-loupe du téléphone 36 (interligne nul, marge de 10, glyphe de 16) — d'où une
   barre de 84 px sous 768 et non 96. */
.enso-search-field input { padding: 8px 16px; line-height: 24px; height: 40px; }
.enso-search .enso-btn.enso-visible-mobile { line-height: 0; padding: 10px; }
.enso-search .enso-btn.enso-visible-mobile svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .enso-search-fields { margin-right: 20px; } }
/* Leur glyphe de dépôt se laisse comprimer quand la phrase ne laisse plus 50 px : sur un
   téléphone il tombe à 32, comme chez eux. */
.enso-cv-upload-main .enso-cv-upload-text { flex: 0 0 auto; }
/* Leur barre de recherche : 20 px de marge, cadre noir de 2 px, ombre portée grise. */
.enso-results-column { gap: 32px; }
.enso-results-column .enso-title { font-size: 20px; }
/* Leurs interlignes sont ceux du composant (1,2 ou une valeur fixe), pas le 1,5 du corps.
   Et leurs deux titres de filtre sont des `h3`/`h4` : ce sont leurs MARGES de titre — que le
   cœur, qui dessine des `div`, n'a pas — qui donnent à la colonne sa hauteur. Sans elles la
   liste des filtres remontait de 8 px par groupe et de 64 px au troisième. */
.enso-filters-title .enso-title { line-height: 24px; margin: 0 0 16px; }
.enso-filter-title { line-height: 1.2; margin: 8px 0 16px; }
.enso-check, .enso-check div { line-height: 16px; }
/* Leur pagination reprend l'encre des filtres, pas le gris du produit, et ne porte pas les
   8 px de marge haute du produit. */
.enso-pagination { margin-top: 0; }
.enso-pagination span { color: var(--enso-filter-color, #333); }
/* ⚠️ Leurs deux boutons spontanés n'ont pas le même écart entre l'éclair et le libellé : la
   version du listing porte `<i>&nbsp; libellé` (249,1 px), l'autonome `<i> libellé` (238).
   Le glyphe vient du cœur avec 9 px ; l'écart, lui, se règle ici. */
.enso-listing .enso-spontaneous .enso-btn-icon { margin-right: 13.3px; }
.ac-cta-spontaneous .enso-btn-icon { margin-right: 2.2px; }
/* Leur filet sous « Offres » est une boîte de hauteur nulle CERCLÉE de 1 px : elle mesure
   donc 2 px, pas 1. */
.enso-results-column .enso-hr { border-bottom: 1px solid var(--enso-line); }
/* Leur rangée d'en-tête de carte fait 24 px — la hauteur que prend un SVG en ligne dans un
   interligne de 21 — et ses deux blocs y sont alignés en HAUT, pas centrés. Trois pixels par
   carte, soit trente sur une page de dix. */
.enso-job-result .enso-column > .enso-line:first-child { align-items: flex-start; min-height: 24px; }
.enso-job-result .enso-column > .enso-line:first-child > .enso-line { align-items: flex-start; }
/* Leur épingle de lieu de la barre de recherche fait 12 px, pas 16. */
.enso-search-field.enso-hidden-mobile svg { width: 12px; height: 12px; }
.enso-job-result { border: none; box-shadow: none; }
.enso-job-result:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
/* ⚠️ Une pastille porte `enso-line`, donc `align-self: stretch` — dans le pied de carte, où
   le bouton « Consulter » fait 52 px, elle s'étirait à 52 au lieu de ses 29,3. */
.enso-job-foot .enso-badges, .enso-job-foot .enso-badge { align-self: flex-start; }
/* Leur volet replié est `display: none` : replié en `max-height: 0`, il reste un élément de
   la colonne et lui prend un écart de 12 px, ce qui rallongeait chaque carte d'autant. */
.enso-job-infos-wrapper:not(.enso-open) { display: none; }
.enso-job-infos-wrapper.enso-open { max-height: none; animation: ac-unfold .3s ease; }
@keyframes ac-unfold { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Le tiroir de filtres du composant bascule à 900 px ; le leur à 768. La plage 769–900 est
   rendue ici pour que les deux pages changent d'état à la même largeur. */
@media (min-width: 769px) and (max-width: 900px) {
  .enso-result-container { flex-direction: row; }
  .enso-filters {
    display: inline-flex; position: static; width: 28%; height: auto; overflow: visible; padding: 0;
  }
  .enso-results-column { width: 67%; }
  .enso-hidden-mobile { display: initial !important; }
  .enso-line.enso-hidden-mobile, .enso-search-field.enso-hidden-mobile { display: flex !important; }
  a.enso-btn.enso-hidden-mobile, input.enso-btn.enso-hidden-mobile { display: inline-block !important; }
  .enso-visible-mobile, .enso-visible-mobile-flex { display: none !important; }
  .enso-search-sep.enso-hidden-mobile { display: block !important; }
  .enso-search-fields { margin-right: 20px; }
}
/* Sous 768 leur rangée de pastilles devient une COLONNE (`flex-column-mobile`) : une pastille
   par ligne, calées à gauche. Sans cela la carte perd ~57 px sur un téléphone. */
@media (max-width: 768px) {
  .enso-badge { align-self: flex-start; width: auto; }
  .enso-job-foot .enso-badges, .enso-job-result .enso-job-details {
    flex-direction: column; align-items: flex-start;
  }
}
/* Leur bouton « Filtres » du téléphone porte l'encre des filtres, pas le blanc des boutons,
   et fait 52 px de haut : chez eux le pictogramme est enveloppé dans un bloc que l'interligne
   de 24 porte à 32, plus 10 de marge de chaque côté. */
.enso-mobile-filters-open {
  color: var(--enso-filter-color, #333) !important; align-items: flex-start; min-height: 52px;
}

/* ═══ BANDEAU « DÉJÀ CANDIDAT » ══════════════════════════════════════════════════════════ */
.ac-cta { background: var(--ac-yellow); padding: 0 10px; }
/* Leur conteneur intérieur porte 10 px de marge haute et basse ; la colonne, elle, est une
   COLONNE FLEX à écart de 20 px — c'est cet écart, et non des marges de titre, qui sépare le
   titre, l'espaceur, le chatbot et la seconde phrase. */
.ac-cta-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 10px 0; }
.ac-cta-col { width: 73%; padding: 50px 20px; display: flex; flex-direction: column; gap: 20px; }
.ac-cta-title {
  margin: 0; font-family: var(--ac-roboto); font-size: 32px; font-weight: 500;
  line-height: 32px; color: #000; text-align: center;
}
.ac-cta-col .enso-chatbot-row { margin-top: 0; flex-wrap: nowrap; }
.ac-cta-col .enso-chatbot-email {
  border: 0; border-radius: 6px; padding: 8px 16px; height: 40px; font-size: 16px; line-height: 24px;
}
/* Leur bouton d'envoi porte le libellé seul sur un écran large et l'icône seule sous 768 —
   le cœur dessine toujours les deux. */
.ac-cta-col .enso-chatbot-send svg { display: none; }
.ac-cta-title a { color: var(--ac-cta); text-decoration: underline; cursor: pointer; }
.ac-cta-spontaneous { margin: 0 50px 50px; }
/* Le bouton spontané autonome sort en 300 × 96 avec une ombre portée bleue codée en dur dans
   la feuille du cœur : ici c'est la pilule corail de leur page. */
.ac-cta-spontaneous .enso-btn-spontaneous {
  width: auto; height: auto; padding: 10px 24px; border: none; border-radius: 6px;
  box-shadow: none; font-family: var(--ac-listing); font-size: 16px; font-weight: 700;
  line-height: 32px; background: var(--ac-cta); color: #fff;
}

/* ═══ PIED — emploi.acass.fr ═════════════════════════════════════════════════════════════
   Le pied du SITE CARRIÈRE, pas celui du site de marque : bandeau indigo #383578, logo
   centré, la signature « Notre job c'est trouver le vôtre ! », trois réseaux, deux liens
   légaux, la ligne de copyright. Valeurs relevées dans LEUR feuille (le gabarit de pied
   d'origine) et vérifiées sur la page rendue :

   • conteneur : 10 px de marge latérale, intérieur borné par le kit (1140 / 1024 sous 1025 /
     767 sous 768), 10 px de marge haute et basse, écart de 20 px entre les blocs ;
   • le logo est une IMAGE en pourcentage — 15 % de la largeur de son bloc, 42 % sous 768 ;
   • la signature est du Roboto 600 italique de 32 px, interligne 1 ;
   • un réseau est un carré de 42 (glyphe de 34 + 4 de marge), fond #F0D055, encre #FFF8DD,
     rayon 10 % (leur `elementor-shape-rounded`), 12 px d'écart ;
   • les deux entretoises font 1,2 rem, 0,5 rem sous 768 ;
   • la rangée légale est `space-evenly`, ses libellés soulignés en 500 de 1 rem (0,8 sous
     768) ; la ligne du bas est du 600 de 1 rem, centré. */
.ac-footer { background: var(--ac-footer); color: #fff; font-family: var(--ac-roboto); padding: 0 10px; }
.ac-footer a { color: inherit; }
.ac-footer-inner {
  max-width: 1140px; margin: 0 auto; padding: 10px 0;
  display: flex; flex-direction: column; gap: 20px;
}
/* Leur bloc de logo est un conteneur à part entière : il porte ses 10 px à lui, d'où les
   1 120 px utiles à 1 440 dont le logo prend 15 %. Le retirer rétrécirait le logo de 3 px. */
.ac-footer-logo { padding: 10px; display: flex; flex-direction: column; gap: 20px; }
.ac-footer-logo > div { text-align: center; }
.ac-footer-logo img { display: inline-block; width: 15%; height: auto; vertical-align: middle; }

.ac-footer-claim {
  margin: 0; text-align: center; color: #fff;
  font-family: var(--ac-roboto); font-size: 32px; line-height: 1; font-weight: 600; font-style: italic;
}

.ac-socials { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 12px; row-gap: 0; }
.ac-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 4px; border-radius: 10%;
  background: var(--ac-yellow); color: #FFF8DD;
  transition: filter .18s ease, transform .18s ease;
}
.ac-social:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ac-social svg { display: block; width: 34px; height: 34px; fill: currentColor; }

/* Leurs deux entretoises sont des widgets à part : elles s'ajoutent aux 20 px d'écart du
   conteneur, ce qui donne les 39,2 px qui séparent les réseaux de la rangée légale. */
.ac-footer-gap { height: 1.2rem; }

.ac-footer-legal {
  padding: 10px; display: flex; flex-direction: row; gap: 20px;
  justify-content: space-evenly; align-items: center;
}
.ac-footer-legal > p {
  margin: 0; font-size: 1rem; line-height: 1; font-weight: 500; text-decoration: underline;
}
.ac-footer-legal > p > a { text-decoration: inherit; }

.ac-footer-copy {
  margin: 0; text-align: center; font-size: 1rem; line-height: 1; font-weight: 600;
}

/* Le seuil du gabarit de pied est celui du kit : 767. */
@media (max-width: 767px) {
  .ac-footer-inner { flex-wrap: wrap; }
  .ac-footer-logo { flex-wrap: wrap; }
  .ac-footer-logo img { width: 42%; }
  .ac-footer-gap { height: .5rem; }
  .ac-footer-legal { flex-wrap: wrap; }
  .ac-footer-legal > p { font-size: .8rem; }
}
@media (max-width: 1024px) {
  .ac-footer-inner { max-width: 1024px; }
}
@media (max-width: 767px) {
  .ac-footer-inner { max-width: 767px; }
}

/* ═══ SEUILS DU CORPS — ceux d'la page d'origine (1024 / 767) ════════════════════════════════════ */
@media (max-width: 767px) {
  .ac-hero { min-height: 130px; }
  .ac-hero-title { font-size: 30px; line-height: 30px; }
  .ac-cvgrid { grid-template-columns: 1fr; }
  .ac-cvtitle { font-size: 35px; }
  .ac-cta-col { width: 100%; }
  .ac-cta-title { font-size: 24px; line-height: 24px; }
  .ac-cta-col .ac-spacer { height: 1px; }
  .ac-cta-spontaneous { margin: 0 20px 50px; }
}
/* ⚠️ Leur pilule « Accueil » ne bouge à AUCUNE largeur : 75/75 et 20 px de libellé, du 1920
   au 390. Elle tient dans les 390 px d'un téléphone (146,8 de large) — la déplacer aurait été
   une invention. */

/* ⚠️ Le bouton d'envoi du chatbot bascule au seuil du COMPOSANT (768), pas à celui
   d'la page d'origine (767) : à 768 pile, leur titre est encore en 32 px et leur envoi déjà réduit à
   son carré. Mélanger les deux seuils décalait le bandeau de 43 px à cette largeur. */
@media (max-width: 768px) {
  .ac-cta-col .enso-chatbot-send { font-size: 0; line-height: 0; padding: 8px; flex: 0 0 auto; }
  .ac-cta-col .enso-chatbot-send svg { display: block; width: 25px; height: 25px; }
}