/* ============================================================
   CEWeb Widgets — Constats (icône + grand numéro)

   La section « Comment savoir si le web peut vraiment vous aider ? » du site :
   un en-tête (surtitre, titre dont la fin prend la couleur d'accent,
   sous-titre), puis une rangée de constats. Un constat = une pastille d'icône
   flanquée d'un grand numéro fantôme, un titre, un paragraphe. 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-constats-* posées sur .ceweb-constats 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.

   Onze variables ne sont volontairement **jamais déclarées ici** —
   --ceweb-constats-bg, --ceweb-constats-item-bg, --ceweb-constats-badge-bg,
   --ceweb-constats-badge-bg-hover, --ceweb-constats-icon-color,
   --ceweb-constats-icon-color-hover, --ceweb-constats-number-color,
   --ceweb-constats-number-color-hover, --ceweb-constats-ring-color,
   --ceweb-constats-item-title-color-hover et --ceweb-constats-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 ont donc un défaut vide, ou vivent derrière une `condition`
   — Elementor n'émet rien pour un contrôle de couleur vide.
   ============================================================ */

/* Le bloc réclame toute la largeur de la section. Dans un conteneur flexbox
   Elementor — le défaut depuis 3.6 — un widget est un élément flex en
   `flex: 0 1 auto` : sa largeur suit son contenu, et une grille de trois
   colonnes se calculerait alors sur une boîte déjà rétrécie. Même remède que
   « Engagements » et l'« Accordéon d'images » ; une largeur posée à la main
   dans l'onglet Avancé garde le dessus, son sélecteur portant l'identifiant
   de l'élément. */
.elementor-widget-ceweb_constats{ width: 100%; }

