/* AS JJB — Espace membre (complète style.css du site) */

/* Espace membre élargi : 80 % de la largeur de la fenêtre */
.container { max-width: none; width: 80%; padding-left: 0; padding-right: 0; }
@media (max-width: 700px) { .container { width: 92%; } }
.member-hello { font-family: var(--font-title); font-weight: 700; font-size: 13.5px; text-transform: uppercase; color: var(--color-white); }

/* Bande jaune fine sous le menu : retour au site */
.member-backbar { background: var(--color-yellow); }
.member-backbar a { display: inline-block; padding: 7px 0; font-family: var(--font-title); font-weight: 800; text-transform: uppercase; font-size: 11.5px; letter-spacing: .5px; color: var(--color-navy); transition: transform .2s ease; }
.member-backbar a:hover { transform: translateX(-4px); }

.member-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.member-card { background: #0d0d0d; border: 1px solid rgba(255,255,255,.1); padding: 26px 28px; }
.member-card h3 { font-size: 17px; color: var(--color-yellow); margin-bottom: 14px; }
.member-card.full { grid-column: 1 / -1; }

.member-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 14.5px; }
.member-row:last-child { border-bottom: none; }
.member-row .lbl { color: rgba(255,255,255,.45); min-width: 0; overflow-wrap: anywhere; }
.member-row .val { color: var(--color-white); font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }

.mstatus { display: inline-block; font-family: var(--font-title); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 4px 10px; }
.mstatus--ok { background: rgba(34,211,166,.12); color: #22D3A6; }
.mstatus--warn { background: rgba(214,164,49,.12); color: #D6A431; }
.mstatus--off { background: rgba(255,255,255,.06); color: rgba(255,255,255,.4); }
.mstatus--danger { background: rgba(232,86,127,.12); color: #E8567F; }

/* Messages flash (flash()/flash_render(), config.php) : jusqu'ici sans
   style côté espace membre (contrairement au backoffice, voir admin.css) —
   un blocage serveur (ex. infos manquantes sur Adhérer) passait inaperçu. */
.flash { padding: 12px 18px; margin-bottom: 20px; font-size: 14px; font-weight: 600; border: 1px solid; }
.flash--success { color: var(--color-jjb); border-color: rgba(34,211,166,.4); background: rgba(34,211,166,.06); }
.flash--error { color: var(--color-boxe); border-color: rgba(232,86,127,.4); background: rgba(232,86,127,.06); }

.member-form label { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; color: rgba(255,255,255,.5); margin-bottom: 6px; }
.member-form input, .member-form select, .member-form textarea { width: 100%; padding: 12px 14px; margin-bottom: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.15); color: var(--color-white); font-family: var(--font-body); font-size: 15px; }
.member-form textarea { resize: vertical; }
.member-form input:focus, .member-form select:focus, .member-form textarea:focus { outline: none; border-color: var(--color-yellow); }
/* Le menu déroulant ouvert par le navigateur ignore le fond semi-transparent
   du <select> et retombe sur son propre fond (blanc par défaut) : sans cette
   règle, le texte blanc hérité devient invisible tant qu'on ne survole pas
   une option (le surlignage du navigateur le rend visible par accident). */
.member-form select option { background: var(--color-black); color: var(--color-white); }

.member-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.member-table th { font-family: var(--font-title); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.4); text-align: left; padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,.12); }
.member-table td { padding: 11px 10px; border-bottom: 1px solid rgba(255,255,255,.05); }

.auth-narrow { max-width: 460px; }
.invite-link { word-break: break-all; font-size: 13px; color: var(--color-yellow); background: rgba(248,248,18,.05); border: 1px dashed rgba(248,248,18,.4); padding: 12px 14px; display: block; margin-top: 10px; }

/* Page Adhérer : formulaire + cadre codes famille */
.adh-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.adh-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.adh-info-grid label { margin-bottom: 4px; }
.adh-info-grid input, .adh-info-grid select { margin-bottom: 12px; padding: 10px 12px; font-size: 14px; }
/* Champ signalé manquant au retour du blocage serveur "informations
   requises pour la licence CFJJB" (voir adhesion.php, redirect avec
   ?champs_manquants=...) — la page scrolle aussi dessus au chargement. */
.adh-field-missing { border-color: var(--color-boxe) !important; }
.adh-codes { position: sticky; top: 90px; }
.adh-codes h3 { font-size: 16px; }
.adh-code-item { border: 1px solid rgba(255,255,255,.1); padding: 12px 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 3px; }
.adh-code-lbl { font-size: 13px; color: var(--color-white); font-weight: 600; }
.adh-code-val { font-family: var(--font-title); font-weight: 800; font-size: 14px; color: var(--color-yellow); letter-spacing: .5px; }
.adh-code-pct { font-size: 12px; color: #22D3A6; font-weight: 600; }

/* Page Adhérer : options de paiement hors-ligne (chèque/espèces), volontairement
   discrètes — le paiement carte en 1x reste le choix mis en avant. */
.adh-offline-btn { background: none; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.5); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; padding: 5px 10px; cursor: pointer; transition: all .15s ease; }
.adh-offline-btn:hover { border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.75); }
.adh-offline-btn.active { border-color: var(--color-yellow); color: var(--color-yellow); }

/* Page Adhérer : bouton "Appliquer" du code promo */
.adh-promo-btn { background: none; border: 1px solid var(--color-yellow); color: var(--color-yellow); font-family: var(--font-title); font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 0 20px; cursor: pointer; transition: all .15s ease; white-space: nowrap; }
.adh-promo-btn:hover { background: var(--color-yellow); color: var(--color-black); }
@media (max-width: 1024px) { .adh-layout { grid-template-columns: 1fr; } .adh-codes { position: static; } }
@media (max-width: 640px) { .adh-info-grid { grid-template-columns: 1fr; } }

