/* ============================================================
   KOMOGO — CHARTE COMMUNE
   Source unique du design : police, couleurs, composants.
   Une modification ici se répercute sur tout le site.

   Emplacement : /wp-content/themes/Divi-child/komogo.css
   Chargement  : voir functions.php — chargé sur TOUTES les pages,
                 AVANT les feuilles spécifiques à chaque outil.

   SOMMAIRE
     1. Police NEWAKE (déclaration unique)
     2. Jetons de charte
     3. Rôles typographiques
     4. Blocs de page
     5. Boutons
     6. Champs et listes déroulantes
     7. Tableaux et listes
     8. Cartes et états
     9. Utilitaires
    10. Responsive
   ============================================================ */

/* ══ 1. POLICE ════════════════════════════════════════════
   Déclaration UNIQUE pour tout le site : elle remplace celles
   de style.css, komogo-recngo-v5.css et komogo-xtrakt-v5.css.
   Le woff2 vient en premier (le plus léger, le mieux rendu) ;
   ttf et otf ne sont que des replis. C'est la coexistence de
   deux déclarations différentes qui faisait varier l'aspect
   du texte d'une page à l'autre.
   ─────────────────────────────────────────────────────────── */
@font-face{
    font-family:'NEWAKE';
    font-weight:400;
    font-style:normal;
    font-display:swap;
    src:url('https://www.komogo.net/wp-content/uploads/2025/12/Newake.woff2') format('woff2'),
        url('https://www.komogo.net/wp-content/uploads/2025/12/Newake-Font-Regular.ttf') format('truetype'),
        url('https://www.komogo.net/wp-content/uploads/2025/12/Newake-Font-Regular.otf') format('opentype');
}
/* Alias : le CSS de Divi et d'anciennes pages écrivent 'Newake'.
   Sans cette seconde déclaration, ils retomberaient sur une police système. */
@font-face{
    font-family:'Newake';
    font-weight:400;
    font-style:normal;
    font-display:swap;
    src:url('https://www.komogo.net/wp-content/uploads/2025/12/Newake.woff2') format('woff2'),
        url('https://www.komogo.net/wp-content/uploads/2025/12/Newake-Font-Regular.ttf') format('truetype'),
        url('https://www.komogo.net/wp-content/uploads/2025/12/Newake-Font-Regular.otf') format('opentype');
}

/* ══ 2. JETONS DE CHARTE ══════════════════════════════════ */
:root{
    /* Rouge Komogo */
    --km-red:#BF1A1A;
    --km-red-hover:#d32121;
    --km-red-dim:rgba(191,26,26,.12);
    --km-red-border:rgba(191,26,26,.55);

    /* Couleurs de sens */
    --km-blue:#4f8cf0;          /* second camp — Versus */
    --km-blue-soft:#7fb0ff;
    --km-green:#2ecc71;         /* hausse, succès */
    --km-orange:#e0a030;        /* avertissement */

    /* Surfaces, du plus sombre au plus clair */
    --km-bg:#111111;
    --km-bg2:#1a1a1a;
    --km-bg3:#222222;
    --km-surface:#262626;       /* boutons, contrôles */
    --km-border:#2a2a2a;
    --km-border-soft:rgba(255,255,255,.06);

    /* Texte */
    --km-white:#ffffff;
    --km-text:#f5f5f5;
    --km-body:#d1d1d1;
    --km-muted:#888888;
    --km-dim:#5a5a62;

    /* Typographie */
    --km-display:'NEWAKE','Bebas Neue','Oswald','Archivo Narrow',sans-serif;
    --km-ui:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    --km-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
    --km-ls:0.06em;
    --km-ls-wide:0.20em;
    --km-size-field:14px;       /* TOUT ce qui se saisit ou se choisit */

    /* Formes */
    --km-radius:4px;            /* rayon unique du site */
    --km-radius-card:8px;
    --km-gap:12px;
    --km-pad:20px;
    --km-wrap:1060px;

    /* ── Anciens noms, conservés le temps de la migration ──
       Les pages non encore reprises continuent de fonctionner. */
    --sc-red:var(--km-red); --sc-red-dim:var(--km-red-dim);
    --sc-bg:var(--km-bg); --sc-bg2:var(--km-bg2); --sc-bg3:var(--km-bg3);
    --sc-border:var(--km-border); --sc-text:var(--km-body);
    --sc-muted:var(--km-muted); --sc-white:var(--km-white);
    --sc-font:var(--km-display); --sc-ls:var(--km-ls); --sc-mono:var(--km-mono);
    --kr-display:var(--km-display);
    --ks-red:var(--km-red); --ks-text:var(--km-text);
}

