@charset "UTF-8";
/* =========================================
   Main entry — compile tout en 1 seul CSS
========================================= */
:root {
  /* =========
   * Colors
   * ========= */
  --c-bg: #ffffff;
  --c-surface: #f0f5fb;
  --c-text: #405072;
  --c-titre: #000021;
  --c-muted: #8196a8;
  --c-border: #8196a8;
  --c-ton: #1637f4;
  --c-ton2: #c6ec00;
  --c-ton3: #d4c8ff;
  --c-ton4: #d1dde8;
  --c-ton5: #f0f5fb;
  --c-title-blanc: #f0f5fb;
  --c-text-blanc: #f0f5fb;
  /* =========
   * Typography
   * ========= */
  --ff-base: 'Inter', sans-serif;
  /* police de base : texte courant, UI */
  --ff-titre: 'itc-avant-garde-gothic-pro', sans-serif;
  /* police titres : peut être différente selon le projet */
  --fs-body: 14px; /* texte courant (paragraphes) */
  --fs-small: 1.4rem; /* textes secondaires : meta, légendes */
  --fs-h6: 1.9rem;
  --fs-h5: 1.9rem;
  --fs-h4: 1.9rem; /* petits titres, cards */
  --fs-h3: 2rem; /* titres de section secondaires */
  --fs-h2: 3.5rem; /* titres de section principaux */
  --fs-h1: 5.75rem; /* titre de page */
  --fs-hero: 6rem; /* titre hero / landing */
  --lh-base: 1.2; /* interligne texte courant */
  --lh-tight: 1; /* interligne titres */
  --fw-regular: 400; /* texte normal */
  --fw-medium: 500; /* emphase légère */
  --fw-semibold: 600; /* titres / boutons */
  --fw-bold: 700; /* emphase forte */
  /* =========
   * Spacing scale
   * ========= */
  --sp-0: 0; /* aucun espacement */
  --sp-1: 0.25rem; /* 4px : micro-espaces */
  --sp-2: 0.5rem; /* 8px : éléments serrés */
  --sp-3: 0.75rem; /* 12px : texte / icônes */
  --sp-4: 1rem; /* 16px : espacement standard */
  --sp-5: 1.5rem; /* 24px : blocs / cards */
  --sp-6: 2rem; /* 32px : sections légères */
  --sp-7: 3rem; /* 48px : séparation forte */
  --sp-8: 4rem; /* 64px : sections larges */
  --sp-9: 6rem; /* 96px : hero / landing */
  /* =========
   * Layout
   * ========= */
  --container: 1350px;
  --gutter: var(--sp-4); /* padding horizontal du container */
  --section-pad: clamp(3rem, 6vw, 6rem);
  /* padding vertical des sections (responsive) */
  /* =========
   * UI
   * ========= */
  --radius-s: 0.25rem ; /* petits arrondis (inputs, badges) */
  --radius-m: 0.75rem ; /* arrondi standard (cards, boutons) */
  --radius-l: 100px; /* gros blocs / hero */
  --radius-none: 0; /* pas d'arrondi */
  --radius-full: calc(infinity * 1px); /* arrondi infini (cercle) */
  --shadow-s: 0 6px 18px rgba(0,0,0,.08);
  /* ombre légère : hover, cartes */
  --shadow-m: 0 14px 40px rgba(0,0,0,.12);
  /* ombre marquée : modales, focus */
  --border-w: 2px; /* épaisseur standard des bordures */
  /* =========
   * Motion (CSS + GSAP)
   * ========= */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* easing standard pour transitions et animations */
  --reveal-y: 16px; /* déplacement vertical des reveals */
  --reveal-stagger: 0.08; /* délai entre items (GSAP stagger) */
  --reveal-delay: 0; /* délai global avant animation */
  /* =========
  * TRANSITION BOUTONS OU AUTRE 
  * ========= */
  --ease-smooth: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 250ms;
  --dur-2: 500ms;
  --dur-3: 850ms;
  --t-ui: var(--dur-2) var(--ease-smooth);
  --tp-ui: color, scale, background-color, border-color, opacity, transform, filter, width;
}

/* ==========================================================================
   TOKENS — SPACING / BREAKPOINTS
   ========================================================================== */
/* Breakpoints (données brutes) */
/* Helper clamp — ici volontairement */
/* Plage fluide globale */
/* Spacing tokens (design system) */
:root {
  --space-small: clamp(2px, 0.2px + 0.375vw, 5px);
  --space-normal: clamp(16px, 11.2px + 1vw, 24px);
  --space-big: clamp(24px, 14.4px + 2vw, 40px);
  --space-verybig: clamp(40px, 16px + 5vw, 80px);
  --space-extrabig: clamp(80px, 20px + 12.5vw, 180px);
  --gutter: calc(var(--space-normal) / 1.5);
}

/* Map SCSS consommée par les mixins */
/* =========================================
   Mixins & tools
   Usage interne SCSS uniquement
========================================= */
/* Breakpoints SCSS (outil de dev, pas un token) */
/* -----------------------------------------
   Responsive helper
   Usage : @include resp-to(md) { ... }
------------------------------------------ */
/* -----------------------------------------
   Visually hidden (accessibilité)
------------------------------------------ */
/* -----------------------------------------
   Transition helper (branché sur tokens)
------------------------------------------ */
/* 3) Helpers vitesse (optionnel) */
/* 4) Respect reduced motion (bonus propre) */
/* =========================================
   EXEMPLES D’USAGE
   ========================================= */
/* ==========================================================================
   MIXINS — SPACING HELPERS (COMPLET)
   Génère :
   1) {size}-{prop} + variantes -s / -l            (margin | padding)
   2) {size}-{prop}-{dir} + variantes -s / -l       (top|bottom|left|right|x|y)
   size = small|normal|big|verybig|extrabig
   ========================================================================== */
/* Media query helper */
/* Alias responsive : garde -s / -l */
/* Applique une règle selon prop + direction */
/* Générateur de classes
   - si $dir == null => génère {size}-{prop}
   - sinon => génère {size}-{prop}-{dir}
*/
/* ==========================================================================
   BUILD
   ========================================================================== */
/* 1) Base : {size}-{prop} */
.small-margin {
  margin: var(--space-small) !important;
}

.small-padding {
  padding: var(--space-small) !important;
}

.normal-margin {
  margin: var(--space-normal) !important;
}

.normal-padding {
  padding: var(--space-normal) !important;
}

.big-margin {
  margin: var(--space-big) !important;
}

.big-padding {
  padding: var(--space-big) !important;
}

.verybig-margin {
  margin: var(--space-verybig) !important;
}

.verybig-padding {
  padding: var(--space-verybig) !important;
}

.extrabig-margin {
  margin: var(--space-extrabig) !important;
}

.extrabig-padding {
  padding: var(--space-extrabig) !important;
}

/* 2) Base : {size}-{prop}-{dir} */
.small-margin-top {
  margin-top: var(--space-small) !important;
}

.small-margin-bottom {
  margin-bottom: var(--space-small) !important;
}

.small-margin-left {
  margin-left: var(--space-small) !important;
}

.small-margin-right {
  margin-right: var(--space-small) !important;
}

.small-margin-x {
  margin-left: var(--space-small) !important;
  margin-right: var(--space-small) !important;
}

.small-margin-y {
  margin-top: var(--space-small) !important;
  margin-bottom: var(--space-small) !important;
}

.small-padding-top {
  padding-top: var(--space-small) !important;
}

.small-padding-bottom {
  padding-bottom: var(--space-small) !important;
}

.small-padding-left {
  padding-left: var(--space-small) !important;
}

.small-padding-right {
  padding-right: var(--space-small) !important;
}

.small-padding-x {
  padding-left: var(--space-small) !important;
  padding-right: var(--space-small) !important;
}

.small-padding-y {
  padding-top: var(--space-small) !important;
  padding-bottom: var(--space-small) !important;
}

.normal-margin-top {
  margin-top: var(--space-normal) !important;
}

.normal-margin-bottom {
  margin-bottom: var(--space-normal) !important;
}

.normal-margin-left {
  margin-left: var(--space-normal) !important;
}

.normal-margin-right {
  margin-right: var(--space-normal) !important;
}

.normal-margin-x {
  margin-left: var(--space-normal) !important;
  margin-right: var(--space-normal) !important;
}

.normal-margin-y {
  margin-top: var(--space-normal) !important;
  margin-bottom: var(--space-normal) !important;
}

