/* KenhoWeb Appli Publique — présentation « application » du site.
   TOUTES les règles sont préfixées par « html.kwapp » : sans le mode
   application (classe posée par le détecteur en tête de page), cette
   feuille ne change strictement rien au site. Les éléments créés par
   le JS du module (#kwapp-accueil, #kwapp-voile, .kwapp-avis)
   n'existent eux-mêmes qu'en mode application.
   v1.0.1 — PLEINE LARGEUR : la zone d'accueil (bandeau + grille de
   cartes) couvre tout l'écran bord à bord, comme la référence
   Bible.audio ; il ne reste que ~10 px de respiration à l'intérieur.
   v1.0.2 — la section « À propos de moi » de l'accueil (conteneur
   a9ed5b9, resté visible dans l'appli sous la grille de cartes) est
   masquée elle aussi, et l'emblème de la carte « Site web officiel »
   s'affiche en entier, au-dessus de sa bande de titre.
   v1.0.3 — l'accueil de l'application ne montre plus QUE l'écran du
   ministère : toutes les sections d'origine de la page d'accueil
   sont masquées en bloc (audit complet du 2026-10-16, voir la règle
   « écran du ministère seulement » ci-dessous), la barre de droits
   d'auteur du thème disparaît de toute l'application, et le pied
   compact est réorganisé (petit emblème, liens texte compacts en
   grille resserrée, ligne discrète de droits).
   v1.0.4 — pied compact : l'emblème PM, petit (54 px) et coincé en
   haut à gauche alors que tout le bloc est centré, est CENTRÉ
   au-dessus du nom et agrandi (~84 px).
   v1.0.6 — l'application prend un nom propre (un seul mot) : nom
   du pied compact et ligne finale de droits (textes dans le JS).
   v1.0.7 — BAPTÊME DÉFINITIF : le nom devient celui de la
   devise du ministère.
   v1.0.8 — CORRECTION FINALE : le propriétaire simplifie, le
   nom tient en « Guidée par Sa Parole ». La barre d'application
   porte le sigle officiel « GSP » (le nom complet y serait
   trop long), le nom complet vit dans le pied et la visite
   guidée, et la ligne « devise » du pied compact disparaît
   (redondance retirée).
   v1.0.9 — NOUVEAU LOGO : le nouveau logo du ministère
   (« les pas guidés vers la croix », carré 512×512, fond bleu
   nuit plein) remplace l'ancien emblème PM dans la barre
   d'application (image substituée en JS, léger arrondi façon
   icône d'application), l'emblème du pied compact et la carte
   « Site web officiel » (toujours en entier, object-fit
   contain sur fond bleu nuit).
   v1.0.10 — LOGO DÉTOURÉ : le logo devient un cercle à fond
   transparent (logo-gsp-rond.webp) ; les bords du carré bleu
   nuit ne se voient plus sur la carte ni dans le pied.
   Aucune règle ne change : tailles (barre 40 px, pied 84 px,
   carte contain) et comportements sont ceux de la v1.0.9. */

/* ===== Confort tactile général =====
   overflow-x : la zone d'accueil sort en 100vw (voir plus bas) ;
   « clip » empêche tout défilement horizontal sans créer de
   conteneur de défilement (le défilement et le collant restent
   intacts), « hidden » en repli pour les vieux navigateurs. */
html.kwapp body { overscroll-behavior: contain; overflow-x: hidden; overflow-x: clip; }
html.kwapp a, html.kwapp button { -webkit-tap-highlight-color: transparent; }

/* ===== Accueil : la zone héro personnelle disparaît =====
   Conteneurs Elementor de la page d'accueil (post 10), vérifiés dans
   le HTML servi : fa7a147 = diaporama Smart Slider (bannière « Une vie
   guidée par sa parole — Pierre-Makenson Élysée », nom dans l'image)
   + grand titre « ÉLYSÉE PIERRE-MAKENSON » ; 4d960bd = bloc personnel
   de l'accueil ; a9ed5b9 = section « À propos de moi » (enfant unique :
   le widget boîte d'image 992b63c — photo studio, titre et
   biographie). Ce dernier bloc n'est PAS dans le conteneur 4d960bd :
   il restait visible dans l'application, sous la grille de cartes
   (constaté sur le téléphone du propriétaire le 2026-10-16) — il est
   masqué depuis la v1.0.2. La grille de cartes du ministère, injectée
   en JavaScript, prend la place en haut de l'accueil. */
