/* ==========================================================================
   Kanisa — assets/css/app.css
   Feuille de base unique (aucun framework CSS).
   Système de design « Sovereign Sanctuary » (design/DESIGN.md fait foi).
   Sommaire :
     1.  Tokens de design (couleurs, rayons, ombres, typo)
     2.  Reset léger
     3.  Base & typographie
     4.  Primitives de mise en page (conteneur, section, skip-link)
     5.  Header public & navigation
     6.  Footer public & sélecteur de langue
     7.  Boutons
     8.  Cartes
     9.  Badges (pills avec point)
     10. Messages flash
     11. Formulaires
     12. Tables
     13. Page d'accueil (hero, cartes de présentation)
     14. Page de connexion
     15. Console admin (shell, sidebar, topbar, contenu)
     16. Pages d'erreur
     17. Responsive mobile (< 640px)
     18. Pages d'information publiques (tarifs, à propos, FAQ, contact,
         inscription, pages légales) + footer complet
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens de design — Sovereign Sanctuary
   -------------------------------------------------------------------------- */
:root {
    /* Couleurs de marque */
    --kanisa-navy: #0F172A;            /* Obsidian Navy — chrome, titres, états actifs */
    --kanisa-navy-hover: #1E293B;
    --kanisa-navy-deep: #131B2E;
    --kanisa-blue: #2563EB;            /* Trust Blue — actions, interactions */
    --kanisa-blue-ring: rgba(37, 99, 235, 0.12);
    --kanisa-secondary-container: #316BF3; /* hover du bouton secondaire */
    --kanisa-amber: #D97706;           /* Warm Amber — jalons spirituels, dons */
    --kanisa-amber-soft: #FEF3C7;
    --kanisa-amber-border: #FDE68A;
    --kanisa-amber-text: #92400E;      /* marge AA sur fond ambre clair (m8) */

    /* Neutres */
    --kanisa-canvas: #F8FAFC;          /* fond général */
    --kanisa-surface: #FFFFFF;         /* cartes, modales */
    --kanisa-border: #E2E8F0;          /* bordures structurelles */
    --kanisa-border-strong: #CBD5E1;   /* bordures d'inputs */
    --kanisa-divider: #F1F5F9;         /* séparateurs de lignes */
    --kanisa-slate-400: #94A3B8;       /* texte discret sur fond navy (STABLE) */
    --kanisa-slate-500: #64748B;       /* alias : légendes (var fallback historiques) */
    --kanisa-slate-700: #334155;       /* alias : corps secondaire */
    --kanisa-secondary: #2563EB;       /* alias Trust Blue (textes-liens) */
    --kanisa-secondary-bg: #2563EB;      /* fonds secondaires pleins — STABLE dans les deux thèmes */
    --kanisa-link: #2563EB;              /* liens (M1) */
    --kanisa-on-primary-inverse: #FFFFFF; /* texte du bouton primary (clair) */
    --kanisa-border-input: #CBD5E1;    /* alias bordures d'inputs */
    --kanisa-surface-container: #E5EEFF;      /* surfaces teintées bleu clair */
    --kanisa-surface-container-high: #DCE9FF;

    /* Actions & états survolés */
    --kanisa-primary-action: #0F172A;       /* fond bouton primary */
    --kanisa-primary-action-hover: #1E293B;
    --kanisa-hover: #F1F5F9;                /* fond d'état survolé sur surface */

    /* Chrome navy (STABLE dans les deux thèmes : sidebar, hero, bannières,
       cartes vitrines restent navy en dark — textes et séparateurs dessus
       sont des constantes volontaires, pas des incohérences) */
    --kanisa-on-navy: #FFFFFF;              /* texte/blanc sur fonds saturés navy ou bleu */
    --kanisa-navy-text: #E2E8F0;            /* texte principal sur navy */
    --kanisa-navy-text-soft: #CBD5E1;       /* texte secondaire sur navy */
    --kanisa-navy-text-faint: #BEC6E0;      /* texte discret sur navy */
    --kanisa-navy-text-dim: #7C839B;        /* micro-labels sur navy */
    --kanisa-navy-border: #1E293B;          /* séparateurs internes du chrome */
    --kanisa-navy-gradient: #1E293B;        /* 2e arrêt des dégradés navy */
    --kanisa-navy-gradient-deep: #131B2E;   /* 1er arrêt des dégradés navy */
    --kanisa-navy-hover-bg: rgba(255, 255, 255, 0.08);
    --kanisa-navy-chip: rgba(255, 255, 255, 0.10);
    --kanisa-navy-chip-strong: rgba(255, 255, 255, 0.16);
    --kanisa-navy-icon: rgba(255, 255, 255, 0.25);
    --kanisa-navy-line: rgba(248, 250, 252, 0.4);
    --kanisa-navy-line-strong: rgba(248, 250, 252, 0.8);
    --kanisa-navy-tag-bg: rgba(148, 163, 184, 0.15);
    --kanisa-navy-divider: rgba(148, 163, 184, 0.2);
    --kanisa-logo-pill: rgba(255, 255, 255, 0.95); /* pastille porte-logo (STABLE : lisibilité des logos) */
    --kanisa-glow-blue: rgba(37, 99, 235, 0.15);   /* halos décoratifs sur navy (STABLE) */
    --kanisa-glow-amber: rgba(217, 119, 6, 0.10);

    /* Rose (mini-stat prières urgentes) */
    --kanisa-pink-surface: #FCE7F3;
    --kanisa-pink-text: #9D174D;

    /* Espacements & rayons complémentaires (var(--x, fallback) existants) */
    --space-3xs: 2px;
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --radius-base: 8px;
    --radius-xs: 4px;
    --font-size-xl: 24px;

    /* Hiérarchie de texte */
    --kanisa-text: #0F172A;            /* titres, contraste élevé */
    --kanisa-text-body: #334155;       /* corps */
    --kanisa-text-muted: #64748B;      /* légendes, placeholders */

    /* Signaux sémantiques (texte / surface / bordure) */
    --kanisa-success: #059669;
    --kanisa-success-surface: #ECFDF5;
    --kanisa-success-text: #065F46;
    --kanisa-success-border: #A7F3D0;
    --kanisa-warning: #D97706;
    --kanisa-warning-surface: #FFFBEB;
    --kanisa-warning-text: #92400E;
    --kanisa-info: #2563EB;
    --kanisa-info-surface: #EFF6FF;
    --kanisa-info-text: #1E40AF;
    --kanisa-danger: #DC2626;
    --kanisa-danger-surface: #FEF2F2;
    --kanisa-danger-text: #991B1B;
    --kanisa-danger-border: #FECACA;

    /* Rayons (8 / 12 / 16 px, pills complets) */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Élévations tonales (3 niveaux, opacités très basses) */
    --shadow-1: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.02);
    --shadow-2: 0 10px 15px -3px rgba(15, 23, 42, 0.06), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
    --shadow-3: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.05);

    /* Typographie */
    --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Rythme 8px */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;

    /* Structure */
    --container-max: 84rem;
    --sidebar-width: 260px;
}

/* --------------------------------------------------------------------------
   2. Reset léger
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

ul[role="list"],
ol[role="list"] {
    list-style: none;
    padding: 0;
}

/* --------------------------------------------------------------------------
   3. Base & typographie (Plus Jakarta Sans, échelle Sovereign Sanctuary)
   -------------------------------------------------------------------------- */
body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 26px;
    color: var(--kanisa-text-body);
    background-color: var(--kanisa-canvas);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    color: var(--kanisa-text);
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: break-word;
}

h1 {
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.025em;
    font-weight: 700;
}

h2 {
    font-size: 30px;
    line-height: 38px;
    letter-spacing: -0.02em;
}

h3 {
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.01em;
}

p {
    overflow-wrap: break-word;
}

