/* TUTO — /tuto/ (et /en/tuto/, /de/tuto/...). Diaporama cliquable, page par page.
   Deux usages, un seul contenu : le tuto ouvert par « Comment ça marche » dans l'app, et le support
   de demo commerciale (?presentateur : panneau de notes a droite, touche N).
   Tout est scope en .tu- : la page charge theme.css + components.css + auth-modal.css, rien d'autre.
   Couleurs = tokens uniquement : le theme sombre tient sans une ligne de plus. */

.tu-body{background:var(--bg);color:var(--text);min-height:100vh;min-height:100dvh;overflow-x:hidden;}

/* ---------- En-tete ---------- */
.tu-top{display:flex;align-items:center;gap:12px;max-width:1260px;margin:0 auto;
  padding:calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;}
.tu-logo{display:inline-flex;align-items:center;gap:8px;color:var(--text);text-decoration:none;
  font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:.02em;}
.tu-logo svg{width:28px;height:auto;display:block;}
.tu-top-sp{flex:1;}
.tu-top-act{display:flex;align-items:center;gap:8px;}
.tu-top-act .btn{padding:9px 14px;font-size:13px;}
.tu-top-link{color:var(--muted);font-weight:700;font-size:13px;text-decoration:none;padding:8px 4px;}
.tu-top-link:hover{color:var(--text);}
/* [hidden] doit gagner contre le display d'un .btn (inline-flex) : sinon « Essai gratuit » restait
   affiche a cote de « Retour a l'app » pour un visiteur connecte. */
.tu-top-act [hidden],.tu-actions [hidden]{display:none;}

/* ---------- Mise en page : diaporama (+ notes en mode presentateur) ---------- */
.tu-main{max-width:1260px;margin:0 auto;padding:0 16px calc(24px + env(safe-area-inset-bottom, 0px));
  display:grid;grid-template-columns:minmax(0,1fr);gap:20px;justify-items:center;}

/* LE diaporama. Meme largeur maximale en mode normal et en mode presentateur : c'est cette zone
   que l'on partage en visio, elle ne doit pas changer de taille quand les notes s'ouvrent. */
.tu-stage{width:100%;max-width:880px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;
  touch-action:pan-y;}
.tu-slides{position:relative;flex:1;min-height:0;}

.tu-slide{display:flex;flex-direction:column;}
.tu-slide[hidden]{display:none;}
.tu-slide.tu-in-next{animation:tuInNext .28s ease both;}
.tu-slide.tu-in-prev{animation:tuInPrev .28s ease both;}
@keyframes tuInNext{from{opacity:0;transform:translateX(24px);}to{opacity:1;transform:none;}}
@keyframes tuInPrev{from{opacity:0;transform:translateX(-24px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.tu-slide.tu-in-next,.tu-slide.tu-in-prev{animation:none;}}

.tu-visuel{background:var(--surface-2);border-bottom:1px solid var(--border);display:flex;
  align-items:center;justify-content:center;padding:16px;aspect-ratio:16/10;overflow:hidden;position:relative;}
.tu-visuel > picture{display:contents;}
.tu-visuel > img,.tu-visuel > picture > img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:var(--r-sm);box-shadow:var(--shadow);border:1px solid var(--border);}
.tu-visuel.tu-plein{padding:0;}
.tu-visuel.tu-plein > img{width:100%;height:100%;object-fit:cover;border:0;border-radius:0;box-shadow:none;}

.tu-texte{padding:18px 18px 8px;}
.tu-num{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--flag);margin:0;}
.tu-texte h1,.tu-texte h2{font-family:var(--font-display);text-transform:uppercase;font-weight:700;
  font-size:22px;line-height:1.2;margin:6px 0 8px;color:var(--text);letter-spacing:.01em;}
.tu-texte p{color:var(--muted);line-height:1.5;font-size:15px;margin:0 0 8px;}
.tu-texte p b{color:var(--text);}
.tu-puces{list-style:none;margin:4px 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.tu-puces li{font-size:12.5px;font-weight:700;color:var(--text);background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-pill);padding:5px 10px;line-height:1.2;}

/* ---------- Pied : progression + Retour / Suivant ---------- */
.tu-pied{display:flex;flex-direction:column;gap:12px;padding:12px 18px 16px;border-top:1px solid var(--border);}
.tu-points{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;}
.tu-point{width:20px;height:20px;border:0;background:none;padding:0;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;border-radius:var(--r-pill);}
.tu-point::before{content:"";width:7px;height:7px;border-radius:var(--r-pill);background:var(--border);
  transition:background var(--t-fast), width var(--t-fast);}
