/* ============================================================
   base.css — 2 sections
   ============================================================ */

/* ============================================================
   CSS VARIABLES — DARK & LIGHT THEMES
============================================================ */
:root {
  --red:      #B71C1C;
  --red-l:    #EF5350;
  --red-glow: rgba(183,28,28,.15);
  --gold:     #C9A832;
  --gold-dim: #8B7525;
  --green:    #2E7D32;
  --green-l:  #4CAF50;
  --blue:     #1565C0;
  --blue-l:   #42A5F5;
  --purple:   #6A1B9A;
  --purple-l: #CE93D8;
  /* 09/07/2026 — Accents identite de role (surcharges par la nuance choisie dans le profil) */
  --coach:      #00B4D8;
  --orga:       #C9347D;
  --admin-gold: #C9A84C;
  --trans:    all .2s ease;
  /* 02/05/2026 — Couleur du club courant (set dynamiquement par buildNav) */
  --club-color:      #B71C1C;
  --club-color-dim:  #650F0F;
  --club-color-glow: rgba(183,28,28,.15);
}

[data-theme="dark"] {
  --bg:       #080A0C;
  --bg1:      #0D1014;
  --bg2:      #12161B;
  --bg3:      #181D23;
  --bg4:      #1E242C;
  --border:   #222A33;
  --border2:  #2A3340;
  --text:     #E8ECF0;
  --text2:    #A6B0BB;
  --text3:    #8C97A3;
  --shadow:   0 4px 24px rgba(0,0,0,.5);
  --shadow-lg:0 8px 40px rgba(0,0,0,.6);
  --card-hover:#1A2028;
  /* 31/07/2026 — Onglets de rôle inactifs (bandeaux sidebar + profil) */
  --role-tab-bg:       rgba(40,42,48,.85);
  --role-tab-bg-hover: rgba(60,62,68,.95);
  --role-tab-sep:      rgba(255,255,255,.08);
}

[data-theme="light"] {
  --bg:       #F0F2F5;
  --bg1:      #FFFFFF;
  --bg2:      #FFFFFF;
  --bg3:      #F5F7FA;
  --bg4:      #EEF1F5;
  --border:   #E0E5EB;
  --border2:  #CDD3DB;
  --text:     #1A1E26;
  --text2:    #3F4754;
  --text3:    #525B68;
  --shadow:   0 2px 12px rgba(0,0,0,.08);
  --shadow-lg:0 6px 30px rgba(0,0,0,.12);
  --card-hover:#F8FAFB;
  /* 31/07/2026 — Onglets de rôle inactifs (bandeaux sidebar + profil) */
  --role-tab-bg:       #E4E8EE;
  --role-tab-bg-hover: #D6DCE4;
  --role-tab-sep:      rgba(0,0,0,.10);
}


/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; background:var(--bg); color:var(--text); font-family:'Barlow',sans-serif; font-size:16px; transition:background .25s, color .25s; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }
* { -webkit-tap-highlight-color:transparent; }
button, input, select, textarea { font-family:'Barlow',sans-serif; }


/* ============================================================
   ACCENT FILETS — filet d'accent gauche plus discret
   Override global de tous les border-left:3px inline (cards/widgets).
   Cible la forme inline sans ET avec espace apres ":".
============================================================ */
[style*="border-left:3px solid"],
[style*="border-left: 3px solid"] { border-left-width:1px !important; }

/* ============================================================
   Cards liste coach (home + mes eleves) — 09/07/2026
   Extrait de coach-home.js pour partage entre pages */
