/* ═══════════════════════════════════════════════════════════════════════════
   LE HALL DES APPLICATIONS — marbre premium              (Maha, 12/09/2026)
   Barème de lecture de la maison : rien sous 15 px, corps en sans-serif.
   ═══════════════════════════════════════════════════════════════════════════ */

#view-ilots{ padding:0; }

.gi-hall{ max-width:1280px; margin:0 auto; padding:32px 28px 72px; }

.gi-entete{ margin:8px 0 34px; }
.gi-titre{
  font-size:2.15rem; line-height:1.15; font-weight:700; margin:0 0 10px;
  color:#3a2708; letter-spacing:-.01em;
}
.gi-sous{
  font-size:1.02rem; line-height:1.55; max-width:64ch; margin:0 0 18px;
  color:#6b5c42;
}
.gi-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.gi-reverif{
  font:600 .95rem/1 inherit; padding:11px 20px; border-radius:12px; cursor:pointer;
  background:linear-gradient(158deg,rgba(255,253,249,.96),rgba(248,243,233,.9));
  border:1px solid rgba(160,120,64,.45); color:#4a3520;
  transition:transform .18s ease, box-shadow .18s ease;
}
.gi-reverif:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(74,48,12,.14); }
.gi-compte{ font-size:.92rem; color:#8a7a5e; }

.gi-famille{ margin:0 0 36px; }
.gi-famille-titre{
  font-size:.86rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#8a7a5e; margin:0 0 14px; padding-bottom:9px;
  border-bottom:1px solid rgba(160,120,64,.22);
}

.gi-grille{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(286px,1fr));
}