.tu-point.on::before{background:var(--flag);width:16px;}
.tu-point.vu::before{background:var(--muted-soft);}
.tu-point.on.vu::before{background:var(--flag);}
.tu-point:focus-visible{outline:2px solid var(--flag);outline-offset:1px;}
.tu-nav{display:flex;align-items:center;gap:10px;}
.tu-nav .btn{flex:1;min-height:44px;}
.tu-compteur{font-size:12px;font-weight:700;color:var(--muted);min-width:48px;text-align:center;
  font-variant-numeric:tabular-nums;}

/* Ordinateur : visuel a gauche, texte a droite, pied sous le texte. Hauteur FIXE (ratio) : le
   diaporama ne saute pas d'une page a l'autre, ce qui compte quand on le partage en visio. */
@media (min-width:760px){
  .tu-stage{aspect-ratio:16/10;}
  .tu-slide{display:grid;grid-template-columns:58% 42%;height:100%;}
  .tu-visuel{aspect-ratio:auto;height:100%;border-bottom:0;border-right:1px solid var(--border);padding:20px;}
  .tu-texte{padding:28px 26px 12px;align-self:center;}
  .tu-texte h1,.tu-texte h2{font-size:26px;}
  .tu-texte p{font-size:16px;}
  .tu-pied{flex-direction:row;align-items:center;padding:12px 20px;}
  .tu-points{flex:1;justify-content:flex-start;}
  .tu-nav .btn{flex:0 0 auto;min-width:108px;}
  .tu-slides{height:0;}
  /* Pages a capture d'ecran : la capture prend plus de place, sinon elle ne se lit pas. */
  .tu-slide.tu-large{grid-template-columns:66% 34%;}
  .tu-slide.tu-large .tu-visuel{padding:14px;}
  .tu-slide.tu-large .tu-texte{padding:22px 20px 10px;}
  .tu-slide.tu-large .tu-texte h2{font-size:22px;}
  .tu-slide.tu-large .tu-texte p{font-size:15px;}
}

/* ---------- Visuels construits (HTML/CSS : leurs mots se traduisent avec la page) ---------- */
.tu-carte{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow);padding:14px;width:100%;max-width:440px;}
.tu-carte-t{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px;}

/* 1. Le probleme : 90 minutes, huit actions noyees */
.tu-pb{display:flex;flex-direction:column;gap:14px;width:100%;max-width:440px;}
.tu-pb-piste{position:relative;height:30px;border-radius:var(--r-sm);background:var(--surface-2);
  border:1px solid var(--border);overflow:hidden;}
.tu-pb-piste i{position:absolute;top:5px;bottom:5px;width:4px;border-radius:var(--r-pill);background:var(--flag);opacity:.9;}
.tu-pb-leg{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px;
  font-variant-numeric:tabular-nums;}
.tu-pb-fleche{align-self:center;color:var(--flag);}
.tu-pb-clips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.tu-pb-clips span{aspect-ratio:16/10;border-radius:var(--r-sm);background:var(--soft);
  border:1px solid var(--flag);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--flag);font-variant-numeric:tabular-nums;}
.tu-pb-gros{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--text);
  text-transform:uppercase;line-height:1.1;margin:0;}

/* 2. Recall Mode : un ecran camera, avec une vraie video de match en boucle */
.tu-cam{position:relative;width:100%;max-width:520px;aspect-ratio:19.5/9;border-radius:22px;
  background:var(--ink-fixed);padding:8px;box-shadow:var(--shadow-lg);}
.tu-cam-ecran{position:relative;width:100%;height:100%;border-radius:15px;overflow:hidden;background:var(--ink-fixed);}
.tu-cam-ecran video,.tu-cam-ecran img{width:100%;height:100%;object-fit:cover;display:block;}
.tu-cam-rec{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:6px;
  background:var(--ink-fixed);color:var(--ink-on-dark);font-size:11px;font-weight:800;padding:4px 9px;
  border-radius:var(--r-pill);letter-spacing:.04em;opacity:.92;}
.tu-cam-rec::before{content:"";width:7px;height:7px;border-radius:var(--r-pill);background:var(--flag);
  animation:tuPulse 1.4s ease-in-out infinite;}
@keyframes tuPulse{50%{opacity:.25;}}
@media (prefers-reduced-motion:reduce){.tu-cam-rec::before{animation:none;}}
.tu-cam-cote{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;
  align-items:center;gap:8px;}