html.kwapp body.home .elementor-element[data-id="fa7a147"],
html.kwapp body.home .elementor-element[data-id="4d960bd"],
html.kwapp body.home .elementor-element[data-id="a9ed5b9"] { display: none !important; }

/* ===== Accueil : ÉCRAN DU MINISTÈRE SEULEMENT (v1.0.3) =====
   Audit complet de la page d'accueil (post 10, HTML servi le
   2026-10-16) : la colonne de contenu (.nt-column-8) ne contient
   que DEUX enfants — le conteneur Elementor .elementor-10 et le
   bloc #kwab-wrap du module Accueil Bible (grandes cartes « Lire
   la Bible » / « Bible Audio »). Les 13 sections de premier niveau
   de .elementor-10 : fa7a147 (diaporama + titre), 4d960bd (bloc
   personnel), a9ed5b9 (« À propos de moi »), 68bd46c + fc68056
   (bloc don : image « FAITES VOTRE DON », bouton « Faire un don »),
   58663f4 (« Puisez l'inspiration… »), 9ebbaec (intro sermons +
   signature « Pierre-Makenson Elysee — Évangéliste et Écrivain »),
   6cc6f23 + abbc720 + 41deae6 + c08c024 (images et grille de
   sermons, mini-bannières de catégories), 63273e9 (« Rejoignez
   l'Abonnement VIP »). Le propriétaire a rejeté TOUT ce contenu
   « site web » dans l'application (« Je veux pas voir ces
   choses-là dans l'application mobile ») : plutôt qu'une liste
   d'identifiants au cas par cas, on masque donc TOUS les enfants
   de premier niveau du conteneur Elementor — sauf #kwapp-accueil,
   que le JS du module insère comme enfant direct de .elementor-10,
   juste avant la première section — et tout frère du conteneur
   dans la colonne (#kwab-wrap compris). La colonne latérale
   d'origine (.nt-column-4 : versets, vidéo YouTube, réseaux) est
   masquée aussi à titre de double couverture (le module Mise en
   page la déplace déjà dans .kwmp-section, masquée plus haut, et
   la masque lui-même). La fenêtre Popup Maker vit au niveau du
   corps de page, hors de la colonne : elle n'est jamais touchée,
   pas plus que la visite guidée. body.home seulement : aucune
   autre page ne perd de contenu. */
