.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Roboto, sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-12354 .elementor-element.elementor-element-3c96314 .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-size:27px;font-weight:600;}.elementor-12354 .elementor-element.elementor-element-4a5f1a2{--spacer-size:16px;}.elementor-12354 .elementor-element.elementor-element-d08a37d .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-size:40px;font-weight:700;}.elementor-widget-button .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Roboto, sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-12354 .elementor-element.elementor-element-738033f .elementor-button{font-family:"Inter", Roboto, sans-serif;font-size:17px;font-weight:500;}.elementor-12354 .elementor-element.elementor-element-f9d9bc8 .elementor-button{font-family:"Inter Tight", Roboto, sans-serif;font-size:17px;font-weight:500;}.elementor-widget-image .widget-image-caption{font-family:var( --e-global-typography-text-font-family ), Roboto, sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-12354 .elementor-element.elementor-element-f691856{--spacer-size:24px;}.elementor-12354 .elementor-element.elementor-element-63d266b .elementor-icon-wrapper{text-align:center;}.elementor-12354 .elementor-element.elementor-element-63d266b .elementor-icon{font-size:73px;}.elementor-12354 .elementor-element.elementor-element-63d266b .elementor-icon svg{height:73px;}.elementor-12354 .elementor-element.elementor-element-f2c407d .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-weight:700;}.elementor-12354 .elementor-element.elementor-element-0fbf49e .elementor-icon-wrapper{text-align:center;}.elementor-12354 .elementor-element.elementor-element-0fbf49e .elementor-icon{font-size:73px;}.elementor-12354 .elementor-element.elementor-element-0fbf49e .elementor-icon svg{height:73px;}.elementor-12354 .elementor-element.elementor-element-51b774a .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-weight:700;}.elementor-12354 .elementor-element.elementor-element-10614f5 .elementor-icon-wrapper{text-align:center;}.elementor-12354 .elementor-element.elementor-element-10614f5 .elementor-icon{font-size:73px;}.elementor-12354 .elementor-element.elementor-element-10614f5 .elementor-icon svg{height:73px;}.elementor-12354 .elementor-element.elementor-element-88bd961 .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-weight:700;}.elementor-12354 .elementor-element.elementor-element-03cd8d6 .elementor-icon-wrapper{text-align:center;}.elementor-12354 .elementor-element.elementor-element-03cd8d6 .elementor-icon{font-size:73px;}.elementor-12354 .elementor-element.elementor-element-03cd8d6 .elementor-icon svg{height:73px;}.elementor-12354 .elementor-element.elementor-element-cf50585 .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-weight:700;}.elementor-12354 .elementor-element.elementor-element-18ca31d{--spacer-size:50px;}.elementor-12354 .elementor-element.elementor-element-20b9f53{--spacer-size:121px;}.elementor-12354 .elementor-element.elementor-element-2faf10a{--spacer-size:130px;}.elementor-12354 .elementor-element.elementor-element-2d04d5f{text-align:center;}.elementor-12354 .elementor-element.elementor-element-2d04d5f .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-size:40px;font-weight:700;color:#000000;}.elementor-12354 .elementor-element.elementor-element-fe1db94 .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-weight:600;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Roboto, sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-12354 .elementor-element.elementor-element-632391c{width:var( --container-widget-width, 66.402% );max-width:66.402%;--container-widget-width:66.402%;--container-widget-flex-grow:0;font-family:"Inter", Roboto, sans-serif;font-weight:400;}.elementor-12354 .elementor-element.elementor-element-632391c.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-12354 .elementor-element.elementor-element-1e758fc{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-12354 .elementor-element.elementor-element-1e758fc .elementor-button{font-family:"Inter", Roboto, sans-serif;font-weight:500;}.elementor-12354 .elementor-element.elementor-element-c022222 .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-weight:600;color:#000000;}.elementor-12354 .elementor-element.elementor-element-47265aa{width:var( --container-widget-width, 66.402% );max-width:66.402%;--container-widget-width:66.402%;--container-widget-flex-grow:0;font-family:"Inter", Roboto, sans-serif;font-weight:400;color:#000000;}.elementor-12354 .elementor-element.elementor-element-47265aa.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-12354 .elementor-element.elementor-element-b522c1d .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-weight:600;}.elementor-12354 .elementor-element.elementor-element-4d61838{width:var( --container-widget-width, 66.402% );max-width:66.402%;--container-widget-width:66.402%;--container-widget-flex-grow:0;font-family:"Inter", Roboto, sans-serif;font-weight:400;}.elementor-12354 .elementor-element.elementor-element-4d61838.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-12354 .elementor-element.elementor-element-917f173 .elementor-button{font-family:"Inter", Roboto, sans-serif;font-weight:500;}.elementor-12354 .elementor-element.elementor-element-56fa01f{--spacer-size:72px;}.elementor-12354 .elementor-element.elementor-element-ddc0c89{margin:38px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 32px 0px;text-align:center;}.elementor-12354 .elementor-element.elementor-element-ddc0c89 .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-size:40px;font-weight:700;color:#FFFFFF;}.elementor-12354 .elementor-element.elementor-element-212f387 .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-size:23px;font-weight:600;color:#1565E4;}.elementor-12354 .elementor-element.elementor-element-7fdae6c .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-size:23px;font-weight:600;color:#1565E4;}.elementor-12354 .elementor-element.elementor-element-fa9041d .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-size:23px;font-weight:600;color:#1565E4;}.elementor-12354 .elementor-element.elementor-element-7e5446f{--spacer-size:10px;}.elementor-12354 .elementor-element.elementor-element-6d4f808{text-align:center;}.elementor-12354 .elementor-element.elementor-element-6d4f808 .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-size:23px;font-weight:600;}.elementor-12354 .elementor-element.elementor-element-51282c7{text-align:center;}.elementor-12354 .elementor-element.elementor-element-51282c7 .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-size:23px;font-weight:600;}.elementor-12354 .elementor-element.elementor-element-1223787{text-align:center;}.elementor-12354 .elementor-element.elementor-element-1223787 .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-size:23px;font-weight:600;}.elementor-12354 .elementor-element.elementor-element-d6827c0{width:var( --container-widget-width, 89% );max-width:89%;--container-widget-width:89%;--container-widget-flex-grow:0;}.elementor-12354 .elementor-element.elementor-element-d6827c0 .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-size:40px;font-weight:700;}.elementor-12354 .elementor-element.elementor-element-61e3db0 .elementor-button{font-family:"Inter", Roboto, sans-serif;font-size:17px;font-weight:500;}.elementor-12354 .elementor-element.elementor-element-534c4f7 .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-size:29px;font-weight:700;color:#000000;}.elementor-widget-testimonial-carousel .elementor-testimonial__text{font-family:var( --e-global-typography-text-font-family ), Roboto, sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-testimonial-carousel .elementor-testimonial__name{font-family:var( --e-global-typography-primary-font-family ), Roboto, sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-testimonial-carousel .elementor-testimonial__title{font-family:var( --e-global-typography-secondary-font-family ), Roboto, sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-12354 .elementor-element.elementor-element-c40dad8{border-radius:19px 19px 19px 19px;}.elementor-12354 .elementor-element.elementor-element-c40dad8 .elementor-swiper-button{font-size:20px;}.elementor-12354 .elementor-element.elementor-element-c40dad8 .elementor-testimonial__text{font-family:"Inter", Roboto, sans-serif;font-size:22px;font-weight:400;}.elementor-12354 .elementor-element.elementor-element-c40dad8 .elementor-testimonial__name{font-family:"Inter", Roboto, sans-serif;font-size:14px;font-weight:600;}.elementor-12354 .elementor-element.elementor-element-c40dad8 .elementor-testimonial__title{font-family:"Inter", Roboto, sans-serif;font-size:14px;font-weight:400;}.elementor-12354 .elementor-element.elementor-element-c40dad8 .elementor-testimonial__image img{border-radius:0px;}.elementor-12354 .elementor-element.elementor-element-5980c46 .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-size:22px;font-weight:600;}.elementor-12354 .elementor-element.elementor-element-edb6f03{--spacer-size:14px;}.elementor-12354 .elementor-element.elementor-element-c031fac .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-size:22px;font-weight:600;}.elementor-12354 .elementor-element.elementor-element-4103b52{--spacer-size:14px;}.elementor-12354 .elementor-element.elementor-element-afd7d79 .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-size:22px;font-weight:600;}.elementor-12354 .elementor-element.elementor-element-c21a11f{--spacer-size:14px;}.elementor-12354 .elementor-element.elementor-element-1b357f4 .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-size:22px;font-weight:600;}.elementor-12354 .elementor-element.elementor-element-ceb966b{--spacer-size:14px;}.elementor-12354 .elementor-element.elementor-element-2e30da4 .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-size:22px;font-weight:600;}.elementor-12354 .elementor-element.elementor-element-f3d94a2{--spacer-size:14px;}.elementor-12354 .elementor-element.elementor-element-2897fb8{text-align:center;}.elementor-12354 .elementor-element.elementor-element-2897fb8 .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-size:34px;font-weight:600;}.elementor-12354 .elementor-element.elementor-element-1df8e5b{--spacer-size:14px;}.elementor-12354 .elementor-element.elementor-element-38ac1b0{--display:flex;}.elementor-12354 .elementor-element.elementor-element-8c787da{--display:flex;}.elementor-12354 .elementor-element.elementor-element-d7e5294{--display:flex;}.elementor-12354 .elementor-element.elementor-element-d80cbe7{--display:flex;}.elementor-12354 .elementor-element.elementor-element-baa81df{--display:flex;}.elementor-12354 .elementor-element.elementor-element-ac3eedf{--n-accordion-title-font-size:20px;--n-accordion-title-icon-order:initial;--n-accordion-item-title-space-between:0px;--n-accordion-item-title-distance-from-content:0px;--n-accordion-icon-size:18px;}:where( .elementor-12354 .elementor-element.elementor-element-ac3eedf > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text{font-family:"Inter", Roboto, sans-serif;}.elementor-12354 .elementor-element.elementor-element-cfa64c3 .elementor-heading-title{font-family:"TT Firs Neue Trl", Roboto, sans-serif;font-size:37px;font-weight:700;}.elementor-12354 .elementor-element.elementor-element-af457b9{--spacer-size:32px;}@media(max-width:767px){.elementor-12354 .elementor-element.elementor-element-d08a37d .elementor-heading-title{font-size:32px;}.elementor-12354 .elementor-element.elementor-element-2faf10a{--spacer-size:110px;}.elementor-12354 .elementor-element.elementor-element-2d04d5f{width:var( --container-widget-width, 300px );max-width:300px;--container-widget-width:300px;--container-widget-flex-grow:0;}.elementor-12354 .elementor-element.elementor-element-2d04d5f.elementor-element{--align-self:center;}.elementor-12354 .elementor-element.elementor-element-2d04d5f .elementor-heading-title{font-size:32px;}.elementor-12354 .elementor-element.elementor-element-ddc0c89 .elementor-heading-title{font-size:35px;}.elementor-12354 .elementor-element.elementor-element-19f7270{text-align:center;}.elementor-12354 .elementor-element.elementor-element-d6827c0 .elementor-heading-title{font-size:32px;}.elementor-12354 .elementor-element.elementor-element-c40dad8{border-radius:0px 0px 0px 0px;}.elementor-12354 .elementor-element.elementor-element-c40dad8.elementor-arrows-yes .elementor-main-swiper{width:calc( 0px - 40px );}.elementor-12354 .elementor-element.elementor-element-c40dad8 .elementor-main-swiper{width:0px;}}/* Start custom CSS *//* ==========================================================
   PAGE FACTURATION ÉLECTRONIQUE — SIMPLIFIA
   Elementor > Paramètres du site > CSS personnalisé
   ==========================================================

   CLASSES À POSER DANS ELEMENTOR
   ------------------------------
   HERO
   .eyebrow        -> Titre "Facturation électronique"
   .hero-titre     -> Titre H1
   .hero-texte     -> Paragraphe d'accroche
   .hero-cta       -> Flexbox contenant les 2 boutons
   .cta-plein      -> Bouton bleu
   .cta-lien       -> Lien "Voir la démo"

   RANGÉE PRODUITS
   .produits       -> Flexbox contenant les 4 cartes
   .produit        -> Chacune des 4 cartes
   .produit-icone  -> L'icône
   .produit-texte  -> Flexbox Titre + Paragraphe
   .produit-nom    -> Le titre
   .produit-desc   -> La description
   ========================================================== */


/* ==========================================================
   0. VARIABLES GLOBALES
   Modifie ici, tout le reste suit.
   ========================================================== */

:root {
  --largeur-site: 1200px;
  --gouttiere: 20px;

  --bleu: #1565E4;
  --bleu-fonce: #0C4CA0;
  --noir: #101214;
  --gris: #44546F;
}


/* ==========================================================
   1. SUR-TITRE
   ========================================================== */

.eyebrow {
  --mot: "Facturation";
  --angle: -2deg;
  --decalage: .6em;

  font-size: 32px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--noir);
}

.eyebrow:not(:has(.elementor-heading-title)),
.eyebrow .elementor-heading-title {
  position: relative;
  display: inline-block;
  margin: 0;
  padding-left: .39em;
  word-spacing: var(--decalage);
  font-weight: inherit;
}

.eyebrow:not(:has(.elementor-heading-title))::before,
.eyebrow .elementor-heading-title::before {
  content: var(--mot);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  font-weight: 800;
  word-spacing: normal;
  white-space: nowrap;
  color: #FFFFFF;
  background: var(--bleu);
  padding: .33em .39em;
  transform: translateY(-.33em) rotate(var(--angle));
  transform-origin: center;
}


/* ==========================================================
   2. TITRE H1
   ========================================================== */

.hero-titre,
.hero-titre .elementor-heading-title {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--noir);
  margin: 0;
  max-width: 12em;
}


/* ==========================================================
   3. PARAGRAPHE
   ========================================================== */

.hero-texte,
.hero-texte p {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--gris);
  margin: 0;
  max-width: 26em;
}


/* ==========================================================
   4. RANGÉE DE BOUTONS
   ========================================================== */

.hero-cta {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 28px;
  margin-top: 16px;
}

.hero-cta > * {
  flex: 0 0 auto;
}


/* ==========================================================
   5. BOUTON PLEIN
   ========================================================== */

.cta-plein a,
.cta-plein button,
.cta-plein .elementor-button {
  display: inline-block;
  background: var(--bleu);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  padding: 18px 32px;
  border: none;
  border-radius: 100px;
  transition: background 200ms cubic-bezier(0.2, 0, 0, 1),
              transform 200ms cubic-bezier(0.2, 0, 0, 1);
}

.cta-plein a:hover,
.cta-plein button:hover,
.cta-plein .elementor-button:hover {
  background: var(--bleu-fonce);
  color: #FFFFFF;
  transform: translateY(-1px);
}


/* ==========================================================
   6. LIEN SECONDAIRE
   ========================================================== */

.cta-lien a,
.cta-lien button,
.cta-lien .elementor-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  border: none !important;
  color: var(--bleu);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none !important;
  white-space: nowrap;
  padding: 18px 0;
  cursor: pointer;
  transition: color 150ms cubic-bezier(0.2, 0, 0, 1);
}

.cta-lien a:hover,
.cta-lien button:hover,
.cta-lien .elementor-button:hover {
  color: var(--bleu-fonce) !important;
}

/* --- L'icône flèche --- */

.cta-lien .elementor-button-icon,
.cta-lien svg,
.cta-lien i,
.cta-lien img {
  display: inline-flex;
  align-items: center;
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
}

.cta-lien a:hover .elementor-button-icon,
.cta-lien a:hover svg,
.cta-lien a:hover i,
.cta-lien a:hover img,
.cta-lien button:hover .elementor-button-icon,
.cta-lien button:hover svg,
.cta-lien button:hover i,
.cta-lien button:hover img,
.cta-lien .elementor-button:hover .elementor-button-icon,
.cta-lien .elementor-button:hover svg,
.cta-lien .elementor-button:hover i {
  transform: translateX(4px);
}

/* --- Le soulignement --- */

.cta-lien .elementor-button-text {
  position: relative;
  display: inline-block;
}

.cta-lien .elementor-button-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--bleu);
  opacity: 0;
  transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1);
}

.cta-lien a:hover .elementor-button-text::after,
.cta-lien button:hover .elementor-button-text::after,
.cta-lien .elementor-button:hover .elementor-button-text::after {
  opacity: 1;
}

/* --- Accessibilité clavier --- */

.cta-plein a:focus-visible,
.cta-plein button:focus-visible,
.cta-lien a:focus-visible,
.cta-lien button:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 3px;
  border-radius: 3px;
}


/* ==========================================================
   7. RANGÉE PRODUITS
   ========================================================== */

/* --- Le conteneur : aligné sur la grille, remonté vers le hero --- */
.produits {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 40px;

  max-width: var(--largeur-site);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gouttiere);
  padding-right: var(--gouttiere);
  width: 100%;
  box-sizing: border-box;

  /* ↓ REMONTÉE : valeur négative = colle au hero
     -60px  = léger chevauchement
     -100px = remontée franche (valeur actuelle)
     -140px = la rangée mord sur le hero            */
  margin-top: -100px;
  position: relative;
  z-index: 2;

  /* Fond blanc pour masquer le gris du body */
  background: #FFFFFF;
  padding-top: 40px;
  padding-bottom: 40px;
  border-radius: 12px;
}

/* --- Une carte --- */
.produit {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 16px;
  flex: 1 1 200px !important;
  min-width: 0;
  width: auto !important;
}

/* --- L'icône --- */
.produit-icone {
  flex: 0 0 auto !important;
  width: 52px;
  height: 52px;
}

.produit-icone img,
.produit-icone svg {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: contain;
  display: block;
}

/* --- Le bloc texte --- */
.produit-texte {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px;
  flex: 1 1 auto !important;
  min-width: 0;
}

.produit-nom,
.produit-nom .elementor-heading-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--noir);
  margin: 0;
}

.produit-desc,
.produit-desc p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--gris);
  margin: 0;
}


/* ==========================================================
   8. RESPONSIVE — TABLETTE
   ========================================================== */

@media (max-width: 1024px) {

  .eyebrow { font-size: 26px; }

  .hero-titre,
  .hero-titre .elementor-heading-title { font-size: 42px; }

  .hero-texte,
  .hero-texte p { font-size: 18px; }

  .produits { margin-top: -60px; }
  .produit { flex: 1 1 calc(50% - 20px) !important; }
}


/* ==========================================================
   9. RESPONSIVE — MOBILE
   ========================================================== */

@media (max-width: 767px) {

  .eyebrow { font-size: 22px; }

  .hero-titre,
  .hero-titre .elementor-heading-title {
    font-size: 32px;
    letter-spacing: -0.5px;
  }

  .hero-texte,
  .hero-texte p { font-size: 17px; }

  .hero-cta {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 16px;
  }

  .cta-plein a,
  .cta-plein button,
  .cta-plein .elementor-button {
    display: block;
    text-align: center;
  }

  .cta-lien a,
  .cta-lien button,
  .cta-lien .elementor-button {
    padding: 8px 0;
    justify-content: center;
  }

  .produits {
    gap: 28px;
    margin-top: 0;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .produit { flex: 1 1 100% !important; }
}


/* ==========================================================
   RÉGLAGES RAPIDES

   Largeur du site               -> --largeur-site   (§0)
   Marge latérale                -> --gouttiere      (§0)
   Toutes les couleurs           -> --bleu / --gris  (§0)

   Espace bloc bleu/électronique -> --decalage       (§1)
   Inclinaison du bloc bleu      -> --angle          (§1)
   Coupure du H1                 -> max-width 12em   (§2)
   Largeur du paragraphe         -> max-width 26em   (§3)
   Écart entre les 2 boutons     -> gap 28px         (§4)
   Distance du soulignement      -> bottom -6px      (§6)
   Épaisseur du soulignement     -> height 1px       (§6)
   Glissement de la flèche       -> translateX 4px   (§6)

   >> HAUTEUR DE LA RANGÉE       -> margin-top -100px (§7)
      Plus le nombre est négatif, plus elle remonte.

   Écart entre les cartes        -> gap 40px         (§7)
   Padding interne de la bande   -> padding-top/bottom 40px (§7)
   ========================================================== */
   
   
   /* --- Diagonale en haut du bloc gris --- */
/* --- Bloc gris avec diagonale blanche en haut --- */
.bloc-penche {
  position: relative;
  overflow: hidden;
  background: #F8F8F8;
  padding-top: 120px;
}

.bloc-penche::before {
  content: "";
  position: absolute;
  top: 0;
  left: -5%;
  width: 110%;
  height: 100px;
  background: #FFFFFF;
  transform: rotate(-1.6deg);
  transform-origin: top left;
  z-index: 1;
}

.bloc-penche > * {
  position: relative;
  z-index: 2;
}
}
/* ==========================================================
   10. BLOC ONGLETS — SIMPLIFIA
   ==========================================================

   CLASSES À POSER DANS ELEMENTOR
   ------------------------------
   .onglets-simplifia -> le widget "Onglets" (nœud parent)
   .onglets-barre     -> le nœud "Menu des onglets"
   .onglet-titre      -> le Titre H2
   .onglet-texte      -> le Paragraphe
   .checklist         -> l'Éditeur de texte contenant le <ul>
   .onglet-cta        -> le Bouton
   .onglet-image      -> l'Image

   RÉGLAGES À FAIRE DANS LE PANNEAU (pas en CSS)
   ---------------------------------------------
   Menu des onglets   : Arrière-plan = #E3EDFF
                        Écarts > Colonne = 6
   Flexbox de contenu : direction →, aligner: centre, gap 96
   Colonne gauche     : largeur 45 %, direction ↓, gap 32
   Colonne droite     : largeur 55 %
   ========================================================== */


/* ----------------------------------------------------------
   10.1 — LE BANDEAU
   ---------------------------------------------------------- */

.onglets-barre.onglets-barre {
  position: relative;

  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 6px !important;

  max-width: 1250px;
  width: 100%;
  margin: 0 auto !important;

  border: none !important;
  border-radius: 12px !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}

/* Neutralise tout élément parasite injecté par Elementor */
.onglets-barre > hr,
.onglets-barre > .e-n-tabs-heading-indicator {
  display: none !important;
}


/* ----------------------------------------------------------
   10.2 — LES ONGLETS
   ---------------------------------------------------------- */

.onglets-barre > * {
  position: relative;

  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  background-clip: padding-box !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  margin: 0 !important;

  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  color: #0C3B85 !important;
  cursor: pointer !important;
}

/* Aucun descendant ne porte de fond : c'est ce qui supprime
   le carré blanc dans les angles et le halo sous le texte.
   ⚠ On ne touche NI aux dimensions NI au display, sous peine
   de casser la zone cliquable. */
.onglets-barre > * *,
.onglets-barre > * *:hover {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  color: inherit !important;
  margin: 0 !important;
}

/* Le rayon reste identique dans tous les états */
.onglets-barre > *:hover,
.onglets-barre > *:focus,
.onglets-barre > *[aria-selected="true"],
.onglets-barre > *[aria-expanded="true"],
.onglets-barre > *[data-active],
.onglets-barre > *.e-active,
.onglets-barre > *.elementor-active,
.onglets-barre > *.active {
  border-radius: 8px !important;
}


/* ----------------------------------------------------------
   10.3 — L'ONGLET ACTIF
   Elementor nomme cet état différemment selon les versions.
   ---------------------------------------------------------- */

