/*
 * LCB Patrimoine, CSS partagee par les pages legales
 * (template-mentions-legales.php et template-politique-de-confidentialite.php).
 * Chargee uniquement sur ces deux gabarits (voir lcb_enqueue_assets() dans
 * functions.php), pour ne pas alourdir les autres pages avec du CSS qui
 * ne les concerne pas. Meme workflow append-only que
 * lcb-patrimoine-contact.css : ne jamais reecrire ce fichier en entier,
 * ajouter un nouveau bloc a la fin avec une entree de changelog qui
 * explique le pourquoi.
 *
 * Les variables de marque (:root) vivent dans style.css. Les classes
 * partagees avec le reste du site (.section, .section-inner, .eyebrow,
 * .reveal...) vivent dans lcb-patrimoine-layout.css et sont reutilisees
 * ici telles quelles.
 *
 * Changelog
 * ----------
 * 1.0.0 - Creation du CSS des pages legales : utilise pour "Mentions
 *         legales" et "Politique de confidentialite" (et toute page du
 *         meme type a l'avenir). Ce fichier ne fait que mettre en forme
 *         une colonne de texte lisible : titres (h2/h3), paragraphes,
 *         listes, liens, une ligne de separation optionnelle (hr).
 *         Colonne volontairement plus etroite (760px) que les autres
 *         sections du site, une page de texte long reste plus
 *         confortable a lire sur une largeur reduite qu'en pleine
 *         largeur.
 * 1.0.1 - A l'origine un seul gabarit generique (template-legal.php)
 *         chargeait ce CSS, avec le texte reglementaire saisi dans
 *         l'editeur WordPress (the_content()) plutot que code en dur.
 *         Choix finalement abandonne au profit de deux templates dedies
 *         (template-mentions-legales.php et
 *         template-politique-de-confidentialite.php), texte code en dur
 *         dans chacun, sur le meme principe que template-accueil.php et
 *         template-contact.php : coherence avec le reste du theme, pas
 *         de gabarit "hybride" qui melange les deux approches. Ce
 *         fichier CSS ne change pas pour autant : la mise en forme reste
 *         identique, seule la source du texte affiche change.
 * 1.0.2 - En prod, sur les deux pages legales, le logo de la nav
 *         apparaissait blanc sur fond blanc (illisible) et les liens du
 *         menu n'etaient pas visibles non plus. Cause tres probable : la
 *         nav bascule logo/liens entre une variante "fond sombre" et une
 *         variante "fond clair" (voir #nav-logo-dark / #nav-logo-light
 *         dans header.php) selon la section survolee en haut de page, et
 *         ce mecanisme part du principe qu'il y a une section sombre au
 *         tout debut de la page (comme #hero sur l'accueil ou
 *         #contact-hero sur la page de contact) - les deux gabarits
 *         legaux demarraient directement sur une section claire, sans
 *         cette section sombre initiale, d'ou le logo/menu restes dans
 *         leur variante "fond sombre" (donc invisibles sur blanc).
 *         Correction cote template (pas dans ce fichier) : ajout d'une
 *         section #legal-hero en tete de chaque gabarit, structurellement
 *         identique a #contact-hero (classe .section, .noise, .watermark,
 *         eyebrow en variante on-dark), pour retrouver exactement le
 *         contexte dans lequel la nav se comporte correctement ailleurs
 *         sur le site. HYPOTHESE NON VERIFIEE sur le vrai site (pas
 *         d'acces au JS/CSS de nav ici) : a confirmer visuellement une
 *         fois deploye. Ajouts ici : mise en forme de ce nouveau bloc
 *         d'entete (.legal-hero-head) et grossissement du h1, signale
 *         trop petit ; ainsi que .legal-cta, le bloc d'appel a l'action
 *         ajoute en fin de page sur les deux gabarits.
 * 1.0.3 - L'hypothese de la 1.0.2 etait fausse : sur le vrai site, le hero
 *         #legal-hero restait blanc (aucun fond sombre), avec un grand
 *         vide en haut de page et le logo/menu toujours invisibles.
 *         #contact-hero (verifiable directement dans
 *         lcb-patrimoine-contact.css) n'est pas sombre par la seule
 *         classe .section : il porte son propre fond degrade sombre,
 *         un padding-top/bottom specifique et une position du filigrane,
 *         rien de tout cela n'existait encore pour #legal-hero. On
 *         reprend donc exactement la meme recette (meme degrade, memes
 *         valeurs de padding et de filigrane que #contact-hero) plutot
 *         que de la deviner. Ce fond sombre suffit a lui seul a rendre le
 *         logo lisible (logo-dark.png est un trace fin, pense pour se
 *         detacher sur un fond sombre/texture, pas pour un fond blanc
 *         uni) : pas besoin de mecanisme JS de bascule pour ca. Toujours
 *         pas d'acces au CSS/JS de la nav elle-meme (liens du menu) : si
 *         les liens restent invisibles malgre ce fond sombre, il faudra
 *         me transmettre lcb-patrimoine-layout.css ou une capture de
 *         l'onglet Elements sur la nav pour aller plus loin sans deviner.
 *         Refonte aussi du bloc de fin de page : le bloc .legal-cta
 *         maison (1.0.2) est abandonne au profit de .faq-closing /
 *         .cta-row / .btn-fill-dark / .btn-dark, les classes deja
 *         utilisees pour le meme type de bloc en bas de la FAQ de
 *         l'accueil (voir template-accueil.php) - on reutilise l'existant
 *         a l'identique plutot que de re-approximer un style deja
 *         defini ailleurs. Les regles .legal-cta de la 1.0.2 restent
 *         dans ce fichier sans etre supprimees (regle du projet), elles
 *         ne sont simplement plus utilisees par aucun gabarit.
 * 1.0.4 - Les boutons du bloc .faq-closing (ajoute en 1.0.3) heritaient
 *         du soulignement et de la couleur verte de .legal-content a
 *         (regle 1.0.0 pour les liens du texte juridique), qui l'emporte
 *         sur le style normal de .btn-fill-dark car .legal-content a
 *         (une classe + une balise) est plus specifique que .btn-fill-dark
 *         (une seule classe) : le bouton plein "Prendre contact"
 *         affichait donc un texte vert souligne au lieu d'un texte blanc
 *         sans soulignement. Correction ciblee sur les boutons a
 *         l'interieur de .legal-content, sans toucher aux liens normaux
 *         du texte (qui doivent rester verts et soulignes).
 */

