/* ============================================================
   CEWeb Widgets — Engagements (texte + promesses)

   Deux colonnes : à gauche un bloc de texte (surtitre, titre dont la fin prend
   une couleur d'accent, paragraphe, bouton), à droite une pile de promesses —
   une pastille d'icône, un titre, un paragraphe où le gras est admis, un lien
   facultatif. Aucun JavaScript : le survol, la mise en avant et l'apparition
   sont trois états CSS.

   Tous les réglages de l'onglet Style arrivent par des variables
   --ceweb-engagements-* posées sur .ceweb-engagements par Elementor. Les
   valeurs ci-dessous ne sont qu'un repli, et elles pointent d'abord sur la
   palette du thème — -1 accent, -6 titres et fond sombre, -7 texte courant,
   -9 bordures, -10 fond clair, -11 fond de carte. Les contrôles de couleur ont
   donc un défaut *vide* : tant qu'on n'y touche pas, Elementor n'émet rien et
   c'est le thème qui décide.

   Huit variables ne sont volontairement **jamais déclarées ici** —
   --ceweb-engagements-bg, -card-bg, -card-border-color-hover, -badge-bg,
   -badge-outline-color, -ring-color, -item-title-color-hover et
   -cta-bg-hover. Le CSS les lit en
   `var(x, repli)`, et un var() ne prend son repli que si la variable n'est
   *pas* déclarée : la déclarer, même vide, casserait le repli. Leurs contrôles
   partent donc à vide, ou vivent derrière une `condition`.
   ============================================================ */

/* Le bloc doit réclamer toute la largeur de la section.

   Dans un conteneur *flexbox* Elementor — le défaut depuis la 3.6 — un widget
   est un élément flex en `flex: 0 1 auto` : sa largeur suit son contenu, pas
   la section. Ici le contenu, ce sont deux colonnes en pourcentage : sans
   cette ligne, elles se calculeraient sur une boîte déjà rétrécie. Même piège
   que l'« Accordéon d'images », et même remède. Une largeur réglée à la main
   dans l'onglet Avancé la bat sans peine, son sélecteur portant l'identifiant
   de l'élément. */
.elementor-widget-ceweb_engagements{ width: 100%; }