.onglets-barre > *[aria-selected="true"],
.onglets-barre > *[aria-expanded="true"],
.onglets-barre > *[data-active],
.onglets-barre > *.e-active,
.onglets-barre > *.elementor-active,
.onglets-barre > *.active {
  background: #1565E4 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}


/* ----------------------------------------------------------
   10.4 — AUCUN EFFET AU SURVOL
   Seul le curseur change.
   ---------------------------------------------------------- */

.onglets-barre > *:hover {
  background: transparent !important;
  color: #0C3B85 !important;
}

.onglets-barre > *[aria-selected="true"]:hover,
.onglets-barre > *[aria-expanded="true"]:hover,
.onglets-barre > *[data-active]:hover,
.onglets-barre > *.e-active:hover,
.onglets-barre > *.elementor-active:hover,
.onglets-barre > *.active:hover {
  background: #1565E4 !important;
  color: #FFFFFF !important;
}

/* Accessibilité clavier : conservée */
.onglets-barre > *:focus-visible {
  outline: 2px solid #1565E4 !important;
  outline-offset: 2px !important;
}


/* ----------------------------------------------------------
   10.5 — TITRE ET PARAGRAPHE
   ---------------------------------------------------------- */

.onglets-simplifia {
  margin-top: 90px;
}

.onglet-titre,
.onglet-titre .elementor-heading-title {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.2px;
  color: #101214;
  margin: 0;
  max-width: 13em;
}

.onglet-texte,
.onglet-texte p {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: #101214;
  margin: 0;
  max-width: 28em;
}


/* ----------------------------------------------------------
   10.6 — LA CHECKLIST
   Coche fine, couleur héritée du texte
   ---------------------------------------------------------- */

.checklist ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.checklist li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: #101214;
  margin: 0;
}

/* Repli : le caractère ✓ */
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-size: .95em;
  font-weight: 400;
  color: currentColor;
}

/* Version fine et nette, via un masque SVG.
   `currentColor` garantit la couleur exacte du texte. */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .checklist li::before {
    content: "";
    top: .34em;
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
  }
}


/* ----------------------------------------------------------
   10.7 — LE BOUTON CTA
   ---------------------------------------------------------- */

.onglet-cta :is(a, button, .elementor-button) {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;

  background: #E3EDFF !important;
  color: #1565E4 !important;
  border: 1px solid #1565E4 !important;
  border-radius: 8px !important;
  padding: 13px 22px !important;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: none !important;

  transition: background-color 150ms linear,
              color            150ms linear;
}

.onglet-cta :is(a, button, .elementor-button):hover {
  background: #1565E4 !important;
  color: #FFFFFF !important;
}

.onglet-cta :is(a, button, .elementor-button):active {
  background: #0C4CA0 !important;
}

.onglet-cta :is(.elementor-button-icon, svg, i) {
  color: inherit;
  fill: currentColor;
  transition: transform 150ms linear;
}

.onglet-cta :is(a, button, .elementor-button):hover
  :is(.elementor-button-icon, svg, i) {
  transform: translateX(3px);
}

.onglet-cta :is(a, button, .elementor-button):focus-visible {
  outline: 2px solid #1565E4;
  outline-offset: 3px;
}


/* ----------------------------------------------------------
   10.8 — L'IMAGE ET SON BLOC DÉCALÉ
   ---------------------------------------------------------- */

.onglet-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 14px 14px 0 0 #B8D0F5;
}


/* ----------------------------------------------------------
   10.9 — APPARITION DU CONTENU
   ---------------------------------------------------------- */

@keyframes onglet-entree {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.onglet-titre  { animation: onglet-entree 260ms linear   0ms both; }
.onglet-texte  { animation: onglet-entree 260ms linear  50ms both; }
.checklist     { animation: onglet-entree 260ms linear 100ms both; }
.onglet-cta    { animation: onglet-entree 260ms linear 150ms both; }
.onglet-image  { animation: onglet-entree 300ms linear  50ms both; }


/* ----------------------------------------------------------
   10.10 — RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 1024px) {

  .onglets-simplifia { margin-top: 64px; }

  .onglets-barre > * {
    font-size: 14px !important;
    padding: 11px 8px !important;
  }

  .onglet-titre,
  .onglet-titre .elementor-heading-title { font-size: 26px; }
}

@media (max-width: 767px) {

  .onglets-simplifia { margin-top: 48px; }

  .onglets-barre.onglets-barre {
    flex-direction: column !important;
    gap: 4px !important;
  }

  .onglets-barre > * { padding: 13px 16px !important; }

  .onglet-titre,
  .onglet-titre .elementor-heading-title {
    font-size: 24px;
    max-width: none;
  }

  .checklist ul { gap: 14px; }
  .checklist li { font-size: 15px; }

  .onglet-image img { box-shadow: 10px 10px 0 0 #B8D0F5; }
}


/* ----------------------------------------------------------
   10.11 — RESPECT DES PRÉFÉRENCES SYSTÈME
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .onglet-cta :is(a, button, .elementor-button),
  .onglet-cta :is(.elementor-button-icon, svg, i) {
    transition-duration: 1ms !important;
    transform: none !important;
  }

  .onglet-titre, .onglet-texte, .checklist,
  .onglet-cta, .onglet-image {
    animation: none !important;
  }
}


/* ==========================================================
   RÉGLAGES RAPIDES — BLOC ONGLETS

   Écart entre les onglets -> gap 6px                 (10.1)
   Largeur du bandeau      -> max-width 1250px        (10.1)
   Rayon du bandeau        -> 12px                    (10.1)
   Épaisseur du cadre      -> padding 6px             (10.1)

   Hauteur des onglets     -> padding 11px 14px       (10.2)
   Rayon de la pilule      -> 8px                     (10.2)
   Texte onglet inactif    -> #0C3B85                 (10.2)
   Onglet actif            -> #1565E4                 (10.3)

   Bandeau -> contenu      -> margin-top 90px         (10.5)
   Coupure du titre        -> max-width 13em          (10.5)
   Épaisseur de la coche   -> stroke-width 2.2        (10.6)
   Écart entre les items   -> gap 18px                (10.6)
   Bloc décalé de l'image  -> #B8D0F5 / 14px          (10.8)

   ⚠ Le fond du bandeau se règle dans le panneau Elementor
     (Menu des onglets > Style > Arrière-plan), pas ici.
   ========================================================== */
   /* ==========================================================
   11. BLOC ÉCHÉANCES
   ========================================================== */
/* ==========================================================
   11. BLOC ÉCHÉANCES
   ========================================================== */
/* ==========================================================
   12. BLOC PREUVE SOCIALE
   ==========================================================

   CLASSES À POSER DANS ELEMENTOR
   ------------------------------
   .preuve         -> le Flexbox de la section
   .preuve-texte   -> le Flexbox de la colonne gauche
   .preuve-phrase  -> le Paragraphe
   .preuve-logos   -> le Flexbox de la rangée de logos
   .logo-client    -> chaque widget Image

   RÉGLAGES À FAIRE DANS LE PANNEAU
   --------------------------------
   Flexbox section : direction →, aligner: centre, retour à la ligne ↵
   Flexbox logos   : direction →, aligner: centre, retour à la ligne ↵

   CONTENU DU PARAGRAPHE
   ---------------------
   Tape UNIQUEMENT la suite de la phrase, sans le chiffre :
   ", indépendants et directeurs de pompes funèbres
    ont déjà adopté Simplifia."
   Le chiffre est ajouté par le CSS (voir 12.2).
   ========================================================== */


/* ----------------------------------------------------------
   12.1 — LA SECTION
   ---------------------------------------------------------- */

.preuve {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 56px;

  max-width: 1250px;
  width: 100%;
  margin: 0 auto !important;
  padding: 64px 20px !important;
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   12.2 — LE TEXTE
   Le chiffre est généré en CSS : rien à saisir en HTML
   ---------------------------------------------------------- */

.preuve-texte {
  flex: 0 1 320px !important;
  min-width: 0;
}

.preuve-phrase,
.preuve-phrase p {
  font-size: 17px;
  font-weight: 400;
  font-style: normal !important;
  line-height: 1.7;
  color: #101214;
  margin: 0;
}

/* Le chiffre, en bleu et en gras, ajouté devant la phrase */
.preuve-phrase p::before {
  content: "+1200 dirigeants";
  color: #1565E4;
  font-weight: 700;
  font-style: normal;
}

/* Repli si le paragraphe ne contient pas de balise <p> */
.preuve-phrase:not(:has(p))::before {
  content: "+1200 dirigeants";
  color: #1565E4;
  font-weight: 700;
  font-style: normal;
}


/* ----------------------------------------------------------
   12.3 — LA RANGÉE DE LOGOS
   ---------------------------------------------------------- */

.preuve-logos {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 40px 32px;
  flex: 1 1 480px !important;
  min-width: 0;
}

.logo-client {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* mix-blend-mode: multiply fait disparaître le fond blanc
   des fichiers non détourés. Le grayscale harmonise des
   logos aux couleurs très différentes. */
.logo-client img {
  display: block;
  max-height: 76px;
  width: auto;
  max-width: 190px;
  object-fit: contain;

  mix-blend-mode: multiply;
  filter: grayscale(100%) contrast(1.15);
  opacity: .8;
  transition: filter 160ms linear, opacity 160ms linear;
}

/* Au survol, le logo retrouve ses couleurs d'origine */
.logo-client:hover img {
  filter: none;
  opacity: 1;
}


/* ----------------------------------------------------------
   12.4 — COLORISATION BLEUE
   ⚠ À n'activer QUE si tes logos sont en PNG transparent
     ou en SVG. Sur un fichier à fond blanc, cela produit
     un rectangle bleu plein.
   ---------------------------------------------------------- */

/*
.logo-client img {
  mix-blend-mode: normal;
  filter:
    grayscale(100%)
    brightness(.45)
    sepia(100%)
    hue-rotate(185deg)
    saturate(420%);
}
*/


/* ----------------------------------------------------------
   12.5 — RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 1024px) {

  .preuve {
    gap: 36px;
    padding: 48px 20px !important;
  }

  .preuve-texte { flex: 1 1 100% !important; }

  .preuve-logos {
    justify-content: flex-start !important;
    gap: 32px 28px;
  }

  .logo-client img {
    max-height: 62px;
    max-width: 160px;
  }
}

@media (max-width: 767px) {

  .preuve {
    padding: 40px 16px !important;
    gap: 24px;
  }

  .preuve-phrase,
  .preuve-phrase p { font-size: 16px; }

  .preuve-logos {
    justify-content: center !important;
    gap: 24px 20px;
  }

  .logo-client img {
    max-height: 48px;
    max-width: 130px;
  }
}


/* ==========================================================
   RÉGLAGES RAPIDES — BLOC PREUVE SOCIALE

   Le chiffre affiché       -> content "+1200 dirigeants"  (12.2)
   Couleur du chiffre       -> #1565E4                     (12.2)
   Largeur colonne texte    -> flex 0 1 320px              (12.2)

   Taille des logos         -> max-height 76px             (12.3)
   Largeur max des logos    -> max-width 190px             (12.3)
   Écart entre les logos    -> gap 40px 32px               (12.3)
   Intensité du gris        -> opacity .8                  (12.3)

   Marges de la section     -> padding 64px 20px           (12.1)

   ⚠ Le fond blanc des logos est masqué par mix-blend-mode.
     Pour une vraie colorisation bleue, il faut des fichiers
     PNG transparents ou SVG : décommenter alors le bloc 12.4.
   ========================================================== */
   
/* ==========================================================
   13. BLOC AVANTAGES
   ==========================================================

   CLASSES À POSER DANS ELEMENTOR
   ------------------------------
   .avantages        -> le Flexbox de la section
   .avantages-titre  -> le Titre H2
   .avantages-liste  -> le Flexbox contenant les 3 cartes
   .avantage         -> chacune des 3 cartes
   .avantage-illu    -> le widget Image
   .avantage-nom     -> le Titre de carte  (balise div)
   .avantage-texte   -> le Paragraphe

   ⚠ Les 3 cartes doivent être ENFANTS de .avantages-liste,
     au même niveau d'indentation dans le Navigateur.

   ⚠ Sur chaque carte, mets les Écarts du panneau à 0 :
     Style > Mise en page > Écarts > Ligne = 0
     Sinon Elementor ajoute son espacement PAR-DESSUS
     les marges du CSS, et les deux s'additionnent.
   ========================================================== */


/* ----------------------------------------------------------
   13.1 — LA SECTION
   ---------------------------------------------------------- */

.avantages {
  max-width: 1250px;
  width: 100%;
  margin: 0 auto !important;
  padding: 64px 20px !important;
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   13.2 — LE TITRE DE SECTION
   ---------------------------------------------------------- */

.avantages-titre,
.avantages-titre .elementor-heading-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.6px;
  color: #101214;
  text-align: center;
  margin: 0 auto 12px !important;
  padding: 0 !important;
  max-width: 20em;
}


/* ----------------------------------------------------------
   13.3 — LA RANGÉE
   ---------------------------------------------------------- */

.avantages-liste {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 40px;
  width: 100%;
  font-size: 0;          /* supprime l'espace entre inline-flex */
}


/* ----------------------------------------------------------
   13.4 — UNE CARTE
   `inline-flex` + `vertical-align` : les cartes se rangent
   côte à côte même si le parent reste en display:block.
   `stretch` permet à l'illustration de se centrer alors que
   le texte reste calé à gauche.
   ---------------------------------------------------------- */

.avantage {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  vertical-align: top !important;
  gap: 0 !important;

  width: calc(33.333% - 27px) !important;
  min-width: 260px;
  flex: 0 0 auto !important;

  font-size: 16px;       /* rétablit la taille après font-size:0 */
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   13.5 — L'ILLUSTRATION, CENTRÉE
   La hauteur fixe aligne les 3 titres sur la même ligne.
   ---------------------------------------------------------- */

.avantage-illu {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 150px;
  margin: 0 0 34px !important;
  padding: 0 !important;
}

.avantage-illu img {
  display: block;
  max-height: 100%;
  max-width: 72%;
  width: auto;
  object-fit: contain;
  margin: 0 auto;
}


/* ----------------------------------------------------------
   13.6 — TITRE ET TEXTE DE CARTE
   2px seulement : le texte prolonge visuellement son titre.
   ---------------------------------------------------------- */

.avantage-nom,
.avantage-nom .elementor-heading-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: #101214;
  text-align: left;
  margin: 0 0 2px !important;
  padding: 0 !important;
}

.avantage-texte,
.avantage-texte p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #43536E;
  text-align: left;
  margin: 0 !important;
  padding: 0 !important;
}


/* ----------------------------------------------------------
   13.7 — RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 1024px) {

  .avantages { padding: 52px 20px !important; }

  .avantages-titre,
  .avantages-titre .elementor-heading-title {
    font-size: 29px;
    margin-bottom: 10px !important;
  }

  .avantage { width: calc(50% - 20px) !important; }

  .avantage-illu {
    height: 130px;
    margin-bottom: 28px !important;
  }
}

@media (max-width: 767px) {

  .avantages { padding: 40px 16px !important; }

  .avantages-titre,
  .avantages-titre .elementor-heading-title {
    font-size: 24px;
    margin-bottom: 8px !important;
  }

  .avantages-liste { gap: 32px; }

  .avantage {
    width: 100% !important;
    min-width: 0;
  }

  .avantage-illu {
    height: 110px;
    margin-bottom: 22px !important;
  }

  .avantage-nom,
  .avantage-nom .elementor-heading-title { font-size: 18px; }
}


/* ==========================================================
   RÉGLAGES RAPIDES — BLOC AVANTAGES

   >> LES 3 ÉCARTS À AJUSTER

   Titre section -> cartes  -> margin-bottom 12px    (13.2)
   Illustration -> titre    -> margin-bottom 34px    (13.5)
   Titre carte -> texte     -> margin-bottom 2px     (13.6)

   >> LE RESTE

   Largeur de la section    -> max-width 1250px      (13.1)
   Marges verticales        -> padding 64px          (13.1)
   Taille du titre          -> 34px                  (13.2)
   Coupure du titre         -> max-width 20em        (13.2)
   Écart entre les cartes   -> gap 40px              (13.3)
   Largeur d'une carte      -> calc(33.333% - 27px)  (13.4)
   Hauteur de la zone illu  -> height 150px          (13.5)
   Largeur max de l'illu    -> max-width 72%         (13.5)

   ⚠ Si tu changes le gap, ajuste la soustraction du calc :
     gap 40 -> -27px | gap 32 -> -22px | gap 24 -> -16px
     (formule : gap x 2 / 3)
   ========================================================== */
/* ==========================================================
   14. BLOC CTA BLEU
   ==========================================================

   CLASSES À POSER DANS ELEMENTOR
   ------------------------------
   .cta-bleu        -> le Flexbox de la section
   .cta-bleu-inner  -> le Flexbox du contenu
   .cta-bleu-titre  -> le Titre H2
   .cta-bleu-texte  -> le Paragraphe
   .cta-bleu-lien   -> le Bouton

   ⚠ Sur .cta-bleu-inner, mets les Écarts du panneau à 0 :
     Style > Mise en page > Écarts > Ligne = 0
     Sinon Elementor ajoute son espacement PAR-DESSUS
     les marges du CSS, et les deux s'additionnent.

   ⚠ Dans le champ du Bouton, retire la flèche → si tu
     l'avais tapée : elle est générée par le CSS.
   ========================================================== */


/* ----------------------------------------------------------
   14.1 — LA SECTION ET SA DIAGONALE

   Le triangle est DESSINÉ par-dessus, pas découpé.

   Un clip-path retire de la matière : ce qui apparaît dans
   la découpe est le fond de la section précédente, quel
   qu'il soit. Impossible de le choisir. Un triangle blanc en
   pseudo-élément, lui, a la couleur qu'on lui donne.

   Sa hauteur est en pixels, donc constante. L'ancienne
   découpe était en pourcentage : elle se calculait sur la
   HAUTEUR du bloc, et la pente s'accentuait à chaque fois
   que le texte s'allongeait.

   ⚠ Le padding-top doit rester supérieur à --pente-h,
     sinon le titre passe sous le triangle.
   ---------------------------------------------------------- */

.cta-bleu {
  --pente-h: 64px;

  position: relative;
  background: #1565E4;
  width: 100%;

  padding: 150px 20px 84px !important;
  box-sizing: border-box;
  overflow: hidden;
}

.cta-bleu::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(var(--pente-h) + 1px);
  background: #FFFFFF;
  z-index: 3;
  pointer-events: none;

  clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
}

/* Le contenu reste au-dessus du fond mais sous le triangle */
.cta-bleu-inner {
  position: relative;
  z-index: 1;
}

/* ----------------------------------------------------------
   14.2 — LE CONTENU
   ---------------------------------------------------------- */

.cta-bleu-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;

  max-width: 1000px;
  width: 100%;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   14.3 — LE TITRE
   `max-width: 22em` force la coupure sur 2 lignes.
   ---------------------------------------------------------- */

.cta-bleu-titre,
.cta-bleu-titre .elementor-heading-title {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.6px;
  color: #FFFFFF;
  text-align: left;
  margin: 0 0 6px !important;
  padding: 0 !important;
  max-width: 22em;
}


/* ----------------------------------------------------------
   14.4 — LE PARAGRAPHE
   ---------------------------------------------------------- */

.cta-bleu-texte,
.cta-bleu-texte p {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: #FFFFFF;
  text-align: left;
  margin: 0 0 14px !important;
  padding: 0 !important;
  max-width: 46em;
}


/* ----------------------------------------------------------
   14.5 — LE LIEN
   Flèche SVG dessinée en CSS + soulignement animé
   ---------------------------------------------------------- */

.cta-bleu-lien :is(a, button, .elementor-button) {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;

  background: transparent !important;
  border: none !important;
  color: #FFFFFF !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .1px;
  text-decoration: none !important;
  padding: 6px 0 !important;
  box-shadow: none !important;
  cursor: pointer;
}

/* --- La flèche, en masque SVG : trait fin, bien dessiné --- */
.cta-bleu-lien :is(a, button, .elementor-button)::after {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  background: currentColor;
  transition: transform 220ms cubic-bezier(.2, 0, 0, 1);

  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- Le soulignement, sous le texte seulement --- */
.cta-bleu-lien :is(a, button, .elementor-button)::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: calc(100% - 27px);
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms cubic-bezier(.2, 0, 0, 1);
}

/* --- Le survol : la flèche avance, le trait se déploie --- */
.cta-bleu-lien :is(a, button, .elementor-button):hover::before {
  transform: scaleX(1);
}

.cta-bleu-lien :is(a, button, .elementor-button):hover::after {
  transform: translateX(6px);
}

/* --- L'icône Elementor, si tu en avais posé une --- */
.cta-bleu-lien :is(.elementor-button-icon, svg, i) {
  display: none !important;
}

/* --- Accessibilité clavier --- */
.cta-bleu-lien :is(a, button, .elementor-button):focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 5px;
  border-radius: 3px;
}


/* ----------------------------------------------------------
   14.6 — RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 1024px) {

  .cta-bleu {
    --pente-h: 44px;
    padding: 110px 20px 64px !important;
  }
  ...
}

  .cta-bleu-titre,
  .cta-bleu-titre .elementor-heading-title {
    font-size: 31px;
    max-width: none;
  }

  .cta-bleu-texte,
  .cta-bleu-texte p {
    font-size: 16px;
    margin-bottom: 12px !important;
  }
}

@media (max-width: 767px) {

  .cta-bleu {
    --pente-h: 30px;
    padding: 76px 16px 48px !important;
  }
  ...
}

  .cta-bleu-titre,
  .cta-bleu-titre .elementor-heading-title {
    font-size: 25px;
    margin-bottom: 6px !important;
  }

  .cta-bleu-texte,
  .cta-bleu-texte p {
    font-size: 16px;
    margin-bottom: 12px !important;
  }
}


/* ----------------------------------------------------------
   14.7 — RESPECT DES PRÉFÉRENCES SYSTÈME
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .cta-bleu-lien :is(a, button, .elementor-button)::before,
  .cta-bleu-lien :is(a, button, .elementor-button)::after {
    transition-duration: 1ms !important;
  }

  .cta-bleu-lien :is(a, button, .elementor-button):hover::after {
    transform: none !important;
  }
}


/* ==========================================================
   RÉGLAGES RAPIDES — BLOC CTA BLEU

   >> LA DIAGONALE

   Inclinaison            -> polygon(0 9%, ...)      (14.1)
      3 %  = discrète
      9 %  = actuelle
      12 % = très marquée

   ⚠ Si tu montes l'inclinaison, monte AUSSI le padding-top,
     sinon le titre passe sous la découpe.

   >> LES ESPACEMENTS

   Marge haute            -> padding-top 150px       (14.1)
   Marge basse            -> padding-bottom 84px     (14.1)
   Titre -> paragraphe    -> margin-bottom 6px       (14.3)
   Paragraphe -> lien     -> margin-bottom 14px      (14.4)

   >> LE RESTE

   Largeur du bloc        -> max-width 1000px        (14.2)
   Coupure du titre       -> max-width 22em          (14.3)
   Taille de la flèche    -> width/height 17px       (14.5)
   Épaisseur du trait     -> stroke-width 2.4        (14.5)
   Glissement au survol   -> translateX 6px          (14.5)
   Épaisseur soulignement -> height 1.5px            (14.5)

   ⚠ Le soulignement s'arrête avant la flèche grâce au
     calc(100% - 27px). Si tu changes la taille de la
     flèche ou le gap, ajuste cette valeur.
   ========================================================== */
   
