/* HS Info + — affichage public */

.hsip{
  --hsip-a1:#B33CC9;
  --hsip-a2:#8300E9;
  --hsip-bg:#F6F2F9;
  --hsip-shift:0px;
  --hsip-ink:#140E1C;
  --hsip-ink2:#3B3348;
  --hsip-muted:#6E6580;
  --hsip-taupe:#998A6E;
  --hsip-line:#E5DDF0;
  --hsip-line2:#EFEAF6;
  --hsip-disp:"Fraunces",Georgia,serif;
  --hsip-body:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* Ni fond ni marge : le module est posé dans une section Divi,
     c'est elle qui porte l'habillage. */
  background:none;
  padding:0;
  font-family:var(--hsip-body);
  color:var(--hsip-ink);
  overflow:hidden;
}
.hsip *{box-sizing:border-box}

/* ---------- en-tête ---------- */
.hsip-head{
  max-width:1400px;margin:0 auto 30px;padding:0 40px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.hsip-eyebrow{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--hsip-taupe);
}
.hsip-eyebrow::before{
  content:"";display:inline-block;width:22px;height:1px;
  background:#CBC2AE;vertical-align:4px;margin-right:11px;
}
.hsip-h2{
  font-family:var(--hsip-disp);font-size:32px;font-weight:300;letter-spacing:-.03em;
  margin:12px 0 0;line-height:1.15;
}
.hsip-intro{margin:10px 0 0;font-size:14.5px;color:var(--hsip-muted);max-width:50ch;line-height:1.6}

/* ---------- piste ---------- */
/* Le centrage est l'état par défaut : il s'applique même avant que le
   script ait mesuré quoi que ce soit, et même s'il ne s'exécute pas. */
.hsip-viewport{overflow:hidden;display:flex;justify-content:center}
.hsip-track{
  display:flex;align-items:flex-start;gap:18px;
  width:max-content;flex-shrink:0;
  /* Le retrait vertical n'est pas décoratif : sans lui, overflow:hidden
     rogne l'ombre portée des notes, et davantage encore quand l'une
     d'elles est dépliée. */
  padding:12px 40px 46px;
}

/* Dès que ça défile, on repasse en flux normal : une piste en mouvement
   doit partir du bord gauche. */
.hsip.is-running .hsip-viewport{display:block}
.hsip.is-running .hsip-track{
  animation-name:hsip-slide;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
.hsip--pause.is-running:hover .hsip-track,
.hsip--pause.is-running:focus-within .hsip-track,
.hsip.is-frozen .hsip-track{animation-play-state:paused}

/* Trop peu de notes pour remplir l'écran : rien ne défile, et si elles
   passent à la ligne sur un écran étroit, elles restent centrées. */
.hsip.is-static .hsip-track{
  flex-wrap:wrap;row-gap:18px;max-width:100%;justify-content:center;
}

@keyframes hsip-slide{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--hsip-shift)))}
}

/* ---------- note ---------- */
/* Le coin haut-droit est réellement découpé, et non recouvert : le plugin
   ne connaît pas la couleur de fond de la section Divi, il ne peut donc pas
   la peindre par-dessus. clip-path retire la matière ; drop-shadow suit la
   silhouette obtenue, là où box-shadow redessinerait un angle droit. */
.hsip-note{
  --fold:20px;
  width:288px;flex:0 0 auto;background:#fff;
  border:1px solid var(--hsip-line);
  border-radius:3px 0 3px 18px;
  padding:19px 21px 21px;
  position:relative;
  clip-path:polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100%);
  filter:drop-shadow(0 9px 14px rgba(20,14,28,.16));
}
/* Ombre du repli : seule sa moitié basse-gauche subsiste, le reste ayant
   été retiré par le découpage. */
.hsip-note::after{
  content:"";position:absolute;right:0;top:0;width:0;height:0;
  border-width:0 var(--fold) var(--fold) 0;border-style:solid;
  border-color:var(--hsip-line) transparent;
}
.hsip-track .hsip-note:nth-child(3n){transform:rotate(-1.2deg)}
.hsip-track .hsip-note:nth-child(3n+1){transform:rotate(1deg)}

.hsip-tag{
  display:inline-block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;padding:4px 10px;border-radius:999px;margin-bottom:11px;
}
.hsip-note--cours  .hsip-tag{background:rgba(131,0,233,.1);color:var(--hsip-a2)}
.hsip-note--info   .hsip-tag{background:rgba(93,253,229,.45);color:#128C79}
.hsip-note--alerte .hsip-tag{background:rgba(153,138,110,.2);color:#6F6349}

.hsip-title{
  font-family:var(--hsip-disp);font-size:17.5px;font-weight:600;
  margin:0 0 7px;letter-spacing:-.02em;line-height:1.25;color:var(--hsip-ink);
}
.hsip-text{font-size:13.5px;color:var(--hsip-ink2);margin:0;line-height:1.58}

.hsip-btn{
  display:inline-block;margin-top:14px;padding:9px 18px;border-radius:999px;
  font-size:13px;font-weight:600;color:#fff !important;text-decoration:none;
  background:linear-gradient(102deg,var(--hsip-a1),var(--hsip-a2));
  box-shadow:0 8px 18px -10px var(--hsip-a2);
  transition:transform .22s,box-shadow .22s;
}
.hsip-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 26px -12px var(--hsip-a2);
  color:#fff !important;
}

.hsip-more{
  display:inline-block;margin-top:8px;padding:0;border:0;background:none;
  font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  color:var(--hsip-a2);text-decoration:underline;text-underline-offset:3px;
}
.hsip-more:hover{opacity:.75}
.hsip-note.is-open{
  border-color:var(--hsip-a1);
  filter:drop-shadow(0 13px 20px rgba(20,14,28,.22));
}

.hsip-date{
  display:block;margin-top:14px;padding-top:11px;
  border-top:1px solid var(--hsip-line2);
  font-size:11px;color:var(--hsip-taupe);
}

/* ---------- accessibilité et petits écrans ---------- */
@media (prefers-reduced-motion:reduce){
  .hsip-track{animation:none;flex-wrap:nowrap}
  .hsip-viewport{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .hsip-track .hsip-note{transform:none !important}
}
@media (max-width:782px){
  .hsip-head{padding:0 24px;margin-bottom:24px}
  .hsip-h2{font-size:26px}
  .hsip-track{padding:12px 24px 42px}
  .hsip-note{width:264px}
}