/* ═════════════════════════════════════════════════════════════════════════
   FICHE OUTIL MJ — visuel à gauche, explication à droite

   Ne définit aucune couleur en dur : tout vient des tokens de eos.css.
   Le cadre, l'en-tête, le pied et les coins viennent de socle.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* La zone de contenu du cadre défile déjà (socle.css) ; c'est la colonne
   de droite qui doit défiler, pas la page entière. */
.terminal-frame > .page-wrap {
  overflow: hidden;
  padding: 18px 20px;
}

/* ─── GRILLE ────────────────────────────────────────────────────────────
   Le visuel prend une part fixe, la fiche le reste. `min-height: 0` sur
   les deux : sans lui, un enfant en overflow refuse de se comprimer et
   pousse la grille au-delà du cadre. */
.outil-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  height: 100%;
  min-height: 0;
}

/* ─── VISUEL ────────────────────────────────────────────────────────────
   Même vocabulaire que les bannières des accueils : un chrome technique
   au-dessus, un bezel en dessous. */
.outil-visuel {
  display: flex; flex-direction: column;
  min-height: 0;
}
.outil-visuel__chrome {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border: 1px solid var(--border-hairline);
  border-bottom: none;
  background: var(--panel-steel);
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-muted);
}
.outil-visuel__ref { color: var(--accent-un-blue); flex-shrink: 0; }

.outil-visuel__bezel {
  position: relative;
  flex: 1; min-height: 0;
  border: 1px solid var(--border-hairline);
  background: #000;
  overflow: hidden;
}
.outil-visuel__bezel img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
/* Image absente : le bezel garde sa place plutôt que de s'effondrer. */
.outil-visuel__bezel.is-vide::after {
  content: 'VISUEL INDISPONIBLE';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 3px;
  color: var(--text-faint);
}

/* Équerres du bezel, reprises des bannières. */
.ban-corner {
  position: absolute; width: 14px; height: 14px;
  border: 1px solid var(--accent-un-blue);
  opacity: 0.5; pointer-events: none;
}
.ban-corner.tl { top: 8px;    left: 8px;   border-right: none; border-bottom: none; }
.ban-corner.tr { top: 8px;    right: 8px;  border-left: none;  border-bottom: none; }
.ban-corner.bl { bottom: 8px; left: 8px;   border-right: none; border-top: none; }
.ban-corner.br { bottom: 8px; right: 8px;  border-left: none;  border-top: none; }

/* ─── FICHE ─────────────────────────────────────────────────────────────
   Trois rangs : en-tête et pied fixes, corps défilant entre les deux.
   Le bouton reste donc visible quelle que soit la longueur du texte. */
.outil-fiche {
  display: flex; flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border-hairline);
  background: var(--panel-steel);
}
.outil-fiche__entete {
  flex-shrink: 0;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border-hairline);
}
.outil-fiche__label {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.outil-fiche__nom {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent-ice);
}

.outil-fiche__corps {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
}
.outil-fiche__corps::-webkit-scrollbar { width: 8px; }
.outil-fiche__corps::-webkit-scrollbar-track { background: transparent; }
.outil-fiche__corps::-webkit-scrollbar-thumb {
  background: var(--border-hairline-bright);
  border-radius: 4px;
}

/* ─── TEXTE DE LA DESCRIPTION ───────────────────────────────────────── */
.doc-para {
  font-family: var(--font-body);
  font-size: 13px; line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.doc-para:last-child { margin-bottom: 0; }

.doc-titre {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent-un-blue);
  margin: 22px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-hairline);
}
.doc-titre:first-child { margin-top: 0; }
.doc-titre__num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  flex-shrink: 0;
}

/* ─── BOUTON D'ACCÈS ────────────────────────────────────────────────── */
/* Les deux boutons s'empilent plutôt que de se partager la ligne : côte à
   côte, « TÉLÉCHARGER LE DOCUMENT » prend sa largeur naturelle et casse
   « ACCÉDER À L'OUTIL » sur deux lignes — la colonne ne fait que la moitié
   du cadre. La pile respecte en prime la hiérarchie : l'outil d'abord,
   l'archive ensuite. */