/* ==========================================================
   15. CARROUSEL TÉMOIGNAGES                    — version 2
   ==========================================================

   ⚠ Cette section remplace l'ancienne §15 ET tous les blocs
     §20.15 que je t'ai livrés. Supprime-les : tout est
     réuni ici, bureau et mobile.

   CLASSES À POSER DANS ELEMENTOR
   ------------------------------
   .temoignages            -> le Flexbox de la section
   .temoignages-titre      -> le Titre H2
   .temoignages-soustitre  -> le Paragraphe
   .temoignages-carousel   -> le widget Carrousel de témoignages
                              (Avancé > Classes CSS)

   ==========================================================
   LES TROIS RÈGLES QUI CASSAIENT LE CARROUSEL
   ==========================================================
   Elles étaient dans cette section, donc actives à TOUTES
   les tailles. Aucune correction écrite dans un bloc mobile
   ne pouvait les annuler — d'où six versions sans résultat.

   1. margin: 0 sur .swiper-slide            (ancien §15.3)
   Swiper pose un margin-right INLINE sur chaque diapositive
   et calcule sa translation dessus. L'effacer en CSS le
   retire de l'affichage, jamais du calcul : il translate de
   cette valeur en trop, et l'erreur S'ADDITIONNE à chaque
   glissement. Diapositive 2 décalée d'un cran, la 3 de deux.
   -> supprimé.

   2. transform: translateZ(0) sur .swiper-slide  (§15.5)
   Un transform sur une diapositive crée un contexte de rendu
   isolé. Swiper transforme déjà le .swiper-wrapper pour
   défiler : les deux se marchent dessus.
   -> supprimé. Celui de la CARTE reste, il est utile.

   3. clip-path sur le carrousel                  (§15.4)
   Il crée un contexte de rognage qui fausse la mesure de
   zone visible de Swiper.
   -> limité au bureau, où il ne pose pas de problème.

   ----------------------------------------------------------
   LA RÈGLE GÉNÉRALE
   ----------------------------------------------------------
   Sur .swiper, .swiper-wrapper et .swiper-slide : jamais de
   margin, jamais de width, jamais de transform, jamais de
   clip-path.

   Ces valeurs sont mesurées UNE FOIS au chargement et
   servent à tous les calculs de la bibliothèque. Un
   !important change ce que l'œil voit, jamais ce qu'elle a
   mesuré — d'où une erreur qui ne se révèle qu'au premier
   glissement.

   Ces valeurs se règlent dans le PANNEAU du widget, où
   Swiper les lit AVANT de calculer.

   ----------------------------------------------------------
   RÉGLAGES À VÉRIFIER DANS LE PANNEAU, SUR MOBILE
   ----------------------------------------------------------
   Bascule l'éditeur sur mobile (icône téléphone en haut) :

     Diapositives par vue             -> 1
     Nombre de diapositives à glisser -> 1
     Largeur                          -> vide
     Espacement entre les diapositives-> 0  (s'il existe)

   Ces réglages portent l'icône téléphone : ils se règlent
   par appareil, le bureau ne bougera pas.

   « Mise en page » n'a PAS cette icône : elle reste sur
   « Image à gauche » et c'est le CSS qui remonte la photo
   sur mobile (§15.13).
   ========================================================== */


/* ----------------------------------------------------------
   15.1 — LA SECTION
   ---------------------------------------------------------- */

.temoignages {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #DBEFFF;
  padding: 72px 20px 60px !important;
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   15.2 — TITRE ET SOUS-TITRE
   ---------------------------------------------------------- */

.temoignages-titre,
.temoignages-soustitre,
.temoignages-carousel {
  max-width: 1200px !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

.temoignages-titre,
.temoignages-titre .elementor-heading-title {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.3px;
  color: #123A85;
  text-align: left !important;
  margin: 0 auto 12px !important;
  padding: 0 !important;
}

/* `max-width` force la coupure avant "plateforme agréée" */
.temoignages-soustitre,
.temoignages-soustitre p,
.temoignages-soustitre * {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #2C4C86;
  text-align: left !important;
  margin: 0 auto 32px !important;
  padding: 0 !important;
}

.temoignages-soustitre p {
  max-width: 26em;
}


/* ----------------------------------------------------------
   15.3 — LE CARROUSEL, PLEINE LARGEUR

   ⚠ AUCUN margin sur .swiper-slide.
   C'était la cause principale du décalage cumulatif : le
   margin-right inline de Swiper sert à son calcul de
   translation.
   ---------------------------------------------------------- */

.temoignages-carousel > .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
}

.temoignages-carousel .elementor-main-swiper,
.temoignages-carousel .swiper,
.temoignages-carousel .swiper-container {
  width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 80px !important;
}

.temoignages-carousel .swiper-wrapper {
  align-items: stretch !important;
}

.temoignages-carousel .swiper-slide {
  padding: 0 !important;
  height: auto !important;
}


/* ----------------------------------------------------------
   15.4 — CORRECTIF DE DÉBORDEMENT, BUREAU UNIQUEMENT

   Le clip-path rogne à gauche, à droite et en haut, mais
   laisse 120px en bas pour ne pas couper les flèches.

   ⚠ Cloisonné au-dessus de 767px : il crée un contexte de
     rognage qui fausse la mesure de zone visible de Swiper.
     Sur bureau la carte est plus étroite que sa zone, donc
     ça ne se voit pas. En pleine largeur, tout se décale.
   ---------------------------------------------------------- */

@media (min-width: 768px) {

  .temoignages-carousel,
  .temoignages-carousel > .elementor-widget-container,
  .temoignages-carousel .elementor-main-swiper,
  .temoignages-carousel .swiper,
  .temoignages-carousel .swiper-container {
    overflow: hidden !important;
    clip-path: inset(0 0 -120px 0);
  }
}

.temoignages-carousel .swiper-slide {
  opacity: 0 !important;
  transition: opacity 200ms linear;
}

.temoignages-carousel .swiper-slide-active,
.temoignages-carousel .swiper-slide-visible {
  opacity: 1 !important;
}


/* ----------------------------------------------------------
   15.5 — LA CARTE

   Le translateZ(0) est posé sur la CARTE, jamais sur la
   diapositive : il force le contexte de rendu que le swiper
   ne créait que pendant l'animation, sans interférer avec
   les transformations de défilement.
   ---------------------------------------------------------- */

.temoignages-carousel .elementor-testimonial {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  background: #1565E4 !important;
  min-height: 360px;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;

  border-radius: 16px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 16px) !important;

  transform: translateZ(0);
  will-change: transform;
}


/* ----------------------------------------------------------
   15.6 — L'IMAGE
   Le clip-path est posé sur l'image elle-même : c'est ce
   qui garantit les coins arrondis en statique comme
   pendant le défilement.
   Ordre des valeurs : haut-G, haut-D, bas-D, bas-G
   ---------------------------------------------------------- */

.temoignages-carousel .elementor-testimonial__image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 38% !important;
  max-width: 38% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  overflow: hidden !important;
}

.temoignages-carousel .elementor-testimonial__image,
.temoignages-carousel .elementor-testimonial__image *,
.temoignages-carousel .elementor-testimonial__image img {
  border-radius: 16px 0 0 16px !important;
  clip-path: inset(0 round 16px 0 0 16px) !important;
}

.temoignages-carousel .elementor-testimonial__image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center;
  border: none !important;
  display: block;
}


/* ----------------------------------------------------------
   15.7 — LE CONTENU
   ---------------------------------------------------------- */

.temoignages-carousel .elementor-testimonial__content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;

  min-height: 360px;
  padding: 46px 56px 46px calc(38% + 52px) !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-align: left !important;
}

.temoignages-carousel .elementor-testimonial__content::after {
  display: none !important;
}


/* ----------------------------------------------------------
   15.8 — LA CITATION ET SON GUILLEMET
   ---------------------------------------------------------- */

.temoignages-carousel .elementor-testimonial__text {
  position: relative;
  font-size: 20px;
  font-weight: 500;
  font-style: normal !important;
  line-height: 1.5;
  color: #FFFFFF !important;
  text-align: left !important;
  margin: 0 0 24px !important;
  padding-top: 48px !important;
  max-width: 30em;
}

.temoignages-carousel .elementor-testimonial__text::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 24px;
  background: #9BC0FF;

  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28' fill='%23000'%3E%3Cpath d='M0 28V15C0 6.7 4.6 1 12.6 0l1.4 4.6C9.4 6 7 8.6 7 12h6v16H0zm18 0V15C18 6.7 22.6 1 30.6 0L32 4.6C27.4 6 25 8.6 25 12h6v16H18z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28' fill='%23000'%3E%3Cpath d='M0 28V15C0 6.7 4.6 1 12.6 0l1.4 4.6C9.4 6 7 8.6 7 12h6v16H0zm18 0V15C18 6.7 22.6 1 30.6 0L32 4.6C27.4 6 25 8.6 25 12h6v16H18z'/%3E%3C/svg%3E") no-repeat center / contain;
}


/* ----------------------------------------------------------
   15.9 — NOM ET FONCTION, SUR UNE LIGNE
   ---------------------------------------------------------- */

