/* ============================================================
   CEWeb Widgets — Mega menu (rubriques + carte)

   Le contenu du mega menu « Nos offres » : un titre dont la fin prend la
   couleur d'accent, des rubriques en colonnes (une pastille, puis des
   entrées : libellé, description en italique, badge facultatif) et une carte
   d'appel à l'action. Aucun JavaScript : l'ouverture du panneau appartient au
   menu de Blocksy, le survol des entrées est en CSS.

   Tous les réglages de l'onglet Style arrivent par des variables
   --ceweb-megamenu-* posées sur .ceweb-megamenu par Elementor. Les valeurs
   ci-dessous ne sont qu'un repli, et elles pointent d'abord sur la palette du
   thème — -1 accent, -6 titres, -7 texte courant, -11 fond.

   Trois variables ne sont volontairement **jamais déclarées ici** —
   --ceweb-megamenu-columns, --ceweb-megamenu-item-badge-bg et
   --ceweb-megamenu-item-badge-color. Le CSS les lit en `var(x, repli)`, et un
   var() ne prend son repli que si la variable n'est *pas* déclarée.
   ============================================================ */

/* Le bloc réclame toute la largeur du panneau. Dans un conteneur flexbox
   Elementor, un widget est un élément flex en `flex: 0 1 auto` : sa largeur
   suit son contenu, et les colonnes se calculeraient sur une boîte déjà
   rétrécie. Même remède que « Constats » et l'« Accordéon d'images ». */
.elementor-widget-ceweb_megamenu{ width: 100%; }

