/* ============================================================
   CEWeb Widgets — Histoire (frise chronologique)
   Tous les réglages de l'onglet Style arrivent par des variables
   --ceweb-timeline-* posées sur .ceweb-timeline 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 fond du
   bloc, -11 fond des cartes. 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.

   Six variables ne sont JAMAIS déclarées dans cette feuille :
   --ceweb-timeline-bg, -date-color, -dot-color, -tag-bg, -card-border-hover
   et -focus. Elles sont lues en `var(x, repli)`, et un `var()` ne prend son
   repli que si la variable est absente : la déclarer, même vide, tuerait le
   repli.
   ============================================================ */

/* Le bloc réclame toute la largeur de la section. Dans un conteneur flexbox
   Elementor, un widget est un élément flex en `flex: 0 1 auto` : sa largeur
   suivrait son contenu, et la frise se calculerait sur une boîte rétrécie.
   Même remède que « Constats » et « Atouts ». */
.elementor-widget-ceweb_timeline{ width: 100%; }

.ceweb-timeline{
  box-sizing: border-box;
  width: 100%;

  /* --- Disposition ------------------------------------------- */
  /* Valeurs de « Date à gauche du rail ». Le contrôle « Frise » réécrit tout
     ce jeu par point de rupture (rail à gauche sur mobile) : aucune media
     query ici, elle écraserait le réglage de l'éditeur. */
  --ceweb-timeline-date-width: minmax(96px, 132px);
  --ceweb-timeline-cols: var(--ceweb-timeline-date-width) 30px minmax(0, 1fr);
  --ceweb-timeline-col-gap: clamp(12px, 2vw, 28px);
  --ceweb-timeline-step-gap: clamp(24px, 3vw, 40px);
  --ceweb-timeline-meta-area: 1 / 1;
  --ceweb-timeline-rail-area: 1 / 2;
  --ceweb-timeline-card-area: 1 / 3;
  --ceweb-timeline-meta-align: flex-end;
  --ceweb-timeline-meta-text: right;
  --ceweb-timeline-meta-pad: 22px;
  --ceweb-timeline-meta-gap: 0px;
  --ceweb-timeline-max-width: 1280px;
  --ceweb-timeline-padding: 0px;

  /* --- Rail et points ---------------------------------------- */
  --ceweb-timeline-accent: var(--theme-palette-color-1, #1A6FFF);
  --ceweb-timeline-line-color: var(--theme-palette-color-9, #E2E8F0);
  --ceweb-timeline-line-width: 2px;
  --ceweb-timeline-dash: 18px;
  --ceweb-timeline-dash-gap: 8px;
  --ceweb-timeline-dot-top: 24px;
  --ceweb-timeline-dot-size: 18px;
  --ceweb-timeline-dot-border: 4px;
  --ceweb-timeline-dot-bg: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-timeline-halo-size: 5px;
  --ceweb-timeline-halo-amount: 7%;

  /* --- Date --------------------------------------------------- */
  --ceweb-timeline-date-bg: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-timeline-date-border: var(--theme-palette-color-9, #E2E8F0);

  /* --- Carte -------------------------------------------------- */
  --ceweb-timeline-card-bg: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-timeline-card-border: var(--theme-palette-color-9, #E2E8F0);
  --ceweb-timeline-card-radius: 20px;
  --ceweb-timeline-card-padding: clamp(22px, 2.4vw, 30px);
  --ceweb-timeline-card-gap: 12px;
  --ceweb-timeline-lift: 3px;
  --ceweb-timeline-duration: 200ms;

  /* --- Photo -------------------------------------------------- */
  /* Valeurs de « À droite du texte », réécrites par le contrôle « Place de la
     photo » (au-dessus sur mobile). */
  --ceweb-timeline-media-width: 38%;
  --ceweb-timeline-media-min-height: 180px;
  --ceweb-timeline-media-ratio: 16 / 9;
  --ceweb-timeline-media-gap: clamp(18px, 2.4vw, 28px);
  --ceweb-timeline-media-radius: 14px;
  --ceweb-timeline-card-cols: minmax(0, 1fr) var(--ceweb-timeline-media-width);
  --ceweb-timeline-media-order: 1;
  --ceweb-timeline-media-ratio-on: auto;
  --ceweb-timeline-media-min-on: var(--ceweb-timeline-media-min-height);
  --ceweb-timeline-zoom: 1.04;

  /* --- Textes ------------------------------------------------- */
  /* Fraunces nommée en clair, comme dans « Mega menu » et « Équipe » :
     --e-global-typography-primary-font-family n'est pas Fraunces sur le site. */
  --ceweb-timeline-heading-font: Fraunces, Georgia, serif;
  --ceweb-timeline-tag-color: #06331A;
  --ceweb-timeline-title-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-timeline-text-color: var(--theme-palette-color-7, #475569);
  --ceweb-timeline-strong-color: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-timeline-text-max: 66ch;

  padding: var(--ceweb-timeline-padding);
  background: var(--ceweb-timeline-bg, var(--theme-palette-color-10, #F5F8FC));
  color: var(--ceweb-timeline-title-color);
}
.ceweb-timeline *,
.ceweb-timeline *::before,
.ceweb-timeline *::after{ box-sizing: border-box; }

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

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

   Un <ol> emboîté dans la racine, jamais la racine elle-même, et ses remises
   à zéro passent par des sélecteurs à deux classes : `.elementor ol` (0,1,1)
   reprendrait sinon la marge, le retrait et les numéros — le piège déjà
   rencontré sur « Méthode » et « Constats ».
   ============================================================ */
.ceweb-timeline .ceweb-timeline__list{
  display: flex;
  flex-direction: column;
  max-width: var(--ceweb-timeline-max-width);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* Une étape = une grille de trois zones (date, rail, carte), placées par les
   variables de disposition. `gap` vaut pour les deux axes : en disposition
   empilée, il sépare aussi la date de la carte, comme sur la maquette. */
.ceweb-timeline .ceweb-timeline__list .ceweb-timeline__item{
  position: relative;
  display: grid;
  grid-template-columns: var(--ceweb-timeline-cols);
  gap: var(--ceweb-timeline-col-gap);
  margin: 0;
  padding: 0 0 var(--ceweb-timeline-step-gap);
  list-style: none;

  /* Halo du point, calculé ici et non sur la racine : l'accent peut être
     redéfini étape par étape, et un var() imbriqué dans une propriété
     personnalisée est substitué sur l'élément qui porte la déclaration — sur
     la racine, il figerait l'accent du bloc pour tous les points. */
  --ceweb-timeline-halo: rgba(26, 111, 255, .07);
}
.ceweb-timeline .ceweb-timeline__list .ceweb-timeline__item:last-child{ padding-bottom: 0; }
.ceweb-timeline .ceweb-timeline__list .ceweb-timeline__item::marker{ content: none; }

@supports (color: color-mix(in srgb, red 50%, white)){
  .ceweb-timeline .ceweb-timeline__list .ceweb-timeline__item{
    --ceweb-timeline-halo: color-mix(
      in srgb,
      var(--ceweb-timeline-accent) var(--ceweb-timeline-halo-amount),
      transparent
    );
  }
}

/* ============================================================
   Date
   ============================================================ */
.ceweb-timeline__meta{
  grid-area: var(--ceweb-timeline-meta-area);
  display: flex;
  flex-direction: column;
  align-items: var(--ceweb-timeline-meta-align);
  min-width: 0;
  margin-bottom: var(--ceweb-timeline-meta-gap);
  padding-top: var(--ceweb-timeline-meta-pad);
  text-align: var(--ceweb-timeline-meta-text);
}

.ceweb-timeline .ceweb-timeline__meta .ceweb-timeline__date{
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border: 1px solid var(--ceweb-timeline-date-border);
  border-radius: 50px;
  background: var(--ceweb-timeline-date-bg);
  color: var(--ceweb-timeline-date-color, var(--ceweb-timeline-accent));
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* ============================================================
   Rail

   Chaque étape dessine son propre tronçon de trait, du centre de son point au
   centre du point suivant : il déborde vers le bas de l'espace entre étapes
   plus la position du point, et le point de l'étape suivante, peint après lui,
   le recouvre. La dernière étape n'en a pas.
   ============================================================ */
.ceweb-timeline__rail{
  grid-area: var(--ceweb-timeline-rail-area);
  position: relative;
  display: flex;
  justify-content: center;
}

.ceweb-timeline__line{
  position: absolute;
  top: calc(var(--ceweb-timeline-dot-top) + var(--ceweb-timeline-dot-size) / 2);
  bottom: calc(-1 * (var(--ceweb-timeline-step-gap) + var(--ceweb-timeline-dot-top) + var(--ceweb-timeline-dot-size) / 2));
  left: 50%;
  width: var(--ceweb-timeline-line-width);
  margin-left: calc(var(--ceweb-timeline-line-width) / -2);
  border-radius: 50px;
  background: repeating-linear-gradient(
    to bottom,
    var(--ceweb-timeline-line-color) 0 var(--ceweb-timeline-dash),
    transparent var(--ceweb-timeline-dash) calc(var(--ceweb-timeline-dash) + var(--ceweb-timeline-dash-gap))
  );
}
.ceweb-timeline__item:last-child .ceweb-timeline__line{ display: none; }

.ceweb-timeline__dot{
  position: relative;
  flex-shrink: 0;
  width: var(--ceweb-timeline-dot-size);
  height: var(--ceweb-timeline-dot-size);
  margin-top: var(--ceweb-timeline-dot-top);
  border: var(--ceweb-timeline-dot-border) solid var(--ceweb-timeline-dot-color, var(--ceweb-timeline-accent));
  border-radius: 50%;
  background: var(--ceweb-timeline-dot-bg);
  box-shadow: 0 0 0 var(--ceweb-timeline-halo-size) var(--ceweb-timeline-halo);
}

/* ============================================================
   Carte

   Une grille d'une colonne sans photo. Avec photo (`.has-media`), les
   colonnes et l'ordre viennent des variables de « Place de la photo » : à
   côté du texte, la photo prend la hauteur du texte (jamais moins que la
   hauteur minimale) ; au-dessus, ce sont ses proportions qui la dimensionnent.
   ============================================================ */
.ceweb-timeline__card{
  grid-area: var(--ceweb-timeline-card-area);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  padding: var(--ceweb-timeline-card-padding);
  border: 1px solid var(--ceweb-timeline-card-border);
  border-radius: var(--ceweb-timeline-card-radius);
  background: var(--ceweb-timeline-card-bg);
  transition:
    border-color var(--ceweb-timeline-duration) ease,
    box-shadow var(--ceweb-timeline-duration) ease,
    transform var(--ceweb-timeline-duration) ease;
}
.ceweb-timeline__card.has-media{
  grid-template-columns: var(--ceweb-timeline-card-cols);
  gap: var(--ceweb-timeline-media-gap);
  align-items: stretch;
}

.ceweb-timeline__body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--ceweb-timeline-card-gap);
  min-width: 0;
}

/* ============================================================
   Photo

   L'arrondi vit sur le cadre, qui rogne (`overflow: hidden`), et pas
   seulement sur l'image : une règle de thème du type `.entry-content img`
   passerait devant une classe isolée. `isolation` garde l'arrondi pendant le
   zoom sous Safari. L'image est sortie du flux et couvre le cadre : c'est le
   cadre seul qui décide de la hauteur, d'après ses proportions ou d'après le
   texte voisin.
   ============================================================ */
.ceweb-timeline__media{
  position: relative;
  order: var(--ceweb-timeline-media-order);
  min-height: var(--ceweb-timeline-media-min-on);
  aspect-ratio: var(--ceweb-timeline-media-ratio-on);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--ceweb-timeline-media-radius);
  background: var(--theme-palette-color-10, #F5F8FC);
}

/* Sélecteur long (0,3,0) : `height: auto` et `max-width: 100%` des thèmes
   sur `img` casseraient le remplissage du cadre. */
.ceweb-timeline .ceweb-timeline__media .ceweb-timeline__img{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: var(--ceweb-timeline-focus, center);
  transition: transform calc(var(--ceweb-timeline-duration) * 2.5) cubic-bezier(.2, .7, .3, 1);
}

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

   Sélecteurs volontairement longs (0,3,0) : une règle de thème du type
   `.entry-content h3` (0,1,1) passerait devant une classe isolée. Longs
   plutôt qu'`!important`, pour que l'onglet Style garde la main.
   ============================================================ */
.ceweb-timeline .ceweb-timeline__card .ceweb-timeline__tag{
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 50px;
  background: var(--ceweb-timeline-tag-bg, var(--ceweb-timeline-accent));
  color: var(--ceweb-timeline-tag-color);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ceweb-timeline .ceweb-timeline__card .ceweb-timeline__title{
  margin: 0;
  color: var(--ceweb-timeline-title-color);
  font-family: var(--ceweb-timeline-heading-font);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-align: left;
}

.ceweb-timeline .ceweb-timeline__card .ceweb-timeline__text{
  max-width: var(--ceweb-timeline-text-max);
  color: var(--ceweb-timeline-text-color);
  font-size: 16px;
  line-height: 1.75;
  text-align: left;
}
.ceweb-timeline .ceweb-timeline__text p{ margin: 0 0 .75em; }
.ceweb-timeline .ceweb-timeline__text > :last-child{ margin-bottom: 0; }
.ceweb-timeline .ceweb-timeline__text strong{
  color: var(--ceweb-timeline-strong-color);
  font-weight: 600;
}
.ceweb-timeline .ceweb-timeline__text a{ color: var(--ceweb-timeline-accent); }

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

   Sous `.ceweb-timeline--hover`, une classe que PHP n'émet que si le réglage
   est actif. Le focus clavier compte comme le survol, pour un lien glissé
   dans un paragraphe. L'ombre est posée par le contrôle d'Elementor, sous la
   même classe.
   ============================================================ */
.ceweb-timeline--hover .ceweb-timeline__card:hover,
.ceweb-timeline--hover .ceweb-timeline__card:focus-within{
  border-color: var(--ceweb-timeline-card-border-hover, var(--ceweb-timeline-accent));
  transform: translateY(calc(-1 * var(--ceweb-timeline-lift)));
}

.ceweb-timeline--hover .ceweb-timeline__card:hover .ceweb-timeline__img,
.ceweb-timeline--hover .ceweb-timeline__card:focus-within .ceweb-timeline__img{
  transform: scale(var(--ceweb-timeline-zoom));
}

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

   Le soulèvement et le zoom disparaissent ; la bordure et l'ombre restent,
   ce sont elles qui signalent l'état.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .ceweb-timeline__card,
  .ceweb-timeline .ceweb-timeline__media .ceweb-timeline__img{
    transition: none;
  }
  .ceweb-timeline--hover .ceweb-timeline__card:hover,
  .ceweb-timeline--hover .ceweb-timeline__card:focus-within,
  .ceweb-timeline--hover .ceweb-timeline__card:hover .ceweb-timeline__img,
  .ceweb-timeline--hover .ceweb-timeline__card:focus-within .ceweb-timeline__img{
    transform: none;
  }
}