.normal-padding-top {
  padding-top: var(--space-normal) !important;
}

.normal-padding-bottom {
  padding-bottom: var(--space-normal) !important;
}

.normal-padding-left {
  padding-left: var(--space-normal) !important;
}

.normal-padding-right {
  padding-right: var(--space-normal) !important;
}

.normal-padding-x {
  padding-left: var(--space-normal) !important;
  padding-right: var(--space-normal) !important;
}

.normal-padding-y {
  padding-top: var(--space-normal) !important;
  padding-bottom: var(--space-normal) !important;
}

.big-margin-top {
  margin-top: var(--space-big) !important;
}

.big-margin-bottom {
  margin-bottom: var(--space-big) !important;
}

.big-margin-left {
  margin-left: var(--space-big) !important;
}

.big-margin-right {
  margin-right: var(--space-big) !important;
}

.big-margin-x {
  margin-left: var(--space-big) !important;
  margin-right: var(--space-big) !important;
}

.big-margin-y {
  margin-top: var(--space-big) !important;
  margin-bottom: var(--space-big) !important;
}

.big-padding-top {
  padding-top: var(--space-big) !important;
}

.big-padding-bottom {
  padding-bottom: var(--space-big) !important;
}

.big-padding-left {
  padding-left: var(--space-big) !important;
}

.big-padding-right {
  padding-right: var(--space-big) !important;
}

.big-padding-x {
  padding-left: var(--space-big) !important;
  padding-right: var(--space-big) !important;
}

.big-padding-y {
  padding-top: var(--space-big) !important;
  padding-bottom: var(--space-big) !important;
}

.verybig-margin-top {
  margin-top: var(--space-verybig) !important;
}

.verybig-margin-bottom {
  margin-bottom: var(--space-verybig) !important;
}

.verybig-margin-left {
  margin-left: var(--space-verybig) !important;
}

.verybig-margin-right {
  margin-right: var(--space-verybig) !important;
}

.verybig-margin-x {
  margin-left: var(--space-verybig) !important;
  margin-right: var(--space-verybig) !important;
}

.verybig-margin-y {
  margin-top: var(--space-verybig) !important;
  margin-bottom: var(--space-verybig) !important;
}

.verybig-padding-top {
  padding-top: var(--space-verybig) !important;
}

.verybig-padding-bottom {
  padding-bottom: var(--space-verybig) !important;
}

.verybig-padding-left {
  padding-left: var(--space-verybig) !important;
}

.verybig-padding-right {
  padding-right: var(--space-verybig) !important;
}

.verybig-padding-x {
  padding-left: var(--space-verybig) !important;
  padding-right: var(--space-verybig) !important;
}

.verybig-padding-y {
  padding-top: var(--space-verybig) !important;
  padding-bottom: var(--space-verybig) !important;
}

.extrabig-margin-top {
  margin-top: var(--space-extrabig) !important;
}

.extrabig-margin-bottom {
  margin-bottom: var(--space-extrabig) !important;
}

.extrabig-margin-left {
  margin-left: var(--space-extrabig) !important;
}

.extrabig-margin-right {
  margin-right: var(--space-extrabig) !important;
}

.extrabig-margin-x {
  margin-left: var(--space-extrabig) !important;
  margin-right: var(--space-extrabig) !important;
}

.extrabig-margin-y {
  margin-top: var(--space-extrabig) !important;
  margin-bottom: var(--space-extrabig) !important;
}

.extrabig-padding-top {
  padding-top: var(--space-extrabig) !important;
}

.extrabig-padding-bottom {
  padding-bottom: var(--space-extrabig) !important;
}

.extrabig-padding-left {
  padding-left: var(--space-extrabig) !important;
}

.extrabig-padding-right {
  padding-right: var(--space-extrabig) !important;
}

.extrabig-padding-x {
  padding-left: var(--space-extrabig) !important;
  padding-right: var(--space-extrabig) !important;
}

.extrabig-padding-y {
  padding-top: var(--space-extrabig) !important;
  padding-bottom: var(--space-extrabig) !important;
}