.ceweb-constats{
  width: 100%;

  /* --- 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-constats-columns: 3;
  --ceweb-constats-gap: 40px;
  --ceweb-constats-row-gap: 52px;

  /* `--align` sert de text-align, `--self` en est la traduction pour les
     éléments en boîte (rangée de pastille, lien du constat), 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,
     centré par défaut comme la maquette le demande. */
  --ceweb-constats-align: center;
  --ceweb-constats-self: center;
  --ceweb-constats-mi: auto;
  --ceweb-constats-header-align: center;
  --ceweb-constats-header-mi: auto;

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

  /* --- En-tête ----------------------------------------------- */
  --ceweb-constats-eyebrow-color: var(--theme-palette-color-1, #1A6FFF);
  --ceweb-constats-eyebrow-gap: 18px;
  --ceweb-constats-title-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-constats-title-accent-color: var(--theme-palette-color-1, #1A6FFF);
  --ceweb-constats-title-gap: 18px;
  --ceweb-constats-subtitle-color: var(--theme-palette-color-7, #475569);
  --ceweb-constats-header-max: 760px;
  --ceweb-constats-header-gap: 64px;

  /* --- Constat ------------------------------------------------ */
  --ceweb-constats-item-border-color: var(--theme-palette-color-9, #E2E8F0);
  --ceweb-constats-item-border-width: 1px;
  --ceweb-constats-item-radius: 24px;
  --ceweb-constats-item-padding: 0px;
  --ceweb-constats-item-gap: 12px;
  --ceweb-constats-badge-gap: 26px;
  --ceweb-constats-body-max: 360px;

  /* --- Pastille ----------------------------------------------- */
  --ceweb-constats-badge-size: 88px;
  --ceweb-constats-badge-radius: 999px;
  --ceweb-constats-badge-tint-amount: 12%;
  --ceweb-constats-badge-tint-base: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-constats-badge-solid: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-constats-icon-size: 30px;

  /* --- Grand numéro -------------------------------------------- */
  --ceweb-constats-number-size: 64px;
  --ceweb-constats-number-weight: 600;
  --ceweb-constats-number-tint-amount: 28%;
  --ceweb-constats-number-tint-base: var(--theme-palette-color-11, #FFFFFF);
  /* Écart entre la pastille et le numéro. Il part en marge sur le second
     élément de la rangée, quel que soit l'ordre choisi — c'est PHP qui range
     les deux, pas un row-reverse. Une valeur négative fait mordre le second
     sur le premier ; le défaut sépare franchement les deux, sans quoi le
     chiffre passe derrière la pastille et s'y perd. */
  --ceweb-constats-badge-number-gap: 20px;

  /* --- Textes du constat --------------------------------------- */
  --ceweb-constats-item-title-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-constats-text-color: var(--theme-palette-color-7, #475569);
  --ceweb-constats-strong-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-constats-text-size: 16px;
  --ceweb-constats-item-cta-color: var(--theme-palette-color-1, #1A6FFF);
  --ceweb-constats-item-cta-gap: 14px;

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

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

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

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

  /* Teinte du fond. Déclarée ici, sur la racine, et non sur le constat : c'est
     l'accent du widget qu'elle doit lire, jamais celui d'un constat. 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-constats-bg-tint: #F2F6FF;
}
.ceweb-constats *{ box-sizing: border-box; }

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

/* Quatre remplissages, une classe posée par PHP : couper le fond retire la
   déclaration au lieu de la neutraliser avec une couleur transparente. Le
   défaut est « Aucun » — la maquette pose les constats à même la page. */
.ceweb-constats--fill-tint{ background: var(--ceweb-constats-bg, var(--ceweb-constats-bg-tint)); }
.ceweb-constats--fill-solid{ background: var(--ceweb-constats-bg, var(--ceweb-constats-bg-tint-base)); }

.ceweb-constats__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-constats__header{
  max-width: var(--ceweb-constats-header-max);
  margin: 0 0 var(--ceweb-constats-header-gap);
  margin-inline: var(--ceweb-constats-header-mi);
  text-align: var(--ceweb-constats-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-constats .ceweb-constats__eyebrow{
  margin: 0 0 var(--ceweb-constats-eyebrow-gap);
  color: var(--ceweb-constats-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-constats .ceweb-constats__title{
  margin: 0 0 var(--ceweb-constats-title-gap);
  color: var(--ceweb-constats-title-color);
  line-height: 1.1;
}
.ceweb-constats .ceweb-constats__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-constats .ceweb-constats__title .ceweb-constats__title-accent{
  color: var(--ceweb-constats-title-accent-color);
  font-style: normal;
  font-weight: inherit;
}

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

/* ============================================================
   Rangée de constats

   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-constats .ceweb-constats__items{
  display: grid;
  grid-template-columns: repeat(var(--ceweb-constats-columns), minmax(0, 1fr));
  column-gap: var(--ceweb-constats-gap);
  row-gap: var(--ceweb-constats-row-gap);
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ceweb-constats .ceweb-constats__items .ceweb-constats__item{
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ============================================================
   Constat

   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'arrivée posé sur le même élément que le soulèvement au survol mangerait
   ce soulèvement, sans que rien ne le signale.
   ============================================================ */
.ceweb-constats__card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ceweb-constats-badge-gap);
  height: 100%;
  padding: var(--ceweb-constats-item-padding);
  border-radius: var(--ceweb-constats-item-radius);
  text-align: var(--ceweb-constats-align);
  transition:
    transform var(--ceweb-constats-hover-duration) var(--ceweb-constats-ease),
    background-color var(--ceweb-constats-hover-duration) var(--ceweb-constats-ease),
    border-color var(--ceweb-constats-hover-duration) var(--ceweb-constats-ease),
    box-shadow var(--ceweb-constats-hover-duration) var(--ceweb-constats-ease);

  /* Couleur du halo, teinte de la pastille, teinte du numéro : les trois lisent
     `--ceweb-constats-accent`, que chaque constat peut redéfinir. Elles sont
     donc résolues ici, sur la carte, et non sur la racine — un var() imbriqué
     dans une propriété personnalisée est substitué sur l'élément qui porte la
     déclaration, pas sur celui qui s'en sert plus bas. Posées sur la racine,
     elles figeraient l'accent du widget pour tous les constats. */
  --ceweb-constats-ring: var(--ceweb-constats-ring-color, var(--ceweb-constats-accent));
  --ceweb-constats-badge-tint: #EEF4FF;
  --ceweb-constats-number-tint: #D6E4FF;
}

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

/* Variante encadrée : le constat devient une vraie carte. Sans elle, les
   constats posent directement sur le fond de la page, comme la maquette. */
.ceweb-constats--box-card .ceweb-constats__card{
  background: var(--ceweb-constats-item-bg, var(--theme-palette-color-11, #FFFFFF));
  border: var(--ceweb-constats-item-border-width) solid var(--ceweb-constats-item-border-color);
}

/* ============================================================
   Pastille et grand numéro

   Les deux vivent dans une rangée, dans l'ordre que PHP a choisi. L'écart est
   une marge sur le **second** élément, quel qu'il soit : un `row-reverse`
   aurait inversé l'ordre visuel sans déplacer la marge, qui serait tombée du
   mauvais côté. Négative, la même marge fait mordre le numéro sur la pastille.
   ============================================================ */
.ceweb-constats__badge-row{
  display: flex;
  align-items: center;
  justify-content: var(--ceweb-constats-self);
}
.ceweb-constats__badge-row > * + *{
  margin-left: var(--ceweb-constats-badge-number-gap);
}

/* La pastille passe devant : le numéro est un fantôme posé derrière elle. */
.ceweb-constats__badge{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--ceweb-constats-badge-size);
  height: var(--ceweb-constats-badge-size);
  border-radius: var(--ceweb-constats-badge-radius);
  background: var(--ceweb-constats-badge-bg, var(--ceweb-constats-badge-fallback));
  color: var(--ceweb-constats-icon-color, var(--ceweb-constats-accent));
  transition:
    transform var(--ceweb-constats-hover-duration) var(--ceweb-constats-ease),
    background-color var(--ceweb-constats-hover-duration) var(--ceweb-constats-ease),
    color var(--ceweb-constats-hover-duration) var(--ceweb-constats-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-constats-halo: rgba(26, 111, 255, .14);
}
@supports (color: color-mix(in srgb, red 50%, white)){
  .ceweb-constats__badge{
    --ceweb-constats-halo: color-mix(
      in srgb,
      var(--ceweb-constats-ring) var(--ceweb-constats-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-constats__badge::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 var(--ceweb-constats-hover-ring) var(--ceweb-constats-halo);
  opacity: 0;
  transition: opacity var(--ceweb-constats-hover-duration) var(--ceweb-constats-ease);
  pointer-events: none;
}

/* Deux remplissages, deux classes : la teinte lit l'accent du constat, 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 du constat est connu. */
.ceweb-constats--badge-solid .ceweb-constats__card{ --ceweb-constats-badge-fallback: var(--ceweb-constats-badge-solid); }
.ceweb-constats--badge-tint .ceweb-constats__card{ --ceweb-constats-badge-fallback: var(--ceweb-constats-badge-tint); }

.ceweb-constats__badge i,
.ceweb-constats__badge svg{ display: block; font-size: var(--ceweb-constats-icon-size); line-height: 1; }
/* Sélecteur à trois classes : une règle tenant sur `.ceweb-constats__badge svg`
   (0,1,1) serait à égalité avec celles qu'Elementor pose sur ses icônes en SVG
   en ligne, et sa feuille est chargée après celle du plugin — à égalité, la
   dernière gagne et le curseur « Taille de l'icône » ne ferait plus rien sur
   les SVG. Même piège que « Engagements ». */
.ceweb-constats .ceweb-constats__badge svg{
  width: var(--ceweb-constats-icon-size);
  height: var(--ceweb-constats-icon-size);
  max-width: 100%;
  max-height: 100%;
  fill: currentColor;
}

/* Le grand 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 d'« Étapes — bandes alternées ».

   `user-select: none` et `aria-hidden` en PHP : c'est un ornement, il n'a rien
   à dire ni à donner à sélectionner. */
.ceweb-constats .ceweb-constats__number{
  flex: 0 0 auto;
  font-family: var(--e-global-typography-primary-font-family, Fraunces), Georgia, serif;
  font-size: var(--ceweb-constats-number-size);
  font-weight: var(--ceweb-constats-number-weight);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--ceweb-constats-number-color, var(--ceweb-constats-number-tint));
  user-select: none;
  transition: color var(--ceweb-constats-hover-duration) var(--ceweb-constats-ease);
}

/* ============================================================
   Corps du constat
   ============================================================ */
.ceweb-constats__body{
  display: flex;
  flex-direction: column;
  gap: var(--ceweb-constats-item-gap);
  width: 100%;
  max-width: var(--ceweb-constats-body-max);
  margin-inline: var(--ceweb-constats-mi);
}

/* Ni font-family ni font-size : le titre du constat 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-constats .ceweb-constats__card .ceweb-constats__item-title{
  margin: 0;
  color: var(--ceweb-constats-item-title-color);
  font-weight: 600;
  line-height: 1.25;
  transition: color var(--ceweb-constats-hover-duration) var(--ceweb-constats-ease);
}
.ceweb-constats__item-title a{ color: inherit; text-decoration: none; }

.ceweb-constats .ceweb-constats__card .ceweb-constats__text{
  margin: 0;
  color: var(--ceweb-constats-text-color);
  font-size: var(--ceweb-constats-text-size);
  line-height: 1.65;
}
.ceweb-constats .ceweb-constats__text p{ margin: 0 0 .7em; }
.ceweb-constats .ceweb-constats__text > :first-child{ margin-top: 0; }
.ceweb-constats .ceweb-constats__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-constats .ceweb-constats__text strong,
.ceweb-constats .ceweb-constats__text b{
  color: var(--ceweb-constats-strong-color);
  font-weight: 700;
}

/* Lien du constat. `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-constats__item-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: var(--ceweb-constats-self);
  margin-top: auto;
  padding-top: var(--ceweb-constats-item-cta-gap);
  color: var(--ceweb-constats-item-cta-color);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: gap .2s var(--ceweb-constats-ease), color var(--ceweb-constats-hover-duration) var(--ceweb-constats-ease);
}
.ceweb-constats__item-cta:hover,
.ceweb-constats__item-cta:focus-visible{ gap: 14px; }

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

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

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

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

   Tout le survol vit sous `.ceweb-constats--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 un constat 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-constats--hover .ceweb-constats__item:hover .ceweb-constats__card,
.ceweb-constats--hover .ceweb-constats__item:focus-within .ceweb-constats__card,
.ceweb-constats__item.is-featured .ceweb-constats__card{
  transform: translateY(calc(-1 * var(--ceweb-constats-hover-lift)));
}
.ceweb-constats--box-card.ceweb-constats--hover .ceweb-constats__item:hover .ceweb-constats__card,
.ceweb-constats--box-card.ceweb-constats--hover .ceweb-constats__item:focus-within .ceweb-constats__card,
.ceweb-constats--box-card .ceweb-constats__item.is-featured .ceweb-constats__card{
  border-color: var(--ceweb-constats-ring);
}

.ceweb-constats--hover .ceweb-constats__item:hover .ceweb-constats__badge,
.ceweb-constats--hover .ceweb-constats__item:focus-within .ceweb-constats__badge,
.ceweb-constats__item.is-featured .ceweb-constats__badge{
  transform:
    translateY(calc(-1 * var(--ceweb-constats-hover-badge-lift)))
    scale(var(--ceweb-constats-hover-badge-scale))
    rotate(var(--ceweb-constats-hover-badge-rotate));
  background: var(--ceweb-constats-badge-bg-hover, var(--ceweb-constats-badge-bg, var(--ceweb-constats-badge-fallback)));
  color: var(--ceweb-constats-icon-color-hover, var(--ceweb-constats-icon-color, var(--ceweb-constats-accent)));
}
.ceweb-constats--hover .ceweb-constats__item:hover .ceweb-constats__badge::after,
.ceweb-constats--hover .ceweb-constats__item:focus-within .ceweb-constats__badge::after,
.ceweb-constats__item.is-featured .ceweb-constats__badge::after{
  opacity: 1;
}

/* Le numéro s'assombrit d'un cran à l'état allumé, quand une couleur est
   réglée : sans elle, la déclaration lit la même variable qu'au repos et ne
   change rien. */
.ceweb-constats--hover .ceweb-constats__item:hover .ceweb-constats__number,
.ceweb-constats--hover .ceweb-constats__item:focus-within .ceweb-constats__number,
.ceweb-constats__item.is-featured .ceweb-constats__number{
  color: var(--ceweb-constats-number-color-hover, var(--ceweb-constats-number-color, var(--ceweb-constats-number-tint)));
}

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

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

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

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

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

@media (prefers-reduced-motion: no-preference){
  .ceweb-constats--reveal .ceweb-constats__eyebrow,
  .ceweb-constats--reveal .ceweb-constats__title,
  .ceweb-constats--reveal .ceweb-constats__subtitle,
  .ceweb-constats--reveal .ceweb-constats__item,
  .ceweb-constats--reveal .ceweb-constats__actions{
    animation: ceweb-constats-rise var(--ceweb-constats-reveal-duration) var(--ceweb-constats-ease) both;
    animation-delay: calc(var(--ceweb-constats-i, 0) * var(--ceweb-constats-reveal-step));
  }

  @supports (animation-timeline: view()){
    .ceweb-constats--reveal .ceweb-constats__eyebrow,
    .ceweb-constats--reveal .ceweb-constats__title,
    .ceweb-constats--reveal .ceweb-constats__subtitle,
    .ceweb-constats--reveal .ceweb-constats__item,
    .ceweb-constats--reveal .ceweb-constats__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-constats--reveal .ceweb-constats__eyebrow,
  .elementor-editor-active .ceweb-constats--reveal .ceweb-constats__title,
  .elementor-editor-active .ceweb-constats--reveal .ceweb-constats__subtitle,
  .elementor-editor-active .ceweb-constats--reveal .ceweb-constats__item,
  .elementor-editor-active .ceweb-constats--reveal .ceweb-constats__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-constats__card,
  .ceweb-constats__badge,
  .ceweb-constats__badge::after,
  .ceweb-constats__number,
  .ceweb-constats__item-title,
  .ceweb-constats__item-cta,
  .ceweb-constats__cta,
  .ceweb-constats__cta-arrow{
    transition: none !important;
  }
  .ceweb-constats--hover .ceweb-constats__item:hover .ceweb-constats__card,
  .ceweb-constats--hover .ceweb-constats__item:focus-within .ceweb-constats__card,
  .ceweb-constats__item.is-featured .ceweb-constats__card,
  .ceweb-constats--hover .ceweb-constats__item:hover .ceweb-constats__badge,
  .ceweb-constats--hover .ceweb-constats__item:focus-within .ceweb-constats__badge,
  .ceweb-constats__item.is-featured .ceweb-constats__badge,
  .ceweb-constats--hover .ceweb-constats__cta:hover,
  .ceweb-constats--hover .ceweb-constats__cta:focus-visible{
    transform: none;
  }
  .ceweb-constats--hover .ceweb-constats__cta:hover .ceweb-constats__cta-arrow,
  .ceweb-constats--hover .ceweb-constats__cta:focus-visible .ceweb-constats__cta-arrow{
    transform: none;
  }
}