@charset "UTF-8";
/* ==========================================================================
   LX2028 — DOCUMENTS
   Feuille ADDITIVE, chargee APRES assets/css/lx2028.css et scopee comme elle
   sous .lx28. Elle ne redefinit aucune regle de la feuille mere : elle ajoute
   les seuls objets qui lui manquaient — l'en-tete court d'une page de texte,
   le corps de document juridique, le sommaire ancre, la barre de filtre et la
   grille de destinations de la page 404.

   REGLES TENUES (identiques a lx2028.css)
   - Aucun opacity:0, aucun visibility:hidden, aucun clip-path masquant : rien
     de ce qui porte du texte n'est invisible au repos.
   - Les !important presents ici ne servent QU'A battre le bouclier de
     lx2028.css, qui remet color / line-height / letter-spacing /
     text-transform en `inherit !important` sur h1..button. Aucun n'est
     decoratif, aucun n'est pose sur un selecteur d'element nu.
   - Aucun appel reseau : ni police, ni image, ni fond distant.
   ========================================================================== */

/* ==========================================================================
   1. EN-TETE COURT DE PAGE DE TEXTE — bandeau nuit, sans photo
      (pas de hero plein ecran : ces pages n'ont rien a montrer, seulement a
      dire. Le LCP est le H1 texte.)
   ========================================================================== */
/* PIEGE CONNU — le CSS critique de views/partials/header.php porte deux regles
   sur le SELECTEUR NU `header` (position:sticky, fond blanc, ombre, z-index
   1000) et une sur `nav` (display:flex, order:2, flex:1). Elles frappent tout
   <header> et tout <nav> de la page, y compris ceux de cette vue. Les trois
   blocs ci-dessous les neutralisent explicitement — c'est la raison des
   declarations qui pourraient sembler superflues (position, z-index,
   box-shadow, display, order, flex). */
.lx28 .lx28-tete {
  position: relative; isolation: isolate; overflow: hidden;
  z-index: 0;                       /* bat le z-index:1000 de `header {}` */
  box-shadow: none !important;      /* bat l'ombre de `header {}` */
  padding-block: clamp(3.25rem, 1.75rem + 5vw, 6rem) clamp(2.75rem, 1.75rem + 4vw, 5rem);
  background: var(--lx-noir) !important;
  border-bottom: 1px solid var(--lx-fil);
}
.lx28 .lx28-tete::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 8% 120%, rgba(201,172,116,.11) 0%, transparent 64%) !important;
}
.lx28 .lx28-tete::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--lx-grain); background-size: 180px;
  mix-blend-mode: overlay; opacity: .05;
}
.lx28 .lx28-tete > .lx28-conteneur { position: relative; z-index: 1; }
.lx28 .lx28-tete__col { max-width: 820px; }
.lx28 .lx28-tete .lx28-h1 { font-size: var(--lx-h2) !important; line-height: var(--lx-lh-h2) !important; letter-spacing: var(--lx-ls-h2) !important; }
.lx28 .lx28-tete--fort .lx28-h1 { font-size: var(--lx-h1) !important; line-height: var(--lx-lh-h1) !important; letter-spacing: var(--lx-ls-h1) !important; }
.lx28 .lx28-tete .lx28-badge { margin-bottom: var(--lx-5); }
.lx28 .lx28-tete .lx28-chapo { margin-top: var(--lx-5); max-width: 60ch; }
.lx28 .lx28-tete .lx28-filet { margin: var(--lx-5) 0; }
.lx28 .lx28-tete__actions { display: flex; flex-wrap: wrap; gap: var(--lx-4); margin-top: var(--lx-7); }

/* ==========================================================================
   2. CORPS DE DOCUMENT — le texte juridique, mesure large mais bornee
   ========================================================================== */
.lx28 .lx28-doc__grille { display: grid; gap: var(--lx-8); align-items: start; }
@media (min-width: 1000px) {
  .lx28 .lx28-doc__grille { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--lx-9); }
  .lx28 .lx28-sommaire { position: sticky; top: calc(var(--lx-6) + 56px); }
}

.lx28 .lx28-doc { max-width: 68ch !important; }
.lx28 .lx28-doc > * + * { margin-top: var(--lx-5) !important; }
.lx28 .lx28-doc > h2 + *, .lx28 .lx28-doc > h3 + * { margin-top: var(--lx-4) !important; }

