/* ============================================================================
   CAP ACCUEIL — Feuille de style
   ----------------------------------------------------------------------------
   Palette « Sarcelle & ambre » :
     #0F7B7A  sarcelle  — couleur principale (données, liens, progression)
     #0B5F5E  sarcelle foncée — boutons et onglet actif
     #F2B544  ambre     — jalons du parcours (Jour 1, fin de période d'essai)
     #F3F6F6  fond      — gris très clair, neutre
     #1F2A2E  encre     — texte et titres

   WHY sur les contrastes (seuil AA : 4,5:1 pour le texte courant) :
     - blanc sur sarcelle foncée = 7,5:1 -> boutons et onglet actif ;
     - sarcelle sur blanc = 5,1:1 -> liens et chiffres, partout ;
     - l'ambre est clair : le texte posé dessus est toujours en encre (8,0:1) ;
       l'ambre foncé #8A5A0A porte le texte ambre (5,9:1 sur blanc).

   Contraintes Power Apps respectées : couleurs unies (pas de dégradé),
   aucune animation ni transition, survol limité à un changement de couleur
   (HoverFill), coins arrondis et ombres disponibles sur les conteneurs.
   ============================================================================ */

/* ---------- 1. Variables ------------------------------------------------- */
:root {
  --sarcelle: #0F7B7A;
  --sarcelle-fonce: #0B5F5E;
  --sarcelle-100: #CDE7E5;
  --sarcelle-50: #E6F2F1;

  --ambre: #F2B544;
  --ambre-fonce: #8A5A0A;
  --ambre-50: #FDF3E1;

  --alerte: #B42318;
  --alerte-50: #FDECEA;

  --fond: #F3F6F6;
  --surface: #FFFFFF;
  --encre: #1F2A2E;
  --texte-doux: #5B6B70;
  --texte-faible: #66777C;
  --bordure: #DCE3E4;
  --bordure-claire: #EBF0F0;

  --ombre: 0 1px 2px rgba(31, 42, 46, .06), 0 2px 8px rgba(31, 42, 46, .05);
  --rayon: 10px;
  --rayon-s: 6px;
}

/* ---------- 2. Base ------------------------------------------------------ */
* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  /* Segoe UI : police intégrée de Power Apps */
  font-family: "Segoe UI", "Open Sans", Arial, sans-serif;
  font-size: 14px;
  color: var(--encre);
  background: var(--fond);
  line-height: 1.45;
}

h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 24px; font-weight: 600; }
h2 { font-size: 16px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }

button { font: inherit; cursor: pointer; }

.aide { color: var(--texte-doux); margin: 4px 0 16px; }
.erreur { color: var(--alerte); font-weight: 600; min-height: 20px; margin: 12px 0 0; }

/* ---------- 3. Bandeau et en-tête --------------------------------------- */
.bandeau-demo {
  background: var(--encre);
  color: #fff;
  font-size: 12px;
  padding: 6px 24px;
}
.bandeau-demo strong { color: var(--ambre); font-weight: 600; }

