/* ============================================================
   CEWeb Widgets — Comparatif (sans / avec)
   Tous les réglages de l'onglet Style arrivent par des variables
   --ceweb-compare-* posées par Elementor.

   Deux principes gouvernent ce fichier.

   1. **Une couleur par panneau, tout le reste en découle.**
      `--ceweb-compare-accent` est déclarée sur le panneau, et la teinte du
      fond, celle de la bordure, celle de la pastille et la couleur de la
      pastille d'icône n'en sont que des `color-mix()`. Changer un accent
      re-tonalise le panneau entier d'un seul réglage.

      Ces valeurs dérivées sont écrites en `var(x, color-mix(…))` et la
      variable `x` n'est **jamais déclarée** ici : un `var()` ne prend son repli
      que si la variable est absente, la déclarer même vide tuerait le calcul.
      Les contrôles de couleur d'Elementor n'émettant rien tant qu'ils sont
      vides, le mécanisme tient tout seul.

      Corollaire important : ces `color-mix()` lisent `--ceweb-compare-accent`,
      qui change d'un panneau à l'autre. Un `var()` imbriqué dans une propriété
      personnalisée est substitué **sur l'élément qui porte la déclaration**,
      pas sur celui qui s'en sert plus bas — d'où leur place sur le panneau et
      non sur la racine, où elles figeraient un accent unique.

   2. **Chaque balise que les thèmes stylent porte sa propre remise à zéro, avec
      un sélecteur long.** `ul`, `li`, `p` et les titres arrivent tous avec des
      marges du navigateur, et les thèmes en remettent par-dessus avec des
      sélecteurs qui battent une simple classe. Une déclaration qui vise
      l'élément lui-même bat toujours la même propriété *héritée* d'un ancêtre,
      la spécificité n'entrant même pas en jeu : compter sur l'héritage ici,
      c'est laisser le thème décider.

   Le reste des couleurs vient de la palette du thème — -6 titres, -7 texte,
   -11 fond, comme ailleurs dans le plugin.
   ============================================================ */

