/* MEETCH — ce qu'Elementor ne sait pas porter. Couleurs, typos et espacements vivent dans le kit.
   Nommage : meetch-u-* utilitaires, meetch-c-* composants, meetch-<nom> sections, variantes en --suffixe.
   Les !important répondent au CSS généré d'Elementor, jamais à une règle de ce fichier.
   Les media queries d'un composant vivent avec lui ; seuls les jetons ont leurs paliers ici. */

/* Échelle */

html {
  font-size: clamp(14px, 0.4167vw + 8px, 16px);
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Jetons */

:root {
  --meetch-u-content-max: 93rem;
  --meetch-u-gutter: clamp(3rem, 11.2vw, 14rem);
  --meetch-w-gutter: clamp(2rem, 8vw, 12rem);
  --meetch-u-section-space: 16vh;
    --meetch-u-section-space-compact: 6vh;
  --meetch-u-duration-fast: 220ms;
  --meetch-u-duration-base: 380ms;
  --meetch-u-duration-slow: 620ms;
  --meetch-u-duration-xslow: 900ms;
  --meetch-u-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --meetch-u-easing-doux: cubic-bezier(0.33, 0, 0.2, 1);
  /* Le kit ne nomme aucun bleu clair : celui-ci éclaircit le Secondaire (#0022F5).
     Une seule valeur à changer si la charte en fixe un. */
  --meetch-u-bleu-clair: #5b7cff;
  /* Composantes RVB du Primaire et de l'Accent pour les rgba() : le kit n'expose que des hex. */
  --meetch-primary-rgb: 1, 3, 64;
  --meetch-accent-rgb: 247, 147, 30;
  /* Descente de la fonte, en em. Deux boîtes à débordement caché tranchent les jambages :
     le mot du titre animé et le rideau meetch-anim-word. Toutes deux s'agrandissent d'autant
     et rendent la place par une marge négative — la ligne ne bouge pas. Une seule valeur. */
  --meetch-u-descente: 0.14em;
  --meetch-anim-distance: 0.7rem;
  --meetch-anim-duration: 700ms;
  --meetch-anim-fade: 520ms;
  --meetch-anim-stagger: 55ms;
  --meetch-anim-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 1366px) {
  :root {
    --meetch-u-gutter: clamp(2rem, 8vw, 12rem);
    --meetch-w-gutter: clamp(1.5rem, 6vw, 10rem);
    --meetch-u-section-space: 15vh;
  }
}

@media (max-width: 1024px) {
  :root {
    --meetch-u-section-space: 8vh;
  }
}

@media (max-width: 767px) {
  :root {
    --meetch-u-section-space: 7.4vh;
  }
}

/* Glyphes posés en CSS : flèche \e906. La police est embarquée dans le thème : le même
   fichier existe dans `uploads/` pour le jeu d'icônes Elementor, mais un déploiement de
   thème sans étage `-Medias` ferait alors disparaître ces glyphes. Voir D-022. */
@font-face {
  font-family: icomeetch;
  src: url("../fonts/icomeetch.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* Réservé aux lecteurs d'écran : le texte sort du flux sans sortir de l'arbre d'accessibilité
   (ni `display: none`, ni `visibility: hidden`, qui le rendraient muet). */
.meetch-u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Colonne de contenu */

.meetch-u-container,
.e-con.meetch-u-container {
  width: 100%;
  max-width: calc(var(--meetch-u-content-max) + 2 * var(--meetch-u-gutter));
  margin-inline: auto;
  padding-inline: var(--meetch-u-gutter);
}

.meetch-u-container.meetch-w-container {
  max-width: calc(var(--meetch-u-content-max) + 2 * var(--meetch-w-gutter));
  padding-inline: var(--meetch-w-gutter);
}

.meetch-u-container > * {
  min-width: 0;
}

/* Texte long (.content-txt-editor sur l'éditeur de texte des pages classiques) : listes à
   puce-flèche et rythme des intertitres. */

.content-txt-editor ul {
  padding-left: 0.8rem;
  padding-bottom: 0.25rem;
}

.content-txt-editor li {
  padding-left: 0.3rem;
  line-height: 1.2rem;
  margin-bottom: 0.25rem;
}

.content-txt-editor li::marker {
  content: "\e906";
  font-family: icomeetch;
  font-size: 0.62rem;
}

.content-txt-editor p,
.content-txt-editor h4,
.content-txt-editor h5,
.content-txt-editor h6 {
  margin-bottom: 0.4rem;
}

.content-txt-editor h4:not(:first-child) {
  margin-top: 1.5rem;
}

/* Rythme vertical : un demi-jeton par bord ; --full-* quand le fond change de couleur. */

.meetch-u-section {
  padding-block: calc(var(--meetch-u-section-space) / 2);
}
.meetch-u-section.section-compact {
  padding-block: calc(var(--meetch-u-section-space-compact) / 2);
}
.meetch-u-section.meetch-hero {
  padding-top: 0;
}

.meetch-u-section.meetch-hero.meetch-hero-page {
  padding-bottom: 0;
}

/* Hero terminal (pages 08, 09) : fond Principal et motif posés dans Elementor, scène api-call.
   La boîte de la scène ne touche pas le bord : un demi-jeton sous le hero. */
.meetch-u-section.meetch-hero.meetch-hero-page.meetch-hero--terminal {
  padding-bottom: calc(var(--meetch-u-section-space) / 2);
}

.meetch-hero--terminal .meetch-c-box.meetch-box-medium {
  background-color: rgba(255, 255, 255, 0.06);
}

/* Ligne de statut : point Yellow puis mots séparés d'un point médian. */
.meetch-c-status-line p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.7rem;
  margin: 0;
}

.meetch-c-status-line p::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--e-global-color-272d331);
}

.meetch-c-status-line span:not(:last-child)::after {
  content: "\00b7";
  margin-left: 0.7rem;
  opacity: 0.5;
}

.meetch-u-section--full-top {
  padding-top: var(--meetch-u-section-space);
}

.meetch-u-section--full-bottom {
  padding-bottom: var(--meetch-u-section-space);
}

.meetch-u-section--flush-top {
  padding-top: 0;
}

.meetch-u-section--flush-bottom {
  padding-bottom: 0;
}

/* Header sticky */

/* Une seule barre : Elementor la fixe (Sticky natif), le thème l'habille au défilement.
   Le seuil est celui de .meetch-scrolled, posée par meetch.js — voir le README. */
.meetch-header {
  transition: background-color var(--meetch-u-duration-base) var(--meetch-u-easing),
    box-shadow var(--meetch-u-duration-base) var(--meetch-u-easing);
}

