/* LimeOS — ce que les styles inline ne peuvent pas porter.

   Le site de reference gerait le survol en JavaScript (React useState + styles
   inline). Les pages etant desormais statiques, les memes transitions sont
   reproduites ici en CSS pur. Les valeurs viennent de components/buttons/Button.jsx
   et components/cards/Card.jsx. */

/* --- Boutons ---------------------------------------------------------- */
[data-btn]:not([data-btn-disabled]) { cursor: pointer; }

[data-btn="primary"]:not([data-btn-disabled]):hover {
  background: var(--accent-hover) !important;
}
[data-btn="secondary"]:not([data-btn-disabled]):hover {
  border-color: var(--border-hover) !important;
}
[data-btn="tertiary"]:not([data-btn-disabled]):hover {
  color: var(--text-accent) !important;
}
[data-btn]:not([data-btn-disabled]):hover [data-btn-arrow] {
  transform: translateX(var(--nudge-x)) !important;
}

/* --- Cartes ----------------------------------------------------------- */
[data-card-interactive]:hover {
  transform: translateY(var(--lift-sm)) !important;
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow-hover) !important;
}
[data-card-interactive][data-card-halo]:hover {
  box-shadow: var(--halo-lime-ring) !important;
}
[data-card-interactive][data-card-highlighted]:hover {
  border-color: var(--border-accent) !important;
}

/* --- Diagrammes de flux ------------------------------------------------ */
/* Les styles inline du composant ne peuvent pas porter de media query, et le
   flux reste donc sur une seule ligne a toute largeur : a 620 px « Production »
   est deja tronque, a 430 px les quatre libelles le sont (57 px de large pour
   105 px de texte). En dessous du seuil on empile les etapes et la fleche
   pivote. Les flux deja verticaux ne sont pas touches. */
@media (max-width: 860px) {
  [data-flow="horizontal"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  [data-flow="horizontal"] > div {
    flex: 0 0 auto !important;
    width: 100%;
  }
  /* La fleche "->" du composant devient une fleche vers le bas par simple
     rotation : aucun echappement CSS a maintenir, couleur conservee. */
  [data-flow="horizontal"] > [data-flow-arrow] {
    /* align-self: center est indispensable — sans lui le conteneur en colonne
       etire la fleche sur toute la largeur et la rotation peint une barre de
       la hauteur de la colonne. */
    align-self: center;
    display: inline-block;
    transform: rotate(90deg);
  }
}

/* --- Mentions legales -------------------------------------------------- */
/* Les lignes libelle/valeur (mentions legales, reference d'API) sont des
   grilles 2 colonnes dont la premiere est figee : sous 640 px il ne reste plus
   rien pour la valeur et la page deborde. On empile. */
@media (max-width: 640px) {
  [data-legal-row],
  [data-api-row] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-1) !important;
  }
}

/* --- Documents juridiques ----------------------------------------------- */
/* Les textes importes contiennent des URL longues et insecables (jusqu'a 47
   caracteres) : sans cette regle, a 360 px la note editoriale deborde et
   entraine toute la page avec elle. */
[data-legal-doc] { overflow-wrap: break-word; }

/* --- Carrousel des captures ------------------------------------------- */
/* La barre de defilement du carrousel doublerait la pagination : on la cache,
   sans desactiver le defilement lui-meme (glissement, molette, clavier). */
[data-carrousel-piste] { scrollbar-width: none; -ms-overflow-style: none; }
[data-carrousel-piste]::-webkit-scrollbar { display: none; }
[data-carrousel-barre] button {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  color: var(--text-secondary);
  background: var(--surface-page);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
[data-carrousel-barre] button:hover {
  color: var(--text-accent);
  border-color: var(--border-accent);
}

/* --- Loupe des captures ----------------------------------------------- */
[data-loupe] {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-6);
  background: rgba(7, 27, 18, 0.9);
  cursor: zoom-out;
}
[data-loupe-image] {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  width: auto; height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);
  cursor: default;
}
[data-loupe-legende] {
  margin: 0;
  max-width: 78ch;
  text-align: center;
  font-size: var(--text-small);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.72);
}
[data-loupe-fermer] {
  position: absolute;
  top: var(--space-5); right: var(--space-5);
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  color: var(--text-on-dark);
  background: rgba(255, 255, 255, 0.08);
  border: var(--border-width) solid var(--border-on-dark);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
[data-loupe-fermer]:hover {
  color: var(--lime-400);
  border-color: var(--border-accent);
}

/* --- Chips de filtre -------------------------------------------------- */
[data-chip-row] button:hover { color: var(--text-accent) !important; }

/* --- Confort ---------------------------------------------------------- */
img { max-width: 100%; }
[data-app-detail] { animation: limeSlideIn var(--duration, .2s) var(--ease-out, ease-out); }
@keyframes limeSlideIn { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}