/* ============================================================
   CEWeb Widgets — Atouts (accueil)
   Tous les réglages de l'onglet Style arrivent par des variables
   --ceweb-atouts-* posées sur .ceweb-atouts par Elementor.

   Les valeurs ci-dessous ne sont qu'un repli, et elles pointent d'abord sur la
   palette du thème — -1 accent, -6 titres et gras, -7 texte, -11 fond des
   cartes. Les contrôles de couleur ont donc un défaut *vide* : tant qu'on n'y
   touche pas, Elementor n'émet rien et c'est le thème qui décide.

   Six variables ne sont JAMAIS déclarées dans cette feuille :
   --ceweb-atouts-badge-bg, -badge-bg-hover, -icon-color-hover, -glow-color,
   -title-color-hover et -card-border-color. Elles sont lues en
   `var(x, repli)`, et un `var()` ne prend son repli que si la variable est
   absente : la déclarer, même vide, tuerait le repli.
   ============================================================ */

/* Le bloc réclame toute la largeur de la section. Dans un conteneur flexbox
   Elementor, un widget est un élément flex en `flex: 0 1 auto` : sa largeur
   suivrait son contenu, et la grille se calculerait sur une boîte rétrécie.
   Même remède que « Constats » ; une largeur posée dans l'onglet Avancé garde
   le dessus, son sélecteur portant l'identifiant de l'élément. */
.elementor-widget-ceweb_atouts{ width: 100%; }

