/* Animjobs : version mobile (lot 1, 03/11/2026). Maquette : canevas « Animjobs mobile ».
   L'ordinateur n'est pas concerné : tout est sous media query, et les blocs ajoutés pour le mobile
   (.ajm-*) sont masqués par défaut. Le HTML des pages reste celui de 2001 : on le restyle sans le réécrire. */

.ajm-tete, .ajm-bienvenue, .ajm-recherche, .ajm-action { display: none; }

@font-face { font-family: "Nunito"; src: url("/other/mobile/fonts/nunito-latin.woff2") format("woff2");
  font-weight: 400 900; font-display: swap; }

@media (max-width: 760px) {
  :root {
    --orange: #F7990D; --orange-col: #F77710; --onglet: #E9730C; --sable: #FBD186; --creme: #FFFFCC;
    --violet: #811787; --rouge: #E1150B; --rouge-bouton: #D9120A; --bleu: #1F5AA6; --encre: #22180E;
    --brun: #6B5428; --filet: #F1D48A;
    --texte: Nunito, "Arial Rounded MT Bold", Arial, sans-serif; --titre: Nunito, "Arial Rounded MT Bold", Arial, sans-serif;
  }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0 !important; background: var(--sable) !important; font-family: var(--texte); color: var(--encre); }
  img { max-width: 100%; height: auto; }

  /* ---------- Header : bandeau rogné + burger ---------- */
  .ajm-tete { display: flex; align-items: center; justify-content: space-between; height: 60px;
    background: var(--orange); box-shadow: 0 3px 0 #E0650A; position: relative; z-index: 20; }
  .ajm-tete .ajm-logo { display: block; height: 60px; flex-shrink: 1; min-width: 0; }
  .ajm-tete .ajm-logo img { height: 60px; width: auto; max-width: none; display: block; }
  .ajm-menu > summary { list-style: none; cursor: pointer; width: 50px; height: 48px; margin-right: 10px;
    border-radius: 14px; background: rgba(255,255,255,.24); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px; font: 900 10px/1 var(--texte); letter-spacing: .6px; color: var(--encre); }
  .ajm-menu > summary::-webkit-details-marker { display: none; }
  .ajm-menu > summary .ajm-trait { display: block; width: 22px; height: 3px; border-radius: 2px; background: var(--encre); }
  .ajm-menu > summary .ajm-fermer { display: none; }
  .ajm-menu[open] > summary { background: var(--encre); color: #fff; }
  .ajm-menu[open] > summary .ajm-trait { display: none; }
  .ajm-menu[open] > summary .ajm-ouvrir { display: none; }
  .ajm-menu[open] > summary .ajm-fermer { display: block; }
  .ajm-menu[open] > summary .ajm-fermer::before { content: "\2715"; display: block; font-size: 18px; margin-bottom: 3px; }
  .ajm-panneau { position: absolute; left: 0; right: 0; top: 63px; background-color: var(--orange);
    padding: 18px 16px 120px; display: flex; flex-direction: column; gap: 18px; min-height: calc(100vh - 63px);
    box-sizing: border-box; background-image: url("/other/mobile/mascotte_joie.png"); background-repeat: no-repeat;
    background-position: right 6px bottom 0; background-size: 109px 112px; }
  .ajm-panneau .ajm-etiquette { align-self: flex-start; font: 900 13px var(--texte); padding: 4px 12px; border-radius: 10px; background: #fff; color: #C4500A; }
  .ajm-panneau .ajm-etiquette.ajm-bleu { background: var(--bleu); color: #fff; }
  .ajm-panneau .ajm-liste { background: #fff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
  .ajm-panneau .ajm-liste a { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 0 16px;
    border-top: 1px solid #F6E2BC; font: 800 18px var(--titre); color: var(--encre); text-decoration: none; }
  .ajm-panneau .ajm-liste a:first-child { border-top: 0; }
  .ajm-panneau .ajm-liste a::after { content: "\203A"; color: var(--onglet); font: 900 24px var(--texte); }
  .ajm-panneau .ajm-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
  .ajm-panneau .ajm-pastilles a { background: var(--sable); border-radius: 22px; padding: 0 14px; height: 40px; display: flex;
    align-items: center; font: 800 14px var(--texte); color: var(--encre); text-decoration: none; }
  .ajm-panneau .ajm-pied { display: flex; gap: 16px; font: 800 15px var(--texte); }
  .ajm-panneau .ajm-pied a { color: var(--encre); font: 800 15px var(--texte); }

  /* Header d'origine : le bandeau à carte cliquable disparaît ; les compteurs restent sur l'accueil seul. */
  .ajm-tete + table { width: 100% !important; }
  .ajm-tete + table table[bgcolor="#FBD186"] { display: none !important; }
  .ajm-tete:not(.ajm-tete--accueil) + table { display: none !important; }
  .ajm-tete--accueil + table table[bgcolor="#FFFFFF"] { width: 100% !important; background: #FFF3D1 !important; border-bottom: 1px solid var(--filet); }
  .ajm-tete--accueil + table table[bgcolor="#FFFFFF"] td { display: none; }
  .ajm-tete--accueil + table table[bgcolor="#FFFFFF"] tr { display: flex; justify-content: center; gap: 0 4px; flex-wrap: wrap; padding: 7px 12px; }
  .ajm-tete--accueil + table table[bgcolor="#FFFFFF"] td:nth-child(-n+3) { display: block; width: auto !important; }
  .ajm-tete--accueil + table table[bgcolor="#FFFFFF"] td:nth-child(-n+2)::after { content: " \00B7"; font: 700 13px var(--texte); color: #3A2A12; }
  .ajm-tete--accueil + table table[bgcolor="#FFFFFF"] font, .ajm-tete--accueil + table table[bgcolor="#FFFFFF"] b,
  .ajm-tete--accueil + table table[bgcolor="#FFFFFF"] a { font: 700 13px var(--texte) !important; color: #3A2A12 !important;
    text-decoration: none !important; pointer-events: none; }

  /* ---------- Coque : colonnes empilées, largeurs fluides ---------- */
  #maintable { width: 100% !important; border-spacing: 0; }
  #maintable > tbody > tr { display: flex; flex-direction: column; }
  #maintable > tbody > tr > td:first-child { display: none !important; }   /* menu de gauche : il est dans le burger */
  #maintable td, #maintable tr, #maintable table, #maintable tbody { display: block; width: auto !important; height: auto !important;
    box-sizing: border-box; }
  #maintable [style*="width"] { width: auto !important; max-width: 100%; }
  #maintable > tbody > tr > td { padding: 16px 16px 0 !important; }
  #maintable td, #maintable font, #maintable a, #maintable span, #maintable div, #maintable p, #maintable b, #maintable small, #maintable big {
    font-family: var(--texte) !important; font-size: 15px !important; line-height: 1.45 !important; }
  #maintable a { word-break: break-word; }
  input, select, textarea { font-size: 16px !important; max-width: 100%; box-sizing: border-box; }

  /* Bandeaux partenaires et images-titres d'origine (« Offres "Sélection" », « Offres + 5 jours »…) : pleine largeur */
  #maintable img[src*="bandeau_"], #maintable img[src*="haut_box"] { width: 100% !important; height: auto !important; display: block; }
  #maintable a > img[src*="bandeau_"] { border-radius: 12px; background: #fff; }
  /* Titres en onglet posés en image de fond de cellule (accueil) : on garde la proportion de l'image */
  #maintable td[background*="haut_box"] { background-size: 100% 100% !important; background-repeat: no-repeat; padding: 0 !important; }
  #maintable td[background*="haut_box_selection"] { aspect-ratio: 439 / 46; }
  #maintable td[background*="haut_box_plus_5jours"] { aspect-ratio: 439 / 29; }
  #maintable td[background*="haut_box"] * { display: none !important; }

  /* ---------- Accueil ---------- */
  /* Le tableau Bienvenue d'origine englobe toute la colonne (balises de 2001 non fermées) : seules ses deux
     premières lignes sont le bloc Bienvenue, remplacé par .ajm-bienvenue ; le reste (bandeaux, listes) reste affiché. */
  #maintable table[style*="accueilfond.gif"] { background-image: none !important; }
  #maintable table[style*="accueilfond.gif"] > tbody > tr:nth-child(-n+2) { display: none !important; }
  #maintable .ajm-bienvenue { display: flex; flex-direction: column; gap: 12px; background: var(--orange); border-radius: 20px; padding: 14px 14px 16px; margin-bottom: 18px; }
  #maintable .ajm-bienvenue .ajm-ligne-titre { display: flex; align-items: flex-end; justify-content: space-between; }
  #maintable .ajm-bienvenue .ajm-ligne-titre img { width: 54px; height: auto; }
  #maintable .ajm-bienvenue .ajm-ligne-titre img + span + img { width: 47px; }
  #maintable .ajm-bienvenue .ajm-ligne-titre span { font: 800 34px/1 var(--titre) !important; color: var(--encre); margin-bottom: 4px; }
  #maintable .ajm-bienvenue .ajm-ligne-titre span i { font-style: normal; color: #F8180C; }
  #maintable .ajm-bienvenue a.ajm-tuile { display: flex; flex-direction: column; gap: 8px; border-radius: 16px; padding: 16px; color: #fff !important;
    text-decoration: none !important; -webkit-font-smoothing: antialiased; }
  #maintable .ajm-tuile--candidats { background: var(--rouge); }
  #maintable .ajm-tuile--recruteurs { background: var(--violet); }
  #maintable .ajm-tuile .ajm-tag { align-self: flex-start; background: #fff; font: 900 13px var(--texte) !important; padding: 4px 10px; border-radius: 10px; }
  #maintable .ajm-tuile--candidats .ajm-tag { color: #C4110A; }
  #maintable .ajm-tuile--recruteurs .ajm-tag { color: var(--violet); }
  #maintable .ajm-tuile .ajm-grand { font: 800 21px/1.2 var(--titre) !important; }
  #maintable .ajm-tuile .ajm-desc { font: 600 15px/1.45 var(--texte) !important; }
  #maintable .ajm-tuile .ajm-entree { font: 900 16px var(--texte) !important; }

  /* Listes de l'accueil : une ligne date | titre devient une carte (titre, puis date) */
  #maintable tr[bgcolor="#FBD186"], #maintable tr[bgcolor="#FFFFCC"] { display: flex !important; flex-direction: column;
    padding: 12px 14px; border-top: 1px solid var(--filet); background: var(--creme) !important; }
  #maintable tr[bgcolor] > td { text-align: left !important; padding: 0 !important; }
  #maintable tr[bgcolor] > td[width="15%"] { order: 2; }
  #maintable tr[bgcolor] > td[width="15%"] font { font-size: 13px !important; font-weight: 600; color: var(--brun) !important; }
  #maintable tr[bgcolor] > td[width="85%"] a { font-weight: 800; color: var(--encre); text-decoration: none; }
  #maintable table[width="440px"] { border-radius: 0 0 16px 16px; overflow: hidden; margin-bottom: 18px; }

  /* « Ils recrutent » (colonne de droite) : sous les formations, en grille de 3 */
  #maintable td[bgcolor="#F77711"][width="131px"] { background: transparent !important; padding: 0 !important; }
  #maintable td[bgcolor="#F77711"][width="131px"] > table { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #maintable td[bgcolor="#F77711"][width="131px"] > table > tbody,
  #maintable td[bgcolor="#F77711"][width="131px"] > table > tbody > tr { display: contents !important; }
  #maintable td[bgcolor="#F77711"][width="131px"] td { background: #fff; border-radius: 12px; height: 72px !important;
    display: flex !important; align-items: center; justify-content: center; padding: 6px !important; }
  #maintable td[bgcolor="#F77711"][width="131px"] img { max-height: 60px; width: auto; }
  #maintable table[width="131px"] td[style*="ilsrecrutent.gif"] { height: 33px !important; width: 131px !important; margin-top: 8px; }

  /* ---------- Barres-titres en images de fond (« Offres 1 à 32 », « Détails de l'offre ») ---------- */
  #maintable td[background*="arrond"], #maintable td[background*="fondbarre"] { display: none !important; }
  #maintable td[background*="barre_centre"] { background: var(--onglet) !important; border-radius: 14px; padding: 10px 16px !important;
    text-align: left !important; margin-bottom: 12px; }
  #maintable td[background*="barre_centre"] font { font: 800 18px/1.2 var(--titre) !important; color: #fff !important; }

  /* ---------- Liste des offres ---------- */
  #maintable tr[bgcolor="#FF9224"] { display: none !important; }                 /* en-tête Titre / Structure / Lieu */
  #maintable tr:has(> td > a.search) { display: none !important; }               /* Recherche avancée + pagination */
  #maintable tr[bgcolor] > td[width="2%"] { display: none !important; }

  /* ---------- Fiche offre : tableau Date / Lieu / Type / Référence en paires libellé : valeur ---------- */
  #maintable table:has(> tbody > tr[style*="#FF9224"] > td[width="18%"]) { display: grid !important;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 6px 12px; background: var(--creme); border-radius: 14px; padding: 12px 14px; }
  #maintable table:has(> tbody > tr[style*="#FF9224"] > td[width="18%"]) > tbody,
  #maintable table:has(> tbody > tr[style*="#FF9224"] > td[width="18%"]) > tbody > tr { display: contents !important; }
  #maintable tr[style*="#FF9224"]:has(> td[width="18%"]) > td font { color: var(--brun) !important; font-size: 13px !important; }
  #maintable tr[style*="#FF9224"]:has(> td[width="18%"]) > td:nth-child(1) { order: 1; }
  #maintable tr[style*="#FF9224"]:has(> td[width="18%"]) + tr > td:nth-child(1) { order: 2; }
  #maintable tr[style*="#FF9224"]:has(> td[width="18%"]) > td:nth-child(2) { order: 3; }
  #maintable tr[style*="#FF9224"]:has(> td[width="18%"]) + tr > td:nth-child(2) { order: 4; }
  #maintable tr[style*="#FF9224"]:has(> td[width="18%"]) > td:nth-child(3) { order: 5; }
  #maintable tr[style*="#FF9224"]:has(> td[width="18%"]) + tr > td:nth-child(3) { order: 6; }
  #maintable tr[style*="#FF9224"]:has(> td[width="18%"]) > td:nth-child(4) { order: 7; }
  #maintable tr[style*="#FF9224"]:has(> td[width="18%"]) + tr > td:nth-child(4) { order: 8; }
  #maintable tr[style*="#FF9224"]:has(> td[width="18%"]) + tr > td { font-weight: 800; }
  /* autres cellules du même tableau (bandeau Formation Animation…) : après les quatre paires, sur toute la largeur */
  #maintable table:has(> tbody > tr[style*="#FF9224"] > td[width="18%"]) > tbody > tr:not([style*="#FF9224"]):not([style*="#FF9224"] + tr) > td {
    order: 9; grid-column: 1 / -1; }
  #maintable tr:has(> td[colspan="5"]):not(:has(img, a)) { display: none !important; }   /* ligne vide (bandeau commenté) */
  #maintable .ajm-recherche { display: flex; flex-direction: column; gap: 10px; background: var(--creme); border-radius: 16px; padding: 14px;
    margin-bottom: 16px; box-shadow: 0 2px 0 #E9B95A; }
  #maintable .ajm-recherche label { font: 900 15px var(--texte); }
  #maintable .ajm-recherche .ajm-champ { display: flex; gap: 8px; }
  #maintable .ajm-recherche input[type="search"] { flex-grow: 1; min-width: 0; height: 48px; border: 2px solid var(--orange-col); border-radius: 14px;
    padding: 0 14px; font: 600 16px var(--texte) !important; background: #fff; color: var(--encre); }
  #maintable .ajm-recherche button { width: 48px; height: 48px; flex-shrink: 0; border: 0; border-radius: 14px; background: var(--encre); color: #fff;
    display: flex; align-items: center; justify-content: center; }

  /* ---------- Fiche offre : barre d'action collée en bas ---------- */
  .ajm-action { display: flex; flex-direction: column; gap: 2px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
    padding: 12px 16px 6px; background: #FFF3D1; border-top: 2px solid var(--filet); }
  body.ajm-fiche { padding-bottom: 120px; }
  .ajm-action .ajm-postuler { height: 52px; border-radius: 16px; background: var(--rouge-bouton); color: #fff; display: flex;
    flex-direction: column; align-items: center; justify-content: center; text-decoration: none; -webkit-font-smoothing: antialiased; }
  .ajm-action .ajm-postuler b { font: 800 18px/1.1 var(--titre); }
  .ajm-action .ajm-postuler small { font: 700 12px/1.2 var(--texte); opacity: .92; }
  .ajm-action .ajm-partager { align-self: center; min-height: 40px; display: flex; align-items: center; font: 800 14px var(--texte); color: var(--encre); }
  a[href="javascript:window.print();"] { display: none !important; }        /* Imprimer : inutile sur un téléphone */

  /* ---------- Pied de page ---------- */
  #maintable ~ table { width: 100% !important; }
  #maintable ~ table td, #maintable ~ table font, #maintable ~ table a { font-family: var(--texte) !important; font-size: 13px !important; line-height: 1.8 !important; }
  #maintable ~ table td[height="40"] { height: 16px !important; }
}