/* ============================================================
   ABBA Mise en Action — style.css
   Base : même charte ABBA (navy + gold), enrichi des
   composants spécifiques à cette app.
   ============================================================ */

:root{
  --navy:#1A3E9E;
  --navy-deep:#122C73;
  --gold:#C9A227;
  --gold-soft:#E0C168;
  --cream:#FBF7EE;
  --paper:#F5EFE1;
  --ink:#241F18;
  --ink-soft:#5B5548;
  --line:#E1D6BC;
  --sage:#4C7A5E;
  --sage-soft:#DCE6DA;
  --brick:#A6483A;
  --brick-soft:#F2DFDA;
  --card-bg:#FFFFFF;
  --radius:10px;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Work Sans', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;
}

[data-theme="dark"]{
  --navy:#4C74E0;
  --navy-deep:#7C9BEE;
  --gold:#D9B54B;
  --gold-soft:#B8862B;
  --cream:#161B22;
  --paper:#1E2530;
  --ink:#EDE9DD;
  --ink-soft:#A6A093;
  --line:#333B47;
  --sage:#7DAA8B;
  --sage-soft:#28352C;
  --brick:#D97E70;
  --brick-soft:#3A2624;
  --card-bg:#1E242E;
}
body{transition:background-color .2s ease, color .2s ease;}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;}

.app{
  max-width:760px;
  margin:0 auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding-bottom:76px;
}

/* ===== HEADER ===== */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px 14px;border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-logo{width:34px;height:34px;flex:0 0 34px;object-fit:contain;}
.brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--navy);}
.brand-sub{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);font-weight:600;}
.topbar-right{display:flex;align-items:center;gap:12px;}
.theme-toggle{
  background:var(--paper);border:1px solid var(--line);border-radius:20px;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--navy);flex:0 0 36px;
}
.theme-toggle svg{width:17px;height:17px;}
.theme-toggle .icon-sun{display:none;}
[data-theme="dark"] .theme-toggle .icon-moon{display:none;}
[data-theme="dark"] .theme-toggle .icon-sun{display:block;}

/* ===== NAVIGATION PRINCIPALE ===== */
.tabs{
  display:flex;gap:2px;padding:0 16px;
  border-bottom:1px solid var(--line);overflow-x:auto;
}
.tab{
  background:none;border:none;cursor:pointer;
  padding:12px 14px 10px;
  font-size:14px;font-weight:500;color:var(--ink-soft);
  border-bottom:2px solid transparent;white-space:nowrap;
}
.tab.active{color:var(--navy);border-bottom-color:var(--gold);font-weight:600;}
@media (max-width:640px){.tabs{display:none;}}

/* ===== CONTENT / PANELS ===== */
.content{flex:1;padding:20px 20px 40px;}
.panel{display:none;animation:fade .25s ease;}
.panel.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

.panel-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;flex-wrap:wrap;gap:10px;
}
.panel-head h1{
  font-family:var(--font-display);font-size:26px;font-weight:600;
  color:var(--navy);margin:0;
}

