/*
 * ppz-composants@1.0.0.css — regles autrefois posees dans le CORPS du document.
 *
 * Un <style> dans <body> invalide la page : c'etait la premiere cause d'erreur
 * du site, de tres loin. Aucune de ces regles n'affectait la restitution, mais
 * la validite du code est un critere a part entiere — et elles n'avaient de
 * toute facon rien a faire la.
 *
 * Cette feuille est chargee EN DERNIER dans l'en-tete, afin que ces regles
 * gardent exactement le rang qu'elles avaient dans la cascade.
 */
/* ───────── ppz-skip-link ───────── */
/* Fond/texte/encre par jetons avec replis clairs : en thème sombre, le remap
   des variables (--ppz-n900/--ppz-white) inverse automatiquement — fini le
   flash blanc au focus clavier dans l'onboarding (constat 08/10/2026). Le bleu
   #103b9a hors palette a disparu : encre = surface du thème. */
.ppz-skip-link{position:absolute;top:0;left:0;z-index:10000;padding:12px 20px;
background:var(--ppz-n900,#111827);color:var(--ppz-white,#ffffff);font-weight:600;text-decoration:underline;
border:2px solid var(--ppz-n900,#111827);border-radius:0 0 4px 0;transform:translateY(-120%);
transition:transform .15s ease-out}
.ppz-skip-link:focus,.ppz-skip-link:focus-visible{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.ppz-skip-link{transition:none}}

/* ───────── ppz-sidebar__overlay ───────── */
/* Overlay */
.ppz-sidebar__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    cursor: pointer;
}

/* Sidebar */
.ppz-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    background: var(--ppz-bg-surface);
    border-right: 1px solid var(--ppz-border-default);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s;
}

.ppz-sidebar--left {
    left: 0;
}

.ppz-sidebar--right {
    right: 0;
    border-right: none;
    border-left: 1px solid var(--ppz-border-default);
}

/* Widths */
.ppz-sidebar--sm {
    width: var(--ppz-sidebar-width-sm, 220px);
}

.ppz-sidebar--md {
    width: var(--ppz-sidebar-width-md, 280px);
}

.ppz-sidebar--lg {
    width: var(--ppz-sidebar-width-lg, 300px);
}

/* Collapsed */
.ppz-sidebar--collapsed {
    transform: translateX(-100%);
}

.ppz-sidebar--right.ppz-sidebar--collapsed {
    transform: translateX(100%);
}

/* Variants */
.ppz-sidebar--dark {
    background: var(--ppz-color-neutral-900);
    border-color: var(--ppz-color-neutral-800);
}

/* Header */
.ppz-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ppz-space-3) var(--ppz-space-4);
    border-bottom: 1px solid var(--ppz-border-default);
}

.ppz-sidebar--dark .ppz-sidebar__header {
    border-bottom-color: var(--ppz-color-neutral-800);
}

.ppz-sidebar__title {
    margin: 0;
    font-size: var(--ppz-font-size-lg);
    font-weight: var(--ppz-font-weight-semibold);
    color: var(--ppz-text-primary);
}

.ppz-sidebar--dark .ppz-sidebar__title {
    color: #ffffff;
}

.ppz-sidebar__close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--ppz-radius-md);
    color: var(--ppz-text-secondary);
    cursor: pointer;
    transition: background-color 0.2s;
}

.ppz-sidebar__close:hover {
    background: var(--ppz-bg-subtle);
}

.ppz-sidebar__manual-toggle-row {
    display: none;
    padding: var(--ppz-space-2) var(--ppz-space-3) 0;
}

.ppz-sidebar__manual-toggle {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    gap: var(--ppz-space-1-5);
    height: 32px;
    padding: 0 var(--ppz-space-2);
    border: 1px solid var(--ppz-border-default);
    border-radius: var(--ppz-radius-full);
    background: var(--ppz-bg-surface);
    color: var(--ppz-text-secondary);
    box-shadow: var(--ppz-shadow-sm);
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, padding 0.2s, gap 0.2s;
}

.ppz-sidebar__manual-toggle:hover {
    background: var(--ppz-bg-subtle);
    color: var(--ppz-text-primary);
}

.ppz-sidebar__manual-toggle-label {
    font-size: var(--ppz-font-size-xs);
    font-weight: var(--ppz-font-weight-semibold);
    line-height: 1;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transform: translateX(-0.25rem);
    transition: max-width 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.ppz-sidebar__manual-toggle-icon {
    flex: 0 0 auto;
    transition: transform 0.2s;
}

.ppz-sidebar__manual-toggle:hover .ppz-sidebar__manual-toggle-label,
.ppz-sidebar__manual-toggle:focus-visible .ppz-sidebar__manual-toggle-label,
.ppz-sidebar__manual-toggle:focus-within .ppz-sidebar__manual-toggle-label {
    max-width: 6rem;
    opacity: 1;
    transform: translateX(0);
}

.ppz-sidebar__manual-toggle:focus-visible {
    outline: 2px solid var(--ppz-color-brand-primary);
    outline-offset: 2px;
}

.ppz-sidebar--manual-compact .ppz-sidebar__manual-toggle-icon {
    transform: rotate(180deg);
}

.ppz-sidebar--dark .ppz-sidebar__manual-toggle {
    background: var(--ppz-color-neutral-900);
    border-color: var(--ppz-color-neutral-700);
    color: var(--ppz-color-neutral-300);
}

.ppz-sidebar--dark .ppz-sidebar__manual-toggle:hover {
    background: var(--ppz-color-neutral-800);
    color: #ffffff;
}

.ppz-sidebar--dark .ppz-sidebar__close {
    color: var(--ppz-color-neutral-400);
}

.ppz-sidebar--dark .ppz-sidebar__close:hover {
    background: var(--ppz-color-neutral-800);
}

/* Navigation */
.ppz-sidebar__nav {
    flex-grow: 1;
    padding: var(--ppz-space-3);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--ppz-space-1);
}