.temoignages-carousel .elementor-testimonial__footer {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.temoignages-carousel .elementor-testimonial__cite {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 5px;
  font-style: normal !important;
}

.temoignages-carousel .elementor-testimonial__name {
  font-size: 15px;
  font-weight: 600;
  font-style: normal !important;
  line-height: 1.45;
  color: #FFFFFF !important;
  margin: 0 !important;
}

.temoignages-carousel .elementor-testimonial__name::after {
  content: ",";
}

.temoignages-carousel .elementor-testimonial__title {
  font-size: 15px;
  font-weight: 400;
  font-style: normal !important;
  line-height: 1.45;
  color: #C3DBFC !important;
  margin: 0 !important;
}


/* ----------------------------------------------------------
   15.10 — LES FLÈCHES
   ---------------------------------------------------------- */

.temoignages-carousel .swiper-pagination {
  display: none !important;
}

.temoignages-carousel .elementor-swiper-button {
  top: auto !important;
  bottom: 0 !important;
  transform: none !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #1565E4;
  color: #FFFFFF;
  font-size: 17px;
  cursor: pointer;
  opacity: 1 !important;
  transition: background 150ms linear;
}

.temoignages-carousel .elementor-swiper-button:hover {
  background: #0C4CA0;
}

.temoignages-carousel .elementor-swiper-button svg,
.temoignages-carousel .elementor-swiper-button i {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  width: 17px;
  height: 17px;
}

.temoignages-carousel .elementor-swiper-button-prev {
  left: calc(50% - 60px) !important;
  right: auto !important;
}

.temoignages-carousel .elementor-swiper-button-next {
  right: calc(50% - 60px) !important;
  left: auto !important;
}

.temoignages-carousel .elementor-swiper-button:focus-visible {
  outline: 2px solid #123A85;
  outline-offset: 3px;
}


/* ----------------------------------------------------------
   15.11 — TABLETTE  (≤ 1024 px)
   ---------------------------------------------------------- */

@media (max-width: 1024px) {

  .temoignages { padding: 56px 20px 48px !important; }

  .temoignages-titre,
  .temoignages-titre .elementor-heading-title { font-size: 24px; }

  .temoignages-soustitre p { max-width: 30em; }

  .temoignages-carousel .elementor-testimonial,
  .temoignages-carousel .elementor-testimonial__content {
    min-height: 320px;
  }

  .temoignages-carousel .elementor-testimonial__image {
    width: 42% !important;
    max-width: 42% !important;
  }

  .temoignages-carousel .elementor-testimonial__content {
    padding: 34px 34px 34px calc(42% + 34px) !important;
  }

  .temoignages-carousel .elementor-testimonial__text {
    font-size: 17px;
    padding-top: 40px !important;
    margin-bottom: 18px !important;
  }
}


/* ==========================================================
   15.12 — MOBILE : LA SECTION  (≤ 767 px)

   30px de marge latérale. C'est ELLE qui décolle la carte
   des bords : le carrousel occupe toute la largeur qu'on lui
   laisse, et on ne peut rien lui imposer directement sans
   fausser ses calculs.

   Si 30px paraît trop, descends à 24px.
   ========================================================== */

@media (max-width: 767px) {

  .temoignages {
    padding: 40px 30px 36px !important;
    overflow: hidden !important;
  }

  .temoignages-titre,
  .temoignages-titre .elementor-heading-title {
    font-size: 24px !important;
    line-height: 1.25 !important;
    letter-spacing: -.3px !important;
    margin: 0 0 10px !important;

    /* La §20.6 pose hyphens: auto sur tous les titres */
    hyphens: none !important;
    -webkit-hyphens: none !important;
    overflow-wrap: normal !important;
  }

  .temoignages-soustitre,
  .temoignages-soustitre p {
    font-size: 15.5px !important;
    line-height: 1.55 !important;
    max-width: none !important;
    margin: 0 0 24px !important;
  }
}


/* ==========================================================
   15.13 — MOBILE : LA CARTE, EN COLONNE

   La photo est en position ABSOLUE sur bureau : son ordre
   dans le balisage n'a donc aucune importance. Dans le flux,
   elle atterrit là où elle est écrite — après le texte.

   order: -1 la remonte. Le balisage du widget n'étant pas
   modifiable, c'est la seule voie. C'est purement visuel,
   donc sans effet sur les calculs du carrousel.

   Un visage se lit en un dixième de seconde et donne le
   contexte. Placé après la citation, il n'est plus qu'une
   illustration.
   ========================================================== */

@media (max-width: 767px) {

  .temoignages-carousel .elementor-testimonial {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  /* --- La photo, remontée en tête --- */
  .temoignages-carousel .elementor-testimonial__image {
    order: -1 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    inset-inline-start: auto !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
  }

  /* Arrondis en HAUT, puisque la photo est en tête de carte */
  .temoignages-carousel .elementor-testimonial__image,
  .temoignages-carousel .elementor-testimonial__image *,
  .temoignages-carousel .elementor-testimonial__image img {
    border-radius: 16px 16px 0 0 !important;
    clip-path: inset(0 round 16px 16px 0 0) !important;
  }

  /* object-position center 30 % cale le cadrage sur les
     visages, rarement situés au centre géométrique. */
  .temoignages-carousel .elementor-testimonial__image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover !important;
    object-position: center 30% !important;
    display: block;
  }
}


/* ==========================================================
   15.14 — MOBILE : LE CONTENU

   Le padding gauche de la §15.7 vaut calc(38 % + 52px) : il
   réservait la place de la photo en absolu. Une fois
   celle-ci remontée dans le flux, il n'a plus lieu d'être —
   c'est lui qui donnait l'impression d'un texte décalé.
   ========================================================== */

@media (max-width: 767px) {

  .temoignages-carousel .elementor-testimonial__content {
    order: 2 !important;
    align-items: flex-start !important;
    min-height: 0 !important;
    padding: 22px 20px 24px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .temoignages-carousel .elementor-testimonial__text {
    position: relative !important;
    width: auto !important;
    max-width: 100% !important;

    font-size: 16.5px !important;
    line-height: 1.55 !important;
    padding: 32px 0 0 !important;
    margin: 0 0 18px !important;
  }

  /* Le guillemet réduit : à 28px il pesait autant que la
     citation elle-même sur une colonne étroite. */
  .temoignages-carousel .elementor-testimonial__text::before {
    width: 22px !important;
    height: 19px !important;
  }

  /* --- Nom et fonction, empilés ---
     À la suite l'un de l'autre, la fonction produisait un
     retour à la ligne au hasard, en plein milieu. */
  .temoignages-carousel .elementor-testimonial__footer {
    width: auto !important;
    max-width: 100% !important;
  }

  .temoignages-carousel .elementor-testimonial__cite {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1px !important;
  }

  .temoignages-carousel .elementor-testimonial__name {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  /* La virgule n'a plus de sens une fois les deux éléments
     sur des lignes séparées. */
  .temoignages-carousel .elementor-testimonial__name::after {
    content: "" !important;
  }

  .temoignages-carousel .elementor-testimonial__title {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
}


/* ==========================================================
   15.15 — MOBILE : LES FLÈCHES

   Pas de clip-path ici : overflow: visible suffit à les
   laisser dépasser, et c'est l'overflow: hidden de
   .temoignages (15.12) qui empêche tout défilement latéral
   parasite.
   ========================================================== */

@media (max-width: 767px) {

  .temoignages-carousel .elementor-main-swiper,
  .temoignages-carousel .swiper,
  .temoignages-carousel .swiper-container {
    padding-bottom: 66px !important;
    overflow: visible !important;
  }

  .temoignages-carousel,
  .temoignages-carousel > .elementor-widget-container {
    overflow: visible !important;
  }

  .temoignages-carousel .elementor-swiper-button {
    width: 44px !important;      /* zone tactile */
    height: 44px !important;
  }

  .temoignages-carousel .elementor-swiper-button svg,
  .temoignages-carousel .elementor-swiper-button i {
    width: 16px !important;
    height: 16px !important;
  }

  .temoignages-carousel .elementor-swiper-button-prev {
    left: calc(50% - 52px) !important;
    right: auto !important;
  }

  .temoignages-carousel .elementor-swiper-button-next {
    right: calc(50% - 52px) !important;
    left: auto !important;
  }
}


/* ==========================================================
   15.16 — TRÈS PETIT ÉCRAN  (≤ 380 px)
   ========================================================== */

@media (max-width: 380px) {

  .temoignages { padding: 34px 22px 32px !important; }

  .temoignages-titre,
  .temoignages-titre .elementor-heading-title {
    font-size: 21px !important;
  }

  .temoignages-soustitre,
  .temoignages-soustitre p {
    font-size: 15px !important;
    margin-bottom: 20px !important;
  }

  .temoignages-carousel .elementor-testimonial__image img {
    aspect-ratio: 3 / 2;
  }

  .temoignages-carousel .elementor-testimonial__content {
    padding: 20px 16px 22px !important;
  }

  .temoignages-carousel .elementor-testimonial__text {
    font-size: 15.5px !important;
    padding-top: 28px !important;
    margin-bottom: 16px !important;
  }

  .temoignages-carousel .elementor-testimonial__text::before {
    width: 20px !important;
    height: 17px !important;
  }

  .temoignages-carousel .elementor-testimonial__name { font-size: 14.5px !important; }
  .temoignages-carousel .elementor-testimonial__title { font-size: 13.5px !important; }
}


/* ==========================================================
   RÉGLAGES RAPIDES — CARROUSEL TÉMOIGNAGES

   >> LES QUATRE PROPRIÉTÉS INTERDITES

   Sur .swiper, .swiper-wrapper et .swiper-slide :
   jamais de margin, width, transform ni clip-path.

   Swiper mesure ces valeurs UNE FOIS au chargement et
   calcule toutes ses translations à partir de là. Un
   !important change ce que l'œil voit, jamais ce qu'il
   a mesuré — d'où une erreur invisible tant qu'on ne
   glisse pas, et qui S'ADDITIONNE à chaque diapositive.

   C'est exactement ce qui se passait ici : un margin: 0
   effaçait le margin-right inline dont Swiper se sert
   pour translater.

   ⚠ Le translateZ(0) de la §15.5 est sur la CARTE, pas
     sur la diapositive. Ne le déplace pas.

   ⚠ Le clip-path de la §15.4 est cloisonné au-dessus de
     767px. Ne le sors pas de sa media query.

   >> PALETTE

   Fond de la section     -> #DBEFFF                 (15.1)
   Fond de la carte       -> #1565E4                 (15.5)
   Guillemet              -> #9BC0FF                 (15.8)
   Fonction (rôle)        -> #C3DBFC                 (15.9)
   Flèches                -> #1565E4                (15.10)

   >> DIMENSIONS BUREAU

   Largeur du contenu     -> max-width 1200px        (15.2)
   Hauteur de la carte    -> min-height 360px        (15.5)
   Largeur de l'image     -> width 38%               (15.6)

   ⚠ La largeur de l'image apparaît DEUX fois : sur
     .elementor-testimonial__image et dans le
     padding-left du contenu (calc, 15.7).

   >> LE RAYON

   Quatre endroits : border-radius et clip-path, sur la
   carte (15.5) et sur l'image (15.6). Change-les
   ensemble. Sur mobile, l'image passe en haut donc son
   rayon aussi (15.13).

   C'est le clip-path SUR L'IMAGE qui fait réellement le
   travail : il découpe son propre rendu, sans dépendre
   du parent que le swiper recrée à chaque transition.

   >> MOBILE

   Marges latérales       -> 30px | 22px sous 380px  (15.12)
   Posées sur .temoignages, EN DEHORS du carrousel :
   c'est la seule façon de contenir la carte sans
   toucher aux dimensions dont Swiper se sert.

   Ordre de la carte      -> order: -1 sur la photo  (15.13)
   Cadrage                -> aspect-ratio 4/3
                             object-position center 30 %
   Descends à 20 % si un portrait est coupé au front.

   >> RÉGLAGES DU PANNEAU, SUR MOBILE

   Diapositives par vue             -> 1
   Nombre de diapositives à glisser -> 1
   Largeur                          -> vide
   Espacement entre les diapositives-> 0

   Ces réglages portent l'icône téléphone : ils se
   règlent par appareil. « Mise en page » ne l'a pas :
   elle reste sur « Image à gauche », le CSS s'occupe
   du mobile.
   ========================================================== */
   
/* ==========================================================
   16. GRILLE RESSOURCES
   ==========================================================

   CLASSES À POSER DANS ELEMENTOR
   ------------------------------
   .ressources            -> le Flexbox de la section
   .ressources-titre      -> le Titre H2
   .ressources-soustitre  -> le Paragraphe
   .ressources-grille     -> le Flexbox contenant les 6 cartes
   .ressource             -> chacune des 6 cartes
   .ressource-titre       -> le Titre de carte  (balise div)
   .ressource-texte       -> la description
   .ressource-illu        -> le widget Image

   RÉGLAGES À FAIRE DANS LE PANNEAU
   --------------------------------
   Flexbox grille : Écarts Colonne ET Ligne = 0
     ⚠ Le CSS gère le gap. Si Elementor en ajoute un, les
       deux s'additionnent et tu passes de 3 à 2 colonnes.

   Chaque carte   : Général > Lien > l'URL de la ressource
     Sinon la flèche promet une action qui n'existe pas.
   ========================================================== */


/* ----------------------------------------------------------
   16.1 — LA SECTION
   ---------------------------------------------------------- */

.ressources {
  display: block !important;
  background: #DBEFFF;
  padding: 76px 20px !important;
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   16.2 — TITRE ET SOUS-TITRE
   ---------------------------------------------------------- */

.ressources-titre,
.ressources-titre .elementor-heading-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.4px;
  color: #101214;
  text-align: center;
  margin: 0 auto 12px !important;
  padding: 0 !important;
  max-width: 20em;
}

.ressources-soustitre,
.ressources-soustitre p {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: #43536E;
  text-align: center;
  margin: 0 auto 48px !important;
  padding: 0 !important;
  max-width: 32em;
}


/* ----------------------------------------------------------
   16.3 — LA GRILLE
   ---------------------------------------------------------- */

.ressources-grille {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  align-self: stretch !important;
  gap: 20px !important;

  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  box-sizing: border-box;
  font-size: 0;          /* supprime l'espace entre inline-flex */
}


/* ----------------------------------------------------------
   16.4 — UNE CARTE
   ---------------------------------------------------------- */

.ressource {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  vertical-align: top !important;
  gap: 0 !important;

  width: calc(33.333% - 14px) !important;
  max-width: calc(33.333% - 14px) !important;
  min-width: 240px;
  flex: 0 0 auto !important;

  background: #FFFFFF !important;
  border: 1px solid #C6E0F7;
  border-radius: 12px;
  box-shadow: none !important;

  padding: 24px !important;
  box-sizing: border-box;
  font-size: 16px;       /* rétablit la taille après font-size:0 */

  transition: border-color 350ms cubic-bezier(.2, 0, 0, 1);
}

.ressource:hover {
  border-color: #1565E4;
}


/* ----------------------------------------------------------
   16.5 — LA FLÈCHE CIRCULAIRE
   Le cercle se remplit depuis son anneau vers le centre
   grâce à une ombre interne qui s'épaissit. La flèche part
   en diagonale avec un léger dépassement en fin de course.

   Le `left: auto` est indispensable : sans lui, un `left`
   posé par Elementor l'emporte sur le `right` et colle
   l'élément dans le mauvais coin.
   ---------------------------------------------------------- */

.ressource::before,
.ressource::after {
  left: auto !important;
  bottom: auto !important;
  inset-inline-start: auto !important;
  pointer-events: none;
}

/* --- Le cercle --- */
.ressource::before {
  content: "";
  position: absolute;
  top: 20px !important;
  right: 20px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  z-index: 2;

  background: #FFFFFF !important;
  border: 1px solid rgba(21, 101, 228, .28) !important;
  box-shadow: inset 0 0 0 0 #1565E4 !important;

  transition: box-shadow   450ms cubic-bezier(.2, 0, 0, 1),
              border-color 450ms cubic-bezier(.2, 0, 0, 1),
              transform    450ms cubic-bezier(.34, 1.15, .5, 1);
}

/* --- La flèche --- */
.ressource::after {
  content: "";
  position: absolute;
  top: 30px !important;
  right: 30px !important;
  width: 16px !important;
  height: 16px !important;
  z-index: 3;
  background: #1565E4 !important;

  /* Le délai de 90 ms sur la couleur laisse le cercle se
     remplir AVANT que la flèche ne passe au blanc :
     sans lui, elle disparaîtrait un instant. */
  transition: transform  450ms cubic-bezier(.34, 1.15, .5, 1),
              background 280ms cubic-bezier(.2, 0, 0, 1) 90ms;

  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- Au survol --- */
.ressource:hover::before {
  box-shadow: inset 0 0 0 20px #1565E4 !important;
  border-color: #1565E4 !important;
  transform: scale(1.06);
}

.ressource:hover::after {
  background: #FFFFFF !important;
  transform: translate(3px, -3px);
}


/* ----------------------------------------------------------
   16.6 — LE TITRE
   Le padding-right laisse la place au cercle.
   ---------------------------------------------------------- */

.ressource-titre,
.ressource-titre .elementor-heading-title {
  position: relative;
  z-index: 1;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.32;
  color: #1565E4;
  margin: 0 0 8px !important;
  padding: 0 52px 0 0 !important;
}


/* ----------------------------------------------------------
   16.7 — LA DESCRIPTION
   ---------------------------------------------------------- */

.ressource-texte,
.ressource-texte p {
  position: relative;
  z-index: 1;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.55;
  color: #101214;
  margin: 0 0 34px !important;
  padding: 0 !important;
}


/* ----------------------------------------------------------
   16.8 — L'ILLUSTRATION
   `margin: auto 0 0` la pousse en bas de sa carte : les six
   images s'alignent ainsi sur une même ligne, même quand
   les titres ne font pas tous le même nombre de lignes.
   ---------------------------------------------------------- */

.ressource-illu {
  position: relative;
  z-index: 1;
  margin: auto 0 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.ressource-illu img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: 4px;
}


/* ----------------------------------------------------------
   16.9 — TABLETTE  (2 colonnes)
   ---------------------------------------------------------- */

@media (max-width: 1024px) {

  .ressources { padding: 60px 20px !important; }

  .ressources-titre,
  .ressources-titre .elementor-heading-title { font-size: 27px; }

  .ressources-soustitre,
  .ressources-soustitre p {
    font-size: 16px;
    margin-bottom: 36px !important;
  }

  .ressources-grille { gap: 18px !important; }

  .ressource {
    width: calc(50% - 9px) !important;
    max-width: calc(50% - 9px) !important;
  }
}


/* ----------------------------------------------------------
   16.10 — MOBILE  (1 colonne)
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  .ressources { padding: 44px 16px !important; }

  .ressources-titre,
  .ressources-titre .elementor-heading-title {
    font-size: 23px;
    line-height: 1.3;
  }

  .ressources-soustitre,
  .ressources-soustitre p {
    font-size: 15px;
    margin-bottom: 28px !important;
  }

  .ressources-grille { gap: 14px !important; }

  .ressource {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    padding: 22px !important;
  }

  .ressource::before {
    top: 18px !important;
    right: 18px !important;
    width: 32px !important;
    height: 32px !important;
  }

  .ressource:hover::before {
    box-shadow: inset 0 0 0 18px #1565E4 !important;
  }

  .ressource::after {
    top: 26px !important;
    right: 26px !important;
    width: 15px !important;
    height: 15px !important;
  }

  .ressource-titre,
  .ressource-titre .elementor-heading-title {
    font-size: 17px;
    padding-right: 46px !important;
  }

  .ressource-texte,
  .ressource-texte p {
    font-size: 14px;
    margin-bottom: 26px !important;
  }

  .ressource-illu img { aspect-ratio: 16 / 10; }
}


/* ----------------------------------------------------------
   16.11 — RESPECT DES PRÉFÉRENCES SYSTÈME
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .ressource,
  .ressource::before,
  .ressource::after {
    transition-duration: 1ms !important;
  }

  .ressource:hover::before { transform: none !important; }
  .ressource:hover::after  { transform: none !important; }
}


/* ==========================================================
   RÉGLAGES RAPIDES — GRILLE RESSOURCES

   >> L'ANIMATION DE LA FLÈCHE

   Durée du remplissage   -> 450ms                   (16.5)
      Monte à 550ms pour encore plus de douceur.
   Courbe du mouvement    -> cubic-bezier(.34,1.15,.5,1)
      Le 1.15 crée le léger dépassement en fin de course.
      Remplace par (.2,0,0,1) pour un arrêt net.
   Délai du changement
   de couleur de la flèche -> 90ms                   (16.5)
   Distance parcourue     -> translate(3px, -3px)    (16.5)
   Grossissement du cercle -> scale(1.06)            (16.5)

   >> PALETTE

   Fond de la section     -> #DBEFFF                 (16.1)
   Titre de section       -> #101214                 (16.2)
   Sous-titre             -> #43536E                 (16.2)
   Liseré des cartes      -> #C6E0F7                 (16.4)
   Liseré au survol       -> #1565E4                 (16.4)
   Titre de carte         -> #1565E4                 (16.6)
   Description            -> #101214                 (16.7)

   >> ESPACEMENTS

   Marges de la section   -> padding 76px            (16.1)
   Sous-titre -> grille   -> margin-bottom 48px      (16.2)
   Écart entre les cartes -> gap 20px                (16.3)
   Padding d'une carte    -> 24px                    (16.4)
   Titre -> description   -> margin-bottom 8px       (16.6)
   Description -> image   -> margin-bottom 34px      (16.7)

   >> DIMENSIONS

   Largeur de la grille   -> max-width 1200px        (16.3)
   Largeur d'une carte    -> calc(33.333% - 14px)    (16.4)
   Taille du cercle       -> 36px                    (16.5)
   Format des images      -> aspect-ratio 16/11      (16.8)

   ⚠ Si tu changes le gap, ajuste la soustraction du calc :
     gap 20 -> -14px | gap 24 -> -16px | gap 32 -> -22px
     (formule : gap x 2 / 3)

   ⚠ Si tu changes la taille du cercle, recale la flèche :
     top/right flèche = top/right cercle + (cercle - 16) / 2
     Et le remplissage : inset 0 0 0 (taille cercle / 2 + 2)
   ========================================================== */
   
/* ==========================================================
   17. FAQ
   ==========================================================

   CLASSES À POSER DANS ELEMENTOR
   ------------------------------
   .faq        -> le Flexbox de la section
   .faq-titre  -> le Titre H2
   .faq-liste  -> le widget Accordéon

   ⚠ LA TYPOGRAPHIE SE RÈGLE DANS LE PANNEAU
   -----------------------------------------
   Ce fichier ne fixe AUCUNE police, taille, graisse ni
   hauteur de ligne. Tout se pilote depuis Elementor :

   Titre FAQ  -> widget Titre    > Style > Typographie
   Questions  -> widget Accordéon > Style > Titre > Typographie
   Réponses   -> widget Éditeur de texte de chaque réponse
                 > Style > Typographie

   Le CSS ne gère que la structure, les couleurs, les
   espacements et le chevron.

   LE CHEVRON EST DESSINÉ PAR LE CSS
   ---------------------------------
   L'icône d'Elementor est masquée et remplacée par un
   chevron identique sur toutes les questions. Peu importe
   ce qui est choisi dans le panneau, le rendu est uniforme.

   AUCUNE ANIMATION
   ----------------
   Ouverture et fermeture instantanées.
   ========================================================== */


/* ----------------------------------------------------------
   17.1 — LA SECTION
   ---------------------------------------------------------- */

.faq {
  display: block !important;
  background: #FFFFFF;
  padding: 80px 20px !important;
  box-sizing: border-box;
}

.faq-titre {
  text-align: center;
  margin: 0 auto 20px !important;
  padding: 0 !important;
}

.faq-titre .elementor-heading-title {
  color: #101214;
  margin: 0 !important;
  padding: 0 !important;
}

.faq-liste {
  max-width: 1080px !important;
  width: 100%;
  margin: 0 auto !important;
}


/* ----------------------------------------------------------
   17.2 — LES ÉLÉMENTS
   Un simple filet de séparation, aucun cadre.
   ---------------------------------------------------------- */

.faq-liste .elementor-accordion,
.faq-liste .e-n-accordion {
  border: none !important;
  background: transparent !important;
}

.faq-liste .elementor-accordion-item,
.faq-liste .e-n-accordion-item {
  border: none !important;
  border-bottom: 1px solid #E4E9F0 !important;
  background: transparent !important;
  margin: 0 !important;
}


/* ----------------------------------------------------------
   17.3 — LA QUESTION
   Structure et couleur uniquement : la typographie reste
   pilotable depuis le panneau.
   ---------------------------------------------------------- */

.faq-liste .elementor-tab-title,
.faq-liste .e-n-accordion-item-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 24px 4px !important;
  margin: 0 !important;

  color: #101214 !important;
  cursor: pointer;
  list-style: none !important;
  transition: none !important;
}

/* Supprime le triangle natif de <summary> */
.faq-liste .e-n-accordion-item-title::-webkit-details-marker {
  display: none !important;
}

/* Aucun changement de couleur au survol ni à l'ouverture */
.faq-liste .elementor-tab-title:hover,
.faq-liste .elementor-tab-title.elementor-active,
.faq-liste .e-n-accordion-item-title:hover,
.faq-liste details[open] .e-n-accordion-item-title {
  color: #101214 !important;
}

.faq-liste .elementor-tab-title a,
.faq-liste .elementor-accordion-title,
.faq-liste .e-n-accordion-item-title-text,
.faq-liste .e-n-accordion-item-title-header {
  color: inherit !important;
  text-decoration: none !important;
  margin: 0 !important;
}


/* ----------------------------------------------------------
   17.4 — LE CHEVRON, DESSINÉ EN CSS
   ---------------------------------------------------------- */

.faq-liste .elementor-accordion-icon,
.faq-liste .e-n-accordion-item-title-icon {
  display: none !important;
}

.faq-liste .elementor-tab-title::after,
.faq-liste .e-n-accordion-item-title::after {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: #101214;
  transition: none !important;

  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Chevron retourné à l'ouverture, sans transition */
.faq-liste .elementor-tab-title.elementor-active::after,
.faq-liste details[open] .e-n-accordion-item-title::after {
  transform: rotate(180deg);
}


/* ----------------------------------------------------------
   17.5 — LA RÉPONSE
   Espacements et couleur uniquement.
   ---------------------------------------------------------- */

.faq-liste .elementor-tab-content,
.faq-liste .e-n-accordion-item > .e-con,
.faq-liste .e-n-accordion-item-content {
  background: transparent !important;
  border: none !important;
  padding: 0 4px 26px !important;
  margin: 0 !important;
  transition: none !important;
  animation: none !important;
}

.faq-liste .elementor-tab-content,
.faq-liste .elementor-tab-content p,
.faq-liste .e-n-accordion-item p {
  color: #101214 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  max-width: 62em;
}

.faq-liste .elementor-tab-content p:last-child,
.faq-liste .e-n-accordion-item p:last-child {
  margin-bottom: 0 !important;
}

/* Liens : noirs et soulignés */
.faq-liste .elementor-tab-content a,
.faq-liste .e-n-accordion-item-content a,
.faq-liste .e-n-accordion-item > .e-con a {
  color: #101214 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}


/* ----------------------------------------------------------
   17.6 — SUPPRESSION DE L'ANIMATION D'OUVERTURE
   ---------------------------------------------------------- */

.faq-liste details,
.faq-liste details > * {
  transition: none !important;
  animation: none !important;
  transition-duration: 0s !important;
  animation-duration: 0s !important;
}

.faq-liste details[open] > .e-con,
.faq-liste details[open] .e-n-accordion-item-content {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}


/* ----------------------------------------------------------
   17.7 — ACCESSIBILITÉ CLAVIER
   ---------------------------------------------------------- */

.faq-liste .elementor-tab-title:focus-visible,
.faq-liste .e-n-accordion-item-title:focus-visible {
  outline: 2px solid #101214;
  outline-offset: 2px;
  border-radius: 4px;
}


/* ----------------------------------------------------------
   17.8 — TABLETTE
   Espacements uniquement : les tailles de police se
   règlent par point de rupture dans le panneau.
   ---------------------------------------------------------- */

@media (max-width: 1024px) {

  .faq { padding: 60px 20px !important; }

  .faq-titre { margin-bottom: 16px !important; }

  .faq-liste .elementor-tab-title,
  .faq-liste .e-n-accordion-item-title {
    padding: 22px 4px !important;
  }
}


/* ----------------------------------------------------------
   17.9 — MOBILE
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  .faq { padding: 48px 16px !important; }

  .faq-titre { margin-bottom: 14px !important; }

  .faq-liste .elementor-tab-title,
  .faq-liste .e-n-accordion-item-title {
    padding: 20px 2px !important;
    gap: 14px;
  }

  .faq-liste .elementor-tab-title::after,
  .faq-liste .e-n-accordion-item-title::after {
    width: 18px;
    height: 18px;
  }

  .faq-liste .elementor-tab-content,
  .faq-liste .e-n-accordion-item > .e-con,
  .faq-liste .e-n-accordion-item-content {
    padding: 0 2px 22px !important;
  }
}


/* ==========================================================
   RÉGLAGES RAPIDES — FAQ

   >> LA TYPOGRAPHIE SE RÈGLE DANS LE PANNEAU

   Aucune taille n'est fixée ici. Utilise :
     Titre FAQ  -> widget Titre > Style > Typographie
     Questions  -> Accordéon > Style > Titre > Typographie
     Réponses   -> Éditeur de texte > Style > Typographie

   Pense à régler chaque point de rupture séparément
   (icônes Desktop / Tablette / Mobile du top bar).

   Valeurs de départ qui fonctionnent bien :
     Titre FAQ  34px / 700 / 1.25
     Questions  19px / 600 / 1.4
     Réponses   17px / 400 / 1.65

   >> CE QUE LE CSS CONTRÔLE

   Couleur du texte       -> #101214                 (17.3 / 17.5)
   Filet de séparation    -> #E4E9F0                 (17.2)
   Marges de la section   -> padding 80px            (17.1)
   Titre -> première Q    -> margin-bottom 20px      (17.1)
   Hauteur d'une question -> padding 24px            (17.3)
   Espace sous la réponse -> padding-bottom 26px     (17.5)
   Écart texte / chevron  -> gap 24px                (17.3)
   Largeur du bloc        -> max-width 1080px        (17.1)
   Largeur des réponses   -> max-width 62em          (17.5)
   Taille du chevron      -> 20px                    (17.4)

   ⚠ Si une taille de police ne bouge toujours pas, c'est
     qu'une règle avec !important traîne ailleurs dans ton
     fichier. Cherche "font-size" dans les sections voisines.
   ========================================================== */
   
/* ==========================================================
   18. CTA FINAL
   ==========================================================

   CLASSES À POSER DANS ELEMENTOR
   ------------------------------
   .cta-final        -> le Flexbox de la section
   .cta-final-box    -> le Flexbox de l'encart
   .cta-final-texte  -> le Flexbox de la colonne gauche
   .cta-final-titre  -> le Titre H2
   .cta-final-desc   -> le Paragraphe
   .cta-final-btn    -> le Bouton
   .cta-final-logo   -> le widget Image

   RÉGLAGES À FAIRE DANS LE PANNEAU
   --------------------------------
   Flexbox encart : direction →, aligner: centre,
                    retour à la ligne ↵, écarts 0
   Flexbox texte  : direction ↓, écarts 0
   ========================================================== */


/* ----------------------------------------------------------
   18.1 — LA SECTION
   ---------------------------------------------------------- */

.cta-final {
  display: block !important;
  background: #FFFFFF;
  padding: 20px 20px 80px !important;
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   18.2 — L'ENCART
   Padding resserré à gauche et à droite pour laisser plus
   de place au logo.
   ---------------------------------------------------------- */

.cta-final-box {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 36px !important;

  max-width: 1200px;
  width: 100%;
  margin: 0 auto !important;
  padding: 40px 44px !important;
  box-sizing: border-box;

  background: #EDF4FF;
  border: 1px solid #C6E0F7;
  border-radius: 14px;
}


/* ----------------------------------------------------------
   18.3 — LA COLONNE TEXTE
   `flex: 1 1 0` la laisse se comprimer pour que le logo
   garde toute sa taille.
   ---------------------------------------------------------- */

.cta-final-texte {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  flex: 1 1 0 !important;
  min-width: 0;
}

/* Le titre tient sur une ligne : la taille s'ajuste toute
   seule entre 20 et 30 px selon la largeur disponible. */
.cta-final-titre,
.cta-final-titre .elementor-heading-title {
  font-size: clamp(20px, 2.15vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.4px;
  color: #101214;
  margin: 0 0 10px !important;
  padding: 0 !important;
  text-wrap: balance;
}

.cta-final-desc,
.cta-final-desc p {
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 400;
  line-height: 1.55;
  color: #101214;
  margin: 0 0 22px !important;
  padding: 0 !important;
  max-width: 42em;
}


/* ----------------------------------------------------------
   18.4 — LE BOUTON
   Animation flat : le fond glisse depuis la gauche,
   la flèche apparaît en s'écartant du texte.
   ---------------------------------------------------------- */

.cta-final-btn :is(a, button, .elementor-button) {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;

  display: inline-flex !important;
  align-items: center;
  gap: 0;

  background: #1565E4 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 26px !important;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer;

  transition: gap 220ms cubic-bezier(.2, 0, 0, 1);
}

/* La nappe foncée qui se déploie depuis la gauche */
.cta-final-btn :is(a, button, .elementor-button)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0C4CA0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(.2, 0, 0, 1);
}

.cta-final-btn :is(a, button, .elementor-button):hover::before {
  transform: scaleX(1);
}

/* La flèche, masquée au repos, qui apparaît au survol */
.cta-final-btn :is(a, button, .elementor-button)::after {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 15px;
  background: #FFFFFF;
  opacity: 0;

  transition: width   220ms cubic-bezier(.2, 0, 0, 1),
              opacity 180ms linear;

  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

.cta-final-btn :is(a, button, .elementor-button):hover {
  gap: 10px;
}

.cta-final-btn :is(a, button, .elementor-button):hover::after {
  width: 16px;
  opacity: 1;
}

.cta-final-btn :is(a, button, .elementor-button):active::before {
  background: #093A7D;
}

.cta-final-btn :is(a, button, .elementor-button):focus-visible {
  outline: 2px solid #1565E4;
  outline-offset: 3px;
}


/* ----------------------------------------------------------
   18.5 — LE LOGO
   `flex: 0 0 auto` garantit qu'il ne se comprime jamais :
   c'est le texte qui cède la place.
   ---------------------------------------------------------- */

.cta-final-logo {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
}

.cta-final-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 380px;
  max-height: 190px;
  object-fit: contain;
}


/* ----------------------------------------------------------
   18.6 — TABLETTE
   ---------------------------------------------------------- */

@media (max-width: 1024px) {

  .cta-final { padding: 16px 20px 60px !important; }

  .cta-final-box {
    padding: 34px 34px !important;
    gap: 28px !important;
  }

  .cta-final-titre,
  .cta-final-titre .elementor-heading-title {
    font-size: clamp(19px, 2.6vw, 25px);
  }

  .cta-final-logo img {
    max-width: 260px;
    max-height: 140px;
  }
}


/* ----------------------------------------------------------
   18.7 — MOBILE
   L'encart bascule en colonne, le logo passe en dessous.
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  .cta-final { padding: 12px 16px 48px !important; }

  .cta-final-box {
    flex-flow: column nowrap !important;
    align-items: flex-start !important;
    padding: 28px 24px !important;
    gap: 26px !important;
  }

  .cta-final-texte { flex: 1 1 auto !important; width: 100%; }

  .cta-final-titre,
  .cta-final-titre .elementor-heading-title {
    font-size: 22px;
    line-height: 1.28;
  }

  .cta-final-desc,
  .cta-final-desc p {
    font-size: 15px;
    margin-bottom: 20px !important;
  }

  .cta-final-btn { width: 100%; }

  .cta-final-btn :is(a, button, .elementor-button) {
    width: 100%;
    justify-content: center;
  }

  .cta-final-logo {
    align-self: center !important;
    width: 100%;
  }

  .cta-final-logo img {
    max-width: 260px;
    max-height: 140px;
    margin: 0 auto;
  }
}


/* ----------------------------------------------------------
   18.8 — RESPECT DES PRÉFÉRENCES SYSTÈME
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .cta-final-btn :is(a, button, .elementor-button),
  .cta-final-btn :is(a, button, .elementor-button)::before,
  .cta-final-btn :is(a, button, .elementor-button)::after {
    transition-duration: 1ms !important;
  }

  .cta-final-btn :is(a, button, .elementor-button):hover::before {
    transform: scaleX(1) !important;
  }
}


/* ==========================================================
   RÉGLAGES RAPIDES — CTA FINAL

   >> LE LOGO

   Taille maximale        -> max-width 380px         (18.5)
                             max-height 190px
   Monte ces deux valeurs ensemble pour l'agrandir
   encore : le texte se comprimera d'autant.

   >> LA TYPOGRAPHIE ADAPTATIVE

   Titre    -> clamp(20px, 2.15vw, 30px)             (18.3)
   Texte    -> clamp(14px, 1.05vw, 16px)             (18.3)

   Le clamp fixe un minimum, une valeur qui suit la
   largeur d'écran, et un maximum. Le titre ne descend
   jamais sous 20px et ne dépasse jamais 30px : il
   s'ajuste tout seul pour tenir sur une ligne sans
   empiéter sur le logo.

   Pour un titre plus gros, monte le 3e nombre.
   Pour qu'il se comprime davantage, baisse le 1er.

   >> L'ENCART

   Largeur                -> max-width 1200px        (18.2)
   Padding intérieur      -> 40px 44px               (18.2)
   Écart texte / logo     -> gap 36px                (18.2)
   Fond                   -> #EDF4FF                 (18.2)
   Liseré                 -> #C6E0F7                 (18.2)
   Rayon                  -> 14px                    (18.2)

   >> LE BOUTON

   Fond au repos          -> #1565E4                 (18.4)
   Fond au survol         -> #0C4CA0                 (18.4)
   Fond au clic           -> #093A7D                 (18.4)
   Vitesse du remplissage -> 320ms                   (18.4)
   ========================================================== */
   
 /* ==========================================================
   19. HERO 2
   ==========================================================

   CLASSES À POSER DANS ELEMENTOR
   ------------------------------
   .hero2          -> le Flexbox de la section
   .hero2-inner    -> le Flexbox intérieur
   .hero2-gauche   -> la colonne gauche
   .hero2-droite   -> la colonne droite
   .hero2-eyebrow  -> le sur-titre         (balise div)
   .hero2-titre    -> le Titre             (balise h1)
   .hero2-texte    -> le Paragraphe
   .hero2-cta      -> le Flexbox des boutons
   .hero2-btn      -> le Bouton plein
   .hero2-lien     -> le lien secondaire
   .hero2-image    -> le widget Image

   ⚠ LE SUR-TITRE
   Tape la phrase ENTIÈRE dans le champ Titre :
   "Facturation électronique"
   Le bloc bleu incliné est dessiné par le CSS par-dessus
   le premier mot. Si tu changes ce mot, change aussi la
   variable --mot en section 19.3.

   LA TYPOGRAPHIE DU SUR-TITRE EST LIBRE
   -------------------------------------
   Règle-la dans le widget Titre > Style > Typographie.
   Le bloc bleu est dimensionné en `em` : il suit
   automatiquement la taille choisie.

   DEUX RÉGLAGES À NE PAS TOUCHER DANS LE PANNEAU :
     - Graisse : laisse-la sur normal. Le CSS met le mot
       encadré en 800 ; si tu forces un gras, les deux
       mots seront gras.
     - Espacement des mots : laisse-le VIDE. Il écraserait
       la variable --decalage.

   RÉGLAGES À FAIRE DANS LE PANNEAU
   --------------------------------
   Écarts = 0 sur TOUS les Flexbox.
   Sur le widget Image : aucune largeur max définie.
   ========================================================== */


/* ----------------------------------------------------------
   19.1 — LA SECTION
   ---------------------------------------------------------- */

.hero2 {
  display: block !important;
  background: #FFFFFF;
  padding: 72px 20px 80px !important;
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   19.2 — LE CONTENEUR ET LES COLONNES
   ---------------------------------------------------------- */

.hero2-inner {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 48px !important;

  max-width: 1280px;
  width: 100%;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.hero2-gauche {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  flex: 0 1 45% !important;
  max-width: 45%;
  min-width: 0;
  padding: 0 !important;
}

.hero2-droite {
  flex: 0 1 55% !important;
  max-width: 55%;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
}


/* ----------------------------------------------------------
   19.3 — LE SUR-TITRE
   Un bloc bleu incliné est posé par-dessus le premier mot ;
   le reste de la phrase s'affiche à côté.

   Aucune taille n'est fixée ici : seul l'espacement entre
   les deux mots est forcé, car Elementor pose un
   `word-spacing: normal` dès qu'on règle la typographie.
   ---------------------------------------------------------- */

.hero2-eyebrow {
  --mot: "Facturation";   /* le mot encadré */
  --angle: -2deg;         /* 0deg = bloc droit */
  --decalage: 1em;        /* écart avant le mot suivant */

  display: block !important;
  overflow: visible !important;
  background: transparent !important;
  color: #101214;

  margin: 0 0 22px !important;
  padding: 0 !important;
}

/* L'espacement est forcé à tous les niveaux possibles */
.hero2-eyebrow,
.hero2-eyebrow .elementor-widget-container,
.hero2-eyebrow .elementor-heading-title {
  word-spacing: var(--decalage) !important;
}

.hero2-eyebrow .elementor-heading-title {
  position: relative;
  display: inline-block;
  width: auto;

  margin: 0 !important;
  padding: 0 0 0 .39em !important;
  background: transparent !important;
  color: inherit !important;
  font-weight: inherit;
}

/* Le bloc bleu */
.hero2-eyebrow .elementor-heading-title::before {
  content: var(--mot);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;

  font-weight: 800;
  word-spacing: normal !important;
  white-space: nowrap;

  color: #FFFFFF;
  background: #1565E4;
  padding: .33em .39em;
  border-radius: 2px;

  transform: translateY(-.33em) rotate(var(--angle));
  transform-origin: center;
}


/* ----------------------------------------------------------
   19.4 — LE TITRE
   ---------------------------------------------------------- */

.hero2-titre,
.hero2-titre .elementor-heading-title {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.2px;
  color: #101214;
  margin: 0 0 16px !important;
  padding: 0 !important;
  max-width: 13em;
}


/* ----------------------------------------------------------
   19.5 — LE PARAGRAPHE
   ---------------------------------------------------------- */

.hero2-texte,
.hero2-texte p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: #43536E;
  margin: 0 0 30px !important;
  padding: 0 !important;
  max-width: 26em;
}


/* ----------------------------------------------------------
   19.6 — LA RANGÉE DE BOUTONS
   ---------------------------------------------------------- */

.hero2-cta {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 26px !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* ----------------------------------------------------------
   19.7 — LE BOUTON PLEIN
   ---------------------------------------------------------- */

.hero2-btn :is(a, button, .elementor-button) {
  display: inline-flex !important;
  align-items: center;

  background: #1565E4 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 16px 30px !important;

  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  word-spacing: normal !important;
  text-decoration: none !important;
  box-shadow: none !important;

  transition: background 160ms linear;
}

.hero2-btn :is(a, button, .elementor-button):hover {
  background: #0C4CA0 !important;
}

.hero2-btn :is(a, button, .elementor-button):focus-visible {
  outline: 2px solid #1565E4;
  outline-offset: 3px;
}


/* ----------------------------------------------------------
   19.8 — LE LIEN SECONDAIRE
   Flèche large à droite, soulignement qui se déploie sous
   le texte seulement.
   ---------------------------------------------------------- */

.hero2-lien :is(a, button, .elementor-button) {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 12px;

  background: transparent !important;
  color: #1565E4 !important;
  border: none !important;
  padding: 16px 0 !important;

  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  word-spacing: normal !important;
  text-decoration: none !important;
  box-shadow: none !important;

  transition: color 150ms linear;
}

/* --- La flèche --- */
.hero2-lien :is(a, button, .elementor-button)::after {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background: currentColor;
  transition: transform 220ms cubic-bezier(.2, 0, 0, 1);

  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- Le soulignement, sous le texte uniquement --- */
.hero2-lien :is(a, button, .elementor-button)::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 12px;
  width: calc(100% - 34px);
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms cubic-bezier(.2, 0, 0, 1);
}

.hero2-lien :is(a, button, .elementor-button):hover::before {
  transform: scaleX(1);
}

.hero2-lien :is(a, button, .elementor-button):hover::after {
  transform: translateX(5px);
}

.hero2-lien :is(a, button, .elementor-button):focus-visible {
  outline: 2px solid #1565E4;
  outline-offset: 4px;
  border-radius: 3px;
}


/* ----------------------------------------------------------
   19.9 — L'IMAGE
   ---------------------------------------------------------- */

.hero2-image {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
}

.hero2-image img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}


/* ----------------------------------------------------------
   19.10 — TABLETTE
   ---------------------------------------------------------- */

@media (max-width: 1024px) {

  .hero2 { padding: 56px 20px 64px !important; }

  .hero2-inner { gap: 32px !important; }

  .hero2-gauche { flex: 0 1 48% !important; max-width: 48%; }
  .hero2-droite { flex: 0 1 52% !important; max-width: 52%; }

  .hero2-eyebrow { margin-bottom: 18px !important; }

  .hero2-titre,
  .hero2-titre .elementor-heading-title {
    font-size: 34px;
    letter-spacing: -.8px;
  }

  .hero2-texte,
  .hero2-texte p {
    font-size: 16px;
    margin-bottom: 24px !important;
  }

  .hero2-cta { gap: 18px !important; }

  .hero2-btn :is(a, button, .elementor-button) {
    padding: 14px 24px !important;
    font-size: 15px;
  }

  .hero2-lien :is(a, button, .elementor-button) { font-size: 15px; }
}


/* ----------------------------------------------------------
   19.11 — MOBILE
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  .hero2 { padding: 40px 16px 48px !important; }

  .hero2-inner {
    flex-flow: column nowrap !important;
    gap: 34px !important;
  }

  .hero2-gauche,
  .hero2-droite {
    flex: 1 1 100% !important;
    max-width: 100%;
    width: 100%;
  }

  .hero2-eyebrow { margin-bottom: 16px !important; }

  .hero2-titre,
  .hero2-titre .elementor-heading-title {
    font-size: 27px;
    letter-spacing: -.5px;
    max-width: none;
  }

  .hero2-texte,
  .hero2-texte p {
    font-size: 16px;
    margin-bottom: 24px !important;
    max-width: none;
  }

  .hero2-cta {
    flex-flow: column nowrap !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .hero2-btn :is(a, button, .elementor-button) {
    justify-content: center;
    width: 100%;
  }

  .hero2-lien :is(a, button, .elementor-button) {
    justify-content: center;
    padding: 8px 0 !important;
  }

  .hero2-lien :is(a, button, .elementor-button)::before {
    display: none;
  }
}


/* ----------------------------------------------------------
   19.12 — RESPECT DES PRÉFÉRENCES SYSTÈME
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .hero2-lien :is(a, button, .elementor-button)::before,
  .hero2-lien :is(a, button, .elementor-button)::after,
  .hero2-btn :is(a, button, .elementor-button) {
    transition-duration: 1ms !important;
  }

  .hero2-lien :is(a, button, .elementor-button):hover::after {
    transform: none !important;
  }
}


/* ==========================================================
   RÉGLAGES RAPIDES — HERO 2

   >> LE SUR-TITRE

   Mot encadré            -> --mot "Facturation"     (19.3)
   Inclinaison du bloc    -> --angle -2deg           (19.3)
      0deg = droit | -4deg = très penché
   Écart entre les 2 mots -> --decalage 1em          (19.3)
      .85em = serré | 1em = naturel | 1.2em = large

   La TAILLE se règle dans le panneau :
   widget Titre > Style > Typographie.
   Le bloc bleu suit automatiquement, il est en `em`.

   ⚠ Dans le panneau, laisse VIDE le champ "Espacement
     des mots" de la Typographie : il écraserait
     --decalage et les deux mots se chevaucheraient.

   ⚠ Laisse aussi la Graisse sur normal : le CSS met le
     mot encadré en 800 et le second hérite. Un gras forcé
     dans le panneau rendrait les deux mots gras.

   >> LES PROPORTIONS

   Largeur du conteneur   -> max-width 1280px        (19.2)
   Colonne texte          -> flex 0 1 45%            (19.2)
   Colonne image          -> flex 0 1 55%            (19.2)
   Écart entre colonnes   -> gap 48px                (19.2)

   Change les DEUX valeurs de chaque colonne ensemble
   (flex ET max-width), sinon la mise en page déborde.

   >> LA TYPOGRAPHIE

   Titre                  -> 46px / 800 / 1.1        (19.4)
   Coupure du titre       -> max-width 13em          (19.4)
   Paragraphe             -> 18px / 1.6              (19.5)
   Coupure du paragraphe  -> max-width 26em          (19.5)

   >> LE LIEN SECONDAIRE

   Taille de la flèche    -> 22px                    (19.8)
   Écart texte / flèche   -> gap 12px                (19.8)
   Glissement au survol   -> translateX 5px          (19.8)

   ⚠ Le soulignement s'arrête avant la flèche grâce au
     calc(100% - 34px) = taille flèche (22) + gap (12).
   ========================================================== */
   
  /* ==========================================================
   20. OPTIMISATIONS MOBILE
   ==========================================================

   ⚠ CE BLOC DOIT ÊTRE PLACÉ TOUT EN BAS DU FICHIER.
     Il surcharge les sections précédentes, donc il doit
     être lu en dernier par le navigateur.

   Ce qu'il fait :
     - supprime tout débordement horizontal
     - garantit des zones tactiles de 44 px minimum
     - masque les éléments purement décoratifs
     - allège les ombres, flous et animations
     - resserre les espacements verticaux
   ========================================================== */


/* ----------------------------------------------------------
   20.1 — ANTI-DÉBORDEMENT HORIZONTAL
   La cause n°1 du scroll latéral parasite sur mobile.
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  .hero2, .produits, .onglets-simplifia, .echeances,
  .preuve, .avantages, .cta-bleu, .temoignages,
  .ressources, .faq, .cta-final {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Aucun média ne dépasse jamais sa colonne */
  .hero2 img, .produits img, .avantages img,
  .ressources img, .temoignages img,
  .onglets-simplifia img, .cta-final img {
    max-width: 100% !important;
    height: auto !important;
  }
}


/* ----------------------------------------------------------
   20.2 — ZONES TACTILES
   44 px de haut minimum : c'est le seuil sous lequel un
   pouce rate la cible une fois sur trois.
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  .cta-plein :is(a, button, .elementor-button),
  .cta-lien :is(a, button, .elementor-button),
  .hero2-btn :is(a, button, .elementor-button),
  .hero2-lien :is(a, button, .elementor-button),
  .onglet-cta :is(a, button, .elementor-button),
  .cta-final-btn :is(a, button, .elementor-button),
  .cta-bleu-lien :is(a, button, .elementor-button),
  .onglets-barre > *,
  .faq-liste .e-n-accordion-item-title,
  .faq-liste .elementor-tab-title,
  .temoignages-carousel .elementor-swiper-button {
    min-height: 44px !important;
  }

  /* Les cartes cliquables aussi */
  .ressource, .produit {
    min-height: 44px;
  }
}


/* ----------------------------------------------------------
   20.3 — MASQUAGE DES DÉCORATIONS
   Sur un écran étroit, ces éléments mangent de la place
   sans apporter d'information.
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  /* Boucles, quadrillages, halos */
  .temoignages::before,
  .temoignages::after,
  .echeances::before,
  .echeances::after,
  .ressources::before,
  .ressources::after {
    display: none !important;
  }

  /* Blocs décalés derrière les images */
  .onglet-image img {
    box-shadow: none !important;
  }
}


/* ----------------------------------------------------------
   20.4 — ALLÈGEMENT DES EFFETS
   Le flou et les ombres coûtent cher en GPU : sur un
   téléphone d'entrée de gamme, ils font saccader le
   défilement.
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  .ressource,
  .ressource::before,
  .temoignages-carousel .elementor-testimonial {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }

  .echeance,
  .ressource,
  .produit,
  .cta-final-box {
    box-shadow: none !important;
  }

  /* Les survols n'existent pas au doigt : on les neutralise
     pour éviter l'état "collé" après un tap. */
  @media (hover: none) {
    .ressource:hover,
    .produit:hover,
    .echeance:hover {
      transform: none !important;
      background: inherit !important;
    }

    .ressource:hover::after,
    .hero2-lien :is(a, button):hover::after,
    .cta-lien :is(a, button):hover::after {
      transform: none !important;
    }
  }
}


/* ----------------------------------------------------------
   20.5 — LES IMAGES
   Formats resserrés : une image trop haute pousse le
   contenu suivant hors de l'écran.
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  .ressource-illu img {
    aspect-ratio: 16 / 9 !important;
  }

  .avantage-illu {
    height: 100px !important;
    margin-bottom: 14px !important;
  }

  .avantage-illu img {
    max-width: 60% !important;
  }

  .produit-icone {
    width: 44px !important;
    height: 44px !important;
  }

  .logo-client img {
    max-height: 42px !important;
    max-width: 110px !important;
  }

  .cta-final-logo img {
    max-width: 220px !important;
    max-height: 120px !important;
  }
}


/* ----------------------------------------------------------
   20.6 — TYPOGRAPHIE
   Un plancher de 15 px sur les textes courants : en
   dessous, la lecture devient pénible sur petit écran.
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  .hero-texte, .hero-texte p,
  .hero2-texte, .hero2-texte p,
  .onglet-texte, .onglet-texte p,
  .avantage-texte, .avantage-texte p,
  .echeance-texte, .echeance-texte p,
  .ressource-texte, .ressource-texte p,
  .produit-desc, .produit-desc p,
  .preuve-phrase, .preuve-phrase p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* Coupure propre des mots longs et des URL */
  .hero2-titre, .hero-titre,
  .onglet-titre, .avantages-titre,
  .ressources-titre, .temoignages-titre,
  .echeances-titre, .faq-titre,
  .cta-final-titre, .cta-bleu-titre {
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: none !important;
  }
}


/* ----------------------------------------------------------
   20.7 — ESPACEMENTS VERTICAUX
   Un rythme unique sur toute la page : chaque section
   respire pareil, le défilement devient prévisible.
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  .hero2, .produits, .onglets-simplifia,
  .echeances, .preuve, .avantages,
  .temoignages, .ressources, .faq {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .cta-bleu {
    padding: 72px 16px 44px !important;
  }

  .cta-final {
    padding: 8px 16px 44px !important;
  }
}


/* ----------------------------------------------------------
   20.8 — TRÈS PETITS ÉCRANS  (≤ 380 px)
   iPhone SE, Galaxy A0x et assimilés.
   ---------------------------------------------------------- */

@media (max-width: 380px) {

  .hero2-titre, .hero2-titre .elementor-heading-title { font-size: 24px !important; }
  .hero-titre,  .hero-titre .elementor-heading-title  { font-size: 24px !important; }

  .hero2-eyebrow { font-size: 17px !important; }
  .eyebrow       { font-size: 19px !important; }

  .avantages-titre, .avantages-titre .elementor-heading-title,
  .ressources-titre, .ressources-titre .elementor-heading-title,
  .echeances-titre, .echeances-titre .elementor-heading-title {
    font-size: 21px !important;
  }

  .faq-liste .e-n-accordion-item-title,
  .faq-liste .elementor-tab-title {
    font-size: 15px !important;
    gap: 10px !important;
  }

  .hero2, .produits, .onglets-simplifia,
  .echeances, .preuve, .avantages,
  .temoignages, .ressources, .faq, .cta-final {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Le sur-titre incliné risque de déborder : on le
     redresse et on le réduit. */
  .hero2-eyebrow { --angle: 0deg; --decalage: .5em; }
  .eyebrow       { --angle: 0deg; --decalage: .5em; }
}


/* ==========================================================
   RÉGLAGES RAPIDES — OPTIMISATIONS MOBILE

   Padding vertical global  -> 44px                  (20.7)
   Padding latéral global   -> 16px                  (20.7)
   Plancher typographique   -> 15px                  (20.6)
   Zone tactile minimale    -> 44px                  (20.2)

   >> CE QUI EST MASQUÉ SUR MOBILE

   Boucles décoratives, quadrillages, halos           (20.3)
   Blocs colorés décalés derrière les images          (20.3)
   Flous d'arrière-plan et ombres portées             (20.4)

   >> POUR RÉAFFICHER UN ÉLÉMENT

   Supprime sa ligne dans le bloc 20.3.

   >> À VÉRIFIER APRÈS COLLAGE

   1. Aucun scroll horizontal : fais glisser la page vers
      la droite, elle ne doit pas bouger.
   2. Les boutons se tapent du premier coup au pouce.
   3. Aucun titre ne casse en plein milieu d'un mot.
   4. Le défilement reste fluide, sans saccade.

   Teste sur un VRAI téléphone, pas seulement dans le
   simulateur d'Elementor : les performances GPU et le
   comportement tactile n'y sont pas reproduits.
   ========================================================== */
   
   /* ==========================================================
/* ==========================================================
   20.9 — HERO 2 SUR MOBILE ET TABLETTE
   ==========================================================

   ⚠ À COLLER À LA FIN DE LA §20, APRÈS LE 20.8.

   Pourquoi ici et pas dans la §19 : la §20 passe après la
   §19 et écrase ses paddings avec des !important. En CSS,
   à spécificité égale, c'est la dernière règle lue qui
   gagne — toute correction du hero2 mobile doit donc vivre
   ici, pas dans la §19.11.

   ----------------------------------------------------------
   CE QUE ÇA CORRIGE
   ----------------------------------------------------------
   1. Le sur-titre disparaissait sous le header. Ce n'était
      pas un problème de taille : il est bien affiché, mais
      RECOUVERT par la barre collante, puisqu'il se trouve
      dans les 60 premiers pixels de la page. On réserve
      donc la hauteur du header. Voir 20.9.1.

   2. Le bloc bleu mordait sur « électronique ». Il est posé
      PAR-DESSUS le premier mot : c'est --decalage qui doit
      pousser le second assez loin. Voir 20.9.3.

   3. Le sur-titre était trop gros et débordait à droite. La
      taille venait du panneau, calibrée pour le bureau.

   4. Le bloc bleu incliné se faisait rogner. Sur un écran
      étroit, l'inclinaison fait sortir un coin de la zone
      visible : on redresse le bloc dès la tablette.

   5. Les marges latérales étaient trop justes.

   6. Le grand vide sous les boutons. Voir la note du
      20.9.5 : une partie vient du fichier image lui-même,
      pas du CSS.
   ========================================================== */


/* ----------------------------------------------------------
   20.9.1 — LE DÉGAGEMENT SOUS LE HEADER

   Le header mobile est collant : il se pose par-dessus tout
   ce qui occupe le haut de la page. Une section placée en
   première position doit donc réserver sa hauteur, sinon
   son premier élément passe derrière.

   ⚠ VALEUR COUPLÉE
   --entete-m-h doit valoir la hauteur du header mobile,
   celle de la §25.1. Si tu la changes là-bas, change-la
   ici : sinon le sur-titre repasse sous la barre, ou tu te
   retrouves avec un trou blanc.
   ---------------------------------------------------------- */

:root {
  --entete-m-h: 60px;
  --air-sous-header: 52px;
}

/* ----------------------------------------------------------
   20.9.2 — TABLETTE  (≤ 1024 px)
   Les colonnes tiennent encore côte à côte, mais tout se
   resserre.
   ---------------------------------------------------------- */

@media (max-width: 1024px) {

  .hero2 {
    padding-top: calc(var(--entete-m-h) + var(--air-sous-header) + 4px) !important;
    padding-right: 28px !important;
    padding-bottom: 56px !important;
    padding-left: 28px !important;
  }

  .hero2-inner { gap: 28px !important; }

  /* Le bloc bleu se redresse : une inclinaison sur un
     conteneur étroit fait sortir un coin du cadre. */
  .hero2-eyebrow {
    --angle: 0deg;
    --decalage: .95em;
    font-size: 19px !important;
    margin-bottom: 18px !important;
  }

  .hero2-eyebrow .elementor-heading-title {
    max-width: 100%;
    overflow-wrap: break-word;
  }
}


/* ----------------------------------------------------------
   20.9.3 — MOBILE  (≤ 767 px)
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  /* --- La section ---
     Le padding haut réserve la hauteur du header collant.
     22px sur les côtés au lieu des 16 de la §20.7 : sur une
     colonne unique, le texte a besoin de plus d'air que dans
     une grille, où les voisins créent déjà du rythme. */
  .hero2 {
    padding-top: calc(var(--entete-m-h) + var(--air-sous-header)) !important;
    padding-right: 22px !important;
    padding-bottom: 44px !important;
    padding-left: 22px !important;
  }

  .hero2-inner {
    flex-flow: column nowrap !important;
    gap: 26px !important;
  }

  .hero2-gauche,
  .hero2-droite {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }


  /* --- Le sur-titre ---
     --decalage doit être assez large pour que le bloc bleu,
     posé PAR-DESSUS le premier mot, ne morde pas sur le
     second. Son padding vaut .39em de chaque côté : sous
     .8em, le chevauchement réapparaît quelle que soit la
     taille de police.

     ⚠ Ces valeurs écrasent celles du panneau. C'est voulu :
       la valeur du panneau est calibrée pour le bureau. */
  .hero2-eyebrow {
    --angle: 0deg;
    --decalage: .95em;
    font-size: 15px !important;
    margin-bottom: 16px !important;
    max-width: 100%;

    /* Le bloc bleu est remonté de .33em par son transform :
       sans ce dégagement, il se fait rogner par le haut. */
    padding-top: .35em !important;
  }

  .hero2-eyebrow .elementor-heading-title {
    max-width: 100%;
    overflow-wrap: break-word;
  }


  /* --- Le titre --- */
  .hero2-titre,
  .hero2-titre .elementor-heading-title {
    font-size: 29px !important;
    line-height: 1.14 !important;
    letter-spacing: -.6px !important;
    margin: 0 0 14px !important;
    max-width: none !important;
  }


  /* --- Le paragraphe --- */
  .hero2-texte,
  .hero2-texte p {
    font-size: 15.5px !important;
    line-height: 1.6 !important;
    margin: 0 0 26px !important;
    max-width: none !important;
  }


  /* --- Les boutons ---
     Le bouton plein prend toute la largeur, le lien reste
     aligné à gauche sous lui : centré, il paraîtrait être
     une seconde action de même poids. */
  .hero2-cta {
    flex-flow: column nowrap !important;
    align-items: stretch !important;
    gap: 6px !important;
  }

  .hero2-btn :is(a, button, .elementor-button) {
    justify-content: center !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 15px 24px !important;
    font-size: 16px !important;
  }

  .hero2-lien :is(a, button, .elementor-button) {
    justify-content: flex-start !important;
    width: auto !important;
    align-self: flex-start !important;
    min-height: 44px !important;
    padding: 10px 0 !important;
    font-size: 16px !important;
  }

  /* Pas de soulignement au doigt : il resterait affiché
     après l'appui, sans moyen de le faire disparaître. */
  .hero2-lien :is(a, button, .elementor-button)::before {
    display: none !important;
  }


  /* --- L'image ---
     Le gap de la colonne suffit : tout margin supplémentaire
     creuse un trou. */
  .hero2-droite {
    margin-top: 0 !important;
    padding: 0 !important;
  }

  .hero2-image {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
  }

  .hero2-image img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
}


/* ----------------------------------------------------------
   20.9.4 — TRÈS PETIT ÉCRAN  (≤ 380 px)
   ---------------------------------------------------------- */

@media (max-width: 380px) {

  :root { --air-sous-header: 40px; }

  .hero2 {
    padding-right: 18px !important;
    padding-bottom: 40px !important;
    padding-left: 18px !important;
  }

  .hero2-inner { gap: 22px !important; }

  /* --decalage ne descend PAS avec la police : il est en em,
     donc il suit déjà proportionnellement. */
  .hero2-eyebrow {
    --decalage: .95em;
    font-size: 13.5px !important;
    margin-bottom: 14px !important;
  }

  .hero2-titre,
  .hero2-titre .elementor-heading-title {
    font-size: 25px !important;
    letter-spacing: -.4px !important;
  }

  .hero2-texte,
  .hero2-texte p {
    font-size: 15px !important;
    margin-bottom: 22px !important;
  }

  .hero2-btn :is(a, button, .elementor-button) {
    min-height: 48px !important;
    font-size: 15px !important;
  }
}


/* ----------------------------------------------------------
   20.9.5 — RECADRAGE DE L'IMAGE DU HERO

   Ton PNG contient une large bande transparente en bas :
   environ 190px de vide qui séparent le hero de la section
   suivante. Le CSS ne peut pas retirer du vide qui est DANS
   le fichier, mais il peut le rogner à l'affichage.

   aspect-ratio impose un cadre, object-fit: cover remplit ce
   cadre en débordant, object-position choisit ce qu'on garde.
   « center 38 % » cale le cadrage sur le sujet plutôt que sur
   le centre géométrique, qui tomberait dans le vide.

   ⚠ Ceci reste un pansement : le navigateur télécharge quand
     même les pixels vides. Recadre le fichier dans un éditeur
     et réimporte-le dès que tu peux, puis supprime ce bloc.
   ---------------------------------------------------------- */

@media (max-width: 1024px) {

  .hero2-image img {
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: center 38%;
    border-radius: 12px;
  }
}

@media (max-width: 767px) {

  .hero2-image img {
    aspect-ratio: 4 / 3;
    object-position: center 40%;
  }
}

/* ==========================================================
   20.10 — RANGÉE PRODUITS SUR MOBILE
   ==========================================================

   ⚠ À COLLER À LA SUITE DU BLOC 20.9.

   ----------------------------------------------------------
   LE PARTI PRIS
   ----------------------------------------------------------
   Sur bureau, les 4 blocs forment une rangée : l'œil les
   embrasse d'un coup et comprend qu'ils vont ensemble.

   Empilés sur mobile avec 60px entre eux, on n'en voit
   jamais que deux à la fois : le lien se perd et chacun
   ressemble à une section isolée.

   On les rassemble donc en une LISTE CONTINUE, séparée par
   des filets fins. Les lignes respirent, mais les filets
   les tiennent ensemble : l'ensemble se lit comme une fiche
   de caractéristiques, pas comme quatre sections perdues.

   ----------------------------------------------------------
   ⚠ LA MARGE HAUTE EST À ZÉRO
   ----------------------------------------------------------
   Aucun padding en haut de cette section. Tout l'écart avec
   le hero vient donc du padding BAS du hero (§20.9.3), et
   de lui seul. Un seul endroit à régler, pas deux qui
   s'additionnent.

   Si un grand vide subsiste malgré ça, il n'est pas dans le
   CSS : il est dans le FICHIER image du hero, qui contient
   une large bande transparente en bas. Le bloc 20.9.5 le
   rogne à l'affichage.

   ----------------------------------------------------------
   RÉGLAGE À FAIRE DANS ELEMENTOR
   ----------------------------------------------------------
   Sur .produits : Style > Mise en page > Écarts > 0
   Les écarts du panneau s'AJOUTENT au gap du CSS. C'est ce
   qui creusait 60px entre les lignes alors que le CSS n'en
   demandait que 28.
   ========================================================== */


/* ----------------------------------------------------------
   20.10.1 — MOBILE  (≤ 767 px)
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  /* --- La section ---
     padding-top à 0 : la §20.7 en imposait 44, qui
     s'ajoutaient au padding bas du hero. L'écart entre les
     deux sections se règle donc uniquement en §20.9.3. */
  .produits {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;

    margin-top: 0 !important;
    padding: 0 22px 36px !important;

    background: #FFFFFF !important;
    border-radius: 0 !important;
    box-sizing: border-box;
  }

  .produits > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }


  /* --- Une ligne ---
     Le filet est porté par la ligne elle-même et non par un
     gap : deux lignes voisines partagent donc un seul trait,
     et la dernière n'en traîne pas un dans le vide.

     La PREMIÈRE ligne n'a pas de padding haut : c'est ce qui
     évite de rouvrir un écart avec la section précédente. */
  .produit,
  .produit > .e-con-inner {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: none !important;
  }

  .produit {
    flex: 1 1 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 20px 0 !important;
    border-bottom: 1px solid #E9ECF1;
    box-sizing: border-box;
  }

  .produit > .e-con-inner {
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .produit:first-child { padding-top: 4px !important; }

  .produit:last-child {
    border-bottom: none;
    padding-bottom: 0 !important;
  }


  /* --- L'icône ---
     48px : assez pour tenir tête au titre sans l'écraser.
     Pas de margin-top : avec un titre à 18px, les deux
     centres optiques tombent déjà l'un sur l'autre. */
  .produit-icone {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .produit-icone :is(img, svg) {
    width: 100% !important;
    height: 100% !important;
    border-radius: 11px !important;
    object-fit: contain;
    display: block;
  }


  /* --- Le texte --- */
  .produit-texte,
  .produit-texte > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .produit-texte {
    flex: 1 1 auto !important;
    min-width: 0;
  }

  .produit-nom,
  .produit-nom .elementor-heading-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -.01em !important;
    color: #101214 !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
  }

  /* Le !important est nécessaire : la §20.6 impose 15px à
     tous les textes courants. Ici la valeur coïncide, mais
     sans lui c'est la §20.6 qui gagnerait la couleur. */
  .produit-desc,
  .produit-desc p {
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    color: #6B7A94 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}


/* ----------------------------------------------------------
   20.10.2 — TRÈS PETIT ÉCRAN  (≤ 380 px)
   ---------------------------------------------------------- */

@media (max-width: 380px) {

  .produits { padding: 0 18px 32px !important; }

  .produit {
    padding: 18px 0 !important;
    gap: 14px !important;
  }

  .produit > .e-con-inner { gap: 14px !important; }

  .produit:first-child { padding-top: 4px !important; }

  .produit-icone {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
  }

  .produit-nom,
  .produit-nom .elementor-heading-title { font-size: 17px !important; }

  .produit-desc,
  .produit-desc p { font-size: 14.5px !important; }
}


/* ----------------------------------------------------------
   20.10.3 — VARIANTE ENCADRÉE   (optionnel)

   Si tu préfères que la liste se détache du fond de page,
   décommente ce bloc : elle devient une carte à liseré,
   dans le même esprit que la grille Ressources.

   Le padding passe alors sur la carte, et la section ne
   garde que sa marge latérale.

  @media (max-width: 767px) {
    .produits {
      padding: 0 16px 36px !important;
      background: transparent !important;
    }

    .produits > .e-con-inner {
      padding: 6px 16px 8px !important;
      background: #FFFFFF;
      border: 1px solid #E9ECF1;
      border-radius: 14px;
    }
  }
   ---------------------------------------------------------- */


/* ==========================================================
   RÉGLAGES RAPIDES — RANGÉE PRODUITS MOBILE

   >> L'ÉCART AVEC LE HERO

   padding-top de .produits   -> 0        (20.10.1)
   Volontairement nul. Tout l'écart vient du padding
   BAS du hero, en §20.9.3. Un seul endroit à régler
   au lieu de deux qui s'additionnent.

   ⚠ S'il reste un grand vide, il est dans le FICHIER
     image du hero : une large bande transparente en
     bas. Le bloc 20.9.5 la rogne à l'affichage, mais
     la vraie solution est de recadrer le fichier.

   >> LES ÉCARTS DU PANNEAU

   Sur .produits : Écarts > 0 dans Elementor.
   Ils s'AJOUTENT au gap du CSS — c'est le piège le
   plus fréquent sur ce genre de bloc.

   >> LE RYTHME

   Padding d'une ligne     -> 20px       (20.10.1)
   Première ligne          -> 4px en haut
   Filet de séparation     -> #E9ECF1

   Le filet est porté par la LIGNE, pas par un gap :
   deux lignes voisines partagent un seul trait, et la
   dernière n'en traîne pas un dans le vide.

   >> LA TYPOGRAPHIE

   Titre                   -> 18px / 700
   Description             -> 15px / #6B7A94
   L'écart de 3 points creuse la hiérarchie sans que
   la description devienne illisible.

   >> L'ICÔNE

   Taille                  -> 48px
   Assez pour tenir tête au titre sans l'écraser.
   Aucun margin-top : avec un titre à 18px, les deux
   centres optiques tombent déjà l'un sur l'autre.

   >> VARIANTE ENCADRÉE

   Bloc 20.10.3, commenté. La liste devient une carte
   à liseré, dans l'esprit de la grille Ressources.
   ========================================================== */
   
/* ==========================================================
   20.11 — BLOC PENCHÉ ET ONGLETS SUR MOBILE      — version 4
   ==========================================================

   ⚠ À COLLER À LA SUITE DU BLOC 20.10.

   ==========================================================
   UNE ACTION DE TA PART : POSER UNE CLASSE
   ==========================================================
   Sur le Flexbox GRIS — le plus extérieur, celui qui
   contient le titre « Comment ça marche » et les onglets —
   ajoute la classe :

       pente-haut

   C'est la seule voie dont je sois certain. Une classe
   NEUVE plutôt que bloc-penche : si un reste d'ancien CSS
   traîne sur ce nom, il ne peut pas interférer. On repart
   de zéro.

   ==========================================================
   ET UNE ACCOLADE EN TROP À SUPPRIMER
   ==========================================================
   Cherche ceci, juste avant la section 10 de ton fichier :

       .bloc-penche > * {
         position: relative;
         z-index: 2;
       }
       }        <-- CELLE-CI EST EN TROP

   Les navigateurs pardonnent une accolade orpheline, mais
   les optimiseurs CSS des plugins de cache WordPress
   TRONQUENT souvent tout ce qui suit. Supprime-la et vide
   le cache : ça peut expliquer plusieurs de nos échecs.

   ----------------------------------------------------------
   CE QUI CHANGE PAR RAPPORT À LA v3
   ----------------------------------------------------------
   1. La pente vise TROIS ancrages en parallèle, dont une
      classe neuve à poser toi-même. Voir 20.11.1.

   2. Les marges latérales sont portées par
      .onglets-simplifia et non plus par le bloc gris : le
      seul élément dont on soit sûr qu'il reçoit bien nos
      règles. Voir 20.11.5.
   ========================================================== */


/* ----------------------------------------------------------
   20.11.1 — LA PENTE

   Trois ancrages en parallèle, du plus sûr au plus large :

   1. .pente-haut  — la classe neuve, à poser toi-même.
   2. .bloc-penche — conservée au cas où elle serait bien
      posée quelque part.
   3. Le :has()    — vise le conteneur qui ABRITE le widget
      onglets, sans avoir besoin de connaître sa classe.

   Une seule des trois suffit, et elles ne se gênent pas :
   appliquer deux fois le même clip-path ne change rien.

   ⚠ Le :has() ne marche que si le widget onglets est un
     enfant DIRECT du bloc gris. S'il y a un conteneur
     intermédiaire, la découpe s'appliquera à ce conteneur
     transparent et ne se verra pas. D'où l'intérêt de la
     classe posée à la main.

   POURQUOI PAS UNE ROTATION
   Une rotation en degrés produit un dénivelé PROPORTIONNEL
   à la largeur : 44px sur 1400px d'écran, 11px sur 390px.
   C'est pour ça que la pente d'origine semblait avoir
   disparu sur mobile — elle était là, réduite à un liseré.
   Le clip-path prend une hauteur en pixels, donc constante.
   ---------------------------------------------------------- */

@media (max-width: 1024px) {

  .pente-haut,
  .bloc-penche,
  .e-con:has(> .onglets-simplifia),
  .e-con:has(> .e-con-inner > .onglets-simplifia) {
    --pente-h: 52px;

    background: #F8F8F8 !important;
    clip-path: polygon(0 var(--pente-h), 100% 0, 100% 100%, 0 100%) !important;
    padding-top: calc(var(--pente-h) + 32px) !important;
    box-sizing: border-box;
  }

  /* L'ancien triangle en pseudo-élément ferait doublon */
  .pente-haut::before,
  .bloc-penche::before { display: none !important; }
}

@media (max-width: 767px) {

  .pente-haut,
  .bloc-penche,
  .e-con:has(> .onglets-simplifia),
  .e-con:has(> .e-con-inner > .onglets-simplifia) {
    --pente-h: 38px;
    padding-top: calc(var(--pente-h) + 26px) !important;
  }
}

@media (max-width: 380px) {

  .pente-haut,
  .bloc-penche,
  .e-con:has(> .onglets-simplifia),
  .e-con:has(> .e-con-inner > .onglets-simplifia) {
    --pente-h: 30px;
  }
}


/* ----------------------------------------------------------
   20.11.2 — LES COLONNES PASSENT EN PLEINE LARGEUR

   ⚠ C'EST LE CORRECTIF PRINCIPAL DE LA SECTION.

   Les largeurs 45 % / 55 % viennent du panneau et ne sont
   renseignées que sur bureau. Les largeurs Elementor sont
   par point de rupture : non renseignées, elles héritent.
   D'où une colonne de texte à 175px, illisible, avec un
   grand vide à droite.

   La technique ne suppose RIEN de la structure : chaque
   conteneur passe à 100 % de large, et chaque conteneur
   autorise le retour à la ligne. Un enfant à 100 % dans un
   parent qui accepte le retour occupe forcément une ligne
   entière — quel que soit le nombre de niveaux imbriqués.
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  .onglets-simplifia .e-con,
  .onglets-simplifia .e-con-inner {
    width: 100% !important;
    max-width: none !important;
    flex-basis: auto !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    flex-wrap: wrap !important;
  }

  /* Le bandeau d'onglets est exclu : lui doit rester sur
     une seule ligne (voir 20.11.3). */
  .onglets-barre.onglets-barre {
    flex-wrap: nowrap !important;
  }
}


/* ----------------------------------------------------------
   20.11.3 — LE BANDEAU D'ONGLETS

   Empilés à la verticale, les onglets ne se lisaient plus
   comme un sélecteur : la pilule active formait un gros
   bloc bleu, les autres flottaient en texte nu.

   On les garde à l'HORIZONTALE, avec un défilement au doigt.
   Le geste est naturel sur mobile, et la pilule active reste
   comprise comme telle.
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  .onglets-barre.onglets-barre {
    flex-direction: row !important;
    gap: 4px !important;
    padding: 5px !important;
    border-radius: 10px !important;

    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;

    /* La barre de défilement est masquée : elle ajouterait
       une bande grise sous les onglets. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .onglets-barre.onglets-barre::-webkit-scrollbar {
    display: none;
  }

  /* flex: 0 0 auto : chaque onglet garde sa largeur de
     texte au lieu de se comprimer. C'est ce qui rend le
     défilement possible. */
  .onglets-barre > * {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    scroll-snap-align: start;

    white-space: nowrap !important;
    padding: 11px 16px !important;
    font-size: 14px !important;
    min-height: 44px !important;
  }
}


/* ----------------------------------------------------------
   20.11.4 — L'IMAGE ET SA COLONNE, MASQUÉES

   Réduite à la moitié de l'écran, l'illustration
   n'apportait plus d'information : elle volait de la place
   au texte, qui est le vrai contenu de l'onglet.

   Le :has() vise le conteneur QUI CONTIENT l'image, à un ou
   deux niveaux de profondeur selon le réglage « Boxed » ou
   « Pleine largeur ». Masquer la seule image laisserait une
   colonne vide, qui traînerait son gap et son espace.
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  .onglet-image { display: none !important; }

  .onglets-simplifia .e-con:has(> .onglet-image),
  .onglets-simplifia .e-con:has(> .e-con-inner > .onglet-image),
  .onglets-simplifia .e-con-inner:has(> .onglet-image) {
    display: none !important;
  }
}


/* ----------------------------------------------------------
   20.11.5 — MARGES ET CONTENU D'UN ONGLET

   Les marges latérales sont portées par .onglets-simplifia
   et non par le bloc gris : c'est le seul élément dont on
   soit sûr qu'il reçoit bien nos règles. Tous les
   conteneurs internes sont remis à zéro, pour qu'une seule
   valeur pilote l'alignement de la section.
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  .onglets-simplifia {
    margin-top: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
  }

  .onglets-simplifia .e-con {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .onglet-titre,
  .onglet-titre .elementor-heading-title {
    font-size: 25px !important;
    line-height: 1.2 !important;
    letter-spacing: -.4px !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 0 14px !important;

    /* La §20.6 pose hyphens: auto sur tous les titres :
       utile sur une colonne large, désastreux sur une
       colonne étroite. */
    hyphens: none !important;
    -webkit-hyphens: none !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .onglet-texte,
  .onglet-texte p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 0 22px !important;
  }

  /* --- La checklist --- */
  .checklist {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 24px !important;
  }

  .checklist ul { gap: 16px !important; }

  .checklist li {
    font-size: 15.5px !important;
    line-height: 1.5 !important;
    padding-left: 28px !important;
  }

  .checklist li::before { top: .32em; }

  /* --- Le bouton ---
     Largeur automatique et non 100 % : c'est une action
     secondaire dans l'onglet. Pleine largeur, il prendrait
     le poids d'un CTA principal. */
  .onglet-cta {
    width: 100% !important;
    margin: 0 !important;
  }

  .onglet-cta :is(a, button, .elementor-button) {
    display: inline-flex !important;
    width: auto !important;
    min-height: 48px !important;
    padding: 13px 22px !important;
    font-size: 15px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 380px) {

  .onglets-simplifia {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .onglet-titre,
  .onglet-titre .elementor-heading-title { font-size: 22px !important; }

  .onglet-texte,
  .onglet-texte p { font-size: 15.5px !important; }

  .checklist li { font-size: 15px !important; }

  .onglet-cta :is(a, button, .elementor-button) {
    padding: 12px 18px !important;
    font-size: 14.5px !important;
  }
}


/* ----------------------------------------------------------
   20.11.6 — VARIANTE : GARDER L'IMAGE   (optionnel)

   Si tu préfères conserver l'illustration, décommente ce
   bloc : elle passe sous le texte, sur toute la largeur.
   C'est le seul format où elle reste lisible sur mobile.

   ⚠ Il annule le 20.11.4 : ne garde pas les deux actifs.

  @media (max-width: 767px) {

    .onglet-image { display: block !important; }

    .onglets-simplifia .e-con:has(> .onglet-image),
    .onglets-simplifia .e-con:has(> .e-con-inner > .onglet-image),
    .onglets-simplifia .e-con-inner:has(> .onglet-image) {
      display: block !important;
      order: 2;
    }

    .onglet-image img {
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      border-radius: 14px !important;
      box-shadow: none !important;
    }
  }
   ---------------------------------------------------------- */


/* ----------------------------------------------------------
   20.11.7 — TEST DE LA CLASSE   (à supprimer après)

   Si la pente ne s'affiche toujours pas, décommente la
   ligne ci-dessous et recharge la page sur mobile.

   Cadre rouge  = la classe est bien posée, le problème est
                  ailleurs (cache, accolade orpheline).
   Aucun cadre  = la classe n'est pas sur le bon Flexbox.

  .pente-haut { outline: 3px solid red !important; }
   ---------------------------------------------------------- */


/* ==========================================================
   RÉGLAGES RAPIDES — BLOC PENCHÉ ET ONGLETS MOBILE

   >> DEUX ACTIONS HORS CSS

   1. Poser la classe pente-haut sur le Flexbox gris.
   2. Supprimer l'accolade orpheline après
      .bloc-penche > *, puis vider le cache.

   >> LES MARGES LATÉRALES

   Portées par .onglets-simplifia         (20.11.5)
      20px mobile | 16px sous 380px
   Et non par le bloc gris : c'est le seul élément dont
   on soit sûr qu'il reçoit nos règles. Tous les
   conteneurs internes sont remis à zéro, donc une seule
   valeur pilote l'alignement de la section.

   >> LA LARGEUR DU TEXTE

   width: 100 % sur tous les conteneurs
   + flex-wrap: wrap sur leurs parents      (20.11.2)

   Un enfant à 100 % dans un parent qui accepte le
   retour à la ligne occupe forcément une ligne entière.
   La technique ne suppose RIEN de la structure : plus
   besoin de deviner quel conteneur est le parent des
   colonnes.

   >> LA PENTE

   Hauteur                 -> --pente-h     (20.11.1)
      52px tablette | 38px mobile | 30px sous 380px

   Trois ancrages en parallèle : .pente-haut,
   .bloc-penche, et un :has() sur le conteneur du widget
   onglets. Une seule des trois suffit.

   Découpée dans le bloc, pas dessinée par-dessus : le
   coin est physiquement absent, c'est le fond de page
   qui apparaît. Aucun conteneur enfant ne peut plus
   repeindre par-dessus.

   ⚠ Ne reviens pas à une rotation en degrés : le
     dénivelé serait proportionnel à la largeur, donc
     invisible sur mobile.

   ⚠ Suppose un fond BLANC derrière le bloc.

   Pour inverser le sens :
   polygon(0 0, 100% var(--pente-h), 100% 100%, 0 100%)

   Si elle ne s'affiche pas : bloc de test 20.11.7.

   >> L'IMAGE

   Masquée avec sa colonne              (20.11.4)
   Pour la garder en pleine largeur sous le texte :
   décommente le 20.11.6 et supprime le 20.11.4.
   Ne garde jamais les deux actifs.

   >> LE BANDEAU D'ONGLETS

   Reste horizontal, défilement au doigt.
   Il est explicitement exclu du flex-wrap de la
   §20.11.2, sinon les onglets s'empileraient.
   ========================================================== */
   
/* ==========================================================
   20.12 — BLOC ÉCHÉANCES SUR MOBILE          — version 5
   ==========================================================

   ⚠ À COLLER À LA SUITE DU BLOC 20.11.

   ----------------------------------------------------------
   CE QUE CE BLOC NE FAIT PAS
   ----------------------------------------------------------
   Il ne touche NI aux fonds, NI aux bordures, NI aux
   arrondis, NI aux paddings latéraux. Toute la mise en page
   vient du panneau Elementor — ta section 11 est vide — et
   elle y reste.

   On ne corrige que les espacements VERTICAUX, hérités des
   valeurs de bureau, et les tailles de texte.

   ----------------------------------------------------------
   CE QUI CHANGE PAR RAPPORT À LA v4
   ----------------------------------------------------------
   Le titre passe de 26 à 30px. À 26px sur fond bleu plein,
   il ne pesait pas assez : un titre de section a besoin de
   plus de présence quand rien autour ne le soutient — ni
   filet, ni sur-titre, ni encadré.

   ----------------------------------------------------------
   RÉGLAGE À FAIRE DANS ELEMENTOR
   ----------------------------------------------------------
   Bascule l'éditeur sur MOBILE (icône téléphone en haut),
   puis sur .echeances-liste :

       Style > Mise en page > Écarts > Ligne = 18

   Les écarts du panneau s'AJOUTENT au gap du CSS. Tant
   qu'une valeur de bureau y est posée, elle redescend telle
   quelle sur mobile.

   Elementor mémorise une valeur par appareil : régler
   l'écart sur Mobile ne touchera pas au bureau.
   ========================================================== */


/* ----------------------------------------------------------
   20.12.1 — MOBILE  (≤ 767 px)
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  /* --- La section bleue ---
     Seules les marges verticales bougent. Les marges
     latérales viennent du panneau et donnent à la carte son
     retrait dans le bleu : on n'y touche pas. */
  .echeances {
    padding-top: 24px !important;
    padding-bottom: 30px !important;
  }

  /* Le gap du conteneur de section est remis à zéro : sans
     ça il s'ajoute au margin du titre et les deux creusent
     ensemble un écart qu'aucune valeur seule n'explique. */
  .echeances,
  .echeances > .e-con-inner {
    gap: 0 !important;
  }

  /* Le conteneur qui ENTOURE le titre porte son propre
     padding, réglé dans le panneau pour le bureau. C'était
     lui le responsable de l'espace au-dessus et en dessous,
     pas la section.

     ⚠ Le :has() ne trouve ce conteneur que si le titre en
       est un enfant direct, ou séparé par un seul
       .e-con-inner. S'il est imbriqué plus profond, règle
       son rembourrage à 0 dans le panneau, sur le point de
       rupture Mobile. */
  .echeances .e-con:has(> .echeances-titre),
  .echeances .e-con:has(> .e-con-inner > .echeances-titre),
  .echeances .e-con-inner:has(> .echeances-titre) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
  }

  .echeances-titre {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  /* La SEULE valeur qui pilote l'écart sous le titre */
  .echeances-titre,
  .echeances-titre .elementor-heading-title {
    font-size: 30px !important;
    line-height: 1.18 !important;
    letter-spacing: -.5px !important;
    margin-bottom: 20px !important;
    padding: 0 !important;

    /* La §20.6 pose hyphens: auto sur tous les titres, ce
       qui coupait « réforme » en fin de ligne. */
    hyphens: none !important;
    -webkit-hyphens: none !important;
    overflow-wrap: normal !important;
  }


  /* --- L'écart entre les cartes ---
     18px : leur bleu clair est très proche du bleu de fond,
     donc le contraste ne suffit pas à les séparer. Il faut
     de l'air pour compenser.

     Ne descends pas sous 14px : les cartes se souderaient
     visuellement en un seul bloc. */
  .echeances-liste,
  .echeances-liste > .e-con-inner {
    gap: 18px !important;
  }


  /* --- Une carte ---
     Padding VERTICAL uniquement. Le padding latéral vient
     du panneau : c'est lui qui décolle le texte du bord. */
  .echeance,
  .echeance > .e-con-inner {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  /* --- La date --- */
  .echeance :is(h1, h2, h3, h4, h5, h6),
  .echeance .elementor-heading-title {
    font-size: 18px !important;
    line-height: 1.3 !important;
    letter-spacing: -.2px !important;
    margin-bottom: 6px !important;
  }

  /* --- La description ---
     6px sous la date, volontairement serré : la date et son
     explication forment un couple, elles doivent se lire
     d'un seul tenant. C'est l'écart entre cartes qui
     sépare, pas celui entre titre et texte. */
  .echeance-texte,
  .echeance-texte p {
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }
}

/* ----------------------------------------------------------
   20.12.2 — TRÈS PETIT ÉCRAN  (≤ 380 px)
   ---------------------------------------------------------- */

@media (max-width: 380px) {

  .echeances {
    padding-top: 28px !important;
    padding-bottom: 32px !important;
  }

  .echeances-titre,
  .echeances-titre .elementor-heading-title {
    font-size: 26px !important;
    letter-spacing: -.4px !important;
    margin-bottom: 18px !important;
  }

  .echeances-liste,
  .echeances-liste > .e-con-inner {
    gap: 14px !important;
  }

  .echeance,
  .echeance > .e-con-inner {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .echeance :is(h1, h2, h3, h4, h5, h6),
  .echeance .elementor-heading-title { font-size: 17px !important; }

  .echeance-texte,
  .echeance-texte p { font-size: 14.5px !important; }
}


/* ==========================================================
   RÉGLAGES RAPIDES — BLOC ÉCHÉANCES MOBILE

   >> LES QUATRE SEULS LEVIERS

   Marge de la section     -> padding 32px / 36px (20.12.1)
   Écart sous le titre     -> margin-bottom 22px  (20.12.1)
   Écart entre les cartes  -> gap 18px            (20.12.1)
   Respiration d'une carte -> padding 18px        (20.12.1)

   Rien d'autre n'est touché. Si une carte se décale ou
   change d'apparence, ça ne peut pas venir d'ici :
   cherche dans le panneau Elementor.

   >> LE TITRE

   30px, et 26px sous 380px.
   Sur fond bleu plein, un titre de section a besoin de
   plus de présence : rien autour ne le soutient, ni
   filet, ni sur-titre, ni encadré. À 26px il ne pesait
   pas assez face au bloc de couleur.

   hyphens: none : la §20.6 pose hyphens: auto sur tous
   les titres, ce qui coupait « réforme » en fin de
   ligne.

   >> L'ÉCART SOUS LE TITRE

   Il venait de DEUX sources qui s'additionnaient : le
   margin du widget Titre et le gap du conteneur de
   section. Le gap est maintenant à zéro, donc une
   seule valeur pilote : margin-bottom 22px.

   C'est le réflexe à garder sur ce genre d'écart
   inexplicable — chercher deux espacements empilés
   plutôt que d'augmenter l'un des deux au hasard.

   >> L'ÉCART ENTRE LES CARTES

   18px, et jamais sous 14px. Leur bleu clair est très
   proche du bleu de fond : le contraste ne suffit pas
   à les séparer, il faut de l'air pour compenser.

   Au-delà de 24px en revanche, elles cessent de se
   lire comme une frise chronologique et redeviennent
   trois blocs sans rapport.

   >> LE RYTHME INTERNE

   6px entre la date et sa description. L'écart serré
   les fait lire comme un couple ; c'est l'écart entre
   cartes qui sépare, pas celui entre titre et texte.

   >> SI L'ÉCART ENTRE CARTES RESTE PETIT OU GRAND

   C'est l'écart du panneau sur .echeances-liste, qui
   s'ajoute au gap du CSS.

   Bascule l'éditeur sur MOBILE, puis
   Style > Mise en page > Écarts > Ligne = 18
   Elementor mémorise une valeur par appareil : le
   bureau ne bougera pas.

   >> POURQUOI SI PEU DE RÈGLES

   Ta section 11 est vide : tout le bloc vient du
   panneau. Chaque padding remis à zéro ici casserait
   quelque chose dont je ne vois pas la valeur
   d'origine — c'est ce qui avait fait éclater la carte
   en trois blocs isolés dans une version précédente.
   ========================================================== */
   /* ==========================================================
   20.13 — BLOC AVANTAGES SUR MOBILE
   ==========================================================

   ⚠ À COLLER À LA SUITE DU BLOC 20.12.

   Trois retouches seulement : l'alignement de
   l'illustration, les marges latérales, et l'écart entre
   les cartes. Le reste de la §13 tient déjà la route.
   ========================================================== */

@media (max-width: 767px) {

  /* --- Les marges latérales ---
     22px au lieu des 16 de la §20.7 : sur une colonne
     unique, les cartes ont besoin de plus d'air qu'en
     grille, où les voisines créent déjà du rythme. */
  .avantages {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .avantages-liste { gap: 34px !important; }

  .avantage {
    width: 100% !important;
    min-width: 0 !important;
  }


  /* --- L'illustration, alignée sur le texte ---
     Sur bureau elle est centrée dans sa carte, parce que
     trois cartes côte à côte forment une rangée régulière.
     Empilées sur une colonne, c'est le bord GAUCHE qui fait
     la colonne : une illustration centrée casse cet axe et
     donne l'impression qu'elle flotte.

     max-width: none et max-height: 100 % : c'est la hauteur
     qui dimensionne l'image, pas un pourcentage de largeur.
     Sinon une illustration très large resterait minuscule
     alors qu'une carrée déborderait. */
  .avantage-illu {
    justify-content: flex-start !important;
    height: 88px !important;
    margin: 0 0 18px !important;
  }

  .avantage-illu img {
    max-width: none !important;
    max-height: 100% !important;
    width: auto !important;
    margin: 0 !important;
  }
}


@media (max-width: 380px) {

  .avantages {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .avantages-liste { gap: 30px !important; }

  .avantage-illu {
    height: 78px !important;
    margin-bottom: 16px !important;
  }
}


/* ==========================================================
   RÉGLAGES RAPIDES — BLOC AVANTAGES MOBILE

   Marges latérales        -> 22px | 18px sous 380px
   Écart entre les cartes  -> gap 34px
   Hauteur de l'illu       -> 88px | 78px sous 380px

   >> L'ALIGNEMENT

   justify-content: flex-start sur .avantage-illu.
   Sur bureau, centrer est juste : trois cartes côte à
   côte forment une rangée régulière. Empilées sur une
   colonne, c'est le bord GAUCHE qui fait la colonne —
   une illustration centrée casse cet axe.

   >> LA TAILLE DE L'ILLUSTRATION

   C'est la HAUTEUR qui dimensionne, pas un pourcentage
   de largeur. La §20.5 posait max-width: 60 %, ce qui
   rend une illustration large minuscule et une carrée
   trop grosse : le rendu dépendait du format de chaque
   fichier. Avec max-height, les trois font la même
   hauteur quelle que soit leur proportion.

   ⚠ Si une illustration très large dépasse encore,
     remets un max-width: 100 % — mais pas moins, sinon
     l'incohérence revient.
   ========================================================== */
 /* ==========================================================
   20.14 — CTA BLEU SUR MOBILE               — version 3
   ==========================================================

   ⚠ À COLLER À LA SUITE DU BLOC 20.13.
     Remplace la version précédente.

   ----------------------------------------------------------
   LES DEUX VALEURS COUPLÉES
   ----------------------------------------------------------
   --pente-h  : la hauteur du triangle blanc
   padding-top: la place laissée au-dessus du titre

   Le padding doit valoir la pente PLUS l'air voulu. Si le
   padding descend sous la pente, le titre passe sous le
   triangle — c'est ce qui arrivait.

   Ici : 22 + 46 = 68px.

   ⚠ Ce bloc passe après la §14.6, qui pose ses propres
     valeurs. Les deux sont donc redéclarées ici pour que
     ce fichier soit la seule source sur mobile.
   ========================================================== */


@media (max-width: 767px) {

  /* --- La section ---
     22px de pente au lieu de 30 : sur 390px de large, une
     pente trop haute mange un quart de la hauteur visible
     du bloc et devient un élément à part entière au lieu
     d'une transition.

     28px de marge latérale. Le bloc est un aplat de couleur
     pleine largeur : le texte a besoin de plus d'air qu'sur
     fond blanc, où le vide de la page prolonge la marge. */
  .cta-bleu {
    --pente-h: 22px;

    position: relative !important;
    clip-path: none !important;
    overflow: hidden !important;
    padding: 68px 28px 52px !important;
    box-sizing: border-box;
  }

  .cta-bleu-inner {
    position: relative;
    z-index: 1;
    padding: 0 !important;
    max-width: none !important;
    gap: 0 !important;
  }


  /* --- Le titre ---
     24px au lieu de 27 : sur trois lignes en gras blanc sur
     bleu, la masse compte autant que la taille. Réduire d'un
     cran et aérer l'interligne donne plus de présence qu'un
     corps plus gros et serré. */
  .cta-bleu-titre,
  .cta-bleu-titre .elementor-heading-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -.3px !important;
    max-width: none !important;
    margin: 0 0 16px !important;
    padding: 0 !important;

    /* La §20.6 pose hyphens: auto sur tous les titres :
       c'est lui qui coupait « électro-nique » en plein mot. */
    hyphens: none !important;
    -webkit-hyphens: none !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }


  /* --- Le paragraphe --- */
  .cta-bleu-texte,
  .cta-bleu-texte p {
    font-size: 15.5px !important;
    line-height: 1.65 !important;
    max-width: none !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
  }


  /* --- Le lien ---
     Le soulignement animé de la §14.5 est supprimé : au
     doigt il n'y a pas de sortie de survol, donc il
     resterait déployé après le premier appui sans jamais
     revenir. La flèche suffit à signaler l'action. */
  .cta-bleu-lien :is(a, button, .elementor-button) {
    min-height: 44px !important;
    padding: 8px 0 !important;
    font-size: 16px !important;
    gap: 9px !important;
  }

  .cta-bleu-lien :is(a, button, .elementor-button)::before {
    display: none !important;
  }

  .cta-bleu-lien :is(a, button, .elementor-button)::after {
    width: 16px !important;
    height: 16px !important;
  }
}


@media (max-width: 380px) {

  .cta-bleu {
    --pente-h: 18px;
    padding: 60px 22px 46px !important;
  }

  .cta-bleu-titre,
  .cta-bleu-titre .elementor-heading-title {
    font-size: 22px !important;
    letter-spacing: -.2px !important;
    margin-bottom: 14px !important;
  }

  .cta-bleu-texte,
  .cta-bleu-texte p {
    font-size: 15px !important;
    margin-bottom: 20px !important;
  }

  .cta-bleu-lien :is(a, button, .elementor-button) {
    font-size: 15.5px !important;
  }
}


/* ==========================================================
   RÉGLAGES RAPIDES — CTA BLEU MOBILE

   >> LES DEUX VALEURS COUPLÉES

   --pente-h    -> 22px | 18px sous 380px
   padding-top  -> 68px | 60px sous 380px

   Le padding vaut la pente PLUS l'air voulu, soit
   22 + 46. S'il descend sous la pente, le titre passe
   sous le triangle. Change toujours les deux ensemble.

   >> POURQUOI UNE PENTE PLUS BASSE QUE SUR BUREAU

   Sur 390px de large, une pente de 30px mange un quart
   de la hauteur visible du bloc : elle cesse d'être une
   transition pour devenir un élément à part entière.
   22px suffisent à donner le mouvement.

   >> clip-path: none

   Indispensable. La §14 pose encore sa découpe : sans
   cette ligne, tu aurais l'ancienne pente ET le
   triangle blanc superposés.

   >> LES MARGES

   28px, plus que les 22px des autres sections. Le bloc
   est un aplat pleine largeur : le bleu s'arrête net au
   bord de l'écran, alors que sur fond blanc le vide de
   la page prolonge visuellement la marge.

   >> LE TITRE

   24px avec un interligne à 1.25. Sur trois lignes en
   gras blanc sur bleu, c'est la MASSE qui pèse, pas la
   taille : descendre d'un cran et ouvrir l'interligne
   donne plus de présence qu'un corps plus gros.
   ========================================================== */
   
   /* ==========================================================
   20.15 — CARROUSEL TÉMOIGNAGES SUR MOBILE
   ==========================================================

   ⚠ À COLLER À LA SUITE DU BLOC 20.14.
   Ce bloc remplace entièrement la §15.12 : tu peux
   supprimer cette dernière, ou la laisser — celui-ci passe
   après et l'emporte.

   ----------------------------------------------------------
   LE DIAGNOSTIC
   ----------------------------------------------------------
   Sur bureau, la photo est en position ABSOLUE à gauche :
   son ordre dans le balisage n'a donc aucune importance.

   En repassant dans le flux sur mobile, elle atterrit là où
   elle est réellement écrite — c'est-à-dire APRÈS le texte.
   D'où la photo en bas, et des arrondis calculés pour une
   image en haut qui se retrouvent au mauvais endroit.

   On rend donc la carte flex et on remonte la photo avec
   order: -1. C'est le seul moyen propre : le balisage du
   widget n'est pas modifiable.

   ----------------------------------------------------------
   POURQUOI LA PHOTO EN PREMIER
   ----------------------------------------------------------
   Un visage se lit en un dixième de seconde et donne
   immédiatement le contexte : c'est un vrai client qui
   parle. Placé après quatre lignes de citation, il n'est
   plus qu'une illustration — le lecteur a déjà décidé s'il
   lisait ou pas.
   ========================================================== */


/* ----------------------------------------------------------
   20.15.1 — LA SECTION
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  .temoignages {
    padding: 40px 20px 36px !important;
  }

  .temoignages-titre,
  .temoignages-titre .elementor-heading-title {
    font-size: 24px !important;
    line-height: 1.25 !important;
    letter-spacing: -.3px !important;
    margin: 0 0 10px !important;

    /* La §20.6 pose hyphens: auto sur tous les titres */
    hyphens: none !important;
    -webkit-hyphens: none !important;
    overflow-wrap: normal !important;
  }

  .temoignages-soustitre,
  .temoignages-soustitre p {
    font-size: 15.5px !important;
    line-height: 1.55 !important;
    max-width: none !important;
    margin: 0 0 24px !important;
  }
}


/* ----------------------------------------------------------
   20.15.2 — LA CARTE, EN COLONNE

   order: -1 remonte la photo avant le texte sans toucher au
   balisage, qu'on ne peut pas modifier dans le widget.

   Le clip-path sur la carte ET sur l'image : c'est celui de
   l'IMAGE qui fait réellement le travail. Il découpe son
   propre rendu, sans dépendre de l'overflow du parent que
   le swiper recrée à chaque transition.
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  .temoignages-carousel .elementor-testimonial {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;

    border-radius: 16px !important;
    clip-path: inset(0 round 16px) !important;
    overflow: hidden !important;
  }

  /* --- La photo, remontée en tête --- */
  .temoignages-carousel .elementor-testimonial__image {
    order: -1 !important;

    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
  }

  /* Arrondis en HAUT, puisque la photo est désormais en
     tête de carte. */
  .temoignages-carousel .elementor-testimonial__image,
  .temoignages-carousel .elementor-testimonial__image *,
  .temoignages-carousel .elementor-testimonial__image img {
    border-radius: 16px 16px 0 0 !important;
    clip-path: inset(0 round 16px 16px 0 0) !important;
  }

  /* aspect-ratio plutôt qu'une hauteur fixe : le cadre
     reste proportionné quelle que soit la largeur du
     téléphone. object-position center 30 % cale le cadrage
     sur les visages, qui sont rarement au centre
     géométrique d'une photo. */
  .temoignages-carousel .elementor-testimonial__image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover !important;
    object-position: center 30% !important;
    display: block;
  }
}


