/* ==========================================================================
   LoadUp — habillage
   ---------------------------------------------------------------------------
   C'EST LE SEUL FICHIER A TOUCHER pour changer l'apparence de toute l'appli.

   Langage visuel : cartes groupees a la iOS. Fond legerement teinte, cartes
   BLANCHES et OPAQUES, grands rayons, ombre douce, separateurs fins.

   LE VERRE (--verre + backdrop-filter) est reserve au CHROME : barre d'onglets,
   barre d'action. Jamais le contenu. Raison : un panneau translucide baisse le
   contraste, et dans une salle de sport (plein jour, mains moites, coup d'oeil
   de trois secondes) le contraste est la seule chose qu'on ne peut pas sacrifier.
   Sur la TV, aucun flou du tout : a 4 m c'est illisible, et un backdrop-filter
   derriere un decompte qui se rafraichit en continu fait saccader les navigateurs
   de television.

   Theme clair par defaut (telephone). [data-theme="sombre"] pour la TV.
   ========================================================================== */

:root {
  --fond:        #F2F2F0;   /* legerement plus gris que les cartes, pour qu'elles ressortent */
  --carte:       #FFFFFF;
  --verre:       rgba(250, 250, 248, .72);
  --encre:       #0E0F11;
  --gris:        #6E6E73;
  --gris-clair:  #A0A0A6;
  --trait:       rgba(60, 60, 67, .11);
  --trait-fort:  #0E0F11;
  --accent:      #C6F432;
  --accent-encre:#0E0F11;
  --alerte:      #FF6B2C;
  --corps:       #DCDCD7;   /* silhouette neutre du schema corporel */
  --muscle:      #C7C7C1;   /* zone musculaire au repos */

  --r:      15px;      /* cartes groupees */
  --r-s:    10px;
  --r-p:    999px;     /* boutons pilule */
  --pad:    18px;
  --ombre:  0 1px 2px rgba(0, 0, 0, .04), 0 10px 28px rgba(0, 0, 0, .05);
  --police: Archivo, "Segoe UI", system-ui, -apple-system, sans-serif;
}

[data-theme="sombre"] {
  --fond:       #0E0F11;
  --carte:      #16181B;
  --verre:      rgba(22, 24, 27, .8);
  --encre:      #F4F4F1;
  --gris:       #6B6F76;
  --gris-clair: #4A4E54;
  --trait:      #1E2024;
  --trait-fort: #F4F4F1;
  --corps:      #3A3F45;   /* assez clair pour se lire a 4 m sur fond noir */
  --muscle:     #4A5057;
  --ombre:      none;
}

* { box-sizing: border-box; margin: 0; }