.tu-cam-btn{width:52px;height:52px;border-radius:var(--r-pill);background:var(--flag);border:3px solid var(--ink-on-dark);
  box-shadow:0 0 0 4px var(--soft);animation:tuAppui 3.2s ease-in-out infinite;}
@keyframes tuAppui{0%,70%,100%{transform:scale(1);}78%{transform:scale(.86);}}
@media (prefers-reduced-motion:reduce){.tu-cam-btn{animation:none;}}
.tu-cam-lab{font-size:10px;font-weight:800;color:var(--ink-on-dark);text-transform:uppercase;letter-spacing:.05em;
  text-shadow:0 1px 3px var(--ink-fixed);}
.tu-cam-dur{font-size:11px;font-weight:800;color:var(--ink-on-dark);background:var(--ink-fixed);opacity:.9;
  border-radius:var(--r-pill);padding:3px 8px;}
.tu-cam-tampon{position:absolute;left:10px;right:80px;bottom:10px;height:6px;border-radius:var(--r-pill);
  background:var(--ink-fixed);opacity:.85;overflow:hidden;}
.tu-cam-tampon i{position:absolute;right:0;top:0;bottom:0;width:38%;background:var(--flag);}

/* 3. Telecommande : deux telephones */
.tu-duo{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;flex-wrap:wrap;}
.tu-tel{width:132px;border-radius:20px;background:var(--ink-fixed);padding:6px;box-shadow:var(--shadow-lg);}
.tu-tel-ecran{border-radius:15px;overflow:hidden;background:var(--surface);aspect-ratio:9/17;display:flex;flex-direction:column;}
.tu-tel-img{flex:1;min-height:0;position:relative;background:var(--ink-fixed);}
.tu-tel-img img{width:100%;height:100%;object-fit:cover;display:block;}
.tu-tel-bas{padding:8px;display:flex;flex-direction:column;align-items:center;gap:6px;}
.tu-tel-titre{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:center;}
.tu-tel-gros{width:44px;height:44px;border-radius:var(--r-pill);background:var(--flag);box-shadow:0 0 0 4px var(--soft);}
.tu-tel.tu-tel-cam .tu-tel-ecran{aspect-ratio:17/9;}
.tu-tel.tu-tel-cam{width:220px;}
.tu-onde{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--flag);font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;}

/* 4. Multicam : grille d'angles */
.tu-mc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;}
.tu-mc img{display:block;width:auto;height:auto;max-width:100%;max-height:44%;min-height:0;border-radius:var(--r-sm);box-shadow:var(--shadow);}
.tu-mc-sync{display:flex;align-items:center;gap:8px;width:70%;}
.tu-mc-sync b{height:4px;flex:1;border-radius:var(--r-pill);background:var(--border);position:relative;}
.tu-mc-sync b::after{content:"";position:absolute;left:0;top:0;bottom:0;width:46%;border-radius:var(--r-pill);background:var(--flag);}

/* Mode Normal + reperes : un long enregistrement, des points poses pendant le match */
.tu-rep{display:flex;flex-direction:column;gap:12px;}
.tu-rep-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.tu-rep-rec{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);}
.tu-rep-rec::before{content:"";width:8px;height:8px;border-radius:var(--r-pill);background:var(--danger);}
.tu-rep-duree{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;}
.tu-rep-piste{position:relative;height:12px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--border);}
.tu-rep-piste i{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:var(--r-pill);
  background:var(--flag);border:2px solid var(--surface);}
.tu-rep-liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.tu-rep-liste li{font-size:12px;font-weight:800;color:var(--flag);background:var(--soft);border-radius:var(--r-pill);
  padding:4px 10px;font-variant-numeric:tabular-nums;}
.tu-rep-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);
  border-radius:var(--r-pill);padding:8px 14px 8px 10px;font-size:13px;color:var(--text);background:var(--surface);}
.tu-rep-rond{width:18px;height:18px;border-radius:var(--r-pill);border:2px solid var(--flag);position:relative;}
.tu-rep-rond::after{content:"";position:absolute;inset:3px;border-radius:var(--r-pill);background:var(--flag);}

/* 8. Decouper et importer */
.tu-cut{display:flex;flex-direction:column;gap:16px;width:100%;max-width:440px;}
.tu-cut-piste{display:flex;align-items:center;gap:6px;}
.tu-cut-seg{flex:1;height:34px;border-radius:var(--r-sm);background:var(--soft);border:1px solid var(--flag);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--flag);}
.tu-cut-ciseau{color:var(--text);display:flex;}
.tu-fichiers{display:flex;flex-wrap:wrap;gap:6px;}
.tu-fichiers span{font-size:12px;font-weight:800;color:var(--text);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:7px 10px;display:inline-flex;align-items:center;gap:6px;}
.tu-fichiers span::before{content:"";width:10px;height:12px;border-radius:var(--r-sm);background:var(--muted-soft);}