/* ===== CARDS ===== */
.card{
  background:var(--card-bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 20px;margin-bottom:16px;
}
.eyebrow{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin:0 0 10px;
}
.settings-hint{font-size:12px;color:var(--ink-soft);margin:-4px 0 10px;}
.empty-hint{color:var(--ink-soft);font-size:13px;padding:16px 0;text-align:center;}

/* ===== NAVIGATION PDP (onglets S1–S10) ===== */
.pdp-nav{
  display:flex;gap:4px;margin-bottom:18px;
  overflow-x:auto;padding-bottom:2px;
}
.pdp-tab{
  background:var(--paper);border:1px solid var(--line);
  border-radius:6px;padding:6px 12px;font-size:13px;
  font-weight:600;color:var(--ink-soft);cursor:pointer;
  white-space:nowrap;flex:0 0 auto;
}
.pdp-tab.active{background:var(--navy);color:#fff;border-color:var(--navy);}
.pdp-tab.done{border-color:var(--sage);color:var(--sage);}
.pdp-tab.done.active{background:var(--navy);color:#fff;border-color:var(--navy);}

.pdp-section{display:none;}
.pdp-section.active{display:block;}

/* Progression du PDP */
.pdp-progress-bar{
  height:5px;background:var(--line);border-radius:4px;margin-bottom:20px;overflow:hidden;
}
.pdp-progress-fill{
  height:100%;background:var(--gold);border-radius:4px;
  transition:width .4s ease;
}

/* ===== NAVIGATION RENCONTRES (M1–M6) ===== */
.rencontres-nav{
  display:flex;gap:6px;margin-bottom:18px;
  overflow-x:auto;padding-bottom:2px;
}
.rencontre-tab{
  flex:1;background:var(--paper);border:1px solid var(--line);
  border-radius:8px;padding:10px 6px;font-size:13px;font-weight:700;
  color:var(--ink-soft);cursor:pointer;text-align:center;min-width:44px;
}
.rencontre-tab.active{background:var(--navy);color:#fff;border-color:var(--navy);}
.rencontre-tab.done{border-color:var(--sage);color:var(--sage);}
.rencontre-tab.done.active{background:var(--navy);color:#fff;border-color:var(--navy);}

/* ===== FORMULAIRE RENCONTRE ===== */
.rencontre-header{
  background:var(--navy);color:#fff;border-radius:10px 10px 0 0;
  padding:14px 18px;margin:-18px -20px 16px;
}
.rencontre-header h2{
  font-family:var(--font-display);font-size:18px;margin:0 0 2px;
}
.rencontre-header p{font-size:12px;opacity:.75;margin:0;}

/* Notes 8 dimensions — grille compacte dans les rencontres */
.dim-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin:10px 0;
}
.dim-item{display:flex;flex-direction:column;gap:4px;}
.dim-label{font-size:12px;color:var(--ink-soft);display:flex;align-items:center;gap:5px;}
.dim-score{
  display:flex;align-items:center;gap:8px;
}
.dim-score input[type="range"]{
  flex:1;accent-color:var(--navy);height:4px;
}
.dim-score-val{
  font-family:var(--font-mono);font-size:14px;font-weight:700;
  color:var(--navy);width:28px;text-align:right;flex:0 0 28px;
}

/* Badge partage mentor */
.partage-toggle{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;background:var(--paper);border-radius:8px;
  margin-top:8px;cursor:pointer;font-size:13px;
}
.partage-toggle input{accent-color:var(--navy);}
.partage-toggle-label{color:var(--ink-soft);}
.partage-toggle.actif .partage-toggle-label{color:var(--sage);font-weight:600;}

/* ===== BILAN — tableau comparatif ===== */
.bilan-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px;}
.bilan-table th{
  text-align:left;font-size:11px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink-soft);
  border-bottom:1px solid var(--ink);padding:6px 4px;
}
.bilan-table td{
  padding:9px 4px;border-bottom:1px dashed var(--line);
}
.bilan-table td:not(:first-child){
  font-family:var(--font-mono);text-align:center;
}
.bilan-prog-pos{color:var(--sage);font-weight:700;}
.bilan-prog-neg{color:var(--brick);font-weight:700;}
.bilan-prog-zero{color:var(--ink-soft);}

/* Radar simplifié — barres horizontales */
.radar-bars{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.radar-bar-row{display:flex;align-items:center;gap:10px;font-size:13px;}
.radar-bar-label{width:110px;flex:0 0 110px;font-size:12px;color:var(--ink-soft);}
.radar-bar-track{flex:1;height:10px;background:var(--paper);border-radius:6px;overflow:hidden;}
.radar-bar-fill{height:100%;border-radius:6px;background:var(--navy);transition:width .5s ease;}
.radar-bar-val{font-family:var(--font-mono);font-size:12px;width:36px;text-align:right;flex:0 0 36px;}

/* ===== VUE SUIVI (mentor / admin) ===== */
.suivi-cards{display:flex;flex-direction:column;gap:14px;}
.suivi-card{
  background:var(--card-bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;
  display:flex;flex-direction:column;gap:10px;
}
.suivi-card-head{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:6px;
}
.suivi-card-name{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--navy);}
.suivi-badge{
  font-size:11px;font-weight:700;padding:3px 8px;border-radius:12px;
  background:var(--paper);color:var(--ink-soft);border:1px solid var(--line);
}
.suivi-badge.mois1,.suivi-badge.mois2{background:var(--brick-soft);color:var(--brick);}
.suivi-badge.mois3,.suivi-badge.mois4{background:#FFF3CD;color:#856404;}
.suivi-badge.mois5,.suivi-badge.mois6{background:var(--sage-soft);color:var(--sage);}
.suivi-badge.bilan{background:var(--navy);color:#fff;}

.suivi-dims{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.suivi-dim{
  display:flex;flex-direction:column;align-items:center;
  background:var(--paper);border-radius:6px;padding:6px 4px;
}
.suivi-dim-icon{font-size:14px;}
.suivi-dim-val{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--navy);}
.suivi-dim-label{font-size:9px;color:var(--ink-soft);text-align:center;line-height:1.2;margin-top:2px;}

.suivi-meta{
  display:flex;gap:12px;flex-wrap:wrap;
  font-size:12px;color:var(--ink-soft);
}
.suivi-meta span{display:flex;align-items:center;gap:4px;}

/* ===== ADMIN — gestion mentors & assignments ===== */
.mentor-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:20px;padding:5px 10px 5px 14px;
  font-size:13px;margin:4px;
}
.mentor-chip-del{
  background:none;border:none;color:var(--brick);
  cursor:pointer;font-size:16px;line-height:1;padding:0 2px;
}

.assignment-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 0;border-bottom:1px dashed var(--line);font-size:13px;
}
.assignment-row:last-child{border-bottom:none;}
.assignment-arrow{color:var(--gold);font-weight:700;margin:0 8px;}
.assignment-del{
  background:none;border:none;color:var(--brick);cursor:pointer;font-size:14px;padding:2px 6px;
}

/* ===== DIMENSIONS INITIALES (S3) — évaluation ===== */
.dim-eval-card{
  background:var(--card-bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;margin-bottom:12px;
}
.dim-eval-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
}
.dim-eval-title{font-family:var(--font-display);font-size:16px;color:var(--navy);font-weight:600;}
.dim-eval-score{
  font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--gold);
}
.dim-score-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.dim-score-row input[type="range"]{flex:1;accent-color:var(--navy);}
.dim-level-badge{
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;
}
.dim-level-badge.critique{background:var(--brick-soft);color:var(--brick);}
.dim-level-badge.dev{background:#FFF3CD;color:#856404;}
.dim-level-badge.bon{background:var(--sage-soft);color:var(--sage);}
.dim-level-badge.excellent{background:var(--navy);color:#fff;}

/* ===== LEADERSHIP (S8) — tableau ===== */
.leadership-row{
  display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px dashed var(--line);
}
.leadership-row:last-child{border-bottom:none;}
.leadership-label{font-size:13px;color:var(--ink-soft);flex:1;}
.leadership-input{
  width:64px;flex:0 0 64px;border:1px solid var(--line);
  border-radius:6px;padding:6px 8px;font-size:14px;
  font-family:var(--font-mono);text-align:center;
}

/* ===== MODULES S4 ===== */
.module-row{
  display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px dashed var(--line);font-size:13px;
}
.module-row:last-child{border-bottom:none;}
.module-label{flex:1;color:var(--ink-soft);}
.module-select{
  border:1px solid var(--line);border-radius:6px;
  padding:5px 8px;font-size:13px;background:var(--card-bg);
}

/* ===== OBJECTIFS SMART (S7) ===== */
.smart-card{
  background:var(--card-bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;margin-bottom:14px;
}
.smart-card-head{
  font-family:var(--font-display);font-size:16px;color:var(--navy);
  font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px;
}
.smart-mois-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;}
.smart-mois-label{font-size:12px;color:var(--ink-soft);margin-bottom:3px;}

/* ===== TOTAL HEURES S9 ===== */
.heures-total{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--paper);border-radius:8px;padding:10px 12px;
  margin-top:4px;font-weight:600;font-size:14px;
}
.heures-total.ok{color:var(--sage);}
.heures-total.warn{color:#856404;}
.heures-total.bad{color:var(--brick);}

/* ===== FORMULAIRES ===== */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;font-size:13px;color:var(--ink-soft);}
.text-input{
  border:1px solid var(--line);border-radius:7px;
  padding:9px 12px;font-size:14px;color:var(--ink);
  background:var(--card-bg);width:100%;
}
.text-input:focus{outline:2px solid var(--gold);outline-offset:1px;}
textarea.text-input{resize:vertical;min-height:60px;}

.check-group{display:flex;flex-direction:column;gap:6px;margin-top:4px;}
.check-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:8px 10px;border-radius:7px;background:var(--paper);
  cursor:pointer;font-size:13px;color:var(--ink);
}
.check-item input[type="radio"],
.check-item input[type="checkbox"]{
  margin-top:2px;accent-color:var(--navy);flex:0 0 auto;
}
.check-group-inline{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;}
.check-group-inline label{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;}
.radio-inline{display:flex;gap:16px;margin-top:4px;}
.radio-inline label{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;}

/* ===== BOUTONS ===== */
.btn-primary{
  background:var(--navy);color:#fff;border:none;border-radius:7px;
  padding:11px 18px;font-weight:600;font-size:14px;cursor:pointer;
}
.btn-primary:hover{background:var(--navy-deep);}
.btn-primary.full{width:100%;margin-top:6px;}
.btn-secondary{
  background:var(--card-bg);color:var(--navy);border:1.4px solid var(--navy);
  border-radius:7px;padding:10px 16px;font-weight:600;font-size:13px;cursor:pointer;
}
.btn-danger{
  background:none;color:var(--brick);border:1px solid var(--brick-soft);
  border-radius:7px;padding:9px 16px;font-size:13px;cursor:pointer;
}
.link-btn{
  background:none;border:none;color:var(--navy);font-weight:600;font-size:13px;
  cursor:pointer;padding:0;text-decoration:underline;
  text-decoration-color:var(--gold-soft);text-underline-offset:3px;
}

/* ===== AUTH ===== */
.auth-screen{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:var(--cream);padding:24px;overflow-y:auto;
}
.auth-box{
  width:100%;max-width:380px;background:var(--card-bg);
  border:1px solid var(--line);border-radius:14px;padding:28px 24px;text-align:center;
}
.auth-logo{width:56px;height:56px;margin:0 auto 10px;display:block;}
.auth-box h1{font-family:var(--font-display);font-size:24px;color:var(--navy);margin:0 0 2px;}
.auth-sub{font-size:12px;color:var(--gold);text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin:0 0 20px;}
.auth-form{display:flex;flex-direction:column;gap:12px;text-align:left;}
.auth-error{color:var(--brick);font-size:12.5px;margin:0;min-height:14px;}
.auth-hint{font-size:11.5px;color:var(--ink-soft);margin:16px 0 0;line-height:1.5;}

/* ===== BOTTOM NAV ===== */
.bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;
  background:var(--card-bg);border-top:1px solid var(--line);
  justify-content:space-around;
  padding:8px 4px calc(6px + env(safe-area-inset-bottom));
  z-index:30;overflow-x:auto;
}
.bnav-btn{
  background:none;border:none;display:flex;flex-direction:column;
  align-items:center;gap:3px;color:var(--ink-soft);
  font-size:9.5px;cursor:pointer;padding:4px 3px;flex:0 0 auto;min-width:52px;
}
.bnav-btn.active{color:var(--navy);}
.bnav-btn.active svg{color:var(--gold);}
@media (max-width:640px){
  .bottom-nav{display:flex;}
  .app{padding-bottom:0;}
  .content{padding-bottom:90px;}
}

/* ===== TABLE TX (admin) ===== */
.tx-table{width:100%;border-collapse:collapse;font-size:13px;}
.tx-table th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-soft);border-bottom:1px solid var(--ink);padding:6px 4px;
}
.tx-table td{padding:8px 4px;border-bottom:1px dashed var(--line);}

