/* ==========================================================================
   VAGABON — css/pages/legal.css
   Styles partagés par les 4 pages légales/informatives : mentions-legales.html,
   politique-confidentialite.html, politique-cookies.html, gestion-cookies.html.

   OBJECTIF : harmoniser leur PRÉSENTATION avec la nouvelle direction
   artistique du site (fond bleu glacier, texte gris foncé, header/menu/
   boutons identiques au reste du site) — le contenu juridique lui-même
   n'est pas modifié par ce fichier.

   ISOLATION : toutes les règles sont scopées à body.page-legal, ou à des
   classes locales dédiées (.legal-brand, .legal-back) qui n'existent nulle
   part ailleurs dans le projet. Aucune règle ici ne touche index.html,
   universe.html, contact.html, face-a-face.html ou un composant partagé
   au-delà de ce scope explicite.

   MÊME RECETTE que css/pages/contact.css : tokens de couleur locaux plutôt
   que de charger universe.css tel quel. Raison technique précise : les
   jetons --u-* (utilisés par .universe-footer, les boutons, le menu...)
   sont déclarés UNIQUEMENT à l'intérieur de body.page-universe dans
   universe.css — si on chargeait ce fichier sans ajouter cette classe de
   body, ces variables seraient indéfinies sur cette page et leur
   comportement de repli deviendrait imprévisible. Cette page définit donc
   ses propres jetons --lg-*, avec des valeurs IDENTIQUES (littéralement
   les mêmes hexadécimaux) à celles déjà vérifiées ailleurs sur le site —
   aucune nouvelle couleur n'est inventée.

   CONTRASTE — vérifié par calcul (luminance relative WCAG), mêmes valeurs
   que celles déjà validées dans contact.css pour un texte sombre sur ce
   même fond clair (#AEC8D8) : #2B3236 ≈ 7.48:1 (titres), #495359 ≈ 4.52:1
   (texte courant, labels, liens), #5A420F ≈ 5.43:1 (survol "chaud"). Les
   Le menu plein écran n'a plus de palette locale (voir plus bas) : il
   utilise l'unique composant partagé, indépendant du fond de ces pages.
   ========================================================================== */

body.page-legal {
  /* Fond de page + tons de texte SOMBRES (fond clair) */
  --lg-bg: #AEC8D8;
  --lg-ink: #2B3236;             /* 7.48:1 — grands titres (h1) */
  --lg-ink-muted: #495359;       /* 4.52:1 — texte courant, h2/h3/h4, liens, labels */
  --lg-line: rgba(43, 50, 54, 0.18);
  --lg-line-strong: rgba(43, 50, 54, 0.32);
  --lg-accent-soft: rgba(11, 93, 130, 0.1);
  /* Doré sitewide (audit uniformisation boutons/CTA, voir variables.css) :
     repointé sur la source unique --color-warm-on-light — aucun changement
     de rendu (même #5A420F, 5,43:1). */
  --lg-warm-text: var(--color-warm-on-light);
  --lg-warm-soft: rgba(90, 66, 15, 0.14);

  background: var(--lg-bg);
  color: var(--lg-ink);
}

body.page-legal .l-page {
  background: var(--lg-bg);
}

