/* app.css — AlloPanne menu / layout, iOS-friendly */

/* Base */
html, body { height: 100%; margin: 0; }
:root{
  --icon-size: clamp(72px, 12vmin, 140px);
  --gap: 1.25rem;
  --elev: 0 10px 24px rgba(0,0,0,.18);
  --elev-soft: 0 6px 18px rgba(0,0,0,.12);
  --ptr-h: 64px;

  /* Palette LIGHT */
  --p1: #1565C0; --p2: #1E88E5; --p3: #90A4AE; --p4: #455A64;
  --p1-rgb: 21,101,192; --p2-rgb: 30,136,229;
  --p3-rgb: 144,164,174; --p4-rgb: 69,90,100;

  --page-bg: #ffffff;
  --ptr-bg: rgba(255,255,255,.92);
  --ptr-fg: #6c757d;

  --btn-bg: rgba(255,255,255,.9);
  --btn-fg: #0f172a;
  --btn-ring: rgba(0,0,0,.16);

  --indicator: #c8ced6;
  --indicator-hover: #aeb6bf;
}

/* Icônes plus grosses sur écrans larges */
@media (min-width: 992px){
  :root { --icon-size: calc(clamp(72px, 12vmin, 140px) * 2); }
}

/* Thème dark */
[data-theme="dark"]{
  --p1: #0D47A1; --p2: #1565C0; --p3: #546E7A; --p4: #37474F;
  --p1-rgb: 13,71,161; --p2-rgb: 21,101,192;
  --p3-rgb: 84,110,122; --p4-rgb: 55,71,79;

  --page-bg: #0b1117;
  --ptr-bg: rgba(18,22,28,.9);
  --ptr-fg: #cbd5e1;

  --btn-bg: rgba(15,23,42,.85);
  --btn-fg: #e2e8f0;
  --btn-ring: rgba(148,163,184,.35);

  --indicator: #e2e8f0;
  --indicator-hover: #cfd8e3;
}

body{ background: var(--page-bg); color-scheme: light dark; }

/* Pull-To-Refresh banner (optionnel) */
#ptr{
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--ptr-h);
  transform: translateY(-100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--ptr-fg); background: var(--ptr-bg);
  backdrop-filter: blur(6px);
  z-index: 9999;
  transition: transform .18s ease;
  pointer-events: none;
  font: 500 14px system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#ptr .spinner{
  width: 28px; height: 28px; margin-right: .5rem;
  border-radius: 50%;
  border: 3px solid currentColor;
  border-top-color: transparent;
  animation: rot 1s linear infinite;
}
@keyframes rot { to { transform: rotate(360deg); } }

/* Conteneur principal — iOS-safe viewport */
.full-container{
  display: flex;
  flex-direction: column;
  height: 100vh;            /* fallback */
  min-height: 100svh;       /* iOS 15+ safe viewport */
  min-height: 100dvh;       /* modernes */
  min-height: -webkit-fill-available; /* iOS anciens */
  width: 100%;
  overflow: hidden;
}

/* Panneaux (tuiles) */
.panel{
  position: relative;
  flex: 1 1 0;            /* ❗ Répartition égale verticale (3 tuiles = 1/3, 4 = 1/4) */
  min-height: 0;          /* évite les débordements dans un conteneur flex */
  width: 100%;
  /* ❌ pas de height:25vh → sinon trou avec 3 tuiles sur mobile */
  padding: calc(var(--gap) + .25rem) var(--gap);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  text-decoration: none; outline: none; gap: clamp(.5rem, 2vmin, 1rem);
  color: #fff; box-shadow: var(--elev-soft);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.panel::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius: inherit; box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition: box-shadow .15s ease;
}
.panel:hover{
  transform: translateY(-2px);
  filter: brightness(1.06) saturate(1.03);
}
.icon{ width: var(--icon-size); height: var(--icon-size); display: block; color: #fff; }
.panel h3{ margin: 0; font-weight: 600; font-size: clamp(1rem, 2.6vmin, 1.4rem); letter-spacing: .2px; }

/* Couleurs */
.p1{ background: var(--p1); }
.p2{ background: var(--p2); }
.p3{ background: var(--p3); }
.p4{ background: var(--p4); }

/* Halo hover (matériau actif) */
.p1:hover::after{
  box-shadow:0 0 0 4px rgba(var(--p1-rgb), 0.50),
             0 0 18px 8px rgba(var(--p1-rgb), 0.35),
             0 14px 28px rgba(0,0,0,0.22);
}
.p2:hover::after{
  box-shadow:0 0 0 4px rgba(var(--p2-rgb), 0.50),
             0 0 18px 8px rgba(var(--p2-rgb), 0.35),
             0 14px 28px rgba(0,0,0,0.22);
}
.p3:hover::after{
  box-shadow:0 0 0 4px rgba(var(--p3-rgb), 0.50),
             0 0 18px 8px rgba(var(--p3-rgb), 0.35),
             0 14px 28px rgba(0,0,0,0.22);
}
.p4:hover::after{
  box-shadow:0 0 0 4px rgba(var(--p4-rgb), 0.50),
             0 0 18px 8px rgba(var(--p4-rgb), 0.35),
             0 14px 28px rgba(0,0,0,0.22);
}

/* Barre indicatrice — HOVER UNIQUEMENT */
.panel::before{
  content:"";
  position:absolute;
  background: var(--indicator);
  opacity: 0;
  transform-origin: left top;
  transition: opacity .18s ease, transform .22s ease, background-color .18s ease;
  border-radius: 2px;
  /* Mode colonne (étroit) : barre à gauche */
  left:0; top:0; width:4px; height:100%;
  transform: scaleY(0.4);
}
.panel:hover::before{
  opacity: .9;
  background: var(--indicator-hover);
  transform: scaleY(1);
}

/* Desktop : disposition horizontale — parts égales (pas de “trou” si 3 tuiles) */
@media (min-width: 600px){
  .full-container{ flex-direction: row; }
  .panel{
    height: 100%;
    flex: 1 1 0;   /* chaque tuile prend une part égale */
    width: auto;
    min-width: 0;
  }

  /* Barre indicatrice en haut et plus épaisse */
  .panel::before{
    left:0; top:0; width:100%; height:6px;
    transform: scaleX(0.4);
  }
  .panel:hover::before{
    opacity:.9; background: var(--indicator-hover);
    transform: scaleX(1);
  }
}

/* Bouton retour (si utilisé ailleurs) */
.back-btn{
  position: absolute; top: .75rem; left: 1rem;
  display: inline-flex; align-items: center; gap: .5rem;
  height: 40px; padding: 0 .75rem; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-ring); box-shadow: 0 2px 10px var(--btn-ring);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  font-size: 16px; line-height: 1;
}
.back-btn svg{ width: 20px; height: 20px; display: block; }
.back-label{ display: none; }
@media (min-width: 600px){
  .back-btn{ height: 44px; }
  .back-btn svg{ width: 22px; height: 22px; }
  .back-label{ display: inline; }
}
.back-btn:hover{ background: color-mix(in oklab, var(--btn-bg) 85%, var(--p2) 15%); }
.back-btn:focus-visible{ outline: 3px solid var(--btn-ring); outline-offset: 2px; }