/* ============================================================
   CEWeb Widgets — Méthode (étapes numérotées)

   Un en-tête (surtitre, titre, sous-titre), une rangée d'étapes numérotées
   reliées par un trait, un bouton sous l'ensemble. 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-methode-* posées sur .ceweb-methode 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, -7 texte courant, -9 bordures, -11 fond. 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.

   Six variables ne sont volontairement **jamais déclarées ici** —
   --ceweb-methode-bg, --ceweb-methode-badge-bg, --ceweb-methode-badge-bg-hover,
   --ceweb-methode-badge-color-hover, --ceweb-methode-ring-color,
   --ceweb-methode-step-title-color-hover, --ceweb-methode-step-bg et
   --ceweb-methode-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.
   ============================================================ */

.ceweb-methode{
  /* --- Disposition ------------------------------------------- */
  /* Le nombre de colonnes est responsive côté Elementor (3 / 2 / 1) : aucune
     media query ici, elle écraserait le réglage de l'éditeur. */
  --ceweb-methode-columns: 3;
  --ceweb-methode-gap: 34px;
  --ceweb-methode-row-gap: 46px;

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

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

  /* --- En-tête ----------------------------------------------- */
  --ceweb-methode-eyebrow-color: var(--theme-palette-color-1, #1A6FFF);
  --ceweb-methode-eyebrow-gap: 16px;
  --ceweb-methode-title-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-methode-title-accent-color: var(--theme-palette-color-1, #1A6FFF);
  --ceweb-methode-title-gap: 14px;
  --ceweb-methode-subtitle-color: var(--theme-palette-color-7, #475569);
  --ceweb-methode-header-max: 680px;
  --ceweb-methode-header-gap: 56px;

  /* --- Étape -------------------------------------------------- */
  --ceweb-methode-step-border-color: var(--theme-palette-color-9, #E2E8F0);
  --ceweb-methode-step-border-width: 1px;
  --ceweb-methode-step-radius: 24px;
  --ceweb-methode-step-padding: 0px;
  /* Somme des marges gauche et droite de l'étape, écrite par le même contrôle
     que la marge elle-même : le trait de liaison en a besoin pour savoir de
     combien il doit franchir la gouttière (voir plus bas). */
  --ceweb-methode-step-pad-x: 0px;
  --ceweb-methode-step-gap: 10px;
  --ceweb-methode-body-max: 340px;

  /* --- Pastille ----------------------------------------------- */
  --ceweb-methode-badge-size: 78px;
  --ceweb-methode-badge-radius: 24px;
  --ceweb-methode-badge-gap: 28px;
  --ceweb-methode-badge-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-methode-badge-tint-amount: 12%;
  --ceweb-methode-badge-tint-base: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-methode-badge-solid: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-methode-number-size: 28px;
  --ceweb-methode-icon-size: 30px;

  /* --- Trait de liaison --------------------------------------- */
  --ceweb-methode-connector-style: solid;
  --ceweb-methode-connector-size: 2px;
  --ceweb-methode-connector-space: 20px;
  --ceweb-methode-connector-color: var(--theme-palette-color-9, #E2E8F0);
  /* Mis à 0 par le contrôle Colonnes quand il n'y en a qu'une : un trait qui
     relierait une colonne à elle-même n'a nulle part où aller. */
  --ceweb-methode-connector-on: 1;

  /* --- Textes d'étape ----------------------------------------- */
  --ceweb-methode-step-title-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-methode-text-color: var(--theme-palette-color-7, #475569);
  --ceweb-methode-strong-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-methode-step-cta-color: var(--theme-palette-color-1, #1A6FFF);
  --ceweb-methode-step-cta-gap: 14px;

  /* --- Bouton -------------------------------------------------- */
  --ceweb-methode-cta-gap: 52px;
  --ceweb-methode-cta-bg: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-methode-cta-color: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-methode-cta-color-hover: var(--ceweb-methode-cta-color);
  --ceweb-methode-cta-padding: 17px 34px;
  --ceweb-methode-cta-radius: 999px;
  --ceweb-methode-cta-lift: 3px;
  --ceweb-methode-cta-arrow-shift: 5px;

  /* --- Survol --------------------------------------------------- */
  --ceweb-methode-hover-duration: 300ms;
  --ceweb-methode-hover-lift: 0px;
  --ceweb-methode-hover-badge-lift: 5px;
  --ceweb-methode-hover-badge-scale: 1.06;
  --ceweb-methode-hover-badge-rotate: 0deg;
  --ceweb-methode-hover-ring: 7px;
  --ceweb-methode-hover-ring-amount: 16%;

  /* --- Apparition ------------------------------------------------ */
  --ceweb-methode-reveal-shift: 20px;
  --ceweb-methode-reveal-scale: .96;
  --ceweb-methode-reveal-duration: 640ms;
  --ceweb-methode-reveal-step: 90ms;

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

  /* 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. Le numéro est
     la seule exception (voir .ceweb-methode__number). */
  color: var(--ceweb-methode-text-color);
  padding: var(--ceweb-methode-padding);
  border-radius: var(--ceweb-methode-radius);

  /* Teinte du fond. Déclarée ici, sur la racine, et non sur l'étape : c'est
     l'accent du widget qu'elle doit lire, jamais celui d'une étape. Le repli
     neutre est dans la variable elle-même — une déclaration contenant un var()
     invalide retombe sur `unset`, jamais sur la déclaration précédente. */
  --ceweb-methode-bg-tint: #F2F6FF;
}
.ceweb-methode *{ box-sizing: border-box; }

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

/* Trois remplissages, trois classes posées par PHP : couper le fond retire la
   déclaration au lieu de la neutraliser avec une couleur transparente. */
.ceweb-methode--fill-tint{ background: var(--ceweb-methode-bg, var(--ceweb-methode-bg-tint)); }
.ceweb-methode--fill-solid{ background: var(--ceweb-methode-bg, var(--ceweb-methode-bg-tint-base)); }

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

/* ============================================================
   En-tête
   ============================================================ */
.ceweb-methode__header{
  max-width: var(--ceweb-methode-header-max);
  margin: 0 0 var(--ceweb-methode-header-gap);
  margin-inline: var(--ceweb-methode-header-mi);
  text-align: var(--ceweb-methode-header-align);
}

/* 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-methode .ceweb-methode__eyebrow{
  margin: 0 0 var(--ceweb-methode-eyebrow-gap);
  color: var(--ceweb-methode-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-methode .ceweb-methode__title{
  margin: 0 0 var(--ceweb-methode-title-gap);
  color: var(--ceweb-methode-title-color);
  line-height: 1.1;
}
.ceweb-methode .ceweb-methode__title:last-child{ margin-bottom: 0; }

/* Le titre est coupé en deux champs plutôt que d'accepter du HTML : tout reste
   échappable. `font-style: normal` parce que `<em>` arrive en italique, et que
   l'accent est ici une affaire de couleur. Sélecteur long : `.elementor em`
   (0,1,1) reprendrait sinon l'italique. */
.ceweb-methode .ceweb-methode__title .ceweb-methode__title-accent{
  color: var(--ceweb-methode-title-accent-color);
  font-style: normal;
  font-weight: inherit;
}

.ceweb-methode .ceweb-methode__subtitle{
  margin: 0;
  color: var(--ceweb-methode-subtitle-color);
  font-size: 17px; line-height: 1.6;
}

/* ============================================================
   Rangée d'étapes

   La liste est un <ol> 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, .elementor ol` (0,1,1) du thème, qui reprendrait sinon la
   marge, le retrait et les puces.
   ============================================================ */
.ceweb-methode .ceweb-methode__steps{
  display: grid;
  grid-template-columns: repeat(var(--ceweb-methode-columns), minmax(0, 1fr));
  column-gap: var(--ceweb-methode-gap);
  row-gap: var(--ceweb-methode-row-gap);
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ceweb-methode .ceweb-methode__steps .ceweb-methode__step{
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ============================================================
   Étape

   Deux boîtes emboîtées, et c'est structurel : `__step` 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-methode__card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ceweb-methode-badge-gap);
  height: 100%;
  padding: var(--ceweb-methode-step-padding);
  border-radius: var(--ceweb-methode-step-radius);
  text-align: var(--ceweb-methode-align);
  transition:
    transform var(--ceweb-methode-hover-duration) var(--ceweb-methode-ease),
    background-color var(--ceweb-methode-hover-duration) var(--ceweb-methode-ease),
    border-color var(--ceweb-methode-hover-duration) var(--ceweb-methode-ease),
    box-shadow var(--ceweb-methode-hover-duration) var(--ceweb-methode-ease);

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

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

/* Variante encadrée : l'étape devient une vraie carte. Sans elle, les étapes
   posent directement sur le fond du bloc, comme la maquette du site. */
.ceweb-methode--box-card .ceweb-methode__card{
  background: var(--ceweb-methode-step-bg, var(--theme-palette-color-11, #FFFFFF));
  border: var(--ceweb-methode-step-border-width) solid var(--ceweb-methode-step-border-color);
}

/* ============================================================
   Pastille et trait de liaison
   ============================================================ */

/* La rangée de pastille occupe toute la largeur du contenu de la carte : c'est
   ce qui donne au trait un repère dont les pourcentages valent la colonne. */
.ceweb-methode__badge-row{
  position: relative;
  display: flex;
  justify-content: var(--ceweb-methode-self);
}

.ceweb-methode__badge{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--ceweb-methode-badge-size);
  height: var(--ceweb-methode-badge-size);
  border-radius: var(--ceweb-methode-badge-radius);
  background: var(--ceweb-methode-badge-bg, var(--ceweb-methode-badge-fallback));
  color: var(--ceweb-methode-badge-color);
  transition:
    transform var(--ceweb-methode-hover-duration) var(--ceweb-methode-ease),
    background-color var(--ceweb-methode-hover-duration) var(--ceweb-methode-ease),
    color var(--ceweb-methode-hover-duration) var(--ceweb-methode-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-methode-halo: rgba(26, 111, 255, .14);
}
@supports (color: color-mix(in srgb, red 50%, white)){
  .ceweb-methode__badge{
    --ceweb-methode-halo: color-mix(
      in srgb,
      var(--ceweb-methode-ring) var(--ceweb-methode-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 sous la pastille à chaque passage de souris. */
.ceweb-methode__badge::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 var(--ceweb-methode-hover-ring) var(--ceweb-methode-halo);
  opacity: 0;
  transition: opacity var(--ceweb-methode-hover-duration) var(--ceweb-methode-ease);
  pointer-events: none;
}

/* Deux remplissages, deux classes : la teinte lit l'accent de l'étape, la
   couleur fixe part du fond de carte du thème. Les deux 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 l'étape est connu. */
.ceweb-methode--badge-solid .ceweb-methode__card{ --ceweb-methode-badge-fallback: var(--ceweb-methode-badge-solid); }
.ceweb-methode--badge-tint .ceweb-methode__card{ --ceweb-methode-badge-fallback: var(--ceweb-methode-badge-tint); }

/* Le numéro est un <span> : il ne peut pas hériter de la police des titres,
   que le thème réserve à h1–h6. D'où la seule font-family du fichier, prise à
   la typographie principale d'Elementor quand elle existe — même solution que
   le grand chiffre du widget « Étapes — bandes alternées ». */
.ceweb-methode__number{
  font-family: var(--e-global-typography-primary-font-family, Fraunces), Georgia, serif;
  font-size: var(--ceweb-methode-number-size);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.01em;
}

.ceweb-methode__badge i,
.ceweb-methode__badge svg{ display: block; font-size: var(--ceweb-methode-icon-size); line-height: 1; }
/* Icône SVG : dimensionnée en dur, elle ne suit pas la taille de police, et
   remplie en `currentColor` pour suivre la couleur de la pastille. */
.ceweb-methode__badge svg{
  width: var(--ceweb-methode-icon-size);
  height: var(--ceweb-methode-icon-size);
  fill: currentColor;
}

/* Le trait part du bord droit de la pastille et s'arrête au bord gauche de la
   suivante. Sa fin doit donc franchir la moitié restante de sa propre colonne,
   la gouttière, puis la moitié de la colonne d'en face — d'où le `- 50%`, le
   `- gap` et le `+ badge/2` du calc. Les pourcentages se résolvent sur la
   rangée de pastille, dont la largeur vaut la colonne moins les marges
   intérieures de l'étape : `--step-pad-x` les rend au calcul.

   Il n'est dessiné qu'entre les étapes d'une même ligne : le dernier enfant
   n'en porte pas, et le contrôle Colonnes l'éteint quand il n'y en a qu'une.
   Une grille qui retourne à la ligne laisse en revanche un trait en suspens au
   bout de chaque rangée — c'est un ornement fait pour une seule ligne, et le
   contrôle le dit. */
.ceweb-methode__connector{
  position: absolute;
  top: 50%;
  left: calc(50% + var(--ceweb-methode-badge-size) / 2 + var(--ceweb-methode-connector-space));
  right: calc(
    var(--ceweb-methode-connector-space)
    - var(--ceweb-methode-gap)
    - var(--ceweb-methode-step-pad-x)
    - 50%
    + var(--ceweb-methode-badge-size) / 2
  );
  height: 0;
  border-top: var(--ceweb-methode-connector-size) var(--ceweb-methode-connector-style) var(--ceweb-methode-connector-color);
  opacity: var(--ceweb-methode-connector-on);
  transform: translateY(-50%);
  pointer-events: none;
}
.ceweb-methode__step:last-child .ceweb-methode__connector{ display: none; }

/* ============================================================
   Corps de l'étape

   `--body-max` borne la longueur de ligne sans toucher à la rangée de
   pastille : la borner sur la carte fausserait les pourcentages du trait.
   ============================================================ */
.ceweb-methode__body{
  display: flex;
  flex-direction: column;
  gap: var(--ceweb-methode-step-gap);
  width: 100%;
  max-width: var(--ceweb-methode-body-max);
  margin-inline: var(--ceweb-methode-mi);
}

/* Ni font-family ni font-size : le titre d'étape prend l'un et l'autre de sa
   balise. Sélecteur long (0,3,0) : `.entry-content h3` (0,1,1) reprendrait
   sinon la couleur et la marge. */
.ceweb-methode .ceweb-methode__card .ceweb-methode__step-title{
  margin: 0;
  color: var(--ceweb-methode-step-title-color);
  font-weight: 600;
  line-height: 1.2;
  transition: color var(--ceweb-methode-hover-duration) var(--ceweb-methode-ease);
}
.ceweb-methode__step-title a{ color: inherit; text-decoration: none; }

.ceweb-methode .ceweb-methode__card .ceweb-methode__text{
  margin: 0;
  color: var(--ceweb-methode-text-color);
  font-size: 16px;
  line-height: 1.65;
}
.ceweb-methode .ceweb-methode__text p{ margin: 0 0 .7em; }
.ceweb-methode .ceweb-methode__text > :first-child{ margin-top: 0; }
.ceweb-methode .ceweb-methode__text > :last-child{ margin-bottom: 0; }

/* Le gras est la seule mise en forme que la maquette demande au milieu d'un
   paragraphe : il garde sa propre couleur et sa propre graisse. Sélecteur long
   pour passer devant une règle de thème sur la balise. */
.ceweb-methode .ceweb-methode__text strong,
.ceweb-methode .ceweb-methode__text b{
  color: var(--ceweb-methode-strong-color);
  font-weight: 700;
}

/* Lien d'étape. `margin-top: auto` aligne les liens sur le bas de la rangée
   quand les paragraphes n'ont pas la même hauteur ; l'écart au-dessus passe par
   un padding, qu'un `auto` n'absorbe pas. */
.ceweb-methode__step-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: var(--ceweb-methode-self);
  margin-top: auto;
  padding-top: var(--ceweb-methode-step-cta-gap);
  color: var(--ceweb-methode-step-cta-color);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: gap .2s var(--ceweb-methode-ease), color var(--ceweb-methode-hover-duration) var(--ceweb-methode-ease);
}
.ceweb-methode__step-cta:hover,
.ceweb-methode__step-cta:focus-visible{ gap: 14px; }

/* Étape entièrement cliquable : un seul lien, celui du titre, dont le ::after
   recouvre la carte. Emboîter l'étape dans un <a> engloutirait le paragraphe
   dans le nom accessible du lien, interminable à l'oreille. */
.ceweb-methode__stretch::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--ceweb-methode-step-radius);
}
.ceweb-methode__stretch:focus-visible{
  outline: 2px solid var(--ceweb-methode-ring);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ============================================================
   Bouton
   ============================================================ */
.ceweb-methode__actions{
  margin-top: var(--ceweb-methode-cta-gap);
  text-align: var(--ceweb-methode-header-align);
}

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

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

   Tout le survol vit sous `.ceweb-methode--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 étape 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.
   ============================================================ */
.ceweb-methode--hover .ceweb-methode__step:hover .ceweb-methode__card,
.ceweb-methode--hover .ceweb-methode__step:focus-within .ceweb-methode__card,
.ceweb-methode__step.is-featured .ceweb-methode__card{
  transform: translateY(calc(-1 * var(--ceweb-methode-hover-lift)));
}
.ceweb-methode--box-card.ceweb-methode--hover .ceweb-methode__step:hover .ceweb-methode__card,
.ceweb-methode--box-card.ceweb-methode--hover .ceweb-methode__step:focus-within .ceweb-methode__card,
.ceweb-methode--box-card .ceweb-methode__step.is-featured .ceweb-methode__card{
  border-color: var(--ceweb-methode-ring);
}

.ceweb-methode--hover .ceweb-methode__step:hover .ceweb-methode__badge,
.ceweb-methode--hover .ceweb-methode__step:focus-within .ceweb-methode__badge,
.ceweb-methode__step.is-featured .ceweb-methode__badge{
  transform:
    translateY(calc(-1 * var(--ceweb-methode-hover-badge-lift)))
    scale(var(--ceweb-methode-hover-badge-scale))
    rotate(var(--ceweb-methode-hover-badge-rotate));
  background: var(--ceweb-methode-badge-bg-hover, var(--ceweb-methode-badge-bg, var(--ceweb-methode-badge-fallback)));
  color: var(--ceweb-methode-badge-color-hover, var(--ceweb-methode-badge-color));
}
.ceweb-methode--hover .ceweb-methode__step:hover .ceweb-methode__badge::after,
.ceweb-methode--hover .ceweb-methode__step:focus-within .ceweb-methode__badge::after,
.ceweb-methode__step.is-featured .ceweb-methode__badge::after{
  opacity: 1;
}

.ceweb-methode--hover .ceweb-methode__step:hover .ceweb-methode__step-title,
.ceweb-methode--hover .ceweb-methode__step:focus-within .ceweb-methode__step-title,
.ceweb-methode__step.is-featured .ceweb-methode__step-title{
  color: var(--ceweb-methode-step-title-color-hover, var(--ceweb-methode-step-title-color));
}

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

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

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

   1. Par défaut, une animation au chargement, décalée d'un rang au suivant
      grâce à `--ceweb-methode-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 `__step`, 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-methode-rise{
  from{
    opacity: 0;
    transform: translateY(var(--ceweb-methode-reveal-shift)) scale(var(--ceweb-methode-reveal-scale));
  }
  to{ opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference){
  .ceweb-methode--reveal .ceweb-methode__eyebrow,
  .ceweb-methode--reveal .ceweb-methode__title,
  .ceweb-methode--reveal .ceweb-methode__subtitle,
  .ceweb-methode--reveal .ceweb-methode__step,
  .ceweb-methode--reveal .ceweb-methode__actions{
    animation: ceweb-methode-rise var(--ceweb-methode-reveal-duration) var(--ceweb-methode-ease) both;
    animation-delay: calc(var(--ceweb-methode-i, 0) * var(--ceweb-methode-reveal-step));
  }

  @supports (animation-timeline: view()){
    .ceweb-methode--reveal .ceweb-methode__eyebrow,
    .ceweb-methode--reveal .ceweb-methode__title,
    .ceweb-methode--reveal .ceweb-methode__subtitle,
    .ceweb-methode--reveal .ceweb-methode__step,
    .ceweb-methode--reveal .ceweb-methode__actions{
      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;
    }
  }

  /* 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-methode--reveal .ceweb-methode__eyebrow,
  .elementor-editor-active .ceweb-methode--reveal .ceweb-methode__title,
  .elementor-editor-active .ceweb-methode--reveal .ceweb-methode__subtitle,
  .elementor-editor-active .ceweb-methode--reveal .ceweb-methode__step,
  .elementor-editor-active .ceweb-methode--reveal .ceweb-methode__actions{
    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-methode__card,
  .ceweb-methode__badge,
  .ceweb-methode__badge::after,
  .ceweb-methode__step-title,
  .ceweb-methode__step-cta,
  .ceweb-methode__cta,
  .ceweb-methode__cta-arrow{
    transition: none !important;
  }
  .ceweb-methode--hover .ceweb-methode__step:hover .ceweb-methode__card,
  .ceweb-methode--hover .ceweb-methode__step:focus-within .ceweb-methode__card,
  .ceweb-methode__step.is-featured .ceweb-methode__card,
  .ceweb-methode--hover .ceweb-methode__step:hover .ceweb-methode__badge,
  .ceweb-methode--hover .ceweb-methode__step:focus-within .ceweb-methode__badge,
  .ceweb-methode__step.is-featured .ceweb-methode__badge,
  .ceweb-methode--hover .ceweb-methode__cta:hover,
  .ceweb-methode--hover .ceweb-methode__cta:focus-visible{
    transform: none;
  }
  .ceweb-methode--hover .ceweb-methode__cta:hover .ceweb-methode__cta-arrow,
  .ceweb-methode--hover .ceweb-methode__cta:focus-visible .ceweb-methode__cta-arrow{
    transform: none;
  }
}