.ceweb-atouts{
  box-sizing: border-box;
  width: 100%;

  /* --- Grille ------------------------------------------------- */
  /* Colonnes responsives côté Elementor (4 / 2 / 1) : aucune media query
     ici, elle écraserait le réglage de l'éditeur. */
  --ceweb-atouts-columns: 4;
  --ceweb-atouts-gap: 28px;
  --ceweb-atouts-align: left;
  --ceweb-atouts-self: flex-start;
  --ceweb-atouts-glow-x: 0%;

  /* --- Fond du bloc — transparent : la section porte le gris clair --- */
  --ceweb-atouts-padding: 0px;
  --ceweb-atouts-radius: 0px;

  /* --- Carte -------------------------------------------------- */
  --ceweb-atouts-card-bg: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-atouts-card-border-width: 1px;
  --ceweb-atouts-card-radius: 28px;
  --ceweb-atouts-card-padding: 40px 38px;
  --ceweb-atouts-lift: 6px;
  --ceweb-atouts-glow-amount: 10%;

  /* --- Pastille ----------------------------------------------- */
  --ceweb-atouts-accent: var(--theme-palette-color-1, #1A6FFF);
  --ceweb-atouts-badge-size: 64px;
  --ceweb-atouts-badge-radius: 18px;
  --ceweb-atouts-badge-gap: 30px;
  --ceweb-atouts-badge-tint-amount: 12%;
  --ceweb-atouts-icon-size: 28px;
  --ceweb-atouts-icon-stroke: 2;
  --ceweb-atouts-badge-hover-scale: 1.08;
  --ceweb-atouts-badge-hover-rotate: -6deg;
  --ceweb-atouts-badge-hover-ring: 6px;
  --ceweb-atouts-badge-hover-ring-amount: 14%;

  /* --- Textes ------------------------------------------------- */
  --ceweb-atouts-title-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-atouts-title-gap: 14px;
  --ceweb-atouts-text-color: var(--theme-palette-color-7, #475569);
  --ceweb-atouts-strong-color: var(--theme-palette-color-6, #0C1A3C);

  /* --- Mouvement ---------------------------------------------- */
  --ceweb-atouts-duration: 320ms;
  --ceweb-atouts-ease: cubic-bezier(.2, .7, .3, 1);
  /* Léger rebond : la pastille dépasse sa pose d'arrivée puis s'y installe. */
  --ceweb-atouts-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ceweb-atouts-reveal-shift: 32px;
  --ceweb-atouts-reveal-scale: .95;
  --ceweb-atouts-reveal-duration: 760ms;
  --ceweb-atouts-reveal-step: 120ms;
  --ceweb-atouts-reveal-range-step: 9%;

  /* Pas de font-family : le bloc prend les polices du thème, celle du corps
     pour le texte, celle de sa balise pour le titre. */
  padding: var(--ceweb-atouts-padding);
  border-radius: var(--ceweb-atouts-radius);
  color: var(--ceweb-atouts-text-color);
}
.ceweb-atouts *,
.ceweb-atouts *::before,
.ceweb-atouts *::after{ box-sizing: border-box; }

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

/* ============================================================
   Grille

   La liste est un <ul> emboîté dans la racine, jamais la racine elle-même, et
   ses remises à zéro passent par des sélecteurs longs : `.elementor ul`
   (0,1,1) reprendrait sinon la marge, le retrait et les puces — le piège déjà
   rencontré sur « Accordéon d'images » et « Méthode ».
   ============================================================ */
.ceweb-atouts .ceweb-atouts__list{
  display: grid;
  grid-template-columns: repeat(var(--ceweb-atouts-columns), minmax(0, 1fr));
  gap: var(--ceweb-atouts-gap);
  align-items: stretch;          /* Cartes d'une rangée à la même hauteur. */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* L'élément de liste porte l'apparition ; en grille d'une seule cellule, la
   carte qu'il contient s'étire d'elle-même à la hauteur de la rangée. */
.ceweb-atouts .ceweb-atouts__list .ceweb-atouts__item{
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ceweb-atouts .ceweb-atouts__list .ceweb-atouts__item::marker{ content: none; }

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

   Deux boîtes emboîtées, et c'est structurel : `__item` porte l'apparition,
   `__card` le survol. Une animation en `fill-mode: both` garde la main sur
   `transform` jusque dans son état final — posée sur la carte, elle
   mangerait le soulèvement, sans rien signaler.
   ============================================================ */
.ceweb-atouts__card{
  position: relative;            /* Repère du lien étiré et de la lueur. */
  isolation: isolate;            /* La lueur à z-index -1 reste au-dessus du fond. */
  display: flex;
  flex-direction: column;
  padding: var(--ceweb-atouts-card-padding);
  background: var(--ceweb-atouts-card-bg);
  border: var(--ceweb-atouts-card-border-width) solid var(--ceweb-atouts-card-border-color, transparent);
  border-radius: var(--ceweb-atouts-card-radius);
  text-align: var(--ceweb-atouts-align);
  transition:
    transform var(--ceweb-atouts-duration) var(--ceweb-atouts-ease),
    box-shadow var(--ceweb-atouts-duration) var(--ceweb-atouts-ease),
    border-color var(--ceweb-atouts-duration) var(--ceweb-atouts-ease);

  /* Teintes calculées à partir de l'accent. Déclarées ici et non sur la
     racine : `--ceweb-atouts-accent` peut être redéfinie carte par carte, et
     un var() imbriqué dans une propriété personnalisée est substitué sur
     l'élément qui porte la déclaration — sur la racine, elles figeraient
     l'accent du bloc pour toutes les cartes. Le repli neutre est la valeur de
     la variable elle-même, jamais une déclaration précédente : une déclaration
     contenant un var() invalide retombe sur `unset`. */
  --ceweb-atouts-tint: #EEF3FF;
  --ceweb-atouts-halo: transparent;
  --ceweb-atouts-glow: transparent;
}

@supports (color: color-mix(in srgb, red 50%, white)){
  .ceweb-atouts__card{
    --ceweb-atouts-tint: color-mix(
      in srgb,
      var(--ceweb-atouts-accent) var(--ceweb-atouts-badge-tint-amount),
      var(--theme-palette-color-11, #FFFFFF)
    );
    --ceweb-atouts-halo: color-mix(
      in srgb,
      var(--ceweb-atouts-accent) var(--ceweb-atouts-badge-hover-ring-amount),
      transparent
    );
    --ceweb-atouts-glow: color-mix(
      in srgb,
      var(--ceweb-atouts-glow-color, var(--ceweb-atouts-accent)) var(--ceweb-atouts-glow-amount),
      transparent
    );
  }
}

/* Lueur : un dégradé radial de l'accent qui part de l'angle de la pastille.
   Fondu d'opacité, rien d'autre — un dégradé ne s'anime pas, son opacité si.
   `border-radius: inherit` la cale sur les angles de la carte sans recourir à
   un `overflow: hidden` qui rognerait le halo de la pastille. */
.ceweb-atouts__card::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    120% 90% at var(--ceweb-atouts-glow-x) 0%,
    var(--ceweb-atouts-glow) 0%,
    transparent 62%
  );
  opacity: 0;
  transition: opacity calc(var(--ceweb-atouts-duration) * 1.5) var(--ceweb-atouts-ease);
  pointer-events: none;
}

/* ============================================================
   Pastille
   ============================================================ */
.ceweb-atouts__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: var(--ceweb-atouts-self);
  width: var(--ceweb-atouts-badge-size);
  height: var(--ceweb-atouts-badge-size);
  margin-bottom: var(--ceweb-atouts-badge-gap);
  border-radius: var(--ceweb-atouts-badge-radius);
  background: var(--ceweb-atouts-badge-bg, var(--ceweb-atouts-tint));
  color: var(--ceweb-atouts-accent);
  /* Halo au repos de taille nulle mais déjà coloré : la transition fait
     grandir l'anneau au lieu de le faire surgir en fondu. */
  box-shadow: 0 0 0 0 var(--ceweb-atouts-halo);
  transition:
    transform calc(var(--ceweb-atouts-duration) * 1.5) var(--ceweb-atouts-spring),
    background-color var(--ceweb-atouts-duration) var(--ceweb-atouts-ease),
    color var(--ceweb-atouts-duration) var(--ceweb-atouts-ease),
    box-shadow var(--ceweb-atouts-duration) var(--ceweb-atouts-ease);
}

.ceweb-atouts__badge i{
  display: block;
  font-size: var(--ceweb-atouts-icon-size);
  line-height: 1;
}
/* Sélecteur à deux classes et une balise : une règle tenant sur
   `.ceweb-atouts__badge svg` (0,1,1) serait à égalité avec celles qu'Elementor
   pose sur ses icônes SVG en ligne, et sa feuille est chargée après — le
   curseur « Taille de l'icône » ne ferait plus rien. Même piège que
   « Engagements » et « Constats ». */
.ceweb-atouts .ceweb-atouts__badge svg{
  display: block;
  width: var(--ceweb-atouts-icon-size);
  height: var(--ceweb-atouts-icon-size);
  max-width: 100%;
  max-height: 100%;
  fill: currentColor;
}
/* Pictos embarqués : au trait, pas en aplat. */
.ceweb-atouts .ceweb-atouts__badge .ceweb-atouts__svg{
  fill: none;
  stroke: currentColor;
  stroke-width: var(--ceweb-atouts-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   Textes

   Sélecteurs volontairement longs (0,3,0) : une règle de thème du type
   `.entry-content h3` (0,1,1) passerait devant une classe isolée. Longs
   plutôt qu'`!important`, pour que l'onglet Style garde la main. Le titre
   prend la police et la taille de sa balise : seuls couleur, graisse et marge
   sont posés ici.
   ============================================================ */
.ceweb-atouts .ceweb-atouts__card .ceweb-atouts__title{
  margin: 0 0 var(--ceweb-atouts-title-gap);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ceweb-atouts-title-color);
  transition: color var(--ceweb-atouts-duration) var(--ceweb-atouts-ease);
}
.ceweb-atouts .ceweb-atouts__title a{ color: inherit; text-decoration: none; }

/* Lien étiré : son ::after recouvre toute la carte. */
.ceweb-atouts__link::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--ceweb-atouts-card-radius);
}
.ceweb-atouts__link:focus-visible{ outline: none; }
.ceweb-atouts__link:focus-visible::after{
  outline: 2px solid var(--ceweb-atouts-accent);
  outline-offset: 3px;
}

.ceweb-atouts .ceweb-atouts__card .ceweb-atouts__text{
  color: var(--ceweb-atouts-text-color);
  font-size: 18px;
  line-height: 1.65;
}
.ceweb-atouts .ceweb-atouts__text p{ margin: 0 0 .6em; }
.ceweb-atouts .ceweb-atouts__text > :first-child{ margin-top: 0; }
.ceweb-atouts .ceweb-atouts__text > :last-child{ margin-bottom: 0; }
.ceweb-atouts .ceweb-atouts__text strong{
  color: var(--ceweb-atouts-strong-color);
  font-weight: 600;
}

/* ============================================================
   Survol

   Trois états toujours traités ensemble : survol, focus clavier (sans lui,
   l'effet resterait invisible à qui navigue sans souris) et mise en avant.
   Les deux premiers vivent sous `.ceweb-atouts--hover`, une classe que PHP
   n'émet que si le réglage est actif ; la mise en avant n'en dépend pas.

   Tout passe par `transform`, `opacity` et `box-shadow` : rien ne touche au
   flux, le texte ne bouge pas d'un pixel.
   ============================================================ */
.ceweb-atouts--hover .ceweb-atouts__card:hover,
.ceweb-atouts--hover .ceweb-atouts__card:focus-within,
.ceweb-atouts .ceweb-atouts__card.is-featured{
  transform: translateY(calc(-1 * var(--ceweb-atouts-lift)));
}

.ceweb-atouts--hover .ceweb-atouts__card:hover::before,
.ceweb-atouts--hover .ceweb-atouts__card:focus-within::before,
.ceweb-atouts .ceweb-atouts__card.is-featured::before{
  opacity: 1;
}

.ceweb-atouts--hover .ceweb-atouts__card:hover .ceweb-atouts__badge,
.ceweb-atouts--hover .ceweb-atouts__card:focus-within .ceweb-atouts__badge,
.ceweb-atouts .ceweb-atouts__card.is-featured .ceweb-atouts__badge{
  transform:
    scale(var(--ceweb-atouts-badge-hover-scale))
    rotate(var(--ceweb-atouts-badge-hover-rotate));
  box-shadow: 0 0 0 var(--ceweb-atouts-badge-hover-ring) var(--ceweb-atouts-halo);
}

/* Remplissage : la pastille prend l'accent plein, l'icône passe dans la
   couleur du fond de carte et se détache en réserve. */
.ceweb-atouts--hover.ceweb-atouts--badge-fill .ceweb-atouts__card:hover .ceweb-atouts__badge,
.ceweb-atouts--hover.ceweb-atouts--badge-fill .ceweb-atouts__card:focus-within .ceweb-atouts__badge,
.ceweb-atouts--badge-fill .ceweb-atouts__card.is-featured .ceweb-atouts__badge{
  background: var(--ceweb-atouts-badge-bg-hover, var(--ceweb-atouts-accent));
  color: var(--ceweb-atouts-icon-color-hover, var(--ceweb-atouts-card-bg));
}

.ceweb-atouts--hover .ceweb-atouts__card:hover .ceweb-atouts__title,
.ceweb-atouts--hover .ceweb-atouts__card:focus-within .ceweb-atouts__title,
.ceweb-atouts .ceweb-atouts__card.is-featured .ceweb-atouts__title{
  color: var(--ceweb-atouts-title-color-hover, var(--ceweb-atouts-title-color));
}

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

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

   1. Par défaut, une animation au chargement, décalée d'une carte à la
      suivante grâce à `--ceweb-atouts-i`, que PHP écrit sur chaque élément.
   2. Là où les animations pilotées par le défilement existent, la même
      animation est liée à la `view()` de l'élément et se joue quand la carte
      entre dans l'écran. Le délai en millisecondes y est remis à zéro — il
      s'ajouterait à un compteur qui n'est plus du temps. Or les cartes d'une
      même rangée entrent dans l'écran au même instant : sans autre retard, la
      rangée apparaîtrait d'un bloc. Chaque carte décale donc sa plage `entry`
      de son rang, plafonné à 5 pour qu'une longue grille n'attende pas d'être
      presque en haut de l'écran.

   `both` en mode de remplissage : sans lui, chaque carte clignoterait une
   image à sa position d'arrivée avant de reculer.
   ============================================================ */
@keyframes ceweb-atouts-rise{
  from{
    opacity: 0;
    transform: translateY(var(--ceweb-atouts-reveal-shift)) scale(var(--ceweb-atouts-reveal-scale));
  }
  to{ opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference){
  .ceweb-atouts--reveal .ceweb-atouts__item{
    animation: ceweb-atouts-rise var(--ceweb-atouts-reveal-duration) var(--ceweb-atouts-ease) both;
    animation-delay: calc(var(--ceweb-atouts-i, 0) * var(--ceweb-atouts-reveal-step));
  }

  @supports (animation-timeline: view()){
    .ceweb-atouts--reveal .ceweb-atouts__item{
      --ceweb-atouts-reveal-offset: calc(min(var(--ceweb-atouts-i, 0), 5) * var(--ceweb-atouts-reveal-range-step));
      animation-timeline: view();
      /* `auto` : c'est la plage de défilement qui fait la durée. */
      animation-duration: auto;
      animation-range:
        entry var(--ceweb-atouts-reveal-offset)
        entry calc(55% + var(--ceweb-atouts-reveal-offset));
      animation-delay: 0s;
    }
  }

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

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

   Le soulèvement, le grossissement et la bascule disparaissent ; l'ombre, la
   lueur, le remplissage et le halo restent : ce sont eux qui signalent
   l'état, mouvement ou pas.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .ceweb-atouts__card,
  .ceweb-atouts__card::before,
  .ceweb-atouts__badge,
  .ceweb-atouts .ceweb-atouts__card .ceweb-atouts__title{
    transition: none !important;
  }
  .ceweb-atouts--hover .ceweb-atouts__card:hover,
  .ceweb-atouts--hover .ceweb-atouts__card:focus-within,
  .ceweb-atouts .ceweb-atouts__card.is-featured,
  .ceweb-atouts--hover .ceweb-atouts__card:hover .ceweb-atouts__badge,
  .ceweb-atouts--hover .ceweb-atouts__card:focus-within .ceweb-atouts__badge,
  .ceweb-atouts .ceweb-atouts__card.is-featured .ceweb-atouts__badge{
    transform: none;
  }
}