/*
 * Theme Name:  Maag Child
 * Theme URI:   https://maag.codesupply.co/
 * Description: Maag Child Theme
 * Author:      Code Supply Co.
 * Author URI:  https://codesupply.co/
 * Template:    maag
 * Version:     1.0.4.0
 * Text Domain: maag
 */

/**
 * =============================================================================
 * INDEX DES SECTIONS
 * =============================================================================
 *
 * Ce fichier contient tous les styles personnalisés du thème enfant.
 * Utilisez cet index pour naviguer rapidement dans le fichier.
 *
 * 1.  Header & Logo (ligne ~13)
 *     - Styles du logo header et mobile
 *     - Topbar
 *
 * 2.  Général & Layout (ligne ~25)
 *     - Styles généraux
 *     - Filtres et boutons
 *     - Search
 *
 * 3.  Filtres calendrier (CEC) (ligne ~62)
 *     - Bouton de filtre .tribe-filter-button (classe legacy conservée par le mu-plugin calendar)
 *     - Styles généraux event-date / event-hour / event-location
 *
 * 4.  Home Agenda (ligne ~153)
 *     - Styles spécifiques à la page d'accueil
 *     - Grille d'événements home
 *
 * 5.  Event Infos & Widgets (ligne ~182)
 *     - Styles des informations d'événement
 *     - Labels et badges
 *     - Catégories
 *     - Widget event-infos
 *
 * 6.  Venue & Horaires (ligne ~207)
 *     - Styles des horaires de venue
 *     - Badges ouverture/fermeture
 *
 * 7.  QFANCW (ligne ~420)
 *     - Styles spécifiques QFANCW
 *     - Calendrier single
 *     - Labels de jour
 *
 * 8.  BCL Alerts (ligne ~487)
 *     - Système d'alertes complet
 *     - Variantes (success, warning, error, info)
 *     - Animations
 *     - Dark mode
 *
 * 9.  Formulaires (ligne ~681)
 *     - Styles autofill
 *     - Actions de formulaire
 *
 * 10. Responsive & Media Queries (lignes multiples)
 *     - Styles responsive pour mobile/tablette
 *     - Media queries diverses
 *
 * 11. Divers (ligne ~704)
 *     - Styles spécifiques par page
 *     - Styles Elementor
 *     - Styles footer
 *     - Autres ajustements
 *
 * 12. Page Devenir partenaire — extrait dans css/partner.css
 *     - Voir wp-content/themes/maag-child/css/partner.css
 *     - Enqueué par bcn_enqueue_partner_styles() (frontend + canvas Gutenberg)
 *
 * 13. Accessibilité (WCAG 2.1 AA) (fin de fichier)
 *     - Corrections audit mobile 2026-05-29
 *
 *
 * =============================================================================
 */

/* Copy any classes from parent theme here. They will override the parent's version. */

/* -----------------------------------------------------------------------------
   1. Header & Logo
   ----------------------------------------------------------------------------- */

/* Image du logo principal :
 * - pas de width pour laisser le navigateur calculer
 * - limite en hauteur pour garder une navbar propre
 */
.cs-header__logo img {
    max-height: 40px;
    height: auto;
    display: block;
    width: 100%;
}

/* S'assure que le conteneur du logo a une largeur basée sur son contenu
 * pour éviter que Firefox ne lui attribue une largeur 0px dans un contexte flex.
 */

.cs-header__logo-mobile img {
    width: 60%;
    margin: 0 auto;
}

@supports (width: revert-layer) {
    .cs-header__logo img, .cs-header__logo-mobile img {
        width: revert-layer;
    }
}

.cs-header-topbar__main {
    height: 72px;
}

/* Sélecteur de ville du bandeau haut (remplace l'article mis en avant).
   La rangée haute du bandeau n'existe qu'à partir de 992px côté parent : les
   règles ci-dessous n'ont donc pas de variante mobile à défendre. */
