/* Zappette de navigation : collée au bord gauche, légèrement transparente, sans ombre. */
.zappette {
  position: fixed;
  left: 0;
  top: 66%;
  transform: translateY(-50%);
  z-index: 40;
  width: 6.6rem;
  box-sizing: border-box;
  background: rgba(255, 255, 255, .38);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--ligne, #E7DED3);
  border-left: 0;
  border-radius: 0 18px 18px 0;
  box-shadow: none;
  transition: opacity .3s ease, transform .25s ease, background .25s ease;
}
.zappette:hover,
.zappette:focus-within { background: rgba(255, 255, 255, .96); }
.zappette [hidden] { display: none !important; }
.zappette--efface { opacity: 0; pointer-events: none; }

.zappette__corps {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-height: min(70vh, calc(68vh - 220px));
  overflow-y: auto;
  scrollbar-width: none;
  padding: .85rem .6rem .75rem .5rem;
  border-radius: inherit;
}
.zappette__corps::-webkit-scrollbar { display: none; }

.zappette__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .05rem; }
.zappette__liste a {
  display: block;
  position: relative;
  padding: .3rem .3rem .3rem .95rem;
  font: 400 .76rem/1.25 "Work Sans", sans-serif;
  color: #4a3b32;
  text-decoration: none;
}
.zappette__liste a:hover,
.zappette__liste a:focus-visible { color: #1F6E69; }
.zappette__liste a::before {
  content: "";
  position: absolute; left: .4rem; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%; background: #1F6E69;
  opacity: 0; transition: opacity .2s ease;
}
.zappette__liste a[aria-current="true"] { color: #1F6E69; }
.zappette__liste a[aria-current="true"]::before { opacity: 1; }

.zappette__cta {
  display: block;
  padding: .42rem .5rem;
  border-radius: 999px;
  background: #1F6E69;
  color: #fff;
  font: 400 .76rem/1.2 "Work Sans", sans-serif;
  text-align: center;
  text-decoration: none;
  transition: background .15s ease;
}
.zappette__cta:hover,
.zappette__cta:focus-visible { background: #124B47; }

.zappette__outils { display: flex; justify-content: center; gap: .15rem; }
.zappette__outils button {
  width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: none; color: #1F6E69; opacity: .6; cursor: pointer;
  transition: opacity .15s ease, background .15s ease;
}
.zappette__outils button:hover,
.zappette__outils button:focus-visible { opacity: 1; background: rgba(31, 110, 105, .1); }
.zappette__outils svg,
.zappette__poignee svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.zappette__yt {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding-top: .6rem;
  border-top: 1px solid var(--ligne, #E7DED3);
  color: #4a3b32; font: 400 .68rem/1 "Work Sans", sans-serif; text-decoration: none; opacity: .85;
}
.zappette__yt:hover, .zappette__yt:focus-visible { color: #1F6E69; opacity: 1; }
.zappette__yt img { width: 26px; height: 26px; object-fit: contain; }

/* Languette : visible seulement sur petit écran */
.zappette__poignee { display: none; }

@media (max-width: 1100px) {
  .zappette { transform: translate(-100%, -50%); }
  .zappette--ouverte { transform: translate(0, -50%); background: rgba(255, 255, 255, .96); }
  .zappette__poignee {
    display: flex; align-items: center; justify-content: center;
    position: absolute; left: 100%; top: 50%; margin-top: -30px;
    width: 22px; height: 60px; padding: 0;
    background: rgba(255, 255, 255, .38);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid var(--ligne, #E7DED3); border-left: 0;
    border-radius: 0 12px 12px 0;
    color: #1F6E69; cursor: pointer;
    transition: background .25s ease;
  }
  .zappette__poignee:hover,
  .zappette__poignee:focus-visible { background: rgba(255, 255, 255, .96); }
  .zappette--ouverte .zappette__poignee svg { transform: rotate(180deg); }
}

main h2, [data-zap] { scroll-margin-top: 6rem; }
@media print { .zappette { display: none !important; } }

/* Signal sur la barre d'outils au-dessus du pied de page */
@keyframes barre-signal { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0); } 50% { box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .75); } }
.barre-partage-favoris--signal { animation: barre-signal .9s ease 2; }