/*!
 * legal.css — Habillage des composants juridiques LFL :
 *   cookie-consent-banner, legal-acceptance-dialog, legal-page.
 *
 * Feuille SEPAREE et chargee par les composites eux-memes. Raison mesuree :
 * auth-template.xhtml ne charge PAS lions-core.css, et c'est pourtant le gabarit
 * des pages qu'un visiteur anonyme traverse. Un bandeau de cookies style dans
 * lions-core.css y serait nu. landing.css est le precedent d'une feuille par
 * sujet.
 *
 * Couleurs prises aux variables du theme (surface-*, text-color, primary-color) :
 * le mode sombre est alors gratuit, il vient du theme -dark.
 *
 * Aucun debordement par construction : le bandeau est borne a 85vh et defile,
 * le panneau des finalites a 40vh, la zone de lecture du dialogue a
 * --lions-legal-texte-max-height (48vh par defaut, posee par le composite).
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BANDEAU DE CONSENTEMENT AUX COOKIES
   ═══════════════════════════════════════════════════════════════════════════ */

.lions-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--lions-cookie-banner-z, 1200);
  box-sizing: border-box;
  max-height: 85vh;
  max-height: 85dvh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1rem;
  background: var(--surface-overlay, #ffffff);
  color: var(--text-color, #1f2937);
  border-top: 1px solid var(--surface-border, #e5e7eb);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .14);
}

.lions-cookie-banner[hidden] {
  display: none;
}

.lions-cookie-banner:focus {
  outline: none;
}

.lions-cookie-banner:focus-visible {
  outline: 2px solid var(--primary-color, #2563eb);
  outline-offset: -4px;
}

.lions-cookie-banner__inner {
  box-sizing: border-box;
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.lions-cookie-banner__titre {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.lions-cookie-banner__message {
  margin: 0;
  max-width: 70ch;
  line-height: 1.55;
  color: var(--text-color-secondary, #6b7280);
}

.lions-cookie-banner__liens {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  font-size: .875rem;
}

/* ── Panneau « Personnaliser » ─────────────────────────────────────────────── */

.lions-cookie-banner__panel {
  box-sizing: border-box;
  max-height: 40vh;
  overflow-y: auto;
  display: grid;
  gap: .625rem;
  padding: .75rem;
  border: 1px solid var(--surface-border, #e5e7eb);
  border-radius: var(--border-radius, 6px);
  background: var(--surface-ground, #f8fafc);
}

.lions-cookie-banner__panel[hidden] {
  display: none;
}

.lions-cookie-purpose {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: .25rem .5rem;
}

/* Une finalite obligatoire n'a pas de case : son libelle occupe la 1re colonne. */
.lions-cookie-purpose > .lions-cookie-purpose__libelle:first-child {
  grid-column: 1 / 3;
}

/* Cibles de pointage : WCAG 2.2, critere 2.5.8, demande 24x24 px CSS. Une case native
   de 14 px (valeur mesuree avec la seule taille par defaut du navigateur) n'y suffit pas ;
   la case est donc portee a 18 px et l'etiquette, qui coche aussi, occupe au moins 24 px
   de haut. C'est elle qui porte la cible conforme. */
.lions-cookie-purpose__case {
  margin: 0;
  width: 18px;
  height: 18px;
  /* La rangee est alignee sur la ligne de base pour les libelles de deux lignes ; la case,
     elle, se centre dans sa cellule — mesure : 3,5 px d'ecart corriges. */
  align-self: center;
  accent-color: var(--primary-color, #2563eb);
}

.lions-cookie-purpose__libelle {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-weight: 600;
}

label.lions-cookie-purpose__libelle {
  cursor: pointer;
}

.lions-cookie-purpose__toujours {
  grid-column: 3;
  justify-self: end;
  font-size: .75rem;
  font-weight: 600;
  padding: .125rem .5rem;
  border-radius: 999px;
  background: var(--color-info-bg, #eff6ff);
  color: var(--color-info, #1d4ed8);
  white-space: nowrap;
}

.lions-cookie-purpose__description {
  grid-column: 2 / -1;
  color: var(--text-color-secondary, #6b7280);
  line-height: 1.45;
}

.lions-cookie-banner__panel-actions {
  display: flex;
  justify-content: flex-end;
}

/* ── Barre de choix ────────────────────────────────────────────────────────────
   « Tout refuser » et « Tout accepter » portent la MEME classe et la meme
   severite : le refus doit etre aussi facile que l'acceptation. Ne pas donner
   ici de poids visuel a l'un des deux. */

.lions-cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
}

.lions-cookie-banner__customize {
  margin-right: auto;
}

.lions-cookie-banner .lions-cookie-banner__choice {
  min-width: 11rem;
}

@media (max-width: 575px) {
  .lions-cookie-banner {
    padding: .75rem;
  }

  .lions-cookie-banner__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .lions-cookie-banner__customize {
    margin-right: 0;
    order: 3;
  }

  .lions-cookie-banner .lions-cookie-banner__choice,
  .lions-cookie-banner .lions-cookie-banner__customize {
    width: 100%;
    min-width: 0;
  }

  .lions-cookie-purpose {
    grid-template-columns: auto 1fr;
  }

  .lions-cookie-purpose__toujours {
    grid-column: 2;
    justify-self: start;
  }
}

@media print {
  .lions-cookie-banner {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FENETRE D'ACCEPTATION
   ═══════════════════════════════════════════════════════════════════════════ */

/* Filet de securite en CSS : p:dialog recoit une largeur en pixels (760 par defaut) et
   c'est le JavaScript de PrimeFaces qui la ramene a l'ecran (responsive, fitViewport).
   Mesure faite sur 360x640 et 390x844 : sans cette borne, le document deborde
   horizontalement de 414 px et 384 px tant que ce script n'a pas tourne. La borne la
   rend vraie en CSS, donc des la premiere image. */
.lions-legal-dialog {
  max-width: 96vw;
}

.lions-legal-dialog .ui-dialog-content {
  padding-top: .75rem;
}

.lions-legal-doc__meta {
  margin: 0 0 .75rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  font-size: .875rem;
  color: var(--text-color-secondary, #6b7280);
}

.lions-legal-doc__version {
  font-weight: 700;
  color: var(--text-color, #1f2937);
}

.lions-legal-doc__sep {
  opacity: .45;
}

/* La zone de lecture defile : le dialogue ne grandit pas avec le texte.
   tabindex=0 est pose par le composite — une zone defilante doit l'etre au
   clavier, pas seulement a la molette. */
.lions-legal-doc__texte {
  box-sizing: border-box;
  max-height: var(--lions-legal-texte-max-height, 48vh);
  overflow-x: hidden;
  overflow-y: auto;
  padding: .875rem 1rem;
  border: 1px solid var(--surface-border, #e5e7eb);
  border-radius: var(--border-radius, 6px);
  background: var(--surface-ground, #f8fafc);
  line-height: 1.6;
  overflow-wrap: break-word;
}

.lions-legal-doc__texte:focus-visible {
  outline: 2px solid var(--primary-color, #2563eb);
  outline-offset: 2px;
}

/* Un texte non balise garde ses retours a la ligne. */
.lions-legal-doc__texte--brut {
  white-space: pre-line;
}

.lions-legal-dialog__messages {
  display: block;
  margin: .75rem 0 0 0;
}

.lions-legal-dialog__consent {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .875rem 0 0 0;
}

.lions-legal-dialog__consent label {
  margin: 0;
  line-height: 1.5;
  cursor: pointer;
}

.lions-legal-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1rem;
}

@media (max-width: 575px) {
  .lions-legal-dialog__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE LEGALE
   ═══════════════════════════════════════════════════════════════════════════ */

.lions-legal-page {
  box-sizing: border-box;
  display: block;
  max-width: 76ch;
  margin: 0 auto;
  padding: 0 0 2rem 0;
  color: var(--text-color, #1f2937);
}

.lions-legal-page__header {
  padding-bottom: .875rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--surface-border, #e5e7eb);
}

.lions-legal-page__titre {
  margin: 0 0 .5rem 0;
  font-size: 1.6rem;
  line-height: 1.25;
}

.lions-legal-page__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem .75rem;
  font-size: .875rem;
  color: var(--text-color-secondary, #6b7280);
}

/* Version et date d'entree en vigueur sont rendues sans condition : une page
   legale qui ne dit pas de quelle version elle est n'est opposable a personne. */
.lions-legal-page__badge {
  font-weight: 700;
  padding: .125rem .5rem;
  border-radius: 999px;
  background: var(--primary-color, #2563eb);
  color: var(--primary-color-text, #ffffff);
  white-space: nowrap;
}

.lions-legal-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .875rem;
}

.lions-legal-page__body {
  line-height: 1.7;
  overflow-wrap: break-word;
}

.lions-legal-page__body--brut {
  white-space: pre-line;
}

.lions-legal-page__body h2 {
  font-size: 1.2rem;
  margin: 1.75rem 0 .5rem 0;
}

.lions-legal-page__body h3 {
  font-size: 1.05rem;
  margin: 1.25rem 0 .375rem 0;
}

.lions-legal-page__body p,
.lions-legal-page__body ul,
.lions-legal-page__body ol {
  margin: 0 0 .875rem 0;
}

.lions-legal-page__body table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.lions-legal-page__body td,
.lions-legal-page__body th {
  border: 1px solid var(--surface-border, #e5e7eb);
  padding: .375rem .5rem;
  text-align: left;
}

/* ── Texte mis en forme (format HTML du socle juridique) ───────────────────────
   Le balisage est celui de Quill 2 (p:textEditor de PrimeFaces 15), reduit par le
   socle a BalisageAutorise : p, br, strong/b, em/i, u, s, h1-h4, ol/ul/li,
   blockquote, et les classes ql-align-* / ql-indent-N. Hors de .ql-editor, la
   feuille de Quill ne s'applique pas : sans les regles ci-dessous, une liste a
   puces s'affiche numerotee (Quill ecrit les DEUX sortes en <ol>, la sorte est
   portee par data-list sur chaque <li>), et alignement et retrait sont perdus.
   Memes regles pour la page et pour la zone de lecture du dialogue d'acceptation :
   les deux rendent les memes textes. Le rendu brut (--brut) n'est pas concerne. */

.lions-legal-page__body h1,
.lions-legal-doc__texte h1 {
  font-size: 1.35rem;
  margin: 1.75rem 0 .625rem 0;
}

.lions-legal-doc__texte h2 {
  font-size: 1.2rem;
  margin: 1.5rem 0 .5rem 0;
}

.lions-legal-doc__texte h3 {
  font-size: 1.05rem;
  margin: 1.25rem 0 .375rem 0;
}

.lions-legal-page__body h4,
.lions-legal-doc__texte h4 {
  font-size: 1rem;
  margin: 1rem 0 .375rem 0;
}

.lions-legal-doc__texte p,
.lions-legal-doc__texte ul,
.lions-legal-doc__texte ol {
  margin: 0 0 .75rem 0;
}

.lions-legal-page__body ol,
.lions-legal-page__body ul,
.lions-legal-doc__texte ol,
.lions-legal-doc__texte ul {
  padding-left: 1.75rem;
}

.lions-legal-page__body li,
.lions-legal-doc__texte li {
  margin: 0 0 .25rem 0;
}

/* La sorte d'une liste Quill est sur l'element, pas sur la liste. */
.lions-legal-page__body li[data-list="bullet"],
.lions-legal-doc__texte li[data-list="bullet"] {
  list-style-type: disc;
}

.lions-legal-page__body li[data-list="ordered"],
.lions-legal-doc__texte li[data-list="ordered"] {
  list-style-type: decimal;
}

.lions-legal-page__body blockquote,
.lions-legal-doc__texte blockquote {
  margin: 0 0 .875rem 0;
  padding: .25rem 0 .25rem 1rem;
  border-left: 4px solid var(--surface-border, #e5e7eb);
  color: var(--text-color-secondary, #6b7280);
}

.lions-legal-page__body .ql-align-center,
.lions-legal-doc__texte .ql-align-center {
  text-align: center;
}

.lions-legal-page__body .ql-align-right,
.lions-legal-doc__texte .ql-align-right {
  text-align: right;
}

.lions-legal-page__body .ql-align-justify,
.lions-legal-doc__texte .ql-align-justify {
  text-align: justify;
}

/* Retrait : 3em par niveau, la convention de Quill. Un element de liste se decale par sa
   MARGE : sa puce (marqueur exterieur) suit alors le texte, ce qu'un retrait interne ne
   ferait pas. Limite connue : la numerotation native ne repart pas a 1 par niveau de
   retrait, comme le fait Quill avec ses compteurs. */
.lions-legal-page__body .ql-indent-1,
.lions-legal-doc__texte .ql-indent-1 {
  padding-left: 3em;
}

.lions-legal-page__body li.ql-indent-1,
.lions-legal-doc__texte li.ql-indent-1 {
  padding-left: 0;
  margin-left: 3em;
}

.lions-legal-page__body .ql-indent-2,
.lions-legal-doc__texte .ql-indent-2 {
  padding-left: 6em;
}

.lions-legal-page__body li.ql-indent-2,
.lions-legal-doc__texte li.ql-indent-2 {
  padding-left: 0;
  margin-left: 6em;
}

.lions-legal-page__body .ql-indent-3,
.lions-legal-doc__texte .ql-indent-3 {
  padding-left: 9em;
}

.lions-legal-page__body li.ql-indent-3,
.lions-legal-doc__texte li.ql-indent-3 {
  padding-left: 0;
  margin-left: 9em;
}

.lions-legal-page__body .ql-indent-4,
.lions-legal-doc__texte .ql-indent-4 {
  padding-left: 12em;
}

.lions-legal-page__body li.ql-indent-4,
.lions-legal-doc__texte li.ql-indent-4 {
  padding-left: 0;
  margin-left: 12em;
}

.lions-legal-page__body .ql-indent-5,
.lions-legal-doc__texte .ql-indent-5 {
  padding-left: 15em;
}

.lions-legal-page__body li.ql-indent-5,
.lions-legal-doc__texte li.ql-indent-5 {
  padding-left: 0;
  margin-left: 15em;
}

.lions-legal-page__body .ql-indent-6,
.lions-legal-doc__texte .ql-indent-6 {
  padding-left: 18em;
}

.lions-legal-page__body li.ql-indent-6,
.lions-legal-doc__texte li.ql-indent-6 {
  padding-left: 0;
  margin-left: 18em;
}

.lions-legal-page__body .ql-indent-7,
.lions-legal-doc__texte .ql-indent-7 {
  padding-left: 21em;
}

.lions-legal-page__body li.ql-indent-7,
.lions-legal-doc__texte li.ql-indent-7 {
  padding-left: 0;
  margin-left: 21em;
}

.lions-legal-page__body .ql-indent-8,
.lions-legal-doc__texte .ql-indent-8 {
  padding-left: 24em;
}

.lions-legal-page__body li.ql-indent-8,
.lions-legal-doc__texte li.ql-indent-8 {
  padding-left: 0;
  margin-left: 24em;
}

.lions-legal-page__complement {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--surface-border, #e5e7eb);
}

.lions-legal-page__footer {
  margin-top: 1.5rem;
  font-size: .8125rem;
  color: var(--text-color-secondary, #6b7280);
}

@media print {
  .lions-legal-page {
    max-width: none;
  }

  .lions-legal-page__actions {
    display: none !important;
  }
}

/* Le contenu reste present ; le mouvement devient stationnaire. */
@media (prefers-reduced-motion: reduce) {
  .lions-cookie-banner,
  .lions-legal-doc__texte {
    transition: none;
    animation: none;
    scroll-behavior: auto;
  }
}