/* ==========================================================================
   LogementLille — couche de finition globale
   Chargée en dernier, après le <style> inline de chaque page.
   Principe : n'ajoute que des propriétés absentes du site, ne redéfinit
   aucune couleur, taille ni mise en page existante.
   ========================================================================== */

:root {
  --lp-focus: #c93828;
  --lp-gold: #c8a84b;
  --lp-ink: #0f1117;
  --lp-header: 68px;
}

/* --------------------------------------------------------------------------
   1. Ancres masquées par le header fixe
   Le site a un header en position:fixed de 68px sur les 66 pages. Sans
   scroll-padding, tout lien #ancre place sa cible sous le header.
   -------------------------------------------------------------------------- */
html {
  scroll-padding-top: calc(var(--lp-header) + 16px);
}
:target {
  scroll-margin-top: calc(var(--lp-header) + 16px);
}

/* Rappel visuel discret sur la section atteinte via une ancre */
section:target > .container > h2:first-child,
section:target > .container > .s-head,
h2:target, h3:target {
  animation: lp-target-flash 1.6s ease-out 1;
}
@keyframes lp-target-flash {
  0%   { background: rgba(200,168,75,.22); }
  100% { background: transparent; }
}

/* --------------------------------------------------------------------------
   2. Accessibilité clavier
   Aucun style de focus n'existait : la navigation au clavier était invisible.
   :focus-visible ne s'affiche qu'en navigation clavier, jamais au clic souris.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--lp-focus);
  outline-offset: 3px;
  border-radius: 3px;
}
/* Sur fond sombre (header du hero, footer), l'outil rouge manque de contraste */
.lfnav :focus-visible,
.hero :focus-visible,
.qhero :focus-visible,
.ihero :focus-visible,
.cta :focus-visible,
.lfc :focus-visible {
  outline-color: var(--lp-gold);
}
/* Les navigateurs qui ne gèrent pas :focus-visible gardent leur focus natif */
:focus:not(:focus-visible) {
  outline: none;
}

/* Lien d'évitement, apparaît uniquement au clavier */
.lp-skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 9999;
  background: var(--lp-ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 8px;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  transition: top .18s ease;
}
.lp-skip:focus {
  top: 0;
}

/* --------------------------------------------------------------------------
   3. Rendu typographique
   -------------------------------------------------------------------------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Évite les lignes orphelines disgracieuses en fin de paragraphe */
p, li {
  text-wrap: pretty;
}
h1, h2, h3 {
  text-wrap: balance;
}
/* Chiffres alignés dans les tableaux de prix et de comparaison */
table td, table th {
  font-variant-numeric: tabular-nums;
}

/* Surlignage aux couleurs du site plutôt que le bleu par défaut */
::selection {
  background: rgba(200,168,75,.30);
  color: var(--lp-ink);
}

/* --------------------------------------------------------------------------
   4. Micro-interactions
   -------------------------------------------------------------------------- */
