/* ============================================================
 * AXIALYS — Bridge Elementor  |  v1.8
 * Dépendance : tokens.css doit être chargé en amont (functions.php)
 *
 * ┌─────────────────────────────────────────────────────────┐
 * │  DOUBLE NAMESPACE — 2 modes, sans conflit               │
 * │                                                         │
 * │  Option A — .ax-v2  (page entière)                      │
 * │    Elementor → Paramètres page → Body CSS Class         │
 * │    → "ax-v2"                                            │
 * │    Toutes les sections héritent du design system.       │
 * │                                                         │
 * │  Option B — .ax-scope  (container isolé)                │
 * │    Elementor → Container → Avancé → CSS Class           │
 * │    → "ax-scope"                                         │
 * │    Seule la section ciblée utilise le design system.    │
 * │    Compatible avec les anciennes pages.                 │
 * └─────────────────────────────────────────────────────────┘
 *
 * INDEX
 *  1.  Variables internes
 *  2.  Boutons — Base · Variantes · Tailles · Hover · Focus
 *  3.  Backgrounds — Dégradés Hero (Aurora · Sombre · Flame · Soft)
 *  4.  Backgrounds — Solides (white · light · dark · accent · navy)
 *  5.  Sections — Alternance auto  [Option A uniquement — page entière]
 *  6.  Sections — Interruption     [Option A uniquement — page entière]
 *  7.  Container
 *  8.  Grilles & Splits (2·3·4 col, 1/3·2/3, 40/60…)
 *  9.  Cards
 * 10.  Typographie
 * 11.  Responsive (≤1024px tablette, ≤768px mobile, ≤480px petit mobile)
 * ============================================================ */


/* ────────────────────────────────────────────────────────────
 * 0. COMPENSATION PILL NAVBAR FIXE
 *
 * La pill navbar est position: fixed (top: 20px, height: 56px).
 * Sans compensation, le premier contenu de chaque page passe
 * derrière la navbar.
 *
 * Calcul desktop + mobile : 20px (top) + 56px (navbar) + 20px (air) = 96px
 * → Valeur unique, identique desktop et mobile — pas de media query ici.
 *
 * APPROCHE : padding-top sur le PREMIER BLOC DE CONTENU (pas sur body).
 * → Le background de la section (couleur, gradient) remonte dans ce
 *   padding, pas de gap blanc entre navbar et contenu.
 *
 * Sélecteurs :
 *   ① data-elementor-type="wp-page" — couvre les anciennes pages
 *      (section.elementor-section) ET les nouvelles pages Flexbox
 *      (section.e-con) sans cibler la nav/footer Elementor.
 *   ② Fallback .ax-scope classique (containers isolés)
 *   ③ Atomic Flexbox — section.e-con
 *
 * scroll-padding-top sur html : décale les ancres internes (#section).
 * ──────────────────────────────────────────────────────────── */

/* Ancres internes — décalage global */
html {
  scroll-padding-top: 110px;
}

/* ① Nouvelles pages & anciennes pages via data-attributs Elementor */
body.ax-scope [data-elementor-type="wp-page"][data-elementor-post-type="page"]>section:first-of-type,
body.ax-scope [data-elementor-type="wp-page"][data-elementor-post-type="page"]>div.elementor-section:first-of-type,
/* ② Fallback .ax-scope — ancien ciblage conservé pour compatibilité */
body.ax-scope main#content>.page-content>.elementor>section:first-of-type,
body.ax-scope main#content>.page-content>.elementor>div.elementor-section:first-of-type,
body.ax-scope main#content>.elementor>section:first-of-type,
body.ax-scope main#content>.elementor>div.elementor-section:first-of-type,
/* ③ Atomic Flexbox — section.e-con (balise HTML = section, classe réelle = e-atomic-element) */
body.ax-scope .elementor>section.e-con:first-child {
  padding-top: 96px;
}


/* ────────────────────────────────────────────────────────────
 * 1. VARIABLES INTERNES
 *    Couleurs utilisées dans le design mais absentes de tokens.css
 * ──────────────────────────────────────────────────────────── */

:root {
  --ax-surface-alt: #F8F9FF;
  /* fond alterné — sections paires */
}


/* ────────────────────────────────────────────────────────────
 * 2. BOUTONS
 *
 *  A → body.ax-v2  :  .ax-v2 .elementor .ax-btn
 *  B → .ax-scope   :  .ax-scope .ax-btn
 * ──────────────────────────────────────────────────────────── */

/* ── Base ── */
.ax-v2 .elementor .ax-btn,
.ax-scope .ax-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ax-space-2);
  padding: 12px 24px;
  border-radius: var(--ax-radius-full);
  border: 2px solid transparent;
  font-family: var(--ax-font-body);
  font-size: var(--ax-font-size-sm);
  font-weight: var(--ax-font-weight-semibold);
  letter-spacing: 0.025em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--ax-duration-fast) var(--ax-ease-standard);
}

/* ── Variantes ── */
.ax-v2 .elementor .ax-btn.ax-btn-primary,
.ax-scope .ax-btn.ax-btn-primary {
  background-color: var(--ax-color-accent-500);
  color: var(--ax-color-neutral-0);
  border-color: var(--ax-color-accent-500);
  box-shadow: 0 1px 3px rgba(241, 116, 49, 0.2);
}

.ax-v2 .elementor .ax-btn.ax-btn-secondary,
.ax-scope .ax-btn.ax-btn-secondary {
  background-color: transparent;
  color: var(--ax-color-primary-500);
  border-color: var(--ax-color-primary-500);
}

.ax-v2 .elementor .ax-btn.ax-btn-secondary-inv,
.ax-scope .ax-btn.ax-btn-secondary-inv {
  background-color: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.ax-v2 .elementor .ax-btn.ax-btn-ghost,
.ax-scope .ax-btn.ax-btn-ghost {
  background-color: transparent;
  color: var(--ax-color-accent-700);
  border-color: transparent;
  padding-left: 0;

}

.ax-v2 .elementor .ax-btn.ax-btn-disabled,
.ax-scope .ax-btn.ax-btn-disabled {
  background-color: var(--ax-color-neutral-200);
  color: var(--ax-color-neutral-500);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Hover ── */
.ax-v2 .elementor .ax-btn.ax-btn-primary:hover,
.ax-scope .ax-btn.ax-btn-primary:hover {
  background-color: var(--ax-color-accent-600);
  border-color: var(--ax-color-accent-600);
  transform: translateY(-1px);
}

.ax-v2 .elementor .ax-btn.ax-btn-secondary:hover,
.ax-scope .ax-btn.ax-btn-secondary:hover {
  background-color: var(--ax-color-primary-50);
}

.ax-v2 .elementor .ax-btn.ax-btn-secondary-inv:hover,
.ax-scope .ax-btn.ax-btn-secondary-inv:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

.ax-v2 .elementor .ax-btn.ax-btn-ghost:hover,
.ax-scope .ax-btn.ax-btn-ghost:hover {
  background-color: var(--ax-color-accent-50);
  padding-left: 24px;
}

/* ── Focus accessibilité ── */
.ax-v2 .elementor .ax-btn.ax-btn-primary:focus,
.ax-v2 .elementor .ax-btn.ax-btn-primary:focus-visible,
.ax-scope .ax-btn.ax-btn-primary:focus,
.ax-scope .ax-btn.ax-btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--ax-focus-ring-cta);
}

/* ── Tailles ── */
.ax-v2 .elementor .ax-btn.ax-btn-sm,
.ax-scope .ax-btn.ax-btn-sm {
  padding: 8px 16px;
  font-size: var(--ax-font-size-xs);
}

.ax-v2 .elementor .ax-btn.ax-btn-lg,
.ax-scope .ax-btn.ax-btn-lg {
  padding: 16px 32px;
  font-size: var(--ax-font-size-base);
}

.ax-v2 .elementor .ax-btn.ax-btn-xl,
.ax-scope .ax-btn.ax-btn-xl {
  padding: 18px 40px;
  font-size: var(--ax-font-size-lg);
}

/* ── Disposition icône ── */
.ax-v2 .elementor .ax-btn.ax-btn--icon-left,
.ax-scope .ax-btn.ax-btn--icon-left {
  flex-direction: row-reverse;
}


/* ────────────────────────────────────────────────────────────
 * 3. BACKGROUNDS — DÉGRADÉS HERO
 *
 *  Classes : ax-bg-aurora · ax-bg-sombre · ax-bg-flame · ax-bg-soft
 *
 *  A  →  .ax-v2 .elementor .ax-bg-[x]   (élément quelconque dans la page)
 *  B  →  .ax-scope.ax-bg-[x]            (la classe est SUR le container)
 *  B  →  .ax-scope .ax-bg-[x]           (la classe est DANS le container)
 *
 *  Note : !important garantit que ces dégradés cassent l'alternance auto (§5).
 * ──────────────────────────────────────────────────────────── */

@keyframes ax-aurora-shift {
  0% {
    filter: saturate(1) brightness(1);
  }

  33% {
    filter: saturate(1.05) brightness(1.01);
  }

  66% {
    filter: saturate(0.97) brightness(0.99);
  }

  100% {
    filter: saturate(1) brightness(1);
  }
}

/* ── Aurora — Violet-orange-bleu pastel animé ── */
.ax-v2 .elementor .ax-bg-aurora,
.ax-scope.ax-bg-aurora,
.ax-scope .ax-bg-aurora {
  background:
    radial-gradient(ellipse 75% 55% at 12% 22%, rgba(107, 103, 207, 0.32) 0%, transparent 60%),
    radial-gradient(ellipse 65% 50% at 88% 78%, rgba(241, 116, 49, 0.26) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 62% 12%, rgba(66, 139, 254, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse 80% 65% at 48% 58%, rgba(152, 149, 224, 0.18) 0%, transparent 65%),
    linear-gradient(145deg, #F1F0FB 0%, #E8E7F9 20%, #EFF5FF 45%, #FDE0C8 75%, #F1F0FB 100%) !important;
  animation: ax-aurora-shift 14s ease-in-out infinite alternate;
  color: var(--ax-color-primary-500);
}

/* ── Sombre — Navy profond → violet ── */
.ax-v2 .elementor .ax-bg-sombre,
.ax-scope.ax-bg-sombre,
.ax-scope .ax-bg-sombre {
  background:
    linear-gradient(135deg, #0E1A35 0%, #1F2D5C 60%, #3B2EAA 100%) !important;
  color: var(--ax-color-neutral-0);
}

/* ── Flame — Blanc + halos orange et violet ── */
.ax-v2 .elementor .ax-bg-flame,
.ax-scope.ax-bg-flame,
.ax-scope .ax-bg-flame {
  background:
    radial-gradient(ellipse 90% 95% at 115% -8%, #F17431 0%, #FDE0C8 52%, transparent 72%),
    radial-gradient(ellipse 85% 90% at 118% 112%, #3B2EAA 0%, #E8E7F9 52%, transparent 70%),
    radial-gradient(ellipse 35% 45% at 82% 50%, rgba(253, 224, 200, 0.55) 0%, transparent 100%),
    #FFFFFF !important;
  color: var(--ax-color-primary-500);
}

/* ── Soft — Lavande + bleu ciel ── */
.ax-v2 .elementor .ax-bg-soft,
.ax-scope.ax-bg-soft,
.ax-scope .ax-bg-soft {
  background:
    radial-gradient(ellipse 60% 60% at 82% 12%, rgba(196, 181, 253, 0.70) 0%, transparent 60%),
    radial-gradient(ellipse 55% 55% at 85% 88%, rgba(147, 197, 253, 0.65) 0%, transparent 60%),
    #F5F5FA !important;
  color: var(--ax-color-primary-500);
}


/* ────────────────────────────────────────────────────────────
 * 4. BACKGROUNDS — SOLIDES
 *
 *  Pour forcer un fond et casser l'alternance auto.
 *  Même double sélecteur A / B.
 * ──────────────────────────────────────────────────────────── */

.ax-v2 .elementor .ax-bg-white,
.ax-scope.ax-bg-white,
.ax-scope .ax-bg-white {
  background-color: #FFFFFF !important;
  background-image: none !important;
}

.ax-v2 .elementor .ax-bg-light,
.ax-scope.ax-bg-light,
.ax-scope .ax-bg-light {
  background-color: var(--ax-surface-alt) !important;
  /* #F8F9FF */
  background-image: none !important;
}

.ax-v2 .elementor .ax-bg-dark,
.ax-scope.ax-bg-dark,
.ax-scope .ax-bg-dark {
  background-color: var(--ax-color-primary-500) !important;
  background-image: none !important;
  color: var(--ax-color-neutral-0);
}

.ax-v2 .elementor .ax-bg-accent,
.ax-scope.ax-bg-accent,
.ax-scope .ax-bg-accent {
  background-color: var(--ax-color-accent-500) !important;
  background-image: none !important;
  color: var(--ax-color-neutral-0);
}

.ax-v2 .elementor .ax-bg-navy,
.ax-scope.ax-bg-navy,
.ax-scope .ax-bg-navy {
  background-color: var(--ax-color-primary-900) !important;
  background-image: none !important;
  color: var(--ax-color-neutral-0);
}

/* ── Indigo — dégradé bleu → violet → navy (carte CTA FAQ) ── */
.ax-v2 .elementor .ax-bg-indigo,
.ax-scope.ax-bg-indigo,
.ax-scope .ax-bg-indigo {
  background: linear-gradient(160deg, #5B9BFF 0%, #6B67CF 45%, #211D6D 100%) !important;
  color: var(--ax-color-neutral-0);
}

/* ── Force couleur blanche sur tous les éléments enfants ─────
 * Elementor surcharge la couleur héritée des containers avec
 * ses propres réglages Typography — !important nécessaire.
 * Couvre : h1→h6, paragraphes, listes, liens (hors boutons ax-btn).
 * ─────────────────────────────────────────────────────────── */
:is(.ax-v2 .elementor .ax-bg-dark,
  .ax-v2 .elementor .ax-bg-accent,
  .ax-v2 .elementor .ax-bg-navy,
  .ax-v2 .elementor .ax-bg-sombre,
  .ax-v2 .elementor .ax-bg-indigo,
  .ax-scope .ax-bg-dark,
  .ax-scope .ax-bg-accent,
  .ax-scope .ax-bg-navy,
  .ax-scope .ax-bg-sombre,
  .ax-scope .ax-bg-indigo,
  body.ax-scope .elementor > section.e-con.ax-bg-dark,
  body.ax-scope .elementor > section.e-con.ax-bg-accent,
  body.ax-scope .elementor > section.e-con.ax-bg-navy,
  body.ax-scope .elementor > section.e-con.ax-bg-sombre,
  body.ax-scope .elementor > section.e-con.ax-bg-indigo) :is(h1, h2, h3, h4, h5, h6, p, li:not(.elementor-icon-list-item), span:not(.elementor-icon-list-text):not(.elementor-icon-list-icon), a:not(.ax-btn):not(.ax-btn-primary):not(.ax-btn-secondary)) {
  color: var(--ax-color-neutral-0) !important;
}


/* ────────────────────────────────────────────────────────────
 * 5. SECTIONS — ALTERNANCE AUTOMATIQUE  [Option A uniquement]
 *
 *  Sections impaires → #FFFFFF   Sections paires → #F8F9FF
 *  L'alternance s'applique à l'échelle de la PAGE entière.
 *  Non applicable à .ax-scope (container unique, pas une page).
 *
 *  Sélecteurs :
 *  · .elementor-section  = Elementor classique
 *  · .e-con.e-parent     = Elementor Atomic (sections racine)
 *    → Si vos sections n'ont pas .e-parent, remplacez par
 *      ".ax-v2 > .e-con" dans §5 et §6.
 * ──────────────────────────────────────────────────────────── */

.ax-v2 .elementor-section:nth-child(odd),
.ax-v2 .e-con.e-parent:nth-child(odd) {
  background-color: #FFFFFF;
}

.ax-v2 .elementor-section:nth-child(even),
.ax-v2 .e-con.e-parent:nth-child(even) {
  background-color: var(--ax-surface-alt);
}


/* ────────────────────────────────────────────────────────────
 * 6. SECTIONS — INTERRUPTION DE L'ALTERNANCE  [Option A uniquement]
 *
 *  Quand une section en position DOM IMPAIRE porte une classe
 *  ax-bg-* explicite, les sections SUIVANTES inversent leur fond.
 *  Le :nth-child(odd) sur la source empêche le flip sur les
 *  sections en position paire (alternance déjà correcte).
 *
 *  Exemples :
 *   Sec.1 = ax-bg-aurora → sec.2=#FFF  sec.3=#F8F9FF  sec.4=#FFF
 *   Sec.2 = ax-bg-flame  → sec.3=#FFF  sec.4=#F8F9FF  (naturel, pas de flip)
 * ──────────────────────────────────────────────────────────── */

/* ── Flip odd→light  (Elementor classique) ── */
.ax-v2 .elementor-section.ax-bg-aurora:nth-child(odd)~.elementor-section:nth-child(odd),
.ax-v2 .elementor-section.ax-bg-sombre:nth-child(odd)~.elementor-section:nth-child(odd),
.ax-v2 .elementor-section.ax-bg-flame:nth-child(odd)~.elementor-section:nth-child(odd),
.ax-v2 .elementor-section.ax-bg-soft:nth-child(odd)~.elementor-section:nth-child(odd),
.ax-v2 .elementor-section.ax-bg-dark:nth-child(odd)~.elementor-section:nth-child(odd),
.ax-v2 .elementor-section.ax-bg-accent:nth-child(odd)~.elementor-section:nth-child(odd),
.ax-v2 .elementor-section.ax-bg-navy:nth-child(odd)~.elementor-section:nth-child(odd) {
  background-color: var(--ax-surface-alt);
}

/* ── Flip even→white  (Elementor classique) ── */
.ax-v2 .elementor-section.ax-bg-aurora:nth-child(odd)~.elementor-section:nth-child(even),
.ax-v2 .elementor-section.ax-bg-sombre:nth-child(odd)~.elementor-section:nth-child(even),
.ax-v2 .elementor-section.ax-bg-flame:nth-child(odd)~.elementor-section:nth-child(even),
.ax-v2 .elementor-section.ax-bg-soft:nth-child(odd)~.elementor-section:nth-child(even),
.ax-v2 .elementor-section.ax-bg-dark:nth-child(odd)~.elementor-section:nth-child(even),
.ax-v2 .elementor-section.ax-bg-accent:nth-child(odd)~.elementor-section:nth-child(even),
.ax-v2 .elementor-section.ax-bg-navy:nth-child(odd)~.elementor-section:nth-child(even) {
  background-color: #FFFFFF;
}

/* ── Flip odd→light  (Elementor Atomic) ── */
.ax-v2 .e-con.e-parent.ax-bg-aurora:nth-child(odd)~.e-con.e-parent:nth-child(odd),
.ax-v2 .e-con.e-parent.ax-bg-sombre:nth-child(odd)~.e-con.e-parent:nth-child(odd),
.ax-v2 .e-con.e-parent.ax-bg-flame:nth-child(odd)~.e-con.e-parent:nth-child(odd),
.ax-v2 .e-con.e-parent.ax-bg-soft:nth-child(odd)~.e-con.e-parent:nth-child(odd),
.ax-v2 .e-con.e-parent.ax-bg-dark:nth-child(odd)~.e-con.e-parent:nth-child(odd),
.ax-v2 .e-con.e-parent.ax-bg-accent:nth-child(odd)~.e-con.e-parent:nth-child(odd),
.ax-v2 .e-con.e-parent.ax-bg-navy:nth-child(odd)~.e-con.e-parent:nth-child(odd) {
  background-color: var(--ax-surface-alt);
}

/* ── Flip even→white  (Elementor Atomic) ── */
.ax-v2 .e-con.e-parent.ax-bg-aurora:nth-child(odd)~.e-con.e-parent:nth-child(even),
.ax-v2 .e-con.e-parent.ax-bg-sombre:nth-child(odd)~.e-con.e-parent:nth-child(even),
.ax-v2 .e-con.e-parent.ax-bg-flame:nth-child(odd)~.e-con.e-parent:nth-child(even),
.ax-v2 .e-con.e-parent.ax-bg-soft:nth-child(odd)~.e-con.e-parent:nth-child(even),
.ax-v2 .e-con.e-parent.ax-bg-dark:nth-child(odd)~.e-con.e-parent:nth-child(even),
.ax-v2 .e-con.e-parent.ax-bg-accent:nth-child(odd)~.e-con.e-parent:nth-child(even),
.ax-v2 .e-con.e-parent.ax-bg-navy:nth-child(odd)~.e-con.e-parent:nth-child(even) {
  background-color: #FFFFFF;
}


/* ────────────────────────────────────────────────────────────
 * 5B. ELEMENTOR ATOMIC — SECTIONS AVEC BALISE HTML "section"
 *
 * Bonne pratique confirmée : dans Elementor Atomic, régler la
 * "Balise HTML" de chaque container racine sur "Section".
 * Cela génère <section class="e-con e-atomic-element ..."> dans le DOM.
 *
 * Avec body.ax-scope (toutes les pages) + balise section :
 *   → padding vertical automatique (pas besoin d'ax-section)
 *   → alternance fond automatique   (pas besoin d'ax-v2)
 *   → ax-bg-* fonctionne en override via !important
 *   → ax-section--sm/lg/hero fonctionnent en surcharge de padding
 *
 * Sélecteur clé : body.ax-scope .elementor > section.e-con
 *   (enfant direct > pour cibler uniquement les sections racines,
 *    pas les containers imbriqués)
 * ──────────────────────────────────────────────────────────── */

/* Padding vertical standard sur toutes les sections racines */
body.ax-scope .elementor>section.e-con {
  padding-block: var(--ax-space-24);
  /* 96px — même valeur que .ax-section */
}

/* Alternance fond automatique blanc / gris clair */
body.ax-scope .elementor>section.e-con:nth-child(odd) {
  background-color: #FFFFFF;
}

body.ax-scope .elementor>section.e-con:nth-child(even) {
  background-color: var(--ax-surface-alt);
  /* #F8F9FF */
}

/* Overrides de padding (optionnels — remplacent le padding auto) */
body.ax-scope .elementor>section.e-con.ax-section--sm {
  padding-block: var(--ax-space-16);
  /* 64px */
}

body.ax-scope .elementor>section.e-con.ax-section--lg {
  padding-block: var(--ax-space-32);
  /* 128px */
}

body.ax-scope .elementor>section.e-con.ax-section--xl {
  padding-block: var(--ax-space-20) var(--ax-space-16);
  /* ~80px haut / 64px bas */
  min-height: 60svh;
  display: flex;
  align-items: center;
}

body.ax-scope .elementor>section.e-con.ax-section--hero {
  padding-block: var(--ax-space-20) var(--ax-space-16);
  min-height: 100svh;
  display: flex;
  align-items: center;
}

/* Interruption de l'alternance après une section ax-bg-* impaire */
body.ax-scope .elementor>section.e-con[class*="ax-bg-"]:nth-child(odd)~section.e-con:nth-child(odd) {
  background-color: var(--ax-surface-alt);
}

body.ax-scope .elementor>section.e-con[class*="ax-bg-"]:nth-child(odd)~section.e-con:nth-child(even) {
  background-color: #FFFFFF;
}

/* Responsive */
@media (max-width: 1024px) {
  body.ax-scope .elementor>section.e-con {
    padding-block: var(--ax-space-20);
    /* 80px */
  }
}

@media (max-width: 768px) {
  body.ax-scope .elementor>section.e-con {
    padding-block: var(--ax-space-16);
    /* 64px */
  }

  body.ax-scope .elementor>section.e-con.ax-section--sm {
    padding-block: var(--ax-space-12);
    /* 48px */
  }

  body.ax-scope .elementor>section.e-con.ax-section--lg {
    padding-block: var(--ax-space-20);
    /* 80px */
  }

  body.ax-scope .elementor>section.e-con.ax-section--xl {
    min-height: 50svh;
    /* demi-hero réduit sur tablette */
  }
}


/* ────────────────────────────────────────────────────────────
 * 7. CONTAINER
 * ──────────────────────────────────────────────────────────── */

/* ── Base commune à tous les containers ── */
.ax-v2 .elementor [class*="ax-container"],
.ax-scope [class*="ax-container"] {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--ax-container-padding-x);
  /* 24px */
}

/* ── Tailles ── */
.ax-v2 .elementor .ax-container,
.ax-scope .ax-container {
  max-width: var(--ax-container-xl, 1280px) !important;
  /* 1280px — pleine largeur standard */
}

.ax-v2 .elementor .ax-container--content,
.ax-scope .ax-container--content {
  max-width: var(--ax-container-content, 1120px) !important;
  /* 1120px — sections de contenu */
}

.ax-v2 .elementor .ax-container--lg,
.ax-scope .ax-container--lg {
  max-width: var(--ax-container-lg, 1024px) !important;
  /* 1024px — pages produit */
}

.ax-v2 .elementor .ax-container--md,
.ax-scope .ax-container--md {
  max-width: var(--ax-container-md, 768px) !important;
  /* 768px  — articles, blog */
}

.ax-v2 .elementor .ax-container--sm,
.ax-scope .ax-container--sm {
  max-width: var(--ax-container-sm, 640px) !important;
  /* 640px  — formulaires, légal */
}

/* ── Grand écran : padding-inline agrandi quand viewport > 1280px ── */
@media (min-width: 1280px) {

  .ax-v2 .elementor [class*="ax-container"],
  .ax-scope [class*="ax-container"] {
    padding-inline: var(--ax-space-8);
    /* 32px */
  }
}

/* ── Mobile : padding latéral réduit, container pleine largeur ── */
@media (max-width: 768px) {

  .ax-v2 .elementor [class*="ax-container"],
  .ax-scope [class*="ax-container"] {
    padding-inline: var(--ax-space-5);
    /* 20px */
  }
}


/* ────────────────────────────────────────────────────────────
 * 8. GRILLES & SPLITS
 * ──────────────────────────────────────────────────────────── */

/* ── Grilles symétriques ── */
.ax-v2 .elementor .ax-grid-2,
.ax-scope .ax-grid-2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ax-space-12);
}

.ax-v2 .elementor .ax-grid-3,
.ax-scope .ax-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ax-space-8);
}

.ax-v2 .elementor .ax-grid-4,
.ax-scope .ax-grid-4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ax-space-6);
}

