/* =========================================================
   PALETTE & VARIABLES
   ========================================================= */
:root{
  /* FONDS */
  --bg0:#2a0b1a;        /* bleu foncé principal */
  --bg1:#3a0f24;        /* bleu foncé secondaire */

  /* CARDS & BLOCS */
  --card:#fff1f5;       /* bleu clair (cards) */
  --card-soft:#ffe4e6;  /* zones internes */
  --card-border:#fecdd3;

  /* TEXTES */
  --txt:#2b0a16;        /* texte sur cards */
  --txt-inv:#fff7f9;    /* texte sur fond foncé */
  --muted:#8a4a5f;      /* gris bleuté */

  /* ACCENTS */
  --primary:#b00020;    /* bleu moderne */
  --secondary:#d32f2f;  /* cyan */
  --plum:#7a0019;       /* violet (remplace le grenat) */

  /* PALETTE ÉTENDUE (pour badges / rôles / parcours) */
  --accent-blue:#c1121f;
  --accent-cyan:#e11d48;
  --accent-teal:#be123c;
  --accent-green:#dc2626;
  --accent-lime:#f43f5e;
  --accent-yellow:#fb7185;
  --accent-orange:#f97316;
  --accent-red:#ef4444;
  --accent-rose:#f43f5e;
  --accent-pink:#ec4899;
  --accent-purple:#9333ea;
  --accent-indigo:#881337;
  --accent-slate:#64748b;

  /* Couleurs rôles (optionnelles) */
  --role-eleve:#be123c;
  --role-prof:#7a0019;
  --role-referent:#b00020;
  --role-viesco:#dc2626;
  --role-admin:var(--txt);

  /* ÉTATS */
  --ok:#16a34a;
  --warn:#f59e0b;
  --bad:#dc2626;

  /* UI */
  --line:#fecdd3;
  --shadow: 0 14px 40px rgba(190,18,60,.18);
  --r12:12px;
  --r16:16px;
}

/* =========================================================
   BASE
   ========================================================= */
*{box-sizing:border-box}

html, body{height:100%}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: #7a0019;
  color: var(--txt-inv);
}

a{color:inherit}
.muted{color:var(--muted)}
/*
  IMPORTANT:
  Several components (e.g. .modal-overlay) define display later in the file.
  Without !important, those later rules can override .hidden when an element
  has both classes (e.g. class="modal-overlay hidden"), preventing modals from
  closing.
*/
.hidden{display:none !important}

/* =========================================================
   OUTILS (Prof / Référent)
   ========================================================= */
.tools-subtabs{display:flex; flex-wrap:wrap; gap:10px}
.tools-subtab.active{filter:brightness(1.05); border-color:rgba(255,255,255,.35)}

.checklist{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  border-radius: var(--r12);
}

.checklist--row{flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px;}

.chip{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); border-radius:999px; cursor:pointer; user-select:none;}
.chip input{margin:0;}


.check{
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius: var(--r12);
  background:rgba(255,255,255,.04);
}
.check input{transform:scale(1.1)}

.wheel-wrap{position:relative; display:flex; justify-content:center}
.wheel{
  position:relative;
  width:min(520px, 100%);
  height:240px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius: var(--r16);
  background:rgba(255,255,255,.06);
}
.wheel::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  height:36px;
  transform:translateY(-50%);
  border-top:1px solid rgba(255,255,255,.28);
  border-bottom:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);
  pointer-events:none;
}
.wheel-pointer{
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  font-weight:900;
  font-size:18px;
  opacity:.95;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
  z-index:2;
}
.wheel-strip{will-change:transform}
.wheel-item{
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--txt-inv);
}
.tools-result{
  margin-top:10px;
  text-align:center;
  font-size:24px;
  font-weight:900;
}

.groups-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px}
.group-card{border:1px solid rgba(255,255,255,.14); border-radius:var(--r16); background:rgba(255,255,255,.06); padding:12px}
.group-title{font-weight:900; margin-bottom:8px}
.group-list{line-height:1.35}

.timer-display{
  font-size: clamp(48px, 7vw, 96px);
  font-weight:900;
  text-align:center;
  letter-spacing:1px;
  padding:18px 10px;
  border-radius: var(--r16);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
}

/* =========================================================
   HEADER / TOPBAR
   ========================================================= */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  background: rgba(11,28,45,.92);
  border-bottom:1px solid rgba(255,255,255,.12);
  color: var(--txt-inv);
  backdrop-filter: blur(10px);
}

.topbar__left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.brand__logo{
  width:42px;
  height:42px;
  object-fit:contain;
}

.brand__sep{
  width:2px;
  height:42px;
  background: var(--primary);
  border-radius:2px;
  opacity:.95;
  flex:0 0 auto;
}

.brand__txt{
  text-align:left;
  line-height:1.1;
  min-width:0;
}

.brand__name{
  font-weight:900;
  letter-spacing:.6px;
  color: var(--txt-inv);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 52vw;
}

.brand__sub{
  font-size:12px;
  color: rgba(238,244,255,.90);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 52vw;
}

.topbar__right{
  display:flex;
  align-items:center;
  gap:10px;
}

.userchip{
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  color: var(--txt-inv);
  border: 1px solid rgba(255,255,255,.12);
}

.userchip__name{
  font-weight:700;
  font-size:13px;
}

.userchip__role{
  font-size:12px;
  opacity:.85;
}

/* =========================================================
   LAYOUT
   ========================================================= */
.layout{
  max-width:1200px;
  margin:0 auto;
  padding:16px;
}

.grid{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:14px;
  align-items:start;
}

@media(max-width:980px){
  .grid{grid-template-columns: 1fr}
}

/* =========================================================
   SIDEBAR
   ========================================================= */
.side{
  background: linear-gradient(180deg, rgba(255,241,245,.92), rgba(244,247,251,.92));
  color: var(--txt);
  border:1px solid var(--card-border);
  border-radius: var(--r16);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.side__title{
  padding:14px 14px 10px;
  font-weight:900;
  color: var(--primary);
  letter-spacing:.2px;
}

.nav{
  display:flex;
  flex-direction:column;
  padding:8px;
  gap:6px;
}

.nav a{
  text-decoration:none;
  padding:10px 12px;
  border-radius:14px;
  color: #4a1024;
  transition:.15s ease;
  border:1px solid transparent;
  font-weight:700;
}

.nav a:hover{
  background: rgba(176,0,32,.12);
  color: var(--primary);
  border-color: rgba(176,0,32,.18);
}

.nav a.active{
  background: linear-gradient(90deg,#ffe4e6,#fff1f5);
  color: var(--primary);
  border:1px solid rgba(176,0,32,.20);
}

/* Barre d'accent multi-couleurs (menu) */
.nav a{ position:relative; }
.nav a::before{
  content:"";
  position:absolute;
  left:6px;
  top:8px;
  bottom:8px;
  width:4px;
  border-radius:999px;
  background: rgba(100,116,139,.30);
  opacity:.55;
}
.nav a.active::before{ opacity:1; }
.nav a:nth-child(1).active::before{ background: var(--accent-blue); }
.nav a:nth-child(2).active::before{ background: var(--accent-purple); }
.nav a:nth-child(3).active::before{ background: var(--accent-teal); }
.nav a:nth-child(4).active::before{ background: var(--accent-orange); }
.nav a:nth-child(5).active::before{ background: var(--accent-rose); }
.nav a:nth-child(6).active::before{ background: var(--accent-green); }
.nav a:nth-child(7).active::before{ background: var(--accent-yellow); }
.nav a:nth-child(8).active::before{ background: var(--accent-indigo); }
.nav a:nth-child(9).active::before{ background: var(--accent-cyan); }
.nav a:nth-child(10).active::before{ background: var(--accent-red); }

/* =========================================================
   CARDS
   ========================================================= */
.card{
  /*
    ✅ Cards multi-couleurs (automatique)
    - Chaque .card reçoit une teinte différente via --card-tint
    - Pure CSS : aucun impact sur le fonctionnement
  */
  background:
    radial-gradient(900px 380px at 12% 0%, var(--card-tint, rgba(37,99,235,.14)) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,241,245,.96), rgba(244,247,251,.96));
  color: var(--txt);
  border:1px solid var(--card-border);
  border-radius: var(--r16);
  box-shadow: var(--shadow);
  padding:14px;
}

/* Teintes alternées (toutes interfaces) */
.card:nth-child(5n+1){ --card-tint: rgba(37,99,235,.16);   border-color: rgba(37,99,235,.35); }
.card:nth-child(5n+2){ --card-tint: rgba(147,51,234,.14);  border-color: rgba(147,51,234,.32); }
.card:nth-child(5n+3){ --card-tint: rgba(13,148,136,.14);  border-color: rgba(13,148,136,.32); }
.card:nth-child(5n+4){ --card-tint: rgba(249,115,22,.14);  border-color: rgba(249,115,22,.34); }
.card:nth-child(5n+5){ --card-tint: rgba(244,63,94,.13);   border-color: rgba(244,63,94,.32); }

/* Évite de colorer le contenu des modales (reste neutre) */
.modal__content.card,
.modal .card{
  --card-tint: rgba(37,99,235,.10);
  border-color: var(--card-border);
}

.card h2{margin:0 0 10px;font-size:18px}
.card h3{margin:0 0 8px;font-size:15px}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
.col{flex:1;min-width:240px}

/* =========================================================
   BOUTONS
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  background: linear-gradient(90deg,var(--primary),var(--secondary));
  color:#fff;
  border:none;
  font-weight:900;
  cursor:pointer;
  transition:.15s ease;
  text-decoration:none;
  box-shadow: 0 10px 18px rgba(30,64,175,.18);
}

.btn:hover{transform:translateY(-1px)}

.btn:disabled{
  opacity:.65;
  cursor:not-allowed;
  transform:none;
}

.btn--ghost{
  background: rgba(122,0,25,.08);
  color:var(--txt);
  border:1px solid rgba(122,0,25,.22);
  box-shadow:none;
}

.btn--ghost:hover{
  background: rgba(122,0,25,.09);
}

/* Variantes de boutons (plus visibles, palette multi-couleurs)
   IMPORTANT : pure CSS, aucune incidence sur le fonctionnement. */
.btn--danger{
  background: linear-gradient(90deg, var(--accent-red), var(--accent-rose));
  box-shadow: 0 10px 18px rgba(239,68,68,.20);
}
.btn--ok{
  background: linear-gradient(90deg, var(--accent-green), var(--accent-teal));
  box-shadow: 0 10px 18px rgba(22,163,74,.18);
}
.btn--warn{
  background: linear-gradient(90deg, var(--accent-orange), var(--accent-yellow));
  box-shadow: 0 10px 18px rgba(245,158,11,.18);
}
.btn--soft{
  background: linear-gradient(90deg, var(--accent-slate), var(--accent-indigo));
  box-shadow: 0 10px 18px rgba(100,116,139,.18);
}

.btn.btn--danger, .btn.btn--ok, .btn.btn--warn, .btn.btn--soft{ color:#fff; }

/* =========================================================
   FORMULAIRES
   ========================================================= */
.input, select, textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.65);
  background:#f8fafc;
  color:var(--txt);
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.input:focus, select:focus, textarea:focus{
  border-color: rgba(176,0,32,.55);
  box-shadow: 0 0 0 4px rgba(176,0,32,.18);
}

textarea{
  min-height:90px;
  resize:vertical;
}

label{
  display:block;
  font-size:12px;
  color:#475569;
  margin:10px 0 6px;
  font-weight:800;
}

/* =========================================================
   TABLEAUX
   ========================================================= */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border-radius:14px;
  overflow:hidden;
  border: 1px solid rgba(148,163,184,.40);
  background:#fff;
}

