body {
  font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  /* background-color: #f8f9fa;
  color: #333; */
  background-color: #dadadd;
  color: #333;  
}
main { padding: 12px 12px 72px; } /* espace pour le footer fixe */
.brand-text { font-style: italic; font-weight: 700; }
.bold { font-weight: 600; }
.error { color: red; font-size: 0.9rem; }

.navbar-toggler {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    outline: none !important;
}


/* app/app/static/css/myapp.css (ajouts optionnels) */
#qr-area { position: relative; max-width: 480px; }
#qr-video { width: 100%; border: 1px solid #ddd; border-radius: 6px; }
#qr-status { font-size: .9rem; color: #555; margin-top: .5rem; }

/* Empêche le saut de ligne et tronque proprement */
.ts-control {
  white-space: nowrap;
}
.ts-control .item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Optionnel: garde le contrôle compact */
.ts-control, .ts-wrapper.single .ts-control {
  min-height: 2.25rem; /* ~ .form-select Bootstrap */
}

/* grille: 2 colonnes carrées + une ligne pleine largeur */
.tiles-grid {
 --tile-h: clamp(150px, 40vw, 220px);
  display: grid;
  grid-template-columns: var(--tile-h) var(--tile-h);
  grid-auto-rows: var(--tile-h);
  gap: 1.5rem;               /* ↑ espace entre les carrés */
  justify-content: center;   /* centre la grille horizontalement */
  margin: 2rem auto 2rem;    /* ↑ espace autour de la grille */
  padding: 0 1rem;           /* ↑ petit padding à gauche/droite */
}
  .tile {
    height: var(--tile-h);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    background-color: var(--bs-secondary);
    border: 3px solid #000000;
  }



  @media (max-width: 576px) {
    .tiles-grid {
      gap: 1.25rem;
      margin: 1.5rem auto;
      padding: 0 .5rem;
    }
  }


  .disc-header {
    padding: 6px 12px;        /* Réduit le padding vertical et horizontal */
    font-size: 0.9rem;        /* Police légèrement plus petite */
    min-height: 40px;         /* Hauteur globale plus compacte */
  }

  .disc-header img {
    width: 32px !important;   /* Image plus petite */
    height: 32px !important;
    margin-right: 10px !important;
  }
  
  .disc-title {
    font-size: 0.85rem;
  }


  .svg-green {
    filter: invert(48%) sepia(93%) saturate(347%) hue-rotate(82deg) brightness(92%) contrast(89%);
  }





  .tile .bi {
    font-size: clamp(4rem, calc(var(--tile-h) * .6), 9rem);
    /* color: #d0d0d0; */
  }

 .tile:hover {
    background-color: #dadadd;   /* violet Bootstrap */
  }

  .tile-wide {
    grid-column: 1 / span 2;
  }

  .tile:hover .bi {

    transform: scale(1.08);
    transition: all 0.25s ease;
  }  

  .tile-violet {
    color: #d327e7 !important; 
  }

  .tile-orange {
    color: #e87a04 !important; /* Orange vif */
  }

  .tile-red {
    color: #de2424 !important; 
  }

  .tile-green {
    color: #43dc48 !important; 
  }

  .tile-blue {
    color: #223af0 !important; 
  }