/*
CTC Separate Stylesheet
Updated: 2025-03-31 22:00:30
*/

/* -------------------------------------------------------------------------
 * Fondations graphiques Web TTA
 *
 * Astra reste la source de vérité pour la palette et la typographie. Les
 * variables ci-dessous donnent un vocabulaire commun aux pages Gutenberg et
 * aux extensions du club sans transformer TTA Core en thème.
 * ---------------------------------------------------------------------- */

:root {
    --tta-color-primary: var(--ast-global-color-0, #0f766e);
    --tta-color-primary-strong: var(--ast-global-color-1, #0a5f58);
    --tta-color-ink: var(--ast-global-color-2, #17212f);
    --tta-color-text: var(--ast-global-color-3, #364151);
    --tta-color-soft: var(--ast-global-color-4, #f5f8fb);
    --tta-color-panel: var(--ast-global-color-5, #ffffff);
    --tta-color-line: var(--ast-global-color-6, #d9e1ea);
    --tta-radius: 8px;
    --tta-shadow: 0 10px 28px rgba(23, 33, 47, 0.08);
    --tta-content-width: 1180px;
    --tta-page-gutter: clamp(18px, 4vw, 32px);
}

html,
body {
    max-width: 100%;
}

body {
    overflow-x: hidden;
}

.site-content,
.site-content .ast-container,
.site-content #primary,
.site-content .site-main,
.site-content article,
.site-content .entry-content,
.site-content .wp-block-group,
.site-content .wp-block-column,
.site-content .wp-block-uagb-container,
.site-content .uagb-container-inner-blocks-wrap {
    min-width: 0;
}

.site-content img,
.site-content video,
.site-content iframe {
    max-width: 100%;
}

/* Une même signature pour les boutons standards Astra, Gutenberg et Spectra. */
.ast-button,
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button .wp-block-button__link,
.wp-block-uagb-buttons-child .uagb-buttons-repeater {
    border-radius: var(--tta-radius);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.wp-block-uagb-buttons-child .uagb-buttons-repeater:not(.ast-outline-button) {
    border-color: var(--tta-color-primary);
    background-color: var(--tta-color-primary);
    color: #ffffff;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus,
.wp-block-uagb-buttons-child .uagb-buttons-repeater:not(.ast-outline-button):hover,
.wp-block-uagb-buttons-child .uagb-buttons-repeater:not(.ast-outline-button):focus {
    border-color: var(--tta-color-primary-strong);
    background-color: var(--tta-color-primary-strong);
    color: #ffffff;
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-uagb-buttons-child .uagb-buttons-repeater.ast-outline-button {
    border-color: var(--tta-color-primary);
    background: transparent;
    color: var(--tta-color-primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.wp-block-uagb-buttons-child .uagb-buttons-repeater.ast-outline-button:hover,
.wp-block-uagb-buttons-child .uagb-buttons-repeater.ast-outline-button:focus {
    border-color: var(--tta-color-primary);
    background: var(--tta-color-primary);
    color: #ffffff;
}

/* Variante secondaire sur visuel sombre de la page d'accueil. La liste est
 * volontairement limitée aux sept CTA concernés : le bouton de création de
 * compte conserve ainsi son traitement propre. */
body:is(.home, .page-id-185241) :is(
    .uagb-block-6ccb53d1,
    .uagb-block-da6c21a9,
    .uagb-block-d0a7d033,
    .uagb-block-35139e65,
    .uagb-block-e20502e8,
    .uagb-block-1f7e9008,
    .uagb-block-f75034ec
) .uagb-buttons-repeater {
    border-color: #ffffff !important;
    background: transparent !important;
    color: #ffffff !important;
}

body:is(.home, .page-id-185241) :is(
    .uagb-block-6ccb53d1,
    .uagb-block-da6c21a9,
    .uagb-block-d0a7d033,
    .uagb-block-35139e65,
    .uagb-block-e20502e8,
    .uagb-block-1f7e9008,
    .uagb-block-f75034ec
) .uagb-buttons-repeater:is(:hover, :focus) {
    border-color: var(--tta-color-primary) !important;
    background: var(--tta-color-primary) !important;
    color: #ffffff !important;
}

/* Le CTA de contact utilise la même hiérarchie secondaire, adaptée au
 * fond clair de sa section afin de conserver un contraste lisible. */
body:is(.home, .page-id-185241) .uagb-block-a48e6e4d .uagb-buttons-repeater {
    border: 2px solid var(--tta-color-primary) !important;
    background: transparent !important;
    color: var(--tta-color-primary) !important;
}

body:is(.home, .page-id-185241) .uagb-block-a48e6e4d .uagb-buttons-repeater:is(:hover, :focus) {
    border-color: var(--tta-color-primary) !important;
    background: var(--tta-color-primary) !important;
    color: #ffffff !important;
}

/* Actions bbPress Style Pack : même gabarit que les boutons principaux du
 * site, sans modifier les liens ordinaires du forum. */
#bbpress-forums a.bsp_button1,
#bbpress-forums button.bsp_button1,
#bbpress-forums .bbp-submit-wrapper button,
#bbpress-forums .bbp-submit-wrapper input[type="submit"] {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border: 1px solid var(--tta-color-primary) !important;
    border-radius: var(--tta-radius) !important;
    background: var(--tta-color-primary) !important;
    color: #ffffff !important;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    box-shadow: none;
}

#bbpress-forums :is(a.bsp_button1, button.bsp_button1, .bbp-submit-wrapper button, .bbp-submit-wrapper input[type="submit"]):is(:hover, :focus) {
    border-color: var(--tta-color-primary-strong) !important;
    background: var(--tta-color-primary-strong) !important;
    color: #ffffff !important;
}

/* Champs et actions des extensions de compte et de formulaire. */
.uwp_page .btn-primary,
.uwp_page button[type="submit"],
.uwp_page input[type="submit"],
.srfm-form .srfm-submit-button {
    border-color: var(--tta-color-primary) !important;
    background: var(--tta-color-primary) !important;
    color: #ffffff !important;
}

.uwp_page .btn-primary:hover,
.uwp_page .btn-primary:focus,
.uwp_page button[type="submit"]:hover,
.uwp_page button[type="submit"]:focus,
.srfm-form .srfm-submit-button:hover,
.srfm-form .srfm-submit-button:focus {
    border-color: var(--tta-color-primary-strong) !important;
    background: var(--tta-color-primary-strong) !important;
}

.site-content input:not([type="checkbox"]):not([type="radio"]):focus,
.site-content select:focus,
.site-content textarea:focus {
    border-color: var(--tta-color-primary) !important;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14) !important;
    outline: none;
}

/* Parcours d'authentification : un gabarit sobre et identique pour toutes les
 * pages UserWP, sans modifier le contenu administré dans Gutenberg. */
body:is(.page-id-60305, .page-id-60307, .page-id-60311, .page-id-60313, .page-id-60315) #masthead {
    position: relative;
    background:
        linear-gradient(rgba(7, 6, 20, 0.72), rgba(7, 6, 20, 0.72)),
        url('/wp-content/uploads/2025/03/pexels-photo-3846048-1.jpeg') center 48% / cover;
}

body:is(.page-id-60305, .page-id-60307, .page-id-60311, .page-id-60313, .page-id-60315) .ast-single-entry-banner,
body:is(.page-id-60305, .page-id-60307, .page-id-60311, .page-id-60313, .page-id-60315) .entry-header {
    display: none;
}

body:is(.page-id-60305, .page-id-60307, .page-id-60311, .page-id-60313, .page-id-60315) #content {
    padding: 48px var(--tta-page-gutter) 72px;
    background: var(--tta-color-soft);
}

body:is(.page-id-60305, .page-id-60307, .page-id-60311, .page-id-60313, .page-id-60315) #primary {
    margin: 0;
}

body:is(.page-id-60305, .page-id-60307, .page-id-60311, .page-id-60313, .page-id-60315) article {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: clamp(24px, 5vw, 42px);
    border: 1px solid var(--tta-color-line);
    border-radius: var(--tta-radius);
    background: var(--tta-color-panel);
    box-shadow: var(--tta-shadow);
}

/* La page de changement de mot de passe possède déjà un titre UserWP.
 * Son ancien bandeau Spectra faisait doublon et les conteneurs alignfull
 * débordaient de la carte centrale. */
body.page-id-60315 .entry-content > .uagb-block-002b066a {
    display: none;
}

body.page-id-60315 .entry-content > .uagb-block-caed78c5,
body.page-id-60315 .entry-content > .uagb-block-caed78c5 > .uagb-container-inner-blocks-wrap,
body.page-id-60315 .uwp-change-class,
body.page-id-60315 .uwp_widget_change,
body.page-id-60315 .uwp_widget_change .uwp_page,
body.page-id-60315 .uwp_widget_change .row,
body.page-id-60315 .uwp_widget_change .card {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    box-sizing: border-box;
}

body.page-id-60315 .entry-content > .uagb-block-caed78c5 {
    left: auto !important;
    padding: 0 !important;
    background: transparent !important;
}

body.page-id-60315 .uwp_widget_change .row {
    margin-block: 0 !important;
}

body.page-id-60315 .uwp_widget_change .card,
body.page-id-60315 .uwp_widget_change .card-body {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media (max-width: 921px) {
    .site-content .ast-container {
        width: 100%;
        max-width: 100%;
    }

    .site-content .wp-block-uagb-container,
    .site-content .uagb-container-inner-blocks-wrap {
        max-width: 100%;
        box-sizing: border-box;
    }

    .wp-block-uagb-buttons .uagb-buttons__wrap,
    .wp-block-buttons {
        flex-wrap: wrap;
    }

    .wp-block-uagb-buttons-child,
    .wp-block-uagb-buttons-child .uagb-button__wrapper,
    .wp-block-uagb-buttons-child .uagb-buttons-repeater {
        max-width: 100%;
    }
}

@media (max-width: 544px) {
    body:is(.home, .blog, .page-id-185241, .page-id-186126, .page-id-188292) .site-content > .ast-container {
        padding-inline: 0;
    }

    body:is(.home, .page-id-185241, .page-id-186126, .page-id-188292) .entry-content > .wp-block-uagb-container,
    body:is(.home, .page-id-185241, .page-id-186126, .page-id-188292) .entry-content > .wp-block-group {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
    }

    body.blog .site-content .ast-row {
        margin-inline: 0;
    }

    body.blog .site-content .ast-article-post {
        width: 100%;
        padding-inline: 18px;
    }

    body.blog .site-content .ast-article-inner {
        width: 100%;
        max-width: 100%;
    }

    .entry-content h1,
    .entry-content h2,
    .ast-single-entry-banner h1,
    .ast-archive-entry-banner h1 {
        overflow-wrap: anywhere;
    }

    body:is(.page-id-60305, .page-id-60307, .page-id-60311, .page-id-60313, .page-id-60315) #content {
        padding: 28px 16px 48px;
    }

    body:is(.page-id-60305, .page-id-60307, .page-id-60311, .page-id-60313, .page-id-60315) article {
        padding: 22px 18px;
    }
}

.tta-member-space,
.tta-member-grid,
.tta-member-card {
    --tta-member-ink: #17212f;
    --tta-member-muted: #667386;
    --tta-member-line: #d9e1ea;
    --tta-member-panel: #ffffff;
    --tta-member-soft: #f5f8fb;
    --tta-member-accent: #0f766e;
    --tta-member-accent-strong: #0a5f58;
    color: var(--tta-member-ink);
}

.tta-member-space {
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 0 42px;
}

.tta-member-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

/* Gutenberg applique un block-gap vertical aux shortcodes successifs, même
 * lorsque leur conteneur est transformé en grille. Les espacements sont ici
 * entièrement pilotés par la propriété gap de .tta-member-grid. */
.tta-member-grid > .wp-block-shortcode,
.tta-member-grid > .tta-member-card {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

.tta-member-card {
    display: flex;
    height: 480px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(54, 87, 99, 0.12);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 38px rgba(33, 61, 70, 0.08);
}

.tta-member-card__header {
    display: flex;
    min-height: 68px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 20px 6px;
    border: 0;
    background: transparent;
    text-align: left;
}

.tta-member-card__header h2 {
    min-width: 0;
    margin: 4px 0 10px;
    color: var(--tta-member-ink);
    font-size: 1.4rem;
    letter-spacing: -0.025em;
    line-height: 1.2;
    text-transform: none;
}

.tta-member-card__body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 8px 20px 20px;
}

.tta-member-card__body > :last-child {
    margin-bottom: 0;
}

.tta-member-card__link,
.tta-member-card__link:visited {
    display: inline-flex;
    min-width: 0;
    min-height: 38px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 8px 11px;
    border: 0;
    border-radius: 14px;
    background: var(--tta-color-primary, var(--tta-member-accent));
    box-shadow: 0 7px 16px color-mix(in srgb, var(--tta-color-primary, var(--tta-member-accent)) 23%, transparent);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none !important;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.tta-member-card__link:hover,
.tta-member-card__link:focus {
    background: var(--tta-color-primary-strong, var(--tta-member-accent-strong));
    box-shadow: 0 9px 20px color-mix(in srgb, var(--tta-color-primary, var(--tta-member-accent)) 28%, transparent);
    color: #ffffff;
    text-decoration: none !important;
}

.tta-member-empty {
    margin: 0;
    color: var(--tta-member-muted);
}

.tta-member-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tta-member-list li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 3px;
    column-gap: 8px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--tta-member-line);
}

.tta-member-list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.tta-member-list a {
    color: var(--tta-member-ink);
    font-weight: 800;
    line-height: 1.3;
    text-decoration: none;
}

.tta-member-list a:hover,
.tta-member-list a:focus {
    color: var(--tta-member-accent-strong);
}

.tta-member-topic-content {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.tta-member-list span {
    color: var(--tta-member-muted);
    font-size: 13px;
}

.tta-member-list .tta-member-topic-dot {
    padding-top: 1px;
    color: inherit;
    font-size: 15px;
    line-height: 1.25;
    text-align: center;
}

.tta-member-topic-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.tta-member-topic-status {
    color: var(--tta-member-muted);
    font-size: 13px;
    font-weight: 400;
}

.tta-member-topic-status--unread {
    color: var(--tta-member-accent);
    font-weight: 800;
}

.tta-member-news-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tta-member-news-list li {
    display: flex;
    min-height: 82px;
    align-items: center;
    gap: 13px;
    padding: 12px 0;
    border-top: 1px solid var(--tta-member-line);
}

.tta-member-news-list li:first-child {
    padding-top: 0;
    border-top: 0;
}

.tta-member-news-list img,
.tta-member-news-placeholder {
    flex: 0 0 66px;
    width: 66px;
    height: 66px;
    border-radius: 15px;
    object-fit: cover;
}

.tta-member-news-placeholder {
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--tta-member-accent) 12%, white);
    color: var(--tta-member-accent);
    font-size: 12px;
    font-weight: 900;
}

.tta-member-news-copy {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.tta-member-news-copy > a,
.tta-member-news-copy > a:visited {
    display: -webkit-box;
    overflow: hidden;
    color: var(--tta-member-ink);
    font-weight: 800;
    line-height: 1.3;
    border-bottom: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tta-member-news-copy > a:hover,
.tta-member-news-copy > a:focus,
.tta-member-news-copy > a:active {
    color: var(--tta-member-accent-strong);
    text-decoration: none !important;
}

.tta-member-news-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--tta-member-muted);
    font-size: 13px;
}

.tta-member-news-author {
    font: inherit;
    font-style: italic;
}

.tta-member-unread-dot {
    display: none;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #62b64d;
    box-shadow: 0 0 0 4px rgba(98, 182, 77, 0.12);
}

.tta-member-news-list .is-unread .tta-member-unread-dot {
    display: inline-block;
}

.tta-member-photo {
    position: relative;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(135deg, #e7eef5, #f7fafc);
}

.tta-member-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 150px;
    object-fit: cover;
}

.tta-member-card--chat .tta-member-card__body {
    overflow: auto;
}

.tta-member-chat-preview-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tta-member-chat-preview-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 0;
    border-top: 1px solid var(--tta-member-line);
}

.tta-member-chat-preview-list li:first-child {
    padding-top: 0;
    border-top: 0;
}

.tta-member-chat-preview-list img.avatar {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
    background: #dfe9e7;
}

.tta-member-chat-preview-content {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 4px;
}

.tta-member-chat-preview-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 9px;
}

.tta-member-chat-preview-head strong {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tta-member-chat-preview-head time {
    flex: 0 0 auto;
    color: var(--tta-member-muted);
    font-size: 11px;
}

.tta-member-chat-preview-message {
    display: -webkit-box;
    overflow: hidden;
    color: var(--tta-member-muted);
    font-size: 13px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tta-member-forum-preview-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tta-member-forum-preview-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 0;
    border-top: 1px solid var(--tta-member-line);
}

.tta-member-forum-preview-list li:first-child {
    padding-top: 0;
    border-top: 0;
}

.tta-member-forum-preview-list img.avatar {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
    background: #dfe9e7;
}

.tta-member-forum-preview-content {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 3px;
}

.tta-member-forum-preview-topic {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

.tta-member-forum-preview-topic a,
.tta-member-forum-preview-topic a:visited {
    overflow: hidden;
    color: var(--tta-member-ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    border-bottom: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tta-member-forum-preview-topic a:hover,
.tta-member-forum-preview-topic a:focus,
.tta-member-forum-preview-topic a:active {
    color: var(--tta-member-accent-strong);
    text-decoration: none !important;
}

.tta-member-forum-preview-list .is-unread .tta-member-unread-dot {
    display: inline-block;
    flex: 0 0 8px;
}

.tta-member-forum-preview-message {
    display: -webkit-box;
    overflow: hidden;
    color: #445267;
    font-size: 13px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tta-member-forum-preview-meta {
    color: var(--tta-member-muted);
    font-size: 11px;
}

@media (max-width: 720px) {
    .tta-member-grid {
        grid-template-columns: 1fr;
    }
    
    .tta-member-card {
        height: auto;
        min-height: 280px;
    }
}

@media (max-width: 544px) {
    .tta-member-space {
        padding-bottom: 28px;
    }

    .tta-member-grid {
        gap: 12px;
    }

    .tta-member-card__header,
    .tta-member-card__body {
        padding-inline: 16px;
    }

    .tta-member-card__header {
        gap: 10px;
        padding-top: 16px;
    }

    .tta-member-card__header h2 {
        font-size: 1.25rem;
    }

    .tta-member-card__link,
    .tta-member-card__link:visited {
        min-height: 36px;
        padding: 7px 9px;
        font-size: 0.72rem;
    }
}