.entete {
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  padding: 0 24px;
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.entete__marque { display: flex; align-items: center; gap: 12px; }
.logo {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: var(--sarcelle-fonce);
  color: #fff;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.entete__nom { font-weight: 700; font-size: 16px; }
.entete__societe { font-size: 12px; color: var(--texte-doux); }

/* Onglets : galerie horizontale ; l'onglet actif a un fond plein */
.onglets { display: flex; gap: 4px; flex: 1; height: 100%; align-items: center; }
.onglet {
  border: none;
  background: transparent;
  color: var(--texte-doux);
  padding: 8px 14px;
  border-radius: var(--rayon-s);
  font-weight: 600;
}
.onglet:hover { background: var(--sarcelle-50); color: var(--sarcelle-fonce); }
.onglet--actif, .onglet--actif:hover { background: var(--sarcelle-fonce); color: #fff; }

.entete__utilisateur { display: flex; align-items: center; gap: 10px; }
.entete__profil-nom { font-weight: 600; font-size: 13px; }
.entete__profil-role { font-size: 12px; color: var(--texte-doux); }

/* ---------- 4. Mise en page --------------------------------------------- */
.contenu { padding: 24px; max-width: 1440px; margin: 0 auto; }

.ecran { display: none; }
.ecran--actif { display: block; }

.titre-ecran {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 20px;
}
.sous-titre { margin: 4px 0 0; color: var(--texte-doux); }

.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grille-2--large-gauche { grid-template-columns: 3fr 2fr; align-items: start; }

/* ---------- 5. Composants communs --------------------------------------- */
.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 20px;
  margin-bottom: 16px;
}
.carte--tableau { padding: 0; overflow-x: auto; }
.carte--note { background: var(--sarcelle-50); border-color: var(--sarcelle-100); }
.carte--note p, .carte--note ol { margin: 8px 0 0; color: var(--encre); }
.carte--note li { margin-bottom: 4px; }

.carte__entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.carte__aide { font-size: 12px; color: var(--texte-faible); }

.btn {
  border: 1px solid transparent;
  border-radius: var(--rayon-s);
  padding: 9px 16px;
  font-weight: 600;
}
.btn--principal { background: var(--sarcelle-fonce); color: #fff; }
.btn--principal:hover { background: #084847; }
.btn--secondaire { background: var(--surface); color: var(--encre); border-color: var(--bordure); }
.btn--secondaire:hover { background: var(--fond); }
.btn--petit { padding: 5px 10px; font-size: 13px; }
.btn--ambre { background: var(--ambre); color: var(--encre); }
.btn--ambre:hover { background: #E3A52F; }
.btn[disabled] { background: var(--bordure-claire); color: var(--texte-faible); cursor: not-allowed; }

.lien { border: none; background: none; color: var(--sarcelle); font-weight: 600; padding: 0; }
.lien:hover { color: var(--sarcelle-fonce); text-decoration: underline; }
.lien--retour { margin-bottom: 12px; display: inline-block; }

.avatar {
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 50%;
  background: var(--sarcelle-100);
  color: var(--sarcelle-fonce);
  font-weight: 700;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.avatar--sombre { background: var(--encre); color: #fff; }
.avatar--grand { width: 64px; height: 64px; flex-basis: 64px; font-size: 22px; }
.avatar--petit { width: 28px; height: 28px; flex-basis: 28px; font-size: 11px; }

/* Puces de statut : étiquette dont Fill dépend du statut (Switch) */
.puce {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.puce--cours   { background: var(--sarcelle-50); color: var(--sarcelle-fonce); }
.puce--retard  { background: var(--alerte-50);   color: var(--alerte); }
.puce--termine { background: var(--sarcelle-fonce); color: #fff; }
.puce--avenir  { background: var(--ambre-50);    color: var(--ambre-fonce); }
.puce--neutre  { background: var(--bordure-claire); color: var(--texte-doux); }

/* Barre de progression : deux rectangles superposés */
.progression { display: flex; align-items: center; gap: 8px; }
.progression__barre {
  flex: 1;
  height: 6px;
  min-width: 60px;
  background: var(--bordure-claire);
  border-radius: 3px;
  overflow: hidden;
}
.progression__valeur { height: 100%; background: var(--sarcelle); }
.progression__texte { font-size: 12px; color: var(--texte-doux); min-width: 34px; text-align: right; }

.champ {
  font: inherit;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-s);
  padding: 8px 10px;
  background: var(--surface);
  color: var(--encre);
}
.champ:focus { outline: 2px solid var(--sarcelle); outline-offset: 1px; }
.champ--invalide { border-color: var(--alerte); }

button:focus-visible, input:focus-visible { outline: 2px solid var(--sarcelle); outline-offset: 2px; }

/* ---------- 6. Tableau de bord ------------------------------------------ */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.kpi {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 16px 18px;
  border-top: 4px solid var(--sarcelle);
}
.kpi--alerte { border-top-color: var(--alerte); }
.kpi--ambre { border-top-color: var(--ambre); }
.kpi__libelle { font-size: 13px; color: var(--texte-doux); }
.kpi__valeur { font-size: 30px; font-weight: 700; margin-top: 2px; }
.kpi__detail { font-size: 12px; color: var(--texte-faible); }

/* Cinq colonnes = cinq galeries filtrées sur la phase */
.phases { display: grid; grid-template-columns: repeat(5, minmax(170px, 1fr)); gap: 12px; overflow-x: auto; }
.phase {
  background: var(--fond);
  border-radius: var(--rayon);
  padding: 10px;
  min-height: 160px;
}
.phase--jalon { background: var(--ambre-50); }
.phase__entete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 0 4px; }
.phase__titre { font-weight: 700; font-size: 13px; }
.phase__compte {
  background: var(--surface);
  border-radius: 999px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--texte-doux);
}
.phase__vide { color: var(--texte-faible); font-size: 12px; padding: 4px; }

.mini-carte {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-s);
  padding: 10px;
  margin-bottom: 8px;
  color: var(--encre);
}
.mini-carte:hover { border-color: var(--sarcelle); }
.mini-carte--retard { border-left: 4px solid var(--alerte); }
.mini-carte__haut { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.mini-carte__nom { font-weight: 600; font-size: 13px; }
.mini-carte__poste { font-size: 12px; color: var(--texte-doux); }
.mini-carte__bas { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--texte-doux); }

.ligne-retard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bordure-claire);
}
.ligne-retard:last-child { border-bottom: none; }
.ligne-retard__titre { font-weight: 600; }
.ligne-retard__meta { font-size: 12px; color: var(--texte-doux); }

/* Graphique en colonnes */
.histogramme { display: flex; align-items: flex-end; gap: 24px; height: 220px; padding: 0 8px; }
.histogramme__colonne { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.histogramme__barre { width: 100%; max-width: 64px; background: var(--sarcelle); border-radius: 4px 4px 0 0; }
.histogramme__valeur { font-weight: 700; margin-bottom: 4px; }
.histogramme__libelle { font-size: 12px; color: var(--texte-doux); margin-top: 6px; }

/* ---------- 7. Liste des arrivants -------------------------------------- */
.filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.filtres input { flex: 1; min-width: 220px; }

.tableau { width: 100%; border-collapse: collapse; }
.tableau th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--texte-doux);
  background: var(--fond);
  padding: 10px 16px;
  border-bottom: 1px solid var(--bordure);
}
.tableau td { padding: 12px 16px; border-bottom: 1px solid var(--bordure-claire); vertical-align: middle; }
.tableau tbody tr { cursor: pointer; }
.tableau tbody tr:hover { background: var(--sarcelle-50); }
.tableau tbody tr:last-child td { border-bottom: none; }
.cellule-arrivant { display: flex; align-items: center; gap: 10px; }
.cellule-arrivant__nom { font-weight: 600; }
.cellule-arrivant__poste { font-size: 12px; color: var(--texte-doux); }
.tableau__vide { text-align: center; color: var(--texte-doux); padding: 32px; }

/* ---------- 8. Fiche arrivant ------------------------------------------- */
.fiche-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.fiche-entete__identite { flex: 1; min-width: 220px; }
.fiche-entete__nom { font-size: 22px; font-weight: 700; }
.fiche-entete__poste { color: var(--texte-doux); }
.fiche-entete__infos { display: flex; flex-wrap: wrap; gap: 24px; }
.info__libelle { font-size: 12px; color: var(--texte-faible); }
.info__valeur { font-weight: 600; }
.fiche-entete__progression { min-width: 200px; }

.fiche { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }

.frise__phase { border-left: 3px solid var(--bordure); padding: 0 0 18px 18px; position: relative; }
.frise__phase:last-child { padding-bottom: 0; }
.frise__phase--faite { border-left-color: var(--sarcelle); }
.frise__phase--jalon .frise__titre::after {
  content: "Jalon";
  margin-left: 8px;
  background: var(--ambre);
  color: var(--encre);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
}
.frise__point {
  position: absolute;
  left: -9px; top: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--bordure);
}
.frise__phase--faite .frise__point { background: var(--sarcelle); border-color: var(--sarcelle); }
.frise__phase--courante .frise__point { border-color: var(--sarcelle); }
.frise__entete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.frise__titre { font-weight: 700; }
.frise__dates { font-size: 12px; color: var(--texte-faible); }

.tache {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--bordure-claire);
  border-radius: var(--rayon-s);
  margin-bottom: 6px;
  background: var(--surface);
}
.tache--faite { background: var(--fond); }
.tache--faite .tache__titre { color: var(--texte-doux); text-decoration: line-through; }
.tache--retard { border-color: var(--alerte); background: var(--alerte-50); }
.tache input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--sarcelle-fonce); flex: 0 0 18px; }
.tache__corps { flex: 1; min-width: 0; }
.tache__titre { font-weight: 600; }
.tache__meta { font-size: 12px; color: var(--texte-doux); }
.tache__droite { display: flex; align-items: center; gap: 8px; }

