/* =====================================================================
   Qeewee — pages PUBLIQUES (layout `layouts.public`).
   Une seule feuille pour toutes les pages hors admin :
     · qp-*  : composants partagés (dons, consentement, politique de conf.)
     · gd-*  : annuaire des petits groupes  (/groupes/{slug})
     · ev-*  : inscription aux événements   (/inscription/{slug})
   Les couleurs d'accent varient par fonctionnalité : indigo (dons,
   consentement), orange (groupes), cyan (événements).
   ===================================================================== */

/* ── Reset + base (repris du layout) ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f8fafc; color: #1e293b; min-height: 100vh; }
a { color: inherit; }

/* =====================================================================
   qp-* — squelette commun : page, en-tête, carte, pied de page.
   Largeur de colonne via --qp-w (520px par défaut).
   ===================================================================== */
.qp-page {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start; padding: 2rem 1rem;
}
.qp-page--md { --qp-w: 560px; }
.qp-page--lg { --qp-w: 760px; }

.qp-container { width: 100%; max-width: var(--qp-w, 520px); }

.qp-head { width: 100%; max-width: var(--qp-w, 520px); margin-bottom: 1.5rem; text-align: center; }
.qp-head-logo { max-height: 64px; max-width: 220px; margin-bottom: 0.5rem; }
.qp-head-title { font-size: 1.5rem; font-weight: 800; color: #1e293b; }
.qp-head-sub { font-size: 0.95rem; color: #64748b; margin-top: 0.25rem; }
.qp-head-note { font-size: 0.78rem; color: #94a3b8; margin-top: 0.35rem; }

.qp-card {
    width: 100%; max-width: var(--qp-w, 520px);
    background: #fff; border-radius: 1rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); padding: 2rem;
}
.qp-card--doc { padding: 2.25rem 2rem; }

.qp-foot { margin-top: 1.5rem; font-size: 0.78rem; color: #94a3b8; text-align: center; }
.qp-powered { margin: 1.5rem 0; font-size: 0.72rem; color: #cbd5e1; text-align: center; }

/* ── Typo courante ── */
.qp-step-title { font-weight: 700; font-size: 1.1rem; margin-bottom: 1.25rem; }
.qp-text { margin: 0 0 1rem; font-size: 0.92rem; color: #1e293b; }
.qp-text--muted { margin: 0 0 1.5rem; font-size: 0.85rem; color: #64748b; line-height: 1.5; }
.qp-smallprint { margin: 1rem 0 0; font-size: 0.75rem; color: #94a3b8; text-align: center; line-height: 1.4; }

/* ── Formulaires ── */
.qp-field { margin-bottom: 1rem; }
.qp-fields { display: flex; flex-direction: column; gap: 0.875rem; margin-bottom: 1.25rem; }
.qp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }

.qp-label { font-size: 0.85rem; font-weight: 600; color: #475569; display: block; margin-bottom: 0.375rem; }

.qp-input {
    width: 100%; padding: 0.625rem 0.75rem; border: 1.5px solid #e2e8f0;
    border-radius: 0.5rem; font-size: 0.95rem; outline: none; color: #1e293b;
}
.qp-input.has-error { border-color: #dc2626; }

.qp-select {
    width: 100%; padding: 0.6rem 0.875rem; border: 1.5px solid #e2e8f0;
    border-radius: 0.5rem; font-size: 0.95rem; color: #1e293b;
    background: #fff; outline: none;
}

.qp-error { color: #dc2626; font-size: 0.85rem; margin-bottom: 0.75rem; }
.qp-error--field { display: block; font-size: 0.78rem; margin: 0.25rem 0 0; }
.qp-error--box { margin-bottom: 1rem; padding: 0.625rem; background: #fef2f2; border-radius: 0.5rem; }

/* Case à cocher en ligne (récurrent, anonyme…) */
.qp-check { display: flex; align-items: center; gap: 0.625rem; cursor: pointer; }
.qp-check--lead { margin-bottom: 1.25rem; }
.qp-check input[type="checkbox"] { width: 1.125rem; height: 1.125rem; accent-color: #4f46e5; cursor: pointer; }
.qp-check-label { font-weight: 600; color: #334155; }

/* Encarts gris */
.qp-box { margin-bottom: 1.5rem; padding: 0.875rem; background: #f1f5f9; border-radius: 0.625rem; }
.qp-note { margin-bottom: 1.25rem; padding: 0.75rem; background: #f1f5f9; border-radius: 0.5rem; font-size: 0.875rem; color: #475569; }

/* ── Boutons ── */
.qp-btn {
    width: 100%; padding: 0.875rem; border: none; border-radius: 0.625rem;
    font-size: 1rem; font-weight: 700; cursor: pointer; transition: background .15s;
}
.qp-btn--primary { background: #4f46e5; color: #fff; }
.qp-btn--primary:hover { background: #4338ca; }
.qp-btn--gap { margin-top: 1.5rem; }
.qp-btn--back { width: auto; padding: 0.875rem 1.25rem; background: #f1f5f9; color: #475569; font-size: 0.95rem; font-weight: 600; }
.qp-btn--link { padding: 0.75rem; background: transparent; color: #64748b; font-size: 0.9rem; font-weight: 400; text-decoration: underline; }
.qp-btn--cta {
    display: inline-block; width: auto; padding: 0.75rem 1.5rem;
    background: #4f46e5; color: #fff; font-weight: 600; text-decoration: none;
}
.qp-btn--cta:hover { background: #4338ca; }
.qp-btn--ghost {
    width: auto; background: none; border: 1px solid #cbd5e1; border-radius: 0.6rem;
    padding: 0.5rem 1rem; color: #475569; font-size: 0.82rem; font-weight: 600;
}
/* Bouton-lien discret (retour, export RGPD…) */
.qp-linkbtn {
    background: none; border: none; color: #4f46e5; font-weight: 600;
    font-size: 0.85rem; cursor: pointer; text-decoration: underline;
}

.qp-row { display: flex; gap: 0.625rem; }
.qp-row > .qp-btn { flex: 1; }
.qp-row > .qp-btn--back { flex: 0 0 auto; }
.qp-actions { text-align: center; margin: 1.5rem 0; }

/* =====================================================================
   qp-* — formulaire de don (/donner/{slug})
   ===================================================================== */
.qp-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; margin-bottom: 1rem; }
.qp-preset {
    padding: 0.75rem; border-radius: 0.625rem; font-size: 1rem; font-weight: 600;
    cursor: pointer; transition: all .15s;
    border: 2px solid #e2e8f0; background: #f8fafc; color: #374151;
}
.qp-preset--sm { font-size: 0.9rem; }
.qp-preset.is-active { border-color: #6366f1; background: #eef2ff; color: #4338ca; }

.qp-amount { position: relative; }
.qp-amount-input {
    width: 100%; padding: 0.75rem 3rem 0.75rem 1rem; border: 2px solid #6366f1;
    border-radius: 0.625rem; font-size: 1.1rem; font-weight: 600; outline: none; color: #1e293b;
}
.qp-amount-cur {
    position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
    color: #94a3b8; font-weight: 600;
}

/* Pilules d'intervalle (mensuel / trimestriel / annuel) */
.qp-chips { margin-top: 0.625rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.qp-chip {
    padding: 0.35rem 0.875rem; border-radius: 1rem; font-size: 0.82rem; font-weight: 600;
    cursor: pointer; border: 1.5px solid #cbd5e1; background: #fff; color: #475569;
}
.qp-chip.is-active { border-color: #6366f1; background: #eef2ff; color: #4338ca; }

/* Récapitulatif */
.qp-sum { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
.qp-sum-row { display: flex; justify-content: space-between; padding: 0.625rem 0; border-bottom: 1px solid #f1f5f9; }
.qp-sum-row:last-child { border-bottom: none; }
.qp-sum-key { color: #64748b; font-size: 0.9rem; }
.qp-sum-val { font-weight: 600; color: #1e293b; }
.qp-sum-val--lg { font-weight: 700; font-size: 1.05rem; }

/* « Couvrir les frais » */
.qp-fees {
    display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 0.875rem;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.625rem;
    margin-bottom: 0.75rem; cursor: pointer;
}
.qp-fees input[type="checkbox"] { margin-top: 0.15rem; width: 1rem; height: 1rem; accent-color: #4f46e5; }
.qp-fees-text { font-size: 0.82rem; color: #475569; line-height: 1.4; }
.qp-fees-total { display: block; color: #16a34a; font-weight: 600; margin-top: 0.25rem; }

/* Options de paiement (gros boutons) */
.qp-pay {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 1rem 1.125rem; border-radius: 0.75rem; cursor: pointer;
    margin-bottom: 0.75rem; text-align: left;
}
.qp-pay--online { background: #eef2ff; border: 2px solid #6366f1; }
.qp-pay--off { background: #f8fafc; border: 2px solid #e2e8f0; opacity: 0.65; cursor: not-allowed; }
.qp-pay--transfer { background: #f0fdf4; border: 2px solid #16a34a; margin-bottom: 1.5rem; }
.qp-pay-titlerow { display: flex; align-items: center; gap: 0.5rem; }
.qp-pay-title { font-weight: 700; font-size: 0.95rem; }
.qp-pay--online .qp-pay-title { color: #4338ca; }
.qp-pay--off .qp-pay-title { color: #64748b; }
.qp-pay--transfer .qp-pay-title { color: #15803d; }
.qp-pay-sub { font-size: 0.8rem; margin-top: 0.15rem; }
.qp-pay--online .qp-pay-sub { color: #6366f1; }
.qp-pay--off .qp-pay-sub { color: #94a3b8; }
.qp-pay--transfer .qp-pay-sub { color: #16a34a; }
.qp-pay-ico { font-size: 1.4rem; }
.qp-pay--off .qp-pay-ico { filter: grayscale(1); }
.qp-soon {
    font-size: 0.7rem; font-weight: 700; color: #fff; background: #94a3b8;
    padding: 0.15rem 0.5rem; border-radius: 1rem; letter-spacing: 0.03em;
}

/* Étape « merci / échec / annulé » */
.qp-done { text-align: center; padding: 1rem 0; }
.qp-done-emoji { font-size: 3rem; margin-bottom: 1rem; }
.qp-done-title { font-weight: 800; font-size: 1.3rem; color: #1e293b; margin-bottom: 0.5rem; }
.qp-done-title--danger { color: #dc2626; }
.qp-done-title--muted { color: #64748b; }
.qp-done-text { font-size: 0.95rem; color: #64748b; margin-bottom: 1.5rem; line-height: 1.6; }
.qp-done-text--tight { margin-bottom: 1.25rem; }

/* GiroCode SEPA */
.qp-giro { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1.25rem; }
.qp-giro-qr { width: 220px; height: 220px; display: block; margin: 0 auto 0.5rem; }
.qp-giro-hint { font-size: 0.82rem; color: #475569; margin-bottom: 0.75rem; text-align: center; }
.qp-giro-rows { text-align: left; font-size: 0.82rem; color: #475569; border-top: 1px solid #e2e8f0; padding-top: 0.75rem; line-height: 1.7; }
.qp-giro-rows .qp-key { color: #94a3b8; }
.qp-giro-rows strong { color: #1e293b; }

/* Bénéficiaire réel du versement (transparence Q-DON-08) */
.qp-paidto {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 0.625rem;
    padding: 0.6rem 0.9rem; margin-bottom: 1.5rem; font-size: 0.85rem; color: #475569;
}
.qp-paidto strong { color: #1e293b; }

/* =====================================================================
   qp-* — consentements (/consentement/{token})
   ===================================================================== */
.qp-consents { display: flex; flex-direction: column; gap: 0.75rem; }
.qp-consent {
    display: flex; gap: 0.85rem; align-items: flex-start;
    border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 0.9rem 1rem; cursor: pointer;
}
.qp-consent input[type="checkbox"] {
    width: 1.15rem; height: 1.15rem; margin-top: 0.15rem;
    accent-color: #4f46e5; flex: none; cursor: pointer;
}
.qp-consent-body { flex: 1; }
.qp-consent-title { display: block; font-weight: 700; color: #1e293b; font-size: 0.92rem; }
.qp-consent-desc { display: block; font-size: 0.8rem; color: #64748b; line-height: 1.4; margin-top: 0.15rem; }

/* Mineur : représentant légal */
.qp-minor { margin-top: 1rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: 0.75rem; padding: 0.9rem 1rem; }
.qp-minor-note { margin: 0 0 0.5rem; font-size: 0.8rem; color: #92400e; }
.qp-minor input[type="text"] { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid #fcd34d; border-radius: 0.5rem; font-size: 0.9rem; }

/* Confirmation d'enregistrement */
.qp-saved-emoji { font-size: 2.5rem; line-height: 1; }
.qp-saved-title { margin: 0.5rem 0 0.25rem; font-size: 1.2rem; font-weight: 800; color: #1e293b; }
.qp-saved-text { margin: 0; color: #64748b; font-size: 0.9rem; }
.qp-saved-back { margin-top: 1.25rem; }

/* Export RGPD art. 20 */
.qp-export { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; text-align: center; }
.qp-export-help { margin: 0.35rem 0 0; font-size: 0.72rem; color: #94a3b8; line-height: 1.4; }

/* =====================================================================
   qp-* — politique de confidentialité (/confidentialite/{slug})
   ===================================================================== */
.qp-policy-section { margin-bottom: 1.5rem; }
.qp-policy-title { font-size: 1.05rem; font-weight: 700; color: #1e293b; margin: 0 0 0.5rem; }
.qp-policy-body { margin: 0; font-size: 0.9rem; color: #475569; line-height: 1.6; white-space: pre-line; }

@media print {
    button { display: none !important; }
    .qp-card { box-shadow: none !important; }
}

/* =====================================================================
   gd-* — annuaire des petits groupes (/groupes/{slug}) — accent orange
   ===================================================================== */
.gd-wrap { max-width: 960px; margin: 0 auto; padding: 32px 20px 64px; }
.gd-head { text-align: center; margin-bottom: 32px; }
.gd-head h1 { font-size: 26px; color: #0f172a; margin-bottom: 8px; }
.gd-head p { color: #64748b; font-size: 15px; }
.gd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.gd-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.gd-card h3 { font-size: 17px; color: #0f172a; margin-bottom: 8px; }
.gd-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.gd-badge { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.gd-badge--type { background: #fff7ed; color: #ea580c; }
.gd-badge--open { background: #f0fdf4; color: #16a34a; }
.gd-badge--full { background: #fef2f2; color: #dc2626; }
.gd-meta { color: #475569; font-size: 14px; line-height: 1.6; margin-bottom: 8px; }
.gd-meta .gd-ico { color: #94a3b8; margin-right: 4px; }
.gd-desc { color: #64748b; font-size: 14px; line-height: 1.5; margin-bottom: 14px; flex: 1; }
.gd-btn { display: inline-block; text-align: center; border: 0; cursor: pointer; font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 10px; transition: filter .15s; }
.gd-btn--primary { background: #ea580c; color: #fff; }
.gd-btn--primary:hover { filter: brightness(1.05); }
.gd-btn--primary:disabled { background: #cbd5e1; cursor: not-allowed; }
.gd-btn--ghost { background: #f1f5f9; color: #334155; }
.gd-empty { text-align: center; color: #94a3b8; padding: 48px; }
.gd-success { max-width: 520px; margin: 0 auto; background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; border-radius: 16px; padding: 24px; text-align: center; font-size: 15px; }
.gd-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.gd-modal { background: #fff; border-radius: 20px; padding: 28px; width: 100%; max-width: 440px; box-shadow: 0 20px 40px rgba(0,0,0,.2); }
.gd-modal h2 { font-size: 19px; color: #0f172a; margin-bottom: 4px; }
.gd-modal .gd-sub { color: #64748b; font-size: 14px; margin-bottom: 18px; }
.gd-identity { background: #eef2ff; border-radius: 10px; padding: 10px 14px; font-size: 14px; color: #334155; margin-bottom: 16px; }
.gd-field { margin-bottom: 14px; }
.gd-field label { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 5px; }
.gd-field input, .gd-field textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 10px; padding: 10px 12px; font-size: 14px; font-family: inherit; }
.gd-field input:focus, .gd-field textarea:focus { outline: 2px solid #fdba74; border-color: #ea580c; }
.gd-err { color: #dc2626; font-size: 12px; margin-top: 4px; }
.gd-actions { display: flex; gap: 10px; margin-top: 20px; }
.gd-actions .gd-btn { flex: 1; }

/* =====================================================================
   ev-* — inscription aux événements (/inscription/{slug}) — accent cyan
   ===================================================================== */
.ev-wrap { max-width: 560px; margin: 0 auto; padding: 32px 20px 64px; }
.ev-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 28px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.ev-title { font-size: 24px; color: #0f172a; margin-bottom: 12px; }
.ev-meta { color: #475569; font-size: 14px; line-height: 1.7; margin-bottom: 14px; }
.ev-meta .ev-ico { color: #0891b2; margin-right: 6px; }
.ev-price { display: inline-block; background: #ecfeff; color: #0891b2; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-bottom: 14px; }
.ev-desc { color: #64748b; font-size: 14px; line-height: 1.6; white-space: pre-line; margin-bottom: 20px; }
.ev-spots { color: #ea580c; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.ev-notice { background: #f1f5f9; color: #475569; border-radius: 12px; padding: 16px; text-align: center; font-size: 14px; margin-bottom: 16px; }
.ev-success { background: #ecfeff; border: 1px solid #a5f3fc; color: #0e7490; border-radius: 14px; padding: 20px; text-align: center; font-size: 15px; margin-bottom: 16px; }
.ev-field { margin-bottom: 14px; }
.ev-field label { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 5px; }
.ev-field input[type=text], .ev-field input[type=email], .ev-field textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 10px; padding: 10px 12px; font-size: 14px; font-family: inherit; }
.ev-field input:focus, .ev-field textarea:focus { outline: 2px solid #67e8f9; border-color: #0891b2; }
/* Types de champ additionnels du constructeur de formulaires (tel, nombre, date, liste). */
.ev-field input[type=tel], .ev-field input[type=number], .ev-field input[type=date], .ev-field select { width: 100%; border: 1px solid #cbd5e1; border-radius: 10px; padding: 10px 12px; font-size: 14px; font-family: inherit; background: #fff; }
.ev-field select:focus { outline: 2px solid #67e8f9; border-color: #0891b2; }
.ev-success-ico { width: 20px; height: 20px; display: inline-block; vertical-align: middle; margin-right: 6px; }
.ev-subheading { font-size: 17px; color: #0f172a; margin: 20px 0 12px; }
.ev-help { color: #64748b; font-size: 13px; margin: 4px 0 0; }
.ev-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #334155; }
.ev-total { font-size: 15px; color: #0f172a; margin: 10px 0 4px; }
.ev-req { color: #dc2626; }
.ev-err { color: #dc2626; font-size: 12px; margin-top: 4px; }
.ev-btn { width: 100%; border: 0; cursor: pointer; font-size: 15px; font-weight: 600; padding: 12px 16px; border-radius: 10px; background: #0891b2; color: #fff; transition: filter .15s; margin-top: 6px; }
.ev-btn:hover { filter: brightness(1.05); }
.ev-btn:disabled { background: #cbd5e1; cursor: not-allowed; }