/* =============================================================================
   Manuel d'utilisation.

   Une page unique, hors de l'application mais sur ses jetons : elle charge
   app.css et hérite donc du thème, du clair comme du sombre. Le lecteur qui
   passe l'application en nuit ne doit pas recevoir une page blanche en pleine
   figure quand il ouvre le manuel.

   Elle n'a PAS de barre latérale d'application : c'est un document, pas un
   écran. Son propre sommaire tient sa place.
   ============================================================================= */

body.manuel {
  /* Le corps d'app.css est en flex pour la coquille ; ici c'est un document. */
  display: block;
  background: var(--fond);
  color: var(--texte);
}

.saut {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--texte);
  padding: 10px 16px; border-radius: var(--r-md); z-index: 100;
}
.saut:focus { left: 12px; top: 12px; }

/* --- En-tete ---------------------------------------------------------------- */
.man-tete {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 28px;
  background: var(--voile-entete);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bord);
}
.man-tete__marque { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.man-tete__logo {
  width: 36px; height: 36px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--sable-300), var(--ocre-500));
  color: var(--olive-900); font-weight: 750; font-size: .84rem;
}
.man-tete__nom { font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; }
.man-tete__nom em { font-style: normal; color: var(--ocre-500); }
.man-tete__bl { font-size: .8rem; color: var(--texte-3); }

/* --- Deux colonnes ---------------------------------------------------------- */
.man-corps {
  display: grid; grid-template-columns: 288px minmax(0, 1fr);
  gap: 32px; max-width: 1240px; margin: 0 auto;
  padding: 26px 28px 80px;
  align-items: start;
}

/* --- Sommaire --------------------------------------------------------------- */
.man-sommaire {
  position: sticky; top: 82px;
  /* Il défile seul quand le plan dépasse la fenêtre : sans cela, chercher un
     titre en fin de plan obligerait à faire défiler tout le document. */
  max-height: calc(100vh - 108px); overflow-y: auto;
  padding-right: 6px;
}
.man-recherche { margin-bottom: 14px; }
.man-recherche .saisie { width: 100%; }
.man-recherche__etat { margin-top: 7px; min-height: 1.2em; }

.man-plan__rubrique {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texte-3); margin: 16px 0 6px; padding: 0 10px;
}
.man-plan__rubrique:first-child { margin-top: 0; }
.man-plan__lien {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; border: 0; background: none; border-radius: var(--r-sm);
  font: inherit; font-size: .89rem; color: var(--texte-2);
  cursor: pointer; line-height: 1.35;
}
.man-plan__lien:hover { background: var(--surface-2); color: var(--texte); }
.man-plan__lien.actif {
  background: var(--surface-accent); color: var(--accent-texte); font-weight: 600;
}
/* La rubrique d'origine, rappelée sous le titre pendant une recherche : sans
   elle, on trouverait « Le devis » sans savoir de quel écran il dépend. */
.man-plan__origine {
  display: block; font-size: .72rem; color: var(--texte-3); font-weight: 500;
  margin-top: 2px;
}
.man-plan__admin { color: var(--texte-3); font-weight: 500; font-size: .82em; }
.man-plan__vide { padding: 10px; font-size: .86rem; color: var(--texte-3); }

/* --- Contenu ---------------------------------------------------------------- */
.man-contenu { min-width: 0; }

.man-sec {
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--r-lg); padding: 26px 30px; margin-bottom: 20px;
  /* Le titre ne doit pas se coller sous l'en-tête collante quand on saute
     directement à une section. */
  scroll-margin-top: 92px;
}
.man-sec[hidden] { display: none; }
.man-sec h2 {
  font-size: 1.45rem; margin: 0 0 4px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
}
.man-sec h3 {
  font-size: 1.05rem; margin: 26px 0 8px;
  padding-top: 16px; border-top: 1px solid var(--bord);
}
.man-sec h3:first-of-type { border-top: 0; padding-top: 0; }
.man-sec h4 { font-size: .95rem; margin: 18px 0 6px; color: var(--texte-2); }
.man-sec p { margin: 0 0 12px; max-width: 72ch; }
.man-sec ul, .man-sec ol { margin: 0 0 14px; padding-left: 1.2em; max-width: 72ch; }
.man-sec li { margin-bottom: 7px; }

