/* Styles complémentaires à Tailwind (chargé par CDN).
   Réservé aux cas que les classes utilitaires couvrent mal : la grille de
   l'éditeur, les blocs striés et les frises de la journée simulée. */

/* Masque un élément jusqu'à ce qu'Alpine.js ait pris la main. */
[x-cloak] {
  display: none !important;
}

/* Indicateur de chargement HTMX. HTMX gère la classe, pas le style. */
.htmx-indicator {
  opacity: 0;
  transition: opacity 150ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Grille de l'éditeur
   -------------------------------------------------------------------------- */

.grille {
  display: grid;
  /* Une colonne d'heures, puis une colonne par jour-type. */
  grid-auto-flow: row;
  /* 15 px par créneau de 15 minutes : la journée entière tient dans un écran
     et demi, et un bloc de 30 minutes reste lisible. */
  grid-auto-rows: 15px;
}

.grille-creneau {
  border-top: 1px solid rgb(241 245 249); /* slate-100 */
}

/* Ligne plus marquée au début de chaque heure : c'est ce qui rend la grille
   lisible d'un coup d'œil. */
.grille-creneau--heure {
  border-top-color: rgb(203 213 225); /* slate-300 */
}

.grille-creneau--demi {
  border-top-style: dashed;
}

.grille-creneau:hover {
  background-color: rgb(240 249 255); /* sky-50 */
}

.grille-creneau--survol-depot {
  background-color: rgb(224 242 254); /* sky-100 */
  outline: 2px dashed rgb(14 165 233); /* sky-500 */
  outline-offset: -2px;
}

.grille-bloc {
  position: relative;
  z-index: 10;
  overflow: hidden;
  cursor: grab;
}

.grille-bloc:active {
  cursor: grabbing;
}

/* Étape contenant au moins une action désactivée. Les rayures disent « il y a
   ici du travail volontairement neutralisé », sans le cacher. */
.grille-bloc--strie {
  background-image: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 5px,
    rgba(255, 255, 255, 0.55) 5px,
    rgba(255, 255, 255, 0.55) 10px
  );
}

/* --------------------------------------------------------------------------
   Frises de la journée simulée (étape 6)
   -------------------------------------------------------------------------- */

.frise {
  display: grid;
  grid-template-columns: repeat(96, 1fr); /* 96 quarts d'heure dans 24 h */
  height: 1.5rem;
}

/* --------------------------------------------------------------------------
   Couleur de section

   Chaque section de l'application porte sa teinte : celle de son onglet dans la
   navigation se retrouve sur les titres de ses écrans. On sait où l'on est sans
   lire l'intitulé.

   Le choix d'une variable CSS plutôt que d'une classe Tailwind par teinte évite
   d'écrire la couleur dans trente-six gabarits — et de devoir les reprendre un
   par un le jour où une section change de couleur.
   -------------------------------------------------------------------------- */

.titre-section {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--teinte-section, #4338ca); /* indigo-700 par défaut */
}

/* Cartes. Le fond reste blanc sur fond de page clair ; seuls la bordure et
   l'entête prennent une pointe de la teinte de la section. « color-mix » évite
   d'écrire sept variantes de chaque nuance. */

.carte {
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--teinte-section, #4338ca) 22%, #e2e8f0);
  background-color: #fff;
}

.entete-carte {
  border-bottom: 1px solid color-mix(in srgb, var(--teinte-section, #4338ca) 18%, #e2e8f0);
  background-color: color-mix(in srgb, var(--teinte-section, #4338ca) 6%, #fff);
}

/* Bouton d'action principale. Il prend la teinte de la section : le bouton de
   l'écran Contrôles est violet, celui des Équipements ambre. Toutes les nuances
   « 700 » de la palette gardent un contraste suffisant avec du texte blanc. */

.bouton-primaire {
  background-color: var(--teinte-section, #4338ca);
  color: #fff;
}

.bouton-primaire:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--teinte-section, #4338ca) 86%, #000);
}