.lx28 .lx28-doc h2 {
  margin-top: var(--lx-8) !important;
  padding-top: var(--lx-5);
  border-top: 1px solid var(--lx-fil-clair);
  font-size: clamp(1.1875rem, 1.05rem + .55vw, 1.5rem) !important;
  line-height: 1.25 !important;
  letter-spacing: .01em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--lx-encre) !important;
  scroll-margin-top: 96px;
}
.lx28 .lx28-doc > h2:first-child { margin-top: 0 !important; padding-top: 0; border-top: 0; }
.lx28 .lx28-doc h3 {
  margin-top: var(--lx-6) !important;
  font-size: var(--lx-corps) !important;
  line-height: 1.35 !important;
  letter-spacing: var(--lx-ls-badge) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--lx-or-clair) !important;
  scroll-margin-top: 96px;
}
.lx28 .lx28-doc p {
  font-size: 1.0625rem !important;
  line-height: 1.75 !important;
  color: var(--lx-encre-2) !important;
}
.lx28 .lx28-doc strong { color: var(--lx-encre) !important; font-weight: 600 !important; }
.lx28 .lx28-doc a {
  color: var(--lx-or-clair) !important;
  text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px;
}
@media (hover: hover) { .lx28 .lx28-doc a:hover { color: var(--lx-encre) !important; } }

.lx28 .lx28-doc ul { display: grid; gap: var(--lx-3); }
.lx28 .lx28-doc li {
  position: relative; padding-left: 1.75rem;
  font-size: 1.0625rem !important; line-height: 1.7 !important;
  color: var(--lx-encre-2) !important;
}
.lx28 .lx28-doc li::before {
  content: ""; position: absolute; left: .375rem; top: .8em;
  width: 5px; height: 5px; border-radius: var(--lx-r-pill);
  background: var(--lx-or-clair) !important;
}

/* ==========================================================================
   3. SOMMAIRE ANCRE — colonne de gauche, replie sous 1000 px
   ========================================================================== */
.lx28 .lx28-sommaire {
  /* Le sommaire est un <nav> : sans ces quatre lignes, la regle `nav {}` du CSS
     critique (display:flex; align-items:center; order:2; flex:1) le renvoyait
     en deuxieme colonne, etale sur toute la largeur, avec le mot « Sommaire »
     centre verticalement a cote de la liste. Constate a l'ecran le 12/08/2026. */
  display: block !important;
  order: 0 !important;
  flex: none !important;
  align-items: initial; justify-content: initial;
  padding: clamp(20px, 2vw, 28px) !important;
  background: var(--lx-clair-2) !important;
  border: 1px solid var(--lx-fil-clair);
  border-radius: var(--lx-r-carte);
}
.lx28 .lx28-sommaire__titre {
  font-size: var(--lx-badge) !important; font-weight: 600 !important;
  text-transform: uppercase !important; letter-spacing: var(--lx-ls-badge) !important;
  line-height: 1 !important; color: var(--lx-or-clair) !important;
  margin-bottom: var(--lx-5);
}
.lx28 .lx28-sommaire ol { display: grid; gap: var(--lx-1); counter-reset: lx-som; }
.lx28 .lx28-sommaire li { counter-increment: lx-som; }
.lx28 .lx28-sommaire a {
  display: flex; gap: var(--lx-3); align-items: baseline;
  padding: 10px 0; min-height: 44px;
  font-size: .9375rem !important; line-height: 1.4 !important;
  color: var(--lx-encre-2) !important;
  border-bottom: 1px solid var(--lx-fil-clair);
}
.lx28 .lx28-sommaire li:last-child a { border-bottom: 0; }
.lx28 .lx28-sommaire a::before {
  content: counter(lx-som, decimal-leading-zero);
  flex: none;
  font-family: var(--lx-serif) !important; font-style: italic !important;
  font-size: .9375rem !important; color: var(--lx-or-clair) !important;
  font-variant-numeric: lining-nums;
}
@media (hover: hover) { .lx28 .lx28-sommaire a:hover { color: var(--lx-encre) !important; } }

/* ==========================================================================
   4. PAGE 404 — code d'erreur, filtre, destinations
   ========================================================================== */
.lx28 .lx28-code {
  display: inline-flex; align-items: baseline; gap: var(--lx-3);
  font-family: var(--lx-serif) !important; font-style: italic !important; font-weight: 400 !important;
  font-size: clamp(3.25rem, 2rem + 5vw, 5.5rem) !important; line-height: 1 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: var(--lx-or) !important; font-variant-numeric: lining-nums tabular-nums;
  margin-bottom: var(--lx-4);
}
.lx28 .lx28-code small {
  font-family: var(--lx-sans) !important; font-style: normal !important;
  font-size: var(--lx-badge) !important; font-weight: 600 !important;
  text-transform: uppercase !important; letter-spacing: var(--lx-ls-badge) !important;
  color: var(--lx-ivoire-2) !important;
}

/* --- Barre de filtre : amelioration progressive. Sans JavaScript, la liste
       ci-dessous reste entiere, visible et cliquable. --- */
