/* Premier Contact — feuille de style unique.
   Sobre et dense : l'écran de travail d'un recruteur affiche une promotion
   entière, pas trois cartes décoratives. */

:root {
  --encre: #1c2b36;
  --encre-doux: #5b6873;
  --bleu: #2f5d8c;
  --bleu-clair: #eef3f8;
  --ok: #2f7d5d;
  --ok-clair: #eaf4ef;
  --alerte: #a4443b;
  --alerte-clair: #fbeeed;
  --trame: #e3e7ea;
  --fond: #f6f7f9;
  --blanc: #fff;
  --rayon: 4px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--encre);
  background: var(--fond);
}

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

h1 { font-size: 1.55rem; margin: 0 0 .4rem; font-weight: 600; }
h2 { font-size: 1.15rem; margin: 0 0 .6rem; font-weight: 600; }
h3 { font-size: 1rem; margin: 0 0 .5rem; font-weight: 600; }

/* --- Ossature ------------------------------------------------------------ */

.entete {
  background: var(--blanc);
  border-bottom: 1px solid var(--trame);
}
.entete-interieur {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 58px;
}
.marque {
  display: flex; align-items: center; gap: .55rem;
  font-weight: 600; color: var(--encre); letter-spacing: .01em;
}
.marque:hover { text-decoration: none; }
.menu { display: flex; gap: 1.4rem; flex: 1; }
.menu a { color: var(--encre-doux); padding: .2rem 0; }
.menu a:hover { color: var(--bleu); text-decoration: none; }
.deconnexion { display: flex; align-items: center; gap: .8rem; }
.identite { color: var(--encre-doux); font-size: .875rem; }
.lien-bouton {
  background: none; border: none; color: var(--bleu);
  cursor: pointer; font: inherit; font-size: .875rem; padding: 0;
}

.contenu { max-width: 1180px; margin: 0 auto; padding: 1.8rem 1.5rem 3rem; }

.pied {
  max-width: 1180px; margin: 0 auto; padding: 1rem 1.5rem 2rem;
  display: flex; justify-content: space-between;
  color: var(--encre-doux); font-size: .8rem;
}

/* --- Blocs --------------------------------------------------------------- */

.carte {
  background: var(--blanc);
  border: 1px solid var(--trame);
  border-radius: var(--rayon);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.2rem;
}
.carte-etroite { max-width: 520px; }
.carte-centree { max-width: 520px; margin: 3rem auto; text-align: center; }
.carte-action { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.carte-attention { border-left: 3px solid var(--alerte); }
.carte-decision { background: var(--bleu-clair); border-color: #d5e0ea; }

.bandeau {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; margin-bottom: 1.4rem;
}
.bandeau-graphique { width: 120px; flex: none; }

.entete-page {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.2rem;
}
.entete-page h1 { margin: 0; }

.titre-section { margin: 1.8rem 0 .8rem; font-size: 1.05rem; }
.titre-groupe {
  margin: 1.4rem 0 .5rem; font-size: .82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--encre-doux);
}
.surtitre {
  margin: 0 0 .2rem; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--encre-doux);
}
.fil { margin-bottom: 1rem; font-size: .85rem; color: var(--encre-doux); }
.fil span { margin: 0 .4rem; }

.colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.colonnes-trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 860px) {
  .colonnes, .colonnes-trois { grid-template-columns: 1fr; }
  .bandeau { flex-direction: column; align-items: flex-start; }
}

.texte-secondaire { color: var(--encre-doux); }
.texte-alerte { color: var(--alerte); }
.note { color: var(--encre-doux); font-size: .82rem; margin: .6rem 0 0; }
.vide { color: var(--encre-doux); font-style: italic; }
.centre { text-align: center; }
.objectif { color: var(--encre-doux); margin: 0 0 1.2rem; }
.coordonnees { margin: .4rem 0 0; font-size: .9rem; }

/* --- Chiffres ------------------------------------------------------------ */

.grille-chiffres {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem; margin-bottom: 1.4rem;
}
@media (max-width: 720px) { .grille-chiffres { grid-template-columns: repeat(2, 1fr); } }
.chiffre {
  background: var(--blanc); border: 1px solid var(--trame);
  border-radius: var(--rayon); padding: .9rem 1.1rem;
}
.chiffre-valeur { display: block; font-size: 1.7rem; font-weight: 600; line-height: 1.2; }
.chiffre-libelle { display: block; color: var(--encre-doux); font-size: .82rem; }
.chiffre-alerte .chiffre-valeur { color: var(--alerte); }

/* --- Tableaux ------------------------------------------------------------ */

