/* KenhoWeb GSP Navigation Appli — guideeparsaparole.com (thème Astra).
   TOUT est inerte sans la classe « kwapp » sur <html> (mode
   application) : les seules règles actives hors mode appli masquent
   les éléments du module. Le site dans un navigateur ne change pas. */

/* ── Hors mode application : les éléments du module n'existent pas ── */
#kwgna-barre,
#kwgna-tiroir,
#kwgna-voile {
    display: none !important;
}

/* ── Mode application : l'en-tête du site web disparaît ─────────────
   Le logo d'Astra renvoyait à l'accueil du site web et son bouton ☰
   ouvrait le menu du site web ; en mode appli, la barre du module
   ci-dessous les remplace entièrement. */
html.kwapp #masthead {
    display: none !important;
}

/* Espace réservé en haut pour la barre fixe (toujours visible pendant
   le défilement, comme exigé). Décalage de la barre d'administration
   WordPress quand elle est présente (comptes connectés). */
html.kwapp body {
    padding-top: 54px;
}
html.kwapp body.admin-bar {
    padding-top: 86px;
}
@media (max-width: 782px) {
    html.kwapp body.admin-bar {
        padding-top: 100px;
    }
}

/* ── Barre d'application ─────────────────────────────────────────── */
html.kwapp #kwgna-barre {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 54px;
    z-index: 99990;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 10px 0 12px;
    background: #0b1c33;
    border-bottom: 2px solid #c9a227;
    box-shadow: 0 2px 10px rgba(3, 9, 18, 0.35);
}
html.kwapp body.admin-bar #kwgna-barre {
    top: 32px;
}
@media (max-width: 782px) {
    html.kwapp body.admin-bar #kwgna-barre {
        top: 46px;
    }
}
.kwgna-marque {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    text-decoration: none;
}
.kwgna-logo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.08);
}
.kwgna-nom {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 17px;
    font-weight: 700;
    color: #faf7f0;
    white-space: nowrap;
}
#kwgna-burger {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(201, 162, 39, 0.65);
    border-radius: 10px;
    background: transparent;
    color: #c9a227;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

/* ── Cloche des notifications : le coin droit de la barre (v1.0.3) ──
   Demande du propriétaire (2026-10-31) : la cloche de notification
   tout à droite de la barre de l'application, pour que, dès la page
   d'accueil, la personne voie ses nouveautés sans chercher.
   Contrat inter-modules (documenté) : la cloche reste l'élément
   propre du module « GSP Notifications » — bouton #kwgn-cloche,
   pastille #kwgn-badge, panneau #kwgn-panneau ; son comportement
   (pastille des non-lues, ouverture du panneau) reste entièrement
   le sien. Le module Notifications ancre lui-même sa cloche dans
   cette barre, juste avant le bouton ☰ (classe « kwgn-dans-barre »)
   quand les identifiants #kwgna-barre et #kwgna-burger existent :
   la structure de la barre ne change donc pas. Ce module-ci ne crée
   AUCUN second bouton et ne duplique aucun identifiant ; il se
   borne à DISPOSER les éléments de sa barre : marque à gauche (1),
   bouton ☰ poussé à droite (2), cloche ancrée à l'extrémité
   droite (3). Sans le module Notifications, la règle sur
   #kwgn-cloche ne correspond à rien et n'a aucun effet. Le panneau
   « Nouveautés » du module Notifications s'ouvre sous la barre, à
   droite, comme avant. */
html.kwapp #kwgna-barre .kwgna-marque {
    order: 1;
}
html.kwapp #kwgna-burger {
    order: 2;
    margin-left: auto;
}
html.kwapp #kwgna-barre #kwgn-cloche {
    order: 3;
}