@media (max-width: 860px) { .member-grid { grid-template-columns: minmax(0, 1fr); } }

/* Tuiles de l'espace membre sur petit écran : le padding fixe et les lignes
   lbl/val en flex-row (sans possibilité de retour à la ligne) font déborder
   ou se tasser le contenu (noms/libellés longs, badges de statut) une fois
   la largeur du conteneur réduite à 92 %. */
@media (max-width: 480px) {
  .member-card { padding: 18px 16px; }
  .member-card h3 { font-size: 15.5px; }
  .member-row { flex-wrap: wrap; row-gap: 4px; }
  .member-row .val { text-align: left; }
}

/* Le bouton hamburger (.nav-toggle) apparaît sous 1180px (style.css), mais
   .header-actions garde ici "Bonjour <prénom>" + le bouton Déconnexion — plus
   large que sur le site public, qui masque son équivalent (.nav-profile span)
   à ce même seuil. Avec .logo et .header-actions en flex-shrink:0, ce texte
   en trop pousse le hamburger hors du cadre visible sans pouvoir rétrécir. */
@media (max-width: 1180px) {
  .member-hello { display: none; }
}

/* ---------- Popup de recadrage/optimisation d'image (dépôt d'annonce) ----------
   Adapté du popup équivalent du backoffice (admin.css) : mêmes règles, mais
   avec les couleurs/variables du site public (--color-*) puisque l'espace
   membre n'a pas accès à la feuille de style admin. */
.modal-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.8); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal-box { width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; background: #0d0d0d; border: 1px solid rgba(255,255,255,.1); padding: 26px 28px; }
.modal-box h2 { font-size: 16px; color: var(--color-yellow); margin-bottom: 16px; }
.modal-box canvas { width: 100%; border: 1px solid rgba(255,255,255,.1); background: #000; cursor: grab; touch-action: none; display: block; }
.modal-box canvas:active { cursor: grabbing; }
.modal-controls { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.modal-controls label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: rgba(255,255,255,.5); display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 120px; }
.modal-controls select, .modal-controls input[type="range"] { accent-color: var(--color-yellow); }
.modal-controls select { padding: 7px 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.15); color: var(--color-white); }

/* ---------- Sous-menu ancré "Mon compte" (2026-08) ----------
   Page unique et longue depuis la fusion de "Ma famille"/"Mes infos"/dépôt
   d'annonce dans "Mon compte" : ce bandeau reste épinglé sous le header du
   site (lui-même sticky, ~90px de haut, voir .adh-codes plus haut pour la
   même valeur). Le défilement fluide est géré à la main en JS (voir
   index.php) plutôt que par `scroll-behavior: smooth` : combiné à la
   navigation par ancre sous des éléments sticky, ce réglage CSS s'est
   révélé peu fiable (le défilement pouvait ne jamais démarrer selon le
   navigateur) — `scroll-margin-top` ci-dessous reste utile comme filet de
   secours pour un saut natif (sans JS) correctement positionné.
   `style.css` (chargé sur cette page aussi) impose `scroll-behavior: smooth`
   sur `html` pour le site public : on le neutralise ici, sinon le JS de
   défilement manuel ci-dessus se fait rattraper par cette règle globale. */
html { scroll-behavior: auto; }
.member-subnav { position: sticky; top: 90px; z-index: 60; display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; background: var(--color-black); border: 1px solid rgba(255,255,255,.1); padding: 6px; margin-bottom: 30px; }
.member-subnav a { flex-shrink: 0; font-family: var(--font-title); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.55); padding: 10px 16px; white-space: nowrap; transition: all .15s ease; }
.member-subnav a:hover { color: var(--color-white); background: rgba(255,255,255,.06); }
.member-subnav a.active { color: var(--color-navy); background: var(--color-yellow); }

.member-section-title { font-size: 21px; color: var(--color-white); margin: 46px 0 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.1); scroll-margin-top: 150px; }
.member-section-title:first-of-type { margin-top: 0; }

/* Mobile : bandeau plus compact, toujours scrollable horizontalement au
   doigt (le header du site garde la même hauteur à toutes les largeurs,
   top: 90px reste donc valable). */
@media (max-width: 700px) {
  .member-subnav a { padding: 8px 12px; font-size: 10.5px; }
  .member-section-title { font-size: 18px; margin-top: 34px; scroll-margin-top: 128px; }
}

/* ---------- Boîte de dialogue de confirmation (remplace confirm()) ---------- */
/* Le reset global de style.css (`* { margin: 0 }`) écrase le `margin: auto`
   que le navigateur utilise pour centrer `dialog:modal` par défaut — on le
   rétablit explicitement, sinon la boîte colle en haut de l'écran. */
.confirm-dialog { border: none; padding: 0; background: transparent; }
.confirm-dialog[open] { position: fixed; inset: 0; margin: auto; }
.confirm-dialog::backdrop { background: rgba(0,0,0,.65); }
.confirm-dialog-box { background: #0d0d0d; border: 1px solid rgba(255,255,255,.1); padding: 28px 30px; max-width: 420px; width: min(420px, calc(100vw - 40px)); }
.confirm-dialog-box p { font-size: 15px; line-height: 1.5; color: var(--color-white); margin-bottom: 24px; }
.confirm-dialog-actions { display: flex; justify-content: flex-end; gap: 12px; }
.confirm-dialog-actions .btn { padding: 10px 22px; font-size: 13px; }
.confirm-dialog-actions .btn--danger { background: #E8567F; color: var(--color-white); border-color: #E8567F; }