/* ── Splits asymétriques ── */
.ax-v2 .elementor .ax-split-1-2,
.ax-scope .ax-split-1-2 {
  display: grid !important;
  grid-template-columns: 1fr 2fr;
  gap: var(--ax-space-12);
  align-items: center;
}

.ax-v2 .elementor .ax-split-2-1,
.ax-scope .ax-split-2-1 {
  display: grid !important;
  grid-template-columns: 2fr 1fr;
  gap: var(--ax-space-12);
  align-items: center;
}

.ax-v2 .elementor .ax-split-1-1,
.ax-scope .ax-split-1-1 {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: var(--ax-space-12);
  align-items: center;
}

.ax-v2 .elementor .ax-split-4-6,
.ax-scope .ax-split-4-6 {
  display: grid !important;
  grid-template-columns: 4fr 6fr;
  gap: var(--ax-space-12);
  align-items: center;
}

.ax-v2 .elementor .ax-split-6-4,
.ax-scope .ax-split-6-4 {
  display: grid !important;
  grid-template-columns: 6fr 4fr;
  gap: var(--ax-space-12);
  align-items: center;
}

.ax-v2 .elementor .ax-split-1-3,
.ax-scope .ax-split-1-3 {
  display: grid !important;
  grid-template-columns: 1fr 3fr;
  gap: var(--ax-space-12);
  align-items: start;
}

.ax-v2 .elementor .ax-split-3-1,
.ax-scope .ax-split-3-1 {
  display: grid !important;
  grid-template-columns: 3fr 1fr;
  gap: var(--ax-space-12);
  align-items: start;
}

/* ── Padding de sections ── */
.ax-v2 .elementor .ax-section,
.ax-scope.ax-section,
.ax-scope .ax-section {
  padding-block: var(--ax-space-24);
}

/* 96px  */

.ax-v2 .elementor .ax-section--sm,
.ax-scope.ax-section--sm,
.ax-scope .ax-section--sm {
  padding-block: var(--ax-space-16);
}

/* 64px  */

.ax-v2 .elementor .ax-section--lg,
.ax-scope.ax-section--lg,
.ax-scope .ax-section--lg {
  padding-block: var(--ax-space-32);
}

/* 128px */

.ax-v2 .elementor .ax-section--xl,
.ax-scope.ax-section--xl,
.ax-scope .ax-section--xl {
  padding-block: var(--ax-space-20) var(--ax-space-16);
  min-height: 60svh;
  display: flex;
  align-items: center;
}

/* 60svh demi-hero */

.ax-v2 .elementor .ax-section--hero,
.ax-scope.ax-section--hero {
  padding-block: var(--ax-space-20) var(--ax-space-16);
  min-height: 100svh;
  display: flex;
  align-items: center;
}


/* ────────────────────────────────────────────────────────────
 * 9. CARDS
 * ──────────────────────────────────────────────────────────── */

/* ax-card sur balise <article> — reset container interne */
.ax-scope article.ax-card {
  gap: 32px;
}

