/* =========================================================================
   Style Tutoria v2 (Massi, 17/10/2026)
   Le style de l'agenda des entretiens, étendu au module client écran par
   écran (même socle que recrutement-dashboard/theme-v2.css). 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, .bandeau-v2 { 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 > *, .bandeau-v2 > * { position: relative; z-index: 1; }
.entete h1, .bandeau-v2 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, .bandeau-v2 .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, .bandeau-v2 .btn-blanc:hover { background: rgba(255, 255, 255, .22); }
.entete .btn-teal, .bandeau-v2 .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, .bandeau-v2 .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:not(button) { 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…) ---------- */

/* ---------- Fenêtres maison et listes déroulantes maison ---------- */
.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; }


/* ======================= 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; }

/* ---------- Indicateurs simples ---------- */
.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; }
.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; }

/* ---------- Recherche de la barre d'en-tête ---------- */
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; }
.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; }
.tt .ttp { border-radius: 11px; padding: 11px 13px; background: #0A3A38; box-shadow: 0 12px 28px rgba(8, 33, 30, .28); }
.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; }
header.barre .recherche .k { border-radius: 6px; }

/* ---------- Bandeau du module client ---------- */
/* Le titre des écrans client est un bloc en style en ligne : la classe
   bandeau-v2 le pose dans le bandeau sarcelle, ses éléments passent en clair. */