/* ---------------------------------------------------------------------- */
/* Header — même variante glaciale que universe.css / contact.css          */
/* (dégradé au repos + fond plus opaque une fois défilé). Ne modifie pas    */
/* .c-header lui-même : override scopé, comportement/markup inchangés.     */
/* ---------------------------------------------------------------------- */
body.page-legal .c-header {
  background: linear-gradient(to bottom, rgba(174, 200, 216, 0.85), transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body.page-legal .c-header.is-scrolled {
  background-color: rgba(174, 200, 216, 0.94);
  border-bottom: 1px solid var(--lg-line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.page-legal .c-header .l-container {
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(24px, 5vw, 64px);
}

body.page-legal .c-icon-btn,
body.page-legal .c-menu-toggle {
  border-color: #495359;
  color: #495359;
}

/* Doré sitewide (audit uniformisation boutons/CTA) : ces boutons ronds du
   header restaient bleus (--lg-accent-soft) alors que .c-btn--secondary
   juste en dessous dans ce même fichier utilise déjà correctement le doré
   --lg-warm-soft/--lg-warm-text — alignement. */
/* Doré sitewide (audit uniformisation boutons/CTA, passe 2) : .c-menu-toggle
   ajouté à ce groupe (absent jusqu'ici) + color ajouté (texte/icône devient
   doré comme la bordure, conformément au bouton de référence). */
body.page-legal .c-icon-btn:hover,
body.page-legal .c-icon-btn:focus-visible,
body.page-legal .c-icon-btn:active,
body.page-legal .c-menu-toggle:hover,
body.page-legal .c-menu-toggle:focus-visible,
body.page-legal .c-menu-toggle:active {
  border-color: var(--color-warm-soft);
  background: rgba(199, 163, 78, 0.08);
  color: var(--color-warm);
  outline-color: var(--color-warm);
}

body.page-legal [data-lang-toggle] {
  line-height: 1;
}

/* .c-menu-toggle__bar utilise background: var(--color-text) en dur
   (components.css, non modifié — partagé) : ne suit pas automatiquement
   la couleur du bouton, d'où cet override explicite (même technique que
   body.page-universe .c-menu-toggle__bar dans universe.css). */
body.page-legal .c-menu-toggle__bar {
  background: #495359;
}

/* Centrage du texte du bouton "Réserver un appel" — même diagnostic déjà
   appliqué et validé sur universe.html/contact.html/la landing : .c-btn a
   déjà display:inline-flex + align-items/justify-content:center
   (components.css, non modifié), mais le texte en majuscules n'a pas de
   jambage descendant alors que line-height:normal réserve cet espace,
   décalant visuellement le texte vers le haut. line-height:1 corrige ;
   aucun padding/largeur/hauteur/bordure n'est modifié. */
body.page-legal .c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}

body.page-legal .c-btn--secondary {
  border-color: #495359;
  color: #495359;
}

body.page-legal .c-btn--secondary:hover,
body.page-legal .c-btn--secondary:focus-visible,
body.page-legal .c-btn--secondary:active {
  border-color: var(--color-warm-soft);
  background: rgba(199, 163, 78, 0.08);
  color: var(--color-warm);
  outline-color: var(--color-warm);
}

/* Logo — classe locale dédiée (même recette que .universe-brand /
   .contact-brand) plutôt que le composant partagé .brand-logo, qui n'est
   pas stylé pour un fond glacial. */
.legal-brand {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: #495359;
  text-transform: uppercase;
  opacity: 0.92;
  transition: opacity var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.legal-brand:hover,
.legal-brand:focus-visible {
  opacity: 1;
  color: var(--color-warm);
}

/* ---------------------------------------------------------------------- */
/* Menu plein écran — audit cohérence globale : le fond sombre fixe qui     */
/* était défini ici (et dupliqué à l'identique dans contact.css et          */
/* universe.css, chacun avec ses propres variables --lg-*/--vc-*/--u-*)     */
/* a été supprimé. Ce composant est un overlay plein écran opaque qui       */
/* recouvre entièrement la page : il n'a donc aucune raison de s'adapter    */
/* au fond glacial de ces pages en particulier. Le menu suit désormais      */
/* partout l'unique composant partagé (.c-nav-fullscreen dans               */
/* components.css), identité strictement identique quelle que soit la      */
/* page depuis laquelle il est ouvert. Le lien e-mail (.c-btn--ghost)       */
/* garde son style bleu accent global par défaut — déjà celui utilisé sans  */
/* problème sur toutes les pages qui n'avaient pas cet override (accueil,   */
/* qui-suis-je, ressources, face-à-face). */

/* ---------------------------------------------------------------------- */
/* Lien "← Retour à l'univers" — l'ancien bleu vif venait du composant     */
/* partagé .c-btn--ghost (color: var(--color-accent), #008AC9), pensé pour */
/* le fond sombre du menu plein écran, pas pour ce lien posé directement   */
/* sur le contenu clair de la page. Modificateur dédié .legal-back (ne     */
/* touche pas .c-btn--ghost lui-même, encore utilisé tel quel dans le menu */
/* ci-dessus) : gris foncé de la charte, survol "chaud" cohérent avec le   */
/* reste des liens de cette page.                                         */
/* ---------------------------------------------------------------------- */
.c-btn--ghost.legal-back {
  color: var(--lg-ink-muted);
}

.c-btn--ghost.legal-back:hover,
.c-btn--ghost.legal-back:focus-visible,
.c-btn--ghost.legal-back:active {
  color: var(--color-warm);
  outline-color: var(--color-warm);
}

/* ---------------------------------------------------------------------- */
/* Contenu — paragraphes, texte discret, emphase, liens intégrés au texte. */
/* Titres (h1-h6) : aucune règle de couleur nécessaire ici, ils héritent   */
/* déjà de body.page-legal { color: var(--lg-ink); } (base.css ne fixe pas */
/* de color propre à h1-h4, seulement font-family/line-height/spacing).   */
/* ---------------------------------------------------------------------- */
body.page-legal p {
  color: var(--lg-ink-muted);
}

body.page-legal .u-text-subtle {
  color: var(--lg-ink-muted);
}

/* "Informations à compléter" — l'ancien bleu vif (var(--color-accent),
   base.css, em { color: var(--color-accent); font-style: normal; }) est
   remplacé par le même gris foncé que le reste du texte ; l'italique est
   réactivée pour conserver une distinction visuelle de ces mentions
   provisoires (même langage déjà utilisé ailleurs sur le site pour du
   contenu "à venir", voir .project-page__pending-text sur la page Face à
   Face). Règle globale em { font-style: normal; } de base.css non
   modifiée : override scopé à cette seule page. */
body.page-legal main em {
  color: var(--lg-ink-muted);
  font-style: italic;
}

/* Liens intégrés au texte courant (mailto, renvois entre pages légales) —
   même convention que .contact-form__privacy-note a (contact.css) : gris
   foncé + soulignement discret pour rester repérables comme liens dans un
   paragraphe, ton "chaud" au survol. Exclut .c-btn--ghost (le lien
   "Retour à l'univers", traité séparément ci-dessus avec son propre
   langage de bouton fantôme, sans soulignement). */
body.page-legal main a:not(.c-btn--ghost) {
  color: var(--lg-ink-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--ease-standard);
}

body.page-legal main a:not(.c-btn--ghost):hover,
body.page-legal main a:not(.c-btn--ghost):focus-visible {
  color: var(--lg-warm-text);
}

/* ---------------------------------------------------------------------- */
/* Footer — reprend le markup et les couleurs EXACTES de .universe-footer  */
/* (voir css/pages/universe.css, non chargé sur ces pages). Dupliqué ici   */
/* plutôt qu'importé : les jetons --u-* utilisés par ce composant ne sont  */
/* déclarés que dans body.page-universe, donc indisponibles sur ces pages  */
/* — la duplication avec des valeurs LITTÉRALEMENT identiques garantit un  */
/* rendu pixel-identique sans dépendre d'une variable indéfinie. Aucune    */
/* valeur n'a été changée par rapport à l'original (y compris les fixes de */
/* contraste déjà appliqués : #495359 / #5C4213 pour les liens de la       */
/* colonne "Informations", voir universe.css pour l'historique).          */
/* ---------------------------------------------------------------------- */
.universe-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(243, 241, 234, 0.14);
  padding-block: var(--space-2xl) var(--space-lg);
}

.universe-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--space-xl);
}

