/* Refonte TunisieJob — styles communs aux écrans convertis depuis Claude Design.
 *
 * La maquette exporte tout en styles en ligne. Ce qui ne peut pas y rester est
 * ici : la mise en page adaptative, les survols, les pseudo-classes. Tout est
 * préfixé `tj-` pour ne pas entrer en conflit avec Tailwind, chargé par
 * `templates/base.html` et utilisé par les écrans non encore convertis.
 *
 * Jetons de la charte, arrêtés en séance de design :
 *   marque #2E3A8C · clair #6875D6 · sombre #1F2766 · voile #EFF1FB
 *   accent #C21E56 (framboise du logo, une seule fois par écran)
 *   encre #0F172A · encre-2 #475569 · encre-3 #64748B
 *   fond #F8FAFC · surface #FFFFFF · bordure #E2E8F0
 *
 * `encre-3` valait #94A3B8 jusqu'au 11 octobre 2026 : 2,56:1 sur blanc, là où
 * AA demande 4,5. Cette valeur reste bonne pour une bordure ou un trait, pas
 * pour un texte. #64748B donne 4,76:1 en gardant la hiérarchie visuelle.
 */

.tj { font-family: 'DM Sans', system-ui, sans-serif; color: #0F172A; }
.tj h1, .tj h2, .tj h3 { font-family: Outfit, system-ui, sans-serif; }
.tj a { color: #2E3A8C; }
.tj a:hover { color: #1F2766; }
.tj :focus-visible { outline: 2px solid #2E3A8C; outline-offset: 2px; }

/* ---------------------------------------------------------------- la carte */
/* Le composant le plus vu du site : page d'offre, listes, pages de ville. */
/* `.tj a` vaut (0,1,1) et l'emportait sur `.tj-carte` (0,1,0) : le titre et
   l'employeur viraient au bleu. La carte est un lien, mais son texte doit
   rester de l'encre -- c'est toute la carte qui est cliquable, pas un mot. */
.tj a.tj-carte { display: flex; flex-direction: column; height: 100%; padding: 16px;
            background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px;
            text-decoration: none; color: #0F172A; transition: border-color .15s; }
.tj a.tj-carte:hover { border-color: #6875D6; color: #0F172A; }
.tj-rond { flex: none; width: 40px; height: 40px; border-radius: 8px; background: #EFF1FB;
           border: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: center;
           font: 800 14px/1 Outfit, sans-serif; color: #1F2766; }
.tj-titre-carte { margin: 0; font: 700 18px/23px Outfit, sans-serif;
                  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                  overflow: hidden; text-wrap: pretty; }
.tj-pastille { height: 28px; padding: 0 10px; display: flex; align-items: center;
               border-radius: 999px; background: #EFF1FB; color: #1F2766;
               font: 600 14px/1 'DM Sans', sans-serif; }
.tj-pastille-claire { background: transparent; border: 1px solid #E2E8F0; color: #475569; font-weight: 500; }

/* -------------------------------------------------------------- les boutons */
.tj-action { height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px;
             border-radius: 8px; background: #C21E56; color: #FFFFFF !important;
             font: 700 16px/1 'DM Sans', sans-serif; text-decoration: none; border: 0; cursor: pointer; }
.tj-action:hover { background: #A5184A; color: #FFFFFF !important; }
.tj-contour { min-height: 44px; display: flex; align-items: center; justify-content: center;
              border: 1px solid #2E3A8C; border-radius: 8px;
              font: 600 15px/1 'DM Sans', sans-serif; text-decoration: none; }
.tj-contour:hover { background: #EFF1FB; }
.tj-jeton { min-height: 36px; padding: 0 4px 0 12px; display: flex; align-items: center; gap: 6px;
            border: 1px solid #E2E8F0; border-radius: 999px; background: #FFFFFF;
            font: 500 14px/1 'DM Sans', sans-serif; color: #0F172A; text-decoration: none; }
.tj-jeton:hover { border-color: #6875D6; }
.tj-compte { min-width: 26px; height: 26px; padding: 0 7px; display: flex; align-items: center;
             justify-content: center; border-radius: 999px; background: #EFF1FB; color: #1F2766;
             font: 600 13px/1 'DM Sans', sans-serif; }

/* ------------------------------------------------------------ la pagination */
.tj-pagination { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tj-pagination ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tj-page { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
           border: 1px solid #E2E8F0; border-radius: 8px; background: #FFFFFF; color: #0F172A;
           font: 500 16px 'DM Sans', sans-serif; text-decoration: none; }
.tj-page:hover { border-color: #6875D6; }
.tj-page-active { background: #2E3A8C; border-color: #2E3A8C; color: #FFFFFF; font-weight: 600; }
.tj-page-bord { width: auto; padding: 0 14px; }
.tj-page-morte { color: #64748B; background: #FFFFFF; }

/* ------------------------------------------------------- les mises en page */
/* Trois colonnes à partir de 1 024 px : rail publicitaire, résultats, annexes.
   Reprise de la grille de international_jobs.html, qui était déjà juste. */
.tj-colonnes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.tj-rail { display: none; }
.tj-cartes { display: flex; flex-direction: column; gap: 12px; }

@media (min-width: 1024px) {
  /* Deux colonnes et non trois : le rail publicitaire de gauche attend que
     les blocs AdSense soient crees. Une colonne de 300 px vide decalait tout
     le contenu sans rien apporter. Ajouter la classe `tj-colonnes-rail` au
     gabarit le jour ou le rail a quelque chose a montrer. */
  .tj-colonnes { grid-template-columns: minmax(0, 1fr) 300px; }
  .tj-colonnes-rail { grid-template-columns: 300px minmax(0, 1fr) 300px; }
  .tj-colonnes-rail .tj-rail { display: block; position: sticky; top: 88px; }
  .tj-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tj-h1 { font-size: 40px; line-height: 48px; }
  .tj-h2 { font-size: 28px; line-height: 34px; }
}

/* --------------------------------------------------------- tri et filtres */
.tj-tri { height: 36px; padding: 0 12px; display: flex; align-items: center; border-radius: 6px;
          color: #475569; font: 500 14px 'DM Sans', sans-serif; text-decoration: none; }
.tj-tri:hover { background: #F8FAFC; color: #1F2766; }
.tj-tri-actif { background: #EFF1FB; color: #1F2766; font-weight: 600; }

.tj-filtres { padding: 16px; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px; }
.tj-volet > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.tj-volet > summary::-webkit-details-marker { display: none; }
.tj-volet > summary::after { content: "+"; margin-left: auto; font: 600 20px/1 'DM Sans', sans-serif; color: #475569; }
.tj-volet[open] > summary::after { content: "\2212"; }

.tj-option { min-height: 40px; display: flex; align-items: center; gap: 10px;
             font: 400 15px/20px 'DM Sans', sans-serif; color: #0F172A; cursor: pointer; }
.tj-option-morte { color: #64748B; cursor: default; }

@media (min-width: 1024px) {
  /* Sur grand ecran les filtres sont toujours deplies : la place ne manque
     pas, et un panneau ferme cache des choix que le visiteur ne cherchera pas. */
  .tj-volet > summary::after { display: none; }
}

/* ------------------------------------------------- la liste des offres */
/* La grille faisait 9 424 px pour 24 cartes : une seule colonne, et 390 px
   par carte. Deux colonnes et des cartes de 190 px la ramenent sous 2 500. */
.tj-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

@media (min-width: 1024px) {
  .tj-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Une offre deposee chez nous se distingue d'une annonce reprise ailleurs :
   c'est la seule sur laquelle le candidat postule sans quitter le site. */
.tj a.tj-carte-interne { border-color: #16A34A; background: #F6FEF9; }
.tj a.tj-carte-interne:hover { border-color: #15803D; }
.tj-pastille-interne { background: #DCFCE7; color: #166534; }

.tj-icone { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
            border: 0; border-radius: 8px; background: transparent; color: #64748B; cursor: pointer; }
.tj-icone:hover { background: #EFF1FB; color: #2E3A8C; }

/* Sur 358 px de large, trois pastilles passent a la ligne et la carte gagne
   50 px -- vingt-quatre fois sur la page. Le secteur saute : c'est celle des
   trois dont le candidat a le moins besoin, puisqu'il est deja arrive sur la
   liste par un metier ou une recherche. */
@media (max-width: 1023px) {
  .tj-liste .tj-pastille-claire { display: none; }
}

.tj-meta { display: block; margin-top: 4px; min-width: 0; }
.tj-societe { display: block; font: 500 15px/20px 'DM Sans', sans-serif;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj-lieu { display: block; margin-top: 2px; font: 400 14px/20px 'DM Sans', sans-serif;
           color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sous 1 024 px, employeur et lieu tiennent sur une ligne : vingt px gagnes
   par carte, vingt-quatre fois sur la page. La place manque sur un telephone,
   et les deux se lisent tres bien a la suite -- « BINARY IT, La Marsa ». */
@media (max-width: 1023px) {
  .tj-liste .tj-meta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                       font: 500 15px/20px 'DM Sans', sans-serif; }
  .tj-liste .tj-societe, .tj-liste .tj-lieu { display: inline; margin-top: 0; }
  .tj-liste .tj-lieu::before { content: ", "; }
}

/* ------------------------------------------------------------- l'accueil */
/* Une seule direction, `row`, a toutes les largeurs. Sur un telephone chaque
   etiquette prend sa ligne parce qu'elle ne tient pas a cote ; sur un grand
   ecran elles se rangent cote a cote. En `column`, la base de 240 px devenait
   une hauteur et laissait un trou sous le champ. */
.tj-recherche { margin-top: 20px; padding: 16px; background: #FFFFFF;
                border: 1px solid #E2E8F0; border-radius: 12px;
                display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.tj-recherche > label { flex: 1 1 240px; }
.tj-recherche .tj-action { flex: 1 1 100%; }

.tj-chiffres { margin: 24px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
               background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px; }
.tj-chiffres > div { padding: 14px 16px; border-left: 1px solid #E2E8F0;
                     display: flex; flex-direction: column-reverse; gap: 2px; }
.tj-chiffres > div:first-child { border-left: 0; }
.tj-chiffres dd { margin: 0; font: 800 24px/30px Outfit, sans-serif; }
.tj-chiffres dt { font: 400 13px/18px 'DM Sans', sans-serif; color: #475569; }

.tj-villes { margin: 16px 0 0; padding: 0; list-style: none;
             display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tj-villes a { min-height: 60px; padding: 10px 14px; display: flex; flex-direction: column;
               justify-content: center; background: #FFFFFF; border: 1px solid #E2E8F0;
               border-radius: 8px; text-decoration: none; }
.tj-villes a:hover { border-color: #6875D6; }
.tj-ville-nom { font: 600 15px/20px 'DM Sans', sans-serif; color: #0F172A; }
.tj-ville-n { font: 400 13px/18px 'DM Sans', sans-serif; color: #475569; }

@media (min-width: 640px) {
  .tj-recherche .tj-action { flex: 0 0 auto; }
  .tj-chiffres dd { font-size: 28px; line-height: 34px; }
  .tj-chiffres dt { font-size: 14px; line-height: 20px; }
  .tj-villes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  /* Quatre offres de front : la carte reste lisible et les huit dernieres
     tiennent en deux rangees, sans faire defiler l'accueil. */
  .tj-liste-accueil { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tj-villes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ------------------------------------------- bas de l'accueil */
/* La bande sombre pleine largeur coupait la page en deux juste apres des
   cartes claires. Elle devient un panneau arrondi, dans le flux, qui se
   distingue sans trancher. */
.tj-recruteurs { margin-top: 40px; padding: 32px 20px; border-radius: 16px;
                 background: #1F2766; color: #FFFFFF; }
.tj-recruteurs > div { max-width: 1280px; margin: 0 auto; }
.tj-etiquette { display: inline-block; margin: 0; padding: 6px 12px; border-radius: 999px;
                background: rgba(255, 255, 255, .12); color: #C7D2FE;
                font: 600 13px/18px 'DM Sans', sans-serif; }
.tj-avantages { margin: 20px 0 0; padding: 0; list-style: none;
                display: flex; flex-direction: column; gap: 10px; }
.tj-avantages li { position: relative; padding-left: 28px;
                   font: 400 16px/24px 'DM Sans', sans-serif; color: #E2E8F0; }
.tj-avantages li::before { content: ""; position: absolute; left: 4px; top: 8px;
                           width: 8px; height: 8px; border-radius: 50%; background: #14B8A6; }

.tj-portes { margin: 40px 0 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.tj-portes a { padding: 24px; display: flex; flex-direction: column; gap: 6px;
               background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px;
               text-decoration: none; transition: border-color .15s; }
.tj-portes a:hover { border-color: #6875D6; }
.tj-porte-titre { font: 800 20px/26px Outfit, sans-serif; color: #0F172A; }
.tj-porte-texte { font: 400 15px/22px 'DM Sans', sans-serif; color: #475569; }

@media (min-width: 768px) {
  .tj-recruteurs { padding: 40px 32px; }
  .tj-portes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------- espace membre */
/* Une carte de 420 px, centree, et rien autour. Sur un ecran de connexion,
   tout ce qui n'est pas le formulaire retarde celui qui venait s'y connecter. */
.tj-carte-compte { max-width: 420px; margin: 0 auto; }
.tj-panneau { padding: 24px 20px; background: #FFFFFF;
              border: 1px solid #E2E8F0; border-radius: 12px; }

.tj-champ { display: flex; flex-direction: column; gap: 6px;
            font: 600 14px/20px 'DM Sans', sans-serif; }
.tj-champ input, .tj-champ select, .tj-champ textarea {
    height: 48px; padding: 0 14px; border: 1px solid #CBD5E1; border-radius: 8px;
    background: #FFFFFF; font: 400 16px 'DM Sans', sans-serif; color: #0F172A; }
.tj-champ textarea { height: auto; padding: 12px 14px; line-height: 24px; }
.tj-champ input:focus, .tj-champ select:focus, .tj-champ textarea:focus {
    outline: 2px solid #2E3A8C; outline-offset: 1px; border-color: #2E3A8C; }

/* L'erreur se lit sous le champ qu'elle concerne, et dit quoi corriger.
   « Champ invalide » n'a jamais aide personne. */
.tj-erreur { margin: 0; padding: 12px 14px; border-radius: 8px;
             background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B;
             font: 500 14px/20px 'DM Sans', sans-serif; }
.tj-erreur-champ { margin: 4px 0 0; color: #DC2626;
                   font: 400 14px/20px 'DM Sans', sans-serif; }

.tj-social { min-height: 48px; display: flex; align-items: center; justify-content: center;
             gap: 10px; border: 1px solid #CBD5E1; border-radius: 8px; background: #FFFFFF;
             font: 600 15px/1 'DM Sans', sans-serif; color: #0F172A !important;
             text-decoration: none; }
.tj-social:hover { background: #F8FAFC; border-color: #94A3B8; color: #0F172A !important; }

/* Le separateur « ou », trace par des traits de chaque cote du mot. */
.tj-ou { margin: 20px 0; display: flex; align-items: center; gap: 12px;
         font: 400 14px/20px 'DM Sans', sans-serif; color: #64748B; }
.tj-ou::before, .tj-ou::after { content: ""; flex: 1; height: 1px; background: #E2E8F0; }

.tj-points { margin: 0; padding: 0; list-style: none;
             display: flex; flex-direction: column; gap: 8px; }
.tj-points li { position: relative; padding-left: 24px;
                font: 400 15px/22px 'DM Sans', sans-serif; color: #475569; }
.tj-points li::before { content: ""; position: absolute; left: 4px; top: 8px;
                        width: 8px; height: 8px; border-radius: 50%; background: #2E3A8C; }

/* La progression d'un formulaire en etapes : des barres, pas un pourcentage.
   Un formulaire long sans fin visible est un formulaire qu'on abandonne. */
.tj-etapes { display: flex; align-items: baseline; justify-content: space-between;
             gap: 12px; font: 600 13px/18px 'DM Sans', sans-serif; color: #475569; }
.tj-barres { margin: 8px 0 20px; display: flex; gap: 6px; }
.tj-barres span { flex: 1; height: 3px; border-radius: 2px; background: #E2E8F0; }
.tj-barres span.tj-faite { background: #2E3A8C; }

@media (min-width: 640px) {
  .tj-panneau { padding: 28px 24px; }
}

/* ------------------------------------------- annonces automatiques */
/* Google dimensionne ses blocs a la largeur de l'ecran et les insere dans un
   conteneur deja en retrait : la page defilait de 16 px sur le cote. On les
   plafonne -- `max-width` l'emporte sur `width`, meme avec !important. */
ins.adsbygoogle,
ins.adsbygoogle > div,
.google-auto-placed,
.google-aiuf,
[id^="aswift_"],
[id^="google_ads_iframe"] {
    max-width: 100% !important;
}

/* ----------------------------------------------------- pages de texte */
/* Les trois pages se citent entre elles : une mention legale lue seule
   laisse le visiteur sans porte de sortie vers les deux autres. */
.tj-onglets { display: flex; flex-wrap: wrap; gap: 4px;
              border-bottom: 1px solid #E2E8F0; }
.tj-onglets a { padding: 10px 14px; font: 600 15px/1 'DM Sans', sans-serif;
                color: #475569 !important; text-decoration: none;
                border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tj-onglets a:hover { color: #2E3A8C !important; }
.tj-onglets a[aria-current="page"] { color: #2E3A8C !important; border-bottom-color: #2E3A8C; }

/* Une colonne de 70 caracteres : c'est la largeur a laquelle l'oeil retrouve
   le debut de la ligne suivante sans effort. Les annexes vont a cote sur
   grand ecran, dessous sur telephone. */
.tj-texte-colonnes { display: grid; grid-template-columns: minmax(0, 1fr);
                     gap: 32px; align-items: start; }

.tj-horaires { margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.tj-horaires > div { display: flex; justify-content: space-between; gap: 12px;
                     font: 400 14px/20px 'DM Sans', sans-serif; color: #475569; }
.tj-horaires dt { margin: 0; }
.tj-horaires dd { margin: 0; font-weight: 600; color: #0F172A; }

@media (min-width: 1024px) {
  .tj-texte-colonnes { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
}

/* --------------------------------------------- formulaires en etapes */
.tj-inscription { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }

/* La colonne d'etapes dit ou l'on en est et ce qui reste. Un formulaire long
   sans fin visible est un formulaire qu'on abandonne au milieu. */
.tj-fil-etapes ol { margin: 0; padding: 0; list-style: none;
                    display: flex; flex-direction: column; gap: 12px; }
.tj-fil-etapes li { display: flex; gap: 10px; align-items: flex-start;
                    font: 400 14px/20px 'DM Sans', sans-serif; color: #64748B; }
.tj-fil-etapes li strong { font: 600 15px/21px 'DM Sans', sans-serif; color: #64748B; }
.tj-puce { flex: none; width: 26px; height: 26px; border-radius: 50%;
           border: 1px solid #E2E8F0; background: #FFFFFF; color: #64748B;
           display: flex; align-items: center; justify-content: center;
           font: 700 13px/1 'DM Sans', sans-serif; }

.tj-etape-courante { color: #475569 !important; }
.tj-etape-courante strong { color: #0F172A !important; }
.tj-etape-courante .tj-puce { background: #2E3A8C; border-color: #2E3A8C; color: #FFFFFF; }

.tj-etape-faite { color: #475569 !important; }
.tj-etape-faite strong { color: #0F172A !important; }
.tj-etape-faite .tj-puce { background: #DCFCE7; border-color: #BBF7D0; color: #166534; }
.tj-etape-faite .tj-puce::after { content: "\2713"; }
.tj-etape-faite .tj-puce { font-size: 0; }
.tj-etape-faite .tj-puce::after { font-size: 14px; }

/* Deux champs de front des que la place le permet : un formulaire de vingt
   champs sur une colonne donne l'impression de ne jamais finir. */
.tj-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.tj-aide { font: 400 13px/18px 'DM Sans', sans-serif; color: #64748B; }
.tj-facultatif { font: 400 13px/18px 'DM Sans', sans-serif; color: #64748B; }

/* Les champs rendus par Django n'ont pas nos classes : on les habille par
   leur position dans l'etiquette, plutot que de reecrire chaque widget. */
.tj-champ input[type="text"], .tj-champ input[type="email"],
.tj-champ input[type="tel"], .tj-champ input[type="url"],
.tj-champ input[type="password"], .tj-champ input[type="number"],
.tj-champ select, .tj-champ textarea {
    width: 100%; height: 48px; padding: 0 14px; border: 1px solid #CBD5E1;
    border-radius: 8px; background: #FFFFFF;
    font: 400 16px 'DM Sans', sans-serif; color: #0F172A; }
.tj-champ textarea { height: auto; min-height: 96px; padding: 12px 14px; line-height: 24px; }

@media (min-width: 768px) {
  .tj-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .tj-inscription { grid-template-columns: 240px minmax(0, 1fr); gap: 32px; }
  .tj-fil-etapes { position: sticky; top: 88px; }
}