/* ══ 3. RÔLES TYPOGRAPHIQUES ══════════════════════════════
   NEWAKE  -> titres, libellés, boutons de tête, en-têtes de colonne.
              Police d'affichage : toujours en capitales.
   Système -> texte courant ET tout ce qui se saisit ou se choisit.
              NEWAKE y serait illisible (choix déjà fait dans recngo).
   ─────────────────────────────────────────────────────────── */
.ks-display, .ks-title, .ks-h2, .ks-label{
    font-family:var(--km-display);
    font-weight:400;
    letter-spacing:var(--km-ls);
    text-transform:uppercase;
}
/* Petites capitales espacées : oreilles, kickers, libellés d'axe */
.ks-caps{
    font-family:var(--km-display);
    font-size:.62rem;
    letter-spacing:var(--km-ls-wide);
    text-transform:uppercase;
    color:var(--km-muted);
}

/* ══ 4. BLOCS DE PAGE ═════════════════════════════════════ */
.ks-page{ background:var(--km-bg); color:var(--km-body); min-height:100vh; padding-bottom:70px; }
.ks-wrap{ max-width:var(--km-wrap); margin:0 auto; padding:0 26px; }

/* En-tête : filet rouge, ligne d'infos, titre centré */
.ks-plate{ border-bottom:1px solid var(--km-border); background:var(--km-bg2); }
.ks-plate .ks-rule{ height:5px; background:var(--km-red); }
.ks-ears{
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    font-family:var(--km-display); font-size:.62rem; letter-spacing:var(--km-ls-wide);
    text-transform:uppercase; color:var(--km-muted);
    padding:12px 0 10px; border-bottom:1px solid var(--km-border);
}
.ks-name{ text-align:center; padding:30px 0 20px; }
.ks-name h1{
    font-family:var(--km-display); font-weight:400; letter-spacing:.08em; text-transform:uppercase;
    font-size:clamp(2rem,6.5vw,3.4rem); line-height:.92; margin:0; color:var(--km-white);
}
.ks-name h1 em{ font-style:normal; color:var(--km-red); }
.ks-sub{
    font-family:var(--km-display); letter-spacing:.26em; text-transform:uppercase;
    font-size:.66rem; color:var(--km-red); margin-top:12px;
}

/* Titre de section : kicker rouge + filet */
.ks-rub{ margin:44px 0 0; }
.ks-rub .ks-kicker{
    font-family:var(--km-display); font-size:.6rem; letter-spacing:.24em;
    text-transform:uppercase; color:var(--km-red); margin-bottom:7px;
}
.ks-rub h2{
    font-family:var(--km-display); font-weight:400; letter-spacing:.1em; text-transform:uppercase;
    font-size:1.15rem; margin:0; padding-bottom:7px;
    border-bottom:2px solid var(--km-red); color:var(--km-white);
}
.ks-rub .ks-chapeau{ color:var(--km-muted); font-size:.88rem; margin:10px 0 0; }

/* ══ 5. BOUTONS ═══════════════════════════════════════════
   Une seule forme pour tout le site : rayon 4px, fond #262626.
   Seules subsistent les variantes qui portent un SENS :
   primaire (action principale) et fantôme (action secondaire).
   ─────────────────────────────────────────────────────────── */
.ks-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    background:var(--km-surface);
    border:1px solid var(--km-border-soft);
    border-radius:var(--km-radius);
    padding:8px 14px;
    font-family:var(--km-ui);
    font-size:.84rem;
    font-weight:500;
    color:var(--km-text);
    cursor:pointer;
    text-decoration:none;
    transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.ks-btn:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.38); color:var(--km-text); }
.ks-btn:active:not(:disabled){ transform:translateY(0); box-shadow:none; }
.ks-btn:disabled, .ks-btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