html.kwapp body.home .elementor-10 > :not(#kwapp-accueil) { display: none !important; }
html.kwapp body.home .nt-column-8 > :not(.elementor-10) { display: none !important; }
html.kwapp body.home .nt-column-4 { display: none !important; }

/* ===== Section « Le ministère au quotidien » : site web seulement =====
   Bloc bleu nuit créé par le module Mise en page (.kwmp-section, la
   colonne latérale du thème déplacée sous le contenu) : présent sur
   toutes les pages à barre latérale, il reste visible sur le site
   mais pas dans l'application. */
html.kwapp .kwmp-section { display: none !important; }

/* ===== Page « À propos » : biographie remplacée par l'avis =====
   Le contenu Elementor de la page (post 11) est masqué ; le JS du
   module affiche à la place l'avis du ministère (.kwapp-avis).
   Les deux règles photo ci-dessous restent en défense en profondeur
   (portrait studio de la boîte « Biographie », widget image de la
   photo en prédication) au cas où le contenu réapparaîtrait. */
html.kwapp body.page-id-11 [data-elementor-type="wp-page"] { display: none !important; }
html.kwapp .elementor-element[data-id="b51da9f"] .elementor-image-box-img { display: none !important; }
html.kwapp .elementor-element[data-id="e0a1c84"] { display: none !important; }
html.kwapp .kwapp-avis { background: #0b1c33; border: 1px solid rgba(201, 162, 39, .45); border-radius: 16px; padding: 30px 24px; margin: 22px 0; text-align: center; }
html.kwapp .kwapp-avis p { color: #e8e2cf; font-size: 17.5px; line-height: 1.6; margin: 0 0 20px; }
html.kwapp .kwapp-avis-btn { display: inline-block; background: #c9a227; color: #0b1c33 !important; font-weight: 700; font-size: 16.5px; padding: 14px 26px; border-radius: 12px; text-decoration: none; }
html.kwapp .kwapp-avis-btn:active { transform: scale(.97); opacity: .9; }

/* ===== Pages intérieures : bande de titre du thème (v1.0.6) =====
   Le thème Eduvert place sous l'en-tête, sur les pages intérieures,
   sa zone de titre / fil d'Ariane : <section id="breadcrumb-section"
   class="breadcrumb-area no-breadcrumb"> (fond sarcelle
   var(--primary-color) dans color.css ; le module Mise en page la
   décrit lui-même comme une « zone de navigation vide (bande
   sarcelle, section breadcrumb-section) »). Sur les pages
   concernées, elle est servie VIDE (aucun titre ni fil d'Ariane :
   classe « no-breadcrumb », constatée dans le HTML réel de
   /lire-la-bible/ et /sermons/) : en mode application, il n'en
   reste qu'une large bande sarcelle vide sous la barre
   d'application — constaté sur les captures réelles de la fiche
   Play (Bible, Livres, Nuits de Paix, Méditation Express, Livres
   audio). Elle est donc masquée dans l'application, pages
   intérieures seulement. L'accueil est EXCLU de la règle : sa
   bande y est déjà masquée par le module Mise en page
   (body.home #breadcrumb-section) et rien ne doit y changer.
   Sans la classe kwapp (site web), la bande du thème reste
   exactement comme avant. */
html.kwapp body:not(.home) #breadcrumb-section { display: none !important; }

/* ===== En-tête : barre d'application compacte et fixe =====
   L'en-tête mobile du thème est déjà bleu nuit, fixe (sticky-nav) et
   porte le logo + le hamburger qui ouvre le tiroir : on le compacte,
   on y ajoute le nom du ministère (span injecté en JS), et on masque
   les restes « site web » (navigation bureau, bascule de barre
   latérale du thème, bandeau vide, panneau mobile du thème). */
html.kwapp #header-section .navigator { display: none !important; }
html.kwapp #header-section .theme-mobile-nav { display: block !important; position: sticky; top: 0; z-index: 99990; background: #0b1c33 !important; }
html.kwapp #header-section .header-sidebar-toggle,
html.kwapp #header-section #mob-h-top,
html.kwapp #header-section .mobile-menu,
html.kwapp #header-section .site-description { display: none !important; }
html.kwapp #header-section .mobile-logo { display: flex; align-items: center; gap: 9px; }
html.kwapp #header-section .mobile-logo img.custom-logo { height: 40px !important; width: auto !important; border-radius: 8px; }
/* Nom de l'application dans la barre : depuis la v1.0.7, la barre
   porte le sigle officiel « GSP » (Guidée par Sa Parole) — le nom
   complet, trop long pour la barre, vit dans le pied compact et
   la visite guidée. Sigle court : affichage propre sur une seule
   ligne, à côté de l'emblème. */
html.kwapp .kwapp-nom-app { color: #c9a227; font-weight: 700; font-size: 17px; letter-spacing: .3px; white-space: nowrap; line-height: 1.15; }

/* ===== Accueil de l'application : bannière + grille de cartes images =====
   Modèle cité par Kenho : la page « Ressources » de l'application
   Bible.audio — une grille de cartes généreuses en 2 colonnes sur
   fond clair et propre, chaque carte étant une vraie photo libre
   de droits (embarquée dans le module, assets/cartes/) avec son
   TITRE IMPRIMÉ SUR LA PHOTO, en gros blanc gras sur un bandeau de
   surlignage bleu nuit à liseré doré (couleurs du ministère). La
   marque reste aussi dans la bannière et la barre d'application.
   Pleine largeur (v1.0.1) : la zone est injectée dans la colonne
   contenu de l'accueil (même chaîne que le reste du site :
   .nt-container à 50 px de rembourrage latéral > colonne) ; la
   colonne est verrouillée à 100 % ci-dessous (même géométrie que
   le module Mise en page quand il déplace la barre latérale), ce
   qui centre sa boîte dans la fenêtre, puis la zone sort en
   100vw (left:50% + translateX(-50%)) : fond bord à bord, et
   bandeau + cartes à 10 px des bords seulement. */
html.kwapp body.home #content .section-post .nt-columns-area > .nt-column-8 { flex: 0 0 100% !important; max-width: 100% !important; }
html.kwapp #kwapp-accueil { background: #f7f4ec; width: 100vw; max-width: 100vw; position: relative; left: 50%; transform: translateX(-50%); border-radius: 0; padding: 12px 10px 16px; margin: 14px 0 24px; box-sizing: border-box; }
html.kwapp .kwapp-banniere { background: #0b1c33; border: 1px solid rgba(201, 162, 39, .4); border-radius: 14px; padding: 20px 16px 16px; }
html.kwapp #kwapp-accueil h2 { color: #c9a227; text-align: center; font-size: 26px; margin: 0 0 8px; letter-spacing: .4px; }
html.kwapp #kwapp-accueil p { color: #e8e2cf; text-align: center; font-size: 16px; line-height: 1.55; margin: 0 auto 4px; max-width: 520px; }
html.kwapp .kwapp-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
html.kwapp .kwapp-carte { position: relative; display: block; aspect-ratio: 4 / 3; background: #0b1c33; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(11, 28, 51, .18); text-decoration: none; transition: transform .12s ease, opacity .12s ease; }
html.kwapp .kwapp-carte-photo { position: absolute; inset: 0; display: block; background: #e9e4d8; }
html.kwapp .kwapp-carte-img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.kwapp .kwapp-carte-titre { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: block; padding: 9px 12px 11px; background: rgba(11, 28, 51, .88); border-top: 3px solid #c9a227; color: #ffffff; font-size: 16.5px; font-weight: 700; line-height: 1.25; }
html.kwapp .kwapp-carte:active { transform: scale(.97); opacity: .92; }
html.kwapp .kwapp-carte-site { grid-column: 1 / -1; aspect-ratio: 3 / 1; }
/* Carte « Site web officiel » : l'image est le logo du ministère
   (carré 512×512, fond bleu nuit plein — l'ancien emblème PM
   600×400 jusqu'à la v1.0.8) — elle ne doit pas passer « en
   couverture » comme les photos, mais tenir EN ENTIER dans la carte.
   La zone photo est donc cantonnée au-dessus de la bande de titre
   (~44 px : rembourrages 9 + 11 px, ligne de 16,5 px × 1,25 et liseré
   doré de 3 px) : sans cela, l'emblème, centré sur toute la hauteur
   de la carte, finissait rogné par la bande (constaté le 2026-10-16).
   Le fond bleu nuit de la zone et de l'image elle-même assure la
   continuité des bords. */
html.kwapp .kwapp-carte-site .kwapp-carte-photo { bottom: 44px; background: #0b1c33; }
html.kwapp .kwapp-carte-site .kwapp-carte-img { object-fit: contain; background: #0b1c33; }
@media (min-width: 700px) { html.kwapp .kwapp-cartes { grid-template-columns: repeat(3, 1fr); } html.kwapp .kwapp-carte-site { grid-column: 1 / -1; } }

/* ===== Tiroir : retour tactile sur les liens ===== */
html.kwapp #kwmp-t-liens .kwmp-t-lien:active { transform: scale(.98); }

/* ===== Pied de page : bloc compact d'application =====
   Le pied « site web » du thème Eduvert (footer#footer_one) déploie
   ses widgets en colonnes (.footer-main) et une barre de droits
   d'auteur verte (.footer-copyright, avec son second menu) : en
   mode application, TOUT cela est masqué — la barre verte entière,
   sur toutes les pages (v1.0.3) — et le JS du module insère à la
   place le bloc compact #kwapp-pied. Réorganisation v1.0.3
   (demande du propriétaire : les 5 gros boutons pleine largeur
   faisaient « menu de site web ») : bloc centré bleu nuit, emblème
   CENTRÉ au-dessus du nom et agrandi à ~84 px (v1.0.4 : à 54 px et
   en haut à gauche, il avait l'air perdu), nom de l'application,
   rangée des réseaux
   sociaux réels, puis les 5 liens en liens TEXTE compacts avec
   petite icône, grille resserrée 2 colonnes à rembourrage réduit,
   et une ligne finale discrète au nom de l'application
   (.kwapp-pied-copyright, ajoutée par le JS). Sur le site web,
   le pied du thème — barre verte comprise — ne change en rien.
   v1.0.7 : la ligne « devise » sous le nom a été retirée du bloc
   (la devise du ministère EST le nom de l'application depuis le
   baptême définitif — « Guidée par Sa Parole » depuis la
   v1.0.8 : la répéter sous le nom serait une redondance) — le
   nom garde donc sa marge basse à la place. */
html.kwapp #footer_one .footer-main,
html.kwapp #footer_one .footer-copyright,
html.kwapp #footer_one .footer-copyright .widget-right { display: none !important; }
html.kwapp .kwapp-pied { text-align: center; padding: 22px 16px 10px; }
html.kwapp .kwapp-pied-embleme { display: block; height: 84px; width: auto; margin: 0 auto; border-radius: 12px; }
html.kwapp .kwapp-pied-nom { color: #c9a227; font-size: 19px; font-weight: 700; letter-spacing: .3px; line-height: 1.3; margin: 10px 0 12px; }
html.kwapp .kwapp-pied-sociaux { display: flex; justify-content: center; gap: 14px; list-style: none; margin: 0 0 14px; padding: 0; }
html.kwapp .kwapp-pied-liens { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; max-width: 440px; margin: 0 auto; }
html.kwapp .kwapp-pied-lien { display: flex; align-items: center; justify-content: center; gap: 6px; background: transparent; border: none; border-radius: 8px; padding: 7px 6px; margin: 0; color: #e8e2cf !important; text-decoration: none; font-size: 14px; font-weight: 600; text-align: center; transition: transform .12s ease, opacity .12s ease; }
html.kwapp .kwapp-pied-lien:active { transform: scale(.97); opacity: .85; }
html.kwapp .kwapp-pied-copyright { color: rgba(232, 226, 207, .6); font-size: 12.5px; margin: 14px 0 4px; }

/* ===== Voile de transition (retour immédiat au toucher) =====
   Léger voile bleu nuit + petit indicateur, purement visuel
   (pointer-events: none en permanence : il ne bloque jamais),
   fondu de 150 ms, retiré dès l'affichage de la page suivante. */
html.kwapp #kwapp-voile { position: fixed; inset: 0; background: rgba(11, 28, 51, .3); opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 100005; display: flex; align-items: center; justify-content: center; }
html.kwapp #kwapp-voile.kwapp-visible { opacity: 1; }
html.kwapp .kwapp-chargeur { width: 38px; height: 38px; border-radius: 50%; border: 4px solid rgba(201, 162, 39, .35); border-top-color: #c9a227; animation: kwapp-tourne .7s linear infinite; }
@keyframes kwapp-tourne { to { transform: rotate(360deg); } }

/* ===== Balayage final « Guidée par Sa Parole » (v1.0.12) =====
   En-tête du tiroir du menu (module Mise en page) : le nom du
   ministère, plus long que l'ancien nom, tient
   proprement dans l'en-tête à taille légèrement réduite (le JS
   remplace le texte et le logo). Page « Soutenir le ministère » :
   le logo rond du ministère, substitué par le JS à la grande
   bannière à l'ancien emblème, est présenté centré et contenu —
   jamais en pleine largeur de colonne, qui déformerait la page.
   Sur le site web, ces règles sont inertes (préfixe html.kwapp). */
html.kwapp .kwmp-t-nom { font-size: 16.5px; letter-spacing: 0; }
html.kwapp img.kwapp-img-soutenir { display: block; width: 100%; max-width: 240px; height: auto; margin: 10px auto; }