/* ----------------------------------------------------------
   20.15.3 — LE CONTENU
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  .temoignages-carousel .elementor-testimonial__content {
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    min-height: 0 !important;
    padding: 22px 20px 24px !important;
    margin: 0 !important;
  }

  /* --- La citation --- */
  .temoignages-carousel .elementor-testimonial__text {
    font-size: 16.5px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    max-width: none !important;
    padding-top: 32px !important;
    margin: 0 0 18px !important;
  }

  /* Le guillemet réduit : à 28px il pesait autant que la
     citation elle-même sur une colonne étroite. */
  .temoignages-carousel .elementor-testimonial__text::before {
    width: 22px !important;
    height: 19px !important;
  }

  /* --- Nom et fonction ---
     Ils passent sur deux lignes : sur une colonne étroite,
     « Directrice des pompes funèbres Orphee (78) » à la
     suite du nom produisait un retour à la ligne au
     hasard, en plein milieu de la fonction. */
  .temoignages-carousel .elementor-testimonial__cite {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1px !important;
  }

  .temoignages-carousel .elementor-testimonial__name {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  /* La virgule après le nom n'a plus lieu d'être une fois
     les deux éléments sur des lignes séparées. */
  .temoignages-carousel .elementor-testimonial__name::after {
    content: "" !important;
  }

  .temoignages-carousel .elementor-testimonial__title {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
}


/* ----------------------------------------------------------
   20.15.4 — LES FLÈCHES

   Le clip-path du swiper rogne à gauche, à droite et en
   haut, mais laisse déborder en bas : c'est ce qui permet
   aux flèches de sortir de la zone du carrousel sans être
   coupées.

   ⚠ La valeur négative doit rester SUPÉRIEURE au
     padding-bottom du swiper, sinon les flèches se font
     rogner par le bas.
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  .temoignages-carousel .elementor-main-swiper,
  .temoignages-carousel .swiper,
  .temoignages-carousel .swiper-container {
    padding-bottom: 66px !important;
  }

  .temoignages-carousel,
  .temoignages-carousel > .elementor-widget-container,
  .temoignages-carousel .elementor-main-swiper,
  .temoignages-carousel .swiper,
  .temoignages-carousel .swiper-container {
    clip-path: inset(0 0 -90px 0);
  }

  .temoignages-carousel .elementor-swiper-button {
    width: 44px !important;      /* zone tactile */
    height: 44px !important;
  }

  .temoignages-carousel .elementor-swiper-button svg,
  .temoignages-carousel .elementor-swiper-button i {
    width: 16px !important;
    height: 16px !important;
  }

  /* 30px de part et d'autre du centre : les deux flèches
     restent à portée du pouce sans se toucher. */
  .temoignages-carousel .elementor-swiper-button-prev {
    left: calc(50% - 52px) !important;
    right: auto !important;
  }

  .temoignages-carousel .elementor-swiper-button-next {
    right: calc(50% - 52px) !important;
    left: auto !important;
  }
}