.chc-card{position:relative;display:flex;align-items:stretch;background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;transition:background .12s;margin-bottom:8px}
.chc-card::before{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--card-accent, var(--coach));z-index:1}
.chc-card:hover{background:var(--bg3)}
.chc-date{flex-shrink:0;padding:12px 10px;text-align:center;min-width:54px;border-right:1px solid var(--border);display:flex;flex-direction:column;justify-content:center}
.chc-date-day{font-size:23px;font-weight:900;color:var(--text);line-height:1}
.chc-date-month{font-size:11px;font-weight:700;color:var(--text3);letter-spacing:1px;margin-top:3px}
.chc-body{flex:1;padding:12px 14px;min-width:0;display:flex;flex-direction:column;justify-content:center}
.chc-title{font-size:15px;font-weight:700;color:var(--text);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chc-sub{font-size:13px;color:var(--text3);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chc-aside{flex-shrink:0;padding:12px 14px;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;text-align:right;border-left:1px solid var(--border);max-width:140px}

/* Cartes evenement + etats partages (audit UI 14/07/2026)
   Ex-styles inline de fighter-home.js, desormais globaux.
   Utilises par : home combattant, home club (Prochains cours), listes _fhRenderCard. */
.fh-skeleton{height:74px;background:linear-gradient(90deg,var(--bg2) 0%,var(--bg3) 50%,var(--bg2) 100%);background-size:200% 100%;border-radius:10px;animation:fhShimmer 1.4s infinite}
@keyframes fhShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.fh-empty{padding:18px;text-align:center;color:var(--text3);font-size:14px;background:var(--bg2);border:1px dashed var(--border);border-radius:10px}
.fh-card{position:relative;display:flex;align-items:stretch;gap:0;background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;transition:background .12s;margin-bottom:8px}
.fh-card:hover{background:var(--bg3)}
.fh-card-bar{width:3px;flex-shrink:0}
.fh-card-date{flex-shrink:0;padding:12px 10px;text-align:center;min-width:54px;border-right:1px solid var(--border)}
.fh-card-date-day{font-size:23px;font-weight:900;color:var(--text);line-height:1}
.fh-card-date-month{font-size:11px;font-weight:700;color:var(--text3);letter-spacing:1px;margin-top:3px}
.fh-card-body{flex:1;padding:12px 14px;min-width:0;display:flex;flex-direction:column;justify-content:center}
.fh-card-title{font-size:15px;font-weight:700;color:var(--text);line-height:1.25;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fh-card-sub{font-size:13px;color:var(--text3);margin-top:3px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fh-card-meta{font-size:12px;color:var(--text3);margin-top:4px}
.fh-card-status{display:inline-block;padding:2px 7px;border-radius:3px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.fh-card-aside{flex-shrink:0;padding:12px 14px;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;text-align:right;border-left:1px solid var(--border);max-width:140px}
.fh-card-actions{position:absolute;top:6px;right:6px;display:none;gap:4px;z-index:2}
.fh-card:hover .fh-card-actions{display:flex}
.fh-action-btn{background:rgba(0,0,0,.55);color:var(--text2);border:1px solid var(--border);border-radius:6px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;transition:background .12s,color .12s}
.fh-action-btn:hover{background:var(--bg3);color:var(--text)}
.fh-action-btn.ignore:hover{background:rgba(183,28,28,.2);color:var(--red);border-color:rgba(183,28,28,.4)}
.fh-section-link{font-size:13px;color:var(--text3);text-decoration:none}
.fh-show-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px;margin-top:6px;background:transparent;border:1px dashed var(--border);border-radius:10px;color:var(--text3);font-size:13px;font-weight:600;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.fh-show-more:hover{background:var(--bg3);color:var(--text);border-color:var(--text3)}
.fh-show-more-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--bg3);font-size:14px;font-weight:700;line-height:1}
.fh-show-more:hover .fh-show-more-icon{background:var(--gold);color:var(--bg)}

/* ── Carrousel "Evenements suggeres" — hero cards (03/08/2026) ──
   Degrades par type d evenement, valides sur maquette :
   masterclass = rouge/or, stage = or/brun, competition = magenta
   organisateur (#C9347D), sponsoring (futur) = noir sobre. */
.fh-sugg-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px;scrollbar-width:none}
.fh-sugg-rail::-webkit-scrollbar{display:none}
.fh-sugg-card{flex:0 0 clamp(250px,78vw,330px);scroll-snap-align:start;border-radius:10px;padding:16px 18px;cursor:pointer;display:flex;flex-direction:column;min-height:128px;transition:transform .12s}
.fh-sugg-card:hover{transform:translateY(-2px)}
.fh-sugg-card.mc{background:linear-gradient(120deg,#1a0505 0%,#4a0d0d 60%,#B71C1C 130%)}
.fh-sugg-card.stage{background:linear-gradient(120deg,#0e0a05 0%,#2e2410 55%,#8B7525 140%)}
.fh-sugg-card.comp{background:linear-gradient(120deg,#14060d 0%,#4a1030 60%,#C9347D 135%)}
.fh-sugg-card.sponsor{background:#0A0A0B;border:1px solid #26262a}
.fh-sugg-badge{display:inline-block;align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:3px 10px;border-radius:4px}
.fh-sugg-card.mc .fh-sugg-badge{background:rgba(201,168,50,.15);color:#C9A832;border:1px solid rgba(201,168,50,.25)}
.fh-sugg-card.stage .fh-sugg-badge{background:rgba(183,28,28,.2);color:#e07070;border:1px solid rgba(183,28,28,.35)}
.fh-sugg-card.comp .fh-sugg-badge{background:rgba(255,255,255,.1);color:#F0A0C8;border:1px solid rgba(240,160,200,.25)}
.fh-sugg-card.sponsor .fh-sugg-badge{background:rgba(255,255,255,.06);color:#8A8F98;border:1px solid rgba(255,255,255,.12)}
.fh-sugg-title{font-size:17px;font-weight:700;color:#fff;line-height:1.2;margin:9px 0 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fh-sugg-sub{font-size:12px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fh-sugg-card.mc .fh-sugg-sub{color:#c9a5a5}
.fh-sugg-card.stage .fh-sugg-sub{color:#c9bb95}
.fh-sugg-card.comp .fh-sugg-sub{color:#d4a8bf}
.fh-sugg-card.sponsor .fh-sugg-sub{color:#8A8F98}
.fh-sugg-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:12px}
.fh-sugg-date{font-size:12px;font-weight:700;color:rgba(255,255,255,.75);white-space:nowrap}
.fh-sugg-cta{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:6px 14px;border-radius:5px;white-space:nowrap}
.fh-sugg-card.mc .fh-sugg-cta{background:#C9A832;color:#0A0A0A}
.fh-sugg-card.stage .fh-sugg-cta{background:#B71C1C;color:#fff}
.fh-sugg-card.comp .fh-sugg-cta{border:1px solid rgba(255,255,255,.35);color:#fff}
.fh-sugg-card.sponsor .fh-sugg-cta{border:1px solid #C9A832;color:#C9A832}
@media (min-width:900px){.fh-sugg-card{flex-basis:calc(33.333% - 8px)}}
@media (min-width:600px) and (max-width:899px){.fh-sugg-card{flex-basis:calc(50% - 6px)}}
/* Carte seule : pleine largeur quel que soit l ecran */
.fh-sugg-rail .fh-sugg-card:only-child{flex-basis:100%}

/* Bouton "Ajouter un role" du profil (sidebar.js / _buildProfileRoleSwitchband) :
   logo NFXP anime cyclant les 4 couleurs de role (combattant, coach, club,
   competition) pour suggerer l acces aux autres espaces. */
.role-add-btn{display:inline-flex;align-items:center;gap:9px;background:var(--bg3);color:var(--text);border:1px dashed var(--border2);padding:9px 15px;border-radius:9px;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s}
.role-add-btn:hover{background:var(--bg4);border-color:var(--text3)}
.role-add-logo{width:18px;height:18px;flex-shrink:0;fill:#B71C1C;animation:roleLogoCycle 6s ease-in-out infinite}
@keyframes roleLogoCycle{0%,19%{fill:#B71C1C}25%,44%{fill:#00B4D8}50%,69%{fill:#2E7D32}75%,94%{fill:#C9347D}100%{fill:#B71C1C}}

/* ============================================================
   PICKERS DATE / HEURE — STANDARDISATION (23/07/2026)
   ============================================================
   Avant : comportement heterogene d un champ a l autre. Sur
   Chrome/Edge/Firefox desktop seule la petite icone native ouvrait
   le calendrier (le reste du champ ne faisait rien), et cette icone
   restait rendue en coloris clair sur fond sombre donc quasi
   invisible faute de color-scheme declare.
   Selecteur d attribut volontaire (pas .form-input) : ~1/3 des
   champs date du projet sont en style inline et n ont pas la classe.
   L ouverture au clic sur toute la surface est assuree par le
   handler delegue nfxpBindDateTimePickers() de core/helpers.js.
============================================================ */
input[type="date"], input[type="datetime-local"],
input[type="time"], input[type="month"], input[type="week"] {
  cursor:pointer; font-family:inherit;
}
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="week"]   { color-scheme:dark; }
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="datetime-local"],
[data-theme="light"] input[type="time"],
[data-theme="light"] input[type="month"],
[data-theme="light"] input[type="week"]  { color-scheme:light; }

/* Icone calendrier : toujours visible et cliquable */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  cursor:pointer; opacity:.75; padding:2px; margin-left:6px; transition:opacity .12s;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator,
input[type="week"]:hover::-webkit-calendar-picker-indicator { opacity:1; }

/* Champs desactives : pas de fausse affordance de clic */
input[type="date"][disabled], input[type="date"][readonly],
input[type="datetime-local"][disabled], input[type="datetime-local"][readonly],
input[type="time"][disabled], input[type="time"][readonly],
input[type="month"][disabled], input[type="month"][readonly],
input[type="week"][disabled], input[type="week"][readonly] { cursor:not-allowed; opacity:.6; }

/* iOS Safari : valeur alignee a gauche comme les autres champs */
input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value { text-align:left; }