a {
    color: var(--kanisa-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Chiffres tabulaires pour montants et métriques */
.num,
.tabular {
    font-variant-numeric: tabular-nums;
}

:focus-visible {
    outline: 2px solid var(--kanisa-blue);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Icônes Material Symbols Outlined (police chargée via Google Fonts dans les
   layouts — la classe de base suit la convention officielle). */
.material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   4. Primitives de mise en page
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-2);
}

@media (min-width: 640px) {
    .container {
        padding-inline: var(--space-3);
    }
}

.section {
    padding-block: var(--space-5) var(--space-5);
}

.section__title {
    font-size: 22px;
    line-height: 28px;
    letter-spacing: -0.015em;
}

.section__subtitle {
    margin-top: var(--space-1);
    color: var(--kanisa-text-muted);
    font-size: 14px;
    line-height: 22px;
}

/* Lien d'évitement (accessibilité clavier) */
.skip-link {
    position: absolute;
    top: var(--space-1);
    left: var(--space-1);
    z-index: 100;
    padding: var(--space-1) var(--space-2);
    background-color: var(--kanisa-primary-action);
    color: var(--kanisa-on-primary-inverse);
    border-radius: var(--radius-sm);
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: translateY(0);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   5. Header public & navigation
   -------------------------------------------------------------------------- */
.page--public {
    display: flex;
    flex-direction: column;
}

.site-header {
    background-color: var(--kanisa-surface);
    border-bottom: 1px solid var(--kanisa-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 64px;
}

.brand {
    color: var(--kanisa-text);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.brand:hover {
    text-decoration: none;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.site-nav__link {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--kanisa-text-body);
    font-size: 14px;
    font-weight: 600;
}

.site-nav__link:hover {
    background-color: var(--kanisa-hover);
    color: var(--kanisa-text);
    text-decoration: none;
}

.site-main {
    flex: 1;
    padding-block: var(--space-4);
}

/* --------------------------------------------------------------------------
   6. Footer public & sélecteur de langue
   -------------------------------------------------------------------------- */
.site-footer {
    border-top: 1px solid var(--kanisa-border);
    background-color: var(--kanisa-surface);
}

.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-block: var(--space-2);
}

.site-footer__legal {
    color: var(--kanisa-text-muted);
    font-size: 13px;
    line-height: 18px;
}

.locale-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.locale-switch a {
    padding: 2px 8px;
    border-radius: var(--radius-full);
    color: var(--kanisa-text-muted);
}

.locale-switch a:hover {
    background-color: var(--kanisa-hover);
    color: var(--kanisa-text);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   7. Boutons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: 40px;
    padding: 0 var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.btn:hover {
    text-decoration: none;
}

/* Primary — Obsidian Navy */
.btn--primary {
    background-color: var(--kanisa-primary-action);
    color: var(--kanisa-on-primary-inverse);
}

.btn--primary:hover {
    background-color: var(--kanisa-primary-action-hover);
    transform: translateY(-0.5px);
}

/* Secondary / Action — Trust Blue */
.btn--secondary {
    background-color: var(--kanisa-blue);
    color: var(--kanisa-on-navy);
}

.btn--secondary:hover {
    background-color: var(--kanisa-secondary-container);
    transform: translateY(-0.5px);
}

/* Warm — fond ambre doux (actions secondaires chaudes) */
.btn--warm {
    background-color: var(--kanisa-amber-soft);
    color: var(--kanisa-amber-text);
    border-color: var(--kanisa-amber-border);
}

.btn--warm:hover {
    background-color: var(--kanisa-amber-border);
}

/* Ghost */
.btn--ghost {
    background-color: transparent;
    color: var(--kanisa-text-body);
}

.btn--ghost:hover {
    background-color: var(--kanisa-hover);
    color: var(--kanisa-text);
}

/* Ghost en forme de lien (ex. : logout inline dans la nav, sans chrome de bouton). */
.btn--link {
    background-color: transparent;
    color: var(--kanisa-link);
}

.btn--link:hover {
    background-color: transparent;
    text-decoration: underline;
}

.btn--sm {
    min-height: 32px;
    padding: 0 12px;
    font-size: 13px;
}

.btn--block {
    width: 100%;
}

.btn:focus-visible {
    outline: 2px solid var(--kanisa-blue);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   8. Cartes (niveau d'élévation 1)
   -------------------------------------------------------------------------- */
.card {
    background-color: var(--kanisa-surface);
    border: 1px solid var(--kanisa-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    padding: var(--space-3, 24px);
    margin-bottom: var(--space-md, 16px);
}

.card__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
}

.card__title {
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.005em;
    font-weight: 600;
    color: var(--kanisa-text);
    margin: 0 0 var(--space-sm, 12px) 0;
}

.card__text {
    margin-top: var(--space-1);
    color: var(--kanisa-text-muted);
    font-size: 14px;
    line-height: 22px;
}

/* Carte de présentation avec liseré coloré (accueil) */
.card--feature {
    display: flex;
    overflow: hidden;
}

.card__accent {
    flex: 0 0 4px;
}

.card__accent--blue {
    background-color: var(--kanisa-blue);
}

.card__accent--amber {
    background-color: var(--kanisa-amber);
}

.card--feature .card__body {
    padding: var(--space-3);
}

/* Carte fantôme : module non développé */
.card--ghost {
    padding: var(--space-3);
}

.card--ghost .card__title {
    color: var(--kanisa-text-muted);
}

.card--ghost .card__text {
    min-height: 44px;
}

.card--ghost .badge {
    margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   9. Badges (pills avec point coloré)
   -------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

/* Le point porte la couleur pleine de la variante (pas la couleur de texte). */
.badge--success .badge__dot {
    background-color: var(--kanisa-success);
}

.badge--warning .badge__dot {
    background-color: var(--kanisa-warning);
}

.badge--error .badge__dot {
    background-color: var(--kanisa-danger);
}

.badge--info .badge__dot {
    background-color: var(--kanisa-info);
}

.badge--pending .badge__dot {
    background-color: var(--kanisa-warning);
}

.badge--success {
    background-color: var(--kanisa-success-surface);
    color: var(--kanisa-success-text);
}

.badge--warning {
    background-color: var(--kanisa-amber-soft);
    color: var(--kanisa-amber-text);
}

.badge--error {
    background-color: var(--kanisa-danger-surface);
    color: var(--kanisa-danger-text);
}

.badge--info {
    background-color: var(--kanisa-info-surface);
    color: var(--kanisa-info-text);
}

/* Statut « en attente » — surfaces warning */
.badge--pending {
    background-color: var(--kanisa-warning-surface);
    color: var(--kanisa-warning-text);
}

/* --------------------------------------------------------------------------
   10. Messages flash
   -------------------------------------------------------------------------- */
.flash-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.flash {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 12px var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 20px;
}

.flash__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background-color: currentColor;
    flex-shrink: 0;
}

.flash__message {
    flex: 1;
    font-weight: 500;
}

.flash__close {
    border: 0;
    background-color: transparent;
    color: inherit;
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: 0.7;
}

.flash__close:hover {
    opacity: 1;
    background-color: var(--kanisa-hover);
}

.flash--success {
    background-color: var(--kanisa-success-surface);
    border-color: var(--kanisa-success-border);
    color: var(--kanisa-success-text);
}

.flash--error {
    background-color: var(--kanisa-danger-surface);
    border-color: var(--kanisa-danger-border);
    color: var(--kanisa-danger-text);
}

/* --------------------------------------------------------------------------
   11. Formulaires (inputs 40px, focus ring bleu)
   -------------------------------------------------------------------------- */
.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field__label {
    color: var(--kanisa-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.02em;
}

.field__input {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    background-color: var(--kanisa-surface);
    border: 1px solid var(--kanisa-border-strong);
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 20px;
    color: var(--kanisa-text);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.field__input::placeholder {
    color: var(--kanisa-text-muted);
}

.field__input:focus {
    outline: none;
    border-color: var(--kanisa-blue);
    box-shadow: 0 0 0 3px var(--kanisa-blue-ring);
}

.field__error {
    color: var(--kanisa-danger-text);
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
}

/* Formulaire inline (ex. : bouton de déconnexion dans la barre de navigation). */
.inline-form {
    display: inline;
}

/* --------------------------------------------------------------------------
   12. Tables
   -------------------------------------------------------------------------- */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--kanisa-border);
    border-radius: var(--radius-md);
    background-color: var(--kanisa-surface);
    box-shadow: var(--shadow-1);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 22px;
}

.table th {
    background-color: var(--kanisa-canvas);
    color: var(--kanisa-text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    padding: 10px var(--space-2);
    border-bottom: 1px solid var(--kanisa-border);
    white-space: nowrap;
}

.table td {
    padding: 12px var(--space-2);
    border-bottom: 1px solid var(--kanisa-divider);
    color: var(--kanisa-text-body);
    vertical-align: middle;
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table tbody tr {
    transition: background-color 150ms ease;
}

.table tbody tr:hover {
    background-color: var(--kanisa-hover);
}

/* --------------------------------------------------------------------------
   13. Page d'accueil — hero (bandeau navy + liseré ambre) et cartes
   -------------------------------------------------------------------------- */
.hero {
    background: linear-gradient(135deg, var(--kanisa-navy) 0%, var(--kanisa-navy-hover) 100%);
    border-top: 2px solid var(--kanisa-amber);
    color: var(--kanisa-on-navy);
}

.hero__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--space-5) var(--space-2) var(--space-4);
}

@media (min-width: 640px) {
    .hero__inner {
        padding-inline: var(--space-3);
    }
}

.hero__eyebrow {
    display: inline-block;
    padding: 4px 12px;
    background-color: var(--kanisa-amber-soft);
    color: var(--kanisa-amber-text);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero__title {
    margin-top: var(--space-2);
    color: var(--kanisa-on-navy);
    max-width: 22ch;
}

.hero__lead {
    margin-top: var(--space-2);
    max-width: 60ch;
    color: var(--kanisa-navy-text);
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
}

.hero__intro {
    margin-top: var(--space-1);
    max-width: 60ch;
    color: var(--kanisa-slate-400);
    font-size: 15px;
    line-height: 24px;
}

.hero__actions {
    margin-top: var(--space-3);
}

/* Focus ring blanc sur fond navy : le bleu par défaut manque de contraste. */
.hero :focus-visible,
.sidebar :focus-visible,
.hero-banner :focus-visible,
.portal-hero :focus-visible,
.vitrine-card :focus-visible,
.portal-cta :focus-visible {
    outline-color: var(--kanisa-on-navy);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.card-grid--ghost {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   14. Page de connexion
   -------------------------------------------------------------------------- */
.auth-section {
    display: flex;
    justify-content: center;
    padding-block: var(--space-4);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    padding: var(--space-4);
}

/* Variante centrée autonome (page hors .auth-section, ex. : mot de passe oublié). */
.auth-card--centered {
    max-width: 420px;
    margin-inline: auto;
}

.auth-card__title {
    font-size: 22px;
    line-height: 28px;
    letter-spacing: -0.015em;
}

.auth-card__note {
    margin-top: 6px;
    padding: 8px 12px;
    background-color: var(--kanisa-info-surface);
    border-radius: var(--radius-sm);
    color: var(--kanisa-info-text);
    font-size: 13px;
    line-height: 18px;
}

.auth-card .form {
    margin-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   15. Console admin — shell, sidebar (260px, navy), topbar
   -------------------------------------------------------------------------- */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    inset-block: 0;
    left: 0;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    background-color: var(--kanisa-navy);
    color: var(--kanisa-navy-text);
    overflow-y: auto;
}

.sidebar__brand {
    padding: var(--space-3) var(--space-2);
    border-bottom: 2px solid var(--kanisa-amber); /* liseré liturgique */
}

.sidebar__logo {
    color: var(--kanisa-on-navy);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sidebar__logo:hover {
    text-decoration: none;
}

.sidebar__subtitle {
    margin-top: 2px;
    color: var(--kanisa-slate-400);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.02em;
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2);
    flex: 1;
}

.side-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--kanisa-navy-text-soft);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.side-link--active,
a.side-link:hover {
    background-color: var(--kanisa-navy-hover-bg);
    color: var(--kanisa-on-navy);
    text-decoration: none;
}

.side-link--active {
    background-color: var(--kanisa-navy-hover);
    box-shadow: inset 3px 0 0 var(--kanisa-blue);
    font-weight: 600;
}

.side-link--disabled {
    color: var(--kanisa-slate-400); /* STABLE : texte discret sur chrome navy */
    cursor: not-allowed;
    font-size: 14px;
}

/* Libellé + icône Material Symbol (l'icône est fournie par la vue) */
.side-link__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.side-link__tag {
    padding: 2px 8px;
    background-color: var(--kanisa-navy-tag-bg);
    border-radius: var(--radius-full);
    color: var(--kanisa-slate-400);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sidebar__foot {
    padding: var(--space-2);
    border-top: 1px solid var(--kanisa-navy-divider);
}

.sidebar__foot-label {
    color: var(--kanisa-text-muted);
    font-size: 11px;
    line-height: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
}

.app-main {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--kanisa-surface);
    border-bottom: 1px solid var(--kanisa-border);
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 60px;
    padding-inline: var(--space-3);
}

.topbar__context {
    color: var(--kanisa-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.app-content {
    flex: 1;
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto; /* centrage sur écrans larges */
    padding: var(--space-3) var(--space-2) var(--space-5);
}

@media (min-width: 640px) {
    .app-content {
        padding-inline: var(--space-3);
    }
}

/* En-tête de page + encart d'information */
.page-head {
    margin-bottom: var(--space-2);
}

.page-head__title {
    font-size: 30px;
    line-height: 38px;
    letter-spacing: -0.02em;
}

.banner-card {
    display: flex;
    overflow: hidden;
}

.banner-card__accent {
    flex: 0 0 4px;
    background-color: var(--kanisa-amber);
}

.banner-card__body {
    padding: var(--space-3);
}

.banner-card__text {
    color: var(--kanisa-text-body);
    font-size: 15px;
    line-height: 24px;
    max-width: 80ch;
}

/* --------------------------------------------------------------------------
   16. Pages d'erreur
   -------------------------------------------------------------------------- */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
    padding-block: var(--space-5);
}

.error-page__code {
    color: var(--kanisa-blue);
    font-size: 72px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}

.error-page__title {
    font-size: 22px;
    line-height: 28px;
    letter-spacing: -0.015em;
    max-width: 40ch;
}

/* --------------------------------------------------------------------------
   17. Responsive mobile (< 640px) — sidebar masquée, colonnes empilées
   -------------------------------------------------------------------------- */
@media (max-width: 639.98px) {
    h1 {
        font-size: 24px;
        line-height: 32px;
        letter-spacing: -0.015em;
    }

    h2 {
        font-size: 20px;
        line-height: 26px;
    }

    .hero__inner {
        padding-block: var(--space-4) var(--space-4);
    }

    .hero__lead {
        font-size: 16px;
        line-height: 24px;
    }

    .card-grid,
    .card-grid--ghost {
        grid-template-columns: 1fr;
    }

    /* Sidebar admin masquée : la navigation mobile dédiée arrive avec les
       vraies interfaces (P9) — la démo Phase 3 reste consultable sur desktop. */
    .sidebar {
        display: none;
    }

    .app-main {
        margin-left: 0;
    }

    .site-header__inner {
        flex-direction: column;
        align-items: flex-start;
        padding-block: var(--space-2);
    }

    .site-footer__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .field__input,
    .btn {
        min-height: 44px; /* cibles tactiles mobiles */
    }

    .error-page__code {
        font-size: 56px;
    }
}

/* ==========================================================================
   Phase 7 - Administration plateforme (ajouts mesurés, tokens existants)
   ========================================================================== */

.page-title {
    font-size: var(--font-size-xl, 24px);
    font-weight: 700;
    color: var(--kanisa-text);
    margin-bottom: var(--space-4, 32px);
    display: flex;
    align-items: center;
    gap: var(--space-sm, 12px);
    flex-wrap: wrap;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--kanisa-text);
    margin-top: var(--space-4, 32px);
    margin-bottom: var(--space-md, 16px);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-md, 16px);
    margin-bottom: var(--space-md, 16px);
}

.stat-card__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kanisa-slate-500);
    margin-bottom: var(--space-xs, 8px);
}

.stat-card__value {
    font-size: 28px;
    font-weight: 700;
    color: var(--kanisa-text);
    font-variant-numeric: tabular-nums;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm, 12px);
    align-items: center;
    margin-bottom: var(--space-md, 16px);
}

.filter-bar input,
.filter-bar select {
    height: 40px;
    border: 1px solid var(--kanisa-border-input);
    border-radius: var(--radius-base, 8px);
    padding: 0 var(--space-sm, 12px);
    background: var(--kanisa-surface);
}

.table-actions {
    text-align: right;
    white-space: nowrap;
}

.definition-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-xs, 8px) var(--space-md, 16px);
    margin: 0;
}

.definition-list dt {
    font-weight: 600;
    color: var(--kanisa-slate-500);
    font-size: 13px;
}

.definition-list dd {
    margin: 0;
    color: var(--kanisa-slate-700);
}

.plan-card {
    margin-bottom: var(--space-md, 16px);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-md, 16px);
    margin-top: var(--space-md, 16px);
}

.pagination {
    display: flex;
    align-items: center;
    gap: var(--space-md, 16px);
    margin-top: var(--space-md, 16px);
}

.pagination__info {
    color: var(--kanisa-slate-500);
    font-size: 13px;
}

.field__checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-xs, 8px);
    font-size: 13px;
    font-weight: 400;
}