/* Menu Items */
.ppz-sidebar__item {
    display: flex;
    align-items: center;
    gap: var(--ppz-space-2-5);
    padding: var(--ppz-space-2-5) var(--ppz-space-3);
    min-height: 44px;
    color: var(--ppz-text-secondary);
    text-decoration: none;
    font-size: var(--ppz-font-size-sm);
    font-weight: var(--ppz-font-weight-medium);
    border-radius: var(--ppz-radius-md);
    transition: all 0.2s;
}

.ppz-sidebar__item:visited {
    text-decoration: none;
}

.ppz-sidebar__item:hover {
    background: var(--ppz-bg-subtle);
    color: var(--ppz-text-secondary);
    font-weight: var(--ppz-font-weight-semibold);
    text-decoration: none;
}

.ppz-sidebar__item:hover .ppz-sidebar__item-label,
.ppz-sidebar__item:hover .ppz-sidebar__item-icon {
    color: inherit !important;
    font-weight: inherit !important;
}

.ppz-sidebar__item:focus-visible {
    outline: 2px solid var(--ppz-color-brand-primary);
    outline-offset: 2px;
    text-decoration: none;
}

.ppz-sidebar__item--active {
    background: var(--ppz-color-brand-primary);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(233, 30, 99, 0.18);
}

.ppz-sidebar__item--active:hover {
    background: var(--ppz-color-brand-primary);
    color: #ffffff;
    text-decoration: none;
}

.ppz-sidebar__item--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.ppz-sidebar--dark .ppz-sidebar__item {
    color: var(--ppz-color-neutral-400);
}

.ppz-sidebar--dark .ppz-sidebar__item:hover {
    background: var(--ppz-color-neutral-800);
    color: var(--ppz-color-neutral-400);
    font-weight: var(--ppz-font-weight-semibold);
}

.ppz-sidebar__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.ppz-sidebar__item-label {
    flex-grow: 1;
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
}

.ppz-sidebar__item-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--ppz-color-danger);
    color: #ffffff;
    font-size: var(--ppz-font-size-xs);
    font-weight: var(--ppz-font-weight-semibold);
    border-radius: var(--ppz-radius-full);
}

.ppz-sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--ppz-space-2-5);
    min-height: 40px;
    color: var(--ppz-text-primary);
    text-decoration: none;
    font-size: var(--ppz-text-sm);
    font-weight: var(--ppz-font-weight-semibold);
}

.ppz-sidebar__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    color: var(--ppz-color-brand-primary);
}

.ppz-sidebar__brand-mark svg {
    width: 18px;
    height: 18px;
}

.ppz-sidebar__brand-label {
    line-height: 1.1;
}

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

.ppz-sidebar__footer,
.ppz-sidebar__bottom {
    border-top: 1px solid var(--ppz-border-default);
    padding: var(--ppz-space-3);
}

.ppz-sidebar__mobile-toolbar {
    display: none;
}

.ppz-sidebar__footer {
    margin-top: auto;
}

.ppz-sidebar__footer .ppz-sidebar__item,
.ppz-sidebar__bottom .ppz-sidebar__item {
    margin-bottom: var(--ppz-space-1);
}