.tableau-donnees {
  width: 100%; border-collapse: collapse; background: var(--blanc);
  border: 1px solid var(--trame); border-radius: var(--rayon);
  margin-bottom: 1.2rem; font-size: .9rem;
}
.tableau-donnees th {
  text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--trame);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--encre-doux); font-weight: 600;
}
.tableau-donnees td { padding: .6rem .8rem; border-bottom: 1px solid var(--trame); vertical-align: top; }
.tableau-donnees tr:last-child td { border-bottom: none; }
.tableau-donnees tbody tr:hover { background: #fafbfc; }
.ligne-attention { background: var(--alerte-clair); }
.ligne-attention:hover { background: #f7e6e4; }
.cellule-detail summary { cursor: pointer; color: var(--bleu); }

.tableau-grille { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; }
.tableau-grille th, .tableau-grille td { padding: .5rem .6rem; border-bottom: 1px solid var(--trame); }
.tableau-grille th { text-align: left; font-size: .78rem; color: var(--encre-doux); }
.cellule-note { text-align: center; width: 46px; }
.note-radio { display: block; cursor: pointer; }
.note-radio span { display: block; font-size: .8rem; color: var(--encre-doux); }

.jauge {
  height: 6px; background: var(--trame); border-radius: 3px;
  overflow: hidden; margin-bottom: .25rem; width: 110px;
}
.jauge span { display: block; height: 100%; background: var(--bleu); }

/* --- Pastilles ----------------------------------------------------------- */

.pastille {
  display: inline-block; padding: .12rem .5rem; border-radius: 10px;
  font-size: .78rem; background: var(--trame); color: var(--encre-doux);
  white-space: nowrap;
}
.pastille-ok { background: var(--ok-clair); color: var(--ok); }
.pastille-alerte { background: var(--alerte-clair); color: var(--alerte); }
.pastille-info { background: var(--bleu-clair); color: var(--bleu); }
.pastille-neutre { background: var(--trame); color: var(--encre-doux); }

/* --- Modules ------------------------------------------------------------- */

.ligne-module {
  display: flex; align-items: center; gap: 1rem;
  background: var(--blanc); border: 1px solid var(--trame);
  border-radius: var(--rayon); padding: .75rem 1rem; margin-bottom: .5rem;
  color: var(--encre);
}
a.ligne-module:hover { border-color: var(--bleu); text-decoration: none; }
.ligne-module-acquis { border-left: 3px solid var(--ok); }
.ligne-module-echoue { border-left: 3px solid var(--alerte); }
.ligne-module-ouvert { border-left: 3px solid var(--bleu); }
.module-code {
  font-weight: 600; color: var(--encre-doux); width: 34px; flex: none; font-size: .9rem;
}
.module-titre { flex: 1; }
.module-titre small { display: block; color: var(--encre-doux); font-size: .82rem; }
.module-duree { color: var(--encre-doux); font-size: .82rem; white-space: nowrap; }
.module-etat { flex: none; }

/* --- Cours --------------------------------------------------------------- */

.cours { max-width: 44rem; }
.cours h3 { margin: 1.6rem 0 .5rem; font-size: 1.05rem; }
.cours h4 { margin: 0 0 .3rem; }
.cours p, .cours li { line-height: 1.65; }
.cours ul, .cours ol { padding-left: 1.3rem; }
.cours li { margin-bottom: .35rem; }

.cours .encadre {
  background: var(--bleu-clair); border-left: 3px solid var(--bleu);
  padding: .9rem 1.1rem; margin: 1.2rem 0; border-radius: 0 var(--rayon) var(--rayon) 0;
}
.cours .encadre p { margin: 0; }

.cours .script {
  background: #fbfbfc; border: 1px solid var(--trame);
  padding: .9rem 1.1rem; margin: 1rem 0; border-radius: var(--rayon);
}
.cours .script p { margin: 0 0 .5rem; }
.cours .script p:last-child { margin-bottom: 0; }
.cours .script .r {
  display: inline-block; min-width: 4.5rem; font-weight: 600;
  color: var(--encre-doux); font-size: .85rem;
}

.cours .tableau { overflow-x: auto; margin: 1rem 0; }
.cours table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cours th, .cours td {
  text-align: left; padding: .5rem .7rem; border: 1px solid var(--trame);
  vertical-align: top;
}
.cours th { background: #f4f6f8; font-weight: 600; }

/* --- Quiz ---------------------------------------------------------------- */

.quiz { max-width: 44rem; }
.question {
  background: var(--blanc); border: 1px solid var(--trame);
  border-radius: var(--rayon); padding: 1rem 1.2rem; margin: 0 0 1rem;
}
.question legend { font-weight: 600; padding: 0 .3rem; }
.numero {
  display: inline-block; width: 1.4rem; height: 1.4rem; line-height: 1.4rem;
  text-align: center; background: var(--bleu); color: #fff;
  border-radius: 50%; font-size: .78rem; margin-right: .4rem;
}
.choix {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .45rem .3rem; cursor: pointer; border-radius: var(--rayon);
}
.choix:hover { background: var(--bleu-clair); }

.carte-resultat { text-align: center; }
.carte-resultat h1 { font-size: 2rem; }
.resultat-ok { border-left: 3px solid var(--ok); }
.resultat-echec { border-left: 3px solid var(--alerte); }

.correction-ok { border-left: 3px solid var(--ok); }
.correction-faux { border-left: 3px solid var(--alerte); }
.liste-choix { list-style: none; padding: 0; margin: .6rem 0; }
.liste-choix li { padding: .35rem .6rem; border-radius: var(--rayon); }
.choix-bon { background: var(--ok-clair); }
.choix-mauvais { background: var(--alerte-clair); }
.marque-choix {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--encre-doux); margin-left: .5rem;
}
.explication {
  color: var(--encre-doux); font-size: .9rem;
  border-top: 1px solid var(--trame); padding-top: .6rem; margin: .6rem 0 0;
}

/* --- Formulaires --------------------------------------------------------- */

label { display: block; margin-bottom: .9rem; font-size: .9rem; }
label > span:first-child { display: block; }
input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=number], input[type=search], select, textarea {
  width: 100%; padding: .5rem .6rem; margin-top: .25rem;
  border: 1px solid #c8cfd6; border-radius: var(--rayon);
  font: inherit; background: var(--blanc); color: var(--encre);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--bleu); outline-offset: -1px; border-color: var(--bleu);
}
textarea { resize: vertical; }
.champ-code { letter-spacing: .5rem; text-align: center; font-size: 1.4rem; }
.champ-code-html { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; }
.champ-court { max-width: 220px; }
.paire { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.case { display: flex; align-items: center; gap: .5rem; }
.case input { width: auto; margin: 0; }

.ligne-formulaire {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem;
}
.ligne-formulaire label { margin-bottom: 0; }
.ligne-formulaire input, .ligne-formulaire select { width: auto; min-width: 90px; }

.filtres {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem;
  background: var(--blanc); border: 1px solid var(--trame);
  border-radius: var(--rayon); padding: .9rem 1.1rem; margin-bottom: 1rem;
}
.filtres label { margin-bottom: 0; }
.filtres input, .filtres select { width: auto; min-width: 150px; }

.bouton {
  display: inline-block; padding: .5rem .95rem;
  border: 1px solid #c8cfd6; border-radius: var(--rayon);
  background: var(--blanc); color: var(--encre); font: inherit; font-size: .9rem;
  cursor: pointer; text-align: center;
}
.bouton:hover { border-color: var(--bleu); color: var(--bleu); text-decoration: none; }
.bouton-principal {
  background: var(--bleu); border-color: var(--bleu); color: #fff; font-weight: 500;
}
.bouton-principal:hover { background: #26507a; color: #fff; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }

.alerte {
  background: var(--alerte-clair); border-left: 3px solid var(--alerte);
  padding: .6rem .9rem; border-radius: 0 var(--rayon) var(--rayon) 0; margin-bottom: 1rem;
}

.onglets { display: flex; gap: .3rem; margin-bottom: -1px; }
.onglet {
  padding: .5rem 1rem; border: 1px solid var(--trame); border-bottom: none;
  border-radius: var(--rayon) var(--rayon) 0 0;
  background: #f1f3f5; color: var(--encre-doux); font-size: .9rem;
}
.onglet-actif { background: var(--blanc); color: var(--encre); font-weight: 600; }

.liste-fine { list-style: none; padding: 0; margin: .4rem 0 0; font-size: .88rem; }
.liste-fine li { padding: .25rem 0; border-bottom: 1px solid var(--trame); }
.liste-fine li:last-child { border-bottom: none; }

blockquote {
  margin: .8rem 0 0; padding: .6rem .9rem; border-left: 3px solid var(--trame);
  color: var(--encre-doux); font-size: .9rem;
}

.graphique { display: block; margin: .5rem 0; }

/* --- Compléments (classes utilisées par les vues, absentes jusqu'ici) ----- */

.grille-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 640px) { .grille-deux { grid-template-columns: 1fr; } }

.grille-cartes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
}
.carte-offre { display: flex; flex-direction: column; }
.carte-offre h2 { font-size: 1.05rem; }
.carte-offre .bouton { margin-top: auto; align-self: flex-start; }

