/* ====================================================================
   eSoucoulou Suite — Tutoriels vidéo « Comment ça marche » (v4.34.0)
   ==================================================================== */

/* ---------- Section [eso_tutos] ---------- */
.eso-tutos { margin: 32px auto 0; max-width: 760px; text-align: center; }
.eso-tutos__title { margin: 0 0 6px; font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem); line-height: 1.25; }
.eso-tutos__intro { margin: 0 auto 18px; max-width: 560px; color: var(--esos-muted, #757575); }
.eso-tutos__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; text-align: left; }
.eso-tuto-card {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none !important;
  color: var(--esos-text, #212121) !important; background: var(--esos-surface, #fff);
  border: 1px solid var(--esos-border, #e5e7eb); border-radius: var(--esos-radius, 14px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06); transition: transform .2s ease, box-shadow .2s ease;
}
.eso-tuto-card:hover, .eso-tuto-card:focus-visible { transform: translateY(-3px); box-shadow: var(--esos-shadow, 0 10px 30px rgba(0,0,0,.12)); }
.eso-tuto-card__media { position: relative; display: block; aspect-ratio: 9 / 12; overflow: hidden; background: #0e7a17; }
.eso-tuto-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.eso-tuto-card__play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: #facc15; color: #1a1300; box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  transition: transform .2s ease;
}
.eso-tuto-card:hover .eso-tuto-card__play { transform: scale(1.08); }
.eso-tuto-card__len {
  position: absolute; right: 10px; bottom: 10px; padding: 3px 9px; border-radius: 999px;
  background: rgba(0, 0, 0, .7); color: #fff; font-size: .78rem; font-weight: 700;
}
.eso-tuto-card__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.eso-tuto-card__body strong { font-size: 1rem; line-height: 1.3; }
.eso-tuto-card__body span { font-size: .86rem; line-height: 1.45; color: var(--esos-muted, #757575); }
@media (max-width: 480px) {
  .eso-tutos__grid { gap: 10px; }
  .eso-tuto-card__play { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
  .eso-tuto-card__body { padding: 10px; }
  .eso-tuto-card__body span { display: none; }
}

/* ---------- Lien et bandeau ---------- */
.eso-tuto-link {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  font-weight: 700; font-size: .92rem; line-height: 1.35; text-align: left;
  color: var(--esos-green-dark, #128a12) !important; text-decoration: none !important;
}
.eso-tuto-link:hover .eso-tuto-link__txt { text-decoration: underline; }
.eso-tuto-link__ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: #facc15; color: #1a1300;
}
.eso-tuto-link__txt { min-width: 0; }
.eso-tuto-link__len { font-weight: 500; white-space: nowrap; color: var(--esos-muted, #757575); }
.eso-cp .eso-tuto-link, .eso-space-head .eso-tuto-link { margin-top: 10px; }
.eso-cp .eso-tuto-link { display: flex; justify-content: center; }
.eso-tuto-notice {
  margin: 0 0 18px; padding: 12px 16px; border-radius: 12px;
  background: var(--eso-green-pale, #eef8ec); border: 1px solid var(--eso-green-light, #cfe9cb);
}

/* ---------- Bouton flottant ---------- */
.eso-tuto-fab {
  position: fixed; left: 20px; bottom: 86px; z-index: 9996;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px 8px 8px;
  border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; font-size: .88rem;
  color: #fff; background: #0b1a12; box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  animation: eso-tuto-in .4s ease both;
}
.eso-tuto-fab[hidden] { display: none; }
.eso-tuto-fab__ico {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: #facc15; color: #1a1300;
}
.eso-tuto-fab__x {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  margin-left: 2px; border-radius: 50%; font-size: 16px; line-height: 1; color: #b5c4ba;
}
.eso-tuto-fab__x:hover { background: rgba(255, 255, 255, .15); color: #fff; }
@keyframes eso-tuto-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .eso-tuto-fab { left: 12px; bottom: 80px; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .eso-tuto-fab { animation: none; } }

/* ---------- Fenêtre vidéo ---------- */
.eso-tuto-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.eso-tuto-modal[hidden] { display: none; }
.eso-tuto-modal__backdrop { position: absolute; inset: 0; background: rgba(4, 16, 8, .78); }
.eso-tuto-modal__box {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  width: min(420px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  padding: 14px; border-radius: 20px; background: var(--esos-surface, #fff); color: var(--esos-text, #212121);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.eso-tuto-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eso-tuto-modal__head strong { font-size: 1.05rem; }
.eso-tuto-modal__close {
  width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer; font-size: 24px; line-height: 1;
  background: var(--esos-surface-2, #f6f8f7); color: var(--esos-text, #212121);
}
.eso-tuto-modal__tabs { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: var(--esos-surface-2, #f6f8f7); }
.eso-tuto-tab {
  flex: 1; min-height: 38px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; font-size: .88rem;
  background: transparent; color: var(--esos-muted, #757575);
}
.eso-tuto-tab.is-active { background: var(--esos-green, #1aaf1a); color: #fff; }
.eso-tuto-modal__player {
  position: relative; width: 100%; aspect-ratio: 9 / 16; max-height: calc(100dvh - 190px);
  margin: 0 auto; overflow: hidden; border-radius: 14px; background: #000;
}
.eso-tuto-modal__player video, .eso-tuto-modal__player iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.eso-tuto-modal__help { margin: 0; text-align: center; font-size: .88rem; color: var(--esos-muted, #757575); }
.eso-tuto-modal__help a { font-weight: 700; color: var(--esos-green-dark, #128a12); }
body.eso-tuto-open { overflow: hidden; }