/* ==========================================================================
   kalipay.css — feuille unique du gabarit principal (public + membres)

   RÈGLE DE CONTRASTE : jamais de gris plus clair que #4b5563 sur fond blanc.
   Les gris clairs (#9ca3af, #94a3b8) sont réservés aux fonds sombres.
   ========================================================================== */

/* Playfair Display : chargée par assets/fonts/polices.css, lié dans
   noyau/layout.php (16/09/2026 — plus d'appel à Google Fonts). */
/* ==========================================================================
   BASE
   ========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Open Sans',system-ui,-apple-system,sans-serif;
  background-color:var(--fond);
  color:var(--txt);
  padding:0 16px 40px;
  display:flex;
  justify-content:center;
  min-height:100vh;
  /* App installée en PWA (manifest « standalone ») : sans ça, un swipe
     rapide dans une zone qui défile (ex. .kpm-fil, la messagerie) chaîne
     son overscroll jusqu'au document et déclenche le « tirer pour
     rafraîchir » natif du système → la page entière se recharge. */
  overscroll-behavior-y:none;
}
/* Largeur fluide (16/09/2026) : plus de plafond à 1120px — sur PC, la page
   suit la largeur de l'écran (moins les 2×16px de padding du body). Au-delà
   de 1460px, #colonnes sort du conteneur et c'est .col-centre qui est
   bornée (--centre-l, voir « Grands écrans »). */
.kali-page{width:100%;max-width:none;padding-top:5px}
img{max-width:100%;display:block}
a{text-decoration:none}

.card{
  background:var(--carte);
  border-radius:12px;
  box-shadow:0 4px 20px var(--ombre-couleur);
  overflow:hidden;
  margin-bottom:20px;
}
/* Colonnes gauche et droite : cartes plus rapprochées entre elles (20px →
   10px). Scopé à ces deux colonnes seulement, le reste du site garde 20px. */
.col-gauche .card,
.col-droite .card{margin-bottom:10px}
.card-corps{padding:26px 24px}
.boite-centre{max-width:560px;margin:0 auto}

/* Carte réduite à un seul bouton (ex: « La charte du site », colonne de
   droite) : marges à zéro, la carte ne dépasse plus la hauteur du bouton. */
.carte-bouton-seul .card-corps{padding:0}
.carte-bouton-seul .bouton{margin-top:0}

/* Colonnes gauche et droite : espace haut/bas des cartes (La communauté,
   Mon espace, Soirées en cours, Organiser) ramené au maximum, comme le
   reste des cartes de ces colonnes. :not(.carte-bouton-seul) pour ne pas
   revenir sur la carte ci-dessus, déjà à 0. */
.col-gauche .card:not(.carte-bouton-seul) .card-corps,
.col-droite .card:not(.carte-bouton-seul) .card-corps{
  padding-top:8px;
  padding-bottom:8px;
}

/* ==========================================================================
   EN-TÊTE FIXE
   ========================================================================== */
/* Marges au maximum resserrées (demande du 20/08/2026) : tailles de logo,
   titre et texte inchangées, seuls les espaces autour sont réduits.
   header.card{margin-bottom} : override du .card générique (20px, base
   ci-dessus) pour ne pas laisser d'écart avant les colonnes. */
header.card{margin-bottom:3px}
.entete{text-align:center;padding:8px 24px 0}
/* .entete-ligne : regroupe .entete-lien (logo+titre) et le bouton WhatsApp
   sur une même ligne centrée, même écart (14px) que celui déjà utilisé à
   l'intérieur de .entete-lien — « collés » l'un à l'autre. */
.entete-ligne{display:flex;align-items:center;justify-content:center;gap:14px}
.entete-lien{
  display:flex;align-items:center;justify-content:center;gap:14px;
  color:inherit;
}
.kali-logo{
  width:56px;height:56px;margin:0;flex:none;
  border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px var(--carte),0 0 0 4px var(--or);
}
/* ---- Bouton « 📲 Recommander via WhatsApp » (en-tête), provisoire --------
   Réservé aux membres au profil actif (noyau/entete.php,
   $nav_whatsapp = kp_acces_autorise('profil')). Aucune mise en forme
   propre : l'image à l'intérieur porte déjà la classe .kali-logo
   ci-dessus (même forme, mêmes proportions, même anneau que le logo du
   site — y compris son repli mobile, .kali-logo{width:42px...} plus bas).
   Ce bouton n'existe que pour rendre l'image cliquable. Ajouté le
   21/08/2026. */
.whatsapp-recommander{background:none;border:0;padding:0;margin:0;line-height:0;cursor:pointer;flex:none}
.kali-titre{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:bold;font-size:1.6rem;letter-spacing:3px;text-transform:uppercase;
  color:var(--txt);line-height:1.2;margin:0;
}
.filet{display:block;width:170px;height:9px;margin:4px auto 0}
.kali-sous{
  font-size:.78rem;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:var(--txt-1);
}

/* Navigation du haut */
.nav-haut{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  padding:4px 20px 4px;
}
.nav-lien{
  display:inline-block;padding:7px 16px;border-radius:9px;
  font-size:.86rem;font-weight:700;color:var(--txt-1);
  background:var(--fond-3);border:1px solid var(--trait);
  transition:background .15s,color .15s,border-color .15s;
}
.nav-lien:hover{border-color:var(--or);color:var(--or-fonce)}
.nav-lien--actif{background:linear-gradient(135deg,var(--or),var(--or-fonce));color:var(--sur-or);border-color:var(--or-fonce)}
.nav-lien--admin{background:var(--fond-2);color:var(--txt);border-color:var(--fond-2)}
.nav-lien--admin:hover{color:var(--or)}
/* Des <button>, pas des <a> (déclenchent une pop-up au lieu de naviguer) :
   reset des propriétés que les navigateurs ne font pas hériter par défaut
   sur les boutons — même précaution que .compteur--action. Complété le
   20/08/2026 (--notif et --coeur avaient le même besoin, non couvert
   jusqu'ici). */
.nav-lien--menu, .nav-lien--notif, .nav-lien--coeur{font-family:inherit;cursor:pointer}

/* ---- Menus déroulants de la barre PC (02/09/2026) ----------------------
   Quatre déroulants — Sortir, La communauté, Mon espace (ou Rejoindre),
   Infos — à la place de onze onglets à la file. Leur contenu est décrit
   par la table $nav_groupes de noyau/entete.php.
   Ouverture AU CLIC, jamais au survol : le survol se déclenche tout seul
   en traversant la barre et n'existe pas au doigt. */
.nav-groupe{position:relative;display:inline-flex}
.nav-lien--groupe{
  font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
}
.nav-chevron{font-size:.7em;line-height:1;transition:transform .15s}
.nav-lien--groupe[aria-expanded="true"]{border-color:var(--or);color:var(--or-fonce)}
.nav-lien--groupe[aria-expanded="true"] .nav-chevron{transform:rotate(180deg)}

/* position:fixed et non absolute : le panneau est posé par le JS d'après
   la position du bouton (assets/kalipay.js, module MENUS DÉROULANTS). En
   absolute il se faisait recouvrir par la colonne de gauche — la même pile
   d'empilement à trois colonnes qui avait déjà eu la peau du menu ⋮ le
   23/08/2026, réglée là aussi par une sortie en position:fixed.
   z-index 1250 : au-dessus de la messagerie (1150) et des colonnes, sous
   les pop-ups plein écran de l'en-tête (1300). */
.nav-panneau{
  position:fixed;z-index:1250;
  min-width:216px;max-width:min(300px,calc(100vw - 20px));
  display:flex;flex-direction:column;gap:2px;padding:6px;
  border-radius:12px;border:1px solid var(--trait);
  background:var(--carte);box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.nav-panneau[hidden]{display:none}
.nav-panneau-item{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 11px;border-radius:9px;border:1px solid transparent;
  font-family:inherit;font-size:.88rem;font-weight:700;text-align:left;
  color:var(--txt-1);background:transparent;cursor:pointer;
  transition:background .15s,color .15s;
}
.nav-panneau-item:hover{background:var(--fond-3);color:var(--or-fonce)}
.nav-panneau-item--actif{background:linear-gradient(135deg,var(--or),var(--or-fonce));color:var(--sur-or)}
.nav-panneau-item--actif:hover{color:var(--sur-or)}
/* Même grammaire que .nav-lien--ferme dans la barre : discret, en
   pointillés, jamais barré — c'est une invitation, pas un refus. */
.nav-panneau-item--ferme{opacity:.62;border-style:dashed;border-color:var(--trait)}
.nav-panneau-item--ferme:hover{opacity:1;border-style:solid;border-color:var(--or)}
.nav-panneau-icone{flex:0 0 auto;font-size:1.05rem;line-height:1}
.nav-panneau-txt{flex:1 1 auto;min-width:0}
.nav-panneau .nav-pastille{margin-left:0}

/* ==========================================================================
   TROIS COLONNES — squelette fixe à gauche et à droite, zone dynamique au centre
   ========================================================================== */
.colonnes{
  display:grid;
  grid-template-columns:300px 1fr 300px;
  gap:20px;
  align-items:start;
}
/* Pas de position:sticky : sur un portable la colonne dépasse la fenêtre
   et son bas deviendrait inatteignable. */

/* Exception de mise en page (routes.php: 'pleine_largeur' => true) : les
   colonnes de gauche et de droite restent dans le HTML (voir
   noyau/layout.php) mais sont masquées, et la zone centrale prend toute la
   largeur. */
.colonnes--pleine{grid-template-columns:1fr}
.colonnes--pleine .col-gauche,
.colonnes--pleine .col-droite{display:none}

.col-centre{min-width:0}
.col-centre.kp-sortie{opacity:.35;transition:opacity .12s}
.col-centre.kp-entree{animation:kp-fondu .18s ease-out}
@keyframes kp-fondu{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---- Ordinateur (≥901px) : bandeau et colonnes fixes, seul le centre
   défile ----------------------------------------------------------------
   .kali-page devient une colonne flex de la hauteur exacte de l'écran :
   l'en-tête garde sa hauteur naturelle (flex:none) et #colonnes prend le
   reste (flex:1). Le pied de page (footer.pied) est retiré de cet
   affichage pour l'instant — à revoir plus tard (demande du 20/08/2026).
   La page elle-même ne défile plus (body en overflow:hidden) : chacune
   des trois colonnes reçoit sa PROPRE hauteur (100%) et son PROPRE
   ascenseur (overflow-y:auto), indépendant des deux autres — s'il y a
   plus de contenu que de place, un ascenseur discret apparaît pour CETTE
   colonne seule, rien n'est jamais coupé/inaccessible.
   kalipay.js : le retour en haut de page lors d'une navigation fluide
   ciblait window.scrollTo (tout l'écran) — sur ordinateur, c'est
   désormais #zone-centrale (.col-centre) qui défile, donc qui doit
   recevoir ce retour en haut (voir la fonction charger()). */
@media (min-width:901px){
  html{height:100%}
  body{height:100vh;overflow:hidden}
  /* 27/09/2026 : .kali-page devient lui-meme la grille (3 colonnes
     300px/1fr/300px, 2 lignes : en-tete puis contenu) au lieu d'empiler
     header.card puis #colonnes en flex. #colonnes passe en display:contents
     (aucune boite a lui : ses trois enfants deviennent directement des
     items de la grille de .kali-page) afin que gauche/droite puissent
     s'etendre sur les DEUX lignes (grid-row:1/3) et remonter jusqu'en haut
     de l'ecran, a cote de l'en-tete desormais limite a la colonne centrale
     (grid-column:2). Demande du 27/09/2026 (colonnes au plus haut). */
  .kali-page{
    display:grid;
    grid-template-columns:300px 1fr 300px;
    grid-template-rows:auto 1fr;
    column-gap:20px;
    row-gap:3px;
    height:100%;
    max-height:100%;
    padding-top:5px;
  }
  /* margin-bottom remis a 0 ICI : le row-gap ci-dessus fait deja les 3px
     entre l'en-tete et la 1ere carte en grille PC (rapproche de moitie le
     27/09/2026, etait 5px) - la regle de base (header.card{margin-bottom:
     3px}, plus haut dans ce fichier) cumulerait sinon. */
  header.card{grid-column:2;grid-row:1;margin-bottom:0}
  .pied{display:none}
  #colonnes{display:contents}
  .col-gauche{grid-column:1;grid-row:1 / 3}
  .col-centre{grid-column:2;grid-row:2}
  .col-droite{grid-column:3;grid-row:1 / 3}
  /* Pleine largeur (routes.php 'pleine_largeur') : centre ET en-tete
     reprennent toute la largeur ; gauche/droite restent masquees
     (display:none deja pose plus haut, regle .colonnes--pleine). */
  .colonnes--pleine .col-centre{grid-column:1 / 4}
  .kali-page:has(#colonnes.colonnes--pleine) header.card{grid-column:1 / 4}
  .col-gauche,
  .col-centre,
  .col-droite{
    min-height:0;
    overflow-y:auto;
  }

  /* ---- Espace sous l'en-tête retiré (27/09/2026) -------------------------
     Posé le 24/08/2026 quand gauche/droite démarraient SOUS l'en-tête
     (pleine largeur au-dessus d'elles). Depuis le passage en grille
     ci-dessus, elles démarrent au même niveau que lui (grid-row:1/3) :
     plus de décalage à compenser, elles s'alignent nativement sur son
     haut — colonnes remontées tout en haut de l'écran, comme demandé. */

  /* ---- Ascenseurs discrets (demande du 20/08/2026) ----------------------
     Piste transparente (elle se fond dans le fond sombre du corps de page),
     curseur fin et teinté or à faible opacité — plus marqué au survol.
     Firefox : scrollbar-width/-color. Chrome/Edge/Safari : pseudo-éléments
     ::-webkit-scrollbar*. Scopé aux trois colonnes uniquement. */
  .col-gauche,
  .col-centre,
  .col-droite{
    scrollbar-width:thin;
    scrollbar-color:var(--or-voile) transparent;
  }
  .col-gauche::-webkit-scrollbar,
  .col-centre::-webkit-scrollbar,
  .col-droite::-webkit-scrollbar{
    width:6px;
  }
  .col-gauche::-webkit-scrollbar-track,
  .col-centre::-webkit-scrollbar-track,
  .col-droite::-webkit-scrollbar-track{
    background:transparent;
  }
  .col-gauche::-webkit-scrollbar-thumb,
  .col-centre::-webkit-scrollbar-thumb,
  .col-droite::-webkit-scrollbar-thumb{
    background:var(--or-voile);
    border-radius:999px;
  }
  .col-gauche::-webkit-scrollbar-thumb:hover,
  .col-centre::-webkit-scrollbar-thumb:hover,
  .col-droite::-webkit-scrollbar-thumb:hover{
    background:var(--or-voile-fort);
  }
}

/* ---- Grands écrans : colonnes collées aux bords de l'écran --------------
   En dessous de 1460px, pas assez de place pour 300 + 800 + 300 + les
   deux espaces : on garde le comportement ci-dessus (colonnes dans le
   conteneur de 1120px, centre réduit d'autant).
   À partir de 1460px, #colonnes sort du conteneur .kali-page (astuce
   width:100vw + marges négatives, indépendante de la largeur du parent)
   pour s'étendre sur toute la largeur de la fenêtre : la colonne de
   gauche et celle de droite se retrouvent alors collées aux bords réels
   de l'écran, tandis que le centre retrouve sa largeur d'avant (800px,
   celle qu'il avait avec une seule colonne dans un conteneur de 1120px),
   centré dans l'espace qui reste.
   L'en-tête (header.card) reçoit la même astuce : son fond blanc s'étend
   lui aussi sur toute la largeur de l'écran. Son contenu (logo, titre,
   accroche, navigation) reste centré — .entete et .nav-haut centrent déjà
   leur contenu quelle que soit la largeur du bloc, rien à changer là. */
@media (min-width:1460px){
  :root{--centre-l:clamp(800px,calc(100vw - 680px),1100px)}
  body{overflow-x:hidden}
  /* 27/09/2026 : #colonnes est en display:contents depuis le passage en
     grille (901px ci-dessus) — l'escamoter, lui, ne ferait plus rien.
     L'astuce vw + marges négatives se pose maintenant sur .kali-page
     entier (qui porte la grille), ce qui sort gauche/droite ET l'en-tête
     d'un seul geste ; l'en-tête retrouve sa largeur de colonne centrale
     juste en dessous (max-width:var(--centre-l)). */
  .kali-page{
    width:100vw;
    margin-left:calc(-50vw + 50%);
    margin-right:calc(-50vw + 50%);
  }
  /* width:100% est nécessaire ICI, pas seulement max-width : sur un item de
     grille, des marges horizontales à auto désactivent l'étirement par
     défaut (justify-self:stretch) et repassent en taille « ajustée au
     contenu » — sans le width:100% explicite, .col-centre ne prenait que
     la largeur de son texte (une poignée de pixels) au lieu de 800px.
     Bug préexistant, corrigé le 20/08/2026 : c'est lui qui rendait le fil
     d'actu (et toute la zone centrale) anormalement étroit sur grand
     écran (≥1460px). */
  /* 16/09/2026 : le centre n'est plus figé à 800px — il grandit avec
     l'écran (100vw - 2×300 - 2×20 - 2×20 d'air), borné entre 800 et
     1100px (1920px → 1100px). --centre-l sert aussi aux boutons flottants
     (.pub-flottant, .fil-scroll-haut). */
  .colonnes:not(.colonnes--pleine) .col-centre,
  .kali-page:not(:has(#colonnes.colonnes--pleine)) header.card{
    width:100%;
    max-width:var(--centre-l);
    margin:0 auto;
  }
}

/* Barre de progression du chargement */
.kp-barre{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:99;
  background:linear-gradient(90deg,var(--or),var(--accent));
  transition:width .2s ease-out,opacity .3s;
}

/* ==========================================================================
   COLONNE DE GAUCHE
   ========================================================================== */
/* .mini-titre n'est utilisé que dans les colonnes gauche et droite (voir
   noyau/sidebar.php et sidebar-droite.php) : pas besoin de scoper la
   réduction, elle ne touche que ces deux colonnes. */
.mini-titre{
  font-family:'Playfair Display',Georgia,serif;
  font-size:.85rem;letter-spacing:1.8px;text-transform:uppercase;font-weight:bold;
  color:var(--txt);padding-bottom:5px;margin-bottom:6px;border-bottom:1px solid var(--trait);
  display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;
}
.mini-titre .puce{
  background:linear-gradient(135deg,var(--or-fonce),var(--or-vif) 55%,var(--or-sombre));color:var(--fond);border-radius:999px;
  font-size:.72rem;padding:2px 8px;letter-spacing:0;
}

/* Colonnes de gauche et de droite centrées : titres (ci-dessus) et informations. */
.col-gauche .soiree-mini,
.col-droite .soiree-mini{justify-content:center;text-align:center}
.col-gauche .soiree-mini-nom,
.col-gauche .soiree-mini-info,
.col-droite .soiree-mini-nom,
.col-droite .soiree-mini-info{text-align:center}

/* ---- Titre de carte cliquable (23/08/2026) --------------------------------
   Variante de .mini-titre pour un titre qui NAVIGUE (« Les membres » → tout
   l'annuaire) plutôt qu'il ne replie/déplie une carte : un <a>, pas un
   <label>. .mini-titre pose déjà toute la typo (centré, petites capitales,
   soulignement du bas) — seuls le soulignement de lien et le survol
   manquent. */
.mini-titre-lien{text-decoration:none}
.mini-titre-lien:hover{color:var(--or-txt)}

/* ==========================================================================
   COLONNE DE DROITE — LA CARTE À DEUX ONGLETS                  (12/09/2026)
   --------------------------------------------------------------------------
   Remplace deux dispositifs d'un coup :
     · la carte « Mon espace » repliée par accordéon sur PC
       (.carte-repliable-pc, 23/08/2026) — c'est l'onglet qui plie et déplie
       désormais, un accordéon par-dessus ferait double emploi ;
     · la carte « Les membres » posée dessous — devenue le premier onglet de
       la même carte.
   Voir noyau/sidebar-droite.php pour le HTML et assets/kalipay.js pour la
   bascule.

   Le titre d'un onglet est un PICTOGRAMME SEUL (demande du client) : le
   libellé vit dans aria-label/title, jamais à l'écran. La barre déborde des
   24px de .card-corps (margin latérale négative) pour que le trait du bas
   coure d'un bord à l'autre de la carte, comme une vraie barre d'onglets.
   ========================================================================== */
.od-onglets{
  display:flex;border-bottom:1px solid var(--trait);
  margin:0 -24px 10px;padding:0 10px;
}
.od-onglet{
  flex:1 1 0;position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:11px 0 9px;background:none;border:0;cursor:pointer;
  color:var(--txt-2);border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .15s,border-color .15s;
}
.od-onglet:hover{color:var(--txt-1)}
.od-onglet[aria-selected="true"]{color:var(--or);border-bottom-color:var(--or)}
.od-onglet svg{width:22px;height:22px;display:block}
/* Pastille de messages non lus posée sur l'onglet « Mon espace » : même
   rouge et même règle que .nav-pastille et .mel-badge — jamais écrite à 0
   (le PHP n'écrit pas le <span>). Liseré de la couleur de la carte pour la
   détacher du pictogramme. */
.od-pastille{
  position:absolute;top:6px;right:calc(50% - 20px);
  min-width:16px;height:16px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;border-radius:999px;
  background:var(--rouge);color:var(--sur-couleur);
  font-size:.6rem;font-weight:800;line-height:1;
  border:2px solid var(--carte);box-sizing:content-box;
}
.od-panneau[hidden]{display:none}
/* Pastille de l'onglet 👀 : toujours écrite, masquée à 0 (12/10/2026). */
.od-pastille[hidden]{display:none}

/* ---- Onglet 👀 « Ont vu ma fiche » (12/10/2026, maquette V1) -------------
   Reprend la ligne .mll-ligne des Membres ; la date remplace le badge de
   catégorie à droite. Nouveaux encadrés or, déjà vus grisés (comme
   .qv-ligne--vu de la pop-up). */
.ovf-total{font-size:.7rem;color:var(--txt-2);white-space:nowrap}
.ovf-date{flex:0 0 auto;font-size:.66rem;color:var(--txt-2);text-align:right;white-space:nowrap}
.ovf-ligne--neuf{border-color:var(--or);background:var(--or-voile)}
.ovf-ligne--neuf .ovf-date{color:var(--or-txt);font-weight:700}
.ovf-ligne--vu{opacity:.5}
.ovf-ligne--vu:hover{opacity:.8}
.ovf-suite{margin-top:10px}
.ovf-suite[hidden]{display:none}

/* ---- Titre « Les membres » + la bascule tuiles / liste -------------------
   .mini-titre porte normalement lui-même le trait du bas ; ici c'est la
   ligne entière qui le porte, les deux icônes comprises. */
.od-titre-ligne{
  display:flex;align-items:center;gap:6px;
  border-bottom:1px solid var(--trait);padding-bottom:5px;margin-bottom:8px;
}
.od-titre-ligne .mini-titre{flex:1;border:0;padding:0;margin:0}
.od-vue{
  display:flex;line-height:0;padding:3px;
  background:none;border:0;border-radius:6px;cursor:pointer;color:var(--txt-2);
  transition:color .15s,background .15s;
}
.od-vue:hover{color:var(--txt-1);background:var(--fond-3)}
.od-vue[aria-pressed="true"]{color:var(--or);background:var(--or-voile)}
.od-vue svg{width:15px;height:15px}

/* ---- La vue « liste » (kp_mel_ligne(), noyau/donnees.php) ----------------
   L'autre rendu des mêmes membres : une ligne par membre au lieu d'une
   tuile, avec la ville, le ou les âges, et le pictogramme de catégorie en
   badge coloré à droite (.badge--couple/femme/homme/trans, déjà définis plus
   bas pour les cartes de l'annuaire — aucune couleur nouvelle).
   Les deux conteneurs (.mel-grille et .mll) coexistent dans la page, l'un
   masqué par [hidden] : basculer ne coûte aucun aller-retour, et le
   battement de 20 s (mnbPresence(), kalipay.js) les tient tous les deux à
   jour. */
.mll{display:flex;flex-direction:column;gap:6px}
/* display: > [hidden] du navigateur (simple regle par defaut) : sans cette
   ligne, les deux vues s'affichent en meme temps. Idem .mel-grille. */
.mll[hidden]{display:none}
.mll-ligne{
  display:flex;align-items:center;gap:9px;padding:7px 8px;box-sizing:border-box;
  border:1px solid var(--trait);border-radius:10px;overflow:hidden;cursor:pointer;
  color:inherit;text-decoration:none;
}
a.mll-ligne:hover{background:var(--fond-3)}
.mll-photo{
  width:34px;height:34px;flex:0 0 auto;border-radius:50%;object-fit:cover;
  border:1px solid var(--trait);background:var(--fond-3);
}
/* Le texte : deux lignes serrées, coupées proprement — la colonne ne fait
   que 300px, un pseudo long ne doit pas pousser le badge dehors. */
.mll-txt{flex:1;min-width:0}
.mll-pseudo{
  display:flex;align-items:center;font-size:.82rem;font-weight:700;color:var(--or-txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mll-info{
  display:block;margin-top:1px;font-size:.7rem;color:var(--txt-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Badge de catégorie : le .badge de l'annuaire, en plus petit — il ne porte
   ici que le pictogramme, le libellé complet étant dans title/aria-label. */
.mll-cat{flex:0 0 auto;padding:2px 7px;font-size:.63rem}


/* ---- Carte « Les membres », colonne de droite (23/08/2026) ----------------
   Élargie le même jour de « en ligne uniquement » à tous les membres, triés
   du plus récent au plus ancien (voir kp_membres_recents(), noyau/donnees.php).
   Grille fixe à 2 colonnes, 6 lignes maximum (12 membres, revu à la baisse
   le 23/08/2026 après un premier essai à 8) — pas de
   défilement, contrairement à .qv-liste (pop-up « qui a vu ma fiche ») : ici
   la carte doit rester raisonnable, colonne large de seulement 300px.
   .mel-point (petit point vert) : posé seulement devant les membres
   effectivement en ligne (indicateur 'en_ligne' de kp_membres_recents()),
   pas devant tout le monde — la carte affichant maintenant aussi des
   membres hors ligne, le point redevient un signal utile plutôt qu'un
   simple décor. Mini-carte propre (.mel-*)
   plutôt que réutiliser .qv-ligne : ce dernier est calibré pour une pop-up
   deux fois plus large (max-width:460px, photo 48px) — trop grand ici. */
.mel-grille{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mel-grille[hidden]{display:none}
.mel-vide{padding:10px 4px;text-align:center;color:var(--txt-2);font-size:.82rem}
.mel-carte{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:4px;padding:10px 6px;box-sizing:border-box;overflow:hidden;cursor:pointer;
  border:1px solid var(--trait);border-radius:10px;color:inherit;text-decoration:none;
}
a.mel-carte:hover{background:var(--fond-3);border-color:var(--trait)}
/* Boîte autour de la photo : seulement pour ancrer .mel-badge dans son coin,
   sans toucher à la taille ni au centrage de .mel-photo elle-même. */
.mel-photo-boite{position:relative;display:inline-flex;flex:0 0 auto}
.mel-photo{
  width:38px;height:38px;flex:0 0 auto;border-radius:50%;object-fit:cover;
  border:1px solid var(--trait);background:var(--fond-3);
}
.mel-photo--vide{
  display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--txt-4);
}
/* Pastille de non-lus par membre (non_lus, voir kp_membres_recents(),
   noyau/donnees.php) — même rouge que .nav-pastille/.kpm-item-compteur,
   ajoutée le 24/08/2026 avec la bulle de chat. Jamais affichée à 0 : le
   PHP n'écrit le <span> que si non_lus > 0. */
.mel-badge{
  position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;border-radius:999px;
  background:var(--rouge);color:var(--sur-couleur);font-size:.6rem;font-weight:800;line-height:1;
  border:2px solid var(--papier);box-sizing:content-box;
}
/* Caméra verte « appels vidéo possibles » de la mini-carte — haut à GAUCHE
   de l'avatar, .mel-badge (non-lus) occupant le haut-droit : les deux ne se
   chevauchent jamais. Même coin que sur les cartes de l'annuaire
   (.carte-membre-visio), en plus petit. Toujours présente dans le HTML,
   masquée par [hidden] : le battement (mnbPresence(), assets/kalipay.js)
   n'a qu'à basculer l'attribut. Ajouté le 25/08/2026. */
.mel-visio{
  position:absolute;top:-3px;left:-3px;z-index:1;
  width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.55rem;line-height:1;
  background:var(--sur-vert);border:2px solid var(--vert);box-sizing:content-box;
  filter:grayscale(1) brightness(.9) sepia(1) hue-rotate(78deg) saturate(7);
}
.mel-visio[hidden]{display:none}
/* Rond vert « L » — libre aujourd'hui (28/08/2026). Bas à DROITE de l'avatar :
   les deux coins du haut sont pris (.mel-badge non-lus à droite, .mel-visio
   caméra à gauche). Mêmes couleurs que .fil-carte-libre-rond (fil de l'actu),
   au format 16px des badges de cette carte ; liseré de la couleur de la carte
   (#421821) pour le détacher de la photo. */
.mel-libre{
  position:absolute;bottom:-3px;right:-3px;z-index:1;
  width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--vert);color:var(--sur-vert);border:2px solid var(--carte);box-sizing:content-box;
  font-size:.6rem;font-weight:800;line-height:1;cursor:default;
}

.mel-pseudo{
  display:block;max-width:100%;font-weight:700;color:var(--txt);font-size:.74rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Petit point vert devant le pseudo : rappel visuel du 🟢 déjà utilisé pour
   le filtre « En ligne » de l'annuaire (vues/membres.php). */
.mel-point{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--vert);margin-right:4px;flex:none;vertical-align:middle;
}
/* Le <span> est désormais toujours écrit (voir noyau/sidebar-droite.php) :
   sans cette règle, [hidden] serait ignoré à cause du display:inline-block
   ci-dessus, et tout le monde apparaîtrait en ligne. 25/08/2026. */
.mel-point[hidden]{display:none}

.compteurs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Visiteur non connecte (15/09/2026, voir noyau/sidebar.php) : trois carres
   — membres / evenements a venir / bons plans. « membres » prend toute la
   premiere ligne, les deux autres se partagent la seconde. PC et mobile. */
.compteurs--visiteur .compteur--membres{grid-column:1/-1}
/* 12/10/2026 — PC : 👀 retiré (doublon de l'onglet de droite), 🥂 sorties
   club ajouté. Mobile strictement inchangé. Sur PC le visiteur a donc lui
   aussi 4 carrés : « membres » reprend une seule case (grille 2×2). */
@media (min-width:901px){
  .compteurs .compteur.compteur--mobile-seul{display:none}
  .compteurs--visiteur .compteur--membres{grid-column:auto}
}
@media (max-width:900px){
  .compteurs .compteur.compteur--pc-seul{display:none}   /* 3 classes : bat .compteur.compteur--lien{display:flex} */
}
.compteur{
  background:linear-gradient(160deg,var(--carte-3),var(--fond));
  border:1px solid var(--trait);border-radius:11px;
  padding:6px 10px;text-align:center;
}
.compteur b{display:block;font-family:'Playfair Display',Georgia,serif;font-size:1.9rem;color:var(--or);line-height:1.1}
.compteur small{
  display:block;margin-top:4px;font-size:.68rem;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--txt-2);
}
/* Icône du carré (👥/🎉/👀) : masquée sur PC (chiffre + libellé empilés,
   inchangé), affichée seulement sur mobile — voir le media query plus bas
   et noyau/sidebar.php. Doit rester déclarée AVANT le media query mobile
   (même piège que .seul-mobile plus haut dans ce fichier : à spécificité
   égale, la règle la plus tardive dans le fichier l'emporte). */
.compteur-icone{display:none}

.soiree-mini{
  display:flex;gap:11px;align-items:center;padding:11px 0;
  border-bottom:1px solid var(--trait);
}
.soiree-mini:last-of-type{border-bottom:0}
.soiree-mini-logo{
  width:44px;height:44px;flex:none;border-radius:9px;object-fit:cover;
  border:1px solid var(--trait);background:var(--fond-3);
}
.soiree-mini-vide{
  width:44px;height:44px;flex:none;border-radius:9px;background:var(--fond-3);
  border:1px solid var(--trait);display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.soiree-mini-nom{
  font-weight:700;font-size:.88rem;color:var(--txt);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.soiree-mini-info{font-size:.76rem;color:var(--txt-1);margin-top:2px;display:block}
.soiree-mini-delai{color:var(--or-txt);font-weight:700}
/* 09/10/2026 — agenda mixte de la colonne de gauche : un liseré et une
   étiquette par catégorie (noyau/sidebar.php, kp_agenda_gauche). */
.soiree-mini--evenement,.soiree-mini--club,.soiree-mini--bonplan{
  border-left:4px solid var(--sm-c);padding-left:9px;border-radius:4px;
}
.soiree-mini--evenement{--sm-c:#d6455d}
.soiree-mini--club{--sm-c:#8a4fd1}
.soiree-mini--bonplan{--sm-c:#d9a21b}
.soiree-mini-type{
  display:block;font-size:.66rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;color:var(--sm-c);margin-bottom:1px;
}
.vide-mini{text-align:center;color:var(--txt-2);font-size:.86rem;padding:18px 6px;line-height:1.6}

/* ==========================================================================
   BOUTONS — un lien de navigation est TOUJOURS un bouton
   ========================================================================== */
.bouton{
  display:block;text-align:center;border-radius:10px;padding:12px 16px;
  font-size:.9rem;font-weight:700;letter-spacing:.3px;margin-top:10px;
  transition:transform .12s,box-shadow .12s;
}
.bouton:hover{transform:translateY(-1px);box-shadow:0 5px 14px var(--ombre-couleur)}
.bouton--or{background:linear-gradient(135deg,var(--or),var(--or-fonce));color:var(--sur-or)}
.bouton--rouge{background:var(--accent);color:var(--sur-couleur)}
.bouton--sombre{background:var(--fond-2);color:var(--txt)}
.bouton--clair{background:var(--fond-3);color:var(--txt-1);border:1px solid var(--trait)}
.bouton--centre{display:inline-block;padding:12px 28px}
.bouton--auto{display:inline-block;width:auto;margin-top:0}

.note-petite{font-size:.78rem;color:var(--txt-2);text-align:center;margin-top:10px;line-height:1.65}
.bonjour{font-size:.9rem;color:var(--txt-1);text-align:center;margin:0 0 12px}
.bonjour b{color:var(--or-fonce)}

/* ==========================================================================
   ZONE CENTRALE — contenus communs aux vues
   ========================================================================== */
.bloc-titre{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:bold;font-size:1rem;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--txt);text-align:center;
  padding-bottom:12px;margin-bottom:18px;border-bottom:2px solid var(--trait);
}
/* Variante avec un bouton à droite (annuaire des membres) : titre à gauche,
   action à droite — voir vues/membres.php. */
.bloc-titre--action{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left}

/* Regroupe le bouton « En ligne » et « Filtrer » à droite du titre — voir
   vues/membres.php. Demande du 21/08/2026. */
.bloc-titre-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Nombre de fiches correspondant aux filtres, entre parenthèses après « Les
   membres » (vues/membres.php, $total) — plus discret que le titre : ni
   gras ni majuscules, espacement resserré pour rester lisible malgré le
   letter-spacing hérité de .bloc-titre. Demande du 21/08/2026. */
.mb-titre-compte{
  text-transform:none;font-weight:400;letter-spacing:normal;color:var(--txt-2);
}

/* En-tête de l'annuaire, disposition « B » (17/09/2026) — PC et mobile
   (propositions distinctes, voir les deux @media ci-dessous). */
.mb-lib-long,.mb-pastille,.mb-chevron{display:none}
.mb-reprendre-pc{display:block}
.mb-reprendre-pc[hidden]{display:none}
.mb-reprendre-pc a{
  font-family:'Open Sans',system-ui,sans-serif;font-size:.74rem;font-weight:400;
  letter-spacing:normal;text-transform:none;color:var(--txt-2);
  text-decoration:underline;text-underline-offset:3px;
}
.mb-reprendre-pc a:hover{color:var(--or)}

/* Mobile : titre + « ↩ Derniers filtres », grosse barre « Filtrer les
   membres » (+ 🗺️ rond), puis 4 tuiles En ligne / Free / Nouveaux /
   Distance. Spécificités à 0,2,0 : elles passent devant les règles
   mobiles plus anciennes (.mb-titre-texte masqué, libellés courts…). */
@media (max-width:900px){
  .bloc-titre.bloc-titre--action{display:grid;grid-template-columns:1fr;gap:12px}
  .bloc-titre--action .mb-titre-bloc{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .mb-titre-bloc .mb-titre-texte{display:inline;white-space:nowrap}
  .bloc-titre--action .bloc-titre-actions{display:contents}
  .bloc-titre-actions .mb-outils{display:flex;gap:8px;order:1}
  .bloc-titre-actions .mb-segment{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;order:2}

  .mb-outils .mb-bouton-filtrer{
    flex:1 1 auto;min-width:0;height:44px;border-radius:12px;padding:0 12px;
    background:var(--fond-2);color:var(--txt-2);font-size:.86rem;font-weight:400;gap:8px;
  }
  .mb-bouton-filtrer .mb-lib{display:none}
  .mb-bouton-filtrer .mb-lib-long{display:inline}
  .mb-bouton-filtrer .mb-pastille{
    display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
    margin-left:auto;border-radius:9px;background:var(--or);color:var(--sur-or);
    font-size:.68rem;font-weight:700;
  }
  .mb-bouton-filtrer .mb-chevron{display:inline;color:var(--txt);font-weight:700}
  .mb-bouton-filtrer .mb-lib-long + .mb-chevron{margin-left:auto}
  .mb-outils .mb-bouton-carte{flex:0 0 44px;width:44px;height:44px;padding:0;justify-content:center;border-radius:12px;font-size:1.05rem}
  .mb-bouton-carte .mb-lib{display:none}

  .mb-segment .mbf-toggle--titre{
    width:100%;min-width:0;height:54px;padding:4px 2px;border-radius:12px;
    flex-direction:column;justify-content:center;gap:2px;
    background:var(--fond-2);font-size:.68rem;white-space:nowrap;
    text-transform:none;letter-spacing:normal;
  }
  .mb-segment .mb-ico{font-size:1.05rem;line-height:1}
  .mb-segment .mbf-toggle-etat,.mb-segment .mbf-toggle-court,.mb-segment .mbd-fleche{display:none}
  .mb-segment .mbf-toggle-long,.mb-segment .mb-lib-tuile{
    display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  }
  .mb-segment > .mbd{display:flex;min-width:0}
}

@media (min-width:901px){
  .bloc-titre--action{justify-content:flex-start;gap:18px}
  .mb-titre-bloc{display:flex;flex-direction:column;gap:4px;flex:0 0 auto}
  .bloc-titre-actions{flex:1 1 auto;flex-wrap:nowrap;gap:10px}
  .mb-segment{
    display:inline-flex;align-items:center;gap:2px;padding:3px;
    border-radius:999px;background:var(--fond-2);border:1px solid var(--trait);
  }
  .mb-segment .mbf-toggle--titre{background:transparent;border-color:transparent;padding:7px 12px;white-space:nowrap}
  .mb-segment .mbf-toggle--titre:hover{background:var(--fond-3);border-color:transparent}
  .mb-segment .mbf-toggle--actif{background:var(--vert-voile);border-color:var(--vert);color:var(--vert-txt)}
  .mb-segment .mbf-toggle-etat{display:none}
  .mb-outils{display:flex;gap:8px;margin-left:auto}
  .mb-outils .btn-filtrer{width:38px;height:38px;padding:0;justify-content:center;font-size:1rem}
  .mb-outils .mb-lib{display:none}
}

.btn-filtrer{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  padding:8px 15px;border-radius:999px;
  background:var(--fond-3);color:var(--txt-1);border:1px solid var(--trait);
  font-size:.8rem;font-weight:700;letter-spacing:.2px;text-transform:none;
  cursor:pointer;font-family:inherit;
  transition:background .15s,border-color .15s,color .15s,transform .15s;
}
.btn-filtrer:hover{border-color:var(--or);color:var(--or-fonce);transform:translateY(-1px)}
.chapeau{font-size:.92rem;color:var(--txt-1);text-align:center;line-height:1.7;margin-bottom:18px}
.texte{font-size:.95rem;line-height:1.8;color:var(--txt-1)}

.banniere-accueil{background:linear-gradient(135deg,var(--carte),var(--fond-2));padding:30px 26px;text-align:center}
.banniere-accueil h2{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.5rem;color:var(--or);line-height:1.35;margin-bottom:8px;font-weight:bold;
}
.banniere-accueil p{color:var(--txt-2);font-size:.88rem}

.nouveautes{background:var(--carte);border:1px solid var(--or);border-radius:11px;padding:16px 18px;margin-bottom:22px}
.nouveautes-titre{font-weight:700;color:var(--txt);font-size:.92rem;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.nouveautes ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.nouveautes li{font-size:.88rem;color:var(--txt-1);line-height:1.6;padding-left:18px;position:relative}
.nouveautes li::before{content:'▸';position:absolute;left:0;color:var(--or-txt);font-weight:700}

.section{margin-bottom:26px}
.section:last-child{margin-bottom:0}
.section h3{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.08rem;color:var(--txt);margin-bottom:10px;line-height:1.4;
  display:flex;align-items:center;gap:9px;
}
.section p{font-size:.94rem;line-height:1.8;color:var(--txt-1);margin-bottom:10px}
.section p:last-child{margin-bottom:0}
.section b{color:var(--txt)}

.encadre-zone{
  background:var(--fond-3);border-left:3px solid var(--or);border-radius:0 9px 9px 0;
  padding:14px 18px;margin:14px 0;font-size:.92rem;color:var(--txt-1);line-height:1.7;
}
.separateur{height:1px;background:var(--trait);margin:22px 0}

/* ==========================================================================
   FORMULAIRES (sur carte blanche)
   ========================================================================== */
label{display:block;font-size:.8rem;font-weight:700;color:var(--txt-1);margin:0 0 6px}
.oblig{color:var(--accent)}
.champ{margin-bottom:16px}
input[type=text],input[type=email],input[type=password],select,textarea{
  width:100%;background:var(--fond-3);border:1px solid var(--trait);color:var(--txt);
  border-radius:9px;padding:11px 13px;font-size:.95rem;font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 3px var(--or-voile)}
.champ.erreur input{border-color:var(--accent);background:var(--accent-voile)}
.msg-erreur{color:var(--lien-2);font-size:.8rem;margin:5px 0 0}
.aide{font-size:.78rem;color:var(--txt-2);margin:5px 0 0;line-height:1.55}

/* Compteur de caractères de l'annonce (pop-up d'édition) : rouge sous le
   minimum, vert au-dessus — voir fea_form_annonce() et kalipay.js. */
.fe-compteur{font-size:.78rem;margin:5px 0 0;font-weight:600}
.fe-compteur--bas{color:var(--lien-2)}
.fe-compteur--ok{color:var(--vert-txt)}

.coche{display:flex;align-items:flex-start;gap:10px;font-size:.87rem;color:var(--txt-1);cursor:pointer;font-weight:400}
.coche input{margin-top:3px;accent-color:var(--accent);width:16px;height:16px;flex:none}

.btn{
  width:100%;background:var(--accent);color:var(--sur-couleur);border:0;border-radius:10px;padding:13px 22px;
  font-size:.95rem;font-weight:700;cursor:pointer;font-family:inherit;
}
.btn:hover{background:var(--accent)}
.btn--auto{width:auto;padding:11px 26px}

.rangee{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Le formulaire de filtres vit désormais dans la pop-up .mbf-boite — plus
   besoin de son propre encadré (voir vues/membres.php). */
.form-filtres{margin-bottom:0}
.form-filtres .rangee .champ{margin-bottom:0}
.actions-bas{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}

/* ---- Pop-up des filtres de l'annuaire (vues/membres.php) ----------------
   Même famille que .fe-overlay : posée par le serveur (pas par JS) mais
   simplement masquée par [hidden] — voir la section « Filtres » de
   assets/kalipay.js pour l'ouverture/fermeture. */
.mbf-overlay{
  position:fixed;inset:0;z-index:1300;background:var(--voile);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.mbf-overlay[hidden]{display:none}
.mbf-boite{
  background:var(--carte);border-radius:14px;max-width:480px;width:100%;
  max-height:88vh;max-height:88dvh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 14px 44px var(--ombre-couleur);
}
.mbf-entete{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 20px;border-bottom:1px solid var(--trait);flex:0 0 auto;
}
.mbf-entete b{font-size:1rem;color:var(--txt);font-family:Georgia,'Times New Roman',serif}
.mbf-fermer{background:none;border:0;font-size:1.1rem;line-height:1;color:var(--txt-2);cursor:pointer}
.mbf-fermer:hover{color:var(--txt)}
.mbf-corps{padding:18px 20px;overflow-y:auto;flex:1 1 auto}
.mbf-corps .rangee{margin-bottom:16px}
.mbf-corps .champ{margin-bottom:16px}
.mbf-corps .champ:last-child{margin-bottom:0}
.mbf-bas{padding:14px 20px;border-top:1px solid var(--trait);flex:0 0 auto;display:flex;flex-wrap:wrap;gap:10px;align-items:center}

@media(max-width:560px){.mbf-boite{max-width:100%}}

/* Bouton on/off « Libre aujourd'hui », dans la pop-up de filtres. Même vert
   que .fiche-dispo-jour--actif (disponibilités de la fiche). */
.mbf-toggle{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 14px;border-radius:999px;
  background:var(--fond-3);border:1px solid var(--trait);color:var(--txt-1);
  font-size:.85rem;font-weight:700;cursor:pointer;font-family:inherit;
  transition:background .15s,border-color .15s,color .15s;
}
.mbf-toggle:hover{border-color:var(--or)}
.mbf-toggle-etat{
  width:34px;height:19px;border-radius:999px;background:var(--trait);
  position:relative;flex:0 0 auto;transition:background .15s;
}
.mbf-toggle-etat::after{
  content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;
  border-radius:50%;background:var(--papier);transition:left .15s;
  box-shadow:0 1px 2px var(--ombre-couleur);
}
.mbf-toggle--actif{background:var(--vert-voile);border-color:var(--vert);color:var(--vert-txt)}
.mbf-toggle--actif .mbf-toggle-etat{background:var(--vert)}
.mbf-toggle--actif .mbf-toggle-etat::after{left:17px}

/* Variante compacte du bouton on/off, à côté du titre « Les membres »
   (vues/membres.php) plutôt que dans la pop-up de filtres : même famille que
   .mbf-toggle ci-dessus, resserrée pour s'aligner avec .btn-filtrer juste à
   côté. Demande du 21/08/2026. */
.mbf-toggle--titre{padding:8px 13px;font-size:.8rem;gap:7px}
.mbf-toggle--titre .mbf-toggle-etat{width:30px;height:17px}
.mbf-toggle--titre .mbf-toggle-etat::after{width:13px;height:13px}
.mbf-toggle--titre.mbf-toggle--actif .mbf-toggle-etat::after{left:15px}

/* ==========================================================================
   4 ONGLETS DE LA POP-UP DE FILTRES (vues/membres.php) — Genres / Physique /
   Libre / Critères. Demande du 21/08/2026.

   Même mécanique que .fiche-onglets (assets/kalipay.js, un seul panneau
   visible à la fois) : ici chaque onglet a sa propre teinte, reprise des
   badges déjà utilisés sur les fiches (.badge--couple/femme/homme/trans) —
   aucune nouvelle couleur inventée. Les cases et curseurs, eux, restent dans
   la palette neutre du site (accent-color:#ff4757, comme .coche/.case-mini).
   ========================================================================== */
.mbf-onglets{
  display:flex;gap:4px;padding:0 20px;background:var(--carte);
  border-bottom:1px solid var(--trait);overflow-x:auto;flex:0 0 auto;
}
.mbf-onglet{
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  padding:11px 12px;background:none;border:0;border-bottom:2px solid transparent;
  font-family:inherit;font-size:.82rem;font-weight:700;color:var(--txt-2);
  cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s;
}
.mbf-onglet:hover{color:var(--txt)}
.mbf-onglet--genres.mbf-onglet--actif   {color:var(--violet-txt);border-bottom-color:var(--violet)}
/* « Qui cherche ? » (28/08/2026) : teinte rose des cœurs (.coeur-etat--*),
   voisine du violet « Genres » puisque les deux onglets partagent les mêmes
   12 catégories, mais distincte pour qu'on ne les confonde pas. */
.mbf-onglet--cherche.mbf-onglet--actif  {color:var(--rose-txt);border-bottom-color:var(--rose)}
.mbf-onglet--physique.mbf-onglet--actif {color:var(--bleu-txt);border-bottom-color:var(--bleu)}
.mbf-onglet--libre.mbf-onglet--actif    {color:var(--vert-txt);border-bottom-color:var(--vert)}
.mbf-onglet--criteres.mbf-onglet--actif {color:var(--jaune);border-bottom-color:var(--orange-ambre)}

.mbf-panneau[hidden]{display:none}

/* ---- Mes favoris : 2 onglets 50/50 « Mes favoris » / « Qui m'a ajouté »
   (vues/mes-favoris.php, ajout du 22/08/2026) — même mécanique visuelle que
   .mbf-onglet ci-dessus, mais liens classiques (rechargement serveur,
   ?onglet=) et largeur fixe à 50% plutôt que flex:0 0 auto. -------------- */
.mf-onglets{
  display:flex;border-bottom:1px solid var(--trait);margin:0 0 16px;
}
.mf-onglet{
  flex:1 1 50%;text-align:center;padding:11px 12px;background:none;border:0;
  border-bottom:2px solid transparent;font-family:inherit;font-size:.85rem;
  font-weight:700;color:var(--txt-2);text-decoration:none;cursor:pointer;
  transition:color .15s,border-color .15s;
}
.mf-onglet:hover{color:var(--txt)}
.mf-onglet--actif{color:var(--txt);border-bottom-color:var(--or)}

/* ---- Onglet Genres : puces compactes, plusieurs par ligne -------------
   Remplace l'ancienne liste verticale (une catégorie par ligne, beaucoup de
   place perdue) — demande du 21/08/2026. L'état coché est purement CSS
   (input:checked ~ span) : la puce parent « Tous/Toutes » peut cocher ses
   enfants par script (voir assets/kalipay.js), leur affichage suit quand
   même instantanément, sans JS dédié. */
.mbf-groupe{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--trait)}
.mbf-groupe:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.mbf-puces{display:flex;flex-wrap:wrap;gap:7px 8px}
.mbf-puce{cursor:pointer}
.mbf-puce input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mbf-puce span{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  padding:7px 12px;border-radius:999px;border:1px solid var(--trait);background:var(--fond-3);
  font-size:.8rem;font-weight:600;color:var(--txt-1);
  transition:background .15s,border-color .15s,color .15s;
}
.mbf-puce:hover span{border-color:var(--or)}
.mbf-puce input:checked ~ span{background:var(--or-voile);border-color:var(--or);color:var(--or-txt)}
.mbf-puce input:focus-visible ~ span{outline:2px solid var(--or-txt);outline-offset:2px}
/* La puce « Tous/Toutes », en tête de chaque groupe : plus grasse, et
   teintée comme le badge de catégorie correspondant sur les fiches
   (.badge--couple/femme/homme) une fois cochée — aucune nouvelle couleur
   inventée. */
.mbf-puce--tout span{font-weight:800}
.mbf-puce--couple input:checked ~ span{background:var(--violet-voile);border-color:var(--violet);color:var(--violet-txt)}
.mbf-puce--femme  input:checked ~ span{background:var(--rose-voile);border-color:var(--rose);color:var(--rose-txt)}
.mbf-puce--homme  input:checked ~ span{background:var(--violet-voile);border-color:var(--bleu);color:var(--bleu-txt)}

/* ---- Onglet Physique : curseur d'âge à poignées maison -----------------
   2 grosses poignées (::before agrandit encore la zone cliquable/tactile),
   piste entièrement cliquable — demande du 21/08/2026 (l'ancienne paire de
   <input type="range"> superposés était pénible à saisir). Voir la section
   « Filtres » de assets/kalipay.js pour le glissement/clic/clavier ; la
   valeur réelle vit dans 2 <input type="hidden"> (mb_curseur(),
   vues/membres.php), c'est eux que soumet le formulaire. */
.mbf-curseur{margin-bottom:26px}
.mbf-curseur:last-child{margin-bottom:6px}
.mbf-curseur-tete{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.85rem;font-weight:700;color:var(--txt);margin-bottom:14px;
}
/* « L'âge qui bouge doit être plus visible » (demande du 21/08/2026) : gras,
   plus grand, et la police « premium » déjà utilisée pour le titre de la
   pop-up (.mbf-entete b) plutôt que la police par défaut. */
.mbf-curseur-valeurs{
  font-family:Georgia,'Times New Roman',serif;font-weight:800;font-size:1rem;
  color:var(--txt);font-variant-numeric:tabular-nums;
}
.mbf-curseur-piste{position:relative;height:40px;cursor:pointer;touch-action:none}
.mbf-curseur-piste::before{
  content:'';position:absolute;top:50%;left:0;right:0;height:6px;
  transform:translateY(-50%);border-radius:999px;background:var(--trait);
}
.mbf-curseur-piste::after{
  content:'';position:absolute;top:50%;height:6px;transform:translateY(-50%);
  border-radius:999px;background:var(--or);pointer-events:none;
  left:var(--mbf-min-pct,0%);right:calc(100% - var(--mbf-max-pct,100%));
}
.mbf-curseur-poignee{
  position:absolute;top:50%;width:30px;height:30px;margin-left:-15px;
  transform:translateY(-50%);border-radius:50%;
  background:var(--papier);border:3px solid var(--or);box-shadow:0 2px 6px var(--ombre-couleur);
  cursor:grab;touch-action:none;
}
/* Zone de préhension agrandie sans agrandir le rond visible — plus facile à
   viser à la souris comme au doigt. */
.mbf-curseur-poignee::before{
  content:'';position:absolute;top:50%;left:50%;width:46px;height:46px;
  transform:translate(-50%,-50%);
}
.mbf-curseur-poignee:hover{border-color:var(--or-fonce);transform:translateY(-50%) scale(1.1)}
.mbf-curseur-poignee--actif{cursor:grabbing;box-shadow:0 0 0 7px var(--or-voile)}
.mbf-curseur-poignee:focus-visible{outline:2px solid var(--or-txt);outline-offset:3px}

/* ---- Onglet Libre : jours de la semaine, mêmes ronds que .fiche-dispo-jour
   (kp_disponibilites) — coché = vert, comme les autres filtres actifs de
   cette pop-up. État coché purement CSS (input:checked ~ span), corrigé le
   21/08/2026 : la version précédente posait le fond directement sur le
   <label>, jamais mis à jour au clic (case impossible à sélectionner). */
.mbf-jours{display:flex;gap:8px;flex-wrap:wrap}
.mbf-jour{cursor:pointer}
.mbf-jour input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mbf-jour span{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  border:2px solid var(--trait);color:var(--txt-2);background:var(--fond-3);
  font-size:.82rem;font-weight:700;
  transition:transform .15s ease,background-color .15s ease,border-color .15s ease,color .15s ease;
}
.mbf-jour:hover span{transform:scale(1.08);border-color:var(--vert)}
.mbf-jour input:checked ~ span{background:var(--vert);border-color:var(--vert);color:var(--sur-vert)}
.mbf-jour input:focus-visible ~ span{outline:2px solid var(--or-txt);outline-offset:2px}

/* ---- Onglet Critères : switches on/off + segment Fumeur/Non-fumeur --- */
.mbf-switch{
  display:flex;align-items:center;gap:10px;font-size:.87rem;font-weight:700;
  color:var(--txt-1);cursor:pointer;padding:10px 0;border-bottom:1px solid var(--trait);
}
.mbf-switch:last-child{border-bottom:0}
.mbf-switch input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mbf-switch .mbf-switch-etat{
  width:34px;height:19px;border-radius:999px;background:var(--trait);
  position:relative;flex:0 0 auto;transition:background .15s;
}
.mbf-switch .mbf-switch-etat::after{
  content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;
  border-radius:50%;background:var(--papier);transition:left .15s;
  box-shadow:0 1px 2px var(--ombre-couleur);
}
.mbf-switch input:checked ~ .mbf-switch-etat{background:var(--vert)}
.mbf-switch input:checked ~ .mbf-switch-etat::after{left:17px}
.mbf-switch input:focus-visible ~ .mbf-switch-etat{outline:2px solid var(--or);outline-offset:2px}

.mbf-segment{padding:10px 0;border-bottom:1px solid var(--trait)}
.mbf-segment-titre{display:block;font-size:.87rem;font-weight:700;color:var(--txt-1);margin-bottom:8px}
.mbf-segment-options{display:flex;gap:8px}
.mbf-segment-opt{
  flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 10px;border-radius:999px;border:1px solid var(--trait);background:var(--fond-3);
  color:var(--txt-1);font-size:.83rem;font-weight:700;cursor:pointer;text-align:center;
  transition:background .15s,border-color .15s,color .15s;
}
.mbf-segment-opt input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mbf-segment-opt:hover{border-color:var(--or)}
.mbf-segment-opt--actif{background:var(--or-voile);border-color:var(--or);color:var(--or-txt)}

@media(max-width:560px){
  .mbf-onglets{padding:0 14px}
  .mbf-onglet{padding:10px 9px;font-size:.78rem}
}

.alerte{border-radius:10px;padding:12px 16px;margin-bottom:18px;font-size:.9rem;line-height:1.6}
.alerte--ok{background:var(--vert-voile);border-left:3px solid var(--vert-vif);color:var(--vert-txt)}
.alerte--ko{background:var(--accent-voile);border-left:3px solid var(--rouge-vif);color:var(--lien)}
.alerte--info{background:var(--bleu-voile);border-left:3px solid var(--bleu);color:var(--bleu-txt)}
/* Avertissement « fiche complète obligatoire pour le vote » (23/09/2026) : rouge franc. */
.avert-vote{background:var(--accent-voile);border:1px solid var(--rouge-vif);border-left-width:4px;border-radius:10px;padding:12px 16px;margin:0 0 18px;font-size:.9rem;line-height:1.6;color:var(--rouge-vif);font-weight:600}

.liens-bas{text-align:center;margin-top:16px;font-size:.84rem;color:var(--txt-2)}
.liens-bas a{color:var(--lien);font-weight:700}
.liens-bas a:hover{text-decoration:underline}

/* Fiche : liste de lignes libellé / valeur */
.fiche-lignes{display:flex;flex-direction:column;gap:2px}
.fiche-lignes>div{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--trait)}
.fiche-lignes>div:last-child{border-bottom:0}
.fiche-lignes dt{flex:0 0 160px;font-size:.82rem;font-weight:700;color:var(--txt-2)}
.fiche-lignes dd{font-size:.92rem;color:var(--txt)}

/* Annuaire : 4 colonnes fixes sur les grands écrans (4 × 4 = 16 fiches par
   page, voir PF_PAR_PAGE). On descend par paliers plutôt que de laisser
   auto-fill décider : le nombre de fiches par page est fixe, la grille doit
   l'être aussi pour que les rangées tombent juste. */
.grille-fiches{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1000px){.grille-fiches{grid-template-columns:repeat(3,1fr)}}
/* Mobile : toujours 2 fiches côte à côte, et la liste se prolonge d'elle-même
   par lots de 10 en approchant du bas (défilement continu, section
   « Annuaire » de assets/kalipay.js) — les numéros de page n'ont donc plus
   rien à faire là. Remplace le masquage des fiches 11 à 16 par --limitee
   (demande du 27/08/2026) : plus rien n'est caché, tout arrive en défilant. */
@media(max-width:760px){
  .grille-fiches{grid-template-columns:repeat(2,1fr);gap:12px}
  /* Portées à l'annuaire par le frère « --flux » : sans cela, ces deux
     règles perdaient contre .lien-page-suivante et .pagination, de même
     poids et écrites plus loin dans le fichier. Les porter au frère les
     fait gagner (0,2,0 > 0,1,0) ET épargne les paginations des soirées et
     des favoris, qui n'ont pas de défilement continu de rechange. */
  .grille-fiches--flux ~ .pagination{display:none}
  /* Repli : masqué par le JS dès qu'il prend la main (voir mbFluxLien()),
     remontré si un lot échoue — et seule navigation possible si le
     JavaScript ne tourne pas. */
  .grille-fiches--flux ~ .lien-page-suivante{
    display:block;text-align:center;margin-top:4px;padding:12px;
    border-radius:10px;background:var(--fond-3);color:var(--txt-1);
    border:1px solid var(--trait);text-decoration:none;font-weight:700;font-size:.88rem;
  }
  .grille-fiches--flux ~ .lien-page-suivante:hover{border-color:var(--or);color:var(--or-fonce)}
}
/* « Chargement… » / « Tu as vu tous les membres » sous la grille, posé et
   retiré par assets/kalipay.js. Discret : c'est un état, pas un message. */
.mb-flux-etat{
  margin:12px 0 0;text-align:center;color:var(--txt-2);font-size:.84rem;
}
/* « Charger plus » de l'annuaire sur PC (17/09/2026) : même encart que le
   lien de repli mobile. Activé par le JS (data-mb-pc sur la grille), qui
   masque alors la pagination ; sur mobile, le défilement continu garde la
   main et le bouton reste caché. */
.mb-charger-plus{
  display:block;width:100%;text-align:center;margin-top:14px;padding:12px;
  border-radius:10px;background:var(--fond-3);color:var(--txt-1);cursor:pointer;
  border:1px solid var(--trait);font:inherit;font-weight:700;font-size:.88rem;
}
.mb-charger-plus:hover{border-color:var(--or);color:var(--or-fonce)}
.mb-charger-plus:disabled{opacity:.6;cursor:wait}
.mb-charger-plus[hidden]{display:none}
.grille-fiches--flux[data-mb-pc] ~ .pagination{display:none}
@media(max-width:760px){.mb-charger-plus{display:none}}
.case-annuaire{display:flex;flex-direction:column}
.vide{text-align:center;color:var(--txt-2);padding:26px 10px}
.lien-page-suivante{display:none}

/* Annuaire : carte courte, entièrement cliquable */
.carte-membre{
  display:block;color:inherit;background:var(--fond-3);
  border:1px solid var(--trait);border-radius:12px;overflow:hidden;
  transition:border-color .15s,transform .12s,box-shadow .12s;
}
.carte-membre:hover{border-color:var(--or);transform:translateY(-1px);box-shadow:0 5px 14px var(--ombre-couleur)}

/* Soutien du site (kp_soutiens — voir inscription/soutiens.php) : halo doré
   autour de la carte. Volontairement un box-shadow et NON un border-color :
   le survol prend déjà la bordure en or plein (ligne juste au-dessus), et
   une bordure dorée permanente rendrait la carte d'un soutien impossible à
   distinguer d'une carte survolée. Les deux états se cumulent donc au lieu
   de se marcher dessus — d'où la reprise de l'ombre de survol sur la
   seconde ligne. Ajouté le 19/09/2026. */
.carte-membre--soutien{box-shadow:0 0 0 2px var(--soutien-voile)}
.carte-membre--soutien:hover{box-shadow:0 0 0 2px var(--soutien-voile),0 5px 14px var(--ombre-couleur)}
.carte-membre-photo{position:relative;height:150px;background:var(--papier-fond);overflow:hidden}
.carte-membre-photo img{width:100%;height:100%;object-fit:contain}
/* « Libre aujourd'hui » (kp_disponibilites) — voir fa_carte() dans
   inscription/fiche-affichage.php. Ruban en diagonale dans le coin
   HAUT-DROIT (choix du 31/08/2026) : le mot « LIBRE » seul, en capitales,
   se lit d'un coup d'œil dans la grille ; le jour reste dans l'infobulle.
   Le coin haut-gauche est laissé à la caméra 📹, qui ne bouge pas.
   Les deux extrémités du ruban sortent de la photo et sont coupées par
   l'overflow:hidden de .carte-membre-photo — d'où width/right négatifs. */
.carte-membre-libre{
  position:absolute;top:20px;right:-52px;width:160px;z-index:1;
  transform:rotate(45deg);transform-origin:center;
  padding:4px 0;text-align:center;white-space:nowrap;
  background:var(--vert);color:var(--sur-vert);
  font-size:.82rem;font-weight:900;letter-spacing:1px;text-transform:uppercase;
  box-shadow:0 2px 6px var(--ombre-couleur);
}

/* « NEW » — membre arrivé depuis moins de 10 jours (pf_est_nouveau()).
   Miroir de .carte-membre-libre dans le coin HAUT-GAUCHE (16/09/2026).
   Jaune fixe + texte noir : lisible sur toute photo, tous thèmes.
   La caméra .carte-membre-visio (même z-index, plus loin dans le DOM)
   reste par-dessus. */
.carte-membre-new{
  position:absolute;top:20px;left:-52px;width:160px;z-index:1;
  transform:rotate(-45deg);transform-origin:center;
  padding:4px 0;text-align:center;white-space:nowrap;
  background:#facc15;color:#111;
  font-size:.82rem;font-weight:900;letter-spacing:1px;text-transform:uppercase;
  box-shadow:0 2px 6px var(--ombre-couleur);
}

/* Humeur du moment (kp_humeurs) : badge en bas à droite de la photo,
   uniquement sur la carte de l'annuaire — demande du 23/08/2026. Fond et
   bordure fixes (pas transparents) : la photo derrière peut être claire
   ou sombre, le badge doit rester lisible dans tous les cas. */
.carte-membre-humeur{
  position:absolute;right:8px;bottom:8px;z-index:1;
  width:60px;height:60px;border-radius:50%;
  background:var(--papier-fond);border:3px solid var(--orange);
  box-shadow:0 3px 10px var(--ombre-couleur);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.carte-membre-humeur img{width:44px;height:44px;object-fit:contain}

/* ✈️ Voyage déclaré — bas GAUCHE de la photo (l'humeur est en bas droite).
   Cliquable : assets/voyages.js (data-voyages-url). */
.carte-membre-avion{
  position:absolute;left:8px;bottom:8px;z-index:2;
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;line-height:1;cursor:pointer;
  background:var(--papier-fond);border:2px solid var(--bleu-voile-fort);
  box-shadow:0 2px 6px var(--ombre-couleur);
}
.carte-membre-avion:hover{transform:translateY(-1px)}

/* ✈️ Carte de voyage — onglet Agenda de la fiche, volet « Mes voyages ». */
.fa-voyage{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:12px;
  background:var(--papier-fond);border:1px solid var(--papier-trait)}
.fa-voyage-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.fa-voyage-actions{display:flex;gap:8px;flex:none}
.fa-voyage-actions form{margin:0}
.fa-voyage-icone{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;margin:0;
  border-radius:10px;border:1px solid var(--papier-trait);background:transparent;font-size:1rem;line-height:1;
  cursor:pointer;text-decoration:none;color:inherit}
.fa-voyage-icone:hover{transform:translateY(-1px)}
.fa-voyage-ville{font-size:.95rem;color:var(--papier-txt-1)}
.fa-voyage-dates{font-size:.85rem;color:var(--papier-txt-2)}
.fa-voyage-note{font-size:.8rem;color:var(--papier-txt-3)}
.fa-voyage--termine{opacity:.6}
.fa-voyage--termine .fa-voyage-ville,.fa-voyage--termine .fa-voyage-dates{text-decoration:line-through}

/* Caméra verte — appels vidéo possibles (favoris mutuels + dispo_visio,
   voir vs_peut_appeler_ids() dans inscription/visio.php, posée par
   fa_carte()). Sur la photo, en haut à GAUCHE : le bandeau « Libre
   aujourd'hui » est centré en haut et l'humeur en bas à droite, ce coin est
   le seul entièrement libre. Emoji 📹 teinté vert par filtre CSS plutôt
   qu'un fichier image à ajouter. Pastille sombre derrière : la photo peut
   être claire, un emoji seul s'y perdrait. Demande du 25/08/2026. */
.carte-membre-visio{
  position:absolute;top:8px;left:8px;z-index:1;
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.86rem;line-height:1;
  background:var(--voile-fort);border:2px solid var(--vert);
  box-shadow:0 2px 6px var(--ombre-couleur);
  filter:grayscale(1) brightness(.9) sepia(1) hue-rotate(78deg) saturate(7);
}

.carte-membre-photo--vide{
  display:flex;align-items:center;justify-content:center;
  color:var(--txt-2);font-size:.8rem;background:var(--fond-3);
}
.carte-membre-corps{padding:12px 14px 14px}
.carte-membre-pseudo{font-size:1.05rem;font-weight:700;color:var(--or-txt);margin:0}
.carte-membre-ville{font-size:.84rem;color:var(--txt-2);margin:3px 0 8px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.carte-membre-ville-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Pastille ronde de catégorie (25/09/2026) : remplace le badge texte. */
.carte-membre-cat{flex:none;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;line-height:1;border:1.5px solid transparent}
.carte-membre-cat--couple{background:var(--violet-voile);border-color:var(--violet)}
.carte-membre-cat--femme{background:var(--rose-voile);border-color:var(--rose)}
.carte-membre-cat--homme{background:var(--violet-voile);border-color:var(--bleu)}
.carte-membre-cat--trans{background:var(--jaune-voile);border-color:var(--orange-ambre)}
/* Ligne d'actions : favori, coup de cœur, message — pastilles centrées. */
.carte-membre-actions{display:flex;justify-content:center;gap:12px;margin-top:10px}
.carte-membre-act{width:38px;height:38px;border-radius:50%;background:var(--fond-3);color:var(--txt-2);
  display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;line-height:1;cursor:pointer;
  user-select:none;transition:background-color .15s,color .15s,transform .1s}
.carte-membre-act:hover{background:var(--trait);color:var(--txt-1);transform:translateY(-1px)}
.carte-membre-actions .etoile-favori{margin:0;padding:0;gap:0;font-size:1.3rem}
.carte-membre-actions .etoile-favori--actif{color:var(--or)}
.carte-membre-act .coeur-icone{display:block;width:20px;height:20px;pointer-events:none}

.badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  font-size:.76rem;font-weight:700;white-space:nowrap;border:1px solid transparent;
}
.badge--couple{background:var(--violet-voile);color:var(--violet-txt);border-color:var(--violet)}
.badge--femme {background:var(--rose-voile);color:var(--rose-txt);border-color:var(--rose)}
.badge--homme {background:var(--violet-voile);color:var(--bleu-txt);border-color:var(--bleu)}
.badge--trans {background:var(--jaune-voile);color:var(--jaune);border-color:var(--orange-ambre)}

/* ==========================================================================
   LA FICHE D'UN MEMBRE (vues/fiche.php + inscription/fiche-affichage.php)

   Pleine largeur de la zone centrale, aérée : un bandeau sombre, une
   galerie, puis des sections séparées par de l'air.
   ========================================================================== */
.fiche{
  background:var(--carte);border:1px solid var(--trait);border-radius:14px;overflow:hidden;
  box-shadow:0 4px 18px var(--ombre-couleur);margin-bottom:20px;
}

.fiche-tete{
  background:linear-gradient(135deg,var(--carte),var(--fond-2));
  padding:24px 26px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;border-bottom:2px solid var(--or);
}
.fiche-pseudo{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.7rem;color:var(--or);line-height:1.2;margin:0;letter-spacing:.5px;
}
.fiche-lieu{color:var(--or-papier);font-size:.9rem;margin:6px 0 0;display:flex;align-items:center;gap:6px}

/* Galerie : une grande photo, les autres en rangée à parts égales */
.fiche-photos{display:flex;flex-direction:column;gap:4px;background:var(--trait)}
.fiche-photos .ph{overflow:hidden;display:block;background:var(--papier-fond)}
.fiche-photos .ph img{width:100%;height:100%;object-fit:contain;transition:transform .25s}
.fiche-photos .ph:hover img{transform:scale(1.04)}
.ph--grande{height:400px}

/* ---- Diaporama de la galerie publique (30/08/2026) ----------------------
   .ph-scene empile les cases de toutes les photos, une seule visible. La
   hauteur est portée par la SCÈNE et non plus par .ph--grande : les cases
   sont en position absolue, elles n'ont plus de hauteur propre à donner. */
.ph-scene{position:relative;height:400px;min-width:0}
.ph-scene .ph-case{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .18s ease}
.ph-scene .ph-case.est-active{opacity:1;visibility:visible}
.ph-scene .ph--grande{height:100%}
/* Vignette de la photo affichée : encadrée, les autres légèrement éteintes. */
.ph-vignettes .ph-case--mini .ph{opacity:.62;transition:opacity .15s}
.ph-vignettes .ph-case--mini:hover .ph{opacity:.85}
.ph-vignettes .ph-case--mini.est-active .ph{opacity:1;
  outline:2px solid var(--or);outline-offset:-2px}
.ph-vignettes{display:flex;gap:4px;height:120px}
/* .ph-case : enveloppe de chaque photo (le lien .ph + son bouton de
   réaction .ph-reagir, VOISINS l'un de l'autre — jamais un bouton dans un
   lien, les deux se marcheraient dessus au clic). C'est elle qui est
   maintenant l'élément flexible d'une rangée de vignettes ; .ph--grande,
   lui, garde sa hauteur fixe sans rien changer. */
.ph-case{position:relative}
.ph-vignettes .ph-case{flex:1;min-width:0}
.ph-vignettes .ph-case .ph{display:block;width:100%;height:100%}
.fiche-photos--vide{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:var(--fond-3);color:var(--txt-2);font-size:.85rem;padding:38px 10px;
}
.ph-vide-picto{font-size:30px}

.fiche-corps{padding:26px 26px 28px}

.fiche-section{margin-bottom:26px}
.fiche-section:last-child{margin-bottom:0}
.fiche-soustitre{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.02rem;color:var(--txt);margin:0 0 14px;padding-bottom:8px;
  border-bottom:1px solid var(--trait);display:flex;align-items:center;gap:9px;
  flex-wrap:wrap;
}
/* ---- Actions à droite du titre (ex: Médias — 22/08/2026) ---------------- */
.fiche-soustitre-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Étoiles déclarées */
.notes{display:flex;flex-direction:column;gap:7px}
.note-ligne{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.note-sym{color:var(--or);letter-spacing:3px;font-size:1.05rem;min-width:104px}
.note-txt{color:var(--txt-2);font-size:.88rem}

/* Description : une carte par personne */
.duo-cartes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.duo-carte{background:var(--fond-3);border:1px solid var(--trait);border-radius:12px;padding:16px 18px}
.duo-tete{
  font-weight:700;color:var(--txt);font-size:.95rem;margin-bottom:12px;
  padding-bottom:9px;border-bottom:1px solid var(--trait);
}
.duo-carte--madame .duo-tete{color:var(--rose-txt)}
.duo-carte--monsieur .duo-tete{color:var(--bleu-txt)}

.attrs{display:grid;grid-template-columns:1fr 1fr;gap:13px 18px}
.attr{display:flex;flex-direction:column;gap:2px;min-width:0}
.attr-cle{
  color:var(--txt-2);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
}
.attr-val{font-size:.92rem;font-weight:600;color:var(--txt)}
.attr-val .discret,.attr-val.discret{color:var(--txt-2);font-weight:400;font-style:italic}
/* Ancienneté du dernier test IST/MST — fa_dernier_test_ist(),
   inscription/fiche-affichage.php. Fond pastel plutôt que texte coloré :
   lisible en un coup d'œil dans la grille .attrs. Ajouté le 21/08/2026. */
.test-ist--recent,.test-ist--moyen,.test-ist--ancien{
  display:inline-block;border-radius:6px;padding:1px 8px;
}
.test-ist--recent{background:var(--vert-voile);color:var(--vert-txt)}
.test-ist--moyen {background:var(--orange-voile);color:var(--orange-txt)}
.test-ist--ancien{background:var(--accent-voile);color:var(--lien)}
.test-ist--absent{color:var(--lien-2)}
/* Badge texte « Oui » / « Non » d'une fiche (tabac…). Nommé .badge-oui-non
   depuis le 21/08/2026 : il s'appelait .pastille, comme le rond de présence
   défini bien plus bas — celui-ci, écrit après, l'écrasait et transformait le
   badge en rond de 9 px avec le mot qui débordait. */
.badge-oui-non{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.78rem;font-weight:700}
.badge-oui-non.oui{background:var(--accent-voile);color:var(--lien)}
.badge-oui-non.non{background:var(--vert-voile);color:var(--vert-txt)}

/* PrEP (22/08/2026) : sémantique inversée du badge tabac ci-dessus — ici
   « Oui » est le sens positif (protection), donc vert ; « Non » reste
   neutre, en noir plutôt qu'en rouge alarmant. Classes dédiées .prep-oui/
   .prep-non pour ne pas toucher .badge-oui-non.oui/.non (tabac…). */
.badge-oui-non.prep-oui{background:var(--vert-voile);color:var(--vert-txt)}
.badge-oui-non.prep-non{background:var(--fond-3);color:var(--txt-1)}

/* Annonce */
.annonce{
  background:var(--carte);border-left:3px solid var(--or);border-radius:0 10px 10px 0;
  padding:16px 20px;font-size:.95rem;line-height:1.8;color:var(--txt-1);
  white-space:pre-line;word-wrap:break-word;
}

/* Puces : je cherche / mes envies */
.puces{display:flex;flex-wrap:wrap;gap:8px}
.puce{
  padding:6px 13px;border-radius:999px;font-size:.84rem;font-weight:600;
  background:var(--fond-3);border:1px solid var(--trait);color:var(--txt-1);
}
.puce--cherche{background:var(--violet-voile);border-color:var(--bleu);color:var(--bleu-txt)}
.puce--envie{background:var(--orange-voile);border-color:var(--orange-ambre);color:var(--jaune)}

/* Profils ailleurs */
.liens{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px}
.lien-site{
  display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:11px;
  background:var(--fond-3);border:1px solid var(--trait);color:var(--txt-1);font-size:.9rem;
  transition:border-color .15s,transform .12s;
}
.lien-site:hover{border-color:var(--or);transform:translateY(-1px)}
.lien-nom{font-weight:700}
.lien-fleche{margin-left:auto;color:var(--txt-2)}

/* Visionneuse : la photo cliquée, par-dessus la page, à la taille de l'écran */
/* z-index 1400 : au-dessus de la fenêtre de messagerie (1200). Une pièce
   jointe s'ouvre PAR-DESSUS la conversation, pas derrière elle. */
/* z-index 10000 : au-dessus de TOUT, y compris les pop-up de l'en-tête
   (notifications, coups de cœur, qui a vu ma fiche), qui vivent à 9998/9999.
   Valait 1400 jusqu'au 21/08/2026 : une photo ouverte depuis l'une de ces
   pop-up passait derrière elle. */
.kp-visionneuse{
  position:fixed;inset:0;z-index:10000;background:var(--voile-fort);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:24px;cursor:zoom-out;
}
.kp-visionneuse[hidden]{display:none}
.kp-visionneuse img{
  max-width:94vw;max-height:92vh;max-height:92dvh;width:auto;height:auto;object-fit:contain;
  border-radius:8px;box-shadow:0 18px 50px var(--ombre-forte);
}
.kp-visionneuse-fermer{
  position:absolute;top:16px;right:18px;width:40px;height:40px;border-radius:50%;
  border:0;background:var(--surbrillance);color:var(--sur-couleur);font-size:1.1rem;
  cursor:pointer;font-family:inherit;line-height:1;
}
.kp-visionneuse-fermer:hover{background:var(--accent)}
/* « ✏️ Retoucher » dans la visionneuse (27/08/2026) : n'apparaît que sur
   MES photos d'album (voir ouvrirVisionneuse(), kalipay.js). Placé SOUS la
   photo, dans le flux — d'où flex-direction:column sur .kp-visionneuse et
   le bouton rendu APRÈS l'image. cursor:pointer contre le zoom-out hérité
   de .kp-visionneuse : on ne ferme pas la visionneuse, on ouvre l'éditeur. */
.kp-visionneuse-retoucher{
  flex:0 0 auto;height:40px;padding:0 18px;border-radius:20px;
  border:0;background:var(--surbrillance);color:var(--sur-couleur);font-size:.9rem;
  cursor:pointer;font-family:inherit;line-height:40px;
}
.kp-visionneuse-retoucher[hidden]{display:none}
.kp-visionneuse-retoucher:hover{background:var(--or);color:var(--sur-or)}
/* La bande du bouton est prise sur la hauteur de l'image, uniquement quand
   il est là : une photo sans bouton garde ses 92vh. */
.kp-visionneuse--retouche img{max-height:calc(92vh - 62px);max-height:calc(92dvh - 62px)}
body.kp-fige{overflow:hidden}

/* ==========================================================================
   MA FICHE PROFIL — le formulaire (vues/mon-profil.php)
   ========================================================================== */
input[type=number],input[type=url],input[type=file]{
  width:100%;background:var(--fond-3);border:1px solid var(--trait);color:var(--txt);
  border-radius:9px;padding:11px 13px;font-size:.95rem;font-family:inherit;
}
input[type=number]:focus,input[type=url]:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 3px var(--or-voile)}
input:disabled{background:var(--fond-3);color:var(--txt-2)}
textarea{resize:vertical;min-height:150px;line-height:1.6}

.form-bloc{margin-bottom:26px}
.form-bloc:last-child{margin-bottom:0}
.form-titre{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--or-fonce);
  font-weight:700;margin:0 0 12px;padding-bottom:7px;border-bottom:1px solid var(--trait);
}

.jauge{height:8px;background:var(--trait);border-radius:999px;overflow:hidden;margin:6px 0 8px}
.jauge i{display:block;height:100%;background:linear-gradient(90deg,var(--or-fonce),var(--or));border-radius:999px}

.note-couple{
  background:var(--violet-voile);border-left:3px solid var(--violet);border-radius:0 8px 8px 0;
  padding:11px 14px;font-size:.86rem;color:var(--txt-1);margin:0 0 16px;line-height:1.6;
}
.colonnes-couple{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.col-perso{border:1px solid var(--trait);border-radius:11px;padding:14px}
.titre-perso{margin:0 0 12px;font-size:.9rem;color:var(--txt)}

.etoiles-choix{display:flex;gap:5px;font-size:25px;color:var(--trait);line-height:1;user-select:none}
.etoiles-choix span{cursor:pointer;transition:transform .1s}
.etoiles-choix span:hover{transform:scale(1.15)}
.etoiles-choix .on{color:var(--or)}

/* Petites cases à cocher : « je cherche » et « mes envies » */
.cases-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:3px 12px}
.case-mini{
  display:flex;align-items:center;gap:7px;font-size:.84rem;color:var(--txt-1);
  font-weight:400;cursor:pointer;margin:0;padding:3px 0;line-height:1.35;
}
.case-mini input{width:15px;height:15px;flex:none;margin:0;accent-color:var(--accent);cursor:pointer}
.case-mini:hover{color:var(--txt)}

.palette{
  display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;padding:9px;
  background:var(--fond-3);border:1px solid var(--trait);border-radius:9px;
}
.palette span{cursor:pointer;font-size:17px;padding:3px 5px;border-radius:6px;line-height:1}
.palette span:hover{background:var(--accent-voile)}
.compteur-txt{float:right;font-size:.72rem;color:var(--txt-2);font-weight:400}

.ligne-lien{display:grid;grid-template-columns:170px 1fr;gap:9px;margin-bottom:9px;align-items:center}
.nom-site{display:flex;align-items:center;gap:9px;font-size:.86rem;font-weight:600;color:var(--txt-1)}
.logo-site{
  width:26px;height:26px;border-radius:7px;flex:none;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:13px;color:var(--sur-couleur);letter-spacing:-.5px;
}
/* Les trois dégradés ci-dessous sont les couleurs officielles de sites
   extérieurs (Wyylde, JoyClub, Gleese) : elles ne suivent AUCUN thème, une
   marque garde sa couleur. Seule exception à la règle « plus de couleur en
   dur » avec le bleu PayPal de soirees/_moteur/page.css. */
.lg-wyylde{background:linear-gradient(135deg,#7c3aed,var(--violet))}
.lg-libertic{background:linear-gradient(135deg,var(--accent-fonce),var(--accent-2))}
.lg-spicy{background:linear-gradient(135deg,var(--orange-fonce),var(--orange))}
.lg-joyclub{background:linear-gradient(135deg,#0369a1,#0ea5e9)}
.lg-gleese{background:linear-gradient(135deg,#047857,var(--vert-vif))}

.photos-choix{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.photo-case{
  aspect-ratio:1;border:1.5px dashed var(--trait);border-radius:10px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;color:var(--txt-2);
  font-size:.7rem;text-align:center;gap:3px;position:relative;overflow:hidden;margin:0;
}
.photo-case.remplie{border-style:solid;background:var(--fond-3)}
.photo-case img{width:100%;height:100%;object-fit:contain;display:block;background:var(--papier-fond)}
.photo-case .plus{font-size:19px}
.etiq{
  position:absolute;top:5px;left:50%;transform:translateX(-50%);
  font-size:.52rem;font-weight:800;padding:1px 6px;border-radius:999px;white-space:nowrap;z-index:2;
}
.etiq--principale{background:var(--or);color:var(--sur-or)}
.etiq--attente{background:var(--jaune-ambre);color:var(--sur-or)}
.etiq--refusee{background:var(--rouge-vif);color:var(--sur-couleur)}
.photo-actions{
  position:absolute;bottom:4px;left:4px;right:4px;display:flex;gap:4px;justify-content:center;z-index:2;
}
.photo-actions button{
  border:0;border-radius:6px;padding:3px 8px;font-size:10px;cursor:pointer;
  font-family:inherit;background:var(--voile-fort);color:var(--sur-couleur);width:auto;
}
.photo-actions button:hover{background:var(--or);color:var(--sur-or)}

/* La barre d'actions SOUS la photo (27/08/2026) — demandée pour ne plus
   recouvrir l'image. La case réserve une bande de 24 px en bas : comme
   .photo-case a overflow:hidden et que l'image fait height:100%, elle
   s'arrête d'elle-même juste au-dessus de la bande. Les boutons y sont des
   pictogrammes (le libellé est dans title=) : trois mots ne tiennent pas
   dans une vignette carrée de la grille à 5 colonnes. La classe est posée
   par le rendu (atPhotoCase(), kalipay.js — et vues/mon-profil.php), pas
   par :has(), pour rester lisible partout. */
.photo-case--barre{padding-bottom:24px}
.photo-case--barre .photo-actions{
  bottom:0;left:0;right:0;height:24px;gap:6px;align-items:center;
  background:var(--carte-3);border-top:1px solid var(--trait);padding:0 4px;
}
.photo-case--barre .photo-actions form{margin:0;display:flex}
.photo-case--barre .photo-actions button{
  padding:2px 7px;font-size:12px;line-height:1.2;background:transparent;border-radius:5px;
}
.photo-case--barre .photo-actions button:hover{background:var(--or);color:var(--sur-or)}

/* La croix rouge de suppression, en haut à droite de chaque photo */
.photo-croix{position:absolute;top:5px;right:5px;z-index:3;margin:0}
.photo-croix .croix{
  width:25px;height:25px;padding:0;border:2px solid var(--papier);border-radius:50%;
  background:var(--accent);color:var(--sur-couleur);font-size:.72rem;font-weight:700;line-height:1;
  cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px var(--ombre-couleur);
}
.photo-croix .croix:hover{background:var(--rouge-fonce);transform:scale(1.08)}

/* Glisser-déposer pour réordonner les photos (data-fp-id, kalipay.js). */
.photo-case[draggable]{cursor:grab}
.photo-case--glissee{opacity:.35}

/* ==========================================================================
   ÉDITEUR DE PHOTO (rotation / recadrage / filtre) — assets/kalipay.js
   Même famille que .fe-overlay : créée par JavaScript, hors de la zone
   centrale, avant l'envoi d'une photo choisie sur la fiche.
   ========================================================================== */
/* 10001 : juste au-dessus de la visionneuse (10000), elle-même au-dessus des
   pop-up de l'en-tête (9998/9999). Valait 1500 jusqu'au 21/08/2026. */
.fp-overlay{
  position:fixed;inset:0;z-index:10001;background:var(--voile);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.fp-boite{
  background:var(--carte);border-radius:14px;max-width:480px;width:100%;
  max-height:92vh;max-height:92dvh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 14px 44px var(--ombre-couleur);
}
.fp-entete{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 20px;border-bottom:1px solid var(--trait);flex:0 0 auto;
}
.fp-entete b{font-size:1rem;color:var(--txt);font-family:Georgia,'Times New Roman',serif}
.fp-fermer{background:none;border:0;font-size:1.1rem;line-height:1;color:var(--txt-2);cursor:pointer}
.fp-fermer:hover{color:var(--txt)}
.fp-corps{padding:18px 20px;overflow-y:auto;flex:1 1 auto;text-align:center}

.fp-cadre{
  position:relative;display:inline-block;line-height:0;overflow:hidden;
  border-radius:10px;background:var(--papier-fond);touch-action:none;max-width:100%;
}
.fp-cadre canvas{display:block;max-width:100%;height:auto}

.fp-recadre{
  position:absolute;border:2px solid var(--papier);cursor:move;touch-action:none;
  box-shadow:0 0 0 9999px var(--voile);
}
.fp-poignee{
  position:absolute;width:16px;height:16px;margin:-8px;border-radius:50%;
  background:var(--papier);border:2px solid var(--or);touch-action:none;
}
.fp-poignee[data-fp-poignee="nw"]{top:0;left:0;cursor:nwse-resize}
.fp-poignee[data-fp-poignee="ne"]{top:0;right:0;margin-right:-8px;cursor:nesw-resize}
.fp-poignee[data-fp-poignee="sw"]{bottom:0;left:0;margin-bottom:-8px;cursor:nesw-resize}
.fp-poignee[data-fp-poignee="se"]{bottom:0;right:0;margin:-8px;cursor:nwse-resize}

.fp-outils{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.fp-groupe{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.fp-groupe button{
  border:1px solid var(--trait);border-radius:8px;padding:7px 12px;font-size:.8rem;
  font-weight:700;font-family:inherit;background:var(--fond-3);color:var(--txt-1);cursor:pointer;
  transition:background .15s,border-color .15s;
}
.fp-groupe button:hover{background:var(--trait);border-color:var(--trait-4)}
#fp-rotation button{font-size:1rem;padding:7px 14px}
.fp-filtre-actif{background:var(--or) !important;border-color:var(--or-fonce) !important;color:var(--sur-or) !important}

.fp-aide{margin:14px 0 0;font-size:.78rem;color:var(--txt-2);line-height:1.5}

.fp-bas{
  padding:14px 20px;border-top:1px solid var(--trait);flex:0 0 auto;
  display:flex;gap:10px;
}
.fp-bas .btn{flex:1 1 0}
.fp-btn-annuler{background:var(--fond-3) !important;color:var(--txt-1) !important}
.fp-btn-annuler:hover{background:var(--trait) !important}

@media(max-width:520px){
  .fp-boite{max-width:100%}
}

/* ==========================================================================
   ORGANISER — la charte d'engagement (vues/organiser.php)
   ========================================================================== */
.titre-charte{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.1rem;color:var(--txt);text-align:center;margin:22px 0 10px;
}
.zone-geo{
  background:var(--carte);border:1px solid var(--or);border-radius:9px;
  padding:12px 16px;color:var(--txt);font-size:.86rem;font-weight:700;
  line-height:1.55;text-align:center;margin-bottom:20px;
}
.piliers{display:flex;flex-direction:column;gap:11px;margin-bottom:20px}
.pilier{
  display:flex;gap:13px;align-items:flex-start;
  background:var(--fond-3);border:1px solid var(--trait);border-left:3px solid var(--accent);
  border-radius:9px;padding:13px 15px;
}
.pilier-num{
  flex:0 0 26px;height:26px;border-radius:50%;background:var(--accent);color:var(--sur-couleur);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;
}
.pilier-texte{font-size:.89rem;line-height:1.6;color:var(--txt-1)}
.pilier-texte b{color:var(--txt)}

.diffusion{
  background:var(--bleu-voile);border:1px solid var(--bleu);border-radius:9px;
  padding:15px 17px;margin-bottom:18px;
}
.diffusion-titre{font-weight:800;color:var(--bleu-txt);font-size:.9rem;margin-bottom:7px}
.diffusion p{font-size:.86rem;color:var(--bleu-txt);line-height:1.65;margin:0}
.diffusion-exemple{
  margin-top:11px;padding:10px 13px;background:var(--fond-3);border:1px solid var(--bleu);
  border-radius:7px;font-style:italic;color:var(--txt-1);font-size:.85rem;
}
/* Les règles de la charte (vues/charte.php) : même famille que .pilier, mais
   sans numéro — ce sont des engagements, pas une marche à suivre ordonnée.
   Liseré doré plutôt que rouge : le rouge est réservé aux sanctions. */
.regles{display:flex;flex-direction:column;gap:11px;margin-top:14px}
.regle{
  background:var(--fond-3);border:1px solid var(--trait);border-left:3px solid var(--or);
  border-radius:9px;padding:13px 16px;
  font-size:.89rem;line-height:1.7;color:var(--txt-1);
}
.regle b{color:var(--txt)}

.sanction{
  background:var(--accent-voile);border:1px solid var(--rouge-vif);border-radius:9px;
  padding:13px 16px;color:var(--lien);font-size:.87rem;font-weight:700;
  text-align:center;margin-bottom:20px;
}
/* Dans la charte, le pavé des sanctions est un paragraphe, pas un slogan :
   il se lit aligné à gauche. */
.card-corps > .sanction{text-align:left;line-height:1.7;font-weight:400}
.card-corps > .sanction b{font-weight:800}
.accepter-zone{
  background:var(--vert-voile);border:2px solid var(--vert);border-radius:10px;
  padding:16px 18px;margin-bottom:16px;
}
.accepter-zone .coche{color:var(--vert-txt);font-weight:700;font-size:.9rem}
.pot-de-miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.confirmation{text-align:center}
.coche-ok{
  width:70px;height:70px;border-radius:50%;margin:6px auto 18px;
  background:var(--vert-voile);border:3px solid var(--vert);color:var(--vert-txt);
  display:flex;align-items:center;justify-content:center;font-size:34px;
}

/* ==========================================================================
   SOIRÉES — bannière, grille de cartes (pleine largeur), pagination
   ========================================================================== */
.banniere-soirees{
  background:linear-gradient(135deg,var(--carte),var(--fond-2));
  padding:18px 22px;text-align:center;
}
.banniere-soirees h2{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.15rem;color:var(--or);line-height:1.3;margin-bottom:4px;font-weight:bold;
}
.banniere-soirees p{color:var(--txt-2);font-size:.8rem;margin-top:2px}
.banniere-soirees-warning{
  color:var(--jaune)!important;font-weight:700;
}
.banniere-soirees .mention{
  margin-top:8px;font-size:.72rem;color:var(--txt-2);
  display:inline-flex;align-items:center;gap:6px;
}

.soirees-entete{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:18px;
}
/* white-space:nowrap (21/09/2026) : « Événement » est long, le libellé se
   coupait en deux lignes dès que la zone centrale se resserrait. Les
   boutons gardent donc leur texte sur UNE ligne et, si la place manque
   vraiment, c'est la rangée qui passe à la ligne (.soirees-actions). */
.soirees-entete .bouton{font-size:.82rem;padding:10px 16px;white-space:nowrap}
/* Regroupe « Proposer une soirée » et « Voir la carte » : les deux boutons
   passent à la ligne ENSEMBLE si la place manque, jamais l'un sans l'autre
   (.soirees-entete, lui, les traite comme un seul bloc grâce à ce wrapper). */
.soirees-actions{display:flex;flex-wrap:nowrap;align-items:center;gap:10px}
/* Libelles raccourcis sur mobile (21/09/2026) : voir .soirees-actions
   juste en dessous. Declare AVANT le media query qui l'inverse — a
   specificite egale, c'est la derniere regle du fichier qui gagne. */
.sr-sur-mobile{display:none}

@media(max-width:620px){
  /* 21/09/2026 : les deux boutons restent cote a cote (demande) au lieu de
     passer l'un sous l'autre. Ils se partagent la largeur a parts egales
     (flex:1 1 0, min-width:0 sans quoi un element flex refuse de passer
     sous la largeur de son contenu), le rembourrage se resserre et les
     libelles passent a leur forme courte — « Proposer evenement » et
     « La carte » — ce qui suffit a les tenir sur une ligne des 320 px. */
  .soirees-actions{flex-wrap:nowrap;width:100%}
  .soirees-entete .soirees-actions .bouton{flex:1 1 0;min-width:0;padding:10px 6px;font-size:.76rem}
  .sr-sur-pc{display:none}
  .sr-sur-mobile{display:inline}
}

/* ---- Bons plans : les deux boutons restent cote a cote (28/08/2026) ------
   Exception a la regle juste au-dessus, demandee pour vues/bons-plans.php
   uniquement (classe .soirees-actions--duo posee la-bas, pas sur la page des
   soirees). Les boutons se partagent la largeur a parts egales (flex:1 1 0)
   au lieu de suivre celle de leur texte, et le rembourrage horizontal est
   resserre. Pas de white-space:nowrap : si un intitule ne tient pas, il passe
   sur deux lignes DANS son bouton plutot que de deborder de l'ecran — les
   deux boutons restent sur la meme rangee dans tous les cas.
   min-width:0 : sans lui, un element flex refuse de passer sous la largeur
   de son contenu et le second bouton serait pousse hors du cadre. */
@media(max-width:620px){
  .soirees-actions--duo{flex-wrap:nowrap;width:100%}
  .soirees-entete .soirees-actions--duo .bouton{
    flex:1 1 0;min-width:0;
    padding:10px 8px;font-size:.78rem;
  }
}
.soirees-compte{font-size:.86rem;color:var(--txt-2)}
.soirees-compte b{color:var(--txt)}

/* auto-fill (16/09/2026) : 2 cartes par rangée sur portable, 3 ou plus
   quand la zone centrale s'élargit (Full HD). */
.soirees-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px}
/* minmax(0,1fr) et non 1fr (22/09/2026) : 1fr vaut minmax(auto,1fr), donc une
   carte dont le contenu a une largeur minimale elargit SA colonne — depuis le
   bandeau « Tu organises », la carte de l'organisateur debordait sur l'autre.
   Le plancher a 0 garde les deux colonnes strictement egales. */
@media (max-width:900px){.soirees-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}

.soiree-carte{
  display:flex;gap:14px;align-items:center;
  background:var(--fond-3);border:1px solid var(--trait);border-radius:12px;
  padding:14px;transition:border-color .15s,transform .12s,box-shadow .12s;
}
.soiree-carte:hover{border-color:var(--or);transform:translateY(-1px);box-shadow:0 5px 14px var(--ombre-couleur)}

/* Pastille verte des cartes — raccourci « s'inscrire » (08/09/2026)
   ------------------------------------------------------------------
   La carte est un <a> entier : la pastille, qui est un second lien, ne peut
   pas y etre imbriquee (HTML invalide, clic ambigu). Elle est donc posee a
   cote, dans .carte-enveloppe, qui porte le position:relative et devient
   l'element de la grille a la place de la carte.
   Hauteur (08/09/2026) : la pastille n'est plus collee au bas de la carte
   mais calee JUSTE SOUS la fleche → , donc reperee par rapport au milieu
   (top:50% + la demi-hauteur de la fleche) et non par rapport au bord bas :
   elle garde la meme place quelle que soit la hauteur de la carte, et la
   colonne de droite est libre en dessous de la fleche.
   .soiree-carte--pastille ne sert plus qu'au telephone (voir le @media
   560px), ou la fleche disparait et la pastille redescend dans le coin. */
.carte-enveloppe{position:relative;display:flex;min-width:0}
.carte-enveloppe>.soiree-carte{flex:1;min-width:0}
.carte-pastille{
  position:absolute;right:10px;top:calc(50% + 14px);bottom:auto;z-index:4;
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;text-decoration:none;
  background:linear-gradient(135deg,var(--vert-fonce),var(--vert) 55%,var(--vert-fonce));
  color:var(--sur-vif);border:1px solid var(--vert);
  box-shadow:0 2px 6px var(--ombre-couleur);
  transition:transform .12s,box-shadow .12s,filter .12s;
}
.carte-pastille:hover{transform:scale(1.08);box-shadow:0 4px 10px var(--ombre-couleur);filter:brightness(1.08)}
.carte-pastille:focus-visible{outline:2px solid var(--vert-pale);outline-offset:2px}
.carte-pastille-ico{font-size:.82rem;line-height:1}
/* Deja inscrit : le vert passe en contour, la coche remplace le plus. */
.carte-pastille--inscrit{
  background:transparent;color:var(--vert-txt);border-color:var(--vert);box-shadow:none;
}
.carte-pastille--inscrit:hover{filter:none;box-shadow:0 2px 6px var(--ombre-couleur)}
.soiree-carte-media{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.soiree-carte-logo{
  width:64px;height:64px;flex:none;border-radius:50%;object-fit:cover;
  border:2px solid var(--or-voile-fort);background:var(--papier);
}
.soiree-carte-vide{
  width:64px;height:64px;flex:none;border-radius:50%;background:var(--papier);
  border:2px solid var(--or-voile-fort);display:flex;align-items:center;justify-content:center;font-size:1.4rem;
}
.soiree-carte-corps{min-width:0;flex:1}
.soiree-carte-titre{
  font-family:Georgia,'Times New Roman',serif;font-weight:bold;font-size:1.02rem;
  color:var(--txt);line-height:1.3;margin-bottom:6px;
}
.soiree-carte-ligne{
  display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--txt-1);margin-top:3px;
}
.soiree-carte-categorie{
  display:inline-block;background:var(--carte);color:var(--txt);
  border:1px solid var(--or);border-radius:999px;font-size:.7rem;font-weight:700;
  padding:2px 10px;letter-spacing:.3px;text-align:center;
}
.soiree-carte-delai{color:var(--or-fonce);font-weight:600}
/* Inscrits d'une carte (31/08/2026) : total dore, puis une pastille par
   categorie. Les pastilles s'additionnent toujours au total — voir
   bp_participants_repartition_lot() (noyau/bons-plans-donnees.php) et
   sr_participants_repartition_lot() (noyau/soirees-donnees.php). Classes
   neutres : la meme presentation sert aux bons plans ET aux soirees. */
.carte-repart{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;min-width:0;
  margin-top:5px;font-size:.76rem;white-space:nowrap}
/* Total sous la vignette (31/08/2026) : le chiffre en gros, le mot dessous.
   Le total a quitte la ligne de repartition, qui ne porte plus que les
   categories - il n'etait plus utile de l'ecrire deux fois. */
.media-bloc{display:flex;flex-direction:column;align-items:center;line-height:1.05}
.media-bloc-chiffre{font-family:Georgia,'Times New Roman',serif;font-size:1.15rem;font-weight:800;color:var(--or-txt)}
.media-bloc-mot{font-size:.62rem;font-weight:700;color:var(--txt-2);letter-spacing:.4px;text-transform:uppercase}
.carte-repart-part{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:999px;
  background:var(--fond-2);border:1px solid var(--trait-2);color:var(--txt-1);font-weight:700;flex:none}
.soiree-carte-fleche{flex:none;color:var(--or);font-size:1.3rem;font-weight:bold}

/* ---- Carte TERMINÉE (29/08/2026) ---------------------------------------
   Bons plans et soirées dont la date est passée depuis le lendemain 2 h du
   matin : la carte reste en liste, tout en bas, grisée et barrée d'un ruban
   en travers, jusqu'à ce qu'un administrateur la retire. Le ruban est posé
   sur la carte elle-même (position:absolute) : l'atténuation porte sur les
   trois blocs de contenu, jamais sur le conteneur, sinon le ruban pâlirait
   avec eux. */
.soiree-carte--termine{position:relative;overflow:hidden;border-color:var(--trait-3);background:var(--carte)}
.soiree-carte--termine:hover{transform:none;box-shadow:none;border-color:var(--trait-4)}
.soiree-carte--termine .soiree-carte-media,
.soiree-carte--termine .soiree-carte-corps,
.soiree-carte--termine .soiree-carte-fleche{opacity:.4;filter:grayscale(.85)}
.soiree-carte--termine .soiree-carte-titre{text-decoration:line-through}

/* Stand-by (06/09/2026) : soirée encore en préparation. Elle ne sort de
   l'ombre que pour l'équipe (administrateur, modérateur) et pour son
   organisateur — même carré grisé qu'une soirée terminée, mais titre non
   barré (rien n'est fini) et ruban neutre au lieu du ruban rouge. */
.soiree-carte--standby{position:relative;overflow:hidden;border-color:var(--trait-3);background:var(--carte)}
.soiree-carte--standby:hover{transform:none;box-shadow:none;border-color:var(--trait-4)}
.soiree-carte--standby .soiree-carte-media,
.soiree-carte--standby .soiree-carte-corps,
.soiree-carte--standby .soiree-carte-fleche{opacity:.4;filter:grayscale(.9)}
.carte-ruban--standby{background:rgba(20,24,32,.82);color:#fff}

/* ---- Événement secret (21/09/2026) --------------------------------------
   Une soirée secrète n'apparaît dans cette liste qu'aux invités, à son
   organisateur et aux administrateurs (voir vues/soirees.php) : elle se
   repère désormais d'un coup d'œil, liseré violet + pastille.
   Liseré posé en box-shadow, comme .carte-membre--soutien : la bordure
   reste libre pour le survol (qui la passe à l'or) et la mise en page ne
   bouge pas d'un pixel. */
.soiree-carte--secrete{box-shadow:0 0 0 2px var(--violet)}
.soiree-carte--secrete:hover{box-shadow:0 0 0 2px var(--violet),0 5px 14px var(--ombre-couleur)}
/* display:block + width:max-content : les enfants de .soiree-carte-corps sont
   des <span>, la pastille resterait collée au titre sur la même ligne. */
.soiree-carte-secret{
  display:block;width:max-content;max-width:100%;margin:0 0 6px;
  padding:2px 9px;border-radius:999px;
  background:var(--violet-voile);color:var(--violet-txt);
  border:1px solid var(--violet);
  font-size:.7rem;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
}
.carte-ruban{
  position:absolute;left:50%;top:50%;width:160%;
  transform:translate(-50%,-50%) rotate(-11deg);
  background:var(--rouge-voile-fort);color:var(--sur-couleur);
  font-family:Georgia,'Times New Roman',serif;font-weight:bold;
  font-size:.92rem;letter-spacing:.28em;text-transform:uppercase;text-align:center;
  padding:6px 0;pointer-events:none;z-index:3;
  border-top:1px solid var(--blanc-voile);border-bottom:1px solid var(--blanc-voile);
  box-shadow:0 2px 10px var(--ombre-couleur);
}
@media (max-width:540px){
  .carte-ruban{font-size:.78rem;letter-spacing:.2em;padding:4px 0}
}

/* ---- Bandeau « Tu organises » (21/09/2026) ------------------------------
   Sur « Les événements », l'organisateur repère ses propres cartes d'un coup
   d'oeil : un bandeau doré collé sur le haut de la carte, avec un lien
   « Modifier » vers la gestion de la soirée.
   Il est posé HORS du <a> de la carte (deux liens imbriqués seraient du HTML
   invalide) : .carte-enveloppe passe en colonne, le bandeau devient son
   premier enfant et la carte garde toute la largeur en dessous. Les angles
   hauts de la carte sont redressés pour que les deux ne fassent qu'un bloc.
   La pastille verte ne coexiste jamais avec ce bandeau (une carte qu'on
   organise n'affiche pas le raccourci « s'inscrire »), rien à arbitrer. */
.carte-enveloppe--mienne{flex-direction:column}
.carte-bandeau-mien{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:5px 12px;border-radius:12px 12px 0 0;
  background:var(--or-voile);border:1px solid var(--or);border-bottom:none;
  color:var(--or-txt);font-size:.7rem;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;line-height:1.3;min-width:0;
}
.carte-bandeau-mien-texte{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.carte-bandeau-mien-lien{
  flex:none;white-space:nowrap;text-decoration:none;color:var(--or-txt);
  border:1px solid var(--or);border-radius:999px;padding:1px 10px;
  background:var(--carte);transition:filter .12s;
}
.carte-bandeau-mien-lien:hover{filter:brightness(1.12);text-decoration:underline}
.carte-bandeau-mien-lien:focus-visible{outline:2px solid var(--or);outline-offset:2px}
/* Liseré doré + angles hauts droits : la carte prolonge le bandeau. */
.soiree-carte--mienne{border-radius:0 0 12px 12px;border-color:var(--or)}
/* Une carte terminée ou en stand-by garde son gris : le bandeau suffit à la
   signaler comme sienne, on ne repasse pas la bordure en or par-dessus. */
.soiree-carte--mienne.soiree-carte--termine,
.soiree-carte--mienne.soiree-carte--standby{border-color:var(--trait-3)}
@media (max-width:540px){
  .carte-bandeau-mien{font-size:.64rem;padding:4px 10px}
}

/* ---- Bandeau « terminé » en tête d'une page (bon plan, soirée) ---------- */
.bandeau-termine{
  display:flex;align-items:center;gap:10px;
  background:var(--rouge-voile);border:1px solid var(--rouge-voile-fort);
  border-left:5px solid var(--rouge-tres-fonce);border-radius:10px;
  padding:12px 14px;margin:0 0 16px;
  color:var(--txt);font-size:.9rem;line-height:1.45;
}
.bandeau-termine b{font-family:Georgia,'Times New Roman',serif;letter-spacing:.06em;text-transform:uppercase}

/* Lu par les lecteurs d'écran, invisible à l'œil — le ruban « Terminé » est
   décoratif (aria-hidden), l'information passe par ce texte. */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Bloc « qui y va » d'un bon plan terminé : plus d'invitation, ton atténué. */
.bp-page-participants--termine{opacity:.75}

.pagination{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:6px;margin-top:26px;
}
.pagination a,.pagination button,.pagination span{
  min-width:38px;height:38px;padding:0 8px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.86rem;font-weight:700;
}
.pagination a,.pagination button{
  background:var(--fond-3);color:var(--txt-1);border:1px solid var(--trait);font-family:inherit;cursor:pointer;
}
.pagination a:hover,.pagination button:hover{border-color:var(--or);color:var(--or-fonce)}
.pagination .courante{background:linear-gradient(135deg,var(--or),var(--or-fonce));color:var(--sur-or)}
.pagination .points{color:var(--txt-2);font-weight:400}

@media (max-width:560px){
  .soirees-grille{gap:8px}
  .soiree-carte{
    flex-direction:column;text-align:center;gap:4px;padding:10px 8px;
  }
  .soiree-carte-logo,.soiree-carte-vide{width:40px;height:40px;font-size:1.1rem}
  .soiree-carte-corps{width:100%}
  .soiree-carte-titre{font-size:.8rem;margin-bottom:2px}
  .soiree-carte-ligne{font-size:.68rem;justify-content:center;flex-wrap:wrap;gap:3px}
  .soiree-carte-categorie{font-size:.6rem;padding:1px 7px}
  .soiree-carte-fleche{display:none}
  /* Telephone (21/09/2026) : la carte est centree (text-align:center
     ci-dessus), mais deux elements y echappaient — ils ne sont pas du
     texte simple. La pastille « Secret » est un bloc a largeur de contenu
     (marges auto pour la recentrer) et la ligne de repartition des
     inscrits est une boite flex (justify-content). */
  .soiree-carte-secret{margin-left:auto;margin-right:auto}
  .carte-repart{justify-content:center;flex-wrap:wrap;white-space:normal}
  /* Telephone (08/09/2026) : la carte passe en colonne, texte centre, et la
     fleche → disparait — la pastille remonte donc dans le coin HAUT droit,
     seul angle libre (le logo est centre, le texte commence dessous). Elle
     retrecit un peu au passage. Aucun rembourrage a reserver en bas. */
  .carte-pastille{width:26px;height:26px;right:7px;top:7px;bottom:auto}
  .carte-pastille-ico{font-size:.74rem}
}

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
.pied{text-align:center;color:var(--txt-2);font-size:.82rem;line-height:1.9;padding:22px 10px 0}
.pied b{color:var(--or);letter-spacing:1.5px}
.pied-cookies{font-size:.7rem;color:var(--txt-2);opacity:.8;margin-top:2px}

/* .seul-mobile masqué par défaut (PC) : doit être déclaré AVANT le media
   query ci-dessous qui le réaffiche sur mobile (.seul-mobile{display:inline}).
   Corrigé le 20/08/2026 : cette règle était après le media query (dans la
   section « bandeau-connecte », plus bas dans le fichier), donc gagnait
   sur l'override mobile à spécificité égale (ordre du fichier) — .seul-mobile
   restait invisible même sur mobile. Utilisé pour « Ton espace t'attend
   juste au-dessus » (vues/accueil.php) et les textes courts des carrés de
   La communauté (noyau/sidebar.php). */
.seul-mobile{display:none}

/* Bouton menu ⋮ de l'entête (ex-icône « Mon espace », noyau/entete.php) +
   bouton fermer de la pop-up #me-overlay (noyau/sidebar-droite.php) :
   masqués par défaut (PC — la carte #me-overlay s'y affiche normalement
   dans la colonne de droite, Aide/Centre de gestion gardent leur propre
   icône, ce bouton ferait doublon). Doivent être déclarés AVANT le media
   query mobile ci-dessous pour que celui-ci les réaffiche sur mobile (même
   piège que .seul-mobile plus haut : à spécificité égale, la règle la plus
   tardive dans le fichier l'emporte). Demande du 20/08/2026, renommé
   .nav-lien--me → .nav-lien--menu le 23/08/2026 (le bouton n'ouvre plus
   directement #me-overlay, il ouvre la pop-up #menu-overlay ci-dessous, qui
   contient l'entrée « Mon espace »). */
.nav-lien--menu{display:none}
.me-fermer{display:none}

/* Bouton « Se connecter » sous « La communauté » (noyau/sidebar.php) : masqué
   par défaut (PC — la carte « Rejoindre » y suffit déjà, ce bouton ferait
   doublon), réaffiché seulement sur mobile ci-dessous. Même piège que
   .seul-mobile/.nav-lien--menu juste au-dessus : doit être déclaré AVANT le
   media query mobile pour que celui-ci l'emporte. Demande du 21/08/2026. */
.cta-connexion-mobile{display:none}

/* ---- Pop-up du menu ⋮ (23/08/2026, corrigé le même jour) ----------------
   Regroupe Aide, Mon espace/Rejoindre, Paramètres et Centre de gestion
   (noyau/entete.php, #menu-overlay) — ouverte/fermée en JS (kalipay.js,
   data-menu-ouvrir/data-menu-fermer). Même famille que #mbf-overlay
   (pop-up des filtres de l'annuaire, plus haut dans ce fichier) :
   position:fixed, DONC déclarée ici, HORS media query — contrairement à
   .nav-lien--menu juste au-dessus, ce n'est pas une histoire d'écran mais
   de pile d'empilement (voir plus bas). display:none par défaut (fermée) à
   toutes les tailles d'écran : une première version de cette règle vivait
   PAR ERREUR dans le media query mobile ci-dessous — sans elle, #menu-overlay
   utilisait le display:block par défaut d'un <div> sur PC, restant VISIBLE
   EN PERMANENCE en haut de l'en-tête (retour du 23/08/2026 : « ça a changé
   la version PC »). Sans incidence pratique sur ce fichier : le bouton qui
   ouvre cette pop-up (.nav-lien--menu ci-dessus) reste de toute façon
   masqué sur PC, donc .menu-ouvert n'y est jamais posée par le JS — mais le
   display:none PAR DÉFAUT doit, lui, être garanti à toutes les tailles.
   Remplace une première version en menu déroulant (position:absolute ancré
   sous le bouton) : recouverte par le contenu de la colonne de gauche (La
   communauté) sur mobile — un souci de pile d'empilement propre à ce
   gabarit à trois colonnes. position:fixed échappe au problème : se
   positionne par rapport à la fenêtre, jamais par rapport à un ancêtre.
   Boutons de la liste : classes .bouton/.bouton--clair déjà stylées (plus
   haut dans ce fichier) plutôt qu'une classe propre à ce menu. */
.menu-overlay{
  display:none;position:fixed;inset:0;background:var(--ombre-forte);
  z-index:9998;align-items:center;justify-content:center;padding:16px;
}
.menu-overlay.menu-ouvert{display:flex}
.menu-boite{
  position:relative;background:var(--carte);border-radius:12px;
  max-width:360px;width:100%;max-height:86vh;max-height:86dvh;overflow-y:auto;
  box-shadow:0 12px 40px var(--ombre-couleur);
  padding:38px 18px 18px;
}
/* padding-top ci-dessus (38px) : le bouton ✕ occupe 8-40px depuis le haut de
   la boîte (top:8px + 32px de hauteur) — avec les 20px d'origine plus les
   8px de margin-top de .menu-liste juste en dessous, le premier bouton de la
   liste démarrait à 28px et se faisait recouvrir par le ✕ sur 12px. Bug visible
   dès l'ouverture du menu ☰ sur mobile (menu sans titre, donc rien d'autre
   pour créer l'écart). Trouvé le 07/09/2026. */
.menu-fermer{
  position:absolute;top:8px;right:8px;z-index:1;
  width:32px;height:32px;border:0;border-radius:999px;
  background:var(--surbrillance);font-size:1rem;line-height:1;cursor:pointer;
}
.menu-liste{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.menu-liste .bouton{margin-top:0}
/* ⏻ (U+23FB) n'existe dans aucune police livree avec Android, iOS ni
   Windows : aucune pile de font-family ne le fait apparaitre. Il est donc
   dessine en SVG inline (.menu-ico, noyau/entete.php et
   noyau/sidebar-droite.php) — trait en currentColor, donc suit la couleur du
   bouton et tous les themes sans retouche. Corrige le 12/09/2026. */
.menu-ico{width:1em;height:1em;flex:0 0 auto;vertical-align:-.125em}

/* ==========================================================================
   PETITS ÉCRANS
   ========================================================================== */
@media (max-width:900px){
  /* Les deux colonnes latérales passent avant la zone centrale sur mobile :
     l'ordre gauche puis droite suit l'ordre du HTML (voir noyau/layout.php),
     départagé par order:-1 sur les deux. */
  .col-gauche,
  .col-droite{order:-1}

  /* ---- Colonne de droite : plus de display:none forcé (23/08/2026) ------
     Avant la refonte PC du 23/08/2026, ses trois cartes (Soirées en cours,
     Organiser, La charte) étaient déjà toutes en carte-masquee-mobile — ce
     display:none ne faisait donc que renforcer ce qui l'était déjà. Depuis
     que ces trois cartes sont passées en colonne de gauche (noyau/sidebar.php)
     et que Mon espace / Rejoindre (#me-overlay) a pris leur place ici
     (noyau/sidebar-droite.php), le garder aurait aussi masqué #me-overlay :
     sa pop-up mobile, ouverte depuis l'icône de l'entête, en dépend comme
     conteneur. Retiré : #me-overlay gère déjà seul sa propre visibilité sur
     mobile (display:none par défaut, display:flex via .me-ouvert, voir plus
     bas) — la colonne, elle, reste vide et sans épaisseur tant que rien n'y
     est ouvert. */

  /* ---- En-tête ET « La communauté » fixes, seule la zone centrale défile
     (demande du 20/08/2026) --------------------------------------------
     Même principe que sur ordinateur (≥901px, voir plus haut dans ce
     fichier) : .kali-page devient une colonne flex de la hauteur de
     l'écran, l'en-tête et la colonne de gauche gardent leur hauteur
     naturelle (flex:none) et c'est #zone-centrale qui reçoit tout l'espace
     restant avec son propre ascenseur.
     Un simple position:sticky ne suffisait pas ici : sa carte « collée »
     (.col-gauche) n'a pour conteneur que le <aside> qui l'entoure, haut
     d'à peine plus que la carte elle-même une fois Mon espace/Rejoindre
     sorti dans sa pop-up (#me-overlay) — rien à « traverser » en
     défilant, donc rien ne restait visible. En repoussant tout le
     défilement dans #zone-centrale, l'en-tête et la colonne de gauche
     n'ont simplement plus jamais à défiler : plus besoin de sticky ni de
     mesurer quoi que ce soit en JS. */
  html{height:100%}
  /* 100dvh, pas 100vh : sur mobile, 100vh vaut la hauteur écran barre d'URL
     RÉTRACTÉE — le bas de la zone centrale passait donc sous cette barre.
     100dvh suit la hauteur réellement visible. 100vh reste écrit juste
     avant, comme repli pour les navigateurs qui ignorent dvh (ils prennent
     la dernière déclaration qu'ils comprennent). Corrigé le 27/08/2026. */
  /* min-height:0 — INDISPENSABLE, corrige le 06/09/2026. Le bloc BASE de ce
     fichier pose body{min-height:100vh}. Or min-height l'emporte sur height :
     des que 100vh depasse 100dvh — c'est-a-dire des que la barre d'URL du
     telephone est comptee hors du viewport — <body> gardait la hauteur du
     GRAND viewport. Mesure sur telephone : 100vh=725 contre dvh=669, soit
     56px de trop. .kali-page{height:100%} descendait d'autant SOUS l'ecran,
     et le bas de la zone centrale passait derriere le bandeau du bas (bas de
     fiche tronque, rangee 🙂/🔗/📎 d'une conversation invisible).
     Le piege est permanent ici : body{overflow:hidden} empeche tout
     defilement, donc la barre d'URL ne se retracte jamais et l'ecart ne se
     resorbe jamais non plus. */
  body{height:100vh;height:100dvh;min-height:0;overflow:hidden}
  .kali-page{display:flex;flex-direction:column;height:100%;max-height:100%}
  header.card{flex:none}
  /* Fusionne avec le padding-top de .fil-composer-carte (voir plus bas) :
     sans ce reset, les deux 5px s'additionnaient a 10px sur cette carte
     precise - voir header.card{margin-bottom:0} en grille PC, meme motif. */
  header.card:has(~ #colonnes .fil-composer-carte){margin-bottom:0}
  .pied{display:none}
  #colonnes{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
    gap:0;
    /* .colonnes{align-items:start} (base, plus haut dans ce fichier) vise le
       grid PC — en grid, align-items joue sur la hauteur (axe vertical),
       sans effet sur la largeur des colonnes (fixée par grid-template-
       columns). En flex colonne (ici, mobile), align-items joue au
       contraire sur l'axe TRANSVERSAL, donc horizontal : sans cette
       correction, chaque colonne ne prenait que la largeur de son propre
       contenu au lieu de remplir #colonnes — c'est ce qui empêchait la
       carte « La communauté » d'atteindre la pleine largeur malgré
       #colonnes déjà à 100vw ci-dessous. */
    align-items:stretch;
  }
  .col-gauche{flex:none}
  .col-centre{flex:1 1 auto;min-height:0;overflow-y:auto}

  /* ---- Colonne de gauche (« La communauté ») pleine largeur (20/08/2026) -
     .kali-page limite tout à 1120px et body.padding ajoute des marges de
     chaque côté : sans rien faire, la carte reste dans ce cadre. Même
     astuce que header.card/#colonnes en grand écran plus haut dans ce
     fichier (width:100vw + marges négatives calculées depuis la largeur de
     l'ÉCRAN, pas celle du parent) — mais posée sur #colonnes lui-même,
     pas sur la carte : #colonnes a overflow:hidden (ci-dessus, nécessaire
     pour que .col-centre reste seule à défiler) et aurait tronqué tout
     débordement d'un enfant. En élargissant #colonnes en entier, la
     colonne de gauche (flex:none, prend toute la largeur de #colonnes) en
     profite directement, sans rien devoir déborder.
     .col-centre reprend en compensation le padding que body{padding} lui
     donnait avant : sans ça, son propre contenu se retrouverait lui aussi
     collé aux bords, ce qui n'a pas été demandé. */
  #colonnes{
    width:100vw;
    margin-left:calc(-50vw + 50%);
    margin-right:calc(-50vw + 50%);
  }
  .col-centre{padding-left:16px;padding-right:16px}

  /* ---- Cartes bord à bord sur mobile (24/08/2026) ------------------------
     Demande : toutes les cartes de la zone centrale + l'en-tête collées aux
     bords de l'écran, comme la colonne de gauche (« La communauté ») déjà
     ci-dessus. header.card : même astuce que #colonnes/header.card en grand
     écran (≥1460px, plus bas dans ce fichier). Cartes de .col-centre :
     marge négative égale au padding qu'on vient de lui redonner, pour
     annuler juste l'inset de LA CARTE (le texte hors carte garde son
     padding). Coins arrondis retirés (border-radius:0) : au bord réel de
     l'écran, l'arrondi ne se voyait plus proprement — inclut la colonne de
     gauche (« La communauté »), déjà bord à bord avant ce correctif. */
  header.card{
    width:100vw;
    margin-left:calc(-50vw + 50%);
    margin-right:calc(-50vw + 50%);
  }
  /* .fiche (fiche membre) et .kp-bandeau-admin (message admin, accueil) :
     mêmes cadres blancs que .card mais avec leur propre classe CSS — pas
     couverts par le sélecteur .card ci-dessus, ajoutés ici (24/08/2026). */
  .col-centre .card,
  .col-centre .fiche,
  .col-centre .kp-bandeau-admin,
  .col-centre .cf-bandeau{margin-left:-16px;margin-right:-16px}
  header.card,
  .col-gauche .card,
  .col-centre .card,
  .col-centre .fiche,
  .col-centre .kp-bandeau-admin,
  .col-centre .cf-bandeau{border-radius:0}

  /* ---- Écart quasi nul entre la colonne de gauche et la zone centrale ---
     La marge sous la dernière carte VISIBLE de la colonne de gauche est
     mise à 0 pour coller la zone centrale juste en dessous — ciblé sur
     toutes les cartes de la colonne plutôt que sur .carte-derniere-gauche
     seulement depuis que Mon espace / Rejoindre est sorti de la colonne
     sur mobile (pop-up #me-overlay, voir plus bas). */
  .col-gauche .card{margin-bottom:0}

  /* ---- Colonne de gauche en accordéon (mobile uniquement) ----------------
     Case à cocher cachée + <label> (le .mini-titre) : repliée par défaut,
     un tap sur le titre déplie la carte. Rien de tout ceci n'existe pour le
     CSS en dehors de ce media query : sur PC .accordeon-contenu est un <div>
     ordinaire, toujours affiché, comportement 100% inchangé. */
  .accordeon-titre{cursor:pointer;user-select:none}
  .accordeon-titre::after{
    content:'▾';font-size:.75rem;color:var(--txt-2);transition:transform .15s;
  }
  .accordeon-case:checked ~ .accordeon-titre::after{transform:rotate(180deg)}
  .accordeon-contenu{display:none}
  .accordeon-case:checked ~ .accordeon-contenu{display:block}

  /* ---- Cartes masquées sur mobile (Organiser, Le cadre) -------------------
     Toujours présentes dans le HTML (page et bouton restent accessibles
     ailleurs), simplement retirées de l'affichage sur petit écran. */
  .carte-masquee-mobile{display:none}

  /* ---- Colonne de droite à deux onglets (12/09/2026) ---------------------
     Sur mobile, cette carte n'est plus dans la colonne : c'est la pop-up
     ouverte par l'icône 👤 de l'entête (#me-overlay). Elle n'y montre que
     « Mon espace » — les onglets et le panneau des membres sont retirés,
     comme l'était la carte « Les membres » avant la fusion
     (.carte-masquee-mobile ci-dessus) : le découpage mobile n'a toujours pas
     été revu. Sélecteurs par id : ils doivent l'emporter sur
     .od-panneau[hidden] et sur ce que le JavaScript des onglets a pu poser. */
  .od-onglets{display:none}
  #od-p-membres{display:none}
  #od-p-coeurs{display:none}
  #od-p-espace[hidden]{display:block}

  /* ---- CTA connexion : visible seulement ici (voir plus haut dans ce
     fichier, avant ce media query). Demande du 21/08/2026. */
  .cta-connexion-mobile{display:block}

  /* ---- Titre « Les membres » masqué sur mobile (vues/membres.php) --------
     Laisse la place aux boutons « En ligne »/« Libre »/« Filtrer », seuls
     sur leur ligne — .bloc-titre--action n'a alors plus qu'un enfant,
     poussé à droite pour rester aligné avec le reste de la page.
     Demande du 21/08/2026. */
  .mb-titre-texte{display:none}
  .bloc-titre--action{justify-content:flex-end}

  /* ---- Textes qui dépendent de la mise en page (bandeau de bienvenue) ----
     .col-gauche passe en haut sur mobile (order:-1 ci-dessus) : un texte qui
     dit « à gauche » doit devenir « au-dessus ». Voir vues/accueil.php. */
  .seul-desktop{display:none}
  .seul-mobile{display:inline}

  /* ---- « Mon espace » : boutons en grille 2 colonnes ---------------------- */
  .boutons-grille{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;
  }
  .boutons-grille .bouton{margin-top:0}

  /* ---- Bandeau du haut : icônes seules --------------------------------
     Le libellé (.nav-texte) est masqué, seule .nav-icone reste visible —
     gain de largeur sur le bandeau. L'intitulé complet reste disponible
     pour les lecteurs d'écran via aria-label sur le lien (noyau/entete.php).
     Padding resserré et carré : plus adapté à une icône seule qu'au
     padding pensé pour texte+icône. */
  .nav-texte{display:none}
  /* Le chevron des déroulants part avec le libellé : l'onglet se réduit
     à son icône (02/09/2026). */
  .nav-chevron{display:none}
  .nav-lien--groupe{gap:0}
  .nav-lien{padding:7px 12px;font-size:1rem}
  .nav-cadenas{margin-left:0}

  /* ---- Icônes retirées du bandeau mobile (20/08/2026) --------------------
     « Les membres » et « Les soirées » : accès conservé ailleurs (colonne
     de gauche, boutons de la carte Mon espace/Rejoindre) — simplement
     retirées ici pour désencombrer le bandeau. Inchangé sur PC.
     « Aide » et « Centre de gestion » ajoutées le 23/08/2026 : reprises
     dans la pop-up du menu ⋮ (#menu-overlay plus bas) avec Mon espace/
     Rejoindre et Paramètres — inchangées sur PC. */
  .nav-lien[data-route="membres"],
  .nav-lien[data-route="soirees"],
  /* « Les bons plans » (28/08/2026) : meme raison que « Les soirees » juste
     au-dessus — l'acces reste par le carre 💸 de la carte « La communaute »
     (noyau/sidebar.php), visible en permanence sur mobile. Inchange sur PC. */
  .nav-lien[data-route="bons-plans"],
  .nav-lien[data-route="aide"]{display:none}
  .nav-lien--admin{display:none}
  /* ---- Sortie rapide retirée du bandeau mobile (19/09/2026) --------------
     Le bouton panique n'a de sens que devant un écran qu'on peut faire
     basculer d'un geste discret ; sur téléphone il resterait affiché en
     permanence dans la barre, visible de tous. Accès conservé par le double
     Échap uniquement pertinent au clavier — donc, de fait, PC seulement.
     Inchangé sur PC. */
  .nav-lien--panique{display:none}

  /* ---- La communauté : 3 carrés sur une seule rangée (20/08/2026) -------
     Uniquement quand le 3e carré existe (compteurs--trois, membre connecté,
     voir noyau/sidebar.php) : sinon .compteurs garde ses 2 colonnes par
     défaut, déjà sur une seule rangée. Le 3e carré perd son span pleine
     largeur pour devenir une colonne comme les deux autres. */
  .compteurs--trois{grid-template-columns:1fr 1fr 1fr}
  .compteurs--trois .compteur--action{grid-column:auto}

  /* ---- La communauté : 4 carrés sur une seule rangée (27/08/2026) -------
     Le tableau 2×2 posé le 26/08 doublait la hauteur de la carte, laquelle
     reste à l'écran en permanence sur mobile. Quatre colonnes plutôt que
     deux rangées : chaque pilule n'a à porter qu'une icône et un nombre à
     un ou deux chiffres — ~50px de contenu pour ~78px disponibles sur un
     écran de 360px. L'écart et le rembourrage sont resserrés pour tenir
     aussi sur un écran de 320px. Inchangé sur PC, où la colonne de gauche
     est trop étroite pour quatre pilules. */
  .compteurs--quatre{grid-template-columns:repeat(4,1fr);gap:6px}
  .compteurs--quatre .compteur{padding:9px 3px;gap:4px}
  .compteurs--quatre .compteur-icone{font-size:.95rem}
  .compteurs--quatre .compteur b{font-size:1.05rem}

  /* ---- Carrés « La communauté » compacts : icône + chiffre côte à côte
     au lieu d'empilés (20/08/2026) ------------------------------------
     Le gros chiffre centré + libellé en dessous prenait trop de hauteur
     une fois la carte fixe en permanence à l'écran. Sur mobile seulement :
     icône (.compteur-icone, masquée par défaut plus haut dans ce fichier)
     et chiffre alignés sur une ligne, libellé (.compteur small) retiré —
     l'icône suffit à distinguer les 3 carrés. Inchangé sur PC. */
  .compteur{
    align-items:center;justify-content:center;gap:6px;
    padding:9px 6px;
    border-radius:999px;   /* pilule — demande du 20/08/2026, mobile seulement */
  }
  /* .compteur--lien/.compteur--action (plus bas dans ce fichier, hors media
     query) posent chacune display:block, à la même spécificité qu'un simple
     .compteur{display:flex} — et déclarées APRÈS, elles l'auraient emporté
     (icône et chiffre empilés au lieu de côte à côte). Les deux classes
     combinées (.compteur.compteur--lien / .compteur.compteur--action)
     l'emportent quel que soit l'ordre dans le fichier. */
  .compteur.compteur--lien,
  .compteur.compteur--action{
    display:flex;
  }
  .compteur-icone{display:inline-block;font-size:1.05rem;line-height:1}
  .compteur b{font-size:1.15rem}
  .compteur small{display:none}

  /* ---- Titre « La communauté » retiré sur mobile (20/08/2026) -----------
     Ciblé par son attribut for (label[for="acc-communaute"], noyau/sidebar.php)
     pour ne pas toucher aux autres titres (Mon espace, Rejoindre, etc.).
     Ce label servait aussi de bouton pour replier/déplier la carte : la
     case à cocher restant "checked" par défaut, le contenu reste affiché
     en permanence sur mobile une fois le titre retiré — plus de repli
     possible pour cette carte précise, comportement inchangé pour les
     autres cartes accordéon. */
  label[for="acc-communaute"]{display:none}

  /* ---- Bouton menu ⋮ de l'entête (20/08/2026, renommé le 23/08/2026) ----
     Masqué sur PC par défaut (voir règle plus bas) : sur mobile seulement,
     à côté des autres icônes du bandeau du haut. */
  .nav-lien--menu{display:inline-block}

  /* ---- Pop-up « Mon espace / Rejoindre » (20/08/2026) --------------------
     Sur PC, #me-overlay est une simple carte en fin de colonne de gauche
     (règle par défaut plus bas). Sur mobile, elle devient une pop-up
     centrée ouverte depuis l'icône ci-dessus — calquée sur .qv-overlay /
     .qv-boite (mêmes proportions, même overlay). */
  .me-overlay{
    display:none;position:fixed;inset:0;background:var(--ombre-forte);
    z-index:9998;align-items:center;justify-content:center;padding:16px;
  }
  .me-overlay.me-ouvert{display:flex}
  .me-boite{
    position:relative;background:var(--carte);border-radius:12px;
    max-width:460px;width:100%;max-height:86vh;max-height:86dvh;overflow-y:auto;
    box-shadow:0 12px 40px var(--ombre-couleur);
  }
  .me-boite .card{margin-bottom:0}
  .me-fermer{
    display:block;position:absolute;top:8px;right:8px;z-index:1;
    width:32px;height:32px;border:0;border-radius:999px;
    background:var(--surbrillance);font-size:1rem;line-height:1;cursor:pointer;
  }
  /* Dans la pop-up, le contenu reste toujours déplié : le repli-accordéon
     (.accordeon-*) n'a de sens que pour une carte dans le fil de la
     colonne, pas dans une fenêtre ouverte à la demande. */
  .me-overlay .accordeon-contenu{display:block}
}
@media (max-width:560px){
  body{padding:0 10px 30px}
  /* Compense ici aussi (voir .col-centre plus haut, @media max-width:900px) :
     body.padding passe de 16px à 10px à cette taille d'écran. */
  .col-centre{padding-left:10px;padding-right:10px}
  /* Marge négative des cartes réajustée sur le nouveau padding (10px au
     lieu de 16px) — voir la règle jumelle @media max-width:900px. */
  .col-centre .card,
  .col-centre .fiche,
  .col-centre .kp-bandeau-admin,
  .col-centre .cf-bandeau{margin-left:-10px;margin-right:-10px}
  .card-corps{padding:22px 16px}
  /* Le fil d'actu suit le nouveau padding de .card-corps à cette taille
     d'écran (16px au lieu de 24px) — voir #fil-actu-liste plus haut. */
  #fil-actu-liste{margin:0 -16px}
  .fil-carte{padding:16px 16px}
  .fil-carte-photo{margin:10px -16px 0}
  .entete{padding:8px 16px 0}
  .kali-logo{width:42px;height:42px}
  .kali-titre{font-size:1.15rem;letter-spacing:2px}
  .entete-lien{gap:10px}
  .entete-ligne{gap:10px}
  .banniere-accueil h2{font-size:1.22rem}
  .rangee{grid-template-columns:1fr}
  .fiche-lignes>div{flex-direction:column;gap:3px}
  .fiche-lignes dt{flex:none}
  .colonnes-couple{grid-template-columns:1fr}
  .ligne-lien{grid-template-columns:1fr}
  .photos-choix{grid-template-columns:repeat(3,1fr)}
  .cases-mini{grid-template-columns:1fr 1fr}
  .duo-cartes{grid-template-columns:1fr}
  .attrs{grid-template-columns:1fr 1fr}
  .ph--grande{height:280px}
  .ph-scene{height:280px}
  .ph-vignettes{height:80px}
  .fiche-pseudo{font-size:1.4rem}
  .fiche-corps,.fiche-tete{padding-left:18px;padding-right:18px}
}

/* ==========================================================================
   BANDEAU DE BIENVENUE — affiché une seule fois, au retour de la connexion
   (voir vues/accueil.php). Discret : c'est une confirmation, pas une alerte.
   ========================================================================== */
.bandeau-connecte{
  display:flex;align-items:center;gap:12px;
  background:var(--vert-voile);border-left:3px solid var(--vert-vif);color:var(--vert-txt);
  font-size:.95rem;line-height:1.5
}
/* Coche blanche sur vert vif : 2,5:1, l'apparence d'origine du site, conservée
   volontairement le 30/08/2026 — la corriger changerait le thème par défaut. */
.bandeau-coche{
  flex:0 0 auto;width:26px;height:26px;border-radius:999px;
  background:var(--vert-vif);color:var(--sur-couleur);font-weight:700;font-size:.85rem;
  display:flex;align-items:center;justify-content:center
}
@media(max-width:640px){.bandeau-connecte{font-size:.88rem;gap:9px}}

/* Rappel du compte en bas de « Ma fiche profil » — lecture seule, discret.
   Remplace l'ancienne page « Mon compte » (supprimée le 17/08/2026). */
.compte-rappel{margin-top:4px;font-size:.92rem}
.compte-rappel dt{color:var(--txt-2)}

/* Le lien discret posé à côté de l'adresse e-mail, en bas de la fiche.
   Il ouvre la fenêtre de changement (vues/mon-profil.php). */
.lien-changer{
  display:inline-block;margin-left:10px;font-size:.78rem;font-weight:700;
  color:var(--lien);border-bottom:1px solid var(--lien-voile);
}
.lien-changer:hover{border-bottom-color:var(--lien)}
.etiquette-attente{
  display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
  background:var(--orange-voile);color:var(--jaune);font-size:.72rem;font-weight:700;
  vertical-align:middle;
}

/* Avis par e-mail : l'état, puis le bouton qui le bascule. Le bouton reprend
   l'allure du lien « Changer mon adresse » juste au-dessus — même geste,
   même apparence, même ligne. */
.etat-oui{font-weight:700;color:var(--vert-txt)}
.etat-non{font-weight:700;color:var(--orange-txt)}
.form-en-ligne{display:inline}
button.lien-changer{
  border:0;background:none;font-family:inherit;cursor:pointer;padding:0;
  border-bottom:1px solid var(--lien-voile);
}
.note-avis{margin:5px 0 0;font-size:.76rem;color:var(--txt-2);line-height:1.55}

/* Explorateur de l'onglet « Préférences », façon Explorateur Windows — 3
   dossiers (fa_bloc_reglages()). « Gestion des adresses » et « Bien à
   disposition » sont des <button data-ex-ouvrir> qui ouvrent une pop-up
   (data-ex-popup) ; « Mes favoris » est un <a> classique vers la page
   dédiée — pas de pop-up pour lui. Ajouté le 24/08/2026. */
.ex-explorateur{display:flex;flex-wrap:wrap;gap:18px;padding:4px 0 6px}
.ex-dossier{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  width:108px;padding:10px 6px;background:none;border:1px solid transparent;
  border-radius:10px;cursor:pointer;text-align:center;font-family:inherit;
  text-decoration:none;color:inherit;
}
.ex-dossier:hover,.ex-dossier:focus-visible{background:var(--fond-3);border-color:var(--trait)}
.ex-icone{font-size:2.4rem;line-height:1}
.ex-nom{font-size:.8rem;color:var(--txt-1);line-height:1.3}

/* Fond des pop-ups « adresses »/« soiree » — mêmes réglages visuels que
   .fe-overlay (fiche d'édition), MAIS sans réutiliser cette classe :
   .fe-overlay{display:flex} est une règle d'auteur, elle l'emportait sur
   le [hidden] du navigateur (règle par défaut, origine plus basse dans la
   cascade) et empêchait la pop-up de se refermer — plusieurs dossiers
   restaient visibles en même temps, quoi que fasse le JS. Bug remonté et
   corrigé le 24/08/2026 : .ex-overlay gère elle-même display:none/flex
   via :not([hidden]), aucun conflit possible. .fe-boite/.fe-entete/
   .fe-fermer/.fe-corps, eux, restent réutilisés tels quels pour l'intérieur
   de la boîte : ce sont eux qui n'ont jamais l'attribut hidden. */
.ex-overlay{
  position:fixed;inset:0;z-index:1300;background:var(--voile);
  display:none;align-items:center;justify-content:center;padding:16px;
}
.ex-overlay:not([hidden]){display:flex}

/* Suppression du compte, tout en bas de l'onglet « Préférences » — séparée
   du reste par un filet : c'est une sortie, pas un réglage. */
.zone-danger{margin-top:18px;padding-top:16px;border-top:1px solid var(--trait)}
.zone-danger .note-avis{margin-bottom:10px}
button.lien-danger{
  border:1px solid var(--lien-voile);border-radius:8px;background:none;
  font-family:inherit;cursor:pointer;padding:7px 12px;font-size:.82rem;
  font-weight:700;color:var(--lien);
}
button.lien-danger:hover{background:var(--accent-voile)}

/* ==========================================================================
   MESSAGERIE INTERNE

   Une PAGE à deux colonnes (vues/messages.php), plus une fenêtre : à gauche
   les correspondants, à droite la discussion. Chaque colonne défile pour
   elle-même, la zone d'écriture reste en bas.

   La hauteur est fixée (72 vh) : sans elle, les deux colonnes s'étireraient
   avec leur contenu, la page entière défilerait, et la zone d'écriture
   partirait sous l'écran à chaque message.

   Sous 860 px les deux colonnes ne tiennent plus côte à côte : la discussion
   recouvre alors la liste, et une flèche « ← » y ramène.
   ========================================================================== */

/* ---- Pastille de non-lus ------------------------------------------------- */
.nav-pastille{
  display:inline-block;min-width:18px;margin-left:7px;padding:1px 6px;
  border-radius:999px;background:var(--rouge);color:var(--sur-couleur);
  font-size:.68rem;font-weight:800;line-height:1.5;text-align:center;
  vertical-align:middle;box-shadow:0 0 0 2px var(--rouge-voile);
}

/* ---- Bouton « Lui écrire », dans l'entête d'une fiche -------------------- */
.fiche-tete-droite{display:flex;flex-direction:column;align-items:flex-end;gap:9px;flex:0 0 auto}
/* « Lui écrire » + « Reco » sur la même ligne, pour gagner de la place —
   demande du 23/08/2026. Les deux boutons se partagent la largeur
   (flex:1 1 0) ; seul l'un des deux peut être absent (ex. sa propre fiche),
   auquel cas l'autre occupe naturellement toute la ligne. */
.fiche-tete-ligne{display:flex;gap:8px;width:100%}
/* white-space:nowrap : sans lui, le texte de chaque bouton (icône + libellé)
   peut se replier sur deux lignes quand le compteur de « Recos » passe à
   deux chiffres et que la ligne se resserre — demande du 23/08/2026, jamais
   de saut de ligne dans ces boutons. */
.fiche-tete-ligne .btn-ecrire,
.fiche-tete-ligne .btn-recommandations{
  flex:1 1 0;justify-content:center;padding-left:10px;padding-right:10px;
  white-space:nowrap;
}
.btn-ecrire{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
  background:var(--rouge-fonce);color:var(--sur-vif);font-size:.79rem;font-weight:800;letter-spacing:.3px;
  box-shadow:0 2px 8px var(--rouge-voile);
  transition:background .18s,transform .18s,box-shadow .18s;
}
.btn-ecrire:hover{background:var(--rouge-tres-fonce);transform:translateY(-1px);box-shadow:0 4px 14px var(--rouge-voile)}
.btn-ecrire-ico{font-size:.95rem;line-height:1}

/* ---- Bouton « Visio », à côté de « Écrire » ------------------------------
   Ajouté le 24/08/2026. Vert et non rouge : « Écrire » est le geste de tous
   les jours, l'appel est une proposition — deux rouges côte à côte se
   disputeraient l'attention et on ne saurait plus lequel est le principal.

   DEUX ÉTATS, et le second compte autant que le premier :
     .btn-visio             → la personne a ouvert ses appels, c'est un <a>
     .btn-visio--ferme      → elle ne les a pas ouverts, c'est un <button
                              disabled> (voir fa_fiche(), fiche-affichage.php)

   Le bouton fermé reste VISIBLE, gris et non cliquable, plutôt qu'absent :
   on comprend que l'appel existe et que c'est l'autre qui ne l'a pas
   ouvert, au lieu de chercher un bouton qu'on ne voit pas. Demande
   explicite du 24/08/2026. cursor:not-allowed et opacity disent la même
   chose deux fois, à la souris et à l'œil. */
.btn-visio{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
  background:var(--vert-tres-fonce);color:var(--sur-vif);border:1px solid var(--vert-tres-fonce);
  font-size:.79rem;font-weight:800;letter-spacing:.3px;
  font-family:inherit;cursor:pointer;
  box-shadow:0 2px 8px var(--vert-voile-fort);
  transition:background .18s,transform .18s,box-shadow .18s;
}
.btn-visio:hover{background:var(--vert-sombre);transform:translateY(-1px);box-shadow:0 4px 14px var(--vert-voile-fort)}
.btn-visio-ico{font-size:.95rem;line-height:1}

/* --off : l'INTERRUPTEUR de sa propre fiche, à l'arrêt (25/08/2026). Gris
   comme --ferme, mais bien cliquable — c'est justement là qu'il faut
   cliquer pour ouvrir ses appels. Ne pas réutiliser --ferme ici : celle-ci
   porte cursor:not-allowed et un :hover neutralisé, l'état d'un bouton
   qu'on ne peut pas actionner. */
.btn-visio--off{
  background:var(--fond-3);color:var(--txt-1);border-color:var(--trait);box-shadow:none;
}
.btn-visio--off:hover{background:var(--trait);color:var(--txt);transform:translateY(-1px)}

.btn-visio--ferme,
.btn-visio--ferme:hover{
  background:var(--fond-3);color:var(--txt-2);border-color:var(--trait);
  box-shadow:none;transform:none;cursor:not-allowed;opacity:.75;
}

/* Sur la ligne d'actions de la fiche, les trois boutons se partagent la
   largeur à parts égales — même règle que .btn-ecrire/.btn-recommandations
   juste au-dessus, sinon « Visio » écraserait les deux autres. */
.fiche-tete-ligne .btn-visio{
  flex:1 1 0;justify-content:center;padding-left:10px;padding-right:10px;
  white-space:nowrap;
}

/* Ils étaient DEUX sur cette ligne, ils sont TROIS depuis le 24/08/2026.
   Sur un téléphone étroit, trois pilules en nowrap débordent de la carte :
   on autorise le retour à la ligne et on resserre les paddings, plutôt que
   de laisser le texte sortir du cadre ou de masquer un bouton. */
@media (max-width:520px){
  .fiche-tete-ligne{flex-wrap:wrap}
  .fiche-tete-ligne .btn-ecrire,
  .fiche-tete-ligne .btn-visio,
  .fiche-tete-ligne .btn-recommandations{
    flex:1 1 auto;min-width:0;padding-left:8px;padding-right:8px;font-size:.74rem;
  }
}

/* ---- L'appel vidéo (vues/visio.php) --------------------------------------
   Moteur WebRTC depuis le 25/08/2026 : plus d'iframe, deux <video> à nous.

   LA SCÈNE. La vidéo de l'autre occupe tout le cadre ; la sienne se pose
   en petit dans un coin, comme sur un téléphone. aspect-ratio plutôt
   qu'une hauteur en pixels : le cadre garde ses proportions quelle que
   soit la largeur de la zone centrale, sur PC comme sur mobile.

   Fond très sombre : avant que l'image arrive, un cadre blanc clignoterait
   au moment où la vidéo s'affiche. */
.visio{margin:14px 0}
.visio-titre{margin:0 0 10px}

.visio-scene{
  position:relative;width:100%;aspect-ratio:16/10;
  background:var(--papier-fond);border-radius:12px;overflow:hidden;
}

/* object-fit:cover — la vidéo remplit le cadre quitte à être rognée. La
   solution inverse (contain) laisserait deux bandes noires dès que le
   format de la caméra ne colle pas au cadre, ce qui est presque toujours
   le cas sur téléphone (portrait dans un cadre paysage). */
.visio-distante{width:100%;height:100%;object-fit:cover;display:block;background:var(--papier-fond)}

/* Son propre aperçu : petit, en bas à droite, et RETOURNÉ comme un miroir
   — on se voit comme dans une glace, sans quoi lever la main droite
   donne l'impression de lever la gauche. La vidéo de l'autre, elle,
   n'est jamais retournée : ce serait son image inversée. */
.visio-locale{
  position:absolute;right:10px;bottom:10px;width:28%;max-width:170px;
  aspect-ratio:4/3;object-fit:cover;border-radius:8px;
  border:2px solid var(--blanc-voile-fort);box-shadow:0 3px 12px var(--ombre-forte);
  transform:scaleX(-1);background:var(--papier-txt-1);
}

.visio-etat{margin:12px 0;font-size:.9rem;color:var(--txt-2);min-height:1.2em}

/* La barre de boutons. Centrée et en flex-wrap : trois pilules et quatre
   ronds doivent tenir sur un écran de téléphone sans déborder. */
/* ⚠️ LE PIÈGE DÉJÀ RENCONTRÉ LE 24/08/2026 AVEC .fe-overlay, et refait ici.
   Une règle d'auteur `display:flex` l'emporte TOUJOURS sur l'attribut
   [hidden], qui n'est qu'une règle par défaut du navigateur (priorité plus
   basse). vsPhase() posait donc bien hidden sur « Appeler » et
   « Décrocher / Refuser », et ils restaient affichés pendant toute la
   communication. Retour utilisateur du 25/08/2026.

   La forme correcte, la seule : masqué par défaut, affiché quand hidden
   est absent. Ne jamais revenir à un display:flex inconditionnel sur un
   élément qu'on montre et cache avec [hidden]. */
.visio-boutons{display:none}
.visio-boutons:not([hidden]){
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:12px 0;
}

.visio-appeler,.visio-decrocher{
  padding:14px 26px;font-size:1rem;font-weight:800;border-radius:999px;
  background:var(--vert-tres-fonce);color:var(--sur-vif);border:1px solid var(--vert-tres-fonce);
}
.visio-appeler:hover,.visio-decrocher:hover{background:var(--vert-sombre)}

.visio-refuser{
  padding:14px 26px;font-size:1rem;font-weight:800;border-radius:999px;
  background:var(--fond-3);color:var(--txt-1);border:1px solid var(--trait);
}
.visio-refuser:hover{background:var(--trait)}

/* LA BARRE DE COMMANDES, POSÉE SUR LA VIDÉO (25/08/2026)
   Elle vivait sous le cadre ; elle flotte désormais au bas de l'image,
   comme dans les applications de visio — l'image occupe tout l'espace et
   rien ne traîne en dessous. Demande du 25/08/2026.

   .visio--enligne est posée par le JS pendant la communication : c'est
   elle, et elle seule, qui fait flotter la barre. Hors appel (« Appeler »,
   « Décrocher / Refuser »), les boutons restent dans le flux normal — ils
   n'ont aucune vidéo sur laquelle se poser.

   La barre s'estompe quand la souris ne bouge plus, et revient au moindre
   mouvement ou au premier contact du doigt (.visio--mains, posée par le
   JS). transition sur l'opacité seule : elle reste cliquable même
   estompée, on ne la fait pas disparaître pour de bon. */
/* La barre est un enfant de .visio-scene (voir vues/visio.php), qui porte
   déjà position:relative — c'est sur elle que l'absolu se cale. Au premier
   jet la barre vivait SOUS la scène : n'ayant aucun ancêtre positionné,
   elle se calait sur la page entière et atterrissait en bas de l'écran, à
   côté de la vidéo.

   pointer-events:none quand elle est estompée, et c'est essentiel : sinon
   une bande invisible mais cliquable barre l'image pendant tout l'appel et
   avale les clics. */
.visio--enligne [data-visio-pendant]:not([hidden]){
  position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:14px 10px 16px;
  background:linear-gradient(to top,var(--voile-fort),var(--ombre-couleur));
  opacity:0;transition:opacity .25s;
  pointer-events:none;
}
.visio--enligne.visio--mains [data-visio-pendant]:not([hidden]){
  opacity:1;pointer-events:auto;
}

/* Sur la vidéo, les ronds gris seraient illisibles : ils passent en sombre
   translucide, bord clair. */
.visio--enligne .visio-cmd{
  background:var(--voile);border-color:var(--blanc-voile);color:var(--sur-couleur);
}
.visio--enligne .visio-cmd:hover{background:var(--voile-fort)}
.visio--enligne .visio-cmd--coupe{background:var(--rouge-fonce);border-color:var(--rouge);color:var(--sur-vif);opacity:1}
.visio--enligne .visio-cmd--raccrocher{background:var(--rouge);border-color:var(--rouge)}
.visio--enligne .visio-cmd--raccrocher:hover{background:var(--rouge-fonce)}

/* La vignette de soi remonte au-dessus de la barre — mais SEULEMENT quand
   la barre est visible (.visio--mains). Sinon elle laissait 82 px de vide
   sous elle pendant qu'on parle, pour une barre estompée. */
.visio--enligne.visio--mains .visio-locale{bottom:82px}

/* Les commandes en cours d'appel : des ronds, assez grands pour le pouce
   (44px est le minimum recommandé pour une cible tactile). */
.visio-cmd{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--trait);
  background:var(--fond-3);color:var(--txt);font-size:1.25rem;line-height:1;
  cursor:pointer;font-family:inherit;
  transition:background .18s,transform .18s;
}
.visio-cmd:hover{background:var(--trait);transform:translateY(-1px)}

/* Micro ou caméra coupé : barré de rouge. La couleur seule ne suffirait
   pas — l'opacité et le fond changent aussi, pour que ce soit lisible
   sans distinguer les couleurs. */
.visio-cmd--coupe{background:var(--rouge-voile);border-color:var(--rouge);color:var(--lien);opacity:.9}
.visio-cmd--raccrocher{background:var(--rouge-fonce);border-color:var(--rouge-fonce);color:var(--sur-vif)}
.visio-cmd--raccrocher:hover{background:var(--rouge-tres-fonce)}

/* Sur un téléphone tenu à la verticale, un cadre 16/10 est minuscule :
   on passe en portrait, la vidéo de l'autre occupe alors vraiment
   l'écran. Et l'aperçu de soi rétrécit, pour ne pas manger le cadre. */
@media (max-width:700px){
  .visio-scene{aspect-ratio:3/4}
  .visio-locale{width:32%;max-width:120px;right:8px;bottom:8px}
  .visio-appeler,.visio-decrocher,.visio-refuser{padding:12px 18px;font-size:.92rem}
}

/* ---- Bouton « Recommandations », sous « Lui écrire » ---------------------
   Ton or, comme .etoile-favori--actif : geste positif, pas urgent comme
   l'écriture (rouge) ni un recours comme le signalement (orange). Bouton, pas
   lien : il ouvre une pop-up (voir vues/fiche.php), il ne navigue nulle part. */
.btn-recommandations{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
  background:var(--orange-voile);color:var(--jaune);border:1px solid var(--orange-ambre);
  font-size:.79rem;font-weight:800;letter-spacing:.3px;cursor:pointer;
  transition:background .18s,transform .18s,box-shadow .18s;
}
.btn-recommandations:hover{background:var(--orange-voile);transform:translateY(-1px);box-shadow:0 4px 14px var(--or-voile)}
.btn-recommandations-ico{font-size:.95rem;line-height:1}

/* Recos en attente de validation (sa propre fiche) : le bouton passe en
   rouge, pastille avec le nombre — même rouge que .nav-pastille (messages
   non lus), pour rester cohérent. Demande du 19/08/2026. */
.btn-recommandations--attente{background:var(--rouge-voile);color:var(--lien);border-color:var(--rouge)}
.btn-recommandations--attente:hover{background:var(--rouge-voile);box-shadow:0 4px 14px var(--rouge-voile)}

/* ---- « Signaler cet utilisateur », sous le pseudo ------------------------
   Orange et non rouge : le rouge, sur cette fiche, c'est le bouton qu'on
   utilise tous les jours. Et un LIEN, pas un bouton : c'est un recours,
   pas une invitation.

   Le bandeau d'identité est sur fond sombre : l'orange doit y être clair,
   pas celui des fonds blancs (#c2410c y serait illisible). */
.fiche-tete-gauche{min-width:0}
/* Intercalé entre le pseudo et la ville : display:flex pour qu'il occupe sa
   propre ligne, sans quoi il se collerait au titre. */
.lien-signaler{
  display:flex;width:fit-content;align-items:center;gap:5px;margin:8px 0 2px;
  font-size:.74rem;font-weight:700;letter-spacing:.2px;color:var(--orange-txt);
  border-bottom:1px solid var(--orange-voile);
  transition:color .15s,border-color .15s;
}
.lien-signaler:hover{color:var(--orange-txt);border-bottom-color:var(--orange-txt)}

/* ==========================================================================
   FENÊTRE DE SIGNALEMENT (vues/fiche.php)
   Elle réutilise .kp-modale — seul son contenu lui est propre.
   ========================================================================== */
.sig-cible{
  display:flex;align-items:center;gap:13px;
  padding:12px 14px;margin-bottom:18px;
  border:1px solid var(--trait);border-radius:10px;background:var(--fond-3);
}
.sig-cible-photo{
  width:52px;height:52px;flex:0 0 auto;border-radius:50%;object-fit:cover;
  border:1px solid var(--trait);background:var(--fond-3);
}
.sig-cible-photo--vide{display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.sig-cible-texte{min-width:0}
.sig-cible-nom{font-weight:800;font-size:1rem;color:var(--txt);margin-bottom:4px}
.sig-cible-cat{font-size:.72rem}

.sig-zone{position:relative}
.sig-zone textarea{
  width:100%;resize:vertical;min-height:110px;
  padding:10px 12px 26px;border:1px solid var(--trait);border-radius:10px;
  font-family:inherit;font-size:.9rem;line-height:1.55;color:var(--txt);
}
.sig-zone textarea:focus{outline:none;border-color:var(--orange-fonce);box-shadow:0 0 0 3px var(--rouge-voile)}
.sig-compteur{
  position:absolute;right:11px;bottom:9px;
  font-size:.72rem;font-weight:700;color:var(--rouge);pointer-events:none;
}
.sig-compteur.atteint{color:var(--vert-moyen)}
.sig-min{margin:6px 0 0;font-size:.76rem;font-weight:600;color:var(--rouge)}
.sig-min.atteint{color:var(--vert-moyen)}
.sig-merci{margin:18px 0 16px;font-size:.86rem;line-height:1.6;color:var(--txt-1);text-align:center}

.btn--signaler{width:100%;background:var(--rouge-vif);border-radius:999px;padding:13px 24px}
.btn--signaler:hover{background:var(--rouge)}

/* Envoi d'une recommandation (pop-up de vues/fiche.php), même famille que
   .btn--signaler : ton or, cohérent avec .btn-recommandations. */
.btn--recommander{width:100%;background:var(--or-fonce);border-radius:999px;padding:13px 24px}
.btn--recommander:hover{background:var(--or-sombre)}
.btn--recommander[disabled]{opacity:.5;cursor:not-allowed}

/* ==========================================================================
   LE PANNEAU À DEUX COLONNES
   ========================================================================== */
.kpm-app{
  display:grid;grid-template-columns:230px 1fr;
  /* minmax(0,1fr) et non « 1fr » : une piste en « 1fr » vaut en réalité
     minmax(auto,1fr), donc elle ne descend jamais sous la hauteur de son
     contenu. La rangée gonflerait avec la conversation au lieu de la
     laisser défiler. */
  grid-template-rows:minmax(0,1fr);
  height:72vh;min-height:420px;max-height:660px;
  border:1px solid var(--trait);border-radius:12px;overflow:hidden;background:var(--carte);
}

/* ⚠️ min-height:0 — SANS CETTE LIGNE, RIEN NE FONCTIONNE.
   Un élément de grille a min-height:auto par défaut : il refuse de descendre
   sous la hauteur de son contenu. Les deux colonnes débordaient donc de la
   grille au lieu de faire défiler leur intérieur, et tout ce qui dépassait
   était coupé par overflow:hidden — la zone d'écriture et sa barre d'outils
   (tout en bas) disparaissaient, et la liste n'avait plus d'ascenseur.
   C'est le pendant vertical du min-width:0 déjà posé sur chaque colonne. */
.kpm-liste,
.kpm-conv{min-height:0}

/* ---- Colonne de gauche : les correspondants ------------------------------ */
.kpm-liste{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--trait);background:var(--fond-3)}
.kpm-liste-tete{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 14px;border-bottom:1px solid var(--trait);background:var(--carte);
  font-size:.72rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--txt-2);
}
.kpm-liste-nb{
  padding:1px 8px;border-radius:999px;background:var(--trait);color:var(--txt-1);
  font-size:.7rem;letter-spacing:0;
}
/* C'est ICI que ça défile : la liste a sa propre barre, indépendante du fil. */
.kpm-liste-fil{flex:1 1 auto;overflow-y:auto;min-height:0;overscroll-behavior-y:contain}

.kpm-item{
  display:block;padding:11px 13px;border-bottom:1px solid var(--trait);color:var(--txt);
  transition:background .14s;
}
.kpm-item:hover{background:var(--trait-2)}
.kpm-item--nonlu{background:var(--orange-voile)}
.kpm-item--nonlu:hover{background:var(--orange-voile)}
/* La conversation ouverte : liseré rouge à gauche, fond distinct. */
.kpm-item--actif,
.kpm-item--actif:hover{background:var(--trait-2);box-shadow:inset 3px 0 0 var(--rouge-fonce)}

.kpm-item-haut{display:flex;align-items:baseline;justify-content:space-between;gap:7px}
.kpm-item-bas{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-top:2px}
.kpm-item-nom{
  font-weight:800;font-size:.86rem;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.kpm-item-on{color:var(--vert-moyen);font-size:.58rem;vertical-align:middle;margin-left:3px}
.kpm-item-sus{
  margin-left:5px;padding:1px 6px;border-radius:999px;
  background:var(--rouge-voile);color:var(--lien);font-size:.58rem;font-weight:800;
}
.kpm-item-droite{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.kpm-item-quand{flex:0 0 auto;font-size:.68rem;color:var(--txt-2);white-space:nowrap}
/* La croix qui efface une conversation de la liste (pas de la base, voir
   msg_masquer() / inscription/messages-api.php). Discrète tant qu'on ne
   passe pas dessus : c'est un geste volontaire, pas un piège au survol. */
.kpm-item-croix{
  flex:0 0 auto;width:18px;height:18px;padding:0;border:0;border-radius:999px;
  background:transparent;color:var(--txt-2);font-size:.62rem;line-height:1;
  cursor:pointer;transition:background .14s,color .14s;
}
.kpm-item-croix:hover{background:var(--rouge-voile);color:var(--lien)}
.kpm-item-extrait{
  min-width:0;font-size:.78rem;color:var(--txt-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.kpm-item-extrait b{color:var(--txt-1);font-weight:700}
.kpm-item-compteur{
  flex:0 0 auto;min-width:18px;padding:0 6px;border-radius:999px;
  background:var(--rouge);color:var(--sur-couleur);font-size:.68rem;font-weight:800;
  line-height:17px;text-align:center;
}

/* ---- Colonne centrale : la discussion ------------------------------------ */
.kpm-conv{display:flex;flex-direction:column;min-width:0;background:var(--fond)}

.kpm-tete{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:11px 15px;background:linear-gradient(135deg,var(--papier-fond),var(--papier-fond));
  border-bottom:2px solid var(--or);
}
.kpm-retour{
  display:none;flex:0 0 auto;width:30px;height:30px;border:0;border-radius:8px;
  cursor:pointer;background:var(--surbrillance);color:var(--txt);font-size:1rem;font-weight:700;
}
.kpm-retour:hover{background:var(--surbrillance);color:var(--sur-couleur)}
.kpm-qui{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.kpm-pseudo{
  font-family:Georgia,'Times New Roman',serif;font-size:.98rem;font-weight:bold;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--jaune-txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.kpm-etat{font-size:.67rem;color:var(--txt-3);letter-spacing:.3px}
.kpm-etat--on{color:var(--vert-txt)}
.kpm-fiche{
  flex:0 0 auto;padding:5px 11px;border-radius:999px;
  background:var(--surbrillance);color:var(--txt);
  font-size:.7rem;font-weight:700;white-space:nowrap;
}
.kpm-fiche:hover{background:var(--surbrillance);color:var(--sur-couleur)}
.kpm-fiche[hidden]{display:none}

/* ---- « Qui écrit ? », dans l'en-tête, pour les comptes couple -----------
   Un seul bouton qui bascule Madame / Monsieur, et le cadre suit :
   rose pour Madame, bleu pour Monsieur (demande du 01/09/2026).

   Uniquement des variables de themes.css — jamais de couleur en dur : les
   trois thèmes (kalipay, sombre, clair) redéfinissent --rose/--bleu et leurs
   voiles, le bouton reste donc lisible partout. Le blanc du survol est la
   seule exception : il est posé sur l'aplat plein, foncé dans les trois. */
.kpm-signe{
  flex:0 0 auto;padding:5px 11px;border-radius:999px;cursor:pointer;
  border:2px solid var(--rose);background:var(--rose-voile);color:var(--rose-txt);
  font-size:.7rem;font-weight:700;white-space:nowrap;line-height:1.2;
  transition:background .15s,border-color .15s,color .15s;
}
.kpm-signe:hover{background:var(--rose);color:#fff}
.kpm-signe--lui{
  border-color:var(--bleu);background:var(--bleu-voile);color:var(--bleu-txt);
}
.kpm-signe--lui:hover{background:var(--bleu);color:#fff}
.kpm-signe[hidden]{display:none}

/* ---- 📹 Appeler, dans l'en-tête de la conversation (25/08/2026) ----------
   Placé ici et pas dans la barre d'outils du bas : celle-ci sert à rédiger
   (émojis, image), et appeler n'est pas rédiger. Dans l'en-tête, à côté du
   pseudo, on le voit en ouvrant la conversation sans avoir à le chercher.

   Vert, comme tous les gestes d'appel du site (.btn-visio, .visio-appeler,
   .vsv-decrocher) : une seule couleur pour une seule idée.

   N'existe QUE dans la bulle de conversation — la page /messages garde son
   en-tête inchangée, comme demandé le 25/08/2026. */
.kpm-visio{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--blanc-voile);background:var(--vert-tres-fonce);color:var(--sur-vif);
  font-size:.95rem;line-height:1;cursor:pointer;font-family:inherit;
  transition:background .16s,transform .16s,opacity .16s;
}
.kpm-visio:hover:not(:disabled){background:var(--vert-sombre);transform:translateY(-1px)}

/* Grisé quand la personne n'a pas ouvert ses appels — et c'est l'état par
   DÉFAUT, tant que le serveur n'a pas répondu (voir kpbVisioDispo(),
   kalipay.js) : un bouton actif qui ne mène nulle part est pire qu'un
   bouton gris. cursor:not-allowed et l'opacité disent la même chose deux
   fois, à la souris et à l'œil. */
.kpm-visio:disabled{
  background:var(--surbrillance);border-color:var(--surbrillance);
  color:var(--txt-3);cursor:not-allowed;opacity:.8;
}

/* ---- L'APPEL, À LA PLACE DU FIL (25/08/2026) -----------------------------
   Le bloc .visio de la coquille (noyau/sidebar-droite.php) prend toute la
   hauteur laissée par l'en-tête pendant l'appel ; le fil et la zone
   d'écriture sont masqués le temps de la communication et reviennent
   intacts au raccrochage.

   flex:1 1 auto + min-height:0 — exactement comme .kpm-fil juste en
   dessous : sans le min-height, un enfant en overflow empêche un élément
   flex de rétrécir et la fenêtre déborde vers le bas.

   La marge du haut de .visio est annulée : ici il n'y a pas de page autour
   de quoi respirer, l'en-tête est juste au-dessus. */
.kpm-appel{
  flex:1 1 auto;min-height:0;margin:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:12px;background:var(--papier-fond);
}
.kpm-appel[hidden]{display:none}

/* Dans la fenêtre de conversation, la scène occupe la hauteur disponible
   au lieu de suivre un rapport de forme fixe : le cadre est déjà contraint
   par la fenêtre, imposer un 16/10 par-dessus laisserait de grandes bandes
   vides en haut et en bas. */
.kpm-appel .visio-scene{flex:1 1 auto;min-height:0;aspect-ratio:auto;width:100%}
.kpm-appel .visio-etat{color:var(--txt-4);text-align:center;margin:10px 0 4px}

/* ⚠️ LE PIÈGE, POUR LA QUATRIÈME FOIS (.fe-overlay, .visio-boutons, .vsv-voile,
   et maintenant .kpm-fil) : `display:flex` est une règle d'auteur, elle bat
   TOUJOURS le [hidden] du navigateur, qui n'est qu'une règle par défaut.
   kalipay.js masque le fil pendant un appel dans la bulle (fil.hidden =
   true) ; sans cette ligne, le fil restait affiché et se partageait la
   hauteur avec la vidéo — les deux en flex:1, image écrasée de moitié.
   La feuille le fait déjà pour .kpm-frappe, .kpm-alerte, .kpm-jointe et
   .kpm-appel : .kpm-fil manquait à l'appel. */
.kpm-fil[hidden]{display:none}

/* Le fil : c'est lui qui porte l'ascenseur de la discussion. */
.kpm-fil{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:16px;background:var(--fond);display:flex;flex-direction:column;gap:9px;
  /* Coupe le chaînage du scroll vers body dès le bord du fil : le
     garde-fou body{overscroll-behavior-y:none} suffirait seul, mais
     « contain » ici évite même le rebond visuel avant que le garde-fou
     n'agisse. */
  overscroll-behavior-y:contain;
}
.kpm-info{margin:auto;text-align:center;font-size:.85rem;color:var(--txt-2);line-height:1.6;padding:20px}

.kpm-bulle{
  max-width:76%;align-self:flex-start;padding:8px 12px;border-radius:12px 12px 12px 3px;
  background:var(--fond-3);border:1px solid var(--trait);font-size:.88rem;line-height:1.5;color:var(--txt);
}
.kpm-bulle--moi{
  align-self:flex-end;border-radius:12px 12px 3px 12px;
  background:var(--accent-voile);border-color:var(--rouge-vif);
}
.kpm-txt{word-break:break-word}
/* Une adresse du site, rendue cliquable dans un message (msgLiens). */
.lien-interne{color:var(--lien);font-weight:700;border-bottom:1px solid var(--lien-voile);word-break:break-all}
.lien-interne:hover{border-bottom-color:var(--lien)}
/* Lien externe (26/08/2026) : même traitement, couleur or du site pour signaler qu'il mène ailleurs. */
.lien-externe{color:var(--or);font-weight:700;border-bottom:1px solid var(--or-voile-fort);word-break:break-all}
.lien-externe:hover{border-bottom-color:var(--or)}
.kpm-img{display:block;margin-bottom:6px}
.kpm-img img{border-radius:8px;max-height:240px;width:auto;cursor:zoom-in}
.kpm-quand{margin-top:3px;font-size:.66rem;color:var(--txt-2);text-align:right}
/* La croix rouge qui supprime MON message, des deux côtés (27/08/2026).
   Elle vit dans la ligne de l'heure, pas par-dessus la bulle : rien à
   recouvrir, rien à décaler. Discrète au repos, franche au survol — c'est
   un geste volontaire, comme la croix de la colonne de gauche. */
.kpm-croix{
  margin-right:6px;padding:0;border:0;border-radius:999px;
  width:16px;height:16px;vertical-align:middle;
  background:transparent;color:var(--rouge-vif);font-size:.6rem;font-weight:800;line-height:1;
  cursor:pointer;opacity:.55;transition:opacity .14s,background .14s;
}
.kpm-croix:hover{opacity:1;background:var(--rouge-voile)}
/* Accusé de lecture, tiré de la colonne lu_le : rien de plus en base. */
.kpm-lu{margin-top:1px;font-size:.63rem;font-weight:700;color:var(--vert-moyen);text-align:right}

/* « … écrit » — trois points qui respirent, sous le fil. */
.kpm-frappe{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:7px 15px;background:var(--carte);border-top:1px solid var(--trait);
  font-size:.76rem;font-style:italic;color:var(--txt-2);
}
.kpm-frappe[hidden]{display:none}
.kpm-points{display:inline-flex;gap:3px;align-items:flex-end}
.kpm-points i{
  width:5px;height:5px;border-radius:50%;background:var(--txt-2);
  animation:kpm-rebond 1.25s infinite ease-in-out;
}
.kpm-points i:nth-child(2){animation-delay:.18s}
.kpm-points i:nth-child(3){animation-delay:.36s}
@keyframes kpm-rebond{
  0%,60%,100%{transform:translateY(0);opacity:.45}
  30%{transform:translateY(-4px);opacity:1}
}
@media (prefers-reduced-motion: reduce){
  .kpm-points i{animation:none;opacity:.7}
}

.kpm-alerte{
  flex:0 0 auto;margin:0;padding:9px 15px;font-size:.8rem;line-height:1.5;
  background:var(--accent-voile);color:var(--lien);border-top:1px solid var(--rouge-vif);
}
.kpm-alerte[hidden]{display:none}
.kpm-alerte--ok{background:var(--vert-voile);color:var(--vert-txt);border-top-color:var(--vert-vif)}

/* ---- La zone d'écriture, toujours en bas --------------------------------- */
.kpm-form{flex:0 0 auto;border-top:1px solid var(--trait);background:var(--carte)}

.kpm-jointe{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 14px;background:var(--bleu-voile);border-bottom:1px solid var(--bleu);
  font-size:.76rem;font-weight:700;color:var(--bleu-txt);
}
.kpm-jointe[hidden]{display:none}
.kpm-jointe-nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpm-jointe-retirer{flex:0 0 auto;border:0;background:none;cursor:pointer;color:var(--bleu-txt);font-weight:800}

.kpm-bas{display:flex;align-items:flex-end;gap:8px;padding:10px 12px 8px}
/* Deux lignes au repos, puis la zone descend avec le texte jusqu'à 120px
   (27/08/2026). Le plancher est ici, en CSS, et non dans le calcul de
   kalipay.js : min-height l'emporte sur une hauteur en ligne, la zone ne
   peut donc jamais retomber à une ligne, même le temps d'un « height:auto ».
   calc : 2 lignes × line-height 1.5 = 3em, + 18px de padding + 2px de
   bordures (box-sizing:border-box). En em, la police passée à 16px sur
   petit écran suit toute seule. */
.kpm-texte{
  flex:1 1 auto;min-width:0;resize:none;min-height:calc(3em + 20px);max-height:120px;
  padding:9px 11px;border:1px solid var(--trait);border-radius:10px;
  font-family:inherit;font-size:.88rem;line-height:1.5;color:var(--txt);
}
.kpm-texte:focus{outline:none;border-color:var(--vert-moyen);box-shadow:0 0 0 3px var(--vert-voile)}
.kpm-texte:disabled{background:var(--carte-3);cursor:not-allowed}

/* Vert, et non plus rouge : envoyer est un geste d'accord, pas un
   avertissement. Le rouge reste la couleur des refus et des suppressions. */
.kpm-envoyer{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  height:38px;padding:0 15px;border:0;border-radius:10px;cursor:pointer;
  background:var(--vert-moyen);color:var(--sur-couleur);font-family:inherit;
  font-size:.82rem;font-weight:800;letter-spacing:.2px;white-space:nowrap;
  box-shadow:0 2px 8px var(--vert-voile);
  transition:background .15s,transform .15s,box-shadow .15s;
}
.kpm-envoyer:hover:not(:disabled){
  background:var(--vert-fonce);transform:translateY(-1px);box-shadow:0 4px 14px var(--vert-voile);
}
.kpm-envoyer:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* Le trombone n'était qu'un carré gris de 34 px coincé entre deux autres :
   il passait inaperçu. Chaque outil porte maintenant son nom, occupe la
   moitié de la largeur et a sa propre couleur. */
.kpm-outils{display:flex;align-items:stretch;border-top:1px solid var(--trait)}
.kpm-outil{
  flex:1 1 0;min-width:0;
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 8px;border:0;cursor:pointer;
  font-family:inherit;font-size:.78rem;font-weight:800;letter-spacing:.2px;
  transition:background .15s,color .15s;
}
.kpm-outil + .kpm-outil{border-left:1px solid var(--trait)}
.kpm-outil-ico{font-size:1.2rem;line-height:1}
.kpm-emoji{background:var(--carte);color:var(--jaune)}
.kpm-emoji:hover{background:var(--orange-voile);color:var(--jaune)}
.kpm-piece{background:var(--bleu-voile);color:var(--bleu-txt)}
.kpm-piece:hover{background:var(--bleu-voile);color:var(--bleu-txt)}

/* Lien (26/08/2026) et sondage (admin, même date) : même famille que les
   deux outils ci-dessus. */
.kpm-lien{background:var(--vert-voile);color:var(--vert-txt)}
.kpm-lien:hover{background:var(--vert-voile);color:var(--vert-txt)}
.kpm-sondage{background:var(--or-voile);color:var(--or)}
.kpm-sondage:hover{background:var(--or-voile);color:var(--or)}

/* .kpm-sondage-liste : liste déroulante posée sous le champ, en colonne
   (question complète, pas une grille d'émojis). */
.kpm-sondage-liste{
  display:flex;flex-direction:column;gap:2px;padding:8px 12px;
  background:var(--carte);border-top:1px solid var(--or);max-height:160px;overflow-y:auto;
}
.kpm-sondage-liste[hidden]{display:none}
.kpm-sondage-liste button{
  border:0;background:none;text-align:left;color:var(--jaune-txt);cursor:pointer;
  font-size:.82rem;padding:6px 8px;border-radius:6px;
}
.kpm-sondage-liste button:hover{background:var(--orange-voile)}
.kpm-sondage-liste p{margin:4px 8px;color:var(--txt-2);font-size:.8rem}

/* ==========================================================================
   BULLE DE CHAT ANCRÉE — carte « Les membres », colonne de droite (PC)

   Coquille posée par noyau/sidebar-droite.php (#kpb-app-coquille, hidden),
   promue en id="kpm-app" et positionnée par assets/kalipay.js au clic sur
   une .mel-carte (kpbOuvrir()). Elle réutilise .kpm-conv/.kpm-tete/.kpm-fil/
   etc. déjà stylés plus haut pour le panneau à deux colonnes de
   vues/messages.php — seules la coquille elle-même (taille, position,
   flèche, animation) et le bouton de fermeture sont propres à la bulle.

   Ajoutée le 24/08/2026, ancrée sur la mini-carte cliquée ; CENTRÉE depuis
   le 25/08/2026 (voir juste en dessous). Les variables --kpb-ox/--kpb-oy et
   --kpb-fleche-x, qui servaient à l'ancrage, n'existent plus.
   ========================================================================== */
/* CENTRÉE DEPUIS LE 25/08/2026, et non plus ancrée sur la mini-carte.
   Elle s'ouvre désormais depuis trois endroits — une mini-carte de la
   colonne de droite, le bouton « Écrire » d'une fiche, et bientôt d'autres
   — dont deux n'ont aucune carte sous laquelle se poser. Le centre est le
   seul point qui vaille pour tous, et c'est aussi là qu'on regarde.

   Disparues avec l'ancrage : la pointe (::after), --kpb-fleche-x et
   data-kpb-sens. L'agrandissement part maintenant du centre de la bulle
   elle-même, plus du point cliqué.

   z-index 1150 conservé : au-dessus de la page, sous les overlays d'en-tête
   (9998) et sous la sonnerie d'appel (10002) — un appel entrant doit passer
   devant une conversation ouverte. */
.kpb-bulle{
  position:fixed;z-index:1150;
  top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);
  width:min(420px,92vw);height:min(600px,80vh);height:min(600px,80dvh);
  background:var(--carte);border:1px solid var(--trait);border-radius:14px;
  box-shadow:0 18px 50px var(--ombre-couleur);overflow:hidden;
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;
}
/* Pas d'attribut hidden côté PHP : la visibilité est pilotée ici, pour
   pouvoir l'animer (opacity/transform) — invisible ET inerte tant que
   .kpb-ouvert n'est pas posée par kalipay.js, y compris sans JavaScript. */
.kpb-bulle:not(.kpb-ouvert){visibility:hidden;transition:opacity .16s ease,transform .16s ease,visibility 0s .16s}
.kpb-bulle.kpb-ouvert{
  opacity:1;pointer-events:auto;visibility:visible;
  transform:translate(-50%,-50%) scale(1);
}
.kpb-bulle .kpm-conv{flex:1 1 auto;min-height:0}

/* LE VOILE. Une conversation centrée sans fond assombri flotte au milieu de
   la page sans qu'on sache si le reste est encore actif. Le voile répond à
   la question, et donne où cliquer pour fermer.
   Juste sous la bulle (1149) : il assombrit tout sauf elle. */
.kpb-voile{
  position:fixed;inset:0;z-index:1149;background:var(--voile);
  opacity:0;pointer-events:none;transition:opacity .16s ease;
}
.kpb-voile.kpb-ouvert{opacity:1;pointer-events:auto}

/* PLEIN ÉCRAN SUR TÉLÉPHONE. Une fenêtre de 420 px centrée dans un écran de
   380 px de large laisse des marges ridicules et une zone de saisie
   écrasée par le clavier. Sous 700 px, la conversation prend tout — comme
   n'importe quelle messagerie mobile.
   Les coins carrés et l'absence d'ombre sont volontaires : rien à faire
   flotter quand il n'y a plus de fond derrière. */
@media (max-width:700px){
  .kpb-bulle{
    top:0;left:0;transform:none;
    width:100%;max-width:none;height:100%;max-height:none;
    border-radius:0;border:0;box-shadow:none;
  }
  .kpb-bulle.kpb-ouvert{transform:none}
  .kpb-bulle:not(.kpb-ouvert){transform:none}
  .kpb-voile{display:none}   /* la bulle couvre déjà tout */
}

/* LE BOUTON RETOUR N'A RIEN À FAIRE DANS LA BULLE. Sous 860 px, une règle
   plus bas fait `.kpm-retour{display:flex}` — encore une règle d'auteur qui
   bat [hidden]. Dans la page /messages c'est voulu (revenir à la liste des
   conversations) ; dans la bulle il n'y a pas de liste, et le clic masquait
   .kpm-conv, donc TOUT le contenu, en-tête et ✕ compris. Sous 700 px la
   bulle est plein écran et sans voile : plus aucune sortie, rechargement
   obligatoire. Ici, il reste masqué quoi qu'il arrive. */
.kpb-bulle .kpm-retour{display:none !important}

/* En-tête serré (420 px) : le bouton « qui écrit » doit y tenir sans pousser
   le pseudo, « Sa fiche », 📹 et ✕ hors du cadre. */
.kpb-bulle .kpm-signe{padding:4px 8px;font-size:.66rem;border-width:1px}

.kpb-fermer{
  flex:0 0 auto;width:26px;height:26px;border:0;border-radius:8px;
  background:var(--surbrillance);color:var(--txt);font-size:.82rem;cursor:pointer;
  transition:background .14s,color .14s;
}
.kpb-fermer:hover{background:var(--blanc-voile);color:var(--sur-couleur)}

@media (prefers-reduced-motion:reduce){
  .kpb-bulle{transition:opacity .01s linear}
}

/* ==========================================================================
   SOUS 860 px — la discussion recouvre la liste
   ========================================================================== */
@media (max-width:860px){
  /* ---- La messagerie prend EXACTEMENT la hauteur restante (27/08/2026) ---
     Avant : height:78vh + min-height:420px, alors que #zone-centrale est
     déjà rognée par l'en-tête et la carte « La communauté » — la fenêtre
     débordait donc de la zone, qui se mettait à défiler à son tour (deux
     ascenseurs imbriqués) et la ligne de saisie pouvait sortir de l'écran.
     Ici, la chaîne flex descend depuis #zone-centrale lui-même : la page ne
     défile plus du tout sur cette route, seul le fil des messages le fait —
     exactement comme sur PC. Ciblé par data-route (posé par noyau/layout.php
     et tenu à jour par la navigation fluide), donc sans effet sur les autres
     pages. */
  #zone-centrale[data-route="messages"]{
    display:flex;flex-direction:column;overflow:hidden;
  }
  #zone-centrale[data-route="messages"]>.card{
    flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin-bottom:0;
  }
  #zone-centrale[data-route="messages"]>.card>.card-corps{
    flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  }
  #zone-centrale[data-route="messages"] .kpm-app{
    flex:1 1 auto;height:auto;min-height:0;
  }
  .kpm-app{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr);height:78vh;height:78dvh;max-height:none}
  .kpm-conv{display:none}
  .kpm-retour{display:flex;align-items:center;justify-content:center}

  /* Une conversation est ouverte : on montre la discussion, pas la liste. */
  .kpm-app--conv .kpm-liste{display:none}
  .kpm-app--conv .kpm-conv{display:flex}

  .kpm-bulle{max-width:88%}
  .kpm-outil{font-size:.74rem;padding:10px 6px}
}
/* ==========================================================================
   FENÊTRE MODALE — changement d'adresse e-mail (vues/mon-profil.php)

   Ouverte par le serveur (paramètre « email=1 »), jamais par du JavaScript :
   un <script> injecté par la navigation fluide ne s'exécuterait pas. Le fond
   et la croix sont donc de vrais liens, qui ramènent sur la fiche.
   ========================================================================== */
.kp-modale{
  position:fixed;inset:0;z-index:1100;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.kp-modale-fond{position:absolute;inset:0;background:var(--voile-fort)}
.kp-modale-boite{
  position:relative;width:100%;max-width:520px;max-height:90vh;max-height:90dvh;overflow-y:auto;
  background:var(--carte);border-radius:12px;padding:26px 24px;
  box-shadow:0 18px 50px var(--ombre-forte);
}
.kp-modale-titre{
  font-size:1.02rem;font-weight:700;color:var(--txt);
  padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--trait);
}
.kp-modale-fermer{
  position:absolute;top:14px;right:14px;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:var(--fond-3);color:var(--txt-2);font-weight:700;font-size:.9rem;
}
.kp-modale-fermer:hover{background:var(--trait);color:var(--txt)}
.kp-modale-bas{margin-top:16px;text-align:center;font-size:.84rem}
.kp-modale-bas a{color:var(--txt-2);font-weight:700}
.kp-modale-bas a:hover{text-decoration:underline}

@media(max-width:620px){
  .kp-modale{padding:12px}
  .kp-modale-boite{padding:22px 18px}
  .lien-changer{display:block;margin:6px 0 0}
}

/* ==========================================================================
   LE MINIMUM REQUIS — liste de ce qu'il reste à remplir sur la fiche
   (vues/mon-profil.php) et porte fermée (vues/rejoindre.php).
   ========================================================================== */
.bloc-manques{
  background:var(--carte);border:1px solid var(--or);border-radius:12px;
  padding:16px 18px;margin-bottom:18px
}
.bloc-manques--refus{background:var(--accent-voile);border-color:var(--rouge-vif)}
.manques-titre{font-weight:700;color:var(--txt);font-size:1rem;margin-bottom:6px}
.bloc-manques--refus .manques-titre{color:var(--lien)}
.manques-chapeau{color:var(--txt-2);font-size:.88rem;margin:0 0 10px;line-height:1.5}
.manques-liste{margin:0;padding-left:20px;color:var(--txt-1);font-size:.92rem;line-height:1.9}
.manques-liste li::marker{color:var(--orange-ambre)}
.bloc-manques--refus .manques-liste li::marker{color:var(--rouge)}

.porte-fermee{font-size:2.6rem;line-height:1;margin-bottom:10px}

@media(max-width:640px){
  .bloc-manques{padding:13px 14px}
  .manques-liste{font-size:.88rem;line-height:1.8}
}

/* Photo envoyée, pas encore validée — cadre d'attente sur la fiche vue par
   les autres membres (inscription/fiche-affichage.php). */
.fiche-photos--attente{border-style:dashed;border-color:var(--or);color:var(--txt-2)}

/* Consigne affichée avant l'envoi de la toute première photo
   (vues/mon-profil.php) : c'est elle qui ouvre l'accès. */
.consigne-photo{
  background:var(--carte);border-left:3px solid var(--or);border-radius:0 8px 8px 0;
  padding:12px 15px;margin:14px 0 4px;font-size:.9rem;line-height:1.55;color:var(--txt-1)
}

/* Onglet visible mais fermé — l'espace existe, il demande une fiche remplie.
   Volontairement discret et non barré : c'est une invitation, pas un refus. */
.nav-lien--ferme{opacity:.62;border-style:dashed}
.nav-lien--ferme:hover{opacity:1;border-style:solid;border-color:var(--or);color:var(--or-fonce)}
.nav-cadenas{font-size:.78em;margin-left:2px;vertical-align:1px}

/* Cartouche de rôle à côté du pseudo, sur la fiche d'un membre
   (inscription/fiche-affichage.php). Seuls l'administrateur et le modérateur
   en portent un. Aligné sur la ligne du pseudo, en plus petit. */
.cartouche-role{
  display:inline-flex;align-items:center;gap:5px;vertical-align:middle;
  margin-left:10px;padding:4px 11px;border-radius:999px;
  font-size:.62em;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;text-transform:none
}
.cartouche-role--admin{background:var(--vert-voile);color:var(--vert-txt);border:1px solid var(--vert)}
.cartouche-role--modo {background:var(--orange-voile);color:var(--orange-txt);border:1px solid var(--orange-ambre)}

@media(max-width:640px){
  .cartouche-role{margin-left:0;margin-top:6px;font-size:.7rem;display:inline-flex}
}

/* Galerie d'une fiche : une vignette monte dans le grand cadre au clic
   (voir echangerPhoto dans kalipay.js). La grande photo, elle, s'ouvre en
   visionneuse — d'où deux curseurs différents. */
.ph--grande{cursor:zoom-in}
.ph--vignette{cursor:pointer;position:relative}
.ph--grande img{transition:opacity .12s ease,transform .25s}
.ph--vignette::after{
  content:'⤢';position:absolute;top:6px;right:8px;
  font-size:.78rem;color:var(--sur-couleur);opacity:0;transition:opacity .15s;
  text-shadow:0 1px 3px var(--voile-fort);pointer-events:none
}
.ph--vignette:hover::after{opacity:.95}

/* ==========================================================================
   RÉACTIONS SUR LES PHOTOS (👍 ❤️ 🔥 💧)

   .ph-reagir (le bouton) vit en coin bas-gauche de .ph-case, VOISIN de .ph
   (jamais dedans). Le menu à quatre icônes, lui, n'est PAS un enfant de
   .ph-reagir : #ph-reagir-flottant est un UNIQUE élément, ajouté à <body>
   par kalipay.js et positionné en `fixed` au survol / appui long — comme
   la visionneuse (construireVisionneuse()). Un menu imbriqué dans chaque
   photo se faisait rogner par le `overflow:hidden` de .fiche-panneau
   .fiche-photos (coins arrondis) dès qu'il tentait de s'ouvrir au-dessus :
   invisible, donc inateignable — seul le bouton pouce restait cliquable
   (bug constaté le 19/08/2026). Voir fa_photo_reagir() (fiche-affichage.php).
   ========================================================================== */
.ph-reagir{position:absolute;left:8px;bottom:8px;z-index:2}

.ph-reagir-bouton{
  display:flex;align-items:center;gap:4px;border:1px solid var(--blanc-voile);
  border-radius:999px;background:var(--voile);color:var(--sur-couleur);cursor:pointer;
  padding:5px 9px;font-size:.85rem;line-height:1;font-family:inherit;
}
.ph-reagir-bouton:hover,
.ph-reagir-bouton--actif{background:linear-gradient(135deg,var(--or),var(--or-fonce));border-color:var(--or);color:var(--sur-or)}
.ph-reagir-total{font-size:.7rem;font-weight:800}

/* Le menu flottant : une seule instance pour toute la page, positionnée en
   JS (top/left en px, voir phrMenuOuvrir() dans kalipay.js) — jamais rognée
   par un ancêtre, puisqu'elle n'en a aucun sur cette page (enfant direct de
   <body>, `position:fixed`, au-dessus de tout via z-index). */
#ph-reagir-flottant{
  position:fixed;z-index:9999;display:flex;gap:4px;
  background:var(--carte);border-radius:999px;padding:5px;box-shadow:0 10px 26px var(--ombre-couleur);
}
#ph-reagir-flottant[hidden]{display:none}

.ph-reagir-choix{
  position:relative;width:36px;height:36px;border:0;border-radius:50%;background:var(--fond-3);
  font-size:1.15rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0;transition:transform .12s,background .12s;
}
.ph-reagir-choix:hover{background:var(--orange-voile);transform:scale(1.15)}
.ph-reagir-choix--actif{background:var(--jaune);box-shadow:0 0 0 2px var(--or-fonce) inset}
.ph-reagir-choix-n{
  position:absolute;bottom:-6px;right:-4px;background:var(--papier-fond);color:var(--txt);
  border-radius:999px;font-size:.6rem;font-weight:800;padding:1px 4px;line-height:1.3;
}
.ph-reagir-choix-n[hidden]{display:none}

/* Lecture seule : le total reçu, affiché au propriétaire sur SA PROPRE
   photo (aucun bouton pour lui, on ne réagit pas à ses propres photos). */
.ph-reagir-lu{
  position:absolute;left:8px;bottom:8px;z-index:2;
  background:var(--voile);color:var(--sur-couleur);border-radius:999px;
  padding:5px 9px;font-size:.8rem;font-weight:700;line-height:1;
}

@media(max-width:480px){
  .ph-reagir-bouton{padding:6px 10px;font-size:.9rem}
  .ph-reagir-choix{width:40px;height:40px}
}

/* ---- Détail par emoji + bulle « qui a réagi » — album PUBLIC uniquement,
   ajouté le 23/08/2026 (voir fa_photo_reagir(), fiche-affichage.php et
   phr_repartition_html(), photos-reactions.php). Coin bas-DROIT de
   .ph-case (opposé à .ph-reagir/.ph-reagir-lu, coin bas-gauche), même
   pilule sombre pour rester lisible sur une photo quel que soit son fond.
   Chaque morceau (span.ph-reaction-qui, un par emoji) est à son tour
   interactif : survol (PC) ou tap (mobile) affiche qui a posé CETTE
   réaction précise — voir .ph-reaction-qui-bulle plus bas et
   assets/kalipay.js (action=qui_a_reagi). Zone de clic élargie de
   quelques px (padding + marge négative égale), même recette que
   .fil-reaction-qui (fil de l'actu). */
.ph-reagir-detail{
  position:absolute;right:8px;bottom:8px;z-index:2;
  display:flex;gap:4px;background:var(--voile);color:var(--sur-couleur);
  border-radius:999px;padding:5px 9px;font-size:.75rem;font-weight:700;line-height:1;
}
.ph-reagir-detail .ph-reaction-qui{cursor:pointer;border-radius:4px;padding:1px 2px;margin:-1px -2px}
.ph-reagir-detail .ph-reaction-qui:hover{background:var(--blanc-voile)}

/* Bulle : même famille visuelle que .fil-reaction-qui-bulle (fond blanc,
   ombre portée, liste défilante si beaucoup de monde a réagi). */
.ph-reaction-qui-bulle{
  position:fixed;z-index:1400;max-width:220px;max-height:220px;overflow-y:auto;
  background:var(--carte);border-radius:10px;padding:8px 12px;
  box-shadow:0 10px 26px var(--ombre-couleur);
  font-size:.82rem;line-height:1.7;
}
.ph-reaction-qui-bulle a,
.ph-reaction-qui-bulle span{
  display:block;color:var(--txt);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Le pseudo mène à la fiche du membre : soulignement pointillé permanent pour
   que ça se voie sans survoler (28/08/2026) — un <span> (membre sans fiche)
   reste, lui, sans décor. */
.ph-reaction-qui-bulle a{
  cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;
}
.ph-reaction-qui-bulle a:hover{color:var(--bleu-txt);text-decoration:underline}
.ph-reaction-qui-vide{margin:0;color:var(--txt-2);font-style:italic;white-space:nowrap}

@media(max-width:480px){
  .ph-reagir-detail{padding:6px 10px;font-size:.8rem}
}

/* Étoiles à gauche, ancienneté à droite, sur la fiche d'un membre.
   Sous 700 px les deux colonnes s'empilent. */
.fiche-deux-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.fiche-colonne{min-width:0}
.fiche-colonne .fiche-soustitre{margin-top:0}

/* Étoiles sans titre (demande du 21/08/2026, voir fa_fiche() dans
   fiche-affichage.php) : le crayon d'édition, qui vivait dans le <h3>
   supprimé, garde sa place à droite du bloc via ce petit conteneur —
   affiché seulement pour le propriétaire de la fiche. */
.fiche-etoiles-entete{display:flex;justify-content:flex-end;margin-bottom:6px}

.note-date{margin-left:auto;font-weight:700;color:var(--txt-1);white-space:nowrap;font-size:.92rem}
.fa-vide{color:var(--txt-2);font-style:italic;font-size:.9rem;margin:0}
@media(max-width:700px){
  .fiche-deux-colonnes{grid-template-columns:1fr;gap:20px}
  .note-date{font-size:.86rem}
}

/* Présence — cartouche sur la fiche, pastille sur la carte de l'annuaire.
   Le seuil est CPT_PRESENCE dans inscription/comptes.php (10 min). */
.cartouche-role--enligne  {background:var(--vert-voile);color:var(--vert-txt);border:1px solid var(--vert)}
.cartouche-role--horsligne{background:var(--accent-voile);color:var(--lien);border:1px solid var(--rouge-vif)}

/* Le rond de présence garde le nom .pastille — c'est bien un rond. Le badge
   texte qui portait le même nom s'appelle désormais .badge-oui-non (voir plus
   haut) : il n'y a plus de collision, mais padding:0 reste explicite. */
.pastille{
  display:inline-block;width:9px;height:9px;padding:0;border-radius:50%;
  margin-left:7px;vertical-align:middle;flex:none
}
.pastille--vert {background:var(--vert);box-shadow:0 0 0 3px var(--vert-voile)}
.pastille--rouge{background:var(--rouge-vif);box-shadow:0 0 0 3px var(--accent-voile)}
.carte-membre-pseudo{display:flex;align-items:center}

/* Pseudo tronqué avec ellipsis si trop long, pour que les icônes qui
   suivent (pastille, maison, étoile) restent toujours visibles dans la
   carte — voir fa_carte() dans inscription/fiche-affichage.php. Le
   title="" sur le span porte le pseudo complet, visible au survol. */
.carte-membre-pseudo-txt{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0;flex:1 1 auto;
}

/* Icône maison — bien à disposition pour une soirée (fa_carte()), même
   déclaration que .fiche-logo--maison sur la fiche individuelle. */
.carte-membre-maison{margin-left:6px;font-size:1.05rem;line-height:1;vertical-align:middle;flex:none}


/* Étoile de favori — carte compacte de l'annuaire (fa_carte()). Voir le
   gestionnaire de clic dans assets/kalipay.js (data-favori). Même teinte or
   que .etoiles-choix. Les classes d'état etoile-favori--actif / --attente
   sont PARTAGÉES avec le cartouche de la fiche individuelle ci-dessous
   (.cartouche-favori) : favoriBasculer() (kalipay.js) les pose sans savoir
   lequel des deux habillages est en face. */
.etoile-favori{
  margin-left:auto;padding-left:8px;font-size:1.35rem;line-height:1;
  color:var(--txt-2);cursor:pointer;user-select:none;flex:none;
  display:inline-flex;align-items:center;gap:4px;
  vertical-align:middle;transition:color .15s,transform .1s;
}
.etoile-favori:hover{color:var(--txt-1);transform:scale(1.15)}
.etoile-favori--actif{color:var(--or);text-shadow:0 0 1px var(--or-voile-fort)}
.etoile-favori--actif:hover{color:var(--or-fonce)}
.etoile-favori--attente{opacity:.5;pointer-events:none}

/* Bulle jaune "Suivre", posée à côté de l'étoile ☆ tant que ce membre n'est
   pas favori — cachée par favoriBasculer() (kalipay.js) dès qu'il le
   devient. Inline, pas en position:absolute : .carte-membre a overflow:
   hidden (bord arrondi de la carte), une bulle qui dépasserait à droite
   serait tout simplement rognée. Ajouté le 21/08/2026. */
.etoile-favori-bulle{
  background:var(--orange-voile);color:var(--jaune);border:1px solid var(--orange-ambre);
  border-radius:999px;padding:2px 8px;font-size:.68rem;font-weight:600;
  line-height:1.3;white-space:nowrap;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}
/* Sur mobile, la bulle disparaît dans l'annuaire et sur la fiche d'un
   membre — gain de place, seule l'étoile reste — mais pas ailleurs
   (« Mes favoris »/« Reçus » la gardent, même carte .grille-fiches).
   Ciblé par route plutôt que par un contexte visuel, puisque fa_carte()
   rend le MÊME HTML sur l'annuaire et sur Mes favoris (data-route posé par
   noyau/layout.php, mis à jour par kalipay.js à chaque navigation fluide —
   voir noyau/routes.php pour les clés). Demande du 23/08/2026. */
@media(max-width:760px){
  #zone-centrale[data-route="membres"] .etoile-favori-bulle,
  #zone-centrale[data-route="fiche"] .etoile-favori-bulle{
    display:none;
  }
}

/* Fiche individuelle : cartouche cliquable « ☆/★ Favoris », même famille que
   .cartouche-role--horsligne/--enligne (display, padding, taille hérités de
   .cartouche-role). etoile-favori--actif/--attente = mêmes classes d'état
   que l'étoile compacte ci-dessus, juste un habillage différent. */
.cartouche-favori{
  cursor:pointer;user-select:none;background:var(--fond-3);color:var(--txt-2);
  border:1px solid var(--trait);
  transition:background-color .15s,color .15s,border-color .15s,transform .1s;
}
.cartouche-favori:hover{transform:translateY(-1px);background:var(--trait);color:var(--txt-1)}
.cartouche-favori.etoile-favori--actif{background:var(--orange-voile);color:var(--jaune);border-color:var(--orange-ambre)}
.cartouche-favori.etoile-favori--actif:hover{background:var(--orange-voile);color:var(--jaune)}
.cartouche-favori.etoile-favori--attente{opacity:.5;pointer-events:none}

/* ==========================================================================
   FICHE D'UN MEMBRE — ENTÊTE EN BADGE + MENU À ONGLETS (18/08/2026)

   Réécrit la mise en page de fa_fiche() (inscription/fiche-affichage.php)
   sans toucher aux teintes du site : l'entête reste sombre et or.
   Ce bloc vient APRÈS les règles d'origine : il les remplace là où il faut.
   ========================================================================== */

/* ---- Entête : deux étages (identité, puis préférences partagées) -------- */
.fiche-tete{
  display:block;padding:22px 26px 20px;
}
.fiche-identite{
  display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
}

/* La photo principale, en badge rond, avec la pastille de présence dessus. */
.fiche-avatar{
  position:relative;flex:0 0 auto;width:82px;height:82px;border-radius:50%;
  overflow:visible;background:var(--fond-4);border:2px solid var(--or-voile-fort);
  box-shadow:0 3px 12px var(--ombre-couleur);
}
.fiche-avatar img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
}
.fiche-avatar--vide{
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;color:var(--txt-5);
}

/* Soutien du site (kp_soutiens — voir inscription/soutiens.php) : le liseré
   passe en or PLEIN et gagne un halo. .fiche-avatar porte déjà, sur TOUTES
   les fiches, un liseré or translucide (--or-voile-fort, de .35 à .55 selon
   le thème) : sans l'or plein ET le halo, la distinction serait invisible.
   C'est l'overflow:visible du bloc plus haut qui laisse le halo déborder du
   rond. Ajouté le 19/09/2026. */
.fiche-avatar--soutien{
  border-width:3px;border-color:var(--soutien);
  box-shadow:0 0 0 3px var(--soutien-voile),0 3px 12px var(--ombre-couleur);
}
/* Bandeau « M.E.C demandé » (demande de mise en conformité ouverte, visible
   de tous) — couleurs du thème actif (--accent / --sur-couleur).
   Carte de l'annuaire : bande pleine largeur au bas de la photo.
   Médaillon de la fiche : overlay rond (overflow:hidden) qui découpe la
   bande aux bords du cercle. Ajouté le 23/09/2026. */
.mec-bandeau{
  display:block;padding:3px 0;text-align:center;white-space:nowrap;
  background:var(--accent);color:var(--sur-couleur);
  font-size:.72rem;font-weight:800;letter-spacing:.3px;line-height:1.2;
}
.mec-bandeau--carte{position:absolute;left:0;right:0;bottom:0;z-index:1}
.mec-medaillon{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  pointer-events:none;display:flex;align-items:flex-end;
}
.mec-medaillon .mec-bandeau{width:100%;padding:4px 0 5px;font-size:.5rem;letter-spacing:0}
.fiche-presence{
  position:absolute;right:2px;bottom:2px;width:15px;height:15px;border-radius:50%;
  border:2px solid var(--papier-fond);
}
.fiche-presence--enligne  {background:var(--vert);box-shadow:0 0 0 3px var(--vert-voile)}
.fiche-presence--horsligne{background:var(--rouge-vif);box-shadow:0 0 0 3px var(--accent-voile)}

.fiche-identite-corps{flex:1 1 240px;min-width:0}
.fiche-pseudo{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:2px 0 0}
.fiche-pseudo-nom{min-width:0;word-break:break-word}

/* Crayon du pseudo (02/09/2026) : posé SUR le logo, en bas à droite (sa
   propre fiche seulement). .fiche-crayon pousse les autres à droite d'un
   titre (margin-left:auto) : inutile ici, il est positionné en absolu. */
.fiche-crayon--avatar{
  position:absolute;right:-4px;bottom:-4px;margin-left:0;z-index:2;
  width:28px;height:28px;font-size:.8rem;
  background:var(--carte);border-color:var(--or-voile-fort);
  box-shadow:0 2px 8px var(--ombre-couleur);
}
/* Le crayon prend le coin bas-droit : la pastille de présence passe en haut
   à droite, uniquement sur sa propre fiche. */
.fiche-avatar--moi .fiche-presence{top:2px;bottom:auto}

/* « anciennement … », sous le pseudo, pendant 30 jours après un changement. */
.fiche-pseudo-avant{
  margin:2px 0 0;font-size:.82rem;font-style:italic;color:var(--or-papier);opacity:.85
}

/* Le rôle et le favori : des LOGOS, sans libellé. */
.fiche-logo{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;font-size:.95rem;line-height:1;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  border:1px solid transparent;flex:none;
}
.fiche-logo--admin{background:var(--vert-voile);border-color:var(--vert-voile)}
.fiche-logo--modo {background:var(--orange-voile);border-color:var(--or-voile-fort)}
.fiche-logo--maison{background:var(--bleu-voile);border-color:var(--bleu-voile-fort)}
.fiche-logo--avion{background:var(--bleu-voile);border-color:var(--bleu-voile-fort);text-decoration:none;cursor:pointer}
.fiche-logo--avion:hover{transform:translateY(-1px)}
.fiche-logo--favori{
  background:var(--surbrillance);border-color:var(--surbrillance);
  color:var(--papier-txt-3);cursor:pointer;user-select:none;font-size:1.15rem;
  transition:background-color .15s,color .15s,border-color .15s,transform .1s;
  /* Tant que pas favori, la bulle "Suivre" (.etoile-favori-bulle) doit tenir
     à côté de l'étoile : le badge s'élargit en pilule plutôt que de rester
     un rond de 28px. Redevient un rond une fois favori, juste en dessous —
     ajouté le 21/08/2026. */
  width:auto;min-width:28px;padding:0 10px 0 0;border-radius:999px;gap:4px;
}
.fiche-logo--favori:hover{transform:translateY(-1px);background:var(--surbrillance);color:var(--papier-trait)}
.fiche-logo--favori.etoile-favori--actif{
  background:var(--or-voile);border-color:var(--or-voile-fort);color:var(--or);
  width:28px;padding:0;border-radius:50%;
}
.fiche-logo--favori.etoile-favori--attente{opacity:.5;pointer-events:none}

/* Coup de cœur : même gabarit que .fiche-logo--favori juste au-dessus, en
   rose/rouge plutôt qu'or — pour ne pas le confondre visuellement avec
   l'étoile favori, qui reste privée. Ajouté le 20/08/2026. */
.fiche-logo--coeur{
  background:var(--surbrillance);border-color:var(--surbrillance);
  color:var(--papier-txt-3);cursor:pointer;user-select:none;font-size:1.15rem;
  transition:background-color .15s,color .15s,border-color .15s,transform .1s;
}
.fiche-logo--coeur:hover{transform:translateY(-1px);background:var(--surbrillance);color:var(--papier-trait)}
.fiche-logo--coeur.coeur-favori--actif{
  background:var(--accent-voile);border-color:var(--accent-voile-fort);color:var(--accent-2);
}
.fiche-logo--coeur.coeur-favori--attente{opacity:.5;pointer-events:none}

/* Quatre états depuis le 28/08/2026 (voir cpt_coeur_etat(), comptes.php) :
   l'icône est une image de /icones/coeurs/, le fond ne fait que la souligner.
   vide = neutre ; emis/recu = demi-cœur ; plein = rose franc. */
.fiche-logo--coeur .coeur-icone{display:block;width:22px;height:22px;pointer-events:none}
.fiche-logo--coeur.coeur-etat--emis,
.fiche-logo--coeur.coeur-etat--recu{background:var(--accent-voile);border-color:var(--accent-voile)}
.fiche-logo--coeur.coeur-etat--plein{background:var(--accent-voile);border-color:var(--accent-voile-fort)}

/* Pop-up de confirmation du coup de cœur (#cdc-overlay, construite par
   kalipay.js). Même palette que la pop-up ❤️ de l'entête. */
.cdc-overlay{
  position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
  padding:16px;background:var(--ombre-forte);
}
.cdc-overlay[hidden]{display:none}
.cdc-overlay--attente .cdc-boite{opacity:.6;pointer-events:none}
.cdc-boite{
  width:100%;max-width:340px;padding:20px 18px 16px;text-align:center;
  background:var(--carte);border:1px solid var(--trait);border-radius:14px;
  box-shadow:0 18px 40px var(--ombre-forte);
}
.cdc-icone{display:block;width:64px;height:64px;margin:0 auto 12px}
.cdc-titre{margin:0 0 6px;font-size:1rem;font-weight:700;color:var(--txt)}
.cdc-texte{margin:0 0 16px;font-size:.84rem;line-height:1.45;color:var(--txt-2)}
.cdc-actions{display:flex;flex-direction:column;gap:8px}
.cdc-bouton{
  padding:10px 14px;font:inherit;font-size:.86rem;font-weight:600;
  border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:background-color .15s,border-color .15s,opacity .15s;
}
.cdc-bouton[hidden]{display:none}
.cdc-bouton--valider{background:var(--accent-2);border-color:var(--accent-2);color:var(--sur-couleur)}
.cdc-bouton--valider:hover:not(:disabled){background:var(--accent-2)}
.cdc-bouton--valider:disabled{opacity:.45;cursor:not-allowed}
.cdc-bouton--retirer{background:transparent;border-color:var(--trait);color:var(--rouge-txt)}
.cdc-bouton--retirer:hover{background:var(--fond-3)}
.cdc-bouton--annuler{background:transparent;border-color:transparent;color:var(--txt-2)}
.cdc-bouton--annuler:hover{color:var(--txt)}

/* Ville et catégorie sur la même ligne — jamais de distance en kilomètres. */
.fiche-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:7px 0 0}
.fiche-lieu{display:inline-flex;align-items:center;gap:5px;margin:0;color:var(--or-papier);font-size:.9rem}
.fiche-tete .lien-signaler{margin:9px 0 0}

/* Disponibilités (kp_disponibilites) : L M M J V S D sous la ville.
   Repos = cercle orange, fond transparent. Coché = fond vert, comme
   .fiche-presence--enligne. Sur SA PROPRE fiche c'est un <button> cliquable ;
   sur les autres, un <span> en lecture seule (mêmes classes, pas de curseur). */
.fiche-dispo{display:flex;align-items:center;gap:6px;margin:8px 0 0}
.fiche-dispo-jour{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  border:2px solid var(--orange);background:transparent;color:var(--orange-txt);
  font-size:.78rem;font-weight:700;line-height:1;
  font-family:inherit;padding:0;
}
button.fiche-dispo-jour{cursor:pointer;transition:transform .15s ease,background-color .15s ease,border-color .15s ease}
button.fiche-dispo-jour:hover{transform:scale(1.1);background:var(--orange-voile)}
button.fiche-dispo-jour:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.fiche-dispo-jour--actif{
  background:var(--vert);border-color:var(--vert);color:var(--sur-vert);
  box-shadow:0 0 0 3px var(--vert-voile);
}
button.fiche-dispo-jour--actif:hover{background:var(--vert-moyen);border-color:var(--vert-moyen)}

/* ---- Préférences partagées : ce qu'il cherche + ses envies -------------- */
.fiche-prefs{
  margin-top:18px;padding-top:15px;border-top:1px solid var(--or-voile);
}
.fiche-prefs-titre{
  font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--or);margin-bottom:10px;
}
.fiche-prefs .puce{background:var(--surbrillance);border-color:var(--surbrillance);color:var(--papier-trait)}
.fiche-prefs .puce--cherche{background:var(--bleu-voile);border-color:var(--bleu-voile-fort);color:var(--bleu-txt)}
.fiche-prefs .puce--envie  {background:var(--or-voile);border-color:var(--or-voile);color:var(--or-txt)}

/* ---- Entre l'entête et le menu : étoiles + ancienneté ------------------- */
.fiche-resume{padding:20px 26px 18px;background:var(--fond-3);border-bottom:1px solid var(--trait)}
.fiche-resume .fiche-section{margin-bottom:0}

/* ---- Le menu à onglets -------------------------------------------------- */
.fiche-onglets{
  display:flex;gap:4px;padding:0 26px;background:var(--carte);
  border-bottom:1px solid var(--trait);overflow-x:auto;
}
.fiche-onglet{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  padding:13px 15px;background:none;border:0;border-bottom:2px solid transparent;
  font-family:inherit;font-size:.86rem;font-weight:700;color:var(--txt-2);
  cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s;
}
.fiche-onglet:hover{color:var(--txt)}
.fiche-onglet--actif{color:var(--txt);border-bottom-color:var(--or)}

.fiche-panneau[hidden]{display:none}
.fiche-panneau .fiche-photos{border-radius:12px;overflow:hidden}

@media(max-width:640px){
  .fiche-tete{padding:18px}
  .fiche-avatar{width:66px;height:66px}
  .mec-medaillon .mec-bandeau{font-size:.44rem;padding:3px 0 4px}
  .fiche-tete-droite{align-items:stretch;width:100%}
  .fiche-onglets{padding:0 12px}
  .fiche-onglet{padding:12px 11px;font-size:.8rem}
  .fiche-resume{padding:18px}
}

/* ==========================================================================
   FICHE — ANNONCE REPLIÉE, CRAYONS, POP-UP DE MODIFICATION (18/08/2026)

   Suite du bloc précédent : l'annonce se replie au-delà de douze lignes, et
   sur SA PROPRE fiche chaque section porte un crayon qui ouvre une pop-up
   (voir inscription/fiche-edition-api.php et assets/kalipay.js).
   ========================================================================== */

/* ---- Préférences partagées : une ligne « je cherche », une ligne « envies » */
.fiche-prefs-ligne{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-top:11px}
.fiche-prefs-ligne:first-of-type{margin-top:0}
.fiche-prefs-etiquette{
  flex:0 0 138px;padding-top:5px;
  font-size:.76rem;font-weight:700;color:var(--txt-3);letter-spacing:.02em;
}
.fiche-prefs-ligne .puces{flex:1 1 240px;min-width:0}
@media(max-width:640px){
  .fiche-prefs-etiquette{flex:1 1 100%;padding-top:0}
}

/* ---- L'annonce, repliée à douze lignes ---------------------------------- */
.annonce-enveloppe{position:relative}
.annonce--limitee{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:12;
  overflow:hidden;
}
.annonce--limitee.annonce--deroule{display:block;overflow:visible;-webkit-line-clamp:unset}

/* ---- Même mécanique, repliée à dix lignes (vues/accueil.php) -----
   .accueil-texte neutralise le look « pavé beige » et surtout le
   white-space:pre-line de .annonce (pensé pour du texte libre sans balises) :
   ici le contenu est du HTML structuré (titres, listes), pas du texte brut,
   les retours à la ligne du code source ne doivent pas devenir visibles. */
.annonce--limitee-25{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:10;
  overflow:hidden;
}
.annonce--limitee-25.annonce--deroule{display:block;overflow:visible;-webkit-line-clamp:unset}
.accueil-texte.annonce{
  background:none;border-left:0;border-radius:0;padding:0;
  white-space:normal;font-size:inherit;line-height:inherit;color:inherit;
}

.annonce-plus{
  display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  padding:6px 14px;border-radius:999px;cursor:pointer;font-family:inherit;
  background:var(--carte);border:1px solid var(--or);color:var(--jaune);
  font-size:.8rem;font-weight:800;letter-spacing:.02em;
}
.annonce-plus:hover{background:var(--or-voile);border-color:var(--or)}

/* ---- Bouton « Modifier ma fiche », sous les recommandations -------------- */
.btn-modifier{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
  background:var(--surbrillance);border:1px solid var(--surbrillance);color:var(--papier-trait);
  font-size:.79rem;font-weight:800;letter-spacing:.3px;
  transition:background .18s,transform .18s,border-color .18s;
}
.btn-modifier:hover{background:var(--or-voile);border-color:var(--or-voile-fort);
  color:var(--or-txt);transform:translateY(-1px)}
.btn-modifier-ico{font-size:.95rem;line-height:1}

/* ---- Le crayon d'une section, à droite de son sous-titre ----------------- */
.fiche-crayon{
  margin-left:auto;flex:none;width:30px;height:30px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--fond-3);border:1px solid var(--trait);border-radius:50%;
  font-size:.86rem;line-height:1;cursor:pointer;font-family:inherit;
  transition:background .15s,border-color .15s,transform .1s;
}
.fiche-crayon:hover{background:var(--or-voile);border-color:var(--or);transform:translateY(-1px)}

/* ---- Variante « Modifier / Supprimer » en bulle rouge — réservée aux deux
   onglets Médias (photos publiques et privées, demande du 19/08/2026).
   Partout ailleurs, le crayon ✏️ rond ci-dessus reste inchangé. ---- */
.fiche-crayon--bulle{
  width:auto;height:30px;padding:0 14px;white-space:nowrap;border-radius:999px;
  background:var(--rouge-voile);border-color:var(--rouge-vif);color:var(--lien);font-size:.78rem;font-weight:800;
}
.fiche-crayon--bulle:hover{background:var(--rouge-voile);border-color:var(--rouge)}

/* ---- La pop-up de modification ------------------------------------------
   Même famille que celle des recommandations, mais avec ses propres classes :
   celle-là est créée par JavaScript et vit hors de la zone centrale, elle ne
   peut pas dépendre du <style> d'une vue. */
.fe-overlay{
  position:fixed;inset:0;z-index:1300;background:var(--voile);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
/* Pop-up ouverte depuis « Il manque encore » (data-fiche-manque, kalipay.js) :
   déjà centrée par .fe-overlay ci-dessus, un encadré orange suffit à
   rappeler que c'est bien ce champ-là qu'il faut compléter. */
.fe-overlay--manque .fe-boite{
  border:2px solid var(--jaune-ambre);
  box-shadow:0 14px 44px var(--ombre-couleur),0 0 0 4px var(--orange-voile);
}
.fe-boite{
  background:var(--carte);border-radius:14px;max-width:560px;width:100%;
  max-height:88vh;max-height:88dvh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 14px 44px var(--ombre-couleur);
}
.fe-entete{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 20px;border-bottom:1px solid var(--trait);flex:0 0 auto;
}
.fe-entete b{font-size:1rem;color:var(--txt);font-family:Georgia,'Times New Roman',serif}
.fe-fermer{background:none;border:0;font-size:1.1rem;line-height:1;color:var(--txt-2);cursor:pointer}
.fe-fermer:hover{color:var(--txt)}
/* 04/10/2026 : croix des pop-up du fil : même taille que les icônes des commentaires (.8rem) */
.fil-boite .fe-fermer{font-size:.8rem;padding:4px}
.fe-alerte{margin:14px 20px 0}
.fe-alerte[hidden]{display:none}
.fe-corps{padding:18px 20px;overflow-y:auto;flex:1 1 auto}
.fe-corps .champ:last-child{margin-bottom:0}
.fe-corps textarea{min-height:200px;line-height:1.6;resize:vertical}
.fe-groupe{
  background:var(--fond-3);border:1px solid var(--trait);border-radius:12px;
  padding:15px 16px;margin-bottom:16px;
}
.fe-groupe:last-of-type{margin-bottom:0}
.fe-groupe .duo-tete{margin-bottom:13px}
.fe-corps .ligne-lien label{display:flex;align-items:center;gap:8px}
.fe-bas{padding:14px 20px;border-top:1px solid var(--trait);flex:0 0 auto;text-align:right}
.fe-bas[hidden]{display:none}

@media(max-width:560px){
  .fe-boite{max-width:100%}
  .fe-bas .btn{width:100%}
}

/* ==========================================================================
   FICHE — ÉTAT DE REMPLISSAGE ET CRAYONS DE L'ENTÊTE (18/08/2026)

   « Ma fiche profil » a quitté le menu : tout se gère depuis la fiche. Le
   propriétaire y voit donc où il en est, tant que sa fiche n'est pas
   complète — voir fa_bloc_avancement() dans inscription/fiche-affichage.php.
   ========================================================================== */

/* Le conteneur reste dans le HTML même quand le serveur ne renvoie rien :
   c'est lui qui recevra la prochaine mise à jour. Vide, il ne prend pas de
   place. */
[data-fiche-bloc="avancement"]:empty{display:none}

.fiche-avancement{
  margin-top:18px;padding:15px 17px;
  background:var(--carte);border:1px solid var(--or);border-left:3px solid var(--or);
  border-radius:0 12px 12px 0;
}
.fa-av-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.fa-av-titre{font-size:.88rem;font-weight:700;color:var(--txt)}
.fa-av-pourcent{font-size:1.15rem;font-weight:800;color:var(--or-fonce);white-space:nowrap}
.fa-av-jauge{
  height:8px;margin:10px 0 13px;border-radius:999px;overflow:hidden;
  background:var(--trait);
}
.fa-av-jauge span{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--or),var(--or-fonce));
}
.fa-av-intro{margin:0 0 8px;font-size:.82rem;font-weight:700;color:var(--txt-1)}
.puce--manque{background:var(--rouge-voile);border-color:var(--rouge-vif);color:var(--lien)}
/* Devenu un <button> le 19/08/2026 : chaque point manquant ouvre directement
   son formulaire (voir fa_bloc_avancement(), data-fiche-manque). */
button.puce--manque{cursor:pointer;font:inherit;transition:transform .12s,border-color .15s}
button.puce--manque:hover{border-color:var(--rouge);transform:translateY(-1px)}
button.puce--manque:focus-visible{outline:2px solid var(--jaune-ambre);outline-offset:2px}
.fa-av-aide{margin:11px 0 0;font-size:.78rem;color:var(--txt-2)}

/* Le crayon des préférences est posé sur le bandeau sombre de l'entête :
   même bouton que dans le corps, habillage inversé. */
.fiche-prefs-titre{display:flex;align-items:center;gap:10px}
.fiche-prefs-titre .fiche-crayon{
  background:var(--surbrillance);border-color:var(--surbrillance);
  width:26px;height:26px;font-size:.78rem;
}
.fiche-prefs-titre .fiche-crayon:hover{
  background:var(--or-voile);border-color:var(--or-voile-fort);
}

/* Le sélecteur d'étoiles et les cases à cocher, réutilisés dans la pop-up :
   ils viennent de « Ma fiche profil », leur mise en page tient déjà. */
.fe-corps .etoiles-choix{margin-bottom:6px}
.fe-corps .cases-mini{margin-top:4px}

/* ==========================================================================
   ALBUMS PRIVÉS (18/08/2026)

   L'onglet Médias contient désormais deux albums : les photos publiques,
   visibles de tous les membres, et les photos privées, qui ne s'ouvrent qu'aux
   personnes invitées par le propriétaire, pour la durée qu'il a choisie.

   Voir inscription/photos-privees.php (moteur), photo-privee.php (la seule
   porte par laquelle une photo privée sort), fa_photos_privees() et la section
   « Albums privés » de assets/kalipay.js.
   ========================================================================== */

/* ---- Onglet FAVORIS de la fiche : mêmes 2 sous-onglets qu'ici, même
   mécanique JS (data-fv-onglet), voir inscription/fiche-affichage.php et
   assets/kalipay.js. Ajout du 22/08/2026. -------------------------------- */
.fv-onglets{
  display:flex;gap:6px;margin:0 0 14px;flex-wrap:wrap;
  border-bottom:1px solid var(--trait);
}
.fv-onglet{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;background:none;border:0;border-bottom:2px solid transparent;
  font-family:inherit;font-size:.82rem;font-weight:700;color:var(--txt-2);
  cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s;
}
.fv-onglet:hover{color:var(--txt)}
.fv-onglet--actif{color:var(--txt);border-bottom-color:var(--or)}
.fv-panneau[hidden]{display:none}

/* ---- Onglet AGENDA de la fiche : sous-onglets « J'organise / J'y vais /
   Je propose / Je participe / Passées » (data-ag-onglet, assets/kalipay.js,
   inscription/fiche-affichage.php). Pastilles plutôt qu'un soulignement :
   il peut y en avoir cinq, chacune avec son compteur. Ajout du
   04/09/2026. ------------------------------------------------------------ */
.ag-onglets{
  display:flex;gap:8px;flex-wrap:wrap;
  margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--trait);
}
.ag-onglet{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:999px;
  border:1px solid var(--trait-3);background:none;
  font-family:inherit;font-size:.85rem;font-weight:700;color:var(--txt-2);
  cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s,background .15s;
}
.ag-onglet:hover{color:var(--txt);border-color:var(--or)}
.ag-onglet--actif{background:var(--or);border-color:var(--or);color:var(--sur-or)}
.ag-onglet b{
  font-size:.72rem;font-weight:800;padding:0 6px;border-radius:999px;
  background:var(--trait-3);
}
.ag-onglet--actif b{background:rgba(0,0,0,.22)}
.fiche-section[data-ag-panneau][hidden]{display:none}

/* ---- Agenda, VUE MOBILE (24/09/2026) : « À venir / Passées » + rangée
   d'icônes de type qui filtre une liste chronologique (data-ag-mv /
   data-ag-mf, assets/kalipay.js). Le bureau (> 900 px) garde les pastilles
   .ag-onglets. ------------------------------------------------------- */
.ag-mob{display:none}
@media (max-width:900px){
  .ag-desk{display:none}
  .ag-mob{display:block}
}
.ag-mvue[hidden]{display:none}
.ag-seg{display:flex;padding:3px;margin:0 0 14px;border:1px solid var(--trait-3);border-radius:12px}
.ag-seg-b{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 6px;border:0;border-radius:9px;background:none;
  font-family:inherit;font-size:.85rem;font-weight:700;color:var(--txt-2);cursor:pointer;
}
.ag-seg-b--actif{background:var(--or);color:var(--sur-or)}
.ag-seg-b b{font-size:.72rem;font-weight:800;padding:0 6px;border-radius:999px;background:var(--trait-3)}
.ag-seg-b--actif b{background:rgba(0,0,0,.22)}
.ag-icones{display:flex;justify-content:space-between;gap:6px;margin:0 0 12px}
.ag-ic{
  position:relative;flex:none;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--trait-3);background:none;font-family:inherit;font-size:1.25rem;
  display:grid;place-items:center;cursor:pointer;
}
.ag-ic--actif{border-color:var(--or);box-shadow:inset 0 0 0 1px var(--or)}
.ag-ic-tous{font-size:.75rem;font-weight:800;color:var(--txt-2)}
.ag-ic--actif .ag-ic-tous{color:var(--or)}
.ag-ic sup{
  position:absolute;top:-4px;right:-4px;font-size:.66rem;font-weight:800;line-height:1;
  padding:2px 5px;border-radius:999px;background:var(--trait-3);color:var(--txt);
}
.ag-mtitre{margin:0 0 10px;font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-2)}
.ag-mtag{display:block;margin:0 0 4px 2px;font-size:.72rem;font-weight:700;color:var(--txt-2)}
.ag-mvue--filtre .ag-mtag{display:none}
.ag-mc[hidden]{display:none}
/* Lignes allongées pleine largeur (pas de cartes en 2 colonnes, ni de carte
   en colonne centrée du @media 560px) : une liste, une ligne par événement. */
.ag-mob .soirees-grille{grid-template-columns:minmax(0,1fr);gap:10px}
.ag-mob .soiree-carte{flex-direction:row;text-align:left;gap:12px;padding:10px 12px}
.ag-mob .soiree-carte-media{flex:none}
.ag-mob .soiree-carte-corps{width:auto;flex:1;min-width:0}
.ag-mob .soiree-carte-titre{font-size:.9rem;margin-bottom:2px}
.ag-mob .soiree-carte-ligne{font-size:.75rem;justify-content:flex-start;flex-wrap:wrap}
.ag-mob .soiree-carte-fleche{display:block;flex:none}
.ag-mob .soiree-carte-secret{margin-left:0;margin-right:0}
.ag-mob .carte-repart{justify-content:flex-start}
/* Bande de couleur à gauche selon le type (comme la maquette C) ; Passées en gris. */
.ag-mc{--ag-c:#7f93a3}
.ag-mc[data-ag-type="organise"]{--ag-c:#d9b23a}
.ag-mc[data-ag-type="yvais"]{--ag-c:#e6789f}
.ag-mc[data-ag-type="propose"]{--ag-c:#5ec27a}
.ag-mc[data-ag-type="participe"]{--ag-c:#5aa9e6}
.ag-mc[data-ag-type="voyages"]{--ag-c:#b58af0}
.ag-mob .ag-mc .soiree-carte,.ag-mob .ag-mc .fa-voyage{border-left:5px solid var(--ag-c)}

/* La barre d'outils du propriétaire, au-dessus de chaque album. */
.medias-barre{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;
}
.medias-note{flex:1 1 220px;min-width:0;font-size:.78rem;color:var(--txt-2);line-height:1.5}

/* ---- Bouton « Ouvrir mes privés », dans l'entête de la fiche -------------
   Sous « Lui écrire » et « Recommandations » : même famille de pastilles,
   ton violet — ni l'urgence du message, ni la chaleur de la recommandation. */
.btn-prives{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
  background:var(--violet-voile);color:var(--violet-txt);border:1px solid var(--violet);
  font-size:.79rem;font-weight:800;letter-spacing:.3px;cursor:pointer;
  font-family:inherit;transition:background .18s,transform .18s,box-shadow .18s;
}
.btn-prives:hover{background:var(--violet-voile);transform:translateY(-1px);box-shadow:0 4px 14px var(--violet-voile)}
.btn-prives-ico{font-size:.95rem;line-height:1}

/* ---- Bouton « Humeur du moment », sous « Ouvrir mes privés » ------------
   Même famille que .btn-ecrire/.btn-recommandations/.btn-prives juste
   au-dessus (pilule, icône + libellé) : l'ancien logo rond sous la photo
   était trop petit, trop peu visible sur le fond sombre de l'entête —
   retour utilisateur du 23/08/2026, remplacé par ce bouton pleinement
   dans la colonne des actions. */
.btn-humeur{
  display:inline-flex;align-items:center;gap:7px;padding:6px 15px 6px 6px;border-radius:999px;
  background:var(--brun);color:var(--orange-txt);border:1px solid var(--orange);
  font-size:.79rem;font-weight:800;letter-spacing:.3px;cursor:pointer;
  font-family:inherit;transition:background .18s,transform .18s,box-shadow .18s;
}
.btn-humeur:hover{background:var(--brun-2);transform:translateY(-1px);box-shadow:0 4px 14px var(--orange-voile)}
.btn-humeur--lecture{position:relative;cursor:default}

/* Bulle d'aperçu agrandi, au survol du badge en lecture seule (CSS pur,
   pas de JS) — demande du 23/08/2026. Ancrée sur le bord DROIT du bouton
   (right:0), pas centrée : la colonne des boutons est collée au bord droit
   de la fiche, une bulle centrée déborderait de l'écran. */
.btn-humeur-bulle{
  position:absolute;right:0;bottom:calc(100% + 12px);
  width:80px;height:80px;padding:8px;border-radius:16px;
  background:var(--papier-fond);border:1px solid var(--orange-voile);
  box-shadow:0 10px 30px var(--ombre-couleur);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(4px);
  transition:opacity .16s ease,transform .16s ease;
  z-index:40;
}
.btn-humeur-bulle img{width:64px;height:64px;object-fit:contain;border-radius:12px}
.btn-humeur-bulle::after{
  content:"";position:absolute;top:100%;right:14px;
  border:7px solid transparent;border-top-color:var(--papier-fond);
}
.btn-humeur--lecture:hover .btn-humeur-bulle{opacity:1;visibility:visible;transform:translateY(0)}
/* Pas cliquable (on ne peut pas changer l'humeur d'un autre), mais le logo
   doit rester visible et se faire remarquer au survol — demande du
   23/08/2026. Le badge lui-même ne bouge pas (transform:none plus haut
   sur .btn-humeur, pas de translateY comme les boutons cliquables) ; seule
   l'icône réagit. */
.btn-humeur--lecture:hover{background:var(--brun-2);transform:none;box-shadow:none;border-color:var(--orange-txt)}
.btn-humeur-ico{
  width:24px;height:24px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  display:inline-flex;background:var(--surbrillance);
  transition:transform .15s ease,background-color .15s ease;
}
.btn-humeur--lecture:hover .btn-humeur-ico{background:var(--surbrillance);transform:scale(1.18)}
.btn-humeur-ico img{width:100%;height:100%;object-fit:contain;display:block}
.btn-humeur-txt{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Bouton « Qui peut voir mes photos », dans l'album privé ------------- */
.btn-prives-qui{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;
  background:var(--violet-voile);color:var(--violet-txt);border:1px solid var(--violet);
  font-size:.76rem;font-weight:700;cursor:pointer;font-family:inherit;
  transition:background .15s,border-color .15s;
}
.btn-prives-qui:hover{background:var(--violet-voile);border-color:var(--violet)}

/* ---- L'album privé fermé : une porte, pas une erreur --------------------- */
.fiche-photos--fermee{
  background:var(--violet-voile);border:1px dashed var(--violet);color:var(--violet-txt);
}
.ph-vide-aide{font-size:.76rem;color:var(--txt-2)}

/* ---- La pop-up de l'humeur du moment -------------------------------------
   Contrairement à .fe-overlay/.pp-overlay, rendue directement par PHP
   (fa_fiche()) plutôt que créée par JavaScript : le contenu (8 humeurs) ne
   change pas d'un chargement à l'autre, inutile d'aller le chercher en
   AJAX. kalipay.js se contente de la montrer/cacher (fhOuvrir/fhFermer). */
.fh-overlay{
  position:fixed;inset:0;z-index:1300;background:var(--voile);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.fh-overlay[hidden]{display:none}
.fh-boite{
  position:relative;background:var(--carte);border-radius:14px;max-width:360px;
  width:100%;max-height:88vh;max-height:88dvh;overflow-y:auto;padding:20px;
  box-shadow:0 14px 44px var(--ombre-couleur);
}
.fh-fermer{
  position:absolute;top:12px;right:14px;background:none;border:0;
  font-size:1.1rem;line-height:1;color:var(--txt-2);cursor:pointer;
}
.fh-fermer:hover{color:var(--txt)}
.fh-entete{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 26px 14px 0;
}
.fh-titre{margin:0;font-size:1rem;color:var(--txt);font-family:Georgia,'Times New Roman',serif}
.fh-effacer{
  display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;
  height:22px;padding:0 8px;border-radius:11px;border:1px solid var(--trait);background:none;
  font-size:.68rem;font-weight:700;letter-spacing:.03em;line-height:1;
  color:var(--txt-2);cursor:pointer;
}
.fh-effacer-croix{color:var(--rouge);font-weight:700}
.fh-effacer:hover{border-color:var(--rouge-vif);background:var(--accent-voile)}
.fh-effacer[hidden]{display:none}
.fh-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.fh-choix{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  border:1px solid var(--trait);border-radius:10px;background:var(--fond-3);
  padding:8px 4px;cursor:pointer;font-size:.68rem;line-height:1.2;
  color:var(--txt-1);text-align:center;font-family:inherit;
}
.fh-choix:hover{border-color:var(--orange)}
.fh-choix:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
.fh-choix img{width:36px;height:36px;object-fit:contain;border-radius:50%}
.fh-choix--actif{border-color:var(--orange);background:var(--orange-voile)}

@media(max-width:380px){
  .fh-grille{grid-template-columns:repeat(3,1fr)}
}

/* ---- La pop-up des albums privés ----------------------------------------
   Même famille que .fe-overlay : créée par JavaScript, elle vit hors de la
   zone centrale et ne peut donc pas dépendre du <style> d'une vue. */
.pp-overlay{
  position:fixed;inset:0;z-index:1350;background:var(--voile);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.pp-boite{
  background:var(--carte);border-radius:14px;max-width:440px;width:100%;
  max-height:86vh;max-height:86dvh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 14px 44px var(--ombre-couleur);
}
.pp-entete{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 20px;border-bottom:1px solid var(--trait);flex:0 0 auto;
}
.pp-entete b{font-size:1rem;color:var(--txt);font-family:Georgia,'Times New Roman',serif}
.pp-fermer{background:none;border:0;font-size:1.1rem;line-height:1;color:var(--txt-2);cursor:pointer}
.pp-fermer:hover{color:var(--txt)}
.pp-alerte{margin:14px 20px 0}
.pp-alerte[hidden]{display:none}
.pp-corps{padding:18px 20px;overflow-y:auto;flex:1 1 auto}
.pp-intro{margin:0 0 14px;font-size:.86rem;color:var(--txt-1);line-height:1.55}
.pp-aide{margin:14px 0 0;font-size:.76rem;color:var(--txt-2);line-height:1.5}
.pp-vide{margin:0;font-size:.86rem;color:var(--txt-1)}

/* Quel album ouvrir — étape 3 de la fusion des albums (22/08/2026) : une
   case à cocher par album privé, « Tous mes albums privés » en tête. */
.pp-albums{
  display:flex;flex-direction:column;gap:6px;margin:0 0 16px;
  padding:10px 12px;border:1px solid var(--trait);border-radius:10px;background:var(--fond-3);
}
.pp-album-option{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--txt-1);cursor:pointer}
.pp-album-option input{accent-color:var(--violet)}

/* Les cinq durées, en pleine largeur : on clique, c'est ouvert. */
.pp-durees{display:flex;flex-direction:column;gap:8px}
.pp-duree{
  width:100%;padding:11px 14px;border-radius:10px;text-align:left;
  background:var(--violet-voile);color:var(--violet-txt);border:1px solid var(--violet);
  font-family:inherit;font-size:.88rem;font-weight:700;cursor:pointer;
  transition:background .15s,border-color .15s,transform .1s;
}
.pp-duree:hover{background:var(--violet-voile);border-color:var(--violet);transform:translateY(-1px)}
.pp-duree:disabled{opacity:.55;cursor:default;transform:none}
.pp-duree--illimitee{background:var(--carte);color:var(--jaune);border-color:var(--or)}
.pp-duree--illimitee:hover{background:var(--or-voile);border-color:var(--or)}

/* Qui peut voir mes photos : une ligne par personne, la croix referme. */
.pp-ligne{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 12px;border:1px solid var(--trait);border-radius:10px;margin-bottom:8px;
}
.pp-ligne:last-child{margin-bottom:0}
.pp-qui{display:flex;flex-direction:column;gap:3px;min-width:0}
.pp-qui b{font-size:.9rem;color:var(--txt)}
.pp-album-badge{font-size:.72rem;color:var(--violet-txt);font-weight:700}
.pp-quand{font-size:.76rem;color:var(--txt-2)}
.pp-quand--illimitee{color:var(--jaune);font-weight:700}
.pp-croix{
  width:28px;height:28px;flex:0 0 auto;padding:0;border:0;border-radius:50%;
  background:var(--rouge-voile);color:var(--lien);font-size:.78rem;font-weight:700;line-height:1;
  cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;
  transition:background .15s,transform .1s;
}
.pp-croix:hover{background:var(--rouge-voile);transform:scale(1.08)}
.pp-croix:disabled{opacity:.5;cursor:default;transform:none}

/* ---- Bouton « Gérer mes albums », dans l'entête de l'onglet Médias ------- */
.btn-ga-gerer{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;
  background:var(--violet-voile);color:var(--violet-txt);border:1px solid var(--violet);
  font-size:.76rem;font-weight:700;cursor:pointer;font-family:inherit;
  transition:background .15s,border-color .15s;
}
.btn-ga-gerer:hover{background:var(--violet-voile);border-color:var(--violet)}

/* ---- La pop-up « Gérer mes albums » --------------------------------------
   Même famille que .pp-overlay : créée par JavaScript, elle vit hors de la
   zone centrale et ne peut donc pas dépendre du <style> d'une vue. */
.ga-overlay{
  position:fixed;inset:0;z-index:1350;background:var(--voile);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.ga-boite{
  background:var(--carte);border-radius:14px;max-width:480px;width:100%;
  max-height:86vh;max-height:86dvh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 14px 44px var(--ombre-couleur);
}
.ga-entete{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 20px;border-bottom:1px solid var(--trait);flex:0 0 auto;
}
.ga-entete b{font-size:1rem;color:var(--txt);font-family:Georgia,'Times New Roman',serif}
.ga-fermer{background:none;border:0;font-size:1.1rem;line-height:1;color:var(--txt-2);cursor:pointer}
.ga-fermer:hover{color:var(--txt)}
.ga-alerte{margin:14px 20px 0}
.ga-alerte[hidden]{display:none}
.ga-corps{padding:18px 20px;overflow-y:auto;flex:1 1 auto}
.ga-aide{margin:14px 0 0;font-size:.76rem;color:var(--txt-2);line-height:1.5}

/* Une case-dossier par album, en grille — façon « grandes icônes » de
   l'Explorateur Windows. Les albums perso sont glissables (toute la case) ;
   principal/privé/Tests IST restent fixes en tête de liste. */
.ga-liste{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:18px 10px;
}
.ga-dossier{
  position:relative;display:flex;flex-direction:column;align-items:center;
  gap:2px;padding:8px 4px 6px;border-radius:10px;text-align:center;
  transition:opacity .15s,background .15s;
}
.ga-dossier[draggable="true"]{cursor:grab}
.ga-dossier:hover{background:var(--fond-3)}
.ga-dossier--glissee{opacity:.35}
.ga-dossier-icone{position:relative;font-size:2.5rem;line-height:1;margin-bottom:2px}
.ga-dossier-emoji{filter:drop-shadow(0 1px 1px var(--ombre-couleur))}
.ga-dossier-cadenas{
  position:absolute;bottom:-3px;right:-6px;font-size:.85rem;
  background:var(--carte);border-radius:50%;padding:1px;line-height:1;
}
.ga-dossier-nom-zone{width:100%;min-width:0}
.ga-dossier-nom{
  display:block;font-size:.8rem;font-weight:700;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25;
}
.ga-renommer-champ{
  width:100%;padding:3px 5px;border-radius:6px;border:1px solid var(--violet);
  font-family:inherit;font-size:.8rem;color:var(--txt);text-align:center;
}
.ga-dossier-compte{font-size:.68rem;color:var(--txt-2)}
.ga-renommer,.ga-supprimer{
  position:absolute;top:2px;width:22px;height:22px;padding:0;border:0;border-radius:50%;
  font-size:.68rem;font-weight:700;line-height:1;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;transition:background .15s,transform .1s;
  box-shadow:0 1px 4px var(--ombre-couleur);
}
.ga-renommer{left:2px;background:var(--violet-voile);color:var(--violet-txt)}
.ga-renommer:hover{background:var(--violet-voile);transform:scale(1.08)}
.ga-supprimer{right:2px;background:var(--rouge-voile);color:var(--lien)}
.ga-supprimer:hover{background:var(--rouge-voile);transform:scale(1.08)}
.ga-renommer:disabled,.ga-supprimer:disabled{opacity:.5;cursor:default;transform:none}

/* Créer l'album Tests IST — un bouton pleine largeur, discret. */
.ga-ist-creer{
  width:100%;margin-top:12px;padding:10px 14px;border-radius:10px;text-align:center;
  background:var(--carte);color:var(--jaune);border:1px solid var(--or);
  font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.ga-ist-creer:hover{background:var(--or-voile);border-color:var(--or)}

/* Créer un album perso — titre + case « privé » + bouton, sur une ligne. */
.ga-nouveau{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.ga-nouveau-titre{
  flex:1 1 160px;min-width:0;padding:8px 11px;border-radius:8px;border:1px solid var(--trait);
  font-family:inherit;font-size:.86rem;color:var(--txt);
}
.ga-nouveau-prive{
  flex:0 0 auto;display:flex;align-items:center;gap:5px;font-size:.8rem;color:var(--txt-1);
}
.ga-nouveau-creer{
  flex:0 0 auto;padding:8px 14px;border-radius:999px;border:1px solid var(--violet);
  background:var(--violet-voile);color:var(--violet-txt);font-family:inherit;font-size:.82rem;font-weight:700;
  cursor:pointer;transition:background .15s;
}
.ga-nouveau-creer:hover{background:var(--violet-voile)}

/* ---- Rangée du haut de l'onglet Médias, tous les albums (étape 3,
   22/08/2026 : fin des sous-onglets, dossier « Photos publiques » compris) --
   Entièrement piloté par kalipay.js (préfixe at_) depuis le JSON de
   inscription/albums-api.php — jamais de HTML servi ici. La grille de
   dossiers réutilise le même habillage que la pop-up « Gérer mes albums »
   (.ga-liste/.ga-dossier) ; seul un dossier cliquable là où l'autre pop-up
   proposait crayon/croix. */
.at-zone{position:relative}
.at-alerte{margin:0 0 14px}
.at-chargement,.at-erreur,.at-vide{font-size:.86rem;color:var(--txt-2);margin:10px 0 0}
.at-erreur{color:var(--lien)}

.at-grille{margin-top:2px}
.at-dossier{
  border:0;background:none;font-family:inherit;width:100%;cursor:pointer;
}
.at-dossier--verrouille{opacity:.55;cursor:default}
.at-dossier--verrouille:hover{background:none}

.at-case-plus{cursor:pointer}
.at-case-plus:hover{border-color:var(--violet);color:var(--violet-txt)}
.at-photo--glissee{opacity:.35}
/* ------------------------------------------------------------------------
   Vidéo dans un album (02/09/2026)

   Même cadre qu'une photo (.photo-case), mais un <video> à la place de
   l'<img> : object-fit:contain pour ne jamais rogner une vidéo verticale
   de téléphone, fond noir pour que les bandes latérales ressemblent à un
   lecteur et non à un trou dans la grille.
   ------------------------------------------------------------------------ */
.at-video{width:100%;height:100%;object-fit:contain;display:block;background:#000;border-radius:inherit}
.at-video-duree{
  position:absolute;right:6px;bottom:6px;z-index:2;pointer-events:none;
  background:rgba(17,24,39,.82);color:#fff;border-radius:4px;
  padding:1px 6px;font-size:11px;line-height:1.6;
}
/* La barre d'actions et le badge de durée se disputeraient le coin bas
   droit : sur une carte à barre, le badge remonte au-dessus d'elle. */
.photo-case--barre .at-video-duree{bottom:34px}

.at-photos .ph{display:block;width:100%;height:100%}
.at-photos .ph:not(.ph--vignette){cursor:zoom-in}
.at-photos .ph--vignette::after{display:none}

/* La photo principale (ou, à défaut, la première approuvée) occupe le grand
   cadre en tête de grille — même principe que la galerie publique
   (.fiche-photos/.ph--grande) : elle prend toute la largeur de la rangée,
   les autres restent en petites cases carrées dessous. Cliquer une case
   fait monter SA CARTE ENTIÈRE à cette place (atPhotoCaseEchanger(),
   kalipay.js) — pas seulement l'image, pour que ses boutons de gestion
   (croix, « Photo principale ») suivent avec elle. Purement visuel : rien
   n'est enregistré, la prochaine ouverture de l'album repart de la vraie
   photo principale (22/08/2026). */
.photo-case--grande{grid-column:1/-1;aspect-ratio:auto;height:320px}

/* Réactions (👍❤️🔥💧) sur une photo de l'onglet « Albums »
   (atPhotoReagir(), kalipay.js) : .ph-reagir/.ph-reagir-lu sont en
   bas-gauche par défaut (galerie publique, .fiche-photos) — ici la barre
   .photo-actions occupe déjà tout le bas de la carte (bouton « Photo
   principale ») et .photo-croix le haut-droite : le badge de réaction
   passe donc en haut-gauche, à côté de .etiq (centrée) et .photo-croix
   (droite), sans jamais les chevaucher (22/08/2026). */
.at-photos .photo-case .ph-reagir,
.at-photos .photo-case .ph-reagir-lu{left:5px;bottom:auto;top:5px}

/* ---- La pop-up de progression d'un envoi vidéo (02/09/2026) --------------
   Au-DESSUS de .at-overlay (z-index 1350) : elle s'ouvre alors que la
   pop-up d'album est déjà là. Pas de bouton de fermeture ni de clic sur le
   fond qui ferme : une conversion en cours ne s'interrompt pas côté
   serveur, laisser croire le contraire serait mentir. Seul l'envoi est
   annulable, et son bouton disparaît dès que la conversion commence. */
.at-progres-overlay{
  position:fixed;inset:0;z-index:1400;background:var(--voile);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.at-progres-boite{
  background:var(--carte);border-radius:14px;padding:22px 24px;
  max-width:380px;width:100%;text-align:center;
  box-shadow:0 14px 44px var(--ombre-couleur);
}
.at-progres-titre{
  font-family:Georgia,'Times New Roman',serif;font-size:1rem;color:var(--txt);
  margin:0 0 16px;
}
.at-progres-barre{
  height:8px;border-radius:99px;background:var(--trait);
  overflow:hidden;margin:0 0 12px;
}
.at-progres-barre>span{
  display:block;height:100%;width:0;border-radius:99px;
  background:var(--or);transition:width .25s ease-out;
}
/* Phase non mesurable : la jauge fait des allers-retours au lieu d'afficher
   un pourcentage que personne ne peut connaître. */
.at-progres-barre>span.at-progres-jauge--anime{
  transition:none;
  background:linear-gradient(90deg,transparent,var(--or),transparent);
  animation:at-progres-va-et-vient 1.3s linear infinite;
}
@keyframes at-progres-va-et-vient{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
@media(prefers-reduced-motion:reduce){
  .at-progres-barre>span.at-progres-jauge--anime{animation:none;opacity:.55}
}
.at-progres-etat{font-size:.92rem;color:var(--txt);margin:0 0 4px}
.at-progres-chrono{
  font-size:1.5rem;font-variant-numeric:tabular-nums;color:var(--txt);margin:0 0 6px;
}
.at-progres-note{font-size:.8rem;color:var(--txt-2);line-height:1.5;margin:0}
.at-progres-annuler{
  margin-top:14px;border:1px solid var(--trait);background:none;color:var(--txt-2);
  border-radius:8px;padding:7px 16px;font-family:inherit;font-size:.85rem;cursor:pointer;
}
.at-progres-annuler:hover{color:var(--txt)}

/* ---- La pop-up d'UN album (22/08/2026) -----------------------------------
   Même famille que .pp-overlay/.ga-overlay : créée par JavaScript, elle vit
   hors de la zone centrale. Un clic sur une photo dedans ouvre la
   visionneuse plein écran du site (kp-visionneuse), pas une pop-up
   imbriquée en plus — deux fenêtres l'une sur l'autre auraient été confus. */
.at-overlay{
  position:fixed;inset:0;z-index:1350;background:var(--voile);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.at-boite{
  background:var(--carte);border-radius:14px;max-width:640px;width:100%;
  max-height:86vh;max-height:86dvh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 14px 44px var(--ombre-couleur);
}
.at-entete{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 20px;border-bottom:1px solid var(--trait);flex:0 0 auto;
}
.at-entete b{font-size:1rem;color:var(--txt);font-family:Georgia,'Times New Roman',serif}
.at-fermer{background:none;border:0;font-size:1.1rem;line-height:1;color:var(--txt-2);cursor:pointer}
.at-fermer:hover{color:var(--txt)}
.at-popup-alerte{margin:14px 20px 0}
.at-popup-alerte[hidden]{display:none}
.at-popup-corps{padding:18px 20px;overflow-y:auto;flex:1 1 auto}

@media(max-width:560px){
  .pp-boite{max-width:100%}
  .ga-boite{max-width:100%}
  .at-boite{max-width:100%}
  .fiche-soustitre-actions{margin-left:0;width:100%;justify-content:flex-end}
  .photo-case--grande{height:220px}
}

/* ==========================================================================
   CARRÉS CLIQUABLES DE LA COLONNE DE GAUCHE (noyau/sidebar.php)
   Trois carrés au total, tous avec l'habillage de .compteur (même fond,
   même or, même petite légende) :
     · .compteur--lien   → « membres » et « soirées à venir », les deux
       carrés CÔTE À CÔTE dans .compteurs (19/08/2026) : liens simples vers
       l'annuaire et la liste des soirées, display:block seulement (la
       largeur vient déjà de la grille, un width:100%/margin-top casserait
       la mise en page 2 colonnes) ;
     · .compteur--action → « qui a vu ma fiche », SEUL sur toute la largeur
       sous les deux précédents (bouton, pas un lien : ouvre une pop-up).
   ========================================================================== */
.compteur--lien{
  display:block;text-decoration:none;color:inherit;
  transition:border-color .15s,transform .1s;
}
.compteur--lien:hover{border-color:var(--or);transform:translateY(-1px)}
.compteur--lien:active{transform:none}

.compteur--action{
  display:block;width:100%;cursor:pointer;
  font-family:inherit;
  /* Dans la grille .compteurs (kalipay.css) depuis le 20/08/2026 : pleine
     largeur par défaut (2e rangée sous les deux premiers carrés), comme
     avant quand ce bouton était un simple bloc en dehors de la grille.
     .compteurs--trois annule ce span sur mobile pour l'aligner en 3e
     colonne, sur la même rangée que les deux autres. */
  grid-column:1/-1;
  transition:border-color .15s,transform .1s;
}
.compteur--action:hover{border-color:var(--or);transform:translateY(-1px)}
.compteur--action:active{transform:none}

/* ---- La communauté : 4 carrés en tableau 2×2 (26/08/2026) --------------
   Présente quand le 4e carré (attente communauté) existe aussi
   (compteurs--quatre, voir noyau/sidebar.php) : les 3e/4e carrés
   (.compteur--action, qui a vu ma fiche + attente communauté) perdent
   leur pleine largeur pour rejoindre les 2 premiers dans la grille 2
   colonnes déjà posée par .compteurs — sur PC comme sur mobile. */
.compteurs--quatre .compteur--action{grid-column:auto}

/* ---- La communaute : 5 carres, 2x2 + bandeau (28/08/2026) --------------
   Arrivee du carre « bons plans » (noyau/sidebar.php). Presente quand le
   membre a en plus au moins un vote communaute ouvert : compteurs--cinq.

   PC   : membres | soirees / bons plans | qui a vu ma fiche, puis
          « attente communaute » SEUL sur toute la largeur. Les deux
          .compteur--action perdent donc leur span par defaut (comme dans
          compteurs--quatre) et seul le bandeau (.compteur--bandeau) le
          reprend. Un nombre impair de carres finirait sinon par une case
          orpheline a moitie de largeur.
   Mobile: les 4 premiers carres restent la rangee de pilules posee le
          27/08, le bandeau passe dessous en pleine largeur.

   ⚠️ Les surcharges mobiles sont ecrites JUSTE EN DESSOUS, et non dans le
   @media (max-width:900px) de la ligne 1548 : a specificite egale, ce bloc-ci
   etant plus bas dans le fichier, il aurait ecrase le mobile (meme piege que
   .seul-mobile et .compteur.compteur--lien, deja documente plus haut). */
.compteurs--cinq .compteur--action{grid-column:auto}

.compteurs--cinq .compteur--bandeau{
  grid-column:1/-1;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:10px 12px;
  background:linear-gradient(90deg,var(--brun-3),var(--carte-3));
  border-color:var(--or);
}
.compteurs--cinq .compteur--bandeau b{font-size:1.25rem}
.compteurs--cinq .compteur--bandeau small{margin-top:0;color:var(--or-txt)}
/* Chevron : le bandeau ouvre une pop-up, pas une page — meme signal que les
   listes cliquables du site. */
.compteurs--cinq .compteur--bandeau::after{
  content:'\203A';color:var(--or);font-size:1.5rem;line-height:0;
}

@media (max-width:900px){
  .compteurs--cinq{grid-template-columns:repeat(4,1fr);gap:6px}
  .compteurs--cinq .compteur{padding:9px 3px;gap:4px}
  .compteurs--cinq .compteur-icone{font-size:.95rem}
  .compteurs--cinq .compteur b{font-size:1.05rem}

  /* Le bandeau reprend toute la largeur sous la rangee de pilules, et
     recupere son libelle : .compteur small{display:none} vaut pour les
     pilules, ou l'icone suffit ; ici le chiffre seul ne dirait rien. */
  .compteurs--cinq .compteur--bandeau{padding:8px 14px;gap:8px}
  .compteurs--cinq .compteur--bandeau b{font-size:1.1rem}
  .compteurs--cinq .compteur--bandeau small{
    display:block;margin-top:0;font-size:.62rem;letter-spacing:1px;
  }
}

/* ---- Indicateur « Tirer pour actualiser » (kalipay.js, 20/08/2026) --------
   Épingle en haut de l'ÉCRAN (position:fixed, pas de #zone-centrale) : au-
   dessus de tout, y compris l'en-tête (z-index supérieur), le temps du
   geste. Caché au-dessus de l'écran par défaut (translateY), glisse en vue
   avec .ptr-visible ; .ptr-pret change juste la couleur pour confirmer que
   relâcher maintenant recharge la page. */
.ptr-indicateur{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  transform:translateY(-100%);
  transition:transform .15s ease-out,background-color .15s;
  background:var(--fond);color:var(--or-txt);
  text-align:center;font-size:.8rem;font-weight:700;
  padding:10px;pointer-events:none;
}
.ptr-indicateur.ptr-visible{transform:translateY(0)}
.ptr-indicateur.ptr-pret{background:var(--trait);color:var(--txt)}

.qv-overlay{
  position:fixed;inset:0;background:var(--ombre-forte);z-index:9998;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.qv-overlay[hidden]{display:none}
.qv-boite{
  background:var(--carte);border-radius:12px;max-width:460px;width:100%;
  max-height:86vh;max-height:86dvh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 12px 40px var(--ombre-couleur);
}
.qv-entete{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--trait);flex:0 0 auto;
}
.qv-entete b{font-size:.98rem;color:var(--txt)}
.qv-fermer{background:none;border:0;font-size:1.1rem;cursor:pointer;color:var(--txt-2);line-height:1}

/* ---- Grille 2 colonnes (19/08/2026) ---------------------------------------
   Avant : une liste 1 colonne, hauteur libre (flex:1 1 auto), autant de
   lignes que la hauteur de l'écran le permettait. Maintenant : une grille
   fixe à 2 colonnes, calibrée pour montrer 8 LIGNES (16 cartes) quel que
   soit l'écran, le reste (jusqu'à 50 personnes, PF_VUES_DERNIERS,
   inscription/profils.php) au-delà par défilement DANS la même boîte —
   .qv-boite garde exactement ses proportions d'avant (max-width:460px,
   max-height:86vh;max-height:86dvh), seul l'intérieur change.
   132px = hauteur fixe d'une carte (.qv-ligne ci-dessous) ; 10px = l'écart
   entre deux lignes (gap). Si .qv-ligne change de hauteur, recalculer ici. */
.qv-liste{
  overflow-y:auto;padding:10px 14px;flex:1 1 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  align-content:start;
  max-height:calc(8 * 132px + 7 * 10px);
}
.qv-vide{padding:26px 10px;text-align:center;color:var(--txt-2);font-size:.86rem;grid-column:1 / -1}

/* ---- Carte VERTICALE (avant : ligne horizontale pleine largeur) -----------
   Photo au-dessus, texte centré en dessous : une carte deux fois moins
   large qu'avant (2 colonnes) n'a plus la place pour photo + texte côte à
   côte. Hauteur FIXE (132px) : c'est elle qui calibre les « 8 lignes
   visibles » de .qv-liste ci-dessus — un pseudo ou une ville trop longue est
   coupée (ellipsis) plutôt que d'agrandir la carte et de dérégler le compte. */
.qv-ligne{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:4px;height:132px;padding:12px 8px;box-sizing:border-box;overflow:hidden;
  border:1px solid var(--trait);border-radius:10px;color:inherit;text-decoration:none;
}
a.qv-ligne:hover{background:var(--fond-3);border-color:var(--trait)}
/* Carte d'un profil « attente communauté » (assets/kalipay.js, cvLigne()) :
   même carte que « qui a vu ma fiche », mais sur un <button> (rien à
   naviguer, juste ouvrir la fiche) plutôt qu'un <a>. Sans ce reset, le
   navigateur pose son propre fond/police de bouton par défaut derrière —
   illisible avec les couleurs claires prévues pour un fond transparent
   (signalé le 26/08/2026, capture à l'appui). */
button.qv-ligne{
  background:none;-webkit-appearance:none;appearance:none;
  font:inherit;width:100%;cursor:pointer;
}
button.qv-ligne:hover{background:var(--fond-3);border-color:var(--trait)}
/* Déjà vu à la précédente ouverture de la pop-up (v.nouveau, kalipay.js) :
   grisé, pour laisser ressortir les nouveaux visiteurs. */
.qv-ligne--vu{opacity:.5}
.qv-ligne--vu:hover{opacity:.8}
.qv-photo{
  width:48px;height:48px;flex:0 0 auto;border-radius:50%;object-fit:cover;
  border:1px solid var(--trait);background:var(--fond-3);
}
.qv-photo--vide{
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--txt-4);
}
.qv-corps{min-width:0;width:100%}
.qv-pseudo{
  display:block;font-weight:800;color:var(--txt);font-size:.82rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qv-ville{
  display:block;font-size:.72rem;color:var(--txt-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qv-quand{
  display:block;font-size:.68rem;color:var(--txt-2);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.qv-pied{
  margin:0;padding:11px 18px;border-top:1px solid var(--trait);flex:0 0 auto;
  font-size:.74rem;color:var(--txt-2);text-align:center;
}

@media(max-width:560px){
  .qv-boite{max-width:100%}
}

/* ---- Contenu de la pop-up « 📲 Recommander via WhatsApp »
   (noyau/sidebar.php) -------------------------------------------------------
   Réutilise .qv-overlay/.qv-boite/.qv-entete/.qv-fermer/.bouton ci-dessus :
   seuls les 3 blocs texte + bouton sont propres à cette pop-up. Provisoire,
   ajouté le 21/08/2026. */
.whatsapp-liste{
  overflow-y:auto;padding:14px 18px;flex:1 1 auto;
  display:flex;flex-direction:column;gap:16px;
}
.whatsapp-bloc{border:1px solid var(--trait);border-radius:10px;padding:12px}
.whatsapp-texte{margin:0 0 10px;font-size:.86rem;color:var(--txt-1);line-height:1.5}

/* ---- Panneau ⚠️ Notifications ---------------------------------------------
   Réutilise .qv-overlay/.qv-boite/.qv-entete/.qv-fermer/.qv-pied/.qv-vide
   ci-dessus (même fenêtre que « qui a vu ma fiche ») : seule la liste change
   — des lignes de texte simples, pas une grille de cartes-photo. Ajouté le
   20/08/2026. */
.notif-liste{
  overflow-y:auto;padding:6px 14px;flex:1 1 auto;
  display:flex;flex-direction:column;gap:2px;
  max-height:60vh;max-height:60dvh;
}
.notif-ligne{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 8px;border-radius:8px;color:inherit;text-decoration:none;
  border-bottom:1px solid var(--trait);
}
.notif-ligne:last-child{border-bottom:0}
a.notif-ligne:hover,button.notif-ligne:hover{background:var(--fond-3)}
/* Ligne-bouton : une notification qui ouvre une pop-up au lieu d'une adresse
   (NOTIF_POPUPS, kalipay.js). Le <button> est ramene a l'aspect d'une ligne
   ordinaire — largeur pleine, texte a gauche, police heritee. 05/09/2026. */
button.notif-ligne{
  width:100%;text-align:left;font:inherit;cursor:pointer;
  background:none;border:0;border-bottom:1px solid var(--trait);
}
button.notif-ligne:last-child{border-bottom:0}
/* Icône + texte côte à côte (notifLigne(), kalipay.js) : la ligne du bas
   (.notif-quand) reste seule sous ce groupe. Ajouté le 21/08/2026. */
.notif-ligne-haut{display:flex;align-items:flex-start;gap:6px}
.notif-icone{flex:0 0 auto;font-size:.95rem;line-height:1.4}
.notif-texte{font-size:.84rem;color:var(--txt);line-height:1.4}
.notif-quand{font-size:.7rem;color:var(--txt-2)}

/* ---- Pop-up ❤️ Coups de cœur -----------------------------------------
   Réutilise .qv-overlay/.qv-boite/.qv-entete/.qv-fermer comme les deux
   pop-up ci-dessus. Deux onglets (Reçus/Émis), chacun sa propre liste
   défilante — chargée 8 par 8 au défilement (coeursCharger(), kalipay.js).
   Ajouté le 20/08/2026. */
.coeurs-onglets{display:flex;border-bottom:1px solid var(--trait);flex:0 0 auto}
.coeurs-onglet{
  flex:1 1 50%;background:none;border:0;padding:11px 8px;cursor:pointer;
  font-size:.84rem;font-weight:700;color:var(--txt-2);border-bottom:2px solid transparent;
}
.coeurs-onglet--actif{color:var(--accent-2);border-bottom-color:var(--accent-2)}
.coeurs-total{font-weight:400;color:var(--txt-2);font-size:.78rem}
.coeurs-panneau{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.coeurs-panneau[hidden]{display:none}
.coeurs-liste{
  overflow-y:auto;padding:6px 14px;flex:1 1 auto;
  display:flex;flex-direction:column;gap:2px;
  max-height:60vh;max-height:60dvh;
}
.coeurs-ligne{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:10px 8px;border-radius:8px;color:inherit;text-decoration:none;
  border-bottom:1px solid var(--trait);
}
.coeurs-ligne:last-child{border-bottom:0}
a.coeurs-ligne:hover{background:var(--fond-3)}
/* Reçu depuis la dernière ouverture de la pop-up (n.nouveau, onglet Reçus
   seulement — demande du 20/08/2026) : surbrillance rouge, cohérente avec
   .nav-pastille (même rouge). */
.coeurs-ligne--nouveau{background:var(--accent-voile);border-color:var(--accent-voile)}
a.coeurs-ligne--nouveau:hover{background:var(--accent-voile)}
.coeurs-ligne--nouveau .coeurs-pseudo{color:var(--lien)}
.coeurs-pseudo{font-size:.86rem;font-weight:700;color:var(--txt)}
.coeurs-quand{font-size:.7rem;color:var(--txt-2);flex:0 0 auto;white-space:nowrap}
.coeurs-chargement{padding:10px;text-align:center;color:var(--txt-2);font-size:.76rem}
/* Bouton « Voir plus » sous la liste (01/09/2026) : charge les 20 suivants
   sans dépendre de l'ascenseur, retiré dès que tout est affiché. */
.coeurs-plus{
  flex:0 0 auto;margin:0;padding:11px 8px;border:0;border-top:1px solid var(--trait);
  background:none;cursor:pointer;font-size:.8rem;font-weight:700;color:var(--accent-2);
}
.coeurs-plus:hover{background:var(--fond-3)}
.coeurs-plus[disabled]{color:var(--txt-2);cursor:default;background:none}

/* ---- La même liste, mais dans la colonne de droite (12/09/2026) ---------
   Troisième onglet de la carte de droite (noyau/sidebar-droite.php) : même
   HTML, même module JavaScript, même API que la pop-up ci-dessus. Trois
   réglages seulement changent : plus de hauteur maximale (c'est la colonne
   entière qui défile, pas la liste), presque plus de rembourrage latéral
   (300px de large en tout) et des onglets/lignes d'un cran plus petits. */
.coeurs-zone--colonne .coeurs-onglets{margin-bottom:4px}
.coeurs-zone--colonne .coeurs-onglet{padding:8px 4px;font-size:.78rem}
.coeurs-zone--colonne .coeurs-liste{padding:4px 0;max-height:none;overflow:visible}
.coeurs-zone--colonne .coeurs-ligne{padding:8px 4px;gap:6px;min-width:0}
.coeurs-zone--colonne .coeurs-pseudo{
  font-size:.8rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.coeurs-zone--colonne .coeurs-quand{font-size:.66rem}
.coeurs-zone--colonne .coeurs-plus{width:100%;padding:9px 4px;font-size:.76rem}

/* Un <button> peut aussi porter .bouton (ex. « ❤️ Mes coups de cœur », qui
   ouvre une pop-up plutôt que de naviguer, noyau/sidebar.php) : annule
   seulement le rendu qu'un <button> ne reçoit pas par défaut d'un
   navigateur (police, curseur, pleine largeur). PAS border/background ici
   — un <button class="bouton bouton--clair"> a plus de spécificité
   (élément+classe) que .bouton--clair (classe seule) : les y ajouter
   écraserait le fond/la bordure de la variante malgré l'ordre du fichier
   (bug du 20/08/2026, le bouton rendait sans fond ni bordure, contrairement
   aux <a class="bouton bouton--clair"> voisins). Les UA-styles par défaut
   du navigateur (origine la plus faible) s'effacent déjà tout seuls devant
   .bouton--clair/.bouton--or, pas besoin de les forcer ici. */
button.bouton{font:inherit;cursor:pointer;width:100%;appearance:none}

/* Rappel « photo en attente de validation », sous une galerie de la fiche.
   Écrit par fa_note_attente() (inscription/fiche-affichage.php), et pour le
   seul propriétaire : la galerie ne montrant que les photos approuvées, sans
   ce mot une nouvelle photo semblait perdue. */
.ph-note-attente{
  margin:10px 0 0;padding:8px 12px;border-radius:8px;
  background:var(--carte);border:1px solid var(--or);
  font-size:.79rem;color:var(--jaune);line-height:1.5;
}
.ph-note-attente b{font-weight:800}

/* ==========================================================================
   PAGE AIDE — vues/aide.php (19/08/2026)

   Deux blocs distincts :
     · .aide-mods       — le tableau du haut, chantiers en cours / réalisés,
                           deux colonnes côte à côte, chacune avec son propre
                           ascenseur.
     · .aide-sections    — le tableau du bas, une carte par grande partie du
                            site (soirées, membres, messages…), chacune avec
                            son propre ascenseur.

   .aide-ascenseur porte le défilement interne commun aux deux : hauteur
   fixe, scroll vertical seul — le reste de la page ne bouge pas pendant
   qu'on lit un encadré. Cohérent avec .qv-boite / .mbf-boite déjà présents
   sur le site pour les hauteurs fixes en pop-up.
   ========================================================================== */

.aide-mods{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:8px}
@media(max-width:700px){.aide-mods{grid-template-columns:1fr}}

.aide-mods-col{background:var(--fond-3);border:1px solid var(--trait);border-radius:12px;overflow:hidden}

.aide-mods-entete{
  margin:0;padding:11px 16px;font-size:.86rem;font-weight:800;color:var(--txt);
  border-bottom:1px solid var(--trait);background:var(--carte);
}
.aide-mods-entete--cours{color:var(--orange-txt)}
.aide-mods-entete--fait{color:var(--vert-txt)}

.aide-mods-liste{padding:6px 4px}

.aide-mods-item{
  display:flex;gap:10px;align-items:flex-start;
  padding:10px 12px;border-bottom:1px solid var(--trait);font-size:.85rem;line-height:1.55;
}
.aide-mods-item:last-child{border-bottom:0}

.aide-mods-emoji{flex:0 0 auto;font-size:1rem}
.aide-mods-texte{display:flex;flex-direction:column;gap:2px;color:var(--txt-1)}
.aide-mods-texte b{color:var(--txt)}
.aide-mods-detail{font-size:.79rem;color:var(--txt-2)}
.aide-mods-date{flex:0 0 auto;font-size:.76rem;font-weight:700;color:var(--jaune);min-width:72px}

/* ---------- Ascenseur commun : hauteur fixe, défilement propre ---------- */
.aide-ascenseur{
  max-height:260px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--or) var(--fond-3);
}
.aide-ascenseur::-webkit-scrollbar{width:8px}
.aide-ascenseur::-webkit-scrollbar-track{background:var(--fond-3)}
.aide-ascenseur::-webkit-scrollbar-thumb{background:var(--or);border-radius:8px}

/* ---------- Le mode d'emploi, section par section ---------- */
.aide-sections{display:flex;flex-direction:column;gap:14px}

.aide-section{background:var(--fond-3);border:1px solid var(--trait);border-radius:12px;overflow:hidden}

.aide-section-titre{
  margin:0;padding:12px 16px;font-size:.94rem;font-weight:800;color:var(--txt);
  background:var(--carte);border-bottom:1px solid var(--trait);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}

.aide-section-corps{padding:14px 18px;font-size:.89rem;line-height:1.75;color:var(--txt-1)}
.aide-section-corps p{margin-bottom:10px}
.aide-section-corps p:last-child{margin-bottom:0}
.aide-section-corps b{color:var(--txt)}

.aide-liste{margin:0 0 10px 20px;padding:0}
.aide-liste li{margin-bottom:6px}
.aide-liste:last-child{margin-bottom:0}

/* Ancres de l'aide (24/09/2026) — ids posés par vues/aide.php, défilement
   dans assets/kalipay.js (préfixe aan_). Le titre est un flex : le texte
   (et ses emojis éventuellement convertis en <img>) reste groupé dans
   .aide-titre-txt, sinon chaque morceau deviendrait un élément flex à part. */
.aide-section,.aide-famille{scroll-margin-top:12px}
.aide-titre-txt{min-width:0}
.aide-copier{
  flex:none;background:none;border:0;padding:2px 7px;border-radius:6px;
  font-size:.85rem;line-height:1.4;color:inherit;cursor:pointer;opacity:.5;
}
.aide-copier:hover,.aide-copier:focus-visible{opacity:1;background:var(--or-voile)}
.aide-copier--ok{opacity:1;color:var(--or)}
.aide-cible{outline:2px solid var(--or);outline-offset:2px;transition:outline-color .4s}
.aide-neuf-lien{color:var(--lien);text-decoration:underline dotted;text-underline-offset:3px}
.aide-neuf-lien:hover{text-decoration-style:solid}
.aide-neuf-lien b{color:var(--lien)}

/* Un ascenseur .aide-section-corps est plus haut que ceux du tableau du
   haut : les textes y sont plus longs. */
.aide-section-corps.aide-ascenseur{max-height:220px}

@media(max-width:640px){
  .aide-section-corps.aide-ascenseur{max-height:260px}
}

/* ==========================================================================
   PUBLICATIONS — le « mur » d'une fiche (20/08/2026)

   Bouton flottant global (posé par noyau/layout.php, hors de #zone-centrale)
   + pop-up de création/édition (construite par kalipay.js, mêmes classes
   .fe-overlay/.fe-boite/.fe-entete/.fe-corps/.fe-bas que la pop-up des
   crayons de fiche — même famille visuelle, pas de doublon de style) +
   cartes du mur (fa_publication_carte(), fiche-affichage.php), qui
   réutilisent .ph-reagir/.ph-reagir-lu (réactions) tels quels.
   ========================================================================== */

/* Inversé le 24/08/2026 (demande utilisateur) : bouton + posé à GAUCHE,
   .fil-scroll-haut passe à DROITE en miroir — géométrie ci-dessous
   inchangée (distances identiques), seul le côté change. */
.pub-flottant{
  position:fixed;left:22px;bottom:22px;z-index:1200;
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--or),var(--or-fonce));color:var(--sur-or);
  font-size:1.8rem;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px var(--ombre-couleur);transition:transform .15s;
}
.pub-flottant:hover{transform:translateY(-2px) scale(1.04)}
@media(max-width:640px){
  .pub-flottant{left:14px;bottom:14px;width:50px;height:50px;font-size:1.6rem}
}

/* Masqué sur mobile ET dans l'application installée (PWA) — demande du
   07/09/2026 : il fait doublon avec le bouton « ✍️ Publier » déjà posé dans
   l'onglet Publications de la fiche (seul endroit où l'on publie — seul le
   propriétaire publie chez lui, voir inscription/fiche-affichage.php) et
   gêne le bandeau d'onglets du bas (noyau/barre-bas.php) sur petit écran.
   Le web mobile et l'application installée partagent la même feuille de
   style responsive — rien ne les distingue en CSS (voir le cookie kp_ctx,
   assets/kalipay.js, qui ne sert qu'aux statistiques) : cette seule règle
   ≤900px couvre donc les deux. Sur PC (>900px), le bouton reste affiché. */
@media(max-width:900px){
  .pub-flottant{display:none}

  /* SAUF SUR LE FIL D'ACTU (13/09/2026). Le masquage du 07/09/2026 visait
     les pages ou publier n'a pas de sens : le doublon avec « Publier » de
     l'onglet Publications tient partout, mais pas la ou l'on vient
     justement lire et alimenter le fil. Le bouton y revient donc, et
     nulle part ailleurs.

     Le bouton vit HORS de #zone-centrale (noyau/layout.php) : il ne peut
     pas savoir sur quelle page il se trouve. C'est :has() qui le lui dit,
     en regardant si la zone centrale contient la liste du fil
     ([data-fil-liste], vues/accueil.php). Pourquoi cette marque plutot que
     data-route="" : la page d'accueil sert AUSSI l'ecran d'attente des
     profils incomplets ($kp_filAcces faux), qui n'a pas de fil a
     alimenter. Pourquoi pas de JavaScript : la navigation fluide remplace
     le contenu de #zone-centrale a chaque page, le selecteur se reevalue
     tout seul — un drapeau pose en JS serait a reposer a chaque fois.

     Navigateur trop ancien pour :has() : le bouton reste masque, exactement
     l'etat du 07/09/2026. Rien ne casse.

     Le bouton monte deja au-dessus du bandeau d'onglets : c'est la regle
     .kp-connecte .pub-flottant/.fil-scroll-haut du bloc ≤900px plus bas
     (--barre-bas-h), rien a redire ici. */
  body:has(#zone-centrale [data-fil-liste]) .pub-flottant{display:flex}
}

/* ---- Alignement sur la colonne du MILIEU (≥901px), pas sur la fenêtre ---
   Demande du 21/08/2026 : le bouton doit rester posé au même endroit
   (bas-droite, même style, mêmes 22px d'écart) mais collé à l'angle bas-
   droit de #zone-centrale (.col-centre), pas à celui de la fenêtre — sur
   un écran large, les deux ne coïncident plus (colonne de droite + son
   propre écart entre le bouton et le vrai bord de l'écran).

   Le bouton reste `position:fixed` (posé par noyau/layout.php hors de
   #zone-centrale, condition inchangée — il doit survivre à la navigation
   fluide et ne jamais être rogné par un overflow, voir plus haut) : seul
   son `right` change, calculé pour tomber exactement sur le bord droit de
   .col-centre à chacun des 3 régimes de largeur déjà utilisés par le
   gabarit (voir .colonnes/.kali-page/#colonnes plus haut dans ce fichier) :

     · 901–1459px (depuis le 16/09/2026, .kali-page n'est plus plafonné à
       1120px) : .kali-page occupe 100% - 32px (2×16px de padding du
       body) — la distance jusqu'au bord droit de .col-centre reste donc
       CONSTANTE quelle que soit la largeur : 16 (padding) + 300 (colonne
       de droite) + 20 (espace) = 336px, +22px d'écart = 358px.
     · ≥1460px : #colonnes sort du conteneur et colle ses deux colonnes
       latérales aux bords réels de l'écran (voir plus haut, « Grands
       écrans ») ; .col-centre prend --centre-l (800 à 1100px), centré
       dans l'espace restant. Distance jusqu'à son bord : 50vw -
       --centre-l/2, +2px = calc(50vw - var(--centre-l)/2 + 2px)
       (= 50vw - 398px quand --centre-l vaut 800px).

   En dessous de 901px, la colonne de droite est masquée (.col-droite
   {display:none}, voir @media max-width:900px) : .col-centre occupe déjà
   toute la largeur visible, la règle par défaut ci-dessus (right:22px,
   ou 14px ≤640px) tombe donc déjà au bon endroit — rien à ajouter ici. */
@media (min-width:901px) and (max-width:1459px){
  .pub-flottant{left:358px}
}
@media (min-width:1460px){
  .pub-flottant{left:calc(50vw - var(--centre-l) / 2 + 2px)}
}

/* ---- Exception : pages « pleine largeur » (routes.php,
   'pleine_largeur' => true — colonnes de gauche/droite masquées,
   .colonnes--pleine) --------------------------------------------------------
   Sur ces pages .col-centre occupe TOUTE la largeur de .kali-page (plus de
   colonne de droite à éviter) : les 3 formules ci-dessus, calées sur la
   largeur d'une colonne de droite (300px) + son espace (20px), tomberaient
   trop loin à gauche. On reprend le même calcul que .kali-page lui-même
   (padding du body, plafond 1120px centré, puis astuce 100vw ≥1460px, voir
   plus haut dans ce fichier) sans plus rien retrancher pour une colonne de
   droite qui n'existe pas ici. :has() est très largement supporté
   (Chrome/Edge/Safari/Firefox, 2023+) ; à défaut, ces pages gardent le
   calcul « avec colonne de droite » ci-dessus — décalage mineur, sans rien
   casser. */
@media (min-width:901px) and (max-width:1459px){
  body:has(.colonnes--pleine) .pub-flottant{left:38px}
}
@media (min-width:1460px){
  body:has(.colonnes--pleine) .pub-flottant{left:22px}
}

/* ==========================================================================
   FIL DE L'ACTU — bouton « remonter en haut » (23/08/2026)

   Posé par noyau/layout.php pour tout membre connecté depuis le 27/08/2026
   (il vivait auparavant dans vues/accueil.php seule) : hors de
   #zone-centrale, il survit à la navigation fluide et sert sur toutes les
   pages. En filigrane : semi-transparent au repos, opaque au survol. Masqué
   par défaut, la visibilité (classe --visible) est togglée par
   assets/fil-actu.js selon le défilement de #zone-centrale — sur la
   messagerie, cette zone ne défile pas (pleine hauteur, voir § SOUS 860px),
   le bouton n'y apparaît donc jamais et ne peut pas gêner l'envoi.

   Alignement à GAUCHE : même géométrie que .pub-flottant (bord droit,
   ci-dessus) mais MIROIR — .colonnes est symétrique (grid-template-columns:
   300px 1fr 300px, colonne de gauche et de droite à 300px toutes les deux),
   donc les mêmes 3 valeurs de calc() s'appliquent telles quelles à `left`. */
/* Inversé le 24/08/2026 (demande utilisateur) : passe à DROITE, .pub-flottant
   passe à GAUCHE en miroir — géométrie ci-dessous inchangée, seul le côté
   change. */
.fil-scroll-haut{
  position:fixed;right:22px;bottom:22px;z-index:1150;
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:var(--voile);color:var(--or);
  font-size:1.3rem;line-height:1;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s,transform .15s;
  box-shadow:0 4px 14px var(--ombre-couleur);
}
.fil-scroll-haut--visible{opacity:.5;visibility:visible;pointer-events:auto}
.fil-scroll-haut--visible:hover,
.fil-scroll-haut--visible:focus-visible{opacity:.95;transform:translateY(-2px)}
@media(max-width:640px){
  .fil-scroll-haut{right:14px;bottom:14px;width:40px;height:40px;font-size:1.15rem}
}
@media (min-width:901px) and (max-width:1459px){
  .fil-scroll-haut{right:358px}
}
@media (min-width:1460px){
  .fil-scroll-haut{right:calc(50vw - var(--centre-l) / 2 + 2px)}
}

/* ---- Formulaire de la pop-up (création / édition) ----
   Le bouton emoji est POSÉ SUR la zone de texte (coin bas-droit), pas
   au-dessous : gagne la ligne qu'il prenait avant. .pub-zone reste
   `position:relative` pour l'accueillir ; padding-right sur le textarea pour
   qu'un texte long ne passe pas dessous. */
.pub-zone{position:relative}
.pub-zone textarea{min-height:140px;line-height:1.6;resize:vertical;width:100%;padding-right:118px}
.pub-zone-bas{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:8px}
.pub-compteur{font-size:.78rem;color:var(--txt-2)}

/* .pub-zone-outils regroupe les boutons du coin (émoji, lien, et sondage
   pour les administrateurs) — un seul point d'ancrage `position:absolute`
   au lieu d'un par bouton. Ajouté le 26/08/2026. Le bouton emoji ouvre le
   sélecteur unique du site depuis le 23/09/2026 (assets/emoji-picker.js). */
.pub-zone-outils{position:absolute;right:8px;bottom:8px;z-index:2;display:flex;gap:6px}
.pub-emoji-bouton,.pub-lien-bouton,.pub-sondage-bouton{
  background:var(--fond-3);border:1px solid var(--trait);border-radius:8px;cursor:pointer;
  font-size:1.05rem;line-height:1;padding:6px 9px;
}
.pub-emoji-bouton:hover,.pub-lien-bouton:hover{background:var(--or-voile);border-color:var(--or)}
.pub-sondage-bouton{color:var(--or)}
.pub-sondage-bouton:hover{background:var(--or-voile);border-color:var(--or)}

/* #pub-sondage-bulle : même principe que #pub-emoji-bulle ci-dessus, en
   liste (question complète) plutôt qu'en grille — admin uniquement. */
#pub-sondage-bulle{
  position:fixed;z-index:1400;
  background:var(--carte);border-radius:12px;box-shadow:0 10px 26px var(--ombre-couleur);
  padding:8px;display:flex;flex-direction:column;gap:2px;width:260px;max-height:220px;overflow-y:auto;
}
#pub-sondage-bulle[hidden]{display:none}
#pub-sondage-bulle button{
  border:0;background:none;text-align:left;color:var(--jaune-txt);font-size:.85rem;
  line-height:1.3;padding:7px 8px;border-radius:8px;cursor:pointer;
}
#pub-sondage-bulle button:hover{background:var(--or-voile)}
#pub-sondage-bulle p{margin:4px 8px;color:var(--txt-2);font-size:.8rem}

/* Bouton emoji du textarea « annonce » (pop-up d'édition de fiche) : ouvre
   le sélecteur unique du site, voir assets/emoji-picker.js. */
.fea-annonce-zone{position:relative}
.fea-annonce-zone textarea{padding-right:42px}
.fea-emoji-bouton{
  position:absolute;right:8px;bottom:8px;z-index:2;
  background:var(--fond-3);border:1px solid var(--trait);border-radius:8px;cursor:pointer;
  font-size:1.05rem;line-height:1;padding:6px 9px;
}
.fea-emoji-bouton:hover{background:var(--or-voile);border-color:var(--or)}

/* ---- Joindre une photo OU une vidéo (03/09/2026) ----------------------
   Une seule ligne, deux moitiés égales : le membre voit d'un coup d'œil ses
   deux possibilités sans que la pop-up s'allonge. Les <input type=file> sont
   masqués par l'attribut `hidden` (kalipay.js) — ce sont les <label for> qui
   ouvrent le sélecteur : le contrôle natif n'est pas stylable, et sa
   mention « Aucun fichier choisi » prenait toute la largeur.
   Le bouton vidéo porte la contrainte (3 max · 2 min · 500 Mo) en infobulle
   plutôt qu'en note sous le champ : même information, aucune ligne de plus.
   .pub-fichiers--solo : mode « modifier », la vidéo disparaît et la photo
   reprend toute la largeur (voir pubOuvrir()). */
.pub-fichiers{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.pub-fichiers--solo{grid-template-columns:1fr}
.pub-fichier{
  text-align:center;padding:9px 0;border:1px dashed var(--trait);border-radius:10px;
  font-size:.85rem;color:var(--txt-1);cursor:pointer;user-select:none;
}
.pub-fichier:hover{border-style:solid;border-color:var(--or);color:var(--or-txt);background:var(--or-voile)}
.pub-fichier[hidden]{display:none}

/* Vidéo choisie : son NOM, pas une lecture — un aperçu de 500 Mo ferait
   tomber l'onglet. Même bouton ✕ que la photo (.pub-photo-retirer). */
.pub-video-choisie{
  margin-top:10px;position:relative;display:inline-block;max-width:100%;
  padding:8px 34px 8px 12px;border:1px solid var(--trait);border-radius:10px;
  font-size:.85rem;color:var(--txt-1);word-break:break-all;
}
.pub-video-retirer{top:50%;transform:translateY(-50%);right:6px}

.pub-photo-apercu{margin-top:10px;position:relative;display:inline-block}
.pub-photo-apercu img{max-width:100%;max-height:220px;border-radius:10px;display:block}
.pub-photo-retirer{
  position:absolute;top:6px;right:6px;background:var(--voile);color:var(--sur-couleur);
  border:0;border-radius:50%;width:24px;height:24px;cursor:pointer;line-height:1;
}

/* ---- Le mur : une carte par publication ----
   Deux colonnes côte à côte à partir de 760px : le contenu (.pub-carte-gauche,
   ~65%) à gauche, les commentaires (.pub-commentaires, ~35%) à droite,
   séparés par une bordure verticale — demande du 20/08/2026. En dessous de
   760px, .pub-commentaires n'est plus un flex item : elle repasse sous le
   contenu, pleine largeur, comme avant ce changement. */
.pub-liste{display:flex;flex-direction:column;gap:14px}
.pub-carte{
  background:var(--fond-3);border:1px solid var(--trait);border-radius:14px;padding:16px 18px;
  display:flex;gap:18px;align-items:flex-start;
}
.pub-carte-gauche{flex:1 1 0;min-width:0}
.pub-carte-entete{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.pub-carte-pseudo{font-weight:800;color:var(--or-txt)}
.pub-carte-date{font-size:.78rem;color:var(--txt-2)}
.pub-carte-outils{margin-left:auto;display:flex;gap:6px}
.pub-carte-outils .fiche-crayon{width:30px;height:30px}
.pub-carte-texte{margin:0 0 10px;line-height:1.6;color:var(--txt-1);white-space:pre-wrap;word-break:break-word}
/* La photo d'une publication s'affiche en miniature, pas pleine largeur —
   le clic l'ouvre en grand dans la visionneuse déjà utilisée par l'album
   photo (.kp-visionneuse, kalipay.js) : même lien <a class="ph">, même
   gestionnaire de clic, juste étendu à « .pub-carte-photo .ph » — pas de
   second visionneuse à construire. */
.pub-carte-photo{margin-bottom:10px}
.pub-carte-photo .ph{
  display:inline-block;position:relative;height:200px;max-width:100%;
  overflow:hidden;border-radius:10px;cursor:zoom-in;
}
.pub-carte-photo .ph img{display:block;height:100%;width:auto;max-width:100%;object-fit:cover}
.pub-carte-photo .ph::after{
  content:'⤢';position:absolute;top:6px;right:8px;
  font-size:.78rem;color:var(--sur-couleur);opacity:0;transition:opacity .15s;
  text-shadow:0 1px 3px var(--voile-fort);pointer-events:none
}
.pub-carte-photo .ph:hover::after{opacity:.95}
@media(max-width:480px){
  .pub-carte-photo .ph{height:160px}
}
.pub-carte-bas{position:relative;min-height:30px;margin-bottom:8px}
.pub-carte-bas .ph-reagir,
.pub-carte-bas .ph-reagir-lu{position:static}
/* Détail par emoji sur SA PROPRE publication (27/08/2026) : .ph-reagir-detail
   est en position:absolute sur une photo (coin bas-droit de .ph-case) — dans
   une carte du mur il doit rester dans le flux, comme .ph-reagir-lu. */
.pub-carte-bas .ph-reagir-detail{position:static;display:inline-flex;width:fit-content}

/* ---- Commentaires — colonne de droite (~35%), à partir de 760px ----
   Hauteur limitée + ascenseur interne : une publication très commentée ne
   doit pas étirer indéfiniment la carte, seule la colonne défile. */
.pub-commentaires{
  flex:0 0 34%;max-width:300px;min-width:200px;
  border-left:1px solid var(--trait);padding-left:18px;
  max-height:280px;overflow-y:auto;
}
.pub-commentaire{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:.88rem;margin-bottom:6px}
.pub-commentaire-pseudo{font-weight:700;color:var(--or-txt)}
.pub-commentaire-texte{color:var(--txt-1);white-space:pre-wrap;word-break:break-word}
.pub-commentaire-suppr{
  margin-left:auto;background:none;border:0;color:var(--txt-2);cursor:pointer;font-size:.85rem;
}
.pub-commentaire-suppr:hover{color:var(--rouge)}

/* Réaction sur un commentaire (👍 ❤️ 🔥 💧) — même bouton .ph-reagir-bouton
   que les publications/photos (fa_commentaire_reagir(), fiche-affichage.php ;
   fil_rendre_commentaires_html(), fil-actu.php pour la pop-up du fil), mais
   EN LIGNE (pas position:absolute) et plus discret, pour rester lisible
   dans une ligne de commentaire compacte. Ajouté le 24/08/2026. */
.pub-commentaire .ph-reagir,
.fil-commentaire .ph-reagir{position:static}
.pub-commentaire .ph-reagir-bouton,
.fil-commentaire .ph-reagir-bouton{
  background:var(--fond-3);border-color:var(--trait);color:var(--txt-1);padding:2px 7px;font-size:.78rem;
}
.pub-commentaire .ph-reagir-bouton:hover,
.pub-commentaire .ph-reagir-bouton--actif,
.fil-commentaire .ph-reagir-bouton:hover,
.fil-commentaire .ph-reagir-bouton--actif{background:linear-gradient(135deg,var(--or),var(--or-fonce));border-color:var(--or);color:var(--sur-or)}
/* .fil-commentaire est en flux texte normal (pas flex, voir plus bas dans
   ce fichier) : le widget doit s'aligner EN LIGNE avec le texte, pas sur
   sa propre ligne. */
.fil-commentaire .ph-reagir{display:inline-flex;vertical-align:middle;margin-left:6px}

/* La colonne des commentaires est étroite : un champ et un bouton « Envoyer »
   côte à côte ne laissaient qu'une centaine de pixels pour écrire. Le champ
   prend donc toute la largeur, sur sa propre ligne, et le bouton devient une
   pastille ronde posée en dessous à droite. Le champ est un textarea qui
   grandit tout seul (assets/kalipay.js) jusqu'à ~4 lignes. */
.pub-commentaire-form{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-top:8px}
.pub-commentaire-form textarea{
  width:100%;box-sizing:border-box;display:block;
  border:1px solid var(--trait);border-radius:14px;padding:8px 14px;font-size:.88rem;
  font-family:inherit;line-height:1.35;resize:none;overflow-y:auto;
  min-height:36px;max-height:98px;
}
.pub-commentaire-form .pub-commentaire-envoi{
  width:36px;height:36px;flex:0 0 auto;padding:0;border-radius:50%;
  font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;
}

/* En dessous de 760px : les deux colonnes ne tiennent plus côte à côte —
   les commentaires repassent sous le contenu, pleine largeur, sans limite
   de hauteur ni ascenseur (comme avant ce changement). */
@media(max-width:760px){
  .pub-carte{flex-direction:column}
  .pub-commentaires{
    flex:1 1 auto;max-width:none;min-width:0;width:100%;
    border-left:0;padding-left:0;
    border-top:1px solid var(--trait);padding-top:10px;margin-top:4px;
    max-height:none;overflow:visible;
  }
}

@media(max-width:480px){
  .pub-carte{padding:13px 14px}
}

/* Menu flottant des réactions sur une publication — même principe que
   #ph-reagir-flottant (photos), instance séparée, plus simple (clic pour
   ouvrir/fermer, pas de survol). #pub-commentaire-reagir-flottant (réactions
   sur un COMMENTAIRE, ajouté le 24/08/2026) partage exactement le même
   habillage, instance JS séparée (voir kalipay.js) — utilisé aussi bien
   dans la colonne du mur que dans la pop-up commentaires du fil. */
#pub-reagir-flottant,
#pub-commentaire-reagir-flottant{
  position:fixed;z-index:9999;display:flex;gap:4px;
  background:var(--carte);border-radius:999px;padding:5px;box-shadow:0 10px 26px var(--ombre-couleur);
}
#pub-reagir-flottant[hidden],
#pub-commentaire-reagir-flottant[hidden]{display:none}

/* ==========================================================================
   FIL D'ACTU — vues/accueil.php, inscription/fil-actu.php, assets/fil-actu.js
   Ajouté le 20/08/2026.
   ========================================================================== */

/* ---- Bandeau des administrateurs (vues/accueil.php) ----------------------
   Rendu par la VUE, pas par le gabarit : uniquement sur la page d'accueil,
   au-dessus du fil d'actu, à l'intérieur de #zone-centrale — donc soumis à
   la navigation fluide comme le reste du contenu (disparaît en cliquant sur
   une autre page, revient en cliquant sur « Accueil », sans rechargement
   complet). Repositionné le 20/08/2026 : posé auparavant dans
   noyau/layout.php, il restait affiché sur toutes les pages, y compris
   après un clic sur « Les soirées ». Largeur : pas de max-width propre,
   #zone-centrale (.col-centre) s'en charge déjà (jusqu'à 800px sur grand
   écran, voir plus haut dans ce fichier). */
.kp-bandeau-admin{
  display:flex;align-items:flex-start;gap:10px;
  margin-bottom:0;padding:12px 18px;
  background:var(--carte);border:1px solid var(--or);border-radius:10px;
  color:var(--txt);font-size:.86rem;line-height:1.5;
}
.kp-bandeau-admin-picto{flex:none;font-size:1.05rem;padding-top:1px}
/* .annonce-enveloppe (base) est déjà position:relative — cette classe
   n'ajoute que ce qu'il faut pour vivre à côté du picto dans une ligne flex.
   min-width:0 : un item flex ne rétrécit jamais sous la largeur de son
   contenu par défaut — sans ça, un message très long referait déborder le
   bloc horizontalement malgré overflow-wrap ci-dessous. */
.kp-bandeau-admin-enveloppe{flex:1 1 auto;min-width:0}

/* Neutralise le look « pavé beige » et le white-space:pre-line de .annonce
   (le bandeau a déjà son propre cadre — pas besoin d'un second) : même
   principe que .accueil-texte.annonce plus haut dans ce fichier.
   overflow-wrap/word-break : un message SANS ESPACES (URL très longue,
   par ex.) ne doit jamais pouvoir pousser la page en largeur — c'est ce
   qui provoquait un décalage horizontal des colonnes sur petit écran,
   corrigé le 20/08/2026. */
.kp-bandeau-admin-texte.annonce{
  background:none;border-left:0;border-radius:0;padding:0;
  white-space:normal;font-size:inherit;line-height:inherit;color:inherit;
  overflow-wrap:anywhere;word-break:break-word;
}
/* Replié à 2 lignes, bouton « Voir la suite » — même mécanique que
   .annonce--limitee-25 (vues/accueil.php) et .annonce--limitee (fiche),
   seul le nombre de lignes change. Le bouton [data-annonce-plus] et la
   classe .annonce--deroule sont déjà gérés par assets/kalipay.js : rien
   à ajouter côté JS. */
.annonce--limitee-bandeau{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}
.annonce--limitee-bandeau.annonce--deroule{display:block;overflow:visible;-webkit-line-clamp:unset}
.kp-bandeau-admin-plus{margin-top:8px}

/* ---- Bandeau « mise en conformité » (06/09/2026) -------------------------
   Le compte à rebours d'une fiche déjà validée mais incomplète. Rendu par
   cf_bandeau() (inscription/conformite.php) et appelé par les trois vues
   concernées — accueil, sa propre fiche, mon-profil — pour la même raison
   que le bandeau des administrateurs juste au-dessus : posé dans le
   gabarit, il survivrait à la navigation fluide et suivrait la personne de
   page en page.

   Trois tons, du plus calme au plus net : rappel (or, comme le bandeau
   admin), délai dépassé (rouge), profil en pause (rouge plein). */
.cf-bandeau{
  display:flex;align-items:flex-start;gap:10px;
  margin-bottom:16px;padding:14px 18px;
  background:var(--carte);border:1px solid var(--or);border-left:4px solid var(--or);
  border-radius:10px;color:var(--txt);font-size:.86rem;line-height:1.55;
}
.cf-bandeau--urgent,
.cf-bandeau--pause{border-color:#c0392b;border-left-color:#c0392b}

/* Le picto dans sa propre colonne, comme .kp-bandeau-admin : il reste en
   haut a gauche quel que soit le nombre de lignes du titre, au lieu de
   suivre la ligne de base du texte. line-height egale a celle du titre,
   sinon l'emoji — plus haut qu'une capitale — remonte d'un ou deux pixels. */
.cf-bandeau-picto{flex:none;font-size:1.05rem;line-height:1.45}
/* min-width:0 : sans lui, un item flex ne descend jamais sous la largeur de
   son contenu, et une longue date sans espace pousserait le bloc en largeur. */
.cf-bandeau-corps{flex:1 1 auto;min-width:0}

.cf-bandeau-titre{margin:0 0 6px;font-weight:700;font-size:.95rem;line-height:1.45}
.cf-bandeau-liste{margin:0 0 8px;padding-left:18px}
.cf-bandeau-liste li{margin:2px 0}
.cf-bandeau-fin{margin:6px 0 0}

/* Le bouton du bandeau. C'est un <a>, pas un <button> : il lui faut donc
   display, alignement et suppression du soulignement, que .btn ne pose pas.
   Sur ORDINATEUR il se cale sur son texte ; sous 560px il prend toute la
   largeur — une cible pleine largeur se touche mieux au pouce, et c'est ce
   que fait deja .btn ailleurs sur le site. */
.cf-bandeau-btn{
  display:inline-block;width:auto;margin-top:8px;
  padding:9px 20px;font-size:.86rem;line-height:1.35;
  text-align:center;text-decoration:none;
}
@media (max-width:560px){
  .cf-bandeau-btn{display:block;width:100%;padding:11px 16px}
}

/* ---- Bandeau « profil incomplet » (06/09/2026) ---------------------------
   Meme objet que .cf-bandeau juste au-dessus, autre dispositif : ri_bandeau()
   (inscription/relances.php) annonce a la personne dont la fiche n'est PAS
   ENCORE validee le temps qu'il lui reste avant suppression. Il n'est pose
   qu'a un seul endroit — le haut du bloc d'avancement de sa propre fiche
   (fa_bloc_avancement(), inscription/fiche-affichage.php) — donc pas de
   marges negatives ni de mise a plat comme .cf-bandeau en pleine largeur.

   Les regles sont MUTUALISEES avec .cf-bandeau plutot que recopiees : une
   retouche de l'un vaut pour l'autre, et les deux bandeaux ne peuvent pas
   diverger visuellement. */
.ri-bandeau{
  display:flex;align-items:flex-start;gap:10px;
  margin-bottom:16px;padding:14px 18px;
  background:var(--carte);border:1px solid var(--or);border-left:4px solid var(--or);
  border-radius:10px;color:var(--txt);font-size:.86rem;line-height:1.55;
}
.ri-bandeau--urgent{border-color:#c0392b;border-left-color:#c0392b}
.ri-bandeau-picto{flex:none;font-size:1.05rem;line-height:1.45}
.ri-bandeau-corps{flex:1 1 auto;min-width:0}
.ri-bandeau-titre{margin:0 0 6px;font-weight:700;font-size:.95rem;line-height:1.45}
.ri-bandeau-fin{margin:6px 0 0}

/* ---- Barre de composition, remplace le titre "Fil d'actu" (27/09/2026) --
   Aucune couleur fixe : variables du theme actif (--fond-3/--trait/--txt-2),
   meme famille que .champ input - rendu identique sur les 6 themes. */
.fil-composer-carte>.card-corps{padding-top:5px}
.fil-composer{
  display:flex;align-items:center;gap:10px;
  background:var(--fond-3);border:1px solid var(--trait);border-radius:999px;
  padding:6px 8px 6px 6px;margin-bottom:5px;
}
.fil-composer-champ{
  display:flex;align-items:center;flex:1 1 auto;min-width:0;
  background:none;border:0;padding:8px 6px;margin:0;text-align:left;cursor:pointer;
  font:inherit;color:inherit;
}
.fil-composer-moi{position:relative;flex:none;line-height:0}
.fil-composer-avatar{
  flex:none;width:36px;height:36px;border-radius:50%;overflow:hidden;
  background:var(--fond-2);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.95rem;color:var(--txt-1);text-decoration:none;
}
.fil-composer-avatar:hover{filter:brightness(1.08)}
.fil-composer-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.fil-composer-texte{
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--txt-2);font-size:.92rem;
}
.fil-composer-actions{display:flex;align-items:center;gap:2px;flex:none}
.fil-composer-action{
  flex:none;width:36px;height:36px;border-radius:50%;
  background:none;border:0;font-size:1.05rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.fil-composer-action:hover,.fil-composer-action:focus-visible{background:var(--fond-2)}
@media (max-width:560px){
  .fil-composer{padding:5px}
  .fil-composer-texte{font-size:.86rem}
}

/* ---- Une carte du fil ----------------------------------------------------- */
.fil-carte{
  position:relative;padding:16px 24px;border-bottom:1px solid var(--trait);
}
/* Le fil touche les bords de la carte « Fil d'actu » : #fil-actu-liste
   (vues/accueil.php) annule le padding horizontal de .card-corps (24px),
   et .fil-carte reprend ce même 24px comme padding propre — ainsi le
   texte garde sa marge habituelle, mais le filet .fil-carte (bordure du
   bas) et le survol vont bord à bord. Demande du 26/08/2026. Réajusté à
   16px sous 560px, voir @media plus bas (.card-corps y passe aussi à
   16px). */
#fil-actu-liste{margin:0 -24px}
.fil-carte:last-child{border-bottom:0}
.fil-carte-corps{position:relative}

.fil-carte-entete{display:flex;align-items:flex-start;gap:12px}
/* Boîte de l'avatar : le rond « L » (libre aujourd'hui) est un FRÈRE du lien,
   pas un enfant — .fil-carte-avatar a overflow:hidden pour garder la photo
   ronde, ce qui rognerait une pastille débordant du cercle. 28/08/2026. */
.fil-carte-avatar-boite{position:relative;flex:none;width:44px;height:44px}
.fil-carte-avatar{
  flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;
  background:var(--fond-3);display:block;
}
.fil-carte-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.fil-carte-avatar--vide{display:flex;align-items:center;justify-content:center}

.fil-carte-identite{flex:1 1 auto;min-width:0}
/* flex-wrap : pour un admin/modérateur, cette ligne porte aussi le bouton
   rouge .fil-carte-suppr-admin — sur une carte étroite (mobile), ça peut
   dépasser la largeur du pseudo + pastille ; on laisse retomber à la ligne
   plutôt que chevaucher .fil-carte-menu-bouton (⋯, posé en position
   absolute top:0;right:0 sur son conteneur positionné — voir
   .fil-carte-corps/.fil-carte-bandeau). */
.fil-carte-pseudo-ligne{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px}
.fil-carte-pseudo{
  font-weight:700;color:var(--or-txt);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px;
}
.fil-carte-pseudo:hover{text-decoration:underline}
/* Étoile favori/suivre de l'entête de carte (02/09/2026, fil_etoile_favori()) :
   même habillage que l'annuaire (.etoile-favori), mais collée au pseudo et à
   la pastille — pas de margin-left:auto qui la renverrait au bout de la ligne
   — et un cran plus petite, à l'échelle de l'entête. */
.fil-carte-pseudo-ligne .etoile-favori{margin-left:0;padding-left:0;font-size:1.15rem}
.fil-carte-pseudo-ligne .etoile-favori-bulle{padding:1px 7px;font-size:.64rem}
/* « Libre aujourd'hui » : rond vert « L » au coin de la photo depuis le
   28/08/2026 (remplace le badge-texte .fil-carte-libre, qui prenait une ligne
   entière sous le pseudo). Mêmes couleurs qu'avant pour ne pas dérouter, plus
   un liseré de la couleur de la carte (#421821) qui le détache de la photo. */
.fil-carte-libre-rond{
  position:absolute;right:-3px;bottom:-3px;z-index:1;
  width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--vert);color:var(--sur-vert);border:2px solid var(--carte);
  font-size:.66rem;font-weight:800;line-height:1;cursor:default;
}
.fil-carte-date{margin-top:2px;font-size:.76rem;color:var(--txt-2)}

/* Phrase d'action collée au pseudo (fil_entete_carte(), $actionHtml) —
   type 'disponibilite' uniquement, gain de place (22/08/2026, capture
   d'écran fournie). Même couleur/taille que .fil-carte-texte pour rester
   visuellement une phrase secondaire, pas le pseudo. */
.fil-carte-action-inline{color:var(--txt-1);font-size:.86rem;font-weight:400}

/* Titre d'un bon plan dans le fil (27/08/2026) — « X participe à un bon
   plan : <bulle or> ». Un <a> nu prenait la couleur de lien visité du
   navigateur (violet), invisible sur le fond sombre : ici une pastille
   dégradée or, même dégradé que .bouton--or et l'entête de #bpp-voile. */
.fil-bp-lien{
  display:inline-block;vertical-align:middle;max-width:100%;
  margin-left:2px;padding:3px 12px;border-radius:999px;
  background:linear-gradient(135deg,var(--or-pale) 0%,var(--or) 45%,var(--or-fonce) 100%);
  color:var(--sur-or);font-size:.82rem;font-weight:700;letter-spacing:.2px;
  text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 2px 8px var(--or-voile);
  transition:transform .12s,box-shadow .12s,filter .12s;
}
.fil-bp-lien:visited{color:var(--sur-or)}
.fil-bp-lien:hover,.fil-bp-lien:focus{
  color:var(--sur-or);filter:brightness(1.06);transform:translateY(-1px);
  box-shadow:0 5px 14px var(--or-voile-fort);
}
@media(max-width:520px){
  .fil-bp-lien{max-width:100%;font-size:.78rem;padding:3px 10px}
}

/* Phrase d'action (fil_action_carte(), types 'disponibilite'/'soiree'
   seulement) et phrase de témoignage (« a envoyé/reçu un témoignage … »,
   fil_rendre_carte_contenu()) — sous l'entête, dans une ligne séparée,
   comme sur les captures d'écran fournies (retour en arrière du 21/08/2026 :
   la version précédente affichait cette phrase à droite du pseudo). */
.fil-carte-texte,.fil-carte-phrase{margin:8px 0 0;color:var(--txt-1);font-size:.86rem;line-height:1.4}
.fil-carte-texte a,.fil-carte-phrase a{color:var(--or-txt)}

/* Sur téléphone, un texte long est replié à dix lignes, avec un bouton
   « Lire la suite ↓ » — même mécanique visuelle que .annonce--limitee
   (fiche) mais posée par assets/fil-actu.js (filReplierTextes()), qui
   n'ajoute la classe et le bouton QUE si le texte déborde réellement :
   une publication courte reste intacte. Demande du 01/09/2026. */
/* PC (25/09/2026) : même repli, à 20 lignes ; téléphone inchangé (10 lignes). */
.fil-carte-texte--replie{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:20;
  overflow:hidden;
}
@media(max-width:640px){
  .fil-carte-texte--replie{-webkit-line-clamp:10}
}
.fil-carte-texte--replie.fil-carte-texte--deroule{
  display:block;overflow:visible;-webkit-line-clamp:unset;
}
.fil-carte-plus{
  display:inline-flex;align-items:center;gap:6px;margin-top:7px;
  padding:5px 13px;border-radius:999px;cursor:pointer;font-family:inherit;
  background:var(--carte);border:1px solid var(--or);color:var(--jaune);
  font-size:.78rem;font-weight:800;letter-spacing:.02em;
}
.fil-carte-plus:hover{background:var(--or-voile);border-color:var(--or)}

/* Bouton rouge « Effacer la publication », admin/modérateur uniquement,
   posé juste après la phrase d'action sur la ligne du pseudo — demande du
   21/08/2026. En plus (pas à la place) du « Supprimer la publication » du
   menu ⋯, réservé lui au propriétaire (voir fil_rendre_carte()). */
.fil-carte-suppr-admin{
  flex:none;background:var(--rouge-voile);border:1px solid var(--lien-voile);color:var(--rouge-txt);
  border-radius:999px;padding:3px 10px;font-size:.72rem;font-weight:700;
  cursor:pointer;white-space:nowrap;
}
.fil-carte-suppr-admin:hover{background:var(--rouge-voile);border-color:var(--lien-voile)}

.fil-carte-menu-bouton{
  position:absolute;top:0;right:0;background:none;border:0;cursor:pointer;
  font-size:1.2rem;line-height:1;color:var(--txt-2);padding:4px 8px;border-radius:8px;
}
.fil-carte-menu-bouton:hover{background:var(--fond-3);color:var(--txt-1)}
.fil-carte-menu{
  position:absolute;top:26px;right:0;z-index:5;min-width:200px;
  background:var(--carte);border:1px solid var(--trait);border-radius:10px;
  box-shadow:0 10px 26px var(--ombre-couleur);overflow:hidden;
}
.fil-carte-menu button{
  display:block;width:100%;text-align:left;padding:10px 14px;
  background:none;border:0;font-size:.84rem;color:var(--txt-1);cursor:pointer;
}
.fil-carte-menu button:hover{background:var(--fond-3)}

.fil-carte-bas{display:flex;align-items:center;gap:8px;margin-top:12px}
.fil-carte-emoji-bouton,.fil-carte-commentaire-bouton{
  background:var(--fond-3);border:1px solid var(--trait);border-radius:999px;
  width:36px;height:36px;font-size:1.15rem;line-height:1;cursor:pointer;
  color:var(--txt-1);flex:none;
}
.fil-carte-emoji-bouton:hover,.fil-carte-commentaire-bouton:hover{background:var(--trait);border-color:var(--txt-2)}
/* Compteurs collés à leur icône (plus de texte séparé « N commentaires ·
   N réactions ») — demande du 21/08/2026. .fil-carte-reactions-detail :
   répartition par emoji (fil_repartition_reactions_html()) — la réaction
   elle-même se fait via .fil-carte-emoji-bouton, juste à gauche.
   .fil-carte-nb-commentaires : juste le nombre, cliquable, ouvre les
   commentaires comme l'icône 💬 à sa gauche.

   Depuis le 23/08/2026, chaque morceau (span.fil-reaction-qui, un par
   emoji) est À SON TOUR interactif : survol (PC) ou tap (mobile) affiche
   qui a posé CETTE réaction précise — voir .fil-reaction-qui-bulle plus
   bas et assets/fil-actu.js (action=reactions_qui). Zone de clic élargie de
   quelques px (padding + marge négative égale) pour rester confortable au
   doigt sans agrandir visuellement le texte. */
.fil-carte-reactions-detail{margin-right:2px;font-size:.8rem;color:var(--txt-1);white-space:nowrap}
.fil-reaction-qui{cursor:pointer;border-radius:4px;padding:2px 3px;margin:-2px -3px}
.fil-reaction-qui:hover{background:var(--fond-3)}
.fil-carte-nb-commentaires{
  background:none;border:0;padding:0;font-family:inherit;
  font-size:.82rem;color:var(--or-txt);cursor:pointer;
}
.fil-carte-nb-commentaires:hover{color:var(--or-vif);text-decoration:underline}

/* ---- Bulle « qui a réagi » (survol/tap d'un .fil-reaction-qui) — 23/08/2026 -
   Même famille visuelle que .fil-reagir-bulle juste en dessous (fond blanc,
   ombre portée), rectangulaire plutôt qu'en pilule : c'est une liste, pas
   une rangée de boutons. Défilement interne si beaucoup de monde a réagi
   (max-height), plutôt que de déborder de l'écran. */
.fil-reaction-qui-bulle{
  position:fixed;z-index:1400;max-width:220px;max-height:220px;overflow-y:auto;
  background:var(--carte);border-radius:10px;padding:8px 12px;
  box-shadow:0 10px 26px var(--ombre-couleur);
  font-size:.82rem;line-height:1.7;
}
.fil-reaction-qui-bulle a,
.fil-reaction-qui-bulle span{
  display:block;color:var(--txt);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Le pseudo mène à la fiche du membre : soulignement pointillé permanent pour
   que ça se voie sans survoler (28/08/2026) — un <span> (membre sans fiche)
   reste, lui, sans décor. */
.fil-reaction-qui-bulle a{
  cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;
}
.fil-reaction-qui-bulle a:hover{color:var(--or-txt);text-decoration:underline}
.fil-reaction-qui-vide{margin:0;color:var(--txt-2);font-style:italic;white-space:nowrap}

/* ---- Photo d'une publication (fil_action_carte(), type=publication) ------
   Pleine largeur, bord à bord : sort du padding horizontal de .fil-carte
   (16px 18px) par marge négative — demande du 21/08/2026. object-position
   centré : quand le recadrage (cover, max-height 460px) rogne une photo
   trop haute ou trop large, le sujet reste centré au lieu d'être coupé en
   haut/bas — demande du 21/08/2026. Clic → visionneuse plein écran déjà
   utilisée par le mur (.kp-visionneuse, kalipay.js) : même lien
   <a class="ph">, sélecteur juste étendu à « .fil-carte-photo .ph », pas de
   second lecteur d'image à construire (même principe que .pub-carte-photo
   .ph, plus haut dans ce fichier). */
.fil-carte-photo{margin:10px -24px 0}
.fil-carte-photo .ph{display:block;position:relative;overflow:hidden;cursor:zoom-in}
.fil-carte-photo .ph img{display:block;width:100%;max-height:460px;object-fit:cover;object-position:center}
.fil-carte-photo .ph::after{
  content:'⤢';position:absolute;top:10px;right:14px;
  font-size:.85rem;color:var(--sur-couleur);opacity:0;transition:opacity .15s;
  text-shadow:0 1px 3px var(--voile-fort);pointer-events:none;
}
.fil-carte-photo .ph:hover::after{opacity:.95}

/* ---- Vidéo du fil : même cadre qu'une photo (10/09/2026) ---------------
   .at-video (albums, plus haut) pose height:100% — sans hauteur sur le
   parent .fil-carte-photo, la vidéo repartait à sa taille native et ne
   suivait plus le gabarit des photos (max-height:460px). Ici : même
   largeur et même hauteur maximale que .fil-carte-photo .ph img, mais
   object-fit:contain pour ne jamais rogner une vidéo verticale de
   téléphone. Fond noir conservé, comme dans les albums. */
.fil-carte-photo .at-video{
  width:100%;height:auto;max-height:460px;
  object-fit:contain;background:#000;
}

/* ---- PC : photo du fil dans son format d'origine (05/09/2026) ----------
   Au-dessus de 900px, plus de recadrage : object-fit:cover agrandissait la
   photo et en coupait le haut et le bas. L'image garde ses proportions et
   s'adapte a la case : bornee par la largeur de la carte ET par 460px de
   hauteur, centree quand elle est plus etroite. Le mobile conserve la
   vignette recadree (regle ci-dessus). */
@media (min-width:901px){
  .fil-carte-photo .ph{text-align:center}
  .fil-carte-photo .ph img{
    width:auto;max-width:100%;height:auto;max-height:460px;
    object-fit:fill;margin:0 auto;
  }
}

/* ---- Bandeau « X a réagi/commenté … » + carte imbriquée -----------------
   Pour les 6 types réaction/commentaire (photo, publication, témoignage) :
   une ligne d'action fine au-dessus de la carte de contenu intégrale
   (fil_rendre_carte_contenu()) — demande du 21/08/2026, d'après les
   captures d'écran fournies par l'utilisateur. Bulle transparente à bord
   fin bleu foncé (plus de rouge) — demande du 21/08/2026. */
.fil-carte-bandeau{
  position:relative;display:flex;align-items:center;gap:8px;
  padding:6px 34px 6px 12px;margin:0 0 10px;border-radius:999px;
  background:var(--bleu-voile);border:1px solid var(--bleu);
}
.fil-carte-bandeau-texte{flex:1 1 auto;min-width:0;color:var(--bleu-txt);font-size:.82rem;line-height:1.4}
.fil-carte-bandeau-pseudo{font-weight:700;color:var(--bleu-txt);text-decoration:none}
.fil-carte-bandeau-pseudo:hover{text-decoration:underline}

/* Bandeau GROUPÉ (29/08/2026) : quand plusieurs favoris ont réagi au même
   contenu, une seule carte les rassemble — avatars empilés à gauche, pseudos
   puis « et X autres » dans le texte (fil_bandeau_groupe_html(),
   inscription/fil-actu.php). L'anneau des avatars reprend le bordeaux des
   pop-up (#43161f) : c'est lui qui détache les vignettes les unes des autres
   là où elles se chevauchent. */
.fil-carte-bandeau-avatars{display:flex;flex:0 0 auto;align-items:center}
.fil-carte-bandeau-avatar{
  width:26px;height:26px;flex:0 0 auto;margin-right:-9px;
  border-radius:50%;overflow:hidden;background:var(--trait-2);
  box-shadow:0 0 0 2px var(--carte-3);
}
.fil-carte-bandeau-avatar:last-child{margin-right:0}
.fil-carte-bandeau-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.fil-carte-bandeau-avatar--vide{background:var(--trait)}
.fil-carte-bandeau-autres{
  padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-weight:700;color:var(--bleu-txt);text-decoration:underline dotted;
}
.fil-carte-bandeau-autres:hover{text-decoration:underline}

/* Liste complète des membres du groupe : posée masquée dans la carte par le
   PHP, recopiée telle quelle dans la pop-up par fil-actu.js — d'où deux
   familles de classes pour un seul balisage. */
.fil-groupe-membres[hidden]{display:none}
.fil-groupe-liste{display:flex;flex-direction:column;gap:2px}
.fil-groupe-membre{
  display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;
  color:var(--txt);text-decoration:none;
}
.fil-groupe-membre:hover{background:var(--trait-2)}
.fil-groupe-avatar{
  width:34px;height:34px;flex:0 0 auto;border-radius:50%;overflow:hidden;background:var(--trait-2);
}
.fil-groupe-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.fil-groupe-avatar--vide{background:var(--trait)}
.fil-groupe-pseudo{font-size:.9rem;font-weight:600}

/* Carte de contenu imbriquée sous le bandeau : encadré pour la distinguer
   visuellement (même esprit qu'une citation reprise) — contient sa propre
   entête (propriétaire du contenu), pas celle de l'acteur du bandeau. */
.fil-carte-corps--imbriquee{
  padding:10px 12px;background:var(--fond-3);border:1px solid var(--trait);border-radius:10px;
}
.fil-carte-corps--imbriquee .fil-carte-photo{margin:10px -12px -10px}

/* Texte encadré d'un témoignage (kp_recommandations), carte autonome ou
   imbriquée — décision du 21/08/2026 : l'encadré appartient au TYPE de
   contenu (témoignage), pas à sa position dans le fil. */
.fil-carte-temoignage-texte{
  margin:6px 0 0;padding:10px 12px;color:var(--txt);font-size:.88rem;line-height:1.5;
  background:var(--carte);border:1px solid var(--trait);border-radius:10px;
}

/* Recopie en lecture seule dans la pop-up des commentaires (fil-actu.js) */
.fil-carte--recap{border-bottom:0;padding:0;pointer-events:none}
/* 04/10/2026 : le bouton « Lire la suite ↓ » copié dans la pop-up reste cliquable
   (délégation [data-fil-plus] dans fil-actu.js) ; le reste de la copie est inerte. */
.fil-carte--recap .fil-carte-plus{pointer-events:auto}

/* ---- Bulle de réactions (survole la carte) -------------------------------- */
.fil-reagir-bulle{
  z-index:1400;display:flex;gap:4px;background:var(--carte);border-radius:999px;
  padding:5px;box-shadow:0 10px 26px var(--ombre-couleur);
}
.fil-reagir-bulle button{
  background:none;border:0;font-size:1.15rem;line-height:1;padding:5px;cursor:pointer;
}
.fil-reagir-bulle button:hover{transform:scale(1.15)}

/* ---- Pop-up des commentaires : post à gauche, commentaires à droite ------
   50% / 50% pile — demande du 21/08/2026 (avant : 42% / 58%). Ne concerne
   que cette colonne ; la ligne saisie+bouton en pied de pop-up garde son
   propre ratio 75% / 25% (.fil-commentaire-champ-ligne, plus bas). */
.fil-boite--large{max-width:760px}
.fil-commentaires-popup{display:flex;gap:0;min-height:320px}
.fil-commentaires-post{
  flex:1 1 50%;min-width:0;padding-right:18px;border-right:1px solid var(--trait);
}
.fil-commentaires-colonne{flex:1 1 50%;min-width:0;min-height:0;padding-left:18px;display:flex;flex-direction:column}
.fil-commentaires-zone{flex:1 1 auto;min-height:0}
.fil-commentaires-liste{display:flex;flex-direction:column;gap:10px}
.fil-commentaires-vide{color:var(--txt-2);font-size:.86rem}
.fil-commentaire{position:relative;padding-right:22px;font-size:.86rem;line-height:1.5}
.fil-commentaire-pseudo{margin-right:6px;color:var(--or-txt)}
.fil-commentaire-texte{color:var(--txt-1);word-break:break-word}
.fil-commentaire-supprimer{
  position:absolute;top:0;right:0;background:none;border:0;color:var(--txt-2);
  cursor:pointer;font-size:.8rem;line-height:1;
}
.fil-commentaire-supprimer:hover{color:var(--rouge-vif)}
/* Déplacé dans .fe-bas (pied de pop-up, pleine largeur — voir fil-actu.js
   filOuvrirCommentaires()), donc pas de margin-top : .fe-bas a déjà son
   padding. Zone de saisie, bouton emoji (assets/emoji-picker.js) puis
   bouton Envoyer, sur une même ligne — demande du 21/08/2026, sélecteur
   d'emojis unifié le 23/09/2026. Hauteur de la zone de saisie fixée à
   ~2 lignes, sans resize pour ne pas déborder du pied de pop-up. */
.fil-commentaire-form{display:flex;flex-direction:column;gap:6px;width:100%}
.fil-commentaire-champ-ligne{display:flex;align-items:flex-end;gap:8px;width:100%}
.fil-commentaire-champ-ligne textarea{
  flex:1 1 auto;min-width:0;box-sizing:border-box;min-height:52px;max-height:52px;resize:none;
  border:1px solid var(--trait);background:var(--fond-3);color:var(--txt);border-radius:8px;padding:8px 10px;font:inherit;
  line-height:1.3;
}
.fil-commentaire-champ-ligne .kp-emoji-bouton{flex:0 0 auto}
.fil-commentaire-champ-ligne button[type="submit"]{flex:0 0 auto;width:auto}

/* Bouton emoji reutilisable pour un champ dans une pop-up de crayon
   (23/09/2026) : meme principe que .fea-annonce-zone (fiche membre) —
   position:relative sur le conteneur, pastille en bas a droite du champ.
   Sert aux crayons des bons plans (noyau/bon-plan-blocs.php) et des
   soirees (soirees/_moteur/edition-api.php). Voir assets/emoji-picker.js. */
.kp-emoji-zone{position:relative}
.kp-emoji-zone>textarea,.kp-emoji-zone>input{padding-right:42px}
.kp-emoji-zone-bouton{
  position:absolute;right:8px;bottom:8px;z-index:2;
  background:var(--fond-3);border:1px solid var(--trait);border-radius:8px;cursor:pointer;
  font-size:1.05rem;line-height:1;padding:6px 9px;
}
.kp-emoji-zone-bouton:hover{background:var(--or-voile);border-color:var(--or)}
.kp-emoji-zone>input+.kp-emoji-zone-bouton{bottom:auto;top:50%;transform:translateY(-50%)}

@media(max-width:640px){
  .fil-commentaires-popup{flex-direction:column}
  .fil-commentaires-post{border-right:0;border-bottom:1px solid var(--trait);padding:0 0 14px;flex:none}
  .fil-commentaires-colonne{padding-left:0;padding-top:14px}
}

/* ---- Formulaire de signalement -------------------------------------------- */
.fil-champ{margin-bottom:14px}
.fil-champ label{display:block;font-size:.8rem;color:var(--txt-1);margin-bottom:5px}
.fil-champ select,.fil-champ textarea{
  width:100%;box-sizing:border-box;padding:9px 11px;border-radius:8px;
  border:1px solid var(--trait);background:var(--fond-3);color:var(--txt);font:inherit;
}
.fil-champ textarea{min-height:90px;resize:vertical}

/* ==========================================================================
   SONNERIE D'APPEL VIDÉO — la fenêtre d'appel entrant (25/08/2026)
   Vit dans le gabarit (noyau/layout.php), hors de #zone-centrale : elle
   doit survivre à la navigation fluide, sinon elle disparaîtrait au premier
   clic sur un lien du menu — le moment précis où elle sert.

   z-index 10002 — mesuré, pas choisi au hasard : le fichier contient déjà
   .menu-overlay/.me-overlay/.qv-overlay à 9998, les boutons flottants à
   9999, .kp-visionneuse à 10000 et .fp-overlay à 10001. À 9000 (premier
   jet), une photo ouverte en grand ou une pop-up d'en-tête masquait
   entièrement l'appel entrant. Un appel passe devant tout le reste.

   Même précaution que .visio-boutons juste au-dessus : masquée par défaut,
   affichée quand [hidden] est absent — jamais un display:flex qui battrait
   l'attribut.
   ========================================================================== */
.vsv-voile{display:none}
.vsv-voile:not([hidden]){
  display:flex;align-items:center;justify-content:center;
  position:fixed;inset:0;z-index:10002;
  background:var(--voile-fort);
  padding:20px;
}

.vsv-boite{
  background:var(--carte);border-radius:16px;padding:26px 24px 20px;
  width:min(360px,100%);text-align:center;
  box-shadow:0 18px 50px var(--ombre-couleur);
}

/* La pastille pulse doucement : le mouvement attrape l'œil bien mieux
   qu'une couleur, y compris du coin de l'œil. */
.vsv-pastille{
  width:74px;height:74px;margin:0 auto 14px;border-radius:50%;
  background:var(--vert-voile);color:var(--vert-txt);font-size:2rem;line-height:74px;
  animation:vsv-pulse 1.4s ease-in-out infinite;
}
@keyframes vsv-pulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 var(--vert-voile-fort)}
  50%    {transform:scale(1.06);box-shadow:0 0 0 14px transparent}
}

/* Respect du réglage système « réduire les animations » : certaines
   personnes en ont mal au cœur. La pastille reste, simplement immobile. */
@media (prefers-reduced-motion:reduce){
  .vsv-pastille{animation:none}
}

.vsv-titre{margin:0 0 18px;font-size:1.02rem;color:var(--txt)}

.vsv-boutons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.vsv-decrocher{
  padding:13px 22px;border-radius:999px;font-weight:800;
  background:var(--vert-tres-fonce);color:var(--sur-vif);border:1px solid var(--vert-tres-fonce);
}
.vsv-decrocher:hover{background:var(--vert-sombre)}
.vsv-refuser{
  padding:13px 22px;border-radius:999px;font-weight:800;
  background:var(--fond-3);color:var(--txt-1);border:1px solid var(--trait);
}
.vsv-refuser:hover{background:var(--trait)}

/* « Plus tard » : volontairement discret. C'est une sortie, pas un choix
   qu'on met en avant — sinon tout le monde la prendrait par réflexe. */
.vsv-plus-tard{
  display:block;margin:14px auto 0;padding:6px 10px;
  background:none;border:0;color:var(--txt-2);font-size:.82rem;
  text-decoration:underline;cursor:pointer;font-family:inherit;
}
.vsv-plus-tard:hover{color:var(--txt-1)}

/* ==========================================================================
   SONDAGES — bouton [sondage:ID] et contenu de la pop-up de vote.
   La pop-up elle-même réutilise .at-overlay/.at-boite/.at-entete/.at-fermer/
   .at-popup-alerte/.at-popup-corps (albums) — rien à ajouter pour son cadre.
   ========================================================================== */
.son-lien-bouton{
  display:inline-flex;align-items:center;gap:6px;margin:6px 0;padding:8px 14px;
  border:1px solid var(--or);border-radius:999px;background:var(--or-voile);
  color:inherit;font:inherit;font-weight:600;font-size:.88rem;cursor:pointer;
}
.son-lien-bouton:hover{background:var(--or-voile)}
/* [publication:ID] (message de l'administrateur) : un <a>, pas un <button> — 24/09/2026 */
.bandeau-pub-lien{display:inline;margin:0 2px;padding:0 8px;font-size:inherit;font-weight:600;line-height:inherit;text-decoration:none;white-space:nowrap}

.son-popup-question{margin:0 0 14px;font-weight:700}

.son-option{display:flex;align-items:center;gap:8px;padding:8px 4px;font-size:.92rem;cursor:pointer}
.son-option input{margin:0}
#son-form-vote .bouton{margin-top:10px}

.son-resultats{display:flex;flex-direction:column;gap:8px}
.son-resultat-ligne{display:grid;grid-template-columns:1fr 2fr auto;align-items:center;gap:10px;font-size:.86rem}
.son-resultat-texte{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.son-barre{background:var(--surbrillance);border-radius:999px;height:10px;overflow:hidden}
.son-barre-remplie{display:block;height:100%;background:var(--or)}
.son-resultat-chiffres{white-space:nowrap;color:var(--papier-txt-3);font-size:.8rem}
.son-total-votes{margin:14px 0 0;color:var(--papier-txt-3);font-size:.82rem;text-align:right}
/* « 👥 Voir qui a voté » (pop-up sondage) — 11/09/2026 */
.son-votants-bouton{margin-top:12px;padding:8px 14px;font-size:.84rem;cursor:pointer;font-family:inherit}
.son-votants-liste{list-style:none;margin:10px 0 0;padding:0;max-height:220px;overflow:auto;font-size:.86rem}
.son-votants-liste li{padding:6px 2px;border-bottom:1px solid var(--trait)}

/* ==========================================================================
   CARTE DES SOIRÉES (vues/soirees.php) — bouton « 🗺️ Voir la carte »

   Même patron que .kp-modale (voile plein écran + boîte centrée), mais
   ouverte en JavaScript au clic (comme .pay-voile/.pay-fenetre de
   soirees/_moteur/page.css) et non par un lien serveur : d'où la classe
   .ouvert qui bascule l'affichage au lieu d'un rendu conditionnel PHP.
   ========================================================================== */
.cs-voile{
  position:fixed;inset:0;z-index:1100;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:var(--voile-fort);
}
.cs-voile.ouvert{display:flex}
.cs-boite{
  position:relative;width:100%;max-width:720px;max-height:90vh;max-height:90dvh;
  background:var(--carte);border-radius:12px;box-shadow:0 18px 50px var(--ombre-forte);
  display:flex;flex-direction:column;overflow:hidden;
}
.cs-entete{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 18px;font-size:1.02rem;font-weight:700;color:var(--txt);
  border-bottom:1px solid var(--trait);
}
.cs-fermer{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:var(--fond-3);color:var(--txt-2);font-weight:700;font-size:.9rem;
}
.cs-fermer:hover{background:var(--trait);color:var(--txt)}
.cs-corps{padding:16px 18px;flex:1 1 auto;min-height:0;overflow-y:auto}
#cs-carte{width:100%;height:420px;border-radius:10px;overflow:hidden}

/* Sous-pop-up « qui y va » (#bpp-voile, noyau/layout.php) — plus petite,
   z-index supérieur pour s'ouvrir PAR-DESSUS #bp-voile déjà affichée, avec
   un en-tête coloré (demande du 26/08/2026 : « un peu de couleur »). */
.bpp-voile{z-index:1200}
.bpp-boite{max-width:380px}
.bpp-boite .cs-entete{
  background:linear-gradient(135deg,var(--or),var(--or-fonce));color:var(--sur-or);border-bottom:none;
}
.bpp-boite .cs-fermer{background:var(--voile-doux);color:var(--papier-txt-1)}
.bpp-boite .cs-fermer:hover{background:var(--voile)}
.bpp-boite .cs-corps{min-height:60px}

/* Nom de ville cliquable : grille des soirées (vues/soirees.php, classe
   .carte-ville-lien) et page d'une soirée (soirees/_moteur/contenu.php,
   .label[data-carte-ville]) — ouvre la carte recentrée dessus. */
[data-carte-ville]{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
[data-carte-ville]:hover{color:var(--or)}
.cs-mention{margin-top:10px;font-size:.78rem;color:var(--txt-2);text-align:center}
/* Bandeau « Mise à jour de la carte… N s » (01/09/2026) — même patron que
   .cs-introuvable juste en dessous, en doré plutôt qu'en alerte : ce n'est
   pas un incident, juste une attente annoncée. */
.cs-chargement{
  margin:0 0 10px;padding:9px 12px;border-radius:8px;font-size:.82rem;
  text-align:center;font-weight:600;
  background:var(--or-voile);border:1px solid var(--or-voile-fort);color:var(--txt-1);
}
.cs-introuvable{
  margin-bottom:10px;padding:9px 12px;border-radius:8px;font-size:.8rem;text-align:center;
  background:var(--or-voile);border:1px solid var(--or-voile-fort);color:var(--txt-1);
}

@media(max-width:620px){
  .cs-voile{padding:10px}
  #cs-carte{height:320px}
}

/* ---- Carte agrandie sur PC (12/10/2026, maquette V1 « Grande fenêtre ») ---
   Toutes les cartes de cette fenêtre (membres, événements, bons plans) :
   jusqu'à 1100 px de large et 88 % de la hauteur de l'écran ; la carte
   prend toute la hauteur restante. Limité à #cs-voile : la sous-pop-up
   « qui y va » (.bpp-boite) réutilise .cs-boite et ne doit pas grandir.
   Mobile (≤620px) inchangé. Leaflet suit seul le redimensionnement de la
   fenêtre (trackResize). */
@media (min-width:621px){
  #cs-voile .cs-boite{max-width:1100px;height:88vh;height:88dvh;max-height:none}
  #cs-voile .cs-corps{display:flex;flex-direction:column;overflow:hidden}
  #cs-voile .cs-zone{flex:1 1 auto;min-height:320px;display:flex}
  #cs-voile #cs-carte{flex:1 1 auto;height:auto}
  #cs-voile .cs-mention{flex:0 0 auto}
}

/* ---- Carte des MEMBRES (vues/membres.php, 01/09/2026) -------------------
   Un point de cette carte n'est pas un membre mais un GROUPE : tous ceux
   qui vivent à moins de 30 km les uns des autres (mc_grappes(),
   noyau/membres-carte.php). D'où une pastille chiffrée plutôt que la
   punaise bleue de Leaflet, posée par L.divIcon (csAfficherMembres(),
   kalipay.js) — .cs-grappe-icone est le conteneur nu créé par Leaflet, il
   ne doit porter ni fond ni bordure. */
.cs-grappe-icone{background:none;border:0}
.cs-grappe{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  border-radius:50%;font-weight:700;font-size:.85rem;line-height:1;
  color:#1b1206;background:var(--or);border:2px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.cs-grappe-titre{margin-bottom:6px;font-weight:700}
.cs-grappe-liste{margin:0;padding:0;list-style:none;max-height:190px;overflow-y:auto}
.cs-grappe-liste li{margin:0 0 4px}
.cs-grappe-liste a,
.cs-grappe-liste li>span{display:flex;align-items:center;gap:7px;color:inherit;text-decoration:none}
.cs-grappe-liste a:hover{color:var(--or)}
.cs-grappe-liste img,
.cs-grappe-vide{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;object-fit:cover;
  display:flex;align-items:center;justify-content:center;
  background:var(--surbrillance);font-size:.85rem;
}
.cs-grappe-pseudo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-grappe-signe{flex:0 0 auto;font-size:.72rem;line-height:1}
.cs-grappe-detail{margin-bottom:6px;font-size:.76rem;color:var(--txt-2)}
.cs-grappe-reste{margin:6px 0 0;font-size:.76rem;color:var(--txt-2)}

/* La petite pastille VERTE au coin de la dorée : le nombre de membres du
   groupe libres aujourd'hui (dsp_libres_maintenant(), même règle que le
   rond « L » des cartes de l'annuaire). Elle déborde volontairement de
   l'icône Leaflet — d'où position:relative sur .cs-grappe-icone et aucun
   overflow:hidden nulle part sur ce chemin. */
.cs-grappe-icone{position:relative}
.cs-grappe-libres{
  position:absolute;top:-5px;right:-7px;
  min-width:17px;height:17px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;font-size:.63rem;font-weight:700;line-height:1;
  color:#0d2b12;background:var(--vert);border:2px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}

/* Marqueur d'une soirée / d'un bon plan TERMINÉ (04/09/2026) : l'icône
   bleue de Leaflet, désaturée en gris — voir csAfficherEtRecentrer()
   dans kalipay.js. */
.cs-marqueur--termine{filter:grayscale(1) brightness(1.05);opacity:.85}

/* Badge groupé (plusieurs événements/bons plans au même point GPS exact,
   csAfficherEtRecentrer(), 17/09/2026) quand TOUS sont terminés — même
   traitement gris que .cs-marqueur--termine ci-dessus. */
.cs-grappe--termine{filter:grayscale(1) brightness(1.05);opacity:.85}

/* Barre de filtres de la carte des membres : les boutons de l'annuaire
   (.mbf-toggle--titre), simplement reposés au-dessus de la carte.
   Sert aussi à #cs-actions (retour depuis un itinéraire, carte des
   événements et des bons plans) — même barre, même gabarit. */
.cs-filtres{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;justify-content:center}
/* Indispensable (10/09/2026) : une règle d'auteur l'emporte sur le
   [hidden]{display:none} du navigateur, quelle que soit la spécificité — la
   barre restait donc visible sur la carte des événements et des bons plans
   alors que csCarteOuvrir() posait bien l'attribut. */
.cs-filtres[hidden]{display:none}

/* ---- Filtres de la carte des membres : panneau ⚙️ (12/10/2026, variante A)
   Voir noyau/layout.php. PC : volet à gauche, par-dessus la carte
   (z-index > volets Leaflet). Mobile (≤620px) : tiroir du bas, 75 % de
   l'écran, voile derrière. Contenu = composants de l'annuaire (.mbf-puce,
   .mbf-curseur, .mbf-switch). */
.cs-btn-filtres b{
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--or);color:var(--sur-or);font-size:.66rem;font-weight:800;
}
.cs-btn-filtres b[hidden]{display:none}
.cs-compte{font-size:.74rem;color:var(--txt-2);text-align:center;margin:-4px 0 8px}
.cs-compte[hidden]{display:none}
.cs-zone{position:relative}
.cs-volet{
  position:absolute;top:0;left:0;bottom:0;width:270px;z-index:1001;
  display:flex;flex-direction:column;background:var(--carte);
  border-right:1px solid var(--trait);border-radius:10px 0 0 10px;
  box-shadow:6px 0 18px var(--ombre-forte);
}
.cs-volet[hidden]{display:none}
.cs-volet-voile{display:none}
.cs-volet-poignee{display:none}
.cs-volet-tete{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border-bottom:1px solid var(--trait);font-size:.92rem;
}
.cs-volet-corps{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 12px 10px}
.cs-volet-titre{
  margin:12px 0 6px;font-size:.66rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;color:var(--txt-2);
}
.cs-volet .mbf-puces{gap:5px}
.cs-volet .cs-age{margin-bottom:4px}
.cs-volet-pied{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--trait)}
.cs-volet-pied .bouton{flex:1;margin:0}
@media(max-width:620px){
  .cs-volet{
    position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;z-index:1150;
    height:75vh;height:75dvh;border-right:0;border-top:1px solid var(--trait);
    border-radius:18px 18px 0 0;box-shadow:0 -10px 30px var(--ombre-forte);
  }
  .cs-volet-voile{display:block;position:fixed;inset:0;z-index:1140;background:var(--voile-fort)}
  .cs-volet-voile[hidden]{display:none}
  .cs-volet-poignee{display:block;width:40px;height:4px;border-radius:2px;background:var(--trait);margin:8px auto 0}
}

/* Bouton « 🚗 Afficher l'itinéraire » posé dans la bulle d'une destination
   (csAfficherEtRecentrer(), kalipay.js) : la bulle Leaflet a son propre
   fond blanc, d'où des couleurs fixes plutôt que les variables du thème. */
.cs-itin-btn{
  margin-top:6px;padding:4px 10px;border-radius:999px;cursor:pointer;
  border:1px solid #2563eb;background:#2563eb;color:#fff;
  font:inherit;font-size:.78rem;line-height:1.3;
}
.cs-itin-btn:hover{background:#1d4ed8;border-color:#1d4ed8}

/* ---- Carte « bon plan » de la grille : même look que .soiree-carte ------ */
.bp-carte{width:100%;text-align:left;font:inherit;cursor:pointer;color:inherit}

/* ---- Bouton « je m'inscris » (page d'un bon plan) ----------------------- */
.bp-jy-vais{position:relative}
.bp-jy-vais--actif{background:linear-gradient(135deg,var(--or),var(--or-fonce))!important;color:var(--sur-or)!important;border-color:transparent!important}
.bp-participants-liste{
  margin-top:10px;max-height:160px;overflow-y:auto;
  border-top:1px solid var(--trait);padding-top:10px;
}
.bp-participants-liste a,.bp-participants-liste span{
  display:inline-block;margin:2px 6px 2px 0;padding:3px 10px;border-radius:999px;
  background:var(--fond-3);color:var(--txt-1);font-size:.78rem;border:1px solid var(--trait);
}
.bp-participants-liste a:hover{border-color:var(--or);color:var(--txt)}
.bp-participants-liste span{opacity:.75}
.bp-participants-vide{font-size:.82rem;color:var(--txt-2);margin-top:8px}

/* Vignettes de fiche dans « Qui y va » (31/08/2026) : photo carrée + pseudo
   dessous, en grille auto-remplie. Remplace les pastilles de texte ; les
   règles .bp-participants-liste ci-dessus servent encore ailleurs. */
.bp-participants-grille{
  margin-top:10px;border-top:1px solid var(--trait);padding-top:12px;
  /* 4 colonnes fixes ; la pagination (kalipay.js, bppParPage) n'envoie que
     12 vignettes à la fois, soit 3 rangées pleines — pas de barre de
     défilement, ce sont les flèches ◀ ▶ du bas qui font le tour. */
  /* minmax(0,1fr) et non 1fr : la taille minimale automatique d'une case de
     grille vaut la largeur INTRINSÈQUE de son image, donc une photo de
     600 px élargissait sa colonne à 600 px — d'où des vignettes de tailles
     différentes d'une colonne à l'autre (corrigé le 02/09/2026). */
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 10px;
}
.bp-part-case{position:relative;min-width:0}
.bp-part-vignette{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  min-width:0;
  text-decoration:none;color:var(--txt-1);
}
.bp-part-photo{
  display:flex;align-items:center;justify-content:center;
  /* 06/10/2026 : mêmes vignettes que dans les soirées — photo RONDE de 64 px
     cerclée d'or (voir .pa-photo, soirees/_moteur/contenu.php). */
  width:64px;height:64px;object-fit:cover;
  border-radius:50%;border:0;box-shadow:0 0 0 2px var(--or-fonce);background:var(--fond-3);
  transition:box-shadow .12s,transform .12s;
}
.bp-part-photo--vide{font-size:1.6rem;line-height:1}
.bp-part-vignette:hover .bp-part-photo{box-shadow:0 0 0 2px var(--or);transform:translateY(-2px)}
.bp-part-vignette:focus-visible .bp-part-photo{outline:2px solid var(--or);outline-offset:2px}
.bp-part-vignette--morte{opacity:.7;cursor:default}
.bp-part-nom{
  font-size:.82rem;font-weight:700;line-height:1.2;text-align:center;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bp-part-vignette:hover .bp-part-nom{color:var(--txt)}

/* Croix de retrait (31/08/2026) : seuls l'auteur du bon plan et l'équipe la
   voient. Posée sur le coin de la photo, HORS du lien de fiche. Elle reste
   discrète — elle sort un membre de la liste, ce n'est pas un bouton sur
   lequel on clique distraitement. */
.bp-part-retirer{
  position:absolute;top:-6px;right:-6px;z-index:2;
  width:22px;height:22px;padding:0;font:inherit;font-size:.7rem;line-height:1;
  cursor:pointer;border-radius:50%;background:var(--fond-2);
  border:1px solid var(--trait);color:var(--txt-2);
  transition:border-color .12s,color .12s,background-color .12s;
}
.bp-part-retirer:hover{background:var(--accent-voile);border-color:var(--accent);color:var(--accent)}
.bp-part-retirer:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.bp-part-retirer[disabled]{opacity:.4;cursor:default}

/* Barre de défilement de la grille (31/08/2026) : flèches aux deux
   extrémités, numéro de page au centre. Le bloc entier n'est écrit par le
   JavaScript que s'il y a plus d'une page. */
.bp-participants-nav{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:12px;padding-top:10px;border-top:1px solid var(--trait);
}
.bp-part-fleche{
  flex:0 0 auto;width:30px;height:30px;padding:0;font:inherit;font-size:.8rem;line-height:1;
  cursor:pointer;border-radius:50%;background:var(--fond-3);
  border:1px solid var(--trait);color:var(--txt-1);
  transition:border-color .12s,color .12s,background-color .12s;
}
.bp-part-fleche:hover:not([disabled]){border-color:var(--or);color:var(--or)}
.bp-part-fleche:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.bp-part-fleche[disabled]{opacity:.35;cursor:default}
.bp-part-pages{font-size:.75rem;color:var(--txt-2);letter-spacing:.04em}

@media (max-width:540px){
  /* 3 colonnes sur téléphone : bppParPage() renvoie 9 pour rester sur
     3 rangées pleines — les deux chiffres doivent bouger ensemble. */
  .bp-participants-grille{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px}
  .bp-part-nom{font-size:.7rem}
}

/* ---- Fenêtre « 🚗 Covoiturage » d'un bon plan (#bpc-voile, 27/08/2026) --
   Ouverte PAR-DESSUS #bp-voile (même z-index que #bpp-voile), deux colonnes
   « cherchent une place » / « proposent des places ». */
.bpc-voile{z-index:1200}
.bpc-boite{max-width:560px}
.bpc-boite .cs-entete{
  background:linear-gradient(135deg,var(--or),var(--or-fonce));color:var(--sur-or);border-bottom:none;
}
.bpc-boite .cs-fermer{background:var(--voile-doux);color:var(--papier-txt-1)}
.bpc-boite .cs-fermer:hover{background:var(--voile)}
.bpc-erreur{
  margin-bottom:12px;padding:8px 12px;border-radius:8px;
  background:var(--or-voile);border:1px solid var(--or-voile-fort);
  color:var(--or-txt);font-size:.82rem;
}
.bpc-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bpc-colonne-titre{font-size:.82rem;font-weight:700;color:var(--or);margin-bottom:8px}
.bpc-liste{display:flex;flex-direction:column;gap:6px;min-height:56px}
.bpc-vide{font-size:.8rem;color:var(--txt-2);font-style:italic}
.bpc-ligne{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 10px;border:1px solid var(--trait);border-radius:8px;
  background:var(--fond-3);font-size:.82rem;color:var(--txt-1);
}
.bpc-ligne--moi{border-color:var(--or);background:var(--or-voile)}
.bpc-ligne-qui{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bpc-ligne-fin{display:flex;align-items:center;gap:8px;flex:none}
.bpc-pseudo{font-weight:700;color:var(--txt)}
a.bpc-pseudo:hover{color:var(--or);text-decoration:underline}
.bpc-ville{color:var(--txt-2)}
.bpc-places{font-weight:700;color:var(--or);white-space:nowrap}
.bpc-msg{font-size:.95rem;line-height:1;text-decoration:none}
.bpc-msg:hover{opacity:.75}
.bpc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.bpc-actions .bouton{margin-top:0}
.bpc-dispo-bloc{display:inline-flex;align-items:center;gap:8px}
.bpc-label{font-size:.8rem;color:var(--txt-2)}
.bpc-select{
  padding:7px 10px;border-radius:8px;border:1px solid var(--trait);
  background:var(--carte);color:var(--txt);font-family:inherit;font-size:.82rem;
}
.bpc-btn-annuler{flex-basis:100%}
.bpc-actions-ligne{display:contents}
@media(max-width:560px){
  .bpc-colonnes{grid-template-columns:1fr}
  .bpc-dispo-bloc{flex:1 1 100%}
}

/* ---- PC : fenêtre covoiturage sur une ligne (27/08/2026) ---------------
   « Je cherche une place », le nombre de places et « Je propose » sur une
   seule ligne, « Annuler ma ligne » toujours seul en dessous. Sous 640px,
   rien de tout cela ne s'applique : l'affichage mobile reste celui d'avant. */
@media(min-width:641px){
  .bpc-actions-ligne{
    display:flex;gap:10px;flex:1 1 100%;width:100%;
    align-items:center;flex-wrap:nowrap;
  }
  .bpc-actions-ligne .bouton{flex:0 1 auto;white-space:nowrap;padding:10px 14px}
  .bpc-dispo-bloc{flex:0 1 auto;white-space:nowrap}
}

/* ---- Formulaire « Proposer un bon plan » (vues/proposer-bon-plan.php) ---
   Les deux images (logo, affiche) — une carte chacune, sur le modèle du
   volet « Images » de l'édition d'une soirée (admin_page.php), transposé
   aux couleurs du site. 28/08/2026. */
.bp-img-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bp-img-carte{
  display:flex;flex-direction:column;
  background:var(--fond-3);border:1px solid var(--trait);border-radius:8px;padding:14px;
}
.bp-img-titre{font-weight:700;color:var(--txt);font-size:.9rem;margin-bottom:3px}
.bp-img-role{font-size:.76rem;color:var(--txt-2);line-height:1.4;margin-bottom:11px}
.bp-img-vignette{display:flex;align-items:center;justify-content:center;min-height:104px;margin-bottom:11px}
.bp-img-apercu{max-width:100%;max-height:104px;border-radius:8px;border:1px solid var(--trait);background:var(--fond-2)}
.bp-img-vide{
  width:100%;text-align:center;font-size:.76rem;color:var(--txt-3);font-style:italic;
  border:1px dashed var(--trait);border-radius:8px;padding:30px 8px;background:var(--fond-2);
}
.bp-img-zone{
  display:block;text-align:center;cursor:pointer;margin-top:auto;
  background:var(--fond-2);border:1px dashed var(--or-voile-fort);border-radius:8px;
  padding:11px 10px;font-size:.84rem;color:var(--or-txt);line-height:1.5;
  transition:background .15s ease,border-color .15s ease;
}
.bp-img-zone:hover{background:var(--fond);border-color:var(--or)}
.bp-img-zone small{display:block;color:var(--txt-3);font-size:.71rem}
.bp-img-etat{font-size:.76rem;color:var(--vert-txt);margin-top:7px;word-break:break-word}
.bp-img-carte .case-mini{
  display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:.8rem;color:var(--txt-1);
}
@media(max-width:640px){
  .bp-img-colonnes{grid-template-columns:1fr}
}

/* ---- Prix homme/femme/couple sur une seule ligne (formulaire bon plan) -- */
.rangee-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:560px){
  .rangee-3{grid-template-columns:1fr}
}

/* ==========================================================================
   CHAMPS DATE / HEURE NATIFS — input[type=date], input[type=time]
   (vues/proposer-bon-plan.php, section « Date / Heure de la soirée »)

   Absents jusqu'ici de la liste stylée (input[type=text] etc., plus haut
   dans ce fichier) : ils gardaient l'apparence brute du navigateur (fond
   blanc, icône sombre à peine visible), en rupture avec le thème sombre du
   reste du formulaire. Ajouté le 26/08/2026.
   ========================================================================== */
input[type=date],input[type=time]{
  width:100%;background:var(--fond-3);border:1px solid var(--trait);color:var(--txt);
  border-radius:9px;padding:11px 13px;font-size:.95rem;font-family:inherit;
  cursor:pointer;color-scheme:dark;letter-spacing:.02em;
}
input[type=date]:hover,input[type=time]:hover{border-color:var(--trait-4)}
input[type=date]:focus,input[type=time]:focus{
  outline:none;border-color:var(--or);box-shadow:0 0 0 3px var(--or-voile);
}
/* L'icône du sélecteur (Chrome/Edge/Safari) est noire par défaut, quasi
   invisible sur fond sombre : éclaircie, puis dorée au survol/focus pour
   rappeler l'accent du site (#d4af37). */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{
  filter:invert(1);opacity:.75;cursor:pointer;padding:3px;border-radius:6px;
  transition:opacity .15s,background-color .15s;
}
input[type=date]:hover::-webkit-calendar-picker-indicator,
input[type=time]:hover::-webkit-calendar-picker-indicator,
input[type=date]:focus::-webkit-calendar-picker-indicator,
input[type=time]:focus::-webkit-calendar-picker-indicator{
  opacity:1;background-color:var(--or-voile);
}
.champ-date-heure .champ{margin-bottom:0}
@media(max-width:560px){
  .champ-date-heure{grid-template-columns:1fr}
}

/* ==========================================================================
   PETITS ÉCRANS — CORRECTIFS DU 27/08/2026

   Volontairement en FIN de fichier : plusieurs de ces règles doivent
   l'emporter sur des styles déclarés plus haut à poids égal (.kpm-texte,
   .nav-haut…). À poids égal, c'est la dernière écrite qui gagne — les
   remonter dans le bloc « PETITS ÉCRANS » plus haut les rendrait inopérantes.
   ========================================================================== */

/* ---- 16 px minimum sur tout ce qui se saisit --------------------------
   En dessous de 16px, Safari iOS ZOOME la page à la mise au point du champ
   (comportement du système, aucun réglage côté site ne le désactive hormis
   la taille de police). Le site étant en body{overflow:hidden} sur mobile,
   on restait ensuite bloqué dans la page zoomée. Concernait tous les champs
   (0.95rem = 15,2px) et la zone de saisie de la messagerie (0.88rem = 14px).
   Les cases à cocher, boutons radio et curseurs sont écartés : la taille de
   police n'y change rien à l'affichage, et .mbf-segment-opt input est même
   masqué. */
@media (max-width:900px){
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=range]),
  select,
  textarea,
  .kpm-texte{font-size:16px}
}

/* ---- En-tête compacte (≤560px) ---------------------------------------
   L'en-tête empilait logo+titre, l'accroche, le filet doré et la rangée
   d'icônes : plus de 110px pris en haut de CHAQUE page, sur un écran qui
   n'en a déjà pas de trop. Tout passe sur une seule ligne : marque à
   gauche, icônes à droite (elles reviennent à la ligne d'elles-mêmes si
   elles ne tiennent pas, .nav-haut est déjà en flex-wrap). L'accroche et le
   filet ne sont pas perdus pour autant : ils restent affichés dès 561px et
   sur PC. Aucun changement de structure HTML — .entete et .nav-haut sont
   déjà deux frères dans <header class="card"> (noyau/entete.php). */
@media (max-width:560px){
  header.card{
    display:flex;align-items:center;gap:8px;
    padding:6px 10px;
  }
  .entete{flex:0 0 auto;padding:0;text-align:left}
  .entete-ligne{justify-content:flex-start;gap:8px}
  .kali-sous,.filet{display:none}
  /* .whatsapp-icone porte la même classe .kali-logo : les deux suivent. */
  .kali-logo{width:34px;height:34px}
  .kali-titre{font-size:.95rem;letter-spacing:1px}
  .nav-haut{flex:1 1 auto;justify-content:flex-end;padding:0;gap:5px}
}

/* ---- En-tête : les 6 icônes sur UNE seule rangée (27/08/2026) ----------
   La ligne unique posée ci-dessus ne tenait pas : marque (logo + titre +
   WhatsApp ≈ 160px) et icônes (6 × 42px + écarts ≈ 280px) demandaient
   ~440px pour 344px utiles sur un écran de 360px. flex-wrap faisait alors
   ce qu'on lui demande — une grille 2×3 — et l'en-tête devenait PLUS haute
   qu'avant le compactage. On reprend les pixels là où ils ne coûtent rien :

     · le rembourrage des icônes, pensé pour « icône + texte », alors que
       le texte est masqué sur mobile depuis longtemps (.nav-texte) ;
     · le logo, de 34 à 30px ;
     · les écarts.

   Total ≈ 298px : tout tient sur une ligne dès 320px de large. Les six
   icônes restent en accès direct, WhatsApp compris. Le retour à la ligne
   n'est PAS interdit : si un jour une icône s'ajoute, la rangée se dédouble
   plutôt que de rogner ou de masquer quoi que ce soit. */
@media (max-width:560px){
  header.card{gap:6px;padding:6px 8px}
  .entete-ligne{gap:6px}
  .kali-logo{width:30px;height:30px}
  .nav-haut{gap:4px}
  /* Le padding de .nav-lien vaut 7px 12px depuis le bloc ≤900px, à
     spécificité égale : c'est cette règle-ci, écrite plus loin dans le
     fichier, qui l'emporte. */
  .nav-lien{padding:6px 8px;font-size:.95rem;position:relative}
  /* La pastille des non-lus, posée en pastille de coin plutôt qu'à la
     suite de l'icône : à sa place normale (inline-block + margin-left),
     elle élargissait son onglet de ~29px dès qu'un message arrivait — la
     rangée tenait à vide et se dédoublait dès la première notification.
     En absolu, elle ne coûte plus rien à la largeur. Le rembourrage du
     header (6px en haut, 8px à droite) est plus grand que le débord, elle
     n'est donc pas rognée par .card{overflow:hidden}. */
  .nav-pastille{
    position:absolute;top:-3px;right:-3px;
    min-width:16px;margin-left:0;padding:0 4px;
    font-size:.6rem;line-height:16px;box-shadow:0 0 0 2px var(--carte);
  }
}

/* ---- Le titre « Les Kalipay » cède la place sous 480px -----------------
   ~90px de large pour une information que le logo rond doré porte déjà.
   Sur les téléphones larges et les tablettes (481px et plus), il reste
   affiché : la place ne manque qu'en dessous. */
@media (max-width:480px){
  .kali-titre{display:none}
}

/* ---- Titres de carte effacés sur mobile (27/08/2026) ------------------
   Une classe à poser au cas par cas sur un .bloc-titre — pas une règle
   générale : la plupart des titres de carte servent justement à distinguer
   deux blocs empilés. Ceux-là (« ✉️ Mes messages », « 📰 Fil d'actu »)
   coiffent une carte qui prend tout l'écran sur téléphone et se reconnaît
   sans être nommée ; la ligne ne coûtait que de la hauteur. Le titre reste
   entier sur PC. Écrit hors du bloc ≤560px : le seuil est celui du site
   pour « mobile » (900px), le même que .nav-texte. */
@media (max-width:900px){
  .bloc-titre--sans-mobile{display:none}
}

/* ---- Très petits écrans (≤360px) : un dernier resserrage --------------
   Un iPhone SE de première génération ne laisse que 304px utiles : les
   six icônes s'y dédoublaient encore. Rembourrage, écarts et logo perdent
   deux pixels chacun — assez pour la rangée unique, sans rien retirer. */
@media (max-width:360px){
  .kali-logo{width:28px;height:28px}
  .nav-haut{gap:3px}
  .nav-lien{padding:5px 6px}
}

/* ---- Annuaire : « En ligne », « Libre » et « Filtrer » sur UNE ligne ----
   Sur un écran de 360px, la zone utile fait 328px et les trois boutons en
   demandaient ~357 : le troisième passait à la ligne. Ce sont les deux
   pastilles coulissantes (.mbf-toggle-etat, 30px + 7px d'écart chacune) qui
   coûtent le plus cher — retirées ici, on retombe à ~283px, ce qui tient
   même sur un écran de 320px, et les libellés restent entiers.

   Rien n'est perdu pour autant : l'état actif se lit déjà au fond, à la
   bordure et au texte verts (.mbf-toggle--actif, plus haut dans ce fichier),
   et role="switch" + aria-checked restent posés sur le lien lui-même
   (vues/membres.php) pour les lecteurs d'écran. La pastille reste affichée
   dès 561px et sur PC, ainsi que dans la pop-up de filtres (.mbf-toggle sans
   --titre), qui a la place. Demande du 27/08/2026. */
.mbf-toggle-court{display:none}

@media (max-width:560px){
  .mbf-toggle--titre .mbf-toggle-etat{display:none}
  /* Plus rien ne doit pouvoir renvoyer un bouton à la ligne : c'est tout
     l'objet de la règle ci-dessus. */
  .bloc-titre-actions{flex-wrap:nowrap}
  .mbf-toggle--titre,.btn-filtrer{white-space:nowrap}
  /* Un quatrième bouton (🗺️ Carte, 01/09/2026) partage désormais cette
     ligne : « En ligne » y cède la place à « EL ». Le libellé entier reste
     lu par les lecteurs d'écran (aria-label du lien, vues/membres.php). */
  .mbf-toggle-long{display:none}
  .mbf-toggle-court{display:inline}
}

/* ---- Zone de saisie d'une publication : toute la largeur (≤560px) ------
   .pub-zone textarea réserve 118px À DROITE, sur toute la hauteur, pour les
   trois boutons du coin (émoji, lien, sondage) — qui sont pourtant posés en
   BAS à droite (.pub-zone-outils). Sur un écran de 360px, c'est un tiers de
   la largeur de saisie perdu. Sur mobile, on dégage par le BAS : la place
   n'est prise que sur la dernière ligne, là où les boutons se trouvent
   réellement. Inchangé sur PC. */
@media (max-width:560px){
  .pub-zone textarea{padding-right:13px;padding-bottom:46px}
}

/* ---- Bouton « + » de publication : jamais sur la messagerie -----------
   Posé en bas à GAUCHE sur toutes les pages (noyau/layout.php), il tombait
   pile sur le coin de la ligne de saisie des messages une fois la
   messagerie en pleine hauteur. Écrit avec :has() comme les autres règles
   de position de ce bouton (voir plus haut). Mobile seulement : sur PC, le
   bouton est calé sur la colonne du milieu et ne gêne pas. */
@media (max-width:900px){
  body:has(#zone-centrale[data-route="messages"]) .pub-flottant{display:none}
  /* Meme gene, autre chemin (01/09/2026) : depuis une fiche, « Ecrire »
     n'emmene pas sur /messages mais ouvre la conversation EN POP-UP
     (.kpb-bulle, kpbOuvrir() dans assets/kalipay.js), qui couvre tout
     l'ecran sur mobile. La route reste « fiche » : la regle ci-dessus ne
     s'applique donc pas, et le « + » retombait pile sur la ligne de
     saisie du message. On le masque tant que la bulle est ouverte —
     .kpb-ouvert est posee/retiree par kalipay.js a l'ouverture et a la
     fermeture, le bouton revient donc tout seul. */
  body:has(.kpb-bulle.kpb-ouvert) .pub-flottant{display:none}
}

/* ==========================================================================
   DÉPLACER UNE PHOTO VERS UN AUTRE ALBUM (27/08/2026)
   Écran « Déplacer vers… » à l'intérieur de la pop-up d'album (bloc at_,
   atPhotoDeplacerOuvrir(), assets/kalipay.js).
   ========================================================================== */
.at-deplacer-choix{
  width:100%;max-width:340px;margin:6px 0 10px;background:var(--fond-3);
  border:1px solid var(--trait);color:var(--txt);border-radius:9px;padding:10px 12px;
  font-size:.95rem;font-family:inherit;
}


/* ==========================================================================
   CARROUSEL DE VIGNETTES — quatre photos visibles (27/08/2026)

   Enveloppe posée par JavaScript (bloc car_, assets/kalipay.js) autour
   d'une rangée qui dépasse quatre cases. En dessous de cinq photos, aucune
   de ces règles ne s'applique : la rangée garde l'affichage d'avant
   (.ph-vignettes .ph-case en flex:1, grille .photos-choix à 5 colonnes).
   ========================================================================== */
.kp-car{position:relative;min-width:0}
.kp-car .ph-vignettes,
.kp-car .at-vignettes{
  overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
/* Glisser branché (piste sans cases déplaçables) : le doigt fait défiler la
   rangée, la page ne bouge que verticalement. Une piste dont les cases se
   réordonnent au glisser-déposer garde, elle, le défilement tactile natif. */
.kp-car--glissable .ph-vignettes,
.kp-car--glissable .at-vignettes{cursor:grab;touch-action:pan-y}
.kp-car .ph-vignettes::-webkit-scrollbar,
.kp-car .at-vignettes::-webkit-scrollbar{display:none}
.kp-car--glisse .ph-vignettes,
.kp-car--glisse .at-vignettes{cursor:grabbing;scroll-behavior:auto}

/* Quatre cases pleines dans la largeur, écart compris (gap 4px). */
.kp-car .ph-vignettes .ph-case{flex:0 0 calc((100% - 12px) / 4)}

/* Pastille OR pleine, chevron sombre : lisible par-dessus n'importe quelle
   photo (l'ancien chevron or sur fond noir translucide disparaissait sur
   les photos foncées — 27/08/2026). */
.kp-car-fleche,
.ph-fleche,
.kp-visionneuse-fleche{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:38px;height:38px;padding:0;border-radius:50%;
  border:2px solid var(--papier-fond);
  background:linear-gradient(135deg,var(--or-pale),var(--or));
  color:var(--sur-or);
  font-family:inherit;font-size:1.5rem;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 3px 12px var(--ombre-forte);
  transition:background .15s,box-shadow .15s,opacity .15s;
}
.kp-car-fleche:hover,
.ph-fleche:hover,
.kp-visionneuse-fleche:hover{
  background:linear-gradient(135deg,var(--jaune-pale),var(--or));
  box-shadow:0 3px 16px var(--or-voile-fort);
}
.kp-car-fleche[disabled],
.ph-fleche[disabled],
.kp-visionneuse-fleche[disabled]{opacity:0;pointer-events:none}
.kp-car-fleche--prec{left:6px}
.kp-car-fleche--suiv{right:6px}

/* ---- Flèches et compteur posés SUR une photo ----------------------------
   Diaporama de la fiche (.ph-scene), pop-up d'un album (.at-scene) et
   visionneuse plein écran. z-index 5 : au-dessus du bouton de réaction
   (.ph-reagir, z-index 3) et de l'étiquette « Principale ». */
.ph-fleche{z-index:5}
.ph-fleche--prec{left:8px}
.ph-fleche--suiv{right:8px}
.ph-compteur{
  position:absolute;top:8px;right:8px;z-index:5;pointer-events:none;
  padding:3px 9px;border-radius:999px;font-size:.8rem;font-weight:600;
  background:var(--voile);color:#fff;letter-spacing:.02em;
}
/* Pop-up d'un album : la carte garde ses propres boutons de gestion, la
   scène ne sert qu'à tenir les flèches en place pendant que les CARTES
   entrent et sortent du grand cadre (atDiapoAller(), kalipay.js). */
/* Le compteur du diaporama est calé en haut à droite (.ph-compteur) — or
   dans la pop-up d'album, c'est là que vit la croix de suppression de la
   carte. Il se posait dessus. On le décale vers la gauche, ici seulement :
   le diaporama de la fiche publique n'a pas de croix, il garde son coin. */
.at-scene .ph-compteur{right:46px}
.at-scene{position:relative;min-width:0}
.at-scene .photo-case{display:none}
.at-scene .photo-case--grande{display:flex}

/* Visionneuse plein écran : flèches fixes, à mi-hauteur de l'écran. */
.kp-visionneuse-fleche{position:fixed;z-index:10002;width:44px;height:44px;font-size:1.7rem}
.kp-visionneuse-fleche--prec{left:14px}
.kp-visionneuse-fleche--suiv{right:14px}
.kp-visionneuse-compteur{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:10002;
  padding:4px 12px;border-radius:999px;font-size:.85rem;font-weight:600;
  background:var(--voile);color:#fff;pointer-events:none;
}

/* ---- Pop-up d'un album : grande photo au-dessus, piste dessous ----------
   .at-photos--pile n'est posée (atRendreAlbum(), kalipay.js) que lorsqu'un
   grand cadre existe ; sans lui, la grille .photos-choix reste plate. */
.at-photos--pile{display:flex;flex-direction:column;gap:9px}
.at-photos--pile .photo-case--grande{width:100%}
.at-vignettes{display:flex;gap:9px;min-width:0}
.at-vignettes .photo-case{flex:0 0 calc((100% - 27px) / 4);min-width:0}

/* ==========================================================================
   PAGE D'UN BON PLAN (vues/bon-plan.php) — 28/08/2026

   Même agencement que la page publique d'une soirée
   (soirees/_moteur/contenu.php + page.css) : affiche, bloc date, titre
   orné, « Informations », « Tarifs de l'événement », participants,
   description, appel à s'inscrire. Classes propres (bp-page-*) plutôt que
   la feuille du moteur des soirées : les deux pages restent indépendantes,
   on peut faire évoluer l'une sans toucher l'autre.
   ========================================================================== */
.bp-page .card-corps{padding:24px 22px}

/* ---- Entête d'identité (28/08/2026) -------------------------------------
   Reprise de l'entête d'une soirée (.entete-soiree / .embleme,
   soirees/_moteur/contenu.php) sous l'espace de noms bp- : initiale cerclée
   d'or, « Proposé par » + pseudo, rangée de pastilles (bon plan, type de
   soirée, inscription) puis rangée d'outils. Fond sombre volontaire : les
   pastilles sont des dégradés or, vert et bleu, elles s'effaceraient sur un
   fond clair. */
.bp-entete{
  display:flex;align-items:center;gap:17px;padding:18px 20px;
  background:linear-gradient(135deg,var(--carte-3) 0%,var(--fond) 55%,var(--fond-2) 100%);
  border-bottom:2px solid var(--or);
}
.bp-es-avatar{flex:0 0 auto;line-height:0;display:block}
.bp-es-photo{
  width:74px;height:74px;border-radius:50%;object-fit:cover;display:block;
  box-shadow:0 0 0 2px var(--ombre-couleur),0 0 0 4px var(--or);transition:box-shadow .2s ease,transform .2s ease;
}
a.bp-es-avatar:hover .bp-es-photo{box-shadow:0 0 0 2px var(--ombre-couleur),0 0 0 5px var(--or-vif);transform:scale(1.04)}
.bp-es-vide{
  width:74px;height:74px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:var(--carte-3);
  font-family:'Playfair Display',Georgia,serif;font-size:1.75rem;font-weight:bold;color:var(--or-txt);
  box-shadow:0 0 0 2px var(--ombre-couleur),0 0 0 4px var(--or);transition:box-shadow .2s ease,transform .2s ease;
}
a.bp-es-avatar:hover .bp-es-vide{box-shadow:0 0 0 2px var(--ombre-couleur),0 0 0 5px var(--or-vif);transform:scale(1.04)}
.bp-es-texte{flex:1 1 auto;min-width:0}
.bp-es-sur{font-size:.67rem;letter-spacing:2.4px;text-transform:uppercase;color:var(--txt-3);margin-bottom:2px}
.bp-es-ligne-nom{line-height:1.15;margin-bottom:2px}
.bp-es-nom{
  font-family:'Playfair Display',Georgia,serif;font-weight:bold;font-size:1.32rem;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--jaune-txt);word-break:break-word;
}
a.bp-es-nom:hover{color:var(--sur-couleur)}

/* Les pastilles : même gabarit pour toutes, seule la couleur distingue une
   étiquette (bon plan, type) d'une action (inscription, outils). Le liseré
   blanc intérieur (::after) fait la parenté visuelle entre elles. */
.bp-emblemes{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding:9px 0 0}
.bp-embleme{
  position:relative;display:inline-flex;align-items:center;justify-content:flex-start;
  gap:9px;padding:7px 13px;border-radius:8px;border:1px solid;flex:0 1 auto;
  font-family:inherit;text-decoration:none;
}
.bp-embleme::after{
  content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;
  border-radius:5px;border:1px solid var(--blanc-voile);pointer-events:none;
}
.bp-embleme-ico{font-size:.85rem;line-height:1}
.bp-embleme-texte{
  font-family:'Playfair Display',Georgia,serif;font-weight:bold;font-size:.71rem;
  letter-spacing:1.3px;text-transform:uppercase;
}
/* Deux libellés par action : le complet sur écran large, le raccourci sur
   téléphone (voir le @media 540px plus bas). Déclaré ICI, avant le media
   query qui le réaffiche — à spécificité égale, c'est la dernière règle du
   fichier qui l'emporte. */
.bp-embleme-court{display:none}
.bp-embleme--bonplan{
  background:linear-gradient(135deg,var(--or-fonce),var(--or-vif) 50%,var(--or-fonce));
  color:var(--sur-vif);border-color:var(--or);text-shadow:1px 1px 3px var(--ombre-couleur);
}
.bp-embleme--type{
  background:linear-gradient(135deg,var(--vert-fonce),var(--vert) 50%,var(--vert-fonce));
  color:var(--sur-vif);border-color:var(--vert);text-shadow:1px 1px 3px var(--ombre-couleur);
}
.bp-embleme--type::after{border-color:var(--blanc-voile)}
/* « Ajouter à mon agenda » (15/09/2026, demande de Floriant) : icône
   seule, le libellé complet se lisait mal dans la rangée. Le texte reste
   dans le DOM (title/aria-label pour les lecteurs d'écran), juste masqué
   ici — même recette que les pastilles réduites sur mobile (.bp-embleme,
   @media 540px, plus bas dans ce fichier). */
.bp-embleme--agenda{padding:7px 11px}
.bp-embleme--agenda .bp-embleme-texte{display:none}

/* Les trois pastilles cliquables : bleue (s'inscrire), rouge (se
   désinscrire), orange (gestion), bleu nuit (inviter). */
.bp-embleme--inscription,
.bp-embleme--desinscription,
.bp-embleme--gestion,
.bp-embleme--invitation{
  color:var(--sur-couleur);cursor:pointer;text-shadow:1px 1px 3px var(--ombre-couleur);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.bp-embleme--inscription::after,
.bp-embleme--desinscription::after,
.bp-embleme--gestion::after,
.bp-embleme--invitation::after{border-color:var(--blanc-voile)}
.bp-embleme--inscription:hover,.bp-embleme--inscription:focus-visible,
.bp-embleme--desinscription:hover,.bp-embleme--desinscription:focus-visible,
.bp-embleme--gestion:hover,.bp-embleme--gestion:focus-visible,
.bp-embleme--invitation:hover,.bp-embleme--invitation:focus-visible{
  filter:brightness(1.12);transform:translateY(-1px);outline:none;
}
.bp-embleme--inscription{
  background:linear-gradient(135deg,var(--bleu-sombre),var(--bleu) 50%,var(--bleu-fonce));border-color:var(--bleu);
}
.bp-embleme--inscription:hover{box-shadow:0 3px 12px var(--bleu-voile)}
/* Posée APRÈS .bp-embleme--inscription : le même bouton porte les deux
   classes une fois le membre inscrit, c'est celle-ci qui doit l'emporter. */
.bp-embleme--desinscription{
  background:linear-gradient(135deg,var(--rouge-tres-fonce),var(--accent) 50%,var(--accent-fonce));border-color:var(--rouge-tres-fonce);
}
.bp-embleme--desinscription:hover{box-shadow:0 3px 12px var(--accent-voile)}
.bp-embleme--gestion{
  background:linear-gradient(135deg,var(--orange-fonce),var(--orange-fonce) 50%,var(--orange-sombre));border-color:var(--orange);
}
.bp-embleme--gestion:hover{box-shadow:0 3px 12px var(--orange-voile)}
.bp-embleme--invitation{
  background:linear-gradient(135deg,var(--bleu-sombre),var(--indigo) 50%,var(--bleu-sombre));border-color:var(--bleu);
}
.bp-embleme--invitation:hover{box-shadow:0 3px 12px var(--violet-voile)}

/* ---- Affiche ------------------------------------------------------------ */
/* ---- Le logo, sous l'entête (28/08/2026) --------------------------------- */
.bp-page-logo{
  display:flex;align-items:center;justify-content:center;
  padding:18px 20px;background:var(--fond-2);border-bottom:1px solid var(--trait);
}
.bp-page-logo img{max-width:200px;max-height:150px;object-fit:contain;border-radius:8px}

/* ---- L'affiche, en pied de page ------------------------------------------ */
.bp-page-affiche-lien{
  display:block;position:relative;width:100%;padding:0;border:0;background:none;
  cursor:zoom-in;margin:0 0 28px;
}
.bp-page-affiche{
  width:100%;max-height:520px;object-fit:contain;display:block;
  border:1px solid var(--trait);border-radius:8px;background:var(--fond-2);
}
.bp-page-affiche-loupe{
  position:absolute;right:12px;bottom:12px;display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;font-size:1rem;
  background:var(--voile);border:1px solid var(--or-voile-fort);
  transition:background .18s ease,transform .18s ease;
}
.bp-page-affiche-lien:hover .bp-page-affiche-loupe{background:var(--voile);transform:scale(1.08)}

/* L'affiche en plein écran (#bpa-voile, noyau/layout.php) */
.bpa-voile{
  display:none;position:fixed;inset:0;z-index:1300;
  background:var(--voile-fort);align-items:center;justify-content:center;padding:20px;
}
.bpa-voile.ouvert{display:flex}
.bpa-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.bpa-fermer{
  position:absolute;top:14px;right:16px;width:40px;height:40px;border-radius:50%;
  background:var(--or-voile);border:1px solid var(--or-voile-fort);
  color:var(--or-txt);font-size:1.1rem;cursor:pointer;line-height:1;
}
.bpa-fermer:hover{background:var(--or-voile);color:var(--sur-couleur)}

/* ---- Bloc date ---------------------------------------------------------- */
.bp-date-bloc{
  display:flex;align-items:center;gap:20px;width:100%;
  background:var(--fond-3);border:1px solid var(--trait);border-radius:10px;
  padding:16px 20px;margin-bottom:20px;flex-wrap:wrap;
}
.bp-date-vignette{
  flex:0 0 76px;width:76px;border-radius:10px;overflow:hidden;
  background:var(--carte);border:1px solid var(--trait);text-align:center;
  box-shadow:0 2px 8px var(--ombre-couleur);
}
.bp-date-mois{
  background:linear-gradient(135deg,var(--or-fonce),var(--or-vif) 55%,var(--or-fonce));color:var(--sur-vif);
  font-size:.74rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  padding:5px 2px;text-shadow:1px 1px 3px var(--ombre-couleur);
}
.bp-date-jour{
  font-family:'Playfair Display',Georgia,serif;font-size:2rem;font-weight:800;
  color:var(--txt);line-height:1.05;padding:6px 2px 0;
}
.bp-date-annee{font-size:.72rem;font-weight:700;color:var(--txt-2);padding:0 2px 7px;letter-spacing:.5px}
.bp-date-infos{flex:1 1 240px;min-width:0}
.bp-date-titre{font-size:1.24rem;font-weight:600;color:var(--txt-1);line-height:1.3}
.bp-date-semaine{font-weight:800;color:var(--txt);text-transform:capitalize}
.bp-date-orga{
  display:flex;align-items:center;gap:6px;min-width:0;
  font-family:'Playfair Display',Georgia,serif;font-size:1rem;font-weight:600;
  color:var(--txt-2);line-height:1.3;margin-top:3px;
}
.bp-date-orga-ico{font-family:inherit;font-size:.95rem;flex:0 0 auto}
.bp-date-orga a{
  color:var(--or-txt);text-decoration:none;border-bottom:1px solid transparent;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bp-date-orga a:hover{border-bottom-color:currentColor}
.bp-date-droite{flex:0 0 auto;display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.bp-date-heure{
  display:inline-block;background:var(--or-voile);border:1px solid var(--or-voile-fort);
  color:var(--or-txt);font-size:.9rem;font-weight:800;padding:6px 16px;border-radius:999px;white-space:nowrap;
}
.bp-date-compte{font-size:.82rem;font-weight:700;color:var(--vert-fonce);white-space:nowrap}
.bp-date-compte.proche{color:var(--orange-brun)}
.bp-date-compte.passe{color:var(--txt-2);font-weight:600}
.bp-date-simple{
  font-weight:700;font-size:1.05rem;color:var(--txt);text-align:center;
  background:var(--fond-3);border:1px solid var(--trait);border-radius:10px;
  padding:14px 18px;margin-bottom:20px;
}

/* ---- Titre orné --------------------------------------------------------- */
.bp-page-titre{
  display:block;text-align:center;font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.5rem,3.8vw,2.15rem);font-weight:bold;color:var(--txt);
  line-height:1.25;letter-spacing:.3px;margin:0 0 12px;text-wrap:balance;
  text-shadow:0 0 30px var(--or-voile);
}
.bp-ornement{display:flex;align-items:center;justify-content:center;gap:14px;max-width:420px;margin:0 auto 22px}
.bp-ornement--haut{margin:6px auto 12px}
.bp-ornement i{flex:1 1 auto;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--or-voile),var(--or-txt),var(--or-voile))}
.bp-ornement b{flex:0 0 auto;color:var(--or);font-size:.62rem;letter-spacing:3px;font-weight:400;line-height:1}

/* ---- Bloc « Informations » ---------------------------------------------- */
.bp-infos{
  background:var(--fond-3);border:1px solid var(--trait);border-radius:8px;
  padding:13px 15px;margin:0 0 22px;text-align:left;
}
.bp-infos-titre{
  font-family:'Playfair Display',Georgia,serif;font-size:.97rem;
  font-weight:700;color:var(--or-txt);margin-bottom:9px;
}
/* Une ligne par information (28/08/2026), séparées par un filet : intitulé
   et valeur à gauche, l'action à droite.

   La ligne ENTIÈRE est l'élément cliquable, jamais seulement le bouton :
   c'est ce qui permet, sur téléphone (voir le @media plus bas), d'effacer le
   libellé de l'action et de laisser une simple barre à toucher avec sa
   flèche — sans changer une ligne de HTML. */
/* Grille des cases (04/09/2026) : repeat(auto-fit, minmax(…)) — deux
   colonnes dès que la colonne centrale est assez large, une seule sinon.
   Le calcul se fait sur la largeur RÉELLE du bloc, jamais sur celle de
   l'écran : sur ordinateur la colonne du milieu est encadrée par deux
   colonnes de 300px, un @media aurait basculé trop tôt. Chaque ligne est
   devenue une case encadrée — le filet horizontal ne pouvait plus séparer
   proprement deux colonnes. */
.bp-infos-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:8px}
.bp-info-ligne{
  padding:9px 11px;border:1px solid var(--trait-2);border-radius:8px;
  background:var(--carte-2);
}
.bp-info-action{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;padding:0;color:inherit;font:inherit;
  text-decoration:none;cursor:pointer;
}
.bp-info-action--inerte{cursor:default}
.bp-info-ico{font-size:1rem;width:17px;text-align:center;flex:none;color:var(--txt-2);line-height:1}
/* baseline : l'intitulé et sa valeur s'alignent sur la même ligne d'écriture,
   et passent l'un sous l'autre quand la place manque. */
.bp-info-dit{
  flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:4px 9px;
}
.bp-info-lab{font-weight:700;color:var(--txt);font-size:.84rem}
.bp-info-val{font-size:.83rem;color:var(--txt-1);line-height:1.3;word-break:break-word}
/* Compteurs du covoiturage, sous la valeur : flex-basis 100% pour occuper
   une ligne a eux seuls dans le .bp-info-dit (flex wrap). 31/08/2026. */
.bp-info-compte{flex:0 0 100%;display:flex;align-items:center;gap:5px;margin-top:1px;font-size:.78rem;font-weight:700;color:var(--txt-2)}
.bp-info-compte b{font-weight:800;color:var(--or-txt)}
.bp-info-compte [hidden],.bp-info-compte[hidden]{display:none}
/* L'action : un bouton sur écran large, une flèche seule sur téléphone. */
.bp-info-cta{
  flex:none;display:inline-flex;align-items:center;border-radius:10px;
  padding:7px 12px;font-size:.8rem;font-weight:700;white-space:nowrap;
  background:var(--fond-3);color:var(--txt-1);border:1px solid var(--trait);
  transition:border-color .15s ease;
}
.bp-info-action:hover .bp-info-cta{border-color:var(--or)}
.bp-info-fleche{display:none}

/* Sur ordinateur (17/09/2026) : une tuile par information, toutes sur une
   rangée — icône et intitulé en tête, la valeur dessous, le bouton calé en
   bas de la tuile pour que les boutons s'alignent d'une tuile à l'autre.
   Aucun changement de HTML : .bp-info-dit passe en display:contents pour
   que ses enfants deviennent des cases de la grille de la tuile. Rangées :
   1 tête, 2 valeur, 3 complément (compteurs / description), 4 bouton (1fr).
   Le téléphone (@media 620px plus bas) garde ses barres à toucher. */
@media(min-width:621px){
  .bp-infos-grille{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
  .bp-info-ligne{display:flex;padding:13px 14px;border-radius:10px}
  .bp-info-action{
    flex:1 1 auto;display:grid;grid-template-columns:22px minmax(0,1fr);
    grid-template-rows:auto auto auto 1fr;column-gap:8px;row-gap:0;align-items:center
  }
  .bp-info-dit{display:contents}
  .bp-info-ico{grid-column:1;grid-row:1;width:22px;font-size:1.05rem}
  .bp-info-lab{grid-column:2;grid-row:1;font-size:.9rem}
  .bp-info-val{grid-column:1 / -1;grid-row:2;margin-top:7px;font-size:.86rem}
  .bp-info-compte,.bp-info-lieu-desc{grid-column:1 / -1;grid-row:3;margin-top:5px}
  .bp-info-cta{
    grid-column:1 / -1;grid-row:4;align-self:end;justify-content:center;
    margin-top:12px;padding:8px 12px;font-size:.84rem
  }
}

/* ---- Tarifs ------------------------------------------------------------- */
.bp-tarifs-titre{font-size:.95rem;font-weight:600;color:var(--txt-1);margin-bottom:12px;text-align:center}
.bp-tarifs-grille{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:28px}
.bp-tarif{
  flex:0 1 160px;background-color:var(--fond-3);border-radius:8px;
  padding:14px 10px;text-align:center;border:1px solid var(--trait);
}
.bp-tarif-montant{font-size:1.35rem;font-weight:700;color:var(--txt);margin-bottom:6px}
.bp-tarif-tag{font-size:.88rem;font-weight:700;display:inline-flex;align-items:center;gap:5px;justify-content:center}
.bp-tag-hommes{color:var(--bleu)}
.bp-tag-femmes{color:var(--rose)}
.bp-tag-couples{color:var(--violet)}

/* ---- Participants (compteur + fenêtre « qui y va ») --------------------- */
/* Refonte du 31/08/2026 : trois compteurs (couples/hommes/femmes) sous un
   bandeau de titre, boutons pleine largeur dessous. Grille à trois colonnes
   égales — elle ne se casse jamais, même sur les petits téléphones. */
.bp-page-participants{
  background:var(--carte-3);border:1px solid var(--trait);border-radius:8px;
  padding:0 0 14px;margin-bottom:28px;
}
/* L'entête est un <button> (31/08/2026) : elle ouvre « Qui y va » en entier.
   Remise à zéro de l'apparence native, le bandeau reste un bandeau. */
.bp-page-presences{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap;
  width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--trait-2);
  margin:0;padding:11px 16px;font:inherit;color:inherit;cursor:pointer;
  transition:background-color .12s;
}
.bp-page-presences:hover{background:rgba(212,175,55,.05)}
.bp-page-presences:hover em{color:var(--or-txt)}
.bp-page-presences:focus-visible{outline:2px solid var(--or);outline-offset:-2px}
.bp-page-presences b{
  font-family:'Playfair Display',Georgia,serif;font-size:.98rem;
  font-weight:700;color:var(--or-txt);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bp-page-presences em{
  font-style:normal;color:var(--txt-2);font-size:.8rem;white-space:nowrap;flex:0 0 auto;
}
.bp-page-participants-grille{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px 16px;
}
/* Chaque compteur est un <button> : il ouvre la liste filtrée sur SON genre
   (31/08/2026). Même apparence qu'avant, plus le survol et le focus. */
.bp-page-compteur{
  display:block;min-width:0;width:100%;margin:0;font:inherit;cursor:pointer;
  background:var(--fond-2);border:1px solid var(--trait-2);border-top:2px solid var(--or-fonce);
  border-radius:8px;padding:12px 4px;text-align:center;
  transition:border-color .12s,background-color .12s,transform .12s;
}
.bp-page-compteur:hover{
  background:var(--fond-3);border-color:var(--trait-4);border-top-color:var(--or);
  transform:translateY(-1px);
}
.bp-page-compteur:hover b{color:var(--or-txt)}
.bp-page-compteur:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.bp-page-compteur b{
  display:block;font-family:'Playfair Display',Georgia,serif;
  font-size:1.9rem;line-height:1;color:var(--txt);
}
/* Le libellé tient sur UNE ligne quoi qu'il arrive (demande du 31/08/2026) :
   jamais de retour à la ligne, la taille se resserre avec l'écran plutôt que
   le mot ne se casse en deux. */
.bp-page-compteur span{
  display:block;margin-top:4px;color:var(--txt-2);
  white-space:nowrap;overflow:hidden;text-overflow:clip;
  font-size:clamp(.6rem,2.6vw,.78rem);letter-spacing:-.1px;
}
.bp-page-participants-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px}
.bp-page-participants-actions .bouton{flex:1 1 140px}
.bp-page-participants .bouton{margin-top:0}
@media (max-width:420px){
  .bp-page-presences{padding:10px 12px}
  .bp-page-presences b{font-size:.9rem}
  .bp-page-participants-grille{gap:6px;padding:12px 10px}
  .bp-page-participants-actions{padding:0 10px}
  .bp-page-compteur{padding:10px 2px}
  .bp-page-compteur b{font-size:1.55rem}
}

/* ---- Fenêtre « Inviter » : mes favoris (31/08/2026) --------------------- */
.bpi-wa{display:flex;margin-bottom:16px}
.bpi-wa .bouton{flex:1;background:#25d366;color:#0b3d20;border-color:#1da851;font-weight:700}
.bpi-wa .bouton:hover{background:#1da851;color:#06301a}
.bpi-sep{
  display:flex;align-items:center;gap:10px;margin-bottom:8px;
  color:var(--txt-2);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;
}
.bpi-sep:before,.bpi-sep:after{content:'';flex:1;height:1px;background:var(--trait-2)}

/* ---- Onglets, filtres, pagination (31/08/2026) --------------------------
   Repris de la pop-up d'invitation d'une soirée (.ig-onglets), en habits du
   site public. Trois onglets : ⭐ Favoris, 👥 Tous les membres, ✉️ Invités. */
.bpi-onglets{display:flex;gap:6px;margin-bottom:10px}
.bpi-onglet{
  flex:1;min-width:0;font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;
  padding:8px 6px;border-radius:8px;text-align:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  background:var(--fond-2);border:1px solid var(--trait-2);color:var(--txt-2);
  transition:border-color .12s,color .12s,background-color .12s;
}
.bpi-onglet:hover{border-color:var(--trait-4);color:var(--txt-1)}
.bpi-onglet--actif{
  background:var(--fond-3);border-color:var(--or-fonce);color:var(--or-txt);
}
.bpi-onglet-compteur{color:var(--txt-2);font-weight:400}
.bpi-onglet--actif .bpi-onglet-compteur{color:var(--or-txt)}

.bpi-filtres{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.bpi-filtres select,.bpi-filtres input{
  flex:1 1 110px;min-width:0;background:var(--fond-2);border:1px solid var(--trait);
  border-radius:8px;color:var(--txt-1);font-family:inherit;font-size:.8rem;padding:8px 10px;
}
.bpi-filtres select{flex:1 1 100%}
.bpi-filtres .bouton{flex:0 0 auto;width:auto;margin-top:0;padding:8px 14px;font-size:.8rem}

.bpi-pagination{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px}
.bpi-pagination:empty{margin-top:0}
.bpi-page{
  font:inherit;font-size:1rem;font-weight:700;cursor:pointer;
  width:34px;height:34px;border-radius:8px;
  background:var(--fond-3);border:1px solid var(--trait);color:var(--txt-1);
}
.bpi-page:hover:not([disabled]){border-color:var(--or);color:var(--or-txt)}
.bpi-page[disabled]{opacity:.35;cursor:default}
.bpi-page-etat{font-size:.8rem;color:var(--txt-2)}

.bpi-favoris{max-height:40vh;overflow-y:auto}
.bpi-fav{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--trait-2)}
.bpi-fav:last-child{border-bottom:0}
.bpi-fav-picto{
  flex:0 0 34px;height:34px;border-radius:50%;background:var(--fond-4);
  border:1px solid var(--trait-3);display:flex;align-items:center;justify-content:center;font-size:.95rem;
}
.bpi-fav-picto--favori{border-color:var(--or-fonce)}
.bpi-fav-nom{flex:1;min-width:0}
.bpi-fav-nom b{display:block;font-size:.9rem;color:var(--txt);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bpi-fav-nom span{font-size:.74rem;color:var(--txt-2)}
/* button.bouton{width:100%} (plus haut dans ce fichier) collait au bouton
   toute la largeur de la ligne et écrasait le pseudo — corrigé le
   31/08/2026 : ici le bouton ne prend que sa place. */
.bpi-fav .bouton{
  flex:0 0 auto;width:auto;margin-top:0;padding:7px 12px;font-size:.78rem;
  white-space:nowrap;
}
.bpi-fav .bouton[disabled]{
  background:transparent;border-color:var(--trait-2);color:var(--txt-2);cursor:default;opacity:1;
}
.bpi-vide{color:var(--txt-2);font-size:.84rem;padding:6px 0}

/* Le rappel affiché tant qu'on n'a pas declaré sa présence (31/08/2026) :
   sans inscription, pas d'invitation. */
.bpi-bloque{
  background:var(--fond-2);border:1px solid var(--trait-2);border-left:3px solid var(--or);
  border-radius:8px;padding:12px 14px;color:var(--txt-1);font-size:.85rem;line-height:1.55;
}
.bpi-bloque b{display:block;margin-bottom:4px;color:var(--or-txt);font-size:.9rem}

/* La croix de retrait d'une invitation envoyée par erreur (31/08/2026) :
   discrète tant qu'on ne la survole pas — elle efface la notification du
   membre, ce n'est pas un bouton sur lequel on clique distraitement. */
.bpi-retirer{
  flex:0 0 auto;width:28px;height:28px;margin-left:2px;padding:0;
  font:inherit;font-size:.8rem;line-height:1;cursor:pointer;border-radius:8px;
  background:transparent;border:1px solid var(--trait-2);color:var(--txt-2);
  transition:border-color .12s,color .12s,background-color .12s;
}
.bpi-retirer:hover{background:var(--accent-voile);border-color:var(--accent);color:var(--accent)}
.bpi-retirer:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.bpi-retirer[disabled]{opacity:.4;cursor:default}

/* ---- Description -------------------------------------------------------- */
.bp-page-description{
  background-color:var(--carte);border:1px solid var(--trait);border-radius:8px;
  padding:16px 18px;font-size:.95rem;line-height:1.6;color:var(--txt);
  margin-bottom:28px;
}
.bp-page-description-titre{
  font-family:'Playfair Display',Georgia,serif;font-size:1.05rem;
  font-weight:700;color:var(--or-txt);margin-bottom:8px;
}
/* Seul le texte de l'auteur garde ses sauts de ligne — jamais le bloc
   entier, sinon l'indentation du gabarit s'affiche elle aussi. */
.bp-page-description-texte{white-space:pre-wrap}

/* ---- Appel à s'inscrire -------------------------------------------------- */
.bp-cta{
  background:linear-gradient(135deg,var(--carte-3) 0%,var(--fond) 100%);
  border:1px solid var(--trait);border-radius:8px;padding:20px 16px;text-align:center;
  max-width:560px;margin:0 auto 24px;
}
.bp-cta-titre{
  font-family:'Playfair Display',Georgia,serif;font-size:1.05rem;
  font-weight:800;color:var(--txt);margin-bottom:6px;
}
.bp-cta-sous{font-size:.84rem;color:var(--txt-1);line-height:1.5;margin-bottom:16px}
.bp-cta-boutons{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.bp-cta-boutons .bouton{margin-top:0}
.bp-btn-inscription{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--or-fonce),var(--or-vif) 55%,var(--or-sombre));color:var(--fond);
  font-family:inherit;font-size:1.05rem;font-weight:700;padding:15px 34px;
  border-radius:6px;border:none;cursor:pointer;
  box-shadow:0 4px 16px var(--or-voile-fort);
  transition:background-color .2s,transform .1s,box-shadow .2s;
}
.bp-btn-inscription:hover{
  background:linear-gradient(135deg,var(--or-fonce),var(--or-vif) 55%,var(--or-fonce));
  box-shadow:0 6px 20px var(--or-voile-fort);
}
.bp-btn-inscription:active{transform:translateY(1px)}
.bp-btn-inscription--actif{
  background:linear-gradient(135deg,var(--vert-fonce),var(--vert) 55%,var(--vert-fonce));color:var(--sur-vif);
  box-shadow:0 4px 16px var(--vert-voile);
}
.bp-btn-inscription--actif:hover{background:linear-gradient(135deg,var(--vert-tres-fonce),var(--vert) 55%,var(--vert-tres-fonce))}

/* ---- Crayons de modification rapide (28/08/2026) -------------------------
   Un crayon par bloc, réservé à l'auteur (et à l'équipe) : discret tant
   qu'on ne le survole pas, pour ne pas concurrencer le contenu. */
.bp-crayon{
  flex:none;background:none;border:0;cursor:pointer;line-height:1;
  padding:3px 6px;border-radius:6px;font-size:.85rem;opacity:.55;
  transition:opacity .15s ease,background .15s ease;
}
.bp-crayon:hover,.bp-crayon:focus-visible{opacity:1;background:var(--or-voile);outline:none}

/* Le titre de la page et son crayon sur la même ligne, le titre restant
   centré : le crayon est posé à sa droite sans le décaler. */
.bp-page-titre-ligne{display:flex;align-items:center;justify-content:center;gap:8px}
.bp-page-titre-ligne .bp-page-titre{margin-bottom:0}
.bp-infos-titre,.bp-tarifs-titre,.bp-page-description-titre{
  display:flex;align-items:center;gap:8px;
}
.bp-tarifs-titre{justify-content:center}
.bp-tarifs-vide{
  text-align:center;font-size:.83rem;color:var(--txt-2);font-style:italic;margin-bottom:22px;
}
.bp-page-logo{position:relative}
.bp-page-logo .bp-crayon{position:absolute;top:8px;right:10px}
.bp-page-logo-vide{font-size:.83rem;color:var(--txt-3);font-style:italic}
.bp-page-affiche-bloc{position:relative}
.bp-page-affiche-bloc .bp-crayon{position:absolute;top:8px;right:10px;background:var(--voile)}

/* La fenêtre d'un crayon (#bpe-voile, noyau/layout.php) */
.bpe-voile{z-index:1250}
.bpe-boite{max-width:560px}
.bpe-boite .cs-corps .champ{margin-bottom:14px}
.bpe-note{font-size:.82rem;color:var(--txt-2);line-height:1.5;margin-bottom:12px}
.bpe-bas{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:6px}
.bpe-bas .bouton{margin-top:0}
#bpe-erreur{margin-bottom:12px}

/* ---- Pied de page : retour, gestion ------------------------------------- */
.bp-page-pied{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  border-top:1px solid var(--trait);padding-top:18px;
}
.bp-page-pied .bouton{margin-top:0}

/* ---- Compteur de vues (06/09/2026) --------------------------------------
   Discret, sous le bouton de retour : c'est une information, pas un score.
   Mêmes proportions que le compteur au pied d'une page de soirée. */
.bp-page-vues{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--trait);
  display:flex;align-items:baseline;justify-content:center;gap:6px;flex-wrap:wrap;
  font-size:.8rem;color:var(--txt-2);
}
.bp-page-vues .bp-vues-ico{font-size:.85rem;opacity:.75;align-self:center}
.bp-page-vues .bp-vues-chiffre{font-weight:800;color:var(--txt-1)}
.bp-page-vues .bp-vues-detail{width:100%;text-align:center;font-size:.72rem;color:var(--txt-2)}

/* ---- Fenêtre « Inviter des participants » (#bpi-voile) ------------------ */
.bpi-voile{z-index:1200}
.bpi-boite{max-width:420px}
/* .bpi-lien / .bpi-actions retirés le 31/08/2026 avec le champ « copier le
   lien » : la fenêtre n'offre plus que WhatsApp et mes favoris (.bpi-wa,
   .bpi-favoris, plus haut dans ce fichier). */
.bpi-texte{font-size:.86rem;color:var(--txt-1);line-height:1.5;margin-bottom:12px}

@media(max-width:540px){
  .bp-entete{flex-direction:column;text-align:center;gap:13px;padding:20px 16px}
  .bp-es-nom{font-size:1.18rem}

  /* La rangée de pastilles tient sur UNE ligne (28/08/2026) : plus de retour
     à la ligne, des libellés raccourcis, et une pastille qui accepte de
     rétrécir plutôt que de pousser les autres en dessous. */
  .bp-emblemes{justify-content:center;flex-wrap:nowrap;gap:6px}
  .bp-embleme{padding:6px 9px;gap:6px;min-width:0}
  .bp-embleme-texte{
    font-size:.63rem;letter-spacing:.8px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .bp-embleme-long{display:none}
  .bp-embleme-court{display:inline}
}
@media(max-width:380px){
  .bp-entete{padding:16px 12px;gap:10px}
  .bp-es-vide{width:60px;height:60px;font-size:1.4rem}
  .bp-es-photo{width:60px;height:60px}
  .bp-es-nom{font-size:1.05rem;letter-spacing:1px}
  .bp-emblemes{gap:5px}
  .bp-embleme{padding:6px 7px;gap:5px}
  .bp-embleme-texte{font-size:.6rem;letter-spacing:.6px}
}

@media(max-width:620px){
  .bp-page .card-corps{padding:18px 14px}
  .bp-date-bloc{gap:14px;padding:14px}
  .bp-date-vignette{flex-basis:62px;width:62px}
  .bp-date-jour{font-size:1.7rem}
  .bp-date-titre{font-size:1.05rem}
  .bp-date-orga{font-size:.9rem}
  .bp-date-droite{flex:1 1 100%}
  /* Sur téléphone, la ligne entière devient la cible : le libellé de
     l'action s'efface, une flèche le remplace, et l'intitulé passe au-dessus
     de sa valeur. Rien n'est empilé ni tronqué, le bloc reste court. */
  .bp-infos-grille{gap:7px}
  .bp-info-ligne{padding:10px 11px}
  .bp-info-dit{flex-direction:column;align-items:flex-start;gap:1px}
  .bp-info-lab{font-size:.86rem}
  .bp-info-val{font-size:.76rem;color:var(--txt-2)}
  .bp-info-cta{background:none;border:0;padding:0}
  .bp-info-cta-texte{display:none}
  .bp-info-fleche{display:inline;color:var(--or-txt);font-size:1.05rem}
  .bp-page-affiche{max-height:260px}
  .bp-btn-inscription{width:100%;font-size:.98rem;padding:14px 20px}
}

/* ==========================================================================
   DISPONIBILITÉS — 7 JOURS GLISSANTS (28/08/2026)

   Remplace .fiche-dispo / .fiche-dispo-jour (les 7 lettres L M M J V S D,
   18/08/2026, laissées plus haut le temps de la bascule). Trois entrées vers
   la même pop-up #fd-overlay : entête (.entete-libre), colonne de gauche
   (.fd-appel) et sa propre fiche (.fd-ouvrir). La boîte réutilise
   .qv-overlay/.qv-boite/.qv-entete comme les pop-up notifications, coups de
   cœur et WhatsApp — seul l'intérieur (.fd-*) est propre aux dispos.
   ========================================================================== */

/* ---- Grille de lecture, sur la fiche ------------------------------------- */
.fd-grille-bloc{margin-top:10px}
.fd-resume{
  margin:0 0 6px;font-size:.86rem;font-weight:600;color:var(--vert-txt);letter-spacing:.01em;
}
.fd-resume--vide{color:var(--txt-2);font-weight:400}
.fd-grille{display:flex;gap:5px;flex-wrap:nowrap}
.fd-col{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:26px;
}
.fd-col-jour{font-size:.62rem;color:var(--txt-2);text-transform:uppercase;letter-spacing:.04em}
.fd-barre{
  display:block;width:22px;height:6px;border-radius:3px;
  /* Gris franc = pas disponible : la grille est affichée même quand le
     membre n'a rien coché (28/08/2026), la barre grise porte donc une
     information, elle ne doit pas se confondre avec le fond. */
  background:var(--surbrillance);
}
.fd-barre--on{background:var(--vert)}
.fd-col--pleine .fd-barre--on{background:var(--or)}
/* Sur la fiche, les envies tiennent sur UNE ligne cliquable (28/08/2026) :
   deux libelles en clair, le reste dans un « +N », la liste complete dans
   une pop-up (#fdv-overlay, assets/kalipay.js). Avant, les 21 puces
   pouvaient derouler sur six lignes. */
.fd-envies-lien{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;
  margin-top:8px;padding:5px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--or-voile);background:var(--or-voile);
  color:var(--or-txt);font-family:inherit;font-size:.78rem;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.fd-envies-apercu{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-envies-plus{
  flex:0 0 auto;padding:1px 7px;border-radius:999px;
  background:var(--or-voile);color:var(--txt);font-weight:600;font-size:.72rem;
}
@media (hover:hover){
  .fd-envies-lien:hover{border-color:var(--or);background:var(--or-voile)}
}
/* La pop-up qui les montre toutes : meme boite que les autres (.qv-*). */
.fdv-boite{max-width:420px}
.fdv-liste{display:flex;flex-wrap:wrap;gap:7px;padding:16px 18px;overflow-y:auto}
.fd-envie-puce{
  display:inline-block;padding:2px 9px;margin-right:4px;border-radius:999px;
  background:var(--or-voile);border:1px solid var(--or-voile);
  font-size:.74rem;color:var(--or-txt);
}

/* ---- Les trois déclencheurs --------------------------------------------- */
/* Neutres par defaut : ces boutons OUVRENT la pop-up, ils n'affichent pas
   un etat. Le vert est reserve au cas ou une dispo est reellement
   enregistree (--actif), sans quoi on croit etre declare libre alors que
   rien n'est coche (correction du 28/08/2026). */
.fd-ouvrir,.fd-appel{
  margin-top:8px;display:inline-flex;align-items:center;justify-content:center;
  gap:6px;padding:7px 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--trait);background:var(--surbrillance);color:var(--txt);
  font-family:inherit;font-size:.85rem;font-weight:600;
  transition:background-color .15s ease,transform .15s ease,border-color .15s ease;
}
@media (hover:hover){
  .fd-ouvrir:hover,.fd-appel:hover{border-color:var(--or);background:var(--surbrillance);transform:translateY(-1px)}
}
.fd-ouvrir--actif,.fd-appel--actif{
  border-color:var(--vert);background:var(--vert-voile);color:var(--vert-txt);
}
@media (hover:hover){
  .fd-ouvrir--actif:hover,.fd-appel--actif:hover{background:var(--vert-voile);border-color:var(--vert)}
}
.fd-appel{width:100%;margin-top:0}
/* Sous le bouton d'humeur (colonne .fiche-tete-droite, gap:9px deja pose
   par le conteneur) : pas de marge propre, sinon l'ecart double. */
.fiche-tete-droite .fd-ouvrir{margin-top:0;white-space:nowrap}
/* Les deux reglages « du moment » : empiles sur PC, cote a cote sur mobile
   (28/08/2026) — sur telephone, deux boutons pleine largeur l'un sous
   l'autre repoussaient la fiche vers le bas pour rien. */
.fiche-moment{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
/* Bouton d'humeur sans humeur choisie : « Humeur du moment » sur PC,
   « Humeur » seul sur mobile, ou le bouton partage sa ligne avec celui
   des dispos (28/08/2026). Les deux libelles sont dans la page, le CSS
   n'en montre qu'un. */
.btn-humeur-court{display:none}
.fd-carte{display:flex;flex-direction:column;gap:6px;align-items:center}
/* Le bouton porte lui-meme le resume (« Libre ce soir ») depuis le
   28/08/2026 : la ligne de texte qui vivait dessous a disparu. */
.entete-libre--actif{border-color:var(--vert);background:var(--vert-voile);color:var(--vert-txt)}
/* Entête : MOBILE UNIQUEMENT (28/08/2026). Sur PC, le point d'entrée est
   le cartouche de la colonne de gauche ; sur mobile, où cette carte est
   masquée (.fd-carte-hote ci-dessous), c'est ce bouton qui prend le relais.
   Jamais les deux en même temps. */
.entete-libre{
  display:none;align-items:center;gap:6px;cursor:pointer;
  padding:8px 14px;border-radius:999px;font-family:inherit;font-size:.85rem;font-weight:600;
  border:1px solid var(--trait);background:var(--surbrillance);color:var(--txt);
}
@media (hover:hover){
  .entete-libre:hover{border-color:var(--or);background:var(--surbrillance)}
}
.entete-libre:focus-visible{outline:2px solid var(--or);outline-offset:2px}

/* ---- La pop-up ----------------------------------------------------------- */
.fd-boite{max-width:520px}
.fd-ecran{padding:16px 18px;overflow-y:auto}
.fd-ecran[hidden]{display:none}
/* Les raccourcis sont des ACTIONS a declencher, pas des etats : fond
   neutre, simple lisere de couleur a gauche pour les distinguer. En vert
   plein, « Libre ce soir » se lisait comme deja active (28/08/2026). */
.fd-rapide{
  display:block;width:100%;margin-bottom:9px;padding:13px;border-radius:11px;
  cursor:pointer;font-family:inherit;font-size:.95rem;font-weight:600;text-align:left;
  border:1px solid var(--trait);border-left-width:4px;
  background:var(--surbrillance);color:var(--txt);
  transition:background-color .15s ease,border-color .15s ease;
}
.fd-rapide--soir{border-left-color:var(--vert)}
.fd-rapide--jour{border-left-color:var(--or)}
.fd-rapide--detail{border-left-color:var(--trait);font-weight:500}
@media (hover:hover){
  .fd-rapide:hover{background:var(--surbrillance)}
  .fd-rapide--soir:hover{border-color:var(--vert);border-left-color:var(--vert)}
  .fd-rapide--jour:hover{border-color:var(--or);border-left-color:var(--or)}
}
.fd-effacer{
  display:block;width:100%;margin-top:4px;padding:9px;border:0;background:none;
  color:var(--txt-2);font-family:inherit;font-size:.84rem;cursor:pointer;text-decoration:underline;
}
.fd-note{margin:10px 0 0;font-size:.76rem;color:var(--txt-2);text-align:center}

.fd-table{width:100%;border-collapse:collapse}
.fd-table th{
  font-size:.66rem;color:var(--txt-2);font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;padding:4px 2px;text-align:center;
}
.fd-table td{padding:3px 2px;text-align:center}
.fd-td-jour{text-align:left;font-size:.82rem;color:var(--txt);white-space:nowrap;padding-right:6px}
.fd-case{
  width:34px;height:28px;border-radius:8px;cursor:pointer;padding:0;
  border:1px solid var(--trait);background:var(--surbrillance);
  transition:background-color .12s ease,border-color .12s ease;
}
/* Survol enferme dans @media (hover:hover) : sur ecran tactile, le tap
   laissait la case en etat :hover, dont le fond gris ecrasait le vert de
   .fd-case--on (specificite superieure) — il fallait taper ailleurs pour
   voir enfin la case verte. Corrige le 28/08/2026. */
@media (hover:hover){
  .fd-case:hover:not(.fd-case--on){background:var(--surbrillance)}
}
.fd-case--on{background:var(--vert);border-color:var(--vert)}
.fd-case--jour.fd-case--on{background:var(--or);border-color:var(--or)}
.fd-case--passe{opacity:.28;cursor:not-allowed}
.fd-case:focus-visible{outline:2px solid var(--or);outline-offset:2px}

.fd-envies{margin-top:14px;border-top:1px solid var(--trait);padding-top:12px}
.fd-envies-t{
  margin:0 0 8px;font-size:.7rem;color:var(--or);text-transform:uppercase;letter-spacing:.06em;
}
/* Cadre a ascenseur : ~3 lignes de puces visibles (28/08/2026). Sans lui,
   les 21 envies occupaient 6 lignes et repoussaient « Enregistrer » hors
   de l'ecran sur mobile. Ombre haute/basse absente volontairement : le
   liseré du cadre suffit a dire que ca defile. */
.fd-envies-puces{
  display:flex;flex-wrap:wrap;gap:6px;
  max-height:110px;overflow-y:auto;overscroll-behavior:contain;
  padding:8px;border:1px solid var(--trait);border-radius:10px;
  background:var(--ombre-couleur);
  scrollbar-width:thin;scrollbar-color:var(--trait-4) transparent;
}
.fd-envies-puces::-webkit-scrollbar{width:6px}
.fd-envies-puces::-webkit-scrollbar-thumb{background:var(--trait-4);border-radius:3px}
.fd-envies-nb{color:var(--txt);font-weight:600;margin-left:2px}
.fd-envies-nb[hidden]{display:none}
.fd-envie{
  border:1px solid var(--trait);background:var(--surbrillance);color:var(--txt);
  border-radius:999px;padding:5px 11px;font-family:inherit;font-size:.78rem;cursor:pointer;
}
@media (hover:hover){
  .fd-envie:not(.fd-envie--on):hover{border-color:var(--or)}
}
.fd-envie--on{background:var(--or);border-color:var(--or);color:var(--sur-or);font-weight:600}

.fd-pied{display:flex;gap:8px;margin-top:16px}
.fd-pied .bouton{flex:1}
.fd-message{
  margin:0;padding:0 18px 14px;font-size:.8rem;color:var(--or-txt);text-align:center;
}
.fd-message[hidden]{display:none}

/* Tactile : pas de surbrillance grise du navigateur au tap, et pas de
   temporisation de 300 ms — la case doit repondre au premier doigt. */
.fd-case,.fd-envie,.fd-rapide,.fd-ouvrir,.fd-appel,.entete-libre,.fd-effacer{
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}

/* ---- Onglet « Libre » de la pop-up de filtres (vues/membres.php) --------- */
.mbf-creneaux{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.mbf-creneau{cursor:pointer}
.mbf-creneau input{position:absolute;opacity:0;width:0;height:0}
.mbf-creneau span{
  display:inline-block;padding:7px 14px;border-radius:999px;
  border:1px solid var(--trait);background:var(--surbrillance);color:var(--txt);font-size:.84rem;
}
.mbf-creneau input:checked ~ span{background:var(--vert);border-color:var(--vert);color:var(--sur-vert);font-weight:600}
.mbf-creneau input:focus-visible ~ span{outline:2px solid var(--or);outline-offset:2px}

@media (max-width:900px){
  .fiche-moment{
    /* Centres sur la ligne (28/08/2026) : cales a droite, les deux boutons
       laissaient un vide a gauche sous le bloc identite. */
    flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;
    width:100%;
  }
  .fiche-moment .btn-humeur,
  .fiche-moment .fd-ouvrir{font-size:.76rem;padding:6px 11px}
  /* !important : le libelle court porte un style inline display:none pour
     rester invisible sur PC meme si un vieux CSS traine en cache ; seule
     une regle !important peut le rallumer ici. */
  .btn-humeur-long{display:none !important}
  .btn-humeur-court{display:inline !important}
  /* Icone seule sur mobile (28/08/2026) : la barre du haut est deja
     chargee, le texte « Mes dispos » y prend une place inutile. */
  .entete-libre{display:inline-flex;padding:8px 10px;font-size:1rem}
  .entete-libre-txt{display:none}
  .fd-carte-hote{display:none}       /* la colonne de gauche passe la main */
  .fd-case{width:100%;min-width:28px}
  .fd-boite{max-width:100%}
}

/* ==========================================================================
   AIDE — intertitres de famille et liste « Quoi de neuf » (29/08/2026)

   Les 22 encadrés de vues/aide.php sont désormais regroupés en 5 familles
   (débuter, ma fiche, se rencontrer, sortir, le cadre). .aide-famille est le
   trait doré qui les sépare ; .aide-neuf est la liste datée du bloc
   « Quoi de neuf », en tête de page. Rien d'autre n'a été ajouté : tous les
   encadrés réutilisent .aide-section / .aide-liste / .aide-ascenseur déjà
   en place plus haut.
   ========================================================================== */
.aide-famille{display:flex;align-items:center;gap:10px;margin:26px 0 12px}
.aide-famille:first-child{margin-top:0}
.aide-famille span{
  font-family:Georgia,'Times New Roman',serif;
  font-size:.82rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--or-fonce);white-space:nowrap;
}
.aide-famille::after{content:"";flex:1;height:1px;background:var(--trait)}

.aide-neuf{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.aide-neuf li{display:flex;gap:12px;align-items:baseline}
.aide-neuf-date{
  font-variant-numeric:tabular-nums;font-size:.74rem;font-weight:700;
  letter-spacing:.5px;color:var(--or-fonce);white-space:nowrap;min-width:52px;
}

/* Lien « Un bug ? Une idée ? » en tête de la page d'aide (30/08/2026).
   Ouvre la fenêtre .kp-modale qui envoie un message interne à l'équipe.
   Une seule règle : la fenêtre elle-même réutilise l'habillage commun. */
.aide-contact-lien{margin:0 0 16px}
.aide-contact-lien a{
  display:inline-block;padding:9px 15px;
  background:var(--carte-2);border:1px solid var(--or-fonce);border-radius:10px;
  color:var(--or-fonce);font-weight:700;font-size:.9rem;text-decoration:none;
}
.aide-contact-lien a:hover{background:var(--or-fonce);color:var(--carte)}

/* ==========================================================================
   SÉLECTEUR DE THÈME — dossier « 🎨 Thème du site », onglet Préférences
   (fa_bloc_theme(), inscription/fiche-affichage.php)        30/08/2026

   Écrit d'emblée en variables : les couleurs des trois thèmes sont dans
   assets/themes.css, chargé avant cette feuille.
   ========================================================================== */
.theme-choix{display:grid;grid-template-columns:1fr;gap:10px}

/* À partir de 560px (le point de rupture le plus utilisé du site), les
   vignettes passent côte à côte : on compare les thèmes d'un coup d'œil.
   En dessous, elles restent empilées et pleine largeur — sur un téléphone,
   plusieurs vignettes côte à côte tomberaient à ~90px et le nom du thème
   passerait sur deux lignes.
   auto-fit plutôt qu'un nombre fixe de colonnes : depuis les cinq thèmes
   du 13/09/2026, la grille en pose trois par ligne sur un écran étroit et
   cinq sur un large, sans jamais descendre sous 150px par vignette. */
@media (min-width:560px){
  .theme-choix{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .theme-vignette{
    grid-template-columns:1fr;
    grid-template-areas:"apercu" "nom" "note" "actif";
    justify-items:start;
    gap:7px 0;
  }
  .tv-apercu i{width:100%;height:34px}
  .tv-apercu{width:100%}
}

.theme-vignette{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"apercu nom" "apercu note" "apercu actif";
  gap:2px 14px;
  align-items:center;
  width:100%;
  padding:12px 14px;
  background:var(--carte-2);
  border:1px solid var(--trait);
  border-radius:12px;
  color:var(--txt);
  font-family:inherit;
  text-align:left;
  cursor:pointer;
}
/* 48px : seuil d'une cible tactile confortable. Le site s'installe en PWA sur
   téléphone, ces vignettes se touchent au pouce. */
.theme-vignette{min-height:48px}
.theme-vignette:hover{border-color:var(--accent)}

@media (max-width:560px){
  .tv-apercu i{width:11px;height:34px}
  .theme-vignette{padding:11px 12px}
}
.theme-vignette.est-actif{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}

/* Les cinq pastilles de couleur : fond, carte, trait, texte, accent. */
.tv-apercu{grid-area:apercu;display:flex;border-radius:7px;overflow:hidden;border:1px solid var(--trait)}
.tv-apercu i{display:block;width:13px;height:42px}

.tv-nom{grid-area:nom;font-weight:600;font-size:14.5px}
.tv-note{grid-area:note;font-size:12.5px;color:var(--txt-2)}
.tv-actif{grid-area:actif;font-size:11.5px;color:var(--accent);font-weight:600}

/* ==========================================================================
   ENTÊTE MOBILE D'UNE SEULE LIGNE + BANDEAU D'ONGLETS DU BAS (31/08/2026)

   Trois blocs de HTML nouveaux, tous MASQUÉS PAR DÉFAUT ici et rallumés
   dans le @media (max-width:900px) en fin de section :

     .entete-moi   photo du membre + pastille 👀   (noyau/entete.php)
     .entete-cpt   compteurs 🗳️ 🎉 💸              (noyau/entete.php)
     .barre-bas    les 5 onglets du bas            (noyau/barre-bas.php)

   Écrit à la FIN du fichier à dessein : le bloc ≤900px ci-dessous doit
   l'emporter, à spécificité égale, sur celui de la ligne 1636 et sur les
   deux blocs ≤560px de l'en-tête compacte (5390 et 5419), qui restent en
   place et continuent de servir les visiteurs non connectés.

   ⚠️ Les trois thèmes (assets/themes.css) : --accent vaut #8a6d12 — du DORÉ
   — en thème clair. La pilule d'alerte 🗳️ prend donc la famille « rouge »
   et non --accent, sans quoi elle deviendrait indiscernable des deux
   compteurs dorés qui la suivent. Même prudence pour --sur-or (#1a1408 en
   sombre et en clair, pas du noir pur).
   ========================================================================== */
/* La hauteur du bandeau du bas, ecrite UNE fois : les deux boutons
   flottants (.pub-flottant et .fil-scroll-haut) s'en servent pour se poser
   AU-DESSUS de lui. Sans ca, poses a bottom:14px, ils se retrouvaient
   assis dessus — ils sont en position:fixed et z-index 1150/1200, donc ils
   recouvraient trois de ses cinq onglets. Corrige le 31/08/2026.
   env() compris : sur les telephones a barre gestuelle, le bandeau est
   d'autant plus haut, et les boutons doivent monter d'autant. */
:root{--barre-bas-h:calc(54px + env(safe-area-inset-bottom, 0px))}

.entete-cpt{display:none}
.barre-bas{display:none}

/* ---- Pastille d'identité : la photo, et le 👀 posé dessus --------------
   La pastille est en absolu DANS .entete-moi (et non un frère en flex) :
   posée dans le flux, elle élargissait la ligne de ~34px, ce que l'écran
   n'a pas à donner. Son liseré reprend --carte, la couleur du fond de
   l'en-tête, pour se découper proprement sur l'anneau doré que .kali-logo
   pose déjà (box-shadow:0 0 0 2px var(--carte),0 0 0 4px var(--or)). */
.entete-vues{
  position:absolute;right:-7px;bottom:-5px;
  display:inline-flex;align-items:center;gap:2px;
  padding:2px 5px;border-radius:999px;
  font-family:inherit;font-size:.6rem;font-weight:800;line-height:1.1;
  /* --sur-or et non #1a1a1a : la valeur change d'un thème à l'autre. */
  background:var(--or);color:var(--sur-or);
  border:2px solid var(--carte);
  cursor:pointer;
}
.entete-vues b{font-size:.64rem;font-weight:800}
.entete-vues:hover{background:var(--or-fonce)}
/* A zero, la pastille disparait : elle annonce des visites NOUVELLES, pas un
   total (voir noyau/entete.php et qvEcrireCompteur() dans kalipay.js). La
   regle est necessaire — le display:inline-flex ci-dessus l'emporterait
   sinon sur l'attribut hidden. */
.entete-vues[hidden]{display:none}

/* ---- Le point vert « je suis libre », au coin HAUT-droit de la photo ----
   Pendant de la pastille 👀 (coin bas-droit) : l'etat en haut, le chiffre en
   bas. L'emoji 🟢 EST le point — inutile de dessiner un rond derriere lui ;
   le liseré --carte ne sert qu'a le detacher de l'anneau doré de la photo,
   exactement comme pour la pastille 👀.
   Il n'apparait que si une dispo est active : hidden le reste du temps
   (pose par noyau/entete.php, bascule par fdAppliquerEtat() dans
   kalipay.js). D'ou la regle [hidden], sans quoi le display:inline-flex
   l'emporterait sur l'attribut. */
.entete-dispo{
  position:absolute;right:-6px;top:-5px;
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;padding:0;
  border-radius:50%;background:var(--carte);border:2px solid var(--carte);
  font-family:inherit;font-size:.78rem;line-height:1;cursor:pointer;
}
.entete-dispo[hidden]{display:none}

/* ---- Compteurs de l'en-tête -------------------------------------------
   Les chiffres de la rangée de pilules de « La communauté » (.compteurs),
   qui disparaît sous 900px. Même grammaire visuelle que .nav-lien : fond
   en relief, bordure discrète, chiffre doré. */
.entete-cpt{align-items:center;gap:5px;margin-left:auto;flex:none}
.entete-cpt-item{
  display:inline-flex;align-items:center;gap:3px;
  padding:4px 9px;border-radius:999px;
  font-family:inherit;font-size:.78rem;font-weight:600;line-height:1;
  color:var(--txt-1);text-decoration:none;cursor:pointer;
  background:var(--fond-3);border:1px solid var(--trait);
  transition:border-color .15s;
}

/* L'icone plus grande que le chiffre (31/08/2026) : a la taille du texte
   elle se lisait mal, alors que c'est ELLE qui dit de quoi on parle — le
   chiffre ne se comprend qu'apres. Meme rapport que dans le bandeau du bas,
   ou l'icone est seule. */
.entete-cpt-item > span{font-size:1.05rem;line-height:1}
.entete-cpt-item b{color:var(--or-txt);font-size:.8rem;font-weight:800}
.entete-cpt-item:hover{border-color:var(--or)}
/* 🗳️ « Attente communauté » : famille ROUGE et non --accent (voir l'avis en
   tête de section). Elle n'existe dans le HTML que s'il y a un vote en
   cours ; cvEcrireCompteur() (kalipay.js) la repasse en hidden dès que le
   compteur retombe à zéro — d'où cette règle, sans quoi le display:inline-
   flex ci-dessus l'emporterait sur l'attribut. */
.entete-cpt-item--vote{background:var(--rouge-voile);border-color:var(--rouge)}
.entete-cpt-item--vote b{color:var(--rouge-txt)}
.entete-cpt-item[hidden]{display:none}

/* ---- Portes fermees visibles, en cadenas (27/09/2026) ------------------
   ✈️ Voyages, 💸 Bons plans, 🥂 Sorties club : un visiteur (ou un membre
   sans acces 'profil') les voit quand meme, avec un cadenas a la place du
   chiffre - meme principe que .nav-lien--ferme dans .nav-haut. Le lien
   garde sa vraie destination, c'est le routeur qui redirige vers
   Rejoindre/la fiche au clic. */
.entete-cpt-item--ferme{opacity:.62;border-style:dashed}
.entete-cpt-item--ferme:hover{opacity:1;border-style:solid;border-color:var(--or)}
.entete-cpt-cadenas{font-size:.72rem;line-height:1}

/* ---- Bandeau d'onglets du bas -----------------------------------------
   Pas de position:fixed : sur mobile .kali-page est déjà une colonne flex
   de la hauteur de l'écran dont seule .col-centre défile (bloc ≤900px,
   ligne 1636) — un enfant flex:none posé en fin de colonne (voir
   noyau/layout.php) tient au bas de l'écran tout seul, sans rien recouvrir
   et sans padding-bottom à compenser.
   L'ombre portée montante est là POUR LE THÈME CLAIR : --carte (#ffffff) y
   est posé sur --fond (#f4f6f9), le liseré doré seul ne détachait pas la
   barre du contenu. Elle reste discrète dans les deux thèmes sombres. */
.barre-bas{
  flex:none;
  /* Repli seul : le bloc ≤900px plus bas (le SEUL ou ce bandeau s'affiche)
     repasse en position:fixed depuis le 06/09/2026 — le sticky ne tenait
     que si la page gardait la colonne flex plein ecran de .kali-page, et
     recouvrait le contenu des qu'une page rendait l'ascenseur au <body>.
     z-index sous les deux boutons flottants (1150 et 1200), qui sont
     remontes au-dessus de lui par le bloc ≤900px plus bas. */
  position:sticky;bottom:0;z-index:900;
  background:var(--carte);
  border-top:1px solid var(--or);
  box-shadow:0 -2px 12px rgba(0,0,0,.08);
  padding:5px 4px;
  /* Encoche et barre gestuelle des téléphones récents : sans ça, le dernier
     rang d'icônes passe sous la barre du système. */
  padding-bottom:calc(5px + env(safe-area-inset-bottom, 0px));
}
.bb-onglet{
  flex:1;position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:8px 0;border-radius:10px;
  background:none;border:0;color:var(--txt-1);
  font-family:inherit;text-decoration:none;cursor:pointer;
}
.bb-icone{font-size:1.35rem;line-height:1}
/* Piège des survols aplatis (refonte des thèmes, 30/08/2026) : l'onglet
   actif prend --fond-3, le survol doit donc prendre --fond-2 — sur la même
   nuance, l'effet de survol disparaîtrait purement et simplement. */
.bb-onglet:hover{background:var(--fond-2)}
/* Surtout PAS .nav-lien--actif (aplat doré plein + --sur-or) : un emoji ne
   prend pas la couleur du texte, on aurait une icône posée sur un aplat
   doré. Un fond en relief et un soulignement doré disent la même chose sans
   toucher à l'icône. */
.bb-onglet--actif{background:var(--fond-3);box-shadow:inset 0 -3px 0 var(--or)}
/* La pastille des non-lus se recale près de l'icône : la règle générale
   (bloc ≤560px) la colle au coin haut-droit, ce qui la larguerait à l'autre
   bout d'un onglet large d'un cinquième d'écran. */
.barre-bas .nav-pastille{
  position:absolute;top:3px;left:50%;right:auto;
  margin-left:5px;margin-right:0;
}

/* 27/09/2026 : en-tête UNIFIÉE, visiteur compris (avant : conditionnée à
   body.kp-connecte). Un visiteur garde son propre bandeau du bas vide
   (noyau/barre-bas.php ne rend rien pour lui, inchangé), mais voit
   désormais la même barre du haut qu'un membre : les pastilles auxquelles
   il a droit (🎉 seule, en général) + ⋮/☰, qui ouvre le même menu (déjà
   pourvu d'une tuile « 🪪 Rejoindre » pour lui). Ce qui reste scopé
   .kp-connecte ci-dessous concerne UNIQUEMENT le bandeau du bas et ce qui
   en dépend (padding du <body>, décalage des boutons flottants) : un
   visiteur n'a pas ce bandeau, rien à réserver pour lui. */
@media (max-width:900px){
  /* Le rembourrage bas de <body> ne vaut plus 40px (bande de fond inutile)
     mais EXACTEMENT la hauteur du bandeau — corrige le 06/09/2026.

     Depuis cette date le bandeau est en position:fixed (voir plus bas) : il
     a quitte le flux, donc plus rien ne lui reserve sa place tout seul.
     C'est ce padding qui le fait. <body> est en height:100dvh et
     box-sizing:border-box : sa boite de contenu vaut donc
     100dvh - var(--barre-bas-h), et .kali-page{height:100%} s'arrete pile
     au-dessus du bandeau. Aucun contenu ne peut plus passer dessous, quel
     que soit l'etat du gabarit de la page (colonne flex plein ecran, ou
     ascenseur rendu au <body> par une page qui la casserait). */
  .kp-connecte{padding-bottom:var(--barre-bas-h)}

  /* En-tête sur une seule ligne, pour tout le mobile et plus seulement
     ≤560px : marque à gauche, compteurs à droite. */
  /* 27/09/2026 : ecart visible avant le fil (composer "Quoi de neuf")
     malgre header.card:has(~ #colonnes .fil-composer-carte){margin-bottom:0}
     (l. 2183) — force ici, sans dependre du support de :has() ni de la
     presence du composer, pour TOUTE page mobile. */
  /* 27/09/2026 : box-shadow:none — .card{box-shadow:0 4px 20px} (base,
     l.39) dessine une ombre portee qui deborde ~20px SOUS l'en-tete meme a
     margin/padding 0, visible comme un bandeau sombre avant la carte
     suivante (signale plusieurs fois malgre les reductions de padding
     precedentes). En-tete plein-largeur et colle au contenu sur mobile :
     l'ombre n'a plus de sens ici, seule la carte suivante (fil-composer,
     photo, etc.) garde la sienne. */
  header.card{display:flex;align-items:center;gap:8px;padding:6px 10px 2px;margin-bottom:0;box-shadow:none}
  .entete{flex:1 1 auto;min-width:0;padding:0;text-align:left}
  .entete-ligne{justify-content:flex-start;gap:8px;flex-wrap:nowrap}

  /* L'accroche, le filet doré et le logo K partent (27/09/2026 : le logo
     est retiré de l'en-tête mobile) ; l'accueil reste à un pouce, dans le
     bandeau du bas (membre) ou dans le menu ⋮ (visiteur). */
  .kali-sous,
  .filet,
  .entete-lien{display:none}

  /* La rangée d'icônes de l'en-tête est descendue en bas de l'écran (ou
     reprise en tuiles dans le menu ⋮ pour un visiteur). Elle reste dans le
     DOM (ses pastilles et ses déclencheurs servent de jumeaux à ceux du
     bandeau) mais ne s'affiche plus. #menu-overlay a dû en sortir pour
     cette raison — voir noyau/entete.php. */
  .nav-haut{display:none}

  /* La rangée de pilules de « La communauté » : ses quatre chiffres sont
     remontés dans l'en-tête (👥 est devenu l'onglet 🔍 du bandeau du bas,
     👀 la pastille de la photo). Le reste de la carte ne bouge pas.
     27/09/2026 : .kp-connecte RETABLI ici — sans lui la regle s'appliquait
     aussi au visiteur (dont l'en-tete n'a pas ces quatre chiffres) et a
     vues/statistiques.php qui reutilise .compteurs, laissant une carte
     "La communaute" vide (titre + contenu a 0) et un gros vide au-dessus
     du bouton "Se connecter". */
  .kp-connecte .compteurs{display:none}

  /* Le bouton de dispos quitte la ligne : son point vert est passe sur la
     photo (.entete-dispo). Il reste entier sur PC. */
  .entete-libre{display:none}

  /* Les deux (ou trois) pilules se partagent a parts egales toute la place
     laissee entre la photo et le ⋮ — decision du 31/08/2026. Des cibles
     larges valent mieux qu'un vide au milieu de la ligne. flex:1 1 0 et non
     flex:1 : sans base a zero, la pilule 🗳️, plus etroite, resterait plus
     petite que les deux autres. */
  .entete-cpt{display:flex;flex:1 1 auto}
  .entete-cpt-item{flex:1 1 0;justify-content:center}

  /* position:fixed depuis le 06/09/2026 (au lieu du sticky en fin de colonne
     flex). Le sticky supposait que TOUTE page garde la colonne flex plein
     ecran de .kali-page ; des qu'une page rendait l'ascenseur au <body>, le
     bandeau se posait par-dessus le contenu — le bas d'une fiche, la rangee
     🙂/🔗/📎 d'une conversation. En fixed + padding-bottom sur <body>
     (ci-dessus), le resultat ne depend plus du gabarit de la page.

     left/right:0 remplacent l'astuce bord a bord (width:100vw + marges
     negatives) : un element fixed se cale deja sur la FENETRE, pas sur son
     parent.

     min-height : --barre-bas-h (54px + encoche) est ce que <body> reserve.
     Sans plancher, le bandeau mesurait ~49px de haut et laissait une bande
     de fond de 5px entre le contenu et lui. Reste scope .kp-connecte : un
     visiteur n'a pas ce bandeau (noyau/barre-bas.php). */
  .kp-connecte .barre-bas{
    display:flex;
    align-items:center;
    position:fixed;
    left:0;right:0;bottom:0;
    width:auto;
    margin:0;
    min-height:var(--barre-bas-h);
  }

  /* Le ⋮ a rejoint .entete-ligne : il garde l'allure d'un onglet mais ne
     doit plus s'étirer avec la ligne. */
  .entete-ligne .nav-lien--menu{flex:none;padding:6px 8px;font-size:1.05rem}

  /* Les deux boutons flottants montent d'une hauteur de bandeau. Ils sont
     en position:fixed par rapport a la FENETRE : la colonne flex qui tient
     le bandeau ne les repousse pas toute seule, il faut le leur dire.
     Ecrit ici et pas dans leur propre section (l. 4330 et 4426) : c'est le
     bandeau qui impose ce decalage, et il disparait avec lui — un visiteur
     non connecte n'en a pas, ses boutons restent a 14px du bas. */
  .kp-connecte .pub-flottant,
  .kp-connecte .fil-scroll-haut{bottom:calc(14px + var(--barre-bas-h))}
}

/* Sous 380px, les trois pilules de compteurs et les quatre boutons de
   l'en-tête ne tiennent plus ensemble : le libellé « Mes dispos » du bouton
   🟢 est déjà masqué par ailleurs, on resserre le reste plutôt que de
   laisser la ligne se dédoubler. */
@media (max-width:380px){
  .entete-ligne{gap:5px}
  .entete-cpt{gap:3px}
  .entete-cpt-item{padding:4px 7px;font-size:.72rem}
  .entete-cpt-item > span{font-size:.98rem}
  .kp-connecte .bb-icone{font-size:1.25rem}
}

/* ==========================================================================
   PROTECTION DES PHOTOS ET DES VIDÉOS — niveau 1 (02/09/2026)

   Le but n'est pas l'inviolabilité : une capture d'écran restera toujours
   possible, et le filigrane posé à l'envoi (ph_filigraner(),
   inscription/photos.php) est là pour ça. Le but est de fermer les gestes
   ORDINAIRES : le clic droit « Enregistrer l'image sous… », le glisser de
   la photo vers le bureau, et l'appui long « Enregistrer l'image » d'iOS.

   Le blocage du clic droit lui-même est en JavaScript (dernier bloc de
   assets/kalipay.js) : le CSS ne sait pas le faire.

   ATTENTION — la levée d'exception juste en dessous n'est pas décorative :
   sans elle, les trois réorganisations par glisser-déposer du site
   (.photo-case[data-fp-id], .photo-case[data-at-photo],
   .ga-dossier[data-ga-type="perso"]) cesseraient de fonctionner dans
   Chrome et Safari, car le glissement y démarre sur l'IMAGE, pas sur la
   case qui la contient.
   ========================================================================== */
img, video {
  -webkit-user-drag: none;
     -moz-user-drag: none;
          user-drag: none;
  -webkit-touch-callout: none;   /* iOS : plus de menu à l'appui long */
  -webkit-user-select: none;
          user-select: none;
}

/* Exception : à l'intérieur d'un élément que le site rend déplaçable,
   l'image doit redevenir saisissable, sinon le réordonnancement casse. */
[draggable="true"] img,
[draggable="true"] video {
  -webkit-user-drag: auto;
     -moz-user-drag: auto;
          user-drag: auto;
}

/* Le lien qui entoure une photo (.ph) : pas de menu d'appui long non plus,
   il propose « Enregistrer la cible du lien » sur iOS comme sur Android. */
.ph, .fil-carte-photo, .carte-membre-photo, .ph-case {
  -webkit-touch-callout: none;
}

/* Visionneuse plein écran : l'image ne reçoit plus le pointeur, le clic
   droit tombe donc sur l'enveloppe, qui n'offre aucun menu d'image.
   Sans effet sur le fonctionnement : l'écouteur de fermeture et celui du
   balayage sont posés sur .kp-visionneuse, pas sur l'image. */
.kp-visionneuse img { pointer-events: none; }

/* Un <a class="ph"> n'a plus de href depuis le 02/09/2026 (voir
   ph_url_grande(), inscription/photos.php) : le navigateur ne lui donne donc
   plus le curseur d'un lien. On le repose ici, pour les quelques emplacements
   qui ne portent ni .ph--grande ni .ph--vignette (avatar de la pop-up
   « Attente communauté », photo d'une publication). */
a.ph[data-grande]{cursor:zoom-in}

/* ==========================================================================
   LES STATISTIQUES — vues/statistiques.php (04/09/2026)

   Camemberts et histogrammes en SVG/CSS purs : aucune bibliothèque, aucun
   JavaScript. Les quatre teintes viennent des variables du thème, elles
   suivent donc le clair et le sombre sans règle en double.

   Posé en FIN de fichier, comme tous les ajouts depuis le 27/08/2026 : le
   bloc « PETITS ÉCRANS » plus haut est suivi de règles de même poids, une
   règle mobile écrite là-dedans serait perdue.
   ========================================================================== */
/* Cycle par défaut : repli quand aucune teinte n'est passée à
   kps_camembert(). Les deux camemberts de la page nomment les leurs. */
.stx-t1{fill:var(--or);    background:var(--or)}
.stx-t2{fill:var(--accent);background:var(--accent)}
.stx-t3{fill:var(--vert);  background:var(--vert)}
.stx-t4{fill:var(--bleu);  background:var(--bleu)}

/* Teintes PARLANTES du camembert des genres (04/09/2026) : vert pour les
   couples, bleu pour les hommes, rose pour les femmes, violet pour trans &
   travestis. Attachées au libellé et non au rang de la part — voir le
   troisième paramètre de kps_camembert(), noyau/statistiques.php — sinon la
   couleur d'un genre changerait dès qu'un autre tombe à zéro. */
/* Camembert des appareils : doré / bleu / violet. Trois familles bien
   séparées — le cycle par défaut plaçait deux tons chauds voisins sur le
   téléphone et l'ordinateur, qu'on ne distinguait pas sur le fond bordeaux
   (04/09/2026). Attachées au libellé, comme les genres. */
.stx-tel     {fill:var(--or);    background:var(--or)}
.stx-pc      {fill:var(--bleu);  background:var(--bleu)}
.stx-tablette{fill:var(--violet);background:var(--violet)}

.stx-couple{fill:var(--vert);  background:var(--vert)}
.stx-homme {fill:var(--bleu);  background:var(--bleu)}
.stx-femme {fill:var(--rose);  background:var(--rose)}
.stx-trans {fill:var(--violet);background:var(--violet)}

.stx-tarte-bloc{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center}
.stx-tarte{width:170px;height:170px;flex:none}
/* Un filet sombre entre les parts : sans lui, deux teintes voisines se
   touchent et la frontière disparaît sur les petits écrans. */
.stx-tarte path,
.stx-tarte circle{stroke:var(--carte);stroke-width:2}

.stx-legende{list-style:none;margin:0;padding:0;min-width:170px}
.stx-legende li{
  display:flex;align-items:center;gap:8px;
  font-size:.86rem;color:var(--txt-1);padding:4px 0;
}
.stx-legende b{color:var(--txt);min-width:44px;text-align:right}
.stx-legende small{color:var(--txt-2);font-size:.76rem}
.stx-puce{width:11px;height:11px;border-radius:3px;flex:none}

/* Navigateur ou application : UNE seule barre partagée (05/09/2026).
   Bleu à gauche = navigateurs mobiles, rose à droite = applications
   installées. Le pourcentage est écrit dans la barre, et repris dans la
   légende — une part trop étroite masque son texte par débordement, jamais
   la légende. */
.stx-duo{margin:10px 0 0}
.stx-duo-piste{
  display:flex;width:100%;height:26px;border-radius:13px;overflow:hidden;
  background:var(--fond-2);
}
.stx-duo-part{
  display:flex;align-items:center;justify-content:center;
  height:100%;min-width:0;overflow:hidden;
  transition:width .3s ease;
}
.stx-duo-part b{
  font-size:.76rem;font-weight:700;color:#fff;white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.stx-duo-legende{
  display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;
  margin-top:9px;min-width:0;
}
.stx-web{fill:var(--bleu);background:var(--bleu)}
.stx-app{fill:var(--rose);background:var(--rose)}

.stx-barres{list-style:none;margin:8px 0 0;padding:0}
.stx-barres li{display:flex;align-items:center;gap:9px;padding:3px 0}
.stx-b-lib{
  flex:none;width:46px;font-size:.74rem;color:var(--txt-2);
  letter-spacing:.5px;
}
/* Libellés en clair (« Navigateur mobile », « Application installée ») au
   lieu d'une date : la colonne de gauche s'élargit. */
.stx-barres--large .stx-b-lib{width:118px;font-size:.78rem;letter-spacing:0}
.stx-b-piste{flex:1;height:9px;border-radius:5px;background:var(--fond-2);overflow:hidden}
.stx-b-part{display:block;height:100%;border-radius:5px;background:var(--or)}
.stx-b-val{flex:none;width:42px;text-align:right;font-size:.8rem;color:var(--txt)}

.stx-titre{
  margin:18px 0 2px;font-size:.78rem;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--txt-2);font-weight:600;
}
/* Poids suffisant pour passer devant `.section p` (déclarée plus haut, même
   spécificité mais plus tôt dans le fichier — ici l'ordre suffit). */
.section p.stx-note,
.stx-note{font-size:.78rem;color:var(--txt-2);line-height:1.6;margin:10px 0 0}
/* Statistiques membres : carré « Demandes en attente » dépliant (12/10/2026) */
.compteur--deplie summary{list-style:none;cursor:pointer}
.compteur--deplie summary::-webkit-details-marker{display:none}
.compteur--deplie:hover{border-color:var(--or)}
.compteur--deplie[open]{grid-column:1/-1}
.stx-attente{margin:8px 0 2px;border-top:1px solid var(--trait);text-align:left}
.stx-attente ul{list-style:none;margin:0;padding:0}
.stx-att-entete,.stx-attente li{display:grid;grid-template-columns:minmax(0,1.4fr) 1fr .8fr 1fr;gap:10px;align-items:center;padding:7px 2px;white-space:nowrap}
.stx-att-entete{font-size:.62rem;letter-spacing:1px;text-transform:uppercase;color:var(--txt-2);border-bottom:1px solid var(--trait)}
.stx-attente li{border-bottom:1px dashed var(--trait)}
.stx-attente li:last-child{border-bottom:0}
.stx-att-ps{font-weight:600;font-size:.88rem;color:var(--txt);overflow:hidden;text-overflow:ellipsis}
.stx-att-dt{font-size:.75rem;color:var(--txt-2)}
.stx-att-et{font-size:.82rem;color:var(--or);text-align:center}
.stx-att-sp{font-size:.78rem;color:var(--txt);text-align:right}
.stx-att-sp--orange{color:var(--orange);font-weight:600}
.stx-att-sp--rouge{color:var(--rouge);font-weight:700}
.stx-att-entete span:nth-child(3){text-align:center}
.stx-att-entete span:nth-child(4){text-align:right}
.stx-pied{text-align:center;margin-top:20px}

@media (max-width:900px){
  .stx-tarte{width:150px;height:150px}
  .stx-tarte-bloc{gap:14px}
  .stx-legende{min-width:0;flex:1}

  /* ---- Les carrés de vues/statistiques.php sur mobile ------------------
     DEUX règles écrites pour la carte « La communauté » de la colonne de
     gauche (noyau/sidebar.php) frappaient au passage cette page, qui
     réutilise .compteurs / .compteur :

       1. `.kp-connecte .compteurs{display:none}` (bloc « bandeau du bas »
          plus haut) : les quatre chiffres de la colonne de gauche sont
          remontés dans l'en-tête sur mobile, la rangée d'origine n'a donc
          plus lieu d'être — mais la règle ne distingue pas les grilles,
          et les compteurs de la page des statistiques DISPARAISSAIENT
          purement et simplement pour tout membre connecté. C'est la cause
          du « je ne vois pas La communauté ni La vie du site » du
          04/09/2026 ;
       2. `.compteur small{display:none}` (bloc « PETITS ÉCRANS ») : chaque
          carré devient une pilule icône + chiffre, sans libellé.

     On rétablit ici, pour ces grilles-là seulement, la présentation du PC :
     chiffre au-dessus, libellé en dessous, deux colonnes. `.kp-connecte`
     est REPRIS dans le sélecteur du display — sans lui, `.compteurs--stat`
     (une classe) ne l'emporterait pas sur `.kp-connecte .compteurs` (deux).
     Les règles de la colonne de gauche, elles, ne bougent pas. */
  .kp-connecte .compteurs--stat,
  .compteurs--stat{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .compteurs--stat .compteur{
    display:block;text-align:center;
    padding:9px 7px;border-radius:11px;
  }
  .compteurs--stat .compteur-icone{display:none}
  .compteurs--stat .compteur b{font-size:1.5rem}
  .compteurs--stat .compteur small{display:block;font-size:.63rem;letter-spacing:.8px}
}

/* ==========================================================================
   VITRINE D'INVITATION — vues/invitation.php            (créée le 05/09/2026)

   La seule page publique qui parle d'une soirée : le carton d'invitation,
   l'affiche et le descriptif, pour quelqu'un qui n'a pas encore de compte.
   Voir noyau/invitation-externe.php.

   Le carton est posé sur une surface PAPIER (--papier) : c'est la même
   famille de variables que les cartes d'inscription d'une soirée, et le
   contraste avec le fond du gabarit fait tout le travail — un faire-part
   qu'on aurait glissé sur la page.
   ========================================================================== */

.inv-centre{text-align:center}

.inv-carton{
  background:var(--papier);color:var(--papier-txt);
  border:1px solid var(--papier-trait);border-radius:14px;
  padding:34px 28px;margin-bottom:20px;text-align:center;position:relative;
  box-shadow:0 10px 34px var(--ombre-couleur);
}
/* Le liseré doré intérieur, à 10 px des bords — le trait d'un carton gravé. */
.inv-carton::before{
  content:'';position:absolute;top:10px;right:10px;bottom:10px;left:10px;
  border:1px solid var(--or);border-radius:8px;pointer-events:none;
}
.inv-carton-sur{
  font-size:.7rem;letter-spacing:3px;text-transform:uppercase;
  color:var(--or-papier);font-weight:800;
}
.inv-carton-titre{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.9rem;color:var(--papier-txt-1);margin:14px 0 8px;line-height:1.25;
}
.inv-carton-quand{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.05rem;color:var(--or-papier);margin-bottom:4px;
}
.inv-carton-par{font-size:.85rem;color:var(--papier-txt-2)}
.inv-filet{width:60px;height:2px;background:var(--or);margin:18px auto}
.inv-carton-cadenas{font-size:.76rem;color:var(--papier-txt-2);line-height:1.6}

/* ---- Le flyer ----------------------------------------------------------- */
.inv-affiche-corps{padding:14px;text-align:center}
.inv-affiche{
  display:block;max-width:100%;height:auto;margin:0 auto;
  border-radius:9px;border:1px solid var(--trait);
}

/* ---- Le descriptif de l'organisateur ------------------------------------ */
.inv-description{font-size:.95rem;line-height:1.8;color:var(--txt-1)}
.inv-description p{margin:0 0 12px}
.inv-description p:last-child{margin-bottom:0}

/* ---- Les trois arguments du site ---------------------------------------- */
.inv-trois{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.inv-trois > div{
  background:var(--fond-3);border-radius:10px;padding:14px 10px;
  text-align:center;font-size:.78rem;color:var(--txt-1);line-height:1.5;
}
.inv-trois-ico{font-size:1.5rem;display:block;margin-bottom:6px}

@media(max-width:640px){
  .inv-carton{padding:26px 18px}
  .inv-carton-titre{font-size:1.55rem}
  .inv-trois{grid-template-columns:1fr}
  .inv-trois > div{display:flex;align-items:center;gap:10px;text-align:left}
  .inv-trois-ico{margin-bottom:0}
}

/* ==========================================================================
   LE RACCOURCI « LIEU DÉJÀ RÉFÉRENCÉ » — vues/proposer-bon-plan.php
   (06/09/2026). Les vignettes des lieux les plus cités, la liste complète
   et le bandeau de rappel du lieu choisi.
   ========================================================================== */
.bp-lieux{
  border:1px solid var(--trait-2);border-radius:12px;
  background:var(--carte-2);padding:14px 14px 4px;margin-bottom:22px;
}
.bp-lieux-titre{font-weight:700;font-size:.92rem;margin-bottom:10px;color:var(--txt-2)}
.bp-lieux-vignettes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.bp-lieu-vignette{
  display:flex;align-items:center;gap:8px;max-width:100%;
  padding:6px 12px 6px 6px;border:1px solid var(--trait);border-radius:999px;
  background:var(--carte);color:inherit;font:inherit;cursor:pointer;
}
.bp-lieu-vignette:hover{border-color:var(--accent)}
.bp-lieu-vignette img,
.bp-lieu-initiale{
  width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--carte-2);font-weight:700;font-size:.85rem;
}
.bp-lieu-nom{font-size:.88rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-lieu-choisi{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;
  font-size:.85rem;color:var(--txt-2);padding:8px 0 12px;
}
/* Le lieu référencé sur la page d'un bon plan : son logo prend la place de
   l'épingle dans la ligne « Où », sa présentation se glisse dessous. */
.bp-info-logo{width:22px;height:22px;border-radius:6px;object-fit:cover;display:block}
.bp-info-lieu-desc{display:block;font-size:.82rem;color:var(--txt-2);margin-top:3px}
/* Le filtre par pays de la liste des bons plans (06/09/2026). */
.bp-filtre-pays{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px}
.bp-filtre-pays a{
  padding:6px 13px;border:1px solid var(--trait);border-radius:999px;
  font-size:.85rem;font-weight:600;text-decoration:none;color:var(--txt-2);background:var(--carte)
}
.bp-filtre-pays a:hover{border-color:var(--accent)}
.bp-filtre-pays a.actif{border-color:var(--accent);color:var(--accent);background:var(--carte-2)}

/* ==========================================================================
   « PROPOSER UN BON PLAN » EN CINQ SECTIONS — organisation E2 (06/09/2026)

   Chaque section porte sa couleur dans --bpf-c / --bpf-voile, posées en
   attribut style par la vue : cette feuille ne connaît que les variables,
   changer une couleur ne se fait qu'à un seul endroit.
   ========================================================================== */
.bpf-barre{
  position:sticky;top:0;z-index:5;display:flex;gap:6px;padding:9px;margin-bottom:14px;
  background:var(--carte-3);border:1px solid var(--trait);border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.28)
}
.bpf-etape{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;
  text-decoration:none;color:var(--txt-2);font-size:.72rem;font-weight:600;padding:2px 0
}
.bpf-bulle{
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.76rem;font-weight:800;background:var(--fond-2);border:1px solid var(--trait);
  color:var(--txt-2);transition:background .15s,border-color .15s,color .15s
}
.bpf-etiquette{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.bpf-etape.fait .bpf-bulle{background:var(--vert);border-color:var(--vert);color:var(--sur-vert)}
.bpf-etape.actif{color:var(--txt)}
.bpf-etape.actif .bpf-bulle{background:var(--accent);border-color:var(--accent);color:var(--sur-couleur)}
/* Sur téléphone, seules les bulles tiennent : les intitulés partiraient en
   trois lignes et pousseraient tout le formulaire vers le bas. */
@media (max-width:520px){ .bpf-etiquette{display:none} }

.bpf-sect{
  border:1px solid var(--trait-2);border-left:4px solid var(--bpf-c,var(--accent));
  border-radius:12px;background:var(--carte);margin-bottom:9px;overflow:hidden
}
.bpf-sect[open]{background:var(--carte-2)}
.bpf-tete{
  display:flex;align-items:center;gap:10px;padding:13px 15px;cursor:pointer;list-style:none;
  font-weight:700;font-size:.95rem
}
.bpf-tete::-webkit-details-marker{display:none}
.bpf-tete:hover{background:var(--fond-3)}
.bpf-nom small{font-weight:400;color:var(--txt-2);font-size:.78rem}
.bpf-ico{
  width:30px;height:30px;flex:none;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-size:.95rem;background:var(--bpf-voile,var(--accent-voile))
}
.bpf-resume{
  margin-left:auto;font-weight:400;font-size:.78rem;color:var(--txt-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:45%
}
.bpf-fleche{color:var(--txt-3);font-size:.85rem;margin-left:8px;transition:transform .2s}
.bpf-sect[open] .bpf-fleche{transform:rotate(180deg);margin-left:auto}
.bpf-sect[open] .bpf-resume{display:none}
.bpf-corps{padding:2px 15px 16px;border-top:1px solid var(--trait-2)}
.bpf-corps > .champ:first-child,.bpf-corps > .rangee:first-child{margin-top:14px}
.bpf-aide{font-size:.82rem;color:var(--txt-2);margin:14px 0 10px}
.bpf-form > .btn{margin-top:16px}
/* Le raccourci « lieu référencé » vit dans une section colorée : son cadre
   ferait un cadre dans un cadre. */
.bpf-corps .bp-lieux{background:var(--carte-3);margin-top:14px}
/* Le bouton « Suivant » de chaque section : gris tant qu'il manque quelque
   chose, vert dès que la section est complète — le vert reprend celui des
   bulles de la barre, c'est le même message dit deux fois. */
.bpf-pied{display:flex;justify-content:flex-end;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--trait-2)}
.bpf-suivant{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;
  border:1px solid var(--trait);background:var(--carte-3);color:var(--txt-1);
  font:inherit;font-size:.88rem;font-weight:700;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s
}
.bpf-suivant:hover{border-color:var(--trait-4);background:var(--fond-3)}
.bpf-suivant.pret{background:var(--vert-sombre);border-color:var(--vert);color:var(--vert-pale)}
.bpf-suivant.pret:hover{background:var(--vert-tres-fonce)}
@media (max-width:520px){ .bpf-pied{justify-content:stretch} .bpf-suivant{width:100%;justify-content:center} }

/* ==========================================================================
   FICHE D'UN BON PLAN — MISE EN PAGE « F1a » (06/09/2026)

   Les blocs, un par un, dans une carte identique : même fond, même bordure,
   même filet sous le titre. UNE seule couleur — celle du site. Ce qui
   distingue un bloc, c'est son pictogramme, pas une teinte de plus.

   Deux exceptions assumées :
     · les compteurs de présences, qui reprennent les trois teintes DÉJÀ
       employées par les tarifs de la même page (.bp-tag-*) : bleu pour les
       hommes, rose pour les femmes, violet pour les couples. Trois nombres
       côte à côte se lisent bien mieux ainsi, et aucune couleur nouvelle
       n'entre dans la page ;
     · le survol et le focus, qui restent dorés comme partout ailleurs.
   ========================================================================== */

/* Le sommaire en bulles, collé en haut (choix du 06/09/2026, repris de la
   maquette « F1b ») : une pastille par section, chacune de la teinte que la
   page emploie déjà pour ce sujet. La couleur sert à VISER une section — les
   cartes, elles, restent monochromes.

   Les trois teintes d'une bulle arrivent en variables posées par la vue
   (--sc texte, --sf fond, --sb bordure) : cette feuille n'en connaît aucune,
   changer une couleur ne se fait qu'à un seul endroit. */
.bpf1-som{
  position:sticky;top:0;z-index:4;
  display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow-x:auto;
  padding:8px;margin:0 0 14px;
  background:var(--carte-3);border:1px solid var(--trait);border-radius:999px;
  box-shadow:0 6px 16px rgba(0,0,0,.28);
  -webkit-overflow-scrolling:touch;scrollbar-width:none
}
.bpf1-som::-webkit-scrollbar{display:none}
.bpf1-som a{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex:none;
  padding:6px 13px;border-radius:999px;text-decoration:none;
  font-size:.78rem;font-weight:700;
  color:var(--sc,var(--lien));background:var(--sf,var(--accent-voile));
  border:1px solid var(--sb,var(--accent));
  transition:filter .12s,transform .12s
}
.bpf1-som a:hover{filter:brightness(1.25);transform:translateY(-1px)}
.bpf1-som a:focus-visible{outline:2px solid var(--sb,var(--accent));outline-offset:2px}
/* La carte visée ne doit pas se glisser SOUS la barre collée : on lui laisse
   sa hauteur en marge de défilement. */
.bpf1-carte{scroll-margin-top:62px}

.bpf1-carte{
  border:1px solid var(--trait-2);border-radius:12px;background:var(--carte);
  padding:14px 15px;margin:0 0 12px;scroll-margin-top:12px
}
/* Le titre de chaque carte : même dessin partout, filet dessous. Les trois
   titres existants sont repris tels quels plutôt que réécrits — le crayon
   continue de renvoyer exactement le même HTML. */
.bpf1-carte .bp-infos-titre,
.bpf1-carte .bp-tarifs-titre,
.bpf1-carte .bp-page-description-titre,
.bpf1-carte .bpf1-tete{
  display:flex;align-items:center;gap:8px;justify-content:flex-start;text-align:left;
  font-family:'Playfair Display',Georgia,serif;font-size:.97rem;font-weight:700;
  color:var(--or-txt);margin:0 0 11px;padding-bottom:9px;
  border-bottom:1px solid var(--trait-2)
}
/* Les blocs perdent leur propre cadre : c'est la carte qui le porte
   désormais, sinon on verrait un cadre dans un cadre. */
.bpf1-carte .bp-infos{background:none;border:0;border-radius:0;padding:0;margin:0}
.bpf1-carte .bp-tarifs-grille{margin-bottom:0}
.bpf1-carte .bp-tarifs-vide{margin-bottom:0}
.bpf1-carte .bp-page-description{margin-bottom:0}
.bpf1-carte .bp-page-participants{background:none;border:0;padding:0;margin:0}
.bpf1-carte .bp-page-presences{padding:0 0 9px;border-bottom:1px solid var(--trait-2)}
.bpf1-carte .bp-page-participants-grille{padding:12px 0}
.bpf1-carte .bp-page-participants-actions{padding:0}
.bpf1-carte .bp-page-affiche-bloc{margin:0}

/* Les quatre compteurs, aux couleurs des tarifs de la même page (+ jaune
   pour trans, 07/09/2026, même teinte que .badge--trans). L'ordre du HTML
   est couple, homme, femme, trans (vues/bon-plan.php). */
.bpf1-carte .bp-page-participants-grille .bp-page-compteur:nth-child(1){border-top-color:var(--violet)}
.bpf1-carte .bp-page-participants-grille .bp-page-compteur:nth-child(2){border-top-color:var(--bleu)}
.bpf1-carte .bp-page-participants-grille .bp-page-compteur:nth-child(3){border-top-color:var(--rose)}
.bpf1-carte .bp-page-participants-grille .bp-page-compteur:nth-child(4){border-top-color:var(--jaune)}
.bpf1-carte .bp-page-participants-grille .bp-page-compteur:nth-child(1) span{color:var(--violet-txt)}
.bpf1-carte .bp-page-participants-grille .bp-page-compteur:nth-child(2) span{color:var(--bleu-txt)}
.bpf1-carte .bp-page-participants-grille .bp-page-compteur:nth-child(3) span{color:var(--rose-txt)}
.bpf1-carte .bp-page-participants-grille .bp-page-compteur:nth-child(4) span{color:var(--jaune-txt)}
/* Au survol, la teinte gagne le nombre lui-même — le doré générique de
   .bp-page-compteur:hover b ne dirait plus de quel genre il s'agit. */
.bpf1-carte .bp-page-compteur:nth-child(1):hover{border-color:var(--violet)}
.bpf1-carte .bp-page-compteur:nth-child(2):hover{border-color:var(--bleu)}
.bpf1-carte .bp-page-compteur:nth-child(3):hover{border-color:var(--rose)}
.bpf1-carte .bp-page-compteur:nth-child(4):hover{border-color:var(--jaune)}
.bpf1-carte .bp-page-compteur:nth-child(1):hover b{color:var(--violet-txt)}
.bpf1-carte .bp-page-compteur:nth-child(2):hover b{color:var(--bleu-txt)}
.bpf1-carte .bp-page-compteur:nth-child(3):hover b{color:var(--rose-txt)}
.bpf1-carte .bp-page-compteur:nth-child(4):hover b{color:var(--jaune-txt)}

/* ---- Téléphone --------------------------------------------------------- */
@media (max-width:560px){
  /* Les cinq bulles tiennent sur un téléphone courant grâce aux noms courts
     (« Infos », « Tarifs »…) ; au pire elles glissent du doigt. */
  .bpf1-som{gap:5px;padding:7px}
  .bpf1-som a{padding:6px 10px;font-size:.74rem;gap:4px}
  .bpf1-carte{padding:12px 11px;border-radius:11px;margin-bottom:10px;scroll-margin-top:56px}
  .bpf1-carte .bp-infos-titre,
  .bpf1-carte .bp-tarifs-titre,
  .bpf1-carte .bp-page-description-titre,
  .bpf1-carte .bpf1-tete{font-size:.92rem;margin-bottom:9px;padding-bottom:8px}
  /* Les tarifs tiennent en trois colonnes égales plutôt qu'en cartes de
     160 px qui se retrouvent seules sur leur ligne. */
  .bpf1-carte .bp-tarifs-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
  .bpf1-carte .bp-tarif{flex:none;padding:11px 4px}
  .bpf1-carte .bp-tarif-montant{font-size:1.05rem;margin-bottom:4px}
  .bpf1-carte .bp-tarif-tag{font-size:.72rem;gap:3px}
  .bpf1-carte .bp-page-participants-grille{gap:7px;padding:11px 0}
}

/* ==========================================================================
   FICHE — les flèches ‹ › de fiche en fiche (06/09/2026)

   Écrit dans vues/fiche.php, alimenté par pf_annuaire_voisins()
   (inscription/profils.php) : l'ordre parcouru est celui de l'annuaire
   FILTRÉ, pages confondues.

   PC seulement. Sur mobile le bloc n'existe même pas visuellement : le pouce
   a déjà le défilement continu de l'annuaire, et deux pastilles flottantes
   sur un écran étroit mangeraient la fiche.
   ========================================================================== */
.fiche-nav{display:none}

@media (min-width:901px){
  /* height:0 — le bloc ne pousse rien, il flotte au-dessus de la fiche.
     position:sticky + top:50% — sur PC c'est .col-centre qui défile (voir
     le @media (min-width:901px) des trois colonnes, plus haut) : les
     flèches restent donc à mi-hauteur de la colonne, du haut de la fiche
     jusqu'à son pied, sans le position:fixed qui les aurait plaquées à
     l'écran par-dessus les colonnes latérales. */
  .fiche-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:50%;
    height:0;
    margin:0;
    z-index:40;
    pointer-events:none;   /* la bande n'intercepte rien : seules les pastilles */
  }
  .fiche-nav-fleche{
    pointer-events:auto;
    flex:0 0 auto;
    width:42px;height:42px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:var(--carte-2);
    border:1px solid var(--trait);
    box-shadow:0 4px 14px var(--ombre-couleur);
    color:var(--txt-1);
    font-size:1.5rem;line-height:1;
    text-decoration:none;
    opacity:.55;
    transition:opacity .18s,background .18s,color .18s;
  }
  /* Discrètes au repos, franches dès que la souris entre dans la colonne :
     on ne veut pas deux pastilles pleines posées en permanence sur la
     photo de quelqu'un. */
  .col-centre:hover .fiche-nav-fleche{opacity:.9}
  .fiche-nav-fleche:hover{
    opacity:1;
    background:var(--accent);
    border-color:var(--accent);
    color:var(--sur-couleur);
  }
  .fiche-nav-fleche:focus-visible{outline:2px solid var(--accent);outline-offset:2px;opacity:1}

  /* Extrémité de la liste : la pastille reste, éteinte et non cliquable. */
  .fiche-nav-fleche--eteinte{
    opacity:.18;
    cursor:default;
    box-shadow:none;
  }
  .col-centre:hover .fiche-nav-fleche--eteinte{opacity:.25}
  .fiche-nav-fleche--eteinte:hover{
    opacity:.25;
    background:var(--carte-2);
    border-color:var(--trait);
    color:var(--txt-1);
  }
}

/* ==========================================================================
   DISCUSSION D'UN BON PLAN — vues/bon-plan.php (06/09/2026)

   Deux onglets en haut de la fiche, puis une conversation « façon
   messagerie » : les anciens en haut, le champ d'écriture en bas.
   Espace de noms .bpd-*, comme .bp-page-* pour le reste de la page.
   ========================================================================== */

/* ---- La barre d'onglets -------------------------------------------------- */
.bpd-onglets{
  display:flex;
  gap:6px;
  margin:0 0 14px;
  border-bottom:1px solid var(--trait);
}
.bpd-onglet{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border:1px solid transparent;
  border-bottom:none;
  border-radius:10px 10px 0 0;
  background:transparent;
  color:var(--txt-2);
  font:inherit;
  font-weight:600;
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.bpd-onglet:hover{background:var(--carte-2);color:var(--txt-1)}
.bpd-onglet--actif{
  background:var(--carte-2);
  border-color:var(--trait);
  color:var(--txt-1);
  box-shadow:inset 0 -2px 0 var(--accent);
}
.bpd-onglet:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* La pastille « non lus » : le seul point de couleur vive de la barre. */
.bpd-pastille{
  min-width:20px;
  padding:1px 6px;
  border-radius:999px;
  background:var(--rouge,#c0392b);
  color:#fff;
  font-size:.74rem;
  font-weight:700;
  line-height:1.5;
  text-align:center;
}
.bpd-pastille[hidden]{display:none}

/* ---- Le fil -------------------------------------------------------------- */
.bpd{display:flex;flex-direction:column;gap:12px}
/* La classe .bpd l'emporterait sur [hidden] du navigateur : sans cette
   ligne, le panneau Discussion reste affiche sous la fiche. */
.bpd[hidden]{display:none}

.bpd-liste{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-height:min(60vh,520px);
  overflow-y:auto;
  padding:4px 6px 4px 0;
  scrollbar-width:thin;
}
.bpd-vide{
  margin:auto;
  padding:30px 10px;
  color:var(--txt-2);
  text-align:center;
}
.bpd-vide--ko{color:var(--rouge-txt,#c0392b)}

.bpd-msg{display:flex;gap:10px;align-items:flex-start}
/* Mes messages passent à droite : d'un coup d'œil, on sait qui parle. */
.bpd-msg--moi{flex-direction:row-reverse}

.bpd-ava{
  flex:0 0 auto;
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid var(--or,var(--trait));
  background:var(--carte-2);
  color:var(--txt-2);
  font-weight:700;
  overflow:hidden;
  text-decoration:none;
}
.bpd-ava img{width:100%;height:100%;object-fit:cover;display:block}

.bpd-bulle{
  flex:1 1 auto;
  min-width:0;
  max-width:min(78%,560px);
  padding:8px 12px 10px;
  border:1px solid var(--trait);
  border-radius:14px;
  background:var(--carte-2);
}
.bpd-msg--moi .bpd-bulle{
  background:var(--accent-voile,var(--carte-2));
  border-color:var(--accent);
}

.bpd-tete{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-bottom:4px;
  font-size:.82rem;
}
.bpd-tete b{color:var(--txt-1)}
.bpd-tete em{color:var(--txt-2);font-style:normal;font-size:.76rem}

.bpd-retirer{
  margin-left:auto;
  padding:0 4px;
  border:none;
  background:none;
  color:var(--txt-2);
  font-size:.9rem;
  line-height:1;
  cursor:pointer;
  opacity:.55;
}
.bpd-retirer:hover{opacity:1;color:var(--rouge,#c0392b)}

.bpd-txt{
  margin:0;
  color:var(--txt-1);
  /* Un pseudo ou une adresse d'une seule pièce ne doit pas élargir la
     bulle au-delà de la colonne. */
  overflow-wrap:anywhere;
  white-space:pre-wrap;
}

.bpd-photo{
  display:block;
  margin-top:8px;
  padding:0;
  border:1px solid var(--trait);
  border-radius:10px;
  background:none;
  cursor:zoom-in;
  overflow:hidden;
}
.bpd-photo img{display:block;max-width:100%;max-height:280px;object-fit:cover}

/* ---- Le composeur -------------------------------------------------------- */
.bpd-composer{
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding-top:10px;
  border-top:1px solid var(--trait);
}
.bpd-composer textarea{
  flex:1 1 auto;
  min-height:42px;
  max-height:140px;
  padding:10px 12px;
  border:1px solid var(--trait);
  border-radius:12px;
  background:var(--carte-2);
  color:var(--txt-1);
  font:inherit;
  line-height:1.4;
  resize:none;
}
.bpd-composer textarea:focus{outline:none;border-color:var(--accent)}

/* Les deux pastilles carrées du composeur, 🙂 et 📎 : DEUX <button>
   identiques, alignés sur le bas comme le champ et le bouton « Envoyer ».
   inline-flex plutôt que grid — un <button> en display:grid n'est pas
   composé de la même façon partout, et les deux pictogrammes ne tombaient
   pas à la même hauteur (corrigé le 06/09/2026). */
.bpd-joindre{
  flex:0 0 auto;
  align-self:flex-end;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;height:42px;
  padding:0;
  border:1px solid var(--trait);
  border-radius:12px;
  background:var(--carte-2);
  color:var(--txt-1);
  font:inherit;
  font-size:1.15rem;
  line-height:1;
  cursor:pointer;
}
.bpd-joindre:hover{border-color:var(--accent)}

.bpd-composer button[type=submit]{
  flex:0 0 auto;
  height:42px;
  padding:0 18px;
  border:1px solid var(--accent);
  border-radius:12px;
  background:var(--accent);
  color:var(--sur-couleur,#fff);
  font:inherit;
  font-weight:600;
  cursor:pointer;
}
.bpd-composer button[type=submit]:disabled{opacity:.5;cursor:default}

.bpd-apercu{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:.84rem;
  color:var(--txt-2);
}
.bpd-apercu[hidden]{display:none}
.bpd-apercu button{
  border:none;background:none;color:var(--txt-2);
  cursor:pointer;font-size:.9rem;line-height:1;
}
.bpd-apercu button:hover{color:var(--rouge,#c0392b)}

.bpd-reste{margin:0;font-size:.78rem;color:var(--txt-2);text-align:right}

.bpd-ferme{
  margin:0;
  padding:12px 14px;
  border:1px dashed var(--trait);
  border-radius:12px;
  color:var(--txt-2);
  text-align:center;
}

@media (max-width:540px){
  .bpd-onglet{padding:9px 10px;font-size:.9rem}
  .bpd-bulle{max-width:100%}
  .bpd-liste{max-height:56vh}
  .bpd-composer button[type=submit]{padding:0 12px}
}

/* ==========================================================================
   DISCUSSION D'UN BON PLAN — emojis et crayon
   Complément de l'espace de noms .bpd-* posé plus haut. Le bouton 🙂 ouvre
   désormais le sélecteur unique du site (assets/emoji-picker.js), voir
   vues/bon-plan.php — plus de palette maison à styler ici.
   ========================================================================== */

/* ---- Les outils d'une bulle ---------------------------------------------- */
.bpd-outils{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:2px;
}
.bpd-crayon{
  padding:0 4px;
  border:none;
  background:none;
  font-size:.82rem;
  line-height:1;
  cursor:pointer;
  opacity:.55;
}
.bpd-crayon:hover{opacity:1}
/* .bpd-retirer portait déjà « margin-left:auto » : c'est désormais le rôle
   de .bpd-outils, qui pousse les deux boutons ensemble vers la droite. */
.bpd-outils .bpd-retirer{margin-left:0}

/* « à 21h04 · modifié » — la mention reste discrète, c'est une précision,
   pas une alerte. */
.bpd-tete em i{font-style:italic;opacity:.8}

/* ---- Le formulaire du crayon, dans la bulle ------------------------------ */
.bpd-edit{display:flex;flex-direction:column;gap:8px}
.bpd-edit textarea{
  width:100%;
  min-height:48px;
  max-height:180px;
  padding:8px 10px;
  border:1px solid var(--accent);
  border-radius:10px;
  background:var(--carte);
  color:var(--txt-1);
  font:inherit;
  line-height:1.4;
  resize:none;
}
.bpd-edit textarea:focus{outline:none}

.bpd-edit-photo{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.82rem;
  color:var(--txt-2);
  cursor:pointer;
}

.bpd-edit-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.bpd-edit-joindre{
  display:grid;place-items:center;
  width:32px;height:32px;
  border:1px solid var(--trait);
  border-radius:9px;
  background:var(--carte);
  cursor:pointer;
}
.bpd-edit-joindre:hover{border-color:var(--accent)}
.bpd-edit-nom{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.8rem;
  color:var(--txt-2);
}
.bpd-edit-actions button{
  height:32px;
  padding:0 12px;
  border-radius:9px;
  border:1px solid var(--trait);
  background:var(--carte);
  color:var(--txt-1);
  font:inherit;
  font-size:.86rem;
  cursor:pointer;
}
.bpd-edit-actions button[type=submit]{
  border-color:var(--accent);
  background:var(--accent);
  color:var(--sur-couleur,#fff);
  font-weight:600;
}
.bpd-edit-actions button:disabled{opacity:.5;cursor:default}

/* ==========================================================================
   FICHE — EN-TETE DE SA PROPRE FICHE (13/09/2026)

   Trois choses, et une seule condition : $fa_estMoi (inscription/
   fiche-affichage.php). Sur la fiche des autres, rien de ce bloc ne
   s'applique — .fiche-tete-droite garde sa colonne d'origine.

   1. « Indiquer mes dispos » (.fd-ouvrir) sort de .fiche-moment et se pose
      SEUL en haut a droite, au niveau du pseudo (.fiche-tete-dispos). Il
      reste vert des qu'une dispo est saisie : c'est .fd-ouvrir--actif,
      pose par fdRefleterEtat() (kalipay.js), rien de neuf ici.

   2. Les quatre boutons qui restent — Modifier, Humeur, Visio, Recos —
      forment UNE barre sous l'identite, a parts egales. Ils vivent dans
      deux conteneurs differents (.fiche-tete-ligne et .fiche-moment) :
      display:contents les efface de la mise en page, les quatre boutons
      deviennent alors enfants directs de .fiche-tete-droite--moi et
      « order » leur donne l'ordre voulu, sans deplacer une ligne de PHP.

   3. Mobile (<=900px) : la barre passe en grille 2x2 — Modifier + Humeur
      sur la premiere ligne, Visio + Recos sur la seconde (demande du
      13/09/2026). Aucun bouton pleine largeur, quatre pastilles de meme
      taille.
   ========================================================================== */

/* --- 1. Le bouton des dispos, en haut a droite --- */
.fiche-tete-dispos{flex:0 0 auto;margin-left:auto}
.fiche-tete-dispos .fd-ouvrir{margin-top:0;white-space:nowrap}

/* --- 2. « Modifier » : vers vues/mon-profil.php ---
   L'ORANGE EST AU SURVOL, PAS AU REPOS (13/09/2026). L'orange plein d'abord
   pose criait trop fort a cote de ses trois voisins : c'est un raccourci de
   confort, pas l'action la plus importante de la fiche. Au repos il prend
   donc la meme robe neutre que .btn-visio--off (--fond-3 / --trait), et ne
   se remplit d'orange qu'au passage du curseur.

   Meme pilule que .btn-ecrire / .btn-visio pour ne pas inventer une
   troisieme forme de bouton sur la meme ligne.

   Sans souris (mobile, tactile), @media (hover:hover) ne s'applique pas :
   le bouton y reste neutre en permanence — voulu, un :hover tactile reste
   colle apres le touche. */
.btn-modifier{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 15px;border-radius:999px;
  background:var(--fond-3);color:var(--txt-1);border:1px solid var(--trait);
  font-size:.79rem;font-weight:800;letter-spacing:.3px;
  font-family:inherit;cursor:pointer;white-space:nowrap;
  transition:background-color .18s,border-color .18s,color .18s,transform .18s,box-shadow .18s;
}
@media (hover:hover){
  .btn-modifier:hover{
    background:var(--orange);border-color:var(--orange);color:var(--sur-vif);
    transform:translateY(-1px);box-shadow:0 4px 14px var(--orange-voile);
  }
}
.btn-modifier-ico{font-size:.95rem;line-height:1}

/* --- 3. La barre des quatre boutons --- */
.fiche-tete-droite--moi{
  /* width:100% : la colonne de droite passe SOUS l'identite, laissant la
     1re ligne au pseudo et au bouton des dispos. */
  width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;
}
.fiche-tete-droite--moi .fiche-tete-ligne,
.fiche-tete-droite--moi .fiche-moment{display:contents}
.fiche-tete-droite--moi .btn-modifier{order:1}
.fiche-tete-droite--moi .btn-humeur{order:2}
.fiche-tete-droite--moi .btn-visio{order:3}
.fiche-tete-droite--moi .btn-recommandations{order:4}
.fiche-tete-droite--moi .btn-modifier,
.fiche-tete-droite--moi .btn-humeur,
.fiche-tete-droite--moi .btn-visio,
.fiche-tete-droite--moi .btn-recommandations{
  flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap;
  padding-left:10px;padding-right:10px;
}

@media (max-width:900px){
  /* 2 colonnes, 2 lignes : Modifier + Humeur, puis Visio + Recos. « order »
     ci-dessus fait le rangement, la grille ne fait que decouper. */
  .fiche-tete-droite--moi{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .fiche-tete-droite--moi .btn-modifier,
  .fiche-tete-droite--moi .btn-humeur,
  .fiche-tete-droite--moi .btn-visio,
  .fiche-tete-droite--moi .btn-recommandations{
    font-size:.76rem;padding:10px 8px;min-height:44px;
  }
  /* Le bouton des dispos garde le coin mais n'y montre qu'une icone.
     font-size:0 efface le libelle, ::before le remplace par l'icone —
     et c'est bien ::before, pas un <span> : fdRefleterEtat() (kalipay.js)
     reecrit textContent a chaque enregistrement et effacerait un span.
     L'icone suit l'etat par la classe --actif, que ce meme JS pose. */
  .fiche-tete-dispos .fd-ouvrir{
    width:44px;min-height:44px;padding:0;justify-content:center;
    overflow:hidden;font-size:0;
  }
  .fiche-tete-dispos .fd-ouvrir::before{content:"\1F4C5";font-size:1.05rem;line-height:1}
  .fiche-tete-dispos .fd-ouvrir--actif::before{content:"\1F7E2"}

  /* Le coin reste sur la LIGNE DU PSEUDO. En flux, ce bouton comptait pour
     un 3e element et .fiche-identite-corps (flex-basis 240px) le poussait
     sous l'identite ; retrecir le corps le remontait, mais cassait la ligne
     « Metz + categorie » en trois. Il sort donc du flux, et seul le titre
     lui reserve sa place (padding-right) — la ligne du dessous garde toute
     la largeur. Uniquement sur sa propre fiche, seul cas ou il existe. */
  .fiche-identite--moi{position:relative}
  .fiche-identite--moi .fiche-tete-dispos{position:absolute;top:0;right:0;margin-left:0}
  .fiche-identite--moi .fiche-pseudo{padding-right:52px}
}


/* ==========================================================================
   MENU ⋮ EN TUILES — 24/09/2026 (maquette B). Voir noyau/entete.php.
   Classes .bouton/.bouton--clair conservées : couleurs et thèmes inchangés.
   ========================================================================== */
.mt-grille{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* Dernière tuile seule sur sa ligne : elle prend toute la largeur. */
.mt-grille>:last-child:nth-child(odd){grid-column:1/-1}
.menu-liste .mt-tuile{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;min-height:78px;margin:0;padding:14px 8px;
  font-family:inherit;font-size:.82rem;line-height:1.2;cursor:pointer;
}
.mt-tuile--ligne{flex-direction:row!important;min-height:0!important;gap:8px!important}
.mt-ico{font-size:1.6rem;line-height:1}
.mt-tuile--ligne .mt-ico{font-size:1.1rem}
.mt-titre{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-2);margin:6px 4px -2px}
.menu-liste .mt-tuile--vues{
  grid-column:1/-1;flex-direction:row;justify-content:flex-start;gap:12px;text-align:left;
  border-color:var(--or);width:100%;
}
.mt-tuile--vues .mt-ico{font-size:1.7rem}
.mt-vues-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mt-vues-txt small{font-weight:400;font-size:.72rem;color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-pile{display:flex;flex:none}
.mt-av{
  width:30px;height:30px;margin-left:-8px;border-radius:50%;border:2px solid var(--fond-3);
  background:var(--or);color:var(--sur-or);display:grid;place-items:center;
  font-size:.75rem;font-weight:800;overflow:hidden;flex:none;
}
.mt-av:first-child{margin-left:0}
.mt-av img{width:100%;height:100%;object-fit:cover;display:block}
.mt-badge{
  position:absolute;top:-7px;right:-4px;padding:2px 7px;border-radius:999px;
  background:var(--accent);color:var(--sur-couleur);font-size:.7rem;font-weight:800;line-height:1.2;
}
.mt-badge[hidden]{display:none}

/* 25/09/2026 : bouton WhatsApp de l'en-tête masqué sur mobile (il est dans le menu ⋮). PC inchangé. */
@media (max-width:900px){.whatsapp-recommander{display:none}}

/* 25/09/2026 : 4e pastille (🥂 sorties club) dans l'en-tête mobile — pastilles
   et icônes resserrées pour que la rangée reste sur UNE ligne (5 avec 🗳️). */
@media (max-width:560px){
  .kp-connecte .entete-cpt{gap:3px}
  .kp-connecte .entete-cpt-item{padding:4px 6px;gap:2px}
  .kp-connecte .entete-cpt-item > span{font-size:.92rem}
  .kp-connecte .entete-cpt-item b{font-size:.72rem}
}
@media (max-width:380px){
  .kp-connecte .entete-cpt-item{padding:3px 5px}
  .kp-connecte .entete-cpt-item > span{font-size:.85rem}
  .kp-connecte .entete-cpt-item b{font-size:.68rem}
}

/* 25/09/2026 : icône WhatsApp de la tuile « Recommander » (menu ⋮ mobile). */
.mt-ico .mt-wa{display:block;width:1.6rem;height:1.6rem;border-radius:50%;object-fit:cover}

/* Commentaires : crayon de correction, mention « modifié », champ de correction
   et répartition des réactions (survol = qui a posé cet emoji). 25/09/2026. */
.pub-commentaire-modif,
.fil-commentaire-modif{
  background:none;border:0;color:var(--txt-2);cursor:pointer;font-size:.8rem;line-height:1;padding:0 2px;
}
.pub-commentaire-modif:hover,
.fil-commentaire-modif:hover{color:var(--or-txt)}
.fil-commentaire-modif{position:absolute;top:0;right:22px}
.commentaire-modifie{color:var(--txt-2);font-size:.74rem;font-style:italic}
.commentaire-edition{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:4px}
.commentaire-edition textarea{width:100%;box-sizing:border-box;min-height:64px;resize:vertical;font:inherit}
.commentaire-edition .btn{align-self:flex-start}
.commentaire-edition-erreur{color:var(--rouge);font-size:.8rem}
.pubc-repartition{font-size:.78rem;color:var(--txt-2);white-space:nowrap}
.pubc-repartition:empty{display:none}
.pubc-qui{cursor:pointer}
.fil-commentaire .pubc-repartition{margin-left:6px}
.fil-commentaire[data-texte]{padding-right:44px}


/* ==========================================================================
   CROIX « FERMER LA FICHE » (04/10/2026)
   Bulle fixe en haut à droite sur la fiche d'un autre membre
   (vues/fiche.php). Couleurs : le thème actif, rien en dur.
   ========================================================================== */
.fiche-fermer{
  /* --entete-bas / --entete-droite : posées par kalipay.js d'après l'en-tête. */
  position:fixed;top:calc(var(--entete-bas,64px) + 8px);right:var(--entete-droite,14px);z-index:1200;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-fonce));color:var(--sur-couleur);
  font-size:1.2rem;font-weight:700;line-height:1;text-decoration:none;cursor:pointer;
  box-shadow:0 6px 18px var(--ombre-forte);transition:transform .15s;
}
.fiche-fermer:hover{transform:scale(1.07)}
.fiche-fermer:focus-visible{outline:3px solid var(--or);outline-offset:2px}


/* ==========================================================================
   MESSAGERIE MOBILE COMPACTE (04/10/2026) — proposition B « bulles dorées »
   Sous 860 px, une seule rangée : [＋] [champ] [envoi rond]. Le « ＋ »
   ouvre une seconde rangée avec TOUS les outils (émojis, image, lien,
   sondage) ; JS : .kpm-plus dans kalipay.js. Champ bordé de la couleur
   d'action du thème. Aucune couleur en dur : variables de themes.css.
   Placé en fin de feuille pour l'emporter sur les règles .kpm-* plus haut.
   ========================================================================== */
.kpm-plus{display:none!important} /* PC : jamais de « ＋ » (05/10/2026) */
@media (max-width:860px){
  .kpm-tete{padding:8px 12px}
  .kpm-fil{padding:10px 12px;gap:6px}
  .kpm-bulle{max-width:84%;padding:7px 11px;font-size:.92rem}
  .kpm-bulle--moi{background:var(--accent);border-color:var(--accent);color:var(--sur-couleur)}
  .kpm-bulle--moi .kpm-quand,
  .kpm-bulle--moi .lien-interne,
  .kpm-bulle--moi .lien-externe{color:inherit}
  .kpm-bulle--moi .kpm-quand{opacity:.75}

  .kpm-form{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    column-gap:8px;align-items:center;padding:6px 10px;
  }
  .kpm-form>.kpm-jointe{grid-column:1 / -1}
  .kpm-bas{display:contents}

  .kpm-plus{
    display:flex!important;grid-column:1;grid-row:2;align-items:center;justify-content:center;
    width:40px;height:40px;padding:0;border:0;border-radius:50%;cursor:pointer;
    background:var(--fond-3);color:var(--txt);font-family:inherit;
    transition:transform .15s,background .15s;
  }
  .kpm-plus .kpm-outil-ico{font-size:1.5rem;font-weight:700}
  .kpm-form--plus .kpm-plus{transform:rotate(45deg);background:var(--accent);color:var(--sur-couleur)}

  /* field-sizing : 1 ligne au repos, suit le texte ; !important car
     kalipay.js pose une hauteur en ligne. */
  .kpm-texte{
    grid-column:2;grid-row:2;
    height:auto!important;field-sizing:content;
    min-height:40px;max-height:120px;border:1.5px solid var(--accent);
    border-radius:20px;padding:9px 14px;font-size:16px;background:var(--fond-2);
  }
  .kpm-envoyer{
    grid-column:3;grid-row:2;
    width:40px;height:40px;padding:0;border-radius:50%;justify-content:center;
    font-size:0;gap:0;
  }
  .kpm-envoyer span{font-size:1.05rem}

  /* Les outils : cachés, sauf « ＋ » ouvert (rangée 3, sous la saisie) */
  .kpm-jointe{grid-row:1}
  .kpm-outils{display:none;grid-column:1 / -1;grid-row:3;border-top:0;gap:6px;padding-top:6px}
  .kpm-form--plus .kpm-outils{display:flex}
  .kpm-outil,.kpm-outil + .kpm-outil{
    flex:0 0 auto;width:44px;height:40px;padding:0;border:0;border-radius:12px;
    font-size:0;gap:0;background:var(--fond-3);justify-content:center;
  }
  .kpm-outil-ico{font-size:1.3rem}
  .kpm-form>.kpm-sondage-liste{grid-column:1 / -1;grid-row:4}
}

/* ==========================================================================
   CROIX DE LA BULLE DE CONVERSATION (04/10/2026) — bien visible
   Pastille ronde de 44 px, rouge du thème (--rouge) et croix claire
   (--sur-vif), pour être trouvée d'un coup de pouce. Placée en fin de feuille.
   ========================================================================== */
.kpb-fermer{
  width:34px;height:34px;border-radius:50%;   /* même taille que 📹 (.kpm-visio), 04/10/2026 */
  background:var(--rouge);color:var(--sur-vif);
  font-size:.95rem;font-weight:800;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px var(--ombre-couleur);
}
.kpb-fermer:hover,.kpb-fermer:focus-visible{background:var(--rouge-vif);color:var(--sur-vif)}


/* ---- Tarifs & participants (06/10/2026) : une carte, trois catégories ---- */
.bp-tp-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bp-tp-carte{
  --c:var(--violet);display:flex;flex-direction:column;align-items:center;gap:6px;
  min-width:0;width:100%;margin:0;font:inherit;cursor:pointer;text-align:center;
  background:var(--fond-2);border:1px solid var(--trait-2);border-top:4px solid var(--c);
  border-radius:12px;padding:14px 8px;transition:border-color .12s,background-color .12s,transform .12s;
}
.bp-tp-femme{--c:var(--rose)}
.bp-tp-homme{--c:var(--bleu)}
.bp-tp-carte:hover{background:var(--fond-3);transform:translateY(-1px)}
.bp-tp-carte:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.bp-tp-lib{color:var(--c);font-weight:700;font-size:.92rem;white-space:nowrap}
.bp-tp-carte b{font-family:'Playfair Display',Georgia,serif;font-size:2rem;line-height:1;color:var(--txt)}
.bp-tp-prix{
  font-style:normal;font-weight:800;font-size:.95rem;color:var(--txt);
  border:1px solid var(--c);border-radius:99px;padding:3px 14px;margin-top:2px
}
.bp-tp-total{
  display:block;margin:12px auto 0;background:none;border:0;font:inherit;cursor:pointer;
  color:var(--txt-2);font-size:.82rem
}
.bp-tp-total:hover{color:var(--or-txt)}
.bp-tp-actions{padding:0;margin-top:10px}
@media (max-width:420px){
  .bp-tp-grille{gap:6px}
  .bp-tp-carte{padding:10px 2px}
  .bp-tp-lib{font-size:clamp(.6rem,2.8vw,.8rem)}
  .bp-tp-carte b{font-size:1.5rem}
  .bp-tp-prix{padding:2px 8px;font-size:.8rem}
}

/* ---- Liste « Qui y va » en ligne sous les cartes (06/10/2026) ------------ */
.bp-tp-liste[hidden]{display:none}
.bp-tp-liste{margin-top:12px;padding-top:10px;border-top:1px solid var(--trait-2)}
.bp-tp-liste-tete{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;
  font-family:'Playfair Display',Georgia,serif;font-weight:700;color:var(--or-txt)}
.bp-tp-fermer{background:none;border:0;cursor:pointer;color:var(--txt-2);font-size:1rem;padding:4px 8px;border-radius:6px}
.bp-tp-fermer:hover{color:var(--txt);background:var(--fond-3)}
.bp-tp-carte--actif{background:var(--fond-3);box-shadow:0 0 0 1px var(--c)}

/* ---- Format « soirées » pour Tarifs & participants (06/10/2026) ---------- */
.bp-tp-chev{font-style:normal;font-size:.65rem;color:var(--txt-2);transition:transform .15s}
.bp-tp-carte--actif .bp-tp-chev{transform:rotate(180deg)}
.bp-tp-carte--actif{box-shadow:none;border-color:var(--trait-4);border-top-color:var(--c)}
/* Panneau : cadre simple sous les cartes, sans titre (le clic sur la carte referme) */
.bp-tp-liste{--c-plein:var(--or);margin-top:10px;padding:12px;border:1px solid var(--trait);border-radius:10px;background:var(--carte)}
.bp-tp-liste[data-genre="couple"]{--c-plein:var(--violet)}
.bp-tp-liste[data-genre="femme"]{--c-plein:var(--rose)}
.bp-tp-liste[data-genre="homme"]{--c-plein:var(--bleu)}
.bp-tp-liste-tete{display:none}
/* 07/10/2026 : grille au lieu d'un flex à largeur fixe (116px) qui laissait
   un vide à droite sur PC. PC : autant de colonnes que possible, étirées. */
.bp-tp-liste .bp-participants-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:10px;margin:0;padding:0;border-top:0}
.bp-tp-liste .bp-part-case{min-width:0}
.bp-tp-liste .bp-part-vignette{
  width:100%;box-sizing:border-box;padding:10px 6px;gap:6px;border:1px solid var(--trait);border-radius:8px;background:var(--fond-2)}
.bp-tp-liste .bp-part-photo{width:84px;height:84px;box-shadow:0 0 0 3px var(--c-plein)}
.bp-tp-liste .bp-part-vignette:hover .bp-part-photo{box-shadow:0 0 0 3px var(--c-plein)}
.bp-tp-liste .bp-part-nom{font-size:.95rem;font-weight:800;color:var(--txt)}
.bp-tp-liste .bp-participants-nav{width:100%}
@media (max-width:540px){
  /* 07/10/2026 : 3 colonnes garanties (l'ancien calc(100vw - 90px)/3
     sous-estimait les marges réelles -> 2 colonnes). */
  .bp-tp-liste .bp-participants-grille{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .bp-tp-liste .bp-part-vignette{padding:8px 4px}
  .bp-tp-liste .bp-part-photo{width:64px;height:64px}
  .bp-tp-liste .bp-part-nom{font-size:.8rem}
}