.table th{
  background:#f1f5f9;
  color:var(--txt);
  font-weight:900;
  padding:12px 10px;
  font-size:13px;
  border-bottom:1px solid rgba(148,163,184,.35);
}

.table td{
  background:#ffffff;
  color:var(--txt);
  padding:12px 10px;
  border-bottom:1px solid rgba(226,232,240,.95);
  font-size:13px;
  vertical-align:top;
}

.table tr:last-child td{border-bottom:none}

.table td:last-child, .table th:last-child{
  text-align:right;
  white-space:nowrap;
}

/* =========================================================
   BADGES
   ========================================================= */
.badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#e5e7eb;
  font-size:12px;
  font-weight:900;
  border: 1px solid rgba(148,163,184,.35);
}

.badge--ok{
  background:#dcfce7;
  color:#166534;
  border-color: rgba(22,163,74,.25);
}

.badge--danger{
  background:#fee2e2;
  color:#991b1b;
  border-color: rgba(220,38,38,.25);
}

/* =========================================================
   NOTIFICATIONS (badge sur cloche)
   ========================================================= */
.iconbadge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background: var(--bad);
  color: #fff;
  font-weight:900;
  font-size:11px;
  line-height:1;
  border:2px solid rgba(11,28,45,.92);
}

/* =========================================================
   PORTFOLIO : titres de sections
   ========================================================= */
.portfolio-section-title{
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 900;
  font-size: 15px;
  color: var(--primary);
  margin: 4px 0 10px;
}

/* =========================================================
   TABS
   ========================================================= */
.tabs{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-bottom:12px;
  align-items:stretch;
}

/* 2 niveaux sur écrans moyens */
@media (max-width: 980px){
  .tabs{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 3 niveaux (1 colonne) sur mobiles */
@media (max-width: 560px){
  .tabs{ grid-template-columns: 1fr; }
}

.tab{
  padding:9px 12px;
  border-radius:999px;
  /* Base neutre (sera surchargé par la palette ci-dessous via nth-child) */
  background: rgba(122,0,25,.08);
  color:var(--txt);
  cursor:pointer;
  border:1px solid rgba(122,0,25,.22);
  font-weight:900;
  transition: .15s ease;
  width:100%;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
}

/* Onglets (palette rouge / grenat) */
.tabs .tab:nth-child(1){ background: rgba(122,0,25,.12); border-color: rgba(122,0,25,.28); }
.tabs .tab:nth-child(2){ background: rgba(176,0,32,.10); border-color: rgba(176,0,32,.26); }
.tabs .tab:nth-child(3){ background: rgba(193,18,31,.10); border-color: rgba(193,18,31,.26); }
.tabs .tab:nth-child(4){ background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.26); }
.tabs .tab:nth-child(5){ background: rgba(225,29,72,.10); border-color: rgba(225,29,72,.26); }
.tabs .tab:nth-child(6){ background: rgba(159,18,57,.10); border-color: rgba(159,18,57,.26); }
.tabs .tab:nth-child(7){ background: rgba(136,19,55,.10); border-color: rgba(136,19,55,.26); }
.tabs .tab:nth-child(8){ background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.26); }


.tab:hover{
  filter: saturate(1.15);
  transform: translateY(-1px);
  color: var(--primary);
}

.tab.active{
  /* actif: un peu plus "dense" et net, tout en gardant la couleur de l'onglet */
  background: rgba(255,255,255,.78);
  color: var(--txt);
  border-color: rgba(122,0,25,.35);
  box-shadow: 0 8px 22px rgba(2,6,23,.10);
}

/* Palette multi-couleurs sur TOUS les onglets, pour rendre l'UI plus "joyeuse".
   - Pastels en normal (lisible)
   - Légèrement plus saturé au survol
   - L'onglet actif reste clair, mais conserve sa couleur via la pastille ("underline") */
.tabs .tab:nth-child(1){ background: rgba(176,0,32,.12); border-color: rgba(176,0,32,.22); }
.tabs .tab:nth-child(2){ background: rgba(168,85,247,.12); border-color: rgba(168,85,247,.22); }
.tabs .tab:nth-child(3){ background: rgba(20,184,166,.12); border-color: rgba(20,184,166,.22); }
.tabs .tab:nth-child(4){ background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.22); }
.tabs .tab:nth-child(5){ background: rgba(244,63,94,.12); border-color: rgba(244,63,94,.22); }
.tabs .tab:nth-child(6){ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.22); }
.tabs .tab:nth-child(7){ background: rgba(234,179,8,.14); border-color: rgba(234,179,8,.24); }
.tabs .tab:nth-child(8){ background: rgba(122,0,25,.12); border-color: rgba(122,0,25,.22); }

/* Si une interface a plus de 8 onglets, on reboucle la palette */
.tabs .tab:nth-child(9){  background: rgba(176,0,32,.12); border-color: rgba(176,0,32,.22); }
.tabs .tab:nth-child(10){ background: rgba(168,85,247,.12); border-color: rgba(168,85,247,.22); }
.tabs .tab:nth-child(11){ background: rgba(20,184,166,.12); border-color: rgba(20,184,166,.22); }
.tabs .tab:nth-child(12){ background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.22); }

/* Accent multi-couleurs sur les onglets (sans toucher au JS)
   Permet de « sentir » la palette sur tout le site. */
.tabs .tab{ position:relative; }
.tabs .tab::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:-5px;
  height:4px;
  border-radius:999px;
  background: transparent;
  opacity:0;
  transition: opacity .15s ease;
}
.tabs .tab.active::after{ opacity:1; }
.tabs .tab:nth-child(1).active::after{ background: var(--accent-blue); }
.tabs .tab:nth-child(2).active::after{ background: var(--accent-purple); }
.tabs .tab:nth-child(3).active::after{ background: var(--accent-teal); }
.tabs .tab:nth-child(4).active::after{ background: var(--accent-orange); }
.tabs .tab:nth-child(5).active::after{ background: var(--accent-rose); }
.tabs .tab:nth-child(6).active::after{ background: var(--accent-green); }
.tabs .tab:nth-child(7).active::after{ background: var(--accent-yellow); }
.tabs .tab:nth-child(8).active::after{ background: var(--accent-indigo); }

/* =========================================================
   TOAST
   ========================================================= */
.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  padding:10px 14px;
  border-radius:999px;
  background: rgba(122,0,25,.92);
  color:#fff;
  box-shadow: var(--shadow);
  opacity:0;
  pointer-events:none;
  transition:.18s ease;
  border:1px solid rgba(255,255,255,.10);
}

.toast--show{
  opacity:1;
  transform:translateX(-50%) translateY(-2px);
}

/* =========================================================
   MODAL
   ========================================================= */
.modal__backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
}

.modal__card{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(760px,92vw);
  background: var(--card);
  color: var(--txt);
  border-radius:16px;
  border:1px solid var(--card-border);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.modal__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
}

.modal__title{font-weight:900}

.iconbtn{
  border:1px solid rgba(148,163,184,.65);
  background: rgba(122,0,25,.08);
  color:var(--txt);
  border-radius:12px;
  padding:6px 10px;
  cursor:pointer;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}


.iconbtn:hover{background: rgba(122,0,25,.10)}

.modal__body{padding:14px}

