/* ============================================================
   PLANCHES ALIGNÉES SUR LE MENU — maquettes d'Ali (2026-10-05)
   Pages : architecture-technique, presentation-generale, maintenance,
   methode-deploiement ; + isoar-createur, laboratoire-analyses (maquettes du 2026-10-25).

   Ali a dessiné ses maquettes sur une capture du site à 1920px, sommaire
   ouvert : ses planches s'appuient sur les 4 cases du menu
   (Références | Services | Contact | Actualités). La carte de ces pages
   couvre déjà exactement ces 4 cases.

   Principe :
   - `.pa-stage` = la carte, dessinée à la RÉFÉRENCE 1920px (1286px de large
     intérieur). Les planches y sont placées en % (traits du menu centrés à
     24,92 % / 49,96 % / 75,08 %) → l'alignement tient quelle que soit l'échelle.
   - planches-menu.js met le stage à l'échelle de la carte (transform: scale,
     REGLES §9) et ajuste la hauteur des rangées à l'écran.
   - Écran trop étroit pour que les 4 colonnes donnent un texte lisible
     (< 90 % de la référence) → mode `pa-compact` : planche seule, centrée,
     décors latéraux masqués (décision Michal 2026-10-05).
   - Mobile (< 1100px) : planche en flux, mise à l'échelle par fit.js
     (data-fit-mobile) comme les autres planches.
   ============================================================ */
:root {
  --mondrian-slate: #B1B1BD;   /* gris de planche (REGLES 4-bis-bis) : portes + cellules grises */
  --mondrian-navy: #033080;    /* BLEU FONCÉ des textes d'Ali : mesuré sur ses 6 maquettes (moyenne de 56 000 px de texte,
                                  identique sur les 6). Demande Michal 2026-10-25 : PAS de noir pour le texte, ce bleu-là. */
}

.pa-card .chapter-fit { width: 100%; align-self: stretch; }
.pa-box { position: relative; width: 100%; overflow: hidden; }
.pa-stage {
  position: relative;
  width: 1286px;
  height: 800px;
  transform-origin: 0 0;
  font-family: Verdana, Geneva, sans-serif;
  color: var(--mondrian-navy);   /* texte par défaut des planches = bleu foncé d'Ali */
}
.pa-planche { position: absolute; top: 0; bottom: 0; box-sizing: border-box; }
.pa-compact .pa-planche { left: var(--pa-l) !important; width: var(--pa-w) !important; right: auto !important; }
.pa-compact .pa-deco { display: none !important; }

/* Mur vertical prolongeant un séparateur du menu jusqu'en bas de la carte.
   --pa-l1/2/3 et --pa-lw = position et épaisseur EXACTES des traits du menu, publiées par
   planches-menu.js (valeurs par défaut = celles mesurées à 1920 : bords gauches 318,5 / 641 / 963,5). */
.pa-wall { position: absolute; top: 0; bottom: 0; width: var(--pa-lw, 4px); background: var(--mondrian-black); }
.pa-wall--1 { left: var(--pa-l1, 318.5px); }
.pa-wall--2 { left: var(--pa-l2, 641px); }
.pa-wall--3 { left: var(--pa-l3, 963.5px); }

/* Liste à puces carrées rouges (maquettes) */
.pa-list { list-style: none; margin: 0; padding: 0; }
.pa-list li { position: relative; padding-left: 1.15em; }
.pa-list li::before {
  content: ""; position: absolute; left: 0.1em; top: 0.42em;
  width: 0.48em; height: 0.48em; background: var(--mondrian-red);
}

/* Desktop : la carte prend la hauteur calculée par planches-menu.js */
@media (min-width: 1100px) {
  .pa-card { height: var(--pa-card-h, auto) !important; min-height: 0 !important; justify-content: flex-start !important; }
  /* Mode ALIGNÉ : la carte se COLLE au menu, sans séparation (maquettes d'Ali) — même principe que les
     pages texte ≥1800px (chapter.css:234) : marge −4px ⇒ la bordure haute de la carte recouvre celle
     du menu. Mode compact : pas de collage (règle client du 2026-07-30). */
  body.has-book-nav:not(.menu-collapsed) .pa-card.pa-aligned { margin-top: -4px; }
}

/* Mobile : planche en flux, largeur fixe → fit.js la met à l'échelle de l'écran */
@media (max-width: 1099px) {
  .pa-stage { --pa-k: 0.92; }   /* planche en flux à sa taille de bureau, réduite ensuite par fit.js */
  .pa-box { overflow: visible; }
  .pa-stage { width: auto; height: auto !important; transform: none !important; }
  .pa-planche { position: relative; left: auto !important; right: auto !important; top: auto; bottom: auto; margin: 0 auto; }
  .pa-deco, .pa-wall { display: none !important; }
}