/* ===== Base ===== */
*{box-sizing:border-box;}
html,body{
  height:100%;margin:0;padding:0;
  background:#f5f7fa;
  font-family:Arial,sans-serif;
  touch-action:none;
}

/* ===== FV Header ===== */
.fv-header{
  position:fixed;top:0;left:0;width:100%;
  box-sizing:border-box;z-index:1000;
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:12px;padding:10px 24px;
  background:linear-gradient(135deg,#1a1a2e,#16213e);
  color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.4);
  height:56px;
}
.fv-header .left{justify-self:start;}
.fv-header .center{justify-self:center;font-weight:700;font-size:1em;}
.fv-header .right{justify-self:end;}
.btn-nav{
  padding:6px 14px;border-radius:8px;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.1);color:#fff;
  cursor:pointer;font-size:.9em;text-decoration:none;
  transition:background .2s;white-space:nowrap;display:inline-block;
}
.btn-nav:hover{background:rgba(255,255,255,.2);}

/* ===== Progress bar (loading) ===== */
#progressBar{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:220px;height:12px;z-index:500;
}

/* ===== Menu ===== */
#menu{
  min-height:100vh;padding-top:56px;
  display:flex;align-items:center;justify-content:center;
}
.menu-card{
  background:#fff;
  border:1px solid #e0e4ea;
  border-radius:24px;
  padding:36px 32px;
  max-width:560px;width:92%;
  text-align:center;
  box-shadow:0 6px 24px rgba(0,0,0,.1);
  color:#1a1a2e;
}
.menu-icon{font-size:2.8em;margin-bottom:8px;line-height:1;}
.menu-card h1{
  font-size:clamp(1.4em,3vw,2em);font-weight:800;margin:0 0 8px;
  background:linear-gradient(90deg,#ff9a3c,#c471ed);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.menu-sub{font-size:.9em;color:#666;margin:0 0 20px;line-height:1.5;}

.score-max-display{
  display:inline-block;
  background:#fff8e1;border:1px solid #ffe082;
  color:#f57f17;font-weight:700;font-size:.88em;
  border-radius:999px;padding:4px 16px;margin-bottom:14px;
}

.btn-video{
  display:inline-block;padding:9px 22px;margin-bottom:20px;
  background:#f0f4ff;border:1px solid #c5cae9;
  color:#3949ab;border-radius:10px;font-size:.9em;font-family:Arial,sans-serif;
  cursor:pointer;transition:background .2s;
}
.btn-video:hover{background:#e8eaf6;}

.exo-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;
}
.exo-card{display:flex;flex-direction:column;align-items:center;gap:5px;}
.btn-exo{
  width:100%;padding:12px 10px;font-family:Arial,sans-serif;
  background:#f0f4ff;border:1px solid #c5cae9;
  border-radius:12px;color:#1a1a2e;cursor:pointer;font-size:.88em;
  display:flex;align-items:center;gap:8px;transition:background .2s;
}
.btn-exo:hover{background:#e8eaf6;border-color:#7986cb;}
.exo-icon{font-size:1.3em;flex-shrink:0;}
.exo-label{text-align:left;line-height:1.3;}

.btn-permis{
  display:block;width:100%;
  padding:14px 20px;margin-bottom:20px;
  background:linear-gradient(135deg,#e53935,#c62828);
  border:none;border-radius:14px;
  color:#fff;font-size:1.05em;font-weight:700;font-family:Arial,sans-serif;
  cursor:pointer;transition:filter .2s,transform .1s;
}
.btn-permis:hover{filter:brightness(1.1);transform:translateY(-1px);}

.score-max-exo{
  font-size:.78em;font-weight:700;
  color:#f57f17;min-height:1em;text-align:center;
  user-select:none;
}
.score{
  font-weight:700;font-size:.85em;
  color:#4caf50;min-height:1.2em;text-align:center;
  user-select:none;
}

.credits{
  font-size:.7em;color:#888;line-height:1.8;margin:0;
}
.credits a{color:#3949ab;text-decoration:none;}
.credits a:hover{text-decoration:underline;}

/* ===== Canvas ===== */
#mon_canvas{
  -webkit-user-select:none;user-select:none;
  display:block;
}

/* ===== Consignes (in-game overlays) ===== */
.consigne2{
  -webkit-user-select:none;user-select:none;
  font-weight:bold;font-style:italic;font-size:18px;
  border:none;font-family:Arial;text-align:center;
  background-color:rgba(237,255,231,.9);
  box-shadow:0 1px 5px rgba(0,0,0,.25);
  border-radius:5px;color:#222;
  line-height:2em;height:36px;
  margin:3px;padding:3px;
  width:100%;position:relative;
}

#rep{
  border:none;font-family:Arial;background:transparent;margin:3px;
}
#rep:focus{
  border:none;font-family:Arial;background:rgba(255,255,255,.2);margin:3px;outline:none;
}

/* ===== Tablet overlay buttons ===== */
.bouton{
  border:none;font-family:Arial;text-align:center;
  background-color:#3949ab;
  box-shadow:0 1px 5px rgba(0,0,0,.25);
  border-radius:5px;color:#fff;
  font-size:150%;height:48px;
  margin:5px 10px 5px 0;
  cursor:pointer;user-select:none;
}
.bouton:hover{background-color:#5c6bc0;}

#echap{
  position:fixed;top:66px;right:10px;z-index:100;
  padding:0 12px;
}
#tabletteswitch1{
  position:fixed;top:124px;right:10px;z-index:100;height:60px;
  background-color:#ffd34e;user-select:none;
}
#tabletteswitch2{
  position:fixed;top:194px;right:10px;z-index:100;height:60px;
  background-color:#8ab1d9;user-select:none;
}
#tabletteswitch3{
  position:fixed;top:264px;right:10px;z-index:100;height:60px;
  background-color:#8ab1d9;user-select:none;
}
#valide_tablette{
  position:fixed;top:344px;right:10px;z-index:100;height:100px;
  user-select:none;
}

/* ===== Video tutorial ===== */
#video{
  position:fixed;top:56px;left:0;
  width:100%;height:calc(100vh - 56px);
  background:#000;z-index:50;
  object-fit:contain;
}

/* ===== Result screen ===== */
.resultat{
  width:clamp(280px,80vw,500px);
  top:80px;text-align:center;
  margin:0 auto;position:absolute;z-index:50;
  left:50%;transform:translateX(-50%);
  font-family:Arial;
  background:rgba(255,255,255,.96);
  box-shadow:0 4px 20px rgba(0,0,0,.2);
  border-radius:14px;color:#1a1a2e;
  font-size:120%;height:auto;padding:16px;
  border:1px solid #e0e4ea;
}

/* ===== Fractions (affichage JS) ===== */
.fraction{display:inline-block;vertical-align:middle;margin:0 .2em .4ex;text-align:center;}
.fraction>span{display:block;padding-top:.15em;}
.fraction span.fdn{border-top:thin solid #e0f0ff;}
.fraction span.bar{display:none;}

/* ===== Responsive ===== */
@media(max-width:480px){
  .exo-grid{grid-template-columns:1fr;}
  .menu-card{padding:24px 18px;}
}