/* =========================================================
   AMÉLIORATIONS “ADMIN UI” (sans dépendre d’admin.php)
   - rend jolis les barres filtres / blocs internes
   ========================================================= */
.card .toolbar,
.card .filters,
.card .filterbar{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
  padding:10px 12px;
  border:1px solid rgba(148,163,184,.35);
  border-radius:14px;
  background: rgba(255,255,255,.55);
}

.card .toolbar .btn,
.card .filters .btn,
.card .filterbar .btn{
  height:40px;
}

.card .subcard,
.card .panel{
  padding:12px;
  border:1px solid rgba(148,163,184,.35);
  border-radius:16px;
  background: rgba(255,255,255,.65);
}

/* tables actions: boutons moins “massifs” */
.table .btn{
  padding:8px 10px;
  border-radius:12px;
  font-size:13px;
  box-shadow:none;
}

.table .btn--ghost{
  background: rgba(122,0,25,.08);
}

/* =========================================================
   RESPONSIVE TABLE (sécurité)
   ========================================================= */
@media (max-width: 860px){
  .table{
    display:block;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================================================
   BADGES PARCOURS (PORTFOLIO ÉLÈVE)
   ========================================================= */

.badge-parcours{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
  margin-top:6px;
  width:fit-content;
}

/* Parcours Avenir */
.badge-parcours--avenir{
  background:#dbeafe;
  color:#1e40af;
  border:1px solid #93c5fd;
}

/* PEAC */
.badge-parcours--peac{
  background:#ede9fe;
  color:#5b21b6;
  border:1px solid #c4b5fd;
}

/* Parcours Santé */
.badge-parcours--sante{
  background:#dcfce7;
  color:#166534;
  border:1px solid #86efac;
}

/* Parcours Citoyen */
.badge-parcours--citoyen{
  background:#ffedd5;
  color:#9a3412;
  border:1px solid #fdba74;
}

/* Fallback (si nouveau parcours) */
.badge-parcours--default{
  background:#e5e7eb;
  color:#374151;
  border:1px solid #cbd5f5;
}

/* =========================================================
   MODALES MODERNES (ÉLÈVE / AJOUT ACTIVITÉ / PARTICIPATION)
   Compatible avec :
   - #part-modal (display:flex via JS)
   - .modal-overlay + .modal (si tu en as)
   - améliore aussi la modale existante .modal__card/.modal__backdrop
   ========================================================= */

/* 1) Si ta modale élève est un DIV id="part-modal" */
#part-modal{
  position:fixed;
  inset:0;
  z-index:80;
  display:none;                 /* ton JS met display:flex */
  align-items:center;
  justify-content:center;
  padding:18px;
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(10px);
}

/* Si ton contenu de modale est un bloc interne (souvent .card) */
#part-modal > *{
  width:min(860px, 94vw);
  max-height: 86vh;
  overflow:auto;
  border-radius: 18px;
  border:1px solid rgba(148,163,184,.45);
  box-shadow: var(--shadow);
}

/* 2) Variante générique : .modal-overlay + .modal */
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(10px);
}

.modal{
  width:min(860px, 94vw);
  max-height: 86vh;
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.45);
  background: linear-gradient(180deg, rgba(255,241,245,.98), rgba(244,247,251,.98));
  color: var(--txt);
  box-shadow: var(--shadow);
}

/* =========================================================
   FIX: #modalParticipation (injectée par js/eleve.js)
   - sans ce bloc, la modale peut rester "dans le flux"
     et apparaître en bas de page
   ========================================================= */
#modalParticipation{
  position:fixed;
  inset:0;
  z-index:90; /* au-dessus de .modal-overlay/#part-modal (80) */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(10px);
}

#modalParticipation.hidden{ display:none; }

/* backdrop interne: cliquable pour fermer, sans masquer le contenu */
#modalParticipation .modal__backdrop{
  position:absolute;
  inset:0;
}

/* contenu : on garde ta structure .modal__content.card */
#modalParticipation .modal__content{
  position:relative;
  z-index:1;
  width:min(860px, 94vw);
  max-height:86vh;
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.45);
  box-shadow: var(--shadow);
}

/* Header moderne dans la modale */
.modal .modal__head,
#part-modal .modal__head{
  position: sticky;
  top: 0;
  z-index: 1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(148,163,184,.35);
  background: linear-gradient(180deg, rgba(244,247,251,.98), rgba(255,241,245,.90));
}

.modal .modal__title,
#part-modal .modal__title{
  font-weight:950;
  letter-spacing:.2px;
  color: var(--primary);
}

.modal .modal__body,
#part-modal .modal__body{
  padding:14px;
}

/* Champs dans modale : plus “premium” */
.modal .input, .modal select, .modal textarea,
#part-modal .input, #part-modal select, #part-modal textarea{
  background: #ffffff;
  border-color: rgba(148,163,184,.55);
}

/* Boutons dans modale */
.modal .btn--ghost,
#part-modal .btn--ghost{
  background: rgba(122,0,25,.08);
  border:1px solid rgba(122,0,25,.22);
  color:var(--txt);
  box-shadow:none;
}

/* Petits boutons “Fermer” */
.modal .iconbtn,
#part-modal .iconbtn{
  border:1px solid rgba(122,0,25,.22);
  background: rgba(122,0,25,.08);
  border-radius: 12px;
  padding:7px 10px;
  cursor:pointer;
  transition:.15s ease;
}
.modal .iconbtn:hover,
#part-modal .iconbtn:hover{ transform: translateY(-1px); }

/* Footer / barre d’actions de modale */
.modal .row[style*="justify-content:flex-end"],
#part-modal .row[style*="justify-content:flex-end"]{
  position: sticky;
  bottom: 0;
  background: rgba(244,247,251,.92);
  border-top:1px solid rgba(148,163,184,.25);
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Mobile */
@media (max-width:520px){
  #part-modal, .modal-overlay{ padding:12px; }
  .modal, #part-modal > *{ border-radius: 16px; }

  /* mobile: participation */
  #modalParticipation{ padding:12px; }
  #modalParticipation .modal__content{ border-radius:16px; }
}

/* =========================================================
   MODALES – HARMONISATION TYPO (ÉLÈVE / ADMIN)
   ========================================================= */

/* Texte par défaut dans les modales */
.modal,
.modal__card,
.modal-overlay,
#part-modal{
  color: var(--txt); /* texte sombre standard */
}

/* ================= TITRE MODALE ================= */
.modal__title,
.modal h2,
.modal__card h2,
#part-modal h2{
  color: #9a3412;          /* orange foncé */
  font-weight: 900;
  letter-spacing: .3px;
}

/* ================= INTERTITRES ================= */
.modal h3,
.modal__card h3,
.modal label,
.modal__card label,
#part-modal label{
  color: #1e40af;          /* bleu foncé */
  font-weight: 800;
}

/* ================= COMPÉTENCES / SECONDAIRE ================= */
.modal .muted,
.modal__card .muted,
#part-modal .muted,
.modal .badge,
.modal__card .badge,
.badge-parcours{
  color: #374151;          /* gris foncé */
}

/* ================= INPUTS / TEXTAREA ================= */
.modal input,
.modal textarea,
.modal select,
.modal__card input,
.modal__card textarea,
.modal__card select{
  color: var(--txt);
}

/* ================= LIENS ================= */
.modal a,
.modal__card a,
#part-modal a{
  color: #1e40af;
  font-weight: 700;
}

/* =========================================================
   MODALES – BOUTONS ANNULER / ENREGISTRER
   ========================================================= */

/* Texte bleu marine pour les boutons principaux en modale */
.modal .btn,
.modal__card .btn,
#part-modal .btn{
  color: #1e3a8a; /* bleu marine */
}

/* Cas spécifique : bouton Annuler (ghost) */
.modal .btn--ghost,
.modal__card .btn--ghost,
#part-modal .btn--ghost{
  color: #1e3a8a; /* bleu marine */
  font-weight: 800;
}

/* =========================================================
   FOOTER GLOBAL
   ========================================================= */
.footer{
  margin-top: 3rem;
  padding: 1rem 1.2rem;
  text-align: center;
  font-size: 0.85rem;
  color: #475569;
  border-top: 1px solid rgba(148,163,184,0.35);
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(6px);
}

.footer strong{
  color: #0b1c2d;
  font-weight: 600;
}


/* =========================================================
   COMPTEUR COMPÉTENCES (ÉLÈVE)
   ========================================================= */
.side__competences{
  margin: 14px 12px 8px;
  padding: 12px 12px;
  border: 1px solid rgba(148,163,184,0.35);
  border-radius: 16px;
  background: rgba(255,255,255,0.75);
  box-shadow: 0 14px 34px rgba(122,0,25,0.08);
}

.side__competences-title{
  font-weight: 800;
  font-size: .95rem;
  color: #0b1c2d;
  margin-bottom: 10px;
}

.side__competences-hint{
  margin-top: 10px;
  font-size: .78rem;
  color: #475569;
  line-height: 1.25;
}

.comp-stats{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  margin-top: 10px;
  font-size: .78rem;
}