/* ==========================================================================
   Redesign maquettes (2026-09-12) — bannières, bento, splits, tableaux riches
   ========================================================================== */

/* Bannière sombre (super admin / pastorale) — maquettes supervision + dashboard */
.hero-banner {
    background: linear-gradient(135deg, var(--kanisa-navy) 0%, var(--kanisa-navy-gradient) 100%);
    border-top: 2px solid var(--kanisa-amber);
    border-radius: var(--radius-lg, 16px);
    color: var(--kanisa-on-navy);
    padding: var(--space-3, 24px);
    margin-bottom: var(--space-3, 24px);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3, 24px);
    flex-wrap: wrap;
}
.hero-banner__kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kanisa-slate-400);
    display: flex;
    align-items: center;
    gap: var(--space-xs, 8px);
    margin-bottom: var(--space-xs, 8px);
}
.hero-banner h1 {
    color: var(--kanisa-on-navy);
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 var(--space-xs, 8px) 0;
}

.hero-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs, 8px);
    margin-top: var(--space-md, 16px);
}

.hero-banner__side .hero-banner__kicker {
    justify-content: flex-end;
}
.hero-banner__text {
    color: var(--kanisa-navy-text-soft);
    font-size: 14px;
    max-width: 620px;
}
.hero-banner__quote {
    border-left: 3px solid var(--kanisa-amber);
    padding-left: var(--space-2, 16px);
    color: var(--kanisa-navy-text);
    font-style: italic;
    margin-top: var(--space-2, 16px);
}
.hero-banner__actions {
    display: flex;
    gap: var(--space-xs, 8px);
    flex-wrap: wrap;
    align-items: center;
}
.hero-banner__side {
    text-align: right;
    max-width: 340px;
}

