/*
Theme Name: CCBLA-Theme
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Média Animation
Author URI: https://www.kadencewp.com/
Description: A child theme for the Kadence Theme.
Version: 1.0.2
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: ccbla
*/

/* --- Anti faux-gras Safari/macOS --- */
html {
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* WCAG 2.2 — Utilitaires accessibilité globaux Ces classes sont utilisées dans TOUS les blocs du thème. Ne pas supprimer — requis pour la conformité WCAG 2.2 AA. */
/* Box shadow me saoule */
div, main, header, footer, article, section,
button, input, select, textarea, a,
.wp-block-button, .wp-block-button__link, .wp-element-button,
.kt-button, .kb-button, .button {
    box-shadow: none !important;
}

/* ── Text-box-trim : supprime le leading (half-leading) ────────── */
button, #wrapper a:not(.page-numbers), input[type="submit"],
.wp-block-button__link, .wp-element-button,
.kt-button, .kb-button, .button,
[class*="ccbla-"][class*="btn"],
[class*="ccbla-"][class*="link"],
.ccbla-utick-hero__btn,
.mlab-tarifs-btn,
.ccbla-imap-popup__nbtn,
header h1 {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}
button, #wrapper a:not(.page-numbers), input[type="submit"],
.wp-block-button__link, .wp-element-button,
.kt-button, .kb-button, .button,
[class*="ccbla-"][class*="btn"],
[class*="ccbla-"][class*="link"],
.ccbla-utick-hero__btn,
.mlab-tarifs-btn,
.ccbla-imap-popup__nbtn {
    line-height:1.1;
}

.min-width-125 {
    min-width: 125px;
}
.zoom1-9:hover {
transform:scale(1.09);
}
@media (min-width: 1025px) {
    footer .wp-block-kadence-navigation.navigation-desktop-orientation-vertical .menu-container .menu .menu-item {
        font-size: 16px;
    }
}
/* sr-only: masque visuellement mais reste lisible par les AT. Méthode clip-path recommandée par le W3C (évite les bugs iOS VoiceOver). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* sr-only--focusable: visible au focus clavier (skip links, etc.). Utilisé notamment dans loop-membres pour le lien "Aller à la liste". */
.sr-only--focusable:focus,
.sr-only--focusable:focus-within {
  position: static;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--pop-primary);
  color: var(--pop-white);
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  z-index: 9999;
}

.br-50,
.card-rapport .br-50 > div {
    border-radius: 50%!important;
}

