/* ============================================================
   CEWeb Widgets — Étapes en bandes alternées
   Tous les réglages de l'onglet Style arrivent par des variables
   --ceweb-bandes-* posées sur .ceweb-bandes 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, -9 bordures, -10 fonds
   clairs, -11 fond des bandes, comme le reste du plugin. 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.
   ============================================================ */

.ceweb-bandes{
  /* Bande */
  --ceweb-bandes-row-bg: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-bandes-row-border-color: var(--theme-palette-color-9, #E2E8F0);
  --ceweb-bandes-row-border-width: 1px;
  --ceweb-bandes-row-radius: 28px;
  --ceweb-bandes-row-padding: 40px 44px;
  --ceweb-bandes-row-gap: 24px;

  /* Accent — seule couleur qu'une étape peut redéfinir pour son compte. */
  --ceweb-bandes-accent: var(--theme-palette-color-1, #1A6FFF);

  /* Numéro */
  --ceweb-bandes-number-size: 40px;
  --ceweb-bandes-number-gap: 14px;

  /* Visuel */
  --ceweb-bandes-media-width: 42%;
  --ceweb-bandes-media-min-height: 260px;
  --ceweb-bandes-media-fit: cover;
  --ceweb-bandes-media-padding: 0px;
  --ceweb-bandes-media-zoom: 1.04;

  /* Survol */
  --ceweb-bandes-lift: 3px;
  --ceweb-bandes-duration: 300ms;
  --ceweb-bandes-ease: ease;

  /* Textes */
  --ceweb-bandes-title-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-bandes-text-color: var(--theme-palette-color-7, #475569);

  /* Tags */
  --ceweb-bandes-tag-radius: 50px;
  --ceweb-bandes-tag-padding: 7px 16px;
  --ceweb-bandes-tag-gap: 8px;

  /* Lien */
  --ceweb-bandes-cta-color: var(--ceweb-bandes-accent);
  --ceweb-bandes-cta-gap: 20px;

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

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

  padding: var(--ceweb-bandes-padding);
  border-radius: var(--ceweb-bandes-radius);
}
.ceweb-bandes *{ box-sizing: border-box; }

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

/* ============================================================
   Liste
   ============================================================ */
.ceweb-bandes__list{
  display: flex;
  flex-direction: column;
  gap: var(--ceweb-bandes-row-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ============================================================
   Bande

   Le côté du visuel est décidé côté PHP — position de départ combinée à
   l'alternance — et arrive ici en une seule classe, `is-media-left` ou
   `is-media-right`. Croiser les deux réglages en CSS demanderait quatre
   sélecteurs de spécificités inégales, que les règles d'empilement mobile ne
   pourraient plus battre sans surenchère. Une classe, deux états, une seule
   spécificité : l'empilement n'a plus qu'à passer en dernier.

   Les trois variables ci-dessous sont l'unique état de la mise en page ; les
   règles qui suivent ne font que les lire.
   ============================================================ */
.ceweb-bandes__row{
  --ceweb-bandes-cols: minmax(0, 1fr) minmax(0, var(--ceweb-bandes-media-width));
  --ceweb-bandes-body-col: 1;
  --ceweb-bandes-media-col: 2;

  display: grid;
  grid-template-columns: var(--ceweb-bandes-cols);
  align-items: stretch;

  background: var(--ceweb-bandes-row-bg);
  border: var(--ceweb-bandes-row-border-width) solid var(--ceweb-bandes-row-border-color);
  border-radius: var(--ceweb-bandes-row-radius);

  /* Le visuel doit filer jusqu'aux bords arrondis de la bande. `overflow`
     rogne les enfants, jamais l'ombre portée de l'élément lui-même — celle-ci
     est peinte hors de la boîte de bordure et reste donc intacte. */
  overflow: hidden;

  /* Teintes des tags, dérivées de l'accent de l'étape. Déclarées sur la bande
     et non sur le conteneur : 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. Sur `.ceweb-bandes`, elles figeraient
     l'accent du widget pour toutes les étapes.
     Le repli sans color-mix() est dans la variable elle-même : une déclaration
     contenant un var() invalide retombe sur `unset`, jamais sur la déclaration
     précédente. */
  --ceweb-bandes-tag-tint: var(--theme-palette-color-10, #F4F8FF);
  --ceweb-bandes-tag-ink: var(--ceweb-bandes-accent);

  /* Bordure de survol : celle du contrôle si elle est réglée, sinon l'accent de
     l'étape. Résolue ici pour la même raison que les teintes ci-dessus. */
  --ceweb-bandes-row-ring: var(--ceweb-bandes-row-border-color-hover, var(--ceweb-bandes-accent));

  transition:
    transform var(--ceweb-bandes-duration) var(--ceweb-bandes-ease),
    background-color var(--ceweb-bandes-duration) var(--ceweb-bandes-ease),
    border-color var(--ceweb-bandes-duration) var(--ceweb-bandes-ease),
    box-shadow var(--ceweb-bandes-duration) var(--ceweb-bandes-ease);
}

@supports (color: color-mix(in srgb, red 50%, white)){
  .ceweb-bandes__row{
    --ceweb-bandes-tag-tint: color-mix(in srgb, var(--ceweb-bandes-accent) 10%, var(--theme-palette-color-11, #FFFFFF));
    --ceweb-bandes-tag-ink: color-mix(in srgb, var(--ceweb-bandes-accent) 70%, var(--theme-palette-color-6, #0C1A3C));
  }
}

.ceweb-bandes__row.is-media-left{
  --ceweb-bandes-cols: minmax(0, var(--ceweb-bandes-media-width)) minmax(0, 1fr);
  --ceweb-bandes-body-col: 2;
  --ceweb-bandes-media-col: 1;
}

/* Étape sans visuel : une seule colonne. L'alternance n'a rien à inverser, et
   PHP ne pose donc aucune classe de côté sur ces bandes. */
.ceweb-bandes__row--solo{
  --ceweb-bandes-cols: minmax(0, 1fr);
  --ceweb-bandes-body-col: 1;
  --ceweb-bandes-media-col: 1;
}

.ceweb-bandes__body{
  grid-column: var(--ceweb-bandes-body-col);
  grid-row: 1;
  padding: var(--ceweb-bandes-row-padding);
  align-self: center;
  min-width: 0;
}

/* Pleine largeur, un paragraphe finirait en lignes interminables : on lui rend
   une longueur de ligne lisible dès qu'il n'a pas de visuel en face. */
.ceweb-bandes__row--solo .ceweb-bandes__text{ max-width: 68ch; }

/* ============================================================
   Numéro et titre
   ============================================================ */
.ceweb-bandes__head{ margin: 0 0 var(--ceweb-bandes-number-gap); }

.ceweb-bandes__number{
  font-family: var(--e-global-typography-primary-font-family, Fraunces), Georgia, serif;
  font-weight: 600;
  line-height: 1;
}

/* Grand chiffre au-dessus du titre — la variante de la maquette du site. */
.ceweb-bandes--number-plain .ceweb-bandes__number{
  display: block;
  margin-bottom: var(--ceweb-bandes-number-gap);
  font-size: clamp(34px, 3.4vw, 52px);
  letter-spacing: -.02em;
  color: var(--ceweb-bandes-number-color, var(--ceweb-bandes-accent));
}

/* Pastille pleine, sur la ligne du titre. La couleur du texte retombe sur le
   fond des bandes et non sur l'accent : sur une pastille pleine, l'accent
   serait illisible sur lui-même. */
.ceweb-bandes--number-pill .ceweb-bandes__head{
  display: flex;
  align-items: center;
  gap: var(--ceweb-bandes-number-gap);
  flex-wrap: wrap;
}
.ceweb-bandes--number-pill .ceweb-bandes__number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--ceweb-bandes-number-size);
  height: var(--ceweb-bandes-number-size);
  border-radius: 50%;
  font-size: calc(var(--ceweb-bandes-number-size) * .42);
  background: var(--ceweb-bandes-number-bg, var(--ceweb-bandes-accent));
  color: var(--ceweb-bandes-number-color, var(--theme-palette-color-11, #FFFFFF));
}

/* 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. Ni font-family ni font-size : le
   titre prend ce que le thème donne à sa balise. */
.ceweb-bandes .ceweb-bandes__row .ceweb-bandes__title{
  margin: 0;
  color: var(--ceweb-bandes-title-color);
}

/* ============================================================
   Paragraphe, tags, lien
   ============================================================ */
.ceweb-bandes__text{
  color: var(--ceweb-bandes-text-color);
  font-size: 16px;
  line-height: 1.65;
}
.ceweb-bandes__text p{ margin: 0 0 .7em; }
.ceweb-bandes__text > :first-child{ margin-top: 0; }
.ceweb-bandes__text > :last-child{ margin-bottom: 0; }

.ceweb-bandes__tags{
  display: flex;
  flex-wrap: wrap;
  gap: var(--ceweb-bandes-tag-gap);
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.ceweb-bandes__tag{
  padding: var(--ceweb-bandes-tag-padding);
  border-radius: var(--ceweb-bandes-tag-radius);
  background: var(--ceweb-bandes-tag-bg, var(--ceweb-bandes-tag-tint));
  color: var(--ceweb-bandes-tag-color, var(--ceweb-bandes-tag-ink));
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

.ceweb-bandes__cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--ceweb-bandes-cta-gap);
  color: var(--ceweb-bandes-cta-color);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: gap .2s ease;
}
.ceweb-bandes__cta:hover,
.ceweb-bandes__cta:focus-visible{ gap: 14px; }

/* ============================================================
   Visuel
   ============================================================ */
.ceweb-bandes__media{
  grid-column: var(--ceweb-bandes-media-col);
  grid-row: 1;
  display: grid;
  min-height: var(--ceweb-bandes-media-min-height);
  padding: var(--ceweb-bandes-media-padding);
  /* Sans rayon propre, le visuel épouse celui de la bande, qui le rogne. */
  border-radius: var(--ceweb-bandes-media-radius, 0px);
  overflow: hidden;
}

/* `<img>` est la balise que les thèmes stylent le plus volontiers : une règle
   globale du type `.entry-content img` passe devant une classe isolée. D'où un
   sélecteur long (0,3,0), qui tient sans `!important`. */
.ceweb-bandes .ceweb-bandes__media .ceweb-bandes__image{
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: var(--ceweb-bandes-media-fit);
  border-radius: inherit;
  transition: transform var(--ceweb-bandes-duration) var(--ceweb-bandes-ease);
}

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

   Toutes ces règles sont sous `.ceweb-bandes--hover`, que PHP ne pose que si le
   réglage est actif : le couper les désactive d'un coup. `:focus-within` double
   le survol pour que la bande réagisse aussi quand son lien prend le focus au
   clavier — sans quoi l'effet resterait invisible à qui navigue sans souris.

   Aucune de ces règles ne touche aux trois variables de mise en page, elles ne
   peuvent donc pas se disputer avec le côté du visuel ni avec l'empilement.
   ============================================================ */
.ceweb-bandes--hover .ceweb-bandes__row:hover,
.ceweb-bandes--hover .ceweb-bandes__row:focus-within{
  background: var(--ceweb-bandes-row-bg-hover, var(--ceweb-bandes-row-bg));
  border-color: var(--ceweb-bandes-row-ring);
  transform: translateY(calc(-1 * var(--ceweb-bandes-lift)));
}

/* Le visuel avance légèrement dans son cadre. C'est le `overflow: hidden` de
   `.ceweb-bandes__media` — posé pour que l'image file jusqu'aux bords arrondis
   — qui rend le zoom possible sans déborder d'un pixel. */
.ceweb-bandes--hover .ceweb-bandes__row:hover .ceweb-bandes__image,
.ceweb-bandes--hover .ceweb-bandes__row:focus-within .ceweb-bandes__image{
  transform: scale(var(--ceweb-bandes-media-zoom));
}

/* La flèche du lien suit le survol de la bande entière, pas seulement le sien :
   survoler la bande annonce déjà le clic. */
.ceweb-bandes--hover .ceweb-bandes__row:hover .ceweb-bandes__cta{ gap: 14px; }

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

   Ces règles passent après celles du côté du visuel et à spécificité au moins
   égale : c'est ce qui leur permet de reprendre la main. Le visuel repasse
   au-dessus du texte — sous une certaine largeur, une image reléguée sous son
   paragraphe n'est plus lue comme la sienne.
   ============================================================ */
@media (max-width: 1024px){
  .ceweb-bandes--stack-tablet .ceweb-bandes__row{
    --ceweb-bandes-cols: minmax(0, 1fr);
    --ceweb-bandes-body-col: 1;
    --ceweb-bandes-media-col: 1;
  }
  .ceweb-bandes--stack-tablet .ceweb-bandes__body{ grid-row: 2; }
  .ceweb-bandes--stack-tablet .ceweb-bandes__media{ grid-row: 1; }
}

@media (max-width: 767px){
  .ceweb-bandes--stack-mobile .ceweb-bandes__row{
    --ceweb-bandes-cols: minmax(0, 1fr);
    --ceweb-bandes-body-col: 1;
    --ceweb-bandes-media-col: 1;
  }
  .ceweb-bandes--stack-mobile .ceweb-bandes__body{ grid-row: 2; }
  .ceweb-bandes--stack-mobile .ceweb-bandes__media{ grid-row: 1; }
}

@media (prefers-reduced-motion: reduce){
  .ceweb-bandes__row,
  .ceweb-bandes__image,
  .ceweb-bandes__cta{
    transition: none !important;
  }
  /* Le soulèvement et le zoom disparaissent ; la bordure d'accent et l'ombre
     restent : ce sont elles qui signalent l'état, mouvement ou pas. */
  .ceweb-bandes--hover .ceweb-bandes__row:hover,
  .ceweb-bandes--hover .ceweb-bandes__row:focus-within,
  .ceweb-bandes--hover .ceweb-bandes__row:hover .ceweb-bandes__image,
  .ceweb-bandes--hover .ceweb-bandes__row:focus-within .ceweb-bandes__image{
    transform: none;
  }
}