.gi-carte{
  display:flex; flex-direction:column; gap:9px; min-height:168px;
  padding:18px 18px 15px; border-radius:16px;
  background:linear-gradient(158deg,rgba(255,253,249,.93),rgba(250,245,235,.86));
  border:1px solid rgba(160,120,64,.26);
  box-shadow:0 2px 6px rgba(74,48,12,.07),0 10px 26px rgba(74,48,12,.09);
  backdrop-filter:blur(9px) saturate(1.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.gi-carte:hover{
  transform:translateY(-2px); border-color:rgba(160,120,64,.46);
  box-shadow:0 4px 10px rgba(74,48,12,.1),0 16px 34px rgba(74,48,12,.14);
}
.gi-carte--onglet{ background:linear-gradient(158deg,rgba(252,249,242,.9),rgba(246,240,228,.84)); }

.gi-carte-tete{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.gi-carte-nom{ margin:0; font-size:1.12rem; font-weight:650; color:#3a2708; line-height:1.25; }
.gi-carte-phrase{ margin:0; font-size:.95rem; line-height:1.5; color:#6b5c42; flex:1; }
.gi-carte-raison{
  margin:0; font-size:.86rem; line-height:1.45; color:#8a6512;
  padding:8px 10px; border-radius:9px;
  background:rgba(201,151,27,.09); border:1px solid rgba(201,151,27,.2);
}

.gi-pastille{
  flex-shrink:0; font-size:.76rem; font-weight:600; letter-spacing:.02em;
  padding:4px 9px; border-radius:999px; white-space:nowrap;
}
.gi-ok      { background:rgba(79,125,74,.14);  color:#3d6339; border:1px solid rgba(79,125,74,.3); }
.gi-protegee{ background:rgba(74,107,138,.13);  color:#3f5f7c; border:1px solid rgba(74,107,138,.28); }
.gi-vide    { background:rgba(185,129,42,.14); color:#8a6512; border:1px solid rgba(185,129,42,.32); }
.gi-ferme   { background:rgba(168,68,58,.12);  color:#8d3a31; border:1px solid rgba(168,68,58,.28); }
.gi-attente { background:rgba(160,120,64,.08); color:#9b8a6c; border:1px solid rgba(160,120,64,.18); }

/* ⛔ « Un seul lingot par écran. » Une grille de 34 lingots identiques, c'est
   zéro lingot : l'œil ne sait plus où aller et la page devient un mur d'or.
   Les cartes portent donc le geste CREUX ; l'or reste au titre et aux états. */
.gi-carte-pied{ display:flex; align-items:center; gap:10px; margin-top:2px; }
.gi-ouvrir{
  flex:1; cursor:pointer; font:600 .96rem/1 inherit; padding:11px 16px;
  border-radius:12px; font-variant-numeric:lining-nums;
  background:linear-gradient(158deg,rgba(255,253,249,.96),rgba(248,243,233,.9));
  border:1px solid rgba(160,120,64,.45); color:#4a3520;
  box-shadow:0 1px 3px rgba(74,48,12,.08);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.gi-ouvrir:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%);
  border-color:rgba(160,120,64,.55); color:#231703;
  text-shadow:0 1px 1px rgba(60,40,4,.28);
  box-shadow:0 2px 6px rgba(74,48,12,.12),0 10px 24px rgba(74,48,12,.18),
             inset 0 1px 0 rgba(255,255,255,.55);
}
.gi-carte--onglet .gi-ouvrir{ color:#6b5c42; }
.gi-part{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px; text-decoration:none;
  font-size:1.05rem; color:#8a6512;
  background:rgba(255,253,249,.9); border:1px solid rgba(160,120,64,.3);
}
.gi-part:hover{ background:rgba(201,151,27,.12); color:#6d4f0c; }

/* ── LA SCÈNE : l'îlot ouvert DANS l'application ───────────────────────── */
.gi-scene{ display:flex; flex-direction:column; height:calc(100vh - 8px); }
.gi-scene[hidden]{ display:none; }
.gi-barre{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 20px; flex-shrink:0;
  background:linear-gradient(180deg,rgba(255,253,248,.95),rgba(250,244,232,.9));
  border-bottom:1px solid rgba(160,120,64,.26);
}
.gi-retour{
  cursor:pointer; font:600 .95rem/1 inherit; padding:10px 16px; border-radius:11px;
  background:linear-gradient(158deg,rgba(255,253,249,.95),rgba(248,243,233,.88));
  border:1px solid rgba(160,120,64,.45); color:#4a3520;
}
.gi-retour:hover{ background:rgba(201,151,27,.12); }
.gi-scene-nom{ font-size:1.05rem; font-weight:650; color:#3a2708; }
.gi-barre-droite{ margin-left:auto; display:flex; gap:8px; }
.gi-icone{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:11px; cursor:pointer; text-decoration:none;
  font-size:1.05rem; color:#8a6512;
  background:rgba(255,253,249,.9); border:1px solid rgba(160,120,64,.3);
}
.gi-icone:hover{ background:rgba(201,151,27,.12); }

.gi-cadre-boite{ position:relative; flex:1; min-height:420px; }
.gi-cadre{ width:100%; height:100%; border:0; display:block; background:#fffdf8; }
.gi-attente-voile{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(255,253,248,.94); color:#6b5c42; font-size:1rem; z-index:2;
}
.gi-attente-voile[hidden]{ display:none; }
.gi-refus{ text-align:center; max-width:46ch; padding:26px; }
.gi-refus p{ margin:0 0 10px; font-size:1rem; line-height:1.55; color:#3a2708; }
.gi-refus-note{ color:#6b5c42!important; font-size:.93rem!important; }
.gi-refus-btn{
  display:inline-block; margin-top:10px; padding:12px 22px; border-radius:12px;
  text-decoration:none; font-weight:600; color:#231703;
  background:linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%);
  border:1px solid rgba(160,120,64,.55);
  box-shadow:0 2px 6px rgba(74,48,12,.12),inset 0 1px 0 rgba(255,255,255,.55);
}

/* ── Téléphone ────────────────────────────────────────────────────────── */
@media (max-width:600px){
  .gi-hall{ padding:20px 16px 64px; }
  .gi-titre{ font-size:1.62rem; }
  .gi-grille{ grid-template-columns:1fr; }
  .gi-carte-pied{ flex-wrap:wrap; }
  .gi-ouvrir{ width:100%; flex:1 1 100%; }
  .gi-part{ width:100%; }
  .gi-barre{ padding:10px 14px; gap:10px; }
  .gi-scene{ height:calc(100vh - 60px); }
  .gi-scene-nom{ font-size:.98rem; }
}
@media (prefers-reduced-motion:reduce){
  .gi-carte:hover,.gi-ouvrir:hover,.gi-reverif:hover{ transform:none; }
}