/* ----------------------------------------------------------
   20.15.5 — TRÈS PETIT ÉCRAN  (≤ 380 px)
   ---------------------------------------------------------- */

@media (max-width: 380px) {

  .temoignages { padding: 34px 16px 32px !important; }

  .temoignages-titre,
  .temoignages-titre .elementor-heading-title {
    font-size: 21px !important;
  }

  .temoignages-soustitre,
  .temoignages-soustitre p {
    font-size: 15px !important;
    margin-bottom: 20px !important;
  }

  .temoignages-carousel .elementor-testimonial__image img {
    aspect-ratio: 3 / 2;
  }

  .temoignages-carousel .elementor-testimonial__content {
    padding: 20px 16px 22px !important;
  }

  .temoignages-carousel .elementor-testimonial__text {
    font-size: 15.5px !important;
    padding-top: 28px !important;
    margin-bottom: 16px !important;
  }

  .temoignages-carousel .elementor-testimonial__text::before {
    width: 20px !important;
    height: 17px !important;
  }

  .temoignages-carousel .elementor-testimonial__name { font-size: 14.5px !important; }
  .temoignages-carousel .elementor-testimonial__title { font-size: 13.5px !important; }
}


/* ==========================================================
   RÉGLAGES RAPIDES — TÉMOIGNAGES MOBILE

   >> L'ORDRE DE LA CARTE

   order: -1 sur la photo                  (20.15.2)
   Sur bureau elle est en position absolue : son ordre
   dans le balisage n'a aucune importance. Dans le flux,
   elle atterrit là où elle est écrite — après le texte.
   Le balisage du widget n'étant pas modifiable, order
   est la seule voie.

   Un visage se lit en un dixième de seconde et donne
   le contexte. Placé après la citation, il n'est plus
   qu'une illustration.

   >> LES ARRONDIS

   Ils apparaissent à QUATRE endroits, comme sur
   bureau : border-radius et clip-path, sur la carte et
   sur l'image. Change les quatre ensemble.

   C'est le clip-path SUR L'IMAGE qui fait le travail :
   il découpe son propre rendu, sans dépendre de
   l'overflow du parent que le swiper recrée à chaque
   transition.

   Ici ils sont en HAUT (16px 16px 0 0), puisque la
   photo est passée en tête de carte.

   >> LE CADRAGE DE LA PHOTO

   aspect-ratio 4/3, et 3/2 sous 380px.
   object-position: center 30 % cale le cadrage sur les
   visages, rarement situés au centre géométrique.
   Descends à 20 % si un portrait est coupé au front.

   >> LES FLÈCHES

   padding-bottom du swiper  -> 66px
   clip-path                 -> inset(0 0 -90px 0)

   ⚠ La valeur négative doit rester SUPÉRIEURE au
     padding-bottom, sinon les flèches se font rogner.

   >> NOM ET FONCTION

   Empilés sur deux lignes. Sur une colonne étroite, la
   fonction à la suite du nom produisait un retour à la
   ligne au hasard, en plein milieu. La virgule après le
   nom est retirée : elle n'a plus de sens une fois les
   deux éléments séparés.
   ========================================================== */
   
   /* ==========================================================
 
/* ==========================================================
   20.16 — FAQ SUR MOBILE
   ==========================================================

   ⚠ À COLLER À LA SUITE DU BLOC 20.15.

   ----------------------------------------------------------
   POURQUOI DES TAILLES ICI
   ----------------------------------------------------------
   La §17 ne fixe volontairement AUCUNE taille de texte : sa
   note dit que tout se règle dans le panneau. Le problème,
   c'est que les valeurs de bureau n'ont jamais redescendu
   sur mobile.

   Je pose donc les tailles ici. Si tu préfères garder la
   logique d'origine, règle-les dans le panneau sur le point
   de rupture Mobile et supprime les font-size de ce bloc.

   ⚠ Ne fais pas les deux : tu ne saurais plus laquelle des
     deux sources agit.

   ----------------------------------------------------------
   LA PLACE DE LA FAQ DANS L'ÉCHELLE
   ----------------------------------------------------------
   Titre de section   -> 24-26px
   Titre de carte     -> 17px
   Question de FAQ    -> 15,5px
   Texte courant      -> 15px

   Une question n'est pas un titre de carte : c'est une
   LIGNE DE LISTE. À 17px elle pesait autant qu'une carte
   Ressources, alors qu'une carte est une unité qu'on peut
   sortir de son contexte et qu'une question ne vit que dans
   sa liste.

   Question et réponse ont donc la même taille : c'est la
   GRAISSE qui les distingue, 600 contre 400. C'est
   largement suffisant, et ça donne à la FAQ le calme d'une
   liste plutôt que l'allure d'une succession de sections.
   ========================================================== */


