/* ═══════════════════════════════════════════════════════════════════
   CCBLA — Formulaire Proposer un événement (passe 4, 2026-04-23)
   ───────────────────────────────────────────────────────────────────
   DESIGN TOKENS (Figma, images 1-5 Nic) :
   • H2 form title  : Agrandir Wide Medium 40px / 55px line-height
   • H3 section     : Agrandir Tight Bold   25px / 120%
   • Group label    : Agrandir Wide Medium  18px / 120%
   • Field label    : Instrument Sans Semibold 16px
   • Input          : border 1px solid #000, bg #fff, height 50px
                      padding 0 16px, font-size 16px Instr Semibold #000
   • Spacing        : 15px label→input, 33px entre fields, 40px entre sections
   • Palette        : strict noir/blanc (pas d'orange/vert/rouge saturé)
                      Exceptions : messages d'erreur discrets, astérisques *

   BOUTONS submit/reset : style UM register
   • bg:transparent, color:#111, border:1.5px solid #111, radius:0
   • uppercase, font-size:.85rem, padding:14px 40px 12px
   • hover : bg:#111, color:#fff
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --font-heading:      var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    --font-heading-tight:var(--wp--preset--font-family--agrandir-tight-bold,  'Agrandir Tight Bold',  sans-serif);
    --font-body:         var(--wp--preset--font-family--instrument-sans,      'Instrument Sans',      sans-serif);
    --color-dark:        var(--wp--preset--color--pop-dark, #111);
}

/* ── Preview Gutenberg (éditeur back-office) ─────────────────────── */
.ccbla-block-preview {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: 2.5rem; background: #fff; border: 1px dashed #111;
    border-radius: 0; text-align: center;
}
.ccbla-block-preview strong { color: #111; }
.ccbla-block-preview p { color: #555; margin: 0; font-size: .85rem; }

/* ── Wrapper global ──────────────────────────────────────────────── */
.ccbla-event-form-wrap {
    max-width: 780px;
    margin: 0 auto;
    font-family: var(--font-body);
    color: #000;
    background: #fff;
}

/* FORCE WHITE BG + NOIR TEXT — SCOPE STRICT au form wrapper v3 (2026-04-24): bulletproof. La 3e passe essaie d'enfin régler les cas résiduels (autofill Chrome, Kadence overrides, UM styles). Scope: uniquement descendants de.ccbla-event-form-wrap. Exclusions: checkbox/radio (fond custom), submit/button, file. Aucun impact en dehors du form. */
.ccbla-event-form-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="hidden"]),
.ccbla-event-form-wrap textarea,
.ccbla-event-form-wrap select {
    background: #fff !important;
    background-color: #fff !important;
    color: var(--wp--preset--color--pop-dark, #111) !important;
    border-color: var(--wp--preset--color--pop-dark, #111) !important;
}
.ccbla-event-form-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="hidden"])::placeholder,
.ccbla-event-form-wrap textarea::placeholder {
    color: #666 !important;
    opacity: 1 !important;
}
/* Exception propre : les inputs avec aria-invalid restent rouges (erreur) */
.ccbla-event-form-wrap input[aria-invalid="true"],
.ccbla-event-form-wrap textarea[aria-invalid="true"],
.ccbla-event-form-wrap select[aria-invalid="true"] {
    border-color: #c62828 !important;
}