@media (min-width: 1024px) {
    .ppz-sidebar[data-sidebar-manual-toggle-enabled="true"] .ppz-sidebar__manual-toggle-row {
        display: flex;
    }

    .ppz-sidebar-prefetch-compact .ppz-sidebar {
        width: var(--ppz-sidebar-width-narrow, 50px);
    }

    .ppz-sidebar-prefetch-compact .ppz-sidebar .ppz-sidebar__header,
    .ppz-sidebar-prefetch-compact .ppz-sidebar .ppz-sidebar__footer,
    .ppz-sidebar-prefetch-compact .ppz-sidebar .ppz-sidebar__bottom {
        padding-left: var(--ppz-space-1-5);
        padding-right: var(--ppz-space-1-5);
    }

    .ppz-sidebar-prefetch-compact .ppz-sidebar .ppz-sidebar__item-label,
    .ppz-sidebar-prefetch-compact .ppz-sidebar .ppz-sidebar__user-name,
    .ppz-sidebar-prefetch-compact .ppz-sidebar .ppz-sidebar__item-badge,
    .ppz-sidebar-prefetch-compact .ppz-sidebar .ppz-sidebar__footer .ppz-sidebar__item-label,
    .ppz-sidebar-prefetch-compact .ppz-sidebar .ppz-sidebar__bottom .ppz-sidebar__item-label,
    .ppz-sidebar-prefetch-compact .ppz-sidebar .navigation_sidebar_brand_copy {
        display: none;
    }

    .ppz-sidebar-prefetch-compact .ppz-sidebar .ppz-sidebar__item,
    .ppz-sidebar-prefetch-compact .ppz-sidebar .navigation_item_branded {
        justify-content: center;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .ppz-sidebar-prefetch-compact .ppz-sidebar .ppz-sidebar__item-icon {
        width: 20px;
        height: 20px;
    }

    .ppz-sidebar-prefetch-compact .ppz-sidebar ~ #body_content {
        width: calc(100% - var(--ppz-sidebar-width-narrow, 50px));
        margin-left: var(--ppz-sidebar-width-narrow, 50px);
    }

    .ppz-sidebar--manual-compact {
        width: var(--ppz-sidebar-width-narrow, 50px);
    }

    .ppz-sidebar--manual-compact .ppz-sidebar__header,
    .ppz-sidebar--manual-compact .ppz-sidebar__footer,
    .ppz-sidebar--manual-compact .ppz-sidebar__bottom {
        padding-left: var(--ppz-space-1-5);
        padding-right: var(--ppz-space-1-5);
    }

    .ppz-sidebar--manual-compact .ppz-sidebar__item-label,
    .ppz-sidebar--manual-compact .ppz-sidebar__user-name,
    .ppz-sidebar--manual-compact .ppz-sidebar__item-badge,
    .ppz-sidebar--manual-compact .ppz-sidebar__footer .ppz-sidebar__item-label,
    .ppz-sidebar--manual-compact .ppz-sidebar__bottom .ppz-sidebar__item-label,
    .ppz-sidebar--manual-compact .navigation_sidebar_brand_copy {
        display: none;
    }

    .ppz-sidebar--manual-compact .ppz-sidebar__item,
    .ppz-sidebar--manual-compact .navigation_item_branded {
        justify-content: center;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .ppz-sidebar--manual-compact .ppz-sidebar__brand-mark {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
    }

    .ppz-sidebar--manual-compact .ppz-sidebar__brand-mark svg {
        width: 14px;
        height: 14px;
    }

    .ppz-sidebar--manual-compact .ppz-sidebar__item-icon {
        width: 20px;
        height: 20px;
    }

    .ppz-sidebar--manual-compact .ppz-sidebar__manual-toggle {
        margin-left: 0;
        gap: 0;
        padding: 0;
        width: auto;
        min-width: 28px;
        height: 28px;
    }

    .ppz-sidebar--manual-compact .ppz-sidebar__manual-toggle:hover,
    .ppz-sidebar--manual-compact .ppz-sidebar__manual-toggle:focus-visible,
    .ppz-sidebar--manual-compact .ppz-sidebar__manual-toggle:focus-within {
        padding: 0 var(--ppz-space-2);
        gap: var(--ppz-space-1-5);
    }

    .ppz-sidebar--manual-compact .ppz-sidebar__manual-toggle-row {
        justify-content: center;
        padding-left: var(--ppz-space-1-5);
        padding-right: var(--ppz-space-1-5);
    }

    .ppz-sidebar--manual-compact ~ #body_content {
        width: calc(100% - var(--ppz-sidebar-width-narrow, 50px));
        margin-left: var(--ppz-sidebar-width-narrow, 50px);
    }
}

.ppz-sidebar__user {
    display: flex;
    align-items: center;
    gap: var(--ppz-space-2-5);
    margin-bottom: var(--ppz-space-2-5);
}

.ppz-sidebar__avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 9999px;
    background: var(--ppz-bg-subtle) center/cover no-repeat;
}

.ppz-sidebar__user-meta {
    min-width: 0;
}

.ppz-sidebar__user-name {
    color: var(--ppz-text-primary);
    font-size: var(--ppz-font-size-sm);
    font-weight: var(--ppz-font-weight-medium);
}

#body_content {
    width: calc(100% - var(--ppz-sidebar-width, 220px));
    margin-left: var(--ppz-sidebar-width, 220px);
}

/* Responsive */
@media (max-width: 768px) {
    .ppz-sidebar {
        transform: translateX(-100%);
    }
    
    .ppz-sidebar--right {
        transform: translateX(100%);
    }
    
    .ppz-sidebar:not(.ppz-sidebar--collapsed) {
        transform: translateX(0);
    }
    
    .ppz-sidebar__close {
        display: flex;
    }

    #body_content {
        width: 100%;
        margin-left: 0;
        padding-bottom: 60px;
    }
}

@media (max-width: 1023px) {
    .ppz-sidebar__manual-toggle {
        display: none !important;
    }

    .ppz-sidebar__manual-toggle-row {
        display: none !important;
    }

    .ppz-sidebar {
        width: var(--ppz-sidebar-width-narrow, 50px);
    }

    .ppz-sidebar__header,
    .ppz-sidebar__footer,
    .ppz-sidebar__bottom {
        padding-left: var(--ppz-space-1-5);
        padding-right: var(--ppz-space-1-5);
    }

    .ppz-sidebar__brand,
    .ppz-sidebar__item-label,
    .ppz-sidebar__user-name,
    .ppz-sidebar__item-badge,
    .ppz-sidebar__footer .ppz-sidebar__item-label,
    .ppz-sidebar__bottom .ppz-sidebar__item-label {
        display: none;
    }

    .ppz-sidebar__item,
    .ppz-sidebar__brand {
        justify-content: center;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .ppz-sidebar__item-icon {
        width: 20px;
        height: 20px;
    }

    .ppz-sidebar__footer .ppz-sidebar__item,
    .ppz-sidebar__bottom .ppz-sidebar__item {
        margin-bottom: 0;
    }

    .ppz-sidebar__user {
        justify-content: center;
    }

    #body_content {
        width: calc(100% - var(--ppz-sidebar-width-narrow, 50px));
        margin-left: var(--ppz-sidebar-width-narrow, 50px);
    }
}