.liste-offres { list-style: none; padding: 0; margin: .6rem 0 0; }
.liste-offres li { padding: .4rem 0; border-bottom: 1px solid var(--trame); }
.liste-offres li:last-child { border-bottom: none; }

.meta-offre { color: var(--encre-doux); font-size: .88rem; margin: 0 0 1rem; }
.texte-offre p { margin: 0 0 .9rem; line-height: 1.65; }
.texte-offre p:last-child { margin-bottom: 0; }

.lien-retour { font-size: .85rem; color: var(--encre-doux); }
.lien-retour:hover { color: var(--bleu); }

.tableau-large { table-layout: auto; }
.colonne-notes { width: 2.2rem; text-align: center; }

.fiche-champs { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: .8rem 0; }
.fiche-champs dt { color: var(--encre-doux); font-size: .82rem; }
.fiche-champs dd { margin: 0; }

/* ===========================================================================
   Vitrine publique et espace agent — habillage distinct de l'outil interne.

   L'outil de gestion (recruteur, formation) reste la charte d'origine : dense,
   fonctionnelle, sans décoration — c'est une qualité assumée pour un écran de
   travail, pas un défaut à corriger. Ce qui suit ne s'applique QUE sous
   `body.section-vitrine` et `body.section-agent` (voir layouts/principal.ejs) :
   deux pages publiques du même site peuvent avoir deux tons différents sans
   dupliquer le layout ni le reste de la feuille de style.

   Le bleu de marque (--bleu, celui du logo) reste l'ancrage partout. L'accent
   ocre ci-dessous est réservé à la vitrine/l'espace agent : jamais utilisé pour
   un statut (les pastilles ok/alerte/info restent vert/rouge/bleu, inchangées),
   pour ne jamais laisser croire qu'un bouton doré est une alerte ou un succès.
   ========================================================================= */

