:root {
  --couleur-fond: #f7f7f5;
  --couleur-carte: #ffffff;
  --couleur-texte: #1f2328;
  --couleur-texte-attenue: #57606a;
  --couleur-bordure: #e2e5e9;
  --couleur-accent: #1f6feb;
  --couleur-accent-hover: #1a5fd0;
  --couleur-danger: #c93c37;

  /* Badges : fond clair + texte fonce de la meme teinte -> contraste eleve
     (~7:1), lisible d'un coup d'oeil, jamais l'info portee par la couleur
     seule (toujours icone + libelle texte). */
  --badge-debutant-fond: #dcfce7;
  --badge-debutant-texte: #14532d;
  --badge-diplome-fond: #fee2e2;
  --badge-diplome-texte: #7f1d1d;
  --badge-experience-fond: #fef3c7;
  --badge-experience-texte: #78350f;
  /* Qualification : bleu neutre, delibrement distinct du vert/rouge/ambre
     des 3 badges d'accessibilite pour ne jamais etre confondu avec eux. */
  --badge-qualification-fond: #dbeafe;
  --badge-qualification-texte: #1e3a8a;
  --badge-alternance-fond: #ede9fe;
  --badge-alternance-texte: #4c1d95;

  /* Extrait : le mot-cle trouve doit sauter aux yeux dans le paragraphe. */
  --surlignage-fond: #fff1a8;
  --surlignage-texte: #3d3000;

  --rayon: 8px;
  --ombre-carte: 0 1px 2px rgba(31, 35, 40, 0.06), 0 1px 6px rgba(31, 35, 40, 0.05);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  line-height: 1.5;
}

a {
  color: var(--couleur-accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.conteneur {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

/* --- Navigation --- */
.entete {
  background: var(--couleur-carte);
  border-bottom: 1px solid var(--couleur-bordure);
  margin-bottom: 24px;
}
.entete-interieur {
  max-width: 900px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.entete-titre {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--couleur-texte);
  margin-right: auto;
}
.nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.nav a {
  color: var(--couleur-texte-attenue);
  font-size: 0.92rem;
}
.nav a.actif {
  color: var(--couleur-accent);
  font-weight: 600;
}

/* --- Formulaires generiques --- */
label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--couleur-texte-attenue);
  display: block;
  margin-bottom: 4px;
}
input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
select,
textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--couleur-carte);
  color: var(--couleur-texte);
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--couleur-accent);
  outline-offset: 1px;
}

.champ {
  margin-bottom: 14px;
}

button,
.bouton {
  display: inline-block;
  background: var(--couleur-accent);
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: var(--rayon);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
button:hover,
.bouton:hover {
  background: var(--couleur-accent-hover);
  text-decoration: none;
}
button.secondaire {
  background: transparent;
  color: var(--couleur-texte);
  border: 1px solid var(--couleur-bordure);
}
button.secondaire:hover {
  background: #eee;
}
button.danger {
  background: var(--couleur-danger);
}

.erreur {
  color: var(--couleur-danger);
  font-size: 0.88rem;
  margin-top: 6px;
}
.message-info {
  color: var(--couleur-texte-attenue);
  font-size: 0.9rem;
}

.carte {
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  padding: 18px;
}

/* --- Badges auto-detectes --- */
.badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.badge-debutant_accepte {
  background: var(--badge-debutant-fond);
  color: var(--badge-debutant-texte);
}
.badge-diplome_obligatoire {
  background: var(--badge-diplome-fond);
  color: var(--badge-diplome-texte);
}
.badge-experience_requise {
  background: var(--badge-experience-fond);
  color: var(--badge-experience-texte);
}
.badge-qualification {
  background: var(--badge-qualification-fond);
  color: var(--badge-qualification-texte);
}
.badge-alternance {
  background: var(--badge-alternance-fond);
  color: var(--badge-alternance-texte);
}

/* --- Etat d'interaction utilisateur (deja vue / pas interesse) : gris neutre,
   volontairement separe des 4 badges colores ci-dessus qui decrivent l'offre
   elle-meme, pas la relation de l'utilisateur avec elle. --- */
.resultat-etat {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--couleur-texte-attenue);
  margin: 2px 0 4px;
}
.resultat-etat.pas-interesse {
  color: var(--couleur-danger);
}
.resultat-pas-interesse {
  opacity: 0.55;
}
.resultat-pas-interesse:hover {
  opacity: 0.85;
}
button.actif {
  background: var(--couleur-danger);
  color: #fff;
  border-color: var(--couleur-danger);
}

/* --- Extrait avec surlignage du mot-cle --- */
.extrait {
  font-size: 0.92rem;
  color: var(--couleur-texte-attenue);
  margin: 8px 0;
}
.extrait mark {
  background: var(--surlignage-fond);
  color: var(--surlignage-texte);
  font-weight: 700;
  padding: 0 2px;
  border-radius: 3px;
}

/* --- Liste de resultats --- */
.resultat {
  margin-bottom: 14px;
}
.resultat-titre {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 2px;
}
.resultat-titre a {
  color: var(--couleur-texte);
}
.resultat-meta {
  font-size: 0.86rem;
  color: var(--couleur-texte-attenue);
}
.resultat-pied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--couleur-texte-attenue);
  flex-wrap: wrap;
  gap: 8px;
}