/* Pilule avec point pulsant (maquettes : statut live, paroisse active) */
.pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: currentColor;
    animation: kanisa-pulse 2s ease-in-out infinite;
}
.pulse-dot--green { color: var(--kanisa-success); }
.pulse-dot--blue { color: var(--kanisa-blue); }
.pulse-dot--red { color: var(--kanisa-danger); }
.pulse-dot--amber { color: var(--kanisa-amber); }
@keyframes kanisa-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* Bento : grille de stat cards avec pieds (maquette) */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-md, 16px);
    margin-bottom: var(--space-3, 24px);
}
.stat-card__foot {
    display: flex;
    justify-content: space-between;
    gap: var(--space-xs, 8px);
    font-size: 12px;
    color: var(--kanisa-slate-500);
    margin-top: var(--space-sm, 12px);
}
.stat-card__sub {
    font-size: 13px;
    color: var(--kanisa-slate-500);
    margin-top: var(--space-2xs, 4px);
}

/* Split grids 7/5 et 8/4 (maquettes dashboard église et supervision) */
.split-grid { display: grid; gap: var(--space-md, 16px); margin-bottom: var(--space-3, 24px); }
.split-grid--75 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split-grid--84 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
@media (max-width: 1023.98px) {
    .split-grid--75, .split-grid--84 { grid-template-columns: 1fr; }
}

/* Barre de progression (maquette : MRR, hubs, jauge temple) */
.progress-bar {
    height: 8px;
    border-radius: 9999px;
    background: var(--kanisa-surface-container);
    overflow: hidden;
    margin-top: var(--space-xs, 8px);
}
.progress-bar__fill {
    height: 100%;
    border-radius: 9999px;
    background: var(--kanisa-secondary);
}
.progress-bar__fill--amber { background: var(--kanisa-amber); }
.progress-bar__fill--green { background: var(--kanisa-success); }

/* Mini-cases de statut (maquette intercession) */
.mini-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xs, 8px); margin-top: var(--space-sm, 12px); }
.mini-stat {
    border-radius: var(--radius-base, 8px);
    padding: var(--space-xs, 8px);
    font-size: 12px;
    text-align: center;
    font-weight: 600;
}
.mini-stat--pink { background: var(--kanisa-pink-surface); color: var(--kanisa-pink-text); }
.mini-stat--amber { background: var(--kanisa-warning-surface); color: var(--kanisa-warning-text); }
.mini-stat--blue { background: var(--kanisa-info-surface); color: var(--kanisa-info-text); }

/* Carte d'événement avec liseré gauche (maquette agenda liturgique) */
.event-card {
    display: flex;
    gap: var(--space-md, 16px);
    padding: var(--space-md, 16px);
    border: 1px solid var(--kanisa-border);
    border-left-width: 4px;
    border-radius: var(--radius-md, 12px);
    background: var(--kanisa-surface);
    margin-bottom: var(--space-sm, 12px);
}
.event-card--blue { border-left-color: var(--kanisa-secondary); }
.event-card--amber { border-left-color: var(--kanisa-amber); }
.event-card--dark { border-left-color: var(--kanisa-text); }
.event-card__day { font-weight: 700; color: var(--kanisa-text); min-width: 110px; }
.event-card__time { color: var(--kanisa-slate-500); font-size: 12px; }
.event-card__title { font-weight: 600; color: var(--kanisa-text); }
.event-card__desc { font-size: 13px; color: var(--kanisa-slate-500); margin-top: 2px; }
.event-card__foot { font-size: 12px; color: var(--kanisa-slate-500); margin-top: 6px; }

/* Carte vitrine (maquette) */
.vitrine-card {
    background: linear-gradient(135deg, var(--kanisa-navy) 0%, var(--kanisa-navy-gradient) 100%);
    border-radius: var(--radius-lg, 16px);
    color: var(--kanisa-on-navy);
    padding: var(--space-3, 24px);
}
.vitrine-card h3 { color: var(--kanisa-on-navy); margin: var(--space-xs, 8px) 0; }
.vitrine-card__domain { font-size: 13px; color: var(--kanisa-navy-text-dim); }
.vitrine-card__metrics {
    display: flex;
    justify-content: space-between;
    gap: var(--space-xs, 8px);
    margin: var(--space-md, 16px) 0;
    flex-wrap: wrap;
}
.vitrine-card__metric { text-align: center; }
.vitrine-card__metric strong { display: block; font-size: 18px; color: var(--kanisa-on-navy); font-variant-numeric: tabular-nums; }
.vitrine-card__metric span { font-size: 11px; color: var(--kanisa-slate-400); }

/* Dashboard réel — valeur « titre » (prochain rendez-vous) dans une stat card */
.stat-card__value--title {
    font-size: 18px;
    line-height: 26px;
    font-variant-numeric: initial;
}

/* Lien « Voir ma vitrine » sur la carte sombre */
.vitrine-card__link {
    margin-top: var(--space-md, 16px);
    color: var(--kanisa-on-navy);
    border-color: var(--kanisa-navy-line);
}

.vitrine-card__link:hover {
    color: var(--kanisa-on-navy);
    border-color: var(--kanisa-navy-line-strong);
}

/* Liste de programmes du calendrier (dashboard) */
.dashboard-list {
    list-style: none;
    margin: var(--space-sm, 12px) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 8px);
}

.dashboard-list li {
    display: flex;
    align-items: center;
    gap: var(--space-xs, 8px);
    color: var(--kanisa-text-body);
    font-size: 14px;
    line-height: 20px;
}