/* 3) Responsive -s / -l pour {size}-{prop} et {size}-{prop}-{dir} */
/* {size}-{prop}-s|-l */
@media (min-width: 768px) {
  .small-margin-s {
    margin: var(--space-small) !important;
  }
}
@media (min-width: 768px) {
  .small-padding-s {
    padding: var(--space-small) !important;
  }
}
@media (min-width: 768px) {
  .normal-margin-s {
    margin: var(--space-normal) !important;
  }
}
@media (min-width: 768px) {
  .normal-padding-s {
    padding: var(--space-normal) !important;
  }
}
@media (min-width: 768px) {
  .big-margin-s {
    margin: var(--space-big) !important;
  }
}
@media (min-width: 768px) {
  .big-padding-s {
    padding: var(--space-big) !important;
  }
}
@media (min-width: 768px) {
  .verybig-margin-s {
    margin: var(--space-verybig) !important;
  }
}
@media (min-width: 768px) {
  .verybig-padding-s {
    padding: var(--space-verybig) !important;
  }
}
@media (min-width: 768px) {
  .extrabig-margin-s {
    margin: var(--space-extrabig) !important;
  }
}
@media (min-width: 768px) {
  .extrabig-padding-s {
    padding: var(--space-extrabig) !important;
  }
}
/* {size}-{prop}-{dir}-s|-l */
@media (min-width: 768px) {
  .small-margin-top-s {
    margin-top: var(--space-small) !important;
  }
}
@media (min-width: 768px) {
  .small-margin-bottom-s {
    margin-bottom: var(--space-small) !important;
  }
}
@media (min-width: 768px) {
  .small-margin-left-s {
    margin-left: var(--space-small) !important;
  }
}
@media (min-width: 768px) {
  .small-margin-right-s {
    margin-right: var(--space-small) !important;
  }
}
@media (min-width: 768px) {
  .small-margin-x-s {
    margin-left: var(--space-small) !important;
    margin-right: var(--space-small) !important;
  }
}
@media (min-width: 768px) {
  .small-margin-y-s {
    margin-top: var(--space-small) !important;
    margin-bottom: var(--space-small) !important;
  }
}
@media (min-width: 768px) {
  .small-padding-top-s {
    padding-top: var(--space-small) !important;
  }
}
@media (min-width: 768px) {
  .small-padding-bottom-s {
    padding-bottom: var(--space-small) !important;
  }
}
@media (min-width: 768px) {
  .small-padding-left-s {
    padding-left: var(--space-small) !important;
  }
}
@media (min-width: 768px) {
  .small-padding-right-s {
    padding-right: var(--space-small) !important;
  }
}
@media (min-width: 768px) {
  .small-padding-x-s {
    padding-left: var(--space-small) !important;
    padding-right: var(--space-small) !important;
  }
}
@media (min-width: 768px) {
  .small-padding-y-s {
    padding-top: var(--space-small) !important;
    padding-bottom: var(--space-small) !important;
  }
}
@media (min-width: 768px) {
  .normal-margin-top-s {
    margin-top: var(--space-normal) !important;
  }
}
@media (min-width: 768px) {
  .normal-margin-bottom-s {
    margin-bottom: var(--space-normal) !important;
  }
}
@media (min-width: 768px) {
  .normal-margin-left-s {
    margin-left: var(--space-normal) !important;
  }
}
@media (min-width: 768px) {
  .normal-margin-right-s {
    margin-right: var(--space-normal) !important;
  }
}
@media (min-width: 768px) {
  .normal-margin-x-s {
    margin-left: var(--space-normal) !important;
    margin-right: var(--space-normal) !important;
  }
}
@media (min-width: 768px) {
  .normal-margin-y-s {
    margin-top: var(--space-normal) !important;
    margin-bottom: var(--space-normal) !important;
  }
}
@media (min-width: 768px) {
  .normal-padding-top-s {
    padding-top: var(--space-normal) !important;
  }
}
@media (min-width: 768px) {
  .normal-padding-bottom-s {
    padding-bottom: var(--space-normal) !important;
  }
}
@media (min-width: 768px) {
  .normal-padding-left-s {
    padding-left: var(--space-normal) !important;
  }
}
@media (min-width: 768px) {
  .normal-padding-right-s {
    padding-right: var(--space-normal) !important;
  }
}
@media (min-width: 768px) {
  .normal-padding-x-s {
    padding-left: var(--space-normal) !important;
    padding-right: var(--space-normal) !important;
  }
}
@media (min-width: 768px) {
  .normal-padding-y-s {
    padding-top: var(--space-normal) !important;
    padding-bottom: var(--space-normal) !important;
  }
}
@media (min-width: 768px) {
  .big-margin-top-s {
    margin-top: var(--space-big) !important;
  }
}
@media (min-width: 768px) {
  .big-margin-bottom-s {
    margin-bottom: var(--space-big) !important;
  }
}
@media (min-width: 768px) {
  .big-margin-left-s {
    margin-left: var(--space-big) !important;
  }
}
@media (min-width: 768px) {
  .big-margin-right-s {
    margin-right: var(--space-big) !important;
  }
}
@media (min-width: 768px) {
  .big-margin-x-s {
    margin-left: var(--space-big) !important;
    margin-right: var(--space-big) !important;
  }
}
@media (min-width: 768px) {
  .big-margin-y-s {
    margin-top: var(--space-big) !important;
    margin-bottom: var(--space-big) !important;
  }
}
@media (min-width: 768px) {
  .big-padding-top-s {
    padding-top: var(--space-big) !important;
  }
}
@media (min-width: 768px) {
  .big-padding-bottom-s {
    padding-bottom: var(--space-big) !important;
  }
}
@media (min-width: 768px) {
  .big-padding-left-s {
    padding-left: var(--space-big) !important;
  }
}
@media (min-width: 768px) {
  .big-padding-right-s {
    padding-right: var(--space-big) !important;
  }
}
@media (min-width: 768px) {
  .big-padding-x-s {
    padding-left: var(--space-big) !important;
    padding-right: var(--space-big) !important;
  }
}
@media (min-width: 768px) {
  .big-padding-y-s {
    padding-top: var(--space-big) !important;
    padding-bottom: var(--space-big) !important;
  }
}
@media (min-width: 768px) {
  .verybig-margin-top-s {
    margin-top: var(--space-verybig) !important;
  }
}
@media (min-width: 768px) {
  .verybig-margin-bottom-s {
    margin-bottom: var(--space-verybig) !important;
  }
}
@media (min-width: 768px) {
  .verybig-margin-left-s {
    margin-left: var(--space-verybig) !important;
  }
}
@media (min-width: 768px) {
  .verybig-margin-right-s {
    margin-right: var(--space-verybig) !important;
  }
}
@media (min-width: 768px) {
  .verybig-margin-x-s {
    margin-left: var(--space-verybig) !important;
    margin-right: var(--space-verybig) !important;
  }
}
@media (min-width: 768px) {
  .verybig-margin-y-s {
    margin-top: var(--space-verybig) !important;
    margin-bottom: var(--space-verybig) !important;
  }
}
@media (min-width: 768px) {
  .verybig-padding-top-s {
    padding-top: var(--space-verybig) !important;
  }
}
@media (min-width: 768px) {
  .verybig-padding-bottom-s {
    padding-bottom: var(--space-verybig) !important;
  }
}
@media (min-width: 768px) {
  .verybig-padding-left-s {
    padding-left: var(--space-verybig) !important;
  }
}
@media (min-width: 768px) {
  .verybig-padding-right-s {
    padding-right: var(--space-verybig) !important;
  }
}
@media (min-width: 768px) {
  .verybig-padding-x-s {
    padding-left: var(--space-verybig) !important;
    padding-right: var(--space-verybig) !important;
  }
}
@media (min-width: 768px) {
  .verybig-padding-y-s {
    padding-top: var(--space-verybig) !important;
    padding-bottom: var(--space-verybig) !important;
  }
}
@media (min-width: 768px) {
  .extrabig-margin-top-s {
    margin-top: var(--space-extrabig) !important;
  }
}
@media (min-width: 768px) {
  .extrabig-margin-bottom-s {
    margin-bottom: var(--space-extrabig) !important;
  }
}
@media (min-width: 768px) {
  .extrabig-margin-left-s {
    margin-left: var(--space-extrabig) !important;
  }
}
@media (min-width: 768px) {
  .extrabig-margin-right-s {
    margin-right: var(--space-extrabig) !important;
  }
}
@media (min-width: 768px) {
  .extrabig-margin-x-s {
    margin-left: var(--space-extrabig) !important;
    margin-right: var(--space-extrabig) !important;
  }
}
@media (min-width: 768px) {
  .extrabig-margin-y-s {
    margin-top: var(--space-extrabig) !important;
    margin-bottom: var(--space-extrabig) !important;
  }
}
@media (min-width: 768px) {
  .extrabig-padding-top-s {
    padding-top: var(--space-extrabig) !important;
  }
}
@media (min-width: 768px) {
  .extrabig-padding-bottom-s {
    padding-bottom: var(--space-extrabig) !important;
  }
}
@media (min-width: 768px) {
  .extrabig-padding-left-s {
    padding-left: var(--space-extrabig) !important;
  }
}
@media (min-width: 768px) {
  .extrabig-padding-right-s {
    padding-right: var(--space-extrabig) !important;
  }
}
@media (min-width: 768px) {
  .extrabig-padding-x-s {
    padding-left: var(--space-extrabig) !important;
    padding-right: var(--space-extrabig) !important;
  }
}
@media (min-width: 768px) {
  .extrabig-padding-y-s {
    padding-top: var(--space-extrabig) !important;
    padding-bottom: var(--space-extrabig) !important;
  }
}
/* {size}-{prop}-s|-l */
@media (min-width: 1024px) {
  .small-margin-l {
    margin: var(--space-small) !important;
  }
}
@media (min-width: 1024px) {
  .small-padding-l {
    padding: var(--space-small) !important;
  }
}
@media (min-width: 1024px) {
  .normal-margin-l {
    margin: var(--space-normal) !important;
  }
}
@media (min-width: 1024px) {
  .normal-padding-l {
    padding: var(--space-normal) !important;
  }
}
@media (min-width: 1024px) {
  .big-margin-l {
    margin: var(--space-big) !important;
  }
}
@media (min-width: 1024px) {
  .big-padding-l {
    padding: var(--space-big) !important;
  }
}
@media (min-width: 1024px) {
  .verybig-margin-l {
    margin: var(--space-verybig) !important;
  }
}
@media (min-width: 1024px) {
  .verybig-padding-l {
    padding: var(--space-verybig) !important;
  }
}
@media (min-width: 1024px) {
  .extrabig-margin-l {
    margin: var(--space-extrabig) !important;
  }
}
@media (min-width: 1024px) {
  .extrabig-padding-l {
    padding: var(--space-extrabig) !important;
  }
}
/* {size}-{prop}-{dir}-s|-l */
@media (min-width: 1024px) {
  .small-margin-top-l {
    margin-top: var(--space-small) !important;
  }
}
@media (min-width: 1024px) {
  .small-margin-bottom-l {
    margin-bottom: var(--space-small) !important;
  }
}
@media (min-width: 1024px) {
  .small-margin-left-l {
    margin-left: var(--space-small) !important;
  }
}
@media (min-width: 1024px) {
  .small-margin-right-l {
    margin-right: var(--space-small) !important;
  }
}
@media (min-width: 1024px) {
  .small-margin-x-l {
    margin-left: var(--space-small) !important;
    margin-right: var(--space-small) !important;
  }
}
@media (min-width: 1024px) {
  .small-margin-y-l {
    margin-top: var(--space-small) !important;
    margin-bottom: var(--space-small) !important;
  }
}
@media (min-width: 1024px) {
  .small-padding-top-l {
    padding-top: var(--space-small) !important;
  }
}
@media (min-width: 1024px) {
  .small-padding-bottom-l {
    padding-bottom: var(--space-small) !important;
  }
}
@media (min-width: 1024px) {
  .small-padding-left-l {
    padding-left: var(--space-small) !important;
  }
}
@media (min-width: 1024px) {
  .small-padding-right-l {
    padding-right: var(--space-small) !important;
  }
}
@media (min-width: 1024px) {
  .small-padding-x-l {
    padding-left: var(--space-small) !important;
    padding-right: var(--space-small) !important;
  }
}
@media (min-width: 1024px) {
  .small-padding-y-l {
    padding-top: var(--space-small) !important;
    padding-bottom: var(--space-small) !important;
  }
}
@media (min-width: 1024px) {
  .normal-margin-top-l {
    margin-top: var(--space-normal) !important;
  }
}
@media (min-width: 1024px) {
  .normal-margin-bottom-l {
    margin-bottom: var(--space-normal) !important;
  }
}
@media (min-width: 1024px) {
  .normal-margin-left-l {
    margin-left: var(--space-normal) !important;
  }
}
@media (min-width: 1024px) {
  .normal-margin-right-l {
    margin-right: var(--space-normal) !important;
  }
}
@media (min-width: 1024px) {
  .normal-margin-x-l {
    margin-left: var(--space-normal) !important;
    margin-right: var(--space-normal) !important;
  }
}
@media (min-width: 1024px) {
  .normal-margin-y-l {
    margin-top: var(--space-normal) !important;
    margin-bottom: var(--space-normal) !important;
  }
}
@media (min-width: 1024px) {
  .normal-padding-top-l {
    padding-top: var(--space-normal) !important;
  }
}
@media (min-width: 1024px) {
  .normal-padding-bottom-l {
    padding-bottom: var(--space-normal) !important;
  }
}
@media (min-width: 1024px) {
  .normal-padding-left-l {
    padding-left: var(--space-normal) !important;
  }
}
@media (min-width: 1024px) {
  .normal-padding-right-l {
    padding-right: var(--space-normal) !important;
  }
}
@media (min-width: 1024px) {
  .normal-padding-x-l {
    padding-left: var(--space-normal) !important;
    padding-right: var(--space-normal) !important;
  }
}
@media (min-width: 1024px) {
  .normal-padding-y-l {
    padding-top: var(--space-normal) !important;
    padding-bottom: var(--space-normal) !important;
  }
}
@media (min-width: 1024px) {
  .big-margin-top-l {
    margin-top: var(--space-big) !important;
  }
}
@media (min-width: 1024px) {
  .big-margin-bottom-l {
    margin-bottom: var(--space-big) !important;
  }
}
@media (min-width: 1024px) {
  .big-margin-left-l {
    margin-left: var(--space-big) !important;
  }
}
@media (min-width: 1024px) {
  .big-margin-right-l {
    margin-right: var(--space-big) !important;
  }
}
@media (min-width: 1024px) {
  .big-margin-x-l {
    margin-left: var(--space-big) !important;
    margin-right: var(--space-big) !important;
  }
}
@media (min-width: 1024px) {
  .big-margin-y-l {
    margin-top: var(--space-big) !important;
    margin-bottom: var(--space-big) !important;
  }
}
@media (min-width: 1024px) {
  .big-padding-top-l {
    padding-top: var(--space-big) !important;
  }
}
@media (min-width: 1024px) {
  .big-padding-bottom-l {
    padding-bottom: var(--space-big) !important;
  }
}
@media (min-width: 1024px) {
  .big-padding-left-l {
    padding-left: var(--space-big) !important;
  }
}
@media (min-width: 1024px) {
  .big-padding-right-l {
    padding-right: var(--space-big) !important;
  }
}
@media (min-width: 1024px) {
  .big-padding-x-l {
    padding-left: var(--space-big) !important;
    padding-right: var(--space-big) !important;
  }
}
@media (min-width: 1024px) {
  .big-padding-y-l {
    padding-top: var(--space-big) !important;
    padding-bottom: var(--space-big) !important;
  }
}
@media (min-width: 1024px) {
  .verybig-margin-top-l {
    margin-top: var(--space-verybig) !important;
  }
}
@media (min-width: 1024px) {
  .verybig-margin-bottom-l {
    margin-bottom: var(--space-verybig) !important;
  }
}
@media (min-width: 1024px) {
  .verybig-margin-left-l {
    margin-left: var(--space-verybig) !important;
  }
}
@media (min-width: 1024px) {
  .verybig-margin-right-l {
    margin-right: var(--space-verybig) !important;
  }
}
@media (min-width: 1024px) {
  .verybig-margin-x-l {
    margin-left: var(--space-verybig) !important;
    margin-right: var(--space-verybig) !important;
  }
}
@media (min-width: 1024px) {
  .verybig-margin-y-l {
    margin-top: var(--space-verybig) !important;
    margin-bottom: var(--space-verybig) !important;
  }
}
@media (min-width: 1024px) {
  .verybig-padding-top-l {
    padding-top: var(--space-verybig) !important;
  }
}
@media (min-width: 1024px) {
  .verybig-padding-bottom-l {
    padding-bottom: var(--space-verybig) !important;
  }
}
@media (min-width: 1024px) {
  .verybig-padding-left-l {
    padding-left: var(--space-verybig) !important;
  }
}
@media (min-width: 1024px) {
  .verybig-padding-right-l {
    padding-right: var(--space-verybig) !important;
  }
}
@media (min-width: 1024px) {
  .verybig-padding-x-l {
    padding-left: var(--space-verybig) !important;
    padding-right: var(--space-verybig) !important;
  }
}
@media (min-width: 1024px) {
  .verybig-padding-y-l {
    padding-top: var(--space-verybig) !important;
    padding-bottom: var(--space-verybig) !important;
  }
}
@media (min-width: 1024px) {
  .extrabig-margin-top-l {
    margin-top: var(--space-extrabig) !important;
  }
}
@media (min-width: 1024px) {
  .extrabig-margin-bottom-l {
    margin-bottom: var(--space-extrabig) !important;
  }
}
@media (min-width: 1024px) {
  .extrabig-margin-left-l {
    margin-left: var(--space-extrabig) !important;
  }
}
@media (min-width: 1024px) {
  .extrabig-margin-right-l {
    margin-right: var(--space-extrabig) !important;
  }
}
@media (min-width: 1024px) {
  .extrabig-margin-x-l {
    margin-left: var(--space-extrabig) !important;
    margin-right: var(--space-extrabig) !important;
  }
}
@media (min-width: 1024px) {
  .extrabig-margin-y-l {
    margin-top: var(--space-extrabig) !important;
    margin-bottom: var(--space-extrabig) !important;
  }
}
@media (min-width: 1024px) {
  .extrabig-padding-top-l {
    padding-top: var(--space-extrabig) !important;
  }
}
@media (min-width: 1024px) {
  .extrabig-padding-bottom-l {
    padding-bottom: var(--space-extrabig) !important;
  }
}
@media (min-width: 1024px) {
  .extrabig-padding-left-l {
    padding-left: var(--space-extrabig) !important;
  }
}
@media (min-width: 1024px) {
  .extrabig-padding-right-l {
    padding-right: var(--space-extrabig) !important;
  }
}
@media (min-width: 1024px) {
  .extrabig-padding-x-l {
    padding-left: var(--space-extrabig) !important;
    padding-right: var(--space-extrabig) !important;
  }
}
@media (min-width: 1024px) {
  .extrabig-padding-y-l {
    padding-top: var(--space-extrabig) !important;
    padding-bottom: var(--space-extrabig) !important;
  }
}
/* ==========================================================================
   RESPOND HELPERS — from / to
   ========================================================================== */