/* 9. Matchs et stats */
.tu-score{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.tu-score-eq{font-weight:800;font-size:14px;color:var(--text);}
.tu-score-n{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;}
.tu-barres{display:flex;flex-direction:column;gap:8px;}
.tu-barre{display:grid;grid-template-columns:1fr 2fr;gap:8px;align-items:center;font-size:12px;color:var(--muted);font-weight:700;}
.tu-barre b{height:8px;border-radius:var(--r-pill);background:var(--surface-2);position:relative;overflow:hidden;}
.tu-barre b i{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-pill);background:var(--flag);}

/* 12. Club : plusieurs equipes, des roles */
.tu-club{display:flex;flex-direction:column;gap:10px;width:100%;max-width:440px;}
.tu-club-eq{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:10px 12px;}
.tu-club-eq .tu-pastille{width:30px;height:30px;border-radius:var(--r-sm);background:var(--soft);color:var(--flag);
  font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.tu-club-eq b{flex:1;font-size:14px;color:var(--text);}
.tu-club-eq small{font-size:12px;color:var(--muted);font-weight:700;}
.tu-roles{display:flex;flex-wrap:wrap;gap:6px;}
.tu-roles span{font-size:12px;font-weight:700;color:var(--text);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:5px 10px;}
.tu-roles span.fort{border-color:var(--flag);color:var(--flag);}

/* 13. Prix */
.tu-prix{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:460px;}
.tu-prix-carte{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px;
  display:flex;flex-direction:column;gap:4px;}
.tu-prix-carte.fort{border-color:var(--flag);box-shadow:0 0 0 3px var(--soft);}
.tu-prix-nom{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.tu-prix-montant{font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--text);line-height:1.1;
  font-variant-numeric:tabular-nums;}
.tu-prix-montant small{font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--muted);}
.tu-prix-sub{font-size:12.5px;color:var(--muted);line-height:1.4;}
.tu-prix-bande{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px;}
.tu-prix-bande span{font-size:12px;font-weight:800;color:var(--green);background:var(--green-soft);
  border-radius:var(--r-pill);padding:5px 10px;}

/* 14. Demarrer */
.tu-fin{display:flex;flex-direction:column;gap:10px;align-items:stretch;width:100%;max-width:360px;}
.tu-fin .btn{min-height:48px;font-size:15px;}
.tu-fin-note{font-size:12.5px;color:var(--muted);text-align:center;margin:0;}
.tu-fin-etapes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:tuf;}
.tu-fin-etapes li{counter-increment:tuf;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;}
.tu-fin-etapes li::before{content:counter(tuf);width:24px;height:24px;border-radius:var(--r-pill);background:var(--flag);
  color:var(--ink-on-dark);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.tu-texte .tu-actions{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.tu-texte .tu-actions .btn{min-height:44px;}
.tu-texte .tu-actions .tu-puces{margin:0;justify-content:center;}
.tu-lien{color:var(--flag);font-weight:700;text-decoration:none;}
.tu-lien:hover{text-decoration:underline;}

/* Visible selon le mode. [hidden] l'emporte toujours (components.css) ; ces classes ne font que
   masquer ce qui ne sert pas au mode courant. */
.tu-body.tu-pres .tu-public-seul{display:none;}
.tu-body:not(.tu-pres) .tu-pres-seul{display:none;}

/* ---------- Notes du presentateur ---------- */
.tu-notes{width:100%;max-width:880px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;}
.tu-notes[hidden]{display:none;}
.tu-notes-tete{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);}
.tu-chrono{font-family:var(--font-display);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text);line-height:1;}
.tu-chrono-sur{font-size:12px;color:var(--muted);font-weight:700;white-space:nowrap;}
.tu-chrono-etat{white-space:nowrap;font-size:11px;font-weight:800;border-radius:var(--r-pill);padding:3px 8px;background:var(--surface-2);color:var(--muted);}
.tu-chrono-etat.avance{background:var(--green-soft);color:var(--green);}
.tu-chrono-etat.retard{background:var(--danger-soft);color:var(--danger);}
.tu-notes-tete .tu-sp{flex:1;}
.tu-notes-corps{padding:14px;overflow:auto;display:flex;flex-direction:column;gap:14px;flex:1 1 auto;min-height:0;}
.tu-notes-tete .btn{display:inline-flex;align-items:center;}
.tu-n-titre{font-family:var(--font-display);text-transform:uppercase;font-size:17px;font-weight:700;color:var(--text);margin:0;}
.tu-n-temps{font-size:12px;font-weight:800;color:var(--flag);}
.tu-n-bloc h3{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:0 0 6px;}
.tu-n-bloc ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;}
.tu-n-bloc li{font-size:14px;line-height:1.4;color:var(--text);}
.tu-n-cle{font-size:15px;font-weight:700;line-height:1.4;color:var(--text);background:var(--soft);
  border-left:3px solid var(--flag);border-radius:var(--r-sm);padding:10px 12px;margin:0;}
