/* ====== Éditeur (Gutenberg) ====== */
.ms-editor-wrap { border:1px solid #e0e0e0; padding:12px; border-radius:8px; background:#fafafa }
.ms-editor-header { display:flex; align-items:center; gap:10px; margin-bottom:12px }
.ms-panel-group  { border:1px solid #ddd; padding:12px; border-radius:8px; background:#fff; margin-bottom:12px }
.ms-panel-row    { margin-bottom:8px }
.ms-panel-actions{ text-align:right }

/* ====== Front ====== */

/* Espace entre colonnes contrôlé par une variable (sert aussi pour le trait) */
.ms-timeline{ --ms-gap:0px; width:100%; }
.ms-timeline__group{ margin:56px 0; }

/* Colonne gauche = texte (flexible), colonne droite = année (auto = largeur du texte) */
.ms-timeline__row{
  display:grid;
  grid-template-columns: minmax(420px,1fr) auto;
  align-items:center;                     /* centre verticalement box et année */
  gap: var(--ms-gap);
  position:relative;
}

/* ===== Box texte : bordures top/right/bottom, plaquée à droite ===== */
.ms-timeline__col--left{ position:relative; }

.ms-timeline__box--left{
  position:relative;
  margin-left:auto;                       /* plaque la box au bord droit de la colonne gauche */
  max-width:820px;
  padding: 0px 28px 28px 10px;
  border-top:1px solid rgba(255,255,255);
  border-right:1px solid rgba(255,255,255);
  border-bottom:1px solid rgba(255,255,255);
}

.ms-timeline__events{
  margin:0;
  white-space:pre-line;                   /* 1 ligne = 1 événement */
  text-align:right;                      /* centré comme sur ta capture; mets 'left' si besoin */
  font-size:20px;	
}

/* Optionnel : fine ligne décorative interne en haut de la box
.ms-timeline__box--left::before{
  content:"";
  position:absolute;
  left:0; right:0; top:18px;
  border-top:2px solid rgba(255,255,255,.15);
}
*/

/* ===== Année : soulignée + long trait qui part vers la GAUCHE ===== */
.ms-timeline__col--right{ position:relative; transform: translateY(-50%);}

.ms-timeline__year{
  position:relative;
  display:inline-block;                   /* pour que le soulignement colle à la largeur du texte */
  line-height:1;
  padding-bottom:6px;
  border-bottom:1px solid rgba(255,255,255);   /* petit soulignement sous l’année */
  width: 500px;
  text-align: center;
  font-weight: 400;	
}

/* Le long trait aligné EXACTEMENT sur le soulignement de l’année,
   qui part à gauche jusqu’à toucher la bordure droite de la box */
.ms-timeline__year::after{
  content:"";
  position:absolute;
  bottom:-1px;                             /* s’aligne sur le border-bottom de l’année */
  left: calc(-1 * var(--ms-gap));          /* recule de la largeur du gap */
  width: var(--ms-gap);                    /* traverse tout l’espace entre colonnes */
  border-bottom:2px solid rgba(255,255,255,.35);
  pointer-events:none;
}

/* Si un ancien patch ajoutait des segments, on les neutralise ici */
.ms-timeline__box--left::after,
.ms-timeline__col--right::before{ content:none !important; }

/* Révélation au scroll (activée seulement quand .ms-reveal est posé par JS) */
.ms-timeline.ms-reveal .ms-timeline__group{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

.ms-timeline.ms-reveal .ms-timeline__group.is-visible{
  opacity: 1;
  transform: none;
}


/* ===== Responsive ===== */
@media (max-width: 992px){
  .ms-timeline{ --ms-gap:28px; }
  .ms-timeline__row{ grid-template-columns:1fr; gap: var(--ms-gap); }
  .ms-timeline__col--right{ order:-1; }     /* année au-dessus en mobile */
  .ms-timeline__year::after{ display:none; }/* on coupe le long trait en mobile */
  .ms-timeline__box--left{ margin-left:0; } /* box pleine largeur colonne */
}