/* Polices — reprises de la V10-02 : Anton pour les titres, General Sans pour le texte courant */

@font-face { font-family: 'General Sans'; src: url('fonts/GeneralSans-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('fonts/GeneralSans-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('fonts/GeneralSans-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('fonts/GeneralSans-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
/* Anton (titres h1/h2/h3) hébergée sur le site depuis le 09/10/2026 — avant, chargée via un @import Google Fonts
   qui retardait l'affichage (chaîne de 3 requêtes, ~750 ms sur mobile). Licence SIL OFL 1.1 (hébergement autorisé).
   Fichier = sous-ensemble "latin" de Google Fonts (couvre tous les caractères des titres du site). */
@font-face { font-family: 'Anton'; src: url('fonts/Anton-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Variables fluides — remplacent les 2 @media de la V11. Chaque taille du
   logo et du menu est calculée à partir d'UNE seule variable de base, dans
   les mêmes proportions que les valeurs fixes qu'on avait par palier —
   comme ça tout grandit/rétrécit ensemble, sans risque de désynchronisation
   entre width/height/font-size/margin. Coefficients vw approximatifs, à
   ajuster à l'œil si besoin — clamp() ne remplace pas un réglage visuel.
   Rappel V11 : logo 90px (mobile) → 200px (desktop), menu 50px → 100px. */
:root {
  --logo-diametre: clamp(45px, 20vmin, 200px); /* vmin = la plus petite des deux dimensions (largeur OU hauteur) — réagit aux deux, pas juste à la largeur */
  --menu-epaisseur: clamp(50px, 7vw, 100px);
  --menu-texte: clamp(12px, 1.5vw, 16px); /* taille du texte du menu et du copyright, réduit sur iPad/iPhone */

  /* Distance parcourue par chaque crochet pendant le balayage de l'intro
     (voir @keyframes logo-intro-crochet-*). Exprimée en multiple de
     --logo-diametre pour rester proportionnelle à tout écran, plutôt qu'en
     px fixe. "URBAN" (5 lettres) est plus long que "NFO" (3 lettres), donc
     le crochet gauche doit parcourir une plus grande distance pour balayer
     tout le mot. Valeurs volontairement généreuses pour être sûr de couvrir
     "complètement" chaque mot (demande de Nicolas) — à ajuster à l'œil si
     jamais ça déborde ou ne va pas assez loin sur un écran réel. */
  --balayage-gauche: calc(var(--logo-diametre) * -2.4);
  --balayage-droite: calc(var(--logo-diametre) * 1.8);
}

/* Nécessaire pour que "height: 100%" sur une section corresponde vraiment
   à la hauteur de l'écran de l'utilisateur : la chaîne doit être complète
   depuis la page (html) jusqu'à la section. */
html, body {
  height: 100%;
}

/* <main> = repère principal pour les lecteurs d'écran (ajouté le 09/10/2026, point 7 PageSpeed/accessibilité).
   "display: contents" : il ne crée AUCUNE boîte, donc la chaîne de hauteurs en % (html > body > section)
   reste strictement identique à avant — un <main> ordinaire casserait les hauteurs des sections. */
main {
  display: contents;
}


body {
  font-family: 'General Sans', sans-serif;
}

p {
  font-family: 'General Sans', sans-serif;
}
h1, h2, h3 {
  font-family: 'Anton', sans-serif;
  }

/* TITRE SECTION INTRO */
h1 {
  color: var(--clair);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}



/* COPYRIGHT - ACTIF  */

.copy  {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vh; /* devient la hauteur visuelle une fois tourné — exception vh validée avec Nicolas */
  height: var(--menu-epaisseur); /* même variable fluide que .menu-bis, se réduit pareil sur iPad/iPhone */
  transform-origin: top left;
  transform: rotate(90deg) translateY(-100%);
  z-index: 100;
  display: flex;
  align-items: center; /* "right" n'existe pas pour align-items, remplacé par center */
  justify-content: flex-end; /* flex-end = en bas de l'écran, à cause de la rotation */
  margin: 0px;
  padding: 20px;
  padding-right: 40px;
}

.copy p {
  font-family: 'General Sans', sans-serif;
  color: var(--moyen);
  background-color: transparent;
  font-size: var(--menu-texte);
  font-weight: 400;
  text-decoration: none;
  text-align: right;
  transform: rotate(180deg);
}

.copy a {
  font-family: 'General Sans', sans-serif;
  color: var(--moyen);
  background-color: transparent;
  font-size: var(--menu-texte);
  font-weight: 400;
  text-decoration: none;
  text-align: right;
  transform: rotate(180deg);
}

.copy a:hover {
  font-weight: 600;
}





/* MENU DROIT - ACTIF  */

.menu-bis {
  position: fixed;
  top: 0;
  left: calc(100% - var(--menu-epaisseur));
  width: 100vh; /* même exception vh que .menu */
  height: var(--menu-epaisseur);
  transform-origin: top left;
  transform: rotate(90deg) translateY(-100%);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px; /* identique en V11 desktop et mobile, pas besoin de fluide ici */
  border-bottom: 2px dashed var(--moyen);
}

.menu-bis a {
  font-family: 'General Sans', sans-serif;
  color: var(--moyen);
  font-size: var(--menu-texte);
  font-weight: 400;
  letter-spacing: clamp(0.02em, calc(0.78vw - 2.6px), 0.5em);
  text-decoration: none;
  margin: 0 8px;
 
  }

.menu-bis a:hover,
.menu-bis a.actif {
  font-weight: 600;
}


/* Classes de couleur de texte — réutilisables sur n'importe quel élément */

.texte-sombre { color: var(--sombre); }
.texte-moyen { color: var(--moyen); }
.texte-clair { color: var(--clair); }

.slogan { color: var(--clair); font-style: italic; }



/* LOGO */

/* Conteneur qui déclenche le survol : URBAN + logo + NFO ensemble */
.logo-zone {
  width: 100%; /* même piège que .conteneur : sans ça, en enfant flex de #logo .conteneur, il se réduirait à la taille de son contenu */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0px;
  /* Pas de padding-right ici : .conteneur réserve déjà l'espace du menu
     (padding-right, voir plus bas) — en ajouter un ici aussi le compte en
     double et resserre inutilement la place disponible, surtout sur mobile. */
}

/* Intro automatique au chargement : le logo démarre "ouvert" (texte visible,
   cercle sans bordure), puis se referme tout seul vers l'état par défaut.
   Le :hover reprend la main normalement une fois l'animation terminée
   (animation-fill-mode: forwards laisse le résultat final en place, mais
   une règle :hover plus spécifique le remplace pendant le survol). */
/* 5 étapes dans une seule animation (sur 6s au total) :
   0-33.33%     (0-2s)   : apparition en fondu, tout part invisible
   33.33-50%    (2-3s)   : maintien tel quel (visible)
   50-66.67%    (3-4s)   : le texte disparaît PENDANT que les crochets balayent
                           vers l'extérieur (comme un essuie-glace qui efface
                           URBAN et NFO au passage)
   66.67-83.33% (4-5s)   : les crochets reviennent au centre
   83.33-100%   (5-6s)   : la bordure du cercle apparaît, une fois les
                           crochets revenus en place */
@keyframes logo-intro-texte {
  0%      { opacity: 0; }
  33.33%  { opacity: 1; }
  50%     { opacity: 1; }
  66.67%  { opacity: 0; }
  100%    { opacity: 0; }
}

@keyframes logo-intro-cercle {
  0%      { opacity: 0; border-color: transparent; }
  33.33%  { opacity: 1; border-color: transparent; }
  83.33%  { opacity: 1; border-color: transparent; }
  100%    { opacity: 1; border-color: var(--moyen); }
}

/* Balayage des crochets : chacun part du centre, part en fondu vers
   l'extérieur pendant que le texte disparaît (50-66.67%), puis revient
   au centre (66.67-83.33%) avant que le cercle apparaisse. Deux keyframes
   séparées car chaque crochet part dans une direction différente. */
@keyframes logo-intro-crochet-gauche {
  0%      { transform: translateX(0); }
  50%     { transform: translateX(0); }
  66.67%  { transform: translateX(var(--balayage-gauche)); }
  83.33%  { transform: translateX(0); }
  100%    { transform: translateX(0); }
}

@keyframes logo-intro-crochet-droite {
  0%      { transform: translateX(0); }
  50%     { transform: translateX(0); }
  66.67%  { transform: translateX(var(--balayage-droite)); }
  83.33%  { transform: translateX(0); }
  100%    { transform: translateX(0); }
}

.texte-logo {
  color: var(--sombre);
  font-size: calc(var(--logo-diametre) * 0.55); /* ratio abaissé (0.64→0.55) : le texte est ce qui déborde le plus, on le fait rétrécir plus vite que le cercle */
  font-weight: 400;
  opacity: 0;
  transition: opacity 1s;
}

/* Animation active seulement tant que .logo-zone a la classe .intro-active
   (posée au chargement, retirée par script.js une fois l'animation finie —
   voir animationend). Sans ce retrait, "animation-fill-mode: forwards"
   bloquerait la propriété en permanence et empêcherait le :hover de
   fonctionner après coup. */
.intro-active .texte-logo {
  animation: logo-intro-texte 6s ease both; /* 6s au total : apparition (2s) + maintien (1s) + disparition (1s) + retour crochets (1s) + apparition cercle (1s) */
}

/* Survoler n'importe où dans la zone (donc le logo) révèle URBAN et NFO */
.logo-zone:hover .texte-logo {
  opacity: 1;
}


.logo {
  display: inline-block; /* nécessaire : un span est "inline" par défaut, width/height n'auraient aucun effet sinon */
  width: var(--logo-diametre);
  height: var(--logo-diametre);
  flex-shrink: 0; /* empêche flexbox de réduire seulement la largeur si la place manque (c'est ça qui rendait le cercle ovale) */
  font-size: calc(var(--logo-diametre) * 0.43);   /* ratio abaissé (0.5→0.43) pour rester proportionné avec URBAN/NFO, réduit aussi */
  font-weight: 400;
  line-height: calc(var(--logo-diametre) * 0.86); /* ratio 172px/200px en V11 */
  text-align: center;
  border: clamp(4px, 1vw, 5px) solid var(--moyen);
  border-radius: 100%;
  color: var(--moyen);
  transition: border-color 1s;
  margin: 0 calc(var(--logo-diametre) * -0.25); /* ratio -50px/200px en V11 */
}

.intro-active .logo {
  animation: logo-intro-cercle 6s ease both; /* même durée totale que le texte (6s), pour que toutes les animations se terminent ensemble */
}

.logo-zone:hover .logo {
  border-color: transparent;
}

/* Les deux crochets "]" et "[" sont maintenant deux spans indépendants à
   l'intérieur de .logo (qui reste le cercle : taille/bordure/couleur ne
   changent pas). inline-block est nécessaire pour que "transform"
   fonctionne de façon fiable (les éléments inline ne garantissent pas ça
   dans tous les navigateurs). */
.crochet {
  display: inline-block;
}

.intro-active .crochet-gauche {
  animation: logo-intro-crochet-gauche 6s ease both;
}

.intro-active .crochet-droite {
  animation: logo-intro-crochet-droite 6s ease both;
}


/* Rôles de couleur — pas de couleur écrite en dur ailleurs dans le fichier.
   Une "série" (palette) = une classe qui redéfinit les 3 rôles ci-dessous.
   Pour l'instant, une seule classe est posée sur <body> (voir index.html) ;
   plus tard un script en choisira une au hasard à chaque rechargement. */

/* Série 10 — Modern Blue */
.palette-10 {
  --sombre: #381932;
  --moyen: #874279;
  --clair: #ffe9ff;
}

/* Série 11 — Quiet Luxury (--sombre éclairci le 19/09/2026, #111111 → #262626, sur demande de Nicolas) */
.palette-11 {
  --sombre: #262626;
  --moyen: #C9A227;
  --clair: #F5F0E6;
}

/* Série 12 — Earthy & Warm (moyen = olive, tan laissé de côté) */
.palette-12 {
  --sombre: #283618;
  --moyen: #606C38;
  --clair: #FEFAE0;
}

/* Série 14 — Sapphire Teal (charte ne donne que 2 couleurs : #0D657B + #F3F0E9 ;
   --sombre dérivé en assombrissant le teal, pas une couleur de la charte elle-même) */
.palette-14 {
  --sombre: #072E38;
  --moyen: #0D657B;
  --clair: #F3F0E9;
}

/* Série 15 — Copper Clay (charte ne donne que 2 couleurs : #B06243 + #F0E6DD ;
   --sombre dérivé en assombrissant le cuivre, pas une couleur de la charte elle-même) */
.palette-15 {
  --sombre: #262626;
  --moyen: #d32a33;
  --clair: #FFFAFF;
}

/* section = pleine largeur, hauteur adaptée au contenu (rien à régler, comportement par défaut) */

/* conteneur = colonne de contenu centrée, largeur plafonnée à 1120px */
.conteneur {
  width: 100%; /* force .conteneur à prendre toute la largeur même comme enfant flex (ex. dans #logo), sinon il se réduit à la taille de son contenu au lieu de se centrer normalement */
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 50px;
  padding-right: var(--menu-epaisseur); /* fluide, suit la vraie épaisseur du menu au lieu d'un 100px fixe */
  padding-top: 50px;
  padding-bottom: 50px;
}

/* Couleurs de fond des 9 sections — à définir une par une */

#logo {
  background-color: var(--clair);
  height: 40%;
}

/* #logo n'est plus flex : .conteneur se centre horizontalement de façon
   normale (comme dans toutes les autres sections, via margin:auto), pas
   de piège de marge auto sur enfant flex. Le centrage vertical du logo se
   fait ici, un niveau plus bas, sur .conteneur lui-même. */
#logo .conteneur {
  height: 100%;
  display: flex;
  align-items: center;
}
/* Test background-blend-mode : plus simple que le ::before + z-index
   d'avant — l'image ET la couleur sont sur le MÊME élément (#intro), le
   navigateur les mélange directement. Le texte (.conteneur, un vrai
   enfant, pas un fond) n'est jamais concerné, donc pas besoin de z-index
   du tout ici. */
#intro {
  background-color: var(--sombre);
  background-image: url('images/urban-info-service-recherche-archives-analyse-urbanistique-expertise-technique-bien-immobilier-bruxelles-0011.avif');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  /* Toutes les valeurs possibles, pour essayer — remplace juste "multiply"
     ci-dessus par une des valeurs ci-dessous :
     normal, multiply, screen, overlay, darken, lighten, color-dodge,
     color-burn, hard-light, soft-light, difference, exclusion,
     hue, saturation, color, luminosity */
  height: 60%;
}

#about {
  background-color: var(--clair);min-height: 100%;
}

#image-urban {
  background-color: var(--clair);
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  min-height: 50%;
}
#urban {
  background-color: var(--clair);min-height: 50%;
}



