/* =========================================================================
   MsCollab — page Édito (/edito), chargée en plus de site.css sur cette
   seule page. Couleurs : variables de site.css (palette du logo, versions
   « -t » assombries pour le texte de petite taille, contraste ≥ 4,5:1).
   Aucun style en ligne (CSP) : les couleurs passent par des classes.
   ========================================================================= */

.edito{
  --e-text:#2e2b4a; --e-grey:#6b6880; --e-sep:#e4e1f2; --e-frame:#f3f1fb; --e-mark:#fbd3e6;
}
.edito a:focus-visible,.edito button:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:6px}

/* Couleurs par classe : fond/décor (c), texte de petite taille (t). */
.edito-c--bleu{color:var(--blue)}   .edito-t--bleu{color:var(--blue-t)}
.edito-c--rose{color:var(--pink)}   .edito-t--rose{color:var(--pink-t)}
.edito-c--vert{color:var(--green)}  .edito-t--vert{color:var(--green-t)}
.edito-c--orange{color:var(--orange)} .edito-t--orange{color:var(--orange-t)}
.edito-c--violet{color:var(--purple)} .edito-t--violet{color:var(--purple-t)}

/* ---------- En-tête ---------- */
.edito-nav{margin:0 6px}
.edito-nav__links{display:flex; gap:4px; font-size:14px; font-weight:600; color:var(--muted); margin-left:auto}
.edito-nav__links a{padding:8px 14px; border-radius:var(--r-pill)}
.edito-nav__links a:hover{background:#fff; opacity:1}
.edito-nav__links a[aria-current="page"]{color:var(--ink); text-decoration:underline; text-decoration-color:var(--pink);
  text-decoration-thickness:2px; text-underline-offset:7px}

/* ---------- Haut de page ---------- */
.edito-article{max-width:1180px; margin:0 auto; padding:0 22px}
.edito-top{display:flex; gap:56px; align-items:flex-start; justify-content:space-between; padding:72px 0 56px}
.edito-top__text{flex:1 1 auto; min-width:0}
.edito-kicker{margin:0 0 22px; font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--e-grey)}
.edito-title{font-family:'Bricolage Grotesque','Manrope',sans-serif; font-weight:800;
  font-size:clamp(46px,7vw,88px); line-height:.98; letter-spacing:-.035em; margin:0 0 30px}
.edito-title__part{display:block}
.edito-lead{font-size:clamp(19px,1.9vw,23px); font-weight:500; line-height:1.5; color:var(--body); max-width:38ch; margin:0}
.edito-lead em{font-style:normal; font-weight:800; color:var(--ink)}

/* ---------- Cadre « Ligne MsCollab » ---------- */
.edito-line{flex:0 1 420px; background:var(--e-frame); border-radius:22px; padding:26px; margin-top:8px}
.edito-line__head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:24px}
.edito-line__title{margin:0; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--e-grey)}
.edito-line__badge{background:var(--ink); color:#fff; border-radius:6px; padding:5px 9px; font-size:12px; font-weight:700}
.edito-line__stations{list-style:none; margin:0; padding:0}

.edito-station{--st:var(--blue); position:relative; display:flex; flex-direction:column; gap:3px; padding:0 0 22px 42px; min-height:22px}
.edito-station:last-child{padding-bottom:0}
.edito-station--bleu{--st:var(--blue)}
.edito-station--rose{--st:var(--pink)}
.edito-station--violet{--st:var(--purple)}
.edito-station--orange{--st:var(--orange)}
.edito-station--vert{--st:var(--green)}
/* Tronçon : du centre de la pastille au centre de la suivante. */
.edito-station::before{content:''; position:absolute; left:7px; top:11px; width:8px; height:100%; background:var(--st);
  transform-origin:top; transition:transform .15s linear}
.edito-station:last-child::before{display:none}
/* Pastille */
.edito-station::after{content:''; position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%;
  background:#fff; border:5px solid var(--st); z-index:1}
.edito-station__name{font-family:'Bricolage Grotesque','Manrope',sans-serif; font-weight:800; font-size:21px; line-height:1.05; color:var(--ink)}
.edito-station__sub{font-size:13px; line-height:1.4; color:var(--e-grey)}

/* Animation à l'apparition (site.js) : tronçons remplis l'un après l'autre. */
.edito-line__stations.is-pending .edito-station::before{transform:scaleY(0)}
.edito-line__stations.is-drawn .edito-station::before{transform:scaleY(1)}
.edito-station:nth-child(2)::before{transition-delay:.15s}
.edito-station:nth-child(3)::before{transition-delay:.3s}
.edito-station:nth-child(4)::before{transition-delay:.45s}
.edito-station:nth-child(5)::before{transition-delay:.6s}

/* ---------- Corps ---------- */
.edito-sep{border:0; border-top:1px solid var(--e-sep); margin:0}
.edito-body{max-width:1000px; margin:0 auto; padding:64px 0 24px}
.edito-chapter{display:grid; grid-template-columns:200px minmax(0,1fr); gap:48px; margin-bottom:64px}
.edito-chapter--untitled{grid-template-columns:minmax(0,1fr)}
.edito-chapter__head{display:flex; flex-direction:column; gap:6px; padding-top:4px}
.edito-chapter__num{font-size:15px; font-weight:800; letter-spacing:.06em}
.edito-chapter__title{font-family:'Bricolage Grotesque','Manrope',sans-serif; font-weight:800; font-size:30px; letter-spacing:-.02em; color:var(--ink)}
.edito-chapter__text{font-size:19px; line-height:1.72; color:var(--e-text)}
.edito-chapter__text p{margin:0 0 1.1em}
.edito-chapter__text strong{font-weight:800; color:var(--ink)}
.edito-chapter__text a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--pink); text-decoration-thickness:2px; text-underline-offset:3px}

