@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   NuptiaLogos — Styles centralisés (3 apps, 1 base)
   Utilise Bootstrap 5.3 + surcharges simples via CSS custom properties.
   ============================================================ */

/* ── Tokens de base (défauts = NuptiaLogos / Gestion) ── */
:root {
    --nl-primary: #193141;
    --nl-secondary: #044E25;
    --nl-tertiary: #383838;
    --nl-bg: #F6F8FB;
    --nl-gradient: linear-gradient(135deg, #193141 0%, #044E25 100%);
    --nl-font-heading: 'Inter', sans-serif;
    --nl-font-body: 'Inter', sans-serif;
    --nl-radius: 0.75rem;
    --nl-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    --nl-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.10);

    /* ── Échelle z-index unifiée ───────────────────────────────
       Source unique. Aligné sur Bootstrap 5 pour la couche overlay
       (offcanvas/modal/popover/tooltip/toast) afin que les composants
       Bootstrap restent compatibles entre eux. */
    --z-behind:             -1;     /* fond, aurora */
    --z-base:                0;     /* défaut */
    --z-raised:              2;     /* élément en relief dans un container */
    --z-sticky-local:       10;     /* sticky internes (wizard header) */
    --z-floating-local:     50;     /* picker/dropdown custom local */
    --z-dropdown:         1000;     /* Bootstrap dropdown */
    --z-sticky:           1020;     /* Bootstrap sticky-top (navbar) */
    --z-fixed:            1030;     /* Bootstrap fixed */
    --z-offcanvas-bd:     1040;
    --z-offcanvas:        1045;
    --z-modal-backdrop:   1050;
    --z-modal:            1055;
    --z-popover:          1070;
    --z-tooltip:          1080;
    --z-toast:            1090;
    --z-lightbox:         1100;     /* lightbox custom (au-dessus des modales) */
}

/* ============================================================
   Design System NuptiaLogos / Paroisses — Tokens (MASTER §2)
   ============================================================ */
:root {
    /* Marque */
    --brand:            #193141;
    --brand-700:        #122639;
    --brand-600:        #163A56;
    --brand-500:        #193141;
    --brand-400:        #2B4F78;
    --brand-100:        #E3E9F1;
    --brand-50:         #F4F6FB;
    --brand-on:         #FFFFFF;

    /* Accents secondaires */
    --secondary:        #044E25;
    --secondary-700:    #03391B;
    --secondary-500:    #044E25;
    --secondary-100:    #DDECE2;
    --secondary-50:     #EFF7F3;

    /* Alias historique */
    --silver:           var(--secondary);
    --silver-600:       #8A9A91;
    --silver-100:       #E8EFE9;

    /* Surfaces */
    --bg:               #F6F8FB;
    --surface:          #FFFFFF;
    --surface-2:        #F9FBFD;
    --surface-hover:    #F2F4F8;

    /* Texte */
    --text:             #19283A;
    --text-muted:       #5C667B;
    --text-subtle:      #8C95AB;
    --text-on-brand:    #FFFFFF;

    /* Bordures */
    --border:           #E4E8EF;
    --border-strong:    #C3CBD8;
    --border-focus:     var(--brand);

    /* Sémantique */
    --success:          #1E8E5E;
    --success-bg:       #E6F4EE;
    --warning:          #B6791E;
    --warning-bg:       #FBF1DD;
    --danger:           #C0334A;
    --danger-bg:        #F8E2E6;
    --info:             #1E5FA0;
    --info-bg:          #E2EBF6;

    /* Focus ring */
    --ring:             rgba(11, 29, 81, 0.32);

    /* Radius */
    --radius-xs:        4px;
    --radius-sm:        6px;
    --radius-md:        10px;
    --radius-lg:        14px;
    --radius-xl:        20px;
    --radius-pill:      999px;

    /* Shadows */
    --shadow-xs:        0 1px 2px rgba(15, 21, 48, 0.04);
    --shadow-sm:        0 2px 6px rgba(15, 21, 48, 0.06);
    --shadow-md:        0 6px 16px rgba(15, 21, 48, 0.08);
    --shadow-lg:        0 16px 40px rgba(15, 21, 48, 0.10);

    /* Animation */
    --ease:             cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-fast:         120ms;
    --dur:              200ms;
    --dur-slow:         320ms;

    /* Espacements (rythme 4/8) */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
    --space-12: 48px; --space-16: 64px; --space-20: 80px;

    /* Typo */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fs-12: 0.75rem;
    --fs-14: 0.875rem;
    --fs-16: 1rem;
    --fs-18: 1.125rem;
    --fs-20: 1.25rem;
    --fs-24: 1.5rem;
    --fs-32: 2rem;
    --fs-40: 2.5rem;
    --lh-tight: 1.2;
    --lh-base:  1.55;
}

@media (prefers-color-scheme: dark) {
    /* Hors scope phase 1 — placeholder */
}

/* ════════════════════════════════════════════════════════════════════
   ▼ V2 LAYER — Refonte éditoriale 2026
   Fraunces (display variable) + Inter (body), spring easing,
   shadow stack raffinée, navbar backdrop-blur, motion polish.
   Ce layer s'ajoute SANS rien casser : il étend les tokens et raffine
   les primitives de surface (.np-card, .btn, .navbar, formulaires).
   ════════════════════════════════════════════════════════════════════ */
:root {
    /* Display font — Fraunces variable, optical-size aware */
    --font-display: 'Fraunces', 'Cormorant Garamond', 'Times New Roman', serif;
    --font-display-features: "ss01" 1, "ss02" 1, "ss03" 1;

    /* Tracking & leading raffinés */
    --tracking-display: -0.02em;
    --tracking-eyebrow: 0.16em;
    --tracking-tight:   -0.01em;
    --lh-display: 1.05;

    /* Spring easings */
    --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-soft:  cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-soft:   cubic-bezier(0.55, 0, 0.55, 0.2);

    /* Shadow stack v2 — plus contrastée, plus de couches */
    --shadow-xs:  0 1px 2px rgba(15, 21, 48, 0.04), 0 1px 1px rgba(15, 21, 48, 0.03);
    --shadow-sm:  0 2px 8px rgba(15, 21, 48, 0.05), 0 1px 2px rgba(15, 21, 48, 0.04);
    --shadow-md:  0 8px 24px rgba(15, 21, 48, 0.07), 0 2px 6px rgba(15, 21, 48, 0.04);
    --shadow-lg:  0 20px 48px rgba(15, 21, 48, 0.10), 0 6px 16px rgba(15, 21, 48, 0.06);
    --shadow-xl:  0 32px 80px rgba(15, 21, 48, 0.14), 0 10px 24px rgba(15, 21, 48, 0.08);
    --shadow-ring: 0 0 0 1px var(--border);

    /* Halo coloré subtil pour cards interactives */
    --glow-brand: 0 0 0 4px rgba(11, 29, 81, 0.06);

    /* Background aurora (mesh très discret) */
    --aurora-1: rgba(11, 29, 81, 0.045);
    --aurora-2: rgba(192, 192, 192, 0.18);
    --aurora-3: rgba(30, 95, 160, 0.035);

    /* Surface translucide pour navbar / sticky */
    --surface-glass: rgba(255, 255, 255, 0.78);
    --border-glass:  rgba(15, 21, 48, 0.06);
}

/* ── Background aurora : mesh radial tres subtil + grain ── */
.np-bg-aurora {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-behind);
    background:
        radial-gradient(60% 50% at 12% 8%,  var(--aurora-1) 0%, transparent 60%),
        radial-gradient(50% 40% at 88% 18%, var(--aurora-2) 0%, transparent 65%),
        radial-gradient(70% 60% at 50% 100%,var(--aurora-3) 0%, transparent 60%);
    opacity: 1;
}
.np-bg-aurora::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.6;
    mix-blend-mode: multiply;
}
.np-app-body { position: relative; }
/* IMPORTANT — règle anti-piège pour les modales Bootstrap :
   Les ancêtres de `.modal` ne doivent JAMAIS créer de contexte d'empilement
   avec un z-index < 1050, sinon `.modal-backdrop` (sibling de body, z-index
   1050) recouvre la modale piégée dans le contexte parent.
   → pas de `z-index` numérique ni de `transform` permanent sur main/footer/
     container ;
   → l'aurora descend à `--z-behind` ;
   → la navbar est positionnée explicitement à `--z-sticky`. */
.np-app-body > main,
.np-app-body > footer { position: relative; }
.np-app-body > .navbar { z-index: var(--z-sticky); }

/* ── Typographie display ──────────────────────────────────── */
.np-app-body h1,
.np-app-body h2,
.np-app-body h3,
.np-app-body .np-display {
    font-family: var(--font-display);
    font-feature-settings: var(--font-display-features);
    letter-spacing: var(--tracking-display);
    line-height: var(--lh-display);
    font-variation-settings: "opsz" 60, "SOFT" 30, "WONK" 0;
    font-weight: 500;
    color: var(--text);
}
.np-app-body h1 { font-variation-settings: "opsz" 96, "SOFT" 40, "WONK" 0; font-weight: 500; }
.np-app-body h2 { font-variation-settings: "opsz" 60, "SOFT" 30, "WONK" 0; font-weight: 500; }
.np-app-body h3 { font-variation-settings: "opsz" 36, "SOFT" 20, "WONK" 0; font-weight: 600; }
.np-app-body h4, .np-app-body h5, .np-app-body h6 {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    color: var(--text);
}

/* Eyebrow capitales tracking large */
.np-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--text-muted);
}
.np-eyebrow::before {
    content: "";
    width: 24px; height: 1px;
    background: currentColor;
    opacity: 0.5;
}

/* En-tête de page */
.np-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--border);
}
.np-page-header__title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 96, "SOFT" 40;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 6px 0 0;
    color: var(--text);
}
.np-page-header__subtitle {
    color: var(--text-muted);
    font-size: var(--fs-16);
    margin: 6px 0 0;
}

/* Section divider raffiné */
.np-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-subtle);
    font-size: var(--fs-12);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    margin: var(--space-6) 0 var(--space-4);
}
.np-divider::before,
.np-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

/* ── Navbar V2 : translucide + backdrop-blur ──────────────── */
.np-navbar {
    background: var(--surface-glass) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border-glass);
    box-shadow: 0 1px 0 rgba(15, 21, 48, 0.02);
    transition: background var(--dur) var(--ease-out-soft),
                border-color var(--dur) var(--ease-out-soft);
    min-height: 64px;
}
.np-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-variation-settings: "opsz" 36, "SOFT" 20;
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    color: var(--brand) !important;
}
.np-brand-mark {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-500) 100%);
    color: var(--brand-on);
    font-size: 14px;
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.15);
}
.np-brand-name {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 36, "SOFT" 20;
    letter-spacing: -0.01em;
}
.np-navbar .nav-link {
    position: relative;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.92rem;
    padding: 10px 14px !important;
    border-radius: var(--radius-md);
    white-space: nowrap;
    transition: color var(--dur) var(--ease-out-soft),
                background var(--dur) var(--ease-out-soft);
}
.np-navbar .nav-link:hover {
    color: var(--brand);
    background: var(--surface-hover);
}
.np-navbar .nav-link.active {
    color: var(--brand);
    background: var(--brand-50);
}
.np-navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: 4px;
    height: 2px;
    background: var(--brand);
    border-radius: 2px;
    transform-origin: center;
    animation: np-underline 320ms var(--ease-out-soft);
}
@keyframes np-underline {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}
.np-navbar .navbar-toggler {
    border-color: var(--border);
}
.np-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px var(--ring); }

/* ── Card V2 : élévation + hover lift ─────────────────────── */
.np-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur) var(--ease-out-soft),
                box-shadow var(--dur) var(--ease-out-soft),
                border-color var(--dur) var(--ease-out-soft);
}
.np-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}
.np-card.is-interactive {
    cursor: pointer;
}
.np-card.is-interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--brand-100);
}
.np-card.is-interactive:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
    transition-duration: 80ms;
}

/* Card surclass Bootstrap globale (refresh shadow + border) */
.np-app-body .card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--dur) var(--ease-out-soft),
                border-color var(--dur) var(--ease-out-soft),
                transform var(--dur) var(--ease-out-soft);
}
.np-app-body .card:hover {
    box-shadow: var(--shadow-sm);
}
.np-app-body .card-header-accent {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-500) 100%);
    color: var(--brand-on);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    padding: 14px 20px;
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0.01em;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ── Buttons V2 : micro-interactions ──────────────────────── */
.np-app-body .btn {
    font-family: var(--font-sans);
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: var(--radius-md);
    transition: transform 120ms var(--ease-spring),
                box-shadow var(--dur) var(--ease-out-soft),
                background var(--dur) var(--ease-out-soft),
                color var(--dur) var(--ease-out-soft),
                border-color var(--dur) var(--ease-out-soft);
}
.np-app-body .btn:active:not(:disabled) {
    transform: scale(0.97);
    transition-duration: 60ms;
}
.np-app-body .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ring);
}
.np-app-body .btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-on);
    box-shadow: 0 1px 2px rgba(11, 29, 81, 0.20),
                inset 0 1px 0 rgba(255,255,255,0.12);
}
.np-app-body .btn-primary:hover:not(:disabled) {
    background: var(--brand-700);
    border-color: var(--brand-700);
    box-shadow: 0 4px 12px rgba(11, 29, 81, 0.25),
                inset 0 1px 0 rgba(255,255,255,0.12);
    opacity: 1;
}
.np-app-body .btn-outline-primary {
    color: var(--brand);
    border-color: var(--border-strong);
    background: var(--surface);
}
.np-app-body .btn-outline-primary:hover:not(:disabled) {
    background: var(--brand-50);
    border-color: var(--brand);
    color: var(--brand-700);
}
.np-app-body .btn-outline-secondary {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface);
}
.np-app-body .btn-outline-secondary:hover:not(:disabled) {
    background: var(--surface-hover);
    border-color: var(--text-subtle);
    color: var(--text);
}
.np-app-body .btn-link {
    color: var(--brand);
    text-decoration: none;
    position: relative;
}
.np-app-body .btn-link:hover {
    color: var(--brand-700);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Forms V2 : focus ring brand ──────────────────────────── */
.np-app-body .form-control,
.np-app-body .form-select {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text);
    padding: 10px 14px;
    font-size: var(--fs-16);
    transition: border-color var(--dur) var(--ease-out-soft),
                box-shadow var(--dur) var(--ease-out-soft),
                background var(--dur) var(--ease-out-soft);
}
.np-app-body .form-control:hover:not(:focus):not(:disabled),
.np-app-body .form-select:hover:not(:focus):not(:disabled) {
    border-color: var(--text-subtle);
}
.np-app-body .form-control:focus,
.np-app-body .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--ring);
    background: var(--surface);
}
.np-app-body .form-label {
    font-size: var(--fs-14);
    font-weight: 500;
    color: var(--text);
    margin-bottom: 6px;
}
.np-app-body .form-text {
    font-size: var(--fs-12);
    color: var(--text-muted);
}

/* Fieldset legend (refresh) */
.np-app-body fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}
.np-app-body fieldset legend {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 36, "SOFT" 20;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--brand);
    padding: 0 8px;
    letter-spacing: var(--tracking-tight);
}

/* ── Tables V2 : dégradé subtil + zebra raffiné ───────────── */
.np-app-body .table {
    --bs-table-bg: var(--surface);
    border-color: var(--border);
}
.np-app-body .table thead th {
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-700) 100%);
    color: var(--brand-on);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fs-12);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    padding: 12px 16px;
    border: none;
}
.np-app-body .table tbody tr {
    transition: background var(--dur) var(--ease-out-soft);
}
.np-app-body .table tbody tr:hover { background: var(--surface-hover); }

/* ── Alerts V2 ────────────────────────────────────────────── */
.np-app-body .alert {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    padding: 14px 18px;
}
.np-app-body .alert-success { background: var(--success-bg); border-color: rgba(30,142,94,0.20); color: var(--success); }
.np-app-body .alert-warning { background: var(--warning-bg); border-color: rgba(182,121,30,0.20); color: var(--warning); }
.np-app-body .alert-danger  { background: var(--danger-bg);  border-color: rgba(192,51,74,0.20);  color: var(--danger); }
.np-app-body .alert-info    { background: var(--info-bg);    border-color: rgba(30,95,160,0.20);  color: var(--info); }

/* ── Badges V2 ────────────────────────────────────────────── */
.np-app-body .badge {
    font-family: var(--font-sans);
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: var(--radius-pill);
    padding: 4px 10px;
}

/* ── Modals V2 ────────────────────────────────────────────── */
.np-app-body .modal-content {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}
.np-app-body .modal-header {
    border-bottom: 1px solid var(--border);
    padding: 18px 22px;
}
.np-app-body .modal-title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 48, "SOFT" 30;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.np-app-body .modal-footer { border-top: 1px solid var(--border); padding: 14px 22px; }

/* Couches modales — valeurs explicites alignées sur Bootstrap.
   `!important` pour court-circuiter le z-index inline que Bootstrap applique
   lors de l'empilement dynamique de modales successives (peut faire passer
   un backdrop au-dessus d'une modale qui s'ouvre pendant qu'une autre se
   ferme). */
.np-app-body .modal-backdrop { z-index: 1050 !important; }
.np-app-body .modal           { z-index: 1055 !important; }
.np-app-body .modal-backdrop.show { opacity: 0.45; }

/* Filet de sécurité : quand une modale Bootstrap est ouverte, `body` reçoit
   la classe `modal-open`. On supprime tout transform/filter/animation des
   ascendants pour s'assurer qu'aucun contexte d'empilement local ne piège la
   modale sous son backdrop. */
.np-app-body.modal-open > main,
.np-app-body.modal-open .np-main,
.np-app-body.modal-open .np-stagger > * {
    transform: none !important;
    filter: none !important;
    animation: none !important;
    opacity: 1 !important;
}

/* Si jamais plusieurs backdrops coexistent un court instant (modale fermante
   + modale ouvrante), on ne montre que la dernière. Ça évite qu'un backdrop
   en cours de disparition occulte la modale suivante. */
body > .modal-backdrop ~ .modal-backdrop { z-index: 1051 !important; }
body > .modal-backdrop:not(.show) { display: none !important; }

/* ── Dropdowns V2 ─────────────────────────────────────────── */
.np-app-body .dropdown-menu {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    background: var(--surface);
    animation: np-dropdown-in 200ms var(--ease-out-soft);
}
@keyframes np-dropdown-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.np-app-body .dropdown-item {
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    color: var(--text);
    font-size: var(--fs-14);
    transition: background var(--dur) var(--ease-out-soft);
}
.np-app-body .dropdown-item:hover,
.np-app-body .dropdown-item:focus {
    background: var(--surface-hover);
    color: var(--brand);
}

/* ── Footer V2 ────────────────────────────────────────────── */
.np-app-body footer {
    background: transparent;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
}
.np-app-body footer a {
    color: var(--text-muted);
    transition: color var(--dur) var(--ease-out-soft);
}
.np-app-body footer a:hover { color: var(--brand); opacity: 1; }

/* ── Page entrance animation ──────────────────────────────── */
/* Animation purement basée sur l'opacité : aucun `transform` à aucun moment
   sur `<main>`, sinon un contexte d'empilement est créé pendant l'animation
   et piège les modales Bootstrap sous leur backdrop (attaché à <body>).
   C'est critique car certains contrôleurs Stimulus ouvrent une modale dès
   `connect()`, c'est-à-dire alors que l'animation de page est encore active. */
.np-main { animation: np-main-in 420ms var(--ease-out-soft) both; }
@keyframes np-main-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Stagger utility — même règle anti-piège : pas de transform du tout. */
.np-stagger > * { opacity: 0; animation: np-stagger-in 480ms var(--ease-out-soft) forwards; }
.np-stagger > *:nth-child(1) { animation-delay: 40ms; }
.np-stagger > *:nth-child(2) { animation-delay: 80ms; }
.np-stagger > *:nth-child(3) { animation-delay: 120ms; }
.np-stagger > *:nth-child(4) { animation-delay: 160ms; }
.np-stagger > *:nth-child(5) { animation-delay: 200ms; }
.np-stagger > *:nth-child(6) { animation-delay: 240ms; }
.np-stagger > *:nth-child(7) { animation-delay: 280ms; }
.np-stagger > *:nth-child(8) { animation-delay: 320ms; }
.np-stagger > *:nth-child(n+9) { animation-delay: 360ms; }
@keyframes np-stagger-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .np-main,
    .np-stagger > *,
    .np-app-body .dropdown-menu,
    .np-navbar .nav-link.active::after { animation: none; }
    .np-app-body .btn:active:not(:disabled),
    .np-card.is-interactive:hover { transform: none; }
    .np-bg-aurora { display: none; }
}

/* ── Sub-app accents (héritent du layer V2) ───────────────── */
[data-app="mariage"] .np-brand-mark {
    background: linear-gradient(135deg, #663399 0%, #FF9900 100%);
}
[data-app="adieu"] .np-brand-mark {
    background: linear-gradient(135deg, #1E3A5F 0%, #5B7AA0 100%);
}

/* ════════════════════════════════════════════════════════════════════
   ▼ V2 COMPONENTS — Atomes + cross-cutting
   ════════════════════════════════════════════════════════════════════ */

/* ── .np-eyebrow variants ─────────────────────────────────── */
.np-eyebrow--inline::before { display: none; }
.np-eyebrow .bi { font-size: 13px; }

/* ── Required field asterisk ──────────────────────────────── */
.np-app-body label.required::after,
.np-app-body .form-label.required::after {
    content: " *";
    color: var(--danger);
    font-weight: 600;
}

/* ── Form fieldset + legend (pill style) ──────────────────── */
.np-app-body .np-form-fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6) var(--space-6);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--space-5);
}
.np-form-legend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    float: none;
    padding: 4px 12px;
    margin-bottom: var(--space-4);
    background: var(--brand-50);
    color: var(--brand);
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: var(--fs-12);
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    line-height: 1.4;
}
.np-form-legend .bi { font-size: 12px; opacity: 0.85; }

/* ── Avatar (np-user-card component) ──────────────────────── */
.np-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface);
    color: var(--brand-on);
    font-weight: 600;
    font-family: var(--font-sans);
    letter-spacing: 0.02em;
    flex-shrink: 0;
    user-select: none;
    line-height: 1;
}
.np-avatar--photo { object-fit: cover; }
.np-avatar--initials {
    background: linear-gradient(135deg, var(--brand-500), var(--brand));
    color: var(--brand-on);
}
.np-avatar--icon {
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.np-avatar--ring {
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--border), var(--shadow-xs);
}
.np-avatar--more {
    background: var(--brand-50);
    color: var(--brand);
    border: 1px dashed var(--brand-100);
    font-weight: 600;
}
[data-app="mariage"] .np-avatar--initials {
    background: linear-gradient(135deg, #663399 0%, #8B5DB6 100%);
}
[data-app="adieu"] .np-avatar--initials {
    background: linear-gradient(135deg, #1E3A5F 0%, #5B7AA0 100%);
}

/* ── Avatar stack ─────────────────────────────────────────── */
.np-avatar-stack {
    display: inline-flex;
    align-items: center;
}
.np-avatar-stack > .np-avatar + .np-avatar { margin-left: -12px; }

/* ── User inline (avatar + nom compact, table cells) ──────── */
.np-user-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--text);
    text-decoration: none;
}
.np-user-inline:is(a):hover .np-user-inline__name {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.np-user-inline__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.np-user-inline__name {
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.np-user-inline__name .bi { margin-right: 4px; color: var(--text-muted); font-size: 12px; }
.np-user-inline__sub {
    font-size: var(--fs-12);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── User row (ligne complète, listes) ────────────────────── */
.np-user-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.np-user-row__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.np-user-row__name-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.np-user-row__name {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--text);
    font-size: var(--fs-14);
    text-decoration: none;
    line-height: 1.3;
    max-width: 100%;
}
a.np-user-row__name:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.np-user-row__role {
    font-size: var(--fs-12);
    font-weight: 500;
    color: var(--text-muted);
    padding: 2px 8px;
    background: var(--surface-2);
    border-radius: var(--radius-pill);
}
.np-user-row__sub {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-12);
    color: var(--text-muted);
    line-height: 1.4;
}
.np-user-row__sub .bi { opacity: 0.7; font-size: 11px; }
.np-user-row__actions {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ── User card (verticale, gallerie) ──────────────────────── */
.np-user-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px var(--space-3);
    align-items: center;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--dur) var(--ease-out-soft),
                border-color var(--dur) var(--ease-out-soft),
                transform var(--dur) var(--ease-out-soft);
    overflow: hidden;
    height: 100%;
}
.np-user-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}
.np-user-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-500) 100%);
    opacity: 0;
    transition: opacity var(--dur) var(--ease-out-soft);
}
.np-user-card:hover::before { opacity: 0.85; }
.np-user-card--brand::before { opacity: 0.85; background: linear-gradient(180deg, var(--brand) 0%, var(--brand-500) 100%); }
.np-user-card--silver::before { opacity: 0.7; background: linear-gradient(180deg, var(--silver-600) 0%, var(--silver) 100%); }
.np-user-card__avatar {
    grid-row: 1 / span 2;
    align-self: center;
}
.np-user-card__body {
    grid-column: 2;
    min-width: 0;
}
.np-user-card__name {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fs-16);
    color: var(--text);
    margin: 0;
    line-height: 1.25;
    letter-spacing: var(--tracking-tight);
    overflow-wrap: anywhere;
}
.np-user-card__name a { color: inherit; text-decoration: none; }
.np-user-card__name a:hover { color: var(--brand); }
.np-user-card__fonction {
    margin: 2px 0 4px;
    font-size: var(--fs-12);
    color: var(--text-muted);
    line-height: 1.3;
}
.np-user-card__sub {
    margin: 4px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-12);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.np-user-card__actions {
    grid-row: 1 / span 2;
    grid-column: 3;
    align-self: start;
    flex-shrink: 0;
}
.np-user-card__actions .btn-link {
    color: var(--text-subtle);
    padding: 6px;
    border-radius: var(--radius-sm);
}
.np-user-card__actions .btn-link:hover { background: var(--surface-hover); color: var(--brand); }

/* ── Badge gestionnaire (réutilisable) ────────────────────── */
.np-badge--gestionnaire {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    background: var(--brand-50);
    color: var(--brand);
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-pill);
    font-size: var(--fs-12);
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-top: 4px;
}

/* ── Contact card (carte profil détaillée) ────────────────── */
.np-contact-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-5);
}
.np-contact-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.np-contact-card__name {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fs-18);
    margin: 2px 0 0;
    letter-spacing: var(--tracking-tight);
    line-height: 1.25;
}
.np-contact-card__fonction {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: var(--fs-14);
}
.np-contact-card__details {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 4px var(--space-3);
    margin: 0;
    padding-top: var(--space-3);
    border-top: 1px dashed var(--border);
}
.np-contact-card__details dt {
    color: var(--text-subtle);
    font-weight: 400;
    text-align: center;
    align-self: center;
}
.np-contact-card__details dt .bi { font-size: 14px; }
.np-contact-card__details dd {
    margin: 0;
    color: var(--text);
    font-size: var(--fs-14);
    align-self: center;
    overflow-wrap: anywhere;
}
.np-contact-card__details dd a { color: var(--text); text-decoration: none; }
.np-contact-card__details dd a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* ── Address fieldset ─────────────────────────────────────── */
.np-address { margin-bottom: var(--space-4); }
.np-address-display {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--text);
    font-size: var(--fs-14);
    line-height: 1.45;
}
.np-address-display--inline { white-space: nowrap; }
.np-address-display__icon {
    color: var(--text-muted);
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ── Date picker ─────────────────────────────────────────── */
.np-datepicker { margin-bottom: var(--space-3); }
.np-datepicker__field {
    position: relative;
    display: flex;
    align-items: center;
}
.np-datepicker__icon {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    font-size: 16px;
    pointer-events: none;
    z-index: var(--z-raised);
    line-height: 0;
}
.np-app-body .np-datepicker__input {
    padding-left: 38px;
    font-variant-numeric: tabular-nums;
}
.np-app-body .np-datepicker__input:focus + .np-datepicker__icon,
.np-app-body .np-datepicker__field:focus-within .np-datepicker__icon {
    color: var(--brand);
}

/* ── Action table ─────────────────────────────────────────── */
.np-action-table-wrapper {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.np-app-body .np-action-table {
    --bs-table-bg: var(--surface);
    margin: 0;
    border: none;
}
.np-app-body .np-action-table thead th {
    background: var(--surface-2);
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fs-12);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    text-shadow: none;
}
.np-app-body .np-action-table tbody td {
    padding: 14px 16px;
    border-color: var(--border);
    color: var(--text);
    font-size: var(--fs-14);
    vertical-align: middle;
}
.np-app-body .np-action-table tbody tr:last-child td { border-bottom: none; }
.np-app-body .np-action-table tbody tr {
    transition: background var(--dur) var(--ease-out-soft);
}
.np-app-body .np-action-table tbody tr:hover td { background: var(--surface-hover); }
.np-action-table__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}
.np-action-table__actions .btn { white-space: nowrap; }
.np-action-table__actions .btn-icon {
    width: 36px; height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Mobile cards : la table devient une pile de cards */
@media (max-width: 767.98px) {
    .np-app-body .table-mobile-cards { display: block; border: none; }
    .np-app-body .table-mobile-cards thead { display: none; }
    .np-app-body .table-mobile-cards tbody { display: block; }
    .np-app-body .table-mobile-cards tbody tr {
        display: grid;
        grid-template-columns: max-content 1fr;
        column-gap: var(--space-3);
        row-gap: 4px;
        padding: var(--space-3) var(--space-4);
        margin-bottom: var(--space-3);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--surface);
    }
    .np-app-body .table-mobile-cards tbody tr:hover td { background: transparent; }
    .np-app-body .table-mobile-cards tbody td {
        display: contents;
        padding: 0;
        border: none;
    }
    .np-app-body .table-mobile-cards tbody td::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-size: var(--fs-12);
        font-weight: 500;
        letter-spacing: 0.02em;
        align-self: center;
    }
    .np-app-body .table-mobile-cards tbody td.np-action-table__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        margin-top: var(--space-2);
        padding-top: var(--space-3);
        border-top: 1px dashed var(--border);
    }
    .np-app-body .table-mobile-cards tbody td.np-action-table__actions::before { display: none; }
}

/* ── Empty state — variant inset (dans une card) ─────────── */
.np-empty {
    text-align: center;
    padding: var(--space-10) var(--space-6);
}
.np-empty--centered { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.np-empty--inset { padding: var(--space-8) var(--space-5); background: transparent; }
.np-empty__icon { font-size: 40px; color: var(--text-subtle); margin-bottom: var(--space-2); }
.np-empty__text { color: var(--text-muted); margin: 0; }

/* ── Auth card (login/register/forgot/reset) ──────────────── */
.np-auth-shell {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    position: relative;
}
.np-auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-8) var(--space-6);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.np-auth-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-100), var(--brand), var(--brand-500), var(--brand-100));
    background-size: 200% 100%;
    animation: np-auth-shimmer 8s linear infinite;
}
@keyframes np-auth-shimmer {
    from { background-position: 0% 0; }
    to   { background-position: 200% 0; }
}
.np-auth-card__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-6);
    text-align: center;
}
.np-auth-card__logo {
    height: 56px;
    width: auto;
    object-fit: contain;
    margin-bottom: var(--space-2);
}
.np-auth-card__title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 60, "SOFT" 30;
    font-size: clamp(24px, 5vw, 30px);
    font-weight: 500;
    letter-spacing: var(--tracking-display);
    line-height: 1.1;
    color: var(--text);
    margin: 0;
}
.np-auth-card__subtitle {
    color: var(--text-muted);
    font-size: var(--fs-14);
    margin: 6px 0 0;
    max-width: 320px;
    line-height: 1.5;
}
.np-auth-card__actions { display: grid; gap: var(--space-3); }
.np-auth-card__divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) 0 var(--space-4);
    color: var(--text-subtle);
    font-size: var(--fs-12);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
}
.np-auth-card__divider::before,
.np-auth-card__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}
.np-auth-card__footer {
    text-align: center;
    margin-top: var(--space-5);
    color: var(--text-muted);
    font-size: var(--fs-14);
}
.np-auth-card__footer a {
    color: var(--brand);
    font-weight: 500;
    text-decoration: none;
}
.np-auth-card__footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Input groups dans np-auth-card */
.np-auth-card .input-group .input-group-text {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text-muted);
}
.np-auth-card .input-group:focus-within .input-group-text {
    border-color: var(--brand);
    color: var(--brand);
}

/* ── Role selector (grid de boutons rôle) ─────────────────── */
.np-role-selector {
    display: grid;
    gap: var(--space-3);
}
.np-app-body .np-role-selector__option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    color: var(--text);
    text-decoration: none;
    text-align: left;
    transition: transform 120ms var(--ease-spring),
                border-color var(--dur) var(--ease-out-soft),
                background var(--dur) var(--ease-out-soft),
                box-shadow var(--dur) var(--ease-out-soft);
}
.np-app-body .np-role-selector__option:hover {
    transform: translateY(-1px);
    border-color: var(--brand);
    background: var(--brand-50);
    box-shadow: var(--shadow-sm);
}
.np-app-body .np-role-selector__option:active { transform: translateY(0); }
.np-role-selector__icon {
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--brand-500), var(--brand));
    color: var(--brand-on);
    font-size: 20px;
    box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,0.15);
}
.np-role-selector__icon--alt {
    background: linear-gradient(135deg, var(--silver-600), var(--silver));
    color: var(--text);
}
.np-role-selector__body { min-width: 0; flex: 1 1 auto; }
.np-role-selector__title {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--text);
    font-size: var(--fs-14);
    line-height: 1.3;
    display: block;
}
.np-role-selector__desc {
    color: var(--text-muted);
    font-size: var(--fs-12);
    line-height: 1.4;
    display: block;
    margin-top: 2px;
}
.np-role-selector__chevron {
    color: var(--text-subtle);
    font-size: 18px;
    transition: transform var(--dur) var(--ease-spring), color var(--dur) var(--ease-out-soft);
    margin-left: auto;
    flex-shrink: 0;
}
.np-app-body .np-role-selector__option:hover .np-role-selector__chevron {
    transform: translateX(4px);
    color: var(--brand);
}

/* ── Info card (alert sémantique avec icône) ──────────────── */
.np-info-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-lg);
    color: var(--text);
    font-size: var(--fs-14);
    margin-bottom: var(--space-4);
}
.np-info-card__icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--brand);
    font-size: 16px;
    box-shadow: var(--shadow-xs);
}
.np-info-card__body { min-width: 0; flex: 1 1 auto; line-height: 1.5; }
.np-info-card__title { font-weight: 600; color: var(--text); margin-bottom: 2px; }
.np-info-card__text { color: var(--text-muted); margin: 0; }
.np-info-card--success { background: var(--success-bg); border-color: rgba(30,142,94,0.20); }
.np-info-card--success .np-info-card__icon { color: var(--success); }
.np-info-card--warning { background: var(--warning-bg); border-color: rgba(182,121,30,0.20); }
.np-info-card--warning .np-info-card__icon { color: var(--warning); }
.np-info-card--danger  { background: var(--danger-bg);  border-color: rgba(192,51,74,0.20); }
.np-info-card--danger  .np-info-card__icon { color: var(--danger); }

/* ── Wizard polish (progress + chevron) ───────────────────── */
.np-progress { display: flex; gap: 4px; }
.np-progress__seg {
    flex: 1 1 0;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--border);
    transition: background var(--dur) var(--ease-out-soft),
                box-shadow var(--dur) var(--ease-out-soft);
}
.np-progress__seg.is-active {
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-500) 100%);
    box-shadow: var(--glow-brand);
}
.np-progress__label {
    font-size: var(--fs-12);
    letter-spacing: 0.04em;
    margin: var(--space-2) 0 0;
}

.np-wizard__title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 96, "SOFT" 40;
    font-size: clamp(26px, 4.5vw, 36px);
    font-weight: 500;
    letter-spacing: var(--tracking-display);
    line-height: 1.1;
    color: var(--text);
    margin: 0 0 var(--space-2);
}
.np-wizard__lead { font-size: var(--fs-16); margin: 0 0 var(--space-6); max-width: 56ch; }
.np-wizard__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px dashed var(--border);
}
.np-wizard__cta { min-width: 160px; }

/* ── Chips (filtres) ──────────────────────────────────────── */
.np-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.np-app-body .np-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    border-radius: var(--radius-pill);
    font-size: var(--fs-14);
    font-weight: 500;
    text-decoration: none;
    transition: all var(--dur) var(--ease-out-soft);
}
.np-app-body .np-chip:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-50);
}
.np-app-body .np-chip.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-on);
    box-shadow: var(--shadow-sm);
}

/* ── Team section title ───────────────────────────────────── */
.np-team-section__title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 36, "SOFT" 20;
    font-size: var(--fs-20);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    color: var(--text);
    margin: 0 0 var(--space-3);
}

/* ── Page title (reutilisable) ────────────────────────────── */
.np-page-title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 96, "SOFT" 40;
    font-size: clamp(28px, 4.5vw, 40px);
    font-weight: 500;
    letter-spacing: var(--tracking-display);
    line-height: 1.1;
    color: var(--text);
    margin: 0;
}

/* ── Smooth chevron rotation in collapsibles ──────────────── */
.np-collapsible__chevron,
[data-bs-toggle="collapse"] .bi-chevron-down {
    transition: transform var(--dur) var(--ease-spring);
}
[data-bs-toggle="collapse"][aria-expanded="true"] .bi-chevron-down,
.np-collapsible[aria-expanded="true"] .np-collapsible__chevron {
    transform: rotate(180deg);
}

/* ── Reduced motion overrides ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .np-auth-card::before { animation: none; }
    .np-role-selector__option,
    .np-role-selector__chevron,
    .np-collapsible__chevron,
    [data-bs-toggle="collapse"] .bi-chevron-down { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   ▲ FIN V2 LAYER
   ════════════════════════════════════════════════════════════════════ */

/* ── Mapping Bootstrap (tokens NuptiaLogos/Paroisses) ── */
:root {
    --bs-primary: var(--brand);
    --bs-primary-rgb: 11, 29, 81;
    --bs-link-color: var(--brand);
    --bs-link-hover-color: var(--brand-600);
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-border-color: var(--border);
    --bs-border-radius: var(--radius-md);
    --bs-focus-ring-color: var(--ring);
}

/* ── Utilitaires de base ── */
body {
    font-family: var(--font-sans);
}

.np-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.np-card:hover { box-shadow: var(--shadow-sm); }
.np-card.is-interactive:hover { border-color: var(--brand-100); cursor: pointer; }

.np-section-title {
    font-family: var(--font-sans);
    font-weight: 600;
    line-height: var(--lh-tight);
    color: var(--text);
    font-size: var(--fs-24);
    margin-bottom: var(--space-4);
}

/* (Chartes Mariage et Adieu consolidées plus bas, après la charte Celebration Pro) */

/* ══════════════════════════════════════════════════
   GLOBAL
   ══════════════════════════════════════════════════ */

body {
    font-family: var(--nl-font-body);
    background-color: var(--nl-bg);
    color: #333;
    /* Safe area insets pour les téléphones à encoche (iPhone X+, Android notch) */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

h1, h2, h3, h4, h5, h6,
.font-heading {
    font-family: var(--nl-font-heading);
}

a { color: var(--nl-primary); }
a:hover { opacity: 0.8; }

/* ══════════════════════════════════════════════════
   NAVBAR
   ══════════════════════════════════════════════════ */

.navbar {
    font-family: var(--nl-font-body);
    letter-spacing: 0.01em;
}
.navbar-brand {
    font-family: var(--nl-font-heading);
    color: var(--nl-primary) !important;
}
.navbar-logo-wide,
.navbar-logo-square {
    height: auto;
    max-height: 2.5em;
    width: auto;
    object-fit: contain;
}
.navbar .nav-link {
    color: #555;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.5rem 1rem !important;
    border-radius: var(--nl-radius);
    transition: all 0.2s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--nl-primary);
    background-color: rgba(0, 0, 0, 0.04);
}

/* ══════════════════════════════════════════════════
   BUTTONS — Bootstrap overrides via --nl tokens
   ══════════════════════════════════════════════════ */

.btn-primary {
    background-color: var(--nl-primary);
    border-color: var(--nl-primary);
    color: #fff;
}
.btn-primary:hover {
    opacity: 0.9;
}
.btn-outline-primary {
    color: var(--nl-primary);
    border-color: var(--nl-primary);
}
.btn-outline-primary:hover {
    background-color: var(--nl-primary);
    border-color: var(--nl-primary);
    color: #fff;
}

.btn-secondary {
    background-color: var(--nl-secondary);
    border-color: var(--nl-secondary);
}

/* Bouton gradient (pour mariage surtout) */
.btn-gradient {
    background: var(--nl-gradient, var(--nl-primary));
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    border-radius: var(--nl-radius);
    transition: opacity 0.2s;
}
.btn-gradient:hover {
    opacity: 0.9;
    color: #fff;
}

/* ══════════════════════════════════════════════════
   CARDS — Style épuré inspiré des maquettes
   ══════════════════════════════════════════════════ */

.card {
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: var(--nl-radius);
    box-shadow: var(--nl-shadow);
    transition: box-shadow 0.25s, transform 0.25s;
}
.card:hover {
    box-shadow: var(--nl-shadow-lg);
}

.card-header-accent {
    background-color: var(--nl-primary);
    color: #fff;
    border-radius: var(--nl-radius) var(--nl-radius) 0 0 !important;
    padding: 1rem 1.25rem;
}

/* Card sélectionnée (ex. lectures, chants) */
.card.card-selected {
    border-color: var(--nl-primary);
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

/* ══════════════════════════════════════════════════
   HERO / BANNER — Pour le dashboard mariage/adieu
   ══════════════════════════════════════════════════ */

.hero-banner {
    background: var(--nl-gradient, var(--nl-primary));
    color: #fff;
    border-radius: var(--nl-radius);
    padding: 3rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero-banner h1 {
    font-family: var(--nl-font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.hero-banner .subtitle {
    font-size: 0.95rem;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
.hero-logo {
    height: 48px;
    max-height: 48px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* Compteur style mariage */
.countdown-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0 1rem;
}
.countdown-item .number {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: var(--nl-font-heading);
}
.countdown-item .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

/* ══════════════════════════════════════════════════
   PROGRESS — Barre de progression cérémonie
   ══════════════════════════════════════════════════ */

.progress {
    height: 0.5rem;
    border-radius: 1rem;
    background-color: var(--nl-tertiary);
}
.progress-bar {
    background: var(--nl-gradient, var(--nl-primary));
    border-radius: 1rem;
}

/* Steps indicator (Célébrant ✓, Lectures ✓, ...) */
.steps-indicator {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}
.step-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #999;
}
.step-item.completed {
    color: var(--nl-primary);
    font-weight: 600;
}
.step-item .step-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
}
.step-item.completed .step-dot {
    background-color: var(--nl-primary);
    color: #fff;
    border-color: var(--nl-primary);
}

/* ══════════════════════════════════════════════════
   FORMS — Bootstrap form overrides
   ══════════════════════════════════════════════════ */

/* Indicateur visuel pour les champs obligatoires
   Bootstrap 5 form theme ajoute .required sur les labels required */
label.required::after {
    content: " *";
    color: #dc3545;
    font-weight: 700;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--nl-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.05);
}

.form-check-input:checked {
    background-color: var(--nl-primary);
    border-color: var(--nl-primary);
}

fieldset {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--nl-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: #fff;
}
fieldset legend {
    font-family: var(--nl-font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--nl-primary);
    padding: 0 0.5rem;
    width: auto;
    float: none;
}

/* ══════════════════════════════════════════════════
   TABLES — Propres et lisibles
   ══════════════════════════════════════════════════ */

.table thead th {
    background-color: var(--nl-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: none;
}
.table td {
    vertical-align: middle;
}

/* ══════════════════════════════════════════════════
   SIDEBAR — Pour la bibliothèque / déroulement
   ══════════════════════════════════════════════════ */

.sidebar {
    background: #fff;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    min-height: calc(100vh - 62px);
}
.sidebar .nav-link {
    color: #555;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background-color: var(--nl-tertiary);
    color: var(--nl-primary);
    font-weight: 600;
}
.sidebar .nav-link i {
    width: 1.2rem;
    text-align: center;
}

/* ══════════════════════════════════════════════════
   BADGE / TAGS
   ══════════════════════════════════════════════════ */

.badge-app {
    background-color: var(--nl-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.3em 0.7em;
    border-radius: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.badge-soft {
    background-color: var(--nl-tertiary);
    color: var(--nl-primary);
}

/* ══════════════════════════════════════════════════
   SECTION TITLES
   ══════════════════════════════════════════════════ */

.section-title {
    font-family: var(--nl-font-heading);
    font-weight: 700;
    color: var(--nl-primary);
    margin-bottom: 0.5rem;
}
.section-subtitle {
    color: #777;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

/* ══════════════════════════════════════════════════
   QUOTE / CITATION (footer mariage)
   ══════════════════════════════════════════════════ */

.quote-block {
    font-family: var(--nl-font-heading);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--nl-primary);
    text-align: center;
    padding: 2rem 1rem;
}
.quote-block .author {
    font-style: normal;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-top: 0.75rem;
    opacity: 0.6;
}

/* ══════════════════════════════════════════════════
   DEROULE — Timeline-like layout
   ══════════════════════════════════════════════════ */

.deroule-period {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 2rem;
}
.deroule-period::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--nl-tertiary);
    border-radius: 2px;
}
.deroule-period-title {
    font-family: var(--nl-font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--nl-primary);
    margin-bottom: 1rem;
}
.deroule-item {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--nl-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    transition: box-shadow 0.2s, border-color 0.2s;
    cursor: pointer;
}
.deroule-item:hover {
    box-shadow: var(--nl-shadow);
}
.deroule-item.active {
    border-color: var(--nl-primary);
    box-shadow: 0 0 0 1px var(--nl-primary), var(--nl-shadow);
}
.deroule-item.saving {
    opacity: 0.7;
    pointer-events: none;
}
.deroule-item.saved {
    border-color: var(--bs-success, #198754);
    transition: border-color 0.3s ease;
}
.deroule-dot {
    position: absolute;
    left: calc(0.5rem - 6px);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--nl-primary);
    border: 3px solid var(--nl-bg);
}
.deroule-item .ts-wrapper { font-size: .85rem; }
.deroule-item .ts-wrapper .ts-control { min-height: 0; padding: .25rem .5rem; }
.deroule-item .ts-wrapper .ts-dropdown { font-size: .85rem; }

/* Déroulé legend */
.deroule-legend {
    background: rgba(var(--nl-primary-rgb, 11, 29, 81), 0.04);
    border: 1px solid rgba(var(--nl-primary-rgb, 11, 29, 81), 0.1);
    border-radius: var(--nl-radius, 0.5rem);
    padding: 0.5rem 0.75rem;
    color: var(--nl-text-muted, #6c757d);
}

/* Validation section */
.validation-section {
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
    padding-top: 0.5rem;
}
.validation-section-title {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
    margin-bottom: 0.35rem;
}

/* Validation checkboxes inside deroule items */
.validation-section .form-check {
    padding-top: 0;
    padding-bottom: 0;
}

/* Responsible person field */
.responsible-person-field {
    min-width: 140px;
    max-width: 200px;
}
.responsible-input {
    font-size: 0.8rem;
    padding: 0.15rem 0.4rem;
    height: auto;
}

/* Notes sections */
.notes-section .card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--nl-radius);
}
.notes-section .card-header {
    background: rgba(var(--nl-primary-rgb, 11, 29, 81), 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
}
.notes-preview {
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.25rem;
    min-height: 2rem;
    line-height: 1.6;
}
.notes-preview:hover {
    background: rgba(0, 0, 0, 0.03);
}
.notes-preview h1, .notes-preview h2, .notes-preview h3 {
    font-size: 1em;
    font-weight: 700;
    margin-top: 0.5rem;
}
.notes-preview p { margin-bottom: 0.3rem; }
.notes-preview ul, .notes-preview ol { margin-bottom: 0.3rem; padding-left: 1.5rem; }
.cursor-pointer { cursor: pointer; }

/* ══════════════════════════════════════════════════
   LIBRARY CARD — Chant / Texte
   ══════════════════════════════════════════════════ */

.library-card {
    border-radius: var(--nl-radius);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
.library-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--nl-shadow-lg);
}
.library-card .card-img-top {
    height: 180px;
    object-fit: cover;
}
.library-card.selected {
    border: 2px solid var(--nl-primary);
}
.library-card.selected .card-img-overlay {
    background: rgba(0, 0, 0, 0.3);
}
.library-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    font-size: 3rem;
    text-decoration: none;
}
.library-card-icon:hover {
    opacity: 0.85;
}
.yt-facade {
    cursor: pointer;
    overflow: hidden;
}
.yt-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 1.6rem;
    transition: transform 0.15s, background 0.15s;
}
.yt-facade:hover .yt-play-btn {
    background: var(--nl-primary);
    transform: translate(-50%, -50%) scale(1.1);
}
.library-card iframe.card-img-top {
    height: 180px;
    border: none;
}

/* ══════════════════════════════════════════════════
   AUDIO PLAYER BAR — Style sobre
   ══════════════════════════════════════════════════ */

.player-bar {
    background: var(--nl-primary);
    color: #fff;
    border-radius: var(--nl-radius);
    padding: 0.75rem 1.25rem;
}
.player-bar .btn {
    color: #fff;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE UTILITIES
   ══════════════════════════════════════════════════ */

/* — Cible tactile minimale 44px (Apple HIG / WCAG 2.5.5) — */
.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn.btn-sm {
    min-height: 36px;
}
.nav-link, .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
}
/* Aligner la checkbox avec le texte du label + zone de tap agrandie */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.55em;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}
.form-check-input {
    margin-top: 0.35em; /* aligner visuellement avec la 1re ligne du label */
    flex-shrink: 0;
}
.form-check-label {
    cursor: pointer;
}

/* — Footer : safe area bottom pour les téléphones à encoche — */
footer {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* — Navbar : safe area top en mode standalone PWA — */
@media (display-mode: standalone) {
    .navbar.sticky-top {
        padding-top: env(safe-area-inset-top);
    }
}

/* — Très petit écran (≤ 576px) — */
@media (max-width: 576px) {
    /* Typographie */
    .hero-banner h1 { font-size: 1.5rem; }
    .hero-banner .subtitle { font-size: 0.8rem; letter-spacing: 0.08em; }
    .countdown-item .number { font-size: 1.5rem; }
    .countdown-item { margin: 0 0.5rem; }
    .section-title { font-size: 1.2rem; }
    .section-subtitle { font-size: 0.82rem; }

    /* Container : moins de padding latéral */
    .container, .container-fluid { padding-left: 12px; padding-right: 12px; }

    /* Hero banner */
    .hero-banner { padding: 1.5rem 1rem; }

    /* Cards : padding compact */
    .card-body { padding: 1rem; }
    .card-header-accent { padding: 0.75rem 1rem; }

    /* Fieldsets */
    fieldset { padding: 0.75rem; }
    fieldset legend { font-size: 1rem; }

    /* Breadcrumb compact */
    .breadcrumb { font-size: 0.82rem; }

    /* Formulaires : boutons empilés */
    .d-flex.justify-content-between.align-items-center > .btn,
    .d-flex.justify-content-between.align-items-center > a.btn {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }

    /* Input groups : empiler si besoin */
    .input-group-stack-mobile {
        flex-direction: column;
    }
    .input-group-stack-mobile > * {
        border-radius: var(--nl-radius) !important;
        margin-bottom: 0.5rem;
    }

    /* Tables : texte plus petit */
    .table:not(.table-mobile-cards) { font-size: 0.82rem; }
    .table:not(.table-mobile-cards) thead th { font-size: 0.75rem; padding: 0.5rem; }
    .table:not(.table-mobile-cards) td { padding: 0.5rem; }

    /* Steps indicator : wrap + compact */
    .steps-indicator { flex-wrap: wrap; gap: 0.5rem; }

    /* Deroule items plus compacts */
    .deroule-item { padding: 0.75rem 1rem; }
    .deroule-period { padding-left: 1.5rem; }

    /* Boutons d'action en pied de formulaire */
    .btn-actions-mobile {
        flex-direction: column;
        gap: 0.5rem !important;
    }
    .btn-actions-mobile .btn { width: 100%; }

    /* Alerte : texte plus compact */
    .alert { font-size: 0.88rem; padding: 0.75rem; }

    /* Badge compact mais lisible */
    .badge, .badge-app { font-size: 0.7rem; }

    /* Navbar toggler plus visible */
    .navbar-toggler { padding: 0.4rem 0.6rem; }

    /* Footer compact */
    footer .row > div { text-align: center !important; margin-bottom: 0.5rem; }
    footer .row > div:last-child { margin-bottom: 0; }
    footer a { display: inline-block; margin: 0.25rem 0; }

    /* Progress bar labels */
    .progress + .small, .progress + span.small { font-size: 0.75rem; }
}

/* — Mobile (≤ 768px) — */
@media (max-width: 768px) {
    /* Typographie */
    .hero-banner h1 { font-size: 1.8rem; }
    .countdown-item .number { font-size: 1.8rem; }
    .section-title { font-size: 1.4rem; }

    /* Sidebar (bibliothèque, layout) */
    .sidebar {
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    /* Deroule sidebar : désactiver sticky sur mobile */
    .deroule-sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
        margin-bottom: 1.5rem;
    }

    /* Fieldsets : padding réduit sur mobile */
    fieldset {
        padding: 1rem;
    }

    /* Cartes : pas d'effet hover sur touch (évite le piège de tap) */
    .card:hover {
        box-shadow: var(--nl-shadow);
    }

    /* Tables : scroll horizontal plutôt que texte tronqué */
    .table-responsive-auto {
        overflow-x: auto;
    }

    /* ── Tables responsive en cartes empilées ── */
    .table-responsive:has(.table-mobile-cards) {
        overflow-x: visible;
    }
    .table-mobile-cards {
        border: none;
    }
    .table-mobile-cards thead {
        display: none;
    }
    .table-mobile-cards tbody tr {
        display: block;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: var(--nl-radius);
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        box-shadow: var(--nl-shadow);
    }
    .table-mobile-cards tbody tr:hover {
        background: #fff;
    }
    .table-mobile-cards tbody td {
        display: flex;
        align-items: baseline;
        padding: 0.25rem 0;
        border: none;
        gap: 0.5rem;
    }
    .table-mobile-cards tbody td:empty,
    .table-mobile-cards tbody td:blank {
        display: none;
    }
    .table-mobile-cards tbody td::before {
        content: attr(data-label);
        flex-shrink: 0;
        width: 7rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--nl-primary);
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    /* Cellule actions : pleine largeur, alignée à droite */
    .table-mobile-cards tbody td.td-actions {
        justify-content: flex-end;
        padding-top: 0.5rem;
        margin-top: 0.25rem;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }
    .table-mobile-cards tbody td.td-actions::before {
        display: none;
    }
    /* Champs de formulaire dans les cartes : pleine largeur */
    .table-mobile-cards tbody td .form-select,
    .table-mobile-cards tbody td .form-control {
        min-width: 0;
        flex: 1;
    }

    /* Auth container : pleine largeur sur petits écrans */
    .auth-container {
        margin: 1rem auto;
    }
    .auth-card {
        padding: 1.5rem;
    }

    /* Boutons full-width dans les formulaires sur mobile */
    .btn-mobile-full {
        width: 100%;
    }

    /* En-tête de page : empiler titre et actions */
    .page-header-responsive {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }
    .page-header-responsive .d-flex.gap-2 {
        flex-wrap: wrap;
    }

    /* Formulaires collaborateurs : empiler les champs */
    .collaborator-form-row {
        flex-direction: column;
    }
    .collaborator-form-row > .col,
    .collaborator-form-row > [class*="col-"] {
        flex: none;
        width: 100%;
    }

    /* Micro contact card : empiler sur mobile */
    .micro-contact-responsive {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    .micro-contact-responsive > div:last-child {
        align-self: flex-end;
    }

    /* Btn-group : un peu plus grand pour les cibles tactiles */
    .btn-group .btn { min-height: 38px; min-width: 38px; }

    /* Texte pré-formaté : overflow auto */
    .text-preformatted-mobile {
        overflow-x: auto;
        word-break: break-word;
    }

    /* Quote block compact */
    .quote-block { padding: 1.5rem 0.75rem; font-size: 1rem; }
}

/* — Tablette (≤ 992px) — */
@media (max-width: 992px) {
    /* Hero banner : padding réduit */
    .hero-banner {
        padding: 2rem 1.25rem;
    }

    /* En-tête de page avec actions */
    .page-header-responsive {
        gap: 0.75rem;
    }

    /* Celebration show: payment alert - empiler */
    .alert .d-flex { flex-wrap: wrap; gap: 0.5rem; }

    /* Library card icon plus petit sur tablette */
    .library-card-icon { height: 140px; font-size: 2.5rem; }
    .library-card .card-img-top { height: 140px; }
}

/* ══════════════════════════════════════════════════
   RÉSUMÉ sidebar (déroulement)
   ══════════════════════════════════════════════════ */

.summary-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--nl-radius);
    padding: 1.25rem;
}
.summary-card .summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    font-size: 0.9rem;
}
.summary-card .summary-row .value {
    font-weight: 700;
    color: var(--nl-primary);
}

/* Conseil box */
.conseil-box {
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: var(--nl-radius);
    padding: 1rem;
    font-size: 0.85rem;
}
.conseil-box .icon {
    color: var(--nl-secondary);
}

/* ══════════════════════════════════════════════════
   PAGE AUTH — Login & Registration
   ══════════════════════════════════════════════════ */

.auth-container {
    max-width: 480px;
    margin: 3rem auto;
}
.auth-card {
    background: #fff;
    border-radius: var(--nl-radius);
    box-shadow: var(--nl-shadow-lg);
    padding: 2.5rem;
}
.auth-card h2 {
    font-family: var(--nl-font-heading);
    color: var(--nl-primary);
    margin-bottom: 1.5rem;
}
.auth-logo {
    height: 48px;
    max-height: 48px;
    width: auto;
    object-fit: contain;
}

/* ══════════════════════════════════════════════════
   REGISTRATION WIZARD — Assistant d'inscription
   ══════════════════════════════════════════════════ */
.reg-wizard {
    max-width: 640px;
    margin: 2.5rem auto;
    padding: 0 1rem;
}
.reg-wizard__card {
    background: #fff;
    border-radius: var(--nl-radius, 16px);
    box-shadow: var(--nl-shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.12));
    padding: 2.25rem;
}
.reg-wizard__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1.25rem;
}
.reg-wizard__badge {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    background: linear-gradient(135deg, var(--brand, #4C679D), #3a4f7a);
    box-shadow: 0 4px 10px rgba(18, 22, 30, 0.2);
}
.reg-wizard__eyebrow {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #6b7280);
    font-weight: 600;
}
.reg-wizard__title {
    margin: 2px 0 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--nl-primary, #1c2330);
}
.reg-wizard__hint {
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: var(--text-muted, #6b7280);
}

/* Barre de progression */
.reg-progress {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
}
.reg-progress__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    text-align: center;
}
.reg-progress__item:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 15px;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--border, #e3e6ea);
    z-index: 0;
}
.reg-progress__item.is-active:not(:first-child)::before,
.reg-progress__item.is-done:not(:first-child)::before {
    background: var(--brand, #4C679D);
}
.reg-progress__dot {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid var(--border, #e3e6ea);
    color: var(--text-muted, #6b7280);
    font-weight: 700;
    font-size: 0.85rem;
}
.reg-progress__item.is-active .reg-progress__dot,
.reg-progress__item.is-done .reg-progress__dot {
    border-color: var(--brand, #4C679D);
    background: var(--brand, #4C679D);
    color: #fff;
}
.reg-progress__label {
    font-size: 0.72rem;
    line-height: 1.2;
    color: var(--text-muted, #6b7280);
}
.reg-progress__item.is-active .reg-progress__label {
    color: var(--brand, #4C679D);
    font-weight: 600;
}

/* Étapes */
.reg-step[hidden] { display: none; }
.reg-step__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--nl-primary, #1c2330);
    margin: 0 0 4px;
}
.reg-step__desc {
    font-size: 0.84rem;
    color: var(--text-muted, #6b7280);
    margin: 0 0 1.1rem;
}

/* Carte « plan / abonnement » dans l'assistant d'inscription */
.reg-plan {
    border: 1px solid var(--border, #e3e6ea);
    border-radius: 12px;
    overflow: hidden;
}
.reg-plan__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    background: var(--brand-50, rgba(76, 103, 157, 0.08));
    border-bottom: 1px solid var(--border, #e3e6ea);
}
.reg-plan__name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--nl-primary, #1c2330);
}
.reg-plan__price {
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--brand, #4C679D);
}
.reg-plan__price small {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted, #6b7280);
}
.reg-plan__list {
    list-style: none;
    margin: 0;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.reg-plan__list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text, #1c2330);
}
.reg-plan__list i {
    color: var(--secondary, #647F54);
    flex-shrink: 0;
}
.reg-wizard__nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border, #e3e6ea);
}

@media (max-width: 575.98px) {
    .reg-wizard__card { padding: 1.5rem; }
    .reg-progress__label { font-size: 0.64rem; }
}

/* ══════════════════════════════════════════════════
   LOGIN GESTION — Écran scindé (page pleine)
   ══════════════════════════════════════════════════ */
.cp-login-body .np-main { animation: none; }
.cp-login {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Panneau visuel (photo de fond) */
.cp-login__visual {
    /* Tokens — défauts gestion (bleu/vert), surchargés par app. */
    --cp-login-visual-bg: #3A4F7A;
    --cp-login-visual-overlay:
        linear-gradient(150deg, rgba(58, 79, 122, 0.86) 0%, rgba(76, 103, 157, 0.60) 50%, rgba(100, 127, 84, 0.82) 100%);
    --cp-login-visual-image: url('/images/gestion/login/background.jpg');

    flex: 1 1 54%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: 56px;
    color: #fff;
    background-color: var(--cp-login-visual-bg);
    background-image:
        var(--cp-login-visual-overlay),
        var(--cp-login-visual-image);
    background-size: cover;
    background-position: center;
}
.cp-login__brand {
    font-family: var(--nl-font-heading, inherit);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #fff;
}
.cp-login__visual-inner { max-width: 480px; }
.cp-login__eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}
.cp-login__lead {
    margin: 14px 0 0;
    font-family: var(--nl-font-heading, inherit);
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 600;
}
.cp-login__brands {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cp-login__brands li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    padding: 9px 18px 9px 13px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
}
.cp-login__brands i { font-size: 1.15rem; opacity: 0.92; }
.cp-login__brands-sub {
    margin: 18px 0 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.82);
}

/* Panneau formulaire */
.cp-login__panel {
    flex: 1 1 46%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    background: #fff;
}
.cp-login__form-wrap {
    width: 100%;
    max-width: 400px;
}
.cp-login__head { margin-bottom: 1.75rem; }
.cp-login__logo {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    margin-bottom: 20px;
}
.cp-login__title {
    margin: 6px 0 4px;
    font-family: var(--nl-font-heading, inherit);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--brand, #4C679D);
}
.cp-login__subtitle {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-muted, #6b7280);
}
.cp-login__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 1.5rem 0 1rem;
    font-size: 0.82rem;
    color: var(--text-muted, #6b7280);
}
.cp-login__divider::before,
.cp-login__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border, #e3e6ea);
}

@media (max-width: 900px) {
    .cp-login { flex-direction: column; }
    .cp-login__visual {
        flex: 0 0 auto;
        min-height: 200px;
        padding: 32px;
    }
    .cp-login__panel {
        flex: 1 1 auto;
        padding: 40px 24px;
    }
}

/* Cartes-photo de choix de profil (pop-up « Créer un compte ») */
.cp-role-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
.cp-role-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 270px;
    padding: 16px;
    border-radius: var(--radius-lg, 14px);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background-color: #3A4F7A;
    background-size: cover;
    background-position: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* Voile sombre pour la lisibilité du texte */
.cp-role-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18, 22, 30, 0) 28%, rgba(18, 22, 30, 0.86) 100%);
}
.cp-role-card > * { position: relative; z-index: 1; }
.cp-role-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(18, 22, 30, 0.28);
    color: #fff;
}
.cp-role-card__icon {
    align-self: flex-start;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(3px);
}
.cp-role-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cp-role-card__title {
    font-family: var(--nl-font-heading, inherit);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.25;
}
.cp-role-card__desc {
    font-size: 0.8rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.86);
}
/* Photo de fond + dégradé de repli par catégorie */
.cp-role-card--celebrant {
    background-image: url('/images/gestion/inscription/celebrant.jpg'),
        linear-gradient(150deg, #3A4F7A, #4C679D);
}
.cp-role-card--musicien {
    background-image: url('/images/gestion/inscription/musicien.jpg'),
        linear-gradient(150deg, #4C679D, #2f4068);
}
.cp-role-card--intervenant {
    background-image: url('/images/gestion/inscription/intervenant.jpg'),
        linear-gradient(150deg, #647F54, #445a39);
}
.cp-role-card--mariage {
    background-image: url('/images/gestion/inscription/mariage.jpg'),
        linear-gradient(150deg, #4C679D, #647F54);
}
.cp-role-card--funerailles {
    background-image: url('/images/gestion/inscription/funerailles.jpg'),
        linear-gradient(150deg, #3A4F7A, #5a6f7a);
}

/* ── Écran d'inscription scindé (réutilise .cp-login) ───────────── */
.cp-reg-visual {
    overflow: hidden;
}
.cp-reg-visual--musicien    { background-image: linear-gradient(150deg, #4C679D, #2f4068); }
.cp-reg-visual--celebrant   { background-image: linear-gradient(150deg, #3A4F7A, #4C679D); }
.cp-reg-visual--intervenant { background-image: linear-gradient(150deg, #647F54, #445a39); }

.cp-reg-slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.cp-reg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.1s ease;
}
.cp-reg-slide.is-active { opacity: 1; }

/* Voile sombre pour la lisibilité du texte par-dessus les photos */
.cp-reg-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(160deg, rgba(18, 22, 30, 0.32) 0%, rgba(18, 22, 30, 0.78) 100%);
}
.cp-reg-visual .cp-login__brand,
.cp-reg-visual .cp-login__visual-inner {
    position: relative;
    z-index: 2;
}

.cp-reg-panel {
    align-items: stretch;
    overflow-y: auto;
}
.cp-reg-panel__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}
.cp-reg-logo-zone {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 130px;
    padding: 24px 0;
}
.cp-reg-logo {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
}
.reg-wizard__col {
    width: 100%;
    flex: 0 0 auto;
}
.reg-wizard__card--flush {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

/* ══════════════════════════════════════════════════
   DEROULE SIDEBAR — Sticky side panels
   ══════════════════════════════════════════════════ */

.deroule-sidebar {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--nl-radius);
    padding: 1.25rem;
}

/* ══════════════════════════════════════════════════
   LIBRARY PREVIEW — Compact items in sidebar
   ══════════════════════════════════════════════════ */

.library-kind-header {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--nl-primary);
    margin-top: 0.75rem;
    margin-bottom: 0.4rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--nl-tertiary);
}
.library-kind-group:first-child .library-kind-header {
    margin-top: 0;
}

.library-preview-item {
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    font-size: 0.82rem;
    line-height: 1.3;
    transition: background 0.15s;
    cursor: pointer;
}
.library-preview-item:hover {
    background: var(--brand-50);
}
.library-preview-item.highlight {
    background: rgba(var(--nl-primary-rgb, 11, 29, 81), 0.08);
    font-weight: 600;
}
.library-preview-item .library-add-btn {
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0.15rem 0.35rem;
    font-size: 0.75rem;
}
.library-preview-item:hover .library-add-btn {
    opacity: 1;
}

.library-flat-list {
    max-height: calc(100vh - 320px);
    overflow-y: auto;
}
.library-flat-item.hidden {
    display: none;
}

/* Kind checkbox list (searchable) */
.kind-checkbox-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--nl-radius, 0.75rem);
    padding: 0.5rem;
}
.kind-checkbox-list .form-check {
    padding: 0.25rem 0.5rem 0.25rem 1.75rem;
    border-radius: 0.25rem;
}
.kind-checkbox-list .form-check:hover {
    background: rgba(var(--nl-primary-rgb, 11, 29, 81), 0.04);
}

.library-preview-title {
    word-break: break-word;
}

/* ══════════════════════════════════════════════════
   REPERTOIRE PAGE — Liste centrale & panneau de détail
   ══════════════════════════════════════════════════ */

.repertoire-entry-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--nl-radius);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
/* Léger lavis dégradé depuis le bord coloré — adoucit le tout-blanc */
.repertoire-entry-card.is-library {
    border-left: 4px solid var(--brand, #4C679D);
    background: linear-gradient(90deg, var(--brand-50) 0%, #fff 58%);
}
.repertoire-entry-card.is-custom {
    border-left: 4px dashed #8b5cf6;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.08) 0%, #fff 58%);
}
.repertoire-entry-card:hover {
    border-color: var(--brand-100);
}
.repertoire-entry-card.is-library:hover {
    background: linear-gradient(90deg, var(--brand-100) 0%, var(--brand-50) 72%);
}
.repertoire-entry-card.is-custom:hover {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.16) 0%, rgba(139, 92, 246, 0.04) 72%);
}
.repertoire-entry-card.selected {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--ring);
}
.repertoire-entry-card.is-library.selected {
    background: linear-gradient(90deg, var(--brand-100) 0%, var(--brand-50) 82%);
}
.repertoire-entry-card.is-custom.selected {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.18) 0%, rgba(139, 92, 246, 0.05) 82%);
}

.repertoire-entry-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 2px 5px rgba(18, 22, 30, 0.16);
}
/* Pastilles en dégradé plein, icône blanche — vraies touches de couleur */
.repertoire-entry-card.is-library .repertoire-entry-icon {
    background: linear-gradient(135deg, var(--brand, #4C679D), #3a4f7a);
    color: #fff;
}
.repertoire-entry-card.is-custom .repertoire-entry-icon {
    background: linear-gradient(135deg, #a78bfa, #7c4dde);
    color: #fff;
}

/* Bouton de lecture sur les cartes du répertoire */
.repertoire-play-btn {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--brand, #4C679D);
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, transform .15s ease;
}
.repertoire-play-btn:hover {
    background: var(--brand-100, rgba(76, 103, 157, 0.12));
    transform: scale(1.05);
}
.repertoire-play-btn i { display: block; }

.repertoire-detail-panel {
    min-height: 400px;
}
.repertoire-detail-header h6 {
    word-break: break-word;
}

/* ══════════════════════════════════════════════════
   COMMENTS — Chat thread
   ══════════════════════════════════════════════════ */

#commentsOffcanvas {
    width: 400px;
}
@media (max-width: 576px) {
    #commentsOffcanvas {
        width: 100%;
    }
}

.comment-item {
    padding: 0.75rem;
    border-radius: var(--nl-radius);
    margin-bottom: 0.5rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    transition: background 0.15s;
}
.comment-item:hover {
    background: rgba(0, 0, 0, 0.03);
}
.comment-item.comment-own {
    background: rgba(0, 0, 0, 0.04);
}

.comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--nl-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.comment-author {
    font-size: 0.85rem;
    color: var(--nl-primary);
}

.comment-content {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-top: 0.25rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.comment-actions .btn {
    font-size: 0.75rem;
}

/* ══════════════════════════════════════════════════
   ROLE SELECTION MODAL
   ══════════════════════════════════════════════════ */

.modal .btn[data-role] {
    border-width: 2px;
    transition: all 0.2s ease;
}
.modal .btn[data-role]:hover {
    background-color: var(--nl-primary);
    border-color: var(--nl-primary);
    color: #fff;
}
.modal .btn[data-role]:hover small {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ══════════════════════════════════════════════════
   ANNUAIRE — Cartes & Listing
   ══════════════════════════════════════════════════ */

.annuaire-card {
    border: none;
    border-radius: var(--nl-radius);
    box-shadow: var(--nl-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}
.annuaire-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--nl-shadow-lg);
}
.annuaire-card-img-wrap {
    position: relative;
    overflow: hidden;
}
.annuaire-card-img {
    height: 200px;
    object-fit: cover;
    width: 100%;
    display: block;
}
.annuaire-card-placeholder {
    height: 200px;
}
.annuaire-card-cat-badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    background: rgba(255, 255, 255, 0.92);
    color: var(--nl-primary);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
}
.annuaire-badge {
    font-size: 0.7rem;
    padding: 0.2em 0.55em;
    border-radius: 0.35rem;
}

/* ── Home : hero + grille catégories ── */
.annuaire-hero {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--nl-primary) 8%, #fff) 0%,
        color-mix(in srgb, var(--nl-primary) 3%, #fff) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--nl-primary) 12%, transparent);
}
.annuaire-hero-search {
    max-width: 720px;
}
.annuaire-hero-search .input-group-text {
    color: var(--nl-primary);
}

.annuaire-cat-grid .annuaire-cat-card .card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: var(--nl-radius);
}
.annuaire-cat-grid .annuaire-cat-card:hover .card {
    transform: translateY(-3px);
    box-shadow: var(--nl-shadow-lg);
}
.annuaire-cat-icon {
    font-size: 2.2rem;
    color: var(--nl-primary);
}

.annuaire-category-header .breadcrumb {
    --bs-breadcrumb-divider: '›';
}

/* ── Hero (page publique musicien/collectif) ── */
.annuaire-hero-photo {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 4px solid var(--nl-primary);
}

.annuaire-block-photo {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
}

/* ══════════════════════════════════════════════════
   PROFILE EDITOR — Blocs drag-and-drop
   ══════════════════════════════════════════════════ */

.profile-block {
    border: 2px solid #e9ecef;
    border-radius: var(--nl-radius);
    padding: 1rem;
    background: #fff;
    box-shadow: var(--nl-shadow);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.profile-block:hover {
    border-color: color-mix(in srgb, var(--nl-primary) 30%, transparent);
}

.profile-block .drag-handle {
    cursor: grab;
    color: #adb5bd;
    font-size: 1.3rem;
    padding: 0.25rem;
    user-select: none;
    touch-action: none;
    min-width: 28px;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.profile-block .drag-handle:active {
    cursor: grabbing;
}

.profile-block .block-actions {
    opacity: 0;
    transition: opacity 0.15s ease;
}
.profile-block:hover .block-actions {
    opacity: 1;
}

/* SortableJS ghost */
.profile-block.sortable-ghost {
    opacity: 0.35;
    border-color: var(--nl-primary);
    border-style: dashed;
}
.profile-block.sortable-chosen {
    box-shadow: var(--nl-shadow-lg);
}

/* ══════════════════════════════════════════════════
   ANNUAIRE + EDITOR — Responsive
   ══════════════════════════════════════════════════ */

/* Mobile : < 576px */
@media (max-width: 575.98px) {
    .annuaire-card-img,
    .annuaire-card-placeholder {
        height: 160px;
    }
    .annuaire-hero-photo {
        width: 110px;
        height: 110px;
    }
    .annuaire-block-photo {
        max-height: 300px;
    }

    /* Editor : always show actions on mobile (no hover) */
    .profile-block .block-actions {
        opacity: 1;
    }
    .profile-block .drag-handle {
        font-size: 1.5rem;
        padding: 0.5rem;
        min-height: 48px;
    }
    .profile-block {
        padding: 0.75rem;
    }
}

/* Tablet : 576–768px */
@media (min-width: 576px) and (max-width: 767.98px) {
    .annuaire-card-img,
    .annuaire-card-placeholder {
        height: 180px;
    }
}

/* Larger screens */
@media (min-width: 992px) {
    .annuaire-hero-photo {
        width: 180px;
        height: 180px;
    }
}

/* ========================================================================
   PAROISSES — composants UI (PR #2/#3/#4)
   Charte NuptiaLogos · Bleu Nuit + Argenté · sobriété/fluidité
   ======================================================================== */

/* Cards génériques */
.np-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.np-card.np-card--interactive {
  display: block;
  text-decoration: none;
  color: inherit;
}
.np-card.np-card--interactive:hover {
  border-color: var(--brand-100);
  box-shadow: var(--shadow-sm);
}
.np-card.np-card--interactive:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

.np-page-title {
  font-size: var(--fs-32);
  line-height: var(--lh-tight);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}
@media (max-width: 575.98px) {
  .np-page-title { font-size: var(--fs-24); }
}

/* Avatar */
.np-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand);
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.np-avatar--md { width: 48px; height: 48px; }
.np-avatar--xl { width: 64px; height: 64px; font-size: 22px; }
.np-avatar--xl i { font-size: 28px; }
.np-avatar { overflow: hidden; }
.np-avatar__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Badge gestionnaire */
.np-badge--gestionnaire {
  background: var(--brand-100);
  color: var(--brand);
  font-weight: 500;
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
}

/* === Page recherche === */
.np-search-page {
  background: linear-gradient(180deg, var(--brand-50) 0%, var(--bg) 60%);
  min-height: calc(100vh - 64px);
}
.np-search-page__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--text);
  margin-bottom: var(--space-2);
}
.np-search-page__lead {
  font-size: var(--fs-18);
  color: var(--text-muted);
  margin: 0;
}

.np-search-form { width: 100%; }
.np-search-input {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 16px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.np-search-input:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring);
}
.np-search-input__icon {
  color: var(--text-muted);
  font-size: 20px;
  margin-right: 12px;
}
.np-search-input__field {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--fs-18);
  color: var(--text);
  min-width: 0;
}
.np-search-input__field::placeholder { color: var(--text-subtle); }
.np-search-input__clear {
  background: none;
  border: none;
  padding: 8px;
  margin: -8px -8px -8px 0;
  color: var(--text-subtle);
  cursor: pointer;
  border-radius: 50%;
  min-width: 44px;
  min-height: 44px;
}
.np-search-input__clear:hover { color: var(--text); }

/* Résultats */
.np-result-list { display: flex; flex-direction: column; gap: 12px; padding: 0; margin: 0; }
.np-result-card {
  --stagger: 0;
  opacity: 0;
  transform: translateY(8px);
  animation: np-fade-in var(--dur-slow) var(--ease) forwards;
  animation-delay: calc(var(--stagger) * 30ms);
}
@media (prefers-reduced-motion: reduce) {
  .np-result-card { opacity: 1; transform: none; animation: none; }
}
@keyframes np-fade-in {
  to { opacity: 1; transform: translateY(0); }
}

.np-result-card__link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  min-height: 44px;
}
.np-result-card__link:hover {
  border-color: var(--brand-100);
  box-shadow: var(--shadow-sm);
}
.np-result-card__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}
.np-result-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand);
  flex-shrink: 0;
}
.np-result-card__avatar i { font-size: 20px; }
.np-result-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.np-result-card__name { font-weight: 600; font-size: var(--fs-16); color: var(--text); }
.np-result-card__meta {
  font-size: var(--fs-14);
  color: var(--text-muted);
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.np-result-card__cta {
  display: inline-flex;
  align-items: center;
  color: var(--brand);
  font-weight: 500;
  font-size: var(--fs-14);
  flex-shrink: 0;
}
@media (max-width: 575.98px) {
  .np-result-card__cta { display: none; }
}

/* Séparateur "ou" */
.np-or { display: inline-flex; align-items: center; gap: 12px; }
.np-or::before, .np-or::after {
  content: '';
  display: inline-block;
  width: 64px;
  height: 1px;
  background: var(--border);
}

/* === Wizard === */
.np-wizard {
  background: var(--bg);
  min-height: calc(100vh - 64px);
}
.np-wizard__header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 64px;
  z-index: var(--z-sticky-local);
}
.np-progress {
  display: flex;
  gap: 6px;
  width: 100%;
  max-width: 480px;
}
.np-progress__seg {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur) var(--ease);
}
.np-progress__seg.is-active { background: var(--brand); }
.np-progress__label {
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.np-wizard__title {
  font-size: var(--fs-32);
  line-height: var(--lh-tight);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
@media (max-width: 575.98px) {
  .np-wizard__title { font-size: var(--fs-24); }
}
.np-wizard__lead { font-size: var(--fs-18); margin-bottom: var(--space-6); }
.np-wizard__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-8);
  gap: 12px;
}
.np-wizard__cta { min-width: 160px; }
@media (max-width: 575.98px) {
  .np-wizard__actions {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 12px 16px;
    margin-left: -16px;
    margin-right: -16px;
    margin-top: var(--space-6);
    z-index: var(--z-sticky-local);
  }
  .np-wizard__cta { flex: 1; }
}

/* Form */
.np-form .form-control,
.np-form .form-select {
  min-height: 44px;
  border-color: var(--border);
}
.np-form .form-control:focus,
.np-form .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring);
}
.np-form .form-control-lg,
.np-form .form-select-lg { min-height: 52px; font-size: var(--fs-18); }
.np-form .form-label { font-weight: 500; margin-bottom: 6px; }

/* Info card */
.np-info-card {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-md);
  font-size: var(--fs-14);
  color: var(--text);
}
.np-info-card > i {
  color: var(--brand);
  font-size: 20px;
  flex-shrink: 0;
}

/* Collapsible */
.np-collapsible__toggle {
  display: flex;
  align-items: center;
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  min-height: 48px;
  transition: background-color var(--dur) var(--ease);
}
.np-collapsible__toggle:hover { background: var(--surface-hover); }
.np-collapsible__chevron { transition: transform var(--dur) var(--ease); }
.np-collapsible__toggle[aria-expanded="true"] .np-collapsible__chevron {
  transform: rotate(180deg);
}
.np-collapsible__body { padding: 16px 0; }

.np-invitation-line { margin-bottom: 8px; }

/* === Hub paroisse === */
.np-paroisse-header {}
.np-credits-banner {
  background: linear-gradient(135deg, var(--brand-50) 0%, var(--surface) 100%);
  border-color: var(--brand-100);
}
.np-credits-banner__label {
  font-size: var(--fs-14);
  color: var(--text-muted);
  margin-bottom: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.np-credits-banner__value {
  font-size: var(--fs-32);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
}

.np-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.np-list-item:first-child { border-top: none; }

.np-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: var(--fs-14);
  text-decoration: none;
  color: inherit;
}
.np-alert--warning {
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
}
.np-alert--warning:hover {
  filter: brightness(0.97);
  color: var(--warning);
}

.np-welcome-banner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.np-action-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  height: 100%;
}
.np-action-card:hover {
  border-color: var(--brand-100);
  background: var(--surface);
}
.np-action-card i {
  font-size: 24px;
  color: var(--brand);
}
.np-action-card span {
  font-size: var(--fs-14);
  color: var(--text-muted);
}

/* === Équipe === */
.np-chips { display: flex; gap: 8px; flex-wrap: wrap; overflow-x: auto; }
.np-chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.np-chip:hover { background: var(--surface-hover); color: var(--text); }
.np-chip.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-on);
}

.np-team-section__title {
  font-size: var(--fs-18);
  font-weight: 600;
  margin-bottom: 14px;
  color: var(--text);
}

.np-member-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  height: 100%;
}
.np-member-card:hover {
  border-color: var(--brand-100);
  box-shadow: var(--shadow-sm);
}
.np-member-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
  overflow: hidden;
}
.np-member-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.np-member-card__body { flex: 1; min-width: 0; }
.np-member-card__name {
  font-size: var(--fs-16);
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--text);
}
.np-member-card__fonction {
  font-size: var(--fs-14);
  color: var(--text-muted);
  margin: 0 0 6px;
}
.np-member-card__menu {
  position: absolute;
  top: 8px;
  right: 8px;
}

/* === Crédits === */
.np-credit-balance {
  text-align: center;
  background: linear-gradient(180deg, var(--brand-50) 0%, var(--surface) 100%);
  border-color: var(--brand-100);
}
.np-credit-balance__label {
  font-size: var(--fs-14);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.np-credit-balance__value {
  font-size: clamp(48px, 10vw, 64px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
  margin: 0;
}
.np-credit-balance__caption {
  font-size: var(--fs-14);
  color: var(--text-muted);
  margin: 8px 0 0;
}

.np-pricing-list { display: flex; flex-direction: column; gap: 8px; }
.np-pricing-tier {
  display: block;
  cursor: pointer;
}
.np-pricing-tier__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.np-pricing-tier__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.np-pricing-tier__radio:checked + .np-pricing-tier__inner {
  border-color: var(--brand);
  background: var(--brand-50);
}
.np-pricing-tier__price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.np-pricing-tier__unit { white-space: nowrap; }

.np-stepper {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  max-width: 220px;
  overflow: hidden;
}
.np-stepper__btn {
  background: var(--surface-2);
  border: none;
  width: 44px;
  font-size: 18px;
  color: var(--text);
  cursor: pointer;
}
.np-stepper__btn:hover { background: var(--surface-hover); }
.np-stepper__input {
  border: none !important;
  border-left: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
  border-radius: 0 !important;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.np-history { display: flex; flex-direction: column; gap: 4px; }
.np-history__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.np-history__item:first-child { border-top: none; }
.np-history__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  flex-shrink: 0;
}
.np-history__body { flex: 1; min-width: 0; }
.np-history__amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-16);
}
.np-history__amount--positive { color: var(--success); }
.np-history__amount--negative { color: var(--text-muted); }

/* === Sélecteur paroisse navbar === */
.np-paroisse-selector { margin-right: 8px; }
.np-paroisse-selector__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: var(--fs-14);
  font-weight: 500;
  max-width: 220px;
  height: 40px;
}
.np-paroisse-selector__btn:hover { background: var(--surface-hover); }
.np-paroisse-selector__photo {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.np-paroisse-selector__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}
@media (max-width: 575.98px) {
  .np-paroisse-selector__name { max-width: 90px; }
}

/* === Empty states === */
.np-empty {
  text-align: center;
  padding: 32px 16px;
}
.np-empty--centered {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 48px 24px;
}
.np-empty__icon {
  font-size: 40px;
  color: var(--text-subtle);
  display: block;
  margin-bottom: 12px;
}

/* === Paroisse cards (index) === */
.np-paroisse-card { padding: var(--space-4); height: 100%; }
.np-paroisse-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.np-paroisse-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand);
  font-size: 22px;
  overflow: hidden;
}
.np-paroisse-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.np-paroisse-card__name {
  font-size: var(--fs-18);
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--text);
}
.np-paroisse-card__meta {
  font-size: var(--fs-14);
  color: var(--text-muted);
  margin: 0 0 16px;
}
.np-paroisse-card__stats {
  display: flex;
  gap: 16px;
  font-size: var(--fs-14);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Liste de paroisses checkbox dans CelebrationType */
.np-paroisse-checks .form-check {
  padding: 10px 12px 10px 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.np-paroisse-checks .form-check:hover {
  border-color: var(--brand-100);
  background: var(--surface-2);
}
.np-paroisse-checks .form-check-input:checked ~ .form-check-label {
  font-weight: 500;
  color: var(--text);
}
.np-paroisse-checks .form-check-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring);
}

/* === Picker section paroisse de la célébration === */
.np-picker {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.np-picker:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring);
}

.np-picker__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.np-picker__chips:empty { margin-bottom: 0; }

.np-chip-removable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  color: var(--text);
  padding: 4px 6px 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-14);
  max-width: 100%;
}
.np-chip-removable > i { color: var(--brand); flex-shrink: 0; }
.np-chip-removable__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.np-chip-removable__close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 4px;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.np-chip-removable__close:hover { color: var(--danger); background: var(--surface); }

.np-picker__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
}
.np-picker__search-icon { color: var(--text-subtle); }
.np-picker__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--fs-14);
  min-height: 36px;
  color: var(--text);
}
.np-picker__input::placeholder { color: var(--text-subtle); }

.np-picker__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 320px;
  overflow-y: auto;
  z-index: var(--z-floating-local);
}
.np-picker__group { padding: 6px 0; }
.np-picker__group + .np-picker__group { border-top: 1px solid var(--border); }
.np-picker__group-label {
  padding: 4px 14px;
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
  font-weight: 600;
}
.np-picker__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  min-height: 44px;
}
.np-picker__item:hover { background: var(--surface-hover); }
.np-picker__item > i { color: var(--brand); font-size: 18px; flex-shrink: 0; }
.np-picker__item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.np-picker__item-body strong { font-weight: 500; font-size: var(--fs-14); }
.np-picker__item-body small { color: var(--text-muted); font-size: var(--fs-12); }
.np-picker__item-action {
  font-size: var(--fs-12);
  color: var(--brand);
  font-weight: 500;
  flex-shrink: 0;
}
.np-picker__item[data-already-added="1"] { opacity: 0.5; pointer-events: none; }
.np-picker__item[data-already-added="1"] .np-picker__item-action::before { content: "✓ Ajouté"; }
.np-picker__item[data-already-added="1"] .np-picker__item-action { color: var(--text-subtle); font-size: 0; }
.np-picker__item[data-already-added="1"] .np-picker__item-action::before { font-size: var(--fs-12); }
.np-picker__empty {
  padding: 16px;
  color: var(--text-muted);
  text-align: center;
  font-size: var(--fs-14);
}

/* ═══ Paroisse dashboard (refonte) ═══════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────── */
.np-paroisse-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.np-paroisse-hero__main {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.np-paroisse-hero__avatar {
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--border);
}
.np-paroisse-hero__text { min-width: 0; }
.np-paroisse-hero__actions { flex-shrink: 0; }

/* ── Section title ────────────────────────────────────────────── */
.np-section-title {
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* (Typographie gestion consolidée plus bas dans la section CHARTE CELEBRATION PRO) */

.np-section-title__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin-left: 8px;
  border-radius: var(--radius-pill);
  background: var(--brand-100);
  color: var(--brand);
  font-size: var(--fs-12);
  font-weight: 600;
}

/* ── Quick actions ────────────────────────────────────────────── */
.np-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.np-quick-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.np-quick-action:hover {
  border-color: var(--brand);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.np-quick-action__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--brand-50);
  color: var(--brand);
  font-size: 18px;
  flex-shrink: 0;
}
.np-quick-action__label {
  font-weight: 500;
  font-size: var(--fs-14);
}
.np-quick-action--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-on);
}
.np-quick-action--primary:hover {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: var(--brand-on);
}
.np-quick-action--primary .np-quick-action__icon {
  background: rgba(255, 255, 255, 0.15);
  color: var(--brand-on);
}

/* ── Alert cards ──────────────────────────────────────────────── */
.np-alerts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.np-alert-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  text-decoration: none;
  color: var(--text);
  transition: transform 0.15s, box-shadow 0.15s;
}
.np-alert-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}
.np-alert-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 18px;
  flex-shrink: 0;
}
.np-alert-card__label {
  flex: 1;
  font-weight: 500;
  font-size: var(--fs-14);
}
.np-alert-card__cta {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--brand);
  white-space: nowrap;
}
.np-alert-card--warning { border-left-color: var(--warning); }
.np-alert-card--warning .np-alert-card__icon { background: var(--warning-bg); color: var(--warning); }
.np-alert-card--danger { border-left-color: var(--danger); }
.np-alert-card--danger .np-alert-card__icon { background: var(--danger-bg); color: var(--danger); }
.np-alert-card--info { border-left-color: var(--info); }
.np-alert-card--info .np-alert-card__icon { background: var(--info-bg); color: var(--info); }

/* ── KPIs ─────────────────────────────────────────────────────── */
.np-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.np-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.np-kpi__label {
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 600;
}
.np-kpi__value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.np-kpi__sub {
  font-size: var(--fs-12);
  color: var(--text-muted);
}
.np-kpi__link {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  margin-top: 2px;
}

/* ── Celebrations card ───────────────────────────────────────── */
.np-celebrations__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}
.np-celebrations__footer {
  margin-top: 12px;
  text-align: center;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* ── Tabs ─────────────────────────────────────────────────────── */
.np-tabs {
  display: inline-flex;
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 2px;
}
.np-tab {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.np-tab:hover { color: var(--text); }
.np-tab--active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}
.np-tab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: var(--brand-on);
  font-size: 0.7rem;
  font-weight: 700;
}

/* ── Celebration row ──────────────────────────────────────────── */
.np-cel-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.np-cel-row {
  border-top: 1px solid var(--border);
}
.np-cel-row:first-child { border-top: none; }
.np-cel-row__link {
  display: grid;
  grid-template-columns: 64px 1fr auto 16px;
  align-items: center;
  gap: 16px;
  padding: 16px 4px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s;
}
.np-cel-row__link:hover { background: var(--surface-hover); color: var(--text); }
.np-cel-row--has-alerts .np-cel-row__link {
  position: relative;
}
.np-cel-row--has-alerts .np-cel-row__link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--warning);
}
.np-cel-row__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6px 4px;
  background: var(--brand-50);
  border-radius: var(--radius-sm);
  line-height: 1.1;
}
.np-cel-row__day {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand);
}
.np-cel-row__month {
  font-size: var(--fs-12);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand);
  letter-spacing: 0.04em;
}
.np-cel-row__time {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.np-cel-row__identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.np-cel-row__type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.np-cel-row__type-badge--wedding { background: #FCE7F0; color: #B43872; }
.np-cel-row__type-badge--funeral { background: #E5E7EB; color: #4B5563; }
.np-cel-row__title {
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--text);
}
.np-cel-row__sub {
  font-size: var(--fs-12);
}
.np-cel-row__metrics {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.np-cel-row__chevron { color: var(--text-muted); font-size: 14px; }

@media (max-width: 767.98px) {
  .np-cel-row__link {
    grid-template-columns: 56px 1fr 16px;
    grid-template-rows: auto auto;
    row-gap: 8px;
  }
  .np-cel-row__chevron { grid-row: 1; grid-column: 3; align-self: start; }
  .np-cel-row__metrics {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* ── Pills ────────────────────────────────────────────────────── */
.np-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-12);
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
}
.np-pill--success { background: var(--success-bg); color: var(--success); }
.np-pill--warning { background: var(--warning-bg); color: var(--warning); }
.np-pill--danger { background: var(--danger-bg); color: var(--danger); }
.np-pill--info { background: var(--info-bg); color: var(--info); }
.np-pill--muted { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }

/* ── Empty state soft ────────────────────────────────────────── */
.np-empty--soft {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
}
.np-empty--soft .np-empty__icon { font-size: 32px; margin-bottom: 8px; }

/* ── Credits card ─────────────────────────────────────────────── */
.np-credits-card__value {
  margin: 0;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--brand);
  font-weight: 700;
}
.np-credits-card__value strong { font-weight: 700; }


/* ── Paroisse dashboard : ajouts ─────────────────────────────── */
.np-celebrations__filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.np-tabs--ghost {
  background: transparent;
  padding: 2px;
  border: 1px solid var(--border);
}
.np-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 2px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
}
.np-tab--active .np-tab__count {
  background: var(--brand-100);
  color: var(--brand);
}

/* Team list */
.np-team-list { display: flex; flex-direction: column; gap: 8px; }
.np-team-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.np-team-list__body { min-width: 0; flex: 1; }
.np-team-list__body strong {
  font-weight: 500;
  font-size: var(--fs-14);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-team-more {
  display: inline-block;
  margin-top: 12px;
  font-size: var(--fs-12);
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
}
.np-team-more:hover { text-decoration: underline; }
.text-brand { color: var(--brand); font-weight: 500; }

/* ============================================================
   COLLECTIF — Galerie & Lightbox
   ============================================================ */
.collectif-gallery-thumb {
  border: none;
  background: none;
  cursor: zoom-in;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.collectif-gallery-thumb:hover { transform: scale(1.02); box-shadow: var(--shadow-sm); }
.collectif-gallery-thumb img { display: block; }

.collectif-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: var(--z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.collectif-lightbox__image {
  max-width: 95vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.collectif-lightbox__close,
.collectif-lightbox__nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: background 120ms ease;
}
.collectif-lightbox__close:hover,
.collectif-lightbox__nav:hover { background: rgba(255, 255, 255, 0.25); }
.collectif-lightbox__close { top: 16px; right: 16px; }
.collectif-lightbox__nav--prev { left: 16px; top: 50%; transform: translateY(-50%); }
.collectif-lightbox__nav--next { right: 16px; top: 50%; transform: translateY(-50%); }
.collectif-lightbox__caption {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  max-width: 80%;
  font-size: var(--fs-14);
  text-align: center;
}
@media (max-width: 575.98px) {
  .collectif-lightbox__close { width: 36px; height: 36px; font-size: 16px; }
  .collectif-lightbox__nav { width: 36px; height: 36px; font-size: 16px; }
}


/* ────────────────────────────────────────────────────────────────────────────── *
 * ANNUAIRE — design éditorial premium liturgique
 * ────────────────────────────────────────────────────────────────────────────── */

:root {
    /* Charte alignée sur Celebration Pro (figée sur tous les domaines) :
       palette bleu/vert NuptiaLogos + SF Pro, découplée de --brand
       (qui est remappé par app) pour rester identique mariage/adieu/gestion. */
    --ann-bg: #F5F7FB;            /* CP --bg */
    --ann-bg-soft: #EDF1F8;       /* surface bleutée douce */
    --ann-ink: #19283A;           /* CP --text */
    --ann-ink-muted: #5C667B;     /* CP --text-muted */
    --ann-line: #E4E8EF;          /* CP --border */
    --ann-accent: #4C679D;        /* CP --brand */
    --ann-accent-soft: #6A82B2;   /* CP --brand-400 */
    --ann-accent-strong: #3A4F7A; /* CP --brand-700 (survol CTA) */
    --ann-shadow-card: var(--shadow-md);
    --ann-shadow-card-hover: var(--shadow-lg);
    --ann-radius: 14px;
    --ann-radius-sm: 10px;
    --ann-radius-pill: 999px;
    --ann-font-heading:
        -apple-system, BlinkMacSystemFont,
        "SF Pro Display", "SF Pro Text",
        "Segoe UI", "Roboto",
        "Helvetica Neue", Arial, sans-serif;
}

/* Scope annuaire (classe posée sur <body> par AnnuaireController) :
   la STRUCTURE reste neutre (surfaces/typo via --ann-bg/--ann-ink…), mais
   l'ACCENT s'adapte à la plateforme d'entrée (cf. blocs [data-app] ci-dessous).
   On remappe --brand sur l'accent annuaire pour que la règle de lien générique
   [data-app] et tout usage de --brand suivent l'accent courant. */
.annuaire-scope {
    --brand:      var(--ann-accent);
    --brand-700:  var(--ann-accent-strong);
    --brand-600:  var(--ann-accent-strong);
    --brand-500:  var(--ann-accent);
    --brand-400:  var(--ann-accent-soft);
    --nl-primary: var(--ann-accent);
    /* Accent secondaire pour les dégradés (mono par défaut = même que l'accent). */
    --ann-accent-2: var(--ann-accent);
    /* Dégradé de marque (violet→orange sur NMDM, mono ailleurs). */
    --ann-gradient: linear-gradient(135deg, var(--ann-accent) 0%, var(--ann-accent-2) 100%);
    /* Version douce ~30 % pour les fonds d'icônes / surfaces. */
    --ann-gradient-soft: linear-gradient(135deg,
        color-mix(in srgb, var(--ann-accent) 30%, transparent) 0%,
        color-mix(in srgb, var(--ann-accent-2) 30%, transparent) 100%);
    /* Version pastel claire pour les grands fonds de section (carte posée dessus). */
    --ann-gradient-pastel: linear-gradient(105deg,
        color-mix(in srgb, var(--ann-accent) 16%, #FFFFFF) 0%,
        color-mix(in srgb, var(--ann-accent-2) 16%, #FFFFFF) 100%);
    /* Voile léger pour teinter une photo (hero) — tint discret ~10 %. */
    --ann-gradient-veil: linear-gradient(105deg,
        color-mix(in srgb, var(--ann-accent) 10%, transparent) 0%,
        color-mix(in srgb, var(--ann-accent-2) 10%, transparent) 100%);
}

/* Accent annuaire = couleur de la plateforme d'entrée. Scopé .annuaire-scope
   pour NE PAS toucher au reste de chaque app (adieu notamment ne définit pas
   --brand, d'où des valeurs explicites ici). La structure neutre est inchangée. */
[data-app="mariage"] .annuaire-scope {
    --ann-accent:        #663399;  /* NMDM --brand (violet) — solides : boutons, texte, eyebrow */
    --ann-accent-soft:   #8456B3;  /* NMDM --brand-400 */
    --ann-accent-strong: #4D2675;  /* NMDM --brand-700 */
    --ann-accent-2:      #FF9900;  /* NMDM orange (halos hero) */
    /* Dégradé de marque tel qu'utilisé sur le site NMDM (footer) : violet poudré → orange doux. */
    --ann-gradient: linear-gradient(105deg, #9D80B6 0%, #C68F8B 50%, #ECA869 100%);
    --ann-gradient-soft: linear-gradient(105deg,
        color-mix(in srgb, #9D80B6 38%, transparent) 0%,
        color-mix(in srgb, #ECA869 38%, transparent) 100%);
    --ann-gradient-pastel: linear-gradient(105deg,
        color-mix(in srgb, #9D80B6 38%, #FFFFFF) 0%,
        color-mix(in srgb, #C68F8B 36%, #FFFFFF) 50%,
        color-mix(in srgb, #ECA869 38%, #FFFFFF) 100%);
    --ann-gradient-veil: linear-gradient(105deg,
        color-mix(in srgb, #9D80B6 10%, transparent) 0%,
        color-mix(in srgb, #C68F8B 10%, transparent) 50%,
        color-mix(in srgb, #ECA869 10%, transparent) 100%);
}
[data-app="adieu"] .annuaire-scope {
    --ann-accent:        #1E3A5F;  /* NDA marine (--nl-primary) */
    --ann-accent-soft:   #5B7AA0;  /* marine clair (brand-mark) */
    --ann-accent-strong: #15293F;  /* marine foncé (survol) */
}
[data-app="gestion"] .annuaire-scope {
    --ann-accent:        #4C679D;  /* CP --brand (inchangé) */
    --ann-accent-soft:   #6A82B2;
    --ann-accent-strong: #3A4F7A;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.annuaire-hero {
    position: relative;
    background:
        radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--ann-accent) 16%, transparent), transparent 50%),
        radial-gradient(circle at 80% 100%, color-mix(in srgb, var(--ann-accent-2) 12%, transparent), transparent 55%),
        var(--ann-bg);
    border-bottom: 1px solid var(--ann-line);
    padding: clamp(64px, 10vw, 120px) 16px;
    overflow: hidden;
}
.annuaire-hero--with-photo {
    border-bottom: 0;
    background: var(--ann-ink); /* fallback le temps que les images chargent */
}

/* Diaporama : N slides en absolute, fondu enchaîné via @keyframes.
   Pour 5 slides : cycle de 30s, chaque slide visible ~5s + 1s de fade. */
.annuaire-hero__slideshow {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.annuaire-hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: annuaire-hero-fade 36s infinite;
    will-change: opacity;
}
/* 6 slides x 6s = 36s. Chaque slide visible ~5s, fade ~1s. */
.annuaire-hero__slide:nth-child(1) { animation-delay: 0s; }
.annuaire-hero__slide:nth-child(2) { animation-delay: 6s; }
.annuaire-hero__slide:nth-child(3) { animation-delay: 12s; }
.annuaire-hero__slide:nth-child(4) { animation-delay: 18s; }
.annuaire-hero__slide:nth-child(5) { animation-delay: 24s; }
.annuaire-hero__slide:nth-child(6) { animation-delay: 30s; }

@keyframes annuaire-hero-fade {
    0%    { opacity: 0; }
    3%    { opacity: 1; }  /* fade-in ~1s */
    16.6% { opacity: 1; }  /* visible ~5s */
    19.6% { opacity: 0; }  /* fade-out ~1s */
    100%  { opacity: 0; }
}

/* Respect des préférences utilisateur — pas d'animation si reduce-motion. */
@media (prefers-reduced-motion: reduce) {
    .annuaire-hero__slide {
        animation: none;
        opacity: 0;
    }
    .annuaire-hero__slide:nth-child(1) { opacity: 1; }
}

.annuaire-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        var(--ann-gradient-veil),
        linear-gradient(180deg, rgba(15, 21, 48, 0.50) 0%, rgba(15, 21, 48, 0.34) 42%, rgba(15, 21, 48, 0.58) 100%);
    pointer-events: none;
}
.annuaire-hero--with-photo .annuaire-hero__inner { position: relative; z-index: 1; }
.annuaire-hero__inner {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}
.annuaire-hero__eyebrow {
    font-family: var(--ann-font-heading);
    font-size: 0.95rem;
    color: var(--ann-accent);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 18px;
}
.annuaire-hero--with-photo .annuaire-hero__eyebrow {
    color: color-mix(in srgb, var(--ann-accent) 22%, #FFFFFF);
    text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
.annuaire-hero__title {
    font-family: var(--ann-font-heading);
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    line-height: 1.1;
    color: var(--ann-ink);
    margin: 0 0 14px;
    font-weight: 500;
}
.annuaire-hero--with-photo .annuaire-hero__title {
    color: #FFFFFF;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.annuaire-hero__lead {
    font-size: 1.05rem;
    color: var(--ann-ink-muted);
    max-width: 680px;
    margin: 0 auto 36px;
    line-height: 1.55;
}
.annuaire-hero--with-photo .annuaire-hero__lead {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/* Barre de recherche : une seule ligne sur desktop, empilée sur mobile */
.annuaire-hero__search {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    max-width: 880px;
    margin: 0 auto;
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius);
    padding: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
}
.annuaire-hero__search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    padding: 10px 14px;
    color: var(--ann-ink-muted);
    border-radius: var(--ann-radius-sm);
    min-width: 0;
}
.annuaire-hero__search-field input {
    border: 0;
    background: transparent;
    flex: 1;
    font-size: 1rem;
    color: var(--ann-ink);
    outline: none;
    min-width: 0;
    width: 100%;
}
.annuaire-hero__search-field input::placeholder { color: var(--ann-ink-muted); }
.annuaire-hero__search-field--city { flex: 0 1 200px; border-left: 1px solid var(--ann-line); }

@media (max-width: 575.98px) {
    .annuaire-hero__search { flex-wrap: wrap; padding: 8px; }
    .annuaire-hero__search-field { flex: 1 1 100%; }
    .annuaire-hero__search-field--city { border-left: 0; border-top: 1px solid var(--ann-line); }
}
.annuaire-hero__submit {
    background: var(--ann-accent);
    color: #FFFFFF;
    border: 0;
    border-radius: var(--ann-radius-sm);
    padding: 0 26px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
    flex: 0 0 auto;
    white-space: nowrap;
}
.annuaire-hero__submit:hover { background: var(--ann-accent-strong); }

/* ── Hero : ruban prestataire flottant (haut droite) ─────────────────────── */
.annuaire-hero__pro {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--ann-radius-pill);
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.34);
    backdrop-filter: blur(8px);
    color: #FFFFFF !important; /* <a> sur fond sombre : bat la sobriété de l'annuaire */
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.18s ease;
}
.annuaire-hero__pro-label { font-size: 0.82rem; font-weight: 500; white-space: nowrap; }
.annuaire-hero__pro-logo { height: 18px; width: auto; display: block; filter: brightness(0) invert(1); }
/* Survol : dégradé Celebration Pro (bleu → vert), logo + texte restent blancs. */
.annuaire-hero__pro:hover {
    background: linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 135%);
    border-color: transparent;
    color: #FFFFFF !important;
    box-shadow: 0 8px 24px rgba(58, 79, 122, 0.4);
}
@media (max-width: 575.98px) {
    .annuaire-hero__pro { top: 12px; right: 12px; padding: 8px 11px; }
    .annuaire-hero__pro-label { display: none; } /* garde le logo seul sur très petit écran */
}

/* ── Hero : onglets catégorie (liens /c/…) ───────────────────────────────── */
.annuaire-hero__cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 18px;
}
.annuaire-hero__cat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: var(--ann-radius-pill);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.26);
    backdrop-filter: blur(6px);
    color: #FFFFFF !important;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.18s ease;
}
.annuaire-hero__cat i { font-size: 0.95rem; opacity: 0.9; }
.annuaire-hero__cat:hover {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--ann-accent-strong) !important;
    transform: translateY(-1px);
}
.annuaire-hero__cat.is-active {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--ann-accent-strong) !important;
    font-weight: 600;
}

/* Onglets de navigation (catégorie / sous-catégorie) dans le hero des pages
   résultats : un libellé au-dessus d'une rangée de pills, bien espacés. */
.annuaire-cat-tabs { margin-top: 20px; }
.annuaire-cat-tabs__label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 8px;
}
.annuaire-cat-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Hero : champ « type de célébration » dans la barre ──────────────────── */
.annuaire-hero__search-field--select {
    flex: 0 1 240px;
    border-left: 1px solid var(--ann-line);
}
.annuaire-hero__search-field--select select {
    border: 0;
    background: transparent;
    flex: 1;
    font-size: 1rem;
    color: var(--ann-ink);
    outline: none;
    min-width: 0;
    width: 100%;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237A8699'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 12px;
}
@media (max-width: 575.98px) {
    .annuaire-hero__search-field--select { flex: 1 1 100%; border-left: 0; border-top: 1px solid var(--ann-line); }
}

/* ── Hero : liens vers les autres annuaires ──────────────────────────────── */
.annuaire-hero__cross {
    margin: 22px 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    align-items: center;
}
.annuaire-hero__cross a {
    color: rgba(255, 255, 255, 0.92) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.annuaire-hero__cross a:hover { color: #FFFFFF !important; }

/* ── Autocomplétion recherche (panneau reparenté sur <body>) ─────────────── */
.annuaire-autocomplete {
    position: absolute;
    z-index: var(--z-dropdown, 1000);
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    max-height: 420px;
    overflow-y: auto;
    text-align: left;
}
.annuaire-autocomplete[hidden] { display: none; }
.annuaire-autocomplete__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--ann-ink);
    border-bottom: 1px solid var(--ann-bg-soft);
}
.annuaire-autocomplete__item:last-child { border-bottom: 0; }
.annuaire-autocomplete__item:hover { background: var(--ann-bg-soft); }
/* Variant ville : l'item est un <button> → reset + sélection clavier. */
.annuaire-autocomplete__item--city {
    width: 100%;
    text-align: left;
    background: transparent;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    font: inherit;
    cursor: pointer;
}
.annuaire-autocomplete__item--city.is-active { background: var(--ann-bg-soft); }
.annuaire-autocomplete__thumb {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ann-bg-soft);
    color: var(--ann-accent-soft);
}
.annuaire-autocomplete__thumb img { width: 100%; height: 100%; object-fit: cover; }
.annuaire-autocomplete__body { display: flex; flex-direction: column; min-width: 0; }
.annuaire-autocomplete__name { font-weight: 600; color: var(--ann-ink); }
.annuaire-autocomplete__sub {
    font-size: 0.85rem;
    color: var(--ann-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.annuaire-autocomplete__placeholder { font-size: 1.1rem; }
.annuaire-autocomplete__empty {
    padding: 16px;
    text-align: center;
    color: var(--ann-ink-muted);
    font-size: 0.9rem;
}

@media (max-width: 575.98px) {
    .annuaire-hero__submit { flex: 1 1 100%; padding: 12px 26px; }
}

.annuaire-hero__suggestions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}
.annuaire-hero__suggestions-label {
    font-size: 0.85rem;
    color: var(--ann-ink-muted);
    margin-right: 4px;
}
.annuaire-hero--with-photo .annuaire-hero__suggestions-label {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Pill claire à poser sur la photo */
.annuaire-pill--on-photo {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.92);
    color: var(--ann-ink) !important;
    backdrop-filter: blur(6px);
}
/* Double classe pour battre `.annuaire-pill:hover` (même spécificité, défini plus bas). */
.annuaire-pill.annuaire-pill--on-photo:hover {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--ann-accent-strong) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    transform: translateY(-1px);
}

/* ── Pills ────────────────────────────────────────────────────────────────── */
/* !important sur la couleur : bat la règle globale a:not(…) qui force --brand
   (sinon pill inactive en texte violet, et pill active = texte violet sur fond
   violet → invisible). */
.annuaire-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: var(--ann-radius-pill);
    background: #FFFFFF;
    color: var(--ann-ink) !important;
    border: 1px solid var(--ann-line);
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.18s ease;
}
.annuaire-pill:hover {
    background: var(--ann-accent);
    color: #FFFFFF !important;
    border-color: var(--ann-accent);
}
.annuaire-pill--ghost {
    background: transparent;
    border-color: var(--ann-line);
}
.annuaire-pill--ghost:hover {
    background: var(--ann-accent);
    color: #FFFFFF !important;
    border-color: var(--ann-accent);
}
.annuaire-pill--active {
    background: var(--ann-accent);
    color: #FFFFFF !important;
    border-color: var(--ann-accent);
}

/* ── Sections ────────────────────────────────────────────────────────────── */
.annuaire-section {
    padding: clamp(48px, 8vw, 96px) 0;
    background: var(--ann-bg);
}
.annuaire-section--soft {
    background: var(--ann-bg-soft);
}
.annuaire-section__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}
.annuaire-section__title {
    font-family: var(--ann-font-heading);
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    line-height: 1.15;
    color: var(--ann-ink);
    margin: 0 0 12px;
    font-weight: 500;
}
.annuaire-section__subtitle {
    color: var(--ann-ink-muted);
    font-size: 1.05rem;
    margin: 0;
}

/* ── Groupes catégories ──────────────────────────────────────────────────── */
.annuaire-group {
    margin-bottom: 56px;
}
.annuaire-group:last-child { margin-bottom: 0; }
.annuaire-group__header {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--ann-line);
    padding-bottom: 14px;
    margin-bottom: 24px;
}
.annuaire-group__title {
    font-family: var(--ann-font-heading);
    font-size: 1.4rem;
    color: var(--ann-ink);
    margin: 0;
    font-weight: 500;
}
.annuaire-group__subtitle {
    color: var(--ann-ink-muted);
    font-size: 0.95rem;
    margin: 0;
}
.annuaire-group__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

/* ── Tile (carte catégorie) ──────────────────────────────────────────────── */
.annuaire-tile {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius);
    color: var(--ann-ink);
    text-decoration: none;
    transition: all 0.22s ease;
    box-shadow: var(--ann-shadow-card);
}
.annuaire-tile:hover {
    transform: translateY(-2px);
    border-color: var(--ann-accent-soft);
    box-shadow: var(--ann-shadow-card-hover);
    color: var(--ann-ink);
}
.annuaire-tile__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ann-bg-soft);
    color: var(--ann-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.annuaire-tile__body { flex: 1; min-width: 0; }
.annuaire-tile__title {
    font-family: var(--ann-font-heading);
    font-size: 1.1rem;
    margin: 0 0 4px;
    color: var(--ann-ink);
    font-weight: 500;
}
.annuaire-tile__desc {
    font-size: 0.85rem;
    color: var(--ann-ink-muted);
    margin: 0;
    line-height: 1.4;
}
.annuaire-tile__arrow {
    flex: 0 0 auto;
    color: var(--ann-ink-muted);
    transition: transform 0.2s ease;
}
.annuaire-tile:hover .annuaire-tile__arrow { transform: translateX(4px); color: var(--ann-accent); }

/* ── Page résultats annuaire ─────────────────────────────────────────────── */
.annuaire-results-header {
    background: var(--ann-bg);
    border-bottom: 1px solid var(--ann-line);
    padding: 32px 0 28px;
}
.annuaire-breadcrumb {
    font-size: 0.85rem;
    color: var(--ann-ink-muted);
    margin-bottom: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.annuaire-breadcrumb a {
    color: var(--ann-ink-muted);
    text-decoration: none;
}
.annuaire-breadcrumb a:hover { color: var(--ann-ink); }
.annuaire-breadcrumb [aria-current="page"] { color: var(--ann-ink); }

.annuaire-results-header__main {
    display: flex;
    align-items: center;
    gap: 16px;
}
.annuaire-results-header__icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    color: var(--ann-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.annuaire-results-header__title {
    font-family: var(--ann-font-heading);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    line-height: 1.15;
    color: var(--ann-ink);
    margin: 0;
    font-weight: 500;
}
.annuaire-results-header__subtitle {
    color: var(--ann-ink-muted);
    margin: 4px 0 0;
    font-size: 0.95rem;
}

.annuaire-subcat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

/* ── Quick filters (instruments etc.) ────────────────────────────────────── */
.annuaire-quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--ann-line);
    background: #FFFFFF;
    border-radius: var(--ann-radius);
    margin-bottom: 18px;
}
.annuaire-quick-filters__label {
    font-size: 0.85rem;
    color: var(--ann-ink-muted);
    margin-right: 4px;
    font-weight: 500;
}

/* ── Catégorie : en-tête éditorial dégradé ───────────────────────────────── */
.annuaire-cat-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* Même rendu que le bloc CTA de la home : dégradé muté --ann-gradient
       (mariage : #9D80B6 → #C68F8B → #ECA869) + voile sombre (cf. __glow). */
    background: var(--ann-gradient);
    color: #FFFFFF;
    padding: clamp(28px, 5vw, 48px) 0 clamp(24px, 4vw, 38px);
}
.annuaire-cat-hero__glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* Voile sombre identique au bloc CTA de la home : garantit la lisibilité du
       texte blanc sur le dégradé muté. */
    background: linear-gradient(180deg, rgba(20, 15, 30, 0.10) 0%, rgba(20, 15, 30, 0.30) 100%);
}
.annuaire-cat-hero__breadcrumb {
    font-size: 0.85rem;
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.78);
}
/* Lien de retour souligné (signale le retour à l'annuaire principal) + survol orange. */
.annuaire-cat-hero__breadcrumb a {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.annuaire-cat-hero__breadcrumb a:hover { color: var(--ann-accent-2) !important; }
.annuaire-cat-hero__breadcrumb [aria-current="page"] { color: #FFFFFF; }

.annuaire-cat-hero__main {
    display: flex;
    align-items: center;
    gap: 18px;
}
.annuaire-cat-hero__icon {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(4px);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
}
.annuaire-cat-hero__title {
    font-family: var(--ann-font-heading);
    font-size: clamp(1.8rem, 3.4vw, 2.4rem);
    line-height: 1.1;
    font-weight: 500;
    margin: 0;
    color: #FFFFFF !important; /* bat .np-app-body h1 */
}
.annuaire-cat-hero__lead {
    margin: 6px 0 0;
    font-size: 1rem;
    max-width: 60ch;
    color: rgba(255, 255, 255, 0.86);
}
.annuaire-cat-hero__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}
.annuaire-tab {
    display: inline-flex;
    align-items: center;
    padding: 7px 15px;
    border-radius: var(--ann-radius-pill);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(4px);
    /* !important : bat la règle globale [data-app] .np-app-body a:not(…) qui force --brand. */
    color: #FFFFFF !important;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.18s ease;
}
/* Survol & sélection : fond blanc + texte orange (#FF9900 via --ann-accent-2). */
.annuaire-tab:hover {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--ann-accent-2) !important;
}
.annuaire-tab.is-active {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--ann-accent-2) !important;
    font-weight: 600;
}

/* ── Catégorie : barre de filtres horizontale (vue cards/list) ───────────── */
.annuaire-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px;
    margin-bottom: 18px;
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius);
    box-shadow: 0 2px 10px rgba(15, 21, 48, 0.05);
}
.annuaire-filterbar__field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    background: var(--ann-bg-soft);
    border-radius: var(--ann-radius-pill);
    color: var(--ann-ink-muted);
}
.annuaire-filterbar__field input { border: 0; background: transparent; outline: none; padding: 10px 0; color: var(--ann-ink); min-width: 120px; }
.annuaire-filterbar__field--search { flex: 1 1 220px; }
.annuaire-filterbar__field--search input { min-width: 0; width: 100%; }
.annuaire-filterbar__select {
    border: 0;
    border-radius: var(--ann-radius-pill);
    padding: 10px 30px 10px 14px;
    background-color: var(--ann-bg-soft);
    color: var(--ann-ink);
    font-size: 0.85rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237A8699'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 12px;
}
.annuaire-filterbar__submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--ann-accent);
    color: #FFFFFF;
    border: 0;
    border-radius: var(--ann-radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.annuaire-filterbar__submit:hover { background: var(--ann-accent-strong); }
.annuaire-filterbar__reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--ann-ink-muted);
    text-decoration: none;
}
.annuaire-filterbar__reset:hover { background: var(--ann-bg-soft); color: var(--ann-accent); }

@media (max-width: 575.98px) {
    .annuaire-filterbar { flex-direction: column; align-items: stretch; }
    .annuaire-filterbar__field,
    .annuaire-filterbar__select,
    .annuaire-filterbar__submit { width: 100%; }
    .annuaire-filterbar__reset { align-self: center; }
}

/* ── Catégorie : bande « Chorales & ensembles » (collectifs liés) ────────── */
.annuaire-related {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--ann-line);
}
.annuaire-related__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.annuaire-related__title {
    font-family: var(--ann-font-heading);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--ann-ink);
    margin: 0;
}
.annuaire-related__all {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ann-accent) !important;
    text-decoration: none;
    white-space: nowrap;
}
.annuaire-related__all:hover { color: var(--ann-accent-strong) !important; }
.annuaire-related__hint {
    color: var(--ann-ink-muted);
    font-size: 0.92rem;
    margin: 4px 0 18px;
}

/* ── Catégorie : blocs découverte (page peu remplie) ─────────────────────── */
.annuaire-discover {
    padding: clamp(28px, 4vw, 44px) 0 clamp(8px, 2vw, 16px);
    border-top: 1px solid var(--ann-line);
    margin-top: 24px;
}
.annuaire-discover__title {
    font-family: var(--ann-font-heading);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--ann-ink);
    margin: 0 0 16px;
}
.annuaire-discover__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.annuaire-discover__card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius);
    background: #FFFFFF;
    text-decoration: none;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.annuaire-discover__card:hover {
    border-color: var(--ann-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 21, 48, 0.08);
}
.annuaire-discover__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--ann-bg-soft);
    color: var(--ann-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}
.annuaire-discover__name { font-weight: 600; color: var(--ann-ink) !important; }
.annuaire-discover__desc { font-size: 0.85rem; color: var(--ann-ink-muted) !important; line-height: 1.4; }

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.annuaire-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.annuaire-toolbar__count {
    color: var(--ann-ink-muted);
    font-size: 0.95rem;
}
.annuaire-toolbar__count strong { color: var(--ann-ink); }
.annuaire-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.annuaire-toolbar__reset {
    color: var(--ann-ink-muted);
    text-decoration: none;
    font-size: 0.85rem;
}
.annuaire-toolbar__reset:hover { color: var(--ann-accent); }
.annuaire-sort { display: inline-flex; gap: 2px; background: var(--ann-bg-soft); border-radius: var(--ann-radius-pill); padding: 3px; }
.annuaire-sort__btn {
    display: inline-flex; align-items: center;
    padding: 5px 12px; border-radius: var(--ann-radius-pill);
    font-size: 0.82rem; color: var(--ann-ink-muted) !important; text-decoration: none; white-space: nowrap;
}
.annuaire-sort__btn.is-active { background: #FFFFFF; color: var(--ann-accent) !important; box-shadow: var(--ann-shadow-card, 0 1px 3px rgba(0,0,0,0.1)); }
@media (max-width: 575.98px) { .annuaire-sort__btn { padding: 5px 9px; font-size: 0.78rem; } }

.annuaire-view-switch {
    display: inline-flex;
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius-sm);
    overflow: hidden;
}
.annuaire-view-switch__btn {
    padding: 8px 14px;
    color: var(--ann-ink-muted) !important;
    text-decoration: none;
    border-right: 1px solid var(--ann-line);
    transition: background 0.15s ease, color 0.15s ease;
    font-size: 1rem;
}
.annuaire-view-switch__btn:last-child { border-right: 0; }
.annuaire-view-switch__btn:hover { background: var(--ann-bg-soft); color: var(--ann-ink) !important; }
/* !important + ciblage de l'icône : la règle globale a:not(…) force --brand sur le
   lien (icône violette invisible sur fond violet une fois sélectionné). */
.annuaire-view-switch__btn.is-active { background: var(--ann-accent); color: #FFFFFF !important; }
.annuaire-view-switch__btn.is-active i { color: #FFFFFF !important; }

/* ── Grid cards ──────────────────────────────────────────────────────────── */
.annuaire-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* ── Card éditoriale ─────────────────────────────────────────────────────── */
.annuaire-card {
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius);
    overflow: hidden;
    transition: all 0.22s ease;
    display: flex;
    flex-direction: column;
    box-shadow: var(--ann-shadow-card);
}
.annuaire-card:hover {
    transform: translateY(-2px);
    border-color: var(--ann-accent-soft);
    box-shadow: var(--ann-shadow-card-hover);
}
.annuaire-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ann-bg-soft);
}
.annuaire-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.annuaire-card:hover .annuaire-card__media img { transform: scale(1.04); }
.annuaire-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ann-accent-soft);
    font-size: 3rem;
}
.annuaire-card__badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    color: var(--ann-ink);
    padding: 4px 12px;
    border-radius: var(--ann-radius-pill);
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    border: 1px solid var(--ann-line);
}
.annuaire-card__body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.annuaire-card__name {
    font-family: var(--ann-font-heading);
    font-size: 1.15rem;
    margin: 0;
    font-weight: 500;
    line-height: 1.2;
}
.annuaire-card__name a { color: var(--ann-ink); text-decoration: none; }
.annuaire-card__name a:hover { color: var(--ann-accent); }
.annuaire-card__city {
    font-size: 0.85rem;
    color: var(--ann-ink-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.annuaire-card__price {
    margin-top: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ann-ink, #1f2540);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.annuaire-card__price i { color: var(--brand); }
.annuaire-row__price {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ann-ink, #1f2540);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.annuaire-row__price i { color: var(--brand); }
.ann-hero__price {
    margin: 6px 0 0;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ann-hero__price i { color: var(--brand); }
.ann-profile-page__hero--has-cover .ann-hero__price { color: #fff; }
.ann-profile-page__hero--has-cover .ann-hero__price i { color: #fff; }
/* Bloc « Tarif indicatif » sous le champ d'intervention (fiche annuaire). */
.ann-price-block--spaced { margin-top: 20px; }
.ann-price-block__value {
    margin: 6px 0 0;
    font-size: 1.05rem;
    color: var(--ann-ink, #1f2540);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ann-price-block__value i { color: var(--brand); }
.annuaire-card__accroche {
    font-size: 0.875rem;
    color: var(--ann-ink-muted);
    margin: 0;
    line-height: 1.5;
}
.annuaire-card__meta {
    margin-top: 2px;
}
.annuaire-card__meta-label {
    display: block;
    font-size: 0.7rem;
    color: var(--ann-ink-muted); /* sobre : kicker neutre plutôt que l'accent */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
    font-weight: 600;
}
.annuaire-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.annuaire-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--ann-radius-pill);
    background: var(--ann-bg-soft);
    color: var(--ann-ink);
    font-size: 0.75rem;
    border: 1px solid transparent;
}
.annuaire-chip--instrument {
    background: #FFFFFF;
    border-color: var(--ann-line);
    color: var(--ann-ink); /* sobre : puce instrument neutre, distinguée par sa bordure */
}
.annuaire-chip--more {
    background: transparent;
    color: var(--ann-ink-muted);
    border: 1px dashed var(--ann-line);
}
.annuaire-card__cta {
    margin-top: auto;
    align-self: flex-start;
    color: var(--ann-ink);
    text-decoration: none;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--ann-line);
    margin-top: 12px;
    width: 100%;
}
.annuaire-card__cta:hover { color: var(--ann-accent); }

/* ── Vue liste ───────────────────────────────────────────────────────────── */
.annuaire-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.annuaire-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius);
    color: var(--ann-ink);
    text-decoration: none;
    transition: all 0.18s ease;
}
.annuaire-row:hover {
    border-color: var(--ann-accent-soft);
    box-shadow: var(--ann-shadow-card);
    color: var(--ann-ink);
    transform: translateY(-1px);
}
.annuaire-row__thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: var(--ann-radius-sm);
    overflow: hidden;
    background: var(--ann-bg-soft);
}
.annuaire-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.annuaire-row__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ann-accent-soft);
    font-size: 1.4rem;
}
.annuaire-row__main { flex: 1; min-width: 0; }
.annuaire-row__top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
}
.annuaire-row__name {
    font-family: var(--ann-font-heading);
    font-size: 1.05rem;
    margin: 0;
    font-weight: 500;
    color: var(--ann-ink);
}
.annuaire-row__type,
.annuaire-row__city {
    font-size: 0.8rem;
    color: var(--ann-ink-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.annuaire-row__accroche {
    font-size: 0.85rem;
    color: var(--ann-ink-muted);
    margin: 0 0 8px;
    line-height: 1.5;
}
.annuaire-row__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.annuaire-row__cta {
    flex: 0 0 auto;
    color: var(--ann-accent);
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.annuaire-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--ann-ink-muted);
}
.annuaire-empty > i {
    font-size: 3rem;
    color: var(--ann-accent-soft);
    margin-bottom: 12px;
    display: block;
}
.annuaire-empty__lead { font-size: 1.05rem; color: var(--ann-ink); margin: 0 0 4px; }
.annuaire-empty__hint { font-size: 0.875rem; margin: 0; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.annuaire-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 32px;
}
.annuaire-pagination__list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.annuaire-pagination__page,
.annuaire-pagination__edge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius-sm);
    background: #FFFFFF;
    color: var(--ann-ink);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.annuaire-pagination__page:hover,
.annuaire-pagination__edge:hover {
    background: var(--ann-bg-soft);
    border-color: var(--ann-accent-soft);
    color: var(--ann-accent-strong);
}
.annuaire-pagination__page.is-active {
    background: var(--ann-accent);
    border-color: var(--ann-accent);
    color: #FFFFFF;
}
.annuaire-pagination__edge.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}
.annuaire-pagination__gap {
    padding: 0 4px;
    color: var(--ann-ink-muted);
    align-self: flex-end;
}

/* ── Panneau filtres ─────────────────────────────────────────────────────── */
.annuaire-filter-toggle {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    color: var(--ann-ink);
    border-radius: var(--ann-radius-sm);
    padding: 10px 14px;
    margin-bottom: 14px;
    cursor: pointer;
}
.annuaire-filter-card {
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius);
    padding: 22px 22px 18px;
    box-shadow: var(--ann-shadow-card);
}
.annuaire-filter-card__title {
    font-family: var(--ann-font-heading);
    font-size: 1.1rem;
    margin: 0 0 16px;
    color: var(--ann-ink);
    font-weight: 500;
}
.annuaire-filter-form { display: flex; flex-direction: column; gap: 6px; }
.annuaire-filter-label {
    font-size: 0.78rem;
    color: var(--ann-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 12px 0 2px;
    font-weight: 500;
}
.annuaire-filter-form .annuaire-filter-label:first-of-type { margin-top: 0; }
.annuaire-filter-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius-sm);
    font-size: 0.9rem;
    background: #FFFFFF;
    color: var(--ann-ink);
    transition: border-color 0.15s ease;
}
.annuaire-filter-input:focus {
    outline: none;
    border-color: var(--ann-accent);
}
.annuaire-filter-actions {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    align-items: center;
}
.annuaire-filter-submit {
    flex: 1;
    background: var(--ann-accent);
    color: #FFFFFF;
    border: 0;
    border-radius: var(--ann-radius-sm);
    padding: 10px 16px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease;
}
.annuaire-filter-submit:hover { background: var(--ann-accent-strong); }
.annuaire-filter-reset {
    color: var(--ann-ink-muted);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 8px 4px;
}
.annuaire-filter-reset:hover { color: var(--ann-accent); }

/* ── Map placeholder (commit D le remplacera par Leaflet) ────────────────── */
.annuaire-map-placeholder {
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius);
    padding: 80px 20px;
    text-align: center;
    color: var(--ann-ink-muted);
}
.annuaire-map-placeholder > i {
    font-size: 3rem;
    color: var(--ann-accent-soft);
    display: block;
    margin-bottom: 12px;
}
.annuaire-map-placeholder__lead { color: var(--ann-ink); margin: 0 0 4px; }
.annuaire-map-placeholder__hint { font-size: 0.875rem; margin: 0; }

/* ── Vue carte annuaire ──────────────────────────────────────────────────── */
.annuaire-map {
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius);
    background: #FFFFFF;
    overflow: hidden;
    box-shadow: var(--ann-shadow-card);
}
.annuaire-map__layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    min-height: 600px;
}
@media (max-width: 991.98px) {
    .annuaire-map__layout { grid-template-columns: 1fr; }
}
.annuaire-map__sidebar {
    border-right: 1px solid var(--ann-line);
    overflow-y: auto;
    max-height: 80vh;
}
.annuaire-map__sidebar-header {
    padding: 14px 18px;
    background: var(--ann-bg);
    border-bottom: 1px solid var(--ann-line);
    font-size: 0.9rem;
}
.annuaire-map__notice {
    padding: 10px 18px;
    background: var(--ann-bg-soft);
    color: var(--ann-ink-muted);
    font-size: 0.8rem;
    border-bottom: 1px solid var(--ann-line);
}
.annuaire-map__cities {
    list-style: none;
    padding: 0;
    margin: 0;
}
.annuaire-map__city {
    border-bottom: 1px solid var(--ann-line);
    transition: background 0.15s ease;
}
.annuaire-map__city.is-active { background: var(--ann-bg); }
.annuaire-map__city-btn {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
    color: var(--ann-ink);
    font-family: var(--ann-font-heading);
    font-weight: 500;
}
.annuaire-map__city-btn:hover { background: var(--ann-bg); }
.annuaire-map__city-name { font-size: 0.95rem; }
.annuaire-map__city-count {
    background: var(--ann-bg-soft);
    color: var(--ann-accent);
    padding: 2px 10px;
    border-radius: var(--ann-radius-pill);
    font-size: 0.75rem;
    font-weight: 500;
}
.annuaire-map__profiles {
    list-style: none;
    padding: 0 18px 12px 18px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.annuaire-map__profile-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    color: var(--ann-ink);
    padding: 6px 4px;
    border-radius: var(--ann-radius);
    transition: color 0.15s ease, background 0.15s ease;
}
.annuaire-map__profile-link:hover { color: var(--ann-accent); background: var(--ann-bg-soft); }
.annuaire-map__profile-thumb {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ann-bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ann-accent-soft);
    flex: 0 0 auto;
}
.annuaire-map__profile-thumb img { width: 100%; height: 100%; object-fit: cover; }
.annuaire-map__profile-body { min-width: 0; }
.annuaire-map__profile-name { font-size: 0.85rem; font-weight: 500; }
.annuaire-map__profile-type { font-size: 0.72rem; color: var(--ann-ink-muted); }

.annuaire-map__empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--ann-ink-muted);
}
.annuaire-map__empty > i { font-size: 2rem; display: block; margin-bottom: 8px; }

.annuaire-map__canvas {
    min-height: 600px;
    height: 100%;
    z-index: 0;
}

/* ── Pin custom ──────────────────────────────────────────────────────────── */
.annuaire-map-pin-wrapper { background: transparent; border: 0; }
.annuaire-map-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ann-ink);
    color: #FFFFFF;
    border-radius: 50%;
    border: 3px solid #FFFFFF;
    box-shadow: 0 4px 12px rgba(15, 21, 48, 0.25);
    font-weight: 500;
    transition: transform 0.15s ease;
}
.annuaire-map-pin:hover { transform: scale(1.08); background: var(--ann-accent); }
.annuaire-map-pin__count { font-size: 0.9rem; }

/* Marqueur "avatar" : photo du prestataire en pastille + badge de compte. */
.annuaire-map-pin--photo {
    position: relative;
    width: 48px;
    height: 48px;
    padding: 0;
    overflow: visible;
    background: var(--ann-bg-soft);
    color: var(--ann-accent-soft);
    font-size: 1.3rem;
    cursor: pointer;
}
.annuaire-map-pin--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.annuaire-map-pin--photo .annuaire-map-pin__count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ann-accent);
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    border-radius: var(--ann-radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
}

/* Lien "Voir la fiche" sous chaque acteur de la sidebar carte. */
.annuaire-map__profile-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 2px 0 4px 46px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ann-accent);
    text-decoration: none;
}
.annuaire-map__profile-cta:hover { text-decoration: underline; }

/* La fiche survolée dans la sidebar trace son rayon → curseur explicite. */
.annuaire-map__profile { cursor: default; }

/* ── Popup map (Mapbox GL) ───────────────────────────────────────────────── */
.mapboxgl-popup-content {
    border-radius: var(--ann-radius);
    background: #FFFFFF;
    box-shadow: var(--ann-shadow-card-hover);
    padding: 14px 16px;
    font-family: inherit;
}
.mapboxgl-popup-close-button { font-size: 1.1rem; color: var(--ann-ink-muted); padding: 2px 6px; }

/* ── Fiche enrichie dans la popup (clic marqueur / focus sidebar) ─────────── */
.annuaire-map-popup--cards { display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; }
.annuaire-map-popup__head {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ann-ink-muted);
    font-weight: 600;
}
.annuaire-map-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: calc(var(--ann-radius) + 2px);
    background: #FFFFFF;
}
.annuaire-map-card.is-active .annuaire-map-card__media { box-shadow: 0 0 0 3px var(--ann-accent); }
.annuaire-map-card__top { display: flex; gap: 12px; align-items: center; }
.annuaire-map-card__media {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ann-bg-soft);
    color: var(--ann-accent-soft);
    font-size: 1.4rem;
    box-shadow: 0 0 0 3px var(--ann-bg-soft);
}
.annuaire-map-card__media img { width: 100%; height: 100%; object-fit: cover; }
.annuaire-map-card__placeholder { display: inline-flex; }
.annuaire-map-card__head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.annuaire-map-card__name {
    font-family: var(--ann-font-heading);
    font-size: 1.15rem;
    color: var(--ann-ink);
    line-height: 1.15;
}
.annuaire-map-card__cat {
    font-size: 0.8rem;
    color: var(--ann-accent);
    font-weight: 600;
}
.annuaire-map-card__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.annuaire-map-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--ann-bg-soft);
    border-radius: var(--ann-radius-pill);
    font-size: 0.76rem;
    color: var(--ann-ink-muted);
}
.annuaire-map-card__chip i { color: var(--ann-accent); font-size: 0.85rem; }
.annuaire-map-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    background: var(--ann-accent);
    color: #FFFFFF;
    border-radius: var(--ann-radius);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.annuaire-map-card__cta:hover { filter: brightness(1.06); transform: translateY(-1px); color: #FFFFFF; }
.annuaire-map-card__cta i { transition: transform 0.15s ease; }
.annuaire-map-card__cta:hover i { transform: translateX(2px); }

/* ═══════════════════════ Vue carte « plein écran » (Google Maps) ═══════════════════════ */
.annuaire-map-fullpage { overflow: hidden; }
/* La base enveloppe le contenu dans <main class="np-main"> : on en fait un
   conteneur flex (sans son animation d'entrée qui crée un containing-block)
   pour que .annuaire-map-app remplisse toute la hauteur sous la navbar. */
.annuaire-map-fullpage .np-main { display: flex; flex-direction: column; min-height: 0; animation: none; }

.annuaire-map-app {
    --panel-w: 380px;
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    background: var(--ann-bg, #F6F8FC);
}
.annuaire-map-app__body { flex: 1; display: flex; min-height: 0; width: 100%; }

/* Panneau gauche : liste + encart fiche superposé */
.annuaire-map-app__panel {
    flex: 0 0 var(--panel-w);
    position: relative;
    background: #FFFFFF;
    border-right: 1px solid var(--ann-line);
}
.annuaire-map-app__list { position: absolute; inset: 0; overflow-y: auto; }
.annuaire-map-app__list-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #FFFFFF;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ann-line);
    font-size: 0.9rem;
    color: var(--ann-ink);
}
.annuaire-map-app__notice { color: var(--ann-ink-muted); }

.annuaire-map-app__item { position: relative; border-bottom: 1px solid var(--ann-bg-soft); }
.annuaire-map-app__item.is-active { background: var(--ann-bg-soft); }
.annuaire-map-app__item-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 18px 4px;
    background: transparent;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.annuaire-map-app__item-thumb {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ann-bg-soft);
    color: var(--ann-accent-soft);
    font-size: 1.2rem;
}
.annuaire-map-app__item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.annuaire-map-app__item-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.annuaire-map-app__item-name { font-family: var(--ann-font-heading); font-size: 1rem; color: var(--ann-ink); line-height: 1.2; }
.annuaire-map-app__item-cat { font-size: 0.76rem; color: var(--ann-accent); font-weight: 600; }
.annuaire-map-app__item-city { font-size: 0.76rem; color: var(--ann-ink-muted); display: flex; align-items: center; gap: 4px; }
.annuaire-map-app__item-arrow { margin-left: auto; color: var(--ann-ink-muted); font-size: 0.85rem; }
.annuaire-map-app__item-cta {
    display: inline-block;
    padding: 0 18px 12px 78px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ann-accent);
    text-decoration: none;
}
.annuaire-map-app__item-cta:hover { text-decoration: underline; }

.annuaire-map-app__empty { padding: 40px 24px; text-align: center; color: var(--ann-ink-muted); }
.annuaire-map-app__empty > i { font-size: 2rem; display: block; margin-bottom: 10px; }
.annuaire-map-app__empty-hint { font-size: 0.85rem; }

/* Encart fiche (superposé à la liste) */
.annuaire-map-app__detail {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #FFFFFF;
    overflow-y: auto;
    padding: 18px;
    animation: annuaire-detail-in 0.2s ease;
}
.annuaire-map-app__detail[hidden] { display: none; }
@keyframes annuaire-detail-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.annuaire-map-app__detail-close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0;
    padding: 0;
    margin-bottom: 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ann-ink-muted);
    cursor: pointer;
}
.annuaire-map-app__detail-close:hover { color: var(--ann-accent); }
.annuaire-map-app__detail-media {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--ann-radius);
    overflow: hidden;
    background: var(--ann-bg-soft);
    color: var(--ann-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    margin-bottom: 14px;
}
.annuaire-map-app__detail-media img { width: 100%; height: 100%; object-fit: cover; }
.annuaire-map-app__detail-ph { display: inline-flex; }
.annuaire-map-app__detail-name { font-family: var(--ann-font-heading); font-size: 1.5rem; color: var(--ann-ink); line-height: 1.15; }
.annuaire-map-app__detail-cat { font-size: 0.9rem; color: var(--ann-accent); font-weight: 600; margin-top: 2px; }
.annuaire-map-app__detail-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
.annuaire-map-app__detail-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    border: 0;
    font: inherit;
    cursor: pointer;
    padding: 11px 16px;
    background: var(--ann-accent);
    /* !important : bat la règle globale [data-app] .np-app-body a:not(…) qui
       colore les liens de contenu en --brand (sinon texte invisible sur l'accent). */
    color: #FFFFFF !important;
    border-radius: var(--ann-radius);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.annuaire-map-app__detail-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.annuaire-map-app__detail-accroche {
    margin: 10px 0 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ann-ink);
}
.annuaire-map-app__detail-section { margin-top: 16px; }
.annuaire-map-app__detail-label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ann-ink-muted);
    font-weight: 600;
    margin-bottom: 8px;
}
.annuaire-map-app__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.annuaire-map-app__tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    background: var(--ann-bg-soft);
    border-radius: var(--ann-radius-pill);
    font-size: 0.78rem;
    color: var(--ann-ink);
}
.annuaire-map-app__detail-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.annuaire-map-app__detail-cta--ghost {
    background: var(--ann-bg-soft);
    color: var(--ann-accent) !important;
}
.annuaire-map-app__detail-cta--ghost:hover { filter: none; background: var(--ann-line); }

/* Carte */
.annuaire-map-app__canvas { flex: 1; position: relative; min-width: 0; }

/* Barre de filtres flottante (au-dessus de la carte) */
.annuaire-mapbar {
    position: absolute;
    top: 12px;
    left: calc(var(--panel-w) + 12px);
    right: 12px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(6px);
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius);
    box-shadow: 0 8px 28px rgba(15, 21, 48, 0.14);
}
.annuaire-mapbar__field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    background: var(--ann-bg-soft);
    border-radius: var(--ann-radius-pill);
    color: var(--ann-ink-muted);
    flex: 1 1 150px;
    min-width: 0;
}
.annuaire-mapbar__field--search { flex: 2 1 190px; }
.annuaire-mapbar__field input { border: 0; background: transparent; outline: none; padding: 9px 0; color: var(--ann-ink); min-width: 0; width: 100%; }
.annuaire-mapbar__select {
    border: 0;
    border-radius: var(--ann-radius-pill);
    padding: 9px 30px 9px 14px;
    background: var(--ann-bg-soft);
    color: var(--ann-ink);
    font-size: 0.85rem;
    cursor: pointer;
    flex: 1 1 150px;
    min-width: 0;
    /* Flèche maison (pour un rendu homogène avec les champs pilule). */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237A8699'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 12px;
}
.annuaire-mapbar__submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: var(--ann-accent);
    color: #FFFFFF;
    border: 0;
    border-radius: var(--ann-radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.annuaire-mapbar__reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--ann-ink-muted);
    text-decoration: none;
}
.annuaire-mapbar__reset:hover { background: var(--ann-bg-soft); color: var(--ann-accent); }
.annuaire-mapbar__actions { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.annuaire-mapbar__views { display: inline-flex; gap: 2px; background: var(--ann-bg-soft); border-radius: var(--ann-radius-pill); padding: 3px; }
.annuaire-mapbar__view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    border-radius: var(--ann-radius-pill);
    color: var(--ann-ink-muted);
    text-decoration: none;
}
.annuaire-mapbar__view.is-active { background: #FFFFFF; color: var(--ann-accent); box-shadow: var(--ann-shadow-card, 0 1px 3px rgba(0,0,0,0.1)); }

/* Têtes : états survol / actif */
.annuaire-map-pin--photo.is-hover { transform: scale(1.12); box-shadow: 0 6px 16px rgba(15, 21, 48, 0.3); }
.annuaire-map-pin--photo.is-active { box-shadow: 0 0 0 4px var(--ann-accent), 0 6px 16px rgba(15, 21, 48, 0.3); z-index: 2; }

/* ── Responsive : carte plein écran + bottom sheet ───────────────────────── */
@media (max-width: 991.98px) {
    .annuaire-map-app { --panel-w: 0px; }
    /* Body en absolu pour remplir .annuaire-map-app ; reste en flex pour que le
       canvas (flex:1, position relative imposée inline par Mapbox) prenne toute
       la hauteur. Le panneau passe en bottom sheet (absolu, hors flux). */
    .annuaire-map-app__body { position: absolute; inset: 0; }
    .annuaire-map-app__panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        height: 48%;
        border-right: 0;
        border-top: 1px solid var(--ann-line);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 28px rgba(15, 21, 48, 0.16);
        z-index: 6;
    }
    .annuaire-map-app.is-detail-open .annuaire-map-app__panel { height: 70%; }
    .annuaire-map-app__panel::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--ann-line);
        z-index: 3;
    }
    .annuaire-map-app__list, .annuaire-map-app__detail { border-radius: 18px 18px 0 0; padding-top: 18px; }
    .annuaire-mapbar { left: 12px; }
}

/* Mobile : barre compacte, recherche pleine largeur, ville + selects 2-up,
   actions sur une ligne dédiée pleine largeur. */
@media (max-width: 575.98px) {
    .annuaire-mapbar {
        top: 8px; left: 8px; right: 8px;
        gap: 6px; padding: 6px;
    }
    .annuaire-mapbar__field--search { flex: 1 1 100%; }
    .annuaire-mapbar__field--city,
    .annuaire-mapbar__select { flex: 1 1 calc(50% - 3px); }
    .annuaire-mapbar__field input,
    .annuaire-mapbar__select { font-size: 0.82rem; }
    .annuaire-mapbar__field input { padding: 8px 0; }
    .annuaire-mapbar__select { padding: 8px 28px 8px 12px; }
    .annuaire-mapbar__actions { width: 100%; margin-left: 0; }
    .annuaire-mapbar__submit { flex: 1 1 auto; justify-content: center; }
    .annuaire-mapbar__views { margin-left: auto; }
}

.annuaire-map-popup__city {
    font-family: var(--ann-font-heading);
    font-size: 1.05rem;
    color: var(--ann-ink);
    margin-bottom: 2px;
}
.annuaire-map-popup__count {
    font-size: 0.8rem;
    color: var(--ann-ink-muted);
    margin-bottom: 8px;
}
.annuaire-map-popup__list { list-style: none; padding: 0; margin: 0; }
.annuaire-map-popup__list li { margin-bottom: 4px; }
.annuaire-map-popup__list a {
    color: var(--ann-ink);
    text-decoration: none;
    font-size: 0.85rem;
    display: block;
    padding: 4px 0;
}
.annuaire-map-popup__list a:hover { color: var(--ann-accent); }
.annuaire-map-popup__type {
    display: block;
    font-size: 0.72rem;
    color: var(--ann-ink-muted);
}
.annuaire-map-popup__more {
    font-size: 0.75rem;
    color: var(--ann-ink-muted);
    text-align: center;
    margin-top: 4px;
}

/* ── Filtres actifs ──────────────────────────────────────────────────────── */
.annuaire-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.annuaire-active-filters__label {
    font-size: 0.78rem;
    color: var(--ann-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    margin-right: 4px;
}
.annuaire-active-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--ann-accent);
    color: #FFFFFF;
    border-radius: var(--ann-radius-pill);
    font-size: 0.8rem;
    text-decoration: none;
    transition: background 0.15s ease;
}
.annuaire-active-filter:hover {
    background: var(--ann-accent-strong);
    color: #FFFFFF;
}
.annuaire-active-filter i { font-size: 0.9rem; }
.annuaire-active-filters__clear {
    color: var(--ann-ink-muted);
    text-decoration: none;
    font-size: 0.8rem;
    margin-left: 4px;
    border-bottom: 1px dashed var(--ann-line);
}
.annuaire-active-filters__clear:hover { color: var(--ann-accent); border-color: var(--ann-accent-soft); }

/* ── Page gestion profil annuaire ────────────────────────────────────────── */
.ann-profile {
    background: var(--ann-bg);
    min-height: calc(100vh - 80px);
    padding-bottom: 60px;
}
.ann-profile__header {
    text-align: center;
    margin-bottom: 36px;
    padding-top: 28px;
}
.ann-profile__eyebrow {
    font-family: var(--ann-font-heading);
    color: var(--ann-accent);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.85rem;
    margin: 0 0 12px;
}
.ann-profile__title {
    font-family: var(--ann-font-heading);
    font-size: clamp(2rem, 4vw, 2.6rem);
    color: var(--ann-ink);
    margin: 0 0 10px;
    font-weight: 500;
    line-height: 1.1;
}
.ann-profile__lead {
    color: var(--ann-ink-muted);
    font-size: 1rem;
    max-width: 620px;
    margin: 0 auto;
}

.ann-profile__form { display: flex; flex-direction: column; gap: 20px; }

/* ── Block (card éditoriale) ─────────────────────────────────────────────── */
.ann-profile-block {
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius);
    overflow: hidden;
    box-shadow: var(--ann-shadow-card);
    margin-bottom: 20px;
}
.ann-profile-block--soft {
    background: transparent;
    box-shadow: none;
    border-style: dashed;
}
.ann-profile-block__header {
    padding: 22px 28px 16px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border-bottom: 1px solid var(--ann-line);
}
.ann-profile-block__num {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ann-bg-soft);
    color: var(--ann-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ann-font-heading);
    font-weight: 500;
    font-size: 1rem;
}
.ann-profile-block__icon {
    flex: 0 0 auto;
    color: var(--ann-accent);
    font-size: 1.4rem;
    margin-top: 4px;
}
.ann-profile-block__title {
    font-family: var(--ann-font-heading);
    font-size: 1.25rem;
    margin: 0 0 4px;
    color: var(--ann-ink);
    font-weight: 500;
}
.ann-profile-block__hint {
    color: var(--ann-ink-muted);
    margin: 0;
    font-size: 0.875rem;
}
.ann-profile-block__body { padding: 22px 28px 26px; }
.ann-profile-block__label {
    display: block;
    font-size: 0.78rem;
    color: var(--ann-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
    font-weight: 500;
}

/* ── Switch visibilité ───────────────────────────────────────────────────── */
.ann-profile-switch {
    background: var(--ann-bg);
    padding: 14px 18px;
    border-radius: var(--ann-radius-sm);
    margin-bottom: 18px;
}
.ann-profile-switch__input { position: absolute; opacity: 0; pointer-events: none; }
.ann-profile-switch__label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: var(--ann-ink);
    font-weight: 500;
}
.ann-profile-switch__track {
    display: inline-block;
    width: 42px;
    height: 24px;
    background: var(--ann-line);
    border-radius: 12px;
    position: relative;
    transition: background 0.2s ease;
}
.ann-profile-switch__track::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 20px; height: 20px;
    background: #FFFFFF;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ann-profile-switch__input:checked + .ann-profile-switch__label .ann-profile-switch__track {
    background: var(--ann-accent);
}
.ann-profile-switch__input:checked + .ann-profile-switch__label .ann-profile-switch__track::after {
    transform: translateX(18px);
}

/* ── URL preview ─────────────────────────────────────────────────────────── */
.ann-profile-url {}
.ann-profile-url__input {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius-sm);
    overflow: hidden;
}
.ann-profile-url__prefix {
    background: var(--ann-bg);
    color: var(--ann-ink-muted);
    padding: 9px 12px;
    font-size: 0.875rem;
    border-right: 1px solid var(--ann-line);
}
.ann-profile-url__field {
    flex: 1;
    border: 0;
    padding: 9px 12px;
    background: transparent;
    outline: none;
    color: var(--ann-ink);
    font-size: 0.875rem;
}
.ann-profile-url__preview {
    font-size: 0.8rem;
    color: var(--ann-ink-muted);
    margin-top: 8px;
}
.ann-profile-url__preview a {
    color: var(--ann-accent);
    text-decoration: none;
}

/* ── Photo de profil ─────────────────────────────────────────────────────── */
.ann-profile-photo {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 8px 0 18px;
    flex-wrap: wrap;
}
.ann-profile-photo__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ann-bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ann-accent-soft);
    font-size: 2.2rem;
    border: 1px solid var(--ann-line);
    flex: 0 0 auto;
}
.ann-profile-photo__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ann-profile-photo__upload { flex: 1; min-width: 220px; }

/* ── Submit principal ────────────────────────────────────────────────────── */
.ann-profile__actions {
    display: flex;
    justify-content: flex-end;
    padding: 8px 0 16px;
}
.ann-profile__submit {
    background: var(--ann-accent);
    color: #FFFFFF;
    border: 0;
    border-radius: var(--ann-radius-sm);
    padding: 12px 28px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s ease;
}
.ann-profile__submit:hover { background: var(--ann-accent-strong); }

/* ── Page builder (constructeur) ─────────────────────────────────────────── */
.ann-profile-builder__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.ann-profile-builder__empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--ann-ink-muted);
    border: 1px dashed var(--ann-line);
    border-radius: var(--ann-radius-sm);
    background: var(--ann-bg);
}
.ann-profile-builder__empty > i {
    font-size: 2rem;
    color: var(--ann-accent-soft);
    display: block;
    margin-bottom: 6px;
}
.ann-profile-builder__empty p { margin: 0; font-size: 0.9rem; }
.ann-profile-builder__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.ann-profile-builder__actions-label {
    font-size: 0.78rem;
    color: var(--ann-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-right: 6px;
    font-weight: 500;
}
.ann-profile-builder__add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius-pill);
    color: var(--ann-ink);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.18s ease;
}
.ann-profile-builder__add:hover {
    border-color: var(--ann-accent);
    color: var(--ann-accent);
    background: #FFFFFF;
}
.ann-profile-builder__add i { color: var(--ann-accent); }

/* ── Bloc Compte ─────────────────────────────────────────────────────────── */
.ann-profile-account {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
}
.ann-profile-account__row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: baseline;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--ann-line);
}
.ann-profile-account__row:last-child { border-bottom: 0; }
.ann-profile-account__label {
    flex: 0 0 160px;
    color: var(--ann-ink-muted);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.ann-profile-account__value {
    color: var(--ann-ink);
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.ann-profile-account__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--ann-radius-pill);
    background: var(--ann-bg-soft);
    color: var(--ann-ink);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ann-profile-account__badge--success {
    background: rgba(34, 139, 34, 0.1);
    color: #1b7e1b;
}

/* ── CTA Abonnement / Gestion ────────────────────────────────────────────── */
.ann-profile-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 18px;
    padding: 16px 20px;
    background: var(--ann-bg);
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius-sm);
}
.ann-profile-cta--soft { background: transparent; border-style: dashed; }
.ann-profile-cta__title {
    font-family: var(--ann-font-heading);
    font-size: 1rem;
    color: var(--ann-ink);
    margin: 0 0 4px;
    font-weight: 500;
}
.ann-profile-cta__hint { color: var(--ann-ink-muted); font-size: 0.85rem; margin: 0; max-width: 540px; }

/* ── Sous-titre "Ma fiche publique" séparateur ──────────────────────────── */
.ann-profile-section-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin: 32px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ann-line);
}
.ann-profile-section-title > i {
    color: var(--ann-accent);
    font-size: 1.1rem;
}
.ann-profile-section-title h2 {
    font-family: var(--ann-font-heading);
    font-size: 1.35rem;
    color: var(--ann-ink);
    margin: 0;
    font-weight: 500;
}
.ann-profile-section-title p {
    color: var(--ann-ink-muted);
    font-size: 0.875rem;
    margin: 0 0 0 auto;
}

/* ──────────────────────────────────────────────────────────────────────────
 * ANNUAIRE — extensions design moderne / éditorial liturgique
 * ────────────────────────────────────────────────────────────────────────── */

/* Eyebrow réutilisable */
.annuaire-eyebrow {
    font-family: var(--ann-font-heading);
    font-size: 0.78rem;
    color: var(--ann-accent);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin: 0 0 14px;
    font-weight: 500;
}
.annuaire-eyebrow--light { color: rgba(255, 255, 255, 0.85); }

/* Header éditorial (aligné à gauche, avec eyebrow) */
.annuaire-section__header--editorial {
    text-align: left;
    max-width: 720px;
    margin: 0 0 56px;
}
.annuaire-section__header--editorial .annuaire-section__title {
    margin-bottom: 10px;
}

/* ── Section "Parcourir par catégorie" — grande carte en dégradé sur fond blanc ── */
.annuaire-section--browse {
    background: #FFFFFF;
    padding: clamp(56px, 9vw, 96px) 0;
}
.annuaire-browse__panel {
    background: var(--ann-gradient);
    border-radius: clamp(20px, 3vw, 32px);
    padding: clamp(28px, 5vw, 56px);
    box-shadow:
        0 30px 70px -32px color-mix(in srgb, var(--ann-accent) 45%, transparent),
        0 4px 14px rgba(15, 21, 48, 0.08);
}
/* Texte blanc + légère ombre portée ("surélévation") sur le dégradé muté. */
.annuaire-browse__panel .annuaire-eyebrow {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}
.annuaire-browse__panel .annuaire-section__title,
.annuaire-browse__panel .annuaire-group__title {
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.annuaire-browse__panel .annuaire-section__subtitle,
.annuaire-browse__panel .annuaire-group__subtitle {
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
/* Numéro de groupe : blanc (le dégradé-texte serait invisible sur le dégradé). */
.annuaire-browse__panel .annuaire-group__index {
    background: none;
    -webkit-text-fill-color: #FFFFFF;
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.annuaire-browse__panel .annuaire-group__header {
    border-bottom-color: rgba(255, 255, 255, 0.28);
}
/* Tuiles blanches qui flottent sur le dégradé (ombre de repos, bord neutralisé). */
.annuaire-browse__panel .annuaire-tile {
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(15, 21, 48, 0.12);
}
.annuaire-group {
    margin-bottom: clamp(40px, 6vw, 72px);
}
.annuaire-group:last-child { margin-bottom: 0; }

.annuaire-group__header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding-bottom: 18px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--ann-line);
}
.annuaire-group__index {
    flex: 0 0 auto;
    font-family: var(--ann-font-heading);
    font-size: 2.6rem;
    line-height: 1;
    font-weight: 600;
    background: var(--ann-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.annuaire-group__title {
    font-family: var(--ann-font-heading);
    font-size: 1.6rem;
    color: var(--ann-ink);
    margin: 6px 0 4px;
    font-weight: 500;
    line-height: 1.15;
}
.annuaire-group__subtitle {
    color: var(--ann-ink-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* ── CTA final "Rejoindre" — bandeau sombre cohérent avec le hero ──────── */
.annuaire-cta-section {
    background: var(--ann-gradient);
    color: #FFFFFF;
    padding: clamp(64px, 10vw, 120px) 0;
    position: relative;
    overflow: hidden;
}
.annuaire-cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Léger voile sombre pour garantir la lisibilité du texte blanc sur le dégradé muté. */
    background: linear-gradient(180deg, rgba(20, 15, 30, 0.10) 0%, rgba(20, 15, 30, 0.30) 100%);
    pointer-events: none;
}
.annuaire-cta-section__inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    text-align: center;
    margin: 0 auto;
}
/* Force la couleur blanche du titre CTA peu importe l'app (gestion / mariage / adieu) :
   battre la spécificité des règles globales h2 propres à chaque app. */
[data-app] .annuaire-cta-section h2.annuaire-cta-section__title,
[data-app] .annuaire-cta-section h2.annuaire-cta-section__brand,
.annuaire-cta-section h2.annuaire-cta-section__title,
.annuaire-cta-section h2.annuaire-cta-section__brand {
    color: #FFFFFF;
}
.annuaire-cta-section__title {
    font-family: var(--ann-font-heading);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: #FFFFFF;
    margin: 0 0 18px;
    font-weight: 500;
    line-height: 1.1;
}
.annuaire-cta-section__logo {
    display: block;
    margin: 0 auto 28px;
    max-height: 72px;
    width: auto;
    filter: brightness(0) invert(1); /* logo en blanc sur fond sombre */
    opacity: 0.95;
}
/* Fallback texte si pas de logo image (ex. NDA). */
.annuaire-cta-section__brand {
    font-family: var(--ann-font-heading);
    color: #FFFFFF;
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    margin: 0 auto 28px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.annuaire-cta-section__lead {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.05rem;
    margin: 0 0 16px;
    line-height: 1.55;
}
.annuaire-cta-section__lead--soft {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.95rem;
    margin-bottom: 36px;
}
.annuaire-cta-section__actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.annuaire-cta-section__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: var(--ann-radius-sm);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
.annuaire-cta-section__btn--primary {
    background: #FFFFFF;
    color: var(--ann-accent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.annuaire-cta-section__btn--primary:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--ann-accent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26);
    transform: translateY(-2px);
}
.annuaire-cta-section__btn--ghost {
    background: transparent;
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.35);
}
.annuaire-cta-section__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.65);
    color: #FFFFFF;
    transform: translateY(-2px);
}
.annuaire-cta-section__btn i {
    transition: transform 0.2s ease;
}
.annuaire-cta-section__btn:hover i { transform: translateX(4px); }

/* ── Boutons annuaire réutilisables ────────────────────────────────────── */
.annuaire-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: var(--ann-radius-pill);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s var(--ease-out-soft, ease);
}
.annuaire-btn i { transition: transform 0.2s ease; }
.annuaire-btn:hover i { transform: translateX(4px); }
.annuaire-btn--primary { background: var(--ann-accent); color: #FFFFFF; }
.annuaire-btn--primary:hover { background: var(--ann-accent-strong); color: #FFFFFF; transform: translateY(-2px); }
.annuaire-btn--outline {
    background: transparent;
    color: var(--ann-accent);
    border-color: var(--ann-line);
}
.annuaire-btn--outline:hover {
    border-color: var(--ann-accent);
    background: var(--ann-bg-soft);
    color: var(--ann-accent-strong);
}

/* ── Prestataires à la une ─────────────────────────────────────────────── */
.annuaire-section--featured { background: var(--ann-bg-soft); }
.annuaire-featured__more { text-align: center; margin-top: 32px; }

/* ── Recrutement (face offre) ──────────────────────────────────────────── */
/* Se référencer = rejoindre CELEBRATION PRO : la card porte TOUJOURS le dégradé
   signature CP (bleu → vert) + texte blanc, quelle que soit la plateforme
   d'entrée (NMDM violet, NDA marine, Gestion). La variante --strong ajoute
   seulement la liste de bénéfices (gérée côté template). */
.annuaire-recruit {
    /* Ancrage charte CP. --brand DOIT être redéclaré ici (et pas seulement
       --ann-accent) : la règle de couleur de lien propre à chaque app lit
       var(--brand), or --brand est résolu sur le body (= violet/marine) et
       hérite déjà calculé. On le re-résout donc au niveau du bloc → bleu CP. */
    --ann-accent:        #4C679D;
    --ann-accent-soft:   #6A82B2;
    --ann-accent-strong: #3A4F7A;
    --brand:             #4C679D;
    --brand-700:         #3A4F7A;
    --brand-600:         #3A4F7A;
    --brand-500:         #4C679D;
    --brand-400:         #6A82B2;
    padding: clamp(40px, 6vw, 64px) 0;
    background: var(--ann-bg);
}
.annuaire-recruit__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    background: linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 135%);
    border-radius: var(--ann-radius);
    padding: clamp(24px, 4vw, 40px);
    color: #FFFFFF;
}
.annuaire-recruit .annuaire-eyebrow { color: rgba(255, 255, 255, 0.85); }
.annuaire-recruit__body { flex: 1 1 360px; }
.annuaire-recruit__title {
    font-family: var(--ann-font-heading);
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    color: #FFFFFF;
    margin: 6px 0 10px;
    line-height: 1.15;
}
.annuaire-recruit__text { color: rgba(255, 255, 255, 0.85); margin: 0; max-width: 56ch; }
.annuaire-recruit__perks {
    list-style: none; padding: 0; margin: 18px 0 0;
    display: flex; flex-wrap: wrap; gap: 18px;
}
.annuaire-recruit__perks li {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.9rem; font-weight: 600; color: #FFFFFF;
}
.annuaire-recruit__perks i { color: rgba(255, 255, 255, 0.92); }
.annuaire-recruit__actions { flex: 0 0 auto; }

/* CTA blanc à texte bleu CP (lisible sur le dégradé). */
.annuaire-recruit .annuaire-btn--primary { background: #FFFFFF; color: #3A4F7A; }
.annuaire-recruit .annuaire-btn--primary:hover { background: rgba(255, 255, 255, 0.88); color: #3A4F7A; transform: translateY(-2px); }

/* Titre toujours blanc (au cas où une règle h2 d'app interférerait). */
.annuaire-recruit .annuaire-recruit__title { color: #FFFFFF; }

/* Mention "via Celebration Pro" + logo (rendu en blanc sur le dégradé). */
.annuaire-recruit__via {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 0;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.88);
}
.annuaire-recruit__logo {
    height: 36px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.97;
}

/* ── Réassurance (bande compacte) — désormais dans le hero ─────────────── */
.annuaire-trust {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
@media (max-width: 767.98px) { .annuaire-trust { grid-template-columns: 1fr; gap: 20px; } }
.annuaire-trust__item { display: flex; gap: 14px; align-items: flex-start; }
.annuaire-trust__icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ann-accent) 12%, transparent);
    color: var(--ann-accent);
    font-size: 1.2rem;
}
.annuaire-trust__title { font-size: 1rem; font-weight: 700; color: var(--ann-ink); margin: 2px 0 4px; }
.annuaire-trust__text { font-size: 0.9rem; color: var(--ann-ink-muted); margin: 0; line-height: 1.5; }

/* Variante hero : posée sur la photo sombre, sous les suggestions. */
.annuaire-hero__trust {
    margin-top: clamp(28px, 4vw, 44px);
    padding-top: clamp(22px, 3vw, 30px);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    text-align: left;
}
.annuaire-hero__trust .annuaire-trust__icon {
    background: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
}
.annuaire-hero__trust .annuaire-trust__title {
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.annuaire-hero__trust .annuaire-trust__text {
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}

/* ── Tiles catégories — affinage moderne ───────────────────────────────── */
.annuaire-tile {
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius);
    padding: 22px 24px;
    transition: all 0.25s ease;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 18px;
    text-decoration: none;
    color: var(--ann-ink);
    position: relative;
    overflow: hidden;
}
.annuaire-tile::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--ann-gradient);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease;
}
.annuaire-tile:hover {
    border-color: transparent;
    box-shadow: var(--ann-shadow-card-hover);
    transform: translateY(-3px);
    color: var(--ann-ink);
}
.annuaire-tile:hover::before { transform: scaleY(1); }
.annuaire-tile__icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: var(--ann-gradient-soft);
    color: var(--ann-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.annuaire-tile:hover .annuaire-tile__icon {
    transform: scale(1.06) rotate(-3deg);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--ann-accent) 20%, transparent);
}

/* ── Pont multi-plateforme : 3 questions vers l'annuaire de chaque app ──── */
.annuaire-bridge-section {
    background: #FFFFFF;
    padding: clamp(56px, 9vw, 96px) 0;
    border-top: 1px solid var(--ann-line);
}
.annuaire-bridge-section__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 40px;
}

.annuaire-bridge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.annuaire-bridge-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--ann-ink); /* fallback — remplacé par le dégradé de chaque site */
    border-radius: 22px;
    padding: 28px 26px 60px;
    color: #FFFFFF;
    text-decoration: none;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    min-height: 220px;
    overflow: hidden;
    box-shadow: 0 12px 30px -12px rgba(15, 21, 48, 0.40);
}
.annuaire-bridge-card:hover {
    box-shadow: 0 22px 48px -16px rgba(15, 21, 48, 0.50);
    transform: translateY(-4px);
    color: #FFFFFF;
}
/* Carte courante : halo d'accent doux pour signaler « vous y êtes ». */
.annuaire-bridge-card.is-current {
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--ann-accent) 35%, transparent),
        0 16px 36px -14px rgba(15, 21, 48, 0.45);
}

/* Chaque carte porte le DÉGRADÉ de son site (+ reflet doux en haut pour la profondeur). */
.annuaire-bridge-card--mariage {
    background:
        radial-gradient(130% 90% at 18% 0%, rgba(255, 255, 255, 0.20), transparent 55%),
        linear-gradient(135deg, #7E5C9E 0%, #B8807A 52%, #E1965A 100%);
}
.annuaire-bridge-card--adieu {
    background:
        radial-gradient(130% 90% at 18% 0%, rgba(255, 255, 255, 0.16), transparent 55%),
        linear-gradient(135deg, #18324F 0%, #406A97 100%);
}
.annuaire-bridge-card--gestion {
    background:
        radial-gradient(130% 90% at 18% 0%, rgba(255, 255, 255, 0.16), transparent 55%),
        linear-gradient(135deg, #38496E 0%, #4C679D 50%, #5E8765 115%);
}

.annuaire-bridge-card__icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 8px;
}
.annuaire-bridge-card__title {
    font-family: var(--ann-font-heading);
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.25;
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}
.annuaire-bridge-card__hint {
    color: #FFFFFF;
    font-size: 0.9rem;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
.annuaire-bridge-card__brand {
    font-family: var(--ann-font-heading);
    font-size: 0.78rem;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-top: auto;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.annuaire-bridge-card__arrow {
    position: absolute;
    right: 22px;
    bottom: 22px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.22s ease;
}
.annuaire-bridge-card:hover .annuaire-bridge-card__arrow {
    background: #FFFFFF;
    color: #1E2433;
    border-color: #FFFFFF;
    transform: translateX(2px);
}

/* ────────────────────────────────────────────────────────────────────────────
 * FICHE PRESTATAIRE ANNUAIRE — design éditorial premium
 * ──────────────────────────────────────────────────────────────────────────── */
.ann-profile-page {
    background: var(--ann-bg);
    color: var(--ann-ink);
    min-height: 100vh;
}
.ann-profile-page__breadcrumb {
    font-size: 0.85rem;
    color: var(--ann-ink-muted);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ann-profile-page__breadcrumb a { color: var(--ann-ink-muted); text-decoration: none; }
.ann-profile-page__breadcrumb a:hover { color: var(--ann-ink); }
.ann-profile-page__breadcrumb [aria-current="page"] { color: var(--ann-ink); }
.ann-profile-page__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--ann-accent) !important;
}
.ann-profile-page__back:hover { color: var(--ann-accent-strong) !important; }

/* ── HERO centré (compact) ─────────────────────────────────────────────── */
.ann-profile-page__hero {
    position: relative;
    padding: clamp(20px, 3vw, 36px) 0 clamp(28px, 4vw, 48px);
    overflow: hidden;
}
/* Si une cover photo personnalisée est définie (à brancher quand le champ existera). */
.ann-profile-page__hero--has-cover {
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
    min-height: 360px;
}
.ann-profile-page__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,21,48,0.30) 0%, rgba(15,21,48,0.55) 100%);
    pointer-events: none;
}
.ann-profile-page__hero--has-cover .container { position: relative; z-index: 1; }
.ann-profile-page__hero--has-cover .ann-hero__name,
.ann-profile-page__hero--has-cover .ann-hero__accroche { color: #FFFFFF; text-shadow: 0 2px 12px rgba(0,0,0,0.4); }
.ann-profile-page__hero--has-cover .ann-hero__city { color: rgba(255,255,255,0.85); }
/* Labels de chips + note : lisibles (blanc) sur la photo sombre. !important pour la
   note car le lien <a> est neutralisé en encre par la sobriété de l'annuaire. */
.ann-profile-page__hero--has-cover .ann-hero__chips-label { color: rgba(255,255,255,0.92); }
.ann-profile-page__hero--has-cover .ann-hero__rating,
.ann-profile-page__hero--has-cover .ann-hero__rating strong { color: #FFFFFF !important; }
.ann-profile-page__hero--has-cover .ann-hero__rating .text-muted { color: rgba(255,255,255,0.82) !important; }
.ann-profile-page__hero--has-cover .ann-chip--more { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.45); }

.ann-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    max-width: 720px;
    margin: 0 auto;
}
.ann-hero__avatar {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    overflow: hidden;
    background: #FFFFFF;
    border: 3px solid #FFFFFF;
    box-shadow: 0 6px 22px rgba(15, 21, 48, 0.18);
    margin-bottom: 4px;
}
.ann-hero__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ann-hero__avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ann-bg-soft);
    color: var(--ann-accent-soft);
    font-size: 3.4rem;
}
.ann-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px;
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius-pill);
    font-size: 0.8rem;
    color: var(--ann-ink);
    box-shadow: var(--ann-shadow-card);
}
.ann-hero__badge i { color: var(--ann-accent); }
.ann-hero__name {
    font-family: var(--ann-font-heading);
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.05;
    color: var(--ann-ink);
    margin: 0;
    font-weight: 500;
}
.ann-hero__city {
    color: var(--ann-ink-muted);
    margin: 0;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ann-hero__accroche {
    color: var(--ann-ink);
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 4px auto 0;
    max-width: 560px;
}
.ann-hero__chips {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.ann-hero__chips-label {
    font-size: 0.75rem;
    color: var(--ann-ink-muted); /* sobre : kicker neutre (blanc sur photo, cf. has-cover) */
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
}
.ann-hero__chips-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

.ann-hero__actions {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.ann-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 28px;
    background: var(--ann-accent);
    color: #FFFFFF;
    border: 0;
    border-radius: var(--ann-radius-sm);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(76, 103, 157, 0.22);
}
.ann-hero__cta:hover { background: var(--ann-accent-strong); transform: translateY(-2px); color: #FFFFFF; }
.ann-hero__socials { display: inline-flex; gap: 8px; }
.ann-hero__socials a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--ann-line);
    background: #FFFFFF;
    /* !important : la sobriété de l'annuaire neutralise les <a> (et au survol passe
       l'icône en accent → invisible sur le fond accent). On réaffirme les couleurs. */
    color: var(--ann-ink) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.18s ease;
}
.ann-hero__socials a:hover {
    background: var(--ann-accent);
    color: #FFFFFF !important;
    border-color: var(--ann-accent);
}

/* ── STICKY NAV ──────────────────────────────────────────────────────────── */
.ann-stickynav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(251, 250, 246, 0.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--ann-line);
    border-bottom: 1px solid var(--ann-line);
    margin-bottom: 0;
}
.ann-stickynav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 28px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ann-stickynav__list li { flex: 0 0 auto; }
.ann-stickynav__list a {
    display: inline-block;
    padding: 12px 0;
    color: var(--ann-ink-muted);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: all 0.18s ease;
    white-space: nowrap;
}
.ann-stickynav__list a:hover { color: var(--ann-ink); }
.ann-stickynav__list a.is-active {
    color: var(--ann-ink);
    border-bottom-color: var(--ann-accent);
}

/* ── SECTIONS (compact) ──────────────────────────────────────────────────── */
.ann-section {
    padding: clamp(28px, 4vw, 48px) 0;
    border-bottom: 1px solid var(--ann-line);
}
.ann-section:last-child { border-bottom: 0; }
.ann-section__header {
    max-width: 720px;
    margin: 0 0 20px;
}
.ann-eyebrow {
    font-family: var(--ann-font-heading);
    font-size: 0.78rem;
    color: var(--ann-accent);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0 0 8px;
    font-weight: 500;
}
.ann-section__title {
    font-family: var(--ann-font-heading);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: var(--ann-ink);
    line-height: 1.15;
    margin: 0;
    font-weight: 500;
}

/* ── PROSE (présentation) — scroll interne pour limiter la hauteur ────────── */
.ann-prose {
    max-width: 720px;
    color: var(--ann-ink);
    font-size: 1.02rem;
    line-height: 1.7;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 12px;
    /* fade-out discret en bas pour signaler qu'il y a du scroll */
    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
    scrollbar-width: thin;
    scrollbar-color: var(--ann-line) transparent;
}
/* Désactive le mask quand le contenu n'a pas besoin de scroller (rare en CSS pur ;
   on accepte le léger fade — utilisable jusqu'à la fin via scroll). */
.ann-prose::-webkit-scrollbar { width: 6px; }
.ann-prose::-webkit-scrollbar-track { background: transparent; }
.ann-prose::-webkit-scrollbar-thumb { background: var(--ann-line); border-radius: 3px; }
.ann-prose::-webkit-scrollbar-thumb:hover { background: var(--ann-accent-soft); }
.ann-prose p { margin: 0 0 1.1em; }
.ann-prose p:last-child { margin-bottom: 0; }

/* ── CHIPS ────────────────────────────────────────────────────────────────── */
.ann-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--ann-radius-pill);
    background: var(--ann-bg-soft);
    color: var(--ann-ink);
    font-size: 0.8rem;
}
.ann-chip--instrument {
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    color: var(--ann-ink); /* cohérent avec les chips célébrations (neutre, plus violet) */
}
.ann-chip--more {
    background: transparent;
    color: var(--ann-ink-muted);
    border: 1px dashed var(--ann-line);
    cursor: pointer;
    font: inherit;
    line-height: 1;
    transition: all 0.16s ease;
}
.ann-chip--more:hover { border-style: solid; border-color: var(--ann-accent); color: var(--ann-accent); }
.ann-chip--hidden { display: none; }
.ann-chip--lg {
    padding: 8px 18px;
    font-size: 0.9rem;
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    color: var(--ann-ink);
}
.ann-chip--lg i { color: var(--ann-accent); }
.ann-chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ── INFO GRID ────────────────────────────────────────────────────────────── */
.ann-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
    margin: 0;
}
.ann-info { margin: 0; }
.ann-info--wide { grid-column: 1 / -1; max-width: 720px; }
.ann-info dt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ann-font-heading);
    font-size: 0.78rem;
    color: var(--ann-accent);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 6px;
    font-weight: 500;
}
.ann-info dd {
    color: var(--ann-ink);
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
}

/* ── GALERIE MÉDIAS ──────────────────────────────────────────────────────── */
.ann-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.ann-gallery__item {
    position: relative;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius);
    overflow: hidden;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #1d1d1d;
    color: inherit;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ann-gallery__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--ann-shadow-card-hover);
}
.ann-gallery__item img,
.ann-gallery__item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Bouton lecture pour vidéos et YouTube */
.ann-gallery__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.6rem;
    transition: background 0.15s ease, transform 0.15s ease;
}
.ann-gallery__item--playable:hover .ann-gallery__play {
    background: var(--ann-accent, #4C679D);
    transform: translate(-50%, -50%) scale(1.08);
}
/* Légende en surimpression bas de vignette */
.ann-gallery__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 12px 9px;
    font-size: 0.82rem;
    line-height: 1.35;
    color: #fff;
    text-align: left;
    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, transparent 100%);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ann-gallery__item--instagram .ann-gallery__instagram {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #fdf497 0%, #fd5949 30%, #d6249f 60%, #285AEB 100%);
    color: #FFFFFF;
}
.ann-gallery__instagram i { font-size: 2.6rem; }
.ann-gallery__instagram span { font-weight: 500; font-size: 0.92rem; }

/* ── Lightbox médias ─────────────────────────────────────────────────────── */
.ann-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.ann-lightbox[hidden] { display: none; }
.ann-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
}
.ann-lightbox__panel {
    position: relative;
    z-index: 1;
    max-width: min(960px, 92vw);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ann-lightbox__close {
    position: absolute;
    top: -44px;
    right: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.15s ease;
}
.ann-lightbox__close:hover { background: rgba(255, 255, 255, 0.32); }
.ann-lightbox__media {
    width: 100%;
    display: flex;
    justify-content: center;
}
.ann-lightbox__media img,
.ann-lightbox__media video {
    max-width: 100%;
    max-height: 78vh;
    border-radius: 12px;
    display: block;
}
.ann-lightbox__ratio {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}
.ann-lightbox__ratio iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 12px;
}
.ann-lightbox__caption {
    margin: 14px 0 0;
    max-width: 720px;
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.92rem;
    line-height: 1.5;
}
.ann-lightbox__caption[hidden] { display: none; }

/* ── FAQ (compact) ───────────────────────────────────────────────────────── */
.ann-faq { max-width: 820px; }
.ann-faq__section { margin-bottom: 24px; }
.ann-faq__section:last-child { margin-bottom: 0; }
.ann-faq__group-title {
    font-family: var(--ann-font-heading);
    font-size: 0.85rem;
    color: var(--ann-accent);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 0 0 10px;
    font-weight: 500;
}
.ann-faq__item {
    border-top: 1px solid var(--ann-line);
    padding: 2px 0;
}
.ann-faq__item:last-child { border-bottom: 1px solid var(--ann-line); }
.ann-faq__item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 13px 2px;
    cursor: pointer;
    color: var(--ann-ink);
    font-weight: 500;
    list-style: none;
    transition: color 0.15s ease;
}
.ann-faq__item summary::-webkit-details-marker { display: none; }
.ann-faq__item summary:hover { color: var(--ann-accent); }
.ann-faq__item summary i {
    color: var(--ann-ink-muted);
    transition: transform 0.22s ease;
    flex-shrink: 0;
}
.ann-faq__item[open] summary i { transform: rotate(180deg); color: var(--ann-accent); }
.ann-faq__answer {
    color: var(--ann-ink-muted);
    line-height: 1.6;
    padding: 0 2px 14px;
    max-width: 720px;
}

/* ── CONTACT CARD (compact) ───────────────────────────────────────────────── */
.ann-section--contact { padding-bottom: 56px; }
.ann-contact-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius);
    padding: 22px 26px;
    box-shadow: var(--ann-shadow-card);
    flex-wrap: wrap;
}
.ann-contact-card__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--ann-bg-soft);
}
.ann-contact-card__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ann-accent-soft);
    font-size: 2rem;
}
.ann-contact-card__body { flex: 1; min-width: 200px; }
.ann-contact-card__name {
    font-family: var(--ann-font-heading);
    font-size: 1.3rem;
    color: var(--ann-ink);
    margin: 0 0 4px;
    font-weight: 500;
}
.ann-contact-card__role { color: var(--ann-ink-muted); margin: 0; font-size: 0.9rem; }

/* ── MODAL CONTACT ────────────────────────────────────────────────────────── */
.ann-modal[hidden] { display: none; }
.ann-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ann-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 21, 48, 0.65);
    backdrop-filter: blur(4px);
}
.ann-modal__panel {
    position: relative;
    background: #FFFFFF;
    border-radius: var(--ann-radius);
    max-width: 520px;
    width: 100%;
    padding: 28px 28px 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
    animation: ann-modal-in 0.2s ease;
}
@keyframes ann-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ann-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    color: var(--ann-ink-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: all 0.15s ease;
}
.ann-modal__close:hover { background: var(--ann-bg); color: var(--ann-ink); }
.ann-modal__header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ann-line);
    margin-bottom: 18px;
}
.ann-modal__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--ann-bg-soft);
}
.ann-modal__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ann-accent-soft);
    font-size: 1.6rem;
}
.ann-modal__name {
    font-family: var(--ann-font-heading);
    font-size: 1.2rem;
    color: var(--ann-ink);
    margin: 0 0 2px;
    font-weight: 500;
}
.ann-modal__role { color: var(--ann-ink-muted); margin: 0; font-size: 0.85rem; }
.ann-modal__list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; }

.ann-contact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--ann-bg);
    border-radius: var(--ann-radius-sm);
    transition: background 0.15s ease;
}
.ann-contact-row:hover { background: var(--ann-bg-soft); }
.ann-contact-row__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    color: var(--ann-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ann-contact-row__main { flex: 1; min-width: 0; }
.ann-contact-row__label {
    display: block;
    font-size: 0.72rem;
    color: var(--ann-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
    font-weight: 500;
}
.ann-contact-row__value {
    display: block;
    color: var(--ann-ink);
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ann-contact-row__actions { display: inline-flex; gap: 6px; flex-shrink: 0; }
.ann-contact-row__btn {
    width: 32px;
    height: 32px;
    border-radius: var(--ann-radius-sm);
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    color: var(--ann-ink-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.15s ease;
}
.ann-contact-row__btn:hover {
    background: var(--ann-ink);
    color: #FFFFFF;
    border-color: var(--ann-ink);
}

.ann-modal__note {
    font-size: 0.8rem;
    color: var(--ann-ink-muted);
    text-align: center;
    margin: 0;
    line-height: 1.5;
    padding-top: 14px;
    border-top: 1px solid var(--ann-line);
    transition: color 0.2s ease;
}
.ann-modal__note.is-flash { color: var(--ann-accent); font-weight: 500; }

/* ── Formulaire de contact (modale fiche) ────────────────────────────────── */
.ann-contact-form { display: flex; flex-direction: column; gap: 12px; }
.ann-contact-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.ann-contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 575.98px) {
    .ann-contact-form__row { grid-template-columns: 1fr; }
}
.ann-contact-form__field { display: flex; flex-direction: column; gap: 5px; }
.ann-contact-form__field > span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ann-ink);
}
.ann-contact-form__field > span em { font-weight: 400; color: var(--ann-ink-muted); font-style: normal; }
.ann-contact-form__field input,
.ann-contact-form__field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius-sm);
    background: #FFFFFF;
    color: var(--ann-ink);
    font: inherit;
    font-size: 0.95rem;
}
.ann-contact-form__field input:focus,
.ann-contact-form__field textarea:focus {
    outline: none;
    border-color: var(--ann-accent-soft);
    box-shadow: 0 0 0 3px rgba(76, 103, 157, 0.15);
}
.ann-contact-form__field textarea { resize: vertical; min-height: 96px; }
.ann-contact-form__submit { justify-content: center; margin-top: 4px; }
.ann-contact-form__submit[disabled] { opacity: 0.6; cursor: not-allowed; }
.ann-contact-form__status {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: var(--ann-radius-sm);
    font-size: 0.9rem;
    text-align: center;
}
.ann-contact-form__status--success {
    background: var(--success-bg, #e6f4ea);
    color: var(--success, #1b7e1b);
}
.ann-contact-form__status--error {
    background: var(--danger-bg, #fae7e7);
    color: var(--danger, #b42318);
}
.ann-contact-form__socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--ann-line);
    font-size: 0.85rem;
    color: var(--ann-ink-muted);
}
.ann-contact-form__socials a {
    font-size: 1.25rem;
    color: var(--ann-accent);
    text-decoration: none;
}
.ann-contact-form__socials a:hover { color: var(--ann-accent-strong); }

/* ── Vue coordonnées (modale, injectée à la demande) ─────────────────────── */
.ann-contact-details { display: flex; flex-direction: column; gap: 10px; }
.ann-contact-details__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius);
    color: var(--ann-ink);
    text-decoration: none;
    font-size: 0.95rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.ann-contact-details__row:hover { border-color: var(--ann-accent); background: var(--ann-bg-soft); }
.ann-contact-details__row i { color: var(--ann-accent); font-size: 1.15rem; }
.ann-contact-details__row span { word-break: break-word; }
.ann-contact-details__empty,
.ann-contact-details__loading { color: var(--ann-ink-muted); font-size: 0.9rem; text-align: center; padding: 12px 0; }

/* ── Avis : saisie de la note (étoiles radio, CSS-only) ──────────────────── */
.review-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.review-stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.review-stars label { font-size: 1.9rem; line-height: 1; color: #DADFE8; cursor: pointer; padding: 0 3px; transition: color 0.1s ease; }
.review-stars label:hover,
.review-stars label:hover ~ label,
.review-stars input:checked ~ label { color: #F5B301; }
.review-stars input:focus-visible + label { outline: 2px solid var(--ann-accent); outline-offset: 2px; border-radius: 4px; }

/* ── Avis : affichage (onglet fiche) ─────────────────────────────────────── */
.ann-reviews__head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between; margin-bottom: 20px; }
.ann-reviews__score { display: flex; align-items: baseline; gap: 10px; }
.ann-reviews__score-num { font-family: var(--ann-font-heading); font-size: 2.4rem; color: var(--ann-ink); line-height: 1; }
.ann-reviews__score-meta { font-size: 0.9rem; color: var(--ann-ink-muted); }
.ann-reviews__stars { color: #F5B301; font-size: 1.05rem; letter-spacing: 1px; }
.ann-reviews__stars .is-empty { color: #DADFE8; }
.ann-reviews__list { display: grid; gap: 16px; }
@media (min-width: 768px) { .ann-reviews__list { grid-template-columns: repeat(2, 1fr); } }
.ann-review {
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius);
    padding: 16px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ann-review__top { display: flex; align-items: center; gap: 10px; }
.ann-review__avatar {
    width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ann-bg-soft); color: var(--ann-accent-soft); font-weight: 600;
}
.ann-review__who { display: flex; flex-direction: column; min-width: 0; }
.ann-review__author { font-weight: 600; color: var(--ann-ink); }
.ann-review__date { font-size: 0.78rem; color: var(--ann-ink-muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ann-review__place { display: inline-flex; align-items: center; gap: 3px; }
.ann-review__place i { font-size: 0.85rem; }
.ann-review__rating { color: #F5B301; font-size: 0.95rem; }
.ann-review__rating .is-empty { color: #DADFE8; }
.ann-review__title { font-family: var(--ann-font-heading); font-size: 1.05rem; color: var(--ann-ink); }
.ann-review__body { font-size: 0.92rem; line-height: 1.5; color: var(--ann-ink); }
.ann-review__badge {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: var(--ann-radius-pill);
    font-size: 0.72rem; font-weight: 600;
}
.ann-review__badge--certified { background: #E8F5E9; color: #1B7A3D; }
.ann-review__badge--verified { background: var(--ann-bg-soft); color: var(--ann-accent); }
.ann-review__badge--invited { background: #FBF3E2; color: #9A6B00; }
.ann-review__reply {
    margin-top: 6px; padding: 10px 12px; border-left: 3px solid var(--ann-accent);
    background: var(--ann-bg-soft); border-radius: 0 var(--ann-radius) var(--ann-radius) 0;
    font-size: 0.88rem;
}
.ann-review__reply-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ann-review__reply-avatar {
    flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ann-accent-soft); color: var(--ann-accent); font-weight: 600; font-size: 0.8rem;
}
.ann-review__reply-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ann-review__reply-meta { display: flex; flex-direction: column; line-height: 1.2; }
.ann-review__reply-name { font-weight: 600; color: var(--ann-ink); font-size: 0.82rem; }
.ann-review__reply-date { font-size: 0.72rem; color: var(--ann-ink-muted); }
.ann-review__reply-text { color: var(--ann-ink); }
.ann-reviews__empty { color: var(--ann-ink-muted); padding: 24px 0; text-align: center; }

/* ── Avis : photos ───────────────────────────────────────────────────────── */
.ann-review__photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ann-review__photo {
    position: relative; padding: 0; border: 0; cursor: pointer; overflow: hidden;
    width: 64px; height: 64px; border-radius: var(--ann-radius); background: var(--ann-bg-soft);
}
.ann-review__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ann-reviews__photos { margin-bottom: 18px; }
.ann-reviews__photos-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--ann-ink-muted); }
.ann-reviews__photos-label i { color: var(--ann-accent); }
.ann-reviews__photos-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ann-reviews__photos-grid .ann-review__photo { width: 92px; height: 92px; }
.ann-reviews__photos-more {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(15, 21, 48, 0.55); color: #FFFFFF; font-weight: 700; font-size: 1rem;
}

/* ── Réputation externe (badges attribués) ───────────────────────────────── */
.ann-external { margin-bottom: 18px; }
.ann-external__label { display: block; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ann-ink-muted); font-weight: 600; margin-bottom: 8px; }
.ann-external__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.ann-external__badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border: 1px solid var(--ann-line); border-radius: var(--ann-radius-pill);
    background: #FFFFFF; color: var(--ann-ink); text-decoration: none; font-size: 0.85rem;
}
.ann-external__badge:hover { border-color: var(--ann-accent); }
.ann-external__badge > .bi-star-fill { color: #F5B301; }
.ann-external__src { color: var(--ann-ink-muted); }
.ann-external__out { font-size: 0.75rem; color: var(--ann-ink-muted); }

/* ── Stats & award ───────────────────────────────────────────────────────── */
.ann-reviews__award {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: var(--ann-radius-pill);
    background: linear-gradient(135deg, #F5B301, #E89B00); color: #FFFFFF; font-weight: 600; font-size: 0.8rem;
}
.ann-reviews__engaged { font-size: 0.85rem; color: var(--ann-ink-muted); }
.ann-reviews__engaged strong { color: var(--ann-ink); }
.ann-reviews__head-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ann-reviews__legend {
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius);
    padding: 10px 14px;
    margin-bottom: 18px;
    background: var(--ann-bg-soft);
}
.ann-reviews__legend > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ann-ink);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ann-reviews__legend > summary::-webkit-details-marker { display: none; }
.ann-reviews__legend > summary i { color: var(--ann-accent); }
.ann-reviews__legend-list { list-style: none; margin: 12px 0 2px; padding: 0; display: grid; gap: 10px; }
.ann-reviews__legend-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--ann-ink-muted); }
.ann-reviews__legend-list .ann-review__badge { flex: 0 0 auto; }
.ann-hero__rating {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 4px 0 8px; text-decoration: none; color: var(--ann-ink);
}
.ann-hero__rating .ann-reviews__stars { font-size: 0.95rem; }
.ann-hero__rating:hover { color: var(--ann-accent); }

/* ── Note compacte sur les cartes annuaire ───────────────────────────────── */
.annuaire-rating { display: inline-flex; align-items: center; gap: 5px; margin: 2px 0; font-size: 0.82rem; }
.annuaire-rating__stars { color: #F5B301; letter-spacing: 0.5px; }
.annuaire-rating__stars .is-empty { color: #DADFE8; }
.annuaire-rating__avg { color: var(--ann-ink); }
.annuaire-rating__count { color: var(--ann-ink-muted); }

/* ── Hero : ligne ville + rayon ──────────────────────────────────────────── */
.ann-hero__city {
    color: var(--ann-ink-muted);
    margin: 0;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 10px;
}
.ann-hero__city > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ann-hero__city-sep { color: var(--ann-line); }

/* ── Section split : Présentation 2/3 + Célébrations 1/3 ─────────────────── */
.ann-section--split {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    padding: clamp(28px, 4vw, 48px) 0;
    border-bottom: 1px solid var(--ann-line);
    align-items: start;
}
@media (max-width: 991.98px) {
    .ann-section--split {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}
.ann-section__col {
    /* on neutralise les paddings/borders verticaux des <section> qui passeraient ici */
    padding: 0;
    border: 0;
    min-width: 0;
}
.ann-section__col--side {
    /* Card discret pour mettre en valeur les célébrations */
    background: var(--ann-bg-soft);
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius);
    padding: 22px 24px;
}
.ann-section__col--side .ann-section__header { margin-bottom: 14px; }
.ann-section__col--side .ann-chips-grid { gap: 8px; }
.ann-section__col--side .ann-chip--lg {
    background: #FFFFFF;
    font-size: 0.85rem;
    padding: 6px 14px;
}

/* ── FAQ groupée (accordéon de niveau 1) ─────────────────────────────────── */
.ann-faq--grouped { max-width: 880px; }
.ann-faq__group {
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius);
    margin-bottom: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.ann-faq__group[open] {
    box-shadow: var(--ann-shadow-card);
    border-color: var(--ann-accent-soft);
}
.ann-faq__group:last-child { margin-bottom: 0; }
.ann-faq__group-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 22px;
    cursor: pointer;
    list-style: none;
    transition: background 0.15s ease;
}
.ann-faq__group-summary::-webkit-details-marker { display: none; }
.ann-faq__group-summary:hover { background: var(--ann-bg); }
.ann-faq__group[open] .ann-faq__group-summary {
    border-bottom: 1px solid var(--ann-line);
    background: var(--ann-bg);
}

/* Titre du groupe (remplace l'ancien .ann-faq__group-title isolé) */
.ann-faq__group-summary .ann-faq__group-title {
    flex: 1;
    font-family: var(--ann-font-heading);
    font-size: 1rem;
    color: var(--ann-ink);
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
    font-weight: 500;
}
.ann-faq__group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: var(--ann-bg-soft);
    color: var(--ann-accent);
    border-radius: var(--ann-radius-pill);
    font-size: 0.72rem;
    font-weight: 500;
}
.ann-faq__group[open] .ann-faq__group-count {
    background: var(--ann-accent);
    color: #FFFFFF;
}
.ann-faq__group-icon {
    color: var(--ann-ink-muted);
    transition: transform 0.22s ease, color 0.15s ease;
    flex-shrink: 0;
}
.ann-faq__group[open] .ann-faq__group-icon {
    transform: rotate(180deg);
    color: var(--ann-accent);
}

.ann-faq__group-body {
    padding: 8px 22px 18px;
}
.ann-faq--grouped .ann-faq__item {
    border-top: 1px solid var(--ann-line);
    padding: 0;
}
.ann-faq--grouped .ann-faq__item:first-child { border-top: 0; }
.ann-faq--grouped .ann-faq__item:last-child { border-bottom: 0; }

/* ────────────────────────────────────────────────────────────────────────────
 * PAGE MON COMPTE — gestion profil prestataire
 * (cohérent avec le design éditorial annuaire)
 * ──────────────────────────────────────────────────────────────────────────── */
.ann-account {
    background: var(--ann-bg);
    min-height: calc(100vh - 80px);
    padding-bottom: 60px;
}
.ann-account__header {
    text-align: center;
    margin: 28px 0 36px;
}
.ann-account__eyebrow {
    font-family: var(--ann-font-heading);
    color: var(--ann-accent);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.85rem;
    margin: 0 0 12px;
    font-weight: 500;
}
.ann-account__title {
    font-family: var(--ann-font-heading);
    font-size: clamp(1.9rem, 4vw, 2.4rem);
    color: var(--ann-ink);
    margin: 0 0 10px;
    font-weight: 500;
    line-height: 1.1;
}
.ann-account__lead {
    color: var(--ann-ink-muted);
    font-size: 0.98rem;
    max-width: 620px;
    margin: 0 auto;
}

/* Banner page publique active */
.ann-account-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(34, 139, 34, 0.06);
    border: 1px solid rgba(34, 139, 34, 0.20);
    border-radius: var(--ann-radius);
    padding: 14px 20px;
    margin-bottom: 24px;
}
.ann-account-banner__icon { color: #1b7e1b; font-size: 1.3rem; }
.ann-account-banner__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ann-account-banner__body strong { color: var(--ann-ink); font-size: 0.92rem; }
.ann-account-banner__link {
    color: var(--ann-accent);
    text-decoration: none;
    font-size: 0.85rem;
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.ann-account-banner__link:hover { color: var(--ann-ink); }

.ann-account__form { display: flex; flex-direction: column; gap: 18px; }

/* ── Block (card) ──────────────────────────────────────────────────────── */
.ann-account-block {
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius);
    overflow: hidden;
    box-shadow: var(--ann-shadow-card);
    margin-bottom: 18px;
}
.ann-account-block__header {
    padding: 20px 26px 14px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border-bottom: 1px solid var(--ann-line);
}
.ann-account-block__num {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ann-bg-soft);
    color: var(--ann-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ann-font-heading);
    font-weight: 500;
    font-size: 1rem;
}
.ann-account-block__icon {
    flex: 0 0 auto;
    color: var(--ann-accent);
    font-size: 1.4rem;
    margin-top: 2px;
}
.ann-account-block__title {
    font-family: var(--ann-font-heading);
    font-size: 1.2rem;
    margin: 0 0 4px;
    color: var(--ann-ink);
    font-weight: 500;
}
.ann-account-block__hint { color: var(--ann-ink-muted); margin: 0; font-size: 0.875rem; }
.ann-account-block__body { padding: 20px 26px 24px; }
.ann-account-block__label {
    display: block;
    font-size: 0.78rem;
    color: var(--ann-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 6px;
    font-weight: 500;
}

/* ── Méta compte (tableau email/rôles/crédits…) ───────────────────────── */
.ann-account-meta {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ann-account-meta > div {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: baseline;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--ann-line);
}
.ann-account-meta > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ann-account-meta dt {
    flex: 0 0 160px;
    color: var(--ann-ink-muted);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
}
.ann-account-meta dd {
    color: var(--ann-ink);
    font-size: 0.95rem;
    margin: 0;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.ann-account-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--ann-radius-pill);
    background: var(--ann-bg-soft);
    color: var(--ann-ink);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ann-account-badge--success { background: rgba(34, 139, 34, 0.10); color: #1b7e1b; }

/* ── CTA Abonnement ────────────────────────────────────────────────────── */
.ann-account-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 18px;
    padding: 16px 20px;
    background: var(--ann-bg);
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius-sm);
}
.ann-account-cta--soft { background: transparent; border-style: dashed; }
.ann-account-cta__title {
    font-family: var(--ann-font-heading);
    font-size: 1rem;
    color: var(--ann-ink);
    margin: 0 0 4px;
    font-weight: 500;
}
.ann-account-cta__hint { color: var(--ann-ink-muted); font-size: 0.85rem; margin: 0; max-width: 540px; }

/* ── Séparateur "Ma fiche publique" ─────────────────────────────────────── */
.ann-account-section-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin: 28px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ann-line);
}
.ann-account-section-title > i { color: var(--ann-accent); font-size: 1.1rem; }
.ann-account-section-title h2 {
    font-family: var(--ann-font-heading);
    font-size: 1.35rem;
    color: var(--ann-ink);
    margin: 0;
    font-weight: 500;
}
.ann-account-section-title p {
    color: var(--ann-ink-muted);
    font-size: 0.875rem;
    margin: 0 0 0 auto;
}

/* ── Photo de profil ────────────────────────────────────────────────────── */
.ann-account-photo {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 6px 0 16px;
    flex-wrap: wrap;
}
.ann-account-photo__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ann-bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ann-accent-soft);
    font-size: 2.2rem;
    border: 1px solid var(--ann-line);
    flex: 0 0 auto;
}
.ann-account-photo__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ann-account-photo__upload { flex: 1; min-width: 220px; }

/* ── Switch visibilité (iOS-like) ───────────────────────────────────────── */
.ann-account-switch {
    background: var(--ann-bg);
    padding: 14px 18px;
    border-radius: var(--ann-radius-sm);
    margin-bottom: 18px;
}
.ann-account-switch__input { position: absolute; opacity: 0; pointer-events: none; }
.ann-account-switch__label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: var(--ann-ink);
    font-weight: 500;
}
.ann-account-switch__track {
    display: inline-block;
    width: 42px;
    height: 24px;
    background: var(--ann-line);
    border-radius: 12px;
    position: relative;
    transition: background 0.2s ease;
}
.ann-account-switch__track::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 20px; height: 20px;
    background: #FFFFFF;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ann-account-switch__input:checked + .ann-account-switch__label .ann-account-switch__track {
    background: var(--ann-accent);
}
.ann-account-switch__input:checked + .ann-account-switch__label .ann-account-switch__track::after {
    transform: translateX(18px);
}

/* ── URL preview ────────────────────────────────────────────────────────── */
.ann-account-url__input {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius-sm);
    overflow: hidden;
}
.ann-account-url__prefix {
    background: var(--ann-bg);
    color: var(--ann-ink-muted);
    padding: 9px 12px;
    font-size: 0.875rem;
    border-right: 1px solid var(--ann-line);
}
.ann-account-url__field {
    flex: 1;
    border: 0;
    padding: 9px 12px;
    background: transparent;
    outline: none;
    color: var(--ann-ink);
    font-size: 0.875rem;
}
.ann-account-url__preview { font-size: 0.8rem; color: var(--ann-ink-muted); margin-top: 8px; }
.ann-account-url__preview a { color: var(--ann-accent); text-decoration: none; }
.ann-account-save { font-size: 0.85rem; color: var(--ann-ink-muted); margin-top: 8px; }

/* ── Submit + boutons ───────────────────────────────────────────────────── */
.ann-account__actions {
    display: flex;
    justify-content: flex-end;
    padding: 8px 0 16px;
}
.ann-account__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ann-accent);
    color: #FFFFFF;
    border: 0;
    border-radius: var(--ann-radius-sm);
    padding: 11px 22px;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.18s ease;
}
.ann-account__btn:hover { background: var(--ann-accent-strong); color: #FFFFFF; transform: translateY(-1px); }
.ann-account__btn--primary { padding: 12px 28px; }
.ann-account__btn--ghost {
    background: transparent;
    border: 1px solid var(--ann-line);
    color: var(--ann-ink);
}
.ann-account__btn--ghost:hover { background: var(--ann-bg); color: var(--ann-ink); }

/* ── Page builder ───────────────────────────────────────────────────────── */
.ann-account-builder__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.ann-account-builder__empty {
    text-align: center;
    padding: 36px 20px;
    color: var(--ann-ink-muted);
    border: 1px dashed var(--ann-line);
    border-radius: var(--ann-radius-sm);
    background: var(--ann-bg);
}
.ann-account-builder__empty > i {
    font-size: 1.8rem;
    color: var(--ann-accent-soft);
    display: block;
    margin-bottom: 6px;
}
.ann-account-builder__empty p { margin: 0; font-size: 0.9rem; }
.ann-account-builder__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.ann-account-builder__actions-label {
    font-size: 0.78rem;
    color: var(--ann-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-right: 6px;
    font-weight: 500;
}
.ann-account-builder__add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #FFFFFF;
    border: 1px solid var(--ann-line);
    border-radius: var(--ann-radius-pill);
    color: var(--ann-ink);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.18s ease;
}
.ann-account-builder__add:hover { border-color: var(--ann-accent); color: var(--ann-accent); }
.ann-account-builder__add i { color: var(--ann-accent); }

/* ── Traitement titres aligné Celebration Pro ────────────────────────────────
   CP affiche ses titres en SF Pro 600 avec un tracking serré. Les titres
   annuaire étaient en 500 sans tracking → on les remonte ici en un point unique
   (placé après toutes les défs pour gagner à spécificité égale). */
.annuaire-hero__title,
.annuaire-section__title,
.annuaire-results-header__title,
.annuaire-cta-section__title,
.ann-hero__name,
.ann-section__title {
    font-weight: 600;
    letter-spacing: -0.01em;
}
.annuaire-group__title,
.annuaire-tile__title,
.annuaire-card__name,
.annuaire-bridge-card__title,
.ann-profile__title,
.ann-account__title,
.ann-profile-block__title,
.ann-account-block__title {
    font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════
   CHARTE CELEBRATION PRO — 2026
   Palette : primaire #4C679D · secondaire #647F54
   Scope   : tout l'espace de gestion (data-app="gestion")
   ════════════════════════════════════════════════════════════════════ */
[data-app="gestion"] {
    /* ─── Re-mapping des tokens de marque ───────────────────────── */
    --brand:            #4C679D;
    --brand-700:        #3A4F7A;
    --brand-600:        #44598A;
    --brand-500:        #4C679D;
    --brand-400:        #6A82B2;
    --brand-100:        #DDE4EE;
    --brand-50:         #F0F3F8;
    --brand-on:         #FFFFFF;

    --secondary:        #647F54;
    --secondary-700:    #4D6240;
    --secondary-600:    #59704A;
    --secondary-500:    #647F54;
    --secondary-100:    #E0E6DB;
    --secondary-50:     #F1F4ED;

    --silver:           var(--secondary);
    --silver-600:       #8A9A8A;
    --silver-100:       #E0E6DB;

    --border-focus:     var(--brand);
    --ring:             rgba(76, 103, 157, 0.30);
    --glow-brand:       0 0 0 4px rgba(76, 103, 157, 0.08);

    /* Aurora plus douce, légèrement bleutée / verdâtre */
    --aurora-1: rgba(76, 103, 157, 0.05);
    --aurora-2: rgba(100, 127, 84, 0.05);
    --aurora-3: rgba(76, 103, 157, 0.04);

    /* Surface très légèrement teintée pour casser le blanc pur */
    --bg:               #F5F7FB;
    --nl-primary:       #4C679D;
    --nl-secondary:     #647F54;
    --nl-tertiary:      #DDE4EE;
    --nl-gradient:      linear-gradient(135deg, #4C679D 0%, #647F54 100%);

    /* ─── Typographie : SF Pro Display (chaîne système) ─────────
     * Natif sur macOS/iOS via -apple-system, Segoe UI sur Windows,
     * Roboto sur Android, fallback Helvetica/Arial. */
    --cp-font-sans:
        -apple-system, BlinkMacSystemFont,
        "SF Pro Display", "SF Pro Text",
        "Segoe UI", "Roboto",
        "Helvetica Neue", Arial, sans-serif;

    /* Override des fontes héritées (annuaire / NL) dans le scope gestion */
    --ann-font-heading: var(--cp-font-sans);
    --nl-font-heading:  var(--cp-font-sans);
    --nl-font-body:     var(--cp-font-sans);

    font-family: var(--cp-font-sans);
}

[data-app="gestion"] body,
[data-app="gestion"] h1, [data-app="gestion"] h2, [data-app="gestion"] h3,
[data-app="gestion"] h4, [data-app="gestion"] h5, [data-app="gestion"] h6,
[data-app="gestion"] .display-1, [data-app="gestion"] .display-2,
[data-app="gestion"] .display-3, [data-app="gestion"] .display-4,
[data-app="gestion"] .display-5, [data-app="gestion"] .display-6,
[data-app="gestion"] .np-page-title,
[data-app="gestion"] .np-section-title,
[data-app="gestion"] .section-title,
[data-app="gestion"] .section-subtitle,
[data-app="gestion"] .lead,
[data-app="gestion"] .font-heading,
[data-app="gestion"] .btn,
[data-app="gestion"] input,
[data-app="gestion"] textarea,
[data-app="gestion"] select,
[data-app="gestion"] button {
    font-family: var(--cp-font-sans);
}

[data-app="gestion"] .np-page-title {
    font-size: 2rem;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.01em;
}
[data-app="gestion"] .np-section-title,
[data-app="gestion"] .section-title {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

/* ════════════════════════════════════════════════════════════════════
   CHARTE MARIAGE (NMDM) — 2026
   Palette : primaire #663399 · secondaire #FF9900 (accents à 30 %)
   Scope   : tout l'espace mariage (data-app="mariage")
   Reprend la même structure que la charte gestion : tokens couleurs,
   typo SF Pro et override des composants partagés (cp-hero, cp-login).
   ════════════════════════════════════════════════════════════════════ */
[data-app="mariage"] {
    /* ─── Re-mapping des tokens de marque ───────────────────────── */
    --brand:            #663399;
    --brand-700:        #4D2675;
    --brand-600:        #5A2D8A;
    --brand-500:        #663399;
    --brand-400:        #8456B3;
    --brand-100:        #E6DEF6;
    --brand-50:         #F2EDFA;
    --brand-on:         #FFFFFF;

    --secondary:        #FF9900;
    --secondary-700:    #C46F00;
    --secondary-600:    #E08600;
    --secondary-500:    #FF9900;
    --secondary-100:    #FFE8C2;
    --secondary-50:     #FFF5E0;

    --border-focus:     var(--brand);
    --ring:             rgba(102, 51, 153, 0.30);
    --glow-brand:       0 0 0 4px rgba(102, 51, 153, 0.10);

    /* Aurora teintée violet / orange (douce) */
    --aurora-1: rgba(102, 51, 153, 0.05);
    --aurora-2: rgba(255, 153, 0, 0.05);
    --aurora-3: rgba(102, 51, 153, 0.04);

    --bg:               #FAF9F6;
    --nl-primary:       #663399;
    --nl-secondary:     #FF9900;
    --nl-tertiary:      #E6DEF6;
    --nl-gradient:      linear-gradient(135deg, #663399 0%, #FF9900 100%);

    /* ─── Typographie : même famille que gestion (SF Pro) ─────── */
    --cp-font-sans:
        -apple-system, BlinkMacSystemFont,
        "SF Pro Display", "SF Pro Text",
        "Segoe UI", "Roboto",
        "Helvetica Neue", Arial, sans-serif;

    --ann-font-heading: var(--cp-font-sans);
    --nl-font-heading: var(--cp-font-sans);
    --nl-font-body: var(--cp-font-sans);

    font-family: var(--cp-font-sans);
}

[data-app="mariage"] body,
[data-app="mariage"] h1, [data-app="mariage"] h2, [data-app="mariage"] h3,
[data-app="mariage"] h4, [data-app="mariage"] h5, [data-app="mariage"] h6,
[data-app="mariage"] .display-1, [data-app="mariage"] .display-2,
[data-app="mariage"] .display-3, [data-app="mariage"] .display-4,
[data-app="mariage"] .display-5, [data-app="mariage"] .display-6,
[data-app="mariage"] .np-page-title,
[data-app="mariage"] .np-section-title,
[data-app="mariage"] .section-title,
[data-app="mariage"] .section-subtitle,
[data-app="mariage"] .lead,
[data-app="mariage"] .font-heading,
[data-app="mariage"] .btn,
[data-app="mariage"] input,
[data-app="mariage"] textarea,
[data-app="mariage"] select,
[data-app="mariage"] button {
    font-family: var(--cp-font-sans);
}

[data-app="mariage"] .np-page-title {
    font-size: 2rem;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.01em;
}
[data-app="mariage"] .np-section-title,
[data-app="mariage"] .section-title {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

/* ─── Liens & accents (équivalent gestion) ─────────────────────── */
[data-app="mariage"] .np-app-body a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.cp-list__title):not(.cp-tile):not(.cp-widget__action):not(.cp-empty__cta):not(.cp-view-filter__pill):not(.cp-stat):not(.cp-list__item):not(.cp-icon-btn):not(.mw-link-secondary):not(.mw-help__phone):not(.cpro-hero__secondary):not(.mw-pro-link-secondary):not(.mw-pro-upsell__cta):not(.mw-pro-flow__cta):not(.mw-dash-next__all):not(.mw-group__upsell-cta):not(.pro-upsell-modal__cta):not(.np-collectif-upsell__cta):not(.cp-res-legend__inline-link):not(.mw-pro-pricing__more) {
    color: var(--brand);
}
[data-app="mariage"] .np-app-body a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.cp-list__title):not(.cp-tile):not(.cp-widget__action):not(.cp-empty__cta):not(.cp-view-filter__pill):not(.cp-stat):not(.cp-list__item):not(.cp-icon-btn):not(.mw-link-secondary):not(.mw-help__phone):not(.cpro-hero__secondary):not(.mw-pro-link-secondary):not(.mw-pro-upsell__cta):not(.mw-pro-flow__cta):not(.mw-dash-next__all):not(.mw-group__upsell-cta):not(.pro-upsell-modal__cta):not(.np-collectif-upsell__cta):not(.cp-res-legend__inline-link):not(.mw-pro-pricing__more):hover {
    color: var(--brand-700);
}

/* ════════════════════════════════════════════════════════════════════
   SOBRIÉTÉ ANNUAIRE — la couleur ne sert qu'à hiérarchiser
   La règle de lien propre à chaque app force tous les <a> en --brand
   (noms de fiches, « Voir le profil »…), ce qui « colore tout ». On en
   neutralise le TEXTE dans l'annuaire (encre par défaut, accent au survol),
   en répliquant la chaîne :not() + .annuaire-scope pour battre la specificity
   SANS !important — les exceptions en !important (fil d'Ariane blanc du hero,
   « Tous les collectifs »…) restent prioritaires. Les composants interactifs
   (pills, onglets, tri, vues, boutons) sont exclus et gardent leur couleur.
   ════════════════════════════════════════════════════════════════════ */
[data-app="mariage"] .np-app-body.annuaire-scope a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.cp-list__title):not(.cp-tile):not(.cp-widget__action):not(.cp-empty__cta):not(.cp-view-filter__pill):not(.cp-stat):not(.cp-list__item):not(.cp-icon-btn):not(.mw-link-secondary):not(.mw-help__phone):not(.cpro-hero__secondary):not(.mw-pro-link-secondary):not(.mw-pro-upsell__cta):not(.mw-pro-flow__cta):not(.mw-dash-next__all):not(.mw-group__upsell-cta):not(.pro-upsell-modal__cta):not(.np-collectif-upsell__cta):not(.cp-res-legend__inline-link):not(.mw-pro-pricing__more):not(.annuaire-pill):not(.annuaire-tab):not(.annuaire-view-switch__btn):not(.annuaire-sort__btn):not(.annuaire-btn):not(.annuaire-mapbar__view):not(.annuaire-mapbar__submit):not(.annuaire-mapbar__reset):not(.annuaire-filterbar__submit):not(.annuaire-filterbar__reset):not(.annuaire-related__all):not(.annuaire-cta-section__btn),
[data-app="gestion"] .np-app-body.annuaire-scope a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.cp-list__title):not(.cp-tile):not(.cp-widget__action):not(.cp-empty__cta):not(.cp-view-filter__pill):not(.cp-stat):not(.cp-list__item):not(.cp-icon-btn):not(.annuaire-pill):not(.annuaire-tab):not(.annuaire-view-switch__btn):not(.annuaire-sort__btn):not(.annuaire-btn):not(.annuaire-mapbar__view):not(.annuaire-mapbar__submit):not(.annuaire-mapbar__reset):not(.annuaire-filterbar__submit):not(.annuaire-filterbar__reset):not(.annuaire-related__all):not(.annuaire-cta-section__btn) {
    color: var(--ann-ink);
}
[data-app="mariage"] .np-app-body.annuaire-scope a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.cp-list__title):not(.cp-tile):not(.cp-widget__action):not(.cp-empty__cta):not(.cp-view-filter__pill):not(.cp-stat):not(.cp-list__item):not(.cp-icon-btn):not(.mw-link-secondary):not(.mw-help__phone):not(.cpro-hero__secondary):not(.mw-pro-link-secondary):not(.mw-pro-upsell__cta):not(.mw-pro-flow__cta):not(.mw-dash-next__all):not(.mw-group__upsell-cta):not(.pro-upsell-modal__cta):not(.np-collectif-upsell__cta):not(.cp-res-legend__inline-link):not(.mw-pro-pricing__more):not(.annuaire-pill):not(.annuaire-tab):not(.annuaire-view-switch__btn):not(.annuaire-sort__btn):not(.annuaire-btn):not(.annuaire-mapbar__view):not(.annuaire-mapbar__submit):not(.annuaire-mapbar__reset):not(.annuaire-filterbar__submit):not(.annuaire-filterbar__reset):not(.annuaire-related__all):not(.annuaire-cta-section__btn):hover,
[data-app="gestion"] .np-app-body.annuaire-scope a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.cp-list__title):not(.cp-tile):not(.cp-widget__action):not(.cp-empty__cta):not(.cp-view-filter__pill):not(.cp-stat):not(.cp-list__item):not(.cp-icon-btn):not(.annuaire-pill):not(.annuaire-tab):not(.annuaire-view-switch__btn):not(.annuaire-sort__btn):not(.annuaire-btn):not(.annuaire-mapbar__view):not(.annuaire-mapbar__submit):not(.annuaire-mapbar__reset):not(.annuaire-filterbar__submit):not(.annuaire-filterbar__reset):not(.annuaire-related__all):not(.annuaire-cta-section__btn):hover {
    color: var(--ann-accent);
}
[data-app="mariage"] .text-primary { color: var(--brand) !important; }
[data-app="mariage"] .text-secondary { color: var(--secondary) !important; }
[data-app="mariage"] .bg-primary { background-color: var(--brand) !important; }
[data-app="mariage"] .bg-secondary { background-color: var(--secondary) !important; }
[data-app="mariage"] .border-primary { border-color: var(--brand) !important; }

/* ─── Override des tokens de composants partagés ────────────────
   Les deux couleurs (#663399 violet, #FF9900 orange) sont appliquées
   à 40 % d'opacité. L'orange transitionne tôt (45 %) puis monte en
   saturation jusqu'à 100 % pour rester visiblement présent. */
[data-app="mariage"] .cp-hero {
    --cp-hero-glow-1: rgba(255, 153, 0, 0.55);
    --cp-hero-glow-2: rgba(102, 51, 153, 0.40);
    --cp-hero-gradient: linear-gradient(135deg, rgba(102, 51, 153, 0.40) 0%, rgba(255, 153, 0, 0.40) 45%, rgba(255, 153, 0, 0.70) 100%), #663399;
    --cp-hero-shadow: rgba(102, 51, 153, 0.28);
}

/* Hero saturé violet → orange : tout le texte en blanc.
   Ces règles ont une specificity supérieure à `.np-app-body h1`
   (qui force var(--text) sombre par défaut sur l'app body). */
[data-app="mariage"] .cp-hero,
[data-app="mariage"] .np-app-body .cp-hero,
[data-app="mariage"] .cp-hero .cp-hero__title,
[data-app="mariage"] .np-app-body .cp-hero__title {
    color: #ffffff;
}
[data-app="mariage"] .cp-hero__eyebrow {
    color: rgba(255, 255, 255, 0.82);
}
[data-app="mariage"] .cp-hero__subtitle {
    color: rgba(255, 255, 255, 0.88);
}
[data-app="mariage"] .cp-hero__meta-item {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}
[data-app="mariage"] .cp-hero__meta-item i {
    color: rgba(255, 255, 255, 0.92);
}

[data-app="mariage"] .cp-login__visual {
    background-color: #663399 !important;
    background-image: linear-gradient(150deg, rgba(102, 51, 153, 0.40) 0%, rgba(255, 153, 0, 0.40) 45%, rgba(255, 153, 0, 0.70) 100%) !important;
}
/* Texte blanc dans le panneau visuel */
[data-app="mariage"] .cp-login__visual,
[data-app="mariage"] .cp-login__brand,
[data-app="mariage"] .cp-login__lead,
[data-app="mariage"] .cp-login__brands li {
    color: #ffffff;
}
[data-app="mariage"] .cp-login__eyebrow {
    color: rgba(255, 255, 255, 0.85);
}
[data-app="mariage"] .cp-login__brands li {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.28);
}
[data-app="mariage"] .cp-login__brands-sub {
    color: rgba(255, 255, 255, 0.85);
}
[data-app="mariage"] .cp-login__brands-sub a {
    color: #ffffff !important;
    text-decoration: underline;
}

/* ─── Modales mariage : harmonisation typo & accents ─────────────
   Tous les `.modal-title` du scope mariage reprennent la typo de la
   page (SF Pro, couleur brand). Le corps du modal hérite du
   --cp-font-sans déjà appliqué globalement à body / h1–h6 / etc.
   pour [data-app="mariage"]. */
[data-app="mariage"] .modal-title {
    font-family: var(--cp-font-sans);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: #663399;
}
[data-app="mariage"] .modal-body,
[data-app="mariage"] .modal-body p,
[data-app="mariage"] .modal-footer .btn {
    font-family: var(--cp-font-sans);
}
[data-app="mariage"] .modal-body strong {
    color: #663399;
    font-weight: 600;
}

/* Variante spécifique du modal d'inscription : titre légèrement plus
   grand et titres de cartes en orange pour porter l'identité visuelle. */
[data-app="mariage"] #registerChoiceModal .modal-title {
    font-size: 1.6rem;
}
[data-app="mariage"] #registerChoiceModal .cp-role-card__title {
    font-family: var(--cp-font-sans);
    color: #FF9900;
}

/* ═════════════════════════════════════════════════════════════════
   PAGE BIENVENUE MARIAGE (première connexion futurs mariés)
   3 actes : Vous voilà → Comment ça marche → Lancez-vous
   ═════════════════════════════════════════════════════════════════ */
[data-app="mariage"] .mariage-welcome {
    --mw-purple: #663399;
    --mw-orange: #FF9900;
    --mw-purple-dark: #4D2675;
    --mw-ink: #1f1330;
    --mw-muted: rgba(31, 19, 48, 0.72);
    --mw-soft: rgba(102, 51, 153, 0.06);
    --mw-soft-orange: rgba(255, 153, 0, 0.08);

    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: 80px; /* place pour le sticky CTA mobile */
}

/* Scroll-reveal : tout ce qui porte data-welcome-page-target="reveal"
   commence légèrement décalé + invisible, puis s'anime à l'entrée
   dans le viewport via le controller Stimulus. */
[data-app="mariage"] [data-welcome-page-target="reveal"] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-app="mariage"] [data-welcome-page-target="reveal"].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children — quand un parent reveal contient des enfants
   .mw-stagger > *, ils apparaissent en cascade après le parent. */
[data-app="mariage"] [data-welcome-page-target="reveal"] .mw-stagger > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-app="mariage"] [data-welcome-page-target="reveal"].is-revealed .mw-stagger > * {
    opacity: 1;
    transform: translateY(0);
}
[data-app="mariage"] [data-welcome-page-target="reveal"].is-revealed .mw-stagger > *:nth-child(1)  { transition-delay: 0.05s; }
[data-app="mariage"] [data-welcome-page-target="reveal"].is-revealed .mw-stagger > *:nth-child(2)  { transition-delay: 0.12s; }
[data-app="mariage"] [data-welcome-page-target="reveal"].is-revealed .mw-stagger > *:nth-child(3)  { transition-delay: 0.19s; }
[data-app="mariage"] [data-welcome-page-target="reveal"].is-revealed .mw-stagger > *:nth-child(4)  { transition-delay: 0.26s; }
[data-app="mariage"] [data-welcome-page-target="reveal"].is-revealed .mw-stagger > *:nth-child(5)  { transition-delay: 0.33s; }
[data-app="mariage"] [data-welcome-page-target="reveal"].is-revealed .mw-stagger > *:nth-child(6)  { transition-delay: 0.40s; }
[data-app="mariage"] [data-welcome-page-target="reveal"].is-revealed .mw-stagger > *:nth-child(7)  { transition-delay: 0.47s; }
[data-app="mariage"] [data-welcome-page-target="reveal"].is-revealed .mw-stagger > *:nth-child(8)  { transition-delay: 0.54s; }
[data-app="mariage"] [data-welcome-page-target="reveal"].is-revealed .mw-stagger > *:nth-child(9)  { transition-delay: 0.61s; }
[data-app="mariage"] [data-welcome-page-target="reveal"].is-revealed .mw-stagger > *:nth-child(10) { transition-delay: 0.68s; }
[data-app="mariage"] [data-welcome-page-target="reveal"].is-revealed .mw-stagger > *:nth-child(11) { transition-delay: 0.75s; }
[data-app="mariage"] [data-welcome-page-target="reveal"].is-revealed .mw-stagger > *:nth-child(12) { transition-delay: 0.82s; }
@media (prefers-reduced-motion: reduce) {
    [data-app="mariage"] [data-welcome-page-target="reveal"],
    [data-app="mariage"] [data-welcome-page-target="reveal"] .mw-stagger > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ═══════════════ ACTE I : Vous voilà ═══════════════ */

/* Hero split content / vidéo */
[data-app="mariage"] .mw-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: clamp(28px, 5vw, 44px);
    border-radius: 24px;
    background:
        radial-gradient(60% 110% at 100% 100%, rgba(255, 153, 0, 0.55) 0%, transparent 60%),
        radial-gradient(50% 90% at 105% 0%, rgba(102, 51, 153, 0.40) 0%, transparent 55%),
        linear-gradient(135deg, rgba(102, 51, 153, 0.40) 0%, rgba(255, 153, 0, 0.40) 45%, rgba(255, 153, 0, 0.70) 100%),
        var(--mw-purple);
    color: #ffffff;
    box-shadow: 0 14px 36px rgba(102, 51, 153, 0.28);
}
@media (min-width: 992px) {
    [data-app="mariage"] .mw-hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: 48px;
    }
}
[data-app="mariage"] .mw-hero__content {
    min-width: 0;
}
[data-app="mariage"] .mw-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 12px;
}
[data-app="mariage"] .mw-hero__eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}
[data-app="mariage"] .mw-hero__title,
[data-app="mariage"] .np-app-body .mw-hero__title {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
}
[data-app="mariage"] .mw-hero__lead {
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.05rem;
    line-height: 1.55;
    max-width: 52ch;
}
[data-app="mariage"] .mw-hero__keywords {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
[data-app="mariage"] .mw-hero__keywords li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.14) 100%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.88rem;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
[data-app="mariage"] .mw-hero__keywords li i {
    color: #FFE9C7;
}
[data-app="mariage"] .mw-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
[data-app="mariage"] .mw-hero__helper {
    margin: 0;
    font-size: 0.86rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.78);
}
[data-app="mariage"] .mw-link-secondary,
[data-app="mariage"] a.mw-link-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    padding: 6px 2px;
    border: 0;
    background: transparent;
    position: relative;
}
[data-app="mariage"] .mw-link-secondary::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 22px;
    bottom: 2px;
    height: 1px;
    background: rgba(255, 255, 255, 0.55);
    transform-origin: left;
    transition: background 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-app="mariage"] .mw-link-secondary i {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-app="mariage"] .mw-link-secondary:hover,
[data-app="mariage"] .mw-link-secondary:focus {
    color: #ffffff;
}
[data-app="mariage"] .mw-link-secondary:hover::after,
[data-app="mariage"] .mw-link-secondary:focus::after {
    background: #ffffff;
    transform: scaleX(1.05);
}
[data-app="mariage"] .mw-link-secondary:hover i,
[data-app="mariage"] .mw-link-secondary:focus i {
    transform: translateY(3px);
}

/* CTA principal — blanc sur hero, orange en hover + effet shine */
[data-app="mariage"] .mw-cta-primary {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #ffffff;
    color: var(--mw-purple);
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease,
                box-shadow 0.3s ease;
}
[data-app="mariage"] .mw-cta-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%
    );
    transform: skewX(-22deg);
    pointer-events: none;
    transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-app="mariage"] .mw-cta-primary:hover,
[data-app="mariage"] .mw-cta-primary:focus {
    background: var(--mw-orange);
    border-color: var(--mw-orange);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(255, 153, 0, 0.38);
}
[data-app="mariage"] .mw-cta-primary:hover::after,
[data-app="mariage"] .mw-cta-primary:focus::after {
    left: 130%;
}
@media (prefers-reduced-motion: reduce) {
    [data-app="mariage"] .mw-cta-primary::after { display: none; }
}

/* Vidéo dans le hero — vignette compacte side-by-side, cadre décoratif décalé */
[data-app="mariage"] .mw-hero__media {
    position: relative;
    min-width: 0;
}
[data-app="mariage"] .mw-hero__media::before,
[data-app="mariage"] .mw-hero__media::after {
    content: "";
    position: absolute;
    border-radius: 18px;
    pointer-events: none;
    z-index: 0;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Cadre orange en bas-droit */
[data-app="mariage"] .mw-hero__media::before {
    inset: 14px -14px -14px 14px;
    background: linear-gradient(135deg, rgba(255, 153, 0, 0.55) 0%, rgba(255, 153, 0, 0.18) 100%);
    box-shadow: 0 16px 36px rgba(255, 153, 0, 0.18);
}
/* Cadre blanc translucide en haut-gauche */
[data-app="mariage"] .mw-hero__media::after {
    inset: -10px 10px 10px -10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.08) 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
}
[data-app="mariage"] .mw-hero__media:hover::before {
    transform: translate(4px, 4px);
}
[data-app="mariage"] .mw-hero__media:hover::after {
    transform: translate(-4px, -4px);
}
[data-app="mariage"] .mw-video {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #0e0a18;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
    z-index: 1;
}
[data-app="mariage"] .mw-video__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: block;
    overflow: hidden;
}
[data-app="mariage"] .mw-video__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease, filter 0.3s ease;
}
[data-app="mariage"] .mw-video__thumb:hover .mw-video__img,
[data-app="mariage"] .mw-video__thumb:focus-visible .mw-video__img {
    transform: scale(1.04);
    filter: brightness(0.78);
}
[data-app="mariage"] .mw-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mw-purple), var(--mw-orange));
    color: #ffffff;
    font-size: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 36px rgba(102, 51, 153, 0.45);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
    pointer-events: none;
}
/* Halo pulsé autour du bouton play */
[data-app="mariage"] .mw-video__play::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.6);
    animation: mw-play-pulse 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes mw-play-pulse {
    0%   { transform: scale(1);    opacity: 0.85; }
    70%  { transform: scale(1.35); opacity: 0;    }
    100% { transform: scale(1.35); opacity: 0;    }
}
@media (prefers-reduced-motion: reduce) {
    [data-app="mariage"] .mw-video__play::before { animation: none; display: none; }
}
[data-app="mariage"] .mw-video__thumb:hover .mw-video__play,
[data-app="mariage"] .mw-video__thumb:focus-visible .mw-video__play {
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: 0 20px 48px rgba(255, 153, 0, 0.55);
}
[data-app="mariage"] .mw-video__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 16px 20px;
    text-align: left;
    color: #ffffff;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7));
    display: flex;
    flex-direction: column;
    gap: 2px;
}
[data-app="mariage"] .mw-video__caption strong {
    font-size: 0.95rem;
    font-weight: 700;
}
[data-app="mariage"] .mw-video__caption small {
    font-size: 0.78rem;
    opacity: 0.88;
}
[data-app="mariage"] .mw-video-iframe,
[data-app="mariage"] .mariage-welcome__video-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
[data-app="mariage"] .mw-video--placeholder {
    background: linear-gradient(135deg, rgba(102, 51, 153, 0.30), rgba(255, 153, 0, 0.30));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-align: center;
}
[data-app="mariage"] .mw-video--placeholder i {
    font-size: 2.6rem;
    opacity: 0.85;
    display: block;
    margin-bottom: 6px;
}
[data-app="mariage"] .mw-video--placeholder p {
    margin: 0;
    font-style: italic;
    font-size: 0.95rem;
}

/* Bandeau de chiffres / preuves */
[data-app="mariage"] .mw-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px;
    background: var(--surface, #ffffff);
    border-radius: 16px;
    border: 1px solid rgba(102, 51, 153, 0.10);
    box-shadow: 0 2px 8px rgba(31, 19, 48, 0.04);
}
@media (min-width: 768px) {
    [data-app="mariage"] .mw-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
}
[data-app="mariage"] .mw-stats__item {
    text-align: center;
    padding: 8px 4px;
    border-left: 0;
}
@media (min-width: 768px) {
    [data-app="mariage"] .mw-stats__item + .mw-stats__item {
        border-left: 1px solid rgba(102, 51, 153, 0.12);
    }
}
[data-app="mariage"] .mw-stats__num {
    display: block;
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    font-weight: 800;
    background: linear-gradient(135deg, var(--mw-purple) 0%, var(--mw-orange) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
[data-app="mariage"] .mw-stats__label {
    display: block;
    font-size: 0.86rem;
    color: var(--mw-muted);
}

/* ═══════════════ ACTE II : Comment ça marche ═══════════════ */

[data-app="mariage"] .mw-act {
    background: var(--surface, #ffffff);
    border-radius: 20px;
    padding: clamp(28px, 4vw, 44px);
    border: 1px solid rgba(102, 51, 153, 0.10);
    box-shadow: 0 2px 8px rgba(31, 19, 48, 0.04);
}
[data-app="mariage"] .mw-act__head {
    text-align: center;
    margin-bottom: 36px;
}
[data-app="mariage"] .mw-act__overline {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mw-orange);
    margin-bottom: 8px;
}
[data-app="mariage"] .mw-act__overline--light {
    color: rgba(255, 255, 255, 0.85);
}
[data-app="mariage"] .mw-act__title,
[data-app="mariage"] .np-app-body .mw-act__title {
    margin: 0 0 10px;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    color: var(--mw-purple);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
[data-app="mariage"] .mw-act__lead {
    margin: 0 auto;
    max-width: 62ch;
    color: var(--mw-muted);
    line-height: 1.55;
    font-size: 1rem;
}

/* Timeline horizontale 4 étapes — cards avec relief, ghost number en fond */
[data-app="mariage"] .mw-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    position: relative;
}
@media (min-width: 768px) {
    [data-app="mariage"] .mw-timeline {
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }
}
[data-app="mariage"] .mw-timeline__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 24px 22px 22px;
    background: #ffffff;
    border: 1px solid rgba(102, 51, 153, 0.10);
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 4px 14px rgba(102, 51, 153, 0.06);
}
/* Halo dégradé en bas — décoration passive */
[data-app="mariage"] .mw-timeline__step::before {
    content: "";
    position: absolute;
    inset: auto -20% -60% -20%;
    height: 140%;
    background: radial-gradient(60% 80% at 50% 100%, rgba(255, 153, 0, 0.18) 0%, transparent 70%);
    opacity: 0.6;
    z-index: -1;
    pointer-events: none;
}
/* Chiffre ghost géant en arrière-plan */
[data-app="mariage"] .mw-timeline__step::after {
    content: attr(data-step);
    position: absolute;
    top: -18px;
    right: -6px;
    font-size: 7.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, rgba(102, 51, 153, 0.12) 0%, rgba(255, 153, 0, 0.18) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    pointer-events: none;
    z-index: 0;
}
[data-app="mariage"] .mw-timeline__icon {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(102, 51, 153, 0.14) 0%, rgba(255, 153, 0, 0.22) 100%);
    color: var(--mw-purple);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 14px;
}
[data-app="mariage"] .mw-timeline__num {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--mw-orange);
    margin-bottom: 6px;
    text-transform: uppercase;
}
[data-app="mariage"] .mw-timeline__title,
[data-app="mariage"] .np-app-body .mw-timeline__title {
    position: relative;
    z-index: 1;
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mw-ink);
    line-height: 1.25;
}
[data-app="mariage"] .mw-timeline__desc {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    font-size: 0.88rem;
    color: var(--mw-muted);
    line-height: 1.5;
}
[data-app="mariage"] .mw-timeline__time {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--mw-purple);
    background: rgba(102, 51, 153, 0.09);
    padding: 5px 11px;
    border-radius: 999px;
    margin-top: auto;
}

/* Loop visuel entre étapes 2 et 3 */
[data-app="mariage"] .mw-loop {
    margin-top: 28px;
    padding: 18px 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--mw-soft) 0%, var(--mw-soft-orange) 100%);
    border-left: 4px solid var(--mw-orange);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}
[data-app="mariage"] .mw-loop__visual {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
[data-app="mariage"] .mw-loop__dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mw-purple), var(--mw-orange));
    color: #ffffff;
    font-weight: 700;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
[data-app="mariage"] .mw-loop__icon {
    font-size: 1.4rem;
    color: var(--mw-orange);
}
[data-app="mariage"] .mw-loop__text {
    margin: 0;
    color: var(--mw-ink);
    font-size: 0.92rem;
    line-height: 1.5;
    flex: 1;
    min-width: 200px;
}
[data-app="mariage"] .mw-loop__text strong {
    display: block;
    color: var(--mw-purple);
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 2px;
}

/* Grille des inclusions */
[data-app="mariage"] .mw-includes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 576px) {
    [data-app="mariage"] .mw-includes {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 992px) {
    [data-app="mariage"] .mw-includes {
        grid-template-columns: repeat(3, 1fr);
    }
}
[data-app="mariage"] .mw-includes__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid rgba(102, 51, 153, 0.10);
    border-radius: 14px;
    color: var(--mw-ink);
    font-size: 0.92rem;
    line-height: 1.4;
    box-shadow: 0 3px 10px rgba(102, 51, 153, 0.05);
    overflow: hidden;
}
/* Liseré coloré gauche — décoration passive */
[data-app="mariage"] .mw-includes__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--mw-purple), var(--mw-orange));
    opacity: 0.45;
}
/* Icône dans cercle dégradé */
[data-app="mariage"] .mw-includes__item i {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(102, 51, 153, 0.14) 0%, rgba(255, 153, 0, 0.22) 100%);
    color: var(--mw-purple);
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Bloc paiement — conclusion narrative de l'acte II */
[data-app="mariage"] .mw-payment {
    background: linear-gradient(135deg, rgba(102, 51, 153, 0.04) 0%, rgba(255, 153, 0, 0.04) 100%);
    border: 1px solid rgba(102, 51, 153, 0.18);
    border-radius: 20px;
    padding: clamp(28px, 4vw, 44px);
}
[data-app="mariage"] .mw-payment__main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: center;
}
@media (min-width: 768px) {
    [data-app="mariage"] .mw-payment__main {
        grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
        gap: 40px;
    }
}
[data-app="mariage"] .mw-payment__pitch {
    min-width: 0;
}
[data-app="mariage"] .mw-payment__title,
[data-app="mariage"] .np-app-body .mw-payment__title {
    margin: 6px 0 12px;
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight: 700;
    color: var(--mw-purple);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
[data-app="mariage"] .mw-payment__lead {
    margin: 0 0 14px;
    color: var(--mw-ink);
    line-height: 1.6;
}
[data-app="mariage"] .mw-payment__text {
    margin: 0;
    color: var(--mw-muted);
    line-height: 1.6;
    font-size: 0.95rem;
}
[data-app="mariage"] .mw-payment__text strong {
    color: var(--mw-purple);
}
[data-app="mariage"] .mw-payment__price-card {
    background: linear-gradient(135deg, var(--mw-purple) 0%, var(--mw-orange) 130%);
    color: #ffffff;
    border-radius: 18px;
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 14px 36px rgba(102, 51, 153, 0.30);
}
[data-app="mariage"] .mw-payment__price-label {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.86;
    margin-bottom: 10px;
}
[data-app="mariage"] .mw-payment__price-amount {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 10px;
}
[data-app="mariage"] .mw-payment__price-currency {
    font-size: 1.8rem;
    font-weight: 600;
}
[data-app="mariage"] .mw-payment__price-helper {
    display: block;
    font-size: 0.84rem;
    opacity: 0.92;
    margin-bottom: 18px;
}
[data-app="mariage"] .mw-payment__price-cta {
    width: 100%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    color: var(--mw-purple);
    border: 0;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}
[data-app="mariage"] .mw-payment__price-cta:hover,
[data-app="mariage"] .mw-payment__price-cta:focus {
    background: rgba(255, 255, 255, 0.92);
    color: var(--mw-purple-dark);
}
[data-app="mariage"] .mw-payment__price-secure {
    margin: 14px 0 0;
    font-size: 0.78rem;
    opacity: 0.86;
}
[data-app="mariage"] .mw-payment__transparency {
    margin: 24px 0 0;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--mw-ink);
    font-size: 0.88rem;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
}
[data-app="mariage"] .mw-payment__transparency i {
    color: var(--mw-purple);
}

/* ═══════════════ ACTE III : Lancez-vous ═══════════════ */

[data-app="mariage"] .mw-final {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
[data-app="mariage"] .mw-final__cta {
    text-align: center;
    padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 40px);
    border-radius: 24px;
    background:
        radial-gradient(60% 110% at 100% 100%, rgba(255, 153, 0, 0.55) 0%, transparent 60%),
        linear-gradient(135deg, rgba(102, 51, 153, 0.40) 0%, rgba(255, 153, 0, 0.40) 45%, rgba(255, 153, 0, 0.70) 100%),
        var(--mw-purple);
    color: #ffffff;
    box-shadow: 0 14px 36px rgba(102, 51, 153, 0.28);
}
[data-app="mariage"] .mw-final__title,
[data-app="mariage"] .np-app-body .mw-final__title {
    margin: 0 0 12px;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
}
[data-app="mariage"] .mw-final__text {
    margin: 0 auto 24px;
    max-width: 54ch;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.55;
}
[data-app="mariage"] .mw-final__btn {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--mw-purple);
    font-weight: 600;
    padding: 12px 28px;
}
[data-app="mariage"] .mw-final__btn:hover,
[data-app="mariage"] .mw-final__btn:focus {
    background: var(--mw-orange);
    border-color: var(--mw-orange);
    color: #ffffff;
}

/* 2 claims horizontaux remontés hors de la FAQ */
[data-app="mariage"] .mw-claims {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 768px) {
    [data-app="mariage"] .mw-claims {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}
[data-app="mariage"] .mw-claims__item {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 22px 24px;
    background: var(--surface, #ffffff);
    border: 1px solid rgba(102, 51, 153, 0.14);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(31, 19, 48, 0.05);
    overflow: hidden;
}
[data-app="mariage"] .mw-claims__item::before {
    content: "";
    position: absolute;
    inset: auto -10% -60% -10%;
    height: 120%;
    background: radial-gradient(50% 70% at 50% 100%, rgba(255, 153, 0, 0.14) 0%, transparent 70%);
    pointer-events: none;
}
[data-app="mariage"] .mw-claims__item i {
    position: relative;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(102, 51, 153, 0.14), rgba(255, 153, 0, 0.22));
    color: var(--mw-purple);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}
[data-app="mariage"] .mw-claims__item > div { position: relative; }
[data-app="mariage"] .mw-claims__item h4 {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--mw-purple);
}
[data-app="mariage"] .mw-claims__item p {
    margin: 0;
    color: var(--mw-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* FAQ + aide côte à côte */
[data-app="mariage"] .mw-faq-help {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 992px) {
    [data-app="mariage"] .mw-faq-help {
        grid-template-columns: 1.6fr 1fr;
        gap: 24px;
    }
}
[data-app="mariage"] .mw-faq {
    background: var(--surface, #ffffff);
    border: 1px solid rgba(102, 51, 153, 0.12);
    border-radius: 16px;
    padding: 22px 24px;
}
[data-app="mariage"] .mw-faq__title,
[data-app="mariage"] .np-app-body .mw-faq__title {
    margin: 0 0 16px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mw-purple);
}
[data-app="mariage"] .mw-faq .accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: var(--mw-ink);
    --bs-accordion-border-color: transparent;
    --bs-accordion-border-radius: 12px;
    --bs-accordion-active-color: var(--mw-purple);
    --bs-accordion-active-bg: transparent;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(102, 51, 153, 0.15);
    --bs-accordion-btn-icon: none;
    --bs-accordion-btn-active-icon: none;
}
[data-app="mariage"] .mw-faq .accordion-item {
    position: relative;
    border: 1px solid rgba(102, 51, 153, 0.10);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 10px;
    background: #ffffff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
[data-app="mariage"] .mw-faq .accordion-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--mw-purple), var(--mw-orange));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;
}
[data-app="mariage"] .mw-faq .accordion-item:hover {
    border-color: rgba(255, 153, 0, 0.35);
    box-shadow: 0 6px 18px rgba(102, 51, 153, 0.08);
}
[data-app="mariage"] .mw-faq .accordion-item:hover::before,
[data-app="mariage"] .mw-faq .accordion-item:has(.accordion-button:not(.collapsed))::before {
    transform: scaleY(1);
}
[data-app="mariage"] .mw-faq .accordion-button {
    font-weight: 600;
    color: var(--mw-ink);
    font-size: 0.95rem;
    padding-right: 50px;
    background: transparent;
    border: 0;
    position: relative;
}
/* Bouton +/− custom à droite */
[data-app="mariage"] .mw-faq .accordion-button::after {
    content: "+";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(102, 51, 153, 0.08);
    color: var(--mw-purple);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-image: none;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-app="mariage"] .mw-faq .accordion-button:not(.collapsed) {
    color: var(--mw-purple);
    background: transparent;
    box-shadow: none;
}
[data-app="mariage"] .mw-faq .accordion-button:not(.collapsed)::after {
    content: "−";
    background: linear-gradient(135deg, var(--mw-purple), var(--mw-orange));
    color: #ffffff;
    transform: translateY(-50%) rotate(180deg);
}
[data-app="mariage"] .mw-faq .accordion-body {
    color: var(--mw-muted);
    line-height: 1.55;
    font-size: 0.92rem;
}
[data-app="mariage"] .mw-help {
    background: var(--surface, #ffffff);
    border: 1px solid rgba(102, 51, 153, 0.12);
    border-radius: 16px;
    padding: 22px 24px;
    align-self: start;
}
[data-app="mariage"] .mw-help__title,
[data-app="mariage"] .np-app-body .mw-help__title {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mw-purple);
}
[data-app="mariage"] .mw-help__text {
    margin: 0 0 16px;
    font-size: 0.9rem;
    color: var(--mw-muted);
    line-height: 1.5;
}
[data-app="mariage"] .mw-help__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
[data-app="mariage"] .mw-help__phone {
    color: var(--mw-purple);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
}
[data-app="mariage"] .mw-help__phone:hover,
[data-app="mariage"] .mw-help__phone:focus {
    color: var(--mw-orange);
}

/* ═══════════════ Sticky CTA mobile ═══════════════ */
[data-app="mariage"] .mw-sticky {
    display: none;
}
@media (max-width: 767px) {
    [data-app="mariage"] .mw-sticky {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(102, 51, 153, 0.16);
        z-index: 1030;
        transform: translateY(0);
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    [data-app="mariage"] .mw-sticky.is-hidden {
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
    }
    [data-app="mariage"] .mw-sticky__btn {
        width: 100%;
        background: linear-gradient(135deg, var(--mw-purple), var(--mw-orange));
        color: #ffffff;
        border: 0;
        font-weight: 600;
        padding: 12px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 18px rgba(102, 51, 153, 0.32);
    }
    [data-app="mariage"] .mw-sticky__btn:hover,
    [data-app="mariage"] .mw-sticky__btn:focus {
        background: var(--mw-orange);
        color: #ffffff;
    }
}

/* ─── Wizard de création de célébration (override mariage) ─────
   La modale partagée .cp-wizard utilise par défaut le dégradé bleu/vert
   de l'espace gestion. On ré-applique ici la charte mariage (violet/orange)
   au header, à l'icône d'étape, aux boutons et à la sélection de rôle.
   La modale est portée hors du conteneur [data-app="mariage"] par Bootstrap,
   mais data-app vit sur <html> donc ces sélecteurs restent valides. */
[data-app="mariage"] .cp-wizard__header {
    background:
        radial-gradient(60% 110% at 100% 100%, rgba(255, 153, 0, 0.55) 0%, transparent 60%),
        radial-gradient(50% 90% at 0% 0%, rgba(102, 51, 153, 0.45) 0%, transparent 55%),
        linear-gradient(125deg, #663399 0%, #8A4FA8 55%, #FF9900 135%);
}
[data-app="mariage"] .cp-wizard__progress-step.is-current .cp-wizard__progress-num::before {
    background: #ffffff;
    color: #663399;
    border-color: #ffffff;
}
[data-app="mariage"] .cp-wizard__progress-step.is-done .cp-wizard__progress-num::before {
    background: #FF9900;
    color: #ffffff;
    border-color: #FF9900;
}
[data-app="mariage"] .cp-wizard__progress-step.is-done .cp-wizard__progress-bar {
    background: #FF9900;
}
[data-app="mariage"] .cp-wizard__step-title-icon {
    background: rgba(102, 51, 153, 0.10);
    color: #663399;
}
[data-app="mariage"] .cp-wizard__step-title-icon--secondary {
    background: rgba(255, 153, 0, 0.14);
    color: #FF9900;
}
[data-app="mariage"] .cp-wizard__person-heading i {
    color: #663399;
}
/* Cartes de rôle : violet par défaut, orange pour la variante secondary */
[data-app="mariage"] .cp-wizard__role-icon {
    background: rgba(102, 51, 153, 0.10);
    color: #663399;
}
[data-app="mariage"] .cp-wizard__role--secondary .cp-wizard__role-icon {
    background: rgba(255, 153, 0, 0.14);
    color: #FF9900;
}
[data-app="mariage"] .cp-wizard__role:hover {
    border-color: #663399;
    background: rgba(102, 51, 153, 0.05);
}
[data-app="mariage"] .cp-wizard__role:hover .cp-wizard__role-icon {
    background: #663399;
    color: #ffffff;
}
[data-app="mariage"] .cp-wizard__role--secondary:hover {
    border-color: #FF9900;
    background: rgba(255, 153, 0, 0.06);
}
[data-app="mariage"] .cp-wizard__role--secondary:hover .cp-wizard__role-icon {
    background: #FF9900;
    color: #ffffff;
}
/* Boutons primaires dans la modale : on adopte la charte mariage. */
[data-app="mariage"] .cp-wizard .btn-primary,
[data-app="mariage"] .cp-wizard__nav .btn-primary {
    background: #663399;
    border-color: #663399;
    color: #ffffff;
}
[data-app="mariage"] .cp-wizard .btn-primary:hover,
[data-app="mariage"] .cp-wizard .btn-primary:focus,
[data-app="mariage"] .cp-wizard__nav .btn-primary:hover,
[data-app="mariage"] .cp-wizard__nav .btn-primary:focus {
    background: #FF9900;
    border-color: #FF9900;
    color: #ffffff;
}

/* ════════════════════════════════════════════════════════════════
   Dashboard mariage — ROLE_USER avec célébration créée
   Préfixe .md-* (Mariage Dashboard). Hérite des tokens du wizard mariage
   et reprend les patterns de relief utilisés sur la page de bienvenue
   (.mw-*) pour cohérence visuelle.
   ════════════════════════════════════════════════════════════════ */
[data-app="mariage"] .md-dashboard {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3rem);
}

/* ─── Hero ─── */
[data-app="mariage"] .md-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: clamp(28px, 5vw, 44px);
    border-radius: 24px;
    background:
        radial-gradient(60% 110% at 100% 100%, rgba(255, 153, 0, 0.55) 0%, transparent 60%),
        radial-gradient(50% 90% at 0% 0%, rgba(102, 51, 153, 0.45) 0%, transparent 55%),
        linear-gradient(135deg, rgba(102, 51, 153, 0.40) 0%, rgba(255, 153, 0, 0.40) 45%, rgba(255, 153, 0, 0.70) 100%),
        #663399;
    color: #ffffff;
    box-shadow: 0 14px 36px rgba(102, 51, 153, 0.28);
    align-items: center;
}
@media (min-width: 768px) {
    [data-app="mariage"] .md-hero {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 36px;
    }
}
[data-app="mariage"] .md-hero__content { min-width: 0; }
[data-app="mariage"] .md-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 10px;
}
[data-app="mariage"] .md-hero__eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}
[data-app="mariage"] .md-hero__title,
[data-app="mariage"] .np-app-body .md-hero__title {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
}
[data-app="mariage"] .md-hero__date,
[data-app="mariage"] .md-hero__place {
    margin: 0 0 6px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
[data-app="mariage"] .md-hero__date i,
[data-app="mariage"] .md-hero__place i {
    color: #FFE9C7;
}
[data-app="mariage"] .md-hero__date-sep {
    opacity: 0.55;
    margin: 0 4px;
}
[data-app="mariage"] .md-hero__status {
    margin-top: 16px;
}
[data-app="mariage"] .md-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
[data-app="mariage"] .md-hero__badge--ok {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
}
[data-app="mariage"] .md-hero__badge--warn {
    background: rgba(255, 153, 0, 0.85);
    color: #2A1A06;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Compte à rebours — bulle circulaire sur fond translucide */
[data-app="mariage"] .md-countdown {
    justify-self: end;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    min-height: 140px;
    padding: 18px 22px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    text-align: center;
    line-height: 1;
}
[data-app="mariage"] .md-countdown__prefix {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.85;
}
[data-app="mariage"] .md-countdown__num {
    font-size: 3.4rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 4px 0 2px;
    font-variant-numeric: tabular-nums;
}
[data-app="mariage"] .md-countdown__suffix {
    font-size: 0.82rem;
    font-weight: 600;
    opacity: 0.85;
    text-transform: lowercase;
}
[data-app="mariage"] .md-countdown__today,
[data-app="mariage"] .md-countdown__past {
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
}

/* ─── Bloc alerte paiement ─── */
[data-app="mariage"] .md-alert {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    padding: 22px 24px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 153, 0, 0.10) 0%, rgba(102, 51, 153, 0.06) 100%);
    border: 1px solid rgba(255, 153, 0, 0.35);
    align-items: center;
}
@media (min-width: 768px) {
    [data-app="mariage"] .md-alert {
        grid-template-columns: auto 1fr auto;
    }
}
[data-app="mariage"] .md-alert__icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #663399 0%, #FF9900 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    flex-shrink: 0;
    box-shadow: 0 8px 22px rgba(255, 153, 0, 0.28);
}
[data-app="mariage"] .md-alert__body { min-width: 0; }
[data-app="mariage"] .md-alert__title,
[data-app="mariage"] .np-app-body .md-alert__title {
    margin: 0 0 4px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #663399;
}
[data-app="mariage"] .md-alert__text {
    margin: 0;
    color: rgba(31, 19, 48, 0.75);
    font-size: 0.92rem;
    line-height: 1.5;
}
[data-app="mariage"] .md-alert__cta {
    background: #663399;
    border: 1px solid #663399;
    color: #ffffff;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(102, 51, 153, 0.28);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
[data-app="mariage"] .md-alert__cta:hover,
[data-app="mariage"] .md-alert__cta:focus {
    background: #FF9900;
    border-color: #FF9900;
    color: #ffffff;
    transform: translateY(-1px);
}

/* ─── Entêtes de section ─── */
[data-app="mariage"] .md-section__head {
    text-align: left;
    margin-bottom: 16px;
}
[data-app="mariage"] .md-section__overline {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #FF9900;
    margin-bottom: 4px;
}
[data-app="mariage"] .md-section__title,
[data-app="mariage"] .np-app-body .md-section__title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: #663399;
    letter-spacing: -0.01em;
}

/* ─── Progress cards (admin / déroulé) ─── */
[data-app="mariage"] .md-progress__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 768px) {
    [data-app="mariage"] .md-progress__grid {
        grid-template-columns: 1fr 1fr;
    }
}
[data-app="mariage"] .md-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 22px 20px;
    background: #ffffff;
    border: 1px solid rgba(102, 51, 153, 0.10);
    border-radius: 18px;
    color: #1f1330;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 4px 14px rgba(102, 51, 153, 0.06);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}
/* Halo en bas qui s'intensifie au hover (car la card est cliquable) */
[data-app="mariage"] .md-card::before {
    content: "";
    position: absolute;
    inset: auto -10% -50% -10%;
    height: 110%;
    background: radial-gradient(60% 80% at 50% 100%, rgba(255, 153, 0, 0.20) 0%, transparent 70%);
    opacity: 0.5;
    transition: opacity 0.3s ease;
    z-index: -1;
    pointer-events: none;
}
[data-app="mariage"] .md-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 153, 0, 0.4);
    box-shadow: 0 18px 36px rgba(102, 51, 153, 0.14);
    color: #1f1330;
}
[data-app="mariage"] .md-card:hover::before {
    opacity: 1;
}
[data-app="mariage"] .md-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
[data-app="mariage"] .md-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(102, 51, 153, 0.14), rgba(255, 153, 0, 0.20));
    color: #663399;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    transition: background 0.3s ease, color 0.3s ease;
}
[data-app="mariage"] .md-card:hover .md-card__icon {
    background: linear-gradient(135deg, #663399, #FF9900);
    color: #ffffff;
}
[data-app="mariage"] .md-card__percent {
    font-size: 1.7rem;
    font-weight: 800;
    background: linear-gradient(135deg, #663399 0%, #FF9900 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
[data-app="mariage"] .md-card__title,
[data-app="mariage"] .np-app-body .md-card__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f1330;
}
[data-app="mariage"] .md-card__desc {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(31, 19, 48, 0.7);
}
[data-app="mariage"] .md-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #663399;
    transition: gap 0.25s ease, color 0.25s ease;
}
[data-app="mariage"] .md-card:hover .md-card__cta {
    color: #FF9900;
    gap: 10px;
}

/* ─── Shortcuts grid ─── */
[data-app="mariage"] .md-shortcuts__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 576px) {
    [data-app="mariage"] .md-shortcuts__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 992px) {
    [data-app="mariage"] .md-shortcuts__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
[data-app="mariage"] .md-shortcut {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid rgba(102, 51, 153, 0.10);
    border-radius: 14px;
    color: #1f1330;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(102, 51, 153, 0.05);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}
[data-app="mariage"] .md-shortcut:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 153, 0, 0.35);
    box-shadow: 0 12px 24px rgba(102, 51, 153, 0.12);
    color: #1f1330;
}
[data-app="mariage"] .md-shortcut__icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(102, 51, 153, 0.14), rgba(255, 153, 0, 0.20));
    color: #663399;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: background 0.3s ease, color 0.3s ease;
}
[data-app="mariage"] .md-shortcut:hover .md-shortcut__icon {
    background: linear-gradient(135deg, #663399, #FF9900);
    color: #ffffff;
}
[data-app="mariage"] .md-shortcut__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
[data-app="mariage"] .md-shortcut__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f1330;
}
[data-app="mariage"] .md-shortcut__desc {
    font-size: 0.8rem;
    color: rgba(31, 19, 48, 0.65);
    margin-top: 2px;
}

/* ─── Bandeau pro nudge (header mariage) ─────────────────────────
   Subtil rappel pour les pros connectés que leur espace dédié est
   accessible côté Celebration Pro. Volontairement plat (pas une
   alerte agressive) — il vit en haut du contenu, sous la navbar. */
[data-app="mariage"] .np-pro-nudge {
    background: linear-gradient(135deg, rgba(102, 51, 153, 0.06) 0%, rgba(255, 153, 0, 0.06) 100%);
    border: 1px solid rgba(102, 51, 153, 0.18);
    border-radius: var(--radius-lg, 12px);
    padding: 12px 16px;
    color: #1f1330;
}
[data-app="mariage"] .np-pro-nudge__icon {
    font-size: 1.3rem;
    color: #663399;
    flex-shrink: 0;
}
[data-app="mariage"] .np-pro-nudge__title {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: #663399;
}
[data-app="mariage"] .np-pro-nudge__text {
    display: block;
    font-size: 0.85rem;
    color: rgba(31, 19, 48, 0.78);
    line-height: 1.35;
}
[data-app="mariage"] .np-pro-nudge__cta {
    flex-shrink: 0;
    color: #663399;
    border-color: #663399;
    background: #ffffff;
}
[data-app="mariage"] .np-pro-nudge__cta:hover,
[data-app="mariage"] .np-pro-nudge__cta:focus {
    background: #FF9900;
    border-color: #FF9900;
    color: #ffffff;
}
@media (max-width: 575px) {
    [data-app="mariage"] .np-pro-nudge {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }
}

/* ════════════════════════════════════════════════════════════════
   CTA navbar mariage — bascule vers l'espace pro (charte gestion).
   On adopte volontairement la palette gestion (bleu/vert) pour signaler
   visuellement la bascule entre l'espace particulier et l'espace pro.
   ════════════════════════════════════════════════════════════════ */
[data-app="mariage"] .nav-link.nav-link--pro-cta {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background:
        radial-gradient(50% 90% at 100% 0%, rgba(100, 127, 84, 0.35) 0%, transparent 60%),
        linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 135%);
    color: #fff !important;
    border-radius: 999px;
    padding: 0.4rem 0.95rem 0.4rem 0.55rem;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 4px 12px rgba(58, 79, 122, 0.32);
}
[data-app="mariage"] .nav-link.nav-link--pro-cta:hover,
[data-app="mariage"] .nav-link.nav-link--pro-cta:focus {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(58, 79, 122, 0.42);
    filter: brightness(1.06);
}
[data-app="mariage"] .nav-link--pro-logo {
    height: 26px;
    width: 26px;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    padding: 3px;
    flex-shrink: 0;
}

/* Idem côté gestion pour le non-pro contributeur qui voit ces 2 CTA dans la navbar */
[data-app="gestion"] .nav-link.nav-link--pro-cta {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background:
        radial-gradient(50% 90% at 100% 0%, rgba(100, 127, 84, 0.35) 0%, transparent 60%),
        linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 135%);
    color: #fff !important;
    border-radius: 999px;
    padding: 0.4rem 0.95rem 0.4rem 0.55rem;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 4px 12px rgba(58, 79, 122, 0.32);
}
[data-app="gestion"] .nav-link.nav-link--pro-cta:hover,
[data-app="gestion"] .nav-link.nav-link--pro-cta:focus {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(58, 79, 122, 0.42);
    filter: brightness(1.06);
}
[data-app="gestion"] .nav-link--pro-logo {
    height: 26px; width: 26px;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    padding: 3px;
    flex-shrink: 0;
}

/* Bouton "Espace perso" (retour NMDM avec logo) pour le non-pro contributeur sur gestion */
[data-app="gestion"] .gestion-nav-link--back {
    display: inline-flex !important; align-items: center; gap: 8px;
    color: #663399 !important;
    font-weight: 600;
    background: rgba(102, 51, 153, 0.08);
    border: 1px solid rgba(102, 51, 153, 0.22);
    border-radius: 999px;
    padding: 0.4rem 0.95rem 0.4rem 0.55rem !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    text-decoration: none;
}
[data-app="gestion"] .gestion-nav-link--back:hover {
    background: rgba(102, 51, 153, 0.16);
    border-color: rgba(102, 51, 153, 0.40);
    color: #4A1F70 !important;
}
[data-app="gestion"] .gestion-nav-link--back-logo {
    height: 26px; width: 26px;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    padding: 3px;
    flex-shrink: 0;
}

/* ─── Bandeau de rôle (composant unifié _role_banner.html.twig) ─── */
/* Version de base : fond clair, lisible partout (cards gestion, etc.) */
.cp-role-banner {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px;
    margin: 12px 0 16px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: rgba(31, 37, 64, 0.85);
    font-size: 0.92rem;
    line-height: 1.45;
}
.cp-role-banner__icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: rgba(31, 37, 64, 0.62);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.cp-role-banner__body { flex: 1; min-width: 0; }
.cp-role-banner__body strong { color: var(--text, #1f2540); font-weight: 700; }

/* Variantes par rôle — accent coloré (fond + bordure + icône) */
.cp-role-banner--gestionnaire { background: rgba(102, 51, 153, 0.08); border-color: rgba(102, 51, 153, 0.22); }
.cp-role-banner--gestionnaire .cp-role-banner__icon { background: rgba(102, 51, 153, 0.12); color: #663399; }
.cp-role-banner--contributor { background: rgba(255, 153, 0, 0.08); border-color: rgba(255, 153, 0, 0.25); }
.cp-role-banner--contributor .cp-role-banner__icon { background: rgba(255, 153, 0, 0.15); color: #B86600; }
.cp-role-banner--membre { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.08); }
.cp-role-banner--membre .cp-role-banner__icon { background: rgba(0, 0, 0, 0.06); color: rgba(31, 37, 64, 0.55); }

/* Surcharge "inside hero" — quand le bandeau vit dans un cp-hero gradient,
   on passe en version translucide blanche pour rester lisible sur fond coloré */
.cp-hero .cp-role-banner {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.30);
    color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
}
.cp-hero .cp-role-banner__icon { background: rgba(255, 255, 255, 0.22); color: #fff; }
.cp-hero .cp-role-banner__body strong { color: #fff; }
.cp-hero .cp-role-banner--gestionnaire { background: rgba(100, 127, 84, 0.22); border-color: rgba(180, 220, 180, 0.55); }
.cp-hero .cp-role-banner--gestionnaire .cp-role-banner__icon { background: rgba(180, 220, 180, 0.40); color: #fff; }
.cp-hero .cp-role-banner--contributor { background: rgba(255, 153, 0, 0.18); border-color: rgba(255, 196, 92, 0.55); }
.cp-hero .cp-role-banner--contributor .cp-role-banner__icon { background: rgba(255, 196, 92, 0.40); color: #fff; }
.cp-hero .cp-role-banner--membre { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.30); }
.cp-hero .cp-role-banner--membre .cp-role-banner__icon { background: rgba(255, 255, 255, 0.20); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   Pastille de rôle unifiée (.np-role-chip) — utilisée partout où on affiche
   un rôle utilisateur. Inclus via _role_chip.html.twig.
   ═══════════════════════════════════════════════════════════════════════════ */
.np-role-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1;
    border: 1px solid transparent;
    vertical-align: middle;
}
.np-role-chip i { font-size: 0.9em; flex-shrink: 0; }
.np-role-chip--sm { font-size: 0.72rem; padding: 3px 10px; }
.np-role-chip--md { font-size: 0.82rem; padding: 5px 12px; }
.np-role-chip--lg { font-size: 0.92rem; padding: 7px 14px; }

/* Variantes par rôle — palette cohérente avec les bandeaux et autres composants */
.np-role-chip--gestionnaire {
    background: rgba(102, 51, 153, 0.10);
    color: #663399;
    border-color: rgba(102, 51, 153, 0.25);
}
.np-role-chip--contributor {
    background: rgba(255, 153, 0, 0.10);
    color: #B86600;
    border-color: rgba(255, 153, 0, 0.30);
}
.np-role-chip--membre {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(31, 37, 64, 0.65);
    border-color: rgba(0, 0, 0, 0.10);
}
.np-role-chip--pro {
    background: linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 130%);
    color: #fff;
    border-color: transparent;
}
.np-role-chip--admin {
    background: linear-gradient(135deg, #C9A227 0%, #E5BC4A 100%);
    color: #fff;
    border-color: transparent;
}
.np-role-chip--paroisse {
    background: rgba(58, 79, 122, 0.10);
    color: #3A4F7A;
    border-color: rgba(58, 79, 122, 0.25);
}
.np-role-chip--musicien {
    background: rgba(102, 51, 153, 0.08);
    color: #663399;
    border-color: rgba(102, 51, 153, 0.20);
}
.np-role-chip--intervenant {
    background: rgba(180, 100, 60, 0.10);
    color: #8A4F2A;
    border-color: rgba(180, 100, 60, 0.25);
}
.np-role-chip--couple {
    background: rgba(255, 153, 0, 0.08);
    color: #B86600;
    border-color: rgba(255, 153, 0, 0.22);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dropdown utilisateur enrichi (header avec nom + email + chips de rôle)
   ═══════════════════════════════════════════════════════════════════════════ */
.np-user-menu { min-width: 280px; max-width: 340px; }
.np-user-menu__header {
    padding: 12px 16px;
}
.np-user-menu__name {
    font-weight: 700;
    color: var(--text, #1f2540);
    font-size: 0.95rem;
    line-height: 1.3;
}
.np-user-menu__email {
    font-size: 0.78rem;
    color: var(--text-muted, rgba(31, 37, 64, 0.62));
    margin-top: 2px;
    word-break: break-all;
}
.np-user-menu__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Page Mes droits & accès
   ═══════════════════════════════════════════════════════════════════════════ */
.mes-droits { max-width: 880px; }

/* ── Hero ── */
.mes-droits__hero {
    display: flex; gap: 22px; align-items: center;
    padding: clamp(20px, 3vw, 28px);
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.05);
    margin-bottom: 28px;
}
@media (max-width: 575px) {
    .mes-droits__hero { flex-direction: column; align-items: flex-start; }
}
.mes-droits__hero-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    font-size: 1.8rem;
    color: rgba(31, 37, 64, 0.55);
}
.mes-droits__hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mes-droits__hero-body { flex: 1; min-width: 0; }
.mes-droits__hero-title {
    margin: 0 0 4px;
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
    font-weight: 700;
    color: var(--text, #1f2540);
    letter-spacing: -0.01em;
}
.mes-droits__hero-email {
    margin: 0 0 14px;
    color: var(--text-muted, rgba(31, 37, 64, 0.62));
    font-size: 0.92rem;
}
.mes-droits__hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Sections ── */
.mes-droits__section { margin-bottom: 28px; }
.mes-droits__section-title {
    margin: 0 0 14px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text, #1f2540);
    display: inline-flex; align-items: center;
}

/* ── Mes appartenances ── */
.mes-droits__groups { display: flex; flex-direction: column; gap: 10px; }
.mes-droits__group {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
}
.mes-droits__group-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.05);
    color: rgba(31, 37, 64, 0.62);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.mes-droits__group-body { flex: 1; min-width: 0; }
.mes-droits__group-name { font-weight: 700; color: var(--text, #1f2540); }
.mes-droits__group-meta { font-size: 0.78rem; color: var(--text-muted, rgba(31, 37, 64, 0.55)); }
.mes-droits__group-link {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.04);
    color: rgba(31, 37, 64, 0.62);
    text-decoration: none;
    transition: background var(--dur-fast, .15s) var(--ease, ease), color var(--dur-fast, .15s) var(--ease, ease);
}
.mes-droits__group-link:hover { background: rgba(0, 0, 0, 0.10); color: var(--text, #1f2540); }
.mes-droits__empty { color: var(--text-muted, rgba(31, 37, 64, 0.62)); padding: 14px 16px; background: rgba(0, 0, 0, 0.02); border-radius: 12px; }
.mes-droits__join-link {
    display: inline-block; margin-top: 12px;
    font-size: 0.9rem; font-weight: 600;
    color: var(--brand, #663399);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.mes-droits__join-link:hover { border-bottom-color: var(--brand, #663399); }

/* ── Listes d'abilities (peut faire / ne peut pas faire) ── */
.mes-droits__abilities {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.mes-droits__abilities li {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 0.93rem;
    line-height: 1.5;
}
.mes-droits__abilities li i { flex-shrink: 0; font-size: 1rem; margin-top: 2px; }
.mes-droits__abilities li strong { color: var(--text, #1f2540); }

.mes-droits__abilities--granted li {
    background: rgba(40, 167, 69, 0.06);
    border: 1px solid rgba(40, 167, 69, 0.18);
    color: rgba(31, 37, 64, 0.85);
}
.mes-droits__abilities--granted li i { color: #28A745; }

.mes-droits__abilities--blocked li {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: rgba(31, 37, 64, 0.65);
    flex-wrap: wrap;
}
.mes-droits__abilities--blocked li i { color: rgba(31, 37, 64, 0.45); }
.mes-droits__abilities--blocked li strong { color: rgba(31, 37, 64, 0.78); }
.mes-droits__blocked-hint {
    flex-basis: 100%;
    font-size: 0.82rem;
    color: var(--text-muted, rgba(31, 37, 64, 0.62));
    padding-left: 26px;
    font-style: italic;
}
.mes-droits__blocked-hint a { color: var(--brand, #663399); font-weight: 600; }

/* ── CTAs Comment évoluer ── */
.mes-droits__cta-grid { display: flex; flex-direction: column; gap: 12px; }
.mes-droits__cta {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: transform var(--dur-fast, .2s) var(--ease, ease),
                box-shadow var(--dur-fast, .2s) var(--ease, ease),
                border-color var(--dur-fast, .2s) var(--ease, ease);
}
.mes-droits__cta:not(.mes-droits__cta--info):hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.16);
    color: inherit;
}
.mes-droits__cta-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 130%);
    color: #fff;
    overflow: hidden;
}
.mes-droits__cta-icon img { width: 32px; height: 32px; object-fit: contain; background: #fff; border-radius: 50%; padding: 4px; }
.mes-droits__cta-icon--neutral { background: rgba(0, 0, 0, 0.05); color: var(--text, #1f2540); font-size: 1.2rem; }
.mes-droits__cta-body { flex: 1; min-width: 0; }
.mes-droits__cta-body strong { display: block; color: var(--text, #1f2540); font-size: 1rem; }
.mes-droits__cta-body span { display: block; font-size: 0.85rem; color: var(--text-muted, rgba(31, 37, 64, 0.62)); margin-top: 2px; }
.mes-droits__cta-arrow { color: rgba(31, 37, 64, 0.35); flex-shrink: 0; font-size: 1.1rem; }
.mes-droits__cta--pro { border-color: rgba(58, 79, 122, 0.25); }
.mes-droits__cta--pro:hover { border-color: rgba(58, 79, 122, 0.50); }
.mes-droits__cta--info { background: rgba(0, 0, 0, 0.02); }

/* ═══════════════════════════════════════════════════════════════════════════
   Composant unifié .np-locked-action — boutons/badges pour actions verrouillées
   Utilisé via _locked_action.html.twig
   ═══════════════════════════════════════════════════════════════════════════ */
.np-locked-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 999px;
    color: #3A4F7A;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    transition: background var(--dur-fast, .15s) var(--ease, ease),
                color var(--dur-fast, .15s) var(--ease, ease),
                border-color var(--dur-fast, .15s) var(--ease, ease),
                transform var(--dur-fast, .15s) var(--ease, ease);
}
.np-locked-action:hover {
    background: linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 130%);
    border-color: transparent;
    color: #fff;
    transform: translateY(-1px);
}
.np-locked-action--disabled { cursor: default; }
.np-locked-action--disabled:hover {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(0, 0, 0, 0.10);
    color: #3A4F7A;
    transform: none;
}
.np-locked-action--sm { font-size: 0.78rem; padding: 6px 10px 6px 12px; }
.np-locked-action--md { font-size: 0.88rem; padding: 8px 12px 8px 14px; }
.np-locked-action--lg { font-size: 0.95rem; padding: 10px 14px 10px 16px; }
.np-locked-action i { font-size: 0.95em; flex-shrink: 0; }
.np-locked-action__tag {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 130%);
    color: #fff;
    padding: 2px 7px;
    border-radius: 999px;
    box-shadow: 0 2px 4px rgba(58, 79, 122, 0.20);
}
.np-locked-action:hover .np-locked-action__tag {
    background: #fff;
    color: #3A4F7A;
    box-shadow: none;
}

/* Variantes par type de verrouillage */
.np-locked-action--contributor { color: #B86600; }
.np-locked-action--contributor .np-locked-action__tag {
    background: linear-gradient(135deg, #FF9900 0%, #B86600 100%);
}
.np-locked-action--contributor:hover {
    background: linear-gradient(135deg, #FF9900 0%, #B86600 100%);
}
.np-locked-action--contributor:hover .np-locked-action__tag {
    background: #fff;
    color: #B86600;
}
.np-locked-action--gestionnaire { color: #663399; }
.np-locked-action--gestionnaire .np-locked-action__tag {
    background: linear-gradient(135deg, #663399 0%, #4A1F70 100%);
}
.np-locked-action--gestionnaire:hover {
    background: linear-gradient(135deg, #663399 0%, #4A1F70 100%);
}
.np-locked-action--gestionnaire:hover .np-locked-action__tag {
    background: #fff;
    color: #663399;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Centre d'aide
   ═══════════════════════════════════════════════════════════════════════════ */
.aide-page { max-width: 980px; }
.aide-page__hero {
    text-align: center;
    padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 32px);
    background: linear-gradient(135deg, rgba(102, 51, 153, 0.06) 0%, rgba(255, 153, 0, 0.06) 100%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 22px;
    margin-bottom: 32px;
}
.aide-page__eyebrow {
    display: inline-flex; align-items: center;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(31, 37, 64, 0.55);
    background: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.aide-page__title {
    margin: 0 0 12px;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--text, #1f2540);
    letter-spacing: -0.01em;
}
.aide-page__lead {
    margin: 0 auto 18px;
    max-width: 640px;
    color: rgba(31, 37, 64, 0.72);
    font-size: 1rem;
    line-height: 1.6;
}
.aide-page__cta {
    display: inline-flex; align-items: center;
    color: var(--brand, #663399);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}
.aide-page__cta:hover { border-bottom-color: var(--brand, #663399); }

/* TOC */
.aide-page__toc {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-bottom: 36px;
    padding: 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
}
.aide-page__toc-item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(31, 37, 64, 0.78);
    text-decoration: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.04);
    transition: background var(--dur-fast, .15s) var(--ease, ease), color var(--dur-fast, .15s) var(--ease, ease);
}
.aide-page__toc-item:hover { background: rgba(102, 51, 153, 0.10); color: var(--brand, #663399); }
.aide-page__toc-item i { font-size: 0.95em; }

/* Sections */
.aide-page__section { margin-bottom: 48px; scroll-margin-top: 80px; }
.aide-page__section-title {
    margin: 0 0 8px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text, #1f2540);
    letter-spacing: -0.01em;
}
.aide-page__section-lead {
    margin: 0 0 20px;
    color: rgba(31, 37, 64, 0.65);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* Cards (rôles, personas, prix) */
.aide-page__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 768px) { .aide-page__cards { grid-template-columns: repeat(3, 1fr); } }
.aide-page__cards--prices { grid-template-columns: 1fr; }
@media (min-width: 768px) { .aide-page__cards--prices { grid-template-columns: repeat(3, 1fr); } }

.aide-page__card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 18px 20px;
    transition: border-color var(--dur-fast, .15s) var(--ease, ease), box-shadow var(--dur-fast, .15s) var(--ease, ease);
}
.aide-page__card:hover {
    border-color: rgba(0, 0, 0, 0.16);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}
.aide-page__card--accent {
    background: linear-gradient(135deg, rgba(58, 79, 122, 0.06) 0%, rgba(100, 127, 84, 0.06) 100%);
    border-color: rgba(58, 79, 122, 0.18);
}
.aide-page__card-head { margin-bottom: 10px; }
.aide-page__card-body {
    margin: 0;
    color: rgba(31, 37, 64, 0.78);
    font-size: 0.92rem;
    line-height: 1.55;
}
.aide-page__price {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text, #1f2540);
    letter-spacing: -0.02em;
}

/* FAQ Accordion — surcharge Bootstrap pour matcher la charte */
.aide-page__accordion .accordion-item {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px !important;
    margin-bottom: 10px;
    overflow: hidden;
}
.aide-page__accordion .accordion-button {
    font-weight: 600;
    color: var(--text, #1f2540);
    padding: 16px 20px;
    background: #fff;
}
.aide-page__accordion .accordion-button:not(.collapsed) {
    background: rgba(102, 51, 153, 0.05);
    color: var(--brand, #663399);
    box-shadow: none;
}
.aide-page__accordion .accordion-button:focus { box-shadow: none; }
.aide-page__accordion .accordion-body {
    color: rgba(31, 37, 64, 0.78);
    font-size: 0.93rem;
    line-height: 1.6;
    padding: 4px 20px 20px;
}

/* Tutos / raccourcis */
.aide-page__tutos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 768px) { .aide-page__tutos { grid-template-columns: repeat(2, 1fr); } }
.aide-page__tuto {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform var(--dur-fast, .15s) var(--ease, ease),
                box-shadow var(--dur-fast, .15s) var(--ease, ease),
                border-color var(--dur-fast, .15s) var(--ease, ease);
}
.aide-page__tuto:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    border-color: rgba(102, 51, 153, 0.25);
    color: inherit;
}
.aide-page__tuto i {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: rgba(102, 51, 153, 0.08);
    color: var(--brand, #663399);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.aide-page__tuto strong {
    display: block;
    color: var(--text, #1f2540);
    font-size: 0.95rem;
}
.aide-page__tuto span {
    display: block;
    font-size: 0.82rem;
    color: rgba(31, 37, 64, 0.62);
    margin-top: 2px;
}
/* Alias historique : si l'ancienne classe est encore présente quelque part,
   on lui applique le même style que .nav-link--pro-cta. */
[data-app="mariage"] .nav-link.nav-link--pro-discover {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background:
        radial-gradient(50% 90% at 100% 0%, rgba(100, 127, 84, 0.35) 0%, transparent 60%),
        linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 135%);
    color: #fff !important;
    border-radius: 999px;
    padding: 0.4rem 0.95rem 0.4rem 0.55rem;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 4px 12px rgba(58, 79, 122, 0.32);
}
[data-app="mariage"] .nav-link.nav-link--pro-discover:hover,
[data-app="mariage"] .nav-link.nav-link--pro-discover:focus {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(58, 79, 122, 0.42);
    filter: brightness(1.06);
}

/* ─── Bandeau pro détaillé (abonnés / paroisse) ───────────────────
   Charte gestion (bleu marine / vert) pour signaler la bascule vers
   l'espace pro, même si on est dans mariage. */
[data-app="mariage"] .np-pro-nudge--detailed {
    background: linear-gradient(135deg, rgba(58, 79, 122, 0.08) 0%, rgba(100, 127, 84, 0.10) 100%);
    border: 1px solid rgba(58, 79, 122, 0.22);
    border-radius: var(--radius-lg, 14px);
    padding: 16px 20px;
    color: #1f2540;
}
[data-app="mariage"] .np-pro-nudge--detailed .np-pro-nudge__head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
[data-app="mariage"] .np-pro-nudge__brand {
    width: 48px; height: 48px;
    border-radius: 12px;
    background:
        radial-gradient(50% 90% at 100% 0%, rgba(100, 127, 84, 0.5) 0%, transparent 60%),
        linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 135%);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(58, 79, 122, 0.32);
}
[data-app="mariage"] .np-pro-nudge__logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
[data-app="mariage"] .np-pro-nudge--detailed .np-pro-nudge__title {
    display: block;
    color: #3A4F7A;
    font-weight: 700;
    font-size: 1rem;
}
[data-app="mariage"] .np-pro-nudge--detailed .np-pro-nudge__text {
    display: block;
    color: rgba(31, 37, 64, 0.7);
    font-size: 0.88rem;
}
[data-app="mariage"] .np-pro-nudge--detailed .np-pro-nudge__cta {
    background: linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 135%);
    border: 1px solid #4C679D;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform 0.2s ease, filter 0.2s ease;
}
[data-app="mariage"] .np-pro-nudge--detailed .np-pro-nudge__cta:hover,
[data-app="mariage"] .np-pro-nudge--detailed .np-pro-nudge__cta:focus {
    filter: brightness(1.1);
    transform: translateY(-1px);
    color: #fff;
}
[data-app="mariage"] .np-pro-nudge__features {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 22px;
}
@media (max-width: 767px) {
    [data-app="mariage"] .np-pro-nudge__features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
    [data-app="mariage"] .np-pro-nudge__features { grid-template-columns: 1fr; }
}
[data-app="mariage"] .np-pro-nudge__features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    color: rgba(31, 37, 64, 0.82);
    padding: 4px 0;
    min-width: 0;
}
[data-app="mariage"] .np-pro-nudge__features li i {
    color: #3A4F7A;
    flex-shrink: 0;
}

/* Adieu : déclinaison via tokens */
[data-app="adieu"] .np-pro-nudge--detailed {
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 7%, transparent) 0%, color-mix(in srgb, var(--secondary) 7%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
    border-radius: var(--radius-lg, 14px);
    padding: 16px 20px;
    color: var(--text);
}
[data-app="adieu"] .np-pro-nudge--detailed .np-pro-nudge__head {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
[data-app="adieu"] .np-pro-nudge__icon--lg {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand), var(--secondary));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
[data-app="adieu"] .np-pro-nudge--detailed .np-pro-nudge__title { display: block; color: var(--brand); font-weight: 700; font-size: 1rem; }
[data-app="adieu"] .np-pro-nudge--detailed .np-pro-nudge__text { display: block; color: var(--text-muted); font-size: 0.88rem; }
[data-app="adieu"] .np-pro-nudge--detailed .np-pro-nudge__cta { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
[data-app="adieu"] .np-pro-nudge--detailed .np-pro-nudge__cta:hover { background: var(--secondary); border-color: var(--secondary); }
[data-app="adieu"] .np-pro-nudge__features {
    list-style: none; margin: 12px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 22px;
}
[data-app="adieu"] .np-pro-nudge__features li {
    display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted);
}
[data-app="adieu"] .np-pro-nudge__features li i { color: var(--brand); flex-shrink: 0; }
@media (max-width: 767px) {
    [data-app="adieu"] .np-pro-nudge__features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
    [data-app="adieu"] .np-pro-nudge__features { grid-template-columns: 1fr; }
}

/* ── Bouton fermer (partagé entre mariage / adieu / gestion) ── */
.np-pro-nudge--detailed { position: relative; }
.np-pro-nudge__close {
    position: absolute;
    top: 10px; right: 10px;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.04);
    color: rgba(31, 37, 64, 0.55);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background var(--dur-fast, .15s) var(--ease, ease),
                color var(--dur-fast, .15s) var(--ease, ease),
                transform var(--dur-fast, .15s) var(--ease, ease);
    z-index: 2;
}
.np-pro-nudge__close:hover,
.np-pro-nudge__close:focus-visible {
    background: rgba(0, 0, 0, 0.10);
    color: rgba(31, 37, 64, 0.85);
    transform: scale(1.05);
    outline: none;
}
/* Préserver la place du bouton dans la zone head */
[data-app="mariage"] .np-pro-nudge--detailed .np-pro-nudge__head,
[data-app="adieu"] .np-pro-nudge--detailed .np-pro-nudge__head {
    padding-right: 40px;
}

/* ════════════════════════════════════════════════════════════════
   Page produit Celebration Pro (.cpro-*) — landing pour les non abonnés.
   Charte GESTION (bleu marine #3A4F7A → bleu clair #4C679D → vert #647F54)
   pour signaler visuellement la bascule vers l'espace pro depuis mariage.
   ════════════════════════════════════════════════════════════════ */
[data-app="mariage"] .cpro { max-width: 1120px; }

/* Brand header — logo Celebration Pro avec texte, centré au-dessus du hero */
[data-app="mariage"] .cpro-brand {
    text-align: center;
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}
[data-app="mariage"] .cpro-brand__logo {
    height: clamp(48px, 6vw, 64px);
    width: auto;
}

/* Hero — palette gestion */
[data-app="mariage"] .cpro-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: clamp(28px, 5vw, 44px);
    border-radius: 24px;
    background:
        radial-gradient(60% 110% at 100% 100%, rgba(100, 127, 84, 0.55) 0%, transparent 60%),
        radial-gradient(50% 90% at 105% 0%, rgba(100, 127, 84, 0.30) 0%, transparent 55%),
        linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 130%);
    color: #fff;
    box-shadow: 0 14px 36px rgba(58, 79, 122, 0.32);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 992px) {
    [data-app="mariage"] .cpro-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 36px; }
}
[data-app="mariage"] .cpro-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 14px;
}
[data-app="mariage"] .cpro-hero__title,
[data-app="mariage"] .np-app-body .cpro-hero__title {
    margin: 0 0 14px;
    color: #fff;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.015em;
}
[data-app="mariage"] .cpro-hero__lead {
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.05rem;
    line-height: 1.55;
    max-width: 56ch;
}
[data-app="mariage"] .cpro-hero__apps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 20px;
}
[data-app="mariage"] .cpro-hero__apps-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}
[data-app="mariage"] .cpro-hero__app {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
}
[data-app="mariage"] .cpro-hero__app-logo {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    padding: 3px;
    object-fit: contain;
    flex-shrink: 0;
}

[data-app="mariage"] .cpro-hero__price {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(6px);
    margin-bottom: 22px;
    flex-wrap: wrap;
}
[data-app="mariage"] .cpro-hero__price-amount { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
[data-app="mariage"] .cpro-hero__price-unit { font-size: 1rem; font-weight: 600; opacity: 0.9; }
[data-app="mariage"] .cpro-hero__price-note {
    flex-basis: 100%;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
}
[data-app="mariage"] .cpro-hero__actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}
/* CTA primaire — pastille blanche qui devient bleu marine au hover (charte gestion) */
[data-app="mariage"] .cpro-cta-primary {
    background: #fff;
    border: 1px solid #fff;
    color: #3A4F7A;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    transition: transform 0.25s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
[data-app="mariage"] .cpro-cta-primary:hover,
[data-app="mariage"] .cpro-cta-primary:focus {
    background: #3A4F7A;
    border-color: #3A4F7A;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(58, 79, 122, 0.45);
}
[data-app="mariage"] .cpro-cta-primary--lg { padding: 14px 32px; font-size: 1.05rem; }
[data-app="mariage"] .cpro-hero__secondary {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 2px;
}
[data-app="mariage"] .cpro-hero__secondary:hover { color: #fff; border-color: #fff; }

/* Hero visual : un grand cadre prêt à recevoir le screenshot du dashboard pro */
[data-app="mariage"] .cpro-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}

/* Screenshot placeholder — cadre stylé avec gradient + texte de description.
   Sera remplacé par <img> quand les visuels seront fournis. */
[data-app="mariage"] .cpro-screenshot {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
}
[data-app="mariage"] .cpro-screenshot--hero { transform: none; }
[data-app="mariage"] .cpro-screenshot__placeholder {
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
    padding: 20px;
}
[data-app="mariage"] .cpro-screenshot__placeholder i {
    font-size: 2.4rem;
    display: block;
    margin-bottom: 8px;
    opacity: 0.75;
}
[data-app="mariage"] .cpro-screenshot__placeholder strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 2px;
}
[data-app="mariage"] .cpro-screenshot__placeholder span {
    font-size: 0.82rem;
    opacity: 0.78;
    font-style: italic;
}

/* Section générique */
[data-app="mariage"] .cpro-section { margin-bottom: clamp(2rem, 4vw, 3rem); scroll-margin-top: 80px; }
[data-app="mariage"] .cpro-section__head { text-align: center; margin-bottom: 36px; }
[data-app="mariage"] .cpro-section__overline {
    display: inline-block;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: #647F54;
    margin-bottom: 6px;
}
[data-app="mariage"] .cpro-section__title,
[data-app="mariage"] .np-app-body .cpro-section__title {
    margin: 0; font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 700; color: #3A4F7A; letter-spacing: -0.01em;
}

/* Sections alternées (zigzag) — chaque feature en pleine largeur */
[data-app="mariage"] .cpro-zigzag {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 992px) {
    [data-app="mariage"] .cpro-zigzag { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
    [data-app="mariage"] .cpro-zigzag--reverse .cpro-zigzag__content { order: 2; }
    [data-app="mariage"] .cpro-zigzag--reverse .cpro-zigzag__visual { order: 1; }
}
[data-app="mariage"] .cpro-zigzag__step {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #647F54;
    padding: 4px 12px;
    background: rgba(100, 127, 84, 0.12);
    border-radius: 999px;
    margin-bottom: 14px;
}
[data-app="mariage"] .cpro-zigzag__title,
[data-app="mariage"] .np-app-body .cpro-zigzag__title {
    margin: 0 0 14px;
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    font-weight: 700;
    color: #3A4F7A;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
[data-app="mariage"] .cpro-zigzag__text {
    margin: 0 0 18px;
    color: rgba(31, 37, 64, 0.78);
    line-height: 1.65;
    font-size: 1rem;
    max-width: 52ch;
}
[data-app="mariage"] .cpro-zigzag__bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
[data-app="mariage"] .cpro-zigzag__bullets li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    color: rgba(31, 37, 64, 0.82);
}
[data-app="mariage"] .cpro-zigzag__bullets li i {
    color: #647F54;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Visual zigzag — screenshot placeholder en charte claire */
[data-app="mariage"] .cpro-zigzag__visual { position: relative; }
[data-app="mariage"] .cpro-zigzag .cpro-screenshot {
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, rgba(58, 79, 122, 0.08) 0%, rgba(100, 127, 84, 0.10) 100%);
    border: 1px solid rgba(58, 79, 122, 0.18);
    box-shadow: 0 18px 36px rgba(58, 79, 122, 0.14);
    backdrop-filter: none;
}
[data-app="mariage"] .cpro-zigzag .cpro-screenshot__placeholder { color: rgba(31, 37, 64, 0.55); }

/* Variante --mockup : l'image contient déjà un mockup MacBook (PNG transparent),
   on retire le cadre/shadow et on laisse respirer. */
[data-app="mariage"] .cpro-screenshot--mockup,
[data-app="mariage"] .cpro-zigzag .cpro-screenshot--mockup {
    aspect-ratio: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    overflow: visible;
    display: block;
    padding: 0;
}
[data-app="mariage"] .cpro-screenshot--mockup img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 16px 24px rgba(58, 79, 122, 0.18));
}
[data-app="mariage"] .cpro-screenshot--hero.cpro-screenshot--mockup { transform: none; }

/* Carrousel Bootstrap dans une feature — captions + contrôles charte gestion */
[data-app="mariage"] .cpro-screenshot.carousel .carousel-item img { width: 100%; height: auto; }
[data-app="mariage"] .cpro-screenshot__caption {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    background: rgba(58, 79, 122, 0.92);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 6px 14px;
    border-radius: 999px;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 12px rgba(58, 79, 122, 0.24);
}
[data-app="mariage"] .cpro-screenshot.carousel .carousel-control-prev,
[data-app="mariage"] .cpro-screenshot.carousel .carousel-control-next {
    width: 9%;
    opacity: 0;
    transition: opacity var(--dur, 0.2s) var(--ease, ease);
}
[data-app="mariage"] .cpro-screenshot.carousel:hover .carousel-control-prev,
[data-app="mariage"] .cpro-screenshot.carousel:hover .carousel-control-next,
[data-app="mariage"] .cpro-screenshot.carousel:focus-within .carousel-control-prev,
[data-app="mariage"] .cpro-screenshot.carousel:focus-within .carousel-control-next {
    opacity: 1;
}
[data-app="mariage"] .cpro-screenshot.carousel .carousel-control-prev-icon,
[data-app="mariage"] .cpro-screenshot.carousel .carousel-control-next-icon {
    background-color: rgba(58, 79, 122, 0.85);
    border-radius: 50%;
    padding: 18px;
    background-size: 50% 50%;
}
[data-app="mariage"] .cpro-screenshot.carousel .carousel-indicators {
    position: relative;
    margin: 18px 0 0;
    bottom: auto;
    gap: 8px;
}
[data-app="mariage"] .cpro-screenshot.carousel .carousel-indicators button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(58, 79, 122, 0.28);
    border: 0;
    margin: 0;
    transition: background var(--dur, 0.2s) var(--ease, ease), transform var(--dur, 0.2s) var(--ease, ease);
}
[data-app="mariage"] .cpro-screenshot.carousel .carousel-indicators button.active {
    background: #647F54;
    transform: scale(1.25);
}

/* Réassurance — charte gestion */
[data-app="mariage"] .cpro-reassure {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px;
    background: linear-gradient(135deg, rgba(58, 79, 122, 0.06) 0%, rgba(100, 127, 84, 0.08) 100%);
    border: 1px solid rgba(58, 79, 122, 0.18);
    border-radius: 18px;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 768px) { [data-app="mariage"] .cpro-reassure { grid-template-columns: repeat(3, 1fr); } }
[data-app="mariage"] .cpro-reassure__item {
    display: flex; align-items: flex-start; gap: 12px;
}
[data-app="mariage"] .cpro-reassure__item i {
    flex-shrink: 0; width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 130%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}
[data-app="mariage"] .cpro-reassure__item strong { display: block; color: #1f2540; font-weight: 700; margin-bottom: 2px; }
[data-app="mariage"] .cpro-reassure__item span { font-size: 0.88rem; color: rgba(31, 37, 64, 0.7); }

/* CTA final — palette gestion */
[data-app="mariage"] .cpro-final {
    text-align: center;
    padding: clamp(32px, 5vw, 48px) clamp(20px, 4vw, 40px);
    border-radius: 24px;
    background:
        radial-gradient(60% 110% at 100% 100%, rgba(100, 127, 84, 0.55) 0%, transparent 60%),
        radial-gradient(50% 90% at 0% 0%, rgba(100, 127, 84, 0.30) 0%, transparent 55%),
        linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 130%);
    color: #ffffff;
    box-shadow: 0 14px 36px rgba(58, 79, 122, 0.32);
}
[data-app="mariage"] .cpro-final__title,
[data-app="mariage"] .np-app-body .cpro-final__title {
    margin: 0 0 12px; font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 700; color: #fff;
}
[data-app="mariage"] .cpro-final__text {
    margin: 0 auto 24px; max-width: 54ch; color: rgba(255, 255, 255, 0.92); line-height: 1.55;
}
[data-app="mariage"] .cpro-final__hint {
    margin: 14px 0 0; color: rgba(255, 255, 255, 0.82); font-size: 0.88rem; font-style: italic;
}

/* ─── Timeline d'étapes (panneau visuel mariage) ─────────────────
   Badges ronds numérotés reliés par une fine ligne verticale,
   matérialisant l'ordre chronologique du parcours. */
[data-app="mariage"] .cp-login__steps {
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
    counter-reset: step;
}
[data-app="mariage"] .cp-login__step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 18px;
}
[data-app="mariage"] .cp-login__step:last-child {
    padding-bottom: 0;
}
/* Ligne de connexion : part du bas du badge, descend jusqu'au prochain. */
[data-app="mariage"] .cp-login__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 36px;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.34);
}
[data-app="mariage"] .cp-login__step__num {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.36);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    position: relative;
    z-index: 1;
}
[data-app="mariage"] .cp-login__step__body {
    padding-top: 6px;
    color: #ffffff;
}
[data-app="mariage"] .cp-login__step__title {
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
}
[data-app="mariage"] .cp-login__step__desc {
    margin: 3px 0 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.82);
}

/* ─── Panneau droit : grille 1fr / auto / 1fr ─────────────────────
   Le formulaire (row 2 auto) est encadré par deux pistes 1fr de hauteur
   égale → form vertical-center de la page. Logo dans la piste du haut,
   lien pros pinned en bas via position absolute. */
[data-app="mariage"] .cp-login__panel--mariage {
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    align-items: stretch;
    padding: 32px 32px 60px;
    position: relative;
}
[data-app="mariage"] .cp-login__logo-zone {
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    min-height: 0;
}
[data-app="mariage"] .cp-login__logo-zone .cp-login__logo {
    max-width: 460px;
    width: 100%;
    height: auto;
    margin: 0;
}
[data-app="mariage"] .cp-login__panel--mariage .cp-login__form-wrap {
    grid-row: 2;
    margin: 0 auto;
}
[data-app="mariage"] .cp-login__pros {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    margin: 0;
    padding: 0 24px;
    text-align: center;
    font-size: 0.92rem;
    color: var(--text-muted, #6b7280);
}
[data-app="mariage"] .cp-login__pros a {
    color: #663399;
    font-weight: 600;
    text-decoration: none;
}
[data-app="mariage"] .cp-login__pros a:hover,
[data-app="mariage"] .cp-login__pros a:focus {
    color: #FF9900;
    text-decoration: underline;
}

@media (max-width: 900px) {
    [data-app="mariage"] .cp-login__panel--mariage {
        grid-template-rows: auto auto 1fr;
        padding: 24px 24px 60px;
    }
    [data-app="mariage"] .cp-login__logo-zone {
        padding: 8px;
    }
    [data-app="mariage"] .cp-login__logo-zone .cp-login__logo {
        max-width: 280px;
    }
}

/* Force la typo SF Pro sur le split-screen (override des règles --nl-font-heading héritées) */
[data-app="mariage"] .cp-login__brand,
[data-app="mariage"] .cp-login__lead,
[data-app="mariage"] .cp-login__title,
[data-app="mariage"] .cp-login__eyebrow,
[data-app="mariage"] .cp-login__subtitle,
[data-app="mariage"] .cp-login__brands,
[data-app="mariage"] .cp-login__brands-sub,
[data-app="mariage"] .cp-reg-logo + *,
[data-app="mariage"] .reg-wizard__title,
[data-app="mariage"] .reg-step__title {
    font-family: var(--cp-font-sans);
}

/* ─── CTA mariage : #663399 fixe → #FF9900 au hover / focus / active ── */
[data-app="mariage"] .btn-primary,
[data-app="mariage"] .np-app-body .btn-primary {
    background-color: #663399;
    border-color: #663399;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(102, 51, 153, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
[data-app="mariage"] .btn-primary:hover,
[data-app="mariage"] .btn-primary:focus,
[data-app="mariage"] .btn-primary:active,
[data-app="mariage"] .btn-primary:focus-visible,
[data-app="mariage"] .np-app-body .btn-primary:hover:not(:disabled),
[data-app="mariage"] .np-app-body .btn-primary:focus:not(:disabled),
[data-app="mariage"] .np-app-body .btn-primary:active:not(:disabled) {
    background-color: #FF9900;
    border-color: #FF9900;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(255, 153, 0, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
    opacity: 1;
}
[data-app="mariage"] .btn-outline-primary,
[data-app="mariage"] .np-app-body .btn-outline-primary {
    background-color: transparent;
    color: #663399;
    border-color: #663399;
}
[data-app="mariage"] .btn-outline-primary:hover,
[data-app="mariage"] .btn-outline-primary:focus,
[data-app="mariage"] .btn-outline-primary:active,
[data-app="mariage"] .np-app-body .btn-outline-primary:hover:not(:disabled),
[data-app="mariage"] .np-app-body .btn-outline-primary:focus:not(:disabled),
[data-app="mariage"] .np-app-body .btn-outline-primary:active:not(:disabled) {
    background-color: #FF9900;
    border-color: #FF9900;
    color: #ffffff;
}
[data-app="mariage"] .btn-gradient {
    background: linear-gradient(135deg, #663399 0%, #FF9900 100%);
    color: #ffffff;
}
[data-app="mariage"] .btn-gradient:hover,
[data-app="mariage"] .btn-gradient:focus,
[data-app="mariage"] .btn-gradient:active {
    background: #FF9900;
    color: #ffffff;
    opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════
   CHARTE ADIEU (NDA) — Funérailles
   Palette : primaire #1E3A5F · secondaire #F4E4C1
   Scope   : tout l'espace adieu (data-app="adieu")
   ════════════════════════════════════════════════════════════════════ */
[data-app="adieu"] {
    --nl-primary:       #1E3A5F;
    --nl-secondary:     #F4E4C1;
    --nl-tertiary:      #F8F5F0;
    --bg:               #F5F5F5;
    --nl-gradient:      none;
    --nl-font-heading:  'Cormorant Garamond', serif;
    --nl-font-body:     'Inter', sans-serif;
}

/* ════════════════════════════════════════════════════════════════════
   ACCENTS GESTION — liens, text-primary, bg-primary, border-primary
   (scopés ici pour rester groupés avec la charte gestion ci-dessus)
   ════════════════════════════════════════════════════════════════════ */
[data-app="gestion"] .np-app-body a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.cp-list__title):not(.cp-tile):not(.cp-widget__action):not(.cp-empty__cta):not(.cp-view-filter__pill):not(.cp-stat):not(.cp-list__item):not(.cp-icon-btn) {
    color: var(--brand);
}
[data-app="gestion"] .np-app-body a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.cp-list__title):not(.cp-tile):not(.cp-widget__action):not(.cp-empty__cta):not(.cp-view-filter__pill):not(.cp-stat):not(.cp-list__item):not(.cp-icon-btn):hover {
    color: var(--brand-700);
}
[data-app="gestion"] .text-primary { color: var(--brand) !important; }
[data-app="gestion"] .text-secondary { color: var(--secondary) !important; }
[data-app="gestion"] .bg-primary { background-color: var(--brand) !important; }
[data-app="gestion"] .bg-secondary { background-color: var(--secondary) !important; }
[data-app="gestion"] .border-primary { border-color: var(--brand) !important; }

/* ─── Hero / bandeau de bienvenue ──────────────────────────────── */
/* En-tête de dashboard : titre + raccourcis d'action alignés. */
.cp-dash-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 20px;
}
.cp-dash-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.cp-hero {
    /* Tokens d'ambiance — défauts gestion (bleu/vert), surchargés par app. */
    --cp-hero-glow-1: rgba(100, 127, 84, 0.55);
    --cp-hero-glow-2: rgba(100, 127, 84, 0.30);
    --cp-hero-gradient: linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 130%);
    --cp-hero-shadow: rgba(76, 103, 157, 0.22);

    position: relative;
    border-radius: 20px;
    padding: clamp(24px, 4vw, 40px) clamp(24px, 4vw, 44px);
    margin-bottom: var(--space-6);
    background:
        radial-gradient(60% 110% at 100% 100%, var(--cp-hero-glow-1) 0%, transparent 60%),
        radial-gradient(50% 90% at 105% 0%, var(--cp-hero-glow-2) 0%, transparent 55%),
        var(--cp-hero-gradient);
    color: #fff;
    box-shadow: 0 14px 36px var(--cp-hero-shadow);
}
/* Clip uniquement le pseudo-élément (gradients d'ambiance) au rayon du hero,
   sans imposer `overflow: hidden` sur le hero — sinon les dropdowns
   ouverts dans .cp-hero__actions se trouvent rognés. */
.cp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 18% 110%, rgba(255,255,255,0.10) 0%, transparent 35%),
        radial-gradient(circle at 92% -10%, rgba(255,255,255,0.08) 0%, transparent 45%);
    pointer-events: none;
}
.cp-hero__content { position: relative; z-index: 1; max-width: 720px; }
.cp-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
    margin: 0 0 14px;
}
.cp-hero__eyebrow::before {
    content: "";
    width: 28px; height: 1px;
    background: currentColor;
    opacity: 0.6;
}
[data-app="gestion"] .cp-hero .cp-hero__title,
[data-app="gestion"] .np-app-body .cp-hero__title,
.cp-hero__title {
    font-family: var(--cp-font-sans, var(--font-sans));
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 600;
    font-variation-settings: normal;
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 10px;
    color: #fff;
}
.cp-hero__subtitle {
    font-size: 0.96rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.85);
    margin: 0;
    max-width: 58ch;
}
.cp-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
    font-size: 0.85rem;
}
.cp-hero__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    color: #fff;
    backdrop-filter: blur(4px);
}
.cp-hero__meta-item i { opacity: 0.9; font-size: 0.95em; }
.cp-hero__meta-item--warn { background: rgba(255, 191, 102, 0.18); border-color: rgba(255, 191, 102, 0.32); color: #FFE5C2; }
.cp-hero__meta-item--danger { background: rgba(255, 138, 138, 0.18); border-color: rgba(255, 138, 138, 0.32); color: #FFD4D4; }
.cp-hero__meta-item--secondary { background: rgba(180, 200, 150, 0.22); border-color: rgba(180, 200, 150, 0.38); color: #E2EAD2; }
.cp-hero__meta-item--secondary i { color: #DDE8C8; }
.cp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
    position: relative;
    z-index: 1;
}
.cp-hero__actions .btn { font-weight: 500; }

/* Variante avec actions à droite (layout grille au lieu d'empilé) */
@media (min-width: 768px) {
    .cp-hero--with-actions {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: end;
        gap: 28px;
    }
    .cp-hero--with-actions .cp-hero__actions-group {
        margin-top: 0;
        align-self: end;
        text-align: right;
    }
    .cp-hero--with-actions .cp-hero__actions {
        margin-top: 0;
        justify-content: flex-end;
    }
}

/* Petit label au-dessus des CTAs du hero */
.cp-hero__actions-group {
    position: relative;
    z-index: 1;
    margin-top: 22px;
}

/* Hero avec avatar (photo de profil) à gauche du titre */
.cp-hero__content--with-avatar {
    display: flex;
    align-items: center;
    gap: 18px;
}
.cp-hero__avatar {
    width: 76px; height: 76px;
    flex-shrink: 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    overflow: hidden;
}
.cp-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 575.98px) {
    .cp-hero__avatar { width: 56px; height: 56px; font-size: 1.5rem; border-radius: 14px; }
}
.cp-hero__actions-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cp-hero--with-actions .cp-hero__actions-label {
    justify-content: flex-end;
}
.cp-hero__actions-label::before {
    content: "";
    width: 22px; height: 1px;
    background: currentColor;
    opacity: 0.6;
    display: inline-block;
}
.cp-hero--with-actions .cp-hero__actions-label::before {
    order: 1;
}

/* Boutons hero : pensés pour fond gradient sombre */
[data-app="gestion"] .np-app-body .btn-hero-light {
    background: #fff;
    color: var(--brand-700);
    border: 1px solid transparent;
    font-weight: 600;
    padding: 0.55rem 1.15rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
[data-app="gestion"] .np-app-body .btn-hero-light:hover:not(:disabled) {
    background: #fff;
    color: var(--brand);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
[data-app="gestion"] .np-app-body .btn-hero-light i { color: var(--brand); }

[data-app="gestion"] .np-app-body .btn-hero-ghost {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(4px);
    font-weight: 500;
    padding: 0.55rem 1.15rem;
}
[data-app="gestion"] .np-app-body .btn-hero-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.65);
    transform: translateY(-1px);
}
[data-app="gestion"] .np-app-body .btn-hero-ghost i { color: #fff; }

/* Boutons hero — déclinaison mariage (même fond gradient violet/orange) */
[data-app="mariage"] .np-app-body .btn-hero-light {
    background: #fff;
    color: var(--brand-700, #4D2675);
    border: 1px solid transparent;
    font-weight: 600;
    padding: 0.55rem 1.15rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
[data-app="mariage"] .np-app-body .btn-hero-light:hover:not(:disabled) {
    background: var(--secondary, #FF9900);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 153, 0, 0.32);
}
[data-app="mariage"] .np-app-body .btn-hero-light:hover:not(:disabled) i { color: #fff; }
[data-app="mariage"] .np-app-body .btn-hero-light i { color: var(--brand); }
[data-app="mariage"] .np-app-body .btn-hero-ghost {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(4px);
    font-weight: 500;
    padding: 0.55rem 1.15rem;
}
[data-app="mariage"] .np-app-body .btn-hero-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.26);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
    transform: translateY(-1px);
}
[data-app="mariage"] .np-app-body .btn-hero-ghost i { color: #fff; }
/* État verrouillé (export non disponible en aperçu) */
[data-app="mariage"] .np-app-body .btn-hero-ghost:disabled,
[data-app="mariage"] .np-app-body .btn-hero-ghost.is-locked {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─── Stat cards (KPI) ─────────────────────────────────────────── */
.cp-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
.cp-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    position: relative;
    overflow: hidden;
    color: var(--text);
    text-decoration: none;
    display: block;
}
a.cp-stat,
[data-app="gestion"] .np-app-body a.cp-stat {
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
}
a.cp-stat:hover,
[data-app="gestion"] .np-app-body a.cp-stat:hover {
    color: var(--text);
    text-decoration: none;
}
a.cp-stat:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ring);
}
.cp-stat::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--secondary));
    opacity: 1;
    transition: opacity var(--dur) var(--ease);
}
.cp-stat:hover {
    border-color: var(--brand-100);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.cp-stat__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cp-stat__label i {
    color: var(--brand);
    font-size: 1rem;
}
.cp-stat__value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.01em;
}
.cp-stat__hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 6px 0 0;
}
.cp-stat--accent::before { opacity: 1; }
.cp-stat--accent .cp-stat__value { color: var(--brand); }
.cp-stat--success::before {
    opacity: 1;
    background: linear-gradient(90deg, var(--secondary) 0%, var(--secondary-700) 100%);
}
.cp-stat--success .cp-stat__label i { color: var(--secondary); }
.cp-stat--success .cp-stat__value { color: var(--secondary-700); }
.cp-stat--danger::before { opacity: 1; background: var(--danger); }
.cp-stat--danger .cp-stat__label i { color: var(--danger); }
.cp-stat--warning .cp-stat__label i { color: var(--warning); }
.cp-stat--warning::before { opacity: 1; background: var(--warning); }
/* Variante "money" pour les KPI financiers : accent vert plein */
.cp-stat--money::before { opacity: 1; background: var(--secondary); }
.cp-stat--money .cp-stat__label i { color: var(--secondary); }
.cp-stat--money .cp-stat__value { color: var(--secondary-700); }

/* ─── Cards modernisées dans le scope gestion ──────────────────── */
[data-app="gestion"] .np-card {
    border-radius: var(--radius-lg);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
[data-app="gestion"] .np-card:hover {
    border-color: var(--brand-100);
    box-shadow: var(--shadow-sm);
}
[data-app="gestion"] .cp-widget {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
/* Seule dans sa colonne : la carte remplit la hauteur (aligne sur le calendrier).
   Empilées (ex. Mes tâches + Ma page annuaire), chacune garde sa hauteur naturelle
   sinon les 100% cumulés débordent sous la rangée et chevauchent la grille du bas. */
[data-app="gestion"] .cp-widget:only-child {
    height: 100%;
}
/* Liseré coloré en haut, plein, signature de la couleur du widget */
[data-app="gestion"] .cp-widget::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--brand);
    opacity: 0.85;
}
[data-app="gestion"] .cp-widget--secondary::before { background: var(--secondary); }
[data-app="gestion"] .cp-widget--gradient::before {
    background: linear-gradient(90deg, var(--brand) 0%, var(--secondary) 100%);
    opacity: 1;
}
[data-app="gestion"] .cp-widget--danger::before { background: var(--danger); }
.cp-widget__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
/* Titre de widget : semibold normal case avec icône pastille. */
[data-app="gestion"] .np-app-body .cp-widget__title,
.cp-widget__title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--cp-font-sans, var(--font-sans));
    font-size: 1.05rem;
    font-weight: 600;
    font-variation-settings: normal;
    text-transform: none;
    letter-spacing: -0.005em;
    color: var(--text);
    line-height: 1.2;
}
.cp-widget__title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--brand-50);
    color: var(--brand);
    font-size: 1rem;
    flex-shrink: 0;
}
.cp-widget__title-icon--secondary {
    background: var(--secondary-50);
    color: var(--secondary);
}
.cp-widget__action {
    font-size: 0.82rem;
    color: var(--brand);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    transition: background var(--dur-fast) var(--ease);
}
.cp-widget__action:hover {
    background: var(--brand-50);
    color: var(--brand-700);
}
[data-app="gestion"] .cp-widget--secondary .cp-widget__action {
    color: var(--secondary);
}
[data-app="gestion"] .cp-widget--secondary .cp-widget__action:hover {
    background: var(--secondary-50);
    color: var(--secondary-700);
}
[data-app="gestion"] .cp-widget--secondary .cp-list__title:hover { color: var(--secondary); }
[data-app="gestion"] .cp-widget--secondary .cp-list__icon {
    background: var(--secondary-50);
    color: var(--secondary);
}
.cp-widget__actions { display: inline-flex; align-items: center; gap: 8px; }

/* ─── Liste d'items dans un widget ─────────────────────────────── */
.cp-list { list-style: none; margin: 0; padding: 0; }
/* Variante bornée : la liste défile au-delà d'une hauteur pour garder la carte
   compacte (ex. Mes tâches sur le dashboard), comme le panneau jour du calendrier. */
.cp-list--scroll {
    max-height: 16rem;
    overflow-y: auto;
    margin-right: -6px;
    padding-right: 6px;
}
.cp-list__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease);
}
.cp-list__item:last-child { border-bottom: 0; }
/* Variante cliquable : tout le row réagit au survol */
a.cp-list__item,
[data-app="gestion"] .np-app-body a.cp-list__item {
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    padding: 12px 8px;
    margin: 0 -8px;
    border-radius: 10px;
}
a.cp-list__item:hover,
[data-app="gestion"] .np-app-body a.cp-list__item:hover {
    background: var(--brand-50);
    color: var(--text);
}
[data-app="gestion"] .cp-widget--secondary a.cp-list__item:hover {
    background: var(--secondary-50);
}
a.cp-list__item:hover .cp-list__title { color: var(--brand); }
[data-app="gestion"] .cp-widget--secondary a.cp-list__item:hover .cp-list__title { color: var(--secondary); }
a.cp-list__item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ring);
}
.cp-list__date {
    flex-shrink: 0;
    width: 52px;
    text-align: center;
    padding: 6px 4px;
    border-radius: 10px;
    background: var(--brand-50);
    color: var(--brand);
    line-height: 1.1;
}
.cp-list__date strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--brand-700);
}
.cp-list__date small {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.cp-list__body { flex: 1; min-width: 0; }
.cp-list__title,
[data-app="gestion"] .np-app-body a.cp-list__title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cp-list__title:hover,
[data-app="gestion"] .np-app-body a.cp-list__title:hover {
    color: var(--brand);
}
[data-app="gestion"] .np-app-body .cp-widget--secondary a.cp-list__title:hover {
    color: var(--secondary);
}
.cp-list__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 3px;
}
.cp-list__meta i { margin-right: 3px; opacity: 0.75; }
.cp-list__icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-50);
    color: var(--brand);
}
.cp-list__icon--alt { background: var(--secondary-50); color: var(--secondary); }
.cp-list__badge {
    flex-shrink: 0;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-hover);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* ─── Empty state ──────────────────────────────────────────────── */
.cp-empty {
    text-align: center;
    padding: 28px 12px;
    color: var(--text-muted);
}
.cp-empty i {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
    color: var(--text-subtle);
}
.cp-empty p { margin: 0 0 10px; font-size: 0.9rem; }
.cp-empty__cta {
    font-size: 0.85rem;
    color: var(--brand);
    text-decoration: none;
    font-weight: 500;
}
.cp-empty__cta:hover { color: var(--brand-700); text-decoration: underline; }

/* État vide accueillant (aucune célébration) — sans carte, vrai bouton primaire */
.cp-empty-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-16) var(--space-4);
}
.cp-empty-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: var(--radius-pill);
    background: var(--brand-50);
    color: var(--brand);
    font-size: 2.1rem;
    margin-bottom: var(--space-1);
}
.cp-empty-hero__title {
    margin: 0;
    font-size: var(--fs-20);
    font-weight: 700;
    color: var(--text);
}
.cp-empty-hero__text {
    margin: 0 0 var(--space-2);
    max-width: 44ch;
    color: var(--text-muted);
    font-size: var(--fs-16);
}
.cp-empty-hero__choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-3);
    width: 100%;
    max-width: 640px;
    margin-top: var(--space-2);
    text-align: left;
}

/* Encart d'information discret (note contextuelle, ex. abonnement requis). */
.cp-info-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    width: 100%;
    max-width: 560px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--info-bg);
    border: 1px solid color-mix(in srgb, var(--info) 28%, transparent);
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.5;
    text-align: left;
}
.cp-info-note > i {
    color: var(--info);
    font-size: 1.05rem;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ─── Bloc finance KPI ─────────────────────────────────────────── */
.cp-finance-kpi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.cp-finance-kpi__cell {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--brand-50);
}
.cp-finance-kpi__cell--alt { background: var(--secondary-50); }
.cp-finance-kpi__label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0 0 4px;
}
.cp-finance-kpi__value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.cp-finance-kpi__hint {
    font-size: 0.74rem;
    color: var(--warning);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ─── Task checkbox circulaire ─────────────────────────────────── */
.cp-task-check {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: var(--surface);
    padding: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.cp-task-check:hover {
    border-color: var(--secondary);
    background: var(--secondary-50);
}
.cp-task-check i { font-size: 12px; color: transparent; }
.cp-task-check:hover i { color: var(--secondary); }

/* ─── Quick action tiles (gestion home) ────────────────────────── */
.cp-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
/* Tile de choix horizontale (modal Rejoindre / Créer) — icône + texte + chevron. */
.cp-choice-tile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.np-app-body a.cp-choice-tile:hover {
    border-color: var(--brand-100);
    color: var(--text);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.cp-choice-tile__icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--brand);
    font-size: 1.2rem;
}
.cp-choice-tile__icon--accent { background: var(--brand-50); }
.cp-choice-tile__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cp-choice-tile__body strong { color: var(--text); font-size: 0.98rem; }
.cp-choice-tile__body span { color: var(--text-muted); font-size: 0.86rem; line-height: 1.45; }
.cp-choice-tile__arrow { color: var(--text-subtle); flex-shrink: 0; transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.cp-choice-tile:hover .cp-choice-tile__arrow { color: var(--brand); transform: translateX(2px); }

.cp-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    position: relative;
    overflow: hidden;
}
.cp-tile::after {
    content: "";
    position: absolute;
    inset: auto -20% -50% auto;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--brand-50) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
    pointer-events: none;
}
.cp-tile:hover {
    border-color: var(--brand-100);
    color: var(--text);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.cp-tile:hover::after { opacity: 1; }
.cp-tile__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-50);
    color: var(--brand);
    font-size: 1.3rem;
    position: relative;
    z-index: 1;
}
.cp-tile--alt .cp-tile__icon { background: var(--secondary-50); color: var(--secondary); }
.cp-tile__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text);
    position: relative;
    z-index: 1;
}
.cp-tile__desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
    position: relative;
    z-index: 1;
}
.cp-tile__cta {
    margin-top: auto;
    padding-top: 10px;
    font-size: 0.82rem;
    color: var(--brand);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 1;
}
.cp-tile:hover .cp-tile__cta { color: var(--brand-700); }

/* ─── Boutons ───────────────────────────────────────────────────── */
[data-app="gestion"] .np-app-body .btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 1px 2px rgba(76, 103, 157, 0.22),
                inset 0 1px 0 rgba(255,255,255,0.12);
}
[data-app="gestion"] .np-app-body .btn-primary:hover:not(:disabled) {
    background: var(--brand-700);
    border-color: var(--brand-700);
    box-shadow: 0 6px 14px rgba(76, 103, 157, 0.28),
                inset 0 1px 0 rgba(255,255,255,0.12);
}
[data-app="gestion"] .np-app-body .btn-outline-primary {
    color: var(--brand);
    border-color: var(--brand);
    background: var(--surface);
}
[data-app="gestion"] .np-app-body .btn-outline-primary:hover:not(:disabled) {
    background: var(--brand);
    color: #fff;
}
[data-app="gestion"] .btn-success {
    --bs-btn-bg: var(--secondary);
    --bs-btn-border-color: var(--secondary);
    --bs-btn-hover-bg: var(--secondary-700);
    --bs-btn-hover-border-color: var(--secondary-700);
    --bs-btn-active-bg: var(--secondary-700);
    --bs-btn-active-border-color: var(--secondary-700);
}
/* Variante "secondary outline" pour CTA verts (ex : Funérailles) */
[data-app="gestion"] .np-app-body .btn-outline-secondary-gestion {
    color: var(--secondary);
    border-color: var(--secondary);
    background: var(--surface);
}
[data-app="gestion"] .np-app-body .btn-outline-secondary-gestion:hover:not(:disabled) {
    background: var(--secondary);
    color: #fff;
    border-color: var(--secondary);
}

/* ─── Navbar ajustement subtil dans gestion ─────────────────────── */
[data-app="gestion"] .navbar { border-bottom: 1px solid var(--border); }
[data-app="gestion"] .nav-link.active,
[data-app="gestion"] .nav-link:hover { color: var(--brand) !important; }
[data-app="gestion"] .dropdown-item:active,
[data-app="gestion"] .dropdown-item.active {
    background-color: var(--brand);
    color: #fff;
}

/* ─── Section title : trait coloré à gauche ────────────────────── */
[data-app="gestion"] .np-section-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ─── Page header (alternative au hero, plus sobre) ────────────── */
.cp-page-header {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 18px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}
.cp-page-header__title {
    font-family: var(--font-display, var(--cp-font-sans));
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 600;
    color: var(--text);
    margin: 4px 0 0;
    letter-spacing: -0.015em;
    line-height: 1.15;
    display: flex;
    align-items: center;
    gap: 12px;
}
.cp-page-header__icon {
    width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-50);
    color: var(--brand);
    border-radius: 10px;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.cp-page-header__eyebrow {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
}
.cp-page-header__lead {
    font-size: 0.92rem;
    color: var(--text-muted);
    margin: 6px 0 0;
    max-width: 60ch;
}
.cp-page-header__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ─── Section (titre + corps) ──────────────────────────────────── */
.cp-section { margin-bottom: 28px; scroll-margin-top: 84px; }
.cp-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.cp-section__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.005em;
}
.cp-section__title-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--brand-50);
    color: var(--brand);
    font-size: 0.72rem;
    font-weight: 600;
    margin-left: 4px;
}
.cp-section__title--danger .cp-section__title-count { background: var(--danger-bg); color: var(--danger); }
.cp-section__title--success .cp-section__title-count { background: var(--secondary-50); color: var(--secondary); }

/* ─── Pills (chips) ────────────────────────────────────────────── */
.cp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: var(--surface-hover);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
}
.cp-pill i { font-size: 0.85em; }
.cp-pill--brand { background: var(--brand-50); color: var(--brand); border-color: transparent; }
.cp-pill--secondary { background: var(--secondary-50); color: var(--secondary); border-color: transparent; }
.cp-pill--success { background: var(--success-bg); color: var(--success); border-color: transparent; }
.cp-pill--warning { background: var(--warning-bg); color: var(--warning); border-color: transparent; }
.cp-pill--danger { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.cp-pill--source { background: rgba(102, 51, 153, 0.10); color: #663399; border-color: transparent; }

/* ═══════════════════════════════════════════════════════════════════════════
   Bandeau upsell Pro pour les non-pros membres d'un collectif/paroisse
   ═══════════════════════════════════════════════════════════════════════════ */
[data-app="mariage"] .np-collectif-upsell {
    position: relative;
    display: flex; align-items: center; gap: 16px;
    padding: 14px 18px;
    background: linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 130%);
    color: #fff;
    border-radius: var(--radius-lg, 14px);
    box-shadow: 0 6px 18px rgba(58, 79, 122, 0.18);
}
[data-app="mariage"] .np-collectif-upsell__icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    color: #fff;
    backdrop-filter: blur(4px);
}
[data-app="mariage"] .np-collectif-upsell__body { flex: 1; min-width: 0; }
[data-app="mariage"] .np-collectif-upsell__title {
    display: block;
    font-size: 0.98rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}
[data-app="mariage"] .np-collectif-upsell__text {
    display: block;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}
[data-app="mariage"] .np-collectif-upsell__cta {
    display: inline-flex; align-items: center;
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff;
    color: #3A4F7A;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: transform var(--dur-fast, .2s) var(--ease, ease),
                background var(--dur-fast, .2s) var(--ease, ease);
}
[data-app="mariage"] .np-collectif-upsell__cta:hover {
    background: #FF9900;
    color: #fff;
    transform: translateY(-1px);
}
[data-app="mariage"] .np-collectif-upsell__close {
    position: absolute;
    top: 8px; right: 8px;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.7rem;
    cursor: pointer;
    transition: background var(--dur-fast, .15s) var(--ease, ease);
}
[data-app="mariage"] .np-collectif-upsell__close:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}
@media (max-width: 575px) {
    [data-app="mariage"] .np-collectif-upsell {
        flex-wrap: wrap;
        padding-top: 36px;
    }
    [data-app="mariage"] .np-collectif-upsell__cta { width: 100%; justify-content: center; }
}
[data-app="adieu"] .cp-pill--source { background: color-mix(in srgb, var(--brand, #1E3A5F) 12%, transparent); color: var(--brand, #1E3A5F); }
[data-app="gestion"] .cp-pill--source { background: color-mix(in srgb, var(--brand, #193141) 12%, transparent); color: var(--brand, #193141); }

/* ════════════════════════════════════════════════════════════════
   Harmonisation Bootstrap natif (scope gestion)
   ════════════════════════════════════════════════════════════════ */

/* ─── Cards Bootstrap standards ────────────────────────────────── */
[data-app="gestion"] .card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
[data-app="gestion"] .card:hover {
    box-shadow: var(--shadow-sm);
}
[data-app="gestion"] .card.border-danger { border-color: var(--danger) !important; }
[data-app="gestion"] .card-header {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    color: var(--text);
}
[data-app="gestion"] .card-body { color: var(--text); }

/* ─── Sections titres legacy ───────────────────────────────────── */
[data-app="gestion"] .section-title {
    font-family: var(--cp-font-sans);
    font-weight: 600;
    color: var(--text);
    font-size: 1.35rem;
    letter-spacing: -0.01em;
}
[data-app="gestion"] .section-subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* ─── Formulaires ──────────────────────────────────────────────── */
[data-app="gestion"] .form-control,
[data-app="gestion"] .form-select {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.55rem 0.85rem;
    font-size: 0.95rem;
    color: var(--text);
    background: var(--surface);
    box-shadow: none;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
[data-app="gestion"] .form-control:focus,
[data-app="gestion"] .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--ring);
}
[data-app="gestion"] .form-control::placeholder { color: var(--text-subtle); }
[data-app="gestion"] .form-label {
    font-weight: 500;
    color: var(--text);
    font-size: 0.88rem;
    margin-bottom: 6px;
}
[data-app="gestion"] .form-text {
    color: var(--text-muted);
    font-size: 0.8rem;
}
[data-app="gestion"] .form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}
[data-app="gestion"] .form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--ring);
}
[data-app="gestion"] .input-group-text {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 10px;
}

/* ─── Boutons (compléments) ────────────────────────────────────── */
[data-app="gestion"] .btn {
    border-radius: 10px;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
[data-app="gestion"] .btn:active { transform: translateY(1px); }
[data-app="gestion"] .btn-sm { border-radius: 8px; padding: 0.35rem 0.7rem; font-size: 0.825rem; }
[data-app="gestion"] .btn-lg { border-radius: 12px; padding: 0.7rem 1.4rem; font-size: 1rem; }
[data-app="gestion"] .btn-light {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
[data-app="gestion"] .btn-light:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}
[data-app="gestion"] .btn-link {
    color: var(--brand);
    text-decoration: none;
}
[data-app="gestion"] .btn-link:hover {
    color: var(--brand-700);
    text-decoration: underline;
}
[data-app="gestion"] .btn-outline-danger {
    color: var(--danger);
    border-color: var(--danger);
}
[data-app="gestion"] .btn-outline-danger:hover {
    background: var(--danger);
    color: #fff;
}

/* ─── Badges ───────────────────────────────────────────────────── */
[data-app="gestion"] .badge {
    font-weight: 500;
    padding: 0.35em 0.6em;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
}
[data-app="gestion"] .badge.text-bg-primary,
[data-app="gestion"] .badge.bg-primary { background: var(--brand) !important; color: #fff !important; }
[data-app="gestion"] .badge.text-bg-secondary,
[data-app="gestion"] .badge.bg-secondary { background: var(--secondary) !important; color: #fff !important; }
[data-app="gestion"] .badge.text-bg-light,
[data-app="gestion"] .badge.bg-light { background: var(--surface-hover) !important; color: var(--text) !important; border: 1px solid var(--border); }
[data-app="gestion"] .badge.text-bg-success { background: var(--secondary) !important; color: #fff !important; }
[data-app="gestion"] .badge.text-bg-warning { background: var(--warning-bg) !important; color: var(--warning) !important; }
[data-app="gestion"] .badge.text-bg-danger { background: var(--danger) !important; color: #fff !important; }
[data-app="gestion"] .badge.text-bg-info { background: var(--info-bg) !important; color: var(--info) !important; }

/* ─── Alerts ───────────────────────────────────────────────────── */
[data-app="gestion"] .alert {
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92rem;
}
[data-app="gestion"] .alert::before {
    font-family: "bootstrap-icons";
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}
[data-app="gestion"] .alert-success {
    background: var(--secondary-50);
    color: var(--secondary-700);
    border-color: var(--secondary-100);
}
[data-app="gestion"] .alert-success::before { content: "\f26b"; color: var(--secondary); }
[data-app="gestion"] .alert-info {
    background: var(--info-bg);
    color: var(--info);
    border-color: rgba(30, 95, 160, 0.18);
}
[data-app="gestion"] .alert-info::before { content: "\f431"; }
[data-app="gestion"] .alert-warning {
    background: var(--warning-bg);
    color: var(--warning);
    border-color: rgba(182, 121, 30, 0.22);
}
[data-app="gestion"] .alert-warning::before { content: "\f33b"; }
[data-app="gestion"] .alert-danger {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: rgba(192, 51, 74, 0.18);
}
[data-app="gestion"] .alert-danger::before { content: "\f33a"; }
[data-app="gestion"] .alert-dismissible .btn-close {
    margin-left: auto;
    padding: 6px;
}

/* ─── Tableaux ─────────────────────────────────────────────────── */
[data-app="gestion"] .table {
    --bs-table-bg: transparent;
    color: var(--text);
    border-color: var(--border);
    font-size: 0.92rem;
}
[data-app="gestion"] .table > thead {
    background: var(--surface-2);
}
[data-app="gestion"] .table > thead th {
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 14px;
}
[data-app="gestion"] .table > tbody > tr > td {
    padding: 12px 14px;
    border-color: var(--border);
    vertical-align: middle;
}
[data-app="gestion"] .table > tbody > tr:hover { background: var(--surface-hover); }
[data-app="gestion"] .table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-bg-type: var(--surface-2);
}
[data-app="gestion"] .table-responsive {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface);
}

/* ─── Pagination ───────────────────────────────────────────────── */
[data-app="gestion"] .pagination {
    --bs-pagination-color: var(--text);
    --bs-pagination-bg: var(--surface);
    --bs-pagination-border-color: var(--border);
    --bs-pagination-hover-color: var(--brand);
    --bs-pagination-hover-bg: var(--brand-50);
    --bs-pagination-hover-border-color: var(--brand-100);
    --bs-pagination-active-bg: var(--brand);
    --bs-pagination-active-border-color: var(--brand);
    --bs-pagination-focus-box-shadow: 0 0 0 3px var(--ring);
    gap: 4px;
}
[data-app="gestion"] .page-link {
    border-radius: 8px;
    margin: 0 2px;
}

/* ─── Modals — harmonisation globale (style wizard) ──────────────
   Tous les modales du site reçoivent le même traitement : coins
   arrondis, ombre profonde, header en dégradé bleu→vert avec texte
   blanc. Le wizard de création garde son header custom (réglé plus
   bas avec .cp-wizard-modal). */
[data-app="gestion"] .modal-content {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 21, 48, 0.25);
    overflow: hidden;
    /* Flex column : header/footer fixes, body scrollable — vaut pour TOUS
       les modales, même sans la classe `modal-dialog-scrollable`. */
    display: flex;
    flex-direction: column;
}
[data-app="gestion"] .modal-header {
    background: linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 135%);
    color: #fff;
    border-bottom: 0;
    padding: 16px 22px;
    flex-shrink: 0;
    min-height: 56px;
    align-items: center;
}
/* Titre de modale : même typographie que l'eyebrow du wizard de création
   (uppercase, tracking large, semi-bold) — look "pro" sobre. */
[data-app="gestion"] .modal-header .modal-title,
[data-app="gestion"] .modal-header .modal-title * {
    font-family: var(--cp-font-sans, var(--font-sans));
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff !important;
    font-variation-settings: normal;
}
/* Modales longues : corps borné + scrollable, header/footer fixes. */
[data-app="gestion"] .modal-content {
    max-height: calc(100dvh - 2rem);
}
[data-app="gestion"] .modal-body {
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
}
[data-app="gestion"] .modal-footer { flex-shrink: 0; }
/* Le dialog ne doit jamais dépasser l'écran (marges latérales mobiles). */
[data-app="gestion"] .modal-dialog {
    margin: 1rem auto;
}
@media (max-width: 575.98px) {
    [data-app="gestion"] .modal-dialog { margin: 0.5rem; }
    [data-app="gestion"] .modal-content { max-height: calc(100dvh - 1rem); }
}
[data-app="gestion"] .modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}
[data-app="gestion"] .modal-header .btn-close:hover { opacity: 1; }
/* Le header peut porter `card-header-accent` dans certains templates :
   on neutralise son background pour ne pas superposer deux dégradés. */
[data-app="gestion"] .modal-header.card-header-accent {
    background: linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 135%);
}

/* Modales partagées — harmonisation mariage / adieu (header + sélection) */
[data-app="mariage"] .modal-header.card-header-accent,
[data-app="adieu"] .modal-header.card-header-accent {
    background:
        radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--secondary) 55%, transparent) 0%, transparent 60%),
        linear-gradient(125deg, var(--brand) 0%, color-mix(in srgb, var(--secondary) 55%, var(--brand)) 60%, var(--secondary) 135%);
}
[data-app="mariage"] .modal-header.card-header-accent .modal-title,
[data-app="adieu"] .modal-header.card-header-accent .modal-title,
[data-app="mariage"] .np-app-body .modal-header.card-header-accent .modal-title,
[data-app="adieu"] .np-app-body .modal-header.card-header-accent .modal-title {
    color: #fff;
}
[data-app="mariage"] .modal-header.card-header-accent .btn-close,
[data-app="adieu"] .modal-header.card-header-accent .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
/* Ligne sélectionnée dans une liste de résultats : couleur de marque (pas le bleu Bootstrap) */
[data-app="mariage"] .list-group-item.active,
[data-app="adieu"] .list-group-item.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
[data-app="mariage"] .list-group-item.active .text-success,
[data-app="adieu"] .list-group-item.active .text-success {
    color: #fff !important;
}
[data-app="mariage"] .list-group-item-action:hover,
[data-app="adieu"] .list-group-item-action:hover {
    background: var(--surface-hover);
    color: var(--text);
}
[data-app="gestion"] .modal-body { padding: 20px 22px; }
[data-app="gestion"] .modal-footer {
    border-top: 1px solid var(--border);
    padding: 14px 22px;
    background: var(--surface-2);
}

/* ─── Dropdown menus ───────────────────────────────────────────── */
[data-app="gestion"] .dropdown-menu {
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    padding: 6px;
}
[data-app="gestion"] .dropdown-item {
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 0.9rem;
    color: var(--text);
}
[data-app="gestion"] .dropdown-item:hover {
    background: var(--brand-50);
    color: var(--brand-700);
}
[data-app="gestion"] .dropdown-item.text-danger:hover {
    background: var(--danger-bg);
    color: var(--danger);
}
[data-app="gestion"] .dropdown-divider {
    border-color: var(--border);
    margin: 4px 0;
}

/* ─── Nav tabs / pills ─────────────────────────────────────────── */
[data-app="gestion"] .nav-tabs {
    border-bottom: 1px solid var(--border);
    gap: 4px;
}
[data-app="gestion"] .nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 0;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
[data-app="gestion"] .nav-tabs .nav-link:hover {
    color: var(--brand);
    border-color: var(--brand-100);
    background: transparent;
}
[data-app="gestion"] .nav-tabs .nav-link.active {
    color: var(--brand);
    border-color: var(--brand);
    background: transparent;
    font-weight: 600;
}
[data-app="gestion"] .nav-pills .nav-link {
    border-radius: 999px;
    color: var(--text-muted);
    font-weight: 500;
    padding: 6px 14px;
}
[data-app="gestion"] .nav-pills .nav-link.active {
    background: var(--brand);
    color: #fff;
}

/* ─── List groups ──────────────────────────────────────────────── */
[data-app="gestion"] .list-group {
    border-radius: var(--radius-lg);
    overflow: hidden;
}
[data-app="gestion"] .list-group-item {
    border-color: var(--border);
    color: var(--text);
    padding: 12px 16px;
}
[data-app="gestion"] .list-group-item-action:hover {
    background: var(--surface-hover);
    color: var(--text);
}
[data-app="gestion"] .list-group-item.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* ─── Progress bars ────────────────────────────────────────────── */
[data-app="gestion"] .progress {
    background: var(--surface-hover);
    border-radius: 999px;
    height: 8px;
}
[data-app="gestion"] .progress-bar {
    background: linear-gradient(90deg, var(--brand) 0%, var(--secondary) 100%);
    border-radius: 999px;
}

/* ─── Breadcrumb ───────────────────────────────────────────────── */
[data-app="gestion"] .breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 16px;
    font-size: 0.85rem;
}
[data-app="gestion"] .breadcrumb-item { color: var(--text-muted); }
[data-app="gestion"] .breadcrumb-item a {
    color: var(--text-muted);
    text-decoration: none;
}
[data-app="gestion"] .breadcrumb-item a:hover { color: var(--brand); }
[data-app="gestion"] .breadcrumb-item.active { color: var(--text); font-weight: 500; }
[data-app="gestion"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-subtle);
    content: "›";
}

/* ─── Text utilities (sémantique cohérente) ────────────────────── */
[data-app="gestion"] .text-success { color: var(--secondary) !important; }
[data-app="gestion"] .text-danger { color: var(--danger) !important; }
[data-app="gestion"] .text-warning { color: var(--warning) !important; }
[data-app="gestion"] .text-info { color: var(--info) !important; }
[data-app="gestion"] .text-muted { color: var(--text-muted) !important; }

/* ─── Bordures sémantiques ─────────────────────────────────────── */
[data-app="gestion"] .border-danger { border-color: var(--danger) !important; }
[data-app="gestion"] .border-success { border-color: var(--secondary) !important; }
[data-app="gestion"] .border-warning { border-color: var(--warning) !important; }
[data-app="gestion"] .border-primary { border-color: var(--brand) !important; }

/* ─── View filter bar (pills horizontal) ───────────────────────── */
.cp-view-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    margin-bottom: 20px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}
.cp-view-filter__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
    white-space: nowrap;
}
[data-app="gestion"] .np-app-body a.cp-view-filter__pill {
    color: var(--text-muted);
    text-decoration: none;
}
[data-app="gestion"] .np-app-body a.cp-view-filter__pill:hover,
.cp-view-filter__pill:hover {
    background: var(--brand);
    color: #fff;
}
[data-app="gestion"] .np-app-body a.cp-view-filter__pill:hover .cp-view-filter__count,
.cp-view-filter__pill:hover .cp-view-filter__count {
    background: rgba(255,255,255,0.22);
    color: #fff;
}
[data-app="gestion"] .np-app-body a.cp-view-filter__pill.is-active,
.cp-view-filter__pill.is-active {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-700) 60%, var(--secondary) 140%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(76, 103, 157, 0.22);
}
.cp-view-filter__pill i { font-size: 0.95em; opacity: 0.9; transition: color var(--dur-fast) var(--ease); }
.cp-view-filter__pill:hover i,
.cp-view-filter__pill.is-active i { color: #fff !important; opacity: 1; }
.cp-view-filter__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--brand-50);
    color: var(--brand);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cp-view-filter__pill.is-active .cp-view-filter__count {
    background: rgba(255,255,255,0.22);
    color: #fff;
}

/* ─── Card header accent : variantes ───────────────────────────── */
[data-app="gestion"] .np-app-body .card-header-accent {
    background: var(--brand);
}
[data-app="gestion"] .np-app-body .card-header-accent--secondary {
    background: var(--secondary);
}
[data-app="gestion"] .np-app-body .card-header-accent--gradient {
    background: linear-gradient(135deg, var(--brand) 0%, var(--secondary) 130%);
}

/* ─── Table thead : sobre, couleur brand pleine ─────────────────── */
[data-app="gestion"] .np-app-body .cp-table-fancy thead,
[data-app="gestion"] .np-app-body .card .table thead,
[data-app="gestion"] .np-app-body .np-card .table thead {
    background: var(--brand-700);
}
[data-app="gestion"] .np-app-body .cp-table-fancy thead th,
[data-app="gestion"] .np-app-body .card .table thead th,
[data-app="gestion"] .np-app-body .np-card .table thead th {
    background: transparent;
    color: #fff;
    border-bottom: 0;
    font-weight: 600;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 11px 14px;
}
/* Table sous un header secondaire : thead vert profond pour cohérence */
[data-app="gestion"] .np-app-body .card-header-accent--secondary + .card-body .table thead {
    background: var(--secondary-700);
}

/* ─── Hover des lignes du tableau gestion : feedback plus net ──── */
[data-app="gestion"] .np-app-body .card .table tbody tr {
    transition: background var(--dur-fast) var(--ease);
}
[data-app="gestion"] .np-app-body .card .table tbody tr:hover {
    background: var(--brand-50);
}
[data-app="gestion"] .np-app-body .card-header-accent--secondary + .card-body .table tbody tr:hover {
    background: var(--secondary-50);
}

/* ═══════════════════════════════════════════════════════════════
   Celebration cards — listing modernisé
   ═══════════════════════════════════════════════════════════════ */

/* Section icon (pour cp-section__title) */
.cp-section-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-50);
    color: var(--brand);
    font-size: 1rem;
    flex-shrink: 0;
}
.cp-section-icon--brand { background: var(--brand-50); color: var(--brand); }
.cp-section-icon--secondary { background: var(--secondary-50); color: var(--secondary); }
.cp-section-icon--gradient {
    background: linear-gradient(135deg, var(--brand-50), var(--secondary-50));
    color: var(--brand);
}

/* Liste de célébrations */
.cp-celebration-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Carte célébration */
.cp-celebration-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 16px 20px 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
    position: relative;
    overflow: hidden;
}
.cp-celebration-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--brand) 0%, var(--secondary) 100%);
    opacity: 0.95;
}
/* Mariage : dégradé bleu → vert (touche secondary en bas) */
.cp-celebration-card--wedding::before {
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand) 55%, var(--secondary) 100%);
}
/* Funérailles : dégradé vert → bleu (miroir) */
.cp-celebration-card--funeral::before {
    background: linear-gradient(180deg, var(--secondary) 0%, var(--secondary) 55%, var(--brand) 100%);
}
.cp-celebration-card--other::before {
    background: linear-gradient(180deg, var(--brand) 0%, var(--secondary) 100%);
}
.cp-celebration-card--unpaid::before { background: var(--danger); }
.cp-celebration-card--archived {
    opacity: 0.78;
}
.cp-celebration-card--archived::before {
    background: var(--text-subtle);
}
.cp-celebration-card:hover {
    border-color: var(--brand-100);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.cp-celebration-card--funeral:hover { border-color: var(--secondary-100); }

/* Date badge à gauche */
.cp-celebration-card__date {
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--brand-50) 0%, var(--brand-100) 100%);
    color: var(--brand-700);
    padding: 10px 14px;
    border-radius: 12px;
    text-align: center;
    min-width: 78px;
    line-height: 1.1;
}
.cp-celebration-card__date strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.cp-celebration-card__date small {
    display: block;
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-top: 3px;
    font-weight: 500;
}
.cp-celebration-card--funeral .cp-celebration-card__date {
    background: linear-gradient(135deg, var(--secondary-50) 0%, var(--secondary-100) 100%);
    color: var(--secondary-700);
}
.cp-celebration-card--funeral .cp-celebration-card__date small { color: var(--secondary-700); opacity: 0.7; }
.cp-celebration-card__date--empty {
    background: var(--surface-2);
    color: var(--text-subtle);
    font-style: italic;
    font-size: 0.85rem;
}

/* Bloc principal : grille 3 cols (Personnes / Lieu / Célébrant) */
.cp-celebration-card__main {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 22px;
    min-width: 0;
    align-items: start;
}
.cp-celebration-card__field { min-width: 0; }
.cp-celebration-card__label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.cp-celebration-card__value {
    font-size: 0.92rem;
    color: var(--text);
    line-height: 1.35;
}
.cp-celebration-card__value--muted {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.85rem;
}
.cp-celebration-card__value small {
    color: var(--text-muted);
    margin-left: 4px;
    font-size: 0.78rem;
}
.cp-celebration-card__value i { color: var(--text-muted); margin-right: 4px; }

/* Personnes */
.cp-celebration-card__person {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text);
}
.cp-celebration-card__person + .cp-celebration-card__person { margin-top: 4px; }
.cp-celebration-card__person-role {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-right: 2px;
}
.cp-celebration-card__avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border);
}
.cp-celebration-card__avatar--placeholder {
    background: var(--brand-50);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

/* Bloc latéral : status + actions */
.cp-celebration-card__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
}
.cp-celebration-card__actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

/* Icon button (action) */
.cp-icon-btn {
    width: 34px; height: 34px;
    padding: 0;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
    font-size: 0.95rem;
    line-height: 1;
}
[data-app="gestion"] .np-app-body .cp-icon-btn:hover,
.cp-icon-btn:hover {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    transform: translateY(-1px);
}
/* Force l'icône (bootstrap-icons) à devenir blanche au survol — quel que soit le contexte */
[data-app="gestion"] .np-app-body .cp-icon-btn:hover i,
[data-app="gestion"] .np-app-body .cp-icon-btn:hover .bi,
.cp-icon-btn:hover i,
.cp-icon-btn:hover .bi {
    color: #fff !important;
}
.cp-icon-btn:active { transform: translateY(0); }
.cp-icon-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ring);
}
[data-app="gestion"] .np-app-body .cp-icon-btn--secondary:hover,
.cp-icon-btn--secondary:hover {
    background: var(--secondary);
    border-color: var(--secondary);
}
[data-app="gestion"] .np-app-body .cp-icon-btn--warning:hover,
.cp-icon-btn--warning:hover {
    background: var(--warning);
    border-color: var(--warning);
}
[data-app="gestion"] .np-app-body .cp-icon-btn--success:hover,
.cp-icon-btn--success:hover {
    background: var(--secondary);
    border-color: var(--secondary);
}
[data-app="gestion"] .np-app-body .cp-icon-btn--danger:hover,
.cp-icon-btn--danger:hover {
    background: var(--danger);
    border-color: var(--danger);
}
/* Bouton primaire payer : déjà rempli rouge attire le clic */
.cp-icon-btn--pay {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.cp-icon-btn--pay:hover {
    background: var(--danger);
    color: #fff;
    filter: brightness(0.92);
}

/* Form inline avec icon-btn */
.cp-icon-btn-form { display: inline; margin: 0; padding: 0; }

/* Status pill (réutilise cp-pill mais alignement) */
.cp-celebration-card__status {
    align-self: flex-end;
}

/* ════════════════════════════════════════════════════════════════
   Wizard popup multi-étapes (création de célébration)
   Design cohérent avec le hero du dashboard.
   ════════════════════════════════════════════════════════════════ */
.cp-wizard {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface);
}

/* ─── Bandeau header (style hero) ─── */
.cp-wizard__header {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    padding: 22px 28px 18px;
    background:
        radial-gradient(60% 110% at 100% 100%, rgba(100, 127, 84, 0.45) 0%, transparent 60%),
        linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 130%);
    color: #fff;
}
.cp-wizard__header-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 14px;
}
.cp-wizard__header-eyebrow::before {
    content: "";
    width: 22px; height: 1px;
    background: currentColor;
    opacity: 0.6;
}

/* ─── Progress (3 segments dans le bandeau) ─── */
.cp-wizard__progress {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
    counter-reset: step;
    position: relative;
    z-index: 1;
}
.cp-wizard__progress-step {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color var(--dur) var(--ease);
}
.cp-wizard__progress-step.is-current,
.cp-wizard__progress-step.is-done { color: #fff; }
.cp-wizard__progress-num {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cp-wizard__progress-num::before {
    content: counter(step);
    counter-increment: step;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.65);
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cp-wizard__progress-step.is-current .cp-wizard__progress-num::before {
    background: #fff;
    color: var(--brand-700);
    border-color: #fff;
}
.cp-wizard__progress-step.is-done .cp-wizard__progress-num::before {
    content: "\f26b";
    font-family: "bootstrap-icons";
    background: var(--secondary);
    color: #fff;
    border-color: var(--secondary);
    font-size: 10px;
}
.cp-wizard__progress-bar {
    height: 3px;
    width: 100%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    transition: background var(--dur) var(--ease);
}
.cp-wizard__progress-step.is-current .cp-wizard__progress-bar {
    background: #fff;
}
.cp-wizard__progress-step.is-done .cp-wizard__progress-bar {
    background: var(--secondary);
}

/* ─── Body wizard : un seul step visible à la fois ─── */
.cp-wizard__body {
    padding: 26px 28px 18px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    background: var(--surface);
}
.cp-wizard__step {
    display: none;
    animation: cp-wizard-in 280ms var(--ease-out-soft);
}
.cp-wizard__step.is-active { display: block; }
@keyframes cp-wizard-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Titre d'étape (style dashboard hero h1, taille adaptée modale) */
.cp-wizard__step-title {
    font-family: var(--cp-font-sans, var(--font-sans));
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 8px;
    letter-spacing: -0.015em;
    line-height: 1.2;
    font-variation-settings: normal;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cp-wizard__step-title-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--brand-50);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.cp-wizard__step-title-icon--secondary {
    background: var(--secondary-50);
    color: var(--secondary);
}
.cp-wizard__step-lead {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 22px;
    max-width: 62ch;
}
.cp-wizard__person-heading {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 16px 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cp-wizard__person-heading:first-of-type { margin-top: 0; }
.cp-wizard__person-heading i {
    color: var(--brand);
    font-size: 1rem;
}

/* Cartes de rôle (étape 2) */
.cp-wizard__roles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 575.98px) {
    .cp-wizard__roles { grid-template-columns: 1fr; }
}
.cp-wizard__role {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
    width: 100%;
    color: var(--text);
}
.cp-wizard__role:hover {
    border-color: var(--brand);
    background: var(--brand-50);
    transform: translateY(-1px);
    color: var(--text);
}
.cp-wizard__role-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--brand-50);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.cp-wizard__role--secondary .cp-wizard__role-icon {
    background: var(--secondary-50);
    color: var(--secondary);
}
.cp-wizard__role:hover .cp-wizard__role-icon {
    background: var(--brand);
    color: #fff;
}
.cp-wizard__role--secondary:hover {
    border-color: var(--secondary);
    background: var(--secondary-50);
}
.cp-wizard__role--secondary:hover .cp-wizard__role-icon {
    background: var(--secondary);
    color: #fff;
}
.cp-wizard__role-body { min-width: 0; flex: 1; }
.cp-wizard__role-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    display: block;
}
.cp-wizard__role-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    display: block;
    margin-top: 2px;
}

/* ─── Footer wizard : navigation ─── */
.cp-wizard__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 16px 28px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}
.cp-wizard__nav-info { color: var(--text-muted); font-size: 0.82rem; }
.cp-wizard__nav-actions { display: inline-flex; gap: 10px; align-items: center; }

/* Modal large pour le wizard */
.cp-wizard-modal .modal-dialog { max-width: 720px; }
.cp-wizard-modal .modal-content {
    overflow: hidden;
    max-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 21, 48, 0.25);
}
/* Suppression du modal-header Bootstrap standard pour éviter une bande
   blanche dupliquée — notre header customisé .cp-wizard__header le
   remplace intégralement. */
.cp-wizard-modal .modal-header { display: none; }
.cp-wizard-modal .modal-body { padding: 0; }
.cp-wizard-modal .modal-footer { display: none; }

/* Champ profile auto-rempli : pastille verte de confirmation */
[data-app="gestion"] .badge.bg-success.cp-wizard__role-badge {
    background: var(--secondary) !important;
}

/* ════════════════════════════════════════════════════════════════
   Déroulé en mode aperçu / lecture seule (.deroule--readonly)
   Avant paiement (apps Mariage / Adieu) : on affiche le vrai éditeur
   mais verrouillé. Stylé via les tokens de marque pour s'adapter à
   chaque app.
   ════════════════════════════════════════════════════════════════ */
.deroule-lockbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, var(--surface)) 0%, color-mix(in srgb, var(--secondary) 10%, var(--surface)) 100%);
    border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--border));
}
.deroule-lockbar__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand), var(--secondary));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}
.deroule-lockbar__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.deroule-lockbar__title { color: var(--brand); font-size: 0.98rem; }
.deroule-lockbar__text { color: var(--text-muted); font-size: 0.85rem; line-height: 1.45; }
.deroule-lockbar__cta {
    flex-shrink: 0;
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
    font-weight: 600;
    border-radius: 999px;
    padding: 9px 18px;
    white-space: nowrap;
    transition: background var(--dur, .25s) var(--ease, ease), transform var(--dur, .25s) var(--ease, ease);
}
.deroule-lockbar__cta:hover,
.deroule-lockbar__cta:focus {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
    transform: translateY(-1px);
}
@media (max-width: 575px) {
    .deroule-lockbar { flex-wrap: wrap; }
    .deroule-lockbar__cta { width: 100%; text-align: center; }
}

/* Masque les affordances d'édition résiduelles en lecture seule */
.deroule--readonly .library-add-btn { display: none !important; }

/* Bibliothèque en aperçu : libellés de section masqués (on plafonne à 3) */
.deroule--readonly .library-section-label { display: none; }

/* Propositions au-delà des 3 premières : floutées, grisées, non cliquables */
.deroule--readonly .library-flat-item--locked {
    opacity: 0.55;
    filter: blur(2.5px);
    pointer-events: none;
    user-select: none;
}

/* Encart commentaires verrouillés (aperçu) */
.deroule-comments-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    color: var(--text-muted);
}
.deroule-comments-locked i {
    font-size: 1.4rem;
    color: var(--brand);
}
.deroule-comments-locked p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
}

/* Compteur "+ N propositions à découvrir" */
.library-lock-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px dashed color-mix(in srgb, var(--brand) 35%, var(--border));
    background: color-mix(in srgb, var(--brand) 6%, transparent);
    color: var(--brand);
    font-size: 0.82rem;
    font-weight: 600;
}
.library-lock-hint i { font-size: 0.9rem; }

/* Bouton "cadenas" inerte sur une carte de bibliothèque verrouillée */
.cp-icon-btn--locked {
    color: var(--text-subtle, var(--text-muted));
    cursor: not-allowed;
}

/* Encart contenu verrouillé sur la fiche d'un item (paroles / texte) */
.library-locked-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 28px 16px;
}
.library-locked-content__icon {
    font-size: 2rem;
    color: var(--brand);
}
.library-locked-content__title {
    margin: 0;
    font-weight: 700;
    color: var(--text);
}
.library-locked-content__text {
    margin: 0 0 6px;
    max-width: 46ch;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Placeholder d'un moment "à choisir" non encore rempli */
.deroule--readonly .cp-choice__placeholder {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px dashed color-mix(in srgb, var(--brand) 35%, var(--border));
    background: color-mix(in srgb, var(--brand) 6%, transparent);
    color: var(--brand);
    font-size: 0.85rem;
    font-weight: 600;
}
.deroule--readonly .cp-choice__placeholder-count {
    color: var(--text-muted);
    font-weight: 400;
}

/* ════════════ Guide modal (.dg) ════════════ */
.dg {
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 21, 48, 0.28);
}
.dg__header {
    position: relative;
    padding: 28px 30px 22px;
    /* En phase avec le hero (violet → orange via les tokens de marque) */
    background:
        radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--secondary) 60%, transparent) 0%, transparent 60%),
        radial-gradient(50% 100% at 0% 100%, color-mix(in srgb, var(--brand) 55%, transparent) 0%, transparent 55%),
        linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--secondary) 55%, var(--brand)) 55%, var(--secondary) 100%);
    color: #fff;
}
.dg__header-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 8px;
}
.dg .dg__title,
.np-app-body .dg__title {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}
.dg__lead {
    margin: 0;
    max-width: 54ch;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.5;
    font-size: 0.95rem;
}
.dg__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--dur, .25s) var(--ease, ease);
}
.dg__close:hover { background: rgba(255, 255, 255, 0.32); }
.dg__body {
    padding: 24px 30px;
    background: var(--surface);
}
.dg__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    counter-reset: dg-step;
}
.dg__step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.dg__step-icon {
    position: relative;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}
.dg__step-icon::after {
    counter-increment: dg-step;
    content: counter(dg-step);
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--secondary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--surface);
}
.dg__step-body { min-width: 0; padding-top: 2px; }
.dg__step-title {
    margin: 0 0 3px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}
.dg__step-text {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}
.dg__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 30px;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
}
.dg__footer-hint {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.dg__cta {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
    font-weight: 600;
    padding: 9px 20px;
    border-radius: 999px;
    transition: background var(--dur, .25s) var(--ease, ease), transform var(--dur, .25s) var(--ease, ease);
}
.dg__cta:hover,
.dg__cta:focus {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
    transform: translateY(-1px);
}

/* ─── Validation d'un élément de déroulé (toggles + responsable) ── */
.cp-deroule-validation {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
    align-items: flex-end;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}
.cp-deroule-validation__group { min-width: 0; }
.cp-deroule-validation__group--responsible { margin-left: auto; }
.cp-deroule-validation__label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.cp-deroule-validation__group--responsible .form-control {
    min-width: 180px;
}

/* Toggles de validation : chips qui passent au vert quand cochés */
.cp-validation { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.cp-validation-toggle__input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    pointer-events: none;
}
.cp-validation-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cp-validation-toggle:hover { border-color: var(--secondary); color: var(--secondary); }
.cp-validation-toggle__icon { font-size: 0.92em; }
.cp-validation-toggle__check {
    font-size: 0.92em;
    opacity: 0;
    width: 0;
    margin-left: -6px;
    transition: opacity var(--dur-fast) var(--ease), width var(--dur-fast) var(--ease), margin var(--dur-fast) var(--ease);
}
/* État coché */
.cp-validation-toggle__input:checked + .cp-validation-toggle {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
}
.cp-validation-toggle__input:checked + .cp-validation-toggle .cp-validation-toggle__check {
    opacity: 1;
    width: auto;
    margin-left: 0;
}
.cp-validation-toggle__input:focus-visible + .cp-validation-toggle {
    box-shadow: 0 0 0 3px var(--ring);
}

/* Indice discret : icône verte pour les chants du répertoire musiciens */
.library-flat-item__icon--rep { color: var(--secondary); }

/* ─── Carte collectif (écran d'accueil) ────────────────────────── */
[data-app="gestion"] .np-app-body a.cp-collectif-card,
.cp-collectif-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text);
    position: relative;
    overflow: hidden;
    height: 100%;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cp-collectif-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--secondary));
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
}
[data-app="gestion"] .np-app-body a.cp-collectif-card:hover,
.cp-collectif-card:hover {
    border-color: var(--brand-100);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: var(--text);
}
.cp-collectif-card:hover::before { opacity: 1; }
.cp-collectif-card__avatar {
    width: 54px; height: 54px;
    border-radius: 14px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-50), var(--secondary-50));
    color: var(--brand);
    font-size: 1.5rem;
    overflow: hidden;
}
.cp-collectif-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cp-collectif-card__body { flex: 1; min-width: 0; }
.cp-collectif-card__name {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cp-collectif-card__arrow {
    color: var(--text-subtle);
    flex-shrink: 0;
    font-size: 1.1rem;
    transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cp-collectif-card:hover .cp-collectif-card__arrow {
    color: var(--brand);
    transform: translateX(3px);
}

/* ─── Modale de confirmation globale ───────────────────────────── */
.cp-confirm-modal__message {
    font-size: 0.96rem;
    line-height: 1.6;
    color: var(--text);
}

/* ─── Texte personnalisé verrouillable (déroulé) ───────────────── */
.cp-locktext__wrap { position: relative; }
/* Texte verrouillé : lecture/scroll possibles, modification impossible. */
[data-app="gestion"] .np-app-body .cp-locktext__input[readonly] {
    background: var(--surface-2);
    cursor: default;
    border-color: var(--border);
}
.cp-locktext__edit {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
}
/* Le crayon n'apparaît qu'en mode verrouillé. */
.cp-locktext:not(.is-locked) .cp-locktext__edit { display: none; }
/* En édition, on laisse de la place pour ne pas masquer le texte sous le crayon. */
.cp-locktext.is-locked .cp-locktext__input { padding-right: 42px; }

/* ─── Notes partagées / personnelles : cartes blanches ─────────── */
[data-app="gestion"] .notes-section .card,
[data-app="gestion"] .notes-section .card-header {
    background: var(--surface);
}
[data-app="gestion"] .notes-section .card-header {
    border-bottom: 1px solid var(--border);
}

/* ─── Choix d'un chant dans le déroulé (carte verrouillée) ─────── */
.cp-choice { margin-bottom: 8px; }
.cp-choice__card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px 9px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.cp-choice__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 7px;
    font-size: 0.85rem;
}
.cp-choice__badge--ok { background: var(--secondary-50); color: var(--secondary); }
.cp-choice__badge--warn { background: var(--warning-bg); color: var(--warning); }
.cp-choice__title {
    flex: 1;
    min-width: 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cp-choice__type { color: var(--text-subtle); font-size: 0.9rem; flex-shrink: 0; }
.cp-choice__editor { display: flex; gap: 8px; align-items: stretch; }
.cp-choice__editor .deroule-select { flex: 1; min-width: 0; }
/* Variante compacte de l'icon-btn pour les rangées denses du déroulé */
.cp-icon-btn--sm { width: 30px; height: 30px; border-radius: 8px; font-size: 0.85rem; }

/* ─── Liste de sélection d'étape (modale add-to-deroule) ───────── */
.cp-kindlist { display: flex; flex-direction: column; gap: 6px; }
.cp-kindlist__group-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 8px 2px 2px;
}
.cp-kindlist__group-label:first-child { margin-top: 0; }
[data-app="gestion"] .np-app-body button.cp-kindlist__item,
.cp-kindlist__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-align: left;
    color: var(--text);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
[data-app="gestion"] .np-app-body button.cp-kindlist__item:hover,
.cp-kindlist__item:hover {
    border-color: var(--brand);
    background: var(--brand-50);
    transform: translateY(-1px);
    color: var(--text);
}
.cp-kindlist__badge {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}
.cp-kindlist__badge--ok { background: var(--secondary-50); color: var(--secondary); }
.cp-kindlist__badge--warn { background: var(--warning-bg); color: var(--warning); }
.cp-kindlist__name { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 500; }
.cp-kindlist__arrow { color: var(--text-subtle); flex-shrink: 0; font-size: 0.85rem; }

/* ─── Confirmation de remplacement (modale add-to-deroule) ─────── */
.cp-replace-confirm {
    text-align: center;
    padding: 12px 8px;
}
.cp-replace-confirm__icon {
    width: 52px; height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--warning-bg);
    color: var(--warning);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.cp-replace-confirm__text {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.6;
    margin: 0 0 18px;
}
.cp-replace-confirm__actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* ─── Pagination par section ──────────────────────────────────── */
.cp-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.cp-pagination__info {
    margin-right: auto;
    font-size: 0.8rem;
    color: var(--text-muted);
}
[data-app="gestion"] .np-app-body .cp-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 9px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 500;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
[data-app="gestion"] .np-app-body .cp-pagination__link:hover {
    background: var(--brand-50);
    border-color: var(--brand-100);
    color: var(--brand);
}
[data-app="gestion"] .np-app-body .cp-pagination__link.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 1px 3px rgba(76, 103, 157, 0.20);
}
[data-app="gestion"] .np-app-body .cp-pagination__link.is-active:hover {
    background: var(--brand-700);
    border-color: var(--brand-700);
    color: #fff;
}
.cp-pagination__link.is-disabled {
    pointer-events: none;
    opacity: 0.4;
}
.cp-pagination__ellipsis {
    color: var(--text-muted);
    padding: 0 6px;
}

/* Responsive : empilage propre */
@media (max-width: 991.98px) {
    .cp-celebration-card {
        grid-template-columns: auto 1fr;
        gap: 14px;
    }
    .cp-celebration-card__main {
        grid-column: 2;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .cp-celebration-card__side {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding-top: 12px;
        border-top: 1px dashed var(--border);
    }
}
@media (max-width: 575.98px) {
    .cp-celebration-card {
        grid-template-columns: 1fr;
        padding: 14px 14px 14px 18px;
    }
    .cp-celebration-card__main { grid-column: 1; }
    .cp-celebration-card__date {
        display: inline-flex;
        align-items: baseline;
        gap: 6px;
        min-width: 0;
        text-align: left;
        padding: 6px 12px;
        border-radius: 999px;
    }
    .cp-celebration-card__date strong { font-size: 0.9rem; }
    .cp-celebration-card__date small { margin-top: 0; }
}

/* ─── Responsive (anciens) ─────────────────────────────────────── */
@media (max-width: 575.98px) {
    .cp-hero { padding: 24px 20px; border-radius: 16px; }
    .cp-hero__title { font-size: 1.55rem; }
    .cp-hero__meta { gap: 8px; }
    .cp-hero__meta-item { padding: 5px 10px; font-size: 0.78rem; }
    .cp-stat { padding: 14px; }
    .cp-stat__value { font-size: 1.4rem; }
    .cp-list__date { width: 46px; }
    .cp-finance-kpi { grid-template-columns: 1fr; }
    .cp-page-header { gap: 10px; }
    .cp-page-header__title { font-size: 1.3rem; }
    .cp-page-header__icon { width: 32px; height: 32px; font-size: 0.95rem; }
    .cp-view-filter__pill { padding: 6px 12px; font-size: 0.82rem; }
}

/* ─── Barre de recherche célébrations ──────────────────────────── */
.cp-search {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin: 14px 0 4px;
}
.cp-search__field {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}
.cp-search__icon {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    font-size: 0.95rem;
    pointer-events: none;
}
.cp-search__input {
    width: 100%;
    padding: 10px 38px 10px 38px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.9rem;
    transition: border-color .15s, box-shadow .15s;
}
.cp-search__input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(76, 103, 157, 0.15);
}
.cp-search__input::placeholder { color: var(--text-muted); }
.cp-search__clear {
    position: absolute;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.cp-search__clear:hover {
    background: var(--surface-2);
    color: var(--danger);
}
.cp-search__submit {
    flex: 0 0 auto;
    border-radius: 999px;
    white-space: nowrap;
}
.cp-search__result-info {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 2px 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}
@media (max-width: 575px) {
    .cp-search { flex-direction: column; }
    .cp-search__submit { width: 100%; }
}

/* ═══════════ Page profil — composants ═══════════ */

/* Callout (abonnement) */
.cp-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border-radius: 14px;
    /* Gradient Celebration Pro (navy) — indépendant de l'app : ce bandeau
       promeut Celebration Pro, il garde donc l'identité Pro partout. */
    background:
        radial-gradient(95% 165% at 100% 0%, rgba(100, 127, 84, 0.38) 0%, transparent 60%),
        linear-gradient(120deg, #193141 0%, #2F4A6E 48%, #4C679D 100%);
    color: #fff;
    box-shadow: 0 10px 26px rgba(25, 49, 65, 0.28);
}
/* Titre forcé en blanc : sur mariage/gestion les h3 sont colorés par défaut. */
.cp-callout:not(.cp-callout--soft) .cp-callout__title { color: #fff; }
/* CTA aligné sur l'identité Celebration Pro : bouton clair, texte/icône navy,
   indépendant de l'app (le bandeau promeut Pro). */
.cp-callout .cp-callout__cta {
    background: #fff;
    color: #193141;
    border: 1px solid #fff;
    font-weight: 600;
}
.cp-callout .cp-callout__cta i { color: #193141; }
.cp-callout .cp-callout__cta:hover:not(:disabled),
.cp-callout .cp-callout__cta:focus:not(:disabled) {
    background: #E6ECF4;
    color: #193141;
    border-color: #E6ECF4;
}
.cp-callout--soft {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: none;
}
.cp-callout__title { font-size: 1rem; font-weight: 700; margin: 0 0 2px; }
.cp-callout__text { font-size: 0.85rem; opacity: 0.92; max-width: 52ch; }

/* Champ photo de profil */
.cp-photo-field {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.cp-photo-field__avatar {
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 2rem;
}
.cp-photo-field__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cp-photo-field__upload { flex: 1 1 240px; }

/* Champ photo de couverture */
.cp-cover-field { display: flex; flex-direction: column; gap: 14px; }
.cp-cover-field__preview {
    width: 100%;
    aspect-ratio: 3 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cp-cover-field__preview img { width: 100%; height: 100%; object-fit: cover; }
.cp-cover-field__empty {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.cp-cover-field__empty i { font-size: 1.3rem; }

/* Switch visibilité */
.cp-switch { padding-left: 2.6em; }
.cp-switch .form-check-input { width: 2.2em; height: 1.2em; cursor: pointer; }
.cp-switch .form-check-input:checked { background-color: var(--secondary); border-color: var(--secondary); }
.cp-switch .form-check-label { cursor: pointer; }

/* Séparateur éditorial */
.cp-divider {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 40px 0 8px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--border);
}
.cp-divider__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand);
    color: #fff;
    font-size: 1.05rem;
}
.cp-divider__title {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0;
    color: var(--text);
    letter-spacing: -0.01em;
}
.cp-divider__text { font-size: 0.83rem; color: var(--text-muted); }

/* FAQ — édition */
.cp-faq-group {
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
}
.cp-faq-group__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 600;
    background: var(--surface-2);
    list-style: none;
}
.cp-faq-group__summary::-webkit-details-marker { display: none; }
.cp-faq-group__count {
    margin-left: auto;
    background: var(--brand);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
}
.cp-faq-group__chevron { transition: transform .2s; color: var(--text-muted); }
.cp-faq-group[open] .cp-faq-group__chevron { transform: rotate(180deg); }
.cp-faq-group__body { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.cp-faq-edit__q {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 5px;
}

/* Actions du formulaire */
.cp-form-actions {
    display: flex;
    justify-content: flex-end;
    margin: 24px 0 8px;
}

/* Statut de sauvegarde (médias) */
.cp-save-status {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--secondary);
    font-weight: 600;
}

/* Gestionnaire de médias */
.cp-media-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.cp-media-block {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}
.cp-media-block .drag-handle {
    flex-shrink: 0;
    cursor: grab;
    color: var(--text-muted);
    padding: 4px 2px;
    font-size: 1.1rem;
}
.cp-media-block.sortable-ghost { opacity: 0.4; }
.cp-media-block.sortable-chosen { box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.cp-media-block__body { flex: 1 1 auto; min-width: 0; }
.cp-media-block__head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.cp-media-block__preview:not(:empty) { margin-bottom: 8px; }
.cp-media-block__img,
.cp-media-block__video {
    max-width: 100%;
    max-height: 220px;
    border-radius: 10px;
    object-fit: cover;
}
.cp-media-block__caption { margin-top: 8px; }
.cp-media-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ═══════════ Page profil — mise en page « réglages » ═══════════ */
.cp-settings {
    display: grid;
    grid-template-columns: 234px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin-top: 20px;
}

/* Navigation latérale */
.cp-settings__nav { position: sticky; top: 84px; }
.cp-settings__nav-list { display: flex; flex-direction: column; gap: 4px; }
.cp-settings__nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.cp-settings__nav-link i { font-size: 1rem; flex-shrink: 0; }
.cp-settings__nav-link:hover { background: var(--surface-2); color: var(--text); }
.cp-settings__nav-link.is-active {
    background: var(--brand-100);
    color: var(--brand-700);
    font-weight: 600;
}
.cp-settings__content { min-width: 0; }
.cp-settings__content .cp-section,
.cp-settings__content .cp-divider { scroll-margin-top: 84px; }
.cp-settings__content .cp-section:first-child { margin-top: 0; }

/* Sous-cartes de la fiche annuaire */
.cp-subcard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
}
.cp-subcard__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 14px;
}
.cp-subcard__title i { color: var(--brand); font-size: 1.05rem; }

/* Barre d'enregistrement collante */
.cp-save-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.07);
}
.cp-save-bar__hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

@media (max-width: 991.98px) {
    .cp-settings { grid-template-columns: 1fr; gap: 14px; }
    .cp-settings__nav {
        position: static;
        margin: 0 -4px;
    }
    .cp-settings__nav-list {
        flex-direction: row;
        overflow-x: auto;
        gap: 6px;
        padding: 4px;
        scrollbar-width: none;
    }
    .cp-settings__nav-list::-webkit-scrollbar { display: none; }
    .cp-settings__nav-link {
        white-space: nowrap;
        border: 1px solid var(--border);
        padding: 8px 12px;
    }
    .cp-settings__nav-link span { font-size: 0.84rem; }
}

/* ═══════════ Page profil — badges, navigation, dropzone médias ═══════════ */

/* Badge « visible sur l'annuaire » */
.cp-public-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--brand-100);
    color: var(--brand-700);
    vertical-align: middle;
    white-space: nowrap;
}
.cp-public-tag i { font-size: 0.72rem; }
.cp-public-tag--partial {
    background: #E6EDE1;
    color: var(--secondary);
}

/* Autosave : chip de statut global (flottant) + flag par champ. */
.cp-autosave-status {
    position: fixed;
    bottom: 20px; right: 20px;
    z-index: var(--z-toast, 1080);
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    pointer-events: none;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.cp-autosave-status[data-state] { opacity: 1; transform: translateY(0); }
.cp-autosave-status[data-state="saving"] { color: var(--text-muted); }
.cp-autosave-status[data-state="saved"] { color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); background: var(--success-bg); }
.cp-autosave-status[data-state="error"] { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); background: var(--danger-bg); }
.cp-autosave-status[data-state="notice"] { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 35%, transparent); background: var(--warning-bg); pointer-events: auto; }
.autosave-flag {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.74rem;
    font-weight: 600;
    vertical-align: middle;
}
.autosave-flag[data-state="saving"] { color: var(--text-subtle); }
.autosave-flag[data-state="ok"] { color: var(--success); }
.autosave-flag[data-state="error"] { color: var(--danger); }

/* Badge « Requis » (champ obligatoire pour publier la fiche). */
.cp-req-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--danger-bg);
    color: var(--danger);
    vertical-align: middle;
    white-space: nowrap;
}
.cp-req-badge i { font-size: 0.6rem; }

/* Encart « publication bloquée » sous le toggle de visibilité. */
.cp-publish-gate {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--warning-bg);
    border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--text);
}
.cp-publish-gate > i { color: var(--warning); font-size: 1.05rem; margin-top: 1px; flex-shrink: 0; }
.cp-publish-gate__link { font-weight: 600; }

/* Checklist des éléments requis (pop-up de publication). */
.cp-req-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cp-req-list__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.cp-req-list__item.is-ok { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 25%, transparent); }
.cp-req-list__item.is-missing { background: var(--surface); }
.cp-req-list__item > i { font-size: 1.1rem; flex-shrink: 0; }
.cp-req-list__item.is-ok > i { color: var(--success); }
.cp-req-list__item.is-missing > i { color: var(--text-subtle); }
.cp-req-list__label { flex: 1; font-weight: 500; }
.cp-req-list__done { font-size: 0.78rem; font-weight: 700; color: var(--success); text-transform: uppercase; }
.cp-req-list__cta { font-size: 0.85rem; font-weight: 600; }

/* Encart d'information */
.cp-note {
    display: flex;
    gap: 9px;
    padding: 11px 13px;
    border-radius: 10px;
    background: var(--brand-100);
    color: var(--brand-700);
    font-size: 0.83rem;
    line-height: 1.45;
}
.cp-note i { flex-shrink: 0; margin-top: 1px; font-size: 1rem; }
.cp-field-hint { font-size: 0.78rem; color: var(--text-muted); margin: 5px 0 0; }

/* Navigation — groupe & sous-liens */
.cp-settings__nav-group {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 16px 0 4px;
    padding: 0 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}
.cp-settings__nav-link--sub {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 30px;
    font-size: 0.85rem;
}
.cp-settings__nav-link--sub::before {
    content: '';
    position: absolute;
    left: 16px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--border);
}
.cp-settings__nav-link { position: relative; }
.cp-settings__nav-link--sub.is-active::before { background: var(--brand); }

/* Dropzone médias */
.cp-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 30px 20px;
    border: 2px dashed var(--border);
    border-radius: 14px;
    background: var(--surface-2);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s;
}
.cp-dropzone:hover,
.cp-dropzone.is-over {
    border-color: var(--brand);
    background: var(--brand-100);
}
.cp-dropzone__icon { font-size: 1.9rem; color: var(--brand); margin-bottom: 4px; }
.cp-dropzone__title { font-weight: 700; color: var(--text); margin: 0; }
.cp-dropzone__hint { font-size: 0.8rem; color: var(--text-muted); margin: 0; }

/* Grille de vignettes médias */
.cp-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 12px;
}
.cp-media-tile {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-2);
    cursor: grab;
}
.cp-media-tile:active { cursor: grabbing; }
.cp-media-tile--ghost { opacity: 0.35; }
.cp-media-tile__media {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
}
.cp-media-tile__media img,
.cp-media-tile__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cp-media-tile__badge {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.78rem;
}
.cp-media-tile__del {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.72rem;
    opacity: 0;
    transition: opacity .15s, background .15s;
}
.cp-media-tile:hover .cp-media-tile__del { opacity: 1; }
.cp-media-tile__del:hover { background: var(--danger); }
.cp-media-tile__caption {
    width: 100%;
    border: none;
    border-top: 1px solid var(--border);
    padding: 7px 9px;
    font-size: 0.78rem;
    background: var(--surface);
    color: var(--text);
}
.cp-media-tile__caption:focus { outline: none; background: var(--brand-100); }
.cp-media-tile__spinner {
    width: 26px;
    height: 26px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cp-spin .7s linear infinite;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }

/* ═══════════ Page profil — carte d'identité ═══════════ */
.cp-profile-head {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-radius: 16px;
    background:
        radial-gradient(75% 130% at 100% 100%, rgba(100, 127, 84, 0.50) 0%, transparent 58%),
        radial-gradient(65% 110% at 0% 0%, rgba(76, 103, 157, 0.45) 0%, transparent 60%),
        linear-gradient(120deg, #193141 0%, #2F4A6E 48%, #4C679D 100%);
    color: #fff;
    box-shadow: 0 16px 40px rgba(25, 49, 65, 0.30);
}
/* Profile head — déclinaison mariage (violet → orange, en phase avec le hero) */
[data-app="mariage"] .cp-profile-head {
    background:
        radial-gradient(60% 110% at 100% 100%, rgba(255, 153, 0, 0.55) 0%, transparent 60%),
        radial-gradient(50% 90% at 0% 0%, rgba(102, 51, 153, 0.40) 0%, transparent 55%),
        linear-gradient(125deg, #663399 0%, #8A4FA8 55%, #FF9900 130%);
    box-shadow: 0 14px 36px rgba(102, 51, 153, 0.28);
}
/* Profile head — déclinaison adieu (via tokens de marque) */
[data-app="adieu"] .cp-profile-head {
    background:
        radial-gradient(60% 110% at 100% 100%, color-mix(in srgb, var(--secondary) 55%, transparent) 0%, transparent 60%),
        radial-gradient(50% 90% at 0% 0%, color-mix(in srgb, var(--brand) 40%, transparent) 0%, transparent 55%),
        linear-gradient(125deg, var(--brand) 0%, color-mix(in srgb, var(--secondary) 55%, var(--brand)) 55%, var(--secondary) 130%);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--brand) 28%, transparent);
}
.cp-profile-head > * { position: relative; z-index: 1; }
.cp-profile-head__avatar {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.7rem;
}
.cp-profile-head__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cp-profile-head__info { flex: 1 1 auto; min-width: 0; }
.cp-profile-head .cp-profile-head__name {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cp-profile-head__sub {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.82);
    margin: 1px 0 8px;
}
.cp-profile-head__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-profile-head__actions { flex-shrink: 0; }

@media (max-width: 575px) {
    .cp-profile-head { flex-wrap: wrap; }
    .cp-profile-head__actions { width: 100%; }
    .cp-profile-head__actions .btn { width: 100%; }
}

/* ═══════════ Recadrage photo de couverture ═══════════ */
.cp-cropper-stage {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #1d1d1d;
}
.cp-cropper-stage img {
    display: block;
    max-width: 100%;
    max-height: 380px;
}
.cp-cropper-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
/* Lignes de tiers (axes de force) bien visibles pendant le recadrage */
.cp-cropper-stage .cropper-dashed {
    border-color: rgba(255, 255, 255, 0.85);
}
.cp-cropper-stage .cropper-view-box {
    outline-color: var(--brand);
}

/* ─── Annuaire — FAQ non renseignée ─────────────────────────────── */
.ann-faq-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 22px;
    border: 1px solid var(--border, #e3e3e3);
    border-radius: 14px;
    background: #f6f7f9;
    color: #5a6472;
}
.ann-faq-empty i { font-size: 1.4rem; flex-shrink: 0; }
.ann-faq-empty p { margin: 0; font-size: 0.92rem; }
.ann-faq__unanswered {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8a8f99;
    font-style: italic;
    font-size: 0.9rem;
}

/* ─── Lightbox — navigation entre médias ────────────────────────── */
.ann-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 1.45rem;
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s ease;
}
.ann-lightbox__nav:hover { background: rgba(255, 255, 255, 0.34); }
.ann-lightbox__nav[hidden] { display: none; }
.ann-lightbox__nav--prev { left: -62px; }
.ann-lightbox__nav--next { right: -62px; }
@media (max-width: 860px) {
    .ann-lightbox__nav--prev { left: 8px; }
    .ann-lightbox__nav--next { right: 8px; }
}

/* ═══════════ Bibliothèque — refonte ═══════════ */

/* Lien retour */
.cp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 14px;
}
.cp-back-link:hover { color: var(--brand); }

/* En-tête de détail (show + formulaires) */
.cp-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.cp-detail-head__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cp-detail-head__title { font-size: 1.5rem; font-weight: 800; margin: 0; color: var(--text); }
.cp-detail-head__actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.cp-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 18px;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.cp-detail-meta i { margin-right: 5px; }

/* Paroles / texte — fond clair lisible */
.cp-lyrics {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
    white-space: pre-line;
    line-height: 1.85;
    font-style: italic;
    color: var(--text);
}

/* Lien fichier (partition) */
.cp-file-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
}
.cp-file-link > i:first-child { font-size: 1.3rem; color: var(--danger); }
.cp-file-link:hover { border-color: var(--brand); }

/* Barre d'outils : filtres + bascule d'affichage */
.cp-res-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.cp-res-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
}
.cp-res-filters__search { flex: 1 1 220px; min-width: 180px; }
.cp-res-filters__select { width: auto; flex: 0 0 auto; }

.cp-res-viewtoggle {
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.cp-res-viewtoggle__btn {
    width: 34px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 7px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.cp-res-viewtoggle__btn:hover { color: var(--text); }
.cp-res-viewtoggle__btn.is-active {
    background: var(--surface);
    color: var(--brand);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Grille de ressources */
.cp-res-grid {
    flex-basis: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
}
.cp-res-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}
.cp-res-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10); }
.cp-res-card__visual {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.cp-res-card__visual img { width: 100%; height: 100%; object-fit: cover; }
.cp-res-card__visual--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
}
.cp-res-card--song .cp-res-card__visual--icon { background: var(--brand-100); color: var(--brand); }
.cp-res-card--text .cp-res-card__visual--icon { background: #E6EDE1; color: var(--secondary); }
.cp-res-card__main { flex: 1 1 auto; padding: 12px 14px; }
.cp-res-card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.cp-res-card__title { font-size: 0.95rem; font-weight: 700; line-height: 1.3; margin: 0 0 2px; }
.cp-res-card__title a { color: var(--text); text-decoration: none; }
.cp-res-card__title a:hover { color: var(--brand); }
.cp-res-card__author {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}
.cp-res-card__actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
}

/* Vue liste compacte */
.cp-res-grid--list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cp-res-grid--list .cp-res-card { flex-direction: row; align-items: center; }
.cp-res-grid--list .cp-res-card__visual {
    width: 116px;
    height: 65px;
    aspect-ratio: auto;
    flex-shrink: 0;
    border-radius: 0;
}
.cp-res-grid--list .cp-res-card__visual--icon { font-size: 1.6rem; }
/* Bouton lecture réduit dans la vue liste (vignette plus petite) */
.cp-res-grid--list .yt-play-btn {
    width: 34px;
    height: 34px;
    font-size: 1.05rem;
}
.cp-res-grid--list .cp-res-card__main { padding: 10px 16px; }
.cp-res-grid--list .cp-res-card__actions {
    border-top: none;
    border-left: 1px solid var(--border);
    padding: 10px 14px;
}

/* Cartes de modération (suggestions / suppressions) */
.cp-mod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.cp-mod-card { padding: 18px 20px; border-left: 4px solid var(--border); }
.cp-mod-card--suggestion { border-left-color: var(--warning); }
.cp-mod-card--danger { border-left-color: var(--danger); }
.cp-mod-card__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.cp-mod-card__title { font-size: 1rem; font-weight: 700; margin: 0 0 3px; }
.cp-mod-card__sub { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 6px; }
.cp-mod-card__meta { font-size: 0.78rem; color: var(--text-muted); margin: 0 0 14px; }
.cp-mod-card__meta i { margin-right: 4px; }
.cp-mod-card__actions { display: flex; gap: 6px; }
.cp-mod-card__actions > a,
.cp-mod-card__actions > form { flex: 1 1 0; }

/* Icône-bouton désactivée */
.cp-icon-btn.is-disabled { opacity: 0.5; cursor: default; pointer-events: none; }

@media (max-width: 575px) {
    .cp-res-filters { width: 100%; }
    .cp-res-viewtoggle { margin-left: auto; }
    .cp-detail-head__title { font-size: 1.25rem; }
}

/* Moment liturgique sur la carte ressource */
.cp-res-card__moment {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--brand);
    margin: 0 0 3px;
}
.cp-res-card__moment i { flex-shrink: 0; }

/* ═══════════ Lecteur YouTube flottant (bibliothèque) ═══════════ */
body.has-library-player { padding-bottom: 96px; }

/* Fond sombre — uniquement en mode plein écran */
.cp-player__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1035;
    background: rgba(0, 0, 0, 0.66);
}
.cp-player__backdrop[hidden] { display: none; }

/* ── Carte flottante : barre fine centrée ── */
.cp-player {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(660px, calc(100vw - 28px));
    padding: 9px 12px;
    background:
        radial-gradient(60% 120% at 100% 100%, rgba(100, 127, 84, 0.55) 0%, transparent 60%),
        radial-gradient(50% 100% at 105% 0%, rgba(100, 127, 84, 0.30) 0%, transparent 55%),
        linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 130%);
    border: none;
    border-radius: 16px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
    transition: width .22s ease, border-radius .22s ease, padding .22s ease;
}
.cp-player[hidden] { display: none; }

/* Lecteur — déclinaison mariage (violet → orange, en phase avec le hero) */
[data-app="mariage"] .cp-player {
    background:
        radial-gradient(60% 120% at 100% 100%, rgba(255, 153, 0, 0.55) 0%, transparent 60%),
        radial-gradient(50% 100% at 0% 0%, rgba(102, 51, 153, 0.40) 0%, transparent 55%),
        linear-gradient(125deg, #663399 0%, #8A4FA8 55%, #FF9900 130%);
}

.cp-player__video {
    flex-shrink: 0;
    width: 64px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}
.cp-player__video iframe,
.cp-player__video > div {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.cp-player__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}
.cp-player__body { flex: 1 1 auto; min-width: 0; }
.cp-player__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cp-player__progress { display: flex; align-items: center; gap: 9px; }
.cp-player__time {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.8);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 32px;
}
.cp-player__time:last-of-type { text-align: right; }
.cp-player__range {
    flex: 1 1 auto;
    height: 5px;
    accent-color: #fff;
    cursor: pointer;
}

.cp-player__controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cp-player__play {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: var(--brand);
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .15s ease;
}
.cp-player__play:hover { transform: scale(1.06); }
.cp-player__btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}
.cp-player__btn:hover { background: rgba(255, 255, 255, 0.34); }
.cp-player__btn--close:hover { background: var(--danger); }

/* ── Mode plein écran : la carte devient un panneau centré ── */
.cp-player.cp-player--expanded {
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(900px, calc(100vw - 40px));
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 14px;
    border-radius: 20px;
    /* Panneau blanc : seul le bandeau de contrôle garde le dégradé. */
    background: var(--surface);
}
.cp-player--expanded .cp-player__video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
}
/* Plein écran : panneau entièrement blanc, textes et icônes en bleu marque. */
.cp-player--expanded .cp-player__bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 2px 4px;
    background: transparent;
}
.cp-player--expanded .cp-player__controls { justify-content: center; }
.cp-player--expanded .cp-player__title {
    font-size: 1.05rem;
    white-space: normal;
    color: var(--brand);
}
.cp-player--expanded .cp-player__time { color: var(--text-muted); }
.cp-player--expanded .cp-player__range { accent-color: var(--brand); }
.cp-player--expanded .cp-player__play {
    background: var(--brand-100);
    color: var(--brand);
}
.cp-player--expanded .cp-player__play:hover { background: var(--brand); color: #fff; }
.cp-player--expanded .cp-player__btn {
    background: var(--surface-2);
    color: var(--brand);
}
.cp-player--expanded .cp-player__btn:hover { background: var(--border); color: var(--brand); }
.cp-player--expanded .cp-player__btn--close:hover { background: var(--danger); color: #fff; }

@media (max-width: 575px) {
    .cp-player { gap: 9px; padding: 8px 10px; width: calc(100vw - 18px); }
    .cp-player__time { display: none; }
    .cp-player--expanded .cp-player__time { display: block; }
}

/* Aperçu de carte en cours de lecture */
.cp-res-card__visual.is-playing::after {
    content: "En cours de lecture";
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    text-align: center;
    background: rgba(18, 22, 30, 0.74);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cp-res-card__visual.is-playing .yt-play-btn { display: none; }

/* Colonne fixe (page show bibliothèque) */
.cp-sticky-col { position: sticky; top: 84px; }
@media (max-width: 991.98px) {
    .cp-sticky-col { position: static; }
}

/* Annotations personnelles (fiche chant) — fond clair, texte normal */
.cp-lyrics--notes { font-style: normal; font-size: 0.9rem; padding: 14px 16px; }

/* ═══════════ Répertoire — pastille, légende, pop-up, toast ═══════════ */

/* Pastille sur les cartes de la bibliothèque */
.cp-res-card { position: relative; }
.cp-res-card__rep {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--brand);
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
    transition: background .15s, color .15s, transform .15s;
}
.cp-res-card__rep:hover { transform: scale(1.1); }
.cp-res-card__rep.is-in { background: var(--secondary); color: #fff; }
.cp-res-card__rep--locked {
    background: rgba(255, 255, 255, 0.96);
    color: #3A4F7A;
}
.cp-res-card__rep--locked::after {
    content: "Pro";
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    background: linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 130%);
    color: #fff;
    padding: 1px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(58, 79, 122, 0.30);
}
.cp-res-card__rep--locked:hover {
    background: linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 130%);
    color: #fff;
}
/* État "déjà dans le répertoire partagé du groupe" pour non-pro : on garde
   le visuel "present" (orange brand secondary) et la pastille "Pro" en pied. */
.cp-res-card__rep--locked.cp-res-card__rep--locked-in {
    background: var(--secondary, #FF9900);
    color: #fff;
}
.cp-res-card__rep--locked.cp-res-card__rep--locked-in:hover {
    background: linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 130%);
    color: #fff;
}

/* Bouton "Répertoire" verrouillé sur la page show — variante hero light */
.btn-hero-light--locked {
    position: relative;
    color: #3A4F7A;
    border: 1px solid rgba(58, 79, 122, 0.30);
}
.btn-hero-light--locked:hover {
    background: linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 130%);
    color: #fff;
    border-color: transparent;
}
.btn-hero-light__pro-tag {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 130%);
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    vertical-align: middle;
    box-shadow: 0 2px 4px rgba(58, 79, 122, 0.20);
}
.cp-res-grid--list .cp-res-card__rep { right: auto; left: 8px; }

/* Modale upsell Pro */
[data-app="mariage"] .pro-upsell-modal .modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}
[data-app="mariage"] .pro-upsell-modal__head {
    background: linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 130%);
    color: #fff;
    border: 0;
    padding: 16px 22px;
}
[data-app="mariage"] .pro-upsell-modal__brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 700; letter-spacing: 0.02em; color: #fff;
}
[data-app="mariage"] .pro-upsell-modal__logo {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #fff;
    padding: 4px;
    object-fit: contain;
}
[data-app="mariage"] .pro-upsell-modal__title,
[data-app="mariage"] .np-app-body .pro-upsell-modal__title {
    margin: 0 0 12px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1F2540;
    line-height: 1.25;
}
[data-app="mariage"] .pro-upsell-modal__lead {
    margin: 0 0 16px;
    color: rgba(31, 37, 64, 0.78);
    line-height: 1.55;
}
[data-app="mariage"] .pro-upsell-modal__lead strong { color: #3A4F7A; font-weight: 700; }
[data-app="mariage"] .pro-upsell-modal__bullets {
    list-style: none; margin: 0 0 16px; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
}
[data-app="mariage"] .pro-upsell-modal__bullets li {
    display: flex; align-items: center; gap: 10px;
    color: rgba(31, 37, 64, 0.85);
    font-size: 0.93rem;
}
[data-app="mariage"] .pro-upsell-modal__bullets li i {
    color: #4C679D; font-size: 1rem; flex-shrink: 0;
}
[data-app="mariage"] .pro-upsell-modal__price {
    margin: 16px 0 0;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(58, 79, 122, 0.08) 0%, rgba(100, 127, 84, 0.10) 100%);
    border: 1px solid rgba(58, 79, 122, 0.22);
    border-radius: 10px;
    text-align: center;
    color: rgba(31, 37, 64, 0.78);
    font-size: 0.95rem;
}
[data-app="mariage"] .pro-upsell-modal__price strong { color: #3A4F7A; font-size: 1.15rem; }
[data-app="mariage"] .pro-upsell-modal__cta {
    width: 100%;
    background: linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 130%);
    color: #fff;
    font-weight: 700;
    padding: 12px 20px;
    border: 0;
    border-radius: 999px;
    text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform var(--dur-fast, .2s) var(--ease, ease), filter var(--dur-fast, .2s) var(--ease, ease);
}
[data-app="mariage"] .pro-upsell-modal__cta:hover { transform: translateY(-1px); filter: brightness(1.08); color: #fff; }

/* Légende */
.cp-res-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin: 0 2px 14px;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.cp-res-legend > span { display: flex; align-items: center; gap: 6px; }
.cp-res-legend__chip {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--brand);
    font-size: 0.7rem;
}
.cp-res-legend__chip--in { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.cp-res-legend__note { font-style: italic; }

/* Conteneur légende + CTA (légende à gauche, CTA à droite) */
.cp-res-legend-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-bottom: 14px;
}
.cp-res-legend-row .cp-res-legend { margin: 0; flex: 1 1 auto; min-width: 0; }

/* CTA "Gérer sur l'espace pro" (côté pro abonné) */
.cp-res-legend__cta {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 14px;
    background: color-mix(in srgb, var(--brand, #663399) 8%, transparent);
    color: var(--brand, #663399);
    border: 1px solid color-mix(in srgb, var(--brand, #663399) 28%, transparent);
    border-radius: 999px;
    text-decoration: none;
    transition: background var(--dur-fast, .15s) var(--ease, ease),
                color var(--dur-fast, .15s) var(--ease, ease),
                border-color var(--dur-fast, .15s) var(--ease, ease);
}
.cp-res-legend__cta:hover {
    background: var(--brand, #663399);
    color: #fff;
    border-color: var(--brand, #663399);
}

/* Lien inline "Découvrir →" dans le note des non-pros */
.cp-res-legend__inline-link {
    color: #3A4F7A;
    font-weight: 700;
    text-decoration: none;
    font-style: normal;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    margin-left: 4px;
}
.cp-res-legend__inline-link:hover { color: #4C679D; }

/* ═══════════════════════════════════════════════════════════════════════════
   Page "Accès réservé Pro" (403)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-app="mariage"] .pro-required {
    background: #fff;
    border-radius: 22px;
    padding: clamp(28px, 4vw, 44px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
}
[data-app="mariage"] .pro-required__head {
    display: inline-flex; align-items: center; gap: 12px;
    margin-bottom: 22px;
    padding: 10px 16px 10px 12px;
    background: linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 130%);
    color: #fff;
    border-radius: 999px;
}
[data-app="mariage"] .pro-required__logo {
    width: 32px; height: 32px;
    background: #fff;
    border-radius: 50%;
    padding: 4px;
    object-fit: contain;
    flex-shrink: 0;
}
[data-app="mariage"] .pro-required__brand { font-weight: 700; letter-spacing: 0.01em; }
[data-app="mariage"] .pro-required__title,
[data-app="mariage"] .np-app-body .pro-required__title {
    margin: 0 0 12px;
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    font-weight: 700;
    color: #1F2540;
    letter-spacing: -0.01em;
}
[data-app="mariage"] .pro-required__lead {
    margin: 0 0 22px;
    color: rgba(31, 37, 64, 0.78);
    font-size: 1rem;
    line-height: 1.6;
}
[data-app="mariage"] .pro-required__lead strong { color: #3A4F7A; }
/* Réassurance : données pro conservées (compte expiré/résilié). */
[data-app="mariage"] .pro-required__reassure {
    display: flex; gap: 12px; align-items: flex-start;
    margin: 0 0 24px; padding: 14px 18px;
    background: rgba(100, 127, 84, 0.10);
    border: 1px solid rgba(100, 127, 84, 0.28);
    border-radius: 14px;
    color: rgba(31, 37, 64, 0.85);
    font-size: 0.92rem; line-height: 1.55;
}
[data-app="mariage"] .pro-required__reassure > i { color: #647F54; font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }
[data-app="mariage"] .pro-required__reassure strong { display: block; color: #3A4F7A; margin-bottom: 2px; }
[data-app="mariage"] .pro-required__bullets {
    list-style: none; margin: 0 0 28px; padding: 18px 22px;
    background: linear-gradient(135deg, rgba(58, 79, 122, 0.05) 0%, rgba(100, 127, 84, 0.06) 100%);
    border: 1px solid rgba(58, 79, 122, 0.16);
    border-radius: 14px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 576px) { [data-app="mariage"] .pro-required__bullets { grid-template-columns: repeat(2, 1fr); } }
[data-app="mariage"] .pro-required__bullets li {
    display: flex; align-items: center; gap: 10px;
    color: rgba(31, 37, 64, 0.85);
    font-size: 0.93rem;
}
[data-app="mariage"] .pro-required__bullets li i {
    color: #4C679D; font-size: 1rem; flex-shrink: 0;
}
[data-app="mariage"] .pro-required__actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
}
[data-app="mariage"] .pro-required__cta-primary,
[data-app="mariage"] .np-app-body .btn.pro-required__cta-primary {
    background: linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 130%);
    color: #fff;
    font-weight: 700;
    padding: 12px 24px;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(58, 79, 122, 0.24);
    transition: transform var(--dur-fast, .2s) var(--ease, ease), filter var(--dur-fast, .2s) var(--ease, ease);
}
[data-app="mariage"] .pro-required__cta-primary:hover,
[data-app="mariage"] .np-app-body .btn.pro-required__cta-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    color: #fff;
}
[data-app="mariage"] .pro-required__cta-secondary {
    color: rgba(31, 37, 64, 0.62);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}
[data-app="mariage"] .pro-required__cta-secondary:hover { color: #3A4F7A; border-bottom-color: #3A4F7A; }

/* Pop-up de choix de répertoire */
.cp-repmodal {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.cp-repmodal[hidden] { display: none; }
.cp-repmodal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.cp-repmodal__panel {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    background: var(--surface);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.32);
}
.cp-repmodal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cp-repmodal__heading { font-size: 1.1rem; font-weight: 800; margin: 0; color: var(--text); }
.cp-repmodal__close {
    flex-shrink: 0;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: pointer;
}
.cp-repmodal__close:hover { background: var(--border); }
.cp-repmodal__sub { font-size: 0.88rem; color: var(--text-muted); margin: 4px 0 14px; font-weight: 600; }
.cp-repmodal__list { display: flex; flex-direction: column; gap: 8px; }
.cp-repmodal__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.cp-repmodal__row-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cp-repmodal__row-name { font-weight: 700; font-size: 0.9rem; color: var(--text); }
.cp-repmodal__row-tag {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    font-weight: 700;
}
.cp-repmodal__row-done {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    color: var(--secondary);
    font-weight: 600;
    flex-shrink: 0;
}

/* Toast d'ajout avec compte à rebours */
.cp-rep-toast {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 1055;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(420px, calc(100vw - 40px));
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}
.cp-rep-toast[hidden] { display: none; }
.cp-rep-toast__icon { flex-shrink: 0; color: var(--secondary); font-size: 1.3rem; }
.cp-rep-toast__text { flex: 1 1 auto; min-width: 0; font-size: 0.85rem; color: var(--text); }
.cp-rep-toast__undo {
    flex-shrink: 0;
    border: 1px solid var(--brand);
    background: transparent;
    color: var(--brand);
    font-weight: 700;
    font-size: 0.8rem;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
}
.cp-rep-toast__undo:hover { background: var(--brand); color: #fff; }
.cp-rep-toast__bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--secondary);
}

/* Motif de demande de suppression (modération) */
.cp-mod-card__reason {
    margin: 0 0 12px;
    padding: 9px 11px;
    background: var(--surface-2);
    border-radius: 9px;
}
.cp-mod-card__reason p {
    margin: 3px 0 0;
    font-size: 0.84rem;
    color: var(--text);
    font-style: italic;
}

/* Blocs « Mes annotations » par répertoire (fiche chant) */
.cp-rep-block--sep {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.cp-rep-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.cp-rep-block__name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text);
}
.cp-rep-block__name i { color: var(--brand); }
.cp-rep-block__tag {
    flex-shrink: 0;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--surface-2);
    padding: 2px 8px;
    border-radius: 999px;
}
.cp-rep-block__manage {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
}
.cp-rep-block__manage:hover { text-decoration: underline; }

/* Bulle d'info accolée au bouton « Demander la suppression » */
.cp-delete-request { display: inline-flex; align-items: center; gap: 6px; }
.cp-info-dot {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background .15s ease;
}
.cp-info-dot:hover,
.cp-info-dot:focus { background: rgba(255, 255, 255, 0.34); outline: none; }

/* Popover harmonisé avec la charte */
.cp-popover.popover {
    --bs-popover-max-width: 300px;
    --bs-popover-border-color: #e2e5ea;
    --bs-popover-border-radius: 14px;
    --bs-popover-inner-border-radius: 13px;
    --bs-popover-header-bg: #4C679D;
    --bs-popover-header-color: #ffffff;
    --bs-popover-header-font-size: 0.84rem;
    --bs-popover-body-color: #2b2b2b;
    --bs-popover-body-padding-x: 14px;
    --bs-popover-body-padding-y: 12px;
    --bs-popover-font-size: 0.83rem;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}
.cp-popover .popover-header {
    color: #ffffff;
    background-color: #4C679D;
    font-weight: 700;
    border-bottom: none;
    padding: 9px 14px;
}
.cp-popover .popover-body { line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════════════════
   MARIAGE — Landing pro (mariage/_welcome_pro.html.twig)
   Page d'atterrissage pour musicien / intervenant sans cérémonie.
   Charte mariage (violet/orange) côté hero, sections claires en dessous.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-app="mariage"] .mw-pro { display: flex; flex-direction: column; gap: clamp(24px, 4vw, 40px); }

/* ── Hero ── */
[data-app="mariage"] .mw-pro-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: clamp(28px, 5vw, 44px);
    border-radius: 24px;
    background:
        radial-gradient(60% 110% at 100% 100%, rgba(255, 153, 0, 0.55) 0%, transparent 60%),
        radial-gradient(50% 90% at 105% 0%, rgba(102, 51, 153, 0.40) 0%, transparent 55%),
        linear-gradient(135deg, rgba(102, 51, 153, 0.55) 0%, rgba(255, 153, 0, 0.45) 45%, rgba(255, 153, 0, 0.70) 100%),
        #663399;
    color: #ffffff;
    box-shadow: 0 14px 36px rgba(102, 51, 153, 0.28);
}
@media (min-width: 992px) {
    [data-app="mariage"] .mw-pro-hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center; }
}
[data-app="mariage"] .mw-pro-hero--compact {
    grid-template-columns: 1fr;
    padding: clamp(24px, 4vw, 36px);
}
[data-app="mariage"] .mw-pro-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 12px;
}
[data-app="mariage"] .mw-pro-hero__eyebrow::before {
    content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.6;
}
[data-app="mariage"] .mw-pro-hero__title,
[data-app="mariage"] .np-app-body .mw-pro-hero__title {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
[data-app="mariage"] .mw-pro-hero__lead {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(0.98rem, 1.6vw, 1.1rem);
    line-height: 1.6;
    max-width: 56ch;
}
[data-app="mariage"] .mw-pro-hero__lead strong { color: #fff; font-weight: 700; }
[data-app="mariage"] .mw-pro-hero__actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    margin-bottom: 14px;
}
[data-app="mariage"] .mw-pro-hero__helper {
    margin: 0;
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.78);
    font-style: italic;
}

/* CTA primaire — pastille blanche, devient violette au hover (charte mariage) */
[data-app="mariage"] .mw-pro-cta-primary,
[data-app="mariage"] .np-app-body .btn.mw-pro-cta-primary {
    background: #ffffff;
    color: #663399;
    border: 0;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
    transition: transform var(--dur-fast, .2s) var(--ease, ease),
                background-color var(--dur-fast, .2s) var(--ease, ease),
                color var(--dur-fast, .2s) var(--ease, ease);
}
[data-app="mariage"] .mw-pro-cta-primary:hover,
[data-app="mariage"] .np-app-body .btn.mw-pro-cta-primary:hover {
    background: #4A1F70; color: #fff; transform: translateY(-1px);
}
[data-app="mariage"] .mw-pro-link-secondary {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 2px;
}
[data-app="mariage"] .mw-pro-link-secondary:hover { color: #fff; border-color: #fff; }

/* ── Encart tarif compact, dans le hero ── */
[data-app="mariage"] .mw-pro-pricing {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 18px;
    padding: 20px 22px;
    color: #fff;
    backdrop-filter: blur(8px);
}
[data-app="mariage"] .mw-pro-pricing__head {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 14px;
}
[data-app="mariage"] .mw-pro-pricing__head i { color: #FFB94A; font-size: 1rem; }
[data-app="mariage"] .mw-pro-pricing__rows { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
[data-app="mariage"] .mw-pro-pricing__rows li {
    display: flex; align-items: baseline; gap: 10px;
    padding: 10px 12px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
[data-app="mariage"] .mw-pro-pricing__row--pro { background: rgba(255, 185, 74, 0.18); border-color: rgba(255, 185, 74, 0.45); }
[data-app="mariage"] .mw-pro-pricing__amount { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
[data-app="mariage"] .mw-pro-pricing__label { font-size: 0.82rem; color: rgba(255, 255, 255, 0.85); }
[data-app="mariage"] .mw-pro-pricing__note {
    margin: 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.88); line-height: 1.5;
    display: flex; gap: 8px; align-items: flex-start;
}
[data-app="mariage"] .mw-pro-pricing__note i { color: #B7F0C0; flex-shrink: 0; margin-top: 2px; }
[data-app="mariage"] .mw-pro-pricing__note strong { color: #fff; }
[data-app="mariage"] .mw-pro-pricing__more {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 16px;
    font-size: 0.85rem; font-weight: 600; color: #fff; text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5); padding-bottom: 1px;
    transition: border-color var(--dur-fast) var(--ease);
}
[data-app="mariage"] .mw-pro-pricing__more:hover { border-color: #fff; }

/* ── Tarifs (section dédiée, plus bas que le hero) ── */
[data-app="mariage"] .mw-pro-tarifs__grid {
    display: grid; grid-template-columns: 1fr; gap: 18px;
    max-width: 720px; margin: 0 auto;
}
@media (min-width: 768px) {
    [data-app="mariage"] .mw-pro-tarifs__grid { grid-template-columns: repeat(2, 1fr); }
}
[data-app="mariage"] .mw-pro-tarif {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 26px 24px; border-radius: 18px;
    background: #fff; border: 1px solid rgba(102, 51, 153, 0.14);
    box-shadow: var(--shadow-sm);
}
[data-app="mariage"] .mw-pro-tarif--pro {
    background: linear-gradient(160deg, rgba(102, 51, 153, 0.06), rgba(255, 185, 74, 0.10));
    border-color: rgba(255, 185, 74, 0.5);
}
[data-app="mariage"] .mw-pro-tarif__badge {
    display: inline-block; margin-bottom: 12px;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: #663399; background: rgba(255, 185, 74, 0.22);
    border-radius: 999px; padding: 4px 10px;
}
[data-app="mariage"] .mw-pro-tarif__amount {
    font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em; color: #2A1442; line-height: 1;
}
[data-app="mariage"] .mw-pro-tarif__unit { margin-top: 4px; font-size: 0.9rem; font-weight: 600; color: #6B5B7E; }
[data-app="mariage"] .mw-pro-tarif__desc { margin: 12px 0 0; font-size: 0.9rem; color: #5A4A6E; line-height: 1.5; }
[data-app="mariage"] .mw-pro-tarifs__note {
    max-width: 640px; margin: 22px auto 0; text-align: center;
    font-size: 0.88rem; color: #5A4A6E; line-height: 1.6;
}
[data-app="mariage"] .mw-pro-tarifs__note i { color: #2E9B57; margin-right: 4px; }
[data-app="mariage"] .mw-pro-tarifs__note strong { color: #2A1442; }

/* ── Sections claires ── */
[data-app="mariage"] .mw-pro-section__head { text-align: center; margin-bottom: 28px; }
[data-app="mariage"] .mw-pro-section__overline {
    display: inline-block;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: #663399;
    margin-bottom: 6px;
}
[data-app="mariage"] .mw-pro-section__title,
[data-app="mariage"] .np-app-body .mw-pro-section__title {
    margin: 0;
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    font-weight: 700;
    color: #2A1442;
    letter-spacing: -0.01em;
}

/* ── 3 étapes ── */
[data-app="mariage"] .mw-pro-steps__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 768px) {
    [data-app="mariage"] .mw-pro-steps__grid { grid-template-columns: repeat(3, 1fr); }
}
[data-app="mariage"] .mw-pro-step {
    position: relative;
    background: #fff;
    border: 1px solid rgba(102, 51, 153, 0.12);
    border-radius: 18px;
    padding: 26px 22px 22px;
    box-shadow: 0 6px 18px rgba(102, 51, 153, 0.06);
    transition: transform var(--dur-fast, .2s) var(--ease, ease),
                box-shadow var(--dur-fast, .2s) var(--ease, ease);
    overflow: hidden;
}
[data-app="mariage"] .mw-pro-step::before {
    /* Halo coloré discret en arrière-plan, varie selon la variante */
    content: "";
    position: absolute;
    top: -40%; right: -30%;
    width: 180px; height: 180px;
    border-radius: 50%;
    opacity: 0.10;
    background: currentColor;
    pointer-events: none;
}
[data-app="mariage"] .mw-pro-step:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(102, 51, 153, 0.12); }
[data-app="mariage"] .mw-pro-step--violet { color: #663399; }
[data-app="mariage"] .mw-pro-step--orange { color: #FF9900; }
[data-app="mariage"] .mw-pro-step--sage { color: #647F54; }
[data-app="mariage"] .mw-pro-step__num {
    position: absolute;
    top: 14px; right: 14px;
    display: inline-block;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em;
    color: currentColor;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(4px);
    border: 1px solid currentColor;
    border-radius: 999px;
    opacity: 0.65;
    margin: 0;
}
[data-app="mariage"] .mw-pro-step__icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: currentColor;
    margin-bottom: 16px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.10);
    position: relative;
}
[data-app="mariage"] .mw-pro-step__icon i {
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
}
[data-app="mariage"] .mw-pro-step__title,
[data-app="mariage"] .np-app-body .mw-pro-step__title {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #2A1442;
}
[data-app="mariage"] .mw-pro-step p {
    margin: 0;
    color: rgba(42, 20, 66, 0.72);
    font-size: 0.93rem;
    line-height: 1.6;
}

/* ── 2 scénarios (flows) ── */
[data-app="mariage"] .mw-pro-flows__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}
@media (min-width: 992px) {
    [data-app="mariage"] .mw-pro-flows__grid { grid-template-columns: 1fr 1fr; }
}
[data-app="mariage"] .mw-pro-flow {
    position: relative;
    background: #fff;
    border: 1px solid rgba(102, 51, 153, 0.14);
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 8px 22px rgba(102, 51, 153, 0.08);
    display: flex; flex-direction: column;
    overflow: hidden;
}
[data-app="mariage"] .mw-pro-flow--out { color: #663399; }
[data-app="mariage"] .mw-pro-flow--in { color: #FF9900; }
[data-app="mariage"] .mw-pro-flow::before {
    content: "";
    position: absolute;
    top: -40%; right: -25%;
    width: 280px; height: 280px;
    border-radius: 50%;
    opacity: 0.08;
    background: currentColor;
    pointer-events: none;
}
[data-app="mariage"] .mw-pro-flow__illu {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: currentColor;
    margin-bottom: 18px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.10);
    position: relative;
}
[data-app="mariage"] .mw-pro-flow__illu i {
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
}
[data-app="mariage"] .mw-pro-flow__tag {
    display: inline-block;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: #663399;
    padding: 4px 12px;
    background: rgba(102, 51, 153, 0.10);
    border-radius: 999px;
    margin-bottom: 14px;
    align-self: flex-start;
}
[data-app="mariage"] .mw-pro-flow__title,
[data-app="mariage"] .np-app-body .mw-pro-flow__title {
    margin: 0 0 10px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #2A1442;
    line-height: 1.25;
}
[data-app="mariage"] .mw-pro-flow p {
    margin: 0 0 14px;
    color: rgba(42, 20, 66, 0.78);
    line-height: 1.55;
    font-size: 0.95rem;
}
[data-app="mariage"] .mw-pro-flow__bullets {
    list-style: none; margin: 0 0 18px; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
}
[data-app="mariage"] .mw-pro-flow__bullets li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 0.9rem; color: rgba(42, 20, 66, 0.82); line-height: 1.5;
}
[data-app="mariage"] .mw-pro-flow__bullets li i { color: #FF9900; font-size: 1rem; flex-shrink: 0; margin-top: 3px; }
[data-app="mariage"] .mw-pro-flow__bullets li strong { color: #2A1442; }
[data-app="mariage"] .mw-pro-flow__cta {
    margin-top: auto;
    display: inline-flex; align-items: center;
    font-weight: 700;
    color: #663399;
    text-decoration: none;
    padding-top: 4px;
    border-bottom: 1px solid transparent;
    align-self: flex-start;
}
[data-app="mariage"] .mw-pro-flow__cta:hover { border-bottom-color: #663399; color: #4A1F70; }

/* ── Séparateur orné ── */
[data-app="mariage"] .mw-pro-sep {
    display: flex; align-items: center; gap: 18px;
    margin: 8px 0;
    color: rgba(102, 51, 153, 0.45);
}
[data-app="mariage"] .mw-pro-sep__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
}
[data-app="mariage"] .mw-pro-sep__glyph {
    font-size: 1.1rem;
    color: #FF9900;
    opacity: 0.85;
    letter-spacing: 0;
}

/* ── Push Celebration Pro ── */
[data-app="mariage"] .mw-pro-upsell__inner {
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; gap: 22px;
    padding: 28px;
    background: linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 130%);
    color: #fff;
    border-radius: 20px;
    box-shadow: 0 14px 32px rgba(58, 79, 122, 0.22);
}
[data-app="mariage"] .mw-pro-upsell__logo-wrap {
    position: relative;
    flex-shrink: 0;
    width: 72px; height: 72px;
    display: flex; align-items: center; justify-content: center;
}
[data-app="mariage"] .mw-pro-upsell__halo {
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 153, 0, 0.45) 0%, rgba(102, 51, 153, 0.30) 50%, transparent 75%);
    filter: blur(8px);
    pointer-events: none;
}
@media (max-width: 767px) {
    [data-app="mariage"] .mw-pro-upsell__inner { flex-direction: column; align-items: flex-start; gap: 18px; }
}
[data-app="mariage"] .mw-pro-upsell__logo {
    position: relative;
    z-index: 1;
    width: 56px; height: 56px; border-radius: 50%;
    background: #fff; padding: 8px; flex-shrink: 0;
    object-fit: contain;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
[data-app="mariage"] .mw-pro-upsell__title,
[data-app="mariage"] .np-app-body .mw-pro-upsell__title {
    margin: 0 0 6px; font-size: 1.2rem; font-weight: 700; color: #fff;
}
[data-app="mariage"] .mw-pro-upsell__text {
    margin: 0 0 12px; color: rgba(255, 255, 255, 0.92); font-size: 0.95rem; line-height: 1.55;
}
[data-app="mariage"] .mw-pro-upsell__cta {
    display: inline-flex; align-items: center;
    color: #fff; text-decoration: none; font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    padding-bottom: 2px;
}
[data-app="mariage"] .mw-pro-upsell__cta:hover { color: #fff; border-bottom-color: #fff; }

/* ── CTA final centré ── */
[data-app="mariage"] .mw-pro-final { text-align: center; padding: 8px 0 0; }
[data-app="mariage"] .mw-pro-final__title,
[data-app="mariage"] .np-app-body .mw-pro-final__title {
    margin: 0 0 18px;
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    font-weight: 700;
    color: #2A1442;
}
[data-app="mariage"] .mw-pro-final .mw-pro-cta-primary {
    background: #663399; color: #fff;
}
[data-app="mariage"] .mw-pro-final .mw-pro-cta-primary:hover { background: #4A1F70; color: #fff; }

/* ── Fade-in scroll (réutilise welcome-page controller) ── */
[data-app="mariage"] [data-welcome-page-target="reveal"] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s var(--ease-out-soft, ease-out), transform 0.6s var(--ease-out-soft, ease-out);
}
[data-app="mariage"] [data-welcome-page-target="reveal"].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MARIAGE — Dashboard pro (mariage/_pro_dashboard.html.twig)
   Format A : carte "Prochain mariage" + grille compacte.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-app="mariage"] .mw-dash { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px); }

/* ── Carte "Prochain mariage" ── */
[data-app="mariage"] .mw-dash-next {
    position: relative;
    overflow: hidden;
    padding: clamp(22px, 3.5vw, 32px);
    border-radius: 22px;
    background:
        radial-gradient(60% 110% at 100% 100%, rgba(255, 153, 0, 0.55) 0%, transparent 60%),
        radial-gradient(50% 90% at 0% 0%, rgba(102, 51, 153, 0.40) 0%, transparent 55%),
        linear-gradient(135deg, rgba(102, 51, 153, 0.55) 0%, rgba(255, 153, 0, 0.45) 45%, rgba(255, 153, 0, 0.70) 100%),
        #663399;
    color: #fff;
    box-shadow: 0 14px 36px rgba(102, 51, 153, 0.26);
}
[data-app="mariage"] .mw-dash-next__head {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
    margin-bottom: 14px;
}
[data-app="mariage"] .mw-dash-next__eyebrow {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}
[data-app="mariage"] .mw-dash-next__eyebrow strong { color: #FFD089; }
[data-app="mariage"] .mw-dash-next__date {
    font-size: 0.95rem; font-weight: 600; color: rgba(255, 255, 255, 0.92);
    padding: 5px 12px; background: rgba(255, 255, 255, 0.16);
    border-radius: 999px; backdrop-filter: blur(4px);
}
[data-app="mariage"] .mw-dash-next__couple,
[data-app="mariage"] .np-app-body .mw-dash-next__couple {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(1.55rem, 3.4vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
}
[data-app="mariage"] .mw-dash-next__lieu {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.88);
    display: inline-flex; align-items: center; gap: 8px;
}
[data-app="mariage"] .mw-dash-next__lieu i { color: #FFD089; }

[data-app="mariage"] .mw-dash-next__progress {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;
    padding: 16px 18px;
    backdrop-filter: blur(4px);
    margin-bottom: 22px;
    display: flex; flex-direction: column; gap: 12px;
}
[data-app="mariage"] .mw-dash-next__progress-row {
    display: grid; grid-template-columns: 130px 1fr 50px;
    align-items: center; gap: 14px;
}
@media (max-width: 575px) {
    [data-app="mariage"] .mw-dash-next__progress-row { grid-template-columns: 1fr 50px; }
    [data-app="mariage"] .mw-dash-next__progress-label { grid-column: 1 / -1; margin-bottom: -4px; }
}
[data-app="mariage"] .mw-dash-next__progress-label { font-size: 0.85rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); }
[data-app="mariage"] .mw-dash-next__progress-val { font-size: 0.95rem; font-weight: 700; color: #fff; text-align: right; min-width: 50px; }
[data-app="mariage"] .mw-dash-next__progress .progress { height: 8px; background: rgba(255, 255, 255, 0.2); }
[data-app="mariage"] .mw-dash-next__progress .progress-bar { background: linear-gradient(90deg, #FFD089 0%, #FF9900 100%); }

[data-app="mariage"] .mw-dash-next__warning {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255, 196, 92, 0.18);
    border: 1px solid rgba(255, 196, 92, 0.42);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 22px;
    color: #fff;
}
[data-app="mariage"] .mw-dash-next__warning i { color: #FFD089; font-size: 1.2rem; flex-shrink: 0; }
[data-app="mariage"] .mw-dash-next__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

[data-app="mariage"] .mw-dash-cta-primary,
[data-app="mariage"] .np-app-body .btn.mw-dash-cta-primary {
    background: #fff; color: #663399;
    border: 0; font-weight: 700;
    padding: 11px 22px; border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
    transition: transform var(--dur-fast, .2s) var(--ease, ease),
                background var(--dur-fast, .2s) var(--ease, ease),
                color var(--dur-fast, .2s) var(--ease, ease);
}
[data-app="mariage"] .mw-dash-cta-primary:hover,
[data-app="mariage"] .np-app-body .btn.mw-dash-cta-primary:hover {
    background: #4A1F70; color: #fff; transform: translateY(-1px);
}
[data-app="mariage"] .mw-dash-next__all {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none; font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 2px;
}
[data-app="mariage"] .mw-dash-next__all:hover { color: #fff; border-color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   CALENDRIER INTERACTIF 2 COLONNES — _upcoming_celebrations_calendar.html.twig
   Partagé entre les 3 apps. La couleur d'accent (jour sélectionné, cell--event,
   heure de l'event) s'adapte au data-app.
   ═══════════════════════════════════════════════════════════════════════════ */

.cal-split { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .cal-split { grid-template-columns: 1fr 1fr; gap: 32px; } }

/* Gauche : nav mois + grille */
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cal-nav__btn { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.cal-month {
    font-weight: 700; font-size: 1.05rem; text-transform: capitalize;
    color: var(--text, #1f2540); letter-spacing: -0.01em;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
    color: var(--text-muted, rgba(31, 37, 64, 0.55));
    text-align: center; padding: 4px 0;
    text-transform: uppercase;
}
.cal-cell {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1 / 1;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text, #1f2540);
    font-weight: 500; font-size: 0.92rem;
    cursor: pointer;
    transition: background var(--dur-fast, .15s) var(--ease, ease),
                border-color var(--dur-fast, .15s) var(--ease, ease),
                color var(--dur-fast, .15s) var(--ease, ease);
    padding: 0;
}
.cal-cell:hover { background: rgba(0, 0, 0, 0.05); }
.cal-cell--empty { cursor: default; pointer-events: none; }
.cal-cell--today { border-color: rgba(0, 0, 0, 0.20); font-weight: 700; }
.cal-cell--event {
    background: color-mix(in srgb, var(--brand, #663399) 16%, transparent);
    color: var(--brand, #663399);
    font-weight: 700;
}
.cal-cell--event:hover {
    background: color-mix(in srgb, var(--brand, #663399) 26%, transparent);
}
.cal-cell--selected {
    background: var(--brand, #663399); color: #fff; border-color: var(--brand, #663399);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--brand, #663399) 35%, transparent);
}
.cal-cell--selected:hover { background: var(--brand-700, #4A1F70); }
.cal-cell--selected.cal-cell--event { color: #fff; }
/* Dot conservé pour les jours avec plusieurs cérémonies (futur usage) */
.cal-dot { display: none; }

/* Droite : détail jour */
.cal-detail {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 14px;
    padding: 18px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}
.cal-detail__head {
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-muted, rgba(31, 37, 64, 0.55));
    margin-bottom: 12px;
}
.cal-detail__empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    height: 100%; min-height: 180px;
    color: var(--text-muted, rgba(31, 37, 64, 0.55));
    text-align: center;
}
/* Calendrier vide : invite à créer une cérémonie, sur un fond tramé de marque. */
.cal-detail--cta {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-4);
    background:
        radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 55%),
        radial-gradient(circle at 82% 82%, color-mix(in srgb, var(--secondary) 16%, transparent), transparent 55%),
        color-mix(in srgb, var(--brand) 4%, var(--surface, #fff));
    border: 1px dashed color-mix(in srgb, var(--brand) 30%, transparent);
}
.cal-detail__cta-icon { font-size: 2.2rem; color: var(--brand); opacity: 0.9; }
.cal-detail__cta-text { display: flex; flex-direction: column; gap: 4px; }
.cal-detail__cta-text strong { font-size: 0.98rem; color: var(--text, #1f2540); }
.cal-detail__cta-text span { font-size: 0.86rem; color: var(--text-muted, rgba(31, 37, 64, 0.6)); }
.cal-detail__empty i { font-size: 2rem; opacity: 0.55; }
.cal-detail__empty strong { font-size: 0.9rem; color: var(--text, #1f2540); text-transform: capitalize; }
.cal-detail__empty span { font-size: 0.86rem; }
/* Plusieurs célébrations le même jour : on borne la liste avec un défilement
   interne pour que la hauteur du calendrier reste calée sur sa grille mensuelle.
   Sinon la rangée s'allonge et déséquilibre la colonne latérale du dashboard. */
.cal-detail__list {
    display: flex; flex-direction: column; gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 24rem;
    overflow-y: auto;
    margin-right: -6px;
    padding-right: 6px;
}
.cal-event {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    text-decoration: none; color: inherit;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: transform var(--dur-fast, .15s) var(--ease, ease),
                box-shadow var(--dur-fast, .15s) var(--ease, ease),
                border-color var(--dur-fast, .15s) var(--ease, ease);
}
.cal-event:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.16);
    color: inherit;
}
.cal-event__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cal-event__head-left { display: inline-flex; align-items: center; gap: 10px; }
.cal-event__time {
    font-weight: 800;
    color: var(--brand, #663399);
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}
.cal-event__badge {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
    background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.55);
    padding: 3px 9px; border-radius: 999px;
    text-transform: uppercase;
}
.cal-event__badge--soon { background: rgba(255, 153, 0, 0.14); color: #B86600; }
[data-app="adieu"] .cal-event__badge--soon { background: rgba(180, 150, 100, 0.18); color: #6B4F2A; }
[data-app="gestion"] .cal-event__badge--soon { background: rgba(100, 127, 84, 0.16); color: #4F6342; }
.cal-event__badge--past { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.40); }
.cal-event__arrow {
    color: var(--text-muted, rgba(31, 37, 64, 0.35));
    font-size: 1.05rem;
    transition: color var(--dur-fast, .15s) var(--ease, ease), transform var(--dur-fast, .15s) var(--ease, ease);
}
.cal-event:hover .cal-event__arrow { color: var(--brand, #663399); transform: translate(2px, -2px); }
.cal-event__title {
    font-weight: 700;
    color: var(--text, #1f2540);
    font-size: 1.05rem;
    line-height: 1.25;
}
.cal-event__lieu {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.85rem;
    color: var(--text-muted, rgba(31, 37, 64, 0.62));
}
.cal-event__lieu i { color: var(--brand, #663399); opacity: 0.7; }

.cal-event__progress {
    margin-top: 4px;
    display: flex; flex-direction: column; gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.cal-event__progress-row {
    display: grid; grid-template-columns: 100px 1fr 40px;
    align-items: center; gap: 10px;
}
.cal-event__progress-label {
    font-size: 0.78rem; font-weight: 600;
    color: var(--text-muted, rgba(31, 37, 64, 0.62));
}
.cal-event__progress-val {
    font-size: 0.8rem; font-weight: 700;
    color: var(--brand, #663399);
    text-align: right;
}
.cal-event__bar {
    height: 6px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    overflow: hidden;
}
.cal-event__bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand, #663399) 0%, #FF9900 100%);
    border-radius: 999px;
    transition: width 0.4s var(--ease, ease);
}
[data-app="adieu"] .cal-event__bar-fill { background: linear-gradient(90deg, var(--brand, #1E3A5F) 0%, #6B8AA8 100%); }
[data-app="gestion"] .cal-event__bar-fill { background: linear-gradient(90deg, var(--brand, #193141) 0%, #647F54 100%); }

.cal-event__warn {
    margin-top: 4px;
    padding: 8px 12px;
    background: rgba(184, 102, 0, 0.10);
    border: 1px solid rgba(184, 102, 0, 0.22);
    border-radius: 10px;
    font-size: 0.82rem;
    color: #8A4F00;
    display: inline-flex; align-items: center; gap: 8px;
}
.cal-event__warn i { font-size: 0.95rem; }
.cal-event__warn--soft {
    margin-top: 6px;
    background: rgba(184, 102, 0, 0.07);
    border-style: dashed;
    font-size: 0.78rem;
    padding: 5px 10px;
}

/* Carte calendrier + CTA contextuel (préparer le déroulé / exporter le livret). */
.cal-event-wrap { display: flex; flex-direction: column; gap: 6px; }
.cal-event__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--brand, #663399);
    color: #fff !important;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.15s ease;
}
.cal-event__cta:hover { filter: brightness(1.08); color: #fff !important; }

/* Accent par app */
[data-app="adieu"] .cal-cell--event { color: var(--brand, #1E3A5F); }
[data-app="adieu"] .cal-cell--selected { background: var(--brand, #1E3A5F); border-color: var(--brand, #1E3A5F); }
[data-app="adieu"] .cal-event__time { color: var(--brand, #1E3A5F); }
[data-app="gestion"] .cal-cell--event { color: var(--brand, #193141); }
[data-app="gestion"] .cal-cell--selected { background: var(--brand, #193141); border-color: var(--brand, #193141); }
[data-app="gestion"] .cal-event__time { color: var(--brand, #193141); }

/* Jour sélectionné ET avec événement : le chiffre doit rester blanc sur le fond
   plein (sinon la règle .cal-cell--event par app le repasse en couleur sombre). */
[data-app="adieu"] .cal-cell--selected.cal-cell--event,
[data-app="gestion"] .cal-cell--selected.cal-cell--event { color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   MARIAGE — Rejoindre un collectif/paroisse (mariage/join/*.html.twig)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-app="mariage"] .mw-join {
    background: #fff;
    border: 1px solid rgba(102, 51, 153, 0.14);
    border-radius: 22px;
    padding: clamp(28px, 4vw, 40px);
    box-shadow: 0 14px 36px rgba(102, 51, 153, 0.08);
}
[data-app="mariage"] .mw-join__head { margin-bottom: 22px; }
[data-app="mariage"] .mw-join__eyebrow {
    display: inline-block;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: #663399;
    background: rgba(102, 51, 153, 0.10);
    padding: 4px 12px; border-radius: 999px;
    margin-bottom: 14px;
}
[data-app="mariage"] .mw-join__title,
[data-app="mariage"] .np-app-body .mw-join__title {
    margin: 0 0 10px;
    font-size: clamp(1.4rem, 2.8vw, 1.85rem);
    font-weight: 700;
    color: #2A1442;
    letter-spacing: -0.01em;
}
[data-app="mariage"] .mw-join__lead {
    margin: 0;
    color: rgba(42, 20, 66, 0.72);
    line-height: 1.55;
}
[data-app="mariage"] .mw-join__form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
[data-app="mariage"] .mw-join__label {
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(42, 20, 66, 0.62);
}
[data-app="mariage"] .mw-join__input,
[data-app="mariage"] .np-app-body .mw-join__input {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
    padding: 18px 16px;
    border: 2px solid rgba(102, 51, 153, 0.25);
    border-radius: 14px;
    background: rgba(102, 51, 153, 0.04);
    color: #663399;
    transition: border-color var(--dur-fast, .2s) var(--ease, ease), background var(--dur-fast, .2s) var(--ease, ease);
}
[data-app="mariage"] .mw-join__input:focus,
[data-app="mariage"] .np-app-body .mw-join__input:focus {
    outline: none;
    border-color: #663399;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(102, 51, 153, 0.15);
}
[data-app="mariage"] .mw-join__input--error {
    border-color: #B86600;
    background: rgba(184, 102, 0, 0.05);
    color: #8A4F00;
}
[data-app="mariage"] .mw-join__error {
    margin: 0;
    display: inline-flex; align-items: center; gap: 8px;
    color: #8A4F00;
    font-size: 0.9rem;
}
[data-app="mariage"] .mw-join__error i { color: #B86600; }
[data-app="mariage"] .mw-join__hint {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(42, 20, 66, 0.6);
    line-height: 1.5;
}
[data-app="mariage"] .mw-join__cta { align-self: flex-start; margin-top: 6px; }

[data-app="mariage"] .mw-join__divider {
    display: flex; align-items: center;
    margin: 18px 0;
    color: rgba(42, 20, 66, 0.4);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
[data-app="mariage"] .mw-join__divider::before,
[data-app="mariage"] .mw-join__divider::after {
    content: ""; flex: 1; height: 1px;
    background: rgba(42, 20, 66, 0.1);
}
[data-app="mariage"] .mw-join__divider span { padding: 0 14px; }
[data-app="mariage"] .mw-join__alt {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 16px 18px;
    background: rgba(255, 153, 0, 0.08);
    border: 1px solid rgba(255, 153, 0, 0.22);
    border-radius: 14px;
}
[data-app="mariage"] .mw-join__alt i {
    color: #FF9900; font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 2px;
}
[data-app="mariage"] .mw-join__alt strong { display: block; color: #2A1442; margin-bottom: 2px; }
[data-app="mariage"] .mw-join__alt span { color: rgba(42, 20, 66, 0.72); font-size: 0.9rem; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════════════════
   REJOINDRE PAR CODE — _shared/_join_by_code_form.html.twig
   Version neutre (tokens) partagée par toutes les apps ; se thème via --brand.
   ═══════════════════════════════════════════════════════════════════════════ */
.join-code { padding: clamp(28px, 4vw, 40px); }
.np-join-code-block__form { max-width: 460px; }
.join-code__form { display: flex; flex-direction: column; gap: var(--space-3); margin: 0 0 24px; }
.join-code__form .form-label {
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-subtle);
}
.join-code__input,
.np-app-body .join-code__input {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
    padding: 18px 16px;
    border: 2px solid color-mix(in srgb, var(--brand) 25%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--brand) 4%, var(--surface));
    color: var(--brand);
}
.join-code__input::placeholder { color: color-mix(in srgb, var(--brand) 35%, transparent); }
.np-app-body .join-code__input:focus {
    border-color: var(--brand);
    background: var(--surface);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 15%, transparent);
}
.join-code__error {
    margin: 0;
    display: flex; align-items: center;
    color: var(--danger);
    font-size: 0.9rem; font-weight: 600;
}
.join-code__hint { margin: 0; }
.join-code__cta { align-self: flex-start; margin-top: 6px; }
.join-code__divider {
    display: flex; align-items: center;
    color: var(--text-subtle);
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em;
    margin: 24px 0;
}
.join-code__divider::before,
.join-code__divider::after {
    content: ""; flex: 1; height: 1px; background: var(--border);
}
.join-code__divider span { padding: 0 14px; }
.join-code__alt {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 16px 18px;
    background: var(--warning-bg);
    border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
    border-radius: var(--radius-lg);
}
.join-code__alt i { color: var(--warning); font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.join-code__alt strong { display: block; color: var(--text); margin-bottom: 2px; }
.join-code__alt span { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }

/* ── Variante welcome ── */
[data-app="mariage"] .mw-join--welcome { text-align: center; }
[data-app="mariage"] .mw-join__check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #663399 0%, #FF9900 100%);
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 18px;
    box-shadow: 0 10px 26px rgba(102, 51, 153, 0.28);
}
[data-app="mariage"] .mw-join--welcome em { font-style: normal; color: #663399; }
[data-app="mariage"] .mw-join__bullets {
    list-style: none; margin: 22px 0; padding: 0;
    display: flex; flex-direction: column; gap: 14px;
    text-align: left;
}
[data-app="mariage"] .mw-join__bullets li {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 16px;
    background: rgba(102, 51, 153, 0.05);
    border-radius: 12px;
    color: rgba(42, 20, 66, 0.85);
    line-height: 1.5;
}
[data-app="mariage"] .mw-join__bullets li i {
    color: #663399; font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 2px;
}
[data-app="mariage"] .mw-join__bullets li strong { color: #2A1442; }
[data-app="mariage"] .mw-join__actions {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px;
    margin-top: 24px;
}
[data-app="mariage"] .mw-join__back {
    color: rgba(42, 20, 66, 0.62);
    text-decoration: none; font-weight: 600;
    border-bottom: 1px solid transparent;
}
[data-app="mariage"] .mw-join__back:hover { color: #663399; border-color: #663399; }

/* ═══════════════════════════════════════════════════════════════════════════
   MARIAGE — Page collectif/paroisse côté musicien (vue membre)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-app="mariage"] .mw-group__head {
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(102, 51, 153, 0.12);
}
[data-app="mariage"] .mw-group__eyebrow {
    display: inline-block;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: #663399;
    margin-bottom: 8px;
}
[data-app="mariage"] .mw-group__title,
[data-app="mariage"] .np-app-body .mw-group__title {
    margin: 0 0 10px;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: #2A1442;
    letter-spacing: -0.01em;
}
[data-app="mariage"] .mw-group__desc {
    margin: 0;
    color: rgba(42, 20, 66, 0.72);
    display: inline-flex; align-items: center; gap: 8px;
}
[data-app="mariage"] .mw-group__desc i { color: #FF9900; }
[data-app="mariage"] .mw-group__section { margin-bottom: 32px; }
[data-app="mariage"] .mw-group__section-title,
[data-app="mariage"] .np-app-body .mw-group__section-title {
    margin: 0 0 16px;
    font-size: 1.05rem; font-weight: 700;
    color: #2A1442;
    display: inline-flex; align-items: baseline; gap: 10px;
}
[data-app="mariage"] .mw-group__count {
    font-size: 0.82rem; font-weight: 500;
    color: rgba(42, 20, 66, 0.5);
    background: rgba(102, 51, 153, 0.08);
    padding: 2px 9px; border-radius: 999px;
}
[data-app="mariage"] .mw-group__members {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: 10px;
}
@media (min-width: 576px) { [data-app="mariage"] .mw-group__members { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { [data-app="mariage"] .mw-group__members { grid-template-columns: repeat(3, 1fr); } }
[data-app="mariage"] .mw-group__member {
    display: flex; gap: 12px; align-items: center;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid rgba(102, 51, 153, 0.10);
    border-radius: 14px;
    transition: border-color var(--dur-fast, .2s) var(--ease, ease);
}
[data-app="mariage"] .mw-group__member--me {
    background: linear-gradient(135deg, rgba(102, 51, 153, 0.06) 0%, rgba(255, 153, 0, 0.06) 100%);
    border-color: rgba(102, 51, 153, 0.25);
}
[data-app="mariage"] .mw-group__avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(102, 51, 153, 0.12);
    color: #663399;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
[data-app="mariage"] .mw-group__avatar img { width: 100%; height: 100%; object-fit: cover; }
[data-app="mariage"] .mw-group__member-body { min-width: 0; }
[data-app="mariage"] .mw-group__member-name {
    font-weight: 700; color: #2A1442;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-app="mariage"] .mw-group__me-tag {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: #663399;
    background: rgba(102, 51, 153, 0.12);
    padding: 1px 7px; border-radius: 999px;
    vertical-align: middle;
}
[data-app="mariage"] .mw-group__member-role {
    font-size: 0.82rem;
    color: rgba(42, 20, 66, 0.6);
}
[data-app="mariage"] .mw-group__repertoire {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: 8px;
}
@media (min-width: 576px) { [data-app="mariage"] .mw-group__repertoire { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { [data-app="mariage"] .mw-group__repertoire { grid-template-columns: repeat(3, 1fr); } }
[data-app="mariage"] .mw-group__repertoire li {
    display: flex; gap: 10px; align-items: center;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid rgba(102, 51, 153, 0.08);
    border-radius: 10px;
    color: #2A1442;
    font-size: 0.9rem;
}
[data-app="mariage"] .mw-group__repertoire li i { color: #FF9900; flex-shrink: 0; }
[data-app="mariage"] .mw-group__empty { color: rgba(42, 20, 66, 0.55); font-style: italic; }
[data-app="mariage"] .mw-group__more { margin-top: 12px; font-size: 0.85rem; color: rgba(42, 20, 66, 0.6); }

/* Documents partagés sur la page collectif (lecture) */
[data-app="mariage"] .mw-group__documents { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
[data-app="mariage"] .mw-group__document {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid rgba(102, 51, 153, 0.10);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--dur-fast, .2s) var(--ease, ease), box-shadow var(--dur-fast, .2s) var(--ease, ease);
}
[data-app="mariage"] .mw-group__document:hover {
    border-color: rgba(102, 51, 153, 0.30);
    box-shadow: 0 4px 12px rgba(102, 51, 153, 0.08);
    color: inherit;
}
[data-app="mariage"] .mw-group__document-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(255, 153, 0, 0.12);
    color: #B86600;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
[data-app="mariage"] .mw-group__document-body { flex: 1; min-width: 0; }
[data-app="mariage"] .mw-group__document-title { display: block; font-weight: 600; color: #2A1442; }
[data-app="mariage"] .mw-group__document-meta { display: block; font-size: 0.78rem; color: rgba(42, 20, 66, 0.55); }
[data-app="mariage"] .mw-group__document-open { color: rgba(42, 20, 66, 0.45); flex-shrink: 0; }

/* Badge "Votre rôle dans ce collectif" en hero de la page collectif */
[data-app="mariage"] .mw-group__role-badge {
    display: inline-flex; align-items: flex-start; gap: 10px;
    margin: 0 0 12px;
    padding: 10px 16px;
    border-radius: 14px;
    font-size: 0.88rem;
    color: rgba(31, 37, 64, 0.85);
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
}
[data-app="mariage"] .mw-group__role-badge-icon {
    display: inline-flex; align-items: center; flex-shrink: 0;
    height: 1.4em; /* cale l'icône sur la hauteur de la 1ʳᵉ ligne */
}
[data-app="mariage"] .mw-group__role-badge i { font-size: 1rem; }
[data-app="mariage"] .mw-group__role-badge-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[data-app="mariage"] .mw-group__role-badge-label { line-height: 1.4; }
[data-app="mariage"] .mw-group__role-badge strong { color: #2A1442; }
[data-app="mariage"] .mw-group__role-badge--gestionnaire { background: rgba(102, 51, 153, 0.10); border-color: rgba(102, 51, 153, 0.22); }
[data-app="mariage"] .mw-group__role-badge--gestionnaire i { color: #663399; }
[data-app="mariage"] .mw-group__role-badge--contributor { background: rgba(255, 153, 0, 0.10); border-color: rgba(255, 153, 0, 0.28); }
[data-app="mariage"] .mw-group__role-badge--contributor i { color: #B86600; }
[data-app="mariage"] .mw-group__role-badge--membre i { color: rgba(0, 0, 0, 0.50); }
[data-app="mariage"] .mw-group__role-badge-note {
    font-size: 0.82rem; color: rgba(31, 37, 64, 0.62); font-weight: 400;
    line-height: 1.4;
}

/* Variantes du label de rôle sur les cartes membres */
[data-app="mariage"] .mw-group__member-role { display: inline-flex; align-items: center; gap: 6px; }
[data-app="mariage"] .mw-group__member-role i { font-size: 0.9em; flex-shrink: 0; }
[data-app="mariage"] .mw-group__member-role--gestionnaire { color: #663399; font-weight: 700; }
[data-app="mariage"] .mw-group__member-role--gestionnaire i { color: #663399; }
[data-app="mariage"] .mw-group__member-role--contributor { color: #B86600; font-weight: 600; }
[data-app="mariage"] .mw-group__member-role--contributor i { color: #FF9900; }

/* CTA d'accès au répertoire partagé (remplace la liste statique) */
[data-app="mariage"] .mw-group__repertoire-cta {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid rgba(102, 51, 153, 0.14);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 12px rgba(102, 51, 153, 0.05);
    transition: transform var(--dur-fast, .2s) var(--ease, ease),
                box-shadow var(--dur-fast, .2s) var(--ease, ease),
                border-color var(--dur-fast, .2s) var(--ease, ease);
}
[data-app="mariage"] .mw-group__repertoire-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(102, 51, 153, 0.12);
    border-color: rgba(102, 51, 153, 0.30);
    color: inherit;
}
[data-app="mariage"] .mw-group__repertoire-cta-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(102, 51, 153, 0.12) 0%, rgba(255, 153, 0, 0.12) 100%);
    color: #663399;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
[data-app="mariage"] .mw-group__repertoire-cta-body { flex: 1; min-width: 0; }
[data-app="mariage"] .mw-group__repertoire-cta-body strong { display: block; color: #2A1442; font-size: 1rem; }
[data-app="mariage"] .mw-group__repertoire-cta-body span { display: block; font-size: 0.85rem; color: rgba(42, 20, 66, 0.65); }
[data-app="mariage"] .mw-group__repertoire-cta-arrow { color: rgba(42, 20, 66, 0.40); flex-shrink: 0; font-size: 1.1rem; }
[data-app="mariage"] .mw-group__leave { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(102, 51, 153, 0.12); }
[data-app="mariage"] .mw-group__leave-btn {
    background: transparent;
    border: 1px solid rgba(184, 102, 0, 0.40);
    color: #B86600;
    font-weight: 600;
    padding: 8px 16px; border-radius: 999px;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background var(--dur-fast, .2s) var(--ease, ease), color var(--dur-fast, .2s) var(--ease, ease);
}
[data-app="mariage"] .mw-group__leave-btn:hover {
    background: rgba(184, 102, 0, 0.10);
    color: #8A4F00;
}

/* Encart upsell Pro en pied de page collectif/paroisse */
[data-app="mariage"] .mw-group__upsell {
    margin: 32px 0;
}
[data-app="mariage"] .mw-group__upsell-inner {
    display: flex; gap: 22px; align-items: center;
    padding: 24px 26px;
    background: linear-gradient(125deg, #3A4F7A 0%, #4C679D 60%, #647F54 130%);
    color: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(58, 79, 122, 0.20);
}
@media (max-width: 767px) {
    [data-app="mariage"] .mw-group__upsell-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
}
[data-app="mariage"] .mw-group__upsell-icon {
    flex-shrink: 0;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #fff;
    padding: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
[data-app="mariage"] .mw-group__upsell-icon img {
    width: 100%; height: 100%; object-fit: contain;
}
[data-app="mariage"] .mw-group__upsell-title,
[data-app="mariage"] .np-app-body .mw-group__upsell-title {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}
[data-app="mariage"] .mw-group__upsell-text {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.95rem;
    line-height: 1.55;
}
[data-app="mariage"] .mw-group__upsell-text strong { color: #FFD089; font-weight: 700; }
[data-app="mariage"] .mw-group__upsell-cta {
    display: inline-flex; align-items: center;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    padding-bottom: 2px;
}
[data-app="mariage"] .mw-group__upsell-cta:hover { border-bottom-color: #fff; color: #fff; }

/* Bloc "Rejoindre un collectif" — apparaît sur welcome_pro si pas membre */
[data-app="mariage"] .mw-pro-join__inner {
    display: flex; gap: 22px; align-items: center;
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(102, 51, 153, 0.06) 0%, rgba(255, 153, 0, 0.06) 100%);
    border: 1px solid rgba(102, 51, 153, 0.18);
    border-radius: 20px;
}
@media (max-width: 575px) {
    [data-app="mariage"] .mw-pro-join__inner { flex-direction: column; align-items: flex-start; }
}
[data-app="mariage"] .mw-pro-join__icon {
    flex-shrink: 0;
    width: 56px; height: 56px; border-radius: 16px;
    background: linear-gradient(135deg, #663399 0%, #FF9900 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 8px 22px rgba(102, 51, 153, 0.22);
}
[data-app="mariage"] .mw-pro-join__title,
[data-app="mariage"] .np-app-body .mw-pro-join__title {
    margin: 0 0 6px;
    font-size: 1.15rem; font-weight: 700; color: #2A1442;
}
[data-app="mariage"] .mw-pro-join__text { margin: 0 0 12px; color: rgba(42, 20, 66, 0.78); line-height: 1.55; font-size: 0.94rem; }
[data-app="mariage"] .mw-pro-join__text strong { color: #663399; font-weight: 700; }
[data-app="mariage"] .mw-pro-join__cta {
    display: inline-flex; align-items: center;
    color: #663399;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
[data-app="mariage"] .mw-pro-join__cta:hover { color: #4A1F70; border-bottom-color: #4A1F70; }

/* ═══════════════════════════════════════════════════════════════════════════
   GESTION — Code de jointure côté chef de collectif/paroisse
   ═══════════════════════════════════════════════════════════════════════════ */
.cp-join-code {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    margin: 18px 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-left: 4px solid var(--brand, #4C679D);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
.cp-join-code__info { flex: 1 1 280px; min-width: 0; }
.cp-join-code__title { margin: 0 0 4px; font-size: 0.95rem; font-weight: 700; color: var(--text, #1f2540); }
.cp-join-code__desc { margin: 0; font-size: 0.84rem; color: var(--text-muted, rgba(31, 37, 64, 0.62)); line-height: 1.4; }
.cp-join-code__display {
    display: inline-flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
}
.cp-join-code__value {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.05rem; font-weight: 700; letter-spacing: 0.08em;
    color: var(--brand, #4C679D);
    background: color-mix(in srgb, var(--brand, #4C679D) 8%, transparent);
    border: 1px dashed color-mix(in srgb, var(--brand, #4C679D) 35%, transparent);
    padding: 8px 14px; border-radius: 10px;
}
.cp-join-code__missing { font-size: 0.88rem; color: var(--text-muted, rgba(31, 37, 64, 0.62)); font-style: italic; }

/* Lien d'invitation + QR code partagés à côté du code de jointure */
.cp-join-code__share { flex: 1 1 100%; margin-top: 4px; }
.cp-join-code__share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cp-join-code__link {
    display: inline-flex; align-items: center;
    font-size: 0.86rem; font-weight: 600;
    text-decoration: none;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-join-code__qr {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    margin-top: 14px; padding-top: 14px;
    border-top: 1px dashed var(--border, rgba(0, 0, 0, 0.12));
}
.cp-join-code__qr-img {
    background: #fff; padding: 10px; border-radius: 12px;
    border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
    line-height: 0;
}
.cp-join-code__qr-img .qrcode__img { width: 200px; height: 200px; image-rendering: pixelated; }
.cp-join-code__qr-hint { margin: 0; font-size: 0.8rem; color: var(--text-muted, rgba(31, 37, 64, 0.62)); }

/* Écran d'onboarding « rejoindre par lien d'invitation » (NMDM) */
.mw-onboard { padding: clamp(20px, 4vw, 36px); }
.mw-onboard__hero { margin-bottom: var(--space-4, 1rem); }
.mw-onboard__choices { margin-top: var(--space-2, 0.5rem); }
.mw-onboard__alt { margin-top: var(--space-4, 1rem); }
.mw-onboard__actions { margin-top: var(--space-5, 1.25rem); }
.mw-onboard__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; margin: 0 auto var(--space-3, 0.75rem);
    border-radius: 999px; font-size: 1.8rem;
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    color: var(--brand);
}
.mw-onboard__icon--warn {
    background: var(--warning-bg, #fff4e0);
    color: var(--warning, #b8860b);
}
.mw-onboard__title { font-family: var(--font-display); margin-bottom: var(--space-2, 0.5rem); }
.mw-onboard__lead { color: var(--text-muted); margin-bottom: var(--space-4, 1rem); }

/* Toast flash clipboard */
.clipboard-flash {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 20;
}
.clipboard-flash.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   NOTIFICATIONS — cloche + dropdown (partagé 3 apps)
   ============================================================ */
.np-notif__menu {
    width: 360px;
    max-width: calc(100vw - var(--space-6));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.np-notif__header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.np-notif__list {
    max-height: 380px;
    overflow-y: auto;
}
.np-notif-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.np-notif-item:last-child {
    border-bottom: 0;
}
.np-notif-item--unread {
    background: var(--brand-50);
}
.np-notif-item__body {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    color: var(--text);
}
.np-notif-item__body:hover {
    color: var(--text);
}
.np-notif-item__body > .bi {
    font-size: 1.05rem;
    line-height: 1.4;
    flex: 0 0 auto;
}
.np-notif-item__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.np-notif-item__message {
    font-size: var(--fs-14);
    line-height: var(--lh-base);
    color: var(--text);
}
.np-notif-item__time {
    font-size: var(--fs-12);
    color: var(--text-subtle);
    margin-top: 2px;
}
.np-notif-item__actions {
    display: flex;
    gap: var(--space-2);
    flex: 1 0 100%;
    padding-left: calc(1.05rem + var(--space-2));
}
.np-notif__footer {
    border-top: 1px solid var(--border);
    font-size: var(--fs-14);
    padding: var(--space-3);
}
.np-notif-flash {
    position: fixed;
    bottom: var(--space-5);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-lightbox);
    box-shadow: var(--shadow-lg);
    margin: 0;
}

/* ============================================================
   DEEP-LINK — mise en valeur de la cible d'une notification
   ============================================================ */
@keyframes npHighlightPulse {
    0%   { box-shadow: 0 0 0 0 var(--brand-100, rgba(102, 51, 153, .35)); }
    30%  { box-shadow: 0 0 0 4px var(--brand-100, rgba(102, 51, 153, .35)); }
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}
.np-highlight-pulse {
    animation: npHighlightPulse 1.2s var(--ease-out-soft, ease-out) 0s 2;
    border-radius: var(--radius-md, 8px);
    outline: 2px solid var(--brand, #663399);
    outline-offset: 2px;
    transition: outline-color var(--dur-slow, .4s) var(--ease, ease);
    scroll-margin-top: 90px;
}

/* ============================================================================
   ANNONCES POST-MISE À JOUR — corps Markdown (pop-up + aperçu admin)
   ========================================================================== */
.np-announcement-body { font-size: var(--fs-15, 0.95rem); line-height: var(--lh-base, 1.6); color: var(--text); }
.np-announcement-body > :first-child { margin-top: 0; }
.np-announcement-body > :last-child { margin-bottom: 0; }
/* Titres modestes : pas de Fraunces géant dans une modale — on reste sur la
   stack body, en gras, à une échelle proche du corps de texte. */
.np-announcement-body h1,
.np-announcement-body h2,
.np-announcement-body h3,
.np-announcement-body h4 {
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: var(--lh-tight, 1.25);
    margin: var(--space-4) 0 var(--space-2);
}
.np-announcement-body h1 { font-size: 1.15rem; }
.np-announcement-body h2 { font-size: 1.05rem; }
.np-announcement-body h3,
.np-announcement-body h4 { font-size: 1rem; }
.np-announcement-body p { margin-bottom: var(--space-3); }
.np-announcement-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.np-announcement-body a { color: var(--brand); text-decoration: underline; }
.np-announcement-body ul,
.np-announcement-body ol { padding-left: var(--space-5); margin-bottom: var(--space-3); }
.np-announcement-body li { margin-bottom: var(--space-1); }
.np-announcement-body blockquote {
    border-left: 3px solid var(--border-strong, var(--border));
    padding-left: var(--space-3);
    color: var(--text-muted);
    margin: var(--space-3) 0;
}