.bloc-cote { margin-bottom: 16px; }
.bloc-cote h3 { margin-bottom: 10px; }
.parrain { display: flex; align-items: center; gap: 12px; }
.parrain__role { font-size: 12px; color: var(--texte-doux); }
.liste-simple { list-style: none; margin: 0; padding: 0; }
.liste-simple li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--bordure-claire);
  font-size: 13px;
}
.liste-simple li:last-child { border-bottom: none; }
.score { font-size: 28px; font-weight: 700; color: var(--sarcelle); }
.score small { font-size: 14px; color: var(--texte-doux); font-weight: 600; }

/* ---------- 9. Assistant « Nouvel arrivant » ---------------------------- */
.etapes { display: flex; gap: 8px; list-style: none; margin: 0 0 16px; padding: 0; }
.etapes li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-s);
  padding: 10px 14px;
  color: var(--texte-doux);
  font-weight: 600;
}
.etapes__num {
  width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 50%;
  background: var(--bordure-claire);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.etapes li.etapes--active { border-color: var(--sarcelle-fonce); color: var(--sarcelle-fonce); }
.etapes li.etapes--active .etapes__num { background: var(--sarcelle-fonce); color: #fff; }
.etapes li.etapes--faite .etapes__num { background: var(--sarcelle-100); color: var(--sarcelle-fonce); }

.etape h2 { margin-bottom: 16px; }
.formulaire { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 16px; }
.champ-groupe { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--texte-doux); }
.sous-section { margin: 22px 0 10px; }

.choix-parcours { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.choix {
  text-align: left;
  background: var(--surface);
  border: 2px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 14px;
  color: var(--encre);
}
.choix:hover { border-color: var(--sarcelle-100); }
.choix--actif, .choix--actif:hover { border-color: var(--sarcelle-fonce); background: var(--sarcelle-50); }
.choix__nom { font-weight: 700; margin-bottom: 4px; }
.choix__desc { font-size: 12px; color: var(--texte-doux); }
.choix__compte { font-size: 12px; color: var(--sarcelle-fonce); font-weight: 600; margin-top: 8px; }

.liste-cases { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 12px 16px; margin: 0; }
.liste-cases legend { font-weight: 700; padding: 0 6px; }
.case { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.case input { width: 17px; height: 17px; accent-color: var(--sarcelle-fonce); }

.apercu-phase { margin-bottom: 16px; }
.apercu-phase h3 { margin-bottom: 8px; }
.apercu-phase .tache { background: var(--surface); }
.tache--exclue { background: var(--fond); }
.tache--exclue .tache__titre { color: var(--texte-faible); text-decoration: line-through; }

.actions-etapes { display: flex; justify-content: space-between; margin-top: 16px; }

/* ---------- 10. Modèles de parcours ------------------------------------- */
.modeles { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.modeles__liste .choix { width: 100%; margin-bottom: 10px; }
.tableau--modele td, .tableau--modele th { padding: 9px 12px; }
.tableau--modele tbody tr { cursor: default; }
.tableau--modele tbody tr:hover { background: transparent; }
.ligne-phase td { background: var(--fond); font-weight: 700; font-size: 13px; }
.etiquette-commune { font-size: 11px; color: var(--texte-faible); font-weight: 600; }
.form-tache {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 12px;
  align-items: end;
  background: var(--sarcelle-50);
  border-radius: var(--rayon-s);
  padding: 14px;
  margin-top: 16px;
}
.form-tache__actions { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; }
.form-tache .case { padding: 0; font-weight: 600; color: var(--texte-doux); font-size: 13px; }

/* ---------- 11. Quiz ----------------------------------------------------- */
.quiz { max-width: 860px; }
.question { margin-bottom: 12px; }
.question__titre { font-weight: 700; margin-bottom: 10px; }
.question__num { color: var(--sarcelle); margin-right: 6px; }
.reponse {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-s);
  padding: 9px 12px;
  margin-bottom: 6px;
  cursor: pointer;
}
.reponse:hover { background: var(--fond); }
.reponse input { accent-color: var(--sarcelle-fonce); width: 16px; height: 16px; }
.reponse--choisie { border-color: var(--sarcelle-fonce); background: var(--sarcelle-50); }
.reponse--juste { border-color: var(--sarcelle-fonce); background: var(--sarcelle-50); }
.reponse--fausse { border-color: var(--alerte); background: var(--alerte-50); }
.question__explication { font-size: 13px; color: var(--texte-doux); margin-top: 8px; }
.quiz__pied { display: flex; align-items: center; gap: 16px; }
.resultat { display: flex; align-items: center; gap: 20px; }
.resultat .score { font-size: 40px; }

/* ---------- 12. Relances ------------------------------------------------ */
.relance {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bordure-claire);
}
.relance:last-child { border-bottom: none; }
.relance__corps { flex: 1; min-width: 0; }
.relance__titre { font-weight: 600; }
.relance__meta { font-size: 12px; color: var(--texte-doux); }
.relance--inactive { opacity: .55; }

.regle { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bordure-claire); }
.regle:last-child { border-bottom: none; }
.regle__corps { flex: 1; }
.regle__nom { font-weight: 600; }
.regle__meta { font-size: 12px; color: var(--texte-doux); }

/* Interrupteur : contrôle Toggle natif */
.interrupteur { position: relative; width: 40px; height: 22px; flex: 0 0 40px; }
.interrupteur input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.interrupteur span {
  position: absolute; inset: 0;
  background: var(--bordure);
  border-radius: 999px;
  pointer-events: none;
}
.interrupteur span::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
}
.interrupteur input:checked + span { background: var(--sarcelle-fonce); }
.interrupteur input:checked + span::after { left: 21px; }
.interrupteur input:focus-visible + span { outline: 2px solid var(--sarcelle); outline-offset: 2px; }

/* ---------- 13. Message de confirmation (Notify) ------------------------ */
.toast {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sarcelle-fonce);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--rayon-s);
  font-weight: 600;
  box-shadow: var(--ombre);
  display: none;
  z-index: 20;
}
.toast--visible { display: block; }

/* ---------- 14. Adaptation tablette ------------------------------------- */
@media (max-width: 1100px) {
  .entete { gap: 16px; overflow-x: auto; }
  .entete__profil { display: none; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .grille-2, .grille-2--large-gauche, .fiche, .modeles { grid-template-columns: 1fr; }
  .formulaire, .choix-parcours { grid-template-columns: repeat(2, 1fr); }
  .form-tache { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .contenu { padding: 16px; }
  .entete__societe { display: none; }
  .formulaire, .choix-parcours, .kpis { grid-template-columns: 1fr; }
  .etapes li span:last-child { display: none; }
}