.man-sous {
  color: var(--texte-3); font-size: .92rem; margin-top: 0 !important;
  margin-bottom: 16px !important;
}
.man-badge {
  font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px;
  background: var(--olive-fond); color: var(--olive-texte);
}
.man-sec--admin { border-left: 3px solid var(--olive-600); }

/* Un point qui compte, sans être une alerte. */
.man-note {
  background: var(--info-fond); border: 1px solid var(--info-bord);
  color: var(--info-texte);
  border-radius: var(--r-md); padding: 12px 15px;
  font-size: .9rem; max-width: 72ch;
}

/* La couche « métier » : le lecteur qui connaît le bâtiment la saute. */
.man-notion {
  border-left: 3px solid var(--bord-fort); background: var(--surface-2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 13px 16px; margin: 16px 0; max-width: 72ch;
}
.man-notion h4 {
  margin: 0 0 5px; font-size: .8rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--texte-3);
}
.man-notion p { margin: 0; font-size: .9rem; }

.m {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .86em; background: var(--surface-2);
  padding: 1px 5px; border-radius: 4px;
}

/* --- Tableaux --------------------------------------------------------------- */
.man-tab {
  width: 100%; border-collapse: collapse; margin: 0 0 16px;
  font-size: .9rem; display: block; overflow-x: auto;
}
.man-tab thead, .man-tab tbody { display: table; width: 100%; }
.man-tab th {
  text-align: left; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--texte-3);
  padding: 9px 12px; border-bottom: 1px solid var(--bord-fort); white-space: nowrap;
}
.man-tab td {
  padding: 10px 12px; border-bottom: 1px solid var(--bord); vertical-align: top;
}
.man-tab tbody tr:last-child td { border-bottom: 0; }
.man-tab td:first-child { font-weight: 600; white-space: nowrap; }

/* --- Surlignage des mots cherchés ------------------------------------------- */
mark.man-trouve {
  background: var(--sable-200); color: var(--olive-900);
  padding: 0 2px; border-radius: 3px;
}

/* --- Pied ------------------------------------------------------------------- */
.man-pied {
  border-top: 1px solid var(--bord); padding: 22px 28px 40px;
  text-align: center; font-size: .84rem; color: var(--texte-3);
}
.man-pied p { max-width: 62ch; margin: 0 auto; }

/* --- Téléphone -------------------------------------------------------------- */
@media (max-width: 900px) {
  .man-corps { grid-template-columns: 1fr; gap: 18px; padding: 18px 16px 60px; }
  /* Le sommaire cesse d'être collant : sur un écran haut de 812 px, une colonne
     figée mangerait la moitié de la lecture. */
  .man-sommaire {
    position: static; max-height: none; overflow: visible;
    background: var(--surface); border: 1px solid var(--bord);
    border-radius: var(--r-lg); padding: 16px;
  }
  .man-tete { padding: 12px 16px; }
  .man-tete__bl { display: none; }
  .man-sec { padding: 20px 18px; border-radius: var(--r-md); }
  .man-sec h2 { font-size: 1.25rem; }
}

/* --- Impression ------------------------------------------------------------- */
@media print {
  .man-tete, .man-sommaire, .saut { display: none; }
  .man-corps { display: block; max-width: none; padding: 0; }
  .man-sec {
    border: 0; border-bottom: 1px solid #999; border-radius: 0;
    padding: 0 0 16px; margin-bottom: 18px; break-inside: avoid;
  }
  .man-sec[hidden] { display: block; }   /* on imprime TOUT, pas le filtre */
  .man-note, .man-notion { border: 1px solid #999; background: none; }
  body.manuel { background: #fff; color: #000; font-size: 11pt; }
}