.bcn-city-switcher {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.bcn-city-switcher__link {
    font-family: var(--cs-font-secondary-family), sans-serif;
    font-weight: var(--cs-font-secondary-weight);
    font-style: var(--cs-font-secondary-style);
    text-transform: var(--cs-font-secondary-text-transform);
    line-height: var(--cs-font-secondary-line-height);
    font-size: 0.875rem;
    letter-spacing: -0.04em;
    white-space: nowrap;
    text-decoration: none;
    color: var(--cs-color-primary);
    opacity: 0.65;
    transition: 0.25s;
}

.bcn-city-switcher__link:hover,
.bcn-city-switcher__link:focus-visible {
    opacity: 1;
    color: var(--cs-color-secondary);
}

/* La ville servie par le site courant : pleine opacité et soulignement, pour
   que le sélecteur dise où l'on est autant qu'où l'on peut aller. */
.bcn-city-switcher__link.is-current {
    opacity: 1;
    background: linear-gradient(to right, currentColor 0%, currentColor 98%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
}

.bcn-city-switcher__separator {
    width: 1px;
    height: 0.9em;
    background: currentColor;
    opacity: 0.25;
}

[data-id="be7d066"] .cs-post-carousel__headline {
    border-top: none;
}

/* -----------------------------------------------------------------------------
   2. Général & Layout
   ----------------------------------------------------------------------------- */

.cs-search__popular {
    display: none;
}

/* Recherche : les cartes de lieux n'ont ni date ni catégorie pertinentes */
.cs-posts-area__venues .cs-entry__meta {
    display: none;
}

.maag-filter-buttons {
    text-align: center;
}

.tribe-filter-button:hover, .tribe-filter-button:focus, .tribe-filter-button.active {
    background-color: var(--tec-color-background-secondary);
    border-color: var(--tec-color-icon-primary);
    color: initial;
}

.tribe-filter-button:active {
  background-color: #e0dfdf;
  border-color: #3d3d3d;
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.qfancw-event {
    transition: opacity 0.25s ease, transform 0.25s ease;
    opacity: 1;
    transform: translateY(0);
}

/* -----------------------------------------------------------------------------
   3. Filtres calendrier (CEC)
   ----------------------------------------------------------------------------- */

.tribe-filter-button {
    transition: var(--tec-transition);
    background-color: var(--tec-color-background);
    border: 1px solid var(--tec-color-icon-disabled);
    border-radius: 18px;
    font-size: var(--tec-font-size-1);
    line-height: var(--tec-line-height-0);
    font-weight: var(--tec-font-weight-regular);
    color: var(--tec-color-text-primary);
    font-family: var(--tec-font-family-sans-serif);
    margin-right: 5px;
    margin-bottom: 5px;
}

.cs-button.add-event {
    width: 20%;
    margin: 0 auto;
}

.event-date, .event-hour, .event-location {
    background-color: #f3f3f3;
    padding: 5px 12px;
    border-radius: 4px;
    border: 1px solid #e3e3e3;
}

.event-status--past {
    color: rgb(207, 60, 60) !important;
    font-weight: 600;
}

.event-hour {
    margin-left: 8px;
}

/* -----------------------------------------------------------------------------
   4. Home Agenda
   ----------------------------------------------------------------------------- */

.home .cec-card {
    display: inline-flex;
    flex-direction: row;
}

.home .cec-card-title {
    font-size: 1.2rem !important;
}

.home .cs-main-content .cec-card-chips li a,
.home .cs-main-content .cec-card-chips li span,
.home .cec-card-date {
    font-size: 10px;
}

.home .cec-card-body {
    min-height: 170px;
    width: 60%;
}

.home .cec-card-image {
    width: 40%;
}

/* Bannière événements longue durée : reprend la mise en page horizontale
   des cartes home (image 40 % / corps 60 %). Scopé desktop+ pour laisser
   intact le design .cec-mobile-row dédié à .bc-longterm__grid sur mobile. */
@media (min-width: 768px) {
    .bc-longterm__grid .cec-card {
        display: inline-flex;
        flex-direction: row;
    }

    .bc-longterm__grid .cec-card-title {
        font-size: 1.2rem !important;
    }

    .bc-longterm__grid .cec-card-chips li a,
    .bc-longterm__grid .cec-card-chips li span,
    .bc-longterm__grid .cec-card-date {
        font-size: 10px;
    }

    .bc-longterm__grid .cec-card-body {
        min-height: 170px;
        width: 60%;
    }

    .bc-longterm__grid .cec-card-image {
        width: 40%;
    }
}

/* Padding accru quand la bannière longue durée est dépliée. */
.bc-longterm[data-collapsed="false"] {
    padding: 18px 20px;
}

.bc-longterm[data-collapsed="false"] .bc-longterm__grid {
    margin-top: 18px;
}

/* -----------------------------------------------------------------------------
   5. Event Infos & Widgets
   ----------------------------------------------------------------------------- */

/* Style commun pour tous les blocs (date, heure, lieu, labels) */
.event-infos .event-box,
.event-infos .event-labels .event-label {
    display: block;
    background-color: #f7f7f7;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #dedede;
    font-size: 1rem;
    margin-bottom: 10px;
    font-weight: 500;
    color: #333;
    margin-left: 0;
}

.event-infos .event-label.event-label-longue-duree {
    background-color: #b0a6df;
    border-color: #9d90d1;
    color: #fff;
    text-align: center;
    font-size: 13px;
    padding: 5px 13px;
    margin: 0 auto;
}

/* -----------------------------------------------------------------------------
   6. Venue & Horaires
   ----------------------------------------------------------------------------- */
.event-hours .venue-hours {
    display: grid;
    gap: 6px;
}

.venue-hours__row {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    background: #fafafa;
    font-size: 0.95rem;
}

.venue-hours__row.is-today {
    border-color: var(--cs-color-primary, #ff5a5f);
    background: rgba(255, 90, 95, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 90, 95, 0.2);
}

.venue-hours__label {
    font-weight: 600;
    color: #1f1f1f;
}

.venue-hours__value {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.venue-hours__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.82rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.venue-hours__badge.is-open {
    background: #e8f7f0;
    color: #0d7a50;
    border: 1px solid rgba(13, 122, 80, 0.2);
}

.venue-hours__badge.is-closed {
    background: #fbeaea;
    color: #b83030;
    border: 1px solid rgba(184, 48, 48, 0.2);
}

.venue-hours__badge.is-unknown {
    background: #f0f0f0;
    color: #6d6d6d;
    border: 1px solid rgba(109, 109, 109, 0.15);
}

@media (max-width: 600px) {
    .venue-hours__row {
        grid-template-columns: 1fr;
        gap: 4px;
        text-align: left;
    }

    .venue-hours__value {
        justify-content: flex-start;
    }
}

/* Cache par défaut le widget event-infos dans le contenu */
.entry-content .widget.event-infos.widget_block,
.entry-content > .widget.event-infos.widget_block,
div.entry-content .widget.event-infos.widget_block,
.entry-content div.widget.event-infos.widget_block {
    display: none !important;
}

/* Cache le widget event-infos dans la sidebar sur mobile */
@media (max-width: 640px) {
    .cs-sidebar__area .widget.event-infos,
    .cs-sidebar__inner .widget.event-infos.widget_block,
    .cs-sidebar__inner .widget.event-infos {
        display: none !important;
    }

    /* Affiche le widget event-infos dans le contenu sur mobile */
    .entry-content .widget.event-infos.widget_block,
    .entry-content > .widget.event-infos.widget_block,
    div.entry-content .widget.event-infos.widget_block {
        display: block !important;
        margin-top: -30px;
    }

    .entry-content > .widget.event-infos .post-categories {
        list-style: none;
        padding: 0;
        margin: 0;
    }
}

/* Lieu : adresse en plus petit */
.event-location .location-name {
    display: block;
    font-size: 1rem;
    font-weight: 600;
}

.event-location .location-address {
    display: block;
    font-size: 13px;
    color: #666;
    margin-top: 2px;
}

/* Labels */
.event-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    justify-content: space-evenly;
}

.event-labels .event-label {
    display: inline-block;
    background-color: #f3f3f3; /* même fond que les autres */
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #e3e3e3;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.event-links {
    display: grid;
  grid-template-columns: 1fr 1fr; /* deux colonnes égales */
  gap: 0.75rem; /* espacement entre les boutons */
  margin-top: 1rem;
}

/* Couleurs spécifiques */
.event-label-longue-duree {
    border-left: 5px solid #b0a6df;
}

.event-label-promo,
.event-label-gratuit {
    border-left: 5px solid #00e17c;
}

/* Catégories */
.widget.event-infos .cs-meta-category ul.post-categories {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.widget.event-infos .cs-meta-category ul.post-categories li a {
    display: inline-block;
    padding: 6px 12px;
    background: #f5f5f5;
    color: #555;
    text-decoration: none;
    font-size: 14px;
    border-radius: 6px;
    transition: background 0.2s ease, color 0.2s ease;
}

.post-categories li {
    list-style: none;
}

.widget.event-infos .cs-meta-category ul.post-categories li a:hover {
    background: #ddd;
    color: #000;
}

.special-separator {
    width: 10%;
    border: none;
    border-top: 2px solid #ccc;
}

.category .maag-filter-buttons {
    text-align: left;
    margin-top: -20px;
    margin-bottom: 30px;
}

.elementor-element-80f3390 {
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
}

/* -----------------------------------------------------------------------------
   7. QFANCW
   ----------------------------------------------------------------------------- */

.single .post-categories {
    padding: 0!important;
}

.single .post-categories li {
    padding-left: 0!important;
}

body.single .cs-entry__post-meta .post-categories a {
    font-family: var(--cs-font-category-family), sans-serif;
    font-size: var(--cs-font-category-size);
    line-height: var(--cs-font-category-line-height);
    font-weight: var(--cs-font-category-weight);
    font-style: var(--cs-font-category-style);
    letter-spacing: var(--cs-font-category-letter-spacing);
    text-transform: var(--cs-font-category-text-transform);
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.25rem 0.375rem;
    background: var(--cs-layout-background);
    color: var(--cs-color-primary);
    border-radius: var(--cs-tag-border-radius);
    text-decoration: none;
}

.cs-subscribe-elementor-type-1 {
    margin-top: 25px;
}

.grecaptcha-badge { 
    visibility: hidden; 
}

/* -----------------------------------------------------------------------------
   8. BCL Alerts — complète, accessible, animée
   -----------------------------------------------------------------------------
   Structure HTML injectée :
   <div class="bcl-alert bcl-alert--{success|warning|error|info}">
     <span class="bcl-alert__msg">…</span>
     <button type="button" class="bcl-alert__close" aria-label="Fermer" title="Fermer">×</button>
   </div>
   ----------------------------------------------------------------------------- */

/* Containers natifs Mailchimp-like (les tiens) */
#mce-error-response,
#mce-success-response {
    margin-top: 8px;
    display: none; /* JS gère show/hide */
}

/* Base tokens + reset */
.bcl-alert {
  --bcl-bg: #f8fafc;      /* slate-50 */
  --bcl-fg: #0f172a;      /* slate-900 */
  --bcl-bd: #cbd5e1;      /* slate-300 */
  --bcl-ring: 0 0 0 3px rgba(59,130,246,.35); /* focus halo */
  --bcl-shadow: 0 1px 2px rgba(2,6,23,.06), 0 8px 24px rgba(2,6,23,.08);
  --bcl-radius: 12px;
  --bcl-pad-y: 14px;
  --bcl-pad-x: 16px;

  position: relative;
  display: grid;
  align-items: center;
  grid-template-columns: 24px 1fr auto;
  gap: 12px 14px;

  border: 1px solid var(--bcl-bd);
  background: var(--bcl-bg);
  color: var(--bcl-fg);
  border-radius: var(--bcl-radius);
  padding: var(--bcl-pad-y) var(--bcl-pad-x);
  box-shadow: var(--bcl-shadow);

  overflow: hidden;
  isolation: isolate; /* empêche les overlays de fuir */
  animation: bcl-slide-in .18s ease-out both;
}

/* Icône (pseudo, aucune balise nécessaire) */
.bcl-alert::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 4px;
  background-color: currentColor;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: .9;
}

/* Message bloc */
.bcl-alert__msg {
  font-size: 15px;
  line-height: 1.45;
}

/* Bouton fermer */
.bcl-alert__close {
  appearance: none;
  border: 0;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  align-self: start;
  transition: background-color .15s ease, transform .05s ease;
}
.bcl-alert__close:hover { background: rgba(2,6,23,.06); }
.bcl-alert__close:active { transform: scale(0.98); }
.bcl-alert__close:focus-visible {
  outline: none;
  box-shadow: var(--bcl-ring);
}

/* Variantes — couleurs + icônes (en data-URI, pas d’assets externes) */
.bcl-alert--success {
  --bcl-bg: #ecfdf5;
  --bcl-bd: #a7f3d0;
  --bcl-fg: #065f46;
}
.bcl-alert--success::before {
  /* check-circle */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 13.2L7.5 12l1.4-1.4 1.9 1.9 4.3-4.3L16.5 9l-5.7 6.2Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 13.2L7.5 12l1.4-1.4 1.9 1.9 4.3-4.3L16.5 9l-5.7 6.2Z'/%3E%3C/svg%3E");
}

.bcl-alert--warning {
  --bcl-bg: #fff7ed;
  --bcl-bd: #fed7aa;
  --bcl-fg: #7c2d12;
}
.bcl-alert--warning::before {
  /* triangle-warning */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M1 21h22L12 2 1 21Zm12-3h-2v-2h2v2Zm0-4h-2v-4h2v4Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M1 21h22L12 2 1 21Zm12-3h-2v-2h2v2Zm0-4h-2v-4h2v4Z'/%3E%3C/svg%3E");
}

.bcl-alert--error {
  --bcl-bg: #fef2f2;
  --bcl-bd: #fecaca;
  --bcl-fg: #7f1d1d;
}
.bcl-alert--error::before {
  /* x-circle */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm3.5 12.1-1.4 1.4L12 13.4l-2.1 2.1-1.4-1.4L10.6 12 8.5 9.9l1.4-1.4L12 10.6l2.1-2.1 1.4 1.4L13.4 12l2.1 2.1Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm3.5 12.1-1.4 1.4L12 13.4l-2.1 2.1-1.4-1.4L10.6 12 8.5 9.9l1.4-1.4L12 10.6l2.1-2.1 1.4 1.4L13.4 12l2.1 2.1Z'/%3E%3C/svg%3E");
}

.bcl-alert--info {
  --bcl-bg: #eff6ff;
  --bcl-bd: #bfdbfe;
  --bcl-fg: #1e3a8a;
}
.bcl-alert--info::before {
  /* info-circle */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-6h2v6Zm0-8h-2V7h2v2Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-6h2v6Zm0-8h-2V7h2v2Z'/%3E%3C/svg%3E");
}

/* Barre de progression (auto-hide optionnel) */
.bcl-alert::after {
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 3px;
  background: currentColor;
  opacity: .15;
  transform: scaleX(0);
  transform-origin: left;
  animation: bcl-progress 4s linear forwards;
}
.bcl-alert--no-autohide::after { animation: none; }

/* Empilement & responsive */
#mce-error-response .bcl-alert,
#mce-success-response .bcl-alert { margin-top: 10px; }

@media (max-width: 480px) {
  .bcl-alert {
    grid-template-columns: 20px 1fr auto;
    gap: 10px;
    --bcl-pad-x: 12px;
    --bcl-pad-y: 12px;
    border-radius: 10px;
  }
  .bcl-alert__msg { font-size: 14px; }
}

/* Dark mode (respecte prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
  .bcl-alert {
    --bcl-bg: #0b1220;      /* slate-950-ish */
    --bcl-bd: #1f2a44;      /* slate-800 */
    --bcl-fg: #e2e8f0;      /* slate-200 */
    --bcl-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.25);
  }
  .bcl-alert--success  { --bcl-bg:#06291f; --bcl-bd:#115e59; --bcl-fg:#a7f3d0; }
  .bcl-alert--warning  { --bcl-bg:#2c1506; --bcl-bd:#9a3412; --bcl-fg:#fed7aa; }
  .bcl-alert--error    { --bcl-bg:#2b0f10; --bcl-bd:#7f1d1d; --bcl-fg:#fecaca; }
  .bcl-alert--info     { --bcl-bg:#0a1833; --bcl-bd:#1d4ed8; --bcl-fg:#bfdbfe; }
  .bcl-alert__close:hover { background: rgba(255,255,255,.06); }
}

/* Animations */
@keyframes bcl-slide-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bcl-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Accessibilité : focus dans la zone → halo global optionnel */
.bcl-alert:focus-within { box-shadow: var(--bcl-shadow), var(--bcl-ring); }

/* Impression : cacher les alerts */
@media print {
    .bcl-alert { display: none !important; }
}

/* -----------------------------------------------------------------------------
   9. Formulaires
   ----------------------------------------------------------------------------- */

/* Neutraliser le background bleu de l'autofill (Chrome / Safari) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    -webkit-text-fill-color: #000 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* -----------------------------------------------------------------------------
   10. Responsive & Media Queries
   ----------------------------------------------------------------------------- */

/* Neutraliser le background bleu de l'autofill (Chrome / Safari) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    -webkit-text-fill-color: #000 !important;
    transition: background-color 5000s ease-in-out 0s;
}

.bcl-form__actions {
    margin-top: 30px;
}

/* -----------------------------------------------------------------------------
   10. Responsive & Media Queries
   ----------------------------------------------------------------------------- */

/* CEC: date filter left-aligned, not full width */
.cec-events-page .cec-date-filter {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    margin: 10px 0 20px;
}

@media (max-width: 767px) {
    .cs-footer__logo:has(img) img {
        width: 80%;
    }
}

.home .cs-headline-border .cs-headline__container {
    margin-top : 17px;
}

.cs-meta-date {
    margin-left: 10px;
}

.cs-entry-prev-next .cs-entry__post-meta {
    column-gap: 10px;
}

.cs-entry-prev-next .cs-entry__post-meta .post-categories a:hover:after {
    background: none;
}

.cs-entry-prev-next .cs-entry__post-meta .post-categories a:hover {
    background: #00e17c;
    color: var(--cs-color-button-hover-contrast);
}

/* -----------------------------------------------------------------------------
   11. Divers
   ----------------------------------------------------------------------------- */

.elementor-element-9ba923d .wp-block-button, .elementor-element-2ff07d0 .wp-block-button {
    text-align: center;
}

.elementor-element-9ba923d .sc-button {
    font-size: 22px;
    font-weight: 600;
}

.elementor-element .sc-button {
    border-color: #3dffa6;
}

/* Ajuste l'espacement des messages de recherche vides */
.cs-content-not-found-content {
	margin-bottom: 20px;
}

.cs-connect {
    margin-bottom: 30px;
}

/* -----------------------------------------------------------------------------
   12. Post Carousel - Fix visibilité contenu pendant transitions
   ----------------------------------------------------------------------------- */

/* Solution spécifique pour Safari - désactiver backface-visibility qui cause le flash */
@supports (-webkit-appearance: none) {
    /* Safari uniquement */
    .cs-post-carousel__grid .cs-post-carousel__item,
    .cs-post-carousel__grid .swiper-slide {
        -webkit-backface-visibility: visible !important;
        backface-visibility: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate3d(0, 0, 0);
        will-change: auto;
    }
    
    .cs-post-carousel__grid .cs-post-carousel__item .cs-entry,
    .cs-post-carousel__grid .swiper-slide .cs-entry {
        -webkit-backface-visibility: visible !important;
        backface-visibility: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate3d(0, 0, 0);
        will-change: auto;
    }
    
    /* Désactiver toutes les transitions sur les enfants pendant les transitions */
    .cs-post-carousel__grid .cs-post-carousel__item .cs-entry *,
    .cs-post-carousel__grid .swiper-slide .cs-entry * {
        -webkit-backface-visibility: visible !important;
        backface-visibility: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: none !important;
        animation: none !important;
    }
    
    /* Forcer la stabilité du rendu sur Safari */
    .cs-post-carousel__grid.swiper-wrapper {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

/* Solution générale pour tous les navigateurs */
.cs-post-carousel__grid .cs-post-carousel__item,
.cs-post-carousel__grid .swiper-slide {
    opacity: 1 !important;
    visibility: visible !important;
}

.cs-post-carousel__grid .cs-post-carousel__item .cs-entry,
.cs-post-carousel__grid .swiper-slide .cs-entry {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Réactiver les transitions uniquement au hover (pas pendant les slides) */
.cs-post-carousel:not(.swiper-transitioning) .cs-post-carousel__grid .cs-post-carousel__item .cs-entry .cs-entry__thumbnail img {
    transition: 0.25s;
}

.cs-post-carousel:not(.swiper-transitioning) .cs-post-carousel__grid .swiper-slide .cs-entry .cs-entry__thumbnail img {
    transition: 0.25s;
}

/* Sections / layout */
.section {
    margin-top: 40px;
    padding: 32px 22px;
    border-radius: 32px;
    background: radial-gradient(circle at top left, rgba(10, 30, 58, 0.96), rgba(3, 10, 24, 0.94));
    border: 1px solid rgba(176, 166, 223, 0.35);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(26px);
    margin: 60px 0;
}

section {
    scroll-margin-top: 96px;
}

.section-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}

.section-media {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tall-stack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.section-content {
    max-width: 520px;
}

.poster {
    height: 220px;
    border-radius: 20px;
    background: linear-gradient(145deg, #00e17c, #5cf1ae, #b0a6df);
    opacity: 0.9;
}

.poster:nth-child(2) {
    margin-top: 26px;
    background: linear-gradient(145deg, #b0a6df, #5cf1ae, #f0e7da);
}

.poster:nth-child(3) {
    margin-top: 52px;
    background: linear-gradient(145deg, #f0e7da, #b0a6df, #00e17c);
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 11px;
    font-weight: 500;
    color: #c5bed4;
    margin-bottom: 8px;
}

.section-title {
    font-size: 24px;
    margin: 0 0 6px;
    letter-spacing: -0.03em;
    color:#fff;
}

.section-text {
    font-size: 14px;
    color: #c5bed4;
    margin: 0;
}

.elementor-element-45f5af1 {
    margin-left: auto;
    margin-right: auto;
}

.text-intro-agenda {
    max-width: 600px;
    margin: 0 auto;
    display: block;
    margin-top: -15px!important;
}

/* =========================================================================
 * Template home.php — Accueil Big City Nantes
 * Remplace l'ex-rendu Elementor retiré le 2026-04-15.
 *
 * Le rendu s'appuie sur les classes natives du thème parent maag
 * (cs-post-carousel, cs-posts__tile, cs-entry__outer…) via les
 * template-parts/posts-area/elementor-*.php. Le CSS principal vient
 * donc du thème — on ajoute seulement ici la grille 2 colonnes
 * main/sidebar et quelques ajustements de titres.
 *
 * NB : la largeur du <main class="home cs-site-content__inner"> est
 * déjà gérée par .cs-site-content__inner du thème parent. Pas de
 * max-width/padding ajouté ici (ça créait des marges latérales).
 * ========================================================================= */

.home > section { margin: 2rem 0; }

/* "À la Une" + agenda : pleine largeur (sortent du .cs-container du thème
 * parent via la technique negative-margin). Le contenu Actu + sidebar reste
 * dans la largeur normale via .home-layout ci-dessous. */
.home > .cs-post-carousel,
.home > .home-calendar {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}
/* Pas de marge en haut sur le carousel : il colle au header. */
.home > .cs-post-carousel { margin-top: 0; }
/* Sur tablette, on suit le padding du .cs-container parent. */
@media (min-width: 768px) {
    .home > .cs-post-carousel,
    .home > .home-calendar { padding-left: 32px; padding-right: 32px; }
}
@media (min-width: 1200px) {
    .home > .cs-post-carousel,
    .home > .home-calendar { padding-left: 48px; padding-right: 48px; }
}
/* Prévient l'auto-zoom-out du layout viewport sur mobile et la scrollbar
 * horizontale sur desktop. Deux causes distinctes, une seule déclaration :
 *
 * 1. Mobile : des éléments `position: fixed` posés sur <body> par le thème
 *    parent (bouton scroll-to-top) ou par des scripts tiers (badge reCAPTCHA
 *    v3 du shortcode [bc_subscribe]) ont des offsets `right:-xxx` ou une
 *    largeur qui les font dépasser la viewport <390px. Les navigateurs
 *    mobiles élargissent alors le layout viewport pour les englober (ex. 465px
 *    pour 390px demandés via `width=device-width`), ce qui laisse un écart
 *    blanc à droite sur TOUT le site. `overflow-x: hidden/clip` sur <body>
 *    ne suffit pas car les éléments `fixed` sont positionnés par rapport à
 *    l'ICB (viewport), pas à <body> : seul <html> peut les contenir.
 *
 * 2. Desktop : notre technique full-bleed (width: 100vw + margin négatif)
 *    sur les sections "À la Une" et agenda déborde d'un pixel de la largeur
 *    de <body> quand l'OS affiche une scrollbar verticale fixe.
 *
 * `overflow: clip` plutôt que `hidden` : ne crée pas de scroll container,
 * ne casse donc pas `position: sticky` sur les descendants (sidebar
 * Instagram notamment). Chrome 90+ / Firefox 81+ / Safari 16+. */
html { overflow-x: clip; }

/* Le parent Maag pose `body { overflow-x: hidden }` (maag/style.css).
 * Par spec CSS, quand un axe est non-visible et l'autre visible, le
 * navigateur force l'axe visible en `auto` → on se retrouve avec
 * `overflow: hidden auto` sur <body>, qui devient alors scroll
 * container. Conséquence : `position: sticky` sur n'importe quel
 * descendant ne peut plus s'ancrer au viewport — il s'ancre au
 * scroll container (body), qui contient tout le contenu et ne
 * "sticke" jamais visuellement.
 *
 * On override en `clip` : même protection contre le débordement
 * horizontal, sans créer de scroll container. Le clip horizontal
 * est déjà géré par <html> au-dessus, mais certains éléments
 * `position: fixed` (reCAPTCHA, scroll-to-top) sont positionnés
 * par rapport à l'ICB et non à <html>, on garde donc la règle
 * sur <body> aussi par redondance. */
body { overflow-x: clip; }

/* Bouton scroll-to-top : le parent pose inline `transition:
 * stroke-dashoffset 10ms linear` sur le <path> de progression, puis
 * met à jour `stroke-dashoffset` à chaque événement scroll.
 * 10ms est plus court que l'intervalle naturel des events scroll
 * (~16ms à 60Hz) → chaque transition se termine avant la suivante,
 * créant un effet « saccadé » visible.
 * On neutralise la transition : le stroke-dashoffset est mis à jour
 * synchrone à chaque event scroll, l'animation suit le scroll au
 * lieu de transitionner par paliers. `!important` pour override le
 * style inline posé par maag/assets/js/scripts.js. */
.cs-scroll-top-progress path { transition: none !important; }

/* Retire le margin-bottom 120px du thème parent sur .cs-site (wrapper
 * racine) uniquement pour le template home — on gère l'espacement
 * vertical via nos propres sections. */
body.home .cs-site { margin-bottom: 0; }

/* Neutralise le margin-top: 3rem ajouté par le thème parent sur
 * .home .cs-main-content (maag/style.css:9670-9674). La classe body
 * "home" est posée pour activer Swiper loop/autoplay (voir
 * functions.php), mais on ne veut pas de l'espacement parent associé. */
@media (min-width: 992px) {
    body.home .cs-main-content { margin-top: 1.5rem; }
}

.home-calendar__title { font-size: 2rem; margin: 1.5rem 0 1.5rem; }
.home-main__title    { font-size: 2rem; margin: 0 0 1.5rem; }
.home-sidebar__title { font-size: 2rem; margin: 1.5rem 0 1.5rem; }
.home-calendar__cta,
.home-main__cta { text-align: center; margin: 2rem 0; }

/* Mobile : les titres 2rem/2.6rem sont disproportionnés sur 390px et
 * mangent trop de hauteur au-dessus du pli. On les harmonise à 1.75rem
 * (28px) : assez marqué pour rester hiérarchiquement au-dessus des h3
 * d'articles (1.5rem) tout en gagnant de l'espace vertical. */
@media (max-width: 767px) {
    .home > .cs-post-carousel .cs-post-carousel__heading,
    .home > .cs-post-carousel .cs-post-carousel__heading > span,
    .home-calendar__title,
    .home-main__title,
    .home-sidebar__title { font-size: 1.75rem; }
}

/* Posts Actu : titre 1.5rem. Les dimensions de .cs-entry__thumbnail
 * sont laissées au thème parent (@container card max-width 332/451/688
 * selon largeur du container = largeur de l'article), pour rester
 * fidèle au rendu Elementor d'origine. */
.home-main .cs-entry__title { font-size: 1.5rem; }
/* Espacement vertical entre posts Actu (override de --cs-posts-row-gap
 * du thème parent qui sert de padding-top + border-top via
 * .cs-posts-area__main-divider article:not(:first-of-type)). */
.home-main .cs-posts-area-elementor { --cs-posts-row-gap: 2.5rem; }

/* Module newsletter [bc_subscribe variant="2"] : marges autour pour
 * isoler visuellement le bloc des deux listes Actu encadrantes. */
.home-main .cs-subscribe-elementor { margin: 2.5rem 0; }

/* Layout home : titre à gauche, form à droite (space-between).
 * Le thème parent impose flex 4/7 → le titre et le form grandissent en
 * proportion. On réinitialise pour que chaque bloc prenne sa largeur
 * naturelle, avec space-between entre les deux. Le form laisse son champ
 * email se rétrécir (grid 1fr auto + min-width:0) pour rester inline avec
 * le titre dans la colonne home-main (~760px). */
.home-main .cs-subscribe-elementor-type-1 .cs-subscribe__content {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    /* Parent flex .cs-subscribe → sans width 100% le content garde sa
     * largeur shrink-to-fit et empêche le space-between d'opérer. */
    width: 100%;
    flex: 1 1 100%;
}
.home-main .cs-subscribe-elementor-type-1 .cs-subscribe__content .cs-subscribe__header {
    flex: 0 1 auto;
    margin: 0;
}
.home-main .cs-subscribe-elementor-type-1 .cs-subscribe__heading {
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0 0 0.35rem;
}
.cs-subscribe-elementor-type-1 .cs-subscribe__subheading {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.35;
    opacity: 0.78;
}
/* Le parent ne passe .cs-subscribe__content en flex-direction:row qu'au-dessus
 * de 699px (container query). En dessous (mobile, column), flex-basis:300px
 * agirait sur l'axe vertical et créerait une "marge" sous le form. On scope
 * donc cette règle au même container query que le parent. */
@container subscribe (width > 699px) {
    .home-main .cs-subscribe-elementor-type-1 .cs-subscribe__content .cs-subscribe__form {
        flex: 1 1 300px;
        max-width: 400px;
        min-width: 0;
    }
}
.home-main .cs-subscribe-elementor-type-1 .cs-form-group {
    grid-template-columns: 1fr auto;
}
.home-main .cs-subscribe-elementor-type-1 .cs-form-group #EMAIL {
    min-width: 0;
    width: 100%;
}

/* Bannière pub home_middle_list entre les deux listes Actu :
 * marge en haut pour la décoller du dernier post de la liste 1.
 * Note : la zone émet désormais .cs-banner-archive-after (commit d3446a8
 * pour hériter du fond gris du thème parent) ; le sélecteur suit. */
.home-main .cs-banner-archive-after { margin-top: 2.5rem; }

/* Pubs inter-liste dans la grille agenda (zone events_inter_list_agenda) :
 * - Desktop (≥768px) : image qui couvre la cellule (ratio préservé via object-fit)
 * - Mobile (≤767px)  : texte uniquement (titre + sous-titre optionnel) à la
 *   place de l'image, dans un format compact aligné sur les cards mobile.
 * Le breakpoint correspond à MOBILE_QUERY de cec-mobile-groups.js. */
.cec-events-grid .cs-banner-inter-list { display: flex; flex-direction: column; }
.cec-events-grid .cs-banner-inter-list .cs-banner,
.cec-events-grid .cs-banner-inter-list .cs-banner__container { flex: 1; height: 100%; }
.cec-events-grid .cs-banner-inter-list .cs-banner__content { flex: 1; display: flex; }
.cec-events-grid .cs-banner-inter-list .cs-banner__content > a,
.cec-events-grid .cs-banner-inter-list .cs-banner__content { width: 100%; height: 100%; }
.cec-events-grid .cs-banner-inter-list .cs-banner-image-only { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Variantes d'affichage par viewport */
.cec-events-grid .cs-banner-inter-list .cs-banner-text-only { display: none; }
@media (max-width: 767px) {
    .cec-events-grid .cs-banner-inter-list .cs-banner-image-only { display: none; }
    .cec-events-grid .cs-banner-inter-list .cs-banner-text-only {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 16px 20px;
        height: 100%;
        background: #f5f5f5;
        gap: 6px;
    }
    .cec-events-grid .cs-banner-inter-list .cs-banner-text-title {
        margin: 0;
        font-size: 1.1rem;
        line-height: 1.25;
        font-weight: 600;
        color: #111;
    }
    .cec-events-grid .cs-banner-inter-list .cs-banner-text-subtitle {
        margin: 0;
        font-size: 0.9rem;
        line-height: 1.3;
        color: #555;
    }
}

/* Newsletter + pub milieu de liste : débordement à droite jusqu'à
 * ~64px avant la sidebar, comme sur la prod Elementor (banner 1028px
 * vs article 925px = +103px). Les posts Actu eux restent dans la
 * largeur normale de .home-main. Désactivé sous 960px (layout 1 col). */
@media (min-width: 960px) {
    .home-main > .cs-subscribe-elementor,
    .home-main > .cs-banner-archive-after {
        margin-right: -103px;
    }
}

/* Titre "À la Une" : 2.6rem comme l'original Elementor + pas de bordure
 * en haut (le thème parent .cs-post-carousel__heading hérite d'une
 * border-top via .cs-post-carousel__headline). Scopé desktop pour ne pas
 * écraser la réduction mobile (1.5rem/2rem) définie plus haut. */
@media (min-width: 768px) {
    .home > .cs-post-carousel .cs-post-carousel__heading,
    .home > .cs-post-carousel .cs-post-carousel__heading > span { font-size: 2.6rem; }
}
.home > .cs-post-carousel .cs-post-carousel__headline { border-top: none; }

/* Tuiles du carousel "À la Une" : aligne la taille du titre sur la prod
 * Elementor (22px / line-height 1.2), au lieu du .cs-entry__title par
 * défaut du thème parent (20px). */
.home > .cs-post-carousel .cs-entry__title {
    font-size: 22px;
    line-height: 1.2;
}

/* Dividers avant/après l'agenda. */
.home-calendar__divider {
    border: none;
    border-top: 1px solid var(--cs-color-border, #e5e5e5);
    margin: 2.5rem auto;
    max-width: var(--cs-desktop-container, 1448px);
}

/* Layout principal : on agrandit la zone contenu et on réduit la sidebar. */
.home-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin: 2rem 0; }
@media (min-width: 960px) {
    /* Calque du layout prod (Elementor) : sidebar 300px, gap 167px
     * (mesuré sur https://www.bigcitynantes.fr à viewport 1440). */
    .home-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 167px; }
    /* Sidebar : bordure gauche posée en pseudo-élément dans le gap
     * (décalée de 2rem à gauche de la sidebar), pour ne pas réduire
     * la largeur utile de la colonne sidebar (300px conservé). */
    .home-sidebar {
        position: relative;
    }
    .home-sidebar::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -2rem;
        width: 1px;
        background: var(--cs-color-border, #e5e5e5);
    }
}

/* Sidebar "À découvrir aussi" : ajoute des marges entre les blocs (pub,
 * liste numérotée, divider, instagram). */
.home-sidebar > * + * { margin-top: 2rem; }
.home-sidebar__divider { border: none; border-top: 1px solid #ddd; margin: 2rem 0; }

/* Sticky : le dernier élément de chaque sidebar reste collé en haut
 * du viewport au scroll (avec une marge top), une fois que le scroll
 * l'atteint. S'active uniquement au breakpoint où la sidebar est
 * positionnée à droite.
 *
 * Deux conteneurs cibles :
 *   - `.home-sidebar` (home.php) — template sidebar custom
 *   - `.cs-sidebar__inner` (sidebar.php parent theme) — pages event /
 *     venue / article de la rubrique QFANCW / défaut
 *
 * `:last-child` plutôt qu'un sélecteur ciblé : le dernier bloc varie
 * selon le contexte (Instagram, bannière pub, Latest Posts, widget
 * Infos pratiques, etc.) et peut être un `<section>`, `<div>`, `<ul>`
 * sans classe `.widget`. Le natif `cs-stick-last` du parent cible
 * `.widget:last-child` uniquement → insuffisant pour nos sidebars.
 *
 * Sur `.cs-sidebar__inner` on repasse en flex column + height:100%
 * pour que le dernier élément ait toute la hauteur de la colonne
 * comme course (sans ça le sticky ne se déclenche pas : l'élément
 * est déjà tout en bas d'un conteneur à hauteur du contenu).
 *
 * On annule aussi le `position: sticky` posé par le parent sur
 * `.cs-sidebar__inner` (mode `cs-stick-to-top` par défaut) : garder
 * le conteneur sticky + son dernier enfant sticky crée une double
 * cage, le dernier enfant ne bouge plus. */
@supports (position: sticky) {
    @media (min-width: 960px) {
        /* .home-sidebar doit s'étendre à toute la hauteur de la ligne
         * grid .home-layout pour donner du mou au sticky : sans ça, la
         * sidebar a juste la hauteur de son contenu, le dernier élément
         * est déjà tout en bas, et le sticky se décolle instantanément.
         *
         * align-self: stretch est le défaut des grid items mais on le
         * force par précaution. min-height: 100% garantit la stretch
         * même si un ancêtre override align-items. */
        .home-sidebar {
            align-self: stretch;
            min-height: 100%;
        }
        .home-sidebar > :last-child {
            position: sticky;
            /* Offset : admin bar (0/32px) + 2rem. Pas de --cs-header-height
             * ici car le header n'est pas visible en mode smart lors du
             * scroll vers le bas (il se décale de -81px). */
            top: calc(var(--cs-wpadminbar-height, 0px) + 2rem);
        }
        /* Quand le header smart est visible (scroll vers le haut), il
         * recouvre le viewport top sur 80px : on pousse le sticky
         * sous le header pour préserver la marge 2rem visible.
         * Sélecteur calqué sur maag/style.css:9633 qui fait la même
         * chose pour .cs-sidebar__inner .widget:last-child. */
        .cs-navbar-smart-enabled .cs-header-smart-visible + .cs-site-primary .home-sidebar > :last-child {
            top: calc(var(--cs-header-height, 0px) + var(--cs-wpadminbar-height, 0px) + 2rem);
        }
    }

    @media (min-width: 992px) {
        .cs-sidebar__area.cs-widget-area {
            display: flex;
            flex-direction: column;
        }
        .cs-sticky-sidebar-enabled .cs-sidebar__inner,
        .cs-sidebar__inner {
            position: static;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .cs-sidebar__inner > :last-child {
            position: sticky;
            top: calc(var(--cs-wpadminbar-height, 0px) + 2rem);
        }
    }
}

/* CTA "Voir tous les articles insolites" sous la sidebar numérotée.
 * Centré et espacé comme le CTA principal "Voir plus d'actu". */
.home-sidebar__more {
    margin: 1.5rem 0 0;
    text-align: center;
}

/* Variante compacte du bouton outline : adaptée à la sidebar (largeur
 * contrainte ~300px), texte plus petit et padding réduit.
 * Sélecteur sur-qualifié (.cs-button.cs-button-outline) pour battre
 * la règle globale qui a la même spécificité. */
.home-sidebar__more .cs-button.cs-button-outline {
    font-size: 0.875rem;
    padding: 5px 12px;
    border-width: 1px;
}

/* Variante "outline" du bouton cs-button du thème parent. Utilisée
 * pour les CTA secondaires (voir plus d'actu, voir tous les insolites).
 * Contraste fort au hover en passant en plein couleur. */
.cs-button.cs-button-outline {
    background: transparent;
    color: var(--cs-color-text, #111);
    border: 2px solid var(--cs-color-link, #00e17c);
    /* Le parent pose padding 9px 18px sur .cs-button ; on compense
     * la border 2px pour garder une hauteur identique au bouton plein. */
    padding: 7px 16px;
    transition: background-color 0.18s ease, color 0.18s ease;
}
.cs-button.cs-button-outline:hover,
.cs-button.cs-button-outline:focus-visible {
    background: var(--cs-color-link, #00e17c);
    color: #fff;
}

/* Progress bar custom pour le carousel "À la Une". Le scrollbar
 * Swiper natif ne fonctionne pas en mode loop, donc la largeur +
 * position du thumb sont pilotées par home.js sur chaque slideChange.
 * Largeur thumb = slidesPerView / total, position = realIndex / total. */
/* Sélecteur sur-qualifié pour battre `.cs-post-carousel__nav > div
 * { width: 48px; height: 48px }` du thème parent (spécificité 0,2,0). */
.cs-post-carousel__nav > .bcn-carousel__progress {
    position: relative;
    flex: 0 0 80px;
    width: 80px;
    height: 4px;
    align-self: center;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.1);
    margin-right: 0.75rem;
    overflow: hidden;
    cursor: default;
}
/* Neutralise les pseudos que le parent pose sur chaque div du nav
 * (cercle blanc + icône font) : invisibles ici grâce à overflow hidden
 * mais on retire quand même pour propreté. */
.cs-post-carousel__nav > .bcn-carousel__progress::before,
.cs-post-carousel__nav > .bcn-carousel__progress::after {
    content: none;
}
.bcn-carousel__progress-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 25%; /* valeur de fallback, écrasée par le JS */
    border-radius: 999px;
    background: var(--cs-color-link, #00e17c);
    transition: transform 0.25s ease, width 0.25s ease;
    will-change: transform, width;
}
@media (min-width: 576px) {
    .bcn-carousel__progress { flex-basis: 120px; width: 120px; }
}

/* États focus clavier visibles sur les boutons prev/next du carousel
 * (thème parent les rend en <div>, on s'assure que le focus ring est
 * bien visible). WCAG 2.4.7. */
.cs-post-carousel__button-prev:focus-visible,
.cs-post-carousel__button-next:focus-visible {
    outline: 2px solid var(--cs-color-link, #00e17c);
    outline-offset: 3px;
    border-radius: 50%;
}

/* -----------------------------------------------------------------------------
   12. Page Devenir partenaire — voir css/partner.css
   ----------------------------------------------------------------------------- */

/* ========================================================================
   Label "Sponsorisé" — vignettes du slider "À la Une" (home).
   Injecté par bcn_home_render_posts() au-dessus du titre dans .cs-entry__info.
   Style discret : petite capitale translucide, sans fond ni pastille.
   ======================================================================== */
.cs-post-carousel__grid .cs-post-carousel__item .cs-entry__sponso {
    display: inline-block;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.2;
}

/* ========================================================================
   Page /newsletter/ — sections Gutenberg ajoutées sous le formulaire.
   Appliquées via migration/2026-04-18-newsletter-page-content.php.
   Structure : Bénéfices (grille) → Format (stats) → FAQ (accordéons) → CTA.
   ======================================================================== */
.bcn-newsletter-page .entry-content > .cs-subscribe-elementor,
.bcn-newsletter-page .entry-content > .wp-block-group {
    margin-block: 2.5rem;
}
.bcn-newsletter-page .entry-content .wp-block-separator {
    margin-block: 3rem;
    border: 0;
    height: 1px;
    background: rgba(13, 26, 62, 0.12);
}

/* Hero d'inscription — fond lavande soft pour poser la marque et
   trancher avec le bloc bénéfices (blanc + bordure) juste en dessous.
   Les wrappers internes du module [bc_subscribe] passent en transparent
   pour laisser passer la lavande (sinon le gris du thème reste visible). */
.bcn-newsletter-page .entry-content > .bcn-newsletter-top {
    background: #F2EFFA;
    border-radius: 18px;
    padding: 2.25rem 2rem;
    margin-block: 2.5rem;
}
.bcn-newsletter-page .bcn-newsletter-top .cs-subscribe-elementor,
.bcn-newsletter-page .bcn-newsletter-top .cs-subscribe {
    background: transparent;
}
@media (max-width: 720px) {
    .bcn-newsletter-page .entry-content > .bcn-newsletter-top {
        padding: 1.75rem 1.25rem;
    }
}

/* Bénéfices — 4 items en grille 2×2, cartes blanches avec bordure fine
   pour ne pas se confondre avec le hero lavande. */
.bcn-newsletter-benefits .wp-block-columns {
    gap: 1.5rem;
    margin-block: 1.25rem;
}
.bcn-newsletter-benefits .wp-block-column {
    background: #ffffff;
    border: 1px solid rgba(13, 26, 62, 0.1);
    border-radius: 14px;
    padding: 1.5rem 1.5rem 1.25rem;
}
.bcn-newsletter-benefits .wp-block-column h3 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    line-height: 1.3;
}
.bcn-newsletter-benefits .wp-block-column p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #3b3b4a;
}

/* Format — 3 stats centrées, tons navy + lavande.
 * Sélecteurs en .bcn-newsletter-page pour gagner la spécificité contre les h2
 * du thème parent (qui forcent color:#000 via .entry-content h2). */
.bcn-newsletter-page .entry-content .bcn-newsletter-format {
    background: #0d1a3e;
    color: #fff;
    border-radius: 18px;
    padding: 2.25rem 2rem;
}
.bcn-newsletter-page .entry-content .bcn-newsletter-format h2.wp-block-heading {
    color: #fff;
    margin: 0 0 1.5rem;
    padding: 0;
    font-size: 1.6rem;
    line-height: 1.2;
}
.bcn-newsletter-page .entry-content .bcn-newsletter-format .wp-block-columns {
    gap: 1.5rem;
    margin: 0;
}
.bcn-newsletter-page .entry-content .bcn-newsletter-format p.bcn-newsletter-format__stat {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}
.bcn-newsletter-page .entry-content .bcn-newsletter-format__stat strong {
    display: block;
    margin-bottom: 0.35rem;
    color: #b0a6df;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* FAQ — accordéons <details> sobres, pleine largeur. */
.bcn-newsletter-faq h2 {
    margin: 0 0 1.25rem;
}
.bcn-newsletter-faq .wp-block-details {
    border-bottom: 1px solid rgba(13, 26, 62, 0.12);
    padding: 1rem 0;
    margin: 0;
}
.bcn-newsletter-faq .wp-block-details:first-of-type {
    border-top: 1px solid rgba(13, 26, 62, 0.12);
}
.bcn-newsletter-faq .wp-block-details > summary {
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05rem;
    padding-right: 2rem;
    position: relative;
    color: #0d1a3e;
}
.bcn-newsletter-faq .wp-block-details > summary::-webkit-details-marker {
    display: none;
}
.bcn-newsletter-faq .wp-block-details > summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 400;
    color: rgba(13, 26, 62, 0.55);
    transition: transform 0.2s ease;
    line-height: 1;
}
.bcn-newsletter-faq .wp-block-details[open] > summary::after {
    content: "–";
    color: #0d1a3e;
}
.bcn-newsletter-faq .wp-block-details[open] > summary {
    margin-bottom: 0.6rem;
}
/* Animation d'ouverture : fade-in + slide léger du contenu. */
@keyframes bcn-faq-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.bcn-newsletter-faq .wp-block-details[open] > *:not(summary) {
    animation: bcn-faq-reveal 0.25s ease-out;
}
.bcn-newsletter-faq .wp-block-details > summary {
    transition: color 0.15s ease;
}
.bcn-newsletter-faq .wp-block-details > summary:hover {
    color: #00e17c;
}
.bcn-newsletter-faq .wp-block-details > summary:hover::after {
    color: #00e17c;
}
@media (prefers-reduced-motion: reduce) {
    .bcn-newsletter-faq .wp-block-details[open] > *:not(summary) {
        animation: none;
    }
}
.bcn-newsletter-page .entry-content .bcn-newsletter-faq .wp-block-details p {
    margin: 0;
    color: #3b3b4a;
    font-size: 0.95rem;
    line-height: 1.55;
}

/* Anchor cible pour le scroll depuis le CTA bas de page — offset navbar sticky. */
#bcn-newsletter-top {
    scroll-margin-top: 96px;
}

/* Outro — bloc centré avec CTA qui renvoie vers le form en haut. */
.bcn-newsletter-page .entry-content .bcn-newsletter-outro {
    margin: 2.5rem auto 0;
    padding: 2rem 1.5rem;
    text-align: center;
}
.bcn-newsletter-page .entry-content .bcn-newsletter-outro h2.wp-block-heading {
    margin: 0 0 1.25rem;
    font-size: 1.6rem;
    color: #1c1c2a;
}
.bcn-newsletter-outro .wp-block-buttons {
    justify-content: center;
}
.bcn-newsletter-outro__cta .wp-block-button__link {
    background: #1c1c2a;
    color: #fff;
    padding: 0.9rem 2rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: transform 0.15s ease, background 0.15s ease;
}
.bcn-newsletter-outro__cta .wp-block-button__link:hover,
.bcn-newsletter-outro__cta .wp-block-button__link:focus {
    background: #000;
    transform: translateY(-1px);
    color: #fff;
}

/* Mobile : grille bénéfices en 1 colonne, format moins d'air. */
@media (max-width: 720px) {
    .bcn-newsletter-benefits .wp-block-column {
        padding: 1.25rem;
    }
    .bcn-newsletter-format {
        padding: 2rem 1.5rem;
    }
    .bcn-newsletter-format__stat strong {
        font-size: 1.25rem;
    }
}

/* =============================================================================
 * App Download Banner (mobile uniquement) — rendu via inc/app-banner.php
 * ============================================================================= */

.bcn-app-banner {
    display: none;
}

.bcn-app-banner.is-dismissed {
    display: none !important;
}

@media (max-width: 768px) {
    .bcn-app-banner {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: #1f1f42;
        color: #fff;
        font-family: inherit;
        line-height: 1.2;
    }

    .bcn-app-banner__link {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1 1 auto;
        min-width: 0;
        color: inherit;
        text-decoration: none;
    }

    .bcn-app-banner__icon {
        width: 40px;
        height: 40px;
        border-radius: 9px;
        flex: 0 0 auto;
        display: block;
    }

    .bcn-app-banner__text {
        display: flex;
        flex-direction: column;
        min-width: 0;
        flex: 1 1 auto;
    }

    .bcn-app-banner__title {
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bcn-app-banner__subtitle {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.75);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bcn-app-banner__cta {
        flex: 0 0 auto;
        background: var(--cs-color-button, #51A5CE);
        color: var(--cs-color-button-contrast, #fff);
        font-family: var(--cs-font-primary-family), sans-serif;
        font-size: 13px;
        font-weight: var(--cs-font-primary-weight, 600);
        letter-spacing: var(--cs-font-primary-letter-spacing);
        text-transform: var(--cs-font-primary-text-transform);
        padding: 8px 14px;
        border-radius: var(--cs-button-border-radius, 6px);
        white-space: nowrap;
        transition: 0.25s;
    }

    .bcn-app-banner__link:hover .bcn-app-banner__cta {
        background: var(--cs-color-button-hover, #51A5CE);
        color: var(--cs-color-button-hover-contrast, #fff);
        opacity: 0.8;
    }

    .bcn-app-banner__close {
        flex: 0 0 auto;
        background: transparent;
        border: 0;
        padding: 6px 8px;
        margin: 0;
        color: rgba(255, 255, 255, 0.7);
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
    }

    .bcn-app-banner__close:hover,
    .bcn-app-banner__close:focus {
        color: #fff;
    }
}

/* =============================================================================
 * 13. Accessibilité (WCAG 2.1 AA) — corrections audit mobile 2026-05-29
 * ============================================================================= */

/* 1.4.3 Contraste — Boutons pleins du thème.
 * Le mint de marque #00e17c (--cs-color-button) ne contraste qu'à 1,74:1 avec
 * du texte blanc. On CONSERVE exactement le mint et on passe le texte des
 * boutons pleins en vert quasi-noir (#082019 -> 9,8:1). N'affecte PAS :
 *   - les boutons outline (.cs-button-outline : texte déjà foncé) ;
 *   - le mint décoratif (bordures, dégradés, gros titres) ;
 *   - les pages landing en thème sombre (data-scheme="dark").
 * Alternative si tu préfères garder le texte blanc : remettre #fff ici et
 * passer --cs-color-button à un vert plus foncé (ex. #007a4d). */
html:not([data-scheme="dark"]) .cs-button:not(.cs-button-outline):not(.cs-button-text),
html:not([data-scheme="dark"]) .cs-button:not(.cs-button-outline):not(.cs-button-text) span {
    color: #082019;
}

/* CTA du bandeau app (fond mint, mobile uniquement). */
.bcn-app-banner__cta,
.bcn-app-banner__link:hover .bcn-app-banner__cta {
    color: #082019;
}

/* 2.4.1 Contournement de blocs — lien d'évitement clavier.
 * Rendu en début de <body> par inc/a11y.php (wp_body_open), cible le
 * <main id="main"> du thème parent. Masqué jusqu'au focus clavier. */
/* Styles .bcn-skip-link deplaces en CSS critique inline dans inc/a11y.php
 * (anti-FOUC : le lien reste masque meme si le CSS combine LiteSpeed est en
 * retard de cache apres un deploiement). */

/* =============================================================================
   ShortPixel WebP — compatibilité <picture> avec l'art-direction CSCO
   -----------------------------------------------------------------------------
   ShortPixel (deliverWebp=1, livraison WebP par balises <picture>) entoure
   chaque <img> d'un <picture><source …webp><img …></picture>.

   Or CSCO fait de l'ART-DIRECTION en sortant DEUX <img> par vignette (variante
   portrait + variante paysage) dans un même conteneur, et n'en affiche qu'une
   via des sélecteurs STRUCTURELS, partout sur le même modèle :
       <conteneur> img + img        { display:none }   // base (mobile) → 1re
       @media (min-width:576px) {
         <conteneur> img:first-child { display:none }   // desktop      → 2e
         <conteneur> img + img       { display:block }
       }
   (conteneurs : .cs-overlay-background, .cs-entry__thumbnail, .cs-entry__media)

   Le wrapping casse CES DEUX sélecteurs :
     • l'<img> n'est plus :first-child de son <picture> (le <source> l'est) ;
     • les deux <img> ne sont plus frères adjacents (chacun dans son <picture>).
   → aucune règle ne matche → les deux variantes s'affichent = IMAGES EN DOUBLE
     (carrousel d'accueil + image « à la une » des articles).
   NB : display:contents seul ne corrige rien — les sélecteurs structurels
   opèrent sur le DOM, pas sur l'arbre de boîtes.

   Correctif : on rejoue le MÊME toggle, mais sur les <picture> (redevenus les
   frères adjacents). La variante affichée passe en `display:contents` pour que
   son <img> redevienne enfant direct du conteneur et remplisse la boîte ratio
   (height:100% / object-fit:cover du thème) ; la sélection WebP par <source>
   reste active (mécanisme HTML, indépendant du CSS).
   `:not(:last-child)` protège les vignettes à une seule image d'être masquées.

   ⚠ Si CSCO/Maag change ses breakpoints d'art-direction lors d'une MAJ, ce
   miroir doit être resynchronisé (sinon le doublage réapparaît).
   ============================================================================= */

/* Toutes les <picture> de ces conteneurs sont transparentes au layout par défaut */
.cs-overlay-background picture,
.cs-entry__thumbnail picture,
.cs-entry__media picture {
    display: contents;
}

/* Base (mobile) : on masque la 2e variante, on garde la 1re (portrait) */
.cs-overlay-background picture + picture,
.cs-entry__thumbnail picture + picture,
.cs-entry__media picture + picture {
    display: none;
}

@media (min-width: 576px) {
    /* Desktop : on masque la 1re variante, on affiche la 2e (paysage) */
    .cs-overlay-background picture:first-child:not(:last-child),
    .cs-entry__thumbnail picture:first-child:not(:last-child),
    .cs-entry__media picture:first-child:not(:last-child) {
        display: none;
    }
    .cs-overlay-background picture + picture,
    .cs-entry__thumbnail picture + picture,
    .cs-entry__media picture + picture {
        display: contents;
    }
}

/* Override CSCO — zone résultats de recherche : force la variante portrait (1re) */
@media (max-width: 991.98px) {
    .cs-search__post-area.cs-posts-area__main picture:first-child {
        display: contents !important;
    }
    .cs-search__post-area.cs-posts-area__main picture + picture {
        display: none !important;
    }
}

/* Override CSCO — zone posts du menu burger : force la variante portrait (1re) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .cs-burger-menu__post-area.cs-posts-area__main picture:first-child {
        display: contents !important;
    }
    .cs-burger-menu__post-area.cs-posts-area__main picture + picture {
        display: none !important;
    }
}