/* Navigation dynamique : en-tête compact + masqué au défilement vers le bas, indicateur glissant,
   grand menu des médiations, et sommaire « Sur cette page » (barre sticky, ou rail latéral sur grands écrans).
   Les animations sont retirées avec prefers-reduced-motion ; sans JS, la navigation classique reste intacte. */

html{--hdr:4.5rem;--sn-w:14rem}
.site-header{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.site-header__inner{transition:min-height .3s ease}
.brand__logo{transition:width .3s ease}
html.hdr-compact .site-header{box-shadow:0 6px 20px rgba(12,0,116,.12)}
html.hdr-compact .site-header__inner{min-height:3.5rem}
html.hdr-compact .brand__logo{width:2.5rem}
html.hdr-hidden .site-header{transform:translateY(-100%)}

/* ---------- Indicateur glissant sous le menu (ordinateur) ---------- */
@media (min-width:72em){
  .site-nav__list{position:relative}
  .nav-indicator{position:absolute;left:0;bottom:2px;height:3px;width:var(--w,0);transform:translateX(var(--x,0));border-radius:3px;
    background:linear-gradient(90deg,var(--blue),var(--cyan));opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.2,.7,.2,1),width .35s cubic-bezier(.2,.7,.2,1),opacity .2s}
  .nav-indicator.is-on{opacity:1}
  .site-nav a[aria-current="page"]{text-decoration:none}
  .js .site-nav a[aria-current="page"]{text-decoration:none}

  /* Grand menu « Les médiations » */
  .site-nav__sub--mega{display:grid;grid-template-columns:1fr 1fr;gap:.25rem;width:44rem;left:50%;transform:translateX(-62%);padding:.75rem}
  .site-nav__sub--mega .mega__all{grid-column:1/-1}
  .site-nav__sub--mega .mega__all a{justify-content:center;font-weight:700;color:var(--blue-text);border-bottom:1px solid var(--line);border-radius:10px 10px 0 0;margin-bottom:.25rem}
  .mega__item{align-items:flex-start!important;gap:.8rem!important;padding:.65rem .75rem!important;min-height:0!important}
  .mega__item .pastille{flex:none;width:2.5rem;height:2.5rem;transition:background-color .25s,color .25s,transform .25s}
  .mega__item .pastille .icon{width:1.2rem;height:1.2rem}
  .mega__item:hover .pastille{background:var(--blue);color:#fff;transform:rotate(-6deg) scale(1.06)}
  .mega__text{display:grid;gap:.15rem;text-transform:none;letter-spacing:.01em}
  .mega__text strong{font-size:.95rem;color:var(--head)}
  .mega__text small{font-size:.8rem;font-weight:400;line-height:1.4;color:var(--muted)}
  @media (prefers-reduced-motion:no-preference){
    .site-nav details[open]>.site-nav__sub{animation:dropIn .25s cubic-bezier(.2,.7,.2,1)}
    .site-nav details[open]>.site-nav__sub--mega{animation:dropInMega .25s cubic-bezier(.2,.7,.2,1)}
    @keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
    @keyframes dropInMega{from{opacity:0;transform:translate(-62%,-8px)}to{opacity:1;transform:translateX(-62%)}}
  }
}
/* Mobile : le panneau se révèle en cercle depuis le bouton, puis les liens arrivent en cascade */
@media (max-width:71.99em) and (prefers-reduced-motion:no-preference){
  .js .site-nav.is-open{animation:menuIn .55s cubic-bezier(.2,.7,.2,1) both}
  .js .site-nav.is-open.is-closing{animation:menuOut .3s ease-in both}
  @keyframes menuIn{from{clip-path:circle(0 at calc(100% - 2.375rem) 2.375rem)}to{clip-path:circle(150% at calc(100% - 2.375rem) 2.375rem)}}
  @keyframes menuOut{from{clip-path:circle(150% at calc(100% - 2.375rem) 2.375rem)}to{clip-path:circle(0 at calc(100% - 2.375rem) 2.375rem)}}
  .js .site-nav.is-open .site-nav__item{opacity:0;transform:translateY(16px);animation:menuItem .5s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.15s + var(--i,0) * .06s)}
  .js .site-nav.is-open.is-closing .site-nav__item{animation:none;opacity:1;transform:none}
  @keyframes menuItem{to{opacity:1;transform:none}}
  .site-nav__item:nth-child(1){--i:0}.site-nav__item:nth-child(2){--i:1}.site-nav__item:nth-child(3){--i:2}
  .site-nav__item:nth-child(4){--i:3}.site-nav__item:nth-child(5){--i:4}.site-nav__item:nth-child(6){--i:5}.site-nav__item:nth-child(7){--i:6}
  /* le bouton tourne quand il devient « fermer » */
  .js .menu-toggle[aria-expanded="true"] .menu-toggle__close{animation:spinIn .45s cubic-bezier(.2,.7,.2,1)}
  @keyframes spinIn{from{transform:rotate(-90deg) scale(.6);opacity:0}to{transform:none;opacity:1}}
}

/* Menu ouvert : le tiroir du sommaire se met de côté (la bascule clair/sombre reste accessible) */
body.menu-open .section-nav,body.menu-open .section-nav__handle,body.menu-open .section-nav__backdrop{display:none}