@media (max-width: 767px) {

  /* --- La section ---
     24px de marge : une FAQ est faite de longs paragraphes,
     et c'est le format où le texte collé au bord fatigue le
     plus vite à la lecture. */
  .faq {
    padding: 40px 24px 44px !important;
  }

  .faq-titre {
    margin: 0 auto 18px !important;
  }

  .faq-titre .elementor-heading-title {
    font-size: 26px !important;
    line-height: 1.2 !important;
    letter-spacing: -.4px !important;
  }


  /* --- La question ---
     Même taille que la réponse, seule la graisse change.
     L'interligne à 1.45 compte autant que la taille : les
     questions font souvent trois lignes.

     L'écart de 16px avec le chevron l'éloigne du texte sans
     le repousser tout au bord, où il paraîtrait décroché. */
  .faq-liste .elementor-tab-title,
  .faq-liste .e-n-accordion-item-title {
    padding: 20px 0 !important;
    gap: 16px !important;

    font-size: 15.5px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    letter-spacing: -.1px !important;

    /* La §20.6 pose hyphens: auto sur les titres. Sur une
       question, une césure en plein mot casse la lecture. */
    hyphens: none !important;
    -webkit-hyphens: none !important;
    overflow-wrap: normal !important;
  }

  .faq-liste .elementor-tab-title::after,
  .faq-liste .e-n-accordion-item-title::after {
    width: 17px !important;
    height: 17px !important;
  }


  /* --- La réponse ---
     15,5px avec un interligne à 1.7. C'est l'INTERLIGNE qui
     rend un long paragraphe lisible sur téléphone, plus que
     la taille : à 1.5 l'œil perd sa ligne en revenant à la
     gauche. */
  .faq-liste .elementor-tab-content,
  .faq-liste .e-n-accordion-item > .e-con,
  .faq-liste .e-n-accordion-item-content {
    padding: 0 0 24px !important;
  }

  .faq-liste .elementor-tab-content,
  .faq-liste .elementor-tab-content p,
  .faq-liste .e-n-accordion-item p {
    font-size: 15.5px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    max-width: none !important;
    margin: 0 0 14px !important;
  }

  .faq-liste .elementor-tab-content p:last-child,
  .faq-liste .e-n-accordion-item p:last-child {
    margin-bottom: 0 !important;
  }

  /* Les liens gardent leur soulignement, mais décollé de 4px
     pour ne pas barrer les jambages des lettres. */
  .faq-liste .elementor-tab-content a,
  .faq-liste .e-n-accordion-item-content a,
  .faq-liste .e-n-accordion-item > .e-con a {
    text-underline-offset: 4px !important;
  }
}