.outil-fiche__pied {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--border-hairline);
}
.btn-acces {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 13px 20px;
  border: 1px solid var(--accent-un-blue);
  background: rgba(76, 143, 209, 0.08);
  color: var(--accent-ice);
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s, color 0.2s;
}
.btn-acces:hover {
  background: rgba(76, 143, 209, 0.18);
  box-shadow: 0 0 22px rgba(76, 143, 209, 0.3);
  color: var(--text-primary);
}
.btn-acces:focus-visible {
  outline: none;
  border-color: var(--accent-ice);
  box-shadow: 0 0 22px rgba(143, 217, 232, 0.4);
}
.btn-acces svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Outil annoncé mais pas encore livré (`url` vide en base) : le bouton perd
   sa couleur d'accent et son curseur, comme les entrées « À venir » du menu
   de l'accueil. Ce n'est pas un <a> : rien à désactiver, rien à intercepter. */
/* ── DOCUMENT JOINT ─────────────────────────────────────────────────────
   Second rôle : le visiteur vient pour l'outil, l'archive est un à-côté.
   D'où un bouton sans fond d'accent, qui ne dispute pas le regard au
   bouton d'accès mais reste de même hauteur — deux boutons de tailles
   différentes sur une même ligne se lisent comme une erreur. */
.btn-acces--doc {
  padding: 10px 20px;
  border-color: var(--border-hairline);
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px; letter-spacing: 2px;
  gap: 8px;
}
.btn-acces--doc:hover {
  border-color: var(--accent-ice);
  background: rgba(143, 217, 232, 0.06);
  box-shadow: none;
  color: var(--accent-ice);
}
.btn-acces__poids {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 400;
  letter-spacing: 1px;
  color: var(--text-faint);
  flex-shrink: 0;
}
.btn-acces--doc:hover .btn-acces__poids { color: var(--text-muted); }

.btn-acces--venir {
  border-color: var(--border-hairline);
  background: transparent;
  color: var(--text-faint);
  cursor: default;
}

/* ─── OUTIL INTROUVABLE ─────────────────────────────────────────────── */
.outil-vide {
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  text-align: center;
}
.outil-vide__icone { font-size: 40px; color: var(--accent-alert); opacity: 0.6; }
.outil-vide__titre {
  font-family: var(--font-display);
  font-size: 18px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--text-primary);
}
.outil-vide__texte {
  font-family: var(--font-body);
  font-size: 13px; color: var(--text-muted);
}
.outil-vide .btn-acces { width: auto; margin-top: 8px; }

/* ═════════════════════════════════════════════════════════════════════
   RÉDUCTION MOBILE — mêmes paliers que le reste du site
   ═══════════════════════════════════════════════════════════════════ */

/* Sous 900px la juxtaposition n'a plus de sens : les deux blocs passent en
   pile et c'est la page qui défile, plutôt qu'un texte en lucarne sous une
   image écrasée. Le corps de la fiche rend donc son défilement propre. */
@media (max-width: 900px) {
  .terminal-frame > .page-wrap { overflow-y: auto; }

  .outil-grille {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }
  .outil-visuel__bezel { aspect-ratio: 16 / 10; flex: none; }
  .outil-fiche__corps  { overflow-y: visible; }
  .outil-fiche__nom    { font-size: 22px; }
}

/* Le chrome technique du visuel n'apporte plus rien sur un écran étroit. */
@media (max-width: 640px) {
  .outil-visuel__chrome { display: none; }
  .outil-visuel__bezel  { border-top: 1px solid var(--border-hairline); }
  .outil-fiche__nom     { font-size: 19px; letter-spacing: 2px; }
  .btn-acces            { letter-spacing: 2px; font-size: 12px; }

  .btn-acces--doc { letter-spacing: 1px; }
}

/* Téléphone en paysage : le visuel se réduit en bande pour laisser la
   hauteur au texte et au bouton. */
@media (max-height: 460px) and (max-width: 900px) {
  .outil-visuel__bezel { aspect-ratio: 21 / 6; }
}