@media (max-width: 767px) {
    .ppz-sidebar {
        transform: none;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 64px;
        border-right: none;
        border-top: 1px solid var(--ppz-border-default);
        box-shadow: 0 -8px 24px rgba(17, 24, 39, 0.08);
        z-index: 1200;
    }

    .ppz-sidebar__header,
    .ppz-sidebar__footer,
    .ppz-sidebar__bottom,
    .ppz-sidebar__nav {
        display: none;
    }

    .ppz-sidebar__mobile-toolbar {
        display: flex;
        align-items: stretch;
        gap: var(--ppz-space-1);
        padding: var(--ppz-space-1) var(--ppz-space-1-5);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ppz-sidebar__mobile-toolbar::-webkit-scrollbar {
        display: none;
    }

    .ppz-sidebar__mobile-item {
        display: flex;
        flex: 0 0 auto;
        min-width: 52px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        padding: var(--ppz-space-1) var(--ppz-space-1-5);
        border-radius: var(--ppz-radius-lg);
        text-decoration: none;
        color: var(--ppz-text-secondary);
        font-size: 0.68rem;
        font-weight: var(--ppz-font-weight-medium);
    }

    .ppz-sidebar__mobile-item:hover,
    .ppz-sidebar__mobile-item--active {
        color: var(--ppz-text-primary);
        background: var(--ppz-bg-subtle);
    }

    .ppz-sidebar__mobile-item--active {
        color: var(--ppz-color-brand-primary);
    }

    .ppz-sidebar__mobile-item-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
    }

    .ppz-sidebar__mobile-item-label {
        max-width: 68px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #body_content {
        width: 100%;
        margin-left: 0;
        padding-bottom: 76px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ppz-sidebar {
        transition: none;
    }
}

/* ───────── ppz-page-header__action-menu ───────── */
.ppz-page-header__action-menu .ppz_dropdown_options,
    .ppz-page-header__action-menu .ppz_dropdown_content {
        display: none;
    }
    .drop-content .ppz_dropdown_options,
    .drop-content .ppz_dropdown_content {
        display: block;
    }
    .ppz-page-header__action-menu .ppz_dropdown_options li {
        display: flex;
        flex-direction: column;
    }
    .ppz-page-header__action-menu .ppz_dropdown_options a,
    .ppz-page-header__action-menu .ppz_dropdown_options .ppz-dropdown-menu__link,
    .ppz-page-header__action-menu .ppz_dropdown_options .ppz-dropdown-group-option__link,
    .ppz-page-header__action-menu .ppz_dropdown_options .ppz-dropdown-group-option__branch {
        font-weight: var(--ppz-font-weight-extralight, 200) !important;
    }
    .ppz-page-header__action-menu .ppz_dropdown_options .box_name .bold {
        font-weight: 700 !important;
    }
    .ppz-page-header__action-menu .ppz_dropdown_options a:hover,
    .ppz-page-header__action-menu .ppz_dropdown_options a:focus-visible {
        text-decoration: none !important;
        font-weight: 700 !important;
        color: #fff;
        background: var(--ppz-color-brand-secondary, #19db9a);
    }

/* ───────── Collapsible Tips Styles ───────── */
/* Collapsible Tips Styles */
            /* Default state: collapsed (no JS flash) */
            .box.dark.tip {
                padding: 8px;
                width: fit-content;
                min-width: auto;
                align-items: center;
                justify-content: center;
            }
            
            .box.dark.tip .tip_text,
            .box.dark.tip .tip-close-btn {
                display: none;
            }
            
            /* Expanded state */
            .box.dark.tip.tip-expanded {
                padding: 16px;
                width: auto;
                align-items: flex-start;
            }
            
            .box.dark.tip.tip-expanded .tip_text,
            .box.dark.tip.tip-expanded .tip-close-btn {
                display: block;
            }
            
            /* Icon styles */
            .box.dark.tip .tip_icn {
                margin: 0;
                padding: 0;
                cursor: pointer;
                transition: transform 0.2s ease;
                flex-shrink: 0;
            }
            
            .box.dark.tip .tip_icn:hover {
                transform: scale(1.1);
            }
            
            /* Close button styles */
            .tip-close-btn {
                background: none;
                border: none;
                font-size: 24px;
                line-height: 1;
                cursor: pointer;
                padding: 0;
                margin: 0 8px 0 0;
                color: var(--text-color);
                opacity: 0.6;
                transition: opacity 0.2s ease;
                flex-shrink: 0;
                align-self: flex-start;
            }
            
            .tip-close-btn:hover {
                opacity: 1;
            }
            
            .box.dark .tip-close-btn {
                color: var(--text-color-dark);
            }
            
            /* Smooth transitions */
            .box.dark.tip {
                transition: all 0.3s ease;
            }
            
            .box.dark.tip .tip_text {
                transition: opacity 0.3s ease;
            }

/* ───────── ppz-marie-nudge ───────── */
@keyframes ppz-marie-nudge {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    12%  { transform: translateY(-5px) rotate(-5deg); }
    36%  { transform: translateY(0) rotate(4deg); }
    60%  { transform: translateY(-3px) rotate(-2deg); }
    84%  { transform: translateY(0) rotate(0deg); }
}
#ppz-chat-toggle.ppz-nudge {
    animation: ppz-marie-nudge 2.5s ease-in-out 120s 1;
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    #ppz-chat-toggle.ppz-nudge { animation: none; }
}

/* « Le chat qui commence » : une petite bulle de Marie, une fois par page.
     Réutilise les salutations multilingues déjà présentes dans cette vue —
     aucune nouvelle chaîne à traduire. Se referme à la croix, s'ouvre au clic. */
#ppz-marie-teaser {
    position: fixed;
    right: 92px;
    bottom: 22px;
    z-index: 99998;
    max-width: 270px;
    background: #ffffff;
    color: #1b1f2a;
    border: 1px solid rgba(15, 17, 26, .10);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 17, 26, .18);
    padding: 12px 34px 12px 14px;
    font-size: 14px;
    line-height: 1.45;
    opacity: 0;
    pointer-events: none;
    /*
     * visibility, et pas seulement opacity : au repos le teaser est invisible
     * et hors de portee de la souris, mais son bouton « Fermer » restait dans
     * le parcours du clavier. On tabulait sur un bouton qu'on ne voit pas.
     * visibility:hidden l'en retire ; la transition la retarde pour que
     * l'apparition reste animee.
     */
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
#ppz-marie-teaser.ppz-visible { opacity: 1; pointer-events: auto; visibility: visible; transform: translateY(0); transition: opacity .35s ease, transform .35s ease, visibility 0s; }
#ppz-marie-teaser.ppz-nudge-hidden { display: none; }
#ppz-marie-teaser .ppz-teaser-close {
    position: absolute; top: 6px; right: 8px;
    border: 0; background: transparent; cursor: pointer;
    font-size: 15px; line-height: 1; color: #8a90a0; padding: 4px;
}
#ppz-marie-teaser .ppz-teaser-cta { color: #e5006d; font-weight: 600; }
/* Petite flèche vers la bulle */
#ppz-marie-teaser::after {
    content: "";
    position: absolute; right: -6px; bottom: 18px;
    width: 12px; height: 12px;
    background: #ffffff;
    border-right: 1px solid rgba(15, 17, 26, .10);
    border-top: 1px solid rgba(15, 17, 26, .10);
    transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
    #ppz-marie-teaser { transition: none; }
}