.meetch-scrolled .meetch-header {
  background: color-mix(in srgb, var(--e-global-color-e25e475, #faf8f0) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 0.5rem 2rem rgba(var(--meetch-primary-rgb),0.08);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .meetch-scrolled .meetch-header {
    background: var(--e-global-color-e25e475, #faf8f0);
  }
}

/* La barre se resserre au défilement : moins de marge, logo plus petit. Le padding et la
   largeur du logo viennent d'Elementor, posés dans une media query — d'où les !important,
   qui sont ici la seule façon de repasser devant sans dupliquer ses points de rupture.
   La transition vit sur l'état de repos pour jouer dans les deux sens. */
.meetch-header > .e-con {
  transition: padding-block var(--meetch-u-duration-base) var(--meetch-u-easing);
}

.meetch-scrolled .meetch-header > .e-con {
  padding-block: 0.7rem !important;
}

.meetch-header .logo-header img {
  transition: max-width var(--meetch-u-duration-base) var(--meetch-u-easing);
}

.meetch-scrolled .meetch-header .logo-header img {
  max-width: 128px !important;
}

/* Le texte du mega menu suit la même logique que le padding : taille posée par Elementor dans
   ses points de rupture. */
.meetch-header .e-n-menu-title-text {
  transition: font-size var(--meetch-u-duration-base) var(--meetch-u-easing);
}

.meetch-scrolled .meetch-header .e-n-menu-title-text {
  font-size: 0.95rem !important;
}

/* Trustpilot du header : le gabarit Horizontal garde la taille de ses étoiles quelle que soit la
   largeur de son iframe (plus étroit, il perd le logo) — on ne peut que le réduire en bloc,
   calé à droite contre le CTA. La boîte garde sa largeur : seul le rendu rétrécit. */
.meetch-c-trustpilot .trustpilot-widget {
  transform: scale(0.85);
  transform-origin: right center;
  transition: transform var(--meetch-u-duration-base) var(--meetch-u-easing);
}

.meetch-scrolled .meetch-header .meetch-c-trustpilot .trustpilot-widget {
  transform: scale(0.75);
}

/* Portables (point de rupture laptop d'Elementor) : un cran de moins ; sous 1025 px le widget est
   masqué dans Elementor. */
@media (max-width: 1366px) {
  .meetch-c-trustpilot .trustpilot-widget {
    transform: scale(0.75);
  }

  .meetch-scrolled .meetch-header .meetch-c-trustpilot .trustpilot-widget {
    transform: scale(0.65);
  }
}

/* Le CTA resserré au défilement part de la variante --min du bouton, un cran plus petit : ses
   valeurs sont plus bas, dans « Boutons ». */

/* Elementor fixe la barre à z-index 99 ; les panneaux du mega menu s'empilent dans son
   contexte et doivent rester au-dessus du contenu. */
.meetch-header.elementor-sticky--active {
  z-index: 1000;
}

/* La barre d'administration occupe déjà les 32 premiers pixels. */
.admin-bar .meetch-header.elementor-sticky--active {
  top: 32px;
}

@media (prefers-reduced-motion: reduce) {
  .meetch-header,
  .meetch-header .e-n-menu-title-text,
  .meetch-c-trustpilot .trustpilot-widget {
    transition: none;
  }
}

/* Mega menu (widget Elementor Pro, un gabarit par onglet) */

/* Le chevron est un <button> : le kit lui appliquait la peau des boutons. */
.e-n-menu .e-n-menu-dropdown-icon {
  background: none;
  border-radius: 0;
}

/* Le panneau se cale sur la colonne de contenu ; « fit to content » le calait sous l'onglet. */
@media (min-width: 1025px) {
  .e-n-menu .e-n-menu-content > .e-con {
    width: min(var(--meetch-u-content-max), 100% - 2 * var(--meetch-u-gutter)) !important;
    margin-inline: auto !important;
  }

  .e-n-menu-content .meetch-u-container {
    padding-inline: 0;
  }
}

/* Fuite de sélecteur entre loop grids imbriquées. Le panneau est une loop grid (l'entrée de
   menu) qui contient la loop grid des cartes, et Elementor ne borne pas les colonnes de ses
   points de rupture au widget qui les porte : `.elementor-grid-laptop-1 .elementor-grid` vise
   *tous* les `.elementor-grid` descendants. Sous 1366 px la grille extérieure impose donc sa
   colonne unique aux cartes — six cartes empilées, icônes géantes, panneau haut de 1160 px.
   Au grand écran la même fuite existe (`.elementor-grid-1 .elementor-grid`), mais
   `.elementor-grid-3` est déclarée après elle à spécificité égale et l'emporte : le desktop
   est juste par accident.
   On rend donc leurs trois colonnes aux cartes sur toute la plage du panneau déroulant,
   1025–1366 px. En dessous le menu passe au burger et le gabarit se tient seul : deux colonnes
   en tablette, une en mobile. Le sélecteur est plus spécifique que celui d'Elementor, aucun
   !important n'est nécessaire. */
@media (min-width: 1025px) and (max-width: 1366px) {
  .meetch-mm-panel .e-loop-item .elementor-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Sous 1025 px le gabarit remonte le titre de la colonne de gauche à 2,6 rem : un réglage pensé
   pour un panneau empilé, alors que le burger garde cette colonne à 28 %. On y laisse la valeur
   du laptop. */
@media (min-width: 768px) and (max-width: 1024px) {
  .e-n-menu-content .mega-menu-dropdown > .e-con-inner > .e-con:first-child .elementor-heading-title {
    font-size: 1.8rem;
  }
}

/* Apparition du panneau. Elementor ferme le panneau avec `display: none` : une transition
   n'aurait rien à interpoler, alors qu'une animation redémarre à chaque fois que l'élément
   revient à l'affichage. Elle ne joue donc qu'à l'ouverture, et jamais au chargement de la
   page — le panneau y est déjà en display: none. */
@media (prefers-reduced-motion: no-preference) {
  .e-n-menu .e-n-menu-content > .e-con {
    animation: meetch-megamenu-entree var(--meetch-u-duration-base) var(--meetch-u-easing) both;
  }
}

@keyframes meetch-megamenu-entree {
  from {
    opacity: 0;
    transform: translateY(-0.7rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Carte du panneau au survol. Les fonds viennent d'Elementor : d'où les !important. */
.card-menu:is(:hover, :focus-within) {
  background: var(--e-global-color-e25e475, #faf8f0) !important;
}

.card-menu:is(:hover, :focus-within) .box-icone-menu {
  background: #fff !important;
}

.card-menu:is(:hover, :focus-within) .box-titre-menu .elementor-heading-title {
  color: var(--e-global-color-secondary, #0022f5) !important;
}

/* L'icône garde ses couleurs : elle ne fait que jouer son animation au survol de la carte
   (widget réglé sur « Au survol », relais du survol par meetch.js). */

/* Menu mobile (popup MENU-MOBILE, sous-menus SmartMenus) */

.menu-mobile .elementor-nav-menu {
  overflow: hidden;
}

.menu-mobile li a {
  line-height: 2.6rem !important;
}

.menu-mobile .sub-menu {
  margin-bottom: 0.9rem !important;
}

.menu-mobile .elementor-nav-menu--dropdown a.highlighted {
  font-weight: 600 !important;
}

.menu-mobile .elementor-nav-menu--dropdown a:not(.highlighted) {
  color: #fff !important;
}

.menu-mobile .elementor-nav-menu--dropdown a.highlighted .sub-arrow {
  font-size: 1.9rem;
  padding: 6px;
  transform: rotate(-0.25turn);
}

.menu-mobile .sub-menu li {
  padding: 0 !important;
  margin: 0 !important;
}

.menu-mobile .sub-menu li a {
  display: flex;
  align-items: flex-start;
  line-height: 1.45rem !important;
  font-size: 1.2rem !important;
  font-weight: 200 !important;
  border-inline-start: 0;
  padding: 0 0 0.52rem 0 !important;
}

.menu-mobile .sub-menu li a::before {
  content: "\e906";
  margin-right: 0.8rem;
  font-family: icomeetch;
  font-size: 0.45rem;
}

.menu-mobile .elementor-nav-menu .sub-arrow {
  font-size: 1.7rem;
  margin-block-end: -8px;
  margin-block-start: 0;
  padding: 8px 0 8px 8px;
}

/* Retour en haut */

/* button. : le kit stylise les <button> nus. */
button.meetch-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--e-global-color-secondary, #0022f5);
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  opacity: 0;
  transform: translateY(0.75rem);
  visibility: hidden;
  transition: opacity var(--meetch-u-duration-fast) var(--meetch-u-easing),
    transform var(--meetch-u-duration-fast) var(--meetch-u-easing),
    background-color var(--meetch-u-duration-base) var(--meetch-u-easing),
    border-color var(--meetch-u-duration-base) var(--meetch-u-easing),
    visibility 0s var(--meetch-u-duration-fast);
}

.meetch-scrolled button.meetch-to-top {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

/* Le rond se remplit de bleu clair, la flèche passe en blanc. */
button.meetch-to-top:is(:hover, :focus-visible) {
  background-color: var(--meetch-u-bleu-clair);
  border-color: var(--meetch-u-bleu-clair);
}

/* Rotation sur le ::before, glissade sur le span : deux transforms distincts. */
button.meetch-to-top .meetch-to-top__arrow {
  display: block;
  font-family: icomeetch;
  font-weight: normal;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--e-global-color-secondary, #0022f5);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translateY(0);
  transition: transform var(--meetch-u-duration-base) var(--meetch-u-easing),
    color var(--meetch-u-duration-base) var(--meetch-u-easing);
}

button.meetch-to-top .meetch-to-top__arrow::before {
  content: "\e906";
  display: block;
  transform: rotate(-90deg);
}

button.meetch-to-top:is(:hover, :focus-visible) .meetch-to-top__arrow {
  transform: translateY(-3px);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  button.meetch-to-top {
    transition: opacity var(--meetch-u-duration-fast) ease;
    transform: none;
  }

  button.meetch-to-top .meetch-to-top__arrow,
  button.meetch-to-top:is(:hover, :focus-visible) .meetch-to-top__arrow {
    transition: none;
    transform: none;
  }
}

/* Boutons */

.meetch-c-button .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  border: 1px solid transparent;
  border-radius: 999px;
  position: relative;
  transition: color var(--meetch-u-duration-base) var(--meetch-u-easing),
    background-color var(--meetch-u-duration-base) var(--meetch-u-easing),
    box-shadow var(--meetch-u-duration-base) var(--meetch-u-easing),
    border-color var(--meetch-u-duration-base) var(--meetch-u-easing);
}

/* Le CTA du header au défilement, un cran plus petit : quatre classes pour passer devant le
   réglage de widget d'Elementor. */
.meetch-scrolled .meetch-header .btn-menu .elementor-button {
  min-height: 1rem;
  font-size: 0.9rem;
  padding: 0.36rem 1rem 0.6rem 1.25rem;
}

.meetch-c-button .elementor-button > * {
  position: relative;
  z-index: 1;
}

/* Un background-image ne se transitionne pas : le dégradé vit sur un ::before dont l'opacité fond. */
.meetch-c-button--primary .elementor-button,
.meetch-c-button--secondary .elementor-button {
  color: var(--e-global-color-primary, #010340);
  background-color: var(--e-global-color-24359eb, #fff);
  background-image: none;
}

.meetch-c-button--primary .elementor-button::before,
.meetch-c-button--secondary .elementor-button::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background-color: var(--e-global-color-accent, #f7931e);
  background-image: linear-gradient(90deg, var(--e-global-color-272d331, #f8e81e) 0%, var(--e-global-color-accent, #f7931e) 100%);
  transition: opacity var(--meetch-u-duration-base) var(--meetch-u-easing);
}

.meetch-c-button--primary .elementor-button:hover {
  border-color: var(--e-global-color-accent, #f7931e);
}

.meetch-c-button--primary .elementor-button:hover::before {
  opacity: 0;
}

.meetch-c-button--secondary .elementor-button {
  border-color: rgba(var(--meetch-accent-rgb),0.55);
  box-shadow: 0 0.5rem 1.25rem rgba(var(--meetch-accent-rgb),0.16);
}

.meetch-c-button--secondary .elementor-button::before {
  opacity: 0;
}

.meetch-c-button--secondary .elementor-button:hover {
  border-color: transparent;
}

.meetch-c-button--secondary .elementor-button:hover::before {
  opacity: 1;
}

.meetch-c-button--blue .elementor-button {
  color: #fff;
  background: var(--e-global-color-secondary, #0022f5);
}

.meetch-c-button .elementor-button:hover {
  box-shadow: 0 0.625rem 1.75rem rgba(var(--meetch-accent-rgb),0.32);
}

.meetch-c-button--blue .elementor-button:hover {
  color: var(--e-global-color-secondary, #0022f5);
  background: var(--e-global-color-24359eb, #fff);
  border-color: var(--e-global-color-secondary, #0022f5);
  box-shadow: 0 0.625rem 1.75rem rgba(0, 34, 245, 0.24);
}

.meetch-c-button .elementor-button:focus-visible,
button.meetch-to-top:focus-visible {
  outline: 3px solid var(--e-global-color-secondary, #0022f5);
  outline-offset: 3px;
}

.meetch-c-button--arrow .elementor-button::after {
  content: "\e906";
  flex: 0 0 auto;
  margin-left: 0.625rem;
  font-family: icomeetch;
  font-weight: normal;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--e-global-color-primary, #010340);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  z-index: 1;
  transform: translateX(0);
  transition: transform var(--meetch-u-duration-base) var(--meetch-u-easing),
    color var(--meetch-u-duration-base) var(--meetch-u-easing);
}

.meetch-c-button--arrow .elementor-button:hover::after {
  transform: translateX(0.25rem);
}

/* CTA compact du header : la flèche suit la taille du texte (après --arrow pour l'emporter). */
.meetch-scrolled .meetch-header .btn-menu .elementor-button::after {
  font-size: 0.9rem;
}

.meetch-c-button--primary.meetch-c-button--arrow .elementor-button:hover::after,
.meetch-c-button--secondary.meetch-c-button--arrow .elementor-button::after {
  color: var(--e-global-color-accent, #f7931e);
}

.meetch-c-button--secondary.meetch-c-button--arrow .elementor-button:hover::after {
  color: var(--e-global-color-primary, #010340);
}

.meetch-c-button--blue.meetch-c-button--arrow .elementor-button::after {
  color: var(--e-global-color-24359eb, #fff);
}

.meetch-c-button--blue.meetch-c-button--arrow .elementor-button:hover::after {
  color: var(--e-global-color-secondary, #0022f5);
}

/* Peau -light : blanc sans fond, prévue pour la colonne navy du mega menu (pas encore
   posée en base). Écrite après toutes les autres peaux et après --arrow : l'ordre suffit
   à les couvrir, les !important ne répondent plus qu'aux réglages de widget d'Elementor. */
.meetch-c-button-light .elementor-button {
  background: none !important;
  color: var(--e-global-color-24359eb, #fff) !important;
}

.meetch-c-button-light .elementor-button::after {
  margin-left: 0.6rem !important;
  font-size: 0.86rem !important;
  color: #fff !important;
}

.meetch-c-button-light .elementor-button:hover,
.meetch-c-button-light .elementor-button:focus {
  box-shadow: none !important;
  border-color: transparent !important;
}

@media (max-width: 1024px) {
  .btn-menu .elementor-button {
    padding-left: 1.5rem !important;
    padding-right: 1rem !important;
  }

  .btn-menu .elementor-button-text {
    min-height: 1.2rem;
    font-size: 1.02rem !important;
  }

  .btn-menu .elementor-button::after {
    font-size: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .meetch-c-button .elementor-button,
  .meetch-c-button--primary .elementor-button::before,
  .meetch-c-button--secondary .elementor-button::before,
  .meetch-c-button--arrow .elementor-button::after {
    transition-duration: var(--meetch-u-duration-fast);
  }

  .meetch-c-button--arrow .elementor-button:hover::after {
    transform: none;
  }
}

/* Boîtes */

.meetch-c-box {
  background: var(--e-global-color-24359eb, #fff);
  padding: 1.8rem 2rem;
  border-radius: 0.8rem;
}

.meetch-c-box.meetch-box-large {
  padding: 3.4rem;
  color: #fff;
}

.meetch-c-box.meetch-box-medium {
  padding: 3rem;
}

.meetch-c-box.meetch-box-small {
  padding: 1.6rem 1.8rem;
}

.meetch-c-box.meetch-box-xsmall {
  padding: 0.5rem;
  border-radius: 0.35rem !important;
}

@media (max-width: 767px) {
  .meetch-c-box {
    padding: 1.6rem !important;
    border-radius: 0.6rem !important;
  }

  .meetch-c-box.meetch-box-large {
    padding: 2.4rem 2.2rem !important;
  }

  .meetch-c-box.meetch-box-medium {
    padding: 1.8rem !important;
  }

  .meetch-c-box.meetch-box-small {
    padding: 1.2rem !important;
  }
}

/* Lien texte (meetch-c-textlink) : widget Titre lié, souligné fin, flèche icomeetch. Secondaire sur
   fond clair, blanc sur Principal. */
.elementor-widget.meetch-c-textlink {
  width: auto;
  color: var(--e-global-color-secondary);
}

.elementor-widget.meetch-c-textlink .elementor-heading-title,
.elementor-widget.meetch-c-textlink .elementor-heading-title a {
  color: inherit;
}

.elementor-widget.meetch-c-textlink .elementor-heading-title a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(var(--meetch-accent-rgb), 0);
  transition: text-decoration-color var(--meetch-u-duration-fast) var(--meetch-u-easing);
}

.elementor-widget.meetch-c-textlink .elementor-heading-title a::after {
  content: "\e906";
  display: inline-block;
  margin-left: 0.45em;
  font-family: icomeetch;
  font-size: 0.72em;
  transition: transform var(--meetch-u-duration-fast) var(--meetch-u-easing);
}

.elementor-widget.meetch-c-textlink .elementor-heading-title a:hover {
  text-decoration-color: currentColor;
}

.elementor-widget.meetch-c-textlink .elementor-heading-title a:hover::after {
  transform: translateX(0.2em);
}

.elementor-widget.meetch-c-textlink .elementor-heading-title a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.meetch-hero--terminal .elementor-widget.meetch-c-textlink,
.meetch-c-box--wide .elementor-widget.meetch-c-textlink {
  color: var(--e-global-color-24359eb);
}

/* Encadré large (meetch-c-box--wide, DSC §13 règle 4) : tout fond Principal du contenu. Le fond
   déborde des gouttières sans toucher les bords ; le padding-inline vaut exactement le débord, le
   contenu reste sur la colonne. À poser avec `meetch-c-box meetch-box-large`. */

.meetch-c-box.meetch-c-box--wide {
  --meetch-u-wide-bleed: calc(var(--meetch-u-gutter) - clamp(1.5rem, 3.5vw, 4.5rem));
  width: calc(100% + 2 * var(--meetch-u-wide-bleed));
  max-width: none;
  margin-inline: calc(-1 * var(--meetch-u-wide-bleed));
  padding: clamp(3.4rem, 6vw, 5.4rem) var(--meetch-u-wide-bleed);
}

@media (max-width: 1024px) {
  .meetch-c-box.meetch-c-box--wide {
    --meetch-u-wide-bleed: calc(0.5 * (var(--meetch-u-gutter) - clamp(1.5rem, 3.5vw, 4.5rem)));
  }
}

@media (max-width: 767px) {
  .meetch-c-box.meetch-c-box--wide {
    width: 100%;
    margin-inline: 0;
    padding: 2.8rem 1.6rem !important;
  }
}

.meetch-c-box .meetch-c-numb-label {
  color: var(--e-global-color-accent);
  margin-top: -0.8em;
  margin-left: -0.8em;
}

/* Hors boîte (lignes Benefits page 11) : Principal à 32 %, pas de décalage négatif. */
.meetch-c-numb-label--plain {
  color: rgba(var(--meetch-primary-rgb), 0.32);
  font-weight: 900;
  font-size: 1.4rem;
}

/* Ajouré (lignes Benefits page 12) : même traitement que --plain, en contour au lieu du plein. */
.meetch-c-numb-label--outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--meetch-primary-rgb), 0.32);
  font-weight: 900;
  font-size: 1.4rem;
}

/* Linen (DSC) : contraste d'une boîte imbriquée dans une boîte blanche — scène flow page 11. */
.meetch-c-box.meetch-c-box--linen {
  background: var(--e-global-color-e25e475, #faf8f0);
}

/* Blocs animés (widgets HTML [data-meetch]) */

/* Le widget ne porte que le balisage : le style vit ici, l'animation dans meetch.js, qui pose
   .run sur un bloc à l'écran. Les tailles internes sont en cqw : le contexte de conteneur vit
   sur .cq ou .stage, pas sur le bloc, qui deviendrait insensible à la largeur de son parent
   Elementor et s'effondrerait. */

/* Un conteneur Elementor en colonne non étirée réduit le widget à zéro : on l'étire. */
.elementor-widget-html:has(> [data-meetch]) {
  align-self: stretch;
  width: 100%;
}

[data-meetch] {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: transparent;
  font-family: neulis-sans, system-ui, sans-serif;
  contain: paint;
}

[data-meetch] * {
  box-sizing: border-box;
}

[data-meetch] .cq {
  container-type: inline-size;
  position: absolute;
  inset: 0;
}

[data-meetch="key-language"] {
  --meetch-globe-k: 1.2;
  aspect-ratio: 442 / 280;
}

/* Les trois blocs de l'accordéon AI partagent une boîte de même hauteur (--meetch-expand-media)
   à partir de 768 px : leur hauteur vient alors de la carte, pas de leur contenu. Leur
   `aspect-ratio` ne sert qu'en mobile, où la carte ne leur en donne aucune. */

[data-meetch="languages"],
[data-meetch="refund-methods"] {
  aspect-ratio: 915 / 400;
}

/* Globes (key-language, languages) : canvas peint par meetch.js, bulle qui change de langue.
   Mêmes proportions à un facteur près : --meetch-globe-k met le bloc étroit à l'échelle. */

[data-meetch-globe] canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

[data-meetch-globe] .bulle {
  position: absolute;
  top: 20%;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: clamp(5px, calc(1.51cqw * var(--meetch-globe-k, 1)), 8px);
  padding: clamp(5px, calc(1.32cqw * var(--meetch-globe-k, 1)), 7px)
    clamp(10px, calc(2.83cqw * var(--meetch-globe-k, 1)), 15px)
    clamp(5px, calc(1.32cqw * var(--meetch-globe-k, 1)), 7px)
    clamp(7px, calc(1.89cqw * var(--meetch-globe-k, 1)), 10px);
  border: 1px solid #efece0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 14px 26px -16px rgba(var(--meetch-primary-rgb), 0.3);
  color: var(--e-global-color-primary, #010340);
  font-size: clamp(11px, calc(2.45cqw * var(--meetch-globe-k, 1)), 13px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity 0.4s ease, transform 0.4s var(--meetch-u-easing);
}

[data-meetch-globe] .bulle.vue {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

[data-meetch-globe] .flag {
  font-size: 1.3em;
  line-height: 1;
}

/* max-width: none, sinon le max-width: 100 % d'Elementor écrase le drapeau dans le span flex. */
[data-meetch-globe] .flag img {
  width: 1em;
  height: 1em;
  max-width: none;
  vertical-align: -0.1em;
}

/* Remboursement instantané, prix dynamique, discussion : trois scènes sur une même grille, la
   mesure à gauche et le dessin à droite, empilées sous 400 px de large. Elles vivent sur le
   bleu de la carte ouverte (sur mobile, la carte l'est toujours) : texte blanc, cartes claires,
   accents jaune-orange.

   `.cq` est un conteneur de taille (`size`) : la hauteur de la boîte est la vraie contrainte
   (98 à 160 px), les corps suivent donc `cqh`, bornés par `clamp`. La scène est un enfant de
   `.cq` : un conteneur ne peut pas lire ses propres unités ni ses propres requêtes.

   Tout ce qui bouge passe par `transform` et `opacity` : ni `left`, ni `box-shadow`, ni
   `filter` animés. L'état de base est l'état final — c'est lui qu'affiche le mouvement réduit.

   Chaque scène joue un temps fort une fois, sous `.play` (posée par meetch.js à l'arrivée à
   l'écran et à l'ouverture de la carte), puis ne garde que des respirations lentes. Les
   animations d'entrée remplissent `both` : elles tiennent l'état de départ pendant leur délai,
   que `--meetch-scene-delai` allonge quand la carte doit d'abord finir de s'ouvrir. Les chiffres
   `[data-meetch-compte]` comptent en JS sur la même courbe (easeOutCubic). */

[data-meetch="instant-refund"],
[data-meetch="pricing"],
[data-meetch="chat"] {
  --meetch-scene-sortie: cubic-bezier(0.33, 1, 0.68, 1);
  --meetch-scene-pose: cubic-bezier(0.22, 1, 0.36, 1);
  aspect-ratio: 2 / 1;
  color: #fff;
}

[data-meetch="instant-refund"] .cq,
[data-meetch="pricing"] .cq,
[data-meetch="chat"] .cq {
  container: meetch-scene / size;
}

[data-meetch] .scene {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  column-gap: clamp(12px, 5.5cqw, 32px);
  row-gap: clamp(6px, 11cqh, 14px);
  line-height: 1;
}

[data-meetch] .scene i {
  font-style: normal;
}

[data-meetch]:not(.run) .scene *,
[data-meetch]:not(.run) .scene *::before,
[data-meetch]:not(.run) .scene *::after {
  animation-play-state: paused;
}

[data-meetch] .metric {
  grid-area: metric;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(4px, 7cqh, 9px);
  min-width: 0;
}

[data-meetch] .metric-label {
  font-size: clamp(8px, 9.5cqh, 11px);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.64);
}

[data-meetch] .metric-value {
  display: flex;
  align-items: flex-end;
  gap: 0.14em;
  font-size: clamp(28px, 44cqh, 66px);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Chiffres qui comptent : fonte cursive du kit. `min-width` (posé par meetch.js, en em) garde la
   largeur du chiffre final, le texte autour ne bouge pas pendant le comptage. */
[data-meetch] [data-meetch-compte] {
  display: inline-block;
  font-family: var(--e-global-typography-accent-font-family, "neulis-cursive"), cursive;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

@container meetch-scene (max-width: 400px) {
  [data-meetch] .scene {
    column-gap: 12px;
    row-gap: 8px;
  }

  [data-meetch] .metric {
    gap: 5px;
  }

  [data-meetch] .metric-value {
    font-size: clamp(22px, 24cqh, 30px);
  }
}

/* Remboursement instantané : la jauge se remplit, la carte « payout_approved » se pose. */

[data-meetch="instant-refund"] .scene {
  grid-template-areas: "metric track" "metric card";
}

[data-meetch="instant-refund"] .bolt {
  width: 0.26em;
  aspect-ratio: 1;
  margin-bottom: 0.06em;
  background: linear-gradient(180deg, #f8e81e, #f7931e);
  clip-path: polygon(42% 0, 100% 0, 67% 38%, 91% 38%, 27% 100%, 42% 58%, 14% 58%);
}

[data-meetch="instant-refund"] .track {
  grid-area: track;
  position: relative;
  height: clamp(6px, 8cqh, 9px);
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

/* La jauge glisse au lieu de s'étirer : son bout arrondi reste rond, et la lueur qui la suit
   n'est qu'un pseudo-élément accroché à ce bout — plus de second élément animé en `left`. */
[data-meetch="instant-refund"] .fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #f8e81e, #f6d72a 45%, #f7931e);
}

[data-meetch="instant-refund"].play .fill {
  animation: meetch-instant-fill 2.4s var(--meetch-scene-sortie) var(--meetch-scene-delai, 0ms) both;
}

[data-meetch="instant-refund"] .fill::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(20px, 7cqw, 36px);
  height: 100%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  opacity: 0.4;
}

[data-meetch="instant-refund"].play .fill::after {
  animation: meetch-instant-glow 2.4s ease-out var(--meetch-scene-delai, 0ms) both,
    meetch-instant-lueur 3.2s ease-in-out calc(var(--meetch-scene-delai, 0ms) + 2.4s) infinite alternate;
}

[data-meetch="instant-refund"] .card {
  grid-area: card;
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.6cqw, 14px);
  min-width: 0;
  height: clamp(34px, 46cqh, 54px);
  padding: 0 clamp(10px, 3.4cqw, 18px);
  overflow: hidden;
  border-radius: clamp(9px, 11cqh, 12px);
  background: #fff;
  box-shadow: 0 12px 26px -16px rgba(1, 3, 64, 0.55);
  color: #010340;
}

[data-meetch="instant-refund"].play .card {
  animation: meetch-scene-bulle 0.8s var(--meetch-scene-pose) calc(var(--meetch-scene-delai, 0ms) + 1.4s) both,
    meetch-scene-flotte 5s ease-in-out calc(var(--meetch-scene-delai, 0ms) + 2.6s) infinite;
}

[data-meetch="instant-refund"] .card::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: 0;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(0, 34, 245, 0.12), transparent);
  transform: translateX(-130%) rotate(12deg);
}

[data-meetch="instant-refund"].play .card::after {
  animation: meetch-instant-sheen 6s ease-in-out calc(var(--meetch-scene-delai, 0ms) + 2s) infinite;
}

/* aspect-ratio + flex 0 0 auto : la pastille reste ronde, quoi qu'il arrive au libellé. */
[data-meetch="instant-refund"] .check {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(20px, 28cqh, 30px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f8e81e;
  font-size: clamp(11px, 16cqh, 17px);
  font-weight: 800;
}

[data-meetch="instant-refund"].play .check {
  animation: meetch-instant-check 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--meetch-scene-delai, 0ms) + 1.85s) both;
}

[data-meetch="instant-refund"].play .bolt {
  animation: meetch-instant-bolt 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--meetch-scene-delai, 0ms) + 2.2s) both;
}

[data-meetch="instant-refund"] .status {
  min-width: 0;
  overflow: hidden;
  font-size: clamp(11px, 14cqh, 15px);
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

[data-meetch="instant-refund"] .amount {
  margin-left: auto;
  font-size: clamp(12px, 16cqh, 17px);
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@container meetch-scene (max-width: 400px) {
  [data-meetch="instant-refund"] .scene {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "metric" "track" "card";
  }

  [data-meetch="instant-refund"] .card {
    height: 36px;
  }
}

/* La jauge se remplit au rythme du compteur de latence, puis la carte se pose et la pastille
   claque. Ensuite, seuls la lueur, le reflet et un léger flottement continuent. */
@keyframes meetch-instant-fill {
  from { transform: translateX(-100%); }
  to { transform: none; }
}

@keyframes meetch-instant-glow {
  from { opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 0.85; }
  to { opacity: 0.4; }
}

@keyframes meetch-instant-lueur {
  from { opacity: 0.4; }
  to { opacity: 0.9; }
}

@keyframes meetch-instant-check {
  from { opacity: 0; transform: scale(0.4) rotate(-25deg); }
  to { opacity: 1; transform: none; }
}

@keyframes meetch-instant-bolt {
  0%, 100% { transform: none; }
  45% { transform: scale(1.4) rotate(-6deg); }
}

@keyframes meetch-instant-sheen {
  0% { transform: translateX(-130%) rotate(12deg); }
  20%, 100% { transform: translateX(420%) rotate(12deg); }
}

/* Entrée d'une carte ou d'une bulle, et flottement lent une fois posée : communs aux scènes. */
@keyframes meetch-scene-bulle {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes meetch-scene-flotte {
  0%, 100% { transform: none; }
  50% { transform: translateY(-2px); }
}

/* Prix dynamique : douze barres qui se reforment, un repère qui balaie l'axe. */

[data-meetch="pricing"] .scene {
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "metric rev" "metric chart";
  align-content: stretch;
  padding-top: clamp(2px, 4cqh, 6px);
}

[data-meetch="pricing"] .rev {
  grid-area: rev;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  height: clamp(18px, 24cqh, 28px);
  padding: 0 clamp(7px, 2.2cqw, 11px);
  border-radius: clamp(6px, 8cqh, 9px);
  background: rgba(255, 255, 255, 0.14);
  font-size: clamp(9px, 11.5cqh, 12px);
  font-weight: 700;
  white-space: nowrap;
}

[data-meetch="pricing"].play .rev {
  animation: meetch-scene-bulle 0.7s var(--meetch-scene-pose) calc(var(--meetch-scene-delai, 0ms) + 0.8s) both;
}

[data-meetch="pricing"] .up {
  color: #f8e81e;
}

[data-meetch="pricing"] .chart {
  grid-area: chart;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(3px, 1.2cqw, 8px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  background: repeating-linear-gradient(to top, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 25%);
}

/* Le reflet est un second fond de la barre : plus de pseudo-élément ni d'ombre par barre. */
[data-meetch="pricing"] .b {
  flex: 1 1 0;
  min-width: 4px;
  max-width: 31px;
  height: var(--h);
  border-radius: 5px 5px 1px 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 38%),
    linear-gradient(180deg, #f8e81e, #f7931e);
  transform-origin: 50% 100%;
}

/* Les barres montent l'une après l'autre, puis respirent chacune à son rythme — `alternate` :
   pas de retour brusque en fin de cycle. */
[data-meetch="pricing"].play .b {
  animation: meetch-pricing-pousse 1s var(--meetch-scene-pose) calc(var(--meetch-scene-delai, 0ms) + 0.15s + var(--i) * 60ms) both,
    meetch-pricing-respire 4.8s ease-in-out calc(var(--meetch-scene-delai, 0ms) + 1.9s + var(--i) * 140ms) infinite alternate;
}

/* Hauteur de repos et amplitude de respiration : le plus haut sommet reste sous 77 % du graphe. */
[data-meetch="pricing"] .b:nth-child(1) { --i: 0; --h: 27%; --s: 1.18; }
[data-meetch="pricing"] .b:nth-child(2) { --i: 1; --h: 18%; --s: 1.3; }
[data-meetch="pricing"] .b:nth-child(3) { --i: 2; --h: 36%; --s: 0.86; }
[data-meetch="pricing"] .b:nth-child(4) { --i: 3; --h: 49%; --s: 1.12; }
[data-meetch="pricing"] .b:nth-child(5) { --i: 4; --h: 29%; --s: 0.82; }
[data-meetch="pricing"] .b:nth-child(6) { --i: 5; --h: 43%; --s: 1.14; }
[data-meetch="pricing"] .b:nth-child(7) { --i: 6; --h: 26%; --s: 1.25; }
[data-meetch="pricing"] .b:nth-child(8) { --i: 7; --h: 61%; --s: 0.9; }
[data-meetch="pricing"] .b:nth-child(9) { --i: 8; --h: 46%; --s: 1.15; }
[data-meetch="pricing"] .b:nth-child(10) { --i: 9; --h: 24%; --s: 1.28; }
[data-meetch="pricing"] .b:nth-child(11) { --i: 10; --h: 72%; --s: 0.93; }
[data-meetch="pricing"] .b:nth-child(12) { --i: 11; --h: 20%; --s: 1.35; }

/* Le repère est porté par une piste pleine largeur qui glisse : un pourcentage de translation
   s'y lit en largeur de graphe, sans animer `left`. */
[data-meetch="pricing"] .marker {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transform: translateX(60%);
}

[data-meetch="pricing"].play .marker {
  animation: meetch-pricing-marker 2.4s var(--meetch-scene-sortie) var(--meetch-scene-delai, 0ms) both;
}

/* Le halo qui s'élargit est un double du point : l'ombre du point, elle, ne bouge pas. */
[data-meetch="pricing"] .marker::before,
[data-meetch="pricing"] .marker::after {
  content: "";
  position: absolute;
  bottom: clamp(3px, 6cqh, 6px);
  left: 0;
  width: clamp(7px, 9cqh, 9px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
}

[data-meetch="pricing"] .marker::after {
  box-shadow: 0 0 0 clamp(4px, 6cqh, 6px) rgba(255, 255, 255, 0.2);
}

[data-meetch="pricing"] .marker::before {
  opacity: 0;
}

[data-meetch="pricing"].play .marker::before {
  animation: meetch-pricing-halo 2.4s ease-out calc(var(--meetch-scene-delai, 0ms) + 2.4s) infinite;
}

@container meetch-scene (max-width: 400px) {
  [data-meetch="pricing"] .scene {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "metric rev" "chart chart";
    padding-top: 0;
  }

  [data-meetch="pricing"] .rev {
    align-self: center;
  }
}

@keyframes meetch-pricing-pousse {
  from { transform: scaleY(0.04); }
  to { transform: none; }
}

@keyframes meetch-pricing-respire {
  from { transform: none; }
  to { transform: scaleY(var(--s)); }
}

/* Le repère part de la gauche et se pose sur le prix optimal quand le compteur s'arrête. */
@keyframes meetch-pricing-marker {
  from { opacity: 0; transform: translateX(4%); }
  15% { opacity: 1; }
  to { opacity: 1; transform: translateX(60%); }
}

@keyframes meetch-pricing-halo {
  from { opacity: 0.7; transform: none; }
  to { opacity: 0; transform: scale(3.2); }
}

/* Variante de fond clair (page 03, hero en boîte blanche) : même géométrie, même mouvement ; les
   teintes blanches passent en Principal, le repère en Secondaire. Portée par l'attribut
   data-meetch-fond="clair", comme data-meetch-globe porte la couleur des globes. */
[data-meetch="pricing"][data-meetch-fond="clair"] {
  color: var(--e-global-color-primary);
}

[data-meetch="pricing"][data-meetch-fond="clair"] .metric-label {
  color: rgba(var(--meetch-primary-rgb), 0.56);
}

[data-meetch="pricing"][data-meetch-fond="clair"] .rev {
  background: var(--e-global-color-e25e475);
}

[data-meetch="pricing"][data-meetch-fond="clair"] .chart {
  border-bottom-color: rgba(var(--meetch-primary-rgb), 0.16);
  background: repeating-linear-gradient(to top, rgba(var(--meetch-primary-rgb), 0.06) 0 1px, transparent 1px 25%);
}

[data-meetch="pricing"][data-meetch-fond="clair"] .marker::before,
[data-meetch="pricing"][data-meetch-fond="clair"] .marker::after {
  background: var(--e-global-color-secondary);
}

[data-meetch="pricing"][data-meetch-fond="clair"] .marker::after {
  box-shadow: 0 0 0 clamp(4px, 6cqh, 6px) color-mix(in srgb, var(--e-global-color-secondary) 20%, transparent);
}

/* Discussion : la question arrive, l'assistant tape dans sa propre bulle, puis la réponse
   la remplace — les points ne se superposent plus au texte. */

[data-meetch="chat"] .scene {
  grid-template-areas: "agent thread";
  align-content: stretch;
}

[data-meetch="chat"] .agent {
  grid-area: agent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(6px, 9cqh, 10px);
}

[data-meetch="chat"] .avatar {
  display: grid;
  place-items: center;
  width: clamp(30px, 44cqh, 50px);
  aspect-ratio: 1;
  border-radius: clamp(9px, 11cqh, 12px);
  background: linear-gradient(145deg, #f8e81e, #f7931e);
  box-shadow: 0 10px 24px -12px rgba(247, 147, 30, 0.6);
  color: #010340;
  font-size: clamp(14px, 20cqh, 22px);
  font-weight: 700;
  animation: meetch-chat-avatar 4.2s ease-in-out infinite;
}

[data-meetch="chat"] .online {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: clamp(8px, 9cqh, 10px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.64);
}

[data-meetch="chat"] .online::before,
[data-meetch="chat"] .online::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f8e81e;
}

/* Le halo est un double du point qui grandit et s'efface : une ombre animée repeindrait. */
[data-meetch="chat"] .online::after {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -3.5px;
  opacity: 0;
  animation: meetch-chat-pulse 2.4s ease-out infinite;
}

[data-meetch="chat"] .thread {
  grid-area: thread;
  position: relative;
  min-width: 0;
}

[data-meetch="chat"] :is(.user, .typing, .reply) {
  position: absolute;
  box-shadow: 0 10px 24px -14px rgba(1, 3, 64, 0.5);
}

[data-meetch="chat"] .user {
  top: 4%;
  right: 0;
  max-width: 100%;
  padding: clamp(6px, 8cqh, 10px) clamp(10px, 3cqw, 16px);
  overflow: hidden;
  border-radius: 12px 12px 3px 12px;
  background: #faf8f0;
  color: #010340;
  font-size: clamp(11px, 13cqh, 15px);
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
  transform-origin: 100% 100%;
}

/* La question arrive, l'assistant tape, puis la réponse se pose et ses chiffres comptent. */
[data-meetch="chat"].play .user {
  animation: meetch-scene-bulle 0.7s var(--meetch-scene-pose) calc(var(--meetch-scene-delai, 0ms) + 0.1s) both;
}

[data-meetch="chat"] :is(.typing, .reply) {
  bottom: 4%;
  left: 0;
  border-radius: 12px 12px 12px 3px;
  background: #010340;
  transform-origin: 0 100%;
}

[data-meetch="chat"] .typing {
  display: flex;
  align-items: center;
  gap: 4px;
  height: clamp(24px, 30cqh, 34px);
  padding: 0 clamp(10px, 3cqw, 14px);
  opacity: 0;
}

[data-meetch="chat"].play .typing {
  animation: meetch-chat-typing 1s ease-out calc(var(--meetch-scene-delai, 0ms) + 0.7s) both;
}

[data-meetch="chat"] .typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  animation: meetch-chat-dot 0.72s ease-in-out infinite alternate;
}

[data-meetch="chat"] .typing i:nth-child(2) {
  animation-delay: 0.12s;
}

[data-meetch="chat"] .typing i:nth-child(3) {
  animation-delay: 0.24s;
}

[data-meetch="chat"] .reply {
  max-width: 100%;
  padding: clamp(7px, 9cqh, 12px) clamp(10px, 3.2cqw, 18px);
  font-size: clamp(10px, 12.5cqh, 14px);
  line-height: 1.35;
}

[data-meetch="chat"].play .reply {
  animation: meetch-scene-bulle 0.7s var(--meetch-scene-pose) calc(var(--meetch-scene-delai, 0ms) + 1.55s) both;
}

[data-meetch="chat"] .reply strong {
  font-weight: 700;
  color: #f8e81e;
}

[data-meetch="chat"] .cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: #f8e81e;
  animation: meetch-chat-blink 1s steps(1, end) infinite;
}

@container meetch-scene (max-width: 400px) {
  [data-meetch="chat"] .online {
    display: none;
  }
}

@keyframes meetch-chat-avatar {
  0%, 100% { transform: none; }
  50% { transform: scale(1.04); }
}

@keyframes meetch-chat-pulse {
  0% { opacity: 0.6; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(3.4); }
}

@keyframes meetch-chat-typing {
  0% { opacity: 0; transform: translateY(8px) scale(0.94); }
  25%, 75% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: scale(0.98); }
}

@keyframes meetch-chat-dot {
  from { opacity: 0.35; transform: translateY(0); }
  to { opacity: 1; transform: translateY(-3px); }
}

@keyframes meetch-chat-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Moyens de remboursement : deux rangées de cartes (construites par meetch.js) qui défilent en
   sens contraires, fondu sur les bords, arrêt sous le curseur. */

[data-meetch="refund-methods"] .defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

[data-meetch="refund-methods"] .stage {
  container-type: inline-size;
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: clamp(10px, 2.4cqw, 13px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

[data-meetch="refund-methods"] .row {
  overflow: hidden;
}

/* Deux allures plutôt qu'une seule jouée à l'envers : les rangées ne se retrouvent jamais en phase. */
[data-meetch="refund-methods"] .track {
  display: flex;
  width: max-content;
  animation: meetch-refund-scroll 14s linear infinite paused;
  will-change: transform;
}

[data-meetch="refund-methods"] .row:nth-child(2) .track {
  animation-duration: 16s;
  animation-direction: reverse;
}

[data-meetch="refund-methods"].run .track {
  animation-play-state: running;
}

[data-meetch="refund-methods"] .stage:hover .track {
  animation-play-state: paused;
}

[data-meetch="refund-methods"] .group {
  display: flex;
  gap: clamp(7px, 2.38cqw, 10px);
  padding-right: clamp(7px, 2.38cqw, 10px);
}

[data-meetch="refund-methods"] .card {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: clamp(5px, 1.9cqw, 8px);
  width: clamp(84px, 28cqw, 118px);
  padding: clamp(8px, 2.6cqw, 11px) clamp(9px, 2.85cqw, 12px);
  border: 1px solid #efece0;
  border-radius: clamp(11px, 3cqw, 16px);
  background: #fff;
  box-shadow: 0 12px 22px -18px rgba(var(--meetch-primary-rgb), 0.25);
  color: #05053f;
  transition: box-shadow 0.28s var(--meetch-u-easing), border-color 0.28s var(--meetch-u-easing);
}

[data-meetch="refund-methods"] .card:hover {
  z-index: 2;
  border-color: #cdd4ff;
  box-shadow: 0 16px 30px -18px rgba(var(--meetch-primary-rgb), 0.3);
}

[data-meetch="refund-methods"] .icon {
  display: grid;
  place-items: center;
  width: clamp(18px, 5.7cqw, 24px);
  height: clamp(18px, 5.7cqw, 24px);
}

[data-meetch="refund-methods"] .icon svg {
  width: clamp(15px, 4.75cqw, 20px);
  height: clamp(15px, 4.75cqw, 20px);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-meetch="refund-methods"] .label {
  font-size: clamp(10px, 2.97cqw, 12.5px);
  font-weight: 700;
  line-height: 1.3;
}

@keyframes meetch-refund-scroll {
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-meetch-globe] .bulle {
    opacity: 1;
    transition: none;
  }

  [data-meetch="refund-methods"] .card {
    transition: none;
  }

  [data-meetch="refund-methods"] .track {
    animation: none;
  }

  /* `!important` : les pseudo-éléments et `.typing i` des scènes passent devant en spécificité. */
  [data-meetch] .scene *,
  [data-meetch] .scene *::before,
  [data-meetch] .scene *::after {
    animation: none !important;
  }

  [data-meetch="api-call"] *,
  [data-meetch="api-call"] *::before,
  [data-meetch="api-call"] *::after,
  [data-meetch="flow"] *,
  [data-meetch="flow"] *::before,
  [data-meetch="flow"] *::after {
    animation: none !important;
  }

  [data-meetch="chat"] .cursor {
    display: none;
  }
}

/* Scène api-call (pages 08 et 09, hero) : un appel d'API en flux, sans cadre de ratio. Sous .play,
   le JSON se tape ligne par ligne, un curseur Accent clignote sur la dernière, la réponse monte
   depuis le bas et le compteur arrive aux millisecondes (meetch.js). Rejouée au survol. L'état de
   base est l'état final : c'est lui qu'affiche le mouvement réduit. Pile monospace du DSC. */

[data-meetch="api-call"] {
  --meetch-scene-pose: cubic-bezier(0.22, 1, 0.36, 1);
  --meetch-api-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--e-global-color-24359eb);
  font-size: var(--e-global-typography-79ba738-font-size);
  line-height: var(--e-global-typography-79ba738-line-height);
}

[data-meetch="api-call"] code {
  padding: 0;
  background: none;
  color: inherit;
  font-family: var(--meetch-api-mono);
  font-size: inherit;
}

[data-meetch="api-call"] .head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

[data-meetch="api-call"] .method {
  flex: none;
  padding: 0.22rem 0.48rem;
  border-radius: 0.3rem;
  background-color: var(--e-global-color-secondary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.1;
}

[data-meetch="api-call"] .path {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-meetch="api-call"] .env {
  flex: none;
  margin-left: auto;
}

[data-meetch="api-call"] .json {
  display: flex;
  flex-direction: column;
  padding-block: 1rem;
  border-block: 1px solid rgba(255, 255, 255, 0.12);
}

/* Une ligne par <code> : pas de <pre>, dont les retours du widget ajoutaient des lignes vides. */
[data-meetch="api-call"] .json .l {
  display: block;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.78rem;
  line-height: 1.7;
  white-space: pre;
}

[data-meetch="api-call"] .response {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.5rem;
  background-color: var(--e-global-color-secondary);
}

[data-meetch="api-call"] .check {
  position: relative;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background-color: var(--e-global-color-272d331);
}

[data-meetch="api-call"] .check::after {
  content: "";
  position: absolute;
  top: 0.22rem;
  left: 0.39rem;
  width: 0.28rem;
  height: 0.52rem;
  border: solid var(--e-global-color-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

[data-meetch="api-call"] .status {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 600;
}

[data-meetch="api-call"] .status .note {
  font-weight: 400;
  opacity: 0.64;
}

[data-meetch="api-call"] .ms {
  flex: none;
  font-family: var(--meetch-api-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

/* Rang des lignes : 180 ms de décalage, huit lignes au plus. */
[data-meetch="api-call"] .l:nth-child(2) { --l: 1; }
[data-meetch="api-call"] .l:nth-child(3) { --l: 2; }
[data-meetch="api-call"] .l:nth-child(4) { --l: 3; }
[data-meetch="api-call"] .l:nth-child(5) { --l: 4; }
[data-meetch="api-call"] .l:nth-child(6) { --l: 5; }
[data-meetch="api-call"] .l:nth-child(7) { --l: 6; }
[data-meetch="api-call"] .l:nth-child(8) { --l: 7; }

[data-meetch="api-call"].play .json .l {
  animation: meetch-api-frappe 0.36s steps(18, end) calc(var(--meetch-scene-delai, 0ms) + 0.15s + var(--l, 0) * 180ms) both;
}

/* Curseur : invisible hors animation (état de base et mouvement réduit). */
[data-meetch="api-call"] .json .l:last-child::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1.1em;
  margin-left: 0.15em;
  vertical-align: -0.2em;
  background-color: var(--e-global-color-accent);
  opacity: 0;
}

[data-meetch="api-call"].play .json .l:last-child::after {
  animation: meetch-api-curseur 1s steps(1, end) calc(var(--meetch-scene-delai, 0ms) + 1.6s) infinite;
}

[data-meetch="api-call"].play .response {
  animation: meetch-scene-bulle 0.7s var(--meetch-scene-pose) calc(var(--meetch-scene-delai, 0ms) + 1.6s) both;
}

[data-meetch="api-call"]:not(.run) *,
[data-meetch="api-call"]:not(.run) *::before,
[data-meetch="api-call"]:not(.run) *::after {
  animation-play-state: paused;
}

@keyframes meetch-api-frappe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes meetch-api-curseur {
  0% { opacity: 1; }
  50% { opacity: 0; }
}

@media (max-width: 767px) {
  [data-meetch="api-call"] .json .l {
    font-size: 0.7rem;
  }

  [data-meetch="api-call"] .path {
    font-size: 0.74rem;
  }
}

/* Séquence (meetch-c-sequence, page 08) : cinq nœuds reliés. La mise en page vit sous la classe,
   le mouvement sous [data-meetch="flow"].run, sans JS : un point Accent parcourt le trait en 2,4 s,
   chaque marque pulse à son passage, le nœud Meetch reste allumé. Sous 767 px, rail vertical. */

.meetch-c-sequence {
  --meetch-sequence-mark: 3.2rem;
  --meetch-sequence-dot: 0.65rem;
  --meetch-sequence-rule: rgba(var(--meetch-primary-rgb), 0.16);
  color: var(--e-global-color-primary);
}

.meetch-c-sequence__label {
  margin-bottom: 1.4rem;
  color: rgba(var(--meetch-primary-rgb), 0.56);
  font-size: var(--e-global-typography-36738fe-font-size);
  font-weight: var(--e-global-typography-36738fe-font-weight);
  letter-spacing: var(--e-global-typography-36738fe-letter-spacing);
  line-height: 1;
  text-transform: uppercase;
}

.meetch-c-sequence__rail {
  position: relative;
}

/* Piste du centre de la première marque au centre de la dernière (10 % → 90 %). */
.meetch-c-sequence__track {
  position: absolute;
  top: calc(var(--meetch-sequence-mark) / 2 - var(--meetch-sequence-dot) / 2);
  right: 10%;
  left: 10%;
  height: var(--meetch-sequence-dot);
  overflow: hidden;
}

.meetch-c-sequence__track::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  margin-top: -1px;
  background-color: var(--meetch-sequence-rule);
}

.meetch-c-sequence__runner {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
}

.meetch-c-sequence__runner::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--meetch-sequence-dot);
  height: var(--meetch-sequence-dot);
  border-radius: 50%;
  background-color: var(--e-global-color-accent);
}

.meetch-c-sequence__nodes {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.meetch-c-sequence__node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  text-align: center;
}

/* Point Accent fixe en bout de chaque lien, contre la marque suivante. */
.meetch-c-sequence__node:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--meetch-sequence-mark) / 2 - var(--meetch-sequence-dot) / 2);
  left: calc(150% - var(--meetch-sequence-mark) / 2 - var(--meetch-sequence-dot) - 0.15rem);
  width: var(--meetch-sequence-dot);
  height: var(--meetch-sequence-dot);
  border-radius: 50%;
  background-color: var(--e-global-color-accent);
}

.meetch-c-sequence__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--meetch-sequence-mark);
  height: var(--meetch-sequence-mark);
  border: 1px solid var(--meetch-sequence-rule);
  border-radius: 50%;
  background-color: var(--e-global-color-24359eb);
  font-family: var(--e-global-typography-47c5a43-font-family), sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
}

.meetch-c-sequence__node--meetch .meetch-c-sequence__mark {
  border-color: var(--e-global-color-primary);
  background-color: var(--e-global-color-primary);
  color: var(--e-global-color-24359eb);
  box-shadow: 0 0 0 0.35rem rgba(var(--meetch-accent-rgb), 0.22);
}

.meetch-c-sequence__node--meetch .meetch-c-sequence__mark::before {
  content: "\e906";
  font-family: icomeetch;
  font-size: 1rem;
  font-weight: 400;
}

.meetch-c-sequence__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.meetch-c-sequence__name {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
}

.meetch-c-sequence__sub {
  color: rgba(var(--meetch-primary-rgb), 0.64);
  font-size: 0.78rem;
  line-height: 1.35;
}

.meetch-c-sequence__sub code {
  padding: 0;
  background: none;
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  white-space: nowrap;
}

[data-meetch="flow"].run .meetch-c-sequence__runner {
  animation: meetch-flow-course 2.4s linear infinite;
}

[data-meetch="flow"].run .meetch-c-sequence__mark {
  animation: meetch-flow-pouls 2.4s var(--meetch-u-easing) infinite;
}

[data-meetch="flow"].run .meetch-c-sequence__node:nth-child(2) .meetch-c-sequence__mark { animation-delay: 0.6s; }
[data-meetch="flow"].run .meetch-c-sequence__node:nth-child(4) .meetch-c-sequence__mark { animation-delay: 1.8s; }
[data-meetch="flow"].run .meetch-c-sequence__node:nth-child(5) .meetch-c-sequence__mark { animation-delay: 2.35s; }

/* Le nœud Meetch reste allumé : pas de pulsation, son halo est fixe. */
[data-meetch="flow"].run .meetch-c-sequence__node--meetch .meetch-c-sequence__mark {
  animation: none;
}

@keyframes meetch-flow-course {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes meetch-flow-pouls {
  0% { transform: none; box-shadow: 0 0 0 0 rgba(var(--meetch-accent-rgb), 0.45); }
  12% { transform: scale(1.08); box-shadow: 0 0 0 0.45rem rgba(var(--meetch-accent-rgb), 0); }
  24%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(var(--meetch-accent-rgb), 0); }
}

@media (max-width: 767px) {
  .meetch-c-sequence__track,
  .meetch-c-sequence__node:not(:last-child)::after {
    display: none;
  }

  .meetch-c-sequence__rail::before {
    content: "";
    position: absolute;
    top: calc(var(--meetch-sequence-mark) / 2);
    bottom: calc(var(--meetch-sequence-mark) / 2);
    left: calc(var(--meetch-sequence-mark) / 2);
    width: 2px;
    margin-left: -1px;
    background-color: var(--meetch-sequence-rule);
  }

  .meetch-c-sequence__nodes {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1rem;
  }

  .meetch-c-sequence__node {
    flex-direction: row;
    gap: 0.9rem;
    text-align: left;
  }
}

/* Scène checkout (page 01, hero) : un récapitulatif de commande en flux, sans cadre de ratio.
   Sous .play, le curseur glisse sur YES et clique, la pastille passe au dégradé, la ligne
   « Protected » se dépose depuis le bas et le total compte de €98.00 à €102.90. L'état de base
   est l'état final, curseur masqué : c'est lui qu'affiche le mouvement réduit. Tailles et
   teintes du kit ; le filet reprend celui des scènes de la Home. */

[data-meetch="checkout"] {
  --meetch-scene-pose: cubic-bezier(0.22, 1, 0.36, 1);
  --meetch-checkout-rule: #efece0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--meetch-checkout-rule);
  font-family: var(--e-global-typography-79ba738-font-family), sans-serif;
  font-size: var(--e-global-typography-79ba738-font-size);
  font-weight: 400;
  line-height: var(--e-global-typography-79ba738-line-height);
  color: var(--e-global-color-primary);
}

[data-meetch="checkout"] b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

[data-meetch="checkout"] .label {
  font-size: var(--e-global-typography-36738fe-font-size);
  font-weight: var(--e-global-typography-36738fe-font-weight);
  line-height: 1;
  letter-spacing: var(--e-global-typography-36738fe-letter-spacing);
  text-transform: uppercase;
  color: rgba(var(--meetch-primary-rgb), 0.56);
}

[data-meetch="checkout"] .head,
[data-meetch="checkout"] .line,
[data-meetch="checkout"] .cover,
[data-meetch="checkout"] .total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

[data-meetch="checkout"] .line {
  align-items: baseline;
  padding: 0.45rem 0 0.6rem;
  border-bottom: 1px solid var(--meetch-checkout-rule);
}

[data-meetch="checkout"] .line span {
  color: rgba(var(--meetch-primary-rgb), 0.72);
}

[data-meetch="checkout"] .cover {
  padding: 0.75rem 0.9rem;
  border-radius: 0.6rem;
  background: var(--e-global-color-e25e475);
}

[data-meetch="checkout"] .offer {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

[data-meetch="checkout"] .offer b {
  font-size: 1rem;
  line-height: 1.2;
}

[data-meetch="checkout"] .offer span {
  color: rgba(var(--meetch-primary-rgb), 0.64);
}

[data-meetch="checkout"] .toggle {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  padding: 0.2rem;
  border-radius: 999px;
  background: var(--e-global-color-24359eb);
}

[data-meetch="checkout"] .yes,
[data-meetch="checkout"] .no {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 1rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}

[data-meetch="checkout"] .yes {
  position: relative;
  isolation: isolate;
}

[data-meetch="checkout"] .yes::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--e-global-color-272d331) 0%, var(--e-global-color-accent) 100%);
}

[data-meetch="checkout"] .no {
  padding: 0 0.9rem;
  color: rgba(var(--meetch-primary-rgb), 0.44);
}

[data-meetch="checkout"] .cursor {
  position: absolute;
  top: 1.3rem;
  left: 1.5rem;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  pointer-events: none;
}

[data-meetch="checkout"] .cursor svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--e-global-color-primary);
  stroke: var(--e-global-color-24359eb);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

[data-meetch="checkout"] .protected {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--e-global-color-secondary) 18%, transparent);
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--e-global-color-secondary) 4%, transparent);
  color: var(--e-global-color-secondary);
}

[data-meetch="checkout"] .protected b {
  margin-left: auto;
}

[data-meetch="checkout"] .check {
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-meetch="checkout"] .total {
  align-items: baseline;
  padding-top: 0.55rem;
  border-top: 1px solid var(--meetch-checkout-rule);
}

[data-meetch="checkout"] .sum {
  font-size: 1.35rem;
  line-height: 1.2;
}

[data-meetch="checkout"]:not(.run) *,
[data-meetch="checkout"]:not(.run) *::before {
  animation-play-state: paused;
}

[data-meetch="checkout"].play .cursor {
  animation: meetch-checkout-curseur 1.6s var(--meetch-scene-pose) calc(var(--meetch-scene-delai, 0ms) + 0.2s) both;
}

[data-meetch="checkout"].play .yes::before {
  animation: meetch-checkout-oui 0.45s ease-out calc(var(--meetch-scene-delai, 0ms) + 1.2s) both;
}

[data-meetch="checkout"].play .protected {
  animation: meetch-checkout-pose 0.7s var(--meetch-scene-pose) calc(var(--meetch-scene-delai, 0ms) + 1.45s) both;
}

@keyframes meetch-checkout-curseur {
  0% { opacity: 0; transform: translate3d(3.2rem, 2.2rem, 0); }
  20% { opacity: 1; }
  55% { transform: none; }
  65% { transform: scale(0.86); }
  78% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}

@keyframes meetch-checkout-oui {
  from { opacity: 0; transform: scale(0.7); }
}

@keyframes meetch-checkout-pose {
  from { opacity: 0; transform: translate3d(0, 0.9rem, 0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-meetch="checkout"] *,
  [data-meetch="checkout"] *::before {
    animation: none !important;
  }
}

/* Parcours (meetch-c-journey) : liste d'étapes Elementor + scène `journey` (widget HTML).
   Rangées `meetch-c-journey__row` filetées ; la rangée de l'étape affichée reçoit `--on`
   (meetch.js), qui allume sa pastille numérotée `meetch-c-tile-row__num`. */

.e-con.meetch-c-journey__row {
  padding: 1.25rem 0;
  border-top: 1px solid rgba(var(--meetch-primary-rgb), 0.12);
}

.e-con.meetch-c-journey__row:last-child {
  border-bottom: 1px solid rgba(var(--meetch-primary-rgb), 0.12);
}

.meetch-c-journey__row .elementor-widget.meetch-c-tile-row__num {
  transition: background-color var(--meetch-u-duration-base) var(--meetch-u-easing), border-color var(--meetch-u-duration-base) var(--meetch-u-easing), color var(--meetch-u-duration-base) var(--meetch-u-easing);
}

[data-meetch="journey"] {
  --meetch-scene-pose: cubic-bezier(0.22, 1, 0.36, 1);
  max-width: 21rem;
  margin-inline: auto 0;
  color: var(--e-global-color-primary);
}

[data-meetch="journey"] .phone {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.35rem;
  border: 1px solid rgba(var(--meetch-primary-rgb), 0.16);
  border-radius: 1.8rem;
  background: var(--e-global-color-24359eb);
  overflow: hidden;
}

[data-meetch="journey"] .notch {
  width: 2.6rem;
  height: 0.28rem;
  margin-inline: auto;
  border-radius: 1rem;
  background: rgba(var(--meetch-primary-rgb), 0.16);
}

[data-meetch="journey"] .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.74rem;
}

[data-meetch="journey"] .count {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
}

[data-meetch="journey"] .bar {
  height: 0.22rem;
  border-radius: 1rem;
  background: rgba(var(--meetch-primary-rgb), 0.1);
  overflow: hidden;
}

[data-meetch="journey"] .bar i {
  display: block;
  width: calc(var(--step, 3) * 25%);
  height: 100%;
  background: var(--e-global-color-secondary);
  transition: width var(--meetch-u-duration-slow) var(--meetch-scene-pose);
}

[data-meetch="journey"] .screen {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 0.95rem;
  border-radius: 0.5rem;
  background: var(--e-global-color-e25e475);
  font-size: 0.7rem;
  transition: background-color var(--meetch-u-duration-base) var(--meetch-u-easing), color var(--meetch-u-duration-base) var(--meetch-u-easing);
}

[data-meetch="journey"] .screen .label {
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.56;
}

[data-meetch="journey"] .screen b {
  font-size: 0.8rem;
}

[data-meetch="journey"] .screen.is-on {
  background: var(--e-global-color-secondary);
  color: rgba(255, 255, 255, 0.86);
}

[data-meetch="journey"] .screen.is-on b {
  color: var(--e-global-color-24359eb);
}

[data-meetch="journey"] .foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.2rem -1.35rem -1.35rem;
  padding: 0.8rem 1.35rem;
  background: var(--e-global-color-primary);
  color: var(--e-global-color-24359eb);
  font-size: 0.76rem;
}

[data-meetch="journey"] .foot b {
  margin-left: auto;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

[data-meetch="journey"] .check {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  fill: var(--e-global-color-272d331);
  stroke: var(--e-global-color-primary);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1024px) {
  [data-meetch="journey"] {
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-meetch="journey"] *,
  .meetch-c-journey__row,
  .meetch-c-journey__row .elementor-widget.meetch-c-tile-row__num {
    transition: none !important;
  }
}

/* Scène dashboard (page 03, Real-time dashboard) : trois tuiles en flux, sans ratio ni `.cq`,
   posées sur l'encadré large Principal. Sous .play, les tuiles se déposent en cascade, les chiffres
   comptent depuis zéro (meetch.js), la courbe se trace, les barres montent, la jauge se remplit ;
   le point Live pulse ensuite, en pause hors écran. L'état de base est l'état final : c'est lui
   qu'affichent l'absence de JS et le mouvement réduit. Tailles internes hors échelle du kit
   admises (DSC §13, règle 9). */

[data-meetch="dashboard"] {
  --meetch-scene-pose: cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 34rem;
  margin-left: auto;
  color: var(--e-global-color-24359eb);
}

[data-meetch="dashboard"] .tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 52%);
  grid-template-areas: "data viz";
  align-items: center;
  column-gap: 1.4rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.04);
}

[data-meetch="dashboard"] .tile:nth-child(1) { --i: 0; }
[data-meetch="dashboard"] .tile:nth-child(2) { --i: 1; }
[data-meetch="dashboard"] .tile:nth-child(3) { --i: 2; }

[data-meetch="dashboard"] .claims {
  grid-template-columns: minmax(0, 1fr) auto;
}

[data-meetch="dashboard"] .data {
  grid-area: data;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

[data-meetch="dashboard"] .label,
[data-meetch="dashboard"] .live {
  font-size: var(--e-global-typography-36738fe-font-size);
  font-weight: var(--e-global-typography-36738fe-font-weight);
  line-height: 1;
  letter-spacing: var(--e-global-typography-36738fe-letter-spacing);
  text-transform: uppercase;
  color: var(--e-global-color-ba2c384);
}

/* Fonte cursive et min-width : règle commune [data-meetch] [data-meetch-compte]. */
[data-meetch="dashboard"] .value {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

[data-meetch="dashboard"] .curve,
[data-meetch="dashboard"] .bars {
  grid-area: viz;
  width: 100%;
  height: 4.6rem;
}

/* viewBox élargi de 4 unités : le point de fin n'est plus rogné. */
[data-meetch="dashboard"] .curve {
  display: block;
}

[data-meetch="dashboard"] .curve polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-meetch="dashboard"] .curve .line {
  stroke: color-mix(in srgb, var(--e-global-color-secondary) 50%, var(--e-global-color-24359eb));
  stroke-width: 1.8;
}

[data-meetch="dashboard"] .curve .ref {
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1.4;
}

[data-meetch="dashboard"] .curve .point {
  fill: var(--e-global-color-accent);
}

[data-meetch="dashboard"] .bars {
  display: flex;
  align-items: flex-end;
  gap: 0.34rem;
}

[data-meetch="dashboard"] .bars i {
  flex: 1 1 0;
  height: var(--h);
  border-radius: 0.15rem 0.15rem 0 0;
  background: rgba(255, 255, 255, var(--a, 0.22));
  transform-origin: 50% 100%;
}

[data-meetch="dashboard"] .bars i:nth-child(1) { --j: 0; --h: 34%; }
[data-meetch="dashboard"] .bars i:nth-child(2) { --j: 1; --h: 48%; --a: 0.26; }
[data-meetch="dashboard"] .bars i:nth-child(3) { --j: 2; --h: 42%; }
[data-meetch="dashboard"] .bars i:nth-child(4) { --j: 3; --h: 66%; --a: 0.34; }

[data-meetch="dashboard"] .bars i:nth-child(5) {
  --j: 4;
  --h: 80%;
  background: color-mix(in srgb, var(--e-global-color-secondary) 50%, var(--e-global-color-24359eb));
}

[data-meetch="dashboard"] .bars i:nth-child(6) {
  --j: 5;
  --h: 100%;
  background: linear-gradient(180deg, var(--e-global-color-272d331) 0%, var(--e-global-color-accent) 100%);
}

[data-meetch="dashboard"] .gauge {
  display: block;
  width: 14rem;
  max-width: 100%;
  height: 0.42rem;
  margin-top: 0.2rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

[data-meetch="dashboard"] .gauge i {
  display: block;
  width: 72%;
  height: 100%;
  border-radius: inherit;
  background: var(--e-global-color-accent);
  transform-origin: 0 50%;
}

[data-meetch="dashboard"] .live {
  grid-area: viz;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* Point Live en Yellow du kit : le Secondaire du DSC tombe à 2,3:1 sur Principal. */
[data-meetch="dashboard"] .dot {
  position: relative;
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--e-global-color-272d331);
}

/* Le halo est un double du point qui grandit et s'efface, comme le repère de `pricing`. */
[data-meetch="dashboard"] .dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  opacity: 0;
}

[data-meetch="dashboard"]:not(.run) *,
[data-meetch="dashboard"]:not(.run) *::before {
  animation-play-state: paused;
}

[data-meetch="dashboard"].play .tile {
  animation: meetch-scene-bulle 0.7s var(--meetch-scene-pose) calc(var(--meetch-scene-delai, 0ms) + var(--i) * 150ms) both;
}

[data-meetch="dashboard"].play .curve {
  animation: meetch-dashboard-trace 1.2s var(--meetch-scene-pose) calc(var(--meetch-scene-delai, 0ms) + 0.5s) both;
}

[data-meetch="dashboard"].play .bars i {
  animation: meetch-pricing-pousse 1s var(--meetch-scene-pose) calc(var(--meetch-scene-delai, 0ms) + 0.65s + var(--j) * 60ms) both;
}

[data-meetch="dashboard"].play .gauge i {
  animation: meetch-dashboard-jauge 1.2s var(--meetch-scene-pose) calc(var(--meetch-scene-delai, 0ms) + 0.8s) both;
}

[data-meetch="dashboard"].play .dot::before {
  animation: meetch-pricing-halo 2s ease-out calc(var(--meetch-scene-delai, 0ms) + 1.9s) infinite;
}

/* La courbe se découvre de gauche à droite : un clip-path joué une fois (1,2 s, ~250 × 74 px).
   Exception assumée au « transform et opacity seuls » ; stroke-dashoffset repeindrait autant. */
@keyframes meetch-dashboard-trace {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes meetch-dashboard-jauge {
  from { transform: scaleX(0); }
}

@media (max-width: 1024px) {
  [data-meetch="dashboard"] {
    margin-left: 0;
  }
}

@media (max-width: 767px) {
  [data-meetch="dashboard"] {
    gap: 0.7rem;
    max-width: none;
  }

  [data-meetch="dashboard"] .tile {
    grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
    column-gap: 0.7rem;
    padding: 1.2rem 1.3rem;
  }

  [data-meetch="dashboard"] .claims {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  [data-meetch="dashboard"] .value {
    font-size: 2rem;
  }

  [data-meetch="dashboard"] .curve,
  [data-meetch="dashboard"] .bars {
    height: 3.4rem;
  }

  [data-meetch="dashboard"] .bars {
    gap: 0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-meetch="dashboard"] *,
  [data-meetch="dashboard"] *::before {
    animation: none !important;
  }
}

/* Mot d'accent (meetch-u-accent) : un <span> dans un titre, en cursive du kit (Accent/Cursive)
   et couleur Accentué. Graisse et approche du style global, le reste hérite du titre. */

.meetch-u-accent {
  font-family: var(--e-global-typography-47c5a43-font-family), cursive;
  font-weight: var(--e-global-typography-47c5a43-font-weight);
  letter-spacing: var(--e-global-typography-47c5a43-letter-spacing);
  color: var(--e-global-color-accent);
}

/* Surtitre */

.meetch-c-eyebrow .elementor-heading-title::before {
  content: "\e906";
  margin-right: 0.4rem;
  font-family: icomeetch;
  font-size: 0.8rem;
}

/* Carte Solution (racine du gabarit LOOP - SOLUTION) */

.card-solution .meetch-c-box {
  transition: box-shadow var(--meetch-u-duration-base) var(--meetch-u-easing);
}

.card-solution:hover .meetch-c-box,
.card-solution:focus-within .meetch-c-box {
  box-shadow: 0 0 0 0 rgba(var(--meetch-accent-rgb),0.5),
    0 0 20px 6px rgba(var(--meetch-accent-rgb),0.12);
}

.card-solution .elementor-widget-lottie {
  transform: scale(1);
  transform-origin: center;
  transition: transform var(--meetch-anim-duration) var(--meetch-anim-easing);
}

.card-solution:is(:hover, :focus-within) .elementor-widget-lottie {
  transform: scale(1.015);
}

/* Carte cliquable (DSC §7, racine du gabarit LOOP - SOLUTION CARD) : lift, ombre, titre en
   Secondaire. Pas de meetch-anim__item sur la carte : l'état animé (transform: none) écraserait
   le lift ; l'entrée se pose sur la grille. Le titre porte meetch-c-card__title (widget Titre). */
.meetch-c-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: transform var(--meetch-u-duration-base) var(--meetch-u-easing),
    box-shadow var(--meetch-u-duration-base) var(--meetch-u-easing);
}

.meetch-c-card--clickable:is(:hover, :focus-visible) {
  transform: translateY(-4px);
  box-shadow: 0 24px 34px -24px rgba(var(--meetch-primary-rgb), 0.28);
}

.meetch-c-card--clickable:focus-visible {
  outline: 2px solid var(--e-global-color-secondary);
  outline-offset: 3px;
}

.meetch-c-card__title .elementor-heading-title {
  transition: color var(--meetch-u-duration-fast) var(--meetch-u-easing);
}

/* Double classe : la couleur du widget Titre (.elementor-4409 .elementor-element.elementor-element-… ) pèse 0,4,0 et passe après. */
.meetch-c-card.meetch-c-card--clickable:is(:hover, :focus-visible) .meetch-c-card__title .elementor-heading-title {
  color: var(--e-global-color-secondary);
}

/* Flèche de carte (écosystème page 10) : widget HTML en dernier enfant, calé en bas de la carte. */
.elementor-widget.meetch-c-card__arrow {
  margin-top: auto;
  padding-top: 1.6rem;
  color: var(--e-global-color-secondary);
  line-height: 1;
}

/* Filtre de taxonomie (Newsroom, gabarit 1757) : le kit pose un dégradé sur tout `button`
   (.elementor-kit-7 button, 0,1,1) ; les fonds réglés dans le widget ne touchent que background-color. */
.elementor-widget-taxonomy-filter .e-filter-item {
  background-image: none;
}

.meetch-c-card__arrow span::before {
  content: "\e906";
  font-family: icomeetch;
  font-size: 1rem;
}

/* Carte sur fond Secondaire (Newsroom page 10) : flèche et titre restent blancs, survol compris. */
.meetch-c-card--on-dark .elementor-widget.meetch-c-card__arrow,
.meetch-c-card.meetch-c-card--on-dark.meetch-c-card--clickable:is(:hover, :focus-visible) .meetch-c-card__title .elementor-heading-title {
  color: var(--e-global-color-24359eb);
}

.meetch-c-card--on-dark.meetch-c-card--clickable:focus-visible {
  outline-color: var(--e-global-color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .meetch-c-card,
  .meetch-c-card__title .elementor-heading-title {
    transition: none;
  }

  .meetch-c-card--clickable:is(:hover, :focus-visible) {
    transform: none;
  }
}

/* Projecteur (Industrie, Products, Expand) */

/* Variables typées : le navigateur les interpole, la lumière suit le curseur avec inertie. */
@property --meetch-mx {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --meetch-my {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

.meetch-c-card-projector {
  --meetch-mx: 50%;
  --meetch-my: 50%;
  --meetch-card-halo: 247, 147, 30;
  --meetch-card-halo-core: 0.36;
  --meetch-card-halo-edge: 0.2;
  position: relative;
  cursor: pointer;
  transition: --meetch-mx var(--meetch-u-duration-base) var(--meetch-u-easing),
    --meetch-my var(--meetch-u-duration-base) var(--meetch-u-easing);
}

.card-solution.meetch-c-card-projector {
  --meetch-card-halo: 250, 248, 240;
}

.card-expand.meetch-c-card-projector {
  --meetch-card-halo: 1, 3, 64;
  --meetch-card-halo-core: 0.1;
  --meetch-card-halo-edge: 0.035;
}

.meetch-c-card-light {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  border-radius: 0.8rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--meetch-u-duration-base) var(--meetch-u-easing-doux);
}

/* Calque de deux fois la carte, dégradé fixe, déplacé en transform : rien à repeindre. */
.meetch-c-card-light::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle 260px at center,
    rgba(var(--meetch-card-halo), var(--meetch-card-halo-core)) 0%,
    rgba(var(--meetch-card-halo), var(--meetch-card-halo-edge)) 35%,
    rgba(var(--meetch-card-halo), 0) 70%);
  transform: translate(calc((var(--meetch-mx) - 50%) / 2), calc((var(--meetch-my) - 50%) / 2));
}

/* will-change le temps du survol seulement : un calque de 200 % par carte coûte cher au repos. */
.meetch-c-card-projector:is(:hover, :focus-within) > .meetch-c-card-light {
  opacity: 1;
}

.meetch-c-card-projector:is(:hover, :focus-within) > .meetch-c-card-light::before {
  will-change: transform;
}

/* Carte Industrie (racine du gabarit LOOP - INDUSTRIE) */

/* Curseur main sur toute la carte : elle ne porte pas la classe projector, qui le donne
   ailleurs, parce qu'elle a son propre halo. La carte réagit au survol comme une cible —
   le curseur l'annonce. Le gabarit rend désormais la racine en <a> vers l'industrie
   (balise dynamique « URL de l'article »), ce que le curseur promettait déjà.
   `color: inherit` coupe le bleu de lien : chaque texte de la carte pose sa couleur, mais
   l'héritage attend le premier qui l'oublierait. Le `!important` répond au kit Elementor,
   qui colore les liens depuis `.elementor-kit-7 a` — deux classes, que la nôtre ne peut
   pas dépasser. */
.card-industrie {
  --meetch-mx: 50%;
  --meetch-my: 50%;
  cursor: pointer;
  color: inherit !important;
  position: relative;
  overflow: hidden;
  border-radius: 0.6rem;
  transition: --meetch-mx var(--meetch-u-duration-base) var(--meetch-u-easing),
    --meetch-my var(--meetch-u-duration-base) var(--meetch-u-easing),
    box-shadow var(--meetch-u-duration-slow) var(--meetch-u-easing-doux);
}

/* Contour blanc, pas le bleu des boutons : la carte est un fond photo assombri de bleu,
   où le bleu de marque disparaîtrait. Posé en dedans — `outline-offset` négatif — parce
   que la grille rogne ce qui déborde. */
.card-industrie:focus-visible {
  outline: 3px solid var(--e-global-color-24359eb, #fff);
  outline-offset: -3px;
}

.card-industrie:hover {
  box-shadow: 0 24px 34px -24px rgba(var(--meetch-primary-rgb),0.42);
}

.card-industrie::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle 260px at center,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(var(--meetch-accent-rgb),0.07) 35%,
    rgba(255, 255, 255, 0) 70%);
  transform: translate(calc((var(--meetch-mx) - 50%) / 2), calc((var(--meetch-my) - 50%) / 2));
  opacity: 0;
  transition: opacity var(--meetch-u-duration-base) var(--meetch-u-easing-doux);
}

.card-industrie:hover::after {
  opacity: 1;
  will-change: transform, opacity;
}

/* Le fond Elementor ne se transforme pas : un pseudo l'hérite et zoome à sa place. */
.card-industrie .meetch-c-box {
  position: relative;
  z-index: 0;
}

.card-industrie .meetch-c-box::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  /* La couche est promue en amont, pas au survol : promue au moment du :hover, le
     navigateur devait rasteriser l'image pendant la première image du mouvement, ce qui
     se voyait comme un à-coup au démarrage du zoom. */
  will-change: transform;
  backface-visibility: hidden;
  transition: transform var(--meetch-u-duration-xslow) var(--meetch-u-easing-doux);
}

.card-industrie:hover .meetch-c-box::after {
  transform: scale(1.07);
}

.meetch-c-numb-title {
  opacity: 0.6;
}

.meetch-c-numb-title .elementor-heading-title {
  color: rgba(255, 255, 255, 0.4);
  text-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
}

.card-industrie .meetch-c-numb-title .elementor-heading-title {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0);
  transition: color var(--meetch-u-duration-slow) var(--meetch-u-easing-doux),
    -webkit-text-stroke-color var(--meetch-u-duration-slow) var(--meetch-u-easing-doux);
}

/* Les deux déclarations vont ensemble : sans contour, `color: transparent` effacerait le
   numéro au survol. Là où -webkit-text-stroke manque, le survol ne change simplement rien. */
@supports (-webkit-text-stroke: 1px #fff) {
  .card-industrie:hover .meetch-c-numb-title .elementor-heading-title {
    color: transparent !important;
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.95);
  }
}

/* Pied de carte : titre, sous-titre et rond de lien. Elementor le règle en flex row, ce
   qui poserait le sous-titre à côté du titre ; une grille de deux rangées le remet dessous
   sans toucher au gabarit. `.e-con` en plus dans le sélecteur : à spécificité égale, l'ordre
   de chargement d'Elementor l'emporterait.
   La rangée `sub` reste vide : le gabarit ne porte plus de sous-titre (classe retirée en 2.7.0).
   `align-content: end` tasse les deux rangées en bas : le rond de 72px impose la hauteur du
   pied, et sans lui les rangées se répartissaient l'excédent, ce qui laissait une vingtaine
   de pixels vides sous le titre. */
.card-industrie .meetch-c-card-foot.e-con {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "titre icone"
    "sub   icone";
  align-items: end;
  align-content: end;
  column-gap: 1rem;
}

.card-industrie .meetch-c-card-foot > .elementor-widget-theme-post-title {
  grid-area: titre;
}

.card-industrie .meetch-c-card-foot > .btn-meetch-icone {
  grid-area: icone;
}

/* Le titre porte à lui seul le déplacement du geste : une translation courte, doublée d'un
   agrandissement. L'easing doux remplace le rebond de `--meetch-u-easing`, qui faisait lire
   le mouvement comme une saccade, et l'échelle part du coin bas gauche pour que la ligne de
   base ne bouge pas — le titre grossit vers le haut et la droite, sans dériver. */
.card-industrie .elementor-widget-theme-post-title .elementor-heading-title {
  display: inline-block;
  transform-origin: left bottom;
  transition: transform var(--meetch-u-duration-slow) var(--meetch-u-easing-doux);
}

.card-industrie:is(:hover, :focus-within) .elementor-widget-theme-post-title .elementor-heading-title {
  transform: translateY(-0.2rem) scale(1.12);
}

.btn-meetch-icone .elementor-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 72px;
  height: 72px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.1));
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  backdrop-filter: blur(12px) saturate(125%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.btn-meetch-icone .elementor-icon :is(i, svg) {
  color: #fff;
  fill: #fff;
  margin-left: 6px;
  margin-bottom: 3px;
}

/* Le rond seul réagit : il s'opacifie et la flèche passe au bleu clair. Sans le fond plus
   dense, le bleu clair ne se lirait pas sur la photo. */
.btn-meetch-icone .elementor-icon {
  transition: background-color var(--meetch-u-duration-base) var(--meetch-u-easing),
    box-shadow var(--meetch-u-duration-base) var(--meetch-u-easing);
}

.btn-meetch-icone .elementor-icon :is(i, svg) {
  transition: color var(--meetch-u-duration-base) var(--meetch-u-easing),
    fill var(--meetch-u-duration-base) var(--meetch-u-easing);
}

.btn-meetch-icone .elementor-icon:hover {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 26px rgba(var(--meetch-primary-rgb),0.18);
}

.btn-meetch-icone .elementor-icon:hover :is(i, svg) {
  color: var(--meetch-u-bleu-clair);
  fill: var(--meetch-u-bleu-clair);
}

.card-industrie .btn-meetch-icone {
  transform: scale(1);
  transition: transform var(--meetch-u-duration-slow) var(--meetch-u-easing);
}

.card-industrie:hover .btn-meetch-icone {
  transform: scale(1.12);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .meetch-c-card-light,
  .card-industrie::after {
    display: none;
  }

  .card-industrie .meetch-c-numb-title .elementor-heading-title {
    transition: none;
  }

  .card-solution .elementor-widget-lottie,
  .card-solution:is(:hover, :focus-within) .elementor-widget-lottie {
    transform: none;
    transition: none;
  }

  .card-industrie:hover .meetch-c-box::after,
  .card-industrie:hover .btn-meetch-icone,
  .card-industrie:is(:hover, :focus-within) .elementor-widget-theme-post-title .elementor-heading-title {
    transform: none;
  }
}

/* Accordéon AI (.meetch-c-expand sur la grille des trois cartes) */

/* grid-template-columns transitionné, :has() choisit la répartition, --meetch-ouvert pilote le reste. */
@media (min-width: 768px) {
  .e-con.meetch-c-expand {
    /* Durée propre à l'accordéon : le déplacement y couvre près de la moitié de la largeur
       de la section, bien plus qu'un survol de carte, et le jeton `-xslow` du site le rendait
       nerveux. Il reste réglé ici pour ne pas ralentir tout ce qui utilise ce jeton. */
    --meetch-expand-duree: 1.15s;
    grid-template-columns: 2.6fr 1fr 1fr !important;
    transition: grid-template-columns var(--meetch-expand-duree) var(--meetch-u-easing-doux);
    /* 22.5rem : les scènes AI sont passées à 10rem de haut. En deçà, la pile titre + texte + bloc
       animé dépassait la carte, le bloc mordait sur le padding du bas. Les cartes sont en
       `space-between` : dès que le contenu tient, le bloc se pose sur le bord intérieur du
       padding, donc au même endroit dans les trois cartes quelle que soit la longueur du texte. */
    --meetch-expand-hauteur: 22.5rem;
    --meetch-expand-media: 10rem;
    height: var(--meetch-expand-hauteur);
  }

  .e-con.meetch-c-expand:has(> :nth-child(2):hover) {
    grid-template-columns: 1fr 2.6fr 1fr !important;
  }

  .e-con.meetch-c-expand:has(> :nth-child(3):hover) {
    grid-template-columns: 1fr 1fr 2.6fr !important;
  }

  .meetch-c-expand > .e-con {
    --meetch-ouvert: 0;
    min-width: 0;
    min-height: 0;
  }

  .meetch-c-expand > .e-con:hover,
  .meetch-c-expand:not(:has(> .e-con:hover)) > .e-con:first-child {
    --meetch-ouvert: 1;
  }

  /* Fond direct : Elementor confine le pseudo d'un .e-con à sa zone de contenu. */
  .meetch-c-expand .meetch-c-box {
    position: relative;
    z-index: 0;
    height: 100%;
    overflow: hidden;
    transition: background-color var(--meetch-expand-duree) var(--meetch-u-easing-doux);
  }

  .meetch-c-expand > .e-con:hover .meetch-c-box,
  .meetch-c-expand:not(:has(> .e-con:hover)) > .e-con:first-child .meetch-c-box {
    background-color: var(--e-global-color-secondary, #0022f5);
  }

  .meetch-c-expand .meetch-c-box :is(.elementor-widget-text-editor, .elementor-widget-image, .elementor-widget-html) {
    opacity: var(--meetch-ouvert);
    transition: opacity var(--meetch-u-duration-slow) var(--meetch-u-easing-doux);
    transition-delay: calc(var(--meetch-ouvert) * 280ms);
  }

  /* Le bloc animé n'arrive qu'une fois la colonne élargie : il glisse après elle, jamais avec.
     Elementor donne `flex: 1 0 auto` à ses widgets : celui-ci absorbait donc tout l'espace
     libre de la carte, et comme le bloc y était calé en haut, ce vide se retrouvait SOUS lui
     — 4,6 px dans Instant Refund, 18,6 px dans les deux autres, au gré de la longueur du
     texte. La colonne inversée pousse le bloc sur le bord bas du widget : les trois cartes
     gardent alors le même espace entre l'animation et le bas de la carte. */
  .meetch-c-expand .meetch-c-box .elementor-widget-html {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 0;
    transform: translateY(calc((1 - var(--meetch-ouvert)) * 0.75rem));
    transition: opacity var(--meetch-u-duration-slow) var(--meetch-u-easing-doux),
      transform var(--meetch-u-duration-slow) var(--meetch-u-easing-doux);
    transition-delay: calc(var(--meetch-ouvert) * 560ms);
  }

  /* Le bloc se cale sur une hauteur et déduit sa largeur de son ratio : plus de découpe en bas.
     Elementor 4 ne pose plus de .elementor-widget-container : le centrage tient à la marge.
     `width: 100%` remplace `auto` depuis que le widget est en flex : une marge horizontale
     automatique y prend le pas sur l'étirement, et le bloc — dont tout le contenu est en
     position absolue — s'effondrait à zéro. La marge reste, sans effet, pour le jour où le
     bloc retrouverait une largeur propre. */
  .meetch-c-expand .meetch-c-box [data-meetch] {
    width: 100%;
    height: var(--meetch-expand-media);
    max-width: 100%;
    margin-inline: auto;
  }

  /* Rien ne tourne dans une carte fermée : les deux cas sont disjoints et couvrent la grille. */
  .meetch-c-expand:has(> .e-con:hover) > .e-con:not(:hover) [data-meetch] *,
  .meetch-c-expand:has(> .e-con:hover) > .e-con:not(:hover) [data-meetch] *::before,
  .meetch-c-expand:has(> .e-con:hover) > .e-con:not(:hover) [data-meetch] *::after,
  .meetch-c-expand:not(:has(> .e-con:hover)) > .e-con:not(:first-child) [data-meetch] *,
  .meetch-c-expand:not(:has(> .e-con:hover)) > .e-con:not(:first-child) [data-meetch] *::before,
  .meetch-c-expand:not(:has(> .e-con:hover)) > .e-con:not(:first-child) [data-meetch] *::after {
    animation-play-state: paused;
  }

  .meetch-c-expand .meetch-c-box :is(.elementor-heading-title, .elementor-widget-text-editor) {
    transition: color var(--meetch-expand-duree) var(--meetch-u-easing-doux);
  }

  .meetch-c-expand .meetch-c-box h3.elementor-heading-title {
    transform: scale(calc(1 + var(--meetch-ouvert) * 0.32));
    transform-origin: left center;
    transition: color var(--meetch-expand-duree) var(--meetch-u-easing-doux),
      transform var(--meetch-expand-duree) var(--meetch-u-easing-doux);
  }

  .meetch-c-expand > .e-con:hover :is(.elementor-heading-title, .elementor-widget-text-editor),
  .meetch-c-expand:not(:has(> .e-con:hover)) > .e-con:first-child :is(.elementor-heading-title, .elementor-widget-text-editor) {
    color: #fff !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .e-con.meetch-c-expand {
    --meetch-expand-media: 7rem;
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .e-con.meetch-c-expand,
  .e-con.meetch-c-expand:has(> :nth-child(2):hover),
  .e-con.meetch-c-expand:has(> :nth-child(3):hover) {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  .meetch-c-expand > .e-con,
  .meetch-c-expand > .e-con:hover,
  .meetch-c-expand:not(:has(> .e-con:hover)) > .e-con:first-child {
    --meetch-ouvert: 0;
  }

  .meetch-c-expand .meetch-c-box :is(.elementor-widget-text-editor, .elementor-widget-image, .elementor-widget-html) {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .meetch-c-expand > .e-con:hover :is(.elementor-heading-title, .elementor-widget-text-editor),
  .meetch-c-expand:not(:has(> .e-con:hover)) > .e-con:first-child :is(.elementor-heading-title, .elementor-widget-text-editor) {
    color: inherit !important;
  }
}

@media (max-width: 767px) {
  .card-expand .meetch-c-box {
    background: var(--e-global-color-secondary, #0022f5);
    color: #fff;
  }

  .card-expand .meetch-c-box .elementor-heading-title {
    color: #fff;
  }
}

/* Chiffres clés (widget Compteur) */

.meetch-c-key-number .elementor-counter-title,
.meetch-c-key-number .elementor-counter-title span {
  display: block;
  line-height: 2.4rem;
}

.meetch-c-key-number .elementor-counter-title span {
  font-weight: 400;
  font-size: var(--e-global-typography-452ecbf-font-size);
  line-height: 1.8rem;
}

.meetch-c-key-number--min .elementor-counter-number-suffix {
  font-family: var(--e-global-typography-79ba738-font-family);
  font-size: 2.4rem;
}

.meetch-c-key-number--min .elementor-counter-number-wrapper {
  align-items: baseline;
}

/* Même précaution : sans contour, le chiffre disparaîtrait au lieu d'être ajouré. */
@supports (-webkit-text-stroke: 1px #fff) {
  .meetch-c-key-number--outline .elementor-counter-number-wrapper {
    color: transparent;
    -webkit-text-stroke: 1.4px var(--e-global-color-accent);
  }
}

@media (max-width: 767px) {
  .meetch-c-key-number--outline .elementor-counter-title {
    margin-right: -0.8em;
    padding-left: 0.8rem;
  }

  .list-icons li {
    padding-bottom: 0.3rem !important;
  }
}

/* Logos partenaires */

/* .elementor-element. passe devant la transition globale des widgets. */
.elementor-element.meetch-c-partner-logo {
  opacity: 0.28;
  filter: grayscale(1);
  transition: opacity var(--meetch-u-duration-fast) ease,
    filter var(--meetch-u-duration-fast) ease;
}

.elementor-element.meetch-c-partner-logo:hover {
  opacity: 0.85;
  filter: grayscale(0);
}

.meetch-u-bg-fondu {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* Mosaïque de logos (page 12, Ecosystem) : la Loop Grid n'a pas d'auto-fit natif, la grille vit
   donc sur le conteneur qui la porte et `display:contents` efface la sienne pour que ses cartes
   rejoignent la grille commune — au même rang que la case statique posée à côté en dehors de la boucle. */
.meetch-c-logo-mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1rem;
}

.meetch-c-logo-mosaic .elementor-loop-container {
  display: contents;
}

/* Conteneur retiré quand sa boucle ne rend aucune fiche (relations vides, D-034) : la condition
   d'affichage d'Elementor lit un champ, pas le résultat d'une requête. L'éditeur le garde visible. */
body:not(.elementor-editor-active) .e-con.meetch-u-si-boucle:not(:has(.e-loop-item)) {
  display: none;
}

/* Marquee (balisage posé par functions.php, N jeux à la suite) */

.meetch-c-marquee {
  --meetch-marquee-gap: 3.5rem;
  --meetch-marquee-vitesse: 40;
}

.meetch-c-marquee__leurre {
  display: none !important;
}

.meetch-c-marquee__vue {
  overflow: hidden;
}

.meetch-c-marquee__piste {
  display: flex;
  width: max-content;
  animation: meetch-marquee var(--meetch-marquee-duree, 26s) linear infinite;
  will-change: transform;
}

.meetch-c-marquee:hover .meetch-c-marquee__piste {
  animation-play-state: paused;
}

/* L'écart de fin appartient au jeu : le raccord garde le même espace. */
.meetch-c-marquee__jeu {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--meetch-marquee-gap);
  padding-right: var(--meetch-marquee-gap);
}

.meetch-c-marquee__logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

@keyframes meetch-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-100% / var(--meetch-marquee-jeux, 3)), 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .meetch-c-marquee__piste {
    animation: none;
  }
}

/* Marquee vertical (page 12) : même balisage serveur (functions.php), déclenché par le même
   filtre — seul le modificateur --vertical change le sens. Logos en blanc permanent sur fond
   bleu : pas de gris → couleur au survol ici, contrairement au marquee horizontal. */

.meetch-c-marquee--vertical .meetch-c-marquee__vue {
  height: 100%;
}

.meetch-c-marquee--vertical .meetch-c-marquee__piste {
  flex-direction: column;
  width: 100%;
  height: max-content;
  animation-name: meetch-marquee-vertical;
}

.meetch-c-marquee--vertical .meetch-c-marquee__jeu {
  flex-direction: column;
  padding-right: 0;
  padding-bottom: var(--meetch-marquee-gap);
}

.meetch-c-marquee--vertical.meetch-u-bg-fondu {
  -webkit-mask: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  mask: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
}

.meetch-c-marquee--vertical {
  height: 22rem;
}

@media (max-width: 767px) {
  .meetch-c-marquee--vertical {
    height: 13rem;
  }
}

@keyframes meetch-marquee-vertical {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, calc(-100% / var(--meetch-marquee-jeux, 3)), 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .meetch-c-marquee--vertical .meetch-c-marquee__piste {
    animation: none;
  }
}

/* Logos blancs en permanence : le survol ne change ni l'opacité ni la couleur. */
.meetch-c-marquee--vertical .elementor-element.meetch-c-partner-logo,
.meetch-c-marquee--vertical .elementor-element.meetch-c-partner-logo:hover {
  opacity: 0.92;
  filter: brightness(0) invert(1);
}

/* Rangée de boutons de hero (page 12) : deux CTA côte à côte, empilés pleine largeur sous 767px. */
.meetch-u-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

@media (max-width: 767px) {
  .meetch-u-btn-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .meetch-u-btn-row > .meetch-c-button {
    flex: 1 1 100%;
    width: 100%;
  }

  .meetch-u-btn-row > .meetch-c-button .elementor-button {
    width: 100%;
    justify-content: center;
  }
}

/* Témoignages */

/* Le carrousel se fait glisser à la souris : le curseur main le dit. Il est posé sur les
   diapositives, pas sur le conteneur, pour laisser la pagination avec son propre curseur. */
.carousel-testimonial .swiper-slide {
  cursor: pointer;
}

.carousel-testimonial .swiper-pagination-bullets {
  inset-inline-start: 2rem;
}

.carousel-testimonial .swiper-pagination {
  text-align: left;
}

/* Typographie */

/* Titre animé (widget Animated Headline) : Elementor coupe ce qui déborde du mot qui
   tourne, c'est ainsi qu'il le fait entrer et sortir. Sur une interligne serrée, les
   jambages passent sous la boîte et se font trancher avec. Même recette que les masques
   d'apparition : la boîte grandit, la marge négative rend la place à la ligne. En bas
   seulement : les mots à venir sont empilés en absolu à `top: 0` quand celui qui s'affiche
   suit le flux — un rembourrage en haut ne décalerait que lui, et les autres arriveraient
   d'autant plus haut. En haut, l'interligne loge déjà les hampes. */
.elementor-headline-dynamic-wrapper {
  padding-bottom: var(--meetch-u-descente);
  margin-bottom: calc(-1 * var(--meetch-u-descente));
}

/* Accroche du hero (.txt-editor sur l'éditeur de texte de la Home). */
.hero-content .txt-editor strong {
  font-size: 1.3rem;
  line-height: 2.3rem;
}

@media (max-width: 767px) {
  .hero-content .txt-editor strong {
    font-size: 1.2rem;
    line-height: 1.8rem;
  }
}

/* Sauts de ligne conditionnels ; sous 768, le dernier bloc gagne. */
.br-only-mob br {
  display: none;
}

@media (max-width: 1024px) {
  .br-hide-tab br {
    display: none;
  }
}

@media (max-width: 767px) {
  .br-show-mob br,
  .br-only-mob br {
    display: block;
  }
}

/* Stepper (meetch-c-stepper) */

/* Grille, colonnes et écarts se règlent dans Elementor (conteneur Grille) ; le thème dessine les
   pièces. L'écart de colonne est relevé sur la grille : l'étape et l'en-tête redéfinissent le leur,
   et le rail doit franchir celui de la grille pour toucher la pastille suivante. */
.meetch-c-stepper {
  --meetch-c-stepper-gap: var(--column-gap, 0px);
}

.elementor-widget.meetch-c-stepper__dot {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(var(--meetch-primary-rgb), 0.24);
  border-radius: 50%;
  background: var(--e-global-color-24359eb);
  color: var(--e-global-color-primary);
  transition: background-color var(--meetch-u-duration-fast) var(--meetch-u-easing),
    border-color var(--meetch-u-duration-fast) var(--meetch-u-easing),
    color var(--meetch-u-duration-fast) var(--meetch-u-easing);
}

.elementor-widget.meetch-c-stepper__dot .elementor-heading-title {
  color: inherit;
  line-height: 1;
}

.elementor-widget.meetch-c-stepper__label .elementor-heading-title {
  color: rgba(var(--meetch-primary-rgb), 0.56);
  white-space: nowrap;
  transition: color var(--meetch-u-duration-fast) var(--meetch-u-easing);
}

.e-con.meetch-c-stepper__rail {
  flex: 1 1 0;
  min-width: 1rem;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin-inline-end: calc(-1 * var(--meetch-c-stepper-gap));
  background: rgba(var(--meetch-primary-rgb), 0.16);
  transform-origin: left center;
}

.meetch-c-stepper__step:hover .elementor-widget.meetch-c-stepper__dot {
  border-color: var(--e-global-color-secondary);
  background: var(--e-global-color-secondary);
  color: var(--e-global-color-24359eb);
}

.meetch-c-stepper__step:hover .elementor-widget.meetch-c-stepper__label .elementor-heading-title {
  color: var(--e-global-color-secondary);
}

/* --animated, avec meetch-anim-fade sur le même conteneur : le rail se trace, les pastilles
   s'allument en cascade. Le délai ne porte que sur opacité et transform, pour ne pas retarder
   le survol. Sans -ready (mouvement réduit, pas de JS), rien n'est masqué. */
.meetch-c-stepper--animated.meetch-anim-ready .meetch-c-stepper__rail {
  transform: scaleX(0);
  transition: transform var(--meetch-u-duration-xslow) var(--meetch-u-easing) 200ms;
}

.meetch-c-stepper--animated.meetch-anim-ready .elementor-widget.meetch-c-stepper__dot {
  --meetch-c-stepper-delay: 200ms;
  opacity: 0;
  transform: scale(0.88);
  transition: opacity var(--meetch-anim-fade) var(--meetch-u-easing) var(--meetch-c-stepper-delay),
    transform var(--meetch-anim-fade) var(--meetch-u-easing) var(--meetch-c-stepper-delay),
    background-color var(--meetch-u-duration-fast) var(--meetch-u-easing),
    border-color var(--meetch-u-duration-fast) var(--meetch-u-easing),
    color var(--meetch-u-duration-fast) var(--meetch-u-easing);
}

.meetch-c-stepper--animated .meetch-c-stepper__step:nth-child(2) .meetch-c-stepper__dot {
  --meetch-c-stepper-delay: 450ms;
}

.meetch-c-stepper--animated .meetch-c-stepper__step:nth-child(3) .meetch-c-stepper__dot {
  --meetch-c-stepper-delay: 700ms;
}

.meetch-c-stepper--animated .meetch-c-stepper__step:nth-child(4) .meetch-c-stepper__dot {
  --meetch-c-stepper-delay: 950ms;
}

.meetch-c-stepper--animated.meetch-anim-in .meetch-c-stepper__rail {
  transform: none;
}

.meetch-c-stepper--animated.meetch-anim-in .elementor-widget.meetch-c-stepper__dot {
  opacity: 1;
  transform: none;
}

/* Mobile : une colonne, le rail cède la place à un filet vertical sous la pastille. */
@media (max-width: 767px) {
  .e-con.meetch-c-stepper__step {
    padding-block-end: 1.6rem;
  }

  .e-con.meetch-c-stepper__rail {
    display: none;
  }

  .e-con.meetch-c-stepper__body {
    margin-inline-start: 1.3rem;
    padding-inline-start: 1.7rem;
    border-inline-start: 1px solid rgba(var(--meetch-primary-rgb), 0.16);
  }

  .meetch-c-stepper__step:last-child .e-con.meetch-c-stepper__body {
    border-inline-start-color: transparent;
  }
}

/* Étiquette (meetch-c-tag) */

/* Rectangulaire et statique. Posée sur un widget Titre (le widget porte la boîte) ou sur un
   <span> écrit dans un titre d'accordéon. */
.meetch-c-tag {
  display: inline-flex;
  align-items: center;
  height: 2.04em;
  padding: 0 0.8rem 0.1rem;
  border: 1px solid rgba(var(--meetch-primary-rgb), 0.2);
  border-radius: 0.25rem;
  color: var(--e-global-color-primary);
  font-weight: 400;
  font-size: 0.74rem;
  line-height: 1;
  white-space: nowrap;
}

.elementor-widget.meetch-c-tag {
  display: inline-flex;
  width: auto;
}

.elementor-widget.meetch-c-tag .elementor-heading-title {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: inherit;
}

.meetch-c-tag--on-dark {
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--e-global-color-24359eb);
}

/* Sur photo (bande hero page 11) : Linen à 92 %, sans filet. */
.meetch-c-tag--on-photo {
  background-color: rgba(250, 248, 240, 0.92);
  border-color: transparent;
}

/* Badge d'état : CORE / PROGRESSIVE. */
.meetch-c-tag--status {
  height: auto;
  padding: 0.22rem 0.48rem;
  border-radius: 0.3rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  line-height: 1.1;
  text-transform: uppercase;
}

/* Badge SANDBOX (scène api-call, page 09) : Accent plein, texte Principal. */
.meetch-c-tag--sandbox {
  height: auto;
  padding: 0.22rem 0.48rem;
  border-color: var(--e-global-color-accent);
  border-radius: 0.3rem;
  background-color: var(--e-global-color-accent);
  color: var(--e-global-color-primary);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

/* Tableau en lignes (meetch-c-table) : lignes filetées, colonnes en conteneur Grille Elementor
   (`__row`, `__head`). `--cards` : sous 767 px, chaque ligne devient une carte empilée (écart
   posé dans Elementor) ; l'en-tête et les libellés mobiles relèvent de la visibilité responsive. */
.meetch-c-table {
  --meetch-c-table-rule: rgba(var(--meetch-primary-rgb), 0.12);
  --meetch-c-table-card: rgba(var(--meetch-primary-rgb), 0.04);
}

.meetch-c-table--on-dark {
  --meetch-c-table-rule: rgba(255, 255, 255, 0.14);
  --meetch-c-table-card: rgba(255, 255, 255, 0.06);
}

.e-con.meetch-c-table__head {
  padding: 0 0 0.9rem;
}

.e-con.meetch-c-table__row {
  padding: 1.15rem 0;
  border-top: 1px solid var(--meetch-c-table-rule);
}

.e-con.meetch-c-table__row:last-child {
  border-bottom: 1px solid var(--meetch-c-table-rule);
}

/* En Loop Grid (page 13, LOOP - JOB ROW) chaque ligne est seule dans son `.e-loop-item` : le
   filet bas ne reste qu'à la dernière fiche. La ligne est un lien ; le rond fléché passe en
   Principal sur fond clair, Bleu au survol. Message vide filé comme une ligne. */
.meetch-c-table .e-loop-item:not(:last-child) .e-con.meetch-c-table__row {
  border-bottom: 0;
}

a.e-con.meetch-c-table__row {
  color: inherit;
  text-decoration: none;
}

.meetch-c-table:not(.meetch-c-table--on-dark) .btn-meetch-icone .elementor-icon {
  width: 2.75rem;
  height: 2.75rem;
  background: var(--e-global-color-primary, #010340);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.meetch-c-table:not(.meetch-c-table--on-dark) a.meetch-c-table__row:is(:hover, :focus-visible) .btn-meetch-icone .elementor-icon {
  background: var(--e-global-color-secondary, #0022f5);
}

.meetch-c-table .e-loop-nothing-found-message {
  padding: 1.4rem 0;
  border-block: 1px solid var(--meetch-c-table-rule);
  color: rgba(var(--meetch-primary-rgb), 0.72);
}

@media (max-width: 767px) {
  .meetch-c-table--cards .e-con.meetch-c-table__row,
  .meetch-c-table--cards .e-con.meetch-c-table__row:last-child {
    padding: 1.1rem 1.2rem;
    border: 0;
    border-radius: 0.5rem;
    background: var(--meetch-c-table-card);
  }
}

/* Pastille numérotée (meetch-c-tile-row__num) */

/* Seule survivante de l'ancien composant « tuiles en ligne » (rangée, tuiles et variante sombre
   retirées en 2.7.0, jamais posées en base) : le parcours l'utilise, le nom reste en base. */
.elementor-widget.meetch-c-tile-row__num {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid rgba(var(--meetch-primary-rgb), 0.24);
  border-radius: 50%;
  color: var(--e-global-color-primary);
}

.elementor-widget.meetch-c-tile-row__num .elementor-heading-title {
  color: inherit;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
}

.meetch-c-journey__row--on .elementor-widget.meetch-c-tile-row__num {
  border-color: var(--e-global-color-secondary);
  background: var(--e-global-color-secondary);
  color: var(--e-global-color-24359eb);
}

/* Lignes dépliables (meetch-c-acc-row) */

/* Sur un widget Accordéon (imbriqué) : chaque élément devient une ligne, numérotée par compteur ;
   l'étiquette d'état s'écrit dans le titre (<span class="meetch-c-tag …">). La ligne fixe
   --core est un conteneur (pastille, __title, étiquette __end). L'icône + du widget pivote
   à l'ouverture : régler la même icône en normal et en actif. */
.elementor-widget.meetch-c-acc-row {
  --n-accordion-border-width: 0px;
  --n-accordion-border-radius: 0.8rem;
  --n-accordion-padding: 1.1rem 1.4rem;
  --n-accordion-item-title-space-between: 0.6rem;
  --n-accordion-icon-gap: 0 1.1rem;
  --n-accordion-icon-size: 0.9rem;
  --n-accordion-title-icon-order: 1;
  --n-accordion-title-normal-color: var(--e-global-color-primary);
  --n-accordion-title-hover-color: var(--e-global-color-primary);
  --n-accordion-title-active-color: var(--e-global-color-primary);
  counter-reset: meetch-acc-row;
}

.meetch-c-acc-row .e-n-accordion-item,
.e-con.meetch-c-acc-row--core {
  border-radius: 0.8rem;
  background: var(--e-global-color-e25e475);
  transition: background-color var(--meetch-u-duration-fast) var(--meetch-u-easing);
}

.meetch-c-acc-row .e-n-accordion-item {
  counter-increment: meetch-acc-row;
}

.meetch-c-acc-row .e-n-accordion-item:hover {
  background: rgba(var(--meetch-primary-rgb), 0.04);
}

.meetch-c-acc-row .e-n-accordion-item-title::before,
.elementor-widget.meetch-c-acc-row__num {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid rgba(var(--meetch-primary-rgb), 0.24);
  border-radius: 50%;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  transition: background-color var(--meetch-u-duration-fast) var(--meetch-u-easing),
    border-color var(--meetch-u-duration-fast) var(--meetch-u-easing),
    color var(--meetch-u-duration-fast) var(--meetch-u-easing);
}

.meetch-c-acc-row .e-n-accordion-item-title::before {
  content: counter(meetch-acc-row);
}

.elementor-widget.meetch-c-acc-row__num .elementor-heading-title {
  color: inherit;
  font: inherit;
}

.meetch-c-acc-row .e-n-accordion-item:hover .e-n-accordion-item-title::before {
  border-color: var(--e-global-color-secondary);
  background: var(--e-global-color-secondary);
  color: var(--e-global-color-24359eb);
}

.meetch-c-acc-row .e-n-accordion-item-title-header {
  flex: 1 1 auto;
  min-width: 0;
}

.meetch-c-acc-row .e-n-accordion-item-title-text,
.elementor-widget.meetch-c-acc-row__title .elementor-heading-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  width: 100%;
  color: inherit;
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.35;
}

.meetch-c-acc-row .e-n-accordion-item-title-text .meetch-c-tag,
.elementor-widget.meetch-c-acc-row__end {
  margin-inline-start: auto;
}

.elementor-widget.meetch-c-acc-row__end {
  flex: 0 0 auto;
}

.elementor-widget.meetch-c-acc-row__title {
  flex: 1 1 auto;
  min-width: 0;
}

.meetch-c-acc-row .e-n-accordion-item-title-icon {
  opacity: 0.55;
  transition: transform var(--meetch-u-duration-base) var(--meetch-u-easing),
    opacity var(--meetch-u-duration-fast) var(--meetch-u-easing);
}

.meetch-c-acc-row .e-n-accordion-item:hover .e-n-accordion-item-title-icon {
  opacity: 0.9;
}

.meetch-c-acc-row .e-n-accordion-item[open] .e-n-accordion-item-title-icon {
  transform: rotate(45deg);
}

.meetch-c-acc-row .e-con.meetch-c-acc-row__body {
  padding: 0 1.4rem 1.1rem 4.6rem;
  border: 0;
}

.e-con.meetch-c-acc-row--core {
  padding: 1.1rem 1.4rem;
  gap: 1.1rem;
}

.e-con.meetch-c-acc-row--core {
  background: var(--e-global-color-secondary);
  color: var(--e-global-color-24359eb);
}

.e-con.meetch-c-acc-row--core .elementor-widget.meetch-c-acc-row__num {
  border-color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 767px) {
  .elementor-widget.meetch-c-acc-row {
    --n-accordion-padding: 1rem 1.1rem;
    --n-accordion-icon-gap: 0 0.8rem;
  }

  .e-con.meetch-c-acc-row--core {
    padding: 1rem 1.1rem;
    gap: 0.8rem;
  }

  .meetch-c-acc-row .e-con.meetch-c-acc-row__body {
    padding: 0 1.1rem 1rem 4rem;
  }
}

/* Cadres de marquage (meetch-c-portal-frame) */

/* Sur un conteneur meetch-c-box. Le cadre est un SVG des médias posé par le widget Icône, qui
   le rend en ligne : sa barre de titre porte la classe __bar et prend la couleur de la variante
   au survol. Le soulèvement passe par `translate`, pour ne pas croiser le `transform` de
   meetch-anim-group ; ses transitions sont reprises dans l'état animé, sans le délai de cascade. */
.e-con.meetch-c-portal-frame {
  transition: translate var(--meetch-u-duration-base) var(--meetch-u-easing),
    box-shadow var(--meetch-u-duration-base) var(--meetch-u-easing);
}

.meetch-anim-group.meetch-anim-ready .e-con.meetch-c-portal-frame {
  transition: opacity var(--meetch-anim-fade) var(--meetch-anim-easing) calc(var(--meetch-anim-i) * var(--meetch-anim-stagger)),
    transform var(--meetch-anim-duration) var(--meetch-anim-easing) calc(var(--meetch-anim-i) * var(--meetch-anim-stagger)),
    translate var(--meetch-u-duration-base) var(--meetch-u-easing),
    box-shadow var(--meetch-u-duration-base) var(--meetch-u-easing);
}

.e-con.meetch-c-portal-frame:hover {
  translate: 0 -3px;
  box-shadow: 0 18px 26px -22px rgba(var(--meetch-primary-rgb), 0.26);
}

.meetch-c-portal-frame .elementor-icon {
  display: block;
  line-height: 0;
}

.meetch-c-portal-frame .elementor-icon svg {
  display: block;
  width: 100%;
  height: auto;
}

.meetch-c-portal-frame__bar {
  transition: fill var(--meetch-u-duration-fast) var(--meetch-u-easing);
}

.meetch-c-portal-frame--white:hover .meetch-c-portal-frame__bar {
  fill: rgba(var(--meetch-primary-rgb), 0.16);
}

.meetch-c-portal-frame--grey:hover .meetch-c-portal-frame__bar {
  fill: rgba(var(--meetch-primary-rgb), 0.42);
}

.meetch-c-portal-frame--meetch:hover .meetch-c-portal-frame__bar {
  fill: var(--e-global-color-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .e-con.meetch-c-portal-frame:hover {
    translate: none;
  }
}

/* Filigranes (meetch-c-hero-watermark, meetch-u-wordmark) : décoratifs, `aria-hidden` posé par
   l'attribut Elementor du conteneur ou du widget, masqués sous 767 ; ils ne comptent pas dans
   « un sceau opaque par page ». Le sceau du hero est un widget Image posé dans le conteneur
   `meetch-u-container`, calé sur la gouttière ; le mot-symbole est un widget Image dans un
   conteneur placé après la dernière section, qui mord sur elle. */

.meetch-u-container:has(> .meetch-c-hero-watermark) > :not(.meetch-c-hero-watermark) {
  position: relative;
  z-index: 1;
}

.elementor-widget.meetch-c-hero-watermark {
  position: absolute;
  top: 0.25rem;
  left: calc(var(--meetch-u-gutter) - 3.75rem);
  z-index: 0;
  width: 9.5rem;
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}

.meetch-c-hero-watermark img {
  display: block;
  width: 100%;
  height: auto;
}

.meetch-u-wordmark {
  position: relative;
  height: clamp(6rem, 12vw, 11rem);
  margin-top: calc(var(--meetch-u-section-space) * -0.4);
  overflow: hidden;
  pointer-events: none;
}

.meetch-u-wordmark > .elementor-widget {
  position: static;
}

.meetch-u-wordmark img {
  position: absolute;
  bottom: -22%;
  left: 50%;
  width: min(92%, 96rem);
  max-width: none;
  height: auto;
  opacity: 0.07;
  transform: translateX(-50%);
}

@media (max-width: 767px) {
  .elementor-widget.meetch-c-hero-watermark,
  .e-con.meetch-u-wordmark {
    display: none;
  }
}

/* Animations au défilement (meetch-anim-*) */

/* meetch.js pose -ready puis -in à l'entrée dans le viewport ; sans lui, rien n'est masqué. */

/* Le masque est un inline-block à débordement caché : laissé sur la ligne de base, il s'y
   pose par son bord bas et monte tout entier au-dessus, si bien que la ligne gagne encore la
   descente de la fonte — l'interligne réglée dans Elementor enflait de ~0,13 em par ligne.
   Calé sur le bas de la ligne, le rideau ne change plus rien à la typographie. */
.meetch-anim-word .meetch-anim__mask {
  display: inline-block;
  overflow: hidden;
  padding-block: var(--meetch-u-descente);
  margin-block: calc(-1 * var(--meetch-u-descente));
  vertical-align: bottom;
}

.meetch-anim-word .meetch-anim__piece {
  display: inline-block;
  transform: translateY(130%);
  transition: transform var(--meetch-anim-duration) var(--meetch-anim-easing);
  transition-delay: calc(var(--meetch-anim-i) * var(--meetch-anim-stagger) * 0.72);
}

.meetch-anim-word.meetch-anim-in .meetch-anim__piece {
  transform: none;
}

.meetch-anim-rise.meetch-anim-ready {
  opacity: 0;
  transform: translateY(var(--meetch-anim-distance));
  transition: opacity var(--meetch-anim-fade) var(--meetch-anim-easing),
    transform var(--meetch-anim-duration) var(--meetch-anim-easing);
}

.meetch-anim-rise.meetch-anim-in {
  opacity: 1;
  transform: none;
}

.meetch-anim-fade.meetch-anim-ready {
  opacity: 0;
  transition: opacity var(--meetch-anim-fade) var(--meetch-anim-easing);
}

.meetch-anim-fade.meetch-anim-in {
  opacity: 1;
}

.meetch-anim-group.meetch-anim-ready .meetch-anim__item {
  opacity: 0;
  transform: translateY(calc(var(--meetch-anim-distance) * 0.75)) scale(0.985);
  transition: opacity var(--meetch-anim-fade) var(--meetch-anim-easing),
    transform var(--meetch-anim-duration) var(--meetch-anim-easing);
  transition-delay: calc(var(--meetch-anim-i) * var(--meetch-anim-stagger));
}

.meetch-anim-group.meetch-anim-in .meetch-anim__item {
  opacity: 1;
  transform: none;
}

/* Tampon : dérive scroll-driven, compositeur seul. */
@supports (animation-timeline: view()) {
  .meetch-anim-stamp img {
    animation: meetch-stamp-drift linear both;
    animation-timeline: view();
  }

  @media (prefers-reduced-motion: reduce) {
    .meetch-anim-stamp img {
      animation: none;
    }
  }
}

.meetch-anim-stamp.meetch-anim-ready {
  opacity: 0;
  transform: scale(1.08);
  transition: opacity var(--meetch-anim-fade) var(--meetch-anim-easing),
    transform var(--meetch-anim-duration) var(--meetch-anim-easing);
}

.meetch-anim-stamp.meetch-anim-in {
  opacity: 1;
  transform: none;
}

.meetch-anim-stamp img {
  filter: drop-shadow(12px 8px 16px rgba(0, 0, 0, 0.1));
}

@keyframes meetch-stamp-drift {
  from {
    transform: translateY(0.75rem) rotate(-4deg);
  }

  to {
    transform: translateY(-0.75rem) rotate(4deg);
  }
}

/* Après toutes les règles -ready : leur raccourci transition remet le délai à zéro. */
.meetch-anim-delay-1.meetch-anim-ready {
  transition-delay: 100ms;
}

.meetch-anim-delay-2.meetch-anim-ready {
  transition-delay: 200ms;
}

.meetch-anim-delay-3.meetch-anim-ready {
  transition-delay: 300ms;
}

/* En construction — repère transitoire, part avec la section homonyme de functions.php (D-021). */

.meetch-c-construction {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: calc(var(--meetch-u-section-space) * 1.5) var(--meetch-u-gutter);
  background-color: var(--e-global-color-e25e475);
}

.meetch-c-construction__bloc {
  max-width: 34rem;
  text-align: center;
}

.meetch-c-construction__label {
  margin: 0 0 1rem;
  color: var(--e-global-color-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.meetch-c-construction__titre {
  margin: 0 0 1rem;
  color: var(--e-global-color-primary);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.1;
}

.meetch-c-construction__texte {
  margin: 0 0 2rem;
  color: rgba(var(--meetch-primary-rgb), 0.72);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* La couleur des liens vient du kit Elementor, par un sélecteur plus fort que celui-ci :
   sans !important, le texte du bouton ressortait en bleu #0022F5 sur le fond navy. */
.meetch-c-construction__lien {
  display: inline-block;
  padding: 0.9rem 2rem;
  border-radius: 999px;
  background-color: var(--e-global-color-primary, #010340);
  color: var(--e-global-color-24359eb, #fff) !important;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--meetch-u-duration-fast) var(--meetch-u-easing);
}

.meetch-c-construction__lien:is(:hover, :focus-visible) {
  background-color: var(--e-global-color-secondary, #0022f5);
}

/* Formulaire « Book a demo » (widget Form multi-étapes du modèle 3881) */

/* Le rail, ses couleurs par état, ses séparateurs et l'espacement des champs sont réglés dans
   Elementor (taille de pastille, typographie, couleurs par état) : ne restent ici que la mise
   en ligne du rail, la coche de l'étape franchie, les pastilles des secteurs et l'anneau de
   focus. Les !important répondent au CSS que le widget écrit dans la page, jamais à une règle
   de ce fichier. */

.meetch-c-form-demo {
  --meetch-form-demo-bordure: rgba(var(--meetch-primary-rgb), 0.16);
  --meetch-form-demo-rayon: 0.5625rem;
}

/* Rail d'étapes : compact et calé à gauche, la croix de la popup se pose au bout de sa ligne. */

.meetch-c-form-demo .e-form__indicators {
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 1.125rem;
}

/* Pastille et libellé côte à côte : le widget les empile. */
.meetch-c-form-demo .e-form__indicators__indicator {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 0.4375rem;
  padding: 0;
}

/* La taille de la pastille vient du widget (« Steps › Size »). */
.meetch-c-form-demo .e-form__indicators__indicator__number {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  /* Le widget empile pastille et libellé et réserve 10 px sous la pastille. Ici les deux sont
     en ligne : cette réserve posait la pastille un demi-cran au-dessus du reste du rail. */
  margin: 0;
  /* Un chiffre se pose sur sa ligne de base : sans cette réserve, il flotte au-dessus du centre. */
  padding: 0.0875em 0 0;
  border-radius: 0.28rem;
  font-size: 0.6875rem;
  font-weight: 600;
  /* L'espacement des libellés s'hérite : sur un chiffre seul, il le décentre. */
  letter-spacing: 0;
  line-height: 1;

}

/* Étape à venir : bord plus clair que le chiffre, que le widget peint de la même couleur. */
.meetch-c-form-demo .e-form__indicators__indicator--state-inactive .e-form__indicators__indicator__number {
  border-color: var(--meetch-form-demo-bordure);
}

/* Le libellé ne prend pas seul la couleur de son état : on la lui rend. */
.meetch-c-form-demo .e-form__indicators__indicator--state-inactive .e-form__indicators__indicator__label {
  color: var(--e-form-steps-indicator-inactive-primary-color);
}

.meetch-c-form-demo .e-form__indicators__indicator--state-active .e-form__indicators__indicator__label {
  color: var(--e-global-color-primary, #010340);
}

/* Étape franchie : la coche remplace le numéro. `font-size: 0` masque le chiffre sans le
   retirer du balisage, que le widget réécrit à chaque changement d'étape. */
.meetch-c-form-demo .e-form__indicators__indicator--state-completed .e-form__indicators__indicator__number {
  font-size: 0;
}

.meetch-c-form-demo .e-form__indicators__indicator--state-completed .e-form__indicators__indicator__number::after {
  content: "\2713";
  font-size: 0.9375rem;
  line-height: 1;
}

/* Le widget descend le trait à mi-hauteur de la pastille, calcul prévu pour le rail empilé.
   En ligne, le trait se centre tout seul : la descente le posait sous l'axe. Le sélecteur du
   widget pèse le même poids que celui-ci et passe après dans la feuille : on nomme le rail pour
   reprendre la main. */
.meetch-c-form-demo .e-form__indicators .e-form__indicators__indicator__separator {
  flex: 0 0 2.625rem;
  width: 2.625rem;
  margin: 0 0.625rem;
  background-color: var(--meetch-form-demo-bordure);
}

/* Retour en arrière par le rail : meetch.js rend les étapes franchies cliquables. */
.meetch-c-form-demo .e-form__indicators__indicator--state-completed[role="button"] {
  cursor: pointer;
}

.meetch-c-form-demo .e-form__indicators__indicator:focus-visible {
  outline: 3px solid var(--e-global-color-secondary, #0022f5);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

/* Titres d'étape et textes d'aide (champs HTML du formulaire) */

.meetch-c-form-demo__title {

}

.meetch-c-form-demo__hint,
.meetch-c-form-demo__legal {
  display: block;
  margin: 0;
  color: rgba(var(--meetch-primary-rgb), 0.56);
  font-size: 0.92rem;
  line-height: 1;
}

.meetch-c-form-demo__legal {
  padding: 0.88rem 1.2rem 1.1rem 1.2rem;
  border-radius: var(--meetch-form-demo-rayon);
  background-color: var(--e-global-color-e25e475, #faf8f0);
}

/* Un champ HTML posé sous un champ hérite du row_gap : l'aide se recolle à son champ. */
.meetch-c-form-demo .elementor-field-type-html:has(.meetch-c-form-demo__hint) {
  margin-top: -0.6rem;
}

/* Elementor pose `elementor-field-group-<ID du champ>` sur chaque groupe : c'est le seul crochet
   par champ qui existe côté widget — les « CSS Classes » du répéteur atterrissent sur l'input ou
   sur le sous-groupe, pas sur le groupe. Les identifiants ciblés ici sont ceux du modèle 3881. */

/* Champ facultatif : la mention naît du CSS, le libellé reste celui d'Elementor. */
.meetch-c-form-demo :is(.elementor-field-group-software, .elementor-field-group-tel) > .elementor-field-label::after {
  content: "Optional";
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.25rem 0.375rem;
  border-radius: 0.1875rem;
  background-color: rgba(var(--meetch-primary-rgb), 0.06);
  color: rgba(var(--meetch-primary-rgb), 0.56);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  vertical-align: 0.2em;
}

/* Champs — taille, graisse et écart sous le libellé sont réglés dans le widget. */

.meetch-c-form-demo .elementor-field-label {
  color: var(--e-global-color-primary, #010340);
}

/* Le libellé des secteurs tient lieu de titre d'étape : il prend la taille de
   `.meetch-c-form-demo__title`. */

.meetch-c-form-demo  .meetch-c-form-demo__title {
  padding-bottom: 1.4rem !important;
    padding-top: 1.2rem !important;
}
.meetch-c-form-demo .elementor-field-group-industries > .elementor-field-label {
  font-size: 1.6rem !important;
  line-height: 1.2 !important;
    padding-bottom: 0.6rem !important;
    padding-top: 1.2rem !important;
}
.meetch-c-form-demo  .meetch-c-form-demo__title {
  padding-bottom: 0.6rem !important;
    padding-top: 1.2rem !important;
  margin-block-end: 1rem;
  margin-block-start: 0rem;
    font-size: 1.6rem !important;
  line-height: 1.2 !important;
}
.meetch-c-form-demo .elementor-field-group-communications  > .elementor-field-label {
  padding-bottom: 0.2rem !important;
    font-size: 1.2rem !important;
      padding-top: 1.2rem !important;
}

.meetch-c-form-demo .elementor-field-group-communications  .elementor-field-option {
    font-size: 1rem !important;
}

.meetch-c-form-demo .elementor-field-group-communications  .elementor-field-option label {
  line-height: 1 !important;
}
.meetch-c-form-demo :is(input, select).elementor-field-textual {
  height: 2.75rem;
  min-height: 0;
  padding: 0 0.9375rem;
  font-size: 0.9375rem;
}

.meetch-c-form-demo .elementor-field-textual {
  border: 1px solid var(--meetch-form-demo-bordure);
  border-radius: var(--meetch-form-demo-rayon);
  background-color: var(--e-global-color-24359eb, #fff);
  transition: border-color var(--meetch-u-duration-fast) var(--meetch-u-easing);
}

.meetch-c-form-demo .elementor-field-textual:hover {
  border-color: rgba(var(--meetch-primary-rgb), 0.32);
}

/* L'anneau de focus est le même partout sur le site ; le widget pose son propre outline. */
.meetch-c-form-demo .elementor-field-textual:focus,
.meetch-c-form-demo .elementor-field-textual:focus-visible {
  border-color: var(--e-global-color-secondary, #0022f5);
  outline: 3px solid var(--e-global-color-secondary, #0022f5) !important;
  outline-offset: 2px;
  box-shadow: none;
}

/* Champ requis renseigné : meetch.js pose l'attribut, le libellé porte la coche. Le repère
   est doublé par la couleur du libellé, pour ne pas reposer sur la seule forme. */
.meetch-c-form-demo .elementor-field-group[data-meetch-valide] > .elementor-field-label {
  color: var(--e-global-color-secondary, #0022f5);
}

.meetch-c-form-demo .elementor-field-group[data-meetch-valide] > .elementor-field-label::after {
  content: "\2713";
  margin-left: 0.35rem;
  font-weight: 700;
}

.meetch-c-form-demo .elementor-field-group[data-meetch-valide] .elementor-field-textual {
  border-color: var(--e-global-color-secondary, #0022f5);
}

/* Pastilles secteur (case à cocher multiple) : chaque pastille prend la largeur de son mot. */

.meetch-c-form-demo .elementor-field-group-industries .elementor-field-subgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.meetch-c-form-demo .elementor-field-group-industries .elementor-field-option {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
}

/* La case couvre toute la pastille : le clic porte où que l'on tape, et l'élément focusable
   reste l'input natif. */
.meetch-c-form-demo .elementor-field-group-industries .elementor-field-option input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.meetch-c-form-demo .elementor-field-group-industries .elementor-field-option label {
  display: inline-flex;
  align-items: center;
  height: 2.04em;
  padding: 0rem 0.8rem 0.2rem 0.8em;
  border: 1px solid var(--meetch-form-demo-bordure);
  border-radius: 999px;
  background-color: var(--e-global-color-24359eb, #fff);
  color: var(--e-global-color-primary, #010340);
  font-size: 1.06rem;
  font-weight: 500;
  line-height: 1em;
  white-space: nowrap;
  transition: border-color var(--meetch-u-duration-fast) var(--meetch-u-easing),
    background-color var(--meetch-u-duration-fast) var(--meetch-u-easing),
    color var(--meetch-u-duration-fast) var(--meetch-u-easing);
  margin-bottom:0.08em;
}
.elementor-field-group-software label{
  font-size: 1.18rem !important;
  font-weight: 600 !important;;
  margin-bottom:0.12rem;
}
.meetch-c-form-demo .elementor-field-group-industries .elementor-field-option input[type="checkbox"]:checked + label {
  border-color: var(--e-global-color-secondary, #0022f5);
  background-color: var(--e-global-color-secondary, #0022f5);
  color: var(--e-global-color-24359eb, #fff);
}

.meetch-c-form-demo .elementor-field-group-industries .elementor-field-option input[type="checkbox"]:not(:checked):hover + label {
  border-color: rgba(var(--meetch-primary-rgb), 0.32);
}

.meetch-c-form-demo .elementor-field-group-industries .elementor-field-option input[type="checkbox"]:focus-visible + label {
  outline: 3px solid var(--e-global-color-secondary, #0022f5);
  outline-offset: 2px;
}

/* Choix final et consentement */

.meetch-c-form-demo .elementor-field-group-communications .elementor-field-subgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.meetch-c-form-demo :is(.elementor-field-group-field_887555c, .elementor-field-group-consent) .elementor-field-option {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.meetch-c-form-demo :is(.elementor-field-group-field_887555c, .elementor-field-group-consent) .elementor-field-option input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 0.15rem;
}

.meetch-c-form-demo :is(.elementor-field-group-field_887555c, .elementor-field-group-consent) .elementor-field-option label {
  color: rgba(var(--meetch-primary-rgb), 0.72);
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* Un champ HTML n'est qu'un bloc de texte : il n'a pas à emporter l'écart de ligne du widget. */
.meetch-c-form-demo .elementor-field-type-html {
  margin-bottom: 0 !important;
}

/* Pied du formulaire */

/* Les boutons ne bougent plus d'une étape à l'autre. Les trois étapes se superposent dans une
   même cellule de grille : le formulaire prend la hauteur de la plus haute, la modale garde sa
   taille. Une étape masquée reste en `visibility: hidden` — ni vue, ni focalisable, ni lue.
   Dans chaque étape, le pied est posé sur le bord bas, au-dessus d'une réserve de sa hauteur
   (bouton + marge + filet) : `--meetch-form-demo-pied` suit la taille des boutons du widget. */
/* `minmax(0, 1fr)` : une piste `auto` s'élargit à la ligne la plus longue d'une étape, et le pied
   débordait de la modale en mobile. */
.meetch-c-form-demo .elementor-form-fields-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.meetch-c-form-demo .elementor-form-fields-wrapper > .e-form__step {
  grid-area: 1 / 1;
  min-width: 0;
  position: relative;
  align-content: flex-start;
  padding-bottom: var(--meetch-form-demo-pied, 5.25rem);
}

/* `flex-wrap` repris : sans lui une étape masquée tenait sur une ligne, sa hauteur était fausse et
   la modale changeait de taille d'une étape à l'autre en mobile. */
.meetch-c-form-demo .elementor-form-fields-wrapper > .e-form__step.elementor-hidden {
  display: flex !important;
  flex-wrap: wrap;
  visibility: hidden;
}

.meetch-c-form-demo .e-form__buttons {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding-top: 1rem;
  background: #FFF;
  border-radius: 0.6rem;
}

/* Le widget donne un conteneur à chaque bouton. Extensibles, ces conteneurs se partageaient la
   largeur et « Continue » retombait au milieu du pied : chacun se réduit à son bouton, et c'est
   « Back » qui pousse le reste à droite. */
.meetch-c-form-demo .e-form__buttons__wrapper {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.75rem;
}

.meetch-c-form-demo .e-form__buttons__wrapper.elementor-field-type-previous {
  margin-right: auto;
}

/* Le dégradé du bouton d'action est posé en `background-image` sur tous les boutons du widget :
   la couleur de fond réglée pour « Back » passerait dessous. */
.meetch-c-form-demo .e-form__buttons__wrapper__button-previous {
  border: 1px solid var(--meetch-form-demo-bordure);
  background-image: none !important;
}

.meetch-c-form-demo .e-form__buttons__wrapper__button-previous:hover {
  border-color: rgba(var(--meetch-primary-rgb), 0.32);
}
.meetch-c-form-demo .elementor-field-group-industries {
  padding-bottom:0.6rem;
}

.meetch-c-form-demo .elementor-field-group-software{
margin-bottom: 0 !important;
}
/* Formulaire en page (meetch-c-form-demo--inline, page 09) : une seule étape, rien à superposer.
   Le pied revient dans le flux ; sans cela, `position: absolute` le posait sur le dernier champ. */
.meetch-c-form-demo--inline .e-form__buttons {
  position: static;
  padding-top: 0.5rem;
  background: none;
}

/* Champ de dépôt (Upload, id `cv`, page 13) : zone pointillée Linen, bouton du sélecteur en
   pilule Principal ; sous 767 le bouton passe au-dessus du nom de fichier. `input[type="file"]`
   est requis pour passer devant la règle du kit `.elementor-kit-7 input:not(…):not(…)` (0,3,1). */
.meetch-c-form-demo :is(.elementor-field-group-cv) input.elementor-upload-field[type="file"] {
  width: 100%;
  padding: 0.75rem 0.9375rem;
  border: 1px dashed var(--meetch-form-demo-bordure);
  border-radius: var(--meetch-form-demo-rayon);
  background-color: var(--e-global-color-e25e475, #faf8f0);
  color: rgba(var(--meetch-primary-rgb), 0.72);
  font-size: 0.9375rem;
  cursor: pointer;
}

.meetch-c-form-demo :is(.elementor-field-group-cv) input.elementor-upload-field[type="file"]:hover {
  border-color: rgba(var(--meetch-primary-rgb), 0.32);
}

.meetch-c-form-demo :is(.elementor-field-group-cv) input.elementor-upload-field[type="file"]:focus-visible {
  outline: 3px solid var(--e-global-color-secondary, #0022f5);
  outline-offset: 2px;
}

.meetch-c-form-demo :is(.elementor-field-group-cv) input.elementor-upload-field[type="file"]::file-selector-button {
  margin-right: 0.8rem;
  padding: 0.4rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background-color: var(--e-global-color-primary, #010340);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 767px) {
  .meetch-c-form-demo :is(.elementor-field-group-cv) input.elementor-upload-field[type="file"]::file-selector-button {
    display: block;
    margin: 0 0 0.5rem;
  }
}

/* Pastilles pilule (bouton radio) : « How will you connect? » (page 09) et « What are you
   bringing? » (page 11, broker_partner) partagent ce même rendu. */
.meetch-c-form-demo :is(.elementor-field-group-connection, .elementor-field-group-bringing, .elementor-field-group-platform, .elementor-field-group-team) .elementor-field-subgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.meetch-c-form-demo :is(.elementor-field-group-connection, .elementor-field-group-bringing, .elementor-field-group-platform, .elementor-field-group-team) .elementor-field-option {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
}

.meetch-c-form-demo :is(.elementor-field-group-connection, .elementor-field-group-bringing, .elementor-field-group-platform, .elementor-field-group-team) .elementor-field-option input:is([type="radio"], [type="checkbox"]) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.meetch-c-form-demo :is(.elementor-field-group-connection, .elementor-field-group-bringing, .elementor-field-group-platform, .elementor-field-group-team) .elementor-field-option label {
  display: inline-flex;
  align-items: center;
  height: 2.04em;
  padding: 0 0.8rem 0.2rem;
  border: 1px solid var(--meetch-form-demo-bordure);
  border-radius: 999px;
  background-color: var(--e-global-color-24359eb, #fff);
  color: var(--e-global-color-primary, #010340);
  font-size: 1.06rem;
  font-weight: 500;
  line-height: 1em;
  white-space: nowrap;
  transition: border-color var(--meetch-u-duration-fast) var(--meetch-u-easing),
    background-color var(--meetch-u-duration-fast) var(--meetch-u-easing),
    color var(--meetch-u-duration-fast) var(--meetch-u-easing);
}

.meetch-c-form-demo :is(.elementor-field-group-connection, .elementor-field-group-bringing, .elementor-field-group-platform, .elementor-field-group-team) .elementor-field-option input:is([type="radio"], [type="checkbox"]):checked + label {
  border-color: var(--e-global-color-secondary, #0022f5);
  background-color: var(--e-global-color-secondary, #0022f5);
  color: var(--e-global-color-24359eb, #fff);
}

.meetch-c-form-demo :is(.elementor-field-group-connection, .elementor-field-group-bringing, .elementor-field-group-platform, .elementor-field-group-team) .elementor-field-option input:is([type="radio"], [type="checkbox"]):not(:checked):hover + label {
  border-color: rgba(var(--meetch-primary-rgb), 0.32);
}

.meetch-c-form-demo :is(.elementor-field-group-connection, .elementor-field-group-bringing, .elementor-field-group-platform, .elementor-field-group-team) .elementor-field-option input:is([type="radio"], [type="checkbox"]):focus-visible + label {
  outline: 3px solid var(--e-global-color-secondary, #0022f5);
  outline-offset: 2px;
}

/* Le bouton d'envoi est désactivé tant que le consentement n'est pas coché (meetch.js). */
.meetch-c-form-demo button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Croix de la popup qui porte le formulaire : position, couleurs et taille de l'icône sont
   réglées dans le modèle 3881 ; Elementor n'a ni dimension ni bordure pour ce bouton. */
.elementor-popup-modal:has(.meetch-c-form-demo) .dialog-close-button {
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(var(--meetch-primary-rgb), 0.16);
  border-radius: 0.4375rem;
  transition: border-color var(--meetch-u-duration-fast) var(--meetch-u-easing);
}

.elementor-popup-modal:has(.meetch-c-form-demo) .dialog-close-button:hover {
  border-color: rgba(var(--meetch-primary-rgb), 0.32);
}

.elementor-popup-modal:has(.meetch-c-form-demo) .dialog-close-button:focus-visible {
  outline: 3px solid var(--e-global-color-secondary, #0022f5);
  outline-offset: 2px;
}

/* Rail étroit : seule l'étape en cours garde son libellé. */
@media (max-width: 767px) {
  .meetch-c-form-demo .e-form__indicators__indicator:not(.e-form__indicators__indicator--state-active) .e-form__indicators__indicator__label {
    display: none;
  }

  .meetch-c-form-demo .e-form__indicators .e-form__indicators__indicator__separator {
    flex-basis: 1.5rem;
    width: 1.5rem;
    margin: 0 0.5rem;
  }
}