.comp-stats__ok{ color: #166534; }      /* vert */
.comp-stats__pending{ color: #b91c1c; } /* rouge */

/* Cercle progressif */
.comp-ring{
  width: 120px;
  height: 120px;
  margin: 0 auto;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    conic-gradient(#1e40af var(--pct, 0%), rgba(148,163,184,0.30) 0);
  box-shadow: inset 0 0 0 10px rgba(255,255,255,0.85);
}

.comp-ring__inner{
  width: 86px;
  height: 86px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(148,163,184,0.35);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.comp-ring__points{
  font-size: 1.35rem;
  font-weight: 900;
  color: #0b1c2d;
  line-height: 1;
}

.comp-ring__label{
  margin-top: 2px;
  font-size: .78rem;
  color: #475569;
}

/* =========================================================
   Badges / niveaux (points compétences)
   ========================================================= */
.level-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .2px;
  border: 1px solid rgba(148,163,184,0.45);
  background: rgba(255,255,255,0.85);
  color: #0b1c2d;
}
.level-badge--bronze{ background: rgba(180,83,9,0.14); border-color: rgba(180,83,9,0.25); }
.level-badge--argent{ background: rgba(71,85,105,0.14); border-color: rgba(71,85,105,0.25); }
.level-badge--or{ background: rgba(234,179,8,0.18); border-color: rgba(234,179,8,0.28); }

/* =========================================================
   Progression par parcours
   ========================================================= */
.parcours-progress{ padding-top: 10px; border-top: 1px dashed rgba(148,163,184,0.35); }
.parcours-progress__title{ font-size: .78rem; font-weight: 800; color: #0b1c2d; margin-bottom: 8px; }
.parc-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.parc-name{ font-size: .78rem; color:#0b1c2d; font-weight:700; max-width: 60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.parc-meta{ font-size: .75rem; color:#475569; white-space:nowrap; }
.parc-bar{ height: 8px; border-radius: 999px; background: rgba(148,163,184,0.25); overflow:hidden; }
.parc-bar > div{ height: 100%; width: var(--w, 0%); background: #1e40af; }

/* =========================================================
   Validation compétences (vue adulte)
   ========================================================= */
.val-list{ margin-top: 8px; }
.val-item{ padding: 10px 12px; border: 1px solid rgba(148,163,184,0.35); border-radius: 14px; background: rgba(255,255,255,0.85); margin-top: 10px; }
.val-item__top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.val-item__title{ font-weight:800; color:#0b1c2d; }
.val-item__meta{ font-size:.78rem; color:#475569; margin-top:4px; }
.val-pill{ display:inline-flex; align-items:center; gap:6px; font-size:.75rem; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(148,163,184,0.35); }
.val-pill--pending{ color:#b91c1c; background: rgba(185,28,28,0.10); border-color: rgba(185,28,28,0.20); }
.val-pill--ok{ color:#166534; background: rgba(22,101,52,0.10); border-color: rgba(22,101,52,0.20); }


/* =========================================================
   USERS TABLE (Admin) : actions sous le nom
   ========================================================= */
.user-name{ font-weight:700; }
.user-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.user-actions .btn{ padding:6px 10px; font-size:.85rem; }

/* Badge neutre (info) */
.badge--info{
  background: rgba(176,0,32,0.14);
  border-color: rgba(176,0,32,0.25);
}

/* ==========================
   Proctored test (light)
   ========================== */
body.cf-proctor header.topbar{display:none !important;}
body.cf-proctor .side{display:none !important;}
body.cf-proctor main.layout{padding-top:10px !important;}
body.cf-proctor .grid{grid-template-columns:1fr !important;}
body.cf-proctor #tabExamens{max-width:980px;margin:0 auto;}
body.cf-proctor #elExamRunner{position:fixed;inset:0;background:var(--bg);overflow:auto;padding:12px;z-index:9999;}
body.cf-proctor #elExamRunner .card{max-width:980px;margin:0 auto;}


/* ==========================
   Proctored test (light)
   - Cache navigation + topbar
   - Met l'exam runner en plein écran visuel
   ========================== */
body.cf-proctor header.topbar{display:none !important;}
body.cf-proctor .side{display:none !important;}
body.cf-proctor .grid{grid-template-columns: 1fr !important;}
body.cf-proctor main.layout{padding-top:10px !important;}

body.cf-proctor #elExamRunner{
  position:fixed !important;
  inset:0 !important;
  background: var(--bg, var(--txt)) !important;
  overflow:auto !important;
  padding: 12px !important;
  z-index: 9999 !important;
}
body.cf-proctor #elExamRunner .card{max-width: 980px; margin: 0 auto;}

/* Plein écran examen: garder le footer collé en bas de l'écran */
body.cf-proctor.cf-exam-fullscreen-active{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.cf-proctor.cf-exam-fullscreen-active main.layout{
  flex: 1 1 auto;
  max-width: none !important;
  width: 100%;
  margin: 0;
  padding: 0 !important;
}
body.cf-proctor.cf-exam-fullscreen-active .footer{
  margin-top: auto;
}
body.cf-proctor.cf-exam-fullscreen-active section.card{
  max-width: none !important;
  width: 100%;
  margin: 0;
  border-radius: 0;
  animation: none !important;
  transform: none !important;
}
body.cf-proctor.cf-exam-fullscreen-active #tabExamens{
  max-width: none;
  margin: 0;
}
body.cf-proctor.cf-exam-fullscreen-active #elExamRunner{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  inset: auto !important;
  margin: 0 !important;
  padding: 10px 14px !important;
}
body.cf-proctor.cf-exam-fullscreen-active #elExamRunner .card{
  max-width: none !important;
  margin-left: 0;
  margin-right: 0;
}
body.cf-proctor.cf-exam-fullscreen-active #elExamTimerDock{
  max-width: none;
  width: 100%;
  margin: 0 0 10px 0;
}
body.cf-proctor .page > section.card > :not(#tabEcrites){
  display: none !important;
}
body.cf-proctor #tabEcrites > :not(#elExamRunner){
  display: none !important;
}

#elExamTimerDock{
  position: sticky;
  top: 0;
  z-index: 10040;
  max-width: 980px;
  margin: 0 auto 10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(233,245,255,.24);
  background: linear-gradient(120deg, rgba(7,28,50,.96), rgba(12,68,116,.95));
  color: #eff6ff;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 26px rgba(2,14,28,.35);
}

#elExamTimerDock .el-exam-timer-label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .92;
}

#elExamTimerDock .el-exam-timer-hint{
  margin-left: auto;
  font-size: 12px;
  opacity: .9;
  text-align: right;
}

#elExamTimerValue{
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .04em;
}

body.cf-proctor #elExamTimerDock{
  top: 0;
}

@media (max-width: 640px){
  #elExamTimerDock{
    padding: 9px 10px;
    gap: 8px;
    border-radius: 12px;
  }
  #elExamTimerValue{
    font-size: 20px;
  }
  #elExamTimerDock .el-exam-timer-label,
  #elExamTimerDock .el-exam-timer-hint{
    font-size: 11px;
  }
}


/* -----------------------------
   Tabs ergonomiques (scroll horizontal)
   ----------------------------- */
.tabs--scroll{
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.tabs--scroll .tab{ white-space: nowrap; }
.tabs--scroll::-webkit-scrollbar{ height: 6px; }
.tabs--scroll::-webkit-scrollbar-thumb{ background: rgba(122,0,25,.15); border-radius: 999px; }
.tabs--scroll::-webkit-scrollbar-track{ background: transparent; }


/* === Exam runner: media always visible + one-question navigation === */
#elRunMedia{
  position: sticky;
  top: 12px;
  z-index: 5;
}
#elRunMedia iframe, #elRunMedia video, #elRunMedia audio{
  max-width: 100%;
}

/* Hotfix: en plein écran navigateur, éviter que le média masque les questions */
body.cf-proctor.cf-exam-fullscreen-active #elRunMedia{
  position: static;
  top: auto;
  z-index: 1;
}
body.cf-proctor.cf-exam-fullscreen-active #elRunMedia iframe{
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: min(40vh, 320px) !important;
}
body.cf-proctor.cf-exam-fullscreen-active #elRunMedia video{
  display: block;
  width: 100% !important;
  max-height: min(40vh, 320px);
}
body.cf-proctor.cf-exam-fullscreen-active #elRunMedia audio{
  width: 100% !important;
}


/* Outils: liste des élèves sélectionnés */
.selected-list{
  border:1px solid #c6d3e1;
  border-radius:12px;
  padding:8px;
  background:#fff;
  max-height:210px;
  overflow:auto;
}
.selected-list .pill{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #c6d3e1;
  margin:4px 6px 0 0;
  font-size:13px;
  background:#f8fafc;
}
.selected-list .muted{ margin:2px 0; }


/* Onglets horizontaux (harmonisation des espaces) */
.page{ width:100%; }
.tabs--top{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 14px 0 12px;
}
.tabs--top .tab{ flex: 0 0 auto; }


/* === Onglets : grille compacte (utilisée pour Élève) === */
.tabs--grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 14px 0 12px;
}
.tabs--grid .tab{
  width: 100%; /* chaque bouton remplit sa cellule */
}
@media (max-width: 700px){
  .tabs--grid{ grid-template-columns: 1fr; }
}


/* =========================================================
   OVERRIDE PALETTE (rouge / grenat) — tabs & nav
   ========================================================= */