a {
  transition: color .18s ease, opacity .18s ease, background-color .18s ease;
}
button, .btn, .cta-btn, .hero-btn, .hero-btn-2, .pbtn, .lfc-btn {
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
button:active, .btn:active, .cta-btn:active,
.hero-btn:active, .pbtn:active, .lfc-btn:active {
  transform: translateY(1px);
}

/* Cibles tactiles confortables sur mobile (recommandation WCAG 2.5.8) */
@media (max-width: 640px) {
  nav a, .lfnav-col a, .lfnav-bot a, .faq summary {
    min-height: 40px;
    display: flex;
    align-items: center;
  }
  .lfnav-bot a {
    display: inline-flex;
  }
}

/* --------------------------------------------------------------------------
   5. Robustesse
   -------------------------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
}
/* Aucune page ne doit défiler horizontalement */
body {
  overflow-x: hidden;
}
/* Les longues URLs et mots composés ne débordent pas de leur conteneur */
p, li, td, th, summary, .a {
  overflow-wrap: break-word;
}
/* Indique que les tableaux larges sont défilables sur petit écran */
.tw, .tablewrap {
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   6. Mouvement réduit
   Respecte le réglage système des utilisateurs sensibles au mouvement
   (vestibulaire, migraines). Une seule page le gérait sur 66.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Les éléments animés à l'apparition doivent rester visibles */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Filet de sécurité : si le JavaScript d'apparition ne s'exécute pas,
   le contenu reste lisible au lieu de rester invisible. */
@media (scripting: none) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   7. Impression
   Aucune page n'avait de feuille d'impression : imprimer sortait le header
   fixe, le footer sombre et le bandeau cookies.
   -------------------------------------------------------------------------- */
@media print {
  header,
  .lfnav,
  .lfc,
  #lfcookie,
  .mobile-nav,
  .hamburger,
  .cta,
  .cta-sec,
  .hero-actions,
  nav[aria-label="Fil d'Ariane"] {
    display: none !important;
  }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }

  /* Les héros sombres deviennent illisibles à l'impression */
  .hero, .qhero, .ihero {
    background: #fff !important;
    color: #000 !important;
    padding: 0 0 12pt !important;
  }
  .hero *, .qhero *, .ihero * {
    color: #000 !important;
  }
  .hero-bg, .hero-grid-bg, .qhero::before, .ihero::before {
    display: none !important;
  }

  .container {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Les questions repliées doivent apparaître sur le papier */
  details {
    display: block !important;
  }
  details > div, .faq .a {
    display: block !important;
    height: auto !important;
  }
  summary::after {
    content: '' !important;
  }

  /* Ne pas couper tableaux et encadrés en travers d'une page */
  table, .note, .answer, .card, figure {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  h2, h3 {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* Un lien imprimé sans son URL est inutilisable */
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
    word-break: break-all;
  }

  table {
    box-shadow: none !important;
    border: 1px solid #999;
  }
  th {
    background: #eee !important;
    color: #000 !important;
  }
}

/* --------------------------------------------------------------------------
   8. Contrastes WCAG AA
   Audit des jetons de couleur : deux valeurs échouaient au seuil de 4,5:1
   pour du texte normal. Redéfinies ici, cette feuille étant chargée après
   le <style> inline de chaque page.

     --gm  #9a9490 : 2,61 à 2,99 selon le fond  -> ECHEC
             #726c68 : 4,51 / 4,88 / 5,17       -> conforme, teinte conservée
             (usages vérifiés : légendes, fils d'Ariane, .loc, .byline,
              .updated, prix secondaires — tous sur fond clair)

     --red #c93828 sur #f3efe8 : 4,49           -> limite
             #c63727 : 4,61                      -> conforme
             (reste conforme en fond de bouton avec texte blanc)
   -------------------------------------------------------------------------- */
:root {
  --gm: #726c68;
  --red: #c63727;
}

/* Valeur prête à l'emploi pour le doré utilisé comme TEXTE sur fond clair.
   Non appliquée globalement : le doré est majoritairement posé sur des fonds
   sombres où il est conforme et où l'assombrir serait une régression. */
:root {
  --lp-gold-on-light: #7e6a2f;   /* 4,96 sur #faf8f4 — conforme AA */
}

/* --------------------------------------------------------------------------
   9. Performance de rendu
   Le footer, hors écran au chargement, n'est peint qu'à l'approche du scroll.
   contain-intrinsic-size évite tout saut de mise en page.
   -------------------------------------------------------------------------- */
.lfnav {
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}

/* --------------------------------------------------------------------------
   10. Hiérarchie des titres
   Les cinq intitulés de colonnes du footer étaient des <h4>. Placés après les
   <h2> du contenu, ils créaient un saut de niveau h2 -> h4 sur 65 des 66 pages,
   et injectaient 330 titres parasites dans le plan du document.
   Convertis en <p class="lfnav-h">, ils gardent ici leur apparence exacte.
   -------------------------------------------------------------------------- */
.lfnav-col .lfnav-h {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  margin: 0 0 14px;
}