.ceweb-compare{
  /* Disposition. Les deux panneaux, et l'écart entre eux. */
  --ceweb-compare-cols: repeat(2, minmax(0, 1fr));
  --ceweb-compare-gap: 40px;

  /* Panneau */
  --ceweb-compare-panel-padding: 38px 40px;
  --ceweb-compare-panel-radius: 24px;
  --ceweb-compare-panel-border-width: 1px;
  --ceweb-compare-panel-tint: 6%;
  --ceweb-compare-panel-border-tint: 16%;

  /* Titre et pastille de sous-titre */
  --ceweb-compare-title-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-compare-title-weight: 700;
  --ceweb-compare-title-gap: 18px;
  --ceweb-compare-pill-padding: 7px 16px;
  --ceweb-compare-pill-radius: 999px;
  --ceweb-compare-pill-tint: 14%;
  --ceweb-compare-pill-gap: 30px;

  /* Éléments de liste */
  --ceweb-compare-item-gap: 22px;          /* d'un élément au suivant */
  --ceweb-compare-item-inner-gap: 14px;    /* de la pastille au texte */
  --ceweb-compare-item-text-gap: 4px;      /* du titre à sa description */
  --ceweb-compare-item-title-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-compare-item-title-weight: 700;
  --ceweb-compare-item-text-color: var(--theme-palette-color-7, #475569);

  /* Pastille d'icône */
  --ceweb-compare-badge-size: 26px;
  --ceweb-compare-badge-radius: 999px;
  --ceweb-compare-badge-icon-size: 14px;
  --ceweb-compare-badge-offset: 1px;       /* aligne le glyphe sur la 1re ligne */

  /* Survol */
  --ceweb-compare-hover-tint: 8%;          /* fond de la ligne survolée */
  --ceweb-compare-hover-radius: 14px;
  /* Débord du fond de survol autour du texte, par axe. */
  --ceweb-compare-hover-pad-y: 10px;
  --ceweb-compare-hover-pad-x: 12px;
  --ceweb-compare-hover-badge-scale: 1.12;
  --ceweb-compare-hover-ring: 5px;
  --ceweb-compare-hover-lift: 3px;         /* soulèvement du panneau */
  --ceweb-compare-hover-duration: 260ms;
  --ceweb-compare-ease: cubic-bezier(.22, .8, .26, 1);

  /* Apparition */
  --ceweb-compare-reveal-shift: 16px;      /* distance parcourue */
  --ceweb-compare-reveal-duration: 620ms;
  --ceweb-compare-reveal-step: 70ms;       /* décalage d'un rang au suivant */

  /* Hauteur des panneaux. `stretch` par défaut : les deux panneaux font
     exactement la même hauteur, celle du plus grand, et le plus court se
     termine par du vide plutôt que par un bord qui remonte. `start` rend à
     chacun la hauteur de son contenu — c'est le réglage « Hauteur des
     panneaux » qui écrit l'un ou l'autre. */
  --ceweb-compare-align: stretch;

  display: grid;
  grid-template-columns: var(--ceweb-compare-cols);
  gap: var(--ceweb-compare-gap);
  align-items: var(--ceweb-compare-align);
}
.ceweb-compare *{ box-sizing: border-box; }

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

/* ============================================================
   Accents

   Les deux seuls hexadécimaux en dur du fichier, et ils sont isolés dans une
   déclaration chacun — comme le liseré blanc de la grille de projets ou le doré
   des étoiles du bloc Avis. Un rouge « ce qui bloque » et un vert « ce qui
   marche » sont des couleurs de sens, pas des couleurs de charte : aucune entrée
   de la palette ne leur correspond. Les contrôles « Couleur d'accent » suffisent
   à les brancher sur la palette si la charte en gagne un jour.
   ============================================================ */
.ceweb-compare__panel--left{ --ceweb-compare-accent: #D6455B; }
.ceweb-compare__panel--right{ --ceweb-compare-accent: #2E7D5B; }

/* ============================================================
   Panneau
   ============================================================ */
.ceweb-compare__panel{
  /* Teintes dérivées de l'accent. Déclarées ici, sur l'élément qui porte
     l'accent : sur la racine, elles figeraient la couleur du premier panneau
     pour les deux. */
  padding: var(--ceweb-compare-panel-padding);
  background: var(
    --ceweb-compare-panel-bg,
    color-mix(in srgb, var(--ceweb-compare-accent) var(--ceweb-compare-panel-tint), var(--theme-palette-color-11, #FFFFFF))
  );
  border: var(--ceweb-compare-panel-border-width) solid var(
    --ceweb-compare-panel-border-color,
    color-mix(in srgb, var(--ceweb-compare-accent) var(--ceweb-compare-panel-border-tint), var(--theme-palette-color-11, #FFFFFF))
  );
  border-radius: var(--ceweb-compare-panel-radius);
}

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

   Pas de `font-family` ni de `font-size` : le titre prend la police et la taille
   que le thème donne à sa balise, comme les titres des autres widgets du
   plugin. Seules la couleur et la graisse sont posées ici. La marge, elle, est
   remise à zéro avec un sélecteur long — c'est la règle du thème sur `h2`…`h6`
   qu'il faut battre, et elle est plus forte qu'une simple classe.
   ============================================================ */
.ceweb-compare .ceweb-compare__panel .ceweb-compare__title{
  margin: 0 0 var(--ceweb-compare-title-gap);
  padding: 0;
  color: var(--ceweb-compare-title-color);
  font-weight: var(--ceweb-compare-title-weight);
  line-height: 1.2;
}

/* Le mot d'accent. `<em>` pour rester `esc_html`-able côté PHP — le titre est
   saisi en deux champs, jamais en HTML — et `font-style: inherit` pour annuler
   l'italique que la balise porte par défaut : c'est la couleur qui distingue le
   mot, pas la pente. */
.ceweb-compare .ceweb-compare__panel .ceweb-compare__title em{
  color: var(--ceweb-compare-accent);
  font-style: inherit;
  font-weight: inherit;
}

/* ============================================================
   Pastille de sous-titre
   ============================================================ */
.ceweb-compare .ceweb-compare__panel .ceweb-compare__pill{
  display: inline-block;
  margin: 0 0 var(--ceweb-compare-pill-gap);
  padding: var(--ceweb-compare-pill-padding);
  background: var(
    --ceweb-compare-pill-bg,
    color-mix(in srgb, var(--ceweb-compare-accent) var(--ceweb-compare-pill-tint), var(--theme-palette-color-11, #FFFFFF))
  );
  color: var(
    --ceweb-compare-pill-color,
    color-mix(in srgb, var(--ceweb-compare-accent) 86%, #000000)
  );
  border-radius: var(--ceweb-compare-pill-radius);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

/* ============================================================
   Liste

   `list-style`, marge et padding remis à zéro avec un sélecteur long : ce sont
   les trois propriétés que tout thème pose sur `ul` et `li`. `role="list"` est
   explicite dans le markup parce que `list-style: none` retire les sémantiques
   de liste sous VoiceOver.
   ============================================================ */
.ceweb-compare .ceweb-compare__panel .ceweb-compare__list{
  display: flex;
  flex-direction: column;
  gap: var(--ceweb-compare-item-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ceweb-compare .ceweb-compare__panel .ceweb-compare__item{
  display: flex;
  align-items: flex-start;
  gap: var(--ceweb-compare-item-inner-gap);
  margin: 0;
  padding: 0;
  /* Repère du fond de survol, et `isolation: isolate` pour que son `z-index:
     -1` reste *dans* la ligne. Sans cette isolation, un pseudo-élément en
     z-index négatif passe derrière le fond du panneau — il est bien dessiné,
     simplement invisible. */
  position: relative;
  isolation: isolate;
  /* Certains thèmes redessinent les puces avec un ::before ou un ::marker ;
     la liste n'en a plus, la pastille d'icône en tient lieu. */
  list-style: none;
}
.ceweb-compare .ceweb-compare__panel .ceweb-compare__item::before,
.ceweb-compare .ceweb-compare__panel .ceweb-compare__item::marker{
  content: none;
}

/* La pastille d'icône. Le décalage vertical la centre optiquement sur la
   première ligne du titre : `align-items: flex-start` la collerait au ras du
   texte, et `center` la ferait flotter au milieu d'un élément de trois lignes. */
.ceweb-compare__badge{
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ceweb-compare-badge-size);
  height: var(--ceweb-compare-badge-size);
  margin-top: var(--ceweb-compare-badge-offset);
  background: var(--ceweb-compare-badge-bg, var(--ceweb-compare-accent));
  color: var(--ceweb-compare-badge-color, var(--theme-palette-color-11, #FFFFFF));
  border-radius: var(--ceweb-compare-badge-radius);
}
.ceweb-compare__badge svg{
  width: var(--ceweb-compare-badge-icon-size);
  height: var(--ceweb-compare-badge-icon-size);
  display: block;
  fill: currentColor;
}
.ceweb-compare__badge i{
  font-size: var(--ceweb-compare-badge-icon-size);
  line-height: 1;
}

/* ============================================================
   Texte d'un élément
   ============================================================ */
.ceweb-compare__body{
  display: flex;
  flex-direction: column;
  gap: var(--ceweb-compare-item-text-gap);
  min-width: 0;
}

/* L'intitulé est un `h4` par défaut, et c'est ce qui lui donne la police des
   titres du thème — cette police est réservée aux `h1`–`h6`, un `div` prendrait
   celle du corps de page.

   La taille, en revanche, est posée ici : le sélecteur long bat la règle du
   thème sur `h4` sans toucher à sa `font-family`, donc on hérite de la police
   sans hériter du corps. C'est l'inverse du titre de panneau, qui prend les
   deux de sa balise. */
.ceweb-compare .ceweb-compare__panel .ceweb-compare__item-title{
  margin: 0;
  padding: 0;
  color: var(--ceweb-compare-item-title-color);
  font-size: 16.5px;
  font-weight: var(--ceweb-compare-item-title-weight);
  line-height: 1.35;
}

.ceweb-compare .ceweb-compare__panel .ceweb-compare__item-text{
  margin: 0;
  padding: 0;
  color: var(--ceweb-compare-item-text-color);
  font-size: 15.5px;
  line-height: 1.5;
}

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

   Tout est sous `.ceweb-compare--hover`, une classe que PHP ne pose que si le
   réglage est actif : le couper retire les règles au lieu de neutraliser
   chaque valeur une à une.

   Le fond de la ligne survolée est un pseudo-élément débordant, pas une
   `padding` + `background` sur la ligne elle-même : donner une marge
   intérieure à la ligne au survol décalerait son texte et ferait sauter toute
   la liste. Là, rien ne bouge — une opacité passe de 0 à 1.
   ============================================================ */
.ceweb-compare--hover .ceweb-compare__item::after{
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--ceweb-compare-hover-pad-y)) calc(-1 * var(--ceweb-compare-hover-pad-x));
  background: color-mix(in srgb, var(--ceweb-compare-accent) var(--ceweb-compare-hover-tint), transparent);
  border-radius: var(--ceweb-compare-hover-radius);
  opacity: 0;
  transition: opacity var(--ceweb-compare-hover-duration) var(--ceweb-compare-ease);
  pointer-events: none;
}
.ceweb-compare--hover .ceweb-compare__item:hover::after{ opacity: 1; }

/* L'intitulé prend la couleur d'accent de son panneau : c'est ce qui rattache
   la ligne survolée à son camp, en rouge comme en vert. */
.ceweb-compare--hover .ceweb-compare__item-title,
.ceweb-compare--hover .ceweb-compare__badge{
  transition:
    color var(--ceweb-compare-hover-duration) var(--ceweb-compare-ease),
    transform var(--ceweb-compare-hover-duration) var(--ceweb-compare-ease),
    box-shadow var(--ceweb-compare-hover-duration) var(--ceweb-compare-ease);
}
.ceweb-compare--hover .ceweb-compare__item:hover .ceweb-compare__item-title{
  color: var(--ceweb-compare-accent);
}

/* La pastille grossit un peu et gagne un halo. Le halo est une `box-shadow` et
   non une bordure : une bordure changerait la taille de la boîte et pousserait
   le texte d'un cran. */
.ceweb-compare--hover .ceweb-compare__item:hover .ceweb-compare__badge{
  transform: scale(var(--ceweb-compare-hover-badge-scale));
  box-shadow: 0 0 0 var(--ceweb-compare-hover-ring)
    color-mix(in srgb, var(--ceweb-compare-accent) 18%, transparent);
}

/* Le panneau se soulève très légèrement. La bordure se renforce d'un ton, ce
   qui suffit à le détacher sans ombre portée — les deux panneaux sont posés à
   plat sur le fond de la page, une ombre au survol paraîtrait rapportée. */
.ceweb-compare--hover .ceweb-compare__panel{
  transition:
    transform var(--ceweb-compare-hover-duration) var(--ceweb-compare-ease),
    border-color var(--ceweb-compare-hover-duration) var(--ceweb-compare-ease);
}
.ceweb-compare--hover .ceweb-compare__panel:hover{
  transform: translateY(calc(-1 * var(--ceweb-compare-hover-lift)));
  border-color: color-mix(
    in srgb,
    var(--ceweb-compare-accent) calc(var(--ceweb-compare-panel-border-tint) * 2),
    var(--theme-palette-color-11, #FFFFFF)
  );
}

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

   Deux mécanismes pour un seul jeu d'images clés, et c'est voulu.

   1. Par défaut, une animation classique au chargement, décalée d'un rang au
      suivant grâce à `--ceweb-compare-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 rejouée sur la `view()` de l'élément : elle se déroule au
      moment où la ligne entre dans l'écran, et le décalage n'a plus à être
      calculé — la position de chaque ligne dans la page le produit d'elle-même.
      Le délai de rang est donc remis à zéro dans cette branche, sans quoi il
      s'ajouterait à un compteur qui n'est plus du temps.

   `both` en mode de remplissage dans les deux cas : l'état final est conservé,
   et l'état initial appliqué avant le départ — sans quoi la ligne clignoterait
   une image à sa position d'arrivée avant de reculer.

   La classe n'est posée par PHP que si le réglage est actif, et l'éditeur
   Elementor est exclu : il re-rend le widget à chaque frappe, ce qui rejouerait
   l'apparition en boucle pendant la saisie.
   ============================================================ */
@keyframes ceweb-compare-rise{
  from{ opacity: 0; transform: translateY(var(--ceweb-compare-reveal-shift)); }
  to{ opacity: 1; transform: none; }
}

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

  @supports (animation-timeline: view()){
    .ceweb-compare--reveal .ceweb-compare__title,
    .ceweb-compare--reveal .ceweb-compare__pill,
    .ceweb-compare--reveal .ceweb-compare__item{
      animation-timeline: view();
      /* `auto` : c'est la plage de défilement qui fait la durée, plus le temps. */
      animation-duration: auto;
      animation-range: entry 0% entry 55%;
      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-compare--reveal .ceweb-compare__title,
  .elementor-editor-active .ceweb-compare--reveal .ceweb-compare__pill,
  .elementor-editor-active .ceweb-compare--reveal .ceweb-compare__item{
    animation: none;
  }
}

/* ============================================================
   Empilement

   Ces règles passent après celles de la grille et redéfinissent la seule
   variable qui décrit les colonnes : aucune dispute de spécificité possible.
   La classe n'est posée par PHP que si le réglage la demande.
   ============================================================ */
@media (max-width: 1024px){
  .ceweb-compare--stack-tablet{
    --ceweb-compare-cols: minmax(0, 1fr);
  }
}

@media (max-width: 767px){
  .ceweb-compare--stack-mobile{
    --ceweb-compare-cols: minmax(0, 1fr);
  }
}