/* ============================================================
   CEWeb Widgets — Cartes (icône + texte)
   Tous les réglages de l'onglet Style arrivent par des variables
   --ceweb-cartes-* posées sur .ceweb-cartes 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 courant, -9
   bordures, -11 fond des cartes, comme le reste du plugin. Les contrôles de
   couleur de l'onglet Style 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. Y mettre un
   hexadécimal par défaut couperait le lien avec la palette.
   ============================================================ */

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

  /* Alignement. `--align` sert de text-align, `--self` en est la traduction
     pour les éléments en boîte (pastille, lien) : align-self ne connaît ni
     `left` ni `right`. Les deux sont écrites d'un coup par le contrôle
     Alignement, via son selectors_dictionary. Déclarées ici et non sur la
     carte : une déclaration locale sur la carte battrait celle du contrôle. */
  --ceweb-cartes-align: left;
  --ceweb-cartes-self: flex-start;
  /* Point de départ de la lueur de survol : l'angle de la pastille, donc le
     même côté que l'alignement (écrit par le même contrôle). */
  --ceweb-cartes-glow-x: 0%;

  /* Carte */
  --ceweb-cartes-card-bg: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-cartes-card-bg-hover: var(--ceweb-cartes-card-bg);
  --ceweb-cartes-card-border-color: var(--theme-palette-color-9, #E2E8F0);
  --ceweb-cartes-card-border-width: 1px;
  --ceweb-cartes-card-radius: 22px;
  --ceweb-cartes-card-padding: 26px 28px;
  --ceweb-cartes-card-gap: 10px;
  --ceweb-cartes-ring-width: 1px;
  --ceweb-cartes-lift: 6px;
  --ceweb-cartes-glow-amount: 10%;

  /* Élément d'accent. --ceweb-cartes-accent est la seule couleur qu'une carte
     peut redéfinir pour son compte (contrôle « Couleur d'accent »). */
  --ceweb-cartes-accent: var(--theme-palette-color-1, #1A6FFF);
  --ceweb-cartes-badge-size: 56px;
  --ceweb-cartes-badge-radius: 16px;
  --ceweb-cartes-badge-gap: 26px;
  --ceweb-cartes-badge-tint-amount: 12%;
  --ceweb-cartes-badge-tint-base: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-cartes-icon-size: 24px;
  --ceweb-cartes-badge-hover-scale: 1.08;
  --ceweb-cartes-badge-hover-rotate: -6deg;
  --ceweb-cartes-halo-size: 6px;
  --ceweb-cartes-halo-amount: 14%;
  --ceweb-cartes-line-width: 44px;
  --ceweb-cartes-line-height: 5px;
  --ceweb-cartes-line-radius: 999px;
  --ceweb-cartes-line-gap: 14px;

  /* Textes */
  --ceweb-cartes-title-color: var(--theme-palette-color-1, #1A6FFF);
  --ceweb-cartes-text-color: var(--theme-palette-color-7, #475569);
  --ceweb-cartes-strong-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-cartes-cta-color: var(--theme-palette-color-1, #1A6FFF);
  --ceweb-cartes-cta-color-hover: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-cartes-cta-gap: 16px;

  /* Fond du bloc — transparent tant que rien n'est réglé dans l'onglet Style. */
  --ceweb-cartes-radius: 0px;
  --ceweb-cartes-padding: 0px;

  /* Mouvement — mêmes valeurs que « Atouts », pour que les deux rangées de
     cartes du site se comportent pareil. La durée est écrite par le contrôle
     Durée de la transition. */
  --ceweb-cartes-duration: 320ms;
  --ceweb-cartes-ease: cubic-bezier(.2, .7, .3, 1);
  /* Léger rebond : la pastille dépasse sa pose d'arrivée puis s'y installe. */
  --ceweb-cartes-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ceweb-cartes-reveal-shift: 32px;
  --ceweb-cartes-reveal-scale: .95;
  --ceweb-cartes-reveal-duration: 760ms;
  --ceweb-cartes-reveal-step: 120ms;
  --ceweb-cartes-reveal-range-step: 9%;

  /* Pas de font-family ici : les cartes prennent la police du thème, celle du
     corps de page pour le texte et celle des titres pour les titres. */
  color: var(--ceweb-cartes-text-color);

  /* Fond le plus profond, derrière les cartes. Pas d'`overflow: hidden` :
     il rognerait l'ombre des cartes, qui doit justement pouvoir déborder. */
  padding: var(--ceweb-cartes-padding);
  border-radius: var(--ceweb-cartes-radius);
}
.ceweb-cartes *,
.ceweb-cartes *::before,
.ceweb-cartes *::after{ box-sizing: border-box; }

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

/* ============================================================
   Grille
   ============================================================ */
.ceweb-cartes__grid{
  display: grid;
  grid-template-columns: repeat(var(--ceweb-cartes-columns), minmax(0, 1fr));
  gap: var(--ceweb-cartes-gap);
  /* `stretch` : toutes les cartes d'une rangée prennent la hauteur de la plus
     haute, condition pour que les liens s'alignent sur le bas. */
  align-items: stretch;
}

/* L'élément de grille 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-cartes__item{
  display: grid;
  min-width: 0;
}

/* ============================================================
   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-cartes__card{
  position: relative;           /* Repère du lien étiré, de la lueur et de la surcouche de bordure. */
  isolation: isolate;           /* La lueur à z-index -1 reste au-dessus du fond de la carte. */
  display: flex;
  flex-direction: column;
  gap: var(--ceweb-cartes-card-gap);
  padding: var(--ceweb-cartes-card-padding);
  background: var(--ceweb-cartes-card-bg);
  border: var(--ceweb-cartes-card-border-width) solid var(--ceweb-cartes-card-border-color);
  border-radius: var(--ceweb-cartes-card-radius);
  text-align: var(--ceweb-cartes-align);
  transition:
    transform var(--ceweb-cartes-duration) var(--ceweb-cartes-ease),
    background-color var(--ceweb-cartes-duration) var(--ceweb-cartes-ease),
    border-color var(--ceweb-cartes-duration) var(--ceweb-cartes-ease),
    box-shadow var(--ceweb-cartes-duration) var(--ceweb-cartes-ease);

  /* Couleur de la bordure de survol : celle du contrôle si elle est réglée,
     sinon la couleur d'accent de la carte. Résolue ici, et pas sur
     `.ceweb-cartes`, parce que `--ceweb-cartes-accent` peut être redéfinie
     carte par carte : un var() imbriqué est substitué sur l'élément qui porte
     la déclaration, pas sur celui qui s'en sert plus bas. Déclarée sur le
     conteneur, elle figerait l'accent du widget pour toutes les cartes. */
  --ceweb-cartes-ring: var(--ceweb-cartes-ring-color, var(--ceweb-cartes-accent));

  /* Teinte de la pastille, même raison. Le repli neutre est dans la variable
     et non dans une seconde déclaration : une déclaration contenant un var()
     invalide retombe sur `unset`, jamais sur la déclaration précédente.
     Le halo de la pastille et la lueur de la carte suivent la même règle. */
  --ceweb-cartes-badge-tint: #F4F8FF;
  --ceweb-cartes-halo: transparent;
  --ceweb-cartes-glow: transparent;
}

@supports (color: color-mix(in srgb, red 50%, white)){
  .ceweb-cartes__card{
    --ceweb-cartes-badge-tint: color-mix(
      in srgb,
      var(--ceweb-cartes-accent) var(--ceweb-cartes-badge-tint-amount),
      var(--ceweb-cartes-badge-tint-base)
    );
    --ceweb-cartes-halo: color-mix(
      in srgb,
      var(--ceweb-cartes-accent) var(--ceweb-cartes-halo-amount),
      transparent
    );
    --ceweb-cartes-glow: color-mix(
      in srgb,
      var(--ceweb-cartes-glow-color, var(--ceweb-cartes-accent)) var(--ceweb-cartes-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-cartes__card::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    120% 90% at var(--ceweb-cartes-glow-x) 0%,
    var(--ceweb-cartes-glow) 0%,
    transparent 62%
  );
  opacity: 0;
  transition: opacity calc(var(--ceweb-cartes-duration) * 1.5) var(--ceweb-cartes-ease);
  pointer-events: none;
}

/* Le survol repeint d'abord la bordure de la carte (border-color, ci-dessus) :
   à épaisseur égale, c'est exactement l'effet voulu, sans surcouche ni risque
   de liseré à l'antialiasing dans les angles.
   Cette surcouche prend le relais dès que la bordure de survol est réglée plus
   épaisse que celle au repos : épaissir la vraie bordure décalerait le contenu
   et ferait sauter toute la grille. Elle est calée sur la boîte de bordure
   (inset négatif) et son rayon compense d'autant, sans quoi elle couperait les
   angles arrondis. */
.ceweb-cartes__card::after{
  content: "";
  position: absolute;
  inset: calc(-1 * var(--ceweb-cartes-card-border-width));
  border-radius: calc(var(--ceweb-cartes-card-radius) + var(--ceweb-cartes-card-border-width));
  box-shadow: inset 0 0 0 var(--ceweb-cartes-ring-width) var(--ceweb-cartes-ring);
  opacity: 0;
  transition: opacity var(--ceweb-cartes-duration) var(--ceweb-cartes-ease);
  pointer-events: none;        /* Ne doit jamais intercepter le clic du lien étiré. */
}

/* ============================================================
   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-cartes--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`, `box-shadow` et des couleurs : rien
   ne touche au flux, le texte ne bouge pas d'un pixel.
   ============================================================ */
.ceweb-cartes--hover .ceweb-cartes__card:hover,
.ceweb-cartes--hover .ceweb-cartes__card:focus-within,
.ceweb-cartes .ceweb-cartes__card.is-featured{
  background: var(--ceweb-cartes-card-bg-hover);
  border-color: var(--ceweb-cartes-ring);
  transform: translateY(calc(-1 * var(--ceweb-cartes-lift)));
}
.ceweb-cartes--hover .ceweb-cartes__card:hover::before,
.ceweb-cartes--hover .ceweb-cartes__card:focus-within::before,
.ceweb-cartes .ceweb-cartes__card.is-featured::before,
.ceweb-cartes--hover .ceweb-cartes__card:hover::after,
.ceweb-cartes--hover .ceweb-cartes__card:focus-within::after,
.ceweb-cartes .ceweb-cartes__card.is-featured::after{
  opacity: 1;
}

/* ============================================================
   Pastille d'icône
   ============================================================ */
.ceweb-cartes__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: var(--ceweb-cartes-self);
  width: var(--ceweb-cartes-badge-size);
  height: var(--ceweb-cartes-badge-size);
  /* L'écart voulu sous la pastille, moins le `gap` déjà posé par la carte.
     `max()` borne à zéro : un espace réglé sous la valeur du gap donnerait une
     marge négative, et la pastille remonterait sur le titre. */
  margin-bottom: max(0px, calc(var(--ceweb-cartes-badge-gap) - var(--ceweb-cartes-card-gap)));
  border-radius: var(--ceweb-cartes-badge-radius);
  background: var(--ceweb-cartes-badge-bg, var(--ceweb-cartes-badge-tint));
  color: var(--ceweb-cartes-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-cartes-halo);
  transition:
    transform calc(var(--ceweb-cartes-duration) * 1.5) var(--ceweb-cartes-spring),
    background-color var(--ceweb-cartes-duration) var(--ceweb-cartes-ease),
    color var(--ceweb-cartes-duration) var(--ceweb-cartes-ease),
    box-shadow var(--ceweb-cartes-duration) var(--ceweb-cartes-ease);
}

.ceweb-cartes--hover .ceweb-cartes__card:hover .ceweb-cartes__badge,
.ceweb-cartes--hover .ceweb-cartes__card:focus-within .ceweb-cartes__badge,
.ceweb-cartes .ceweb-cartes__card.is-featured .ceweb-cartes__badge{
  transform:
    scale(var(--ceweb-cartes-badge-hover-scale))
    rotate(var(--ceweb-cartes-badge-hover-rotate));
  box-shadow: 0 0 0 var(--ceweb-cartes-halo-size) var(--ceweb-cartes-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. Classe distincte de
   `--badge-tint` / `--badge-solid`, qui décrivent le fond au repos. */
.ceweb-cartes--hover.ceweb-cartes--badge-hover-fill .ceweb-cartes__card:hover .ceweb-cartes__badge,
.ceweb-cartes--hover.ceweb-cartes--badge-hover-fill .ceweb-cartes__card:focus-within .ceweb-cartes__badge,
.ceweb-cartes--badge-hover-fill .ceweb-cartes__card.is-featured .ceweb-cartes__badge{
  background: var(--ceweb-cartes-badge-bg-hover, var(--ceweb-cartes-accent));
  color: var(--ceweb-cartes-icon-color-hover, var(--ceweb-cartes-card-bg-hover));
}

.ceweb-cartes__badge i,
.ceweb-cartes__badge svg{
  display: block;
  font-size: var(--ceweb-cartes-icon-size);
  line-height: 1;
}
/* Icône SVG (bibliothèque personnalisée) : dimensionnée en dur, puisqu'elle ne
   suit pas la taille de police, et remplie en `currentColor` pour suivre
   l'accent quelle que soit la couleur d'origine du fichier. */
.ceweb-cartes__badge svg{
  width: var(--ceweb-cartes-icon-size);
  height: var(--ceweb-cartes-icon-size);
  fill: currentColor;
}

/* ============================================================
   Trait d'accent — alternative à la pastille
   ============================================================ */
.ceweb-cartes__line{
  flex: 0 0 auto;
  align-self: var(--ceweb-cartes-self);
  width: var(--ceweb-cartes-line-width);
  height: var(--ceweb-cartes-line-height);
  margin-bottom: max(0px, calc(var(--ceweb-cartes-line-gap) - var(--ceweb-cartes-card-gap)));
  border-radius: var(--ceweb-cartes-line-radius);
  background: var(--ceweb-cartes-accent);
}

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

/* Ni font-family ni font-size : le titre prend la police et la taille que le
   thème donne à sa balise (h3 par défaut, réglable dans l'onglet Contenu).
   Seuls la couleur, la graisse et la marge sont repris ici.

   Sélecteur volontairement long (0,3,0) : une règle de thème du type
   `.entry-content h3` (0,1,1) passerait devant une classe isolée et
   reprendrait la main sur la couleur. Long plutôt qu'`!important`, pour que
   l'onglet Style reste capable de gagner. */
.ceweb-cartes .ceweb-cartes__card .ceweb-cartes__title{
  margin: 0;
  font-weight: 600;
  color: var(--ceweb-cartes-title-color);
  transition: color var(--ceweb-cartes-duration) var(--ceweb-cartes-ease);
}
.ceweb-cartes--hover .ceweb-cartes__card:hover .ceweb-cartes__title,
.ceweb-cartes--hover .ceweb-cartes__card:focus-within .ceweb-cartes__title,
.ceweb-cartes .ceweb-cartes__card.is-featured .ceweb-cartes__title{
  color: var(--ceweb-cartes-title-color-hover, var(--ceweb-cartes-title-color));
}

.ceweb-cartes__title a{ color: inherit; text-decoration: none; }

/* Lien étiré : son ::after recouvre toute la carte. C'est le titre qui porte le
   lien — emboîter la carte entière dans un <a> ferait du paragraphe et du gras
   le nom accessible du lien, interminable à l'oreille. */
.ceweb-cartes__stretch::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--ceweb-cartes-card-radius);
}
.ceweb-cartes__stretch:focus-visible{
  outline: 2px solid var(--ceweb-cartes-ring);
  outline-offset: 4px;
  border-radius: 4px;
}

.ceweb-cartes__text{
  color: var(--ceweb-cartes-text-color);
  font-size: 16px;
  line-height: 1.6;
}
.ceweb-cartes__text p{ margin: 0 0 .6em; }
.ceweb-cartes__text > :first-child{ margin-top: 0; }
.ceweb-cartes__text > :last-child{ margin-bottom: 0; }

.ceweb-cartes__strong{
  color: var(--ceweb-cartes-strong-color);
  font-weight: 600;
}

/* `margin-top: auto` aligne les liens sur le bas de la rangée quand les
   paragraphes n'ont pas la même hauteur. L'écart au-dessus passe par un
   padding : une marge serait absorbée par ce `auto`. */
.ceweb-cartes__cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: var(--ceweb-cartes-self);
  margin-top: auto;
  padding-top: max(0px, calc(var(--ceweb-cartes-cta-gap) - var(--ceweb-cartes-card-gap)));
  color: var(--ceweb-cartes-cta-color);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: gap .2s var(--ceweb-cartes-ease), color var(--ceweb-cartes-duration) var(--ceweb-cartes-ease);
}
.ceweb-cartes__cta:hover,
.ceweb-cartes__cta:focus-visible{
  gap: 14px;
  color: var(--ceweb-cartes-cta-color-hover);
}

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

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

   1. Par défaut, une animation au chargement, décalée d'une carte à la
      suivante grâce à `--ceweb-cartes-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. Les cartes d'une
      même rangée entrant dans l'écran au même instant, chacune décale 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-cartes-rise{
  from{
    opacity: 0;
    transform: translateY(var(--ceweb-cartes-reveal-shift)) scale(var(--ceweb-cartes-reveal-scale));
  }
  to{ opacity: 1; transform: none; }
}

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

  @supports (animation-timeline: view()){
    .ceweb-cartes--reveal .ceweb-cartes__item{
      --ceweb-cartes-reveal-offset: calc(min(var(--ceweb-cartes-i, 0), 5) * var(--ceweb-cartes-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-cartes-reveal-offset)
        entry calc(55% + var(--ceweb-cartes-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-cartes--reveal .ceweb-cartes__item{
    animation: none;
  }
}

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

   Le soulèvement, le grossissement et la bascule disparaissent ; la bordure,
   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-cartes__card,
  .ceweb-cartes__card::before,
  .ceweb-cartes__card::after,
  .ceweb-cartes__badge,
  .ceweb-cartes .ceweb-cartes__card .ceweb-cartes__title,
  .ceweb-cartes__cta{
    transition: none !important;
  }
  .ceweb-cartes--hover .ceweb-cartes__card:hover,
  .ceweb-cartes--hover .ceweb-cartes__card:focus-within,
  .ceweb-cartes .ceweb-cartes__card.is-featured,
  .ceweb-cartes--hover .ceweb-cartes__card:hover .ceweb-cartes__badge,
  .ceweb-cartes--hover .ceweb-cartes__card:focus-within .ceweb-cartes__badge,
  .ceweb-cartes .ceweb-cartes__card.is-featured .ceweb-cartes__badge{
    transform: none;
  }
}