/* ═══════════════════════════════════════════════════════════════════════════
   THÈME HUNYVERS — habillage de marque de HunyEvents
   ─────────────────────────────────────────────────────────────────────────
   Cette feuille est chargée EN DERNIER par les deux pages : elle redéfinit
   les jetons (:root) et surcharge les composants, sans toucher une ligne de
   la logique. La retirer rend l'application à son habillage d'origine.

   Références de marque (skill hunyvers-design) :
   - Turquoise #009A96 (PANTONE 3272 C) + Noir #1D1D1B (426 C).
   - Neutres CHAUDS : papier #F5F5F3, sable #F0EDE6, bord #E0DDD5 —
     jamais de gris bleutés.
   - Lato, seule police d'écran. Aplats francs, coins sobres (4 px boutons,
     8-12 px cartes), ombres discrètes et chaudes.
   - Survol d'un bouton : fondu à 85 % d'opacité — jamais d'assombrissement.

   Ce qui n'est PAS touché ici, parce que ce sont des DONNÉES :
   les couleurs des règles de ratio, des badges de concession, des cellules
   colorées et des graphiques — elles appartiennent aux utilisateurs.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Lato, servie localement (licence SIL OFL — redistribution permise).
      Aucune ressource distante : règle de sécurité du projet. ─────────── */