.edito-quote{margin:36px 0; padding:0}
.edito-quote p{font-family:'Bricolage Grotesque','Manrope',sans-serif; font-weight:800; font-size:clamp(25px,2.8vw,32px); line-height:1.2; letter-spacing:-.02em; color:var(--ink); margin:0}
.edito-quote mark,.edito-chapter__text mark{background:linear-gradient(transparent 58%, var(--e-mark) 58%); color:inherit; padding:0 .05em}

.edito-cities{list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 26px; padding:0}
.edito-city{border-radius:var(--r-pill); padding:7px 15px; font-size:15px; font-weight:700; line-height:1.3}
.edito-city--bleu{background:var(--tile-blue); color:var(--blue-t)}
.edito-city--rose{background:var(--tile-pink); color:var(--pink-t)}
.edito-city--vert{background:var(--tile-green); color:var(--green-t)}
.edito-city--orange{background:var(--tile-orange); color:var(--orange-t)}
.edito-city--violet{background:var(--tile-purple); color:var(--purple-t)}

/* ---------- Bloc de fin ---------- */
.edito-end{max-width:1000px; margin:0 auto; background:var(--ink); color:#fff; border-radius:28px; padding:56px clamp(24px,5vw,64px)}
.edito-end__title{font-family:'Bricolage Grotesque','Manrope',sans-serif; font-weight:800; font-size:clamp(28px,3.4vw,40px); line-height:1.1; letter-spacing:-.025em; margin:0 0 12px}
.edito-end__sub{margin:0 0 36px; font-size:18px; line-height:1.5; color:rgba(255,255,255,.82)}
.edito-end__foot{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px}
.edito-end__sign{margin:0; display:flex; flex-direction:column; gap:4px}
.edito-end__name{font-family:'Bricolage Grotesque','Manrope',sans-serif; font-weight:800; font-size:26px; line-height:1.1; letter-spacing:-.02em}
.edito-end__role{font-size:14px; color:rgba(255,255,255,.78)}
.edito-end__btn{display:inline-flex; align-items:center; gap:10px; background:#fff; color:var(--ink); border-radius:var(--r-pill);
  padding:15px 26px; font-weight:800; font-size:15.5px}
.edito-end__btn:hover{opacity:1; transform:translateY(-2px)}
.edito-end a:focus-visible{outline-color:#fff}

/* ---------- Points de rupture ---------- */
@media (max-width:979px){
  .edito-top{flex-direction:column; gap:40px; padding:56px 0 44px}
  .edito-line{flex:none; width:100%; max-width:420px; margin-top:0}
}
@media (max-width:760px){
  .edito-article{padding:0 4px}
  .edito-body{padding-top:44px}
  .edito-chapter{grid-template-columns:minmax(0,1fr); gap:14px; margin-bottom:44px}
  .edito-chapter__head{flex-direction:row; align-items:baseline; gap:12px}
  .edito-chapter__title{font-size:26px}
  .edito-chapter__text{font-size:17.5px}
  .edito-end{padding:40px 24px}
}
@media (max-width:640px){
  .edito-nav{flex-wrap:wrap; border-radius:26px; row-gap:6px}
  .edito-nav__links{order:3; width:100%; margin-left:0; justify-content:center}
  .edito-nav__links a{padding:6px 10px}
  .edito-nav__cta{margin-left:auto}
}
/* « transmettre. » tient sur une ligne jusqu'à 320 px. */
@media (max-width:420px){
  .edito-title{font-size:11.2vw}
}
/* Très petits écrans : logo et bouton tiennent sur la même ligne. */
@media (max-width:380px){
  .edito-nav{padding:8px 8px 8px 14px}
  .edito-nav .nav__logo img{height:22px}
  .edito-nav__cta{padding:9px 14px; font-size:12.5px}
}