/* ==========================================================================
   04 - Gabarit des pages internes
   Lot 4. Cible (maquette SubPageLayout.tsx) :

     [fil d'Ariane]
     T |  Titre de la page          <- h1 texte, aligné à gauche
     i |  ____                      <- filet violet court, 64px
     t |
     r |  Résumé d'introduction. ■  <- carré violet 8x8
     e |
          [contenu]

   Aucune grande image en tête. Aucun titre posé sur une photo.
   ========================================================================== */

/* --- Conteneur injecté par le thème enfant -------------------------------- */

.lm-page-head {
  max-width: var(--lm-container);
  margin: 0 auto;
  padding-inline: 1rem;
}

.lm-page-title {
  text-align: left;
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  line-height: 1.2;
  margin: 0 0 .25rem;
}

/* --- Marqueur 5 : libellé vertical dans la marge gauche -------------------
   writing-mode + rotate(180deg) donne le même rendu qu'une rotation à
   -90 degrés, tout en gardant un texte sélectionnable et un flux correct.

   Le conteneur est en position: fixed plutôt qu'absolute : cela évite de
   dépendre du positionnement du wrapper du thème parent, qui n'est pas
   garanti en position: relative, et cela supprime tout risque de
   débordement horizontal. */

.lm-vlabel {
  position: fixed;
  left: max(1rem, calc((100vw - var(--lm-container)) / 2 - 3rem));
  top: 45vh;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  pointer-events: none;
  user-select: none;
}

.lm-vlabel::before,
.lm-vlabel::after {
  content: "";
  width: var(--lm-rule);
  height: 3.5rem;
  background: var(--lm-primary);
  opacity: .3;
}

.lm-vlabel span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--lm-primary);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: .02em;
  white-space: nowrap;
  max-height: 40vh;
  overflow: hidden;
}

/* Seuil d'affichage.

   La décision client était « masqué en dessous de 1024px ». Dans les faits, le
   libellé vit dans la marge gauche, hors du conteneur de contenu : à 1024px de
   large, il n'y a plus de marge du tout, puisque le conteneur fait déjà 1140px.
   Le libellé viendrait se superposer au texte. Le critère de recette « jamais
   superposé au contenu ni générateur de défilement horizontal » prime sur le
   seuil annoncé.

   Seuil réel calculé : largeur du conteneur, plus deux fois la place nécessaire
   au libellé et à son filet, soit 1140 + 2 x 80 = 1300px.
   ÉCART ASSUMÉ par rapport au 1024px du dossier, à signaler au client. */
@media (max-width: 1299px) {
  .lm-vlabel { display: none; }
}

/* --- Premier bloc de texte : filet vertical, marqueur 2 -------------------
   Sélecteur à valider sur trois pages types avant généralisation : la
   structure Elementor n'est pas identique partout. Il est volontairement
   limité aux pages internes (body:not(.home)). */

body:not(.home) .lm-intro,
body:not(.home) .elementor-widget-text-editor:first-of-type {
  border-left: var(--lm-rule) solid var(--lm-border);
  padding-left: 1.25rem;
}

/* --- Balise main injectée (optionnelle, voir LM_WRAP_MAIN) ---------------- */

.lm-main { display: block; }

/* --- Suppression des grandes images de tête -------------------------------
   Le client veut arriver directement sur le contenu : « il faudrait arriver
   directement sur la liste, sinon ça crée une confusion ».

   Liste à établir à l'inventaire, page par page. CHAQUE LIGNE DOIT ÊTRE
   COMMENTÉE avec le nom de la page : une règle non commentée est ingérable
   dans six mois.

   Ne pas masquer une image porteuse de sens éditorial (photo de Louis
   Massignon en tête de la biographie) sans en parler à Philippe.

   Forme attendue, à compléter après l'inventaire :

     .page-id-487 .elementor-element-XXXXXXX,    Figures, bandeau de tête
     .page-id-0000 .elementor-element-YYYYYYY {  nom de la page
       display: none;
     }
   -------------------------------------------------------------------------- */