/* ── Voile + tiroir (menu de l'application) ──────────────────────── */
html.kwapp #kwgna-voile {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(3, 9, 18, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
html.kwapp #kwgna-tiroir {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100001;
    width: min(84vw, 320px);
    height: 100dvh;
    background: #0b1c33;
    box-shadow: 4px 0 24px rgba(3, 9, 18, 0.5);
    transform: translateX(-105%);
    transition: transform 0.3s ease;
}
html.kwapp body.kwgna-tiroir-ouvert #kwgna-voile {
    opacity: 1;
    pointer-events: auto;
}
html.kwapp body.kwgna-tiroir-ouvert #kwgna-tiroir {
    transform: translateX(0);
}
html.kwapp body.kwgna-tiroir-ouvert {
    overflow: hidden;
}
.kwgna-t-entete {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid rgba(201, 162, 39, 0.35);
}
.kwgna-t-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.08);
}
.kwgna-t-nom {
    flex: 1 1 auto;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16px;
    font-weight: 700;
    color: #c9a227;
}
#kwgna-fermer {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(201, 162, 39, 0.5);
    border-radius: 50%;
    background: transparent;
    color: #faf7f0;
    font-size: 16px;
    cursor: pointer;
}
.kwgna-t-liens {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 0;
}
.kwgna-t-lien {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 600;
    color: #faf7f0;
    text-decoration: none;
    border-bottom: 1px solid rgba(250, 247, 240, 0.07);
}
.kwgna-t-lien:active {
    background: rgba(201, 162, 39, 0.18);
}
.kwgna-t-icone {
    flex: 0 0 24px;
    font-size: 19px;
    text-align: center;
}
.kwgna-t-bas {
    padding: 12px 14px 16px;
    border-top: 1px solid rgba(201, 162, 39, 0.35);
}
.kwgna-t-vip {
    display: block;
    padding: 13px 12px;
    border-radius: 10px;
    background: #c9a227;
    color: #0b1c33;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

/* ── Page « Mon compte » : bouclier de lisibilité ───────────────────
   Mode application seulement, page « Mon compte » seulement.
   Le correctif du module Parrainage VIP (v1.0.1, CSS énumératif)
   charge bien sur la page, mais la vue membre dans l'application
   restait illisible (capture du propriétaire, 2026-10-24) : ce
   bouclier force une palette explicite sur TOUT le contenu du compte
   (compte PMS + blocs du module), sans énumérer chaque sélecteur, et
   le schéma « clair » posé par le détecteur neutralise
   l'assombrissement automatique de Chrome. Aucun effet sur le web. */
html.kwapp body.kwgna-compte {
    color-scheme: light;
}
html.kwapp body.kwgna-compte .entry-content,
html.kwapp body.kwgna-compte .entry-content div,
html.kwapp body.kwgna-compte .entry-content section,
html.kwapp body.kwgna-compte .entry-content table,
html.kwapp body.kwgna-compte .entry-content thead,
html.kwapp body.kwgna-compte .entry-content tbody,
html.kwapp body.kwgna-compte .entry-content tr,
html.kwapp body.kwgna-compte .entry-content th,
html.kwapp body.kwgna-compte .entry-content td,
html.kwapp body.kwgna-compte .pms-account-subscriptions-header,
html.kwapp body.kwgna-compte .pms-account-subscription,
html.kwapp body.kwgna-compte .kwpv-bloc,
html.kwapp body.kwgna-compte .kwpv-code {
    background-color: #ffffff !important;
}
html.kwapp body.kwgna-compte .entry-content,
html.kwapp body.kwgna-compte .entry-content p,
html.kwapp body.kwgna-compte .entry-content li,
html.kwapp body.kwgna-compte .entry-content span,
html.kwapp body.kwgna-compte .entry-content div,
html.kwapp body.kwgna-compte .entry-content label,
html.kwapp body.kwgna-compte .entry-content strong,
html.kwapp body.kwgna-compte .entry-content th,
html.kwapp body.kwgna-compte .entry-content td,
html.kwapp body.kwgna-compte .entry-content h1,
html.kwapp body.kwgna-compte .entry-content h2,
html.kwapp body.kwgna-compte .entry-content h3,
html.kwapp body.kwgna-compte .entry-content h4 {
    color: #16233f !important;
}
html.kwapp body.kwgna-compte .entry-content a {
    color: #0b5cad !important;
}
html.kwapp body.kwgna-compte .entry-content input,
html.kwapp body.kwgna-compte .entry-content select,
html.kwapp body.kwgna-compte .entry-content textarea {
    background-color: #ffffff !important;
    color: #16233f !important;
    border: 1px solid #b9b2a0;
}
html.kwapp body.kwgna-compte .entry-content button,
html.kwapp body.kwgna-compte .entry-content input[type="submit"],
html.kwapp body.kwgna-compte .entry-content .button,
html.kwapp body.kwgna-compte .kwpv-bouton {
    background-color: #0b1c33 !important;
    color: #ffffff !important;
}