/* À partir d’un breakpoint (min-width) */
/* Jusqu’à un breakpoint (max-width) */
/* ==========================================================================
   TEXT COLOR HELPERS — sémantique "text-color-xxx" + option "-all"
   Basé sur tes variables :
   --c-ton.. --c-ton5, --c-bg, --c-surface, --c-titre
   ========================================================================== */
/* TON */
.text-color-ton {
  color: var(--c-ton) !important;
}

.text-color-ton-all {
  color: var(--c-ton) !important;
}
.text-color-ton-all * {
  color: inherit !important;
}

.text-color-ton2 {
  color: var(--c-ton2) !important;
}

.text-color-ton2-all {
  color: var(--c-ton2) !important;
}
.text-color-ton2-all * {
  color: inherit !important;
}

.text-color-ton3 {
  color: var(--c-ton3) !important;
}

.text-color-ton3-all {
  color: var(--c-ton3) !important;
}
.text-color-ton3-all * {
  color: inherit !important;
}

.text-color-ton4 {
  color: var(--c-ton4) !important;
}

.text-color-ton4-all {
  color: var(--c-ton4) !important;
}
.text-color-ton4-all * {
  color: inherit !important;
}

.text-color-ton5 {
  color: var(--c-ton5) !important;
}

.text-color-ton5-all {
  color: var(--c-ton5) !important;
}
.text-color-ton5-all * {
  color: inherit !important;
}

/* NEUTRES / STRUCTURE */
.text-color-bg {
  color: var(--c-bg) !important;
}