body {
  font-family: var(--police);
  background: var(--fond);
  color: var(--encre);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

/* ---------------------------------------------------------------- typographie */
/* Les CHIFFRES sont les heros : 90 % de ce qu'on regarde ici est un nombre. */

.sur    { font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
          color: var(--gris); font-weight: 700; }
.entete { font-size: 13px; font-weight: 600; color: var(--gris);
          padding: 0 4px 8px; letter-spacing: -.01em; }
.titre  { font-size: 34px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.titre-s{ font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.gros   { font-size: 44px; font-weight: 800; letter-spacing: -.035em; line-height: 1;
          font-variant-numeric: tabular-nums; }
.enorme { font-size: 72px; font-weight: 800; letter-spacing: -.045em; line-height: .95;
          font-variant-numeric: tabular-nums; }
.chiffre{ font-variant-numeric: tabular-nums; }
.gris   { color: var(--gris); }
.accent { color: var(--accent); }
.alerte { color: var(--alerte); }
.note   { font-size: 14px; line-height: 1.45; color: var(--gris); }

/* ---------------------------------------------------------------- structure */

.page  { max-width: 520px; margin: 0 auto; padding: 14px var(--pad) 120px; }
.pile  { display: flex; flex-direction: column; gap: 10px; }
.rang  { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.duo   { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trio  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.section { margin-top: 26px; }
[hidden]{ display: none !important; }

/* Groupe iOS : une carte, des lignes separees par des traits fins. */
.groupe { background: var(--carte); border-radius: var(--r); box-shadow: var(--ombre); overflow: hidden; }
.groupe > * + * { border-top: 1px solid var(--trait); }
.item   { display: flex; align-items: center; justify-content: space-between; gap: 12px;
          padding: 14px 16px; font-size: 16px; }
.item b { font-weight: 700; }
.item .v{ color: var(--gris); font-variant-numeric: tabular-nums; }
button.item { width: 100%; font: inherit; font-size: 16px; background: none; border: 0;
              color: inherit; cursor: pointer; text-align: left; }
button.item:active { background: rgba(0, 0, 0, .035); }
a.item { color: inherit; text-decoration: none; }   /* un lien doit ressembler aux autres lignes */
.item .fl { color: var(--gris-clair); font-weight: 700; }

.carte { background: var(--carte); border-radius: var(--r); box-shadow: var(--ombre); padding: 16px; }
.carte.cliquable { cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit;
                   border: 0; display: block; }
.carte.cliquable:active { transform: scale(.985); }
.carte.sombre { background: var(--encre); color: var(--fond); }

/* Compatibilite : l'ancien .bloc et .ligne restent utilises par quelques ecrans */
.bloc  { margin-top: 26px; }
.ligne { display: flex; justify-content: space-between; align-items: baseline;
         padding: 12px 0; border-bottom: 1px solid var(--trait); font-size: 16px; }
.ligne:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------- boutons */
/* Regle : le bouton principal fait au moins 54 px. On l'utilise en sueur,
   d'une main, sans regarder. */

.b {
  font: inherit; font-weight: 800; font-size: 17px; border: 0; border-radius: var(--r-p);
  padding: 16px 22px; min-height: 54px; background: var(--encre); color: var(--fond);
  cursor: pointer; width: 100%; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; letter-spacing: -.01em;
}
.b.principal { background: var(--accent); color: var(--accent-encre); }
.b.creux     { background: var(--carte); color: var(--encre); box-shadow: var(--ombre); }
.b.discret   { background: transparent; color: var(--gris); font-size: 15px;
               min-height: 44px; padding: 10px 14px; font-weight: 700; }
.b.geant     { font-size: 20px; min-height: 62px; }
.b:active    { transform: scale(.975); }
.b:disabled  { opacity: .35; cursor: default; }

/* ---------------------------------------------------------------- chrome en verre */
/* Le SEUL endroit ou le flou a sa place : les barres. Repli opaque si le
   navigateur ne sait pas faire (vieux Android, navigateurs de TV). */

.onglets {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--fond);
  border-top: 1px solid var(--trait);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .onglets { background: var(--verre);
             -webkit-backdrop-filter: saturate(180%) blur(22px);
             backdrop-filter: saturate(180%) blur(22px); }
}
.onglets button {
  font: inherit; background: none; border: 0; cursor: pointer; padding: 9px 0 11px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--gris-clair); font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.onglets button i { font-style: normal; font-size: 21px; line-height: 1; }
.onglets button.actif { color: var(--encre); }

/* FIXE et non sticky : sticky ne s'accroche qu'a son bloc parent, donc sur un ecran
   ou le contenu est plus court que la fenetre le bouton flottait au milieu. Sur LE
   bouton le plus important de l'appli, ce n'est pas negociable. */
.barre-action {
  position: fixed; inset: auto 0 0 0; z-index: 10;
  max-width: 520px; margin: 0 auto;
  padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom, 0));
  background: var(--fond);
  border-top: 1px solid var(--trait);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .barre-action { background: var(--verre);
                  -webkit-backdrop-filter: saturate(180%) blur(22px);
                  backdrop-filter: saturate(180%) blur(22px); }
}

/* Feuille modale : le menu de seance, les sorties rangees derriere une porte */
.voile { position: fixed; inset: 0; background: rgba(0, 0, 0, .32); z-index: 40; }
.feuille {
  position: fixed; inset: auto 0 0 0; z-index: 41;
  background: var(--carte); border-radius: 20px 20px 0 0;
  padding: 10px 14px calc(18px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .18);
  max-width: 520px; margin: 0 auto;
}
.feuille .poignee { width: 38px; height: 5px; border-radius: 3px; background: var(--trait);
                    margin: 4px auto 14px; }

/* ---------------------------------------------------------------- stepper */
/* Le composant le plus important de l'appli : saisir une serie doit prendre 3 s. */

.pas { display: grid; grid-template-columns: 62px 1fr 62px; align-items: stretch; gap: 10px; }
.pas button {
  font: inherit; font-size: 26px; font-weight: 800; border: 0; border-radius: var(--r-s);
  background: var(--carte); color: var(--encre); box-shadow: var(--ombre); cursor: pointer;
}
.pas button:active { background: var(--encre); color: var(--fond); }
.pas .valeur { text-align: center; padding: 4px 0; }
.pas .valeur b { display: block; font-size: 42px; font-weight: 800; letter-spacing: -.035em;
                 font-variant-numeric: tabular-nums; line-height: 1.05; }
.pas .valeur span { display: block; }

/* ---------------------------------------------------------------- saisie */

.saisie {
  width: 100%; font: inherit; font-size: 18px; font-weight: 600; padding: 15px 16px;
  border: 0; border-radius: var(--r-s); background: var(--carte); color: var(--encre);
  box-shadow: var(--ombre);
}
.pave { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pave button { font: inherit; font-size: 25px; font-weight: 700; padding: 15px 0; border: 0;
               background: var(--carte); color: var(--encre); border-radius: var(--r-s);
               box-shadow: var(--ombre); cursor: pointer; }
.pave button:active { background: var(--encre); color: var(--fond); }

.points { display: flex; gap: 12px; justify-content: center; margin: 16px 0 20px; }
.points i { width: 13px; height: 13px; border-radius: 50%; background: var(--trait); }
.points i.plein { background: var(--encre); }

/* ---------------------------------------------------------------- indicateurs */

.jauge { height: 8px; background: var(--trait); border-radius: 4px; overflow: hidden; }
.jauge i { display: block; height: 100%; background: var(--accent); transition: width .2s linear; }

.etiq { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em;
        text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-p);
        background: var(--accent); color: var(--accent-encre); }
.etiq.gris { background: var(--trait); color: var(--gris); }

.msg { padding: 13px 15px; border-radius: var(--r-s); font-size: 14px; font-weight: 600;
       background: var(--alerte); color: #fff; }

/* Anneau de recuperation : se lit d'un coup d'oeil, sans lire un chiffre. */
.anneau { width: 100%; max-width: 288px; margin: 0 auto; display: block; }
.anneau .piste { fill: none; stroke: var(--trait); stroke-width: 13; }
.anneau .arc   { fill: none; stroke: var(--accent); stroke-width: 13; stroke-linecap: round;
                 transform: rotate(-90deg); transform-origin: 100px 100px;
                 stroke-dasharray: 552.9; transition: stroke-dashoffset .2s linear; }
.anneau.chaud .arc { stroke: var(--alerte); }
.anneau text { font-family: var(--police); font-weight: 800; fill: var(--encre);
               font-variant-numeric: tabular-nums; }

/* Courbes */
.graphe { width: 100%; height: auto; display: block; }
.graphe .axe  { stroke: var(--trait); stroke-width: 1; }
.graphe .trait{ fill: none; stroke: var(--encre); stroke-width: 2.5; stroke-linejoin: round; }
.graphe .pt   { fill: var(--encre); }
.graphe .rec  { fill: var(--alerte); }

/* Barres de series par muscle, avec la zone cible 10-20 */
.barre  { margin-bottom: 13px; }
.barre .p { position: relative; height: 10px; background: var(--trait); border-radius: 5px;
            overflow: hidden; }
.barre .p i { position: absolute; inset: 0 auto 0 0; background: var(--encre); border-radius: 5px; }
.barre .p u { position: absolute; top: 0; bottom: 0; background: var(--accent); opacity: .4; }
.barre.atteint .p i { background: var(--accent); }

.puces { display: flex; gap: 8px; flex-wrap: wrap; }
.puce { display: inline-block; font-size: 13px; font-weight: 700; padding: 9px 14px;
        border: 0; border-radius: var(--r-p); background: var(--carte); color: var(--encre);
        box-shadow: var(--ombre); cursor: pointer; font-family: var(--police); }
.puce.actif { background: var(--encre); color: var(--fond); }

/* ==========================================================================
   Les 3 dernieres secondes de recuperation
   --------------------------------------------------------------------------
   C'est le pic de tension d'une serie, et c'etait le moment le plus plat de
   l'appli : le decompte arrivait a zero et rien ne se passait. Maintenant
   l'ecran entier prend la main, en lime, avec un chiffre enorme.
   ========================================================================== */

.final {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: var(--accent); color: #0E0F11;
  flex-direction: column; align-items: center; justify-content: center;
}
.final.on { display: flex; }
.final .qui { font-size: 13px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
              opacity: .55; margin-bottom: 6px; }
.final .n   { font-size: 44vmin; font-weight: 800; line-height: .85; letter-spacing: -.05em;
              font-variant-numeric: tabular-nums; animation: pulse .28s ease-out; }
.final.go   { background: #0E0F11; color: var(--accent); }
.final.go .n { font-size: 22vmin; letter-spacing: .02em; }

@keyframes pulse { from { transform: scale(.72); opacity: .2 } to { transform: scale(1); opacity: 1 } }

/* Le chiffre qui roule quand la charge ou les reps changent. L'animation rejoue a
   chaque rendu de l'element -- c'est-a-dire exactement quand la valeur change. */
@keyframes roule { from { transform: translateY(-7px); opacity: .25 } to { transform: none; opacity: 1 } }
.pas .valeur b { animation: roule .18s cubic-bezier(.2, .8, .2, 1); }

/* Enchainement entre ecrans (API View Transitions). Court, sinon ca traine. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
}

/* Schema corporel : le muscle travaille en rouge. Un seul dessin couvre les 33
   exercices, puisque chaque exercice est deja relie a ses muscles en base. */
.corps { width: 100%; height: auto; display: block; }
.corps .z { transition: fill .25s ease; }
.corps text { font-family: var(--police); font-weight: 700; fill: var(--gris);
              font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }

/* Video de demonstration d'un exercice. Elle montre deja le muscle en rouge, donc
   elle remplace le schema corporel quand elle existe. */
.expo { width: 100%; aspect-ratio: 1; display: block; border-radius: var(--r-s);
        background: var(--muscle); object-fit: cover; }

/* ==========================================================================
   Choisir en regardant, pas en lisant
   --------------------------------------------------------------------------
   Retour utilisateur : l'ecran « on fait quoi ? » n'etait QUE du texte -- six noms de
   seances, six listes de muscles en sous-titre, douze etiquettes de groupes. Personne ne
   relit tout ca a chaque venue pour choisir. Le schema corporel existait deja pour la TV :
   il permet de reconnaitre une seance a sa FORME, sans lire. Et le texte qui devient
   redondant disparait, au lieu de s'ajouter au dessin.
   ========================================================================== */
/* La specificite compte ici : `.carte.cliquable` impose display:block. Sans les deux
   classes, la silhouette du programme du jour retombait SOUS le texte. */
.carte.cliquable.affiche { display: flex; align-items: center;
                           justify-content: space-between; gap: 16px; }
.sil      { display: block; width: 96px; flex: 0 0 auto; }
.sil svg  { width: 100%; height: auto; display: block; }
.sil.p    { width: 62px; }                       /* dans une ligne de liste */

.grillem  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cartem   { display: flex; flex-direction: column; align-items: center; gap: 6px;
            padding: 12px 6px 10px; border: 0; border-radius: var(--r-s);
            background: var(--carte); box-shadow: var(--ombre); cursor: pointer;
            font: inherit; font-size: 13px; font-weight: 700; color: inherit;
            text-align: center; }
.cartem:active { transform: scale(.97); }
.cartem .sil   { width: 46px; }        /* une seule face : plus etroit, mais 2x plus grand */

/* Installation puis mouvement, en deux temps. Un seul paragraphe disait « coudes serres
   vers l'avant » sans jamais preciser ou l'on se trouve -- debout, sur le banc, a la
   poulie ? L'intitule en petites capitales separe visuellement les deux moments. */
.etape        { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--encre); }
.etape span   { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
                font-weight: 700; color: var(--gris-clair); margin-bottom: 2px; }

/* Les trois postes de la salle, en images. « Je suis devant ce truc, qu'est-ce que je
   peux faire » est la question qu'on se pose vraiment en entrant -- pas « quel muscle ». */
.grillep     { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cartep      { border: 0; border-radius: var(--r-s); background: var(--carte);
               box-shadow: var(--ombre); padding: 0 0 10px; overflow: hidden; cursor: pointer;
               font: inherit; color: inherit; display: flex; flex-direction: column;
               align-items: center; text-align: center; }
.cartep img  { width: 100%; height: auto; display: block; }
.cartep .n   { font-size: 13px; font-weight: 700; margin-top: 4px; }
.cartep .c   { font-size: 11px; color: var(--gris); }
.cartep:active { transform: scale(.97); }

/* ==========================================================================
   « Je suis en séance », et pas resté sur la page de config
   --------------------------------------------------------------------------
   Retour utilisateur : on choisissait une séance et l'écran suivant ressemblait
   à la suite de la configuration. Deux réponses complémentaires : un bandeau
   sombre permanent (on voit d'un coup d'œil qu'on est en séance, où on en est
   et depuis combien de temps), et un plein écran d'une seconde et demie au
   lancement, qui marque physiquement la bascule.
   ========================================================================== */
.barre      { display: flex; align-items: center; gap: 12px; margin-bottom: 4px;
              background: var(--encre); color: var(--fond); border-radius: var(--r);
              padding: 13px 15px; box-shadow: var(--ombre); }
.barre .g   { flex: 1; min-width: 0; }
.barre .q   { font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
              font-weight: 700; color: var(--gris-clair); margin: 0 0 3px;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre .g b { font-size: 20px; font-weight: 800; letter-spacing: -.01em; display: block;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre .d   { flex: 0 0 auto; text-align: right; line-height: 1.15; }
.barre .t   { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums;
              letter-spacing: -.02em; display: block; }
.barre .f   { font-size: 11px; color: var(--gris-clair); font-weight: 600;
              white-space: nowrap; }
.barre .m   { border: 0; background: none; color: var(--gris-clair); font: inherit;
              font-size: 22px; line-height: 1; padding: 0 2px; cursor: pointer;
              flex: 0 0 auto; }

.depart     { position: fixed; inset: 0; z-index: 65; display: none;
              background: var(--encre); color: var(--fond);
              flex-direction: column; align-items: center; justify-content: center;
              text-align: center; padding: 0 28px; }
.depart.on  { display: flex; animation: departEntre .32s ease-out; }
.depart .q  { font-size: 13px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase;
              color: var(--accent); margin-bottom: 14px; }
.depart .n  { font-size: 40px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.depart .s  { font-size: 15px; color: var(--gris-clair); margin-top: 12px; }
@keyframes departEntre { from { opacity: 0; transform: scale(1.04) } to { opacity: 1; transform: none } }

/* ==========================================================================
   Mode camera (camera-seance.js)
   --------------------------------------------------------------------------
   Le telephone est pose a 2 m, face a soi : ce qui doit se lire est ENORME. Les
   boutons pilotables a la main sont sur les COTES, a hauteur de poitrine : c'est
   la que tombe la main quand on la leve dans l'image en miroir.
   Sous le 3-2-1 de fin de recup (.final, z 60) et l'annonce de depart (65) :
   ils doivent rester visibles par-dessus la camera.
   ========================================================================== */
.cam        { position: fixed; inset: 0; z-index: 50; background: #000; color: #fff; overflow: hidden; }
.cam-toile  { position: absolute; inset: 0; width: 100%; height: 100%; }
/* La video doit rester dans la page et « visible » pour que Safari continue de la decoder */
.cam-video  { position: fixed; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
.cam [data-vue] { display: none; }
.cam[data-vue="serie"] [data-vue="serie"],
.cam[data-vue="recup"] [data-vue="recup"] { display: block; }

.cam-haut   { position: absolute; inset: 0 0 auto 0; display: flex; align-items: center; gap: 8px;
              padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px 0; z-index: 1; }
.cam-titre  { flex: 1; min-width: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em;
              text-transform: uppercase; background: rgba(0, 0, 0, .55); padding: 10px 13px;
              border-radius: var(--r-p); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam-haut button { font: inherit; font-size: 14px; font-weight: 800; border: 0; border-radius: var(--r-p);
              padding: 10px 14px; min-height: 40px; background: rgba(0, 0, 0, .55); color: #fff; }
.cam-haut button.coupe { color: var(--gris-clair); text-decoration: line-through; }

/* Jauge de chaque cote : se remplit du repos jusqu'au seuil ou la rep compte */
.cam-jauge  { position: absolute; left: 12px; top: 30%; height: 34%; width: 12px; border-radius: 6px;
              background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); overflow: hidden; }
.cam-jauge.droite { left: auto; right: 12px; }
.cam:not([data-vue="serie"]) .cam-jauge { display: none; }
.cam-jauge i { position: absolute; inset: auto 0 0 0; background: #fff; border-radius: 6px; }
.cam-jauge.atteint i { background: var(--accent); }

.cam-serie  { position: absolute; inset: auto 0 0 0; text-align: center;
              padding: 60px 16px calc(env(safe-area-inset-bottom, 0px) + 14px);
              background: linear-gradient(transparent, rgba(0, 0, 0, .78)); }
.cam-msg    { min-height: 22px; font-size: 17px; font-weight: 700; }
.cam-msg.alerte { color: var(--alerte); }
.cam-compte { font-size: 132px; font-weight: 800; letter-spacing: -.05em; line-height: 1;
              font-variant-numeric: tabular-nums; transition: transform .18s ease-out; }
.cam-compte.bond { transform: scale(1.18); color: var(--accent); transition: none; }
.cam-cotes  { font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, .75); min-height: 20px; }
.cam-obj    { font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, .6); margin-top: 2px; min-height: 18px; }
.cam-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 14px; }
.cam-actions .b { min-height: 50px; font-size: 15px; }
.cam-actions .b.creux { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; }

.cam-recup  { position: absolute; inset: 0; }
.cam-repos  { position: absolute; left: 6%; right: 6%; top: calc(env(safe-area-inset-top, 0px) + 72px);
              text-align: center; }
.cam-cd     { font-size: 96px; font-weight: 800; letter-spacing: -.045em; line-height: 1;
              font-variant-numeric: tabular-nums; }
.cam-cd.chaud { color: var(--alerte); }
.cam-fait, .cam-ensuite { font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, .85); margin-top: 8px; }
.cam-ensuite { color: rgba(255, 255, 255, .65); font-weight: 600; }
.cam-bouton { position: absolute; top: 46%; width: 40%; height: 17%; border: 0; border-radius: 24px;
              font: inherit; font-size: 22px; font-weight: 800; letter-spacing: -.01em;
              background: rgba(255, 255, 255, .9); color: var(--encre); }
.cam-bouton.gauche { left: 3%; }
.cam-bouton.droite { right: 3%; background: var(--accent); color: var(--accent-encre); }
.cam-corriger { position: absolute; left: 50%; transform: translateX(-50%); min-width: 52%;
              bottom: calc(env(safe-area-inset-bottom, 0px) + 64px); border: 0; border-radius: var(--r-p);
              font: inherit; font-size: 16px; font-weight: 800; padding: 16px 22px;
              background: rgba(255, 255, 255, .16); color: #fff; }
.cam-aide   { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
              text-align: center; font-size: 13px; color: rgba(255, 255, 255, .65); padding: 0 24px; }
.cam [data-main].vise { outline: 4px solid var(--accent); outline-offset: 4px; }

/* Le curseur suit la paume ; son anneau se remplit pendant qu'on reste sur un bouton */
.cam-curseur { position: absolute; left: 0; top: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px;
              pointer-events: none; z-index: 2; }
.cam-curseur svg { width: 100%; height: 100%; }
.cam-curseur circle { fill: none; stroke-width: 5; }
.cam-curseur .fond { stroke: rgba(255, 255, 255, .9); fill: rgba(198, 244, 50, .25); }
.cam-curseur .arc  { stroke: var(--accent); stroke-dasharray: 125.7; stroke-dashoffset: 125.7;
                     transform: rotate(-90deg); transform-origin: center; }

/* Camera en pause (exercice qui se saisit a la main) : un rappel discret au-dessus du bouton */
.cam-pause  { position: fixed; left: 12px; right: 12px; z-index: 35;
              bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
              display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px;
              background: var(--encre); color: var(--fond); border-radius: var(--r-p); box-shadow: var(--ombre);
              font-size: 13px; font-weight: 800; }
.cam-pause b { flex: 1; min-width: 0; font-weight: 600; color: var(--gris-clair);
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam-pause button { font: inherit; border: 0; border-radius: var(--r-p); padding: 9px 12px;
              background: var(--accent); color: var(--accent-encre); }
.cam-pause button + button { background: rgba(255, 255, 255, .14); color: var(--fond); }

/* L'invitation sur l'ecran de serie */
.cam-invite { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.cam-invite .ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
              background: var(--accent); color: var(--accent-encre); }
.cam-invite .ic svg { width: 24px; height: 24px; }
.cam-invite b { display: block; font-size: 17px; font-weight: 800; }
.cam-invite .note { margin-top: 2px; font-size: 13px; }