/* ===== ACCESSIBILITÉ ===== */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* ===== HISTORIQUE RENCONTRES VERROUILLÉES ===== */
.histo-card{
  background:var(--card-bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;
  opacity:.85;
}
.histo-head{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
  flex-wrap:wrap;
}
.histo-label{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--navy);}
.histo-date{font-size:12px;color:var(--ink-soft);flex:1;}
.histo-lock{font-size:14px;}
.histo-dims{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
.histo-dim{
  display:flex;flex-direction:column;align-items:center;
  background:var(--paper);border-radius:6px;padding:5px 8px;
  font-size:12px;min-width:44px;text-align:center;
}
.histo-dim strong{font-family:var(--font-mono);font-size:14px;color:var(--navy);}
.histo-dim small{font-size:9px;color:var(--ink-soft);margin-top:2px;}
.histo-line{font-size:12px;color:var(--ink-soft);margin:4px 0;}
.histo-victoire{color:var(--sage);}
.histo-defi{color:var(--brick);}

/* Carte header rencontre (zone formulaire) */
#rencontreFormZone{
  background:var(--card-bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 20px;margin-bottom:16px;
}
.rencontre-header-card{padding:4px 0;}

/* ===== VUE PDP MENTOR (dans suivi) ===== */
.pdp-mentor-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  z-index:100;display:flex;align-items:flex-start;justify-content:center;
  padding:20px 10px;overflow-y:auto;
}
.pdp-mentor-box{
  background:var(--cream);border-radius:14px;
  width:100%;max-width:680px;padding:24px 20px;
  position:relative;
}
.pdp-mentor-close{
  position:absolute;top:14px;right:16px;background:none;border:none;
  font-size:22px;cursor:pointer;color:var(--ink-soft);
}
.pdp-mentor-section{margin-bottom:20px;}
.pdp-mentor-section h3{
  font-family:var(--font-display);font-size:16px;color:var(--navy);
  margin:0 0 10px;border-bottom:1px solid var(--line);padding-bottom:6px;
}
.pdp-mentor-row{
  display:flex;gap:8px;margin-bottom:8px;font-size:13px;
  flex-wrap:wrap;
}
.pdp-mentor-row dt{color:var(--ink-soft);min-width:140px;flex:0 0 140px;}
.pdp-mentor-row dd{color:var(--ink);margin:0;flex:1;}

/* ===== ACCORDÉON SUIVI ===== */
.suivi-accord{
  border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:10px;overflow:hidden;
  background:var(--card-bg);
}
.suivi-accord-head{
  width:100%;background:none;border:none;cursor:pointer;
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;text-align:left;flex-wrap:wrap;
}
.suivi-accord-head:hover{background:var(--paper);}
.suivi-accord-arrow{
  margin-left:auto;font-size:14px;
  color:var(--ink-soft);flex:0 0 auto;
}
.suivi-accord-body{
  padding:0 16px 16px;border-top:1px solid var(--line);
}