/*
  ============================================================================
  BASE — réinitialisation, fond animé, typographie par défaut
  ============================================================================
  Contient tout ce qui s'applique globalement, avant même de parler de mise
  en page ou de composants : le "terrain de jeu" du site.
*/

*, *::before, *::after{ box-sizing: border-box }
html{ -webkit-text-size-adjust: 100%; background: var(--encre) }

body{
  margin: 0;
  background: var(--encre);
  color: var(--sable);
  font-family: var(--police-sans);
  font-size: var(--taille-texte);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* évite toute barre de défilement horizontale parasite */
}

/*
  Le dégradé de fond n'est PAS posé directement sur <body> mais sur un
  pseudo-élément ::before, fixe et placé derrière le contenu (z-index négatif).

  Pourquoi ce détour plutôt que "background" sur body directement :
  1) on peut faire varier la position de la lueur ambrée au scroll (voir
     06-effets.css / 04-arriere-plan-anime.js) sans jamais toucher au fond
     "de secours" posé sur <body> (qui, lui, reste fixe et garantit qu'aucun
     coin de la page ne se retrouve transparent) ;
  2) position:fixed fait que le dégradé ne "scrolle" pas avec la page — effet
     d'arrière-plan immersif, comme si on regardait par une fenêtre fixe.
*/
body::before{
  content: "";
  position: fixed;
  left: 0; right: 0; top: -14vh;
  height: 128vh;
  z-index: -1;
  transform: translate3d(0, var(--decalage-fond, 0px), 0);
  background:
    radial-gradient(58% 52% at var(--soleil-x, 87%) var(--soleil-y, 1%), rgba(244,172,70, var(--soleil-alpha, .32)), transparent 60%),
    radial-gradient(30% 26% at var(--soleil-x, 87%) var(--soleil-y, 1%), rgba(255,214,150, calc(var(--soleil-alpha, .32) * .7)), transparent 62%),
    radial-gradient(52% 46% at 1% var(--maree-y, 101%), rgba(42,168,178,.28), transparent 66%),
    radial-gradient(98% 78% at 50% 152%, rgba(16,58,94,.6), transparent 72%),
    linear-gradient(157deg, #071626 0%, #0B2E3D 38%, #123C60 64%, #091A2C 100%);
}
/* Thème clair : même « soleil » ambré discret, mais posé sur un dégradé
   doux blanc → gris. */
:root[data-theme="clair"] body::before{
  background:
    radial-gradient(58% 52% at var(--soleil-x, 87%) var(--soleil-y, 1%), rgba(210,150,70, .12), transparent 60%),
    radial-gradient(52% 46% at 1% var(--maree-y, 101%), rgba(120,160,180, .12), transparent 66%),
    linear-gradient(157deg, #FCFCFD 0%, #EEF1F4 46%, #E3E8EE 100%);
}

/* Filet de sécurité : l'attribut `hidden` du HTML doit TOUJOURS masquer
   l'élément. Sans ce !important, n'importe quelle règle `display:` de nos
   composants (ex. .liste-biens{display:grid}) l'emporterait sur la règle
   `[hidden]{display:none}` du navigateur, et l'élément resterait visible. */
[hidden]{ display: none !important }

::selection{ background: var(--ambre); color: var(--encre-sur-ambre) }
a{ color: inherit; text-decoration: none }
button{ font: inherit; color: inherit; cursor: pointer }
img{ max-width: 100%; display: block }
h1, h2, h3, p{ margin: 0 }

/* Contour de focus clavier bien visible : accessibilité, pas une option. */
:focus-visible{ outline: 2px solid var(--contour-focus); outline-offset: 3px; border-radius: 2px }

/*
  Respect du réglage système "réduire les animations" : on coupe la durée de
  toutes les transitions/animations plutôt que de les supprimer une par une,
  et on neutralise explicitement le parallaxe du fond.
*/
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important }
  .apparition{ opacity: 1; transform: none }
  body::before{ transform: none !important }
  .lueur-curseur{ transition: none }
}