/* Cartes d'accès rapide du dashboard plateforme (liens pleine carte) */
.admin-quick {
    display: flex;
    gap: var(--space-sm, 12px);
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.admin-quick:hover {
    border-color: var(--kanisa-blue);
    box-shadow: var(--shadow-1);
}

.admin-quick__icon {
    flex-shrink: 0;
    font-size: 28px;
    color: var(--kanisa-blue);
}

/* Carte de plan mise en avant (maquette matrice) */
.plan-card--featured {
    border: 2px solid var(--kanisa-secondary);
    position: relative;
}
.plan-card__flag {
    position: absolute;
    top: -12px;
    right: 16px;
    background: var(--kanisa-secondary-bg);
    color: var(--kanisa-on-navy);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 9999px;
}
.plan-card__price { font-size: 22px; font-weight: 700; color: var(--kanisa-text); }
.plan-feature { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 4px 0; color: var(--kanisa-slate-700); }
.plan-feature--off { color: var(--kanisa-text-muted); text-decoration: line-through; }

/* Bloc licence cloud de la sidebar (maquette) */
.sidebar__license {
    margin-top: auto;
    padding: var(--space-2, 16px);
    border-top: 1px solid var(--kanisa-navy-border);
    font-size: 11px;
    color: var(--kanisa-slate-400);
    display: flex;
    align-items: center;
    gap: 8px;
}
.sidebar__license strong { color: var(--kanisa-navy-text); display: block; }

/* Sélecteur de paroisse dans la sidebar (maquette) */
.sidebar__parish {
    padding: var(--space-2, 16px);
    border-bottom: 1px solid var(--kanisa-navy-border);
    color: var(--kanisa-navy-text);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
}
.sidebar__parish small { display: block; color: var(--kanisa-navy-text-dim); font-size: 10px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; }

/* ==========================================================================
   Harmonisation formulaires & topbar (2026-09-13)
   Les vues P7-P10 utilisent <label>/<input>/<select> NUS dans .field :
   on applique ici le même style que .field__label/.field__input partout.
   ========================================================================== */

/* Labels nus dans .field (équivalents .field__label) */
.field label {
    color: var(--kanisa-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.02em;
    display: block;
}

/* Champs nus dans .field (équivalents .field__input : 40px, bordure, focus ring) */
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field select,
.field textarea {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--kanisa-border-strong);
    border-radius: var(--radius-base, 8px);
    background: var(--kanisa-surface);
    font-size: 14px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--kanisa-secondary);
    box-shadow: 0 0 0 3px var(--kanisa-blue-ring);
}

.field textarea {
    min-height: 90px;
    resize: vertical;
}

.field__checkbox input {
    width: auto;
    min-height: auto;
}

/* Formulaires inline de la topbar (logout, exit, switch) */
.logout-form {
    display: inline;
    margin: 0;
}

/* Inputs inline dans les actions de table (rejet d'un paiement) */
.table-actions input[type="text"] {
    min-height: 36px;
    padding: 4px 8px;
    border: 1px solid var(--kanisa-border-strong);
    border-radius: var(--radius-base, 8px);
    margin-right: 6px;
}

.card .card {
    margin-bottom: 0;
}

/* Les formulaires en grille gardent un espacement propre */
.form-grid .field {
    margin-bottom: 0;
}

/* ==========================================================================
   Thème SOMBRE (2026-09-14) — surcharge des variables uniquement.
   Activation : <html data-theme="dark"> (bascule JS + localStorage +
   préférence système prefers-color-scheme au premier chargement).
   ========================================================================== */

[data-theme="dark"] {
    /* Neutres : surfaces sombres, bordures atténuées */
    --kanisa-canvas: #0B1120;           /* fond général (navy très profond) */
    --kanisa-surface: #111827;          /* cartes, tables, modales */
    --kanisa-border: #1F2937;           /* bordures structurelles */
    --kanisa-border-strong: #374151;    /* bordures d'inputs */
    --kanisa-divider: #1F2937;          /* séparateurs de lignes */

    /* Hiérarchie de texte : inversée pour contraste AA */
    --kanisa-text: #F1F5F9;             /* titres */
    --kanisa-text-body: #CBD5E1;        /* corps */
    --kanisa-text-muted: #94A3B8;       /* légendes */

    /* Signaux sémantiques : surfaces sombres + textes clairs (mêmes teintes) */
    --kanisa-success-text: #6EE7B7;
    --kanisa-success-surface: #052E1B;
    --kanisa-success-border: #065F46;
    --kanisa-warning-text: #FCD34D;
    --kanisa-warning-surface: #3B2F0A;
    --kanisa-info-text: #93C5FD;
    --kanisa-info-surface: #0C2549;
    --kanisa-info: #93C5FD; /* point du badge info (m9) */
    --kanisa-danger-text: #FCA5A5;
    --kanisa-danger-surface: #3F0D0D;
    --kanisa-danger-border: #7F1D1D;

    /* Élévations : ombres discrètes sur fond sombre */
    --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.35);
    --shadow-2: 0 10px 15px -3px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 20px 25px -5px rgba(0, 0, 0, 0.55);

    /* Le ring de focus bleu reste visible sur fond sombre */
    --kanisa-blue-ring: rgba(59, 130, 246, 0.25);

    /* Actions & hovers : le bouton primary devient bleu (le navy sur navy
       serait invisible) ; hover et alias secondaires éclaircis */
    --kanisa-primary-action: #E2E8F0;
    --kanisa-primary-action-hover: #CBD5E1;
    --kanisa-hover: #1F2937;
    --kanisa-secondary: #3B82F6;
    --kanisa-link: #60A5FA;
    --kanisa-on-primary-inverse: #0F172A;

    /* Alias neutres & surfaces teintées */
    --kanisa-border-input: #374151;
    --kanisa-slate-500: #94A3B8;
    --kanisa-slate-700: #CBD5E1;
    --kanisa-surface-container: #1E293B;
    --kanisa-surface-container-high: #243044;

    /* Ambre : jalons spirituels & dons (surfaces sombres, mêmes teintes) */
    --kanisa-amber-soft: #42320B;
    --kanisa-amber-text: #FCD34D;
    --kanisa-amber-border: #92400E;

    /* Rose (mini-stat prières urgentes) */
    --kanisa-pink-surface: #4A0D2E;
    --kanisa-pink-text: #F9A8D4;

    /* Le fond du body suit la variable canvas (déjà le cas) — rappel */
    color-scheme: dark;
}

/* Transitions douces lors du basculement de thème */
body, .card, .table, .sidebar, .topbar, .hero-banner, .vitrine-card,
.btn, .badge, .flash, .field__input,
input, select, textarea {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Le bouton de bascule de thème */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.theme-toggle .material-symbols-outlined {
    font-size: 20px;
}

.theme-toggle:hover {
    color: var(--kanisa-blue);
    background-color: var(--kanisa-hover);
    border-radius: var(--radius-sm);
}

/* Utilitaires « texte sur chrome navy » (vues qui posent un texte sur une
   bannière/CTA navy — constantes STABLE des deux thèmes, cf. tokens) */
.text-on-navy {
    color: var(--kanisa-navy-text-faint);
}

.text-on-navy-strong {
    color: var(--kanisa-on-navy);
}

/* Lien de retour dans la bannière navy (page publique d'église) */
.hero-banner__kicker a {
    color: var(--kanisa-slate-400);
    text-decoration: none;
}

.hero-banner__kicker a:hover {
    color: var(--kanisa-on-navy);
    text-decoration: underline;
}

/* ==========================================================================
   Matrice des plans (maquette abonnements) — toggle mensuel/annuel
   ========================================================================== */

.billing-toggle {
    display: inline-flex;
    background: var(--kanisa-surface-container);
    border-radius: 9999px;
    padding: 4px;
    gap: 4px;
    margin-bottom: var(--space-md, 16px);
}
.billing-toggle__btn {
    border: none;
    background: transparent;
    padding: 8px 20px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--kanisa-text-muted);
}
.billing-toggle__btn--active {
    background: var(--kanisa-surface);
    color: var(--kanisa-text);
    box-shadow: var(--shadow-1);
}

.billing-toggle__btn:hover {
    color: var(--kanisa-text);
}

.plan-price { display: none; }
.plan-price--visible { display: block; }