/* Image posée par script.js (style inline, tirage au hasard parmi 0031/0032/0033) au moment où la
   section approche de l'écran — voir chargerQuandProche() dans script.js (point 3 PageSpeed, 09/10/2026). */
#image-info {
  background-color: var(--clair);
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  min-height: 30%;
}
#info {
  background-color: var(--clair);min-height: 70%;
}


/* Vidéo boomerang en vraie balise <video> (plus fiable que background-image
   pour une vidéo — ne marchait que dans Safari, voir 09_LECONS.md 19/09/2026).
   position: relative + overflow: hidden nécessaires pour que .video-fond
   (position: absolute) reste bien cadrée à l'intérieur de la section. */
#image-expert {
  background-color: var(--clair);
  position: relative;
  overflow: hidden;
  min-height: 30%;
}

.video-fond {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

#expert {
  background-color: var(--clair);min-height: 70%;
}



#image-conseil {
  background-color: var(--clair);
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  min-height: 40%;
}
#conseil {
  background-color: var(--clair);min-height: 60%;
}

#story {
  background-color: var(--sombre);min-height: 100%;
}

#tarifs {
  background-color: var(--clair);min-height: 75%;
}

#fin {
  background-color: var(--sombre);min-height: 25%;
}




/* CONTENU POUR LES SERVICES */

