/* =========================================================================
   Style Tutoria v2 (Massi, 17/10/2026)
   Le style de l'agenda des entretiens, étendu au portail écran par écran,
   chacun validé sur capture avant sa mise en ligne. Une page l'adopte en
   chargeant ce fichier APRÈS ses propres styles : il ne change que
   l'apparence (couleurs, arrondis, ombres, tailles), jamais le comportement.
   Palette : sarcelle #0A3A38 > #055956 > #04746E, menthe #63E0BE, vert
   #1E9E62, orange #E07A1F, violet #6A55C9.
   ========================================================================= */

body { background: linear-gradient(180deg, #E9F4F2 0, #F4F8F8 340px, #F6F8F9 100%) !important; }
.contenu { gap: 18px; padding: 24px 26px 34px; }

/* ---------- En-tête de page : bandeau dégradé sarcelle ---------- */
/* Les halos sont des FONDS du bandeau, pas des formes qui débordent : le
   bandeau n'a rien à rogner, et les menus qui s'y ouvrent (période…)
   s'affichent en entier. */
.entete { position: relative; align-items: center; padding: 24px 28px; border-radius: 22px;
  background: radial-gradient(circle at 92% -20%, rgba(99, 224, 190, .30), rgba(99, 224, 190, 0) 32%),
    radial-gradient(circle at 74% 135%, rgba(232, 160, 75, .22), rgba(232, 160, 75, 0) 28%),
    linear-gradient(135deg, #0A3A38 0%, #055956 58%, #04746E 100%);
  box-shadow: 0 16px 36px rgba(5, 89, 86, .22);
  /* Au-dessus du contenu qui suit : ses menus (période) passent devant les cartes. */
  z-index: 5; }
.entete > * { position: relative; z-index: 1; }
.entete h1 { color: #fff !important; font-size: 26px; letter-spacing: -.025em; }
.entete .sous, .entete .date, .entete .meta-l .lieu { color: #A9D9D0 !important; }
.entete .mb-note { color: #A9D9D0 !important; }
/* Boutons posés sur le bandeau : verre dépoli et bouton plein menthe. */
.entete .btn-blanc { height: 38px; padding: 0 16px; border-radius: 11px; background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28); color: #fff; backdrop-filter: blur(4px); }
.entete .btn-blanc:hover { background: rgba(255, 255, 255, .22); }
.entete .btn-teal { height: 38px; padding: 0 17px; border-radius: 11px; background: #63E0BE; color: #0A3A38;
  box-shadow: 0 8px 18px rgba(99, 224, 190, .3); }
.entete .btn-teal:hover { background: #7DE9CC; }

/* ---------- Boutons ---------- */
.btn-teal { border-radius: 11px; background: linear-gradient(135deg, #04746E, #055956); box-shadow: 0 6px 14px rgba(4, 116, 110, .22);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn-teal:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(4, 116, 110, .28); }
.btn-blanc { border-radius: 10px; transition: background .15s ease, border-color .15s ease; }
.btn-blanc:hover { border-color: #A9D9D0; }

/* ---------- Grandes cartes et tableaux ---------- */
.tableau, .carte { border: none !important; border-radius: 20px; box-shadow: 0 6px 20px rgba(12, 46, 43, .06); }
.outils-l, .filtres-l, .chips-l { border-bottom-color: #EEF3F3; }
.outils-l { padding: 16px 20px; }

/* Champs de saisie et listes déroulantes : arrondis, flèche dessinée, halo
   sarcelle à la sélection. */
.champ-r, .champ-v { height: 38px; border-radius: 12px; border-color: #DCE6E6; background: #F8FBFB;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.champ-r:focus-within, .champ-v:focus-within { border-color: #63C9B4; background: #fff; box-shadow: 0 0 0 4px rgba(99, 224, 190, .18); }
select.tri, select.filtre { -webkit-appearance: none; appearance: none; height: 38px; border-radius: 12px; border: 1px solid #DCE6E6;
  background: #F8FBFB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2304746E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  padding: 0 34px 0 13px; font-size: 12.5px; font-weight: 500; color: #24403C; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
select.tri:hover, select.filtre:hover { border-color: #A9D9D0; background-color: #fff; }
select.tri:focus, select.filtre:focus { outline: none; border-color: #63C9B4; background-color: #fff; box-shadow: 0 0 0 4px rgba(99, 224, 190, .18); }
select.tri option, select.filtre option { color: #0C2E2B; background: #fff; }
.btn-raz { height: 38px; border-radius: 12px; }

/* Pastilles de filtre (étapes) : la pastille choisie en dégradé sarcelle. */
.chips-l { padding: 13px 20px; gap: 7px; }
.chips-l button { height: 32px; padding: 0 13px; border-radius: 999px; border-color: #DCE6E6; background: #F8FBFB;
  transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.chips-l button:hover { background: #fff; border-color: #A9D9D0; transform: translateY(-1px); }
.chips-l button.actif { border-color: transparent; background: linear-gradient(135deg, #04746E, #055956); color: #fff;
  box-shadow: 0 6px 14px rgba(4, 116, 110, .25); }
.chips-l button.actif span { opacity: .8; }

/* En-tête de colonnes et lignes. */
.th { padding: 11px 20px; background: #F3F8F7; color: #6E8A86; letter-spacing: .08em; }
button.tri:hover, button.tri.actif { color: #04746E; }
.ligne { padding: 12px 20px; border-top-color: #F1F5F5; }
.ligne:hover { background: linear-gradient(90deg, #EFF8F6, #F8FBFB); }
.ligne .ini { width: 34px; height: 34px; background: linear-gradient(135deg, #DDF6EE, #C3EDE1); color: #055956; font-size: 11px; }
.ligne .nom { font-size: 13.5px; }
.badge { padding: 4px 11px; font-weight: 700; }
.jauge .piste { height: 7px; max-width: 60px; background: #E8EFEF; }
.jauge .piste span { background: linear-gradient(90deg, #63E0BE, #04746E); }

/* Pagination. */
.pied-l { padding: 14px 20px; border-top-color: #EEF3F3; }
.pages span { width: 30px; height: 30px; border-radius: 9px; border-color: #DCE6E6; }
.pages .actif { background: linear-gradient(135deg, #04746E, #055956); box-shadow: 0 4px 10px rgba(4, 116, 110, .25); }
.pages .pts { border: none; }

/* Notification en bas d'écran. */
.toast { border-radius: 12px; background: #0A3A38; box-shadow: 0 12px 30px rgba(8, 33, 30, .35); }

/* ---------- Onglets soulignés (Tests, Entretiens…) ---------- */
.onglets:not([role=tablist]) { gap: 4px; padding: 8px 20px 0; border-bottom-color: #EEF3F3; }
.onglets:not([role=tablist]) button { height: 44px; padding: 0 15px; border-radius: 12px 12px 0 0; border-bottom-width: 3px;
  transition: color .15s ease, background .15s ease; }
.onglets:not([role=tablist]) button:hover { background: #F3F8F7; color: #04746E; }
.onglets:not([role=tablist]) button.actif { color: #04746E; border-bottom-color: #04746E; background: linear-gradient(180deg, rgba(99, 224, 190, 0), rgba(99, 224, 190, .14)); }
.onglets:not([role=tablist]) button span { display: inline-flex; align-items: center; margin-left: 4px; padding: 1px 8px; border-radius: 999px;
  background: #EEF3F3; opacity: 1 !important; font-size: 11px; font-weight: 700; color: #6E8A86; }
.onglets:not([role=tablist]) button.actif span { background: #04746E; color: #fff; }
.onglets:not([role=tablist]) button.alerte span { background: #FFE6CF; color: #A2520B; }

/* ---------- Barres d'outils des listes (Tests…) ---------- */
.outils-t { padding: 16px 20px; border-bottom-color: #EEF3F3; }
.champ-t { height: 38px; border-radius: 12px; border-color: #DCE6E6; background: #F8FBFB;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.champ-t:focus-within { border-color: #63C9B4; background: #fff; box-shadow: 0 0 0 4px rgba(99, 224, 190, .18); }
.outils-t select, .v2-champ select { -webkit-appearance: none; appearance: none; height: 38px; border-radius: 12px; border: 1px solid #DCE6E6;
  background: #F8FBFB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2304746E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  padding: 0 34px 0 13px; font-size: 12.5px; font-weight: 500; color: #24403C; cursor: pointer; font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.outils-t select:hover, .v2-champ select:hover { border-color: #A9D9D0; background-color: #fff; }
.outils-t select:focus, .v2-champ select:focus { outline: none; border-color: #63C9B4; background-color: #fff; box-shadow: 0 0 0 4px rgba(99, 224, 190, .18); }
.compte-t { display: inline-flex; padding: 4px 11px; border-radius: 999px; background: #EEF6F4; color: #0B5F55 !important; font-weight: 600; }

/* Résumé en barre (Tests) et lignes cochables. */
.resume { padding: 18px 20px; border-bottom-color: #EEF3F3; }
.resume-barre { height: 14px; gap: 3px; }
.resume-leg .e { padding: 4px 11px; border-radius: 999px; background: #F3F7F7; }
.th-l { background: #F3F8F7; }
.th-l .grille-t span { color: #6E8A86; letter-spacing: .08em; }
.ligne-t:hover { background: linear-gradient(90deg, #EFF8F6, #F8FBFB); }
.case i { width: 18px; height: 18px; border-radius: 6px; border-color: #BFD1D0; transition: background .12s ease, border-color .12s ease; }
.case.on i { background: linear-gradient(135deg, #04746E, #055956); border-color: #04746E; box-shadow: 0 3px 8px rgba(4, 116, 110, .3); }
.selbar { background: linear-gradient(90deg, #E0F7EF, #F0FBF7); border-bottom-color: #C3EBDD; padding: 12px 20px; }
.pied-t { padding: 13px 20px; background: #F8FBFB; color: #8AA0A0; }

/* ---------- Fenêtres (pop-up) : en-tête dégradé, comme l'agenda ---------- */
.v2-voile { background: rgba(8, 33, 30, .55) !important; backdrop-filter: blur(3px); }
.v2-fen { border-radius: 20px !important; box-shadow: 0 30px 80px rgba(8, 33, 30, .35) !important; overflow: hidden;
  animation: v2Monte .2s ease; }
@keyframes v2Monte { from { transform: translateY(12px); opacity: .6 } to { transform: none; opacity: 1 } }
.v2-tete { display: flex; align-items: center; gap: 10px; padding: 16px 20px !important; border: none !important;
  background: linear-gradient(135deg, #0A3A38 0%, #055956 60%, #04746E 100%); }
.v2-tete .v2-titre { font-family: var(--font-title, Sora, sans-serif); font-size: 16px; font-weight: 700; color: #fff; }
.v2-fermer { width: 32px; height: 32px; border: none; border-radius: 10px; background: rgba(255, 255, 255, .14) !important;
  color: #fff !important; font-size: 15px; cursor: pointer; }
.v2-fermer:hover { background: rgba(255, 255, 255, .26) !important; }
.v2-corps { padding: 20px 22px !important; gap: 14px !important; }
.v2-champ { display: flex; flex-direction: column; gap: 6px; }
.v2-champ .l { font-size: 12px; font-weight: 600; color: #42565A; }
.v2-champ select { width: 100%; }
.v2-pied { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.v2-btn-ok { height: 38px; padding: 0 18px; border: none; border-radius: 11px; background: linear-gradient(135deg, #04746E, #055956);
  color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; box-shadow: 0 6px 14px rgba(4, 116, 110, .25); }
.v2-btn-ok:hover { box-shadow: 0 10px 20px rgba(4, 116, 110, .3); transform: translateY(-1px); }
.v2-btn-annuler { height: 38px; padding: 0 15px; border: 1px solid #DCE6E6; border-radius: 11px; background: #fff; color: #5C726E;
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.v2-btn-annuler:hover { background: #F3F8F7; }

/* ---------- Listes déroulantes maison (commun.js, installerListesV2) ---------- */
.v2-liste { position: relative; display: inline-flex; vertical-align: middle; }
.v2-liste.pleine { display: flex; width: 100%; }
.v2-liste > select { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0 !important;
  pointer-events: none !important; margin: 0 !important; }
.v2-liste-btn { display: inline-flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 12px 0 13px;
  border: 1px solid #DCE6E6; border-radius: 12px; background: #F8FBFB; color: #24403C; font: 500 12.5px var(--font-body, Inter, sans-serif);
  cursor: pointer; text-align: left; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.v2-liste-btn .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-liste-btn svg { flex: none; color: #04746E; transition: transform .18s ease; }
.v2-liste-btn:hover { border-color: #A9D9D0; background: #fff; }
.v2-liste-btn:focus-visible, .v2-liste.ouverte .v2-liste-btn { outline: none; border-color: #63C9B4; background: #fff;
  box-shadow: 0 0 0 4px rgba(99, 224, 190, .18); }
.v2-liste.ouverte .v2-liste-btn svg { transform: rotate(180deg); }
.v2-liste-btn:disabled { opacity: .55; cursor: default; }
.v2-liste-panneau { position: fixed; z-index: 2000; overflow: auto; padding: 6px; background: #fff; border-radius: 14px;
  border: 1px solid #E3ECEB; box-shadow: 0 18px 44px rgba(8, 33, 30, .22); animation: v2Liste .14s ease; }
@keyframes v2Liste { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }
.v2-liste-opt { display: block; width: 100%; padding: 9px 12px; border: none; border-radius: 9px; background: transparent;
  color: #24403C; font: 500 12.5px var(--font-body, Inter, sans-serif); text-align: left; cursor: pointer; white-space: nowrap; }
.v2-liste-opt:hover { background: #EAF7F4; color: #04746E; }
.v2-liste-opt.choisie { background: linear-gradient(135deg, #04746E, #055956); color: #fff; font-weight: 600; }
.v2-liste-opt.inactive { color: #B4C2C2; cursor: default; background: transparent; }
.v2-liste-groupe { padding: 9px 12px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: #8AA0A0; text-transform: uppercase; }

/* ---------- Menu de période (tableau de bord) ---------- */
.periode-menu { border: 1px solid #E3ECEB !important; border-radius: 16px !important; padding: 7px !important;
  box-shadow: 0 18px 44px rgba(8, 33, 30, .22) !important; top: 46px !important; }
.periode-menu .opt { height: 38px !important; border-radius: 10px !important; }
.periode-menu .opt:hover { background: #EAF7F4 !important; color: #04746E; }
.periode-menu .opt.actif { background: linear-gradient(135deg, #04746E, #055956) !important; color: #fff !important; }
.periode-menu .opt.actif .n { color: rgba(255, 255, 255, .8) !important; }
.periode-perso input { height: 36px !important; border-radius: 10px !important; border-color: #DCE6E6 !important; }
.periode-perso button { height: 36px !important; border-radius: 10px !important; background: linear-gradient(135deg, #04746E, #055956) !important; }

/* ---------- Écran Entretiens : filtre par opérateur, lignes, bouton de ligne ---------- */
.filtre-op { padding: 16px 20px 4px; gap: 7px; }
.filtre-op button { height: 32px; padding: 0 13px; border-color: #DCE6E6; background: #F8FBFB; border-radius: 999px;
  transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.filtre-op button:hover { background: #fff; border-color: #A9D9D0; transform: translateY(-1px); }
.filtre-op button.on { border-color: transparent; background: linear-gradient(135deg, #04746E, #055956); color: #fff;
  box-shadow: 0 6px 14px rgba(4, 116, 110, .25); }
.jour-cap { padding: 18px 20px 6px; }
.ligne-e { padding: 13px 20px; border-top-color: #F1F5F5; }
.ligne-e:hover { background: linear-gradient(90deg, #EFF8F6, #F8FBFB); }
.ligne-e.th-e, .ligne-e.th-e:hover { background: #F3F8F7; color: #6E8A86; letter-spacing: .08em; }
.ligne-e .h { color: #04746E; }
.btn-consulter { height: 32px; padding: 0 14px; border-radius: 10px; border-color: #63C9B4; color: #04746E;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease; }
.btn-consulter:hover { background: #EAF7F4; transform: translateY(-1px); }
.btn-consulter.plein { border-color: transparent; background: linear-gradient(135deg, #04746E, #055956); color: #fff;
  box-shadow: 0 6px 14px rgba(4, 116, 110, .25); }
.btn-consulter.plein:hover { background: linear-gradient(135deg, #038C7F, #04746E); }
.resume .rien { color: #8AA0A0; }
/* Le bouton « Agenda des entretiens » posé sur le bandeau : menthe, lisible. */
.entete .btn-agenda { background: #63E0BE; color: #0A3A38; box-shadow: 0 8px 18px rgba(99, 224, 190, .3); }
.entete .btn-agenda:hover { background: #7DE9CC; }

/* ---------- Écran Planning ---------- */
.equipe { gap: 8px; margin-bottom: 16px; }
.equipe button { height: 36px; padding: 0 14px; border-color: #DCE6E6; background: #fff; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(12, 46, 43, .04); transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.equipe button:hover { border-color: #A9D9D0; transform: translateY(-1px); }
.equipe button.on { border-color: transparent; background: linear-gradient(135deg, #04746E, #055956); box-shadow: 0 6px 14px rgba(4, 116, 110, .25); }
.bloc-t { color: #04746E; letter-spacing: .1em; }
.bloc-t::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: linear-gradient(135deg, #63E0BE, #04746E); flex: none; }
.bascule { width: 44px; height: 26px; }
.bascule i { background: #D3DEDE; }
.bascule i::after { width: 20px; height: 20px; }
.bascule input:checked + i { background: linear-gradient(135deg, #1E9E62, #04746E); }
.bascule input:checked + i::after { transform: translateX(18px); }
.ouverture b { font-family: var(--font-title, Sora, sans-serif); font-size: 15px; }
.jour { padding: 11px 0; border-top-color: #F1F5F5; }
.jour .nom { color: #04746E; }
.plage input[type="time"], .nouvelle input[type="date"] { height: 36px; border-radius: 10px; border-color: #DCE6E6; background: #F8FBFB;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.plage input[type="time"]:focus, .nouvelle input[type="date"]:focus { outline: none; border-color: #63C9B4; background: #fff;
  box-shadow: 0 0 0 4px rgba(99, 224, 190, .18); }
.x { width: 32px; height: 32px; border-radius: 10px; border-color: #F3DEDC; background: #FDF6F5; transition: background .15s ease; }
.x:hover { background: #F9E6E3; }
.ajout { height: 32px; padding: 0 12px; border-radius: 10px; border-color: #8FD9C5; background: #F1FBF8; color: #04746E;
  transition: background .15s ease; }
.ajout:hover { background: #E1F6EF; }
.dup { height: 32px; padding: 0 12px; border-radius: 10px; border-color: #DCE6E6; }
.dup-panneau { padding: 11px 12px; border-radius: 12px; background: linear-gradient(90deg, #E9F8F3, #F5FBF9); border-color: #CDEDE3; }
.dup-panneau .c { height: 30px; border-color: #DCE6E6; }
.dup-panneau .c.on { border-color: transparent; background: linear-gradient(135deg, #04746E, #055956); }
.exc { padding: 12px 0; border-top-color: #F1F5F5; }
.exc .date { color: #04746E; }
.ferme { background: #FFEEDD; color: #A2520B; padding: 5px 12px; }
.nouvelle { border-top-color: #EEF3F3; padding-top: 14px; }
.badge-o { padding: 5px 12px; }
.pied-p { margin-top: 18px; }
.pied-p .btn-teal { height: 42px; padding: 0 22px; font-size: 13.5px; border-radius: 12px; }
.vide { color: #8AA0A0; }

/* ---------- Écran Formation & contrat (liste et fiche) ---------- */
.kpi-simple { position: relative; overflow: hidden; border: none !important; border-radius: 18px; padding: 17px 19px 15px;
  box-shadow: 0 6px 20px rgba(12, 46, 43, .07); }
.kpi-simple::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--kpi-c, #04746E); }
.kpi-simple .l { font-weight: 600; color: #42565A; }
.kpi-simple .v { font-size: 27px; margin-top: 7px; color: var(--kpi-c, #04746E); }
.kpi-simple:nth-child(1) { --kpi-c: #1E9E62; }
.kpi-simple:nth-child(2) { --kpi-c: #6A55C9; }
.kpi-simple:nth-child(3) { --kpi-c: #E07A1F; }
.kpi-simple:nth-child(4) { --kpi-c: #04746E; }
.kpi-simple:nth-child(5) { --kpi-c: #13784A; }
.onglets-f { gap: 4px; padding: 8px 20px 0; border-bottom-color: #EEF3F3; }
.onglets-f button { height: 44px; padding: 0 15px; border-radius: 12px 12px 0 0; border-bottom-width: 3px;
  transition: color .15s ease, background .15s ease; }
.onglets-f button:hover { background: #F3F8F7; color: #04746E; }
.onglets-f button.actif { color: #04746E; border-bottom-color: #04746E; background: linear-gradient(180deg, rgba(99, 224, 190, 0), rgba(99, 224, 190, .14)); }
.onglets-f button span { display: inline-flex; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #EEF3F3;
  opacity: 1 !important; font-size: 11px; font-weight: 700; color: #6E8A86; }
.onglets-f button.actif span { background: #04746E; color: #fff; }
.grille-f.th-l { background: #F3F8F7; padding: 11px 20px; color: #6E8A86; letter-spacing: .08em; }
.ligne-f { padding: 13px 20px; border-top-color: #F1F5F5; }
.ligne-f:hover { background: linear-gradient(90deg, #EFF8F6, #F8FBFB); }
.carte-b { border: none !important; border-radius: 20px; box-shadow: 0 6px 20px rgba(12, 46, 43, .06); }
.cap-b { display: inline-flex; align-items: center; gap: 8px; color: #04746E; }
.cap-b::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: linear-gradient(135deg, #63E0BE, #04746E); }
.pastille-s { padding: 4px 11px; font-weight: 700; }
/* Fiche : la carte d'identité en tête devient le bandeau sarcelle. */
.contenu > .carte-b:first-child { background: radial-gradient(circle at 92% -20%, rgba(99, 224, 190, .30), rgba(99, 224, 190, 0) 32%),
  linear-gradient(135deg, #0A3A38 0%, #055956 58%, #04746E 100%); box-shadow: 0 16px 36px rgba(5, 89, 86, .22); padding: 22px 26px !important; }
.contenu > .carte-b:first-child h1 { color: #fff !important; font-size: 24px !important; }
.contenu > .carte-b:first-child div[style*="#8AA0A0"] { color: #A9D9D0 !important; }
.contenu > .carte-b:first-child .btn-blanc { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); color: #fff; }
.contenu > .carte-b:first-child .btn-blanc:hover { background: rgba(255, 255, 255, .22); }
.btn-contour-t { border-radius: 11px !important; }
#btn-pe:not(:disabled) { background: linear-gradient(135deg, #04746E, #055956) !important; box-shadow: 0 8px 18px rgba(4, 116, 110, .25); }

/* ======================= Composants communs (commun.css) ======================= */
/* Fenêtres : voile flouté, en-tête dégradé sarcelle, champs et boutons arrondis. */
.voile { background: rgba(8, 33, 30, .55); backdrop-filter: blur(3px); }
.modale { border-radius: 20px; box-shadow: 0 30px 80px rgba(8, 33, 30, .35); animation: v2Monte .2s ease; }
.modale .titre-m { padding: 16px 20px; border-bottom: none;
  background: radial-gradient(circle at 95% -40%, rgba(99, 224, 190, .30), rgba(99, 224, 190, 0) 40%),
    linear-gradient(135deg, #0A3A38 0%, #055956 60%, #04746E 100%); }
.modale .titre-m b { color: #fff; font-family: var(--font-title, Sora, sans-serif); font-size: 15.5px; font-weight: 700; }
.modale .titre-m .tt > svg { stroke: #A9D9D0; }
.modale .fermer-m { width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, .14); color: #fff; }
.modale .fermer-m:hover { background: rgba(255, 255, 255, .26); color: #fff; }
.modale label.champ .l { font-size: 12px; color: #42565A; }
/* Un champ posé sans bordure dans sa propre boîte (style en ligne) garde sa
   boîte : c'est elle qui prend l'habillage, sinon double cadre. */
.modale input[type="text"]:not([style*="border:none"]), .modale input[type="email"]:not([style*="border:none"]),
.modale input[type="tel"]:not([style*="border:none"]), .modale input[type="date"]:not([style*="border:none"]),
.modale input[type="number"]:not([style*="border:none"]), .modale input[type="time"]:not([style*="border:none"]),
.modale input:not([type]):not([style*="border:none"]), .modale textarea:not([style*="border:none"]), .modale select,
.modale div[style*="border:1px solid #D9E2E4"] {
  border: 1px solid #DCE6E6 !important; border-radius: 12px !important; background-color: #F8FBFB !important;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.modale input:focus, .modale textarea:focus, .modale select:focus { outline: none; border-color: #63C9B4 !important;
  background-color: #fff !important; box-shadow: 0 0 0 4px rgba(99, 224, 190, .18) !important; }
.modale .info-verte { border-radius: 12px; background: linear-gradient(90deg, #E0F7EF, #F0FBF7); padding: 11px 14px; }
.btn-valider { height: 38px; padding: 0 18px; border-radius: 11px; background: linear-gradient(135deg, #04746E, #055956);
  box-shadow: 0 6px 14px rgba(4, 116, 110, .25); transition: transform .15s ease, box-shadow .15s ease; }
.btn-valider:hover { background: linear-gradient(135deg, #038C7F, #04746E); transform: translateY(-1px); }
.btn-annuler { height: 38px; padding: 0 15px; border: 1px solid #DCE6E6; border-radius: 11px; background: #fff; color: #5C726E; }
.btn-annuler:hover { background: #F3F8F7; }
.btn-mini-b, .btn-mini-c { border-radius: 9px; }
.btn-contour-t { border-radius: 11px; }
.chip-opt { height: 32px; border-color: #DCE6E6; background: #F8FBFB; transition: background .15s ease, border-color .15s ease; }
.chip-opt:hover { border-color: #A9D9D0; background: #fff; }
.chip-opt.on { border-color: transparent; background: linear-gradient(135deg, #04746E, #055956); box-shadow: 0 4px 10px rgba(4, 116, 110, .22); }
.case-c input { accent-color: #04746E; width: 17px; height: 17px; }
/* Bulles d'information : coins doux, ombre. */
.tt .ttp { border-radius: 11px; padding: 11px 13px; background: #0A3A38; box-shadow: 0 12px 28px rgba(8, 33, 30, .28); }
/* Tableaux génériques. */
.th-l { padding: 11px 20px; background: #F3F8F7; color: #6E8A86; letter-spacing: .08em; }
.ini-r { background-image: linear-gradient(135deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0)); }
.cap-bloc { color: #04746E; }

/* ---------- Indicateurs en cartes (Offres & sources, et autres écrans à .kpis) ---------- */
.kpis { gap: 14px; }
.kpi { position: relative; overflow: hidden; border: none !important; border-radius: 18px; padding: 17px 19px 15px;
  box-shadow: 0 6px 20px rgba(12, 46, 43, .07); transition: transform .18s ease, box-shadow .18s ease; }
.kpi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--kpi-c, #04746E); }
.kpi .v { color: var(--kpi-c, #04746E); }
.kpi:nth-child(1) { --kpi-c: #04746E; } .kpi:nth-child(2) { --kpi-c: #1E9E62; } .kpi:nth-child(3) { --kpi-c: #E07A1F; }
.kpi:nth-child(4) { --kpi-c: #6A55C9; } .kpi:nth-child(5) { --kpi-c: #13784A; }

/* ---------- Écran Offres & sources ---------- */
.entete .per-btn { height: 38px; padding: 0 15px; border-radius: 11px; background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .26); color: #fff; }
.entete .per-btn:hover { background: rgba(255, 255, 255, .2); }
.entete .per-btn svg { stroke: #fff; }
.per-menu { border-radius: 16px; padding: 7px; box-shadow: 0 18px 44px rgba(8, 33, 30, .22); top: 46px; }
.per-opt { height: 38px; border-radius: 10px; }
.per-opt:hover { background: #EAF7F4; color: #04746E; }
.per-opt.on { background: linear-gradient(135deg, #04746E, #055956); color: #fff; }
.per-menu input[type="date"] { height: 36px !important; border-radius: 10px !important; border-color: #DCE6E6 !important; }
#per-appliquer { height: 36px !important; border-radius: 10px !important; background: linear-gradient(135deg, #04746E, #055956) !important; }
.onglets:not([role=tablist]) .onglet { height: 44px; padding: 0 15px; border-radius: 12px 12px 0 0; transition: background .15s ease, color .15s ease; }
.onglets:not([role=tablist]) .onglet:hover { background: #EAF4F2; color: #04746E; }
.onglets:not([role=tablist]) .onglet.on { color: #04746E; box-shadow: inset 0 -3px 0 #04746E; background: linear-gradient(180deg, rgba(99, 224, 190, 0), rgba(99, 224, 190, .16)); }
.onglet.on .n { background: #04746E; color: #fff; }
.th-x { padding: 11px 20px; background: #F3F8F7; color: #6E8A86; letter-spacing: .08em; }
.ligne-x { padding: 13px 20px; border-top-color: #F1F5F5; }
.ligne-x:hover { background: linear-gradient(90deg, #EFF8F6, #F8FBFB); }
.badge-st { padding: 4px 11px; font-weight: 700; }
.btn-liens { height: 32px; padding: 0 13px; border-radius: 10px; border-color: #63C9B4; color: #04746E; }
.btn-ico { width: 32px; height: 32px; border-radius: 10px; border-color: #DCE6E6; }
.rail-p { height: 8px; }
.rail-p i { height: 8px; background: linear-gradient(90deg, #63E0BE, #04746E); }
.m-tete { padding: 16px 20px; border-bottom: none;
  background: radial-gradient(circle at 95% -40%, rgba(99, 224, 190, .30), rgba(99, 224, 190, 0) 40%),
    linear-gradient(135deg, #0A3A38 0%, #055956 60%, #04746E 100%); }
.m-titre { color: #fff; }
.m-sous { color: #A9D9D0; }
.m-x { width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, .14); color: #fff; }
.m-x:hover { background: rgba(255, 255, 255, .26); color: #fff; }
.chip-niv { height: 32px; border-color: #DCE6E6; background: #F8FBFB; }
.chip-niv.on { border-color: transparent; background: linear-gradient(135deg, #04746E, #055956); }
.modale input, .modale textarea { font-family: inherit; }

/* Boutons « Annuler » des fenêtres écrits en style en ligne. */
.modale button[data-ferme]:not(.m-x) { height: 38px !important; padding: 0 15px !important; border: 1px solid #DCE6E6 !important;
  border-radius: 11px !important; background: #fff !important; color: #5C726E !important; }
.modale button[data-ferme]:not(.m-x):hover { background: #F3F8F7 !important; }

/* ---------- Écrans Vivier, Documents, Contrats, Historique ---------- */
.kpi-6a { position: relative; overflow: hidden; border: none !important; border-radius: 18px; padding: 17px 19px 15px;
  box-shadow: 0 6px 20px rgba(12, 46, 43, .07); }
.kpi-6a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--kpi-c, #04746E); }
.kpi-6a .v { font-size: 26px; color: var(--kpi-c, #04746E) !important; }
.kpi-6a:nth-child(1) { --kpi-c: #04746E; } .kpi-6a:nth-child(2) { --kpi-c: #1E9E62; } .kpi-6a:nth-child(3) { --kpi-c: #E07A1F; }
.kpi-6a:nth-child(4) { --kpi-c: #6A55C9; } .kpi-6a:nth-child(5) { --kpi-c: #13784A; } .kpi-6a:nth-child(6) { --kpi-c: #A2453E; }
.ligne-v, .ligne-d, .ligne-c { padding: 13px 20px; border-top-color: #F1F5F5; }
.ligne-v:hover, .ligne-d:hover, .ligne-c:hover { background: linear-gradient(90deg, #EFF8F6, #F8FBFB); }
.onglets-d, .onglets-c { gap: 4px; padding: 8px 20px 0; border-bottom-color: #EEF3F3; }
.onglets-d button, .onglets-c button { height: 44px; padding: 0 15px; border-radius: 12px 12px 0 0; border-bottom-width: 3px;
  transition: color .15s ease, background .15s ease; }
.onglets-d button:hover, .onglets-c button:hover { background: #F3F8F7; color: #04746E; }
.onglets-d button.actif, .onglets-c button.actif { color: #04746E; border-bottom-color: #04746E;
  background: linear-gradient(180deg, rgba(99, 224, 190, 0), rgba(99, 224, 190, .14)); }
.onglets-d button span, .onglets-c button span, .onglets-d .c { display: inline-flex; margin-left: 4px; padding: 1px 8px; border-radius: 999px;
  background: #EEF3F3; opacity: 1 !important; font-size: 11px; font-weight: 700; color: #6E8A86; }
.onglets-d button.actif span, .onglets-c button.actif span, .onglets-d button.actif .c { background: #04746E; color: #fff; }
.outils-c { padding: 16px 20px; }
.champ-c { height: 38px; border-radius: 12px; border-color: #DCE6E6; background: #F8FBFB; }
.champ-c:focus-within { border-color: #63C9B4; background: #fff; box-shadow: 0 0 0 4px rgba(99, 224, 190, .18); }
.ico-c { width: 32px; height: 32px; border-radius: 10px; }
.coche { border-radius: 6px; }
.coche.on { background: linear-gradient(135deg, #04746E, #055956); border-color: #04746E; }
.voile-c { background: rgba(8, 33, 30, .55); backdrop-filter: blur(3px); }
.modale-c { border-radius: 20px; box-shadow: 0 30px 80px rgba(8, 33, 30, .35); overflow: hidden; animation: v2Monte .2s ease; }
.mc-tete { border-bottom: none; padding: 17px 20px 15px;
  background: radial-gradient(circle at 95% -40%, rgba(99, 224, 190, .30), rgba(99, 224, 190, 0) 40%),
    linear-gradient(135deg, #0A3A38 0%, #055956 60%, #04746E 100%); }
.mc-tete .t { color: #fff; }
.mc-tete .s { color: #A9D9D0; }
.mc-corps input, .mc-corps select, .mc-corps textarea { border-radius: 12px !important; border-color: #DCE6E6 !important; background: #F8FBFB; }
.mc-note { border-radius: 12px; }
.mc-pied { border-top-color: #EEF3F3; }
/* Historique : fil et notes. */
.jour-h { color: #04746E; }
.ev-l { padding: 13px 20px; border-bottom-color: #F1F5F5; }
.ev-l:hover { background: #F8FBFB; }
.ev-l .pastille { width: 10px; height: 10px; box-shadow: 0 0 0 3px rgba(4, 116, 110, .08); }
.type-ev { padding: 2px 8px; }
.note-l { padding: 15px 18px; border-bottom-color: #F1F5F5; }
.note-l.epingle { background: linear-gradient(90deg, #FFF3E2, #FFFBF4); border-left: 4px solid #E8A04B; }
/* Recherche de la barre du haut (certaines pages n'avaient pas son style). */
header.barre .recherche { display: flex; align-items: center; gap: 8px; width: 250px; height: 36px; border: 1px solid #DCE6E6;
  border-radius: 11px; padding: 0 12px; background: #F8FBFB; color: #8AA0A0; font-size: 13px; cursor: pointer; text-align: left;
  font-family: inherit; transition: border-color .15s ease, background .15s ease; }
header.barre .recherche:hover { border-color: #A9D9D0; background: #fff; }
header.barre .recherche .rac { font-size: 10px; border: 1px solid #E3EAEC; border-radius: 5px; padding: 1px 5px; background: #fff; }
/* Texte gris et boutons sans classe posés sur un bandeau : lisibles sur le sarcelle. */
.entete div[style*="color:#5C726E"], .entete span[style*="color:#5C726E"] { color: #A9D9D0 !important; }
.entete > div button:not([class]), .entete > button:not([class]) { height: 38px; padding: 0 16px; border: none !important;
  border-radius: 11px !important; background: #63E0BE !important; color: #0A3A38 !important; font-weight: 600;
  box-shadow: 0 8px 18px rgba(99, 224, 190, .3); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.entete > div button:not([class]):hover, .entete > button:not([class]):hover { background: #7DE9CC !important; }
/* Un indicateur dont le chiffre a sa couleur propre : le liseré la reprend. */
.kpi-simple:has(.v[style*="#C0564F"]) { --kpi-c: #C0564F; }
.kpi-simple:has(.v[style*="#B4761B"]) { --kpi-c: #D8892A; }
.kpi-simple:has(.v[style*="#2F5E8C"]) { --kpi-c: #2F5E8C; }
.kpi-simple:has(.v[style*="#026060"]) { --kpi-c: #04746E; }
.kpi-simple:has(.v[style*="#1B5E3A"]) { --kpi-c: #1E9E62; }

/* ---------- E-mails envoyés : sélecteur de période, liste, tiroir, aperçu de modèle ---------- */
.periodes { background: rgba(255, 255, 255, .12); border-radius: 12px; padding: 4px; }
.periodes button { height: 32px; border-radius: 9px; color: #E3F4F0; }
.periodes button:hover { background: rgba(255, 255, 255, .12); }
.periodes button.actif { background: #63E0BE; color: #0A3A38; box-shadow: none; }
.outils-m { padding: 16px 20px; border-bottom-color: #EEF3F3; }
.champ-m { height: 38px; border-radius: 12px; border-color: #DCE6E6; background: #F8FBFB; }
.champ-m:focus-within { border-color: #63C9B4; background: #fff; box-shadow: 0 0 0 4px rgba(99, 224, 190, .18); }
.grille-m.th-l { padding: 11px 20px; background: #F3F8F7; color: #6E8A86; letter-spacing: .08em; }
.ligne-m { padding: 13px 20px; border-top-color: #F1F5F5; }
.ligne-m:hover, .ligne-m.ko:hover { background: linear-gradient(90deg, #EFF8F6, #F8FBFB); }
.ini-m { width: 30px; height: 30px; background: linear-gradient(135deg, #DDF6EE, #C3EDE1); color: #055956; }
.pastille-m { padding: 4px 11px; border-radius: 999px; }
.tiroir { border-radius: 20px 0 0 20px; overflow: hidden; }
.m-fermer { width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, .14); color: #fff; }
.m-fermer:hover { background: rgba(255, 255, 255, .26); }
.tiroir .m-tete *:not(button):not(svg):not(path) { color: #fff; }
.voile-t { background: rgba(8, 33, 30, .55); backdrop-filter: blur(3px); }
.modale-t { border-radius: 20px; box-shadow: 0 30px 80px rgba(8, 33, 30, .35); overflow: hidden; animation: v2Monte .2s ease; }
.t-tete { border-bottom: none; padding: 17px 20px 15px;
  background: radial-gradient(circle at 95% -40%, rgba(99, 224, 190, .30), rgba(99, 224, 190, 0) 40%),
    linear-gradient(135deg, #0A3A38 0%, #055956 60%, #04746E 100%); }
.t-tete * { color: #fff; }
.t-tete button { background: rgba(255, 255, 255, .14) !important; border-radius: 10px; }
.btn-plein { height: 36px; border-radius: 11px; background: linear-gradient(135deg, #04746E, #055956); box-shadow: 0 6px 14px rgba(4, 116, 110, .22); }
.btn-teal-c, .btn-gris { border-radius: 11px; }
.remise-barre { height: 14px; gap: 3px; }

/* ---------- Conversions Meta ---------- */
.carte-f { border: none !important; border-radius: 20px; box-shadow: 0 6px 20px rgba(12, 46, 43, .06); }
.pastille-c { padding: 4px 11px; border-radius: 999px; font-weight: 700; }

/* ---------- Administration ---------- */
.sec { padding: 18px 22px; border-bottom-color: #EEF3F3; }
.sec h2 { display: inline-flex; align-items: center; gap: 9px; color: #0A3A38; }
.sec h2::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: linear-gradient(135deg, #63E0BE, #04746E); }
.ag-bloc { padding: 18px 22px; border-bottom-color: #F1F5F5; }
.ag-titre { color: #04746E; }
.ag-champ input { height: 38px; border-radius: 11px; border-width: 1px; border-color: #DCE6E6; background: #F8FBFB;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.ag-champ input:focus { outline: none; border-color: #63C9B4; background: #fff; box-shadow: 0 0 0 4px rgba(99, 224, 190, .18); }
.ligne-a { padding: 14px 22px; border-bottom-color: #F1F5F5; }
.ligne-a:hover { background: #F8FBFB; }

/* ---------- Performance des campagnes ---------- */
.barre-etape .fond { height: 11px; }
.barre-etape .rempli { background: linear-gradient(90deg, #63E0BE, #04746E); }
.barre-etape .lib { color: #24403C; }
.reglages { padding: 15px 20px; }
.reglages .cap { color: #04746E; }
.ligne-p { padding: 13px 20px; }
.tiroir .m-tete .m-nav, .tiroir .m-tete .m-nav button { background: rgba(255, 255, 255, .14) !important; border-color: transparent !important;
  color: #fff !important; border-radius: 10px; }
.tiroir .m-tete .m-nav:hover, .tiroir .m-tete .m-nav button:hover { background: rgba(255, 255, 255, .26) !important; }
.tiroir .m-tete .m-nav:disabled { opacity: .45; }

/* ======================= Fiche candidat ======================= */
/* L'en-tête de la fiche (identité, actions, parcours) devient le bandeau sarcelle. */
.carte.tete { position: relative; z-index: 5;
  background: radial-gradient(circle at 92% -20%, rgba(99, 224, 190, .30), rgba(99, 224, 190, 0) 32%),
    radial-gradient(circle at 74% 135%, rgba(232, 160, 75, .20), rgba(232, 160, 75, 0) 28%),
    linear-gradient(135deg, #0A3A38 0%, #055956 58%, #04746E 100%);
  box-shadow: 0 16px 36px rgba(5, 89, 86, .22); padding: 22px 26px !important; }
.carte.tete h1 { color: #fff; font-size: 24px; }
.carte.tete .sous { color: #A9D9D0; }
.carte.tete .ini { background: #63E0BE; color: #0A3A38; width: 48px; height: 48px; font-size: 15px; }
.carte.tete .btn-blanc, .carte.tete .btn-action-t { height: 36px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .26);
  color: #fff; border-radius: 11px; }
.carte.tete .btn-blanc:hover, .carte.tete .btn-action-t:hover { background: rgba(255, 255, 255, .22); }
.carte.tete .btn-sortie { height: 36px; background: rgba(255, 140, 125, .16); border-color: rgba(255, 170, 160, .4); color: #FFD3CC; border-radius: 11px; }
.carte.tete .btn-sortie:hover { background: rgba(255, 140, 125, .28); }
.carte.tete .btn-rouge-d { color: #FFC4BC; }
.carte.tete .btn-rouge-d:hover { background: rgba(255, 140, 125, .2); }
.carte.tete a.btn-blanc, .carte.tete #pe-actions a { color: #fff !important; }
/* Le fil des étapes, lisible sur le bandeau. */
.carte.tete .etapes { border-top-color: rgba(255, 255, 255, .14); }
.carte.tete .etapes .trait { background: rgba(255, 255, 255, .2); height: 2px; }
.carte.tete .etapes .rond[style*="background:#0C2E2B"] { background: #63E0BE !important; color: #0A3A38 !important; box-shadow: 0 0 0 4px rgba(99, 224, 190, .25); }
.carte.tete .etapes .rond[style*="background:#F1F5F5"] { background: rgba(255, 255, 255, .12) !important; color: #A9D9D0 !important; }
.carte.tete .etapes .nom-et[style*="#0C2E2B"] { color: #fff !important; }
.carte.tete .etapes .nom-et[style*="#24403C"] { color: #CFEDE6 !important; }
.carte.tete .etapes .nom-et[style*="#8AA0A0"] { color: #8FBDB4 !important; }
/* Corps de la fiche. */
.section { padding: 18px 24px; border-top-color: #EEF3F3; }
.ligne-cap .cap-bloc { display: inline-flex; align-items: center; gap: 8px; }
.ligne-cap .cap-bloc::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: linear-gradient(135deg, #63E0BE, #04746E); }
.btn-mini, .btn-doc { border-radius: 9px; }
.btn-mini-t, .btn-doc-t { border-radius: 9px; }
.btn-mini-t { background: linear-gradient(135deg, #04746E, #055956); }
.grille-infos .l, .grille-4 .l { color: #6E8A86; }
.doc-ligne { padding: 13px 0; border-bottom-color: #F1F5F5; }
.doc-ligne .ico { background: linear-gradient(135deg, #E9F8F3, #F5FBF9); color: #04746E; }
.doc-ligne .st { padding: 4px 11px; }
.gate { background: linear-gradient(90deg, #F1FAF7, #FFFFFF); }
.gate .avancer { height: 40px; border-radius: 11px; }
.gate .avancer:not(:disabled) { background: linear-gradient(135deg, #04746E, #055956) !important; box-shadow: 0 8px 18px rgba(4, 116, 110, .25); }
.gate .reculer { height: 40px; border-radius: 11px; }
/* Fenêtres de la fiche : corps et pied. */
.modale .corps-m { gap: 14px; }
.modale .pied-m { border-top-color: #EEF3F3; }
.btn-annuler-c { border-radius: 11px; }
.btn-rejeter { border-radius: 11px; }
/* Calendrier de planification. */
.pl-resa { border-radius: 16px; border-color: #E3ECEB; }
.pl-tete button { background: #E3F6F0; }

/* ======================= Fiche intervenant ======================= */
.carte.tete .qui h1 { color: #fff; }
.carte.tete .actions-t .btn-blanc { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .26); color: #fff !important; border-radius: 11px; }
.bandeau { border-radius: 0; }
.cap8 { display: inline-flex; align-items: center; gap: 8px; color: #04746E !important; }
.cap8::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: linear-gradient(135deg, #63E0BE, #04746E); }
.btn26 { border-radius: 9px; }
.per-grp { background: #EAF4F2; border-radius: 11px; padding: 3px; }
.per-btn { height: 28px; border-radius: 9px; }
.per-btn.actif { background: linear-gradient(135deg, #04746E, #055956); color: #fff; }
.lig { border-bottom-color: #F1F5F5; }
.chip8 { border-radius: 999px; }

/* ======================= Fiche test ======================= */
.chapeau { background: linear-gradient(135deg, #EAF8F3 0%, #FFFFFF 70%); border-radius: 20px 20px 0 0; padding: 22px 24px; }
.chapeau h1 { font-size: 22px; color: #0A3A38; }
.score .val { color: #04746E; }
.modale > .tete { padding: 18px 22px !important; border-bottom: none !important;
  background: radial-gradient(circle at 95% -40%, rgba(99, 224, 190, .30), rgba(99, 224, 190, 0) 40%),
    linear-gradient(135deg, #0A3A38 0%, #055956 60%, #04746E 100%); }
.modale > .tete h3 { color: #fff; font-family: var(--font-title, Sora, sans-serif); }
.modale > .tete p { color: #A9D9D0; }
.modale > .corps textarea { border-radius: 12px; border-color: #DCE6E6; background: #F8FBFB; }
.modale > .pied { border-top-color: #EEF3F3; }

/* ======================= Menu latéral (17/10/2026) ======================= */
/* Le dégradé sarcelle du bandeau, plus sombre vers le bas, un halo menthe
   en haut ; l'entrée active en menthe. */
.side { background: radial-gradient(circle at 0% 0%, rgba(99, 224, 190, .16), rgba(99, 224, 190, 0) 34%),
    linear-gradient(180deg, #0B4542 0%, #08332F 42%, #062724 100%) !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06); }
.side .retour { border-color: rgba(255, 255, 255, .16); border-radius: 10px; color: #BFE2DA; }
.side .retour:hover { background: rgba(255, 255, 255, .09); }
.side .marque .module, .side .cap { color: #7FB8AC; }
.side nav a { border-radius: 10px; color: #B9D8D1; transition: background .15s ease, color .15s ease; }
.side nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.side nav a.actif { background: linear-gradient(90deg, rgba(99, 224, 190, .24), rgba(99, 224, 190, .08)); color: #fff;
  box-shadow: inset 3px 0 0 #63E0BE; }
.side nav a.actif svg { color: #63E0BE; }
.side nav a .cpt { background: rgba(255, 255, 255, .12); color: #DDEFEA; }
.side nav a.actif .cpt { background: #63E0BE; color: #0A3A38; }
.side .pied { border-top-color: rgba(255, 255, 255, .10); }
.side .etat { border-radius: 10px; color: #B9D8D1; }
.side .etat .pt { background: #63E0BE; }