.ceweb-engagements{
  width: 100%;

  /* --- Disposition -------------------------------------------- */
  /* Les deux colonnes sont des bases flex, pas des pistes de grille : en
     portant `--aside-basis` à 100 % — ce que fait le contrôle sur mobile — la
     colonne de texte prend une ligne à elle seule et les promesses passent
     dessous. Une grille à gabarit fixe, elle, ne retourne jamais à la ligne. */
  --ceweb-engagements-aside-basis: 42%;
  --ceweb-engagements-list-basis: 46%;
  --ceweb-engagements-gap: 56px;
  --ceweb-engagements-card-gap: 20px;
  --ceweb-engagements-card-columns: 1;
  --ceweb-engagements-sticky-top: 96px;

  /* `--align` sert de text-align, `--self` en est la traduction pour les
     éléments en boîte (le bouton), et `--mi` celle des marges automatiques qui
     recentrent un texte plus étroit que sa colonne. Les trois sont écrites
     d'un coup par le contrôle Alignement. */
  --ceweb-engagements-align: left;
  --ceweb-engagements-self: flex-start;
  --ceweb-engagements-mi: 0 auto;

  /* --- Fond du bloc ------------------------------------------- */
  --ceweb-engagements-accent: var(--theme-palette-color-1, #1A6FFF);
  --ceweb-engagements-bg-tint-amount: 8%;
  --ceweb-engagements-radius: 36px;
  --ceweb-engagements-padding: 72px 64px;

  /* --- Colonne de texte --------------------------------------- */
  --ceweb-engagements-eyebrow-gap: 16px;
  --ceweb-engagements-title-gap: 26px;
  --ceweb-engagements-text-gap: 36px;
  --ceweb-engagements-text-max: 420px;

  /* --- Carte --------------------------------------------------- */
  --ceweb-engagements-card-radius: 22px;
  --ceweb-engagements-card-padding: 26px 30px;
  --ceweb-engagements-card-border-width: 1px;
  --ceweb-engagements-card-inner-gap: 22px;
  --ceweb-engagements-card-body-gap: 8px;

  /* --- Pastille ------------------------------------------------ */
  --ceweb-engagements-badge-size: 58px;
  --ceweb-engagements-badge-radius: 16px;
  --ceweb-engagements-badge-icon-size: 26px;
  --ceweb-engagements-badge-padding: 0px;
  --ceweb-engagements-badge-tint-amount: 16%;

  /* --- Textes des promesses ------------------------------------ */
  --ceweb-engagements-item-cta-gap: 12px;

  /* --- Bouton --------------------------------------------------- */
  --ceweb-engagements-cta-padding: 18px 34px;
  --ceweb-engagements-cta-radius: 999px;
  --ceweb-engagements-cta-lift: 3px;
  --ceweb-engagements-cta-arrow-shift: 5px;

  /* --- Survol ---------------------------------------------------- */
  --ceweb-engagements-hover-duration: 320ms;
  --ceweb-engagements-hover-lift: 4px;
  --ceweb-engagements-hover-badge-lift: 0px;
  --ceweb-engagements-hover-badge-scale: 1.08;
  --ceweb-engagements-hover-badge-rotate: -4deg;
  --ceweb-engagements-hover-ring: 8px;
  --ceweb-engagements-hover-ring-amount: 24%;
  --ceweb-engagements-hover-border-width: 1px;

  /* --- Apparition ------------------------------------------------ */
  /* `--reveal-x` et `--reveal-y` sont des multiplicateurs, pas des distances :
     le contrôle « Sens » écrit -1, 0 ou 1, et la distance reste un seul
     curseur. Un seul jeu d'images clés couvre ainsi les quatre sens. */
  --ceweb-engagements-reveal-shift: 26px;
  --ceweb-engagements-reveal-x: 0;
  --ceweb-engagements-reveal-y: 1;
  --ceweb-engagements-reveal-scale: .97;
  --ceweb-engagements-reveal-duration: 680ms;
  --ceweb-engagements-reveal-step: 90ms;

  --ceweb-engagements-ease: cubic-bezier(.2, .7, .3, 1);

  /* La couleur de la fin du titre est calculée quand l'ambiance est sombre :
     un accent éclairci lit mieux sur un fond profond qu'un accent saturé, et
     il suit l'accent si on en change. La substitution d'un var() ne dépend pas
     de l'ordre des déclarations — `-auto` peut donc être posée plus bas, par
     l'ambiance. Les replis neutres, eux, sont dans les variables elles-mêmes :
     une déclaration contenant un var() invalide retombe sur `unset`, jamais
     sur la déclaration précédente. */
  --ceweb-engagements-title-accent-color: var(--ceweb-engagements-title-accent-auto);
  --ceweb-engagements-bg-tint: #1E2E63;

  /* Pas de font-family ici : le bloc prend les polices du thème, celle du
     corps pour le texte et celle des titres pour les balises de titre. */
  color: var(--ceweb-engagements-text-color);
  padding: var(--ceweb-engagements-padding);
  border-radius: var(--ceweb-engagements-radius);
}
.ceweb-engagements *{ box-sizing: border-box; }

/* ============================================================
   Les deux ambiances

   Une classe, un jeu de couleurs. C'est la maquette du site qui impose le fond
   sombre, mais le même bloc doit pouvoir se poser sur une section claire sans
   qu'on reprenne dix contrôles à la main.

   Les voiles de l'ambiance sombre sont des blancs translucides plutôt que des
   couleurs de palette : un blanc à 6 % éclaircit n'importe quel fond sombre,
   là où une couleur fixe suppose connue celle du fond.

   Aucune de ces déclarations ne touche `--ceweb-engagements-bg` ni
   `-card-bg` : ces deux-là restent la propriété exclusive des contrôles de
   couleur, dont le repli serait cassé par une déclaration, même vide. D'où les
   noms en `-auto`.
   ============================================================ */
.ceweb-engagements--scheme-dark{
  --ceweb-engagements-bg-auto: var(--theme-palette-color-6, #16255C);
  --ceweb-engagements-bg-tint-base: var(--theme-palette-color-6, #16255C);
  --ceweb-engagements-eyebrow-color: rgba(255, 255, 255, .62);
  --ceweb-engagements-title-color: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-engagements-title-accent-auto: #A9BCF5;
  --ceweb-engagements-text-color: rgba(255, 255, 255, .76);
  --ceweb-engagements-card-bg-auto: rgba(255, 255, 255, .06);
  --ceweb-engagements-card-border-color: rgba(255, 255, 255, .10);
  --ceweb-engagements-item-title-color: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-engagements-item-text-color: rgba(255, 255, 255, .74);
  --ceweb-engagements-strong-color: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-engagements-item-cta-color: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-engagements-badge-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-engagements-badge-solid: var(--ceweb-engagements-accent);
  --ceweb-engagements-badge-tint-base: var(--theme-palette-color-6, #16255C);
  --ceweb-engagements-cta-bg: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-engagements-cta-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-engagements-cta-color-hover: var(--ceweb-engagements-cta-color);
}

.ceweb-engagements--scheme-light{
  --ceweb-engagements-bg-auto: var(--theme-palette-color-10, #F4F8FF);
  --ceweb-engagements-bg-tint-base: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-engagements-eyebrow-color: var(--ceweb-engagements-accent);
  --ceweb-engagements-title-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-engagements-title-accent-auto: var(--ceweb-engagements-accent);
  --ceweb-engagements-text-color: var(--theme-palette-color-7, #475569);
  --ceweb-engagements-card-bg-auto: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-engagements-card-border-color: var(--theme-palette-color-9, #E2E8F0);
  --ceweb-engagements-item-title-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-engagements-item-text-color: var(--theme-palette-color-7, #475569);
  --ceweb-engagements-strong-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-engagements-item-cta-color: var(--ceweb-engagements-accent);
  --ceweb-engagements-badge-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-engagements-badge-solid: var(--ceweb-engagements-accent);
  --ceweb-engagements-badge-tint-base: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-engagements-cta-bg: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-engagements-cta-color: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-engagements-cta-color-hover: var(--ceweb-engagements-cta-color);
}

@supports (color: color-mix(in srgb, red 50%, white)){
  .ceweb-engagements--scheme-dark{
    --ceweb-engagements-title-accent-auto: color-mix(in srgb, var(--ceweb-engagements-accent) 42%, #FFFFFF);
  }
  .ceweb-engagements{
    --ceweb-engagements-bg-tint: color-mix(
      in srgb,
      var(--ceweb-engagements-accent) var(--ceweb-engagements-bg-tint-amount),
      var(--ceweb-engagements-bg-tint-base)
    );
  }
}

/* Deux remplissages peints, deux classes posées par PHP : couper le fond
   retire la déclaration au lieu de la neutraliser avec une couleur
   transparente. Les modes « dégradé ou image » et « aucun » n'émettent aucune
   classe, donc aucune règle d'ici ne peint quoi que ce soit. */
.ceweb-engagements--fill-solid{ background: var(--ceweb-engagements-bg, var(--ceweb-engagements-bg-auto)); }
.ceweb-engagements--fill-tint{ background: var(--ceweb-engagements-bg, var(--ceweb-engagements-bg-tint)); }

.ceweb-engagements__empty{
  padding: 16px 20px; border: 1px dashed #d63638; border-radius: 8px;
  color: #1d2327; font: 14px/1.5 system-ui, sans-serif;
}

/* ============================================================
   Les deux colonnes

   `flex-wrap` et deux bases : tant que les deux tiennent côte à côte, elles se
   partagent la ligne ; dès que la base du texte atteint 100 %, les promesses
   passent dessous. Le côté du texte est une classe posée par PHP, jamais un
   croisement de sélecteurs — même raisonnement que le visuel d'« Étapes —
   bandes alternées » : un état, une classe, une spécificité.
   ============================================================ */
.ceweb-engagements__layout{
  display: flex;
  flex-wrap: wrap;
  gap: var(--ceweb-engagements-gap);
  align-items: flex-start;
}
.ceweb-engagements.is-aside-right .ceweb-engagements__layout{ flex-direction: row-reverse; }

.ceweb-engagements__aside{
  flex: 1 1 var(--ceweb-engagements-aside-basis);
  min-width: 0;
  text-align: var(--ceweb-engagements-align);
}

/* Collée au défilement : la colonne de texte reste en vue pendant qu'on
   parcourt les promesses. `align-self: flex-start` est indispensable — un
   élément flex étiré fait toute la hauteur de la ligne et n'a alors aucune
   marge de manœuvre pour coller. L'effet s'éteint tout seul une fois les
   colonnes empilées : la colonne fait sa propre hauteur, il n'y a plus rien à
   parcourir. */
.ceweb-engagements--sticky .ceweb-engagements__aside{
  position: sticky;
  top: var(--ceweb-engagements-sticky-top);
  align-self: flex-start;
}

/* ============================================================
   Colonne de texte

   Sélecteurs volontairement longs (0,2,0 et plus) : `.elementor p` et les
   règles de titre du thème passeraient devant une classe isolée et
   reprendraient la main sur la marge et la couleur. Long plutôt
   qu'`!important`, pour que l'onglet Style reste capable de gagner.
   ============================================================ */
.ceweb-engagements .ceweb-engagements__eyebrow{
  margin: 0 0 var(--ceweb-engagements-eyebrow-gap);
  color: var(--ceweb-engagements-eyebrow-color);
  font-size: 13px; font-weight: 600; line-height: 1.2;
  letter-spacing: .12em; text-transform: uppercase;
}

/* Ni font-family ni font-size : le titre prend la police et la taille que le
   thème donne à sa balise (h2 par défaut, réglable dans l'onglet Contenu). */
.ceweb-engagements .ceweb-engagements__title{
  margin: 0 0 var(--ceweb-engagements-title-gap);
  color: var(--ceweb-engagements-title-color);
  line-height: 1.05;
}
.ceweb-engagements .ceweb-engagements__title:last-child{ margin-bottom: 0; }

/* Le titre est coupé en deux champs plutôt que d'accepter du HTML : tout reste
   échappable. L'italique est ici voulue — c'est la parenthèse de la maquette —
   et le contrôle « Fin du titre en italique » la coupe en remettant
   `font-style: normal`, puisqu'un `<em>` arrive penché par défaut. */
.ceweb-engagements .ceweb-engagements__title-accent{
  color: var(--ceweb-engagements-title-accent-color);
  font-style: italic;
}
.ceweb-engagements--accent-upright .ceweb-engagements__title-accent{ font-style: normal; }

.ceweb-engagements .ceweb-engagements__text{
  max-width: var(--ceweb-engagements-text-max);
  margin: 0 0 var(--ceweb-engagements-text-gap);
  margin-inline: var(--ceweb-engagements-mi);
  color: var(--ceweb-engagements-text-color);
  font-size: 17px;
  line-height: 1.65;
}
.ceweb-engagements .ceweb-engagements__text p{ margin: 0 0 .8em; }
.ceweb-engagements .ceweb-engagements__text > :last-child{ margin-bottom: 0; }
.ceweb-engagements .ceweb-engagements__text strong,
.ceweb-engagements .ceweb-engagements__text b{
  color: var(--ceweb-engagements-strong-color);
  font-weight: 600;
}
.ceweb-engagements .ceweb-engagements__text:last-child{ margin-bottom: 0; }

/* ============================================================
   Bouton
   ============================================================ */
.ceweb-engagements__actions{
  display: flex;
  justify-content: var(--ceweb-engagements-self);
}

.ceweb-engagements .ceweb-engagements__actions .ceweb-engagements__cta{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: var(--ceweb-engagements-cta-padding);
  border-radius: var(--ceweb-engagements-cta-radius);
  background: var(--ceweb-engagements-cta-bg);
  color: var(--ceweb-engagements-cta-color);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition:
    transform var(--ceweb-engagements-hover-duration) var(--ceweb-engagements-ease),
    background-color var(--ceweb-engagements-hover-duration) var(--ceweb-engagements-ease),
    color var(--ceweb-engagements-hover-duration) var(--ceweb-engagements-ease),
    box-shadow var(--ceweb-engagements-hover-duration) var(--ceweb-engagements-ease);
}
.ceweb-engagements__cta-arrow{
  display: inline-block;
  transition: transform var(--ceweb-engagements-hover-duration) var(--ceweb-engagements-ease);
}

/* ============================================================
   Liste des promesses

   La liste est un <ul> imbriqué dans la racine, jamais la racine elle-même :
   ses remises à zéro portent ainsi deux classes (0,2,0) et passent devant le
   `.elementor ul` (0,1,1) du thème, qui reprendrait sinon la marge, le retrait
   et les puces.
   ============================================================ */
.ceweb-engagements__list-wrap{
  flex: 1 1 var(--ceweb-engagements-list-basis);
  min-width: 0;
}

.ceweb-engagements .ceweb-engagements__list{
  display: grid;
  grid-template-columns: repeat(var(--ceweb-engagements-card-columns), minmax(0, 1fr));
  gap: var(--ceweb-engagements-card-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ceweb-engagements .ceweb-engagements__list .ceweb-engagements__item{
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ============================================================
   Carte

   Deux boîtes emboîtées, et c'est structurel : `__item` porte l'animation
   d'apparition, `__card` le survol. Une animation en `fill-mode: both` garde
   la main sur sa propriété jusque dans l'état final — un `transform: none`
   d'apparition posé sur le même élément mangerait le soulèvement au survol,
   sans que rien ne le signale.
   ============================================================ */
.ceweb-engagements__card{
  position: relative;
  display: flex;
  gap: var(--ceweb-engagements-card-inner-gap);
  align-items: flex-start;
  height: 100%;
  padding: var(--ceweb-engagements-card-padding);
  border: var(--ceweb-engagements-card-border-width) solid var(--ceweb-engagements-card-border-color);
  border-radius: var(--ceweb-engagements-card-radius);
  background: var(--ceweb-engagements-card-bg, var(--ceweb-engagements-card-bg-auto));
  transition:
    transform var(--ceweb-engagements-hover-duration) var(--ceweb-engagements-ease),
    background-color var(--ceweb-engagements-hover-duration) var(--ceweb-engagements-ease),
    border-color var(--ceweb-engagements-hover-duration) var(--ceweb-engagements-ease),
    box-shadow var(--ceweb-engagements-hover-duration) var(--ceweb-engagements-ease);

  /* Couleur du halo : celle du contrôle si elle est réglée, sinon l'accent de
     la promesse. Résolue sur la carte, et pas sur la racine, parce que
     `--ceweb-engagements-accent` peut être redéfinie promesse par promesse :
     un var() imbriqué est substitué sur l'élément qui porte la déclaration,
     pas sur celui qui s'en sert plus bas. */
  --ceweb-engagements-ring: var(--ceweb-engagements-ring-color, var(--ceweb-engagements-accent));
  --ceweb-engagements-badge-tint: #23356F;
}

@supports (color: color-mix(in srgb, red 50%, white)){
  .ceweb-engagements__card{
    --ceweb-engagements-badge-tint: color-mix(
      in srgb,
      var(--ceweb-engagements-accent) var(--ceweb-engagements-badge-tint-amount),
      var(--ceweb-engagements-badge-tint-base)
    );
  }
}

/* La bordure de survol est dessinée deux fois, comme dans « Cartes ». Le
   survol repeint d'abord la vraie bordure de la carte : à épaisseur égale,
   c'est tout l'effet, et il ne laisse aucune couture dans les angles. Ce
   pseudo-élément — une ombre interne montée en fondu — ne prend le relais que
   si la bordure de survol est réglée *plus épaisse* que celle du repos,
   puisqu'épaissir une vraie bordure décalerait le contenu et ferait respirer
   toute la grille. Il est posé sur la boîte de bordure (inset négatif) avec un
   rayon augmenté d'autant, sinon il couperait les angles arrondis. */
.ceweb-engagements__card::after{
  content: "";
  position: absolute;
  inset: calc(-1 * var(--ceweb-engagements-card-border-width));
  border-radius: calc(var(--ceweb-engagements-card-radius) + var(--ceweb-engagements-card-border-width));
  box-shadow: inset 0 0 0 var(--ceweb-engagements-hover-border-width) var(--ceweb-engagements-ring);
  opacity: 0;
  transition: opacity var(--ceweb-engagements-hover-duration) var(--ceweb-engagements-ease);
  pointer-events: none;        /* Ne doit jamais intercepter le clic du lien étiré. */
}

/* Promesse entièrement cliquable : un seul lien, celui du titre, dont le
   ::after recouvre la carte. Emboîter la carte dans un <a> engloutirait le
   paragraphe dans le nom accessible du lien. */
.ceweb-engagements .ceweb-engagements__stretch{ color: inherit; text-decoration: none; }
.ceweb-engagements .ceweb-engagements__stretch::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

/* ============================================================
   Pastille
   ============================================================ */
.ceweb-engagements--badge-top .ceweb-engagements__card{ flex-direction: column; }

.ceweb-engagements__badge{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--ceweb-engagements-badge-size);
  height: var(--ceweb-engagements-badge-size);
  /* La pastille est en `border-box` (voir `.ceweb-engagements *`) : cette marge
     est prise *dans* sa taille, elle ne l'agrandit pas. Elle réduit d'autant la
     boîte de contenu, à laquelle l'icône est bornée par ses `max-*`. */
  padding: var(--ceweb-engagements-badge-padding);
  border-radius: var(--ceweb-engagements-badge-radius);
  background: var(--ceweb-engagements-badge-bg, var(--ceweb-engagements-badge-fallback));
  color: var(--ceweb-engagements-badge-color);
  transition:
    transform var(--ceweb-engagements-hover-duration) var(--ceweb-engagements-ease),
    background-color var(--ceweb-engagements-hover-duration) var(--ceweb-engagements-ease),
    color var(--ceweb-engagements-hover-duration) var(--ceweb-engagements-ease);

  /* Repli neutre du halo, dans la variable et non dans une seconde
     déclaration : une déclaration contenant un var() invalide retombe sur
     `unset`, jamais sur la règle précédente. */
  --ceweb-engagements-halo: rgba(26, 111, 255, .20);
}
@supports (color: color-mix(in srgb, red 50%, white)){
  .ceweb-engagements__badge{
    --ceweb-engagements-halo: color-mix(
      in srgb,
      var(--ceweb-engagements-ring) var(--ceweb-engagements-hover-ring-amount),
      transparent
    );
  }
}

/* Le halo vit sur un ::after plutôt que sur la pastille : `box-shadow` y est
   déjà pris par le contrôle Ombre de l'onglet Style, et une vraie bordure
   décalerait le texte à côté de la pastille à chaque passage de souris. */
.ceweb-engagements__badge::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 var(--ceweb-engagements-hover-ring) var(--ceweb-engagements-halo);
  opacity: 0;
  transition: opacity var(--ceweb-engagements-hover-duration) var(--ceweb-engagements-ease);
  pointer-events: none;
}

/* Trois remplissages, trois classes : la teinte lit l'accent de la promesse,
   la couleur pleine part de l'accent lui-même, le contour ne peint rien. Tous
   passent par le même repli `var(--badge-bg, …)`, que le contrôle « Couleur »
   n'écrase que s'il est rempli. Déclarés sur la carte, là où l'accent de la
   promesse est connu. */
.ceweb-engagements--badge-solid .ceweb-engagements__card{ --ceweb-engagements-badge-fallback: var(--ceweb-engagements-badge-solid); }
.ceweb-engagements--badge-tint .ceweb-engagements__card{ --ceweb-engagements-badge-fallback: var(--ceweb-engagements-badge-tint); }
.ceweb-engagements--badge-outline .ceweb-engagements__card{ --ceweb-engagements-badge-fallback: transparent; }
.ceweb-engagements--badge-outline .ceweb-engagements__badge{
  border: 1px solid var(--ceweb-engagements-ring);
  color: var(--ceweb-engagements-badge-outline-color, var(--ceweb-engagements-accent));
}

/* L'icône, et les deux raisons pour lesquelles ce bloc est écrit comme ça.

   **Le sélecteur est volontairement long (0,3,1).** Une règle tenant sur
   `.ceweb-engagements__badge svg` (0,1,1) est à *égalité* avec celles
   qu'Elementor pose sur ses propres icônes en SVG en ligne — et la feuille
   d'Elementor, injectée par page, est chargée après celle du plugin : à
   spécificité égale, c'est la dernière qui gagne, et l'icône reprend sa taille
   d'origine sans que rien ne le signale. Le symptôme est reconnaissable : le
   curseur « Taille de l'icône » ne fait rien sur les icônes SVG alors qu'il
   agit sur les polices d'icônes, dont la taille passe par `font-size`.

   **`max-width` et `max-height` bornent l'icône à la boîte de contenu de la
   pastille**, c'est-à-dire à sa taille *moins* sa marge intérieure. C'est ce
   qui rend la marge intérieure efficace : elle rétrécit une icône trop grande
   même quand celle-ci impose sa propre largeur — un fichier SVG téléversé
   arrive souvent avec ses attributs `width`/`height`, et la contrainte
   `max-*` continue de s'appliquer par-dessus. `img` est là pour le cas où le
   SVG est servi comme image plutôt qu'en ligne.

   `fill: currentColor` fait suivre la couleur de la pastille quelle que soit
   celle du fichier. */
.ceweb-engagements .ceweb-engagements__card .ceweb-engagements__badge i,
.ceweb-engagements .ceweb-engagements__card .ceweb-engagements__badge svg,
.ceweb-engagements .ceweb-engagements__card .ceweb-engagements__badge img{
  display: block;
  flex: 0 0 auto;
  width: var(--ceweb-engagements-badge-icon-size);
  height: var(--ceweb-engagements-badge-icon-size);
  max-width: 100%;
  max-height: 100%;
  font-size: var(--ceweb-engagements-badge-icon-size);
  line-height: 1;
}
/* Une police d'icône est une lettre, pas une image : ni largeur ni hauteur ne
   la redimensionnent, seule la taille de police compte — et la laisser en
   `width`/`height` lui donnerait une boîte plus petite que son glyphe. */
.ceweb-engagements .ceweb-engagements__card .ceweb-engagements__badge i{
  width: auto;
  height: auto;
}
.ceweb-engagements .ceweb-engagements__card .ceweb-engagements__badge svg{ fill: currentColor; }

/* ============================================================
   Corps de la promesse
   ============================================================ */
.ceweb-engagements__body{
  display: flex;
  flex-direction: column;
  gap: var(--ceweb-engagements-card-body-gap);
  min-width: 0;
}

/* L'alignement des cartes est déclaré, jamais hérité. Posées dans une section
   Elementor centrée, elles hériteraient de son `text-align: center` — et c'est
   le titre, un `<h3>`, qui trahirait le premier, les thèmes centrant volontiers
   les titres. Une déclaration sur l'élément lui-même bat toujours la même
   propriété *héritée* d'un ancêtre, la spécificité n'entrant pas en jeu ; d'où
   ces trois déclarations plutôt qu'une seule sur la carte. Même leçon que
   l'alignement du widget « Avis ». */
.ceweb-engagements .ceweb-engagements__card{ text-align: left; }

.ceweb-engagements .ceweb-engagements__item-title{
  margin: 0;
  text-align: left;
  color: var(--ceweb-engagements-item-title-color);
  line-height: 1.25;
  transition: color var(--ceweb-engagements-hover-duration) var(--ceweb-engagements-ease);
}

.ceweb-engagements .ceweb-engagements__item-text{
  text-align: left;
  color: var(--ceweb-engagements-item-text-color);
  font-size: 15px;
  line-height: 1.6;
}
.ceweb-engagements .ceweb-engagements__item-text p{ margin: 0 0 .7em; }
.ceweb-engagements .ceweb-engagements__item-text > :last-child{ margin-bottom: 0; }
.ceweb-engagements .ceweb-engagements__item-text strong,
.ceweb-engagements .ceweb-engagements__item-text b{
  color: var(--ceweb-engagements-strong-color);
  font-weight: 600;
}

.ceweb-engagements .ceweb-engagements__item-cta{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: calc(var(--ceweb-engagements-item-cta-gap) - var(--ceweb-engagements-card-body-gap));
  color: var(--ceweb-engagements-item-cta-color);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.ceweb-engagements .ceweb-engagements__item-cta span{
  transition: transform var(--ceweb-engagements-hover-duration) var(--ceweb-engagements-ease);
}

/* ============================================================
   Survol et mise en avant

   Tout le survol vit sous `.ceweb-engagements--hover`, une classe que PHP
   n'émet que si le réglage est actif : le couper retire les règles de la
   feuille au lieu de neutraliser chaque valeur une à une.

   `.is-featured` est le même état, figé depuis l'éditeur, et il ne dépend pas
   de ce réglage : mettre une promesse en avant n'a rien à voir avec ce qui se
   passe au passage de la souris. `:focus-within` l'allume au clavier, sans
   quoi l'état resterait invisible à qui ne se sert pas d'une souris.

   Rien ici ne touche aux bases flex, aux marges ni aux épaisseurs de bordure :
   le survol ne doit jamais rejouer la mise en page.
   ============================================================ */
.ceweb-engagements--hover .ceweb-engagements__item:hover .ceweb-engagements__card,
.ceweb-engagements--hover .ceweb-engagements__item:focus-within .ceweb-engagements__card,
.ceweb-engagements__item.is-featured .ceweb-engagements__card{
  transform: translateY(calc(-1 * var(--ceweb-engagements-hover-lift)));
  border-color: var(--ceweb-engagements-card-border-color-hover, var(--ceweb-engagements-ring));
}
.ceweb-engagements--hover .ceweb-engagements__item:hover .ceweb-engagements__card::after,
.ceweb-engagements--hover .ceweb-engagements__item:focus-within .ceweb-engagements__card::after,
.ceweb-engagements__item.is-featured .ceweb-engagements__card::after{
  opacity: 1;
}

.ceweb-engagements--hover .ceweb-engagements__item:hover .ceweb-engagements__badge,
.ceweb-engagements--hover .ceweb-engagements__item:focus-within .ceweb-engagements__badge,
.ceweb-engagements__item.is-featured .ceweb-engagements__badge{
  transform:
    translateY(calc(-1 * var(--ceweb-engagements-hover-badge-lift)))
    scale(var(--ceweb-engagements-hover-badge-scale))
    rotate(var(--ceweb-engagements-hover-badge-rotate));
}
.ceweb-engagements--hover .ceweb-engagements__item:hover .ceweb-engagements__badge::after,
.ceweb-engagements--hover .ceweb-engagements__item:focus-within .ceweb-engagements__badge::after,
.ceweb-engagements__item.is-featured .ceweb-engagements__badge::after{
  opacity: 1;
}

.ceweb-engagements--hover .ceweb-engagements__item:hover .ceweb-engagements__item-title,
.ceweb-engagements--hover .ceweb-engagements__item:focus-within .ceweb-engagements__item-title,
.ceweb-engagements__item.is-featured .ceweb-engagements__item-title{
  color: var(--ceweb-engagements-item-title-color-hover, var(--ceweb-engagements-item-title-color));
}

.ceweb-engagements--hover .ceweb-engagements__item:hover .ceweb-engagements__item-cta span,
.ceweb-engagements--hover .ceweb-engagements__item:focus-within .ceweb-engagements__item-cta span{
  transform: translateX(var(--ceweb-engagements-cta-arrow-shift));
}

.ceweb-engagements--hover .ceweb-engagements__cta:hover,
.ceweb-engagements--hover .ceweb-engagements__cta:focus-visible{
  background: var(--ceweb-engagements-cta-bg-hover, var(--ceweb-engagements-accent));
  color: var(--ceweb-engagements-cta-color-hover);
  transform: translateY(calc(-1 * var(--ceweb-engagements-cta-lift)));
}
.ceweb-engagements--hover .ceweb-engagements__cta:hover .ceweb-engagements__cta-arrow,
.ceweb-engagements--hover .ceweb-engagements__cta:focus-visible .ceweb-engagements__cta-arrow{
  transform: translateX(var(--ceweb-engagements-cta-arrow-shift));
}

/* ============================================================
   Apparition

   Deux mécanismes pour un seul jeu d'images clés, comme dans « Méthode » et
   « Comparatif ».

   1. Par défaut, une animation au chargement, décalée d'un rang au suivant
      grâce à `--ceweb-engagements-i`, que PHP écrit sur chaque élément.
   2. Là où les animations pilotées par le défilement existent, la même
      animation est rejouée sur la `view()` de l'élément : elle se déroule au
      moment où le bloc entre dans l'écran, et la cascade vient de la position
      des éléments dans la page. Le délai de rang est donc remis à zéro dans
      cette branche, sans quoi il s'ajouterait à un compteur qui n'est plus du
      temps.

   `both` en mode de remplissage dans les deux cas : sans lui, chaque élément
   clignoterait une image à sa position d'arrivée avant de reculer.

   L'animation porte sur `__item`, jamais sur `__card` : en `fill-mode: both`
   elle garde la main sur `transform` jusque dans l'état final, et mangerait le
   soulèvement au survol.
   ============================================================ */
@keyframes ceweb-engagements-rise{
  from{
    opacity: 0;
    transform:
      translate3d(
        calc(var(--ceweb-engagements-reveal-x) * var(--ceweb-engagements-reveal-shift)),
        calc(var(--ceweb-engagements-reveal-y) * var(--ceweb-engagements-reveal-shift)),
        0
      )
      scale(var(--ceweb-engagements-reveal-scale));
  }
  to{ opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference){
  .ceweb-engagements--reveal .ceweb-engagements__eyebrow,
  .ceweb-engagements--reveal .ceweb-engagements__title,
  .ceweb-engagements--reveal .ceweb-engagements__text,
  .ceweb-engagements--reveal .ceweb-engagements__actions,
  .ceweb-engagements--reveal .ceweb-engagements__item{
    animation: ceweb-engagements-rise var(--ceweb-engagements-reveal-duration) var(--ceweb-engagements-ease) both;
    animation-delay: calc(var(--ceweb-engagements-i, 0) * var(--ceweb-engagements-reveal-step));
  }

  @supports (animation-timeline: view()){
    .ceweb-engagements--reveal .ceweb-engagements__eyebrow,
    .ceweb-engagements--reveal .ceweb-engagements__title,
    .ceweb-engagements--reveal .ceweb-engagements__text,
    .ceweb-engagements--reveal .ceweb-engagements__actions,
    .ceweb-engagements--reveal .ceweb-engagements__item{
      animation-timeline: view();
      /* `auto` : c'est la plage de défilement qui fait la durée, plus le temps. */
      animation-duration: auto;
      animation-range: entry 0% entry 55%;
      animation-delay: 0s;
    }

    /* Une colonne collée au défilement et une animation liée à la `view()` de
       ses propres enfants se contredisent : la colonne cesse de monter dans
       l'écran, la progression se fige et le texte resterait à mi-chemin de son
       apparition. Dans ce cas, et dans ce cas seulement, l'en-tête revient à
       l'animation au chargement, cascade par rang comprise. */
    .ceweb-engagements--sticky.ceweb-engagements--reveal .ceweb-engagements__eyebrow,
    .ceweb-engagements--sticky.ceweb-engagements--reveal .ceweb-engagements__title,
    .ceweb-engagements--sticky.ceweb-engagements--reveal .ceweb-engagements__text,
    .ceweb-engagements--sticky.ceweb-engagements--reveal .ceweb-engagements__actions{
      animation-timeline: auto;
      animation-duration: var(--ceweb-engagements-reveal-duration);
      animation-delay: calc(var(--ceweb-engagements-i, 0) * var(--ceweb-engagements-reveal-step));
    }
  }

  /* Dans l'éditeur, le widget est re-rendu en AJAX à chaque réglage : laisser
     l'apparition active ferait clignoter le bloc à chaque caractère tapé. */
  .elementor-editor-active .ceweb-engagements--reveal .ceweb-engagements__eyebrow,
  .elementor-editor-active .ceweb-engagements--reveal .ceweb-engagements__title,
  .elementor-editor-active .ceweb-engagements--reveal .ceweb-engagements__text,
  .elementor-editor-active .ceweb-engagements--reveal .ceweb-engagements__actions,
  .elementor-editor-active .ceweb-engagements--reveal .ceweb-engagements__item{
    animation: none;
  }
}

/* ============================================================
   Mouvement réduit

   Les couleurs et le halo restent : ce sont eux qui signalent l'état, animation
   ou pas. Seuls le déplacement et le grossissement disparaissent.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .ceweb-engagements__card,
  .ceweb-engagements__card::after,
  .ceweb-engagements__badge,
  .ceweb-engagements__badge::after,
  .ceweb-engagements__item-title,
  .ceweb-engagements__item-cta span,
  .ceweb-engagements__cta,
  .ceweb-engagements__cta-arrow{
    transition: none !important;
  }
  .ceweb-engagements--hover .ceweb-engagements__item:hover .ceweb-engagements__card,
  .ceweb-engagements--hover .ceweb-engagements__item:focus-within .ceweb-engagements__card,
  .ceweb-engagements__item.is-featured .ceweb-engagements__card,
  .ceweb-engagements--hover .ceweb-engagements__item:hover .ceweb-engagements__badge,
  .ceweb-engagements--hover .ceweb-engagements__item:focus-within .ceweb-engagements__badge,
  .ceweb-engagements__item.is-featured .ceweb-engagements__badge,
  .ceweb-engagements--hover .ceweb-engagements__cta:hover,
  .ceweb-engagements--hover .ceweb-engagements__cta:focus-visible{
    transform: none;
  }
  .ceweb-engagements--hover .ceweb-engagements__item:hover .ceweb-engagements__item-cta span,
  .ceweb-engagements--hover .ceweb-engagements__item:focus-within .ceweb-engagements__item-cta span,
  .ceweb-engagements--hover .ceweb-engagements__cta:hover .ceweb-engagements__cta-arrow,
  .ceweb-engagements--hover .ceweb-engagements__cta:focus-visible .ceweb-engagements__cta-arrow{
    transform: none;
  }
}