/* Formation Animation : version mobile (04/11/2026). Maquette : canevas « Formation Animation mobile ».
   L'ordinateur n'est pas concerné : tout est sous media query, et les blocs ajoutés pour le mobile (.fam-*)
   sont masqués par défaut. Le HTML d'origine est restylé sans être réécrit (outils/mise_en_page_fa.py). */

.fam-tete, .fam-compteurs, .fam-accueil, .fam-action, .fam-pub, .fam-barre, .fam-mobile, tr.fam-mois, .fam-une, .fam-orga { 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 { --bleu: #0068B5; --bleu-fonce: #004C85; --anis: #BFD45F; --anis-pale: #F3F7E1; --bleu-pale: #E8F1FA;
    --encre: #1A2433; --gris: #4A5560; --olive: #5E6B2A; --filet: #E1EAC6; --texte: Nunito, Arial, sans-serif; }
  html, body { -webkit-text-size-adjust: 100%; overflow-x: hidden; max-width: 100%; }
  body { margin: 0 !important; background: var(--anis-pale) !important; font-family: var(--texte); color: var(--encre); }
  img { max-width: 100%; height: auto; }
  .fam-mobile { display: inline; }
  .fam-bureau, .fam-selection { display: none !important; }
  .fam-entete-orig, #maintable > tbody > tr > td[width="20%"]:first-child { display: none !important; }

  /* ---------- Header : logo + burger ---------- */
  .fam-tete { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 8px 10px; background: #fff;
    border-bottom: 4px solid var(--anis); position: relative; z-index: 20; }
  .fam-tete .fam-logo img { display: block; width: 216px; height: auto; }
  .fam-menu > summary { list-style: none; cursor: pointer; width: 54px; height: 50px; border-radius: 14px; background: var(--bleu);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: 900 10px/1 var(--texte);
    letter-spacing: .6px; color: #fff; }
  .fam-menu > summary::-webkit-details-marker { display: none; }
  .fam-menu > summary .fam-trait { display: block; width: 22px; height: 3px; border-radius: 2px; background: #fff; }
  .fam-menu > summary .fam-fermer { display: none; }
  .fam-menu[open] > summary { background: var(--anis); color: var(--encre); }
  .fam-menu[open] > summary .fam-trait, .fam-menu[open] > summary .fam-ouvrir { display: none; }
  .fam-menu[open] > summary .fam-fermer { display: block; }
  .fam-menu[open] > summary .fam-fermer::before { content: "\2715"; display: block; font-size: 18px; margin-bottom: 3px; }
  .fam-panneau { position: absolute; left: 0; right: 0; top: 100%; background: var(--bleu); color: #fff; padding: 18px 16px 40px;
    display: flex; flex-direction: column; gap: 18px; min-height: 100vh; box-sizing: border-box; }
  .fam-panneau .fam-onglets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fam-panneau .fam-onglets a { height: 48px; border-radius: 12px; background: rgba(255,255,255,.14); color: #fff; font: 900 16px var(--texte);
    text-decoration: none; display: flex; align-items: center; justify-content: center; }
  .fam-panneau h2 { margin: 0 0 4px; font: 900 14px var(--texte); letter-spacing: .8px; text-transform: uppercase; color: var(--anis); }
  .fam-panneau .fam-liens { display: flex; flex-direction: column; }
  .fam-panneau .fam-liens a { min-height: 42px; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.18);
    color: #fff; font: 700 16.5px var(--texte); text-decoration: none; }
  .fam-panneau .fam-liens a:last-child { border-bottom: 0; }
  .fam-compteurs { display: block; margin: 0; background: var(--bleu); color: #fff; font: 600 12.5px var(--texte); text-align: center; padding: 6px 8px; }

  /* ---------- Coque : colonne unique ---------- */
  #maintable { width: 100% !important; border-spacing: 0; }
  #maintable > tbody > tr { display: flex; flex-direction: column; }
  #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 table[align] { float: none !important; margin-left: 0 !important; margin-right: 0 !important; }   /* align="right" d'époque = flottant */
  #maintable > tbody > tr > td { padding: 14px 16px 0 !important; }
  #maintable td, #maintable font, #maintable a, #maintable span, #maintable div, #maintable p, #maintable b, #maintable li {
    font-family: var(--texte) !important; font-size: 15px !important; line-height: 1.45 !important; }
  #maintable a, #maintable span, #maintable td { white-space: normal !important; overflow-wrap: anywhere; }
  input, select, textarea { font-size: 16px !important; max-width: 100%; box-sizing: border-box; }
  #maintable td.headertdjob { background: transparent !important; text-align: left !important; padding: 4px 0 10px !important;
    font: 900 24px/1.2 var(--texte) !important; color: var(--encre); }
  #maintable td.headertdjob img[src*="puce.gif"] { display: none; }
  #maintable td.headertdjob h1 { font: 900 24px/1.2 var(--texte) !important; margin: 0; }

  /* ---------- Accueil ---------- */
  #maintable img[src*="vignette-home"], #maintable img[src*="home-animation-formation_27"], #maintable img[src*="home-animation-formation_31"],
  #maintable img[src*="home-animation-formation_33"], #maintable map { display: none !important; }
  .fam-accueil { display: flex; flex-direction: column; gap: 18px; margin-bottom: 20px; }
  .fam-accueil .fam-hero { position: relative; background: #fff; margin: -14px -16px 0; padding: 20px 16px 18px; overflow: hidden; min-height: 150px; }
  .fam-accueil .fam-hero img { position: absolute; right: -6px; top: 6px; width: 128px; height: auto; }
  .fam-accueil .fam-hero h1 { margin: 0; width: 225px; font: 900 26px/1.12 var(--texte) !important; color: var(--bleu); }
  .fam-accueil .fam-hero p { margin: 6px 0 0; width: 215px; font: 700 14px/1.4 var(--texte) !important; color: var(--olive); }
  .fam-cherche { background: #fff; border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px;
    box-shadow: 0 3px 0 var(--anis), 0 8px 22px rgba(0,104,181,.10); }
  .fam-cherche h2 { margin: 0; font: 900 19px var(--texte) !important; }
  .fam-choix { display: flex; gap: 8px; }
  .fam-choix label, .fam-etapes label { position: relative; }
  .fam-choix input, .fam-etapes input { position: absolute; opacity: 0; pointer-events: none; }
  .fam-choix label { flex: 1; }
  .fam-choix span { height: 44px; border-radius: 12px; background: var(--bleu-pale); color: var(--bleu); font: 900 15px var(--texte) !important;
    display: flex; align-items: center; justify-content: center; text-align: center; }
  .fam-choix input:checked + span { background: var(--bleu); color: #fff; }
  .fam-champs { display: flex; gap: 8px; }
  .fam-champ { flex: 1; display: flex; flex-direction: column; gap: 4px; font: 800 13px var(--texte) !important; color: var(--gris); }
  .fam-champ select, .fam-champ input { height: 46px; border-radius: 12px; border: 2px solid #D5DFC0; background: #fff;
    font: 700 15px var(--texte) !important; color: var(--encre); padding: 0 8px; width: 100%; }
  .fam-cherche button, .fam-boutons button { height: 52px; border: 0; border-radius: 14px; background: var(--bleu); color: #fff;
    font: 900 18px var(--texte); box-shadow: 0 3px 0 var(--bleu-fonce); }
  .fam-accueil .fam-lien { align-self: center; font: 800 15px var(--texte) !important; color: var(--bleu); }
  .fam-partenaires { display: flex; flex-direction: column; gap: 8px; }
  .fam-partenaires h2, .fam-titre-mini { margin: 0; font: 900 13px var(--texte) !important; letter-spacing: .8px; text-transform: uppercase; color: var(--olive); }
  .fam-partenaires img { display: block; width: 100%; border-radius: 10px; }
  #maintable td:has(> img[src*="home-animation-formation_27"])::before { content: "Recherche par cat\E9 gorie"; }
  #maintable td:has(> img[src*="home-animation-formation_31"])::before { content: "Les formations \E0  la une"; }
  #maintable td:has(> img[src*="home-animation-formation_27"])::before, #maintable td:has(> img[src*="home-animation-formation_31"])::before {
    display: block; margin: 14px 0 6px; font: 900 20px var(--texte); color: var(--encre); }
  /* « Recherche par catégorie » : boutons en contour (le bleu plein est réservé à « sélectionné » et aux actions) */
  #maintable td[background*="categorie_29"] { background: #fff !important; border: 2px solid #C9DCEE; border-radius: 12px; margin: 4px 0;
    padding: 0 !important; }
  #maintable td[background*="categorie_29"] a { display: flex; min-height: 44px; align-items: center; justify-content: center; text-decoration: none; }
  #maintable td[background*="categorie_29"] font, #maintable td[background*="categorie_29"] b { color: var(--bleu) !important; font-weight: 800 !important; }
  #maintable tr:has(> td[background*="categorie_29"]) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
  /* « Les formations à la une » : cartes */
  #maintable table[style*="border: 1px solid #BFD45F"] { background: #fff; border-radius: 14px; border: 2px solid var(--filet) !important; margin: 6px 0;
    display: flex !important; flex-direction: column; padding: 10px 12px; }
  #maintable table[style*="border: 1px solid #BFD45F"] td { padding: 0 !important; }
  #maintable table[style*="border: 1px solid #BFD45F"] td[width="60%"] a { font-weight: 800 !important; color: var(--bleu) !important; }
  #maintable a.tablelistbis { text-decoration: none; }
  .fam-une { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
  .fam-une .fam-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fam-une .fam-logos a { background: #fff; border-radius: 12px; height: 62px; display: flex; align-items: center; justify-content: center; }
  .fam-une .fam-logos img { width: 90px; height: auto; }
  .fam-une .fam-lien { align-self: center; font: 800 15px var(--texte) !important; color: var(--bleu); }
  .fam-orga { display: flex; flex-direction: column; gap: 8px; background: var(--anis); border-radius: 18px; padding: 16px; margin-bottom: 18px; }
  .fam-orga h2 { margin: 0; font: 900 19px var(--texte) !important; }
  .fam-orga p { margin: 0; font: 700 15px/1.45 var(--texte) !important; color: #26300C; }
  .fam-orga a { align-self: flex-start; height: 46px; padding: 0 18px; border-radius: 12px; background: var(--bleu); color: #fff !important;
    font: 900 16px var(--texte) !important; text-decoration: none; display: flex; align-items: center; }
  .fam-pub { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 16px 0; }
  .fam-pub .fam-pub-mention { font: 900 11px var(--texte) !important; letter-spacing: 1px; text-transform: uppercase; color: var(--olive); }

  /* ---------- Recherche : barre de résumé + filtres, lignes compactes groupées par mois ---------- */
  .fam-barre { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; background: #fff; margin: -14px -16px 0; padding: 10px 12px;
    border-bottom: 2px solid var(--filet); position: sticky; top: 0; z-index: 10; }
  .fam-barre .fam-resume { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .fam-barre #fam-nombre { font: 900 18px var(--texte) !important; }
  .fam-barre #fam-criteres { font: 700 13px var(--texte) !important; color: var(--gris); }
  .fam-filtres { display: contents; }
  .fam-filtres > summary { list-style: none; cursor: pointer; height: 44px; padding: 0 14px; border-radius: 12px; background: var(--bleu); color: #fff;
    font: 900 15px var(--texte); display: flex; align-items: center; }
  .fam-filtres > summary::-webkit-details-marker { display: none; }
  .fam-filtres[open] > summary { background: var(--anis); color: var(--encre); }
  .fam-form { flex-basis: 100%; display: flex; flex-direction: column; gap: 14px; padding: 12px 2px 6px; }
  .fam-form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .fam-form legend { padding: 0; margin-bottom: 8px; font: 900 15px var(--texte); }
  .fam-etapes { display: none; flex-wrap: wrap; gap: 6px; padding: 10px; border-radius: 14px; background: var(--anis-pale); }
  .fam-form:has(input[value="47"]:checked) .fam-etapes[data-pour="47"], .fam-form:has(input[value="48"]:checked) .fam-etapes[data-pour="48"] { display: flex; }
  .fam-etapes span { min-height: 38px; padding: 0 12px; border-radius: 19px; background: #fff; border: 2px solid #D5DFC0; font: 800 14px var(--texte);
    display: flex; align-items: center; }
  .fam-etapes input:checked + span { background: var(--encre); border-color: var(--encre); color: #fff; }
  .fam-form > .fam-champ { font-size: 15px !important; color: var(--encre); }
  .fam-boutons { display: flex; gap: 10px; }
  .fam-boutons a { flex: 1; height: 52px; border-radius: 14px; background: var(--anis-pale); color: var(--encre); font: 900 16px var(--texte);
    text-decoration: none; display: flex; align-items: center; justify-content: center; }
  .fam-boutons button { flex: 2; }
  #maintable td.headertdjob:has(#fa-titre) { display: none !important; }
  #fa-res { background: transparent !important; margin: 0 -16px; }
  #fa-res tr[bgcolor="#CCCCCC"] { display: none !important; }
  #fa-res tr.fam-mois { display: block; }
  #fa-res tr.fam-mois td { padding: 14px 16px 6px !important; font: 900 13px var(--texte) !important; letter-spacing: .8px; text-transform: uppercase;
    color: var(--olive); background: var(--anis-pale); }
  #fa-res tr.fam-ligne { display: grid !important; grid-template-columns: 50px minmax(0, 1fr) auto; grid-template-areas: "org date prix" "org lieu lieu" "org titre titre";
    column-gap: 10px; row-gap: 1px; align-items: center; background: #fff !important; padding: 9px 14px; border-bottom: 1px solid #EEF2DE; }
  #fa-res tr.fam-ligne > td { padding: 0 !important; background: transparent !important; }
  #fa-res .fam-c-org { grid-area: org; } #fa-res .fam-c-org img { width: 48px !important; height: auto !important; max-height: 32px !important; object-fit: contain; }
  #fa-res .fam-c-date { grid-area: date; } #fa-res .fam-c-date span { font-weight: 900 !important; color: var(--bleu); }
  #fa-res .fam-c-prix { grid-area: prix; font-weight: 900 !important; }
  #fa-res .fam-c-lieu { grid-area: lieu; } #fa-res .fam-c-lieu span { font-weight: 800 !important; }
  #fa-res .fam-c-titre { grid-area: titre; min-width: 0; } #fa-res .fam-c-titre a { display: block; font-size: 12.5px !important; font-weight: 700 !important;
    color: var(--gris) !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
  #fa-res .fam-c-org a { font-size: 11px !important; }

  /* ---------- Fiche : paires libellé / valeur ---------- */
  #maintable td.view, #maintable td[bgcolor="BFD45F"] { background: transparent !important; }
  #maintable tr:has(> td[bgcolor="BFD45F"][width="23%"]) { background: #fff; padding: 8px 14px !important; border-bottom: 1px solid #EEF2DE; }
  #maintable td[bgcolor="BFD45F"][width="23%"] font { font: 800 12.5px var(--texte) !important; color: var(--gris) !important; }
  #maintable td[bgcolor="BFD45F"][width="23%"] font br, #maintable td[rowspan="17"] { display: none !important; }
  #maintable td.view { padding: 2px 0 0 !important; font-weight: 700 !important; }
  #maintable tr.fam-vide { display: none !important; }
  #maintable table[bgcolor="F0F0F0"] { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 3px 0 var(--anis); }
  #maintable td.view b { font: 900 20px/1.25 var(--texte) !important; }
  #maintable table[bgcolor="F0F0F0"] > tbody > tr:first-child > td[bgcolor="BFD45F"] { display: none !important; }   /* « Titre de la formation / Publicité » */
  #maintable img[src*="postulez.gif"], #maintable a:has(> img[src*="gi-postuler"]), #maintable a:has(> img[src*="gi-envoyer-ami"]),
  #maintable a:has(> img[src*="bouton_UFCV"]) { display: none !important; }   /* anciens boutons : la barre d'action les remplace */
  /* Fiche : barre d'action collée en bas */
  .fam-action { display: flex; flex-direction: column; gap: 4px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; padding: 12px 16px 8px;
    background: #fff; border-top: 3px solid var(--anis); box-shadow: 0 -6px 18px rgba(26,36,51,.10); }
  body.fam-fiche { padding-bottom: 130px; }
  .fam-action .fam-principal { height: 56px; border-radius: 16px; background: var(--bleu); color: #fff; text-decoration: none; display: flex;
    flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 3px 0 var(--bleu-fonce); }
  .fam-action .fam-principal b { font: 900 18px/1.1 var(--texte); }
  .fam-action .fam-principal small { font: 700 12.5px/1.2 var(--texte); opacity: .92; }
  .fam-action .fam-secondaires { display: flex; justify-content: center; gap: 22px; }
  .fam-action .fam-secondaires a { min-height: 38px; display: flex; align-items: center; font: 900 15px var(--texte); color: var(--encre); }
  .fam-action .fam-secondaires a.fam-organisme { color: var(--bleu); }

  /* ---------- Demandes de formation ---------- */
  #maintable tr[bgcolor="#0068B5"] { display: none !important; }
  #maintable tr[bgcolor="#0068B5"] ~ tr { background: #fff !important; border-radius: 14px; margin: 8px 0; padding: 10px 12px; }
  #maintable tr[bgcolor="#0068B5"] ~ tr > td { padding: 0 !important; background: transparent !important; }
  #maintable tr[bgcolor="#0068B5"] ~ tr > td:first-child::before { content: "D\E9 pos\E9 e le "; font-weight: 700; color: var(--gris); }
  #maintable tr[bgcolor="#0068B5"] ~ tr > td:first-child, #maintable tr[bgcolor="#0068B5"] ~ tr > td:first-child font { color: var(--gris) !important; font-size: 13px !important; }
  #maintable tr[bgcolor="#0068B5"] ~ tr > td:nth-child(2) font, #maintable tr[bgcolor="#0068B5"] ~ tr > td:nth-child(2) b { font-weight: 800 !important; }
  #maintable tr[bgcolor="#0068B5"] ~ tr > td:last-child { text-align: right !important; }
  #maintable tr[bgcolor="#0068B5"] ~ tr > td:last-child a { display: inline-flex; height: 40px; align-items: center; padding: 0 12px; border-radius: 10px;
    border: 2px solid var(--bleu); color: var(--bleu) !important; font-weight: 900 !important; text-decoration: none; }

  /* ---------- 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 img[src*="home-animation-formation_3"] { display: none !important; }
  #maintable ~ table td[bgcolor="#0068B5"] { background: var(--bleu) !important; }
}