.universe-footer__brand {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F3F1EA;
}

.universe-footer__role {
  margin-top: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  color: #82868D;
  line-height: var(--line-height-body);
}

.universe-footer__heading {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #82868D;
  margin-bottom: var(--space-sm);
}

.universe-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.universe-footer__list a {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  color: #495359;
  transition: color var(--duration-fast) var(--ease-standard);
}

.universe-footer__list a:hover,
.universe-footer__list a:focus-visible {
  color: #5C4213;
}

.universe-footer__social {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-2xs);
}

.universe-footer__social .c-icon-btn {
  width: 34px;
  height: 34px;
  border-color: rgba(243, 241, 234, 0.28);
  color: #C7C4BC;
}

/* Doré sitewide (audit uniformisation boutons/CTA) : ce bloc footer dupliqué
   dans legal.css utilisait encore le bleu brut (--u-accent-soft en dur) —
   aligné sur le même doré "fond clair" que .universe-footer__list a:hover
   juste au-dessus (#5C4213, même famille que --lg-warm-text). */
.universe-footer__social .c-icon-btn:hover,
.universe-footer__social .c-icon-btn:focus-visible,
.universe-footer__social .c-icon-btn:active {
  border-color: var(--color-warm-soft);
  background: rgba(199, 163, 78, 0.08);
  color: var(--color-warm);
  outline-color: var(--color-warm);
}

.universe-footer__bottom {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 64px);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(243, 241, 234, 0.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: #82868D;
}

@media (max-width: 860px) {
  .universe-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .universe-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .universe-footer__bottom {
    flex-direction: column;
  }
}