.text-color-bg-all {
  color: var(--c-bg) !important;
}
.text-color-bg-all * {
  color: inherit !important;
}

.text-color-surface {
  color: var(--c-surface) !important;
}

.text-color-surface-all {
  color: var(--c-surface) !important;
}
.text-color-surface-all * {
  color: inherit !important;
}

.text-color-titre {
  color: var(--c-titre) !important;
}

.text-color-titre-all {
  color: var(--c-titre) !important;
}
.text-color-titre-all * {
  color: inherit !important;
}

.text-color-text {
  color: var(--c-text) !important;
}

.text-color-text-all {
  color: var(--c-text) !important;
}
.text-color-text-all * {
  color: inherit !important;
}

/* =========================================
   Base — HTML + typographie + éléments
   Branche tout sur les tokens (root)
========================================= */
/* 1) Reset minimal, safe (pas d’overkill) */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  -moz-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
       text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* OK tant que tu ne “hijack” pas avec smooth scroll JS */
}

body {
  margin: 0;
  font-family: var(--ff-base);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2) Typo : titres */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--sp-4);
  font-family: var(--ff-titre);
  line-height: var(--lh-base);
  letter-spacing: normal;
  color: var(--c-titre);
}

.hero h1 {
  font-size: var(--fs-hero);
  /* -0.02px pour éviter le chevauchement */
}
@media (max-width: calc(480px - 0.02px)) {
  .hero h1 {
    font-size: 4rem;
  }
}
.hero p {
  font-size: var(--fs-h6);
}
.hero h2 {
  font-size: 4.7rem;
  font-weight: var(--fw-medium);
  /* -0.02px pour éviter le chevauchement */
}
@media (max-width: calc(480px - 0.02px)) {
  .hero h2 {
    font-size: 3rem;
  }
}
.hero h3 {
  font-size: 2.5rem;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  /* -0.02px pour éviter le chevauchement */
}
@media (max-width: calc(480px - 0.02px)) {
  h2 {
    font-size: 3rem;
  }
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
}

h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  /* -0.02px pour éviter le chevauchement */
}
@media (max-width: calc(480px - 0.02px)) {
  h4 {
    font-size: 2rem;
  }
}

/* h5/h6 : volontairement calés sur body + weight */
h5,
h6 {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

/* 3) Texte courant */
p {
  font-weight: var(--fw-medium);
  color: var(--c-text);
  line-height: var(--lh-base);
  font-size: var(--fs-body);
  font-family: var(--ff-base);
}

.small {
  font-size: var(--fs-small) !important;
  color: var(--c-muted);
}

.breadcrumb {
  font-size: var(--fs-small) !important;
  font-family: var(--ff-titre);
}
.breadcrumb .breadcrumb__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.breadcrumb .breadcrumb__list a {
  color: var(--c-bg);
}

.breadcrumb__item {
  position: relative;
  padding-right: 16px;
}
.breadcrumb__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 1px;
  height: 10px;
  background-color: var(--c-ton4);
}
.breadcrumb__item .breadcrumb__current {
  color: var(--c-ton) !important;
}

/* 4) Liens : sobres, accessibles */
a {
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  color: var(--c-ton);
}

a:hover {
  text-decoration-thickness: 2px;
}

/* 5) Listes */
ul,
ol {
  margin: 0 0 var(--sp-4);
  padding-left: 1.1em;
}

li {
  margin: 0.2em 0;
}

/* =========================================
   Layout — container / sections / stacks
   Objectif : construire vite dans Bricks
========================================= */
/* Container standard (à mettre sur tes wrappers de contenu) */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding: 0px;
}

/* Alignements utiles (sans multiplier les utilitaires) */
.align-center {
  text-align: center;
}

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

/* Background helpers (si tu veux des sections alternées vite) */
.bg-surface {
  background: var(--c-surface);
}

.bg-alt {
  background: var(--c-ton5);
}

/* =========================================
   Components — réutilisables et sobres
   Pensés pour Bricks + design system
========================================= */
/* =========
   Buttons
   ========= */
.btn {
  padding: 10px 48px 10px 16px !important;
  font-family: var(--ff-titre);
  font-size: 1.5rem;
  font-weight: var(--fw-semibold);
  letter-spacing: normal;
  border-radius: var(--radius-full);
  cursor: pointer;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
}
.btn:hover {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
}
.btn.primary {
  font-family: var(--ff-titre) !important;
  color: var(--c-bg);
  background-size: 300% 100%;
  background-image: -webkit-gradient(linear, left top, right top, from(var(--c-titre)), color-stop(var(--c-titre)), color-stop(var(--c-titre)), to(var(--c-ton)));
  background-image: linear-gradient(to right, var(--c-titre), var(--c-titre), var(--c-titre), var(--c-ton));
  position: relative;
  overflow: hidden;
}
.btn.primary::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 20px;
  height: 20px;
  right: 15px;
  background-image: url(https://prod2026.studio-laurierose.com/wp-content/uploads/2026/06/fleche-blanc.svg);
  background-repeat: no-repeat;
  opacity: 1 !important;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
}
.btn.primary:hover {
  background-position: 100% 0;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
}
.btn.primary:hover::before {
  top: 25%;
  -webkit-transform: translateY(0) rotate(-45deg);
          transform: translateY(0) rotate(-45deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
}
.btn.primary:hover::after {
  display: none !important;
}
.btn.secondary {
  color: var(--c-ton4);
  background-color: var(--c-ton);
}
.btn.secondary:hover {
  color: var(--c-titre);
  background-color: var(--c-ton3);
}
.btn.third {
  color: var(--c-ton4);
  background-color: var(--c-ton2);
}
.btn.third:hover {
  color: var(--c-titre);
  background-color: var(--c-ton4);
}
.btn.outline {
  border: var(--border-w) solid var(--c-ton);
  color: var(--c-ton);
}

/* =========
   nav
   ========= */
nav ul {
  margin-bottom: 0px;
}
nav ul a {
  font-family: var(--ff-texte);
  color: var(--c-titre);
  font-size: var(--fs-body);
  font-weight: var(--fw-normal);
}

.my-megamenu {
  position: fixed;
  top: var(--space-normal);
  left: 0;
  right: 0;
  width: 100%;
  background: transparent !important;
  background-color: transparent !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  z-index: 9999;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  /* max-width ne doit jamais se voir "rétrécir" à l'écran : elle change
     d'un coup (0ms), mais après un délai égal à la durée du fondu du fond
     (550ms) — donc la pilule reste resserrée tant que le fond est encore
     visible, et ne s'élargit qu'une fois totalement transparente. */
  -webkit-transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, max-width 0ms ease-in-out 550ms, backdrop-filter 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, max-width 0ms ease-in-out 550ms, backdrop-filter 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, max-width 0ms ease-in-out 550ms, backdrop-filter 550ms ease-in-out 0ms, transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, max-width 0ms ease-in-out 550ms, backdrop-filter 550ms ease-in-out 0ms, transform 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
  will-change: transform, opacity;
}
.my-megamenu .container {
  border-radius: var(--radius-s);
  -webkit-transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, transform 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
}
.my-megamenu .container .bloc-menu {
  -webkit-transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, transform 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
  width: 100%;
  max-width: var(--container);
}
.my-megamenu .container .bloc-menu .logo {
  -webkit-transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, transform 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
}
.my-megamenu h2 {
  font-size: 18px !important;
  font-weight: var(--fw-semibold) !important;
}
.my-megamenu h2 a {
  font-size: 14px !important;
  font-weight: var(--fw-normal) !important;
}
.my-megamenu h3 {
  font-size: 14px !important;
}
.my-megamenu p {
  font-size: 13px !important;
  font-weight: var(--fw-normal) !important;
}

.scrolling .my-megamenu {
  /* Le fond + blur sont posés ici (et non sur .container) car .my-megamenu
     porte will-change:transform, qui crée sa propre racine de rendu :
     un backdrop-filter niché dans un enfant ne voit alors plus le contenu
     réel de la page derrière lui, seulement ce qui est peint dans cette
     bulle isolée — d'où un blur invisible côté .container. */
  max-width: var(--container);
  margin-inline: auto;
  margin-top: 35px !important;
  border-radius: var(--radius-m);
  background-image: initial !important;
  background-color: color-mix(in srgb, var(--c-bg) 50%, transparent) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  -webkit-transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, max-width 0ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, max-width 0ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, max-width 0ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, max-width 0ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, transform 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
}
.scrolling .my-megamenu .container {
  -webkit-transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, transform 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
}
.scrolling .my-megamenu .container .bloc-menu {
  margin: 13px 0px;
  -webkit-transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, transform 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
  padding: 0 var(--space-big);
}
.scrolling .my-megamenu .container .bloc-menu .logo {
  width: 100px !important;
  -webkit-transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, transform 550ms ease-in-out 0ms;
  transition: margin 550ms ease-in-out 0ms, padding 550ms ease-in-out 0ms, background-color 550ms ease-in-out 0ms, background-image 550ms ease-in-out 0ms, background-position 550ms ease-in-out 0ms, width 550ms ease-in-out 0ms, backdrop-filter 550ms ease-in-out 0ms, transform 550ms ease-in-out 0ms, -webkit-transform 550ms ease-in-out 0ms;
}

.crea-logo {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
}
.crea-logo:hover a, .crea-logo:hover p {
  color: var(--c-ton) !important;
  margin-left: var(--sp-2) !important;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
}

.web {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
}
.web:hover a, .web:hover p {
  color: var(--c-ton2) !important;
  margin-left: var(--sp-2) !important;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
}

.flow {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
}
.flow:hover a, .flow:hover p {
  color: var(--c-ton3) !important;
  margin-left: var(--sp-2) !important;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
}

body.admin-bar .my-megamenu {
  top: calc(var(--space-normal) + 32px);
}

/* =========
   Form
   ========= */
input,
textarea,
select {
  font-family: var(--ff-base);
  font-size: var(--fs-body);
  color: var(--c-bg);
}

label {
  padding: 0;
  text-wrap: auto;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
}

.myform .text {
  color: var(--c-bg);
  font-size: var(--fs-small);
}
.myform .message {
  background-color: transparent !important;
}
.myform .message.success .text {
  font-size: var(--fs-body);
  padding: 0 !important;
}
.myform button {
  padding: 16px 24px;
  font-family: var(--ff-titre);
  font-size: 1.5rem !important;
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-s);
  border: var(--border-w) solid transparent;
  cursor: pointer;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
  color: var(--c-text) !important;
  background-color: var(--c-ton) !important;
}
.myform button:hover {
  background-color: var(--c-muted) !important;
}