.lx28 .lx28-filtre { max-width: 40rem; margin-bottom: var(--lx-7); }
.lx28 .lx28-filtre label {
  display: block; margin-bottom: var(--lx-2);
  font-size: var(--lx-petit) !important; font-weight: 500 !important;
  color: var(--lx-encre-2) !important;
}
.lx28 .lx28-filtre input {
  width: 100%; min-height: 56px; padding: 0 16px;
  font-family: var(--lx-sans) !important; font-size: 1rem !important;
  color: var(--lx-encre) !important; background: var(--lx-clair) !important;
  border: 1px solid #B9AE93; border-radius: var(--lx-r-champ);
}
.lx28 .lx28-filtre input:focus { border-color: var(--lx-or-clair) !important; }
.lx28 .lx28-filtre ::placeholder { color: var(--lx-encre-3) !important; }
.lx28 .lx28-filtre__aide {
  margin-top: var(--lx-2);
  font-size: var(--lx-petit) !important; line-height: 1.6 !important;
  color: var(--lx-encre-3) !important;
}

/* --- Grille de destinations --- */
.lx28 .lx28-dest { display: grid; gap: var(--lx-3); }
@media (min-width: 700px)  { .lx28 .lx28-dest { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .lx28 .lx28-dest { grid-template-columns: repeat(3, 1fr); } }
.lx28 .lx28-dest a {
  display: flex; align-items: flex-start; gap: var(--lx-4);
  min-height: 64px; padding: var(--lx-4) var(--lx-5);
  background: var(--lx-clair-2) !important;
  border: 1px solid var(--lx-fil-clair);
  border-radius: var(--lx-r-media);
  transition: border-color var(--lx-t-micro) var(--lx-e-out),
              background-color var(--lx-t-micro) var(--lx-e-out);
}
@media (hover: hover) {
  .lx28 .lx28-dest a:hover { background: #E7E1D5 !important; border-color: #B9AE93; }
}
.lx28 .lx28-dest i {
  flex: none; margin-top: .1em;
  font-size: 20px !important; color: var(--lx-or-clair) !important;
}
.lx28 .lx28-dest__corps { display: block; min-width: 0; }
.lx28 .lx28-dest b {
  display: block;
  font-size: var(--lx-corps) !important; font-weight: 600 !important; line-height: 1.3 !important;
  color: var(--lx-encre) !important;
}
.lx28 .lx28-dest__note {
  display: block; margin-top: 3px;
  font-size: var(--lx-petit) !important; line-height: 1.55 !important;
  color: var(--lx-encre-2) !important;
}
.lx28 .lx28-etat {
  margin-top: var(--lx-4);
  font-size: var(--lx-petit) !important; color: var(--lx-encre-2) !important;
}

/* ==========================================================================
   5. PIED DE PAGE DE DOCUMENT — les trois textes du site, sur fond nuit
   ========================================================================== */
.lx28 .lx28-liens { display: grid; gap: var(--lx-3); }
@media (min-width: 760px) { .lx28 .lx28-liens { grid-template-columns: repeat(3, 1fr); } }
.lx28 .lx28-liens a {
  display: flex; align-items: center; gap: var(--lx-4);
  min-height: 64px; padding: var(--lx-4) var(--lx-5);
  background: var(--lx-cuir) !important;
  border: 1px solid var(--lx-fil);
  border-radius: var(--lx-r-media);
  font-size: .9375rem !important; font-weight: 500 !important;
  color: var(--lx-ivoire-2) !important;
  transition: border-color var(--lx-t-micro) var(--lx-e-out),
              color var(--lx-t-micro) var(--lx-e-out);
}
.lx28 .lx28-liens i { flex: none; font-size: 20px !important; color: var(--lx-or) !important; }
/* Respiration autour du sous-titre qui separe les deux rangees de liens :
   .lx28-h3 arrive avec margin:0 de la feuille mere. */
.lx28 .lx28-liens + .lx28-h3 { margin-top: var(--lx-8); }
.lx28 .lx28-h3 + .lx28-liens { margin-top: var(--lx-5); }
.lx28 .lx28-liens + .lx28-mentions { margin-top: var(--lx-7); }
@media (hover: hover) {
  .lx28 .lx28-liens a:hover { border-color: var(--lx-or-fil); color: var(--lx-ivoire) !important; }
}
.lx28 .lx28-maj {
  margin-top: var(--lx-7); padding-top: var(--lx-5);
  border-top: 1px solid var(--lx-fil-clair);
  font-size: var(--lx-petit) !important; color: var(--lx-encre-3) !important;
}

/* ==========================================================================
   6. IMPRESSION — un document juridique se lit aussi sur papier
   ========================================================================== */
@media print {
  .lx28 .lx28-tete { background: #fff !important; border-bottom: 1px solid #000; }
  .lx28 .lx28-tete::before, .lx28 .lx28-tete::after { display: none; }
  .lx28 .lx28-tete .lx28-h1 { color: #000 !important; }
  .lx28 .lx28-sommaire, .lx28 .lx28-filtre, .lx28 .lx28-dest, .lx28 .lx28-liens { display: none; }
  .lx28 .lx28-doc { max-width: none; }
  .lx28 .lx28-doc :is(h2, h3, p, li, strong, a) { color: #000 !important; }
}
