/* ===========================================================================
   LE BANDEAU DES PAGES JURIDIQUES — 26/10/2026

   Une photo par page, un voile marine plus dense à gauche, le logo et le titre
   posés dessus.

   **CHARTE** : marine #132032, crème #F9F5F0, or clair #B8860B. Le bandeau
   d'avant tirait sur un `rgba(28, 81, 128, …)` qui n'était d'aucune charte.
   **Aucun fond noir** : le voile est un marine transparent.

   **AUCUNE ANIMATION.** Rien ne bouge, rien n'apparaît en fondu. Un bandeau
   qui s'allume après coup décale la lecture d'une page qu'on vient consulter
   pour un point précis.

   **CLS NUL** : la hauteur du bandeau est fixée, et la photo est absolue,
   hors du flux.
   =========================================================================== */

.hj {
  --hj-marine: #132032;
  --hj-creme: #F9F5F0;
  --hj-or-clair: #B8860B;

  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* **LA HAUTEUR EST RÉSERVÉE**, elle ne dépend pas de l'image : 360 px, et
     `min-height` plutôt qu'une hauteur fixe pour que la phrase sous le titre
     ne soit jamais coupée dans une langue qui l'écrit plus longue. */
  min-height: 360px;
  padding: 32px 0;
  /* L'en-tête est en `position: fixed`, haut de 80 px : sans cette marge, il
     recouvre le logo. */
  margin-top: 80px;
  /* Le marine se voit le temps que la photo arrive — jamais un blanc qui
     clignote. */
  background: var(--hj-marine);
}

.hjPhoto {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Les quatre scènes ont leur sujet dans la moitié droite : accueil, balcon,
     conciergerie, terrasse. Le cadrage le garde quand le bandeau est plus
     étroit que l'image. */
  object-position: 72% center;
}

.hjVoile {
  position: absolute;
  inset: 0;
  z-index: 1;
  /*
   * **DENSE À GAUCHE, CLAIR À DROITE.** 85 % là où se lit le titre, 48 % là où
   * la scène se devine. Du marine, pas du noir.
   *
   * **LE PLATEAU À 85 % VA JUSQU'À 55 %, ET NON 30 %**, parce que la phrase
   * sous le titre est large de 46 rem : à 1 440 px elle finit vers 59 % de la
   * largeur. Avec la première rampe, sa fin tombait sur un voile à 0,66 — et
   * sur un fond blanc (un rideau en plein soleil, une veste de cuisinier) le
   * rapport de contraste descendait à 4,4:1. Le calcul est au § 4 du compte
   * rendu.
   */
  background:
    linear-gradient(90deg,
      rgba(19, 32, 50, 0.85) 0%,
      rgba(19, 32, 50, 0.85) 55%,
      rgba(19, 32, 50, 0.70) 78%,
      rgba(19, 32, 50, 0.48) 100%);
}

.hjTexte {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.hjLogo {
  display: block;
  width: 120px;
  /* `auto` sur un fichier de 800 × 693 : 104 px de haut. La place est connue
     d'avance par `width`/`height` sur la balise — rien ne se décale. */
  height: auto;
  margin-bottom: 16px;
}

.hjTitre {
  margin: 0;
  font-family: 'Playfair Display', 'Antic Didone', Georgia, serif;
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--hj-creme);
}

.hjSous {
  max-width: 46rem;
  margin: 16px 0 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(249, 245, 240, 0.92);
}

.hjDate {
  margin: 16px 0 0;
  font-size: 0.95rem;
  /* Crème à 82 % sur un voile à 85 % de marine : le rapport reste très
     au-dessus de 4,5:1. */
  color: rgba(249, 245, 240, 0.82);
}

/* --- téléphone ------------------------------------------------------------ */

@media (max-width: 900px) {
  .hj {
    min-height: 240px;
    padding: 24px 0;
    margin-top: 80px;
  }

  .hjTexte {
    padding: 0 16px;
  }

  .hjLogo {
    width: 80px;
    margin-bottom: 8px;
  }

  .hjTitre {
    font-size: 1.5rem;
  }

  /* **LE VOILE DEVIENT VERTICAL SOUS 900 PX.** En colonnes, le titre occupe
     toute la largeur : le dégradé gauche-droite le laisserait finir sur la
     partie claire. */
  .hjVoile {
    background:
      linear-gradient(180deg,
        rgba(19, 32, 50, 0.78) 0%,
        rgba(19, 32, 50, 0.86) 55%,
        rgba(19, 32, 50, 0.92) 100%);
  }

  .hjSous {
    margin-top: 8px;
    font-size: 0.92rem;
  }

  .hjDate {
    margin-top: 8px;
    font-size: 0.85rem;
  }
}