.ax-scope article.ax-card .e-con {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ax-v2 .elementor .ax-card,
.ax-scope .ax-card {
  background-color: var(--ax-color-neutral-0);
  border-radius: var(--ax-radius-xl, 16px);
  box-shadow: 0 2px 16px rgba(33, 29, 109, 0.05);
  padding: var(--ax-space-8);
  border: 1px solid rgba(66, 139, 254, 0.18);
  transition: box-shadow 0.22s var(--ax-ease-standard, cubic-bezier(.4, 0, .2, 1)),
    transform 0.22s var(--ax-ease-standard, cubic-bezier(.4, 0, .2, 1)),
    border-color 0.22s;
}

.ax-v2 .elementor .ax-card:hover,
.ax-scope .ax-card:hover {
  box-shadow: 0 14px 36px rgba(33, 29, 109, 0.11),
    0 3px 10px rgba(33, 29, 109, 0.07);
  transform: translateY(-4px);
  border-color: rgba(66, 139, 254, 0.35);
}

.ax-v2 .elementor .ax-card--flat,
.ax-scope .ax-card--flat {
  background-color: var(--ax-color-neutral-50);
  border-radius: var(--ax-radius-xl);
  padding: var(--ax-space-8);
  border: 1px solid var(--ax-border-subtle);
  box-shadow: none;
}

.ax-v2 .elementor .ax-card--elevated,
.ax-scope .ax-card--elevated {
  background-color: var(--ax-color-neutral-0);
  border-radius: var(--ax-radius-2xl);
  box-shadow: var(--ax-shadow-xl);
  padding: var(--ax-space-10);
}

/* ────────────────────────────────────────────────────────────
 * ax-card-icon — Container de l'icône SVG dans une ax-card
 *
 * Classe à ajouter sur le widget Elementor qui contient le SVG.
 * La couleur fond + icône est gérée par le variant ax-card--*
 * sur la carte parente.
 * Usage : CSS Classes → ax-card-icon
 * ──────────────────────────────────────────────────────────── */
.ax-v2 .elementor .ax-card-icon,
.ax-scope .ax-card-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: var(--ax-radius-lg, 12px);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ax-v2 .elementor .ax-card-icon svg,
.ax-scope .ax-card-icon svg {
  width: 32px !important;
  height: 32px !important;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────
 * ax-card — Variantes couleur
 *
 * Combinaison : ax-card  +  ax-card--navy (ou --orange, --blue)
 * L'enfant ax-card-icon reçoit le fond coloré.
 * ax-href-discover dans la carte reçoit la couleur fixe.
 *
 * Deux niveaux par couleur :
 *   --color       fond 500 → icône blanche
 *   --color-light fond 50  → icône 500
 * ──────────────────────────────────────────────────────────── */

/* ── Navy ── */
.ax-v2 .elementor .ax-card--navy .ax-card-icon,
.ax-scope .ax-card--navy .ax-card-icon {
  background-color: var(--ax-color-primary-500);
  color: var(--ax-color-neutral-0);
}

.ax-v2 .elementor .ax-card--navy .ax-href-discover,
.ax-v2 .elementor .ax-card--navy .ax-href-discover:hover,
.ax-scope .ax-card--navy .ax-href-discover,
.ax-scope .ax-card--navy .ax-href-discover:hover {
  color: var(--ax-color-primary-500) !important;
}

.ax-v2 .elementor .ax-card--navy-light .ax-card-icon,
.ax-scope .ax-card--navy-light .ax-card-icon {
  background-color: var(--ax-color-primary-50);
  color: var(--ax-color-primary-500);
}

.ax-v2 .elementor .ax-card--navy-light .ax-href-discover,
.ax-v2 .elementor .ax-card--navy-light .ax-href-discover:hover,
.ax-scope .ax-card--navy-light .ax-href-discover,
.ax-scope .ax-card--navy-light .ax-href-discover:hover {
  color: var(--ax-color-primary-500) !important;
}

/* ── Orange ── */
.ax-v2 .elementor .ax-card--orange .ax-card-icon,
.ax-scope .ax-card--orange .ax-card-icon {
  background-color: var(--ax-color-accent-500);
  color: var(--ax-color-neutral-0);
}

.ax-v2 .elementor .ax-card--orange .ax-href-discover,
.ax-v2 .elementor .ax-card--orange .ax-href-discover:hover,
.ax-scope .ax-card--orange .ax-href-discover,
.ax-scope .ax-card--orange .ax-href-discover:hover {
  color: var(--ax-color-accent-500) !important;
}

.ax-v2 .elementor .ax-card--orange-light .ax-card-icon,
.ax-scope .ax-card--orange-light .ax-card-icon {
  background-color: var(--ax-color-accent-50);
  color: var(--ax-color-accent-500);
}

.ax-v2 .elementor .ax-card--orange-light .ax-href-discover,
.ax-v2 .elementor .ax-card--orange-light .ax-href-discover:hover,
.ax-scope .ax-card--orange-light .ax-href-discover,
.ax-scope .ax-card--orange-light .ax-href-discover:hover {
  color: var(--ax-color-accent-500) !important;
}

/* ── Blue ── */
.ax-v2 .elementor .ax-card--blue .ax-card-icon,
.ax-scope .ax-card--blue .ax-card-icon {
  background-color: var(--ax-color-blue-500);
  color: var(--ax-color-neutral-0);
}

.ax-v2 .elementor .ax-card--blue .ax-href-discover,
.ax-v2 .elementor .ax-card--blue .ax-href-discover:hover,
.ax-scope .ax-card--blue .ax-href-discover,
.ax-scope .ax-card--blue .ax-href-discover:hover {
  color: var(--ax-color-blue-500) !important;
}

.ax-v2 .elementor .ax-card--blue-light .ax-card-icon,
.ax-scope .ax-card--blue-light .ax-card-icon {
  background-color: var(--ax-color-blue-50);
  color: var(--ax-color-blue-500);
}

.ax-v2 .elementor .ax-card--blue-light .ax-href-discover,
.ax-v2 .elementor .ax-card--blue-light .ax-href-discover:hover,
.ax-scope .ax-card--blue-light .ax-href-discover,
.ax-scope .ax-card--blue-light .ax-href-discover:hover {
  color: var(--ax-color-blue-500) !important;
}


/* ────────────────────────────────────────────────────────────
 * 9b. AX-CTA-CARD — Carte CTA dégradé indigo
 *
 *  Usage Elementor :
 *    Container racine  → ax-cta-card
 *    Icône principale  → ax-cta-card__icon-bg  (cercle grand)
 *    Icône secondaire  → ax-cta-card__icon-sm  (cercle petit, positionné)
 *    Titre             → texte blanc, géré par héritage
 *    Avatars wrap      → ax-cta-card__avatars
 *    Chaque avatar     → ax-cta-card__avatar   (sur le widget Image)
 *    Bouton CTA        → ax-btn  ax-btn-primary  (standard)
 * ──────────────────────────────────────────────────────────── */

/* ── Conteneur racine ── */
.ax-v2 .elementor .ax-cta-card,
.ax-scope .ax-cta-card {
  border-radius: 24px !important;
  background: linear-gradient(160deg, #5B9BFF 0%, #6B67CF 45%, #211D6D 100%) !important;
  padding: 40px 28px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  gap: 0 !important;
}

/* Voile de brillance */
.ax-v2 .elementor .ax-cta-card::before,
.ax-scope .ax-cta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  z-index: 0;
}

/* Tous les enfants directs au-dessus du voile */
.ax-v2 .elementor .ax-cta-card>*,
.ax-scope .ax-cta-card>* {
  position: relative;
  z-index: 1;
}

/* ── Cercle icône principal ── */
.ax-v2 .elementor .ax-cta-card__icon-bg,
.ax-scope .ax-cta-card__icon-bg {
  position: relative !important;
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  max-width: 72px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.15) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  margin: 0 auto 20px !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  --widgets-spacing: 0px !important;
  --widgets-spacing-row: 0px !important;
  --widgets-spacing-column: 0px !important;
}

/* Icône principale : .e-svg-base est enfant DIRECT de icon-bg (pas de wrapper intermédiaire) */
.ax-v2 .elementor .ax-cta-card__icon-bg>.e-svg-base:not(.ax-cta-card__icon-sm),
.ax-scope .ax-cta-card__icon-bg>.e-svg-base:not(.ax-cta-card__icon-sm) {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  flex: 0 0 32px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ax-v2 .elementor .ax-cta-card__icon-bg i,
.ax-scope .ax-cta-card__icon-bg i {
  font-size: 32px !important;
  color: #fff !important;
}

/* ── Cercle icône secondaire (badge overlay, abs en bas à droite du cercle) ── */
.ax-v2 .elementor .ax-cta-card__icon-sm,
.ax-scope .ax-cta-card__icon-sm {
  position: absolute !important;
  right: -8px !important;
  bottom: -6px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 3 !important;
  flex: none !important;
}

/* Wrapper interne du SVG secondaire */
.ax-v2 .elementor .ax-cta-card__icon-sm .e-svg-base,
.ax-v2 .elementor .ax-cta-card__icon-sm .elementor-widget-container,
.ax-scope .ax-cta-card__icon-sm .e-svg-base,
.ax-scope .ax-cta-card__icon-sm .elementor-widget-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
}

.ax-v2 .elementor .ax-cta-card__icon-sm i,
.ax-scope .ax-cta-card__icon-sm i {
  font-size: 18px !important;
  color: #fff !important;
}

/* ── SVG outline blanc (tous les SVG dans les deux cercles) ── */
.ax-v2 .elementor .ax-cta-card__icon-bg svg,
.ax-v2 .elementor .ax-cta-card__icon-sm svg,
.ax-scope .ax-cta-card__icon-bg svg,
.ax-scope .ax-cta-card__icon-sm svg {
  width: 28px !important;
  height: 28px !important;
  stroke: #ffffff !important;
  stroke-width: 1.5 !important;
  fill: none !important;
  display: block !important;
}

/* ── Avatars empilés ── */
.ax-v2 .elementor .ax-cta-card__avatars,
.ax-scope .ax-cta-card__avatars {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
  width: auto !important;
}

/* Widget image — annule width:100% d'Elementor, flex fixe */
.ax-v2 .elementor .ax-cta-card__avatars>.elementor-element,
.ax-scope .ax-cta-card__avatars>.elementor-element {
  width: auto !important;
  flex: 0 0 auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ax-v2 .elementor .ax-cta-card__avatars .elementor-widget-container,
.ax-scope .ax-cta-card__avatars .elementor-widget-container {
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Image circulaire avec chevauchement
 * Le margin-left négatif crée l'empilement.
 * justify-content:center sur le parent centre automatiquement
 * 3, 4, 5 ou 6 avatars sans aucun ajustement. */
.ax-v2 .elementor .ax-cta-card__avatars img,
.ax-scope .ax-cta-card__avatars img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: top center !important;
  border: 3px solid rgba(255, 255, 255, 0.7) !important;
  margin-left: -10px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  display: block !important;
}

/* Premier avatar : pas de marge négative */
.ax-v2 .elementor .ax-cta-card__avatars>.elementor-element:first-child img,
.ax-scope .ax-cta-card__avatars>.elementor-element:first-child img {
  margin-left: 0 !important;
}

/* ── Texte description ── */
.ax-v2 .elementor .ax-cta-card__desc,
.ax-scope .ax-cta-card__desc {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  line-height: 1.6 !important;
  margin-bottom: 28px !important;
}


/* ────────────────────────────────────────────────────────────
 * 10. TYPOGRAPHIE
 * ──────────────────────────────────────────────────────────── */

.ax-v2 .elementor .ax-text-muted,
.ax-scope .ax-text-muted {
  color: var(--ax-text-secondary);
}

.ax-v2 .elementor .ax-text-accent,
.ax-scope .ax-text-accent {
  color: var(--ax-color-accent-500);
}

.ax-v2 .elementor .ax-text-primary,
.ax-scope .ax-text-primary {
  color: var(--ax-color-primary-500);
}

.ax-v2 .elementor .ax-text-white,
.ax-scope .ax-text-white {
  color: var(--ax-color-neutral-0);
}

.ax-v2 .elementor .ax-heading-display,
.ax-scope .ax-heading-display {
  font-size: var(--ax-font-size-5xl);
  font-weight: var(--ax-font-weight-bold);
  line-height: var(--ax-line-height-tight);
  letter-spacing: var(--ax-letter-spacing-tight);
}

.ax-v2 .elementor .ax-heading-section,
.ax-scope .ax-heading-section {
  font-size: var(--ax-font-size-4xl);
  font-weight: var(--ax-font-weight-bold);
  line-height: var(--ax-line-height-tight);
}

.ax-v2 .elementor .ax-label-section,
.ax-scope .ax-label-section {
  font-size: var(--ax-font-size-xs);
  font-weight: var(--ax-font-weight-semibold);
  letter-spacing: var(--ax-letter-spacing-widest);
  text-transform: uppercase;
  color: var(--ax-color-accent-500);
}

/* ── Élévation — box-shadow depuis les tokens --ax-shadow-*
 * Usage : CSS Classes → ax-shadow-sm  (ou xs / md / lg / xl / 2xl / inner)
 * Applicable sur n'importe quel élément Elementor */
.ax-v2 .elementor .ax-shadow-none,
.ax-scope .ax-shadow-none {
  box-shadow: var(--ax-shadow-none) !important;
}

.ax-v2 .elementor .ax-shadow-xs,
.ax-scope .ax-shadow-xs {
  box-shadow: var(--ax-shadow-xs) !important;
}

.ax-v2 .elementor .ax-shadow-sm,
.ax-scope .ax-shadow-sm {
  box-shadow: var(--ax-shadow-sm) !important;
}

.ax-v2 .elementor .ax-shadow-md,
.ax-scope .ax-shadow-md {
  box-shadow: var(--ax-shadow-md) !important;
}

.ax-v2 .elementor .ax-shadow-lg,
.ax-scope .ax-shadow-lg {
  box-shadow: var(--ax-shadow-lg) !important;
}

.ax-v2 .elementor .ax-shadow-xl,
.ax-scope .ax-shadow-xl {
  box-shadow: var(--ax-shadow-xl) !important;
}

.ax-v2 .elementor .ax-shadow-2xl,
.ax-scope .ax-shadow-2xl {
  box-shadow: var(--ax-shadow-2xl) !important;
}

.ax-v2 .elementor .ax-shadow-inner,
.ax-scope .ax-shadow-inner {
  box-shadow: var(--ax-shadow-inner) !important;
}

/* ── Hauteur limitée — images et vidéos
 * Usage : CSS Classes → ax-h-25 / ax-h-50 / ax-h-75
 * Applique max-height en % de la hauteur du conteneur parent.
 * L'image/vidéo garde ses proportions (object-fit: cover ou contain). */
/* ax-h-* et ax-w-* sont redéfinis en fin de fichier avec body.ax-scope
 * pour gagner sur les max-width/height fixes des composants (ex: bandeau-video).
 * Ne pas dupliquer ici. → voir fin de fichier §15 */

/* ax-center — centre le contenu d'un bloc (texte + flex children)
 * Sur un conteneur Elementor : centre les enfants horizontalement
 * Sur un widget texte : centre l'alignement du texte */
.ax-v2 .elementor .ax-center,
.ax-scope .ax-center {
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ax-overline — texte chapeau réutilisable sur Hx, p, span
 * Usage Elementor : champ CSS Classes → ax-overline
 * Identique à ax-label-section mais bold + inline-block */
.ax-v2 .elementor .ax-overline,
.ax-scope .ax-overline {
  display: inline-block;
  font-size: var(--ax-font-size-xs);
  font-weight: var(--ax-font-weight-bold);
  letter-spacing: var(--ax-letter-spacing-widest);
  text-transform: uppercase;
  color: var(--ax-color-accent-500);
}


/* ax-href-discover — lien "Découvrir" avec icône flèche Tabler
 * Usage : CSS Classes → ax-href-discover  sur un lien (widget Bouton texte
 * ou Paragraphe avec lien)
 * L'icône ti-arrow-right apparaît après le texte via ::after */
.ax-v2 .elementor .ax-href-discover,
.ax-scope .ax-href-discover {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  text-decoration: none !important;
  transition: gap 0.2s ease !important;
}

.ax-v2 .elementor .ax-href-discover::after,
.ax-scope .ax-href-discover::after {
  font-family: 'tabler-icons' !important;
  content: '\ea1c' !important;
  /* ti-arrow-right */
  font-size: 1em !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

.ax-v2 .elementor .ax-href-discover:hover,
.ax-scope .ax-href-discover:hover {
  text-decoration: underline !important;
  gap: 10px !important;
  /* glisse légèrement la flèche */
}

.ax-v2 .elementor .ax-href-discover a,
.ax-v2 .elementor .ax-href-discover a:hover,
.ax-scope .ax-href-discover a,
.ax-scope .ax-href-discover a:hover {
  color: inherit !important;
  text-decoration: none !important;
}


/* ────────────────────────────────────────────────────────────
 * 10B. TITRES — TEXTE EN EXERGUE GRADIENT
 *
 * Usage dans h1/h2 (éditeur HTML du widget Titre Elementor) :
 *
 *   <strong> / <b>  → bleu-violet TOUJOURS, peu importe le fond
 *   <em>            → bleu-violet (fond clair) / violet-cyan (fond sombre)
 *   <u>             → orange-accent, text-decoration: none
 *
 * Classes utilitaires — sur n'importe quel <span> ou élément :
 *   .ax-grad-blue    → bleu #428BFE → violet #6B67CF
 *   .ax-grad-orange  → orange #F17431 → orange clair #F9A162
 *
 * Préfixe body.ax-scope : les pages sans design system ne sont
 * pas affectées.
 * ──────────────────────────────────────────────────────────── */

/* strong / b — bleu-violet TOUJOURS (fond ignoré) */
body.ax-scope .elementor h1 :is(strong, b),
body.ax-scope .elementor h2 :is(strong, b) {
  font-weight: inherit;
  background: linear-gradient(90deg, var(--ax-color-blue-500) 0%, var(--ax-color-primary-400) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* em — bleu-violet par défaut (fond clair) */
body.ax-scope .elementor h1 em,
body.ax-scope .elementor h2 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--ax-color-blue-500) 0%, var(--ax-color-primary-400) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* em — violet-cyan sur fonds sombres */
body.ax-scope .elementor :is(.ax-bg-sombre, .ax-bg-dark, .ax-bg-navy) h1 em,
body.ax-scope .elementor :is(.ax-bg-sombre, .ax-bg-dark, .ax-bg-navy) h2 em {
  background: linear-gradient(90deg, #6A5AFF 0%, #00D9FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* u — gradient orange accent, pas de soulignement */
body.ax-scope .elementor h1 u,
body.ax-scope .elementor h2 u {
  text-decoration: none;
  background: linear-gradient(90deg, #F17431 0%, #F9A162 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Classes utilitaires indépendantes ───────────────────────
 * Sur n'importe quel <span>, <a>, ou élément de texte :
 *   <span class="ax-grad-blue">mot en exergue</span>
 *   <span class="ax-grad-orange">mot en exergue</span>
 * ─────────────────────────────────────────────────────────── */
.ax-grad-blue {
  background: linear-gradient(90deg, var(--ax-color-blue-500) 0%, var(--ax-color-primary-400) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-style: normal;
}

.ax-grad-orange {
  background: linear-gradient(90deg, #F17431 0%, #F9A162 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-decoration: none;
}


/* ────────────────────────────────────────────────────────────
 * 11. RESPONSIVE
 * ──────────────────────────────────────────────────────────── */

/* Tablette ≤ 1024px */
@media (max-width: 1024px) {

  .ax-v2 .elementor .ax-grid-4,
  .ax-scope .ax-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
  }

  .ax-v2 .elementor .ax-grid-3,
  .ax-scope .ax-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
  }

  .ax-v2 .elementor .ax-section,
  .ax-scope .ax-section {
    padding-block: var(--ax-space-20);
  }
}

/* Mobile ≤ 768px */
@media (max-width: 768px) {

  .ax-v2 .elementor .ax-grid-2,
  .ax-v2 .elementor .ax-grid-3,
  .ax-v2 .elementor .ax-grid-4,
  .ax-v2 .elementor .ax-split-1-2,
  .ax-v2 .elementor .ax-split-2-1,
  .ax-v2 .elementor .ax-split-1-1,
  .ax-v2 .elementor .ax-split-4-6,
  .ax-v2 .elementor .ax-split-6-4,
  .ax-v2 .elementor .ax-split-1-3,
  .ax-v2 .elementor .ax-split-3-1,
  .ax-scope .ax-grid-2,
  .ax-scope .ax-grid-3,
  .ax-scope .ax-grid-4,
  .ax-scope .ax-split-1-2,
  .ax-scope .ax-split-2-1,
  .ax-scope .ax-split-1-1,
  .ax-scope .ax-split-4-6,
  .ax-scope .ax-split-6-4,
  .ax-scope .ax-split-1-3,
  .ax-scope .ax-split-3-1 {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .ax-v2 .elementor .ax-section,
  .ax-scope .ax-section {
    padding-block: var(--ax-space-16);
  }

  .ax-v2 .elementor .ax-section--sm,
  .ax-scope .ax-section--sm {
    padding-block: var(--ax-space-12);
  }

  .ax-v2 .elementor .ax-section--lg,
  .ax-scope .ax-section--lg {
    padding-block: var(--ax-space-20);
  }
}

/* Petit mobile ≤ 480px */
@media (max-width: 480px) {

  .ax-v2 .elementor .ax-btn.ax-btn-xl,
  .ax-scope .ax-btn.ax-btn-xl {
    padding: 14px 28px;
    font-size: var(--ax-font-size-base);
  }
}


/* ────────────────────────────────────────────────────────────
 * 12. COMPOSANTS GLOBAUX — TEMPLATES ELEMENTOR RÉUTILISABLES
 *
 *  CSS partagée par les composants sauvegardés dans
 *  Elementor → Mes Modèles. Chargée une seule fois ici,
 *  jamais dans le widget HTML lui-même.
 * ──────────────────────────────────────────────────────────── */

/* ── AX — Hero Video Mockup ───────────────────────────────── */

/* Wrapper — lévitation animée + ombre portée */
body.ax-scope .mockup-wrap {
  position: relative;
  z-index: 2;
  animation: axFloat 5.5s ease-in-out infinite;
  filter:
    drop-shadow(0 28px 56px rgba(33, 29, 109, .22)) drop-shadow(0 6px 12px rgba(0, 0, 0, .10));
}

@keyframes axFloat {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  30% {
    transform: translateY(-14px) rotate(.5deg);
  }

  70% {
    transform: translateY(-8px) rotate(-.3deg);
  }
}

/* Vidéo — arrondie, largeur fixe 320px (toutes tailles d'écran) */
body.ax-scope .bandeau-video {
  width: 100%;
  max-width: 320px !important;
  border-radius: var(--ax-radius-2xl);
  /* 24px */
  display: block;
}


/* Ombre portée au sol — animée en sync avec la lévitation */
body.ax-scope .mockup-shadow {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 295px;
  height: 32px;
  background: radial-gradient(ellipse, rgba(33, 29, 109, .22) 0%, transparent 70%);
  filter: blur(12px);
  animation: axShadowFloat 5.5s ease-in-out infinite;
  z-index: 1;
}

@keyframes axShadowFloat {

  0%,
  100% {
    transform: translateX(-50%) scaleX(1);
    opacity: .65;
  }

  30% {
    transform: translateX(-50%) scaleX(.78);
    opacity: .38;
  }

  70% {
    transform: translateX(-50%) scaleX(.88);
    opacity: .48;
  }
}

/* ── Hero Visual — base ───────────────────────────────────── */
body.ax-scope .hero-visual {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative;
}

/* ── Responsive hero-visual ───────────────────────────────────
 * Aligne sur axialys-home.html (maquette de référence) :
 *
 * ≤900px : grille hero → 1 colonne, vidéo AU-DESSUS du texte
 *          (la maquette collapse à 900px, pas 768px)
 * ≤480px : vidéo EN-DESSOUS, animation off, hauteur 300px
 *
 * Le collapse général de ax-split-* reste à 768px pour
 * toutes les autres sections — seul le hero use 900px.
 * ──────────────────────────────────────────────────────────── */

/* ≤900px — collapse spécifique hero */
@media (max-width: 900px) {

  /* Force la grille hero en 1 colonne dès 900px */
  body.ax-scope .ax-section--hero .ax-split-2-1,
  body.ax-scope .ax-section--hero .ax-split-4-6,
  body.ax-scope .ax-section--hero .ax-split-6-4,
  body.ax-scope .ax-section--hero .ax-split-1-1 {
    grid-template-columns: 1fr !important;
    gap: var(--ax-space-12) !important;
  }

  /* Vidéo remonte au-dessus du texte */
  body.ax-scope .hero-visual {
    order: -1 !important;
    width: 100% !important;
    justify-content: center !important;
  }

  body.ax-scope .mockup-shadow {
    display: none;
  }
}

/* ≤480px — vidéo repasse en-dessous, animation off, padding-bottom hero = 0 */
@media (max-width: 480px) {
  body.ax-scope .hero-visual {
    order: 0 !important;
  }

  /* Supprime le padding-bottom de la section hero (vidéo colle au bord) */
  body.ax-scope .elementor>section.e-con.ax-section--hero,
  body.ax-scope .ax-section--hero {
    padding-bottom: 0 !important;
  }

  body.ax-scope .mockup-wrap {
    height: 300px;
    overflow: hidden;
    animation: none;
    filter: none;
  }

  body.ax-scope .bandeau-video {
    border-radius: var(--ax-radius-xl);
  }
}


/* ── AX — Feature Pills ───────────────────────────────────── */

/* Wrapper — aligne les pills en ligne, retour à la ligne auto */
body.ax-scope .ax-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Pill — base */
body.ax-scope .ax-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(33, 29, 109, .10) !important;
  border-radius: var(--ax-radius-full) !important;
  padding: 8px 12px !important;
  font-size: 11px;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: var(--ax-color-neutral-700, #495057) !important;
  white-space: nowrap !important;
}

/* Dot coloré */
body.ax-scope .ax-pill-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

body.ax-scope .ax-pill-dot--navy {
  background: var(--ax-color-primary-400, #6B67CF);
}

body.ax-scope .ax-pill-dot--orange {
  background: var(--ax-color-accent-500, #F17431);
}

body.ax-scope .ax-pill-dot--blue {
  background: var(--ax-color-blue-500, #428BFE);
}

body.ax-scope .ax-pill-dot--green {
  background: var(--ax-color-success-500, #22C55E);
}

/* Icône Tabler à la place (ou en plus) du dot */
body.ax-scope .ax-pill [class^="ti-"],
body.ax-scope .ax-pill [class*=" ti-"] {
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}

/* Couleur de l'icône via modificateur sur le pill
   ⚠️ Bug corrigé : [class^="ti-"] seul ne matche que si "ti-xxx" est la
   TOUTE PREMIÈRE classe de l'attribut — jamais le cas avec le webfont
   Tabler, toujours écrit class="ti ti-xxx" (base "ti" + icône). Sans le
   [class*=" ti-"] ci-dessous (déjà présent sur la règle de taille au-
   dessus), ax-pill--navy/orange/blue/green ne coloraient jamais l'icône
   en usage réel. */
body.ax-scope .ax-pill--navy [class^="ti-"],
body.ax-scope .ax-pill--navy [class*=" ti-"] {
  color: var(--ax-color-primary-400, #6B67CF);
}

body.ax-scope .ax-pill--orange [class^="ti-"],
body.ax-scope .ax-pill--orange [class*=" ti-"] {
  color: var(--ax-color-accent-500, #F17431);
}

body.ax-scope .ax-pill--blue [class^="ti-"],
body.ax-scope .ax-pill--blue [class*=" ti-"] {
  color: var(--ax-color-blue-500, #428BFE);
}

body.ax-scope .ax-pill--green [class^="ti-"],
body.ax-scope .ax-pill--green [class*=" ti-"] {
  color: var(--ax-color-success-500, #22C55E);
}

/* ── AX — ICON COLOR  ax-icon--*  ─────────────────────────────
 * Colore n'importe quelle icône Tabler (<i class="ti ti-*">),
 * quel que soit le composant qui l'entoure (pill, badge, icon-list,
 * ou icône isolée dans du texte libre). À poser DIRECTEMENT sur
 * l'icône : <i class="ti ti-circle-check ax-icon--green">.
 *
 * Différence avec ax-pill 
 * ax-color--* : ceux-là ne colorent
 * l'icône que dans LEUR structure propre (ax-pill, Icon List
 * Elementor) — ax-icon--* fonctionne partout, y compris pour
 * reproduire un composant existant (pill, badge…) sans repartir de
 * la structure Elementor d'origine.
 *
 * Mêmes 7 couleurs que ax-color--* / ax-badge--*, mêmes tokens.
 * ──────────────────────────────────────────────────────────── */
body.ax-scope .ax-icon--navy {
  color: var(--ax-color-primary-400, #6B67CF) !important;
}

body.ax-scope .ax-icon--orange {
  color: var(--ax-color-accent-500, #F17431) !important;
}

body.ax-scope .ax-icon--blue {
  color: var(--ax-color-blue-500, #428BFE) !important;
}

body.ax-scope .ax-icon--green {
  color: var(--ax-color-success-500, #22C55E) !important;
}

body.ax-scope .ax-icon--yellow {
  color: var(--ax-color-warning-500, #F59E0B) !important;
}

body.ax-scope .ax-icon--red {
  color: var(--ax-color-error-500, #EF4444) !important;
}

body.ax-scope .ax-icon--gray {
  color: var(--ax-color-neutral-500, #ADB5BD) !important;
}


/* ── AX — Social Proof ────────────────────────────────────── */
/*
 * Structure cible :
 *
 *   Cas A — Widget HTML pur
 *     .ax-proof
 *       .ax-proof-avatars
 *         .ax-proof-avatar   ← enfant direct
 *         .ax-proof-avatar
 *       .ax-proof-text
 *
 *   Cas B — Composants Elementor (container wrapper automatique)
 *     .ax-proof
 *       .ax-proof-avatars
 *         .e-con             ← wrapper Elementor
 *           .ax-proof-avatar
 *         .e-con
 *           .ax-proof-avatar
 *       .ax-proof-text
 *
 *   Les deux sélecteurs coexistent sans conflit.
 */

/* ── Wrapper global : avatars + texte sur la même ligne ── */
body.ax-scope .ax-proof {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
  /* espace entre le groupe d'avatars et le texte */
  flex-wrap: nowrap !important;
}

/* ── Groupe d'avatars ── */
body.ax-scope .ax-proof-avatars {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-shrink: 0;
  gap: 0 !important;
  padding: 0 !important;
}

/* ── Empilement : enfant direct de .ax-proof-avatars ─────────
 * margin-left négatif + z-index sur le wrapper direct
 * (= .e-con Elementor ou .ax-proof-avatar en HTML pur).
 * Le z-index dégressif garantit que le 1er avatar est devant.
 * ──────────────────────────────────────────────────────────── */
body.ax-scope .ax-proof-avatars>* {
  margin-left: -10px !important;
  position: relative !important;
  /* nécessaire pour que z-index s'applique */
}

body.ax-scope .ax-proof-avatars>*:first-child {
  margin-left: 0 !important;
}

/* z-index croissant → le dernier avatar est devant (style LinkedIn) */
body.ax-scope .ax-proof-avatars>*:nth-child(1) {
  z-index: 1 !important;
}

body.ax-scope .ax-proof-avatars>*:nth-child(2) {
  z-index: 2 !important;
}

body.ax-scope .ax-proof-avatars>*:nth-child(3) {
  z-index: 3 !important;
}

body.ax-scope .ax-proof-avatars>*:nth-child(4) {
  z-index: 4 !important;
}

body.ax-scope .ax-proof-avatars>*:nth-child(5) {
  z-index: 5 !important;
}

body.ax-scope .ax-proof-avatars>*:nth-child(6) {
  z-index: 6 !important;
}

body.ax-scope .ax-proof-avatars>*:nth-child(7) {
  z-index: 7 !important;
}

body.ax-scope .ax-proof-avatars>*:nth-child(8) {
  z-index: 8 !important;
}

body.ax-scope .ax-proof-avatars>*:nth-child(9) {
  z-index: 9 !important;
}

body.ax-scope .ax-proof-avatars>*:nth-child(10) {
  z-index: 10 !important;
}

/* ── Avatar individuel ── */
body.ax-scope .ax-proof-avatar {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  border: 2.5px solid #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #fff !important;
  flex-shrink: 0 !important;
  position: relative !important;
  padding: 0 !important;
  text-align: center !important;
  overflow: hidden !important;
}

/* Texte centré à l'intérieur (widget Titre/Texte Elementor) */
body.ax-scope .ax-proof-avatar * {
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Couleurs automatiques par position (10 slots) ───────────
 * Cas A : avatar enfant direct  →  sélecteur direct
 * Cas B : avatar dans wrapper Elementor  →  sélecteur descendant
 * ──────────────────────────────────────────────────────────── */

/* 1 — Violet-navy (brand primary) */
body.ax-scope .ax-proof-avatars>.ax-proof-avatar:nth-child(1),
body.ax-scope .ax-proof-avatars>*:nth-child(1) .ax-proof-avatar {
  background: linear-gradient(135deg, #6B67CF, #211D6D) !important;
}

/* 2 — Orange (brand accent) */
body.ax-scope .ax-proof-avatars>.ax-proof-avatar:nth-child(2),
body.ax-scope .ax-proof-avatars>*:nth-child(2) .ax-proof-avatar {
  background: linear-gradient(135deg, #F58840, #F17431) !important;
}

/* 3 — Bleu (brand blue) */
body.ax-scope .ax-proof-avatars>.ax-proof-avatar:nth-child(3),
body.ax-scope .ax-proof-avatars>*:nth-child(3) .ax-proof-avatar {
  background: linear-gradient(135deg, #428BFE, #0D58D4) !important;
}

/* 4 — Lavande (primary-300 → primary-400) */
body.ax-scope .ax-proof-avatars>.ax-proof-avatar:nth-child(4),
body.ax-scope .ax-proof-avatars>*:nth-child(4) .ax-proof-avatar {
  background: linear-gradient(135deg, #9895E0, #6B67CF) !important;
}

/* 5 — Indigo profond */
body.ax-scope .ax-proof-avatars>.ax-proof-avatar:nth-child(5),
body.ax-scope .ax-proof-avatars>*:nth-child(5) .ax-proof-avatar {
  background: linear-gradient(135deg, #3B2EAA, #141345) !important;
}

/* 6 — Orange brûlé */
body.ax-scope .ax-proof-avatars>.ax-proof-avatar:nth-child(6),
body.ax-scope .ax-proof-avatars>*:nth-child(6) .ax-proof-avatar {
  background: linear-gradient(135deg, #F97316, #C2410C) !important;
}

/* 7 — Bleu ciel */
body.ax-scope .ax-proof-avatars>.ax-proof-avatar:nth-child(7),
body.ax-scope .ax-proof-avatars>*:nth-child(7) .ax-proof-avatar {
  background: linear-gradient(135deg, #38BDF8, #0284C7) !important;
}

/* 8 — Violet doux */
body.ax-scope .ax-proof-avatars>.ax-proof-avatar:nth-child(8),
body.ax-scope .ax-proof-avatars>*:nth-child(8) .ax-proof-avatar {
  background: linear-gradient(135deg, #A78BFA, #7C3AED) !important;
}

/* 9 — Emeraude */
body.ax-scope .ax-proof-avatars>.ax-proof-avatar:nth-child(9),
body.ax-scope .ax-proof-avatars>*:nth-child(9) .ax-proof-avatar {
  background: linear-gradient(135deg, #34D399, #059669) !important;
}

/* 10 — Ardoise neutre */
body.ax-scope .ax-proof-avatars>.ax-proof-avatar:nth-child(10),
body.ax-scope .ax-proof-avatars>*:nth-child(10) .ax-proof-avatar {
  background: linear-gradient(135deg, #94A3B8, #475569) !important;
}

/* ── Classes manuelles — forcent une couleur indépendamment de la position ── */
body.ax-scope .ax-proof-avatar--navy {
  background: linear-gradient(135deg, #6B67CF, #211D6D) !important;
}

body.ax-scope .ax-proof-avatar--orange {
  background: linear-gradient(135deg, #F58840, #F17431) !important;
}

body.ax-scope .ax-proof-avatar--blue {
  background: linear-gradient(135deg, #428BFE, #0D58D4) !important;
}

body.ax-scope .ax-proof-avatar--light {
  background: linear-gradient(135deg, #9895E0, #6B67CF) !important;
}

body.ax-scope .ax-proof-avatar--green {
  background: linear-gradient(135deg, #4ADE80, #22C55E) !important;
}

/* ── Texte social proof ── */
body.ax-scope .ax-proof-text {
  font-size: 13px !important;
  color: #868E96 !important;
  line-height: 1.4 !important;
  flex-shrink: 1;
  /* margin et padding laissés libres — gérés via Elementor */
}

body.ax-scope .ax-proof-text strong,
body.ax-scope .ax-proof-text b {
  color: #212529 !important;
  font-weight: 600 !important;
}


/* ── AX — Typing Animation ────────────────────────────────── */

/* Curseur clignotant orange */
body.ax-scope .ax-typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--ax-color-accent-500);
  /* #F17431 */
  margin-left: 2px;
  vertical-align: text-bottom;
  border-radius: 1px;
  animation: axTypingCursorBlink 0.85s step-end infinite;
}

@keyframes axTypingCursorBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* Zone de texte animée — inline pour ne pas casser le flux */
body.ax-scope .ax-typing-display {
  display: inline;
}


/* ────────────────────────────────────────────────────────────
 * 13. AX — SOLUTIONS TABS (segmented control style Apple)
 *
 * Structure DOM réelle (Elementor Atomic) :
 *   .e-tabs-base.ax-solutions-tabs        ← ax-solutions-tabs est ICI (Onglets)
 *     .e-tabs-menu-base
 *       button.e-tab-base
 *         span.e-paragraph-base[data-icon]
 *           i.ti.ti-headset               ← injecté par axialys-components.js
 *           "Service Client"
 *
 * Elementor : ajouter ax-solutions-tabs dans CSS Classes
 *             de l'élément Onglets (e-tabs-base), pas le menu
 * Icônes    : data-icon="ti-headset" dans Attributs de chaque
 *             Span de texte du Tab trigger
 * ──────────────────────────────────────────────────────────── */

/* — Conteneur Onglets : centre la barre horizontalement */
body.ax-scope .e-tabs-base.ax-solutions-tabs {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* — Barre : ax-solutions-tabs est sur e-tabs-base (parent Onglets) */
body.ax-scope .e-tabs-base.ax-solutions-tabs .e-tabs-menu-base {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  align-self: center !important;
  /* empêche l'étirement sur toute la largeur */
  gap: 0 !important;
  background: #F1F0FB !important;
  border-radius: 9999px !important;
  padding: 4px !important;
  margin-block: 32px !important;
  width: fit-content !important;
  /* colle au contenu des boutons */
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* — Sliding indicator injecté par axialys-components.js */
body.ax-scope .e-tabs-base.ax-solutions-tabs .e-tabs-menu-base .ax-tab-indicator {
  position: absolute !important;
  top: 4px !important;
  bottom: 4px !important;
  border-radius: 9999px !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.11), 0 0.5px 2px rgba(0, 0, 0, 0.07) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transition:
    left 0.40s cubic-bezier(0.34, 1.56, 0.64, 1),
    width 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* — Bouton tab : reset styles e-con Elementor */
body.ax-scope .e-tabs-base.ax-solutions-tabs .e-tab-base {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  /* 1 seul enfant : le span */
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 22px !important;
  border-radius: 9999px !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--ax-color-neutral-500, #ADB5BD) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  min-width: 90px !important;
  width: auto !important;
  flex-shrink: 0 !important;
  transition: color 0.22s !important;
  -webkit-font-smoothing: antialiased;
  margin: 0 !important;
}

/* — Span = conteneur icône + texte, empilés en colonne */
body.ax-scope .e-tabs-base.ax-solutions-tabs .e-tab-base>span {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  line-height: 1.2 !important;
}

/* — Icône Tabler dans le span */
body.ax-scope .e-tabs-base.ax-solutions-tabs .e-tab-base>span>i.ti {
  font-size: 22px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  color: inherit !important;
}

/* — Etat actif */
body.ax-scope .e-tabs-base.ax-solutions-tabs .e-tab-base.e--selected {
  color: var(--ax-color-primary-500) !important;
  font-weight: 600 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* — Fallback sans JS : fond blanc sur le bouton actif */
body.ax-scope .e-tabs-base.ax-solutions-tabs .e-tabs-menu-base:not(.ax-indicator-ready) .e-tab-base.e--selected {
  background: #FFFFFF !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.11), 0 0.5px 2px rgba(0, 0, 0, 0.07) !important;
}

/* — Hover */
body.ax-scope .e-tabs-base.ax-solutions-tabs .e-tab-base:hover:not(.e--selected) {
  background: rgba(33, 29, 109, 0.06) !important;
  color: var(--ax-color-primary-500) !important;
}

/* — Fade-in du panel actif */
body.ax-scope .e-tabs-content-area-base:has(+ *) .e-tab-content-base.e--selected,
body.ax-scope .e-tab-content-base.e--selected {
  animation: axSolutionsTabFade 0.22s ease;
}

@keyframes axSolutionsTabFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* — Responsive ≤ 900px : scroll horizontal, une seule ligne */
@media (max-width: 900px) {

  /* Parent : PAS d'overflow ici — seule la barre scroll, pas les panels */
  body.ax-scope .e-tabs-base.ax-solutions-tabs {
    overflow: visible !important;
    align-items: stretch !important;
  }

  /* La barre devient son propre scroll container, pleine largeur */
  body.ax-scope .e-tabs-base.ax-solutions-tabs .e-tabs-menu-base {
    display: flex !important;
    /* block-level : se limite à la largeur parent */
    flex-wrap: nowrap !important;
    width: 100% !important;
    /* s'arrête au bord du parent = bord viewport */
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    justify-content: flex-start !important;
    align-self: auto !important;
    gap: 0 !important;
    padding: 4px !important;
    border-radius: 9999px !important;
  }

  body.ax-scope .e-tabs-base.ax-solutions-tabs .e-tabs-menu-base::-webkit-scrollbar {
    display: none !important;
  }

  /* Boutons : taille identique à la maquette, pas de réduction */
  body.ax-scope .e-tabs-base.ax-solutions-tabs .e-tab-base {
    padding: 12px 18px !important;
    min-width: 82px !important;
    font-size: 11.5px !important;
    flex-shrink: 0 !important;
  }

  body.ax-scope .e-tabs-base.ax-solutions-tabs .e-tab-base>span>i.ti {
    font-size: 20px !important;
  }
}


/* ────────────────────────────────────────────────────────────
 * 9b. AX — SOLUTIONS TABS variante inline (picto + texte sur une ligne)
 *
 * Ajouter ax-solutions-tabs--inline sur le même élément Onglets
 * que ax-solutions-tabs.
 *
 * Exemple :  ax-solutions-tabs  ax-solutions-tabs--inline
 * ──────────────────────────────────────────────────────────── */

/* Span : icône + texte en ligne */
body.ax-scope .e-tabs-base.ax-solutions-tabs.ax-solutions-tabs--inline .e-tab-base>span {
  flex-direction: row !important;
  gap: 7px !important;
}

/* Police 16px, padding horizontal un peu plus aéré */
body.ax-scope .e-tabs-base.ax-solutions-tabs.ax-solutions-tabs--inline .e-tab-base {
  font-size: 16px !important;
  padding: 10px 24px !important;
}

/* Icône légèrement plus petite pour l'alignement inline */
body.ax-scope .e-tabs-base.ax-solutions-tabs.ax-solutions-tabs--inline .e-tab-base>span>i.ti {
  font-size: 20px !important;
}

/* Barre inline : bordure subtile */
body.ax-scope .e-tabs-base.ax-solutions-tabs.ax-solutions-tabs--inline .e-tabs-menu-base {
  border: 1px solid rgba(33, 29, 109, 0.12) !important;
}

/* Indicator : blanc opaque + ombre (identique au mode défaut) */
body.ax-scope .e-tabs-base.ax-solutions-tabs.ax-solutions-tabs--inline .e-tabs-menu-base .ax-tab-indicator {
  background: #FFFFFF !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.11), 0 0.5px 2px rgba(0, 0, 0, 0.07) !important;
}

/* Responsive ≤ 900px */
@media (max-width: 900px) {
  body.ax-scope .e-tabs-base.ax-solutions-tabs.ax-solutions-tabs--inline .e-tab-base {
    font-size: 14px !important;
    padding: 10px 18px !important;
  }

  body.ax-scope .e-tabs-base.ax-solutions-tabs.ax-solutions-tabs--inline .e-tab-base>span>i.ti {
    font-size: 18px !important;
  }
}


/* ────────────────────────────────────────────────────────────
 * 9c. AX — SOLUTIONS TABS variante dark (fond navy)
 *
 * Ajouter ax-solutions-tabs--dark sur le même élément Onglets
 * que ax-solutions-tabs.
 *
 * Exemple :  ax-solutions-tabs  ax-solutions-tabs--dark
 * ──────────────────────────────────────────────────────────── */

/* Fond de la barre */
body.ax-scope .e-tabs-base.ax-solutions-tabs.ax-solutions-tabs--dark .e-tabs-menu-base {
  background: var(--ax-color-primary-500) !important;
}

/* Indicator : pilule blanche pleine sur fond navy */
body.ax-scope .e-tabs-base.ax-solutions-tabs.ax-solutions-tabs--dark .e-tabs-menu-base .ax-tab-indicator {
  background: #FFFFFF !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18), 0 0.5px 2px rgba(0, 0, 0, 0.12) !important;
}

/* Tabs inactifs : blanc à 50% — lisible sans écraser l'actif */
body.ax-scope .e-tabs-base.ax-solutions-tabs.ax-solutions-tabs--dark .e-tab-base {
  color: rgba(255, 255, 255, 0.50) !important;
}

/* Tab actif : texte navy sur pill blanc */
body.ax-scope .e-tabs-base.ax-solutions-tabs.ax-solutions-tabs--dark .e-tab-base.e--selected {
  color: var(--ax-color-primary-500) !important;
}

/* Fallback sans JS : fond blanc + texte navy sur le bouton actif */
body.ax-scope .e-tabs-base.ax-solutions-tabs.ax-solutions-tabs--dark .e-tabs-menu-base:not(.ax-indicator-ready) .e-tab-base.e--selected {
  background: #FFFFFF !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18), 0 0.5px 2px rgba(0, 0, 0, 0.12) !important;
}

/* Hover */
body.ax-scope .e-tabs-base.ax-solutions-tabs.ax-solutions-tabs--dark .e-tab-base:hover:not(.e--selected) {
  background: rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.80) !important;
}


/* ────────────────────────────────────────────────────────────
 * 14. AX-DECK — Animation pile de cards (stack rotatif)
 *
 * Usage Elementor :
 *   Bloc Div parent  → CSS Classes : ax-deck
 *   Enfants          : widgets Image (autant que souhaité)
 *
 * Le JS (axialys-components.js) gère l'animation automatique.
 * Si l'ax-deck est dans un onglet Elementor, l'animation
 * démarre/stoppe selon l'onglet actif.
 * ──────────────────────────────────────────────────────────── */

/* — Conteneur */
.ax-scope .ax-deck {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* — Cartes (enfants directs) */
.ax-scope .ax-deck>* {
  position: absolute !important;
  width: min(100%, 340px) !important;
  height: auto !important;
  border-radius: 14px !important;
  box-shadow:
    0 16px 40px rgba(33, 29, 109, 0.13),
    0 2px 8px rgba(33, 29, 109, 0.07),
    0 0 0 1px rgba(33, 29, 109, 0.05) !important;
  will-change: transform, opacity;
  display: block !important;
}

/* — Responsive ≤ 768px */
@media (max-width: 768px) {
  .ax-scope .ax-deck {
    min-height: 260px;
  }
}


/* ────────────────────────────────────────────────────────────
 * 14. AX — IA QUALIFICATION CARD
 *
 * Composant autonome — safe multi-instance (aucun ID).
 * Animation gérée par axialys-components.js.
 *
 * Usage Elementor : widget HTML → coller le bloc
 *   <div class="ax-ia-qual-card"> … </div>
 * ──────────────────────────────────────────────────────────── */

.ax-ia-qual-card {
  background: #fff;
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow:
    0 12px 40px rgba(33, 29, 109, 0.11),
    0 2px 8px rgba(33, 29, 109, 0.06),
    0 0 0 1px rgba(33, 29, 109, 0.05);
  width: min(100%, 340px);
  font-size: 13px;
  color: #1e1b4b;
  overflow: hidden;
}

.ax-ia-qual__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.ax-ia-qual__section-title {
  font-weight: 700;
  font-size: 13px;
  color: #1e1b4b;
}

.ax-ia-qual__plus {
  width: 22px;
  height: 22px;
  border: 1.5px solid #ccc;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #bbb;
  line-height: 1;
  flex-shrink: 0;
}

.ax-ia-qual__divider {
  border: none;
  border-top: 1px solid #f0edf8;
  margin: 14px 0;
}

.ax-ia-qual__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ax-ia-qual__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 4px;
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.2;
}

.ax-ia-qual__tag-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  flex-shrink: 0;
}

.ax-ia-qual__tag--blue {
  background: #dbeafe;
  color: #1e40af;
}

.ax-ia-qual__tag--blue .ax-ia-qual__tag-icon {
  background: #93c5fd;
}

.ax-ia-qual__tag--pink {
  background: #fce7f3;
  color: #9d174d;
}

.ax-ia-qual__tag--pink .ax-ia-qual__tag-icon {
  background: #f9a8d4;
}

.ax-ia-qual__tag--green {
  background: #dcfce7;
  color: #166534;
}

.ax-ia-qual__tag--green .ax-ia-qual__tag-icon {
  background: #86efac;
}

.ax-ia-qual__tag--orange {
  background: #fef9c3;
  color: #854d0e;
}

.ax-ia-qual__tag--orange .ax-ia-qual__tag-icon {
  background: #fde68a;
}

.ax-ia-qual__tag--anim {
  opacity: 0;
  transform: scale(0.4) rotate(-12deg);
}

@keyframes ax-ia-qual-tag-in {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(-12deg);
  }

  40% {
    opacity: 1;
    transform: scale(1.28) rotate(4deg);
  }

  65% {
    transform: scale(0.91) rotate(-1deg);
  }

  82% {
    transform: scale(1.06);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.ax-ia-spark {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  animation: ax-ia-spark-fly 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes ax-ia-spark-fly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0);
  }
}


/* ────────────────────────────────────────────────────────────
 * 14c. AX — CALLBOT IA WIDGET (gauche) + CHAT SLIDES (droite)
 *
 * Widget téléphone : pulse orange, visualiseur barres animées.
 * Chat slides : bouceIn / pushUp, déclenchés par JS (initCallbot).
 *
 * .callbot-number a — reset du style de lien (pas de bleu/souligné).
 * ──────────────────────────────────────────────────────────── */

/* ── Widget téléphone (gauche) ── */
.ax-scope .callbot-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 48px 32px;
  border-radius: var(--ax-radius-2xl);
  background: #fff;
  border: 1px solid rgba(33, 29, 109, 0.07);
  box-shadow: 0 8px 48px rgba(33, 29, 109, 0.07), 0 2px 8px rgba(33, 29, 109, 0.04);
  min-height: 370px;
}

.ax-scope .callbot-pulse-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ax-scope .callbot-pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(241, 116, 49, 0.18);
  animation: ax-callbot-pulse 2s ease-out infinite;
}

.ax-scope .callbot-pulse-ring:nth-child(2) {
  animation-delay: 0.7s;
}

.ax-scope .callbot-pulse-ring:nth-child(3) {
  animation-delay: 1.4s;
}

@keyframes ax-callbot-pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.ax-scope .callbot-phone-btn {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--ax-color-accent-500);
  box-shadow: 0 8px 24px rgba(241, 116, 49, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
}

.ax-scope .callbot-status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
}

.ax-scope .callbot-number {
  font-size: 22px;
  font-weight: 700;
  color: var(--ax-color-primary-500);
  letter-spacing: 0.01em;
}

/* Reset lien téléphone — pas de bleu ni souligné */
.ax-scope .callbot-number a,
.ax-scope .callbot-number a:visited,
.ax-scope .callbot-number a:hover {
  color: inherit !important;
  text-decoration: none !important;
}

.ax-scope .callbot-visualizer {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 32px;
}

.ax-scope .callbot-bar {
  width: 4px;
  border-radius: 2px;
  background: var(--ax-color-accent-500);
  animation: ax-callbot-bar 1.1s ease-in-out infinite alternate;
}

.ax-scope .callbot-bar:nth-child(1) {
  height: 8px;
  animation-duration: 0.9s;
  animation-delay: 0s;
}

.ax-scope .callbot-bar:nth-child(2) {
  height: 18px;
  animation-duration: 1.1s;
  animation-delay: 0.1s;
}

.ax-scope .callbot-bar:nth-child(3) {
  height: 26px;
  animation-duration: 0.75s;
  animation-delay: 0.2s;
}

.ax-scope .callbot-bar:nth-child(4) {
  height: 14px;
  animation-duration: 1.2s;
  animation-delay: 0.05s;
}

.ax-scope .callbot-bar:nth-child(5) {
  height: 30px;
  animation-duration: 0.85s;
  animation-delay: 0.15s;
}

.ax-scope .callbot-bar:nth-child(6) {
  height: 20px;
  animation-duration: 1.0s;
  animation-delay: 0.3s;
}

.ax-scope .callbot-bar:nth-child(7) {
  height: 12px;
  animation-duration: 0.95s;
  animation-delay: 0.08s;
}

.ax-scope .callbot-bar:nth-child(8) {
  height: 24px;
  animation-duration: 1.15s;
  animation-delay: 0.22s;
}

.ax-scope .callbot-bar:nth-child(9) {
  height: 8px;
  animation-duration: 0.8s;
  animation-delay: 0.12s;
}

@keyframes ax-callbot-bar {
  from {
    transform: scaleY(0.25);
    opacity: 0.5;
  }

  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* ── Chat slides (droite) ── */
.ax-scope .callbot-chat-zone {
  position: relative;
  height: 140px;
  overflow: hidden;
  margin-bottom: 28px;
}

.ax-scope .callbot-chat-slide {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(110%);
  pointer-events: none;
}

.ax-scope .callbot-chat-slide img {
  width: auto;
  max-width: 100%;
  display: block;
}

.ax-scope .callbot-chat-slide.active {
  animation: ax-chat-bounce-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.ax-scope .callbot-chat-slide.exiting {
  animation: ax-chat-push-up 0.42s cubic-bezier(0.55, 0, 0.55, 0) forwards;
}

@keyframes ax-chat-bounce-in {
  from {
    opacity: 1;
    transform: translateY(110%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ax-chat-push-up {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-65%);
  }
}


/* ────────────────────────────────────────────────────────────
 * 14b. AX — CTI ANIMATION
 *
 * Compose avec data-class Elementor :
 *   data-class="cti-interfaces"  → wrapper images (gauche)
 *   data-class="cti-iface"       → chaque image
 *   data-class="cti-logo-zone"   → wrapper logos (droite)
 *   data-class="cti-logo"        → chaque logo
 *
 * Le texte typing cible un élément avec data-class="cti-heading-dynamic"
 * et le caret est injecté par JS (class="cti-heading-caret").
 * Controller : axialys-components.js — initCTI()
 * ──────────────────────────────────────────────────────────── */

/* ── Images interface (gauche) ── */
.ax-scope [data-class="cti-interfaces"],
.ax-scope .cti-interfaces {
  position: relative;
  height: 100%;
}

.ax-scope [data-class="cti-iface"],
.ax-scope .cti-iface {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.ax-scope [data-class="cti-iface"].ax-cti-active,
.ax-scope .cti-iface.ax-cti-active {
  opacity: 1;
}

.ax-scope [data-class="cti-iface"] img,
.ax-scope .cti-iface img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* ── Logos (droite) ── */
.ax-scope [data-class="cti-logo-zone"],
.ax-scope .cti-logo-zone {
  position: relative;
  height: 52px;
  margin-bottom: 28px;
}

.ax-scope [data-class="cti-logo"],
.ax-scope .cti-logo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
  display: flex;
  align-items: center;
}

.ax-scope [data-class="cti-logo"].ax-cti-active,
.ax-scope .cti-logo.ax-cti-active {
  opacity: 1;
}

.ax-scope [data-class="cti-logo"] img,
.ax-scope .cti-logo img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* ── Heading typing (droite) ── */
.ax-scope [data-class="cti-heading-zone"],
.ax-scope .cti-heading-zone {
  margin-bottom: 20px;
}

.ax-scope [data-class="cti-heading-fixed"],
.ax-scope .cti-heading-fixed {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.45);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.ax-scope [data-class="cti-heading-dynamic"],
.ax-scope .cti-heading-dynamic {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: var(--ax-color-primary-500);
  min-height: 1.25em;
  line-height: 1.25;
}

.ax-cti-caret {
  display: inline-block;
  color: var(--ax-color-accent-500);
  animation: ax-caret-blink 0.75s step-end infinite;
  margin-left: 1px;
}

@keyframes ax-caret-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}


/* ────────────────────────────────────────────────────────────
 * 15. UTILITAIRES COULEUR — ax-color-* / ax-bg-* / ax-text-*
 *
 * Classes utilitaires pour appliquer directement les couleurs
 * de la charte Axialys via CSS Classes Elementor.
 *
 * USAGE
 *   ax-bg-primary-500    → background-color navy principal
 *   ax-text-accent-500   → color orange principal
 *   ax-color-blue-100    → color bleu clair (texte)
 *   ax-border-primary    → border-color navy (token sémantique)
 *
 * PALETTES DISPONIBLES
 *   primary   (navy)    — 50 → 900
 *   accent    (orange)  — 50 → 900
 *   blue                — 50, 100, 500, 700
 *   neutral             — 0, 50, 100 → 900, 1000
 *   success             — 50, 100, 500, 700
 *   warning             — 50, 100, 500, 700
 *   error               — 50, 100, 500, 700
 *
 * MODIFICATEURS SÉMANTIQUES (alias)
 *   ax-bg-brand         → primary-500
 *   ax-bg-cta           → accent-500
 *   ax-text-brand       → primary-500
 *   ax-text-cta         → accent-500
 *   ax-text-on-dark     → neutral-0 (blanc)
 * ──────────────────────────────────────────────────────────── */

/* ── PRIMARY (navy) ── */
.ax-scope .ax-bg-primary-50 {
  background-color: var(--ax-color-primary-50) !important;
}

.ax-scope .ax-bg-primary-100 {
  background-color: var(--ax-color-primary-100) !important;
}

.ax-scope .ax-bg-primary-200 {
  background-color: var(--ax-color-primary-200) !important;
}

.ax-scope .ax-bg-primary-300 {
  background-color: var(--ax-color-primary-300) !important;
}

.ax-scope .ax-bg-primary-400 {
  background-color: var(--ax-color-primary-400) !important;
}

.ax-scope .ax-bg-primary-500 {
  background-color: var(--ax-color-primary-500) !important;
}

.ax-scope .ax-bg-primary-600 {
  background-color: var(--ax-color-primary-600) !important;
}

.ax-scope .ax-bg-primary-700 {
  background-color: var(--ax-color-primary-700) !important;
}

.ax-scope .ax-bg-primary-800 {
  background-color: var(--ax-color-primary-800) !important;
}

.ax-scope .ax-bg-primary-900 {
  background-color: var(--ax-color-primary-900) !important;
}

.ax-scope .ax-text-primary-50 {
  color: var(--ax-color-primary-50) !important;
}

.ax-scope .ax-text-primary-100 {
  color: var(--ax-color-primary-100) !important;
}

.ax-scope .ax-text-primary-200 {
  color: var(--ax-color-primary-200) !important;
}

.ax-scope .ax-text-primary-300 {
  color: var(--ax-color-primary-300) !important;
}

.ax-scope .ax-text-primary-400 {
  color: var(--ax-color-primary-400) !important;
}

.ax-scope .ax-text-primary-500 {
  color: var(--ax-color-primary-500) !important;
}

.ax-scope .ax-text-primary-600 {
  color: var(--ax-color-primary-600) !important;
}

.ax-scope .ax-text-primary-700 {
  color: var(--ax-color-primary-700) !important;
}

.ax-scope .ax-text-primary-800 {
  color: var(--ax-color-primary-800) !important;
}

.ax-scope .ax-text-primary-900 {
  color: var(--ax-color-primary-900) !important;
}

/* ── ACCENT (orange) ── */
.ax-scope .ax-bg-accent-50 {
  background-color: var(--ax-color-accent-50) !important;
}

.ax-scope .ax-bg-accent-100 {
  background-color: var(--ax-color-accent-100) !important;
}

.ax-scope .ax-bg-accent-200 {
  background-color: var(--ax-color-accent-200) !important;
}

.ax-scope .ax-bg-accent-300 {
  background-color: var(--ax-color-accent-300) !important;
}

.ax-scope .ax-bg-accent-400 {
  background-color: var(--ax-color-accent-400) !important;
}

.ax-scope .ax-bg-accent-500 {
  background-color: var(--ax-color-accent-500) !important;
}

.ax-scope .ax-bg-accent-600 {
  background-color: var(--ax-color-accent-600) !important;
}

.ax-scope .ax-bg-accent-700 {
  background-color: var(--ax-color-accent-700) !important;
}

.ax-scope .ax-bg-accent-800 {
  background-color: var(--ax-color-accent-800) !important;
}

.ax-scope .ax-bg-accent-900 {
  background-color: var(--ax-color-accent-900) !important;
}

.ax-scope .ax-text-accent-50 {
  color: var(--ax-color-accent-50) !important;
}

.ax-scope .ax-text-accent-100 {
  color: var(--ax-color-accent-100) !important;
}

.ax-scope .ax-text-accent-200 {
  color: var(--ax-color-accent-200) !important;
}

.ax-scope .ax-text-accent-300 {
  color: var(--ax-color-accent-300) !important;
}

.ax-scope .ax-text-accent-400 {
  color: var(--ax-color-accent-400) !important;
}

.ax-scope .ax-text-accent-500 {
  color: var(--ax-color-accent-500) !important;
}

.ax-scope .ax-text-accent-600 {
  color: var(--ax-color-accent-600) !important;
}

.ax-scope .ax-text-accent-700 {
  color: var(--ax-color-accent-700) !important;
}

.ax-scope .ax-text-accent-800 {
  color: var(--ax-color-accent-800) !important;
}

.ax-scope .ax-text-accent-900 {
  color: var(--ax-color-accent-900) !important;
}

/* ── BLUE ── */
.ax-scope .ax-bg-blue-50 {
  background-color: var(--ax-color-blue-50) !important;
}

.ax-scope .ax-bg-blue-100 {
  background-color: var(--ax-color-blue-100) !important;
}

.ax-scope .ax-bg-blue-500 {
  background-color: var(--ax-color-blue-500) !important;
}

.ax-scope .ax-bg-blue-700 {
  background-color: var(--ax-color-blue-700) !important;
}

.ax-scope .ax-text-blue-50 {
  color: var(--ax-color-blue-50) !important;
}

.ax-scope .ax-text-blue-100 {
  color: var(--ax-color-blue-100) !important;
}

.ax-scope .ax-text-blue-500 {
  color: var(--ax-color-blue-500) !important;
}

.ax-scope .ax-text-blue-700 {
  color: var(--ax-color-blue-700) !important;
}

/* ── NEUTRAL ── */
.ax-scope .ax-bg-neutral-0 {
  background-color: var(--ax-color-neutral-0) !important;
}

.ax-scope .ax-bg-neutral-50 {
  background-color: var(--ax-color-neutral-50) !important;
}

.ax-scope .ax-bg-neutral-100 {
  background-color: var(--ax-color-neutral-100) !important;
}

.ax-scope .ax-bg-neutral-200 {
  background-color: var(--ax-color-neutral-200) !important;
}

.ax-scope .ax-bg-neutral-300 {
  background-color: var(--ax-color-neutral-300) !important;
}

.ax-scope .ax-bg-neutral-400 {
  background-color: var(--ax-color-neutral-400) !important;
}

.ax-scope .ax-bg-neutral-500 {
  background-color: var(--ax-color-neutral-500) !important;
}

.ax-scope .ax-bg-neutral-600 {
  background-color: var(--ax-color-neutral-600) !important;
}

.ax-scope .ax-bg-neutral-700 {
  background-color: var(--ax-color-neutral-700) !important;
}

.ax-scope .ax-bg-neutral-800 {
  background-color: var(--ax-color-neutral-800) !important;
}

.ax-scope .ax-bg-neutral-900 {
  background-color: var(--ax-color-neutral-900) !important;
}

.ax-scope .ax-bg-neutral-1000 {
  background-color: var(--ax-color-neutral-1000) !important;
}

.ax-scope .ax-text-neutral-0 {
  color: var(--ax-color-neutral-0) !important;
}

.ax-scope .ax-text-neutral-50 {
  color: var(--ax-color-neutral-50) !important;
}

.ax-scope .ax-text-neutral-100 {
  color: var(--ax-color-neutral-100) !important;
}

.ax-scope .ax-text-neutral-200 {
  color: var(--ax-color-neutral-200) !important;
}

.ax-scope .ax-text-neutral-300 {
  color: var(--ax-color-neutral-300) !important;
}

.ax-scope .ax-text-neutral-400 {
  color: var(--ax-color-neutral-400) !important;
}

.ax-scope .ax-text-neutral-500 {
  color: var(--ax-color-neutral-500) !important;
}

.ax-scope .ax-text-neutral-600 {
  color: var(--ax-color-neutral-600) !important;
}

.ax-scope .ax-text-neutral-700 {
  color: var(--ax-color-neutral-700) !important;
}

.ax-scope .ax-text-neutral-800 {
  color: var(--ax-color-neutral-800) !important;
}

.ax-scope .ax-text-neutral-900 {
  color: var(--ax-color-neutral-900) !important;
}

.ax-scope .ax-text-neutral-1000 {
  color: var(--ax-color-neutral-1000) !important;
}

/* ── SUCCESS ── */
.ax-scope .ax-bg-success-50 {
  background-color: var(--ax-color-success-50) !important;
}

.ax-scope .ax-bg-success-100 {
  background-color: var(--ax-color-success-100) !important;
}

.ax-scope .ax-bg-success-500 {
  background-color: var(--ax-color-success-500) !important;
}

.ax-scope .ax-bg-success-700 {
  background-color: var(--ax-color-success-700) !important;
}

.ax-scope .ax-text-success-50 {
  color: var(--ax-color-success-50) !important;
}

.ax-scope .ax-text-success-100 {
  color: var(--ax-color-success-100) !important;
}

.ax-scope .ax-text-success-500 {
  color: var(--ax-color-success-500) !important;
}

.ax-scope .ax-text-success-700 {
  color: var(--ax-color-success-700) !important;
}

/* ── WARNING ── */
.ax-scope .ax-bg-warning-50 {
  background-color: var(--ax-color-warning-50) !important;
}

.ax-scope .ax-bg-warning-100 {
  background-color: var(--ax-color-warning-100) !important;
}

.ax-scope .ax-bg-warning-500 {
  background-color: var(--ax-color-warning-500) !important;
}

.ax-scope .ax-bg-warning-700 {
  background-color: var(--ax-color-warning-700) !important;
}

.ax-scope .ax-text-warning-50 {
  color: var(--ax-color-warning-50) !important;
}

.ax-scope .ax-text-warning-100 {
  color: var(--ax-color-warning-100) !important;
}

.ax-scope .ax-text-warning-500 {
  color: var(--ax-color-warning-500) !important;
}

.ax-scope .ax-text-warning-700 {
  color: var(--ax-color-warning-700) !important;
}

/* ── ERROR ── */
.ax-scope .ax-bg-error-50 {
  background-color: var(--ax-color-error-50) !important;
}

.ax-scope .ax-bg-error-100 {
  background-color: var(--ax-color-error-100) !important;
}

.ax-scope .ax-bg-error-500 {
  background-color: var(--ax-color-error-500) !important;
}

.ax-scope .ax-bg-error-700 {
  background-color: var(--ax-color-error-700) !important;
}

.ax-scope .ax-text-error-50 {
  color: var(--ax-color-error-50) !important;
}

.ax-scope .ax-text-error-100 {
  color: var(--ax-color-error-100) !important;
}

.ax-scope .ax-text-error-500 {
  color: var(--ax-color-error-500) !important;
}

.ax-scope .ax-text-error-700 {
  color: var(--ax-color-error-700) !important;
}

/* ── ALIAS SÉMANTIQUES ── */
.ax-scope .ax-bg-brand {
  background-color: var(--ax-color-primary-500) !important;
}

.ax-scope .ax-bg-cta {
  background-color: var(--ax-color-accent-500) !important;
}

.ax-scope .ax-text-brand {
  color: var(--ax-color-primary-500) !important;
}

.ax-scope .ax-text-cta {
  color: var(--ax-color-accent-500) !important;
}

.ax-scope .ax-text-on-dark {
  color: var(--ax-color-neutral-0) !important;
}

/* ── BORDER COLOR ── */
.ax-scope .ax-border-primary {
  border-color: var(--ax-color-primary-500) !important;
}

.ax-scope .ax-border-accent {
  border-color: var(--ax-color-accent-500) !important;
}

.ax-scope .ax-border-blue {
  border-color: var(--ax-color-blue-500) !important;
}

.ax-scope .ax-border-neutral {
  border-color: var(--ax-color-neutral-300) !important;
}

.ax-scope .ax-border-subtle {
  border-color: var(--ax-color-neutral-200) !important;
}


/* ────────────────────────────────────────────────────────────
 * 16. UTILITAIRES TAILLE — ax-h-* / ax-w-*
 *
 * Définis EN FIN DE FICHIER avec body.ax-scope pour gagner sur
 * les max-width/max-height fixes des composants (ex: bandeau-video
 * a max-width:320px !important — même spécificité, dernier gagne).
 * Voir documentation/utilitaires-couleurs.md pour les classes couleur (§15).
 *
 * Usage : CSS Classes → ax-h-50  ou  ax-w-100  etc.
 * Le conteneur parent doit avoir une hauteur définie pour ax-h-*.
 * ──────────────────────────────────────────────────────────── */

/* — Hauteur */
body.ax-scope .ax-h-25 {
  max-height: 25% !important;
  height: 25% !important;
  width: auto !important;
  object-fit: cover !important;
}

body.ax-scope .ax-h-50 {
  max-height: 50% !important;
  height: 50% !important;
  width: auto !important;
  object-fit: cover !important;
}

body.ax-scope .ax-h-75 {
  max-height: 75% !important;
  height: 75% !important;
  width: auto !important;
  object-fit: cover !important;
}

body.ax-scope .ax-h-100 {
  max-height: 100% !important;
  height: 100% !important;
  width: auto !important;
  object-fit: cover !important;
}

/* — Largeur */
body.ax-scope .ax-w-25 {
  max-width: 25% !important;
  width: 25% !important;
  height: auto !important;
  object-fit: cover !important;
}

body.ax-scope .ax-w-50 {
  max-width: 50% !important;
  width: 50% !important;
  height: auto !important;
  object-fit: cover !important;
}

body.ax-scope .ax-w-75 {
  max-width: 75% !important;
  width: 75% !important;
  height: auto !important;
  object-fit: cover !important;
}

body.ax-scope .ax-w-100 {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* ────────────────────────────────────────────────────────────
 * 17. UTILITAIRES TYPOGRAPHIE — ax-as-h1 / ax-as-h2 / ax-as-h3
 *
 * Applique le style visuel d'un Hx sur n'importe quelle balise
 * (p, span, div…) sans changer la sémantique HTML.
 * Inclut : font-size, font-weight, line-height, letter-spacing, color.
 * Inclut : em, strong/b, u (gradient) + adaptation fonds sombres.
 *
 * Usage Elementor : CSS Classes → ax-as-h1
 * ──────────────────────────────────────────────────────────── */

/* ── Tailles de base ── */
body.ax-scope .ax-as-h1,
body.ax-scope .elementor .ax-as-h1 {
  font-size: clamp(36px, 4.8vw, 58px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  color: var(--ax-color-primary-500) !important;
  font-family: var(--ax-font-body) !important;
}

body.ax-scope .ax-as-h2,
body.ax-scope .elementor .ax-as-h2 {
  font-size: clamp(28px, 3.2vw, 40px) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em !important;
  color: var(--ax-color-primary-500) !important;
  font-family: var(--ax-font-body) !important;
}

body.ax-scope .ax-as-h3,
body.ax-scope .elementor .ax-as-h3 {
  font-size: clamp(18px, 2vw, 24px) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  color: var(--ax-color-primary-500) !important;
  font-family: var(--ax-font-body) !important;
}

body.ax-scope .ax-as-h4,
body.ax-scope .elementor .ax-as-h4 {
  font-size: clamp(16px, 1.5vw, 20px) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.005em !important;
  color: var(--ax-color-primary-500) !important;
  font-family: var(--ax-font-body) !important;
}

/* ── em : gradient bleu-violet (fond clair) ── */
body.ax-scope .ax-as-h1 em,
body.ax-scope .ax-as-h2 em,
body.ax-scope .ax-as-h3 em,
body.ax-scope .ax-as-h4 em,
body.ax-scope .elementor .ax-as-h1 em,
body.ax-scope .elementor .ax-as-h2 em,
body.ax-scope .elementor .ax-as-h3 em,
body.ax-scope .elementor .ax-as-h4 em {
  font-style: normal !important;
  font-weight: inherit !important;
  /* hérite la graisse du parent ax-as-h* */
  background: linear-gradient(90deg, var(--ax-color-blue-500) 0%, var(--ax-color-primary-400) 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── strong / b : gradient bleu-violet, graisse forcée à inherit ── */
body.ax-scope .ax-as-h1 :is(strong, b),
body.ax-scope .ax-as-h2 :is(strong, b),
body.ax-scope .ax-as-h3 :is(strong, b),
body.ax-scope .ax-as-h4 :is(strong, b),
body.ax-scope .elementor .ax-as-h1 :is(strong, b),
body.ax-scope .elementor .ax-as-h2 :is(strong, b),
body.ax-scope .elementor .ax-as-h3 :is(strong, b),
body.ax-scope .elementor .ax-as-h4 :is(strong, b) {
  font-weight: inherit !important;
  /* ne surcharge pas la graisse du parent */
  background: linear-gradient(90deg, var(--ax-color-blue-500) 0%, var(--ax-color-primary-400) 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── u : gradient orange, sans soulignement ── */
body.ax-scope .ax-as-h1 u,
body.ax-scope .ax-as-h2 u,
body.ax-scope .ax-as-h3 u,
body.ax-scope .ax-as-h4 u,
body.ax-scope .elementor .ax-as-h1 u,
body.ax-scope .elementor .ax-as-h2 u,
body.ax-scope .elementor .ax-as-h3 u,
body.ax-scope .elementor .ax-as-h4 u {
  font-weight: inherit !important;
  /* hérite la graisse du parent ax-as-h* */
  text-decoration: none !important;
  background: linear-gradient(90deg, #F17431 0%, #F9A162 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Adaptation fonds sombres : couleur → blanc, gradients em renforcés ── */
body.ax-scope :is(.ax-bg-sombre, .ax-bg-dark, .ax-bg-navy) .ax-as-h1,
body.ax-scope :is(.ax-bg-sombre, .ax-bg-dark, .ax-bg-navy) .ax-as-h2,
body.ax-scope :is(.ax-bg-sombre, .ax-bg-dark, .ax-bg-navy) .ax-as-h3,
body.ax-scope :is(.ax-bg-sombre, .ax-bg-dark, .ax-bg-navy) .ax-as-h4 {
  color: var(--ax-color-neutral-0) !important;
}

body.ax-scope :is(.ax-bg-sombre, .ax-bg-dark, .ax-bg-navy) .ax-as-h1 em,
body.ax-scope :is(.ax-bg-sombre, .ax-bg-dark, .ax-bg-navy) .ax-as-h2 em,
body.ax-scope :is(.ax-bg-sombre, .ax-bg-dark, .ax-bg-navy) .ax-as-h3 em,
body.ax-scope :is(.ax-bg-sombre, .ax-bg-dark, .ax-bg-navy) .ax-as-h4 em {
  background: linear-gradient(90deg, #6A5AFF 0%, #00D9FF 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ────────────────────────────────────────────────────────────
 * 18. UTILITAIRES BORDER-RADIUS — ax-rounded-*
 *
 * Applique un border-radius prédéfini sur n'importe quel widget.
 * Toutes les valeurs sont issues des tokens --ax-radius-*.
 *
 * Usage Elementor : CSS Classes → ax-rounded-xl
 * ──────────────────────────────────────────────────────────── */

body.ax-scope .ax-rounded-sm,
body.ax-scope .elementor .ax-rounded-sm {
  border-radius: var(--ax-radius-sm) !important;
}

/*  4px */
body.ax-scope .ax-rounded,
body.ax-scope .elementor .ax-rounded {
  border-radius: var(--ax-radius-md) !important;
}

/*  8px */
body.ax-scope .ax-rounded-lg,
body.ax-scope .elementor .ax-rounded-lg {
  border-radius: var(--ax-radius-lg) !important;
}

/* 12px */
body.ax-scope .ax-rounded-xl,
body.ax-scope .elementor .ax-rounded-xl {
  border-radius: var(--ax-radius-xl) !important;
}

/* 16px */
body.ax-scope .ax-rounded-2xl,
body.ax-scope .elementor .ax-rounded-2xl {
  border-radius: var(--ax-radius-2xl) !important;
}

/* 24px */
body.ax-scope .ax-rounded-3xl,
body.ax-scope .elementor .ax-rounded-3xl {
  border-radius: var(--ax-radius-3xl) !important;
}

/* 32px */
body.ax-scope .ax-rounded-full,
body.ax-scope .elementor .ax-rounded-full {
  border-radius: var(--ax-radius-full) !important;
}

/* pilule */

/* ────────────────────────────────────────────────────────────
 * 19. UTILITAIRES TYPOGRAPHIE — ax-as-p / variantes
 *
 * Applique le style visuel d'un paragraphe en différentes tailles
 * sur n'importe quelle balise HTML (span, div, li…).
 * Couleur par défaut : --ax-text-primary (neutral-900).
 * Adaptation automatique sur fonds sombres → blanc.
 *
 * Usage Elementor : CSS Classes → ax-as-p-lg
 * ──────────────────────────────────────────────────────────── */

/* ── Tailles ── */
body.ax-scope .ax-as-p-xs,
body.ax-scope .elementor .ax-as-p-xs {
  font-size: var(--ax-font-size-xs) !important;
  /* 12px */
  font-weight: 400 !important;
  line-height: var(--ax-line-height-normal) !important;
  letter-spacing: var(--ax-letter-spacing-normal) !important;
  color: var(--ax-text-secondary) !important;
  font-family: var(--ax-font-body) !important;
}

body.ax-scope .ax-as-p-sm,
body.ax-scope .elementor .ax-as-p-sm {
  font-size: var(--ax-font-size-sm) !important;
  /* 14px */
  font-weight: 400 !important;
  line-height: var(--ax-line-height-normal) !important;
  letter-spacing: var(--ax-letter-spacing-normal) !important;
  color: var(--ax-text-primary) !important;
  font-family: var(--ax-font-body) !important;
}

body.ax-scope .ax-as-p,
body.ax-scope .elementor .ax-as-p {
  font-size: var(--ax-font-size-base) !important;
  /* 16px */
  font-weight: 400 !important;
  line-height: var(--ax-line-height-relaxed) !important;
  letter-spacing: var(--ax-letter-spacing-normal) !important;
  color: var(--ax-text-primary) !important;
  font-family: var(--ax-font-body) !important;
}

body.ax-scope .ax-as-p-lg,
body.ax-scope .elementor .ax-as-p-lg {
  font-size: var(--ax-font-size-lg) !important;
  /* 18px */
  font-weight: 400 !important;
  line-height: var(--ax-line-height-relaxed) !important;
  letter-spacing: var(--ax-letter-spacing-normal) !important;
  color: var(--ax-text-primary) !important;
  font-family: var(--ax-font-body) !important;
}

body.ax-scope .ax-as-p-xl,
body.ax-scope .elementor .ax-as-p-xl {
  font-size: var(--ax-font-size-xl) !important;
  /* 20px */
  font-weight: 400 !important;
  line-height: var(--ax-line-height-relaxed) !important;
  letter-spacing: var(--ax-letter-spacing-normal) !important;
  color: var(--ax-text-primary) !important;
  font-family: var(--ax-font-body) !important;
}

/* ── Adaptation fonds sombres → texte blanc ── */
body.ax-scope :is(.ax-bg-sombre, .ax-bg-dark, .ax-bg-navy) .ax-as-p-xs,
body.ax-scope :is(.ax-bg-sombre, .ax-bg-dark, .ax-bg-navy) .ax-as-p-sm,
body.ax-scope :is(.ax-bg-sombre, .ax-bg-dark, .ax-bg-navy) .ax-as-p,
body.ax-scope :is(.ax-bg-sombre, .ax-bg-dark, .ax-bg-navy) .ax-as-p-lg,
body.ax-scope :is(.ax-bg-sombre, .ax-bg-dark, .ax-bg-navy) .ax-as-p-xl {
  color: var(--ax-color-neutral-0) !important;
}


/* ────────────────────────────────────────────────────────────
 * 12. SECTION INTÉGRATIONS — int-visual
 *     Anneau orbital + slides CRM + bandeau central
 *     Les positions des logos et les delays des slides sont
 *     calculés dynamiquement par JS (axialys-components.js)
 *     → fonctionne quel que soit le nombre de .int-logo / .int-slide
 * ─────────────────────────────────────────────────────────── */

/* ── Zone visuelle ── */
.int-visual {
  position: relative;
  width: 100%;
  min-height: 560px;
  overflow: hidden;
  z-index: 1;
}

/* ── Slides CRM (derrière le bandeau) ── */
.int-slides-wrap {
  position: absolute;
  width: 420px;
  height: 442px;
  top: 52%;
  left: 35%;
  transform: translate(-50%, -50%);
  z-index: 2;
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
}

.int-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: left top;
  opacity: 0;
  /* animation-duration et animation-delay injectés par JS */
  animation-name: int-slide-fade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes int-slide-fade {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  12% {
    opacity: 1;
  }

  17% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* ── Wrapper anneau : masque elliptique côté droit ── */
.int-ring-wrap {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 62% 60% at 76% 50%, black 30%, transparent 76%);
  mask-image: radial-gradient(ellipse 62% 60% at 76% 50%, black 30%, transparent 76%);
}

/* ── Anneau orbital (rotation CW) ── */
.int-ring {
  position: absolute;
  width: 520px;
  height: 520px;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
  animation: int-cw 45s linear infinite;
}

@keyframes int-cw {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes int-ccw {
  to {
    transform: rotate(-360deg);
  }
}

/* ── Cartes logos (rotation CCW pour rester à l'endroit) ── */
/* top/left injectés par JS selon le nombre de logos */
.int-logo {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.93);
  border-radius: 14px;
  padding: 10px 14px;
  width: 158px;
  box-shadow: 0 4px 20px rgba(33, 29, 109, 0.14), 0 1px 4px rgba(0, 0, 0, 0.07);
  backdrop-filter: blur(8px);
  animation: int-ccw 45s linear infinite;
}

.int-logo img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.int-logo-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.int-logo-name {
  font-size: 12px;
  font-weight: 700;
  color: #212529;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.int-logo-cat {
  font-size: 10px;
  color: #868E96;
}

/* ── Bandeau central (devant tout) ── */
.int-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 237px;
  height: 491px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 0px 64px rgba(33, 29, 109, 0.22), 0 4px 4px rgba(33, 29, 109, 0.12);
  background: #fff;
}

.int-center video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ── Responsive tablette ≤ 900px ── */
@media (max-width: 900px) {
  .int-visual {
    width: 100%;
    min-height: 400px;
  }
}

/* ── Responsive mobile ≤ 480px : masquer l'animation ── */
@media (max-width: 480px) {
  .int-visual {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════
 * CARROUSEL — Dégradés de masquage des bords
 * ════════════════════════════════════════════════════════════
 *
 * .DegraderBoucle + .ax-fade-alt   quand fond = --ax-surface-alt
 * ──────────────────────────────────────────────────────────── */



/* ── Fond --ax-surface-alt : #F8F9FF = rgb(248, 249, 255) ── */
.ax-fade-alt.DegraderBoucle::before {
  background: linear-gradient(90deg, rgba(248, 249, 255, 1) 0%, rgba(248, 249, 255, 0) 8%) !important;
}

.ax-fade-alt.DegraderBoucle::after {
  background: linear-gradient(90deg, rgba(248, 249, 255, 0) 92%, rgba(248, 249, 255, 1) 100%) !important;
}


.ax-fade-alt .ContenuBoucle .lire-plus {
  background: linear-gradient(0deg, rgba(239, 245, 255, 1) 20%, rgba(239, 245, 255, 0) 100%) !important
}


/* ════════════════════════════════════════════════════════════
 * POPUP FONCTIONNALITÉS (ID 27372) — overlay, skeleton
 * ════════════════════════════════════════════════════════════ */

/* ── Overlay Elementor natif — dark + blur (comme le nav) ── */
.elementor-popup-modal[data-elementor-id="27372"] .dialog-overlay {
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* ── Skeleton loader ─────────────────────────────────────── */
.ax-skel {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg,
      var(--ax-color-neutral-100, #E8ECF4) 25%,
      var(--ax-color-neutral-50, #F4F6FB) 50%,
      var(--ax-color-neutral-100, #E8ECF4) 75%);
  background-size: 200% 100%;
  animation: ax-shimmer 1.4s ease infinite;
  margin-bottom: 10px;
}

.ax-skel--title {
  height: 28px;
  width: 70%;
  margin-bottom: 20px;
}

.ax-skel--line {
  height: 14px;
  width: 100%;
}

.ax-skel--short {
  width: 60%;
}

@keyframes ax-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ── Animation d'entrée du panneau (slide from right) ────── */
.elementor-popup-modal[data-elementor-id="27372"] .dialog-widget-content {
  animation: ax-slide-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ax-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ════════════════════════════════════════════════════════════
 * 16. AX — COLOR SCHEME TOKENS  ax-color--*
 *
 * Pose 4 variables CSS sur l'élément portant la classe.
 * Ces variables sont consommées par ax-badge, ax-badge-overline
 * et tout composant futur qui les référence.
 *
 *   --ax-c        couleur principale (icône)
 *   --ax-c-text   couleur texte (= --ax-c si identique, sinon valeur propre)
 *   --ax-c-bg     fond teinté (50)
 *   --ax-c-border bordure (100)
 *
 * USAGE
 *   ax-color--navy     ax-color--orange  ax-color--blue
 *   ax-color--green    ax-color--yellow  ax-color--red   ax-color--gray
 *
 * Alias rétro-compat : ax-badge--* = ax-color--*
 * Si tous les items d'un badge ont la même couleur →
 *   mettre ax-color--* (ou ax-badge--*) directement sur le widget
 * Si couleurs mixtes → mettre ax-color--* sur chaque li
 * ════════════════════════════════════════════════════════════ */

/* Navy (primary) */
body.ax-scope .ax-color--navy,
body.ax-scope .ax-badge--navy {
  --ax-c: var(--ax-color-primary-500, #211D6D);
  --ax-c-text: var(--ax-color-primary-500, #211D6D);
  --ax-c-bg: var(--ax-color-primary-50, #F1F0FB);
  --ax-c-border: var(--ax-color-primary-100, #E2E1F7);
}

/* Orange (accent / CTA) */
body.ax-scope .ax-color--orange,
body.ax-scope .ax-badge--orange {
  --ax-c: var(--ax-color-accent-500, #F17431);
  --ax-c-text: var(--ax-color-accent-500, #F17431);
  --ax-c-bg: var(--ax-color-accent-50, #FEF3EC);
  --ax-c-border: var(--ax-color-accent-100, #FDE0C8);
}

/* Blue */
body.ax-scope .ax-color--blue,
body.ax-scope .ax-badge--blue {
  --ax-c: var(--ax-color-blue-500, #428BFE);
  --ax-c-text: var(--ax-color-blue-500, #428BFE);
  --ax-c-bg: var(--ax-color-blue-50, #EFF5FF);
  --ax-c-border: var(--ax-color-blue-100, #D4E7FE);
}

/* Green (success / Actif) */
body.ax-scope .ax-color--green,
body.ax-scope .ax-badge--green {
  --ax-c: var(--ax-color-success-500, #22C55E);
  --ax-c-text: var(--ax-color-success-700, #15803D);
  --ax-c-bg: var(--ax-color-success-50, #F0FDF4);
  --ax-c-border: var(--ax-color-success-100, #DCFCE7);
}

/* Yellow (warning / En attente) */
body.ax-scope .ax-color--yellow,
body.ax-scope .ax-badge--yellow {
  --ax-c: var(--ax-color-warning-500, #F59E0B);
  --ax-c-text: var(--ax-color-warning-700, #B45309);
  --ax-c-bg: var(--ax-color-warning-50, #FFFBEB);
  --ax-c-border: var(--ax-color-warning-100, #FEF3C7);
}

/* Red (error / Erreur) */
body.ax-scope .ax-color--red,
body.ax-scope .ax-badge--red {
  --ax-c: var(--ax-color-error-500, #EF4444);
  --ax-c-text: var(--ax-color-error-700, #B91C1C);
  --ax-c-bg: var(--ax-color-error-50, #FFF1F2);
  --ax-c-border: var(--ax-color-error-100, #FFE4E6);
}

/* Gray (Archivé / inactif) */
body.ax-scope .ax-color--gray,
body.ax-scope .ax-badge--gray {
  --ax-c: var(--ax-color-neutral-500, #ADB5BD);
  --ax-c-text: var(--ax-color-neutral-600, #868E96);
  --ax-c-bg: var(--ax-color-neutral-100, #F1F3F5);
  --ax-c-border: var(--ax-color-neutral-200, #E9ECEF);
}

/* ════════════════════════════════════════════════════════════
 * AX — BADGES & TAGS
 *
 * Structure : widget Icon List Elementor
 *   div.elementor-widget-icon-list  ← ax-badge ou ax-badge-overline
 *     ul.elementor-icon-list-items
 *       li.elementor-icon-list-item  ← ax-color--{couleur} ou ax-badge--{couleur}
 *         span.elementor-icon-list-icon > i.ti.ti-*
 *         span.elementor-icon-list-text
 *
 * Les composants consomment --ax-c / --ax-c-text / --ax-c-bg / --ax-c-border
 * définis par ax-color--* ci-dessus.
 * ════════════════════════════════════════════════════════════ */

/* ── Base wrapper ─────────────────────────────────────────── */
body.ax-scope .ax-badge .elementor-icon-list-items,
body.ax-scope .ax-badge-overline .elementor-icon-list-items {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* ── Item base ────────────────────────────────────────────── */
body.ax-scope .ax-badge .elementor-icon-list-item,
body.ax-scope .ax-badge-overline .elementor-icon-list-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border-radius: var(--ax-radius-full) !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  cursor: default;
}

/* ── Reset liens natifs (si li devient cliquable via <a>) ─── */
body.ax-scope .ax-badge .elementor-icon-list-item a,
body.ax-scope .ax-badge-overline .elementor-icon-list-item a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* ── Icône dans l'item ────────────────────────────────────── */
body.ax-scope .ax-badge .elementor-icon-list-icon,
body.ax-scope .ax-badge-overline .elementor-icon-list-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* ── Texte de l'item ──────────────────────────────────────── */
body.ax-scope .ax-badge .elementor-icon-list-text,
body.ax-scope .ax-badge-overline .elementor-icon-list-text {
  line-height: 1 !important;
}


/* ════════════════════════════════════════════════════════════
 * ax-badge — Style compacte (statuts, catégories)
 * Taille : 11px, padding 5px 10px
 * ════════════════════════════════════════════════════════════ */

body.ax-scope .ax-badge .elementor-icon-list-item {
  padding: 5px 10px !important;
  background: var(--ax-c-bg, var(--ax-color-neutral-100)) !important;
  border: none !important;
}

body.ax-scope .ax-badge .elementor-icon-list-icon i,
body.ax-scope .ax-badge .elementor-icon-list-icon svg {
  font-size: 13px !important;
  width: 13px !important;
  height: 13px !important;
  color: var(--ax-c, var(--ax-color-neutral-600)) !important;
}

body.ax-scope .ax-badge .elementor-icon-list-text {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--ax-c-text, var(--ax-c, var(--ax-color-neutral-700))) !important;
}


/* ════════════════════════════════════════════════════════════
 * ax-badge-overline — Style chapeau de section
 * Taille : 12px, padding 8px 14px, border coloré, uppercase
 * ════════════════════════════════════════════════════════════ */

body.ax-scope .ax-badge-overline .elementor-icon-list-item {
  padding: 8px 14px !important;
  background: var(--ax-c-bg, transparent) !important;
  border: 1.5px solid var(--ax-c-border, var(--ax-color-neutral-300)) !important;
}

body.ax-scope .ax-badge-overline .elementor-icon-list-icon i,
body.ax-scope .ax-badge-overline .elementor-icon-list-icon svg {
  font-size: 15px !important;
  width: 15px !important;
  height: 15px !important;
  color: var(--ax-c, var(--ax-color-neutral-500)) !important;
}

body.ax-scope .ax-badge-overline .elementor-icon-list-text {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ax-c-text, var(--ax-c, var(--ax-color-neutral-700))) !important;
}

/* Sur fonds sombres → utiliser ax-brand--white sur le widget ou les li */

/* ════════════════════════════════════════════════════════════
 * 17. AX — BRAND COLOR TOKENS  ax-brand--*
 *
 * Variante dynamique de ax-color--* :
 *   --ax-c        couleur principale (icône + texte)
 *   --ax-c-text   idem --ax-c (identique par défaut)
 *   --ax-c-bg     color-mix(couleur 10%, white) — couleur solide, stable sur tout fond
 *   --ax-c-border color-mix(couleur 22%, white) — idem
 *
 * color-mix() produit une teinte SOLIDE (pas de transparence) :
 * rendu identique sur fond clair ou sombre, pas de mélange indésirable.
 *
 * USAGE
 *   • Sur le widget Icon List : data-brand="ax-brand--orange ax-brand--navy ax-brand--dark"
 *     → le JS distribue chaque token aux li dans l'ordre
 *   • Un seul token → appliqué à tous les li
 *   • Utilisable aussi directement en CSS Class sur n'importe quel élément
 *
 * COULEURS DISPONIBLES
 *   ax-brand--navy   ax-brand--orange  ax-brand--blue
 *   ax-brand--green  ax-brand--yellow  ax-brand--red
 *   ax-brand--gray   ax-brand--dark    ax-brand--white
 * ════════════════════════════════════════════════════════════ */

/* Navy (primary) */
body.ax-scope .ax-brand--navy {
  --ax-c: var(--ax-color-primary-500, #211D6D);
  --ax-c-text: var(--ax-color-primary-500, #211D6D);
  --ax-c-bg: color-mix(in srgb, #211D6D 10%, white);
  --ax-c-border: color-mix(in srgb, #211D6D 22%, white);
}

/* Orange (accent / CTA) */
body.ax-scope .ax-brand--orange {
  --ax-c: var(--ax-color-accent-500, #F17431);
  --ax-c-text: var(--ax-color-accent-500, #F17431);
  --ax-c-bg: color-mix(in srgb, #F17431 10%, white);
  --ax-c-border: color-mix(in srgb, #F17431 22%, white);
}

/* Blue */
body.ax-scope .ax-brand--blue {
  --ax-c: var(--ax-color-blue-500, #428BFE);
  --ax-c-text: var(--ax-color-blue-500, #428BFE);
  --ax-c-bg: color-mix(in srgb, #428BFE 10%, white);
  --ax-c-border: color-mix(in srgb, #428BFE 22%, white);
}

/* Green */
body.ax-scope .ax-brand--green {
  --ax-c: var(--ax-color-success-500, #22C55E);
  --ax-c-text: var(--ax-color-success-700, #15803D);
  --ax-c-bg: color-mix(in srgb, #22C55E 10%, white);
  --ax-c-border: color-mix(in srgb, #22C55E 22%, white);
}

/* Yellow */
body.ax-scope .ax-brand--yellow {
  --ax-c: var(--ax-color-warning-500, #F59E0B);
  --ax-c-text: var(--ax-color-warning-700, #B45309);
  --ax-c-bg: color-mix(in srgb, #F59E0B 10%, white);
  --ax-c-border: color-mix(in srgb, #F59E0B 22%, white);
}

/* Red */
body.ax-scope .ax-brand--red {
  --ax-c: var(--ax-color-error-500, #EF4444);
  --ax-c-text: var(--ax-color-error-700, #B91C1C);
  --ax-c-bg: color-mix(in srgb, #EF4444 10%, white);
  --ax-c-border: color-mix(in srgb, #EF4444 22%, white);
}

/* Gray (neutre léger) */
body.ax-scope .ax-brand--gray {
  --ax-c: var(--ax-color-neutral-500, #ADB5BD);
  --ax-c-text: var(--ax-color-neutral-600, #868E96);
  --ax-c-bg: color-mix(in srgb, #ADB5BD 10%, white);
  --ax-c-border: color-mix(in srgb, #ADB5BD 22%, white);
}

/* Dark (neutre sombre) */
body.ax-scope .ax-brand--dark {
  --ax-c: var(--ax-color-neutral-800, #343A40);
  --ax-c-text: var(--ax-color-neutral-800, #343A40);
  --ax-c-bg: color-mix(in srgb, #343A40 10%, white);
  --ax-c-border: color-mix(in srgb, #343A40 22%, white);
}

/* White (sur fonds sombres) — exception : reste semi-transparent */
body.ax-scope .ax-brand--white {
  --ax-c: var(--ax-color-neutral-0, #FFFFFF);
  --ax-c-text: var(--ax-color-neutral-0, #FFFFFF);
  --ax-c-bg: rgba(255, 255, 255, 0.12);
  --ax-c-border: rgba(255, 255, 255, 0.30);
}


/* ════════════════════════════════════════════════════════════
 * 20. AX — AUDIO PLAYER (lecteur audio custom style Apple/iOS)
 *
 * Ne touche pas au bouton déclencheur — il garde son style existant
 * (ex. ax-btn ax-btn-ghost). Cette section ne stylise QUE le lecteur
 * injecté par JS autour du <audio class="audioPlayer">.
 *
 * Structure attendue dans Elementor (rien à ajouter au HTML) :
 *
 *   <div id="audio-001">                    ← bouton déjà charté, inchangé
 *     <a class="ax-btn ax-btn-ghost" href="#">Exemple d'appel…</a>
 *   </div>
 *   <div class="elementor-widget-container"> ← widget HTML suivant
 *     <audio class="audioPlayer" controls preload="none" crossorigin="anonymous">
 *       <source src="…fichier.ogg" type="audio/ogg">
 *       <source src="…fichier.mp3" type="audio/mpeg">
 *     </audio>
 *   </div>
 *
 * Le JS (axialys-components.js) associe le n-ième id="audio-XXX" au
 * n-ième <audio class="audioPlayer"> trouvé dans la page (même ordre
 * visuel), retire l'attribut controls, et injecte les contrôles
 * custom (play/pause, barre, stop) définis ci-dessous.
 *
 * Pour ajouter/changer un audio : dupliquer le bouton (id suivant,
 * ex. audio-004) + coller le <audio class="audioPlayer">… tel quel
 * avec les nouvelles sources. Aucune autre modif CSS/JS.
 * ════════════════════════════════════════════════════════════ */

/* Bouton déclencheur masqué pendant la lecture (posé par le JS, ne change pas son style) */
.ax-audio-trigger-hidden {
  display: none !important;
}

/* Conteneur du widget HTML natif — masqué tant que le lecteur n'est pas ouvert */
body.ax-scope .ax-audio-wrap {
  display: none;
}

body.ax-scope .ax-audio-wrap.is-open {
  display: block;
}

/* <audio> natif toujours masqué — remplacé par les contrôles custom ci-dessous */
body.ax-scope .ax-audio-wrap audio.audioPlayer {
  display: none;
}

/* ── Barre de contrôle injectée par le JS — pas de capsule, même
 * hauteur que le bouton déclencheur (.ax-btn = 42px : padding 12px
 * + border 2px + line-height 14px) pour éviter tout décalage visuel
 * au moment où le bouton bascule vers le lecteur ───────────────── */
body.ax-scope .ax-audio-ctrl {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 22.5rem;
  /* 360px */
  height: 2.625rem;
  /* 42px — aligné sur .ax-btn */
}

/* ── Bouton play/pause (rond, dégradé marque) ──────────────── */
body.ax-scope .ax-audio-play {
  flex: 0 0 auto;
  width: 2.625rem;
  /* 42px — même hauteur que le bouton déclencheur */
  height: 2.625rem;
  border-radius: var(--ax-radius-full, 9999px);
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #5B9BFF, #6B67CF, #211D6D);
  color: var(--ax-color-neutral-0, #FFFFFF);
  cursor: pointer;
  transition: filter 0.15s ease;
}

body.ax-scope .ax-audio-play:hover {
  filter: brightness(1.1);
}

body.ax-scope .ax-audio-play:active {
  filter: brightness(0.9);
}

body.ax-scope .ax-audio-play i {
  font-size: 1.05rem;
}

/* Bascule play ⇄ pause pilotée par la classe is-playing (posée par le JS) */
body.ax-scope .ax-audio-play .ti-player-pause {
  display: none;
}

body.ax-scope .ax-audio-ctrl.is-playing .ax-audio-play .ti-player-play {
  display: none;
}

body.ax-scope .ax-audio-ctrl.is-playing .ax-audio-play .ti-player-pause {
  display: inline-flex;
}

/* ── Piste : barre de progression + temps ──────────────────── */
body.ax-scope .ax-audio-track {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

body.ax-scope .ax-audio-bar {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: var(--ax-radius-full, 9999px);
  background: var(--ax-color-neutral-200, #E9ECEF);
  overflow: hidden;
  cursor: pointer;
}

body.ax-scope .ax-audio-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  border-radius: var(--ax-radius-full, 9999px);
  background: linear-gradient(90deg, var(--ax-color-accent-500, #F17431), var(--ax-color-primary-500, #211D6D));
}

body.ax-scope .ax-audio-time {
  display: flex;
  justify-content: space-between;
  font-family: var(--ax-font-mono);
  font-size: 0.6875rem;
  color: var(--ax-text-muted, #ADB5BD);
  line-height: 1;
}

/* ── Bouton stop (rond, discret) ───────────────────────────── */
body.ax-scope .ax-audio-stop {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: var(--ax-radius-full, 9999px);
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ax-color-neutral-100, #F1F3F5);
  color: var(--ax-text-secondary, #495057);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

body.ax-scope .ax-audio-stop:hover {
  background: var(--ax-color-error-100, #FFE4E6);
  color: var(--ax-color-error-500, #EF4444);
}

body.ax-scope .ax-audio-stop i {
  font-size: 0.85rem;
}

/* ────────────────────────────────────────────────────────────
 * 21. AX — RSS RETRIEVER (flux blog.axialys.com)
 *     Généré par le shortcode [wp_rss_retriever] — server/functions.php
 *     Remplace l'ancien plugin du même nom (désinstallé du serveur).
 * ──────────────────────────────────────────────────────────── */

body.ax-scope .ax-rss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  /* 280px */
  gap: var(--ax-space-8, 2rem);
}

body.ax-scope .ax-rss-card {
  display: flex;
  flex-direction: column;
  background-color: var(--ax-color-neutral-0, #FFFFFF);
  border: 1px solid var(--ax-border-subtle, #E9ECEF);
  border-radius: var(--ax-radius-xl, 16px);
  overflow: hidden;
  box-shadow: var(--ax-shadow-xs, 0 1px 2px rgba(33, 29, 109, 0.05));
  transition: box-shadow 0.22s var(--ax-ease-standard, cubic-bezier(.4, 0, .2, 1)),
    transform 0.22s var(--ax-ease-standard, cubic-bezier(.4, 0, .2, 1));
}

body.ax-scope .ax-rss-card:hover {
  box-shadow: var(--ax-shadow-lg, 0 10px 15px -3px rgba(33, 29, 109, 0.08));
  transform: translateY(-4px);
}

body.ax-scope .ax-rss-card-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--ax-color-neutral-100, #F1F3F5);
}

body.ax-scope .ax-rss-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s var(--ax-ease-standard, cubic-bezier(.4, 0, .2, 1));
}

body.ax-scope .ax-rss-card:hover .ax-rss-card-thumb img {
  transform: scale(1.04);
}

body.ax-scope .ax-rss-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--ax-space-6, 1.5rem);
  flex: 1;
}

body.ax-scope .ax-rss-card-date {
  font-size: var(--ax-font-size-xs, 0.75rem);
  color: var(--ax-text-muted, #ADB5BD);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.ax-scope .ax-rss-card-title {
  margin: 0;
  font-family: var(--ax-font-display);
  font-size: var(--ax-font-size-lg, 1.125rem);
  font-weight: var(--ax-font-weight-semibold, 600);
  line-height: 1.35;
}

body.ax-scope .ax-rss-card-title a {
  color: var(--ax-text-primary, #212529);
  text-decoration: none;
  transition: color 0.15s ease;
}

body.ax-scope .ax-rss-card-title a:hover {
  color: var(--ax-color-accent-500, #F17431);
}

body.ax-scope .ax-rss-card-excerpt {
  margin: 0;
  font-size: var(--ax-font-size-sm, 0.875rem);
  color: var(--ax-text-secondary, #495057);
  line-height: 1.5;
}

body.ax-scope .ax-rss-card-more {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: var(--ax-font-size-sm, 0.875rem);
  font-weight: var(--ax-font-weight-semibold, 600);
  color: var(--ax-color-accent-500, #F17431);
  text-decoration: none;
}

body.ax-scope .ax-rss-card-more i {
  transition: transform 0.2s var(--ax-ease-standard, cubic-bezier(.4, 0, .2, 1));
}

body.ax-scope .ax-rss-card-more:hover i {
  transform: translateX(3px);
}

body.ax-scope .ax-rss-card-source {
  font-size: var(--ax-font-size-xs, 0.75rem);
  color: var(--ax-text-muted, #ADB5BD);
}


/* ────────────────────────────────────────────────────────────────
 * 22. AX — LP TEMPLATE DÉMO  (🆕 PROPOSITION — pas encore validée)
 *
 *  Classes utilisées par mockups/ax-lp-demo-template.html.
 *  Statut : brouillon de travail, pas encore construit dans
 *  Elementor ni déployé sur une vraie page. Ne pas considérer
 *  comme un composant "Mes Modèles" figé — cette section sera
 *  réécrite/nettoyée au moment de la construction réelle.
 * ──────────────────────────────────────────────────────────────── */

/* ── En-tête minimal LP (sans méga-menu, pour ne pas faire fuir le lead) ── */
body.ax-scope .ax-lp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--ax-space-6);
  max-width: var(--ax-container-xl, 1280px);
  margin-inline: auto;
}

body.ax-scope .ax-lp-header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

body.ax-scope .ax-lp-header__logo img {
  height: 32px;
}

body.ax-scope .ax-lp-header__brand {
  color: var(--ax-color-primary-500);
  font-size: 15px;
}

body.ax-scope .ax-lp-header__right {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  color: var(--ax-color-primary-500);
  font-weight: 600;
}

body.ax-scope .ax-lp-header__right i {
  color: var(--ax-color-accent-500);
  margin-right: 4px;
}

body.ax-scope .ax-lp-header__back {
  color: var(--ax-color-neutral-700);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

/* ── Hero — eyebrow / titre / intro ── */
body.ax-scope .ax-lp-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ax-color-accent-500);
  margin: 0 0 12px;
}

body.ax-scope .ax-lp-hero-title {
  margin: 0 0 16px;
}

body.ax-scope .ax-lp-hero-intro {
  color: var(--ax-color-neutral-700);
  margin: 0 0 4px;
}

/* ── Rangée de badges de réassurance (sous le H1) ──────────────────
   Pas de classe ax-lp-trust : c'est le composant AX — Feature Pills
   existant (ax-pills / ax-pill / ax-pill--green, voir plus haut §12
   composants-globaux.md), pour rester sur une seule source de vérité
   pour les pills plutôt que d'en dupliquer une variante ax-lp-*.
   L'espacement au-dessus/dessous se règle en local (marge Elementor
   du Bloc Div), comme le padding de la carte formulaire. ── */

/* ── Logos clients — marquee compact, sous le texte du hero ── */
body.ax-scope .ax-lp-logos-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ax-color-neutral-500);
  margin-bottom: 14px;
}

body.ax-scope .ax-lp-logos-wrap {
  position: relative;
  overflow: hidden;
  max-width: 620px;
}

body.ax-scope .ax-lp-logos-wrap::before,
body.ax-scope .ax-lp-logos-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}

body.ax-scope .ax-lp-logos-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--ax-color-neutral-0), transparent);
}

body.ax-scope .ax-lp-logos-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--ax-color-neutral-0), transparent);
}

body.ax-scope .ax-lp-logos-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  animation: ax-lp-marquee 32s linear infinite;
}

body.ax-scope .ax-lp-logos-track:hover {
  animation-play-state: paused;
}

@keyframes ax-lp-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

body.ax-scope .ax-lp-logo-item img {
  height: 26px;
  width: auto;
  filter: grayscale(1) opacity(.55);
}

/* ── Carte formulaire (conteneur autour de l'embed Mautic) ──────────
   Pas de classe dédiée pour la carte elle-même (fond/radius/padding/
   flex) : ax-bg-indigo + ax-rounded-2xl couvrent déjà fond+radius, et
   le padding/la mise en page (flex colonne) se règlent directement en
   "local" dans le panneau Elementor du Bloc Div — inutile de créer une
   classe ax-* pour un réglage qui ne sert qu'à cet unique bloc.
   #ax-lp-form reste l'ancre ciblée par les CTA "Réserver ma démo" (et
   hérite du comportement responsive de .hero-visual : passe au-dessus
   du texte ≤900px) — ne pas confondre avec .ax-lp-webMeka ci-dessous,
   qui est la classe posée sur le widget HTML contenant l'embed Mautic
   lui-même (voir capture Elementor : Classes CSS = ax-lp-webMeka). ── */
body.ax-scope #ax-lp-form {
  width: 100%;
}

/* div.mauticform_wrapper — parent direct du <form> généré par l'embed
   Mautic, lui-même descendant de #ax-lp-form. Centré horizontalement. */
body.ax-scope #ax-lp-form div.mauticform_wrapper {
  margin: 0 auto;
}

body.ax-scope .ax-lp-form-card__eyebrow {
  color: rgba(255, 255, 255, .85);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

body.ax-scope .ax-lp-form-card__title {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 22px;
  line-height: 1.3;
}

body.ax-scope .ax-lp-form-card__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--ax-space-4);
  color: rgba(255, 255, 255, .7);
  font-size: 12px;
}

body.ax-scope .ax-lp-form-card__foot i {
  color: #fff;
}

/* ── 🆕 Habillage formulaire Mautic/Webmécanik — classe .ax-lp-webMeka
   À poser sur le widget HTML qui contient l'embed (Classes CSS, panneau
   Avancé). Réutilisable sur toutes les pages avec un formulaire Mautic/
   Webmécanik, pas seulement cette LP.
   Ces sélecteurs visent les vraies classes générées par le form embed
   (vérifiées en direct sur /demo-logiciel-call-center/, DOM Elementor) :
     .mauticform-innerform > .mauticform-page-wrapper > .mauticform-row
     .webMeca-50 / .webMeca-100 (largeur de ligne)
     .mauticform-input / .mauticform-textarea
     .mauticform-checkboxgrp-checkbox
     .mauticform-button-wrapper / .mauticform-button
   ⚠️ Correction : webMeca-50/100 ne positionnent RIEN par eux-mêmes —
   ce sont de simples marqueurs de largeur, le flex doit être posé sur
   leur parent direct. Ce parent est .mauticform-page-wrapper (forms
   Mautic "multi-page", même à une seule page) — PAS .mauticform-innerform
   ni <form>. On flexe les deux (page-wrapper ET innerform) pour couvrir
   aussi les formulaires sans pagination où les rows seraient enfants
   directs de .mauticform-innerform. Si le flex ne prend pas sur une page,
   inspecter le parent réel de .webMeca-50 dans le DOM et l'ajouter ici. */
body.ax-scope .ax-lp-webMeka .mauticform-innerform,
body.ax-scope .ax-lp-webMeka .mauticform-page-wrapper {
  display: flex;
  flex-wrap: wrap;
  column-gap: 4%;
}

/* .mauticform-page-wrapper devient lui-même un item flex de
   .mauticform-innerform (son parent) — sans ceci il ne prendrait que
   la largeur de son contenu au lieu de toute la largeur du formulaire. */
body.ax-scope .ax-lp-webMeka .mauticform-page-wrapper {
  flex: 1 0 100%;
}

body.ax-scope .ax-lp-webMeka .mauticform-row {
  margin-bottom: 14px;
}

body.ax-scope .ax-lp-webMeka .webMeca-50 {
  flex: 0 0 48%;
}

body.ax-scope .ax-lp-webMeka .webMeca-100 {
  flex: 0 0 100%;
}

body.ax-scope .ax-lp-webMeka .mauticform-label {
  color: rgba(255, 255, 255, .85);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}

body.ax-scope .ax-lp-webMeka .mauticform-input,
body.ax-scope .ax-lp-webMeka .mauticform-textarea,
body.ax-scope .ax-lp-webMeka select.mauticform-selectbox {
  width: 100%;
  border: 1.5px solid transparent;
  border-radius: var(--ax-radius-lg);
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ax-color-neutral-900);
  background: var(--ax-color-neutral-0);
  box-shadow: var(--ax-shadow-xs);
  transition: border-color 100ms, box-shadow 100ms;
}

body.ax-scope .ax-lp-webMeka .mauticform-input::placeholder,
body.ax-scope .ax-lp-webMeka .mauticform-textarea::placeholder {
  color: var(--ax-color-neutral-500);
}

/* Focus — même logique que .field-input:focus (design-system.html), mais
   en rgba plutôt qu'en couleur solide --ax-color-accent-100 : sur un fond
   blanc les deux se ressemblent, mais --ax-color-accent-100 est une teinte
   OPAQUE (orange déjà mélangé à du blanc) — posée sur un fond bleu/foncé
   (comme cette carte ax-bg-indigo), elle recouvre le fond au lieu de se
   fondre avec lui et donne un halo délavé/blanchâtre au lieu d'orange.
   Le halo en rgba() reste un vrai orange translucide sur n'importe quel
   fond derrière lui. */
body.ax-scope .ax-lp-webMeka .mauticform-input:focus,
body.ax-scope .ax-lp-webMeka .mauticform-textarea:focus {
  outline: none;
  border-color: var(--ax-color-accent-500);
  box-shadow: 0 0 0 3px rgba(241, 116, 49, .28);
  /* accent-500 en transparence */
}

body.ax-scope .ax-lp-webMeka .mauticform-textarea {
  min-height: 70px;
  resize: vertical;
}

body.ax-scope .ax-lp-webMeka .mauticform-checkboxgrp-label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: rgba(255, 255, 255, .75);
  font-size: 12px;
  line-height: 1.6;
}

body.ax-scope .ax-lp-webMeka .mauticform-checkboxgrp-checkbox {
  margin-top: 2px;
}

body.ax-scope .ax-lp-webMeka .mauticform-checkboxgrp,
body.ax-scope .ax-lp-webMeka .mauticform-freetext,
body.ax-scope .ax-lp-webMeka .mauticform-freetext p {
  color: rgba(255, 255, 255, .75);
  font-size: 12px;
  line-height: 1.6;
}

body.ax-scope .ax-lp-webMeka .mauticform-freetext a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.ax-scope .ax-lp-webMeka .mauticform-button-wrapper {
  width: 100%;
  margin: 0;
}

/* Bouton submit — Mautic génère automatiquement class="btn btn-primary
   mauticform-button" sur CE bouton, sans réglage à faire côté formulaire
   (contrairement à ce qu'on pensait : pas besoin d'ajouter ax-btn/
   ax-btn-primary dans les réglages "CSS Class" de Mautic — .btn.btn-primary
   est déjà là par défaut). On recopie donc ici les valeurs exactes du
   composant Bouton (ax-btn + ax-btn-primary + ax-btn-lg) directement sur
   ces classes, avec !important : le thème Bootstrap-like de Webmécanik
   pose déjà ses propres couleurs sur .btn-primary, qu'il faut prendre
   le pas sur. Si le composant Bouton change un jour, répercuter le
   changement ici aussi (pas de lien automatique, volontairement — cette
   classe cible du contenu hors Elementor, pas un widget Bouton). */
body.ax-scope .ax-lp-webMeka .mauticform-button-wrapper .btn.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ax-space-2);
  width: 100%;
  padding: 16px 32px !important;
  border-radius: var(--ax-radius-full) !important;
  border: 2px solid var(--ax-color-accent-500) !important;
  background-color: var(--ax-color-accent-500) !important;
  color: var(--ax-color-neutral-0) !important;
  font-family: var(--ax-font-body);
  font-size: var(--ax-font-size-base);
  font-weight: var(--ax-font-weight-semibold);
  letter-spacing: 0.025em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(241, 116, 49, 0.2) !important;
  transition: all var(--ax-duration-fast) var(--ax-ease-standard);
}

body.ax-scope .ax-lp-webMeka .mauticform-button-wrapper .btn.btn-primary:hover {
  background-color: var(--ax-color-accent-600) !important;
  border-color: var(--ax-color-accent-600) !important;
  transform: translateY(-1px);
}

body.ax-scope .ax-lp-webMeka .mauticform-button-wrapper .btn.btn-primary:focus,
body.ax-scope .ax-lp-webMeka .mauticform-button-wrapper .btn.btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--ax-focus-ring-cta);
}

body.ax-scope .ax-lp-webMeka .mauticform-errormsg {
  color: #FFE1CE;
  font-size: 12px;
  margin-top: 4px;
}

/* ── Bandeau statistiques (réassurance chiffrée, sous le hero) ── */
body.ax-scope .ax-lp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ax-space-8);
  text-align: center;
}

body.ax-scope .ax-lp-stat__num {
  font-size: 36px;
  font-weight: 800;
  color: var(--ax-color-primary-500);
  line-height: 1;
  margin: 0 0 6px;
}

body.ax-scope .ax-lp-stat__label {
  font-size: 14px;
  color: var(--ax-color-neutral-700);
  margin: 0;
}

@media (max-width: 768px) {
  body.ax-scope .ax-lp-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Features — grille de cards avec icônes ── */
body.ax-scope .ax-lp-features-header {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 48px;
}

body.ax-scope .ax-lp-feature-card {
  padding: 28px;
}

body.ax-scope .ax-lp-feature-card__icon {
  font-size: 26px;
}

body.ax-scope .ax-lp-feature-card__title {
  margin: 16px 0 8px;
}

body.ax-scope .ax-lp-feature-card__desc {
  color: var(--ax-color-neutral-700);
  margin: 0;
}

/* ── Témoignages — carrousel (adapté de axialys-home.html .testi) ── */
body.ax-scope .ax-lp-testi-section {
  background: #fff;
  overflow: hidden;
}

body.ax-scope .ax-lp-testi-header {
  text-align: center;
  margin-bottom: 40px;
}

body.ax-scope .ax-lp-testi-outer {
  position: relative;
  overflow: hidden;
  margin: 0 calc(-1 * var(--ax-container-padding-x, 24px));
}

body.ax-scope .ax-lp-testi-outer::before,
body.ax-scope .ax-lp-testi-outer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}

body.ax-scope .ax-lp-testi-outer::before {
  left: 0;
  background: linear-gradient(to right, #fff 40%, transparent);
}

body.ax-scope .ax-lp-testi-outer::after {
  right: 0;
  background: linear-gradient(to left, #fff 40%, transparent);
}

body.ax-scope .ax-lp-testi-track {
  display: flex;
  gap: 20px;
  padding: 12px var(--ax-container-padding-x, 24px) 8px;
  width: max-content;
  animation: ax-lp-testi-scroll 45s linear infinite;
}

body.ax-scope .ax-lp-testi-track:hover {
  animation-play-state: paused;
}

@keyframes ax-lp-testi-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

body.ax-scope .ax-lp-testi-card {
  width: 320px;
  flex-shrink: 0;
  background: var(--ax-color-blue-50, #EFF5FF);
  border-radius: var(--ax-radius-2xl);
  padding: 26px 24px 22px;
  box-shadow: var(--ax-shadow-sm);
}

body.ax-scope .ax-lp-testi-num {
  display: block;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--ax-color-blue-500);
}

body.ax-scope .ax-lp-testi-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ax-color-primary-500);
}

body.ax-scope .ax-lp-testi-quote {
  font-size: 14px;
  color: rgba(33, 29, 109, .72);
  line-height: 1.65;
  margin: 16px 0 0;
}

body.ax-scope .ax-lp-testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

body.ax-scope .ax-lp-testi-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

body.ax-scope .ax-lp-testi-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ax-color-primary-500);
}

body.ax-scope .ax-lp-testi-role {
  font-size: 12px;
  color: var(--ax-color-neutral-700);
  display: block;
}

/* ── CTA final — carte gradient indigo ── */
body.ax-scope .ax-lp-cta-final {
  text-align: center;
  padding: 56px 40px;
}

body.ax-scope .ax-lp-cta-final__title {
  margin: 0 0 12px;
}

body.ax-scope .ax-lp-cta-final__desc {
  max-width: 480px;
  margin-inline: auto;
}

/* ── Barre CTA sticky mobile ── */
body.ax-scope .ax-lp-sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--ax-color-neutral-0);
  border-top: 1px solid var(--ax-color-neutral-100);
  padding: 12px var(--ax-space-4);
  box-shadow: 0 -6px 20px rgba(33, 29, 109, .08);
}

body.ax-scope .ax-lp-sticky-cta .ax-btn {
  width: 100%;
}

@media (max-width: 640px) {
  body.ax-scope .ax-lp-sticky-cta {
    display: block;
  }

  body.ax-scope.ax-lp-page {
    padding-bottom: 68px;
  }
}

/* ── Footer minimal LP ── */
body.ax-scope .ax-lp-footer {
  text-align: center;
  padding: var(--ax-space-10) var(--ax-space-6);
  color: var(--ax-color-neutral-500);
  font-size: 13px;
}

body.ax-scope .ax-lp-footer strong {
  color: var(--ax-color-primary-500);
}


/* ────────────────────────────────────────────────────────────────
 * 23. AX — LP TEMPLATE PRIX
 *
 *  Construit en réel sur preprod avec le widget natif Elementor
 *  "Price Table" (.elementor-price-table) plutôt que le markup HTML
 *  custom de la maquette (mockups/ax-lp-prix-template.html) — plus
 *  simple à maintenir dans l'éditeur, moins de classes ax-lp-* à
 *  retenir. .ax-lp-plan-card--featured se pose sur le widget/container
 *  du forfait mis en avant (ex. Pro) ; .ax-lp-plan-card__price* et
 *  __badge restent des classes maison, posées sur des widgets à part
 *  (Texte/Titre) à côté du Price Table, pas sur le widget lui-même.
 * ──────────────────────────────────────────────────────────────── */

/* Le prix natif du widget est masqué : le prix affiché est le bloc
   .ax-lp-plan-card__price ci-dessous (chiffre géant + dégradé),
   posé à côté en widget séparé plutôt que stylé depuis le widget. */
.ax-lp-plan-card--featured .elementor-price-table__price{display:none!important}

/* Liste de fonctionnalités du widget → grille 2 colonnes (remplit la
   largeur de la carte au lieu d'empiler les lignes en 1 colonne). */
.ax-lp-plan-card--featured .elementor-price-table__features-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
}
/* Elementor ajoute par défaut un espacement pensé pour une liste
   empilée sur 1 colonne (marge avant le séparateur ":before", marge
   inline sur le texte de chaque ligne) — à retirer pour que la grille
   2 colonnes ne laisse pas de décalages entre les lignes. */
.ax-lp-plan-card--featured .elementor-price-table .elementor-price-table__features-list li:not(:first-child):before{margin:0}
.ax-lp-plan-card--featured .elementor-price-table .elementor-price-table__features-list li .elementor-price-table__feature-inner{margin-inline:0}

/* Style de chaque ligne de fonctionnalité (icône + texte alignés). */
.ax-lp-plan-card--featured .elementor-price-table__feature-inner {
    display: flex;
    align-items: center;
    gap: 0px;
    font-size: 14px;
    color: var(--ax-color-neutral-900);
}

/* ── Prix custom (widget à part, à côté du Price Table) ──────────────
   Chiffres sur une ligne (currency+value+decimals dans .price-row),
   unité EN DESSOUS sur sa propre ligne (.price-unit) — aligné à droite. */
.ax-lp-plan-card__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}
.ax-lp-plan-card__price-row {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}
.ax-lp-plan-card__price-currency, .ax-lp-plan-card__price-decimals {
    font-size: 26px;
    font-weight: 700;
    color: var(--ax-color-primary-500);
    margin-top: 14px;
}
.ax-lp-plan-card__price-value {
    font-size: 76px;
    font-weight: 800;
    line-height: 1;
}
.ax-lp-plan-card__price-unit {
    display: block;
    font-size: 13px;
    color: var(--ax-color-neutral-500);
    margin-top: 0px;
    white-space: nowrap;
    text-align: right;
}

/* Ruban "Populaire" — coin haut-droit de la carte, coupe diagonale
   (border-radius asymétrique) plutôt qu'un simple coin arrondi. */
body.ax-scope .ax-lp-plan-card__badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--ax-color-accent-500);
    color: var(--ax-color-neutral-0);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius:0 1.75em 0 1.75em;
}

/* ── Mobile — recentrer prix + nom/tagline une fois empilés ──────────
   .ax-grid-2 (générique, tout le site) met prix et nom/forfait côte à
   côte sur desktop (prix aligné à droite dans sa moitié, nom aligné à
   gauche dans la sienne) et les empile déjà en 1 colonne ≤768px — mais
   chaque bloc garde son alignement pensé pour le mode côte à côte, ce
   qui donne un rendu décalé une fois en pleine largeur (constaté sur
   /devis-couplage-telephonie-informatique/). .boxFofait scope la
   correction à la carte forfait (ne touche pas les autres ax-grid-2
   du site). Idem pour la liste de fonctionnalités : repasse en 1
   colonne, 2 colonnes est trop serré sur mobile. */
@media (max-width: 768px) {
  .boxFofait .ax-grid-2 > * {
    /* Chaque enfant direct de .ax-grid-2 est lui-même un conteneur flex
       (créé dans Elementor) qui positionne SON contenu via justify-content
       (axe principal, row) — align-items/text-align seuls ne suffisaient
       pas, le contenu restait collé à droite/gauche (justify-content:
       flex-end sur le bloc prix, flex-start sur le bloc nom/tagline). */
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }
  .boxFofait .ax-lp-plan-card__price {
    align-items: center !important;
  }
  .boxFofait .ax-lp-plan-card__price-row,
  .boxFofait .ax-lp-plan-card__price-unit {
    text-align: center !important;
  }
  .ax-lp-plan-card--featured .elementor-price-table__features-list {
    grid-template-columns: 1fr !important;
  }
}

/* ── Logos clients toujours en couleur ────────────────────────────────
   style.css (thème) grise les logos par défaut et ne rend la couleur
   qu'au survol (".logoBoucle .elementor-shortcode img" / ":hover img").
   Neutralisé ici pour la boucle de logos identifiée par #customBoucleLogo
   (bloc parent) : couleur affichée en permanence, plus de gris. */
#customBoucleLogo .elementor-shortcode img {
  filter: grayscale(0) opacity(1) !important;
}

/* Mobile — 4 logos statiques sur desktop, 3 sur mobile (le 4ᵉ est
   masqué) : pas de carrousel, pour ne pas charger de ressource inutile
   pour 4 logos fixes. */
@media (max-width: 480px) {
  #customBoucleLogo .ax-lp-logo-item:nth-child(4) {
    display: none;
  }
}