/* Mobile : on garde les titres seuls dans le panneau */
@media (max-width:71.99em){
  .mega__text small,.mega__item .pastille{display:none}
  .mega__text strong{font-weight:500;color:inherit}
}

/* ---------- Sommaire « Sur cette page » : tiroir latéral coulissant (ordinateur et mobile) ---------- */
main section[id]{scroll-margin-top:calc(var(--hdr) + 1.5rem)}
.section-nav{position:fixed;z-index:80;left:0;top:50%;transform:translate(-100%,-50%);width:var(--sn-w);max-height:min(34rem,80vh);
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-left:0;border-radius:0 18px 18px 0;box-shadow:var(--shadow-card);
  visibility:hidden;transition:transform .4s cubic-bezier(.2,.7,.2,1),visibility .4s}
html.sn-open .section-nav{transform:translate(0,-50%);visibility:visible}
.section-nav__title{margin:0;padding:1rem 1.1rem .5rem;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-text)}
.section-nav__list{list-style:none;margin:0;padding:0 .5rem 1rem;overflow-y:auto}
.section-nav a{display:block;margin-left:.1rem;padding:.55rem .75rem;border-left:3px solid transparent;border-radius:0 10px 10px 0;font-size:.88rem;line-height:1.3;text-decoration:none;color:var(--text);transition:background-color .2s,color .2s,border-color .2s}
.section-nav a:hover{background:var(--blue-50);color:var(--blue-text)}
.section-nav a.is-active{border-left-color:var(--blue);background:var(--blue-100);color:var(--blue-text);font-weight:700}

/* Poignée : languette collée au tiroir (ordinateur), pastille en bas à gauche (mobile) */
.section-nav__handle{position:fixed;z-index:81;left:0;top:50%;transform:translateY(-50%);width:2.25rem;height:4.5rem;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-left:0;border-radius:0 14px 14px 0;background:var(--surface);color:var(--blue-text);box-shadow:var(--shadow-soft);cursor:pointer;padding:0;
  transition:left .4s cubic-bezier(.2,.7,.2,1),background-color .2s}
.section-nav__handle:hover{background:var(--blue-100)}
.section-nav__handle .icon{width:1.3rem;height:1.3rem;transition:transform .3s}
html.sn-open .section-nav__handle{left:var(--sn-w,14rem)}
html.sn-open .section-nav__handle .icon{transform:rotate(180deg)}
.section-nav__backdrop{display:none}
@media (max-width:55.99em){
  html{--sn-w:min(17rem,82vw)}
  .section-nav{top:auto;bottom:0;max-height:70vh;transform:translate(-100%,0);border-radius:0 18px 0 0;border-bottom:0}
  html.sn-open .section-nav{transform:none}
  .section-nav__list{padding-bottom:4.5rem}
  .section-nav__handle{top:auto;bottom:1rem;left:1rem;width:3rem;height:3rem;border:1px solid var(--line);border-radius:50%;transform:none}
  html.sn-open .section-nav__handle{left:1rem}
  .section-nav__backdrop{display:block;position:fixed;inset:0;z-index:79;background:rgba(12,0,116,.4);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  html.sn-open .section-nav__backdrop{opacity:1;visibility:visible}
}
@media (min-width:100em){
  html{--sn-w:13.5rem}
}
@media (prefers-reduced-motion:reduce){
  .site-header,.site-header__inner,.brand__logo,.section-nav,.section-nav__handle,.section-nav__backdrop{transition:none}
}

/* ---------- Retour aux publications (articles) ---------- */
.back-link{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:var(--s2);padding:.4rem 1rem;border:1px solid rgba(255,255,255,.45);border-radius:999px;color:#fff;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;background:rgba(255,255,255,.08);transition:background-color .25s,transform .25s}
.back-link .icon{width:1rem;height:1rem;transform:rotate(180deg);transition:transform .25s}
.back-link:hover{background:rgba(255,255,255,.2);color:#fff}
.back-link:hover .icon{transform:rotate(180deg) translateX(3px)}
.post-back{margin-top:var(--s4)}
.post-back .icon{width:1rem;height:1rem}
.icon--flip{transform:rotate(180deg)}
/* Bouton flottant : apparaît après un peu de lecture, en bas à gauche */
.back-float{position:fixed;z-index:70;left:1rem;bottom:1rem;display:inline-flex;align-items:center;gap:.5rem;min-height:var(--touch);padding:.5rem 1.1rem .5rem .85rem;border-radius:999px;
  /* contour bleu sur fond de page : se distingue des boutons pleins du contenu (le fond évite que le texte lu en dessous transparaisse) */
  background:var(--surface);color:var(--blue-text);border:2px solid var(--blue);font-size:.85rem;font-weight:700;letter-spacing:.04em;text-decoration:none;box-shadow:var(--shadow-card);
  opacity:0;transform:translateY(12px);pointer-events:none;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s,background-color .2s,color .2s}
.back-float .icon{width:1.1rem;height:1.1rem;transform:rotate(180deg)}
.back-float:hover{background:var(--blue);color:#fff}
html.show-back .back-float{opacity:1;transform:none;pointer-events:auto;visibility:visible}
body.menu-open .back-float{display:none}
@media (prefers-reduced-motion:reduce){.back-float,.back-link,.back-link .icon{transition:none}}