/* ============================================================
   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;

  /* 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: 4px;

  /* É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-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;

  /* Transition — écrite par le contrôle Durée. */
  --ceweb-cartes-duration: 300ms;
  --ceweb-cartes-ease: ease;

  /* 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 *{ 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;
}

/* ============================================================
   Carte
   ============================================================ */
.ceweb-cartes__card{
  position: relative;           /* Repère du lien étiré et de la surcouche de bordure. */
  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. */
  --ceweb-cartes-badge-tint: #F4F8FF;
}

@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)
    );
  }
}

/* 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é. */
}

/* `:focus-within` allume la carte quand son lien reçoit le focus clavier :
   sans lui, l'état de survol resterait invisible à qui navigue au clavier.
   `.is-featured` est le même état, figé depuis l'éditeur. */
.ceweb-cartes__card:hover,
.ceweb-cartes__card:focus-within,
.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__card:hover::after,
.ceweb-cartes__card:focus-within::after,
.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);
}

.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__card:hover .ceweb-cartes__title,
.ceweb-cartes__card:focus-within .ceweb-cartes__title,
.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);
}

/* ============================================================
   Mouvement réduit
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .ceweb-cartes__card,
  .ceweb-cartes__card::after,
  .ceweb-cartes__title,
  .ceweb-cartes__cta{
    transition: none !important;
  }
  /* Le soulèvement disparaît ; la bordure et l'ombre restent : ce sont elles
     qui signalent l'état, mouvement ou pas. */
  .ceweb-cartes__card:hover,
  .ceweb-cartes__card:focus-within,
  .ceweb-cartes__card.is-featured{
    transform: none;
  }
}