/* refresh-components.css — composants back-office du refresh (gated body.ui-refresh).
   Rempli au fil des tâches : KPI, cartes-groupe, datatable, formulaires, paiement, onglets. */

/* ===================== Bandeau de page ===================== */
body.ui-refresh .page-head{ background:transparent; border:0; padding:0 0 18px; margin:0; }
body.ui-refresh .page-head h3{ font-family:"Archivo",sans-serif; font-size:24px; font-weight:700; color:var(--ink); margin:0; }

/* ===================== Panneaux génériques ===================== */
body.ui-refresh .panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card);
}
body.ui-refresh .panel .panel-heading{
  background:var(--panel-2); border-bottom:1px solid var(--line-soft);
  font-family:"Archivo",sans-serif; font-weight:700; border-radius:var(--radius-card) var(--radius-card) 0 0;
}

/* ===================== Cartes KPI ===================== */
body.ui-refresh .state-overview .panel{
  display:flex; align-items:center; gap:14px; padding:16px 18px; min-height:94px;
  border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow-card);
}
body.ui-refresh .state-overview .panel .symbol{ float:none; margin:0; padding:0; border:0; background:none; }
body.ui-refresh .state-overview .panel .symbol span{
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:20px;
}
body.ui-refresh .state-overview .panel .value{ padding:0; overflow:hidden; }
body.ui-refresh .state-overview .panel .value h1{
  font-family:"Archivo",sans-serif; font-size:30px; font-weight:700; line-height:1.05; margin:0; color:var(--ink);
}
body.ui-refresh .state-overview .panel .value p{ color:var(--ink-2); font-size:13px; margin:4px 0 0; }
body.ui-refresh .state-overview .panel .value small{ color:var(--ink-3); }
/* Couleurs d'icônes alignées sur les tokens (les bg-* FlatLab sont gardés mais recalés) */
body.ui-refresh .state-overview .bg-success{ background:var(--green); }
body.ui-refresh .state-overview .bg-warning{ background:var(--yellow); }
body.ui-refresh .state-overview .bg-danger{ background:var(--red); }
body.ui-refresh .state-overview .bg-info{ background:var(--cyan); }
body.ui-refresh .state-overview .bg-purple{ background:var(--violet); }

/* ===================== Cartes article (accueil) ===================== */
body.ui-refresh .article-principal{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); padding:20px 22px; margin-bottom:22px;
}
body.ui-refresh .article-principal h3{ font-family:"Archivo",sans-serif; font-weight:700; margin-top:0; }
body.ui-refresh .article-principal hr{ display:none; }
body.ui-refresh .article-encart{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); overflow:hidden; margin-bottom:22px;
}
body.ui-refresh .article-encart .panel-heading{ padding:12px 16px; }
body.ui-refresh .article-encart .panel-body{ padding:16px; }