/* ───────── ppz-page-header-dropdown-base ───────── */
.ppz_dropdown_options,
    .ppz_dropdown_content {
        display: none;
    }
    .drop-content .ppz_dropdown_options,
    .drop-content .ppz_dropdown_content {
        display: block;
    }
    .ppz_dropdown_options li {
        display: flex;
        flex-direction: column;
    }
    .ppz_dropdown_options a,
    .ppz_dropdown_options .ppz-dropdown-menu__link,
    .ppz_dropdown_options .ppz-dropdown-group-option__link,
    .ppz_dropdown_options .ppz-dropdown-group-option__branch {
        font-weight: var(--ppz-font-weight-extralight, 200) !important;
    }
    .ppz_dropdown_options .box_name .bold {
        font-weight: 700 !important;
    }
    .ppz_dropdown_options .ppz-dropdown-group-option {
        background-color: var(--nearly-white);
        display: grid;
        grid-template-columns: auto auto auto minmax(0, 1fr);
        align-items: center;
        column-gap: 8px;
        padding-left: 8px;
        padding-right: 8px;
    }
    .ppz_dropdown_options .ppz-dropdown-group-option__indent {
        flex: 0 0 auto;
        display: block;
        height: auto;
        align-self: stretch;
    }
    .ppz_dropdown_options .ppz-dropdown-group-option__branch {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 8px;
        color: var(--ppz-text-secondary, #6b7280);
        font-size: 12px;
        font-weight: 200 !important;
        line-height: 1;
    }
    .ppz_dropdown_options .ppz-dropdown-group-option__dot {
        width: 7px !important;
        min-width: 7px !important;
        max-width: 7px !important;
        height: 7px !important;
        min-height: 7px !important;
        max-height: 7px !important;
        flex: 0 0 7px !important;
        display: block;
    }
    .ppz_dropdown_options .ppz-dropdown-group-option__link {
        display: block;
        min-width: 0;
        margin: 0 !important;
        padding: 15px 5px 15px 0 !important;
        font-weight: 400 !important;
    }
    .ppz_dropdown_options li div.archive {
        opacity: .3;
        filter: grayscale(100%);
    }
    .ppz_dropdown_options a:hover,
    .ppz_dropdown_options a:focus-visible {
        text-decoration: none !important;
        font-weight: 700 !important;
        color: #fff;
        background: var(--ppz-color-brand-secondary, #19db9a);
    }

/* ───────── ppz-activity-list ───────── */
/* ── Activity feed — mirrors absence-compact/eval-compact canonical pattern ── */
#ppz-activity-list {
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ppz-color-neutral-200) transparent;
}
#ppz-activity-empty {
    display: block;
}
.ppz-activity-empty-hint {
    margin-top: 12px;
    text-align: center;
    font-size: 12px;
    color: var(--ppz-text-muted);
}
.ppz-eco-banner {
    margin-top: 12px;
    padding: 0 var(--ppz-space-4);
    text-align: center;
    font-size: var(--ppz-font-size-sm);
    line-height: var(--ppz-line-height-normal);
    font-weight: var(--ppz-font-weight-regular);
    color: var(--ppz-text-muted);
}
#ppz-activity-list::-webkit-scrollbar { width: 4px; }
#ppz-activity-list::-webkit-scrollbar-thumb { background: var(--ppz-color-neutral-200); border-radius: 2px; }
/* Row */
.ppz-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ppz-border-subtle);
    font-size: 13px;
}
.ppz-activity-item:last-child { border-bottom: none; }
/* Icon */
.ppz-activity-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .85;
}
/* Body — vertical stack */
.ppz-activity-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /*
     * 8px et non 3 : les deux liens d'une entree — le cours et l'intervenant —
     * n'avaient que 20 px entre leurs centres. Leur zone de clic elargie a 24 px
     * (voir plus bas) se serait chevauchee, et c'est precisement ce que WCAG
     * 2.5.8 interdit : une cible qui en mord une autre, c'est un mauvais clic.
     * Mesure apres : 25 px entre centres, les zones ne se touchent plus.
     */
    gap: 8px;
}
/* Line 1: course name + course time */
.ppz-activity-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ppz-activity-course {
    font-weight: 600;
    font-size: 13px;
    color: var(--ppz-text-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}
.ppz-activity-course:hover { text-decoration: underline; }
.ppz-activity-time { font-size: 11px; color: var(--ppz-text-muted); flex-shrink: 0; }
/* Line 2: teacher + stats */
.ppz-activity-sub {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--ppz-text-muted);
}
.ppz-activity-actor {
    font-weight: 600;
    color: var(--ppz-color-brand-secondary);
    text-decoration: none;
    white-space: nowrap;
}
.ppz-activity-actor:hover { text-decoration: underline; }
.ppz-activity-sep { color: var(--ppz-border-subtle); font-size: 11px; }

