/* ===== Reset/Global ===== */
* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Pas de scroll */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.visually-hidden {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ===== Conteneur 4/3 centré et adaptatif ===== */
#board {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(100vw, calc(100vh * 4 / 3));
  aspect-ratio: 4 / 3;

  /* Fond requis (chemin corrigé) */
  background: url("images/background.png") center/cover no-repeat;

  border: none;
  overflow: hidden; /* pour l'overlay */
}

/* ----- Grille principale : 35% (haut) / 65% (bas) ----- */
.grid-main {
  position: relative;
  display: grid;
  grid-template-rows: 35% 65%;   /* ⬅️ au lieu de 25% 75% */
  grid-template-columns: 50% 50%;
  width: 100%;
  height: 100%;
}


/* Positionnement des 4 zones */
.zone1, .zone2, .zone3, .zone4 { position: relative; }
.zone1 { grid-row: 1 / 2; grid-column: 1 / 2; }
.zone2 { grid-row: 1 / 2; grid-column: 2 / 3; }
.zone3 { grid-row: 2 / 3; grid-column: 1 / 2; }
.zone4 { grid-row: 2 / 3; grid-column: 2 / 3; }

/* ===== Labels provisoires ===== */
.label-zone {
  position: absolute;
  top: 6px; left: 10px;
  font-weight: 700;
  font-size: clamp(12px, 1.6vw, 18px);
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
  pointer-events: none;
}
.label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-weight: 700;
  font-size: clamp(16px, 2.5vw, 28px);
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0,0,0,.7);
  pointer-events: none;
  white-space: nowrap;
}
.label.sm { font-size: clamp(12px, 1.8vw, 18px); }

/* ===== Zone 1 : split horizontal (1A / 1B) ===== */
.zone1-split {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr 1fr; /* 2 parts égales */
  grid-template-columns: 1fr;
}
.z-1a, .z-1b { position: relative; }

/* ===== Zone 1A : split vertical 1A1 / 1A2 ===== */
.z-1a { position: relative; }

/* Grille 2 colonnes égales, pleine surface de 1A */
.z-1a-split {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

/* Sous-zones 1A1 / 1A2 positionnées comme conteneurs */
.z-1a1, .z-1a2 { position: relative; }

/* ===== Zone 3 : split horizontal (3A / 3B) ===== */
.zone3-split {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr 1fr; /* 3A / 3B */
  grid-template-columns: 1fr;
}
.z-3a, .z-3b { position: relative; }

/* 3A : quadrillage en 4 => 3A1..3A4 */
.z-3a-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}
.cell { position: relative; }
.c-3a1 { grid-row: 1 / 2; grid-column: 1 / 2; }
.c-3a2 { grid-row: 1 / 2; grid-column: 2 / 3; }
.c-3a3 { grid-row: 2 / 3; grid-column: 1 / 2; }
.c-3a4 { grid-row: 2 / 3; grid-column: 2 / 3; }

/* ===== Zone 4 : 4B visible + bouton + volet 4A ===== */
.z-4b {
  position: absolute;
  inset: 0;
  z-index: 10; /* au-dessus du volet */
}
.btn-volet {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: clamp(28px, 3vw, 42px);
  height: clamp(28px, 3vw, 42px);
  font-size: clamp(14px, 2vw, 20px);
  font-weight: 700;
  background: rgba(0,0,0,0.45);
  color: #fff;
  border-radius: 0 6px 6px 0;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background .2s ease;
  z-index: 11; /* bouton > tout */
}
.btn-volet:hover { background: rgba(0,0,0,0.6); }

/* Volet 4A : recouvre la zone 3 quand ouvert */
.volet-4a {
  position: absolute;
  left: 0;
  top: 35%;
  width: 50%;     /* même largeur que la zone 3 */
  height: 65%;    /* même hauteur que la zone 3 */

  z-index: 5;     /* sous 4B/bouton */

  /* Caché hors champ à gauche pour ne pas bloquer les clics de 4B */
  transform: translateX(200%);
  transition: transform .35s ease-in-out;

  /* Interactions désactivées quand fermé */
  pointer-events: none;

  /* Style provisoire pour visualiser le volet */
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(20px);
}

/* Ouverture du volet (CSS only) */
#toggle4a:checked ~ #board .volet-4a {
  transform: translateX(0%);
  pointer-events: auto; /* réactive les interactions quand ouvert */
}

/* Indication visuelle d'état */
#toggle4a:checked ~ #board .btn-volet {
  background: rgba(0,0,0,0.7);
}

/* ===== Horloge analogique (Zone 2) — anti-clipping ===== */
:root {
  /* Ajuste au besoin: 0.94 (par défaut) -> 94% de la hauteur & largeur utiles */
  --clock-scale: 0.9;
}

.zone2 { 
  position: relative; 
  overflow: hidden;
}

.zone2 .clock-wrapper {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/* Le carré est dimensionné par la hauteur, avec une marge de sécurité */
.zone2 .clock-box {
  height: calc(100% * var(--clock-scale));
  aspect-ratio: 1 / 1;
  width: auto;
  /* borne aussi la largeur pour éviter tout “débordement large” */
  max-width: calc(100% * var(--clock-scale));
  display: grid;
  place-items: center;
}

/* Le SVG remplit le carré, sans espace inline ni débordement */
.zone2 .analog-clock {
  width: 100%;
  height: 100%;
  display: block;
}

/* Minutes intérieures : plus petit et couleur = aiguille des minutes */
.zone2 .analog-clock .minute-number {
  font-size: 9px;        /* plus petit que les heures */
  font-weight: 600;
  fill: #0ea5e9;         /* même couleur que .hand-min (aiguille des minutes) */
  opacity: 0.95;
}


/* ===== 3A1 – Image du menu ===== */
.c-3a1 { position: relative; overflow: hidden; }

.c-3a1 .menu3a1-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 4px;            /* petite marge de sécurité */
}

.c-3a1 .menu3a1-wrap .menu-img {
  width: 100%;
  height: 100%;
  object-fit: contain;      /* max sans déformation */
  display: block;
}

.c-3a1 .menu3a1-wrap .menu-empty {
  color: #fff;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  font-size: clamp(12px, 1.4vw, 18px);
  line-height: 1.2;
}