.tabs .tab:nth-child(1){ background: rgba(122,0,25,.12) !important; border-color: rgba(122,0,25,.28) !important; }
.tabs .tab:nth-child(2){ background: rgba(176,0,32,.10) !important; border-color: rgba(176,0,32,.26) !important; }
.tabs .tab:nth-child(3){ background: rgba(193,18,31,.10) !important; border-color: rgba(193,18,31,.26) !important; }
.tabs .tab:nth-child(4){ background: rgba(220,38,38,.10) !important; border-color: rgba(220,38,38,.26) !important; }
.tabs .tab:nth-child(5){ background: rgba(225,29,72,.10) !important; border-color: rgba(225,29,72,.26) !important; }
.tabs .tab:nth-child(6){ background: rgba(159,18,57,.10) !important; border-color: rgba(159,18,57,.26) !important; }
.tabs .tab:nth-child(7){ background: rgba(136,19,55,.10) !important; border-color: rgba(136,19,55,.26) !important; }
.tabs .tab:nth-child(8){ background: rgba(248,113,113,.10) !important; border-color: rgba(248,113,113,.26) !important; }

.nav a:hover{ background: rgba(176,0,32,.12) !important; border-color: rgba(176,0,32,.22) !important; }
.nav a.active{ background: rgba(122,0,25,.16) !important; border-color: rgba(122,0,25,.30) !important; }

/* =========================================================
   V28 VISUAL OVERHAUL (professional + dynamic)
   Visual layer only: no JS/HTML behavior changes.
   ========================================================= */
:root{
  --bg:#0d2238;
  --bg0:#071321;
  --bg1:#0f2842;
  --bg2:#19456d;

  --card:#f6fafe;
  --card-soft:#edf4fc;
  --card-border:#c7d7ea;

  --txt:#11263d;
  --txt-inv:#f4f8ff;
  --muted:#59718c;

  --primary:#0b6dde;
  --secondary:#00a3b1;
  --plum:#0f3558;

  --accent-blue:#0b6dde;
  --accent-cyan:#07b6d5;
  --accent-teal:#00a3b1;
  --accent-green:#1b9d74;
  --accent-lime:#5bbf4a;
  --accent-yellow:#e6b316;
  --accent-orange:#e57b2b;
  --accent-red:#d64545;
  --accent-rose:#d75d72;
  --accent-pink:#cf4f82;
  --accent-purple:#5866c9;
  --accent-indigo:#3557b7;
  --accent-slate:#5b728c;

  --role-eleve:#1f6fd0;
  --role-prof:#157c9a;
  --role-referent:#0d7c63;
  --role-viesco:#be5f22;
  --role-admin:#283a50;

  --ok:#1a9b68;
  --warn:#e5a11f;
  --bad:#d94d4d;

  --line:rgba(17,61,102,.16);
  --shadow: 0 20px 46px rgba(7,25,44,.22);
  --r12:14px;
  --r16:20px;
}