/* ===================== Variante TEINTÉE ===================== */
/* Cartes KPI : fond + bordure teintés par couleur (clés = classes FlatLab *-border) */
body.ui-refresh .state-overview .panel.g-border{ background:#eafaf4; border:1px solid #cdeee1; }
body.ui-refresh .state-overview .panel.y-border{ background:#fdf6df; border:1px solid #f4e7b0; }
body.ui-refresh .state-overview .panel.r-border{ background:#fdecee; border:1px solid #f6cdd2; }
body.ui-refresh .state-overview .panel.b-border{ background:#e6f7fc; border:1px solid #c2e9f4; }
body.ui-refresh .state-overview .panel.p-border{ background:#f3edfa; border:1px solid #e2d2f1; }
/* Pastille d'icône : 54px + ombre douce */
body.ui-refresh .state-overview .panel .symbol span{ width:54px; height:54px; box-shadow:0 6px 16px -6px rgba(0,0,0,.3); }
body.ui-refresh .state-overview .panel.y-border .symbol span{ color:#5a4800; }

/* Cartes de hauteur égale en BS3 (override du float) */
body.ui-refresh .row.state-overview{ display:flex; flex-wrap:wrap; }
body.ui-refresh .row.state-overview > [class*="col-"]{ display:flex; float:none; }
/* garder masquée la tuile BilletTP (le display:flex ci-dessus annulait son display:none) */
body.ui-refresh .row.state-overview > [class*="col-"].BilletTP{ display:none; }
body.ui-refresh .row.state-overview > [class*="col-"] > a{ display:flex; flex:1; text-decoration:none; }
body.ui-refresh .row.state-overview .panel{ width:100%; margin-bottom:0; }
@media (max-width:1100px){ body.ui-refresh .row.state-overview > [class*="col-"]{ width:50%; } }
@media (max-width:820px){ body.ui-refresh .row.state-overview > [class*="col-"]{ width:100%; } }

/* Section Administration encadrée */
body.ui-refresh .admin-section{
  margin-top:18px; padding:14px 16px 18px; border-radius:18px; border:1px solid #e2d2f1;
  background:linear-gradient(180deg, rgba(128,85,181,.10), rgba(128,85,181,.03));
}
body.ui-refresh .admin-label{ display:flex; align-items:center; gap:10px; margin:2px 4px 14px; flex-wrap:wrap; }
body.ui-refresh .admin-label .dot{ width:9px; height:9px; border-radius:50%; background:#8055b5; box-shadow:0 0 0 4px rgba(128,85,181,.16); }
body.ui-refresh .admin-label .txt{ font-family:"Archivo",sans-serif; font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:#6f44a3; }
body.ui-refresh .admin-label .hint{ font-size:12px; color:#878e99; }
body.ui-refresh .admin-label .lock{ margin-left:auto; display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:#6f44a3; background:#fff; border:1px solid rgba(128,85,181,.25); padding:4px 10px; border-radius:20px; }
/* Espace + alignement de la grille d'encarts (marche a suivre / annonces) sous la zone admin */
body.ui-refresh .r-accueil-grid{ margin-top:22px; }

/* Habillage colonne de droite + composants de texte (prêts pour le gabarit article) */
body.ui-refresh .aside-head{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px; }
/* Eyebrow : pill d'accroche (icone optionnelle a gauche) */
body.ui-refresh .eyebrow{ display:inline-flex; align-items:center; gap:6px; background:#fdecee; border:1px solid #f7d2d6; color:#d8323f; border-radius:30px; padding:5px 14px; font-size:12.5px; font-weight:600; margin-bottom:14px; }
/* Callout : encart d'alerte (rouge). <div class="callout"><i class="fa fa-exclamation-triangle"></i><div>...</div></div> */
body.ui-refresh .callout{ display:flex; gap:10px; background:#fdecee; border:1px solid #f6cdd2; border-radius:12px; padding:12px 14px; margin:14px 0; color:#7a2630; }
body.ui-refresh .callout > .fa{ color:#d8323f; font-size:18px; flex:0 0 auto; margin-top:2px; }
/* Note : encart neutre */
body.ui-refresh .note{ background:#f6f7f9; border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:14px 0; }
/* Steps : <ol class="steps"> a pastilles numerotees */
body.ui-refresh ol.steps{ list-style:none; counter-reset:step; padding-left:0; margin:14px 0; }
body.ui-refresh ol.steps > li{ position:relative; counter-increment:step; padding-left:44px; margin-bottom:14px; min-height:30px; }
body.ui-refresh ol.steps > li::before{ content:counter(step); position:absolute; left:0; top:-2px; width:30px; height:30px; border-radius:50%; background:#fff; border:1px solid var(--line); color:var(--violet-deep); font-family:"Archivo",sans-serif; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-card); }
/* Variante violette pleine pour les "options" principales */
body.ui-refresh ol.steps.steps-violet > li::before{ background:var(--violet); border-color:var(--violet); color:#fff; box-shadow:none; }

/* Hover uniforme cartes/tuiles */
body.ui-refresh .state-overview .panel, body.ui-refresh .article-principal, body.ui-refresh .article-encart{ transition:transform .15s, box-shadow .15s; }
body.ui-refresh .state-overview .panel:hover, body.ui-refresh .article-encart:hover{ transform:translateY(-2px); box-shadow:var(--shadow-pop); }

/* ===================== DataTables (theme violet) ===================== */
body.ui-refresh .dataTables_wrapper .dataTables_filter input,
body.ui-refresh .dataTables_wrapper .dataTables_length select{ border:1px solid var(--line); border-radius:9px; box-shadow:none; }
body.ui-refresh table.dataTable thead th{ border-bottom:2px solid var(--line); color:var(--ink-2); font-weight:700; }
body.ui-refresh table.dataTable thead th.sorting_asc, body.ui-refresh table.dataTable thead th.sorting_desc{ color:var(--violet-deep); }
body.ui-refresh .pagination > li > a{ color:var(--violet-deep); }
body.ui-refresh .pagination > .active > a,
body.ui-refresh .pagination > .active > a:hover,
body.ui-refresh .pagination > .active > a:focus{ background:var(--violet); border-color:var(--violet); color:#fff; }

/* ===================== Connexion ===================== */
body.login-body.ui-refresh{ background:var(--app-bg); min-height:100vh; margin:0; }
body.login-body.ui-refresh .login-logo{ background:var(--surface); text-align:center; padding:22px; margin:0; }
body.login-body.ui-refresh .login-logo img{ max-width:260px; width:60%; height:auto; }
body.login-body.ui-refresh .form-heading{
  background:var(--side-bg); color:#fff; text-align:center; margin:0; padding:22px 16px;
  font-family:"Archivo",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:22px;
}
body.login-body.ui-refresh .form-heading small{
  display:block; text-transform:none; letter-spacing:0; font-weight:400; font-size:12.5px;
  color:#9aa1ab; margin-top:6px; font-family:"Public Sans",sans-serif;
}
body.login-body.ui-refresh .log-row{ max-width:404px; margin:28px auto; }
body.login-body.ui-refresh .login-field{ position:relative; }
body.login-body.ui-refresh .login-field > i{ position:absolute; left:15px; top:18px; color:var(--ink-3); font-size:15px; z-index:2; pointer-events:none; }
body.login-body.ui-refresh .form-control{
  border:1px solid var(--line); border-radius:11px; padding:14px; margin-bottom:12px;
  box-shadow:none; height:auto;
}
/* Decalage gauche reserve aux champs login (place pour l'icone) ; pas les autres
   .form-control de la page login (ex. email du popup mot de passe oublie). */
body.login-body.ui-refresh .login-field .form-control{ padding-left:44px; }
body.login-body.ui-refresh .form-control:focus{ border-color:var(--violet); box-shadow:0 0 0 3px rgba(128,85,181,.14); }
body.login-body.ui-refresh .btn-success.btn-block{
  background:linear-gradient(180deg,#2fc792,#1da877); border:0; border-radius:11px; padding:13px; font-weight:700;
}
body.login-body.ui-refresh .form-signin a.pull-right{ color:var(--ink-2); text-decoration:none; }
body.login-body.ui-refresh .registration .btn-info{
  background:#eaf4fd; border:1px solid #bfdcf6; color:#2c70b0; border-radius:11px; padding:12px; font-weight:600;
}

/* ===================== MODALE coureur (.esc-modal) =====================
   Refonte visuelle des popups d'inscription (handoff design, section MODAL de backoffice.css).
   ACCENT = VERT (le violet reste réservé à la zone Admin). Densité compacte bakée directement
   (écart assumé : pas de bascule dense/ultra par classe, un seul niveau livré). Scopé .esc-modal. */

/* Carte + backdrop : header/onglets/pied fixes, seul le corps défile. */
body.ui-refresh .esc-modal .modal-dialog{ width:600px; max-width:calc(100% - 40px); margin:38px auto; }
body.ui-refresh .esc-modal .modal-dialog.modal-sm{ width:440px; }
body.ui-refresh .esc-modal .modal-dialog.modal-lg{ width:840px; }
body.ui-refresh .esc-modal .modal-dialog.modal-xl{ width:1140px; }
body.ui-refresh .esc-modal .modal-content{
  border:0; border-radius:16px; overflow:hidden; background:var(--surface);
  box-shadow:0 30px 80px -24px rgba(10,12,24,.6);
  display:flex; flex-direction:column; max-height:calc(100vh - 76px);
}
body.ui-refresh .esc-modal .modal-content > form{ display:flex; flex-direction:column; min-height:0; flex:1 1 auto; }
body.ui-refresh .modal-backdrop.in{ opacity:.55; }

/* En-tête sobre : pastille verte + titre Archivo + chip vert du groupe + fermer fantôme */
body.ui-refresh .esc-modal .modal-header{
  display:flex; align-items:center; gap:11px; padding:11px 18px; margin:0;
  background:var(--surface); border-bottom:1px solid var(--line); border-radius:16px 16px 0 0;
}
/* Croix BS3 par defaut restylee en fermeture fantome (modals sans .m-close). */
body.ui-refresh .esc-modal .modal-header .close{
  float:none; order:3; margin-left:auto; opacity:1; text-shadow:none; font-weight:400;
  width:34px; height:34px; border:0; background:transparent; border-radius:10px; cursor:pointer;
  color:var(--ink-3); font-size:20px; line-height:1; flex:0 0 auto;
}
body.ui-refresh .esc-modal .modal-header .close:hover{ background:var(--panel-2); color:var(--ink); opacity:1; }
/* Titre BS3 par defaut (sans .m-title) : meme rendu Archivo, prend l'espace disponible. */
body.ui-refresh .esc-modal .modal-header > .modal-title{
  font-family:"Archivo",sans-serif; font-weight:700; font-size:16px; color:var(--ink); margin:0; line-height:1.2; flex:1 1 auto;
}
body.ui-refresh .esc-modal .m-ico{
  width:34px; height:34px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:16px; background:linear-gradient(160deg,#2fc792,#1da877); box-shadow:0 8px 18px -8px rgba(29,168,119,.55);
}
body.ui-refresh .esc-modal .m-head-txt{ display:flex; flex-direction:column; min-width:0; }
body.ui-refresh .esc-modal .modal-title.m-title{ font-family:"Archivo",sans-serif; font-weight:700; font-size:16px; color:var(--ink); margin:0; line-height:1.2; }
body.ui-refresh .esc-modal .m-chip{
  display:inline-flex; align-items:center; gap:6px; margin-top:3px; align-self:flex-start; max-width:100%;
  font-size:12px; font-weight:600; color:#157a55; background:#eafaf4; border:1px solid #cdeee1; padding:2px 10px; border-radius:20px;
}
body.ui-refresh .esc-modal .m-chip strong{ font-weight:700; }
/* Sous-titre d'en-tete (ligne sous le titre, ex. nom de modele). */
body.ui-refresh .esc-modal .m-head-txt > .m-sub{ font-size:12px; color:var(--ink-3); margin-top:1px; line-height:1.3; }
body.ui-refresh .esc-modal .m-close{
  margin-left:auto; width:34px; height:34px; border:0; background:transparent; border-radius:10px; cursor:pointer;
  color:var(--ink-3); display:flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 auto;
}
body.ui-refresh .esc-modal .m-close:hover{ background:var(--panel-2); color:var(--ink); }

/* Onglets BS3 (nav-tabs nav-justified) restylés en bande à soulignement vert */
body.ui-refresh .esc-modal .isolate-tabs > .nav-tabs{
  display:flex; gap:4px; padding:0 16px; margin:0; border-bottom:1px solid var(--line); background:var(--panel-2);
}
body.ui-refresh .esc-modal .isolate-tabs > .nav-tabs > li{ display:block; float:none; width:auto; margin-bottom:-1px; }
body.ui-refresh .esc-modal .isolate-tabs > .nav-tabs > li > a{
  border:0; border-radius:0; background:transparent; color:var(--ink-3); font-weight:600; font-size:13px;
  padding:9px 14px; margin:0; border-bottom:2.5px solid transparent;
}
body.ui-refresh .esc-modal .isolate-tabs > .nav-tabs > li > a:hover{ background:transparent; color:var(--ink-2); border-bottom-color:transparent; }
body.ui-refresh .esc-modal .isolate-tabs > .nav-tabs > li.active > a,
body.ui-refresh .esc-modal .isolate-tabs > .nav-tabs > li.active > a:hover,
body.ui-refresh .esc-modal .isolate-tabs > .nav-tabs > li.active > a:focus{
  color:#157a55; background:transparent; border:0; border-bottom:2.5px solid var(--green);
}

/* Corps scrollable + neutralisation du panel-body interne */
body.ui-refresh .esc-modal .modal-body{ padding:13px 16px; overflow-y:auto; flex:1 1 auto; min-height:0; }
body.ui-refresh .esc-modal .modal-body .isolate-tabs{ margin:-13px -16px 0; }
body.ui-refresh .esc-modal .modal-body .isolate-tabs > .panel-body{ padding:14px 16px; background:transparent; }

/* Pied : Fermer (ghost) + Enregistrer (rouge) à droite */
body.ui-refresh .esc-modal .modal-footer{
  display:flex; align-items:center; justify-content:flex-end; gap:10px; margin:0;
  padding:11px 18px; border-top:1px solid var(--line); background:var(--surface); border-radius:0 0 16px 16px;
}
body.ui-refresh .esc-modal .modal-footer .btn{ margin:0; }

/* Boutons (base + variantes, transposés du handoff, scopés modale) */
body.ui-refresh .esc-modal .btn{
  display:inline-flex; align-items:center; gap:8px; border:0; border-radius:10px; cursor:pointer;
  font-weight:600; font-size:13px; padding:8px 14px; box-shadow:none; transition:filter .14s, box-shadow .14s;
}
body.ui-refresh .esc-modal .btn-ghost{ background:var(--surface); color:var(--ink-2); border:1px solid var(--line); }
body.ui-refresh .esc-modal .btn-ghost:hover{ background:var(--panel-2); color:var(--ink); }
body.ui-refresh .esc-modal .btn-red{ background:linear-gradient(160deg,#ec5b66,var(--red-deep)); color:#fff; box-shadow:0 8px 20px -8px rgba(216,50,63,.6); }
body.ui-refresh .esc-modal .btn-red:hover{ filter:brightness(1.05); color:#fff; }
body.ui-refresh .esc-modal .btn-green{ background:linear-gradient(160deg,#2fc792,#1da877); color:#fff; box-shadow:0 8px 20px -8px rgba(29,168,119,.5); }
body.ui-refresh .esc-modal .btn-green:hover{ filter:brightness(1.05); color:#fff; }
body.ui-refresh .esc-modal .btn-sm{ padding:6px 11px; font-size:12.5px; border-radius:9px; }

/* === Variante ADMIN : accent VIOLET (zone gestion). A poser avec la classe esc-modal-admin. === */
body.ui-refresh .esc-modal.esc-modal-admin .m-ico{
  background:linear-gradient(160deg,#9a72c9,var(--violet-deep)); box-shadow:0 8px 18px -8px rgba(111,68,163,.55);
}
body.ui-refresh .esc-modal.esc-modal-admin .m-chip{ color:var(--violet-deep); background:var(--violet-soft); border-color:#e2d6f2; }
body.ui-refresh .esc-modal.esc-modal-admin .isolate-tabs > .nav-tabs > li.active > a,
body.ui-refresh .esc-modal.esc-modal-admin .isolate-tabs > .nav-tabs > li.active > a:hover,
body.ui-refresh .esc-modal.esc-modal-admin .isolate-tabs > .nav-tabs > li.active > a:focus{
  color:var(--violet-deep); border-bottom-color:var(--violet);
}
body.ui-refresh .esc-modal.esc-modal-admin .recall{ background:var(--violet-soft); border-color:#e2d6f2; }
body.ui-refresh .esc-modal.esc-modal-admin .recall .rc-head .ic,
body.ui-refresh .esc-modal.esc-modal-admin .recall .rc-head .t{ color:var(--violet-deep); }

/* ---- Variante ADMIN (suite) : formulaire modale groupes inscrits ---- */
body.ui-refresh .esc-modal.esc-modal-admin .fc:focus,
body.ui-refresh .esc-modal.esc-modal-admin .fc-select:focus{
  border-color:var(--violet); box-shadow:0 0 0 3px rgba(128,85,181,.18);
}
body.ui-refresh .esc-modal .fgrid.fgrid-2{ grid-template-columns:1fr 1fr; }
body.ui-refresh .esc-modal .f.chk{ display:flex; align-items:flex-end; }
body.ui-refresh .esc-modal .chk-line{
  display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  color:var(--ink); margin:0 0 6px; cursor:pointer;
}
body.ui-refresh .esc-modal .chk-line input[type="checkbox"]{ margin:0; }
body.ui-refresh .esc-modal .btn-violet{
  background:linear-gradient(160deg,#9166c5,var(--violet-deep)); color:#fff;
  box-shadow:0 8px 20px -8px rgba(111,68,163,.5);
}
body.ui-refresh .esc-modal .btn-violet:hover{ filter:brightness(1.05); color:#fff; }

/* bandeau lien d'inscription decentralisee (onglet Informations) */
body.ui-refresh .esc-modal .quicklink-band{
  display:flex; align-items:center; gap:12px; margin-top:14px; padding:10px 14px;
  background:var(--violet-soft); border:1px solid #e2d6f2; border-radius:10px;
}
body.ui-refresh .esc-modal .quicklink-band .ic{ color:var(--violet-deep); font-size:15px; flex:0 0 auto; }
body.ui-refresh .esc-modal .quicklink-band .ql-txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
body.ui-refresh .esc-modal .quicklink-band .ql-num{ font-size:11px; color:var(--ink-3); }
body.ui-refresh .esc-modal .quicklink-band a{
  font-size:13px; color:var(--violet-deep); font-weight:600; word-break:break-all;
}
body.ui-refresh .esc-modal .quicklink-band .btn{ flex:0 0 auto; }

/* compatibilite CheckGroup (check.js) : champ Nom en .form-group + .iconic-input */
body.ui-refresh .esc-modal .f.form-group{ margin:0; }
body.ui-refresh .esc-modal .form-group.has-error .fc{ border-color:var(--red); }
body.ui-refresh .esc-modal .form-group.has-success .fc{ border-color:var(--green); }

/* ---- G-058 : bandeau de statut de validation (modale groupes inscrits) ---- */
body.ui-refresh .esc-modal .statut-band{
  display:flex; align-items:center; gap:14px; margin:0 0 14px; padding:12px 14px;
  background:var(--violet-soft); border:1px solid #e2d6f2; border-radius:10px;
}
body.ui-refresh .esc-modal .statut-band .sw-lbl{
  display:flex; align-items:center; gap:10px; cursor:pointer; margin:0;
  font-weight:700; font-size:13.5px; color:var(--ink);
}
body.ui-refresh .esc-modal .statut-band .sw{ position:relative; display:inline-block; width:44px; height:24px; flex:0 0 auto; }
body.ui-refresh .esc-modal .statut-band .sw input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
body.ui-refresh .esc-modal .statut-band .sw .sw-track{
  position:absolute; top:0; right:0; bottom:0; left:0;
  background:#d8dde3; border-radius:12px; transition:background .15s;
}
body.ui-refresh .esc-modal .statut-band .sw .sw-track::after{
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .15s;
}
body.ui-refresh .esc-modal .statut-band .sw input:checked + .sw-track{ background:var(--violet); }
body.ui-refresh .esc-modal .statut-band .sw input:checked + .sw-track::after{ left:23px; }
body.ui-refresh .esc-modal .statut-band .st-badge{
  font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px;
  background:#eef0f4; color:var(--ink-3); letter-spacing:.3px; text-transform:uppercase;
}
body.ui-refresh .esc-modal .statut-band .st-badge.ok{ background:#e7f7f0; color:#157a55; }
body.ui-refresh .esc-modal .statut-band .st-spacer{ flex:1 1 auto; }
body.ui-refresh .esc-modal .statut-band .st-feedback{ font-size:12px; color:#157a55; font-weight:600; }

/* === Variante SIMPLE : popup d'info/contenu sans formulaire (lien, message). En-tete teinte
   vert + pied teinte, pour ne pas tomber dans le "tout blanc". === */
body.ui-refresh .esc-modal.esc-modal-simple .modal-dialog{ width:680px; }
body.ui-refresh .esc-modal.esc-modal-simple .modal-header{ background:linear-gradient(180deg,#eafaf4,#f3fbf7); border-bottom:1px solid #cdeee1; }
body.ui-refresh .esc-modal.esc-modal-simple .modal-footer{ background:var(--panel-2); }
body.ui-refresh .esc-modal .simple-intro{ font-size:14px; color:var(--ink-2); line-height:1.6; margin:0 0 18px; }
body.ui-refresh .esc-modal .simple-intro strong{ color:var(--ink); font-weight:700; }
/* Etapes numerotees vertes */
body.ui-refresh .esc-modal .simple-steps{ list-style:none; margin:0 0 22px; padding:0; counter-reset:s; }
body.ui-refresh .esc-modal .simple-steps li{ position:relative; padding:3px 0 14px 42px; counter-increment:s; font-size:13.5px; color:var(--ink-2); }
body.ui-refresh .esc-modal .simple-steps li::before{
  content:counter(s); position:absolute; left:0; top:0; width:28px; height:28px; border-radius:9px;
  background:#eafaf4; border:1.5px solid #cdeee1; color:#157a55; font-weight:800; font-size:13px; display:grid; place-items:center;
}
body.ui-refresh .esc-modal .simple-steps li:not(:last-child)::after{ content:""; position:absolute; left:13.5px; top:30px; bottom:2px; width:1.5px; background:#dcefe6; }
/* Lignes de lien a copier */
body.ui-refresh .esc-modal .link-list{ display:flex; flex-direction:column; gap:10px; }
body.ui-refresh .esc-modal .link-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--panel-2); border:1px solid var(--line); border-radius:11px; padding:11px 12px 11px 16px; }
body.ui-refresh .esc-modal .link-row .lr-name{ font-weight:700; color:var(--ink); font-size:14px; flex:0 0 auto; min-width:130px; }
body.ui-refresh .esc-modal .link-row .lr-url{ flex:1 1 220px; min-width:0; font-size:13.5px; color:var(--blue-link); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.ui-refresh .esc-modal .link-row .lr-copy{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; border:0; border-radius:9px; cursor:pointer;
  background:linear-gradient(160deg,#2fc792,#1da877); color:#fff; font-weight:600; font-size:13px; padding:8px 13px; transition:filter .14s;
}
body.ui-refresh .esc-modal .link-row .lr-copy:hover{ filter:brightness(1.05); color:#fff; }
body.ui-refresh .esc-modal .link-row .lr-copy.ok{ background:#157a55; }

/* === Variante DANGER : confirmation / suppression. En-tete teinte rouge + pastille rouge. === */
body.ui-refresh .esc-modal.esc-modal-danger .modal-header{ background:linear-gradient(180deg,#fdecee,#fdf5f6); border-bottom:1px solid #f6cdd2; }
body.ui-refresh .esc-modal.esc-modal-danger .m-ico{ background:linear-gradient(160deg,#ec5b66,var(--red-deep)); box-shadow:0 8px 18px -8px rgba(216,50,63,.5); }

/* --- Composants du corps (prêts pour le lot b : recall, champs, courses, options) --- */
/* Bloc "reprendre une inscription" (vert teinté) */
body.ui-refresh .esc-modal .recall{ background:#eafaf4; border:1px solid #cdeee1; border-radius:10px; padding:11px 13px; margin-bottom:14px; }
body.ui-refresh .esc-modal .recall .rc-head{ display:flex; align-items:center; gap:9px; margin-bottom:6px; }
body.ui-refresh .esc-modal .recall .rc-head .ic{ color:#157a55; }
body.ui-refresh .esc-modal .recall .rc-head .t{ font-weight:700; font-size:13px; color:#157a55; }
body.ui-refresh .esc-modal .recall .rc-text{ font-size:12.5px; color:var(--ink-2); margin:0 0 10px; line-height:1.5; }
body.ui-refresh .esc-modal .recall .rc-row{ display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; }
/* Chaque recherche est un groupe insecable : le bouton reste colle a ses champs et le
   groupe passe a la ligne d'un bloc (jamais le bouton seul) sur ecran etroit. */
body.ui-refresh .esc-modal .recall .rc-grp{ display:flex; align-items:center; gap:10px; min-width:0; flex:0 1 auto; }
body.ui-refresh .esc-modal .recall .rc-grp-nom{ flex:1 1 300px; }
body.ui-refresh .esc-modal .recall .rc-grp .btn{ flex:0 0 auto; white-space:nowrap; }
body.ui-refresh .esc-modal .recall .rc-or{ font-size:13px; color:var(--ink-3); font-weight:600; padding:0 2px; flex:0 0 auto; }
body.ui-refresh .esc-modal .recall .fc{ min-width:0; }
body.ui-refresh .esc-modal .recall .fc.ds{ flex:0 0 110px; }
body.ui-refresh .esc-modal .recall .fc.nm{ flex:1 1 90px; }

/* Titres de section */
body.ui-refresh .esc-modal .modal-section-h{
  font-family:"Archivo",sans-serif; font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 8px; display:flex; align-items:center; gap:8px;
}
body.ui-refresh .esc-modal .modal-section-h.gap{ margin-top:14px; }
body.ui-refresh .esc-modal .modal-section-h::before{ content:""; width:3px; height:13px; border-radius:3px; background:var(--green); }

/* Grille de champs + champs .fc / .fc-select (focus vert) */
body.ui-refresh .esc-modal .fgrid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px 14px; margin-bottom:8px; }
body.ui-refresh .esc-modal .f{ display:flex; flex-direction:column; gap:3px; min-width:0; }
body.ui-refresh .esc-modal .f.span2{ grid-column:span 2; }
body.ui-refresh .esc-modal .f.span3{ grid-column:1 / -1; }
body.ui-refresh .esc-modal .f > label{ font-size:11.5px; font-weight:600; color:var(--ink-2); }
body.ui-refresh .esc-modal .f .req{ color:var(--red); }
body.ui-refresh .esc-modal .f-duo{ display:grid; grid-template-columns:70px 1fr; gap:7px; }
body.ui-refresh .esc-modal .fc,
body.ui-refresh .esc-modal .fc-select{
  border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink);
  padding:5px 11px; font-size:13px; font-family:inherit; outline:none; width:100%;
  transition:border-color .14s, box-shadow .14s;
}
body.ui-refresh .esc-modal .fc:focus,
body.ui-refresh .esc-modal .fc-select:focus{ border-color:var(--green); box-shadow:0 0 0 3px rgba(34,185,133,.18); }
body.ui-refresh .esc-modal .fc[disabled],
body.ui-refresh .esc-modal .fc-select[disabled]{ background:var(--panel-2); color:var(--ink-3); }

/* Table des courses (pastille n° verte) */
body.ui-refresh .esc-modal .course-table{ margin:13px 0 4px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
body.ui-refresh .esc-modal .course-table .ct-head,
body.ui-refresh .esc-modal .course-table .ct-row{ display:grid; grid-template-columns:40px 1.4fr 1.4fr .8fr 1.1fr; align-items:center; gap:10px; padding:6px 12px; }
body.ui-refresh .esc-modal .course-table .ct-head{ background:var(--panel-2); border-bottom:1px solid var(--line); font-size:11px; font-weight:700; color:var(--ink-2); text-transform:uppercase; letter-spacing:.03em; }
body.ui-refresh .esc-modal .course-table .ct-row{ border-bottom:1px solid var(--line-soft); }
body.ui-refresh .esc-modal .course-table .ct-row:last-child{ border-bottom:0; }
body.ui-refresh .esc-modal .course-table .ct-n{ width:20px; height:20px; border-radius:6px; background:#eafaf4; color:#157a55; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:10.5px; }
body.ui-refresh .esc-modal .course-table .muted{ color:var(--ink-3); font-size:13px; }

/* Options en lignes + segment Oui/Non (Oui=vert, Non=gris) */
body.ui-refresh .esc-modal .opts-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:13px; }
body.ui-refresh .esc-modal .opt{ border:1px solid var(--line); border-radius:9px; padding:6px 9px; background:var(--surface); display:flex; align-items:center; gap:8px; }
body.ui-refresh .esc-modal .opt .opt-h{ display:flex; align-items:center; gap:6px; font-weight:700; font-size:12px; color:var(--ink); flex:1 1 auto; line-height:1.3; }
body.ui-refresh .esc-modal .info-badge{ width:16px; height:16px; border-radius:5px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--green); color:#fff; font-size:10px; font-weight:800; cursor:help; margin-left:auto; }
body.ui-refresh .esc-modal .seg-yn{ display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; flex:0 0 auto; }
body.ui-refresh .esc-modal .seg-yn label{ margin:0; }
body.ui-refresh .esc-modal .seg-yn input{ position:absolute; opacity:0; pointer-events:none; }
body.ui-refresh .esc-modal .seg-yn .opt-btn{ display:block; text-align:center; padding:5px 12px; font-size:12px; font-weight:600; color:var(--ink-2); cursor:pointer; background:var(--surface); border-right:1px solid var(--line); transition:.12s; }
body.ui-refresh .esc-modal .seg-yn label:last-child .opt-btn{ border-right:0; }
body.ui-refresh .esc-modal .seg-yn label:hover .opt-btn{ background:var(--panel-2); }
body.ui-refresh .esc-modal .seg-yn input:checked + .opt-btn{ background:var(--green); color:#fff; }
body.ui-refresh .esc-modal .seg-yn input:checked + .opt-btn[data-v="non"]{ background:#7a828e; color:#fff; }

/* --- Mode édition (lot c) : champs verrouillés + panneau 2e relayeur --- */
body.ui-refresh .esc-modal .lock-note{ display:flex; align-items:flex-start; gap:10px; background:#eef5fb; border:1px solid #d3e4f3; border-left:3px solid #4a8fd6; border-radius:9px; padding:8px 11px; margin-bottom:12px; font-size:12px; color:#3a566f; font-style:italic; }
body.ui-refresh .esc-modal .lock-note .ic{ color:#4a8fd6; flex:0 0 auto; margin-top:1px; }
body.ui-refresh .esc-modal .lock-note.lock-note-warn{ background:#fdf6df; border-color:#f0dca0; border-left-color:#e8a91e; color:#7a5b12; font-style:normal; }
body.ui-refresh .esc-modal .lock-note.lock-note-warn .ic{ color:#b8860b; }
body.ui-refresh .esc-modal .f.locked > label{ color:var(--ink-3); }
body.ui-refresh .esc-modal .fc.locked,
body.ui-refresh .esc-modal .fc-select.locked{ background:var(--panel-2); color:var(--ink-3); cursor:not-allowed; }
body.ui-refresh .esc-modal .relay-panel{ background:#fdf6df; border:1px solid #f0dca0; border-left:4px solid var(--yellow); padding:9px 12px; }
body.ui-refresh .esc-modal .relay-head{ display:flex; align-items:center; gap:9px; margin-bottom:8px; }
body.ui-refresh .esc-modal .relay-head .ic{ color:#b8920a; flex:0 0 auto; }
body.ui-refresh .esc-modal .relay-head .t{ font-family:"Archivo",sans-serif; font-weight:700; color:#8a6a00; font-size:13px; }
body.ui-refresh .esc-modal .relay-head .ln{ font-size:12px; color:#a8862a; font-weight:600; }
body.ui-refresh .esc-modal .relay-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; }
body.ui-refresh .esc-modal .rf{ display:grid; grid-template-columns:84px 1fr; align-items:center; gap:7px; min-width:0; }
body.ui-refresh .esc-modal .rf > label{ font-size:11.5px; font-weight:600; color:#7a5f12; text-align:right; }
body.ui-refresh .esc-modal .rf.team{ grid-column:1 / -1; grid-template-columns:132px minmax(0,260px); justify-content:center; }

/* ---- G-056 : wizard 3 etapes (stepper a pastilles) ---- */
body.ui-refresh .esc-modal .wiz-stepper{ display:flex; align-items:center; padding:14px 24px 4px; }
body.ui-refresh .esc-modal .wiz-st{ display:flex; align-items:center; gap:8px; }
body.ui-refresh .esc-modal .wiz-st .n{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:700; border:2px solid var(--line); color:var(--ink-3); background:var(--surface);
}
body.ui-refresh .esc-modal .wiz-st .lbl{ font-size:12.5px; color:var(--ink-3); }
body.ui-refresh .esc-modal .wiz-st.active .n{ border-color:var(--green); color:#157a55; }
body.ui-refresh .esc-modal .wiz-st.active .lbl{ color:var(--ink); font-weight:700; }
body.ui-refresh .esc-modal .wiz-st.done .n{ background:var(--green); border-color:var(--green); color:#fff; font-size:0; }
body.ui-refresh .esc-modal .wiz-st.done .n::after{ content:"\f00c"; font-family:FontAwesome; font-size:12px; }
body.ui-refresh .esc-modal .wiz-st.done .lbl{ color:#157a55; }
body.ui-refresh .esc-modal .wiz-st.clickable{ cursor:pointer; }
body.ui-refresh .esc-modal .wiz-st.clickable:hover .n{ border-color:var(--green); }
body.ui-refresh .esc-modal .wiz-st.clickable:hover .lbl{ color:var(--ink); }
body.ui-refresh .esc-modal .wiz-conn{ flex:1 1 auto; height:2px; background:var(--line); margin:0 12px; min-width:24px; border-radius:1px; }

/* ---- G-056 : modale historique ---- */
body.ui-refresh #ModalHistorique .g-border{ border-left:1px solid var(--line); }
body.ui-refresh #ModalHistorique table.table > thead > tr > th{
  font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-3);
  border-bottom:1px solid var(--line);
}
body.ui-refresh #ModalHistorique .btn-info{
  background:linear-gradient(160deg,#2fc792,#1da877); border:0; color:#fff;
}
body.ui-refresh #ModalHistorique .btn-info:hover{ filter:brightness(1.05); color:#fff; }
body.ui-refresh #ModalHistorique h4{ font-family:"Archivo",sans-serif; font-size:14px; }

/* Responsive modale */
@media (max-width:820px){
  body.ui-refresh .esc-modal .fgrid{ grid-template-columns:1fr 1fr; }
  body.ui-refresh .esc-modal .opts-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  body.ui-refresh .esc-modal .fgrid{ grid-template-columns:1fr; }
  body.ui-refresh .esc-modal .f.span2,
  body.ui-refresh .esc-modal .f.span3{ grid-column:1 / -1; }
  body.ui-refresh .esc-modal .opts-grid{ grid-template-columns:1fr; }
  body.ui-refresh .esc-modal .course-table .ct-head{ display:none; }
  body.ui-refresh .esc-modal .course-table .ct-row{ grid-template-columns:34px 1fr; }
  body.ui-refresh .esc-modal .relay-grid{ grid-template-columns:1fr; }
  body.ui-refresh .esc-modal .rf.team{ grid-template-columns:84px 1fr; justify-content:stretch; }
}

/* Table des courses : gardée en <table> (l'insertion JS de la zone relais exige .closest('tr')
   + display:table-row), donc stylée à part de la grille .course-table. */
body.ui-refresh .esc-modal .esc-course{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; margin:13px 0 4px; }
body.ui-refresh .esc-modal .esc-course thead th{ background:var(--panel-2); border-bottom:1px solid var(--line); font-size:11px; font-weight:700; color:var(--ink-2); text-transform:uppercase; letter-spacing:.03em; padding:7px 12px; text-align:left; }
body.ui-refresh .esc-modal .esc-course tbody td{ padding:7px 12px; border-bottom:1px solid var(--line-soft); font-size:13px; color:var(--ink-2); vertical-align:middle; }
body.ui-refresh .esc-modal .esc-course tbody tr:last-child > td{ border-bottom:0; }
body.ui-refresh .esc-modal .esc-course .ct-n{ display:inline-flex; width:20px; height:20px; border-radius:6px; background:#eafaf4; color:#157a55; align-items:center; justify-content:center; font-weight:800; font-size:10.5px; }
body.ui-refresh .esc-modal .esc-course td input[type="text"]{ border:1px solid var(--line); border-radius:7px; padding:4px 8px; font-size:12.5px; font-family:inherit; outline:none; }
body.ui-refresh .esc-modal .esc-course td input[type="text"]:focus{ border-color:var(--green); box-shadow:0 0 0 3px rgba(34,185,133,.18); }
body.ui-refresh .esc-modal .esc-course #zoneInfoRelayeurRow > td{ padding:0; }

/* Pays (select de l'include) + autres selects de la grille : look fc-select */
body.ui-refresh .esc-modal .f select{ border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); padding:5px 11px; font-size:13px; font-family:inherit; outline:none; width:100%; }
body.ui-refresh .esc-modal .f select:focus{ border-color:var(--green); box-shadow:0 0 0 3px rgba(34,185,133,.18); }

/* info-badge porté par un <button> : retirer le style natif du bouton */
body.ui-refresh .esc-modal .info-badge{ border:0; padding:0; }

/* [G-067] Widget Temps prevu : 3 champs h/min/s alignes et libelles.
   Classes tp-* specifiques, pas de collision -> scope .temps-prevu suffit. */
.temps-prevu{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;}
.temps-prevu input[type=number]{width:52px;text-align:center;border:1px solid var(--line);
  border-radius:8px;padding:6px 5px;font-size:14px;color:var(--ink);font-family:inherit;-moz-appearance:textfield;}
.temps-prevu input[type=number]::-webkit-outer-spin-button,
.temps-prevu input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.temps-prevu input[type=number]:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(128,85,181,.18);outline:none;}
.temps-prevu input.error{border-color:var(--red);background:#fff5f5;}
.temps-prevu .tp-u{color:var(--ink-3);font-size:13px;}
.temps-prevu input[disabled]{background:var(--line-soft);color:var(--ink-3);}

/* [G-108] Bornes de plausibilite dans la fiche course. Bloc pleine largeur sous les deux
   colonnes : trois champs h/min/s par borne ne tiennent pas dans une demi-largeur. */
body.ui-refresh .bornes-chrono{border-top:1px solid var(--line);margin-top:4px;padding-top:14px;}
body.ui-refresh .bornes-chrono .bornes-titre{font-weight:600;color:var(--ink);margin-bottom:2px;}
body.ui-refresh .bornes-chrono .bornes-aide{color:var(--ink-3);font-size:12px;line-height:1.45;
  margin:0 0 10px;max-width:640px;}
/* Sous ~560px de modale (BS3 passe en pleine largeur sur mobile), la table ne tient plus.
   Elle defile alors dans son propre conteneur plutot que de deborder la modale. */
body.ui-refresh .bornes-chrono{overflow-x:auto;}
body.ui-refresh .bornes-table{width:auto;}
body.ui-refresh .bornes-table th,
body.ui-refresh .bornes-table td{padding:4px 14px 4px 0;vertical-align:middle;}
body.ui-refresh .bornes-table thead th{font-size:12px;font-weight:600;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.03em;padding-bottom:6px;}
body.ui-refresh .bornes-table tbody th{font-weight:500;color:var(--ink);white-space:nowrap;}
/* Ici la place ne manque plus : le widget ne doit jamais se replier sur deux lignes. */
body.ui-refresh .bornes-table .temps-prevu{flex-wrap:nowrap;gap:4px;}
body.ui-refresh .bornes-table .temps-prevu input[type=number]{width:46px;padding:5px 3px;}
/* [G-067] (retour Jerry 24.07) : dans la cellule etroite de la table (colonne
   "Temps prevu"), version compacte pour tenir sur 1 ligne. Champs resserres.
   Scope back-office (ui-refresh) uniquement : la page publique (.pub-body) garde
   le rendu large. L'apercu du temps saisi a ete supprime du composant (doublon
   avec les champs deja libelles h/min/s), il n'y a donc plus rien a masquer. */
body.ui-refresh .temps-prevu{gap:3px;}
body.ui-refresh .temps-prevu input[type=number]{width:34px;padding:6px 3px;font-size:13px;}
body.ui-refresh .temps-prevu .tp-u{font-size:11px;margin-right:1px;}

/* ===================== Popover d'aide (G-096) =====================
   Contenu redige dans la table [Messages] : on ne maitrise pas son HTML.
   Largeur par defaut de Bootstrap (276px) trop etroite pour les horaires de
   retrait -> elargie, et alignement force a gauche (certains messages sont
   justifies, ce qui produit des espacements illisibles sur une colonne etroite). */
body.ui-refresh .popover.popover-aide{ max-width:420px; }
body.ui-refresh .popover.popover-aide .popover-content{
  text-align:left; overflow-wrap:break-word; word-wrap:break-word;
}
body.ui-refresh .popover.popover-aide .popover-content *{ text-align:left !important; }
body.ui-refresh .popover.popover-aide .popover-content table,
body.ui-refresh .popover.popover-aide .popover-content img{ max-width:100%; }