.ks-btn-primary{ background:var(--km-red); border-color:var(--km-red-border); color:#fff; }
.ks-btn-primary:hover:not(:disabled){ background:var(--km-red-hover); box-shadow:0 10px 22px rgba(191,26,26,.24); color:#fff; }

.ks-btn-ghost{ background:transparent; border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.82); }
.ks-btn-ghost:hover:not(:disabled){ background:rgba(255,255,255,.05); border-color:var(--km-red); color:#fff; }

/* Bouton compact, dans les listes et barres d'actions */
.ks-btn.is-small{ padding:6px 10px; font-size:.76rem; }
/* Bouton en capitales NEWAKE, pour les actions de tête de page */
.ks-btn.is-display{ font-family:var(--km-display); letter-spacing:.12em; text-transform:uppercase; }

/* ══ 6. CHAMPS ET LISTES DÉROULANTES ══════════════════════
   Tout ce qui se saisit ou se choisit : police système, 14px.
   Les listes déroulantes sont normalisées (appearance:none),
   sans quoi leur aspect dépend du système d'exploitation —
   c'est la cause des différences que tu constatais.
   ─────────────────────────────────────────────────────────── */
.ks-input, .ks-select,
select.ks-input, textarea.ks-input{
    font-family:var(--km-ui);
    font-size:var(--km-size-field);
    line-height:1.35;
    color:var(--km-text);
    background:rgba(38,38,38,.9);
    border:1px solid var(--km-border);
    border-radius:var(--km-radius);
    padding:9px 11px;
    width:100%;
    box-sizing:border-box;
    transition:border-color .12s ease, background .12s ease;
}
.ks-input:focus, .ks-select:focus, textarea.ks-input:focus{
    outline:none;
    border-color:rgba(191,26,26,.8);
    background:rgba(52,52,52,.9);
}
.ks-input:disabled, .ks-select:disabled{ opacity:.5; cursor:not-allowed; }
.ks-input::placeholder, textarea.ks-input::placeholder{ color:var(--km-dim); }

/* Liste déroulante : apparence unifiée + chevron dessiné */
.ks-select, select.ks-input{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    padding-right:34px;
    background-image:linear-gradient(45deg,transparent 50%,var(--km-muted) 50%),
                     linear-gradient(135deg,var(--km-muted) 50%,transparent 50%);
    background-position:calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
    background-size:5px 5px, 5px 5px;
    background-repeat:no-repeat;
}
/* Le menu déroulé est dessiné par le système : on force au moins ses couleurs */
.ks-select option, .ks-select optgroup,
select.ks-input option, select.ks-input optgroup{
    background:#2c2c2c !important;
    color:#ffffff !important;
    font-family:var(--km-ui);
}
/* Libellé de champ : NEWAKE, contrairement à la valeur saisie */
.ks-field-label{
    font-family:var(--km-display); font-size:13px;
    letter-spacing:var(--km-ls); text-transform:uppercase; color:var(--km-muted);
    display:block; margin-bottom:5px;
}
.ks-form{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.ks-hint{ font-size:11px; color:#777; line-height:1.5; margin-top:6px; }

/* ══ 7. TABLEAUX ET LISTES ════════════════════════════════ */
.ks-table{ width:100%; border-collapse:collapse; font-size:13px; }
.ks-table th{
    font-family:var(--km-display); font-size:.57rem; letter-spacing:var(--km-ls-wide);
    text-transform:uppercase; color:var(--km-muted); text-align:left;
    padding:10px 8px; border-bottom:1px solid var(--km-border); background:var(--km-bg3);
}
.ks-table td{ padding:9px 8px; border-bottom:1px solid var(--km-border); }
.ks-table tr:last-child td{ border-bottom:0; }
.ks-table .ks-num{ text-align:right; color:var(--km-red); font-family:var(--km-display); white-space:nowrap; }

/* Ligne de titre : rang · pochette · artiste et titre · compteur */
.ks-trk{
    display:grid; grid-template-columns:44px 46px 1fr auto; gap:12px; align-items:center;
    padding:10px 8px; border-bottom:1px solid var(--km-border); transition:background .12s;
}
.ks-trk:last-child{ border-bottom:0; }
.ks-trk.is-clickable{ cursor:pointer; }
.ks-trk.is-clickable:hover{ background:var(--km-bg3); }
.ks-trk .ks-rank{ text-align:center; font-family:var(--km-display); font-size:1.5rem; color:var(--km-dim); }
.ks-trk:first-child .ks-rank{ color:var(--km-red); }
.ks-trk img{ width:46px; height:46px; object-fit:cover; background:#000; display:block; border-radius:var(--km-radius); }
.ks-trk .ks-artist{
    font-family:var(--km-display); letter-spacing:.04em; text-transform:uppercase;
    color:var(--km-white); font-size:.95rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ks-trk .ks-song{ color:var(--km-muted); font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ks-trk .ks-feat{ color:#7a7a82; }
.ks-trk .ks-count{ text-align:right; font-family:var(--km-display); font-size:1.2rem; color:var(--km-red); white-space:nowrap; text-decoration:none; }

/* Repli et zone défilante pour les longues listes */
.ks-fold{ margin-top:12px; border-top:1px solid var(--km-border); }
.ks-fold > summary{
    cursor:pointer; list-style:none; padding:9px 2px; color:#bbb;
    font-size:11px; text-transform:uppercase; letter-spacing:.1em;
    display:flex; align-items:center; gap:8px; user-select:none;
}
.ks-fold > summary::-webkit-details-marker{ display:none; }
.ks-fold > summary::before{ content:'\25B8'; color:var(--km-red); transition:transform .15s; display:inline-block; }
.ks-fold[open] > summary::before{ transform:rotate(90deg); }
.ks-scroll{ max-height:460px; overflow:auto; border:1px solid var(--km-border); }
.ks-scroll thead th{ position:sticky; top:0; z-index:1; }

/* ══ 8. CARTES ET ÉTATS ═══════════════════════════════════ */
.ks-card{
    background:rgba(20,20,20,.5);
    border:1px solid var(--km-border);
    border-radius:var(--km-radius-card);
    box-shadow:0 10px 28px rgba(0,0,0,.35);
    padding:var(--km-pad) 22px;
}
/* Carte accolée sous un .ks-rub : ni bord haut ni arrondi */
.ks-card.is-attached{ border-top:0; border-radius:0; box-shadow:none; background:var(--km-bg2); }
.ks-card > h3{
    font-family:var(--km-display); font-weight:400; letter-spacing:var(--km-ls); text-transform:uppercase;
    color:var(--km-white); font-size:.95rem; margin:0 0 var(--km-gap);
    border-left:3px solid var(--km-red); padding-left:10px;
}
.ks-msg{
    background:var(--km-red-dim); border:1px solid var(--km-red); border-radius:var(--km-radius);
    padding:12px 16px; color:var(--km-white); margin:18px 0; font-size:14px;
}

/* Pastille d'état */
.ks-dot{ width:9px; height:9px; border-radius:50%; background:var(--km-dim); display:inline-block; }
.ks-dot[data-state="loading"]{ background:rgba(255,255,255,.35); animation:ksPulse 1.2s infinite; }
.ks-dot[data-state="ok"]{ background:var(--km-green); }
.ks-dot[data-state="error"]{ background:var(--km-red); }
@keyframes ksPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* ══ 9. UTILITAIRES ═══════════════════════════════════════ */
.ks-figs{ display:flex; flex-wrap:wrap; border-top:1px solid var(--km-border); border-bottom:1px solid var(--km-border); }
.ks-fig{ flex:1 1 160px; padding:16px 10px; text-align:center; border-right:1px solid var(--km-border); }
.ks-fig:last-child{ border-right:0; }
.ks-fig b{ display:block; font-family:var(--km-display); font-weight:400; font-size:2.1rem; line-height:1; color:var(--km-white); }
.ks-fig b.is-red{ color:var(--km-red); }
.ks-fig i{
    display:block; font-style:normal; font-family:var(--km-display); font-size:.6rem;
    letter-spacing:.18em; text-transform:uppercase; color:var(--km-muted); margin-top:7px;
}

.ks-logos{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:1px;
    background:var(--km-border); border:1px solid var(--km-border);
}
.ks-logos img{ width:100%; aspect-ratio:1/1; object-fit:contain; background:var(--km-bg3); padding:9px; display:block; }

.ks-empty{ max-width:600px; margin:60px auto; text-align:center; color:var(--km-muted); line-height:1.7; }
.ks-empty a{ color:var(--km-red); }

/* Mention légale, en pied de page */
.ks-legal, .sc-legal{
    max-width:var(--km-wrap); margin:0 auto 12px; padding:9px 21px 33px 29px;
    border-top:1px solid var(--km-border); color:#6c6c74;
    font-size:12px; line-height:1.65; text-align:left;
}

/* ══ 10. RESPONSIVE ═══════════════════════════════════════ */
@media(max-width:720px){
    .ks-wrap{ padding:0 16px; }
    .ks-card{ padding:18px 14px; }
    .ks-ears{ font-size:.54rem; letter-spacing:.12em; }
    .ks-name h1{ font-size:2.1rem; }
    .ks-trk{ grid-template-columns:32px 40px 1fr auto; gap:10px; }
    .ks-trk img{ width:40px; height:40px; }
    .ks-trk .ks-rank{ font-size:1.2rem; }
    .ks-figs{ flex-direction:column; }
    .ks-fig{ border-right:0; border-bottom:1px solid var(--km-border); }
    .ks-fig:last-child{ border-bottom:0; }
    .ks-legal, .sc-legal{ font-size:11px; padding:9px 16px 26px; }
}