body{
  font-family:"Avenir Next", "Segoe UI Variable Text", "Trebuchet MS", "Segoe UI", sans-serif;
  background:
    radial-gradient(1100px 620px at -10% -14%, rgba(0,163,177,.26), transparent 58%),
    radial-gradient(840px 520px at 110% -4%, rgba(11,109,222,.30), transparent 60%),
    linear-gradient(150deg, #06111d 0%, #0f2740 44%, #18466f 100%);
  color:var(--txt-inv);
}

@keyframes cf-fade-up{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes cf-pulse{
  0%{ box-shadow:0 0 0 0 rgba(11,109,222,.22); }
  100%{ box-shadow:0 0 0 14px rgba(11,109,222,0); }
}

.topbar{
  background: linear-gradient(120deg, rgba(6,18,32,.90), rgba(13,39,64,.88));
  border-bottom:1px solid rgba(214,231,250,.20);
  box-shadow: 0 8px 24px rgba(1,10,19,.30);
}

.brand__sep{
  background: linear-gradient(180deg, var(--secondary), var(--primary));
}

.brand__name{ letter-spacing:.9px; }

.brand__sub{
  color: rgba(232,241,255,.90);
  font-size: 12px;
}

.userchip{
  background: rgba(220,236,255,.12);
  border: 1px solid rgba(220,236,255,.25);
  backdrop-filter: blur(8px);
}

.iconbtn{
  background: rgba(220,236,255,.12);
  border:1px solid rgba(220,236,255,.25);
  color:var(--txt-inv);
}

.iconbtn:hover{
  background: rgba(220,236,255,.20);
  transform:translateY(-1px);
}

.iconbadge{
  border-color: rgba(7,21,36,.95);
}

.layout{
  max-width: 1260px;
  padding: 18px;
}

.grid{
  gap:16px;
}

.side{
  background: linear-gradient(180deg, rgba(246,250,255,.95), rgba(238,246,255,.92));
  border-color: rgba(171,198,228,.75);
}

.side__title{
  color: #13467c;
}

.nav{
  gap:8px;
}

.nav a{
  border:1px solid rgba(122,153,188,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(242,248,255,.60));
  color:#1a3658;
  font-weight:800;
}

.nav a::before{
  left:8px;
  width:5px;
  background: linear-gradient(180deg, rgba(11,109,222,.55), rgba(0,163,177,.55));
}

.nav a:hover{
  background: linear-gradient(145deg, rgba(220,236,255,.76), rgba(198,227,255,.64)) !important;
  border-color: rgba(80,135,196,.40) !important;
  color:#11365e;
}

.nav a.active{
  background: linear-gradient(145deg, rgba(11,109,222,.18), rgba(0,163,177,.17)) !important;
  border-color: rgba(27,124,197,.45) !important;
  color:#0f3f68;
}

.card{
  background:
    radial-gradient(840px 300px at 12% -6%, rgba(11,109,222,.10) 0%, transparent 62%),
    linear-gradient(165deg, rgba(255,255,255,.94), rgba(239,246,255,.93));
  border:1px solid var(--card-border);
  border-radius: 20px;
  box-shadow: 0 16px 34px rgba(7,29,53,.16);
  color:var(--txt);
  animation: cf-fade-up .34s ease both;
}

.card h2{
  color:#123b61;
  letter-spacing:.25px;
}

.card h3{
  color:#215b85;
}

.muted{
  color:var(--muted);
}

.btn{
  background: linear-gradient(120deg, var(--primary), var(--secondary));
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 26px rgba(11,109,222,.30);
  border-radius: 12px;
  letter-spacing:.15px;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow: 0 14px 30px rgba(11,109,222,.34);
}

.btn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(11,109,222,.24), 0 10px 26px rgba(11,109,222,.30);
}

.btn--ghost{
  background: linear-gradient(150deg, rgba(14,54,89,.07), rgba(0,163,177,.05));
  color:#174265;
  border:1px solid rgba(23,88,141,.30);
}

.btn--ghost:hover{
  background: linear-gradient(145deg, rgba(11,109,222,.14), rgba(0,163,177,.11));
  color:#103a5e;
}

.btn--danger{
  background: linear-gradient(120deg, #c93636, #ea6b4a);
  box-shadow: 0 10px 22px rgba(217,77,77,.30);
}

.btn--ok{
  background: linear-gradient(120deg, #0f9b6a, #23b97f);
  box-shadow: 0 10px 22px rgba(26,155,104,.28);
}

.btn--warn{
  background: linear-gradient(120deg, #db9220, #f2b830);
  box-shadow: 0 10px 22px rgba(229,161,31,.30);
}

.btn--soft{
  background: linear-gradient(120deg, #47617f, #5b7ca3);
  box-shadow: 0 10px 22px rgba(72,97,127,.28);
}

.input, select, textarea{
  background: linear-gradient(180deg, #ffffff, #f5f9ff);
  border:1px solid rgba(109,145,183,.52);
  color:#153150;
}

.input::placeholder, textarea::placeholder{
  color:#6e8299;
}

.input:focus, select:focus, textarea:focus{
  border-color: rgba(11,109,222,.65);
  box-shadow: 0 0 0 4px rgba(11,109,222,.18);
}

label{
  color:#365c81;
}

.table{
  border:1px solid rgba(125,157,192,.44);
}

.table th{
  background: linear-gradient(180deg, #ecf4ff, #e2efff);
  color:#153a61;
  border-bottom:1px solid rgba(125,157,192,.42);
}

.table td{
  background: rgba(255,255,255,.86);
}

.table tbody tr:hover td{
  background: rgba(229,241,255,.66);
}

.badge{
  background: #e5effb;
  color:#20466d;
  border-color: rgba(78,123,170,.35);
}

.badge--ok{
  background:#def5e9;
  color:#186647;
  border-color: rgba(20,142,93,.30);
}

.badge--danger{
  background:#fde8e8;
  color:#a62e2e;
  border-color: rgba(202,66,66,.32);
}

.tabs{
  gap:10px;
}

.tabs .tab:nth-child(n){
  background: linear-gradient(180deg, rgba(251,254,255,.95), rgba(236,246,255,.86)) !important;
  border:1px solid rgba(98,140,184,.30) !important;
  color:#1a436b !important;
}

.tabs .tab{
  border-radius: 999px;
  min-height: 45px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}

.tabs .tab:hover{
  color:#0f3c66 !important;
  border-color: rgba(11,109,222,.46) !important;
  transform: translateY(-1px);
}

.tabs .tab.active{
  background: linear-gradient(120deg, rgba(11,109,222,.94), rgba(0,163,177,.94)) !important;
  color:#fff !important;
  border-color: rgba(8,78,159,.85) !important;
  box-shadow: 0 10px 24px rgba(11,109,222,.28);
}

.tabs .tab::after{
  display:none !important;
}

.toast{
  background: linear-gradient(120deg, rgba(9,30,52,.96), rgba(19,68,104,.93));
  border:1px solid rgba(208,227,249,.22);
}

.modal__backdrop{
  background: rgba(4,16,29,.62);
  backdrop-filter: blur(8px);
}

.modal__card, .modal{
  background: linear-gradient(160deg, rgba(252,255,255,.97), rgba(239,246,255,.95));
  border-color: rgba(143,176,212,.56);
}

.modal__head{
  background: linear-gradient(180deg, rgba(233,244,255,.96), rgba(245,250,255,.96));
}

.modal__title{
  color:#155082;
}

.tools-subtab.active{
  box-shadow: 0 0 0 3px rgba(11,109,222,.16);
  animation: cf-pulse .9s ease-out 1;
}

.footer{
  background: linear-gradient(180deg, rgba(244,249,255,.72), rgba(234,243,254,.72));
  border-top:1px solid rgba(160,190,223,.45);
}

hr{
  border:none;
  border-top:1px solid rgba(136,166,198,.40);
}

/* Home page (index.php) */
body.home-page{
  min-height:100vh;
  background:
    radial-gradient(1300px 700px at -12% -20%, rgba(0,163,177,.28), transparent 58%),
    radial-gradient(980px 550px at 110% -8%, rgba(11,109,222,.34), transparent 60%),
    linear-gradient(148deg, #050e19 0%, #0d2238 44%, #174369 100%);
}

.index-layout{
  max-width: 1320px;
  padding-top: 70px;
  padding-bottom: 56px;
}

.index-card{
  position:relative;
  padding: clamp(22px, 3.1vw, 46px);
  border-radius: 30px;
  overflow:hidden;
}

.index-card::before{
  content:"";
  position:absolute;
  inset:-32% auto auto -16%;
  width:430px;
  height:430px;
  background: radial-gradient(circle, rgba(11,109,222,.22), rgba(11,109,222,0));
  pointer-events:none;
}

.index-card::after{
  content:"";
  position:absolute;
  inset:auto -16% -46% auto;
  width:460px;
  height:460px;
  background: radial-gradient(circle, rgba(0,163,177,.18), rgba(0,163,177,0));
  pointer-events:none;
}

.index-head,
.index-form-row,
.login-row,
.index-parent-row{
  position:relative;
  z-index:1;
}

.index-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}

.index-head__left{
  display:flex;
  align-items:center;
  gap:14px;
  flex:1 1 400px;
}

.index-head__logo{
  width: clamp(88px, 8.7vw, 122px);
  object-fit:contain;
}

.index-head__sep{
  width:2px;
  height:58px;
  border-radius:2px;
  background: linear-gradient(180deg, var(--primary), var(--secondary));
}

.index-head__name{
  font-weight:950;
  font-size: clamp(28px, 4.6vw, 42px);
  letter-spacing:.9px;
  line-height:1.02;
  color:#0f3960;
}

.index-head__sub{
  font-size: clamp(15px, 2vw, 19px);
  color:#507395;
  margin-top:8px;
}

.index-head__right{
  display:flex;
  gap:18px;
  align-items:center;
}

.index-head__right img{
  width: clamp(74px, 8vw, 120px);
  height: clamp(74px, 8vw, 120px);
  object-fit:contain;
  filter: drop-shadow(0 10px 22px rgba(8,31,56,.16));
}

.index-form-row{
  margin-top: clamp(26px, 3.4vw, 42px);
}

.index-label{
  font-size: clamp(15px, 1.9vw, 20px);
  color:#22507b;
}

.index-input{
  padding: clamp(14px, 2.2vw, 20px);
  font-size: clamp(18px, 2.6vw, 24px);
  border-radius: 20px;
}

.login-row{
  margin-top: 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

.login-help{
  max-width:700px;
  font-size: clamp(14px, 1.8vw, 18px);
  line-height:1.55;
  color:#4f7091;
}

.index-login-btn{
  padding: clamp(14px, 2.5vw, 21px) clamp(24px, 3.8vw, 36px);
  font-size: clamp(18px, 2.6vw, 25px);
  border-radius: 22px;
  font-weight:900;
}

.index-parent-row{
  margin-top:14px;
  justify-content:flex-end;
}

.index-parent-btn{
  border-radius: 20px;
  font-weight:800;
}

.home-credit{
  margin-top: 30px;
  text-align:center;
  font-size: clamp(14px, 1.7vw, 16px);
  color: rgba(226,238,255,.86);
}

.home-credit b{ color:#ffffff; }

@media (max-width: 920px){
  .index-head{ justify-content:center; }
  .index-head__left{ justify-content:center; }
  .index-head__txt{ text-align:center; }
  .index-head__right{ width:100%; justify-content:center; }
  .login-row{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 620px){
  .topbar{
    padding: 10px 12px;
  }
  .brand__logo{
    width:36px;
    height:36px;
  }
  .brand__sep{
    height:34px;
  }
  .brand__name{
    font-size: 15px;
  }
  .brand__sub{
    font-size: 11px;
  }
  .userchip{
    padding:6px 9px;
  }
  .layout{
    padding: 12px;
  }
  .index-layout{
    padding-top: 34px;
  }
  .index-parent-row{
    justify-content:stretch;
  }
  .index-parent-row .btn{
    width:100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .card, .btn, .tab, .tools-subtab.active{
    animation:none !important;
    transition:none !important;
  }
}

@media print{
  .card{ animation:none !important; }
}

/* =========================================================
   Tab reorganization + mobile navigation
   ========================================================= */
.tabs--organized{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin: 4px 0 12px;
}

.tabs--organized .tabs__group{
  flex: 0 0 100%;
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:900;
  color:#4b7093;
  opacity:.95;
}

.tabs--organized .tabs__group::after{
  content:"";
  flex:1;
  height:1px;
  background: linear-gradient(90deg, rgba(73,118,163,.44), rgba(73,118,163,0));
}

.tabs--organized .tab{
  flex:0 0 auto;
}

.tabs-mobile-nav{
  display:none;
  margin-bottom:10px;
}

.tabs-mobile-nav__label{
  display:block;
  margin:0 0 6px;
  font-size:12px;
  color:#2e5982;
  font-weight:800;
}

.tabs-mobile-nav__select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(109,145,183,.52);
  background: linear-gradient(180deg, #ffffff, #f5f9ff);
  color:#153150;
}

.tabs-mobile-nav__select:focus{
  outline:none;
  border-color: rgba(11,109,222,.65);
  box-shadow: 0 0 0 4px rgba(11,109,222,.18);
}

.tabs--scroll{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
}

.tabs--scroll .tab{
  width:auto;
  flex:0 0 auto;
  white-space:nowrap;
}

.tabs--scroll .tabs__group{
  min-width:100%;
}

.tabs--scroll::-webkit-scrollbar{
  height:6px;
}

.tabs--scroll::-webkit-scrollbar-thumb{
  background: rgba(84,123,161,.35);
  border-radius:999px;
}

.tabs--scroll::-webkit-scrollbar-track{
  background: transparent;
}

@media (max-width: 980px){
  .tabs--organized .tab{
    min-height:44px;
  }
}

@media (max-width: 760px){
  .tabs-mobile-nav{
    display:block;
  }
  .tabs--organized .tabs__group{
    display:none;
  }
  .tabs--organized .tab{
    min-width:max-content;
  }
  .tabs--organized{
    margin-top: 0;
  }
}

/* Hotfix menu visibility:
   Organized tab bars wrap on desktop and stay horizontally scrollable on mobile. */
.tabs--organized.tabs--scroll{
  flex-wrap:wrap;
  overflow-x:visible;
  overflow-y:visible;
  padding-bottom:0;
}

.tabs--organized.tabs--scroll .tabs__group{
  min-width:0;
  flex:0 0 100%;
}

.tabs--organized.tabs--scroll .tab{
  white-space:normal;
}

@media (max-width: 760px){
  .tabs--organized.tabs--scroll{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:4px;
  }
  .tabs--organized.tabs--scroll .tab{
    white-space:nowrap;
  }
}

/* =========================================================
   Tabs style (inspiration ELTA Madagascar)
   - style plus lisible/professionnel
   - conserve classes et structure existantes
   ========================================================= */
.tabs .tab{
  background: #ffffff !important;
  color: #0f1f33 !important;
  border: 1px solid rgba(15,31,51,.16) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-weight: 800 !important;
  transform: none !important;
  filter: none !important;
}

.tabs .tab:hover{
  background: #f4f7fb !important;
  color: #0f1f33 !important;
  border-color: rgba(15,31,51,.30) !important;
  transform: none !important;
  filter: none !important;
}

.tabs .tab.active{
  background: linear-gradient(180deg, #8f1029, #6f0d20) !important;
  color: #ffffff !important;
  border-color: #6f0d20 !important;
  box-shadow: 0 8px 18px rgba(111,13,32,.24) !important;
}

.tabs .tab::after{
  display: none !important;
}

.tabs--organized .tabs__group{
  color:#4b5e74 !important;
  letter-spacing:.10em !important;
}

.tabs--organized .tabs__group::after{
  background: linear-gradient(90deg, rgba(75,94,116,.34), rgba(75,94,116,0)) !important;
}

/* =========================================================
   Catégories en onglets + sous-menus au hover
   (généré dynamiquement par js/common.js sur .tabs--organized)
   ========================================================= */
.tabs.tabs--organized{
  overflow: visible !important;
}

.tabs-categories{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-start;
  width:100%;
}

.tabs-cat{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width: 180px;
}

.tabs-cat > .tab--category{
  width:100%;
  justify-content:space-between;
  text-align:left;
  padding-right:38px;
  position:relative;
}

.tabs-cat > .tab--category::before{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:8px;
  height:8px;
  margin-top:-6px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform: rotate(45deg);
  opacity:.82;
}

.tabs-cat__panel{
  position:absolute;
  top: calc(100% + 6px);
  left:0;
  z-index: 2200;
  min-width: 240px;
  max-width: min(86vw, 360px);
  display:none;
  flex-direction:column;
  gap:6px;
  padding:8px;
  border-radius:12px;
  border:1px solid rgba(15,31,51,.16);
  background:#fff;
  box-shadow: 0 16px 30px rgba(15,31,51,.16);
}

.tabs-cat__panel .tab{
  width:100%;
  min-height:40px;
  justify-content:flex-start;
  text-align:left;
  padding:8px 12px;
  border-radius:10px !important;
}

@media (hover:hover){
  .tabs-cat:hover > .tabs-cat__panel{
    display:flex;
  }
}

.tabs-cat.is-open > .tabs-cat__panel{
  display:flex;
}

.tabs-cat.is-current > .tab--category{
  background: linear-gradient(180deg, #8f1029, #6f0d20) !important;
  color:#fff !important;
  border-color:#6f0d20 !important;
}

.tabs-cat.is-current > .tab--category::before{
  opacity:.95;
}

@media (max-width: 900px){
  .tabs-categories{
    display:block;
  }
  .tabs-cat{
    width:100%;
    min-width:0;
    margin-bottom:8px;
  }
  .tabs-cat__panel{
    position:static;
    top:auto;
    left:auto;
    max-width:none;
    margin-top:6px;
    box-shadow:none;
    border-color: rgba(15,31,51,.14);
  }
}

/* =========================================================
   V46 - CLAIREFOLIOS style model (red palette)
   Visual layer only. No JS/back-end behavior changes.
   ========================================================= */
:root{
  --cf-red-950:#4f0a18;
  --cf-red-900:#650d1f;
  --cf-red-800:#7f1129;
  --cf-red-700:#991633;
  --cf-red-600:#b61f43;
  --cf-red-500:#cf2f56;
  --cf-red-100:#fde8ef;
  --cf-red-050:#fff7fa;
}

body{
  background:
    radial-gradient(1200px 620px at -12% -22%, rgba(182,31,67,.25), transparent 62%),
    radial-gradient(980px 520px at 112% -6%, rgba(127,17,41,.20), transparent 60%),
    linear-gradient(180deg, #fff8fb 0%, #fff2f6 100%) !important;
  color:#31111d !important;
}

body.home-page{
  background:
    radial-gradient(1300px 700px at -12% -20%, rgba(182,31,67,.30), transparent 58%),
    radial-gradient(980px 550px at 110% -8%, rgba(127,17,41,.32), transparent 60%),
    linear-gradient(148deg, #5a0c1b 0%, #7f1129 44%, #991633 100%) !important;
}

.topbar{
  background: linear-gradient(128deg, var(--cf-red-950), var(--cf-red-800) 48%, #6f0f24) !important;
  border-bottom:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 14px 32px rgba(95,10,29,.36) !important;
}

.brand__sep{
  background: linear-gradient(180deg, #f47f98, var(--cf-red-500)) !important;
}

.brand__name,
.brand__sub{
  color:#fff6f9 !important;
}

.userchip,
.iconbtn{
  background: rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.26) !important;
  color:#fff !important;
}

.iconbtn:hover{
  background: rgba(255,255,255,.18) !important;
}

.layout{
  max-width:min(1280px, calc(100% - 20px)) !important;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,248,251,.93)) !important;
  border:1px solid rgba(154,21,53,.18) !important;
  box-shadow:0 16px 36px rgba(95,10,29,.12) !important;
  color:#31111d !important;
}

.card h2, .card h3{
  color:#5a1024 !important;
}

.muted, label{
  color:#6a3a4c !important;
}

.btn{
  background: linear-gradient(130deg, var(--cf-red-800), var(--cf-red-500)) !important;
  border:1px solid rgba(125,15,40,.42) !important;
  color:#fff !important;
  box-shadow:0 9px 18px rgba(125,15,40,.28) !important;
}

.btn:hover{
  filter:brightness(1.03);
}

.btn--ghost{
  border-color: rgba(125,15,40,.35) !important;
  color: var(--cf-red-800) !important;
  background: rgba(255,255,255,.84) !important;
  box-shadow:none !important;
}

.btn--ghost:hover{
  background: rgba(252,231,238,.72) !important;
}

.input, select, textarea{
  background:#fff !important;
  border:1px solid rgba(154,21,53,.28) !important;
  color:#331522 !important;
}

.input::placeholder, textarea::placeholder{
  color:#8b6271 !important;
}

.input:focus, select:focus, textarea:focus{
  border-color: rgba(154,21,53,.54) !important;
  box-shadow: 0 0 0 .2rem rgba(154,21,53,.14) !important;
}

.table{
  border-color: rgba(154,21,53,.18) !important;
}

.table th{
  background: rgba(154,21,53,.08) !important;
  color:#5a1024 !important;
}

.table > :not(caption) > * > *{
  border-color: rgba(154,21,53,.14) !important;
}

.tabs .tab{
  background:#fff !important;
  color:#4b1526 !important;
  border:1px solid rgba(154,21,53,.22) !important;
  border-radius:12px !important;
  box-shadow:none !important;
}

.tabs .tab:hover{
  background: rgba(154,21,53,.08) !important;
  color:#3f1622 !important;
  border-color: rgba(154,21,53,.36) !important;
}

.tabs .tab.active{
  background: linear-gradient(180deg, #8f1029, #6f0d20) !important;
  color:#fff !important;
  border-color:#6f0d20 !important;
  box-shadow: 0 8px 18px rgba(111,13,32,.24) !important;
}

.tabs--organized .tabs__group{
  color:#7b2f47 !important;
}

.tabs--organized .tabs__group::after{
  background: linear-gradient(90deg, rgba(123,47,71,.34), rgba(123,47,71,0)) !important;
}

.tabs-cat > .tab--category::before{
  opacity:.9;
}

.tabs-cat__panel{
  border:1px solid rgba(154,21,53,.20) !important;
  background:#fff !important;
  box-shadow: 0 16px 30px rgba(95,10,29,.18) !important;
}

.tabs-cat.is-current > .tab--category{
  background: linear-gradient(180deg, #8f1029, #6f0d20) !important;
  color:#fff !important;
  border-color:#6f0d20 !important;
}

.tabs-mobile-nav__label{
  color:#6a2d44 !important;
}

.tabs-mobile-nav__select{
  border:1px solid rgba(154,21,53,.28) !important;
  background:#fff !important;
  color:#3f1622 !important;
}

.tabs-mobile-nav__select:focus{
  border-color: rgba(154,21,53,.54) !important;
  box-shadow: 0 0 0 .2rem rgba(154,21,53,.14) !important;
}

.footer{
  border-top: 1px solid rgba(154,21,53,.18) !important;
  background: rgba(255,255,255,.78) !important;
  color:#5a3a47 !important;
}

.footer strong{
  color:#4f0a18 !important;
}

.index-head__name{
  color:#5a1024 !important;
}

.index-head__sub,
.login-help{
  color:#7c5463 !important;
}

.home-credit{
  color:rgba(255,241,245,.92) !important;
}

/* =========================================================
   V47 - CLAIREFOLIOS style scolaire/professionnel
   Visual layer only. No JS/back-end behavior changes.
   ========================================================= */
:root{
  --cf-school-navy-950:#0f2238;
  --cf-school-navy-900:#16324f;
  --cf-school-navy-800:#204566;
  --cf-school-blue-700:#2f6292;
  --cf-school-blue-600:#3d79b1;
  --cf-school-blue-500:#4c93cd;
  --cf-school-sky-100:#e8f1fa;
  --cf-school-sky-050:#f4f8fd;
}

body{
  background:
    radial-gradient(1200px 620px at -12% -22%, rgba(76,147,205,.16), transparent 62%),
    radial-gradient(980px 520px at 112% -6%, rgba(47,98,146,.12), transparent 60%),
    linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%) !important;
  color:#1f2f42 !important;
}

body.home-page{
  background:
    radial-gradient(1300px 700px at -12% -20%, rgba(76,147,205,.20), transparent 58%),
    radial-gradient(980px 550px at 110% -8%, rgba(47,98,146,.22), transparent 60%),
    linear-gradient(148deg, #102236 0%, #1a395a 44%, #275177 100%) !important;
}

.topbar{
  background: linear-gradient(125deg, var(--cf-school-navy-950), var(--cf-school-navy-900) 52%, #1d4267) !important;
  border-bottom:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 12px 26px rgba(12,30,49,.30) !important;
}

.brand__sep{
  background: linear-gradient(180deg, #7db6e1, var(--cf-school-blue-500)) !important;
}

.brand__name,
.brand__sub{
  color:#f4f9ff !important;
}

.userchip,
.iconbtn{
  background: rgba(255,255,255,.13) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  color:#fff !important;
}

.iconbtn:hover{
  background: rgba(255,255,255,.20) !important;
}

.layout{
  max-width:min(1280px, calc(100% - 20px)) !important;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,251,255,.94)) !important;
  border:1px solid rgba(56,102,142,.20) !important;
  box-shadow:0 14px 30px rgba(19,44,70,.10) !important;
  color:#1f2f42 !important;
}

.card h2, .card h3{
  color:#21456a !important;
}

.muted, label{
  color:#5b728b !important;
}

.btn{
  background: linear-gradient(130deg, var(--cf-school-navy-800), var(--cf-school-blue-600)) !important;
  border:1px solid rgba(26,57,90,.45) !important;
  color:#fff !important;
  box-shadow:0 8px 16px rgba(22,50,79,.22) !important;
}

.btn:hover{
  filter:brightness(1.04);
}

.btn--ghost{
  border-color: rgba(47,98,146,.34) !important;
  color: var(--cf-school-navy-900) !important;
  background: rgba(255,255,255,.90) !important;
  box-shadow:none !important;
}

.btn--ghost:hover{
  background: rgba(232,241,250,.70) !important;
}

.input, select, textarea{
  background:#fff !important;
  border:1px solid rgba(56,102,142,.30) !important;
  color:#1f2f42 !important;
}

.input::placeholder, textarea::placeholder{
  color:#7c90a6 !important;
}

.input:focus, select:focus, textarea:focus{
  border-color: rgba(47,98,146,.56) !important;
  box-shadow: 0 0 0 .2rem rgba(47,98,146,.14) !important;
}

.table{
  border-color: rgba(56,102,142,.22) !important;
}

.table th{
  background: rgba(61,121,177,.10) !important;
  color:#27496d !important;
}

.table > :not(caption) > * > *{
  border-color: rgba(56,102,142,.16) !important;
}

.tabs .tab{
  background:#fff !important;
  color:#27496d !important;
  border:1px solid rgba(56,102,142,.24) !important;
  border-radius:12px !important;
  box-shadow:none !important;
}

.tabs .tab:hover{
  background: rgba(61,121,177,.10) !important;
  color:#21456a !important;
  border-color: rgba(47,98,146,.38) !important;
}

.tabs .tab.active{
  background: linear-gradient(180deg, var(--cf-school-navy-800), var(--cf-school-navy-900)) !important;
  color:#fff !important;
  border-color: var(--cf-school-navy-900) !important;
  box-shadow: 0 8px 16px rgba(22,50,79,.20) !important;
}

.tabs--organized .tabs__group{
  color:#4f6882 !important;
}

.tabs--organized .tabs__group::after{
  background: linear-gradient(90deg, rgba(79,104,130,.36), rgba(79,104,130,0)) !important;
}

.tabs-cat__panel{
  border:1px solid rgba(56,102,142,.20) !important;
  background:#fff !important;
  box-shadow: 0 14px 24px rgba(19,44,70,.14) !important;
}

.tabs-cat.is-current > .tab--category{
  background: linear-gradient(180deg, var(--cf-school-navy-800), var(--cf-school-navy-900)) !important;
  color:#fff !important;
  border-color: var(--cf-school-navy-900) !important;
}

.tabs-mobile-nav__label{
  color:#4f6882 !important;
}

.tabs-mobile-nav__select{
  border:1px solid rgba(56,102,142,.30) !important;
  background:#fff !important;
  color:#1f2f42 !important;
}

.tabs-mobile-nav__select:focus{
  border-color: rgba(47,98,146,.56) !important;
  box-shadow: 0 0 0 .2rem rgba(47,98,146,.14) !important;
}

.footer{
  border-top: 1px solid rgba(56,102,142,.20) !important;
  background: rgba(255,255,255,.84) !important;
  color:#5b728b !important;
}

.footer strong{
  color:#16324f !important;
}

.index-head__name{
  color:#21456a !important;
}

.index-head__sub,
.login-help{
  color:#61778f !important;
}

.home-credit{
  color:rgba(236,244,253,.95) !important;
}

/* =========================================================
   V48 - CLAIREFOLIOS style bleu fonce
   Visual layer only. No JS/back-end behavior changes.
   ========================================================= */
:root{
  --cf-deep-950:#071326;
  --cf-deep-900:#0c1f38;
  --cf-deep-850:#102946;
  --cf-deep-800:#16355b;
  --cf-deep-700:#1f4a78;
  --cf-deep-600:#2a5f96;
  --cf-deep-500:#3a76b3;
  --cf-deep-100:#dbe8f6;
  --cf-deep-050:#f2f7fd;
}

body{
  background:
    radial-gradient(1200px 620px at -12% -22%, rgba(58,118,179,.18), transparent 62%),
    radial-gradient(980px 520px at 112% -6%, rgba(31,74,120,.20), transparent 60%),
    linear-gradient(165deg, var(--cf-deep-950) 0%, var(--cf-deep-900) 46%, var(--cf-deep-800) 100%) !important;
  color:#e9f1fb !important;
}

body.home-page{
  background:
    radial-gradient(1300px 700px at -12% -20%, rgba(58,118,179,.20), transparent 58%),
    radial-gradient(980px 550px at 110% -8%, rgba(31,74,120,.24), transparent 60%),
    linear-gradient(148deg, #06111f 0%, #0d2138 44%, #14345a 100%) !important;
}

.topbar{
  background: linear-gradient(125deg, var(--cf-deep-950), var(--cf-deep-900) 52%, var(--cf-deep-800)) !important;
  border-bottom:1px solid rgba(212,227,246,.24) !important;
  box-shadow:0 12px 26px rgba(4,12,22,.45) !important;
}

.brand__sep{
  background: linear-gradient(180deg, #7ba7d2, var(--cf-deep-500)) !important;
}

.brand__name,
.brand__sub{
  color:#f2f8ff !important;
}

.userchip,
.iconbtn{
  background: rgba(215,230,247,.14) !important;
  border:1px solid rgba(215,230,247,.30) !important;
  color:#fff !important;
}

.iconbtn:hover{
  background: rgba(215,230,247,.24) !important;
}

.layout{
  max-width:min(1280px, calc(100% - 20px)) !important;
}

.card{
  background: linear-gradient(180deg, rgba(248,252,255,.96), rgba(241,248,255,.94)) !important;
  border:1px solid rgba(66,108,152,.28) !important;
  box-shadow:0 14px 28px rgba(6,20,36,.26) !important;
  color:#1a2f45 !important;
}

.card h2, .card h3{
  color:#173d62 !important;
}

.muted, label{
  color:#5f7893 !important;
}

.btn{
  background: linear-gradient(130deg, var(--cf-deep-800), var(--cf-deep-600)) !important;
  border:1px solid rgba(18,41,70,.52) !important;
  color:#fff !important;
  box-shadow:0 8px 16px rgba(10,26,45,.34) !important;
}

.btn:hover{
  filter:brightness(1.05);
}

.btn--ghost{
  border-color: rgba(42,95,150,.36) !important;
  color: var(--cf-deep-900) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow:none !important;
}

.btn--ghost:hover{
  background: rgba(219,232,246,.66) !important;
}

.input, select, textarea{
  background:#fff !important;
  border:1px solid rgba(66,108,152,.34) !important;
  color:#1a2f45 !important;
}

.input::placeholder, textarea::placeholder{
  color:#768ea8 !important;
}

.input:focus, select:focus, textarea:focus{
  border-color: rgba(42,95,150,.62) !important;
  box-shadow: 0 0 0 .2rem rgba(42,95,150,.16) !important;
}

.table{
  border-color: rgba(66,108,152,.24) !important;
}

.table th{
  background: rgba(42,95,150,.12) !important;
  color:#21496f !important;
}

.table > :not(caption) > * > *{
  border-color: rgba(66,108,152,.18) !important;
}

.tabs .tab{
  background:#fff !important;
  color:#204569 !important;
  border:1px solid rgba(66,108,152,.28) !important;
  border-radius:12px !important;
  box-shadow:none !important;
}

.tabs .tab:hover{
  background: rgba(42,95,150,.12) !important;
  color:#173d62 !important;
  border-color: rgba(42,95,150,.44) !important;
}

.tabs .tab.active{
  background: linear-gradient(180deg, var(--cf-deep-800), var(--cf-deep-900)) !important;
  color:#fff !important;
  border-color: var(--cf-deep-900) !important;
  box-shadow: 0 8px 16px rgba(10,26,45,.28) !important;
}

.tabs--organized .tabs__group{
  color:#6883a0 !important;
}

.tabs--organized .tabs__group::after{
  background: linear-gradient(90deg, rgba(104,131,160,.38), rgba(104,131,160,0)) !important;
}

.tabs-cat__panel{
  border:1px solid rgba(66,108,152,.24) !important;
  background:#fff !important;
  box-shadow: 0 14px 24px rgba(8,22,39,.22) !important;
}

.tabs-cat.is-current > .tab--category{
  background: linear-gradient(180deg, var(--cf-deep-800), var(--cf-deep-900)) !important;
  color:#fff !important;
  border-color: var(--cf-deep-900) !important;
}

.tabs-mobile-nav__label{
  color:#7d96b2 !important;
}

.tabs-mobile-nav__select{
  border:1px solid rgba(66,108,152,.34) !important;
  background:#fff !important;
  color:#1a2f45 !important;
}

.tabs-mobile-nav__select:focus{
  border-color: rgba(42,95,150,.62) !important;
  box-shadow: 0 0 0 .2rem rgba(42,95,150,.16) !important;
}

.footer{
  border-top: 1px solid rgba(145,174,206,.30) !important;
  background: linear-gradient(180deg, rgba(10,29,50,.86), rgba(7,21,38,.90)) !important;
  color:#d7e4f3 !important;
}

.footer strong{
  color:#ffffff !important;
}

.index-head__name{
  color:#1a4a75 !important;
}

.index-head__sub,
.login-help{
  color:#5f7893 !important;
}

.home-credit{
  color:rgba(225,237,251,.95) !important;
}