/* ============================================================================
   KIT — parts/panneau.css        Dépend de : tokens.css, motion.css

   Le panneau est le carton posé sur la table : c'est la surface par défaut
   de tout contenu groupé (formulaire, section d'admin, bloc de statistiques).

     <section class="panneau">
       <header class="panneau-tete">
         <h2>Comptes existants</h2>
         <span class="pastille accent">12</span>
       </header>
       <div class="panneau-corps"> … </div>
     </section>
   ========================================================================= */

.panneau {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-md);
  box-shadow: var(--pose-1);
  overflow: hidden;
  transition: box-shadow var(--pose) var(--doux), border-color var(--pose) var(--doux);
}

.panneau-tete {
  display: flex;
  align-items: center;
  gap: var(--pas-3);
  flex-wrap: wrap;
  padding: var(--pas-4) var(--pas-5);
  border-bottom: 1px solid var(--trait);
  background: var(--surface);
}
.panneau-tete h2,
.panneau-tete h3 { font-size: var(--t-700); margin: 0; }
.panneau-tete .pousse { margin-left: auto; }
.panneau-tete .sous { flex-basis: 100%; font-size: var(--t-300); color: var(--encre-2); margin: 0; }

.panneau-corps { padding: var(--pas-5); }
.panneau-corps.serre { padding: var(--pas-4); }
.panneau-corps.nu { padding: 0; }

.panneau-pied {
  padding: var(--pas-3) var(--pas-5);
  border-top: 1px solid var(--trait);
  background: var(--fond-creux);
  font-size: var(--t-300);
  color: var(--encre-2);
}

/* ── Le panneau « feutre » : réservé aux en-têtes de page ─────────────────
   Trame diagonale + halo laiton. C'est la seule grande surface pleine du
   kit ; ne jamais l'empiler deux fois sur un même écran.                    */
.panneau.feutre {
  position: relative;
  isolation: isolate;
  background: var(--feutre);
  color: var(--sur-feutre);
  border-color: var(--feutre-fonce);
  box-shadow: var(--pose-2);
}
.panneau.feutre::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(58deg,  rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-58deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 5px),
    radial-gradient(120% 90% at 78% -10%, var(--laiton-voile), transparent 62%);
  pointer-events: none;
}
.panneau.feutre h1,
.panneau.feutre h2,
.panneau.feutre h3 { color: var(--sur-feutre); }
.panneau.feutre .oeil { color: color-mix(in srgb, var(--sur-feutre) 62%, transparent); }
.panneau.feutre .panneau-tete,
.panneau.feutre .panneau-pied { border-color: color-mix(in srgb, var(--sur-feutre) 14%, transparent); background: none; }

/* ── Grilles de panneaux ─────────────────────────────────────────────────── */
.grille-panneaux {
  display: grid;
  gap: var(--pas-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ── États vides : un titre lisible plus une piste d'action ──────────────── */
.vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pas-2);
  text-align: center;
  padding: var(--pas-7) var(--pas-5);
  color: var(--encre-2);
}
.vide .embleme {
  font-size: 2.4rem;
  line-height: 1;
  opacity: 0.5;
  margin-bottom: var(--pas-1);
}
.vide b { font-family: var(--f-titre); font-size: var(--t-700); font-weight: 600; color: var(--encre); }
.vide p { font-size: var(--t-400); max-width: 44ch; }