.plan-card__badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 9999px;
    background: var(--kanisa-surface-container-high);
    color: var(--kanisa-text-body);
    margin-bottom: var(--space-xs, 8px);
}
.plan-card__badge--amber { background: var(--kanisa-amber-soft); color: var(--kanisa-amber-text); }

/* ==========================================================================
   Portail public — maquette annuaire (2026-09-14)
   ========================================================================== */

/* Hero avec halos (maquette) */
.portal-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--kanisa-navy-gradient-deep) 0%, var(--kanisa-navy) 100%);
    color: var(--kanisa-on-navy);
    text-align: center;
    padding: var(--space-3xl, 64px) var(--space-2, 16px);
}
.portal-hero__halo {
    position: absolute;
    border-radius: 9999px;
    filter: blur(64px);
    pointer-events: none;
}
.portal-hero__halo--1 { top: -96px; right: -96px; width: 384px; height: 384px; background: var(--kanisa-glow-blue); }
.portal-hero__halo--2 { top: 50%; left: 40px; width: 288px; height: 288px; background: var(--kanisa-glow-amber); }
.portal-hero__inner { position: relative; max-width: var(--container-max, 84rem); margin: 0 auto; }
.portal-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 9999px;
    background: var(--kanisa-navy-chip);
    backdrop-filter: blur(8px);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kanisa-navy-text-faint);
    margin-bottom: var(--space-md, 16px);
}
.portal-hero h1 {
    font-size: 36px;
    line-height: 44px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--kanisa-on-navy);
    max-width: 56rem;
    margin: 0 auto var(--space-sm, 12px);
}
.portal-hero > .portal-hero__inner > p {
    font-size: 16px;
    line-height: 26px;
    color: var(--kanisa-navy-text-faint);
    max-width: 48rem;
    margin: 0 auto var(--space-xl, 32px);
}

/* Carte de recherche (maquette) */
.portal-search {
    display: flex;
    gap: var(--space-xs, 8px);
    max-width: 48rem;
    margin: 0 auto;
    background: var(--kanisa-surface);
    border-radius: var(--radius-md, 12px);
    padding: var(--space-md, 16px);
    box-shadow: var(--shadow-3);
    text-align: left;
}
.portal-search__field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-xs, 8px);
    background: var(--kanisa-canvas);
    border-radius: var(--radius-base, 8px);
    padding: 0 var(--space-sm, 12px);
    min-height: 48px;
}
.portal-search__field .material-symbols-outlined { color: var(--kanisa-text-muted); font-size: 20px; }
.portal-search__field input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--kanisa-text);
    outline: none;
}
.portal-hero__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs, 8px);
    margin-top: var(--space-md, 16px);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kanisa-slate-400);
}
.portal-hero__tag {
    padding: 4px 10px;
    border-radius: 9999px;
    background: var(--kanisa-navy-hover-bg);
    color: var(--kanisa-navy-text-faint);
    font-size: 12px;
    text-decoration: none;
}
.portal-hero__tag:hover { background: var(--kanisa-navy-chip-strong); color: var(--kanisa-on-navy); }

/* Barre compteur + grille */
.portal-directory {
    max-width: var(--container-max, 84rem);
    margin: 0 auto;
    padding: var(--space-2xl, 48px) var(--space-2, 16px);
}
.portal-directory__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md, 16px);
    margin-bottom: var(--space-lg, 24px);
    flex-wrap: wrap;
}
.portal-directory__counter {
    display: flex;
    align-items: center;
    gap: var(--space-xs, 8px);
    padding: var(--space-xs, 8px) var(--space-sm, 12px);
    background: var(--kanisa-surface-container);
    border-radius: var(--radius-base, 8px);
    font-size: 16px;
    font-weight: 700;
    color: var(--kanisa-text);
}

/* Grille de cartes d'églises (maquette) */
.church-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-lg, 24px);
}
.church-card {
    display: flex;
    flex-direction: column;
    background: var(--kanisa-surface);
    border: 1px solid var(--kanisa-border);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    transition: box-shadow 0.2s ease;
}
.church-card:hover { box-shadow: var(--shadow-3); }
.church-card__media {
    position: relative;
    height: 180px;
    overflow: hidden;
}
.church-card__media-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--kanisa-navy-gradient-deep) 0%, var(--kanisa-navy-gradient) 100%);
}
.church-card__media-placeholder .material-symbols-outlined { font-size: 56px; color: var(--kanisa-navy-icon); }
.church-card__badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.church-card__logo-pill {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-base, 8px);
    background: var(--kanisa-logo-pill);
    backdrop-filter: blur(8px);
    font-size: 11px;
    font-weight: 700;
    color: var(--kanisa-text);
}
.church-card__logo-pill .material-symbols-outlined { font-size: 18px; color: var(--kanisa-secondary); }
.church-card__body { padding: var(--space-lg, 24px); flex: 1; display: flex; flex-direction: column; }
.church-card__body h3 { font-size: 18px; font-weight: 700; color: var(--kanisa-text); margin: 0 0 4px; }
.church-card__location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--kanisa-text-muted);
    margin-bottom: var(--space-sm, 12px);
}
.church-card__location .material-symbols-outlined { font-size: 16px; color: var(--kanisa-secondary); }
.church-card__pastor {
    display: flex;
    align-items: center;
    gap: var(--space-xs, 8px);
    padding: var(--space-xs, 8px) var(--space-sm, 12px);
    background: var(--kanisa-canvas);
    border-radius: var(--radius-base, 8px);
    margin-bottom: var(--space-md, 16px);
}
.church-card__avatar {
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: var(--kanisa-surface-container);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--kanisa-text);
    flex-shrink: 0;
}
.church-card__pastor span { display: block; font-size: 11px; color: var(--kanisa-text-muted); }
.church-card__pastor strong { font-size: 14px; font-weight: 600; color: var(--kanisa-text); }
.church-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs, 8px);
    font-size: 13px;
    color: var(--kanisa-text-muted);
    margin-bottom: var(--space-md, 16px);
}
.church-card__stats span { display: flex; align-items: center; gap: 4px; }
.church-card__stats .material-symbols-outlined { font-size: 16px; }
.church-card__next {
    display: flex;
    gap: var(--space-xs, 8px);
    padding: var(--space-xs, 8px);
    background: var(--kanisa-canvas);
    border-radius: var(--radius-base, 8px);
    font-size: 13px;
    color: var(--kanisa-text-body);
    margin-top: auto;
}
.church-card__next .material-symbols-outlined { color: var(--kanisa-secondary-container); font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.church-card__next p { margin: 0; }
.church-card__actions {
    display: flex;
    gap: var(--space-xs, 8px);
    padding: var(--space-md, 16px) var(--space-lg, 24px);
    border-top: 1px solid var(--kanisa-border);
}
.church-card__actions .btn { flex: 1; justify-content: center; display: inline-flex; }

/* Section bénéfices (maquette) */
.portal-benefits { background: var(--kanisa-canvas); padding: var(--space-3xl, 64px) var(--space-2, 16px); }
.portal-benefits__head { text-align: center; max-width: 48rem; margin: 0 auto var(--space-2xl, 48px); }
.portal-benefits__head span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kanisa-secondary);
}
.portal-benefits__head h2 { font-size: 30px; font-weight: 700; color: var(--kanisa-text); margin: 8px 0; }
.portal-benefits__head p { color: var(--kanisa-text-muted); }
.portal-benefits__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-lg, 24px);
    max-width: var(--container-max, 84rem);
    margin: 0 auto;
}
.portal-benefit__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md, 12px);
    background: var(--kanisa-surface-container);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kanisa-secondary);
    margin-bottom: var(--space-sm, 12px);
}
.portal-benefit__icon .material-symbols-outlined { font-size: 28px; }
.portal-benefits h3 { font-size: 18px; font-weight: 700; color: var(--kanisa-text); margin-bottom: 8px; }

/* CTA pasteurs (maquette) */
.portal-cta {
    max-width: var(--container-max, 84rem);
    margin: var(--space-3xl, 64px) auto;
    padding: var(--space-2xl, 48px);
    border-radius: var(--radius-lg, 16px);
    background: linear-gradient(135deg, var(--kanisa-navy-gradient-deep) 0%, var(--kanisa-navy-gradient) 100%);
    color: var(--kanisa-on-navy);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl, 32px);
    flex-wrap: wrap;
}
.portal-cta span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kanisa-navy-text-faint);
}
.portal-cta h2 { font-size: 30px; font-weight: 700; margin: 8px 0; }
.portal-cta p { color: var(--kanisa-navy-text-faint); max-width: 40rem; }