.bandeau-v2 h1 { color: #fff !important; font-size: 26px !important; }
.bandeau-v2 .tt > svg { stroke: #A9D9D0; }
/* Sélecteur de période posé sur le bandeau : verre dépoli, choix en menthe. */
.bandeau-v2 .pilules { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); border-radius: 13px; padding: 3px; }
.bandeau-v2 .pilules button { height: 32px; border-radius: 10px; color: #CDEBE4; }
.bandeau-v2 .pilules button:hover { color: #fff; background: rgba(255, 255, 255, .10); }
.bandeau-v2 .pilules button.actif { background: #63E0BE; color: #0A3A38; box-shadow: 0 6px 14px rgba(99, 224, 190, .3); }
.bandeau-v2 #maj { color: #A9D9D0 !important; }
.pop-perso { border: none; border-radius: 18px; box-shadow: 0 24px 60px rgba(8, 33, 30, .28); }
.pop-perso .titre-p { color: #04746E; }
.pop-perso input { border-radius: 11px; border-color: #DCE6E6; background: #F8FBFB; height: 36px; }
.pop-perso .annuler { border-radius: 11px; height: 36px; }
.pop-perso .appliquer { border-radius: 11px; height: 36px; background: linear-gradient(135deg, #04746E, #055956); }

/* ======================= Tableau de bord client ======================= */
.bloc { border: none !important; border-radius: 20px; box-shadow: 0 6px 20px rgba(12, 46, 43, .06); }
.tete-bloc { padding: 16px 20px; border-bottom-color: #EEF3F3; }
.cap-b { color: #04746E; }
.tete-bloc .puce { background: #EAF7F4; color: #04746E; font-weight: 600; }
.etage .piste { height: 32px; border-radius: 10px; background: #EEF5F4; }
.etage .barre { border-radius: 10px; }
/* Indicateurs : un liseré de couleur en tête (ombre intérieure, la carte
   garde son overflow visible pour ses bulles d'information). */
#grille-kpi > .bloc { box-shadow: inset 0 4px 0 var(--kpi-c, #04746E), 0 6px 20px rgba(12, 46, 43, .06); padding: 17px 19px 15px !important; }
#grille-kpi > .bloc:nth-child(1) { --kpi-c: #1E9E62; }
#grille-kpi > .bloc:nth-child(2) { --kpi-c: #6A55C9; }
#grille-kpi > .bloc:nth-child(3) { --kpi-c: #E07A1F; }
#grille-kpi > .bloc:nth-child(4) { --kpi-c: #04746E; }
#grille-kpi > .bloc > div:first-child > span:first-child { font-weight: 600; color: #42565A !important; }
#carte-portefeuille { box-shadow: inset 0 4px 0 #04746E, 0 6px 20px rgba(12, 46, 43, .06); }
/* La fenêtre de période flotte sous le bandeau, elle ne l'agrandit pas. */
.bandeau-v2 > .pop-perso { position: absolute; top: calc(100% - 14px); right: 24px; z-index: 40; }

/* ======================= Composants des listes client ======================= */
/* Sélecteur de période hors bandeau (Rendez-vous) : pilule claire, choix sarcelle. */
.pers { background: #fff; border-radius: 13px; padding: 3px; box-shadow: 0 4px 14px rgba(12, 46, 43, .06); }
.pers button { height: 32px; border-radius: 10px; transition: background .15s ease, color .15s ease; }
.pers button:hover { color: #04746E; background: #EAF7F4; }
.pers button.on { background: linear-gradient(135deg, #04746E, #055956); color: #fff; box-shadow: 0 6px 14px rgba(4, 116, 110, .25); }
.perso-b { height: 38px; border-radius: 12px; border-color: #DCE6E6; background: #fff; }
/* Pastilles de filtre. */
.puce { height: 32px; border: 1px solid #DCE6E6; background: #fff; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.puce:hover { border-color: #A9D9D0; transform: translateY(-1px); }
.puce.on { border-color: transparent; background: linear-gradient(135deg, #04746E, #055956); box-shadow: 0 6px 14px rgba(4, 116, 110, .22); }
.puce.on .l { color: #fff; }
.puce.on .n { color: #CDEBE4; }
/* Tableaux à lignes groupées par jour. */
.tbl { border: none !important; border-radius: 20px; box-shadow: 0 6px 20px rgba(12, 46, 43, .06); }
.tbl > .th { background: #F3F8F7; color: #6E8A86; letter-spacing: .08em; }
.jour { background: #F7FAFA; border-top-color: #EEF3F3; }
.jour.today { background: linear-gradient(90deg, #E3F6F0, #F4FBF8); box-shadow: inset 3px 0 0 #04746E; }
.jour .tag { background: #04746E; color: #fff; }
.ligne.all:hover { background: linear-gradient(90deg, #EFF8F6, #F8FBFB); }
.ligne.on { background: #EAF7F2; }
.case { border-radius: 6px; }
.case.on { border-color: #04746E; background: linear-gradient(135deg, #04746E, #055956); }
.b-aff { height: 31px; transition: border-color .15s ease, background .15s ease; }
.b-lot { height: 38px; border-radius: 11px; background: #63E0BE; color: #0A3A38; box-shadow: 0 8px 18px rgba(99, 224, 190, .3); }
.b-lot:hover { background: #7DE9CC; }
/* Fenêtres « .md » (Rendez-vous, Pipeline, Vivier, Clients) : en-tête dégradé sarcelle. */
.md { border-radius: 20px !important; box-shadow: 0 30px 80px rgba(8, 33, 30, .35) !important; animation: v2Monte .2s ease; }
.md > .tete { align-items: center !important; 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%); }
.md > .tete span[style*="font-size:16px"] { color: #fff !important; }
.md > .tete span[style*="color:#8AA0A0"] { color: #A9D9D0 !important; }
.md > .tete .x { width: 32px; height: 32px; border: none; border-radius: 10px; background: rgba(255, 255, 255, .14); color: #fff; }
.md > .tete .x:hover { background: rgba(255, 255, 255, .26); }
.md .cap-m { color: #04746E; }
.md .pied { background: #F7FAFA; border-top-color: #EEF3F3; }
.md .ok { 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; }
.md .ok:hover { background: linear-gradient(135deg, #038C7F, #04746E); transform: translateY(-1px); }
.md .annuler { height: 38px; padding: 0 15px; border-color: #DCE6E6; border-radius: 11px; }
.radio { border-radius: 13px; transition: border-color .15s ease, background .15s ease; }
.radio.on { border-color: #63C9B4; background: linear-gradient(90deg, #E3F6F0, #F7FCFA); }
.radio.on .pt { border-color: #04746E; }
.radio.on .pt i { background: #04746E; }

/* ======================= Pipeline prospects et Vivier ======================= */
/* Commandes posées sur le bandeau : bascule Liste/Colonnes et Exporter en
   verre dépoli, Ajouter en menthe. */
.bandeau-v2 .seg { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); border-radius: 13px; padding: 3px; }
.bandeau-v2 .seg button { height: 32px; border-radius: 10px; color: #CDEBE4; }
.bandeau-v2 .seg button:hover { color: #fff; background: rgba(255, 255, 255, .10); }
.bandeau-v2 .seg button.actif { background: #63E0BE; color: #0A3A38; box-shadow: 0 6px 14px rgba(99, 224, 190, .3); }
.bandeau-v2 .b-exp { height: 38px; padding: 0 16px; border-radius: 11px; background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28); color: #fff; }
.bandeau-v2 .b-exp:hover, .bandeau-v2 .b-exp.on { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .4); }
.bandeau-v2 .b-add { height: 38px; padding: 0 17px; border-radius: 11px; background: #63E0BE; color: #0A3A38; box-shadow: 0 8px 18px rgba(99, 224, 190, .3); }
.bandeau-v2 .b-add:hover { background: #7DE9CC; }
.bandeau-v2 .champ-r { background: #fff; border-color: transparent; }
/* Menu Exporter. */
.menu { border: none; border-radius: 16px; box-shadow: 0 24px 60px rgba(8, 33, 30, .28); padding: 6px; }
.menu .cap { color: #04746E; }
.menu .opt { border-radius: 11px; }
.menu .opt:hover { background: #EAF7F4; }
/* Filtres par opérateur. */
.chip { height: 32px; border: 1px solid #DCE6E6; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.chip:hover { border-color: #A9D9D0; transform: translateY(-1px); }
.chip.on { border-color: transparent; background: linear-gradient(135deg, #04746E, #055956); box-shadow: 0 6px 14px rgba(4, 116, 110, .22); }
.chip.on .l { color: #fff; }
.chip.on .n { color: #CDEBE4; }
/* Vue en colonnes. */
.col { background: linear-gradient(180deg, #E6F2EF, #EEF5F4); border-radius: 18px; padding: 10px; }
.col .tete .l { color: #0A3A38; }
.col .tete .n { background: #fff; color: #04746E; }
button.carte { border-radius: 12px; box-shadow: 0 3px 10px rgba(12, 46, 43, .06); transition: transform .15s ease, box-shadow .15s ease; }
button.carte:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(12, 46, 43, .12); }
/* Boutons de la fiche et des lignes. */
.b-fiche, .b-abs, .b-out { height: 36px; border-radius: 11px; }
.b-cta { border-radius: 10px; }
.b-mini { border-radius: 9px; }
.bloc .tete-b { padding: 16px 20px; border-bottom-color: #EEF3F3; }
.chip-m.on, .chip-op.on, .chip-n.on { border-color: transparent; background: linear-gradient(135deg, #04746E, #055956); color: #fff; }
.chip-m.on .pt { border-color: #fff; }
.chip-m.on .pt i { background: #fff; }
.chip-op.on .n, .chip-op.on .c { color: #fff; }
.chip-o { border-radius: 999px; transition: background .15s ease, border-color .15s ease; }
.chip-o.on { border-color: #63C9B4; background: #E3F6F0; }
/* Fiche d'un dossier : l'en-tête (initiales, nom, opérateur, actions) dans le bandeau. */
.fiche-v2 { align-items: center !important; }
.fiche-v2 > span[style*="width:46px"] { width: 54px !important; height: 54px !important; background: #63E0BE !important; color: #0A3A38 !important;
  box-shadow: 0 8px 18px rgba(99, 224, 190, .3); }
.fiche-v2 div[style*="color:#8AA0A0"] { color: #A9D9D0 !important; }
.fiche-v2 span[style*="color:#24403C"] { color: #fff !important; }
.fiche-v2 .lien { color: #63E0BE; }
.fiche-v2 .b-fiche { height: 38px; border-radius: 11px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); color: #fff; }
.fiche-v2 .b-fiche:hover { background: rgba(255, 255, 255, .22); }
.fiche-v2 .b-out, .fiche-v2 .b-abs { height: 38px; border-radius: 11px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 190, 180, .45); color: #FFC9C2; }
.fiche-v2 .b-out:hover, .fiche-v2 .b-abs:hover { background: rgba(255, 190, 180, .16); }
.md textarea:not([style*="border:none"]), .md input[type="text"]:not([style*="border:none"]), .md input[type="date"]:not([style*="border:none"]),
.md input[type="time"]:not([style*="border:none"]), .md input[type="email"]:not([style*="border:none"]), .md input[type="tel"]:not([style*="border:none"]) {
  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; }
.md textarea:focus, .md input:focus { outline: none; border-color: #63C9B4 !important; background-color: #fff !important; box-shadow: 0 0 0 4px rgba(99, 224, 190, .18) !important; }

/* ======================= Clients ======================= */
.ligne-c { padding: 13px 20px; border-top-color: #F1F5F5; }
.ligne-c:hover { background: linear-gradient(90deg, #EFF8F6, #F8FBFB); }
.tuile-stat { border: none; border-radius: 14px; background: linear-gradient(135deg, #EEF7F5, #F7FBFA); }
.tuile-stat .v { color: #04746E; }
.bloc-titre { padding: 16px 20px; border-bottom-color: #EEF3F3; }
/* En-tête de la fiche client dans le bandeau sarcelle. */
.carte-id { border: none !important; border-radius: 22px; padding: 22px 26px; color: #fff;
  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); }
.carte-id > .ini-r { width: 54px !important; height: 54px !important; background: #63E0BE !important; color: #0A3A38 !important;
  box-shadow: 0 8px 18px rgba(99, 224, 190, .3); }
.carte-id span[style*="font-size:20px"] { color: #fff !important; font-size: 24px !important; }
.carte-id span[style*="color:#8AA0A0"] { color: #A9D9D0 !important; }
.carte-id > span[style*="width:1px"] { background: rgba(255, 255, 255, .2) !important; }
.carte-id .att .l { color: #A9D9D0; }
.carte-id .att .v { color: #fff; }
.carte-id .b-fiche, .carte-id a[target="_blank"] { height: 38px !important; border-radius: 11px !important; background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .28) !important; color: #fff !important; padding: 0 16px !important; }
.carte-id .b-fiche:hover, .carte-id a[target="_blank"]:hover { background: rgba(255, 255, 255, .22) !important; }
.carte-id .b-out { height: 38px !important; border-radius: 11px !important; background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 190, 180, .45) !important; color: #FFC9C2 !important; }
#segments.chips-l { padding: 0; }
/* Recherche intervenants : la carte intégrée en grande carte arrondie. */
.carte-pleine { padding: 20px 26px 26px; }
.carte-pleine iframe { border: none !important; border-radius: 20px !important; box-shadow: 0 6px 20px rgba(12, 46, 43, .08); }

/* ======================= Avis ======================= */
.contenu > .contenu { padding: 0; }
.kpi-simple:has(.v[style*="#E8A04B"]) { --kpi-c: #E8A04B; }
.kpi-simple:has(.v[style*="#8A5A18"]) { --kpi-c: #E07A1F; }
.bandeau-v2 .pastille-regle { height: 32px; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); color: #FFE2BD; }
.bandeau-v2 .pastille-regle svg { stroke: #FFE2BD; }
/* Onglets soulignés. */
.onglets-a { gap: 4px; padding: 8px 20px 0; border-bottom-color: #EEF3F3; }
.onglets-a button { height: 44px; padding: 0 15px; border-radius: 12px 12px 0 0; border-bottom-width: 3px; color: #6E8A86;
  transition: background .15s ease, color .15s ease; }
.onglets-a button:hover { background: #F3F8F7; color: #04746E; }
.onglets-a button.actif { color: #04746E; border-bottom-color: #04746E; background: linear-gradient(180deg, rgba(99, 224, 190, 0), rgba(99, 224, 190, .14)); }
.onglets-a button span { display: inline-flex; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #EEF3F3; opacity: 1; font-weight: 700; font-size: 11px; }
.onglets-a button.actif span { background: #04746E; color: #fff; }
.ligne-v { padding: 12px 20px; border-top-color: #F1F5F5; }
.ligne-v:hover { background: linear-gradient(90deg, #EFF8F6, #F8FBFB); }
.ligne-v .ini { width: 32px; height: 32px; background: linear-gradient(135deg, #DDF6EE, #C3EDE1); color: #055956; }
.lien-outil { height: 31px; border-radius: 10px; }
/* Volet latéral d'un avis. */
.voile-a { background: rgba(8, 33, 30, .45); backdrop-filter: blur(2px); }
.panneau-a { border-radius: 22px 0 0 22px; overflow: hidden; box-shadow: -24px 0 60px rgba(8, 33, 30, .3); }
.panneau-a .tete { padding: 20px 22px !important; border-bottom: none !important; color: #fff;
  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%); }
.panneau-a .tete [style*="color:#0C2E2B"], .panneau-a .tete [style*="color:var(--ink)"] { color: #fff !important; }
.panneau-a .tete [style*="color:#8AA0A0"], .panneau-a .tete [style*="color:#9AABA9"] { color: #A9D9D0 !important; }
.panneau-a .x { width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, .14); color: #fff; }
.panneau-a .x:hover { background: rgba(255, 255, 255, .26); }
.panneau-a .b { height: 38px; border-radius: 11px; }
.panneau-a .b.ok { background: linear-gradient(135deg, #04746E, #055956); box-shadow: 0 6px 14px rgba(4, 116, 110, .25); }
.panneau-a .choix button { border-radius: 11px; }
.panneau-a .choix button.on { border-color: #63C9B4; background: linear-gradient(90deg, #E3F6F0, #F7FCFA); }
.cap-p { color: #04746E; }
.carte-avis { border-radius: 14px; border-color: #E6EFEE; background: #FBFDFD; }
.saisie select, .saisie textarea { border-radius: 12px; border-color: #DCE6E6; background: #F8FBFB; }

/* ======================= E-mails envoyés ======================= */
.bandeau-v2 > svg.aide { stroke: #A9D9D0; }
.kpi-simple.ambre { --kpi-c: #E07A1F; background: #fff; }
.kpi-simple.rouge { --kpi-c: #C0564F; background: #fff; }
.kpi-simple:has(.v[style*="#A2453E"]) { --kpi-c: #C0564F; }
.onglets-m { gap: 4px; padding: 8px 20px 0; border-bottom-color: #EEF3F3; }
.onglets-m button { height: 44px; padding: 0 15px; border-radius: 12px 12px 0 0; border-bottom-width: 3px; color: #6E8A86;
  transition: background .15s ease, color .15s ease; }
.onglets-m button:hover { background: #F3F8F7; color: #04746E; }
.onglets-m button.actif { color: #04746E; border-bottom-color: #04746E; background: linear-gradient(180deg, rgba(99, 224, 190, 0), rgba(99, 224, 190, .14)); }
.onglets-m button span { display: inline-flex; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #EEF3F3; opacity: 1; font-weight: 700; font-size: 11px; }
.onglets-m button.actif span { background: #04746E; color: #fff; }
.ligne-m { padding: 12px 20px; border-top-color: #F1F5F5; }
.ligne-m:hover { background: linear-gradient(90deg, #EFF8F6, #F8FBFB); }
.pill { padding: 4px 11px; font-weight: 700; }
.pied-t { padding: 13px 20px; border-top-color: #EEF3F3; }

/* ======================= Performance des opérateurs ======================= */
.bandeau-v2 #sous-titre { color: #A9D9D0 !important; }
#chips-ope .chip-o.on { border-color: transparent; background: linear-gradient(135deg, #04746E, #055956); box-shadow: 0 6px 14px rgba(4, 116, 110, .22); }
#chips-ope .chip-o.on .l { color: #fff; }
#kpis > .kpi { border: none !important; border-radius: 18px; box-shadow: 0 6px 20px rgba(12, 46, 43, .07); padding: 17px 19px 15px; }
.th7 { padding: 11px 20px; background: #F3F8F7; color: #6E8A86; letter-spacing: .08em; }
.ligne-o { padding: 13px 20px; border-top-color: #F1F5F5; }
.ligne-o:hover { background: linear-gradient(90deg, #EFF8F6, #F8FBFB); }
.ligne-e { padding: 13px 20px; background: #F3F8F7; border-top-color: #E3ECEB; }
.piste-c { height: 10px; background: #E8EFEF; }
#kpis > .kpi { box-shadow: inset 0 4px 0 var(--kpi-c, #04746E), 0 6px 20px rgba(12, 46, 43, .07); }
#kpis > .kpi:nth-child(1) { --kpi-c: #1E9E62; }
#kpis > .kpi:nth-child(2) { --kpi-c: #6A55C9; }
#kpis > .kpi:nth-child(3) { --kpi-c: #E07A1F; }
#kpis > .kpi:nth-child(4) { --kpi-c: #04746E; }

/* ======================= Paramètres ======================= */
.groupe { border: none !important; border-radius: 20px; box-shadow: 0 6px 20px rgba(12, 46, 43, .06); }
.groupe .tete { padding: 16px 20px; border-bottom-color: #EEF3F3; border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, #EEF7F5, #FFFFFF 70%); }
.groupe .tete h2 { color: #0A3A38; }
.param { padding: 14px 20px; border-bottom-color: #F1F5F5; }
.param input { height: 38px; border-radius: 12px; border-color: #DCE6E6; background: #F8FBFB;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.param input:focus { border-color: #63C9B4; background: #fff; box-shadow: 0 0 0 4px rgba(99, 224, 190, .18); }
.param .v2-liste { display: flex; width: 100%; }
.param.modifie input, .param.modifie .v2-liste-btn { border-color: #E8A04B; background: #FFFBF4; }
.actions .ok { height: 40px; padding: 0 20px; border-radius: 12px; background: linear-gradient(135deg, #04746E, #055956);
  box-shadow: 0 8px 18px rgba(4, 116, 110, .25); }
.actions .ok:disabled { background: #B8C9C6; box-shadow: none; }