:root {
  --accent: #b8763a;
  --accent-fonce: #8f5a28;
  --accent-clair: #f7ede1;
  --encre-vitrine: #2a2420;
}

/* --- En-tête : plus présent sur la vitrine et l'espace agent -------------- */

.section-vitrine .entete, .section-agent .entete {
  border-bottom-color: var(--accent-clair);
}
.section-vitrine .marque, .section-agent .marque {
  font-size: 1.05rem;
}
.section-vitrine .menu a, .section-agent .menu a {
  font-weight: 500;
}
.section-vitrine .menu a:hover, .section-agent .menu a:hover {
  color: var(--accent-fonce);
}

/* --- Hero (accueil vitrine) ------------------------------------------------ */

.hero {
  background: linear-gradient(135deg, var(--bleu) 0%, #24466b 100%);
  border-radius: var(--rayon);
  padding: 3rem 2.5rem;
  margin-bottom: 1.4rem;
  color: #fff;
}
.hero-corps { max-width: 640px; }
.hero-surtitre {
  margin: 0 0 .5rem; font-size: .82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--accent-clair);
}
.hero h1 {
  font-size: 2.1rem; line-height: 1.25; margin: 0 0 1rem; font-weight: 700;
  color: #fff;
}
.hero-texte { color: #dce6f0; font-size: 1.02rem; line-height: 1.6; margin: 0 0 1.6rem; }
@media (max-width: 720px) {
  .hero { padding: 2rem 1.5rem; }
  .hero h1 { font-size: 1.6rem; }
}

.bouton-fantome {
  background: transparent; border-color: rgba(255,255,255,.55); color: #fff;
}
.bouton-fantome:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

/* --- Cartes métiers (accueil) ---------------------------------------------- */

.carte-metier {
  padding: 1.1rem 1.2rem; border-left: 3px solid var(--accent);
  background: var(--accent-clair); border-radius: 0 var(--rayon) var(--rayon) 0;
}

/* --- Grille d'offres : ombre légère, accent au survol ---------------------- */

.section-vitrine .carte-offre {
  box-shadow: 0 1px 2px rgba(28,43,54,.06);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.section-vitrine .carte-offre:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(184,118,58,.14);
}
.section-vitrine .carte-offre h2 a { color: var(--encre-vitrine); }
.section-vitrine .carte-offre .bouton-principal {
  background: var(--accent); border-color: var(--accent);
}
.section-vitrine .carte-offre .bouton-principal:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }

/* --- Boutons principaux vitrine : accent, pas bleu fonctionnel ------------- */

.section-vitrine .bouton-principal, .section-agent .bouton-principal {
  background: var(--accent); border-color: var(--accent);
}
.section-vitrine .bouton-principal:hover, .section-agent .bouton-principal:hover {
  background: var(--accent-fonce); border-color: var(--accent-fonce);
}

/* --- Espace agent : ton personnel, moins dense que l'outil recruteur ------- */

.section-agent .bandeau {
  background: var(--accent-clair); border-radius: var(--rayon);
  padding: 1.6rem 1.8rem; margin-bottom: 1.4rem;
}
.section-agent .bandeau h1 { color: var(--encre-vitrine); }

/* --- Pied de page : plus visible sur la vitrine ---------------------------- */

.section-vitrine .pied, .section-agent .pied {
  border-top: 1px solid var(--trame); margin-top: 1rem;
}