/* Montants suggérés du widget don (maquette fiche paroissiale) */
.donation-quick-amounts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}
.donation-quick-amount {
    padding: 6px 0;
    border: 1px solid var(--kanisa-border);
    border-radius: var(--radius-base, 8px);
    background: var(--kanisa-canvas);
    color: var(--kanisa-text);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}
.donation-quick-amount:hover {
    background: var(--kanisa-secondary-bg);
    color: var(--kanisa-on-navy);
    border-color: var(--kanisa-secondary);
}

/* ==========================================================================
   Annuaire /churches — maquette code.html (2026-09-14)
   ========================================================================== */

.directory-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    max-width: var(--container-max, 84rem);
    margin: 0 auto;
    padding: var(--space-xs, 8px) var(--space-2, 16px);
    font-size: 12px;
    color: var(--kanisa-text-muted);
}
.directory-crumbs a { color: var(--kanisa-text-muted); text-decoration: none; }
.directory-crumbs a:hover { color: var(--kanisa-link); }
.directory-crumbs .material-symbols-outlined { font-size: 14px; }
.directory-crumbs strong { color: var(--kanisa-text); font-weight: 600; }
.directory-crumbs__count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 9999px;
    background: var(--kanisa-amber-soft);
    color: var(--kanisa-amber-text);
    font-weight: 600;
}

.directory-hero {
    background: linear-gradient(180deg, var(--kanisa-surface-container) 0%, var(--kanisa-surface) 100%);
    padding: var(--space-xl, 32px) var(--space-2, 16px) var(--space-2xl, 48px);
}
.directory-hero__head { max-width: var(--container-max, 84rem); margin: 0 auto var(--space-lg, 24px); }
.directory-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-xs);
    background: var(--kanisa-info-surface);
    color: var(--kanisa-info-text);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-sm, 12px);
}
.directory-hero__badge .material-symbols-outlined { font-size: 16px; }
.directory-hero h1 { font-size: 30px; font-weight: 700; color: var(--kanisa-text); margin: 0 0 8px; }
.directory-hero__head p { font-size: 15px; color: var(--kanisa-text-muted); max-width: 48rem; margin: 0; }

.directory-search {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-xs, 8px);
    max-width: var(--container-max, 84rem);
    margin: 0 auto;
    background: var(--kanisa-surface);
    padding: var(--space-md, 16px);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-2);
}
.directory-search__field {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--kanisa-canvas);
    border-radius: var(--radius-base, 8px);
    padding: 0 var(--space-sm, 12px);
    min-height: 44px;
}
.directory-search__field .material-symbols-outlined { color: var(--kanisa-text-muted); font-size: 20px; }
.directory-search__field input,
.directory-search__field select {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--kanisa-text);
    outline: none;
    cursor: pointer;
}
.directory-search .btn { min-height: 44px; justify-content: center; display: inline-flex; }

.directory-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: var(--container-max, 84rem);
    margin: var(--space-md, 16px) auto 0;
}
.directory-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 9999px;
    background: var(--kanisa-surface);
    color: var(--kanisa-text-muted);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--kanisa-border);
    box-shadow: var(--shadow-1);
}
.directory-pill .material-symbols-outlined { font-size: 14px; }
.directory-pill span {
    background: var(--kanisa-surface-container);
    border-radius: 9999px;
    padding: 0 6px;
    font-size: 10px;
    font-weight: 700;
}
.directory-pill--active { background: var(--kanisa-text); color: var(--kanisa-surface); }
.directory-pill:hover { background: var(--kanisa-hover); }

.directory-main {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-lg, 24px);
    max-width: var(--container-max, 84rem);
    margin: 0 auto;
    padding: var(--space-xl, 32px) var(--space-2, 16px);
    align-items: start;
}
@media (max-width: 900px) { .directory-main { grid-template-columns: 1fr; } }

.directory-filters__card {
    position: sticky;
    top: 96px;
    background: var(--kanisa-surface);
    border: 1px solid var(--kanisa-border);
    border-radius: var(--radius-md, 12px);
    padding: var(--space-md, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 16px);
}
.directory-filters__head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: var(--space-xs, 8px);
    border-bottom: 1px solid var(--kanisa-border);
}
.directory-filters__head .material-symbols-outlined { color: var(--kanisa-secondary); font-size: 20px; }
.directory-filters__head strong { font-size: 16px; font-weight: 700; color: var(--kanisa-text); flex: 1; }
.directory-filters__head a { font-size: 12px; font-weight: 600; color: var(--kanisa-secondary); text-decoration: none; }

.directory-filter-group { display: flex; flex-direction: column; gap: 4px; }
.directory-filter-group__title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kanisa-text-muted);
    margin-bottom: 4px;
}
.directory-filter-item {
    display: flex;
    justify-content: space-between;
    padding: 5px 8px;
    border-radius: var(--radius-xs);
    font-size: 13px;
    color: var(--kanisa-text-body);
    text-decoration: none;
}
.directory-filter-item:hover { background: var(--kanisa-hover); }
.directory-filter-item span { color: var(--kanisa-text-muted); font-size: 11px; }

.directory-filter-cert {
    display: flex;
    gap: var(--space-xs, 8px);
    background: var(--kanisa-canvas);
    padding: var(--space-sm, 12px);
    border-radius: var(--radius-base, 8px);
    font-size: 12px;
    color: var(--kanisa-text-muted);
}
.directory-filter-cert .material-symbols-outlined { color: var(--kanisa-secondary); flex-shrink: 0; }
.directory-filter-cert strong { color: var(--kanisa-text); display: block; margin-bottom: 2px; }

.directory-results__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm, 12px);
    margin-bottom: var(--space-md, 16px);
    flex-wrap: wrap;
}
.directory-results__bar h2 { font-size: 20px; font-weight: 700; color: var(--kanisa-text); margin: 0; }
.directory-results__bar span {
    font-size: 12px;
    font-weight: 600;
    color: var(--kanisa-text);
    background: var(--kanisa-surface-container-high);
    padding: 3px 10px;
    border-radius: 9999px;
}

.directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-lg, 24px);
}
.directory-card {
    display: flex;
    flex-direction: column;
    background: var(--kanisa-surface);
    border: 1px solid var(--kanisa-border);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    transition: box-shadow 0.2s ease;
}
.directory-card:hover { box-shadow: var(--shadow-3); }
.directory-card__media { position: relative; height: 160px; overflow: hidden; }
.directory-card__media-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--kanisa-navy-gradient-deep) 0%, var(--kanisa-navy-gradient) 100%);
}
.directory-card__media-placeholder .material-symbols-outlined { font-size: 48px; color: var(--kanisa-navy-icon); }
.directory-card__badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.directory-card__loc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 9999px;
    background: var(--kanisa-surface);
    font-size: 11px;
    font-weight: 600;
    color: var(--kanisa-text);
}
.directory-card__loc .material-symbols-outlined { font-size: 13px; color: var(--kanisa-secondary); }
.directory-card__cert {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: var(--radius-xs);
    background: var(--kanisa-amber-soft);
    color: var(--kanisa-amber-text);
}
.directory-card__body { padding: var(--space-md, 16px); flex: 1; display: flex; flex-direction: column; gap: var(--space-xs, 8px); }
.directory-card__body h3 { font-size: 17px; font-weight: 700; color: var(--kanisa-text); margin: 0; }
.directory-card__pastor {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--kanisa-text-muted);
    margin: 0;
}
.directory-card__pastor .material-symbols-outlined { font-size: 16px; color: var(--kanisa-secondary); }
.directory-card__pastor strong { color: var(--kanisa-text); }
.directory-card__numbers {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    background: var(--kanisa-canvas);
    padding: var(--space-xs, 8px);
    border-radius: var(--radius-base, 8px);
    text-align: center;
}
.directory-card__numbers strong { display: block; font-size: 16px; font-weight: 700; color: var(--kanisa-text); }
.directory-card__numbers span { font-size: 11px; color: var(--kanisa-text-muted); }
.directory-card__schedule { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--kanisa-text-muted); }
.directory-card__schedule p { display: flex; align-items: center; gap: 4px; margin: 0; }
.directory-card__schedule .material-symbols-outlined { font-size: 16px; }
.directory-card__schedule strong { color: var(--kanisa-text); }
.directory-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs, 8px);
    padding: var(--space-md, 16px);
    border-top: 1px solid var(--kanisa-border);
}
.directory-card__actions .btn { justify-content: center; display: inline-flex; }

