/* ============================================================
   PRIVATE EVENTS V99.48 — PE HEADER STANDARD V1
   ------------------------------------------------------------
   Objectif : une geometrie d'en-tete commune, compacte et stable,
   identique en theme clair et velvet.

   Standard mobile :
   - titre centre ;
   - action theme toujours en haut a droite ;
   - meta / sous-titre centre ;
   - commandes catalogue centrees sous la meta ;
   - espace vertical reduit ;
   - exceptions visuelles : cockpit, galerie, chat contextuel.
   ============================================================ */

:root {
    --pe-h48-title-size: clamp(1.72rem, 7vw, 2rem);
    --pe-h48-title-line: 1.06;
    --pe-h48-side-action: 48px;
    --pe-h48-pad-x: 20px;
    --pe-h48-gap: 7px;
    --pe-h48-simple-min: 82px;
    --pe-h48-catalogue-min: 164px;
}

/* API reutilisable pour les nouvelles pages. */
.pe-page-header {
    position: relative;
    display: grid;
    align-items: center;
    justify-items: center;
    width: 100%;
    min-width: 0;
    text-align: center;
}
.pe-page-header__title {
    margin: 0;
    text-align: center;
    line-height: var(--pe-h48-title-line);
}
.pe-page-header__meta,
.pe-page-header__subtitle {
    margin: 0;
    text-align: center;
}
.pe-page-header__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (max-width: 700px) {
    /* --------------------------------------------------------
       CATALOGUES : Evenements, Participations, Membres, Suivis
       -------------------------------------------------------- */
    body.events-index-page .events-catalogue-hero,
    body.members-index-page .members-catalogue-hero {
        position: relative !important;
        display: block !important;
        min-height: var(--pe-h48-catalogue-min) !important;
        margin: 0 !important;
        padding: 12px 0 10px !important;
        text-align: center !important;
    }

    body.events-index-page .events-catalogue-heading-block,
    body.members-index-page .members-catalogue-hero > div {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    body.events-index-page .events-catalogue-title-row,
    body.members-index-page .members-catalogue-title-row {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 calc(var(--pe-h48-side-action) + 10px) !important;
    }

    body.events-index-page .events-catalogue-title-row h1,
    body.members-index-page .members-catalogue-title-row h1 {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: var(--pe-h48-title-size) !important;
        line-height: var(--pe-h48-title-line) !important;
        text-align: center !important;
        white-space: normal !important;
        text-wrap: balance;
    }

    /* Le bouton theme reste dans le title-row mais devient une action de coin. */
    body.events-index-page .events-catalogue-title-row > .pe-v9930-theme-toggle,
    body.members-index-page .members-catalogue-title-row > .pe-v9930-theme-toggle {
        position: absolute !important;
        top: 1px !important;
        right: 0 !important;
        margin: 0 !important;
    }

    body.events-index-page .events-catalogue-count,
    body.members-index-page .members-catalogue-count,
    body.events-index-page .catalogue-total-count,
    body.members-index-page .catalogue-total-count {
        width: 100% !important;
        margin: 5px 0 0 !important;
        padding: 0 52px !important;
        font-size: .78rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    body.events-index-page .v9841-event-toolbar,
    body.members-index-page .v9841-event-toolbar,
    body.participants-index-page .v9841-event-toolbar,
    body.events-index-page .v9843-event-toolbar,
    body.members-index-page .v9845-member-toolbar,
    body.participants-index-page .v9845-member-toolbar {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 0 !important;
        gap: 8px !important;
    }

    body.events-index-page .v9841-event-tool-actions,
    body.members-index-page .v9841-event-tool-actions,
    body.participants-index-page .v9841-event-tool-actions,
    body.events-index-page .v9843-event-toolbar .v9841-event-tool-actions,
    body.members-index-page .v9845-member-toolbar .v9841-event-tool-actions,
    body.participants-index-page .v9845-member-toolbar .v9841-event-tool-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        margin: 0 !important;
        gap: 8px !important;
    }

    body.events-index-page .v9841-event-tool-button,
    body.members-index-page .v9841-event-tool-button,
    body.participants-index-page .v9841-event-tool-button {
        min-height: 42px !important;
    }

    /* --------------------------------------------------------
       MESSAGES : titre simple, centre, compact
       -------------------------------------------------------- */
    body.messages-index-page .v9855-messages-hero {
        position: relative !important;
        min-height: var(--pe-h48-simple-min) !important;
        margin: 0 !important;
        padding: 12px 0 10px !important;
    }

    body.messages-index-page .v9855-messages-title-row {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 48px !important;
        width: 100% !important;
        padding: 0 calc(var(--pe-h48-side-action) + 10px) !important;
    }

    body.messages-index-page .v9855-messages-title-row h1 {
        width: 100% !important;
        margin: 0 !important;
        font-size: var(--pe-h48-title-size) !important;
        line-height: var(--pe-h48-title-line) !important;
        text-align: center !important;
    }

    body.messages-index-page .v9855-messages-title-row > .pe-v9930-theme-toggle {
        position: absolute !important;
        top: 1px !important;
        right: 0 !important;
        margin: 0 !important;
    }

    /* --------------------------------------------------------
       RECHERCHE : icone gauche, titre/sous-titre centres, theme droite
       -------------------------------------------------------- */
    body.v9898-search-page-body .v9898-search-header {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: center !important;
        justify-items: center !important;
        min-height: 104px !important;
        margin: 0 0 10px !important;
        padding: 10px 60px 10px !important;
        gap: 3px !important;
        text-align: center !important;
    }

    body.v9898-search-page-body .v9898-search-header > div {
        width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    body.v9898-search-page-body .v9898-search-header h1 {
        margin: 0 !important;
        font-size: var(--pe-h48-title-size) !important;
        line-height: var(--pe-h48-title-line) !important;
        text-align: center !important;
    }

    body.v9898-search-page-body .v9898-search-header p {
        margin: 5px auto 0 !important;
        max-width: 34ch !important;
        font-size: .76rem !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

    body.v9898-search-page-body .v9898-search-icon {
        position: absolute !important;
        top: 10px !important;
        left: 0 !important;
        width: 44px !important;
        height: 44px !important;
    }

    body.v9898-search-page-body .v9898-search-header > .pe-v9930-theme-toggle {
        position: absolute !important;
        top: 10px !important;
        right: 0 !important;
        margin: 0 !important;
    }

    /* --------------------------------------------------------
       PARAMETRES : titre centre, hauteur compacte, theme a droite
       -------------------------------------------------------- */
    body.v74-settings-body .v74-settings-header,
    body.v74-settings-body .v9894-settings-header,
    body.v74-settings-body .v9894-settings-detail-header {
        position: relative !important;
        display: grid !important;
        justify-items: center !important;
        align-content: center !important;
        min-height: 88px !important;
        margin: 0 0 10px !important;
        padding: 10px 58px !important;
        text-align: center !important;
    }

    body.v74-settings-body .v74-settings-header h1,
    body.v74-settings-body .v9894-settings-header h1,
    body.v74-settings-body .v9894-settings-detail-header h1 {
        margin: 0 !important;
        font-size: var(--pe-h48-title-size) !important;
        line-height: var(--pe-h48-title-line) !important;
        text-align: center !important;
    }

    body.v74-settings-body .v74-settings-header .muted,
    body.v74-settings-body .v9894-settings-header .muted,
    body.v74-settings-body .v9894-settings-detail-header p {
        margin: 5px auto 0 !important;
        max-width: 38ch !important;
        font-size: .74rem !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

    body.v74-settings-body :is(.v74-settings-header,.v9894-settings-header,.v9894-settings-detail-header) > .pe-v9930-theme-toggle {
        position: absolute !important;
        top: 10px !important;
        right: 0 !important;
        margin: 0 !important;
    }

    /* Les liens Retour restent a gauche et ne participent pas au centrage du titre. */
    body.v74-settings-body .v9894-settings-back {
        margin-bottom: 3px !important;
    }

    /* --------------------------------------------------------
       CREER / MODIFIER : titre centre, en-tete encore plus court
       -------------------------------------------------------- */
    body.create-event-body .create-event-header {
        position: relative !important;
        display: grid !important;
        place-items: center !important;
        min-height: 76px !important;
        margin: 0 0 10px !important;
        padding: 8px 58px !important;
        text-align: center !important;
    }

    body.create-event-body .create-event-header h1 {
        width: 100% !important;
        margin: 0 !important;
        font-size: var(--pe-h48-title-size) !important;
        line-height: var(--pe-h48-title-line) !important;
        text-align: center !important;
    }

    body.create-event-body .create-event-header > .pe-v9930-theme-toggle {
        position: absolute !important;
        top: 8px !important;
        right: 0 !important;
        margin: 0 !important;
    }

    /* --------------------------------------------------------
       MON PROFIL : avatar gauche, titre vraiment centre sur l'ecran
       -------------------------------------------------------- */
    body.profile-edit-page .profile-header {
        position: relative !important;
        display: block !important;
        min-height: 104px !important;
        margin: 0 0 10px !important;
        padding: 12px 58px !important;
        text-align: center !important;
    }

    body.profile-edit-page .profile-main-avatar {
        position: absolute !important;
        top: 10px !important;
        left: 0 !important;
        width: 70px !important;
        height: 70px !important;
    }

    body.profile-edit-page .profile-header-copy {
        display: grid !important;
        justify-items: center !important;
        align-content: center !important;
        min-height: 76px !important;
        width: 100% !important;
        text-align: center !important;
    }

    body.profile-edit-page .profile-header h1 {
        width: 100% !important;
        margin: 0 0 6px !important;
        font-size: var(--pe-h48-title-size) !important;
        line-height: var(--pe-h48-title-line) !important;
        text-align: center !important;
    }

    body.profile-edit-page .profile-header > .pe-v9930-theme-toggle {
        position: absolute !important;
        top: 10px !important;
        right: 0 !important;
        margin: 0 !important;
    }

    /* --------------------------------------------------------
       PARTICIPANTS : même Header Standard V1 que Membres
       --------------------------------------------------------
       Depuis V99.83 la page participants réutilise volontairement les
       classes structurelles du catalogue Membres. On ne lui impose donc
       plus une géométrie parallèle (grid + padding de coin) : cette ancienne
       variante décalait optiquement le titre et surtout la barre de filtres.
       Les règles catalogue communes ci-dessus deviennent l'unique source de
       vérité pour l'axe, la largeur et le bouton de thème.
       -------------------------------------------------------- */
    body.participants-index-page .participants-catalogue-hero.members-catalogue-hero,
    body.participants-index-page .participants-catalogue-hero.members-catalogue-hero > div {
        width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    body.participants-index-page .participants-catalogue-hero .members-label {
        width: 100% !important;
        margin: 0 0 2px !important;
        text-align: center !important;
    }

    /* --------------------------------------------------------
       GALERIE : exception conservee. Titre/media restent sa signature,
       mais hauteur et bouton theme suivent le standard.
       -------------------------------------------------------- */
    body.v75-gallery-body .v75-gallery-header,
    body.v75-gallery-body .v9887-gallery-header {
        position: relative !important;
        min-height: 82px !important;
        margin-bottom: 8px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    body.v75-gallery-body :is(.v75-gallery-header,.v9887-gallery-header) > .pe-v9930-theme-toggle {
        top: 8px !important;
        right: 0 !important;
    }

    /* --------------------------------------------------------
       AUTRES PAGES MEMBRES : bibliotheque, backup, webmaster, legales.
       -------------------------------------------------------- */
    :is(.v72-library-page-header,.v88-backup-header,.webmaster-header,.legal-document-header) {
        position: relative !important;
        min-height: 92px !important;
        padding: 10px 58px !important;
        text-align: center !important;
    }

    :is(.v72-library-page-header,.v88-backup-header,.webmaster-header,.legal-document-header) h1 {
        margin-top: 0 !important;
        margin-bottom: 5px !important;
        font-size: var(--pe-h48-title-size) !important;
        line-height: var(--pe-h48-title-line) !important;
        text-align: center !important;
    }

    :is(.v72-library-page-header,.v88-backup-header,.webmaster-header,.legal-document-header) > .pe-v9930-theme-toggle {
        position: absolute !important;
        top: 10px !important;
        right: 0 !important;
        margin: 0 !important;
    }

    /* --------------------------------------------------------
       PROFIL MEMBRE : titre centre, presence reste liee au titre.
       -------------------------------------------------------- */
    .member-profile-title-row {
        position: relative !important;
        justify-content: center !important;
        padding: 0 50px !important;
        text-align: center !important;
    }

    .member-profile-title-row h1 {
        text-align: center !important;
    }

    /* --------------------------------------------------------
       CHAT : exception contextuelle. Identite a gauche, actions a droite,
       mais hauteur et rythme vertical standardises.
       -------------------------------------------------------- */
    body.v71-chat-body .v71-chat-header {
        min-height: 74px !important;
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }

    /* Evite que les cartes commencent trop loin du header standard. */
    body.events-index-page .event-tiles-grid,
    body.members-index-page .member-tiles-grid {
        margin-top: 0 !important;
    }
}

/* Desktop/tablette : meme principe sans rigidifier inutilement. */
@media (min-width: 701px) {
    body.events-index-page .events-catalogue-title-row,
    body.members-index-page .members-catalogue-title-row,
    body.messages-index-page .v9855-messages-title-row,
    body.v74-settings-body :is(.v74-settings-header,.v9894-settings-header,.v9894-settings-detail-header),
    body.create-event-body .create-event-header,
    body.profile-edit-page .profile-header,
    body.v9898-search-page-body .v9898-search-header {
        text-align: center !important;
    }

    body.events-index-page .events-catalogue-title-row h1,
    body.members-index-page .members-catalogue-title-row h1,
    body.messages-index-page .v9855-messages-title-row h1,
    body.v74-settings-body :is(.v74-settings-header,.v9894-settings-header,.v9894-settings-detail-header) h1,
    body.create-event-body .create-event-header h1,
    body.profile-edit-page .profile-header h1,
    body.v9898-search-page-body .v9898-search-header h1 {
        text-align: center !important;
    }

    body.events-index-page .v9841-event-toolbar,
    body.members-index-page .v9841-event-toolbar,
    body.participants-index-page .v9841-event-toolbar {
        justify-content: center !important;
    }

    body.events-index-page .v9841-event-tool-actions,
    body.members-index-page .v9841-event-tool-actions,
    body.participants-index-page .v9841-event-tool-actions {
        margin-left: 0 !important;
        justify-content: center !important;
    }
}