/* Didacticiels vidéo : vignette dans le dialogue d'un outil, panneau agrandi ancré à droite. */

.tuto-stack{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
.tuto-thumb{
  position:relative;margin:0;padding:0;
  border:1px solid #e0dfd7;border-radius:10px;overflow:hidden;background:#fff;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
/* Le jaune cerne, il ne remplit pas : un fond jaune signifie « actif » partout ailleurs. */
.tuto-thumb:hover,.tuto-thumb:focus-within{
  transform:translateY(-2px) scale(1.02);
  border-color:#ffc824;box-shadow:0 8px 24px #00000022;
}
.tuto-frame{position:relative;display:block;background:#1f2418}
/* Format réel du fichier posé en style par tutorials.js : aucune capture n'est rognée. */
.tuto-video,.tuto-poster{display:block;width:100%;height:auto;aspect-ratio:16/9}
/* Suite enchaînée : les clips n'ont pas tous le même format, aucun n'est coupé. */
.tuto-chain .tuto-video,.tuto-panel[data-tuto*=" "] .tuto-panel-video{object-fit:contain;background:#1f2418}
.tuto-expand{
  position:absolute;top:6px;right:6px;width:26px;height:26px;padding:0;
  display:grid;place-items:center;
  border:1px solid #ffffff4d;border-radius:6px;background:#1a1a17cc;color:#fff;
  font:600 13px/1 Inter,sans-serif;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.tuto-thumb:hover .tuto-expand{background:#ffc824;border-color:#efbc20;color:#1a1a17}
.tuto-expand:focus-visible{outline:2px solid #ffc824;outline-offset:2px}
.tuto-body{padding:10px 12px 12px}
.tuto-title{margin:0;font:600 12.5px/1.35 Inter,sans-serif;color:#25291f}
.tuto-captions{margin:8px 0 0;padding:0 0 0 16px;list-style:decimal;color:#6b6e60;font:400 11.5px/1.5 Inter,sans-serif}
.tuto-captions li{margin:0 0 3px}
.tuto-captions li:last-child{margin-bottom:0}

/* Colonne étroite (tablette, dialogue en bas d'écran) : la vignette passe en ligne. */
@media(max-width:900px){
  .tuto-thumb,.tuto-thumb-compact{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center}
  .tuto-thumb .tuto-body,.tuto-thumb-compact .tuto-body{padding:8px 10px}
  .tuto-thumb .tuto-captions,.tuto-thumb-compact .tuto-captions{display:none}
}

.tuto-panel{
  position:fixed;z-index:10040;
  left:calc(var(--sidebar-width,310px) + 24px);top:calc(var(--toolbar-height,84px) + 16px);
  width:min(1040px,calc(100vw - var(--sidebar-width,310px) - 48px));max-width:calc(100vw - 32px);
  padding:14px;border:1px solid #e0dfd7;border-radius:12px;background:#fff;
  box-shadow:0 18px 50px #00000026;color:#25291f;
}
.tuto-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.tuto-panel-head h2{margin:0;font:600 15px/1.3 Inter,sans-serif}
.tuto-panel-close{
  flex:none;width:28px;height:28px;padding:0;display:grid;place-items:center;
  border:1px solid #e0dfd7;border-radius:6px;background:#fff;color:#25291f;
  font:600 13px/1 Inter,sans-serif;cursor:pointer;
}
.tuto-panel-close:hover{background:#f5f5ef}
.tuto-panel-video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:8px;background:#1f2418}
.tuto-panel .tuto-captions{margin-top:12px;font-size:12.5px}
@media(max-width:1000px){
  .tuto-panel{left:16px;right:16px;width:auto;top:calc(var(--toolbar-height,84px) + 12px)}
}

.tuto-playlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px}
.tuto-playlist-item{
  display:flex;flex-direction:column;gap:7px;padding:0 0 8px;
  border:1px solid #e0dfd7;border-radius:10px;overflow:hidden;background:#fff;
  color:#25291f;text-align:left;cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.tuto-playlist-item:hover{border-color:#ffc824;box-shadow:0 6px 18px #0000001a}
.tuto-playlist-title{padding:0 10px;font:600 12px/1.35 Inter,sans-serif}

/* Mouvement réduit : la vidéo reste affichée sur son affiche, arrêtée, avec ses commandes (voir tutorials.js). */
.tuto-replay{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:5px 10px;border:1px solid #e0dfd7;border-radius:7px;background:#fff;color:#4b4d42;
  font:600 11.5px/1 Inter,sans-serif;cursor:pointer;white-space:nowrap;
  transition:border-color .15s ease,color .15s ease;
}
.tuto-replay:hover{border-color:#ffc824;color:#25291f}
.tuto-replay-icon{font-size:9px;color:#b99000}
/* Le titre cède sa place au bouton, seulement quand le bouton existe. */
.site-header:has(.tuto-replay) h2{flex:none}
.site-header .tuto-replay{margin-right:auto}
.plan-tool-dialog header .tuto-replay{margin-left:auto}
.catalog-range-field .tuto-replay{padding:5px 8px}
.catalog-range-field .tuto-replay-label{display:none}

@media(prefers-reduced-motion:reduce){
  .tuto-thumb{transition:none}
  .tuto-thumb:hover,.tuto-thumb:focus-within{transform:none}
}