/* ==========================================================================
   18. Pages d'information publiques (Étape 1) — tarifs, à propos, FAQ,
       contact, inscription + footer complet. Tokens var(--kanisa-*)
       uniquement : le thème sombre s'applique automatiquement.
   ========================================================================== */

/* Chapeau sous le titre de page */
.page-head__lead {
    margin-top: var(--space-1);
    color: var(--kanisa-text-muted);
    font-size: 16px;
    line-height: 24px;
    max-width: 60ch;
}

/* --- Tarifs -------------------------------------------------------------- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-4);
    align-items: stretch;
}

.pricing-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background-color: var(--kanisa-surface);
    border: 1px solid var(--kanisa-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
}

.pricing-card__name {
    font-size: 20px;
    line-height: 26px;
}

.pricing-card__desc {
    color: var(--kanisa-text-muted);
    font-size: 14px;
    line-height: 22px;
}

.pricing-card__price {
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--kanisa-text);
}

.pricing-card__period {
    color: var(--kanisa-text-muted);
    font-size: 14px;
    font-weight: 500;
}

.pricing-card__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}

.pricing-card__features li {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    font-size: 14px;
    line-height: 22px;
    color: var(--kanisa-text-body);
}

.pricing-card__features .material-symbols-outlined {
    flex-shrink: 0;
    align-self: center;
    font-size: 18px;
    color: var(--kanisa-success);
}

.pricing-card__features strong {
    margin-left: auto;
    text-align: right;
    font-weight: 600;
    color: var(--kanisa-text);
}

.pricing-card__cta {
    width: 100%;
    margin-top: var(--space-1);
}

.pricing-note {
    margin-top: var(--space-3);
    text-align: center;
    color: var(--kanisa-text-muted);
    font-size: 13px;
    line-height: 18px;
}

/* --- À propos ------------------------------------------------------------ */
.info-section {
    max-width: 760px;
    margin-inline: auto;
    padding-block: var(--space-4);
}

.info-section h2 {
    font-size: 22px;
    line-height: 30px;
}

.info-section > p {
    margin-top: var(--space-2);
    color: var(--kanisa-text-body);
}

.info-section .card {
    padding: var(--space-3);
}

.steps-list {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    counter-reset: step;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.steps-list li {
    counter-increment: step;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.steps-list li > div {
    flex: 1;
    min-width: 0;
}

.steps-list li::before {
    content: counter(step);
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background-color: var(--kanisa-primary-action);
    color: var(--kanisa-on-primary-inverse);
    font-size: 14px;
    font-weight: 700;
}

.steps-list h3 {
    font-size: 16px;
    line-height: 22px;
}

.steps-list p {
    margin-top: 4px;
    color: var(--kanisa-text-muted);
    font-size: 14px;
    line-height: 22px;
}

/* --- FAQ ----------------------------------------------------------------- */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 760px;
    margin-inline: auto;
}

.faq-list h2 {
    margin-top: var(--space-2);
}

.faq-item {
    background-color: var(--kanisa-surface);
    border: 1px solid var(--kanisa-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
}

.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--kanisa-text);
}

.faq-item summary:hover {
    color: var(--kanisa-link);
}

/* Liens dans les documents légaux (lisibles dans les deux thèmes) */
.legal-doc a {
    color: var(--kanisa-link);
}

.legal-doc a:hover {
    text-decoration: underline;
}

.faq-item p {
    margin-top: var(--space-1);
    color: var(--kanisa-text-muted);
    font-size: 14px;
    line-height: 24px;
}

/* --- Contact -------------------------------------------------------------- */
textarea.field__input {
    min-height: 140px;
    padding: 12px;
    resize: vertical;
    line-height: 1.5;
}

/* Honeypot : hors écran (pas display:none — trop facilement détecté) */
.hp-field {
    position: absolute;
    left: -9999px;
}

/* --- Inscription des églises (Étape 3) ------------------------------------- */
/* Carte d'inscription plus large que le login (2 colonnes de champs). */
.auth-card--wide {
    max-width: 720px;
}

/* Titres de section du formulaire d'inscription. */
.signup-section__title {
    margin-top: var(--space-3);
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    color: var(--kanisa-text);
}

.signup-section__title:first-child {
    margin-top: 0;
}

/* Champ pleine largeur dans la grille de formulaire. */
.field--full {
    grid-column: 1 / -1;
}

/* Grille de choix de plan (radios). */
.plan-choice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-2);
}

.plan-choice__option {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-2);
    background-color: var(--kanisa-surface);
    border: 1px solid var(--kanisa-border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.plan-choice__option:hover {
    border-color: var(--kanisa-border-strong);
}

.plan-choice__option:has(input:checked) {
    border-color: var(--kanisa-blue);
    box-shadow: 0 0 0 1px var(--kanisa-blue);
}

.plan-choice__name {
    font-weight: 600;
    color: var(--kanisa-text);
}

.plan-choice__price {
    color: var(--kanisa-text-muted);
    font-size: 14px;
    line-height: 20px;
}

/* Case de consentement (texte + liens sur plusieurs lignes). */
.field__checkbox--consent {
    align-items: flex-start;
    line-height: 1.5;
}

.field__checkbox--consent input {
    margin-top: 3px;
}

/* Note d'aide (hint de mot de passe, lien de paiement manquant…). */
.signup-note {
    color: var(--kanisa-text-muted);
    font-size: 13px;
    line-height: 18px;
}

/* --- Page intermédiaire de paiement (Étape 3) ------------------------------ */
.auth-card--payment {
    max-width: 560px;
}

.payment-summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    padding-block: var(--space-1);
    border-bottom: 1px solid var(--kanisa-border);
    color: var(--kanisa-text);
}

.payment-summary__label {
    color: var(--kanisa-text-muted);
    font-size: 14px;
}

.payment-summary__amount {
    font-size: 22px;
    font-weight: 700;
}

.payment-pay {
    margin-top: var(--space-3);
}

.payment-help {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.payment-help li {
    display: flex;
    gap: var(--space-1);
    color: var(--kanisa-text-body);
    font-size: 14px;
    line-height: 20px;
}

.payment-help .material-symbols-outlined {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--kanisa-blue);
}

/* Responsive : choix de plan sur une colonne en petit écran. */
@media (max-width: 639.98px) {
    .plan-choice {
        grid-template-columns: 1fr;
    }
}

/* --- Pages légales (Étape 2) ---------------------------------------------- */
.legal-doc {
    max-width: 760px;
    margin-inline: auto;
    padding-block: var(--space-4);
}

.legal-doc__section h2 {
    margin-top: var(--space-4);
}

.legal-doc__updated {
    color: var(--kanisa-text-muted);
    font-size: 14px;
}

/* --- Footer complet (Étape 1) --------------------------------------------- */
.site-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-4) var(--space-3);
    padding-block: var(--space-4) var(--space-3);
}

.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.site-footer__col nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.site-footer__col-title {
    margin-bottom: var(--space-1);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kanisa-text-muted);
}

.site-footer__tagline {
    color: var(--kanisa-text-muted);
    font-size: 13px;
    line-height: 18px;
}

.site-footer__col a {
    font-size: 13px;
    line-height: 18px;
    color: var(--kanisa-text-muted);
}

.site-footer__col a:hover {
    color: var(--kanisa-text);
}

/* La marque dans le footer suit la couleur de texte (lisible en sombre,
   contrairement au var(--kanisa-navy) du header). */
.site-footer .brand {
    color: var(--kanisa-text);
}

.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-block: var(--space-2);
    border-top: 1px solid var(--kanisa-border);
}

/* --- Responsive (Étape 1) -------------------------------------------------- */
@media (max-width: 900px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 639.98px) {
    .site-footer__grid {
        grid-template-columns: 1fr;
    }

    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}