.grille-service {
  display:grid;
  /* Fluide, sans media query : repasse automatiquement à 1 seule colonne
     dès qu'il n'y a plus la place pour 2 colonnes de 300px minimum chacune.
     Différence avec avant : les 2 colonnes sont maintenant égales (1fr
     chacune) au lieu de l'ancien ratio .85/1.15 — cette technique fluide
     ne permet pas facilement de garder un ratio asymétrique fixe. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:150px;
  align-items:start;
}

.grille-service > div:nth-child(2) {
  border-left:1px solid var(--moyen);
  padding-left:40px; }





  
h2 {
  color: var(--sombre);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom:40px;
}

.intro { color:var(--moyen); font-size:24px; font-weight:400; max-width:40ch; }

.texte { font-size:18px; font-weight:400; line-height:1.5; max-width:100ch; color:var(--sombre); }
.texte-story { font-size:18px; font-weight:400; line-height:1.5; max-width:100ch; color:var(--clair); }

h3 {
  color: var(--clair);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom:40px;
}
h4 {
  color: var(--moyen);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom:40px;
}

.citation { font-style:italic; font-size:24px; font-weight:400; letter-spacing:-0.01em; margin:20px 0 20px 0; color:var(--moyen); }

a.lien {color:var(--sombre); font-weight:600; text-decoration:none;}
a.lien:hover { font-weight:400; }



.prix { font-size:16px; font-weight:400; color:var(--sombre); margin-top:20px;}

.prix span {color:var(--moyen); }


a.lien-contact {color:var(--clair); font-weight:400; text-decoration:none;letter-spacing:0.1em;}
a.lien-contact:hover { font-weight:600; }
.texte-contact { font-size:18px; font-weight:400; line-height:2; max-width:100ch; color:var(--moyen); }

.condition { font-size:16px; font-weight:400; color:var(--clair); margin-top:20px;}
a.condition { color:var(--clair); font-weight:400; text-decoration:none;}
a.condition:hover { font-weight:600; }


/* FORMULAIRE DE CONTACT (section #fin) */

.formulaire-contact {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
}

.formulaire-contact label {
  display: block;
  margin-bottom: 4px;
  font-family: 'General Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--clair);
}

.formulaire-contact input,
.formulaire-contact textarea {
  width: 100%;
  background-color: var(--clair);
  color: var(--sombre);
  border: 1px solid var(--moyen);
  padding: 6px;
  font-family: 'General Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.formulaire-contact input:focus,
.formulaire-contact textarea:focus {
  outline: none;
  border-color: var(--clair);
}

.formulaire-contact textarea {
  resize: vertical;
  min-height: 64px;
}

.formulaire-contact .champ-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulaire-contact button {
  align-self: flex-start;
  background-color: var(--moyen);
  color: var(--clair);
  border: none;
  padding: 12px 32px;
  font-family: 'General Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

.formulaire-contact button:hover {
  background-color: var(--clair);
  color: var(--sombre);
}

.formulaire-contact .confiance {
  margin-top: 8px;
  max-width: 60ch;
  font-size: 14px;
  color: var(--moyen);
}

/* POP-UP DE CONFIRMATION DU FORMULAIRE DE CONTACT */

.popup-contact {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 200;
  max-width: 360px;
  background-color: var(--moyen);
  color: var(--clair);
  padding: 20px 24px;
  font-family: 'General Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.popup-contact.popup-erreur {
  background-color: #B3261E;
}

.popup-contact[hidden] {
  display: none;
}


/* SECTION STORY — une seule visible à la fois, boutons précédent/suivant, en boucle */
.story-slide {
  display: none;
}

.story-slide.actif {
  display: block;
}

.story-nav {
  display: flex;
  gap: 20px;
  margin-top: 40px;
  margin-bottom: 40px;
  padding-top: 20px;
  border-top: 1px dashed var(--moyen);
}

.story-nav button {
  font-family: 'General Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--moyen);
  background: transparent;
  border: none;
  padding: 0px 0px 0px 50px;
  cursor: pointer;
}

.story-nav button:hover {
font-weight: 400;
}







/* Les 2 @media de la V11 (1366px et 480px) sont retirées ici — remplacées
   par les variables fluides --logo-diametre et --menu-epaisseur tout en
   haut du fichier, qui s'ajustent en continu à n'importe quelle largeur
   d'écran plutôt que par paliers fixes. */




/* PAGES LÉGALES (urbaninfo.html / rgpd.html / cgu.html / cgv.html) —
   4 pages à part, en dehors de la page à défilement (index.html), pour du
   texte long (mentions légales, RGPD, CGU, CGV). Reprennent la même
   police/couleurs que le reste du site, mais sans le menu fixe ni le
   défilement par sections : juste un titre, du texte, et des liens de
   navigation entre elles. Très peu de CSS nécessaire, le design est déjà
   presque entièrement couvert par les règles existantes plus haut dans ce
   fichier (h2, h4, .texte, .condition, a.lien...). */

body.page-legale-corps {
  background-color: var(--clair);
  min-height: 100%;
}

.entete-legale {
  padding: 50px;
  border-bottom: 1px solid var(--moyen);
}

.entete-legale a {
  font-family: 'General Sans', sans-serif;
  color: var(--sombre);
  text-decoration: none;
  letter-spacing: 0.05em;
}

.entete-legale a:hover {
  font-weight: 600;
}

.page-legale {
  padding: 50px;
}

.page-legale .conteneur {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
}

.page-legale p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--sombre);
  margin-bottom: 20px;
}

.page-legale a.lien {
  color: var(--sombre);
}

a.lien-suivant {
  display: inline-block;
  margin-top: 40px;
  font-family: 'General Sans', sans-serif;
  color: var(--moyen);
  font-weight: 600;
  text-decoration: none;
}

a.lien-suivant:hover {
  font-weight: 400;
}

/* Texte invisible à l'écran mais lisible par Google/les IA et les lecteurs
   d'écran — ajouté le 25/09/2026 à côté des titres décoratifs (] URBAN [...)
   qui ne veulent rien dire seuls pour une machine. Ne change rien visuellement. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}




/* ============================================================
   IMAGES DE FOND ALLÉGÉES — mobile (ajouté le 09/10/2026, PageSpeed)
   Versions AVIF "-m" (côté court 900 px) pour les écrans étroits ;
   les versions bureau (côté long 1920 px max) restent la règle par
   défaut plus haut. #image-info est piloté par script.js (style inline).
   ============================================================ */
/* Images de fond du bas de page : chargées seulement quand script.js ajoute la classe "charge"
   (le visiteur s'approche de la section). #image-intro reste chargée tout de suite (haut de page). */
#image-urban.charge   { background-image: url('images/urban-info-service-recherche-archives-analyse-urbanistique-expertise-technique-bien-immobilier-bruxelles-002.avif'); }
#image-conseil.charge { background-image: url('images/urban-info-service-recherche-archives-analyse-urbanistique-expertise-technique-bien-immobilier-bruxelles-005.avif'); }
@media (max-width: 768px) {
  #intro                { background-image: url('images/urban-info-service-recherche-archives-analyse-urbanistique-expertise-technique-bien-immobilier-bruxelles-0011-m.avif'); }
  #image-urban.charge   { background-image: url('images/urban-info-service-recherche-archives-analyse-urbanistique-expertise-technique-bien-immobilier-bruxelles-002-m.avif'); }
  #image-conseil.charge { background-image: url('images/urban-info-service-recherche-archives-analyse-urbanistique-expertise-technique-bien-immobilier-bruxelles-005-m.avif'); }
}