.legal-head {
  max-width: 760px;
  margin: 0 auto 40px;
}

.legal-content {
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: 80px;
}

.legal-content h2 {
  font-family: var(--serif-display);
  font-size: 26px;
  line-height: 1.3;
  color: var(--noir-encre);
  margin-top: 56px;
  margin-bottom: 18px;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  font-family: var(--serif-display);
  font-size: 19px;
  line-height: 1.3;
  color: var(--noir-encre);
  margin-top: 32px;
  margin-bottom: 12px;
}

.legal-content p {
  color: var(--noir-encre);
  line-height: 1.75;
  margin-bottom: 18px;
}

.legal-content ul,
.legal-content ol {
  margin: 0 0 18px 0;
  padding-left: 22px;
}

.legal-content li {
  color: var(--noir-encre);
  line-height: 1.75;
  margin-bottom: 8px;
}

.legal-content a {
  color: var(--vert-signature);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-content a:hover {
  color: var(--vert-lcb);
}

.legal-content strong {
  font-weight: 600;
}

.legal-content hr {
  border: none;
  border-top: 1px solid var(--filet);
  margin: 48px 0;
}

.legal-content .legal-updated,
.legal-content p.legal-updated {
  font-size: 13px;
  color: var(--gris-fonction);
  margin-bottom: 40px;
}

@media (max-width: 768px) {
  .legal-content h2 {
    font-size: 22px;
    margin-top: 44px;
  }
  .legal-content h3 {
    font-size: 17px;
  }
}

/* ---- 1.0.2 : entete #legal-hero + h1 agrandi + bloc CTA de fin de page ---- */

.legal-hero-head {
  max-width: 760px;
}

.legal-hero-head h1 {
  font-size: 44px;
  line-height: 1.15;
  margin-top: 14px;
}

.legal-cta {
  max-width: 760px;
  margin: 56px auto 0;
  padding-top: 40px;
  border-top: 1px solid var(--filet);
}

.legal-cta p {
  color: var(--noir-encre);
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .legal-hero-head h1 {
    font-size: 32px;
  }
}

/* ---- 1.0.3 : vrai fond sombre du hero (repris de #contact-hero) ---- */

#legal-hero {
  min-height: auto;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 32% 30%, #067064 0%, #04473f 28%, #011c18 58%, #000403 100%);
  color: var(--blanc);
  padding-top: 160px;
  padding-bottom: 70px;
}

#legal-hero .watermark {
  position: absolute;
  left: -11%;
  top: 38%;
  transform: translateY(-50%);
  width: 42vw;
  max-width: 620px;
  opacity: 0.05;
  pointer-events: none;
}

.legal-hero-head {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.legal-hero-head .eyebrow {
  margin-bottom: 22px;
}

.legal-hero-head h1 {
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  color: var(--blanc);
  line-height: 1.16;
  letter-spacing: 0.005em;
  margin-top: 0;
}

@media (max-width: 900px) {
  #legal-hero {
    padding-top: 200px;
  }
  #legal-hero .watermark {
    left: 50%;
    top: auto;
    bottom: -4%;
    transform: translateX(-50%);
    width: 70vw;
    max-width: 420px;
    opacity: 0.04;
  }
}

/* ---- 1.0.4 : les boutons du CTA de fin de page ne doivent pas heriter
   du style des liens de texte (.legal-content a) ---- */

.legal-content .btn,
.legal-content .btn:hover {
  text-decoration: none;
}

.legal-content .btn-fill-dark,
.legal-content .btn-fill-dark:hover {
  color: var(--blanc);
}