/* =========
   Text Split Animation — class="splitting" sur n'importe quel titre
   ========= */
.splitting .word {
  display: inline-block;
  vertical-align: bottom;
  opacity: 0;
  -webkit-transform: translateY(18px);
          transform: translateY(18px);
  will-change: transform, opacity;
}
.splitting .char {
  display: inline-block;
}
.splitting.is-visible .word {
  -webkit-animation: slide-in 0.5s cubic-bezier(0.5, 0, 0.5, 1) both;
          animation: slide-in 0.5s cubic-bezier(0.5, 0, 0.5, 1) both;
  -webkit-animation-delay: calc(50ms * var(--word-index, 0));
          animation-delay: calc(50ms * var(--word-index, 0));
}

/* =========
   Slide Up Reveal — class="slide-up" sur n'importe quel bloc
   Toggle de .is-visible fait en JS (ScrollTrigger, once), tout
   le rendu de l'animation est en CSS pur (transition).
   ========= */
.slide-up {
  -webkit-transform: translateY(24px);
          transform: translateY(24px);
  opacity: 0;
  -webkit-transition: opacity 400ms var(--ease-out), -webkit-transform 600ms var(--ease-out);
  transition: opacity 400ms var(--ease-out), -webkit-transform 600ms var(--ease-out);
  transition: transform 600ms var(--ease-out), opacity 400ms var(--ease-out);
  transition: transform 600ms var(--ease-out), opacity 400ms var(--ease-out), -webkit-transform 600ms var(--ease-out);
  will-change: transform, opacity;
}
.slide-up.is-visible {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

/* Éditeur Bricks : Bricks réinjecte le DOM dynamiquement pendant l'édition,
   donc le JS ne traite pas forcément les éléments ajoutés après coup —
   on force leur affichage en CSS pur, sans dépendre du JS ni du timing. */
html.is-bricks-builder .splitting .word {
  opacity: 1 !important;
  -webkit-transform: none !important;
          transform: none !important;
  -webkit-animation: none !important;
          animation: none !important;
}
html.is-bricks-builder .slide-up {
  opacity: 1 !important;
  -webkit-transform: none !important;
          transform: none !important;
}

@-webkit-keyframes slide-in {
  from {
    opacity: 0;
    -webkit-transform: translateY(18px);
            transform: translateY(18px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slide-in {
  from {
    opacity: 0;
    -webkit-transform: translateY(18px);
            transform: translateY(18px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/* =========
   Scroll horizontal pinné — [data-hscroll]
   .hscroll-sticky et .hscroll-progress sont injectés en JS
   (le HTML vient de Bricks, on ne peut pas les y ajouter à la main).
   Le pin (position: fixed + spacer) est géré par GSAP (pin: true),
   pas en CSS : la section reste bloquée plein écran tant que le
   scroll horizontal n'est pas terminé.
   Si JS ne tourne pas, la section garde un rendu normal en colonne —
   rien n'est jamais masqué sans secours.
   ========= */
[data-hscroll] {
  position: relative;
  overflow: clip;
}

.hscroll-sticky {
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: visible;
}
.hscroll-sticky > .container {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  will-change: transform;
}
.hscroll-sticky > .container > * {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.hscroll-progress {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--space-normal);
  height: 1px;
  background-color: currentColor;
  opacity: 0.2;
  overflow: hidden;
}

.hscroll-progress__bar {
  height: 100%;
  width: 20%;
  background-color: currentColor;
}

/* Mobile / reduced-motion : pas de scroll-jacking, scroll horizontal
   natif avec snap — le JS ne fait alors que synchroniser la barre. */
@media (max-width: 767px) {
  .hscroll-sticky {
    height: auto;
    overflow-x: auto;
    overflow-y: visible;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .hscroll-sticky > .container > * {
    scroll-snap-align: center;
  }
  .hscroll-progress {
    position: static;
    margin-top: var(--space-normal);
  }
}
/* =========
   Hero — fondu de la vidéo de fond (#brxe-qihysz)
   ========= */
#brxe-qihysz .bricks-background-video-wrapper {
  -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(29.3233%, rgba(240, 245, 251, 0.3803921569)), color-stop(99.0076%, rgba(0, 0, 0, 0)));
  -webkit-mask-image: linear-gradient(0deg, rgba(240, 245, 251, 0.3803921569) 29.3233%, rgba(0, 0, 0, 0) 99.0076%);
          mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(29.3233%, rgba(240, 245, 251, 0.3803921569)), color-stop(99.0076%, rgba(0, 0, 0, 0)));
          mask-image: linear-gradient(0deg, rgba(240, 245, 251, 0.3803921569) 29.3233%, rgba(0, 0, 0, 0) 99.0076%);
}

/* =========
   Cards Slider — déborde à droite, aligné sur le container à gauche
   Structure Bricks :
     .cards-slider (Section full-width)
       .cards-slider__nav > button.slider-prev + button.slider-next
       .cards-slider__track > .cs-card × N
   ========= */
.cards-slider {
  overflow: hidden;
}
html.is-bricks-builder .cards-slider {
  overflow: visible;
}

.cards-slider__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-bottom: var(--space-normal);
  gap: var(--sp-3);
}
.cards-slider__nav .bouton-slider {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background-color: var(--c-titre);
  border: none;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 0;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
}
.cards-slider__nav .bouton-slider svg, .cards-slider__nav .bouton-slider img {
  pointer-events: none;
  width: 20px;
  height: 20px;
  opacity: 1;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
}
.cards-slider__nav .bouton-slider svg path {
  fill: var(--c-bg);
}
.cards-slider__nav .bouton-slider[disabled] {
  cursor: default;
}
.cards-slider__nav .bouton-slider[disabled] svg, .cards-slider__nav .bouton-slider[disabled] img {
  opacity: 0.35;
}
.cards-slider__nav .bouton-slider:hover {
  background-color: var(--c-ton) !important;
}
.cards-slider__nav .slider-prev.bouton-slider svg {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

/* overflow: visible permet aux cartes de dépasser la piste vers la droite,
   comme .slick-list { overflow: visible } dans la ref Slick.
   C'est la section (.cards-slider { overflow: hidden }) qui clipe à 100vw. */
.cards-slider__track {
  overflow: visible !important;
  will-change: transform;
  padding-left: max(var(--gutter), (97vw - var(--container)) / 2 + var(--gutter));
  padding-right: var(--gutter);
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.cs-card {
  -webkit-box-flex: 0 !important;
      -ms-flex: 0 0 clamp(260px, 28vw, 710px) !important;
          flex: 0 0 clamp(260px, 28vw, 710px) !important;
  width: clamp(260px, 28vw, 710px) !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (hover: hover) and (pointer: fine) {
  .cs-card, .cs-card * {
    cursor: none;
  }
}

/* Curseur custom "Voir le projet" affiché au hover d'une .cs-card
   (injecté en JS — voir initCardCursor dans main.js) */
.cs-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 130px;
  height: 40px;
  border-radius: var(--radius-m);
  background-color: var(--c-bg);
  font-family: var(--ff-titre);
  font-size: var(--fs-small);
  letter-spacing: 0em;
  text-align: center;
  line-height: var(--lh-tight);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
@media (hover: none), (pointer: coarse) {
  .cs-cursor {
    display: none;
  }
}

.cs-cursor__label {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-ton)), to(var(--c-titre)));
  background: linear-gradient(to right, var(--c-ton), var(--c-titre));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =========
   Vertical Slider — cartes empilées au scroll (méthode / process)
   Structure Bricks :
     .vertical-slider (Section, fond var(--c-titre))
       .container > bloc titre + bloc wrapper > .card-vertical × N
   Le pin (position: fixed) est géré par GSAP (initVerticalCardStack,
   pin: true par carte, pinSpacing false sauf sur la dernière) — pas en
   CSS. Sans JS ou sur mobile/reduced-motion, les cartes restent dans
   le flux normal, empilées les unes sous les autres.
   Le fond opaque est nécessaire ici (contrairement au flux normal où
   il est invisible) : une fois pinnée, chaque carte doit recouvrir
   entièrement celle qui la précède.
   ========= */
.vertical-slider .card-vertical {
  position: relative;
  background-color: var(--c-titre);
  will-change: transform, opacity;
}

/* =========
   Bg Change — spotlight cursor trail (#spotlight-area)
   Les .ball sont injectées en JS (initBgChange)
   ========= */
#spotlight-area {
  position: relative;
  overflow: hidden;
}
#spotlight-area > *:not(.ball) {
  position: relative;
  z-index: 1;
}

.ball {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  -webkit-filter: blur(8rem);
          filter: blur(8rem);
  pointer-events: none;
  z-index: 0;
  background-color: var(--c-ton);
}
.ball:nth-child(1) {
  opacity: 1;
  scale: 1;
}
.ball:nth-child(2) {
  opacity: 0.8;
  scale: 0.9;
}
.ball:nth-child(3) {
  opacity: 0.6;
  scale: 0.8;
}
.ball:nth-child(4) {
  opacity: 0.4;
  scale: 0.7;
}
.ball:nth-child(5) {
  opacity: 0.3;
  scale: 0.6;
}
.ball:nth-child(6) {
  opacity: 0.3;
  scale: 0.5;
  background-color: var(--c-ton2);
}
.ball:nth-child(7) {
  opacity: 0.3;
  scale: 0.4;
  background-color: var(--c-ton2);
}
.ball:nth-child(8) {
  opacity: 0.3;
  scale: 0.3;
  background-color: var(--c-ton2);
}
.ball:nth-child(9) {
  opacity: 0.3;
  scale: 0.2;
  background-color: var(--c-ton2);
}

/* =========
   Footer (structure simple)
   ========= */
@media (min-width: 1024px) {
  footer {
    margin-top: 0px !important;
  }
}
footer h3 {
  font-size: var(--fs-h6);
  padding-bottom: var(--space-small);
}
footer h4 {
  font-size: 1.5rem;
  color: var(--c-border);
  padding-bottom: var(--sp-2);
  text-transform: uppercase;
}
footer .brxe-button {
  font-size: var(--fs-small);
  letter-spacing: 0px;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
  font-family: var(--ff-titre);
}
footer .brxe-button:hover {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
  padding-left: 5px !important;
  color: var(--c-text) !important;
}
footer .mentions p {
  font-size: 13px !important;
}

/* =========================================
   Utilities — petites classes “accélératrices”
   Garder court : 15–30 max en pratique
========================================= */
/* 1) Spacing utilities (margin / padding) */
/* Margin */
.m-0 {
  margin: var(--sp-0);
}

.mt-0 {
  margin-top: var(--sp-0);
}

.mr-0 {
  margin-right: var(--sp-0);
}

.mb-0 {
  margin-bottom: var(--sp-0);
}

.ml-0 {
  margin-left: var(--sp-0);
}

.mx-0 {
  margin-inline: var(--sp-0);
}

.my-0 {
  margin-block: var(--sp-0);
}

.m-1 {
  margin: var(--sp-1);
}

.mt-1 {
  margin-top: var(--sp-1);
}

.mr-1 {
  margin-right: var(--sp-1);
}

.mb-1 {
  margin-bottom: var(--sp-1);
}

.ml-1 {
  margin-left: var(--sp-1);
}

.mx-1 {
  margin-inline: var(--sp-1);
}

.my-1 {
  margin-block: var(--sp-1);
}

.m-2 {
  margin: var(--sp-2);
}

.mt-2 {
  margin-top: var(--sp-2);
}

.mr-2 {
  margin-right: var(--sp-2);
}

.mb-2 {
  margin-bottom: var(--sp-2);
}

.ml-2 {
  margin-left: var(--sp-2);
}

.mx-2 {
  margin-inline: var(--sp-2);
}

.my-2 {
  margin-block: var(--sp-2);
}

.m-3 {
  margin: var(--sp-3);
}

.mt-3 {
  margin-top: var(--sp-3);
}

.mr-3 {
  margin-right: var(--sp-3);
}

.mb-3 {
  margin-bottom: var(--sp-3);
}

.ml-3 {
  margin-left: var(--sp-3);
}

.mx-3 {
  margin-inline: var(--sp-3);
}

.my-3 {
  margin-block: var(--sp-3);
}

.m-4 {
  margin: var(--sp-4);
}

.mt-4 {
  margin-top: var(--sp-4);
}

.mr-4 {
  margin-right: var(--sp-4);
}

.mb-4 {
  margin-bottom: var(--sp-4);
}

.ml-4 {
  margin-left: var(--sp-4);
}

.mx-4 {
  margin-inline: var(--sp-4);
}

.my-4 {
  margin-block: var(--sp-4);
}

.m-5 {
  margin: var(--sp-5);
}

.mt-5 {
  margin-top: var(--sp-5);
}

.mr-5 {
  margin-right: var(--sp-5);
}

.mb-5 {
  margin-bottom: var(--sp-5);
}

.ml-5 {
  margin-left: var(--sp-5);
}

.mx-5 {
  margin-inline: var(--sp-5);
}

.my-5 {
  margin-block: var(--sp-5);
}

.m-6 {
  margin: var(--sp-6);
}

.mt-6 {
  margin-top: var(--sp-6);
}

.mr-6 {
  margin-right: var(--sp-6);
}

.mb-6 {
  margin-bottom: var(--sp-6);
}

.ml-6 {
  margin-left: var(--sp-6);
}

.mx-6 {
  margin-inline: var(--sp-6);
}

.my-6 {
  margin-block: var(--sp-6);
}

.m-7 {
  margin: var(--sp-7);
}

.mt-7 {
  margin-top: var(--sp-7);
}

.mr-7 {
  margin-right: var(--sp-7);
}

.mb-7 {
  margin-bottom: var(--sp-7);
}

.ml-7 {
  margin-left: var(--sp-7);
}

.mx-7 {
  margin-inline: var(--sp-7);
}

.my-7 {
  margin-block: var(--sp-7);
}

.m-8 {
  margin: var(--sp-8);
}

.mt-8 {
  margin-top: var(--sp-8);
}

.mr-8 {
  margin-right: var(--sp-8);
}

.mb-8 {
  margin-bottom: var(--sp-8);
}

.ml-8 {
  margin-left: var(--sp-8);
}

.mx-8 {
  margin-inline: var(--sp-8);
}

.my-8 {
  margin-block: var(--sp-8);
}

.m-9 {
  margin: var(--sp-9);
}

.mt-9 {
  margin-top: var(--sp-9);
}

.mr-9 {
  margin-right: var(--sp-9);
}

.mb-9 {
  margin-bottom: var(--sp-9);
}

.ml-9 {
  margin-left: var(--sp-9);
}

.mx-9 {
  margin-inline: var(--sp-9);
}

.my-9 {
  margin-block: var(--sp-9);
}

/* Padding */
.p-0 {
  padding: var(--sp-0);
}

.pt-0 {
  padding-top: var(--sp-0);
}

.pr-0 {
  padding-right: var(--sp-0);
}

.pb-0 {
  padding-bottom: var(--sp-0);
}

.pl-0 {
  padding-left: var(--sp-0);
}

.px-0 {
  padding-inline: var(--sp-0);
}

.py-0 {
  padding-block: var(--sp-0);
}

.p-1 {
  padding: var(--sp-1);
}

.pt-1 {
  padding-top: var(--sp-1);
}

.pr-1 {
  padding-right: var(--sp-1);
}

.pb-1 {
  padding-bottom: var(--sp-1);
}

.pl-1 {
  padding-left: var(--sp-1);
}

.px-1 {
  padding-inline: var(--sp-1);
}

.py-1 {
  padding-block: var(--sp-1);
}

.p-2 {
  padding: var(--sp-2);
}

.pt-2 {
  padding-top: var(--sp-2);
}

.pr-2 {
  padding-right: var(--sp-2);
}

.pb-2 {
  padding-bottom: var(--sp-2);
}

.pl-2 {
  padding-left: var(--sp-2);
}

.px-2 {
  padding-inline: var(--sp-2);
}

.py-2 {
  padding-block: var(--sp-2);
}

.p-3 {
  padding: var(--sp-3);
}

.pt-3 {
  padding-top: var(--sp-3);
}

.pr-3 {
  padding-right: var(--sp-3);
}

.pb-3 {
  padding-bottom: var(--sp-3);
}

.pl-3 {
  padding-left: var(--sp-3);
}

.px-3 {
  padding-inline: var(--sp-3);
}

.py-3 {
  padding-block: var(--sp-3);
}

.p-4 {
  padding: var(--sp-4);
}

.pt-4 {
  padding-top: var(--sp-4);
}

.pr-4 {
  padding-right: var(--sp-4);
}

.pb-4 {
  padding-bottom: var(--sp-4);
}

.pl-4 {
  padding-left: var(--sp-4);
}

.px-4 {
  padding-inline: var(--sp-4);
}

.py-4 {
  padding-block: var(--sp-4);
}

.p-5 {
  padding: var(--sp-5);
}

.pt-5 {
  padding-top: var(--sp-5);
}

.pr-5 {
  padding-right: var(--sp-5);
}

.pb-5 {
  padding-bottom: var(--sp-5);
}

.pl-5 {
  padding-left: var(--sp-5);
}

.px-5 {
  padding-inline: var(--sp-5);
}

.py-5 {
  padding-block: var(--sp-5);
}

.p-6 {
  padding: var(--sp-6);
}

.pt-6 {
  padding-top: var(--sp-6);
}

.pr-6 {
  padding-right: var(--sp-6);
}

.pb-6 {
  padding-bottom: var(--sp-6);
}

.pl-6 {
  padding-left: var(--sp-6);
}

.px-6 {
  padding-inline: var(--sp-6);
}

.py-6 {
  padding-block: var(--sp-6);
}

.p-7 {
  padding: var(--sp-7);
}

.pt-7 {
  padding-top: var(--sp-7);
}

.pr-7 {
  padding-right: var(--sp-7);
}

.pb-7 {
  padding-bottom: var(--sp-7);
}

.pl-7 {
  padding-left: var(--sp-7);
}

.px-7 {
  padding-inline: var(--sp-7);
}

.py-7 {
  padding-block: var(--sp-7);
}

.p-8 {
  padding: var(--sp-8);
}

.pt-8 {
  padding-top: var(--sp-8);
}

.pr-8 {
  padding-right: var(--sp-8);
}

.pb-8 {
  padding-bottom: var(--sp-8);
}

.pl-8 {
  padding-left: var(--sp-8);
}

.px-8 {
  padding-inline: var(--sp-8);
}

.py-8 {
  padding-block: var(--sp-8);
}

.p-9 {
  padding: var(--sp-9);
}

.pt-9 {
  padding-top: var(--sp-9);
}

.pr-9 {
  padding-right: var(--sp-9);
}

.pb-9 {
  padding-bottom: var(--sp-9);
}

.pl-9 {
  padding-left: var(--sp-9);
}

.px-9 {
  padding-inline: var(--sp-9);
}

.py-9 {
  padding-block: var(--sp-9);
}

/* 2) Text utilities */
.text-muted {
  color: var(--c-muted);
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* 4) Width helpers */
.w-100 {
  width: 100%;
}

.max-w-container {
  max-width: var(--container);
}

/* 5) Visual helpers (soft) */
.rounded-s {
  border-radius: var(--radius-s);
}

.rounded-m {
  border-radius: var(--radius-m);
}

.rounded-l {
  border-radius: var(--radius-l);
}

.rounded-none {
  border-radius: var(--radius-none);
}

.rounded-full {
  border-radius: var(--radius-full);
}

.shadow-s {
  -webkit-box-shadow: var(--shadow-s);
          box-shadow: var(--shadow-s);
}

.shadow-m {
  -webkit-box-shadow: var(--shadow-m);
          box-shadow: var(--shadow-m);
}

.border {
  border: var(--border-w) solid var(--c-border);
}

.white h1, .white h2, .white h3, .white h4, .white h5, .white h6 {
  color: var(--c-title-blanc);
}
.white body, .white p, .white span, .white a {
  color: var(--c-text-blanc);
}

.eyebrow {
  border-radius: var(--radius-m);
  padding: var(--sp-4);
}
.eyebrow p {
  font-size: var(--fs-small);
  display: inline-block;
  font-family: var(--ff-titre);
  background: -webkit-gradient(linear, left top, right top, from(var(--c-ton)), to(var(--c-titre)));
  background: linear-gradient(to right, var(--c-ton), var(--c-titre));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
}

.cartouche {
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
  margin-bottom: 5px;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
}
.cartouche p {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
  color: var(--c-titre) !important;
  font-size: var(--fs-small) !important;
  font-weight: var(--fw-regular) !important;
}
.cartouche:hover.bleu {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
  background-color: var(--c-ton);
}
.cartouche:hover.bleu p {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
  color: var(--c-title-blanc) !important;
}
.cartouche:hover.vert {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
  background-color: var(--c-ton2);
}
.cartouche:hover.vert p {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
  color: var(--c-titre);
}
.cartouche:hover.violet {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
  background-color: var(--c-ton3);
}
.cartouche:hover.violet p {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
  color: var(--c-titre);
}

.cards {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
}
.cards .cartouche p {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
  color: var(--c-title-blanc) !important;
}
.cards:hover {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
  background-color: var(--c-ton5);
}
.cards:hover p, .cards:hover h3 {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
  color: var(--c-titre) !important;
}
.cards:hover .brxe-divider .line {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
  border-top-color: var(--c-titre) !important;
}
.cards:hover .cartouche {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
  background-color: rgba(209, 221, 232, 0.55);
}
.cards:hover .cartouche p {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
  color: var(--c-titre) !important;
}
.cards:hover .cartouche:hover.bleu {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
  background-color: var(--c-ton);
}
.cards:hover .cartouche:hover.bleu p {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
  color: var(--c-title-blanc) !important;
}
.cards:hover .cartouche:hover.vert {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
  background-color: var(--c-ton2);
}
.cards:hover .cartouche:hover.vert p {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
  color: var(--c-titre);
}
.cards:hover .cartouche:hover.violet {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
  background-color: var(--c-ton3);
}
.cards:hover .cartouche:hover.violet p {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: var(--dur-1);
          transition-duration: var(--dur-1);
  -webkit-transition-timing-function: var(--ease-smooth);
          transition-timing-function: var(--ease-smooth);
  color: var(--c-titre);
}

#valeurs svg {
  width: 60px !important;
}
#valeurs svg path.cls-1 {
  fill: none;
  stroke: #f0f5fb;
  stroke-width: 33.57px;
  stroke-miterlimit: 10;
}
#valeurs #agilite svg {
  width: 145px !important;
}