/* Onglet Tutos de borrowandback.com (06/11/2026). Pages /tutos/ et traductions.
   Les videos sont des Shorts : tout est pense en 9:16. */
.tutos{padding-top:8px}
.tutos-bloc{margin-top:44px}
.tutos-h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 20px;font-size:clamp(22px,2.6vw,30px);font-weight:750;line-height:1.2;color:var(--navy)}
.tutos-h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 16px;font-size:19px;font-weight:700;color:var(--navy)}
.tutos-h2 small,.tutos-h3 small{font-size:13px;font-weight:600;color:var(--ink-soft)}
.tutos-intro{max-width:62ch;margin:-8px 0 18px;color:var(--ink-soft)}
.tutos-onglets{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px}
.tutos-pastille{padding:8px 14px;border-radius:999px;background:var(--soft);color:#1246a6;font-size:14px;font-weight:600;text-decoration:none}
.tutos-pastille:hover{background:#d9e7ff}
.tutos-pastille:focus-visible{outline:3px solid var(--bleu-fonce);outline-offset:2px}
.tutos-langue{margin:0 0 40px}

.tutos-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:24px 18px;margin:0;padding:0;list-style:none}
.tuto{min-width:0}
.tuto-lien{display:flex;flex-direction:column;gap:10px;color:var(--navy);text-decoration:none}
.tuto-vignette{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;border-radius:18px;background:#dfe7f5;box-shadow:var(--sh-2);transition:box-shadow .2s}
.tuto-vignette img{display:block;width:100%;height:100%;object-fit:cover}
.tuto-lien:hover .tuto-vignette{box-shadow:var(--sh-3)}
.tuto-lien:focus-visible{outline:none}
.tuto-lien:focus-visible .tuto-vignette{outline:3px solid var(--bleu-fonce);outline-offset:3px}
.tuto-lecture{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:#ffffffeb;box-shadow:0 6px 18px #12254650;transition:background .2s}
.tuto-lien:hover .tuto-lecture{background:#fff}
.tuto-lecture svg{width:26px;height:26px;margin-left:3px;fill:var(--bleu-fonce)}
.tuto-num{position:absolute;top:10px;left:10px;padding:3px 9px;border-radius:999px;background:#132546c7;color:#fff;font-size:12px;font-weight:700}
.tuto-titre{font-size:14.5px;font-weight:650;line-height:1.35;overflow-wrap:anywhere}
.tutos-vie{margin:28px 0 6px;font-size:13.5px;color:var(--ink-soft)}
.tutos-chaine{margin:0}

@media(max-width:560px){
  .tutos-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .tuto-lecture{width:48px;height:48px;margin:-24px 0 0 -24px}
  .tuto-lecture svg{width:22px;height:22px}
  .tuto-titre{font-size:13.5px}
}

/* ---- Lecteur : une fenetre plein ecran, la video en 9:16 au centre ---- */
html:has(.tuto-lecteur[open]){overflow:hidden}
.tuto-lecteur{inset:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden}
.tuto-lecteur::backdrop{background:#081022f0}
.tuto-lecteur[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.tuto-lecteur-haut{display:flex;align-items:center;justify-content:space-between;gap:14px;width:min(560px,calc(100vw - 32px))}
.tuto-lecteur-titre{min-width:0;margin:0;overflow:hidden;font-size:15px;font-weight:650;white-space:nowrap;text-overflow:ellipsis}
.tuto-scene{display:flex;align-items:center;gap:18px}
.tuto-cadre{height:min(calc(100dvh - 96px),calc((100vw - 180px) * 16 / 9));aspect-ratio:9/16;overflow:hidden;border-radius:18px;background:#000;box-shadow:0 20px 60px #0008}
.tuto-cadre iframe{display:block;width:100%;height:100%;border:0}
.tuto-nav,.tuto-fermer{display:grid;flex:none;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;background:#ffffff24;color:#fff;cursor:pointer}
.tuto-fermer{width:46px;height:46px}
.tuto-nav:hover,.tuto-fermer:hover{background:#ffffff40}
.tuto-nav:focus-visible,.tuto-fermer:focus-visible{outline:3px solid #fff;outline-offset:2px}
.tuto-nav:disabled{opacity:.28;cursor:default}
.tuto-nav svg,.tuto-fermer svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Telephone : la video prend toute la largeur ; on ferme avec la croix et on
   choisit la suivante dans la grille (les fleches recouvriraient le lecteur). */
@media(max-width:640px){
  .tuto-lecteur::backdrop{background:#081022}
  .tuto-lecteur[open]{background:#081022;justify-content:flex-start;gap:0;padding-bottom:env(safe-area-inset-bottom)}
  .tuto-lecteur-haut{width:100%;padding:8px 8px 8px 14px}
  .tuto-scene{flex:1;width:100%;min-height:0;justify-content:center;align-items:center}
  .tuto-nav{display:none}
  .tuto-cadre{width:min(100vw,calc((100dvh - 64px) * 9 / 16));height:auto;border-radius:0;box-shadow:none}
}
@media(prefers-reduced-motion:reduce){.tuto-vignette,.tuto-lecture{transition:none}}