@media (max-width: 380px) {

  .faq { padding: 34px 20px 38px !important; }

  .faq-titre { margin-bottom: 16px !important; }

  .faq-titre .elementor-heading-title {
    font-size: 23px !important;
  }

  .faq-liste .elementor-tab-title,
  .faq-liste .e-n-accordion-item-title {
    padding: 18px 0 !important;
    gap: 12px !important;
    font-size: 15px !important;
  }

  .faq-liste .elementor-tab-title::after,
  .faq-liste .e-n-accordion-item-title::after {
    width: 16px !important;
    height: 16px !important;
  }

  .faq-liste .elementor-tab-content,
  .faq-liste .elementor-tab-content p,
  .faq-liste .e-n-accordion-item p {
    font-size: 15px !important;
  }

  .faq-liste .elementor-tab-content,
  .faq-liste .e-n-accordion-item > .e-con,
  .faq-liste .e-n-accordion-item-content {
    padding-bottom: 22px !important;
  }
}


/* ==========================================================
   RÉGLAGES RAPIDES — FAQ MOBILE

   Marges latérales        -> 24px | 20px sous 380px
   Titre FAQ               -> 26px
   Question                -> 15,5px / 600 / 1.45
   Réponse                 -> 15,5px / 400 / 1.7
   Hauteur d'une question  -> padding 20px
   Espace sous la réponse  -> padding-bottom 24px

   >> QUESTION ET RÉPONSE, MÊME TAILLE

   Seule la graisse les distingue : 600 contre 400.
   C'est largement suffisant, et ça donne à la FAQ le
   calme d'une liste plutôt que l'allure d'une
   succession de sections.

   Une question n'est pas un titre de carte : elle ne
   vit que dans sa liste, alors qu'une carte est une
   unité qu'on peut sortir de son contexte.

   >> L'INTERLIGNE DE LA RÉPONSE

   1.7, et c'est le réglage le plus important du bloc.
   Sur un long paragraphe en colonne étroite, c'est
   l'interligne qui porte la lisibilité, pas la taille :
   à 1.5, l'œil perd sa ligne en revenant à la gauche.

   Si tu veux gagner de la place, réduis la taille avant
   de toucher à l'interligne.

   >> LES MARGES

   24px, plus que les 22px des autres sections. Une FAQ
   est faite de longs paragraphes : c'est le format où
   le texte collé au bord fatigue le plus vite.

   >> LA CÉSURE

   hyphens: none sur les questions. La §20.6 pose
   hyphens: auto sur tous les titres de la page — sur
   une question, une coupure en plein mot casse la
   lecture.

   >> SI TU PRÉFÈRES PASSER PAR LE PANNEAU

   La §17 est conçue pour que la typo se règle dans
   Elementor. Bascule sur Mobile, règle les trois
   typographies (Titre FAQ, Questions, Réponses), et
   supprime les font-size de ce bloc.

   Ne garde jamais les deux sources actives.
   ========================================================== */
   
   /* ==========================================================
   20.17 — CTA FINAL SUR MOBILE
   ==========================================================

   ⚠ À COLLER À LA SUITE DU BLOC 20.16.

   ----------------------------------------------------------
   POURQUOI LE clamp() NE SUFFIT PAS
   ----------------------------------------------------------
   Le titre est en clamp(20px, 2.15vw, 30px). À 390px de
   large, 2.15vw vaut 8px : c'est donc le PLANCHER de 20px
   qui s'applique.

   Le clamp fait son travail. Le problème est ailleurs : à
   20px en graisse 700 sur trois lignes, la MASSE pèse trop
   pour un encart secondaire de fin de page.

   On sort donc du clamp sur mobile et on fixe une valeur.
   ========================================================== */


@media (max-width: 767px) {

  /* --- La section --- */
  .cta-final {
    padding: 8px 22px 44px !important;
  }

  /* --- L'encart ---
     22px de padding : l'encart a déjà un fond et un liseré
     qui le détachent, il n'a pas besoin d'en plus. */
  .cta-final-box {
    padding: 24px 22px !important;
    gap: 22px !important;
    border-radius: 12px !important;
  }


  /* --- Le titre ---
     Valeur fixe, hors clamp : à 390px, le clamp retombait
     déjà sur son plancher, il ne servait plus à rien.

     Graisse 700 conservée mais interligne ouvert à 1.28 :
     sur trois lignes, c'est l'interligne qui allège, pas la
     taille. */
  .cta-final-titre,
  .cta-final-titre .elementor-heading-title {
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
    letter-spacing: -.3px !important;
    margin: 0 0 10px !important;

    /* La §20.6 pose hyphens: auto sur tous les titres */
    hyphens: none !important;
    -webkit-hyphens: none !important;
    overflow-wrap: normal !important;
  }


  /* --- Le paragraphe --- */
  .cta-final-desc,
  .cta-final-desc p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    max-width: none !important;
    margin: 0 0 20px !important;
  }


  /* --- Le bouton ---
     Pleine largeur : c'est le dernier appel à l'action de
     la page, il a le droit de peser. */
  .cta-final-btn { width: 100% !important; }

  .cta-final-btn :is(a, button, .elementor-button) {
    width: 100%;
    justify-content: center;
    min-height: 50px !important;
    padding: 14px 22px !important;
    font-size: 15.5px !important;
  }

  /* La flèche reste déployée au doigt : sans sortie de
     survol, elle resterait à moitié ouverte après le
     premier appui. */
  .cta-final-btn :is(a, button, .elementor-button)::after {
    display: none !important;
  }

  .cta-final-btn :is(a, button, .elementor-button):hover {
    gap: 0 !important;
  }

  /* Le balayage foncé reste : c'est le retour visuel de
     l'appui. */
  .cta-final-btn :is(a, button, .elementor-button):hover::before {
    transform: scaleX(1);
  }


  /* --- Le logo --- */
  .cta-final-logo {
    align-self: center !important;
    width: 100%;
  }

  .cta-final-logo img {
    max-width: 200px !important;
    max-height: 110px !important;
    margin: 0 auto;
  }
}


@media (max-width: 380px) {

  .cta-final { padding: 8px 18px 40px !important; }

  .cta-final-box {
    padding: 22px 18px !important;
    gap: 20px !important;
  }

  .cta-final-titre,
  .cta-final-titre .elementor-heading-title {
    font-size: 19.5px !important;
    letter-spacing: -.2px !important;
  }

  .cta-final-desc,
  .cta-final-desc p {
    font-size: 14.5px !important;
    margin-bottom: 18px !important;
  }

  .cta-final-btn :is(a, button, .elementor-button) {
    min-height: 48px !important;
    font-size: 15px !important;
  }

  .cta-final-logo img {
    max-width: 170px !important;
    max-height: 95px !important;
  }
}


/* ==========================================================
   RÉGLAGES RAPIDES — CTA FINAL MOBILE

   Marges de la section    -> 22px | 18px sous 380px
   Padding de l'encart     -> 24px 22px
   Titre                   -> 21px / 700 / interligne 1.28
   Paragraphe              -> 15px / 1.6
   Bouton                  -> pleine largeur, 50px

   >> LE clamp() NE S'APPLIQUE PLUS

   Le titre était en clamp(20px, 2.15vw, 30px). À 390px,
   2.15vw vaut 8px : c'était donc le plancher de 20px qui
   s'appliquait déjà.

   Le clamp faisait son travail. Le problème venait de la
   MASSE : 20px en graisse 700 sur trois lignes, c'est
   trop pour un encart secondaire de fin de page.

   La valeur fixe de 21px avec un interligne à 1.28 pèse
   moins que 20px serré. Sur un titre multiligne, c'est
   l'interligne qui allège, pas la taille.

   >> LE BOUTON EN PLEINE LARGEUR

   Contrairement au bouton des onglets, celui-ci a le
   droit de peser : c'est le dernier appel à l'action
   de la page.

   >> LA FLÈCHE

   Masquée au doigt. Sans sortie de survol, elle
   resterait à moitié déployée après le premier appui.
   Le balayage foncé, lui, reste : c'est le retour
   visuel de l'appui.

   >> LE LOGO

   200px de large, 170px sous 380px. Si tu ne le vois
   pas du tout, vérifie la §20.3 : elle masque certaines
   décorations sur mobile.
   ========================================================== *//* ==========================================================
 /* ==========================================================
   20.18 — GRILLE RESSOURCES SUR MOBILE
   ==========================================================

   ⚠ À COLLER À LA SUITE DU BLOC 20.17.

   ----------------------------------------------------------
   LA CORRECTION PRINCIPALE
   ----------------------------------------------------------
   Le survol de la flèche est neutralisé.

   Au doigt il n'y a pas de sortie de survol : le cercle
   restait rempli et la flèche blanche après le premier
   appui. L'utilisateur croit alors que la carte est
   sélectionnée.

   On garde le cercle dans son état de repos et on ne
   déclenche l'animation qu'à l'APPUI, où elle a un sens :
   c'est un retour de contact, qui disparaît dès que le
   doigt se lève.
   ========================================================== */


@media (max-width: 767px) {

  /* --- La section --- */
  .ressources {
    padding: 44px 22px !important;
  }

  .ressources-titre,
  .ressources-titre .elementor-heading-title {
    font-size: 24px !important;
    line-height: 1.25 !important;
    letter-spacing: -.4px !important;
    margin-bottom: 10px !important;

    /* La §20.6 pose hyphens: auto sur tous les titres */
    hyphens: none !important;
    -webkit-hyphens: none !important;
    overflow-wrap: normal !important;
  }

  .ressources-soustitre,
  .ressources-soustitre p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    max-width: none !important;
    margin-bottom: 26px !important;
  }


  /* --- Les cartes ---
     16px d'écart : les cartes ont déjà un fond blanc et un
     liseré, elles n'ont pas besoin de plus pour se séparer. */
  .ressources-grille { gap: 16px !important; }

  .ressource {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    padding: 20px !important;
  }


  /* --- Le titre de carte ---
     Taille conservée, mais interligne ouvert à 1.35 : sur
     trois lignes, c'est l'interligne qui allège, pas le
     corps. Le rapport avec la description à 14px laisse
     3 points d'écart, assez pour creuser la hiérarchie.

     Si tu le veux plus présent, monte à 18px : jusque-là
     l'écart reste lisible. */
  .ressource-titre,
  .ressource-titre .elementor-heading-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -.2px !important;
    padding-right: 44px !important;
    margin-bottom: 6px !important;

    hyphens: none !important;
    -webkit-hyphens: none !important;
    overflow-wrap: normal !important;
  }

  .ressource-texte,
  .ressource-texte p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-bottom: 20px !important;
  }


  /* --- Le cercle et la flèche ---
     ⚠ La flèche se positionne PAR RAPPORT au cercle :
       top et right de la flèche = ceux du cercle
       + (taille du cercle - taille de la flèche) / 2
       Soit 16 + (32 - 15) / 2 = 24. */
  .ressource::before {
    top: 16px !important;
    right: 16px !important;
    width: 32px !important;
    height: 32px !important;
  }

  .ressource::after {
    top: 24px !important;
    right: 24px !important;
    width: 15px !important;
    height: 15px !important;
  }


  /* --- Le survol neutralisé ---
     Au doigt, un état de survol reste bloqué après le
     premier appui. On remet le cercle au repos. */
  .ressource:hover { border-color: #C6E0F7 !important; }

  .ressource:hover::before {
    box-shadow: inset 0 0 0 0 #1565E4 !important;
    border-color: rgba(21, 101, 228, .28) !important;
    transform: none !important;
  }

  .ressource:hover::after {
    background: #1565E4 !important;
    transform: none !important;
  }

  /* --- L'appui, lui, a du sens ---
     C'est un retour de contact, pas un état : il disparaît
     dès que le doigt se lève. */
  .ressource:active { border-color: #1565E4 !important; }

  .ressource:active::before {
    box-shadow: inset 0 0 0 18px #1565E4 !important;
    border-color: #1565E4 !important;
  }

  .ressource:active::after {
    background: #FFFFFF !important;
  }


  /* --- L'illustration ---
     4/3 au lieu du 16/9 de la §20.5 : sur une carte pleine
     largeur, une image trop plate donne un bandeau, pas une
     illustration. */
  .ressource-illu img {
    aspect-ratio: 4 / 3 !important;
    border-radius: 8px !important;
  }
}


@media (max-width: 380px) {

  .ressources { padding: 38px 18px !important; }

  .ressources-titre,
  .ressources-titre .elementor-heading-title {
    font-size: 21px !important;
  }

  .ressources-soustitre,
  .ressources-soustitre p {
    font-size: 14.5px !important;
    margin-bottom: 22px !important;
  }

  .ressources-grille { gap: 14px !important; }

  .ressource { padding: 18px !important; }

  .ressource-titre,
  .ressource-titre .elementor-heading-title {
    font-size: 16.5px !important;
    padding-right: 40px !important;
  }

  .ressource-texte,
  .ressource-texte p {
    font-size: 13.5px !important;
    margin-bottom: 18px !important;
  }

  .ressource::before {
    top: 14px !important;
    right: 14px !important;
    width: 30px !important;
    height: 30px !important;
  }

  .ressource::after {
    top: 21px !important;
    right: 21px !important;
    width: 14px !important;
    height: 14px !important;
  }

  .ressource:active::before {
    box-shadow: inset 0 0 0 17px #1565E4 !important;
  }
}


/* ==========================================================
   RÉGLAGES RAPIDES — GRILLE RESSOURCES MOBILE

   Marges de la section    -> 22px | 18px sous 380px
   Écart entre les cartes  -> gap 16px
   Padding d'une carte     -> 20px
   Titre de carte          -> 17px / 700 / 1.35
   Description             -> 14px / 1.55
   Format des images       -> aspect-ratio 4/3

   >> LE TITRE DE CARTE

   17px, comme sur bureau, mais interligne à 1.35 au
   lieu de 1.32. Sur trois lignes, c'est toujours
   l'interligne qui allège, pas le corps.

   L'écart de 3 points avec la description creuse la
   hiérarchie. Tu peux monter jusqu'à 18px sans
   l'écraser : c'est le RAPPORT entre les deux qui
   compte, pas la valeur absolue.

   >> LE SURVOL, NEUTRALISÉ

   Au doigt, il n'y a pas de sortie de survol : le
   cercle restait rempli et la flèche blanche après le
   premier appui. L'utilisateur croit que la carte est
   sélectionnée.

   L'animation ne se déclenche plus qu'à l'APPUI, où
   elle a un sens : elle disparaît dès que le doigt se
   lève.

   C'est une règle générale sur mobile — je l'ai déjà
   appliquée aux liens du menu et à la rangée produits.
   Ici la flèche l'avait échappé parce que son
   animation est portée par des pseudo-éléments.

   >> LE CALAGE DE LA FLÈCHE

   La flèche se positionne PAR RAPPORT au cercle :
   top et right de la flèche = ceux du cercle
   + (taille du cercle - taille de la flèche) / 2

   Ici : 16 + (32 - 15) / 2 = 24
   Sous 380px : 14 + (30 - 14) / 2 = 21

   Si tu changes la taille du cercle, refais ce calcul,
   sinon la flèche décentre.
   Et le remplissage : inset 0 0 0 (cercle / 2 + 2)
   ========================================================== *//* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'TT Firs Neue Trl';
	font-style: normal;
	font-weight: 100;
	font-display: auto;
	src: url('https://simplifiaforbusiness.com/wp-content/uploads/2026/08/TT-Firs-Neue-Trial-ExtraLight-1.ttf') format('truetype');
}
@font-face {
	font-family: 'TT Firs Neue Trl';
	font-style: italic;
	font-weight: 100;
	font-display: auto;
	src: url('https://simplifiaforbusiness.com/wp-content/uploads/2026/08/TT-Firs-Neue-Trial-ExtraLight-Italic-1.ttf') format('truetype');
}
@font-face {
	font-family: 'TT Firs Neue Trl';
	font-style: normal;
	font-weight: 200;
	font-display: auto;
	src: url('https://simplifiaforbusiness.com/wp-content/uploads/2026/08/TT-Firs-Neue-Trial-Thin-1.ttf') format('truetype');
}
@font-face {
	font-family: 'TT Firs Neue Trl';
	font-style: italic;
	font-weight: 200;
	font-display: auto;
	src: url('https://simplifiaforbusiness.com/wp-content/uploads/2026/08/TT-Firs-Neue-Trial-Thin-Italic-1.ttf') format('truetype');
}
@font-face {
	font-family: 'TT Firs Neue Trl';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://simplifiaforbusiness.com/wp-content/uploads/2026/08/TT-Firs-Neue-Trial-Light-1.ttf') format('truetype');
}
@font-face {
	font-family: 'TT Firs Neue Trl';
	font-style: italic;
	font-weight: 300;
	font-display: auto;
	src: url('https://simplifiaforbusiness.com/wp-content/uploads/2026/08/TT-Firs-Neue-Trial-Light-Italic-1.ttf') format('truetype');
}
@font-face {
	font-family: 'TT Firs Neue Trl';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://simplifiaforbusiness.com/wp-content/uploads/2026/08/TT-Firs-Neue-Trial-Regular-1.ttf') format('truetype');
}
@font-face {
	font-family: 'TT Firs Neue Trl';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://simplifiaforbusiness.com/wp-content/uploads/2026/08/TT-Firs-Neue-Trial-DemiBold-1.ttf') format('truetype');
}
@font-face {
	font-family: 'TT Firs Neue Trl';
	font-style: italic;
	font-weight: 600;
	font-display: auto;
	src: url('https://simplifiaforbusiness.com/wp-content/uploads/2026/08/TT-Firs-Neue-Trial-DemiBold-Italic-1.ttf') format('truetype');
}
@font-face {
	font-family: 'TT Firs Neue Trl';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://simplifiaforbusiness.com/wp-content/uploads/2026/08/TT-Firs-Neue-Trial-Bold-1.ttf') format('truetype');
}
@font-face {
	font-family: 'TT Firs Neue Trl';
	font-style: italic;
	font-weight: 700;
	font-display: auto;
	src: url('https://simplifiaforbusiness.com/wp-content/uploads/2026/08/TT-Firs-Neue-Trial-Bold-Italic-1.ttf') format('truetype');
}
@font-face {
	font-family: 'TT Firs Neue Trl';
	font-style: normal;
	font-weight: 800;
	font-display: auto;
	src: url('https://simplifiaforbusiness.com/wp-content/uploads/2026/08/TT-Firs-Neue-Trial-ExtraBold-1.ttf') format('truetype');
}
@font-face {
	font-family: 'TT Firs Neue Trl';
	font-style: italic;
	font-weight: 800;
	font-display: auto;
	src: url('https://simplifiaforbusiness.com/wp-content/uploads/2026/08/TT-Firs-Neue-Trial-ExtraBold-Italic-1.ttf') format('truetype');
}
@font-face {
	font-family: 'TT Firs Neue Trl';
	font-style: normal;
	font-weight: 900;
	font-display: auto;
	src: url('https://simplifiaforbusiness.com/wp-content/uploads/2026/08/TT-Firs-Neue-Trial-Black-1.ttf') format('truetype');
}
@font-face {
	font-family: 'TT Firs Neue Trl';
	font-style: italic;
	font-weight: 900;
	font-display: auto;
	src: url('https://simplifiaforbusiness.com/wp-content/uploads/2026/08/TT-Firs-Neue-Trial-Black-Italic-1.ttf') format('truetype');
}
/* End Custom Fonts CSS */