@media (max-width: 767px) {
   .location-section .titre h3 {
    font-size:40px;
    line-height:45px;
    }
}
.location-section .titre h3{
    font-size:50px;
    line-height:55px;
}
/* ════════════════════════════════════════════════════════════════════
 * DESIGN TOKENS — Le POP! 2026–2027
 * Source de vérité UNIQUE : theme.json (palette settings.color.palette).
 * WordPress génère les --wp--preset--color--pop-* à partir de theme.json.
 * Les --pop-* ci-dessous sont des alias qui consomment ces variables WP,
 * avec fallback hex pour les contextes où les presets ne sont pas chargés.
 *
 * Pour la saison suivante : mettre à jour UNIQUEMENT theme.json.
 * Les --pop-* et les alias sémantiques cascadent automatiquement.
 * ════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Couleurs de marque — alias des WP presets (theme.json = SSOT) ─── */
  --pop-primary:        var(--wp--preset--color--pop-primary,      #6b4796);
  --pop-secondary:      var(--wp--preset--color--pop-secondary,    #812b29);
  --pop-quaternary:     var(--wp--preset--color--pop-quaternary,    #00726a);
  --pop-dark:           var(--wp--preset--color--pop-dark,          #111111);
  --pop-tertiary:       var(--wp--preset--color--pop-tertiary,      #164191);
  --pop-pastel-rose:    var(--wp--preset--color--pop-pastel-rose,   #f5b5d3);
  --pop-pastel-sage:    var(--wp--preset--color--pop-pastel-sage,   #c6dfc4);
  --pop-pastel-sky:     var(--wp--preset--color--pop-pastel-sky,    #b1dff5);
  --pop-pastel-lemon:   var(--wp--preset--color--pop-pastel-lemon,  #fff7b2);
  --pop-white:          var(--wp--preset--color--pop-white,         #ffffff);

  /* ── Alias sémantiques (utiliser ceux-ci dans le CSS custom) ─────── */
  --color-brand:        var(--pop-primary);
  --color-accent:       var(--pop-secondary);
  --color-cta-alt:      var(--pop-quaternary);
  --color-text:         var(--pop-dark);
  --color-link:         var(--pop-tertiary);
  --color-bg-warm:      var(--pop-pastel-rose);
  --color-bg-nature:    var(--pop-pastel-sage);
  --color-bg-cool:      var(--pop-pastel-sky);
  --color-bg-light:     var(--pop-pastel-lemon);

  /* ── Typographie ─────────────────────────────────────────────────── */
  --font-display:       'Agrandir Grand Bold', sans-serif;  /* Héros, grands titres */
  --font-heading:       'Agrandir Wide Medium', sans-serif; /* H1–H4, sous-titres   */
  --font-body:          'Instrument Sans', sans-serif;  /* Corps de texte, UI   */
}
/* a:visited — forcer la couleur sur les liens visités Spécificité montée pour battre les sélecteurs Kadence nav */
a:visited {
    color: var(--pop-dark);
}

/* Footer — couvre tous les patterns Kadence nav (menu, link, list) */
footer a:visited,
footer .kb-link-wrap a:visited,
footer .kb-link-wrap:visited,
footer .kb-nav-link-content:visited,
footer .menu-container .menu-item a:visited,
footer .menu-container .menu-item .menu-link:visited,
footer .wp-block-kadence-navigation a:visited,
footer .wp-block-kadence-navigation-link a:visited {
    color: var(--pop-dark);
}

/* Footer — hover sur lien visité: texte blanc pour rester lisible sur le background noir appliqué par Kadence au survol. Couvre les patterns Kadence nav (menu, link, list). */
footer a:visited:hover,
footer a:visited:focus-visible,
footer .kb-link-wrap a:visited:hover,
footer .kb-link-wrap a:visited:focus-visible,
footer .kb-nav-link-content:visited:hover,
footer .kb-nav-link-content:visited:focus-visible,
footer .menu-container .menu-item a:visited:hover,
footer .menu-container .menu-item a:visited:focus-visible,
footer .menu-container .menu-item .menu-link:visited:hover,
footer .menu-container .menu-item .menu-link:visited:focus-visible,
footer .wp-block-kadence-navigation a:visited:hover,
footer .wp-block-kadence-navigation a:visited:focus-visible,
footer .wp-block-kadence-navigation-link a:visited:hover,
footer .wp-block-kadence-navigation-link a:visited:focus-visible {
    color: #fff;
}

/* =============================================
   FOOTER — focus-visible TOUS LIENS : forcer fond noir + texte blanc
   2026-05-01 — Fix retour Matthias 2.5 : au focus clavier (sans hover
   préalable), Kadence n'applique pas le background noir → la règle
   color:#fff ci-dessus rendait le texte invisible sur fond clair
   ("Mon espace membre" et "Contact" du footer).
   On force ici le couple background+color+outline pour garantir un
   focus visible WCAG SC 2.4.7 + 1.4.11 (3:1 contraste UI), peu importe
   l'état :visited.
   Sélecteurs alignés sur la règle hover existante (L161-190).
   Pattern outline = standard thème : 3px solid #005fcc offset 2px.
   ============================================= */
footer a:focus-visible,
footer .kb-link-wrap a:focus-visible,
footer .kb-nav-link-content:focus-visible,
footer .menu-container .menu-item a:focus-visible,
footer .menu-container .menu-item .menu-link:focus-visible,
footer .wp-block-kadence-navigation a:focus-visible,
footer .wp-block-kadence-navigation-link a:focus-visible {
    background-color: var(--pop-dark) !important;
    color: #fff !important;
    outline: 3px solid #005fcc !important;
    outline-offset: 2px;
    border-radius: 2px;
}

/* FOOTER — état "page courante": fond noir → typo blanche Kadence applique un background noir sur l'item courant, il faut forcer la couleur du texte en blanc pour rester lisible. */
footer .current-menu-item > a,
footer .current-menu-item > a:visited,
footer .current-menu-item > .menu-link,
footer .current-menu-item > .menu-link:visited,
footer .current-menu-item > a *,
footer .menu-container .current-menu-item a,
footer .menu-container .current-menu-item a:visited,
footer .menu-container .current-menu-item .menu-link,
footer .menu-container .current-menu-item .menu-link:visited,
footer .menu-container .current-menu-item a *,
footer .wp-block-kadence-navigation .current-menu-item a,
footer .wp-block-kadence-navigation .current-menu-item a:visited,
footer .wp-block-kadence-navigation .current-menu-item a *,
footer .wp-block-kadence-navigation-link.current-menu-item a,
footer .wp-block-kadence-navigation-link.current-menu-item a:visited,
footer .wp-block-kadence-navigation-link.current-menu-item a *,
footer a[aria-current="page"],
footer a[aria-current="page"]:visited,
footer a[aria-current="page"] *,
footer .kb-link-wrap a[aria-current="page"],
footer .kb-nav-link-content[aria-current="page"] {
    color: #fff;
}

/* MASQUER le header UM par défaut */
.um .um-header.no-cover {
    display: none !important;
}
.logged-in .kb-identity img.custom-logo {
    width:250px;
    height:auto;
}

/* HEADER CUSTOM: logo gauche + infos droite */
.ccbla-profile-header {
    display: grid;
    grid-template-columns: 205px 1fr;
    gap: 2rem;
    align-items: center;
    padding: 2rem 0 2.5rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 0;
}

.ccbla-profile-logo img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e5e7eb;
    display: block;
}

.ccbla-profile-info h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    line-height: 1.2;
}

/* Nom du membre dans l'espace profil UM */
.ccbla-profile-name {
    color:       #000;
    font-family: var(--font-heading, var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif));
    font-size:   50px;
    font-weight: 400;
    line-height: 65px;
    margin:      0;
}

.ccbla-profile-info .ccbla-profile-desc {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

/* TABS DE NAVIGATION: icônes rondes */
/* Demande UX: un "rond" visible TOUT le temps (actif / inactif / hover) et aligné verticalement au texte. */
.um-profile-nav{
    --ccbla-um-dot: #fff;
}
.um-profile .um-profile-nav-item a{
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
    color:      var( --pop-dark)!important;
    font-family: var(--font-heading, var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif));
    font-size:   20px;
    font-weight: 400;
}
/* Transformer les icônes UM en ronds (sans glyph) */
.um-profile-nav-item a i[class*="um-faicon-"],
.um-profile-nav-item a i[class*="um-icon-"] {
    font-size: 0 !important;      /* masque le glyph */
    line-height: 0 !important;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 2px solid var(--ccbla-um-dot);
    background: transparent;
    opacity: .9;
    flex: 0 0 auto;
    align-self: center;
    transform: none;
}
.um-profile-nav-item a:hover i[class*="um-faicon-"],
.um-profile-nav-item a:hover i[class*="um-icon-"]{
    background: var(--ccbla-um-dot);
}
.um-profile-nav-item.active a i[class*="um-faicon-"],
.um-profile-nav-item.active a i[class*="um-icon-"] {
    background: var(--ccbla-um-dot);
    opacity: 1;
}

/* EVENTS EN 2 COLONNES */
.ccbla-events-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Mobile : 1 colonne */
@media (max-width: 767px) {
    .ccbla-events-list{ grid-template-columns: 1fr; }
}

/* Profil — zone ACF "Mon profil" */
.ccbla-profile-view__logo img{
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e5e7eb;
    display: block;
}
.ccbla-profile-view__empty{
    background:#fff;
    border:1px dashed rgba(0,0,0,.18);
    border-radius:12px;
    padding:2rem 1.5rem;
    text-align:center;
}
.ccbla-profile-view__empty-icon{ font-size: 2rem; display:block; margin-bottom:.6rem; }



.ccbla-event-card:hover {
    box-shadow: none;
}

.ccbla-event-card__media {
    flex-shrink: 0;
    width: 110px;
}

.ccbla-event-card__media img {
    width: 110px;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ccbla-event-card__body {
    padding: 1rem;
    flex: 1;
    min-width: 0;
}

/* RESPONSIVE: 1 colonne sur mobile */
@media (max-width: 767px) {
    .ccbla-profile-header {
        grid-template-columns: 120px 1fr;
        gap: 1rem;
    }
    .ccbla-profile-logo img {
        width: 110px;
        height: 110px;
    }
    .ccbla-events-list {
        grid-template-columns: 1fr;
    }
    .ccbla-profile-name {
        font-size: 30px;
        line-height: 38px;
    }
}

@media (max-width: 600px) {
    .ccbla-profile-header {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .ccbla-profile-logo img {
        margin: 0 auto;
    }
}
/* PROFIL: affichage des champs ACF */
.um-no-profile-fields { display: none; }
.ccbla-profile-view {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 2rem;
    align-items: start;
    padding: 2rem 0;
}

.ccbla-profile-view__logo img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    padding: 0.5rem;
    background: #fff;
}

.ccbla-profile-view__content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Descriptif pleine largeur */
.ccbla-profile-view__field--full {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 1.25rem;
}

.ccbla-profile-view__value--text {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.6;
}

/* Grille 2 colonnes pour les autres champs */
.ccbla-profile-view__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.ccbla-profile-view__field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ccbla-profile-view__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #aaa;
    font-weight: 600;
}

.ccbla-profile-view__value {
    font-size: 0.9rem;
    font-weight: 500;
    color: #222;
}

a.ccbla-profile-view__value {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid #e0e0e0;
}

a.ccbla-profile-view__value:hover {
    border-color: currentColor;
}

/* Responsive */
@media (max-width: 767px) {
    .ccbla-profile-view {
        grid-template-columns: 1fr;
    }
    .ccbla-profile-view__logo img {
        width: 100px;
        height: 100px;
    }
    .ccbla-profile-view__grid {
        grid-template-columns: 1fr;
    }
}

/* === CCBLA: hide decorative icons in buttons (2026-02-27) === */
.ccbla-field__file-icon{display:none !important;}
.ccbla-event-form__submit svg,
.ccbla-event-form__submit i{display:none !important;}


/* Cards — Media carrée (cover) */
.ccbla-event-card__media {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    flex-shrink: 0;
    min-width: 100px;
    max-width: 160px;
    border-radius: 8px;
}
.ccbla-event-card__media img {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: cover;
}
.ccbla-event-card__media a {
    display: block;
    height: 100%;
}
/* Placeholder quand pas de featured image */
.ccbla-event-card__media--placeholder {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    min-height: 80px;
}
.ccbla-event-card__ph {
    display: block;
    width: 100%;
    height: 100%;
}

/* Page UM (user) — Règle display:none supprimée. Le titre "Espace membres" est rendu une seule fois par the_content() (Kadence rowlayout de la page). ccbla_render_um_user_page_intro_blocks() n'est plus appelé → plus de doublon à masquer. */

/* Logo membre — rond + bordure noire (ACF membre_logo) */
.ccbla-profile-logo img,
.ccbla-profile-view__logo img{
    border-radius: 250px !important;
    border: 1px solid #000 !important;
    object-fit: cover;
}


/* Meta — aligner icônes (date/lieu) avec le texte */
.ccbla-event-card__meta-item{
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ccbla-event-card__meta-item svg{
    display:block;
}

/* ______________________________________________________________________________*/
/* ___________________________ UM LOGIN FORM ____________________________________*/
/* ______________________________________________________________________________*/
/* Maquette Se connecter — conforme wireframe image3                             */

/* ── Titres page connexion ─────────────────────────────────────────────────── */
.um-page-login .entry-title,
body.um-page-login .page-title {
    display: none !important; /* UM gère le titre via son form */
}

/* ── Conteneur global du form UM ─────────────────────────────────────────── */
.um.um-login {
    max-width: 100% !important;
}

/* ── Labels des champs ───────────────────────────────────────────────────── */
.um .um-field-label label {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* ── Inputs texte / email / password ─────────────────────────────────────── */
.um .um-field input[type="text"],
.um .um-field input[type="email"],
.um .um-field input[type="password"],
.um .um-field input[type="search"] {
    width: 45% !important;
    border: 1px solid #111 !important;
    border-radius: 0 !important;
    padding: 12px 14px !important;
    font-size: 1rem !important;
    font-family: inherit !important;
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
    transition: border-color 0.15s, outline-color 0.15s !important;
    /* WCAG 2.4.11 : outline transparent préserve le flux du focus — ne pas mettre none */
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.um .um-field input[type="text"]:focus,
.um .um-field input[type="email"]:focus,
.um .um-field input[type="password"]:focus {
    border-color: #111 !important;
    /* WCAG 2.4.11 — indicateur de focus visible ≥ 3 px sur le périmètre. 2026-05-20: fix shorthand outline — `1px #111` sans keyword <style> est rejetée par le parser CSS (outline-style retombe sur 'none' par défaut → focus invisible). Pattern projet: 3px solid #111 (noir, cohérent avec border input 1px noir + spec design POP épuré). */
    outline:        3px solid #111 !important;
    outline-offset: 2px !important;
}

/* ── Icônes show/hide password ───────────────────────────────────────────── */
.um .um-field .um-field-password .um-show-password {
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* ── Checkbox "Se souvenir de moi" ──────────────────────────────────────── */
.um .um-field-rememberme .um-field-area,
.um .um-field-rememberme label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    color: #111 !important;
    cursor: pointer !important;
}
.um .um-field-rememberme input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    border: 1.5px solid #111 !important;
    border-radius: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: #fff !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    position: relative !important;
}
.um .um-field-rememberme input[type="checkbox"]:checked {
    background: #111 !important;
}
.um .um-field-rememberme input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 4px !important; top: 1px !important;
    width: 6px !important; height: 11px !important;
    border: 2px solid #fff !important;
    border-top: none !important; border-left: none !important;
    transform: rotate(45deg) !important;
}

/* ── Bouton UM (SE CONNECTER / RÉINITIALISER MOT DE PASSE / ENVOYER) ────────
 *    Miroir exact de .wp-block-button .wp-element-button (spec Nic 24/04).
 *    UM émet <input type="submit" class="um-button"> avec des règles
 *    inline + un CSS plugin qui applique color/bg/border en `!important`
 *    → on remonte de spécificité via `body .um` (0,3,0) + `!important`
 *    sur les propriétés visuelles critiques (bg, color, border, font,
 *    padding, letter-case). Le reste (transition, appearance) reste
 *    sans `!important` pour laisser des overrides contextuels possibles. */
body .um .um-button,
body .um input[type="submit"].um-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    background-color: var(--wp--preset--color--pop-white, #fff) !important;
    color: var(--wp--preset--color--pop-dark, #111) !important;
    border: 1px solid var(--wp--preset--color--pop-dark, #111) !important;
    border-radius: 0 !important;
    padding-block: 12px 10px !important;
    padding-inline: 10px !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
    /* text-box-trim: indispensable pour que le texte soit centré comme sur les autres boutons du thème (sans trim, le padding asymétrique 12/10 est absorbé par l'espacement de la line-box et le texte descend de ~2px — bug constaté en staging 24/04). */
    text-box-trim: trim-both !important;
    text-box-edge: cap alphabetic !important;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    width: auto !important;
    max-width: 100%;
}
body .um .um-button:hover,
body .um input[type="submit"].um-button:hover {
    background-color: var(--wp--preset--color--pop-dark, #111) !important;
    color: var(--wp--preset--color--pop-white, #fff) !important;
}

/* ── Lien "Mot de passe oublié ?" ────────────────────────────────────────── */
.um .um-lost-password a,
.um-lost-password {
    font-size: 0.9rem !important;
    color: #111 !important;
    text-decoration: underline !important;
    font-weight: 400 !important;
}
.um .um-lost-password a:hover {
    color: #6b4796 !important;
}

/* ── Espacement champs ───────────────────────────────────────────────────── */
.um .um-col-1 .um-field,
.um .um-col-2 .um-field {
    margin-bottom: 1.25rem !important;
}

/* ── Messages erreur ─────────────────────────────────────────────────────── */
.um .um-field-error input,
.um .um-field-error input:focus {
    border-color: #812b29 !important;
}
.um .um-field-error-text {
    color: #812b29 !important;
    font-size: 0.82rem !important;
    margin-top: 4px !important;
}


/* ── Masquer icône déco dans le label UM ─────────────────────────────────── */
.um .um-field-label .um-field-label-icon { display: none !important; }


/* UTILITAIRES — Tags ellipse border-radius: 50% sur un rectangle → ellipse vraie (même rendu que le SVG de la maquette). Deux tailles: hero (sm) et cards (md). Usage: <span class="ccbla-tag-ellipse">Mon tag</span> → taille cards (125×30) <span class="ccbla-tag-ellipse ccbla-tag-ellipse--sm">…</span> → taille hero (112×27) Couleur: hérite de la var CSS parente (--_card-tag-bg, --_h-tag-bg, etc.) ou se définit via --ccbla-tag-bg / --ccbla-tag-c en inline. */
.ccbla-tag-ellipse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Taille md — cards (min-width adaptatif si texte plus long) */
    min-width: 125px;
    height: 30px;
    padding: 0 .8rem;
    border-radius: 50%;      /* ellipse vraie sur rectangle */
    overflow: hidden;
    /* Couleur: hérite des vars de composition parentes en cascade, ou surcharge via var locales */
    background: var(--ccbla-tag-bg, var(--_card-tag-bg, var(--_u-tag-bg, var(--_h-tag-bg, #111111))));
    color:      var(--ccbla-tag-c,  var(--_card-tag-c,  var(--_u-tag-c,  var(--_h-tag-c,  #ffffff))));
    /* Typo */
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: .02em;
    white-space: nowrap;
    line-height: 1;
    /* Transition fluide (hover compositions) */
    transition: background-color .25s ease, color .25s ease;
}

/* Variante sm — hero (112×27) */
.ccbla-tag-ellipse--sm {
    min-width: 112px;
    height: 27px;
    font-size: .75rem;
}



/* UTILITAIRES — Ellipse menu / navigation Réservé — styles à définir après test Kadence Navigation. */

/* Sélecteur confirmé par inspection front-end:.menu-item.kb-nav-link-content — le vrai <a> cliquable dans Kadence Nav */
/* Centrage des liens nav — header uniquement (boutons circulaires) Ne pas étendre au footer: les navs verticales doivent rester alignées à gauche */
.wp-block-kadence-header .menu-item .kb-nav-link-content {
    justify-content: center;
}



/* UTILITAIRES — Kadence Column: contenu collé en bas Applique sur le bloc Kadence Column (Advanced Columns) via "CSS Classes" dans les réglages du bloc → champ "HTML Anchor / Class". Principe: la colonne devient un flex column, le dernier enfant direct (typiquement le bloc bouton) est poussé en bas via margin-top:auto. Le bloc de contenu dynamique (kb-dynamic-html) juste avant hérite aussi de la poussée. Usage: → Dans Kadence Column: ajouter "ccbla-col-push-bottom" dans CSS Classes → Le dernier élément de la colonne descend automatiquement en bas */
.ccbla-col-push-bottom > .kt-inside-inner-col {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Dernier enfant direct poussé vers le bas */
.ccbla-col-push-bottom > .kt-inside-inner-col > *:last-child {
    margin-top: auto !important;
}

/* Si le dernier enfant est un bloc Kadence Buttons wrapper */
.ccbla-col-push-bottom > .kt-inside-inner-col > .wp-block-buttons:last-child,
.ccbla-col-push-bottom > .kt-inside-inner-col > .kb-buttons-wrap:last-child {
    margin-top: auto !important;
}

/* Si c'est un dynamic html (kb-dynamic-html) qu'on veut pousser en bas: classe complémentaire à ajouter sur la COLONNE parente */
.ccbla-col-push-bottom > .kt-inside-inner-col > .kb-row-layout-wrap:last-child,
.ccbla-col-push-bottom > .kt-inside-inner-col > .wp-block-group:last-child {
    margin-top: auto !important;
}



/* ═══════════════════════════════════════════════════════════════════
 * CCBLA — Empty state unifié (0 résultats)
 * Appliqué à tous les blocs qui affichent une liste filtrée :
 *   .ccbla-loop-agenda__empty, .ccbla-utick-agenda__empty,
 *   .ccbla-loop-membres__empty, .ccbla-espace-membre__empty
 * ═══════════════════════════════════════════════════════════════════ */
.ccbla-loop-agenda__empty,
.ccbla-utick-agenda__empty,
.ccbla-loop-membres__empty,
.ccbla-espace-membre__empty {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 2.25rem 1.5rem;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size: .95rem;
    font-style: italic;
    line-height: 1.55;
    width: 100%;
    box-sizing: border-box;
}
.ccbla-loop-agenda__empty::before,
.ccbla-utick-agenda__empty::before,
.ccbla-loop-membres__empty::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* Loop Projets – hauteur égale, excerpt poussé en bas */

/* 1. Le li est déjà cellule grid — on le passe flex */
.loop-projets .kb-query-item {
    display: flex;
    flex-direction: column;
}

/* 2. La card (Section) prend toute la hauteur disponible */
.loop-projets .card-projet {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 3. Le kt-inside-inner-col de la card propage */
.loop-projets .card-projet > .kt-inside-inner-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 4. La sous-colonne texte (titre + excerpt) s'étire */
.loop-projets .card-projet > .kt-inside-inner-col > .wp-block-kadence-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.loop-projets .card-projet > .kt-inside-inner-col > .wp-block-kadence-column > .kt-inside-inner-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 5. L'excerpt descend en bas */
.loop-projets .card-projet .kb-dynamic-html {
    margin-top: auto;
}

/* Loop Projets — couleurs cycliques (5n+1/2/3/4/5) Border sur.card-projet + titre h2 + excerpt colorés SSOT: var CSS --proj-fg définie par nth-child, héritée sur la card. Palette: --pop-secondary / --pop-tertiary / --pop-dark / --pop-primary / --pop-quaternary */

/* Définition de la couleur cyclique par position (héritée vers .card-projet) */
.loop-projets .kb-query-item:nth-child(5n+1) { --proj-fg: var(--pop-secondary); } /* Rouge  #812b29 */
.loop-projets .kb-query-item:nth-child(5n+2) { --proj-fg: var(--pop-tertiary);  } /* Bleu   #164191 */
.loop-projets .kb-query-item:nth-child(5n+3) { --proj-fg: var(--pop-dark);      } /* Noir   #111111 */
.loop-projets .kb-query-item:nth-child(5n+4) { --proj-fg: var(--pop-primary);   } /* Mauve  #6b4796 */
.loop-projets .kb-query-item:nth-child(5n+5) { --proj-fg: var(--pop-quaternary);} /* Vert   #00726a */

/* Border de la card */
.loop-projets .card-projet {
    border: 2px solid var(--proj-fg);
}

/* Titre + excerpt prennent la couleur cyclique */
.loop-projets .card-projet h2,
.loop-projets .card-projet .wp-block-post-title,
.loop-projets .card-projet .wp-block-kadence-advancedheading,
.loop-projets .card-projet .projet-excerpt {
    color: var(--proj-fg) !important;
}

/* Footer */ 
/* Footer nav : hover background limité à la largeur du mot */
footer .kb-navigation .kb-link-wrap {
    display: inline-block !important;
}

/* Loop Salles — couleurs cycliques par carte Ciblage exact demandé:.loop-salles +.card-salle Les 3 premières combinaisons reprennent la maquette voulue. 3 variantes supplémentaires sont prévues pour de futures salles. */

.loop-salles .kb-query-item {
    --ccbla-room-bg:      var(--pop-quaternary);
    --ccbla-room-accent:  var(--pop-pastel-lemon);
    
}

/* 1 — Vert + jaune */
.loop-salles .kb-query-item:nth-child(6n+1) {
    --ccbla-room-bg:      var(--pop-quaternary);
    --ccbla-room-accent:  var(--pop-pastel-lemon);
}

/* 2 — Bleu + rose */
.loop-salles .kb-query-item:nth-child(6n+2) {
    --ccbla-room-bg:      var(--pop-tertiary);
    --ccbla-room-accent:  var(--pop-pastel-rose);
}

/* 3 — Mauve + bleu ciel */
.loop-salles .kb-query-item:nth-child(6n+3) {
    --ccbla-room-bg:      var(--pop-primary);
    --ccbla-room-accent:  var(--pop-pastel-sky);
}

/* 4 — Rouge + vert doux */
.loop-salles .kb-query-item:nth-child(6n+4) {
    --ccbla-room-bg:      var(--pop-secondary);
    --ccbla-room-accent:  var(--pop-pastel-sage);
}

/* 5 — Noir + jaune */
.loop-salles .kb-query-item:nth-child(6n+5) {
    --ccbla-room-bg:      var(--pop-dark);
    --ccbla-room-accent:  var(--pop-pastel-lemon);
}

/* 6 — Vert + bleu ciel */
.loop-salles .kb-query-item:nth-child(6n+6) {
    --ccbla-room-bg:      var(--pop-quaternary);
    --ccbla-room-accent:  var(--pop-pastel-sky);
}

.loop-salles .kb-query-item .card-salle {
    height: 100%;
}

.loop-salles .kb-query-item .card-salle > .kt-inside-inner-col,
.loop-salles .kb-query-item .card-salle > .kt-row-layout-inner,
.loop-salles .kb-query-item .card-salle > .kt-row-column-wrap {
    height: 100%;
}

.loop-salles .kb-query-item .card-salle > .kt-row-layout-inner > .kt-row-column-wrap,
.loop-salles .kb-query-item .card-salle > .kt-inside-inner-col > .wp-block-kadence-rowlayout > .kt-row-layout-inner > .kt-row-column-wrap,
.loop-salles .kb-query-item .card-salle > .kt-row-column-wrap,
.loop-salles .kb-query-item .card-salle > .kt-inside-inner-col > .wp-block-kadence-rowlayout > .kt-row-column-wrap,
.loop-salles .kb-query-item .card-salle > .kt-inside-inner-col {
    height: 100%;
}

.loop-salles .kb-query-item .card-salle > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column:last-child,
.loop-salles .kb-query-item .card-salle > .kt-row-column-wrap > .wp-block-kadence-column:last-child,
.loop-salles .kb-query-item .card-salle > .kt-inside-inner-col > .wp-block-kadence-column:last-child,
.loop-salles .kb-query-item .card-salle > .kt-inside-inner-col > .wp-block-kadence-rowlayout > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column:last-child,
.loop-salles .kb-query-item .card-salle > .kt-inside-inner-col > .wp-block-kadence-rowlayout > .kt-row-column-wrap > .wp-block-kadence-column:last-child {
    display: flex;
}

.loop-salles .kb-query-item .card-salle > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column:last-child > .kt-inside-inner-col,
.loop-salles .kb-query-item .card-salle > .kt-row-column-wrap > .wp-block-kadence-column:last-child > .kt-inside-inner-col,
.loop-salles .kb-query-item .card-salle > .kt-inside-inner-col > .wp-block-kadence-column:last-child > .kt-inside-inner-col,
.loop-salles .kb-query-item .card-salle > .kt-inside-inner-col > .wp-block-kadence-rowlayout > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column:last-child > .kt-inside-inner-col,
.loop-salles .kb-query-item .card-salle > .kt-inside-inner-col > .wp-block-kadence-rowlayout > .kt-row-column-wrap > .wp-block-kadence-column:last-child > .kt-inside-inner-col {
    background: var(--ccbla-room-bg);
    color: var(--ccbla-room-accent) !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.loop-salles .kb-query-item .card-salle
:is(
    .kb-dynamic-html,
    .kb-dynamic-html *,
    .has-text-color,
    [style*="color:"],
    h1, h2, h3, h4, h5, h6,
    .wp-block-post-title,
    .wp-block-post-title a,
    .wp-block-kadence-advancedheading,
    .wp-block-kadence-advancedheading *,
    p, ul, ol, li, strong, em, span, a
) {
    color: var(--ccbla-room-accent) !important;
}

.loop-salles .kb-query-item .card-salle li::marker {
    color: var(--ccbla-room-accent);
}

.loop-salles .kb-query-item .card-salle
:is(.wp-block-button__link, .kb-button, .kt-button, .wp-block-kadence-advancedbtn a) {
    background: transparent !important;
    color: var(--ccbla-room-accent) !important;
    border: 1px solid var(--ccbla-room-accent) !important;
    box-shadow: none !important;
}

.loop-salles .kb-query-item .card-salle
:is(.wp-block-button__link, .kb-button, .kt-button, .wp-block-kadence-advancedbtn a):hover,
.loop-salles .kb-query-item .card-salle
:is(.wp-block-button__link, .kb-button, .kt-button, .wp-block-kadence-advancedbtn a):focus-visible {
    color: var(--ccbla-room-bg) !important;
    background: var(--ccbla-room-accent) !important;
    border-color: var(--ccbla-room-accent) !important;
}

.loop-salles .kb-query-item .card-salle
:is(.wp-block-button__link, .kb-button, .kt-button, .wp-block-kadence-advancedbtn a):focus-visible {
    outline: 3px solid var(--ccbla-room-accent);
    outline-offset: 2px;
}

.loop-salles .kb-query-item .card-salle :is( span, a ):hover {
    color:  var(--ccbla-room-bg) !important;
}
/* CCBLA — Loader POP partagé (V2) Anneau tournant + badge POP centré, sans déformation */
:root {
    --ccbla-pop-loader-logo: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%20fill%3D%22none%22%3E%0A%20%20%3Cg%20transform%3D%22translate%281.5%2021.5%29%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200.00973C22.6673%200.0401489%2046.1582%20-0.0206889%2068.795%200.00973C81.3642%200.00973%20100.737%20-0.355297%20111.384%203.38623C118.218%205.78932%20119.041%2010.6868%20112.604%2013.4853C102.598%2017.8352%2080.5405%2017.1356%2067.9408%2017.166C64.4324%2017.166%2049.2395%2017.2268%2045.3955%2017.2573V23.5844H0V0.00973ZM45.3955%2011.2039H60.741C65.8357%2011.2039%2069.3746%2011.356%2071.9678%2010.2609C74.2864%209.2875%2074.2559%207.85781%2071.9068%206.91482C69.4357%205.911%2063.7917%206.06309%2060.741%206.06309C56.3478%206.06309%2045.8227%206.06309%2045.365%206.06309V11.2039H45.3955Z%22%20fill%3D%22%231D1D1B%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M16.3213%2053.4254C38.9886%2053.4559%2027.1515%2053.4254%2049.7883%2053.4254C62.3575%2053.4254%2084.4146%2053.0604%2095.0618%2056.8019C101.896%2059.2355%20102.689%2064.1025%2096.2821%2066.901C86.2756%2071.2509%2064.2185%2070.5513%2051.6188%2070.5817C48.1104%2070.5817%2049.2392%2070.6425%2045.3952%2070.673V77.0001H16.3213V53.395V53.4254ZM45.3952%2064.6196H59.0322C64.1269%2064.6196%2069.4353%2064.7717%2072.0285%2063.6766C74.347%2062.7032%2074.3165%2061.2735%2071.9674%2060.3305C69.4658%2059.3267%2062.1134%2059.4788%2059.0627%2059.4788C54.6695%2059.4788%2045.8528%2059.4788%2045.3952%2059.4788V64.6196Z%22%20fill%3D%22%231D1D1B%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M76.7271%2038.4594C76.7271%2042.0184%2068.5511%2044.8778%2061.4733%2044.8778H57.4767C50.399%2044.8778%2042.2229%2041.988%2042.2229%2038.4594V38.064C42.2229%2034.5049%2050.399%2031.6456%2057.4767%2031.6456H61.4733C68.5511%2031.6456%2076.7271%2034.5354%2076.7271%2038.064V38.4594ZM108.272%2038.2465C108.333%2035.6304%20105.526%2033.0144%2099.8825%2031.0068C88.9913%2027.1436%2073.6459%2026.0181%2057.9954%2026.0181C57.9954%2026.0181%2060.8021%2026.0181%2060.7411%2026.0181C45.1211%2026.0181%2028.0063%2027.1436%2017.1455%2031.0068C11.5016%2033.0144%208.69484%2035.6304%208.75586%2038.2465C8.69484%2040.8625%2011.5016%2043.5089%2017.1455%2045.5166C28.0368%2049.3798%2042.3449%2050.5053%2057.9954%2050.5053H58.0564C58.0564%2050.5053%2053.1141%2050.5053%2053.1752%2050.5053C54.67%2050.5053%2059.1547%2050.5053%2060.7106%2050.4749C75.3848%2050.2619%2090.0896%2048.9843%2099.8825%2045.5166C105.526%2043.5089%20108.333%2040.8929%20108.272%2038.2769%22%20fill%3D%22%231D1D1B%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
    --ccbla-pop-loader-badge-bg: #fff;
    --ccbla-pop-loader-badge-radius: 50%;
    --ccbla-pop-loader-badge-width: calc(100% - 2px);
    --ccbla-pop-loader-badge-height: calc(100% - 2px);
    --ccbla-pop-loader-logo-size: 62% auto;
    --ccbla-pop-loader-shadow: none;
    --ccbla-pop-loader-ring-width: 1px;
    --ccbla-pop-loader-ring-color: rgba(0,0,0,.10);
    --ccbla-pop-loader-ring-accent: var(--wp--preset--color--pop-primary, #6b4796);
    --ccbla-pop-loader-size: 42px;
}
@keyframes ccbla-pop-loader-spin {
    to { transform: rotate(360deg); }
}

/* Boutons de submit AJAX partagés (événement + article) */
.ccbla-btn__spinner {
    display: none;
    position: relative;
    width: 22px;
    height: 22px;
    aspect-ratio: 1;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    pointer-events: none;
}
.ccbla-btn__spinner::before {
    content: '';
    position: absolute;
    inset: 0;
    border: var(--ccbla-pop-loader-ring-width) solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ccbla-pop-loader-spin .7s linear infinite;
}
.ccbla-btn__spinner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--ccbla-pop-loader-badge-width);
    height: var(--ccbla-pop-loader-badge-height);
    transform: translate(-50%, -50%);
    border-radius: var(--ccbla-pop-loader-badge-radius);
    background-color: var(--ccbla-pop-loader-badge-bg);
    background-image: var(--ccbla-pop-loader-logo);
    background-position: center;
    background-repeat: no-repeat;
    background-size: var(--ccbla-pop-loader-logo-size);
    box-shadow: var(--ccbla-pop-loader-shadow);
}
.ccbla-event-form__submit.is-loading .ccbla-btn__spinner { display: block; }
.ccbla-event-form__submit.is-loading .ccbla-btn__text { opacity: .85; }


/* Kadence Accordion — retirer la bordure basse du dernier item */
.kt-accordion-inner-wrap > .wp-block-kadence-pane:last-child,
.kt-accordion-inner-wrap > .wp-block-kadence-pane:last-child > .kt-accordion-header-wrap,
.kt-accordion-inner-wrap > .wp-block-kadence-pane:last-child > .kt-accordion-header-wrap > .kt-blocks-accordion-header,
.kt-accordion-inner-wrap > .wp-block-kadence-pane:last-child > .kt-accordion-panel {
    border-bottom: 0 !important;
}


/* ════════════════════════════════════════════════════════════════════
 * Kadence Query Card — .card-actu : zoom image au hover/focus
 * Aligné sur l'effet event-card (scale 1.09, cubic-bezier .45s)
 * Applicable à toute boucle Kadence Query Card avec la classe .card-actu
 * ════════════════════════════════════════════════════════════════════ */

/* Clip du débordement au zoom — sécurise tous les niveaux du wrapper image */
.card-actu .kb-query-item .wp-block-kadence-image,
.card-actu .kb-query-item .kb-advanced-image-link,
.card-actu .kb-query-item .kb-is-ratio-image {
    overflow: hidden;
}

/* État de repos + transition sur l'image */
.card-actu .kb-query-item .kb-img {
    transition: transform .45s cubic-bezier(.25, .46, .45, .94);
    will-change: transform;
}

/* Zoom au hover/focus-within sur la card entière (li) */
.card-actu .kb-query-item:hover .kb-img,
.card-actu .kb-query-item:focus-within .kb-img {
    transform: scale(1.09);
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .card-actu .kb-query-item .kb-img { transition: none; }
    .card-actu .kb-query-item:hover .kb-img,
    .card-actu .kb-query-item:focus-within .kb-img { transform: none; }
}

/* PATCHES GRAPHISTE — 2026-04-20 Section ajoutée en fin de fichier pour regrouper les ajouts design. */


/* PAGINATION — typographie harmonisée Agrandir Wide Medium 20px Couvre la pagination WP native utilisée dans la plupart des blocs: agenda-int-ext, agenda-scolaire, agenda-utick, loop-membres, archives CPT (projet, éducation-aux-médias, membre), blog Actualités. */
.page-numbers,
.nav-links .page-numbers,
.pagination .page-numbers,
.wp-block-query-pagination .page-numbers,
.wp-block-kadence-query-pagination .page-numbers,
.ccbla-pagination a,
.ccbla-pagination span {
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
}


/* COMPTEUR DE RÉSULTATS (ccbla-toolbar__count) Utilisé par agenda-int-ext et agenda-scolaire au-dessus de la grille. Format attendu: « 1-12 sur 25 évènements » */
.ccbla-toolbar__count {
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    color: #111111;
    letter-spacing: 0;
}


/* NEWSLETTER — intégration formulaire Brevo (.sib-form) Cible la page /newsletter où un HTML Brevo est collé. Les classes.sib-form* sont standard Brevo (ex-Sendinblue). */

/* Wrapper du form Brevo — conteneur neutre */
.sib-form {
    font-family: var(--wp--preset--font-family--instrument-sans, 'Instrument Sans', sans-serif);
    color: #111111;
}

/* Labels : "Prénom et nom", "Email*" */
.sib-form label,
.sib-form .entry__label,
.sib-form .sib-form-block__label,
.sib-form .input_label {
    font-family: var(--wp--preset--font-family--instrument-sans, 'Instrument Sans', sans-serif) !important;
    font-size: 22px !important;
    font-weight: 600 !important; /* SemiBold */
    color: #111111 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
}

/* Astérisque obligatoire : même couleur que label (noir, pas rouge) */
.sib-form label .required,
.sib-form label .sib-form-block__required,
.sib-form .entry__label .required,
.sib-form .entry__specification,
.sib-form abbr[title="required"] {
    color: #111111 !important;
    text-decoration: none !important;
}

/* Inputs : cadres 1px noir, pas de radius, typo gris Instrument Sans Regular */
.sib-form input[type="text"],
.sib-form input[type="email"],
.sib-form input[type="tel"],
.sib-form input[type="number"],
.sib-form input[type="password"],
.sib-form select,
.sib-form textarea,
.sib-form .input {
    border: 1px solid #111111 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    font-family: var(--wp--preset--font-family--instrument-sans, 'Instrument Sans', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #666666 !important; /* gris demandé pour le texte tapé */
    padding: 10px 12px !important;
    box-shadow: none !important;
}

.sib-form input[type="text"]:focus,
.sib-form input[type="email"]:focus,
.sib-form input[type="tel"]:focus,
.sib-form input[type="number"]:focus,
.sib-form input[type="password"]:focus,
.sib-form select:focus,
.sib-form textarea:focus,
.sib-form .input:focus {
    outline: 2px solid #111111;
    outline-offset: 2px;
    color: #111111 !important;
}

/* Placeholder : gris identique */
.sib-form input::placeholder,
.sib-form textarea::placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

/* Checkbox "J'accepte de recevoir..." + texte associé */
.sib-form .sib-checkbox-block label,
.sib-form label[for*="OPT_IN"],
.sib-form .sib-form-block[data-tag="opt-in"] label,
.sib-form p,
.sib-form .sib-form-block__legal,
.sib-form .sib-optin {
    font-family: var(--wp--preset--font-family--instrument-sans, 'Instrument Sans', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #111111 !important;
    line-height: 1.5 !important;
}

/* Bouton "M'inscrire" — aligné sur les autres boutons du site (fond blanc + bord 1px noir + typo noire, hover = inversion) */
.sib-form button[type="submit"],
.sib-form .sib-form-block__button,
.sib-form .sib-form-block__button-with-loader {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    border: 1px solid #111111 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #111111 !important;
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: background .15s ease, color .15s ease !important;
    box-shadow: none !important;
}
.sib-form button[type="submit"]:hover,
.sib-form .sib-form-block__button:hover,
.sib-form .sib-form-block__button-with-loader:hover {
    background: #111111 !important;
    color: #ffffff !important;
}
.sib-form button[type="submit"]:focus-visible {
    outline: 3px solid var(--wp--preset--color--pop-primary, #6b4796);
    outline-offset: 3px;
}


/* ─────────────────────────────────────────────────────────────────────────
   NOS PROJETS — Archive (.loop-projets + .card-projet)
   Hover : inversion complète — le bg prend la couleur cyclique (ex-border/titre),
           titre + excerpt passent en #fff (ex-bg).
         + zoom image 1.09
   Dépendance : --proj-fg défini plus haut (5n+1..5, hérité par .kb-query-item)
              + classes .loop-projets, .card-projet, .projet-excerpt
   ───────────────────────────────────────────────────────────────────────── */

/* Transition douce pour l'inversion */
.loop-projets .kb-query-item {
    background-color: transparent;
    transition: background-color .3s ease;
}
.loop-projets .card-projet h2,
.loop-projets .card-projet .wp-block-post-title,
.loop-projets .card-projet .wp-block-kadence-advancedheading,
.loop-projets .card-projet .projet-excerpt {
    transition: color .3s ease;
}

/* Image : clip + scale 1.09 au hover (pattern card-actu) */
.loop-projets .kb-query-item .kb-image-is-ratio-size,
.loop-projets .kb-query-item .kb-is-ratio-image {
    overflow: hidden;
}
.loop-projets .kb-query-item .kb-img {
    transition: transform .4s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
}
.loop-projets .kb-query-item:hover .kb-img,
.loop-projets .kb-query-item:focus-within .kb-img {
    transform: scale(1.09);
}

/* HOVER : inversion bg = var cyclique (ex-couleur titre/excerpt) */
.loop-projets .kb-query-item:hover,
.loop-projets .kb-query-item:focus-within {
    background-color: var(--proj-fg) !important;
}

/* HOVER : titre + excerpt deviennent blanc (ex-bg) */
.loop-projets .kb-query-item:hover .card-projet h2,
.loop-projets .kb-query-item:focus-within .card-projet h2,
.loop-projets .kb-query-item:hover .card-projet .wp-block-post-title,
.loop-projets .kb-query-item:focus-within .card-projet .wp-block-post-title,
.loop-projets .kb-query-item:hover .card-projet .wp-block-kadence-advancedheading,
.loop-projets .kb-query-item:focus-within .card-projet .wp-block-kadence-advancedheading,
.loop-projets .kb-query-item:hover .card-projet .projet-excerpt,
.loop-projets .kb-query-item:focus-within .card-projet .projet-excerpt {
    color: #ffffff !important;
}

/* Respecte prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .loop-projets .kb-query-item .kb-img,
    .loop-projets .kb-query-item { transition: none; }
    .loop-projets .kb-query-item:hover .kb-img,
    .loop-projets .kb-query-item:focus-within .kb-img { transform: none; }
}

/* SINGLE EVENT HERO — bannière pleine largeur Kadence Image Classe `single-image-hero` appliquée sur le <figure> via le panneau Advanced de Kadence Image dans l'Element single event. HTML attendu: <figure class="wp-block-kadence-image … single-image-hero alignfull"> <img src … srcset … sizes="(max-width: 1645px) 100vw, 1645px"> </figure> Rôle: forcer le format 21/9 cinéma (≈ ratio ccbla_single_event 2560×1097) peu importe le ratio natif de la featured image source. - aspect-ratio 2560/1097 → format cinéma, maquette capture 1 - max-height 618px → plafond de hauteur pour éviter les bannières géantes sur très grands écrans (1445px+ large ferait 1445/2.33 ≈ 620px sans ce garde-fou) - object-fit: cover → zoom + crop centre, jamais de déformation. Les images carrées (UTick 800×800) sont cropées top/bottom de ≈57% de leur hauteur. - object-position: center → crop centré verticalement (sujet central) - width 100% + height auto → laisse aspect-ratio piloter la hauteur Note: le figure lui-même garde les styles Kadence natifs (alignfull, etc.), seul l'<img> interne est recadré. width/height natifs sur l'<img> sont écrasés par width:100% + height:auto pour laisser aspect-ratio agir. */
.single-image-hero {
    margin: 0;
    width: 100%;
}
.single-image-hero img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2560 / 1097;
    max-height: 618px;
    object-fit: cover;
    object-position: center;
}

/* POP — Stratégie ultra-wide (>2560px): cap ciblé, pas global On NE bride PAS `.wp-site-blocks` globalement: les rows Kadence `.alignfull` doivent percer à 100vw sur tous écrans (fonds violets Billetterie, hero rose, etc.) même au-dessus de 2560px. Pour éviter le ballooning des éléments dimensionnés en `vw`, chaque bloc vulnérable se cappe lui-même: — motif-pop: clampé côté JS dans syncPortaledBox() via la constante SITE_CAP_PX (voir blocks/motif-pop/front.js). Si tu modifies ce seuil, synchronise les deux endroits. — art-accueil-epingle: utilise `min(50vw, 1280px)` sur grille et min-height (voir blocks/art-accueil-epingle/style.css). — agenda-utick: déjà cappé via clamp() sur font-size. Tout nouveau bloc utilisant `vw` doit prévoir son propre cap (pattern: `min(Xvw, X/100 * 2560 px)`). */

/* ════════════════════════════════════════════════════════════════════
 * Fix Imagify — <picture> wrapper sur les images cards ccbla
 * ────────────────────────────────────────────────────────────────────
 * Problème confirmé en prod :
 *   Imagify (Next-Gen Images) wrappe chaque <img> dans un <picture> et
 *   TRANSFÈRE la classe de l'<img> sur le <picture> parent. Résultat :
 *
 *     <picture class="ccbla-article-card__img wp-post-image">
 *       <source type="image/webp" srcset="...">
 *       <img width="448" height="415" src="...">  ← AUCUN CSS !
 *     </picture>
 *
 *   Le CSS du bloc (.ccbla-article-card__img { position: absolute;
 *   inset: 0; width: 100%; height: 100%; object-fit: cover; }) ciblait
 *   à l'origine l'<img>. Il atterrit maintenant sur le <picture>, qui :
 *     - Accepte correctement position/size (100% x 100% du wrapper)    → OK
 *     - IGNORE object-fit : propriété réservée aux éléments remplacés  → PROBLÈME
 *
 *   L'<img> interne s'affiche à sa taille native (attributs HTML
 *   width/height) et ne remplit pas son parent <picture>. On voit donc
 *   le background de l'img-wrap (#e8e8e8 ou palette8 selon Kadence).
 *
 * Fix : ré-appliquer explicitement object-fit + remplissage 100% sur
 *       l'<img> enfant direct d'un <picture> ccbla-…__img. inherit
 *       d'object-position respecte les overrides par bloc (ex. event-
 *       card = center top, article-card = défaut center).
 *
 * Sélecteur : picture[class*="ccbla-"][class*="__img"] > img
 *   ↳ double class* AND → matche ccbla-article-card__img,
 *     ccbla-event-card__img, ccbla-event-card-utick__img, loop-membres,
 *     et tout futur block utilisant le pattern ccbla-*__img.
 *
 * Rétrocompat : si Imagify est désactivé, la classe reste sur l'<img>,
 *   le sélecteur picture > img ne matche pas → règles d'origine actives
 *   → aucun changement de rendu.
 * ════════════════════════════════════════════════════════════════════ */
picture[class*="ccbla-"][class*="__img"] > img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: inherit;
    display:         block;
}

/* ════════════════════════════════════════════════════════════════════
 * A11Y — Overrides plugins tiers (audit axe WCAG 2.2 AA, 2026-04-23)
 *
 * Fixes côté thème pour issues de plugins non modifiés :
 *  1. Kadence Accordion : focus-visible header buttons    (SC 2.4.7)
 *  2. Ultimate Member   : contraste #888 (3.54:1) < 4.5:1 (SC 1.4.3)
 *  3. Ultimate Member   : focus-visible login form        (SC 2.4.7)
 *  4. Newsletter GDPR   : focus-visible checkbox replaced (SC 2.4.7)
 *  5. Footer Kadence    : target-size tel: link 24×24 min (SC 2.5.8)
 *
 * Pattern outline : cohérent avec blocks/agenda-int-ext/style.css L234
 * ════════════════════════════════════════════════════════════════════ */

/* 1. Kadence Accordion — SC 2.4.7 */
.kt-blocks-accordion-header:focus-visible {
    outline:         3px solid #005fcc;
    outline-offset:  2px;
}

/* 2. Ultimate Member — contraste texte (SC 1.4.3, AA 4.5:1)
 *    #888 → #595959 = 7.46:1 sur blanc (gris discret conforme).
 *    UM applique ses règles via `.um .um-xxx { color:#888 !important }`
 *    (spécificité 0,2,0). On remonte avec `body.um-page-XXX` (0,3,0)
 *    + fallback `.um .um-xxx` pour couvrir tous les templates UM. */
body .um .um-field-checkbox-option,
body .um .um-link-alt,
.um .um-field-checkbox-option,
.um .um-link-alt {
    color: #595959 !important;
}

/* 3. Ultimate Member — focus-visible (SC 2.4.7)
 *    UM applique `outline: 0 !important` sur .um-button et sur les inputs
 *    via `.um .um-button { outline:0 !important }` (0,2,0). Même logique
 *    de remontée de spécificité : body + !important sur outline/offset. */
body .um input[type="checkbox"]:focus-visible,
body input[name="rememberme"]:focus-visible,
body input#um-submit-btn:focus-visible,
.um input[type="checkbox"]:focus-visible,
input[name="rememberme"]:focus-visible,
input#um-submit-btn:focus-visible {
    outline:         3px solid #005fcc !important;
    outline-offset:  2px !important;
}

/* 4. Newsletter GDPR — focus-visible (SC 2.4.7) La classe.input_replaced indique un checkbox visuellement masqué (opacity:0) remplacé par un pseudo-element sur label sibling. Cascade défensive: on couvre input + label + pseudo before/after. */
#GDPR:focus-visible,
#GDPR:focus-visible + label,
#GDPR:focus-visible + label::before,
#GDPR:focus-visible ~ label,
#GDPR:focus-visible ~ label::before {
    outline:         3px solid #005fcc;
    outline-offset:  2px;
}

/* 5. Kadence footer tel: link — target-size 24×24 min (SC 2.5.8 AA)
 *    2026-05-13 (passe 3 — demande Nic) : min-height retiré + padding 0.
 *    Le hit-area target-size reste géré par le line-height du conteneur
 *    parent (.coordo-contact). Si SC 2.5.8 alerte un jour à l'audit,
 *    réintroduire min-height: 24px. */
a[href^="tel:"] {
    display:     inline-block;
    padding:     0;    padding-bottom: 3px;
    padding-top: 2px;
}

/* 6. UM login / password-reset — inputs alignés spec thème La règle générale `.um.um-field input[...]` (ligne ~585) hérite d'un `width: 45%` + `border: 1.5px` + `padding: 12px 14px` qui ne correspond ni au gabarit thème (height 50px, border 1px pop-dark, Instrument Sans REGULAR 14px, radius 0, padding 0 16px) ni aux besoins visuels d'une page standalone login/reset. On overrride UNIQUEMENT sur les pages UM concernées (`.um-page-login` + tout `.um-page-password-*`) pour ne pas casser le profile-edit où le width:45% peut être volontaire pour la grille 2 colonnes. Note: la police est Instrument Sans *Regular* 14px (spec Nic 24/04, différent de GF qui est en 16px 600). Les placeholders héritent naturellement de cette config → rendu cohérent. */
body.um-page-login .um .um-field input[type="text"],
body.um-page-login .um .um-field input[type="email"],
body.um-page-login .um .um-field input[type="password"],
body.um-page-login .um .um-field input[type="search"],
body[class*="um-page-password"] .um .um-field input[type="text"],
body[class*="um-page-password"] .um .um-field input[type="email"],
body[class*="um-page-password"] .um .um-field input[type="password"],
body[class*="um-page-password"] .um .um-field input[type="search"] {
    width:        100% !important;
    height:       50px !important;
    padding:      0 16px !important;
    border:       1px solid #111 !important;
    font-size:    16px !important;
    font-weight:  400 !important;
    font-family:  var(--wp--preset--font-family--instrument-sans, 'Instrument Sans', sans-serif) !important;
    line-height:  1.2;
}

/* 7. UM login — alignement des colonnes `rememberme/submit` et
 *    `mot de passe oublié ?`
 *    ─────────────────────────────────────────────────────────
 *    UM applique `.um-center { text-align: center }` sur le wrapper
 *    du bouton submit ET `.um-col-alt-b { text-align: center }` sur
 *    le lien "mot de passe oublié". Nic veut tout aligné à gauche
 *    SANS toucher à la règle `.um-center` générique (utilisée ailleurs,
 *    ex. messages UM succès/info). On cible donc précisément :
 *      • `.um-col-alt .um-center` (scope : bas du form login)
 *      • `.um-col-alt-b`          (wrapper lien "mot de passe oublié") */
.um .um-col-alt .um-center,
.um .um-col-alt-b {
    text-align: left !important;
}

/* 8. UM field-type_block — neutraliser le `style="text-align:center"` inline émis par UM sur les blocs d'intro (page password-reset: "Pour réinitialiser votre mot de passe, veuillez saisir…") Le style est INLINE sur un `<div>` enfant direct de `.um-field-block` → seul `!important` permet de l'overrider. Scope attribut-selecteur pour ne rien casser des blocs UM qui auraient légitimement un autre text-align inline. */
.um .um-field-type_block .um-field-block [style*="text-align"] {
    text-align: left !important;
}

/* NEWSLETTER — intégration formulaire Brevo (.sib-form) Cible la page /newsletter où le HTML Brevo est collé dans un bloc HTML Kadence. Les classes.sib-*,.entry__*,.form__*,.input_replaced sont préservées: main.js de Brevo (chargé en <script defer>) y rattache la soumission AJAX, l'affichage des messages et la validation client. La feuille sib-styles.css n'est PAS chargée — on owne le visuel ici. v2 — 2026-04-29: refonte complète sur maquette Figma - gap label → input: 20px (image 2) - margin-bottom inputs: 40px (image 3) - gap consent → bouton: 80px desktop / 60px tablette / 45px mobile (image 4) - labels Instrument Sans 22px (desktop+tablette) / 20px mobile - astérisque optin RGPD: superscript --pop-dark, collé à "courriers." - messages succès/erreur stylés thème (border secondary/quaternary) */

/* === Wrapper & containers — neutralisation styles Brevo =============== */
.sib-form {
    background: transparent !important;
    color: var(--pop-dark);
    font-family: var(--wp--preset--font-family--instrument-sans, 'Instrument Sans', sans-serif);
    text-align: left !important;
}
.sib-form-container,
.sib-form #sib-container {
    background: transparent !important;
    border: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    direction: ltr;
}
/* Brevo wrappe chaque field dans <div> sans classe — on lui retire le padding */
.sib-form #sib-form > div {
    padding: 0 !important;
}

/* Espacement vertical entre fields (= 40px sous chaque input, image 3) */
.sib-form #sib-form > div > .sib-form-block {
    margin-bottom: 40px;
}

/* Labels « Prénom et nom * », « Email * »:not(.entry__label_optin) car le span vide injectant l'astérisque RGPD porte aussi la classe.entry__label — sans cette restriction il hériterait display:block + font-size:22px et apparaîtrait seul sur une ligne en gras. */
.sib-form .entry__label:not(.entry__label_optin) {
    display: block;
    margin: 0 0 20px 0; /* 20px = gap label → input (image 2) */
    font-family: var(--wp--preset--font-family--instrument-sans, 'Instrument Sans', sans-serif) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--pop-dark) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    background: transparent !important;
}
/* Astérisque " *" injecté via [data-required] (Brevo le pose en attribut, pas dans le DOM) */
.sib-form .entry__label[data-required]::after {
    content: " " attr(data-required);
}
.sib-form .entry__specification {
    display: none; /* doublon astérisque éventuel */
}

/* === Inputs (text + email) ============================================ */
.sib-form .input,
.sib-form input[type="text"],
.sib-form input[type="email"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--pop-dark) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    font-family: var(--wp--preset--font-family--instrument-sans, 'Instrument Sans', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--pop-dark) !important;
    line-height: 1.4 !important;
    padding: 14px 16px !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}
.sib-form .input:focus,
.sib-form input[type="text"]:focus,
.sib-form input[type="email"]:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    border-color: var(--pop-dark) !important;
}
.sib-form .input::placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

/* === Bloc consentement RGPD (case + texte) ============================ */
.sib-form #sib-form > div > .sib-optin {
    margin-bottom: 80px; /* gap consent → bouton DESKTOP (image 4) */
}
.sib-form .sib-optin .form__entry,
.sib-form .sib-optin .form__label-row,
.sib-form .sib-optin .entry__choice {
    display: block;
}
.sib-form .sib-optin label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    margin: 0;
    font-family: var(--wp--preset--font-family--instrument-sans, 'Instrument Sans', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--pop-dark) !important;
    line-height: 1.5 !important;
    background: transparent !important;
    text-align: left;
}
.sib-form .sib-optin label > span {
    flex: 1;
    background: transparent !important;
    color: var(--pop-dark) !important;
    font-family: inherit !important;
    font-size: inherit !important;
}
.sib-form .sib-optin label > span p {
    display: inline;
    margin: 0;
    color: inherit;
    font: inherit;
}

/* Liens « politique de confidentialité » / « mentions légales » */
.sib-form .sib-optin a {
    color: var(--pop-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sib-form .sib-optin a:hover,
.sib-form .sib-optin a:focus-visible {
    color: var(--pop-primary);
}

/* Checkbox native restaurée (Brevo la masquait pour afficher un faux span) */
.sib-form .sib-optin .input_replaced {
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 18px !important;
    height: 18px !important;
    margin: 4px 0 0 0;
    flex: 0 0 18px;
    accent-color: var(--pop-dark);
    cursor: pointer;
}
.sib-form .sib-optin .checkbox.checkbox_tick_positive {
    display: none !important; /* on n'utilise pas le faux span Brevo */
}

/* Astérisque optin RGPD — superscript noir collé à "courriers." (maquette Figma)
   Override de .entry__label[data-required]::after (qui rend " *" inline pour
   les labels Prénom/Email). Spécificité égale → ce bloc DOIT rester APRÈS
   la règle .entry__label[data-required] générique ci-dessus. */
.sib-form .entry__label_optin[data-required]::after {
    content: attr(data-required);
    color: var(--pop-dark);
    font-weight: 700;
    font-size: 0.85em;
    vertical-align: super;
    margin-left: 0; /* collé au "." final, pas d'espace avant */
    line-height: 0; /* évite que le superscript pousse la line-height */
}

/* === Captcha Turnstile ================================================= */
.sib-form #sib-form > div > .sib-captcha {
    margin-bottom: 32px;
}
.sib-form .cf-turnstile {
    display: flex;
    justify-content: flex-start;
}

/* === Bouton « M'INSCRIRE » — aligné style boutons thème ================ */
.sib-form button[type="submit"],
.sib-form .sib-form-block__button,
.sib-form .sib-form-block__button-with-loader {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 10px 10px 10px!important;
    border: 1px solid var(--pop-dark) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: var(--pop-dark) !important;
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: background .15s ease, color .15s ease !important;
    box-shadow: none !important;
}
.sib-form button[type="submit"]:hover,
.sib-form .sib-form-block__button:hover,
.sib-form .sib-form-block__button-with-loader:hover {
    background: var(--pop-dark) !important;
    color: #ffffff !important;
}
.sib-form button[type="submit"]:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 3px;
}
/* Loader SVG dans le bouton — caché par défaut, Brevo l'affiche via inline style pendant submit */
.sib-form .sib-hide-loader-icon {
    display: none;
}

/* === Messages succès / erreur — style thème ========================== */
.sib-form .sib-form-message-panel {
    display: none; /* PAS de !important — main.js Brevo override via inline style */
    margin: 0 0 32px !important;
    padding: 16px 20px !important;
    border: 1px solid var(--pop-dark) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: var(--pop-dark) !important;
    font-family: var(--wp--preset--font-family--instrument-sans, 'Instrument Sans', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    text-align: left !important;
    max-width: 100% !important;
}
#error-message {
    border-color: var(--pop-secondary) !important;
    color: var(--pop-secondary) !important;
}
#success-message {
    border-color: var(--pop-quaternary) !important;
    color: var(--pop-quaternary) !important;
}
.sib-form .sib-form-message-panel__text {
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
}
.sib-form .sib-form-message-panel__inner-text {
    color: inherit !important;
    font: inherit !important;
    background: transparent !important;
}
.sib-form .sib-icon.sib-notification__icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: currentColor;
}

/* Erreurs sous chaque champ (Brevo les rend via inline display).:empty masque les <label class="entry__error"> vides présents par défaut dans le HTML Brevo (1 par bloc, y compris captcha) — sinon ils apparaissent comme rectangles blancs bordés même sans message d'erreur. */
.sib-form .entry__error:empty {
    display: none !important;
}
.sib-form .entry__error:not(:empty) {
    margin-top: 8px !important;
    padding: 8px 12px !important;
    border:none;
    border-radius: 0 !important;
    background: none;
    color: var(--pop-secondary) !important;
    font-family: var(--wp--preset--font-family--instrument-sans, 'Instrument Sans', sans-serif) !important;
    font-size: 14px !important;
}
/* Honeypot anti-bot (champ piège) */
.sib-form .input--hidden {
    display: none !important;
}

/* === Breakpoints Kadence : tablette (≤ 1024px) ======================== */
@media (max-width: 1024px) {
    .sib-form .entry__label {
        font-size: 22px !important; /* tablette = desktop */
    }
    .sib-form #sib-form > div > .sib-optin {
        margin-bottom: 60px; /* gap consent → bouton TABLETTE (image 4) */
    }
}

/* === Breakpoints Kadence : mobile (≤ 767px) =========================== */
@media (max-width: 767px) {
    .sib-form .entry__label {
        font-size: 20px !important; /* mobile (image 4 specs) */
    }
    .sib-form #sib-form > div > .sib-form-block {
        margin-bottom: 32px;
    }
    .sib-form #sib-form > div > .sib-optin {
        margin-bottom: 45px; /* gap consent → bouton MOBILE (image 4) */
    }
    .sib-form button[type="submit"],
    .sib-form .sib-form-block__button-with-loader {
        font-size: 18px !important;
        padding: 12px 24px !important;
    }
}
/* FORMULAIRE CONTACT — Notice de présélection sujet 2026-05-02 — Pack 2 retours Matthias 11: indicateur visuel quand le sélect "Sujet" est pré-rempli via paramètre URL ?sujet=... (lien depuis "Devenir membre" du footer, etc.). Spec UX: pas de couleur d'accent, pas de picto, pas d'italique, pas de bordure — texte simple en dessous du select, conformément à la demande Nic 2026-05-02 (rev2). Injecté côté JS dans ccbla-prefill.js, juste APRÈS le wrapper.kb-adv-form-field du select Sujet. */
.ccbla-prefill-notice {
    color:            var(--pop-dark);
    padding:          8px 0 0 0;
    margin:           0 0 8px 0;
    font-family:      var(--font-body);
    font-size:        15px;
    line-height:      1.4;
}

/* WCAG SC 1.4.4 — texte zoomable, on garde tailles relatives */
@media (max-width: 767px) {
    .ccbla-prefill-notice {
        font-size: 14px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2026-05-11 — MISSIONS BOUTONS (Nic, ULTRA INSTINCT)
 *
 * Trois patches déposés en bloc cohérent en fin de fichier pour single
 * source of truth + spécificité gagnante naturelle (ordre cascade) :
 *
 *   A. Padding boutons zone membre :
 *      padding-block: 10px 10px ; padding-inline: 10px
 *      Override notamment body .um .um-button (L716-717 actuel: 12px/10px).
 *
 *   B. Zone membre — :hover sans outline, :focus-visible avec outline
 *      Pattern WCAG 2.4.7 : outline visible UNIQUEMENT au focus clavier.
 *      Le hover reste sans outline (geste souris explicite, redondant).
 *
 *   C. GLOBAL site — :focus et :active inversion couleurs
 *      bg: var(--wp--preset--color--pop-dark, #111) ; color: #fff
 *      Couvre tous les boutons natifs + Kadence + WP block + thème.
 *      :active = clic souris en cours. :focus = post-clic / nav clavier
 *      (Nic a explicitement demandé :focus, pas :focus-visible).
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── A. Padding zone membre (10/10/10/10) ─────────────────────────────── */
/* 2026-05-12 — Extension: ajout de.ccbla-event-form__submit (boutons "Soumettre" des forms proposer-evenement + proposer-article, présents en zone membre comme en zone publique). Override des règles bloc blocks/proposer-evenement/style.css L870 et blocks/proposer-article/style.css L815 qui posaient padding-block: 12px 10px. */
body .um .um-button,
body .um input[type="submit"].um-button,
body .um input[type="submit"],
.ccbla-events-tab .ccbla-events-tab__card-edit,
.ccbla-events-tab .ccbla-mod-card-banner__cta,
.ccbla-posts-tab .ccbla-posts-tab__action,
.ccbla-posts-tab .ccbla-mod-card-banner__cta,
.ccbla-posts-tab .ccbla-dl-trigger,
.ccbla-posts-tab .ccbla-members-articles__download,
.ccbla-event-form__submit {
    padding-block:  10px 10px !important;
    padding-inline: 10px !important;
}

/* ── B. Zone membre — :hover sans outline ─────────────────────────────── */


body .um .um-button:hover,
body .um input[type="submit"].um-button:hover,
body .um input[type="submit"]:hover,
body .um button:hover,
.ccbla-events-tab .ccbla-events-tab__card-edit:hover,
.ccbla-events-tab .ccbla-mod-card-banner__cta:hover,
.ccbla-posts-tab .ccbla-posts-tab__action:hover,
.ccbla-posts-tab .ccbla-mod-card-banner__cta:hover,
.ccbla-posts-tab .ccbla-dl-trigger:hover,
.ccbla-posts-tab .ccbla-members-articles__download:hover,
.ccbla-event-form__submit:hover {
    outline: 0 !important;
    outline-offset: 0 !important;
}

/* ── B. Zone membre — :focus-visible avec outline (WCAG 2.4.7) ────────── */
/* 2026-05-12 — Extension: ajout de.ccbla-event-form__submit:focus-visible. Écrase la règle bloc qui posait outline: 2px solid pop-dark (focus clavier doit être plus contrasté → 3px solid #005fcc + offset 2px). */
body .um .um-button:focus-visible,
body .um input[type="submit"].um-button:focus-visible,
body .um input[type="submit"]:focus-visible,
body .um button:focus-visible,
.ccbla-events-tab .ccbla-events-tab__card-edit:focus-visible,
.ccbla-events-tab .ccbla-mod-card-banner__cta:focus-visible,
.ccbla-posts-tab .ccbla-posts-tab__action:focus-visible,
.ccbla-posts-tab .ccbla-mod-card-banner__cta:focus-visible,
.ccbla-posts-tab .ccbla-dl-trigger:focus-visible,
.ccbla-posts-tab .ccbla-members-articles__download:focus-visible,
.ccbla-event-form__submit:focus-visible {
    outline:        3px solid #005fcc !important;
    outline-offset: 2px !important;
}

/* ── C. GLOBAL site — :focus + :active : bg pop-dark + color blanc ────── */
/* Sélecteur large couvrant : boutons natifs HTML, WordPress block (Gutenberg),
   Kadence (kt/kb-button), classes thème .button, et Ultimate Member.
   Le `!important` est requis pour vaincre les règles plugins (UM, Kadence,
   Brevo/sib-form) qui posent leurs propres bg sur :hover/:focus en
   !important. Pas d'override sur le contenu thématique (loop-salles avec
   accent dynamique) car ce CSS arrive plus bas dans la cascade et l'a
   demande Nic est explicitement "tous les boutons partout". */
button:focus,
button:active,
input[type="submit"]:focus,
input[type="submit"]:active,
input[type="button"]:focus,
input[type="button"]:active,
input[type="reset"]:focus,
input[type="reset"]:active,
.wp-block-button__link:focus,
.wp-block-button__link:active,
.wp-element-button:focus,
.wp-element-button:active,
.kt-button:focus,
.kt-button:active,
.kb-button:focus,
.kb-button:active,
.wp-block-kadence-advancedbtn a:focus,
.wp-block-kadence-advancedbtn a:active,
.button:focus,
.button:active,
body .um .um-button:focus,
body .um .um-button:active,
body .um input[type="submit"].um-button:focus,
body .um input[type="submit"].um-button:active {
    background:       var(--wp--preset--color--pop-dark, #111) !important;
    background-color: var(--wp--preset--color--pop-dark, #111) !important;
    color:            var(--wp--preset--color--pop-white, #fff) !important;
}

/* Mobile ≤480px: padding zone membre conservé (pas de spec mobile-specific demandée). Si Nic veut réduire à 8px en mobile, ajouter override ici. */

/* 2026-05-13 — PASSE ULTRA INSTINCT (demandes Nic en vrac) Regroupement global d'overrides cross-blocs: - Footer: menus mobile alignés + lien coordo-contact hover - Inputs: border-radius:0 + focus outline pop-dark (cohabitation avec focus-visible bleu existant — pattern Q7=B) - Aside event + card-location: ajustements typographiques - Page « Le POP »:.rapport-act hover (column Kadence) - Paginations: Agrandir Wide Medium 20px + border-radius:0 sur TOUS les boutons (centralisation 6 blocs, sélecteur global) - Newsletter Brevo: checkbox GDPR + asterisque optin - UM /login + UM espace membre: checkbox, tabs, search, mdp oublié - Espace membre: pastille télécharger #00726A - Proposer évenement: bouton align-items center */

/* ── Footer menus mobile : alignement gauche du contenu Kadence Nav ──
 * 2026-05-13 — Cible exacte précisée par Nic (passe 3) : le contenu
 * du lien Kadence est dans .kb-nav-link-content, pas directement sur
 * le wrapper .menu-mobile-X. La règle initiale sur le wrapper était
 * inerte (Kadence injecte un nested flex que justify-content n'atteint
 * pas depuis le parent). */
.menu-mobile-1 .menu-item .kb-nav-link-content,
.menu-mobile-2 .menu-item .kb-nav-link-content {
    justify-content: left;
}

/* ── Footer coordonnées de contact : hover lien ─────────────────────── */
footer .coordo-contact a:hover,
footer .coordo-contact a:focus-visible {
    background: var(--wp--preset--color--pop-dark, #111);
    color:      #fff;
}

/* ── Inputs: border-radius global 0 + border-color noir Cohérence design POP. La var --wp--preset--color--black n'est PAS définie dans theme.json (defaultPalette:false) — fallback #000 essentiel. 2026-05-13 (demande Nic complément) — ajout border-color. */
input,
select,
textarea {
    border-radius: 0 !important;
    border-color:  var(--wp--preset--color--black, #000) !important;
}

/* ── Focus input : outline pop-dark 1px (Q7=B : cohabite avec
 *   focus-visible 3px bleu existant pour clavier dédié)
 * Le 1px noir signale le focus souris/touch, le 3px bleu reste actif
 * sur focus-visible clavier (cascade : focus-visible plus spécifique).
 * 2026-05-13 (passe 3 — fix Nic) : !important ajouté car la règle
 * était vaincue par des sélecteurs plus spécifiques de blocs (form
 * proposer-evenement, .um-form, GF...). Avec !important on garantit
 * la visibilité du focus partout (a11y SC 2.4.7 AA). */
input:focus,
select:focus,
textarea:focus {
    outline:        1px solid var(--wp--preset--color--pop-dark, #111) !important;
    outline-offset: 2px !important;
}

/* ── Card location : line-height resserré ─────────────────────────── */
.card-location li,
.card-location p {
    line-height: 1.15;
}

/* ── Aside event — info-cast : typographie compacte ────────────────── */
.aside-event .info-cast p {
    margin-bottom: 8px !important;
    font-size:     16px;
    line-height:   1.15;
}
.aside-event .info-cast ul {
    padding-left: 20px !important;  /* 2026-05-13 (passe 3 — Nic) : 0 → 20px (indentation puces) */
}

/* ── Page « Le POP » —.rapport-act (Kadence column class) La classe est posée via Kadence UI sur la column wrapper. Le H3 advanced-heading interne a sa propre cascade Kadence (font-color inline): on cible le H3 ET son <a> enfant pour vaincre la cascade Kadence inline. */
.rapport-act {
    transition: background-color .18s ease, color .18s ease;
}
.rapport-act:hover,
.rapport-act:focus-within {
    background: var(--wp--preset--color--pop-dark, #111) !important;
}
.rapport-act:hover h3,
.rapport-act:hover h3 a,
.rapport-act:focus-within h3,
.rapport-act:focus-within h3 a {
    color: #fff !important;
}

/* PAGINATION — règle centralisée (6 blocs: agenda-int-ext, agenda-scolaire, prochain-events-membre, loop-membres, um-tab-evenements, um-tab-publications). Tous utilisent le namespace.ccbla-pagination__*. - Font: Agrandir Wide Medium 20px (demande Nic) - Radius: 0 sur tous les boutons (cohérence pas d'arrondi POP) */
.ccbla-pagination__btn,
.ccbla-pagination__prev,
.ccbla-pagination__next,
.ccbla-pagination__ellipsis {
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif) !important;
    font-size:   20px !important;
    border-radius: 0 !important;
}

/* 2026-05-29 (demande Nic, v2) — 13px UNIQUEMENT sur les nombres à 2+ chiffres
 * (« nombres » ≥10), via la classe serveur .ccbla-pagination__btn--2d posée par
 * les 3 helpers (cpt-agenda.php, membres-helpers.php ×2). Les chiffres 1-9
 * gardent les 20px de la règle centralisée ci-dessus, les flèches prev/next
 * aussi (elles ne reçoivent jamais --2d). Évite le retour à la ligne des nombres
 * 2 chiffres (« 12 » empilé) dans la box 44×44px (Agrandir Wide 20px trop large
 * pour 2 glyphes dans ~22px de contenu).
 *   - 1er sélecteur (scope UM, spécificité 0-4-1) passe au-dessus de l'override
 *     body.um-page .ccbla-loop-agenda__pagination .ccbla-pagination__btn
 *     (17px !important, 0-3-1, cf. plus bas).
 *   - 2nd (0-2-0) bat la règle centralisée (0-1-0) dans tous les autres contextes.
 * Couvre les 6 paginations du namespace .ccbla-pagination__*. */
body.um-page .ccbla-loop-agenda__pagination .ccbla-pagination__btn.ccbla-pagination__btn--2d,
.ccbla-pagination__btn.ccbla-pagination__btn--2d {
    font-size: 13px !important;
}

/* 2026-05-13 (passe 3 — Nic): padding spécifique pagination agenda (boutons trop verticaux sur le bloc agenda). Override sur le wrapper.ccbla-loop-agenda__pagination uniquement. */
.ccbla-loop-agenda__pagination .ccbla-pagination__btn {
    padding: 12px 10px;
}

/* NEWSLETTER BREVO — checkbox GDPR + asterisque optin Markup natif Brevo: <input.input_replaced#GDPR> + <span.checkbox. checkbox_tick_positive> (la pastille visuelle est sur le span; l'input réel est masqué via main.js Brevo). Cible précise pour ne PAS impacter d'autres checkboxes du site. */
.sib-optin .checkbox,
.sib-optin .checkbox.checkbox_tick_positive {
    border-radius: 0 !important;
    border-color:  var(--wp--preset--color--pop-dark, #111) !important;
}
/* État coché Brevo: le span::before / fond change quand.input_replaced est:checked (cf. CSS Brevo natif). On override sur l'état checked du sibling via:has() (Chromium ≥105 / Safari ≥15.4 / Firefox ≥121 — couvre 95%+ traffic 2026). Fallback: la pastille reste visible mais sans le bg pop-dark sur navigateurs anciens — pas bloquant fonctionnellement. */
.sib-optin:has(.input_replaced:checked) .checkbox,
.sib-optin .input_replaced:checked + .checkbox {
    background: var(--wp--preset--color--pop-dark, #111) !important;
    color:      #fff !important;
}

/* ── Brevo asterisque RGPD: descend visuellement de 8px 2026-05-13 (passe 3 — Nic): top:0 → top:8px pour aligner sur la dernière ligne du texte RGPD multi-lignes. */
.sib-optin .entry__label_optin {
    vertical-align: baseline;
}
.sib-optin .entry__label_optin::before,
.sib-optin .entry__label_optin {
    position:   relative;
    top:        8px;
    align-self: flex-end;
}

/* UM /login — checkbox « Se souvenir de moi » 2026-05-13 (passe 3 — décision Nic): retrait complet du checkbox « Se souvenir de moi ». Plutôt que styler une fonctionnalité qu'on n'utilise pas, on masque entièrement le label parent qui contient input + state + option. Note: ne casse pas la session (UM gère "remember me" côté serveur via cookie persistent par défaut sur les form templates). Si Nic veut que le checkbox SOIT actif par défaut, il faudra un hook PHP côté um_pre_login_check() — hors scope CSS. */
label.um-field-checkbox {
    display: none !important;
}

/* ── UM /login : lien « Mot de passe oublié » aligné à gauche ─────── */
.um .um-form .um-col-alt-b,
body.um-page .um-form .um-col-alt-b {
    display:         flex !important;             /* 2026-05-13 complément Nic */
    text-align:      left !important;
    justify-content: flex-start !important;
}

/* UM ESPACE MEMBRE — tabs, search, badge download */

/* Tabs UM : refonte complète 2026-05-13 (passe 3 — Nic).
 * Specs exactes Nic :
 *   display:flex + align-items:center + gap:.25rem + flex-wrap:wrap
 *   + border 1px solid #111 + bg #fff + padding .5rem .75rem
 *   + margin-bottom 1.75rem + overflow:hidden
 *   + border-radius 0 (re-spécifié 2026-05-14, cohérence pas d'arrondi POP)
 *
 * !important global car la règle UM native du plugin est très spécifique
 * et a son propre flex/grid layout. */
.um-profile-nav {
    display:         flex !important;
    align-items:     center !important;
    gap:             0.25rem !important;
    flex-wrap:       wrap !important;
    border:          1px solid #111 !important;
    border-radius:   0px !important; /* 2026-05-14 v2 (demande Nic ULTRA INSTINCT — valeur littérale "0px") */
    background:      #fff !important;
    padding:         0.5rem 0.75rem !important;
    margin-bottom:   1.75rem !important;
    overflow:        hidden !important;
}
/* Garde des items pour cohérence avec les nouveaux gaps: (les anciennes règles.um-profile-nav-item / a border-radius:0 + border étaient redondantes, retirées au profit du parent unifié). */

/* Search input UM : pas de border + placeholder gris #999 */
.um .um-form input[type="search"],
body.um-page .um-form input[type="search"] {
    border: none !important;
}
.um .um-form input[type="search"]::placeholder,
body.um-page .um-form input[type="search"]::placeholder {
    color:   #999 !important;
    opacity: 1 !important;
}

/* Search wrapper: marge bas constante. 2026-05-14 (demande Nic) — Margin appliquée à tous les breakpoints (auparavant scoped @media min-width:768px / 5rem). Valeur 60px fixe pour cadencement vertical homogène mobile + desktop. */
body.um-page .ccbla-espace-membre__search {
    margin-bottom: 60px;
}

/* Pastille « N » du bouton télécharger: couleur POP quaternaire (--pop-quaternary) 2026-05-14 (demande Nic): passage de pop-rose à pop-quaternary (vert sombre #00726a). Cohérence avec --color-cta-alt (qui pointe également vers --pop-quaternary, cf. style.css L139). Surcharge la règle canonique de um/um-profile-tabs.php L560-573 (same specificity body.um-page.ccbla-dl-count, ordre source: inline wp_head après theme stylesheet → cette règle gagne). */
body.um-page .ccbla-dl-count {
    background: var(--pop-quaternary, #00726a) !important;
}

/* PAGINATION UM TAB EVENEMENTS — overrides spécifiques wrapper Le wrapper.ccbla-pagination dans.ccbla-loop-agenda__pagination peut avoir un display:block hérité de WP (ul). On force flex centré. 2026-05-13 complément Nic. */
body.um-page .ccbla-loop-agenda__pagination .ccbla-pagination {
    display:         flex !important;
    justify-content: center !important;
    font-family:     var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
}
/* 2026-05-13 (passe 3 — Nic): override scope UM pour padding + font-size spécifique aux boutons de la pagination dans l'espace membre. Bumpe la spécificité de la règle globale.ccbla-pagination__btn pour gagner dans le contexte body.um-page. */
body.um-page .ccbla-loop-agenda__pagination .ccbla-pagination__btn {
    padding:   12px 10px !important;
    font-size: 17px !important;
}

/* CTA « Proposer un événement / publication » (.ccbla-cta-btn) Le CSS de base est inline dans custom-post-type/um-tab-evenements.php (et um-tab-publications.php pour la parité). Le patch chirurgical de cette passe (padding/font-size/letter-spacing/svg margin-top) est posé DIRECTEMENT dans um-tab-evenements.php pour rester scopé à la tab concernée — pas dans style.css global. Cf. fichier dédié. */

/* FIN PASSE 2026-05-13 ULTRA INSTINCT */

/* PASSE 2026-05-14 v6 ULTRA INSTINCT (demande Nic) */

/* Bloc event-group-dates — liens des dates groupées :
 *   • text-decoration: none (suppression underline natif <a>)
 *   • color: #111 (pop-dark, lisibilité maximale)
 * Spécificité parent .ccbla-event-group-dates__item + child link pour
 * gagner sur la cascade globale des <a> du thème (qui peuvent ajouter
 * underline via reset Kadence). !important sur text-decoration car
 * Kadence applique parfois `text-decoration: underline` via
 * `.entry-content a` à spécificité 0,1,1 = égalité avec notre 0,2,0 — 
 * le !important garantit la victoire indépendamment de l'ordre source.
 * 2026-05-14 v6 (demande Nic ULTRA INSTINCT). */
.ccbla-event-group-dates__item .ccbla-event-group-dates__link {
    text-decoration: none !important;
    color:           #111;
}

/* FIN PASSE 2026-05-14 v6 ULTRA INSTINCT */

/* PASSE 2026-05-18 — Sprint 1 audit Claude in Chrome */

/* Kadence Lottie home — anti-CLS (Cumulative Layout Shift) v2
 * ────────────────────────────────────────────────────────────────────
 * 2026-05-18 v2 : CORRECTIF du patch v1 livré le matin.
 *
 * Bug du patch v1 (diag confirmé via Claude in Chrome 2026-05-18) :
 *   aspect-ratio: 3/4 + width:100% appliqués sur .kb-lottie-container
 *   donnaient une box [largeur_column × 4/3]. Sur viewport ~2180px,
 *   la column = 2114px → container forcé à 2818px de HAUT. De plus,
 *   height:100% sur le player étirait <dotlottie-player> à 550×2818
 *   (le max-width:550px Kadence cappait la largeur mais pas la
 *   hauteur). Bandeau rose géant avec petit logo POP au milieu.
 *
 * Approche v2 — placeholder dimensionné sur le PLAYER, pas le container
 *   1. Container : aucune contrainte de ratio (libre, hérite hauteur
 *      du player interne).
 *   2. Player : width:100% + max-width:550px (= valeur Kadence Block
 *      existante, hardcodée ici pour garantir le sizing AVANT que le
 *      custom element n'ait fini son upgrade JS) + aspect-ratio:3/4
 *      + height:auto → box pré-allouée 550×733px sur desktop, fluide
 *      en mobile (viewport 375px → 375×500px).
 *   3. display:block obligatoire — <dotlottie-player> est un custom
 *      element donc display:inline par défaut tant que le runtime
 *      Kadence n'a pas upgrade le composant.
 *
 * Pourquoi pas "attendre que la Lottie soit chargée avant rendu" :
 *   Bloquer le rendu casse le LCP (Largest Contentful Paint), Google
 *   pénalise direct. L'approche correcte est de pré-allouer l'espace
 *   au pixel près et de laisser la Lottie pop dedans, pas l'inverse.
 *
 * Mobile fluide sans media query :
 *   width:100% + max-width:550px → sur viewport < 550px, le player
 *   prend 100% width et l'aspect-ratio dérive la hauteur naturellement.
 *   Pas de breakpoint à maintenir.
 *
 * Source viewBox Lottie : 1080×1440 → ratio 3/4 portrait, confirmé
 * via le SVG rendu dans le DOM (Claude in Chrome 2026-05-18).
 *
 * Support aspect-ratio : Chromium ≥88, Firefox ≥89, Safari ≥15
 * (96%+ traffic 2026). Navigateurs antérieurs : fallback height:auto
 * → comportement pré-v1 (CLS résiduel), pas de régression visuelle.
 *
 * Si une autre Lottie est ajoutée sur la home plus tard avec un
 * ratio différent, surcharger par ID :
 *   #kb-lottie-player2_9f3d87-0e { aspect-ratio: 3 / 4; }
 *   #kb-lottie-player-AUTRE      { aspect-ratio: 16 / 9; }
 *
 * Note prefers-reduced-motion :
 *   Freeze géré JS dans ccbla-lottie-rmotion.js (inchangé en v2).
 *   WCAG 2.3.3 AAA.
 * ──────────────────────────────────────────────────────────────────── */
body.home .kb-lottie-container {
    /* Annule explicitement toute contrainte ratio héritée — le container redevient libre, sa hauteur est dictée par le player interne (placeholder via aspect-ratio + max-width). */
    aspect-ratio: auto;
    width:        100%;
    height:       auto;
    position:     relative; /* ancrage absolu pour le loader POP */
}

body.home .kb-lottie-container dotlottie-player,
body.home .kb-lottie-container lottie-player {
    display:      block;
    width:        100%;
    max-width:    550px;   /* = config Kadence Block, hardcodée pour pre-allocation avant upgrade custom element */
    aspect-ratio: 3 / 4;   /* ratio appliqué AU PLAYER → height auto = w × 4/3 */
    height:       auto;    /* annule le height:100% du patch v1 */
    margin:       0 auto;  /* centrage horizontal */
    position:     relative; /* monte au-dessus du loader quand chargé */
    z-index:      1;
}

/* Loader POP affiché pendant le chargement de la Lottie
 * ────────────────────────────────────────────────────────────────────
 * 2026-05-18 v3 (sprint 1, suite — demande Nic post-fix sizing) :
 *   "le temps que le lottie soit chargé, mettre le loader POP dans sa zone"
 *
 * Architecture :
 *   • Visible PAR DÉFAUT au parse HTML (CSS-only, indépendant JS) — UX
 *     resssentie immédiate, pas d'attente DOMContentLoaded.
 *   • Réutilise l'écosystème existant : vars --ccbla-pop-loader-* (style.css
 *     L1129+), @keyframes ccbla-pop-loader-spin (style.css L1141), même
 *     pattern visuel que le loader pagination UM et les blocs agenda.
 *   • Masqué via classe .ccbla-lottie-loaded ajoutée par ccbla-lottie-loader.js
 *     dès que le custom element <dotlottie-player> émet sa première frame
 *     (event 'frame'/'ready' ou MutationObserver fallback). Transition
 *     opacity .35s pour fade-out smooth même en cache hit (anim quasi-instant).
 *   • prefers-reduced-motion : animation: none → ring statique, indication
 *     visuelle conservée sans effet vestibulaire. WCAG 2.3.3.
 *
 * Taille : 80px (≈ 15% du placeholder 550×733 desktop, ≈ 21% mobile 375×500).
 * Override possible via --ccbla-pop-loader-size sur .kb-lottie-container.
 *
 * z-index strate :
 *   loader ::before/::after  →  z-index 2 (au-dessus du player vide)
 *   player                   →  z-index 1 (au-dessous tant que pas chargé)
 *   Quand .ccbla-lottie-loaded → loader passe opacity:0, player reste visible.
 * ──────────────────────────────────────────────────────────────────── */

/* Ring rotatif — pseudo-element ::before */
body.home .kb-lottie-container::before {
    content:          '';
    position:         absolute;
    top:              50%;
    left:             50%;
    width:            var( --ccbla-pop-loader-size, 80px );
    height:           var( --ccbla-pop-loader-size, 80px );
    margin:           calc( var( --ccbla-pop-loader-size, 80px ) / -2 ) 0 0
                      calc( var( --ccbla-pop-loader-size, 80px ) / -2 );
    border:           var( --ccbla-pop-loader-ring-width, 1px ) solid
                      var( --ccbla-pop-loader-ring-color, rgba( 0, 0, 0, .10 ) );
    border-top-color: var( --ccbla-pop-loader-ring-accent, #6b4796 );
    border-radius:    50%;
    animation:        ccbla-pop-loader-spin .9s linear infinite;
    z-index:          2;
    pointer-events:   none;
    transition:       opacity .2s ease; /* v4 : 350ms → 200ms post-test 3G */
}

/* Badge logo POP — pseudo-element ::after, centré dans le ring */
body.home .kb-lottie-container::after {
    content:               '';
    position:              absolute;
    top:                   50%;
    left:                  50%;
    width:                 calc( var( --ccbla-pop-loader-size, 80px ) - 2px );
    height:                calc( var( --ccbla-pop-loader-size, 80px ) - 2px );
    transform:             translate( -50%, -50% );
    border-radius:         var( --ccbla-pop-loader-badge-radius, 50% );
    background-color:      var( --ccbla-pop-loader-badge-bg, #fff );
    background-image:      var( --ccbla-pop-loader-logo );
    background-repeat:     no-repeat;
    background-position:   center center;
    background-size:       var( --ccbla-pop-loader-logo-size, 62% auto );
    z-index:               2;
    pointer-events:        none;
    transition:            opacity .2s ease; /* v4 : 350ms → 200ms post-test 3G */
}

/* État chargé : fade-out propre des deux pseudo-elements */
body.home .kb-lottie-container.ccbla-lottie-loaded::before,
body.home .kb-lottie-container.ccbla-lottie-loaded::after {
    opacity:        0;
    pointer-events: none;
}

/* prefers-reduced-motion : ring statique, pas d'animation vestibulaire */
@media ( prefers-reduced-motion: reduce ) {
    body.home .kb-lottie-container::before {
        animation: none;
    }
}

/* FIN PASSE 2026-05-18 — Sprint 1 audit Claude in Chrome */

 /* Forcage trigger off canvas */
 .kb-off-canvas-close {
    border-radius: 50% !important;
    color: #fff !important;
    min-width: 125px;
    height: 44px;
    justify-content: center;
 }

/* PASSE 2026-05-19 — Pagination harmonisation (demande graphiste) Règle de design unifiée pour TOUTES les paginations du site: • gap entre boutons: 15px • hover/focus: fond #111 + texte #fff + bordure #111 • état active (page courante): déjà #111/#fff (inchangé) • ellipsis (.dots /.ccbla-pagination__ellipsis): pas de border Les paginations CCBLA custom (.ccbla-pagination__*) sont alignées à la source dans leurs blocs respectifs (agenda-int-ext, agenda- scolaire, prochain-events-membre, loop-membres, um-tab-evenements). Cette section couvre uniquement les paginations NATIVES Kadence / WP qui n'ont pas de source CCBLA: •.wp-block-kadence-query-pagination (Kadence Blocks Query Loop) •.wp-block-query-pagination (Gutenberg Query Loop natif) •.pagination (templates archives custom) •.nav-links (paginate_links() WP natif) Cibles fonctionnelles: archives CPT (projet, éducation-aux-médias, membre), blog Actualités, et toute Query Loop Kadence/WP du thème. Note Kadence: on force display:flex + gap sur le parent. Kadence applique déjà display:flex par défaut sur sa pagination, donc no-op fonctionnel attendu. [À VÉRIFIER en staging] sur l'éventuel layout grid custom Kadence Pro — fallback gracieux car gap est ignoré si le parent n'est pas flex/grid. Le sélecteur:not(.current):not(.dots) sur le hover évite d'inverser la page courante (déjà #111/#fff) et l'ellipsis (pas un lien). */

/* Conteneur parent : layout flex + gap 15px */
.wp-block-kadence-query-pagination,
.wp-block-query-pagination,
.pagination,
.nav-links {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: center;
    gap:             15px;
}

/* Hover/focus unifié sur les liens .page-numbers (Kadence/WP natif) */
.wp-block-kadence-query-pagination .page-numbers:not(.current):not(.dots):hover,
.wp-block-kadence-query-pagination .page-numbers:not(.current):not(.dots):focus,
.wp-block-query-pagination .page-numbers:not(.current):not(.dots):hover,
.wp-block-query-pagination .page-numbers:not(.current):not(.dots):focus,
.pagination .page-numbers:not(.current):not(.dots):hover,
.pagination .page-numbers:not(.current):not(.dots):focus,
.nav-links .page-numbers:not(.current):not(.dots):hover,
.nav-links .page-numbers:not(.current):not(.dots):focus {
    background:   var(--wp--preset--color--pop-dark, #111) !important;
    border-color: var(--wp--preset--color--pop-dark, #111) !important;
    color:        #fff !important;
}

/* ────────────────────────────────────────────────────────────────────
 * Ellipsis Kadence/WP natif (.page-numbers.dots) : pas de border
 * ────────────────────────────────────────────────────────────────────
 * 2026-05-19 (ajout demande graphiste post-livraison v2) :
 * <span class="page-numbers dots">…</span> ne doit jamais hériter de
 * la bordure des boutons numérotés. !important pour battre la cascade
 * Kadence/Gutenberg/plugins qui peuvent poser border: 1px solid …
 * ──────────────────────────────────────────────────────────────────── */
.wp-block-kadence-query-pagination .page-numbers.dots,
.wp-block-query-pagination .page-numbers.dots,
.pagination .page-numbers.dots,
.nav-links .page-numbers.dots {
    border: none !important;
}

/* Ellipsis CCBLA custom (.ccbla-pagination__ellipsis): protection défensive pas de border 2026-05-19 (ajout demande graphiste post-livraison v2): Actuellement aucune source CCBLA ne pose explicitement une border sur l'ellipsis, mais on protège contre tout futur enqueue parasite (Kadence Pro update, plugin tiers, règle::is() ciblant les voisins). Cohérence visuelle assurée avec.page-numbers.dots natif Kadence/WP. */
.ccbla-pagination__ellipsis {
    border: none !important;
}

/* FIN PASSE 2026-05-19 */


 body .um-center .um-button {
    min-width: unset!important;
}

/*Rajout pour page d'accueil */
/* 2026-06-03 : pin .mg-top-auto en bas — chaîne full-height sur classes custom
   tout-contenu-focus → rangee-tout-contenu-focus → col-gauche-contenu-focus */

/* a) inner-col de la colonne hero texte remplit la colonne */
.tout-contenu-focus > .kt-inside-inner-col { height: 100%; }

/* b) la rowlayout interne remplit la colonne hero */
.tout-contenu-focus > .kt-inside-inner-col > .rangee-tout-contenu-focus { height: 100%; }
.rangee-tout-contenu-focus > .kt-row-column-wrap {
  height: 100%;
  align-items: stretch; /* override kt-row-valign-top → Colonne 1 s'étire */
}

/* c) Colonne 1 remplit la ligne + devient flex vertical */
.col-gauche-contenu-focus > .kt-inside-inner-col {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* d) cible collée en bas */
.mg-top-auto { margin-top: auto; }
.col-gauche-contenu-focus > .kt-inside-inner-col {
  min-height: 680px; /* caler sur la hauteurde figma */
}

/*Petit test lepop.be*/
.ccbla-loop-agenda__empty {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  padding: 48px 24px !important;
  margin: 0 0 32px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 14px !important;
  color: #475569 !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
}

.ccbla-loop-agenda__empty::before {
  content: "" !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  opacity: 1 !important;
}
/* ═══════════════════════════════════════════════════════════════════════
 * PASSE 2026-06-12 — DURCISSEMENT FOCUS-VISIBLE (cohérence + a11y)
 * Validé visuellement par injection temporaire sur Accueil/Agenda/Scolaire.
 *
 * CAUSE RACINE : le bloc « C. GLOBAL :focus + :active » inverse en noir
 * sans outline → focus clavier sans cadre. RÉINITIALISER (<a>) héritait
 * du :focus lien Kadence bordeaux (--pop-secondary #812b29).
 *
 * RÈGLE DESIGN : focus-visible = hover (inversion noire) + cadre mauve.
 *   Exception BILLETTERIE (fond violet) = bordure JAUNE + halo mauve.
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
    --pop-focus:          var(--wp--preset--color--pop-primary, #6b4796);
    --pop-focus-contrast: var(--wp--preset--color--pop-pastel-lemon, #fff7b2);
    --pop-focus-width:    3px;
    --pop-focus-offset:   2px;
}

/* ── 1. SOCLE — tous les boutons : inversion noire + cadre mauve ── */
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible,
.kt-button:focus-visible,
.kb-button:focus-visible,
.wp-block-kadence-advancedbtn a:focus-visible,
.button:focus-visible {
    background-color: var(--wp--preset--color--pop-dark, #111) !important;
    color:           var(--wp--preset--color--pop-white, #fff) !important;
    border-color:    var(--wp--preset--color--pop-dark, #111) !important;
    outline:         var(--pop-focus-width) solid var(--pop-focus) !important;
    outline-offset:  var(--pop-focus-offset) !important;
    border-radius:   0;
}

/* ── 2. FILTRER / RÉINITIALISER (agenda + scolaire) — sélecteurs réels ── */
.ccbla-filters-agenda__btn--search:focus-visible,
.ccbla-filters-agenda__btn--reset:focus-visible,
.ccbla-filters-scolaire__btn--search:focus-visible,
.ccbla-filters-scolaire__btn--reset:focus-visible {
    background-color: var(--wp--preset--color--pop-dark, #111) !important;
    color:           var(--wp--preset--color--pop-white, #fff) !important;
    border-color:    var(--wp--preset--color--pop-dark, #111) !important;
    outline:         var(--pop-focus-width) solid var(--pop-focus) !important;
    outline-offset:  var(--pop-focus-offset) !important;
}

/* ── 3. BOUTON BILLETTERIE (carte accueil) → bordure JAUNE + halo mauve
 *    Spécificité (0,5,0) OBLIGATOIRE pour battre la règle existante
 *    .is-style-ccbla-billetterie-2 .wp-element-button:not(.has-background)
 *    qui force background:#fff !important (testé : (0,4,0) sinon gagne).
 *    ⚠️ FRAGILITÉ : ancrage sur l'ID row Kadence kb-row-layout-id2_0383fb-3c.
 *    Si le bloc est reconstruit dans l'éditeur, cet ID change → RECOMMANDÉ :
 *    ajouter une classe « ccbla-btn-billetterie » via Kadence > Advanced et
 *    remplacer le sélecteur ci-dessous. ── */
.kb-row-layout-id2_0383fb-3c .wp-block-buttons .wp-block-button.is-style-ccbla-billetterie-2 .wp-element-button:focus-visible {
    background-color: var(--wp--preset--color--pop-dark, #111) !important;
    color:           var(--wp--preset--color--pop-white, #fff) !important;
    outline:         var(--pop-focus-width) solid var(--pop-focus-contrast) !important;
    outline-offset:  var(--pop-focus-offset) !important;
    box-shadow: 0 0 0 calc(var(--pop-focus-width) + var(--pop-focus-offset))
                var(--pop-focus) !important;
}

/* ── 4. GARDE-FOU — neutralise le :focus lien bordeaux sur boutons-liens ── */
a.wp-block-button__link:focus:not(:focus-visible),
a.kt-button:focus:not(:focus-visible),
a.kb-button:focus:not(:focus-visible),
.ccbla-filters-agenda__btn--reset:focus:not(:focus-visible),
.ccbla-filters-scolaire__btn--reset:focus:not(:focus-visible) {
    outline: 0 !important;
}

/* ── 5. FALLBACK navigateurs sans :focus-visible ── */
@supports not selector(:focus-visible) {
    button:focus,
    input[type="submit"]:focus,
    input[type="reset"]:focus,
    .wp-block-button__link:focus,
    .kt-button:focus,
    .kb-button:focus,
    .button:focus,
    .ccbla-filters-agenda__btn--reset:focus,
    .ccbla-filters-scolaire__btn--reset:focus {
        outline:        var(--pop-focus-width) solid var(--pop-focus) !important;
        outline-offset: var(--pop-focus-offset) !important;
    }
}

/* ── 6. MODE CONTRASTE FORCÉ (Windows High Contrast) ── */
@media (forced-colors: active) {
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    a:focus-visible {
        outline: 3px solid Highlight !important;
        outline-offset: 2px !important;
    }
}
/* FIN PASSE 2026-06-12 — DURCISSEMENT FOCUS-VISIBLE */