/* NOTICES (succès / erreur en haut de page après submit/redirect) */
.ccbla-notice {
    display: flex; align-items: flex-start; gap: 1.25rem;
    padding: 1.5rem 2rem;
    margin-bottom: 2.5rem;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    border-radius: 0;
    font-size: .95rem; line-height: 1.55;
    flex-wrap: wrap;
}
.ccbla-notice--error { border-color: #000; }
.ccbla-notice__icon {
    flex-shrink: 0; width: 26px; height: 26px;
    border: 1px solid #000; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.ccbla-notice__icon svg { width: 14px; height: 14px; }
.ccbla-notice__body { flex: 1 1 300px; }
.ccbla-notice__body strong {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.2;
    display: block;
    margin-bottom: .25rem;
}
.ccbla-notice__body span {
    font-family: var(--font-body);
    font-size: .9rem;
    color: #000;
    display: block;
}
.ccbla-notice__actions {
    display: flex; gap: .75rem; flex-wrap: wrap;
    margin-left: auto; align-self: center;
}
.ccbla-notice__btn {
    /* 2026-05-13 (passe 4 — specs Nic): - padding 14px 40px 12px → 12px 10px - border 1.5px → 1px - text-decoration:none réintroduit explicitement - reste: Agrandir Wide Medium 20px (specs passe 1 conservés) */
    display: inline-block;
    padding: 12px 10px;
    background: transparent;
    color: #111;
    border: 1px solid #111;
    border-radius: 0;
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s, color .18s;
}
.ccbla-notice__btn:hover,
.ccbla-notice__btn:focus-visible {
    background: #111; color: #fff;
}
.ccbla-notice__btn--secondary {
    /* même style — cohérence */
}
.ccbla-warn {
    display: block;
    margin-top: .5rem;
    font-size: .85rem;
    color: #000;
    font-style: italic;
}

/* HEADER (titre page + intro) */
.ccbla-event-form__header {
    margin-bottom: 2.5rem;
}
.ccbla-event-form__title {
    font-family: var(--font-heading);
    font-size: 40px;
    line-height: 55px;
    font-weight: 400;
    color: #000;
    margin: 0 0 .75rem;
    letter-spacing: 0;
}
.ccbla-event-form__intro {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.5;
    color: #000;
    margin: 0;
}
.ccbla-event-form__intro strong { font-weight: 600; }

/* SECTIONS (regroupement logique de champs) */
.ccbla-event-form { display: flex; flex-direction: column; gap: 40px; }
.ccbla-form-section {
    margin-top: 0;
    margin-bottom: 0;            /* ⚡ 2026-04-24 : gap du .ccbla-event-form gère l'espacement */
    border-left: 1px solid var(--wp--preset--color--pop-dark, #111);  /* ⚡ 2026-05-13 (demande Nic) — 2px → 1px */
    padding-left: 24px;
}
.ccbla-form-section:last-of-type {
    margin-bottom: 0;
}
.ccbla-form-section__title {
    font-family: var(--font-heading-tight);
    font-size: 25px;
    line-height: 1.2;
    font-weight: 700;
    color: #000;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
    letter-spacing: 0;
}
.ccbla-form-section__title-suffix {
    margin-left: .35rem;
    color: #000;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
}
.ccbla-form-section__intro {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    color: #000;
    margin: -.5rem 0 1.25rem;
}
.ccbla-form-section__intro strong { font-weight: 600; }

/* CHAMPS (field = wrapper label + input + hint + error) */
.ccbla-field {
    display: flex;
    flex-direction: column;
    gap: 15px;               /* ⚡ spec Nic : 15px label → input */
    margin-bottom: 33px;     /* ⚡ spec Nic : 33px entre champs */
}
.ccbla-field:last-child { margin-bottom: 0; }
.ccbla-field > .ccbla-field__hint-top,
.ccbla-field > .ccbla-field__hint {
    /* hints ne consomment pas le gap:15px — on les remet en flux avec des marges faibles */
    margin: 0;
}

/* Labels champ (16px Instr Semibold) */
.ccbla-field__label {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
    color: #000;
    letter-spacing: 0;
}
.ccbla-req { color: #000; margin-left: 2px; font-weight: 600; }
.ccbla-field__optional {
    color: #000;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    margin-left: 6px;
    font-style: italic;
}

/* Hints (texte d'aide) */
.ccbla-field__hint-top,
.ccbla-field__hint {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: #000;
}
.ccbla-field__hint-top { margin: -5px 0 0; }
.ccbla-field__hint     { margin: 0; }

/* INPUTS (text, email, url, tel, date, select) Specs Nic (2026-04-23): • placeholder gris foncé (#666 opacity 1, pas de semi-transparence) • fond #fff (kill browser autofill yellow via -webkit-autofill) • color #111 (var --pop-dark, pas #000) • border-radius 0 • border 1px solid var(--pop-dark, #111) */
.ccbla-field__input,
.ccbla-field__select {
    width: 100%;
    box-sizing: border-box;
    height: 50px;                                                /* ⚡ spec Nic */
    padding: 0 16px;
    border: 1px solid var(--wp--preset--color--pop-dark, #111);  /* ⚡ var thème */
    background: #fff;
    color: var(--wp--preset--color--pop-dark, #111);             /* ⚡ #111 */
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;                                             /* ⚡ 2026-04-24 : Regular (Instrument Sans 400), pas Semibold */
    line-height: 1.2;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    transition: outline-color .12s, outline-offset .12s, border-color .12s;
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.ccbla-field__input::placeholder,
.ccbla-field__select::placeholder {
    color: #666;              /* ⚡ spec Nic : placeholder gris foncé */
    opacity: 1;               /* (Firefox applique 0.54 par défaut) */
    font-weight: 400;
}
.ccbla-field__input:focus,
.ccbla-field__select:focus,
.ccbla-field__input:focus-visible,
.ccbla-field__select:focus-visible {
    /* 2026-05-14 — Spec Nic : outline 2px pop-dark sur :focus (et :focus-visible).
       Préférence ":focus" plutôt que ":focus-visible" seul : l'outline doit
       apparaître aussi au clic souris/tactile (signal visuel uniforme), pas
       seulement au focus clavier. WCAG 2.4.11 OK (2px solid sur contrast
       max). */
    outline: 2px solid var(--wp--preset--color--pop-dark, #111);
    outline-offset: 2px;
}
/* 2026-05-14 — Ajout: textarea (WP editor + textarea libres) hérite du même focus 2px pop-dark. */
.ccbla-field textarea:focus,
.ccbla-field textarea:focus-visible,
.ccbla-field textarea.wp-editor-area:focus,
.ccbla-field textarea.wp-editor-area:focus-visible {
    outline: 2px solid var(--wp--preset--color--pop-dark, #111);
    outline-offset: 2px;
}

/* ── Override browser autofill (Chrome/Safari) Chrome applique rgb(250,250,210) de fond jaune pâle + sa propre couleur texte sur les champs mémorisés. Le hack box-shadow inset 1000px blanc + transition 9999s empêche ce fond d'être appliqué. Référence: https://stackoverflow.com/a/14205976 */
.ccbla-field__input:-webkit-autofill,
.ccbla-field__input:-webkit-autofill:hover,
.ccbla-field__input:-webkit-autofill:focus,
.ccbla-field__input:-webkit-autofill:active,
.ccbla-field__select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: var(--wp--preset--color--pop-dark, #111) !important;
    caret-color: var(--wp--preset--color--pop-dark, #111) !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

/* Textarea non-TinyMCE (fallback) — hauteur libre */
.ccbla-field textarea.ccbla-field__input {
    height: auto;
    min-height: 140px;
    padding: 12px 16px;
    line-height: 1.55;
    resize: vertical;
}

/* Select : flèche custom en SVG inline (noir) */
.ccbla-field__select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23000'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 10px 6px;
    padding-right: 44px;
}

/* Datetime-local : supprimer le scarabée WebKit qui casse la visu */
.ccbla-field__input--date {
    font-variant-numeric: tabular-nums;
}
.ccbla-field__input--date::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(0); /* noir */
}

/* CHECKBOX / RADIO — style custom noir/blanc */
.ccbla-field__check-inline,
.ccbla-field__check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.4;
    color: #000;
}
.ccbla-field__check-inline input[type="checkbox"],
.ccbla-field__check input[type="checkbox"] {
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #000;
    background: #fff;
    border-radius: 0;
    cursor: pointer;
    position: relative;
    margin: 0;
    transition: background .12s;
}
.ccbla-field__check-inline input[type="checkbox"]:checked::after,
.ccbla-field__check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #000;
}
.ccbla-field__check-inline input[type="checkbox"]:focus-visible,
.ccbla-field__check input[type="checkbox"]:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* Groupes hiérarchiques (catégories, publics) */
.ccbla-field__checks {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ccbla-field__checks--hierarchical { gap: 10px; }
.ccbla-field__check--parent {
    font-weight: 600;
}
.ccbla-field__check--child {
    padding-left: 28px;
    font-weight: 400;
}
.ccbla-field__check--all {
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 1px solid #000;
    margin-bottom: 4px;
}

/* FIELDSETS (email OU téléphone, catégories, publics) */
.ccbla-field__fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 33px;
}
.ccbla-field__fieldset legend {
    padding: 0;
    margin: 0 0 5px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: #000;
}
/*
.ccbla-field__hint-top {
     déjà défini, mais quand dans un fieldset il se colle juste sous legend 
}
*/
/* UPLOADS — file input stylé + preview + progress par slot */
.ccbla-field__file-label {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 14px 24px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: #000;
    width: fit-content;
    transition: background .15s, color .15s;
}
.ccbla-field__file-label:hover,
.ccbla-field__file-label:focus-within {
    background: #000;
    color: #fff;
}
.ccbla-field__file {
    /* Visible pour SR mais masqué visuellement */
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
.ccbla-field__file:focus-visible + .ccbla-field__file-icon,
.ccbla-field__file-label:has(.ccbla-field__file:focus-visible) {
    outline: 2px solid #000;
    outline-offset: 2px;
}
.ccbla-field__file-label.has-file {
    background: #000;
    color: #fff;
}

.ccbla-field__thumb-current {
    display: flex; align-items: center; gap: 16px;
    padding: 12px;
    border: 1px solid #000;
    background: #fff;
}
.ccbla-field__thumb-current img {
    max-width: 120px; max-height: 80px;
    object-fit: cover;
    border: 1px solid #000;
}
.ccbla-field__thumb-current span {
    font-size: 14px;
    color: #000;
    line-height: 1.4;
}

/* Bloc "Fichier actuel" pour documents pré-uploadés en mode édit (ajout 2026-04-27 — pattern parallèle à.ccbla-field__thumb-current pour les images, étendu aux documents PDF/image suite à A4 Migration P3). */
.ccbla-field__doc-current {
    display: flex; align-items: center; gap: 16px;
    padding: 12px;
    border: 1px solid #000;
    background: #fff;
    margin-bottom: 8px;
}
.ccbla-field__doc-current-icon {
    flex-shrink: 0;
    color: #000;
    line-height: 0;
}
.ccbla-field__doc-current-icon svg {
    display: block;
}
.ccbla-field__doc-current-text {
    font-size: 14px;
    color: #000;
    line-height: 1.4;
}
.ccbla-field__doc-current-text a {
    color: #000;
    text-decoration: underline;
    word-break: break-word;
}
.ccbla-field__doc-current-text a:hover,
.ccbla-field__doc-current-text a:focus-visible {
    text-decoration: none;
}

/* Preview aperçu image/fichier après sélection */
.ccbla-field__img-preview {
    display: flex; align-items: center; gap: 16px;
    padding: 12px;
    border: 1px solid #000;
    background: #fff;
    margin-top: 4px;
}
.ccbla-field__img-preview img {
    max-width: 120px; max-height: 80px;
    object-fit: cover;
    border: 1px solid #000;
    display: block;
}
.ccbla-field__preview-meta {
    font-family: var(--font-body);
    font-size: 13px;
    color: #000;
    line-height: 1.5;
}
.ccbla-field__preview-meta strong { display: block; font-weight: 600; }
.ccbla-field__preview-meta em { font-style: normal; color: #555; }
.ccbla-field__preview-error { color: #000; font-size: 14px; }

/* 2026-05-14 — T6: champ alt-block (description image) intégré DANS le cadre image (thumb-current OU img-preview). Le pattern visuel suit "ajouter les documents" (.ccbla-ef-row): le cadre contient img + meta + description, tous unifiés sous une seule bordure. Le JS déplace #ccbla-imgN-alt-block via appendChild dans le cadre approprié (boot pour édition, showPreview pour upload). Implémentation: flex-wrap sur le cadre + flex-basis:100% sur l'alt-block enfant → l'alt prend toute la largeur sous img+meta, séparé par un mince filet dashed. Pas de modif DOM JS supplémentaire. */
.ccbla-field__thumb-current,
.ccbla-field__img-preview {
    flex-wrap: wrap;
}
.ccbla-field__thumb-current > .ccbla-field--img-alt,
.ccbla-field__img-preview  > .ccbla-field--img-alt {
    /* Bascule en pleine largeur, sous la rangée img+meta */
    flex-basis: 100%;
    width: 100%;
    margin: 0;
    padding-top: 12px;
    border-top: 1px dashed #ccc;
}
.ccbla-field__thumb-current > .ccbla-field--img-alt .ccbla-field__hint-top,
.ccbla-field__img-preview  > .ccbla-field--img-alt .ccbla-field__hint-top {
    /* Hint un peu plus discret quand intégré au cadre */
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 0.88rem;
    color: #555;
}
.ccbla-field__thumb-current > .ccbla-field--img-alt .ccbla-field__label,
.ccbla-field__img-preview  > .ccbla-field--img-alt .ccbla-field__label {
    margin-top: 0;
}
/* Quand thumb-current ou img-preview contient un alt-block, on aligne img + meta à top (pas centré) pour un meilleur visuel quand l'alt-block déborde sur plusieurs lignes. */
.ccbla-field__thumb-current:has(> .ccbla-field--img-alt),
.ccbla-field__img-preview:has(> .ccbla-field--img-alt) {
    align-items: flex-start;
}

/* Barre de progression par slot (reste visible pendant upload) */
.ccbla-img-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.ccbla-img-progress {
    flex: 1;
    height: 4px;
    background: #e5e5e5;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    position: relative;
}
.ccbla-img-progress__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: #000;
    transition: width .2s ease;
}
.ccbla-img-progress--done .ccbla-img-progress__fill { background: #000; }
.ccbla-img-progress--error .ccbla-img-progress__fill { background: #000; }
.ccbla-img-progress__label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: #000;
    min-width: 38px;
    text-align: right;
}

/* COMPTEUR DE CARACTÈRES (description min 1000) Strict noir/blanc — plus de gris/vert/orange. */
.ccbla-char-counter {
    display: inline-flex;
    align-items: baseline;
    gap: .2rem;
    margin-top: 8px;
    padding: 8px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: #000;
    background: transparent;
    border: 1px solid #000;
    border-radius: 0;
    align-self: flex-start;
}
.ccbla-char-counter__count {
    color: #000;              /* ⚡ fix text-contrast dernière instance */
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ccbla-char-counter__sep,
.ccbla-char-counter__min,
.ccbla-char-counter__label {
    color: #000;
    opacity: 1;
    font-weight: 400;
}
.ccbla-char-counter--empty,
.ccbla-char-counter--low {
    background: transparent;
    color: #000;
}
.ccbla-char-counter--ok {
    background: #000;
    color: #fff;
    border-color: #000;
}
.ccbla-char-counter--ok .ccbla-char-counter__count,
.ccbla-char-counter--ok .ccbla-char-counter__sep,
.ccbla-char-counter--ok .ccbla-char-counter__min,
.ccbla-char-counter--ok .ccbla-char-counter__label { color: #fff; }
.ccbla-char-counter--ok::before {
    content: "✓";
    font-weight: 700;
    margin-right: 8px;
}

/* SAFETY NOTICE (description + infos sup) Strict noir/blanc, pas de fond orange. */
.ccbla-field__safety-notice {
    margin: 0;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #000;
    color: #000;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    border-radius: 0;
}
.ccbla-field__safety-notice strong { font-weight: 700; }
.ccbla-field__safety-notice--compact {
    padding: 10px 14px;
    font-size: 13px;
}

/* HINT RICH (tarif — aide sur les formats Google) Strict noir/blanc, pas de fond orange sur le warn. */
.ccbla-field__hint-rich {
    margin: 0;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #000;
    color: #000;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    border-radius: 0;
}
.ccbla-field__hint-rich p { margin: 0 0 8px; }
.ccbla-field__hint-rich p:last-child { margin-bottom: 0; }
.ccbla-field__hint-rich strong { font-weight: 700; color: #000; }
.ccbla-field__hint-rich em { font-style: italic; }
.ccbla-field__hint-rich__sub {
    margin-top: 12px !important;
    font-weight: 600;
}
.ccbla-field__hint-rich__list {
    margin: 6px 0 12px !important;
    padding: 0 0 0 18px;
    list-style: disc;
}
.ccbla-field__hint-rich__list li {
    margin: 6px 0;
    color: #000;
}
.ccbla-field__hint-rich__list li strong { font-weight: 700; }
.ccbla-field__hint-rich__warn {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid #000;
    color: #000;
    font-size: 13px;
}
.ccbla-field__hint-rich__warn strong { font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════
   VALIDATION (erreurs inline — WCAG 3.3.1)
   v2 (2026-04-24) : passage au rouge sobre #c62828 (contraste 6.36:1
   sur #fff → AAA). Plus de border-left (remplacée par l'accent couleur
   pour ne pas concurrencer la border-left 5px des sections).
   ══════════════════════════════════════════════════════════════════ */
.ccbla-field__error {
    display: block;
    margin-top: 8px;
    padding: 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: #c62828;                 /* ⚡ rouge accessible */
    background: transparent;
    line-height: 1.4;
}
.ccbla-field__input[aria-invalid="true"],
.ccbla-field__select[aria-invalid="true"],
.ccbla-field__check-inline input[aria-invalid="true"] {
    border-color: #c62828 !important;
    /* 2026-05-04 v2: !important pour vaincre les overrides Kadence/plugin qui appliquaient parfois `outline: none`. + box-shadow en filet de sécurité (non clipped par overflow:hidden d'un parent éventuel). */
    outline: 2px solid #c62828 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #c62828;
}

/* AUTO-SAVE DRAFT — indicateur "brouillon sauvegardé" */
.ccbla-autosave-status {
    /* 2026-05-13 (demande Nic) — Bandeau d'autosave masqué côté membre. Le contenu reste rendu pour les ARIA aria-live mais pas affiché visuellement. L'autosave continue de fonctionner en arrière-plan (le JS lit/écrit data-state, indépendant de display). */
    display: none !important;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    padding: 8px 14px;
    font-family: var(--font-body);
    font-size: 13px;
    color: #000;
    background: transparent;
    border: 1px solid #000;
    opacity: 0;
    transition: opacity .25s ease;
}
.ccbla-autosave-status[data-state="saving"] { opacity: 1; }
.ccbla-autosave-status[data-state="saved"]  { opacity: 1; }
.ccbla-autosave-status[data-state="error"]  { opacity: 1; }
.ccbla-autosave-status::before {
    content: "";
    flex-shrink: 0;
    width: 8px; height: 8px;
    background: #000;
    border-radius: 0;
}
.ccbla-autosave-status[data-state="saving"]::before {
    /* pulse discret */
    animation: ccbla-autosave-pulse 1s ease-in-out infinite;
}
@keyframes ccbla-autosave-pulse {
    0%,100% { opacity: 1; }
    50%     { opacity: .25; }
}
@media (prefers-reduced-motion: reduce) {
    .ccbla-autosave-status[data-state="saving"]::before { animation: none; }
    .ccbla-autosave-status { transition: none; }
}

/* PROGRESS UPLOAD GLOBAL (nouveau, passe 4) Une barre unique + description d'étape en dessous, qui remplace les indicateurs individuels au moment de la soumission. */
.ccbla-mf-upload-status {
    margin-top: 24px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 0;
}
.ccbla-mf-upload-status__heading {
    display: block;
    font-family: var(--font-heading-tight);
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin: 0 0 12px;
}
.ccbla-mf-upload-status__bar {
    position: relative;
    height: 6px;
    background: #e5e5e5;
    overflow: hidden;
    margin: 0 0 10px;
}
.ccbla-mf-upload-status__bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: #000;
    transition: width .35s ease;
}
.ccbla-mf-upload-status__step {
    font-family: var(--font-body);
    font-size: 14px;
    color: #000;
    margin: 0;
    line-height: 1.4;
    min-height: 1.4em;
}
.ccbla-mf-upload-status__step b { font-weight: 700; }
.ccbla-mf-upload-status__steps {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #000;
}
.ccbla-mf-upload-status__steps li {
    padding-left: 20px;
    position: relative;
    opacity: .5;
}
.ccbla-mf-upload-status__steps li[data-state="active"] { opacity: 1; font-weight: 600; }
.ccbla-mf-upload-status__steps li[data-state="done"]   { opacity: 1; }
.ccbla-mf-upload-status__steps li::before {
    content: "•";
    position: absolute;
    left: 6px;
    top: 0;
    color: #000;
}
.ccbla-mf-upload-status__steps li[data-state="done"]::before   { content: "✓"; }
.ccbla-mf-upload-status__steps li[data-state="error"]::before  { content: "✗"; }

/* ACTIONS (bouton submit) Specs exactes Nic (2026-04-23, miroir.wp-element-button du thème): - display: inline-flex + align/justify center - min-height 44px (WCAG 2.5.5 target-size) - font Agrandir Wide Medium 20px / line-height 1 / weight 500 - padding-block 12px 10px (asymétrique, optical) - padding-inline 10px - bg pop-white, color pop-dark, border 1px solid pop-dark - border-radius 0, uppercase - transition bg + border + color.18s EXCLUS explicitement par Nic (lignes barrées dans sa spec): - box-shadow: none - text-box-trim / text-box-edge */
.ccbla-form-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 40px;
    margin-bottom: 60px;  /* 2026-05-13 (demande Nic) — espace bas avant footer/blocs suivants */
}
.ccbla-event-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size: 20px;
    line-height: 1;
    background-color: var(--wp--preset--color--pop-white, #fff);
    color: var(--wp--preset--color--pop-dark, #111);
    border: 1px solid var(--wp--preset--color--pop-dark, #111);
    border-radius: 0;
    padding-block: 12px 10px;
    padding-inline: 10px;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    position: relative;
}
.ccbla-event-form__submit:hover,
.ccbla-event-form__submit:focus-visible {
    background-color: var(--wp--preset--color--pop-dark, #111);
    color: var(--wp--preset--color--pop-white, #fff);
    /* 2026-05-13 — outline 2px + offset retirés (décision Nic). L'inversion background/color au hover/focus reste le signal visuel. */
}
.ccbla-event-form__submit.is-loading {
    cursor: wait;
    pointer-events: none;
}
.ccbla-event-form__submit.is-loading .ccbla-btn__text {
    opacity: .7;
}
/* ⚡ 2026-04-29 (point 2) — spinner du bouton submit aligné sur le loader POP officiel utilisé dans tous les blocs AJAX (filters-agenda, loop-agenda-utick, agenda-int-ext, loop-membres). Réutilise les variables CSS --ccbla-pop-loader-* déjà définies dans style.css du thème (anneau qui tourne + badge avec logo POP centré). Taille = 80% de la taille AJAX (42px) ≈ 34px, demande Nic 2026-04-29. Le spinner remplace son ancien::root border-only par un pattern à 2 pseudo-éléments (::before = anneau,::after = badge logo). */
.ccbla-btn__spinner {
    display: none;
    position: relative;
    width:  34px;
    height: 34px;
    flex: 0 0 auto;
    margin-left: 12px;
    border-radius: 50%;
    background: transparent;
    pointer-events: none;
    box-sizing: border-box;
    /* Reset des anciens styles d'anneau border-only */
    border: 0;
}
.ccbla-btn__spinner::before {
    content: '';
    position: absolute;
    inset: 0;
    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;
}
.ccbla-btn__spinner::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width:  var(--ccbla-pop-loader-badge-width,  calc(100% - 2px));
    height: var(--ccbla-pop-loader-badge-height, calc(100% - 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-position: center;
    background-repeat: no-repeat;
    background-size: var(--ccbla-pop-loader-logo-size, 62% auto);
}
.ccbla-event-form__submit.is-loading .ccbla-btn__spinner {
    display: inline-block;
}
@media (prefers-reduced-motion: reduce) {
    .ccbla-btn__spinner::before { animation: none; }
}

.ccbla-event-form__cancel {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--wp--preset--color--pop-dark, #111);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ccbla-event-form__cancel:hover,
.ccbla-event-form__cancel:focus-visible {
    text-decoration-thickness: 2px;
    outline: 2px solid var(--wp--preset--color--pop-dark, #111);
    outline-offset: 2px;
}

/* WP EDITOR (TinyMCE injecté par wp_editor) — alignement visuel */
.ccbla-field .wp-editor-wrap {
    border: 1px solid #000;
    background: #fff;
}
.ccbla-field .wp-editor-wrap .mce-toolbar-grp,
.ccbla-field .wp-editor-wrap .mce-top-part,
.ccbla-field .wp-editor-wrap .mce-menubar,
.ccbla-field .wp-editor-wrap .mce-statusbar,
.ccbla-field .wp-editor-wrap .quicktags-toolbar {
    background: #fff !important;
    border-color: #000 !important;
}
.ccbla-field .wp-editor-wrap .wp-editor-tools {
    border-bottom: 1px solid #000;
    background: #fff;
    padding: 8px 12px;
}
.ccbla-field .wp-editor-wrap .mce-btn button,
.ccbla-field .wp-editor-wrap .mce-ico {
    color: #000 !important;
}

/* ── 2026-04-24: tous les éléments internes du wp_editor en fond blanc ── Le <textarea class="wp-editor-area"> hors-TinyMCE (mode Code) est désormais masqué (quicktags:false + default_editor:'tinymce') mais reste dans le DOM pour la soumission. Ceinture+bretelles: bg:#fff pour éviter le jaune Chrome autofill s'il devait apparaître. */
.ccbla-field textarea.wp-editor-area,
.ccbla-field textarea.wp-editor-area:focus,
.ccbla-field textarea.wp-editor-area:hover {
    background: #fff !important;
    color: var(--wp--preset--color--pop-dark, #111);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
}
.ccbla-field textarea.wp-editor-area:-webkit-autofill,
.ccbla-field textarea.wp-editor-area:-webkit-autofill:hover,
.ccbla-field textarea.wp-editor-area:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: var(--wp--preset--color--pop-dark, #111) !important;
}

/* ── 2026-04-24 : pictos inline monochromes (remplacent ⚠️ 💡 emojis) ── */
.ccbla-icon-inline {
    display: inline-block;
    vertical-align: -2px;
    margin-right: 6px;
    color: #000;
    flex-shrink: 0;
}

/* RESPONSIVE */
@media (max-width: 640px) {
    .ccbla-event-form__title { font-size: 30px; line-height: 40px; }
    .ccbla-form-section__title { font-size: 22px; }
    .ccbla-notice { padding: 1rem 1.25rem; }
    .ccbla-notice__actions { margin-left: 0; width: 100%; }
    .ccbla-notice__btn { width: 100%; text-align: center; }
    .ccbla-form-actions { flex-direction: column; align-items: stretch; }
    .ccbla-event-form__submit { width: 100%; text-align: center; }
    .ccbla-event-form__cancel { text-align: center; }
}

/* LAYOUT HINT — "Recommandations pour la mise en forme" v2 (2026-04-24): <details>/<summary> tooltip cliquable. Schéma décoratif VERTICAL dans le panel (texte haut → image → texte bas). Palette noir/blanc stricte, cohérente avec la charte du form. A11y: <summary> est focusable nativement, Enter/Space togglent, chevron indique l'état (rotate 180° quand [open]). aria-expanded est géré automatiquement par le navigateur sur <details>. */
.ccbla-layout-hint {
    margin: 0 0 16px;
    border: 1px solid #000;
    background: #fff;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: #000;
}
.ccbla-layout-hint__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
    color: #000;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    list-style: none;
}
.ccbla-layout-hint__summary::-webkit-details-marker { display: none; }
.ccbla-layout-hint__summary::marker { content: ''; }
.ccbla-layout-hint__summary:hover {
    background: #f6f6f6;
}
.ccbla-layout-hint__summary:focus-visible {
    outline: 2px solid #000;
    outline-offset: -2px;
}
.ccbla-layout-hint__icon {
    flex: 0 0 auto;
    color: #000;
}
.ccbla-layout-hint__title {
    flex: 1 1 auto;
    letter-spacing: 0;
}
.ccbla-layout-hint__chevron {
    flex: 0 0 auto;
    color: #000;
    transition: transform .18s ease;
}
.ccbla-layout-hint[open] > .ccbla-layout-hint__summary .ccbla-layout-hint__chevron {
    transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
    .ccbla-layout-hint__chevron { transition: none; }
}

.ccbla-layout-hint__panel {
    padding: 0 14px 14px;
    border-top: 1px solid #000;
}

/* Schéma VERTICAL (spec Nic 2026-04-24) : les 3 blocs empilés en colonne */
.ccbla-layout-hint__schema {
    display: flex;
    flex-direction: column;        /* ⚡ vertical */
    align-items: stretch;
    gap: 10px;
    margin: 14px 0 12px;
    padding: 12px;
    background: #fff;
    border: 1px dashed #000;
}
.ccbla-layout-hint__block {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 0;
    padding: 8px 10px;
    color: #000;
}
.ccbla-layout-hint__block--img {
    width: 70%;                  /* ⚡ 2026-04-24 : plus étroit que les lignes de texte */
    align-self: center;          /*    → visualise bien une image centrée dans un article */
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    min-height: 60px;
}
.ccbla-layout-hint__line {
    display: block;
    height: 3px;
    width: 100%;
    background: #000;
    opacity: .55;
    border-radius: 0;
}
.ccbla-layout-hint__line--short { width: 60%; }
.ccbla-layout-hint__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #000;
}
.ccbla-layout-hint__text strong {
    color: #000;
    font-weight: 700;
}

/* TINYMCE — hover toolbar (icône blanche sur fond noir) ⚡ 2026-04-24 État normal: inchangé (icône sombre, fond neutre Kadence/WP). État actif (:not(.mce-active)): intact, garde son fond rouge natif WP pour signaler « formatage appliqué ». État:hover ou:focus: FORCE fond noir #111 + icône/texte #fff. Scope:.ccbla-event-form-wrap → ne fuit pas vers l'admin / autres éditeurs TinyMCE du site. */
.ccbla-event-form-wrap .mce-btn:not(.mce-active):hover,
.ccbla-event-form-wrap .mce-btn:not(.mce-active):focus,
.ccbla-event-form-wrap .mce-btn:not(.mce-active):focus-visible {
    background-color: #111 !important;
    background-image: none !important;
    border-color: #111 !important;
    box-shadow: none !important;
}
.ccbla-event-form-wrap .mce-btn:not(.mce-active):hover button,
.ccbla-event-form-wrap .mce-btn:not(.mce-active):focus button,
.ccbla-event-form-wrap .mce-btn:not(.mce-active):focus-visible button {
    background: transparent !important;
}
.ccbla-event-form-wrap .mce-btn:not(.mce-active):hover .mce-ico,
.ccbla-event-form-wrap .mce-btn:not(.mce-active):focus .mce-ico,
.ccbla-event-form-wrap .mce-btn:not(.mce-active):focus-visible .mce-ico,
.ccbla-event-form-wrap .mce-btn:not(.mce-active):hover .mce-txt,
.ccbla-event-form-wrap .mce-btn:not(.mce-active):focus .mce-txt,
.ccbla-event-form-wrap .mce-btn:not(.mce-active):focus-visible .mce-txt {
    color: #fff !important;
}
/* La flèche de dropdown (« ▾ ») à droite de Formats change aussi */
.ccbla-event-form-wrap .mce-btn:not(.mce-active):hover .mce-caret,
.ccbla-event-form-wrap .mce-btn:not(.mce-active):focus .mce-caret {
    border-top-color: #fff !important;
}

/* FLATPICKR — thème POP (2026-04-29, point 4) Surchage légère du thème par défaut Flatpickr pour matcher la charte CCBLA: bordures noires droites (border-radius:0), accent POP primary, typo Body. La feuille de base flatpickr.min.css est chargée en amont via wp_enqueue_style (cf. enqueue PHP). */
.flatpickr-calendar {
    border: 1px solid #000;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    font-family: var(--font-body);
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after { display: none; }
.flatpickr-months .flatpickr-month {
    background: var(--wp--preset--color--pop-primary, #6b4796);
    color: #fff;
    height: 40px;
    border-radius: 0;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: #fff;
    font-weight: 600;
}
.flatpickr-current-month .numInputWrapper span.arrowUp::after { border-bottom-color: #fff; }
.flatpickr-current-month .numInputWrapper span.arrowDown::after { border-top-color: #fff; }
.flatpickr-prev-month, .flatpickr-next-month { color: #fff; fill: #fff; }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: #fff; opacity: .8; }

.flatpickr-weekdays { background: var(--wp--preset--color--pop-primary, #6b4796); }
.flatpickr-weekday {
    color: #fff !important;
    font-weight: 600;
    font-size: 12px;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--wp--preset--color--pop-primary, #6b4796);
    border-color: var(--wp--preset--color--pop-primary, #6b4796);
    color: #fff;
}
.flatpickr-day.today {
    border-color: #000;
}
.flatpickr-day.today:hover {
    background: #000;
    color: #fff;
}
.flatpickr-day:hover {
    background: rgba(0,0,0,.08);
    border-radius: 0;
}
.flatpickr-time input {
    font-family: var(--font-body);
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover {
    background: rgba(0,0,0,.05);
}

/* Inputs date dans le formulaire — cohérence avec les autres inputs */
.ccbla-field__input--date {
    cursor: pointer;
}
/* Quand Flatpickr est attaché, on garde la même apparence d'input texte */
input.ccbla-field__input--date.flatpickr-input {
    background-color: #fff;
    /* 2026-05-04: force border 1px dark — Flatpickr peut diluer la spécificité de la règle de base.ccbla-field__input via sa classe.flatpickr-input appliquée au runtime. Sélecteur input.X.Y = (0,2,1), gagne sur fallback. */
    border: 1px solid var(--wp--preset--color--pop-dark, #111);
}

@media (prefers-reduced-motion: reduce) {
    .flatpickr-calendar { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   STATUT GÉOLOC (2026-04-29, suggestion 2)
   ──────────────────────────────────────────────────────────────────
   Affiche "Adresse géolocalisée." (vert + check) ou "Adresse non
   géolocalisée." (rouge + croix) sous le champ adresse. Pattern miroir
   de functions.php L341-394 (admin). Mise à jour côté JS au onSelect
   et au reset (input event sur ef_lieu).
   role="status" + aria-live="polite" → annoncé aux lecteurs d'écran.
   Couleurs : vert #2e7d32 (ratio 5.7:1 sur blanc, WCAG AA OK) ;
              rouge #c62828 (ratio 5.9:1 sur blanc, WCAG AA OK).
   ══════════════════════════════════════════════════════════════════ */
.ccbla-addr-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    padding: 6px 10px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    background: transparent;
    border-radius: 0;
}
.ccbla-addr-status__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
}
.ccbla-addr-status--ok {
    color: #2e7d32;  /* Vert accessible — WCAG AA sur blanc */
}
.ccbla-addr-status--ko {
    /* 2026-05-13 — Orange (#b06000) au lieu de rouge: adresse non géoloc n'est PAS bloquante pour la création, sert juste à l'itinéraire. Ratio 5.6:1 sur blanc → WCAG AA OK. */
    color: #b06000;
}

/* 2026-05-13 — Champ alt description image (inclusion numérique). Utilisé sur image à la une, vignette events/article, et PJ images. */
.ccbla-field--img-alt {
    margin-top: 12px;
}
.ccbla-field--img-alt .ccbla-field__hint-top {
    margin-bottom: 8px;
    font-size: 0.92rem;
}

/* 2026-05-13 (passe 4 — fix Nic image "encadrés rouges"): Force l'invisibilité des alt-blocks `#ccbla-img1-alt-block` et `#ccbla-img2-alt-block` quand ils sont en position INITIALE PHP (direct children de `.ccbla-field`, attribut hidden posé). Pourquoi: dans certains cas d'édition ou de retour autosave, l'attribut HTML `hidden` peut être retiré par le JS avant que `ccblaMoveAltBlockToFrame()` ait déplacé le bloc → résultat: bloc visible en haut, hors du cadre image, comme un champ "en premier plan" gênant (cf. screenshot Nic encadrés rouges). Logique CSS: - Si parent direct =.ccbla-field (état initial) ET id = alt-block → forcé hidden, peu importe l'attribut hidden. - Quand JS déplace dans.ccbla-field__thumb-current ou.ccbla-field__img-preview → le sélecteur ne match plus (parent direct différent) → bloc redevient visible normalement. Le sélecteur `:not(.ccbla-field__thumb-current):not(...) > #ccbla-imgN-alt-block` exprime exactement "parent direct n'est PAS un cadre image" — robuste sans dépendre de l'attribut hidden volatile. */
.ccbla-field:not(.ccbla-field__thumb-current):not(.ccbla-field__img-preview) > #ccbla-img1-alt-block,
.ccbla-field:not(.ccbla-field__thumb-current):not(.ccbla-field__img-preview) > #ccbla-img2-alt-block {
    display: none !important;
}
.ccbla-ef-desc-help,
.ccbla-mf-desc-help {
    margin: 4px 0 8px;
    font-size: 0.88rem;
    line-height: 1.4;
    color: #555;
}

/* PIÈCES JOINTES MULTI-FICHIERS (refonte 2026-05-07) Refonte « PJ libre » (point 6 mail Le POP du 7 mai). Multi-fichiers max 10 avec champ description par fichier. Modèle adapté du pattern.ccbla-mf-* de proposer-article, namespacé `.ccbla-ef-*` (event-files) pour éviter toute collision (les styles mf-* ne sont chargés que sur /proposer-un-article/ et inversement). Strict noir/blanc, cohérent avec le reste du formulaire event. */
.ccbla-ef-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0;
}
.ccbla-ef-list:empty { display: none; }

/* Ligne = un fichier (existant ou en cours d'upload) */
.ccbla-ef-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 12px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.3;
    color: #000;
}
.ccbla-ef-row--uploading { /* sobre */ }
.ccbla-ef-row--done      { /* sobre */ }
.ccbla-ef-row--error     { border-left-width: 4px; }

/* Vignette 120×80 — image OU label icône type fichier */
.ccbla-ef-thumb {
    flex-shrink: 0;
    width: 120px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #000;
    overflow: hidden;
    position: relative;
}

/* 2026-05-08: wrapper <a> pour vignette cliquable (mode édition). Conserve le layout flex (display: contents) pour ne pas casser la grille de la row. Hover/focus = légère ombre + curseur pointer pour signaler l'interactivité. */
.ccbla-ef-thumb-link {
    display: contents;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.ccbla-ef-thumb-link:hover .ccbla-ef-thumb,
.ccbla-ef-thumb-link:focus-visible .ccbla-ef-thumb {
    box-shadow: 0 0 0 2px var(--pop-primary, #6b4796);
    transition: box-shadow 120ms ease;
}
.ccbla-ef-thumb-link:focus-visible {
    outline: none;
}
.ccbla-ef-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ccbla-ef-thumb__label {
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, var(--font-wide-medium, "Agrandir Wide Medium", sans-serif));
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0;
    color: #000;
    text-align: center;
    line-height: 1;
    text-transform: uppercase;
    padding: 0 6px;
}
.ccbla-ef-thumb--pdf   { background: #f7f7f7; }
.ccbla-ef-thumb--file  { background: #fafafa; }
.ccbla-ef-thumb--image { background: #fff; }

/* Statut icône + spinner mini */
.ccbla-ef-status-icon { font-style: normal; flex-shrink: 0; align-self: flex-start; }
.ccbla-ef-status-icon--ok,
.ccbla-ef-status-icon--err { font-weight: 700; }

/* Bloc info (à droite de la tuile) */
.ccbla-ef-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ccbla-ef-info__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ccbla-ef-info__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ccbla-ef-name {
    font-family: var(--wp--preset--font-family--agrandir-tight-bold, var(--font-tight-bold, "Agrandir Tight Bold", sans-serif));
    font-size: 16px;
    font-weight: 700;
    color: #000;
    word-break: break-word;
    line-height: 1.25;
    letter-spacing: 0;
}
.ccbla-ef-size {
    font-family: var(--font-body);
    font-size: 13px;
    color: #555;
}
.ccbla-ef-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    border: 1px solid #000;
    color: #000;
    background: #fff;
}

/* Lien d'ouverture (fichiers existants) */
.ccbla-ef-dl {
    flex-shrink: 0;
    color: #000;
    text-decoration: none;
    font-size: 16px;
    padding: 2px 8px;
    border: 1px solid #000;
    line-height: 1;
}
.ccbla-ef-dl:hover,
.ccbla-ef-dl:focus-visible {
    background: #000;
    color: #fff;
    outline: 0;
}

/* Champ description par fichier */
.ccbla-ef-desc {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}
.ccbla-ef-desc-label {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ccbla-ef-desc-optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #555;
    margin-left: 4px;
}
.ccbla-ef-desc-input {
    width: 100%;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    color: #000;
    -webkit-appearance: none;
    appearance: none;
}
.ccbla-ef-desc-input:focus {
    outline: 2px solid #000;
    outline-offset: 1px;
    border-color: #000;
}
.ccbla-ef-desc-count {
    font-family: var(--font-body);
    font-size: 11px;
    color: #555;
    align-self: flex-end;
}

/* Barre de progression par ligne */
.ccbla-ef-progress {
    display: block;
    height: 3px;
    background: #e5e5e5;
    overflow: hidden;
    border-radius: 0;
    margin-top: 4px;
}
.ccbla-ef-progress__fill {
    display: block;
    height: 100%;
    width: 0%;
    background: #000;
    transition: width .2s ease;
}

/* Erreur par ligne */
.ccbla-ef-error {
    font-family: var(--font-body);
    font-size: 13px;
    color: #c62828;
    margin-top: 4px;
    line-height: 1.4;
}

/* Bouton supprimer (× à droite) */
.ccbla-ef-remove {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: transparent;
    border: 1px solid #000;
    color: #000;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    font-family: var(--font-body);
    border-radius: 0;
    transition: background .15s, color .15s;
    align-self: flex-start;
}
.ccbla-ef-remove:hover,
.ccbla-ef-remove:focus-visible {
    background: #000;
    color: #fff;
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* Bouton "+ Ajouter un document" */
.ccbla-ef-add-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 12px 24px;
    background: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background .15s, color .15s;
}
.ccbla-ef-add-btn:hover,
.ccbla-ef-add-btn:focus-visible {
    background: #000;
    color: #fff;
    outline: 2px solid #000;
    outline-offset: 2px;
}
.ccbla-ef-add-btn[disabled] {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Mini spinner (réutilise pattern.ccbla-mini-pop-spin de proposer-article mais le namespace mf-* n'étant pas chargé ici, on le re-déclare local) */
.ccbla-mini-pop-spin {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid #000;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ccbla-ef-spin .7s linear infinite;
}
@keyframes ccbla-ef-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .ccbla-mini-pop-spin { animation: none; }
}

/* Classe sr-only (utilitaire pour input file caché) */
.ccbla-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Responsive : layout mobile */
@media (max-width: 640px) {
    .ccbla-ef-row { flex-wrap: wrap; gap: 12px; padding: 10px; }
    .ccbla-ef-thumb { width: 96px; height: 64px; }
    .ccbla-ef-thumb__label { font-size: 18px; }
    .ccbla-ef-info { flex: 1 1 calc(100% - 108px); min-width: 0; }
    .ccbla-ef-status-icon { order: 3; }
    .ccbla-ef-remove { order: 4; }
}

/* 2026-05-08 — Pass 2B — Lazy reveal "+ Mon événement a plusieurs dates" Mode simple par défaut à la création (CSS class.is-mode-simple sur le repeater). Le bouton CTA toggle vers mode multi (one-way) en JS. Cf. blocks/proposer-evenement/script.js et render.php ($ccbla_mode_simple). Règles: on cache uniquement les éléments décoratifs/contrôles spécifiques du repeater multi-rows. Les inputs date_debut/date_fin restent visibles et fonctionnels en mode simple (1 row visible avec ses 2 inputs). */

/* Mode simple: cache le legend "Date 1" (redondant quand 1 seule date) et le bouton "✕ Retirer" (la seule row ne peut pas être retirée). */
.ccbla-dates-repeater.is-mode-simple .ccbla-dates-row__legend,
.ccbla-dates-repeater.is-mode-simple .ccbla-dates-row__remove {
    display: none;
}

/* Mode simple: cache le bloc d'actions (ajouter une date / +1 semaine / +1 mois). Sélecteur sibling:.ccbla-dates-actions est le sibling immédiat suivant le repeater. */
.ccbla-dates-repeater.is-mode-simple + .ccbla-dates-actions {
    display: none;
}

/* CTA "+ plusieurs dates": bouton link-style discret, visible uniquement en mode simple à la création (rendu conditionnel côté PHP). */
.ccbla-dates-cta-multi {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.5rem 0;
    background: transparent;
    border: 0;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    font-size: 1rem;
    font-family: inherit;
}

.ccbla-dates-cta-multi:hover {
    text-decoration: none;
}

/* Focus visible : pattern thème (cf. CCBLA-PROJECT.md §WCAG) */
.ccbla-dates-cta-multi:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

.ccbla-dates-cta-multi[hidden] {
    display: none;
}

/* 2026-05-08 — Pass 2B Lot 2 — Option D: overlay UX submission Overlay full-page affiché par script.js pendant la soumission. Bloque l'interaction utilisateur, donne un signe de vie (spinner + timer + estimation), évite double-clic et fermeture intempestive. Z-index élevé pour passer au-dessus de tous les autres éléments (header sticky, modales Kadence, etc.). Le hidden attribute fait disparaître le bloc tant que script.js ne le révèle pas. */

.ccbla-submit-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 15, 15, 0.85);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.ccbla-submit-overlay[hidden] {
    display: none;
}

.ccbla-submit-overlay__card {
    max-width: 480px;
    width: 100%;
    padding: 2rem 1.5rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    text-align: center;
    color: #111;
    font-family: var(--font-body, system-ui, sans-serif);
}

/* 2026-05-10 — Spinner CSS retiré (markup correspondant supprimé dans render.php). La liste verticale d'étapes (.ccbla-submit-overlay__steps) donne désormais le signe de vie via l'animation des trois points sur l'étape courante. Les anciennes règles.ccbla-submit-overlay__spinner et @keyframes ccbla-spin sont supprimées (cleanup propre, pas de CSS mort). */

.ccbla-submit-overlay__title {
    margin: 0 0 0.75em;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: #111;
}

.ccbla-submit-overlay__estim {
    margin: 0 0 0.5em;
    font-size: 0.95rem;
    color: #444;
}

.ccbla-submit-overlay__timer {
    margin: 0 0 1em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.5rem;
    font-weight: 600;
    color: #111;
    letter-spacing: 0.05em;
}

.ccbla-submit-overlay__hint {
    margin: 0;
    font-size: 0.85rem;
    color: #666;
    line-height: 1.4;
}

/* Bouton submit désactivé pendant l'envoi (cohérent avec aria-busy). */
.ccbla-event-form__submit[aria-busy="true"] {
    opacity: 0.5;
    cursor: wait;
}

/* 2026-05-09 — Pass 2B+ frontend récurrence Refonte UX dates: • Mode toggle simple/avancé • Récap (zone POST) + saisie manuelle + récurrence + bouton Vérifier • Modal Vérifier (liste éditable ✕) • Modal confirm switch avancé→simple (Stratégie B) • Barre progression X/N à la soumission (étend overlay submit existant) Cohérence visuelle: - Var thème: --wp--preset--color--pop-dark, fallback #111 - Focus visible: 3px solid #005fcc (cf. pattern thème CCBLA-PROJECT.md) - Pas de border-radius (charte POP angles vifs) - Mobile-first: grilles 1 col puis 2-3 cols ≥768/1024px */

/* ───── État caché (préserver vs display:none de Kadence/UM) ───── */
.ccbla-dates-simple.is-hidden,
.ccbla-dates-advanced.is-hidden {
    display: none !important;
}

/* 2026-05-13 (demande Nic) — Espace bas du wrapper mode simple pour aérer le label.ccbla-field suivant (Adresse / Lieu). La cause:.ccbla-field:last-child margin-bottom:0 dans.ccbla-dates-simple → le dernier field (date fin) collait au label Adresse externe. 33px aligne sur le rythme.ccbla-field (margin-bottom: 33px). */
.ccbla-dates-simple {
    margin-bottom: 33px;
}

/* ═══ TOGGLE MODE SIMPLE / AVANCÉ ═══════════════════════════════════ */
.ccbla-dates-mode {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin: 0.5rem 0 1.25rem;
}
@media (min-width: 600px) {
    .ccbla-dates-mode {
        grid-template-columns: 1fr 1fr;
    }
}
.ccbla-dates-mode__option {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--wp--preset--color--pop-dark, #111);
    background: #fff;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    user-select: none;
}
.ccbla-dates-mode__option:hover {
    background: rgba(0, 0, 0, 0.03);
}
.ccbla-dates-mode__option input[type="radio"] {
    margin: 0.2em 0 0;
    flex: 0 0 auto;
    accent-color: var(--wp--preset--color--pop-dark, #111);
    width: 1.1em;
    height: 1.1em;
    cursor: pointer;
}
.ccbla-dates-mode__option:has(input[type="radio"]:checked) {
    background: var(--wp--preset--color--pop-dark, #111);
    color: #fff;
}
.ccbla-dates-mode__option:has(input[type="radio"]:focus-visible) {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}
.ccbla-dates-mode__label {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.3;
}
.ccbla-dates-mode__title {
    font-weight: 700;
    font-size: 1rem;
}
.ccbla-dates-mode__desc {
    font-size: 0.85rem;
    opacity: 0.85;
}

/* ═══ MODE AVANCÉ — Layout général ══════════════════════════════════ */
.ccbla-dates-advanced {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

/* ── Récap des dates retenues (zone de réception POST) ── */
.ccbla-dates-recap {
    border: 2px solid var(--wp--preset--color--pop-dark, #111);
    background: rgba(255, 255, 255, 0.6);
    padding: 0.85rem 1rem;
}
.ccbla-dates-recap__title {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wp--preset--color--pop-dark, #111);
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.ccbla-dates-recap__count {
    font-size: 0.95rem;
    font-weight: 400;
    color: #595959;
}
.ccbla-dates-recap__empty {
    margin: 0;
    color: #595959;
    font-size: 0.95rem;
    font-style: italic;
}
.ccbla-dates-recap__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ccbla-dates-recap__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    background: #fff;
    border: 1px solid #d9d9d9;
    font-variant-numeric: tabular-nums;
    flex-wrap: wrap;
}
.ccbla-dates-recap__num {
    font-weight: 700;
    flex: 0 0 auto;
    min-width: 4.5em;
    color: var(--wp--preset--color--pop-dark, #111);
}
.ccbla-dates-recap__when {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}
.ccbla-dates-recap__arrow {
    margin: 0 0.3em;
    color: #888;
}
.ccbla-dates-recap__remove {
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #d9d9d9;
    background: #fff;
    color: #b00020;
    width: 32px;
    height: 32px;
    /* 2026-05-14 — R2 (spec Nic): centrage du contenu ✕ via flex + justify. Ajout align-items pour centrer aussi verticalement (cohérence visuelle sur tous les navigateurs, sans dépendre du line-height seul). */
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.ccbla-dates-recap__remove:hover {
    background: #b00020;
    color: #fff;
    border-color: #b00020;
}
.ccbla-dates-recap__remove:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

/* ═══ PANELS (saisie manuelle + récurrence) ═══════════════════════ */
.ccbla-dates-panel {
    border: 1px solid var(--wp--preset--color--pop-dark, #111);
    background: rgba(255, 255, 255, 0.45);
}
/* 2026-05-14 — T4: --manual passe de <div> à <details>. Annule le padding interne (le summary et le body gèrent chacun leur padding via.ccbla-dates-panel__summary /.ccbla-dates-panel__body). Cohérence avec --recurrence (qui était déjà en <details>). */
.ccbla-dates-panel--manual {
    padding: 0;
}
.ccbla-dates-panel__title {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--pop-dark, #111);
}
.ccbla-dates-panel__hint {
    margin: 0 0 0.85rem;
    color: #595959;
    font-size: 0.9rem;
    font-style: italic;
}

/* ── Saisie manuelle : repeater rows ── */
.ccbla-dates-manual {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}
.ccbla-dates-manual__row {
    border: 1px solid #d9d9d9;
    background: #fff;
    padding: 0.75rem 0.85rem 0.85rem;
    margin: 0;
    position: relative;
}
.ccbla-dates-manual__legend {
    padding: 0 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--wp--preset--color--pop-dark, #111);
    letter-spacing: 0.04em;
}
@media (min-width: 600px) {
    .ccbla-dates-manual__row {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 0.6rem 1rem;
        align-items: end;
    }
    .ccbla-dates-manual__row > legend {
        grid-column: 1 / -1;
        margin-bottom: 0.25rem;
    }
}
.ccbla-dates-manual__remove {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #d9d9d9;
    background: #fff;
    color: #b00020;
    width: 32px;
    height: 32px;
    line-height: 1;
    font-size: 1rem;
    cursor: pointer;
    margin-bottom: 0.15rem;
    align-self: end;
    transition: background 0.12s ease, color 0.12s ease;
}
.ccbla-dates-manual__remove:hover {
    background: #b00020;
    color: #fff;
    border-color: #b00020;
}
.ccbla-dates-manual__remove:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}
.ccbla-dates-manual__add {
    appearance: none;
    -webkit-appearance: none;
    border: 1px dashed var(--wp--preset--color--pop-dark, #111);
    background: transparent;
    color: var(--wp--preset--color--pop-dark, #111);
    padding: 0.6rem 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    font-weight: 600;
}
.ccbla-dates-manual__add:hover {
    background: var(--wp--preset--color--pop-dark, #111);
    color: #fff;
    border-style: solid;
}
.ccbla-dates-manual__add:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

/* ── Divider OU ── */
.ccbla-dates-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #888;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0.25rem 0;
}
.ccbla-dates-divider::before,
.ccbla-dates-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #ccc;
}
.ccbla-dates-divider__label {
    flex: 0 0 auto;
}

/* ── Récurrence <details> ── */
.ccbla-dates-panel--recurrence {
    padding: 0;
}
.ccbla-dates-panel__summary {
    list-style: none;
    cursor: pointer;
    padding: 0.85rem 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1rem;
    color: var(--wp--preset--color--pop-dark, #111);
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}
.ccbla-dates-panel--recurrence[open] > .ccbla-dates-panel__summary,
.ccbla-dates-panel--manual[open]     > .ccbla-dates-panel__summary {
    /* 2026-05-14 — Étendu à --manual qui est désormais aussi un <details>. */
    border-bottom-color: var(--wp--preset--color--pop-dark, #111);
}
.ccbla-dates-panel__summary::-webkit-details-marker {
    display: none;
}
.ccbla-dates-panel__summary::before {
    content: "▶";
    font-size: 0.7em;
    transition: transform 0.2s ease;
    display: inline-block;
}
.ccbla-dates-panel--recurrence[open] > .ccbla-dates-panel__summary::before,
.ccbla-dates-panel--manual[open]     > .ccbla-dates-panel__summary::before {
    /* 2026-05-14 — Rotation chevron étendue à --manual. */
    transform: rotate(90deg);
}
.ccbla-dates-panel__summary:hover {
    background: rgba(0, 0, 0, 0.03);
}
.ccbla-dates-panel__summary:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: -3px;
}
.ccbla-dates-panel__summary-icon {
    /* 2026-05-14 — Conteneur SVG icône (repeat pour récurrence, keyboard pour manual). currentColor → noir (pop-dark) hérité. */
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.ccbla-dates-panel__summary-icon svg {
    display: block;
}
.ccbla-dates-panel__body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* 2026-05-14 — T4: récap "Dates retenues" est désormais imbriqué DANS le body d'un <details> (recurrence ou manual). Ajustement margin pour séparer visuellement du contenu de configuration au-dessus. */
.ccbla-dates-panel__body > .ccbla-dates-recap {
    margin-top: 0.5rem;
}

/* Hint inline format spécial */
.ccbla-field__hint-inline {
    font-weight: 400;
    font-size: 0.85em;
    color: #595959;
    margin-left: 0.25rem;
}

/* Grilles inputs récurrence */
.ccbla-rec-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem 1rem;
}
@media (min-width: 600px) {
    .ccbla-rec-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.ccbla-rec-grid .ccbla-field {
    margin: 0;
}

/* Preview live */
.ccbla-rec-preview {
    margin-top: 0.4rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.03);
    border-left: 2px solid var(--wp--preset--color--pop-dark, #111);
}
.ccbla-rec-preview__status {
    margin: 0 0 0.5rem;
    font-weight: 600;
    color: var(--wp--preset--color--pop-dark, #111);
    line-height: 1.4;
}
.ccbla-rec-preview__status.is-warn { color: #b06000; }
.ccbla-rec-preview__status.is-ok   { color: #2e7d32; }
.ccbla-rec-preview__list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid #ddd;
    background: #fff;
}
.ccbla-rec-preview__item {
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}
.ccbla-rec-preview__item:last-child  { border-bottom: 0; }
.ccbla-rec-preview__item:nth-child(even) { background: rgba(0, 0, 0, 0.02); }

/* HINT INLINE DATES (warns doublons / cap 26) 2026-05-11 — Ex-hint du bouton « Vérifier les dates » (bouton supprimé). Conservé pour les warns inline déclenchés par showVerifyError() (script.js): doublon manuel détecté, cap dates atteint, etc. État is-warn = mise en valeur rouge POP-secondary. */
.ccbla-dates-verify-hint {
    margin: 0;
    color: #595959;
    font-size: 0.875rem;
    transition: color 0.2s ease;
    min-height: 1.2em;
}
.ccbla-dates-verify-hint.is-warn {
    color: #b00020;
    font-weight: 600;
}

/* MODAUX (confirm switch mode simple↔avancé uniquement) 2026-05-11 — Modal « Vérifier les dates » supprimée (refonte UX injection AUTO dans le récap). Les classes `.ccbla-verify-modal__*` sont conservées comme classes partagées utilisées par #ccbla-mode-confirm-modal (card, backdrop, title, cancel, confirm, actions). Les classes verify-spécifiques (close, intro, count, list, item*, empty) sont retirées. */
body.ccbla-modal-open {
    overflow: hidden;
}
.ccbla-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.ccbla-confirm-modal[hidden] {
    display: none;
}
.ccbla-verify-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;
}
.ccbla-verify-modal__card {
    position: relative;
    background: #fff;
    border: 2px solid var(--wp--preset--color--pop-dark, #111);
    max-width: 560px;
    width: 100%;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.5rem 1.25rem 1.25rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
@media (min-width: 600px) {
    .ccbla-verify-modal__card {
        padding: 1.75rem 1.75rem 1.5rem;
    }
}
.ccbla-verify-modal__title {
    margin: 0 2rem 0.65rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--wp--preset--color--pop-dark, #111);
}
.ccbla-confirm-modal__body {
    margin: 0 0 0.85rem;
    color: #333;
    line-height: 1.5;
}
.ccbla-verify-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
@media (min-width: 480px) {
    .ccbla-verify-modal__actions {
        flex-direction: row-reverse;
        justify-content: flex-start;
    }
}
.ccbla-verify-modal__cancel,
.ccbla-verify-modal__confirm {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.75rem 1.25rem;
    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.ccbla-verify-modal__cancel {
    border: 1px solid var(--wp--preset--color--pop-dark, #111);
    background: #fff;
    color: var(--wp--preset--color--pop-dark, #111);
}
.ccbla-verify-modal__cancel:hover {
    background: #f0f0f0;
}
.ccbla-verify-modal__confirm {
    border: 1px solid var(--wp--preset--color--pop-dark, #111);
    background: var(--wp--preset--color--pop-dark, #111);
    color: #fff;
}
.ccbla-verify-modal__confirm:hover:not([disabled]) {
    background: #fff;
    color: var(--wp--preset--color--pop-dark, #111);
}
.ccbla-verify-modal__confirm[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}
.ccbla-verify-modal__cancel:focus-visible,
.ccbla-verify-modal__confirm:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

/* 2026-05-11 — Phase A: barre uploads réels (réintroduite, miroir article) Réintroduction des règles base supprimées lors du refactor cascade → loader POP unifié. Cette barre est OK (uploads XHR réels via uploadAllPending + uploadAllPendingEventFiles, pas du polling REST comme la cascade Option C retirée). Pattern aligné sur article style.css L1578-1648. Le toggle `.is-uploading` masque le loader POP pendant Phase A et rebascule dessus en Phase B (POST natif post-upload). Les règles mobile @media (max-width: 480px) résiduelles L2669-2678 (orphelines après refactor) redeviennent actives avec ces règles base. */

/* 2026-05-13 — Refonte UX modal unifiée (décision Nic) :
   l'ancienne règle ci-dessous masquait le loader POP pendant Phase A.
   Désormais le loader POP RESTE VISIBLE pendant la Phase A (en plus de la
   barre + compteur X/N). Règle conservée en commentaire pour traçabilité.

   .ccbla-submit-overlay.is-uploading .ccbla-submit-overlay__spinner {
       display: none;
   }
*/

/* 2026-05-13 — Barre Phase A "sexy": arrondie + dégradé subtil + shimmer animation continue pour signaler le vivant. Strict noir-blanc préservé. Hauteur réduite à 10px (plus moderne, moins "old DOS"), bord arrondi, inner shadow légère, transition cubic-bezier pour effet "tactile". */
.ccbla-submit-overlay__progress {
    margin: 1.25rem 0 0.75rem;
}
.ccbla-submit-overlay__bar {
    width: 100%;
    height: 10px;
    background: linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.10) 100%);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}
.ccbla-submit-overlay__bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--wp--preset--color--pop-dark, #111) 0%,
        #2a2a2a 50%,
        var(--wp--preset--color--pop-dark, #111) 100%
    );
    background-size: 200% 100%;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    animation: ccbla-bar-shimmer 2.4s linear infinite;
}
.ccbla-submit-overlay__bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: ccbla-bar-sweep 1.8s ease-in-out infinite;
}
@keyframes ccbla-bar-shimmer {
    0%   { background-position:   0% 0; }
    100% { background-position: 200% 0; }
}
@keyframes ccbla-bar-sweep {
    0%   { transform: translateX(-100%); }
    60%  { transform: translateX(120%); }
    100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
    .ccbla-submit-overlay__bar-fill,
    .ccbla-submit-overlay__bar-fill::after { animation: none; }
}
.ccbla-submit-overlay__counter {
    margin: 0.5rem 0 0;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--wp--preset--color--pop-dark, #111);
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.ccbla-submit-overlay__counter-current,
.ccbla-submit-overlay__counter-total {
    font-size: 1.25rem;
}
.ccbla-submit-overlay__counter-sep {
    margin: 0 0.15em;
    color: #777;
}
.ccbla-submit-overlay__counter-label {
    font-weight: 400;
    color: #595959;
    font-size: 0.95rem;
}
/* Pendant la Phase A, masquer le timer texte (la barre + compteur suffisent comme repère visuel et évitent le double signal). */
.ccbla-submit-overlay.is-uploading .ccbla-submit-overlay__timer {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════
 * 2026-05-11 — Refonte loader POP unifié (cascade Option C polling retirée)
 * ═══════════════════════════════════════════════════════════════════
 * Anciens blocs supprimés (≈ 120 LOC) :
 *   • .ccbla-submit-overlay__progress / __bar / __counter*  (compteur X/N
 *     multi-dates piloté par polling REST → architecture inadaptée
 *     Infomaniak managed, cf. CCBLA-PROJECT v1.6).
 *   • .ccbla-submit-overlay__steps / __step / variants is-pending /
 *     is-current / is-done + @keyframes ccbla-step-dots-pulse.
 *   • .ccbla-submit-overlay.is-multi (toggle multi-dates).
 *
 * Le loader POP ci-dessous (anciennement gated `.is-edit-mode`) devient
 * le rendu unique pour création ET édition.
 * ═══════════════════════════════════════════════════════════════════ */

/* Loader POP unifié (création ET édition) 2026-05-11 — Refonte cascade → loader POP unifié. Anciennement gated par.is-edit-mode (cascade détaillée affichée en création, spinner en édition). Désormais TOUJOURS visible: la cascade 8 étapes a été retirée (architecture polling REST inadaptée Infomaniak managed, cf. CCBLA-PROJECT v1.6 anti-pattern #2). Réutilisation du pattern loader POP partagé (vars --ccbla-pop-loader-* déclarées dans style.css racine L1128-1140 + @keyframes ccbla-pop-loader-spin L1141). Identique visuellement au loader des blocs agenda-int-ext / loop-membres / filters-* (cohérence UX site). Structure: <div> vide →::before (anneau qui tourne, accent pop-primary) +::after (badge blanc rond avec logo POP centré). */
.ccbla-submit-overlay__spinner {
    position: relative;
    width: 56px;
    height: 56px;
    aspect-ratio: 1;
    margin: 28px auto;
    border: 0;
    border-radius: 50%;
    background: transparent;
    pointer-events: none;
}
.ccbla-submit-overlay__spinner::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--ccbla-pop-loader-ring-color);
    border-top-color: var(--ccbla-pop-loader-ring-accent);
    border-radius: 50%;
    animation: ccbla-pop-loader-spin .9s linear infinite;
}
.ccbla-submit-overlay__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);
}
@media (prefers-reduced-motion: reduce) {
    .ccbla-submit-overlay__spinner::before {
        animation: none;
        /* Fallback statique : anneau stylé sans rotation */
        border-top-color: var(--ccbla-pop-loader-ring-accent);
    }
}

/* 2026-05-09 — Pass 2B+ frontend ULTRA debug — Flatpickr restyle Override des styles Flatpickr core pour: • Bordure noire 2px épaisse (visibilité + cohérence charte POP) • Bouton « OK » en pied de calendrier (UX desktop — sans ce bouton, l'utilisateur ne sait pas que pour valider il faut cliquer en dehors). Sur mobile, picker natif iOS/Android utilisé (UX > FP mobile), donc pas concerné. Spécificité élevée pour vaincre les styles inline Flatpickr. */
.flatpickr-calendar {
    border: 2px solid var(--wp--preset--color--pop-dark, #111) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
    border-radius: 0 !important; /* Charte POP angles vifs */
}
/* Anti-débordement viewport mobile: si Flatpickr s'ouvre près du bord droit, le calendar peut déborder. On force max-width raisonnable. */
@media (max-width: 480px) {
    .flatpickr-calendar {
        max-width: calc(100vw - 16px) !important;
    }
}
/* Bouton OK (injecté par script.js dans onReady) */
.ccbla-fp-confirm {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    margin: 4px 0 0;
    padding: 0.7rem 1rem;
    border: 0;
    border-top: 1px solid var(--wp--preset--color--pop-dark, #111);
    background: var(--wp--preset--color--pop-dark, #111);
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.ccbla-fp-confirm:hover {
    background: #fff;
    color: var(--wp--preset--color--pop-dark, #111);
}
.ccbla-fp-confirm:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: -3px;
}

/* 2026-05-09 — Pass 2B+ frontend ULTRA debug — Mobile-friendly passe Audit ciblé sur les zones du Pass 2B+ frontend v2 (toggle, récap, saisie manuelle, récurrence, modaux verify+confirm, overlay submit progress) pour breakpoints 480px et 360px (iPhone SE / Galaxy A03). Les zones générales du form (notice, sections, file uploads, event- files list, header titre) avaient déjà des règles @media (max-width: 640px) en place — non touchées. */
@media (max-width: 480px) {
    /* Toggle simple/avancé : padding réduit, gap mini, label plus compact */
    .ccbla-dates-mode {
        gap: 0.5rem;
        margin: 0.4rem 0 1rem;
    }
    .ccbla-dates-mode__option {
        padding: 0.7rem 0.85rem;
        gap: 0.55rem;
    }
    .ccbla-dates-mode__title {
        font-size: 0.95rem;
    }
    .ccbla-dates-mode__desc {
        font-size: 0.8rem;
    }

    /* Récap items : pile verticale (date au-dessus, ✕ aligné droite) */
    .ccbla-dates-recap__item {
        flex-wrap: wrap;
        gap: 0.4rem 0.6rem;
        padding: 0.6rem 0.75rem;
    }
    .ccbla-dates-recap__when {
        flex: 1 1 100%;
        order: 2;
        font-size: 0.95rem;
    }
    .ccbla-dates-recap__num {
        order: 1;
    }
    .ccbla-dates-recap__remove {
        order: 1;
        margin-left: auto;
    }

    /* Saisie manuelle: déjà 1 col par défaut <600px (pas de grid). On réduit juste padding pour gagner de l'espace. */
    .ccbla-dates-manual__row {
        padding: 0.65rem 0.75rem 0.75rem;
    }
    .ccbla-dates-manual__remove {
        margin-top: 0.25rem;
        align-self: flex-start;
    }
    .ccbla-dates-manual__add {
        width: 100%;
        text-align: center;
    }

    /* Panel récurrence : padding interne réduit */
    .ccbla-dates-panel__summary {
        padding: 0.7rem 0.85rem;
        font-size: 0.95rem;
    }
    .ccbla-dates-panel__body {
        padding: 0.85rem;
    }
    .ccbla-rec-grid {
        gap: 0.55rem 0.85rem;
    }
    .ccbla-rec-preview {
        padding: 0.65rem 0.85rem;
    }
    .ccbla-rec-preview__list {
        max-height: 200px;
    }
    .ccbla-rec-preview__item {
        font-size: 0.9rem;
        padding: 0.35rem 0.65rem;
    }

    /* Modaux : padding réduit, max-height plus généreuse */
    .ccbla-confirm-modal {
        padding: 0.5rem;
    }
    .ccbla-verify-modal__card {
        padding: 1.25rem 1rem 1rem;
        max-height: calc(100vh - 1rem);
    }
    .ccbla-verify-modal__title {
        font-size: 1.1rem;
        margin-right: 1.75rem;
    }
    /* Boutons modal : pile verticale toujours <480px (déjà dans cascade) */
    .ccbla-verify-modal__cancel,
    .ccbla-verify-modal__confirm {
        padding: 0.7rem 1rem;
        font-size: 0.95rem;
    }

    /* Overlay submit : compteur X/N plus compact */
    .ccbla-submit-overlay__counter {
        font-size: 0.95rem;
    }
    .ccbla-submit-overlay__counter-current,
    .ccbla-submit-overlay__counter-total {
        font-size: 1.1rem;
    }
    .ccbla-submit-overlay__bar {
        height: 12px;
    }

    /* 2026-05-10 — Liste d'étapes mobile: padding et font-size réduits pour rester lisible sans déborder de la card 480px max. */
    .ccbla-submit-overlay__step {
        padding: 0.4rem 0;
        font-size: 0.875rem;
    }

    /* Divider OU : marges réduites */
    .ccbla-dates-divider {
        margin: 0.15rem 0;
    }
}

/* ─── 360px (Galaxy A03 / iPhone SE 1st gen) ─────────────────────── */
@media (max-width: 360px) {
    .ccbla-dates-mode__title {
        font-size: 0.9rem;
    }
    .ccbla-dates-mode__desc {
        font-size: 0.75rem;
    }
    .ccbla-dates-recap__when {
        font-size: 0.9rem;
    }
    .ccbla-dates-recap__arrow {
        margin: 0 0.15em;
    }
    .ccbla-verify-modal__title {
        font-size: 1.05rem;
    }
}

/* 2026-05-11 — Box d'erreur validation client AVANT modal Affiché en haut du form (injecté par script.js dans ccblaShowValidationErrors) si un ou plusieurs champs requis sont vides au clic sur Soumettre. Bloque la modal pour éviter le scénario: user voit modal qui tourne pendant que le serveur valide → rejet → redirect → page rechargée avec msg en arrière-plan. WCAG 2.4.3 + 3.3.1 (focus + identification erreur). Couleurs: rouge POP-secondary pour rester dans la charte, contraste AA garanti (#812b29 sur fond pastel rose ≥ 7:1). */
.ccbla-client-validation-errors {
    background: #fde8e6;
    border: 2px solid var(--wp--preset--color--pop-secondary, #812b29);
    color: var(--wp--preset--color--pop-secondary, #812b29);
    padding: 1rem 1.25rem;
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
    line-height: 1.45;
    border-radius: 0; /* Charte POP — angles vifs */
}
.ccbla-client-validation-errors[hidden] {
    display: none !important;
}
.ccbla-client-validation-errors__title {
    margin: 0 0 0.5rem;
    font-weight: 700;
    font-size: 1rem;
}
.ccbla-client-validation-errors__list {
    margin: 0;
    padding-left: 1.5rem;
    list-style: disc;
}
.ccbla-client-validation-errors__list li {
    margin: 0.15rem 0;
}
.ccbla-client-validation-errors:focus {
    outline: 3px solid var(--wp--preset--color--pop-secondary, #812b29);
    outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════
 * 2026-05-13 (demande Nic) — Bouton « Ajouter au média » TinyMCE
 * ────────────────────────────────────────────────────────────────────
 * TinyMCE (WP-core 4.x, EOL documenté pre-launch) injecte un bouton
 * .insert-media dans .wp-media-buttons. Markup natif WP, on override
 * pour cohérence visuelle avec le reste du form (typo Instrument Sans,
 * pas d'arrondi, couleur POP quaternary).
 * ════════════════════════════════════════════════════════════════════ */
.wp-media-buttons .insert-media,
.wp-media-buttons .insert-media.button {
    padding-left:  5px;
    font-size:     14px;
    font-family:   var(--wp--preset--font-family--instrument-sans, 'Instrument Sans', sans-serif);
    background:    #fff;
    border-radius: 0;
    color:         #00726A;
}
.wp-media-buttons .insert-media:hover,
.wp-media-buttons .insert-media:focus-visible {
    background: #00726A;
    color:      #fff;
}

/* 2026-05-13 (passe 4 — Nic) — Barres de progression individuelles Image à la Une / Vignette: masquage SÉLECTIF. Pourquoi: la modal de soumission unifiée affiche désormais une barre Phase A globale X/N fichiers qui couvre les uploads slots (cf. script.js L3035-3049 — uploadAllPending + bumpPhaseA). Les barres individuelles deviennent redondantes. Décision (passe 4): masquer la BARRE (`.ccbla-img-progress`) mais GARDER le label texte (`.ccbla-img-progress__label`) qui sert au feedback erreur ('✗') et succès ('✓') visible inline dans le slot. Choix display:none ciblé sur la bar + width:0 sur le wrap quand pas d'erreur: - État normal: wrap entièrement masqué. - État erreur (.ccbla-img-progress--error): wrap visible, bar masquée, badge '✗' rouge visible → user voit qu'il y a une erreur sur ce slot précis. - État done (.ccbla-img-progress--done): badge '✓' visible. Le JS setProgress (L953-975) reste intact — il fait juste son travail, le CSS contrôle ce qui est rendu visible. */
.ccbla-img-progress-wrap {
    /* Wrap masqué par défaut */
    display: none !important;
}
/* Réafficher SI état done OU error sur la bar interne */
.ccbla-img-progress-wrap:has(.ccbla-img-progress--done),
.ccbla-img-progress-wrap:has(.ccbla-img-progress--error) {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
/* La barre elle-même reste cachée même en done/error — on garde juste le label '✓' ou '✗' qui suffit comme feedback. */
.ccbla-img-progress-wrap .ccbla-img-progress {
    display: none !important;
}
/* Label badge : vert si done, rouge si error, jamais le 'N %' neutre */
.ccbla-img-progress-wrap:has(.ccbla-img-progress--done) .ccbla-img-progress__label {
    color: #2e7d32;
    font-weight: 600;
}
.ccbla-img-progress-wrap:has(.ccbla-img-progress--error) .ccbla-img-progress__label {
    color: #c62828;
    font-weight: 600;
}