.tu-n-question{font-size:14px;line-height:1.4;color:var(--text);margin:0;font-style:italic;}
.tu-n-obj{display:flex;flex-direction:column;gap:8px;}
.tu-n-obj div{background:var(--surface-2);border-radius:var(--r-sm);padding:8px 10px;}
.tu-n-obj b{display:block;font-size:13px;color:var(--text);margin-bottom:2px;}
.tu-n-obj span{font-size:13px;color:var(--muted);line-height:1.4;}
.tu-plan{border-top:1px solid var(--border);padding:10px 14px 14px;flex:0 0 auto;}
.tu-plan summary{cursor:pointer;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  padding:4px 0;}
.tu-plan ol{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:38vh;overflow:auto;}
.tu-plan button{width:100%;display:flex;gap:8px;align-items:center;background:none;border:0;border-radius:var(--r-sm);
  padding:6px 8px;font:inherit;font-size:13px;color:var(--text);cursor:pointer;text-align:left;}
.tu-plan button:hover{background:var(--surface-2);}
.tu-plan button.on{background:var(--soft);font-weight:800;}
.tu-plan button .n{color:var(--muted);font-variant-numeric:tabular-nums;min-width:18px;}
.tu-plan button .t{margin-left:auto;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;}
.tu-plan button.vu .t{color:var(--green);}
.tu-aide{font-size:11.5px;color:var(--muted);padding:0 14px 12px;margin:0;}
.tu-aide kbd{font:inherit;font-weight:800;border:1px solid var(--border);border-radius:var(--r-sm);padding:0 5px;background:var(--surface-2);color:var(--text);}

/* Ordinateur large, mode presentateur : diaporama a gauche (MEME largeur qu'en mode normal),
   notes a droite, collees en haut et defilables seules. */
@media (min-width:1180px){
  .tu-body.tu-pres .tu-main{grid-template-columns:880px minmax(300px,1fr);align-items:start;justify-items:stretch;}
  .tu-body.tu-pres .tu-notes{max-width:none;position:sticky;top:12px;max-height:calc(100vh - 24px);}
  .tu-body.tu-pres .tu-main.tu-sans-notes{grid-template-columns:880px;justify-content:center;}
}

/* Telephone : le diaporama occupe l'ecran, le pied (Precedent / Suivant) reste en bas, dans la zone
   du pouce. Le visuel a une hauteur FIXE : la page ne saute pas d'une diapositive a l'autre. */
@media (max-width:759px){
  .tu-main{padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));}
  .tu-stage{min-height:calc(100dvh - 72px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));}
  .tu-slides{display:flex;flex-direction:column;}
  .tu-slide{flex:1;}
  .tu-visuel{aspect-ratio:auto;height:42dvh;min-height:230px;max-height:420px;padding:12px;}
  .tu-points{gap:2px;}
  .tu-point{width:18px;}
  .tu-carte{padding:12px;}
  .tu-pb{gap:10px;}
  .tu-pb-fleche{display:none;}
  .tu-pb-gros{font-size:17px;}
  .tu-pb-clips span{aspect-ratio:auto;height:28px;}
  .tu-tel{width:96px;border-radius:16px;padding:5px;}
  .tu-tel.tu-tel-cam{width:170px;}
  .tu-duo{gap:8px;flex-wrap:nowrap;}
  .tu-cam-btn{width:40px;height:40px;}
  .tu-prix-montant{font-size:24px;}
}

/* Fenetre des notes de la BALADE (/tuto/notes.html) : les notes seules, pleine hauteur. */
.tu-main.tu-notes-seules{max-width:640px;padding-top:calc(12px + env(safe-area-inset-top, 0px));gap:12px;justify-items:stretch;}
.tu-notes-seules .tu-notes{max-width:none;}
.tu-lien-visite{font-size:12.5px;font-weight:700;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r);padding:8px 12px;}
.tu-notes-nav{justify-content:space-between;}
.tu-notes-nav .btn{flex:1;min-height:44px;}