.filtres {
  margin-bottom: 20px;
}
.filtres-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.cases {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cases label {
  font-weight: 400;
  color: var(--couleur-texte);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  align-items: center;
}

.tableau {
  width: 100%;
  border-collapse: collapse;
}
.tableau th,
.tableau td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--couleur-bordure);
  font-size: 0.9rem;
}
.tableau th {
  color: var(--couleur-texte-attenue);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.statut-pastille {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #eef1f4;
  color: var(--couleur-texte-attenue);
}

/* Pied de page legal : source des donnees, licence, fraicheur. Injecte par
   js/pied-de-page.js sur toutes les pages. */
.pied-de-page {
  margin: 48px auto 24px;
  padding: 16px 20px 24px;
  max-width: 1100px;
  border-top: 1px solid var(--couleur-bordure, #ddd);
  color: var(--couleur-texte-attenue, #666);
  font-size: 0.82rem;
  line-height: 1.5;
}
.pied-de-page p { margin: 6px 0; }
.pied-de-page a { color: inherit; }
.pied-de-page .fraicheur { white-space: nowrap; }

/* Filtre departemental : 96 cases, groupees par region et repliables.
   96 cases a plat sont inutilisables ; 13 regions repliees tiennent en un
   ecran. L'Ile-de-France est ouverte par defaut (elle est en tete de liste),
   les autres sont fermees mais TOUJOURS ouvertes automatiquement par
   recherche.js des qu'elles portent une case cochee -- un filtre actif cache
   dans un bloc replie serait un faux negatif au sens d'E04. */
.region-departements {
  border: 1px solid var(--couleur-bordure, #dfe3e8);
  border-radius: var(--rayon, 6px);
  margin-bottom: 6px;
  background: #fff;
}
.region-departements > summary {
  cursor: pointer;
  padding: 7px 10px;
  font-weight: 600;
  font-size: 0.92rem;
  list-style-position: inside;
}
.region-departements > summary:hover { background: #f7f9fc; }
.region-departements[open] > summary { border-bottom: 1px solid var(--couleur-bordure, #dfe3e8); }
.region-compte { font-weight: 400; color: #6b7684; }
.region-compte.actif { font-weight: 600; color: var(--couleur-primaire, #2f6feb); }
.region-actions {
  display: flex;
  gap: 6px;
  padding: 8px 10px 0;
}
.region-actions button { font-size: 0.78rem; padding: 2px 8px; }
.cases-departements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2px 12px;
  padding: 8px 10px 10px;
}
#compte-departements { font-weight: 600; }

/* 12 types de contrat : deux colonnes plutot qu'une liste verticale de douze.
   Les quatre premiers (CDI, Interim, CDD, Profession liberale) couvrent 97 %
   des offres actives, d'ou l'ordre de volume decroissant plutot qu'alphabetique. */
.cases-contrats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 2px 12px;
}

/* Filtre par domaine professionnel : 14 blocs repliables sur 110 sous-domaines.
   Classes distinctes de celles du filtre departemental, deliberement : elles
   partagent la mise en forme mais pas leur identite, sinon les controles qui
   comptent les blocs de region comptent aussi ceux-ci -- mesure a l'appui, un
   test de region est passe de 13 a 27 blocs attendus. */
.bloc-domaine {
  border: 1px solid var(--couleur-bordure, #dfe3e8);
  border-radius: var(--rayon, 6px);
  margin-bottom: 6px;
  background: #fff;
}
.bloc-domaine > summary {
  cursor: pointer;
  padding: 7px 10px;
  font-weight: 600;
  font-size: 0.92rem;
  list-style-position: inside;
}
.bloc-domaine > summary:hover { background: #f7f9fc; }
.bloc-domaine[open] > summary { border-bottom: 1px solid var(--couleur-bordure, #dfe3e8); }
.domaine-compte { font-weight: 400; color: #6b7684; }
.domaine-compte.actif { font-weight: 600; color: var(--couleur-primaire, #2f6feb); }
.cases-domaines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px 12px;
  padding: 8px 10px 10px;
}
#compte-domaines { font-weight: 600; }

/* Recherche de metier par libelle. La liste de suggestions est positionnee en
   absolu au-dessus du reste : sans cela elle pousserait les champs voisins a
   chaque frappe, ce qui rend la saisie desagreable. */
.champ { position: relative; }
.suggestions {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--couleur-bordure, #dfe3e8);
  border-radius: var(--rayon, 6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}
.suggestions .suggestion {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 7px 10px;
  font-size: 0.9rem;
  color: var(--couleur-texte, #222);
  cursor: pointer;
}
.suggestions .suggestion:hover,
.suggestions .suggestion:focus { background: #eef4ff; }
.suggestion-alerte { color: #8a6d3b; font-size: 0.82rem; }
.suggestions .message-info { padding: 8px 10px; margin: 0; }
.jetons { margin-top: 6px; }
.jeton-metier {
  background: #eef4ff;
  color: #1c3d7a;
  margin: 2px 4px 2px 0;
}
.jeton-metier a { color: #c93c37; font-weight: 700; margin-left: 4px; }
.jeton-alerte { color: #8a6d3b; font-size: 0.8rem; }