/*
 * ZONE DE CLIC ELARGIE — WCAG 2.5.8 (taille des cibles, 24x24 px minimum)
 *
 * Ces deux liens font 17 px de haut : leur hauteur est imposee par la ligne de
 * texte ou ils vivent, et les grossir casserait la mise en page. On elargit donc
 * la zone SENSIBLE sans toucher au dessin — un pseudo-element centre, etendu en
 * hauteur seulement. Le lien garde ses 17 px a l'oeil et en gagne 24 au doigt.
 *
 * L'extension est VERTICALE uniquement : horizontalement, ces liens sont suivis
 * d'un separateur et d'un texte sur la meme ligne, qu'une zone debordante
 * recouvrirait. En hauteur, l'espacement du conteneur a ete porte a 8 px pour
 * que deux zones voisines ne se touchent pas.
 */
.ppz-activity-actor,
.ppz-activity-course { position: relative; }

.ppz-activity-actor::after,
.ppz-activity-course::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 24px;
    transform: translateY(-50%);
}

.ppz-activity-stat--present { color: var(--ppz-color-teal-600); }
.ppz-activity-stat--absent  { color: var(--ppz-color-orange-600); font-weight: 700; }
/* Line 3: absent pill list */
.ppz-activity-absent-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 1px;
}
.ppz-activity-absent-list a {
    font-size: 11px;
    color: var(--ppz-color-orange-700);
    text-decoration: none;
    background: var(--ppz-color-orange-50);
    border: 1px solid var(--ppz-color-orange-200);
    padding: 1px 7px;
    border-radius: 10px;
    white-space: nowrap;
}
.ppz-activity-absent-list a:hover { text-decoration: underline; }
/* Fallback label (legacy events without meta) */
.ppz-activity-label {
    color: var(--ppz-text-secondary);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Time — right-aligned, muted */
.ppz-activity-ago { flex-shrink: 0; font-size: 11px; color: var(--ppz-text-muted); white-space: nowrap; margin-top: 2px; }
/* Badge chip */
.ppz-activity-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    white-space: nowrap;
    line-height: 1.5;
}
/* Live ((o)) pulse */
@keyframes ppz-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
#ppz-activity-indicator {
    font-size: 12px;
    font-weight: 700;
    color: var(--ppz-color-brand-secondary);
    letter-spacing: .02em;
}
#ppz-activity-indicator .ppz-live-rings {
    display: inline-flex;
    align-items: center;
    gap: 0;
    line-height: 1;
}
#ppz-activity-indicator .ppz-live-core {
    display: inline-block;
    animation: ppz-pulse 1.6s ease-in-out infinite;
}
/* Dark mode */
[data-theme="dark"] .ppz-activity-item     { border-bottom-color: var(--ppz-border-subtle); }
[data-theme="dark"] .ppz-activity-course   { color: var(--ppz-text-primary); }
[data-theme="dark"] .ppz-activity-sub      { color: var(--ppz-text-muted); }
[data-theme="dark"] .ppz-activity-time     { color: var(--ppz-text-muted); }
[data-theme="dark"] .ppz-activity-ago      { color: var(--ppz-text-muted); }
[data-theme="dark"] .ppz-activity-label    { color: var(--ppz-text-secondary); }
[data-theme="dark"] .ppz-activity-sep      { color: var(--ppz-border-default); }
[data-theme="dark"] .ppz-card-empty { color:var(--ppz-text-muted); }
[data-theme="dark"] .ppz-card-empty-text { color:var(--ppz-text-muted); }
/* ── Shared eco-mode refresh button (DS secondary = teal) ── */
.ppz-refresh-btn { border:1px solid var(--ppz-color-brand-secondary); background:rgba(25,219,154,.08); padding:6px 8px; border-radius:4px; cursor:pointer; font-size:14px; transition:all .2s; }
.ppz-refresh-btn:hover { background:var(--ppz-color-brand-secondary); }
.ppz-refresh-btn svg { vertical-align:middle; stroke:var(--ppz-color-brand-secondary); transition:stroke .2s; }
.ppz-refresh-btn:hover svg { stroke:#fff; }


/*
 * PIED DE PAGE ET PAGE LEGALE
 *
 * Le pied reste discret : il ne doit pas concurrencer le contenu, mais il doit
 * etre LA, sur chaque page, et atteignable au clavier comme a la souris. Sa
 * cible depasse 24 px en hauteur (RGAA 11.x / WCAG 2.5.8) et son contraste suit
 * les jetons, donc le theme sombre et le contraste fort le suivent aussi.
 */
.ppz-pied-page {
    padding: var(--ppz-space-4) var(--ppz-space-5);
    font-size: var(--ppz-font-size-sm, .875rem);
    color: var(--ppz-text-secondary);
    border-top: 1px solid var(--ppz-border-subtle);
    margin-top: var(--ppz-space-6);
}
.ppz-pied-page a {
    color: inherit;
    text-decoration: underline;
    display: inline-block;
    padding: 4px 0;          /* 24 px de haut au total, sans changer le dessin */
}
.ppz-pied-page a:hover { color: var(--ppz-text-primary); }

/* Sur les ecrans publics — connexion, inscription — le contenu est centre. */
.ppz-pied-page--centre { text-align: center; border-top: none; }

/*
 * PAGE LEGALE — un DOCUMENT, pas un ecran d'application.
 *
 * Les reperes de lisibilite appliques ici ne sont pas decoratifs ; chacun est un
 * obstacle en moins pour qui lit avec effort (dyslexie, fatigue, TDAH) :
 *
 *   — ligne de 65 signes : au-dela, l'oeil perd la ligne suivante au retour ;
 *   — interligne 1,65 : l'espacement vertical aide plus qu'une police dite
 *     « dyslexie », dont les etudes controlees ne montrent pas de gain ;
 *   — alignement a gauche, jamais justifie : la justification creuse des
 *     rivieres blanches qui accrochent le regard ;
 *   — hierarchie VISIBLE : un titre doit se distinguer sans etre lu ;
 *   — espace AVANT un titre superieur a l'espace apres : c'est ce qui rattache
 *     le titre a ce qu'il annonce, et non a ce qui precede.
 */
.ppz-legal-page {
    /*
     * Largeur pilotée par le support : ces pages ont DEUX natures — de la prose
     * (déclaration) et des tableaux (grille des 106 critères). Un plafond unique
     * de 65ch rendait la grille absurde : colonne de 569 px sur un écran large,
     * page de 19 570 px de haut, ~600 px de marge vide de chaque côté (constat
     * Sylvain, capture du 08/10/2026). Le conteneur prend donc la largeur
     * disponible ; seule la PROSE est cappée (~72ch) pour la lisibilité — les
     * tableaux, eux, respirent. Sous 768 px, tout s'empile (voir plus bas).
     */
    max-width: min(80rem, 100%);
    margin: 0 auto;
    padding: var(--ppz-space-6, 24px) var(--ppz-space-5, 20px) var(--ppz-space-8, 40px);
    line-height: 1.65;
    text-align: left;
    color: var(--ppz-text-primary, #111827);
}
.ppz-legal-page > :is(p, ul, ol, h1, h2, h3, h4, blockquote, hr, pre) {
    max-width: 72ch;
}

.ppz-legal-page h1 {
    font-size: 1.9rem;
    line-height: 1.25;
    margin: 0 0 var(--ppz-space-2, 8px);
    letter-spacing: -.02em;
}
/* Le sous-titre de generation, juste sous le titre : discret, mais lisible. */
.ppz-legal-page h1 + p {
    color: var(--ppz-text-secondary, #4B5563);
    margin-bottom: var(--ppz-space-7, 32px);
}

.ppz-legal-page h2 {
    font-size: 1.35rem;
    line-height: 1.3;
    text-transform: none;          /* la balise imposait des capitales */
    letter-spacing: -.01em;
    color: var(--ppz-text-primary, #111827);
    margin: var(--ppz-space-8, 40px) 0 var(--ppz-space-3, 12px);
    padding-top: var(--ppz-space-4, 16px);
    border-top: 1px solid var(--ppz-border-subtle, #E5E7EB);
}
.ppz-legal-page h3 {
    font-size: 1.1rem;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ppz-text-primary, #111827);
    margin: var(--ppz-space-6, 24px) 0 var(--ppz-space-2, 8px);
}

.ppz-legal-page p { margin: 0 0 var(--ppz-space-4, 16px); }
.ppz-legal-page ul { margin: 0 0 var(--ppz-space-5, 20px); padding-left: var(--ppz-space-5, 20px); }
.ppz-legal-page li { margin-bottom: var(--ppz-space-2, 8px); }
.ppz-legal-page strong { font-weight: 600; }
.ppz-legal-page code {
    font-size: .9em;
    padding: .1em .35em;
    border-radius: 3px;
    background: var(--ppz-bg-subtle, rgba(0,0,0,.05));
}
.ppz-legal-page hr {
    border: 0;
    border-top: 1px solid var(--ppz-border-subtle, #E5E7EB);
    margin: var(--ppz-space-7, 32px) 0;
}

/*
 * Les tableaux debordent la colonne de lecture : c'est voulu. Un tableau de
 * six colonnes dans 65 signes devient illisible, alors qu'un texte long dans
 * 65 signes reste confortable. Ils peuvent defiler, mais SEULS — jamais la page.
 */
.ppz-legal-page table {
    /*
     * Pas d'elargissement hors colonne : il decalait vers la gauche les
     * tableaux de deux colonnes, dont les filets commencaient avant le texte.
     * Une table large defile SEULE — jamais la page.
     */
    width: 100%;
    max-width: 100%;
    margin: 0 0 var(--ppz-space-6, 24px);
    border-collapse: collapse;
    font-size: .94rem;
    line-height: 1.5;
    display: block;
    overflow-x: auto;
}
.ppz-legal-page th,
.ppz-legal-page td {
    border-bottom: 1px solid var(--ppz-border-subtle, #E5E7EB);
    padding: var(--ppz-space-3, 12px);
    text-align: left;
    vertical-align: top;
}
.ppz-legal-page thead th {
    border-bottom-width: 2px;
    font-weight: 600;
    white-space: nowrap;
}
.ppz-legal-page tbody tr:last-child td { border-bottom: none; }

@media (max-width: 720px) {
    .ppz-legal-page { padding: var(--ppz-space-5, 20px) var(--ppz-space-4, 16px); }
    .ppz-legal-page table { width: 100%; margin-left: 0; margin-right: 0; }
}

/*
 * Pages légales : responsive SANS se limiter au téléphone. Jusqu'à 768 px —
 * téléphones, tablettes portrait, fenêtres étroites — les tableaux S'EMPILENT
 * (chaque ligne devient un bloc lisible ; les valeurs des colonnes de ces pages
 * — montant, statut, mode, constat — se lisent seules dans l'ordre du DOM) et
 * la typographie passe en fluide. Au-delà, les tableaux gardent leur défilement
 * interne (jamais la page). Les en-têtes de colonnes sont masqués visuellement
 * (contenu réservé aux lecteurs d'écran) mais restent dans le document.
 * (Demande Sylvain, 08/10/2026 : « pas limité à 480 ».)
 */
@media (max-width: 768px) {
    .ppz-legal-page {
        padding: var(--ppz-space-5, 20px) var(--ppz-space-4, 16px) var(--ppz-space-7, 32px);
        line-height: 1.6;
    }
    .ppz-legal-page h1 { font-size: clamp(1.45rem, 6vw, 1.9rem); }
    .ppz-legal-page h2 { font-size: clamp(1.15rem, 4.5vw, 1.35rem); margin-top: var(--ppz-space-7, 32px); }
    .ppz-legal-page h3 { font-size: 1.05rem; }

    .ppz-legal-page table { overflow-x: visible; }
    .ppz-legal-page table,
    .ppz-legal-page thead,
    .ppz-legal-page tbody,
    .ppz-legal-page tr,
    .ppz-legal-page th,
    .ppz-legal-page td { display: block; width: auto; }
    .ppz-legal-page thead th {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
    .ppz-legal-page tr { border-bottom: 1px solid var(--ppz-border-subtle, #E5E7EB); padding: var(--ppz-space-2, 8px) 0; }
    .ppz-legal-page tr:last-child { border-bottom: none; }
    .ppz-legal-page td { border: 0; padding: 2px 0; }
    .ppz-legal-page td:first-child { font-weight: 600; }
}

/*
 * Bouton bascule : l'etat « non enclenche » se dit par aria-pressed, pas par
 * l'opacite. Un bouton a demi efface parle le vocabulaire du DESACTIVE : il
 * annonce qu'on ne peut pas s'en servir, alors qu'il attend qu'on l'actionne.
 * Meme confusion que le bouton « Clore », meme remede : pleine opacite dans
 * les deux etats, la difference portee par le remplissage.
 */
.ppz-refresh-btn[aria-pressed="true"] { background: var(--ppz-color-brand-secondary, #19db9a); }
.ppz-refresh-btn[aria-pressed="true"] svg { stroke: #ffffff; }