@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url('Polices/lato-300.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('Polices/lato-400.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('Polices/lato-700.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;src:url('Polices/lato-900.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:italic;font-weight:400;font-display:swap;src:url('Polices/lato-400-italique.woff2') format('woff2')}

/* ── Jetons ──────────────────────────────────────────────────────────────
   L'application est déjà pilotée par ces variables : les redéfinir habille
   d'un coup la majorité des écrans. Correspondance c1→c6 (accents des
   boutons de bandeau et compléments) vers la palette officielle :
   turquoise, turquoise vif (web), bleu, jaune, orange, rose.            */
:root{
  --hv-turquoise:#009A96;
  --hv-turquoise-fonce:#007A77;
  --hv-noir:#1D1D1B;
  --hv-papier:#F5F5F3;
  --hv-creme:#FAFAF8;
  --hv-sable:#F0EDE6;
  --hv-bord:#E0DDD5;
  --hv-encre:#1D1D1B;
  --hv-graphite:#444441;
  --hv-pierre:#7A7A75;

  --c1:#009A96;--c2:#24D3E0;--c3:#00569F;--c4:#FCEA10;--c5:#EC6608;--c6:#F193BD;
  --accent:#009A96;
  --pulse:rgba(0,154,150,.45);
  --bg:var(--hv-papier);
  --card:#FFFFFF;
  --border:var(--hv-bord);
  --text:var(--hv-encre);
  --muted:var(--hv-pierre);
  --font:'Lato',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}
/* Mode sombre : mêmes accents, neutres chauds assombris. */
@media(prefers-color-scheme:dark){
  :root{
    --bg:#201F1E;--card:#282725;--border:#3B3A37;
    --text:#ECEAE4;--muted:#A3A09A;
  }
}

body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* Colonnes de chiffres : lecture verticale. Lato expose des chiffres
   tabulaires via cette propriété ; sans elle, les colonnes « dansent ». */
table,tbody,thead{font-variant-numeric:tabular-nums}

/* ── Bandeaux d'en-tête ──────────────────────────────────────────────────
   Bandeau CLAIR, sobre et professionnel : fond de carte, filet turquoise en
   tête de page (la signature de marque), séparation par un bord chaud. Les
   dégradés, halos et boutons lumineux de l'habillage d'origine disparaissent.
   Tout est exprimé en jetons : le mode sombre suit sans règle de plus.    */
.hero,.acuta-hero{
  background:var(--card);
  border-top:3px solid var(--hv-turquoise);
  border-bottom:1px solid var(--border);
}
.hero::before,.hero::after,.acuta-hero::before,.acuta-hero::after{background:none}
.hero-actions-row{border-top-color:var(--border)}

/* UNE seule barre, basse : marque à gauche, actions et compte à droite.
   L'ancienne rangée d'actions a été fusionnée dans le rang de la marque. */
.hero{padding:9px 24px}
.hero-inner{align-items:center}
.hero-droite{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.hero .btn-new{height:32px;padding:0 14px;font-size:12.5px}

/* La marque : le mot-symbole est dessiné pour un fond sombre (« Huny » est
   blanc) — il se pose sur un cartouche noir, net et discret. */
.hero-marque{background:var(--hv-noir);border-radius:7px;padding:5px 10px}
.hero-marque img{height:21px}

/* Le titre de l'application : un repère, pas un élément interactif décoré —
   ni fond au survol, ni infobulle ombrée. Le double-clic pour renommer
   fonctionne toujours.
   La lueur bleu/violet en text-shadow était faite pour le bandeau sombre :
   sur fond clair elle ne fait que rendre le texte flou. Supprimée. */
.hero-title h1,.hero-title h1:hover{text-shadow:none}
.hero-title h1{color:var(--muted)}
.hero-title h1:hover{background:transparent;padding:0;margin:0}
.hero-title h1::after,.hero-title h1:hover::after{display:none}

/* La pastille du compte : un bouton clair, bordé, qui ouvre le menu du
   compte (déconnexion incluse). */
.hero-ident{
  background:var(--card);border:1px solid var(--border);
  cursor:pointer;font-family:var(--font);border-radius:999px;
  padding:3px 11px 3px 4px;box-shadow:none;
}
.hero-ident:hover{background:var(--hv-sable);border-color:var(--border);box-shadow:none}
.hero-ident-av{width:26px;height:26px;font-size:10.5px}
.hero-ident-nom{color:var(--text)}
.hero-ident-chevron{color:var(--muted);font-size:9px;margin-left:3px}
.ident-menu-tete{padding:11px 15px 9px;display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.ident-menu-tete b{font-size:13px;font-weight:700;color:var(--text)}
.ident-menu-tete i{font-style:normal;font-size:11px;color:var(--muted)}
.ident-menu-tete .hero-ident-role{margin-top:2px}

/* Le bouton Outils suit le même langage que la pastille — aucun effet. */
.btn-outils{color:var(--text);background:var(--card);border:1px solid var(--border);
  height:32px;box-shadow:none;transform:none}
.btn-outils:hover{background:var(--hv-sable);border-color:var(--border);color:var(--text);
  box-shadow:none;transform:none}
.btn-outils[aria-expanded="true"]{background:var(--hv-sable);border-color:var(--border);
  color:var(--text);box-shadow:none}

/* La barre des saisons perd son ombre portée : la séparation vient du bord. */
.season-nav{box-shadow:none}

/* Page salon : titre, sous-titre et boutons du bandeau passent en clair. */
.acuta-hero-actions h1{color:var(--text)}
.salon-subtitle{color:var(--muted)}
.salon-rename-hint{color:var(--muted)}
.acuta-ghost-btn{background:var(--card);border:1px solid var(--border);color:var(--text)}
.acuta-ghost-btn:hover{background:var(--hv-sable);border-color:var(--border);color:var(--text)}

/* ── Boutons ─────────────────────────────────────────────────────────────
   Aplat turquoise, coins 4 px, jamais d'ombre portée colorée. Survol :
   fondu à 85 % — la marque n'assombrit pas et ne « saute » pas.         */
.btn-new,.btn-primary,.btn-open,.iw-act.primary{
  background:var(--hv-turquoise);color:#fff;border-radius:4px;box-shadow:none;
}
.btn-new:hover,.btn-primary:hover,.btn-open:hover,.iw-act.primary:hover{
  background:var(--hv-turquoise);opacity:.85;transform:none;box-shadow:none;
}
.btn-new:active,.btn-primary:active{opacity:.7}
.btn-cancel{border-radius:4px}
.btn-icon{border-radius:4px}
.iw-act:hover{opacity:.85}

/* ── Onglets de la page salon ────────────────────────────────────────────
   Les huit teintes par onglet deviennent UNE écriture : bouton clair et
   bordé, l'onglet COURANT est le seul en couleur — un aplat turquoise.   */
.tab{color:var(--text)}
.tab-c1,.tab-c2,.tab-c3,.tab-c4,.tab-c5,.tab-c6,.tab-c7,.tab-c8{
  background:var(--card);
  border-color:var(--border);
  box-shadow:none;border-radius:4px;
}
.tab-c1:hover,.tab-c2:hover,.tab-c3:hover,.tab-c4:hover,
.tab-c5:hover,.tab-c6:hover,.tab-c7:hover,.tab-c8:hover{
  background:var(--hv-sable);
  border-color:var(--border);
  box-shadow:none;
}
.tab.active,.tab.active:hover{
  background:var(--hv-turquoise);border-color:var(--hv-turquoise);
  color:#fff;outline:none;
}

/* ── Navigation de saison (accueil) ──────────────────────────────────────
   L'onglet de saison actif est une pastille turquoise PLATE : le reflet
   glossy et l'ombre portée de l'ancien habillage disparaissent.          */
.season-tab.active,.season-tab.active:hover{
  background:var(--hv-turquoise);background-image:none;
  box-shadow:none;transform:none;color:#fff;
}
.season-tab.active:hover{opacity:.88}
.season-tab.active .s-badge{background:rgba(255,255,255,.28);color:#fff}
.season-info-box{border-color:var(--hv-bord)}

/* ── Cartes ──────────────────────────────────────────────────────────────
   Blanches, bord chaud 1 px, coins 12 px, ombre douce et chaude. Le survol
   d'une carte cliquable est une levée de 2 px, rien de plus.            */
.salon-card{
  border:1px solid var(--hv-bord);border-radius:12px;
  box-shadow:0 1px 2px rgba(29,29,27,.05);
}
.salon-card:hover{
  transform:translateY(-2px);
  border-color:var(--hv-bord);
  box-shadow:0 6px 18px rgba(29,29,27,.10);
}
/* L'anneau en dégradé qui cerclait la carte : la marque travaille en bords
   francs — le bord chaud 1 px et la levée au survol suffisent. */
.salon-card::after,.salon-card:hover::after{display:none}
/* Le filet d'accent en tête de carte devient un aplat turquoise. */
.card-accent{background:var(--hv-turquoise)}
.card-accent.upcoming{background:#24D3E0}
.card-accent.ended{background:var(--hv-bord)}
/* ── Carte récapitulative de saison ──────────────────────────────────────
   Une carte de TABLEAU DE BORD, pas une grille plate : le CA TTC — LE
   chiffre de la saison — tient la gauche en héros ; à sa droite, les
   volumes et montants, puis la rangée des ratios et moyennes sous un
   filet. Libellés discrets au-dessus, valeurs en dessous, tout aligné à
   gauche. La carte reste UNE carte : son verso pivote d'un bloc.         */
.stats-strip{border:1px solid var(--hv-bord);border-radius:12px;padding:1.35rem 1.6rem 1.15rem;gap:0}
.ss-disposition{display:flex;align-items:stretch}
.ss-heros{
  flex:0 0 auto;min-width:225px;
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding-right:2rem;margin-right:2rem;border-right:1px solid var(--border);
}
.ss-heros .ss-lbl{font-size:11px;letter-spacing:.09em;color:var(--hv-pierre)}
.ss-heros .ss-val{
  font-size:40px;font-weight:900;letter-spacing:-.015em;line-height:1.02;
  color:var(--text);justify-content:flex-start;min-height:0;
  font-variant-numeric:normal;  /* chiffres proportionnels : plus élégants en grand */
}
.ss-heros .ss-delta{min-height:0;font-size:11px}
.ss-colonne{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.ss-item{
  flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-start;gap:4px;
  text-align:left;padding:.1rem 1.1rem .9rem 1.1rem;border-right:none;
}
.ss-item:first-child{padding-left:0}
.ss-item:last-child{padding-right:0}
.stats-strip .ss-row:first-child .ss-item{padding-left:1.1rem;padding-right:1.1rem}
.stats-strip .ss-row:first-child .ss-item:first-child{padding-left:0}
.stats-strip .ss-row:first-child .ss-item:last-child{padding-right:0}
.ss-lbl,.stats-strip .ss-row:first-child .ss-lbl{
  margin-top:0;font-size:10px;letter-spacing:.07em;color:var(--hv-pierre);
}
.ss-val,.stats-strip .ss-row:first-child .ss-val{
  font-size:20px;justify-content:flex-start;min-height:0;white-space:nowrap;
}
.ss-row-ratios{border-top:1px solid var(--border)}
.ss-row-ratios .ss-item{padding-top:.9rem;padding-bottom:.15rem}
.ss-row-ratios .ss-val{font-size:19px}
.ss-delta{min-height:0}
/* Les compléments (« Taux 8.1 % », restes à livrer…) : petites pastilles
   sable — la COULEUR du texte reste posée par le code, on n'y touche pas. */
.ss-delta .ec-seg{
  background:var(--hv-sable);border-radius:999px;
  padding:1.5px 8px;display:inline-block;margin:3px 4px 0 0;
}
/* Écran étroit : le héros passe au-dessus, les rangées gardent la grille
   d'origine, et les tailles redescendent. */
@media(max-width:1180px){
  .ss-disposition{flex-direction:column;gap:.9rem}
  .ss-heros{border-right:none;margin-right:0;padding:0 0 .9rem;min-width:0;
    border-bottom:1px solid var(--border)}
  .ss-heros .ss-val{font-size:30px}
  .ss-val,.stats-strip .ss-row:first-child .ss-val{font-size:17px}
  .ss-row-ratios .ss-val{font-size:16px}
  .ss-item,.ss-item:first-child,.ss-item:last-child,
  .stats-strip .ss-row:first-child .ss-item{padding:.3rem .6rem}
}

/* Statistiques DES CARTES de salon : même écriture, en plus petit. */
.cs-row{border-top:1px solid var(--border);padding-top:10px;margin-top:10px;gap:0}
.cs-item,.cs-item.cs-euro,.cs-item.cs-large{
  display:flex;flex-direction:column;justify-content:flex-start;
  text-align:left;gap:2px;padding:.25rem .9rem;
  border-right:.5px solid var(--border);
}
.cs-item .cs-lbl{order:1}
.cs-item .cs-val{order:2}
.cs-item .cs-delta,.cs-item .ss-delta{order:3}
.cs-item:first-child{padding-left:0}
.cs-item:last-child{border-right:none;padding-right:0}
/* Libellés complets, jamais tronqués : « PÉNÉTRATION » doit se lire. */
.cs-lbl{
  margin-top:0;font-size:8.5px;letter-spacing:.04em;color:var(--hv-pierre);
  white-space:nowrap;overflow:visible;text-overflow:clip;
}
.cs-val{font-size:15.5px}

/* Salon soldé : « Consulter » est un bouton SECONDAIRE plat — même langage
   que le reste, sans dégradé ni anneau d'ombre. */
.btn-open.solde,.btn-open.solde:active{
  color:var(--text);background:var(--card);
  border:1px solid var(--border);box-shadow:none;transform:none;
}
.btn-open.solde:hover{
  color:var(--text);background:var(--hv-sable);
  border-color:var(--border);box-shadow:none;transform:none;opacity:1;
}

/* ── Tableaux ────────────────────────────────────────────────────────────
   En-têtes sur sable chaud, filets discrets ; le classement garde son
   en-tête sombre, au noir de marque.                                    */
thead tr{background:var(--hv-sable)}
th{color:var(--hv-graphite);border-right-color:rgba(29,29,27,.10)}
.iw-tbl th{background:var(--hv-sable)}
#tblClassement thead tr th{background:var(--hv-noir)!important;color:#fff!important}
.obj-table{border-radius:12px}

/* ── Champs de saisie : l'anneau de focus est turquoise, partout ─────── */
.field input:focus,.login-field input:focus,
td input[type=text]:focus,td input[type=number]:focus,td select:focus,
.obj-table td input:focus,.price-row input:focus{
  border-color:var(--hv-turquoise);
  box-shadow:0 0 0 3px rgba(0,154,150,.18);
  outline:none;
}

/* ── Modales ───────────────────────────────────────────────────────────── */
.modal-box{border-radius:12px;border:1px solid var(--hv-bord)}

/* ── Bascules brut / épuré / livrés-payés (accueil) ──────────────────────
   Trois lectures des mêmes chiffres : la bascule active est turquoise,
   quelle que soit la lecture — la couleur signale « actif », pas un mode. */
.cs-toggle button.active,
.cs-toggle button.btn-brut.active,
.cs-toggle button.btn-lpaye.active{
  background:var(--hv-turquoise);color:#fff;border-color:var(--hv-turquoise);
  box-shadow:none;
}

/* ── Reprises des accents bleus résiduels ────────────────────────────────
   Chaque sélecteur listé ici portait un bleu de l'ancienne identité.    */
.cmp-ref-base{background:rgba(0,154,150,.10);color:var(--hv-turquoise-fonce)}
.color-preset.selected{border-color:var(--hv-turquoise);box-shadow:0 0 0 2px rgba(0,154,150,.25)}
.cs-evt-actif,.cs-evt-actif:hover{background:rgba(0,154,150,.10);border-color:var(--hv-turquoise)}
.cs-evt-actif:hover .cs-evt-n{color:var(--hv-turquoise-fonce)}
.cs-evt:hover{border-color:var(--hv-turquoise)}
.ct-pill:hover{border-color:var(--hv-turquoise);color:var(--hv-turquoise)}
.rt-btn:hover{border-color:var(--hv-turquoise);color:var(--hv-turquoise)}
.rt-info:hover,.rt-info:focus-visible{color:var(--hv-turquoise)}
.rt-info.ouvert{color:var(--hv-turquoise)}
.flip-btn:hover,.card-verso .flip-btn:hover,.ss-verso .flip-btn:hover{color:var(--hv-turquoise)}
.perm-chip input:checked+span{background:var(--hv-turquoise);border-color:var(--hv-turquoise)}
.perm-cat-toggle input,.perm-global-toggle input,.pe-case input{accent-color:var(--hv-turquoise)}
.perm-level-opt:has(input:checked){border-color:var(--hv-turquoise);background:rgba(0,154,150,.07)}
.hero-icon{color:var(--hv-turquoise)}
.iw-step.active{background:var(--hv-turquoise);border-color:var(--hv-turquoise)}
.iw-b-prob{background:rgba(0,154,150,.10);color:var(--hv-turquoise-fonce)}
.ch-portee.actif,.ch-base.actif,#chPorteeCollab.actif{
  border-color:var(--hv-turquoise);background:rgba(0,154,150,.08);
}
.ch-base.actif .ch-base-l{color:var(--hv-turquoise-fonce)}
.pj-btn.pj-plein{color:var(--hv-turquoise)}
.pj-btn .pj-n{background:var(--hv-turquoise)}
.vf-menu button:hover{background:rgba(0,154,150,.09)}
.vsm-ligne:hover{background:rgba(0,154,150,.06)}
.obj-arrondi{color:var(--hv-turquoise-fonce)}

/* L'animation d'attention sur une cellule bat désormais au turquoise —
   même forme que l'originale (un fond qui s'estompe), seule la teinte change. */
@keyframes vfNeuve{
  0%,60%{background:rgba(0,154,150,.16)}
  100%{background:transparent}
}

/* ── Compléments relevés à l'audit des styles calculés ─────────────────── */
/* Fonds de focus des cellules : la teinte suit l'anneau. */
td input[type=text]:focus,td input[type=number]:focus,td select:focus,
.obj-table td input:focus,.price-row input:focus{background:rgba(0,154,150,.07)}
.vf-champ input:focus,.vf-champ select:focus{box-shadow:0 0 0 3px rgba(0,154,150,.15)}
.vf-question{background:rgba(0,154,150,.06);border-color:rgba(0,154,150,.20)}
.pj-depot:hover,.pj-depot.pj-survol{background:rgba(0,154,150,.05)}
.kpi-lien:hover{background:rgba(0,154,150,.07)}

/* En-têtes accentués du tableau des objectifs : turquoise de marque.
   L'original force un texte noir — même arme pour le repasser en blanc. */
.h-cc{background:var(--hv-turquoise);color:#fff!important}
.h-total{background:var(--hv-noir)}

/* Assistant d'import : plus d'ombre colorée, accents turquoise. */
.iw-step.active{box-shadow:none}
.iw-act:hover{border-color:var(--hv-turquoise);color:var(--hv-turquoise-fonce)}
.iw-b-prob{color:var(--hv-turquoise-fonce)}

/* Création d'un challenge : aplat turquoise ; la variante manager reste noire. */
.ch-creer{background:var(--hv-turquoise);box-shadow:none;border-radius:4px}
.ch-creer:hover{filter:none;opacity:.85}
.ch-creer.manager{background:var(--hv-noir);box-shadow:none}

/* Messages d'erreur : rouge fonctionnel réchauffé, plus de corail. */
#loginError,#changePwError,#userFormError{color:#C4372C;border-color:#C4372C}

/* Bascule brut/épuré de l'accueil : le cadre suit l'accent. */
.cs-toggle{border-color:var(--hv-turquoise)}
.cs-toggle button+button{border-left-color:var(--hv-turquoise)}
.cs-toggle button{color:var(--hv-turquoise-fonce)}
.cs-toggle button.active{color:#fff}

/* ── Cases à cocher et curseurs natifs, partout ─────────────────────── */
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--hv-turquoise)}

/* ── Liens ─────────────────────────────────────────────────────────────── */
a{color:var(--hv-turquoise)}