.ceweb-megamenu{
  width: 100%;
  /* Sur la racine aussi, pas seulement sur ses enfants : avec sa propre marge
     intérieure, un `width: 100%` en content-box déborderait du panneau de
     toute cette marge. */
  box-sizing: border-box;

  /* --- Couleurs maîtresses ------------------------------------- */
  --ceweb-megamenu-accent: var(--theme-palette-color-1, #1A6FFF);
  /* Le vert de la maquette. Aucune couleur de la palette ne lui correspond,
     d'où la valeur fixe — isolée dans cette seule déclaration, et réglable
     depuis l'onglet Style. */
  --ceweb-megamenu-highlight: #5FBF7A;

  /* --- Bloc ------------------------------------------------- */
  /* Le bloc porte son propre fond, son rayon et sa marge : laissé à ses
     réglages, le panneau de Blocksy colle le contenu à ses bords sur un fond
     gris. Ces trois valeurs ne dépendent donc pas de ce qu'il y a autour. */
  --ceweb-megamenu-bg: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-megamenu-radius: 28px;
  --ceweb-megamenu-padding: 48px 48px 48px 56px;

  /* --- Disposition ------------------------------------------- */
  --ceweb-megamenu-columns-gap: 64px;
  --ceweb-megamenu-body-gap: 56px;
  --ceweb-megamenu-card-basis: 32%;
  --ceweb-megamenu-main-basis: 480px;
  --ceweb-megamenu-card-self: stretch;

  /* --- Titre ------------------------------------------------- */
  --ceweb-megamenu-title-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-megamenu-title-accent-color: var(--ceweb-megamenu-accent);
  --ceweb-megamenu-title-gap: 48px;

  /* --- Pastilles de rubrique --------------------------------- */
  --ceweb-megamenu-pill-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-megamenu-pill-bg: transparent;
  --ceweb-megamenu-pill-border-color: var(--ceweb-megamenu-accent);
  --ceweb-megamenu-pill-border-width: 2px;
  --ceweb-megamenu-pill-radius: 999px;
  --ceweb-megamenu-pill-padding: 10px 28px;
  --ceweb-megamenu-pill-gap: 36px;
  --ceweb-megamenu-pill-color-hover: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-megamenu-pill-bg-hover: var(--ceweb-megamenu-accent);

  /* --- Entrées ----------------------------------------------- */
  --ceweb-megamenu-entry-gap: 28px;
  --ceweb-megamenu-label-gap: 4px;
  --ceweb-megamenu-label-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-megamenu-label-color-hover: var(--ceweb-megamenu-accent);
  --ceweb-megamenu-desc-color: var(--theme-palette-color-7, #475569);
  --ceweb-megamenu-desc-color-hover: var(--ceweb-megamenu-desc-color);
  --ceweb-megamenu-icon-color: var(--ceweb-megamenu-accent);
  --ceweb-megamenu-icon-size: 22px;
  --ceweb-megamenu-icon-gap: 14px;

  /* --- Survol des entrées ------------------------------------ */
  --ceweb-megamenu-hover-bg-amount: 6%;
  --ceweb-megamenu-bleed-x: 14px;
  --ceweb-megamenu-bleed-y: 10px;
  --ceweb-megamenu-hover-radius: 12px;
  --ceweb-megamenu-hover-shift: 0px;
  --ceweb-megamenu-hover-duration: 200ms;

  /* --- Badges ------------------------------------------------ */
  --ceweb-megamenu-badge-bg: var(--ceweb-megamenu-highlight);
  --ceweb-megamenu-badge-radius: 999px;
  --ceweb-megamenu-badge-padding: 4px 14px;

  /* --- Carte ------------------------------------------------- */
  --ceweb-megamenu-card-bg: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-megamenu-card-radius: 28px;
  --ceweb-megamenu-card-padding: 48px 48px 40px;
  --ceweb-megamenu-card-gap: 28px;
  --ceweb-megamenu-card-icon-bg: var(--ceweb-megamenu-highlight);
  --ceweb-megamenu-card-icon-color: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-megamenu-card-icon-box: 76px;
  --ceweb-megamenu-card-icon-size: 34px;
  --ceweb-megamenu-card-icon-radius: 18px;
  --ceweb-megamenu-card-title-color: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-megamenu-card-text-color: var(--ceweb-megamenu-highlight);
  --ceweb-megamenu-stars-color: var(--ceweb-megamenu-highlight);
  --ceweb-megamenu-stars-size: 18px;
  --ceweb-megamenu-stars-align: center;
  --ceweb-megamenu-rating-color: var(--ceweb-megamenu-card-title-color);

  /* --- Bouton de la carte ------------------------------------- */
  --ceweb-megamenu-cta-bg: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-megamenu-cta-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-megamenu-cta-bg-hover: var(--ceweb-megamenu-highlight);
  --ceweb-megamenu-cta-color-hover: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-megamenu-cta-width: auto;
  --ceweb-megamenu-cta-padding: 18px 32px;
  --ceweb-megamenu-cta-radius: 999px;
  --ceweb-megamenu-cta-lift: 2px;

  --ceweb-megamenu-ease: cubic-bezier(.2, .7, .3, 1);

  /* La police des titres, pour les éléments qui ne sont pas des titres : le
     titre en `p` par défaut, les descriptions en italique, le titre de la
     carte. Nommée en toutes lettres, et non lue dans
     `--e-global-typography-primary-font-family` comme ailleurs dans le
     plugin : sur le site, cette police globale d'Elementor n'est pas
     Fraunces, et les descriptions sortaient dans une linéale italique. Les
     groupes Typographie de l'onglet Style passent devant. */
  --ceweb-megamenu-heading-font: Fraunces, Georgia, serif;

  /* Teintes calculées, avec leur repli neutre dans la variable elle-même —
     une déclaration contenant un var() invalide retombe sur `unset`, jamais
     sur la déclaration précédente. Déclarées sur la racine : elles ne lisent
     que des couleurs du bloc, aucune n'est redéfinie plus bas. */
  --ceweb-megamenu-hover-tint: rgba(26, 111, 255, .06);
  --ceweb-megamenu-badge-color: #1F5130;

  /* Le widget vit dans un <li> du menu de Blocksy, et il en hérite tout ce
     que le menu pose sur ses éléments : `white-space: nowrap` (les
     descriptions ne passeraient plus à la ligne et déborderaient du
     panneau), une casse, un interlettrage, un alignement, une graisse. On
     repart donc d'un état neutre ici, une fois pour tout le bloc. */
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ceweb-megamenu-desc-color);
  background: var(--ceweb-megamenu-bg);
  border-radius: var(--ceweb-megamenu-radius);
  padding: var(--ceweb-megamenu-padding);
}
.ceweb-megamenu *{ box-sizing: border-box; }

/* ============================================================
   Panneau Blocksy transparent

   Blocksy peint son panneau déroulant ainsi :
     [class*=animated-submenu] > .sub-menu{
       background-color: var(--dropdown-background-color, var(--theme-palette-color-4));
       box-shadow: var(--theme-box-shadow);
     }
   Le bloc a son propre fond, mais tout ce qu'il ne couvre pas — une marge
   posée au-dessus pour l'écarter du menu, un coin plus arrondi que celui du
   panneau — laisse voir ce fond, gris par défaut (palette 4).

   Redéclarer les variables ne suffit pas : Blocksy les pose lui-même sur le
   panneau, depuis son CSS dynamique, avec le sélecteur du menu en préfixe —
   `[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu`, (0,4,0)
   au moins, davantage pour les variantes en-tête collant ou transparent. Le
   correctif vise donc les propriétés elles-mêmes, et c'est l'un des rares
   `!important` du plugin : il ne porte que sur le panneau qui contient ce
   widget, et il couvre aussi un fond ou une image que le mega menu de
   Blocksy Pro poserait par un autre chemin que la variable. `:has()` est ce
   qui permet de viser le panneau *depuis* le widget ; un navigateur qui ne
   le connaît pas garde simplement le panneau gris.

   L'ombre retirée au panneau passe sur le bloc. Sélecteur d'une seule classe
   (0,1,0), volontairement : le contrôle Ombre de l'onglet Style (0,2,0) le
   remplace dès qu'il est réglé.
   ============================================================ */
.sub-menu:has(.ceweb-megamenu--bare-panel){
  background: transparent !important;
  box-shadow: none !important;
}
.ceweb-megamenu--bare-panel{
  box-shadow: 0 24px 60px -18px rgba(12, 26, 60, .22);
}

@supports (color: color-mix(in srgb, red 50%, white)){
  .ceweb-megamenu{
    --ceweb-megamenu-hover-tint: color-mix(
      in srgb,
      var(--ceweb-megamenu-accent) var(--ceweb-megamenu-hover-bg-amount),
      transparent
    );
    --ceweb-megamenu-badge-color: color-mix(in srgb, var(--ceweb-megamenu-highlight) 35%, #000000);
  }
}

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

/* ============================================================
   Titre

   `p` par défaut — le menu est sur toutes les pages, un h2 s'ajouterait au
   plan de chacune — d'où la police et la taille données ici plutôt
   qu'héritées de la balise. Sélecteur à deux classes : `.elementor p` (0,1,1)
   reprendrait sinon la marge.
   ============================================================ */
.ceweb-megamenu .ceweb-megamenu__title{
  margin: 0 0 var(--ceweb-megamenu-title-gap);
  color: var(--ceweb-megamenu-title-color);
  font-family: var(--ceweb-megamenu-heading-font);
  font-size: clamp(26px, 2.6vw, 42px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.ceweb-megamenu .ceweb-megamenu__title:last-child{ margin-bottom: 0; }

/* `font-style: normal` : l'accent est une affaire de couleur. Sélecteur long,
   `.elementor em` (0,1,1) reprendrait sinon l'italique. */
.ceweb-megamenu .ceweb-megamenu__title .ceweb-megamenu__title-accent{
  color: var(--ceweb-megamenu-title-accent-color);
  font-style: normal;
  font-weight: inherit;
}

/* ============================================================
   Corps : rubriques et carte

   `__main` porte les rubriques — et le titre, quand la carte prend toute la
   hauteur du bloc : PHP rend alors le titre ici plutôt qu'au-dessus du
   corps, et la carte, étirée par `align-items: stretch`, court du haut du
   titre au bas des rubriques.

   Une ligne flex qui passe à la ligne, et deux éléments aux poids très
   inégaux. Les rubriques grandissent à 999, la carte à 1 : sur la même ligne,
   les rubriques prennent tout l'espace libre et la carte reste à sa largeur ;
   seule sur sa ligne, la carte s'étire sur toute la largeur. C'est ce qui
   la fait passer proprement sous les rubriques quand la place manque, sans
   media query — les points de rupture d'Elementor sont réglables, une valeur
   écrite ici finirait par les contredire.
   ============================================================ */
.ceweb-megamenu__body{
  display: flex;
  flex-wrap: wrap;
  align-items: var(--ceweb-megamenu-card-self);
  gap: var(--ceweb-megamenu-body-gap);
}
.ceweb-megamenu__main{
  flex: 999 1 var(--ceweb-megamenu-main-basis);
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ceweb-megamenu__columns{
  display: grid;
  /* `--columns` vient du contrôle Colonnes et n'est jamais déclarée ici :
     tant qu'il est sur « Automatique », c'est le nombre de rubriques, écrit
     par PHP sur cet élément, qui décide. */
  grid-template-columns: repeat(var(--ceweb-megamenu-columns, var(--ceweb-megamenu-groups, 1)), minmax(0, 1fr));
  gap: var(--ceweb-megamenu-columns-gap);
  align-items: start;
}
.ceweb-megamenu__card{
  flex: 1 1 var(--ceweb-megamenu-card-basis);
  min-width: min(100%, 260px);
}

/* La position de la carte est une classe posée par PHP. Sous les rubriques,
   une carte « à gauche » passe au-dessus : c'est le même `order`. */
.ceweb-megamenu.is-card-left .ceweb-megamenu__card{ order: -1; }

/* ============================================================
   Rubrique : pastille et entrées

   Les listes sont des <div role="list"> et non des <ul> : le widget vit à
   l'intérieur du `ul.sub-menu` de Blocksy, dont les règles sur `li` et `ul`
   portent des sélecteurs d'attributs qu'aucune classe isolée ne bat. Une
   balise que personne ne vise n'a rien à remettre à zéro.
   ============================================================ */
.ceweb-megamenu__column{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.ceweb-megamenu .ceweb-megamenu__column .ceweb-megamenu__pill{
  display: inline-flex;
  align-items: center;
  margin: 0 0 var(--ceweb-megamenu-pill-gap);
  padding: var(--ceweb-megamenu-pill-padding);
  border: var(--ceweb-megamenu-pill-border-width) solid var(--ceweb-megamenu-pill-border-color);
  border-radius: var(--ceweb-megamenu-pill-radius);
  background: var(--ceweb-megamenu-pill-bg);
  color: var(--ceweb-megamenu-pill-color);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition:
    background-color var(--ceweb-megamenu-hover-duration) var(--ceweb-megamenu-ease),
    color var(--ceweb-megamenu-hover-duration) var(--ceweb-megamenu-ease);
}
.ceweb-megamenu .ceweb-megamenu__column .ceweb-megamenu__pill.is-link:hover,
.ceweb-megamenu .ceweb-megamenu__column .ceweb-megamenu__pill.is-link:focus-visible{
  background: var(--ceweb-megamenu-pill-bg-hover);
  color: var(--ceweb-megamenu-pill-color-hover);
}

.ceweb-megamenu__links{
  display: flex;
  flex-direction: column;
  gap: var(--ceweb-megamenu-entry-gap);
  width: 100%;
}

/* ============================================================
   Entrée

   Le lien est toute l'entrée. Son fond de survol est un ::after qui déborde
   de `--bleed` sans pousser quoi que ce soit : un padding sur le lien
   décalerait le texte et ferait refluer la colonne au passage de la souris.
   Le ::after est en `z-index: -1`, d'où l'`isolation: isolate` sur le lien —
   sans contexte d'empilement à lui, il glisserait derrière le fond du
   panneau et serait dessiné sans jamais être vu. Même mécanique que les
   lignes du « Comparatif ».
   ============================================================ */
.ceweb-megamenu .ceweb-megamenu__entry .ceweb-megamenu__link{
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  gap: var(--ceweb-megamenu-icon-gap);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-decoration: none;
  transition: transform var(--ceweb-megamenu-hover-duration) var(--ceweb-megamenu-ease);
}
.ceweb-megamenu .ceweb-megamenu__entry .ceweb-megamenu__link::after{
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--ceweb-megamenu-bleed-y)) calc(-1 * var(--ceweb-megamenu-bleed-x));
  border-radius: var(--ceweb-megamenu-hover-radius);
  background: var(--ceweb-megamenu-hover-bg, var(--ceweb-megamenu-hover-tint));
  opacity: 0;
  transition: opacity var(--ceweb-megamenu-hover-duration) var(--ceweb-megamenu-ease);
  pointer-events: none;
}

.ceweb-megamenu__icon{
  display: inline-flex;
  flex: 0 0 auto;
  margin-top: .15em;
  color: var(--ceweb-megamenu-icon-color);
}
.ceweb-megamenu__icon i{ display: block; font-size: var(--ceweb-megamenu-icon-size); line-height: 1; }
/* Trois classes : à égalité avec les règles qu'Elementor pose sur ses SVG en
   ligne, sa feuille chargée après la nôtre gagnerait. Même piège que
   « Engagements » et « Constats ». */
.ceweb-megamenu .ceweb-megamenu__icon svg{
  display: block;
  width: var(--ceweb-megamenu-icon-size);
  height: var(--ceweb-megamenu-icon-size);
  fill: currentColor;
}

.ceweb-megamenu__text{
  display: flex;
  flex-direction: column;
  gap: var(--ceweb-megamenu-label-gap);
  min-width: 0;
}

.ceweb-megamenu__label{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

/* Le libellé est dans la police du corps, comme dans la maquette : c'est le
   menu qui parle, la police des titres est réservée à la description. */
.ceweb-megamenu .ceweb-megamenu__entry .ceweb-megamenu__label-text{
  color: var(--ceweb-megamenu-label-color);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  transition: color var(--ceweb-megamenu-hover-duration) var(--ceweb-megamenu-ease);
}

.ceweb-megamenu .ceweb-megamenu__entry .ceweb-megamenu__desc{
  color: var(--ceweb-megamenu-desc-color);
  font-family: var(--ceweb-megamenu-heading-font);
  font-size: 18px;
  font-style: italic;
  line-height: 1.45;
  transition: color var(--ceweb-megamenu-hover-duration) var(--ceweb-megamenu-ease);
}

/* Les deux couleurs propres à l'entrée (`--item-badge-*`) ne sont jamais
   déclarées dans cette feuille : c'est ce qui laisse passer le repli sur les
   couleurs de badge du bloc tant que la ligne du répéteur n'en fixe pas. */
.ceweb-megamenu .ceweb-megamenu__entry .ceweb-megamenu__badge{
  display: inline-block;
  padding: var(--ceweb-megamenu-badge-padding);
  border-radius: var(--ceweb-megamenu-badge-radius);
  background: var(--ceweb-megamenu-item-badge-bg, var(--ceweb-megamenu-badge-bg));
  color: var(--ceweb-megamenu-item-badge-color, var(--ceweb-megamenu-badge-color));
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================================================
   Survol et page en cours

   Le survol vit sous `.ceweb-megamenu--hover`, une classe que PHP n'émet que
   si le réglage est actif. La page en cours (`.is-current`, avec
   aria-current) prend le même état, réglage ou pas : signaler où l'on est
   n'a rien à voir avec l'effet de souris.
   ============================================================ */
.ceweb-megamenu--hover .ceweb-megamenu__entry .ceweb-megamenu__link:hover::after,
.ceweb-megamenu .ceweb-megamenu__entry .ceweb-megamenu__link:focus-visible::after,
.ceweb-megamenu .ceweb-megamenu__entry.is-current .ceweb-megamenu__link::after{
  opacity: 1;
}
.ceweb-megamenu--hover .ceweb-megamenu__entry .ceweb-megamenu__link:hover,
.ceweb-megamenu--hover .ceweb-megamenu__entry .ceweb-megamenu__link:focus-visible{
  transform: translateX(var(--ceweb-megamenu-hover-shift));
}
.ceweb-megamenu--hover .ceweb-megamenu__entry .ceweb-megamenu__link:hover .ceweb-megamenu__label-text,
.ceweb-megamenu--hover .ceweb-megamenu__entry .ceweb-megamenu__link:focus-visible .ceweb-megamenu__label-text,
.ceweb-megamenu .ceweb-megamenu__entry.is-current .ceweb-megamenu__label-text{
  color: var(--ceweb-megamenu-label-color-hover);
}
.ceweb-megamenu--hover .ceweb-megamenu__entry .ceweb-megamenu__link:hover .ceweb-megamenu__desc,
.ceweb-megamenu--hover .ceweb-megamenu__entry .ceweb-megamenu__link:focus-visible .ceweb-megamenu__desc,
.ceweb-megamenu .ceweb-megamenu__entry.is-current .ceweb-megamenu__desc{
  color: var(--ceweb-megamenu-desc-color-hover);
}

/* Le contour clavier suit le fond de survol, débord compris : sans lui, il
   serrerait le texte au plus près et passerait sous le fond. Le ::after est
   donc allumé au focus même quand les effets au survol sont coupés (règle
   ci-dessus, hors `--hover`) — sinon le contour serait posé sur un élément
   à opacité nulle, et le clavier n'aurait plus aucun repère. */
.ceweb-megamenu .ceweb-megamenu__entry .ceweb-megamenu__link:focus-visible{
  outline: none;
}
.ceweb-megamenu .ceweb-megamenu__entry .ceweb-megamenu__link:focus-visible::after{
  outline: 2px solid var(--ceweb-megamenu-accent);
  outline-offset: 0;
}
.ceweb-megamenu .ceweb-megamenu__column .ceweb-megamenu__pill:focus-visible{
  outline: 2px solid var(--ceweb-megamenu-accent);
  outline-offset: 3px;
}

/* ============================================================
   Carte
   ============================================================ */
.ceweb-megamenu .ceweb-megamenu__card{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ceweb-megamenu-card-gap);
  padding: var(--ceweb-megamenu-card-padding);
  border-radius: var(--ceweb-megamenu-card-radius);
  background: var(--ceweb-megamenu-card-bg);
}

.ceweb-megamenu__card-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--ceweb-megamenu-card-icon-box);
  height: var(--ceweb-megamenu-card-icon-box);
  border-radius: var(--ceweb-megamenu-card-icon-radius);
  background: var(--ceweb-megamenu-card-icon-bg);
  color: var(--ceweb-megamenu-card-icon-color);
  font-size: var(--ceweb-megamenu-card-icon-size);
  line-height: 1;
  overflow: hidden;
}
.ceweb-megamenu__card-icon i{ display: block; font-size: var(--ceweb-megamenu-card-icon-size); line-height: 1; }
.ceweb-megamenu .ceweb-megamenu__card-icon svg{
  display: block;
  width: var(--ceweb-megamenu-card-icon-size);
  height: var(--ceweb-megamenu-card-icon-size);
  fill: currentColor;
}
/* Sélecteur long (0,3,0) : `.entry-content img` et ses cousins visent cette
   balise avant toute autre, et effaceraient taille et rayon. */
.ceweb-megamenu .ceweb-megamenu__card-icon img{
  display: block;
  width: var(--ceweb-megamenu-card-icon-size);
  height: var(--ceweb-megamenu-card-icon-size);
  max-width: none;
  object-fit: contain;
  border-radius: 0;
}

.ceweb-megamenu .ceweb-megamenu__card .ceweb-megamenu__card-title{
  margin: 0;
  color: var(--ceweb-megamenu-card-title-color);
  font-family: var(--ceweb-megamenu-heading-font);
  font-size: clamp(24px, 2.2vw, 36px);
  font-weight: 600;
  line-height: 1.18;
}

.ceweb-megamenu .ceweb-megamenu__card .ceweb-megamenu__card-text{
  margin: 0;
  color: var(--ceweb-megamenu-card-text-color);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.55;
}

/* Le pied pousse le bouton et les étoiles vers le bas quand la carte prend
   la hauteur des rubriques : `margin-top: auto` absorbe l'espace libre. */
.ceweb-megamenu__card-foot{
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin-top: auto;
}

.ceweb-megamenu .ceweb-megamenu__card .ceweb-megamenu__card-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: var(--ceweb-megamenu-cta-width);
  padding: var(--ceweb-megamenu-cta-padding);
  border: 0;
  border-radius: var(--ceweb-megamenu-cta-radius);
  background: var(--ceweb-megamenu-cta-bg);
  color: var(--ceweb-megamenu-cta-color);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition:
    transform var(--ceweb-megamenu-hover-duration) var(--ceweb-megamenu-ease),
    background-color var(--ceweb-megamenu-hover-duration) var(--ceweb-megamenu-ease),
    color var(--ceweb-megamenu-hover-duration) var(--ceweb-megamenu-ease);
}
/* Sélecteur à quatre classes : la règle de base en porte trois (0,3,0), un
   `a.…:hover` (0,2,1) perdrait contre elle et le survol ne ferait rien. */
.ceweb-megamenu .ceweb-megamenu__card a.ceweb-megamenu__card-cta:hover,
.ceweb-megamenu .ceweb-megamenu__card a.ceweb-megamenu__card-cta:focus-visible{
  background: var(--ceweb-megamenu-cta-bg-hover);
  color: var(--ceweb-megamenu-cta-color-hover);
  transform: translateY(calc(-1 * var(--ceweb-megamenu-cta-lift)));
}
/* Sur le fond sombre de la carte, un contour à la couleur d'accent se perd :
   il prend la couleur du titre de la carte. */
.ceweb-megamenu .ceweb-megamenu__card a.ceweb-megamenu__card-cta:focus-visible{
  outline: 2px solid var(--ceweb-megamenu-card-title-color);
  outline-offset: 3px;
}

.ceweb-megamenu .ceweb-megamenu__card .ceweb-megamenu__rating{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--ceweb-megamenu-stars-align);
  gap: 4px 10px;
  margin: 0;
  color: var(--ceweb-megamenu-rating-color);
  font-size: 14px;
  line-height: 1.4;
}
.ceweb-megamenu__stars{
  color: var(--ceweb-megamenu-stars-color);
  font-size: var(--ceweb-megamenu-stars-size);
  letter-spacing: .08em;
  line-height: 1;
}

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

   Les couleurs restent : ce sont elles qui signalent l'état. Seuls les
   déplacements disparaissent.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .ceweb-megamenu .ceweb-megamenu__entry .ceweb-megamenu__link,
  .ceweb-megamenu .ceweb-megamenu__entry .ceweb-megamenu__link::after,
  .ceweb-megamenu .ceweb-megamenu__entry .ceweb-megamenu__label-text,
  .ceweb-megamenu .ceweb-megamenu__entry .ceweb-megamenu__desc,
  .ceweb-megamenu .ceweb-megamenu__column .ceweb-megamenu__pill,
  .ceweb-megamenu .ceweb-megamenu__card .ceweb-megamenu__card-cta{
    transition: none;
  }
  .ceweb-megamenu--hover .ceweb-megamenu__entry .ceweb-megamenu__link:hover,
  .ceweb-megamenu--hover .ceweb-megamenu__entry .ceweb-megamenu__link:focus-visible,
  .ceweb-megamenu .ceweb-megamenu__card a.ceweb-megamenu__card-cta:hover,
  .ceweb-megamenu .ceweb-megamenu__card a.ceweb-megamenu__card-cta:focus-visible{
    transform: none;
  }
}